:root{--green:#0d9f6e;--light-green:#34d399;--dark-green:#047857;--navy:#1e293b;--dark:#0f172a;--gold:#f59e0b;--off-white:#f8fafc;--red:#ef4444;--line:#dbe3ee;--muted:#64748b;--white:#fff;--mono:"JetBrains Mono","Consolas",monospace;--sans:"Inter","DM Sans","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#f8fafc,#eefbf5);color:#0f172a;font-family:var(--sans)}button{font:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid rgba(219,227,238,.8);background:rgba(255,255,255,.88);padding:20px;backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.brand img{width:48px;height:48px;object-fit:cover;object-position:left}.brand strong,.brand span{display:block}.brand strong{font-size:19px;font-weight:950;color:var(--navy)}.brand span{font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.nav{display:grid;gap:5px}.nav button{height:42px;border:0;border-radius:14px;background:transparent;color:#64748b;text-align:left;padding:0 12px;font-weight:800;cursor:pointer}.nav button:hover,.nav .active{background:#ecfdf5;color:var(--dark-green)}
.workspace{margin-top:auto;border:1px solid var(--line);border-radius:20px;background:#f8fafc;padding:14px}.workspace span,.workspace em{display:block;color:var(--muted);font-size:12px}.workspace strong{display:block;margin:5px 0;color:var(--navy)}.workspace em{color:var(--dark-green);font-style:normal;font-weight:850}
.main{padding:24px;min-width:0}.dashboard-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.eyebrow{margin:0 0 7px;color:var(--dark-green);font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.dashboard-header h1{margin:0;color:var(--navy);font-size:34px}.dashboard-header p{margin:9px 0 0;color:var(--muted);line-height:1.6}.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.select-button,.primary-button{height:42px;border-radius:14px;padding:0 14px;font-weight:900;cursor:pointer}.select-button{border:1px solid var(--line);background:white;color:var(--navy)}.primary-button{border:0;background:var(--green);color:white;box-shadow:0 14px 28px rgba(13,159,110,.18)}.demo-badge{border:1px solid #bbf7d0;border-radius:999px;background:#ecfdf5;color:var(--dark-green);padding:10px 12px;font-size:12px;font-weight:950}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric-card,.panel{border:1px solid rgba(203,213,225,.75);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 18px 54px rgba(15,23,42,.08);backdrop-filter:blur(14px)}
.metric-card{position:relative;padding:18px;overflow:hidden}.metric-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--green)}.metric-card.risk:before{background:var(--gold)}.metric-card.danger:before{background:var(--red)}.metric-card.opportunity:before{background:var(--light-green)}.metric-card span{color:var(--muted);font-size:13px;font-weight:800}.metric-card strong{display:block;margin-top:10px;color:var(--navy);font-family:var(--mono);font-size:27px}.metric-card small{display:block;margin-top:8px;color:var(--muted)}.metric-card em{position:absolute;right:16px;top:16px;border-radius:999px;background:#ecfdf5;color:var(--dark-green);padding:6px 9px;font-style:normal;font-size:12px;font-weight:950}.metric-card.risk em{background:#fffbeb;color:#a16207}.metric-card.danger em{background:#fef2f2;color:#b91c1c}
.dashboard-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.panel{padding:18px}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.panel h2{margin:0;color:var(--navy);font-size:20px}.panel-head>span{border-radius:999px;background:#ecfdf5;color:var(--dark-green);padding:7px 10px;font-size:12px;font-weight:950}
.market-list{display:grid;gap:10px}.market-list div{position:relative;display:grid;grid-template-columns:120px 110px 1fr 110px;gap:12px;align-items:center;border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:13px 14px 17px}.market-list .best{border-color:rgba(13,159,110,.5);box-shadow:0 0 0 4px rgba(13,159,110,.07)}.market-list b{color:var(--navy)}.market-list span{font-family:var(--mono);font-weight:950;color:var(--navy)}.market-list em{color:var(--muted);font-style:normal;font-size:13px}.market-list strong{justify-self:end;color:var(--dark-green);font-size:12px}.market-list i{position:absolute;left:14px;right:14px;bottom:8px;height:4px;border-radius:999px;background:#e2e8f0}.market-list i:after{content:"";display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--light-green))}
.recommendations{display:grid;gap:10px}.recommendations div{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:13px}.recommendations span{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:950}.p1,.p4{background:#ecfdf5;color:var(--dark-green)}.p2{background:#fffbeb;color:#a16207}.p3{background:#fef2f2;color:#b91c1c}.recommendations p{margin:10px 0;color:var(--navy);line-height:1.5}.recommendations button,.row-action,.source-grid button{border:0;background:transparent;color:var(--dark-green);font-weight:950;cursor:pointer}
.table-panel{grid-column:1/-1}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:980px}th,td{border-bottom:1px solid #e2e8f0;padding:13px;text-align:left;white-space:nowrap}th{color:var(--muted);font-size:12px;text-transform:uppercase}td{color:var(--navy);font-size:14px}.status{border-radius:999px;padding:6px 9px;font-size:12px;font-weight:950}.warn{background:#fffbeb;color:#a16207}.danger{background:#fef2f2;color:#b91c1c}.good{background:#ecfdf5;color:var(--dark-green)}
.source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.source-grid div{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px}.source-grid strong,.source-grid span,.source-grid em{display:block}.source-grid strong{color:var(--navy)}.source-grid span{margin-top:6px;color:var(--muted);font-size:13px}.source-grid em{margin:6px 0 10px;color:var(--dark-green);font-style:normal;font-weight:900}
.segment{display:flex;height:14px;overflow:hidden;border-radius:999px;background:#e2e8f0}.segment i{display:block;width:var(--w)}.green{background:var(--green)}.gold{background:var(--gold)}.red{background:var(--red)}.blue{background:#38bdf8}.dist-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.dist-list div{border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:13px}.dist-list span{display:block;color:var(--muted);font-size:12px}.dist-list strong{display:block;margin-top:5px;color:var(--navy)}
.toast{position:fixed;right:24px;bottom:24px;opacity:0;transform:translateY(18px);pointer-events:none;border:1px solid #bbf7d0;border-radius:16px;background:#fff;padding:14px 16px;box-shadow:0 20px 54px rgba(15,23,42,.16);font-weight:800;transition:.2s}.toast.visible{opacity:1;transform:translateY(0)}
@media(max-width:1180px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.market-list div{grid-template-columns:1fr 1fr}.source-grid{grid-template-columns:1fr}}
@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.nav{grid-template-columns:repeat(2,1fr)}.dashboard-header{flex-direction:column}.metrics-grid{grid-template-columns:1fr}.main{padding:16px}.dist-list{grid-template-columns:1fr}}