/* ============================================================
   QRToMe — Letter Studio, Animated Letter Player, VIP Pro modal
   Companion stylesheet for app-letter.js (loaded from index.html)
   ============================================================ */

:root {
  --ls-accent: #7c3aed;
  --ls-gold: #f59e0b;
}

/* ---------- generic helpers used by injected UI ---------- */
.btn-mini { padding: 4px 10px; height: auto; font-size: 11px; border-radius: 9px; }
.copy-inline { display: flex; align-items: center; gap: 6px; }
.copy-inline .icon-btn { width: 28px; height: 28px; font-size: 12px; }
.donation-check-message { margin-top: 8px; font-size: 11px; color: #64748b; line-height: 1.5; }
.thankyou-mark { font-size: 44px; text-align: center; margin: 6px 0; }

/* ---------- Letter Studio modal ---------- */
.ls-root .modal.ls-modal,
.modal.ls-modal {
  width: min(1240px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 16px 18px;
}

.ls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 34px; }
.ls-head h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.03em; }
.ls-templates { display: flex; gap: 6px; flex-wrap: wrap; max-width: 560px; }
.ls-tpl { border: 1px solid var(--line, #e7ebf0); background: #fff; border-radius: 12px; padding: 7px 9px; cursor: pointer; font-size: 18px; line-height: 1; display: grid; justify-items: center; gap: 3px; transition: .15s ease; }
.ls-tpl small { font-size: 8px; font-weight: 700; color: #64748b; white-space: nowrap; }
.ls-tpl:hover { transform: translateY(-1px); border-color: var(--ls-accent); }
.ls-tpl.active { border-color: var(--ls-accent); background: #f3eeff; box-shadow: 0 0 0 2px rgba(124, 58, 237, .12); }

.ls-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.ls-left, .ls-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: 66vh; overflow: auto; padding-right: 4px; }
.ls-left input, .ls-left select, .ls-left textarea { width: 100%; border: 1px solid var(--line, #e7ebf0); background: #fff; border-radius: 10px; padding: 8px 9px; font-size: 12px; margin-bottom: 6px; outline: 0; }
.ls-left input:focus, .ls-left select:focus { border-color: var(--ls-accent); }
.ls-left .field-label { margin-top: 6px; }
.ls-actions-col { display: grid; gap: 7px; margin-top: 12px; }

.ls-yt-card { border: 1px solid var(--line, #e7ebf0); border-radius: 14px; background: linear-gradient(160deg, #fff7ed, #fef3c7); padding: 10px; margin-top: 10px; }
.ls-yt-card.vip-locked { opacity: .78; }
.ls-yt-head { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ls-vip-badge { font: 700 8px "DM Mono", monospace; letter-spacing: .1em; background: linear-gradient(90deg, #f59e0b, #d97706); color: #fff; border-radius: 999px; padding: 3px 7px; }
.ls-mini-vip { font-style: normal; font-size: 7px; font-weight: 800; color: #d97706; border: 1px solid #fcd34d; border-radius: 6px; padding: 1px 3px; margin-left: 2px; }
.ls-yt-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
.ls-yt-grid label { font-size: 9px; font-weight: 700; color: #64748b; display: grid; gap: 3px; }
.ls-yt-grid input[type="number"], .ls-yt-grid input[type="range"] { width: 100%; margin: 0; }
.ls-locked { position: relative; }
.ls-locked > input, .ls-locked > select { background: #f1f5f9; cursor: not-allowed; }

.ls-center { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ls-spacer { flex: 1; }
.ls-stage-wrap { border: 1px solid var(--line, #e7ebf0); border-radius: 16px; overflow: hidden; background: #0f172a; }
.ls-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px; background: linear-gradient(150deg, var(--ls-bg1, #0f172a), var(--ls-bg2, #3b1d63)); overflow: hidden; touch-action: none; }
.ls-obj { position: absolute; transform: translate3d(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px)), 0) rotate(var(--rot, 0deg)); cursor: grab; user-select: none; white-space: pre-wrap; text-align: center; max-width: 80%; line-height: 1.25; }
.ls-stage .ls-obj { animation: none !important; }
.ls-obj.is-dragging { cursor: grabbing; z-index: 10; will-change: transform; }
.ls-obj img { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; border-radius: 12px; pointer-events: none; }
.ls-obj.sel { outline: 2px dashed #fff; outline-offset: 4px; border-radius: 8px; }
.ls-sign { position: absolute; right: 14px; bottom: 12px; font-family: "Dancing Script", cursive; font-size: 18px; color: rgba(255, 255, 255, .85); }

.ls-timeline { display: flex; align-items: center; gap: 8px; }
.tl-label { font: 500 8px "DM Mono", monospace; letter-spacing: .12em; color: #94a3b8; white-space: nowrap; }
.tl-track { position: relative; flex: 1; height: 34px; border-radius: 10px; background: #f1f5f9; border: 1px solid var(--line, #e7ebf0); }
.tl-mark { position: absolute; top: 4px; transform: translateX(-50%); min-width: 26px; height: 26px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; font-size: 12px; display: grid; place-items: center; cursor: pointer; padding: 0 4px; }
.tl-mark.sel { border-color: var(--ls-accent); background: #f3eeff; box-shadow: 0 0 0 2px rgba(124, 58, 237, .15); }

.ls-tool-title { font: 500 8px "DM Mono", monospace; letter-spacing: .14em; color: #94a3b8; margin: 8px 0 6px; }
.ls-props label { display: block; font-size: 9px; font-weight: 800; margin: 6px 0 4px; }
.ls-props input, .ls-props select, .ls-props textarea { width: 100%; border: 1px solid var(--line, #e7ebf0); border-radius: 9px; padding: 6px 8px; font-size: 11px; margin-bottom: 4px; outline: 0; }
.ls-two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 4px; }
.ls-two label { margin: 0 0 2px; }
.ls-anim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.ls-anim { border: 1px solid var(--line, #e7ebf0); background: #fff; border-radius: 9px; padding: 7px 4px; font-size: 9px; font-weight: 700; color: #475569; cursor: pointer; transition: .13s ease; }
.ls-anim:hover { border-color: var(--ls-accent); color: var(--ls-accent); }
.ls-tip { margin-top: 12px; font-size: 9px; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 11px; padding: 9px; line-height: 1.5; }
.studio-statusbar { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line, #e7ebf0); font: 500 9px "DM Mono", monospace; color: #94a3b8; }

/* ---------- animated object keyframes (shared stage + player) ---------- */
@keyframes lp-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-popIn { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.2); } 70% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.12); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); } }
@keyframes lp-typewriter { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes lp-floatUp { from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }
@keyframes lp-confettiDrop { from { opacity: 0; transform: translate(-50%, -160%) rotate(calc(var(--rot, 0deg) + 40deg)); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }
@keyframes lp-heartbeat { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } 45% { transform: translate(-50%, -50%) scale(.94); } 60% { transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lp-sparkle { 0% { opacity: 0; filter: brightness(2.4) drop-shadow(0 0 14px #fff); } 40% { opacity: 1; } 60% { filter: brightness(1.6) drop-shadow(0 0 8px #fff); } 100% { opacity: 1; filter: brightness(1); } }
@keyframes lp-wobble { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) - 18deg)); } 40% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 12deg)); } 70% { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) - 7deg)); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }
@keyframes lp-zoomPulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lp-slideLeft { from { opacity: 0; transform: translate(calc(-50% - 120px), -50%) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }
@keyframes lp-slideRight { from { opacity: 0; transform: translate(calc(-50% + 120px), -50%) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }
@keyframes lp-bounceIn { 0% { opacity: 0; transform: translate(-50%, -220%) rotate(var(--rot, 0deg)); } 55% { opacity: 1; transform: translate(-50%, -38%) rotate(var(--rot, 0deg)); } 75% { transform: translate(-50%, -56%) rotate(var(--rot, 0deg)); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } }

.ls-obj.lp-fadeIn, .lp-obj.lp-fadeIn { animation-name: lp-fadeIn; }
.ls-obj.lp-popIn, .lp-obj.lp-popIn { animation-name: lp-popIn; }
.ls-obj.lp-typewriter, .lp-obj.lp-typewriter { animation-name: lp-typewriter; }
.ls-obj.lp-floatUp, .lp-obj.lp-floatUp { animation-name: lp-floatUp; }
.ls-obj.lp-confettiDrop, .lp-obj.lp-confettiDrop { animation-name: lp-confettiDrop; }
.ls-obj.lp-heartbeat, .lp-obj.lp-heartbeat { animation-name: lp-heartbeat; }
.ls-obj.lp-sparkle, .lp-obj.lp-sparkle { animation-name: lp-sparkle; }
.ls-obj.lp-wobble, .lp-obj.lp-wobble { animation-name: lp-wobble; }
.ls-obj.lp-zoomPulse, .lp-obj.lp-zoomPulse { animation-name: lp-zoomPulse; }
.ls-obj.lp-slideLeft, .lp-obj.lp-slideLeft { animation-name: lp-slideLeft; }
.ls-obj.lp-slideRight, .lp-obj.lp-slideRight { animation-name: lp-slideRight; }
.ls-obj.lp-bounceIn, .lp-obj.lp-bounceIn { animation-name: lp-bounceIn; }

.ls-obj[class*="lp-"], .lp-obj[class*="lp-"] { animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.ls-obj.lp-none, .lp-obj.lp-none { animation: none; }

/* looping ambient motion in the player */
@keyframes lp-ease-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
.lp-obj.lp-ease { animation-duration: 1.4s; }
.lp-end .lp-obj { animation-play-state: running; }

/* ---------- full-screen letter player ---------- */
.letter-player { position: fixed; inset: 0; z-index: 300; overflow: hidden; background: #0f172a; color: #fff; }
body.letter-open { overflow: hidden; }
.lp-bg { position: absolute; inset: 0; background: linear-gradient(150deg, var(--lp-bg1, #0f172a), var(--lp-bg2, #3b1d63)); }
.lp-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.lp-stage { position: absolute; inset: 0; z-index: 3; }
.lp-obj { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); white-space: pre-wrap; text-align: center; max-width: 86%; line-height: 1.3; will-change: transform, opacity; }
.lp-obj img { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; border-radius: 14px; }
.lp-yt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 86vw); aspect-ratio: 16 / 9; z-index: 4; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.lp-yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.lp-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: linear-gradient(#0009, transparent); }
.lp-brand { font-size: 13px; font-weight: 800; letter-spacing: -.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-btn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; font-weight: 800; backdrop-filter: blur(6px); cursor: pointer; }
.lp-btn:hover { background: rgba(255, 255, 255, .24); }
.lp-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .14); z-index: 6; }
.lp-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f472b6, #f59e0b); transform-origin: left; animation: lp-progbar linear forwards; }
@keyframes lp-progbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-footer { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; z-index: 5; font: 500 9px "DM Mono", monospace; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.lp-vip { color: var(--ls-gold); }

/* ---------- VIP modal ---------- */
.vip-crown { font-size: 40px; text-align: center; margin-bottom: 2px; }
.vip-modal h2 { text-align: center; }
.vip-perks { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.vip-perks li { border: 1px solid var(--line, #e7ebf0); background: #fafbfc; border-radius: 12px; padding: 10px 12px; font-size: 11px; line-height: 1.5; }
.vip-note { margin-top: 10px; font-size: 9px; color: #8b93a1; text-align: center; line-height: 1.55; }
.vip-pay-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.vip-qr-panel { border: 1px solid var(--line, #e7ebf0); border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 10px; min-height: 240px; }
.vip-qr-panel img { width: min(240px, 100%); height: auto; border-radius: 10px; }
.vip-pay-info { display: grid; gap: 9px; }
.vip-pay-info > div { border: 1px solid var(--line, #e7ebf0); border-radius: 12px; padding: 9px 11px; background: #f8fafc; }
.vip-pay-info span { display: block; font: 500 7px "DM Mono", monospace; letter-spacing: .12em; color: #9aa1ab; margin-bottom: 3px; }
.vip-pay-info b, .vip-pay-info strong { display: block; font-size: 12px; word-break: break-word; }
.vip-proof-extra { margin-top: 12px; }
.vip-receipt { margin: 10px 0; padding: 11px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; font: 500 10px "DM Mono", monospace; word-break: break-all; color: #475569; }
#vipBadgeTop.vip-active, .vip-pill.vip-active { background: linear-gradient(90deg, #f59e0b, #d97706); color: #fff; border-color: transparent; }
#letterStudioTop { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ls-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .ls-right { grid-column: 1 / -1; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .ls-props, .ls-anim-grid, .ls-tip { flex: 1 1 240px; }
}
@media (max-width: 760px) {
  .ls-shell { grid-template-columns: 1fr; }
  .ls-left, .ls-right { max-height: none; }
  .ls-modal { padding: 14px; }
  .vip-pay-layout { grid-template-columns: 1fr; }
  .lp-yt { width: 92vw; }
}

/* Reliable scene editing, accessible focus, and server-verified VIP payment UI. */
.ls-obj:focus-visible{outline:2px solid #fbbf24;outline-offset:4px;}
.ls-toolbar .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.vip-modal .vip-payment-qr{display:block;width:min(260px,100%);max-height:260px;object-fit:contain;margin:12px auto;border:1px solid var(--line,#e7ebf0);border-radius:14px;background:#fff;}
.vip-modal .vip-transfer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;}
.vip-modal .vip-transfer-grid>div,.vip-modal .vip-code-row{min-width:0;border:1px solid var(--line,#e7ebf0);border-radius:12px;padding:10px;background:#f8fafc;}
.vip-modal .vip-transfer-grid small,.vip-modal .vip-code-row small{display:block;font-size:8px;color:#8b93a1;margin-bottom:5px;}
.vip-modal .vip-transfer-grid b,.vip-modal .vip-code-row code{display:block;overflow-wrap:anywhere;font-size:10px;}
.vip-modal .vip-transfer-grid .btn{margin-top:6px;}
.vip-modal .vip-code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vip-modal .vip-code-row>div{min-width:0;}
.vip-modal .vip-countdown{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font:600 11px "DM Mono",monospace;}
.vip-modal .vip-success{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;background:#dcfce7;color:#15803d;font-size:26px;font-weight:900;}
.vip-modal .vip-receipt{display:grid;gap:7px;margin:12px 0;}
.vip-modal .vip-receipt>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line,#e7ebf0);border-radius:10px;padding:8px;font-size:9px;}
.vip-modal .vip-receipt small{color:#8b93a1;}
.vip-modal .vip-receipt b{overflow-wrap:anywhere;}
@media(max-width:520px){.vip-modal .vip-transfer-grid{grid-template-columns:1fr;}.vip-modal .vip-receipt>div{grid-template-columns:1fr;}}
/* Dedicated Letter Studio mobile layout */
@media(max-width:760px){.ls-root .modal.ls-modal,.modal.ls-modal{width:100vw!important;max-width:none!important;height:100dvh;max-height:100dvh!important;border-radius:0!important;padding:10px!important}.ls-head{display:block;position:sticky;top:-10px;z-index:5;padding:4px 0 7px;background:#fff}.ls-head h2{font-size:17px}.ls-templates{display:flex;overflow-x:auto;flex-wrap:nowrap}.ls-tpl{flex:0 0 56px}.ls-shell{display:flex;flex-direction:column;gap:8px}.ls-left,.ls-center,.ls-right{width:100%;max-height:none}.ls-left{order:1}.ls-center{order:2}.ls-right{order:3}.ls-left input,.ls-left select{min-height:42px;font-size:12px}.ls-actions-col{position:sticky;bottom:0;z-index:4;grid-template-columns:1fr 1.4fr;display:grid;gap:6px;padding:7px 0;background:linear-gradient(transparent,#fff 25%)}.ls-toolbar{overflow-x:auto;flex-wrap:nowrap}.ls-toolbar .btn{flex:0 0 auto;min-height:38px}.ls-stage{min-height:280px}.ls-track{min-width:520px}.ls-anim-grid{grid-template-columns:repeat(3,1fr)}.ls-anim{min-height:38px}.ls-audio-card{padding:9px;border:1px solid var(--line,#e7ebf0);border-radius:13px;background:#f8fafc;margin-top:8px}.ls-audio-card input{width:100%;font-size:10px}.ls-media-note{font-size:8px;color:#94a3b8;margin-top:4px}.ls-free-badge{font:700 8px 'DM Mono';color:#15803d;border:1px solid #bbf7d0;border-radius:999px;padding:2px 5px}}

.ls-media-quota{font-size:8px;color:#64748b;margin-top:5px;line-height:1.35}

.ls-yt-actions{display:flex;gap:6px;flex-wrap:wrap}.ls-yt-preview-box{margin:8px 0;border:1px solid #fed7aa;border-radius:12px;padding:7px;background:#fff}.ls-yt-preview-label{font-size:9px;font-weight:800;color:#9a3412;margin-bottom:5px}.ls-yt-preview-box iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px}.ls-yt-preview-box.hidden{display:none}.ls-media-quota{font-size:8px;color:#64748b;margin-top:5px;line-height:1.35}

/* Mobile-first Letter Studio density pass */
.ls-head{position:sticky;top:-16px;z-index:20;background:rgba(255,255,255,.96);padding-top:3px;padding-bottom:8px;border-bottom:1px solid rgba(231,235,240,.8)}
.ls-actions-col{position:sticky;bottom:-16px;z-index:18;background:rgba(255,255,255,.96);padding:8px 0 2px;margin-top:6px;border-top:1px solid var(--line,#e7ebf0)}
@media(max-width:760px){.ls-root{padding:8px}.ls-root .modal.ls-modal,.modal.ls-modal{width:100%;max-height:96vh;padding:12px 10px;border-radius:18px}.ls-head{top:-12px;padding-right:28px}.ls-head h2{font-size:16px}.ls-templates{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:none;gap:4px}.ls-tpl{padding:5px 3px;font-size:15px;border-radius:9px}.ls-tpl small{font-size:7px;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ls-shell{display:flex;flex-direction:column;gap:8px}.ls-center{order:-1;width:100%}.ls-left,.ls-right{width:100%;max-height:none;overflow:visible;padding-right:0}.ls-stage{min-height:245px;aspect-ratio:1/1}.ls-toolbar{position:sticky;top:92px;z-index:16;background:rgba(255,255,255,.96);padding:5px 0}.ls-toolbar .btn-mini{min-height:32px;padding:5px 8px}.ls-timeline{margin-bottom:2px}.ls-right{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ls-right .ls-tool-title,.ls-right .ls-tip{grid-column:1/-1}.ls-anim-grid{grid-column:1/-1}.ls-left input,.ls-left select{padding:10px;font-size:13px}.ls-actions-col{position:sticky;bottom:-12px}.ls-actions-col .btn{min-height:42px;font-size:12px}.ls-yt-grid{grid-template-columns:1fr 1fr}.ls-yt-grid label:last-child{grid-column:1/-1}.ls-audio-card,.ls-yt-card{padding:9px;margin-top:6px}.ls-media-quota{font-size:9px}}

.ls-obj{transform:translate3d(calc(-50% + var(--drag-x,0px)),calc(-50% + var(--drag-y,0px)),0) rotate(var(--rot,0deg)) scaleX(var(--flip-x,1)) scaleY(var(--flip-y,1))}.ls-entity-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.ls-audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}.ls-audio-controls label{font-size:8px;font-weight:700;color:#697381}.ls-audio-controls input{width:100%;margin-top:4px}.ls-audio-controls output{font-size:8px;color:#8b93a1}.ls-code-card{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:center;margin-top:8px;padding:9px;border:1px solid #e3d8ff;border-radius:11px;background:#faf8ff;color:#5b21b6}.ls-code-card b{font-size:9px}.ls-code-card small{grid-column:1/-1;font-size:8px;color:#8b78a8}.ls-code-card .btn{min-height:30px;padding:4px 8px;font-size:8px}

/* Fast, in-place entity controls and verified manual VIP review */
.ls-quick-tools{position:absolute;left:50%;top:-40px;z-index:30;display:flex;gap:3px;padding:3px;border:1px solid #d7c7ff;border-radius:10px;background:#fff;box-shadow:0 8px 24px #0f172a30;white-space:nowrap;transform:translateX(-50%);cursor:default}
.ls-quick-tools button{min-width:28px;height:28px;padding:0 5px;border:1px solid #e7e1f2;border-radius:7px;background:#f8f5ff;color:#4c1d95;font:700 9px/1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.ls-quick-tools button:hover,.ls-quick-tools button:focus-visible{background:#ede4ff;border-color:#9f7aea;outline:2px solid transparent}
.ls-admin-panel{margin:8px 0 12px;border:1px solid #e8c976;border-radius:14px;background:linear-gradient(135deg,#fffaf0,#fff4d9);padding:11px;color:#433414}
.ls-admin-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.ls-admin-heading>div{display:grid;gap:3px}.ls-admin-kicker{font:800 8px/1.4 "DM Mono",monospace;letter-spacing:.15em;color:#8a5a00}.ls-admin-heading strong{font-size:11px}.ls-admin-heading small{font-size:9px;color:#7b6944}.ls-admin-queue{display:grid;gap:7px;margin-top:9px}.ls-admin-request{display:grid;gap:6px;border:1px solid #ead9aa;border-radius:11px;background:#fff;padding:9px}.ls-admin-request-meta,.ls-admin-request-details,.ls-admin-request-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.ls-admin-request-meta strong{font-size:10px;word-break:break-all}.ls-admin-request-meta span,.ls-admin-request small{font-size:8px;color:#786c54}.ls-admin-request-details{font-size:9px}.ls-admin-request-details code{font-weight:800;color:#3f2b04}.ls-admin-request-actions{justify-content:flex-start}.ls-admin-request-actions .btn{min-height:30px}.ls-admin-error{font-size:9px;color:#b91c1c}.vip-pill.admin-active{border-color:#d6aa34!important;background:#fff8dc!important;color:#754b00!important;font-weight:900}
@media(max-width:760px){.ls-admin-panel{padding:9px}.ls-admin-heading{align-items:flex-start}.ls-admin-heading .btn{min-height:34px}.ls-quick-tools{top:-38px;gap:2px;padding:2px}.ls-quick-tools button{min-width:29px;height:30px;padding:0 4px;font-size:9px}}

/* Keep both close controls above sticky headers, embeds, and touch overlays. */
.modal.ls-modal #lsCloseBtn{position:absolute;z-index:50;pointer-events:auto;touch-action:manipulation}
.letter-player .lp-top{z-index:20;pointer-events:auto}
.letter-player .lp-btn{position:relative;z-index:21;pointer-events:auto;touch-action:manipulation;min-width:42px;min-height:42px}