/*
 * Port Beirut Lab — UI kit
 * Reproduces the Mantine v7 default theme used by the original Next.js frontend.
 */

:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --white: #fff;
  --black: #000;
  --text: #000;
  --dimmed: #868e96;
  --body: #fff;
  --border: #dee2e6;
  --input-border: #ced4da;

  --gray-0: #f8f9fa; --gray-1: #f1f3f5; --gray-2: #e9ecef; --gray-3: #dee2e6; --gray-4: #ced4da;
  --gray-5: #adb5bd; --gray-6: #868e96; --gray-7: #495057; --gray-8: #343a40; --gray-9: #212529;
  --dark-6: #2e2e2e; --dark-7: #1f1f1f;

  --blue-0: #e7f5ff; --blue-1: #d0ebff; --blue-6: #228be6; --blue-7: #1c7ed6; --blue-8: #1971c2; --blue-9: #1864ab;
  --red-6: #fa5252; --red-7: #f03e3e; --red-8: #e03131;
  --green-6: #40c057; --green-7: #37b24d; --green-8: #2f9e44;
  --yellow-6: #fab005; --yellow-7: #f59f00; --yellow-8: #f08c00;
  --orange-6: #fd7e14; --orange-7: #f76707;
  --cyan-6: #15aabf; --cyan-7: #1098ad;
  --teal-6: #12b886; --teal-7: #0ca678;
  --grape-6: #be4bdb; --violet-6: #7950f2; --indigo-6: #4c6ef5; --pink-6: #e64980; --lime-6: #82c91e;

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 32px;
  --sp-xs: 10px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 20px; --sp-xl: 32px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), rgba(0,0,0,.05) 0 10px 15px -5px, rgba(0,0,0,.04) 0 7px 7px -5px;
  --shadow-md: 0 1px 3px rgba(0,0,0,.05), rgba(0,0,0,.05) 0 20px 25px -5px, rgba(0,0,0,.04) 0 10px 10px -5px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--text);
  background: var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-6); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.3; }
h1, .h1 { font-size: 34px; }
h2, .h2 { font-size: 26px; line-height: 1.35; }
h3, .h3 { font-size: 22px; line-height: 1.4; }
h4, .h4 { font-size: 18px; line-height: 1.45; }
h5, .h5 { font-size: 16px; line-height: 1.5; }
h6, .h6 { font-size: 14px; line-height: 1.5; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 13px; background: var(--gray-0); padding: 1px 5px; border-radius: var(--radius-sm); }
hr, .divider { border: 0; border-top: 1px solid var(--border); margin: var(--sp-md) 0; }

/* ------------------------------------------------------------------ text utilities */
.dimmed { color: var(--dimmed); }
.text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-md { font-size: 16px; } .text-lg { font-size: 18px; } .text-xl { font-size: 20px; }
.fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.upper { text-transform: uppercase; } .center { text-align: center; } .right { text-align: right; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mono { font-family: var(--mono); }
.c-blue { color: var(--blue-6); } .c-blue7 { color: var(--blue-7); } .c-blue8 { color: var(--blue-8); } .c-blue9 { color: var(--blue-9); }
.c-red { color: var(--red-6); } .c-green { color: var(--green-6); } .c-orange { color: var(--orange-6); } .c-yellow { color: var(--yellow-7); }
.c-dark { color: var(--dark-7); } .c-dark6 { color: var(--dark-6); } .c-gray7 { color: var(--gray-7); }
.pre-wrap { white-space: pre-wrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ layout utilities */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-md); }
.container-xl { max-width: 1320px; } .container-lg { max-width: 1140px; } .container-md { max-width: 960px; } .container-sm { max-width: 720px; } .container-xs { max-width: 540px; }
.container-fluid { max-width: none; }
.stack { display: flex; flex-direction: column; gap: var(--sp-md); }
.stack-xs { gap: var(--sp-xs) !important; } .stack-sm { gap: var(--sp-sm) !important; } .stack-lg { gap: var(--sp-lg) !important; } .stack-xl { gap: var(--sp-xl) !important; }
.gap-4 { gap: 4px !important; } .gap-0 { gap: 0 !important; }
.group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-md); }
.group.nowrap { flex-wrap: nowrap; }
.group.between { justify-content: space-between; } .group.end { justify-content: flex-end; } .group.gcenter { justify-content: center; }
.group.top { align-items: flex-start; } .group.bottom { align-items: flex-end; }
.group-xs { gap: var(--sp-xs) !important; } .group-sm { gap: var(--sp-sm) !important; } .group-lg { gap: var(--sp-lg) !important; }
.grow { flex: 1 1 0; min-width: 0; }
.grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.grid.g-lg { gap: var(--sp-lg); } .grid.g-xl { gap: var(--sp-xl); } .grid.g-sm { gap: var(--sp-sm); }
.cols-2 { --cols: 2; } .cols-3 { --cols: 3; } .cols-4 { --cols: 4; } .cols-5 { --cols: 5; } .cols-6 { --cols: 6; }
@media (max-width: 1199px) { .lg-cols-2 { --cols: 2; } .lg-cols-3 { --cols: 3; } }
@media (max-width: 991px)  { .md-cols-1 { --cols: 1; } .md-cols-2 { --cols: 2; } .md-cols-3 { --cols: 3; } }
@media (max-width: 767px)  { .sm-cols-1 { --cols: 1; } .sm-cols-2 { --cols: 2; } }
@media (max-width: 575px)  { .xs-cols-1 { --cols: 1; } }
.mt-0 { margin-top: 0 !important; } .mt-xs { margin-top: var(--sp-xs); } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } .mt-xl { margin-top: var(--sp-xl); }
.mb-0 { margin-bottom: 0 !important; } .mb-xs { margin-bottom: var(--sp-xs); } .mb-sm { margin-bottom: var(--sp-sm); } .mb-md { margin-bottom: var(--sp-md); } .mb-lg { margin-bottom: var(--sp-lg); } .mb-xl { margin-bottom: var(--sp-xl); }
.my-xl { margin-top: var(--sp-xl); margin-bottom: var(--sp-xl); }
.p-0 { padding: 0 !important; } .p-xs { padding: var(--sp-xs); } .p-sm { padding: var(--sp-sm); } .p-md { padding: var(--sp-md); } .p-lg { padding: var(--sp-lg); } .p-xl { padding: var(--sp-xl); }
.py-xl { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); } .py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.w-100 { width: 100%; } .mx-auto { margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-sm-only { display: none !important; } }
@media (max-width: 991px) { .hide-md { display: none !important; } }
@media (min-width: 992px) { .show-md-only { display: none !important; } }
@media (max-width: 575px) { .hide-xs { display: none !important; } }

/* ------------------------------------------------------------------ paper / card */
.paper, .card { background: var(--white); border-radius: var(--radius-sm); position: relative; }
.card { padding: var(--sp-md); display: flex; flex-direction: column; }
.with-border { border: 1px solid var(--border); }
.radius-md { border-radius: var(--radius-md) !important; } .radius-lg { border-radius: var(--radius-lg) !important; } .radius-xl { border-radius: var(--radius-xl) !important; }
.shadow-xs { box-shadow: var(--shadow-xs); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); }
.card-section { margin: 0 calc(var(--sp-md) * -1); padding: var(--sp-sm) var(--sp-md); }
.card-section.bordered { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.card-section:first-child { margin-top: calc(var(--sp-md) * -1); }
a.card { color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: var(--shadow-md); }
.clickable { cursor: pointer; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --c: var(--blue-6); --c-hover: var(--blue-7); --c-light: rgba(34,139,230,.1); --c-light-hover: rgba(34,139,230,.12);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  background: var(--c); color: #fff; text-decoration: none !important; user-select: none; transition: background-color .1s;
}
.btn:hover { background: var(--c-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { background: var(--gray-2) !important; color: var(--gray-5) !important; border-color: transparent !important; cursor: not-allowed; transform: none; }
.btn .ti { font-size: 18px; }
.btn-xs { height: 30px; padding: 0 14px; font-size: 12px; } .btn-xs .ti { font-size: 14px; }
.btn-compact { height: 26px; padding: 0 8px; font-size: 13px; }
.btn-md { height: 42px; padding: 0 22px; font-size: 16px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 18px; }
.btn-block { width: 100%; }
.btn.radius-md { border-radius: var(--radius-md); }
.btn-light { background: var(--c-light); color: var(--c); } .btn-light:hover { background: var(--c-light-hover); }
.btn-outline { background: transparent; color: var(--c); border-color: var(--c); } .btn-outline:hover { background: var(--c-light); }
.btn-subtle { background: transparent; color: var(--c); } .btn-subtle:hover { background: var(--c-light); }
.btn-default { background: #fff; color: var(--text); border-color: var(--input-border); } .btn-default:hover { background: var(--gray-0); }
.btn-white { background: #fff; color: var(--c); } .btn-white:hover { background: var(--gray-0); }
.btn.red { --c: var(--red-6); --c-hover: var(--red-7); --c-light: rgba(250,82,82,.1); --c-light-hover: rgba(250,82,82,.15); }
.btn.green { --c: var(--green-6); --c-hover: var(--green-7); --c-light: rgba(64,192,87,.1); --c-light-hover: rgba(64,192,87,.15); }
.btn.orange { --c: var(--orange-6); --c-hover: var(--orange-7); --c-light: rgba(253,126,20,.1); --c-light-hover: rgba(253,126,20,.15); }
.btn.yellow { --c: var(--yellow-6); --c-hover: var(--yellow-7); --c-light: rgba(250,176,5,.1); --c-light-hover: rgba(250,176,5,.15); }
.btn.gray { --c: var(--gray-6); --c-hover: var(--gray-7); --c-light: rgba(134,142,150,.1); --c-light-hover: rgba(134,142,150,.15); }
.btn.teal { --c: var(--teal-6); --c-hover: var(--teal-7); --c-light: rgba(18,184,134,.1); --c-light-hover: rgba(18,184,134,.15); }
.btn.cyan { --c: var(--cyan-6); --c-hover: var(--cyan-7); --c-light: rgba(21,170,191,.1); --c-light-hover: rgba(21,170,191,.15); }
.btn.violet { --c: var(--violet-6); --c-hover: #7048e8; --c-light: rgba(121,80,242,.1); --c-light-hover: rgba(121,80,242,.15); }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6); border-top-color: transparent; animation: spin .7s linear infinite;
}
.btn-light.loading::after, .btn-outline.loading::after, .btn-subtle.loading::after, .btn-default.loading::after { border-color: var(--c); border-top-color: transparent; }

.action-icon {
  --c: var(--gray-7); --c-light: rgba(134,142,150,.12);
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--c); cursor: pointer; font-size: 18px; padding: 0;
}
.action-icon:hover { background: var(--c-light); }
.action-icon.light { background: var(--c-light); }
.action-icon.blue { --c: var(--blue-6); --c-light: rgba(34,139,230,.1); }
.action-icon.red { --c: var(--red-6); --c-light: rgba(250,82,82,.1); }
.action-icon.green { --c: var(--green-6); --c-light: rgba(64,192,87,.1); }
.action-icon.orange { --c: var(--orange-6); --c-light: rgba(253,126,20,.1); }
.action-icon.lg { width: 34px; height: 34px; font-size: 20px; }

/* ------------------------------------------------------------------ badges */
.badge {
  --c: var(--blue-6); --c-light: rgba(34,139,230,.1);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 20px; padding: 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .25px; text-transform: uppercase; white-space: nowrap; line-height: 1;
  border-radius: 1000px; background: var(--c); color: #fff; border: 1px solid transparent; max-width: 100%;
}
.badge.light { background: var(--c-light); color: var(--c); }
.badge.outline { background: transparent; color: var(--c); border-color: var(--c); }
.badge.dot { background: transparent; color: var(--text); border-color: var(--border); }
.badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.badge.sm { height: 18px; font-size: 9px; padding: 0 6px; }
.badge.lg { height: 26px; font-size: 13px; padding: 0 12px; }
.badge.xl { height: 32px; font-size: 16px; padding: 0 16px; }
.badge .ti { font-size: 12px; }
.badge.blue { --c: var(--blue-6); --c-light: rgba(34,139,230,.1); }
.badge.red { --c: var(--red-6); --c-light: rgba(250,82,82,.1); }
.badge.green { --c: var(--green-6); --c-light: rgba(64,192,87,.1); }
.badge.yellow { --c: var(--yellow-6); --c-light: rgba(250,176,5,.1); }
.badge.light.yellow { --c: var(--yellow-8); }
.badge.orange { --c: var(--orange-6); --c-light: rgba(253,126,20,.1); }
.badge.cyan { --c: var(--cyan-6); --c-light: rgba(21,170,191,.1); }
.badge.teal { --c: var(--teal-6); --c-light: rgba(18,184,134,.1); }
.badge.grape, .badge.purple { --c: var(--grape-6); --c-light: rgba(190,75,219,.1); }
.badge.violet { --c: var(--violet-6); --c-light: rgba(121,80,242,.1); }
.badge.indigo { --c: var(--indigo-6); --c-light: rgba(76,110,245,.1); }
.badge.pink { --c: var(--pink-6); --c-light: rgba(230,73,128,.1); }
.badge.gray { --c: var(--gray-6); --c-light: rgba(134,142,150,.1); }
.badge.dark { --c: var(--dark-7); --c-light: rgba(31,31,31,.1); }
.badge.lime { --c: var(--lime-6); --c-light: rgba(130,201,30,.1); }

/* ------------------------------------------------------------------ theme icon / avatar */
.theme-icon {
  --c: var(--blue-6); --c-light: rgba(34,139,230,.1);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--c); color: #fff;
}
.theme-icon.light { background: var(--c-light); color: var(--c); }
.theme-icon.round { border-radius: 50%; }
.theme-icon.s36 { width: 36px; height: 36px; } .theme-icon.s36 .ti { font-size: 20px; }
.theme-icon.s40 { width: 40px; height: 40px; } .theme-icon.s40 .ti { font-size: 22px; }
.theme-icon.s48 { width: 48px; height: 48px; border-radius: var(--radius-md); } .theme-icon.s48 .ti { font-size: 24px; }
.theme-icon.s60 { width: 60px; height: 60px; border-radius: var(--radius-md); } .theme-icon.s60 .ti { font-size: 30px; }
.theme-icon.green { --c: var(--green-6); --c-light: rgba(64,192,87,.1); }
.theme-icon.red { --c: var(--red-6); --c-light: rgba(250,82,82,.1); }
.theme-icon.orange { --c: var(--orange-6); --c-light: rgba(253,126,20,.1); }
.theme-icon.yellow { --c: var(--yellow-6); --c-light: rgba(250,176,5,.12); }
.theme-icon.teal { --c: var(--teal-6); --c-light: rgba(18,184,134,.1); }
.theme-icon.violet { --c: var(--violet-6); --c-light: rgba(121,80,242,.1); }
.theme-icon.cyan { --c: var(--cyan-6); --c-light: rgba(21,170,191,.1); }
.theme-icon.gray { --c: var(--gray-6); --c-light: rgba(134,142,150,.1); }
.theme-icon.teal, .theme-icon.gray.teal { --c: var(--teal-6); --c-light: rgba(18,184,134,.1); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(34,139,230,.1); color: var(--blue-6); font-weight: 700; font-size: 16px; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.avatar.xl { width: 84px; height: 84px; font-size: 32px; }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.field > label, .label { display: inline-block; font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; word-break: break-word; }
.field .required-mark, .label .required-mark { color: var(--red-6); margin-left: 4px; }
.field .description { font-size: 12px; color: var(--dimmed); margin-bottom: 5px; margin-top: -2px; line-height: 1.2; }
.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text); line-height: 34px;
  background: #fff; border: 1px solid var(--input-border); border-radius: var(--radius-sm); outline: none; transition: border-color .1s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue-6); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--gray-1); color: var(--gray-6); cursor: not-allowed; opacity: .8; }
.input[readonly] { background: var(--gray-0); }
.textarea { height: auto; min-height: 60px; padding: 8px 12px; line-height: 1.55; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4 -4l4 4'/%3E%3Cpath d='M16 15l-4 4l-4 -4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-md, .field.md .input, .field.md .select { height: 42px; font-size: 16px; line-height: 40px; }
.field.md > label { font-size: 16px; }
.field .error { font-size: 12px; color: var(--red-6); margin-top: 5px; line-height: 1.2; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--red-6); color: var(--red-6); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .ti.left { position: absolute; left: 10px; color: var(--dimmed); font-size: 16px; pointer-events: none; }
.input-wrap > .input.with-left { padding-left: 34px; }
.input-wrap > .right-section { position: absolute; right: 6px; display: flex; align-items: center; }
.input-wrap > .input.with-right { padding-right: 36px; }
.checkbox, .switch-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; user-select: none; }
.checkbox input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--blue-6); cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch-label .track {
  position: relative; width: 38px; height: 20px; border-radius: 20px; background: var(--gray-2); border: 1px solid var(--gray-3); transition: background .15s; flex-shrink: 0;
}
.switch-label .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s;
}
.switch-label input:checked + .track { background: var(--blue-6); border-color: var(--blue-6); }
.switch-label input:checked + .track::after { left: 20px; }
.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-lg);
  border: 1px dashed var(--input-border); border-radius: var(--radius-sm); color: var(--dimmed); font-size: 14px; cursor: pointer; text-align: center;
}
.file-drop:hover { background: var(--gray-0); }

/* chips (multi select / segmented) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 32px; font-size: 14px; cursor: pointer;
  border: 1px solid var(--input-border); background: #fff; color: var(--gray-7); user-select: none;
}
.chip input:checked + span { background: rgba(34,139,230,.1); border-color: transparent; color: var(--blue-6); }
.chip input:checked + span::before { content: '\2713'; font-weight: 700; font-size: 12px; }
.chip input:focus-visible + span { outline: 2px solid var(--blue-6); outline-offset: 2px; }
.segmented { display: inline-flex; background: var(--gray-1); border-radius: var(--radius-sm); padding: 4px; gap: 2px; }
.segmented button { border: 0; background: transparent; padding: 4px 12px; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-7); font-family: inherit; }
.segmented button.active { background: #fff; box-shadow: var(--shadow-xs); color: var(--text); }

/* combobox (searchable select) */
.combobox { position: relative; }
.combobox-dropdown {
  position: absolute; z-index: 300; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 4px;
}
.combobox-option { padding: 8px 10px; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; }
.combobox-option:hover, .combobox-option.hover { background: var(--gray-1); }
.combobox-option.selected { background: var(--blue-6); color: #fff; }
.combobox-empty { padding: 8px 10px; font-size: 14px; color: var(--dimmed); }
.multi-pills { display: flex; flex-wrap: wrap; gap: 4px; min-height: 36px; padding: 4px 30px 4px 6px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: #fff; align-items: center; cursor: text; }
.multi-pills:focus-within { border-color: var(--blue-6); }
.multi-pills .pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 10px; border-radius: 22px; background: var(--gray-1); font-size: 12px; }
.multi-pills .pill button { border: 0; background: transparent; cursor: pointer; color: var(--gray-6); padding: 0; display: inline-flex; font-size: 14px; }
.multi-pills input { border: 0; outline: none; flex: 1; min-width: 80px; font-size: 14px; font-family: inherit; height: 26px; }

/* ------------------------------------------------------------------ table */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.table th { text-align: left; font-weight: 700; color: var(--text); padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table.striped tbody tr:nth-child(odd) { background: var(--gray-0); }
.table.hover tbody tr:hover { background: var(--gray-1); }
.table.bordered { border: 1px solid var(--border); } .table.bordered th, .table.bordered td { border: 1px solid var(--border); }
.table tr.clickable { cursor: pointer; }
.table .empty-row td { text-align: center; color: var(--dimmed); padding: 24px 10px; }
.table.compact td, .table.compact th { padding: 5px 8px; }
.table-scroll-y { max-height: 420px; overflow-y: auto; }

/* ------------------------------------------------------------------ alerts */
.alert {
  --c: var(--blue-6); --c-light: rgba(34,139,230,.1);
  display: flex; gap: 12px; padding: var(--sp-md); border-radius: var(--radius-sm); background: var(--c-light); font-size: 14px; position: relative;
}
.alert > .ti { color: var(--c); font-size: 20px; flex-shrink: 0; line-height: 1.2; }
.alert .alert-title { font-weight: 700; color: var(--c); margin-bottom: 4px; font-size: 14px; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert.red { --c: var(--red-6); --c-light: rgba(250,82,82,.1); }
.alert.green { --c: var(--green-6); --c-light: rgba(64,192,87,.1); }
.alert.yellow { --c: var(--yellow-8); --c-light: rgba(250,176,5,.1); }
.alert.orange { --c: var(--orange-6); --c-light: rgba(253,126,20,.1); }
.alert.gray { --c: var(--gray-7); --c-light: rgba(134,142,150,.1); }
.alert.outline { background: transparent; border: 1px solid var(--c); }

/* ------------------------------------------------------------------ loader / skeleton */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(34,139,230,.2); border-top-color: var(--blue-6); animation: spin .8s linear infinite; }
.loader.sm { width: 18px; height: 18px; border-width: 2px; } .loader.lg { width: 44px; height: 44px; } .loader.xl { width: 58px; height: 58px; border-width: 5px; }
.center-box { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.page-loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 1000; }
.skeleton { background: linear-gradient(90deg, var(--gray-2) 25%, var(--gray-1) 37%, var(--gray-2) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.progress { height: 8px; border-radius: 8px; background: var(--gray-2); overflow: hidden; }
.progress > div { height: 100%; background: var(--blue-6); border-radius: 8px; transition: width .3s; }
.progress.lg { height: 12px; }

/* ------------------------------------------------------------------ app shell */
.shell-header {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; background: #fff; border-bottom: 1px solid var(--border); z-index: 100;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-md); gap: var(--sp-md);
}
.shell-header .brand { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.burger { display: none; width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm); font-size: 22px; align-items: center; justify-content: center; color: var(--text); }
.burger:hover { background: var(--gray-0); }
.shell-navbar {
  position: fixed; top: 60px; bottom: 0; left: 0; width: var(--nav-w, 280px); background: #fff; border-right: 1px solid var(--border);
  padding: var(--sp-md); display: flex; flex-direction: column; z-index: 99; transition: transform .2s;
}
.shell-navbar .nav-scroll { flex: 1; overflow-y: auto; margin: 0 calc(var(--sp-md) * -1); padding: 0 var(--sp-md); }
.shell-navbar .nav-footer { padding-top: var(--sp-md); }
.shell-main { padding: calc(60px + var(--sp-md)) var(--sp-md) var(--sp-md) calc(var(--nav-w, 280px) + var(--sp-md)); min-height: 100vh; background: #fff; }
.shell-user { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-md); min-width: 0; }
.nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; font-size: 14px; color: var(--text); border-radius: 0;
  text-decoration: none !important; cursor: pointer; border: 0; background: transparent; font-family: inherit; text-align: left;
}
.nav-link:hover { background: var(--gray-0); }
.nav-link.active { background: rgba(34,139,230,.1); color: var(--blue-6); font-weight: 500; }
.nav-link .ti { font-size: 18px; }
.nav-backdrop { display: none; }
@media (max-width: 767px) {
  .burger { display: inline-flex; }
  .shell-navbar { width: 100%; transform: translateX(-100%); }
  body.nav-open .shell-navbar { transform: translateX(0); }
  .shell-main { padding-left: var(--sp-md); }
}

/* ------------------------------------------------------------------ page header */
.page-title-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-7); cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.back-link:hover { color: var(--blue-6); text-decoration: none; }

/* stat cards */
.stat-card { padding: var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.stat-card .stat-label { font-size: 12px; color: var(--dimmed); font-weight: 700; text-transform: uppercase; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 4px; }

/* ------------------------------------------------------------------ tabs */
.tabs-list { display: flex; gap: 0; border-bottom: 2px solid var(--border); overflow-x: auto; margin-bottom: var(--sp-md); }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 400; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; background: transparent; color: var(--text); white-space: nowrap; font-family: inherit;
}
.tab:hover { background: var(--gray-0); border-bottom-color: var(--gray-3); }
.tab.active { border-bottom-color: var(--blue-6); color: var(--text); font-weight: 500; }
.tab .ti { font-size: 16px; }
.tab-panel { display: none; } .tab-panel.active { display: block; }

/* ------------------------------------------------------------------ pagination */
.pagination { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pagination button {
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--input-border); background: #fff; border-radius: var(--radius-sm);
  font-size: 14px; cursor: pointer; font-family: inherit; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.pagination button:hover:not(:disabled) { background: var(--gray-0); }
.pagination button.active { background: var(--blue-6); border-color: var(--blue-6); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .dots { width: 32px; text-align: center; color: var(--gray-6); }

/* ------------------------------------------------------------------ modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; animation: fade .15s; }
.modal { background: #fff; border-radius: var(--radius-sm); width: 100%; max-width: 440px; box-shadow: var(--shadow-md); animation: pop .15s; margin-bottom: 5vh; }
.modal.size-sm { max-width: 380px; } .modal.size-md { max-width: 440px; } .modal.size-lg { max-width: 620px; } .modal.size-xl { max-width: 780px; } .modal.size-xxl { max-width: 1000px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-md); position: sticky; top: 0; background: #fff; border-radius: var(--radius-sm) var(--radius-sm) 0 0; z-index: 2; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; color: var(--gray-6); display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--gray-0); }
.modal-body { padding: 0 var(--sp-md) var(--sp-md); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(-12px); opacity: 0; } }

/* ------------------------------------------------------------------ notifications */
.notify-stack { position: fixed; bottom: 16px; right: 16px; z-index: 600; display: flex; flex-direction: column; gap: 10px; width: 440px; max-width: calc(100vw - 32px); }
.notify {
  --c: var(--blue-6);
  position: relative; display: flex; gap: 12px; padding: 10px 14px 10px 22px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); border: 1px solid var(--gray-2); animation: slidein .2s; overflow: hidden;
}
.notify::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 6px; border-radius: 4px; background: var(--c); }
.notify.red { --c: var(--red-6); } .notify.green { --c: var(--green-6); } .notify.yellow { --c: var(--yellow-6); } .notify.orange { --c: var(--orange-6); }
.notify .n-body { flex: 1; min-width: 0; }
.notify .n-title { font-size: 14px; font-weight: 500; line-height: 1.55; }
.notify .n-msg { font-size: 14px; color: var(--dimmed); line-height: 1.55; word-break: break-word; }
.notify .modal-close { flex-shrink: 0; }
@keyframes slidein { from { transform: translateY(20px); opacity: 0; } }

/* ------------------------------------------------------------------ timeline */
.timeline { position: relative; padding-left: 4px; }
.timeline-item { position: relative; padding-left: 34px; padding-bottom: var(--sp-lg); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--gray-3); }
.timeline-item.active::before { background: var(--line, var(--blue-6)); }
.timeline-item:last-child::before { display: none; }
.timeline-bullet {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gray-3); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.timeline-item.active .timeline-bullet { background: var(--blue-6); border-color: var(--blue-6); }
.timeline-title { font-size: 14px; font-weight: 500; line-height: 1.4; }

/* stepper (sample progress) */
.stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 80px; position: relative; text-align: center; }
.step::after { content: ''; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--gray-3); }
.step:last-child::after { display: none; }
.step.done::after { background: var(--blue-6); }
.step-icon { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gray-3); background: var(--gray-0); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--gray-6); z-index: 1; }
.step.done .step-icon { background: var(--blue-6); border-color: var(--blue-6); color: #fff; }
.step.current .step-icon { border-color: var(--blue-6); color: var(--blue-6); background: #fff; }
.step-label { font-size: 12px; font-weight: 500; color: var(--gray-7); }
.step.done .step-label, .step.current .step-label { color: var(--text); }

/* key/value list */
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--dimmed); font-weight: 500; }
.kv dd { margin: 0; word-break: break-word; }
.info-label { font-size: 12px; color: var(--dimmed); font-weight: 500; text-transform: uppercase; letter-spacing: .3px; }
.info-value { font-size: 14px; font-weight: 500; word-break: break-word; }

/* tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--gray-9); color: #fff; font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-sm);
  white-space: nowrap; z-index: 500; pointer-events: none; text-transform: none; letter-spacing: 0;
}

/* empty state */
.empty { text-align: center; padding: 40px 16px; color: var(--dimmed); }
.empty .ti { font-size: 48px; color: var(--gray-4); display: block; margin: 0 auto 8px; }

/* printing */
@media print {
  .no-print, .shell-header, .shell-navbar, .notify-stack { display: none !important; }
  .shell-main { padding: 0 !important; }
  body { background: #fff; }
}

/* gradient variant (Mantine variant="gradient") */
.btn-gradient { background: linear-gradient(45deg, var(--blue-6) 0%, var(--cyan-6) 100%); color: #fff; border: 0; }
.btn-gradient:hover { background: linear-gradient(45deg, var(--blue-7) 0%, var(--cyan-7) 100%); }
.text-gradient { background: linear-gradient(135deg, var(--blue-6) 0%, var(--cyan-6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-2xl { font-size: 24px; line-height: 1.3; }
.bg-gray0 { background: var(--gray-0) !important; }
.bg-red0 { background: #fff5f5 !important; }
.shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,.05), rgba(0,0,0,.05) 0 36px 28px -7px, rgba(0,0,0,.04) 0 17px 17px -7px; }
.chart-box { position: relative; height: 350px; }

/* menu (Mantine Menu) */
.menu-dropdown { position: fixed; z-index: 450; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 4px; max-height: 70vh; overflow-y: auto; animation: fade .1s; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px; font-size: 14px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); }
.menu-item:hover:not(:disabled) { background: var(--gray-1); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-item .ti { font-size: 16px; }
.menu-item.red { color: var(--red-6); } .menu-item.green { color: var(--green-6); } .menu-item.yellow { color: var(--yellow-7); } .menu-item.blue { color: var(--blue-6); }
.menu-label { padding: 6px 12px 2px; font-size: 12px; font-weight: 500; color: var(--dimmed); }
.menu-divider { border-top: 1px solid var(--gray-2); margin: 4px 0; }

/* accordion (contained) */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-0); }
.accordion-control { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.accordion-control:hover { background: var(--gray-1); }
.accordion-control .chev { margin-left: auto; transition: transform .2s; font-size: 18px; color: var(--gray-6); }
.accordion.open .accordion-control .chev { transform: rotate(180deg); }
.accordion-panel { display: none; padding: 4px 16px 16px; background: #fff; border-top: 1px solid var(--border); }
.accordion.open .accordion-panel { display: block; }
.divider-label { display: flex; align-items: center; gap: 10px; color: var(--dimmed); font-size: 12px; }
.divider-label::before, .divider-label::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.bg-blue0 { background: var(--blue-0) !important; }
.bg-gray1 { background: var(--gray-1) !important; }
.lift { transition: transform .2s, box-shadow .2s; cursor: pointer; height: 100%; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,.12); }
.stat-box { padding: 16px; background: var(--gray-0); border-radius: 8px; margin-top: 8px; }