:root{
    --bg: #0b1016;
    --bg-panel: #121924;
    --bg-panel-raised: #172130;
    --border: #232f3f;
    --border-soft: #1a2431;
    --text: #dce4ee;
    --text-dim: #7e8ba0;
    --text-faint: #4d596b;
    --accent: #35d6c0;      /* تیل ژنومیک */
    --accent-soft: rgba(53,214,192,.12);
    --amber: #f0a83c;
    --low: #3ecf8e;
    --moderate: #f0a83c;
    --high: #ef5f6c;
    --font-ui: 'Vazirmatn', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    background: var(--bg);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(53,214,192,.06), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(240,168,60,.05), transparent 45%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

.app-shell{
    display:flex;
    min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
    width:250px;
    flex-shrink:0;
    background: var(--bg-panel);
    border-left:1px solid var(--border);
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:32px; padding:0 6px; }
.brand-mark{ font-size:22px; color:var(--accent); text-shadow:0 0 14px var(--accent-soft); }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text strong{ font-size:15px; letter-spacing:.3px; }
.brand-text small{ color:var(--text-faint); font-size:11px; }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:8px;
    color:var(--text-dim); text-decoration:none; font-size:13.5px;
    transition:.15s;
}
.nav a .ic{ font-size:14px; width:16px; text-align:center; color:var(--text-faint); }
.nav a:hover{ background: var(--bg-panel-raised); color:var(--text); }
.nav a.active{ background: var(--accent-soft); color:var(--accent); }
.nav a.active .ic{ color:var(--accent); }

.sidebar-foot{
    font-size:11px; color:var(--text-faint);
    display:flex; align-items:center; gap:6px;
    padding:0 6px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--low); box-shadow:0 0 6px var(--low); }

.sidebar-close{ display:none; }

/* ---------- Mobile topbar / burger ---------- */
.mobile-topbar{
    display:none;
    position:sticky; top:0; z-index:40;
    align-items:center; gap:14px;
    background: var(--bg-panel);
    border-bottom:1px solid var(--border);
    padding:12px 16px;
}
.mobile-brand{ display:flex; align-items:center; gap:8px; font-size:14.5px; }
.mobile-brand .brand-mark{ font-size:18px; color:var(--accent); }

.burger-btn{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:36px; height:36px; padding:0;
    background: var(--bg-panel-raised); border:1px solid var(--border);
    border-radius:8px; cursor:pointer;
    flex-shrink:0;
}
.burger-btn span{
    display:block; height:2px; width:16px; margin:0 auto;
    background: var(--text); border-radius:2px;
    transition:.2s;
}
.burger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.sidebar-overlay{
    display:none;
    position:fixed; inset:0; z-index:45;
    background: rgba(6,10,15,.6);
    backdrop-filter: blur(2px);
    opacity:0; visibility:hidden;
    transition:opacity .2s ease;
}
.sidebar-overlay.visible{ opacity:1; visibility:visible; }

/* ---------- Content ---------- */
.content{ flex:1; padding:32px 40px; max-width:1400px; }

.page-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.page-header h1{ font-size:22px; margin:0 0 4px; font-weight:700; }
.page-header p{ margin:0; color:var(--text-dim); font-size:13.5px; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--bg-panel-raised); color:var(--text);
    border:1px solid var(--border); padding:9px 16px;
    border-radius:8px; font-family:var(--font-ui); font-size:13px;
    text-decoration:none; cursor:pointer; transition:.15s;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn-primary{ background: var(--accent); color:#04211d; border-color:var(--accent); font-weight:600; }
.btn-primary:hover{ background:#2ec1ac; color:#04211d; }
.btn-danger{ color:var(--high); }
.btn-danger:hover{ border-color:var(--high); }
.btn-sm{ padding:5px 10px; font-size:12px; }

/* ---------- Cards / panels ---------- */
.panel{
    background: var(--bg-panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    margin-bottom:20px;
}
.panel h2, .panel h3{ margin-top:0; }
.panel-flush{ padding:0; overflow:hidden; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{
    background: var(--bg-panel); border:1px solid var(--border); border-radius:12px;
    padding:16px 18px;
}
.stat-card .label{ color:var(--text-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
.stat-card .value{ font-family:var(--font-mono); font-size:24px; font-weight:600; margin-top:6px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select, .field textarea{
    width:100%; background: var(--bg); border:1px solid var(--border);
    color:var(--text); padding:10px 12px; border-radius:8px;
    font-family:var(--font-ui); font-size:13.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hint{ color:var(--text-faint); font-size:11.5px; margin-top:5px; }

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{
    text-align:right; padding:12px 14px; color:var(--text-faint);
    font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid var(--border); font-weight:600;
}
tbody td{ padding:12px 14px; border-bottom:1px solid var(--border-soft); }
tbody tr:hover{ background: rgba(255,255,255,.015); }
.mono{ font-family:var(--font-mono); }
.text-dim{ color:var(--text-dim); }
.text-center{ text-align:center; }

/* ---------- Badges ---------- */
.badge{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600;
}
.badge.low{ background:rgba(62,207,142,.12); color:var(--low); }
.badge.moderate{ background:rgba(240,168,60,.12); color:var(--moderate); }
.badge.high{ background:rgba(239,95,108,.12); color:var(--high); }

.risk-score{ font-family:var(--font-mono); font-weight:700; }
.risk-score.low{ color:var(--low); }
.risk-score.moderate{ color:var(--moderate); }
.risk-score.high{ color:var(--high); }

/* ---------- Search / filter bar ---------- */
.toolbar{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.toolbar input[type=text], .toolbar select{
    background: var(--bg-panel); border:1px solid var(--border); color:var(--text);
    padding:9px 14px; border-radius:8px; font-family:var(--font-ui); font-size:13px;
}
.toolbar .spacer{ flex:1; }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-faint); }
.empty-state .ic{ font-size:32px; display:block; margin-bottom:10px; opacity:.5; }

/* ---------- Comparison ---------- */
.compare-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.compare-col{ background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; padding:18px; }
.compare-col h3{ margin:0 0 12px; font-size:15px; }

.gauge-bar{ height:8px; border-radius:6px; background:var(--bg); overflow:hidden; margin-top:8px; }
.gauge-fill{ height:100%; border-radius:6px; }

.alert{
    border-radius:10px; padding:12px 16px; font-size:13px;
    background: var(--accent-soft); color: var(--accent); border:1px solid rgba(53,214,192,.25);
    margin-bottom:16px;
}
.alert.warn{ background: rgba(240,168,60,.1); color:var(--amber); border-color:rgba(240,168,60,.25); }

a{ color: var(--accent); }

/* ---------- Responsive / Mobile ---------- */
@media (max-width: 900px){
    body.no-scroll{ overflow:hidden; }

    .app-shell{ flex-direction:column; }

    .mobile-topbar{ display:flex; }

    .sidebar{
        position:fixed;
        top:0; right:0;
        z-index:50;
        width:78vw;
        max-width:300px;
        height:100vh;
        transform: translateX(100%);
        transition: transform .25s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,.35);
    }
    .sidebar.open{ transform: translateX(0); }

    .sidebar .brand{ margin-bottom:22px; }
    .sidebar-close{
        display:flex; align-items:center; justify-content:center;
        position:absolute; top:18px; left:16px;
        width:30px; height:30px; border-radius:8px;
        background: var(--bg-panel-raised); border:1px solid var(--border);
        color: var(--text-dim); cursor:pointer; font-size:14px;
    }
    .sidebar-close:hover{ color:var(--text); border-color:var(--accent); }

    .sidebar-overlay{ display:block; }

    .content{ padding:20px 16px; max-width:100%; }

    .page-header{ align-items:flex-start; }
    .page-header h1{ font-size:19px; }

    .field-row{ grid-template-columns:1fr; gap:0; }

    .toolbar{ flex-direction:column; align-items:stretch; }
    .toolbar input[type=text], .toolbar select{ width:100%; }
    .toolbar .spacer{ display:none; }

    .panel{ padding:16px; border-radius:12px; }

    .stat-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
    .stat-card{ padding:12px 14px; }
    .stat-card .value{ font-size:20px; }

    .compare-grid{ grid-template-columns:1fr; }

    /* جداول قابل اسکرول افقی روی موبایل */
    .panel-flush{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table{ min-width:640px; }
}

@media (max-width: 480px){
    .mobile-brand strong{ font-size:13.5px; }
    .stat-grid{ grid-template-columns:repeat(2,1fr); }
}