:root {
/* ── Brand palette adopted from scienceandresearch.ue-varna.bg ──
   Navy #233874 · Teal #159379 · Deep teal #166267 · Forest #1f5c39
   Lavender #8585bd · Page bg #f7f8fc · Indigo ink #2e2545
   Brand gradient: linear-gradient(180deg,#159379 0%,#233874 100%) */
--brand-navy:#233874;--brand-navy-2:#1B2C5C;--brand-navy-3:#16234A;
--brand-teal:#159379;--brand-teal-2:#0F7E66;--brand-teal-3:#0B6951;
--brand-teal-deep:#166267;--brand-forest:#1f5c39;
--brand-lavender:#8585bd;--brand-lavender-2:#A6A6CF;
--brand-gradient:linear-gradient(180deg,#2A4490 0%,#233874 55%,#1B2C5C 100%);
--brand-gradient-deep:linear-gradient(180deg,#233874 0%,#1B2C5C 55%,#16234A 100%);
--brand-gradient-soft:linear-gradient(180deg,rgba(35,56,116,.10) 0%,rgba(27,44,92,.10) 100%);
--primary:#233874;--primary-2:#1B2C5C;
--red:#233874;--red-2:#1B2C5C;--red-3:#16234A;--red-dim:rgba(35,56,116,.07);--red-fog:rgba(35,56,116,.04);--red-border:rgba(35,56,116,.18);
--gold:#233874;--gold-2:#2E4485;--gold-3:#8585BD;--gold-glow:rgba(35,56,116,.16);
--ink:#2e2545;--ink-2:#3A3358;--ink-3:#555;--ink-4:#888;--ink-5:#BBB;
--bg:#f7f8fc;--bg-2:#ECEEF6;--white:#FFF;--surface:#FFFFFF;--border:#E2E5F0;--border-2:#C9D0EA;
--ok:#1f5c39;--ok-bg:#EDF7F2;--ok-border:#9FD4B8;
--warn:#7A4A00;--warn-bg:#FFF8EC;--warn-border:#E8CC88;
--err:#8B1515;--err-bg:#FEF2F2;--err-border:#E8AAAA;
--info:#233874;--info-bg:#EEF1FA;--info-border:#C9D0EA;
--shadow-xs:0 1px 3px rgba(35,56,116,.06);--shadow-sm:0 2px 8px rgba(35,56,116,.08),0 1px 3px rgba(35,56,116,.04);
--shadow-md:0 4px 18px rgba(35,56,116,.10),0 2px 6px rgba(35,56,116,.05);--shadow-lg:0 12px 40px rgba(35,56,116,.12),0 4px 12px rgba(35,56,116,.06);
--shadow-xl:0 20px 50px rgba(35,56,116,.14),0 8px 16px rgba(35,56,116,.06);
--shadow-glow:0 0 0 3px rgba(35,56,116,.18);
--r:12px;--r-sm:8px;--r-xs:5px;--r-pill:999px;
--header-h:72px;--topbar-h:34px;--max-w:min(1440px,100%);--gutter:clamp(.85rem,2.4vw,2.25rem);
--font-body:'Open Sans',system-ui,-apple-system,sans-serif;--font-display:'Merriweather',Georgia,serif;
--review:#8585bd;--review-bg:rgba(133,133,189,.08);--review-border:rgba(133,133,189,.28);
--teal:#159379;--teal-bg:rgba(21,147,121,.06);--teal-border:rgba(21,147,121,.18);
--t:.16s;--t-sm:.1s;--t-lg:.28s;--t-xl:.45s;
--ease:cubic-bezier(.25,.8,.25,1);--ease-spring:cubic-bezier(.34,1.48,.64,1);--ease-out:cubic-bezier(.2,.6,.0,1);--ease-in:cubic-bezier(.4,.0,1,.6);
/* ── tokens missing from initial build ── */
--r-card:10px;
--hover:var(--bg-2);
/* ── Z-index scale (single source of truth) ── */
--z-header:200;
--z-mobile-nav:199;
--z-auth:8000;
--z-drawer:9000;
--z-loader:9999;
--z-cookie:10000;
--z-progress-bar:10001;
--z-detail-scrim:10800;
--z-detail-sheet:10801;
--z-modal:11000;
--z-action-menu:11200;
--z-boot-error:11500;
--z-toast:15000;
}
/* ── Budget cell input performance optimisation ── */
.budget-cell-input {
  will-change: auto;           /* prevent unnecessary GPU promotion */
  contain: layout style;       /* isolate layout recalc to this element */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.budget-cell-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-dim);
  outline: none;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}

/* ══════════════════════════════════════════════════════════════════
   RENDERING PERFORMANCE — isolate layout recalculation
   `contain` tells the browser that an element's internal layout/paint
   won't affect its ancestors or siblings. Self-contained UI blocks
   (cards, stat pills, phase cards) are the best candidates.
   ══════════════════════════════════════════════════════════════════ */
.card,.stat-btn,.doc-card,.comp-phase-card,.wf-kpi-card,.wf-pipe-phase,
.proj-kpi-card,.proj-fin-strip,.detail-item,.fd-docs-card,
.comp-tl-card,.sig-method-card,.lifecycle-step{contain:layout style}
.table-wrap table tbody tr{contain:layout style}
/* High-cardinality scroll containers — size containment prevents
   the browser from recalculating the full list on every mutation */
.document-grid,.doc-picker-grid,.wf-pipeline,.comp-phase-grid,
.wf-kpi-row,.stats-row{contain:layout style}
/* Dashboard skeleton loader — uses the same shimmer pattern as
   .cb-skeleton (contest board). Add class .skel to any block to
   mask it as loading; .skel-line creates a shimmer line; .skel-btn
   a shimmer button; .skel-icon a shimmer icon/avatar. */
.skel,.skel-line,.skel-btn,.skel-icon,.skel-card,.skel-table-row,.skel-doc-card{pointer-events:none;user-select:none}
.skel,.skel-line,.skel-btn,.skel-icon,.skel-card,.skel-table-row,.skel-doc-card{
  background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);
  background-size:200% 100%;
  animation:cbShimmer 1.4s linear infinite;
}
.skel{border-radius:var(--r);border-color:var(--border)!important}
.skel-line{height:10px;border-radius:6px;margin-bottom:.35rem}
.skel-line.w90{width:90%}.skel-line.w80{width:80%}.skel-line.w70{width:70%}.skel-line.w60{width:60%}.skel-line.w40{width:40%}
.skel-btn{height:34px;border-radius:var(--r-sm);min-width:80px}
.skel-icon{width:34px;height:34px;border-radius:var(--r-xs);flex-shrink:0}
/* ── v12.17.3: Rich skeleton components ── */
.skel-card{border-radius:var(--r);height:130px;width:100%}
.skel-doc-card{border-radius:var(--r);height:110px;width:100%}
.skel-table-row{height:46px;border-radius:var(--r-xs);width:100%;margin-bottom:.35rem}
/* ── Document list skeleton ── */
.skel-doc-list{display:flex;flex-direction:column;gap:.5rem}
.skel-doc-list .skel-table-row:nth-child(2){width:94%}
.skel-doc-list .skel-table-row:nth-child(3){width:88%}
.skel-doc-list .skel-table-row:nth-child(4){width:96%}
.skel-doc-list .skel-table-row:nth-child(5){width:82%}
/* ── Application card skeleton ── */
.skel-forms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem}
.skel-forms-grid .skel-card{height:150px}
/* ── Doc grid skeleton ── */
.skel-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
/* ── Competition card skeleton ── */
.skel-comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.skel-comp-grid .skel-card{height:180px}
/* ── Instant-load flash: fade stale→fresh without layout shift ── */
.erp-data-stale{opacity:.75;transition:opacity .2s ease}
.erp-data-fresh{opacity:1;transition:opacity .2s ease}
/* ── Optimistic update success flash ── */
@keyframes successFlash{0%{box-shadow:0 0 0 0 rgba(21,147,121,.35)}70%{box-shadow:0 0 0 8px rgba(21,147,121,0)}100%{box-shadow:none}}
.optimistic-success{animation:successFlash .6s ease-out}
@media (prefers-reduced-motion:reduce){
  .skel,.skel-line,.skel-btn,.skel-icon,.skel-card,.skel-doc-card,.skel-table-row,.modal-overlay,.modal-box,
  .drawer-overlay,.detail-sheet-scrim,.detail-sheet{animation:none}
}
/* Body sizes to its content (header + main + footer). The previous
 * `min-height:100dvh` forced the body to the viewport height, which — combined
 * with `.main-content{flex:1}` and the footer's `margin-top:auto` — painted a
 * band of body background between the dashboard content and the footer on
 * short pages. With `min-height:auto` the footer follows the content
 * immediately, so the layout fully utilises the body without empty strips.
 * The login screen owns its own min-height:100dvh (see .login-wrap), so the
 * unauthenticated entry point is unaffected. */
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);min-height:auto;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.6;overflow-x:hidden;overscroll-behavior-x:none;text-rendering:optimizeSpeed}

/* ── IFRAME EMBED MODE ──────────────────────────────────────────────
   Activated by the early <script> in index.html when the page is being
   framed. Mobile-safe scroll: iOS Safari refuses to touch-scroll a flex
   <body> with overflow-y:auto inside an iframe. So we move the scroll
   container up to <html>, give it -webkit-overflow-scrolling:touch, and
   leave <body> in natural flow. Fixed-position overlays become absolute
   so they scope to our document, not the parent's viewport. */
html.in-iframe{height:auto;min-height:0;max-width:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
html.in-iframe body{height:auto;min-height:0;max-width:100%;overflow:visible;display:flex;flex-direction:column;overscroll-behavior:contain}
html.in-iframe .login-wrap{min-height:100vh;background-attachment:local}
html.in-iframe #loading-screen{position:absolute}
/* Toast containers always use position:fixed so notifications stick to the
   bottom-right of the viewport regardless of scroll position. In iframe
   mode the iframe owns its own scrolling context (overflow-y:auto on <html>),
   so fixed works correctly in all modern browsers including iOS Safari 13+.
   The transform:translateZ(0) forces GPU compositing which prevents the
   classic iOS Safari bug where fixed elements stutter on scroll.
   will-change:opacity provides a hint for smooth fade animations. */
html.in-iframe #toast-container,
html.in-iframe #toast-container-alerts{position:fixed!important;top:auto!important;bottom:max(1.4rem,env(safe-area-inset-bottom,1.4rem))!important;right:max(1.4rem,env(safe-area-inset-right,1.4rem))!important;left:auto!important;will-change:opacity,transform;transform:translateZ(0)}
html.in-iframe .auth-transition-overlay{position:absolute}
/* Sticky header doesn't make sense inside a short iframe — convert to
   static so the parent's scroll context owns vertical position and the
   tabs aren't fighting the parent's sticky chrome. */
html.in-iframe .site-header{position:static}
/* Body scroll lock when any modal/detail-sheet is mounted via _portal.
   Prevents the underlying page from scrolling behind the modal and from
   pushing the perceived modal position below the fold. In iframe mode
   the lock applies to <html> instead, since that's the scroll container. */
/* IMPORTANT: do NOT set `touch-action:none` here — it cascades to descendants
   on iOS Safari and prevents .modal-body from being panned by touch, making
   tall modals feel frozen. `overflow:hidden` + overscroll-behavior:none on
   the page scroller is enough to stop background scroll-chaining. */
/* Modal overlays: GPU-composited for smooth 60fps fade transitions.
   will-change:opacity pre-allocates a compositor layer so the browser
   doesn't re-rasterise on every frame of the open/close animation. */
.modal-overlay,.drawer-overlay,.detail-sheet-scrim,.modal-box{will-change:opacity,transform;transform:translateZ(0)}
/* ── Modal sizing — responsive, scrollable, never clipped ── */
.modal-box .modal-head,.modal-box .modal-header{position:sticky;top:0;z-index:2;background:var(--white);border-radius:var(--r) var(--r) 0 0}
.modal-box .modal-footer{position:sticky;bottom:0;z-index:2;background:var(--white);border-radius:0 0 var(--r) var(--r);margin-top:auto}
/* Ensure modal body is scrollable with visible scrollbar */
.modal-box .modal-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:auto}
/* Wide modal preset: 800px for pickers and large forms */
.modal-box.wide{max-width:min(800px,calc(100vw - 2rem))}
@media (prefers-reduced-motion:reduce){.modal-overlay,.drawer-overlay,.detail-sheet-scrim,.modal-box{will-change:auto;transform:none}}
html.modal-open,body.modal-open{overflow:hidden!important;overscroll-behavior:none}
html.in-iframe.modal-open{overflow:hidden!important}
/* iOS-safe scroll lock fallback when JS sets a saved scroll Y position. */
body.modal-open[data-locked-scroll]{position:fixed;left:0;right:0;width:100%}
/* In iframe mode, the body is NOT the scroller, so position:fixed lock
   would break layout. Skip the position-fixed trick — overflow:hidden on
   <html> alone is enough to lock scroll. */
html.in-iframe body.modal-open[data-locked-scroll]{position:static;top:auto!important}
/* ══════════════════════════════════════════════════════════════════
   SCROLLBAR — global, visible, accessible
   Ensures scrollbars are always visible on desktop (no vanishing
   overlays) with sufficient width for easy mouse targeting. Applied
   to all elements, not just body. The `scrollbar-width:auto` forces
   Firefox to show full-size scrollbars instead of thin overlays.
   ══════════════════════════════════════════════════════════════════ */
*{scrollbar-width:auto;scrollbar-color:var(--brand-teal) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-2);border-radius:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand-teal),var(--brand-navy));border-radius:99px;min-height:32px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--brand-teal-2);border:1.5px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ── Per-container scrollbar overrides for crowded panels ── */
.modal-body::-webkit-scrollbar{width:6px}
.modal-body::-webkit-scrollbar-thumb{border-width:1px}
.doc-picker-grid::-webkit-scrollbar{width:6px}
.doc-picker-grid::-webkit-scrollbar-thumb{border-width:1px}
.table-wrap,.wf-lane-table-wrap,.wf-pipeline,.mc-pipeline,
.wizard-progress,.board-subnav,.fd-tabs,.filter-bar{scrollbar-width:thin}
.table-wrap::-webkit-scrollbar,.wf-lane-table-wrap::-webkit-scrollbar{height:6px}
/* Ensure all scrollable containers show scrollbars when content overflows */
.modal-body,.doc-picker-grid,.drawer-body,.wf-pipeline,.mc-pipeline,
.wizard-progress,.board-subnav,.fd-tabs,.filter-bar,.fd-tabs{overflow-y:auto;overflow-x:auto}
/* Body-level scroll: ensure main page always shows vertical scrollbar to prevent layout shift */
html{overflow-y:scroll}
::selection{background:rgba(21,147,121,.15);color:var(--ink)}
:focus-visible{outline:3px solid var(--brand-teal);outline-offset:3px;border-radius:4px}

/* ══════════════════════════════════════════════════════════════════
   LOADING SCREEN — defined inline in index.html (critical path).
   styles.css does NOT redefine #loading-screen to avoid animation
   restart when this file loads. Only in-iframe overrides below.
   ══════════════════════════════════════════════════════════════════ */

.site-topbar{height:var(--topbar-h);background:linear-gradient(135deg,var(--brand-navy-3) 0%,var(--brand-teal) 50%,var(--brand-navy) 100%);border-bottom:none;display:flex;align-items:center;position:relative}
.site-topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(35,56,116,.35) 30%,rgba(35,56,116,.35) 70%,transparent 100%)}
.topbar-inner{max-width:var(--max-w);margin:0 auto;width:100%;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between}
.topbar-brand{font-size:.65rem;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}
.topbar-brand a{color:inherit;text-decoration:none;transition:color var(--t)}.topbar-brand a:hover{color:rgba(255,255,255,.85)}
.topbar-sep{color:rgba(255,255,255,.2)}
.topbar-links{display:flex;align-items:center;gap:.15rem}
.topbar-link{font-size:.65rem;color:rgba(255,255,255,.5);background:none;border:none;cursor:pointer;padding:.28rem .7rem;border-radius:var(--r-xs);transition:color var(--t),background var(--t);font-family:var(--font-body);letter-spacing:.03em;display:flex;align-items:center;gap:.35rem;text-decoration:none;min-height:44px}
.topbar-link:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.07)}
.topbar-lang-btn{font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.18);padding:.18rem .55rem;margin-left:.3rem;font-size:.58rem}
.topbar-lang-btn:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}

.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);background:#fff;border-bottom:3px solid transparent;border-image:var(--brand-gradient) 1;box-shadow:0 2px 16px rgba(35,56,116,.10);contain:layout style;will-change:auto}
.header-inner{max-width:var(--max-w);margin:0 auto;height:100%;padding:0 var(--gutter);display:flex;align-items:center;gap:.5rem;position:relative;z-index:1}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:.15rem;flex-shrink:0;text-decoration:none;margin-right:0;overflow:visible;border-radius:var(--r);padding:.2rem .45rem;transition:background var(--t)}
.logo-wrap:hover{background:var(--red-fog)}
.logo-wrap:focus-visible{outline:2px solid var(--red-3);outline-offset:2px}
.logo-row{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap}
.logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--border);transition:transform .25s var(--ease-spring),box-shadow .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.logo-divider{width:1px;height:24px;background:var(--border);flex-shrink:0;opacity:.35;transition:opacity .2s ease}
.science-logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .25s var(--ease-spring);background:var(--white)}
.logo-wrap:hover .logo-img,.logo-wrap:hover .science-logo-img{box-shadow:0 2px 10px rgba(0,0,0,.14)}
.logo-wrap:hover .logo-divider{opacity:.5}
.brand-home-btn{background:none;border:none;cursor:pointer;padding:.35rem .65rem;border-radius:var(--r);transition:background var(--t);flex-shrink:0;text-align:center}
.brand-home-btn:hover{background:var(--red-fog)}
.brand-home-btn:focus-visible{outline:3px solid var(--red-3);outline-offset:2px}
.brand-label{font-size:.48rem;font-weight:700;color:var(--ink-4);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;line-height:1;margin-top:-.05rem}
.header-vr{width:1px;height:34px;background:var(--border);flex-shrink:0;margin:0 .2rem}
.nav-tabs{display:flex;align-items:stretch;justify-content:center;gap:2px;flex:1 1 auto;padding:0 .5rem;background:none;min-width:0}
.nav-tab{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-3px;cursor:pointer;padding:.5rem .9rem .45rem;height:var(--header-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:color var(--t),background var(--t);white-space:nowrap;text-decoration:none;position:relative;border-radius:0;flex:1 1 0;min-width:60px}
.nav-tab:not(:last-child){margin-right:1px}
@media (min-width:1200px){.nav-tab{font-size:.78rem;padding:.5rem .9rem .45rem;min-width:72px}}
.nav-tab i{font-size:1.05rem;transition:color var(--t);line-height:1}
.nav-tab:hover{color:var(--red);background:var(--red-fog);}
.nav-tab:hover i{color:var(--red-2)}
.nav-tab:focus-visible{outline:2px solid var(--red-3);outline-offset:1px}
.nav-tab.active{color:var(--brand-teal);background:rgba(21,147,121,.05);border-bottom-color:transparent;position:relative}
.nav-tab.active::after{content:'';position:absolute;bottom:-3px;left:15%;right:15%;height:3px;background:var(--brand-gradient);border-radius:2px 2px 0 0;animation:tabSlideIn .22s var(--ease-spring) both}
@keyframes tabSlideIn{from{transform:scaleX(.3);opacity:0}to{transform:scaleX(1);opacity:1}}
.nav-tab.active i{color:var(--brand-teal)}
.user-panel{display:flex;align-items:center;gap:.5rem;margin-left:.25rem;flex-shrink:0;padding-left:.5rem;border-left:1px solid var(--border);min-width:0}
.user-avatar{width:36px;height:36px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--red-dim),rgba(21,147,121,.12));border:1.5px solid var(--red-border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;color:var(--red);flex-shrink:0;overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.user-avatar img{width:100%;height:100%;object-fit:cover}.user-avatar:hover{border-color:var(--red-3);box-shadow:0 0 0 3px var(--red-dim)}
.user-name{font-size:.85rem;color:var(--ink-2);font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-badge{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:var(--r-pill);background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);white-space:nowrap;flex-shrink:0}
.role-badge.admin{background:rgba(21,147,121,.08);color:var(--red-2);border-color:rgba(21,147,121,.18)}
.logout-btn{font-size:.8rem;color:var(--ink-3);background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:.48rem .9rem;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);display:flex;align-items:center;gap:.35rem;font-family:var(--font-body);flex-shrink:0;white-space:nowrap;min-height:44px}
.logout-btn:hover{background:var(--err-bg);border-color:var(--err-border);color:var(--err);box-shadow:var(--shadow-md)}
.logout-btn:focus-visible{outline:2px solid var(--err);outline-offset:2px}

.live-indicator{display:flex;align-items:center;gap:.35rem;font-size:.65rem;font-weight:700;color:var(--ok);letter-spacing:.04em;text-transform:uppercase;padding:.25rem .6rem;background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0;transition:opacity .3s}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:livePulse 2s ease-in-out infinite}
.live-indicator.stale{color:var(--ink-4);background:var(--bg);border-color:var(--border)}
.live-indicator.stale .live-dot{background:var(--ink-4);animation:none}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.breadcrumb-strip{background:var(--white);border-bottom:1px solid var(--border);padding:.52rem 0}
.breadcrumb-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--ink-4)}
.breadcrumb-inner a,.breadcrumb-inner button{color:var(--red);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:inherit;transition:color .2s var(--ease),text-decoration .2s ease}
.breadcrumb-inner a:hover,.breadcrumb-inner button:hover{color:var(--red-3);text-decoration:underline;text-decoration-thickness:2px}
.bc-sep{color:var(--ink-5);font-size:.62rem}

.main-content{flex:1 1 auto;display:block;max-width:var(--max-w);width:100%;margin:0 auto;padding:clamp(1rem,2vw,1.75rem) var(--gutter) clamp(1.75rem,3.5vw,3rem);min-height:0}
/* .view-enter is a transparent block container so direct child views (Dashboard,
 * Forms, Projects…) sit at the natural top of <main> and the footer follows
 * immediately after them. The previous `flex:1 1 auto` + `> *{flex:0 0 auto}`
 * combo stretched <main> AND prevented the view from filling it, leaving a
 * visible gap of body background between dashboard content and the footer.
 * Sticky-footer behaviour still works via .site-footer{margin-top:auto} on
 * the body's flex-column, so on short pages the footer stays at viewport bottom
 * without painting an empty band. */
.main-content > .view-enter{display:block;width:100%;max-width:100%}
/* ── Ensure all content areas have proper min-width to prevent layout crushing ── */
.card,.doc-card,.wf-board,.mc-dashboard,.stats-row,.document-grid{min-width:0}
.page-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-top-left{min-width:0;flex:1 1 auto}
.page-top-left h2{font-family:var(--font-display);font-size:clamp(1.1rem,3vw,1.45rem);font-weight:700;color:var(--ink);margin-bottom:.2rem;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.page-top-left p{font-size:.82rem;color:var(--ink-3);line-height:1.5;text-wrap:pretty}
.page-top-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;flex-shrink:0}
@media(max-width:860px){.page-top-actions{width:100%}.page-top-actions .search-wrap{flex:1}.page-top-actions .btn{flex:1;justify-content:center}}

.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:visible;margin-bottom:1.4rem;transition:box-shadow var(--t-lg) var(--ease),border-color var(--t-lg) var(--ease)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--red-border)}
.card.card-hover{cursor:pointer}.card.card-hover:hover{box-shadow:var(--shadow-lg);border-color:var(--red-border)}.card.card-hover:active{opacity:.97;transition-duration:.06s}
.card-header{padding:clamp(.75rem,1vw,1rem) clamp(.9rem,1.4vw,1.4rem);border-bottom:1px solid var(--border);border-top:3px solid transparent;border-image:var(--brand-gradient) 1;display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap;background:linear-gradient(180deg,var(--surface) 0%,rgba(247,248,252,.6) 100%);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.card-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);text-wrap:balance}
.card-body{padding:clamp(.9rem,1.4vw,1.5rem)}

.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem;margin-bottom:1.4rem}
.stat-btn{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.1rem .85rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-xs);cursor:default;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease)}
.stat-btn[data-clickable]{cursor:pointer}
.stat-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--stat-accent,var(--border));border-radius:3px 3px 0 0}.stat-btn[data-clickable]:hover{box-shadow:var(--shadow-md);border-color:var(--stat-accent,var(--red-border))}.stat-btn.active,.stat-btn[data-clickable]:focus-visible{outline:none;border-color:var(--stat-accent,var(--brand-teal));background:linear-gradient(180deg,rgba(21,147,121,.06) 0%,var(--white) 100%);box-shadow:var(--shadow-sm),0 0 0 1px var(--stat-accent,rgba(21,147,121,.14))}
.stat-num{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--ink);line-height:1;margin-top:.08rem;transition:color .2s}
.stat-icon{font-size:.95rem;color:var(--ink-4);transition:color .2s}
.stat-label{font-size:.68rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;line-height:1.35;max-width:100%;transition:color .2s}

.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;padding:.28rem .68rem;border-radius:var(--r-pill);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);animation:badgeSlideIn .3s var(--ease-spring)}
@keyframes badgeSlideIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.badge::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0}
.badge.draft{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}.badge.draft::before{background:var(--info)}
.badge.submitted{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}.badge.submitted::before{background:var(--gold)}
.badge.approved{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}.badge.approved::before{background:var(--ok)}
.badge.returned{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)}.badge.returned::before{background:var(--err)}
.badge.rejected{background:#f5e6e6;color:#5C0000;border:1px solid #dba8a8}.badge.rejected::before{background:#5C0000}
.badge.local{background:var(--bg);color:var(--ink-3);border:1px solid var(--border)}.badge.local::before{background:var(--ink-4)}
.badge.admin_passed{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}.badge.admin_passed::before{background:#2563EB}
.badge.in_review{background:#F5F0FF;color:#6B21A8;border:1px solid #C4A5E0}.badge.in_review::before{background:#7C3AED}
.badge.reviewed{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}.badge.reviewed::before{background:var(--ok)}
.badge.contracted{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}.badge.contracted::before{background:var(--gold)}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:var(--r-sm);font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .15s ease,opacity .15s ease;border:1.5px solid transparent;white-space:nowrap;text-decoration:none;letter-spacing:.02em;line-height:1.3;min-height:42px;min-width:42px;-webkit-tap-highlight-color:rgba(35,56,116,.15);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}.btn i{font-size:.78rem}
.btn:focus-visible{outline:3px solid var(--red-3);outline-offset:2px}
.btn:active:not(:disabled){opacity:.88;transition-duration:.06s}
.btn-primary{background:var(--brand-gradient);color:#fff;border-color:var(--brand-navy-2);box-shadow:0 1px 4px rgba(35,56,116,.30),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover:not(:disabled){background:var(--brand-gradient-deep);border-color:var(--brand-navy-3);box-shadow:0 6px 20px rgba(35,56,116,.38),inset 0 1px 0 rgba(255,255,255,.10)}
.btn-primary:active:not(:disabled){background:var(--brand-navy-3);box-shadow:inset 0 2px 4px rgba(0,0,0,.22);transition-duration:.06s}
.btn-outline{background:var(--white);color:var(--ink-2);border-color:var(--border);box-shadow:var(--shadow-xs)}
.btn-outline:hover:not(:disabled){border-color:var(--red-3);color:var(--red);background:var(--red-fog);box-shadow:var(--shadow-sm)}
.btn-outline:active:not(:disabled){background:var(--red-dim);transition-duration:.06s}

.btn-success{background:linear-gradient(180deg,#1a8a52,var(--ok));color:#fff;border-color:var(--ok);box-shadow:0 1px 3px rgba(22,116,74,.2)}
.btn-success:hover:not(:disabled){box-shadow:0 4px 14px rgba(22,116,74,.28)}
.btn-danger{background:linear-gradient(180deg,#B91C1C,var(--err));color:#fff;border-color:var(--err);box-shadow:0 1px 3px rgba(153,27,27,.2)}
.btn-danger:hover:not(:disabled){box-shadow:0 4px 14px rgba(153,27,27,.28)}
.btn-ghost{background:transparent;color:var(--ink-3);border-color:transparent;box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--bg);border-color:var(--border);color:var(--ink);box-shadow:var(--shadow-xs)}

/* ── Button loading spinner (v8.1.0-ui) ─────────────────────────── */
.btn-loading{position:relative;color:transparent!important;pointer-events:none;cursor:wait}
.btn-loading::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:1em;height:1em;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;
  animation:btnSpin .6s linear infinite;
}
.btn-outline.btn-loading::after{border-color:rgba(35,56,116,.2);border-top-color:var(--primary)}
.btn-ghost.btn-loading::after{border-color:rgba(35,56,116,.2);border-top-color:var(--ink-3)}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ── Micro-interactions: press scale & hover lift ────────────────── */
.btn:active:not(:disabled):not(.btn-loading){transform:scale(.96);transition-duration:.08s}
.card,.stat-btn,.doc-card,.comp-phase-card,.wf-kpi-card,.proj-kpi-card,
.rv-stat-card,.comp-summary-stat,.doc-picker-item,.sig-method-card{
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.card[data-clickable]:hover,.stat-btn[data-clickable]:hover,
.doc-card[data-clickable]:hover,.comp-phase-card[data-clickable]:hover,
.wf-kpi-card--link:hover,.proj-kpi-card[data-clickable]:hover,
.rv-stat-card:hover,.comp-summary-stat:hover,
.doc-picker-item:hover,.sig-method-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.card[data-clickable]:active,.stat-btn[data-clickable]:active,
.doc-card[data-clickable]:active,.comp-phase-card[data-clickable]:active{
  transform:translateY(0);transition-duration:.06s;
}

/* ── Content-visibility for long scrollable lists (v8.1.0-ui) ───── */
.document-grid,.doc-picker-grid,.wf-pipeline,.comp-phase-grid,
.wf-kpi-row,.stats-row,.form-list,.reviewer-list,.project-list,
.report-list,.library-file-list,.documents-tab-content{
  content-visibility:auto;contain-intrinsic-size:auto 500px;
}

/* ── Input focus glow (v8.1.0-ui) ────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(21,147,121,.18),var(--shadow-xs);
  border-color:var(--brand-teal);
  transition:box-shadow .18s var(--ease-out),border-color .18s var(--ease-out);
}
.btn-ghost:active:not(:disabled){background:var(--bg-2);transition-duration:.06s}
.btn-sm{padding:.4rem .9rem;font-size:.78rem;border-radius:var(--r-xs);min-height:38px}@media (min-width:768px){.btn-sm{padding:.42rem .95rem;font-size:.8rem;min-height:40px}}
.btn-icon{padding:0;width:42px;height:42px;justify-content:center;border-radius:var(--r-sm);flex-shrink:0}@media (min-width:768px){.btn-icon{width:44px;height:44px}}.btn-icon i{font-size:.92rem}@media (min-width:768px){.btn-icon i{font-size:.95rem}}
.btn-xs{padding:.3rem .75rem;font-size:.72rem;border-radius:var(--r-xs);min-height:36px}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#fff;border-color:var(--gold);box-shadow:0 1px 3px rgba(35,56,116,.2)}
.btn-gold:hover:not(:disabled){box-shadow:0 4px 12px rgba(35,56,116,.3)}

.form-field{margin-bottom:1.25rem;position:relative}
.form-field label{display:block;font-size:.76rem;font-weight:700;color:var(--ink-2);margin-bottom:.5rem;letter-spacing:.04em;text-transform:uppercase}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);font-family:var(--font-body);font-size:.88rem;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s;outline:none;appearance:none;min-height:42px}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--border-2)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.10);background:var(--white)}
.form-field textarea{resize:vertical;min-height:90px;line-height:1.6;field-sizing:content}
.form-field input[type=checkbox],.form-field input[type=radio]{width:auto;min-height:auto;padding:0;accent-color:var(--red);cursor:pointer}
.form-field{margin-bottom:1rem}
.form-field label{font-size:.72rem;margin-bottom:.38rem}
.form-field.error input,.form-field.error select,.form-field.error textarea{border-color:var(--err);background:var(--err-bg);box-shadow:0 0 0 3px rgba(139,21,21,.12);animation:fieldErrorShake .4s var(--ease)}
.form-field.error label{color:var(--err)}
@keyframes fieldErrorShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}
.field-error{display:flex;align-items:center;gap:.3rem;font-size:.73rem;color:var(--err);margin-top:.32rem;font-weight:600}
.form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.4rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.span2{grid-column:span 2}
.form-layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem 1.1rem}
.form-layout-grid .span2{grid-column:1/-1}
/* Inside a modal box, cap at exactly 2 columns so fields aren't 280px slivers */
.modal-box .form-layout-grid,.modal-form .form-layout-grid{grid-template-columns:1fr 1fr;gap:.75rem 1rem}
.modal-box .form-layout-grid .span2,.modal-form .form-layout-grid .span2{grid-column:1/-1}
/* Wide modal form: better use of horizontal space on desktop ≥1200px */
@media (min-width:1200px){.modal-box.wide .form-layout-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.form-layout-grid,.modal-box .form-layout-grid,.modal-form .form-layout-grid{grid-template-columns:1fr}}

/* ── Wizard progress bar (responsive, touch-friendly) ── */
.wizard-progress{-webkit-overflow-scrolling:touch;overflow-x:auto;overscroll-behavior:contain}
.wizard-progress::-webkit-scrollbar{height:3px}
.wizard-progress::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
.wizard-progress .wz-step-btn{min-height:54px;min-width:54px;border-radius:var(--r-xs);transition:opacity .25s,background .2s}
.wizard-progress .wz-step-btn:hover:not(:disabled){background:rgba(35,56,116,.04)}
.wizard-progress .wz-step-btn:focus-visible{outline:3px solid var(--brand-teal);outline-offset:2px}
/* ── Inline header stepper (v9.71: moved next to the modal title to free vertical space) ── */
.wizard-progress-inline{flex:0 1 auto!important;min-width:0!important;max-width:100%;padding-bottom:2px;padding-top:2px}
.wizard-progress-inline button:hover:not(:disabled){opacity:.85}
.wizard-progress-inline button:focus-visible{outline:3px solid var(--brand-teal);outline-offset:2px;border-radius:50%}
@media (max-width:640px){
  .modal-head-wizard{flex-wrap:wrap;row-gap:.35rem;padding:.65rem .7rem!important}
  .modal-head-wizard h3{flex:1 1 auto;font-size:.88rem!important;min-width:0}
  .modal-head-wizard .wizard-progress-inline{order:3;flex:1 1 100%!important;justify-content:center;margin-left:0!important;flex-shrink:inherit!important;padding-bottom:0}
}
@media (max-width:380px){
  .modal-head-wizard .wizard-progress-inline{gap:2px!important}
}

/* ── Modal footer responsive wizard buttons ── */
.modal-footer .btn-wizard-cta{white-space:nowrap;transition:all .2s ease}
.modal-footer .btn-wizard-cta:active{transform:scale(.97)}
@media (max-width:640px){.modal-footer .btn-wizard-cta,.modal-footer .btn-primary{min-height:44px}}
@media (max-width:640px){
  .modal-footer.flex-wrap{gap:.35rem!important}
  .modal-footer .btn-wizard-cta{font-size:.78rem!important;padding:.5rem 1rem!important;min-width:0!important;flex:1 1 0!important}
  .modal-footer .btn-ghost{flex:0 0 auto!important;padding:.3rem .5rem!important}
}
@media (max-width:400px){
  .modal-footer{gap:.25rem!important}
  .modal-footer .btn{font-size:.7rem!important;padding:.35rem .6rem!important;min-height:36px!important}
}
.form-section{padding:1.25rem 0;border-bottom:1px solid var(--border)}
.form-section:last-of-type{border-bottom:none;padding-bottom:0}
.form-section:first-of-type{padding-top:0}
.form-section-title{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--red-border)}
.form-section-title i{font-size:.82rem;color:var(--red);flex-shrink:0}

.search-wrap{position:relative}
.search-wrap i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-4);font-size:.76rem;pointer-events:none;transition:color .2s}
.search-wrap:focus-within i{color:var(--red)}
.search-input{padding:.55rem .9rem .55rem 2.2rem;border:1.5px solid var(--border);border-radius:var(--r-pill);font-family:var(--font-body);font-size:.84rem;background:var(--white);color:var(--ink);outline:none;min-width:200px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:var(--shadow-xs);height:40px}
.search-input:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.search-input:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.10);background:var(--white)}.search-input::placeholder{color:var(--ink-3);opacity:1}

.filter-bar{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;overflow-y:visible}
@media (max-width:768px){.filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:.2rem}}
.chip{font-size:.72rem;font-weight:600;padding:.32rem .8rem;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--white);color:var(--ink-3);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--red-3);color:var(--red);background:var(--red-fog);box-shadow:var(--shadow-sm)}
.chip.active{background:var(--brand-gradient);border-color:var(--brand-teal);color:#fff;box-shadow:0 2px 8px rgba(21,147,121,.28)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead tr{border-bottom:2px solid var(--border)}
th{text-align:left;padding:.7rem 1rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;cursor:pointer;user-select:none;transition:color .2s var(--ease),background .2s var(--ease);background:var(--surface)}
th:hover{color:var(--red);background:rgba(21,147,121,.04)}th.sort-asc::after{content:' ↑';color:var(--red)}th.sort-desc::after{content:' ↓';color:var(--red)}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s ease}
tbody tr:nth-child(even){background:rgba(249,249,249,.7)}
tbody tr:hover{background:rgba(21,147,121,.05)}tbody tr:last-child{border-bottom:none}
/* Interactive table rows — clickable to open proposal detail */
.applicant-row,.admin-row{cursor:pointer;touch-action:manipulation;/* kill 300ms tap delay on mobile */}
.applicant-row:active,.admin-row:active{background:rgba(21,147,121,.12);transition:background .05s ease}
.applicant-row:focus-visible,.admin-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--r-xs)}
/* Correction row — urgent visual */
.applicant-row.correction-row{border-left:4px solid var(--warn);background:linear-gradient(90deg,rgba(230,120,0,.06),transparent)}
.applicant-row.correction-row:hover{background:rgba(230,120,0,.1)}
td{padding:.65rem 1rem;color:var(--ink-2);vertical-align:middle;line-height:1.45}
td.mono{font-family:'Courier New',monospace;font-size:.78rem;color:var(--ink-4)}
.td-name{font-weight:600;color:var(--ink)}.td-email{font-size:.73rem;color:var(--ink-4);margin-top:.1rem}
.applicant-cell{display:flex;align-items:center;gap:.65rem}
.applicant-avatar{width:32px;height:32px;border-radius:var(--r-xs);background:linear-gradient(135deg,var(--red-dim),rgba(21,147,121,.1));border:1.5px solid var(--red-border);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--red);flex-shrink:0}
.type-tag{font-size:.69rem;font-weight:700;letter-spacing:.04em;padding:.18rem .52rem;border-radius:var(--r-xs);background:var(--red-dim);color:var(--red-2);border:1px solid var(--red-border);display:inline-flex;align-items:center}
.comp-tag{font-size:.77rem;color:var(--ink-3)}
/* ── Competition deadline cell ── */
.comp-period-cell{display:flex;flex-direction:column;gap:.3rem}
.comp-date-row{display:flex;align-items:center;gap:.32rem;font-size:.76rem;color:var(--ink-3)}
.comp-date-row i{font-size:.62rem;flex-shrink:0;color:var(--ink-5);width:12px;text-align:center}
.comp-date-row.comp-date-open i{color:var(--ok)}
.comp-date-row.comp-date-deadline.expired{color:var(--err);font-weight:600}
.comp-date-row.comp-date-deadline.urgent{color:var(--warn);font-weight:600}
.comp-date-row.comp-date-deadline.soon{color:var(--gold);font-weight:600}
.days-badge{display:inline-flex;align-items:center;padding:.1rem .48rem;border-radius:var(--r-pill);font-size:.64rem;font-weight:700;margin-left:.38rem;vertical-align:middle;line-height:1.4}
.days-badge.expired{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)}
.days-badge.urgent{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.days-badge.soon{background:var(--gold-glow);color:#7A4A00;border:1px solid var(--warn-border)}
.days-badge.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.count-chip{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 .5rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font-size:.68rem;font-weight:700;color:var(--ink-3)}

.close-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink-4);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease);flex-shrink:0}
.close-btn:hover{background:var(--red-fog);border-color:var(--red-border);color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
.close-btn:active{transform:scale(.9)}

/* ── Export audit panel (inline, no nested overlay) ── */
.export-audit-panel{display:flex;flex-direction:column;gap:.6rem}
.export-date-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.export-audit-actions{display:flex;gap:.5rem;align-items:center;padding-top:.4rem;flex-wrap:wrap}
.export-audit-actions .btn{flex:1 1 auto;justify-content:center;min-width:120px}

/* ── Detail grid (used in ViewModal / FormDetail “Данни” tab) ──
   Modern card-cell layout: each field is its own bordered cell, auto-fit columns,
   full-width spans for long-form fields (title, description). No inline styles
   needed in the JSX — every variant is expressed via modifier classes. */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.5rem;
  margin-bottom:1rem;
}
.detail-item{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.65rem .8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  min-width:0;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.detail-item:hover{border-color:var(--border-2);background:var(--white)}
.detail-item.detail-full{grid-column:1/-1;background:var(--white)}
.detail-label{
  font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.detail-val{
  font-size:.85rem;color:var(--ink);line-height:1.5;
  min-width:0;word-break:break-word;
}
.detail-val.is-mono{font-family:monospace;font-size:.74rem;color:var(--ink-3);letter-spacing:.02em}
.detail-val.is-email{font-size:.8rem;color:var(--ink-2);word-break:break-all}
.detail-val.is-muted{font-size:.83rem;color:var(--ink-2)}
.detail-val.is-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.35;color:var(--ink)}
.detail-val.is-description{white-space:pre-wrap;font-size:.84rem;color:var(--ink-2);line-height:1.7}
@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;gap:.5rem;margin-bottom:.9rem}
  .detail-item{padding:.55rem .7rem}
  .detail-val.is-title{font-size:.98rem}
}
.section-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--brand-teal-border,rgba(21,147,121,.28)),transparent)}
.return-comment-box{background:var(--err-bg);border:1px solid var(--err-border);border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.82rem;color:var(--err);margin-bottom:1.1rem;position:relative}
.return-comment-box::before{content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;background:var(--err);border-radius:0 3px 3px 0}
.return-comment-box strong{display:flex;align-items:center;gap:.35rem;margin-bottom:.25rem;font-size:.76rem}
.return-textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.65rem .95rem;font-family:var(--font-body);font-size:.87rem;outline:none;resize:vertical;min-height:100px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.return-textarea:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.10)}
.history-entry{padding:.72rem .95rem;border-left:3px solid var(--border);background:var(--surface);border-radius:0 var(--r-xs) var(--r-xs) 0;margin-bottom:.4rem;font-size:.82rem;transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.history-entry:hover{border-left-color:var(--gold);background:var(--white);box-shadow:var(--shadow-sm)}
.history-entry .action{font-weight:600;color:var(--ink)}.history-entry .meta{font-size:.68rem;color:var(--ink-4);margin-top:2px}
.file-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-xs);padding:.28rem .55rem;font-size:.73rem;color:var(--ink-2);margin:.12rem;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);cursor:default;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip:hover{border-color:var(--red-3);color:var(--red);background:var(--red-fog);box-shadow:var(--shadow-sm)}.file-chip a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.empty-state{text-align:center;padding:4rem 2rem;color:var(--ink-4)}
.empty-state-icon{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--bg),var(--bg-2));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 1.15rem;font-size:1.5rem;color:var(--ink-4)}
.empty-state h4{font-family:var(--font-display);font-size:1.06rem;font-weight:700;color:var(--ink-2);margin-bottom:.35rem;text-wrap:balance}.empty-state p{font-size:.83rem;line-height:1.55}

/* ── FormDetail Tab System ── */
.fd-tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--surface);border-radius:var(--r-sm);margin-bottom:1.25rem;border:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.fd-tab{font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--ink-4);background:none;border:none;cursor:pointer;padding:.45rem .85rem;border-radius:var(--r-xs);transition:color .2s var(--ease),background .2s var(--ease),box-shadow .15s ease;white-space:nowrap;display:flex;align-items:center;gap:.35rem;flex:1 1 0;justify-content:center;min-width:0}
.fd-tab:hover{color:var(--red);background:var(--white);box-shadow:var(--shadow-sm)}
.fd-tab.active{color:var(--brand-teal);background:var(--white);box-shadow:0 1px 5px rgba(21,147,121,.14),0 0 0 1px rgba(21,147,121,.12)}
.fd-tab i{font-size:.72rem}
.fd-tab-badge{font-size:.64rem;font-weight:800;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);padding:0 .35rem;line-height:1}
.fd-tab-badge.has-items{background:var(--brand-gradient);color:#fff}
.fd-tab-badge.empty{background:var(--bg);color:var(--ink-5);border:1px solid var(--border)}

/* ── Unified Board sub-navigation (Конкурси + Табло merge) ── */
.board-view{display:block}
.board-subnav{display:flex;gap:.3rem;padding:.32rem;margin-bottom:1.4rem;background:linear-gradient(180deg,var(--surface),var(--bg-2,var(--surface)));border:1px solid var(--border);border-radius:var(--r-md,14px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:.4rem;z-index:5;backdrop-filter:saturate(1.2) blur(6px)}
.board-subnav::-webkit-scrollbar{display:none}
.board-subnav-tab{font-family:var(--font-body);font-size:.78rem;font-weight:700;color:var(--ink-4);background:none;border:none;cursor:pointer;padding:.55rem 1.05rem;border-radius:var(--r-sm,10px);transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s ease,transform .12s ease;white-space:nowrap;display:flex;align-items:center;gap:.45rem;flex:0 0 auto;justify-content:center;position:relative}
.board-subnav-tab i{font-size:.82rem;opacity:.85}
.board-subnav-tab:hover{color:var(--red);background:var(--white);box-shadow:var(--shadow-sm)}
.board-subnav-tab:active{transform:translateY(1px)}
.board-subnav-tab.active{color:#fff;background:var(--brand-gradient,linear-gradient(135deg,var(--red),var(--brand-teal)));box-shadow:0 3px 12px rgba(21,147,121,.28),0 1px 3px rgba(0,0,0,.12)}
.board-subnav-tab.active i{opacity:1}
.board-subnav-count{font-size:.62rem;font-weight:800;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill,99px);padding:0 .4rem;line-height:1;background:var(--primary);color:#fff}
.board-subnav-tab.active .board-subnav-count{background:rgba(255,255,255,.28);color:#fff}
@media(max-width:640px){
  .board-subnav{gap:.2rem;padding:.25rem;border-radius:var(--r-sm,10px);position:static;backdrop-filter:none}
  .board-subnav-tab{padding:.45rem .7rem;font-size:.7rem;gap:.3rem}
  .board-subnav-tab i{font-size:.72rem}
}
.fd-docs-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:1rem 1.15rem;margin-bottom:.65rem;transition:border-color .2s var(--ease),box-shadow .2s ease}
.fd-docs-card:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.fd-docs-card-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem;padding-bottom:.55rem;border-bottom:1px solid var(--border)}
.fd-docs-card-head i{color:var(--gold);font-size:.82rem}
.fd-docs-card-head span{font-weight:700;font-size:.82rem;color:var(--ink)}
.fd-docs-empty{text-align:center;padding:2rem 1.2rem;color:var(--ink-4)}
.fd-docs-empty i{font-size:1.5rem;color:var(--ink-5);margin-bottom:.5rem;display:block}
.fd-docs-empty p{font-size:.78rem;line-height:1.5}
.fd-status-timeline{display:flex;align-items:center;gap:.45rem;margin-bottom:1rem;padding:.55rem .75rem;background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);overflow-x:auto}
.fd-status-step{display:flex;align-items:center;gap:.3rem;font-size:.64rem;font-weight:600;color:var(--ink-5);white-space:nowrap;padding:.2rem .5rem;border-radius:999px;border:1px solid transparent;background:transparent;opacity:.55;transition:background .18s ease,color .18s ease,opacity .18s ease,border-color .18s ease,box-shadow .18s ease}
.fd-status-step i{font-size:.7rem}
.fd-status-step.done{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 38%,transparent);opacity:1}
.fd-status-step.done::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.6rem;color:var(--ok);margin-right:.05rem}
.fd-status-step.current{color:#fff;background:var(--red);border-color:var(--red);opacity:1;box-shadow:0 1px 4px color-mix(in srgb,var(--red) 45%,transparent),0 0 0 2px color-mix(in srgb,var(--red) 22%,transparent)}
.fd-status-step.current i{color:#fff}
.fd-status-step.current.fd-status-step-warn{background:var(--warn);border-color:var(--warn);box-shadow:0 1px 4px color-mix(in srgb,var(--warn) 45%,transparent),0 0 0 2px color-mix(in srgb,var(--warn) 22%,transparent)}
.fd-status-step.current.fd-status-step-err{background:var(--err);border-color:var(--err);box-shadow:0 1px 4px color-mix(in srgb,var(--err) 45%,transparent),0 0 0 2px color-mix(in srgb,var(--err) 22%,transparent)}
.fd-status-arrow{color:var(--ink-6);font-size:.5rem;opacity:.45;transition:color .18s ease,opacity .18s ease}
.fd-status-step.done + .fd-status-arrow{color:var(--ok);opacity:.85}
.fd-status-step.current + .fd-status-arrow{color:var(--red);opacity:.7}

.document-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem}@media (min-width:640px){.document-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}}@media (min-width:1200px){.document-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.15rem}}
/* ── Contest board skeleton loader ── */
.cb-skeleton{pointer-events:none;border-top-color:var(--border)!important}
.cb-skel-icon{width:34px;height:34px;border-radius:var(--r-xs);flex-shrink:0;background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);background-size:200% 100%;animation:cbShimmer 1.4s linear infinite}
.cb-skel-line{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);background-size:200% 100%;animation:cbShimmer 1.4s linear infinite}
.cb-skel-line.w90{width:90%}.cb-skel-line.w80{width:80%}.cb-skel-line.w70{width:70%}.cb-skel-line.w60{width:60%}.cb-skel-line.w40{width:40%}
.cb-skel-btn{height:34px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);background-size:200% 100%;animation:cbShimmer 1.4s linear infinite}
@keyframes cbShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes ie-loading-bar{0%{transform:translateX(-100%)}50%{transform:translateX(200%)}100%{transform:translateX(400%)}}
@keyframes genPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
@keyframes genSlideIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.gen-progress-overlay{z-index:12001;background:rgba(35,56,116,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.gen-progress-box{animation:genSlideIn .35s cubic-bezier(.2,.9,.3,1) both}
.gen-progress-box .modal-body::-webkit-scrollbar{width:4px}
.gen-progress-box .modal-body::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
@media (max-width:480px){
  .gen-progress-box{max-width:100%!important;width:100%!important;border-radius:12px!important;margin:.5rem}
  .gen-progress-box>[style*="padding"]{padding-left:.75rem!important;padding-right:.75rem!important}
}
@media (prefers-reduced-motion:reduce){
  .cb-skel-icon,.cb-skel-line,.cb-skel-btn,.doc-viewer-overlay .modal-body [class*="ie-loading"],
  .gen-progress-box,.gen-progress-box [class*="genPulse"]{animation:none!important}
}
.doc-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid transparent;border-radius:var(--r-sm);padding:1rem;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);cursor:default}
.doc-card:hover{box-shadow:var(--shadow-md);background:var(--white);border-top-color:var(--red);transform:translateY(-1px)}
.doc-header{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.6rem}
.doc-icon-wrap{width:34px;height:34px;border-radius:var(--r-xs);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.doc-icon-wrap.pdf{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)}
.doc-icon-wrap.xlsx{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.doc-icon-wrap.docx{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}
.doc-icon-wrap.gdoc{background:var(--info-bg);color:#4285F4;border:1px solid #a8c4e8}
.doc-icon-wrap.gsheet{background:var(--ok-bg);color:#0F9D58;border:1px solid var(--ok-border)}
.doc-icon-wrap.gslides{background:var(--warn-bg);color:#F4B400;border:1px solid var(--warn-border)}
.doc-icon-wrap.pptx{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.doc-icon-wrap.txt{background:var(--bg);color:var(--ink-4);border:1px solid var(--border)}
.doc-title{font-weight:600;font-size:.79rem;line-height:1.45;color:var(--ink)}
.doc-meta{display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.doc-size{font-size:.66rem;color:var(--ink-4);display:flex;align-items:center;gap:.22rem}
.doc-type-badge{font-size:.63rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.14rem .48rem;border-radius:4px;background:var(--bg);color:var(--ink-4);border:1px solid var(--border)}

.doc-preview-frame{width:100%;height:65vh;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff}
.doc-preview-text{background:#faf8f5;border:1px solid var(--border);border-radius:var(--r-sm);padding:1.4rem 1.6rem;font-size:.88rem;line-height:1.75;white-space:pre-wrap;word-break:break-word;max-height:65vh;overflow-y:auto;font-family:var(--font-body);color:var(--ink-2)}
.modal-box.fullscreen .doc-preview-frame{height:100%;min-height:0;flex:1 1 auto}
.modal-box.fullscreen .doc-preview-text{height:100%;max-height:none;flex:1 1 auto}

.doc-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.55rem;max-height:min(55vh,480px);overflow-y:auto;overscroll-behavior:contain;padding:.4rem 0}
@media (min-height:900px){.doc-picker-grid{max-height:min(60vh,560px)}}
.doc-picker-item{display:flex;align-items:center;gap:.6rem;padding:.78rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);background:var(--white)}
.doc-picker-item:hover{border-color:var(--red-3);background:var(--red-fog);box-shadow:var(--shadow-sm)}
.doc-picker-item.selected{border-color:var(--red);background:var(--red-dim);box-shadow:0 0 0 2px rgba(21,147,121,.15)}
.doc-picker-item .dpi-check{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color var(--t),background var(--t),color var(--t);font-size:.7rem;color:transparent}
.doc-picker-item.selected .dpi-check{background:var(--red);border-color:var(--red);color:#fff}
.doc-picker-item .dpi-name{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.3;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.doc-picker-search{width:100%;padding:.55rem .9rem .55rem 2.2rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:.84rem;background:var(--white);color:var(--ink);outline:none;transition:border-color .2s ease,box-shadow .2s ease;margin-bottom:.7rem;box-shadow:var(--shadow-xs)}
.doc-picker-search:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.10)}

.attached-doc-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--gold-glow);border:1px solid var(--warn-border);border-radius:var(--r-xs);padding:.3rem .65rem;font-size:.73rem;color:var(--warn);margin:.15rem;font-weight:600;transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.attached-doc-chip:hover{background:var(--warn-bg)}
.attached-doc-chip .remove-attached{background:none;border:none;cursor:pointer;color:var(--err);padding:0;margin-left:.2rem;font-size:.82rem;line-height:1;display:flex}

.cal-item{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;gap:1rem}
.cal-item+.cal-item{border-top:1px solid var(--border)}
.cal-name{font-family:var(--font-display);font-weight:700;font-size:.95rem;margin-bottom:.15rem;color:var(--ink)}
.cal-deadline{font-size:.73rem;color:var(--ink-3);display:flex;align-items:center;gap:.32rem}

.signature-container{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--white);padding:.5rem;margin-bottom:1rem}
.signature-canvas{border:1px solid var(--border-2);border-radius:var(--r-xs);background:#fff;width:100%;height:auto;touch-action:none;cursor:crosshair}
.signature-actions{display:flex;gap:.5rem;margin-top:.5rem;justify-content:flex-end}

/* ── Auth Transition Overlay ──
   Navy-aligned brand gradient — matches the restored --brand-navy palette
   and the login-wrap below, so the cosmetic chain Google‑popup-close →
   transition‑overlay → dashboard‑paint reads as one continuous brand
   surface instead of switching hue mid-flight. Animation properties
   (authBgShift 16s, fade-out timing, spinner) are intentionally
   preserved verbatim. */
.auth-transition-overlay{position:fixed;inset:0;z-index:var(--z-auth);background:linear-gradient(135deg,#0B2A2A 0%,#0F3D38 22%,#15584A 42%,#1B6E5A 58%,#1F7A6A 70%,#16234A 88%,#0F1A4A 100%);background-size:300% 300%;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1);will-change:opacity,background-position}
.auth-transition-overlay.active{display:flex;opacity:1;pointer-events:auto;animation:authBgShift 16s cubic-bezier(.45,.05,.55,.95) infinite}
.auth-transition-overlay.fade-out{opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1) .08s}
@keyframes authBgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.auth-transition-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--gold);border-radius:50%;animation:loginSpin .7s linear infinite}
/* v12.26.0: Auth step progress indicators */
.auth-transition-steps{display:flex;gap:1.2rem;margin-top:.2rem}
.auth-step{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:rgba(255,255,255,.45);font-weight:500;letter-spacing:.02em;transition:color .3s;text-transform:uppercase}
.auth-step .auth-step-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem}
.auth-step.active{color:rgba(255,255,255,.9)}
.auth-step.active .auth-step-icon i{color:var(--gold)}
.auth-step.done{color:rgba(144,238,144,.8)}
.auth-step.done .auth-step-icon i{color:#6f6}
.auth-transition-label{font-size:.82rem;color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
/* auth-transition-text removed — no longer in use */

.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0B2A2A 0%,#0F3D38 22%,#15584A 42%,#1B6E5A 58%,#1F7A6A 70%,#16234A 88%,#0F1A4A 100%);background-size:300% 300%;animation:authBgShift 24s cubic-bezier(.45,.05,.55,.95) infinite;position:relative;overflow:hidden;will-change:background-position}
.login-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 25%,rgba(31,122,106,.22) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(35,56,116,.18) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.04) 0%,transparent 55%);pointer-events:none}
.login-wrap::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,.02)' stroke-width='.5'/%3E%3C/svg%3E");pointer-events:none}
.login-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110vmin;height:110vmin;max-width:900px;max-height:900px;opacity:.035;pointer-events:none;z-index:0;object-fit:contain;filter:grayscale(1) brightness(2.2) contrast(.25);mix-blend-mode:soft-light}
.login-card{background:var(--white);border-radius:16px;border-top:4px solid transparent;border-image:var(--brand-gradient) 1;padding:2.8rem 2.4rem 2.4rem;width:100%;max-width:400px;box-shadow:var(--shadow-xl),0 0 0 1px rgba(35,56,116,.06);position:relative;z-index:1;animation:cardReveal .55s var(--ease-out) both}
@keyframes cardReveal{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.login-logo-wrap{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-bottom:1.6rem}
.login-logo{width:72px;height:72px;border-radius:50%;border:2px solid var(--bg-2);box-shadow:0 0 0 7px var(--bg),0 8px 22px rgba(21,147,121,.12);object-fit:cover}
.login-logo-divider{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--border-2),transparent);flex-shrink:0}
.login-science-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--bg-2);box-shadow:0 0 0 6px var(--bg),0 8px 24px rgba(21,147,121,.1);background:var(--white)}
.login-title{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.4rem);font-weight:700;color:var(--ink);text-align:center;margin-bottom:.22rem;line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
.login-sub{font-size:.76rem;color:var(--ink-4);text-align:center;margin-bottom:1.85rem;letter-spacing:.02em}
.login-divider{display:flex;align-items:center;gap:.7rem;margin:1.4rem 0;color:var(--ink-4);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.google-signin-wrap{display:flex;justify-content:center;min-height:44px}
.login-loading-overlay{position:absolute;inset:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;border-radius:20px;animation:loginFadeIn .2s ease both}
.login-loading-overlay .login-loading-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:loginSpin .6s linear infinite}
.login-loading-overlay .login-loading-text{font-size:.78rem;color:var(--ink-3);font-weight:600;letter-spacing:.03em}
@keyframes loginFadeIn{from{opacity:0}to{opacity:1}}
@keyframes loginSpin{to{transform:rotate(360deg)}}

/* ── Blocked-account rejection card (Google sign-in domain reject) ── */
.login-blocked{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;padding:1.4rem 1.1rem 1.2rem;border:1.5px solid var(--err-border);background:linear-gradient(180deg,var(--err-bg) 0%,#fff 90%);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(139,21,21,.04);animation:loginFadeIn .25s var(--ease) both}
.login-blocked-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--err);font-size:1.25rem;border:1.5px solid var(--err-border);box-shadow:0 4px 14px rgba(139,21,21,.1)}
.login-blocked-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--err);line-height:1.3;text-wrap:balance;margin-top:.25rem}
.login-blocked-title-en{font-family:var(--font-display);font-weight:600;font-size:.78rem;color:var(--ink-3);line-height:1.3;text-wrap:balance;margin-bottom:.35rem;letter-spacing:.01em}
.login-blocked-body{font-size:.78rem;color:var(--ink-2);line-height:1.55;display:flex;flex-direction:column;gap:.45rem}
.login-blocked-body p{margin:0}
.login-blocked-body code{font-family:'Courier New',monospace;font-size:.74rem;background:rgba(139,21,21,.07);color:var(--err);padding:.08rem .35rem;border-radius:var(--r-xs);word-break:break-all;border:1px solid rgba(139,21,21,.14)}
.login-blocked-body strong{color:var(--ink);font-weight:700}
.login-blocked-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .85rem;margin-top:.65rem;padding-top:.7rem;border-top:1px dashed var(--err-border);width:100%}
.login-blocked-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;color:var(--red);text-decoration:none;padding:.3rem .6rem;border-radius:var(--r-pill);transition:background-color .15s var(--ease),color .15s var(--ease)}
.login-blocked-link:hover{background:var(--red-dim);color:var(--red-3)}
.login-blocked-link i{font-size:.78rem}

/* ============================================================================
 *  TOAST NOTIFICATIONS — single source of truth (consolidated v7.0.2)
 *  Contract:
 *    - Always position:fixed bottom-right (regardless of scroll/iframe/modal)
 *    - z-index above ALL overlays (modal, drawer, action-menu)
 *    - GPU-composited via translateZ + isolation, contained for paint perf
 *    - pointer-events:none on container, auto on individual toasts
 *    - max-width capped, safe-area inset aware
 *    - One canonical enter/exit keyframe pair (toastIn / toastOut)
 * ============================================================================ */
#toast-container,#toast-container-alerts{
    position:fixed!important;
    bottom:max(1.4rem,env(safe-area-inset-bottom,1.4rem))!important;
    right:max(1.4rem,env(safe-area-inset-right,1.4rem))!important;
    top:auto!important;
    left:auto!important;
    z-index:var(--z-toast);
    display:flex;
    flex-direction:column-reverse; /* newest on top, naturally stacked */
    gap:.5rem;
    pointer-events:none;
    max-width:min(420px,calc(100vw - 2rem));
    isolation:isolate;
    contain:layout style;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:auto;
}
#toast-container[data-active="1"],#toast-container-alerts[data-active="1"]{will-change:transform}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(36px) scale(.94)}}
.toast{display:flex;align-items:center;gap:.6rem;padding:.78rem 1.1rem;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;font-family:var(--font-body);box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.08);pointer-events:auto;animation:toastIn .28s var(--ease-out) both;max-width:360px;border:1px solid transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);contain:layout style paint;will-change:transform,opacity;position:relative;overflow:hidden;transform:translateZ(0)}
/* ── Toast auto-dismiss progress bar ── */
.toast::after{
  content:'';position:absolute;bottom:0;left:0;height:2.5px;
  background:currentColor;opacity:.35;border-radius:0 2px 0 0;
  animation:toastBar linear forwards;
  transform-origin:left center;
}
.toast.success::after{animation-duration:3.5s}
.toast.error::after{animation-duration:6s}
.toast.info::after{animation-duration:3.5s}
.toast.warn::after{animation-duration:4.5s}
/* Action-button toasts stay longer; bar matches the extended duration */
.toast:has(.toast-action)::after{animation-duration:5s}
/* Hover pauses the bar (matches JS timer pause) */
.toast:hover::after{animation-play-state:paused}
/* Leaving toasts fade their bar instantly */
.toast.toast-leaving::after{animation:none;opacity:0;transition:opacity .15s}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast i{font-size:.9rem;flex-shrink:0}
.toast.success{background:rgba(236,253,245,.95);border-color:var(--ok-border);color:var(--ok)}
.toast.error{background:rgba(254,242,242,.95);border-color:var(--err-border);color:var(--err)}
.toast.info{background:rgba(239,246,255,.95);border-color:var(--info-border);color:var(--info)}
.toast.warn{background:rgba(255,251,235,.95);border-color:var(--warn-border);color:var(--warn)}
.toast .toast-action{margin-left:auto;background:transparent;border:1px solid currentColor;color:inherit;padding:.22rem .6rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background-color .15s var(--ease),transform .15s var(--ease);flex-shrink:0}
.toast .toast-action:hover{background:currentColor;color:var(--white)}
.toast .toast-action:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ─── SITE FOOTER (institutional, multi-column) ─────────────────────
   Structure: social band → main 4-col grid → bottom strip.
   Palette stays on the brand gradient (teal→navy); typography & link
   density mirror the official ue-varna.bg footer for visual continuity.
   All sizes use clamp()/rem so layout scales gracefully at any browser
   zoom (50% → 200%) and any viewport width. */
.site-footer{padding:0;font-size:clamp(.74rem,.7rem + .12vw,.82rem);color:rgba(255,255,255,.78);border-top:none;margin-top:auto;background:var(--brand-gradient-deep,var(--brand-gradient));position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-teal) 0%,var(--gold-3,#8585BD) 50%,var(--brand-navy) 100%);opacity:.85}

/* ── Social band (top) ── */
.footer-social-band{border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)}
.footer-social-inner{max-width:var(--max-w);margin:0 auto;padding:clamp(.65rem,.5rem + .5vw,.95rem) var(--gutter);display:flex;align-items:center;justify-content:center;gap:clamp(.85rem,.5rem + 1.6vw,1.85rem);flex-wrap:wrap}
.footer-social-link{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.78);text-decoration:none;font-size:clamp(.72rem,.65rem + .2vw,.84rem);font-weight:600;letter-spacing:.01em;transition:color .18s var(--ease),transform .18s var(--ease);padding:.25rem .15rem;border-radius:var(--r-xs)}
.footer-social-link i{font-size:clamp(.95rem,.85rem + .25vw,1.1rem);width:1.1em;text-align:center;color:var(--gold-3,#A6A6CF);transition:color .18s var(--ease)}
.footer-social-link:hover{color:#fff}
.footer-social-link:hover i{color:#fff}
.footer-social-link:focus-visible{outline:2px solid var(--gold-3,#A6A6CF);outline-offset:3px}

/* ── Main grid (4 columns) ── */
.footer-main{max-width:var(--max-w);margin:0 auto;padding:clamp(1.5rem,1rem + 2vw,2.6rem) var(--gutter) clamp(1rem,.75rem + 1vw,1.7rem)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.2rem,.5rem + 2.4vw,2.6rem);align-items:start}

.footer-col{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.footer-col-title{font-family:var(--font-display);font-size:clamp(.92rem,.85rem + .25vw,1.05rem);font-weight:700;color:#fff;margin:0 0 .35rem;letter-spacing:.01em;line-height:1.3}

/* Brand column */
.footer-col-brand{gap:1.05rem}
.footer-brand-logos{display:flex;align-items:center;gap:clamp(.6rem,.4rem + .8vw,1rem);flex-wrap:wrap}
.footer-brand-logos a{display:inline-flex;align-items:center;text-decoration:none;transition:transform .2s var(--ease),filter .2s var(--ease);border-radius:6px}
.footer-brand-logos a:hover{transform:translateY(-1px);filter:brightness(1.08)}
.footer-brand-logos a:focus-visible{outline:2px solid var(--gold-3,#A6A6CF);outline-offset:3px}
/* v8.6.2 — social-logo PNG is now an alpha-only white seal (green bg stripped
   pixel-pass). Render with NO backing/border so the artwork is etched directly
   into the footer's navy gradient. A faint gold tint + soft glow on hover lifts
   it without breaking the seamless blend. */
.footer-logo-106{height:clamp(96px,7rem + 2vw,140px);width:clamp(96px,7rem + 2vw,140px);display:block;background:transparent;border-radius:0;object-fit:contain;opacity:.92;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));transition:opacity .25s var(--ease),filter .25s var(--ease),transform .25s var(--ease)}
.footer-brand-logos a:hover .footer-logo-106{opacity:1;filter:drop-shadow(0 0 8px rgba(229,209,140,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.5));transform:translateY(-1px)}
/* Fallback when new asset 404s — UEV crest is round/red, present circular treatment */
.footer-logo-106-fallback{height:clamp(48px,3.5rem + 1.5vw,72px)!important;width:clamp(48px,3.5rem + 1.5vw,72px)!important;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.08);padding:3px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1.5px rgba(255,255,255,.15);filter:none}
.footer-logo-sci{height:clamp(46px,3.2rem + 1.5vw,64px);width:clamp(46px,3.2rem + 1.5vw,64px);display:block;border-radius:50%;background:rgba(255,255,255,.06);padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08);object-fit:contain}

.footer-address{font-style:normal;display:flex;flex-direction:column;gap:.5rem;font-size:clamp(.74rem,.68rem + .2vw,.82rem);line-height:1.5;color:rgba(255,255,255,.75);overflow-wrap:anywhere;word-break:break-word}
.footer-addr-row{display:flex;align-items:center;gap:.55rem;min-width:0}
.footer-addr-row i{width:14px;text-align:center;color:var(--gold-3,#A6A6CF);font-size:.78rem;flex-shrink:0}
.footer-addr-row a{color:rgba(255,255,255,.85);text-decoration:none;transition:color .18s var(--ease);overflow-wrap:anywhere}
.footer-addr-row a:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}

/* Link columns */
.footer-link-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.footer-link-list li{margin:0;padding:0}
.footer-link-list a{color:rgba(255,255,255,.72);text-decoration:none;font-size:clamp(.78rem,.72rem + .2vw,.86rem);line-height:1.4;display:inline-block;transition:color .18s var(--ease),transform .18s var(--ease);position:relative;padding-left:0;overflow-wrap:anywhere}
.footer-link-list a:hover{color:#fff;transform:translateX(2px)}
.footer-link-list a:focus-visible{outline:2px solid var(--gold-3,#A6A6CF);outline-offset:2px;border-radius:3px}

/* НИИ science logo pinned to the top-right of column 4 (desktop) — visually on the same baseline as the 106-years logo in column 1, without disturbing column-4 flow. On tablet/mobile it falls back to centered in-flow placement (see media queries below). */
.footer-col-info{position:relative}
.footer-project-sci-link{position:absolute;top:0;right:0;display:flex;align-items:flex-start;justify-content:flex-end;text-decoration:none;transition:transform .2s var(--ease),filter .2s var(--ease);border-radius:6px;z-index:1}
.footer-project-sci-link:hover{transform:translateY(-1px);filter:brightness(1.08)}
.footer-project-sci-link:focus-visible{outline:2px solid var(--gold-3,#A6A6CF);outline-offset:3px}
.footer-col-info .footer-col-title{padding-right:72px}

/* Project-specific contacts (highlighted block in last column) */
.footer-project-contact{margin-top:1.1rem;padding:.85rem .95rem;background:rgba(0,0,0,.22);border-left:3px solid var(--brand-teal);border-radius:0 var(--r-xs) var(--r-xs) 0;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.footer-project-title{display:flex;align-items:center;gap:.45rem;font-size:clamp(.7rem,.65rem + .15vw,.78rem);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.footer-project-title i{color:var(--brand-teal);font-size:.8rem}
.footer-project-row{display:flex;align-items:center;gap:.5rem;font-size:clamp(.76rem,.7rem + .2vw,.84rem);color:rgba(255,255,255,.85);line-height:1.3;min-width:0}
.footer-project-row i{width:14px;text-align:center;color:var(--gold-3,#A6A6CF);font-size:.74rem;flex-shrink:0}
.footer-project-row a{color:rgba(255,255,255,.92);text-decoration:none;font-weight:600;transition:color .18s var(--ease);overflow-wrap:anywhere;word-break:break-word;min-width:0}
.footer-project-row a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── Bottom strip ── */
.footer-bottom{max-width:var(--max-w);margin:0 auto;padding:.85rem var(--gutter);border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;font-size:clamp(.66rem,.6rem + .15vw,.74rem);color:rgba(255,255,255,.5);text-align:center}
.footer-copy-text{letter-spacing:.01em;overflow-wrap:anywhere}
.footer-bottom-sep{color:rgba(255,255,255,.25)}
.footer-build{font-family:monospace;font-size:clamp(.62rem,.58rem + .1vw,.7rem);color:rgba(255,255,255,.35);letter-spacing:.04em}

/* Footer responsive: 4-col → 2-col @ 980px → 1-col @ 640px (mobile rules below) */
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .footer-col-brand{grid-column:1/-1}
  .footer-brand-logos{justify-content:flex-start}
  .footer-logo-106{height:108px;width:108px}
  .footer-logo-sci{height:52px;width:52px}
  .footer-main{padding:1.85rem var(--gutter) 1.25rem}
  /* On tablet/mobile, drop absolute pin; flex-reorder so the НИИ logo lands
     centered between the link list and the project-contact block. Column 4
     content stays LEFT-aligned to match columns 2 and 3. */
  .footer-col-info{display:flex;flex-direction:column;text-align:left}
  .footer-col-info .footer-col-title{order:1;padding-right:0;text-align:left;justify-content:flex-start}
  .footer-col-info .footer-link-list{order:2;align-items:flex-start}
  .footer-project-sci-link{order:3;position:static;justify-content:center;align-items:center;margin:.6rem auto .9rem;width:100%}
  .footer-col-info .footer-project-contact{order:4}
}
/* ── Hamburger drawer ── */
.hamburger-btn{display:none;background:none;border:1.5px solid var(--border);cursor:pointer;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;color:var(--ink-3);font-size:1rem;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .15s ease;flex-shrink:0;-webkit-tap-highlight-color:rgba(21,147,121,.1)}
/* Desktop: ensure hamburger stays hidden and the nav-tabs fill the header */
@media(min-width:641px){.hamburger-btn{display:none!important}.nav-tabs{display:flex!important}}
.hamburger-btn:hover{background:var(--red-fog);border-color:var(--red-border);color:var(--red);box-shadow:var(--shadow-sm)}
.drawer-overlay{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(0,0,0,.42);animation:drawerFadeIn .2s ease}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;z-index:calc(var(--z-drawer) + 1);background:var(--white);box-shadow:-8px 0 30px rgba(35,56,116,.14);display:flex;flex-direction:column;animation:drawerSlideIn .25s var(--ease-spring)}
@keyframes drawerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--border)}
.drawer-head-user{display:flex;align-items:center;gap:.65rem;min-width:0}
.drawer-avatar{width:36px;height:36px;border-radius:10px;overflow:hidden;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--red);background:linear-gradient(135deg,var(--red-dim),rgba(21,147,121,.08))}
.drawer-avatar img{width:100%;height:100%;object-fit:cover}
.drawer-user-info{min-width:0}
.drawer-user-name{font-weight:700;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-user-role{font-size:.64rem;color:var(--ink-4)}
.drawer-close{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-4);font-size:.9rem;transition:color .2s var(--ease),background .2s var(--ease);flex-shrink:0}
.drawer-close:hover{background:var(--bg-2);color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:.5rem 0}
.drawer-section{padding:.35rem 0}
.drawer-section-label{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-5);padding:.35rem 1.15rem .25rem}
.drawer-item{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.15rem;cursor:pointer;transition:color .2s var(--ease),background .15s ease;border:none;background:none;width:100%;text-align:left;font-family:var(--font-body);font-size:.8rem;color:var(--ink-3)}
.drawer-item:hover{background:var(--bg);color:var(--ink)}
.drawer-item.active{color:var(--red);background:var(--red-fog);font-weight:600}
.drawer-item i{width:18px;text-align:center;font-size:.82rem;flex-shrink:0}
.drawer-item.danger{color:var(--err)}
.drawer-item.danger:hover{background:var(--err-bg)}
/* Language toggle badge in drawer */
.drawer-lang-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:24px;padding:0 .5rem;margin-left:auto;font-size:.7rem;font-weight:700;background:var(--brand-teal);color:#fff;border-radius:999px;letter-spacing:.06em}
.drawer-lang-btn:hover .drawer-lang-badge{background:var(--brand-teal-2)}
.drawer-foot{padding:.75rem 1.15rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.drawer-foot-logos{display:flex;align-items:center;gap:.35rem}
.drawer-foot-logo{width:22px;height:22px;border-radius:50%;object-fit:cover;opacity:.5}
.drawer-foot-text{font-size:.66rem;color:var(--ink-5)}
.divider{height:1px;background:var(--border);margin:1.15rem 0}
.spin{animation:spin .6s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
/* ── i18n: translation override ── */
.i18n-en{display:none}html:not([lang="bg"]) .i18n-en{display:inline}html:not([lang="bg"]) .i18n-bg{display:none}

/* ── Signature Modal ── */
.sig-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:.85rem}
.sig-method-card{background:var(--white);border:2px solid var(--border);border-radius:var(--r);padding:1.35rem 1.1rem;cursor:pointer;text-align:center;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s ease;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-body);position:relative;overflow:hidden}
.sig-method-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border);transition:background .2s ease}
.sig-method-card:hover{border-color:var(--red-3);box-shadow:var(--shadow-lg);background:var(--red-fog)}
.sig-method-card:hover::before{background:var(--red)}
.sig-method-icon-wrap{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:box-shadow .25s ease}
.sig-method-icon-wrap.draw{background:var(--red-dim);color:var(--red);border:1.5px solid var(--red-border)}
.sig-method-card:hover .sig-method-icon-wrap{box-shadow:0 0 0 10px rgba(21,147,121,.08)}
.sig-method-label{font-size:.87rem;font-weight:700;color:var(--ink)}.sig-method-hint{font-size:.72rem;color:var(--ink-4);line-height:1.45}
.ed-steps{display:flex;align-items:center;margin-bottom:1.3rem;justify-content:center}
.ed-step{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:0 0 auto}
.ed-step-num{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--ink-4);transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.ed-step.active .ed-step-num{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(21,147,121,.2)}
.ed-step.done .ed-step-num{border-color:var(--ok);background:var(--ok);color:#fff;box-shadow:0 2px 8px rgba(22,116,74,.2)}
.ed-step-label{font-size:.62rem;font-weight:600;color:var(--ink-4);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:color .2s}
.ed-step.active .ed-step-label{color:var(--red);font-weight:700}.ed-step.done .ed-step-label{color:var(--ok)}
.ed-step-line{flex:1;height:2px;background:var(--border);min-width:36px;margin-bottom:1rem;transition:background .2s}
.ed-step.done+.ed-step-line{background:var(--ok)}

/* ── Workflow Board (Dashboard BPMN) ── */
.wf-board{display:grid;gap:1rem;margin-bottom:1.5rem}
.wf-comp-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.6rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.wf-comp-bar-name{font-weight:700;font-size:.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-comp-bar-meta{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.wf-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}
.wf-kpi-card{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);transition:box-shadow .2s,border-color .2s;position:relative}
.wf-kpi-card:hover{box-shadow:var(--shadow-md)}
.wf-kpi-card--link{cursor:pointer}
.wf-kpi-card--link:hover{box-shadow:var(--shadow-md);border-color:var(--red-border)}
.wf-kpi-caret{position:absolute;bottom:.5rem;right:.6rem;font-size:.6rem;color:var(--ink-5)}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--primary);color:var(--white);font-size:.6rem;font-weight:700;margin-left:.35rem;vertical-align:middle;line-height:1}
.fd-tab.active .tab-badge{background:var(--white);color:var(--primary)}

/* ── Project lifecycle & KPI classes ── */
.proj-fin-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.65rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:1.1rem}
.proj-fin-item{display:flex;flex-direction:column;gap:.2rem}
.fin-bar{height:5px;border-radius:3px;background:var(--bg-2,var(--bg));overflow:hidden;margin-top:.3rem}
.fin-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}
.proj-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem;margin-bottom:.85rem}
.proj-kpi-card{padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:.2rem}
.proj-kpi-card .kpi-val{font-family:var(--font-display,var(--font));font-size:1.1rem;font-weight:700}
.proj-kpi-card .kpi-lbl{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4);white-space:nowrap}
.lifecycle-trail{display:flex;flex-direction:column;gap:.5rem}
.lifecycle-step{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem .9rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface)}
.lifecycle-step.done{border-color:var(--ok-border,#b7ebd4);background:var(--ok-bg,#f0fdf7)}
.lifecycle-step.active-step{border-color:var(--info-border,#93c5fd);background:var(--info-bg,#eff6ff)}
.lifecycle-step-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;margin-top:.1rem}
.wf-kpi-icon{font-size:1.15rem;flex-shrink:0;width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--surface)}
.wf-kpi-body{min-width:0}
.wf-kpi-value{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--ink);line-height:1.1}
.wf-kpi-label{font-size:.68rem;font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-pipeline{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:.5rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}
.wf-pipe-arrow{display:flex;align-items:center;justify-content:center;color:var(--border-2);font-size:.55rem;padding:0 .15rem;margin-top:1.1rem;flex-shrink:0}
.wf-pipe-phase{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .6rem;min-width:90px;max-width:120px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s;text-align:center;position:relative;flex-shrink:0}
.wf-pipe-phase:hover{background:var(--surface);box-shadow:var(--shadow-sm)}
.wf-pipe-phase.expanded{background:var(--surface);box-shadow:var(--shadow-md)}
.wf-pipe-phase.has-items .wf-pipe-count{font-weight:800}
.wf-pipe-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:#fff;background:var(--phase-color,var(--ink-4));box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.wf-pipe-phase:hover .wf-pipe-icon{box-shadow:var(--shadow-md)}
.wf-pipe-count{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1}
.wf-pipe-label{font-size:.66rem;font-weight:600;color:var(--ink-3);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wf-pipe-bar{width:100%;height:4px;border-radius:2px;background:var(--bg);overflow:hidden;margin-top:.15rem}
.wf-pipe-bar-fill{height:100%;border-radius:2px;background:var(--phase-color,var(--ink-4));transition:width .4s var(--ease)}
.comp-phase.done .wf-pipe-icon{background:var(--ok)}
.comp-phase.active .wf-pipe-icon{animation:tlPulse 2s ease-in-out infinite}
.comp-phase.pending .wf-pipe-icon{background:var(--border-2)}
.comp-phase.pending .wf-pipe-count{color:var(--ink-5)}
.wf-pipe-action-dot{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--primary);color:#fff;font-size:.42rem;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* ── Competition process phase grid ── */
.comp-proc-card>.card-body{padding:0}
.comp-proc-header{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm) var(--r-sm) 0 0}
.comp-proc-header-left{display:flex;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;flex:1;min-width:0}
.comp-proc-toggle{margin-left:auto;gap:.35rem;font-size:.72rem;padding:.25rem .65rem}
.comp-phase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;padding:.75rem}
.comp-phase-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.85rem .6rem .6rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:center;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.comp-phase-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-xs)}
.comp-phase-card.active{border-color:var(--border-2);box-shadow:var(--shadow-sm)}
.comp-phase-card-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;box-shadow:var(--shadow-xs);flex-shrink:0}
.comp-phase-card-count{font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1;margin:.1rem 0}
.comp-phase-card-label{font-size:.68rem;color:var(--ink-3);line-height:1.3;text-align:center;word-break:break-word}
.comp-phase-card-bar{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0}
.wf-item-title{font-weight:600;font-size:.82rem;color:var(--ink);font-family:var(--font-display)}
.wf-lane-detail{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--white);overflow:hidden;animation:fadeSlideDown .25s var(--ease)}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.wf-lane-header{padding:1rem 1.1rem;border-bottom:1px solid var(--border);border-left:3px solid var(--info)}
.wf-lane-title-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.wf-lane-title-row h3{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--ink);margin:0}
.wf-lane-title-row i{font-size:.85rem}
.wf-lane-desc{font-size:.78rem;color:var(--ink-3);margin:0;line-height:1.55}
.wf-lane-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.wf-status-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;padding:.2rem .5rem;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);color:var(--ink-3)}
.wf-status-chip strong{color:var(--ink)}
.wf-lane-table-wrap{overflow-x:auto}
.wf-lane-table{width:100%;border-collapse:collapse;font-size:.82rem}
.wf-lane-table thead th{padding:.55rem .85rem;text-align:left;font-weight:700;color:var(--ink-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--border);background:var(--surface)}
.wf-lane-table tbody td{padding:.55rem .85rem;border-bottom:1px solid var(--border);vertical-align:middle}
.wf-lane-table tbody tr:hover{background:var(--bg)}
.wf-item-title{font-weight:600;color:var(--ink);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-deadline-warn{font-size:.65rem;color:var(--warn);display:flex;align-items:center;gap:.25rem;margin-top:.2rem}
.wf-lane-empty{padding:2rem;text-align:center;color:var(--ink-4)}
.wf-lane-empty i{font-size:1.5rem;display:block;margin-bottom:.5rem}
.wf-lane-empty p{margin:0;font-size:.82rem}
.wf-bottom-row{display:flex;gap:1rem;flex-wrap:wrap}
.wf-admin-focus,.wf-proj-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.65rem}
.wf-focus-item{text-align:center}
.wf-focus-val{font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1.1}
.wf-focus-lbl{font-size:.66rem;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}
.wf-my-task{padding:.6rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs)}
.wf-my-task-title{font-weight:600;font-size:.8rem}
.wf-my-task-status{font-size:.72rem;color:var(--ink-4);margin-top:.15rem}
/* ── Dashboard responsive grid helpers ── */
.dash-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;font-size:.85rem}
.dash-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;font-size:.78rem}
/* Inline status pill used in dashboard cards/tables */
.dash-pill{display:inline-block;padding:.22rem .6rem;border-radius:var(--r-pill);font-size:.64rem;font-weight:700;white-space:nowrap;color:var(--white);letter-spacing:.03em;text-transform:uppercase}
/* Pipeline card refinements — blend BPMN with ERP card system */
.wf-pipeline-card{overflow:visible}
.wf-pipeline-card>.section-label{margin-bottom:.85rem}
.wf-pipeline-card>.section-label::after{display:none}

/* ══════════════════════════════════════════════════════════════════
   MISSION CONTROL DASHBOARD — unified section language v5.9.56
   The dashboard is composed of stacked .mc-section blocks that share
   the briefing's calm aesthetic: white surface, hairline border,
   generous padding, hairline-divider headers, no boxed card chrome,
   no gradients, soft transitions. Replaces the prior priority-grid
   + radar + boxed pipeline + quick-action card layout.
   ══════════════════════════════════════════════════════════════════ */
.mc-dashboard{display:flex;flex-direction:column;gap:.85rem}

/* ── Generic section shell ── */
.mc-section{background:var(--white);border:1px solid var(--border);border-radius:calc(var(--r) + 4px);padding:1.1rem 1.4rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--shadow-xs)}
.mc-section-head{display:flex;align-items:center;justify-content:space-between;gap:.85rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.mc-section-title-wrap{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;min-width:0;flex:1}
.mc-section-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.005em}
.mc-section-sub{font-size:.76rem;color:var(--ink-3);font-weight:500}
.mc-section-count{font-size:.7rem;color:var(--ink-4);font-weight:600;padding:.12rem .5rem;border-radius:999px;background:var(--bg);border:1px solid var(--border)}
.mc-section-spin{font-size:.78rem;color:var(--ink-4)}
.mc-section-action{background:transparent;border:none;color:var(--ink-4);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease);flex-shrink:0;font-size:.82rem}
.mc-section-action:hover:not(:disabled){background:var(--bg-2);color:var(--ink)}
.mc-section-action:disabled{opacity:.4;cursor:default}
/* ── Server-verified live badge (pipeline header) ── */
.mc-section-badge-live{font-size:.64rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-border);display:inline-flex;align-items:center;gap:.25rem;animation:liveBadgeIn .35s var(--ease-spring)}
.mc-section-badge-live i{font-size:.6rem}
@keyframes liveBadgeIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
/* ── Lane-detail server-verified chip ── */
.wf-lane-sv-chip{font-size:.62rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-border);margin-left:.35rem;white-space:nowrap}
.wf-lane-sv-chip i{font-size:.55rem;margin-right:.15rem}
.mc-section-loading{padding:1.4rem;text-align:center;color:var(--ink-4);font-size:.8rem}
.mc-section-loading .fa-spinner{margin-right:.5rem}

/* ── Workload pipeline (interactive BPMN strip · calm tone) ── */
.mc-pipeline{display:flex;align-items:stretch;gap:.4rem;overflow-x:auto;padding:.1rem 0 .3rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}
.mc-pipe-step{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .55rem .55rem;min-width:84px;max-width:104px;flex:0 0 auto;border-radius:var(--r);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease);text-align:center;position:relative;border:1px solid var(--border)}
.mc-pipe-step:hover{background:var(--bg);border-color:var(--border-2)}
.mc-pipe-step.has-items{border-color:var(--border-2)}
.mc-pipe-step.active-phase{background:var(--bg);border-color:var(--ink-4)}
/* Auto-highlight: server-picked active phase per role. Softer than the
   user-clicked .active-phase so explicit selection always wins visually. */
.mc-pipe-step.current-phase:not(.active-phase){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.mc-pipe-step.current-phase:not(.active-phase) .mc-step-no{color:var(--primary)}
.mc-step-no{font-size:.66rem;font-weight:700;color:var(--ink-5);line-height:1;font-family:var(--font-display)}
.mc-pipe-step.has-items .mc-step-no{color:var(--ink-3)}
.mc-pipe-step.active-phase .mc-step-no{color:var(--ink)}
.mc-pipe-step .wf-pipe-icon{width:30px;height:30px;font-size:.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s var(--ease)}
.mc-pipe-step:hover .wf-pipe-icon{transform:scale(1.05)}
.mc-pipe-step .wf-pipe-name{font-size:.66rem;font-weight:600;color:var(--ink-3);line-height:1.2;max-width:100%}
.mc-pipe-step.has-items .wf-pipe-name{color:var(--ink)}
.mc-pipe-step .wf-pipe-count{font-family:var(--font-display);font-size:1.1rem;font-weight:700;line-height:1}
.mc-sla-chip{font-size:.6rem;font-weight:600;color:var(--ink-4);background:transparent;padding:0;white-space:nowrap;letter-spacing:0}
.mc-pipe-step .wf-pipe-bar{width:100%;height:2px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:.1rem}
.mc-pipe-step .wf-pipe-bar-fill{height:100%;border-radius:2px;transition:width .5s var(--ease)}

/* ── Quick actions (compact link strip) ── */
.mc-quickrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.mc-quickrow-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem .85rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease);font-family:var(--font-body);text-align:left}
.mc-quickrow-item:hover{background:var(--white);border-color:var(--border-2)}
.mc-quickrow-icon{font-size:.95rem;color:var(--ink-3);width:28px;text-align:center}
.mc-quickrow-label{font-size:.84rem;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-quickrow-hint{font-size:.7rem;color:var(--ink-4);font-weight:500;white-space:nowrap}

/* ── Lane detail — flush, no boxed card chrome ── */
.mc-dashboard .wf-lane-detail{background:var(--white);border:1px solid var(--border);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow-xs);margin-top:0;padding:0;overflow:hidden}
.mc-dashboard .wf-lane-detail .wf-lane-header{padding:1.1rem 1.4rem;border-left:none;border-bottom:1px solid var(--border);background:transparent;position:relative}
.mc-dashboard .wf-lane-detail .wf-lane-header::before{content:'';position:absolute;left:0;top:1.1rem;bottom:1.1rem;width:3px;border-radius:0 2px 2px 0;background:currentColor;opacity:.5}
.mc-dashboard .wf-lane-detail .wf-lane-title-row h3{font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:-.005em}
.mc-dashboard .wf-lane-detail .wf-lane-table-wrap{padding:.4rem .6rem .9rem}
.mc-dashboard .wf-lane-detail .wf-lane-close-btn{margin:.4rem 1rem 1rem;background:transparent;color:var(--ink-3);border-color:var(--border)}
.mc-dashboard .wf-lane-detail .wf-lane-close-btn:hover{background:var(--bg-2);color:var(--ink)}

/* ── Responsive: mission control ── */
@media(max-width:760px){
  .mc-section{padding:.95rem 1rem 1.1rem}
  .mc-section-head{flex-wrap:wrap;gap:.5rem}
  .mc-quickrow{grid-template-columns:1fr}
  .mc-pipe-step{min-width:72px;max-width:88px;padding:.45rem .35rem}
  .mc-pipe-step .wf-pipe-icon{width:26px;height:26px;font-size:.6rem}
  .mc-pipe-step .wf-pipe-name{font-size:.6rem}
  .mc-pipe-step .wf-pipe-count{font-size:.95rem}
}

/* ── Legacy mc-* selectors retained as no-ops to avoid stale references ── */
.mc-status-bar,.mc-priority-grid,.mc-priority-card,.mc-deadline-radar,.mc-radar-day,.mc-quick-actions,.mc-quick-action{display:none!important}

/* ══════════════════════════════════════════════════════════════════
   EXECUTIVE BRIEFING — calm hero block at top of overview (v5.9.55)
   Greeting · session badge · two hero metrics · KPI tiles · attention feed
   Visual spec: dark, generous padding, soft borders, no gradients.
   ══════════════════════════════════════════════════════════════════ */
.mc-briefing{background:var(--white);border:1px solid var(--border);border-radius:calc(var(--r) + 4px);padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:1.25rem;box-shadow:var(--shadow-xs)}
.mc-briefing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.mc-briefing-greet{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.mc-briefing-hello{font-size:.82rem;color:var(--ink-3);font-weight:500}
.mc-briefing-hello strong{color:var(--ink);font-weight:700}
.mc-briefing-session{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.mc-briefing-meta{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.mc-briefing-date{font-size:.78rem;color:var(--ink-3);font-weight:500;white-space:nowrap}
.mc-briefing-menu{background:transparent;border:none;color:var(--ink-4);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.mc-briefing-menu:hover{background:var(--bg-2);color:var(--ink)}

/* ── Hero row: 2 large metric cards ── */
.mc-hero-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mc-hero-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;min-height:148px;transition:border-color .18s var(--ease),transform .12s var(--ease)}
.mc-hero-card[role="button"]{cursor:pointer}
.mc-hero-card[role="button"]:hover{border-color:var(--border-2);transform:translateY(-1px)}
.mc-hero-label{font-size:.78rem;color:var(--ink-3);font-weight:600;letter-spacing:.005em}
.mc-hero-figure-row{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}
.mc-hero-figure{font-family:var(--font-display);font-size:2.6rem;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.mc-hero-trend{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600}
.mc-hero-trend.up{color:var(--ok)}
.mc-hero-trend.flat{color:var(--ink-4)}
.mc-hero-trend.down{color:var(--err)}
.mc-hero-segbar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--border);margin-top:.2rem}
.mc-hero-segbar .seg{display:block;height:100%}
.mc-hero-segbar .seg.ok{background:var(--ok)}
.mc-hero-segbar .seg.warn{background:var(--warn)}
.mc-hero-segbar .seg.err{background:var(--err)}
.mc-hero-breakdown{display:flex;justify-content:space-between;gap:.85rem;font-size:.74rem;color:var(--ink-3);font-weight:500}
.mc-hero-sub{font-size:.78rem;color:var(--ink-3)}
.mc-hero-progress{height:6px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:.35rem}
.mc-hero-progress-fill{height:100%;background:linear-gradient(90deg,var(--info),var(--brand-teal,var(--info)));border-radius:999px;transition:width .4s var(--ease)}
.mc-hero-mini-radar{display:flex;align-items:flex-end;gap:.25rem;height:28px;margin-top:.4rem}
.mc-mini-bar{display:block;width:.45rem;background:var(--border-2);border-radius:2px;transition:background .15s var(--ease)}
.mc-mini-bar.has{background:var(--info)}
.mc-mini-bar.today{background:var(--brand-teal,var(--info));box-shadow:0 0 0 1px var(--ink-5)}

/* ── KPI tiles row ── */
.mc-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.mc-kpi-tile{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:.95rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;cursor:pointer;transition:border-color .15s var(--ease),transform .12s var(--ease)}
.mc-kpi-tile:hover{border-color:var(--border-2);transform:translateY(-1px)}
.mc-kpi-tile.warn{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-bg,transparent)}
.mc-kpi-tile.warn .mc-kpi-label{color:var(--warn)}
.mc-kpi-label{font-size:.76rem;color:var(--ink-3);font-weight:600}
.mc-kpi-value{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}

/* ── Attention feed ── */
.mc-attention{display:flex;flex-direction:column;gap:.6rem;padding-top:.4rem;border-top:1px solid var(--border)}
.mc-attention-head{display:flex;justify-content:space-between;align-items:baseline;gap:.85rem;padding-top:.85rem}
.mc-attention-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--ink)}
.mc-attention-sort{font-size:.7rem;color:var(--ink-4);font-weight:500}
.mc-attention-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mc-attention-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;padding:.7rem 0;border-top:1px solid var(--border);cursor:pointer;transition:background .12s var(--ease)}
.mc-attention-item:first-child{border-top:none}
.mc-attention-item:hover{background:var(--bg)}
.mc-attention-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:.15rem}
.mc-attention-dot.err{background:var(--err);box-shadow:0 0 6px var(--err)}
.mc-attention-dot.warn{background:var(--warn)}
.mc-attention-dot.info{background:var(--info)}
.mc-attention-body{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.mc-attention-itm-title{font-size:.86rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-attention-itm-sub{font-size:.72rem;color:var(--ink-4)}
.mc-attention-chev{color:var(--ink-5);font-size:.72rem;flex-shrink:0;padding-right:.25rem}
.mc-attention-item:hover .mc-attention-chev{color:var(--ink-3)}

@media(max-width:760px){
  .mc-briefing{padding:1.1rem 1rem}
  .mc-hero-row{grid-template-columns:1fr}
  .mc-hero-figure{font-size:2.1rem}
  .mc-kpi-row{grid-template-columns:1fr}
  .mc-briefing-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .mc-briefing-meta{align-self:stretch;justify-content:space-between}
}

/* ── Responsive: mission control ── */
@media(max-width:900px){
  .mc-priority-grid{grid-template-columns:1fr;gap:.55rem}
  .mc-priority-card{min-height:auto}
  .mc-quick-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .mc-status-bar{flex-wrap:wrap;gap:.45rem;padding:.5rem .75rem}
  .mc-status-bar .btn{margin-left:0;width:100%}
  .mc-quick-actions{grid-template-columns:1fr}
  .mc-pipe-step{min-width:64px;max-width:80px;padding:.4rem .3rem}
  .mc-pipe-step .wf-pipe-icon{width:26px;height:26px;font-size:.6rem}
  .mc-pipe-step .wf-pipe-name{font-size:.55rem}
}
@media(max-width:768px){
/* ── BPMN ── */
.wf-pipeline{gap:0;padding-bottom:.75rem}
.wf-pipe-phase{min-width:72px;max-width:90px;padding:.6rem .35rem}
.wf-pipe-icon{width:30px;height:30px;font-size:.65rem}
.wf-pipe-count{font-size:1rem}
.wf-pipe-label{font-size:.58rem}
.wf-kpi-row{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem}
.wf-kpi-card{padding:.75rem}
.wf-kpi-value{font-size:1.1rem}
.wf-bottom-row{flex-direction:column}
}

.comp-tl{position:relative;padding:0 0 0 2.8rem}
.comp-tl::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:2px;background:var(--border)}
.comp-tl-step{position:relative;padding-bottom:1.5rem}
.comp-tl-step:last-child{padding-bottom:0}
.comp-tl-step:last-child .comp-tl-rail::after{display:none}
.comp-tl-dot{position:absolute;left:-2.8rem;top:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#fff;z-index:1;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s}
.comp-tl-dot.done{background:var(--ok)}.comp-tl-dot.active{background:var(--gold);animation:tlPulse 2s ease-in-out infinite}.comp-tl-dot.pending{background:var(--border-2);color:var(--ink-4)}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 0 rgba(35,56,116,.35)}50%{box-shadow:0 0 0 6px rgba(35,56,116,0)}}
.comp-tl-card{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--white);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.comp-tl-card:hover{box-shadow:var(--shadow-md)}
.comp-tl-step.done .comp-tl-card{border-left:3px solid var(--ok)}
.comp-tl-step.active .comp-tl-card{border-left:3px solid var(--gold);background:var(--warn-bg)}
.comp-tl-step.pending .comp-tl-card{opacity:.72}
.comp-tl-head{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.comp-tl-title{font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--ink);flex:1;line-height:1.35}
.comp-tl-badge{font-size:.63rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .6rem;border-radius:var(--r-pill);white-space:nowrap}
.comp-tl-badge.done{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.comp-tl-badge.active{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.comp-tl-badge.pending{background:var(--bg);color:var(--ink-4);border:1px solid var(--border)}
.comp-tl-body{padding:.75rem 1rem}
.comp-tl-desc{font-size:.82rem;color:var(--ink-3);line-height:1.6;white-space:pre-wrap;margin:0}
.comp-tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.55rem}
.comp-tl-tag{display:inline-flex;align-items:center;gap:.28rem;font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);color:var(--ink-3)}
.comp-tl-tag i{font-size:.62rem}
.comp-tl-tag.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info)}
.comp-tl-tag.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.comp-tl-tag.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)}

/* Competition summary grid */
.comp-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.65rem;padding:.5rem 0}
.comp-summary-stat{text-align:center;padding:.55rem .35rem;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);transition:box-shadow .15s}
.comp-summary-stat:hover{box-shadow:var(--shadow-sm)}
.comp-tl-tag.err{background:var(--err-bg);border-color:var(--err-border);color:var(--err)}

.ed-doc-info{background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-xs);padding:.6rem .85rem;margin-bottom:.9rem;font-size:.78rem}
.ed-doc-info-row{display:flex;align-items:center;gap:.4rem;color:var(--info);line-height:1.5}
.ed-doc-info-row.sub{font-size:.7rem;color:var(--ink-4);margin-top:.15rem}
.ed-modal-msg{font-size:.85rem;color:var(--ink-3);margin-bottom:.8rem}
.ed-hint-text{font-size:.82rem;color:var(--ink-2);margin-bottom:.75rem;line-height:1.6}
.ed-info-note{display:flex;align-items:flex-start;gap:.3rem;font-size:.74rem;color:var(--ink-3);line-height:1.55;margin-bottom:.75rem;padding:.55rem .7rem;background:var(--bg);border-radius:var(--r-xs);border:1px solid var(--border)}
.ed-phase-box{padding:.1rem 0}
.ed-meta-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem 1.1rem;margin-bottom:.85rem;font-size:.78rem}
.ed-meta-row{display:flex;align-items:baseline;gap:.5rem;padding:.25rem 0;border-bottom:1px solid var(--border)}.ed-meta-row:last-child{border-bottom:none}
.ed-meta-key{font-weight:700;color:var(--ink-3);white-space:nowrap;min-width:110px;font-size:.72rem;letter-spacing:.02em}
.ed-meta-val{color:var(--ink-2);word-break:break-all;flex:1}
.ed-meta-val.mono{font-family:monospace;font-size:.7rem;color:var(--ink-3)}
.ed-status-badge{display:inline-flex;align-items:center;gap:.28rem;font-size:.72rem;font-weight:700;padding:.16rem .5rem;border-radius:var(--r-pill)}
.ed-status-badge.signed{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.ed-status-badge.pending{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.ed-portal-btn{display:flex;justify-content:center;width:100%;margin-bottom:.65rem}
.ed-polling{display:flex;align-items:center;gap:.7rem;background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-sm);padding:.65rem .95rem;font-size:.78rem;color:var(--info);margin:.7rem 0}
.ed-pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--info);animation:edPulse 1.2s ease-in-out infinite;flex-shrink:0}
@keyframes edPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.5)}}
.ed-signed-banner{background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.88rem;font-weight:700;color:var(--ok);display:flex;flex-direction:column;gap:.2rem;margin-top:.7rem;animation:mBoxIn .25s var(--ease-spring)}
.ed-signed-hint{color:var(--ok);font-size:.78rem;display:flex;align-items:center;gap:.42rem;margin-top:.45rem}
.ed-warning-box{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--r-xs);padding:.6rem .85rem;font-size:.76rem;color:var(--warn);margin:.6rem 0;display:flex;align-items:flex-start;gap:.4rem;line-height:1.5}
.ed-error-box{background:var(--err-bg);border:1px solid var(--err-border);border-radius:var(--r-sm);padding:.75rem 1rem;font-size:.8rem;color:var(--err);margin-top:.6rem}

.doc-cat-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;padding:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.doc-cat-tab{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:1px solid transparent;color:var(--ink-3);font-size:.78rem;font-weight:600;padding:.42rem .8rem;border-radius:var(--r-xs);cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease);font-family:inherit}
.doc-cat-tab:hover{background:var(--white);color:var(--ink);box-shadow:var(--shadow-xs)}
.doc-cat-tab.active{background:var(--brand-gradient);color:#fff;border-color:var(--brand-teal);box-shadow:var(--shadow-sm)}
.doc-cat-tab-label{font-size:.78rem}
.doc-cat-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:rgba(0,0,0,.09);font-size:.62rem;font-weight:700;margin-left:.38rem;line-height:1}
.doc-cat-tab.active .doc-cat-tab-count{background:rgba(255,255,255,.22)}
.doc-cat-tab-label{line-height:1}
.doc-cat-tab-count{font-size:.66rem;font-weight:700;padding:.08rem .4rem;border-radius:var(--r-pill);background:var(--bg);color:var(--ink-4);min-width:1.4rem;text-align:center;line-height:1.3}
.doc-cat-tab.active .doc-cat-tab-count{background:rgba(255,255,255,.22);color:#fff}
.doc-section{margin-bottom:1.6rem}
.doc-section:last-child{margin-bottom:0}
.doc-section-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.7rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)}
.doc-section-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink);letter-spacing:.01em}
.doc-section-count{font-size:.7rem;font-weight:600;color:var(--ink-4)}

/* ── Library Manager (Admin) — v4.7.0 ── */
.folder-item{cursor:pointer;transition:background .15s, border-left-color .15s;user-select:none}
.folder-item:hover{background:var(--bg)}
.folder-item.active{background:var(--primary-dim);border-left-color:var(--primary)!important}
.folder-item.folder-creating{opacity:.6;pointer-events:none}
.library-layout{display:grid;grid-template-columns:240px 1fr;gap:1rem;align-items:start}
@media(max-width:768px){.library-layout{grid-template-columns:1fr}}

/* ── Library Manager row animations (v4.7.0) ── */
.lib-row-deleting{animation:libRowFadeOut .3s ease forwards;pointer-events:none}
.lib-row-deleting td{opacity:.4;transition:opacity .2s}
.lib-row-uploading{background:var(--info-bg);animation:libRowPulse 1.2s ease infinite}
@keyframes libRowFadeOut{0%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.96);height:0;padding-top:0;padding-bottom:0}}
@keyframes libRowPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Calendar UI Styles ── */
.calendar-layout{display:grid;grid-template-columns:2.5fr 1.5fr;gap:1.25rem;align-items:start}
@media(max-width:860px){.calendar-layout{grid-template-columns:1fr}}
.calendar-header{display:flex;justify-content:space-between;align-items:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-day-header{text-align:center;font-size:.65rem;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em;padding-bottom:.4rem}
.calendar-day{aspect-ratio:1;border:1px solid var(--border);border-radius:var(--r-xs);padding:.35rem;display:flex;flex-direction:column;background:var(--white);transition:border-color var(--t),box-shadow var(--t);cursor:pointer;position:relative}
.calendar-day:hover:not(.empty){border-color:var(--red-3);box-shadow:var(--shadow-sm);z-index:1}
.calendar-day.empty{background:transparent;border-color:transparent;pointer-events:none}
.calendar-day.has-event{border-color:var(--warn-border);background:var(--warn-bg)}
.calendar-day.has-event:hover{border-color:var(--warn)}
.calendar-day.selected{border-color:var(--red);box-shadow:0 0 0 2px var(--red-dim)}
.calendar-date{font-size:.78rem;font-weight:600;color:var(--ink-2);align-self:flex-start;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin-bottom:auto}
.calendar-day.today .calendar-date{background:var(--red);color:#fff}
.calendar-event-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);align-self:center;margin-top:auto}

/* Desktop responsive: scale tabs and user panel proportionally */
@media(min-width:1600px){.nav-tab{font-size:.82rem;padding:.5rem 1.1rem .45rem;min-width:90px}}
@media(min-width:1400px){.nav-tab{font-size:.8rem;padding:.5rem .9rem .45rem;min-width:80px}}
@media(max-width:1300px){.nav-tab{font-size:.7rem;padding:.4rem .6rem .35rem;min-width:56px}.nav-tab i{font-size:.92rem}.user-panel{gap:.35rem;margin-left:.25rem}}
@media(max-width:1200px){.nav-tab{font-size:.65rem;padding:.35rem .5rem .3rem;min-width:50px}.nav-tab i{font-size:.85rem}.user-name{max-width:70px}.role-badge{display:none}.logout-btn{padding:.35rem .65rem;min-height:38px;font-size:.75rem}}
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.user-name{display:none}}
@media(max-width:960px){.role-badge{display:none}.logout-btn{font-size:0;padding:.38rem .55rem;min-width:36px;justify-content:center}.logout-btn i{font-size:.88rem!important}.logo-img{width:30px;height:30px}.science-logo-img{width:30px;height:30px}.logo-divider{height:20px}.brand-label{font-size:.42rem;letter-spacing:.12em}}
@media(max-width:860px){.main-content{padding:1.5rem 1rem}.header-inner,.topbar-inner,.breadcrumb-inner{padding:0 1rem}.topbar-brand span.topbar-sep,.topbar-links{display:none}.user-name{display:none}.card-header{flex-direction:column;align-items:flex-start}.page-top{flex-direction:column}.page-top-actions{width:100%}.page-top-actions .search-wrap{flex:1}.page-top-actions .btn{flex:1;justify-content:center}.search-input{min-width:0;width:100%}.detail-full{grid-column:1/-1}.sig-method-grid{grid-template-columns:1fr}
.comp-tl{padding-left:2.2rem}
.comp-tl::before{left:14px}
.comp-tl-dot{left:-2.2rem;width:30px;height:30px;font-size:.7rem}
.comp-tl-head{padding:.6rem .85rem;gap:.45rem}
.comp-tl-title{font-size:.82rem}
.comp-tl-body{padding:.6rem .85rem}
.comp-tl-desc{font-size:.78rem}
/* ── Reviewer pool grid ── */
.reviewer-pool-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.doc-preview-frame{min-height:200px}
/* ── Header: compact single row ── */
.header-inner{flex-wrap:nowrap!important;padding:0 .45rem!important;gap:.35rem}
.logo-wrap{display:none}
.brand-home-btn{display:none}
.header-vr{display:none}
/* Show nav-tabs inline – stretch to fill all space */
.nav-tabs{display:flex!important;gap:.3rem;padding:0;border-radius:0;margin-left:0;flex:1 1 0;min-width:0;background:transparent;justify-content:stretch}
.nav-tab{flex:1 1 0;min-width:0;height:40px;padding:0;border-radius:10px;gap:0;margin-bottom:0;background:var(--surface);border:1.5px solid var(--border);-webkit-tap-highlight-color:rgba(21,147,121,.1);touch-action:manipulation}
.nav-tab i{font-size:1.05rem}
.nav-tab span{display:none}
.nav-tab.active{background:var(--white);border-color:var(--red-border);box-shadow:0 2px 6px rgba(21,147,121,.14)}
.nav-tab.active i{color:var(--red)}
.nav-tab:hover{background:var(--white);box-shadow:var(--shadow-xs)}
/* Hide separate mobile nav */
.mobile-top-nav{display:none!important}
.user-panel{display:none!important}
.hamburger-btn{display:flex}
/* ── Footer: stack on mobile ── */
.footer-social-inner{gap:1.1rem;padding:.75rem 1rem}
.footer-social-link span{display:none}
.footer-social-link i{font-size:1.25rem}
.footer-main{padding:1.6rem 1rem 1.1rem}
.footer-grid{grid-template-columns:1fr;gap:1.6rem;text-align:left}
.footer-col-brand{align-items:flex-start}
.footer-brand-logos{justify-content:flex-start}
/* Column 4 stays left-aligned to match the other footer columns. The НИИ
   science logo is the only centered item, sitting between Links and the
   project-contact block (order set in the 980px breakpoint). */
.footer-project-sci-link{margin:.4rem auto .9rem;justify-content:center}
.footer-col-info{text-align:left}
.footer-col-info .footer-col-title{padding-right:0;text-align:left;justify-content:flex-start}
.footer-col-info .footer-link-list{align-items:flex-start}
.footer-bottom{padding:.75rem 1rem;flex-direction:column;gap:.25rem;text-align:center}
.footer-bottom-sep{display:none}
/* ── Content layout ── */
.page-top-left h2{letter-spacing:-.02em}
.page-top-left p{font-size:.78rem}
.page-top{margin-bottom:1rem;gap:.65rem}
.main-content{padding:1.15rem .85rem 2rem}
/* ── Stats: 2-col with fluid sizing ── */
.stats-row{grid-template-columns:repeat(2,1fr);gap:.55rem}
.stat-btn{padding:.9rem .6rem;border-radius:12px;box-shadow:none;border:1.5px solid var(--border)}
.stat-btn:hover,.stat-btn[data-clickable]:hover{transform:none;box-shadow:none}
.stat-btn.active{border-color:var(--red-border);box-shadow:0 0 0 1px rgba(21,147,121,.06)}
.stat-num{font-size:1.5rem}.stat-label{font-size:.58rem}
/* ── Cards: softer, rounder ── */
.card{border-radius:16px;border:1.5px solid var(--border);box-shadow:none;margin-bottom:1rem}
.card:hover{box-shadow:none}
.card-body{padding:1rem 1.1rem}
.card-header{padding:.8rem 1.1rem}
/* ── Table: generous spacing ── */
td{padding:.7rem .7rem;font-size:.82rem}th{padding:.65rem .7rem}
.applicant-cell{gap:.5rem}
/* ── Topbar / breadcrumb hide ── */
.site-topbar{display:none}.breadcrumb-strip{display:none}
/* ── Documents: single column, bigger tap targets ── */
.document-grid{grid-template-columns:1fr;gap:.65rem}
.doc-card{padding:.9rem;border-radius:14px;border-width:1.5px}
.doc-card:hover{transform:none;box-shadow:none}
.doc-header{gap:.5rem;margin-bottom:.55rem}
.doc-icon-wrap{width:36px;height:36px;font-size:.95rem;border-radius:8px}
.doc-title{font-size:.82rem;line-height:1.4;word-break:break-word}
.doc-meta{flex-direction:column;align-items:flex-start;gap:.4rem}
.doc-meta>div{width:100%}
.doc-meta .btn-xs{min-height:36px;padding:.35rem .7rem;font-size:.74rem;border-radius:10px;flex:1 1 0}
.doc-meta>div:last-child{display:flex;gap:.35rem}
.doc-meta>.btn{width:100%;justify-content:center;min-height:40px;border-radius:10px}
.doc-card .doc-meta{flex-direction:row;align-items:center;flex-wrap:wrap}
.doc-type-badge{font-size:.6rem;padding:.15rem .5rem;border-radius:4px}
.doc-info-banner{font-size:.74rem;padding:.65rem .85rem;border-radius:12px;gap:.45rem}
.doc-info-banner i{font-size:.82rem}
.doc-preview-frame{height:50vh;min-height:200px}
.doc-preview-text{padding:1rem;font-size:.84rem;max-height:55vh}
/* Inside fullscreen doc-viewer, the preview MUST fill the box — the
   55vh/50vh caps above leave half the screen empty on mobile. */
.modal-box.fullscreen .doc-preview-frame,
.modal-box.fullscreen .doc-preview-text{height:100%!important;max-height:none!important;min-height:0;flex:1 1 auto}
/* ── Card header: allow filter scroll ── */
.card{overflow:visible}
.card-header{overflow:visible;padding:.8rem .85rem;gap:.65rem}
.card-header .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.3rem;margin:0 -.85rem;padding:0 .85rem .1rem;width:calc(100% + 1.7rem)}
.card-header .filter-bar::-webkit-scrollbar{display:none}
.card-header .filter-bar .chip{flex-shrink:0;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;border-radius:10px;padding:.3rem .75rem;font-size:.72rem}
/* ── Mobile table → stacked card rows ── */
.table-wrap table thead{display:none}
.table-wrap table,.table-wrap table tbody,.table-wrap table tr,.table-wrap table td{display:block;width:100%}
.table-wrap table tr{padding:.85rem .9rem;border-bottom:1.5px solid var(--border);position:relative;background:var(--white)}
.table-wrap table tr:nth-child(even){background:var(--surface)}
.table-wrap table td{padding:.15rem 0;border:none;font-size:.8rem}
.table-wrap table td:empty{display:none}
.table-wrap table td::before{content:attr(data-label);display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);min-width:70px;margin-right:.5rem}
.table-wrap table td[data-label=""]::before,.table-wrap table td:not([data-label])::before{display:none}
.table-wrap table td:last-child{padding-top:.5rem}
.table-wrap table td:last-child>div{justify-content:flex-start!important}
/* ── Competition timeline compact ── */
.comp-tl{padding-left:1.8rem}
.comp-tl::before{left:10px}
.comp-tl-dot{left:-1.8rem;width:24px;height:24px;font-size:.6rem}
.comp-tl-step{padding-bottom:1rem}
.comp-tl-head{padding:.55rem .7rem;gap:.35rem;flex-direction:column;align-items:flex-start}
.comp-tl-title{font-size:.78rem}
.comp-tl-badge{font-size:.52rem}
.comp-tl-body{padding:.5rem .7rem}
.comp-tl-desc{font-size:.74rem}
.comp-tl-meta{gap:.35rem;flex-direction:column;align-items:flex-start}
.comp-tl-tag{font-size:.66rem}
.comp-tl-meta .btn{width:100%;justify-content:center}
/* ── Contest board cards tighter ── */
.doc-card{padding:.85rem}
.doc-card:hover{transform:none;box-shadow:none}
.doc-header{gap:.45rem;margin-bottom:.55rem}
.doc-title{font-size:.8rem}
/* ── Evaluation rubric mobile ── */
.rubric-subcriterion{flex-direction:column;align-items:flex-start;gap:.35rem}
.rubric-score-input{width:100%;max-width:120px}
.eval-decision-row{flex-direction:column}
.eval-decision-btn{width:100%;justify-content:center}
.eval-total-bar{flex-direction:column;gap:.35rem;text-align:center}
/* ── Modal body content: mobile wrapping ── */
.fd-status-timeline{flex-wrap:wrap;gap:.3rem .15rem;justify-content:flex-start;padding:.45rem .55rem}
.fd-status-step{font-size:.58rem;padding:.12rem .3rem}
.fd-status-arrow{font-size:.4rem}
.fd-tabs{flex-wrap:wrap;gap:.2rem;padding:.2rem;margin-bottom:1rem}
.fd-tab{flex:0 1 auto;padding:.35rem .55rem;font-size:.64rem;gap:.25rem}
.fd-tab i{font-size:.62rem}
.fd-tab-badge{font-size:.52rem;min-width:14px;height:14px}
.return-comment-box{padding:.65rem .8rem;font-size:.76rem;margin-bottom:.85rem}
.return-comment-box strong{font-size:.68rem;gap:.25rem}
.history-entry{padding:.55rem .7rem;font-size:.74rem;margin-bottom:.3rem}
.history-entry .meta{font-size:.62rem}
.section-label{font-size:.56rem;margin-bottom:.5rem}
.file-chip{font-size:.66rem;padding:.2rem .5rem}
.return-textarea{padding:.55rem .75rem;font-size:.82rem;min-height:80px}
/* ── Form modal: mobile-friendly application form ── */
.form-layout-grid{gap:.65rem}
.form-field{margin-bottom:.65rem}
.form-field label{font-size:.62rem;margin-bottom:.3rem}
.form-field textarea{min-height:120px;font-size:.88rem}
.form-field select{font-size:.88rem;min-height:44px}
.form-field input{font-size:.88rem;min-height:44px}
.attached-doc-chip{font-size:.66rem;padding:.25rem .5rem;margin:.1rem}
.attached-doc-chip .remove-attached{font-size:.74rem;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center}
/* ── Workflow board: mobile compact ── */
.wf-board{gap:.55rem}
/* KPI: horizontal scroll strip instead of grid */
.wf-kpi-row{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem}
.wf-kpi-row::-webkit-scrollbar{display:none}
.wf-kpi-card{flex:0 0 auto;min-width:110px;padding:.55rem .65rem;gap:.45rem;scroll-snap-align:start;border-radius:10px}
.wf-kpi-card:hover{box-shadow:none;transform:none}
.wf-kpi-icon{width:28px;height:28px;font-size:.7rem;border-radius:8px}
.wf-kpi-value{font-size:.92rem}
.wf-kpi-label{font-size:.52rem;letter-spacing:.04em}
/* BPMN Pipeline: vertical 2-col grid on mobile */
.wf-pipeline{display:grid!important;grid-template-columns:1fr 1fr;gap:.35rem;overflow:visible;padding:.4rem 0;mask-image:none;-webkit-mask-image:none}
.wf-pipe-arrow{display:none}
.wf-pipe-phase{min-width:0;max-width:none;width:100%;padding:.55rem .4rem .5rem;border-radius:10px;background:var(--surface);border:1.5px solid var(--border);gap:.15rem;transition:background .12s,border-color .12s}
.wf-pipe-phase.expanded{background:var(--white);border-color:var(--phase-color,var(--red-border));box-shadow:0 2px 8px rgba(0,0,0,.06)}
.wf-pipe-phase.has-items{border-color:var(--border-2)}
.wf-pipe-phase:hover{transform:none;box-shadow:none}
.wf-pipe-phase:active{transform:scale(.97);transition-duration:.06s}
.wf-pipe-icon{width:24px;height:24px;font-size:.55rem;box-shadow:none}
.wf-pipe-phase:hover .wf-pipe-icon{transform:none}
.wf-pipe-count{font-size:.82rem;margin-top:-.05rem}
.wf-pipe-label{font-size:.48rem;line-height:1.15;max-height:2.3em;overflow:hidden}
.wf-pipe-bar{height:2.5px;margin-top:.1rem;border-radius:2px}
/* Comp phase grid mobile */
.comp-phase-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem;padding:.55rem}
.comp-phase-card-icon{width:36px;height:36px;font-size:.76rem}
.comp-phase-card-count{font-size:1.1rem}
.comp-phase-card-label{font-size:.6rem}
/* Lane detail: card layout */
.wf-lane-detail{border-radius:12px;border-width:1.5px}
.wf-lane-header{padding:.7rem .8rem}
.wf-lane-header h3{font-size:.84rem}
.wf-lane-title-row{gap:.4rem;margin-bottom:.25rem}
.wf-lane-title-row i{font-size:.75rem}
.wf-lane-desc{font-size:.7rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wf-lane-chips{gap:.2rem;margin-top:.35rem}
.wf-status-chip{font-size:.56rem;padding:.12rem .32rem;border-radius:4px}
.wf-item-title{max-width:none;font-size:.76rem;white-space:normal;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
/* Lane table → stacked cards */
.wf-lane-table-wrap{padding:0 .65rem .35rem}
.wf-lane-table thead{display:none}
.wf-lane-table{display:grid;grid-template-columns:1fr;gap:.35rem}
.wf-lane-table tbody{display:contents}
.wf-lane-table tr{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:.15rem .5rem;padding:.6rem .7rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;border-bottom:none}
.wf-lane-table tr:nth-child(even){background:var(--surface)}
.wf-lane-table td{display:block;padding:0;border:none;font-size:.76rem}
.wf-lane-table td::before{display:none}
.wf-lane-table td:nth-child(1){grid-column:1/-1;font-weight:600}
.wf-lane-table td:nth-child(2){grid-column:1;color:var(--ink-3);font-size:.7rem}
.wf-lane-table td:nth-child(3){grid-column:2;grid-row:2;justify-self:end}
.wf-lane-table td:nth-child(4){grid-column:1/-1;font-size:.65rem;color:var(--ink-4)}
.wf-lane-empty{padding:1.25rem}
.wf-lane-empty i{font-size:1.1rem}
.wf-lane-empty p{font-size:.74rem}
/* Bottom row */
.wf-bottom-row{gap:.55rem}
.wf-admin-focus,.wf-proj-control{grid-template-columns:repeat(2,1fr);gap:.4rem}
.wf-focus-val{font-size:.95rem}
.wf-focus-lbl{font-size:.52rem;letter-spacing:.03em}
.wf-my-task{padding:.45rem .55rem;border-radius:8px}
.wf-my-task-title{font-size:.72rem}
.wf-my-task-status{font-size:.64rem}
/* ── Dashboard responsive grids ── */
.dash-grid-2{grid-template-columns:1fr!important}
.dash-grid-3{grid-template-columns:1fr!important}
/* ── Performance: reduce paint on mobile ── */
/* contain:layout removed — would trap position:fixed action-menus rendered inside the board */
.wf-board{contain:style}
.wf-lane-detail{contain:style}
.wf-pipeline-card{padding:.7rem!important;margin-bottom:.45rem!important}
.close-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--red-dim),0 0 0 5px rgba(21,147,121,.14)}
.wf-lane-close-btn{width:100%;justify-content:center;margin:.5rem 0 .65rem!important;min-height:38px;border-radius:10px}
}
@media(max-width:580px){
.form-grid,.form-layout-grid{grid-template-columns:1fr}.span2{grid-column:span 1}
.doc-picker-grid{max-height:min(45vh,360px);grid-template-columns:1fr}

/* ── Export panel mobile ── */
.export-date-row{grid-template-columns:1fr}
.export-audit-actions{flex-direction:column}
.export-audit-actions .btn{width:100%;min-width:0}
/* ── Buttons: generous tap targets ── */
.btn{min-height:46px;border-radius:12px;font-size:.84rem}
.btn-sm{min-height:38px;border-radius:10px}
/* ── Close button: bigger on mobile ── */
.close-btn{width:36px;height:36px;font-size:.86rem}
.btn-primary{border-radius:12px}
.btn-outline{border-radius:12px}
/* ── Filters: scrollable strip ── */
.filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem;scrollbar-width:none;gap:.3rem}
.filter-bar::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;min-height:38px;display:inline-flex;align-items:center;border-radius:12px;padding:.35rem .85rem}
.doc-picker-grid{grid-template-columns:1fr}
/* ── Actions row ── */
.page-top-actions{gap:.45rem;flex-wrap:wrap}
.page-top-actions .search-wrap{flex:1 1 0%;min-width:0}
.page-top-actions .search-wrap~.btn{flex:0 0 auto}
.page-top-actions .btn{min-height:44px;justify-content:center;border-radius:12px}
.page-top-actions .btn-icon{width:44px;height:44px;border-radius:12px}
.search-input{height:44px;min-height:44px;border-radius:12px;font-size:.88rem;min-width:0;width:100%}
/* ── Form inputs: bigger touch targets ── */
.form-field input,.form-field select,.form-field textarea{padding:.75rem 1rem;font-size:.9rem;border-radius:12px}
.form-field select{border-radius:12px}
}
@media(max-width:430px){
.header-inner{padding:0 .3rem!important;gap:.25rem}
.nav-tab{height:36px;border-radius:8px}
.nav-tab i{font-size:.95rem}
.nav-tabs{gap:.2rem}
.hamburger-btn{width:34px;height:34px;border-radius:8px;font-size:.9rem}
.main-content{padding:.85rem .65rem 2rem}
.card{border-radius:14px}.card-body{padding:.85rem}.card-header{padding:.7rem .85rem}
.stat-btn{padding:.75rem .45rem;border-radius:10px}.stat-num{font-size:1.3rem}.stat-label{font-size:.6rem}
/* BPMN ultra-compact */
.wf-kpi-card{min-width:95px;padding:.45rem .5rem}
.wf-kpi-icon{width:24px;height:24px;font-size:.62rem}
.wf-kpi-value{font-size:.82rem}
.wf-kpi-label{font-size:.46rem}
.wf-pipe-phase{padding:.45rem .3rem}
.wf-pipe-icon{width:22px;height:22px;font-size:.5rem}
.wf-pipe-count{font-size:.75rem}
.wf-pipe-label{font-size:.42rem}
.wf-lane-header{padding:.6rem .7rem}
.wf-lane-header h3{font-size:.78rem}
.wf-lane-table tr{padding:.5rem .6rem}
.wf-admin-focus,.wf-proj-control{gap:.3rem}
.wf-focus-val{font-size:.85rem}
.wf-focus-lbl{font-size:.46rem}
}
@media(max-width:400px){
.login-card{padding:2rem 1.2rem 1.8rem;border-radius:18px}
.stats-row{gap:.35rem}
.main-content{padding:.75rem .5rem 2rem}
.login-logo{width:56px;height:56px}.login-science-logo{width:56px;height:56px}.login-logo-divider{height:28px}.login-logo-wrap{gap:.55rem}
.ls-title{font-size:1.1rem;padding:0 1.25rem}
.ls-sub{font-size:.56rem;letter-spacing:.15em}
.ls-bar{width:120px}
.ls-logos{gap:.85rem}
.ls-logo{width:62px;height:62px}
.ls-logo-sep{height:42px}
}
.doc-cat-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.doc-cat-icon{width:28px;height:28px;border-radius:var(--r-xs);background:var(--red-dim);border:1px solid var(--red-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-cat-icon i{font-size:.72rem;color:var(--red)}
.doc-cat-title{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--ink)}
.doc-cat-count{font-size:.68rem;font-weight:700;padding:.12rem .45rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--ink-4)}
.doc-cat-rule{flex:1;height:1px;background:var(--border)}
.doc-cat-section{margin-bottom:1.75rem}

/* ── Evaluation Scoring Rubric UI ── */
.eval-project-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1rem;transition:border-color .2s,box-shadow .2s}
.eval-project-card:hover{border-color:var(--red-border);box-shadow:var(--shadow-md)}
.eval-project-card.expanded{border-color:var(--red-3);box-shadow:0 4px 16px rgba(21,147,121,.12)}
.eval-project-head{display:flex;align-items:center;gap:.75rem;padding:1.05rem 1.3rem;cursor:pointer;transition:background .15s;user-select:none}
.eval-project-head:hover{background:var(--red-fog)}
.eval-project-head .chevron{font-size:.72rem;color:var(--ink-4);transition:transform .25s var(--ease);flex-shrink:0}
.eval-project-card.expanded .eval-project-head .chevron{transform:rotate(90deg);color:var(--red)}
.eval-project-info{flex:1;min-width:0}
.eval-project-title{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eval-project-meta{font-size:.72rem;color:var(--ink-4);display:flex;flex-wrap:wrap;gap:.5rem}
.eval-project-meta span{display:inline-flex;align-items:center;gap:.22rem}
.eval-project-body{border-top:1px solid var(--border);padding:1.25rem;background:var(--surface)}

.rubric-grid{display:grid;gap:.75rem}
.rubric-category{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:1rem 1.15rem;transition:border-color .2s}
.rubric-category:hover{border-color:var(--border-2)}
.rubric-category-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.65rem}
.rubric-category-name{font-weight:700;font-size:.84rem;color:var(--ink);line-height:1.35}
.rubric-category-max{font-size:.68rem;font-weight:700;color:var(--ink-4);white-space:nowrap;padding:.15rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill)}
.rubric-subcriteria{display:flex;flex-direction:column;gap:.55rem}
.rubric-subcriterion{display:flex;align-items:center;gap:.75rem}
.rubric-sub-label{flex:1;font-size:.78rem;color:var(--ink-2);line-height:1.4}
.rubric-score-input{width:64px;text-align:center;padding:.4rem .35rem;border:1.5px solid var(--border);border-radius:var(--r-xs);font-family:var(--font-body);font-size:.88rem;font-weight:700;color:var(--ink);transition:border-color .2s,box-shadow .2s;outline:none}
.rubric-score-input:focus{border-color:var(--red-3);box-shadow:var(--shadow-glow)}
.rubric-score-input.over-max{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.rubric-score-max{font-size:.68rem;color:var(--ink-5);white-space:nowrap}

.eval-total-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(21,147,121,.04),rgba(35,56,116,.06));border:1.5px solid var(--red-border);border-radius:var(--r-sm);padding:.85rem 1.15rem;margin-top:1rem}
.eval-total-label{font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--ink)}
.eval-total-score{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--red);display:flex;align-items:baseline;gap:.25rem}
.eval-total-score .of-max{font-size:.82rem;color:var(--ink-4);font-weight:600}

.eval-progress-bar{height:6px;background:var(--bg-2);border-radius:99px;margin-top:.65rem;overflow:hidden}
.eval-progress-fill{height:100%;border-radius:99px;transition:width .4s var(--ease),background .3s;background:var(--red)}
.eval-progress-fill.high{background:var(--ok)}
.eval-progress-fill.medium{background:var(--gold)}
.eval-progress-fill.low{background:var(--err)}

.eval-decision-row{display:flex;align-items:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.eval-decision-btn{display:flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-family:var(--font-body);font-size:.82rem;font-weight:700;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);color:var(--ink-3)}
.eval-decision-btn:hover{box-shadow:var(--shadow-sm)}
.eval-decision-btn.approve{border-color:var(--ok-border);color:var(--ok)}
.eval-decision-btn.approve:hover,.eval-decision-btn.approve.selected{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 4px 12px rgba(22,116,74,.2)}
.eval-decision-btn.reject{border-color:var(--err-border);color:var(--err)}
.eval-decision-btn.reject:hover,.eval-decision-btn.reject.selected{background:var(--err);border-color:var(--err);color:#fff;box-shadow:0 4px 12px rgba(153,27,27,.2)}

.eval-comment-box{margin-top:.75rem}
.eval-comment-box textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.65rem .95rem;font-family:var(--font-body);font-size:.84rem;outline:none;resize:vertical;min-height:72px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.eval-comment-box textarea:focus{border-color:var(--red-3);box-shadow:var(--shadow-glow)}
.eval-comment-box label{display:block;font-size:.66rem;font-weight:700;color:var(--ink-4);margin-bottom:.35rem;letter-spacing:.06em;text-transform:uppercase}

.eval-actions{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end}

.reviewer-summary-strip{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.reviewer-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;padding:.25rem .6rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--white);color:var(--ink-3);font-weight:600}
.reviewer-chip i{font-size:.6rem}
.reviewer-chip.pending{border-color:var(--info-border);background:var(--info-bg);color:var(--info)}
.reviewer-chip.consented{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn)}
.reviewer-chip.reviewed{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok)}

/* ── Enhanced Reviewer Assignment ── */
.reviewer-pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;max-height:40vh;overflow-y:auto;padding:.25rem 0}
.reviewer-pool-item{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);background:var(--white)}
.reviewer-pool-item:hover{border-color:var(--red-3);background:var(--red-fog);box-shadow:var(--shadow-xs)}
.reviewer-pool-item.selected{border-color:var(--red);background:var(--red-dim);box-shadow:0 0 0 2px rgba(21,147,121,.12)}
.reviewer-pool-item .rp-check{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color var(--t),background var(--t),color var(--t);font-size:.7rem;color:transparent}
.reviewer-pool-item.selected .rp-check{background:var(--red);border-color:var(--red);color:#fff}
.reviewer-pool-item .rp-info{flex:1;min-width:0}
.reviewer-pool-item .rp-name{font-size:.8rem;font-weight:600;color:var(--ink)}
.reviewer-pool-item .rp-email{font-size:.68rem;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reviewer-pool-item .rp-status{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.12rem .42rem;border-radius:3px}

.assign-section-label{font-size:.66rem;font-weight:700;color:var(--ink-4);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.assign-divider{margin:1rem 0;height:1px;background:var(--border)}

/* ── Mobile Top Navigation Bar ── */
.mobile-top-nav{display:none}
@media(max-width:640px){
.mobile-top-nav{display:flex;position:sticky;top:54px;z-index:var(--z-mobile-nav);background:#fff;border-bottom:1px solid rgba(0,0,0,.05);padding:.25rem .6rem .2rem;align-items:stretch;gap:.15rem;box-shadow:0 1px 12px rgba(0,0,0,.02);contain:layout style}
.mob-top-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.45rem .1rem .38rem;border:none;background:none;cursor:pointer;font-family:var(--font-body);position:relative;border-radius:12px;transition:color .22s var(--ease),background .22s var(--ease),transform .12s var(--ease);-webkit-tap-highlight-color:transparent;color:var(--ink-4);min-height:48px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mob-top-item i{font-size:1.15rem;line-height:1;transition:transform .25s var(--ease-spring),color .22s var(--ease)}
.mob-top-item span{font-size:.52rem;font-weight:700;letter-spacing:.02em;line-height:1;transition:color .22s var(--ease),opacity .22s;opacity:.7;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-top-item.active{color:var(--red)}
.mob-top-item.active span{opacity:1}
.mob-top-item.active i{transform:translateY(-1px) scale(1.12);color:var(--red)}
.mob-top-item.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:3px;background:var(--red);box-shadow:0 0 8px rgba(21,147,121,.2);transition:width .2s var(--ease-spring)}
.mob-top-item:active:not(.active){background:rgba(0,0,0,.035);transform:scale(.9);transition-duration:.06s}
.mob-top-item.active:active{transform:scale(.94);transition-duration:.06s}
}
/* ── GDPR Cookie Banner ── */
.cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:var(--z-cookie);font-family:var(--font-body);font-size:.85rem;padding:1rem 1.2rem;border-top:3px solid var(--red);max-width:500px;margin:0 auto;animation:cookieSlideUp .35s var(--ease-spring)}
@keyframes cookieSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.cookie-banner-content{display:flex;flex-direction:column;gap:.8rem}
.cookie-banner-text{line-height:1.5;color:var(--ink)}
.cookie-banner-text small{color:var(--ink-3)}
.cookie-banner-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-btn{background:var(--red);border:none;padding:.4rem .8rem;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s;font-size:.8rem}
.cookie-btn:hover{background:#0F7E66}
.cookie-btn.settings,.cookie-btn.reject,.cookie-btn.close-settings{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.cookie-btn.settings:hover,.cookie-btn.reject:hover,.cookie-btn.close-settings:hover{background:var(--hover)}
.cookie-settings-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:calc(var(--z-cookie) + 1);width:320px;max-width:90%;padding:1.2rem;font-family:var(--font-body);border-top:3px solid var(--red)}
.cookie-settings-dialog h3{margin-top:0;font-size:1.1rem;font-family:var(--font-display)}
.cookie-setting{display:flex;justify-content:space-between;align-items:center;margin:1rem 0;font-size:.85rem}
.cookie-setting label{cursor:pointer}
.cookie-settings-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.cookie-settings-close{position:absolute;top:.5rem;right:.8rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--ink-3)}

/* ── Performance & Accessibility ── */
html{scroll-padding-top:calc(var(--topbar-h) + var(--header-h) + .5rem)}
.table-wrap{contain:style}
.document-grid{contain:style}
/* Promote list containers to own compositor layer during data loads */
.table-wrap tbody{contain:style}
.document-grid{contain:style}

/* ─── VIEW TRANSITION SYSTEM ─── */
/* IMPORTANT: viewEnterAnim must be opacity-ONLY.
   Any translate/transform on .view-enter creates a new containing block
   that traps position:fixed descendants (modals, dropdowns) inside the view div. */
@keyframes viewEnterAnim{from{opacity:0}to{opacity:1}}
.view-enter{animation:viewEnterAnim .28s var(--ease-out) both}

/* ─── STAGGER SYSTEM (fires on tab switch via key={activeTab} remount) ─── */
/* IMPORTANT: stagger animations use opacity + margin-top instead of translate so
   they never create a transient containing block on .card / row that would trap
   position:fixed descendants (dropdowns, popovers) inside cards. */
@keyframes staggerIn{from{opacity:0}to{opacity:1}}
@keyframes cardStaggerIn{from{opacity:0;margin-top:8px}to{opacity:1;margin-top:0}}
/* Stagger only the first 10 rows then snap the rest in — running an opacity
   animation on 100+ tbody rows costs many ms of style/paint per navigation
   and is the most-reported source of post-route lag. */
.view-enter tbody tr:nth-child(-n+10){animation:staggerIn .26s var(--ease-out) both}
.view-enter tbody tr:nth-child(1){animation-delay:.03s}
.view-enter tbody tr:nth-child(2){animation-delay:.06s}
.view-enter tbody tr:nth-child(3){animation-delay:.09s}
.view-enter tbody tr:nth-child(4){animation-delay:.12s}
.view-enter tbody tr:nth-child(5){animation-delay:.15s}
.view-enter tbody tr:nth-child(n+6):nth-child(-n+10){animation-delay:.17s}
.view-enter .stat-btn{animation:staggerIn .26s var(--ease-out) both}
.view-enter .stat-btn:nth-child(1){animation-delay:.04s}
.view-enter .stat-btn:nth-child(2){animation-delay:.08s}
.view-enter .stat-btn:nth-child(3){animation-delay:.12s}
.view-enter .stat-btn:nth-child(4){animation-delay:.16s}
.view-enter .stat-btn:nth-child(5){animation-delay:.20s}
.view-enter .stat-btn:nth-child(n+6){animation-delay:.22s}
.view-enter .card{animation:cardStaggerIn .22s var(--ease) both}
.view-enter .card:nth-child(1){animation-delay:.05s}
.view-enter .card:nth-child(2){animation-delay:.10s}
.view-enter .card:nth-child(3){animation-delay:.15s}
.view-enter .card:nth-child(n+4){animation-delay:.18s}
.view-enter .doc-card{animation:staggerIn .22s var(--ease) both}
.view-enter .doc-card:nth-child(1){animation-delay:.04s}
.view-enter .doc-card:nth-child(2){animation-delay:.09s}
.view-enter .doc-card:nth-child(3){animation-delay:.14s}
.view-enter .doc-card:nth-child(4){animation-delay:.18s}
.view-enter .doc-card:nth-child(n+5){animation-delay:.21s}
.view-enter .wf-kpi-card{animation:staggerIn .2s var(--ease) both}
.view-enter .wf-kpi-card:nth-child(1){animation-delay:.06s}
.view-enter .wf-kpi-card:nth-child(2){animation-delay:.10s}
.view-enter .wf-kpi-card:nth-child(3){animation-delay:.14s}
.view-enter .wf-kpi-card:nth-child(4){animation-delay:.18s}
.view-enter .wf-kpi-card:nth-child(n+5){animation-delay:.20s}
.view-enter .comp-tl-step:nth-child(1){animation:staggerIn .22s .06s var(--ease) both}
.view-enter .comp-tl-step:nth-child(2){animation:staggerIn .22s .10s var(--ease) both}
.view-enter .comp-tl-step:nth-child(3){animation:staggerIn .22s .14s var(--ease) both}
.view-enter .comp-tl-step:nth-child(n+4){animation:staggerIn .22s .17s var(--ease) both}
.view-enter .page-top{animation:viewEnterAnim .22s .04s var(--ease) both}

/* ─── DRAWER EXIT ANIMATION ─── */
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes drawerFadeOut{from{opacity:1}to{opacity:0}}
.drawer-overlay.closing{animation:drawerFadeOut .2s ease forwards;pointer-events:none}
.drawer-panel.closing{animation:drawerSlideOut .22s var(--ease) forwards}

/* ─── SKELETON LOADING ─── */
@keyframes skeletonShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.skeleton{background:linear-gradient(90deg,var(--bg-2) 25%,rgba(255,255,255,.75) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease infinite;border-radius:var(--r-xs)}
.skeleton-text{height:.75rem;border-radius:4px}
.skeleton-title{height:1.1rem;border-radius:6px}
.skeleton-row{height:50px;border-radius:var(--r-xs);margin-bottom:.4rem}
.skeleton-card{height:130px;border-radius:var(--r);margin-bottom:.75rem}
.skeleton-circle{border-radius:50%}
.skeleton-sm{height:.55rem;border-radius:3px}

/* ─── PROGRESS BAR SHIMMER ─── */
.eval-progress-fill,.fin-bar-fill,.wf-pipe-bar-fill{overflow:hidden;position:relative}
.eval-progress-fill::after,.fin-bar-fill::after,.wf-pipe-bar-fill::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:progressShimmer 2.2s ease-in-out infinite}
@keyframes progressShimmer{0%{left:-100%}70%,100%{left:100%}}

/* ─── FORM FIELD LABEL COLOR TRANSITION ─── */
.form-field label{transition:color .2s var(--ease)}
.form-field:focus-within label{color:var(--red-2)}

/* ─── LIVE INDICATOR RING GLOW ─── */
.live-indicator:not(.stale) .live-dot{animation:livePulse 2s ease-in-out infinite,liveDotGlow 2s ease-in-out infinite}
@keyframes liveDotGlow{0%,100%{box-shadow:0 0 0 0 rgba(22,116,74,.35)}50%{box-shadow:0 0 0 5px rgba(22,116,74,0)}}

/* ─── STAT ACTIVE NUMBER MICRO-PULSE ─── */
.stat-btn.active .stat-num{animation:statNumPulse .35s var(--ease-spring) both}
@keyframes statNumPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ─── EMPTY STATE ENTRANCE ─── */
.empty-state{animation:staggerIn .4s var(--ease) both}
.empty-state-icon{animation:staggerIn .4s .08s var(--ease-spring) both}
.empty-state h4{animation:staggerIn .3s .14s var(--ease) both}
.empty-state p{animation:staggerIn .3s .20s var(--ease) both}

/* ─── TOAST DISMISS ─── */
@keyframes toastOut{to{opacity:0;transform:translateX(32px) scale(.94)}}
.toast.dismissing{animation:toastOut .22s var(--ease) forwards}

/* ─── BREADCRUMB ACTIVE LABEL SLIDE-IN ─── */
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.breadcrumb-inner>span:last-child{animation:fadeSlideIn .22s var(--ease) both}

/* ─── HISTORY ENTRY STAGGER ─── */
.history-entry:nth-child(1){animation:staggerIn .2s .04s var(--ease) both}
.history-entry:nth-child(2){animation:staggerIn .2s .08s var(--ease) both}
.history-entry:nth-child(3){animation:staggerIn .2s .12s var(--ease) both}
.history-entry:nth-child(n+4){animation:staggerIn .2s .15s var(--ease) both}

/* ─── DRAWER ITEM STAGGER ─── */
.drawer-panel .drawer-item{animation:staggerIn .2s var(--ease) both}
.drawer-panel .drawer-item:nth-child(1){animation-delay:.05s}
.drawer-panel .drawer-item:nth-child(2){animation-delay:.09s}
.drawer-panel .drawer-item:nth-child(3){animation-delay:.13s}
.drawer-panel .drawer-item:nth-child(4){animation-delay:.17s}
.drawer-panel .drawer-item:nth-child(n+5){animation-delay:.19s}

@media(prefers-reduced-motion:reduce){
  /* Surgical: kill only transform/translate motion (vestibular triggers). Opacity fades and progress indicators are preserved. */
  @keyframes lsBgShift{0%,100%{background-position:0% 30%}}
  @keyframes lsGlowShift{0%,100%{opacity:.7;transform:none}}
  @keyframes lsLogoIn{from{opacity:0;transform:none}to{opacity:1;transform:none}}
  @keyframes lsFadeUp{from{opacity:0;transform:none}to{opacity:1;transform:none}}
  @keyframes mBoxIn{from{opacity:0;translate:none}to{opacity:1;translate:none}}
  @keyframes viewEnterAnim{from,to{opacity:1;translate:none}}
  @keyframes staggerIn{from,to{opacity:1;translate:none}}
  @keyframes mBoxOut{from{opacity:1}to{opacity:0}}
  @keyframes drawerSlideOut{from,to{transform:translateX(100%)}}
  @keyframes fadeSlideIn{from,to{opacity:1;transform:none}}
  @keyframes fadeSlideDown{from,to{opacity:1;transform:none}}
  @keyframes statNumPulse{from,to{transform:none}}
  @keyframes toastIn{from,to{opacity:1;transform:none}}
  @keyframes toastOut{to{opacity:0;transform:none}}
  @keyframes cookieSlideUp{from,to{opacity:1;transform:none}}
  @keyframes progressShimmer{from,to{left:100%}}
  @keyframes skeletonShimmer{from,to{background-position:0 center}}
  @keyframes liveDotGlow{from,to{box-shadow:none}}
  @keyframes lsRingDraw{from,to{stroke-dashoffset:0}}
  @keyframes lsFadeIn{from,to{opacity:1}}
  .ls-ring{opacity:1;animation:none!important}
  .ls-ring-draw{stroke-dashoffset:0;animation:none!important}
  .spin{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL POLISH – Smooth transitions, loading states, refresh indicators
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SKELETON LINE VARIANTS (used by SkeletonCards/SkeletonTable) ─── */
.skeleton-line{height:.7rem;border-radius:4px}
.skeleton-line.w25{width:25%}.skeleton-line.w50{width:50%}.skeleton-line.w75{width:75%}.skeleton-line.w90{width:90%}.skeleton-line.w60{width:60%}
.skeleton-table-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-bottom:1px solid var(--border)}
.skeleton-table-row .skeleton{flex-shrink:0}
.skeleton-table-cell{flex:1 1 0%;min-width:0}

/* ─── REFRESH BUTTON SPIN ANIMATION ─── */
@keyframes refreshSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Base definition — overridden by PRODUCTION POLISH block below */
.btn-refresh-spinning{pointer-events:none;opacity:.7}

/* ─── INLINE LOADING STRIP (top-of-card progress) ─── */
@keyframes loadingStripSlide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.loading-strip{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;opacity:0;transition:opacity .2s ease;z-index:10}
.loading-strip.active{opacity:1}
.loading-strip::after{content:'';position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(90deg,transparent,var(--red-3),transparent);animation:loadingStripSlide 1.2s ease-in-out infinite}

/* ─── CONTENT FADE-IN AFTER LOAD ─── */
@keyframes contentFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.content-loaded{animation:contentFadeIn .3s var(--ease) both}

/* ─── SMOOTH TABLE ROW TRANSITIONS (perf: background-only — transform/opacity
       transitions on every row caused style-recalc storms while scrolling) ─── */
.table-wrap tbody tr{transition:background .15s ease}
.table-wrap tbody tr.row-entering{animation:staggerIn .25s var(--ease) both}

/* ─── CARD CONTENT TRANSITION (perf: drop transform transition to avoid
       compositor promotion on every card; box-shadow + border-color only) ─── */
.card{transition:box-shadow .2s ease,border-color .2s ease}
.card-loading{position:relative;overflow:hidden}
.card-loading::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 20%,var(--red-3) 50%,transparent 80%);background-size:200% 100%;animation:loadingStripSlide 1.2s ease-in-out infinite;z-index:5}

/* ─── REFRESH OVERLAY (for data refresh feedback) ─── */
.refresh-overlay{position:absolute;inset:0;background:rgba(244,245,247,.5);display:flex;align-items:center;justify-content:center;z-index:8;opacity:0;pointer-events:none;transition:opacity .2s ease;border-radius:var(--r)}
.refresh-overlay.active{opacity:1;pointer-events:auto}

/* ─── DRAWER CLOSE ANIMATION SUPPORT ─── */
.drawer-overlay.drawer-closing{animation:drawerFadeOut .2s ease forwards;pointer-events:none}
.drawer-panel.drawer-closing{animation:drawerSlideOut .22s var(--ease) forwards}

/* ─── BADGE TRANSITIONS ─── */
.badge{transition:background .2s ease,color .2s ease}

/* ─── TAB UNDERLINE SMOOTH TRANSITION ─── */
.nav-tab{transition:color .2s ease,background .2s ease,border-bottom-color .25s ease}
.nav-tab i{transition:color .2s ease}

/* ─── FILTER/CHIP SMOOTH TRANSITIONS ─── */
.stat-btn{transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.stat-btn.active{transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}

/* ─── DOCUMENT CARD HOVER ─── */
.doc-card{transition:box-shadow .2s ease,border-color .2s ease,background .2s ease}
.doc-card:hover{box-shadow:var(--shadow-md);background:var(--white)}

/* ─── SMOOTH CATEGORY FILTER SWITCH ─── */
@keyframes filterFadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.filter-active-content{animation:filterFadeIn .2s var(--ease) both}

/* ─── DATA LOADING PULSE (subtle bg pulse on containers) ─── */
@keyframes dataLoadPulse{0%,100%{background-color:var(--white)}50%{background-color:var(--surface)}}
.data-loading-pulse{animation:dataLoadPulse 1.5s ease-in-out infinite}

/* ─── KPI/STAT CARD COUNTER ANIMATION ─── */
@keyframes countUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stat-num-animated{animation:countUp .3s var(--ease) both}

/* ─── SMOOTH SCROLL-TO HIGHLIGHTS ─── */
@keyframes highlightFlash{0%{background-color:rgba(35,56,116,.2)}100%{background-color:transparent}}
.row-highlight{animation:highlightFlash 1.5s ease forwards}

/* ─── IMPROVED EMPTY STATE TRANSITIONS ─── */
.empty-state{transition:opacity .3s ease}

/* ─── SMOOTH FORM SECTION TRANSITIONS ─── */
.form-section{transition:opacity .2s ease}
.form-field input,.form-field textarea,.form-field select{transition:border-color .2s ease,box-shadow .2s ease,background-color .15s ease}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{box-shadow:0 0 0 3px rgba(21,147,121,.08)}


/*  BPMN phase timeline & overview layout  */
.bpmn-phase-timeline{display:flex;flex-direction:column;gap:.45rem}
.bpmn-phase-row{display:grid;grid-template-columns:32px 1fr 96px 32px;align-items:center;gap:.65rem;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);transition:border-color .18s,box-shadow .18s,background .18s;cursor:pointer;user-select:none}
.bpmn-phase-row:hover{border-color:var(--red-border,#8ECEC9);box-shadow:var(--shadow-xs)}.bpmn-phase-row.active-phase{border-color:var(--primary,#159379);background:linear-gradient(90deg,rgba(21,147,121,.04),var(--white))}
.bpmn-phase-icon{width:32px;height:32px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;color:#fff}
.bpmn-phase-info{min-width:0;overflow:hidden}.bpmn-phase-name{font-weight:700;font-size:.82rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpmn-phase-desc{font-size:.68rem;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.08rem}
.bpmn-phase-bar-wrap{flex-shrink:0}.bpmn-phase-bar{height:5px;border-radius:3px;background:var(--bg);overflow:hidden}.bpmn-phase-bar-fill{height:100%;border-radius:3px;transition:width .4s var(--ease)}.bpmn-phase-count{font-family:var(--font-display);font-weight:700;font-size:.95rem;text-align:right;flex-shrink:0;min-width:24px}
.dash-overview-2col{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,28vw,440px);gap:1.25rem;align-items:start;margin-top:1.25rem}
@media(max-width:1200px){.dash-overview-2col{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:960px){.dash-overview-2col{grid-template-columns:1fr}}
@media(max-width:768px){.bpmn-phase-bar-wrap{display:none}.bpmn-phase-row{grid-template-columns:32px 1fr 32px}}
/* ─── LOADING SKELETON FOR TABLE ROWS ─── */
.skeleton-table{width:100%}
.skeleton-table .skeleton-table-row:nth-child(1){animation-delay:.03s}
.skeleton-table .skeleton-table-row:nth-child(2){animation-delay:.06s}
.skeleton-table .skeleton-table-row:nth-child(3){animation-delay:.09s}
.skeleton-table .skeleton-table-row:nth-child(4){animation-delay:.12s}
.skeleton-table .skeleton-table-row:nth-child(5){animation-delay:.15s}
.skeleton-table .skeleton-table-row{animation:staggerIn .25s var(--ease) both}

/* ─── BREADCRUMB SMOOTH TRANSITIONS ─── */
.breadcrumb-strip{transition:opacity .2s ease}

/* ─── LIVE INDICATOR SMOOTH FADE ─── */
.live-indicator{transition:opacity .3s ease,color .3s ease}

/* ─── SCROLL REVEAL FADE (for lazy content) ─── */
@keyframes scrollReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.scroll-reveal{animation:scrollReveal .4s var(--ease) both}

/* ─── BUTTON LOADING STATE ─── */
.btn.btn-loading{position:relative;pointer-events:none;color:transparent!important}
.btn.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.btn-outline.btn-loading::after{border-color:rgba(35,56,116,.2);border-top-color:var(--red)}

/* (legacy duplicate removed — canonical toast enter is `toastIn` defined in the consolidated TOAST block above) */

/* ─── Touch device optimizations ─── */
@media(pointer:coarse){
  button,a,.btn,.chip,.nav-tab,.stat-btn,.doc-card,.wf-pipe-phase,.mob-top-item,.drawer-nav-item{-webkit-tap-highlight-color:rgba(21,147,121,.08);touch-action:manipulation}
  .close-btn{width:44px;height:44px;font-size:.92rem}
  .btn-icon{min-width:44px;min-height:44px}
  /* Disable hover transforms on touch — prevent sticky :hover */
  .card:hover,.doc-card:hover,.stat-btn:hover,.stat-btn[data-clickable]:hover,.wf-pipe-phase:hover{transform:none!important}
  /* Reduce GPU cost on touch devices — no blur compositing during open animations */
  .toast{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--white)!important}
}

/* ─── prefers-reduced-motion supplements ─── */
@media(prefers-reduced-motion:reduce){
  .loading-strip::after{animation:none}
  @keyframes contentFadeIn{from,to{opacity:1;transform:none}}
  @keyframes filterFadeIn{from,to{opacity:1;transform:none}}
  @keyframes dataLoadPulse{from,to{background-color:var(--white)}}
  @keyframes countUp{from,to{opacity:1;transform:none}}
  @keyframes highlightFlash{from,to{background-color:transparent}}
  @keyframes scrollReveal{from,to{opacity:1;transform:none}}
  @keyframes toastSlideIn{from,to{opacity:1;transform:none}}
  @keyframes refreshSpin{from,to{transform:none}}
  .card,.doc-card,.stat-btn,.badge,.nav-tab,.btn{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — Bare controls, badge modifiers, layout helpers
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Standalone form controls (used outside .form-field wrappers) ── */
.form-input{width:100%;padding:.6rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:.84rem;color:var(--ink);background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;line-height:1.6}
.form-input:hover{border-color:var(--border-2)}
.form-input:focus{border-color:var(--red-3);box-shadow:var(--shadow-glow);background:var(--white)}
.form-input::placeholder{color:var(--ink-3);opacity:1}
/* Global placeholder contrast lift (WCAG AA) — affects inline-styled inputs too. */
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
.form-input[rows]{resize:vertical;min-height:80px}
.form-select{width:100%;padding:.6rem 2.2rem .6rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:.84rem;color:var(--ink);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right .85rem center;outline:none;appearance:none;transition:border-color .2s,box-shadow .2s;cursor:pointer;line-height:1.5}
.form-select:hover{border-color:var(--border-2)}
.form-select:focus{border-color:var(--red-3);box-shadow:var(--shadow-glow)}

/* ── Badge semantic modifier classes ── */
.badge-ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.badge-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.badge-err{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)}
.badge-info{background:var(--info-bg);color:var(--info);border:1px solid var(--info-border)}
.badge-gold{background:var(--gold-glow);color:var(--warn);border:1px solid var(--warn-border)}

/* ── Dashboard layout helpers ── */
/* Back-button row at top of detail panels */
.dash-back-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.dash-back-title{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Project card row (title + right side) */
.dash-proj-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.dash-proj-meta{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.72rem;color:var(--ink-3)}
.dash-proj-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0}
.dash-proj-card{padding:1.2rem;cursor:pointer}
/* Ranking panel */
.dash-rank-comp-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.75rem}
.dash-rank-act{display:flex;gap:.5rem;flex-wrap:wrap}
/* Reporting panel */
.dash-report-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}
.dash-report-form{display:grid;gap:.85rem}
.dash-report-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem}
.dash-rpt-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.dash-rpt-actions{display:flex;gap:.3rem}
/* Lane close button — base (mobile override in 640px block above) */
.wf-lane-close-btn{display:inline-flex;margin:.75rem 1rem 1rem}

/* ── Responsive overrides for bare controls & dashboard helpers ── */
@media(max-width:640px){
  .form-input,.form-select{font-size:.88rem;min-height:44px;border-radius:12px;padding:.7rem 1rem}
  .form-select{padding-right:2.2rem}
  .dash-proj-card{padding:.9rem}
  .dash-back-row{gap:.65rem;margin-bottom:.75rem}
  .dash-report-2col{grid-template-columns:1fr}
}
/* === Mobile safe-area insets + tap target polish (2025) === */
#toast-container{bottom:max(1.4rem,env(safe-area-inset-bottom));right:max(1.4rem,env(safe-area-inset-right))}
.cookie-banner{bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
@media(max-width:768px){
  .mobile-bottom-nav,.bottom-nav{padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
}
@media(pointer:coarse){
  .btn-sm{min-height:40px}
  .fd-tab,.nav-tab{min-height:40px}
}
/* === Workflow pipeline (replaces vertical bpmn-phase-timeline on desktop) === */
.wf-pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:.55rem;position:relative}
.wf-pipe-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.7rem .5rem .55rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s,transform .18s;position:relative;min-width:0;-webkit-tap-highlight-color:rgba(21,147,121,.08);user-select:none}
.wf-pipe-step:hover{border-color:var(--red-border,#8ECEC9);box-shadow:var(--shadow-xs)}
.wf-pipe-step.active-phase{border-color:var(--primary,#159379);background:linear-gradient(180deg,rgba(21,147,121,.06),var(--white));box-shadow:0 2px 8px rgba(21,147,121,.12)}
.wf-pipe-step.has-items::before{content:"";position:absolute;top:.4rem;right:.4rem;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.wf-pipe-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.92rem;flex-shrink:0;margin-bottom:.45rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.08)}
.wf-pipe-name{font-weight:700;font-size:.72rem;line-height:1.25;color:var(--ink);margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.8em}
.wf-pipe-count{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.wf-pipe-bar{width:100%;height:4px;border-radius:2px;background:var(--bg);overflow:hidden}
.wf-pipe-bar-fill{height:100%;border-radius:2px;transition:width .45s var(--ease)}
@media(min-width:961px){
  /* Desktop: connector tick between adjacent cards on the same row */
  .wf-pipe-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-.35rem;width:.7rem;height:1px;background:var(--border);z-index:1}
}
@media(max-width:768px){
  /* Mobile: revert to compact horizontal rows (one per line) */
  .wf-pipeline{grid-template-columns:1fr;gap:.4rem}
  .wf-pipe-step{flex-direction:row;align-items:center;text-align:left;padding:.55rem .8rem;gap:.7rem}
  .wf-pipe-step.has-items::before{display:none}
  .wf-pipe-icon{width:32px;height:32px;font-size:.78rem;margin:0;border-radius:var(--r-xs)}
  .wf-pipe-name{flex:1;-webkit-line-clamp:1;line-clamp:1;font-size:.78rem;margin:0;min-height:0}
  .wf-pipe-count{font-size:1rem;margin:0;flex-shrink:0;min-width:24px;text-align:right}
  .wf-pipe-bar{display:none}
}

/* Desktop: let the workflow card take the full width since the pipeline reads better wide */
@media(min-width:1100px){
  .dash-overview-2col{grid-template-columns:1fr;gap:1rem}
  .dash-overview-2col>:first-child{order:0}
  .dash-overview-2col>:last-child{order:1;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
}

/* ============================================================================
 *  MISSION CONTROL — interactive Dashboard overview
 *  Adds: numbered BPMN step badges, SLA chips, 3-col Action Center, clickable
 *  focus cells. Designed to read as a project-management mission control with
 *  every number being a navigation cue back to the underlying workload.
 * ============================================================================ */
.mc-pipeline-card .card-header{flex-wrap:wrap;gap:.6rem}
.mc-pipeline-legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
.mc-legend-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.65rem;font-weight:600;color:var(--ink-4);background:var(--surface);border:1px solid var(--border);padding:.18rem .5rem;border-radius:var(--r-pill)}
.mc-legend-chip i{font-size:.62rem}

/* Numbered step badge in upper-left of each phase card */
.mc-pipe-step{padding-top:1.05rem}
.mc-step-no{position:absolute;top:.3rem;left:.4rem;font-family:var(--font-display);font-size:.6rem;font-weight:800;color:var(--ink-4);background:var(--surface);border:1px solid var(--border);min-width:1.1rem;height:1.1rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;line-height:1}
.mc-pipe-step.active-phase .mc-step-no{background:var(--primary);color:#fff;border-color:var(--primary)}
.mc-pipe-step.has-items .mc-step-no{color:var(--ink-2)}

/* SLA chip under count */
.mc-sla-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.58rem;font-weight:700;color:var(--ink-3);background:var(--surface);border:1px solid var(--border);padding:.12rem .4rem;border-radius:var(--r-pill);margin-bottom:.4rem;letter-spacing:.02em;white-space:nowrap}
.mc-sla-chip i{font-size:.55rem;color:var(--warn)}
.mc-pipe-step.has-items .mc-sla-chip{border-color:var(--warn-border,#F5C97A);background:var(--warn-bg,#FFF7E6);color:var(--warn)}

/* Action Center — 3-column urgency matrix */
.mc-action-center{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.mc-action-col{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem .9rem;display:flex;flex-direction:column;gap:.55rem;border-top:3px solid var(--ink-4)}
.mc-action-col.urgent{border-top-color:var(--err)}
.mc-action-col.review{border-top-color:var(--gold)}
.mc-action-col.next{border-top-color:var(--ok)}
.mc-action-head{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--ink);font-family:var(--font-display)}
.mc-action-head i{font-size:.78rem}
.mc-action-col.urgent .mc-action-head i{color:var(--err)}
.mc-action-col.review .mc-action-head i{color:var(--gold)}
.mc-action-col.next .mc-action-head i{color:var(--ok)}
.mc-action-cnt{margin-left:auto;font-family:var(--font-display);font-size:.85rem;font-weight:800;background:var(--surface);border:1px solid var(--border);min-width:1.5rem;text-align:center;padding:.05rem .42rem;border-radius:var(--r-pill);color:var(--ink-3)}
.mc-action-list{display:flex;flex-direction:column;gap:.4rem}
.mc-action-item{padding:.5rem .65rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.mc-action-item:hover{border-color:var(--primary);background:#fff;transform:translateX(2px)}
.mc-action-title{font-weight:600;font-size:.78rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-action-meta{font-size:.66rem;color:var(--ink-4);margin-top:.15rem;letter-spacing:.02em}
.mc-action-col.urgent .mc-action-meta{color:var(--err)}
.mc-action-empty{font-size:.72rem;color:var(--ink-5);font-style:italic;padding:.3rem 0}
.mc-action-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--ink-4);display:inline-block;flex-shrink:0}
.mc-action-dot.urgent{background:var(--err);box-shadow:0 0 0 0 rgba(220,53,69,.4);animation:mcPulseDot 1.6s ease-out infinite}
.mc-action-dot.review{background:var(--gold)}
.mc-action-dot.next{background:var(--ok)}
@keyframes mcPulseDot{0%{box-shadow:0 0 0 0 rgba(220,53,69,.4)}70%{box-shadow:0 0 0 8px rgba(220,53,69,0)}100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}}

/* Clickable focus cells (Admin focus + Project control) */
.wf-focus-item.clickable{cursor:pointer;border:1px solid transparent;border-radius:var(--r-xs);padding:.4rem .35rem;transition:border-color .15s,background .15s,transform .15s;-webkit-tap-highlight-color:rgba(21,147,121,.08)}
.wf-focus-item.clickable:hover{border-color:var(--border-2);background:var(--surface)}
.wf-focus-item.clickable:focus-visible{outline:none;border-color:var(--primary);background:var(--surface)}
.wf-focus-item.clickable.active{border-color:var(--primary);background:linear-gradient(180deg,rgba(21,147,121,.06),var(--white));box-shadow:inset 0 0 0 1px rgba(21,147,121,.18)}

/* Lane detail meta row (UC, Owner, SLA chips) */
.wf-lane-meta-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.wf-lane-meta-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;padding:.2rem .55rem;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);color:var(--ink-3);font-weight:600}
.wf-lane-meta-chip.sla{background:var(--warn-bg,#FFF7E6);border-color:var(--warn-border,#F5C97A);color:var(--warn)}
.wf-lane-meta-chip i{font-size:.65rem}

@media(max-width:900px){
  .mc-action-center{grid-template-columns:1fr;gap:.75rem}
  .mc-pipeline-legend{order:3;flex-basis:100%}
}
@media(max-width:768px){
  .mc-pipe-step{padding-top:.6rem}
  .mc-step-no{position:static;margin-bottom:.2rem}
  .mc-sla-chip{margin:.1rem 0 .25rem;font-size:.55rem}
}

/* ============================================================================
 * PRODUCTION POLISH  design-system unification, motion tokens, micro-feedback
 * Loaded last so it overrides earlier definitions where intentional.
 * ============================================================================ */

/*  Motion tokens (referenceable across components)  */
:root{
  --t-fast:.12s;--t-base:.18s;--t-slow:.28s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-soft-spring:cubic-bezier(.34,1.2,.64,1);
}

/*  Global top-of-viewport progress bar (driven by body[data-refreshing])
 *  Matches the local .loading-strip animation (slim sweeping segment) so
 *  card-level and page-level loading feedback feel like one unified system. */
body::before{
  content:"";
  position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-progress-bar);
  overflow:hidden;
  opacity:0;transform:translateY(-2px);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
  pointer-events:none;
}
body::after{
  content:"";position:fixed;top:0;left:0;width:40%;height:2px;z-index:var(--z-progress-bar);
  background:linear-gradient(90deg,transparent,var(--red-3) 45%,var(--brand-navy) 55%,transparent);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease-out);
}
body[data-refreshing="true"]::before{ opacity:1;transform:none; }
body[data-refreshing="true"]::after{
  opacity:1;
  animation:loadingStripSlide 1.2s ease-in-out infinite;
}

/*  Refresh button: icon rotation only — no spinning border halo  */
.btn-refresh-spinning{opacity:.75;pointer-events:none}
.btn-refresh-spinning i.fas,
.btn-refresh-spinning i{
  display:inline-block;transform-origin:50% 50%;
  animation:refreshSpin .7s linear infinite!important;
}

/*  Toast: leading color stripe + smoother exit  */
.toast{position:relative;padding-left:1.25rem;overflow:hidden}
.toast::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.85;border-radius:3px 0 0 3px;
}
.toast.toast-leaving{animation:toastOut .22s var(--ease-out) forwards}
@keyframes toastOut{
  to{opacity:0;transform:translateX(28px) scale(.96)}
}

/*  View transition: opacity-only — no translate so position:fixed modals aren't trapped  */
@keyframes viewEnterAnim{
  from{opacity:0}
  to  {opacity:1}
}
.view-enter{animation:viewEnterAnim .22s ease both}

/*  Stat-card / count flash on data update  */
.stat-btn .stat-num{transition:color .25s var(--ease-out),transform .25s var(--ease-soft-spring)}
.stat-btn .stat-num.flash{animation:countFlash .55s var(--ease-out)}
@keyframes countFlash{
  0%{color:var(--red);transform:scale(1.12)}
  60%{color:var(--red-2);transform:scale(1.04)}
  100%{transform:none}
}

/*  Form fields: softer focus glow + subtle lift on focus  */
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,
.search-input:focus{
  box-shadow:0 0 0 3px rgba(21,147,121,.13),0 4px 14px rgba(21,147,121,.08);
}
.form-field input,.form-field select,.form-field textarea{
  transition:border-color var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             background var(--t-base) var(--ease-out);
}

/*  Card hover lift: unify across surfaces  */
.card:not(.card-loading):hover{box-shadow:var(--shadow-md)}

/*  Chips & badges: smoother color/scale transitions  */
.chip:active{transform:scale(.96);transition-duration:.06s}

/*  Buttons: pressed ripple-feel + cohesive transition timing  */
.btn{transition:background var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out)}
.btn-icon:hover:not(:disabled){box-shadow:var(--shadow-sm)}
.btn-icon:active:not(:disabled){opacity:.85;transition-duration:.06s}

/*  Tabs: animated underline glide  */
.nav-tab{position:relative}
.nav-tab::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:var(--red);border-radius:2px 2px 0 0;
  transition:left .25s var(--ease-soft-spring),right .25s var(--ease-soft-spring),opacity .15s ease;
  opacity:0;
}
.nav-tab.active::after,.nav-tab[aria-current="page"]::after{left:18%;right:18%;opacity:1}
.nav-tab:hover::after{left:32%;right:32%;opacity:.55}

/*  Skeleton shimmer: warmer accent that matches brand  */
.skeleton,.cb-skel-icon,.cb-skel-line,.cb-skel-btn,.skeleton-line{
  background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);
  background-size:220% 100%;
  animation:cbShimmer 1.35s linear infinite;
  border-radius:6px;
}

/*  Dropdown / select arrow recolor on hover  */
.form-field select:hover{cursor:pointer}

/*  Scroll-shadow on header (cheap, no JS)  */
.app-header{transition:box-shadow .22s var(--ease-out)}

/*  prefers-reduced-motion: silence the new animations too  */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none!important;opacity:0!important}
  .btn-refresh-spinning i{animation:none!important}
  @keyframes viewEnterAnim{from,to{opacity:1;transform:none;filter:none}}
  @keyframes mBoxIn{from,to{opacity:1;translate:none}}
  @keyframes countFlash{from,to{transform:none;color:inherit}}
  @keyframes topRefreshSweep{from,to{background-position:0 0}}
  .toast.toast-leaving{animation:none;opacity:0}
}
/* ============================================================================
 *  QoL POLISH BATCH 2  responsive feel, focus polish, snappier interactions
 * ============================================================================ */

/* Nav-tab  sliding underline driven by a single ::after element (no JS) */
.nav-tabs{position:relative}
.nav-tab{position:relative;border-bottom:2px solid transparent;transition:color .2s var(--ease-out),background .2s var(--ease-out),border-bottom-color .25s var(--ease-out)}
.nav-tab:hover{color:var(--red-2)}
.nav-tab.active{color:var(--red);border-bottom-color:var(--red)}
.nav-tab:focus-visible{outline:none;background:rgba(21,147,121,.05);border-radius:var(--r-xs) var(--r-xs) 0 0}

/* Button: tactile press feedback systemwide */
.btn:active:not(:disabled){opacity:.88;transition-duration:60ms}
.btn-icon:active:not(:disabled){opacity:.8}

/* Disabled state  clearer affordance */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:saturate(.7)}

/* Inputs: slimmer focus ring + rounded selection */
.form-field input:hover:not(:focus),.form-field select:hover:not(:focus),.form-field textarea:hover:not(:focus){border-color:var(--border-2)}

/* Card: subtle shadow growth on hover (no transform  avoids dashboard jitter) */
.card{transition:box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}

/* Live update breadcrumb dot */
.breadcrumb-strip{position:relative}
body[data-refreshing="true"] .breadcrumb-inner::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-left:.5rem;vertical-align:middle;
  animation:liveDotPulse 1.2s ease-in-out infinite;
}
@keyframes liveDotPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* View-enter: opacity-only — translate removed to keep position:fixed modals uncontained */
@keyframes viewEnterAnim{from{opacity:0}to{opacity:1}}
.view-enter{animation:viewEnterAnim .22s var(--ease-out) both}

/* Skeleton: gentler grey for less visual noise */
.skeleton{background:linear-gradient(90deg,var(--bg-2) 0%,var(--surface) 50%,var(--bg-2) 100%);background-size:220% 100%;animation:cbShimmer 1.4s linear infinite;border-radius:6px}

/* Toast container max-width on mobile so 4 stacked toasts don't push off-screen */
@media(max-width:520px){
  #toast-container{left:.6rem;right:.6rem;bottom:.8rem;max-width:none}
  .toast{width:auto}
}

/* Drawer items: visible-press feedback */
.drawer-item:active{background:rgba(21,147,121,.08);transition-duration:40ms}

/* Smooth number tabular alignment for stat counters */
.stat-num,.dash-stat-num{font-variant-numeric:tabular-nums}

/* Reduced-motion supplements for additions above */
@media(prefers-reduced-motion:reduce){
  @keyframes liveDotPulse{from,to{opacity:.6;transform:none}}
  @keyframes viewEnterAnim{from,to{opacity:1;transform:none}}
  .btn:active:not(:disabled){transform:none}
}

/* ════════════════════════════════════════════════════════════════════════════
 *  MODAL SYSTEM v5  ·  grid-based, clip-proof
 *  Architecture
 *    • overlay  = fixed scrim, centres modal-box via flex
 *    • modal-box = grid card with auto/1fr/auto rows (head/body/foot)
 *      grid eliminates flex-shrink ambiguity → body is always allocated 1fr
 *      and scrolls reliably even when content exceeds height cap
 *    • <form class="modal-box"> works seamlessly (form IS the grid container)
 *    • sizes     = narrow 440 / default 600 / wide 760 / form-modal 980(1100) / fullscreen 95vw
 *    • mobile ≤640px → bottom-sheet slides up
 *    • compatibility: `.closing` AND `.modal-closing` both trigger exit
 * ════════════════════════════════════════════════════════════════════════════ */

/* —— Overlay: scrim + frosted glass, centres modal-box ——
 *  Canonical pattern (proven in legacy monolith): align-items:center, padding:1rem,
 *  overflow-y:auto + box max-height cap. The flexbox scroll-clip bug never triggers
 *  because the box is hard-capped to fit the viewport. */
.modal-overlay{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:none;
  background:rgba(14,10,12,.66);
  /* Backdrop blur is the single most expensive overlay paint; cap to a tiny
     value (still gives a frosted feel) and disable on touch devices where
     the GPU cost compounds with the parent page's compositor. */
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  -webkit-tap-highlight-color:transparent;
  animation:mOverlayIn .14s var(--ease-out) both;
  -webkit-overflow-scrolling:auto;
  /* Promote to its own compositor layer so the box animation never repaints
     siblings under the overlay. */
  contain:layout paint style;
  will-change:opacity,transform;
  transform:translateZ(0);
}
@media (hover:none) and (pointer:coarse){
  .modal-overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.modal-overlay.doc-viewer-overlay{padding:0;background:rgba(8,8,10,.92);align-items:stretch;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;touch-action:manipulation}

/* ── Reviewer modal instant-load optimizations (v8.0.15-rolebased) ──────
 * Reviewer assignment modal and scoring modal are the two heaviest overlays.
 * These rules pre-warm the compositor, use content-visibility for off-screen
 * reviewer cards, and composite the background independently so the modal
 * opens in a single frame with zero layout shift. */
.reviewer-assign-modal .modal-box,
.reviewer-score-modal .modal-box{contain:layout style paint;will-change:transform}
.reviewer-pool-grid{content-visibility:auto;contain-intrinsic-size:auto 52px}
.reviewer-pool-item{content-visibility:auto;contain-intrinsic-size:auto 44px}
/* Reviewer card skeleton — instant placeholder while pool streams in.
   Uses the same shimmer pattern as .skel so reviewers see structure
   immediately on modal open, then cards pop in as data arrives. */
.reviewer-pool-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.55rem}
.reviewer-pool-skeleton .skel-card{height:48px;border-radius:var(--r-sm)}
/* Reviewer assets (documents, signed consent forms) — pre-render as
   GPU-composited layers so scrolling the pool list is always 60fps. */
.reviewer-pool-grid img,.reviewer-pool-grid canvas{transform:translateZ(0);backface-visibility:hidden}
/* Optimistic UI: status badge transitions for assign/consent/decline
   actions — the badge slides in with a spring, then settles. */
@keyframes reviewerBadgeIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.reviewer-status-badge{animation:reviewerBadgeIn .28s var(--ease-spring) both}

/* ── Role-based dashboard cards (v8.0.15-rolebased) ─────────────────── */
/* Role-specific metric cards with accent color coding:
   Admin=navy, Reviewer=teal, Applicant=lavender */
.dash-role-card{position:relative;overflow:hidden;transition:box-shadow var(--t-lg) var(--ease),transform var(--t) var(--ease)}
.dash-role-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.dash-role-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.dash-role-card.admin::before{background:var(--brand-gradient)}
.dash-role-card.reviewer::before{background:linear-gradient(90deg,var(--brand-teal),var(--brand-lavender))}
.dash-role-card.applicant::before{background:linear-gradient(90deg,var(--brand-lavender),var(--brand-teal))}
/* Responsive reactive stat cards — 6-col on desktop, 3-col tablet, 2-col mobile */
.dash-stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem}
@media(max-width:1100px){.dash-stats-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.dash-stats-grid{grid-template-columns:repeat(2,1fr)}}
/* Quick actions row — wraps on mobile */
.dash-actions-row{display:flex;gap:.55rem;flex-wrap:wrap}
.dash-action-btn{flex:1 1 auto;min-width:140px;text-align:center;padding:.65rem 1rem}

/* ── Role-based stat card interior styling ──────────────────────────── */
.dash-stat-card{padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.4rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r);cursor:default;transition:border-color var(--t),box-shadow var(--t)}
.dash-stat-card:hover{border-color:var(--red-border);box-shadow:var(--shadow-sm)}
.dash-stat-card .stat-icon-row{display:flex;align-items:center;gap:.5rem}
.dash-stat-card .stat-icon{font-size:1.15rem;color:var(--ink-4);flex-shrink:0}
.dash-stat-card .stat-num{font-family:var(--font-display);font-size:1.65rem;font-weight:700;color:var(--ink);line-height:1}
.dash-stat-card .stat-label{font-size:.68rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.dash-stat-card .stat-sub{font-size:.7rem;color:var(--ink-4);display:flex;gap:.8rem;flex-wrap:wrap}
.dash-stat-card .stat-sub span{white-space:nowrap}
.dash-stat-card .stat-bar{height:4px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin-top:.25rem}
.dash-stat-card .stat-bar-fill{height:100%;border-radius:99px;transition:width .6s var(--ease)}
.dash-stat-card .stat-action{margin-top:.35rem}
/* Tone variants */
.dash-stat-card.warn .stat-icon{color:var(--warn)}
.dash-stat-card.warn .stat-bar-fill{background:var(--warn)}
.dash-stat-card.err .stat-icon{color:var(--err)}
.dash-stat-card.err .stat-bar-fill{background:var(--err)}

/* ── Process timeline (matching images) ──────────────────────────── */
.dash-timeline{display:flex;align-items:flex-start;gap:0;padding:.5rem 0;overflow-x:auto}
.dash-tl-step{flex:1 1 0;min-width:90px;text-align:center;position:relative;padding:.5rem .3rem 0}
.dash-tl-step::after{content:'';position:absolute;top:22px;left:50%;right:-50%;height:3px;background:var(--border);z-index:0}
.dash-tl-step:last-child::after{display:none}
.dash-tl-step.active::after{background:var(--brand-teal)}
.dash-tl-dot{width:18px;height:18px;border-radius:50%;margin:0 auto .4rem;position:relative;z-index:1;border:2px solid var(--border);background:var(--white);transition:border-color var(--t),background var(--t)}
.dash-tl-step.active .dash-tl-dot{background:var(--brand-teal);border-color:var(--brand-teal)}
.dash-tl-step.done .dash-tl-dot{background:var(--ok);border-color:var(--ok)}
.dash-tl-label{font-size:.62rem;font-weight:600;color:var(--ink-4);letter-spacing:.02em;line-height:1.25}
.dash-tl-step.active .dash-tl-label{color:var(--ink)}
.dash-tl-count{font-size:.58rem;color:var(--ink-5);margin-top:.15rem}
/* Doc viewer modal-box ALWAYS exactly fills its overlay slice — never relies
   on viewport units which break inside an iframe whose height ≠ parent vh.
   The iframe-anchor JS in index.html pins the overlay to the visible parent
   slice; this rule guarantees the box matches that slice 1:1, so head/body/
   footer stay reachable and the page underneath never bleeds through. */
.modal-overlay.doc-viewer-overlay > .modal-box.fullscreen{
  width:100%!important;max-width:100%!important;
  height:100%!important;max-height:100%!important;
  margin:0!important;border-radius:0!important;border:none!important;
}
.modal-overlay.doc-viewer-overlay > .modal-box.fullscreen::before{display:none!important}
@keyframes mOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes mOverlayOut{from{opacity:1}to{opacity:0}}

/* —— Box: grid card with auto/1fr/auto rows ——
 *  IMPORTANT: grid-template-rows:auto minmax(0,1fr) auto
 *  → body row gets 1fr but minmax(0,...) lets it shrink so internal scroll works.
 *  → no head/footer cropping when content tall, no body-clipping when content short.
 *  Works whether <div> or <form> is the box.
 *  
 *  OUT-OF-BOUNDS PROTECTION: Every child of .modal-box is forced to respect
 *  the box's width via `min-width:0`. This prevents long unbreakable strings
 *  (URLs, base64 data, JSON) and wide tables from spilling past the modal edge.
 */
.modal-box{
  position:relative;
  isolation:isolate;
  background:var(--white);
  border:1px solid rgba(0,0,0,.07);
  border-radius:calc(var(--r) + 2px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.24),
    0 12px 36px rgba(0,0,0,.12),
    0 3px 10px rgba(0,0,0,.07),
    0 0 0 1px rgba(255,255,255,.06) inset;
  width:min(880px,100%);
  max-width:100%;
  /* IFRAME-AWARE: % refers to overlay (which JS pins to parent viewport).
     vh/dvh would resolve to iframe height — catastrophic when iframe is
     taller than parent viewport. The 2rem accounts for overlay padding. */
  max-height:calc(100% - 2rem);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  animation:mBoxIn .18s var(--ease-out) both;
  outline:none;
  /* Isolate the box's transform/opacity animation from sibling repaints. */
  contain:layout paint;
  will-change:transform,opacity;
}
/* Prevent children from overflowing horizontally — force word-break on
   any text content and min-width:0 for flex/grid children so they shrink
   instead of overflowing the box. */
.modal-box > *{min-width:0;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
/* Ensure table-like content inside modals never exceeds the box width.
   Tables and preformatted blocks are the most common sources of horizontal
   overflow in report/listing modals. */
.modal-box table,.modal-box pre,.modal-box code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.modal-box img{max-width:100%;height:auto}
.modal-box:not(.closing){will-change:auto}
.modal-box:focus-visible{outline:none}
@keyframes mBoxIn{from{opacity:0;translate:0 14px;scale:.99}to{opacity:1;translate:none;scale:1}}
@keyframes mBoxOut{from{opacity:1;translate:none;scale:1}to{opacity:0;translate:0 6px;scale:.99}}

/* —— Size tiers —— */
.modal-box.narrow    {width:min(620px,100%)}
.modal-box.wide      {width:min(1080px,100%)}
.modal-box.form-modal{width:min(1280px,100%)}
@media (min-width:1400px){.modal-box.form-modal{width:min(1420px,100%)}}
@media (min-width:1700px){.modal-box.form-modal{width:min(1560px,100%)}}
/* Competition create/edit form — denser layout, needs more horizontal room
   for the side-by-side budget/templates and criteria textareas. */
/* v12.18.0: Constrained to a usable width — the old 1480-1780px cap was full-viewport
   on common 1366-1440px screens. Now capped at 980px (still wide for 2-col form layout)
   with 1rem overlay breathing room on each side. min-height ensures the wizard body
   never collapses to an unusable height on short viewports. */
.modal-box.modal-form{width:min(980px,calc(100% - 2rem));min-height:min(600px,calc(100% - 2rem));max-height:min(calc(100dvh - 2rem),calc(100% - 2rem));overflow:hidden}
@media (min-width:1400px){.modal-box.modal-form{width:min(1080px,calc(100% - 2rem))}}
@media (min-width:1700px){.modal-box.modal-form{width:min(1200px,calc(100% - 2rem))}}
.modal-box.modal-form .modal-body{padding:clamp(.75rem,2vw,1.4rem) clamp(.75rem,2.5vw,1.5rem);min-height:420px}
.modal-box.modal-form .form-section{margin-bottom:1.4rem}

/* ── Info Center Modal (shown before NewFormModal) ── */
.info-center-modal{width:min(720px,100%);max-height:calc(100% - 2rem);position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.info-center-head{background:linear-gradient(135deg,var(--gold-light,#fdf3e0) 0%,var(--bg) 100%);border-bottom:2px solid var(--gold,#c4962c)}
.info-center-head h3{font-size:1rem;color:var(--ink-2);display:flex;align-items:center}
.info-center-body{padding:1.2rem 1.5rem;overflow-y:auto}
.info-center-title{font-size:.82rem;font-weight:700;color:var(--ink-2);line-height:1.5;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start}
.info-center-steps{list-style:none;counter-reset:ic-step;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.info-center-steps li{counter-increment:ic-step;font-size:.78rem;line-height:1.5;color:var(--ink-3);padding:.45rem .65rem .45rem 2.4rem;position:relative;background:var(--bg-2);border-radius:var(--r-sm);border:1px solid var(--border);transition:background .2s}
.info-center-steps li::before{content:counter(ic-step);position:absolute;left:.55rem;top:.45rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--gold,#c4962c);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.info-center-steps li:hover{background:var(--gold-light,#fef8ee);border-color:var(--gold,#c4962c)}
.info-center-cta{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:1rem;padding:.65rem 1rem;background:linear-gradient(135deg,var(--primary,#1a56db) 0%,#1e40af 100%);color:#fff;border-radius:var(--r-sm);font-size:.78rem;font-weight:600;text-decoration:none;transition:all .2s;box-shadow:0 2px 8px rgba(26,86,219,.25)}
.info-center-cta:hover{background:linear-gradient(135deg,#1e40af 0%,#1e3a8a 100%);box-shadow:0 4px 14px rgba(26,86,219,.35);transform:translateY(-1px);color:#fff;text-decoration:none}
.info-center-cta-url{font-weight:400;opacity:.85;font-size:.74rem}
.modal-box.modal-form .form-layout-grid{gap:1rem 1.5rem}
@media (max-width:640px){.modal-box.modal-form .form-layout-grid{gap:.75rem .9rem}}
.modal-box.modal-form textarea{min-height:90px;max-height:60vh;resize:vertical}
/* Fullscreen variant (doc viewer + competition form): fills overlay 100%.
   Width caps at 1760px on ultra-wide displays so content stays readable. */
.modal-box.fullscreen{width:min(98%,1760px);height:100%;max-height:100%}

/* —— Legacy .modal-form helper.
 *    When form IS the modal-box (form.modal-box.modal-form): no-op, grid handles it.
 *    When form WRAPS body inside a div.modal-box (<div class="modal-box"><form class="modal-form">),
 *    display:contents lets head/body/foot pass through to the parent grid rows. */
.modal-form:not(.modal-box){display:contents}

/* —— Head (row 1, auto-sized) —— */
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:clamp(.8rem,2vw,1.4rem) clamp(.8rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--border);
  background:var(--white);
  border-radius:calc(var(--r) + 2px) calc(var(--r) + 2px) 0 0;
  min-width:0;
  flex-shrink:0;
  box-shadow:0 1px 0 var(--border);
}
.modal-head h3{
  margin:0;flex:1;min-width:0;
  font-family:var(--font-display);font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;
  line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modal-head h3 i{font-size:clamp(.8rem,2vw,.96rem);color:var(--red);flex-shrink:0}

/* —— Body (row 2, 1fr — the ONLY scroll container) ——
 *  Scroll-edge fade indicators (background-attachment:local trick): two solid
 *  white panels at top/bottom hide the inner radial shadows when scrolled to
 *  the edges; shadows reappear automatically when content extends beyond.
 *  Pure CSS — no JS, no scroll listeners, GPU-cheap. */
.modal-body{
  min-height:0;min-width:0;
  overflow-y:auto;overflow-x:visible;
  overscroll-behavior:contain;
  padding:clamp(.9rem,2vw,1.75rem);
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
  background:
    linear-gradient(var(--white) 30%, rgba(255,255,255,0)) 0 0/100% 28px no-repeat local,
    linear-gradient(rgba(255,255,255,0), var(--white) 70%) 0 100%/100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.10), rgba(0,0,0,0)) 0 0/100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.10), rgba(0,0,0,0)) 0 100%/100% 12px no-repeat scroll,
    var(--white);
}
.modal-body::-webkit-scrollbar{width:5px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--red-3)}
/* Remove trailing space from last field in modal body */
.modal-body>.form-field:last-child,
.modal-body .form-section:last-child .form-field:last-child{margin-bottom:0}

/* —— Footer (row 3, auto-sized) —— */
.modal-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;
  padding:clamp(.6rem,1.5vw,1.25rem) clamp(.6rem,2.5vw,1.75rem);
  padding-bottom:max(clamp(.6rem,1.5vw,1.25rem),env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--surface);
  border-radius:0 0 calc(var(--r) + 2px) calc(var(--r) + 2px);
  min-width:0;
  flex-shrink:0;
}
.modal-footer .btn{min-width:clamp(80px,18vw,140px)}
.modal-footer .btn-sm{min-width:auto}
/* Cancel always leftmost when only 2 buttons */.modal-footer>.btn-outline:first-child{margin-right:auto}

/* —— Doc-viewer fullscreen — body becomes the preview container ——
 *  Reset the scroll-edge fade gradients (they're meaningless when the body
 *  is a flex container holding an iframe/preview). */
.modal-box.fullscreen>.modal-body{display:flex;flex-direction:column;padding:0;overscroll-behavior:auto;background:var(--white);overflow:hidden}
.modal-box.fullscreen>.modal-body>*{flex:1 1 auto;min-height:0}

/* —— Exit animation —— */
.modal-overlay.closing,.modal-overlay.modal-closing{
  animation:mOverlayOut .14s var(--ease) forwards;pointer-events:none;
}
.modal-box.closing,.modal-box.modal-closing{
  animation:mBoxOut .14s var(--ease) forwards;
}

/* —— Mobile ≤640px → centered floating card (NOT bottom-sheet) ——
   UX: modal floats slightly above center for thumb-reach, with side gutters
   so the user can always see the page edges (visual anchor). Fullscreen
   variants (doc viewer, competition form) stay edge-to-edge — they need
   every pixel for content. */
@media (max-width:640px){
  .modal-overlay{
    align-items:center;justify-content:center;
    padding:1rem .9rem;
    /* Slight upward bias so the modal sits at ~45% screen height — closer
       to thumb reach on tall phones, away from the URL bar at the top. */
    padding-top:max(.85rem,env(safe-area-inset-top));
    padding-bottom:max(1.5rem,calc(env(safe-area-inset-bottom,0) + 1rem));
    background:rgba(10,10,12,.65);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    overflow-y:hidden;
  }
  /* Touch devices: drop blur entirely — compositor cost compounds with the
     parent page on phones and adds visible jank on the open animation. */
  @media (hover:none) and (pointer:coarse){
    .modal-overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
  }
  /* Doc-viewer: must stay edge-to-edge stretched (preview iframe needs every
     pixel). Override the centered-card rules. */
  .modal-overlay.doc-viewer-overlay{align-items:stretch;justify-content:stretch;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .modal-box,
  .modal-box.narrow,
  .modal-box.wide,
  .modal-box.form-modal,
  .modal-box.modal-form{
    width:100%;max-width:100%;
    /* Allow up to overlay height minus padding; box auto-sizes shorter when
       content fits. Body row scrolls when content exceeds. */
    max-height:100%;
    margin:0 auto;
    /* Rounded card on all corners (was only top corners for bottom-sheet). */
    border-radius:calc(var(--r) + 4px);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:
      0 24px 60px rgba(0,0,0,.32),
      0 8px 20px rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.04) inset;
    animation:mBoxCenterIn .26s var(--ease-out) both;
  }
  /* Fullscreen modals (doc viewer, competition form) stay edge-to-edge. */
  .modal-box.fullscreen{
    width:100%;max-width:100%;height:100%;max-height:100%;
    margin:0;border-radius:0;border:none;box-shadow:none;
    animation:mBoxIn .2s var(--ease-out) both;
  }
  /* Drag-handle pill removed — no longer a bottom-sheet, the affordance would
     mislead users into expecting swipe-down-to-dismiss. Tap-backdrop-to-close
     remains the standard exit path (handled by _useOverlayClickGuard). */
  .modal-box::before{display:none}
  .modal-head{padding:.85rem 1rem .75rem}
  .modal-head h3{font-size:.9rem}
  .modal-body{padding:1.2rem;padding-bottom:1.35rem}
  .modal-footer{
    padding:.9rem 1.2rem;
    padding-bottom:max(1rem,calc(env(safe-area-inset-bottom,0) + .35rem));
    justify-content:stretch;
  }
  .modal-footer .btn{flex:1 1 auto;min-width:0;min-height:46px;font-size:.87rem;padding:.7rem .9rem}
  .modal-footer>.btn-outline:first-child{margin-right:0}
  .modal-box.closing,.modal-box.modal-closing{animation:mBoxCenterOut .2s var(--ease) forwards}
  .modal-box.fullscreen.closing,.modal-box.fullscreen.modal-closing{animation:mBoxOut .16s var(--ease) forwards}
}
@keyframes mBoxCenterIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mBoxCenterOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.97)}}
/* Legacy bottom-sheet keyframes retained for any external refs but unused. */
@keyframes mBoxSheetIn{from{opacity:0;margin-top:36px}to{opacity:1;margin-top:0}}
@keyframes mBoxSheetOut{from{opacity:1;margin-top:0}to{opacity:0;margin-top:28px}}

/* —— Landscape phone —— */
@media (max-height:500px) and (orientation:landscape){
  .modal-box{max-height:100%}
  .modal-box.fullscreen{height:100%;max-height:100%}
}

/* —— Print —— */
@media print{.modal-overlay{display:none!important}}

/* —— Reduced motion —— */
@media (prefers-reduced-motion:reduce){
  .modal-overlay,.modal-box{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  @keyframes mBoxIn{from,to{opacity:1;translate:none}}
  @keyframes mBoxOut{from{opacity:1}to{opacity:0}}
  @keyframes mBoxSheetIn{from,to{opacity:1;margin-top:0}}
  @keyframes mBoxSheetOut{from{opacity:1}to{opacity:0}}
}

/* ════════════════════════════════════════════════════════════════════════════
 *  DETAIL SHEET  ·  side-panel replacement for the legacy "view-row" modal
 *  Pattern: Linear / Notion / GitHub Issues right-side detail panel.
 *  Anatomy:
 *    .detail-sheet-scrim   — soft tint over the underlying view (click to close)
 *    .detail-sheet         — fixed right-side panel (full-screen bottom-sheet on phone)
 *    .detail-sheet-head    — sticky header with title + actions + close
 *    .detail-sheet-body    — scroll container for FormDetail / similar
 *    .detail-sheet-footer  — sticky footer with workflow action buttons
 * ════════════════════════════════════════════════════════════════════════════ */

.detail-sheet-scrim{
  position:fixed;inset:0;z-index:var(--z-detail-scrim);
  background:rgba(12,10,14,.52);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  animation:dsScrimIn .24s var(--ease-out) both;
  cursor:pointer;
}
.detail-sheet-scrim.closing{animation:dsScrimOut .2s var(--ease) forwards;pointer-events:none}
@keyframes dsScrimIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(10px) saturate(140%)}}
@keyframes dsScrimOut{from{opacity:1}to{opacity:0}}

.detail-sheet{
  position:fixed;z-index:var(--z-detail-sheet);
  top:clamp(.4rem,1.2vh,1rem);
  left:50%;
  transform:translateX(-50%);
  width:min(1440px,96vw);
  /* IFRAME-AWARE: % of containing block (iframe viewport, sized to parentVH
     when overlay open by the iframe-bridge). vh/dvh would resolve to iframe
     height — catastrophic on long documents. */
  max-height:calc(100% - clamp(.8rem,2.4vh,2rem));
  background:var(--white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:
    0 32px 80px -20px rgba(14,10,14,.45),
    0 12px 32px -8px rgba(14,10,14,.18),
    0 0 0 1px rgba(255,255,255,.6) inset;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  animation:dsIn .32s var(--ease-out) both;
  -webkit-overflow-scrolling:touch;
  contain:style;
  isolation:isolate;
  outline:none;
  cursor:auto;
}
.detail-sheet.closing{animation:dsOut .2s var(--ease) forwards;pointer-events:none}
@keyframes dsIn{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes dsOut{from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.99)}}

.detail-sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.5rem 1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  border-radius:14px 14px 0 0;
}
.detail-sheet-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.22rem}
.detail-sheet-title h3{
  margin:0;font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--ink);
  display:flex;align-items:flex-start;gap:.55rem;
  line-height:1.3;min-width:0;word-break:break-word;
}
.detail-sheet-title h3 i{font-size:.92rem;color:var(--red);flex-shrink:0;margin-top:.18rem}
.detail-sheet-id{
  font-family:monospace;font-size:.7rem;color:var(--ink-4);
  letter-spacing:.04em;margin-top:.05rem;
}
.detail-sheet-head-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding-top:.12rem}

.detail-sheet-body{
  min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  padding:1.4rem 1.5rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
  background:var(--white);
}
.detail-sheet-body::-webkit-scrollbar{width:8px}
.detail-sheet-body::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px;border:2px solid var(--white)}
.detail-sheet-body::-webkit-scrollbar-thumb:hover{background:var(--ink-5)}
/* Center the FormDetail content column inside the (potentially very wide) detail sheet
   so long-form text + cards stay readable and don't stretch edge-to-edge on big screens. */
.detail-sheet-body > div{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
/* Sticky tab bar — stays visible as the body scrolls. */
.detail-sheet-body .fd-tabs{
  position:sticky;top:0;z-index:2;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  width:calc(100% + 3rem);
  margin-left:-1.5rem;
  margin-bottom:1rem;
  padding:.6rem 1.5rem .55rem;
  box-sizing:border-box;
  border-radius:0;
  border:none;border-bottom:1px solid var(--border);
}

.detail-sheet-footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  padding:.9rem 1.5rem;
  padding-bottom:max(.9rem,env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--surface);
  border-radius:0 0 14px 14px;
}
.detail-sheet-footer .btn{min-width:auto}
.detail-sheet-footer .btn:last-child:not(:first-child){margin-left:auto}
/* Large-screen: widen the panel */
@media(min-width:1440px){.detail-sheet{width:min(1620px,94vw)}}
@media(min-width:1700px){.detail-sheet{width:min(1780px,93vw)}}

/* —— Mobile (≤760px): top-anchored full-bleed sheet, NOT a bottom drawer.
    User explicitly wants the modal to appear "up front" on mobile too. —— */
@media (max-width:760px){
  .detail-sheet-scrim{
    background:rgba(14,10,12,.5);
  }
  .detail-sheet{
    top:0;left:0;right:0;
    transform:none;
    width:100%;max-width:100%;
    /* IFRAME-AWARE: 100% of containing block (iframe viewport = parentVH
       when modal open). dvh would resolve to iframe height which can be
       wildly different on long pages. */
    height:100%;max-height:100%;
    border-radius:0;
    border:none;
    box-shadow:none;
    animation:dsSheetIn .24s var(--ease-out) both;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .detail-sheet.closing{animation:dsSheetOut .2s var(--ease) forwards}
  .detail-sheet-head{
    position:sticky;top:0;z-index:5;
    padding:.7rem .85rem .65rem;
    padding-top:max(.7rem,env(safe-area-inset-top));
    border-radius:0;
    gap:.55rem;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
  }
  .detail-sheet-title{gap:.15rem}
  .detail-sheet-title h3{font-size:.92rem;line-height:1.25;gap:.4rem}
  .detail-sheet-title h3 i{font-size:.78rem;margin-top:.14rem}
  .detail-sheet-id{font-size:.62rem}
  .detail-sheet-head-actions{gap:.3rem;padding-top:0}
  .detail-sheet-head-actions .btn,
  .detail-sheet-head-actions .icon-btn{min-width:36px;min-height:36px;padding:.4rem .55rem}
  .detail-sheet-body{
    padding:.85rem .9rem 1rem;
    /* Drop the inner-content cap on mobile so cards fill width */
    background:var(--white);
  }
  .detail-sheet-body > div{max-width:100%;width:100%}
  .detail-sheet-body .fd-tabs{
    width:calc(100% + 1.8rem);
    margin-left:-.9rem;
    padding:.45rem .9rem 0;
    margin-bottom:.7rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .detail-sheet-body .fd-tabs::-webkit-scrollbar{display:none}
  .detail-sheet-body .fd-tabs button{flex:0 0 auto;font-size:.74rem;padding:.45rem .7rem;min-height:38px}
  .detail-sheet-body .fd-status-timeline{padding:.4rem .55rem;margin-bottom:.7rem}
  .detail-sheet-body .fd-docs-card{padding:.75rem .85rem;margin-bottom:.55rem}
  .detail-sheet-footer{
    padding:.65rem .85rem;
    padding-bottom:max(.65rem,env(safe-area-inset-bottom));
    gap:.4rem;
    justify-content:stretch;
    border-radius:0;
    flex-wrap:wrap;
  }
  .detail-sheet-footer .btn{flex:1 1 auto;min-height:44px;font-size:.82rem;padding:.55rem .7rem}
  .detail-sheet-footer .btn:last-child:not(:first-child){margin-left:0}
}

/* —— Very small phones (≤480px): tighten further, hide non-essential chrome —— */
@media (max-width:480px){
  .detail-sheet-head{padding:.6rem .7rem .55rem;padding-top:max(.6rem,env(safe-area-inset-top))}
  .detail-sheet-title h3{font-size:.86rem}
  .detail-sheet-id{font-size:.58rem}
  .detail-sheet-body{padding:.7rem .75rem .9rem}
  .detail-sheet-body .fd-tabs{width:calc(100% + 1.5rem);margin-left:-.75rem;padding:.4rem .75rem 0}
  .detail-sheet-body .fd-tabs button{font-size:.7rem;padding:.4rem .6rem}
  .detail-sheet-footer{padding:.55rem .7rem;padding-bottom:max(.55rem,env(safe-area-inset-bottom))}
  .detail-sheet-footer .btn{font-size:.78rem;min-height:42px;padding:.5rem .55rem}
}
/* No translate on the element — slide via opacity + margin-top so it cannot
   create a containing block during the animation. */
@keyframes dsSheetIn {from{opacity:.6;margin-top:40px}to{opacity:1;margin-top:0}}
@keyframes dsSheetOut{from{opacity:1;margin-top:0}to{opacity:.6;margin-top:28px}}

/* ── Interaction System ──────────────────────────────── */

/* Action dropdown menu */
.action-menu{position:fixed;z-index:var(--z-action-menu);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);padding:.35rem;min-width:160px;display:flex;flex-direction:column;gap:1px}
.action-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .75rem;border-radius:calc(var(--r-card) - 2px);font-size:.82rem;font-weight:500;color:var(--ink-2);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .12s,color .12s;white-space:nowrap}
.action-item:hover{background:var(--bg);color:var(--ink)}
.action-item.danger{color:var(--err)}
.action-item.danger:hover{background:var(--err-bg);color:var(--err)}
.action-sep{height:1px;background:var(--border);margin:.25rem 0}

/* Soft overlay (lighter backdrop, used for confirms / lightweight prompts) */
.modal-overlay.soft{background:rgba(0,0,0,.22)}
.modal-overlay.soft>.modal-box{
  box-shadow:
    0 24px 72px rgba(0,0,0,.18),
    0 6px 20px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.06);
}
.modal-overlay.soft>.modal-box.narrow{max-width:460px}

/* —— Tabs row inside modal head (e.g. ProfileSettingsModal) —— */
.modal-tabs{
  display:flex;
  gap:.35rem;
  padding:.6rem 1.75rem .1rem;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;
  background:var(--white);
}
.modal-tabs::-webkit-scrollbar{display:none}
.modal-tabs .chip{flex-shrink:0;white-space:nowrap}
/* Modal-box variant that adds a tabs row between head and body */
.modal-box.has-tabs{grid-template-rows:auto auto minmax(0,1fr) auto}

/* —— Reduced motion —— */
@media (prefers-reduced-motion:reduce){
  .detail-sheet,.detail-sheet-scrim{animation-duration:.01ms !important}
  @keyframes dsIn{from,to{opacity:1;scale:1}}
  @keyframes dsOut{from,to{opacity:0;scale:1}}
  @keyframes dsSheetIn{from,to{opacity:1;margin-top:0}}
  @keyframes dsSheetOut{from,to{opacity:0;margin-top:0}}
}


/* ═══ REVIEWS VIEW (rv-*) — backported from dataset ═══ */

/* ── View shell ── */
.rv-view{display:grid;gap:0}

/* ── Page header ── */
.rv-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.rv-header-left{display:flex;align-items:center;gap:.85rem}
.rv-header-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--red-2),var(--red));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(21,147,121,.28)}
.rv-header-icon i{color:#fff;font-size:.95rem}
.rv-header-title{font-family:var(--font-display);font-size:clamp(1.05rem,4vw,1.25rem);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.2rem;line-height:1.25;text-wrap:balance}
.rv-header-sub{font-size:.8rem;color:var(--ink-4);margin:0;line-height:1.4}
.rv-header-actions{flex-shrink:0}
.rv-pending-badge{display:inline-flex;align-items:center;font-size:.62rem;font-weight:800;color:var(--warn);background:var(--warn-bg);border:1.5px solid var(--warn-border);border-radius:var(--r-pill);padding:.18rem .55rem;letter-spacing:.04em;animation:rvBadgePulse 2.5s ease infinite}
@keyframes rvBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(122,74,0,0)}60%{box-shadow:0 0 0 4px rgba(122,74,0,.1)}}

/* ── Stats row ── */
.rv-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:1.1rem}
@media(max-width:640px){.rv-stats-row{grid-template-columns:repeat(2,1fr);gap:.5rem}}
.rv-stat-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.8rem .95rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s;cursor:default}
.rv-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--border)}
.rv-stat-all::before{background:var(--info)}
.rv-stat-pending::before{background:var(--warn)}
.rv-stat-submitted::before{background:var(--ok)}
.rv-stat-declined::before{background:var(--err)}
.rv-stat-card:hover{border-color:var(--border-2);box-shadow:var(--shadow-xs)}
/* Active/selected state when stat card is clicked to filter the list */
.rv-stat-card.rv-stat-active{border-color:transparent;box-shadow:var(--shadow-sm)}
.rv-stat-all.rv-stat-active{border-color:var(--info);background:var(--info-bg)}
.rv-stat-pending.rv-stat-active{border-color:var(--warn);background:var(--warn-bg)}
.rv-stat-submitted.rv-stat-active{border-color:var(--ok-border);background:var(--ok-bg)}
.rv-stat-declined.rv-stat-active{border-color:var(--err-border);background:var(--err-bg)}
/* Pointer cursor already set inline; keyboard focus ring */
.rv-stat-card:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.rv-stat-icon{font-size:.95rem;margin-bottom:.05rem}
.rv-stat-all .rv-stat-icon{color:var(--info)}
.rv-stat-pending .rv-stat-icon{color:var(--warn)}
.rv-stat-submitted .rv-stat-icon{color:var(--ok)}
.rv-stat-declined .rv-stat-icon{color:var(--err)}
.rv-stat-num{font-family:var(--font-display);font-size:1.55rem;font-weight:700;color:var(--ink);line-height:1;transition:color .2s}
.rv-stat-num.active{color:inherit}
.rv-stat-pending .rv-stat-num.active{color:var(--warn)}
.rv-stat-submitted .rv-stat-num.active{color:var(--ok)}
.rv-stat-lbl{font-size:.67rem;font-weight:700;color:var(--ink-4);letter-spacing:.04em;text-transform:uppercase}

/* ── Sanction Banner (UC-40: 3-year block) ── */
.sanction-banner{display:flex;align-items:flex-start;gap:.55rem;padding:.8rem 1rem;margin-bottom:1rem;background:var(--err-bg,#fdf2f2);border:1px solid var(--err-border,#f5c6c6);border-left:4px solid var(--err,#dc2626);border-radius:var(--r-sm);color:var(--err,#dc2626);font-size:.82rem;line-height:1.55}
.sanction-banner i{margin-top:.15rem;flex-shrink:0}

/* ── Two-Step Reviewer Process Stepper (UC-15 → UC-16) ── */
.reviewer-flow-steps{padding:1rem 1.25rem}
.reviewer-flow-track{display:flex;align-items:flex-start;gap:0}
.reviewer-flow-step{display:flex;align-items:flex-start;gap:.65rem;flex:1 1 0;min-width:0}
.reviewer-flow-step .rfs-circle{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;background:var(--border);color:var(--ink-4);border:2px solid var(--border)}
.reviewer-flow-step.active .rfs-circle{background:var(--review,#5b48d8);color:#fff;border-color:var(--review,#5b48d8);box-shadow:0 0 0 4px rgba(91,72,216,.12)}
.rfs-body{padding-top:.1rem}
.rfs-title{font-size:.8rem;font-weight:700;color:var(--ink-2);margin-bottom:.15rem}
.reviewer-flow-step.active .rfs-title{color:var(--review,#5b48d8)}
.rfs-desc{font-size:.72rem;color:var(--ink-4);line-height:1.4}
.rfs-connector{flex:0 0 40px;height:2px;background:var(--border);margin-top:19px;align-self:flex-start}

/* ── Budget Execution Chart ── */
.budget-exec-card .card-body{padding:.85rem 1rem}

/* ── Error bar ── */
.rv-error-bar{display:flex;align-items:center;gap:.55rem;background:var(--err-bg);border:1px solid var(--err-border);border-radius:var(--r-sm);padding:.7rem 1rem;margin-bottom:1rem;font-size:.82rem;color:var(--err)}
.rv-error-icon{flex-shrink:0}

/* ── Filter strip ── */
.rv-filter-strip{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap}
.rv-filter-pill{display:inline-flex;align-items:center;gap:.38rem;padding:.38rem .9rem;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--white);color:var(--ink-4);font-weight:700;font-size:.73rem;cursor:pointer;font-family:var(--font-body);transition:border-color .18s,background .18s,color .18s,box-shadow .18s;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent}
.rv-filter-pill i{font-size:.6rem;opacity:.65;transition:opacity .15s}
.rv-filter-pill:hover{border-color:var(--border-2);background:var(--surface);color:var(--ink-3)}
.rv-filter-pill.active{border-color:var(--red);background:var(--red-fog);color:var(--red)}
.rv-filter-pill.active i{opacity:1}
.rv-fp-count{background:var(--bg-2);color:var(--ink-4);border-radius:var(--r-pill);padding:.05rem .42rem;font-size:.65rem;font-weight:800;min-width:18px;text-align:center;transition:background .15s,color .15s}
.rv-filter-pill.active .rv-fp-count{background:rgba(21,147,121,.12);color:var(--red)}
.rv-fp-pending.active{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.rv-fp-pending.active .rv-fp-count{background:rgba(122,74,0,.12);color:var(--warn)}
.rv-fp-submitted.active{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.rv-fp-submitted.active .rv-fp-count{background:rgba(22,92,56,.12);color:var(--ok)}
.rv-fp-declined.active{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.rv-fp-declined.active .rv-fp-count{background:rgba(139,21,21,.12);color:var(--err)}

.rv-filter-hint{font-size:.74rem;color:var(--ink-4);margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem}
.rv-filter-hint i{font-size:.62rem}

/* ── Cards list ── */
.rv-skeleton-wrap{display:grid;gap:.85rem}
.rv-cards-list{display:grid;gap:.85rem}

/* ── Individual card ── */
.rv-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;border-left-width:3.5px;border-left-style:solid;border-left-color:var(--warn-border);transition:border-color .2s,box-shadow .2s}
.rv-card:hover{box-shadow:var(--shadow-md)}
.rv-card.expanded{box-shadow:0 4px 20px rgba(0,0,0,.09)}
.rv-card.rv-card-submitted{border-left-color:var(--ok-border)}
.rv-card.rv-card-declined{border-left-color:var(--err-border)}
.rv-card.rv-card-submitted.expanded{box-shadow:0 4px 20px rgba(26,92,56,.1)}
.rv-card.rv-card-pending.expanded{box-shadow:0 4px 20px rgba(122,74,0,.1)}

/* ── Card header ── */
.rv-card-head{display:flex;align-items:center;gap:.75rem;padding:1.05rem 1.25rem;cursor:pointer;transition:background .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.rv-card-head:hover{background:rgba(0,0,0,.015)}
.rv-card.rv-card-pending .rv-card-head:hover{background:var(--warn-bg)}
.rv-card.rv-card-submitted .rv-card-head:hover{background:var(--ok-bg)}
.rv-card.rv-card-declined .rv-card-head:hover{background:var(--err-bg)}
.rv-chevron{font-size:.7rem;color:var(--ink-5);transition:transform .25s var(--ease),color .2s;flex-shrink:0}
.rv-card.expanded .rv-chevron{transform:rotate(90deg);color:var(--red)}

/* Card info block */
.rv-card-info{flex:1;min-width:0}
.rv-card-title{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.rv-card-meta{display:flex;flex-wrap:wrap;gap:.4rem .65rem;align-items:center}
.rv-meta-tag{display:inline-flex;align-items:center;gap:.22rem;font-size:.71rem;color:var(--ink-4)}
.rv-meta-tag i{font-size:.58rem;flex-shrink:0}
.rv-meta-comp{color:var(--red);font-weight:600}
.rv-meta-type{color:var(--ink-3);font-weight:600}
.rv-meta-date{color:var(--ink-5);font-style:italic}

/* Card aside: ring + badge */
.rv-card-aside{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

/* SVG score ring (card header — submitted) */
.rv-ring-wrap{position:relative;width:46px;height:46px;flex-shrink:0}
.rv-ring-svg{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.rv-ring-fill{transition:stroke-dasharray .5s var(--ease)}
.rv-ring-ok{stroke:var(--ok)}
.rv-ring-gold{stroke:var(--gold)}
.rv-ring-err{stroke:var(--err)}
.rv-ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;line-height:1}
.rv-ring-val-ok{color:var(--ok)}
.rv-ring-val-gold{color:var(--gold)}
.rv-ring-val-err{color:var(--err)}

/* Pending dashed ring — two variants: awaiting invite (envelope) vs in-review (pen) */
.rv-pending-ring{width:38px;height:38px;border-radius:50%;border:2.5px dashed var(--warn-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--warn-bg)}
.rv-pending-ring i{font-size:.72rem;color:var(--warn)}
/* Invite-waiting variant: accent/info colour so it reads differently from the in-review pen */
.rv-pending-ring-invite{border-color:var(--info-border,var(--border-2));background:var(--info-bg,var(--bg))}
.rv-pending-ring-invite i{color:var(--info,var(--ink-4))}

/* Status badge */
.rv-status-badge{display:inline-flex;align-items:center;gap:.28rem;font-size:.67rem;font-weight:700;padding:.22rem .65rem;border-radius:var(--r-pill);white-space:nowrap;border-width:1px;border-style:solid}
.rv-status-badge i{font-size:.56rem}
.rv-status-pending{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-border)}
.rv-status-submitted{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-border)}
.rv-status-declined{color:var(--err);background:var(--err-bg);border-color:var(--err-border)}

/* ── Card expanded body ── */
.rv-card-body{border-top:1px solid var(--border);background:var(--surface)}

/* ── Tab bar ── */
.rv-tabs{display:flex;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--white)}
.rv-tabs::-webkit-scrollbar{display:none}
.rv-tab{display:inline-flex;align-items:center;gap:.38rem;padding:.58rem 1.1rem;font-size:.77rem;font-weight:700;border:none;background:none;cursor:pointer;white-space:nowrap;color:var(--ink-4);border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:var(--font-body);-webkit-tap-highlight-color:transparent}
.rv-tab i{font-size:.65rem;opacity:.55;transition:opacity .15s}
.rv-tab:hover{color:var(--ink-2)}
.rv-tab.active{color:var(--red);border-bottom-color:var(--red)}
.rv-tab.active i{opacity:1}

/* ── Tab content ── */
.rv-tab-content{padding:1.2rem 1.25rem;display:grid;gap:1rem}

/* ── Score tab ── */
.rv-score-tab{gap:1.1rem}

/* Live score banner */
.rv-live-banner{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);transition:background .3s,border-color .3s}
.rv-live-banner.has-score{background:linear-gradient(135deg,rgba(21,147,121,.04),rgba(35,56,116,.06));border-color:var(--red-border)}
.rv-live-ring-wrap{position:relative;width:54px;height:54px;flex-shrink:0}
.rv-live-ring-svg{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)}
.rv-live-ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.78rem;font-weight:800;color:var(--ink-3)}
.rv-live-banner.has-score .rv-live-ring-val{color:var(--red)}
.rv-live-info{flex:1;min-width:0}
.rv-live-label{font-size:.62rem;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem}
.rv-live-score{line-height:1}
.rv-live-num{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--red)}
.rv-live-max{font-size:.78rem;color:var(--ink-4);font-weight:600}
.rv-live-empty{font-size:.82rem;color:var(--ink-4);font-style:italic}
.rv-live-progress-wrap{display:flex;align-items:center;gap:.55rem;flex:1;min-width:80px}
.rv-live-progress{flex:1;height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.rv-live-fill{height:100%;border-radius:99px;transition:width .4s var(--ease),background .3s}
.rv-fill-high{background:var(--ok)}
.rv-fill-medium{background:var(--gold)}
.rv-fill-low{background:var(--err)}
.rv-live-pct{font-size:.68rem;font-weight:800;color:var(--ink-3);min-width:2.5ch;text-align:right}

/* ── Rubric grid ── */
.rubric-grid{display:grid;gap:.65rem}
.rubric-category{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.rubric-category:hover{border-color:var(--border-2);box-shadow:var(--shadow-xs)}
.rubric-category-head{display:flex;justify-content:space-between;align-items:center;gap:.85rem;padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}
.rubric-category-name{font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.3;display:flex;align-items:center;gap:.4rem}
.rubric-category-name::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--red);flex-shrink:0}
.rubric-category-max{font-size:.68rem;font-weight:800;color:var(--ink-3);white-space:nowrap;padding:.2rem .55rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-pill)}
.rubric-subcriteria{display:flex;flex-direction:column;gap:0;padding:.35rem .85rem .5rem}
.rubric-subcriterion{display:flex;align-items:center;gap:.75rem;padding:.4rem 0;border-bottom:1px solid rgba(0,0,0,.04)}
.rubric-subcriterion:last-child{border-bottom:none}
.rubric-sub-label{flex:1;font-size:.78rem;color:var(--ink-2);line-height:1.4}
.rubric-score-input{width:66px;text-align:center;padding:.42rem .3rem;border:1.5px solid var(--border);border-radius:var(--r-xs);font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--ink);transition:border-color .18s,box-shadow .18s,background .18s;outline:none;background:var(--white);-moz-appearance:textfield;appearance:textfield}
.rubric-score-input::-webkit-outer-spin-button,.rubric-score-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.rubric-score-input:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.1)}
.rubric-score-input.over-max{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.rubric-score-max{font-size:.67rem;color:var(--ink-5);white-space:nowrap;font-weight:600;min-width:2.5ch;text-align:right}

/* ── Total bar ── */
.eval-total-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,rgba(21,147,121,.05),rgba(35,56,116,.07));border:1.5px solid var(--red-border);border-radius:var(--r-sm);padding:.9rem 1.1rem;margin-top:.25rem}
.eval-total-label{font-family:var(--font-display);font-weight:700;font-size:.84rem;color:var(--ink);margin-bottom:.45rem}
.eval-progress-bar{height:7px;background:rgba(0,0,0,.06);border-radius:99px;overflow:hidden;width:min(200px,100%)}
.eval-progress-fill{height:100%;border-radius:99px;transition:width .45s var(--ease),background .3s;background:var(--red)}
.eval-progress-fill.high{background:linear-gradient(90deg,var(--ok),#22c55e)}
.eval-progress-fill.medium{background:linear-gradient(90deg,var(--gold),#d4a017)}
.eval-progress-fill.low{background:linear-gradient(90deg,var(--err),#ef4444)}
.eval-total-score{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--red);display:flex;align-items:baseline;gap:.2rem;flex-shrink:0}
.eval-total-score .of-max{font-size:.8rem;color:var(--ink-4);font-weight:600}

/* ── Submission card (decision + comment + consent + actions) ── */
.rv-submission-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-xs)}
.rv-sub-section{padding:.9rem 1.05rem;border-bottom:1px solid var(--border)}
.rv-sub-section:last-child{border-bottom:none}
.rv-sub-label{font-size:.63rem;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;display:flex;align-items:center;gap:.35rem}
.rv-sub-label i{font-size:.58rem}

/* Decision buttons */
.rv-decision-btns{display:flex;gap:.65rem;flex-wrap:wrap}
.rv-decision-btn{display:flex;align-items:center;justify-content:center;gap:.45rem;flex:1;min-width:130px;padding:.65rem 1.1rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-family:var(--font-body);font-size:.82rem;font-weight:700;color:var(--ink-3);transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.rv-decision-btn:hover{box-shadow:var(--shadow-sm)}
.rv-decision-approve{border-color:var(--ok-border);color:var(--ok)}
.rv-decision-approve:hover{background:rgba(26,92,56,.04)}
.rv-decision-approve.sel{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 3px 12px rgba(22,116,74,.22)}
.rv-decision-reject{border-color:var(--err-border);color:var(--err)}
.rv-decision-reject:hover{background:rgba(139,21,21,.04)}
.rv-decision-reject.sel{background:var(--err);border-color:var(--err);color:#fff;box-shadow:0 3px 12px rgba(153,27,27,.22)}

/* Comment textarea */
.rv-comment-area{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.65rem .9rem;font-family:var(--font-body);font-size:.84rem;color:var(--ink);resize:vertical;min-height:110px;outline:none;transition:border-color .2s,box-shadow .2s;background:var(--white);line-height:1.55}
.rv-comment-area:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.09)}
.rv-comment-area::placeholder{color:var(--ink-5)}
.rv-comment-footer{display:flex;justify-content:flex-end;margin-top:.3rem}
.rv-char-count{font-size:.67rem;color:var(--ink-5);font-weight:600}
.rv-char-count.warn{color:var(--err)}

/* Consent + actions footer */
.rv-sub-footer{padding:.85rem 1.05rem;background:var(--surface);display:grid;gap:.75rem}
.rv-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.78rem;cursor:pointer;color:var(--ink-3);line-height:1.4}
.rv-consent-check{width:15px;height:15px;flex-shrink:0;accent-color:var(--red);margin-top:.1rem;cursor:pointer}
.rv-consent-text{flex:1}
.rv-action-row{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}

/* Decline inline */
.rv-decline-inline{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;flex:1;justify-content:flex-end}
.rv-decline-input{font-size:.8rem;padding:.42rem .65rem;border:1.5px solid var(--err-border);border-radius:var(--r-xs);background:var(--err-bg);color:var(--ink);outline:none;min-width:160px;flex:1;font-family:var(--font-body)}
.rv-decline-input:focus{border-color:var(--err);box-shadow:0 0 0 2px rgba(139,21,21,.12)}
.rv-decline-confirm{background:var(--err)!important;color:#fff!important;border-color:var(--err)!important}
.rv-decline-btn{color:var(--err)!important;border-color:var(--err-border)!important}
.rv-submit-btn{min-width:160px;justify-content:center}

/* ── Submitted banner ── */
.rv-submitted-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;background:var(--surface);border:1.5px solid var(--ok-border);border-radius:var(--r-sm)}
.rv-submitted-gold{border-color:var(--warn-border);background:rgba(35,56,116,.04)}
.rv-submitted-err{border-color:var(--err-border);background:var(--err-bg)}
.rv-sub-ring-wrap{position:relative;width:54px;height:54px;flex-shrink:0}
.rv-sub-ring-svg{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)}
.rv-sub-score-info{flex:1;min-width:0}
.rv-sub-score-label{font-size:.62rem;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem}
.rv-sub-score-val{font-family:var(--font-display);font-size:1.3rem;font-weight:800;line-height:1.1;display:flex;align-items:baseline;gap:.2rem}
.rv-sub-score-max{font-size:.75rem;font-weight:600;color:var(--ink-4)}

/* ── Reviewer: local draft saved indicator (flashes briefly after autosave) ── */
.rv-comment-footer{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.3rem;flex-wrap:wrap}
.rv-draft-saved{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:700;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--r-pill);padding:.18rem .55rem;letter-spacing:.02em;animation:rvDraftSavedFlash .35s var(--ease) both}
.rv-draft-saved i{font-size:.62rem}
@keyframes rvDraftSavedFlash{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════════════════
 *  REVIEWERS — RESPONSIVE OVERRIDES (≤640px phones, ≤480px small phones)
 *  Goal: card head, action row, decision buttons and live banner reflow
 *  cleanly without horizontal scroll or cramped tap targets.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .rv-page-header{margin-bottom:1rem;gap:.6rem}
  .rv-header-icon{width:36px;height:36px;border-radius:10px}
  .rv-header-sub{font-size:.74rem}
  .rv-stat-card{padding:.65rem .5rem}
  .rv-stat-num{font-size:1.3rem}
  .rv-stat-lbl{font-size:.62rem}

  /* card head: stack the right-cluster (ring + status pill) under the title
     on phones so long project titles don't get truncated to a few chars. */
  .rv-card-head{padding:.85rem .9rem;gap:.55rem;flex-wrap:wrap;align-items:flex-start}
  .rv-card-info{flex:1 1 calc(100% - 30px);min-width:0;order:1}
  .rv-chevron{order:0;margin-top:.25rem}
  .rv-card-aside{order:2;flex:1 1 100%;justify-content:flex-end;padding-left:1.6rem;gap:.5rem}
  .rv-card-title{white-space:normal;line-height:1.32;font-size:.88rem}
  .rv-ring-wrap,.rv-ring-svg{width:38px;height:38px}
  .rv-ring-val{font-size:.55rem}
  .rv-pending-ring{width:32px;height:32px}
  .rv-pending-ring i{font-size:.62rem}
  .rv-status-badge{font-size:.62rem;padding:.18rem .5rem}

  /* tabs + body: tighter, full-bleed inside the surface card */
  .rv-tab{padding:.5rem .8rem;font-size:.72rem}
  .rv-tab-content{padding:.85rem .85rem;gap:.85rem}

  /* live score banner: stack ring+info on first row, progress bar full width below */
  .rv-live-banner{flex-wrap:wrap;gap:.6rem .8rem;padding:.7rem .85rem}
  .rv-live-progress-wrap{flex:1 1 100%;min-width:0}

  /* decision buttons full-width-ish, comment area more breathable */
  .rv-decision-btn{flex:1 1 100%;min-width:0;padding:.6rem .9rem;font-size:.78rem}
  .rv-comment-area{font-size:.85rem;min-height:120px;padding:.6rem .75rem}

  /* action row: stack so the primary submit button gets full width */
  .rv-sub-footer{padding:.75rem .85rem}
  .rv-action-row{flex-direction:column;align-items:stretch;gap:.5rem}
  .rv-action-row > *{width:100%}
  .rv-decline-btn,.rv-submit-btn{width:100%;justify-content:center}
  .rv-decline-inline{width:100%;flex-direction:column;align-items:stretch}
  .rv-decline-inline > *{width:100%}

  /* submitted view: mirror the live-banner reflow */
  .rv-submitted-banner{flex-wrap:wrap;gap:.6rem .8rem;padding:.85rem}
  .rv-sub-rec{flex:1 1 100%;justify-content:center}
}
@media (max-width:480px){
  .rv-stats-row{gap:.4rem}
  .rv-stat-card{padding:.55rem .35rem}
  .rv-stat-num{font-size:1.15rem}
  .rv-filter-pill{padding:.34rem .7rem;font-size:.7rem}
  .rv-card-head{padding:.75rem .75rem}
  .rv-tab-content{padding:.7rem .7rem}
}

/* ════════════════════════════════════════════════════════════════════════════
 *  SMOOTH ANIMATION SYSTEM v3  ·  micro-interactions, choreography & polish
 *  Rules:
 *    • Composite-only properties (transform, opacity, filter) → no layout/paint
 *    • max durations: hover .22s, enter .32s, emphasis .45s
 *    • NO contain:layout/paint on anything that can hold position:fixed children
 *    • Full prefers-reduced-motion block at the end
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. CARD HOVER MICRO-LIFT ───────────────────────────────────────────── */
/* All interactive card surfaces rise 2-3 px on hover — uses transform so no
   layout thrash. Touch devices disable via pointer:coarse already set above. */
.stat-btn[data-clickable]:hover,
.wf-kpi-card--link:hover,
.rv-stat-card:hover,
.eval-project-card:hover,
.comp-summary-stat:hover,
.doc-picker-item:hover,
.reviewer-pool-item:hover,
.sig-method-card:hover,
.bpmn-phase-row:hover,
.wf-pipe-step:hover,
.rv-card:hover{
  transform:translateY(-2px);
  transition:transform .18s var(--ease-spring),box-shadow .18s var(--ease-out),border-color .18s var(--ease-out);
}
/* Press-down rebound */
.stat-btn[data-clickable]:active,
.wf-kpi-card--link:active,
.sig-method-card:active,
.doc-picker-item:active,
.reviewer-pool-item:active{
  transform:translateY(0) scale(.98);
  transition-duration:.07s;
}

/* ── 2. CLOSE-BUTTON HOVER SPIN ─────────────────────────────────────────── */
.close-btn:hover i{
  transform:rotate(90deg);
  transition:transform .22s var(--ease-spring);
  display:inline-block;
}
.close-btn i{
  display:inline-block;
  transition:transform .18s var(--ease-out);
}

/* ── 3. NAV TAB ICON BOUNCE WHEN ACTIVE ────────────────────────────────── */
.nav-tab.active i{
  animation:tabIconBounce .35s var(--ease-spring) both;
}
@keyframes tabIconBounce{
  0%  {transform:scale(1)}
  40% {transform:scale(1.25) translateY(-2px)}
  70% {transform:scale(.95) translateY(1px)}
  100%{transform:scale(1) translateY(0)}
}
/* Suppress re-run when already settled — only fires once per activation */
.nav-tab:not(.active) i{animation:none}

/* ── 4. LOGO / AVATAR HOVER SCALE ──────────────────────────────────────── */
.logo-img{transition:transform .25s var(--ease-spring),box-shadow .2s var(--ease-out)}
.science-logo-img{transition:transform .25s var(--ease-spring),box-shadow .2s var(--ease-out)}
.logo-wrap:hover .logo-img,
.logo-wrap:hover .science-logo-img{transform:scale(1.06)}
.user-avatar{transition:transform .2s var(--ease-spring),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)}
.user-avatar:hover{transform:scale(1.05);box-shadow:0 0 0 4px var(--red-dim)}

/* ── 5. CHIP ACTIVE SELECT POP ─────────────────────────────────────────── */
.chip.active{animation:chipSelectPop .28s var(--ease-spring) both}
@keyframes chipSelectPop{
  0%  {transform:scale(1)}
  45% {transform:scale(1.09)}
  80% {transform:scale(.97)}
  100%{transform:scale(1)}
}
.rv-filter-pill.active{animation:chipSelectPop .28s var(--ease-spring) both}
.doc-cat-tab.active{animation:chipSelectPop .22s var(--ease-spring) both}

/* ── 6. HISTORY / TIMELINE ENTRY HOVER LEFT-BORDER SLIDE ───────────────── */
.history-entry{
  border-left:3px solid var(--border);
  transition:border-left-color .2s var(--ease-out),
             background .18s var(--ease-out),
             box-shadow .18s var(--ease-out),
             transform .16s var(--ease-out);
}
.history-entry:hover{
  border-left-color:var(--gold);
  transform:translateX(3px);
}
.comp-tl-step{transition:opacity .2s}
.comp-tl-step:hover .comp-tl-dot{transform:scale(1.12);transition:transform .22s var(--ease-spring)}
.comp-tl-dot{transition:transform .18s var(--ease-out),box-shadow .2s}

/* ── 7. BADGE STAGGER ENTRANCE IN LISTS ────────────────────────────────── */
/* Already have badgeSlideIn — add a subtle pop for semantic badges inside
   animated containers */
.view-enter .badge{
  animation:badgeSlideIn .28s var(--ease-spring) both;
}
.view-enter .badge:nth-child(1){animation-delay:.05s}
.view-enter .badge:nth-child(2){animation-delay:.09s}
.view-enter .badge:nth-child(n+3){animation-delay:.12s}

/* ── 8. PROGRESS / FILL BAR ENTRANCE ANIMATION ──────────────────────────── */
/* Bars animate width from 0 when their parent enters the viewport/view.
   Achieves "count up" effect without JS — CSS @starting-style not yet widely
   supported, so we use .view-enter combined with the existing transition. */
.view-enter .fin-bar-fill,
.view-enter .wf-pipe-bar-fill,
.view-enter .eval-progress-fill,
.view-enter .rv-live-fill,
.view-enter .bpmn-phase-bar-fill{
  animation:barReveal .6s var(--ease-out) both;
}
@keyframes barReveal{from{width:0!important;opacity:.6}to{opacity:1}}

/* ── 9. PAGE TITLE & HERO ENTRANCE ─────────────────────────────────────── */
.view-enter .page-top-left h2{
  animation:heroIn .32s var(--ease-out) both;
}
.view-enter .page-top-left p{
  animation:heroIn .32s .07s var(--ease-out) both;
}
.view-enter .rv-header-title{
  animation:heroIn .3s var(--ease-out) both;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}

/* ── 10. ACTION MENU SLIDE-DOWN ─────────────────────────────────────────── */
.action-menu{
  transform-origin:top right;
  animation:actionMenuIn .18s var(--ease-spring) both;
}
@keyframes actionMenuIn{
  from{opacity:0;transform:scale(.93) translateY(-6px)}
  to  {opacity:1;transform:none}
}
.action-item{
  transition:background .12s var(--ease-out),color .12s var(--ease-out),
             transform .1s var(--ease-out);
}
.action-item:hover{transform:translateX(2px)}
.action-item:active{transform:translateX(0) scale(.97);transition-duration:.05s}

/* ── 11. KPI / WF NUMBERS ENTRANCE STAGGER ─────────────────────────────── */
.view-enter .wf-kpi-value,
.view-enter .wf-pipe-count,
.view-enter .rv-stat-num,
.view-enter .rv-live-num,
.view-enter .eval-total-score{
  animation:numReveal .4s var(--ease-spring) both;
}
@keyframes numReveal{
  from{opacity:0;transform:scale(.7) translateY(4px)}
  to  {opacity:1;transform:none}
}
.view-enter .wf-kpi-card:nth-child(1) .wf-kpi-value{animation-delay:.08s}
.view-enter .wf-kpi-card:nth-child(2) .wf-kpi-value{animation-delay:.13s}
.view-enter .wf-kpi-card:nth-child(3) .wf-kpi-value{animation-delay:.18s}
.view-enter .wf-kpi-card:nth-child(4) .wf-kpi-value{animation-delay:.22s}

/* ── 12. MOBILE NAV ITEM SPRING ON TAP ──────────────────────────────────── */
.mob-top-item{
  transition:color .2s var(--ease-out),background .2s var(--ease-out),
             transform .15s var(--ease-out);
}
.mob-top-item.active i{animation:tabIconBounce .35s var(--ease-spring) both}

/* ── 13. REVIEW CARD EXPAND BODY SLIDE-IN ───────────────────────────────── */
.rv-card.expanded .rv-card-body{animation:expandSlideIn .22s var(--ease-out) both}
@keyframes expandSlideIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:none}
}
/* Chevron already rotates; add a colour flash when card expands */
.rv-card.expanded{
  transition:box-shadow .22s var(--ease-out),border-color .22s var(--ease-out);
}

/* ── 14. DECISION BUTTON SELECTED PULSE ─────────────────────────────────── */
.rv-decision-approve.sel,
.eval-decision-btn.approve.selected{
  animation:decisionPop .32s var(--ease-spring) both;
}
.rv-decision-reject.sel,
.eval-decision-btn.reject.selected{
  animation:decisionPop .32s var(--ease-spring) both;
}
@keyframes decisionPop{
  0%  {transform:scale(1)}
  40% {transform:scale(1.06)}
  80% {transform:scale(.97)}
  100%{transform:scale(1)}
}

/* ── 15. SIGNATURE METHOD CARD HOVER ICON RISE ──────────────────────────── */
.sig-method-card:hover .sig-method-icon-wrap{
  transform:translateY(-4px) scale(1.08);
  transition:transform .22s var(--ease-spring);
}
.sig-method-icon-wrap{transition:transform .18s var(--ease-out),box-shadow .22s}

/* ── 16. FORM FIELD LABEL COLOUR TRANSITION (already partial, strengthen) ── */
.form-field label{
  transition:color .2s var(--ease-out),letter-spacing .2s var(--ease-out);
}
.form-field:focus-within label{
  color:var(--red-2);letter-spacing:.06em;
}

/* ── 17. SEARCH INPUT ICON SMOOTH COLOUR ────────────────────────────────── */
.search-wrap i{transition:color .2s var(--ease-out),transform .2s var(--ease-spring)}
.search-wrap:focus-within i{color:var(--red);transform:scale(1.12)}

/* ── 18. STAT BTN ACTIVE BORDER SLIDE-IN ────────────────────────────────── */
.stat-btn::before{transition:background .25s var(--ease-out),height .15s var(--ease-out)}
.stat-btn[data-clickable]:hover::before{height:4px}
.stat-btn.active::before{height:4px}

/* ── 19. DETAIL SHEET TITLE ENTRANCE ────────────────────────────────────── */
.detail-sheet-title h3{animation:heroIn .28s var(--ease-out) both}
.detail-sheet-id{animation:heroIn .28s .06s var(--ease-out) both}

/* ── 20. FOOTER LINK UNDERLINE SWEEP ────────────────────────────────────── */
.footer-links a,.footer-links button{
  position:relative;text-decoration:none;
}
.footer-links a::after,.footer-links button::after{
  content:'';position:absolute;left:0;right:100%;bottom:-1px;height:1.5px;
  background:var(--red-3);transition:right .22s var(--ease-out);
}
.footer-links a:hover::after,.footer-links button:hover::after{right:0}

/* ── 21. TABLE ROW CLICK RIPPLE HIGHLIGHT ───────────────────────────────── */
/* row-highlight class is already defined (.row-highlight highlightFlash 1.5s).
   Strengthen: also scale the row for a tactile feel */
.table-wrap tbody tr.row-highlight{
  animation:rowClickFeedback .6s var(--ease-out) forwards;
}
@keyframes rowClickFeedback{
  0%  {background:rgba(35,56,116,.18);transform:scaleX(1)}
  30% {background:rgba(35,56,116,.10)}
  100%{background:transparent}
}

/* ── 22. TOAST STAGGER WHEN MULTIPLE ────────────────────────────────────── */
#toast-container .toast:nth-child(2){animation-delay:.05s}
#toast-container .toast:nth-child(3){animation-delay:.09s}
#toast-container .toast:nth-child(n+4){animation-delay:.12s}

/* ── 23. SKELETON → CONTENT CROSS-FADE ──────────────────────────────────── */
/* Add .content-revealed on the replacing element for a smooth swap */
.content-revealed{animation:contentFadeIn .3s var(--ease-out) both}

/* ── 24. BREADCRUMB SEGMENT HOVER LIFT ──────────────────────────────────── */
.breadcrumb-inner a,.breadcrumb-inner button{
  transition:color .18s var(--ease-out),transform .15s var(--ease-out);
  display:inline-block;
}
.breadcrumb-inner a:hover,.breadcrumb-inner button:hover{transform:translateY(-1px)}
.breadcrumb-inner a:active,.breadcrumb-inner button:active{transform:translateY(0);transition-duration:.05s}

/* ── 25. FILTER PILL ENTRANCE STAGGER (when filter bar re-renders) ──────── */
.view-enter .chip,.view-enter .rv-filter-pill{
  animation:staggerIn .2s var(--ease) both;
}
.view-enter .chip:nth-child(1),.view-enter .rv-filter-pill:nth-child(1){animation-delay:.03s}
.view-enter .chip:nth-child(2),.view-enter .rv-filter-pill:nth-child(2){animation-delay:.07s}
.view-enter .chip:nth-child(3),.view-enter .rv-filter-pill:nth-child(3){animation-delay:.10s}
.view-enter .chip:nth-child(n+4),.view-enter .rv-filter-pill:nth-child(n+4){animation-delay:.13s}

/* ─── prefers-reduced-motion: silence ALL new animations ───────────────── */
@media(prefers-reduced-motion:reduce){
  /* Hover lifts */
  .stat-btn[data-clickable]:hover,.wf-kpi-card--link:hover,
  .rv-stat-card:hover,.comp-summary-stat:hover,
  .doc-picker-item:hover,.reviewer-pool-item:hover,.sig-method-card:hover,
  .bpmn-phase-row:hover,.wf-pipe-step:hover,
  .history-entry:hover,.logo-wrap:hover .logo-img,
  .logo-wrap:hover .science-logo-img,.user-avatar:hover,
  .action-item:hover,.breadcrumb-inner a:hover,.breadcrumb-inner button:hover,
  .search-wrap:focus-within i{transform:none!important}
  /* Icon animations */
  .close-btn:hover i,.close-btn i{transform:none!important}
  .nav-tab.active i,.mob-top-item.active i{animation:none!important}
  .sig-method-card:hover .sig-method-icon-wrap{transform:none!important}
  /* Pop/spring animations */
  .chip.active,.rv-filter-pill.active,.doc-cat-tab.active{animation:none!important}
  .rv-decision-approve.sel,.eval-decision-btn.approve.selected,
  .rv-decision-reject.sel,.eval-decision-btn.reject.selected{animation:none!important}
  /* Entrance animations */
  .view-enter .fin-bar-fill,.view-enter .wf-pipe-bar-fill,
  .view-enter .eval-progress-fill,.view-enter .rv-live-fill,
  .view-enter .bpmn-phase-bar-fill{animation:none!important}
  .view-enter .wf-kpi-value,.view-enter .wf-pipe-count,
  .view-enter .rv-stat-num,.view-enter .rv-live-num,
  .view-enter .eval-total-score{animation:none!important}
  .view-enter .page-top-left h2,.view-enter .page-top-left p,
  .view-enter .rv-header-title{animation:none!important}
}

/* ─── UPLOAD DROP ZONE ─── */
.upload-dropzone{border:2px dashed var(--border-2);border-radius:var(--r);padding:1.2rem 1rem;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--ink-3);font-size:.82rem;user-select:none}
.upload-dropzone:hover{border-color:var(--primary);background:var(--info-bg);color:var(--ink-2)}
.upload-dropzone.dragover{border-color:var(--ok);background:var(--ok-bg);color:var(--ink-2)}
.upload-dropzone-icon{font-size:1.6rem;color:var(--ink-4);display:block;margin-bottom:.25rem;pointer-events:none;transition:color .18s}
.upload-dropzone.dragover .upload-dropzone-icon{color:var(--ok)}
.upload-dropzone-hint{font-size:.68rem;color:var(--ink-5)}
@media(max-width:580px){
  .upload-dropzone{padding:.9rem .75rem}
  .action-menu{animation:none!important}
  .rv-card.expanded .rv-card-body{animation:none!important}
  .detail-sheet-title h3,.detail-sheet-id{animation:none!important}
  .footer-links a::after,.footer-links button::after{transition:none!important}
  .table-wrap tbody tr.row-highlight{animation:none!important}
  @keyframes tabIconBounce{from,to{transform:none}}
  @keyframes chipSelectPop{from,to{transform:none}}
  @keyframes barReveal{from,to{opacity:1}}
  @keyframes heroIn{from,to{opacity:1;transform:none}}
  @keyframes actionMenuIn{from,to{opacity:1;transform:none}}
  @keyframes numReveal{from,to{opacity:1;transform:none}}
  @keyframes expandSlideIn{from,to{opacity:1;transform:none}}
  @keyframes decisionPop{from,to{transform:none}}
  @keyframes rowClickFeedback{from,to{background:transparent}}
}

/* ── Touch device: disable transform lifts (prevent sticky :hover) ──────── */
@media(pointer:coarse){
  .stat-btn[data-clickable]:hover,.wf-kpi-card--link:hover,
  .rv-stat-card:hover,
  .doc-picker-item:hover,.reviewer-pool-item:hover,
  .sig-method-card:hover,.bpmn-phase-row:hover,
  .wf-pipe-step:hover,
  .history-entry:hover,.action-item:hover,
  .breadcrumb-inner a:hover,.breadcrumb-inner button:hover,
  .logo-wrap:hover .logo-img,.logo-wrap:hover .science-logo-img,
  .user-avatar:hover{transform:none!important}
}
.rv-sub-date{font-size:.7rem;color:var(--ink-4);margin-top:.35rem;display:flex;align-items:center;gap:.3rem}
.rv-sub-date i{font-size:.6rem}
.rv-sub-rec{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;flex-shrink:0;margin-left:auto}
.rv-rec-ok{background:var(--ok);color:#fff}
.rv-rec-err{background:var(--err);color:#fff}

/* ── Comment card (submitted read-only) ── */
.rv-comment-card{background:var(--white);border:1.5px solid var(--ok-border);border-radius:var(--r-sm);overflow:hidden}
.rv-comment-card-head{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;background:var(--ok-bg);border-bottom:1px solid var(--ok-border);font-size:.67rem;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.07em}
.rv-comment-body{padding:.8rem 1rem;font-size:.84rem;color:var(--ink-2);line-height:1.65;white-space:pre-wrap;word-break:break-word}

/* ── Decline full view ── */
.rv-decline-full{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;background:var(--err-bg);border:1.5px solid var(--err-border);border-radius:var(--r-sm)}
.rv-decline-full-icon{width:40px;height:40px;border-radius:50%;background:var(--err);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(139,21,21,.22)}
.rv-decline-full-icon i{color:#fff;font-size:.92rem}
.rv-decline-full-body{flex:1;min-width:0}
.rv-decline-title{font-size:.86rem;font-weight:700;color:var(--err);margin-bottom:.3rem}
.rv-decline-reason{font-size:.8rem;color:var(--ink-2);line-height:1.5}
.rv-decline-noreason{font-size:.78rem;color:var(--ink-4);font-style:italic}

/* ── Decline notice (in info tab) ── */
.rv-decline-notice{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;background:var(--err-bg);border:1px solid var(--err-border);border-radius:var(--r-sm);font-size:.82rem;color:var(--err)}
.rv-decline-notice .rv-decline-icon{width:32px;height:32px;border-radius:50%;background:var(--err);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-decline-notice .rv-decline-icon i{color:#fff;font-size:.8rem}

/* ── Evaluation decision row (legacy + admin views) ── */
.eval-decision-row{display:flex;align-items:center;gap:.75rem;margin-top:.85rem;flex-wrap:wrap}
.eval-decision-btn{display:flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-family:var(--font-body);font-size:.82rem;font-weight:700;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);color:var(--ink-3)}
.eval-decision-btn:hover{box-shadow:var(--shadow-sm)}
.eval-decision-btn.approve{border-color:var(--ok-border);color:var(--ok)}
.eval-decision-btn.approve:hover,.eval-decision-btn.approve.selected{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 4px 12px rgba(22,116,74,.2)}
.eval-decision-btn.reject{border-color:var(--err-border);color:var(--err)}
.eval-decision-btn.reject:hover,.eval-decision-btn.reject.selected{background:var(--err);border-color:var(--err);color:#fff;box-shadow:0 4px 12px rgba(153,27,27,.2)}

.eval-comment-box{margin-top:.75rem}
.eval-comment-box textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.65rem .95rem;font-family:var(--font-body);font-size:.84rem;outline:none;resize:vertical;min-height:80px;color:var(--ink);transition:border-color .2s,box-shadow .2s;background:var(--white)}
.eval-comment-box textarea:focus{border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.09)}
.eval-comment-box label{display:block;font-size:.65rem;font-weight:700;color:var(--ink-4);margin-bottom:.35rem;letter-spacing:.07em;text-transform:uppercase}
.eval-actions{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end}

/* ── Enhanced Reviewer Assignment ── */
.reviewer-summary-strip{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.reviewer-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;padding:.25rem .6rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--white);color:var(--ink-3);font-weight:600}
.reviewer-chip i{font-size:.6rem}
.reviewer-chip.pending{border-color:var(--info-border);background:var(--info-bg);color:var(--info)}
.reviewer-chip.consented{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn)}
.reviewer-chip.reviewed{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok)}

.reviewer-pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;max-height:40vh;overflow-y:auto;padding:.25rem 0}
.reviewer-pool-item{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);background:var(--white)}
.reviewer-pool-item:hover{border-color:var(--red-3);background:var(--red-fog);box-shadow:var(--shadow-xs)}
.reviewer-pool-item.selected{border-color:var(--red);background:var(--red-dim);box-shadow:0 0 0 2px rgba(21,147,121,.12)}
.reviewer-pool-item .rp-check{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color var(--t),background var(--t),color var(--t);font-size:.7rem;color:transparent}
.reviewer-pool-item.selected .rp-check{background:var(--red);border-color:var(--red);color:#fff}
.reviewer-pool-item .rp-info{flex:1;min-width:0}
.reviewer-pool-item .rp-name{font-size:.8rem;font-weight:600;color:var(--ink)}
.reviewer-pool-item .rp-email{font-size:.68rem;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reviewer-pool-item .rp-status{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.12rem .42rem;border-radius:3px}

.assign-section-label{font-size:.66rem;font-weight:700;color:var(--ink-4);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.assign-divider{margin:1rem 0;height:1px;background:var(--border)}

/* ── Assign Wizard (3-step: Избери проект → Избери рецензенти → Потвърди) ── */
.assign-wizard .modal-body{padding:1rem 1.25rem}
.assign-stepper{display:flex;align-items:center;gap:0;margin-bottom:1.2rem;padding:0 .25rem}
.assign-step{display:flex;align-items:center;gap:.45rem;flex:1;position:relative;padding-right:8px}
.assign-step:not(:last-child)::after{content:'';position:absolute;top:50%;left:calc(26px + .45rem);right:0;height:2px;background:var(--border);transform:translateY(-50%);transition:background .3s ease}
.assign-step.done:not(:last-child)::after{background:var(--ok)}
.assign-step.active:not(:last-child)::after{background:var(--primary)}
.assign-step-num{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--ink-4);background:var(--white);flex-shrink:0;position:relative;z-index:1;transition:border-color .2s ease,background .2s ease,color .2s ease}
.assign-step.active .assign-step-num{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(35,56,116,.1)}
.assign-step.done .assign-step-num{border-color:var(--ok);background:var(--ok);color:#fff}
.assign-step-label{font-size:.7rem;font-weight:600;color:var(--ink-4);white-space:nowrap;transition:color .2s ease}
.assign-step.active .assign-step-label{color:var(--primary)}
.assign-step.done .assign-step-label{color:var(--ok)}
@media(max-width:540px){.assign-step-label{display:none}.assign-step-num{width:22px;height:22px;font-size:.6rem}}

.assign-step-body{animation:assignStepIn .22s ease}
@keyframes assignStepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

.assign-app-list{display:flex;flex-direction:column;gap:.4rem;max-height:340px;overflow-y:auto}
.assign-app-card{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s}
.assign-app-card:hover{border-color:var(--border-2);background:var(--surface)}
.assign-app-card.selected{border-color:var(--primary);background:rgba(35,56,116,.04);box-shadow:0 0 0 3px rgba(35,56,116,.06)}
.assign-app-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.assign-app-card-left{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}
.assign-app-card-check{font-size:.95rem;flex-shrink:0}
.assign-app-card-info{flex:1;min-width:0}
.assign-app-card-title{font-weight:600;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assign-app-card-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.2rem}
.assign-app-card-meta span{display:inline-flex;align-items:center;gap:.22rem;font-size:.68rem;color:var(--ink-4)}
.assign-app-card-meta i{font-size:.6rem}
.assign-app-card-arrow{color:var(--ink-4);font-size:.7rem;flex-shrink:0;transition:transform .14s}
.assign-app-card.selected .assign-app-card-arrow{color:var(--primary);transform:translateX(2px)}

.assign-context-banner{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;background:rgba(35,56,116,.05);border:1px solid rgba(35,56,116,.12);border-radius:var(--r-sm);margin-bottom:.85rem;font-size:.78rem;color:var(--ink)}
.assign-section-header{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;color:var(--ink-4);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.45rem}
.assign-section-header i{color:var(--primary)}
.reviewer-chip.selected-chip{cursor:default!important;display:inline-flex;align-items:center;gap:.3rem}

.assign-confirm-card{border:1.5px solid var(--ok-border,#bbf7d0);border-radius:var(--r);overflow:hidden}
.assign-confirm-header{display:flex;align-items:center;gap:.55rem;padding:.85rem 1.1rem;background:var(--ok-bg,#f0fdf4);border-bottom:1px solid var(--ok-border,#bbf7d0)}
.assign-confirm-section{padding:.8rem 1.1rem;border-bottom:1px solid var(--border)}
.assign-confirm-section:last-child{border-bottom:none}
.assign-confirm-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4);display:flex;align-items:center;gap:.3rem;margin-bottom:.25rem}
.assign-confirm-value{font-weight:600;font-size:.85rem;color:var(--ink)}

/* ── Reviewer fee chip (shown in pool items) ── */
.rp-fee{font-size:.62rem;color:var(--gold);margin-top:.12rem;display:flex;align-items:center;gap:.2rem}
.rp-fee i{font-size:.55rem}

/* ══════════════════════════════════════════════════════════════════
   ALIVE SYSTEM — micro-interactions & engagement effects
   • .card-reveal        — cards slide up + fade in on mount
   • .pulse-once         — single pulse on action confirmation
   • .btn-press          — tactile button press scale effect
   • .row-highlight      — new-row green flash animation
   • .tab-ripple         — subtle tab hover ripple
   • .toast-slide        — toast slide-in from right
   • .fade-enter         — generic fade-in for UI elements
   ══════════════════════════════════════════════════════════════════ */

/* Card reveal animation — staggered entrance */
@keyframes cardReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.card-reveal{animation:cardReveal .38s var(--ease-out) both}
.card-reveal:nth-child(1){animation-delay:0s}
.card-reveal:nth-child(2){animation-delay:.06s}
.card-reveal:nth-child(3){animation-delay:.12s}
.card-reveal:nth-child(4){animation-delay:.18s}
.card-reveal:nth-child(5){animation-delay:.24s}

/* Single pulse on confirm/save */
@keyframes pulseOnce{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
.pulse-once{animation:pulseOnce .4s var(--ease-spring)}

/* Tactile button press */
.btn:active:not(:disabled){transform:scale(.96);transition:transform .08s var(--ease-in)}
.btn-primary:active:not(:disabled){transform:scale(.95)}

/* New row highlight flash */
@keyframes rowHighlight{0%{background:rgba(31,92,57,.12)}100%{background:transparent}}
.row-highlight{animation:rowHighlight 1.2s ease-out}

/* Tab hover ripple */
.nav-tab{position:relative;overflow:hidden}
.nav-tab::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(35,56,116,.06) 0%,transparent 70%);opacity:0;transition:opacity .25s ease}
.nav-tab:hover::before{opacity:1}

/* Toast entrance */
/* (legacy duplicate removed — canonical toast enter is `toastIn` defined earlier; this late override conflicted with the consolidated rules) */

/* Generic fade enter */
@keyframes fadeEnter{from{opacity:0}to{opacity:1}}
.fade-enter{animation:fadeEnter .3s ease both}

/* View transition */
@keyframes viewEnterAnim{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.view-enter{animation:viewEnterAnim .28s var(--ease-out) both}

/* Loading strip pulse */
@keyframes loadingStripPulse{0%,100%{opacity:.4}50%{opacity:1}}
.loading-strip.active{animation:loadingStripPulse 1s ease-in-out infinite}

/* Checkmark pop on completion */
@keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
.check-pop{animation:checkPop .4s var(--ease-spring) both}

/* Ripple effect on clickable cards */
.stat-btn[data-clickable],.assign-app-card,.reviewer-pool-item{position:relative;overflow:hidden}
.stat-btn[data-clickable]::after,.assign-app-card::after,.reviewer-pool-item::after{
  content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%),rgba(35,56,116,.08) 0%,transparent 70%);
  opacity:0;transition:opacity .2s ease;pointer-events:none
}
.stat-btn[data-clickable]:hover::after,.assign-app-card:hover::after,.reviewer-pool-item:hover::after{opacity:1}

/* ── Responsive ── */
@media(max-width:680px){
.rv-stats-row{grid-template-columns:repeat(2,1fr)}
.rv-decision-btns{flex-direction:column}
.rv-decision-btn{min-width:0}
.rv-action-row{flex-direction:column;align-items:stretch}
.rv-submit-btn{width:100%}
.rv-decline-inline{flex-direction:column;align-items:stretch}
.rv-decline-input{min-width:0;width:100%}
.rv-sub-rec{margin-left:0;margin-top:.5rem}
.rv-submitted-banner{flex-wrap:wrap}
.rv-live-progress-wrap{display:none}
}
@media(max-width:400px){
.rv-stats-row{grid-template-columns:repeat(4,1fr)}
.rv-stat-num{font-size:1.2rem}
.rv-stat-lbl{font-size:.58rem}
}

/* ═══ Reviewer Management UI (Phase 6 - dataset port) ════════════════════════ */
.alert-bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:1rem;border:1px solid}
.alert-bar-err{background:var(--err-bg);border-color:var(--err-border);color:var(--err)}
.alert-bar-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.alert-bar-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info)}

/* Add reviewer collapsible panel */
.rv-add-panel{padding:0;overflow:hidden;margin-bottom:1rem}
.rv-add-panel-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;user-select:none;transition:background .15s}
.rv-add-panel-head:hover{background:var(--surface)}
.rv-add-panel-title{font-weight:700;font-size:.88rem;color:var(--ink-2);display:flex;align-items:center;gap:.5rem}
.rv-add-panel-title i{color:var(--red)}
.rv-add-panel-body{padding:0 1.25rem 1.25rem;border-top:1px solid var(--border)}
.rv-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:600px){.rv-add-grid{grid-template-columns:1fr}}

/* Pool table */
.rv-pool-table-wrap{overflow-x:auto;padding:0}
.rv-pool-table-wrap table{width:100%}
.rv-meta-tag{display:inline-flex;align-items:center;gap:.28rem;padding:.18rem .55rem;border-radius:var(--r-pill);font-size:.7rem;font-weight:600}
.rv-meta-comp{background:var(--red-fog,rgba(21,147,121,.06));border:1px solid rgba(21,147,121,.15);color:var(--red)}

/* Form-item radio list */
.rv-assign-filters{display:flex;gap:.6rem;margin-bottom:.75rem;flex-wrap:wrap}
.rv-assign-filters .form-input{flex:1;min-width:140px}
.rv-form-list{display:flex;flex-direction:column;gap:.35rem;max-height:320px;overflow-y:auto;padding:.15rem 0}
.rv-form-list-empty{display:flex;align-items:center;gap:.6rem;padding:2rem;justify-content:center;color:var(--ink-4);font-size:.82rem}
.rv-form-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .14s,background .14s}
.rv-form-item:hover{border-color:var(--border-2);background:var(--surface)}
.rv-form-item.selected{border-color:var(--primary,var(--red));background:var(--primary-dim,var(--red-fog))}
.rv-form-item-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.6rem;color:transparent;transition:border-color .14s var(--ease-out),background .14s var(--ease-out),color .14s var(--ease-out)}
.rv-form-item.selected .rv-form-item-check{border-color:var(--primary,var(--red));background:var(--primary,var(--red));color:var(--white)}
.rv-form-item-info{flex:1;min-width:0}
.rv-form-item-title{font-weight:600;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-form-item-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.15rem}
.rv-form-item-meta span{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--ink-4)}
.rv-form-item-meta i{font-size:.65rem}
.rv-form-item-id{font-family:monospace;font-size:.68rem;color:var(--ink-4);background:var(--surface);padding:.06rem .35rem;border-radius:var(--r-pill)}

/* Detail-modal reviewer card */
.rv-assign-reviewer-card{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:1rem}
.rv-assign-reviewer-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--red-dim),rgba(21,147,121,.1));display:flex;align-items:center;justify-content:center;color:var(--red);font-size:1rem;flex-shrink:0}
.rv-assign-reviewer-name{font-weight:700;font-size:.9rem;color:var(--ink)}
.rv-assign-reviewer-email{font-size:.75rem;color:var(--ink-4);font-family:monospace}

/* Quick-Assign wizard */
.rv-qa-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem}
.rv-qa-steps{display:flex;align-items:center;gap:0;margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.rv-qa-step{display:flex;align-items:center;gap:.5rem;flex:1;position:relative}
.rv-qa-step:not(:last-child)::after{content:'';position:absolute;top:50%;left:calc(28px + .5rem);right:0;height:2px;background:var(--border);transform:translateY(-50%)}
.rv-qa-step.done:not(:last-child)::after{background:var(--ok)}
.rv-qa-step-num{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--ink-4);background:var(--white);flex-shrink:0;position:relative;z-index:1;transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.rv-qa-step.active .rv-qa-step-num{border-color:var(--primary,var(--red));background:var(--primary,var(--red));color:var(--white)}
.rv-qa-step.done .rv-qa-step-num{border-color:var(--ok);background:var(--ok);color:var(--white)}
.rv-qa-step-label{font-size:.75rem;font-weight:600;color:var(--ink-4);white-space:nowrap}
.rv-qa-step.active .rv-qa-step-label{color:var(--primary,var(--red))}
.rv-qa-step.done .rv-qa-step-label{color:var(--ok)}
@media(max-width:540px){.rv-qa-step-label{display:none}}

/* Selected-form banner (step 2) */
.rv-selected-form-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--primary-dim,var(--red-fog));border:1.5px solid var(--primary,var(--red));border-radius:var(--r-sm);margin-bottom:1rem}
.rv-selected-form-banner i{color:var(--primary,var(--red));font-size:1.1rem;flex-shrink:0}
.rv-sfb-title{font-weight:700;font-size:.88rem;color:var(--ink)}
.rv-sfb-meta{font-size:.74rem;color:var(--ink-4);margin-top:.1rem}

/* Reviewer checklist */
.rv-reviewer-checklist{display:flex;flex-direction:column;gap:.35rem;max-height:300px;overflow-y:auto}
.rv-reviewer-check-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:border-color .14s,background .14s}
.rv-reviewer-check-item:hover{border-color:var(--border-2)}
.rv-reviewer-check-item.selected{border-color:var(--primary,var(--red));background:var(--primary-dim,var(--red-fog))}
.rv-reviewer-check-item input[type=checkbox]{accent-color:var(--primary,var(--red));width:15px;height:15px;flex-shrink:0}
.rv-rci-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--ink-4);flex-shrink:0}
.rv-rci-info{flex:1;min-width:0}
.rv-rci-name{font-weight:600;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-rci-email{font-size:.7rem;color:var(--ink-4);font-family:monospace}
.rv-reviewer-check-item.already-assigned{opacity:.6;cursor:default;pointer-events:none}
.rv-already-tag{display:inline-block;margin-left:.4rem;padding:.06rem .32rem;background:var(--ok-bg,#f0fdf4);border:1px solid var(--ok-border,#bbf7d0);border-radius:var(--r-pill);font-size:.6rem;font-weight:700;color:var(--ok,#15803d);vertical-align:middle}

/* Confirm card (step 3) */
.rv-confirm-card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.rv-confirm-section{padding:.85rem 1.1rem;border-bottom:1px solid var(--border)}
.rv-confirm-section:last-child{border-bottom:none}
.rv-confirm-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}
.rv-confirm-value{font-weight:600;font-size:.9rem;color:var(--ink)}
.rv-confirm-reviewers{display:flex;flex-direction:column;gap:.4rem}
.rv-confirm-reviewer{display:flex;align-items:center;gap:.6rem}

/* Stat card variant */
.rv-stat-declined .rv-stat-icon{color:var(--err)}

/* Reviewer detail modal extras */
.rv-detail-stats-mini{display:flex;gap:.6rem;flex-shrink:0;align-self:flex-start}
.rv-detail-stats-mini>div{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem .6rem;background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);min-width:56px}
.rv-detail-stats-mini strong{font-size:1.05rem;font-weight:800;line-height:1}
.rv-detail-stats-mini span{font-size:.62rem;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.rv-detail-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:.5rem;display:flex;align-items:center;gap:.35rem}
.rv-detail-pool-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:.3rem}
.rv-detail-no-assignments{display:flex;align-items:center;gap:.6rem;padding:1.5rem;color:var(--ink-4);font-size:.82rem;justify-content:center;border:1px dashed var(--border);border-radius:var(--r-sm)}
.rv-detail-assignment-list{display:flex;flex-direction:column;gap:.35rem}
.rv-detail-assignment-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.rv-detail-assignment-main{flex:1;min-width:0}
.rv-detail-assignment-title{font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-detail-assignment-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rv-detail-assignment-meta span{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--ink-4)}
.rv-detail-score{display:inline-flex;align-items:center;gap:.2rem;padding:.12rem .4rem;background:var(--warn-bg,#fffbeb);border:1px solid var(--warn-border,#fde68a);border-radius:var(--r-pill);font-size:.68rem;font-weight:700;color:var(--warn,#b45309)}

/* Pool table extras */
.rv-pool-row-has-assignments{background:rgba(99,102,241,.02)}
.rv-pool-sub-row td{background:var(--surface-alt,var(--surface));font-size:.8rem;border-top:none!important}
.rv-pool-sub-row:last-child td{border-bottom:none}
.rv-expand-btn{background:none;border:none;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-4);font-size:.65rem;padding:0;transition:background .15s,color .15s}
.rv-expand-btn:hover{background:var(--border);color:var(--ink)}

/* 1-click affordance — added in port to satisfy "for in the future 1 click add" */
.rv-quick-assign-btn{display:inline-flex;align-items:center;gap:.28rem;padding:.18rem .5rem;font-size:.68rem;font-weight:700;border-radius:var(--r-pill);border:1px solid var(--ok-border,#bbf7d0);background:var(--ok-bg,#f0fdf4);color:var(--ok,#15803d);cursor:pointer;transition:filter .15s,transform .1s}
.rv-quick-assign-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.rv-quick-assign-btn:disabled{opacity:.55;cursor:default;transform:none;filter:none}

/* Tabs (reuses .rv-tabs base from rv- block) */
.rv-tab{flex:1;padding:.7rem 1rem;border:none;background:transparent;font-size:.85rem;font-weight:600;color:var(--ink-4);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .14s,border-color .14s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.rv-tab:hover{color:var(--ink-2)}
.rv-tab.active{color:var(--red);border-bottom-color:var(--red)}
.rv-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--white);border-radius:var(--r-sm) var(--r-sm) 0 0}

/* ──────────────────────────────────────────────────────────────────
   REVIEWERS — RESPONSIVE PASS (desktop intermediate widths)
   At 1100–1400px the action column wraps awkwardly because it carries
   a "Назначи" pill plus 2 icon buttons. The fix has three layers:
     1. Give the pool table a sane min-width so the wrapper's
        overflow-x:auto can take over cleanly instead of squishing
        every column.
     2. At ≤1280px, collapse the action cell into a vertical stack so
        the pill + icons no longer compete for horizontal room.
     3. At ≤1100px (still desktop), shrink reviewer/competition tag
        typography & promote the table wrapper to a horizontal-scroll
        strip with a soft right-edge fade hint.
   At ≤860px everything switches to the global stacked-card mode
   already defined in the mobile block.
   ────────────────────────────────────────────────────────────────── */
.rv-pool-table-wrap{position:relative}
.rv-pool-table-wrap table{min-width:780px}
.rv-pool-table-wrap th,.rv-pool-table-wrap td{vertical-align:middle}
/* Tighten action cell so 3 controls fit without wrap on standard desktops */
.rv-pool-table-wrap td:last-child>div{gap:.25rem!important;flex-wrap:wrap}
.rv-quick-assign-btn{white-space:nowrap}

@media(max-width:1280px){
  /* Stack action controls vertically — pill on top, icon row below. */
  .rv-pool-table-wrap td:last-child>div{flex-direction:column;align-items:stretch!important;gap:.3rem!important}
  .rv-pool-table-wrap td:last-child>div .rv-quick-assign-btn{justify-content:center;width:100%}
  .rv-pool-table-wrap td:last-child>div>.btn,
  .rv-pool-table-wrap td:last-child>div>button:not(.rv-quick-assign-btn){flex:1 1 0;min-width:36px}
  /* Two icon buttons share one row beneath the pill. */
  .rv-pool-table-wrap td:last-child>div{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(32px,auto)}
  .rv-pool-table-wrap td:last-child>div .rv-quick-assign-btn{grid-column:1/-1}
}

@media(max-width:1100px){
  /* Comp tags get noisy at this width — make them a single shrunk row. */
  .rv-pool-table-wrap .rv-meta-comp{font-size:.62rem;padding:.12rem .42rem}
  .rv-pool-table-wrap th,.rv-pool-table-wrap td{padding-left:.55rem;padding-right:.55rem}
  /* Soft fade hinting the horizontal scroll. */
  .rv-pool-table-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to left,var(--white),rgba(255,255,255,0));pointer-events:none;border-radius:0 var(--r) var(--r) 0}
}

@media(max-width:980px){
  /* Stats: 4-up gets squeezed; drop to 2-up earlier. */
  .rv-stats-row{grid-template-columns:repeat(2,1fr)}
  /* Filter strip in pool tab: select+search side-by-side with a sane wrap. */
  .rv-pool-table-wrap+*,
  .rv-pool-table-wrap{margin-left:0;margin-right:0}
}

/* Detail modal: keep its body comfortably sized on intermediate widths. */
@media(max-width:780px){
  .rv-assign-reviewer-card{flex-wrap:wrap}
  .rv-detail-stats-mini{align-self:stretch;justify-content:space-between;width:100%}
  .rv-detail-stats-mini>div{flex:1}
  .rv-detail-assignment-row{flex-wrap:wrap}
  .rv-detail-assignment-main{flex:1 1 100%}
}

/* ─── QoL: Improved keyboard focus ring (a11y) ──────────────────────── */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
.btn:focus-visible,.nav-tab:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}
/* Don't double-outline native form fields that already paint their own focus border */
.modal-box .form-input:focus-visible{outline-offset:0}

/* ─── QoL: Larger tap targets on small screens ──────────────────────── */
@media(max-width:640px){
  .btn-icon{min-width:44px;min-height:44px}
  .toast{cursor:pointer;min-height:44px}
  .nav-tab{min-height:44px}
  /* Avoid accidental zoom on focus in iOS Safari (font-size <16px triggers it) */
  input[type="text"],input[type="email"],input[type="search"],input[type="number"],
  input[type="tel"],input[type="url"],input[type="password"],input[type="date"],
  input[type="datetime-local"],textarea,select{font-size:16px}
}

/* ──────────────────────────────────────────────────────────────────
   SURFACE POLISH (additive, non-overriding)
   ────────────────────────────────────────────────────────────────── */

/* Subtle gradient utility (used opt-in via class) */
.grad-top-strip{border-top:3px solid transparent;border-image:var(--brand-gradient) 1}

/* Frosted-glass surface helper for opt-in panels */
.glass-surface{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Nicer text selection in brand teal */
::selection{background:rgba(21,147,121,.22);color:var(--ink)}
::-moz-selection{background:rgba(21,147,121,.22);color:var(--ink)}

/* Smoother transition on links throughout the app */
a{transition:color .15s var(--ease-out)}

/* ════════════════════════════════════════════════════════════════════════════
 *  IFRAME PARITY OVERRIDES  ·  applied when html.in-iframe is set
 *  Goal: identical UX whether the app runs standalone or embedded inside the
 *  Divi page on scienceandresearch.ue-varna.bg via <iframe>.
 *
 *  Problem space:
 *  • position:fixed inside an iframe is anchored to the iframe's *own*
 *    viewport (= the iframe element's box). When the iframe auto-resizes
 *    to its content height (postMessage 'erp:resize'), that "viewport" is
 *    just the iframe box; modals/banners can land off-screen relative to
 *    the parent page scroll position.
 *  • 100vh / 100dvh inside the iframe equals iframe-element height. Combined
 *    with auto-resize, this can cause oscillation (height pumps up and down
 *    every paint).
 *  • Cookie banner / boot-error banner anchored to fixed bottom/top of the
 *    iframe end up far from the user's actual scroll position in the parent.
 *
 *  Strategy: convert chrome elements to position:absolute and pin to the
 *  visible portion of the iframe (top: 0 / max-height clamp). Centralise
 *  modal scroll inside the modal box (not the iframe document). Fall back
 *  to scroll-into-view for newly-mounted overlays.
 * ──────────────────────────────────────────────────────────────────────── */
html.in-iframe{
  /* Stop runaway dvh oscillation: let body height follow content. */
  min-height:0;
}
html.in-iframe body{
  min-height:0;
}

/* In-iframe modal handling.
   STRATEGY: keep `position:fixed` on overlays (NOT absolute) so the JS
   slice-anchor in index.html can pin them precisely to the visible parent
   viewport slice via inline `top`/`height`. The base modal rules already use
   `%` (relative to overlay) instead of `vh/dvh` so modal-box auto-fits.

   Why `position:fixed` works inside an iframe:
   • fixed = relative to iframe's viewport (= iframe height in CSS px)
   • iframe-bridge sizes iframe = parentVH whenever ANY modal is open
   • Therefore inset:0 = parent viewport, and JS slice-pin handles edge
     cases (parent scroll, cross-origin, race conditions).

   Previous strategy used `position:absolute` + `100svh` which fought the
   slice-pin and broke on cross-origin parents (svh inside iframe ≠ parent
   viewport). Removed entirely. */

/* Doc-viewer (fullscreen file preview) — in-iframe behavior.
   The doc-viewer is ALWAYS edge-to-edge fullscreen (overrides on line ~2043
   use !important to fill 100% of overlay slice). The iframe-anchor JS in
   index.html pins the overlay to the visible parent viewport slice, so the
   modal head/body/footer stay in view even when the iframe is taller than
   the parent viewport. Below: only the safe-area inset for the footer on
   mobile (notch / home indicator). All other contained-box rules removed —
   they were defeated by !important above and produced dead code. */
@media (max-width:640px){
  html.in-iframe .modal-overlay.doc-viewer-overlay .modal-box.fullscreen>.modal-footer{
    padding-bottom:max(.85rem,calc(env(safe-area-inset-bottom,0) + .5rem));
  }
}

/* Drawer panel: keep position:fixed (default), size to overlay slice via %
   so the JS slice-pin on .drawer-overlay correctly clips the panel to the
   visible parent viewport. */
html.in-iframe .drawer-panel{height:100%;min-height:0;max-height:100%}

html.in-iframe .cookie-banner{
  position:absolute;
  /* Place near the top of the iframe so the parent only needs to scroll a
     short distance to reach it. */
  top:12px;bottom:auto;left:50%;right:auto;
  transform:translateX(-50%);
  max-width:min(500px,calc(100% - 24px));
  width:calc(100% - 24px);
}
html.in-iframe .cookie-settings-dialog{
  position:absolute;top:60px;left:50%;transform:translateX(-50%);
}

html.in-iframe .boot-error-banner{position:absolute}

html.in-iframe #toast-container{
  /* Position is set per-frame by the always-on toast-anchor JS in index.html
     (top:NNNpx; right:1rem) so toasts always land in the user's currently-
     visible iframe slice \u2014 never at the absolute top of a 3000px iframe.
     Only fallback values here in case the JS bridge fails (cross-origin and
     parent never posted erp:viewport). */
  position:absolute;top:auto;bottom:1.4rem;right:1.4rem;left:auto;
}

/* Top refresh strip: hide inside iframe — it would attach to the iframe's top
   edge, which is invisible when the parent has scrolled past the iframe top. */
html.in-iframe body::before{display:none!important}

/* Login wrap: in iframe, use svh so the gradient panel matches the visible
   parent area instead of stretching to the full embedded document height. */
html.in-iframe .login-wrap{
  min-height:100svh;
  background-attachment:scroll;
}

/* Auth transition: absolute already set — also use svh height. */
html.in-iframe .auth-transition-overlay{
  height:auto;min-height:100svh;
}

/* Loading screen: absolute already set — clamp to svh and centre, prevents
   the auto-resize loop from pumping the iframe to thousands of px while the
   loader is still up. */
html.in-iframe #loading-screen{
  height:auto;min-height:100svh;
}

/* Reduce expensive blur layers in iframe: backdrop-filter compounds with the
   parent page compositing and can stutter on weaker GPUs / mobile. */
html.in-iframe .modal-overlay{
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
html.in-iframe .toast{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Smoother body scroll inside the iframe (iOS momentum). */
html.in-iframe{scroll-behavior:smooth}

/* ── View Transitions: language toggle (BG ⇄ EN) ────────────────────────
   When ERP_I18N.setLang wraps the DOM sweep in document.startViewTransition,
   the browser snapshots the old & new states and crossfades between them in
   a single compositor pass. Tighten the default 250ms fade to 160ms with a
   soft ease so the swap feels instant but never twitchy. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.16s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}

/* ============================================================================
 * MOBILE COMPATIBILITY PASS — cross-device polish
 * ----------------------------------------------------------------------------
 * Targets the most common real-world mobile bugs that don't show on desktop:
 *   • iOS Safari auto-zoom on focused inputs <16px font-size
 *   • Tap-target undersize (Apple HIG: 44px, Material: 48dp)
 *   • Pinch-zoom blocked accidentally by hover-only states stuck after tap
 *   • Notched / nav-bar safe-area insets for fixed/sticky chrome
 *   • Native form-control color/appearance overrides (date pickers, selects)
 *   • Momentum scrolling inside scrollable modal bodies on iOS
 *   • Pointer:coarse (touch) — strip hover-only hover lifts that look broken
 * ============================================================================ */
@media (max-width:768px){
  /* iOS zoom-on-focus prevention — every editable control must be ≥16px.
     Slightly bumps text-input footprint but eliminates the disruptive
     auto-zoom that breaks Vista on every form field tap. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .search-input,
  .form-input,
  .form-field input,
  .form-field select,
  .form-field textarea{
    font-size:16px!important;
  }
  /* Native select arrow colour-correct on mobile WebKit (was inheriting
     iOS default grey — looked disabled). */
  select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23555' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/></svg>");
    background-repeat:no-repeat;
    background-position:right .85rem center;
    background-size:10px;
    padding-right:2.2rem;
    -webkit-appearance:none;appearance:none;
  }
  /* Tighten momentum scrolling inside any scroll container that the
     modal-body / detail-sheet uses. */
  .modal-body,.detail-sheet,.drawer-panel,.doc-picker-grid{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* Honor safe-area insets on bottom-anchored chrome (iOS home indicator,
     Android gesture bar). */
  .footer-inner,.mobile-bottom-nav,.mobile-action-bar{
    padding-bottom:max(.65rem,env(safe-area-inset-bottom,0px));
  }
}

/* Touch-only devices: kill hover-derived state changes that get "stuck"
   after a tap (e.g. teal hover background that never fades). Without this
   the UI looks frozen until the next interaction elsewhere. */
@media (hover:none) and (pointer:coarse){
  .btn:hover,
  .stat-btn:hover,
  .nav-tab:hover,
  .chip:hover,
  .doc-card:hover,
  .wf-pipe-step:hover,
  .drawer-nav-item:hover,
  th:hover{
    background:inherit;
    color:inherit;
    border-color:inherit;
    box-shadow:inherit;
    transform:none;
  }
  /* Restore the explicit ACTIVE/SELECTED visual styles the rules above
     would otherwise flatten. */
  .nav-tab.active,.stat-btn.active,.chip.active,.drawer-nav-item.active{
    background:var(--white);
    border-color:var(--red-border);
    color:var(--red);
    box-shadow:var(--shadow-xs);
  }
}

/* ============================================================================
 * DEVICE COMPAT FINE-TUNING — additive guards, no UX changes
 * ----------------------------------------------------------------------------
 * Targets edge cases that surface on real devices but never on a desktop
 * browser resize: notched landscape, embedded media, very long unbroken
 * strings (URLs/EGNs/file IDs), foldables, and high-DPI text rendering.
 * ============================================================================ */

/* 1. Hard guarantee no horizontal page scroll on phones — a single rogue
      child with a fixed min-width can shove the whole page sideways and
      break the iframe height-bridge. */
html,body{max-width:100vw}

/* 2. Embedded media never overflows its container (preview iframes,
      uploaded images in modal bodies, signature canvases shown read-only). */
.modal-body img,
.modal-body video,
.modal-body canvas,
.detail-sheet img,
.detail-sheet video{max-width:100%;height:auto}

/* 3. Long unbroken strings (Drive file IDs, public URLs, comma-less EGNs in
      audit logs) wrap inside text containers instead of forcing overflow.
      Scoped to body text only — does NOT affect tables or code blocks. */
.modal-body p,
.modal-body li,
.detail-val,
.toast-msg,
.fd-comment-text{overflow-wrap:anywhere}

/* 4. Landscape notch / camera cutout: pad overlay so the modal box never
      sits under the iPhone Dynamic Island or Pixel hole-punch. */
@media (orientation:landscape) and (max-height:500px){
  .modal-overlay{
    padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right));
  }
}

/* 5. Foldable / very narrow (≤360px) — Galaxy Fold cover screen, older
      Android Go devices. Tighten gutters so action bars don't overflow. */
@media (max-width:360px){
  .main-content{padding-left:.65rem;padding-right:.65rem}
  /* Even tighter overlay padding on ultra-narrow so the modal still has
     centered breathing room without feeling cramped. */
  .modal-overlay{padding:.65rem .55rem}
  .modal-head{padding:.85rem .9rem .75rem}
  .modal-body{padding:.9rem}
  .modal-footer{padding:.75rem .9rem}
  .modal-footer .btn{font-size:.83rem;padding:.65rem .7rem;min-height:44px}
  .btn{padding:.55rem .85rem}
}

/* 6. High-DPI text rendering — ensure crisp glyphs on Retina/QHD without
      the geometricPrecision jaggies macOS sometimes ships. */
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
}

/* 7. Reduced data preference — drop the heaviest decorative effects when
      the user has Save-Data on (mobile carriers, kiosks). */
@media (prefers-reduced-data:reduce){
  .modal-overlay,.toast,.glass-surface{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
}

/* 8. Forced-colors / Windows High Contrast — ensure interactive borders
      remain visible when the OS strips brand colours. */
@media (forced-colors:active){
  .btn,.modal-box,.chip,.nav-tab,.form-input,.form-select{
    border:1px solid CanvasText;
  }
  .btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}
}

/* ============================================================================
 * DOC VIEWER — zoom controls (desktop + mobile parity)
 * ----------------------------------------------------------------------------
 * Custom zoom group rendered in the doc-viewer head. Replaces Drive's native
 * +/- toolbar that's stripped from the embed on mobile.
 * ============================================================================ */
.doc-zoom-group{
  display:inline-flex;align-items:center;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:2px;gap:0;
}
.doc-zoom-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:30px;padding:0 .55rem;
  background:transparent;border:none;color:var(--ink-2);
  font-family:var(--font-body);font-size:.74rem;font-weight:600;line-height:1;
  border-radius:var(--r-pill);cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),opacity .15s ease;
  -webkit-tap-highlight-color:rgba(21,147,121,.12);touch-action:manipulation;
}
.doc-zoom-btn:hover:not(:disabled){background:var(--white);color:var(--red)}
.doc-zoom-btn:active:not(:disabled){transform:scale(.94)}
.doc-zoom-btn:disabled{opacity:.4;cursor:not-allowed}
.doc-zoom-btn.doc-zoom-pct{min-width:46px;font-variant-numeric:tabular-nums}
.doc-zoom-btn i{font-size:.78rem}
.doc-zoom-wrap{background:var(--bg-2)}
.doc-zoom-wrap>iframe{transition:transform .12s var(--ease-out)}

@media (max-width:640px){
  .doc-zoom-group{padding:1px}
  .doc-zoom-btn{min-width:36px;height:32px;padding:0 .45rem;font-size:.72rem}
  .doc-zoom-btn.doc-zoom-pct{min-width:42px}
}

/* ============================================================================
 * DOC VIEWER — mobile usability pass
 * ----------------------------------------------------------------------------
 * The applications-section document preview opens as `.modal-box.fullscreen`
 * inside `.modal-overlay.doc-viewer-overlay`. On phones the head crowds with
 * (icon + title + meta + Web/Text toggle + close) and the footer carries up
 * to 4 buttons in two flex groups, breaking on small screens. Plus the
 * iframe/text preview was capped at 50/55vh inside a 100dvh box, leaving the
 * lower half of the screen empty and unusable.
 * ============================================================================ */
@media (max-width:640px){
  /* Body becomes a true scrolling container so a long text preview is
     touch-pannable end-to-end on mobile. Single source of truth — the
     desktop rule above (line ~2174) sets display:flex/padding:0; this
     adds the mobile-only overflow + touch behavior. */
  .modal-box.fullscreen>.modal-body{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* Doc-viewer modal MUST always fill its overlay slice on mobile. The
     generic .modal-box.fullscreen{height:100dvh} rule below would otherwise
     win on source-order, overflowing the slice the iframe-anchor JS pinned
     to the visible parent viewport. */
  .modal-overlay.doc-viewer-overlay > .modal-box.fullscreen{
    height:100%!important;max-height:100%!important;
  }
  .modal-box.fullscreen .doc-preview-frame{
    height:100%!important;max-height:none!important;min-height:0;width:100%;
    border:none;border-radius:0;background:#fff;
  }
  .modal-box.fullscreen .doc-preview-text{
    height:100%!important;max-height:none!important;min-height:0;
    padding:1rem 1.1rem 1.4rem;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border:none;border-radius:0;
  }
  /* Doc-viewer head: allow the action group to wrap below the title row
     instead of squeezing. */
  .doc-viewer-overlay .modal-head{flex-wrap:wrap;gap:.5rem;padding:.85rem 1rem}
  .doc-viewer-overlay .modal-head>div:first-child{flex:1 1 100%;min-width:0}
  .doc-viewer-overlay .modal-head>div:last-child{flex:0 0 auto;margin-left:auto}
  .doc-viewer-overlay .modal-head .btn-sm{font-size:.72rem;padding:.4rem .55rem}
  .doc-viewer-overlay .modal-head .btn-sm i{margin:0}
  .doc-viewer-overlay .modal-head .close-btn{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:10px;background:rgba(0,0,0,.04);
  }
  /* Footer: stack the two action groups full-width so every button is
     thumb-reachable; keep visual grouping by separating them. */
  .doc-viewer-overlay .modal-footer{
    flex-direction:column-reverse;align-items:stretch;gap:.55rem;
    padding:.85rem 1rem;
    padding-bottom:max(.85rem,calc(env(safe-area-inset-bottom,0) + .5rem));
  }
  .doc-viewer-overlay .modal-footer>div{
    display:flex!important;flex-wrap:wrap;gap:.5rem;width:100%;
  }
  .doc-viewer-overlay .modal-footer>div>.btn,
  .doc-viewer-overlay .modal-footer>div>a.btn{
    flex:1 1 calc(50% - .25rem);min-width:0;min-height:46px;
    justify-content:center;font-size:.82rem;padding:.65rem .7rem;
  }
  /* When only one button in a group, let it span full width. */
  .doc-viewer-overlay .modal-footer>div:has(>:only-child)>.btn{flex-basis:100%}
}

/* Very narrow phones (≤380px): drop the head meta line so the title gets
   full priority and the toggle/close stay reachable. */
@media (max-width:380px){
  .doc-viewer-overlay .modal-head h3{font-size:.88rem}
  .doc-viewer-overlay .modal-head h3+div{display:none}
  .doc-viewer-overlay .modal-footer>div>.btn{font-size:.78rem;min-height:44px}
}



/* ── Dual toast containers (WCAG 2.1 — polite vs assertive) ────────
   The polite #toast-container is the existing one (success/info).
   #toast-container-alerts is rendered by index.html with role=alert
   for errors/warnings; mirror its positioning + iframe override. */
/* (legacy duplicate removed — see consolidated TOAST block above) */
#toast-container-alerts{display:flex;flex-direction:column-reverse;gap:.5rem;pointer-events:none}
html.in-iframe #toast-container-alerts{position:absolute}

/* ══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT — ПРЕМАХНАТ (v6.0.0)
   Целият административен панел (AdminDashboard, AdminLayout,
   AdminSidebar, AdminTopbar, admin-widgets) е премахнат.
   ══════════════════════════════════════════════════════════════════ */
#toast-container-alerts .toast{pointer-events:auto}
/* ══════════════════════════════════════════════════════════════════
   REVIEWER FLOW — BPMN 19→20→22→23 STAGE TIMELINE & INVITATION UX
   Added v5.9.50: implements the consent-first flow per regulation
   (10-day clock starts on consent, not assignment).
   ══════════════════════════════════════════════════════════════════ */

/* ── Stage timeline (4 nodes) ── */
.rv-stage-timeline{display:flex;align-items:flex-start;gap:0;padding:1rem 1.25rem .85rem;background:linear-gradient(to bottom,var(--bg) 0%,var(--white) 100%);border-bottom:1px solid var(--border);position:relative}
.rv-stage-node{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.rv-stage-bullet{width:38px;height:38px;border-radius:50%;background:var(--white);border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:var(--ink-5);font-size:.85rem;transition:all .25s var(--ease-out);position:relative;z-index:2}
.rv-stage-node.done .rv-stage-bullet{background:var(--ok);border-color:var(--ok);color:#fff}
.rv-stage-node.active .rv-stage-bullet{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);animation:rvPulseActive 1.6s ease-in-out infinite}
.rv-stage-node.aborted .rv-stage-bullet{background:var(--err-bg,#fee);border-color:var(--err);color:var(--err)}
@keyframes rvPulseActive{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 8%,transparent)}}
.rv-stage-line{position:absolute;top:19px;left:50%;width:100%;height:2px;background:var(--border-2);z-index:1}
.rv-stage-node.done .rv-stage-line{background:var(--ok)}
.rv-stage-meta{margin-top:.35rem;text-align:center;font-size:.7rem;line-height:1.25;max-width:110px}
.rv-stage-step{font-weight:700;color:var(--ink-4);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase}
.rv-stage-node.done .rv-stage-step,.rv-stage-node.active .rv-stage-step{color:var(--ink-3)}
.rv-stage-label{color:var(--ink-3);font-weight:600}
.rv-stage-node.active .rv-stage-label{color:var(--accent);font-weight:700}
.rv-stage-node.aborted .rv-stage-label{color:var(--err);font-weight:700}
@media (max-width:560px){
    .rv-stage-timeline{padding:.7rem .5rem;gap:0}
    .rv-stage-bullet{width:30px;height:30px;font-size:.7rem}
    .rv-stage-line{top:15px}
    .rv-stage-meta{font-size:.62rem;max-width:70px}
    .rv-stage-step{font-size:.52rem}
}

/* ── Invitation banner (BPMN 20 — shown only when awaiting consent) ── */
.rv-invitation-banner{display:flex;gap:1rem;padding:1.1rem 1.25rem;margin:.75rem 1.25rem 0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--white)) 0%,var(--white) 100%);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--r-md);box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 8%,transparent);position:relative;overflow:hidden}
.rv-invitation-banner::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)));}
.rv-inv-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);animation:rvHandshakeWave 2.4s ease-in-out infinite}
@keyframes rvHandshakeWave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.rv-inv-body{flex:1;min-width:0}
.rv-inv-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.rv-inv-text{font-size:.82rem;color:var(--ink-2);line-height:1.55;margin-bottom:.75rem}
.rv-inv-text strong{color:var(--accent);font-weight:700}
.rv-inv-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.rv-inv-accept{font-weight:700;padding:.55rem 1.1rem!important;font-size:.82rem!important}
.rv-inv-decline{padding:.55rem 1rem!important;font-size:.78rem!important;color:var(--ink-3)}
.rv-inv-decline:hover{color:var(--err);border-color:var(--err)!important}
.rv-inv-decline-row{display:flex;gap:.4rem;align-items:center;flex:1;min-width:280px;flex-wrap:wrap}
@media (max-width:560px){
    .rv-invitation-banner{flex-direction:column;gap:.7rem;padding:.85rem;margin:.5rem .5rem 0}
    .rv-inv-icon{width:38px;height:38px;font-size:1rem}
    .rv-inv-actions{flex-direction:column;align-items:stretch}
    .rv-inv-accept,.rv-inv-decline{width:100%;justify-content:center}
}

/* ── Consent confirmed bar (BPMN 22 — shown after accept) ── */
.rv-consent-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;margin:.6rem 1.25rem 0;background:color-mix(in srgb,var(--ok) 9%,var(--white));border:1px solid color-mix(in srgb,var(--ok) 30%,var(--border));border-radius:var(--r-sm);font-size:.82rem;color:var(--ink-2)}
.rv-consent-bar.warn{background:color-mix(in srgb,var(--warn) 10%,var(--white));border-color:color-mix(in srgb,var(--warn) 35%,var(--border));color:var(--ink)}
.rv-consent-bar.overdue{background:color-mix(in srgb,var(--err) 10%,var(--white));border-color:color-mix(in srgb,var(--err) 35%,var(--border));color:var(--err);animation:rvOverduePulse 1.5s ease-in-out infinite}
@keyframes rvOverduePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--err) 25%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--err) 0%,transparent)}}
.rv-consent-icon{font-size:1rem;color:var(--ok);flex-shrink:0}
.rv-consent-bar.warn .rv-consent-icon{color:var(--warn)}
.rv-consent-bar.overdue .rv-consent-icon{color:var(--err)}
.rv-consent-text{flex:1;line-height:1.4}
.rv-consent-dl{font-weight:700;color:var(--accent);padding:.05rem .35rem;background:var(--white);border-radius:var(--r-xs);border:1px solid var(--border)}
.rv-consent-bar.warn .rv-consent-dl{color:var(--warn);border-color:var(--warn-border)}
.rv-consent-bar.overdue .rv-consent-dl{color:var(--err);border-color:var(--err-border)}
.rv-consent-from{color:var(--ink-5);font-size:.75rem}
@media (max-width:560px){
    .rv-consent-bar{margin:.4rem .5rem 0;padding:.5rem .7rem;font-size:.74rem;flex-wrap:wrap}
}

/* ── "Must consent first" lock notice ── */
.rv-must-consent{display:flex;gap:.85rem;align-items:flex-start;padding:1.5rem;background:var(--bg);border:1.5px dashed var(--border-2);border-radius:var(--r-md);text-align:left;margin:.75rem 0}
.rv-must-consent-icon{font-size:1.6rem;color:var(--ink-5);flex-shrink:0;padding-top:.1rem}
.rv-must-consent-title{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.rv-must-consent-text{font-size:.78rem;color:var(--ink-3);line-height:1.5}

/* ── reviewer: missing project data warning ── */
.rv-no-project{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .9rem;margin:.6rem 1.25rem 0;background:color-mix(in srgb,var(--warn) 8%,var(--white));border:1px solid color-mix(in srgb,var(--warn) 30%,var(--border));border-radius:var(--r-sm);font-size:.78rem}
.rv-no-project-icon{color:var(--warn);font-size:1rem;flex-shrink:0;padding-top:.1rem}
.rv-no-project-title{font-weight:700;color:var(--ink);margin-bottom:.2rem}
.rv-no-project-text{color:var(--ink-3);line-height:1.45}

/* ── reviewer: replaced assignment notice ── */
.rv-replaced-notice{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem 1rem;margin:.6rem 1.25rem 0;background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-sm);font-size:.8rem}
.rv-replaced-icon{color:var(--ink-4);font-size:1rem;flex-shrink:0}
.rv-replaced-title{font-weight:700;color:var(--ink-3);margin-bottom:.2rem}
.rv-replaced-text{color:var(--ink-4)}

/* ── reviewer: COI checkbox row in invitation banner ── */
.rv-coi-check-row{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;padding:.5rem .2rem;font-size:.8rem;color:var(--ink-2);line-height:1.45;user-select:none}
.rv-coi-check-row input[type=checkbox]{margin-top:.2rem;flex-shrink:0;cursor:pointer}

/* ── Replace Reviewer modal ── */
.rv-replace-context{display:flex;flex-direction:column;gap:.4rem;padding:.7rem .9rem;background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--border)}
.rv-replace-row{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem}
.rv-replace-lbl{flex-shrink:0;width:80px;color:var(--ink-4);font-weight:600;text-transform:uppercase;font-size:.66rem;letter-spacing:.04em;padding-top:.15rem}
.rv-replace-val{flex:1;color:var(--ink);font-weight:500}

/* ════════════════════════════════════════════════════════════════════════
 * LIVE-SYSTEM FEEL — v5.9.60 (2026-05-09)
 * Goal: every interactive surface feels instantly responsive. Modals close
 * before the network round-trip resolves; in-flight state is communicated
 * via subtle shimmer (not blocking spinners). Skeletons replace "Зареждане…"
 * placeholder copy wherever practical.
 * ════════════════════════════════════════════════════════════════════════ */

/* Tactile press: tiny scale-down on any button/clickable. Respects
   reduced-motion. Scoped to non-disabled, non-pending state. */
.btn:active:not(:disabled):not([data-pending="true"]),
.mc-quickrow-item:active:not(:disabled),
.mc-section-action:active:not(:disabled),
.btn-icon:active:not(:disabled){
  transform:scale(.97);transition:transform 80ms var(--ease-out),opacity 80ms ease,background-color 80ms ease
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.mc-quickrow-item:active,.mc-section-action:active,.btn-icon:active{transform:none!important}
}

/* In-flight buttons: keep clickable look (no full disable), overlay a soft
   moving shimmer so the user knows the action is in progress without being
   blocked from reading the rest of the UI. */
.btn[data-pending="true"]{position:relative;cursor:progress;pointer-events:none;color:transparent!important}
.btn[data-pending="true"] > *{visibility:hidden}
.btn[data-pending="true"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  background-size:200% 100%;animation:btnPendShimmer 1.1s linear infinite;
  pointer-events:none
}
.btn[data-pending="true"]::before{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  color:#fff;animation:btnPendSpin .7s linear infinite;opacity:.9
}
.btn-secondary[data-pending="true"]::before,
.btn-ghost[data-pending="true"]::before,
.btn-link[data-pending="true"]::before{color:var(--primary)}
@keyframes btnPendShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes btnPendSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn[data-pending="true"]::after{animation:none;opacity:.4}
  .btn[data-pending="true"]::before{animation:none}
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────
   Use .skeleton for any block placeholder; .skeleton-text for inline
   text-line shapes; combine with .skeleton-block for cards. */
.skeleton,.skeleton-text,.skeleton-block{
  position:relative;overflow:hidden;background:var(--bg-2);border-radius:var(--r-xs);
  color:transparent!important;user-select:none
}
.skeleton::after,.skeleton-text::after,.skeleton-block::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;
  transform:translateZ(0)
}
.skeleton-text{display:inline-block;height:.85em;min-width:4em;vertical-align:middle;border-radius:4px}
.skeleton-text.lg{height:1.2em;min-width:8em}
.skeleton-text.sm{height:.7em;min-width:3em}
.skeleton-block{min-height:60px;border-radius:var(--r-sm)}
@keyframes skelShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton::after,.skeleton-text::after,.skeleton-block::after{animation:none;opacity:.5}}

/* ── Top-of-page progress bar — appears whenever ANY background API call is
   in flight. Driven by body[data-refreshing="true"] which already exists
   and is set by utils.js startRefresh()/endRefresh(). */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;
  background:linear-gradient(90deg,transparent 0%,var(--brand-teal) 30%,var(--brand-navy) 70%,transparent 100%);
  background-size:200% 100%;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s var(--ease-out),opacity .25s ease;
  opacity:0;pointer-events:none
}
body[data-refreshing="true"]::before{
  transform:scaleX(1);opacity:1;animation:topProgressSlide 1.4s ease-in-out infinite
}
@keyframes topProgressSlide{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){body[data-refreshing="true"]::before{animation:none}}

/* Modal exit feels snappier — shave 40 ms off the close animation. */
.modal-overlay.closing,.detail-sheet.closing{animation-duration:110ms!important}

/* Optimistic-action toast confirmation — flashes a tiny green tick at the
   top-right of the just-clicked button for 600 ms. Driven by JS adding
   data-just-acted="true" briefly. */
.btn[data-just-acted="true"]::after{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:.62rem;display:flex;align-items:center;justify-content:center;
  animation:justActedPop .6s var(--ease-spring);box-shadow:0 2px 6px rgba(31,92,57,.4)
}
@keyframes justActedPop{0%{transform:scale(0);opacity:0}40%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}

/* ─── v5.9.70 — END-USER UX PATCH (toggle, picker list, session clock, chat, doc actions) ─── */

/* View-mode toggle (card / list) — used in DocumentsView + DocumentPickerModal */
.view-toggle-btns{display:inline-flex;gap:.3rem;align-items:center}
.view-toggle-btns .btn{transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.view-toggle-btns .btn.btn-primary{box-shadow:0 2px 6px rgba(173,28,49,.2)}
.view-toggle-btns .btn i{font-size:.95rem}

/* Doc Picker — list-style table */
.doc-picker-list-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.78rem}
.doc-picker-list-table thead th{position:sticky;top:0;background:var(--bg);color:var(--ink-3);
  font-weight:600;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.55rem .55rem;border-bottom:1px solid var(--border);text-align:left;z-index:1}
.doc-picker-list-table tbody td{padding:.55rem .55rem;border-bottom:1px solid var(--border-soft, var(--border));vertical-align:middle}
.doc-picker-list-table tbody tr.dpl-row{transition:background .12s}
.doc-picker-list-table tbody tr.dpl-row:hover{background:var(--bg)}
.doc-picker-list-table tbody tr.dpl-row.selected{background:var(--red-fog, #fdecee)}
.doc-picker-list-table .dpi-name{font-weight:600;color:var(--ink);font-size:.82rem}
.doc-picker-list-table .doc-type-badge{font-size:.62rem;padding:.18rem .42rem;border-radius:999px;
  background:var(--bg);border:1px solid var(--border);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}

/* Larger doc action buttons (touch-friendly, ≥40×40 per Miroslava review) */
.doc-action-btn{min-width:40px !important;min-height:40px !important;padding:0 !important;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.doc-action-btn i{font-size:.9rem}

/* Session clock icon in topbar */
.session-clock-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;
  background:transparent;border:1px solid transparent;border-radius:999px;color:var(--ink-3);
  font-size:.72rem;font-weight:600;font-family:var(--font-display, inherit);cursor:pointer;
  transition:all .2s;line-height:1}
.session-clock-btn i{font-size:.85rem;opacity:.75}
.session-clock-btn:not(.warn):hover{color:var(--ink-2);background:var(--bg);border-color:var(--border)}
.session-clock-warn{color:#fff !important;background:var(--err) !important;border-color:var(--err) !important;
  cursor:pointer;animation:sessionPulse 1.4s ease-in-out infinite;box-shadow:0 2px 10px rgba(173,28,49,.45)}
.session-clock-warn i{opacity:1}
@keyframes sessionPulse{0%,100%{transform:scale(1);box-shadow:0 2px 10px rgba(173,28,49,.45)}
  50%{transform:scale(1.06);box-shadow:0 4px 18px rgba(173,28,49,.7)}}

/* ── Q&A help button ── */
.topbar-qa-btn{font-size:.62rem;color:rgba(255,255,255,.45);padding:.22rem .55rem}
.topbar-qa-btn:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.1)}
.topbar-qa-btn i{font-size:.82rem}

/* ── Q&A modal ── */
.qa-modal{max-width:640px;width:95vw}
.qa-modal .modal-body::-webkit-scrollbar{width:6px}
.qa-modal .modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Session expiry warning modal */
.session-warn-modal .modal-box{max-width:440px}
.session-warn-modal .session-countdown-ring{display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:120px;height:120px;border-radius:50%;margin:0 auto 1rem;
  background:radial-gradient(circle,#fff 0,var(--red-fog) 100%);
  border:4px solid var(--err);box-shadow:0 0 0 6px rgba(173,28,49,.12),inset 0 0 18px rgba(173,28,49,.08);
  font-family:var(--font-display, inherit)}
.session-warn-modal .session-countdown-ring .countdown-num{font-size:1.7rem;font-weight:800;color:var(--err);line-height:1}
.session-warn-modal .session-countdown-ring .countdown-lbl{font-size:.62rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}

/* Chat bubbles (Messages tab) */
.chat-bubble{max-width:72%;padding:.55rem .8rem;border-radius:14px;font-size:.82rem;
  line-height:1.45;word-wrap:break-word;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chat-bubble.own{background:linear-gradient(160deg,var(--primary,#ad1c31),#8a1426);color:#fff;
  border-bottom-right-radius:4px;align-self:flex-end;margin-left:auto}
.chat-bubble.own .chat-meta{color:rgba(255,255,255,.75)}
.chat-bubble.other{background:var(--bg);color:var(--ink);border:1px solid var(--border);
  border-bottom-left-radius:4px;align-self:flex-start}
.chat-bubble .chat-meta{font-size:.62rem;margin-top:.25rem;opacity:.7;letter-spacing:.02em}
.chat-list{display:flex;flex-direction:column;gap:.55rem;padding:.85rem;max-height:55vh;overflow-y:auto}


/* ─── Messages tab — chat bubble specifics (v5.9.71) ─── */
.chat-bubble-content{font-size:.82rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chat-bubble-meta{display:flex;justify-content:space-between;gap:.4rem;margin-top:.3rem;font-size:.62rem;opacity:.7;letter-spacing:.02em;flex-wrap:wrap}
.chat-bubble.own .chat-bubble-meta{color:rgba(255,255,255,.7)}
.chat-bubble.other .chat-bubble-meta{color:var(--ink-4)}

/* Messages tab — empty state */
.fd-docs-empty{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1.5rem;color:var(--ink-4);text-align:center}
.fd-docs-empty i{font-size:1.6rem;opacity:.5}
.fd-docs-empty p{font-size:.82rem;margin:0}

/* Chat input area */
.fd-tab + div textarea.form-input{border-radius:var(--r-sm);font-size:.82rem;padding:.55rem .65rem;resize:none}

/* ════════════════════════════════════════════════════════════════════════════
 *  MULTI-SELECT CHECKBOX DROPDOWN (v9.36 — multi-направление)
 *  Replaces <select> for multi-value fields. Trigger looks like a select;
 *  dropdown is a scrollable popover with checkboxes. Keyboard accessible.
 * ════════════════════════════════════════════════════════════════════════════ */
.multi-select{position:relative;display:block;width:100%}
.multi-select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;padding:.7rem 1rem;min-height:42px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--white);font-family:var(--font-body);font-size:.9rem;
  color:var(--ink);cursor:pointer;text-align:left;
  transition:border-color .2s,box-shadow .2s,background .2s;
  outline:none;appearance:none;
}
.multi-select-trigger:hover{border-color:var(--border-2)}
.multi-select-trigger:focus,.multi-select.is-open .multi-select-trigger{
  border-color:var(--red-3);box-shadow:0 0 0 3px rgba(21,147,121,.10);
}
.multi-select.is-disabled .multi-select-trigger{opacity:.55;cursor:not-allowed}
.ms-trigger-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-trigger-text.is-placeholder{color:var(--ink-4)}
.ms-trigger-text.is-count{color:var(--ink-2);font-weight:600}
.ms-arrow{font-size:.6rem;color:var(--ink-4);transition:transform .2s var(--ease);flex-shrink:0}
.multi-select.is-open .ms-arrow{transform:rotate(180deg)}

.multi-select-drop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-action-menu,11200);
  background:var(--white);border:1.5px solid var(--border-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);overflow-y:auto;overflow-x:hidden;
  animation:msDropIn .15s var(--ease-out) both;
  display:flex;flex-direction:column;
}
@keyframes msDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.ms-actions{
  display:flex;gap:.3rem;padding:.4rem .5rem;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.ms-action-btn{
  flex:1;padding:.22rem .35rem;font-size:.68rem;font-weight:600;
  border:1px solid var(--border);border-radius:var(--r-xs);
  background:var(--surface);color:var(--ink-3);cursor:pointer;
  font-family:var(--font-body);white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.ms-action-btn:hover{background:var(--bg);border-color:var(--border-2);color:var(--ink)}

.ms-option{
  display:flex;align-items:center;gap:.5rem;padding:.52rem .75rem;
  cursor:pointer;transition:background .1s;font-size:.84rem;color:var(--ink-2);
  user-select:none;-webkit-tap-highlight-color:rgba(21,147,121,.08);
}
.ms-option:hover{background:var(--bg)}
.ms-option.is-checked{background:var(--red-fog);color:var(--ink);font-weight:600}
.ms-check{flex-shrink:0;width:1.1em;text-align:center;font-size:.85rem}
.ms-option.is-checked .ms-check{color:var(--red)}
.ms-option:not(.is-checked) .ms-check{color:var(--ink-4)}
.ms-label{flex:1;overflow:hidden;text-overflow:ellipsis}

/* Error state */
.form-field.error .multi-select-trigger{border-color:var(--err);background:var(--err-bg);box-shadow:0 0 0 3px rgba(139,21,21,.12)}

/* Area chip (used in display views) */
.area-chip{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:.08rem .5rem;font-size:.72rem;margin-right:.25rem;margin-bottom:.15rem}

/* ── Applicant Forms Table (Моите проектни предложения) ──────────────────── */
.applicant-row td{vertical-align:middle}
.applicant-row .type-tag{white-space:nowrap}
/* Actions column sits between Тип and Конкурс — no label prefix on mobile */
.applicant-row td[data-label=""]{white-space:nowrap}
/* Correction row accent */
.correction-row{background:color-mix(in srgb,var(--warn) 5%,var(--white))!important;border-left:3px solid var(--warn)!important}
.correction-row:nth-child(even){background:color-mix(in srgb,var(--warn) 8%,var(--surface))!important}
/* ── Tablet: hide lower-priority columns at ≤900px ── */
@media(max-width:900px){
  .table-wrap table th:nth-child(6),
  .table-wrap table td:nth-child(6){display:none} /* Етап */
  .table-wrap table th:nth-child(7),
  .table-wrap table td:nth-child(7){display:none} /* Оценка */
}
@media(max-width:720px){
  .table-wrap table th:nth-child(8),
  .table-wrap table td:nth-child(8){display:none} /* Прикачени */
}
/* ── Mobile card layout for applicant rows ──────────────────────────────── */
@media(max-width:640px){
  .table-wrap table td[data-label=""]{order:-1} /* actions first on mobile */
  .applicant-row td[data-label="Тип"]::before,
  .applicant-row td[data-label="Дата"]::before{font-size:.58rem}
  .applicant-row td[data-label=""]{padding:.45rem 0!important;border-top:1px solid var(--border)!important;margin-top:.3rem}
}
/* ── Template copy-edit: generated doc chip ── */
.generated-doc-open-btn{display:inline-flex;align-items:center;gap:.3rem;font-size:.62rem;padding:.18rem .45rem;border-radius:var(--r-xs);border:1px solid var(--ok-border);color:var(--ok);background:var(--ok-bg);text-decoration:none;cursor:pointer;transition:background .15s ease,box-shadow .15s ease;white-space:nowrap;flex-shrink:0}
.generated-doc-open-btn:hover{background:color-mix(in srgb,var(--ok) 15%,var(--white));box-shadow:var(--shadow-xs)}

/* ── Budget Tracker (v9.51.0-budgettracker) ──────────────────────────────── */
.bgt-root{}
.bgt-kpi-row{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding:.1rem 0}
.bgt-donut-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.bgt-kpi-cards{display:flex;gap:.7rem;flex-wrap:wrap;flex:1}
.bgt-kpi-item{flex:1 1 130px;min-width:115px;padding:.6rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.bgt-kpi-label{font-size:.68rem;color:var(--ink-3);margin-bottom:.22rem;font-weight:600}
.bgt-kpi-value{font-size:1.02rem;font-weight:800;line-height:1.2}
.bgt-kpi-sub{font-size:.62rem;color:var(--ink-4);margin-top:.2rem}
.bgt-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem;margin-bottom:.75rem}
.bgt-cat-card{background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem .8rem;transition:box-shadow .18s ease}
.bgt-cat-card:hover{box-shadow:0 3px 14px rgba(0,0,0,.09)}
.bgt-cat-card.bgt-over{border-color:var(--err-border,#fca5a5);background:var(--err-bg,#fef2f2)}
.bgt-cat-card.bgt-zero{opacity:.72}
.bgt-history-stream{padding:.4rem 1rem}
.bgt-history-item{display:flex;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--border);align-items:flex-start}
.bgt-history-item:last-child{border-bottom:none}
.bgt-history-dot{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}
.bgt-history-content{flex:1;min-width:0}
.bgt-dropzone{border:2px dashed var(--border);border-radius:var(--r-md,8px);padding:2.5rem 1.25rem;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease;background:var(--bg)}
.bgt-dropzone:hover,.bgt-dropzone-over{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,var(--bg))}
.bgt-dropzone-loading{cursor:wait;opacity:.75;pointer-events:none}
@media(max-width:640px){
  .bgt-kpi-row{flex-direction:column;align-items:stretch}
  .bgt-donut-wrap{align-self:center}
  .bgt-cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ════════════════════════════════════════════════════════════════════
   MODERNIZATION LAYER — v9.67.0-modernize
   Global, low-risk quality pass: accessible focus, responsive scaling,
   safe-area awareness, consistent elevation and motion. Scoped to avoid
   overriding component-specific rules above (appended last = wins only
   where nothing more specific exists).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Accessible keyboard focus (no mouse-focus rings) ──────────────
   A single consistent focus-visible ring across every interactive
   surface. Mouse/touch focus stays clean; keyboard focus is obvious.
   Uses :focus-visible so it never fires on pointer interaction. */
:where(a,button,[role="button"],[role="tab"],input,select,textarea,
  summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand-teal);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
/* Remove the legacy heavy focus glow only where the new ring applies. */
:where(button,[role="tab"]):focus:not(:focus-visible){outline:none}

/* ── 2. Fluid, balanced headings (responsive type scale) ──────────────
   clamp() makes headings scale smoothly between mobile and desktop
   instead of snapping at breakpoints. text-wrap:balance avoids lonely
   last words. Only sets size where a component hasn't already. */
:where(h1):not([class*="logo"]):not([style*="font-size"]){
  font-size:clamp(1.35rem,1.05rem + 1.4vw,1.95rem);line-height:1.25;text-wrap:balance}
:where(h2):not([style*="font-size"]){
  font-size:clamp(1.15rem,.98rem + 1vw,1.55rem);line-height:1.3;text-wrap:balance}
:where(h3):not([style*="font-size"]){
  font-size:clamp(1rem,.92rem + .55vw,1.25rem);line-height:1.35;text-wrap:balance}
p,li{text-wrap:pretty}

/* ── 3. Touch-target scaling on coarse pointers (mobile/tablet) ───────
   WCAG 2.5.5: interactive controls get a ≥40px hit area on touch
   devices without affecting the visual size on desktop. */
@media (pointer:coarse){
  .btn,.icon-btn,.close-btn,.board-subnav-tab,.fd-tab,.stat-btn,
  .action-menu button,[role="tab"]{min-height:40px}
  .icon-btn,.close-btn{min-width:40px}
  input,select,textarea{min-height:40px;font-size:16px} /* 16px stops iOS zoom-on-focus */
}

/* ── 4. Safe-area insets (notched / gesture-bar devices) ──────────────
   Pin fixed chrome clear of the iPhone notch and home indicator. */
@supports(padding:max(0px)){
  .toast-container,.toast-wrap,[class*="toast"]{
    padding-bottom:max(0px,env(safe-area-inset-bottom))!important;
    padding-right:max(.5rem,env(safe-area-inset-right))!important}
  .app-header,.main-header,header.app-header{
    padding-left:max(var(--gutter,1rem),env(safe-area-inset-left));
    padding-right:max(var(--gutter,1rem),env(safe-area-inset-right))}
}

/* ── 5. Consistent card elevation + hover lift ───────────────────────
   Unifies the interaction feel of clickable cards. Non-interactive
   cards are untouched (no transform). Respects reduced-motion. */
.card,.doc-card,.comp-phase-card,.bgt-cat-card,.proj-kpi-card,
.wf-kpi-card{transition:box-shadow var(--t,.16s) var(--ease),
  transform var(--t,.16s) var(--ease),border-color var(--t,.16s) var(--ease)}
.card.is-clickable:hover,.doc-card[role="button"]:hover,
a.doc-card:hover,button.card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-2)}
@media (prefers-reduced-motion:reduce){
  .card,.doc-card,.comp-phase-card,.bgt-cat-card,.proj-kpi-card,.wf-kpi-card,
  .card.is-clickable:hover,.doc-card[role="button"]:hover,
  a.doc-card:hover,button.card:hover{transform:none;transition:none}
}

/* ── 6. Refined disabled affordance ──────────────────────────────────
   Consistent, non-jarring disabled state for all controls. */
.btn:disabled,.btn[disabled],button:disabled,[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;filter:saturate(.7);box-shadow:none}

/* ── 7. Consistent thin scrollbars (desktop) ─────────────────────────
   Brand-tinted, unobtrusive; native on touch. */
@media (pointer:fine){
  .table-wrap,.modal-body,.board-subnav,.document-grid,
  .info-center-body,.action-menu{scrollbar-width:thin;
    scrollbar-color:var(--border-2) transparent}
  .table-wrap::-webkit-scrollbar,.modal-body::-webkit-scrollbar{height:9px;width:9px}
  .table-wrap::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{
    background:var(--border-2);border-radius:var(--r-pill)}
  .table-wrap::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover{
    background:var(--ink-5)}
}

/* ── 8. Smoother content entrance (board sections) ───────────────────
   A subtle fade-up when a board sub-tab's panel mounts. */
@keyframes boardFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.board-view>div[role="tabpanel"],.board-view .mc-section,
.board-view .card{animation:boardFadeUp .32s var(--ease-out,ease) both}
@media (prefers-reduced-motion:reduce){
  .board-view>div[role="tabpanel"],.board-view .mc-section,
  .board-view .card{animation:none}
}

/* ── Doc Viewer Modal responsive — interactive Google Docs embed ── */
.doc-viewer-overlay{z-index:12001}
.doc-viewer-overlay .modal-box.fullscreen{width:96vw;height:94vh;max-width:1200px;max-height:98vh;border-radius:14px;display:flex;flex-direction:column}
.doc-viewer-overlay .modal-box.fullscreen .modal-head{border-radius:14px 14px 0 0;flex-shrink:0}
.doc-viewer-overlay .modal-box.fullscreen .modal-body{flex:1;min-height:0;overflow:hidden}
.doc-viewer-overlay .modal-box.fullscreen .modal-footer{border-radius:0 0 14px 14px;flex-shrink:0}
@media (max-width:768px){
  .doc-viewer-overlay .modal-box.fullscreen{width:100vw;height:100vh;max-width:100%;max-height:100%;border-radius:0;margin:0}
  .doc-viewer-overlay .modal-box.fullscreen .modal-head{border-radius:0;padding:.5rem .6rem}
  .doc-viewer-overlay .modal-box.fullscreen .modal-head h3{font-size:.82rem}
  .doc-viewer-overlay .doc-viewer-actions{gap:.2rem}
  .doc-viewer-overlay .doc-viewer-actions .btn{font-size:.6rem;padding:.2rem .45rem;min-height:30px}
  .doc-viewer-overlay .doc-viewer-actions .btn i{font-size:.5rem}
  .doc-viewer-overlay .modal-box.fullscreen .modal-footer{padding:.4rem .6rem;border-radius:0}
  .doc-viewer-overlay .modal-box.fullscreen .modal-footer .btn{font-size:.68rem;padding:.25rem .6rem}
}
@media (max-width:480px){
  .doc-viewer-overlay .modal-box.fullscreen .modal-head{flex-wrap:wrap;gap:.3rem}
  .doc-viewer-overlay .modal-box.fullscreen .modal-head>div:first-child{min-width:0;flex:1}
  .doc-viewer-overlay .doc-viewer-actions .btn span{display:none}
  .doc-viewer-overlay .doc-viewer-actions .btn{padding:.2rem .35rem;min-width:32px;min-height:32px;justify-content:center}
  .doc-viewer-overlay .doc-viewer-actions .close-btn{margin-left:0}
}
@media (max-width:360px){
  .doc-viewer-overlay .modal-box.fullscreen .modal-head h3{font-size:.72rem}
  .doc-viewer-overlay .modal-box.fullscreen .modal-head [style*="font-size:"]{font-size:.55rem!important}
}

/* ── Document chips responsive ── */
@media (max-width:640px){
  .file-chip{font-size:.68rem!important;padding:.12rem .35rem!important}
  .file-chip [style*="font-size:"]{font-size:.55rem!important}
  .remove-attached{font-size:.65rem!important}
}

/* ── Wizard docs checklist responsive ── */
@media (max-width:480px){
  .wizard-docs-checklist [role="listitem"]{padding:.45rem .55rem!important}
  .wizard-docs-checklist [role="listitem"] .btn{padding:.2rem .5rem!important;font-size:.6rem!important}
  .wizard-docs-checklist [role="listitem"] .btn span{display:none}
}

/* ── v12.18.0: Budget Quick Panel — donut chart + sliders ── */
/* Range input cross-browser reset */
.budget-quick-panel input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;transition:background .2s}
.budget-quick-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:currentColor;cursor:pointer;margin-top:-5px;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.budget-quick-panel input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
.budget-quick-panel input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:currentColor;cursor:pointer;border:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.budget-quick-panel input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--border)}
/* Exact mode number input */
.budget-quick-panel input[type=number]{-moz-appearance:textfield;appearance:textfield}
.budget-quick-panel input[type=number]::-webkit-outer-spin-button,
.budget-quick-panel input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Budget doc chips */
.budget-doc-chip:hover{background:var(--bg)!important;border-color:var(--gold)!important;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)!important}
/* Mode toggle button group hover */
.budget-mode-toggle button:hover{opacity:.85}
/* Responsive: stack chart and inputs vertically on narrow */
@media (max-width:560px){
  .budget-quick-panel>[style*="display:flex"]{flex-direction:column!important}
  .budget-quick-panel svg{margin:0 auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  v12.21.0: Connectivity Status Banner
 *  Inline notification bar shown when backend connectivity degrades.
 *  Uses GPU-composited animation for smooth appear/disappear.
 *  ═══════════════════════════════════════════════════════════════════════ */
.connectivity-banner{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-conn-banner, 14000);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.45rem 1rem;font-size:.78rem;font-weight:500;
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;pointer-events:none;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.connectivity-banner.visible{transform:translateY(0);pointer-events:auto}
.connectivity-banner.degraded{
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  color:#92400e;border-bottom:2px solid #f59e0b;
}
.connectivity-banner.offline{
  background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
  color:#991b1b;border-bottom:2px solid #ef4444;
}
.connectivity-banner.restored{
  background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);
  color:#065f46;border-bottom:2px solid #10b981;
  animation:connRestoreFlash 2.5s ease forwards;
}
@keyframes connRestoreFlash{
  0%{transform:translateY(0)}
  10%{transform:translateY(0)}
  90%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-100%);opacity:0}
}
.connectivity-banner i{margin-right:.15rem}
.connectivity-banner .conn-banner-dismiss{
  margin-left:.6rem;cursor:pointer;opacity:.7;font-size:.85rem;
  background:none;border:none;color:inherit;padding:.15rem .35rem;
}
.connectivity-banner .conn-banner-dismiss:hover{opacity:1}