:root{
  --bg:#f4f6f8;--bg2:#eef3ef;--card:#ffffff;--ink:#11231c;--muted:#6f7e79;--line:#dde5e1;
  --green:#165f43;--green2:#1f7a57;--green3:#cfe8db;--gold:#d7a85c;--gold2:#f5ebd9;
  --blue:#447dc4;--red:#c04a4a;--shadow:0 12px 40px rgba(17,35,28,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,rgba(248,251,250,.96) 0%,rgba(243,246,248,.97) 100%),url('landing-bg.png') center/cover fixed no-repeat;color:var(--ink)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.layout{display:flex;min-height:100vh}
.sidebar{width:280px;background:linear-gradient(180deg,#143c2d 0%,#0f2c21 100%);color:#fff;padding:22px 16px;position:fixed;top:0;bottom:0;overflow:auto;border-right:1px solid rgba(255,255,255,.08)}
.brand{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.brand .orb{width:52px;height:52px;border-radius:18px;background:radial-gradient(circle at 30% 30%,#fff7 0%,#79d6a8 25%,#165f43 78%,#0f2c21 100%);box-shadow:inset 0 2px 8px rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.25)}
.brand-title{font-size:20px;font-weight:800;line-height:1.1;margin-top:2px}
.brand small{display:block;font-size:11px;font-weight:500;opacity:.75;margin-top:5px;line-height:1.45}
.nav{display:grid;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;font-size:14px;opacity:.92;transition:.18s}
.nav a .nav-emoji{width:24px;text-align:center;opacity:.95}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);opacity:1;transform:translateX(2px)}
.sidebar-footer{margin-top:22px;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);font-size:12px;color:#d9ece3;line-height:1.5}
.sidebar-footer b{display:block;color:#fff;margin-bottom:4px}

.content{margin-left:280px;width:calc(100% - 280px);padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:18px}
.topbar h1{font-size:28px;line-height:1.15;margin:0}
.page-intro{margin-top:4px;color:var(--muted);font-size:14px;max-width:760px;line-height:1.55}
.userbox{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:999px;box-shadow:0 6px 24px rgba(22,95,67,.08);font-size:13px;color:var(--muted)}
.userbox .dot{width:10px;height:10px;border-radius:50%;background:#54c27e;box-shadow:0 0 0 4px rgba(84,194,126,.15)}

.hero-card{position:relative;min-height:320px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#000;margin-bottom:22px}
.hero-card .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-card .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,12,.82) 0%,rgba(7,17,12,.56) 45%,rgba(7,17,12,.18) 100%)}
.hero-card .inner{position:relative;z-index:1;padding:38px;max-width:760px;color:#fff}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);font-size:12px;font-weight:700;margin-bottom:12px}
.hero-card h2{font-size:38px;line-height:1.08;margin:0 0 12px}
.hero-card p{font-size:15px;line-height:1.7;color:#ecf4ef;max-width:650px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.card.soft{background:linear-gradient(180deg,#fff 0%,#fbfcfc 100%)}
.card h3{margin:0 0 10px;font-size:18px}
.card p{line-height:1.6}
.metric{position:relative;overflow:hidden}
.metric:before{content:"";position:absolute;right:-16px;top:-18px;width:110px;height:110px;border-radius:26px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ebf6ef,#d9ecdf)}
.metric b{display:block;font-size:32px;margin-top:10px;position:relative;z-index:1}
.metric small,.muted{color:var(--muted)}
.icon-stat{display:flex;align-items:center;gap:13px}.icon-badge{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:linear-gradient(180deg,#fff 0%,#f2fbf6 100%);border:1px solid #e4ece7;box-shadow:inset 0 2px 5px rgba(255,255,255,.9),0 10px 20px rgba(17,35,28,.06)}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:#f0f6f3;color:#355445;font-size:12px;font-weight:700}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.ok{background:#dff4e9;color:#12603d}.warn{background:#fff1d6;color:#875910}.bad{background:#fde3e3;color:#8f2424}.info{background:#e4effc;color:#1f5d98}.gray{background:#edf1ef;color:#53635b}
.progress{height:10px;background:#e5ece8;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green2),#5ac085)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 15px;background:linear-gradient(180deg,#227c58,#165f43);color:#fff;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 10px 22px rgba(22,95,67,.18)}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:linear-gradient(180deg,#f6f9f8,#edf4f1);color:#294638;border:1px solid #dde7e2;box-shadow:none}
.btn.danger{background:linear-gradient(180deg,#dc6666,#b64242)}
.btn.small{padding:7px 10px;font-size:12px;border-radius:10px}.actions{display:flex;gap:10px;flex-wrap:wrap}

.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:28px 0 12px}.section-title h2{font-size:20px;margin:0}.section-title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}.table th{background:#f8fbfa;font-weight:800;white-space:nowrap;color:#355145}.table tr:hover td{background:#fbfdfc}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.form-card{background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{margin-bottom:14px}.field label{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;margin-bottom:6px;color:#40564b}.field label span{font-weight:600;color:#92a19a;font-size:11px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid #d5dfda;border-radius:14px;background:#fff;font:inherit;transition:.15s;box-shadow:inset 0 1px 2px rgba(17,35,28,.03)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#77af94;box-shadow:0 0 0 4px rgba(34,124,88,.1)}
.field textarea{min-height:92px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#a2afa9}.help{font-size:11px;color:#8a9892;margin-top:5px;line-height:1.45}
.input-note{font-size:12px;color:#95a39d;margin-top:6px}
.upload-preview{margin-top:10px;border:1px solid #e1e8e4;border-radius:18px;overflow:hidden;background:#f8fbf9;max-width:320px}.upload-preview img{width:100%;height:200px;object-fit:cover}.upload-preview .cap{padding:10px 12px;font-size:12px;color:#60716a}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.photo-card{border:1px solid #e2eae6;border-radius:18px;overflow:hidden;background:#fff}.photo-card img{width:100%;height:170px;object-fit:cover}.photo-card .meta{padding:12px}.photo-card .meta b{display:block;margin-bottom:4px}

.stepper{display:grid;gap:12px}.step{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff}.step .n{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,#f9fcfa,#ecf6f1);font-weight:800;color:#1b6a49;box-shadow:inset 0 2px 6px rgba(255,255,255,.9),0 8px 18px rgba(17,35,28,.05)}.step h3{margin:0 0 4px;font-size:15px}.step p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.alert{padding:14px 16px;border-radius:16px;margin:0 0 16px;line-height:1.55;border:1px solid transparent}.alert.success{background:#e1f5e9;color:#165d3c;border-color:#cce6d8}.alert.error{background:#fde7e7;color:#922d2d;border-color:#f3caca}.alert.info{background:#ebf3ff;color:#245f9d;border-color:#d9e7fb}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.glass{background:rgba(255,255,255,.65);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f6f4;padding:2px 7px;border-radius:6px}
.figure-card{padding:10px;border-radius:24px;background:linear-gradient(180deg,#fff,#f9fbfa);border:1px solid #dfe7e2;box-shadow:var(--shadow)}
.figure-card img{border-radius:18px}
.empty{padding:28px;text-align:center;border:2px dashed #d7e1db;border-radius:20px;color:#7a8c85;background:#fbfdfc}

/* Landing / login */
.landing-shell{min-height:100vh;background:#09140f;position:relative;overflow:hidden}
.landing-shell .bg{position:absolute;inset:0;background:url('landing-bg.png') center/cover no-repeat;transform:scale(1.03)}
.landing-shell .veil{position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,10,8,.88) 0%,rgba(8,16,13,.72) 44%,rgba(8,16,13,.42) 100%)}
.landing-content{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;min-height:100vh;padding:40px;gap:24px;align-items:center}
.landing-copy{color:#fff;padding:20px 10px 20px 10px}
.landing-copy .eyebrow{display:inline-flex;gap:9px;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.10);backdrop-filter:blur(5px);font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.landing-copy h1{font-size:50px;line-height:1.03;margin:18px 0 16px;max-width:760px}
.landing-copy p{font-size:16px;line-height:1.8;color:#f0f6f2;max-width:760px}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;max-width:850px}.feature-chip{padding:16px;border-radius:20px;background:rgba(255,255,255,.10);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}.feature-chip b{display:block;color:#fff;margin-bottom:4px}.feature-chip small{color:#dfeae5;line-height:1.55}
.login-card{padding:24px;border-radius:28px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.45);box-shadow:0 20px 50px rgba(0,0,0,.26)}
.login-card h2{margin:0 0 8px}.login-card p{color:#5b6d66;line-height:1.6}.login-card .field input{background:#fff}.login-footer{margin-top:14px;color:#73817b;font-size:12px;line-height:1.6}

@media (max-width:1180px){
  .g4,.kpi-grid{grid-template-columns:repeat(2,1fr)}
  .two-col,.three-col{grid-template-columns:1fr}
  .landing-content{grid-template-columns:1fr;align-items:flex-start;padding-top:30px}
  .landing-copy h1{font-size:40px}
}
@media (max-width:960px){
  .sidebar{width:228px}.content{margin-left:228px;width:calc(100% - 228px);padding:20px}
  .g3{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .sidebar{position:static;width:100%;height:auto}.layout{display:block}.content{margin:0;width:100%;padding:16px}
  .g4,.g3,.g2,.kpi-grid,.gallery,form .row,.feature-strip{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}.hero-card .inner{padding:26px}.hero-card h2{font-size:30px}.landing-content{padding:16px}.landing-copy h1{font-size:30px}
}

.content{position:relative}.content:before{content:'';position:fixed;inset:0 0 0 280px;background:linear-gradient(180deg,rgba(248,251,250,.86),rgba(243,246,248,.90)),url('landing-bg.png') center/cover fixed no-repeat;z-index:-2}.page-banner{position:relative;overflow:hidden;border-radius:24px;padding:26px 28px;margin-bottom:20px;color:#fff;background:linear-gradient(90deg,rgba(7,20,14,.86),rgba(7,20,14,.48)),url('landing-bg.png') center/cover no-repeat;box-shadow:var(--shadow)}.page-banner h2{margin:0 0 8px;font-size:26px}.page-banner p{margin:0;max-width:820px;line-height:1.65;color:#eef6f1}.metric-model{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,252,250,.94))}.model-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--gold2);color:#70501c;font-weight:800;font-size:11px}.score-good{color:#16603f;font-weight:800}.score-warn{color:#8b641a;font-weight:800}.mini-bar{height:7px;background:#edf1ef;border-radius:999px;overflow:hidden}.mini-bar span{display:block;height:100%;background:linear-gradient(90deg,#227c58,#77c79f)}.heatmap{display:grid;grid-template-columns:80px repeat(6,minmax(72px,1fr));gap:6px;align-items:stretch}.heatmap .h{padding:9px 8px;background:#f5f8f6;border-radius:10px;text-align:center;font-size:12px;font-weight:800}.heatmap .cell{padding:10px 8px;border-radius:10px;text-align:center;font-size:12px;border:1px solid #e1e8e4;background:rgba(255,255,255,.9)}.heatmap .best{outline:2px solid #227c58;background:#e4f4eb}.equation{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f3f7f5;border:1px solid #dfe7e3;padding:12px 14px;border-radius:14px;font-size:12px;line-height:1.7}.model-card{border-top:4px solid #2b7c59}.model-card h3{display:flex;justify-content:space-between;gap:12px;align-items:center}.sticky-note{background:linear-gradient(180deg,#fffaf0,#fff5df);border:1px solid #eed8aa;border-radius:18px;padding:16px;color:#6c5429}.dataset-badge{font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;background:#e9eefc;color:#31598e}.hero-card .bg,.landing-shell .bg{background-position:center center!important}