#panel-toggle{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom, 0px));z-index:420;width:56px;height:56px;border-radius:50%;border:1px solid rgba(var(--accent),.55);background:rgba(var(--nav),.94);color:var(--gold);font-size:1.35rem;line-height:1;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.28);display:none;align-items:center;justify-content:center;transition:transform .2s,opacity .3s}
#panel-toggle.is-ready{display:flex}
#panel-toggle:hover{transform:scale(1.06)}

#sound-toggle{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom, 0px));z-index:420;width:56px;height:56px;border-radius:50%;border:1px solid rgba(var(--accent),.55);background:rgba(var(--nav),.94);color:var(--gold);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.28);display:none;align-items:center;justify-content:center;transition:transform .2s,opacity .3s}
#sound-toggle.is-ready{display:flex}
#sound-toggle:hover{transform:scale(1.06)}
#sound-toggle .sound-off{display:none}
#sound-toggle.is-muted .sound-on{display:none}
#sound-toggle.is-muted .sound-off{display:inline}

#panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;z-index:430;overscroll-behavior:contain;width:min(340px,90vw);background:rgba(var(--nav),.98);backdrop-filter:blur(20px);border-left:1px solid rgba(var(--accent),.3);transform:translateX(102%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:"Jost",sans-serif;font-weight:300}
#panel.is-open{transform:none}

.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(var(--accent),.22);flex-shrink:0}
.panel-title{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.3rem;color:#fff}
.panel-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:1.5rem;line-height:1;cursor:pointer;padding:2px 6px}
.panel-close:hover{color:#fff}
.panel-body{overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:26px;-webkit-overflow-scrolling:touch}

.panel-group-title{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.panel-hint{font-size:.72rem;line-height:1.6;color:rgba(255,255,255,.45);margin-top:9px}

.theme-row{display:flex;gap:14px}
.theme-dot{width:46px;height:46px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s}
.theme-dot:hover{transform:scale(1.07)}
.theme-dot.is-on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--accent),.22)}
.theme-dot[data-theme="green"]{background:linear-gradient(135deg,#7E9E7E,#2E4A38)}
.theme-dot[data-theme="blue"]{background:linear-gradient(135deg,#83AEC0,#1E3A57)}
.theme-dot[data-theme="red"]{background:linear-gradient(135deg,#D58A6D,#8E1F1E)}

.anim-row{display:flex;flex-direction:column;gap:7px}
.anim-btn{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(var(--accent),.25);background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font-family:"Jost",sans-serif;font-weight:300;font-size:.85rem;text-align:left;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.anim-btn:hover{background:rgba(var(--accent),.14);color:#fff}
.anim-btn.is-on{border-color:var(--gold);color:var(--gold);background:rgba(var(--accent),.16)}

.panel-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.panel-field label{font-size:.74rem;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.panel-field input,.panel-field textarea{width:100%;padding:10px 13px;background:rgba(255,255,255,.94);border:1px solid rgba(var(--accent),.3);border-radius:8px;font-family:"Jost",sans-serif;font-weight:300;font-size:.9rem;color:var(--dark);outline:none}
.panel-field textarea{resize:vertical;min-height:74px;line-height:1.6}
.panel-field input:focus,.panel-field textarea:focus{border-color:var(--gold)}

.panel-check{display:flex;align-items:center;gap:9px;margin-bottom:10px;cursor:pointer;font-size:.85rem;color:rgba(255,255,255,.82)}
.panel-check input{width:17px;height:17px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}

.block-list{display:flex;flex-direction:column;gap:6px}
.block-row{display:flex;align-items:center;gap:8px;padding:10px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(var(--accent),.18);border-radius:9px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .15s,transform .15s}
.block-row.is-off{opacity:.45}
.block-row.is-armed{border-color:var(--gold);transform:scale(.98)}
.block-row.is-drag{position:fixed;background:rgba(var(--nav),.99);z-index:600;margin:0;transform:scale(1.04);border-color:var(--gold);box-shadow:0 12px 34px rgba(0,0,0,.5);pointer-events:none;opacity:.97;transition:none}
.block-placeholder{border:1px dashed rgba(var(--accent),.5);border-radius:9px;background:rgba(var(--accent),.08)}
body.is-dragging{cursor:grabbing}
.block-check{width:17px;height:17px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}
.block-name{flex:1;font-size:.85rem;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.block-grip{width:30px;height:30px;flex-shrink:0;border:none;background:none;color:rgba(255,255,255,.42);font-size:1rem;line-height:1;padding:0;cursor:grab;touch-action:none;border-radius:6px}
.block-grip:hover{color:var(--gold);background:rgba(var(--accent),.14)}
.block-grip:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

.sw-grid{display:flex;gap:9px;flex-wrap:wrap}
.sw-grid.is-off{opacity:.35;pointer-events:none}
.sw-cell{display:flex;flex-direction:column;align-items:center;gap:4px;width:44px}
.sw-pick{width:38px;height:38px;padding:0;border:1px solid rgba(var(--accent),.4);border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.sw-pick::-webkit-color-swatch-wrapper{padding:0}
.sw-pick::-webkit-color-swatch{border:none;border-radius:50%}
.sw-pick::-moz-color-swatch{border:none;border-radius:50%}
.sw-cell span{font-size:.53rem;line-height:1.3;text-align:center;color:rgba(255,255,255,.45)}

.panel-actions{display:flex;flex-direction:column;gap:9px;padding:16px 20px calc(16px + env(safe-area-inset-bottom, 0px));border-top:1px solid rgba(var(--accent),.22);flex-shrink:0}
.panel-btn{width:100%;padding:11px;border-radius:22px;font-family:"Jost",sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(var(--accent),.45);background:none;color:rgba(255,255,255,.8);transition:background .2s,color .2s}
.panel-btn:hover{background:rgba(var(--accent),.18);color:#fff}
.panel-btn.is-primary{background:var(--gold);border-color:var(--gold);color:#fff}
.panel-btn.is-primary:hover{filter:brightness(.92);background:var(--gold);color:#fff}

@media(max-width:540px){
  #panel-toggle{right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));width:50px;height:50px}
  #sound-toggle{right:14px;bottom:calc(74px + env(safe-area-inset-bottom, 0px));width:50px;height:50px}
  .panel-body{gap:20px;padding:16px}
}

body.panel-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (pointer: coarse){
  .panel-field input,.panel-field textarea{font-size:16px}
}