/* ================= THE ROYAL SERENADE theme layer ================= */
:root {
  --bg: #0e050b;
  --velvet: #6e0f22;
  --velvet2: #3a0612;
}
body {
  background: radial-gradient(1100px 760px at 50% -10%, #3b0f2a 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 110%, #1d1240 0%, transparent 55%), var(--bg);
  background-attachment: fixed;
}
.ta { font-family: 'Noto Serif Tamil', serif; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- mute button (always on top) ---------- */
.mute-btn { position: fixed; z-index: 400; top: calc(12px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232,192,96,.45); background: rgba(20,8,16,.75);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: transform .25s var(--ease), box-shadow .3s; }
.mute-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(232,192,96,.15), 0 6px 20px rgba(0,0,0,.45); }
.mute-btn svg { width: 22px; height: 22px; fill: var(--gold2); stroke: var(--gold2); grid-area: 1/1; transition: opacity .3s, transform .3s; }
.mute-btn .snd-off { opacity: 0; transform: scale(.6); }
.mute-btn.muted .snd-on { opacity: 0; transform: scale(.6); }
.mute-btn.muted .snd-off { opacity: 1; transform: none; }
.mute-btn .eq { position: absolute; bottom: -2px; right: -2px; display: flex; gap: 1.5px; align-items: flex-end; height: 12px; background: #1a0a12; padding: 2px 3px; border-radius: 6px; border: 1px solid rgba(232,192,96,.4); }
.mute-btn .eq i { width: 2px; background: var(--gold); border-radius: 1px; animation: eq 1s ease-in-out infinite; }
.mute-btn .eq i:nth-child(2) { animation-delay: .2s; } .mute-btn .eq i:nth-child(3) { animation-delay: .4s; }
.mute-btn.muted .eq i { animation: none; height: 2px; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 9px; } }
#app .topbar { padding-right: calc(70px + env(safe-area-inset-right)); }

/* ---------- THE STAGE (login) ---------- */
#vault.stage { display: block; position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; padding: 0; perspective: none;
  background: radial-gradient(ellipse at 50% 100%, #2a0c16 0%, #0e050b 60%); }
.stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, transparent, rgba(120,70,20,.18) 40%, #1a0a06), repeating-linear-gradient(90deg, rgba(255,220,150,.04) 0 2px, transparent 2px 70px); pointer-events: none; }
.spot { position: absolute; left: 50%; top: -10%; width: 900px; height: 130%; transform: translateX(-50%);
  background: radial-gradient(ellipse 35% 60% at 50% 55%, rgba(255,236,190,.20), transparent 70%); pointer-events: none; animation: spotBreath 6s ease-in-out infinite; }
@keyframes spotBreath { 50% { opacity: .75; } }
.curtain { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3; transition: transform 1.9s cubic-bezier(.7,0,.2,1);
  background: repeating-linear-gradient(90deg, var(--velvet2) 0, var(--velvet) 22px, #8c1a30 34px, var(--velvet) 46px, var(--velvet2) 66px);
  box-shadow: inset 0 -80px 120px rgba(0,0,0,.6); }
.curtain i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.5)); }
.curtain::after { content: ''; position: absolute; bottom: 30%; width: 26px; height: 60px; border-radius: 8px; background: linear-gradient(#f7dc8f, #b8862b); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.curtain.left { left: 0; transform-origin: left; border-right: 3px solid rgba(232,192,96,.5); animation: swayL 7s ease-in-out infinite; }
.curtain.left::after { right: -14px; }
.curtain.right { right: 0; transform-origin: right; border-left: 3px solid rgba(232,192,96,.5); animation: swayR 7s ease-in-out infinite; }
.curtain.right::after { left: -14px; }
@keyframes swayL { 50% { transform: skewY(.4deg) scaleX(1.01); } }
@keyframes swayR { 50% { transform: skewY(-.4deg) scaleX(1.01); } }
.valance { position: absolute; top: 0; left: 0; right: 0; height: 70px; z-index: 4;
  background: radial-gradient(circle at 50% 0, var(--velvet) 0 40px, transparent 41px) 0 0/80px 70px repeat-x, linear-gradient(var(--velvet2), var(--velvet) 60%, transparent 61%);
  border-top: 4px solid #b8862b; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.valance::after { content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 6px; background: repeating-linear-gradient(90deg, #f7dc8f 0 6px, #b8862b 6px 12px); opacity: .8; }

.stage-inner { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px;
  padding: 90px max(24%, 40px) 60px; max-width: 1400px; margin: 0 auto; }
.harp-wrap { position: relative; display: grid; place-items: center; animation: rise 1.4s .2s var(--ease) both; }
.harp-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(232,192,96,.32), transparent 65%); filter: blur(14px); animation: pulse 4s ease-in-out infinite; }
#harp { position: relative; width: min(340px, 70vw); height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation: harpFloat 6s ease-in-out infinite; }
@keyframes harpFloat { 50% { transform: translateY(-8px) rotate(-1deg); } }
.harp-frame, .harp-head, .harp-pillar, .harp-base { fill: none; stroke: url(#gold); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.harp-head { stroke-width: 7; } .harp-pillar { stroke-width: 9; } .harp-base { stroke-width: 10; }
.harp-frame { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawIn 2.2s .3s var(--ease) forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.harp-gems circle { fill: #e0475f; stroke: #f7dc8f; stroke-width: 2; animation: gem 2.4s ease-in-out infinite; }
.harp-gems circle:nth-child(2) { fill: #2fbf8f; animation-delay: .8s; } .harp-gems circle:nth-child(3) { fill: #5a8dee; animation-delay: 1.6s; }
@keyframes gem { 50% { filter: brightness(1.8); } }
#strings line { stroke: #fff1c4; stroke-width: 1.4; opacity: .85; transform-box: fill-box; transform-origin: center; cursor: pointer; }
#strings line.hit { stroke: #fff; stroke-width: 2.2; animation: vib .6s ease-out; filter: drop-shadow(0 0 6px #f7dc8f); }
@keyframes vib { 0% { transform: scaleX(1); } 10% { transform: translateX(3px); } 20% { transform: translateX(-3px); } 30% { transform: translateX(2px); } 45% { transform: translateX(-1.5px); } 60% { transform: translateX(1px); } 100% { transform: none; } }
#strings line.err { stroke: #e0475f; }
.notes-burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.notes-burst span { position: absolute; left: 50%; top: 50%; color: var(--gold2); font-size: 22px; text-shadow: 0 0 10px rgba(247,220,143,.8); animation: noteFly 1.8s ease-out forwards; }
@keyframes noteFly { from { opacity: 1; transform: translate(0,0) scale(.6) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4) rotate(var(--r)); } }

.stage .vault-form { background: rgba(26,8,16,.72); border-color: rgba(232,192,96,.3); }
.vf-title { font-size: 34px; line-height: 1.1; }
.vf-ta { font-family: 'Noto Serif Tamil', serif; font-weight: 700; font-size: 26px; color: var(--gold); margin-top: 4px; }
.vf-sub { margin-top: 8px; }

/* opening sequence */
.stage.unlocking .harp-glow { animation: none; transform: scale(2.2); opacity: 1; transition: transform 1.2s, opacity 1.2s; }
.stage.opening .curtain.left { transform: translateX(-105%) scaleX(.6); animation: none; }
.stage.opening .curtain.right { transform: translateX(105%) scaleX(.6); animation: none; }
.stage.opening .stage-inner { animation: stageAway 1.4s .3s var(--ease) forwards; }
@keyframes stageAway { to { opacity: 0; transform: scale(1.12); filter: blur(6px); } }
.stage.opening .valance { transition: transform 1.6s .4s var(--ease); transform: translateY(-110%); }
.stage.shake .vault-form { animation: shake .5s; box-shadow: 0 0 0 1px rgba(224,71,95,.6), 0 0 40px rgba(224,71,95,.35); }

/* ---------- SPLASH ---------- */
#splash { background: radial-gradient(circle at 50% 40%, #3a1020 0%, #0e050b 70%); }
.rays { background: repeating-conic-gradient(rgba(247,220,143,.08) 0 5deg, transparent 5deg 15deg); }
.spot-cone { position: absolute; top: -20%; left: 50%; width: 70vmin; height: 120vh; transform: translateX(-50%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,240,200,.30), rgba(255,240,200,.04)); animation: fadeIn 1.2s both; pointer-events: none; }
.staff { width: min(520px, 80vw); margin: 0 auto 10px; display: grid; gap: 7px; opacity: .55; }
.staff i { height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); transform: scaleX(0); animation: grow 1s var(--ease) forwards; }
.staff i:nth-child(2){animation-delay:.1s}.staff i:nth-child(3){animation-delay:.2s}.staff i:nth-child(4){animation-delay:.3s}.staff i:nth-child(5){animation-delay:.4s}
.splash-title { font-size: clamp(30px, 6.4vw, 76px); }
.splash-ta { font-family: 'Noto Serif Tamil', serif; font-size: clamp(36px, 8vw, 88px); font-weight: 700; line-height: 1.5; color: transparent;
  -webkit-text-stroke: 1.2px var(--gold2); background: linear-gradient(90deg, #fff1c4, var(--gold) 50%, var(--gold3)); -webkit-background-clip: text; background-clip: text;
  background-size: 0% 100%; background-repeat: no-repeat; opacity: 0; animation: inkIn 1.8s 1.3s var(--ease) forwards; }
@keyframes inkIn { 0% { opacity: 0; transform: translateY(10px); } 25% { opacity: 1; } 100% { opacity: 1; background-size: 100% 100%; transform: none; } }
.splash-tag { animation-delay: 2.2s; letter-spacing: .5em; }
.splash-welcome { animation-delay: 2.7s; }
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.orbit .orb { position: absolute; width: 78px; height: 78px; margin: -39px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,240,200,.25), rgba(60,20,30,.85)); border: 1.5px solid rgba(232,192,96,.6);
  box-shadow: 0 0 24px rgba(232,192,96,.25); opacity: 0; animation: orbIn .9s var(--ease) forwards; }
.orbit .orb svg { width: 74%; height: 74%; }
.orbit .orb small { position: absolute; top: 100%; margin-top: 6px; font-size: 11px; color: var(--gold2); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }
@keyframes orbIn { from { opacity: 0; transform: translate(0,0) scale(.2); } to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } }
.orbit.spin { animation: orbitSpin 30s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ---------- instrument cards ---------- */
.palace .pname { font-size: 19px; }
.palace .sub-ta { font-size: 13px; color: var(--gold); margin: 2px 0 2px; }
.palace .sub-ta .ta { font-size: 15px; margin-left: 4px; }
@keyframes playIt { 30% { transform: scale(1.18) rotate(4deg); } 60% { transform: scale(.96) rotate(-2deg); } }
.palace .top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,240,200,.28) 50%, transparent 65%); transform: translateX(-100%); animation: sheen 6s ease-in-out infinite; pointer-events: none; }
.palace:nth-child(2n) .top::after { animation-delay: 1.5s; } .palace:nth-child(3n) .top::after { animation-delay: 3s; }
@keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.inst-av { padding: 12px; } .inst-av svg { width: 100%; height: 100%; }
.hero-sub { font-size: 18px; color: var(--gold); margin: -2px 0 10px; }
.hero-sub .ta { font-size: 22px; }
.house-sub { font-size: 12px; color: var(--muted); }
.house-sub .ta { color: var(--gold); }
.receipt .r-ta { font-family: 'Noto Serif Tamil', serif; font-size: 20px; color: #8a6420; margin-top: 2px; }

/* note particles in nav hover */
nav a .ico { transition: transform .4s var(--ease); }
nav a:hover .ico { transform: rotate(-12deg) scale(1.2); }

@media (max-width: 900px) {
  .stage-inner { grid-template-columns: 1fr; padding: 86px 22px calc(40px + env(safe-area-inset-bottom)); gap: 4px; justify-items: center; }
  .curtain { width: 9%; }
  .curtain::after { display: none; }
  #harp { width: min(210px, 52vw); }
  .harp-glow { width: 240px; height: 240px; }
  .valance { height: 54px; background-size: 60px 54px, auto; }
  .vf-title { font-size: 28px; } .vf-ta { font-size: 22px; }
  .orbit .orb { width: 54px; height: 54px; margin: -27px; } .orbit .orb small { display: none; }
  #app .topbar { padding-right: calc(66px + env(safe-area-inset-right)); }
}
@media (max-width: 900px) and (max-height: 700px) { #harp { width: 150px; } }

/* ---------- real instrument pictures ---------- */
.palace .top { height: 168px; }
.inst-stage { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.45), transparent 60%),
              radial-gradient(circle at 30% 20%, rgba(255,240,200,.18), transparent 45%),
              linear-gradient(135deg, var(--c1), var(--c2)); }
.inst-stage::before { content: ''; position: absolute; inset: 0; opacity: .14;
  background: repeating-conic-gradient(from 0deg at 50% 120%, #fff 0 4deg, transparent 4deg 12deg); }
.inst-halo { position: absolute; left: 50%; top: 54%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,226,150,.55), rgba(255,226,150,0) 62%); filter: blur(6px); animation: pulse 4.5s ease-in-out infinite; }
.inst-float { position: absolute; inset: 0; animation: bob 6s ease-in-out infinite; }
.palace:nth-child(2n) .inst-float { animation-delay: -2s; } .palace:nth-child(3n) .inst-float { animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.inst-img { position: absolute; left: 50%; top: 50%; max-width: 74%; max-height: 84%; transform: translate(-50%, -48%);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,220,140,.25));
  transition: transform 1.1s cubic-bezier(.22,.9,.28,1), filter 1.1s ease; will-change: transform; user-select: none; -webkit-user-drag: none; }
.palace .inst-img { animation: none; }
@keyframes instFloat { 50% { transform: translate(-50%, -54%) rotate(-1.5deg); } }
.palace:hover .inst-img { transform: translate(-50%, -50%) perspective(600px) rotateY(-14deg) rotate(-6deg) scale(1.16);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,220,140,.55)); }
.palace.playing .inst-halo { animation: haloPlay 1.6s ease-out; }
@keyframes haloPlay { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); filter: blur(4px) brightness(1.6); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes playImg { 0% { transform: translate(-50%, -48%) scale(1); } 35% { transform: translate(-50%, -56%) scale(1.18) rotate(5deg); } 70% { transform: translate(-50%, -47%) scale(.97) rotate(-2deg); } 100% { transform: translate(-50%, -48%); } }
.inst-sparkle { position: absolute; inset: 0; background:
  radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 80% 25%, #fff9, transparent),
  radial-gradient(2px 2px at 70% 75%, #fff7, transparent), radial-gradient(1.5px 1.5px at 30% 80%, #fff8, transparent);
  animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .3; } }
.palace .floor, .palace .badge { z-index: 2; }
.inst-av { position: relative; overflow: visible; padding: 0; background: radial-gradient(circle at 35% 30%, rgba(255,240,200,.25), transparent 55%), linear-gradient(135deg, var(--c1, #3a1020), var(--c2, #7c1d2e)); }
.inst-av .inst-img { max-width: 92%; max-height: 92%; animation: instFloat 6s ease-in-out infinite; }
.orbit .orb .inst-img { max-width: 92%; max-height: 92%; animation: none; transform: translate(-50%, -50%); }
.orbit .orb { overflow: visible; }
@media (max-width: 900px) { .palace .top { height: 150px; } }

/* ---------- background melody toggle ---------- */
.music-btn { right: calc(66px + env(safe-area-inset-right)); }
.music-btn svg { width: 20px; height: 20px; fill: var(--gold2); stroke: var(--gold2); grid-area: 1/1; }
.music-btn:not(.off) svg { animation: noteSway 3s ease-in-out infinite; }
@keyframes noteSway { 50% { transform: rotate(-8deg) translateY(-1px); } }
.music-btn .slash { grid-area: 1/1; width: 26px; height: 2px; background: var(--ruby); border-radius: 2px; transform: rotate(-45deg) scaleX(0); transition: transform .3s var(--ease); }
.music-btn.off .slash { transform: rotate(-45deg) scaleX(1); }
.music-btn.off svg { opacity: .55; }
#app .topbar { padding-right: calc(124px + env(safe-area-inset-right)); }
@media (max-width: 900px) { #app .topbar { padding-right: calc(118px + env(safe-area-inset-right)); } .music-btn { right: calc(64px + env(safe-area-inset-right)); } }

/* ---------- ticket receipts ---------- */
.ticket-tabs { display: inline-flex; gap: 4px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.ticket-tabs button { background: none; border: 0; color: var(--muted); font: 600 13px Inter; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.ticket-tabs button.on { background: linear-gradient(135deg, var(--gold2), var(--gold3)); color: #2a1a03; }
.ticket-view { display: grid; place-items: center; min-height: 300px; }
.ticket-img { width: min(380px, 100%); height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.55)); animation: ticketIn .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes ticketIn { from { opacity: 0; transform: translateY(30px) rotate(-3deg) scale(.92); } }
.ticket-loading { color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
.print-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.pc { display: grid; gap: 6px; justify-items: center; padding: 18px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; font: 14px Inter; transition: transform .25s var(--ease), border-color .25s; }
.pc:hover { transform: translateY(-3px); border-color: var(--gold); }
.pc small { color: var(--muted); }
.pc .sw { width: 64px; height: 84px; border-radius: 8px; }
.pc .sw.color { background: linear-gradient(180deg, #4a0c1a 0 38%, #fbf3df 38% 72%, #f4e6c4 72%); border: 2px solid #c9972f; }
.pc .sw.bw { background: linear-gradient(180deg, #fff 0 38%, #fff 38% 72%, #fff 72%); border: 2px solid #000; box-shadow: inset 0 30px 0 -27px #000, inset 0 60px 0 -58px #000; }
.pc.busy { opacity: .6; pointer-events: none; }

/* ---------- royal scrollbars (everywhere) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(201,151,47,.7) transparent; }              /* Firefox */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f7dc8f, #c9972f 50%, #8a5d18);
  border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.25);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #fff1c4, #e8c060 50%, #b8862b); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, #f7dc8f, #c9972f 50%, #8a5d18); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; background: transparent; }
/* page scrollbar sits on a faint velvet rail */
html::-webkit-scrollbar-track { background: linear-gradient(90deg, rgba(20,8,16,.9), rgba(40,14,28,.9)); }
/* pop-ups: keep the bar inside the rounded corners */
.modal { scrollbar-gutter: stable; }
.modal::-webkit-scrollbar-track { margin: 18px 0; }
/* the sidebar never scrolls sideways (hover slide caused it) */
.sidebar, nav#nav { overflow-x: hidden; }
nav#nav::-webkit-scrollbar { width: 6px; }
/* thin bars for small scrolling strips */
.tabs::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 6px; }
.tabs, .ticket-tabs { scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }

/* per-sheet picker for classic prints */
.per-sheet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.per-sheet button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 600 13px Inter; cursor: pointer; transition: border-color .2s, background .2s; }
.per-sheet button.on { border-color: var(--gold); background: rgba(232,192,96,.16); color: var(--gold2); }
.mini { display: grid; width: 16px; height: 22px; gap: 1.5px; padding: 1.5px; background: #fff; border-radius: 2px; }
.mini b { background: #c9972f; border-radius: 1px; }
/* icons show the real placement: always 2 x 3 cells, filled left-to-right, top-to-bottom */
.mini { grid-template: repeat(3,1fr) / repeat(2,1fr) !important; width: 18px; }
.mini.m1 { grid-template: repeat(3,1fr) / 1fr !important; justify-items: center; } .mini.m1 b { width: 50%; }

.ticket-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ticket-bar .ticket-tabs { margin-bottom: 0; }
.seal-tog { font: 600 13px Inter; color: var(--gold2); cursor: pointer; }
.no-seal .stamp { display: none; }

/* tenant picker in the print dialog */
.pick-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pick-list { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.pick:hover { border-color: rgba(232,192,96,.5); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-box { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid rgba(232,192,96,.55); display: grid; place-items: center; transition: background .2s; }
.pick-box::after { content: '✓'; color: #2a1a03; font-weight: 800; font-size: 14px; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.pick:has(input:checked) { border-color: var(--gold); background: rgba(232,192,96,.1); }
.pick:has(input:checked) .pick-box { background: linear-gradient(135deg, var(--gold2), var(--gold3)); border-color: transparent; }
.pick:has(input:checked) .pick-box::after { transform: scale(1); }
.pick-main { flex: 1; min-width: 0; }
.pick-main small { display: block; color: var(--muted); }
.pick-amt { display: flex; gap: 8px; align-items: center; font-weight: 700; white-space: nowrap; }
.pick-count { margin: 8px 0 12px; font-size: 13px; }
.pc:disabled { opacity: .4; cursor: not-allowed; transform: none; }
@media (max-width: 600px) { .pick { flex-wrap: wrap; } .pick-amt { width: 100%; justify-content: flex-end; } }

.per-sheet button small { color: var(--muted); font-weight: 500; font-size: 11px; }
.per-sheet button.on small { color: var(--gold); }
#pSize .mini b { grid-area: 1 / 1; }