/* Panelario — shared design tokens, reset, links, footer */
:root {
  --bg-primary:#1a1916;--bg-secondary:#282723;--bg-tertiary:#363430;
  --bg-button:#44423d;--bg-well:#201f1c;--border:#484540;--border-hover:#5a5751;
  --text-primary:#e8e4dd;--text-secondary:#a19e97;--text-muted:#5a5650;
  --accent:#d4d0c8;--accent-hover:#f0ece4;--accent-dim:rgba(212,208,200,0.1);
  --accent-active:#c9a55a;--radius:10px;--radius-sm:6px;
  --green:#5a9a5a;--red:#b85c5c;--red-hover:#9e4a4a;--info:#5aa9d4;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:var(--accent-active);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:none}

/* Body base */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 20px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;font-family:inherit}
.btn-gold,.btn-primary{background:var(--accent-active);color:var(--bg-primary);border-color:var(--accent-active)}
.btn-gold:hover,.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg-primary)}
/* Secondary button — canonical (panelario-theme.css): borderless solid fill, secondary text, hover lifts to tertiary+primary */
.btn-outline,.btn-secondary{background:var(--bg-button);border-color:transparent;color:var(--text-secondary)}
.btn-outline:hover,.btn-secondary:hover{background:var(--bg-tertiary);border-color:transparent;color:var(--text-primary)}
.btn-block{display:block;width:100%;text-align:center;padding:12px;margin-top:20px}
/* Solid red — destructive action (delete file/object) */
.btn-del{background:var(--red);border-color:var(--red);color:var(--bg-primary)}
.btn-del:hover{background:var(--red-hover);border-color:var(--red-hover);color:var(--text-primary)}

/* Status messages */
.msg{padding:10px;border-radius:var(--radius-sm);font-size:11px;margin-top:12px;display:none}
.msg.ok{display:block;background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);color:var(--green)}
.msg.err{display:block;background:color-mix(in srgb,var(--red) 12%,transparent);border:1px solid color-mix(in srgb,var(--red) 30%,transparent);color:var(--red)}

/* Custom select (csel.js) */
.csel{position:relative}
.csel-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--bg-well);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text-secondary);font-size:12px;font-family:inherit;cursor:pointer;transition:border-color .15s;outline:none;text-align:left;height:36px;box-sizing:border-box}
.csel-btn:hover{border-color:var(--border-hover)}
.csel-btn.open{border-color:var(--border-hover)}
.csel-btn::after{content:'\25BE';margin-left:8px;font-size:9px;color:var(--text-muted)}
.csel-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:2px;padding:3px;box-shadow:0 6px 20px rgba(0,0,0,0.4);max-height:200px;overflow-y:auto;color-scheme:dark;scrollbar-color:rgba(255,255,255,0.15) transparent}
.csel-list.open{display:block}
.csel-opt{padding:5px 10px;font-size:10px;font-weight:500;border-radius:var(--radius-sm);color:var(--text-secondary);background:transparent;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.csel-opt:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.csel-opt.active{background:var(--accent-dim);color:var(--accent-active)}

/* Footer */
footer{
  border-top:1px solid var(--border);padding:24px 32px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.footer-left{font-size:10px;color:var(--text-muted)}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:10px;color:var(--text-muted);transition:color .15s}
.footer-links a:hover{color:var(--text-secondary)}
@media(max-width:640px){
  footer{padding:20px 16px;flex-direction:column;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:10px 14px}
}