:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  --navy:#0f172a;
  --text:#172033;
  --muted:#687386;
  --line:#e3e8f0;
  --primary:#4f46e5;
  --primary-2:#6366f1;
  --primary-soft:#eef2ff;
  --green:#15966a;
  --green-soft:#e8f7f1;
  --amber:#b7791f;
  --amber-soft:#fff6df;
  --red:#c2414a;
  --red-soft:#fff0f1;
  --blue:#2563eb;
  --blue-soft:#eaf2ff;
  --shadow:0 18px 48px rgba(15,23,42,.08);
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --radius:18px;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.bg-orb{display:none}

/* ---------- Login ---------- */
.login-shell{min-height:100svh;display:grid;grid-template-columns:minmax(360px,520px) minmax(420px,1fr);align-items:center;gap:80px;max-width:1280px;margin:auto;padding:56px 40px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow)}
.login-brand,.app-brand{display:flex;align-items:center;gap:12px}
.login-brand>div:last-child,.app-brand>span:last-child{display:grid;gap:2px}
.login-brand strong,.app-brand strong{font-weight:750;letter-spacing:-.02em;color:var(--navy)}
.login-brand span,.app-brand small{font-size:.75rem;color:var(--muted)}
.brand-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-weight:800;letter-spacing:-.04em;color:#fff;background:linear-gradient(145deg,#4338ca,#6366f1);box-shadow:0 10px 24px rgba(79,70,229,.22)}
.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:.76rem}
.login-copy{margin:42px 0 28px}
.eyebrow,.crumb{display:inline-flex;align-items:center;gap:8px;font-size:.67rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.login-copy h1{font-size:clamp(2.15rem,4vw,3.35rem);line-height:1.04;letter-spacing:-.055em;margin:10px 0 16px;color:var(--navy)}
.login-copy p{margin:0;max-width:48ch;color:var(--muted);line-height:1.72;font-size:.94rem}
.login-form{display:grid;gap:14px}
.login-form label,.form-card label{display:grid;gap:7px;color:#475569;font-size:.76rem;font-weight:700}
.login-form input,.form-card input,.form-card textarea,.form-card select{width:100%;border:1px solid #d8dee8;background:#fff;color:var(--text);border-radius:11px;padding:11px 12px;outline:none;transition:.18s border-color,.18s box-shadow}
.login-form input{height:48px}
.login-form input:focus,.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:#818cf8;box-shadow:0 0 0 4px rgba(99,102,241,.10)}
.primary-btn,.ghost-btn,.logout-btn,.mini-btn,.secondary-btn{border:0;border-radius:10px;font-weight:750;transition:.18s transform,.18s background,.18s border-color}
.primary-btn{min-height:48px;background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.20)}
.primary-btn:hover,.mini-btn:hover{transform:translateY(-1px);background:#4338ca}
.login-error{min-height:18px;margin:0;color:var(--red);font-size:.73rem}
.demo-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.demo-switch button{display:grid;gap:3px;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--text);transition:.18s border-color,.18s background}
.demo-switch button:hover{border-color:#a5b4fc;background:#fafbff}
.demo-switch span{font-size:.77rem;font-weight:750}
.demo-switch small{color:var(--muted);font-size:.64rem}
.demo-note{margin:14px 0 0;color:#7b8494;font-size:.69rem}.demo-note code{color:var(--primary);background:var(--primary-soft);padding:2px 5px;border-radius:5px}
.login-preview{display:grid;place-items:center}
.preview-window{width:min(100%,620px);aspect-ratio:1.18;border:1px solid #dfe4ec;border-radius:28px;background:#fff;padding:22px;box-shadow:0 30px 90px rgba(15,23,42,.12)}
.preview-top{height:48px;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;display:flex;align-items:center;gap:7px;padding:0 15px;color:#8893a5;font-size:.76rem;background:#fbfcfe}
.preview-top i{width:8px;height:8px;border-radius:50%;background:#d6dbe4}.preview-top span{margin:auto}
.preview-body{height:calc(100% - 48px);border:1px solid var(--line);border-radius:0 0 18px 18px;display:grid;grid-template-columns:72px 1fr;background:#fff}
.preview-side{border-right:1px solid var(--line);padding:17px;display:grid;align-content:start;gap:15px;background:#f8fafc}
.preview-side b{height:38px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center}.preview-side i{height:7px;border-radius:99px;background:#e3e8f0}
.preview-main{padding:38px 34px}.preview-main small{color:var(--primary);font-weight:800;letter-spacing:.13em}.preview-main strong{display:block;font-size:3.8rem;color:var(--navy);margin:10px 0}
.preview-progress{height:9px;background:#edf0f5;border-radius:999px;overflow:hidden}.preview-progress span{display:block;width:68%;height:100%;background:linear-gradient(90deg,#4f46e5,#818cf8)}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.preview-grid i{height:62px;border:1px solid var(--line);border-radius:12px;background:#fafbfc}
.preview-lines{display:grid;gap:10px}.preview-lines i{height:9px;border-radius:99px;background:#e8edf3}.preview-lines i:nth-child(2){width:82%}.preview-lines i:nth-child(3){width:66%}

/* ---------- App shell ---------- */
.app-shell:not([hidden]){min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);padding:20px 16px}
.app-brand{padding:4px 6px 22px}
.side-nav{display:grid;gap:4px}
.side-nav button{width:100%;border:0;background:transparent;color:#667085;border-radius:9px;display:flex;align-items:center;gap:11px;text-align:left;padding:10px 11px;font-size:.76rem;font-weight:650}
.side-nav button span{width:20px;text-align:center;color:#8d98aa}
.side-nav button:hover{background:#f7f8fb;color:var(--navy)}
.side-nav button.active{background:var(--primary-soft);color:#4338ca}.side-nav button.active span{color:#4f46e5}
.sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:9px}
.role-mini,.user-chip{display:flex;align-items:center;gap:10px}.role-mini>div,.user-chip>div{display:grid;gap:2px}.role-mini strong,.user-chip strong{font-size:.72rem}.role-mini small,.user-chip small{color:var(--muted);font-size:.62rem}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#4338ca;font-weight:800;font-size:.69rem;flex:0 0 auto}
.ghost-btn,.logout-btn{min-height:36px;font-size:.7rem}.ghost-btn{background:#f8fafc;color:#536070;border:1px solid var(--line)}.logout-btn{background:#fff;color:#b4232f;border:1px solid #f1d8da}.compact{min-height:34px}
.mobile-head,.mobile-nav{display:none}
.workspace{min-width:0;padding:34px clamp(24px,4vw,54px) 60px}
.workspace-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.workspace-top h1{font-size:2rem;letter-spacing:-.04em;color:var(--navy);margin:7px 0 0}.workspace-top .crumb{color:#7c8494;font-size:.61rem}.workspace-top .crumb b{color:var(--primary)}
.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{width:39px;height:39px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#475569;font-weight:800}.user-chip{min-width:170px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.role-pill{padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:#4338ca;font-size:.63rem;font-weight:800}
.view-root{max-width:1320px}.grid{display:grid;gap:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* ---------- Dashboard ---------- */
.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat-card{padding:18px}.stat-card small{color:#7b8494;font-size:.63rem;font-weight:800;letter-spacing:.06em}.stat-card strong{display:block;font-size:1.7rem;color:var(--navy);margin:9px 0 3px;letter-spacing:-.03em}.stat-card span{font-size:.67rem;color:#7b8494}.stat-card .good{color:var(--green)}.stat-card .warn{color:var(--amber)}
.dashboard-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.72fr);margin-top:14px}.section-card{padding:20px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px}.card-head h2,.card-head h3{margin:0;color:var(--navy);letter-spacing:-.025em}.card-head h2{font-size:1.08rem}.card-head h3{font-size:.92rem}.card-head p{margin:5px 0 0;color:var(--muted);font-size:.7rem;line-height:1.5}.text-link{border:0;background:transparent;color:var(--primary);font-size:.7rem;font-weight:750}
.progress-block{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe}.progress-row{display:flex;justify-content:space-between;gap:12px;align-items:end}.progress-row strong{display:block;font-size:2.25rem;color:var(--navy);letter-spacing:-.04em;margin-top:3px}.progress-row span,.progress-block>span{color:var(--muted);font-size:.69rem}.progress-bar{height:8px;background:#edf0f5;border-radius:999px;overflow:hidden;margin:12px 0 8px}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#818cf8);border-radius:inherit}
.timeline,.upcoming-list,.milestone-list,.submission-list,.feedback-list,.schedule-list,.team-list,.announcement-list{display:grid;gap:9px}.timeline-item{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid #edf0f4}.timeline-item:last-child{border-bottom:0}.timeline-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f1f4f9;color:var(--primary);font-size:.68rem}.timeline-item strong{display:block;font-size:.74rem;color:#334155}.timeline-item p{margin:3px 0 0;color:var(--muted);font-size:.65rem}.date-badge{color:#8a94a4;font-size:.61rem}
.upcoming-item{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.upcoming-item span{display:block;color:var(--primary);font-size:.57rem;font-weight:850;letter-spacing:.1em}.upcoming-item strong{display:block;margin:5px 0 3px;font-size:.74rem;color:#334155}.upcoming-item small{color:var(--muted);font-size:.64rem}

/* ---------- Project ---------- */
.project-hero{padding:24px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}.project-hero .label{color:var(--primary);font-size:.62rem;letter-spacing:.14em;font-weight:850}.project-hero h2{font-size:clamp(1.7rem,3vw,2.45rem);letter-spacing:-.045em;color:var(--navy);margin:8px 0}.project-hero p{color:var(--muted);max-width:68ch;line-height:1.68;font-size:.77rem}.meta-row,.submission-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.meta-row span,.submission-meta span{font-size:.58rem;color:#667085;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:#fafbfc}
.project-ring{width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--primary) 0 68%,#e8ebf1 68%);display:grid;place-items:center;position:relative}.project-ring:before{content:"";width:88px;height:88px;border-radius:50%;background:#fff}.project-ring span{position:absolute;font-size:1.25rem;font-weight:800;color:var(--navy)}
.info-grid{grid-template-columns:repeat(3,1fr);margin-top:14px}.info-card{padding:17px}.info-card small{color:#7b8494;font-size:.6rem;font-weight:800}.info-card strong{display:block;margin-top:7px;font-size:.82rem;color:#334155}

/* ---------- Lists / forms ---------- */
.milestone{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff}.milestone-num{width:40px;height:40px;border-radius:10px;background:#f2f4f8;color:#5d6b7e;display:grid;place-items:center;font-size:.67rem;font-weight:850}.milestone h3{margin:0;font-size:.78rem;color:#334155}.milestone p{margin:4px 0 0;color:var(--muted);font-size:.64rem;line-height:1.5}
.status{padding:6px 9px;border-radius:999px;font-size:.57rem;font-weight:850;white-space:nowrap}.status.done{background:var(--green-soft);color:var(--green)}.status.active{background:var(--blue-soft);color:var(--blue)}.status.pending{background:var(--amber-soft);color:var(--amber)}.status.revision{background:var(--red-soft);color:var(--red)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.form-card{padding:18px}.form-card textarea{min-height:96px;resize:vertical}.form-card select{appearance:none}.mini-btn{min-height:38px;padding:0 14px;background:var(--primary);color:#fff}.secondary-btn{min-height:36px;padding:0 11px;background:#fff;color:#475569;border:1px solid var(--line);font-size:.68rem}
.submission,.feedback-item,.schedule-item,.team-member,.announcement{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff}.submission{display:grid;grid-template-columns:1fr auto;gap:12px}.submission strong,.feedback-item strong,.schedule-item strong,.team-member strong,.announcement strong{font-size:.75rem;color:#334155}.submission p,.feedback-item p,.schedule-item p,.team-member p,.announcement p{margin:5px 0 0;color:var(--muted);font-size:.65rem;line-height:1.55}.review-actions{display:flex;gap:6px;align-items:center}.review-actions button{border:1px solid var(--line);background:#fff;color:#556274;border-radius:8px;padding:7px 9px;font-size:.6rem}.review-actions button:hover{border-color:#a5b4fc;color:#4338ca}
.feedback-item{display:grid;grid-template-columns:34px 1fr;gap:11px}.feedback-item .avatar{width:34px;height:34px}.feedback-item header,.announcement header{display:flex;justify-content:space-between;gap:12px}.feedback-item time,.announcement time{font-size:.58rem;color:#8b95a6}.feedback-item .reply{margin-top:10px;padding:10px 11px;border-left:3px solid #a5b4fc;background:#f7f8ff;border-radius:0 9px 9px 0}
.schedule-item{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center}.date-tile{width:60px;padding:8px 0;border-radius:10px;background:#f3f5f8;text-align:center}.date-tile b{display:block;color:var(--navy);font-size:1rem}.date-tile span{display:block;font-size:.54rem;color:#7b8494;letter-spacing:.09em}
.team-member{display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center}.team-member .avatar{width:40px;height:40px;border-radius:11px}.team-member .role{color:var(--primary);font-size:.58rem;font-weight:800}.announcement{border-left:3px solid #818cf8}.announcement.important{border-left-color:#f0b44c}.empty{text-align:center;padding:32px;color:#8690a1;font-size:.73rem}
.view-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.view-toolbar p{margin:0;color:var(--muted);font-size:.71rem}.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}.filter-tabs button{border:1px solid var(--line);background:#fff;color:#6a7485;padding:7px 9px;border-radius:999px;font-size:.6rem;font-weight:750}.filter-tabs button.active{color:#4338ca;border-color:#c7d2fe;background:#eef2ff}
.toast{position:fixed;right:24px;bottom:24px;z-index:80;max-width:340px;padding:12px 15px;border-radius:11px;background:#111827;color:#fff;font-size:.72rem;box-shadow:0 18px 50px rgba(15,23,42,.25);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}

/* ---------- Responsive ---------- */
@media(max-width:1050px){.login-shell{grid-template-columns:1fr;max-width:620px}.login-preview{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.split{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:780px){
  .app-shell:not([hidden]){display:block}.sidebar{display:none}
  .mobile-head{position:sticky;top:0;z-index:30;height:60px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}
  .mobile-head .app-brand{padding:0}.workspace{padding:18px 14px 90px}.workspace-top{margin-bottom:16px}.workspace-top .crumb{font-size:.54rem}.workspace-top h1{font-size:1.5rem}.top-actions .user-chip{display:none}.icon-btn{width:36px;height:36px}
  .mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(18px)}
  .mobile-nav button{border:0;background:transparent;color:#8993a3;display:grid;place-items:center;gap:2px;padding:5px 2px}.mobile-nav span{font-size:.9rem}.mobile-nav small{font-size:.52rem;font-weight:800}.mobile-nav button.active{color:var(--primary)}
  .project-hero{grid-template-columns:1fr}.project-ring{display:none}.milestone{grid-template-columns:38px 1fr}.milestone .status{grid-column:2;justify-self:start}.submission{grid-template-columns:1fr}.schedule-item{grid-template-columns:54px 1fr}.schedule-item .status{grid-column:2;justify-self:start}
  .login-shell{padding:20px 14px;min-height:100svh}.login-card{padding:24px 19px;border-radius:20px}.login-copy{margin:30px 0 23px}.login-copy h1{font-size:2.05rem}.demo-switch{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}.section-card{padding:16px;border-radius:15px}.stat-card{padding:15px;border-radius:15px}.stat-card strong{font-size:1.42rem}.view-toolbar{align-items:flex-start;flex-direction:column}.info-grid{grid-template-columns:1fr}.team-member{grid-template-columns:38px 1fr}.team-member .role{grid-column:2}.toast{left:14px;right:14px;bottom:82px;text-align:center}
}

@media(max-width:430px){
  .workspace{padding-inline:11px}.stats-grid{gap:9px}.stat-card{padding:13px}.stat-card small{font-size:.56rem}.stat-card strong{font-size:1.28rem}.card-head{margin-bottom:14px}.login-card{padding:20px 15px}.project-hero{padding:17px}.section-card{padding:14px}.milestone{padding:11px}.workspace-top h1{font-size:1.38rem}.login-copy h1{font-size:1.9rem}.login-copy p{font-size:.86rem}
}