@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

  /* ============================================================
     GLOBAL SETTINGS
     Change any value here and it updates everywhere in the app.
     These are the only place raw colors / sizes should live.
     ============================================================ */
  :root{
    /* ---- Paper / surfaces ---- */
    --paper:#F7F5F0;          /* app background            */
    --paper-card:#FFFDF9;     /* cards, calendar cells     */
    --paper-line:#DAD4C5;     /* borders, dividers         */

    /* ---- Text ---- */
    --ink:#22282E;            /* primary text              */
    --ink-soft:#5C6773;       /* secondary / muted text    */

    /* ---- Dark blue sidebar family ---- */
    --navy:#081C33;           /* sidebar + nav background  */
    --navy-deep:#040F1E;      /* sidebar header / footer   */
    --navy-line:#153152;      /* sidebar dividers          */
    --navy-text:#DCE6F2;      /* sidebar primary text      */
    --navy-text-soft:#8FACCE; /* sidebar muted text        */
    --navy-active:#1E4A7D;    /* selected sidebar item     */

    /* ---- Accent + status ---- */
    --steel:#2C5F86;          /* primary accent            */
    --steel-dark:#1F4863;     /* accent hover              */
    --steel-bg:#E4EDF3;       /* accent tint background    */
    --seal:#9C3B3B;           /* urgent / red             */
    --seal-bg:#F3E4E2;
    --forest:#3F6B4F;         /* success / green          */
    --forest-bg:#E8EFE9;
    --amber:#A9791F;          /* pending / warning        */
    --amber-bg:#F3EBD8;

    /* ---- Typography ---- */
    --font-body:'Inter',sans-serif;
    --font-display:'Source Serif 4',serif;
    --font-script:'Caveat',cursive;
    --fs-base:14px;

    /* ---- Layout ---- */
    --sidebar-w:264px;
    --topnav-h:60px;
    --radius:10px;
    --radius-sm:7px;
    --gap:20px;
    --shadow:0 1px 2px rgba(20,42,68,.06), 0 6px 18px rgba(20,42,68,.05);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:var(--fs-base);
    -webkit-font-smoothing:antialiased;
  }
  button{ font-family:inherit; cursor:pointer; }
  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid #AA4512; outline-offset:2px; border-radius:3px; }

  .app{ display:flex; min-height:100vh; }

  /* ============================================================
     SIDEBAR  (dark blue)
     ============================================================ */
  .sidebar{
    width:var(--sidebar-w);
    flex-shrink:0;
    /* dark → light → dark, with the wave lines flowing through;
       the top matches the bar behind the tabs exactly */
    background:url('../img/corporate-waves-dark.svg') center bottom / cover no-repeat fixed,
               linear-gradient(180deg, #040F1E 0%, #3A6AA0 52%, #0F2644 100%);
    color:var(--navy-text);
    display:flex;
    flex-direction:column;
    position:relative; z-index:30;   /* above the tab stack */
  }
  /* The matching light waves for landing pages' gray area. */
  .page-waves{
    background:#F7F5F0 url('../img/corporate-waves.svg') center bottom / cover no-repeat fixed;
  }
  /* The seam shadow lives on its own strip, starting exactly at the
     Drive tab's top edge — the corner above stays clean. */
  .sidebar::after{
    content:''; position:absolute;
    top:21px; bottom:0; right:0; width:0;
    box-shadow:3px 0 16px rgba(2,8,18,.55);
    clip-path:inset(0 -26px 0 0);   /* nothing bleeds above the start */
  }
  .brand{
    padding:20px 14px 18px;
    background:transparent;   /* the sidebar's fade shows through */
    position:relative;
    text-align:center;        /* logo, stars, workspace line centered */
  }
  /* ============================================================
     ORION'S CROWN — the top of the constellation, photographed.
     Betelgeuse (the warm shoulder, lower left), Bellatrix (the
     cool shoulder, lower right, riding a touch higher), Meissa
     (the head, small, above and just right of center), and one
     faint field star. Each is a white-hot core inside a colored
     halo, the way stars actually bloom on camera sensors.
     ============================================================ */
  .brand::after{
    content:''; position:absolute; pointer-events:none;
    left:50%; margin-left:-108px; top:96px; width:216px; height:66px;
    background:
      /* cores */
      radial-gradient(circle at 14% 47%, #FFFFFF 0, #FFFFFF 1.5px, rgba(255,255,255,0) 2.6px),
      radial-gradient(circle at 88% 38%, #FFFFFF 0, #FFFFFF 1.2px, rgba(255,255,255,0) 2.1px),
      radial-gradient(circle at 56% 13%, #FFFFFF 0, #FFFFFF 0.9px, rgba(255,255,255,0) 1.6px),
      radial-gradient(circle at 34% 27%, rgba(236,243,255,.8) 0, rgba(236,243,255,0) 1.5px),
      radial-gradient(circle at 48% 88%, #FFFFFF 0, #FFFFFF 1.2px, rgba(255,255,255,0) 2.1px),
      /* halos */
      radial-gradient(circle at 14% 47%, rgba(255,206,186,.8) 0, rgba(255,190,170,.28) 4px, rgba(255,186,166,0) 11px),
      radial-gradient(circle at 14% 47%, rgba(255,184,160,.09) 0, rgba(255,184,160,0) 19px),
      radial-gradient(circle at 88% 38%, rgba(208,226,255,.8) 0, rgba(186,212,255,.28) 3px, rgba(186,212,255,0) 8px),
      radial-gradient(circle at 56% 13%, rgba(214,229,255,.65) 0, rgba(214,229,255,0) 5px),
      radial-gradient(circle at 48% 88%, rgba(206,225,255,.78) 0, rgba(184,211,255,.26) 3px, rgba(184,211,255,0) 8px);
  }
  .brand-mark{
    display:flex; align-items:center; gap:9px;
    font-family:var(--font-display);
    font-weight:700; font-size:20px; letter-spacing:.2px;
    color:#fff;
  }
  .brand-mark svg{ flex-shrink:0; }
    /* ---- Brand: real logo assets ---- */
  .brand-logo{
    display:block; width:min(216px, 100%); height:auto;
    margin:4px auto 10px;      /* centered at any sidebar width */
  }
  .brand-sub{
    margin-top:5px; font-size:12px; letter-spacing:.3px;
    color:var(--navy-text-soft); text-transform:uppercase;
  }

  .side-section{ padding:18px 14px; }
  .side-section.people-section{ margin-top:30px; }
  .side-label{
    font-size:11px; font-weight:600; letter-spacing:.7px;
    text-transform:uppercase; color:var(--navy-text-soft);
    padding:0 8px 8px;
    display:flex; align-items:center;
  }
  .add-cat{
    margin-left:auto; flex-shrink:0;
    /* 19px wide so its center lines up with the checkbox column below
       (row padding 10px + 15px checkbox vs label padding 8px). */
    width:19px; height:22px; border-radius:5px;
    border:0; background:transparent;
    color:var(--navy-text-soft); font-size:21px; font-weight:400; line-height:1;
    display:grid; place-items:center; padding:0 0 2px;
  }
  .add-cat:hover{ background:var(--navy-active); color:#fff; }
  .side-item{
    display:flex; align-items:center; gap:10px;
    width:100%; text-align:left; border:0; background:transparent;
    color:var(--navy-text); font-size:13.5px; font-weight:500;
    padding:9px 10px; border-radius:var(--radius-sm);
    margin-bottom:2px;
  }
  .side-item:hover{ background:var(--navy-active); }
  .side-item .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .side-item .count{
    margin-left:auto; font-size:11.5px; color:var(--navy-text-soft);
  }
  .side-divider{ height:1px; background:var(--navy-line); margin:6px 12px; }

  /* ---- People rows (static placeholders for the person filter) ---- */
  .side-item.person{ cursor:pointer; user-select:none; }
  .side-item.person.person-off{ opacity:.45; }
  .side-item.person.person-off:hover{ opacity:.8; }
  .side-item.person input[type="checkbox"]{
    width:15px; height:15px; flex-shrink:0;
    cursor:pointer;
  }
  .side-item.meeting-item .kebab{ order:5; margin-left:auto; }
  .side-item.person .kebab{
    order:5;               /* always the rightmost element, so the
                              checkbox stays beside the name like
                              the workspace members' do */
    margin-left:auto; flex-shrink:0;
    width:22px; height:22px; border:0; border-radius:5px;
    background:transparent; color:var(--navy-text-soft);
    font-size:16px; line-height:1; letter-spacing:1px;
    display:grid; place-items:center;
    opacity:0; transition:opacity .12s ease, background .12s ease;
  }
  .side-item.person:hover .kebab,
  .side-item.person .kebab:focus-visible{ opacity:1; }
  .side-item.person .kebab:hover{ background:var(--navy-active); color:#fff; }

  /* ---- Category context menu ---- */
  .ctx-menu{
    position:fixed; z-index:60; min-width:195px;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius-sm);
    box-shadow:0 6px 24px rgba(14,30,50,.22);
    padding:5px; display:none;
  }
  .ctx-menu.open{ display:block; }
  .ctx-menu button{
    display:block; width:100%; text-align:left;
    border:0; background:transparent; color:var(--ink);
    font-size:13px; font-weight:500;
    padding:8px 10px; border-radius:5px;
  }
  .ctx-menu button:hover{ background:var(--steel-bg); color:var(--steel-dark); }
  .ctx-menu button.danger{ color:var(--seal); }
  .ctx-menu button.danger:hover{ background:var(--seal-bg); color:var(--seal); }

  .side-foot{
    margin-top:auto; padding:14px 18px;
    background:var(--navy-deep);
    display:flex; align-items:center; gap:11px;
  }
  .avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:#B3005C; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:13px;
  }
  .side-foot .name{ font-size:13px; font-weight:600; color:#fff; }
  .side-foot .role{ font-size:11.5px; color:var(--navy-text-soft); }
  .side-foot .identity{ min-width:0; }
  .auth-link{
    margin-left:auto; flex-shrink:0;
    border:0; background:transparent;
    color:var(--navy-text-soft); font-size:12px; font-weight:500;
    text-decoration:underline; text-underline-offset:2px;
    padding:4px 2px;
  }
  .auth-link:hover{ color:#fff; }
  .side-foot.signed-out .avatar,
  .side-foot.signed-out .identity{ opacity:.4; }

  /* ============================================================
     MAIN COLUMN
     ============================================================ */
  .main{ flex:1; display:flex; flex-direction:column; min-width:0; }

  /* ---- Top navigation ---- */
  .topnav{
    height:var(--topnav-h); flex-shrink:0;
    display:flex; align-items:flex-end;
    padding:10px 18px 0 0;       /* Drive sits flush with the sheet's left edge */
    background:var(--navy-deep);
    overflow-x:auto; overflow-y:hidden;   /* narrow windows: tabs slide
                                             inside the bar, never past it */
    scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{ display:none; }
  .tn-ws-wrap{ flex-shrink:0; }
  .tab{
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:0; position:relative;
    flex:0 0 132px; min-width:132px;  /* uniform: every tab the same
                                          width, wide enough for the
                                          Corporate toggle */
    padding:10px 0; font-size:13.5px; font-weight:500;
    color:#EDF4F8;
    background:linear-gradient(180deg, #009FC9, #0090B6);   /* #0098C0 family */
    border-radius:9px 9px 0 0;
    white-space:nowrap;
    margin-left:-11px;           /* each tab tucks under the one before */
    /* Depth: shadow cast up and to the right (onto the tab beneath),
       clipped so nothing ever smudges below onto the page. */
    box-shadow:4px -3px 9px rgba(2,8,18,.55);
    clip-path:inset(-16px -16px 0 -16px);
  }
  .tab:first-of-type{ margin-left:0; }
  /* The stack: Drive in front, each neighbor sequentially behind */
  .topnav .tab:nth-of-type(1){ z-index:24; }
  .topnav .tab:nth-of-type(2){ z-index:23; }
  .topnav .tab:nth-of-type(3){ z-index:22; }
  .topnav .tab:nth-of-type(4){ z-index:21; }
  .topnav .tab:nth-of-type(5){ z-index:20; }
  .topnav .tab:nth-of-type(6){ z-index:19; }
  .topnav .tab:nth-of-type(7){ z-index:18; }
  .topnav .tab:nth-of-type(8){ z-index:17; }
  .topnav .tab:nth-of-type(9){ z-index:16; }
  .topnav .tab:nth-of-type(10){ z-index:15; }
  .topnav .tab:nth-of-type(11){ z-index:14; }
  .topnav .tab:nth-of-type(12){ z-index:13; }
  .topnav .tab:nth-of-type(13){ z-index:12; }
  .topnav .tab:nth-of-type(14){ z-index:11; }
  .topnav .tab:nth-of-type(15){ z-index:10; }
  .topnav .tab:nth-of-type(16){ z-index:9; }
  .topnav .tab:nth-of-type(17){ z-index:8; }
  .topnav .tab:nth-of-type(18){ z-index:7; }
  .topnav .tab:nth-of-type(19){ z-index:6; }
  .topnav .tab:nth-of-type(20){ z-index:5; }
  .topnav .tab:nth-of-type(21){ z-index:4; }
  .topnav .tab:nth-of-type(22){ z-index:3; }
  .topnav .tab:nth-of-type(23){ z-index:2; }
  .topnav .tab:nth-of-type(24){ z-index:1; }
  .tab:hover{ color:#FFFFFF; background:linear-gradient(180deg, #00A9D5, #0098C0); }
  .tab.active{
    color:var(--navy); font-weight:600;
    /* brightest white at the top, melting into the page's paper */
    background:linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
    z-index:30;                  /* the open folder comes forward */
  }
  .tab svg{ flex-shrink:0; }
  .tab-admin{ margin-left:-11px; }   /* tucks into the stack beside Forms */
  /* ---- Group tabs (Corporate / Accounting / Forecast): each
     toggles its own set of tabs; one group open at a time ---- */
  .tab-group{ cursor:pointer; user-select:none; gap:4px; }
  .corp-arrow{
    margin-left:0; margin-top:2.5px;
    transition:transform .15s ease;
  }
  .corp-arrow polyline{ stroke-width:3.4; }
  .topnav .tab[data-g]{ display:none; }
  html.open-corporate .topnav .tab[data-g="corporate"],
  html.open-accounting .topnav .tab[data-g="accounting"],
  html.open-forecast .topnav .tab[data-g="forecast"]{ display:flex; }
  html.open-corporate .tab-group[data-group="corporate"] .corp-arrow,
  html.open-accounting .tab-group[data-group="accounting"] .corp-arrow,
  html.open-forecast .tab-group[data-group="forecast"] .corp-arrow{
    transform:rotate(180deg);
  }
  /* Section colors: Corporate rust, Accounting bright blue,
     Forecast magenta — each group tab and its sub-tabs match. */
  .tab-group[data-group="corporate"]:not(.active),
  .tab[data-g="corporate"]:not(.active){
    background:linear-gradient(180deg, #B84E15, #A2410F);
  }
  .tab-group[data-group="corporate"]:not(.active):hover,
  .tab[data-g="corporate"]:not(.active):hover{
    background:linear-gradient(180deg, #C65819, #B04812);
  }
  .tab-group[data-group="accounting"]:not(.active),
  .tab[data-g="accounting"]:not(.active){
    background:linear-gradient(180deg, #00A1D7, #008FC0);
  }
  .tab-group[data-group="accounting"]:not(.active):hover,
  .tab[data-g="accounting"]:not(.active):hover{
    background:linear-gradient(180deg, #00ADE7, #009BD0);
  }
  .tab-group[data-group="forecast"]:not(.active),
  .tab[data-g="forecast"]:not(.active){
    background:linear-gradient(180deg, #BE0663, #A60056);
  }
  .tab-group[data-group="forecast"]:not(.active):hover,
  .tab[data-g="forecast"]:not(.active):hover{
    background:linear-gradient(180deg, #CC0F6E, #B4005E);
  }
  /* the Accounting and Forecast tabs' contents step right, clear
     of the shadow cast by the tab to their left */
  .tab-group[data-group="accounting"],
  .tab-group[data-group="forecast"]{ padding-left:14px; }

  /* ---- Page area ---- */
  .page{ padding:28px 32px; flex:1; }
  .page-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; margin-bottom:22px; flex-wrap:wrap;
  }
  .page-title{
    font-family:var(--font-display); font-weight:700;
    font-size:26px; margin:0; line-height:1.1;
  }
  .page-sub{ margin:5px 0 0; font-size:13.5px; color:var(--ink-soft); }

  .btn{
    display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--paper-line); background:var(--paper-card);
    color:var(--ink); font-size:13px; font-weight:500;
    font-family:var(--font-body);
    padding:8px 13px; border-radius:var(--radius-sm);
  }
  .btn:hover{ border-color:var(--ink-soft); }
  .btn-primary{
    background:#AA4512; border-color:#AA4512; color:#fff;
  }
  .btn-primary:hover{ background:#8F3A0F; border-color:#8F3A0F; }

  /* ============================================================
     CALENDAR
     ============================================================ */
  .cal-toolbar{
    display:flex; align-items:center; gap:14px; margin-bottom:16px;
  }
  .cal-month{
    font-family:var(--font-display); font-weight:600; font-size:19px;
    min-width:190px;
  }
  .cal-nav{
    display:inline-flex; border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); overflow:hidden;
  }
  .cal-nav button{
    border:0; background:var(--paper-card); color:var(--ink-soft);
    width:34px; height:32px; font-size:15px; display:grid; place-items:center;
  }
  .cal-nav button:hover{ background:var(--steel-bg); color:var(--steel-dark); }
  .cal-nav button:disabled{ opacity:.35; cursor:default; }
  .cal-nav button:disabled:hover{ background:var(--paper-card); color:var(--ink-soft); }
  .cal-nav button+button{ border-left:1px solid var(--paper-line); }
  .cal-today-btn{ margin-left:2px; }
  .cal-legend{ margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); }
  .legend-item .dot{ width:9px; height:9px; border-radius:2px; }

  .calendar{
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .cal-weekdays{
    display:grid; grid-template-columns:repeat(7,1fr);
    border-bottom:1px solid var(--paper-line);
  }
  .cal-weekdays span{
    padding:11px 12px; font-size:11.5px; font-weight:600;
    letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft);
  }
  .cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr);
    grid-auto-rows:minmax(112px,1fr);
  }
  .cal-cell{
    border-right:1px solid var(--paper-line);
    border-bottom:1px solid var(--paper-line);
    padding:8px 9px; display:flex; flex-direction:column; gap:5px;
    min-width:0;
  }
  .cal-cell:nth-child(7n){ border-right:0; }
  .cal-grid > .cal-cell:nth-last-child(-n+7){ border-bottom:0; }
  .cal-cell.adjacent{ background:#FBFAF6; }
  .cal-cell.adjacent .daynum{ color:#B7B0A2; }
  .daynum{
    font-size:13px; font-weight:600; color:var(--ink);
    width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  }
  .cal-cell.today .daynum{ background:#AA4512; color:#fff; }
  .cal-cell.today{ background:#F7E9E0; }

  .event{
    font-size:11.5px; line-height:1.3; font-weight:500;
    padding:3px 7px; border-radius:5px;
    white-space:normal; overflow-wrap:break-word;
    border-left:3px solid;
  }
  .event.steel { background:var(--steel-bg);  color:var(--steel-dark); border-color:var(--steel); }
  .event.forest{ background:var(--forest-bg); color:var(--forest);     border-color:var(--forest); }
  .event.amber { background:var(--amber-bg);  color:var(--amber);      border-color:var(--amber); }
  .event.seal  { background:var(--seal-bg);   color:var(--seal);       border-color:var(--seal); }
  .event-more{ font-size:11px; color:var(--ink-soft); padding:1px 7px; font-weight:500; }
  .event.hidden-person{ display:none; }  /* task filtered out via sidebar checkbox */

  /* Current-month cells are clickable to add a task */
  .cal-cell:not(.adjacent){ cursor:pointer; }
  .cal-cell:not(.adjacent):hover{ background:var(--steel-bg); }
  .cal-cell.today:hover{ background:#F7E9E0; }

  /* ============================================================
     ADD-TASK MODAL
     ============================================================ */
  .modal-overlay{
    position:fixed; inset:0; z-index:50;
    background:rgba(14,30,50,.38);
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .modal-overlay.open{ display:flex; }
  .modal{
    width:100%; max-width:400px;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    box-shadow:0 10px 40px rgba(14,30,50,.25);
    padding:22px 24px;
  }
  .modal h3{
    font-family:var(--font-display); font-weight:700;
    font-size:19px; margin:0 0 2px;
  }
  .modal .modal-date{
    font-size:12.5px; color:var(--ink-soft); margin:0 0 16px;
  }
  .modal label.field-label{
    display:block; font-size:12px; font-weight:600;
    letter-spacing:.4px; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 6px;
  }
  .modal select, .modal textarea, .modal input[type="text"]{
    width:100%; font-family:inherit; font-size:13.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:9px 10px;
    margin-bottom:15px;
  }
  .modal select:focus, .modal textarea:focus, .modal input[type="text"]:focus{
    outline:2px solid #AA4512; outline-offset:0; border-color:#AA4512;
  }
  .modal textarea{ resize:vertical; min-height:74px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:9px; }
  .modal-actions .btn-danger{
    margin-right:auto;
    background:transparent; border-color:var(--seal); color:var(--seal);
    display:none;
  }
  .modal-actions .btn-danger:hover{ background:var(--seal-bg); }
  .modal.editing .btn-danger{ display:inline-flex; }
  .modal .form-error{
    display:none; font-size:12.5px; color:var(--seal); margin:-6px 0 12px;
  }
  .modal .form-error.show{ display:block; }

  /* ---- Empty-state panels for the not-yet-built sections ---- */
  .empty{
    display:none; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:10px; padding:70px 24px;
    background:var(--paper-card); border:1px dashed var(--paper-line);
    border-radius:var(--radius); color:var(--ink-soft);
  }
  .empty h2{ font-family:var(--font-display); color:var(--ink); margin:0; font-size:20px; }
  .empty p{ margin:0; max-width:340px; }

  .panel{ display:none; }
  .panel.active{ display:block; }
  .empty.active{ display:flex; }

  @media (max-width:860px){
    .sidebar{ display:none; }
    .cal-legend{ display:none; }
    .cal-grid{ grid-auto-rows:minmax(88px,1fr); }
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  /* ---- Multi-page: tabs are now links ---- */
  a.tab{ text-decoration:none; }

  /* ============================================================
     DRIVE: sidebar folder tree
     ============================================================ */
  .drive-tree{ font-size:13px; overflow-y:auto; }
  .drive-tree-empty{
    font-size:12.5px; color:var(--navy-text-soft);
    line-height:1.55; margin:0; padding:0 8px;
  }
  .folder-item{
    display:flex; align-items:center; gap:7px;
    padding:5px 8px; border-radius:6px;
    color:var(--navy-text); cursor:pointer;
    white-space:nowrap;
  }
  .folder-item:hover{ background:var(--navy-active); }
  .folder-caret{
    width:11px; flex-shrink:0; font-size:10px;
    color:var(--navy-text-soft); text-align:center;
    transition:transform .12s ease;
  }
  .collapsed > .folder-item .folder-caret{ transform:rotate(-90deg); }
  .folder-icon{ display:flex; flex-shrink:0; color:var(--navy-text-soft); }
  .folder-name{ overflow:hidden; text-overflow:ellipsis; }
  .folder-root > .folder-item .folder-name{ font-weight:600; }
  .folder-children{
    margin-left:13px; padding-left:7px;
    border-left:1px solid var(--navy-line);
  }
  .collapsed > .folder-children{ display:none; }

  /* ---- Drive: file rows + type badges ---- */
  .file-item{ cursor:default; }
  .file-badge{
    flex-shrink:0; min-width:27px; text-align:center;
    font-size:8.5px; font-weight:700; letter-spacing:.4px;
    color:#fff; padding:2px 4px; border-radius:4px;
    line-height:1.2;
  }
  .badge-pdf{ background:#C25B4E; }
  .badge-xls{ background:#3E7D5A; }
  .badge-doc{ background:#3C6E9F; }
  .badge-ppt{ background:#C07B3E; }
  .badge-img{ background:#7A6FB0; }
  .badge-txt{ background:#6B7A8C; }
  .badge-zip{ background:#8C6A4A; }
  .badge-gen{ background:#56718C; }

  /* ============================================================
     SIDEBAR RESIZE HANDLE
     ============================================================ */
  .sidebar{ position:relative; }
  .sidebar-resizer{
    position:absolute; top:0; right:-3px; bottom:0;
    width:7px; cursor:col-resize; z-index:20;
    background:transparent;
    transition:background .12s ease;
  }
  .sidebar-resizer:hover,
  .sidebar-resizer.dragging{
    background:rgba(255,255,255,.14);
  }
  body.sidebar-resizing{
    cursor:col-resize; user-select:none;
  }

  /* ============================================================
     DRIVE: file preview pane
     ============================================================ */
  .file-item.selected,
  .file-item.selected:hover{ background:var(--navy-active); }
  .file-preview{
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .preview-head{
    display:flex; align-items:center; gap:12px;
    padding:14px 18px;
    border-bottom:1px solid var(--paper-line);
  }
  .preview-head .file-badge{ min-width:32px; font-size:9.5px; }
  .preview-meta{ min-width:0; flex:1; }
  .preview-name{
    font-weight:600; font-size:14.5px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .preview-sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
  .preview-body{
    min-height:200px; max-height:calc(100vh - 320px);
    overflow:auto; background:var(--paper);
  }
  .preview-body iframe{
    display:block; width:100%; height:calc(100vh - 330px);
    min-height:420px; border:0;
  }
  .preview-body img{
    display:block; max-width:100%; margin:0 auto; padding:16px;
  }
  .preview-body pre{
    margin:0; padding:16px 18px;
    font-size:12.5px; line-height:1.55;
    white-space:pre-wrap; word-break:break-word;
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
    color:var(--ink);
  }
  .preview-none{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:8px; padding:56px 24px;
    color:var(--ink-soft); font-size:13.5px;
  }
  .preview-none strong{ color:var(--ink); font-size:14.5px; }

  /* ---- Drive: multi-select highlight + toast ---- */
  .folder-item.selected,
  .folder-item.selected:hover{ background:var(--navy-active); }
  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
    background:var(--navy-deep); color:#fff;
    font-size:13px; font-weight:500;
    padding:10px 18px; border-radius:8px;
    box-shadow:0 6px 24px rgba(14,30,50,.35);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:80; max-width:90vw;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---- Context menu: disabled option state ---- */
  .ctx-menu button:disabled{ opacity:.45; cursor:default; }
  .ctx-menu button:disabled:hover{ background:transparent; color:var(--ink); }
  .ctx-menu button.danger:disabled:hover{ background:transparent; color:var(--seal); }

  /* ============================================================
     ADMIN: link access panel
     ============================================================ */
  .admin-card{
    background:var(--paper-card); border:1px solid var(--paper-line);
    border-radius:var(--radius); padding:22px 26px;
  }
  .admin-card-title{
    font-family:var(--font-display); font-size:19px; font-weight:700;
    color:var(--ink); margin:0 0 6px;
  }
  .admin-row{
    display:flex; align-items:center; gap:24px;
    padding:16px 0; border-bottom:1px solid var(--paper-line);
  }
  .admin-row-text{ flex:1; min-width:0; }
  .admin-row-title{ font-weight:600; font-size:14px; color:var(--ink); }
  .admin-row-sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:3px; max-width:520px; }
  .admin-row-controls{
    display:flex; align-items:center; gap:9px; flex-shrink:0;
    font-size:13px; color:var(--ink-soft);
  }
  .admin-row-controls input[type="number"]{
    width:76px; font-family:inherit; font-size:13.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:8px 10px;
  }
  .admin-row-controls input[type="number"]:focus{
    outline:2px solid #AA4512; border-color:#AA4512;
  }
  .btn-danger-solid{
    background:var(--seal); border-color:var(--seal); color:#fff;
  }
  .btn-danger-solid:hover{ filter:brightness(1.08); }
  .admin-table-title{
    font-family:var(--font-display); font-size:15.5px; font-weight:700;
    color:var(--ink); margin:22px 0 10px;
  }
  .admin-table-wrap{ overflow-x:auto; }
  .link-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .link-table th{
    text-align:left; font-size:11px; font-weight:600; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-soft);
    padding:8px 12px; border-bottom:1px solid var(--paper-line);
  }
  .link-table td{
    padding:9px 12px; border-bottom:1px solid var(--paper-line);
    color:var(--ink); vertical-align:middle;
  }
  .link-table td.link-file{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .status-pill{
    display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.4px;
    padding:2.5px 9px; border-radius:99px;
  }
  .status-active{  background:#E2EFE7; color:#2E6B47; }
  .status-revoked{ background:#F4E2E0; color:#9C3B3B; }
  .status-expired{ background:#F2E9D8; color:#8A6416; }
  .link-revoke-btn{
    border:1px solid var(--paper-line); background:transparent; color:var(--seal);
    font-size:12px; font-weight:500; padding:4px 10px; border-radius:6px;
  }
  .link-revoke-btn:hover{ background:var(--seal-bg); border-color:var(--seal); }
  .admin-empty{ font-size:13px; color:var(--ink-soft); padding:14px 2px; margin:0; }

  /* ---- Drive: guidance to Admin ---- */
  .drive-admin-hint{ margin:6px 0 0; font-size:12.5px; }
  .drive-admin-hint a{ color:var(--steel-dark); font-weight:500; }

  /* ============================================================
     MEET: video stage + right rail
     ============================================================ */
  .meet-panel{ display:flex; flex-direction:column; height:100%; }
  .panel.meet-panel.active{ display:flex; }
  .meet-layout{
    flex:1; min-height:0;
    display:flex; gap:18px;
    height:calc(100vh - var(--topnav-h) - 28px);
  }
  .meet-stage{
    flex:1; min-width:0; position:relative;
    background:#141C26;
    border-radius:var(--radius);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .meet-stage video{
    width:100%; height:100%; object-fit:cover; display:none;
  }
  .meet-stage video.mirrored{ transform:scaleX(-1); }
  .stage-fallback{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    color:#B8C4D4; text-align:center; padding:24px;
  }
  .stage-avatar{
    width:86px; height:86px; border-radius:50%;
    background:#B3005C; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:30px; font-weight:700;
  }
  .stage-name{ font-size:16px; font-weight:600; color:#E8EDF4; }
  .stage-note{ font-size:12.5px; max-width:340px; line-height:1.55; }
  .stage-tag{
    position:absolute; left:14px; top:12px;
    background:rgba(10,16,24,.62); color:#E8EDF4;
    font-size:12px; font-weight:500;
    padding:4px 11px; border-radius:6px;
  }

  /* ---- Right rail ---- */
  .meet-rail{
    width:340px; flex-shrink:0;
    display:flex; flex-direction:column; gap:14px; min-height:0;
  }
  .rail-panel{
    flex:1; min-height:0;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .rail-title{
    font-family:var(--font-display); font-size:14.5px; font-weight:700;
    color:var(--ink); padding:12px 15px 10px;
    border-bottom:1px solid var(--paper-line);
    display:flex; align-items:center; gap:8px;
  }
  .rail-count{
    background:#0098C0; color:#FFFFFF;
    font-family:var(--font-body); font-size:11px; font-weight:600;
    padding:1px 8px; border-radius:99px;
  }
  .rail-body{ flex:1; overflow-y:auto; padding:10px 12px; }
  .rail-empty{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:4px 2px; }
  .participant{
    display:flex; align-items:center; gap:9px;
    padding:6px 4px;
  }
  .p-avatar{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:#B3005C; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600;
  }
  .p-name{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .p-you{ color:var(--ink-soft); font-weight:400; }
  .p-status{ display:flex; gap:7px; color:var(--steel-dark); }
  .chat-inputrow{
    border-top:1px solid var(--paper-line); padding:10px 12px;
  }
  .chat-inputrow input{
    width:100%; font-family:inherit; font-size:13px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:8px 11px;
  }
  .chat-inputrow input:disabled{ opacity:.6; }

  @media (max-width: 1100px){
    .meet-rail{ width:280px; }
  }

  /* ============================================================
     MEETINGS: sidebar section + scheduling form
     ============================================================ */
  .side-section.meetings-section{ padding-top:2px; }
  .side-item.meeting-item{ cursor:pointer; user-select:none; }
  .side-item.meeting-item input[type="checkbox"]{
    width:15px; height:15px; flex-shrink:0; cursor:pointer;
  }
  .side-item.meeting-item.person-off{ opacity:.45; }
  .side-item.meeting-item.person-off:hover{ opacity:.8; }

  .modal input[type="date"], .modal input[type="time"]{
    width:100%; font-family:inherit; font-size:13.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:8px 10px;
    margin-bottom:15px;
  }
  .modal input[type="date"]:focus, .modal input[type="time"]:focus{
    outline:2px solid #AA4512; outline-offset:0; border-color:#AA4512;
  }
  .mf-timerow{ display:flex; gap:12px; }
  .mf-timerow > div{ flex:1; min-width:0; }
  .mf-participants{
    border:1px solid var(--paper-line); background:var(--paper);
    border-radius:var(--radius-sm);
    max-height:128px; overflow-y:auto;
    padding:5px 9px; margin-bottom:15px;
  }
  .mf-participant{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--ink);
    padding:4px 1px; cursor:pointer; user-select:none;
  }
  .mf-participant input{ width:14px; height:14px; flex-shrink:0; }
  .mf-participant .dot{ flex-shrink:0; }
  .mf-empty{ font-size:12.5px; color:var(--ink-soft); margin:4px 1px; line-height:1.5; }

  /* ---- Meet: two-way call layout ---- */
  #remote-video{ display:none; }
  .meet-stage.in-call #remote-video{
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .meet-stage.in-call #self-video{
    display:block; position:absolute; right:14px; top:14px;
    width:22%; min-width:132px; max-width:230px; height:auto;
    aspect-ratio:16/10; object-fit:cover;
    border-radius:10px; border:2px solid rgba(255,255,255,.28);
    box-shadow:0 6px 22px rgba(0,0,0,.4);
  }
  .meet-stage.in-call .stage-fallback{ display:none !important; }

  /* ---- Meet: chat messages ---- */
  .chat-msg{ margin:0 0 9px; font-size:12.5px; line-height:1.5; color:var(--ink);
    word-break:break-word; }
  .chat-msg .who{ font-weight:600; color:var(--steel-dark); margin-right:5px; }
  .chat-msg.mine .who{ color:var(--forest); }
  .chat-msg.sys{ color:var(--ink-soft); font-style:italic; }

  /* ============================================================
     MEET on phones: stage on top, Participants & Chats as
     expandable sections at the bottom; on-stage mic/cam controls
     (the left sidebar, which holds them on desktop, is hidden on
     small screens).
     ============================================================ */
  /* On-stage call controls: mic / camera / end call. Hidden until
     a call is live, then floating bottom-center on every device. */
  .meet-mobile-controls{
    display:none; gap:14px;
    position:absolute; left:50%; bottom:14px;
    transform:translateX(-50%); z-index:7;
  }
  .meet-stage.in-call .meet-mobile-controls,
  .meet-stage.joined .meet-mobile-controls{ display:flex; }
  .mm-btn{
    width:46px; height:46px; border-radius:50%;
    border:0; color:#F2FAFD;
    background:linear-gradient(180deg, #009FC9, #0090B6);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(3,10,20,.35);
  }
  .mm-btn:hover{ background:linear-gradient(180deg, #00A9D5, #0098C0); }
  .mm-btn.off{ background:#045A73; }
  #mm-end{ background:#D5382C; }
  #mm-end:hover{ background:#B7291F; }
  .rail-title .unread-dot{
    display:none; width:8px; height:8px; border-radius:50%;
    background:var(--seal); margin-left:2px;
  }
  .rail-title.has-unread .unread-dot{ display:inline-block; }

  @media (max-width: 860px){
    /* The video IS the page: no heading, no padding, no radius —
       edge to edge below the tab bar. */
    .page-meet .page-head{ display:none; }
    /* WebKit-proof sizing: iOS Safari won't resolve heights through
       nested flex chains, so the space below the tab bar is stated
       explicitly — viewport height minus the tab bar, full stop. */
    .page-meet .page{
      padding:0;
      height:calc(100vh - var(--topnav-h));
      height:calc(100dvh - var(--topnav-h));
    }
    .meet-layout{
      flex-direction:column; gap:0;
      height:100%; min-height:0;
    }
    .meet-stage{ flex:1; height:100%; min-height:0; border-radius:0; }

    /* Participants and Chat: right-side pop-outs on black glass.
       Opened by the floating buttons; closed by the collapse arrow
       or a tap on the video. Chat claims 3/4 of the screen width. */
    .meet-rail{ display:contents; }
    .meet-rail #rec-rail{ display:none !important; }
    .meet-rail .rail-panel{
      position:fixed; top:0; bottom:0; right:0; z-index:67;
      display:flex; flex-direction:column;
      width:75vw;
      background:#000000; color:#E9EEF4;
      border:0; border-radius:0;      /* no desktop card styling */
      transform:translateX(103%); transition:transform .3s ease-in-out;
      box-shadow:-6px 0 24px rgba(0,0,0,.45);
      padding-top:env(safe-area-inset-top);
    }
    .meet-rail .rail-panel.pop-open{ transform:translateX(0); }
    .meet-rail .rail-title{
      display:flex; align-items:center; gap:8px;
      padding:14px 14px 12px;
      font-size:clamp(14px, 3.8vw, 16px); font-weight:700; color:#fff;
      border-bottom:1px solid rgba(255,255,255,.18);
    }
    .meet-rail .rail-body{
      flex:1; min-height:0; overflow-y:auto;
      max-height:none; padding:10px 12px;
      font-size:clamp(12.5px, 3.4vw, 14px);
    }
    .meet-rail .chat-msg{ color:#E9EEF4; }
    .meet-rail .chat-msg.sys{ color:rgba(233,238,244,.6); }
    .meet-rail .chat-inputrow{
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      border-top:1px solid rgba(255,255,255,.15);
    }
    .meet-rail .chat-inputrow input{
      background:rgba(255,255,255,.14); border:0; color:#fff;
    }
    .meet-rail .chat-inputrow input::placeholder{ color:rgba(255,255,255,.55); }
    .pop-collapse{
      display:block;                  /* overrides the desktop hide */
      margin-left:auto; flex-shrink:0;
      background:none; border:0; padding:0 2px;
      color:#B9C6D6; font-size:22px; line-height:1;
    }
    .pop-collapse:active{ color:#fff; }

    /* Participant rows read clearly on black */
    .meet-rail .p-name{ color:#F2F6FA; }
    .meet-rail .rail-body .chat-none,

    /* Self-view PiP: top-right on mobile too */
    .meet-stage.in-call #self-video{ top:10px; right:10px; }
  }

  /* ============================================================
     MEET on desktop: resizable + hideable right rail
     ============================================================ */
  @media (min-width: 861px){
    .meet-rail{ width:var(--meet-rail-w, 340px); }
    .rail-resizer{
      width:7px; flex-shrink:0; align-self:stretch;
      margin:0 -6px 0 -12px;   /* sits in the existing gap */
      cursor:col-resize; border-radius:4px;
      transition:background .12s ease;
    }
    .rail-resizer:hover,
    .rail-resizer.dragging{ background:rgba(44,95,134,.28); }
    body.meet-rail-resizing{ cursor:col-resize; user-select:none; }

    .meet-layout.rail-hidden .meet-rail,
    .meet-layout.rail-hidden .rail-resizer{ display:none; }
  }
  @media (max-width: 860px){
    .rail-resizer, .rail-toggle{ display:none; }
  }
  .rail-toggle{
    position:absolute; top:12px; right:12px; z-index:6;
    display:flex; align-items:center; gap:4px;
    border:0; border-radius:7px;
    background:rgba(10,16,24,.55); color:#CBD6E4;
    font-size:15px; line-height:1; font-weight:600;
    padding:7px 10px; backdrop-filter:blur(3px);
  }
  .rail-toggle:hover{ background:rgba(10,16,24,.78); color:#fff; }
  .rail-toggle .unread-dot{
    display:none; width:8px; height:8px; border-radius:50%;
    background:var(--seal);
  }
  .rail-toggle.has-unread .unread-dot{ display:inline-block; }

  /* ============================================================
     MEET: recording + the recordings queue
     ============================================================ */
  .rec-indicator{
    position:absolute; top:12px; left:12px; z-index:6;
    display:flex; align-items:center; gap:7px;
    background:rgba(10,16,24,.62); color:#FFD9D4;
    font-size:12px; font-weight:700; letter-spacing:.6px;
    padding:6px 12px; border-radius:7px;
  }
  .rec-indicator[hidden]{ display:none; }
  .rec-dot{
    width:9px; height:9px; border-radius:50%; background:#E5484D;
    animation:rec-pulse 1.2s ease-in-out infinite;
  }
  @keyframes rec-pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
  #rec-timer{ font-weight:500; color:#E8EDF4; letter-spacing:0; }
  .side-item.recording{ color:#FF8A80; }
  .side-item.recording svg{ color:#E5484D; }
  .side-item.stop-state{ color:#FF8A80; }
  .side-item.stop-state svg{ color:#E5484D; }

  .rec-rail{
    width:216px; flex-shrink:0; min-height:0;
    display:flex; flex-direction:column;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .rec-rail[hidden]{ display:none; }
  .rec-rail-title{
    font-family:var(--font-display); font-size:14.5px; font-weight:700;
    color:var(--ink); padding:12px 14px 10px;
    border-bottom:1px solid var(--paper-line);
  }
  .rec-list{ flex:1; overflow-y:auto; padding:10px; }
  .rec-item{
    border:1px solid var(--paper-line); border-radius:9px;
    padding:8px; margin-bottom:10px; background:var(--paper);
  }
  .rec-item video{
    display:block; width:100%; border-radius:6px;
    background:#141C26; aspect-ratio:16/10;
  }
  .rec-name{
    font-size:12px; font-weight:600; color:var(--ink);
    margin:7px 1px 1px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .rec-meta{ font-size:11px; color:var(--ink-soft); margin:0 1px 7px; }
  .rec-actions{ display:flex; gap:6px; }
  .rec-actions button{
    flex:1; font-size:11.5px; font-weight:500;
    padding:5px 4px; border-radius:6px;
    border:1px solid var(--paper-line); background:transparent;
  }
  .rec-copy{ color:var(--steel-dark); }
  .rec-copy:hover{ background:var(--steel-bg); border-color:var(--steel); }
  .rec-copy:disabled{ opacity:.5; }
  .rec-revoke{ color:var(--seal); }
  .rec-revoke:hover{ background:var(--seal-bg); border-color:var(--seal); }

  @media (max-width: 860px){
    .rec-rail{ display:none; }   /* recording is a desktop workflow */
  }

  /* Drive: video file badge */
  .badge-vid{ background:#4A5E8C; }

  /* ============================================================
     SIGN-IN PAGE
     ============================================================ */
  body.login-page{
    margin:0; min-height:100vh;
    background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-body);
  }
  .login-wrap{
    display:flex; flex-direction:column; align-items:center;
    gap:22px; padding:32px 18px; width:100%; max-width:460px;
  }
  .login-logo{ width:230px; height:auto; }
  .login-card{
    width:100%;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    box-shadow:0 12px 44px rgba(6,16,30,.4);
    padding:26px 28px;
  }
  .login-card h1{
    font-family:var(--font-display); font-size:21px; font-weight:700;
    color:var(--ink); margin:0 0 4px;
  }
  .login-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
  .login-card input{
    width:100%; font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:10px 12px;
    margin-bottom:14px;
  }
  .login-card input:focus{
    outline:2px solid #AA4512; border-color:#AA4512;
  }
  .login-card .field-label{
    display:block; font-size:11.5px; font-weight:600;
    letter-spacing:.4px; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 6px;
  }
  .login-btn{ width:100%; justify-content:center; padding:11px; font-size:14px; }
  .login-foot{ font-size:12px; color:var(--navy-text-soft); margin:0; }

  /* ---- Admin: users card ---- */
  .user-create{
    display:flex; gap:9px; flex-wrap:wrap;
    padding:4px 0 16px; border-bottom:1px solid var(--paper-line);
    margin-bottom:8px;
  }
  .user-create input, .user-create select{
    font-family:inherit; font-size:13px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:8px 10px;
  }
  .user-create input{ flex:1; min-width:130px; }
  .user-create select{ flex:0 0 auto; }
  .user-actions{ white-space:nowrap; }
  .user-actions button{ margin-left:6px; }
  .user-neutral-btn{ color:var(--steel-dark); }
  .user-neutral-btn:hover{ background:var(--steel-bg); border-color:var(--steel); }
  .reset-row td{ background:var(--paper); }
  .reset-row input{
    font-family:inherit; font-size:13px; padding:7px 10px;
    border:1px solid var(--paper-line); border-radius:var(--radius-sm);
    width:280px; max-width:60%; margin-right:8px;
  }

  /* ============================================================
     WORKSPACE CONTEXT (sidebar): Owner's client switcher /
     Client's company badge
     ============================================================ */
  .ws-context{
    margin:2px 14px 12px;
    padding:10px 12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
  }
  .ws-label{
    font-size:10.5px; font-weight:600; letter-spacing:.7px;
    text-transform:uppercase; color:var(--navy-text-soft);
    margin-bottom:5px;
  }
  .ws-name{
    font-size:13.5px; font-weight:600; color:#EAF0F7; line-height:1.3;
  }
  .ws-switcher{
    width:100%; font-family:inherit; font-size:13px; font-weight:500;
    color:#EAF0F7; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16); border-radius:7px;
    padding:6px 8px; cursor:pointer;
  }
  .ws-switcher:focus{ outline:2px solid #AA4512; }
  .ws-switcher option{ color:var(--ink); background:#fff; }
  .admin-card-sub{
    font-size:12.5px; color:var(--ink-soft); margin:-6px 0 14px;
  }

  /* ============================================================
     SIDEBAR: footer always visible; middle sections scroll
     ============================================================ */
  @media (min-width: 861px){
    .sidebar{ height:100vh; position:sticky; top:0; }
    .side-section{ min-height:0; overflow-y:auto; }
  }
  .ws-context{ margin-top:12px; flex-shrink:0; }
  .side-foot{ flex-shrink:0; }

  /* ============================================================
     WORKSPACE: top-left badge + top-right switcher
     ============================================================ */
  .brand-ws{
    margin-top:78px;   /* clears Orion's crown and the belt star */
    font-size:12px; line-height:1.45;
    color:var(--navy-text-soft);
  }
  .brand-ws span{ color:#EAF0F7; font-weight:600; }

  .tn-ws-wrap{
    margin-left:auto;          /* rides the far right */
    padding-left:96px;         /* guaranteed air after the Admin tab */
    display:flex; align-items:center; padding-right:4px;
    align-self:center;
  }
  .tn-ws-shell{ position:relative; display:inline-flex; }
  .tn-ws{
    font-family:inherit; font-size:13px; font-weight:500;
    -webkit-appearance:none; appearance:none;
    color:var(--ink);
    background:#FFFFFF;
    border:0; border-radius:8px;
    padding:7px 42px 7px 10px; max-width:250px; cursor:pointer;
  }
  .tn-ws-arrow{
    position:absolute; top:3px; bottom:3px; right:3px; width:26px;
    background:#0098C0;
    border:1px solid #0098C0;      /* the thin ring, same blue */
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;           /* clicks pass through to the select */
  }
  .tn-ws:hover{ filter:brightness(.97); }
  .tn-ws:focus{ outline:2px solid #AA4512; }
  @media (max-width: 860px){
    .tn-ws{ max-width:150px; }
  }

  .tn-ws-wrap{ gap:9px; }
  .tn-ws-label{
    font-size:11.5px; font-weight:600; letter-spacing:.4px;
    color:var(--navy-text-soft);
  }
  @media (max-width: 860px){
    .tn-ws-label{ display:none; }
  }

  /* ============================================================
     IN-CALL BROWSING: other sections open inside Meet while the
     call continues in a floating mini window
     ============================================================ */
  html.embedded .sidebar,
  html.embedded .topnav{ display:none !important; }
  html.embedded .main{ height:100vh; }

  .call-browser{ display:none; }
  .meet-layout.browsing .call-browser{
    display:flex; flex-direction:column; flex:1; min-width:0;
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius); overflow:hidden;
  }
  .cb-head{
    display:flex; align-items:center; gap:10px;
    padding:9px 14px; border-bottom:1px solid var(--paper-line);
    flex-shrink:0;
  }
  .cb-title{
    font-family:var(--font-display); font-size:14.5px; font-weight:700;
    color:var(--ink);
  }
  .cb-note{ font-size:11.5px; color:var(--ink-soft); }
  .cb-back{
    margin-left:auto; border:1px solid var(--paper-line);
    background:var(--steel-bg); color:var(--steel-dark);
    font-size:12.5px; font-weight:600; padding:6px 12px;
    border-radius:7px;
  }
  .cb-back:hover{ background:var(--steel); color:#fff; }
  .call-browser iframe{ flex:1; border:0; width:100%; }

  /* The call while browsing: floating mini window, click to return */
  .meet-layout.browsing .meet-stage{
    position:fixed; right:18px; bottom:18px; z-index:60;
    width:280px; height:180px; min-height:0; flex:none;
    border-radius:12px; box-shadow:0 12px 34px rgba(6,16,30,.45);
    cursor:pointer; border:2px solid rgba(255,255,255,.25);
  }
  .meet-layout.browsing .meet-stage #self-video,
  .meet-layout.browsing .meet-stage .rail-toggle,
  .meet-layout.browsing .meet-stage .meet-mobile-controls{ display:none; }
  .meet-layout.browsing .meet-stage .stage-tag{
    font-size:11px; padding:4px 8px; bottom:8px; left:8px;
  }
  .meet-layout.browsing .meet-stage .rec-indicator{
    top:8px; left:8px; font-size:10.5px; padding:4px 8px;
  }
  .meet-layout.browsing .meet-stage::after{
    content:'Return to call'; position:absolute; top:8px; right:8px;
    background:rgba(10,16,24,.6); color:#E8EDF4;
    font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:6px;
    opacity:0; transition:opacity .12s ease;
  }
  .meet-layout.browsing .meet-stage:hover::after{ opacity:1; }
  .meet-layout.browsing .rec-rail{ display:none; }

  .folder-item.upload-target > .folder-name{ text-decoration:underline; text-underline-offset:3px; }
  #upload-drive{ background:var(--paper-card); color:var(--steel-dark); border:1px solid var(--paper-line); }
  #upload-drive:hover{ border-color:var(--steel); background:var(--steel-bg); }

  /* ---- Setup: drive location chooser ---- */
  .loc-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
  .loc-option{
    font-family:inherit; font-size:12.5px; font-weight:500;
    color:var(--ink); background:var(--paper);
    border:1px solid var(--paper-line); border-radius:7px;
    padding:7px 12px; cursor:pointer;
  }
  .loc-option:hover{ border-color:var(--steel); }
  .loc-option.picked{
    background:var(--steel-bg); border-color:var(--steel);
    color:var(--steel-dark); font-weight:600;
  }
  .loc-custom{ margin-top:2px; }
  .loc-note{
    font-size:11.5px; color:var(--ink-soft);
    margin:-4px 0 14px; overflow-wrap:break-word;
  }

  .drive-info-body{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
  .admin-nav-section{ margin-top:30px; }
  .admin-sec-link, .bill-sec-link{ cursor:pointer; user-select:none; }
  .admin-sec-link.active, .bill-sec-link.active{
    background:var(--navy-active); color:#fff;
  }
  .df-grid{
    display:grid; grid-template-columns:110px minmax(320px, 1fr);
    gap:12px 12px; align-items:start; margin-top:4px;
  }
  .df-grid .field-input{ width:100%; box-sizing:border-box; }
  .df-label{ font-weight:600; font-size:13px; color:var(--ink); padding-top:9px; }
  .df-cur{
    font-size:12px; color:var(--ink-soft); margin-top:5px;
    white-space:nowrap; overflow-x:auto; line-height:1.45;
  }
  .di-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .di-label{ font-weight:600; color:var(--ink); min-width:110px; }
  .di-ws .di-label{ font-weight:500; color:var(--ink-soft); padding-left:14px; }
  .di-path{
    font-size:12px; background:var(--paper); border:1px solid var(--paper-line);
    border-radius:6px; padding:3px 8px; word-break:break-all;
  }

  .file-preview[hidden]{ display:none !important; }

  /* ---- Permission matrix ---- */
  .perm-matrix{ padding:12px 0 4px; }
  .perm-title{
    font-size:11.5px; font-weight:600; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;
  }
  .perm-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:7px 18px; margin-bottom:10px;
  }
  .perm-row{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--ink); cursor:pointer;
  }
  .perm-row input[type=checkbox]{ accent-color:var(--steel); }
  .perm-name{ flex:1; }
  .perm-mode{
    font-family:inherit; font-size:11.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:6px; padding:3px 6px;
  }
  .perm-summary{ font-size:12px; color:var(--ink-soft); max-width:220px; }

  /* ---- Permissions pop-up ---- */
  .perm-modal{ width:340px; max-width:92vw; }
  .perm-modal-sub{ font-size:12px; color:var(--ink-soft); margin:2px 0 14px; }
  .perm-grid-vertical{ grid-template-columns:1fr; gap:9px; margin-bottom:16px; }
  .perm-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
  .perm-modal-actions .btn{ font-size:13px; }

  /* ============================================================
     POPPED-OUT MEETING WINDOW
     ?popout=1 opens Meet as its own persistent window: no top
     navigation, just the meeting and its controls. The main
     window hides its Meet tab while the pop-out lives, and
     restores it on Exit Meeting.
     ============================================================ */
  html.popout .topnav{ display:none !important; }
  html.popout .meet-layout{ height:calc(100vh - 28px); }
  .side-item.exit-meeting{ color:#FF8A80; font-weight:600; }
  .side-item.exit-meeting svg{ color:#E5484D; }

  /* ============================================================
     MEET ON MOBILE: smaller stage (Participants + Chats visible
     immediately), pre-join lobby, and the Options drawer
     ============================================================ */
  .prejoin{
    position:absolute; left:0; right:0; bottom:0; z-index:7;
    padding:16px 16px 18px;
    background:#000000;   /* opaque black band behind the lobby controls */
    color:#EAF0F7; text-align:center;
  }
  .prejoin[hidden]{ display:none; }
  .prejoin-title{ font-family:var(--font-display); font-size:17px; font-weight:700; }
  .prejoin-sub{ font-size:12px; color:#B9C6D6; margin:4px 0 12px; }
  .prejoin-actions{ display:flex; align-items:center; justify-content:center; gap:14px; }
  .prejoin-join{ padding:10px 22px; font-size:14px; }

  @media (min-width: 861px){
    .fab-col, .drawer-backdrop, .mobile-drawer, .pop-collapse{ display:none; }
  }

  @media (max-width: 860px){
    /* Options drawer */
    .fab-col{
      display:flex; flex-direction:column; gap:14px;
      position:fixed; top:54%; right:calc(16px + env(safe-area-inset-right));
      transform:translateY(-50%); z-index:65;
    }
    .meet-fab{
      display:flex; align-items:center; justify-content:center;
      width:clamp(48px, 12.5vw, 58px); height:clamp(48px, 12.5vw, 58px);
      border-radius:50%; position:relative;
      background:#000000; color:#fff; border:0;
      box-shadow:0 4px 14px rgba(0,0,0,.45);
      transition:transform .3s ease;
    }
    .meet-fab:active{ transform:scale(1.1); }
    .meet-fab svg{ width:clamp(20px, 5.6vw, 24px); height:auto; }
    .fab-dot{
      position:absolute; top:3px; right:3px;
      width:12px; height:12px; border-radius:50%;
      background:#D5382C; display:none;
      border:2px solid #000;
    }
    .meet-fab.has-unread .fab-dot{ display:block; }
    .drawer-backdrop{
      display:block; position:fixed; inset:0; z-index:66;
      background:rgba(0,0,0,0.5);
      opacity:0; pointer-events:none; transition:opacity .3s ease-in-out;
    }
    .drawer-backdrop.open{ opacity:1; pointer-events:auto; }
    .mobile-drawer{
      display:flex; flex-direction:column;
      position:fixed; right:0; top:0; bottom:0; z-index:67;
      width:75vw;
      background:#000000; color:#fff;
      transform:translateX(102%); transition:transform .3s ease-in-out;
      box-shadow:-4px 0 22px rgba(0,0,0,.45);
      padding-top:env(safe-area-inset-top);
    }
    .mobile-drawer.open{ transform:translateX(0); }
    .drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 14px 12px; border-bottom:1px solid rgba(255,255,255,.18);
      font-family:var(--font-display); font-size:15px; font-weight:700;
      color:#EAF0F7;
    }
    .drawer-head button{
      background:none; border:0; color:#B9C6D6; font-size:22px; line-height:1;
    }
    .drawer-body{ overflow-y:auto; padding:6px 0 14px; }
    .drawer-body .side-item{ font-size:clamp(13.5px, 3.7vw, 15.5px); }
    .drawer-head{ font-size:clamp(15px, 4vw, 17px); }
  }

  /* ---- Meet: stage sized to the viewport, never scrolling ---- */
  .page-meet .main{ height:100vh; height:100dvh; overflow:hidden; }
  .page-meet .page{ display:flex; flex-direction:column; min-height:0; }
  .page-meet .meet-layout{ height:auto; flex:1; min-height:0; }

  /* Mobile: the side-panel expand toggle has nothing to expand */
  @media (max-width: 860px){
    .rail-toggle{ display:none !important; }
  }

  /* ============================================================
     MESH CALL GRID — one tile per remote participant (max 4)
     ============================================================ */
  .stage-grid{
    position:absolute; inset:0; z-index:1;
    display:none; gap:8px; padding:8px;
  }
  .meet-stage.in-call .stage-grid{ display:grid; }
  .stage-grid[data-count="1"]{ grid-template-columns:1fr; }
  .stage-grid[data-count="2"]{ grid-template-columns:repeat(2, 1fr); }
  .stage-grid[data-count="3"],
  .stage-grid[data-count="4"]{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr);
  }
  .stage-tile{
    position:relative; min-height:0; overflow:hidden;
    background:#10161F; border-radius:10px;
  }
  .stage-tile video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .tile-name{
    position:absolute; left:8px; top:8px;
    background:rgba(10,16,24,.62); color:#E8EDF4;
    font-size:11.5px; font-weight:600;
    padding:3px 9px; border-radius:6px;
    max-width:calc(100% - 16px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .meet-stage.in-call .stage-tag{ display:none; }
  @media (max-width: 860px){
    .stage-grid{ gap:5px; padding:5px; }
    /* Mobile call layouts:
       3 people (2 tiles)  -> horizontal split, one atop the other;
       4-5 people (3-4 tiles) -> 2x2 quadrants, any spare quadrant
       staying black. Desktop keeps its own layouts untouched. */
    .meet-stage.in-call{ background:#000000; }
    .meet-stage.in-call .stage-grid[data-count="2"]{
      grid-template-columns:1fr;
      grid-template-rows:repeat(2, 1fr);
    }
    .meet-stage.in-call .stage-grid[data-count="3"],
    .meet-stage.in-call .stage-grid[data-count="4"]{
      grid-template-columns:repeat(2, 1fr);
      grid-template-rows:repeat(2, 1fr);
    }
    .tile-name{ font-size:10px; padding:2px 6px; }
  }

  /* Self-view PiP must float ABOVE the call grid (the grid is a
     positioned layer at z-index:1, which was covering it). */
  .meet-stage.in-call #self-video{ z-index:6; }

  /* With the self-view in the top-right, the rail toggle slides
     left of it during calls (desktop only; hidden on mobile). */
  .meet-stage.in-call .rail-toggle{
    right:calc(clamp(132px, 22%, 230px) + 26px);
  }

  /* ============================================================
     CHAT PAGE
     ============================================================ */
  .chat-layout{
    display:flex; gap:18px; align-items:stretch;
    flex:1; min-height:0;
  }
  .chat-list{
    display:none;               /* desktop: lists live in the navy sidebar */
    width:100%; overflow-y:auto;
    background:var(--paper-card); border:1px solid var(--paper-line);
    border-radius:var(--radius); padding:14px;
  }
  .chat-list-label{
    font-size:11px; font-weight:600; letter-spacing:.6px;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
  }
  .chat-row{
    display:flex; align-items:center; gap:10px; width:100%;
    background:none; border:0; border-radius:8px; padding:8px;
    font-family:inherit; text-align:left; cursor:pointer;
  }
  .chat-row:hover{ background:var(--paper); }
  .chat-row.open{ background:var(--steel-bg); }
  .chat-avatar{
    flex:none; width:32px; height:32px; border-radius:50%;
    background:var(--steel); color:#fff; font-size:12px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-avatar-group{ background:var(--navy); border-radius:9px; }
  .chat-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .chat-row-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .chat-row-sub{
    font-size:11.5px; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .chat-unread{
    flex:none; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
    background:var(--seal); color:#fff; font-size:10.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-unread[hidden]{ display:none !important; }
  .chat-none{ font-size:12px; color:var(--ink-soft); margin:2px 0 6px; }
  .chat-newgroup-btn{
    width:100%; margin-top:8px; font-size:12.5px;
    background:var(--paper); border:1px dashed var(--paper-line); color:var(--steel-dark);
  }
  .chat-newgroup-btn:hover{ border-color:var(--steel); }

  .group-form{
    margin-top:10px; padding:12px; border:1px solid var(--paper-line);
    border-radius:8px; background:var(--paper);
  }
  .group-form-title{ font-size:12.5px; font-weight:600; margin-bottom:8px; }
  .group-form input[type=text]{
    width:100%; font-family:inherit; font-size:12.5px;
    border:1px solid var(--paper-line); border-radius:6px; padding:6px 8px;
    margin-bottom:8px;
  }
  .group-members{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
  .group-member{ font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; }
  .group-form-actions{ display:flex; justify-content:flex-end; gap:8px; }
  .group-form-actions .btn{ font-size:12px; }

  .chat-pane{
    flex:1; min-width:0; display:flex; flex-direction:column;
    background:var(--paper-card); border:1px solid var(--paper-line);
    border-radius:var(--radius); overflow:hidden;
  }
  .chat-empty{
    flex:1; display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); font-size:13.5px; padding:20px; text-align:center;
  }
  .chat-convo{ flex:1; display:flex; flex-direction:column; min-height:0; }
  .chat-convo[hidden]{ display:none; }
  .chat-convo-head{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--paper-line);
  }
  .chat-back{
    display:none; background:none; border:0; font-size:18px;
    color:var(--steel-dark); cursor:pointer; padding:2px 6px;
  }
  .chat-convo-title{ font-size:15px; font-weight:700; color:var(--ink); font-family:var(--font-display); }
  .chat-convo-sub{
    font-size:11.5px; color:var(--ink-soft);
    max-width:520px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .chat-msgs{ flex:1; overflow-y:auto; padding:16px; }
  .cmsg{ display:flex; margin-bottom:10px; }
  .cmsg.mine{ justify-content:flex-end; }
  .cmsg-bubble{
    max-width:72%; padding:8px 12px; border-radius:12px;
    background:var(--paper); border:1px solid var(--paper-line);
    font-size:13px; line-height:1.45; color:var(--ink);
    word-break:break-word;
  }
  .cmsg.mine .cmsg-bubble{
    background:var(--steel-bg); border-color:var(--steel);
  }
  .cmsg-who{ font-size:11px; font-weight:700; color:var(--steel-dark); margin-bottom:2px; }
  .cmsg-when{ font-size:10px; color:var(--ink-soft); margin-top:3px; text-align:right; }
  .chat-inputrow{
    display:flex; gap:8px; padding:12px 14px;
    border-top:1px solid var(--paper-line);
  }
  .chat-inputrow input{
    flex:1; font-family:inherit; font-size:13px;
    border:1px solid var(--paper-line); border-radius:8px; padding:9px 12px;
  }
  .chat-inputrow input:focus{ outline:none; border-color:#AA4512; }

  @media (max-width: 860px){
    .chat-list{ display:block; }
    .chat-pane{ display:none; }
    .chat-layout.convo-open .chat-list{ display:none; }
    .chat-layout.convo-open .chat-pane{ display:flex; }
    .chat-back{ display:block; }
  }

  /* ---- Chat lists inside the navy sidebar ---- */
  .side-section #side-people .chat-row,
  .side-section #side-groups .chat-row{ padding:7px 8px; }
  .sidebar .chat-row:hover{ background:var(--navy-line); }
  .sidebar .chat-row.open{ background:var(--navy-line); }
  .sidebar .chat-row-name{ color:var(--navy-text); font-size:13px; }
  .sidebar .chat-row-sub{ color:var(--navy-text-soft); font-size:11px; max-width:150px; }
  .sidebar .chat-avatar{ width:26px; height:26px; font-size:10.5px; }
  .sidebar .chat-none{ color:var(--navy-text-soft); }

  /* "+" on the paper (mobile) card */
  .add-cat-paper{ color:var(--steel-dark); }
  .add-cat-paper:hover{ background:var(--steel-bg); }

  /* Group-creation pop-up */
  .group-modal{ width:320px; max-width:92vw; }
  .group-modal input[type=text]{
    width:100%; font-family:inherit; font-size:13px;
    border:1px solid var(--paper-line); border-radius:7px;
    padding:8px 10px; margin:6px 0 12px;
  }
  .group-modal .group-members{ max-height:240px; overflow-y:auto; margin-bottom:14px; }
  .group-modal .group-member{ font-size:13px; padding:3px 0; }

  /* Chat page sized like Meet: the layout flexes to exactly the
     viewport, so the pane's bottom edge is always on screen —
     desktop and mobile, empty or busy. */
  body.chatv .main{ height:100vh; height:100dvh; overflow:hidden; }
  body.chatv .page{ display:flex; flex-direction:column; min-height:0; }

  /* An empty pane shows no header rule — just the quiet card. */
  .chat-convo.idle .chat-convo-head{ display:none; }

  /* Chat: person-initials bubbles wear the identity magenta;
     group bubbles (member counts, not initials) stay azure. */
  .chat-avatar{ background:#B3005C; }
  .chat-avatar-group{ background:#00A1D7; }

  /* Sign-in page: the sidebar's night sky — darkest corner tone
     holding, then fading down into the lighter navy */
  body.login-page{
    background:linear-gradient(180deg, var(--navy-deep) 0, var(--navy-deep) 160px, var(--navy) 420px);
  }
  /* Orion's crown + Alnilam beneath the logo, same field as the
     sidebar, scaled to the login logo's width. */
  .login-wrap{ position:relative; }
  .login-logo{ margin-bottom:80px; }
  .login-wrap::before{
    content:''; position:absolute; pointer-events:none;
    left:calc(50% - 115px); top:94px; width:230px; height:66px;
    background:
      radial-gradient(circle at 14% 47%, #FFFFFF 0, #FFFFFF 1.5px, rgba(255,255,255,0) 2.6px),
      radial-gradient(circle at 88% 38%, #FFFFFF 0, #FFFFFF 1.2px, rgba(255,255,255,0) 2.1px),
      radial-gradient(circle at 56% 13%, #FFFFFF 0, #FFFFFF 0.9px, rgba(255,255,255,0) 1.6px),
      radial-gradient(circle at 34% 27%, rgba(236,243,255,.8) 0, rgba(236,243,255,0) 1.5px),
      radial-gradient(circle at 48% 88%, #FFFFFF 0, #FFFFFF 1.2px, rgba(255,255,255,0) 2.1px),
      radial-gradient(circle at 14% 47%, rgba(255,206,186,.8) 0, rgba(255,190,170,.28) 4px, rgba(255,186,166,0) 11px),
      radial-gradient(circle at 14% 47%, rgba(255,184,160,.09) 0, rgba(255,184,160,0) 19px),
      radial-gradient(circle at 88% 38%, rgba(208,226,255,.8) 0, rgba(186,212,255,.28) 3px, rgba(186,212,255,0) 8px),
      radial-gradient(circle at 56% 13%, rgba(214,229,255,.65) 0, rgba(214,229,255,0) 5px),
      radial-gradient(circle at 48% 88%, rgba(206,225,255,.78) 0, rgba(184,211,255,.26) 3px, rgba(184,211,255,0) 8px);
  }

  /* ---- Folder-tab nav on small screens ---- */
  @media (max-width: 860px){
    .topnav{ padding:8px 10px 0 0; }
    .tab{ flex:0 0 112px; padding:9px 0; font-size:12px; margin-left:-9px; }
    .tab:first-of-type{ margin-left:0; }
  }

  /* Single-workspace switcher: present, calm, inert */
  .tn-ws:disabled{ opacity:1; color:var(--ink); cursor:default; }

  @media (max-width: 860px){
    .sidebar::after{ top:25px; }
  }

  /* Start Meeting joins the tab-blue family */
  .prejoin-join{ background:#0098C0; border-color:#0098C0; }
  .prejoin-join:hover{ background:#0086AC; border-color:#0086AC; }

  /* Recording rail item controls */
  .rec-item{ position:relative; }
  .rec-hide{
    position:absolute; top:6px; right:6px; z-index:2;
    width:20px; height:20px; border:0; border-radius:5px;
    background:rgba(10,16,24,.55); color:#DDE6EF;
    font-size:13px; line-height:1; cursor:pointer;
  }
  .rec-hide:hover{ background:rgba(10,16,24,.8); color:#fff; }
  .rec-delete-btn{ color:#D5382C !important; }

  /* Enlarged recording viewer */
  .rec-expand{
    position:absolute; top:6px; right:30px; z-index:2;
    width:20px; height:20px; border:0; border-radius:5px;
    background:rgba(10,16,24,.55); color:#DDE6EF;
    font-size:12px; line-height:1; cursor:pointer;
  }
  .rec-expand:hover{ background:rgba(10,16,24,.8); color:#fff; }
  .rec-viewer{
    position:fixed; inset:0; z-index:80;
    background:rgba(6,12,20,.82);
    display:none; align-items:center; justify-content:center;
    padding:26px;
  }
  .rec-viewer.open{ display:flex; }
  .rec-viewer video{
    max-width:min(1100px, 94vw); max-height:88vh;
    border-radius:10px; background:#000;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  .rec-viewer-close{
    position:absolute; top:16px; right:20px;
    width:34px; height:34px; border:0; border-radius:8px;
    background:rgba(255,255,255,.12); color:#fff;
    font-size:20px; line-height:1; cursor:pointer;
  }
  .rec-viewer-close:hover{ background:rgba(255,255,255,.22); }

  /* Audio-unlock: browsers require one gesture before sound plays */
  .audio-unlock{
    position:absolute; top:14px; left:50%; transform:translateX(-50%);
    z-index:8; display:none; align-items:center; gap:8px;
    border:0; border-radius:999px; cursor:pointer;
    padding:10px 18px; font-size:13.5px; font-weight:600;
    background:#0098C0; color:#fff;
    box-shadow:0 4px 14px rgba(3,10,20,.45);
    animation:audioPulse 1.6s ease-in-out infinite;
  }
  .audio-unlock.show{ display:flex; }
  @keyframes audioPulse{
    0%,100%{ box-shadow:0 4px 14px rgba(3,10,20,.45); }
    50%{ box-shadow:0 4px 22px rgba(0,152,192,.75); }
  }

  /* ---- Mobile in-call controls: the Signal/Zoom/WhatsApp look ----
     Dark frosted circles with white glyphs on a soft bottom scrim;
     a toggled-OFF control inverts to a white circle with a dark
     glyph (the universal "muted" cue); End Call stays red. ---- */
  @media (max-width: 860px){
    .meet-mobile-controls{ gap:14px; bottom:calc(18px + env(safe-area-inset-bottom)); }
    .mm-btn{
      width:clamp(48px, 12.5vw, 58px); height:clamp(48px, 12.5vw, 58px);
      background:#000000;
      color:#FFFFFF; box-shadow:none;
    }
    .mm-btn svg{ width:clamp(20px, 5.6vw, 24px); height:auto; }
    .mm-btn:hover{ background:#000000; }
    .mm-btn.off{ background:#FFFFFF; color:#1B1B1D; }
    #mm-end{ background:#E5372E; }
    #mm-end:hover{ background:#E5372E; }
  }

  /* Narrower monitors: the switcher yields space before tabs must */
  @media (max-width: 1420px){
    .tn-ws{ max-width:170px; }
  }
  @media (max-width: 1240px){
    .tn-ws-label{ display:none; }
    .tn-ws{ max-width:150px; }
    .tab{ font-size:12.5px; }
  }

  /* Chat send button (meeting side panel) */
  .chat-send-btn{
    flex-shrink:0; width:34px; height:34px;
    border:0; border-radius:8px; cursor:pointer;
    background:#0098C0; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-send-btn:hover{ background:#0086AC; }
  .chat-send-btn:disabled{ opacity:.45; cursor:default; }
  .chat-inputrow{ display:flex; gap:8px; align-items:center; }

  /* ============================================================
     BILLING
     ============================================================ */
  .bill-card{
    background:var(--paper-card); border:1px solid var(--paper-line);
    border-radius:var(--radius); padding:20px 22px; margin-bottom:20px;
  }
  .bill-card-title{
    font-family:var(--font-display); font-size:17px; font-weight:700;
    color:var(--navy); margin-bottom:14px;
  }
  .bill-card-title:last-child,
  .bill-card .bill-card-title:has(+ [hidden]:last-child),
  .bill-card .bill-card-title:has(+ :empty:last-child),
  .bill-card .bill-card-title:has(+ .bill-method-summary:empty){
    margin-bottom:0;
  }
  .bill-method-summary:empty,
  .bill-method-actions:empty{ display:none; }
  .bill-sub-title{
    font-size:12px; font-weight:600; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink-soft); margin:6px 0 10px;
  }
  .bill-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  .bill-table th{
    text-align:left; font-size:11.5px; letter-spacing:.4px;
    text-transform:uppercase; color:var(--ink-soft);
    padding:6px 10px; border-bottom:1px solid var(--paper-line);
  }
  .bill-table td{ padding:9px 10px; border-bottom:1px solid var(--paper-line); }
  .bill-table .num{ text-align:right; }
  .bill-none{ font-size:13px; color:var(--ink-soft); margin:10px 0 2px; }
  .bill-chip{
    display:inline-block; font-size:11px; font-weight:600;
    padding:2px 9px; border-radius:999px; text-transform:capitalize;
  }
  .bill-chip.draft{ background:#ECEFF3; color:#5A6B7C; }
  .bill-chip.sent{ background:#DFF2F9; color:#00708F; }
  .bill-chip.paid{ background:#E2F0EA; color:#2E7D6B; }
  .bill-chip.overdue{ background:#F7E9E0; color:#AA4512; }
  .bill-row-actions{ text-align:right; white-space:nowrap; }
  .bill-act{
    border:1px solid var(--paper-line); background:#fff; border-radius:6px;
    font-size:12px; padding:4px 10px; margin-left:6px; cursor:pointer;
    color:var(--ink);
  }
  .bill-act:hover{ border-color:var(--steel); }
  .bill-act.primary{ background:#AA4512; border-color:#AA4512; color:#fff; }
  .bill-act.primary:hover{ background:#8F3A0F; }
  .bill-act.danger{ color:#AA2B1E; }
  .bill-method-summary{ font-size:13.5px; color:var(--ink); }
  .bill-method-actions{ margin-top:12px; display:flex; gap:10px; }

  /* Client: method tiles + ACH flow */
  .bill-tiles{ display:flex; gap:14px; flex-wrap:wrap; }
  .bill-tile{
    flex:1 1 240px; text-align:left; cursor:pointer;
    border:1.5px solid var(--paper-line); border-radius:10px;
    background:#fff; padding:14px 16px;
  }
  .bill-tile:hover{ border-color:#0098C0; }
  .bill-tile.selected{ border-color:#0098C0; box-shadow:0 0 0 2px rgba(0,152,192,.18); }
  .bill-tile-name{ font-weight:600; font-size:14px; color:var(--navy); }
  .bill-tile-sub{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }
  .ach-flow{ margin-top:18px; }
  .ach-status-line{ font-size:13px; margin-bottom:12px; }
  .ach-step{ display:flex; gap:12px; margin-bottom:16px; }
  .ach-step-n{
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:#0098C0; color:#fff; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin-top:2px;
  }
  .ach-step-title{ font-weight:600; font-size:13.5px; margin-bottom:3px; }
  .ach-note{ font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; }
  .ach-grid{ display:grid; grid-template-columns:repeat(2, minmax(160px, 260px)); gap:10px 14px; }
  .ach-grid label{ display:flex; flex-direction:column; font-size:12px; color:var(--ink-soft); gap:4px; }
  .ach-grid input, .ach-grid select{
    font-family:inherit; font-size:13px; padding:7px 9px;
    border:1px solid var(--paper-line); border-radius:7px;
  }
  .ach-grid input:focus, .ach-grid select:focus{ outline:2px solid #AA4512; border-color:#AA4512; }
  .bill-due-amt{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--navy); }
  .bill-due-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
  .bill-due-zero{ font-size:14px; color:#2E7D6B; font-weight:600; }
  .bill-due-note{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5; max-width:520px; }

  /* Invoice editor modal */
  .inv-modal{ width:520px; max-width:94vw; }
  .inv-head-grid{ display:flex; gap:12px; margin-bottom:14px; }
  .inv-head-grid label{ display:flex; flex-direction:column; font-size:12px; color:var(--ink-soft); gap:4px; flex:1; }
  .inv-head-grid input{ font-family:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--paper-line); border-radius:7px; }
  .inv-items-label{ font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .inv-item-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
  .inv-item-row .inv-it-desc{ flex:1; font-family:inherit; font-size:13px; height:34px; padding:0 9px; border:1px solid var(--paper-line); border-radius:7px; }
  .inv-item-row .inv-it-amt{ width:110px; font-family:inherit; font-size:13px; height:34px; padding:0 9px; border:1px solid var(--paper-line); border-radius:7px; text-align:right; }
  .inv-it-x{ border:0; background:transparent; font-size:16px; color:var(--ink-soft); cursor:pointer; }
  .inv-it-x:hover{ color:#AA2B1E; }
  .inv-add-item{ font-size:12.5px; padding:5px 10px; }
  .inv-total{ text-align:right; font-weight:700; font-size:15px; margin:14px 0 4px; }
  .inv-flat-foot{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:4px;
  }
  /* right edge lines up with the amount inputs (the × column sits beyond) */
  .inv-flat-foot .inv-total{ margin:0 25px 0 auto; }
  /* The general modal text-input rule adds a bottom margin that
     number inputs don't get — equalize both line-item fields. */
  .inv-modal .inv-item-row input{
    margin:0; height:34px; padding:0 9px;
    font-family:inherit; font-size:13px;
    border:1px solid var(--paper-line); border-radius:7px;
    background:var(--paper);
  }
  .inv-modal .inv-item-row .inv-it-amt{ text-align:right; }

  /* ---- Print: only the document prints ---- */
  #print-root{ display:none; }
  @media print{
    @page{ margin:0; }
    body.printing #print-root .print-doc{ padding:0.6in 0.7in; }
    /* Page 1 pinned to exactly one sheet in BROWSER printing too —
       a pixel of overflow otherwise prints as a blank page */
    body.printing #print-root .ip-page{ width:816px; margin:0; }
    body.printing #print-root .ip-page:first-child{
      height:1056px; overflow:hidden;
    }
  }
  @media print{
    body.printing > *:not(#print-root){ display:none !important; }
    body.printing #print-root{ display:block; }
    .print-doc{ font-family:Georgia, 'Times New Roman', serif; color:#111; max-width:640px; margin:0 auto; }
    .print-brand{ font-size:14px; letter-spacing:1px; text-transform:uppercase; color:#0F4C81; margin-bottom:4px; }
    .print-title{ font-size:22px; font-weight:700; margin-bottom:18px; }
    .print-meta{ display:flex; gap:34px; margin-bottom:22px; font-size:13px; }
    .print-meta span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#666; }
    .print-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:22px; }
    .print-table th, .print-table td{ border-bottom:1px solid #999; padding:7px 6px; text-align:left; }
    .print-table .num{ text-align:right; }
    .print-table tfoot th{ border-bottom:0; border-top:2px solid #111; font-size:14px; }
    .print-para{ font-size:12.5px; line-height:1.65; margin:0 0 14px; }
    .print-fields{ width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 16px; }
    .print-fields th{ text-align:left; width:190px; padding:7px 8px; border-bottom:1px solid #bbb; font-weight:600; }
    .print-fields td{ padding:7px 8px; border-bottom:1px solid #bbb; }
    .print-signrow{ display:flex; gap:40px; margin-top:34px; font-size:12px; }
    .print-signrow > div{ flex:1; }
    .print-line{ border-bottom:1px solid #111; height:26px; margin-bottom:5px; }
    .print-foot{ font-size:11.5px; color:#555; margin-top:10px; }
  }

  .build-tag{ font-style:normal; font-size:10px; font-weight:400;
    color:rgba(255,255,255,.45); margin-left:6px; letter-spacing:.5px; }

  /* Muted / silent participant badge (top-right of their tile) */
  .tile-mic-off{
    position:absolute; top:8px; right:8px; z-index:3;
    display:none; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background:rgba(10,16,24,.62); color:#FF9A8F;
  }
  .stage-tile.mic-off .tile-mic-off{ display:flex; }

  /* ============================================================
     FORMS — builder + signer
     ============================================================ */
  @font-face{
    font-family:'BE Script';
    src:url('../fonts/HomemadeApple-Regular.ttf') format('truetype');
    font-display:swap;
  }
  .tpl-row{
    display:flex; align-items:center; gap:12px;
    padding:11px 4px; border-bottom:1px solid var(--paper-line);
  }
  .tpl-row:last-child{ border-bottom:0; }
  .tpl-name{ font-weight:600; font-size:13.5px; color:var(--ink); }
  .tpl-meta{ font-size:11px; color:var(--ink-soft); font-weight:400; }
  .tpl-meta.warn{ color:#AA4512; }
  .tpl-acts{ margin-left:auto; display:flex; gap:6px; }
  .sign-card{
    display:flex; align-items:center; gap:14px;
    background:var(--paper-card); border:1px solid var(--paper-line);
    border-radius:var(--radius); padding:16px 18px; margin-bottom:12px;
  }
  .sign-card .btn{ margin-left:auto; }

  .fw-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 0 8px;
  }
  .fw-title{ font-weight:700; font-family:var(--font-display); font-size:16px; }
  .fw-tools{ display:flex; gap:6px; }
  .fw-tool{
    border:1px solid var(--paper-line); background:var(--paper-card);
    border-radius:7px; padding:6px 10px; font-size:12px; cursor:pointer;
    font-family:inherit; color:var(--ink);
  }
  .fw-tool.armed{ background:#0098C0; border-color:#0098C0; color:#fff; }
  #fw-tools.owner-mode .fw-tool.armed{ background:#B3005C; border-color:#B3005C; }
  .fw-pages{ display:flex; align-items:center; gap:6px; margin-left:auto;
    font-size:12.5px; color:var(--ink-soft); }
  .fw-hint{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; min-height:15px; }
  .fw-stage{
    overflow:auto; border:1px solid var(--paper-line);
    border-radius:var(--radius); background:var(--steel-bg);
    padding:14px; display:flex; justify-content:center;
    max-height:calc(100dvh - 240px);
  }
  .fw-page{ position:relative; background:#fff;
    box-shadow:0 4px 18px rgba(10,20,35,.18); }
  .fw-overlay{ position:absolute; inset:0; }
  .fw-field{
    position:absolute; border:1.5px dashed #0098C0;
    background:rgba(0,152,192,.07); border-radius:4px;
    display:flex; align-items:center; box-sizing:border-box;
    font-size:11px; color:#0F4C81; cursor:move; user-select:none;
  }

  .fw-lab{ padding:0 6px; pointer-events:none; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .fw-grip{
    position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
    background:#0098C0; border-radius:3px 0 3px 0; cursor:nwse-resize;
  }

  .fw-x{
    position:absolute; top:-9px; right:-9px; width:17px; height:17px;
    background:#D5382C; color:#fff; border-radius:50%;
    font-size:11px; line-height:17px; text-align:center; cursor:pointer;
  }
  .fw-field.signmode{ cursor:pointer; border-style:solid; }
  .fw-field.signmode input{
    width:100%; height:100%; border:0; background:transparent;
    font-family:inherit; font-size:12px; color:#14213A; padding:0 6px;
    outline:none;
  }
  .fw-ask{ padding:0 6px; font-size:11px; opacity:.8; pointer-events:none; }
  .fw-script{
    font-family:'BE Script', cursive; color:#14213A;
    font-size:19px; line-height:1.05; padding:0 4px;
    pointer-events:none; white-space:nowrap;
  }
  .fw-field.initials .fw-script{ font-size:16px; }

  /* Per-field "send" button: commit and glide to the next field */
  .fw-go{
    position:absolute; right:-12px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; border-radius:50%; border:0;
    background:#0098C0; color:#fff; z-index:3; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(5,15,30,.35);
  }
  .fw-field.who-owner .fw-go{ background:#B3005C; }
  .fw-go:active{ transform:translateY(-50%) scale(1.12); }
  .fw-go svg{ width:12px; height:12px; }
  .fw-field.filled{ background:rgba(0,152,192,.03); }
  .fw-field.who-owner.filled{ background:rgba(179,0,92,.03); }
  .fw-field.fw-next{ animation:fwNextPulse 1.4s ease-in-out 2; }
  @keyframes fwNextPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(0,152,192,0); }
    50%{ box-shadow:0 0 0 5px rgba(0,152,192,.35); }
  }
  .fw-field.who-owner.fw-next{ animation-name:fwNextPulseOwner; }
  @keyframes fwNextPulseOwner{
    0%,100%{ box-shadow:0 0 0 0 rgba(179,0,92,0); }
    50%{ box-shadow:0 0 0 5px rgba(179,0,92,.35); }
  }

  @media (max-width: 860px){
    .fw-bar{ gap:7px; }
    .fw-stage{ padding:6px; max-height:none; }
  }

  /* The hidden attribute must ALWAYS win, even against display
     rules (this was letting hidden toolbar buttons show). */
  [hidden]{ display:none !important; }

  /* Field-audience toggle + owner-field coloring */
  .fw-who{ display:flex; gap:0; margin-right:6px; border:1px solid var(--paper-line);
    border-radius:7px; overflow:hidden; }
  .fw-who-btn{ border:0; background:var(--paper-card); color:var(--ink);
    font-family:inherit; font-size:12px; padding:6px 10px; cursor:pointer; }
  .fw-who-btn.armed{ background:#B3005C; color:#fff; }
  #who-client.armed{ background:#0098C0; }
  .fw-field.who-owner{ border-color:#B3005C; background:rgba(179,0,92,.06);
    color:#B3005C; }
  .fw-field.who-owner .fw-grip{ background:#B3005C; }
  .em-grid{ display:grid; grid-template-columns:1fr 90px; gap:8px;
    max-width:460px; margin-top:14px; }
  .em-grid #em-user, .em-grid #em-pass, .em-grid #em-from{ grid-column:1 / -1; }

  .em-status{ font-size:12px; color:var(--ink-soft); align-self:center; }
  .em-status.ok{ color:#2E7D6B; }
  .em-status.err{ color:#AA4512; font-weight:600; }

  /* Feedback must never hide behind an overlay */
  .drive-toast{ z-index:400 !important; }

  /* ============================================================
     INVOICING v2 — editor grid + settings + print pages
     ============================================================ */
  .inv-modal{ width:680px; max-width:94vw; max-height:90dvh; overflow-y:auto; }
  .inv-modal .perm-modal-actions{ margin-top:20px; }
  .inv-type-row{
    display:flex; flex-direction:column; gap:4px;
    font-size:12px; color:var(--ink-soft); margin:18px 0 14px;
  }
  #inv-intro-block{ margin:14px 0 16px; }
  #inv-retamt-row, #inv-flatamt-row{ margin:0 0 22px; }
  #inv-intro-block .inv-intro-toggle{ margin-bottom:8px; }
  #inv-hours-detail{ margin-top:14px; }
  .inv-modal .inv-head-grid{ margin-bottom:14px; }
  .inv-type-row select{
    width:100%; font-family:inherit; font-size:13px; color:var(--ink);
    padding:8px 10px; border:1px solid var(--paper-line);
    border-radius:7px; background:#fff;
  }
  .inv-head-grid select{
    font-family:inherit; font-size:13px; padding:7px 8px;
    border:1px solid var(--paper-line); border-radius:7px; background:#fff;
  }
  .inv-intro-toggle{
    display:flex; align-items:center; gap:7px;
    font-size:12.5px; color:var(--ink); margin:0 0 6px;
  }
  #inv-intro{
    width:100%; font-family:inherit; font-size:12.5px; line-height:1.5;
    border:1px solid var(--paper-line); border-radius:7px;
    padding:8px 10px; margin-bottom:8px; resize:vertical;
  }
  .inv-rate-row{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:0 0 14px;
  }
  .inv-rate-row label{
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:600; color:var(--ink);
  }
  .inv-rate-row input{
    width:90px; font-family:inherit; font-size:13px; padding:6px 8px;
    border:1px solid var(--paper-line); border-radius:7px;
  }
  .inv-grid-wrap{
    max-height:300px; overflow-y:auto;
    border:1px solid var(--paper-line); border-radius:8px;
  }
  .inv-grid{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .inv-grid thead th{
    position:sticky; top:0; z-index:2;
    background:var(--navy); color:#fff; text-align:left;
    font-size:11.5px; font-weight:600; letter-spacing:.3px;
    padding:7px 10px;
  }
  .inv-grid thead th.num{ text-align:right; }
  .inv-grid td{
    padding:4px 10px; border-bottom:1px solid var(--paper-line);
    white-space:nowrap;
  }
  .inv-grid tr.ig-wknd td{ background:#F3F6F9; }
  .inv-grid th.c{ text-align:center; }
  .inv-grid td.ig-wd{ text-align:center; }
  .inv-grid td.ig-cell{ width:96px; }
  .inv-grid td.ig-rcell{ width:122px; }
  .ig-rwrap{ display:flex; align-items:center; gap:4px; }
  .ig-dollar{ color:var(--ink-soft); font-size:12px; }
  .inv-grid input{
    width:100%; min-width:0; font-family:inherit; font-size:12.5px;
    border:1px solid var(--paper-line); border-radius:5px;
    padding:4px 7px; text-align:right;
  }
  .ig-remaining{
    text-align:right; font-size:12.5px; color:var(--ink);
    margin:8px 2px 0;
  }
  .ig-remaining b{ font-size:13px; }
  .ig-remaining.over b{ color:#D5382C; }
  .inv-grid .ig-amt{ text-align:right; font-weight:600; color:var(--ink); }
  .inv-grid tfoot .ig-foot td{
    position:sticky; bottom:0;
    background:var(--steel-bg); color:var(--ink);
    font-weight:700; border-bottom:0;
    box-shadow:0 -2px 0 0 var(--navy);   /* the line rides the sticky cell */
    padding:7px 10px; text-align:right;
  }
  .inv-grid tfoot .ig-foot td:first-child{ text-align:left; }
  /* Inputs match the Admin tab's input cells everywhere */
  .field-input, select.field-input{
    font-family:inherit; font-size:13px; color:var(--ink);
    background:var(--paper); border:1px solid var(--paper-line);
    border-radius:var(--radius-sm); padding:8px 10px;
    width:100%; box-sizing:border-box;
  }
  .field-input:focus, select.field-input:focus{
    outline:none; border-color:var(--steel);
  }

  /* Invoice settings: one vertical column on the left */
  .invset-grid{
    display:flex; flex-direction:column; gap:0;
    max-width:380px;
  }
  .invset-grid .field-input{ margin-bottom:8px; }
  .invset-grid textarea.field-input{ resize:vertical; min-height:92px; }
  .invset-colors{ display:flex; gap:18px; margin-bottom:8px; }
  .invset-colors label{
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink);
  }
  .invdel-modal{ width:480px; max-width:94vw; text-align:center; }
  .invdel-name{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 12px; }
  .invdel-q{
    font-size:14px; font-weight:600; color:var(--ink);
    white-space:nowrap; margin:0 0 18px;
  }
  .invdel-actions{ display:flex; gap:10px; justify-content:center; }
  .invset-colors input[type="color"]{
    width:42px; height:28px; padding:2px;
    border:1px solid var(--paper-line); border-radius:6px;
    background:var(--paper); cursor:pointer;
  }
  .invset-csz{ display:flex; gap:8px; margin-bottom:8px; }
  .invset-csz .field-input{ margin-bottom:0; }
  .invset-csz .inv-state{ flex:0 0 86px; }
  .invset-csz .inv-zip{ flex:0 0 110px; }
  .invset-label{
    font-size:11px; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; color:var(--ink-soft); margin:0 0 7px;
  }

  /* ---- The printed invoice (matches the reference letter) ---- */
  .ip-page{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    font-family:Arial, 'Segoe UI', Helvetica, sans-serif;
    color:#1A1A1A; width:816px; max-width:100%;   /* 8.5in */
    box-sizing:border-box; margin:0 auto;
    padding:72px; position:relative;              /* 0.75in margins */
  }
  .ip-head{ display:flex; align-items:flex-start; justify-content:flex-end; }
  .ip-logo-text{ margin-right:auto; }
  .ip-ph{ color:#A9B4C0; }
  .ip-logo{ position:absolute; height:auto; }
  .ip-logo-crop{ position:absolute; overflow:hidden; }
  .ip-logo-crop img{ display:block; height:auto; max-width:none; max-height:none; }
  .ip-head{ min-height:72px; }

  /* The logo as an editable object on the live preview */
  .ip-logo-box{
    position:absolute; z-index:6; cursor:move;
    border:1.5px dashed #0098C0; border-radius:3px;
    pointer-events:auto; touch-action:none;
  }
  .ip-logo-grip{
    position:absolute; right:-8px; bottom:-8px;
    width:14px; height:14px; background:#0098C0;
    border-radius:3px; cursor:nwse-resize;
  }
  .invprev-hint{
    font-size:11.5px; color:var(--ink-soft); line-height:1.5;
    margin:-3px 0 8px;
  }
  .ip-logo-text{ font-size:26px; font-weight:700; color:#0F2A47; }
  .ip-firm{ text-align:right; font-size:13px; line-height:1.3; margin-top:12px; }
  .ip-firm-name{ font-weight:700; font-size:15px; }
  .ip-billto{ margin-top:40px; font-size:13.5px; line-height:1.3; }
  .ip-billto .ip-b{ font-weight:700; }
  .ip-meta2{
    margin-top:34px; font-size:12px; line-height:1.45;
    display:inline-block;                 /* rule hugs the longest line */
    border-top:1px solid #1A1A1A; padding-top:5px;
  }
  .ip-meta2 + * { clear:both; }
  .ip-intro{
    margin-top:26px; font-size:12.5px; line-height:1.65; text-align:justify;
  }
  .ip-sum2{
    width:100%; border-collapse:collapse; margin-top:96px; font-size:13px;
  }
  .ip-sum2 th{
    background:#0D2B4F; color:#fff; font-weight:700;
    text-align:left; padding:8px 12px;
  }
  .ip-sum2 th.num{ text-align:right; }
  .ip-sum2 td{ padding:8px 12px; border-bottom:1px solid #D8DEE6; }
  .ip-sum2 td.num{ text-align:right; }
  .ip-sum2 .ip-sum2-total td{
    background:#0098C0; color:#fff; font-weight:700; border-bottom:0;
  }
  .ip-notes{
    margin-top:144px; font-size:12px; line-height:1.45;
    border-top:1px solid #1A1A1A; padding-top:5px;
  }
  .ip-notes-head{ font-weight:700; }
  .ip-notes-body{ white-space:pre-line; }
  .ip-page2{ page-break-before:always; padding-top:48px; }
  .ip-hours th.c, .ip-hours td.c{ text-align:center; }
  .ip-p2-head{
    display:flex; justify-content:space-between;
    font-size:13.5px; margin-bottom:60px;
  }
  .ip-hours{
    border-collapse:collapse; margin:0 auto; min-width:430px;
    font-family:Arial, Helvetica, sans-serif; font-size:13px;
  }
  .ip-hours th{
    background:#15304F; color:#fff; text-align:right;
    font-weight:700; padding:7px 12px;
  }
  .ip-hours th.l{ text-align:left; }
  .ip-hours td{ text-align:right; padding:3.5px 12px; }
  .ip-hours td.l{ text-align:left; }
  .ip-hours tr.alt td{ background:#EDF0F4; }
  .ip-hours tr.ip-azure td, .ip-hours tr.ip-azure2 td{
    background:#0098C0; color:#fff; font-weight:700;
  }
  .ip-hours tr.ip-azure2 td{ background:#00A1D7; }
  .ip-hours tr.ip-adj td{ background:#fff; font-weight:400; }


  /* Invoice preview overlay: the sample document on screen */
  .invprev-overlay{
    position:fixed; inset:0; z-index:80;
    background:rgba(6,12,20,.8);
    display:none; justify-content:center;
    overflow-y:auto; padding:26px 14px;
  }
  .invprev-overlay.open{ display:flex; }
  .invprev-sheet{ width:816px; max-width:none; align-self:flex-start; }
  .invprev-sheet .ip-page{
    max-width:none;
    background:#fff; border-radius:6px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
    margin-bottom:22px;
  }
  .invprev-close{
    position:fixed; top:16px; right:20px; z-index:81;
    width:34px; height:34px; border:0; border-radius:8px;
    background:rgba(255,255,255,.14); color:#fff;
    font-size:20px; line-height:1; cursor:pointer;
  }
  .invprev-close:hover{ background:rgba(255,255,255,.26); }
  .invprev-printbtn{ position:fixed; top:16px; right:64px; z-index:81; }
  @media (max-width: 860px){
    .invprev-sheet .ip-page{ padding:22px 16px; }
  }

  /* Invoice Settings: inputs left, live page-1 preview right */
  .invset-flex{ display:flex; gap:24px; align-items:flex-start; }
  .invset-left{ flex:0 0 340px; }
  .invset-right{ flex:1; min-width:0; }
  .invprev-wrap{
    position:relative; overflow:hidden;
    border:1px solid var(--paper-line); border-radius:8px;
    background:var(--steel-bg);
  }
  .invprev-wrap.magnify{ cursor:zoom-in; }
  .invprev-live{
    width:816px; transform-origin:top left;
    pointer-events:none;
  }
  .invprev-live .ip-page{
    background:#fff; margin:0;
  }
  .inv-expand{
    position:absolute; top:8px; right:8px; z-index:5;
    width:30px; height:30px; border:0; border-radius:8px;
    background:rgba(8,28,51,.78); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .inv-expand:hover{ background:#0098C0; }
  .inv-lens{
    display:none; position:absolute; z-index:4;
    width:230px; height:230px; border-radius:50%;
    border:3px solid #0098C0; background:#fff;
    overflow:hidden; pointer-events:none;
    box-shadow:0 10px 30px rgba(5,15,30,.4);
  }
  .inv-lens-inner{
    position:absolute; width:700px;
    transform-origin:top left;
  }
  @media (max-width: 860px){
    .invset-flex{ flex-direction:column; }
    .invset-left{ flex:none; width:100%; max-width:380px; }
    .invset-right{ width:100%; }
  }

  /* Invoices table: even columns; Date/Due centered with their data */
  #inv-table{ table-layout:fixed; width:100%; }
  #inv-table th:nth-child(1), #inv-table td:nth-child(1){ width:15%; }
  #inv-table th:nth-child(2), #inv-table td:nth-child(2),
  #inv-table th:nth-child(3), #inv-table td:nth-child(3){
    width:15%; text-align:center;
  }
  #inv-table th:nth-child(4), #inv-table td:nth-child(4){ width:15%; }
  #inv-table th:nth-child(5), #inv-table td:nth-child(5){ width:15%; }
  #inv-table td:last-child{ white-space:normal; }

  #inv-table th[data-k]{ cursor:pointer; user-select:none; }
  #inv-table th[data-k]:hover{ color:var(--steel-dark); }
  .sort-ind{ font-size:13px; opacity:.65; }

  .eml-preview{ max-width:560px; }
  #et-align{ flex:1; }
  #et-lw{ flex:0 0 96px; }