/* Modern style (Settings ▸ Appearance ▸ Style ▸ Modern): the Detailed or Excel layout in a minimal, airy look — Inter,
   the brand navy with one red accent, hairline borders, soft layered shadows, rounded surfaces, icons in tinted tiles (duotone),
   glassy bars, and pop-ups, menus and toasts that ease in. Everything here is scoped to html[data-style="modern"] and
   loaded after brand.css, so the other modes are untouched. The printed sheets keep their document look. */

/* ---------- 1. tokens ---------- */
html[data-style="modern"]{
  --m-bg:#f5f6fa;--m-surface:#ffffff;--m-surface-2:#f8f9fc;--m-surface-3:#f1f3f8;
  --m-line:#e5e8ef;--m-line-2:#eef0f5;
  --m-ink:#0f172a;--m-ink-2:#334155;--m-muted:#64748b;--m-faint:#94a3b8;
  --m-accent:#0b3a82;--m-accent-2:#072a60;--m-accent-3:#051c3e;--m-accent-soft:#e7eef9;--m-accent-soft-2:#d3e0f4;--m-ring:rgba(11,58,130,.22);
  --m-danger:#c8102e;--m-danger-soft:#fdecee;--m-ok:#2b8a3e;--m-ok-soft:#ebfbee;--m-warn:#e67700;--m-warn-soft:#fff6e5;
  --m-r-xs:6px;--m-r-sm:8px;--m-r:10px;--m-r-md:12px;--m-r-lg:16px;--m-r-xl:20px;
  --m-sh-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05);
  --m-sh-2:0 2px 4px -1px rgba(15,23,42,.05),0 8px 20px -6px rgba(15,23,42,.10);
  --m-sh-3:0 12px 28px -8px rgba(15,23,42,.18),0 4px 10px -4px rgba(15,23,42,.08);
  --m-sh-4:0 32px 64px -16px rgba(15,23,42,.30),0 12px 24px -12px rgba(15,23,42,.14);
  --m-ease:cubic-bezier(.22,1,.36,1);--m-spring:cubic-bezier(.34,1.4,.64,1);
  --m-glass:rgba(255,255,255,.78);
  --m-font:"BC Sans","BC Deva","Segoe UI","Noto Sans Devanagari",system-ui,-apple-system,Roboto,Arial,sans-serif;
  /* the app's own tokens, retuned */
  --navy:var(--m-accent);--navy-dark:var(--m-accent-3);--navy-light:var(--m-accent-soft);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft);
  --bg:var(--m-bg);--line:var(--m-line);--line-soft:var(--m-line-2);--ink:var(--m-ink);--muted:var(--m-muted);--key-bg:var(--m-surface-2);
  --focus:var(--m-accent);--rule-on-navy:transparent;
  --sh-1:var(--m-sh-1);--sh-2:var(--m-sh-2);--sh-3:var(--m-sh-4);--sh-soft:var(--m-sh-1);--sh-card:var(--m-sh-1);--sh-dialog:var(--m-sh-4);--sh-top:none;
  --overlay:rgba(15,23,42,.38);
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;
  --dur-1:160ms;--dur-2:260ms;--ease:var(--m-ease);
  --f-ui:var(--m-font);--font-sans:var(--m-font);
  /* tile hues for the icons */
  --h1:#0b3a82;--h1s:#e7eef9;--h2:#2b6cb0;--h2s:#e8f0fa;--h3:#072a60;--h3s:#e1e9f6;--h4:#c8102e;--h4s:#fdecee;
  --h5:#1e6b34;--h5s:#e8f5e9;--h6:#5a87c9;--h6s:#edf3fb;--h7:#0b3a82;--h7s:#e7eef9;--h8:#2b6cb0;--h8s:#e8f0fa;
  scroll-behavior:smooth;
}
html[data-style="modern"].dark{
  --m-bg:#0f0f0f;--m-surface:#171717;--m-surface-2:#1d1d1d;--m-surface-3:#232323;
  --m-line:#2b2b2b;--m-line-2:#242424;
  --m-ink:#e7ecf5;--m-ink-2:#c3cde0;--m-muted:#8d9ab3;--m-faint:#64708a;
  --m-accent:#9cc2ff;--m-accent-2:#b9d0f5;--m-accent-3:#d3e0f4;--m-accent-soft:#262626;--m-accent-soft-2:#313131;--m-ring:rgba(156,194,255,.3);
  --m-danger:#ff8a98;--m-danger-soft:#3a1a1f;--m-ok:#69db7c;--m-ok-soft:#14301d;--m-warn:#ffc078;--m-warn-soft:#3a2a10;
  --m-sh-1:0 1px 2px rgba(0,0,0,.4);--m-sh-2:0 8px 22px -6px rgba(0,0,0,.55);--m-sh-3:0 14px 30px -8px rgba(0,0,0,.6);--m-sh-4:0 32px 64px -16px rgba(0,0,0,.75);
  --m-glass:rgba(18,26,43,.78);
  --paper:var(--m-surface);
  --h1:#9cc2ff;--h1s:#262626;--h2:#8fb4e3;--h2s:#222222;--h3:#b9d0f5;--h3s:#262626;--h4:#ff8a98;--h4s:#3a1219;
  --h5:#9be3a3;--h5s:#123522;--h6:#afc6ea;--h6s:#232323;--h7:#9cc2ff;--h7s:#262626;--h8:#8fb4e3;--h8s:#222222;
}

/* ---------- 2. base: type, ground, focus, scroll bars, motion ---------- */
html[data-style="modern"] body{font-family:var(--m-font);background:var(--m-bg);color:var(--m-ink);font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
html[data-style="modern"] body:not(:has(.wb-bar)){background:radial-gradient(1200px 520px at 85% -10%,rgba(11,58,130,.07),transparent 60%),radial-gradient(900px 480px at -10% 110%,rgba(43,108,176,.05),transparent 60%),var(--m-bg);background-attachment:fixed}
html[data-style="modern"].dark body:not(:has(.wb-bar)){background:radial-gradient(1200px 520px at 85% -10%,rgba(156,194,255,.10),transparent 60%),var(--m-bg)}
html[data-style="modern"] ::selection{background:var(--m-accent-soft-2)}
html[data-style="modern"] :focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;border-radius:var(--m-r-xs)}
html[data-style="modern"] *{scrollbar-width:thin;scrollbar-color:#c9cfdb transparent}
html[data-style="modern"].dark *{scrollbar-color:#3a3a3a transparent}
html[data-style="modern"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-style="modern"] ::-webkit-scrollbar-thumb{background:#cfd5e1;border-radius:999px;border:3px solid transparent;background-clip:padding-box}
html[data-style="modern"] ::-webkit-scrollbar-thumb:hover{background-color:#aeb7c8}
html[data-style="modern"] a,html[data-style="modern"] button,html[data-style="modern"] .btn,html[data-style="modern"] .nav-link,html[data-style="modern"] .menu-item,html[data-style="modern"] .tk-btn,
html[data-style="modern"] .wb-c,html[data-style="modern"] .wb-tab,html[data-style="modern"] .card,html[data-style="modern"] input,html[data-style="modern"] select,html[data-style="modern"] textarea{
  transition:background-color var(--dur-1) var(--m-ease),border-color var(--dur-1) var(--m-ease),color var(--dur-1) var(--m-ease),box-shadow var(--dur-2) var(--m-ease),transform var(--dur-2) var(--m-ease),opacity var(--dur-1) var(--m-ease)}
/* the page arrives softly; moving between pages cross-fades (View Transitions) */
@keyframes mRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mDrop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mToast{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
html[data-style="modern"] main>*{animation:mRise .38s var(--m-ease) both}
html[data-style="modern"] main>*:nth-child(2){animation-delay:.04s}
html[data-style="modern"] main>*:nth-child(3){animation-delay:.08s}
html[data-style="modern"] main>*:nth-child(n+4){animation-delay:.12s}
::view-transition-old(root){animation:.18s ease-out both mFadeOut}
::view-transition-new(root){animation:.28s var(--m-ease,ease-out) both mFade}
@keyframes mFadeOut{to{opacity:0}}

/* ---------- 3. side menu ---------- */
html[data-style="modern"] .sb{background:var(--m-glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-right:1px solid var(--m-line)}
html[data-style="modern"] .sb-brand{border-bottom-color:transparent;height:60px}
html[data-style="modern"] .sb-brand .sb-label{color:var(--m-ink);letter-spacing:-.02em}
html[data-style="modern"] .sb-org{margin:0 2px;border:1px solid var(--m-line);background:var(--m-surface);box-shadow:var(--m-sh-1);border-radius:var(--m-r-md)}
html[data-style="modern"] .sb-org:hover{border-color:var(--m-accent-soft-2);box-shadow:var(--m-sh-2)}
html[data-style="modern"] .sb .nav-heading{color:var(--m-faint);font-size:11px;letter-spacing:.08em;font-weight:600;padding-left:12px}
html[data-style="modern"] .sb .nav-link{gap:11px;padding:6px 10px 6px 7px;border-radius:var(--m-r);color:var(--m-ink-2);font-weight:500}
html[data-style="modern"] .sb .nav-link:hover{background:var(--m-surface-3);color:var(--m-ink)}
html[data-style="modern"] .sb .nav-link-active,html[data-style="modern"] .sb .nav-link-active:hover{background:var(--m-surface);color:var(--m-ink);font-weight:600;box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
/* illustrative icons: each one in a soft tinted tile, drawn in two tones */
html[data-style="modern"] .sb .nav-link>svg{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:9px;flex:none;color:var(--hc,var(--h1));background:var(--hs,var(--h1s));fill:color-mix(in srgb,currentColor 16%,transparent);stroke-width:1.9;transition:transform var(--dur-2) var(--m-spring)}
html[data-style="modern"] .sb .nav-link:hover>svg{transform:scale(1.08) rotate(-3deg)}
html[data-style="modern"] .sb .nav-link-active>svg{color:#fff;background:linear-gradient(135deg,var(--hc,var(--h1)),color-mix(in srgb,var(--hc,var(--h1)) 70%,#000));fill:rgba(255,255,255,.18);box-shadow:0 4px 10px -2px color-mix(in srgb,var(--hc,var(--h1)) 45%,transparent)}
html[data-style="modern"].dark .sb .nav-link-active>svg{color:#0f0f0f}
html[data-style="modern"] .sb li:nth-child(8n+1)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+1)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+1){--hc:var(--h1);--hs:var(--h1s)}
html[data-style="modern"] .sb li:nth-child(8n+2)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+2)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+2){--hc:var(--h2);--hs:var(--h2s)}
html[data-style="modern"] .sb li:nth-child(8n+3)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+3)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+3){--hc:var(--h3);--hs:var(--h3s)}
html[data-style="modern"] .sb li:nth-child(8n+4)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+4)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+4){--hc:var(--h4);--hs:var(--h4s)}
html[data-style="modern"] .sb li:nth-child(8n+5)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+5)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+5){--hc:var(--h5);--hs:var(--h5s)}
html[data-style="modern"] .sb li:nth-child(8n+6)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+6)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+6){--hc:var(--h6);--hs:var(--h6s)}
html[data-style="modern"] .sb li:nth-child(8n+7)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+7)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+7){--hc:var(--h7);--hs:var(--h7s)}
html[data-style="modern"] .sb li:nth-child(8n+8)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>:nth-child(8n+8)>.nav-link,html[data-style="modern"] .sb .space-y-0\.5>.nav-link:nth-child(8n+8){--hc:var(--h8);--hs:var(--h8s)}
html[data-style="modern"] .sb .sb-sep{border-color:var(--m-line-2)}
html[data-style="modern"] .sb>div:last-child{border-top-color:var(--m-line-2)}
html[data-style="modern"].sb-mini .sb .nav-link{padding:5px 0}

/* ---------- 4. top bar ---------- */
html[data-style="modern"] .sb-main>header:not(.wb-bar),html[data-style="modern"] header.sticky:not(.wb-bar){background:var(--m-glass)!important;backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--m-line)!important;height:60px}
html[data-style="modern"] .btn-icon{border-radius:var(--m-r);color:var(--m-muted)}
html[data-style="modern"] .btn-icon:hover{background:var(--m-surface-3);color:var(--m-ink)}

/* ---------- 5. surfaces ---------- */
html[data-style="modern"] .card{border-radius:var(--m-r-lg);background:var(--m-surface);box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line);--tw-ring-color:transparent}
html[data-style="modern"] .card:where(a):hover,html[data-style="modern"] a .card:hover{box-shadow:var(--m-sh-2),0 0 0 1px var(--m-accent-soft-2);transform:translateY(-1px)}
html[data-style="modern"] .pl-card{border-radius:var(--m-r-xl)!important;overflow:hidden}
html[data-style="modern"] .pl-card::before{background:linear-gradient(100deg,var(--m-accent-soft),color-mix(in srgb,var(--h3s) 70%,var(--m-surface)) 60%,var(--m-surface))!important;color:var(--m-accent-2)!important;font-weight:600;letter-spacing:.06em;border-bottom:1px solid var(--m-line-2)}
html[data-style="modern"] .banner{border-radius:0}
html[data-style="modern"] hr{border-color:var(--m-line-2)}

/* ---------- 5b. the project list ---------- */
html[data-style="modern"] .pl-card{border-top:0!important;box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)!important}
html[data-style="modern"] .pl-card::before{padding:9px 20px;font-size:10.5px}
html[data-style="modern"] .pl-ttl{background:none;border-left:0;padding:4px 0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--m-ink)}
html[data-style="modern"] .pl-sub{font-style:normal;font-size:12.5px}
html[data-style="modern"] .pl-search input{height:36px;border:0;border-radius:var(--m-r);background:var(--m-surface-2);box-shadow:inset 0 0 0 1px var(--m-line);padding-left:32px}
html[data-style="modern"] .pl-search input:hover{box-shadow:inset 0 0 0 1px #cfd5e1}
html[data-style="modern"] .pl-search input:focus{outline:none;background:var(--m-surface);box-shadow:inset 0 0 0 1.5px var(--m-accent),0 0 0 4px var(--m-ring)}
html[data-style="modern"] .pl-search svg{left:11px}
html[data-style="modern"] .pl-search kbd{border-radius:6px;background:var(--m-surface)}
html[data-style="modern"] .pl-vsw{border:0!important;padding:3px;gap:2px;border-radius:var(--m-r);background:var(--m-surface-3);box-shadow:inset 0 0 0 1px var(--m-line-2);overflow:visible;display:inline-flex}
html[data-style="modern"] .pl-vsw button{border:0!important;border-radius:var(--m-r-xs);color:var(--m-muted);background:transparent;padding:4px 11px;font-weight:600}
html[data-style="modern"] .pl-vsw button:hover{color:var(--m-ink)}
html[data-style="modern"] .pl-vsw button[aria-pressed="true"]{background:var(--m-surface)!important;color:var(--m-ink)!important;box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
html[data-style="modern"] .pl-seg{border:0;padding:3px;gap:2px;border-radius:var(--m-r);background:var(--m-surface-3);box-shadow:inset 0 0 0 1px var(--m-line-2);overflow:visible}
html[data-style="modern"] .pl-seg label,html[data-style="modern"] .pl-seg button,html[data-style="modern"] .pl-seg a{border:0!important;border-radius:var(--m-r-xs);color:var(--m-muted);padding:4px 11px;font-weight:600}
html[data-style="modern"] .pl-seg label:hover,html[data-style="modern"] .pl-seg button:hover{background:transparent;color:var(--m-ink)}
html[data-style="modern"] .pl-seg label:has(input:checked),html[data-style="modern"] .pl-seg [aria-pressed="true"],html[data-style="modern"] .pl-seg .on{background:var(--m-surface)!important;color:var(--m-ink)!important;box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
html[data-style="modern"] .pl-stage{border-color:var(--m-line);padding:4px 12px 4px 5px;box-shadow:var(--m-sh-1)}
html[data-style="modern"] .pl-stage b{background:var(--m-surface-3);color:var(--m-ink-2)}
html[data-style="modern"] .pl-stage:hover{border-color:var(--m-accent-soft-2);transform:translateY(-1px)}
html[data-style="modern"] .pl-stage[aria-pressed="true"]{background:var(--m-accent-soft);color:var(--m-accent-2);border-color:var(--m-accent-soft-2)}
html[data-style="modern"] .pl-stage[aria-pressed="true"] b{background:var(--m-accent);color:#fff}
html[data-style="modern"] .pl-tabs{border-bottom-color:var(--m-line-2)}
html[data-style="modern"] .pl-tabs button{border-bottom-width:2px;color:var(--m-muted)}
html[data-style="modern"] .pl-tabs button:hover{color:var(--m-ink)}
html[data-style="modern"] .pl-tabs button[aria-selected="true"]{color:var(--m-ink);border-bottom-color:var(--m-accent)}

/* ---------- 6. buttons ---------- */
html[data-style="modern"] .btn{border-radius:var(--m-r);font-weight:600;letter-spacing:-.005em}
html[data-style="modern"] .btn:active,html[data-style="modern"] .tk-btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
html[data-style="modern"] .btn-primary,html[data-style="modern"] .tk-btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--m-accent) 88%,#fff),var(--m-accent));color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.12),0 4px 12px -4px color-mix(in srgb,var(--m-accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
html[data-style="modern"] .btn-primary:hover,html[data-style="modern"] .tk-btn.primary:hover:not(:disabled){background:linear-gradient(180deg,var(--m-accent),var(--m-accent-2));color:#fff;box-shadow:0 2px 4px rgba(15,23,42,.12),0 8px 18px -6px color-mix(in srgb,var(--m-accent) 70%,transparent);transform:translateY(-1px)}
html[data-style="modern"].dark .btn-primary,html[data-style="modern"].dark .tk-btn.primary{color:#0f0f0f}
html[data-style="modern"] .btn-secondary,html[data-style="modern"] .tk-btn{background:var(--m-surface);color:var(--m-ink-2);border:1px solid var(--m-line);--tw-ring-color:transparent;box-shadow:var(--m-sh-1);border-radius:var(--m-r-sm)}
html[data-style="modern"] .btn-secondary:hover,html[data-style="modern"] .tk-btn:hover:not(:disabled){background:var(--m-surface-2);color:var(--m-ink);border-color:#d5dae4;box-shadow:var(--m-sh-2)}
html[data-style="modern"].dark .btn-secondary:hover,html[data-style="modern"].dark .tk-btn:hover:not(:disabled){border-color:#3a3a3a}
html[data-style="modern"] .btn-ghost{color:var(--m-ink-2);border-radius:var(--m-r)}
html[data-style="modern"] .btn-ghost:hover{background:var(--m-surface-3)}
html[data-style="modern"] .btn-destructive,html[data-style="modern"] .tk-btn.accent,html[data-style="modern"] .btn.bg-accent-600,html[data-style="modern"] a.btn[class*="bg-red"],html[data-style="modern"] .btn[class*="bg-accent"]{background:linear-gradient(180deg,#f0515a,#d9363e);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.12),0 4px 12px -4px rgba(200,16,46,.55),inset 0 1px 0 rgba(255,255,255,.2)}
html[data-style="modern"] .link{color:var(--m-accent)}

/* ---------- 7. fields ---------- */
html[data-style="modern"] .input,html[data-style="modern"] .select,html[data-style="modern"] .textarea,html[data-style="modern"] main select:not(.v11 *),html[data-style="modern"] .tl-in{
  border-color:var(--m-line)!important;border-radius:var(--m-r);background-color:var(--m-surface);--tw-ring-color:var(--m-line);box-shadow:inset 0 0 0 1px var(--m-line),0 1px 2px rgba(15,23,42,.03)}
html[data-style="modern"] .input:hover,html[data-style="modern"] .select:hover,html[data-style="modern"] .textarea:hover,html[data-style="modern"] .tl-in:hover{box-shadow:inset 0 0 0 1px #cfd5e1,0 1px 2px rgba(15,23,42,.03)}
html[data-style="modern"] .input:focus,html[data-style="modern"] .select:focus,html[data-style="modern"] .textarea:focus,html[data-style="modern"] .tl-in:focus,html[data-style="modern"] main select:not(.v11 *):focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--m-accent),0 0 0 4px var(--m-ring)}
html[data-style="modern"] .label{color:var(--m-ink-2);font-weight:600;font-size:13px}
html[data-style="modern"] input[type=checkbox],html[data-style="modern"] input[type=radio]{accent-color:var(--m-accent)}
html[data-style="modern"] input[type=checkbox]:not(.v11 *){width:16px;height:16px;border-radius:5px}

/* ---------- 8. badges, chips, segmented choices ---------- */
html[data-style="modern"] .badge{border-radius:999px;font-weight:600;--tw-ring-color:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
html[data-style="modern"] .chip-s{border-radius:999px;font-weight:600}
html[data-style="modern"] .st-seg{border:0;padding:3px;gap:2px;border-radius:var(--m-r);background:var(--m-surface-3);box-shadow:inset 0 0 0 1px var(--m-line-2)}
html[data-style="modern"] .st-seg button{border:0;border-radius:var(--m-r-xs);color:var(--m-muted);padding:5px 11px}
html[data-style="modern"] .st-seg button:hover{color:var(--m-ink)}
html[data-style="modern"] .st-seg button[aria-pressed="true"]{background:var(--m-surface);color:var(--m-ink);box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
html[data-style="modern"] .st-mode-c{border-radius:var(--m-r-md)!important;transition:all var(--dur-2) var(--m-ease)}
html[data-style="modern"] .st-mode-c:hover{transform:translateY(-2px);box-shadow:var(--m-sh-2)}
html[data-style="modern"] .st-mode-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--m-accent),0 8px 20px -8px color-mix(in srgb,var(--m-accent) 50%,transparent)!important}

/* ---------- 9. tables of the app pages (not the evaluation sheets) ---------- */
html[data-style="modern"] main table:not(.v11 table):not(.sheet table) thead th,html[data-style="modern"] main table:not(.v11 table):not(.sheet table) tr:first-child>th{background:var(--m-surface-2);color:var(--m-muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-color:var(--m-line-2)}
html[data-style="modern"] main table:not(.v11 table):not(.sheet table) tbody tr{transition:background-color var(--dur-1) var(--m-ease)}
html[data-style="modern"] main table:not(.v11 table):not(.sheet table) tbody tr:hover{background:color-mix(in srgb,var(--m-accent-soft) 55%,transparent)}
html[data-style="modern"] main table:not(.v11 table):not(.sheet table) td{border-color:var(--m-line-2)}

/* ---------- 10. menus ---------- */
html[data-style="modern"] .wb-menu,html[data-style="modern"] [x-show].shadow-lg,html[data-style="modern"] .shadow-lg.rounded-lg[x-show],html[data-style="modern"] [role="menu"]{
  border-radius:var(--m-r-md)!important;border:1px solid var(--m-line)!important;background:color-mix(in srgb,var(--m-surface) 92%,transparent)!important;
  backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);box-shadow:var(--m-sh-3)!important;padding:6px;transform-origin:top center;animation:mDrop .18s var(--m-ease)}
html[data-style="modern"] .wb-menu a,html[data-style="modern"] .wb-menu button,html[data-style="modern"] .wb-menu .mi,html[data-style="modern"] .menu-item{border-radius:var(--m-r-sm);padding:7px 10px;font-weight:500}
html[data-style="modern"] .wb-menu a:hover,html[data-style="modern"] .wb-menu button:hover,html[data-style="modern"] .menu-item:hover{background:var(--m-surface-3)}
html[data-style="modern"] .wb-menu svg{color:var(--m-accent)}
html[data-style="modern"] .wb-menu .hd{color:var(--m-faint);letter-spacing:.08em}
html[data-style="modern"] .wb-menu .sep{background:var(--m-line-2);margin:5px 4px}
html[data-style="modern"] .wb-menu .cur{background:var(--m-accent-soft);color:var(--m-accent-2)}

/* ---------- 11. pop-ups: overlay, dialogs, confirmations ---------- */
html[data-style="modern"] .wb-ov,html[data-style="modern"] .bc-cf-ov,html[data-style="modern"] [role="dialog"]:not(.wb-dlg):not(.bc-cf):not(.bc-pp)>.fixed.inset-0{background:rgba(15,23,42,.32)!important;backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);animation:mFade .2s var(--m-ease)}
html[data-style="modern"] .wb-dlg,html[data-style="modern"] .bc-cf,html[data-style="modern"] .bc-pp{border-radius:var(--m-r-xl);box-shadow:var(--m-sh-4),0 0 0 1px rgba(15,23,42,.06);animation:mPop .28s var(--m-spring) both}
html[data-style="modern"].dark .wb-dlg,html[data-style="modern"].dark .bc-cf,html[data-style="modern"].dark .bc-pp{box-shadow:var(--m-sh-4),0 0 0 1px rgba(255,255,255,.07);background:var(--m-surface)}
html[data-style="modern"] .bc-cf{padding:22px 22px 18px;gap:8px 16px;width:min(440px,100%)}
html[data-style="modern"] .bc-cf-ic{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--h1s),color-mix(in srgb,var(--h3s) 80%,var(--m-surface)));color:var(--m-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-accent) 14%,transparent);font-size:20px}
html[data-style="modern"] .bc-cf-ic.d{background:linear-gradient(135deg,#fff0f0,#ffe3e3);color:var(--m-danger);box-shadow:inset 0 0 0 1px rgba(200,16,46,.16)}
html[data-style="modern"].dark .bc-cf-ic.d{background:var(--m-danger-soft)}
html[data-style="modern"] .bc-cf-t b{font-size:16px;font-weight:650;letter-spacing:-.01em}
html[data-style="modern"] .bc-cf-t p{font-size:13.5px;color:var(--m-muted)}
html[data-style="modern"] .bc-cf-a{margin-top:14px;gap:10px}
html[data-style="modern"] .bc-cf-a .tk-btn,html[data-style="modern"] .bc-pp-ft .tk-btn{padding:8px 16px;border-radius:var(--m-r);font-size:13.5px}
html[data-style="modern"] .wb-dlg>.hd,html[data-style="modern"] .wb-dlg header,html[data-style="modern"] .wb-dlg .wb-dlg-h{border-bottom:1px solid var(--m-line-2);background:transparent!important;color:var(--m-ink)!important}
html[data-style="modern"] .wb-dlg>header button{color:var(--m-muted);width:30px;height:30px;border-radius:8px}
html[data-style="modern"] .wb-dlg>header button:hover{background:var(--m-surface-3);color:var(--m-ink)}
@media (max-width:820px){html[data-style="modern"] .wb-ov:has(> .wb-dlg.wide) .wb-dlg{border-radius:var(--m-r-xl) 0 0 var(--m-r-xl)}}

/* ---------- 12. toasts ---------- */
html[data-style="modern"] .toast,html[data-style="modern"] #shToast,html[data-style="modern"] .sh-toast{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(17,24,39,.92);color:#f8fafc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--m-sh-4);animation:mToast .32s var(--m-spring) both;font-weight:500}
html[data-style="modern"].dark .toast,html[data-style="modern"].dark #shToast,html[data-style="modern"].dark .sh-toast{background:rgba(231,236,245,.95);color:#0f0f0f}

/* ---------- 13. empty states: a small drawn picture above the words ---------- */
html[data-style="modern"] .db-empty{position:relative;padding-top:96px!important;text-align:center;color:var(--m-muted)}
html[data-style="modern"] .db-empty::before{content:"";position:absolute;left:50%;top:14px;width:120px;height:72px;transform:translateX(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cellipse cx='60' cy='66' rx='42' ry='4' fill='%233b5bdb' opacity='.08'/%3E%3Crect x='30' y='14' width='52' height='44' rx='7' fill='%23dfe5fb'/%3E%3Crect x='38' y='8' width='52' height='46' rx='7' fill='%23fff' stroke='%233b5bdb' stroke-opacity='.35' stroke-width='1.5'/%3E%3Crect x='46' y='18' width='26' height='4' rx='2' fill='%233b5bdb' opacity='.55'/%3E%3Crect x='46' y='27' width='36' height='3' rx='1.5' fill='%2394a3b8' opacity='.5'/%3E%3Crect x='46' y='34' width='30' height='3' rx='1.5' fill='%2394a3b8' opacity='.5'/%3E%3Crect x='46' y='41' width='20' height='3' rx='1.5' fill='%2394a3b8' opacity='.5'/%3E%3Ccircle cx='92' cy='14' r='9' fill='%237048e8' opacity='.14'/%3E%3Cpath d='M92 10v8M88 14h8' stroke='%237048e8' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='30' r='3' fill='%230c8599' opacity='.35'/%3E%3Ccircle cx='100' cy='44' r='2' fill='%23e8590c' opacity='.45'/%3E%3C/svg%3E")}
html[data-style="modern"] .db-empty .db-e-ic{display:none}

/* ---------- 14. the workbook (sheets): glass bar, quiet tabs, paper on a soft ground ---------- */
html[data-style="modern"] body:has(.wb-bar){background:var(--m-surface-3)}
/* the toolbar: in the Detailed layout the navy bar of the Classic style (with the number of bidders); the light glass bar only in the Excel layout */
html[data-style="modern"][data-ui="excel"] .wb-bar{background:var(--m-glass);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);color:var(--m-ink);border-bottom:1px solid var(--m-line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 16px -10px rgba(15,23,42,.18);padding:6px 10px;gap:6px}
html[data-style="modern"][data-ui="excel"] .wb-grp{background:var(--m-surface-3);border:1px solid var(--m-line-2);border-radius:var(--m-r);padding:2px 3px}
html[data-style="modern"][data-ui="excel"] .wb-c,html[data-style="modern"][data-ui="excel"] .wb-bar select.wb-c,html[data-style="modern"][data-ui="excel"] .wb-bar input.wb-c{height:28px;border-radius:var(--m-r-sm);border:1px solid transparent;background:transparent;color:var(--m-ink-2);font-weight:600;font-size:12px}
html[data-style="modern"][data-ui="excel"] .wb-bar select.wb-c,html[data-style="modern"][data-ui="excel"] .wb-bar input.wb-c,html[data-style="modern"][data-ui="excel"] .wb-proj{background:var(--m-surface);border-color:var(--m-line);box-shadow:var(--m-sh-1)}
html[data-style="modern"][data-ui="excel"] .wb-c.wb-ic{width:30px}
html[data-style="modern"][data-ui="excel"] .wb-c svg{color:var(--m-ink-2);stroke-width:1.9}
html[data-style="modern"][data-ui="excel"] .wb-c:hover:not(:disabled),html[data-style="modern"][data-ui="excel"] .wb-c[aria-expanded="true"]{background:var(--m-surface);color:var(--m-ink);box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
html[data-style="modern"][data-ui="excel"] .wb-c:hover:not(:disabled) svg{color:var(--m-accent)}
html[data-style="modern"][data-ui="excel"] .wb-c.on,html[data-style="modern"][data-ui="excel"] .wb-c.on:hover:not(:disabled),html[data-style="modern"][data-ui="excel"] .wb-c.wb-primary{background:var(--m-accent);color:#fff;border-color:transparent;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--m-accent) 70%,transparent)}
html[data-style="modern"][data-ui="excel"] .wb-c.on svg,html[data-style="modern"][data-ui="excel"] .wb-c.wb-primary svg{color:#fff}
html[data-style="modern"][data-ui="excel"] .wb-c.wb-help{background:var(--m-accent);border:0;color:#fff}
html[data-style="modern"][data-ui="excel"] .wb-pill{background:var(--m-accent-soft);color:var(--m-accent-2);border-color:transparent;height:22px;padding:0 10px}
html[data-style="modern"][data-ui="excel"] .wb-bar [class*="wb-saved"],html[data-style="modern"][data-ui="excel"] .wb-bar .wb-ring{color:var(--m-ok)}
html[data-style="modern"] .wb-tabs{background:var(--m-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--m-line)}
html[data-style="modern"] .wb-tabs-nav{border-color:var(--m-line-2)}
html[data-style="modern"] .wb-tab{background:transparent;border-color:transparent;color:var(--m-ink-2);border-radius:var(--m-r-sm);margin:3px 2px;padding:6px 11px;font-weight:500}
html[data-style="modern"] .wb-tab:hover{background:var(--m-surface)}
html[data-style="modern"] .wb-tab.on{background:var(--m-surface);color:var(--m-accent-2);font-weight:600;box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line)}
html[data-style="modern"] .wb-tab.on svg{color:var(--m-accent)}
/* the sheet names in full, as in the Classic style */
/* no coloured stripe for the group of each sheet (it read as a bracket on the rounded tabs); the sheet open stays marked */
html[data-style="modern"] .wb-tab[data-part]:not(.on){box-shadow:none}
html[data-style="modern"] .wb-gl{color:var(--m-faint);letter-spacing:.04em;font-weight:600;font-size:10.5px}
html[data-style="modern"][data-tabs="top"] .wb-tabs{border-bottom:1px solid var(--m-line)}
html[data-style="modern"][data-tabs="top"] .wb-tab,html[data-style="modern"][data-tabs="top"] .wb-tab.on{border-radius:var(--m-r-sm)}
@media (min-width:821px){
  html[data-style="modern"][data-tabs="left"] .wb-tabs{border-right:1px solid var(--m-line);background:var(--m-glass);padding:0 6px}
  html[data-style="modern"][data-tabs="left"] .wb-tab{border:0;border-radius:var(--m-r-sm);margin:1px 0;padding:7px 10px}
  html[data-style="modern"][data-tabs="left"] .wb-tab.on{box-shadow:var(--m-sh-1),0 0 0 1px var(--m-line),inset 3px 0 0 var(--m-accent)}
  html[data-style="modern"][data-tabs="left"] .wb-gl{padding:14px 10px 6px}
}
html[data-style="modern"] .wb-area{background:transparent}
html[data-style="modern"] .wb-exp{border-radius:var(--m-r-md)}
html[data-style="modern"] .wb-banner{border-radius:var(--m-r-md);margin:8px 10px 0;border:1px solid var(--m-line);box-shadow:var(--m-sh-1)}
@media screen{
  html[data-style="modern"] .v11 .sheet{border-radius:var(--m-r-lg);border:0;box-shadow:0 0 0 1px var(--m-line),var(--m-sh-2)}
  html[data-style="modern"] .v11 .sheet.ui::before{border-bottom:1px solid var(--m-line-2)!important;background:linear-gradient(100deg,var(--m-accent-soft),var(--m-surface))!important;color:var(--m-accent-2)!important;border-radius:var(--m-r-lg) var(--m-r-lg) 0 0;font-family:var(--m-font);font-weight:600;letter-spacing:.06em}
  /* boxes on the sheets: rounder and calmer, the colours of their state kept */
  html[data-style="modern"] .v11 .in,html[data-style="modern"] .v11 select.in,html[data-style="modern"] .v11 textarea.in{border-radius:7px}
  html[data-style="modern"] .v11 .in:focus{box-shadow:0 0 0 3px var(--m-ring)!important;outline:none}
  html[data-style="modern"] .be-sec{border-radius:var(--m-r-md)}
  html[data-style="modern"] .v11 .tools>button,html[data-style="modern"] .v11 .tools>a.btn{border-radius:var(--m-r-sm);border:1px solid var(--m-line);background:var(--m-surface);color:var(--m-ink-2);box-shadow:var(--m-sh-1);font-family:var(--m-font)}
  html[data-style="modern"] .v11 .tools>button:hover:not(:disabled){border-color:var(--m-accent-soft-2);color:var(--m-accent-2);background:var(--m-surface-2)}
  html[data-style="modern"] .v11 .tools>button:disabled{opacity:.45;box-shadow:none}
}

/* ---------- 14b. Bidder Entry: as in the Detailed mode — the full labels, headings and criteria (no short names) ---------- */

/* ---------- 15. settings panel ---------- */
html[data-style="modern"] .st-row{border-color:var(--m-line-2)}
html[data-style="modern"] .st-ck{border-radius:var(--m-r)}

/* ---------- 16. reduced motion ---------- */
html[data-style="modern"][data-rm] *,html[data-style="modern"][data-rm] *::before,html[data-style="modern"][data-rm] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html[data-style="modern"] *,html[data-style="modern"] *::before,html[data-style="modern"] *::after{animation:none!important;transition:none!important}}

/* Settings ▸ Interface font ▸ Times New Roman also in Modern mode */
html[data-style="modern"][data-font="times"]{--m-font:"Times New Roman",Kalimati,"Nirmala UI","Noto Sans Devanagari",Mangal,serif}

/* ---------- airy layer (Modern mode, request of 6 Nov): ideas from modern product sites — borderless surfaces on a soft
   ground, generous spacing, large radii, layered soft shadows that lift on hover, a glass top bar, pill-shaped active
   menu items, a calmer hero and smooth easing. Brand navy with one red accent; the sheets' document look is untouched. ---------- */
html[data-style="modern"]{--m-gap:20px}
html[data-style="modern"] body:not(:has(.wb-bar)){background:linear-gradient(180deg,#f7f9fc 0,#f2f5fa 100%) fixed}
html[data-style="modern"].dark body:not(:has(.wb-bar)){background:linear-gradient(180deg,#121212 0,#0f0f0f 100%) fixed}
/* the top bar: glass, no rule */
html[data-style="modern"] .sb-main>header:not(.wb-bar){background:rgba(247,249,252,.72)!important;border-bottom-color:transparent!important;backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
html[data-style="modern"].dark .sb-main>header:not(.wb-bar){background:rgba(11,16,32,.7)!important}
/* the side menu: on the ground, pills for the active item */
html[data-style="modern"] aside.sb{background:transparent;border-right-color:transparent}
html[data-style="modern"] aside.sb .nav-link{border-radius:12px;margin:1px 8px;padding-top:7px;padding-bottom:7px;transition:background .22s var(--m-ease),color .22s var(--m-ease),transform .22s var(--m-ease)}
html[data-style="modern"] aside.sb .nav-link:hover{background:rgba(11,58,130,.06);transform:translateX(2px)}
html[data-style="modern"] aside.sb .nav-link-active{background:#fff!important;color:var(--m-accent)!important;box-shadow:var(--m-sh-1),inset 0 0 0 1px rgba(11,58,130,.06)}
html[data-style="modern"].dark aside.sb .nav-link-active{background:var(--m-surface)!important}
/* surfaces: no hairline, soft lift */
html[data-style="modern"] :is(.card,.pl-box,.db-kpi,.db-card,.lr-card,.lt-card){border-color:transparent!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px -8px rgba(15,23,42,.10)!important;
  transition:transform .28s var(--m-ease),box-shadow .28s var(--m-ease)}
html[data-style="modern"] :is(.db-card,.lr-card,.lt-card,.db-kpi):hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 32px -12px rgba(15,23,42,.18)!important}
html[data-style="modern"].dark :is(.card,.pl-box,.db-kpi,.db-card,.lr-card,.lt-card){box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.6)!important}
html[data-style="modern"] .pl-box{padding:20px 22px}
html[data-style="modern"] :is(.db-kpis,.db-grid,.db-cards){gap:var(--m-gap)!important}
html[data-style="modern"] main#main:not(.wb-shell){padding-top:28px;padding-bottom:40px}   /* not the sheet workspace: it starts right under the toolbar */
/* the hero: deeper navy, soft light, round */
html[data-style="modern"] .db-hero{border-radius:22px!important;background:radial-gradient(900px 300px at 100% 0,rgba(156,194,255,.22),transparent 60%),linear-gradient(135deg,#0b3a82 0,#072a60 100%)!important;
  box-shadow:0 20px 40px -20px rgba(7,42,96,.55)!important;padding:28px 30px!important}
/* inputs and buttons: rounder, a soft focus ring */
html[data-style="modern"] :is(.btn,.tk-btn){border-radius:12px;transition:transform .18s var(--m-ease),box-shadow .18s var(--m-ease),background .18s var(--m-ease)}
html[data-style="modern"] :is(.btn,.tk-btn):active{transform:scale(.98)}
html[data-style="modern"] :is(.btn-primary,.tk-btn.primary,.tk-btn.accent){box-shadow:0 6px 16px -8px rgba(11,58,130,.6)}
html[data-style="modern"] body:not(:has(.wb-bar)) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:12px}
html[data-style="modern"] :is(input,select,textarea):focus-visible{box-shadow:0 0 0 4px var(--m-ring)}
/* dialogs and menus: float in */
html[data-style="modern"] dialog.bc-cf-d .bc-cf,html[data-style="modern"] .st-dlg,html[data-style="modern"] [role="menu"]{border-radius:18px!important}
html[data-style="modern"] dialog.bc-cf-d[open] .bc-cf{animation:mPop .28s var(--m-spring)}
@keyframes mPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
html[data-style="modern"][data-rm] *,html[data-style="modern"][data-rm] *::before{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){html[data-style="modern"] *{transition:none!important;animation:none!important}}

/* lower top bars (request of 6 Nov): the page header 48 px (the logo row of the side menu matches), the sheet toolbar 40 px */
html[data-style="modern"]:not([data-ui="excel"]){--tb-h:40px}
html[data-style="modern"] .sb-main>header:not(.wb-bar),html[data-style="modern"] header.sticky:not(.wb-bar){height:48px}
html[data-style="modern"] .sb-brand{height:48px}
html[data-style="modern"]:not([data-ui="excel"]) .wb-bar{height:auto;min-height:40px;padding:3px 8px;gap:4px}
html[data-style="modern"]:not([data-ui="excel"]) .wb-bar :is(.wb-c,.wb-proj,select.wb-c,input.wb-c){height:28px}