/* FILEVIA BLUE UI (fr71) — implements Latriece's own HTML,
   FILEVIA_Blue_Dashboard_Preview: Black / Electric Blue / White.
   Her stylesheet values are the source: --blue #008cff, dark
   #03060d, page #eef3fa, border #d6e1ee, Georgia display type,
   Inter body. Presentation only; deleting this file restores the
   previous look exactly. Layout mechanics: the dashboard's own
   sidebar becomes the full-height dark rail at 1024px and up, the
   shell header becomes the dark strip, standalone pages rail their
   header the same way. Phones keep the app's current chrome. */

:root {
  --blue: #008cff;
  --bright: #00c8ff;
  --x-dark: #03060d;
  --x-ink: #0d1a2a;
  --x-border: #d6e1ee;
  --x-navy: #081b2b;
  --x-navy2: #102b3c;
  --x-navy3: #174b55;
  --x-teal: #087d79;
  --x-teal-hi: #14b8a6;
  --x-teal-glow: #3ed3c2;
  --x-teal-light: #e1f3ff;
  --x-paper: #eef3fa;
  --x-muted: #526b83;
  --x-line: #d6e1ee;
  --x-green: #0b7650;
  --x-green-bg: #dff8ed;
  --x-red: #b3372f;
  --x-red-bg: #fbeae8;
  --x-amber: #986100;
  --x-amber-bg: #fff0d0;
  --x-blue: #0085e7;
  --x-blue-bg: #dff2ff;
  --x-radius: 15px;
  --x-shadow: 0 5px 16px rgba(17, 54, 91, .05);
  --x-rail: 254px;
  --x-serif: Georgia, 'Times New Roman', serif;
}

html:not([data-theme="dark"]) {
  --accent: #008cff;
  --card: #ffffff;
  --panel: #ffffff;
  --paper: #eef3fa;
  --ink: #0d1a2a;
  --text: #0d1a2a;
  --muted: #526b83;
  --line: #d6e1ee;
  --bad: #b3372f;
  --warn: #986100;
}
html:not([data-theme="dark"]) body { background: var(--x-paper); color: var(--x-ink); font-family: Inter, 'Segoe UI', Arial, sans-serif; }

/* ---------- Headers: dark identity everywhere ---------- */
header.topbar.appnav {
  background: linear-gradient(110deg, #03060d, #09172d);
  color: #fff;
  border-bottom: 2px solid #007fe5;
}
header.topbar.appnav .brandmark { color: #fff; }
header.topbar.appnav .brandmark span { color: var(--bright); }
@media (max-width: 1023.98px) {
  header.topbar.appnav .navdrop {
    background: #fff; border: 1px solid var(--x-border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 30, 74, .18);
  }
}

/* ---------- Standalone pages: header becomes the rail (wide) --- */
@media (min-width: 1024px) {
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) {
    position: fixed; inset: 0 auto 0 0; width: var(--x-rail); height: 100dvh;
    z-index: 1300; display: flex; flex-direction: column; align-items: stretch;
    gap: 18px; padding: 22px 16px 18px; overflow-y: auto;
    background: linear-gradient(155deg, #010307, #071329 70%, #02060d);
    border-bottom: none; box-shadow: 4px 0 24px rgba(0, 30, 74, .2);
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .mainnav {
    display: flex; flex-direction: column; gap: 4px; margin: 0;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu { position: static; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu > summary {
    display: block; list-style: none; cursor: pointer;
    border-radius: 9px; padding: 11px 13px; color: #c5d5ea; font-weight: 650;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu > summary::-webkit-details-marker { display: none; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu[open] > summary {
    background: linear-gradient(110deg, #075cb4, #009bff); color: #fff;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navdrop {
    position: static; display: flex; flex-direction: column; gap: 2px;
    background: rgba(255, 255, 255, .05); border: none; border-radius: 9px;
    box-shadow: none; padding: 6px; margin: 2px 0 6px; min-width: 0;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navdrop button,
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navdrop a {
    display: block; text-align: left; width: 100%; background: none; border: none;
    border-radius: 7px; padding: 8px 10px; color: #c5d5ea; font: inherit;
    text-decoration: none; cursor: pointer;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navdrop button:hover,
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navdrop a:hover { background: #0e2849; color: #fff; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .topright {
    margin: auto 0 0; border: 1px solid #1766a7; border-radius: 12px;
    background: #071d36; padding: 12px; display: flex; flex-direction: column;
    align-items: flex-start; gap: 8px; color: #d7eaff;
  }
  body:not(:has(#shell)):has(header.topbar.appnav nav.mainnav) { padding-left: var(--x-rail); }
}

/* ---------- Main shell: strip + dashboard rail (wide) ---------- */
@media (min-width: 1024px) {
  #shell:not(.hidden) header.topbar.appnav {
    position: fixed; top: 0; left: var(--x-rail); right: 0; height: 58px;
    z-index: 1200; display: flex; align-items: center; gap: 14px; padding: 8px 18px;
  }
  #shell:not(.hidden) header.topbar.appnav .brandmark,
  #shell:not(.hidden) header.topbar.appnav .mainnav { display: none; }
  #shell:not(.hidden) header.topbar.appnav .topright { margin-left: auto; }
  #dashView { padding-left: var(--x-rail); padding-top: 58px; }
  .dashmenubtn { display: none; }
  .dashwrap { display: block; }
  nav.dashnav {
    position: fixed; left: 0; top: 0; width: var(--x-rail); height: 100dvh;
    z-index: 1250; display: flex; flex-direction: column; gap: 5px;
    padding: 20px 13px 16px; overflow-y: auto;
    background: linear-gradient(155deg, #010307, #071329 70%, #02060d);
    box-shadow: 4px 0 24px rgba(0, 30, 74, .2);
  }
  nav.dashnav .dashnavbtn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: transparent; border: 0; border-radius: 9px; cursor: pointer;
    padding: 12px 13px; color: #c5d5ea; font: inherit; font-size: 13px;
    font-weight: 650; text-align: left;
  }
  nav.dashnav .dashnavbtn:hover { background: #0e2849; color: #fff; }
  nav.dashnav .dashnavbtn.on {
    background: linear-gradient(110deg, #075cb4, #009bff); color: #fff;
    box-shadow: inset 0 1px #73caff, 0 5px 15px rgba(0, 140, 255, .19);
  }
  .xglyph { width: 23px; font-size: 18px; text-align: center; flex: 0 0 auto; }
  .xbrand { padding: 4px 7px 20px; border-bottom: 1px solid #23466a; margin-bottom: 15px; }
  .xbrand img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 9px rgba(0, 140, 255, .27)); }
  .xsidefoot {
    margin-top: auto; border: 1px solid #1766a7; border-radius: 12px;
    padding: 14px; color: #d7eaff; background: #071d36; font-size: 13px;
  }
  .xsidefoot small { display: block; color: #83a8c9; margin-top: 3px; }
}

/* ---------- Components ---------- */
.panel, .card, .authcard, .note, .queue-card, section.card { border-radius: var(--x-radius); }
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .authcard,
html:not([data-theme="dark"]) .note,
html:not([data-theme="dark"]) .queue-card,
html:not([data-theme="dark"]) .stat {
  background: linear-gradient(160deg, #fff, #f9fbff);
  border: 1px solid var(--x-border); box-shadow: var(--x-shadow);
}
html:not([data-theme="dark"]) .stat b { color: var(--x-ink); font-family: var(--x-serif); font-size: 1.8em; }
html:not([data-theme="dark"]) h2, html:not([data-theme="dark"]) h3 { color: var(--x-ink); }
html:not([data-theme="dark"]) .mini, html:not([data-theme="dark"]) .meta { color: var(--x-muted); }
.btn {
  border: 0; border-radius: 9px; padding: 11px 17px; font-weight: 750;
  background: linear-gradient(110deg, #0450a8, #009dff); color: #fff;
  box-shadow: 0 5px 15px rgba(0, 107, 227, .17); cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary, button.secondary {
  background: #fff; border: 1px solid #94b8d5; color: #034d8f;
  box-shadow: none; font-weight: 750;
}
.btn.danger { background: #fff; border: 1px solid var(--x-red); color: var(--x-red); box-shadow: none; }
html[data-theme="dark"] .btn { border-radius: 9px; }
html:not([data-theme="dark"]) input, html:not([data-theme="dark"]) select, html:not([data-theme="dark"]) textarea {
  border: 1px solid var(--x-border); border-radius: 9px; background: #fff; color: var(--x-ink);
}
html:not([data-theme="dark"]) input:focus, html:not([data-theme="dark"]) select:focus, html:not([data-theme="dark"]) textarea:focus {
  outline: 3px solid rgba(0, 140, 255, .35); border-color: var(--blue);
}
html:not([data-theme="dark"]) th { background: #061c37; color: #fff; text-align: left; padding: 10px; }
html:not([data-theme="dark"]) td { border-bottom: 1px solid #e0e8f0; }
.badge, .xtag {
  display: inline-block; border-radius: 20px; padding: 4px 9px;
  background: #dff2ff; color: #005dba; font-size: 10px; font-weight: 750;
}
.xtag.green, .badge.green { background: #dff8ed; color: #0b7650; }
.xtag.gold, .badge.gold { background: #fff0d0; color: #986100; }
.xtag.red, .badge.red { background: #fbeae8; color: #b3372f; }
html:not([data-theme="dark"]) .success, html:not([data-theme="dark"]) .ok { color: var(--x-green); }
html:not([data-theme="dark"]) .err, html:not([data-theme="dark"]) .error { color: var(--x-red); }
html:not([data-theme="dark"]) .qc-returned, html:not([data-theme="dark"]) .queue-card.qc-returned { background: var(--x-red-bg); border-color: var(--x-red); }
html:not([data-theme="dark"]) .attention-group { background: var(--x-amber-bg); }
html:not([data-theme="dark"]) .status-option { border-radius: 9px; }
html:not([data-theme="dark"]) .sticky-actions { background: rgba(255, 255, 255, .92); border-top: 1px solid var(--x-border); backdrop-filter: blur(6px); }

/* ---------- Overview compositions (hers) ---------- */
.xov { margin-bottom: 14px; }
.xintro { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.xintro h2 { font-family: var(--x-serif); font-size: 29px; margin: 0; color: #071324; }
.xintro h2 em { font-style: normal; color: #006bd3; }
.xintro p { color: var(--x-muted); margin: 4px 0 0; font-size: 13px; }
.xmetrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.xmetric {
  background: linear-gradient(160deg, #fff, #f9fbff); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 18px; box-shadow: var(--x-shadow); min-width: 0;
}
.xsymbol {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: #e1f3ff; color: #006cd0; font-size: 23px; margin-bottom: 10px;
}
.xlabel { font-size: 12px; font-weight: 750; }
.xnumber { font: 800 32px var(--x-serif); margin: 4px 0 8px; }
.xgrid2 { display: grid; grid-template-columns: 1.22fr 1fr; gap: 14px; margin-top: 14px; }
.xgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.xcard {
  background: linear-gradient(160deg, #fff, #f9fbff); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 18px; box-shadow: var(--x-shadow); min-width: 0;
}
.xpanelhead { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 14px; }
.xpanelhead h3, .xcard h3 { font: 700 19px var(--x-serif); margin: 0 0 4px; color: var(--x-ink); }
.xoutline {
  background: #fff; border: 1px solid #94b8d5; border-radius: 8px; padding: 8px 11px;
  font-size: 11px; color: #034d8f; font-weight: 750; cursor: pointer; white-space: nowrap;
}
.xoutline:hover { border-color: var(--blue); background: #eaf6ff; }
.xchart { display: flex; align-items: center; gap: 21px; justify-content: center; padding: 10px 0; }
.xdonut { width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.xhole {
  width: 112px; height: 112px; background: #fff; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.xhole strong { font-size: 29px; font-family: var(--x-serif); }
.xhole small { font-size: 11px; color: var(--x-muted); }
.xlegend { flex: 1; min-width: 150px; }
.xlegend > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e1e9f1; padding: 8px 0; font-size: 11px; }
.xdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.xrowbtn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  text-align: left; background: #f5f9ff; border: 1px solid #d8e5f1; border-radius: 8px;
  padding: 11px; margin-top: 7px; font-size: 12px; font-weight: 650; color: #123456; cursor: pointer;
}
.xrowbtn:hover { border-color: var(--blue); background: #eaf6ff; }
.tablewrap { overflow-x: auto; }

/* Agency Owner composition (fr51) in the blue system */
.xhero {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(110deg, #03060d, #0a2c52 75%, #0450a8 125%);
  color: #fff; border-radius: var(--x-radius); padding: 20px 22px; margin-bottom: 14px;
  box-shadow: var(--x-shadow);
}
.xhero-ic {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 12px; flex: 0 0 auto;
  border: 1.5px solid rgba(0, 200, 255, .6); color: var(--bright);
  background: rgba(255, 255, 255, .06);
}
.xhero-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body .xhero h3 { color: #fff; margin: 0; font-size: 24px; font-family: var(--x-serif); }
.xhero p { margin: 2px 0 0; letter-spacing: 2.4px; font-size: 11px; color: #a9d6f5; }
.xhero-seat { margin-left: auto; color: #c5d5ea; font-size: 12.5px; text-align: right; }
.xstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.xstat {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(160deg, #fff, #f9fbff); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); box-shadow: var(--x-shadow); padding: 15px 16px;
}
.xstat-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.xstat-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tone-a { background: #e1f3ff; color: #006cd0; }
.tone-g { background: var(--x-green-bg); color: var(--x-green); }
.tone-w { background: var(--x-amber-bg); color: var(--x-amber); }
.tone-p { background: #efe9fb; color: #6a4bc4; }
.xstat span { display: block; font-size: 12.5px; color: var(--x-muted); font-weight: 600; }
.xstat b { display: block; font-size: 26px; line-height: 1.1; color: var(--x-ink); font-family: var(--x-serif); }
.xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.xcard h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: var(--x-ink); font-size: 16.5px; }
.xcard .xicon { display: inline-flex; color: #006cd0; }
.xcard .xicon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.xbar { height: 10px; border-radius: 99px; background: #dbe7f3; overflow: hidden; margin: 10px 0 12px; }
.xbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0450a8, #009dff); }
.xgoal { display: flex; align-items: center; gap: 18px; }
.xgoal-main { flex: 1; min-width: 0; }
.xgoal-nums { display: flex; gap: 0; }
.xgoal-nums > div { flex: 1; text-align: center; }
.xgoal-nums > div + div { border-left: 1px solid var(--x-border); }
.xgoal-nums span { display: block; font-size: 11.5px; color: var(--x-muted); }
.xgoal-nums b { font-size: 20px; color: var(--x-ink); font-family: var(--x-serif); }
.xring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.xring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.xring-bg { fill: none; stroke: #dbe7f3; stroke-width: 9; }
.xring-on { fill: none; stroke: #009dff; stroke-width: 9; stroke-linecap: round; }
.xring-t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.xring-t b { font-size: 19px; color: var(--x-ink); font-family: var(--x-serif); }
.xring-t span { font-size: 7.5px; letter-spacing: 1px; color: var(--x-muted); }
.xactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xaction {
  background: linear-gradient(110deg, #0450a8, #009dff); color: #fff; border: none;
  border-radius: 9px; padding: 13px 12px; font: inherit; font-weight: 750; cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 107, 227, .17);
}
.xaction:hover { filter: brightness(1.08); }
.xrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid #e1e9f1;
}
.xrow:last-of-type { border-bottom: none; }
.xtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.xtile {
  background: #f5f9ff; border: 1px solid #d8e5f1; border-radius: 11px;
  padding: 13px 6px; font: inherit; font-weight: 650; color: #123456;
  text-align: center; cursor: pointer; text-decoration: none; display: block;
}
.xtile:hover { border-color: var(--blue); background: #eaf6ff; }
.xnext { border: 1.5px solid rgba(0, 140, 255, .55); }
html[data-theme="dark"] .xcard, html[data-theme="dark"] .xmetric, html[data-theme="dark"] .xstat {
  background: var(--card); border-color: var(--line);
}
html[data-theme="dark"] .xnumber, html[data-theme="dark"] .xstat b,
html[data-theme="dark"] .xpanelhead h3, html[data-theme="dark"] .xcard h3,
html[data-theme="dark"] .xcard h4, html[data-theme="dark"] .xintro h2,
html[data-theme="dark"] .xhole strong, html[data-theme="dark"] .xgoal-nums b, html[data-theme="dark"] .xring-t b { color: var(--ink); }
html[data-theme="dark"] .xhole { background: var(--card); }
@media (max-width: 1120px) {
  .xmetrics { grid-template-columns: repeat(3, 1fr); }
  .xgrid2, .xgrid3 { grid-template-columns: 1fr; }
}
@media (max-width: 690px) {
  .xmetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .xnumber { font-size: 26px; }
  .xintro { align-items: start; flex-direction: column; }
  .xchart { flex-wrap: wrap; justify-content: start; }
  .xhero { flex-wrap: wrap; }
  .xhero-seat { margin-left: 0; text-align: left; }
  .xtiles { grid-template-columns: 1fr 1fr; }
  .xgoal { flex-direction: column; align-items: stretch; }
  .xring { align-self: center; }
}

/* ---------- Width (fr53, her ask: widen the screen) ----------
   The base stylesheet caps main at 980px, which left the blue
   design in a narrow centered column. In the signed-in shell,
   every page now runs wide: 1600px cap, fluid below it. The
   landing and sign-in screens keep the 980 reading column. */
body.shellmode main { max-width: 1600px; }
@media (min-width: 1024px) {
  body.shellmode main { padding-left: 28px; padding-right: 28px; }
}

/* ---------- Redesign set (fr54, from her Claude mocks) ---------- */
.xng {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #7d94b3; padding: 13px 13px 4px;
}
.xcnt {
  margin-left: auto; background: #14365e; color: #cfd3da; font-size: 11px;
  font-weight: 700; border-radius: 999px; padding: 1px 8px;
}
.dashnavbtn .xic { width: 18px; height: 18px; flex: 0 0 auto; }
.dashnavbtn { align-items: center; }
@media (max-width: 1023.98px) {
  .dashnavbtn .xic { width: 16px; height: 16px; }
  .xng { color: var(--x-muted); padding: 10px 4px 2px; }
  .xcnt { background: #e1f3ff; color: #005dba; }
}
.xcrumb {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9aa1ad;
  white-space: nowrap; overflow: hidden;
}
.xcrumb span { opacity: .6; }
.xcrumb b { color: #fff; }
@media (max-width: 1023.98px) { .xcrumb { display: none; } }
.xfoot {
  text-align: center; font-size: 12px; color: var(--x-muted); padding: 26px 10px 6px;
}
.xfoot a { color: #005dba; }
.xplatwrap { margin-top: 14px; }
.xminis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.xminis > div { background: #f5f9ff; border: 1px solid #d8e5f1; border-radius: 11px; padding: 12px; }
.xminis b { display: block; font: 800 24px var(--x-serif); color: var(--x-ink); }
.xminis span { font-size: 11.5px; color: var(--x-muted); font-weight: 600; }
.xprow { display: flex; align-items: center; gap: 10px; min-width: 120px; }
.xbar2 { height: 8px; background: #dbe7f3; border-radius: 999px; overflow: hidden; flex: 1; }
.xbar2 i { display: block; height: 100%; background: linear-gradient(90deg, #0450a8, #009dff); border-radius: 999px; }
.xlist { display: flex; flex-direction: column; }
.xli {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-top: 1px solid #e1e9f1;
}
.xli:first-child { border-top: none; }
.xsdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.xsdot.ok { background: #22a06b; }
.xsdot.off { background: #d8a021; }
.xlt { flex: 1; min-width: 0; }
.xlt b { display: block; font-size: 13.5px; }
.xlt span { font-size: 12px; color: var(--x-muted); }
.xcardfoot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.xsteps { display: flex; flex-direction: column; }
.xst {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-top: 1px solid #e1e9f1;
}
.xst:first-child { border-top: none; }
.xsc {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
}
.xsc.done { background: #dff8ed; color: #0b7650; }
.xsc.todo { background: #e1f3ff; color: #006cd0; }
.xstx { flex: 1; min-width: 0; }
.xstx b { display: block; font-size: 13.5px; }
.xstx span { font-size: 12px; color: var(--x-muted); }
html[data-theme="dark"] .xminis > div { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .xminis b { color: var(--ink); }
@media (max-width: 900px) { .xminis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Section treatment (fr55, her direction) ----------
   Every section gets a black 1pt box and room to breathe. */
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) section.card,
html:not([data-theme="dark"]) .queue-card,
html:not([data-theme="dark"]) .xcard,
html:not([data-theme="dark"]) .xmetric,
html:not([data-theme="dark"]) .xstat,
html:not([data-theme="dark"]) .stat,
html:not([data-theme="dark"]) .authcard {
  border: 1pt solid #000;
}
.panel { padding: 24px; }
.xcard { padding: 24px; }
.dashpage > * + * { margin-top: 22px; }
.xov { margin-bottom: 22px; }
.xgrid2, .xgrid3 { gap: 22px; margin-top: 22px; }
.xmetrics { gap: 16px; }
.xstats { gap: 16px; margin-bottom: 16px; }
.xgrid { gap: 16px; }
.xplatwrap { margin-top: 22px; }
.statgrid { gap: 16px; }

/* ---------- Agencies page (fr56) ---------- */
.xaghead { display: flex; align-items: flex-start; gap: 14px; }
.xagtitle { flex: 1; min-width: 0; }
.xagtitle h3 { margin: 2px 0 4px; font: 700 20px var(--x-serif); color: var(--x-ink); }
.xagactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.xagency .inlineform { margin-top: 12px; }
.xagency > .mini { margin-top: 10px; }
@media (max-width: 690px) { .xaghead { flex-wrap: wrap; } }

/* ---------- Screenshot fixes (fr57) ---------- */
/* The VIEWING AS chip: clear the fixed strip, never widen the page. */
@media (min-width: 1024px) {
  #viewAsBar { padding-top: 76px; }
}
#viewAsBar .va-chip { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
@media (max-width: 700px) { #viewAsBar .va-chip { font-size: 1.05rem; } }
/* Quick Actions: buttons keep their natural height. */
.xactions { align-content: start; grid-auto-rows: max-content; }
.xaction { height: auto; align-self: start; }
/* Resource tiles (her direction, Nov 9, 2026): words stay whole.
   Tiles widen and wrap to another row instead of shredding a word. */
.xtiles { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.xtile { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; padding-left: 10px; padding-right: 10px; }

/* ---------- Subscriptions page (fr58) ---------- */
.xsubhead { margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--x-border); font: 700 16px var(--x-serif); color: var(--x-ink); }

/* ---------- Files & Uploads (fr65) ---------- */
html:not([data-theme="dark"]) .dpanel { border: 1pt solid #000; border-radius: 14px; padding: 20px 22px; margin: 16px 0; background: #fff; }
.dpanel > h4:first-child { margin: 0 0 8px; font: 700 16px var(--x-serif); color: var(--x-ink); }

/* ---------- Master logo (fr71) ---------- */
#shellBrand img { height: 38px; width: auto; display: block; }

/* Standalone rail repair (fr100): theme.css styles the appnav menus
   as horizontal topbar pills (flex row, wrap, centered, pill chrome).
   The rail rules above switch the direction to column but never
   reset wrap, alignment, or the pill chrome, so on wide screens the
   menus wrapped into a second column that overflowed the rail and
   clipped (her screenshot: a lone 'Pro' button at the rail edge),
   and the account email ran off the bottom card. These rules finish
   the rail: one column, full-width rows, no pill chrome, and the
   account line wraps inside its card. */
@media (min-width: 1024px) {
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .mainnav {
    flex-wrap: nowrap; align-items: stretch;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu > summary {
    background: transparent; border: 0; border-radius: 9px; white-space: normal; width: 100%;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navcal {
    background: transparent; border: 0; border-radius: 9px; align-self: flex-start;
    padding: 9px 13px; color: #c5d5ea;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .topright { min-width: 0; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .topright { width: 100%; box-sizing: border-box; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .topright .who {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal;
  }
}

/* ---------- Unified rail (fr107): one navigation on every screen.
   The standalone (workspace) rail now speaks the dashboard rail's
   language: the master logo, icon rows, a labeled Calendar row, and
   quiet utility controls, so starting a file no longer swaps the
   menu for a different-looking one. */
header.topbar.appnav .brandmark-logo { height: 34px; width: auto; display: block; }
header.topbar.appnav .navcal-label { display: none; }
@media (min-width: 1024px) {
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .brandmark-logo { height: auto; width: 100%; max-width: 100%; filter: drop-shadow(0 0 9px rgba(0, 140, 255, .27)); }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .brandmark { padding: 4px 7px 20px; border-bottom: 1px solid #23466a; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu > summary {
    display: flex; align-items: center; gap: 10px;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navmenu > summary .xic,
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navcal .xic { width: 20px; height: 20px; flex: 0 0 auto; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navcal {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; border-radius: 9px; padding: 11px 13px;
    color: #c5d5ea; font: inherit; font-weight: 650; text-align: left; cursor: pointer;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navcal:hover { background: #0e2849; color: #fff; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .navcal-label { display: inline; }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .fr-theme-toggle {
    width: 100%; text-align: left; padding: 10px 13px; border-radius: 9px;
    border: 1px solid #1766a7; background: rgba(255, 255, 255, .04); color: #c5d5ea;
    font: inherit; font-weight: 600; cursor: pointer;
  }
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .fr-view-switch {
    display: flex; gap: 6px; width: 100%; padding: 4px 0 0;
  }
}
@media (min-width: 1024px) {
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .fr-theme-toggle,
  body:not(:has(#shell)) header.topbar.appnav:has(nav.mainnav) .fr-view-switch { box-sizing: border-box; max-width: 100%; }
}