:root{
  --bg:#0e0f13; --ink:#eef2ff; --muted:#aab0c7;
  --panel:#141829; --stroke:#252a46; --ring:#88e0ff;
  --chip:#1a1f36; --card:#171c32;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
  background:
    radial-gradient(900px 600px at 110% -10%, #274a3a1a 0, transparent 70%),
    radial-gradient(800px 500px at -10% 0%, #3f2b4b1c 0, transparent 70%),
    linear-gradient(180deg,#0e0f13 0,#0b0d12 100%);
}

/* Header */
.site-header{padding:2rem 1rem 1.2rem; text-align:center}
.site-header h1{
  margin:0; font-size:clamp(1.6rem,2.2vw + 1rem,2.4rem); font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(90deg,#9fe870,#8ee2ff,#ffc7f1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px #ffffff20);
}
.site-header .sub{margin:.5rem auto 0; max-width:64ch; color:var(--muted)}

.wrap{max-width:1100px; margin:0 auto; padding:0 1rem 2.5rem}
.panel{
  background:linear-gradient(180deg,#151a33,#13182e);
  border:1px solid var(--stroke);
  box-shadow:0 12px 40px #0006 inset;
  border-radius:18px; padding:1rem; margin:0 0 1rem;
}
.panel-title{margin:.1rem .2rem .2rem; font-size:1.05rem}
.panel-help{margin:.2rem .2rem .7rem; color:var(--muted)}

/* ===== Row-scale (selectable) ===== */
.scale-select{position:relative}
.sel{position:absolute; opacity:0; pointer-events:none}

.row-scale{
  display:block;
  background:linear-gradient(180deg,#171d39,#141a33);
  border:1px solid #2a3050;
  box-shadow:0 8px 28px #0007, inset 0 1px 0 #ffffff10;
  border-radius:16px;
  padding:1rem;
  margin:.8rem 0;
  cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .25s ease, border-color .2s ease;
}
.row-scale:hover{transform:translateY(-1px)}
.row-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem}
.row-head h3{margin:0; font-size:1.05rem}
.row-head .tag{
  margin-left:auto; font-size:.8rem; color:#b9bfe0;
  padding:.15rem .45rem; border-radius:999px; border:1px solid #2a325e;
  background:#12172b;
}

.labels.seven, .icons.seven{
  list-style:none; padding:0; margin:.4rem 0 .4rem;
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.labels.seven li{ text-align:center; font-size:.85rem; color:#cfe0ff; opacity:.95 }
.icons.seven li{ text-align:center; font-size:1.05rem; opacity:.95 }

/* Base 7-marker bar */
.bar{
  --grad:linear-gradient(90deg,#b8c1ec,#e2e8f0);
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  background:#0f1221; padding:2px; border-radius:12px;
  border:1px solid #2a2f4e; box-shadow:inset 0 10px 22px #0005;
}
.bar span{display:block; height:40px; border-radius:10px}

/* Smooth rainbow across markers */
.bar.seven.use-gradient.rainbow-smooth span{
  background:linear-gradient(90deg,#ff3b30 0%, #ff9500 16.66%, #ffcc00 33.33%, #34c759 50%, #007aff 66.66%, #5856d6 83.33%, #af52de 100%);
  background-size:700% 100%;
}
.bar.seven.use-gradient span:nth-child(1){background-position: 0% 0}
.bar.seven.use-gradient span:nth-child(2){background-position:16.66% 0}
.bar.seven.use-gradient span:nth-child(3){background-position:33.33% 0}
.bar.seven.use-gradient span:nth-child(4){background-position:50% 0}
.bar.seven.use-gradient span:nth-child(5){background-position:66.66% 0}
.bar.seven.use-gradient span:nth-child(6){background-position:83.33% 0}
.bar.seven.use-gradient span:nth-child(7){background-position:100% 0}

/* Selected state */
.picked{
  position:absolute; top:.5rem; right:.5rem;
  font-size:.75rem; padding:.18rem .5rem; border-radius:999px;
  background:#10243a; color:#cfefff; border:1px solid #2f4864;
  transform:translateY(-8px); opacity:0; transition:all .18s ease;
  pointer-events:none;
}
.sel:checked + .row-scale{
  border-color:var(--ring);
  box-shadow:0 0 0 1px var(--ring), 0 14px 30px #88e0ff2a, inset 0 1px 0 #ffffff14;
}
.sel:checked + .row-scale .picked{transform:none; opacity:1}

/* ===== Groups layout ===== */
.group{border:1px solid #2a3050; border-radius:14px; background:#12172b; padding:.6rem .8rem; margin:.9rem 0}
.group>summary{cursor:pointer; font-weight:700; list-style:none; outline:none}
.group>summary::-webkit-details-marker{display:none}

.group-grid{
  margin-top:.7rem;
  display:grid;
  grid-template-columns:1fr 160px; /* right column for mini scale */
  gap:1rem;
}
.group-scales{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:.9rem;
}

/* Tiny reference bar (non-selectable) */
.group-mini{
  align-self:start;
}
.mini-legend{
  display:grid; grid-template-columns:56px 1fr; gap:.6rem;
  align-items:center;
  background:#151a33; border:1px solid #2a3050; border-radius:14px; padding:.6rem;
  box-shadow:0 6px 20px #0006, inset 0 1px 0 #ffffff10;
}
.mini-vbar{
  width:56px; height:180px; border-radius:12px; border:1px solid #2a2f4e; padding:2px; background:#0f1221;
  box-shadow:inset 0 10px 22px #0005;
}
.rainbow-vertical{
  background:linear-gradient(180deg,#ff3b30 0%, #ff9500 16.66%, #ffcc00 33.33%, #34c759 50%, #007aff 66.66%, #5856d6 83.33%, #af52de 100%);
}
.mini-vlabels{
  list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(7,1fr); gap:6px;
}
.mini-vlabels li{
  display:flex; align-items:center; justify-content:flex-start;
  padding:.15rem .4rem; font-size:.85rem; color:#cfe0ff; background:#111732; border:1px solid #243055; border-radius:8px;
}

/* Note + button */
.note{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid #2a304f; background:#171b2f; color:#e9ecf8;
  border-radius:12px; padding:.6rem 1rem; font-weight:700; letter-spacing:.3px;
  box-shadow:0 8px 24px #0007, inset 0 1px 0 #ffffff0f;
  cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}

/* Footer */
.site-foot{color:#9aa1b7; text-align:center; padding:.8rem}

/* Print */
@media print{
  body{background:#fff; color:#000}
  .panel,.row-scale,.bar{box-shadow:none; background:#fff; border-color:#ccc}
  .btn,.site-foot{display:none}
}

/* Responsive */
@media (max-width:900px){
  .group-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bar span{height:36px}
}