/* The PM app's shell and components — shared by every page under /pm/.
 *
 * Rebranded with the executive "Dark Navy & Champagne Gold" theme to give
 * the Project Management platform a distinct, elite identity while maintaining
 * exact layout consistency with the LIBRA suite.
 *
 * Loaded by templates/pm/base.html, which owns the markup these rules target.
 */

:root{
  /* ── Dark Navy Palette ── */
  --navy-deep:#080f1d;
  --navy-dark:#14213d;
  --navy-mid:#1e2f52;
  --navy-tint:#f0f4f9;
  --navy-subtle:#e2e8f4;

  /* ── Champagne Gold Accent Palette ── */
  --gold:#c59b4e;
  --gold-light:#dfbe76;
  --gold-dark:#9e792f;
  --gold-tint:#faf4e8;
  --gold-border:rgba(197,155,78,.35);
  --gold-glow:0 0 22px -4px rgba(197,155,78,.35);

  /* ── Neutrals & Semantic Colors ── */
  --ink:#0e172a;
  --body-c:#2d3748;
  --muted:#64748b;
  --border:#dbe2ea;
  --white:#ffffff;
  --bg:#f4f6fa;
  --ok:#2e8b57;
  --ok-tint:#eaf6f0;
  --warn:#d9a441;
  --warn-tint:#fdf6e8;
  --err:#c9524f;
  --err-tint:#fbeceb;

  /* ── Typography & Chrome Metrics ── */
  --font-heading:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-std:0px 12px 28px -6px rgba(20,33,61,.16), 0px 4px 12px -2px rgba(197,155,78,.08);
  --shadow-soft:0px 4px 16px -4px rgba(15,23,42,.08);
  --sidebar-w:236px;
  --topbar-h:56px;

  /* ── Work surface ──
     Tool pages use these, not the gold accents: on a grid of numbers every
     accent colour competes with the data for attention. Gold is reserved for
     the shell (sidebar/topbar) and the landing tiles. */
  --line:#e7ebf0;          /* hairline rules inside a grid */
  --surface-alt:#f7f8fa;   /* table head, footer, action bars */
  --stale-row-bg:#fdeeee;  /* row not updated in more than one week */
  --stale-row-border:#f3c4c4;
  --stale-row-hover:#fbe4e4;
  --focus:#3f5f96;         /* one focus colour, everywhere */
  --focus-ring:0 0 0 3px rgba(63,95,150,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  color:var(--body-c);background:var(--bg);-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--font-heading);color:var(--ink);letter-spacing:-.01em}
a{text-decoration:none;color:inherit}

/* Inline SVG icons */
.ico{width:24px;height:24px;display:inline-block;flex:0 0 auto;fill:currentColor;user-select:none}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:60;
  background:linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-dark) var(--topbar-h), var(--navy-deep) 100%);
  color:#fff;display:flex;flex-direction:column;padding:0 8px 8px;
  transform:translateX(-100%);transition:transform .22s ease;
  border-right:1px solid rgba(197,155,78,.2);
}
.sidebar.open{transform:none}
.sidebar .brand{
  height:var(--topbar-h);flex:0 0 auto;margin:0 -8px;padding:0 16px;
  display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(197,155,78,.3);
  background:rgba(8,15,29,.25);
}
.brand-link{display:flex;line-height:0;text-decoration:none;color:inherit;flex:0 0 auto}
.brand-link:hover{opacity:.88}
.sidebar .brand img{height:20px;display:block;flex:0 0 auto}
.sidebar .brand .app-name{font-family:var(--font-heading);font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.sidebar .brand .app-sub{font-size:11px;color:var(--gold-light);line-height:1.2;font-weight:600;letter-spacing:.04em}
.sidebar nav{flex:1;min-height:0;overflow-y:auto;margin-top:14px}
.sidebar nav ul{list-style:none;display:flex;flex-direction:column;gap:3px}
.side-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.88);
  border-left:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
  width:100%;border-top:0;border-right:0;border-bottom:0;background:transparent;text-align:left;
}
.side-link .ico{width:20px;height:20px;color:rgba(255,255,255,.65);transition:color .15s}
.side-link:hover{background:rgba(255,255,255,.08);color:#fff}
.side-link:hover .ico{color:var(--gold-light)}
.side-link.active{
  background:linear-gradient(90deg, rgba(197,155,78,.22) 0%, rgba(197,155,78,.05) 100%);
  color:#fff;
  border-left-color:var(--gold-light);
}
.side-link.active .ico{color:var(--gold-light)}

/* ── Sidebar Submenus ── */
.side-group{display:flex;flex-direction:column}
.side-group-toggle{
  justify-content:space-between;cursor:pointer;
}
.side-group-toggle .side-title-wrap{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.side-chevron{
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  margin-left:auto;transition:transform .2s ease;opacity:.7;color:rgba(255,255,255,.8);
}
.side-chevron .ico{width:18px;height:18px}
.side-group.open .side-chevron{transform:rotate(180deg);opacity:1;color:var(--gold-light)}

.side-submenu{
  list-style:none;display:none;flex-direction:column;gap:2px;
  padding:3px 0 4px 10px;margin:2px 0 4px 14px;
  border-left:1.5px solid rgba(197,155,78,.25);
}
.side-group.open .side-submenu{display:flex}

.side-sublink{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.78);
  transition:background .15s,color .15s,transform .12s;
}
.side-sublink .sub-ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.side-sublink .sub-ico .ico{width:17px;height:17px;color:rgba(255,255,255,.55);transition:color .15s}
.side-sublink .sub-dot{
  width:5px;height:5px;border-radius:50%;background:rgba(197,155,78,.45);
  transition:background .15s,transform .15s;
}
.side-sublink:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.side-sublink:hover .sub-ico .ico{color:var(--gold-light)}
.side-sublink:hover .sub-dot{background:var(--gold-light);transform:scale(1.3)}
.side-sublink.active{
  background:rgba(197,155,78,.18);color:#fff;font-weight:700;
}
.side-sublink.active .sub-ico .ico{color:var(--gold-light)}
.side-sublink.active .sub-dot{background:var(--gold-light);box-shadow:0 0 6px rgba(197,155,78,.8)}
.side-foot{
  margin-top:auto;border-top:1px solid rgba(197,155,78,.25);padding:10px 12px 6px;
  display:flex;align-items:center;gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color:var(--navy-deep);font-family:var(--font-heading);font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(197,155,78,.4);
}
.side-foot .who{min-width:0}
.side-foot .who .name{font-size:13.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who .role{font-size:11px;color:var(--gold-light);text-transform:uppercase;letter-spacing:.08em;font-weight:700}

.backdrop{position:fixed;inset:0;background:rgba(8,15,29,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s}
.backdrop.show{opacity:1;pointer-events:auto}

/* ── Top Bar ───────────────────────────────────────────────────────────── */
.main{min-height:100%;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);flex:0 0 auto;
  background:linear-gradient(135deg, var(--navy-dark) 0%, #0e172a 100%);color:#fff;
  border-bottom:2px solid rgba(197,155,78,.35);
  display:flex;align-items:center;gap:14px;padding:0 20px;
  box-shadow:0 4px 16px rgba(8,15,29,.15);
}
.topbar .brand-link img{height:24px;display:block}
.topbar img{height:24px;display:block}
.topbar .divider{width:1px;height:16px;background:rgba(197,155,78,.4)}
.topbar .app-name{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.95)}
.menu-btn{
  border:1px solid rgba(197,155,78,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:8px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
}
.menu-btn:hover{background:rgba(197,155,78,.2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.svc{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid rgba(197,155,78,.25);border-radius:20px;padding:5px 11px;color:#fff;
}
.svc .dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.6}
.svc.ok .dot{background:#4ade80;opacity:1;box-shadow:0 0 6px #4ade80}
.svc.err .dot{background:#ff8080;opacity:1;box-shadow:0 0 6px #ff8080}
.lang-select{
  border:1px solid rgba(197,155,78,.35);background:rgba(255,255,255,.08);color:#fff;
  padding:6px 9px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;
}
.lang-select:hover{background:rgba(197,155,78,.2)}
.lang-select option{color:#0e172a;background:#fff;font-weight:400}

/* ── Page Content ──────────────────────────────────────────────────────── */
.page{flex:1;min-height:0;max-width:1180px;width:100%;margin:0 auto;padding:18px 16px 28px;
  display:flex;flex-direction:column}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;background:var(--white);flex:0 0 auto;
  border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:16px;box-shadow:var(--shadow-std);
  padding:20px 22px;margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.hero::after{
  content:"";position:absolute;right:-90px;top:-140px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(197,155,78,.18), rgba(20,33,61,.02) 70%);pointer-events:none;
}
.hero .intro{position:relative;z-index:1;min-width:260px;flex:1}
.hero-hub{
  justify-content:center;text-align:center;
}
.hero-hub .intro{flex:0 1 auto;max-width:640px}
.hero-hub p{margin-left:auto;margin-right:auto}
.hero h1{font-size:26px;line-height:1.15;margin-bottom:4px;color:var(--navy-dark)}
.hero p{color:var(--muted);font-size:14.5px;line-height:1.5;max-width:560px}

/* ── Bento Grid / Tiles ────────────────────────────────────────────────── */
.bento{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;flex:1;min-height:0}
.tile{
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;cursor:pointer;
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-soft);padding:16px 18px;flex:1 1 300px;max-width:420px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.15),box-shadow .18s ease,border-color .18s ease;
}
.tile .tile-category{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:4px;position:relative;z-index:1;
}
.tile:hover{
  transform:translateY(-5px);border-color:var(--gold);
  box-shadow:0 20px 36px -12px rgba(14,23,42,.22), 0 0 0 1px var(--gold-border);
}
.tile:active{
  transform:translateY(-1px) scale(.97);box-shadow:0 6px 14px -8px rgba(20,33,61,.3);
  transition-duration:.05s;
}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 30%,rgba(197,155,78,.15) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .5s ease;
}
.tile:hover::before{transform:translateX(120%)}
.tile .ghost{
  position:absolute;top:-16px;right:-12px;color:var(--gold);
  opacity:.06;pointer-events:none;transition:opacity .2s,transform .3s ease;
}
.tile .ghost .ico{width:92px;height:92px}
.tile:hover .ghost{opacity:.16;transform:rotate(8deg) scale(1.08)}
.tile .icon{
  width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--navy-tint);color:var(--navy-dark);border:1px solid var(--navy-subtle);
  margin-bottom:12px;position:relative;z-index:1;
  transition:background .2s,color .2s,border-color .2s,transform .28s cubic-bezier(.2,.8,.3,1.4);
}
.tile .icon .ico{width:22px;height:22px}
.tile:hover .icon{
  background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%);
  color:var(--gold-light);border-color:var(--gold);
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 4px 12px rgba(20,33,61,.3);
}
.tile h3{font-size:17.5px;margin-bottom:4px;position:relative;z-index:1;color:var(--navy-dark)}
.tile p{font-size:13.5px;line-height:1.45;color:var(--muted);position:relative;z-index:1}
.tile .open{
  margin-top:12px;display:flex;align-items:center;gap:6px;position:relative;z-index:1;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--gold-dark);
  opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s,color .15s;
}
.tile:hover .open,.tile:focus-visible .open{opacity:1;transform:none}
.tile:hover .open .ico{animation:nudge .5s ease}
@keyframes nudge{50%{transform:translateX(4px)}}
.tile .open .ico{width:16px;height:16px}

.foot{margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center;flex:0 0 auto}

@media (max-width:420px){
  .page{padding:14px 12px 20px}
  .hero{padding:16px 18px}
  .hero h1{font-size:22px}
}

@media (min-width:900px){
  .sidebar{transform:none}
  .main{margin-left:var(--sidebar-w)}
  .menu-btn{display:none}
  .backdrop{display:none}
  .topbar .brand-link,.topbar .divider{display:none}
  .hero{padding:22px 26px}
  .hero h1{font-size:29px}
  .page{padding:20px 26px 20px}
}

@media (min-width:1440px){
  .page{max-width:1360px;padding:26px 32px}
  .hero{padding:28px 34px}
  .hero h1{font-size:33px}
  .hero p{font-size:15.5px}
  .tile{padding:20px 22px}
  .tile h3{font-size:18.5px}
  .tile p{font-size:14px}
}

@media (min-width:900px) and (min-height:620px){
  body.locked{overflow:hidden}
  body.locked .main{height:100vh;overflow:hidden}
  body.locked .tile{justify-content:center}
}

/* ── Tool Pages / Data Grids ───────────────────────────────────────────── */
.page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:16px;
}
.page-head h1{font-size:20px;line-height:1.25;color:var(--navy-dark)}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:2px}

/* The edited week's date span — the largest text on the entry page. Bold and
   dark rather than coloured: it has to be unmissable without turning into
   another accent. Tabular figures keep the two dates the same width, so a
   changed week is visible as a changed shape, not just changed digits. */
.week-dates{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em;
  margin-top:6px;font-family:var(--font-heading);
  font-size:clamp(22px, 3.6vw, 30px);font-weight:800;line-height:1.15;
  color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
/* Each date stays whole; only the gap between them may break. */
.week-dates > span{white-space:nowrap}
.week-dates-dash{color:var(--muted);font-weight:700}

.card{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-soft);margin-bottom:16px;overflow:hidden;
}
.card > header{
  padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface-alt);
}
.card > header h2{font-size:15px;letter-spacing:.01em;color:var(--navy-dark)}
.card > header .spacer{margin-left:auto}
.card .body{padding:16px 18px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  background:var(--white);color:var(--ink);border-radius:8px;padding:8px 14px;
  font-size:13.5px;font-weight:700;font-family:var(--font-body);line-height:1.2;
  transition:background .15s,border-color .15s,color .15s,transform .05s,box-shadow .15s;
}
.btn:hover{background:var(--surface-alt);border-color:#c8d2de;color:var(--navy-dark)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn .ico{width:18px;height:18px}
/* Flat, not a gradient, and no gold on hover: this is the one action a form
   wants you to take, and it should read as a button rather than as decoration. */
.btn.primary{background:var(--navy-dark);border-color:var(--navy-dark);color:#fff}
.btn.primary:hover{background:var(--navy-mid);border-color:var(--navy-mid);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--navy-dark)}
.btn.ghost:hover{background:var(--surface-alt);color:var(--navy-dark)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}

/* ── Week Stepper ── */
.weeknav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.weeknav .btn{padding:7px 10px}

/* The week is stated once, here, at a size you can read without it shouting.
   It replaced a full-width banner in 34px type — clarity did not need that. */
.weeknav-label{
  font-family:var(--font-heading);font-size:17px;font-weight:800;
  color:var(--navy-dark);white-space:nowrap;padding:0 4px;
  font-variant-numeric:tabular-nums;
}
.btn.icon-only{padding:7px 9px}
.btn.icon-only .ico{width:18px;height:18px}
.btn.xs{font-size:12px;padding:4px 6px;border-radius:6px}
.btn.xs.icon-only{padding:4px 5px}
.btn.xs.icon-only .ico{width:16px;height:16px}
.complete-row-btn{color:var(--muted)}
.complete-row-btn:hover{color:var(--navy-dark);background:var(--surface-alt)}

/* Reachable by a screen reader, invisible on screen — used for the column
   header above the delete checkboxes, which needs no visible label. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Entry page: collapsible HP / BC/HAS sections ── */
.entry-section{
  margin-bottom:16px;border:1px solid var(--border);border-radius:14px;
  background:var(--white);box-shadow:var(--shadow-soft);overflow:hidden;
}
.entry-section-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border:0;background:var(--white);
  border-bottom:1px solid transparent;cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
}
.entry-section.open .entry-section-toggle{border-bottom-color:var(--line)}
.entry-section-toggle:hover{background:var(--surface-alt)}
.entry-section-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:15.5px;font-weight:700;color:var(--navy-dark);
}
/* Both tags are the same neutral grey. Colour-coding HP navy and BC/HAS gold
   made the page look like two different apps; the label already says which. */
.entry-section-tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:800;
  letter-spacing:.04em;background:var(--surface-alt);color:var(--muted);
  border:1px solid var(--line);
}
.entry-section-meta{display:flex;align-items:center;gap:10px}
.entry-chevron{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:transform .2s ease,color .15s;
}
.entry-chevron .ico{width:22px;height:22px}
.entry-section.open .entry-chevron{transform:rotate(180deg);color:var(--navy-dark)}
.entry-section-body{display:none;padding:0 14px 14px}
.entry-section.open .entry-section-body{display:block}
.entry-section .entry-card{margin-bottom:0;border:0;box-shadow:none;border-radius:0}
.entry-section .entry-card > header{background:transparent;border-top:0;padding-top:8px}
.entry-section form{margin:0}

.modal-overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(14,23,42,.45);
}
.modal-overlay[hidden]{display:none !important}
.modal-card{
  width:min(100%,440px);background:var(--white);border-radius:14px;
  border:1px solid var(--border);box-shadow:var(--shadow-soft);overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.modal-head h2{font-size:18px;margin:0}
.modal-form{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.modal-form input{width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
table.grid .row-project-name{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.entry-legend{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  padding:10px 14px;border-radius:10px;
  background:var(--surface-alt);border:1px solid var(--line);
  font-size:13px;line-height:1.45;color:var(--body-c);
}
.entry-legend-swatch{
  flex:0 0 auto;width:16px;height:16px;border-radius:4px;
  background:var(--stale-row-bg);border:1px solid var(--stale-row-border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* ── Data Grid / Table ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid{width:100%;border-collapse:collapse;font-size:14px;min-width:660px}
table.grid th,table.grid td{padding:9px 12px;text-align:left;vertical-align:middle}
/* A light head with muted labels. The numbers are the content; a dark bar with
   a gold underline pulled the eye to the headings instead. */
table.grid thead th{
  font-family:var(--font-heading);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  background:var(--surface-alt);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.grid tbody tr{border-bottom:1px solid var(--line)}
table.grid tbody tr:last-child{border-bottom:0}
table.grid tbody tr:hover{background:var(--surface-alt)}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid tfoot td{
  padding:11px 12px;border-top:1px solid var(--border);background:var(--surface-alt);
  font-family:var(--font-heading);font-weight:700;color:var(--navy-dark);
}
table.grid .row-meta{font-size:12px;color:var(--muted);white-space:nowrap}
/* An unsaved row is marked, not highlighted — a tinted band with a dashed rule
   read as an error state. */
table.grid tr.new-row{background:transparent}
table.grid tr.new-row td:first-child{box-shadow:inset 2px 0 0 var(--border)}
table.grid tr.stale-row{background:var(--stale-row-bg)}
table.grid tr.stale-row:hover{background:var(--stale-row-hover)}
table.grid tr.stale-row td:first-child{box-shadow:inset 2px 0 0 var(--stale-row-border)}

/* Form Inputs */
input[type=text],input[type=number],select,textarea{
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:7px 9px;width:100%;transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--focus);box-shadow:var(--focus-ring);
}
input[type=number]{text-align:right;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
table.grid input{border-color:transparent;background:transparent;padding:6px 8px}
table.grid tr:hover input,table.grid input:hover{border-color:var(--border);background:var(--white)}
table.grid input:focus{border-color:var(--focus);background:var(--white)}
table.grid td.w-code input{max-width:120px}
table.grid td.num input{max-width:110px;margin-left:auto}
.cell-stamp{
  display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;
  text-align:right;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
}
.cell-stamp-empty{color:var(--border)}
table.grid th.w-del,table.grid td.w-del{width:40px;text-align:center;padding-left:6px;padding-right:6px}
table.grid th.w-done,table.grid td.w-done{width:auto;min-width:88px;text-align:center;padding-left:6px;padding-right:6px}
table.grid th.w-done{white-space:nowrap}

.field-error{display:block;font-size:12px;font-weight:700;color:var(--err);margin-top:3px}
input.has-error,select.has-error{border-color:var(--err) !important;background:var(--err-tint) !important}

/* Colour still carries the meaning, but from a 3px edge rather than a saturated
   panel — several notices at once used to dominate the page. */
.notice{
  border-radius:8px;padding:10px 14px;font-size:13.5px;font-weight:600;
  margin-bottom:12px;background:var(--surface-alt);color:var(--body-c);
  border:1px solid var(--line);border-left:3px solid var(--muted);
}
.notice.ok{background:var(--ok-tint);border-color:rgba(46,139,87,.18);border-left-color:var(--ok);color:#1b5e3b}
.notice.err{background:var(--err-tint);border-color:rgba(201,82,79,.18);border-left-color:var(--err);color:#8d2b29}
.notice.info{background:var(--surface-alt);border-left-color:var(--navy-mid);color:var(--navy-dark)}

.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty .ico{width:40px;height:40px;color:var(--border);margin-bottom:8px}
.empty p{font-size:14px;margin-bottom:14px}

.hint{font-size:12.5px;color:var(--muted)}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  background:var(--surface-alt);border:1px solid var(--line);border-radius:20px;
  padding:4px 10px;color:var(--muted);
}

.form-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px 18px;border-top:1px solid var(--line);background:var(--surface-alt);
}
.form-actions .spacer{margin-left:auto}

@media (max-width:560px){
  .page-head h1{font-size:18px}
  /* Still the biggest thing on a phone — clamp's floor, not a smaller step. */
  .week-dates{font-size:22px}
  .weeknav-label{font-size:15px}
  .card .body,.card > header,.form-actions{padding-left:14px;padding-right:14px}
}

/* ── Reporting Dashboard & Analytics ─────────────────────────────────── */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;margin-bottom:18px;
}
.kpi-card{
  background:var(--white);border:1px solid var(--border);border-top:3px solid var(--navy-dark);
  border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
}
.kpi-card.gold{border-top-color:var(--gold)}
.kpi-card.ok{border-top-color:var(--ok)}
.kpi-card .kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi-card .kpi-value{font-family:var(--font-heading);font-size:26px;font-weight:800;color:var(--navy-dark);line-height:1.1}
.kpi-card.gold .kpi-value{color:var(--gold-dark)}
.kpi-card.ok .kpi-value{color:var(--ok)}
.kpi-card .kpi-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;
}

.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;
  font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap;
}
.badge.ok{background:var(--ok-tint);color:var(--ok);border:1px solid rgba(46,139,87,.3)}
.badge.gold{background:var(--gold-tint);color:var(--gold-dark);border:1px solid var(--gold-border)}
.badge.warn{background:var(--warn-tint);color:var(--warn);border:1px solid rgba(217,164,65,.3)}
.badge.muted{background:var(--navy-tint);color:var(--muted);border:1px solid var(--border)}

.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.filter-tabs{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--white);padding:4px;border-radius:10px;border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.filter-tab{
  padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:700;
  color:var(--muted);transition:background .15s,color .15s;text-decoration:none;
}
.filter-tab:hover{color:var(--navy-dark);background:var(--navy-tint)}
.filter-tab.active{background:var(--navy-dark);color:#fff}

.search-box{
  position:relative;display:flex;align-items:center;min-width:220px;
}
.search-box input{
  padding-left:32px;padding-right:10px;height:36px;
}
.search-box .search-ico{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:flex;align-items:center;
}
.search-box .search-ico .ico{width:16px;height:16px}

/* ── Reporting: dataset cards, status grid, trend chart ───────────────────
 *
 * Two different colour jobs on one page, kept apart on purpose:
 *
 *   The week grid encodes STATUS, not magnitude. A metric is flagged when it
 *   falls below 75% of the metric to its left, so the question the colour
 *   answers is "is this ratio healthy?" — one flagged step and one clear step,
 *   never a ramp. (It began as a sequential blue ramp; a ramp answers "how big
 *   is this?", which the numbers in the cells already say.)
 *
 *   Red against LIBRA blue rather than red against green: a red/green pair is
 *   the classic colourblind trap. These two fills differ in hue but barely in
 *   lightness, so colour is never the only channel — a flagged cell also
 *   carries a "!" glyph, a left accent rule, and the percentage as text.
 *   Every text/fill pair here was measured at or above 4.5:1.
 *
 *   The trend uses CATEGORICAL slots 1-3 (blue, orange, aqua) for identity.
 *   Validated as an adjacent set: worst CVD ΔE 9.2 (deuteranopia), worst
 *   normal-vision ΔE 27.6. Aqua is 2.82:1 on white, under the 3:1 mark, so this
 *   page ships the relief the palette requires — a legend, direct end labels
 *   and a table view.
 *
 * Series colour belongs to the metric, not to its rank, so switching dataset
 * never repaints a metric the reader has already learned.
 */
:root{
  --status-ok-bg:#dbe9fb;
  --status-ok-ink:#14213d;
  --status-flagged-bg:#fbe3e3;
  --status-flagged-ink:#8d2b29;
  --status-flagged-edge:#d03b3b;
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --series-3:#1baf7a;
}

.section-label{
  font-family:var(--font-heading);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin-bottom:8px;
}

/* ── Dataset picker ── */
.pick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:18px}
.pick-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-soft);transition:border-color .15s,box-shadow .15s,transform .1s;
}
.pick-card:hover{border-color:#c8d2de;transform:translateY(-2px)}
.pick-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* The selected card is marked by weight and a left rule, not by a fill — a
   filled card competes with the charts it is scoping. */
.pick-card.active{border-color:var(--navy-dark);box-shadow:inset 3px 0 0 var(--navy-dark),var(--shadow-soft)}
.pick-card-tag{
  display:inline-flex;align-items:center;justify-content:center;min-width:52px;
  padding:5px 8px;border-radius:7px;font-family:var(--font-heading);
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  background:var(--surface-alt);color:var(--muted);border:1px solid var(--line);
}
.pick-card.active .pick-card-tag{background:var(--navy-dark);color:#fff;border-color:var(--navy-dark)}
.pick-card-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.pick-card-title{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--navy-dark)}
.pick-card-desc{font-size:12.5px;color:var(--muted);line-height:1.35}
.pick-card-figure{margin-left:auto;text-align:right;flex:0 0 auto}
/* Proportional figures, not tabular: equal-width digits make a standalone
   number look loose at this size. */
.pick-card-value{
  display:block;font-family:var(--font-heading);font-size:24px;font-weight:800;
  color:var(--navy-dark);line-height:1.1;
}
.pick-card-label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-top:2px}

/* ── Per-card filters ──
   Each control sits on the card it scopes: the week on the grid, the project on
   the trend. (The general dashboard rule is one filter row above everything —
   it applies when a control scopes every panel, which these do not.) */
.card-filter{display:flex;align-items:flex-end;gap:8px}
.filter-inline{display:flex;align-items:center;gap:7px}
.filter-inline .filter-label{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);white-space:nowrap;
}
.filter-inline select{min-width:200px;padding:6px 8px;font-size:13px}
.card-filter .btn{padding:6px 12px;font-size:12.5px}

/* ── Week grid (status) ── */
/* Sizes to the card: full width, metric columns share the remainder evenly. */
table.grid.heat{width:100%;min-width:0;table-layout:fixed}
table.grid.heat th.num,table.grid.heat td.heat-cell{width:auto}
table.grid.heat th.num .col-metric-label{display:block}
table.grid.heat th.num .col-updated-stamp{
  display:block;font-size:10.5px;font-weight:600;color:var(--muted);
  margin-top:3px;line-height:1.35;
}
table.grid.heat th.num .col-updated-label{
  display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;opacity:.85;
}
table.grid.heat th.num .col-updated-date{font-variant-numeric:tabular-nums}
table.grid.heat th:first-child,table.grid.heat td:first-child{width:22%}
table.grid.heat td.heat-cell{
  text-align:right;font-weight:700;cursor:default;
  transition:filter .12s;vertical-align:top;
}
table.grid.heat td.heat-cell .cell-value,
table.grid.heat td.heat-cell .cell-ratio{white-space:nowrap}
table.grid.heat tbody td.heat-cell .cell-value{font-size:18px}
table.grid.heat tfoot td.heat-cell .cell-value{
  font-size:16px;font-weight:800;
}
table.grid.heat td.heat-cell .cell-updated-stamp{
  display:block;font-size:10px;font-weight:600;color:var(--muted);
  opacity:.88;margin-top:3px;line-height:1.35;
}
table.grid.heat td.heat-cell .cell-updated-date{
  display:block;font-variant-numeric:tabular-nums;
}
table.grid.heat td.heat-cell .cell-updated-relative{
  display:block;font-size:9.5px;opacity:.85;
}
table.grid.heat tbody tr:hover{background:transparent}
/* A filter, not a colour change — the cell's colour is data. */
table.grid.heat td.heat-cell:hover,
table.grid.heat td.heat-cell:focus-visible{filter:brightness(.97);outline:2px solid var(--focus);outline-offset:-2px}
table.grid.heat tr.highlighted td{box-shadow:inset 0 1px 0 var(--navy-dark),inset 0 -1px 0 var(--navy-dark)}
table.grid.heat .mono{font-variant-numeric:tabular-nums;color:var(--body-c)}
table.grid.heat .w-leader{display:flex;align-items:center;justify-content:flex-start;gap:8px;white-space:nowrap;text-align:left}
table.grid.heat .w-leader .leader-name{font-weight:700;font-size:14px;color:var(--navy-dark);text-align:left}
/* The form, not the button, is now the flex item pushed to the right — the
   button sits inside it so the send is a POST. */
table.grid.heat .w-leader .mail-form{margin-left:auto;display:flex;flex:0 0 auto}
table.grid.heat .w-leader .btn.icon-only{padding:5px;flex:0 0 auto}
table.grid.heat .w-leader .btn.icon-only .ico{width:16px;height:16px}
/* Disabled means "no address on file" or "nothing to report" — legible as
   unavailable without going invisible, since the title explains which. */
table.grid.heat .w-leader .btn.icon-only:disabled{opacity:.35;cursor:not-allowed}
table.grid.heat .w-leader .mail-stamp{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
table.grid.heat .w-leader .mail-stamp.is-flagged{color:var(--status-flagged-ink);font-weight:700}
table.grid.heat .w-leader .mail-stamp.is-neutral{color:var(--muted);font-style:italic}
table.grid.heat .w-stand{white-space:nowrap}
table.grid.heat .w-stand .row-stamp{display:block;font-weight:700;color:var(--navy-dark);font-size:13px}
table.grid.heat .w-stand .cell-stamp{text-align:left;margin-top:1px}

.cell-value{display:block;font-variant-numeric:tabular-nums;font-size:14px}
.cell-ratio{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;opacity:.72;margin-top:1px;
}
.cell-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-right:4px;border-radius:50%;
  background:var(--status-flagged-edge);color:#fff;font-size:10px;font-weight:800;
  line-height:1;vertical-align:1px;
}

/* base = the first column, nothing to its left to judge it against.
   unknown = a ratio that cannot be computed (no reading, or a zero base). */
td.status-base{background:var(--surface-alt);color:var(--ink)}
td.status-unknown{background:var(--white);color:var(--muted)}
td.status-ok{background:var(--status-ok-bg);color:var(--status-ok-ink)}
td.status-flagged{
  background:var(--status-flagged-bg);color:var(--status-flagged-ink);
  box-shadow:inset 3px 0 0 var(--status-flagged-edge);
}
td.status-missing{background:var(--white);color:var(--border);font-weight:400}

.status-swatch{
  width:22px;height:16px;border-radius:3px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid rgba(14,23,42,.10);font-size:10px;font-weight:800;
}
.status-swatch.is-ok{background:var(--status-ok-bg)}
.status-swatch.is-flagged{background:var(--status-flagged-bg);color:#fff;
  box-shadow:inset 3px 0 0 var(--status-flagged-edge)}
.status-swatch.is-flagged{color:var(--status-flagged-ink)}
.status-swatch.is-base{background:var(--surface-alt)}
.status-swatch.is-neutral{background:var(--surface-alt);color:var(--muted);font-weight:600}
.status-swatch.is-missing{background:var(--white);color:var(--border)}

/* ── Reporting overview: the page in three sentences ── */
.overview-card .body{display:flex;flex-direction:column;gap:8px}
.overview-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);line-height:1.4}
.overview-line .status-swatch{flex:0 0 auto}

.scale-legend{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-alt);
}
.scale{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.scale-key{display:inline-flex;align-items:center;gap:5px;margin-left:10px}

/* Status chips in a card header. Tinted, not saturated — a header badge should
   report the state, not compete with the grid it summarises. */
.chip.is-flagged{background:var(--status-flagged-bg);border-color:rgba(208,59,59,.3);color:var(--status-flagged-ink)}
.chip.is-ok{background:var(--status-ok-bg);border-color:rgba(20,33,61,.18);color:var(--status-ok-ink)}

/* ── Trend chart ── */
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--body-c)}
/* Lines get a line key, mirroring the mark they identify. */
.legend-key{width:16px;height:3px;border-radius:2px;flex:0 0 auto;background:currentColor}
.legend-item .series-1{color:var(--series-1)}
.legend-item .series-2{color:var(--series-2)}
.legend-item .series-3{color:var(--series-3)}

.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.chart:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}

.chart-grid line{stroke:var(--line);stroke-width:1}
.chart-tick{font-family:var(--font-body);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* The 2px surface ring keeps a dot legible where lines cross. */
.chart-dot{stroke:var(--white);stroke-width:2}
/* Text wears text tokens — a light hue like aqua is illegible as a label. */
.chart-end-label{font-family:var(--font-heading);font-size:11.5px;font-weight:700;
  fill:var(--ink);font-variant-numeric:tabular-nums}
.chart-crosshair{stroke:var(--muted);stroke-width:1;opacity:0;pointer-events:none;transition:opacity .1s}
.chart-crosshair.visible{opacity:.5}

g.series-1 .chart-line{stroke:var(--series-1)}
g.series-1 .chart-dot{fill:var(--series-1)}
g.series-2 .chart-line{stroke:var(--series-2)}
g.series-2 .chart-dot{fill:var(--series-2)}
g.series-3 .chart-line{stroke:var(--series-3)}
g.series-3 .chart-dot{fill:var(--series-3)}

.chart-tooltip{
  position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--navy-deep);color:#fff;border-radius:8px;padding:8px 10px;
  font-size:12px;line-height:1.45;box-shadow:0 8px 20px -6px rgba(8,15,29,.5);
  opacity:0;transition:opacity .1s;z-index:70;white-space:nowrap;
  display:flex;flex-direction:column;gap:3px;
}
.chart-tooltip.visible{opacity:1}
.chart-tooltip .tip-head{font-weight:700;color:rgba(255,255,255,.7);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em}
/* Values lead, names follow — here the reader has the series and wants the number. */
.chart-tooltip .tip-row{display:flex;align-items:center;gap:7px}
.chart-tooltip .tip-row strong{font-variant-numeric:tabular-nums;font-size:13px}
.chart-tooltip .tip-name{color:rgba(255,255,255,.72);font-size:11.5px}
.chart-tooltip .tip-key{width:12px;height:3px;border-radius:2px;flex:0 0 auto;background:currentColor}
.chart-tooltip .tip-key.series-1{color:var(--series-1)}
.chart-tooltip .tip-key.series-2{color:var(--series-2)}
.chart-tooltip .tip-key.series-3{color:var(--series-3)}
.chart-tooltip strong{color:#fff}

@media (max-width:560px){
  .pick-card-value{font-size:20px}
  .filter,.filter select{min-width:100%}
  .scale-legend{padding:12px 14px}
}

/* ── PM login (not Django admin) ─────────────────────────────────────────── */
.login-page{
  min-height:100vh;color:#fff;background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
}
.login-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(197,155,78,.14), transparent 58%),
    linear-gradient(165deg, #060a14 0%, var(--navy-deep) 42%, var(--navy-dark) 100%);
}
.login-bg-orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  animation:loginOrb 18s ease-in-out infinite alternate;
}
.login-bg-orb-a{
  width:min(520px, 70vw);height:min(520px, 70vw);
  top:-12%;left:-8%;background:rgba(197,155,78,.22);
}
.login-bg-orb-b{
  width:min(420px, 55vw);height:min(420px, 55vw);
  bottom:-18%;right:-6%;background:rgba(30,47,82,.85);
  animation-delay:-6s;
}
@keyframes loginOrb{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(24px,-18px) scale(1.06)}
}
.login-bg-grid{
  position:absolute;inset:0;opacity:.22;
  background-image:
    linear-gradient(rgba(197,155,78,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,155,78,.08) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 72%);
}
.login-bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, rgba(4,8,16,.82) 100%);
}
.login-shell{
  position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:clamp(16px,3vw,28px) clamp(16px,4vw,40px) 24px;
}
.login-top{
  width:100%;max-width:920px;display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:clamp(20px,4vh,36px);
}
.login-stage{
  flex:1;display:flex;align-items:center;justify-content:center;width:100%;
}
.login-card{
  width:100%;max-width:920px;display:grid;grid-template-columns:minmax(280px, 1fr) minmax(320px, 1.05fr);
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(197,155,78,.24);
  box-shadow:
    0 28px 60px -24px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px -20px rgba(197,155,78,.18);
}
.login-brand{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 120% 90% at 20% 0%, rgba(197,155,78,.18), transparent 55%),
    linear-gradient(160deg, #0a1224 0%, var(--navy-dark) 55%, #101e38 100%);
  border-right:1px solid rgba(197,155,78,.18);
  padding:clamp(28px,5vw,44px) clamp(24px,4vw,36px);
  display:flex;align-items:center;justify-content:center;
}
.login-brand-inner{
  position:relative;z-index:1;text-align:center;max-width:320px;
}
.login-logo-wrap{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.login-logo-halo{
  position:absolute;inset:-18px -24px;border-radius:999px;
  background:radial-gradient(circle, rgba(197,155,78,.28) 0%, transparent 68%);
  filter:blur(8px);
}
.login-logo{
  position:relative;height:clamp(44px, 8vw, 58px);width:auto;display:block;
  filter:drop-shadow(0 0 22px rgba(197,155,78,.45));
}
.login-wordmark{
  font-family:var(--font-heading);font-size:clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  margin-bottom:14px;
}
.login-rule{
  display:block;width:56px;height:2px;margin:0 auto 14px;border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow:0 0 16px rgba(197,155,78,.55);
}
.login-suite{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:12px;
}
.login-brand-desc{
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.68);max-width:28ch;margin:0 auto;
}
.login-brand-accent{
  position:absolute;right:-40px;bottom:-40px;width:min(280px, 70%);height:auto;
  color:var(--gold);opacity:.16;pointer-events:none;
}
.login-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  color:var(--ink);padding:clamp(28px,5vw,44px) clamp(24px,4vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}
.login-panel-head{margin-bottom:24px}
.login-panel h1{
  font-family:var(--font-heading);font-size:clamp(1.55rem, 2.8vw, 2rem);
  letter-spacing:-.03em;color:var(--navy-dark);margin-bottom:8px;
}
.login-sub{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:36ch}
.login-form{display:flex;flex-direction:column;gap:18px}
.login-form .field{display:flex;flex-direction:column;gap:7px}
.login-form .field > span{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.login-form input{
  width:100%;padding:13px 14px;border:1px solid #cfd8e3;border-radius:10px;
  font:inherit;background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.login-form input::placeholder{color:#94a3b8}
.login-form input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,155,78,.22);
}
.login-form input.invalid{border-color:var(--err);background:var(--err-tint)}
.login-form .field-error{font-size:12px;color:var(--err);font-weight:600}
.login-error{margin-bottom:18px}
.login-submit{
  width:100%;justify-content:center;padding:14px 18px;margin-top:6px;
  border:1px solid var(--gold-dark);border-radius:10px;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 52%, var(--gold-dark) 100%);
  color:var(--navy-deep);font-family:var(--font-heading);font-weight:800;letter-spacing:.04em;
  box-shadow:0 10px 24px -12px rgba(197,155,78,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s, box-shadow .15s, filter .15s;
}
.login-submit:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 28px -12px rgba(197,155,78,.75), inset 0 1px 0 rgba(255,255,255,.4);
  color:var(--navy-deep);
}
.login-submit:active{transform:translateY(1px)}
.login-foot{
  margin-top:clamp(20px,4vh,32px);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42);text-align:center;
}
.login-page .lang-select{
  border:1px solid rgba(197,155,78,.28);background:rgba(255,255,255,.06);color:#fff;
  padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;
  backdrop-filter:blur(6px);
}
.login-page .lang-select:hover{background:rgba(255,255,255,.12);border-color:rgba(197,155,78,.45)}
.login-page .lang-select option{color:var(--ink);background:#fff}
@media (max-width:820px){
  .login-card{grid-template-columns:1fr;max-width:460px}
  .login-brand{
    border-right:0;border-bottom:1px solid rgba(197,155,78,.18);
    padding:28px 24px 24px;
  }
  .login-brand-desc{max-width:none}
  .login-brand-accent{width:220px;right:-60px;bottom:-70px;opacity:.12}
  .login-panel{padding:28px 24px 32px}
}
@media (prefers-reduced-motion:reduce){
  .login-bg-orb{animation:none}
}
.side-logout{
  display:block;margin-top:6px;padding:0;border:0;background:none;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.55);cursor:pointer;
  transition:color .15s;
}
.side-logout:hover{color:var(--gold-light)}