:root {
  --bg:#110814;
  --card:#25182f;
  --ink:#3ee0d0;
  --pink:#e85cad;
  --warn:#f5c36a;
  --text:#f7eef8;
  --muted:#b89ab8;
  --line:rgba(232,92,173,.2);
  --field:#160d1c;
  --ok:#042018;
}
* { box-sizing:border-box; }
html, body {
  margin:0; min-height:100%; color:var(--text); font:16px/1.35 "Segoe UI",system-ui,sans-serif;
  max-width:100%; overflow-x:hidden;
  background:
    radial-gradient(80vw 40vh at 0% 0%, rgba(232,92,173,.2), transparent 55%),
    radial-gradient(70vw 36vh at 100% 0%, rgba(62,224,208,.12), transparent 50%),
    var(--bg);
}
a { color:var(--ink); text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
img { max-width:100%; height:auto; display:block; }
.muted { color:var(--muted); }
.wrap, .lede, h1, h2, .ticket p, .ticket small { overflow-wrap:anywhere; }

.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; letter-spacing:.05em; }
.brand img, .hero-logo, .mini-logo { width:48px; height:48px; object-fit:contain; border-radius:12px; background:#fff; }
.mini-logo { width:40px; height:40px; }
.hero-logo { width:112px; height:112px; margin:0 auto 10px; }
.top {
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center;
  padding:8px 12px; background:rgba(17,8,20,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.topnav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.topnav a { padding:8px 11px; border-radius:11px; color:var(--text); }
.topnav a.on { background:rgba(62,224,208,.16); color:var(--ink); }
.topnav i { display:inline-grid; place-items:center; min-width:16px; height:16px; border-radius:99px; background:var(--pink); color:#fff; font-size:10px; font-style:normal; }
.who { color:var(--muted); font-size:13px; padding:0 6px; }
main { width:100%; margin:0; padding:12px 12px calc(78px + env(safe-area-inset-bottom)); }
.tabbar {
  position:fixed; inset:auto 0 0; display:none; gap:4px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:#1a1022; border-top:1px solid var(--line); z-index:6;
}
.tabbar a { flex:1; text-align:center; padding:10px 4px; border-radius:10px; color:var(--text); font-size:13px; font-weight:700; }
.tabbar a.on { background:rgba(62,224,208,.16); color:var(--ink); }

.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.stats div, .panel, .ticket, .item, .tray, .kiosk-pane, .login-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
}
.stats div { padding:10px 12px; min-width:0; }
.stats span { color:var(--muted); font-size:11px; display:block; }
.stats strong { display:block; font-size:clamp(18px, 2.6vw, 26px); margin-top:2px; }

.field, input:not([type=checkbox]):not([type=hidden]):not(.pin-value), select, textarea {
  width:100%; min-height:46px; padding:10px 12px; border-radius:12px;
  border:1px solid #4d355c; background:var(--field); color:var(--text);
}
select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23e85cad' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
textarea { min-height:84px; resize:vertical; }
label { display:grid; gap:6px; color:var(--muted); font-size:12px; text-align:left; }

.btn, .btn-go, .btn-ghost, .act, .ghost, .topnav a.out {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:10px 16px; border:0; border-radius:14px;
  background:linear-gradient(90deg,#3ee0d0,#8af3e2); color:var(--ok); font-weight:800; text-align:center; cursor:pointer;
}
.btn-ghost, .act.ghost, .ghost, .topnav a.out {
  background:#160d1c; color:var(--text); border:1px solid #4d355c;
}
.btn-pink { background:linear-gradient(90deg,#e85cad,#ff8ad0); color:#2a0818; }
.actbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
.actbar form { margin:0; display:grid; }
.act { flex-direction:column; min-height:72px; width:100%; }
.act small { font-weight:600; opacity:.75; font-size:12px; }
.act.ghost { background:#160d1c; color:var(--text); }

.box { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text); }
.box input { position:absolute; opacity:0; width:1px; height:1px; }
.box i {
  width:22px; height:22px; border-radius:7px; border:2px solid #6a4a78; background:var(--field); position:relative; flex:0 0 auto;
}
.box input:checked + i { background:var(--ink); border-color:var(--ink); }
.box input:checked + i::after {
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #042018; border-width:0 2px 2px 0; transform:rotate(45deg);
}

.segs { display:flex; flex-wrap:wrap; gap:6px; }
.segs button {
  flex:1 1 auto; min-height:40px; padding:8px 10px; border-radius:11px;
  border:1px solid #4d355c; background:var(--field); color:var(--text); font-weight:700;
}
.segs button.on { background:rgba(62,224,208,.18); border-color:var(--ink); color:var(--ink); }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.filters input, .filters select { flex:1 1 200px; }
.filters .btn, .filters .btn-ghost { width:auto; min-width:88px; flex:0 0 auto; }
.stack { display:grid; gap:10px; }
.grow { flex:1 1 220px; display:flex; gap:8px; min-width:0; }
.grow input { flex:1; }
.grow-text { flex:1; min-width:0; }
.back { color:var(--ink); font-weight:800; }
.inline-sync { margin:0 0 10px; }
.actions form { margin:0; }
.login-card { display:grid; gap:10px; }
.pagehead h1, .pagehead .chip, .pagehead .easy, .pagehead .back { align-self:center; }
input[type=file] { padding:8px; }
.tickets { display:grid; gap:6px; }
.ticket { display:grid; grid-template-columns:70px minmax(0,1fr); gap:8px; padding:10px 12px; color:inherit; align-items:center; }
.ticket-num { font-size:22px; font-weight:800; color:var(--ink); }
.ticket-line { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ticket p { margin:3px 0 0; font-size:14px; }
.ticket small { color:var(--muted); }
.ticket.is-easy { box-shadow:inset 3px 0 0 var(--ink); }
.ticket.is-on { outline:2px solid var(--pink); }
.chip { display:inline-flex; padding:2px 8px; border-radius:999px; background:#160d1c; font-size:11px; }
.easy { display:inline-flex; padding:2px 8px; border-radius:999px; background:rgba(62,224,208,.16); color:var(--ink); font-size:11px; font-style:normal; }
.st-wait .chip, .chip.st-wait { background:rgba(245,195,106,.16); color:var(--warn); }
.st-hold .chip, .chip.st-hold { background:rgba(232,92,173,.16); color:var(--pink); }
.st-ok .chip, .chip.st-ok { background:rgba(62,224,208,.16); color:var(--ink); }
.st-done .chip, .chip.st-done { background:rgba(140,255,180,.14); color:#9dffc2; }
.job .btn-ghost { min-height:40px; width:auto; align-self:start; }
.actions, .pagehead, .kiosk-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pagehead { margin-bottom:6px; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.panel { padding:12px; }
.panel h3 { margin:0 0 10px; }
h1,h2 { font-size:clamp(20px, 3vw, 28px); margin:0; }
.lede { margin:6px 0; }
.list { display:grid; gap:6px; }
.item { display:grid; gap:3px; padding:12px; color:inherit; }
.item small { color:var(--muted); }
.check { display:flex; align-items:center; gap:8px; }

.login { min-height:100dvh; display:grid; place-items:center; padding:16px; }
.login-card { width:min(400px,100%); padding:20px; text-align:center; }
.login-card .btn { width:100%; }
.err,.ok { padding:10px 12px; border-radius:12px; margin:0 0 10px; }
.err { background:rgba(255,123,138,.14); }
.ok { background:rgba(62,224,208,.12); }
.pin-dots { display:flex; justify-content:center; gap:12px; margin:14px 0; }
.pin-dots i { width:14px; height:14px; border-radius:50%; border:2px solid rgba(62,224,208,.4); }
.pin-dots i.is-on { background:var(--ink); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pin-pad button { min-height:52px; border:0; border-radius:14px; background:var(--field); color:var(--text); font-weight:800; }
.pin-pad button[type=submit] { background:linear-gradient(90deg,#3ee0d0,#8af3e2); color:var(--ok); }
.pin-value { position:absolute; opacity:0; width:1px; height:1px; }
.alt { text-align:center; }

.print-page .top { display:none; }
.print-page main { padding:0; }
.print-studio { display:grid; grid-template-rows:auto 1fr; min-height:100dvh; }
.print-top { display:flex; gap:10px; align-items:center; padding:10px 12px; background:#1a1022; border-bottom:1px solid var(--line); }
.close {
  width:46px; height:46px; border:1px solid #4d355c; border-radius:14px; background:var(--field);
  color:var(--text); font-size:28px; display:grid; place-items:center; flex:0 0 auto;
}
.print-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0; }
.files { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; padding:10px; overflow:auto; align-content:start; }
.file-cell { display:grid; gap:6px; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); min-width:0; }
.file-cell .thumb { width:100%; aspect-ratio:1; padding:0; overflow:hidden; border-radius:10px; background:var(--field); border:0; }
.file-cell img { width:100%; height:100%; object-fit:cover; }
.file-cell b { font-size:12px; overflow-wrap:anywhere; }
.pick { justify-content:space-between; }
.printed { color:var(--warn); font-size:11px; }
.color-dot { width:auto; min-height:32px; padding:4px 10px; border-radius:999px; border:1px solid #4d355c; background:var(--field); color:var(--text); font-weight:700; }
.tray { border-radius:0; border-width:0 0 0 1px; padding:12px; display:grid; gap:10px; align-content:start; overflow:auto; }
.tray .btn-go { width:100%; min-height:56px; font-size:18px; }
.preview { position:fixed; inset:0; background:#0c0710; display:grid; grid-template-rows:52px 1fr; z-index:20; }
.preview iframe { width:100%; height:100%; border:0; background:#111; }
.preview[hidden] { display:none; }
.bubbles { display:grid; gap:8px; max-height:52dvh; overflow:auto; }
.bubble { padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.bubble.admin { background:#16352f; }
.bubble.client { background:#2a1833; }
.composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }

body.kiosk-home { height:100dvh; overflow:hidden; }
.kiosk-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 10px; height:72px; background:#1a1022; border-bottom:1px solid var(--line); }
.kiosk-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; min-width:0; }
.kiosk-stats div { padding:6px 8px; border-radius:12px; }
.kiosk-stats span { font-size:10px; color:var(--muted); }
.kiosk-stats strong { font-size:18px; }
.kiosk-bar { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:8px; padding:8px 10px 0; }
.kiosk-shell { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr); gap:8px; height:calc(100dvh - 124px); padding:8px 10px 10px; min-height:0; }
.kiosk-list { overflow:auto; display:grid; gap:6px; align-content:start; }
.kiosk-pane { overflow:auto; padding:12px; min-width:0; }
.kiosk-empty { min-height:100%; display:grid; place-items:center; text-align:center; gap:8px; color:var(--muted); padding:16px; }
.kiosk-empty img { width:140px; height:140px; border-radius:24px; background:#fff; margin:0 auto; }
.kiosk-tools .btn-ghost { min-height:40px; width:auto; }

@media (max-width:980px) {
  .stats, .split, .print-grid, .kiosk-shell, .kiosk-top, .kiosk-bar, .actbar { grid-template-columns:1fr 1fr; }
  .print-grid { grid-template-columns:1fr; }
  .tray { border-width:1px 0 0; }
  .kiosk-top { height:auto; }
  .kiosk-shell { height:calc(100dvh - 200px); grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .topnav { display:none; }
  .tabbar { display:flex; }
  .filters { grid-template-columns:1fr; }
  .composer { position:sticky; bottom:calc(62px + env(safe-area-inset-bottom)); }
}
@media (max-width:560px) {
  .stats, .actbar, .kiosk-stats { grid-template-columns:1fr 1fr; }
  .ticket { grid-template-columns:56px minmax(0,1fr); }
}