.dna-top-bar { display:flex; justify-content:center; align-items:center; padding:12px 40px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.dna-top-tabs { display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:4px; gap:2px; box-shadow:var(--shadow); }
.dna-top-tab { padding:8px 22px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text3); cursor:pointer; transition:all .15s; border:none; background:transparent; font-family:'Inter',sans-serif; }
.dna-top-tab:hover { color:var(--text2); background:var(--bg); }
.dna-top-tab.active { background:var(--teal-dark); color:#fff; box-shadow:0 1px 4px rgba(7,107,107,0.25); }

.view { display:none; }
.view.active { display:block; }

/* ── UPLOAD VIEW ── */
.upload-wrap { min-height:calc(100vh - 56px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 40px; background:var(--bg); }
.upload-card { background:var(--bg2); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-md); width:100%; max-width:560px; overflow:hidden; }
.upload-header { background:linear-gradient(135deg,#064e4e 0%,#0a8f8f 60%,#0cb8b8 100%); padding:36px 40px 32px; text-align:center; position:relative; overflow:hidden; }
.upload-header::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.dna-helix { position:relative; margin:0 auto 20px; width:56px; height:56px; background:rgba(255,255,255,0.15); border-radius:14px; display:flex; align-items:center; justify-content:center; }
.upload-title { font-size:22px; font-weight:700; color:#fff; position:relative; margin-bottom:6px; }
.upload-sub   { font-size:13px; color:rgba(255,255,255,0.72); position:relative; line-height:1.5; }
.upload-body  { padding:32px 40px 36px; }
.providers-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--text3); margin-bottom:12px; }
.providers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px; }
.provider { border:1.5px solid var(--border); border-radius:9px; padding:10px 8px; text-align:center; cursor:pointer; transition:all .14s; background:var(--bg); }
.provider:hover { border-color:var(--teal); background:var(--teal-light); }
.provider.sel   { border-color:var(--teal-dark); background:var(--teal-light); box-shadow:0 0 0 3px rgba(10,143,143,0.12); }
.prov-logo { font-size:18px; margin-bottom:4px; }
.prov-name { font-size:11px; font-weight:600; color:var(--text2); }
.provider.sel .prov-name { color:var(--teal-dark); }
.dropzone { border:2px dashed var(--border); border-radius:12px; padding:32px 20px; text-align:center; cursor:pointer; transition:all .15s; background:var(--bg); margin-bottom:20px; }
.dropzone:hover, .dropzone.drag { border-color:var(--teal); background:var(--teal-light); }
.dropzone-ico   { font-size:28px; margin-bottom:10px; opacity:0.6; }
.dropzone-title { font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.dropzone-sub   { font-size:12px; color:var(--text3); }
.dropzone-sub span { color:var(--teal-dark); font-weight:600; cursor:pointer; }
.dz-formats { display:flex; gap:6px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.dz-fmt { font-size:10px; font-weight:600; background:#f3f4f6; color:var(--text3); padding:2px 8px; border-radius:4px; }
input[type=file] { display:none; }
.progress-wrap { display:none; margin-bottom:20px; }
.progress-bar-bg   { background:#f0f0f0; border-radius:6px; height:6px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--teal-dark); border-radius:6px; width:0%; transition:width .3s; }
.progress-label { font-size:12px; color:var(--text3); margin-top:6px; }
.btn-upload { width:100%; padding:12px; background:var(--teal-dark); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-upload:hover { background:#055f5f; }
.btn-upload:disabled { opacity:0.45; cursor:not-allowed; }
.upload-note { font-size:11.5px; color:var(--text3); text-align:center; margin-top:14px; line-height:1.6; }
.upload-note a { color:var(--teal-dark); text-decoration:none; font-weight:500; }
.demo-link { margin-top:20px; font-size:12.5px; color:var(--text3); cursor:pointer; }
.demo-link span { color:var(--teal-dark); font-weight:600; text-decoration:underline; }

/* ── OVERVIEW VIEW ── */
.overview-page { background:#f5f5f3; min-height:calc(100vh - 56px); }
.ov-header { background:var(--bg2); border-bottom:1px solid var(--border); text-align:center; padding:32px 40px 0; }
.ov-header-title { font-size:26px; font-weight:800; color:var(--text); margin-bottom:6px; }
.ov-header-sub   { font-size:13px; color:var(--text3); margin-bottom:20px; }
.dna-tabs { background:var(--bg2); border-bottom:1px solid var(--border); }
.dna-tabs-inner { display:flex; justify-content:center; gap:0; }
.dna-tab { padding:13px 28px; font-size:13.5px; font-weight:600; color:var(--text3); cursor:pointer; border-bottom:2.5px solid transparent; transition:all .13s; white-space:nowrap; }
.dna-tab:hover { color:var(--text2); }
.dna-tab.active { color:var(--teal-dark); border-bottom-color:var(--teal-dark); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.ov-main { max-width:1000px; margin:0 auto; padding:32px 40px 60px; }

.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.area-card { background:var(--bg2); border:1px solid #e2e5e9; border-radius:14px; padding:22px 20px 22px 24px; cursor:pointer; transition:box-shadow .16s, border-color .16s; box-shadow:0 1px 4px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:110px; animation:fadeUp .26s ease both; }
.area-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.09); border-color:#c8d0d0; }
.ac-text { flex:1; min-width:0; }
.ac-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.25; }
.ac-desc { font-size:12px; color:var(--text3); line-height:1.55; }
.ac-icon-wrap { width:64px; height:64px; border-radius:50%; border:1.5px solid #e2e5e9; background:#f8f9fa; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ac-icon-wrap svg { width:32px; height:32px; }
.ac-badge { display:inline-block; margin-top:8px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.3px; }
.ac-badge.ok    { background:#e6f4ec; color:#15803d; }
.ac-badge.watch { background:#fef3c7; color:#b45309; }
.ac-badge.risk  { background:#fee2e2; color:#b91c1c; }

.upload-another { background:var(--teal-light); border:1.5px dashed #b2e0e0; border-radius:12px; padding:16px 20px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .15s; margin-top:20px; }
.upload-another:hover { background:#d2efef; }
.ua-text { flex:1; font-size:13px; font-weight:600; color:var(--teal-dark); }
.ua-sub  { font-size:11.5px; color:var(--text3); font-weight:400; }

/* ── FULL RESULTS ── */
.fr-layout { display:flex; max-width:1100px; margin:0 auto; padding:32px 40px 80px; gap:32px; align-items:flex-start; }
.fr-nav { width:180px; flex-shrink:0; position:sticky; top:72px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:8px 0; box-shadow:var(--shadow); }
.fr-nav-item { padding:9px 18px; font-size:13px; color:var(--text2); cursor:pointer; border-radius:0; transition:all .12s; border-left:3px solid transparent; line-height:1.3; }
.fr-nav-item:hover { background:var(--bg); color:var(--text); }
.fr-nav-item.active { color:var(--teal-dark); font-weight:600; border-left-color:var(--teal-dark); background:var(--teal-light); }
.fr-content { flex:1; min-width:0; }
.fr-area { margin-bottom:48px; }
.fr-area-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:6px; }
.fr-area-sub { font-size:13px; color:var(--text2); margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fr-show-more { color:var(--teal-dark); font-weight:600; cursor:pointer; font-size:13px; }
.fr-expand-all { text-align:right; margin-bottom:12px; font-size:12.5px; font-weight:600; color:var(--teal-dark); cursor:pointer; }
.fr-expand-all:hover { text-decoration:underline; }
.fr-row { border-top:1px solid var(--border); overflow:hidden; }
.fr-row:last-child { border-bottom:1px solid var(--border); }
.fr-row-head { display:flex; align-items:center; padding:14px 4px; cursor:pointer; gap:12px; transition:background .12s; }
.fr-row-head:hover { background:#fafafa; }
.fr-row-name { flex:1; font-size:14px; font-weight:600; color:var(--text); }
.fr-badge { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; flex-shrink:0; }
.fr-badge.elevated { background:#fde8d8; color:#c05621; }
.fr-badge.average  { background:#f0f0f0; color:#555;    }
.fr-badge.low      { background:#dcfce7; color:#166534; }
.fr-chevron { width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--teal-dark); flex-shrink:0; transition:transform .2s; }
.fr-chevron.open { transform:rotate(180deg); }
.fr-detail { display:none; background:#f9fafb; border-top:1px solid var(--border); border-radius:0 0 8px 8px; padding:20px; gap:20px; }
.fr-detail.open { display:grid; grid-template-columns:280px 1fr; gap:20px; }
.fr-detail-left { display:flex; flex-direction:column; gap:12px; }
.fr-genetic-card { border-radius:10px; padding:14px 16px; border:1px solid transparent; }
.fr-genetic-card.elevated { background:#fef0e6; border-color:#f9c8a8; }
.fr-genetic-card.average  { background:#f5f5f5; border-color:#ddd;    }
.fr-genetic-card.low      { background:#f0fdf4; border-color:#bbf7d0; }
.fr-genetic-header { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; margin-bottom:8px; }
.fr-genetic-header.elevated { color:#c05621; }
.fr-genetic-header.average  { color:#555;    }
.fr-genetic-header.low      { color:#166534; }
.fr-genetic-text { font-size:12px; color:var(--text2); line-height:1.55; }
.fr-blood-card { border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.fr-blood-header { padding:9px 14px; font-size:12px; font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; }
.fr-blood-header.normal   { background:#e8a838; }
.fr-blood-header.high     { background:#dc2626; }
.fr-blood-header.optimal  { background:#16a34a; }
.fr-blood-header.no-data  { background:#9ca3af; }
.fr-blood-body { background:#fff; padding:14px 16px; }
.fr-blood-label { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:10px; }
.fr-blood-name  { font-size:14px; font-weight:700; color:var(--text); }
.fr-blood-meta  { font-size:11px; color:var(--text3); float:right; }
.fr-blood-val   { font-size:13px; font-weight:600; color:var(--text); margin:4px 0; }
.fr-blood-status-pill { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:700; margin-left:8px; vertical-align:middle; }
.fr-blood-status-pill.normal  { background:#fde8a0; color:#92400e; }
.fr-blood-status-pill.high    { background:#fee2e2; color:#b91c1c; }
.fr-blood-status-pill.optimal { background:#dcfce7; color:#166534; }
.fr-bar-wrap { position:relative; height:10px; border-radius:5px; background:linear-gradient(to right,#dc2626,#f97316,#eab308,#22c55e,#eab308,#f97316,#dc2626); margin:8px 0 4px; overflow:visible; }
.fr-bar-dot  { position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 0 0 3px rgba(0,0,0,0.25); }
.fr-bar-label { font-size:10px; color:var(--text3); position:absolute; top:14px; transform:translateX(-50%); white-space:nowrap; }
.fr-interp-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; }
.fr-interp-text  { font-size:13px; color:var(--text2); line-height:1.65; margin-bottom:18px; }
.fr-about-title  { font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; }
.fr-about-text   { font-size:13px; color:var(--text2); line-height:1.65; }