/* ============================================================================
     Kanca Portal — visual theme (redesign 2026-10-26, "Data-Dense Dashboard")
     Light, calm, information-first: blue primary + amber accent, slate neutrals, white surfaces, hairline borders,
     compact tables, line icons (SVG sprite in index.html) instead of emoji, visible focus, reduced-motion safe.
     Old token names (--teal, --navy …) are kept as aliases so every existing class and inline style follows the new palette.
     Print / certificate / gantt layouts are kept intact.
     ========================================================================= */
  :root{
    /* brand */
    --primary:#047857;  --primary-600:#059669;  --primary-700:#065f46;
    --primary-50:#ecfdf5;  --primary-100:#d1fae5;
    --accent:#ca8a04;
    --forest:#063f2f; --forest-2:#0b5a43; --lime:#a3e635;
    /* legacy names -> new palette */
    --navy:#0c2a1f;  --navy-2:#173b2d;  --navy-3:#2f4f42;
    --teal:var(--primary);  --teal-2:var(--primary-600);  --teal-dark:var(--primary-700);  --teal-light:var(--primary-50);

    /* surfaces */
    --bg:#f1f6f2;
    --bg-2:#f6faf7;
    --card:#ffffff;
    --line:#dce8e0;
    --line-strong:#bfd3c6;

    /* text (all pass 4.5:1 on white) */
    --text:#0f2219;
    --muted:#44594e;
    --muted-2:#56695f;

    /* semantic */
    --red:#b91c1c;      --red-bg:#fdeeed;
    --amber:#a15a0c;    --amber-bg:#fdf4e3;
    --green:#1d6b43;    --green-bg:#e9f6ee;
    --purple:#5b3fa0;   --purple-bg:#f1edfb;
    --blue:#0e6a7a;     --blue-bg:#e3f4f6;

    /* KPI accent rotation */
    --k1:#34b27b; --k2:#5bbfb3; --k3:#a3c94a; --k4:#e7b54a; --k5:#3f8f6b; --k6:#e8907f;

    /* elevation */
    --sh-1:0 1px 2px rgba(15,23,42,.05);
    --sh-2:0 4px 12px -2px rgba(15,23,42,.10), 0 2px 4px -2px rgba(15,23,42,.06);
    --sh-3:0 18px 48px -12px rgba(15,23,42,.28);
    --sh-teal:0 6px 20px -8px rgba(5,150,105,.5);
    --ring:0 0 0 3px rgba(5,150,105,.2);
    /* soft family used by buttons, avatars, bars and the table tints */
    --soft-blue:#dcf3e6; --soft-blue-hover:#c8ebd7; --soft-blue-line:#a9dcbf; --soft-blue-ink:#064e3b;
    --fill-blue:#34b27b; --fill-green:#82c9a3;
    --row-alt:#f4f9f5; --row-hover:#e4f3e9;

    --radius:10px;
    --radius-lg:16px;
    --radius-sm:6px;
    --ease:cubic-bezier(.4,0,.2,1);
    --sidebar-w:240px;
    --topbar-h:60px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--text); background:var(--bg);
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-variant-numeric:tabular-nums;
  }
  ::selection{background:rgba(5,150,105,.22);}
  img{max-width:100%;}
  /* One visible focus style for everything keyboard-reachable (never removed, only restyled) */
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--primary-600); outline-offset:2px;}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  /* line icons from the sprite in index.html: <svg class="ico"><use href="#i-name"/></svg> */
  .ico{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em;}

  @keyframes modalIn{from{opacity:0; transform:translateY(8px) scale(.985);} to{opacity:1; transform:none;}}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}

  /* ===== App shell: left module sidebar + module content area ===== */
  .app-shell{display:flex; min-height:100vh; align-items:stretch;}
  .module-sidebar{
    flex:none; width:var(--sidebar-w); position:sticky; top:0; align-self:flex-start;
    height:100vh; overflow-y:auto;
    background:var(--card); border-right:1px solid var(--line);
    display:flex; flex-direction:column; padding:14px 12px 14px; gap:0;
    scrollbar-width:thin;
  }
  .module-sidebar-title{padding:2px 6px 14px; margin-bottom:4px; border-bottom:1px solid var(--line); display:flex; align-items:center;}
  .module-sidebar-title img{width:auto; height:auto; max-width:132px; max-height:44px; background:none; padding:0; border-radius:0; box-shadow:none;}
  .nav-group{display:flex; flex-direction:column; gap:2px; margin-top:12px;}
  .nav-group.nav-bottom{margin-top:auto; padding-top:12px; border-top:1px solid var(--line);}
  .nav-group-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); padding:0 10px 4px;}
  .module-btn{
    position:relative; width:100%; background:none; border:none; color:var(--muted); cursor:pointer;
    padding:8px 10px; min-height:38px; border-radius:8px;
    display:flex; align-items:center; gap:11px; text-align:left;
    font-family:inherit; font-size:13px; font-weight:500;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .module-btn-icon{display:inline-flex; width:20px; height:20px; flex:none; align-items:center; justify-content:center; color:var(--muted-2); transition:color .15s var(--ease);}
  .module-btn-icon .ico{width:20px; height:20px;}
  .module-btn-label{line-height:1.2;}
  .module-btn:hover{background:#eef6f1; color:var(--text);}
  .module-btn:hover .module-btn-icon{color:var(--text);}
  .module-btn.active{background:var(--primary-50); color:var(--primary-700); font-weight:600;}
  .module-btn.active .module-btn-icon{color:var(--primary-600);}
  .module-btn.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--fill-blue);}
  /* The whole content area fades in once on load. .module-content is never display-toggled, so switching modules does not replay it. */
  .module-content{flex:1; min-width:0; animation:fadeIn .2s var(--ease) both;}
  .module-pane{min-height:100vh;}

  /* Icon rail: automatic on narrow screens, or chosen with the toggle (html.sidebar-min). Labels stay available to screen readers and as tooltips. */
  .sidebar-foot{padding-top:4px;}
  .sidebar-toggle{position:relative; width:100%; background:none; border:none; color:var(--muted); cursor:pointer; padding:8px 10px; min-height:38px; border-radius:8px; display:flex; align-items:center; gap:11px; text-align:left; font-family:inherit; font-size:13.5px; font-weight:500; transition:background .15s var(--ease), color .15s var(--ease);}
  .sidebar-toggle .module-btn-icon{color:var(--muted-2);}
  .sidebar-toggle:hover{background:#eef6f1; color:var(--text);}
  .sidebar-toggle:hover .module-btn-icon{color:var(--text);}
  .sidebar-toggle .ico-open{display:none;}
  .module-sidebar, .module-sidebar-title{transition:width .18s var(--ease), padding .18s var(--ease);}
  @media(max-width:1100px){ .sidebar-foot{display:none;} }
  @media(max-width:1100px){
    :root{--sidebar-w:64px;}
    .module-sidebar{padding:12px 8px;}
    .module-sidebar-title{justify-content:center; padding:2px 0 12px;}
    .module-sidebar-title img{max-width:44px;}
    .nav-group-label{display:none;}
    .nav-group + .nav-group{border-top:1px solid var(--line); padding-top:8px; margin-top:8px;}
    .module-btn{justify-content:center; padding:9px 0; min-height:42px;}
    .module-btn-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
  }
  html.sidebar-min{--sidebar-w:64px;}
  html.sidebar-min .module-sidebar{padding:12px 8px; scrollbar-width:none;}
  html.sidebar-min .module-sidebar::-webkit-scrollbar{display:none;}
  html.sidebar-min .module-sidebar-title{justify-content:center; padding:2px 0 12px;}
  html.sidebar-min .module-sidebar-title img{max-width:44px;}
  html.sidebar-min .sidebar-toggle{justify-content:center; padding:9px 0; min-height:42px;}
  html.sidebar-min .sidebar-toggle .ico-close{display:none;}
  html.sidebar-min .sidebar-toggle .ico-open{display:block;}
  html.sidebar-min .nav-group-label{display:none;}
  html.sidebar-min .nav-group + .nav-group{border-top:1px solid var(--line); padding-top:8px; margin-top:8px;}
  html.sidebar-min .module-btn{justify-content:center; padding:9px 0; min-height:42px;}
  html.sidebar-min .module-btn-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
  @media(max-width:1100px){ .module-sidebar{scrollbar-width:none;} .module-sidebar::-webkit-scrollbar{display:none;} }
  @media(max-width:640px){
    :root{--sidebar-w:52px;}
    .module-sidebar{padding:10px 5px;}
    .module-sidebar-title img{max-width:36px;}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
    .card{padding:12px 12px 10px;}
    .card .num{font-size:20px;}
  }

  /* ===== Header ===== */
  header{
    position:relative; background:var(--card); color:var(--text);
    padding:18px 28px 14px; border-bottom:1px solid var(--line);
  }
  header h1{margin:0; display:flex; align-items:center; gap:11px; font-size:20px; font-weight:700; letter-spacing:-.015em; color:var(--navy);}
  header h1 .hdr-ico{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none;
    border-radius:8px; background:var(--primary-50); color:var(--primary-600); border:1px solid var(--primary-100);
  }
  header h1 .hdr-ico .ico{width:20px; height:20px;}
  header p{margin:5px 0 0 47px; font-size:13px; color:var(--muted);}
  .role-switcher-slot{position:absolute; top:16px; right:24px; display:flex; align-items:center; gap:10px; z-index:1;}
  .user-chip{display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 5px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2); font-size:12px; color:var(--muted);}
  .user-chip .user-avatar{width:26px; height:26px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); box-shadow:inset 0 0 0 1px var(--soft-blue-line); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase;}
  .user-chip strong{color:var(--text); font-weight:600;}
  .role-switcher-slot select{
    -webkit-appearance:none; appearance:none; background:#fff; color:var(--text);
    border:1px solid var(--line-strong); border-radius:8px; padding:7px 30px 7px 12px; font-size:12px; font-weight:600; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2344594e' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
  }
  .role-switcher-slot select:hover{border-color:var(--muted-2);}
  .role-switcher-slot select option{color:var(--text);}
  @media(max-width:760px){
    header{padding:14px 16px 12px;}
    .role-switcher-slot{position:static; margin:10px 0 0 47px; justify-content:flex-start; flex-wrap:wrap;}
    header p{margin-left:0;}
  }

  /* ===== Auth ===== */
  .auth-screen{
    position:fixed; inset:0; z-index:100; padding:20px;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(700px 420px at 12% 6%, rgba(5,150,105,.10), transparent 62%),
      radial-gradient(700px 420px at 94% 96%, rgba(217,119,6,.08), transparent 62%),
      var(--bg);
  }
  .auth-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:30px 28px; width:100%; max-width:400px; box-shadow:var(--sh-3);
    animation:modalIn .3s var(--ease) both;
  }
  .auth-card h2{margin:0 0 4px; font-size:20px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px;}
  .auth-card h2 .hdr-ico{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:8px; background:var(--primary-50); color:var(--primary-600);}
  .auth-error{
    background:var(--red-bg); color:var(--red); border:1px solid #fecaca; border-radius:var(--radius-sm);
    padding:9px 12px; font-size:12px; margin-bottom:12px;
  }
  .auth-actions{display:flex; flex-direction:column; gap:9px; margin-top:8px;}

  /* ===== Tab nav ===== */
  nav{
    display:flex; gap:2px; background:var(--card); border-bottom:1px solid var(--line);
    padding:0 20px; overflow-x:auto; position:sticky; top:0; z-index:20; scrollbar-width:thin;
  }
  nav button{
    position:relative; border:none; background:none; padding:12px 14px 11px; margin-bottom:-1px;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  }
  nav button:hover{color:var(--text); background:var(--bg-2);}
  nav button.active{color:var(--primary-700); border-bottom-color:#34b27b;}

  main{padding:22px 28px 48px; max-width:1400px; margin:0 auto;}
  /* Some tabs' tables need the full content width instead of the shared cap — the POCs tab (js/poc.js), the Projects tab (js/implementation.js),
     the Calendar tab (js/activity.js) and Requests each toggle this class on their #main element only while that tab is active. */
  #pocMain.wide, #implMain.wide, #activityMain.wide, #requesttechMain.wide{max-width:none;}
  @media(max-width:760px){ main{padding:16px 14px 40px;} }

  /* ===== KPI / stat cards ===== */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px;}
  .card{
    position:relative; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:15px 16px 13px; overflow:hidden; box-shadow:var(--sh-1);
    transition:box-shadow .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
  }
  .card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--kacc,var(--primary-600));}
  .cards .card:nth-child(6n+1){--kacc:var(--k1);}
  .cards .card:nth-child(6n+2){--kacc:var(--k2);}
  .cards .card:nth-child(6n+3){--kacc:var(--k3);}
  .cards .card:nth-child(6n+4){--kacc:var(--k4);}
  .cards .card:nth-child(6n+5){--kacc:var(--k5);}
  .cards .card:nth-child(6n){--kacc:var(--k6);}
  .card .num{font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums;}
  .card .lbl{font-size:12px; color:var(--muted); margin-top:4px; font-weight:500; line-height:1.35;}
  .card.warn{background:var(--card); border-color:#f4d0cc;}
  .card.warn::before{background:#ee97a8;}
  .card.warn .num{color:var(--red);}
  .card.clickable{cursor:pointer;}
  .card.clickable:hover{box-shadow:var(--sh-2); transform:translateY(-1px); border-color:var(--kacc,var(--primary-600));}
  .card.clickable:active{transform:none;}
  .card.clickable:focus-visible{outline-offset:1px;}

  tr.clickable-row{cursor:pointer; transition:background .12s var(--ease);}
  tr.clickable-row:hover{background:var(--primary-50);}

  .section-title{
    font-size:16px; font-weight:600; margin:28px 0 12px; color:var(--navy);
    display:flex; align-items:center; gap:9px; letter-spacing:-.005em;
  }
  .section-title::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--fill-blue);}
  .toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap;}

  /* ===== Buttons ===== */
  .btn{
    background:var(--soft-blue); color:var(--soft-blue-ink); border:1px solid var(--soft-blue-line); border-radius:8px;
    padding:7px 14px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; line-height:1.25;
    transition:background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .btn:hover{background:var(--soft-blue-hover); border-color:#8fd0ad;}
  .btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;}
  .btn.secondary{background:#fff; color:var(--navy-2); border:1px solid var(--line-strong); box-shadow:var(--sh-1);}
  .btn.secondary:hover{background:var(--bg-2); border-color:var(--muted-2);}
  .btn.danger{background:var(--red); border-color:var(--red); color:#fff;}
  .btn.danger:hover{background:#991b1b; border-color:#991b1b; color:#fff;}
  .btn.small{padding:4px 10px; min-height:30px; font-size:12px; border-radius:6px;}
  @media(pointer:coarse){ .btn{min-height:44px;} .btn.small{min-height:40px;} nav button{padding:14px 16px 13px;} .module-btn{min-height:44px;} }

  /* ===== Tables ===== */
  .table-scroll-wrap{overflow-x:auto; border-radius:var(--radius); margin-bottom:0; box-shadow:var(--sh-1); border:1px solid var(--line);}
  table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border-radius:var(--radius); overflow:hidden;}
  .table-scroll-wrap table{border:none; border-radius:0; box-shadow:none;}
  th,td{padding:9px 12px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); vertical-align:top;}
  th{
    background:var(--bg-2); color:var(--muted); font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:.045em; position:relative; white-space:nowrap;
    border-bottom:1px solid var(--line-strong);
  }
  tbody tr{transition:background .1s var(--ease);}
  @media screen{
    table:not(.kv):not(.no-zebra):not(.week-grid) tbody tr:nth-child(even) > td{background:var(--row-alt);}
  }
  table:not(.kv):not(.no-zebra):not(.week-grid) tbody tr:hover > td{background:var(--row-hover);}
  tr:last-child td{border-bottom:none;}
  td .muted-small{color:var(--muted-2);}

  .pagination-bar{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 4px;}
  .pagination-bar[hidden]{display:none;} /* the plain [hidden] UA rule alone loses to .pagination-bar{display:flex} above */
  .pagination-bar .btn.small{min-width:34px;}

  /* ===== Implementation module: RAG, Kanban, Timeline ===== */
  .rag-green{background:var(--green);}
  .rag-amber{background:var(--amber);}
  .rag-red{background:var(--red);}
  .progress-track{background:#e9edf2; border-radius:999px; height:8px; width:100%; overflow:hidden;}
  .progress-fill{height:100%; border-radius:999px; background:var(--fill-blue);}
  .kc-who{display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:var(--text);}
  .kc-avatar{flex:none; width:22px; height:22px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .kc-avatar-none{background:var(--line-strong);}
  .kc-due{flex:none; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--muted); white-space:nowrap;}
  .kc-due-late{background:var(--red-bg); color:var(--red);} .kc-due-soon{background:var(--amber-bg); color:var(--amber);}
  .pa-task{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; margin-bottom:10px; background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:8px; transition:box-shadow .15s var(--ease);}
  .pa-task:hover{box-shadow:var(--sh-1);}
  .pa-task.is-late{border-left-color:var(--red);} .pa-task.is-soon{border-left-color:var(--amber);} .pa-task.is-done{border-left-color:var(--green);}
  .pa-task.is-done .pa-task-title > a, .pa-task.is-done .pa-task-title{color:var(--muted);}
  .pa-task-main{flex:1 1 280px; min-width:0;}
  .pa-task-title{font-weight:700; font-size:13px; color:var(--navy-2); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .pa-task-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}
  .gantt-row{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
  .gantt-label{width:190px; flex:none; font-size:12px;}
  .gantt-label .proj-name{font-weight:700; color:var(--navy-2); display:block;}
  .gantt-label .phase-name{color:var(--muted); font-size:11px;}
  .gantt-track{flex:1; background:#e9edf2; border-radius:6px; height:24px; position:relative; min-width:120px;}
  .gantt-bar{
    position:absolute; top:0; height:100%; border-radius:6px; display:flex; align-items:center;
    padding:0 8px; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden;
  }
  .gantt-bar.done, .gantt-bar.st-done{background:linear-gradient(180deg,#2f9463,var(--green));}
  .gantt-bar.active, .gantt-bar.st-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
  .gantt-bar.upcoming, .gantt-bar.st-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
  .gantt-bar.st-review{background:linear-gradient(180deg,#7b57c4,var(--purple));}

  /* ── Weekly Schedule (24-week grid, shiftable) ── */
  .week-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}
  .week-nav .btn{padding:3px 10px; font-size:11px;}
  .week-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; scrollbar-width:thin; box-shadow:var(--sh-1);}
  .week-grid{border-collapse:separate; border-spacing:0; font-size:11px; width:100%; table-layout:fixed;}
  .week-grid col.wk-c{width:42px;}
  .week-grid col.wk-c0{width:184px;}
  .week-grid th, .week-grid td{padding:0; text-align:center; vertical-align:middle;}
  .week-grid thead .wk-month th{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
    padding:6px 0 4px; border-bottom:1px solid var(--line); background:#f7f9fb;
  }
  .week-grid thead .wk-month th.wk-m-sep{border-left:1px solid var(--line);}
  .week-grid thead .wk-head th{
    background:#f7f9fb; font-weight:700; padding:5px 2px 6px; font-size:11px; line-height:1.2;
    border-bottom:2px solid var(--line); color:var(--navy-2);
  }
  .week-grid thead .wk-head th .wk-date{display:block; font-weight:500; font-size:8.5px; color:var(--muted); margin-top:2px;}
  .week-grid .wk-c0h, .week-grid td.wk-phase{
    text-align:left; padding:8px 12px; white-space:nowrap; position:sticky; left:0; z-index:1;
    box-shadow:1px 0 0 var(--line);
  }
  .week-grid .wk-c0h{background:#f7f9fb; z-index:3; font-weight:800; color:var(--navy-2); font-size:10px; text-transform:uppercase; letter-spacing:.4px;}
  .week-grid td.wk-phase{background:#fff; font-weight:700; color:var(--navy-2); font-size:11.5px;}
  .week-grid td.wk-phase .wk-sub{display:block; font-weight:500; font-size:9.5px; color:var(--muted); margin-top:1px;}
  .week-grid tbody tr:nth-child(even) td.wk-phase{background:#fbfcfd;}
  .week-grid tbody tr:hover td{background:#eef4f5;}
  .week-grid tbody tr:hover td.wk-phase{background:#e7eff0;}
  .week-grid tbody td.wk-cell{height:34px; border-bottom:1px solid var(--line); position:relative;}
  .week-grid tbody td.wk-cell .wk-seg{position:absolute; top:8px; bottom:8px; left:-1px; right:-1px;}
  .week-grid tbody td.wk-s0 .wk-seg{left:4px; border-top-left-radius:7px; border-bottom-left-radius:7px;}
  .week-grid tbody td.wk-s1 .wk-seg{right:4px; border-top-right-radius:7px; border-bottom-right-radius:7px;}
  .week-grid .wk-seg.tone-todo{background:linear-gradient(180deg,#aab4c1,#93a0af);}
  .week-grid .wk-seg.tone-inprogress{background:linear-gradient(180deg,#e0952f,#c9791f);}
  .week-grid .wk-seg.tone-review{background:linear-gradient(180deg,#7b57c4,#5b3a9c);}
  .week-grid .wk-seg.tone-done{background:linear-gradient(180deg,#2f9463,#1c7a4d);}
  .week-grid tbody td.wk-cell.wk-now, .week-grid thead th.wk-now{background:rgba(15,107,114,.07);}
  .week-grid thead th.wk-now{box-shadow:inset 0 -3px 0 var(--teal);}
  .week-grid td.wk-cell.wk-now::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--teal); opacity:.55;}
  .week-legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; font-size:11px; color:var(--muted);}
  .week-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
  .week-legend i.tone-todo{background:#9aa6b5;}
  .week-legend i.tone-inprogress{background:#c9791f;}
  .week-legend i.tone-review{background:#5b3a9c;}
  .week-legend i.tone-done{background:#1c7a4d;}
  .week-legend i.tone-now{background:transparent; box-shadow:inset 0 0 0 2px var(--teal);}

  /* ── Timeline: all projects (today line, progress, past-plan, target diamond) and the actual line in the weekly grid ── */
  .tl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:8px 10px 6px; scrollbar-width:thin;}
  .tl-inner{position:relative;}
  .tl-head{display:flex; gap:10px; margin-bottom:6px;}
  .tl-head-label{width:190px; flex:none;}
  .tl-axis{position:relative; flex:1; height:34px; border-bottom:1px solid var(--line);}
  .tl-tick{position:absolute; top:0; transform:translateX(3px); font-size:10px; font-weight:700; color:var(--muted); white-space:nowrap;}
  .tl-tick.strong{color:var(--navy-2);}
  .tl-today-tag{position:absolute; top:15px; transform:translateX(-50%); font-size:9px; font-weight:800; background:#a5281c; color:#fff; padding:1px 5px; border-radius:8px; z-index:4; white-space:nowrap;}
  .tl-body{position:relative;}
  .tl-overlay{position:absolute; left:200px; right:0; top:0; bottom:0; pointer-events:none; z-index:1;}
  .tl-vline{position:absolute; top:0; bottom:0; width:1px; background:var(--line); opacity:.7;}
  .tl-vline.strong{opacity:1; background:var(--muted);}
  .tl-today{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--red); z-index:2;}
  .tl-body .gantt-label{position:sticky; left:0; z-index:3; background:var(--card);}
  .tl-body .gantt-track{z-index:2;}
  .tl-bar{padding:0; overflow:hidden;}
  .tl-fill{position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.28);}
  .tl-bar-text{position:relative; padding:0 6px; font-size:10px;}
  .tl-late{position:absolute; top:5px; bottom:5px; border:1px solid var(--red); border-left:none; border-radius:0 5px 5px 0; background:repeating-linear-gradient(45deg, rgba(200,50,50,.55) 0 5px, rgba(200,50,50,.2) 5px 10px);}
  .tl-ms{position:absolute; top:50%; width:11px; height:11px; margin:-6px 0 0 -6px; transform:rotate(45deg); background:var(--navy-2); border:2px solid var(--card); box-shadow:0 0 0 1px var(--navy-2); z-index:3;}
  .tl-ms.bad{background:var(--red); box-shadow:0 0 0 1px var(--red);} .tl-ms.ok{background:var(--green); box-shadow:0 0 0 1px var(--green);}
  .tl-flag{font-size:10px; font-weight:800; margin-left:4px;} .tl-flag.bad{color:var(--red);} .tl-flag.warn{color:var(--amber);}
  .week-legend i.tl-key-fill{background:rgba(0,0,0,.35);}
  .week-legend i.tl-key-late{background:repeating-linear-gradient(45deg, rgba(200,50,50,.7) 0 3px, rgba(200,50,50,.25) 3px 6px);}
  .week-legend i.tl-key-ms{width:9px; height:9px; transform:rotate(45deg); border-radius:1px; background:var(--navy-2);}
  .week-legend i.tone-act{background:var(--navy-2); height:4px; vertical-align:2px;} .week-legend i.tone-act.late{background:var(--red);}
  .week-grid tbody td.wk-cell .wk-act{position:absolute; left:-1px; right:-1px; bottom:3px; height:4px; background:var(--navy-2); border-radius:2px;}
  .week-grid tbody td.wk-cell .wk-act.late{background:var(--red);}

  /* ── Knowledge Base (forum) ── */
  .kb-search{flex:1; min-width:220px; max-width:520px;}
  .kb-search input, .kb-composer textarea, .kb-compose textarea, .kb-edit-reply{width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .kb-search input:focus, .kb-composer textarea:focus, .kb-compose textarea:focus, .kb-edit-reply:focus{outline:none; border-color:#14573f; box-shadow:0 0 0 3px rgba(5,150,105,.18);}
  .kb-cats{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px;}
  .kb-cat{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer;}
  .kb-cat span{color:var(--muted); font-weight:500; margin-left:3px;}
  .kb-cat.on{background:#14573f; color:#fff; border-color:#14573f;} .kb-cat.on span{color:#dbe3ee;}
  .kb-tagbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:2px 0 12px;}
  .kb-tag{border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:5px; padding:1px 7px; font-size:11px; cursor:pointer;}
  .kb-tag span{opacity:.7; margin-left:2px;} .kb-tag.on, .kb-tag:hover{border-color:var(--navy-2); color:var(--navy-2);}
  .kb-feed{display:flex; flex-direction:column; gap:8px;}
  .kb-card{display:flex; gap:12px; align-items:stretch; border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:12px 14px; cursor:pointer; box-shadow:var(--sh-1);}
  .kb-card:hover{border-color:var(--line-strong);}
  .kb-card.pinned{border-left:3px solid var(--amber);}
  .kb-stat{width:62px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; padding:4px 2px; color:var(--muted);}
  .kb-stat strong{font-size:17px; color:var(--text); line-height:1.1;} .kb-stat span{font-size:10px; text-transform:uppercase; letter-spacing:.3px; font-weight:700;}
  .kb-stat.replied{border-color:var(--green); color:var(--green);} .kb-stat.replied strong{color:var(--green);}
  .kb-stat.solved{background:#1d6b43; border-color:#1d6b43; color:#fff;} .kb-stat.solved strong{color:#fff;}
  .kb-card-main{flex:1; min-width:0;}
  .kb-card-title{font-size:14px; font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .kb-card-title a{color:var(--navy-2); text-decoration:none;} .kb-card-title a:hover{text-decoration:underline;}
  .kb-excerpt{color:var(--muted); font-size:12.5px; margin:3px 0 6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .kb-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px;}
  .kb-product{font-size:11px; font-weight:700; color:var(--navy-2); border:1px solid var(--line); border-radius:5px; padding:1px 7px; background:var(--card);}
  .kb-by{display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; margin-left:auto;}
  .kb-avatar{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#14573f; color:#fff; font-size:11px; font-weight:800; flex:none;}
  .kb-avatar.sm{width:22px; height:22px; font-size:9px;}
  .kb-pager{display:flex; gap:12px; align-items:center; justify-content:center; margin-top:12px;}
  .kb-post, .kb-reply{display:flex; gap:14px; border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:10px; box-shadow:var(--sh-1);}
  .kb-reply.accepted{border-color:var(--green); box-shadow:0 0 0 1px var(--green);}
  .kb-accepted-tag{color:var(--green); font-weight:800; font-size:12px; margin-bottom:6px;}
  .kb-post-main{flex:1; min-width:0;}
  .kb-title{font-size:20px; line-height:1.3; margin:0 0 8px; color:var(--navy-2);}
  .kb-byline{display:flex; gap:8px; align-items:center; margin:10px 0;}
  .kb-vote{width:54px; flex:none; align-self:flex-start; display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:8px; padding:6px 2px; cursor:pointer;}
  .kb-vote strong{font-size:16px; color:var(--text);} .kb-vote span:last-child{font-size:9px; text-transform:uppercase; font-weight:700;} .kb-vote-ico{font-size:12px;}
  .kb-vote:hover:not(:disabled){border-color:var(--navy-2);} .kb-vote.on{background:#14573f; border-color:#14573f; color:#fff;} .kb-vote.on strong{color:#fff;}
  .kb-vote:disabled{cursor:default; opacity:.65;}
  .kb-body{font-size:13.5px; line-height:1.65; color:var(--text); overflow-wrap:anywhere;}
  .kb-body p{margin:0 0 10px;} .kb-body ul, .kb-body ol{margin:0 0 10px; padding-left:22px;} .kb-body h5{font-size:14px; margin:14px 0 6px; color:var(--navy-2);}
  .kb-body blockquote{margin:0 0 10px; padding:4px 12px; border-left:3px solid var(--line-strong); color:var(--muted);}
  .kb-body code{background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:0 4px; font-size:12px;}
  .kb-code{border:1px solid var(--line); border-radius:6px; margin:0 0 12px; overflow:hidden;}
  .kb-code-head{display:flex; justify-content:space-between; align-items:center; background:var(--bg-2); padding:3px 8px; font-size:11px; color:var(--muted); border-bottom:1px solid var(--line);}
  .kb-code pre{margin:0; padding:10px 12px; overflow-x:auto; background:var(--card);} .kb-code pre code{background:none; border:0; padding:0; font-size:12px; line-height:1.5; white-space:pre;}
  .kb-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px;}
  .kb-mod{margin-left:auto; display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px;}
  .kb-composer, .kb-compose{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:14px; margin-top:12px;}
  .kb-composer textarea, .kb-compose textarea{width:100%; font-family:inherit;}
  .kb-hint{font-size:11.5px; color:var(--muted); margin-top:5px;}
  .kb-editor-tabs{display:flex; gap:4px; margin-bottom:4px;}
  .kb-editor-tabs button{border:1px solid var(--line); background:var(--bg-2); color:var(--muted); border-radius:6px 6px 0 0; padding:3px 12px; font-size:12px; cursor:pointer;}
  .kb-editor-tabs button.on{background:var(--card); color:var(--text); font-weight:700;}
  .kb-preview{border:1px solid var(--line); border-radius:6px; padding:10px 12px; min-height:160px;}
  .kb-flash{border-color:var(--green); color:var(--green); font-weight:600;}
  .kb-board th.num, .kb-board td.num{text-align:right;} .kb-rank{font-size:16px; font-weight:800; width:46px;}
  .kb-board tr.kb-me td{background:var(--blue-bg);}
  .kb-level{display:inline-block; border-radius:999px; padding:1px 10px; font-size:11px; font-weight:800; border:1px solid var(--line); background:var(--bg-2); color:var(--muted);}
  .kb-level.lv-contributor{background:var(--blue-bg); color:var(--blue); border-color:var(--blue);} .kb-level.lv-expert{background:var(--purple-bg); color:var(--purple); border-color:var(--purple);}
  .kb-level.lv-guru{background:var(--amber-bg); color:var(--amber); border-color:var(--amber);}
  .kb-badge{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; margin-right:3px; background:var(--amber-bg); color:var(--amber); font-size:12px; font-weight:800; border:1px solid var(--amber);}
  .kb-badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; margin-bottom:16px;}
  .kb-badge-card{display:flex; gap:10px; align-items:center; border:1px solid var(--line); background:var(--card); border-radius:8px; padding:8px 10px; opacity:.55; filter:grayscale(1);}
  .kb-badge-card.on{opacity:1; filter:none; border-color:var(--amber);}
  .kb-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .kb-tile{border:1px solid var(--line); background:var(--card); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; box-shadow:var(--sh-1);}
  .kb-tile span{font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:.3px;} .kb-tile strong{font-size:24px; color:var(--navy-2);} .kb-tile small{color:var(--muted); font-size:11px;}
  .kb-rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:18px;} .kb-rules ul{margin:6px 0; padding-left:18px; font-size:12.5px; line-height:1.7;}
  @media (max-width:700px){ .kb-card{flex-wrap:wrap;} .kb-by{margin-left:0;} .kb-post, .kb-reply{flex-direction:column;} .kb-vote{flex-direction:row; width:auto; gap:8px; padding:4px 10px;} .kb-mod{margin-left:0; border-left:0; padding-left:0;} }

  .cap-scroll{overflow-x:auto; max-width:100%;}   /* Capacity week detail: wide tables scroll inside the modal on a phone */
  /* ---- Notes: a private notebook (js/notes.js). List on the left, the open note on the right; on a phone one at a time. ---- */
  .nt-wrap{display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:16px; align-items:start;}
  .nt-side, .nt-pane{border:1px solid var(--line); background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:var(--sh-1);}
  .nt-side{display:flex; flex-direction:column; gap:10px; position:sticky; top:8px; max-height:calc(100vh - 24px);}
  .nt-side-head{display:flex; gap:8px;} .nt-side-head input{flex:1; min-width:0; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .nt-views{display:flex; gap:4px; flex-wrap:wrap;}
  .nt-view{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; cursor:pointer;}
  .nt-view span{color:var(--muted); font-weight:500; margin-left:3px;} .nt-view.on{background:#14573f; color:#fff; border-color:#14573f;} .nt-view.on span{color:#dbe3ee;}
  .nt-tags{margin:0;}
  .nt-list{display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:80px;}
  .nt-card{display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--line); background:var(--bg-2); color:var(--text); border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit;}
  .nt-card:hover{border-color:var(--navy-2);} .nt-card.on{border-color:#14573f; box-shadow:0 0 0 2px rgba(5,150,105,.18); background:var(--card);}
  .nt-card-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline;} .nt-card-top strong{font-size:13px; overflow-wrap:anywhere;}
  .nt-pin{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--amber); white-space:nowrap;}
  .nt-card-snip{font-size:12px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
  .nt-card-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
  .nt-chip{display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:5px; padding:0 6px; font-size:11px;}
  .nt-count{font-size:11px; font-weight:700; color:var(--blue);} .nt-count.all{color:var(--green);}
  .nt-side-foot{display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap;}
  .nt-pane{min-height:320px;} .nt-empty{padding:60px 20px; text-align:center;}
  .nt-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px;} .nt-bar-actions{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap;}
  .nt-back{display:none;}
  .nt-status{font-size:12px; color:var(--muted);} .nt-status.ok{color:var(--green);} .nt-status.warn{color:var(--red); font-weight:600;}
  .nt-title{margin:4px 0 2px; font-size:20px; overflow-wrap:anywhere;} .nt-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .nt-title-in, .nt-body-in, .nt-tags-in{width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:14px;}
  .nt-title-in{font-weight:700; font-size:16px; margin-bottom:8px;}
  .nt-body-in{min-height:220px; resize:vertical; line-height:1.55; margin:8px 0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;}
  .nt-tags-in{margin-bottom:8px; font-size:13px;}
  .nt-title-in:focus, .nt-body-in:focus, .nt-tags-in:focus, .nt-side-head input:focus{outline:none; border-color:#14573f; box-shadow:0 0 0 3px rgba(5,150,105,.18);}
  .nt-tools{display:flex; gap:6px; flex-wrap:wrap;}
  .nt-task{display:flex; gap:8px; align-items:flex-start; margin:0 0 4px; cursor:pointer;} .nt-task input{margin-top:4px; width:auto;}
  .nt-task.done span{text-decoration:line-through; color:var(--muted);}
  .nt-conflict{border-color:var(--amber); margin-bottom:10px;}
  @media (max-width:860px){
    .nt-wrap{grid-template-columns:1fr;} .nt-side{position:static; max-height:none;}
    .nt-wrap.nt-has-note .nt-side{display:none;} .nt-wrap:not(.nt-has-note) .nt-pane{display:none;}
    .nt-back{display:inline-flex;}
  }

  .col-resizer{
    position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize;
    user-select:none; touch-action:none; z-index:2;
  }
  .col-resizer:hover, .col-resizer.resizing{background:var(--teal);}
  th.sortable{cursor:pointer; padding-right:18px;}
  th.sortable:hover{background:#dcecec;}
  .th-sort-indicator{font-size:11px; color:var(--navy-2); margin-left:3px;}
  a.cell-link{color:var(--navy-2); font-weight:700; text-decoration:none;}
  a.cell-link:hover{text-decoration:underline; color:var(--teal);}

  /* ===== Badges ===== */
  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
    font-size:12px; font-weight:600; white-space:nowrap; letter-spacing:.01em; line-height:1.5;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.07);
  }
  .b-red{background:var(--red-bg); color:var(--red); box-shadow:inset 0 0 0 1px #f4d0cc;}
  .b-amber{background:var(--amber-bg); color:var(--amber); box-shadow:inset 0 0 0 1px #f1deb4;}
  .b-green{background:var(--green-bg); color:var(--green); box-shadow:inset 0 0 0 1px #cbe8d7;}
  .b-gray{background:#eef6f1; color:var(--muted);}
  .b-purple{background:var(--purple-bg); color:var(--purple); box-shadow:inset 0 0 0 1px #ddd5f3;}
  .b-blue{background:var(--blue-bg); color:var(--blue); box-shadow:inset 0 0 0 1px #cddcf8;}
  .b-gold{background:#fdf1cf; color:#7c5311; box-shadow:inset 0 0 0 1px #f1deb4;}

  /* ===== Modal + forms ===== */
  .modal-bg{
    position:fixed; inset:0; background:rgba(15,23,42,.46); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; padding:16px; z-index:50; overflow-y:auto;
  }
  .modal-bg.open{display:flex; animation:fadeIn .15s var(--ease);}
  .modal{
    background:#fff; border-radius:var(--radius-lg); padding:22px; width:100%; max-width:480px;
    max-height:88vh; overflow-y:auto; margin:auto;
    box-shadow:var(--sh-3); border:1px solid var(--line);
    animation:modalIn .22s var(--ease) both;
  }
  /* ----- Wide detail modal (Implementation project detail) ----- */
  .modal.modal-wide{max-width:1060px; padding:0; overflow-x:hidden;}
  .modal.modal-form{max-width:900px; padding:0; overflow-x:hidden;}
  .modal.modal-mid{max-width:760px; padding:0; overflow-x:hidden;}
  .pd-hero{
    position:relative; color:var(--text); padding:22px 28px 18px;
    background:#f6f9ff; border-bottom:1px solid var(--primary-100);
  }
  .modal .pd-hero h3{margin:2px 40px 4px 0; padding:0; border:none; color:var(--navy); font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3;}
  .pd-eyebrow{display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:12px; font-weight:600; color:#0f7a55;}
  .pd-sub{font-size:13px; color:var(--muted);}
  .pd-eyebrow .ico, .pd-sub .ico{width:14px; height:14px;}
  .pd-hero-badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
  .pd-chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:#fff; color:var(--navy-2); box-shadow:inset 0 0 0 1px var(--line-strong);}
  .pd-chip-red{background:var(--red-bg); color:var(--red); box-shadow:inset 0 0 0 1px #fecaca;}
  .pd-close{position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; background:transparent; color:var(--muted-2); font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s var(--ease), color .15s var(--ease);}
  .pd-close:hover{background:rgba(15,23,42,.07); color:var(--text);}
  .pd-progress{height:6px; border-radius:99px; background:#e7eefb; margin-top:16px; overflow:hidden;}
  .pd-progress-fill{height:100%; border-radius:99px; background:var(--fill-blue); transition:width .4s var(--ease);}
  .pd-progress-label{font-size:12px; margin-top:6px; color:var(--muted); font-weight:600;}
  .pd-body{padding:20px 28px 24px;}
  /* tabs of the project popup (Overview / Scope of Work / Out of Scope / Budget) — between the hero's progress bar and the cards */
  .pd-tabs{display:flex; gap:2px; padding:0 28px; border-bottom:1px solid var(--line); background:var(--card); overflow-x:auto; position:sticky; top:0; z-index:2;}
  .pd-tabs button{appearance:none; border:none; background:none; cursor:pointer; padding:12px 16px 11px; font:inherit; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;}
  .pd-tabs button:hover{color:var(--text); background:var(--bg-2);}
  .pd-tabs button.active{color:var(--primary-700); border-bottom-color:#34b27b;}
  .pd-pane[hidden]{display:none;}
  .pd-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px;}
  .pd-kpi{position:relative; display:flex; flex-direction:column; justify-content:flex-start; background:#fff; border:1px solid var(--line); border-top:3px solid var(--ac,var(--primary-600)); border-radius:var(--radius); padding:11px 14px 10px;}
  .pd-kpi-v{order:1;} .pd-kpi-l{order:2;} .pd-kpi > :not(.pd-kpi-l):not(.pd-kpi-v){order:3;}
  .pd-kpi-l{font-size:12px; font-weight:500; color:var(--muted); margin-top:2px; line-height:1.35;}
  .pd-kpi-v{font-size:16px; font-weight:600; color:var(--navy); word-break:break-word; line-height:1.3;}
  .pd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-bottom:16px;}
  .pd-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--sh-1); min-width:0;}
  .pd-card h4{margin:0 0 12px; font-size:13px; font-weight:700; color:var(--navy-2); padding-bottom:8px; border-bottom:1px solid var(--line);}
  .pd-kvgrid{display:grid; grid-template-columns:120px 1fr; gap:9px 12px; align-items:center;}
  .pd-k{font-size:12px; font-weight:700; color:var(--muted);}
  .pd-v{font-size:13px; color:var(--text); word-break:break-word;}
  .pd-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .pd-eng{display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:999px; background:var(--teal-light); font-size:12px; font-weight:600; color:var(--navy-2);}
  .pd-avatar{width:24px; height:24px; border-radius:50%; background:var(--soft-blue); color:var(--soft-blue-ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-phases{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto;}
  .pd-phase{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; background:var(--bg-2);}
  .pd-phase.is-active{border-color:var(--soft-blue-line); background:var(--soft-blue);}
  .pd-phase.is-done{background:var(--green-bg); border-color:#cbe8d7;}
  .pd-phase-dot{flex:none; width:24px; height:24px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-phase.is-active .pd-phase-dot{background:var(--fill-blue); color:var(--soft-blue-ink);}
  .pd-phase.is-done .pd-phase-dot{background:var(--fill-green); color:#14532d;}
  .pd-item{border:1px solid var(--line); border-radius:8px; padding:8px 11px; margin-bottom:8px; font-size:12px; background:var(--bg-2);}
  .modal-mid .pd-kpis{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));}
  /* Scope of Work: a table of Product + Solution (click a row for the popup with the two texts side by side — line breaks kept, text never HTML) */
  .sow-row{cursor:pointer;}
  .sow-row:hover td, .sow-row:focus td{background:var(--bg-2);}
  .sow-cols{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;}
  .sow-label{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--green); margin-bottom:3px;}
  .sow-label.out{color:var(--red);}
  .sow-text{white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5;}
  .sow-foot{margin-top:10px;}
  .sow-sol{border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; margin:10px 0; background:var(--card);}
  .sow-sol summary{cursor:pointer; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .sow-sol[open] summary{margin-bottom:8px;}
  .sow-sol-actions{margin-top:10px;}
  @media (max-width:700px){ .sow-cols{grid-template-columns:1fr;} }
  /* Request Sizing: filter chips, the queue table, the result lines, the (switched-off) upload zone, the conversation */
  .sz-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .sz-chip{appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; padding:5px 12px; border-radius:99px; border:1px solid var(--line-strong); background:var(--card); color:var(--muted);}
  .sz-chip:hover{color:var(--text); background:var(--bg-2);}
  .sz-chip.on{background:var(--navy-2); color:#fff; border-color:var(--navy-2);}
  html[data-theme="dark"] .sz-chip.on{background:#0f7a55; border-color:#0f7a55;}
  .sz-n{display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:99px; font-size:11px; line-height:18px; text-align:center; background:rgba(127,127,127,.2);}
  .sz-row{cursor:pointer;}
  .sz-row:hover td, .sz-row:focus td{background:var(--bg-2);}
  .sz-lines{width:100%; table-layout:fixed;}
  .sz-lines th:first-child, .sz-lines td:first-child{width:34px;}
  .sz-lines th.r, .sz-lines td.r{text-align:right; width:96px;}
  .sz-lines th:last-child:not(.r){width:48px;}
  .sz-lines input{width:100%; box-sizing:border-box;}
  .sz-lines input.sz-qty{text-align:right;}
  .sz-line-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .sz-paste{margin-top:10px; padding:10px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2);}
  .sz-paste textarea{width:100%; min-height:90px; box-sizing:border-box; margin-top:6px; font-family:ui-monospace,Menlo,monospace; font-size:12px;}
  .sz-lbl{display:block; margin:12px 0 4px; font-size:12px; font-weight:700; color:var(--muted);}
  #szResultNote, #szMsgBox{width:100%; box-sizing:border-box; min-height:64px;}
  .sz-note{margin-top:12px; padding:9px 11px; border-radius:8px; background:var(--bg-2); font-size:13px;}
  .sz-note .sz-lbl{margin-top:0;}
  .sz-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:12px;}
  .sz-lines input, #szResultNote, #szMsgBox, .sz-paste textarea, .sz-assign select{padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px;}
  .sz-lines input:focus, #szResultNote:focus, #szMsgBox:focus, .sz-paste textarea:focus, .sz-assign select:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .sz-paste textarea{font-family:ui-monospace,Menlo,monospace; font-size:12px;}
  .sz-drop{display:flex; align-items:center; gap:12px; padding:14px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2); position:relative;}
  .sz-drop.is-off{opacity:.6; cursor:not-allowed;}
  .sz-drop .ico{width:22px; height:22px; flex:none;}
  .sz-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:not-allowed;}
  .sz-thread{display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:280px; overflow-y:auto;}
  .sz-msg{padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); font-size:13px;}
  .sz-msg.is-question{border-color:#f3c9c1; background:var(--red-bg);}
  html[data-theme="dark"] .sz-msg.is-question{border-color:#6a3238;}
  .sz-msg-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:2px;}
  .sz-assign{display:flex; gap:8px; flex-wrap:wrap;}
  .sz-assign select{flex:1; min-width:200px;}
  /* Asset detail popup (Maintenance > Assets): tab counts, PM timeline, clickable CM cards, empty states */
  .pd-tab-count{display:inline-block; min-width:18px; margin-left:4px; padding:0 6px; border-radius:99px; font-size:11px; font-weight:700; line-height:18px; text-align:center; background:var(--bg-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);}
  .pd-tabs button.active .pd-tab-count{background:var(--soft-blue); color:var(--soft-blue-ink);}
  .pd-empty{padding:18px 12px; text-align:center; font-size:13px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-2);}
  .pd-item-click{cursor:pointer; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
  .pd-item-click:hover{border-color:var(--soft-blue-line); box-shadow:var(--sh-1);}
  .pd-tl{position:relative; margin-left:7px; padding-left:20px; border-left:2px solid var(--line);}
  .pd-tl-item{position:relative; padding:0 0 16px; font-size:12.5px;}
  .pd-tl-item:last-child{padding-bottom:2px;}
  .pd-tl-dot{position:absolute; left:-27px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--fill-green,#82c9a3); box-shadow:0 0 0 3px var(--card);}
  .pd-tl-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
  .pd-tl-note{margin-top:4px; padding:6px 9px; border-radius:8px; background:var(--bg-2); white-space:pre-wrap; color:var(--text);}

  /* Activity Dashboard — Top 10 / Bottom 10 Performance leaderboards */
  .lb-section{--lb-ac:var(--teal); margin-top:26px;}
  .lb-section.bottom{--lb-ac:#8a95a4;}
  .lb-banner{padding:2px 0 10px 12px; margin-bottom:12px; border-left:4px solid var(--lb-ac); border-bottom:1px solid var(--line);
    border-bottom-left-radius:0;}
  .lb-banner-t{font-size:16px; font-weight:700; color:var(--navy-2); letter-spacing:.1px;}
  .lb-banner-s{font-size:12px; color:var(--muted); margin-top:2px;}
  .lb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; align-items:start;}
  .lb-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px 6px;
    box-shadow:var(--sh-1); min-width:0;}
  .lb-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px;}
  .lb-title{font-size:13px; font-weight:700; color:var(--navy-2);}
  .lb-sub{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
  .lb-row{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);}
  .lb-rank{font-size:12px; font-weight:600; color:var(--muted-2); font-variant-numeric:tabular-nums; text-align:left;}
  .lb-rank.lead{font-weight:700; color:var(--navy-2);}
  .lb-name{display:block; font-size:13px; font-weight:600; color:var(--navy-2); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lb-name:hover{color:var(--teal); text-decoration:underline;}
  .lb-track{height:5px; border-radius:99px; background:#eef0f3; margin-top:6px; overflow:hidden;}
  .lb-fill{height:100%; border-radius:99px; background:var(--lb-ac); min-width:3px;}
  .lb-val{text-align:right; font-size:13px; font-weight:700; color:var(--navy-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .lb-val small{display:block; font-size:11px; font-weight:500; color:var(--muted);}
  .pd-act{display:flex; gap:14px; align-items:flex-start; padding:11px 13px; margin-bottom:9px; border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:8px; background:var(--bg-2);}
  .pd-act-h{font-size:16px; font-weight:700; color:var(--navy-2);}
  .modal.modal-form.fm-sm{max-width:540px;}
  .modal.modal-form.fm-md{max-width:740px;}
  .fm-hero-danger{background:#fef6f5; border-bottom-color:#fecaca;}
  .fm-hero-danger h3, .fm-hero-danger .pd-eyebrow{color:var(--red) !important;}
  .fm-body{background:var(--bg-2);}
  .fm-section > .notice:first-child{margin-top:0;}
  .fm-section > h4:first-child{margin-top:0;}
  .fm-section > .field:last-child, .fm-section > .field-row:last-child{margin-bottom:0;}
  .fm-hero{padding:20px 28px 18px;}
  .fm-body{padding:20px 28px 0;}
  .fm-section{margin-bottom:16px;}
  .fm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 16px;}
  .fm-grid .field{margin-bottom:0; min-width:0;}
  .fm-grid .fm-full{grid-column:1/-1;}
  .fm-grid.fm-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  @media (max-width:560px){ .fm-grid.fm-2{grid-template-columns:1fr;} }
  .poc-unit-row{margin-bottom:14px;}
  .poc-unit-type{display:flex; gap:18px; margin-bottom:8px;}
  .field .poc-unit-type label{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--navy-2); cursor:pointer; margin:0;}
  .field .poc-unit-type input[type="checkbox"]{width:16px; height:16px; padding:0; margin:0; flex:none; accent-color:var(--teal); box-shadow:none;}
  .poc-unit-row .poc-unit-hint:empty{display:none;}
  .poc-unit-row .poc-unit-hint{margin-top:4px;}
  .fm-subbox{margin:4px 0 14px; padding:14px 16px; border:1px dashed var(--teal-2); border-radius:12px; background:rgba(230,243,244,.55);}
  .fm-subtitle{font-size:12px; font-weight:700; color:var(--navy-2); margin-bottom:10px;}
  .fm-req{color:var(--red); font-weight:700;}
  .fm-money{display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-2); overflow:hidden; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
  .fm-money span{display:flex; align-items:center; padding:0 12px; font-weight:700; font-size:12px; color:var(--teal); background:var(--teal-light); border-right:1px solid var(--line);}
  .fm-money input{border:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important;}
  .fm-money:focus-within{border-color:var(--teal); box-shadow:0 0 0 3px rgba(5,150,105,.16); background:#fff;}
  .fm-actions{position:sticky; bottom:0; z-index:2; margin:0 -28px; padding:14px 28px; background:rgba(255,255,255,.97); backdrop-filter:blur(4px); border-top:1px solid var(--line);}
  .fm-body > #modalErrorMsg{margin-bottom:14px;}
  /* Compact icon-only "remove row" button used in repeatable form rows (engineers, units, licenses, devices, PICs) */
  .btn.row-remove{width:34px; height:34px; min-width:34px; padding:0; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; border-radius:8px;}
  .field-row:has(> .row-remove){grid-template-columns:1fr 1fr 34px; align-items:end;}
  .field-row:has(> .row-remove):has(> .field:only-of-type){grid-template-columns:1fr 34px;}
  .field-row:has(> .row-remove):has(> .field:nth-of-type(3)){grid-template-columns:1fr 1fr 1fr 34px;}
  .field-row > .row-remove{margin-bottom:8px; align-self:end;}
  .pic-remove.row-remove{width:26px; height:26px; min-width:26px; top:-11px; right:12px; font-size:11px;}
  .pic-row{position:relative; border:1px solid var(--line); border-radius:8px; padding:12px 14px 4px; margin-bottom:10px; background:var(--bg-2);}
  .pic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:4px 12px; padding-right:0;}
  .pic-remove{position:absolute; top:-9px; right:10px;}
  .pic-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;}
  .pic-card{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); font-size:13px;}
  .pic-line{font-size:12px; margin-top:3px; word-break:break-all;}
  .pic-line a{color:var(--teal); text-decoration:none;} .pic-line a:hover{text-decoration:underline;}
  .pa-picker{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:16px; box-shadow:var(--sh-1);}
  .pa-picker select{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:var(--bg-2); color:var(--text);}
  .pa-picker select:focus{outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(5,150,105,.16);}
  .pa-label{display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .pa-timeline{position:relative; margin-left:8px; padding-left:22px; border-left:2px solid var(--line);}
  .pa-note{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin-bottom:10px; font-size:12px;}
  .pa-dot{position:absolute; left:-30px; top:13px; width:12px; height:12px; border-radius:50%; background:var(--teal-2); border:3px solid #fff; box-shadow:0 0 0 2px var(--teal-light);}
  .pa-note.is-status{background:var(--blue-bg); border-color:transparent;}
  .pa-note.is-status .pa-dot{background:var(--blue); box-shadow:0 0 0 2px var(--blue-bg);}
  /* ---- Activity log notes (POC Activity / Project Activity) ---- */
  .pa-note-v2{padding:12px 14px; background:#fff; box-shadow:var(--sh-1); border-left:3px solid var(--teal-2);}
  .pa-note-v2.is-status{background:var(--blue-bg); border-left-color:var(--blue); box-shadow:none; padding:9px 12px;}
  .pa-note-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .pa-note-titlewrap{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; min-width:0;}
  .pa-note-by{font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap;} /* date · engineer, plain text beside the title */
  .pa-note-title{font-size:13px; font-weight:700; line-height:1.5; color:var(--navy-2); overflow-wrap:anywhere;} /* same size as the notes text, bold */
  .pa-note-v2.is-status .pa-note-title{font-size:13px; font-weight:700; color:var(--blue);}
  .pa-note-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
  .pa-chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px;}
  .pa-chip.is-blue{background:#fff; color:var(--blue); border-color:transparent;}
  .pa-note-body{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; line-height:1.5; white-space:pre-wrap; color:var(--text);}
  .pa-composer-v2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; padding:14px; margin:14px 0 0; background:linear-gradient(180deg,var(--bg-2),#fff); border:1px solid var(--line-strong); border-radius:12px;}
  .pa-composer-v2 .pa-cmp-full{grid-column:1/-1;}
  .pa-composer-v2 label{display:block; font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--muted); margin-bottom:5px;} /* same as the other form labels */
  .pa-composer-v2 input,.pa-composer-v2 select,.pa-composer-v2 textarea{width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:#fff;}
  .pa-composer-v2 textarea{resize:vertical; min-height:74px;}
  .pa-composer-v2 input:focus,.pa-composer-v2 select:focus,.pa-composer-v2 textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(5,150,105,.16);}
  .pa-composer-v2 .pa-cmp-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}

  .pd-steps{display:flex; flex-wrap:wrap; gap:8px;}
  .pd-step{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; font-size:12px; font-weight:600; background:var(--bg-2); border:1px solid var(--line); color:var(--muted);}
  .pd-step-n{width:20px; height:20px; border-radius:50%; background:var(--line-strong); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pd-step.is-done{background:var(--green-bg); border-color:#cbe8d7; color:var(--green);}
  .pd-step.is-done .pd-step-n{background:var(--fill-green); color:#14532d;}
  .pd-step.is-active{background:var(--soft-blue); border-color:var(--soft-blue-line); color:var(--soft-blue-ink);}
  .pd-step.is-active .pd-step-n{background:var(--fill-blue); color:var(--soft-blue-ink);}
  .pd-step.is-drop{background:var(--red-bg); border-color:#f4d0cc; color:var(--red);}
  .pd-step.is-drop .pd-step-n{background:#ee97a8; color:#7f1d1d;}
  .pd-card + .pd-card{margin-top:0;}
  /* Request Technical detail popups: cards stacked with an even gap (cards sit directly in .pd-body there) */
  .rq-stack{display:flex; flex-direction:column; gap:16px; margin-bottom:16px;}
  @media (max-width:560px){
    .fm-body{padding:16px 16px 0;} .fm-hero{padding:18px;} .fm-actions{margin:0 -16px; padding:12px 16px;}
    .pd-hero{padding:20px 18px 16px;} .pd-body{padding:16px 16px 20px;} .pd-kvgrid{grid-template-columns:1fr; gap:2px 0;} .pd-k{margin-top:6px;}
  }

  .modal h3{
    margin:0 0 16px; font-size:16px; font-weight:600; color:var(--navy);
    padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .field{margin-bottom:13px;}
  .field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px;}
  .field input, .field select, .field textarea{
    width:100%; padding:8px 11px; border:1px solid var(--line-strong); border-radius:8px;
    font-size:13px; font-family:inherit; background:#fff; color:var(--text);
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .field input::placeholder, .field textarea::placeholder{color:var(--muted-2); opacity:1;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--primary-600); box-shadow:var(--ring);
  }
  .field textarea{resize:vertical; min-height:58px;}
  input[type="checkbox"], input[type="radio"]{accent-color:var(--primary-600);}
  .rt-toolbar{display:flex; flex-wrap:wrap; gap:4px; align-items:center; border:1px solid var(--line-strong); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:5px; background:#f4f6f8;}
  .rt-toolbar button, .rt-toolbar select{width:auto; padding:3px 7px; font-size:12px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--navy-2); cursor:pointer;}
  .rt-toolbar button:hover{border-color:var(--teal);}
  .rich-editor{width:100%; min-height:120px; max-height:320px; overflow-y:auto; padding:9px 11px; border:1px solid var(--line-strong); border-radius:0 0 var(--radius-sm) var(--radius-sm); font-size:13px; background:#fff; color:var(--text);}
  .rich-editor:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
  .rich-render{font-size:13px; color:var(--text);}
  .rich-render p, .rich-render div{margin:0 0 4px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line);}

  /* ===== Notices, empty, misc ===== */
  .empty{
    text-align:center; padding:34px 16px; color:var(--muted); font-size:13px;
    background:var(--card); border:1px dashed var(--line-strong); border-radius:var(--radius);
  }
  .empty::before{
    content:""; display:block; width:36px; height:36px; margin:0 auto 10px; border-radius:50%;
    background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>") center/20px no-repeat;
  }
  .muted-small{font-size:12px; color:var(--muted);}
  .row-actions{display:flex; gap:6px; flex-wrap:wrap;}
  /* An action cell inside a table must stay a real table-cell — as display:flex it stops stretching to the row, so the row line, the zebra /
     hover background and the vertical alignment of its buttons no longer match the other cells. Buttons wrap on their own when narrow. */
  td.row-actions, th.row-actions{display:table-cell;}
  td.row-actions > .btn, td.row-actions > button{margin:0 4px 4px 0; vertical-align:top;}
  .notice{
    position:relative; background:var(--primary-50); border:1px solid var(--primary-100); color:var(--navy-2);
    padding:10px 12px 10px 15px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:16px;
  }
  .notice::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; background:var(--fill-blue);}
  details.techbox{border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:9px 11px; margin-bottom:12px; background:var(--bg-2);}
  details.techbox summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--teal); padding:2px 0;}
  details.techbox .field{margin-top:10px;}
  details.collapse-group{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--card); overflow:hidden; box-shadow:var(--sh-1);}
  details.collapse-group>summary{cursor:pointer; list-style:none; padding:11px 14px; font-size:14px; font-weight:700; color:var(--navy-2); background:linear-gradient(180deg,#f5f7f9,#eef1f4); display:flex; align-items:center; gap:8px;}
  details.collapse-group>summary::-webkit-details-marker{display:none;}
  details.collapse-group>summary:before{content:"\25B8"; color:var(--muted); font-size:11px; transition:transform .15s var(--ease);}
  details.collapse-group[open]>summary:before{transform:rotate(90deg);}
  details.collapse-group>summary .cg-count{font-weight:500; font-size:12px; color:var(--muted);}
  details.collapse-group>.cg-body{padding:12px 14px;}
  /* Compact variant for a project's folded tasks inside a narrow Kanban
     column — same collapse mechanics, smaller type, cards keep their own
     spacing so .cg-body doesn't double up the padding. Every project gets
     its own collapsed-by-default group per column (not just Completed ones). */
  .filter-bar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
  .filter-bar select{
    -webkit-appearance:none; appearance:none;
    padding:6px 28px 6px 11px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px;
    font-size:13px; font-weight:500; color:var(--navy-2); background:#fff; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23697585' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .filter-bar select:hover{border-color:var(--muted-2);}
  .filter-bar select:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .filter-bar input[type="text"], .filter-bar input[type="date"]{
    padding:6px 12px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px; font-size:13px;
    background:#fff; min-width:180px; flex:1;
    transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
  }
  .filter-bar input[type="text"]:focus, .filter-bar input[type="date"]:focus{outline:none; border-color:var(--teal); box-shadow:var(--ring);}
  .filter-bar label.muted-small{display:inline-flex; align-items:center; gap:5px;}
  .export-bar{display:flex; gap:8px; flex-wrap:wrap;}

  /* ===== Calendar ===== */
  .cal-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--sh-1);}
  .cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
  .cal-head .cal-title{font-weight:700; color:var(--navy-2); font-size:16px;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;}
  .cal-dow{font-size:11px; font-weight:700; color:var(--muted); text-align:center; padding:4px 0; text-transform:uppercase; letter-spacing:.4px;}
  .cal-cell{min-width:0; overflow:hidden; min-height:66px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px; background:var(--bg-2); font-size:11px; transition:background .12s var(--ease);}
  .cal-cell:hover{background:#fff;}
  .cal-cell.other-month{opacity:.4;}
  .cal-cell.today{border-color:var(--teal); border-width:2px; background:var(--teal-light);}
  .cal-daynum{font-weight:700; color:var(--navy-2); margin-bottom:3px;}
  .cal-item{display:block; background:var(--teal-light); color:var(--navy-2); border-radius:5px; padding:2px 5px; margin-bottom:2px; font-size:11px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cal-item.overdue{background:var(--red-bg); color:var(--red);}
  .cal-item.soon{background:var(--amber-bg); color:var(--amber);}
  @media(max-width:640px){ .cal-cell{min-height:46px; font-size:11px;} .cal-item{font-size:11px;} }

  /* ===== Scrollbars ===== */
  ::-webkit-scrollbar{height:9px; width:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#c4ccd6; border-radius:999px; border:2px solid transparent; background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:#a9b3bf; background-clip:content-box;}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* ===== Consistency layer (2026-10-27) =====
     One scale for type (11 / 12 / 13 / 14 / 16 / 20 / 24 px), weight (400 / 500 / 600 / 700) and radius (6 / 8 / 12 px + pills),
     one look for every dropdown / date field, one heading style, and quiet destructive row actions. :where() keeps the generic
     rules at zero specificity so a component's own rule (or an inline style) still wins where it needs to. */
  :where(select:not([multiple]):not([size])){
    -webkit-appearance:none; appearance:none; padding:6px 28px 6px 11px;
    border:1px solid var(--line-strong); border-radius:8px; background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2344594e' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center;
    font-family:inherit; font-size:13px; font-weight:500; color:var(--text); cursor:pointer;
  }
  :where(input[type="date"], input[type="month"], input[type="time"]){
    padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px; background:#fff;
    font-family:inherit; font-size:13px; color:var(--text);
  }
  :where(.filter-bar select, .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar input[type="month"]){min-height:36px;}
  :where(strong, b){font-weight:600;}
  /* components that set their own select box get the same chevron + white fill */
  .pa-picker select, .pa-composer-v2 select, .field select, .pagination-bar select, .role-select, .inline-select{
    -webkit-appearance:none; appearance:none; padding-right:28px; background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2344594e' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 10px center;
  }
  /* file pickers, the key/value status table */
  input[type="file"]{font-family:inherit; font-size:13px; color:var(--muted);}
  input[type="file"]::file-selector-button{margin-right:10px; padding:6px 12px; min-height:34px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--navy-2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;}
  input[type="file"]::file-selector-button:hover{background:var(--bg-2); border-color:var(--muted-2);}
  table.kv{background:transparent; width:auto; margin-bottom:10px;}
  table.kv td{border:0; padding:4px 24px 4px 0; vertical-align:baseline;}
  table.kv td:first-child{color:var(--muted); min-width:150px;}
  .section-title .ico{display:none;}
  .btn.danger.small{background:#fff; color:var(--red); border-color:#fca5a5; box-shadow:none;}
  .btn.danger.small:hover{background:var(--red-bg); border-color:var(--red); color:#991b1b; filter:none;}
  .pagination-bar select{min-width:66px;}
  .empty{padding:28px 16px;}

  /* ===== My Work / Action Queue (js/mywork.js) ===== */
  .mw-week{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:6px;}
  .mw-day{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
  .mw-day.is-today{border-color:var(--soft-blue-line); background:var(--soft-blue);}
  .mw-day-n{font-size:12px; color:var(--muted);}
  .mw-day-d{font-size:20px; font-weight:600; color:var(--navy); line-height:1.2;}
  @media(max-width:640px){ .mw-week{grid-template-columns:repeat(2,minmax(0,1fr));} }

  /* ===== Capacity (js/capacity.js) ===== */
  .cap-table th.cap-now{background:var(--soft-blue); color:var(--soft-blue-ink);}
  .cap-cell{cursor:pointer; text-align:center; min-width:104px; vertical-align:middle;}
  .cap-cell .cap-main{display:block; font-weight:600; font-size:14px;}
  .cap-cell .cap-sub{display:block; font-size:11px; color:var(--muted);}
  .cap-cell .cap-bar{display:block; height:4px; border-radius:2px; background:rgba(15,23,42,.08); margin:5px auto 0; max-width:80px; overflow:hidden;}
  .cap-cell .cap-bar i{display:block; height:100%; background:currentColor; opacity:.55;}
  .cap-free{background:color-mix(in srgb, var(--blue-bg) 45%, transparent); color:var(--blue);}
  .cap-ok{background:var(--green-bg); color:var(--green);}
  .cap-busy{background:var(--amber-bg); color:var(--amber);}
  .cap-over{background:var(--red-bg); color:var(--red);}
  .cap-off{background:var(--bg-2); color:var(--muted);}
  .cap-total{background:var(--bg-2); color:var(--text); cursor:default;}
  .cap-table tfoot td{border-top:2px solid var(--line-strong);}
  .cap-key{display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-3px; margin-right:5px; box-shadow:inset 0 0 0 1px var(--line);}


  /* ===== Global search (js/search.js) ===== */
  .gs-overlay{position:fixed; inset:0; z-index:1200; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 16px;}
  .gs-overlay[hidden]{display:none;}
  .gs-box{width:100%; max-width:640px; max-height:76vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-3); overflow:hidden;}
  .gs-input-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted);}
  .gs-input-row .ico{width:20px; height:20px; flex:none;}
  .gs-input-row input{flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); font:inherit; font-size:16px; padding:6px 0;}
  .gs-close{border:1px solid var(--line-strong); background:var(--bg-2); color:var(--muted); border-radius:6px; font:inherit; font-size:11px; padding:3px 8px; cursor:pointer;}
  .gs-list{overflow-y:auto; padding:6px; flex:1;}
  .gs-group{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:10px 10px 4px;}
  .gs-item{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; cursor:pointer;}
  .gs-item.active{background:var(--gs-active, var(--soft-blue));}
  .gs-ico{display:inline-flex; width:32px; height:32px; flex:none; align-items:center; justify-content:center; border-radius:8px; background:var(--bg-2); color:var(--muted);}
  .gs-item.active .gs-ico{background:var(--card); color:var(--primary);}
  .gs-text{display:flex; flex-direction:column; min-width:0; flex:1;}
  .gs-title{font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gs-sub{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gs-kind{font-size:11px; color:var(--muted); flex:none;}
  .gs-empty{padding:26px 16px; text-align:center; color:var(--muted);}
  .gs-foot{display:flex; gap:16px; justify-content:flex-end; padding:8px 14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted-2); background:var(--bg-2);}
  .gs-btn{display:inline-flex; align-items:center; gap:6px;}
  .gs-kbd{font:inherit; font-size:10px; padding:1px 5px; border:1px solid var(--line-strong); border-radius:4px; color:var(--muted); background:var(--bg-2);}
  html.gs-open{overflow:hidden;}
  .gs-input-row input::-webkit-search-cancel-button{display:none;}
  .gs-done{display:none;}
  @media (hover:none){ .gs-esc{display:none;} .gs-done{display:inline;} .gs-close{font-size:13px; padding:7px 12px;} }
  @media (hover:none){ .gs-kbd, .gs-foot{display:none;} }
  @media (max-width:640px){
    .gs-overlay{padding:0;}
    .gs-box{max-width:none; max-height:none; height:100%; border-radius:0; border:none;}
    .gs-btn-label{display:none;}
    .gs-input-row{padding-top:max(12px, env(safe-area-inset-top));}
  }


  /* ===== The bell: in-app notifications (js/bell.js) ===== */
  .bell-btn{position:relative; display:inline-flex; align-items:center; justify-content:center;}
  .bell-badge{position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; border:2px solid var(--card);}
  .bell-badge[hidden]{display:none;}
  .bell-btn.bell-ping .ico{animation:bell-ring .7s ease-in-out 1;}
  @keyframes bell-ring{0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)}}
  @media (prefers-reduced-motion:reduce){ .bell-btn.bell-ping .ico{animation:none;} }
  .bell-panel{position:fixed; right:16px; top:56px; z-index:1100; width:min(420px, calc(100vw - 24px)); max-height:min(72vh, 600px); display:flex; flex-direction:column; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-3); overflow:hidden;}
  .bell-panel[hidden]{display:none;}
  .bell-head{display:flex; align-items:center; gap:8px; padding:12px 14px 8px;}
  .bell-count{font-size:12px; color:var(--muted);}
  .bell-actions{margin-left:auto; display:inline-flex; align-items:center; gap:10px;}
  .bell-link{border:none; background:none; color:var(--primary); font:inherit; font-size:12px; cursor:pointer; padding:2px 0;}
  .bell-link:hover{text-decoration:underline;}
  .bell-close{border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:0 2px;}
  .bell-tabs{display:flex; gap:4px; padding:0 10px 8px; border-bottom:1px solid var(--line);}
  .bell-tabs button{border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-size:12px; padding:4px 10px; border-radius:999px; cursor:pointer;}
  .bell-tabs button.on{background:var(--soft-blue); color:var(--primary); font-weight:600;}
  .bell-list{overflow-y:auto; flex:1; padding:6px;}
  .bell-empty{padding:28px 16px; text-align:center; color:var(--muted);}
  .bell-item{display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:8px; cursor:pointer; position:relative;}
  .bell-item:hover, .bell-item:focus-visible{background:var(--bg-2); outline:none;}
  .bell-item.unread{background:var(--soft-blue);}
  .bell-item[aria-disabled="true"]{cursor:default;}
  .bell-ico{display:inline-flex; width:30px; height:30px; flex:none; align-items:center; justify-content:center; border-radius:8px; background:var(--bg-2); color:var(--muted);}
  .bell-item.unread .bell-ico{background:var(--card); color:var(--primary);}
  .bell-item.kind-reminder .bell-ico{background:var(--amber-bg, #fff4d6); color:var(--amber);}
  .bell-main{min-width:0; flex:1;}
  .bell-title{font-weight:600; font-size:13px; line-height:1.35; overflow-wrap:anywhere;}
  .bell-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary); margin-right:6px; vertical-align:middle;}
  .bell-lines{font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere;}
  .bell-lines div{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .bell-meta{font-size:11px; color:var(--muted-2); margin-top:3px;}
  .bell-x{border:none; background:none; color:var(--muted-2); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; opacity:0;}
  .bell-item:hover .bell-x, .bell-item:focus-within .bell-x{opacity:1;}
  @media (hover:none){ .bell-x{opacity:.7;} }
  @media (max-width:640px){
    .bell-panel{left:8px; right:8px; width:auto; max-height:calc(100vh - 72px);}
    .bell-btn .ico{margin:0;}
  }

  /* ===== Phones: tables as cards (js/core.js markTableForCards) ===== */
  .cm-v{display:contents;}
  @media (max-width:640px){
    .table-scroll-wrap:has(> table.cards-m){overflow:visible; border:none; box-shadow:none; background:none;}
    table.cards-m, table.cards-m tbody{display:block; width:auto !important; table-layout:auto !important; background:none; box-shadow:none; border:none;}
    table.cards-m colgroup, table.cards-m thead{display:none;}
    table.cards-m tbody tr{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin:0 0 10px; box-shadow:var(--sh-1);}
    table.cards-m tbody tr > td, table.cards-m tbody tr:nth-child(even) > td, table.cards-m tbody tr:hover > td{background:transparent !important;}
    table.cards-m .cm-v{display:block; min-width:0; text-align:right;}
    table.cards-m tbody tr > td{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:6px 0; border:none; text-align:right; width:auto !important; max-width:none; white-space:normal; word-break:break-word;}
    table.cards-m tbody tr > td::before{content:attr(data-label); flex:none; max-width:42%; text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); padding-top:2px;}
    table.cards-m tbody tr > td:first-child{display:block; text-align:left; font-size:15px; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line);}
    table.cards-m tbody tr > td:first-child::before{display:none;}
    table.cards-m tbody tr > td:empty{display:none;}
    table.cards-m tbody tr > td.row-actions{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:8px; padding-top:10px; margin-top:4px; border-top:1px solid var(--line);}
    table.cards-m tbody tr > td.row-actions::before{display:none;}
    table.cards-m tbody tr > td.row-actions > .btn, table.cards-m tbody tr > td.row-actions > button{margin:0;}
    table.cards-m .badge{max-width:100%; white-space:normal;}
  }


  /* ===== Quick Log (js/quicklog.js) ===== */
  .ql-list{max-height:34vh; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); padding:4px;}
  .ql-group{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding:8px 8px 2px;}
  .ql-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; cursor:pointer; min-height:44px;}
  .ql-item:has(input:checked){background:var(--ql-on, var(--soft-blue));}
  .ql-item input{flex:none; width:18px; height:18px; margin:0;}
  .ql-text{display:flex; flex-direction:column; min-width:0;}
  .ql-title{font-weight:600; color:var(--text);}
  .ql-sub{font-size:12px; color:var(--muted);}
  .ql-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
  .ql-chip{min-width:48px; min-height:40px; padding:6px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--card); color:var(--text); font:inherit; font-weight:600; cursor:pointer;}
  .ql-chip.active{background:var(--ql-on, var(--soft-blue)); border-color:var(--ql-on-line, var(--soft-blue-line)); color:var(--ql-on-ink, var(--soft-blue-ink));}
  .ql-fab{display:none; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:56px; height:56px; border-radius:50%; border:none; background:var(--primary); color:#fff; box-shadow:var(--sh-3); cursor:pointer; align-items:center; justify-content:center;}
  .ql-fab .ico{width:26px; height:26px;}
  html.gs-open .ql-fab, body:has(.modal-bg.open) .ql-fab{display:none !important;}
  @media (max-width:760px){ .ql-fab{display:inline-flex;} }
  .ql-toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:1300; max-width:90vw; padding:10px 16px; border-radius:999px; background:var(--navy-2); color:#fff; font-size:13px; font-weight:600; box-shadow:var(--sh-3); transition:opacity .2s, transform .2s;}
  .ql-toast.show{opacity:1; transform:translate(-50%, 0);}

  /* ============================================================================
     DARK THEME — html[data-theme="dark"] (js/theme.js). Same tokens, dark values; then the few rules that hard-code a light colour.
     Screen only: printing always uses the light palette (the A4 print / certificate styles below are untouched).
     ========================================================================= */
  @media screen{
  html[data-theme="dark"]{
    color-scheme:dark;
    --primary:#4ade80; --primary-600:#34d399; --primary-700:#86efac; --primary-50:#12301f; --primary-100:#1a4430;
    --accent:#f0a64a;
    --navy:#e6f2ea; --navy-2:#d2e5d9; --navy-3:#b4cdbd;
    --teal:var(--primary); --teal-2:var(--primary-600); --teal-dark:var(--primary-700); --teal-light:var(--primary-50);
    --bg:#0a1510; --bg-2:#0f1d16; --card:#14251c; --line:#21392c; --line-strong:#2f4d3d;
    --text:#e3efe7; --muted:#a6bcae; --muted-2:#8ca595;
    --red:#f4a5a0; --red-bg:#3b2125; --amber:#f1c47e; --amber-bg:#382d19; --green:#91d8b0; --green-bg:#17342b; --purple:#c3abf2; --purple-bg:#2d2545; --blue:#8fd3dc; --blue-bg:#14323a;
    --k1:#3fbf86; --k2:#4fb3a7; --k3:#9cc44a; --k4:#d8a649; --k5:#5fa883; --k6:#d98a7a;
    --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 4px 14px -2px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.4); --sh-3:0 18px 48px -12px rgba(0,0,0,.75);
    --sh-teal:0 6px 20px -8px rgba(74,222,128,.3);
    --ring:0 0 0 3px rgba(74,222,128,.25);
    --soft-blue:#1c4632; --soft-blue-hover:#23583f; --soft-blue-line:#2e6d4f; --soft-blue-ink:#d3f5e1;
    --fill-blue:#3fae78; --fill-green:#3f9c72;
    --row-alt:#11211a; --row-hover:#183024;
  }
  html[data-theme="dark"] body{
    background:
      radial-gradient(700px 420px at 12% 6%, rgba(74,222,128,.06), transparent 62%),
      radial-gradient(700px 420px at 94% 96%, rgba(240,166,74,.04), transparent 62%),
      var(--bg);
    background-attachment:fixed;
  }
  /* surfaces that hard-code white */
  html[data-theme="dark"] .role-switcher-slot select, html[data-theme="dark"] .theme-select,
  html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .week-wrap, html[data-theme="dark"] .week-grid td.wk-phase,
  html[data-theme="dark"] .modal, html[data-theme="dark"] .pd-chip, html[data-theme="dark"] .pd-kpi, html[data-theme="dark"] .pd-card,
  html[data-theme="dark"] .fm-money:focus-within, html[data-theme="dark"] .pa-picker, html[data-theme="dark"] .pa-picker select:focus,
  html[data-theme="dark"] .pa-note-v2, html[data-theme="dark"] .pa-chip.is-blue, html[data-theme="dark"] .pa-composer-v2 input,
  html[data-theme="dark"] .pa-composer-v2 select, html[data-theme="dark"] .pa-composer-v2 textarea, html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .rt-toolbar button,
  html[data-theme="dark"] .rt-toolbar select, html[data-theme="dark"] .rich-editor, html[data-theme="dark"] .filter-bar select,
  html[data-theme="dark"] .filter-bar input[type="text"], html[data-theme="dark"] .filter-bar input[type="date"],
  html[data-theme="dark"] .cal-cell:hover, html[data-theme="dark"] select:not([multiple]):not([size]),
  html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="time"],
  html[data-theme="dark"] .pa-picker select, html[data-theme="dark"] .field select, html[data-theme="dark"] .pagination-bar select, html[data-theme="dark"] .role-select, html[data-theme="dark"] .inline-select,
  html[data-theme="dark"] input[type="file"]::file-selector-button, html[data-theme="dark"] .btn.danger.small{background-color:var(--card);}
  html[data-theme="dark"] .btn.danger.small{border-color:#7a3a3d;}
  html[data-theme="dark"] .btn.danger:not(.small){color:#2b0f10;}      /* the dark theme's red is a light red: dark text on it */
  html[data-theme="dark"] .btn.secondary:hover{background-color:var(--soft-blue);}
  html[data-theme="dark"] .fm-actions{background:rgba(23,33,49,.97);}
  html[data-theme="dark"] .pa-composer-v2{background:linear-gradient(180deg,var(--bg-2),var(--card));}
  html[data-theme="dark"] .rq-rate-box{background:linear-gradient(180deg,#2a2415,var(--card)); border-color:#4a3d1f;}
  /* near-white tints -> the second surface */
  html[data-theme="dark"] .week-grid thead .wk-month th, html[data-theme="dark"] .week-grid .wk-c0h, html[data-theme="dark"] .week-grid thead th,
  html[data-theme="dark"] .week-grid tbody tr:nth-child(even) td.wk-phase, html[data-theme="dark"] .pd-hero, html[data-theme="dark"] .fm-hero-danger,
  html[data-theme="dark"] .rt-toolbar, html[data-theme="dark"] .module-btn:hover, html[data-theme="dark"] .sidebar-toggle:hover,
  html[data-theme="dark"] .b-gray{background:var(--bg-2);}
  html[data-theme="dark"] .pd-hero{border-bottom-color:var(--line);}
  html[data-theme="dark"] details.collapse-group>summary{background:linear-gradient(180deg,var(--bg-2),var(--card));}
  html[data-theme="dark"] .week-grid tbody tr:hover td, html[data-theme="dark"] .week-grid tbody tr:hover td.wk-phase, html[data-theme="dark"] th.sortable:hover{background:var(--row-hover);}
  html[data-theme="dark"] .gantt-track{background:var(--line);}
  html[data-theme="dark"] .module-sidebar-title img, html[data-theme="dark"] .auth-card img{background:#fff; border-radius:8px; padding:4px 6px;}
  html[data-theme="dark"] .lb-track, html[data-theme="dark"] .pd-progress, html[data-theme="dark"] .progress-track{background:var(--line);}
  html[data-theme="dark"] .dl-bar-none{background:repeating-linear-gradient(45deg,#1b2638,#1b2638 6px,#222f45 6px,#222f45 12px);}
  html[data-theme="dark"] .b-gold{background:var(--amber-bg); color:var(--amber); box-shadow:inset 0 0 0 1px #5a4a26;}
  /* semantic rings / borders that were pastel */
  html[data-theme="dark"] .b-green{box-shadow:inset 0 0 0 1px #24503f;}
  html[data-theme="dark"] .b-amber{box-shadow:inset 0 0 0 1px #5a4a26;}
  html[data-theme="dark"] .b-blue{box-shadow:inset 0 0 0 1px #2c4676;}
  html[data-theme="dark"] .b-purple{box-shadow:inset 0 0 0 1px #46386c;}
  html[data-theme="dark"] .b-red, html[data-theme="dark"] .pd-chip-red{box-shadow:inset 0 0 0 1px #6a3238;}
  html[data-theme="dark"] .card.warn, html[data-theme="dark"] .pd-step.is-drop{border-color:#6a3238;}
  html[data-theme="dark"] .auth-error, html[data-theme="dark"] .fm-hero-danger{border-color:#6a3238;}
  html[data-theme="dark"] .pd-phase.is-done{border-color:#24503f;}
  html[data-theme="dark"] .btn:hover{border-color:var(--soft-blue-line);}
  html[data-theme="dark"] .pd-eyebrow{color:var(--primary-700);}
  html[data-theme="dark"] .pd-phase.is-done .pd-phase-dot{color:#0d2a1d;}
  html[data-theme="dark"] .pd-step.is-drop .pd-step-n{color:#3b2125;}
  html[data-theme="dark"] .pa-dot{border-color:var(--card);}
  html[data-theme="dark"] .btn.danger.small:hover{color:#fff;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4a66;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4a5c7c;}
  html[data-theme="dark"] .cap-cell .cap-bar{background:rgba(255,255,255,.12);}
  html[data-theme="dark"] .cap-free{background:rgba(122,162,255,.10);}
  html[data-theme="dark"] .gantt-bar.upcoming, html[data-theme="dark"] .gantt-bar.st-todo, html[data-theme="dark"] .week-grid .wk-seg.tone-todo{background:linear-gradient(180deg,#5d6b82,#4c586d);}
  /* custom chevron on selects: the stroke colour is baked into the data-URI, so repaint it light */
  html[data-theme="dark"] select:not([multiple]):not([size]), html[data-theme="dark"] .pa-picker select, html[data-theme="dark"] .pa-composer-v2 select, html[data-theme="dark"] .field select, html[data-theme="dark"] .pagination-bar select, html[data-theme="dark"] .role-select, html[data-theme="dark"] .inline-select, html[data-theme="dark"] .theme-select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23a8b4c8' stroke-width='1.5' stroke-linecap='round'/></svg>");
  }
  html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:var(--muted-2);}
  }

  /* ============================================================================
     PRINT + CERTIFICATE — unchanged (tuned for A4)
     ========================================================================= */
  #printArea{display:none;}
  @media print{
    @page{ size: A4; margin: 0; }
    html, body{ width:210mm; margin:0; padding:0; }
    body *{visibility:hidden;}
    #printArea, #printArea *{visibility:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    #printArea{display:block; position:absolute; top:0; left:0; width:210mm; padding:0; margin:0;}
    .no-print{display:none !important;}
    /* A4 landscape print (Implementation timeline) — see printLandscape() */
    html.print-landscape, html.print-landscape body{ width:297mm; }
    html.print-landscape #printArea{ width:297mm; }
  }
  #printArea{box-sizing:border-box; padding:24px; font-family:-apple-system,Segoe UI,Roboto,sans-serif; color:#1c2531;}
  #printArea .print-page-break{break-before:page; page-break-before:always;} /* starts on a new printed page (Weekly Schedule) */
  #printArea h1{font-size:19px; color:#0b4a36; margin-bottom:2px;}
  #printArea .sub{font-size:12px; color:#6b7686; margin-bottom:18px;}
  #printArea h2{font-size:14px; color:#0f6b72; border-bottom:1px solid #ccc; padding-bottom:4px; margin-top:22px;}
  #printArea table{width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px;}
  #printArea th, #printArea td{border:1px solid #ccc; padding:6px 8px; text-align:left;}
  #printArea th{background:#eaf1f1;}
  #printArea .sumgrid{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
  #printArea .sumbox{border:1px solid #ccc; border-radius:6px; padding:8px 14px;}
  #printArea .sumbox b{display:block; font-size:18px; color:#0b4a36;}
  #printArea .section-title{font-size:13px; font-weight:700; color:#0b4a36; margin:18px 0 4px;}
  #printArea .week-wrap{overflow:visible; border:1px solid #bbb; border-radius:6px;}
  #printArea table.week-grid{width:100%; table-layout:fixed; font-size:7.5px; margin-top:0; border-collapse:collapse;}
  #printArea table.week-grid col.wk-c0{width:auto;}
  #printArea table.week-grid th, #printArea table.week-grid td{border:1px solid #cbd2d9; padding:1px 2px; text-align:center; overflow:hidden;}
  #printArea table.week-grid .wk-c0h, #printArea table.week-grid td.wk-phase{width:auto; white-space:nowrap; text-align:left; padding:2px 6px; box-shadow:none;}
  #printArea table.week-grid thead .wk-month th{background:#eef1f4; font-size:6.5px;}
  #printArea table.week-grid thead .wk-head th{background:#eef1f4;}
  #printArea table.week-grid th .wk-date{display:block; font-weight:400; font-size:6px; color:#6b7686;}
  #printArea table.week-grid td.wk-cell{height:16px; position:relative;}
  #printArea table.week-grid td.wk-cell .wk-seg{position:absolute; top:2px; bottom:2px; left:0; right:0;}
  #printArea table.week-grid .wk-seg.tone-todo{background:#a9b3c1;}
  #printArea table.week-grid .wk-seg.tone-inprogress{background:#c9791f;}
  #printArea table.week-grid .wk-seg.tone-review{background:#5b3a9c;}
  #printArea table.week-grid .wk-seg.tone-done{background:#1c7a4d;}
  #printArea table.week-grid .wk-sub{display:block; font-size:6px; font-weight:400; color:#6b7686;}
  #printArea .week-legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:7px; color:#6b7686;}
  #printArea .week-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px;}
  #printArea .week-legend i.tone-todo{background:#9aa6b5;}
  #printArea .week-legend i.tone-inprogress{background:#c9791f;}
  #printArea .week-legend i.tone-review{background:#5b3a9c;}
  #printArea .week-legend i.tone-done{background:#1c7a4d;}
  #printArea .week-legend i.tone-now{background:#fff; box-shadow:inset 0 0 0 1.5px #0f6b72;}

  /* Certificate of Maintenance print layout */
  #printArea.cert-mode{box-sizing:border-box; width:210mm; padding:8mm 15mm 13mm 15mm; border:2.5px solid #0b4a36; position:relative;}
  #printArea.cert-mode::before{
    content:""; position:absolute; inset:5mm; border:1px solid #b8892b; pointer-events:none;
  }
  #printArea.cert-mode .cert-header{width:100%; border-collapse:collapse; border-bottom:1.5px solid #0b4a36; margin-bottom:10px;}
  #printArea.cert-mode .cert-header td{border:none; padding:0 0 8px 0; vertical-align:baseline;}
  #printArea.cert-mode .cert-header .vendor{font-size:14px; font-weight:800; color:#0b4a36; text-align:left;}
  #printArea.cert-mode .cert-header .tagline{font-size:10px; color:#5b6b7d; text-align:right;}
  #printArea.cert-mode .cert-title{text-align:center; font-size:22px; font-weight:800; color:#0b4a36; line-height:1.2; letter-spacing:.5px; margin:2px 0 1px;}
  #printArea.cert-mode .cert-number{text-align:center; font-style:italic; color:#0f6b72; font-size:11px; margin-bottom:10px;}
  #printArea.cert-mode .cert-intro{text-align:center; font-size:10.5px; line-height:1.5; margin:0 auto 12px; max-width:600px; color:#1c2531;}
  #printArea.cert-mode table.cert-details{width:100%; border-collapse:collapse; background:#eaf1f1; border:1px solid #d8dee5; margin-bottom:12px;}
  #printArea.cert-mode table.cert-details td{width:50%; padding:6px 14px; border:1px solid #d8dee5; vertical-align:top;}
  #printArea.cert-mode .cert-label{font-size:8.5px; text-transform:uppercase; letter-spacing:.3px; color:#5b6b7d; display:block;}
  #printArea.cert-mode .cert-value{font-size:12px; font-weight:700; color:#0b4a36; margin-top:2px; display:block;}
  #printArea.cert-mode .cert-section-title{font-size:11px; font-weight:800; color:#0b4a36; margin:0 0 6px;}
  #printArea.cert-mode table.cert-assets{width:100%; border-collapse:collapse; font-size:10px; margin-bottom:6px;}
  #printArea.cert-mode table.cert-assets th{background:#0b4a36; color:#fff; padding:6px 8px; text-align:left; font-size:9px;}
  #printArea.cert-mode table.cert-assets td{border:1px solid #d8dee5; padding:6px 8px;}
  #printArea.cert-mode table.cert-assets tr:nth-child(even) td{background:#eaf1f1;}
  #printArea.cert-mode .cert-total{font-size:9.5px; color:#5b6b7d; margin-bottom:12px;}
  #printArea.cert-mode table.cert-seal-row{width:100%; border-collapse:collapse; margin-bottom:16px;}
  #printArea.cert-mode table.cert-seal-row td{border:none; padding:0; vertical-align:middle;}
  #printArea.cert-mode table.cert-seal-row .seal-cell{width:70px; padding-right:16px;}
  #printArea.cert-mode .cert-seal{
    width:54px; height:54px; border-radius:50%; border:2px solid #b8892b; box-shadow:0 0 0 4px #fff, 0 0 0 5px #b8892b;
    display:table-cell; text-align:center; vertical-align:middle;
  }
  #printArea.cert-mode .cert-seal span{display:block; font-weight:800; color:#0b4a36; line-height:1.15;}
  #printArea.cert-mode .cert-seal .s1{font-size:6px;}
  #printArea.cert-mode .cert-seal .s2{font-size:9px; color:#b8892b; margin-top:2px;}
  #printArea.cert-mode .cert-disclaimer{font-size:9px; font-style:italic; color:#5b6b7d; line-height:1.5;}
  #printArea.cert-mode table.cert-sig-row{width:100%; border-collapse:collapse;}
  #printArea.cert-mode table.cert-sig-row td{border:none; width:50%; text-align:center; padding:0 15px; vertical-align:top;}
  #printArea.cert-mode .cert-sig-line{border-top:1px solid #333; margin-bottom:6px; padding-top:6px;}
  #printArea.cert-mode .cert-sig-name{font-weight:700; font-size:11px; color:#1c2531;}
  #printArea.cert-mode .cert-sig-role{font-size:9px; color:#5b6b7d;}
  #printArea.cert-mode .cert-footer{text-align:center; font-size:8px; color:#5b6b7d; margin-top:12px; border-top:1px solid #d8dee5; padding-top:5px;}

  /* Request Technical — dashboard panels, star rating */
  /* Request ratings: SVG stars (see requestStarSvg in js/requesttech.js; the gradient #rqStarGrad lives in a hidden <svg> on the page) */
  .rq-svg-star{width:1.05em; height:1.05em; display:inline-block; vertical-align:-.18em; overflow:visible;}
  .rq-svg-star path{fill:url(#rqStarGrad); stroke:#d68f00; stroke-width:1; stroke-linejoin:round;}
  .rq-svg-star.off path{fill:#eef1f5; stroke:#cdd5df;}
  .rq-stars-static{display:inline-flex; gap:1px; align-items:center; white-space:nowrap; line-height:1;}
  .rq-rate-box{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 12px 12px; margin:4px 0 6px; background:linear-gradient(180deg,#fffaf0,#fff); border:1px solid #f1e3bf; border-radius:12px;}
  .rq-stars{display:flex; gap:8px;}
  .rq-star{border:0; background:none; cursor:pointer; padding:2px; width:48px; height:48px; border-radius:12px; transition:transform .14s var(--ease);}
  .rq-star svg{width:100%; height:100%; overflow:visible;}
  .rq-star path{fill:#eef1f5; stroke:#cdd5df; stroke-width:1; stroke-linejoin:round; transition:fill .14s var(--ease), stroke .14s var(--ease), filter .14s var(--ease);}
  .rq-star.on path{fill:url(#rqStarGrad); stroke:#d68f00; filter:drop-shadow(0 3px 5px rgba(232,160,0,.45));}
  .rq-star:hover{transform:translateY(-2px) scale(1.12);}
  .rq-star:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
  .rq-rate-readout{font-size:13px; color:var(--muted); min-height:20px; text-align:center;}
  .rq-rate-readout strong{font-size:16px; color:#c98100;}
  /* Request Technical status cards */
  .cards .card.rq-c-waiting{--kacc:#7c56d6;}
  .cards .card.rq-c-assigned{--kacc:#4fb3ec;}
  .cards .card.rq-c-progress{--kacc:#f08a24;}
  .cards .card.rq-c-rating{--kacc:#f2c200;}
  .cards .card.rq-c-done{--kacc:#1f9d63;}
  .cards .card.rq-c-rejected{--kacc:#d63b3b;}
  .cards .card.rq-c-cancelled{--kacc:#8a97a5;}
  /* ---- Searchable select (enhanceSearchableSelect in js/core.js) ---- */
  .ss-wrap{position:relative; width:100%;}
  .ss-native{display:none !important;}
  .ss-input{width:100%; padding:9px 30px 9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color:var(--text);}
  .ss-input:focus{outline:none; border-color:var(--teal); background-color:#fff; box-shadow:0 0 0 3px rgba(5,150,105,.16);}
  /* Inside a .field the generic ".field input" rule would win — keep the searchable select looking exactly like the other dropdowns. */
  .field .ss-input{padding:9px 30px 9px 11px; height:37px; box-sizing:border-box; cursor:pointer; text-overflow:ellipsis; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;}
  .field .ss-input:focus{background-color:#fff; cursor:text;}
  .ss-input::placeholder{color:var(--text); opacity:1;}
  .ss-input:disabled{opacity:.6; cursor:not-allowed;}
  .ss-list{position:fixed; z-index:10000; background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 10px 30px rgba(10,30,50,.22); overflow-y:auto; padding:4px;}
  .ss-opt{padding:7px 10px; border-radius:6px; cursor:pointer; font-size:13px; line-height:1.3;}
  .ss-opt:hover,.ss-opt.is-active{background:var(--teal-light);}
  .ss-opt.is-sel{font-weight:700; color:var(--teal);}
  .ss-opt.is-off{opacity:.5; cursor:not-allowed;}
  .ss-none{padding:9px 10px; font-size:12px; color:var(--muted);}
  .ss-sep{padding:8px 10px 3px; margin-top:4px; border-top:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);}
  .ss-hint{font-size:11px; font-weight:600; color:var(--muted); margin-left:6px;}
  .ss-opt.ss-rem{border-left:3px solid var(--teal-2);}

  /* ---- Demo Lab > Resources ---- */
  .dl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; margin-top:10px;}
  .dl-card{display:flex; flex-direction:column; gap:10px;}
  .dl-card-h{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
  .dl-name{font-weight:700; font-size:16px; color:var(--ink,#16202a); overflow-wrap:anywhere;}
  .dl-row-h{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:4px; font-size:13px; flex-wrap:wrap;}
  .dl-bar{height:12px; border-radius:6px; background:#e8edf1; overflow:hidden; display:flex;}
  .dl-bar.over{box-shadow:0 0 0 2px var(--red) inset;}
  .dl-bar-none{background:repeating-linear-gradient(45deg,#eef1f4,#eef1f4 6px,#e4e8ec 6px,#e4e8ec 12px);}
  .dl-seg{display:block; height:100%;}
  .dl-seg-perm{background:var(--k1);} .dl-seg-temp{background:var(--k4);} .dl-seg-free{background:#e8edf1;}
  .dl-legend{display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 0;}
  .dl-legend i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px;}
  .dl-vms summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--teal);}
  .dl-vms table{margin-top:6px; font-size:12px;}


/* Pilar picker (Product form) and the per-user Pilar select (Master Data > User Accounts) */
.check-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight:400; cursor: pointer; }
.check-inline input { width: 16px; height: 16px; margin: 0; }
.inline-select { padding: 4px 8px; font-size:13px; max-width: 190px; }

  /* ============================================================================
     KSA layout — the module menu is a top bar (forest green) with a dropdown per group (js/topnav.js); module headers become a green band,
     menu tabs become pills. Screen only: print layouts above are untouched.
     ========================================================================= */
  @media screen{
  .app-shell{flex-direction:column;}
  .module-sidebar, html.sidebar-min .module-sidebar{
    width:auto; height:var(--topbar-h); position:sticky; top:0; z-index:60; align-self:stretch;
    flex-direction:row; align-items:center; gap:4px; padding:0 20px; overflow:visible;
    background:linear-gradient(100deg,var(--forest) 0%,var(--forest-2) 70%,#0d6b4f 100%);
    border-right:none; border-bottom:1px solid rgba(0,0,0,.18); box-shadow:0 6px 18px -10px rgba(6,63,47,.6);
  }
  .module-sidebar-title, html.sidebar-min .module-sidebar-title{
    border:none; margin:0 18px 0 0; padding:0; display:flex; align-items:center; gap:10px; justify-content:flex-start;
  }
  .brand-mark{
    width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#34d399,#047857); color:#fff; font-weight:800; font-size:18px; letter-spacing:-.02em;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 3px rgba(163,230,53,.25);
  }
  .brand-text{display:flex; flex-direction:column; line-height:1.05; color:#fff;}
  .brand-text strong{font-size:16px; font-weight:800; letter-spacing:.06em;}
  .brand-text small{font-size:10.5px; font-weight:500; color:#a7f3d0; letter-spacing:.03em;}

  .nav-group, html.sidebar-min .nav-group{position:relative; flex-direction:row; margin:0; padding:0; border:none; gap:0;}
  html.sidebar-min .nav-group + .nav-group, .nav-group + .nav-group{border:none; margin:0; padding:0;}
  .module-sidebar .nav-group-label, html.sidebar-min .module-sidebar .nav-group-label{
    display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border:none; border-radius:999px; cursor:pointer;
    background:transparent; color:#d1fae5; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em; text-transform:none;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .nav-group:not(.single) > .nav-group-label::after{
    content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg); opacity:.7; transition:transform .15s var(--ease);
  }
  .nav-group.open > .nav-group-label::after{transform:translateY(1px) rotate(-135deg);}
  .module-sidebar .nav-group-label:hover, .nav-group.open > .nav-group-label{background:rgba(255,255,255,.1); color:#fff;}
  .nav-group.has-active > .nav-group-label{background:#ecfdf5; color:var(--forest);}
  .nav-group.has-active > .nav-group-label:hover{background:#fff;}

  .nav-menu{
    position:absolute; top:calc(100% + 10px); left:0; min-width:250px; z-index:70;
    display:none; flex-direction:column; gap:2px; padding:8px;
    background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3);
    animation:modalIn .14s var(--ease) both;
  }
  .nav-group.open > .nav-menu{display:flex;}
  .nav-group.single > .nav-menu{display:none !important;}

  .module-sidebar .module-btn, html.sidebar-min .module-sidebar .module-btn{justify-content:flex-start; padding:9px 12px; min-height:40px; border-radius:10px; color:var(--text);}
  .module-sidebar .module-btn-label, html.sidebar-min .module-sidebar .module-btn-label{position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap;}
  .module-sidebar .module-btn-icon{width:30px; height:30px; border-radius:8px; background:var(--primary-50); color:var(--primary-600);}
  .module-sidebar .module-btn-icon .ico{width:17px; height:17px;}
  .module-sidebar .module-btn:hover{background:var(--bg-2);}
  .module-sidebar .module-btn.active{background:var(--primary-50); color:var(--primary-700);}
  .module-sidebar .module-btn.active .module-btn-icon{background:var(--primary-600); color:#fff;}
  .module-sidebar .module-btn.active::before{display:none;}

  /* Account sits on the right of the bar as a round button */
  .nav-group.nav-bottom, html.sidebar-min .nav-group.nav-bottom{margin-left:auto; padding:0; border:none;}
  .nav-bottom .module-btn, html.sidebar-min .nav-bottom .module-btn{
    width:auto; color:#d1fae5; padding:5px 14px 5px 5px; min-height:40px; border-radius:999px; background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .nav-bottom .module-btn .module-btn-icon{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;}
  .nav-bottom .module-btn:hover{background:rgba(255,255,255,.16); color:#fff;}
  .nav-bottom .module-btn.active{background:#ecfdf5; color:var(--forest);}
  .nav-bottom .module-btn.active .module-btn-icon{background:var(--primary-600);}
  .sidebar-foot{display:none !important;}

  /* Module header: a soft green band with the icon tile; menu tabs as pills underneath */
  header{
    background:
      radial-gradient(520px 200px at 100% 0%, rgba(163,230,53,.16), transparent 70%),
      linear-gradient(180deg,var(--primary-50),var(--bg));
    border-bottom:none; padding:24px 32px 18px;
  }
  header h1{font-size:22px; letter-spacing:-.02em;}
  header h1 .hdr-ico{width:40px; height:40px; border-radius:12px; background:var(--primary-600); color:#fff; border:none; box-shadow:var(--sh-teal);}
  header p{margin-left:51px;}
  .role-switcher-slot{top:20px; right:28px;}
  nav{
    top:var(--topbar-h); background:var(--bg); border-bottom:none; padding:6px 28px 10px; gap:6px;
  }
  nav button{border:1px solid var(--line); border-radius:999px; padding:7px 15px; margin:0; background:var(--card); font-size:12.5px; border-bottom-width:1px;}
  nav button:hover{background:var(--primary-50); border-color:var(--soft-blue-line); color:var(--primary-700);}
  nav button.active{background:var(--primary-700); border-color:var(--primary-700); color:#fff; box-shadow:var(--sh-teal);}
  @media(pointer:coarse){ nav button{padding:10px 16px;} }

  /* Cards: accent stripe on the left instead of the top, rounder */
  .card{border-radius:14px;}
  .card::before{left:0; right:auto; top:12px; bottom:12px; width:4px; height:auto; border-radius:0 4px 4px 0;}
  .section-title::before{width:8px; height:8px; border-radius:50%; background:var(--primary-600); box-shadow:0 0 0 4px var(--primary-100);}
  .btn{border-radius:999px;}
  .btn.small{border-radius:999px;}
  .btn:not(.secondary):not(.danger){background:var(--primary-600); border-color:var(--primary-600); color:#fff;}
  .btn:not(.secondary):not(.danger):hover{background:var(--primary-700); border-color:var(--primary-700);}
  th{background:var(--primary-50); color:var(--primary-700);}
  .table-scroll-wrap, table{border-radius:12px;}
  .modal{border-radius:18px;}

  .auth-screen{
    background:
      radial-gradient(800px 480px at 10% 0%, rgba(52,211,153,.22), transparent 62%),
      radial-gradient(700px 420px at 100% 100%, rgba(163,230,53,.14), transparent 62%),
      linear-gradient(160deg,var(--forest),#0a2c21 60%,#071f17);
  }
  .auth-card{border-radius:20px; border:none;}
  .auth-card h2 .hdr-ico{background:var(--primary-600); color:#fff; border-radius:10px;}

  /* dark theme: the bar keeps its green; surfaces follow the tokens */
  html[data-theme="dark"] .module-sidebar{background:linear-gradient(100deg,#04261c,#073a2b 70%,#0a4433);}
  html[data-theme="dark"] .nav-group.has-active > .nav-group-label, html[data-theme="dark"] .nav-bottom .module-btn.active{background:#1a4430; color:#d3f5e1;}
  html[data-theme="dark"] .btn:not(.secondary):not(.danger){color:#052e1f;}
  html[data-theme="dark"] nav button.active{color:#052e1f; background:var(--primary-600); border-color:var(--primary-600);}
  html[data-theme="dark"] header h1 .hdr-ico{color:#052e1f;}

  /* narrow screens: the bar wraps, dropdowns span the width */
  @media(max-width:900px){
    .brand-text small{display:none;}
    .module-sidebar .nav-group-label{padding:0 10px; font-size:12.5px;}
  }
  @media(max-width:760px){
    :root{--topbar-h:auto;}
    .module-sidebar, html.sidebar-min .module-sidebar{height:auto; flex-wrap:wrap; padding:8px 10px; row-gap:6px; position:sticky;}
    .nav-group, html.sidebar-min .nav-group{position:static;}
    .nav-menu{left:8px; right:8px; top:calc(100% + 6px); min-width:0;}
    .module-sidebar-title{margin-right:auto; order:0;}
    .nav-group.nav-bottom{order:1; margin-left:0;}
    .module-sidebar::after{content:""; order:2; flex-basis:100%; height:0;}
    .nav-group[data-group]{order:3;}
    .nav-bottom .module-btn-label{display:none;}
    .nav-bottom .module-btn, html.sidebar-min .nav-bottom .module-btn{padding:5px;}
    nav{top:0; position:relative; padding:6px 14px 10px;}
    header{padding:18px 16px 14px;}
    header p{margin-left:0;}
  }
  }

  /* ===== Login (Kanca Portal): split screen — brand panel left, form right; stacks on phones ===== */
  @media screen{
  .auth-screen{padding:0; align-items:stretch; justify-content:stretch; overflow-y:auto; background:var(--bg);}
  .auth-split{width:100%; min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);}
  .auth-hero{
    position:relative; overflow:hidden; color:#e8fff3; padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; gap:40px;
    background:
      radial-gradient(600px 380px at 85% 10%, rgba(163,230,53,.22), transparent 65%),
      radial-gradient(700px 500px at 0% 100%, rgba(52,211,153,.28), transparent 60%),
      linear-gradient(155deg,#063f2f 0%,#06382a 45%,#042419 100%);
  }
  .auth-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:22px 22px;
    -webkit-mask-image:linear-gradient(120deg,#000 10%,transparent 70%); mask-image:linear-gradient(120deg,#000 10%,transparent 70%);
  }
  .auth-hero > *{position:relative; z-index:1;}
  .auth-hero-brand, .auth-card-brand{display:flex; align-items:center; gap:12px;}
  .auth-hero-brand strong, .auth-card-brand strong{display:block; font-size:17px; font-weight:800; letter-spacing:.01em;}
  .auth-hero-brand small, .auth-card-brand small{display:block; font-size:11.5px; opacity:.75;}
  .auth-hero-brand .brand-mark{width:42px; height:42px; font-size:22px; border-radius:12px;}
  .auth-hero-copy{max-width:520px;}
  .auth-hero-copy h1{margin:0 0 14px; font-size:40px; line-height:1.1; font-weight:800; letter-spacing:-.03em; color:#fff;}
  .auth-hero-copy p{margin:0 0 28px; font-size:15.5px; line-height:1.6; color:#b7ecd2;}
  .auth-hero-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .auth-hero-list li{display:flex; align-items:center; gap:12px; font-size:14px; color:#dcfbe9;}
  .auth-hero-list li span{width:34px; height:34px; flex:none; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:#a3e635;}
  .auth-hero-foot{font-size:12px; color:#8fd1b0;}

  .auth-panel{display:flex; align-items:center; justify-content:center; padding:40px 28px; background:var(--card);}
  .auth-card, .auth-screen .auth-card{max-width:380px; width:100%; padding:0; border:none; border-radius:0; box-shadow:none; background:transparent; animation:modalIn .3s var(--ease) both;}
  .auth-card-brand{display:none; margin-bottom:28px; color:var(--navy);}
  .auth-card-brand .brand-mark{width:38px; height:38px;}
  .auth-title{margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--navy);}
  .auth-sub{margin:0 0 24px; font-size:14px; color:var(--muted);}
  .auth-field label{font-size:12.5px; font-weight:600; color:var(--navy-2);}
  .auth-input{position:relative; display:flex; align-items:center;}
  .auth-input > .ico{position:absolute; left:14px; color:var(--muted-2); pointer-events:none;}
  .auth-screen .auth-input input{width:100%; height:48px; padding:0 64px 0 42px; border-radius:12px; border:1px solid var(--line-strong); background:var(--bg-2); font-size:14.5px;}
  .auth-screen .auth-input input:focus{outline:none; border-color:var(--primary-600); background:var(--card); box-shadow:var(--ring);}
  .auth-eye{position:absolute; right:8px; height:32px; padding:0 10px; border:none; border-radius:8px; background:transparent; color:var(--primary-700); font:600 12px/1 inherit; font-family:inherit; cursor:pointer;}
  .auth-eye:hover{background:var(--primary-50);}
  .auth-actions{margin-top:18px;}
  .auth-submit, .btn.auth-submit{height:48px; width:100%; border-radius:12px; font-size:15px; font-weight:700; letter-spacing:.01em; background:linear-gradient(135deg,#059669,#047857); border:none; box-shadow:0 10px 24px -12px rgba(4,120,87,.8);}
  .btn.auth-submit:hover{background:linear-gradient(135deg,#047857,#065f46);}
  .auth-help{margin-top:18px; font-size:12.5px; color:var(--muted-2); text-align:center;}
  .auth-error{border-radius:10px;}

  html[data-theme="dark"] .auth-panel{background:var(--bg);}
  html[data-theme="dark"] .btn.auth-submit{color:#fff;}

  @media(max-width:900px){
    .auth-split{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
    .auth-hero{padding:28px 24px 30px; gap:18px;}
    .auth-hero-copy h1{font-size:26px; margin-bottom:8px;}
    .auth-hero-copy p{margin:0; font-size:14px;}
    .auth-hero-list, .auth-hero-foot, .auth-hero-brand{display:none;}
    .auth-card-brand{display:flex;}
    .auth-panel{align-items:flex-start; padding:28px 20px 40px; border-radius:22px 22px 0 0; margin-top:-18px; position:relative;}
  }
  }

  /* ===== Module Settings (js/modulesettings.js): one card per optional module with an on/off switch ===== */
  .ms-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px;}
  .ms-card{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px; cursor:pointer; box-shadow:var(--sh-1); transition:border-color .15s var(--ease), background .15s var(--ease);}
  .ms-card:hover{border-color:var(--soft-blue-line);}
  .ms-card.is-on{border-color:var(--soft-blue-line); background:linear-gradient(180deg,var(--primary-50),var(--card));}
  .ms-ico{width:40px; height:40px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--bg-2); color:var(--muted-2);}
  .ms-card.is-on .ms-ico{background:var(--primary-600); color:#fff;}
  .ms-ico .ico{width:19px; height:19px;}
  .ms-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
  .ms-text strong{font-size:14px; color:var(--navy);}
  .ms-text span{font-size:12px; color:var(--muted); line-height:1.4;}
  .ms-switch{position:relative; flex:none; width:44px; height:26px;}
  .ms-switch input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; z-index:1;}
  .ms-track{position:absolute; inset:0; border-radius:999px; background:var(--line-strong); transition:background .15s var(--ease);}
  .ms-track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s var(--ease);}
  .ms-switch input:checked + .ms-track{background:var(--primary-600);}
  .ms-switch input:checked + .ms-track::after{transform:translateX(18px);}
  .ms-switch input:focus-visible + .ms-track{outline:2px solid var(--primary-600); outline-offset:2px;}
  html[data-theme="dark"] .ms-card.is-on .ms-ico{color:#052e1f;}