/* ============================================================
       DESIGN TOKENS — Global Business Insiders
    ============================================================ */
    :root {
      --forest:   #0e0e0e;
      --forest2:  #1a1a1a;
      --forest3:  #050505;
      --gold:     #b8963e;
      --gold2:    #9e7d2e;
      --parch:    #f8f6f0;
      --parch2:   #f0ece0;
      --parch3:   #ddd5be;
      --white:    #ffffff;
      --ink:      #0e0e0e;
      --ink2:     #1a1a1a;
      --muted:    #6b6456;
      --green:    #166534;
      --green-bg: #dcfce7;
      --amber:    #92400e;
      --amber-bg: #fef9c3;
      --blue:     #1e3a5f;
      --blue-bg:  #dbeafe;
      --red:      #991b1b;
      --red-bg:   #fee2e2;
      --shadow-s: 0 1px 4px rgba(14,14,14,0.10);
      --shadow-m: 0 4px 16px rgba(14,14,14,0.14);
      --shadow-l: 0 12px 40px rgba(14,14,14,0.22);
      --radius:   12px;
      --sb-width: 248px;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { font-size: 15px; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--parch);
      color: var(--ink);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }
    /* U.S. Market Mastery — sidebar texture */
    .sidebar {
      background: linear-gradient(160deg, #1a1a1a 0%, #0e0e0e 50%, #050505 100%);
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: inherit; }
    input, select, textarea { font-family: inherit; }

    /* ============================================================
       UTILITIES
    ============================================================ */
    .hidden  { display: none !important; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* ============================================================
       LOADING SCREEN
    ============================================================ */
    #screen-loading {
      position: fixed;
      inset: 0;
      background: linear-gradient(160deg, #0e0e0e 0%, #050505 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    #screen-loading.out {
      opacity: 0;
      visibility: hidden;
    }
    .loading-logo {
      font-family: 'Montserrat', sans-serif;
      font-size: 36px;
      font-weight: 500;
      color: var(--white);
      letter-spacing: 0.02em;
      margin-bottom: 8px;
    }
    .loading-sub {
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 40px;
    }
    .loading-bar {
      width: 180px;
      height: 2px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
    }
    .loading-bar-fill {
      height: 100%;
      background: var(--gold2);
      border-radius: 2px;
      animation: barFill 1.6s ease-in-out forwards;
    }
    @keyframes barFill { from { width: 0; } to { width: 100%; } }

    /* ============================================================
       AUTH SCREEN
    ============================================================ */
    #screen-auth {
      min-height: 100vh;
      display: flex;
    }

    /* Left decorative panel */
    .auth-left {
      width: 42%;
      background: linear-gradient(160deg, #0e0e0e 0%, #111111 50%, #050505 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 52px 56px;
    }
    .auth-left::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 100% 60% at 110% 10%, rgba(184,134,11,0.20) 0%, transparent 55%),
        radial-gradient(ellipse 70%  70% at -10% 90%, rgba(184,134,11,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(9,22,40,0.45) 0%, transparent 70%);
      pointer-events: none;
    }
    .auth-brand {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .auth-brand-icon {
      width: 44px;
      height: 44px;
      background: var(--gold2);
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-family: 'Montserrat', sans-serif;
      color: var(--forest3);
      font-weight: 700;
      flex-shrink: 0;
      letter-spacing: 0;
    }
    .auth-brand-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.2;
    }
    .auth-brand-text small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-top: 2px;
    }
    .auth-headline {
      position: relative;
      z-index: 1;
    }
    .auth-headline h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: 46px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 18px;
    }
    .auth-headline h1 em {
      color: var(--gold2);
      font-style: italic;
    }
    .auth-headline p {
      font-size: 14px;
      line-height: 1.8;
      color: rgba(255,255,255,0.50);
      max-width: 300px;
    }
    .auth-features {
      position: relative;
      z-index: 1;
    }
    .auth-feature {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 13px;
    }
    .auth-feature:last-child { margin-bottom: 0; }
    .auth-feature-dot {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: rgba(184,150,62,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .auth-feature span {
      font-size: 13px;
      color: rgba(255,255,255,0.60);
      line-height: 1.4;
    }

    /* Right form panel */
    .auth-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 48px;
      background: var(--parch);
    }
    .auth-box {
      width: 100%;
      max-width: 400px;
    }
    .auth-tabs {
      display: flex;
      border-bottom: 1.5px solid var(--parch3);
      margin-bottom: 36px;
    }
    .auth-tab {
      flex: 1;
      padding: 10px 8px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1.5px;
      transition: color 0.2s, border-color 0.2s;
    }
    .auth-tab.active {
      color: var(--forest);
      border-bottom-color: var(--gold);
    }
    .form-title {
      margin-bottom: 28px;
    }
    .form-title h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: 30px;
      font-weight: 500;
      color: var(--ink);
    }
    .form-title p {
      font-size: 13px;
      color: var(--muted);
      margin-top: 5px;
    }
    .error-banner {
      display: none;
      background: var(--red-bg);
      border: 1px solid #fca5a5;
      color: var(--red);
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      margin-bottom: 16px;
    }
    .field {
      margin-bottom: 16px;
    }
    .field label {
      display: block;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink2);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }
    .field input,
    .field select {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--parch3);
      border-radius: 9px;
      font-size: 14px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      transition: border-color 0.18s;
    }
    .field input:focus,
    .field select:focus {
      border-color: var(--gold);
    }
    .field input::placeholder {
      color: #c8b08e;
    }
    .auth-footer {
      text-align: center;
      margin-top: 18px;
      font-size: 13px;
      color: var(--muted);
    }
    .auth-footer a {
      color: var(--gold);
      font-weight: 500;
      cursor: pointer;
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 10px 18px;
      border: none;
      border-radius: 9px;
      font-size: 13.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.18s ease;
      white-space: nowrap;
      line-height: 1;
    }
    .btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none !important;
    }
    .btn-primary {
      background: var(--forest);
      color: var(--white);
      width: 100%;
      padding: 13px;
      font-size: 15px;
    }
    .btn-primary:hover:not(:disabled) {
      background: var(--forest2);
      transform: translateY(-1px);
      box-shadow: var(--shadow-l);
    }
    .btn-gold {
      background: var(--gold);
      color: var(--white);
    }
    .btn-gold:hover:not(:disabled) {
      background: var(--gold2);
      transform: translateY(-1px);
    }
    .btn-ghost {
      background: transparent;
      color: var(--ink2);
      border: 1.5px solid var(--parch3);
    }
    .btn-ghost:hover:not(:disabled) {
      border-color: var(--ink2);
      background: var(--parch2);
    }
    .btn-sm {
      padding: 6px 13px;
      font-size: 12.5px;
    }
    .btn-full {
      width: 100%;
      justify-content: center;
      padding: 13px;
      font-size: 15px;
    }

    /* ============================================================
       PORTAL LAYOUT
    ============================================================ */
    #screen-portal {
      display: flex;
      min-height: 100vh;
    }

    /* Sidebar */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sb-width);
      height: 100vh;
      background: var(--forest);
      display: flex;
      flex-direction: column;
      z-index: 100;
      overflow: hidden;
    }
    .sb-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 22px 18px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }
    .sb-logo-mark {
      width: 34px;
      height: 34px;
      background: var(--gold2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .sb-logo-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.2;
    }
    .sb-logo-name small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 9.5px;
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.30);
      margin-top: 2px;
    }
    .sb-nav {
      flex: 1;
      padding: 14px 10px;
      overflow-y: auto;
    }
    .sb-section-label {
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      padding: 0 10px;
      margin: 16px 0 6px;
    }
    .sb-section-label:first-child {
      margin-top: 4px;
    }
    .sb-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      color: rgba(255,255,255,0.52);
      font-size: 13.5px;
      font-weight: 400;
      transition: all 0.15s ease;
      margin-bottom: 2px;
      user-select: none;
    }
    .sb-item:hover {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.85);
    }
    .sb-item.active {
      background: rgba(184,150,62,0.16);
      color: var(--gold2);
      font-weight: 500;
    }
    .sb-item-icon {
      width: 20px;
      text-align: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .sb-item-label { flex: 1; }
    .sb-badge {
      background: var(--gold);
      color: var(--ink);
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      flex-shrink: 0;
    }
    .sb-footer {
      padding: 12px 10px;
      border-top: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }
    .sb-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 8px;
    }
    .sb-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--gold2);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .sb-user-info { flex: 1; min-width: 0; }
    .sb-user-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--white);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sb-user-role {
      font-size: 11px;
      color: rgba(255,255,255,0.32);
      margin-top: 1px;
    }
    .sb-logout {
      color: rgba(255,255,255,0.28);
      font-size: 15px;
      cursor: pointer;
      padding: 4px;
      transition: color 0.18s;
      flex-shrink: 0;
    }
    .sb-logout:hover { color: rgba(255,255,255,0.70); }

    /* Main content */
    .main {
      margin-left: var(--sb-width);
      flex: 1;
      padding: 34px 38px;
      min-height: 100vh;
    }
    .page {
      display: none;
      animation: pageIn 0.28s ease;
    }
    .page.active { display: block; }
    @keyframes pageIn {
      from { opacity: 0; transform: translateY(7px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ============================================================
       PAGE COMPONENTS
    ============================================================ */
    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
      gap: 16px;
    }
    .page-header-left h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: 30px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.1;
    }
    .page-header-left p {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* Stat cards */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 24px;
    }
    .stat-card {
      background: var(--white);
      border: 1px solid var(--parch2);
      border-radius: var(--radius);
      padding: 20px 20px 16px;
      box-shadow: var(--shadow-s);
    }
    .stat-card-icon { font-size: 22px; margin-bottom: 10px; }
    .stat-card-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .stat-card-value {
      font-family: 'Montserrat', sans-serif;
      font-size: 34px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1;
    }
    .stat-card-value.green { color: var(--green); font-size: 18px; margin-top: 6px; }
    .stat-card-value.amber { color: var(--amber); }
    .stat-card-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 5px;
    }

    /* Grid layouts */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

    /* Card */
    .card {
      background: var(--white);
      border: 1px solid var(--parch2);
      border-radius: var(--radius);
      padding: 22px 24px;
      box-shadow: var(--shadow-s);
    }
    .card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 18px;
    }
    .card-title-right { margin-left: auto; }

    /* Status pills */
    .pill {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 20px;
    }
    .pill-active   { background: var(--green-bg);  color: var(--green); }
    .pill-complete { background: var(--blue-bg);   color: var(--blue);  }
    .pill-pending  { background: var(--amber-bg);  color: var(--amber); }
    .pill-inactive { background: #f3f4f6;           color: #6b7280;      }
    .pill-lease    { background: var(--blue-bg);   color: var(--blue);  }
    .pill-utility  { background: #e0f2fe;           color: #075985;      }
    .pill-llc      { background: #ede9fe;           color: #4c1d95;      }
    .pill-itin     { background: var(--amber-bg);  color: var(--amber); }
    .pill-bank     { background: var(--green-bg);  color: var(--green); }
    .pill-other    { background: #f3f4f6;           color: #6b7280;      }

    /* Service list items */
    .service-row {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 0;
      border-bottom: 1px solid var(--parch2);
    }
    .service-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .service-row:first-child { padding-top: 0; }
    .service-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .service-info { flex: 1; min-width: 0; }
    .service-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
    .service-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* Mail rows */
    .mail-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .search-wrap { position: relative; flex: 1; }
    .search-wrap input {
      width: 100%;
      padding: 9px 14px 9px 34px;
      border: 1.5px solid var(--parch3);
      border-radius: 8px;
      font-size: 13.5px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      transition: border-color 0.18s;
    }
    .search-wrap input:focus { border-color: var(--gold); }
    .search-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 13px;
      pointer-events: none;
    }
    .filter-select {
      padding: 9px 12px;
      border: 1.5px solid var(--parch3);
      border-radius: 8px;
      font-size: 13.5px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      cursor: pointer;
    }
    .mail-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 12px;
      border-radius: 9px;
      cursor: pointer;
      border: 1.5px solid transparent;
      margin-bottom: 4px;
      transition: background 0.15s, border-color 0.15s;
    }
    .mail-row:hover { background: var(--parch); }
    .mail-row.unread {
      background: #f8f6f0;
      border-color: rgba(184,150,62,0.28);
    }
    .unread-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
    }
    .unread-dot.read {
      background: transparent;
      border: 1.5px solid var(--parch3);
    }
    .mail-thumb {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--parch2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .mail-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .mail-body { flex: 1; min-width: 0; }
    .mail-sender {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink);
    }
    .mail-row.unread .mail-sender { font-weight: 600; }
    .mail-subject {
      font-size: 12.5px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }
    .mail-meta { text-align: right; flex-shrink: 0; }
    .mail-date { font-size: 11.5px; color: var(--muted); }
    .cat-pill {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 7px;
      margin-top: 4px;
    }
    .cat-usps  { background: var(--blue-bg);  color: var(--blue);  }
    .cat-bank  { background: var(--green-bg); color: var(--green); }
    .cat-irs   { background: var(--amber-bg); color: var(--amber); }
    .cat-other { background: #f3f4f6;          color: #4b5563;      }

    /* Empty state */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }
    .empty-state-icon { font-size: 40px; margin-bottom: 12px; }
    .empty-state p { font-size: 14px; line-height: 1.6; }

    /* Tables */
    .data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th {
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      padding: 8px 12px;
      border-bottom: 1px solid var(--parch2);
    }
    .data-table td {
      padding: 12px;
      font-size: 13.5px;
      color: var(--ink);
      border-bottom: 1px solid var(--parch2);
      vertical-align: middle;
    }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table tbody tr:hover td { background: var(--parch); }
    .td-user {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .td-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      color: var(--ink);
    }
    .td-name { font-weight: 500; font-size: 13.5px; }
    .td-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }

    /* Upload / forms */
    .form-section { max-width: 560px; }
    .upload-zone {
      border: 2px dashed var(--parch3);
      border-radius: 10px;
      padding: 36px;
      text-align: center;
      cursor: pointer;
      transition: all 0.18s;
    }
    .upload-zone:hover,
    .upload-zone.drag {
      border-color: var(--gold);
      background: #fffef7;
    }
    .upload-zone-icon { font-size: 32px; margin-bottom: 10px; }
    .upload-zone p { font-size: 13.5px; color: var(--muted); }
    .upload-zone strong { color: var(--ink); }
    .upload-zone small { display: block; font-size: 12px; margin-top: 4px; }
    .file-chip {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      background: var(--parch);
      border-radius: 8px;
      margin-top: 10px;
    }
    .file-chip-thumb {
      width: 40px;
      height: 40px;
      border-radius: 7px;
      background: var(--parch2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .file-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .file-chip-name { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-chip-size { font-size: 12px; color: var(--muted); }
    .file-chip-remove { color: var(--muted); cursor: pointer; font-size: 16px; flex-shrink: 0; transition: color 0.15s; }
    .file-chip-remove:hover { color: var(--ink); }

    /* Toggle switches */
    .toggle-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--parch2);
    }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-svc-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .toggle-svc-info { flex: 1; }
    .toggle-svc-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
    .toggle-svc-status { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .toggle-switch { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-track {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--parch3);
      border-radius: 21px;
      transition: background 0.2s;
    }
    .toggle-track::before {
      content: '';
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--white);
      left: 3px;
      top: 3px;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }
    .toggle-switch input:checked + .toggle-track { background: var(--forest); }
    .toggle-switch input:checked + .toggle-track::before { transform: translateX(17px); }

    /* Admin client list: table on desktop, cards on mobile */
    .admin-table-wrap { display: block; }
    .admin-cards-wrap { display: none; }

    /* ── Admin Docs page layout ── */
    .admin-docs-layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px;
      align-items: start;
    }
    .admin-docs-upload-col { position: sticky; top: 24px; }
    .admin-docs-history-col {}

    /* Doc history table/cards toggle */
    .dh-table-wrap { display: block; overflow-x: auto; }
    .dh-cards-wrap { display: none; }

    /* Doc history mobile cards */
    .dh-card {
      background: var(--white);
      border: 1px solid var(--parch3);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 10px;
      transition: box-shadow 0.15s;
    }
    .dh-card:hover { box-shadow: var(--shadow-s); }
    .dh-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .dh-card-avatar {
      width: 34px; height: 34px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: #fff;
      flex-shrink: 0;
    }
    .dh-card-client-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
    .dh-card-email       { font-size: 11.5px; color: var(--muted); }
    .dh-card-doc-name    { font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 8px; }
    .dh-card-meta        { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .dh-card-date        { font-size: 11.5px; color: var(--muted); }
    .dh-card-actions     { display: flex; gap: 8px; }

    /* ── Document folders (admin) & tile grid (admin + client) ── */
    .doc-folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 14px;
    }
    .doc-folder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 16px 10px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      text-align: center;
    }
    .doc-folder:hover { background: var(--parch); border-color: var(--parch3); }
    .doc-folder-icon { font-size: 38px; line-height: 1; }
    .doc-folder-name { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-word; }
    .doc-folder-count { font-size: 11.5px; color: var(--muted); }

    .doc-tile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 16px;
    }
    .doc-tile {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--parch3);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--white);
      transition: box-shadow 0.15s, border-color 0.15s;
      position: relative;
    }
    .doc-tile:hover { box-shadow: var(--shadow-s); border-color: var(--gold); }
    .doc-tile-thumb {
      width: 100%;
      height: 110px;
      background: var(--parch);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .doc-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .doc-tile-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .doc-tile-name {
      font-size: 12.5px; font-weight: 600; color: var(--ink);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; line-height: 1.35; min-height: 2.6em;
    }
    .doc-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
    .doc-tile-date { font-size: 11px; color: var(--muted); }
    .doc-tile-actions { padding: 0 12px 12px; }
    .doc-tile-checkbox {
      position: absolute; top: 8px; left: 8px; z-index: 2;
      width: 18px; height: 18px; cursor: pointer;
      accent-color: var(--gold);
    }
    .doc-breadcrumb {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      font-size: 13px; color: var(--muted); margin-bottom: 14px;
    }
    .doc-breadcrumb a { color: var(--gold); cursor: pointer; font-weight: 600; }
    .doc-breadcrumb a:hover { text-decoration: underline; }

    @media (max-width: 640px) {
      .doc-folder-grid, .doc-tile-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
      .doc-tile-thumb { height: 90px; font-size: 32px; }
    }


    /* Sidebar user button — clickable for clients */
    #sb-user-btn {
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
    }
    #sb-user-btn:hover { background: rgba(255,255,255,0.07); }

    /* ============================================================
       PROFILE MODAL
    ============================================================ */
    #profile-overlay {
      position: fixed;
      inset: 0;
      background: rgba(12,15,10,0.50);
      backdrop-filter: blur(4px);
      z-index: 400;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #profile-overlay.open { display: flex; }
    .profile-modal {
      background: var(--white);
      border-radius: 18px;
      width: 100%;
      max-width: 420px;
      box-shadow: var(--shadow-l);
      animation: pageIn 0.22s ease;
      overflow: hidden;
    }
    .profile-modal-header {
      background: var(--forest);
      padding: 28px 28px 24px;
      position: relative;
    }
    .profile-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(255,255,255,0.10);
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .profile-modal-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
    .profile-modal-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 14px;
      border: 3px solid rgba(255,255,255,0.15);
    }
    .profile-modal-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--white);
      margin-bottom: 3px;
    }
    .profile-modal-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold2);
    }
    .profile-modal-body { padding: 22px 28px 26px; }
    .profile-info-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--parch2);
    }
    .profile-info-row:last-of-type { border-bottom: none; }
    .profile-info-icon {
      width: 34px;
      height: 34px;
      background: var(--parch);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .profile-info-label {
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .profile-info-value {
      font-size: 13.5px;
      color: var(--ink);
    }
    .profile-info-value.empty { color: var(--muted); font-style: italic; }
    .profile-edit-section {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--parch2);
    }
    .profile-edit-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .profile-save-row {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    @media (max-width: 600px) {
      #profile-overlay { padding: 0; align-items: flex-end; }
      .profile-modal { border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; }
    }

    /* ============================================================
       CLIENT DETAIL POPUP
    ============================================================ */
    .client-popup-overlay {
      position: fixed;
      inset: 0;
      z-index: 400;
      background: rgba(12,15,10,0.45);
      backdrop-filter: blur(3px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .client-popup-overlay.open { display: flex; }
    .client-popup {
      background: var(--white);
      border-radius: 18px;
      padding: 28px 28px 24px;
      width: 100%;
      max-width: 360px;
      box-shadow: var(--shadow-l);
      animation: pageIn 0.22s ease;
      position: relative;
    }
    .client-popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--parch2);
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .client-popup-close:hover { background: var(--parch3); color: var(--ink); }
    .client-popup-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 14px;
    }
    .client-popup-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .client-popup-role {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .client-popup-divider {
      height: 1px;
      background: var(--parch2);
      margin-bottom: 18px;
    }
    .client-popup-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }
    .client-popup-row:last-child { margin-bottom: 0; }
    .client-popup-row-icon {
      width: 32px;
      height: 32px;
      background: var(--parch);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .client-popup-row-label {
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .client-popup-row-value {
      font-size: 13.5px;
      color: var(--ink);
      word-break: break-all;
    }
    .client-popup-row-value.empty { color: var(--muted); font-style: italic; }

    /* ============================================================
       ADMIN CLIENT CARDS (mobile)
    ============================================================ */
    .client-card {
      background: var(--white);
      border: 1px solid var(--parch2);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 10px;
      box-shadow: var(--shadow-s);
    }
    .client-card-header {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 12px;
    }
    .client-card-info { flex: 1; min-width: 0; }
    .client-card-name { font-size: 14px; font-weight: 600; color: var(--ink); }
    .client-card-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .client-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink2); }
    .client-card-meta-item { display: flex; align-items: center; gap: 5px; }
    .client-card-meta-label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .client-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }
    .client-card-actions .btn { flex: 1; min-width: 80px; font-size: 12px; padding: 7px 10px; }

    /* ============================================================
       MAIL ACCORDION
    ============================================================ */

    .compose-tool-btn {
      background: none;
      border: none;
      padding: 3px 8px;
      border-radius: 5px;
      font-size: 13px;
      color: var(--ink2);
      cursor: pointer;
      transition: background 0.15s;
      line-height: 1.4;
    }
    .compose-tool-btn:hover { background: var(--parch2); }
    /* Placeholder for contenteditable */
    #up-description:empty::before {
      content: attr(data-placeholder);
      color: #c8b08e;
      pointer-events: none;
      white-space: pre-wrap;
    }
    /* Gmail-style mail body in viewer */
    .mail-body-content {
      font-size: 14px;
      line-height: 1.8;
      color: var(--ink2);
      word-break: break-word;
    }
    .mail-body-content p { margin: 0 0 10px; }
    .mail-body-content ul, .mail-body-content ol { padding-left: 22px; margin: 8px 0 12px; }
    .mail-body-content li { margin-bottom: 5px; }
    .mail-body-content hr { border: none; border-top: 1px solid var(--parch3); margin: 16px 0; }
    .mail-accordion {
      border: 1.5px solid var(--parch2);
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
      transition: border-color 0.18s;
    }
    .mail-accordion.unread { border-color: rgba(184,150,62,0.35); background: #f8f6f0; }
    .mail-accordion-header {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 14px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }
    .mail-accordion-header:hover { background: var(--parch); }
    .mail-accordion.unread .mail-accordion-header:hover { background: #fff9e6; }
    .mail-accordion-chevron {
      font-size: 11px;
      color: var(--muted);
      flex-shrink: 0;
      transition: transform 0.22s ease;
      margin-left: auto;
    }
    .mail-accordion.open .mail-accordion-chevron { transform: rotate(180deg); }
    .mail-accordion-body {
      display: none;
      padding: 0 14px 14px;
      border-top: 1px solid var(--parch2);
    }
    .mail-accordion.open .mail-accordion-body { display: block; }
    .mail-accordion-desc {
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--ink2);
      background: var(--parch);
      border-left: 3px solid var(--gold);
      border-radius: 0 7px 7px 0;
      padding: 12px 14px;
      margin-top: 12px;
    }
    .mail-accordion-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .mobile-topbar {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      background: var(--forest);
      z-index: 150;
      align-items: center;
      padding: 0 16px;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    .topbar-hamburger {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.08);
      border: none;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.18s;
    }
    .topbar-hamburger:hover { background: rgba(255,255,255,0.14); }
    .topbar-hamburger span {
      display: block;
      width: 16px;
      height: 2px;
      background: var(--gold2);
      border-radius: 2px;
      transition: all 0.25s ease;
    }
    .topbar-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .topbar-hamburger.open span:nth-child(2) { opacity: 0; }
    .topbar-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .topbar-brand {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }
    .topbar-brand-icon {
      width: 28px;
      height: 28px;
      background: var(--gold2);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .topbar-brand-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: var(--white);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ============================================================
       MAIL VIEWER (full screen overlay)
    ============================================================ */
    #mail-viewer {
      position: fixed;
      inset: 0;
      background: var(--parch);
      z-index: 600;
      display: none;
      flex-direction: column;
    }
    #mail-viewer.open { display: flex; }
    .mv-header {
      background: var(--white);
      border-bottom: 1px solid var(--parch2);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .mv-back {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--muted);
      cursor: pointer;
      transition: color 0.15s;
      padding: 4px;
    }
    .mv-back:hover { color: var(--ink); }
    .mv-header-info { flex: 1; min-width: 0; }
    .mv-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mv-date { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
    .mv-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .mv-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 32px;
      -webkit-overflow-scrolling: touch;
    }
    .mv-body > * { max-width: 100%; }
    .mv-body img {
      max-width: 100%;
      max-height: 72vh;
      border-radius: 10px;
      box-shadow: var(--shadow-l);
      display: block;
    }
    .mv-no-scan {
      text-align: center;
      width: 100%;
      max-width: 560px;
      padding-top: 24px;
    }
    .mv-no-scan-icon { font-size: 72px; margin-bottom: 20px; }
    .mv-no-scan h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .mv-no-scan p { font-size: 14px; color: var(--muted); max-width: 360px; margin: 0 auto; line-height: 1.6; }

    /* ============================================================
       MODAL (assign services)
    ============================================================ */
    #modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(12,15,10,0.50);
      backdrop-filter: blur(4px);
      z-index: 300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .modal {
      background: var(--white);
      border-radius: 16px;
      padding: 30px;
      width: 100%;
      max-width: 480px;
      box-shadow: var(--shadow-l);
      animation: pageIn 0.22s ease;
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    .modal-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 500;
      color: var(--ink);
    }
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--muted);
      cursor: pointer;
      padding: 4px;
      transition: color 0.15s;
    }
    .modal-close:hover { color: var(--ink); }
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 24px;
    }

    /* ============================================================
       TOAST
    ============================================================ */
    #toast {
      position: fixed;
      bottom: 28px;
      right: 28px;
      background: var(--forest);
      color: var(--white);
      padding: 13px 18px;
      border-radius: 10px;
      font-size: 13.5px;
      box-shadow: var(--shadow-l);
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 9px;
      transform: translateY(16px);
      opacity: 0;
      transition: all 0.28s ease;
      pointer-events: none;
    }
    #toast.show { transform: translateY(0); opacity: 1; }
    #toast.error { background: #7f1d1d; }
    .toast-icon { font-size: 15px; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */

    /* ── Sidebar overlay (mobile) ── */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 99;
      backdrop-filter: blur(2px);
    }
    .sidebar-overlay.open { display: block; }

    /* ── Tablet (≤1024px) ── */
    @media (max-width: 1024px) {
      :root { --sb-width: 210px; }
      .auth-left { width: 38%; padding: 40px 36px; }
      .auth-headline h1 { font-size: 38px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .main { padding: 28px 24px; }
      /* Shrink upload column on tablet */
      .admin-docs-layout { grid-template-columns: 280px 1fr; }
    }

    /* ── Small tablet / large phone (≤860px) ── */
    @media (max-width: 860px) {
      /* Auth */
      .auth-left { display: none; }
      .auth-right { padding: 40px 28px; }

      /* Show mobile topbar */
      .mobile-topbar { display: flex; }

      /* Portal layout — sidebar hidden off-canvas */
      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        z-index: 200;
        width: 260px;
        top: 0; /* cover full height including topbar area */
      }
      .sidebar.open { transform: translateX(0); }

      .main {
        margin-left: 0;
        padding: 24px 18px;
        padding-top: calc(56px + 24px); /* topbar height + spacing */
      }

      /* Grids */
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .grid-2, .grid-3 { grid-template-columns: 1fr; }

      /* Page header stack on small screens */
      .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
      .page-header .btn { width: auto; align-self: stretch; justify-content: center; }

      /* Mail toolbar */
      .mail-toolbar { flex-wrap: wrap; }
      .mail-toolbar .search-wrap { min-width: 0; flex: 1 1 200px; }
      .filter-select { flex: 1 1 120px; }

      /* Tables — horizontally scrollable */
      .card { overflow-x: auto; }
      .data-table { min-width: 500px; }
      /* Switch admin client list to cards on tablet/mobile */
      .admin-table-wrap { display: none; }
      .admin-cards-wrap { display: block; }
      /* Stack admin docs layout on mobile */
      .admin-docs-layout { grid-template-columns: 1fr; }
      .admin-docs-upload-col { position: static; }
      .dh-table-wrap { display: none; }
      .dh-cards-wrap { display: block; }

      /* Form section full width */
      .form-section { max-width: 100%; }

      /* History modal full-width on mobile */
      #history-overlay { padding: 12px !important; }
      #history-overlay > div { max-height: 92vh !important; border-radius: 14px !important; }

      /* Mail viewer header needs more padding on mobile (back btn area) */
      .mv-header { padding: 12px 16px; }
      .mv-body { padding: 20px 16px 32px; }
    }

    /* ── Mobile (≤600px) ── */
    @media (max-width: 600px) {
      html { font-size: 14px; }

      /* Auth */
      .auth-right { padding: 28px 20px; }
      .auth-box { max-width: 100%; }

      /* Portal main */
      .main { padding: 20px 14px; padding-top: calc(56px + 20px); }

      /* Stat cards single column */
      .stats-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }

      /* Stat card compact */
      .stat-card { padding: 16px; }
      .stat-card-value { font-size: 28px; }

      /* Card padding tighter */
      .card { padding: 16px; }
      .card-title { font-size: 13px; margin-bottom: 14px; }

      /* Mail row — compact */
      .mail-row { gap: 9px; padding: 9px 10px; }
      .mail-thumb { width: 34px; height: 34px; font-size: 15px; }
      .mail-sender { font-size: 13px; }
      .mail-subject { font-size: 12px; }
      .mail-date { font-size: 11px; }

      /* Mail viewer — full screen, scrollable from top */
      .mv-header {
        padding: 10px 14px;
        gap: 8px;
        flex-wrap: nowrap;
      }
      .mv-title { font-size: 13px; }
      .mv-date  { font-size: 11.5px; }
      .mv-actions { gap: 5px; flex-shrink: 0; }
      .mv-actions .btn { font-size: 11px; padding: 5px 8px; }
      .mv-body { padding: 16px 14px 32px; }
      .mv-no-scan { padding-top: 16px; }
      .mv-no-scan-icon { font-size: 52px; margin-bottom: 14px; }
      .mv-no-scan h3 { font-size: 20px; }

      /* Modal full-screen on mobile */
      #modal-overlay { padding: 0; align-items: flex-end; }
      .modal {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 24px 20px;
      }

      /* History overlay modal */
      #history-overlay { padding: 0 !important; align-items: flex-end !important; }
      #history-modal {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        max-height: 90vh !important;
      }

      /* Toast full width at bottom */
      #toast {
        bottom: 16px;
        right: 12px;
        left: 12px;
        font-size: 13px;
        padding: 12px 14px;
      }

      /* Tables: scroll */
      .data-table { min-width: 400px; }

      /* Upload zone compact */
      .upload-zone { padding: 24px 16px; }

      /* Page header */
      .page-header-left h2 { font-size: 24px; }

      /* Service rows */
      .service-row { gap: 10px; }
      .service-icon { width: 34px; height: 34px; font-size: 16px; }

      /* Sidebar wider on small phones */
      .sidebar { width: 85vw; max-width: 300px; }
    }

    /* ── Very small phones (≤380px) ── */
    @media (max-width: 380px) {
      .main { padding: 16px 12px; padding-top: calc(56px + 16px); }
      .stats-grid { gap: 8px; }
      .stat-card-value { font-size: 24px; }
      .auth-right { padding: 20px 14px; }
      .topbar-brand-name { display: none; }
    }

    /* ── Referral Banner ─────────────────────────── */
    .referral-banner-wrap {
      margin-top: 28px;
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    }
    .referral-banner-img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
    }
    @media (max-width: 768px) {
      .referral-banner-wrap {
        border-radius: 10px;
        margin-top: 20px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.15);
      }
      .referral-banner-img { border-radius: 10px; }
    }
    @media (max-width: 480px) {
      .referral-banner-wrap {
        border-radius: 8px;
        margin-top: 16px;
      }
      .referral-banner-img { border-radius: 8px; }
    }

    /* ============================================================
       TICKET SYSTEM STYLES
    ============================================================ */

    /* Status color tokens */
    --tk-open-bg:        #fef9c3;
    --tk-open-color:     #92400e;
    --tk-open-bar:       #f59e0b;
    --tk-inprogress-bg:  #dbeafe;
    --tk-inprogress-color: #1e3a5f;
    --tk-inprogress-bar: #3b82f6;
    --tk-replied-bg:     #ede9fe;
    --tk-replied-color:  #4c1d95;
    --tk-replied-bar:    #8b5cf6;
    --tk-completed-bg:   #dcfce7;
    --tk-completed-color:#166534;
    --tk-completed-bar:  #22c55e;

    .tk-status-open       { background:#fef9c3; color:#92400e; }
    .tk-status-in_progress{ background:#dbeafe; color:#1e3a5f; }
    .tk-status-replied    { background:#ede9fe; color:#4c1d95; }
    .tk-status-completed  { background:#dcfce7; color:#166534; }

    /* Ticket list row */
    .tk-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border: 1.5px solid var(--parch2);
      border-radius: 11px;
      margin-bottom: 9px;
      background: var(--white);
      cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .tk-row:hover {
      border-color: var(--gold);
      box-shadow: var(--shadow-s);
    }
    .tk-row-left { flex: 1; min-width: 0; }
    .tk-row-id {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .tk-row-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tk-row-meta {
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .tk-row-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }

    /* Progress bar */
    .tk-progress-wrap {
      width: 110px;
    }
    .tk-progress-track {
      width: 100%;
      height: 5px;
      background: var(--parch2);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 3px;
    }
    .tk-progress-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 0.4s ease;
    }
    .tk-progress-label {
      font-size: 10.5px;
      color: var(--muted);
      text-align: right;
    }

    /* Status pill */
    .tk-pill {
      display: inline-flex;
      align-items: center;
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* ── Ticket Detail Overlay ── */
    #ticket-detail-overlay {
      position: fixed;
      inset: 0;
      background: rgba(12,15,10,0.50);
      backdrop-filter: blur(4px);
      z-index: 400;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 24px;
      overflow-y: auto;
    }
    #ticket-detail-overlay.open { display: flex; }
    .tk-detail-modal {
      background: var(--white);
      border-radius: 16px;
      width: 100%;
      max-width: 680px;
      box-shadow: var(--shadow-l);
      animation: pageIn 0.22s ease;
      display: flex;
      flex-direction: column;
      margin: auto;
    }
    .tk-detail-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 24px 26px 20px;
      border-bottom: 1px solid var(--parch2);
      flex-shrink: 0;
    }
    .tk-detail-header-left { flex: 1; min-width: 0; }
    .tk-detail-id {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .tk-detail-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 8px;
      word-break: break-word;
    }
    .tk-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .tk-detail-close {
      background: var(--parch2);
      border: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .tk-detail-close:hover { background: var(--parch3); color: var(--ink); }

    /* Progress bar in detail */
    .tk-detail-progress {
      padding: 16px 26px;
      border-bottom: 1px solid var(--parch2);
      background: var(--parch);
    }
    .tk-detail-progress-steps {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 8px;
    }
    .tk-step {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .tk-step::before {
      content: '';
      position: absolute;
      top: 12px;
      left: -50%;
      width: 100%;
      height: 2px;
      background: var(--parch3);
      z-index: 0;
    }
    .tk-step:first-child::before { display: none; }
    .tk-step-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--parch3);
      border: 2px solid var(--parch3);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--muted);
      transition: all 0.3s;
    }
    .tk-step.done .tk-step-dot {
      background: var(--green);
      border-color: var(--green);
      color: white;
    }
    .tk-step.active .tk-step-dot {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--ink);
    }
    .tk-step.done::before { background: var(--green); }
    .tk-step-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 5px;
      text-align: center;
    }
    .tk-step.done .tk-step-label,
    .tk-step.active .tk-step-label { color: var(--ink2); }

    /* Chat area */
    .tk-chat {
      flex: 1;
      overflow-y: auto;
      padding: 20px 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-height: 360px;
    }
    .tk-msg {
      display: flex;
      flex-direction: column;
      max-width: 80%;
    }
    .tk-msg.admin { align-self: flex-start; }
    .tk-msg.client { align-self: flex-end; }
    .tk-msg-bubble {
      padding: 11px 14px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.6;
      word-break: break-word;
    }
    .tk-msg.admin .tk-msg-bubble {
      background: var(--parch);
      border: 1px solid var(--parch2);
      border-radius: 3px 12px 12px 12px;
      color: var(--ink);
    }
    .tk-msg.client .tk-msg-bubble {
      background: var(--forest);
      color: var(--white);
      border-radius: 12px 3px 12px 12px;
    }
    .tk-msg-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tk-msg.client .tk-msg-meta { justify-content: flex-end; }
    .tk-msg-attachment {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 5px 10px;
      border-radius: 7px;
      font-size: 12px;
      margin-top: 7px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
    }
    .tk-msg.admin .tk-msg-attachment {
      background: var(--white);
      border-color: var(--parch3);
      color: var(--ink2);
    }

    /* Original ticket body (first message area) */
    .tk-original-body {
      background: var(--parch);
      border-left: 3px solid var(--gold);
      border-radius: 0 8px 8px 0;
      padding: 12px 14px;
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--ink2);
      margin-bottom: 4px;
    }

    /* Reply box */
    .tk-reply-box {
      padding: 16px 26px 22px;
      border-top: 1px solid var(--parch2);
      flex-shrink: 0;
    }
    .tk-reply-textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--parch3);
      border-radius: 9px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      resize: vertical;
      min-height: 80px;
      transition: border-color 0.18s;
      line-height: 1.6;
    }
    .tk-reply-textarea:focus { border-color: var(--gold); }
    .tk-reply-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      gap: 10px;
      flex-wrap: wrap;
    }
    .tk-reply-attach {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tk-attach-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: 1.5px solid var(--parch3);
      border-radius: 7px;
      padding: 6px 11px;
      font-size: 12.5px;
      color: var(--ink2);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .tk-attach-btn:hover { border-color: var(--gold); background: var(--parch); }
    .tk-attach-name {
      font-size: 12px;
      color: var(--muted);
      max-width: 140px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tk-attach-remove { cursor: pointer; color: var(--muted); font-size: 12px; }
    .tk-attach-remove:hover { color: var(--red); }
    .tk-reply-actions { display: flex; gap: 8px; }

    /* Admin status changer */
    .tk-status-select {
      padding: 7px 11px;
      border: 1.5px solid var(--parch3);
      border-radius: 8px;
      font-size: 12.5px;
      font-family: 'Inter', sans-serif;
      color: var(--ink);
      background: var(--white);
      outline: none;
      cursor: pointer;
    }
    .tk-status-select:focus { border-color: var(--gold); }

    /* Empty state */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }
    .empty-state-icon { font-size: 52px; margin-bottom: 14px; }
    .empty-state p { font-size: 14px; }

    /* Create ticket form */
    .tk-create-form textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--parch3);
      border-radius: 9px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--ink);
      background: var(--white);
      outline: none;
      resize: vertical;
      min-height: 96px;
      transition: border-color 0.18s;
      line-height: 1.6;
    }
    .tk-create-form textarea:focus { border-color: var(--gold); }

    /* Admin ticket client badge */
    .tk-client-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--parch2);
      border-radius: 20px;
      padding: 3px 10px;
      font-size: 12px;
      color: var(--ink2);
      font-weight: 500;
    }

    /* NEW badge on ticket rows */
    .tk-new-badge {
      display: inline-flex;
      align-items: center;
      background: #ef4444;
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      border-radius: 20px;
      vertical-align: middle;
      margin-left: 5px;
      animation: tk-pulse 1.8s ease-in-out infinite;
    }
    @keyframes tk-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.75; transform: scale(0.94); }
    }
    .tk-row-new {
      background: #fffbf0 !important;
      border-color: rgba(200,169,110,0.55) !important;
      box-shadow: 0 0 0 2px rgba(200,169,110,0.18) !important;
    }
    .tk-row-new .tk-row-id {
      color: var(--forest) !important;
    }

    /* Sidebar notification dot (pulsing red) */
    .sb-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
      flex-shrink: 0;
      animation: tk-pulse 1.8s ease-in-out infinite;
    }

    /* Override .sb-badge for ticket nav — use number bubble */
    #admin-tk-badge, #client-tk-badge, #admin-ship-badge, #admin-inquiry-badge, #rep-msg-badge {
      background: #ef4444 !important;
      color: #fff !important;
      font-size: 10px;
      font-weight: 800;
      min-width: 18px;
      text-align: center;
    }

    /* Admin ticket filter bar row */
    .tk-filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    /* ── end ticket styles ── */
      #ticket-detail-overlay { padding: 12px; align-items: flex-end; }
      .tk-chat { max-height: 260px; }
      .tk-progress-wrap { width: 80px; }
      .tk-detail-header { padding: 18px 18px 14px; }
      .tk-detail-progress { padding: 12px 18px; }
      .tk-chat { padding: 14px 18px; }
      .tk-reply-box { padding: 12px 18px 18px; }
    }
    @media (max-width: 600px) {
      .tk-row { flex-wrap: wrap; }
      .tk-row-right { flex-direction: row; align-items: center; }
      .tk-progress-wrap { width: 100px; }
      .tk-msg { max-width: 90%; }
    }

    /* ============================================================
       STEP SIGNUP
    ============================================================ */
    .signup-step { display: none; }
    .signup-step.active { display: block; }

    /* Step progress bar */
    .step-progress {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 28px;
    }
    .step-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      flex: 1;
      position: relative;
    }
    .step-node::before {
      content: '';
      position: absolute;
      top: 14px;
      left: calc(-50%);
      width: 100%;
      height: 2px;
      background: var(--parch3);
      z-index: 0;
    }
    .step-node:first-child::before { display: none; }
    .step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--parch2);
      border: 2px solid var(--parch3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      z-index: 1;
      transition: all 0.25s;
    }
    .step-node.done .step-dot {
      background: var(--forest);
      border-color: var(--forest);
      color: var(--white);
    }
    .step-node.active .step-dot {
      background: var(--gold2);
      border-color: var(--gold);
      color: var(--white);
      box-shadow: 0 0 0 4px rgba(212,160,23,0.18);
    }
    .step-node.done::before { background: var(--forest); }
    .step-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }
    .step-node.active .step-label { color: var(--gold); }
    .step-node.done  .step-label  { color: var(--forest); }

    /* ID document dynamic rows */
    .id-doc-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      background: var(--parch);
      border-radius: 9px;
      border: 1.5px solid var(--parch2);
      margin-bottom: 10px;
    }
    .id-doc-row-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .id-doc-remove {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 16px;
      padding: 2px 4px;
      margin-top: 2px;
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .id-doc-remove:hover { color: var(--red); }

    /* Expanded profile modal */
    .profile-modal { max-width: 520px; }
    .profile-modal-body { max-height: 70vh; overflow-y: auto; }

    /* Expanded client popup (admin) */
    .client-popup { max-width: 520px; max-height: 86vh; overflow-y: auto; }

    /* ID doc display chip (read-only) */
    .id-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: var(--parch);
      border: 1px solid var(--parch2);
      border-radius: 9px;
      margin-bottom: 8px;
    }
    .id-chip-icon { font-size: 18px; flex-shrink: 0; }
    .id-chip-info { flex: 1; min-width: 0; }
    .id-chip-title { font-size: 13px; font-weight: 600; color: var(--ink); }
    .id-chip-file  { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ============================================================
       CLIENT DETAIL PAGE
    ============================================================ */
    .cd-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .cd-toolbar .search-wrap { flex: 1; min-width: 180px; }
    .cd-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border: 1.5px solid var(--parch3);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink2);
      background: var(--white);
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .cd-sort-btn:hover,
    .cd-sort-btn.active { border-color: var(--gold); color: var(--gold); background: #f8f6f0; }
    .cd-sort-btn .sort-arrow { font-size: 10px; opacity: 0.6; }
    .cd-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 18px;
      border: 1.5px solid var(--parch2);
      border-radius: 12px;
      margin-bottom: 10px;
      background: var(--white);
      transition: border-color 0.18s, box-shadow 0.18s;
      cursor: pointer;
    }
    .cd-row:hover { border-color: var(--gold); box-shadow: var(--shadow-s); }
    .cd-row-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 700; color: var(--white);
      flex-shrink: 0; margin-top: 2px;
    }
    .cd-row-main { flex: 1; min-width: 0; }
    .cd-row-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    .cd-row-email { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
    .cd-row-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 16px;
      margin-bottom: 10px;
    }
    @media (max-width: 700px) { .cd-row-meta { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 440px) { .cd-row-meta { grid-template-columns: 1fr; } }
    .cd-meta-item { min-width: 0; }
    .cd-meta-label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
    }
    .cd-meta-value { font-size: 13px; color: var(--ink); font-weight: 500; }
    .cd-meta-value.muted { color: var(--muted); font-weight: 400; }
    .cd-proofs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
    .cd-row-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
    @media (max-width: 600px) {
      .cd-row { flex-wrap: wrap; }
      .cd-row-actions { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
    }
    /* Expiry warning badges */
    .lease-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; padding: 2px 8px;
      border-radius: 20px;
    }
    .lease-ok      { background: var(--green-bg); color: var(--green); }
    .lease-soon    { background: #fef9c3; color: #92400e; }
    .lease-expired { background: var(--red-bg); color: var(--red); }
    .lease-none    { background: #f3f4f6; color: #6b7280; }

    /* Edit lease modal */
    #edit-lease-overlay {
      position: fixed; inset: 0;
      background: rgba(12,15,10,0.50);
      backdrop-filter: blur(4px);
      z-index: 350;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #edit-lease-overlay.open { display: flex; }
    .edit-lease-modal {
      background: var(--white);
      border-radius: 16px;
      padding: 28px 30px;
      width: 100%;
      max-width: 460px;
      box-shadow: var(--shadow-l);
      animation: pageIn 0.22s ease;
    }
    @media (max-width: 600px) {
      #edit-lease-overlay { padding: 0; align-items: flex-end; }
      .edit-lease-modal { border-radius: 20px 20px 0 0; max-width: 100%; }
    }