@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  --navy:#003a39; --navy2:#002827; --teal:#078b84; --mint:#a9ecdf;
  --paper:#fffefd; --soft:#f5f7f6; --cream:#f4f0e8; --ink:#17292b;
  --muted:#718083; --line:#e1e9e6; --pink:#f579a3; --gold:#faad36; --violet:#8269db;
  --error:#d9534f; --error-tint:#fbeaea; --radius:18px; --shadow:0 12px 34px #00282712;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:14px 'DM Sans',sans-serif;background:var(--soft)}
button{font:inherit;cursor:pointer;border:0}
a{color:var(--teal)}
h1,h2,h3{font-family:'Manrope',sans-serif;margin:0}

.brand{font:800 19px Manrope;letter-spacing:-.7px;color:#fff;display:flex;align-items:center;gap:11px}
.mark{border:2px solid #71ded3;border-radius:9px;width:34px;height:34px;display:grid;place-items:center;font:800 24px Manrope;color:#71ded3}

.primary{padding:12px 18px;border-radius:10px;background:var(--teal);color:#fff;font-weight:700;transition:.15s}
.primary:hover{background:#066f69}
.primary:disabled{background:#b7bbc2;cursor:not-allowed}
.pink{background:var(--pink);color:#21282a}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}

/* ---- Auth page ---- */
.auth{min-height:100vh;background:radial-gradient(circle at 50% 0,#076865,#003f3d 52%,#002e2c);display:grid;place-items:center;padding:30px}
.auth-card{background:#fff;border-radius:24px;padding:38px 28px;width:min(390px,100%)}
.auth-card .brand{justify-content:center;color:var(--ink);font-size:16px;margin-bottom:32px}
.auth-card .mark{width:32px;height:32px;border-color:var(--teal);color:var(--teal)}
.auth-card h1{font:700 27px Manrope;margin:0}
.auth-card p.sub{color:var(--muted);margin:6px 0 0}
.auth-card label{display:block;font-size:12px;font-weight:700;margin:15px 0 5px}
.auth-card input{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;font:inherit}
.auth-card input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #078b8422}
.auth-card .primary{width:100%;margin:20px 0 12px}
.auth-switch{color:var(--teal);font-weight:700;background:transparent;padding:0;text-align:center;width:100%;font-size:13px}
.tabs{display:flex;background:#F1F2F4;border-radius:12px;padding:4px;margin-bottom:22px}
.tab{flex:1;text-align:center;padding:10px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--muted);background:none;transition:.15s}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.view{display:none}
.view.active{display:block}
.field-error{font-size:12px;color:var(--error);margin-top:6px;display:none}
.field.has-error input{border-color:var(--error)}
.field.has-error .field-error{display:block}
.form-msg{font-size:12.5px;padding:10px 12px;border-radius:10px;margin-bottom:14px;display:none}
.form-msg.show{display:block}
.form-msg.error{background:var(--error-tint);color:var(--error)}
.form-msg.info{background:#e4f2ef;color:var(--teal)}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.primary.loading .spinner{display:inline-block}
.primary.loading .lbl{display:none}
.primary .lbl,.primary .spinner{vertical-align:middle}

/* ---- Dashboard shell (from the unified maquette) ---- */
.app{min-height:100vh;display:grid;grid-template-columns:248px 1fr}
.side{background:linear-gradient(180deg,var(--navy2),var(--navy));padding:30px 18px;color:#d4e4e1;position:sticky;top:0;height:100vh}
.side .brand{margin:0 8px 40px}
.navbtn{display:flex;align-items:center;width:100%;background:transparent;color:#d4e4e1;text-align:left;border-radius:12px;padding:13px 15px;margin:3px 0;font-size:14px;gap:10px}
.navbtn:hover,.navbtn.active{background:#0d8f8a;color:#fff}
.navbtn span{display:inline-block;width:20px;color:#9ae3d8}
.navbtn.locked{opacity:.5;cursor:default}
.navbtn.locked:hover{background:transparent;color:#d4e4e1}
.side-level{margin-top:26px;border:1px solid #27605d;border-radius:16px;padding:17px;background:#003130}
.side-level small{color:#9fbbb7}
.side-level b{display:block;font:700 18px Manrope;margin:10px 0}
.track{height:5px;background:#416e6c;border-radius:6px;overflow:hidden}
.track i{display:block;height:100%;background:linear-gradient(90deg,#f789ac,#8e76e9);border-radius:6px}
.logout-btn{margin-top:16px;width:100%;background:transparent;color:#9fbbb7;border:1px solid #27605d;border-radius:10px;padding:10px;font-size:12.5px;font-weight:700}
.logout-btn:hover{color:#fff;border-color:#4a8783}

.main{min-width:0}
.top{height:91px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid var(--line)}
.top h1{font:700 23px Manrope}
.top p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.avatar{height:42px;width:42px;border-radius:50%;display:grid;place-items:center;background:#f7ae64;font-size:16px;font-weight:800;color:#3a2200}

.page{padding:28px 44px 60px;max-width:1200px;margin:auto}
.grid{display:grid;gap:18px}
.hero-grid{grid-template-columns:1.25fr .78fr}
.banner{background:radial-gradient(circle at 72% 23%,#efb7bc 0,transparent 19%),linear-gradient(120deg,#003d42,#526e80 100%);border-radius:18px;color:#fff;padding:28px 25px;min-height:170px;position:relative;overflow:hidden}
.banner:after{content:'';position:absolute;width:170px;height:170px;border:1px solid #ffffff77;border-radius:50%;right:50px;bottom:-104px}
.banner h2{font:700 24px/1.42 Manrope;max-width:340px;margin:12px 0}
.pill{display:inline-block;border-radius:20px;padding:6px 10px;background:#ffffff20;font-size:11px}
.title{font:700 15px Manrope;margin:0 0 14px}
.legend{font-size:12px;line-height:2.05;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.stat{padding:19px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-height:100px}
.stat b{display:block;font:700 27px Manrope;margin-top:10px}
.empty{color:#8a9691;font-style:italic;font-size:12.5px}

.mobile{display:none}
@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top{padding:0 20px;height:72px}
  .page{padding:22px 18px 82px}
  .hero-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:2px;border-radius:4px}