/* MineSmart - styles.css */
*{box-sizing:border-box}
html{color-scheme:light}
:root{
  --bg:#f8fafc;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;
  --primary:#2563eb;--primary2:#7c3aed;--good:#10b981;--warn:#f59e0b;--bad:#ef4444;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);
  --radius:14px;--radius2:10px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --header:64px;--side:280px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;--card:#121c2f;--text:#e5e7eb;--muted:#9ca3af;--border:#26324a;
  --shadow:0 12px 30px rgba(0,0,0,.25);
}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;left:-9999px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--card);padding:.75rem 1rem;border:1px solid var(--border);border-radius:10px}
.skip-link:focus{left:1rem;top:1rem;z-index:3000}

.header{
  position:sticky;top:0;z-index:1000;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;background:var(--card);border-bottom:1px solid var(--border);box-shadow:var(--shadow)
}
.header-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.header-right{display:flex;align-items:center;gap:.5rem}
.tagline{font-size:.9rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

.logo{display:flex;align-items:center;gap:.6rem}
.logo-badge{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 8px 18px rgba(37,99,235,.25);
}
.logo-text{font-weight:800;letter-spacing:.2px}

.icon-btn{
  border:1px solid var(--border);
  background:transparent;color:var(--text);
  border-radius:12px;padding:.55rem;cursor:pointer;
  display:grid;place-items:center;
}
.icon-btn:hover{background:rgba(148,163,184,.12)}
.icon-btn svg{width:20px;height:20px}

.select,.input{
  width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);outline:none;
}
.input:focus,.select:focus{border-color:rgba(37,99,235,.6);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.range{width:100%}

.sidebar{
  position:fixed;top:var(--header);left:0;height:calc(100vh - var(--header));
  width:var(--side);background:var(--card);border-right:1px solid var(--border);
  transform:translateX(0);transition:transform .2s ease;z-index:900;overflow:auto
}
.sidebar-overlay{
  position:fixed;inset:var(--header) 0 0 0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:850
}
.sidebar-overlay.show{opacity:1;pointer-events:auto}

.nav{padding:1rem}
.nav-section{margin-bottom:1rem}
.nav-title{font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:.5rem .6rem}
.nav-item{
  width:100%;display:flex;align-items:center;gap:.65rem;
  background:transparent;border:1px solid transparent;
  padding:.7rem .75rem;border-radius:14px;cursor:pointer;color:var(--muted);font-weight:650;
}
.nav-item:hover{background:rgba(148,163,184,.12);color:var(--text)}
.nav-item.active{
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 16px 30px rgba(37,99,235,.2);
}
.nav-ico{width:18px;text-align:center}
.pill{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;font-size:.75rem;padding:.1rem .5rem;border-radius:999px}

.main{margin-left:var(--side);padding:1.25rem;max-width:1200px}
.page{display:none}
.page.active{display:block}
.page-header{margin-bottom:1rem}
.page-header h1{margin:.2rem 0 .25rem;font-size:1.75rem}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.card-head{
  padding:1rem 1rem .75rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.card-head h2{margin:0;font-size:1.05rem}
.card-body{padding:1rem}
.h3{margin:.2rem 0 .75rem;font-size:1rem}
.divider{height:1px;background:var(--border);margin:1rem 0}
.details summary{cursor:pointer;font-weight:650}
.details .mt{margin-top:.75rem}

.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:1fr 1fr}
.grid.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.filters{grid-template-columns:2fr 1fr 1fr}
.grid.calc{grid-template-columns:1.05fr .95fr}
.grid.inline3{grid-template-columns:1fr 1fr 1fr}
.grid.compare{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.glossary{grid-template-columns:repeat(2,minmax(0,1fr))}

.stat{padding:1rem}
.stat-k{font-size:.85rem;color:var(--muted)}
.stat-v{font-size:1.5rem;font-weight:900}
.stat-s{font-size:.85rem;color:var(--muted)}

.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.help{font-size:.82rem;color:var(--muted)}
.error{font-size:.82rem;color:var(--bad);min-height:1em}

.row{display:flex;align-items:center;gap:.6rem}
.row.between{justify-content:space-between}
.row.gap{gap:.75rem}
.row.wrap{flex-wrap:wrap}

.btn{
  border:1px solid var(--border);background:var(--card);color:var(--text);
  padding:.7rem 1rem;border-radius:12px;cursor:pointer;font-weight:750;
}
.btn:hover{background:rgba(148,163,184,.12)}
.btn.primary{
  border:none;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}
.btn.danger{border:none;color:#fff;background:linear-gradient(135deg,var(--bad),#dc2626)}
.btn.ghost{background:transparent}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}

.alert{border-radius:14px;padding:.85rem 1rem;border:1px solid var(--border);background:rgba(148,163,184,.08)}
.alert.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12)}
.alert.info{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.12)}
.empty{padding:1rem;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center}

.list{margin:.25rem 0 0 1.2rem}
.list li{margin:.35rem 0;color:var(--muted)}

.coin-card,.hw-card{
  padding:1rem;cursor:pointer;transition:transform .12s ease, border-color .12s ease;
}
.coin-card:hover,.hw-card:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.45)}
.kv{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.badge{
  font-size:.75rem;font-weight:750;border:1px solid var(--border);
  padding:.18rem .55rem;border-radius:999px;color:var(--muted)
}
.badge.good{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25);color:var(--good)}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:var(--warn)}
.badge.bad{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);color:var(--bad)}
.badge.primary{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.25);color:var(--primary)}

.mini-chart{display:flex;align-items:flex-end;gap:.5rem;height:140px;padding:.75rem;border:1px solid var(--border);border-radius:14px;background:rgba(148,163,184,.08)}
.bar{flex:1;border-radius:10px 10px 0 0;position:relative}
.bar::after{content:attr(data-label);position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;font-size:.75rem;color:var(--muted);white-space:nowrap}
.bar.rev{background:linear-gradient(180deg,var(--primary),#60a5fa)}
.bar.cost{background:linear-gradient(180deg,var(--bad),#fb7185)}
.bar.profit{background:linear-gradient(180deg,var(--good),#34d399)}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.8rem;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.table th{background:rgba(148,163,184,.08);font-size:.85rem}
.table tr:last-child td{border-bottom:none}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;
  display:flex;gap:.45rem;align-items:center;color:var(--muted);font-weight:700
}
.chip button{border:none;background:transparent;color:var(--muted);cursor:pointer}

.accordion .acc{border:1px solid var(--border);border-radius:14px;margin-bottom:.75rem;overflow:hidden;background:var(--card)}
.acc button{
  width:100%;text-align:left;border:none;background:transparent;color:var(--text);
  padding:1rem;font-weight:850;cursor:pointer;display:flex;justify-content:space-between;align-items:center
}
.acc .panel{display:none;padding:0 1rem 1rem;color:var(--muted)}
.acc.open .panel{display:block}
.acc .chev{transition:transform .15s ease}
.acc.open .chev{transform:rotate(180deg)}

.quiz .opt{border:1px solid var(--border);border-radius:14px;padding:.8rem;cursor:pointer;margin:.6rem 0;background:rgba(148,163,184,.08)}
.quiz .opt.selected{border-color:rgba(37,99,235,.6);background:rgba(37,99,235,.12)}
.quiz-progress{display:flex;gap:.4rem;margin-bottom:1rem}
.quiz-progress .seg{flex:1;height:6px;border-radius:999px;background:rgba(148,163,184,.18)}
.quiz-progress .seg.on{background:linear-gradient(90deg,var(--primary),var(--primary2))}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;
  padding:1rem;z-index:2000
}
.modal{
  width:min(560px,100%);background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow)
}
.modal.wide{width:min(900px,100%)}
.modal-head{padding:1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:1rem;max-height:70vh;overflow:auto}
.modal-foot{padding:1rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.6rem;align-items:center}

.toast-wrap{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.6rem;z-index:3000}
.toast{
  min-width:280px;max-width:420px;background:var(--card);border:1px solid var(--border);
  border-left:6px solid var(--primary);border-radius:14px;padding:.75rem .9rem;box-shadow:var(--shadow)
}
.toast.good{border-left-color:var(--good)}
.toast.warn{border-left-color:var(--warn)}
.toast.bad{border-left-color:var(--bad)}
.toast-title{font-weight:900}
.toast-msg{color:var(--muted);margin-top:.2rem}
.toast .x{float:right;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem}

.picker-list{display:grid;gap:.5rem}
.picker-item{border:1px solid var(--border);border-radius:14px;padding:.75rem;cursor:pointer;background:rgba(148,163,184,.08)}
.picker-item:hover{border-color:rgba(37,99,235,.55)}

@media (max-width: 1024px){
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.calc{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .tagline{display:none}
  .main{margin-left:0}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .grid.stats{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.filters{grid-template-columns:1fr}
  .grid.inline3{grid-template-columns:1fr}
  .grid.compare{grid-template-columns:1fr}
  .grid.glossary{grid-template-columns:1fr}
}