:root{
    --ink:#2A2160;
    --ink-2:#3C3078;
    --ink-3:#1B1640;
    --paper:#F6F1E5;
    --card:#FFFFFF;
    --gold:#D81824;
    --gold-dark:#A81420;
    --clay:#8B2454;
    --slate:#665E78;
    --slate-2:#A69DB5;
    --line:#E3DCEC;
    --line-2:#F0EBF7;
    --green:#3F9C6B;
    --radius:6px;
    --shadow: 0 1px 2px rgba(42,33,96,0.07), 0 14px 32px -16px rgba(42,33,96,0.26);
    --brand-gradient: linear-gradient(100deg, #D81824 0%, #8B2460 45%, #3C3078 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:14px;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(42,33,96,0.05) 1px, transparent 0);
    background-size: 22px 22px;
  }
  .serif{ font-family:'Fraunces', serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.01em; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }

  /* ===== Login ===== */
  #login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:28px;
  }
  .brandmark{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .brandmark .stamp-logo{ width:64px; height:64px; }
  .brandmark h1{ font-size:34px; font-weight:600; letter-spacing:-0.01em; }
  .brandmark p{ color:var(--slate); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; }
  .login-card{
    background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
    width:380px; max-width:90vw; padding:36px 34px; border-radius:var(--radius);
  }
  .role-tabs{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:22px; }
  .role-tabs button{
    flex:1; padding:9px 0; background:transparent; border:none; font-size:12px; font-weight:600;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--slate); border-right:1px solid var(--line);
  }
  .role-tabs button:last-child{ border-right:none; }
  .role-tabs button.active{ background:var(--ink); color:var(--paper); }
  .field{ margin-bottom:16px; }
  .field label {
    display: flex;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    margin-bottom: 6px;
    font-weight: 600;
    align-items: center;
    vertical-align: middle;
}.req{ color:var(--gold); margin-left:2px; }
  .field input:not([type="radio"]){
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--paper); font-size:14px; font-family:inherit; color:var(--ink);
  }
  .field input:focus:not([type="radio"]){ outline:2px solid var(--gold); outline-offset:1px; }
  .btn-primary{
    width:100%; padding:12px; background:var(--ink); color:var(--paper); border:none; border-radius:var(--radius);
    font-weight:600; font-size:13px; letter-spacing:0.03em; margin-top:6px;
  }
  .btn-primary:hover{ background:var(--ink-2); }
  .login-foot{ text-align:center; color:var(--slate-2); font-size:11.5px; margin-top:18px; }

  /* ===== App shell ===== */
  #app{ display:none; min-height:100vh; grid-template-columns:236px 1fr; }
  #app.visible{ display:grid; }
  .sidebar{
    background:#FFFFFF;
    color:var(--ink); padding:26px 20px; display:flex; flex-direction:column;
    box-shadow: 1px 0 0 var(--line);
    position:relative;
  }
  .sidebar::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-gradient);
  }
  .sb-brand{ display:flex; align-items:center; margin-bottom:34px; padding:0 4px; }
  .brand-logo-chip{ height:34px; width:auto; display:block; }
  .sidebar .brand-logo-chip{ background:none; padding:0; box-shadow:none; height:38px; }
  .sb-role{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin:0 0 8px 4px; font-weight:600;}
  .sb-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:26px; }
  .sb-nav a, .sb-nav button{
    display:flex; align-items:center; gap:10px; text-align:left; background:transparent; border:none;
    border-left:2.5px solid transparent; color:var(--slate); padding:10px 12px; border-radius:var(--radius); font-size:13.5px; font-weight:500;
    text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden;
  }
  .sb-nav a svg, .sb-nav button svg{ width:16px; height:16px; opacity:0.8; flex-shrink:0; }
  .sb-nav a:hover, .sb-nav button:hover{ background:rgba(42,33,96,0.06); color:var(--ink); }
  .sb-nav a.active, .sb-nav button.active{ background:rgba(216,24,36,0.08); color:var(--ink); font-weight:600; border-left-color:var(--gold); }
  .sb-nav a.active svg, .sb-nav button.active svg{ opacity:1; color:var(--gold); }
  .sb-spacer{ flex:1; }
  .sb-user{ display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid var(--line); }
  .sb-user .av{ width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0;}
  .sb-user .name{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .sb-user .role{ font-size:10.5px; color:var(--slate); }
  .sb-switch{ margin-top:14px; font-size:11px; color:var(--slate); text-align:left; background:transparent; border:1px dashed var(--line); border-radius:var(--radius); padding:8px 10px; display:flex; align-items:center; gap:8px; cursor:pointer; }
  .sb-switch:hover{ color:var(--ink); border-color:var(--slate-2); }

  /* ===== Sidebar collapse toggle (desktop) ===== */
  .sb-collapse-toggle{
    position:absolute; top:22px; right:-13px; width:26px; height:26px; border-radius:50%;
    background:var(--card); border:1px solid var(--line); color:var(--slate);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:10;
  }
  .sb-collapse-toggle svg{ width:13px; height:13px; transition:transform .2s ease; }
  .sb-collapse-toggle:hover{ color:var(--gold); border-color:var(--gold); }

  @media (min-width: 981px){
    #app{ transition:grid-template-columns .22s ease; }
    .sidebar{ transition:width .22s ease, padding .22s ease; overflow:hidden; }
    .sb-label, .sb-role, .sb-user-text{ transition:opacity .15s ease; white-space:nowrap; }

    html.sidebar-collapsed #app{ grid-template-columns:76px 1fr; }
    html.sidebar-collapsed .sidebar{ width:76px; padding-left:14px; padding-right:14px; }
    html.sidebar-collapsed .sb-collapse-toggle svg{ transform:rotate(180deg); }
    html.sidebar-collapsed .sb-brand{ justify-content:center; }
    html.sidebar-collapsed .sidebar .brand-logo-chip{ height:26px; }
    html.sidebar-collapsed .sb-label,
    html.sidebar-collapsed .sb-role,
    html.sidebar-collapsed .sb-user-text{
      opacity:0; width:0; height:0; overflow:hidden; margin:0; padding:0; position:absolute; pointer-events:none;
    }
    html.sidebar-collapsed .sb-nav a, html.sidebar-collapsed .sb-nav button{ justify-content:center; padding:10px; gap:0; }
    html.sidebar-collapsed .sb-user{ justify-content:center; padding:12px 0; }
    html.sidebar-collapsed .sb-switch{ justify-content:center; }
  }

  .main{ padding:30px 40px 60px; max-width:1440px; }
  .view{ display:none; animation:fade .25s ease; }
  .view.active{ display:block; }
  @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
  .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-dark); font-weight:700; margin-bottom:6px; }
  .page-head h2{ font-family:'Fraunces',serif; font-size:28px; font-weight:600; letter-spacing:-0.01em; }
  .page-head .sub{ color:var(--slate); font-size:13px; margin-top:4px; }
  .btn{
    padding:10px 18px; border-radius:var(--radius); font-size:13px; font-weight:600; border:1px solid var(--line);
    background:var(--card); color:var(--ink); display:inline-flex; align-items:center; gap:7px;
  }
  .btn svg{ width:14px; height:14px; }
  .btn:hover{ border-color:var(--ink); }
  .btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .btn-dark:hover{ background:var(--ink-2); }
  .btn-gold{ background:var(--gold); color:#fff; border-color:var(--gold); }
  .btn-gold:hover{ background:var(--gold-dark); }
  .btn-outline-clay{ background:transparent; border-color:var(--clay); color:var(--clay); }
  .btn-outline-clay:hover{ background:var(--clay); color:#fff; }
  .btn-sm{ padding:7px 12px; font-size:12px; }

  /* ===== Icon-only table action buttons ===== */
  .icon-action{
    width:30px; height:30px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--slate);
  }
  .icon-action svg{ width:15px; height:15px; }
  .icon-action:hover{ border-color:var(--ink); color:var(--ink); background:rgba(42,33,96,0.05); }
  .icon-action.danger:hover{ border-color:var(--clay); color:var(--clay); background:rgba(139,36,84,0.06); }
  .icon-action.success{ border-color:rgba(21,148,99,0.35); color:var(--green); }
  .icon-action.success:hover{ border-color:var(--green); background:rgba(21,148,99,0.08); }
  .icon-action.warn{ color:var(--gold-dark); }
  .icon-action.warn:hover{ border-color:var(--gold); color:var(--gold-dark); background:rgba(216,24,36,0.06); }
  .row-actions{ display:flex; gap:6px; align-items:center; }

  /* ===== Stat cards ===== */
  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px; margin-bottom:32px; }
  .stat-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px;
    position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
  }
  .stat-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar-color, var(--slate-2)); }
  .stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
  .stat-card-disabled{ cursor:default; }
  .stat-card-disabled:hover{ transform:none; box-shadow:none; }
  .stat-card-clickable{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
  .stat-card .stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); font-weight:600; margin-bottom:10px;}
  .stat-card .stat-num{ font-family:'Fraunces',serif; font-size:34px; font-weight:600; line-height:1; }
  .stat-card .stat-tick{ position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; }
  .tick-gold{ background:var(--gold); }
  .tick-clay{ background:var(--clay); }
  .tick-slate{ background:var(--slate-2); }
  .tick-green{ background:var(--green); }
  .stat-card:has(.tick-gold){ --bar-color:var(--gold); }
  .stat-card:has(.tick-clay){ --bar-color:var(--clay); }
  .stat-card:has(.tick-green){ --bar-color:var(--green); }
  .stat-card:has(.tick-slate){ --bar-color:var(--slate-2); }

  /* ===== Stamp badge (signature status element) ===== */
  .stamp{
    display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px 4px 8px;
    border:1.5px solid currentColor; border-radius:3px; transform:rotate(-2deg); white-space:nowrap;
  }
  .stamp::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .stamp.s-draft{ color:var(--slate-2); }
  .stamp.s-submitted{ color:#7C6BB5; }
  .stamp.s-review{ color:var(--gold-dark); }
  .stamp.s-approved{ color:var(--green); }
  .stamp.s-partial{ color:#B8863A; }
  .stamp.s-rejected{ color:var(--clay); }
  .stamp.s-printing{ color:var(--ink); background:rgba(42,33,96,0.06); }

  /* ===== Table ===== */
  .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:28px;}

  /* Lets wide tables scroll horizontally inside the panel instead of being
     clipped by the panel's own overflow:hidden (used for its rounded corners). */
  .table-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, var(--card) 0%, rgba(255,255,255,0) 12px) 0 0,
      linear-gradient(to left, var(--card) 0%, rgba(255,255,255,0) 12px) 100% 0,
      linear-gradient(to right, rgba(35,40,44,0.08), rgba(35,40,44,0) 12px) 0 0,
      linear-gradient(to left, rgba(35,40,44,0.08), rgba(35,40,44,0) 12px) 100% 0;
    background-repeat:no-repeat;
    background-size:20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .table-scroll table{ min-width:640px; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-2); }
  .panel-head h3{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:600; }
  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); padding:11px 20px; border-bottom:1px solid var(--line-2); font-weight:700;}
  td{ padding:13px 20px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:middle;}
  tr:last-child td{ border-bottom:none; }
  tr.rowhover:hover{ background:rgba(216,24,36,0.06); cursor:pointer; }
  .doc-code{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate); }
  .avatar-sm{ width:30px; height:30px; border-radius:50%; background:var(--line-2); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ink-2); margin-right:10px; }
  .doc-name-cell{ display:flex; align-items:center; }
  .progress-mini{ width:70px; height:5px; background:var(--line-2); border-radius:3px; overflow:hidden; display:inline-block; margin-right:8px; vertical-align:middle;}
  .progress-mini > div{ height:100%; background:var(--gold); }

  /* ===== Form ===== */
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
  .form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  .fw-full{ grid-column: 1 / -1; }
  .section-title{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin:0 0 4px; display:flex; align-items:center; gap:10px;}
  .section-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-dark); background:rgba(216,24,36,0.12); padding:2px 7px; border-radius:2px; }
  .section-desc{ color:var(--slate); font-size:12.5px; margin-bottom:18px; }
  select{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); font-family:inherit; font-size:14px; color:var(--ink); }
  .radio-row{ display:flex; gap:10px; }
  .radio-opt{ flex:1; border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; line-height:1; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
  .radio-opt:hover{ border-color:var(--gold); }
  .radio-opt.selected{ border-color:var(--gold); background:rgba(216,24,36,0.07); }
  .radio-opt input{ accent-color:var(--gold); cursor:pointer; margin:0; width:15px; height:15px; flex-shrink:0; }
  .conditional-block{ border-left:2px solid var(--gold); padding-left:16px; margin-top:14px; background:rgba(216,24,36,0.04); padding:14px 16px; border-radius:0 var(--radius) var(--radius) 0; }

  /* ===== Calendar photo grid (signature element) ===== */
  .calendar-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:6px; }
  .frame{
    position:relative; background:#111823; border-radius:3px; padding:9px 9px 26px; aspect-ratio:1/1.12;
  }
  .frame::before, .frame::after{
    content:''; position:absolute; left:10px; right:10px; height:6px;
    background-image: repeating-linear-gradient(90deg, transparent 0 4px, #2a3446 4px 9px);
  }
  .frame::before{ top:0; }
  .frame::after{ bottom:15px; }
  .frame-month{ position:absolute; bottom:5px; left:0; right:0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.1em; color:#8B93A8; text-transform:uppercase; }
  .frame-inner{ width:100%; height:100%; border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(135deg,#2a3548,#1c2536); }
  .frame-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
  .frame-empty{ color:#5A6479; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10.5px; }
  .frame-empty svg{ width:20px; height:20px; opacity:0.7; }
  .frame-status{ position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .frame-status svg{ width:11px; height:11px; }
  .fs-approved{ background:var(--green); }
  .fs-rejected{ background:var(--clay); }
  .fs-pending{ background:var(--gold); }
  .frame-actions{ position:absolute; inset:9px 9px 32px; background:rgba(17,24,35,0.72); opacity:0; display:flex; align-items:center; justify-content:center; gap:6px; transition:opacity .15s; border-radius:2px;}
  .frame-inner:hover .frame-actions{ opacity:1; }
  .icon-btn{ width:30px; height:30px; border-radius:50%; background:#fff; border:none; display:flex; align-items:center; justify-content:center; }
  .icon-btn svg{ width:14px; height:14px; color:var(--ink); }
  .icon-btn.approve svg{ color:var(--green); }
  .icon-btn.reject svg{ color:var(--clay); }

  /* ===== Modal ===== */
  .overlay{ position:fixed; inset:0; background:rgba(42,33,96,0.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .overlay.open{ display:flex; }
  .modal{ background:var(--card); border-radius:var(--radius); width:420px; max-width:100%; padding:26px; box-shadow:var(--shadow); }
  .modal h4{ font-family:'Fraunces',serif; font-size:19px; margin-bottom:4px; }
  .modal p.hint{ color:var(--slate); font-size:12.5px; margin-bottom:16px; }
  textarea{ width:100%; min-height:90px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); font-family:inherit; font-size:13.5px; resize:vertical; background:var(--paper); }
  .modal-actions{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

  .banner{ display:flex; align-items:center; gap:12px; background:#F1E9D2; border:1px solid #E1CE9E; padding:13px 18px; border-radius:var(--radius); margin-bottom:24px; font-size:13px; }
  .banner svg{ width:17px; height:17px; color:var(--gold-dark); flex-shrink:0; }
  .banner.locked{ background:#EDE9E1; border-color:var(--line); }
  .banner.locked svg{ color:var(--slate); }

  .tabs-row{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; }
  .tabs-row button{ background:transparent; border:none; padding:11px 4px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--slate); border-bottom:2px solid transparent; }
  .tabs-row button.active{ color:var(--ink); border-color:var(--gold); }

  .breadcrumb{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--slate); margin-bottom:14px; }
  .breadcrumb button{ background:none; border:none; color:var(--slate); font-size:12px; text-decoration:underline; }
  .breadcrumb button:hover{ color:var(--ink); }

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

  /* ===== Mobile topbar + drawer (hidden on desktop) ===== */
  .topbar{ display:none; }
  .drawer-overlay{ display:none; }

  /* ===== Responsive: tablet & phone ===== */
  @media (max-width: 980px){
    #app.visible{ display:block; }
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      position:fixed; top:0; left:0; right:0; height:56px;
      background:#FFF; color:var(--gold);
      padding:0 14px; z-index:40; box-shadow:0 1px 0 rgba(0,0,0,0.15);
    }
    .hamburger{ background:transparent; border:none; color:var(--gold); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
    .hamburger:active{ background:rgba(255,255,255,0.1); }
    .hamburger svg{ width:22px; height:22px; }
    .topbar-brand{ display:flex; align-items:center; }
    .topbar-av{ width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
    .sb-collapse-toggle{ display:none; }

    .drawer-overlay.open{ display:block; position:fixed; inset:0; background:rgba(15,20,32,0.5); z-index:44; }

    .sidebar{
      position:fixed; top:0; left:0; bottom:0; width:266px; z-index:46;
      transform:translateX(-100%); transition:transform .28s ease; box-shadow:8px 0 30px rgba(0,0,0,0.25);
    }
    .sidebar.open{ transform:translateX(0); }
    .sb-switch{ margin-bottom:4px; }

    .main{ padding:76px 18px 60px; max-width:100%; }
    .page-head h2{ font-size:23px; }
    .page-head{ align-items:flex-start; }
    .stat-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .stat-card{ padding:14px 14px 12px; }
    .stat-card .stat-num{ font-size:27px; }
    .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; gap:14px; }
    .calendar-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; }
    .panel{ margin-bottom:20px; }
    .panel-head{ padding:14px 16px; flex-wrap:wrap; gap:8px; }
    .radio-row{ flex-wrap:wrap; }
    .tabs-row{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
    .tabs-row button{ margin-right:16px; }
    .btn{ min-height:40px; }

    /* Tables become stacked cards */
    table, thead, tbody, tr, td{ display:block; width:100%; }
    .table-scroll{ overflow-x:visible; background:none; }
    .table-scroll table{ min-width:0; }
    thead{ display:none; }
    tbody tr{
      border:1px solid var(--line-2); border-radius:var(--radius); margin:0 0 10px; overflow:hidden; background:var(--card);
    }
    tbody tr:last-child{ margin-bottom:0; }
    td{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:11px 14px; border-bottom:1px solid var(--line-2); text-align:right; min-height:24px;
    }
    td:last-child{ border-bottom:none; }
    td:empty{ display:none; }
    td[data-label]::before{
      content:attr(data-label); font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
      color:var(--slate); font-weight:700; text-align:left; flex-shrink:0;
    }
    .doc-name-cell{ font-weight:600; }
  }

  @media (max-width: 520px){
    .calendar-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .stat-grid{ grid-template-columns:repeat(2, 1fr); }
    .page-head{ flex-direction:column; align-items:stretch; }
    .page-head > button, .page-head > div[style]{ width:100%; }
    .modal{ width:100%; padding:22px; }
    .brandmark h1{ font-size:28px; }
  }

  /* ===== Swipe Review (signature: contact-sheet stamps as drag feedback) ===== */
  .swipe-tally{ display:flex; gap:8px; }
  .tally{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; border:1.5px solid; white-space:nowrap; }
  .tally.approved{ color:var(--green); border-color:var(--green); background:rgba(63,156,107,0.08); }
  .tally.rejected{ color:var(--clay); border-color:var(--clay); background:rgba(139,36,84,0.08); }

  .month-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
  .month-dot{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; border:1.5px solid var(--line); color:var(--slate-2); background:var(--card); transition:all .2s; }
  .month-dot.approved{ background:var(--green); border-color:var(--green); color:#fff; }
  .month-dot.rejected{ background:var(--clay); border-color:var(--clay); color:#fff; }
  .month-dot.current{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,24,36,0.28); color:var(--ink); transform:scale(1.12); }

  .swipe-arena{ display:flex; justify-content:center; margin-bottom:26px; }
  .swipe-stack{ position:relative; width:100%; max-width:380px; height:min(58vh, 480px); }
  .swipe-card{
    position:absolute; inset:0; border-radius:12px; overflow:hidden; background:#111823;
    box-shadow:0 22px 44px -14px rgba(42,33,96,0.4); touch-action:none; user-select:none; cursor:grab;
  }
  .swipe-card:active{ cursor:grabbing; }
  .swipe-card img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  .swipe-card.behind-1{ transform:scale(0.94) translateY(12px); z-index:1; filter:brightness(0.82); }
  .swipe-card.behind-2{ transform:scale(0.88) translateY(20px); z-index:0; filter:brightness(0.66); }
  .swipe-card.top{ z-index:2; }
  .card-info{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 15px; background:linear-gradient(to top, rgba(10,14,22,0.88), transparent); color:#fff; pointer-events:none; }
  .card-month{ font-family:'Fraunces',serif; font-size:23px; font-weight:600; }
  .card-sub{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#F3A9B8; letter-spacing:0.06em; text-transform:uppercase; margin-top:2px; }
  .swipe-stamp{
    position:absolute; top:24px; padding:7px 14px; border:3px solid; border-radius:8px;
    font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:18px; letter-spacing:0.07em;
    text-transform:uppercase; opacity:0; pointer-events:none;
  }
  .swipe-stamp.approve{ left:18px; color:var(--green); border-color:var(--green); background:rgba(255,255,255,0.9); transform:rotate(-14deg); }
  .swipe-stamp.reject{ right:18px; color:var(--clay); border-color:var(--clay); background:rgba(255,255,255,0.9); transform:rotate(14deg); }

  .swipe-controls{ display:flex; align-items:center; justify-content:center; gap:20px; }
  .swipe-btn{ width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); flex-shrink:0; }
  .swipe-btn:active{ transform:scale(0.93); }
  .swipe-btn.approve{ color:var(--green); width:66px; height:66px; border-color:rgba(63,156,107,0.3); }
  .swipe-btn.reject{ color:var(--clay); width:66px; height:66px; border-color:rgba(139,36,84,0.3); }
  .swipe-btn.undo{ color:var(--gold-dark); }

  .swipe-empty{ display:none; text-align:center; padding:40px 20px; max-width:380px; margin:0 auto; }
  .swipe-empty.show{ display:block; }
  .big-check{ width:60px; height:60px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
  .swipe-empty h3{ font-family:'Fraunces',serif; font-size:21px; margin-bottom:6px; }
  .swipe-empty p{ color:var(--slate); font-size:13.5px; margin-bottom:20px; }
  .swipe-empty .empty-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

  .sheet-overlay{ position:fixed; inset:0; background:rgba(15,20,32,0.45); display:none; align-items:flex-end; justify-content:center; z-index:60; }
  .sheet-overlay.open{ display:flex; }
  .sheet{ background:var(--card); width:100%; max-width:460px; border-radius:16px 16px 0 0; padding:22px 22px 26px; box-shadow:0 -10px 30px rgba(0,0,0,0.2); animation:sheetup .22s ease; }
  @keyframes sheetup{ from{ transform:translateY(30px); opacity:0.6; } to{ transform:translateY(0); opacity:1; } }
  .sheet h4{ font-family:'Fraunces',serif; font-size:18px; margin-bottom:14px; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .chip{ padding:8px 14px; border-radius:20px; border:1.5px solid var(--line); background:var(--paper); font-size:12.5px; font-weight:600; color:var(--ink-2); }
  .chip.selected{ border-color:var(--clay); background:rgba(139,36,84,0.08); color:var(--clay); }

  @media (max-width: 520px){
    .swipe-stack{ max-width:100%; height:56vh; }
    .swipe-controls{ gap:16px; }
  }

  /* ===== Table search + pagination ===== */
  .table-search{ padding:14px 20px; border-bottom:1px solid var(--line-2); }
  .table-search input{
    width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius);
    font-size:13px; font-family:inherit; background:var(--paper); color:var(--ink);
  }
  .table-search input:focus{ outline:2px solid var(--gold); outline-offset:1px; }

  .pagination{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding:14px 20px; border-top:1px solid var(--line-2);
  }
  .pagination-info{ font-size:12px; color:var(--slate); white-space:nowrap; }
  .pagination-controls{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .page-btn{
    min-width:32px; height:32px; padding:0 8px; border:1px solid var(--line); background:var(--card);
    border-radius:4px; font-size:12px; font-weight:600; color:var(--ink-2); font-family:'IBM Plex Mono',monospace;
    align-items: center;
    vertical-align: middle;
    display: flex;
    text-align: center;
    justify-content: center;
  }
  .page-btn:hover:not(:disabled):not(.dots){ border-color:var(--ink); }
  .page-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .page-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .page-btn.dots{ border:none; background:none; color:var(--slate-2); min-width:20px; padding:0; }
  .page-size-select{
    padding:7px 10px; border:1px solid var(--line); border-radius:4px; font-size:12px;
    background:var(--card); font-family:inherit; color:var(--ink-2);
  }
  @media (max-width: 700px){
    .pagination{ justify-content:center; text-align:center; }
    .pagination-info{ width:100%; text-align:center; }
    .pagination-controls{ justify-content:center; }
    .page-btn{ min-width:36px; height:36px; }
  }

/* ============================================================
   Micro-interactions & entrance animation
   Small, consistent motion on every interactive surface —
   nothing flashy, just enough to feel alive.
   ============================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stampStamp {
  0%   { opacity: 0; transform: rotate(-2deg) scale(1.3); }
  60%  { opacity: 1; transform: rotate(-2deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(216,24,36,0.35); }
  100% { box-shadow: 0 0 0 6px rgba(216,24,36,0); }
}
@keyframes shimmerBar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Base: every interactive element eases instead of snapping. */
a, button, input, select, textarea, .stamp, .stat-card, .panel, .frame,
.page-btn, .chip, .avatar-sm, .swipe-btn, .icon-btn, .month-dot, tr.rowhover {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Buttons: gentle lift on hover, tactile press on click. */
.btn, .btn-primary, .btn-dark, .btn-gold, .btn-outline-clay, .page-btn:not(.dots), .swipe-btn, .icon-btn, .chip {
  transform: translateZ(0);
}
.btn:hover, .btn-dark:hover, .btn-gold:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active, .btn-dark:active, .btn-gold:active, .btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.page-btn:hover:not(:disabled):not(.dots) { transform: translateY(-1px); }
.page-btn:active:not(:disabled) { transform: scale(0.94); }
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: scale(0.96); }
.swipe-btn:hover { box-shadow: var(--shadow); }

/* Rows and cards: quick highlight instead of an instant flash. */
tr.rowhover:hover td { background: rgba(42,33,96,0.03); }
.avatar-sm { display:inline-flex; }
tr.rowhover:hover .avatar-sm { transform: scale(1.08); }

/* Stamps: a little "stamped down" pop the moment they render. */
.stamp { animation: stampStamp .32s cubic-bezier(.34,1.56,.64,1) both; }

/* Calendar frames: staggered entrance + hover lift. */
.calendar-grid .frame { animation: fadeInUp .35s ease both; }
.calendar-grid .frame:nth-child(1) { animation-delay: .02s; }
.calendar-grid .frame:nth-child(2) { animation-delay: .05s; }
.calendar-grid .frame:nth-child(3) { animation-delay: .08s; }
.calendar-grid .frame:nth-child(4) { animation-delay: .11s; }
.calendar-grid .frame:nth-child(5) { animation-delay: .14s; }
.calendar-grid .frame:nth-child(6) { animation-delay: .17s; }
.calendar-grid .frame:nth-child(7) { animation-delay: .20s; }
.calendar-grid .frame:nth-child(8) { animation-delay: .23s; }
.calendar-grid .frame:nth-child(9) { animation-delay: .26s; }
.calendar-grid .frame:nth-child(10) { animation-delay: .29s; }
.calendar-grid .frame:nth-child(11) { animation-delay: .32s; }
.calendar-grid .frame:nth-child(12) { animation-delay: .35s; }
.frame-inner:hover { transform: scale(1.015); }
.frame-status { animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both; }
.icon-btn:hover { transform: scale(1.1); }
.icon-btn:active { transform: scale(0.92); }

/* Stat cards: staggered rise on page load. */
.stat-grid .stat-card { animation: fadeInUp .4s ease both; }
.stat-grid .stat-card:nth-child(1) { animation-delay: .00s; }
.stat-grid .stat-card:nth-child(2) { animation-delay: .04s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: .08s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: .12s; }
.stat-grid .stat-card:nth-child(5) { animation-delay: .16s; }
.stat-grid .stat-card:nth-child(6) { animation-delay: .20s; }

/* Panels and page head: soft entrance so the whole view doesn't just "appear". */
.page-head { animation: fadeInUp .35s ease both; }
.panel { animation: fadeInUp .4s ease both; animation-delay: .05s; }
.banner { animation: fadeInUp .3s ease both; }
.breadcrumb { animation: fadeIn .3s ease both; }

/* Table rows: quick cascading fade so long lists don't pop in as a block. */
tbody tr { animation: fadeIn .25s ease both; }
tbody tr:nth-child(1) { animation-delay: .01s; } tbody tr:nth-child(2) { animation-delay: .02s; }
tbody tr:nth-child(3) { animation-delay: .03s; } tbody tr:nth-child(4) { animation-delay: .04s; }
tbody tr:nth-child(5) { animation-delay: .05s; } tbody tr:nth-child(6) { animation-delay: .06s; }
tbody tr:nth-child(7) { animation-delay: .07s; } tbody tr:nth-child(8) { animation-delay: .08s; }

/* Sidebar nav: active pill and hover glide smoothly instead of jumping. */
.sb-nav a, .sb-nav button {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease;
}
.sb-nav a:hover, .sb-nav button:hover { padding-left: 15px; }
html.sidebar-collapsed .sb-nav a:hover, html.sidebar-collapsed .sb-nav button:hover { padding-left: 10px; }

/* Month dots: a satisfying little bounce when a decision lands. */
.month-dot { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, border-color .2s ease; }
.month-dot.approved, .month-dot.rejected { animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both; }

/* Tally chips (swipe review): pop when the count changes. */
.tally { animation: popIn .25s cubic-bezier(.34,1.56,.64,1) both; }

/* Progress bars: fill glides in instead of snapping to width. */
.progress-mini > div { transition: width .6s cubic-bezier(.22,1,.36,1); }

/* Modals / sheets: soften the existing pop with a touch of scale. */
.modal { animation: popIn .22s cubic-bezier(.3,1,.4,1) both; }
.overlay.open .modal { animation: popIn .22s cubic-bezier(.3,1,.4,1) both; }

/* Swipe cards already animate via JS transforms; give the deck itself a
   gentle settle-in the first time a doctor's review screen loads. */
.swipe-stack { animation: fadeIn .3s ease both; }

/* Login screen: brand mark and card ease in on arrival. */
.brandmark { animation: fadeInUp .5s ease both; }
.login-card { animation: fadeInUp .5s ease .08s both; }
.login-foot { animation: fadeIn .6s ease .2s both; }

/* Focus states: a brief pulse ring instead of an abrupt outline snap. */
.field input:focus:not([type="radio"]), select:focus, textarea:focus, .table-search input:focus {
  animation: ringPulse .5s ease-out;
}

/* Respect reduced-motion preferences: fall back to instant, no-motion UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 980px) {
    .form-grid,
    .form-grid.cols-3 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 600px) {
    .form-grid,
    .form-grid.cols-3 {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .form-grid > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}