/* EnvOne Portal — cream light theme, logo green accents, Inter */
:root{
  --teal-900:#00301e; --teal-700:#005838; --teal-600:#0a6b46; --teal-500:#12805a;
  --green-500:#2f9e63; --green-400:#4ab578;
  --ink-900:#171e19; --ink-700:#2a332d; --ink-500:#454f48; --ink-300:#66716a;
  --bg:#f4eedd; --surface:#fffdf6; --surface-2:#f7f2e4; --line:#e2d9c1;
  --red:#b23c31; --amber:#9c6a1c; --blue:#0f6db8;
  --shadow-sm:0 1px 2px rgba(64,52,18,.08); --shadow-md:0 8px 24px rgba(64,52,18,.10);
  --radius-sm:10px; --radius-md:16px;
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --speed:.18s; --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --teal-700:#0f6b46; --teal-600:#12805a;
  --ink-900:#f4faf6; --ink-700:#dce6e0; --ink-500:#aebcb4; --ink-300:#84948c;
  --bg:#07201a; --surface:#0e2a23; --surface-2:#0b251f; --line:#1d3b33;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-display);background:var(--bg);color:var(--ink-900);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--font-serif);letter-spacing:-.01em;font-weight:600}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--ink-900);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(18,128,90,.15)}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-500);margin:12px 0 5px}
a{color:var(--teal-600);text-decoration:none}

.boot{display:flex;align-items:center;justify-content:center;min-height:100vh}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--teal-500);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:34px;width:100%;max-width:400px}
.auth-card h1{font-family:var(--font-serif);font-size:26px;color:var(--teal-700);margin-bottom:4px}
[data-theme="dark"] .auth-card h1{color:var(--green-400)}
.auth-card .sub{color:var(--ink-500);font-size:13.5px;margin-bottom:14px}
.auth-switch{margin-top:16px;font-size:13.5px;color:var(--ink-500);text-align:center}
.or-sep{display:flex;align-items:center;gap:12px;margin:18px 0 2px;color:var(--ink-300);font-size:12px;font-weight:600}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Landing ---------- */
.landing{max-width:640px;text-align:center;padding:20px}
.landing-logo{width:220px;height:auto;margin:0 auto 22px;display:block}
.landing h1{font-family:var(--font-serif);font-size:clamp(26px,5vw,36px);color:var(--teal-700);margin-bottom:14px}
[data-theme="dark"] .landing h1{color:var(--green-400)}
.landing-sub{color:var(--ink-500);font-size:15px;line-height:1.65;margin-bottom:18px}
.landing-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:20px}
.landing-chips span{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-700);box-shadow:var(--shadow-sm)}
.landing-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.landing-actions .btn{padding:12px 26px;font-size:14.5px}
[data-theme="dark"] .landing-logo{background:#f4eedd;border-radius:14px;padding:12px 16px}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w,224px);flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{display:block;padding:8px 12px 12px}
.sidebar .logo img{width:130px;height:auto;display:block}
[data-theme="dark"] .sidebar .logo{background:#f4eedd;border-radius:12px;padding:10px 12px;margin:4px 8px 12px}
.nav-sep{height:1px;background:var(--line);margin:10px 10px}
.nav-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-300);padding:2px 12px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:14px;color:var(--ink-500);transition:all var(--speed) var(--ease);width:100%;text-align:left}
.nav-item:hover{background:var(--surface-2);color:var(--ink-900)}
.nav-item.active{background:var(--teal-700);color:#fff}
[data-theme="dark"] .nav-item.active{background:var(--teal-600)}
.nav-item svg{width:17px;height:17px;flex-shrink:0}
.nav-bottom{margin-top:auto}
.user-foot{position:relative;cursor:pointer;outline:none}
.user-id{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-sm);transition:all var(--speed)}
.user-id .ui-info{flex:1;min-width:0}
.ui-gear{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-300);background:var(--surface-2)}
.ui-gear:hover{color:var(--teal-700);background:var(--mist-100)}
.ui-gear svg{width:16px;height:16px}
[data-theme="dark"] .ui-gear:hover{color:var(--green-400)}
.user-foot:hover .user-id,.user-foot.open .user-id{border-color:var(--teal-500)}
.user-id b{display:block;font-size:13.5px;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-id span{display:block;font-size:11.5px;color:var(--ink-300);margin-top:2px}
.user-menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;display:none;z-index:60}
.user-menu .nav-item{font-size:13.5px;padding:8px 11px}
.user-menu .nav-sep{margin:5px 6px}
.user-foot.open .user-menu{display:block;animation:pop .16s var(--ease)}
@media (hover:hover){.user-foot:hover .user-menu,.user-foot:focus-within .user-menu{display:block;animation:pop .16s var(--ease)}}
.role-chip{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);color:var(--teal-600);margin-top:4px}
.main{flex:1;min-width:0;padding:26px 30px 60px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{font-family:var(--font-serif);font-size:24px;color:var(--ink-900)}
.page-head .crumb{font-size:13px;color:var(--ink-300);margin-bottom:2px}

/* mobile */
.topbar{display:none}
@media (max-width:840px){
  .shell{flex-direction:column}
  .sidebar{position:fixed;z-index:50;left:0;top:0;width:min(284px,82vw);transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:var(--shadow-md)}
  .sidebar.open{transform:none}
  .topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
  .topbar .brand{font-family:var(--font-serif);font-weight:700;color:var(--teal-700);font-size:18px}
  .main{padding:18px 14px 60px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45}
  .sb-setting,.sb-modes{display:none}
}

/* ---------- Resizable / collapsible sidebar (desktop) ---------- */
:root{--sb-w:224px}
.sb-open,.sb-close,.sb-resize,.sb-hot{display:none}
.sb-modes{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px;margin:5px 6px}
.sb-modes button{flex:1;font-size:11.5px;font-weight:700;padding:6px 4px;border-radius:99px;color:var(--ink-500);transition:all var(--speed)}
.sb-modes button:hover{color:var(--ink-900)}
.sb-modes button.on{background:var(--teal-700);color:#fff}
[data-theme="dark"] .sb-modes button.on{background:var(--teal-600)}
@media (min-width:841px){
  /* curved edge tabs */
  .sb-open,.sb-close{position:fixed;top:50%;transform:translateY(-50%);width:22px;height:56px;align-items:center;justify-content:center;color:#fff;background:var(--teal-700);box-shadow:0 4px 14px rgba(6,60,45,.3);z-index:48;transition:background .15s}
  [data-theme="dark"] .sb-open,[data-theme="dark"] .sb-close{background:var(--teal-600)}
  .sb-open:hover,.sb-close:hover{background:var(--teal-600)}
  .sb-open svg,.sb-close svg{width:16px;height:16px}
  .sb-open{left:0;border-radius:0 16px 16px 0}
  .sb-close{left:var(--sb-w);border-radius:0 16px 16px 0;transform:translate(-1px,-50%)}

  .sb-resize{position:fixed;top:0;bottom:0;left:calc(var(--sb-w) - 3px);width:8px;cursor:col-resize;z-index:47}
  .sb-resize::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .15s}
  .sb-resize:hover::after,body.sb-resizing .sb-resize::after{background:var(--teal-500)}
  body.sb-resizing{cursor:col-resize;user-select:none}
  .sb-hot{position:fixed;left:0;top:0;bottom:0;width:12px;z-index:43}

  /* docked (pinned or manual-open): sidebar in flow, content shifts beside it */
  html[data-sb="docked"] .sb-resize{display:block}
  html[data-sb="docked"] .sb-close{display:flex}

  /* collapsed: sidebar slides off, content takes full width, open tab shows */
  html[data-sb="collapsed"] .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:46;transform:translateX(calc(-100% - 8px));box-shadow:var(--shadow-lg);transition:transform .22s var(--ease)}
  html[data-sb="collapsed"] .sb-open{display:flex}
  html[data-sb="collapsed"] .sb-hot{display:block}

  /* overlay (auto-hover): sidebar floats over the content */
  html[data-sb="overlay"] .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:46;transform:none;box-shadow:var(--shadow-lg);transition:transform .22s var(--ease)}
  html[data-sb="overlay"] .sb-close{display:flex}
}

/* ---------- Components ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:18px}
.grid{display:grid;gap:14px}
.grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.stat{padding:16px 18px}
.stat .stat-ico{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--teal-700);margin-bottom:8px}
.stat .stat-ico svg{width:18px;height:18px}
[data-theme="dark"] .stat .stat-ico{color:var(--green-400)}
.stat .num{font-size:28px;font-weight:800;color:var(--teal-700)}
[data-theme="dark"] .stat .num{color:var(--green-400)}
.stat .lbl{font-size:12.5px;font-weight:600;color:var(--ink-500);margin-top:2px}
.stat.warn .num{color:var(--amber)}
.stat.bad .num{color:var(--red)}
/* Phone: metrics become a clean 2-up tile grid */
@media (max-width:640px){
  .grid.cols-4,.grid.cols-3{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px 10px 12px;text-align:center;display:flex;flex-direction:column;align-items:center}
  .stat .stat-ico{margin-bottom:5px}
  .stat .num{font-size:23px;line-height:1.1}
  .stat .lbl{font-size:11.5px;line-height:1.25}
}

/* shadcn-style buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:37px;padding:0 16px;border-radius:8px;font-weight:600;font-size:13.5px;line-height:1;transition:all .15s var(--ease);border:1px solid transparent;white-space:nowrap;user-select:none}
.btn:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--teal-700);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn-primary:hover{background:var(--teal-600)}
.btn-ghost{border-color:var(--line);color:var(--ink-900);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink-300)}
.btn-danger{color:var(--red);border-color:var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.btn-danger:hover{background:rgba(192,72,61,.07);border-color:var(--red)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-block{width:100%;justify-content:center;margin-top:16px}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.icon-btn{padding:5px;border-radius:8px;color:var(--ink-300);display:inline-flex;transition:all var(--speed)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink-900)}
.icon-btn svg{width:15px;height:15px}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:10px 14px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-300);border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--speed)}
tbody tr:hover{background:var(--surface-2)}
tr.clickable{cursor:pointer}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.b-pending{background:rgba(127,144,139,.15);color:var(--ink-500)}
.b-in_progress,.b-active,.b-ordered,.b-in_review{background:rgba(18,126,214,.12);color:var(--blue)}
.b-completed,.b-delivered,.b-installed,.b-converted,.b-handed_over{background:rgba(63,174,106,.14);color:var(--green-500)}
.b-delayed,.b-closed,.b-expired{background:rgba(192,72,61,.12);color:var(--red)}
.b-requested,.b-required,.b-new,.b-on_hold{background:rgba(185,127,42,.13);color:var(--amber)}
.b-manufactured,.b-dispatched,.b-commissioned,.b-warranty,.b-amc,.b-enquiry{background:rgba(22,150,140,.13);color:var(--teal-500)}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{width:auto;min-width:150px}
.filters input[type=search]{flex:1;min-width:180px}

.empty{padding:44px 20px;text-align:center;color:var(--ink-300);font-size:14px}
.empty .big{font-size:34px;margin-bottom:8px}

/* ---------- Timeline ---------- */
.tl-progress{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin-bottom:6px}
.tl-progress b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-500),var(--green-400));transition:width .5s var(--ease)}
.tl{position:relative;padding-left:30px}
.tl-step{position:relative;margin-bottom:12px}
/* connector drawn per top-level step so the line stops at the last circle */
.tl-line{display:none}
.tl > .tl-step:not(:last-child) > .tl-line{display:block;position:absolute;left:-19px;top:25px;bottom:-37px;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--teal-500),var(--green-400) 60%,var(--line));z-index:0;pointer-events:none}
.tl-dot{position:absolute;left:-28px;top:15px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--surface);z-index:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--bg);transition:all var(--speed)}
.tl-dot.s-completed{border-color:var(--green-400);background:radial-gradient(circle at 34% 30%,#a6f5cb 0%,var(--green-500) 55%,var(--green-400) 100%);background-clip:padding-box;box-shadow:0 0 0 3px var(--bg),inset 0 1px 1px rgba(255,255,255,.4)}
.tl-dot.s-in_progress{border-color:var(--blue)}
.tl-dot.s-in_progress::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);animation:pulse 1.6s ease-in-out infinite}
.tl-dot.s-delayed{border-color:var(--red)}
.tl-dot.s-delayed::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.45}}
.tl-dot svg{width:11px;height:11px;color:#fff}
.tl-dot.s-completed svg{width:14px;height:14px;filter:drop-shadow(0 1px 1px rgba(0,45,28,.45))}
.tl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 15px;box-shadow:var(--shadow-sm);transition:all var(--speed) var(--ease)}
.tl-card:hover{border-color:var(--teal-500);transform:translateX(3px);box-shadow:var(--shadow-md)}
.tl .tl-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tl-step.dragging{opacity:.55}
.tl-step.dragging>.tl-card{border-style:dashed;border-color:var(--teal-500);transform:scale(1.02);box-shadow:var(--shadow-md)}
.tl-step.over-top::before,.tl-step.over-bottom::after{content:"";position:absolute;left:-4px;right:0;height:5px;border-radius:99px;background:var(--teal-500);box-shadow:0 0 0 2px var(--bg);z-index:3;pointer-events:none}
.tl-step.over-top::before{top:-8px}
.tl-step.over-bottom::after{bottom:-8px}
.tl-step.over-top>.tl-card,.tl-step.over-bottom>.tl-card{border-color:var(--teal-500)}
.tl-card .row1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tl-card .title{font-weight:700;font-size:14px;flex:1}
.tl-card .meta{font-size:12px;color:var(--ink-300);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.tl-card .meta span{display:inline-flex;align-items:center;gap:5px}
.tl-card .meta svg{width:13px;height:13px;flex:none;opacity:.8}
.tl-card .acts{display:flex;gap:2px;opacity:0;transition:opacity var(--speed)}
.tl-card:hover .acts,.tl-card:focus-within .acts{opacity:1}
@media (hover:none){.tl-card .acts{opacity:1}}
.tl-children{margin:12px 0 0 6px;padding-left:22px;border-left:2px dashed var(--line)}
.tl-children .tl-step{margin-bottom:10px}
.tl-children .tl-dot{left:-32px;width:15px;height:15px;top:16px;box-shadow:0 0 0 3px var(--surface)}
.tl-children .tl-dot svg{width:8px;height:8px}
.step-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.step-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.step-thumbs img{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;transition:transform var(--speed)}
.tl-media{position:relative;display:flex;flex-direction:column;gap:3px;width:92px}
.tl-num{position:absolute;top:4px;left:4px;z-index:1;background:rgba(6,28,27,.82);color:#fff;font-size:10.5px;font-weight:800;line-height:1;padding:3px 6px;border-radius:6px;pointer-events:none}
.tl-media img,.tl-media video{width:92px;height:92px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.tl-geo{display:inline-flex;align-items:flex-start;gap:3px;font-size:10px;line-height:1.2;color:var(--teal-700);word-break:break-word}
.tl-geo span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-theme="dark"] .tl-geo{color:var(--green-400)}
.cam-shell{border-radius:12px;overflow:hidden;background:#000;max-height:58vh;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.cam-shell video{width:100%;height:100%;object-fit:cover;display:block}
.cam-geo{font-size:12.5px;color:var(--ink-500);margin:0 0 4px}
.cam-geo.ok{color:var(--teal-700);font-weight:600}
.cam-geo.bad{color:var(--red);font-weight:600}
[data-theme="dark"] .cam-geo.ok{color:var(--green-400)}
.copy-row{display:flex;align-items:stretch;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.copy-row code{flex:1;min-width:0;padding:10px 12px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto;white-space:nowrap;color:var(--ink-900);align-self:center}
.copy-row button{flex:none;border:0;border-left:1px solid var(--line);background:var(--teal-700);color:#fff;font-weight:700;font-size:12.5px;padding:0 16px;cursor:pointer}
.copy-row button:hover{background:var(--teal-600)}
.step-thumbs img:hover{transform:scale(1.06)}
.add-step-btn{display:flex;align-items:center;gap:8px;color:var(--ink-300);font-size:13px;font-weight:600;padding:9px 0;transition:color var(--speed)}
.add-step-btn:hover{color:var(--teal-600)}

/* Priority + notifications + client access */
.b-urgent{background:rgba(192,72,61,.15);color:var(--red);animation:pulse-bg 1.6s ease-in-out infinite}
@keyframes pulse-bg{50%{opacity:.55}}
.b-high{background:rgba(185,127,42,.15);color:var(--amber)}
.b-medium{background:rgba(18,126,214,.10);color:var(--blue)}
.b-low{background:rgba(127,144,139,.14);color:var(--ink-500)}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.notif-row{display:flex;gap:11px;padding:12px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.notif-row:last-child{border-bottom:0}
.notif-row.unread{background:var(--surface-2);border-radius:8px;padding:12px 10px}
.notif-row .dot-u{width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:6px;flex-shrink:0}
.notif-row.urgent .dot-u{background:var(--red);animation:pulse 1.2s infinite}
.flag-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.flag-row:last-child{border-bottom:0}
.switch{position:relative;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:background var(--speed);cursor:pointer}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--speed)}
.switch input:checked + i{background:var(--green-500)}
.switch input:checked + i::after{transform:translateX(18px)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 15px;font-weight:700;font-size:13.5px;color:var(--ink-500);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all var(--speed)}
.tab:hover{color:var(--ink-900)}
.tab.active{color:var(--teal-600);border-bottom-color:var(--teal-600)}

/* ---------- Modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(4,20,17,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .15s}
.modal{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:24px;animation:pop .18s var(--ease)}
.modal h3{font-family:var(--font-serif);font-size:19px;margin-bottom:4px}
.modal .m-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}}

/* ---------- Toast ---------- */
#toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink-900);color:var(--bg);padding:11px 20px;border-radius:99px;font-weight:600;font-size:13.5px;box-shadow:var(--shadow-md);animation:pop .2s var(--ease)}
.toast.err{background:var(--red);color:#fff}

/* ---------- Misc ---------- */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.thumbs img{width:74px;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.doc-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:8px}
.doc-row .nm{font-weight:700;font-size:13.5px;flex:1;word-break:break-all}
.doc-row .cat{font-size:11.5px;color:var(--ink-300)}
.section-title{font-weight:800;font-size:15px;margin:22px 0 10px;display:flex;align-items:center;justify-content:space-between}
.muted{color:var(--ink-300);font-size:12.5px}
.prj-title-block h2{margin-bottom:2px}
.list-links a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink-700)}
.list-links a:hover{color:var(--teal-600)}