/* PrintPlay Studio — Base: Variables, Reset, Typography, Buttons, Forms */

:root{
  --bg:#f5f3ef;--surface:#fff;--surface2:#f0ede8;--surface3:#e8e2d8;
  --border:#e0dbd2;--border-med:#c8bdb0;
  --accent:#e05a2b;--accent2:#c0392b;--accent-bg:rgba(224,90,43,.08);--accent-bg2:rgba(224,90,43,.15);
  --text:#1a1612;--text-muted:#7a6e62;--text-light:#b0a898;
  --radius:16px;--radius-md:10px;--radius-sm:6px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);--shadow:0 4px 24px rgba(0,0,0,.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,.14);--shadow-xl:0 16px 64px rgba(0,0,0,.18);
  --header-h:52px;--sidebar-w:64px;--right-w:288px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-med);border-radius:10px}
.hidden{display:none!important}

/* ── Typography ── */
.logo{font-family:'Bangers',cursive;font-size:1.6rem;letter-spacing:3px;color:var(--accent);line-height:1}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;line-height:1;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(224,90,43,.35)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1.5px solid var(--border-med)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.btn-sm{padding:.3rem .7rem;font-size:.75rem}

/* ── Forms ── */
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted)}
.form-input,.form-select,.form-textarea{width:100%;padding:.55rem .8rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:600;transition:border-color .15s;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b0a898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.form-textarea{resize:vertical;min-height:80px;line-height:1.6}
.toggle-group{display:flex;gap:.35rem;flex-wrap:wrap}
.toggle-btn{padding:.35rem .75rem;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer;font-size:.75rem;font-family:'Nunito',sans-serif;font-weight:700;transition:all .15s}
.toggle-btn:hover{border-color:var(--border-med);color:var(--text)}
.toggle-btn.active{border-color:var(--accent);background:var(--accent-bg2);color:var(--accent)}
.badge-beta{background:var(--accent);color:#fff;font-size:.6rem;padding:.18rem .5rem;border-radius:100px;font-weight:800;letter-spacing:1px;text-transform:uppercase}