:root{
  --bg:#0b0d10;
  --panel:#13171c;
  --panel2:#1a2027;
  --text:#f5f0e8;
  --muted:#9ca6b2;
  --gold:#c8a84b;
  --danger:#d94f4f;
  --line:#29313a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom,0)}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
.hidden{display:none!important}

.remote-gate{min-height:100dvh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 18%,rgba(200,168,75,.16),transparent 38%),var(--bg)}
.remote-gate-card{width:min(430px,100%);padding:30px;background:linear-gradient(180deg,#171c22,#101419);border:1px solid var(--line);border-radius:24px}
.remote-logo{width:72px;height:72px;border-radius:18px;display:block}
.remote-logo.small{width:44px;height:44px;border-radius:12px}
.remote-gate-card h1{margin:15px 0 7px}
.remote-gate-card p{margin:0 0 20px;color:var(--muted)}
label{display:block;font-size:14px;font-weight:800}
input[type=password],input[type=search]{width:100%;border:1px solid #35404b;background:#0d1116;color:var(--text);border-radius:12px;padding:12px;outline:none}
input[type=password]{margin-top:7px}
input:focus{border-color:var(--gold)}
.primary,.danger,.panic,.icon-link,.link-button{border:0;border-radius:12px;font-weight:900;text-decoration:none}
.primary{display:block;width:100%;margin-top:14px;padding:12px;background:var(--gold);color:#090909;text-align:center}
.danger{padding:12px 15px;background:var(--danger);color:#fff}
.panic{padding:12px 14px;background:#4b361e;color:#ffe2a0;border:1px solid #9a7135}
.form-error{min-height:20px;color:#ff8585;margin-top:10px}

.remote-topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:rgba(11,13,16,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.remote-brand{display:flex;align-items:center;gap:10px;min-width:0}
.remote-brand strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-status{display:block;font-size:11px;font-weight:900;margin-top:2px;color:#ff9a9a}
.pc-status.online{color:#7fdb9c}
.pc-status.checking{color:var(--muted)}
.icon-link{display:grid;place-items:center;min-width:44px;height:44px;background:#171c22;color:#fff;border:1px solid var(--line);font-size:20px}

.remote-tools{position:sticky;top:65px;z-index:28;display:grid;grid-template-columns:1fr auto auto;gap:9px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:rgba(16,20,25,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.remote-search{display:flex;align-items:center;gap:8px;border:1px solid #35404b;background:#0d1116;border-radius:12px;padding:0 10px}
.remote-search span{color:var(--muted)}
.remote-search input{border:0;padding:11px 0;background:transparent}

.remote-tabs{position:sticky;top:125px;z-index:27;display:flex;gap:8px;overflow-x:auto;padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));background:rgba(11,13,16,.97);border-bottom:1px solid var(--line);scrollbar-width:none}
.remote-tabs::-webkit-scrollbar{display:none}
.remote-tab{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:9px 14px;background:#161c22;color:#b7c0ca;font-weight:900}
.remote-tab.active{background:var(--gold);border-color:var(--gold);color:#090909}

.remote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left))}
.remote-sound{position:relative;min-height:120px;border:1px solid rgba(255,255,255,.09);border-radius:17px;overflow:hidden;background:var(--button-color,#c8a84b);color:var(--button-text,#090909);font-weight:950;box-shadow:0 9px 22px rgba(0,0,0,.22)}
.remote-sound:active{transform:scale(.97);filter:brightness(1.08)}
.remote-sound.has-image{background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.5)),var(--button-image) center/cover no-repeat;color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.85)}
.remote-sound-inner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;height:100%;padding:14px;text-align:center}
.remote-icon{font-size:30px;line-height:1}
.remote-name{font-size:16px;line-height:1.05}
.remote-favorite{position:absolute;top:7px;right:7px;font-size:14px}
.remote-sound.sent{outline:3px solid #fff;outline-offset:2px}

.remote-footer{display:flex;justify-content:space-between;padding:8px 14px 22px;color:var(--muted);font-size:12px}
.remote-empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:var(--muted);border:1px dashed #35404b;border-radius:17px}

@media(min-width:700px){
  .remote-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px}
  .remote-sound{min-height:135px}
}
@media(min-width:1100px){
  .remote-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1400px;margin:auto}
}
@media(max-width:380px){
  .remote-tools{grid-template-columns:1fr}
  .remote-tools .danger{width:100%}
  .remote-tabs{top:177px}
}
@media(hover:none){
  .remote-sound:hover{filter:none}
}


/* v0.1.7 — retrigger + hold-to-loop */
.remote-sound{
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}
.remote-sound.holding{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(200,168,75,.28),0 12px 28px rgba(0,0,0,.36);
  transform:scale(.97);
}

@media(max-width:520px){
  .remote-tools{grid-template-columns:1fr 1fr}
  .remote-search{grid-column:1/-1}
  .remote-tools .panic,.remote-tools .danger{width:100%}
  .remote-tabs{top:177px}
}