:root {
      color-scheme: dark;
      --bg: #121821;
      --bg-elevated: #17202b;
      --surface: #1d2734;
      --surface-2: #263342;
      --surface-3: #304154;
      --surface-hover: #34475c;
      --field: #151d27;
      --line: #3c4c60;
      --line-strong: #58708a;
      --text: #f7fafc;
      --muted: #aab7c6;
      --soft: #d7e0ea;
      --brand: #32c778;
      --brand-dark: #208a59;
      --brand-soft: rgba(50, 199, 120, .16);
      --brand-line: rgba(50, 199, 120, .36);
      --brand-text: #9ff0bd;
      --danger: #9a3732;
      --danger-line: #c64b45;
      --overlay: rgba(0, 0, 0, .58);
      --ok: #59d18b;
      --warn: #f0b94b;
      --bad: #f06f67;
      --info: #70b7f0;
      --shadow: 0 16px 38px rgba(0, 0, 0, .24);
      --radius: 8px;
    }
    * { box-sizing: border-box; }
    html { background: var(--bg); }
    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    *::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    body {
      margin: 0;
      min-width: 0;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--text);
      font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    button, input, textarea, select { font: inherit; letter-spacing:0; }
    button {
      height: 36px;
      min-height: 36px;
      border: 1px solid var(--brand);
      border-radius: var(--radius);
      padding: 8px 12px;
      color: #ffffff;
      background: var(--brand-dark);
      cursor: pointer;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
    }
    button:hover { background: var(--brand); border-color: var(--brand); }
    button.secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); }
    button.secondary:hover { background: var(--surface-hover); border-color: var(--line-strong); }
    button.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface-2)); color:#ffe1a1; border-color: color-mix(in srgb, var(--warn) 52%, var(--line)); }
    button.warn:hover { background: color-mix(in srgb, var(--warn) 26%, var(--surface-2)); border-color: var(--warn); }
    button.danger { background: var(--danger); border-color: var(--danger-line); }
    button:disabled { opacity: .62; cursor: wait; }
    input, textarea, select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--field);
      color: var(--text);
      padding: 10px 11px;
      outline: none;
      min-height: 38px;
      line-height: 1.2;
    }
    textarea { min-height: 156px; resize: vertical; }
    input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
    .shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 272px minmax(0, 1fr);
    }
    .shell.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
    .side {
      position: sticky;
      top: 0;
      height: 100vh;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      gap: 12px;
      padding: 12px;
      border-right: 1px solid var(--line);
      background: var(--bg-elevated);
      overflow: hidden;
    }
    .side-header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
    .brand-row { display:flex; align-items:center; gap:10px; min-width:0; padding: 0; }
    .logo {
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:8px;
      background: var(--brand-soft);
      border:1px solid var(--brand-line);
      color:var(--brand-text);
      font-weight:900;
      letter-spacing:0;
    }
    .logo-img {
      width:32px;
      height:32px;
      border-radius: var(--radius);
      border:1px solid var(--line);
      object-fit:cover;
      object-position:center;
      flex:0 0 auto;
    }
    .brand-copy { min-width:0; }
    .brand { font-weight: 700; font-size: 14px; letter-spacing: 0; }
    .muted { color: var(--muted); }
    .small { font-size: 12px; }
    .sidebar-trigger {
      width:32px;
      height:32px;
      min-height:32px;
      padding:0;
      display:grid;
      place-items:center;
      gap:0;
      border-color: var(--line);
      background: transparent;
    }
    .sidebar-trigger span {
      width:14px;
      height:1.5px;
      display:block;
      background: var(--muted);
      margin:2px 0;
      border-radius:999px;
    }
    .profile { padding: 0 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
    .profile-main { display:flex; gap:12px; align-items:center; min-width:0; }
    .avatar { width:34px; height:34px; border-radius: 8px; border: 1px solid var(--line-strong); background:var(--surface-3); object-fit:cover; flex:0 0 auto; }
    .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .workspace-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--field);
    }
    .workspace-switch button {
      min-height: 30px;
      padding: 6px 9px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }
    .workspace-switch button.active { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
    .side-content { min-height:0; overflow-y:auto; padding-right:2px; }
    .side-footer {
      min-width:0;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }
    .profile-copy { min-width:0; }
    .profile-roles { margin-top:8px; }
    .profile-board {
      display:grid;
      grid-template-columns:minmax(320px, 520px) minmax(0, 1fr);
      gap:12px;
      align-items:start;
    }
    .profile-card {
      display:grid;
      gap:14px;
    }
    .profile-hero {
      display:flex;
      gap:12px;
      align-items:center;
      min-width:0;
    }
    .profile-hero h2 {
      margin:0 0 4px;
      font-size:22px;
      line-height:1.15;
    }
    .profile-hero-avatar {
      width:58px;
      height:58px;
      border-radius:12px;
      border:1px solid var(--line-strong);
      background:var(--surface-3);
      object-fit:cover;
      flex:0 0 auto;
    }
    .profile-facts {
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
    }
    .profile-facts div {
      min-height:58px;
      display:grid;
      align-content:center;
      gap:4px;
      padding:10px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--field);
      min-width:0;
    }
    .profile-facts span {
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .profile-facts b {
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:13px;
    }
    .profile-kpis {
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .quick-links {
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    .section-label {
      margin: 18px 2px 8px;
      color: var(--soft);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0;
    }
    .nav {
      display: grid;
      gap: 8px;
      margin-top: 0;
    }
    .nav-section {
      display: block;
      padding: 0;
      border: 0;
      border-radius: var(--radius);
      background: transparent;
    }
    .nav-section summary {
      min-height: 34px;
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: var(--radius);
      color: var(--text);
      cursor:pointer;
      list-style:none;
      font-size: 14px;
      font-weight: 600;
    }
    .nav-section summary::-webkit-details-marker { display:none; }
    .nav-section summary:hover { background: var(--surface-hover); }
    .nav-parent-icon {
      width:20px;
      height:20px;
      display:grid;
      place-items:center;
      color: var(--muted);
      flex:0 0 auto;
    }
    .nav-parent-icon svg, .nav-chevron svg {
      width:16px;
      height:16px;
      fill:none;
      stroke:currentColor;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nav-parent-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .nav-chevron {
      width:16px;
      height:16px;
      margin-left:auto;
      display:grid;
      place-items:center;
      color: var(--muted);
      font-size:18px;
      line-height:1;
    }
    .nav-section ul {
      display:grid;
      gap:2px;
      padding: 3px 0 3px 28px;
      margin: 2px 0 0 16px;
      list-style:none;
      border-left:1px solid var(--line);
    }
    .nav-sub {
      width: 100%;
      min-height: 30px;
      padding: 5px 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      box-shadow:none;
      font-size: 13px;
      font-weight: 500;
      text-align:left;
    }
    .nav-sub.active, .nav-sub:hover { color: var(--text); background: var(--surface-hover); }
    .sidebar-collapsed .side { padding:12px 8px; }
    .sidebar-collapsed .brand-copy,
    .sidebar-collapsed .workspace-switch,
    .sidebar-collapsed .nav-parent-label,
    .sidebar-collapsed .nav-chevron,
    .sidebar-collapsed .nav-section ul,
    .sidebar-collapsed .profile-copy,
    .sidebar-collapsed .profile-roles { display:none; }
    .sidebar-collapsed .side-header { justify-content:center; flex-direction:column; }
    .sidebar-collapsed .brand-row { justify-content:center; }
    .sidebar-collapsed .nav-section summary { justify-content:center; padding:8px; }
    .sidebar-collapsed .side-footer .profile-main { justify-content:center; }
    main { width: 100%; max-width: none; padding: 22px; min-width: 0; }
    .top {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .top h1 { margin: 0 0 5px; font-size: clamp(24px, 3vw, 34px); letter-spacing: 0; line-height: 1.15; }
    .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      min-width:0;
    }
    .card h2 { margin: 0 0 12px; font-size: 16px; letter-spacing:0; }
    .card p { margin: 8px 0; }
    .grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; width: 100%; }
    .grid2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; width: 100%; }
    .grid3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; width: 100%; }
    .kpi .v { font-size: 25px; font-weight: 900; margin-top: 6px; letter-spacing: 0; }
    .page-actions {
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .buyer-overview {
      display:grid;
      grid-template-columns:minmax(220px, 1.4fr) repeat(5, minmax(130px, 1fr));
      gap:10px;
      align-items:stretch;
    }
    .buyer-overview > div {
      min-width:0;
      min-height:62px;
      display:grid;
      align-content:center;
      gap:4px;
      padding:10px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--field);
    }
    .buyer-overview b {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:16px;
      line-height:1.2;
    }
    .buyer-overview span {
      color:var(--muted);
      font-size:12px;
      font-weight:750;
    }
    .toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 14px 0 0; }
    .channel-editor { display:grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; gap:8px; min-width: 420px; }
    .channel-editor input { min-height: 38px; padding: 8px 10px; }
    .channel-editor button { min-height: 38px; padding: 8px 11px; }
    .badge {
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:28px;
      border:1px solid var(--line);
      border-radius:999px;
      padding:5px 9px;
      color:var(--muted);
      background:var(--surface-2);
      font-weight:750;
      white-space: nowrap;
      line-height:1;
    }
    .badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 46%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
    .badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 46%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); }
    .badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 46%, transparent); background: color-mix(in srgb, var(--bad) 14%, transparent); }
    .badge.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 46%, transparent); background: color-mix(in srgb, var(--info) 14%, transparent); }
    .mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; color: var(--soft); }
    .user-pill {
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-width: 170px;
      max-width: 260px;
      min-height:30px;
      vertical-align:middle;
    }
    .user-pill b, .user-pill small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-pill small { color: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
    .mini-avatar { width:26px; height:26px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto; }
    .payment-method { display:inline-flex; align-items:center; gap:8px; min-height:26px; white-space:nowrap; vertical-align:middle; }
    .channel-summary {
      display:flex;
      align-items:center;
      gap:6px;
      min-width:170px;
      flex-wrap:wrap;
    }
    tr.table-row-menu {
      cursor:context-menu;
    }
    tr.table-row-menu:hover td {
      background:rgba(255,255,255,.025);
    }
    .context-menu {
      position:fixed;
      z-index:75;
      display:grid;
      gap:6px;
      width:220px;
      padding:8px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface-2);
      box-shadow:0 18px 42px rgba(0,0,0,.38);
    }
    .context-menu-title {
      padding:6px 7px 8px;
      border-bottom:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
      font-weight:850;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .context-menu button {
      justify-content:flex-start;
      width:100%;
      min-height:34px;
      white-space:normal;
      text-align:left;
    }
    .pay-logo-wrap {
      width:28px;
      height:28px;
      display:inline-grid;
      place-items:center;
      flex:0 0 28px;
      border:1px solid var(--line);
      border-radius:7px;
      background:#fff;
      overflow:hidden;
    }
    .pay-logo {
      width:22px;
      height:22px;
      object-fit:contain;
      display:block;
    }
    .pay-icon {
      width:24px;
      height:24px;
      display:inline-grid;
      place-items:center;
      border-radius:6px;
      font-size:12px;
      font-weight:900;
      border:1px solid var(--line);
      color:var(--text);
      background:var(--surface-2);
    }
    .pay-icon.bank { color:#9dd7ff; border-color:rgba(103,168,216,.44); background:rgba(103,168,216,.12); }
    .pay-icon.card { color:#f2d27a; border-color:rgba(214,162,58,.44); background:rgba(214,162,58,.12); }
    .pay-icon.wallet { color:#9ee0b8; border-color:rgba(85,194,122,.44); background:rgba(85,194,122,.12); }
    .pay-icon.momo { color:#ffa2d7; border-color:rgba(210,90,170,.44); background:rgba(210,90,170,.12); }
    .link-btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:32px;
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      color:var(--text);
      background:var(--surface-2);
      text-decoration:none;
      font-weight:750;
      white-space:nowrap;
    }
    .link-btn:hover { border-color: var(--line-strong); background: var(--surface-3); }
    .notice { border:1px solid var(--line); border-radius:8px; padding:14px; background:var(--surface); }
    .notice.bad { border-color:color-mix(in srgb, var(--bad) 46%, transparent); color:#ffd4d1; background:color-mix(in srgb, var(--bad) 12%, transparent); }
    .notice.warn { border-color:color-mix(in srgb, var(--warn) 46%, transparent); color:#ffe1a1; background:color-mix(in srgb, var(--warn) 12%, transparent); }
    .toast-stack {
      position:fixed;
      right:16px;
      bottom:16px;
      z-index:90;
      width:min(380px, calc(100vw - 32px));
      display:grid;
      gap:10px;
      pointer-events:none;
    }
    .toast {
      display:grid;
      gap:4px;
      padding:12px 14px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--surface);
      box-shadow:var(--shadow);
      pointer-events:auto;
    }
    .toast span { color:var(--muted); }
    .toast.warn { border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); background:color-mix(in srgb, var(--warn) 13%, var(--surface)); }
    .toast.bad { border-color:color-mix(in srgb, var(--bad) 55%, var(--line)); background:color-mix(in srgb, var(--bad) 13%, var(--surface)); }
    .toast.success { border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); background:color-mix(in srgb, var(--ok) 13%, var(--surface)); }
    .skeleton-line {
      display:block;
      border-radius:7px;
      background:linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
      background-size:220% 100%;
      animation:skeletonPulse 1.15s ease-in-out infinite;
    }
    .skeleton-line + .skeleton-line { margin-top:8px; }
    .skeleton-card { min-height:84px; }
    .skeleton-table tbody td { height:58px; }
    .skeleton-table .table-tools,
    .skeleton-table .table-footer { align-items:center; }
    @keyframes skeletonPulse {
      0% { background-position:100% 0; }
      100% { background-position:-100% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .skeleton-line { animation:none; }
    }
    .tablewrap { overflow-x:auto; width: 100%; }
    .table-tools {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      min-width:820px;
      padding:0 0 10px;
    }
    .table-search { margin-right:auto; width:min(360px, 42vw); }
    .table-search input {
      width:100%;
      height:34px;
      padding:7px 10px;
      font-size:13px;
      border-radius:7px;
      background:var(--surface-2);
    }
    table { width:100%; border-collapse: collapse; min-width: 820px; }
    th, td { padding: 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
    td { overflow-wrap:anywhere; }
    th { color: var(--muted); font-weight: 850; font-size: 12px; letter-spacing: 0; white-space:nowrap; }
    .th-sort {
      width:100%;
      min-height:28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding:0;
      border:0;
      background:transparent;
      color:inherit;
      font:inherit;
      letter-spacing:0;
      cursor:pointer;
    }
    .th-sort.active { color:var(--text); }
    tr:last-child td { border-bottom:0; }
    .table-footer {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding-top:12px;
      border-top:1px solid var(--line);
      min-width: 820px;
    }
    .pager { display:flex; gap:8px; align-items:center; }
    .pager button { min-height:34px; padding:7px 10px; }
    .pager button.active { background: var(--brand-dark); border-color: var(--brand); color:#fff; }
    .pager-gap { min-width:18px; text-align:center; color:var(--muted); }
    .page-size {
      width:72px;
      height:34px;
      min-height:34px;
      padding:6px 8px;
      border-radius:7px;
      background:var(--surface-2);
    }
    button.compact { min-height:30px; padding:6px 9px; }
    .section-toolbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .section-toolbar h2,
    .section-toolbar p { margin-top:0; }
    .mini-table { overflow-x:auto; }
    .mini-table table { min-width: 860px; }
    .plan-create { display:grid; grid-template-columns: 1.1fr 1.3fr .9fr .7fr auto; gap:8px; align-items:start; }
    .stock-form { display:grid; grid-template-columns: 1fr 1.1fr 1fr .7fr .7fr .8fr .8fr auto; gap:8px; align-items:start; }
    .stock-ops { display:grid; gap:12px; }
    .stock-filter-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(160px, 240px));
      gap:10px;
      align-items:end;
      justify-content:start;
    }
    .stock-filter-grid label {
      display:grid;
      gap:5px;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .stock-filter-grid select,
    .stock-filter-grid input {
      width:100%;
      min-height:36px;
      height:36px;
      padding:7px 9px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#12151a;
      color:var(--text);
    }
    .segmented { display:flex; gap:6px; flex-wrap:wrap; }
    .segmented button { min-height:34px; padding:7px 10px; }
    .segmented button.active { background:var(--brand-dark); border-color:var(--brand); color:#fff; }
    .detail-tabs { margin-bottom:12px; }
    .bulk-row {
      display:grid;
      grid-template-columns:minmax(260px, 520px) minmax(170px, 220px) auto;
      gap:8px;
      align-items:start;
      justify-content:start;
    }
    .bulk-row select {
      width:100%;
      min-height:40px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--field);
      color:var(--text);
      padding:9px 10px;
    }
    .bulk-textarea {
      min-height:104px;
      font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size:13px;
    }
    .cell-input { height:34px; min-height:34px; padding:7px 8px; font-size:13px; }
    .dialog-form {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      column-gap:14px;
      row-gap:18px;
      margin-top:10px;
    }
    .dialog-form.single { grid-template-columns:1fr; }
    .dialog-form.cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .dialog-form.cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .dialog-form.cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .dialog-form label {
      display:grid;
      align-content:start;
      gap:8px;
      min-width:0;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .dialog-form label span {
      min-height:16px;
      line-height:1.25;
    }
    .field-hint {
      min-height:24px;
      padding:6px 8px;
      border:1px solid var(--line);
      border-radius:7px;
      background:rgba(255,255,255,.025);
    }
    .field-hint .user-compact {
      min-width:0;
      max-width:100%;
    }
    .account-format-guide {
      display:grid;
      gap:8px;
      margin-top:12px;
      color:var(--muted);
      font-size:13px;
    }
    .account-format-guide code,
    .account-format-guide pre {
      margin:0;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--field);
      color:var(--text);
      font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      line-height:1.45;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }
    .check-grid {
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      margin-top:8px;
    }
    .check-row {
      display:flex;
      align-items:center;
      gap:8px;
      min-height:42px;
      padding:9px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--field);
      color:var(--text);
      font-weight:700;
    }
    .check-row input {
      width:16px;
      height:16px;
      accent-color:var(--ok);
    }
    .inline-actions {
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:8px;
      align-items:center;
    }
    .account-import-actions {
      grid-template-columns:minmax(220px, 360px) minmax(0, 1fr);
      margin-top:12px;
    }
    .account-import-actions input[type="file"] {
      width:100%;
      min-height:40px;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--field);
      color:var(--text);
    }
    .stock-name {
      display:block;
      max-width:260px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .user-compact {
      display:grid;
      gap:2px;
      min-width:170px;
      max-width:230px;
    }
    .user-compact b,
    .user-compact small {
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .user-compact small { color:var(--muted); font-size:11px; }
    .mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px; margin-top:6px; }
    .row-check { display:flex; gap:7px; align-items:center; margin:7px 0; color:var(--muted); }
    .row-check input { width:16px; height:16px; padding:0; }
    .action-stack { display:grid; gap:7px; min-width:78px; }
    .action-stack button { height:34px; min-height:34px; padding:7px 9px; }
    .modal-backdrop {
      position:fixed;
      inset:0;
      z-index:50;
      display:grid;
      place-items:center;
      padding:22px;
      background:var(--overlay);
    }
    .modal {
      width:min(760px, 100%);
      max-height:min(86vh, 820px);
      overflow:auto;
      border:1px solid var(--line-strong);
      border-radius:var(--radius);
      background:var(--surface);
      padding:16px;
      box-shadow:0 18px 48px rgba(0,0,0,.38);
    }
    .modal:has(.transcript-frame) {
      width:min(1120px, 100%);
    }
    .modal-head {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
      padding-bottom:12px;
      border-bottom:1px solid var(--line);
    }
    .modal-head h2 { margin:0; font-size:18px; }
    .modal-head p { margin:4px 0 0; }
    .modal-grid {
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    .modal-grid label {
      display:grid;
      gap:6px;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .modal-check {
      min-height:34px;
      display:flex !important;
      align-items:center;
      gap:8px !important;
    }
    .modal-check input { width:16px; height:16px; min-height:16px; padding:0; }
    .modal-summary {
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
      margin-top:12px;
      padding-top:12px;
      border-top:1px solid var(--line);
    }
    .modal-summary.cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .modal-summary.cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .modal-summary.cols-5 { grid-template-columns:repeat(5, minmax(0,1fr)); }
    .section-title {
      margin:14px 0 8px;
      padding-top:12px;
      border-top:1px solid var(--line);
      color:var(--soft);
      font-size:13px;
      font-weight:850;
    }
    .compact-textarea {
      min-height:92px;
      resize:vertical;
    }
    .compact-textarea.tall {
      min-height:132px;
    }
    .readonly-bank input:disabled {
      opacity:1;
      color:var(--text);
      -webkit-text-fill-color:var(--text);
    }
    .readonly-public textarea[readonly] {
      opacity:1;
      color:var(--text);
      -webkit-text-fill-color:var(--text);
      cursor:default;
    }
    .raw-box {
      max-height:420px;
      overflow:auto;
      margin:0;
      padding:12px;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--field);
      color:var(--soft);
      font:12px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      white-space:pre-wrap;
    }
    .readonly-box {
      min-height:38px;
      display:flex;
      align-items:center;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--field);
      color:var(--text);
      min-width:0;
    }
    .modal-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
      align-items:center;
      margin-top:14px;
      padding-top:12px;
      border-top:1px solid var(--line);
    }
    .modal-actions button {
      flex:0 1 auto;
      white-space:normal;
      min-width:104px;
    }
    .core-dialog-backdrop {
      z-index:70;
      background:rgba(3,7,13,.72);
    }
    .core-dialog {
      width:min(440px, 100%);
      padding:18px;
    }
    .core-dialog.bad,
    .core-dialog.danger {
      border-color:color-mix(in srgb, var(--bad) 46%, var(--line));
    }
    .core-dialog.success,
    .core-dialog.ok {
      border-color:color-mix(in srgb, var(--ok) 42%, var(--line));
    }
    .core-dialog.warn {
      border-color:color-mix(in srgb, var(--warn) 42%, var(--line));
    }
    .core-dialog-body p {
      margin:0;
      color:var(--soft);
      line-height:1.55;
      overflow-wrap:anywhere;
    }
    .core-dialog-field {
      display:grid;
      gap:8px;
      color:var(--soft);
      font-size:13px;
      font-weight:700;
    }
    .core-dialog-field input {
      width:100%;
    }
    .core-dialog-field small {
      min-height:16px;
      color:var(--bad);
      font-size:12px;
    }
    .transcript-frame {
      width:100%;
      height:min(70vh, 760px);
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
    }
    .chart { min-height:172px; }
    .bar-row + .bar-row { margin-top:12px; }
    .bar-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--soft); }
    .bar-head b { color:var(--text); }
    .bar, .stack {
      height:12px;
      border-radius:999px;
      background:var(--field);
      border:1px solid var(--line);
      overflow:hidden;
    }
    .bar span, .stack span { display:block; height:100%; }
    .stack { display:flex; height:18px; margin:4px 0 12px; }
    .bar .ok, .stack .ok, .legend .ok { background: var(--ok); }
    .bar .warn, .stack .warn, .legend .warn { background: var(--warn); }
    .bar .bad, .stack .bad, .legend .bad { background: var(--bad); }
    .bar .info, .stack .info, .legend .info { background: var(--info); }
    .legend { display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); }
    .legend span { display:inline-flex; align-items:center; gap:6px; }
    .legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }
    .login {
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), transparent 36%),
        var(--bg);
    }
    .auth-card {
      width:min(460px, 100%);
      display:grid;
      gap:22px;
      padding:24px;
      border:1px solid var(--line);
      border-radius:12px;
      background: color-mix(in srgb, var(--surface) 82%, #0b1118);
      box-shadow: 0 20px 54px rgba(0, 0, 0, .26);
    }
    .auth-brand {
      display:flex;
      align-items:center;
      gap:12px;
      padding-bottom:18px;
      border-bottom:1px solid var(--line);
    }
    .auth-project {
      color:var(--text);
      font-weight:800;
      font-size:15px;
      line-height:1.2;
    }
    .auth-main {
      display:grid;
      gap:14px;
    }
    .login h1 {
      margin:0;
      font-size: clamp(25px, 5vw, 32px);
      font-weight:850;
      letter-spacing:0;
      line-height:1.12;
    }
    .login-subtitle { margin: -2px 0 2px; color: var(--soft); font-size: 14px; }
    .auth-alert {
      display:grid;
      gap:4px;
      padding:12px 13px;
      border-radius:10px;
      border:1px solid var(--line);
      background:var(--field);
      color:var(--soft);
    }
    .auth-alert b { color:var(--text); font-size:14px; }
    .auth-alert span { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
    .auth-alert.bad { border-color:rgba(240,111,103,.42); background:rgba(240,111,103,.08); }
    .auth-alert.bad b { color:#ffd4d1; }
    .auth-alert.warn { border-color:rgba(240,185,75,.42); background:rgba(240,185,75,.08); }
    .auth-alert.warn b { color:#ffe1a1; }
    .auth-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .auth-actions button { min-width: 132px; }
    .auth-state {
      width:max-content;
      max-width:100%;
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:7px 10px;
      border:1px solid var(--line);
      border-radius:999px;
      background:var(--field);
      color:var(--soft);
      font-size:13px;
      font-weight:700;
    }
    .hero-logo { width:68px; height:68px; margin:0 auto; display:grid; place-items:center; border-radius:12px; background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-text); font-size:22px; font-weight:900; }
    .hero-logo-img {
      width:54px;
      height:54px;
      border-radius:10px;
      border:1px solid var(--line);
      object-fit:cover;
      object-position:center;
      box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
      flex:0 0 auto;
    }
    .footer { margin-top:18px; padding:16px 0 4px; color:var(--muted); display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; }
    .gap { height:14px; }
    .ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .bad-text { color: var(--bad); }
    @media (max-width: 1100px) {
      .grid, .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .buyer-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .dialog-form.cols-3, .dialog-form.cols-4, .modal-summary.cols-4, .modal-summary.cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .check-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
      .stock-filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .stock-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .bulk-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 860px) {
      .shell { grid-template-columns: 1fr; }
      .side { position:relative; height:auto; padding:14px; }
      main { padding:14px; }
      .grid, .grid2, .grid3 { grid-template-columns:1fr; }
      .buyer-overview { grid-template-columns:1fr; }
      .dialog-form.cols-2, .dialog-form.cols-3, .dialog-form.cols-4, .modal-summary.cols-3, .modal-summary.cols-4, .modal-summary.cols-5 { grid-template-columns:1fr; }
      .check-grid { grid-template-columns:1fr; }
      .profile-board { grid-template-columns:1fr; }
      .top { flex-direction:column; }
      .actions { justify-content:flex-start; }
      .nav { grid-template-columns: 1fr; }
      .channel-editor { grid-template-columns: 1fr; min-width: 220px; }
      .plan-create { grid-template-columns: 1fr; }
      .stock-form { grid-template-columns: 1fr; }
      .stock-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .table-footer { min-width: 820px; }
      .modal-grid, .modal-summary, .dialog-form { grid-template-columns:1fr; }
      .profile-facts, .profile-kpis, .quick-links { grid-template-columns:1fr; }
      .section-toolbar { align-items:flex-start; flex-direction:column; }
    }
    @media (max-width: 520px) {
      .nav, .workspace-switch, .nav-section { grid-template-columns: 1fr; }
      .stock-filter-grid { grid-template-columns: 1fr; }
      .profile-main { align-items:flex-start; }
      button { width: 100%; }
      .actions, .toolbar { align-items:stretch; }
    }