:root {
  --bg: #f7f4f4;
  --bg-2: #efe8e9;
  --panel: rgba(255, 255, 255, .96);
  --panel-soft: #ffffff;
  --border: rgba(89, 24, 35, .11);
  --border-strong: rgba(111, 13, 30, .20);
  --text: #271b1d;
  --muted: #786b6e;
  --muted-2: #9a8d90;
  --red: #7b0d1d;
  --red-2: #a5122a;
  --red-3: #c5253f;
  --blue: #6b7280;
  --green: #16805d;
  --ink: #271b1d;
  --wine: #650b19;
  --wine-dark: #430710;
  --rose: #f9edef;
  --shadow: 0 18px 55px rgba(73, 22, 31, .09);
}

html { color-scheme: light; scroll-behavior: smooth; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 5%, rgba(165, 18, 42, .08), transparent 27rem),
    radial-gradient(circle at 18% 82%, rgba(123, 13, 29, .055), transparent 30rem),
    linear-gradient(145deg, #faf8f8 0%, #f4eeee 100%);
  font-family: Aptos, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image: radial-gradient(rgba(101, 11, 25, .13) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

::selection { color: #fff; background: var(--red-2); }

* { scrollbar-width: thin; scrollbar-color: rgba(123, 13, 29, .28) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(123, 13, 29, .28); background-clip: padding-box; }

.glass {
  border-color: var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.kicker {
  color: var(--red-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
}

a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(165, 18, 42, .16);
  outline-offset: 2px;
}

input, textarea, select {
  border-color: var(--border-strong) !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 2px rgba(70, 16, 25, .025);
}
input::placeholder, textarea::placeholder { color: #aa9da0 !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(165, 18, 42, .55) !important;
  box-shadow: 0 0 0 4px rgba(165, 18, 42, .08) !important;
}

.primary-button,
.secondary-button,
.ghost-button,
.back-button,
.danger-button {
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.primary-button {
  border: 1px solid rgba(67, 7, 16, .1);
  background: linear-gradient(135deg, #a5122a, #650b19 82%);
  box-shadow: 0 12px 24px rgba(101, 11, 25, .20), inset 0 1px rgba(255, 255, 255, .22);
  color: #fff;
}
.primary-button:hover { transform: translateY(-2px); background: linear-gradient(135deg, #bb1834, #760e20); box-shadow: 0 16px 30px rgba(101, 11, 25, .24); }
.secondary-button, .ghost-button, .back-button {
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--red);
  box-shadow: 0 5px 15px rgba(73, 22, 31, .055);
}
.secondary-button:hover, .ghost-button:hover, .back-button:hover { transform: translateY(-1px); border-color: rgba(165, 18, 42, .32); background: var(--rose); }

.login-page { padding: clamp(18px, 3vw, 44px); }
.login-wrap {
  width: min(1220px, 100%);
  min-height: min(720px, calc(100vh - 88px));
  grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(89, 24, 35, .10);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 32px 100px rgba(74, 17, 28, .16);
}
.login-brand-panel {
  min-width: 0;
  padding: clamp(38px, 5vw, 72px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.12), transparent 15rem),
    linear-gradient(145deg, #8c1024 0%, #650b19 55%, #430710 100%);
  box-shadow: none;
}
.login-brand-panel::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: 9%;
  right: 8%;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 44px;
  transform: rotate(18deg);
  box-shadow: 0 0 0 44px rgba(255,255,255,.025), 0 0 0 88px rgba(255,255,255,.018);
}
.login-brand-panel::after {
  width: 460px;
  height: 460px;
  right: -190px;
  bottom: -220px;
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 0 0 74px rgba(255,255,255,.026), 0 0 0 148px rgba(255,255,255,.016);
}
.login-logo { width: min(520px, 90%); filter: brightness(0) invert(1); }
.login-copy .kicker { color: rgba(255,255,255,.7); }
.login-copy h1 { color: #fff; text-wrap: balance; }
.login-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 64px);
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.login-card-head img { width: 54px; height: 54px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: linear-gradient(145deg, #a5122a, #650b19); }
.login-card h2 { color: var(--ink); font-size: clamp(24px, 2.2vw, 31px); letter-spacing: -.04em; }
.login-form { gap: 19px; margin-top: 40px; }
.login-form label > span, .field > span, .date-filters label > span, .select-box > span { color: #66595c; }
.login-form input { height: 52px; border-radius: 13px; }
.remember-login-option input { accent-color: var(--red-2); }
.login-error { border: 1px solid rgba(165,18,42,.16); border-radius: 12px; background: var(--rose); color: var(--red); }
.demo-note, .small-note { color: #8f8285; }

.app-page { overflow-x: hidden; }
.ambient { filter: blur(100px); opacity: .11; }
.ambient-red { width: 560px; height: 560px; left: auto; right: -250px; top: -260px; background: #b91531; }
.ambient-blue { width: 420px; height: 420px; right: auto; left: 15%; top: 62%; background: #d9aab1; opacity: .10; }
.app-shell { grid-template-columns: 286px minmax(0, 1fr); gap: 18px; padding: 16px; }
.sidebar.glass {
  top: 16px;
  height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 14px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 3%, rgba(255,255,255,.11), transparent 13rem),
    linear-gradient(165deg, #820e21 0%, #620a18 44%, #430710 100%);
  box-shadow: 0 25px 60px rgba(66, 7, 17, .25), inset -1px 0 rgba(255,255,255,.04);
  color: #fff;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.brand-mini { gap: 13px; margin: 0 5px 9px; padding: 6px 5px 21px; border-bottom-color: rgba(255,255,255,.13); }
.brand-mini img { width: 68px; height: 68px; flex: 0 0 68px; object-fit: contain; padding: 0; border: 0; border-radius: 15px; background: transparent; box-shadow: none; }
.brand-mini strong {
  color: #fff;
  font-size: 23px;
  font-weight: 880;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 6px 20px rgba(255,255,255,.12);
}
.nav-list { gap: 5px; margin-top: 11px; }
.nav-link {
  min-height: 53px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 720;
}
.nav-link:hover, .nav-link.parent-active { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.075); color: #fff; }
.nav-link.active {
  border-color: rgba(255,255,255,.72);
  background: #fff;
  color: var(--wine);
  box-shadow: 0 12px 24px rgba(37,0,7,.19);
}
.nav-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}
.nav-link.active .nav-symbol { border-color: rgba(165,18,42,.10); background: var(--rose); color: var(--red-2); }
.chevron { color: rgba(255,255,255,.48); font-size: 17px; }
.nav-link.active .chevron { color: var(--red); }
.nav-submenu { position: relative; margin: 1px 5px 5px 17px; padding: 2px 0 3px 41px; }
.nav-submenu::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 9px; width: 1px; background: rgba(255,255,255,.18); }
.nav-sublink {
  position: relative;
  padding: 8px 8px 8px 13px;
  border: 0;
  border-radius: 9px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 750;
}
.nav-sublink::before { content: ""; position: absolute; left: -25px; top: 50%; width: 19px; height: 1px; background: rgba(255,255,255,.18); }
.nav-sublink:hover, .nav-sublink.active { border-left: 0; background: rgba(255,255,255,.08); color: #fff; }

.main-area { min-width: 0; }
.topbar.glass {
  position: sticky;
  top: 16px;
  z-index: 220;
  min-height: 76px;
  padding: 13px 16px 13px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 14px 40px rgba(76, 21, 31, .08);
}
.topbar h1 { margin-top: 4px; color: var(--ink); font-size: 21px; }
.topbar-actions { gap: 8px; }
.global-search > label {
  border-color: var(--border);
  border-radius: 13px;
  background: #f8f4f4;
  color: var(--red);
}
.global-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.global-search > label:focus-within { border-color: rgba(165,18,42,.28); background: #fff; box-shadow: 0 0 0 4px rgba(165,18,42,.06); }
.notification-button, .topbar-icon-button, .topbar-logout-button, .mobile-toggle {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--red);
  box-shadow: 0 5px 14px rgba(73,22,31,.06);
}
.notification-button:hover, .topbar-icon-button:hover, .topbar-logout-button:hover, .mobile-toggle:hover { border-color: rgba(165,18,42,.24); background: var(--rose); color: var(--red); transform: translateY(-1px); }
.topbar-logout-button { border-color: rgba(165,18,42,.16); background: var(--rose); color: var(--red); }
.topbar-account { border-color: var(--border); background: #f8f4f4; color: var(--ink); }
.topbar-account strong { color: var(--ink); }
.topbar-account .topbar-separator { color: #c3b8ba; }
.viewer-badge, .viewer-badge.admin-badge { border-color: rgba(165,18,42,.14); background: #fae9ec; color: var(--red); }
.today { color: var(--muted); }
.notification-panel, .search-dropdown, .company-picker-menu { background: rgba(255,255,255,.98); box-shadow: 0 22px 60px rgba(66, 11, 22, .16); }
.notification-head button { color: var(--red-2); }
.notification-item { border-color: transparent; color: var(--ink); }
.notification-item:hover { border-color: var(--border); background: #faf6f6; }
.notification-item.unread { border-color: rgba(165,18,42,.12); background: var(--rose); }
.notification-item.unread .notification-mark { background: var(--red-2); box-shadow: 0 0 0 4px rgba(165,18,42,.09); }

.view { padding: 22px 1px 44px; }
.view > .page-intro,
.detail-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 148px;
  margin: 0 0 18px;
  padding: 28px 136px 28px 30px;
  border: 1px solid var(--border);
  border-radius: 23px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    var(--rose);
  box-shadow: 0 14px 36px rgba(73,22,31,.065);
}
.view > .page-intro::before,
.detail-page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -38px;
  top: -82px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(165,18,42,.10);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 60%, rgba(165,18,42,.10), transparent 57%);
  box-shadow: 0 0 0 34px rgba(165,18,42,.027), 0 0 0 68px rgba(165,18,42,.017);
}
.view > .page-intro::after,
.detail-page-head::after {
  content: var(--page-icon, "◆");
  position: absolute;
  z-index: -1;
  right: 37px;
  top: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  transform: translateY(-50%) rotate(4deg);
  background: linear-gradient(145deg, #b61833, #650b19);
  box-shadow: 0 15px 30px rgba(101,11,25,.20), inset 0 1px rgba(255,255,255,.2);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}
.view > .page-intro > *, .detail-page-head > * { position: relative; z-index: 1; }
.page-intro h2, .detail-title-row h2 { color: var(--ink); letter-spacing: -.045em; text-wrap: balance; }
.page-intro h2 { font-size: clamp(28px, 3vw, 39px); }
.page-intro p, .detail-title-row p { max-width: 720px; color: var(--muted); line-height: 1.6; }
.detail-page-head { display: grid; align-content: center; gap: 21px; }
.back-button { min-height: 40px; }

#view-home { --page-icon: "⌂"; }
#view-orders, #view-order-detail { --page-icon: "▤"; }
#view-future-goods, #view-future-goods-detail { --page-icon: "↓"; }
#view-companies { --page-icon: "◎"; }
#view-current { --page-icon: "₺"; }
#view-export-ratios, #view-export-ratio-detail { --page-icon: "↗"; }
#view-export-overview { --page-icon: "$"; }
#view-import-price-history { --page-icon: "↙"; }
#view-import-order-notes { --page-icon: "✎"; }
#view-stock { --page-icon: "◇"; }
#view-requests { --page-icon: "+"; }
#view-templates { --page-icon: "▦"; }
#view-stock-descriptions { --page-icon: "≡"; }
#view-security { --page-icon: "⚙"; }

.panel, .summary-card, .detail-summary > div, .dashboard-card {
  border-color: var(--border) !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(73,22,31,.065) !important;
}
.panel { border-radius: 20px; }
.panel-head h3 { color: var(--ink); letter-spacing: -.025em; }
.dashboard-card { overflow: hidden; }
.dashboard-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(to bottom, var(--red-3), var(--wine)); }
.dashboard-card:hover { border-color: rgba(165,18,42,.24) !important; box-shadow: 0 18px 42px rgba(73,22,31,.10) !important; }
.dashboard-card strong, .summary-card strong, .detail-summary strong { color: var(--ink); }
.dashboard-card i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--rose); color: var(--red-2); }
.security-health-grid > div, .mini-info-grid > div, .modal-summary div {
  border-color: var(--border) !important;
  background: #fbf8f8 !important;
}
.security-health-grid strong { color: #167657; }
.summary-card, .detail-summary > div { position: relative; overflow: hidden; }
.summary-card::after, .detail-summary > div::after { content: ""; position: absolute; right: -24px; bottom: -30px; width: 85px; height: 85px; border-radius: 50%; background: rgba(165,18,42,.045); }

.order-list { gap: 12px; }
.order-row, .current-row, .current-payment-row, .request-card, .request-sheet-row, .company-picker-option {
  border-color: var(--border) !important;
  background: #fff !important;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(73,22,31,.045);
}
.order-row:hover, .current-row:hover, .current-payment-row:hover, .request-card:hover, .request-sheet-row:hover, .company-picker-option:hover {
  border-color: rgba(165,18,42,.22) !important;
  background: #fffafa !important;
  box-shadow: 0 14px 32px rgba(73,22,31,.08);
}
.company-mark { background: var(--rose); color: var(--red-2); }
.company-mark.usd { background: #f2eeee; color: #60565a; }
.order-main strong, .order-stat strong, .current-row strong, .request-card-main > strong { color: var(--ink); }
.row-arrow { color: var(--red-2); }
.request-card-main p, .request-card-facts strong { color: var(--ink); }
.request-card-facts > div { border-color: var(--border) !important; background: #fbf8f8 !important; }
.request-status.kapalı { background: #f1eded; color: #74676a; }

.company-picker-button { border-color: var(--border-strong); background: #fff; color: var(--ink); box-shadow: 0 14px 34px rgba(73,22,31,.08); }
.company-picker-button:hover, .company-picker.open .company-picker-button { border-color: rgba(165,18,42,.30); background: #fff; }
.company-picker-button i { background: var(--rose); color: var(--red); }
.company-picker.open .company-picker-button i { background: var(--red); color: #fff; }
.company-picker-search { border-color: var(--border); background: #faf6f6; }
.company-picker-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.company-picker-option.selected { border-color: rgba(165,18,42,.22) !important; background: var(--rose) !important; }
.company-picker-option b { color: var(--ink); }

.detail-table-wrap, .request-table-wrap, .audit-table-wrap { border-radius: 15px; }
.detail-table th, .request-sheet-head, .data-table th {
  border-color: rgba(123,13,29,.09) !important;
  background: #f8eeee !important;
  color: var(--red) !important;
  font-weight: 900;
  letter-spacing: .07em;
}
.detail-table td, .data-table td {
  border-color: rgba(89,24,35,.08) !important;
  color: #5b4e51;
}
.detail-table tr:hover td, .data-table tr:hover td { background: #fffafa; }
.detail-table td strong, .data-table td strong, .request-sheet-row strong { color: var(--ink); }
.detail-table th { background: #f8eeee !important; }
.stock-track { background: #eee6e7; }
.stock-track span { background: linear-gradient(90deg, var(--wine), var(--red-3)); box-shadow: none; }
.rank { color: var(--red-2); }

.compact-search, .date-filters, .current-filter-bar, .security-tabs button, .status-chip {
  border-color: var(--border) !important;
  background: #fff !important;
  color: var(--ink);
}
.compact-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.security-tabs button { color: #75676a; }
.security-tabs button.active { border-color: rgba(165,18,42,.22) !important; background: var(--rose) !important; color: var(--red); box-shadow: inset 0 -2px var(--red-2); }
.status-chip { color: #6e6063; }
.status-chip.warning { border-color: rgba(183,116,13,.16) !important; background: #fff7df !important; color: #8b5c0d; }
.field textarea, textarea { border-radius: 12px; }
.upload-dropzone, .file-dropzone, .template-upload-zone { border-color: rgba(165,18,42,.20) !important; background: #fdf8f8 !important; }
.upload-dropzone:hover, .file-dropzone:hover, .template-upload-zone:hover { border-color: rgba(165,18,42,.42) !important; background: var(--rose) !important; }

.finance-alert-panel { border-color: rgba(181,119,20,.16) !important; background: #fffaf0 !important; }
.finance-alert-chip { border-color: rgba(181,119,20,.18); background: #fff8e6; color: #8d5d0b; }
.order-status-badge.ordered { border-color: rgba(181,119,20,.22); background: #fff7df; color: #8b5c0d; }
.order-status-badge.arrived { border-color: rgba(22,128,93,.18); background: #eaf8f3; color: #126f51; }
.order-status-badge.customs { border-color: rgba(37,99,235,.22); background: #eef5ff; color: #1d4f9c; }
.current-payment-date.final-payment-date { border-color: rgba(165,18,42,.10) !important; background: #faf5f5 !important; }
.current-payment-date.final-payment-date strong { color: var(--ink); }
.finance-value-chip { border-color: var(--border) !important; background: #faf7f7 !important; color: var(--ink) !important; }
.finance-value-chip b { color: var(--ink) !important; }
.readonly-payment-status.paid, .payment-status-badge.paid { border-color: rgba(22,128,93,.18) !important; background: #eaf8f3 !important; color: #126f51 !important; }
.readonly-payment-status.unpaid, .payment-status-badge.unpaid { border-color: rgba(165,18,42,.16) !important; background: var(--rose) !important; color: var(--red) !important; }

.modal-backdrop { background: rgba(49, 7, 15, .58); backdrop-filter: blur(10px); }
.order-modal, .upload-modal, .preview-modal, .form-modal, .confirm-modal, .access-denied-modal, .sensitive-orders-modal, .payment-alert-modal, .welcome-card {
  border-color: rgba(255,255,255,.65);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(43,3,11,.28);
}
.modal-close { border: 1px solid var(--border); background: #f8f2f3; color: var(--red); }
.modal-close:hover { background: var(--rose); color: var(--red); }
.toast { border-color: rgba(255,255,255,.15); background: #4c0814; color: #fff; box-shadow: 0 18px 44px rgba(56,5,14,.28); }
.side-order-notification { border-color: rgba(255,255,255,.16); background: linear-gradient(145deg, #8d1025, #520812); color: #fff; }
.side-order-notification .kicker { color: rgba(255,255,255,.65); }
.welcome-card .kicker { color: var(--red-2); }
.welcome-card h2, .welcome-card strong { color: var(--ink); }
.access-denied-icon, .orders-sensitive-icon { background: var(--rose); color: var(--red); }

@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 254px minmax(0, 1fr); }
  .sidebar.glass { padding-inline: 11px; }
  .nav-link { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .global-search { display: none; }
  .topbar-account { max-width: 220px; }
  .dashboard-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .login-wrap { grid-template-columns: 1fr; min-height: auto; border-radius: 28px; }
  .login-brand-panel { min-height: 390px; }
  .login-card { min-height: 500px; }
  .app-shell { grid-template-columns: 1fr; padding: 10px; }
  .sidebar.glass { left: 10px; top: 10px; width: min(290px, calc(100vw - 20px)); height: calc(100vh - 20px); z-index: 400; }
  .topbar.glass { top: 10px; }
  .view > .page-intro, .detail-page-head { padding-left: 24px; }
}

@media (max-width: 760px) {
  body::before { opacity: .24; }
  .login-page { padding: 10px; }
  .login-brand-panel { min-height: 350px; padding: 30px; }
  .login-card { min-height: 470px; padding: 30px 24px; }
  .topbar.glass { min-height: 66px; padding: 11px 12px; border-radius: 18px; }
  .topbar-title .kicker { display: none; }
  .topbar h1 { margin: 0; font-size: 18px; }
  .topbar-account, .global-search, .today { display: none; }
  .topbar-actions { margin-left: auto; }
  .view { padding-top: 15px; }
  .view > .page-intro, .detail-page-head {
    min-height: 0;
    align-items: stretch;
    padding: 24px 22px;
    border-radius: 20px;
  }
  .view > .page-intro::after, .detail-page-head::after { right: 20px; top: 20px; width: 48px; height: 48px; transform: none rotate(4deg); border-radius: 15px; font-size: 22px; opacity: .16; }
  .view > .page-intro::before, .detail-page-head::before { opacity: .55; }
  .page-intro h2 { max-width: calc(100% - 36px); font-size: 28px; }
  .dashboard-card-grid { grid-template-columns: 1fr 1fr; }
  .panel, .detail-panel { padding: 18px; }
  .summary-grid.two, .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .login-brand-panel { min-height: 310px; }
  .login-copy h1 { font-size: 36px; }
  .dashboard-card-grid { grid-template-columns: 1fr; }
  .detail-summary { grid-template-columns: 1fr; }
  .notification-panel { position: fixed; left: 10px; right: 10px; top: 82px; width: auto; }
}

html[data-theme="light"] .main-area :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, label, li, dt, dd, td, th, legend, caption, output),
html[data-theme="light"] .modal-backdrop :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, label, li, dt, dd, td, th, legend, caption, output) {
  color: #171214 !important;
}

html[data-theme="light"] .main-area :where(input, textarea, select, option),
html[data-theme="light"] .modal-backdrop :where(input, textarea, select, option) {
  color: #171214 !important;
}

html[data-theme="light"] .main-area :where(input, textarea)::placeholder,
html[data-theme="light"] .modal-backdrop :where(input, textarea)::placeholder {
  color: #665b5e !important;
  opacity: 1;
}

html[data-theme="light"] .main-area .primary-button,
html[data-theme="light"] .main-area .primary-button *,
html[data-theme="light"] .modal-backdrop .primary-button,
html[data-theme="light"] .modal-backdrop .primary-button * {
  color: #fff !important;
}

html[data-theme="light"] .theme-option[aria-pressed="true"],
html[data-theme="light"] .theme-option[aria-pressed="true"] * {
  color: #fff !important;
}

html[data-theme="light"] .sensitive-orders-modal p strong {
  color: #171214 !important;
}

html[data-theme="light"] .payment-select.paid,
html[data-theme="light"] .payment-select:has(option:nth-child(2):checked) {
  border-color: rgba(22, 128, 93, .34) !important;
  background: #e4f7ef !important;
  color: #0d6b4c !important;
  box-shadow: 0 0 0 1px rgba(22, 128, 93, .04) inset;
}

html[data-theme="light"] .payment-select.unpaid,
html[data-theme="light"] .payment-select:has(option:first-child:checked) {
  border-color: rgba(181, 25, 48, .32) !important;
  background: #fdebed !important;
  color: #a5122a !important;
  box-shadow: 0 0 0 1px rgba(165, 18, 42, .04) inset;
}

html[data-theme="light"] .payment-select option {
  background: #fff;
  color: #171214 !important;
}

html[data-theme="light"] .readonly-payment-status.paid,
html[data-theme="light"] .readonly-payment-status.paid *,
html[data-theme="light"] .payment-status-badge.paid,
html[data-theme="light"] .payment-status-badge.paid * {
  border-color: rgba(22, 128, 93, .24) !important;
  background: #e4f7ef !important;
  color: #0d6b4c !important;
}

html[data-theme="light"] .readonly-payment-status.unpaid,
html[data-theme="light"] .readonly-payment-status.unpaid *,
html[data-theme="light"] .payment-status-badge.unpaid,
html[data-theme="light"] .payment-status-badge.unpaid * {
  border-color: rgba(181, 25, 48, .24) !important;
  background: #fdebed !important;
  color: #a5122a !important;
}

html[data-theme="light"] .export-total-board {
  border-color: rgba(101, 11, 25, .16) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(165, 18, 42, .075), transparent 21rem),
    linear-gradient(145deg, #ffffff 0%, #fffafa 58%, #fbf3f4 100%) !important;
  box-shadow:
    0 20px 48px rgba(82, 22, 33, .11),
    inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

html[data-theme="light"] .export-total-board header {
  color: #650b19 !important;
  text-shadow: 0 1px 0 #fff;
}

html[data-theme="light"] .export-total-row {
  border-color: rgba(87, 30, 40, .13) !important;
  background: linear-gradient(145deg, #ffffff, #fcf8f8) !important;
  box-shadow:
    0 8px 22px rgba(75, 25, 34, .055),
    inset 0 1px 0 rgba(255, 255, 255, .98) !important;
}

html[data-theme="light"] .export-total-copy span {
  color: #2d1d20 !important;
}

html[data-theme="light"] .export-total-copy small {
  color: #796b6e !important;
}

html[data-theme="light"] .export-total-row strong {
  color: #26191c !important;
}

html[data-theme="light"] .export-total-row.highlight {
  border-color: rgba(194, 132, 17, .30) !important;
  background: linear-gradient(135deg, #fffaf0 0%, #fff2ce 100%) !important;
  box-shadow:
    0 10px 25px rgba(190, 126, 16, .13),
    inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

html[data-theme="light"] .export-total-row.highlight strong {
  color: #8a5700 !important;
  text-shadow: 0 0 18px rgba(219, 155, 28, .16);
}

html[data-theme="light"] .export-total-row.positive {
  border-color: rgba(20, 137, 96, .30) !important;
  background: linear-gradient(135deg, #effcf7 0%, #dcf5ea 100%) !important;
  box-shadow:
    0 10px 27px rgba(17, 132, 91, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .export-total-row.positive strong {
  color: #08734f !important;
  text-shadow: 0 0 18px rgba(20, 161, 111, .17);
}

html[data-theme="light"] .export-total-row.negative {
  border-color: rgba(181, 25, 48, .28) !important;
  background: linear-gradient(135deg, #fff3f4 0%, #fde3e7 100%) !important;
  box-shadow:
    0 10px 27px rgba(181, 25, 48, .12),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .export-total-row.negative strong {
  color: #a5122a !important;
  text-shadow: 0 0 18px rgba(181, 25, 48, .14);
}

html[data-theme="light"] .export-total-row.margin.positive {
  border-color: rgba(11, 126, 87, .38) !important;
  background:
    radial-gradient(circle at 88% 50%, rgba(51, 199, 145, .14), transparent 15rem),
    linear-gradient(135deg, #edfbf5 0%, #d6f2e6 100%) !important;
  box-shadow:
    0 13px 32px rgba(11, 126, 87, .17),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

html[data-theme="light"] .export-total-row.margin.negative {
  border-color: rgba(181, 25, 48, .36) !important;
  background:
    radial-gradient(circle at 88% 50%, rgba(219, 64, 86, .12), transparent 15rem),
    linear-gradient(135deg, #fff1f3 0%, #fadce1 100%) !important;
}

html[data-theme="light"] .main-area .order-status-badge {
  box-shadow:
    0 8px 21px rgba(60, 31, 36, .08),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="light"] .main-area .order-status-badge.ordered {
  border-color: rgba(194, 132, 17, .38) !important;
  background: linear-gradient(135deg, #fff9e7, #ffedb7) !important;
  color: #875700 !important;
  box-shadow:
    0 8px 23px rgba(204, 139, 18, .17),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .main-area .order-status-badge.arrived {
  border-color: rgba(18, 137, 96, .36) !important;
  background: linear-gradient(135deg, #ecfbf5, #d3f2e5) !important;
  color: #087451 !important;
  box-shadow:
    0 8px 23px rgba(18, 137, 96, .16),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .main-area .order-status-badge.customs {
  border-color: rgba(37, 99, 235, .34) !important;
  background: linear-gradient(135deg, #f0f6ff, #dbeaff) !important;
  color: #1d4f9c !important;
  box-shadow:
    0 8px 23px rgba(37, 99, 235, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .main-area .order-status-badge.danger {
  border-color: rgba(181, 25, 48, .34) !important;
  background: linear-gradient(135deg, #fff1f3, #fbdde2) !important;
  color: #a5122a !important;
  box-shadow:
    0 8px 23px rgba(181, 25, 48, .14),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="light"] .main-area .order-status-badge.neutral {
  border-color: rgba(92, 102, 120, .26) !important;
  background: linear-gradient(135deg, #f7f8fa, #eceff3) !important;
  color: #4c5667 !important;
}

html[data-theme="light"] .main-area .order-status-badge.ordered .status-dot {
  background: #d69a14 !important;
  box-shadow: 0 0 0 4px rgba(214, 154, 20, .15), 0 0 13px rgba(214, 154, 20, .52) !important;
}

html[data-theme="light"] .main-area .order-status-badge.arrived .status-dot {
  background: #16a276 !important;
  box-shadow: 0 0 0 4px rgba(22, 162, 118, .14), 0 0 13px rgba(22, 162, 118, .48) !important;
}

html[data-theme="light"] .main-area .order-status-badge.customs .status-dot {
  background: #3578d4 !important;
  box-shadow: 0 0 0 4px rgba(53, 120, 212, .14), 0 0 13px rgba(53, 120, 212, .46) !important;
}

html[data-theme="light"] .main-area .order-status-badge.danger .status-dot {
  background: #c5253f !important;
  box-shadow: 0 0 0 4px rgba(197, 37, 63, .13), 0 0 13px rgba(197, 37, 63, .44) !important;
}

html[data-theme="light"] .detail-status-editor.ordered,
html[data-theme="light"] .detail-status-editor.arrived,
html[data-theme="light"] .detail-status-editor.customs {
  border-color: rgba(93, 33, 43, .14) !important;
  background: #fff !important;
}

html[data-theme="light"] .detail-status-editor.ordered select {
  border-color: rgba(194, 132, 17, .34) !important;
  background: linear-gradient(135deg, #fff9e7, #ffedb7) !important;
  color: #875700 !important;
  box-shadow: 0 7px 20px rgba(204, 139, 18, .14) !important;
}

html[data-theme="light"] .detail-status-editor.arrived select {
  border-color: rgba(18, 137, 96, .34) !important;
  background: linear-gradient(135deg, #ecfbf5, #d3f2e5) !important;
  color: #087451 !important;
  box-shadow: 0 7px 20px rgba(18, 137, 96, .13) !important;
}

html[data-theme="light"] .welcome-emblem img {
  filter:
    brightness(0)
    saturate(100%)
    invert(11%)
    sepia(68%)
    saturate(4475%)
    hue-rotate(342deg)
    brightness(78%)
    contrast(107%)
    drop-shadow(0 11px 20px rgba(101, 11, 25, .24)) !important;
}

html[data-theme="light"] .detail-status-editor.customs select {
  border-color: rgba(37, 99, 235, .32) !important;
  background: linear-gradient(135deg, #f0f6ff, #dbeaff) !important;
  color: #1d4f9c !important;
  box-shadow: 0 7px 20px rgba(37, 99, 235, .12) !important;
}

html[data-theme="light"] .welcome-ring {
  border-color: rgba(165, 18, 42, .25) !important;
}

html[data-theme="light"] .welcome-ring-two {
  border-color: rgba(101, 11, 25, .14) !important;
}

html[data-theme="light"] .welcome-card h2,
html[data-theme="light"] .welcome-card h2 span,
html[data-theme="light"] .welcome-card h2 strong,
html[data-theme="light"] #welcomeTitle,
html[data-theme="light"] #welcomeName {
  color: #291b1e !important;
}

html[data-theme="light"] .welcome-details,
html[data-theme="light"] .welcome-details span,
html[data-theme="light"] #welcomeRole,
html[data-theme="light"] #welcomeDate {
  color: #5f5255 !important;
}

html[data-theme="light"] .welcome-details i {
  background: #b51930 !important;
  box-shadow: 0 0 10px rgba(181, 25, 48, .44) !important;
}

@media (max-width: 720px) {
  .brand-mini img { width: 56px; height: 56px; flex-basis: 56px; }
}