:root { --ink:#17231f; --muted:#647875; --line:#d7e7e5; --paper:#f2f9f8; --white:#fff; --turquoise:#0f766e; --mint:#ccfbf1; --amber:#e4a23b; --red:#c95c4b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-art { padding:clamp(2rem,7vw,7rem); color:#effffc; background:#134e4a; position:relative; overflow:hidden; }
.login-art:after { content:""; position:absolute; width:28rem; height:28rem; border:1px solid #5eead4; border-radius:50%; right:-9rem; bottom:-9rem; box-shadow:0 0 0 4rem #134e4a,0 0 0 4.1rem #5eead4; opacity:.45; }
.brand { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.04em; }
.login-art h1 { max-width:560px; margin:6rem 0 1.25rem; font:700 clamp(2.5rem,5vw,5.4rem)/.98 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.login-art p { max-width:480px; color:#b9eee6; font-size:1.05rem; line-height:1.7; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-box { width:min(100%,420px); background:var(--white); border:1px solid var(--line); padding:2.25rem; box-shadow:0 18px 50px #19392b10; }
h2,h3 { font-family:'Space Grotesk',sans-serif; }
.login-box h2 { margin:.25rem 0 .5rem; font-size:2rem; }
.muted { color:var(--muted); }
label { display:block; font-size:.82rem; font-weight:700; margin:1.15rem 0 .4rem; }
input,textarea,select { width:100%; border:1px solid var(--line); background:#fbfefd; color:var(--ink); padding:.78rem .85rem; outline:none; border-radius:4px; }
input:focus,textarea:focus,select:focus { border-color:var(--turquoise); box-shadow:0 0 0 3px #0f766e17; }
.primary { border:0; color:#fff; background:var(--turquoise); padding:.82rem 1rem; font-weight:700; border-radius:4px; }
.primary:hover { background:#115e59; }
.login-box .primary { width:100%; margin-top:1.4rem; }
.message { min-height:1.3rem; font-size:.85rem; margin-top:.8rem; }
.portal { min-height:100vh; display:grid; grid-template-columns:245px 1fr; }
aside { background:#134e4a; color:#d4faf4; padding:1.5rem 1rem; display:flex; flex-direction:column; }
aside .brand { color:#fff; padding:.5rem .75rem 2rem; display:block; }
.nav { display:grid; gap:.25rem; }
.nav button { text-align:left; border:0; color:#a7e4dc; background:transparent; padding:.75rem; border-radius:4px; }
.nav button:hover,.nav button.active { color:#fff; background:#ffffff18; }
.logout { margin-top:auto; border:1px solid #5eead433; color:#a7e4dc; background:transparent; padding:.7rem; border-radius:4px; }
main { min-width:0; }
.topbar { min-height:76px; padding:1rem clamp(1.2rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fbfdf9; }
.topbar h1 { margin:0; font:600 1.35rem 'Space Grotesk',sans-serif; }
.user-chip { display:flex; align-items:center; gap:.65rem; font-size:.85rem; }
.avatar { width:35px; height:35px; display:grid; place-items:center; background:var(--mint); color:var(--turquoise); font-weight:700; border-radius:50%; }
.content { padding:clamp(1.2rem,4vw,3rem); max-width:1440px; }
.eyebrow { color:var(--turquoise); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.welcome { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.7rem; }
.welcome h2 { margin:.35rem 0 .35rem; font-size:clamp(1.8rem,3vw,2.6rem); }
.grid { display:grid; gap:1rem; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:var(--white); border:1px solid var(--line); padding:1.25rem; border-radius:6px; }
.stat-label { color:var(--muted); font-size:.82rem; }
.stat-value { display:block; margin:.5rem 0 .3rem; font:700 1.8rem 'Space Grotesk',sans-serif; }
.status { display:inline-block; padding:.25rem .5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:var(--mint); color:var(--turquoise); }
.modules { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:1rem; }
.module { min-height:150px; display:flex; flex-direction:column; justify-content:space-between; }
.module h3 { margin:.25rem 0 .45rem; font-size:1.1rem; }
.module p { color:var(--muted); margin:0; font-size:.88rem; line-height:1.5; }
.text-button { border:0; padding:0; color:var(--turquoise); background:transparent; font-weight:700; text-align:left; }
.view { display:none; }
.view.active { display:block; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.section-head h2 { margin:.3rem 0 0; font-size:1.8rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }
.form-grid .full { grid-column:1/-1; }
.ticket { border-top:1px solid var(--line); padding:1rem 0; display:flex; justify-content:space-between; gap:1rem; }
.ticket:first-child { border-top:0; }
.ticket h3 { margin:0 0 .3rem; font-size:1rem; }
.ticket p { margin:0; color:var(--muted); font-size:.85rem; }
.admin-user { display:grid; grid-template-columns:1.3fr 1fr 130px 120px; gap:1rem; align-items:center; border-top:1px solid var(--line); padding:1rem 0; }
.admin-user:first-child { border-top:0; }
.admin-user strong { display:block; }
.admin-user small { color:var(--muted); }
.admin-user select { padding:.55rem; }
.roadmap { margin-top:1rem; }
.roadmap-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.roadmap-item { padding:.9rem; background:#f0fbfa; border-left:3px solid var(--turquoise); }
.roadmap-item strong { display:block; font-size:.9rem; }
.roadmap-item span { color:var(--muted); font-size:.8rem; }
@media (max-width:850px) { .login-shell { grid-template-columns:1fr; } .login-art { min-height:300px; padding:2rem; } .login-art h1 { margin:4rem 0 1rem; font-size:3rem; } .portal { grid-template-columns:1fr; } aside { padding:.8rem; } aside .brand { padding:.5rem .75rem 1rem; } .nav { display:flex; overflow:auto; } .nav button { white-space:nowrap; } .logout { margin-top:.7rem; } .stats,.modules,.roadmap-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-user { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .login-art { display:none; } .login-panel { padding:1rem; } .login-box { padding:1.5rem; } .topbar { align-items:flex-start; gap:.6rem; } .user-chip span { display:none; } .content { padding:1rem; } .welcome { display:block; } .stats,.modules,.form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } }