/* MAD MAV MOTOPACKING — night-sky style, matched to madmavbooks.com / deafbooksllc.com */

/* ---------- Custom fonts (loaded from ./fonts/ next to this HTML) ---------- */
@font-face{font-family:"SF Comic Script";src:url("fonts/SF Comic Script.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Comic Script";src:url("fonts/SF Comic Script Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gallaudet";src:url("fonts/GallaudetRegular-qZe1.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Deep-blue dominant night sky */
  --night-0:#00041a;
  --night-1:#000c33;
  --night-2:#001f5e;
  --night-3:#003684;
  --paper:#e6f0ff;
  --paper-dim:#86a3d6;
  --hairline:rgba(134,163,214,0.20);
  --hairline-strong:rgba(134,163,214,0.38);

  --cyan:#22d3ee;
  --teal:#14b8a6;
  --lime:#a3e635;
  --magenta:#ec4899;
  --ember:#fb923c;
  --ember-bright:#f97316;
  --purple:#7c3aed;

  --font-display:"SF Comic Script","Comic Sans MS",cursive,sans-serif;
  --font-deaf:"Gallaudet",Georgia,serif;
  --font-body:Arial,"Helvetica Neue",Helvetica,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  background:
    radial-gradient(1200px 800px at 78% -8%, rgba(20,184,166,0.16), transparent 65%),
    radial-gradient(1000px 700px at 8% 105%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(800px 600px at 92% 92%, rgba(236,72,153,0.07), transparent 60%),
    radial-gradient(600px 460px at 30% 60%, rgba(163,230,53,0.04), transparent 70%),
    linear-gradient(180deg, #00041a 0%, #000c33 30%, #001f5e 65%, #003684 100%);
  background-attachment:fixed;
  background-size:cover;
  background-color:#00041a;
  min-height:100%;
}
html,body{color:var(--paper);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden;position:relative;background:transparent;padding-bottom:56px}

/* ---------- Stars + aurora ---------- */
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.star{
  position:absolute;background:#fff;border-radius:50%;
  animation:twinkle var(--dur,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);opacity:0;
  box-shadow:0 0 6px rgba(255,255,255,0.45);
}
@keyframes twinkle{0%,100%{opacity:0.1}50%{opacity:var(--peak,0.9)}}
.aurora{position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:0.26}
.aurora::before,.aurora::after{
  content:"";position:absolute;width:60%;height:50%;border-radius:50%;
  background:radial-gradient(closest-side, var(--cyan), transparent);
  top:5%;left:10%;
  animation:drift 22s ease-in-out infinite alternate;
}
.aurora::after{
  background:radial-gradient(closest-side, var(--teal), transparent);
  top:30%;left:55%;width:55%;height:45%;
  animation-duration:28s;animation-delay:-8s;
}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(-6%,4%) scale(1.12)}}

/* ---------- Hero ---------- */
.hero{padding:52px 16px 30px;text-align:center;position:relative}

/* Back link to the globe (madmavmotopacking.com) — same pill style as the site nav */
.back-globe{
  display:inline-block;margin-bottom:18px;
  padding:8px 14px;border-radius:999px;
  font-family:var(--font-body);font-size:11px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--paper-dim);text-decoration:none;
  background:rgba(255,255,255,0.04);border:1px solid var(--hairline-strong);
  transition:color .2s,border-color .2s,background .2s,transform .15s;
}
.back-globe:hover{
  color:var(--paper);border-color:var(--cyan);background:rgba(34,211,238,0.10);
  transform:translateY(-1px);
}

.hero .sig-asl{
  font-family:var(--font-deaf);font-weight:400;
  font-size:clamp(34px,6vw,64px);line-height:1;
  background:linear-gradient(90deg,var(--cyan),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 32px rgba(34,211,238,0.22);
  margin-bottom:10px;
}

.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,5.4vw,58px);line-height:1.05;letter-spacing:0.02em;
  text-transform:uppercase;
  text-shadow:0 4px 40px rgba(34,211,238,0.22);
}
.hero h1 span{
  background:linear-gradient(90deg,var(--cyan),var(--lime),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.goal{
  margin-top:18px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(18px,2.8vw,26px);letter-spacing:0.04em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--ember),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.motto{color:var(--paper-dim);font-style:italic;margin-top:4px;font-size:15px}

/* ---------- Tier bar ---------- */
:root{
  --t-max:#f87171;
  --t-med:#fbbf24;
  --t-ul:#34d399;
  --t-nkd:#94a3b8;
}
.tier-bar{
  max-width:980px;margin:6px auto 18px;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media (max-width:760px){.tier-bar{grid-template-columns:repeat(2,1fr)}}
.tier{
  --tc:var(--cyan);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 8px 10px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid var(--hairline-strong);
  color:var(--paper-dim);cursor:pointer;text-align:center;
  font-family:var(--font-body);
  transition:transform .2s ease,border-color .2s,background .2s,box-shadow .2s;
}
.tier b{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:0.04em;color:var(--tc)}
.tier span{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--paper)}
.tier i{font-size:10px;font-style:normal;color:var(--paper-dim);line-height:1.3}
.tier-max{--tc:var(--t-max)}
.tier-med{--tc:var(--t-med)}
.tier-ul{--tc:var(--t-ul)}
.tier-nkd{--tc:var(--t-nkd)}
.tier:hover{transform:translateY(-2px);border-color:var(--tc)}
.tier.active{
  border-color:var(--tc);
  background:color-mix(in srgb, var(--tc) 12%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tc) 12%, transparent),0 0 24px -6px var(--tc);
}

/* progress fill takes the active tier's color */
body[data-tier="max"] .progress-fill{background:linear-gradient(90deg,#f97316,var(--t-max));box-shadow:0 0 14px rgba(248,113,113,0.5)}
body[data-tier="med"] .progress-fill{background:linear-gradient(90deg,#f59e0b,var(--t-med));box-shadow:0 0 14px rgba(251,191,36,0.5)}
body[data-tier="ul"] .progress-fill{background:linear-gradient(90deg,var(--teal),var(--t-ul));box-shadow:0 0 14px rgba(52,211,153,0.5)}
body[data-tier="nkd"] .progress-fill{background:linear-gradient(90deg,#64748b,var(--t-nkd));box-shadow:0 0 14px rgba(148,163,184,0.5)}

/* ---------- Progress ---------- */
.progress-wrap{max-width:980px;margin:8px auto 0;padding:0 20px;text-align:center}
.progress-bar{
  height:14px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--hairline-strong);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
}
.progress-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--teal),var(--lime));
  box-shadow:0 0 14px rgba(34,211,238,0.5);
  transition:width .3s ease;
}
.progress-fill.complete{background:linear-gradient(90deg,var(--teal),var(--lime));box-shadow:0 0 18px rgba(163,230,53,0.6)}
.progress-text{
  margin-top:10px;color:var(--paper-dim);
  font-size:12px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
}
.actions{
  margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.pdf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:999px;
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:linear-gradient(90deg,var(--cyan),var(--teal));
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pdf-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px -10px rgba(34,211,238,0.55),0 0 0 1px rgba(255,255,255,0.18);
}
.reset-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:999px;
  background:rgba(255,255,255,0.04);border:1px solid var(--hairline-strong);
  color:var(--paper-dim);cursor:pointer;
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  transition:transform .2s ease,border-color .2s,background .2s,box-shadow .2s,color .2s;
}
.reset-btn:hover{
  transform:translateY(-1px);color:var(--paper);
  border-color:var(--cyan);background:rgba(34,211,238,0.10);
  box-shadow:0 0 0 4px rgba(34,211,238,0.08);
}

/* ---------- Checklist cards ---------- */
main{
  max-width:1240px;margin:26px auto 0;padding:0 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;
  align-items:start;
}
@media (max-width:760px){main{padding:0 16px;gap:16px}}

.card{
  position:relative;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border:1px solid var(--hairline);
  padding:22px 22px 16px;
  --a:var(--cyan);--b:var(--teal);
  transition:transform .35s cubic-bezier(0.2,0.8,0.2,1),border-color .35s,box-shadow .35s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.65),0 0 0 1px var(--a) inset;
}

/* per-card color pairs — same energy as the per-book pairs on madmavbooks.com */
.card[data-section="flat-tire"]{--a:#fb923c;--b:#ec4899}
.card[data-section="bearings"]{--a:#7c3aed;--b:#22d3ee}
.card[data-section="chain"]{--a:#22d3ee;--b:#14b8a6}
.card[data-section="maintenance"]{--a:#f97316;--b:#a3e635}
.card[data-section="tools"]{--a:#22d3ee;--b:#7c3aed}
.card[data-section="repair"]{--a:#a3e635;--b:#fb923c}
.card[data-section="racks"]{--a:#14b8a6;--b:#22d3ee}
.card[data-section="recovery"]{--a:#a3e635;--b:#14b8a6}
.card[data-section="safety"]{--a:#ec4899;--b:#fb923c}
.card[data-section="camping"]{--a:#14b8a6;--b:#a3e635}
.card[data-section="cooking"]{--a:#ec4899;--b:#7c3aed}
.card[data-section="hygiene"]{--a:#22d3ee;--b:#a3e635}
.card[data-section="clothes"]{--a:#a3e635;--b:#22d3ee}
.card[data-section="electronics"]{--a:#7c3aed;--b:#ec4899}
.card[data-section="cameras"]{--a:#fb923c;--b:#22d3ee}
.card[data-section="communication"]{--a:#14b8a6;--b:#a3e635}

.card h2{
  font-family:var(--font-display);font-weight:700;
  font-size:22px;letter-spacing:0.02em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--a),var(--b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  border-bottom:1px solid var(--hairline);
  padding-bottom:12px;margin-bottom:10px;
}

.card h3{
  font-family:var(--font-body);font-weight:700;
  font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--paper-dim);
  margin:14px 0 4px;
}

.card ul{list-style:none}

.card li label{
  display:flex;align-items:center;gap:12px;
  padding:8px 8px;border-radius:8px;cursor:pointer;
  font-size:15px;
  transition:background .15s;
}
.card li label:hover{background:rgba(34,211,238,0.08)}

.card input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:21px;height:21px;
  border:2px solid var(--hairline-strong);border-radius:6px;
  background:rgba(255,255,255,0.03);
  cursor:pointer;position:relative;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.card input[type="checkbox"]:hover{border-color:var(--a)}
.card input[type="checkbox"]:checked{
  background:linear-gradient(135deg,var(--a),var(--b));
  border-color:transparent;
  box-shadow:0 0 10px color-mix(in srgb, var(--a) 55%, transparent);
}
.card input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;
  border:solid #00041a;border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.card input[type="checkbox"]:checked + .t{
  color:var(--paper-dim);text-decoration:line-through;
}

.card .sec-sub{
  font-size:11px;color:var(--paper-dim);letter-spacing:0.06em;
  margin:-4px 0 6px;
}

.card .t{flex:1;min-width:0}
.card .t small{
  display:block;font-size:11px;color:var(--paper-dim);line-height:1.35;
}

.card .kg{
  flex-shrink:0;min-width:34px;text-align:right;
  font-size:11px;font-weight:700;color:var(--paper-dim);
  font-variant-numeric:tabular-nums;
}
.card .kg::after{content:" kg";font-weight:400;font-size:9px}

.card .dots{flex-shrink:0;display:flex;gap:3px}
.card .dots i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(134,163,214,0.15);
}
.card .dots i.d-max.on{background:var(--t-max)}
.card .dots i.d-med.on{background:var(--t-med)}
.card .dots i.d-ul.on{background:var(--t-ul)}
.card .dots i.d-nkd.on{background:var(--t-nkd)}

/* ---------- Info panels (bike specs + loading map) ---------- */
.info-wrap{max-width:980px;margin:0 auto;padding:0 20px}
.info{
  border-radius:14px;margin-top:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border:1px solid var(--hairline);
  overflow:hidden;
}
.info summary{
  cursor:pointer;list-style:none;padding:14px 18px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:0.03em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--cyan),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background .2s;
}
.info summary::-webkit-details-marker{display:none}
.info summary::before{
  content:"\25B8";display:inline-block;margin-right:10px;
  -webkit-text-fill-color:var(--paper-dim);transition:transform .2s;
}
.info[open] summary::before{transform:rotate(90deg)}
.info-body{padding:4px 18px 18px;font-size:14px}
.info-body h4{
  font-family:var(--font-body);font-weight:700;
  font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--paper-dim);margin:18px 0 8px;
}
.tscroll{overflow-x:auto}
table.spec,table.grid4{width:100%;border-collapse:collapse;font-size:13px}
table.spec th,table.grid4 th{
  text-align:left;font-weight:700;color:var(--paper);
  padding:7px 10px 7px 0;vertical-align:top;white-space:nowrap;
}
table.spec td,table.grid4 td{padding:7px 0;color:var(--paper-dim);vertical-align:top}
table.spec tr,table.grid4 tr{border-bottom:1px solid var(--hairline)}
table.grid4 th,table.grid4 td{white-space:nowrap;padding-right:14px}
table.grid4 th:first-child{white-space:normal}
.c-max{color:var(--t-max)!important}
.c-med{color:var(--t-med)!important}
.c-ul{color:var(--t-ul)!important}
.c-nkd{color:var(--t-nkd)!important}
.bad{color:var(--t-max)!important;font-weight:700}
.good{color:var(--t-ul)!important;font-weight:700}
.warn{
  margin-top:10px;padding:10px 14px;border-radius:10px;
  border:1px solid rgba(248,113,113,0.35);background:rgba(248,113,113,0.07);
  color:var(--paper-dim);font-size:13px;line-height:1.5;
}
.warn b{color:var(--t-max)}
.dim-note{color:var(--paper-dim);font-size:12px;margin-top:8px;line-height:1.5}
dl.zones{margin-top:6px}
dl.zones dt{
  margin-top:14px;font-weight:700;color:var(--paper);font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;
}
dl.zones dt em{
  font-style:normal;margin-left:8px;font-size:11px;letter-spacing:0.18em;
  background:linear-gradient(90deg,var(--ember),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
dl.zones dd{color:var(--paper-dim);font-size:13px;line-height:1.55;margin-top:3px}
ol.rules{margin:4px 0 0 18px;color:var(--paper-dim);font-size:13px;line-height:1.6}
ol.rules li{margin-top:5px}

/* ---------- THE RIG (3D bike) ---------- */
.rig-wrap{max-width:1240px;margin:34px auto 0;padding:0 28px}
@media (max-width:760px){.rig-wrap{padding:0 12px}}
.rig-title{
  text-align:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:0.03em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--cyan),var(--lime),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rig-title span{
  display:inline-block;margin-left:12px;font-size:0.55em;vertical-align:middle;
  background:linear-gradient(90deg,var(--ember),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rig-hint{
  text-align:center;color:var(--paper-dim);font-size:12px;
  margin:6px 0 14px;letter-spacing:0.04em;
}
#rig{
  position:relative;height:min(74vh,620px);
  border-radius:18px;overflow:hidden;
  border:1px solid var(--hairline-strong);
  background:
    radial-gradient(900px 500px at 50% 110%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(700px 400px at 80% -10%, rgba(236,72,153,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,4,26,0.35), rgba(0,12,51,0.55));
  cursor:grab;
}
#rig:active{cursor:grabbing}
#rig canvas{display:block;width:100%;height:100%}

.rig-controls{position:absolute;top:14px;left:14px;z-index:5;display:flex;gap:8px}
.rig-btn{
  padding:9px 16px;border-radius:999px;
  background:rgba(2,15,50,0.75);backdrop-filter:blur(8px);
  border:1px solid var(--hairline-strong);
  color:var(--paper-dim);cursor:pointer;
  font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.rig-btn:hover{color:var(--paper);border-color:var(--cyan)}
.rig-btn.on{
  color:#fff;border-color:var(--ember);
  background:linear-gradient(90deg,rgba(249,115,22,0.35),rgba(248,113,113,0.35));
  box-shadow:0 0 18px -4px var(--ember);
}

.rig-zonepanel{
  position:absolute;top:60px;left:14px;z-index:6;
  width:min(280px, calc(100% - 28px));
  max-height:calc(100% - 76px);overflow-y:auto;
  background:rgba(2,15,50,0.92);backdrop-filter:blur(14px);
  border:1px solid var(--hairline-strong);border-radius:14px;
  padding:12px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(34,211,238,0.15);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.rig-zonepanel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rig-zp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--hairline);
}
.rig-zp-head b{
  font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--paper);
}
.rig-zp-head button{
  background:rgba(255,255,255,0.04);border:1px solid var(--hairline-strong);
  color:var(--paper-dim);border-radius:6px;padding:3px 9px;margin-left:6px;
  font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.rig-zp-head button:hover{color:var(--cyan);border-color:var(--cyan)}
.rig-zp-row{
  display:flex;align-items:center;gap:9px;
  padding:5px 4px;border-radius:6px;cursor:pointer;
  font-size:11px;letter-spacing:0.04em;color:var(--paper);
  transition:background .15s;
}
.rig-zp-row:hover{background:rgba(34,211,238,0.08)}
.rig-zp-row input{
  appearance:none;-webkit-appearance:none;flex-shrink:0;
  width:15px;height:15px;border:2px solid var(--hairline-strong);border-radius:4px;
  cursor:pointer;position:relative;
  transition:background .15s,border-color .15s;
}
.rig-zp-row input:checked{
  background:linear-gradient(135deg,var(--cyan),var(--teal));border-color:transparent;
}
.rig-zp-row input:checked::after{
  content:"";position:absolute;left:3.5px;top:0.5px;
  width:4px;height:8px;border:solid #00041a;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.rig-zp-row span{flex:1;font-weight:700;font-size:10px;letter-spacing:0.12em;text-transform:uppercase}
.rig-zp-row i{font-style:normal;font-size:10px;color:var(--paper-dim)}

.rig-panel{
  position:absolute;top:14px;right:14px;z-index:6;
  width:min(340px, calc(100% - 28px));
  background:rgba(2,15,50,0.92);backdrop-filter:blur(14px);
  border:1px solid var(--hairline-strong);border-radius:14px;
  padding:16px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(34,211,238,0.15);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.rig-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rig-panel h3{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:0.04em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--ember),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:26px;
}
.rig-panel h4{
  font-family:var(--font-body);font-weight:700;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--paper);
  margin-top:2px;
}
.rig-meta{display:flex;align-items:center;gap:12px;margin-top:8px}
.rig-kg{
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  color:#00041a;background:linear-gradient(90deg,var(--cyan),var(--lime));
}
.rig-dots{display:flex;gap:4px}
.rig-dots .pd{width:7px;height:7px;border-radius:50%;background:rgba(134,163,214,0.18)}
.rig-dots .pd-max.on{background:var(--t-max)}
.rig-dots .pd-med.on{background:var(--t-med)}
.rig-dots .pd-ul.on{background:var(--t-ul)}
.rig-dots .pd-nkd.on{background:var(--t-nkd)}
.rig-panel p{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--paper-dim)}
.rig-close{
  position:absolute;top:10px;right:12px;
  background:none;border:none;color:var(--paper-dim);
  font-size:20px;cursor:pointer;line-height:1;
}
.rig-close:hover{color:var(--paper)}
@media (max-width:640px){
  .rig-panel{top:auto;bottom:12px;right:12px;left:12px;width:auto}
}

/* ---------- Rig editor ---------- */
.rig-editor{
  position:absolute;bottom:12px;left:12px;z-index:7;
  width:min(380px, calc(100% - 24px));
  background:rgba(2,15,50,0.94);backdrop-filter:blur(14px);
  border:1px solid var(--hairline-strong);border-radius:14px;
  padding:12px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(34,211,238,0.15);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.rig-editor.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rig-editor > b{
  display:block;font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:8px;
}
.ed-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.ed-grid button{
  background:rgba(255,255,255,0.05);border:1px solid var(--hairline-strong);
  color:var(--paper);border-radius:6px;padding:6px 2px;
  font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.ed-grid button:hover{border-color:var(--cyan);background:rgba(34,211,238,0.12)}
.ed-grid button:active{background:rgba(34,211,238,0.25)}
.ed-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ed-color{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--paper-dim);
}
.ed-color input{
  width:34px;height:24px;border:1px solid var(--hairline-strong);border-radius:6px;
  background:transparent;cursor:pointer;padding:1px;
}
.ed-act{
  background:rgba(255,255,255,0.05);border:1px solid var(--hairline-strong);
  color:var(--paper);border-radius:999px;padding:6px 13px;
  font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.ed-act:hover{border-color:var(--lime);color:var(--lime)}
#edExport{border-color:var(--teal);color:var(--teal)}
#edExport:hover{border-color:var(--lime);color:var(--lime)}
.ed-readout{
  margin-top:8px;font-size:10px;color:var(--paper-dim);
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;min-height:13px;
}
#edOut{
  display:none;width:100%;height:52px;margin-top:8px;
  background:rgba(0,4,26,0.7);border:1px solid var(--hairline-strong);border-radius:8px;
  color:var(--lime);font-size:9px;font-family:monospace;padding:6px;resize:none;
}
.ed-lbl{font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--paper-dim)}
.ed-del{border-color:var(--t-max)!important;color:var(--t-max)!important}
.ed-del:hover{border-color:#fff!important;color:#fff!important}
.ed-keys{margin-top:8px;font-size:9.5px;color:var(--paper-dim);line-height:1.5}

/* ---------- Footer ---------- */
footer{
  text-align:center;margin-top:44px;padding:0 16px;
  color:var(--paper-dim);
  font-size:11px;font-weight:700;letter-spacing:0.26em;text-transform:uppercase;
}