/* ==== CSS RESET ==== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;width:100%}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:#f5f7fb;color:#102a43;line-height:1.45;padding:10px}
a{color:#0b6;text-decoration:underline}
.header{ text-align:center;margin-bottom:12px }
.header.dark{ background:#071224; color:#dceaf6; padding-bottom:6px; border-radius:8px }
.header-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto }
.header h1{ font-size:22px }
.subtitle{ color:#516;margin-top:6px; max-width:1100px;margin-left:auto;margin-right:auto;font-size:14px }
.header-controls{ display:flex; gap:10px; align-items:center }
.layout{ display:flex; gap:16px; max-width:1100px; margin:14px auto }
.sidebar{ width:260px; flex:0 0 260px }
.content{ flex:1 }
.nav{ display:flex; flex-direction:column; gap:6px }
.nav button{ text-align:left; padding:8px 10px; background:#fff; border-radius:8px; border:1px solid #e6eefc; cursor:pointer }
.nav button.active{ background:linear-gradient(180deg,#eaf3ff,#dfefff); border-color:#bfe; font-weight:600 }
.card{ background:#fff; padding:14px; border-radius:12px; box-shadow:0 8px 20px rgba(12,20,40,0.04); margin-bottom:12px }
.two-col{ display:flex; gap:12px }
.two-col>div{ flex:1 }
.center{ display:flex; flex-direction:column; align-items:center; gap:8px }
.control-row{ display:flex; gap:8px; align-items:center; margin-top:8px }
.controls{ display:flex; flex-direction:column; gap:8px }
.small{ font-size:13px; color:#556 }
.muted{ color:#6b7280; font-size:13px }
.grid-visual{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.spin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.spin-cell{ display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:6px; border:1px solid #eef6ff }
.spin-mini{ width:54px; height:54px }
.chain-visual{ display:flex; gap:6px; padding:8px; background:#f7fbff; border-radius:8px; margin-top:8px; overflow:auto }
.chain-cell{ width:18px; display:flex; align-items:flex-end; justify-content:center }
.bar{ width:12px; border-radius:6px }
.mesh-area{ background:#fbfeff; padding:8px; border-radius:8px; border:1px solid #eef8ff; margin-top:8px; overflow:auto }
.bar-visual{ width:100%; height:100px; background:linear-gradient(90deg,#f3f6ff,#fff); display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid #e6eefc }
.bar-state{ padding:10px 16px; border-radius:8px; background:#fff; border:1px solid #e6eefc; font-weight:600 }
.progress{ width:100%; height:12px; background:#eef6ff; border-radius:8px; overflow:hidden; margin-top:8px }
.progress>div{ height:100%; background:linear-gradient(90deg,#ff9a9e,#ff6a88); width:0%; transition:width 0.2s ease }
.footer-note{ text-align:center; color:#6b7280; font-size:13px; margin-top:12px }
.expert-box{ background:#0b1220; color:#cfe; padding:10px; border-radius:8px; margin-top:8px; font-size:13px }
.sidebar-note{ margin-top:12px; font-size:13px; color:#6b7280 }
.legend{ display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; vertical-align:middle }
.guided-overlay{ position:fixed; inset:0; background:rgba(6,10,20,0.6); display:flex; align-items:center; justify-content:center; z-index:60 }
.guided-box{ background:#fff; padding:18px; border-radius:12px; width:480px; position:relative; box-shadow:0 10px 30px rgba(2,6,23,0.4) }
.guided-box .close-x{ position:absolute; right:8px; top:6px; border:none; background:transparent; font-size:22px; cursor:pointer }
.dw-marker{ background:linear-gradient(90deg,#ffe7a8,#fff7e6); padding:6px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); font-weight:700 }
@media(max-width:900px){ .layout{ flex-direction:column } .sidebar{ width:100% } .content{ order:1 } .sidebar{ order:2 } }
.header.dark .header-inner{ color:#dceaf6 }
.header.dark .subtitle{ color:#9fb }
.header.dark .card{ background:#071224; color:#dceaf6; border:1px solid rgba(200,220,240,0.04) }
.header.dark .muted{ color:#9fb }