/* CUMPLIANCE — Daem's page palette and type, for two people */
:root {
  --ink: #060309;
  --accent: #ff3d81;
  --accent2: #b23bff;
  --accent-rgb: 255, 61, 129;
  --accent2-rgb: 178, 59, 255;
  --text: #f2e7f2;
  --panel: rgba(18, 10, 22, .72);
  --panel-border: rgba(var(--accent-rgb), .16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(15px, 0.55vw + 8.5px, 22px); -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }
body {
  background: var(--ink); color: var(--text);
  font-family: Georgia, 'Times New Roman', serif; font-size: 1rem;
  min-height: 100vh; overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }
input::placeholder, textarea::placeholder { color: rgba(242, 231, 242, .28); font-style: italic; }
button { font: inherit; }
button:disabled { opacity: .5; cursor: default; }

.glow-top {
  position: fixed; top: -20vh; left: 50%; transform: translateX(-50%);
  width: 70vw; height: 55vh; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--accent2-rgb), .12), rgba(var(--accent2-rgb), 0));
}
.glow-bottom {
  position: fixed; bottom: -25vh; left: 50%; transform: translateX(-50%);
  width: 85vw; height: 58vh; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .10), rgba(var(--accent-rgb), 0));
}

.label {
  font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .35em; font-size: .68rem; color: rgba(242, 231, 242, .45); padding-left: .35em;
}
.dim { color: rgba(242, 231, 242, .5); }
.small { font-size: .8rem; }
.wordmark {
  letter-spacing: .18em; padding-left: .18em; color: #fff; font-weight: 400;
  text-shadow: 0 0 24px rgba(var(--accent-rgb), .6), 0 0 70px rgba(var(--accent2-rgb), .45);
}

/* ---- auth pages ---- */
.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; padding: 4vh 16px;
}
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: 3rem; text-align: center; }
.auth-head .eyebrow { color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .7); letter-spacing: .5em; padding-left: .5em; }
.auth-head h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1; }
.auth-form { display: flex; flex-direction: column; gap: 1.2rem; width: min(28rem, 100%); }
.fieldgroup { display: flex; flex-direction: column; gap: .5rem; }
.field {
  width: 100%; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px; padding: .9rem 1rem; color: var(--text);
  font-family: Georgia, serif; font-size: 1rem; outline: none;
}
.field:focus { border-color: rgba(var(--accent-rgb), .5); }
textarea.field { resize: vertical; min-height: 4.5rem; }
.btn-enter {
  display: block; width: 100%; text-align: center; padding: 1rem .6rem; border: 1px solid rgba(var(--accent-rgb), .55);
  border-radius: 6px; color: #fff; font-family: system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .3em; text-indent: .3em; font-size: .75rem;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent2-rgb), .10));
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .22); cursor: pointer;
}
.btn-enter:hover { border-color: var(--accent); }
.auth-alt { text-align: center; font-size: .9rem; color: rgba(242, 231, 242, .42); }
.auth-error {
  text-align: center; font-style: italic; font-size: .95rem; color: #ffb3cd;
  border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 6px; padding: .7rem 1rem;
}
.checkrow { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: rgba(242, 231, 242, .7); }
.checkrow input { margin-top: .25rem; accent-color: var(--accent); }
.invite-line { text-align: center; font-size: 1.15rem; line-height: 1.7; }

/* ---- dashboard ---- */
.dash { position: relative; min-height: 100vh; display: flex; flex-direction: column; width: 100%; }
.dash-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 2.5vw .9rem; position: relative;
}
.dash-header .wordmark { font-size: 1.4rem; }
.dash-id { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; }
.dash-actions { display: flex; align-items: center; gap: 1.2rem; }
.dash-cols {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(1.4rem, 2vw, 2.6rem); padding: .5rem 4.5vw 1.8rem;
}
.col-side { width: clamp(19rem, 22vw, 27rem); display: flex; flex-direction: column; gap: 1.2rem; flex-shrink: 0; }
.col-center { width: clamp(22rem, 31vw, 38rem); display: flex; flex-direction: column; gap: 1.2rem; }

.card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .8rem;
}
.cardtitle {
  font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .35em; font-size: .68rem; color: var(--accent); padding-left: .35em;
}
.expand-btn {
  font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .25em; color: rgba(242, 231, 242, .45); cursor: pointer;
  background: none; border: none; text-align: left; padding: .3rem 0 0;
}
.expand-btn:hover { color: var(--accent); }
.btn-send {
  padding: .7rem 1.1rem; border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 6px;
  font-family: system-ui, sans-serif; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .3em; text-indent: .3em; color: #fff; white-space: nowrap;
  background: rgba(var(--accent-rgb), .12); cursor: pointer;
}
.ghost-btn {
  padding: .6rem .9rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px;
  font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .08em; color: var(--text);
  background: rgba(255, 255, 255, .03); cursor: pointer; white-space: nowrap;
}
.ghost-btn:hover { border-color: rgba(var(--accent-rgb), .55); }
.ghost-btn.danger { border-color: rgba(var(--accent-rgb), .55); color: #ffb3cd; }
.msg { font-family: system-ui, sans-serif; font-size: .8rem; color: #ffb3cd; min-height: 1em; }
.btnrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.btnrow.col { flex-direction: column; align-items: stretch; }
.btnrow .field { flex: 1; min-width: 0; }

/* status */
.status-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.status-main { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.lock-word { font-size: 2.4rem; color: rgba(255, 255, 255, .55); letter-spacing: .12em; }
.lock-word.on { color: #fff; text-shadow: 0 0 22px rgba(var(--accent-rgb), .55); }
.lock-line { font-size: .95rem; font-variant-numeric: tabular-nums; }
.lock-line.remaining { font-style: italic; color: #d9b6ff; }
.lock-note { font-size: .85rem; font-style: italic; }
.up { color: #ff6f9c; font-style: italic; }
.status-release { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.btn-release {
  width: 3.4rem; height: 3.4rem; border-radius: 6px; background: var(--accent);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-release svg { width: 1.7rem; height: 1.7rem; }
.btn-release:active { filter: brightness(.85); }
.release-cap { font-family: system-ui, sans-serif; font-size: .55rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(255, 255, 255, .6); }

/* keyholder controls */
.kh-card > div { display: flex; flex-direction: column; gap: .7rem; }
.kh-block { display: flex; flex-direction: column; gap: .6rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.term-pick { display: flex; gap: .5rem; flex-wrap: wrap; }
.term-pick label { cursor: pointer; }
.term-pick input { position: absolute; opacity: 0; pointer-events: none; }
.term-pick span {
  display: inline-block; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  font-family: system-ui, sans-serif; font-size: .75rem; color: rgba(242, 231, 242, .7);
}
.term-pick input:checked + span { border-color: rgba(var(--accent-rgb), .7); color: #fff; background: rgba(var(--accent-rgb), .14); }
.term-pick input:focus-visible + span { outline: 2px solid rgba(var(--accent-rgb), .6); }
.dur { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.dur label { display: flex; align-items: center; gap: .35rem; font-family: system-ui, sans-serif; font-size: .75rem; color: rgba(242, 231, 242, .55); }
.field.num { width: 4.4rem; padding: .55rem .6rem; text-align: center; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
#btn-unlock { align-self: flex-start; }

/* pairing */
.pair-card { gap: 1.1rem; }
.pair-line { line-height: 1.6; }
.last-pair { font-size: .88rem; line-height: 1.5; color: rgba(242, 231, 242, .7);
  border-left: 2px solid rgba(var(--accent2-rgb), .4); padding: .2rem 0 .2rem .7rem; }
.invite-link {
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all;
  padding: .7rem .8rem; border: 1px dashed rgba(var(--accent-rgb), .35); border-radius: 6px; margin: .5rem 0;
}
.code-form { display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .06); }

/* feed */
.feed { display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; max-height: 22rem; overflow-y: auto; }
.ev-release { color: #ffb3cd; }

/* install */
.install-hint {
  margin: 0 4.5vw .6rem; padding: .6rem .9rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid rgba(var(--accent2-rgb), .35); border-radius: 6px; font-size: .85rem;
}
.install-hint .expand-btn { padding: 0; }

@media (max-width: 900px) {
  .dash-header { padding: 1rem 16px .6rem; flex-wrap: wrap; }
  .dash-id { position: static; transform: none; order: 3; width: 100%; }
  .dash-cols { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: .4rem 16px 1.6rem; }
  .col-side, .col-center { width: 100%; }
  .install-hint { margin: 0 16px .6rem; }
  .lock-word { font-size: 2rem; }
}

/* ---- Coyote control panel ---- */
.cpanel{max-width:64rem;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem;padding:.4rem clamp(12px,3vw,1rem) 7rem}
.statedot{width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.2);display:inline-block}
.statedot.on{background:var(--hook,#7ef0c0);box-shadow:0 0 10px #7ef0c0}
.conn{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start}
.qr{width:150px;height:150px;border-radius:8px;background:#0a0610;border:1px solid rgba(var(--accent-rgb),.3);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:rgba(242,231,242,.4);font-size:.7rem}
.qr img,.qr canvas{display:block;border-radius:4px}
.conn-body{flex:1;min-width:14rem;display:flex;flex-direction:column;gap:.6rem}
.conn-state{font-size:1.1rem}
.conn-state.ok{color:#9fe6c2}
.read2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.read2 .gauge{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.25rem}
.read2 .gauge .n{font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.read2 .gauge.a .n{color:#9cc2ff}.read2 .gauge.b .n{color:#ffb79c}
.chans{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:820px){.chans,.read2{grid-template-columns:1fr}}
.chan2{border-top:3px solid #3a86ff}
.chan2.cb{border-top-color:#ff6f3a}
.chanhead{display:flex;align-items:center;justify-content:space-between}
.channame{font-size:1.1rem;letter-spacing:.08em}
.channame b{color:#9cc2ff}.chan2.cb .channame b{color:#ffb79c}
.dialrow{display:flex;flex-direction:column;gap:1rem}
.power{display:flex;flex-direction:column;gap:.4rem}
.powerval{font-size:1.8rem;font-variant-numeric:tabular-nums}
.freqcol{display:flex;flex-direction:column;gap:.8rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.8rem}
.range{width:100%;accent-color:var(--accent)}
.sl .row{display:flex;justify-content:space-between;align-items:baseline}
.sl .row .v{color:#d9b6ff;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font-family:system-ui,sans-serif;font-size:.72rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:.35rem .75rem;color:rgba(242,231,242,.8);cursor:pointer}
.chip.on{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.14);color:#fff}
.sendrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.safebar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1rem;z-index:20;
  background:linear-gradient(0deg,rgba(6,3,9,.97),rgba(6,3,9,.85));border-top:1px solid rgba(255,120,120,.4);
  padding:.7rem clamp(12px,3vw,1.5rem);padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
.safebtn{font-family:system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;font-weight:700;
  color:#fff;background:#e23b3b;border:none;border-radius:8px;padding:.9rem 1.8rem;cursor:pointer;
  box-shadow:0 0 22px rgba(226,59,59,.5);flex:0 0 auto}
.safebtn:active{filter:brightness(.9)}
.safebody{flex:1;min-width:10rem}
/* sub-side device-connect card */
.devconnect{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.devconnect .qr{width:128px;height:128px}

/* ---- rules / timers / profiles ---- */
.rules{display:flex;flex-direction:column;gap:.4rem}
.rule{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;font-size:.9rem;line-height:1.45;
  border-left:2px solid rgba(var(--accent2-rgb),.4);padding:.15rem 0 .15rem .6rem}
.rule .x,.tbtn.x{background:none;border:none;color:rgba(242,231,242,.4);cursor:pointer;font-size:.8rem;flex:0 0 auto}
.rule .x:hover{color:var(--accent)}
.addrow{display:flex;gap:.5rem;margin-top:.3rem}
.addrow .field{flex:1;min-width:0}
.timers{display:flex;flex-direction:column;gap:.6rem}
.timer{border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.3rem}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.tlabel{font-size:.95rem}
.tclock{font-variant-numeric:tabular-nums;color:#d9b6ff;font-size:1.05rem}
.tclock.up{color:#ff6f9c;font-style:italic}
.tstate{text-transform:uppercase;letter-spacing:.1em;font-size:.6rem}
.tctrls{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.2rem}
.tbtn{font-family:system-ui,sans-serif;font-size:.65rem;letter-spacing:.04em;border:1px solid rgba(255,255,255,.14);
  border-radius:5px;padding:.3rem .55rem;background:rgba(255,255,255,.03);color:var(--text);cursor:pointer}
.tbtn:hover{border-color:rgba(var(--accent-rgb),.5)}
.timer-form{display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem}
.dur-mini{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dur-mini label{display:flex;align-items:center;gap:.3rem;font-family:system-ui,sans-serif;font-size:.7rem;color:rgba(242,231,242,.55)}
.prof-block{display:flex;flex-direction:column;gap:.4rem;padding-bottom:.7rem}
.prof-block+.prof-block{border-top:1px solid rgba(255,255,255,.06);padding-top:.7rem}
.prof-view{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;line-height:1.45}
.prof-view .label{display:block;margin-bottom:.15rem}
.prof-form{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.prof-form textarea.field{min-height:3rem}

/* ---- calendar / gear ---- */
.agenda{display:flex;flex-direction:column;gap:.5rem;max-height:18rem;overflow-y:auto}
.ag-day{display:flex;flex-direction:column;gap:.25rem}
.ag-date{font-family:system-ui,sans-serif;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,231,242,.4)}
.ag-item{display:flex;justify-content:space-between;gap:.5rem;font-size:.88rem;line-height:1.4;
  border-left:2px solid rgba(255,255,255,.15);padding:.1rem 0 .1rem .6rem}
.ag-item.kh{border-left-color:var(--accent)}
.ag-item.sub{border-left-color:#3a86ff}
.flex-fixed{color:#ff9c9c;font-size:.7rem}.flex-firm{color:#d9b6ff;font-size:.7rem}.flex-flexible{color:rgba(242,231,242,.45);font-size:.7rem}
.cal-form{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}
.cal-row{display:flex;gap:.5rem}.cal-row>*{flex:1;min-width:0}
.cal-row label{display:flex;align-items:center;gap:.3rem}
.gear-block{display:flex;flex-direction:column;gap:.35rem;padding-bottom:.6rem}
.gear-block+.gear-block{border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}
.rows{display:flex;flex-direction:column;gap:.3rem}
.grow{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.9rem;line-height:1.4}
.gactions{display:flex;gap:.4rem;align-items:center;flex:0 0 auto}

/* ---- chat ---- */
.chat-card{min-height:16rem}
.chat-log{display:flex;flex-direction:column;gap:.5rem;max-height:24rem;overflow-y:auto;padding-right:.3rem}
.bub{max-width:85%;border-radius:11px;padding:.55rem .8rem;font-size:.92rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.bub.them{align-self:flex-start;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.22)}
.bub.me{align-self:flex-end;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.bub-img{display:block;margin-top:.35rem;max-width:100%;max-height:15rem;border-radius:8px}
.bub-vid{display:block;margin-top:.35rem;max-width:100%;max-height:16rem;border-radius:8px}
.bub audio{display:block;margin-top:.35rem;width:100%;height:2rem}
.bub-file{display:inline-block;margin-top:.3rem;color:var(--accent)}
.chat-attach{font-family:system-ui,sans-serif;font-size:.78rem;color:rgba(242,231,242,.7);display:flex;align-items:center;gap:.4rem}
.chat-input{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;margin-top:.5rem}
.chat-input .field{width:100%;resize:none;overflow-y:hidden;line-height:1.35}
.chat-tools{display:flex;align-items:center;gap:.3rem}
.chat-tools .btn-send{margin-left:auto}
.mic-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:6px;
  width:2.2rem;height:2.2rem;cursor:pointer;font-size:1rem;color:var(--text)}
.mic-btn.recording{border-color:#ff4d4d;box-shadow:0 0 10px rgba(255,77,77,.5)}

/* ---- tasks ---- */
.tasks,.tasks-done{display:flex;flex-direction:column;gap:.6rem}
.tasks-done{margin-top:.4rem;opacity:.85}
.task{border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.35rem}
.tstatus{font-family:system-ui,sans-serif;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:.12rem .5rem;flex:0 0 auto}
.tstatus.s-open{border:1px solid rgba(255,255,255,.2);color:rgba(242,231,242,.6)}
.tstatus.s-submitted{border:1px solid rgba(var(--accent2-rgb),.5);color:#d9b6ff}
.tstatus.s-passed{border:1px solid rgba(126,240,192,.5);color:#9fe6c2}
.tstatus.s-failed{border:1px solid rgba(255,120,120,.5);color:#ffb3b3}
.tproof{font-size:.88rem;border-left:2px solid rgba(var(--accent2-rgb),.4);padding-left:.5rem;line-height:1.4}
.task .bub-img,.task .bub-vid{max-height:12rem;border-radius:7px;margin-top:.2rem}
.task audio{width:100%;height:2rem;margin-top:.2rem}
.submit-wrap{display:flex;flex-direction:column;gap:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.5rem}
.submit-wrap textarea.field{min-height:2.6rem}
.task-form{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}
.req-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-family:system-ui,sans-serif;font-size:.75rem}
.req-row label{display:flex;align-items:center;gap:.25rem}

/* ---- portrait / gallery ---- */
.portrait-card{align-items:center;gap:.7rem}
.portrait-wrap{width:100%;display:flex;justify-content:center}
.portrait-wrap img{max-width:100%;max-height:18rem;border-radius:10px;border:1px solid rgba(var(--accent-rgb),.25);box-shadow:0 0 30px rgba(var(--accent2-rgb),.2)}
.portrait-empty{padding:2rem;text-align:center}
.portrait-ctrls{display:flex;gap:.5rem;justify-content:center}
.gal-grid{display:flex;flex-direction:column;gap:.5rem}
.gal-tile{border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:.55rem .7rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.gal-tile.sub{cursor:pointer;user-select:none;-webkit-user-select:none}
.gal-tile.sub:active{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.08)}
.gal-tile.spent{opacity:.5;cursor:default}
.gal-lock{font-size:1.1rem;flex:0 0 auto}
.gal-meta{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;flex:1;min-width:0}
.gal-meta .small{display:block}
.gal-form{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}
.gal-overlay{position:fixed;inset:0;z-index:40;background:rgba(6,3,9,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}
.gal-view img{max-width:96vw;max-height:84vh;border-radius:8px}
.gal-cap{font-family:system-ui,sans-serif;color:rgba(242,231,242,.7);font-size:.85rem}

/* ---- the wheel ---- */
.wheels{display:flex;flex-direction:column;gap:1rem}
.wheel{border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.5rem;align-items:stretch}
.wheel-head{font-size:1rem;letter-spacing:.05em}
.wheel-svg{width:min(180px,70%);align-self:center;overflow:visible}
.wheel-rot{transition:transform 0s}
.wslices{display:flex;flex-direction:column;gap:.25rem}
.wslice{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.88rem;line-height:1.35}
.wout{font-family:system-ui,sans-serif;font-size:.65rem;color:#d9b6ff;border:1px solid rgba(var(--accent2-rgb),.4);border-radius:999px;padding:.05rem .4rem}
.wslice-form{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;border-top:1px solid rgba(255,255,255,.06);padding-top:.5rem}
.wslice-form .field{flex:1;min-width:6rem}
.wdur{display:flex;gap:.3rem}.wdur .num{width:3rem;flex:0 0 auto}
.wlast{font-size:.85rem;color:rgba(242,231,242,.75)}

/* ---- app lock ---- */
.applock-overlay{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.applock-box{display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(20rem,100%);text-align:center}
.pin-field{text-align:center;letter-spacing:.5em;font-size:1.3rem;width:100%}

/* ---- hypno studio ---- */
.hypno-sessions{display:flex;flex-direction:column;gap:.7rem}
.hsession{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.45rem}
.hhead{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
.haudio{width:100%;height:2.2rem}
.hcues{display:flex;flex-direction:column;gap:.25rem}
.hcue{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;font-variant-numeric:tabular-nums}
.hcue-add{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.hcue-add .field{flex:0 0 auto}
.hypno-new{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}

/* ---- games ---- */
.games{display:flex;flex-direction:column;gap:.6rem}
.game-item{border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.3rem}
.game-form{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem;border-top:1px solid rgba(255,255,255,.06);padding-top:.6rem}
.game-opt{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.game-overlay{position:fixed;inset:0;z-index:45;background:rgba(6,3,9,.95);display:flex;align-items:center;justify-content:center;padding:1rem}
.game-stage{width:min(32rem,100%);display:flex;flex-direction:column;gap:.8rem}
.game-top{display:flex;justify-content:space-between;align-items:center}
.game-title{font-size:1.2rem;color:#fff}
.modal-close{background:none;border:none;color:rgba(242,231,242,.6);font-size:1.2rem;cursor:pointer}
.game-body{display:flex;flex-direction:column;gap:.7rem;align-items:center}
.game-body .pin-field{width:100%}
.game-status{min-height:1.4rem;text-align:center;font-size:1.05rem}
.won{color:#9fe6c2}
.dc-hist{display:flex;flex-direction:column;gap:.3rem;width:100%;font-variant-numeric:tabular-nums}
.dc-row{font-size:.9rem;color:rgba(242,231,242,.8)}
.fog-wrap{position:relative;width:100%;max-width:26rem}
.fog-img{display:block;width:100%;border-radius:8px}
.fog-grid{position:absolute;inset:0;display:grid;gap:2px}
.fog-tile{background:rgba(10,6,16,.96);border-radius:3px;cursor:pointer;transition:opacity .25s}
.fog-tile.gone{opacity:0;pointer-events:none}
.simon{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:min(16rem,80%);aspect-ratio:1}
.spad{border-radius:10px;background:rgba(255,255,255,.08);cursor:pointer;border:1px solid rgba(255,255,255,.12)}
.spad[data-p="0"]{background:rgba(255,61,129,.3)}.spad[data-p="1"]{background:rgba(58,134,255,.3)}
.spad[data-p="2"]{background:rgba(46,197,160,.3)}.spad[data-p="3"]{background:rgba(255,211,111,.3)}
.spad.lit{filter:brightness(2.2);box-shadow:0 0 20px rgba(255,255,255,.4)}

/* ---- games: tile / needle / operation ---- */
.tile-grid{display:grid;gap:2px;width:min(22rem,88vw);aspect-ratio:1}
.tile{background-repeat:no-repeat;border-radius:2px;cursor:pointer}
.tile.sel{outline:2px solid var(--accent)}
.tile.blank{background:transparent;cursor:default}
.needle-track{position:relative;width:min(24rem,90vw);height:2.4rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;overflow:hidden}
.needle-zone{position:absolute;top:0;bottom:0;background:rgba(126,240,192,.3);border-left:1px solid #7ef0c0;border-right:1px solid #7ef0c0}
.needle-bar{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 8px #fff}
.op-board{position:relative;width:min(22rem,88vw);aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:8px}
.op-site{position:absolute;width:2rem;height:2rem;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);cursor:pointer}
.op-site.next{border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.6);color:#fff}
.op-site.got{background:rgba(126,240,192,.25);border-color:#7ef0c0}

/* ---- seal ---- */
.seal-checks{display:flex;flex-direction:column;gap:.6rem}
.seal-check{border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:.5rem .6rem;display:flex;flex-direction:column;gap:.35rem}
.seal-check .bub-img{max-height:12rem;border-radius:7px}
.seal-mine{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.3rem}

/* ---- lovense ---- */
.arm-form{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem}

/* ---- hypno playback (sub) ---- */
.hypno-play-list{display:flex;flex-direction:column;gap:.4rem}
.hp-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.92rem}

/* ============================================================================
   THE KEEP — app shell, bottom nav, lock hero, needs list, drum wheels
   (phone-first, centered column on wider screens; reuses .card/.field/etc.)
   ============================================================================ */
.app { position: relative; width: 100%; max-width: 880px; margin: 0 auto;
  min-height: 100vh; display: flex; flex-direction: column; }

.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem;
  background: linear-gradient(180deg, rgba(6,3,9,.96), rgba(6,3,9,.78) 70%, rgba(6,3,9,0));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.appbar .wordmark { font-size: 1.15rem; }
.appbar-r { display: flex; align-items: center; gap: .5rem; }
.appbar-btn { font-family: system-ui, sans-serif; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .22em; color: rgba(242,231,242,.6); background: none;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; }
.appbar-btn:hover { color: #fff; border-color: rgba(var(--accent-rgb),.6); }

.install-hint { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin: 0 1.1rem .4rem; padding: .6rem .9rem; border: 1px solid var(--panel-border);
  border-radius: 8px; background: var(--panel); font-size: .85rem; }

.pairpad { padding: 2.2rem 1.1rem; display: flex; justify-content: center; }
.pairpad .pair-card { width: min(30rem, 100%); }

/* views + nav */
.kviews { flex: 1; padding: .4rem 1.1rem calc(5.2rem + env(safe-area-inset-bottom)); }
.kview { display: none; flex-direction: column; gap: 1rem; }
.kview.on { display: flex; }
.kviewhead { font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .32em;
  font-size: .72rem; color: rgba(242,231,242,.55); padding: .4rem .2rem 0; display: flex; align-items: center; gap: .6rem; }
.kviewhead .back { color: var(--accent); cursor: pointer; letter-spacing: .1em; }
.klab { font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .3em;
  font-size: .64rem; color: rgba(242,231,242,.4); padding: .3rem .2rem 0; }
.idline { font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(242,231,242,.45); padding: .1rem .2rem; }

.knav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(6, 1fr);
  max-width: 880px; margin: 0 auto;
  padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(6,3,9,.98), rgba(6,3,9,.9));
  border-top: 1px solid var(--panel-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.knav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; cursor: pointer;
  font-family: system-ui, sans-serif; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,231,242,.42); padding: .3rem 0; border-radius: 8px; }
.knav a .ic { font-size: 1.05rem; line-height: 1; filter: grayscale(.4); opacity: .7; }
.knav a.sel { color: #fff; }
.knav a.sel .ic { filter: none; opacity: 1; text-shadow: 0 0 14px rgba(var(--accent-rgb),.7); }

/* lock hero */
.hero-card { align-items: stretch; }
.hero { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.ringwrap { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
.lock-ring { position: absolute; inset: 0; --rc: var(--accent); border-radius: 50%;
  background: radial-gradient(closest-side, var(--ink) 70%, transparent 71% 100%),
    conic-gradient(from -90deg, var(--rc) calc(var(--p,0) * 360deg), rgba(255,255,255,.07) 0);
  box-shadow: 0 0 36px rgba(var(--accent-rgb),.18); transition: box-shadow .4s; }
.lock-ring.locked { --rc: var(--accent); box-shadow: 0 0 44px rgba(var(--accent-rgb),.32); }
.lock-ring.up { --rc: #ff5a6a; box-shadow: 0 0 44px rgba(255,90,106,.4); }
.lock-ring.open { --rc: rgba(255,255,255,.2); box-shadow: 0 0 22px rgba(255,255,255,.06); }
.ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15rem; text-align: center; }
.ringc b { font-size: 2.1rem; color: #fff; font-weight: 400; line-height: 1; }
.ringc span { font-family: system-ui, sans-serif; font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(242,231,242,.5); }
.herometa { flex: 1; min-width: 11rem; display: flex; flex-direction: column; gap: .3rem; }
.herometa .lock-word { font-family: system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase;
  font-size: 1rem; color: rgba(242,231,242,.6); }
.herometa .lock-word.on { color: var(--accent); text-shadow: 0 0 18px rgba(var(--accent-rgb),.6); }
.herometa .lock-line { font-size: .95rem; }
.herometa .remaining { color: #fff; }
.herometa .lock-note { font-size: .82rem; }
.status-release { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 0 0 auto; }
.btn-release { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.55);
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb),.5), rgba(var(--accent2-rgb),.3));
  display: grid; place-items: center; cursor: pointer; }
.btn-release svg { width: 26px; height: 26px; }
.release-cap { font-family: system-ui, sans-serif; font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(242,231,242,.5); }

/* needs you */
.needs { display: flex; flex-wrap: wrap; gap: .5rem; }
.need { font-family: system-ui, sans-serif; font-size: .74rem; color: #ffd9e6; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.1);
  border-radius: 999px; padding: .45rem .9rem; text-align: left; }
.need:hover { border-color: var(--accent); color: #fff; }

/* segmented control (play tabs) */
.seg { display: inline-flex; border: 1px solid var(--panel-border); border-radius: 999px; padding: .2rem;
  gap: .2rem; align-self: flex-start; background: var(--panel); }
.seg > div { font-family: system-ui, sans-serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242,231,242,.5); padding: .4rem .95rem; border-radius: 999px; cursor: pointer; }
.seg > div.on { color: #fff; background: rgba(var(--accent-rgb),.18); }

.danger { color: #ff9db0 !important; border-color: rgba(255,90,106,.4) !important; }

/* ---- drum wheels (infinite side-on reel; multiple sit side by side) ---- */
.wheelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .7rem; }
.reelcol { display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: .7rem .55rem; }
.reelname { font-family: system-ui, sans-serif; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #d9b6ff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rstage { position: relative; height: 138px; width: 100%; perspective: 340px; overflow: hidden; border-radius: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.05) 50%, rgba(0,0,0,.55)),
    linear-gradient(180deg, #1b1222, #0a0610);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 16px 22px rgba(0,0,0,.8), inset 0 -16px 22px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.5); }
.rstage.empty { display: grid; place-items: center; }
.rstage::before, .rstage::after { content: ""; position: absolute; left: 14%; right: 14%; height: 12px; z-index: 4;
  pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.22), transparent 72%); }
.rstage::before { top: 3px; } .rstage::after { bottom: 3px; }
.reelinner { position: absolute; inset: 0; transform-style: preserve-3d; }
.rbarrel { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(rgba(6,3,9,.96), rgba(6,3,9,0) 32%, rgba(6,3,9,0) 68%, rgba(6,3,9,.96)); }
.rface { position: absolute; left: 9%; right: 9%; height: 28px; top: 50%; margin-top: -14px;
  display: flex; align-items: center; justify-content: center; backface-visibility: hidden;
  font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 600; color: var(--text); padding: 0 .4rem;
  text-align: center; line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rface.cur { color: #fff; font-weight: 700; text-shadow: 0 0 10px rgba(var(--accent-rgb),.6); }
.rwin { position: absolute; left: 5%; right: 5%; top: 50%; height: 34px; margin-top: -17px; z-index: 6; pointer-events: none;
  border-radius: 9px; border: 1.5px solid rgba(var(--accent-rgb),.85); background: rgba(var(--accent-rgb),.08);
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.3), inset 0 0 14px rgba(var(--accent-rgb),.08); }
.rptr { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); z-index: 7; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid var(--accent); }
.reelres { font-family: system-ui, sans-serif; font-size: .64rem; color: var(--text); min-height: .95rem;
  text-align: center; max-width: 100%; line-height: 1.2; }
.reelres b { color: #fff; }
.reelspin { font-family: system-ui, sans-serif; font-size: .64rem; letter-spacing: .06em; padding: .4rem 1.4rem;
  border: 1px solid rgba(var(--accent-rgb),.55); border-radius: 999px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.2), rgba(var(--accent2-rgb),.12)); }
.wmanage { width: 100%; }
.wmanage summary { font-family: system-ui, sans-serif; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,231,242,.5); cursor: pointer; list-style: none; text-align: center; padding: .25rem 0; }
.wmanage summary::-webkit-details-marker { display: none; }
.wmanage .wslices { margin: .4rem 0; }
.wmanage .wslice-form { display: flex; flex-direction: column; gap: .4rem; }
.wout { font-size: .62rem; color: #ffb3cd; border: 1px solid rgba(var(--accent-rgb),.5); border-radius: 999px; padding: .05rem .4rem; }

@media (max-width: 560px) {
  .ringwrap { width: 140px; height: 140px; }
  .ringc b { font-size: 1.8rem; }
}

/* ---- while-you-wait / unpaired solo mode ---- */
.knav { display: flex; }
.knav a { flex: 1; }
body.unpaired [data-couple] { display: none !important; }
body:not(.unpaired) [data-solo] { display: none !important; }
.pair-wait { margin-top: .7rem; border-top: 1px solid var(--panel-border); padding-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
#pair-banner .invite-link { word-break: break-all; font-family: system-ui, sans-serif; font-size: .82rem; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 6px; padding: .5rem .6rem; color: #ffd9e6; }
.btnrow.col { flex-direction: column; align-items: stretch; }

/* ---- delegated-permission toggles ---- */
.perm-row { margin: .3rem 0 .1rem; }
.perm-row .checkrow, .wmanage .checkrow { font-size: .78rem; color: rgba(242,231,242,.72); }
.wmanage .checkrow { margin-bottom: .5rem; }
.checkrow.small { font-size: .78rem; }