/* ProjectLoop — design system (approved prototype, productionised) */
:root{
  --brand:#146EF5; --brand-2:#7b5cff; --brand-dark:#1058c4;
  --ink:#0F172A; --body:#475569; --muted:#8a93ad; --faint:#aab4c8;
  --nav:#0B1220; --nav-2:#0e1729; --line:#E9EDF4; --line-2:#F1F4F9; --page:#F6F8FC;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --purple:#7c3aed;
  --sh:0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
  --sh-lg:0 12px 40px rgba(15,23,42,.12);
}
*{ box-sizing:border-box; font-family:'Inter',system-ui,sans-serif; }
html,body{ margin:0; height:100%; }
body{ background:var(--page); color:var(--body); font-size:14px; -webkit-font-smoothing:antialiased; display:flex; }
h1,h2,h3,h4,h5{ color:var(--ink); letter-spacing:-.02em; margin:0; }
a{ color:var(--brand); text-decoration:none; }
::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:#d4dbe7; border-radius:8px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:#b9c4d8; }
.avt{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; color:#fff; flex-shrink:0; font-size:11px; }
.muted{ color:var(--muted); } .ink{ color:var(--ink); }

/* sidebar */
.side{ width:250px; flex-shrink:0; height:100vh; position:sticky; top:0; background:linear-gradient(180deg,var(--nav),var(--nav-2)); color:#cbd5e1; display:flex; flex-direction:column; box-shadow:1px 0 0 rgba(255,255,255,.05); z-index:30; }
.ws{ display:flex; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; }
.ws .gem{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; box-shadow:0 4px 12px rgba(20,110,245,.45); }
.ws .nm{ font-weight:800; color:#fff; font-size:15px; letter-spacing:-.01em; line-height:1.1; }
.ws .sub{ font-size:11px; color:#7e8aa3; }
.searchx{ margin:12px; position:relative; }
.searchx i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#5f6b85; font-size:13px; }
.searchx input{ width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07); color:#e5e9f0; border-radius:9px; padding:8px 10px 8px 32px; font-size:13px; outline:none; }
.searchx input::placeholder{ color:#6b7790; }
.searchx .kbd{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:10px; color:#6b7790; background:rgba(255,255,255,.08); border-radius:5px; padding:1px 6px; font-weight:700; }
.nav-scroll{ flex:1; overflow-y:auto; padding:4px 10px 12px; }
.nav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); }
.ni{ display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:9px; color:#aeb9cf; font-weight:500; font-size:13.5px; cursor:pointer; transition:.12s; margin-bottom:1px; text-decoration:none; }
.ni i{ font-size:16px; width:18px; text-align:center; color:#8390a8; }
.ni:hover{ background:rgba(255,255,255,.06); color:#fff; } .ni:hover i{ color:#cdd7ea; }
.ni.on{ background:rgba(20,110,245,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(20,110,245,.45); } .ni.on i{ color:#7eaefe; }
.ni .badge2{ margin-left:auto; background:var(--brand); color:#fff; border-radius:999px; font-size:10px; font-weight:800; padding:1px 7px; }
.sec{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5f6b85; padding:14px 11px 6px; display:flex; align-items:center; justify-content:space-between; }
.sec a{ color:#5f6b85; }
.pj{ display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:9px; color:#aeb9cf; font-size:13px; cursor:pointer; transition:.12s; text-decoration:none; }
.pj:hover{ background:rgba(255,255,255,.06); color:#fff; } .pj.on{ background:rgba(255,255,255,.08); color:#fff; }
.pj .dotc{ width:9px; height:9px; border-radius:3px; flex-shrink:0; } .pj .ct{ margin-left:auto; font-size:11px; color:#6b7790; }
.side-empty{ color:#6b7790; font-size:12px; padding:6px 11px; line-height:1.5; }
.side-foot{ border-top:1px solid rgba(255,255,255,.06); padding:10px 12px; display:flex; align-items:center; gap:10px; }
.side-foot .who b{ color:#fff; font-size:13px; font-weight:700; display:block; } .side-foot .who span{ color:#7e8aa3; font-size:11px; }
.side-foot .ico{ margin-left:auto; color:#6b7790; cursor:pointer; padding:6px; border-radius:7px; text-decoration:none; } .side-foot .ico:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* main */
.main{ flex:1; height:100vh; overflow-y:auto; }
.bar{ min-height:60px; display:flex; align-items:center; gap:14px; padding:0 26px; background:rgba(246,248,252,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.crumb{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.crumb b{ color:var(--ink); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.crumb a{ cursor:pointer; } .crumb .sep{ color:#cbd5e1; font-size:11px; }
.bar-r{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.wrap{ padding:24px 26px 70px; max-width:1320px; } .wrap.wide{ max-width:none; }
.h1{ font-size:22px; font-weight:800; letter-spacing:-.03em; }

/* buttons */
.btn{ border:none; border-radius:9px; font-weight:600; font-size:13px; padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.13s; text-decoration:none; }
.btn:active{ transform:scale(.97); }
.btn-b{ background:linear-gradient(180deg,#3a86f7,var(--brand)); color:#fff; box-shadow:0 1px 2px rgba(20,110,245,.4), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-b:hover{ background:var(--brand-dark); color:#fff; box-shadow:0 6px 16px rgba(20,110,245,.4); transform:translateY(-1px); }
.btn-l{ background:#fff; border:1px solid #dde4ef; color:var(--body); box-shadow:0 1px 2px rgba(15,23,42,.05); }
.btn-l:hover{ background:#f3f6fb; border-color:#c9d4e5; color:var(--ink); }
.btn-g{ background:transparent; color:var(--body); padding:8px 10px; } .btn-g:hover{ background:#eef2f8; color:var(--ink); }
.ico-btn{ width:34px; height:34px; padding:0; justify-content:center; }

/* tabs */
.viewtabs{ display:inline-flex; gap:2px; background:#EAEFF7; padding:4px; border-radius:11px; }
.tab{ padding:8px 13px; font-size:13px; font-weight:600; color:var(--muted); border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:.12s; text-decoration:none; }
.tab i{ font-size:14px; } .tab:hover{ color:var(--ink); } .tab.on{ background:#fff; color:var(--ink); box-shadow:var(--sh); }

/* cards / pills */
.card{ background:#fff; border:1px solid var(--line); border-radius:15px; box-shadow:var(--sh); }
/* status = subtle colored dot + muted text (premium, Linear/Height style — no loud pills) */
.pill{ font-size:11.5px; font-weight:600; padding:0; background:none; color:#64748b; border-radius:0; display:inline-flex; align-items:center; gap:6px; line-height:1.4; }
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:#94a3b8; flex:none; }
.pill.ok::before{ background:#22c55e; } .pill.risk::before{ background:#f59e0b; } .pill.late::before{ background:#ef4444; } .pill.blue::before{ background:#3b82f6; } .pill.grey::before{ background:#cbd5e1; }
/* neutral label chip (task labels keep their own inline colours) */
.tag{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; display:inline-block; letter-spacing:.01em; background:#F1F4F9; color:#64748b; }
/* service = small uppercase label with a tiny colour marker — distinct but quiet */
.svc-seo,.svc-ads,.svc-web,.svc-content,.svc-other{ background:none; padding:0; border-radius:0; text-transform:uppercase; letter-spacing:.07em; font-size:10px; font-weight:700; color:#8a93ad; display:inline-flex; align-items:center; gap:5px; }
.svc-seo::before,.svc-ads::before,.svc-web::before,.svc-content::before,.svc-other::before{ content:''; width:7px; height:7px; border-radius:2px; flex:none; background:#94a3b8; }
.svc-seo::before{ background:#146EF5; } .svc-ads::before{ background:#ea580c; } .svc-web::before{ background:#16a34a; } .svc-content::before{ background:#7c3aed; }
.bar-pg{ height:7px; border-radius:999px; background:#EEF2F8; overflow:hidden; } .bar-pg > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#3a86f7,var(--brand)); }
.stack{ display:flex; } .stack .avt{ border:2px solid #fff; margin-left:-7px; box-shadow:0 0 0 .5px rgba(15,23,42,.06); } .stack .avt:first-child{ margin-left:0; }
.ck{ width:18px; height:18px; border-radius:5px; border:2px solid #cbd5e1; display:inline-block; vertical-align:middle; cursor:pointer; } .ck.done{ background:var(--brand); border-color:var(--brand); }

/* tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.tile{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px 18px; box-shadow:var(--sh); }
.tile .lab{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; display:flex; align-items:center; gap:8px; }
.tile .lab .ic{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.tile .v{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-top:8px; line-height:1; } .tile .s{ font-size:12px; color:var(--muted); margin-top:7px; }

/* kanban */
.board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.kcol{ width:290px; flex-shrink:0; background:#EEF2F8; border-radius:14px; padding:9px; }
.khead{ display:flex; align-items:center; gap:8px; padding:5px 7px 10px; font-weight:800; font-size:12.5px; color:#475569; }
.khead .dot{ width:9px; height:9px; border-radius:50%; } .khead .ct{ background:#fff; color:#8a93ad; border-radius:999px; font-size:11px; padding:1px 8px; } .khead .pl{ margin-left:auto; color:#94a3b8; cursor:pointer; }
.tk{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:9px; box-shadow:var(--sh); cursor:pointer; transition:.13s; border-left:3px solid transparent; }
.tk:hover{ box-shadow:0 8px 22px rgba(15,23,42,.11); transform:translateY(-1px); }
.tk.drag{ opacity:.5; } .kcol.over{ outline:2px dashed var(--brand); outline-offset:-4px; }
.tk.p-high,.tk.p-urgent{ border-left-color:#ef4444; } .tk.p-medium{ border-left-color:#f59e0b; } .tk.p-low{ border-left-color:#94a3b8; }
.tk .id{ font-size:11px; color:var(--faint); font-weight:700; }
.tk .tt{ font-weight:600; color:var(--ink); font-size:13.5px; line-height:1.4; margin:3px 0 0; }
.tk .labs{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.tk .mr{ display:flex; align-items:center; gap:12px; margin-top:10px; color:var(--muted); font-size:11.5px; } .tk .mr .due.late{ color:var(--bad); font-weight:700; }
.kadd{ text-align:center; color:#94a3b8; font-size:12.5px; font-weight:600; padding:8px; border-radius:9px; cursor:pointer; } .kadd:hover{ background:#fff; color:var(--brand); }

/* list/table */
.lst{ width:100%; border-collapse:collapse; } .lst th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:800; padding:10px 12px; border-bottom:1px solid var(--line); }
.lst td{ padding:12px; border-bottom:1px solid var(--line-2); font-size:13px; } .lst tbody tr{ cursor:pointer; } .lst tbody tr:hover{ background:#F7FAFF; }
.grp-row td{ background:#FAFBFE; font-weight:800; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }

/* gantt */
.gantt{ overflow-x:auto; } .gantt-grid{ min-width:760px; }
.gantt-week{ display:grid; grid-template-columns:220px repeat(7,1fr); border-bottom:1px solid var(--line); } .gantt-week div{ padding:9px 10px; font-size:11.5px; font-weight:700; color:var(--muted); text-align:center; } .gantt-week div:first-child{ text-align:left; }
.gantt-row{ display:grid; grid-template-columns:220px 1fr; align-items:center; border-bottom:1px solid var(--line-2); height:46px; } .gantt-row .nm{ font-size:13px; font-weight:600; color:var(--ink); padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt-track{ position:relative; height:100%; } .gantt-bar{ position:absolute; top:50%; transform:translateY(-50%); height:22px; border-radius:7px; background:linear-gradient(90deg,#3a86f7,var(--brand)); display:flex; align-items:center; padding:0 9px; color:#fff; font-size:11px; font-weight:700; box-shadow:0 3px 8px rgba(20,110,245,.3); }
.gantt-bar.ms{ background:linear-gradient(90deg,#7c3aed,#a855f7); } .gantt-bar.dn{ background:#cbd5e1; color:#475569; box-shadow:none; }

/* discussions / docs / files */
.disc{ display:grid; grid-template-columns:200px 1fr; height:560px; }
.chan{ border-right:1px solid var(--line); padding:10px; } .chan .c{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--body); cursor:pointer; font-weight:500; } .chan .c.on{ background:#EAF1FE; color:var(--brand); font-weight:700; } .chan .c:hover{ background:#f1f5fb; }
.chat{ display:flex; flex-direction:column; } .msgs{ flex:1; overflow-y:auto; padding:18px 20px; }
.msg{ display:flex; gap:11px; margin-bottom:16px; } .msg .bub{ background:#F4F7FC; border-radius:13px; padding:10px 14px; font-size:13.5px; max-width:560px; } .msg .bub .who{ font-weight:700; color:var(--ink); font-size:12.5px; margin-bottom:2px; } .msg.me .bub{ background:#E8F0FE; }
.composer{ border-top:1px solid var(--line); padding:13px 18px; display:flex; gap:10px; align-items:center; } .composer input{ flex:1; border:1px solid #dde4ef; border-radius:10px; padding:11px 14px; font-size:13.5px; outline:none; }
.docs{ display:grid; grid-template-columns:230px 1fr; height:560px; } .doctree{ border-right:1px solid var(--line); padding:12px; } .doctree .d{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; font-size:13px; color:var(--body); cursor:pointer; } .doctree .d.on{ background:#EAF1FE; color:var(--brand); font-weight:700; } .doctree .d:hover{ background:#f1f5fb; }
.docbody{ padding:30px 40px; overflow-y:auto; } .docbody h2{ font-size:24px; margin-bottom:6px; } .docbody p{ line-height:1.7; color:#334155; } .docbody h3{ margin:20px 0 8px; font-size:16px; }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; } .fc{ border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; transition:.13s; background:#fff; } .fc:hover{ box-shadow:var(--sh-lg); transform:translateY(-2px); } .fc .th{ height:96px; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; } .fc .mt{ padding:9px 11px; } .fc .mt b{ font-size:12.5px; color:var(--ink); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fc .mt span{ font-size:11px; color:var(--muted); }

/* project cards */
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.proj{ background:#fff; border:1px solid var(--line); border-radius:15px; box-shadow:var(--sh); padding:17px; cursor:pointer; position:relative; overflow:hidden; transition:.16s; } .proj:hover{ box-shadow:0 10px 32px rgba(15,23,42,.10); transform:translateY(-2px); } .proj .svc{ position:absolute; left:0; top:0; width:4px; height:100%; }

/* drawer */
.scrim{ position:fixed; inset:0; background:rgba(7,12,24,.4); backdrop-filter:blur(2px); z-index:90; opacity:0; pointer-events:none; transition:.18s; } .scrim.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100vh; width:760px; max-width:96vw; background:#fff; z-index:100; box-shadow:-24px 0 70px rgba(2,8,26,.25); transform:translateX(102%); transition:transform .22s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } .drawer.show{ transform:none; }
.dh{ display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); } .db{ flex:1; overflow-y:auto; }
.dsec{ padding:18px 24px; border-bottom:1px solid var(--line); } .df{ display:flex; align-items:center; gap:12px; padding:6px 0; } .df .k{ width:130px; color:var(--muted); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.chipv{ background:#F2F6FE; border:1px solid #dbe6fb; color:#1e3a8a; border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.subr{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13px; } .timerx{ display:inline-flex; align-items:center; gap:9px; background:var(--nav); color:#fff; border-radius:9px; padding:7px 13px; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.aibox{ background:linear-gradient(180deg,#FbFcff,#eef4ff); border:1px solid #dbe6fb; border-radius:13px; padding:14px; } .cmt{ display:flex; gap:11px; padding:10px 0; }

/* reports / misc */
.util{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.spark{ display:flex; align-items:flex-end; gap:5px; height:60px; } .spark span{ width:16px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#3a86f7,var(--brand)); }
.note{ display:flex; align-items:center; gap:13px; background:linear-gradient(100deg,#0B1220,#13213d); color:#fff; border-radius:14px; padding:14px 18px; box-shadow:0 10px 28px rgba(2,8,26,.22); } .note .p{ width:38px; height:38px; border-radius:10px; background:rgba(20,110,245,.25); color:#7eaefe; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.sync-chip{ display:inline-flex; align-items:center; gap:6px; background:#E7F7ED; color:#15803d; border:1px solid #c3ecd0; border-radius:999px; font-size:11.5px; font-weight:700; padding:3px 11px; }
.ai-card{ display:flex; gap:12px; padding:13px; border-radius:12px; border:1px solid var(--line); background:#fff; margin-bottom:10px; } .ai-card.warn{ border-color:#f6ddb4; background:#fffdf7; } .ai-card.critical{ border-color:#f6cccc; background:#fffafa; }
.ai-card .ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; }

/* forms / inputs */
.field{ margin-bottom:14px; } .field label{ font-size:12.5px; font-weight:700; color:var(--body); display:block; margin-bottom:6px; }
.inp{ width:100%; padding:10px 12px; border:1px solid #dde4ef; border-radius:9px; font-size:13.5px; outline:none; font-family:inherit; } .inp:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(20,110,245,.12); }
.empty{ text-align:center; padding:50px 20px; color:#8a93ad; } .empty .big{ font-size:40px; color:#c9d6f5; display:block; margin-bottom:10px; }
.modal-scrim{ position:fixed; inset:0; background:rgba(7,12,24,.45); backdrop-filter:blur(3px); z-index:110; display:flex; align-items:flex-start; justify-content:center; padding-top:9vh; }
.modal-box{ width:620px; max-width:94vw; background:#fff; border-radius:18px; box-shadow:var(--sh-lg); overflow:hidden; }

/* login */
.auth-wrap{ width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(900px 500px at 50% -120px, rgba(20,110,245,.10), transparent 60%), var(--page); }
.auth-card{ width:400px; max-width:92vw; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-lg); padding:32px; }
.auth-logo{ width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; margin-bottom:18px; }
.flash{ background:#E7F7ED; color:#15803d; border:1px solid #c3ecd0; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px; }
.flash.err{ background:#FDEBEC; color:#b42318; border-color:#f6cccc; }

@media(max-width:1100px){ .tiles{ grid-template-columns:1fr 1fr; } }
@media(max-width:860px){ .side{ position:fixed; left:0; transform:translateX(-100%); transition:.2s; } .side.open{ transform:none; } .main{ width:100%; } }