/* ====== Theme ====== */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --border:#e4e4e4;
  --card:#fafafa;
  --accent:#111;   /* primary button/outline */
  --hover:#0a0a0a; /* primary hover */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:20px;
  color:var(--text);
  background:var(--bg);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ====== Typo ====== */
h1{ margin:0 0 8px; line-height:1.15; }
.muted{ color:var(--muted); font-size:.95rem; }

/* ====== Layout ====== */
.grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }
@media (max-width:720px){ .row { grid-template-columns:1fr; } }

/* ====== Forms ====== */
label{ font-weight:600; display:block; margin:0 0 6px; }
input[type="number"],
input[type="text"],
select,
button{
  font-size:16px;
  padding:10px 12px;
  width:100%;
}
input,select,button{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
input:focus-visible,
select:focus-visible,
button:focus-visible{
  outline:2px solid #000;
  outline-offset:1px;
}

/* Preset chips */
.presets{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.chip{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#f7f7f7;
  cursor:pointer;
  user-select:none;
}
.chip:hover{ background:#eee; }

/* Copy Seed */
.seed-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.btn-chip {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
}
.btn-chip:hover { background: #f5f5f5; }

/* Switch / radios container (kept for compatibility) */
.radios{ display:flex; gap:10px; flex-wrap:wrap; }
.switch{ display:flex; align-items:center; gap:8px; }

/* Actions row */
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }

.inline-stop{
  display:flex; align-items:center; gap:10px;
  margin:6px 0;
}
.inline-stop input[type="number"]{
  width:8ch; padding:6px 8px; font-size:14px;
}
.inline-stop label{ margin:0; font-weight:600; }
@media (max-width:560px){
  .inline-stop{ flex-wrap:wrap; }
  .inline-stop input[type="number"]{ width:10ch; }
}

/* Primary button */
.btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
  cursor:pointer;
}
.btn:hover{ background:var(--hover); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ====== Cards ====== */
.cards{
  display:grid; gap:12px; margin-top:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cards{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}
.k{ font-size:.9rem; color:var(--muted); }
.v{ font-size:1.55rem; font-weight:700; }

#result { display: block; }
#result > * + * { margin-top: 16px; }
#result .cards { margin-top: 0; }

/* ====== Table / Log ====== */
table{ width:100%; border-collapse:collapse; margin-top:10px; }
th,td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
th{ background:#f6f6f6; position:sticky; top:0; z-index:1; }
.notice{ margin-top:6px; color:var(--muted); }

.log-controls{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 6px;
}
.log-table-wrap{
  max-height: 420px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}

/* ====== Sticky Stats Bar (compact chip style) ====== */
.sticky{
  position:sticky; top:0; z-index:1000;
  background:rgba(250,250,250,.86);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  padding:6px 12px;
  margin:-20px -20px 8px -20px; /* align with page edges */
}
.sticky-inner{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  font-size:13px; line-height:1.2; overflow-x:auto; white-space: nowrap;
}
.sticky-inner strong{ font-weight:600; margin-right:4px; }
.sticky-inner::-webkit-scrollbar{ display:none; }
.stat-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}

/* Copy Summary button in sticky */
#copySummaryBtn{
  margin-left:auto; /* push right on wide screens */
  padding:5px 8px;
  font-size:11px;
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  cursor:pointer;
}
#copySummaryBtn:hover{ background:var(--accent); color:#fff; }

/* Small helpers */
.btn-small{ padding:6px 10px; font-size:14px; border-radius:8px; }
canvas{ display:block; max-width:100%; }

@media (max-width:420px){
  #copySummaryBtn{ display:none; }
}

/* ======================================================
   LARGE-SCREEN ENHANCEMENTS
   ====================================================== */

/* ≥ 1200px — center page, breathe more, bump type & spacing */
@media (min-width:1200px){
  body{
    max-width:1100px;
    margin:28px auto;
    font-size:17px;
    line-height:1.5;
  }
  h1{ margin-bottom:10px; }
  .sticky{ padding:8px 14px; }
  .sticky-inner{ gap:10px; font-size:13.5px; }
  .cards{ gap:14px; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .card{ padding:14px; border-radius:16px; }
  .v{ font-size:1.7rem; }
  th,td{ padding:8px 10px; }
  #result > * + * { margin-top: 18px; }
}

/* ≥ 1440px — wider content, denser cards */
@media (min-width:1440px){
  body{ max-width:1280px; margin:32px auto; }
  .sticky{ padding:10px 16px; }
  .sticky-inner{ gap:12px; font-size:14px; }
  .cards{ gap:16px; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .card{ padding:16px; }
  .v{ font-size:1.85rem; }
  th,td{ padding:10px 12px; }
  #result > * + * { margin-top: 20px; }
}

/* ≥ 1800px — ultrawide polish */
@media (min-width:1800px){
  body{ max-width:1400px; margin:36px auto; font-size:18px; }
  .sticky{ padding:12px 18px; }
  .sticky-inner{ gap:14px; font-size:14.5px; }
  .cards{ gap:18px; grid-template-columns:repeat(7,minmax(0,1fr)); }
  .card{ padding:18px; border-radius:18px; }
  .v{ font-size:2rem; }
  th,td{ padding:12px 14px; }
}

/* Optional hover for cards on desktop */
@media (hover:hover) and (pointer:fine){
  .card{ transition: box-shadow .15s ease, transform .15s ease; }
  .card:hover{
    box-shadow:0 6px 16px rgba(0,0,0,.07);
    transform:translateY(-1px);
  }
}