:root { --bg:#090d1b; --surface:#131a2d; --surface-2:#1a233b; --ink:#f4f7ff; --muted:#9ca8c2; --line:rgba(220,229,255,.11); --blue:#799dff; --purple:#aa83ff; --mint:#5ce2bc; --gold:#ffd166; --danger:#ff7390; --radius:22px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--bg); font:500 14px/1.45 Manrope,system-ui,sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.6; }
.ambient { position:fixed; z-index:-1; width:360px; height:360px; border-radius:50%; filter:blur(78px); opacity:.2; pointer-events:none; }.ambient-one { background:#466ce4; top:-210px; left:-180px; }.ambient-two { background:#b168d6; right:-220px; top:35%; }
.app-shell { width:min(100%,540px); min-height:100vh; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }.identity { display:flex; align-items:center; min-width:0; gap:10px; }.avatar { flex:0 0 42px; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:15px; color:#fff; background:linear-gradient(145deg,#7094ff,#a570e5); font-size:17px; font-weight:800; }.eyebrow { margin:0 0 3px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; }.topbar h1 { overflow:hidden; margin:0; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.credit-pill { display:flex; align-items:center; gap:5px; flex-shrink:0; padding:8px 10px; border:1px solid rgba(255,209,102,.3); border-radius:13px; color:var(--gold); background:rgba(255,209,102,.08); font-size:11px; }.credit-pill b { font-size:13px; }
.notice { margin:0 0 14px; padding:10px 13px; border:1px solid rgba(255,115,144,.35); border-radius:14px; color:#ffd5de; background:rgba(255,115,144,.11); font-size:12px; }.notice.success { border-color:rgba(92,226,188,.35); color:#c3ffe9; background:rgba(92,226,188,.1); }
.tab-panel { display:none; }.tab-panel.active { display:block; animation:fade .2s ease both; } @keyframes fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.hero-card { position:relative; display:flex; align-items:center; justify-content:space-between; overflow:hidden; min-height:133px; margin-bottom:26px; padding:22px; border:1px solid rgba(156,170,255,.25); border-radius:var(--radius); background:linear-gradient(130deg,#253b79,#35295c 64%,#1d2346); box-shadow:0 18px 50px rgba(29,34,81,.35); }.hero-card:after { position:absolute; top:-85px; right:-50px; width:200px; height:200px; border:1px solid rgba(255,255,255,.16); border-radius:50%; content:""; }.hero-copy { position:relative; z-index:1; max-width:250px; }.tag { display:inline-block; margin-bottom:8px; padding:3px 7px; border-radius:6px; color:#1f2254; background:#cdd9ff; font-size:9px; font-weight:800; letter-spacing:.1em; }.hero-card h2 { margin:0; font-size:22px; line-height:1.16; letter-spacing:-.04em; }.hero-card p { margin:7px 0 0; color:#d3dcff; font-size:12px; }.hero-orb { position:relative; z-index:1; display:grid; place-items:center; width:64px; height:64px; border:1px solid rgba(255,255,255,.25); border-radius:22px; background:rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.18); font-size:30px; transform:rotate(-8deg); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:22px 1px 11px; }.section-heading h2 { margin:0; font-size:19px; letter-spacing:-.04em; }.preview-state,.count-chip,.admin-mark { padding:5px 8px; border:1px solid rgba(92,226,188,.25); border-radius:8px; color:var(--mint); background:rgba(92,226,188,.08); font-size:10px; font-weight:800; }.admin-mark { color:#d8c7ff; border-color:rgba(170,131,255,.3); background:rgba(170,131,255,.1); }
.preview-card { position:relative; display:grid; place-items:center; aspect-ratio:1.34/1; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:radial-gradient(circle at 50% 25%,#26375e,#10172a 60%,#0c1121); box-shadow:0 17px 38px rgba(0,0,0,.28); }.preview-card:before { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 33%); content:""; pointer-events:none; }.lottie-preview { position:relative; z-index:1; display:grid; place-items:center; width:84%; height:84%; transform:translateY(-3%); }.lottie-preview svg { display:block; width:100%!important; height:100%!important; }.preview-glow { position:absolute; bottom:-70px; width:230px; height:90px; border-radius:50%; background:rgba(122,154,255,.35); filter:blur(28px); }.loader { width:28px; height:28px; margin:auto; border:3px solid rgba(255,255,255,.13); border-top-color:var(--blue); border-radius:50%; animation:spin .75s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.editor-card,.account-card,.upload-card { margin-top:15px; padding:17px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(29,38,64,.96),rgba(15,21,38,.95)); }.field-label { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; }.text-field { display:flex; align-items:center; gap:8px; margin-top:7px; padding:0 12px; border:1px solid rgba(141,161,223,.22); border-radius:13px; background:#0d1426; }.text-field input { width:100%; padding:13px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:17px; font-weight:700; }.text-field span { flex:0 0 auto; color:var(--muted); font-size:10px; }.control-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }.select-field { width:70%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--ink); background:#0d1426; font-size:12px; }.scale-row { align-items:end; }.scale-row>div { display:flex; align-items:center; gap:7px; }.scale-row strong { color:var(--blue); font-size:12px; }.scale-row input { width:51%; accent-color:var(--blue); }.palette { display:flex; gap:8px; }.color { width:24px; height:24px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--color); box-shadow:0 2px 7px rgba(0,0,0,.33); }.color.active { outline:2px solid var(--blue); outline-offset:2px; }
.primary-button,.secondary-button,.text-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:49px; border:0; border-radius:15px; font-weight:800; transition:transform .15s ease,filter .15s ease; }.primary-button { gap:8px; margin-top:15px; color:#121a35; background:linear-gradient(130deg,#b8c9ff,#8ea8ff 50%,#b192f5); box-shadow:0 9px 22px rgba(99,126,238,.26); }.primary-button small { padding:3px 6px; border-radius:5px; color:#fff; background:rgba(20,30,67,.22); font-size:10px; }.secondary-button { color:#dce4ff; background:rgba(134,158,239,.12); border:1px solid rgba(145,168,248,.22); }.text-button { min-height:36px; color:var(--muted); background:transparent; }.primary-button:active,.secondary-button:active { transform:scale(.98); filter:brightness(.95); }.quiet-note { margin:10px 8px; color:var(--muted); text-align:center; font-size:11px; }
.filter-scroll { display:flex; gap:8px; overflow:auto; padding:2px 0 11px; scrollbar-width:none; }.filter-scroll::-webkit-scrollbar { display:none; }.filter { flex:none; padding:8px 12px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:var(--surface); font-size:11px; font-weight:800; }.filter.active { border-color:transparent; color:#192344; background:#b8c9ff; }.template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.template-card { min-width:0; padding:11px; border:1px solid var(--line); border-radius:17px; color:inherit; text-align:left; background:var(--surface); transition:border-color .18s ease,transform .18s ease,background .18s ease; }.template-card:active { transform:scale(.98); }.template-card.active { border-color:var(--blue); background:#1c2847; box-shadow:0 0 0 1px rgba(121,157,255,.2); }.template-icon { position:relative; display:grid; place-items:center; height:104px; margin-bottom:9px; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:radial-gradient(circle at 50% 32%,#314b85,#211b47 68%,#17152f); }.template-icon>svg { display:block; width:94%!important; height:94%!important; }.template-icon .loader { width:20px; height:20px; }.template-card h3 { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.template-card p { display:-webkit-box; min-height:32px; overflow:hidden; margin:4px 0 0; color:var(--muted); -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:10px; }.template-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; color:var(--gold); font-size:9px; font-weight:800; }.skeleton-card { height:186px; border-radius:17px; background:linear-gradient(90deg,#131a2d,#1c2742,#131a2d); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer { to { background-position:-200% 0; } }
.account-card>div { display:flex; align-items:baseline; gap:7px; margin:4px 0 14px; }.account-card strong { font-size:43px; letter-spacing:-.06em; }.account-card span { color:var(--muted); font-size:12px; }.history-list { display:flex; flex-direction:column; gap:9px; }.history-item { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.history-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#243662; }.history-text { flex:1; min-width:0; }.history-text b,.history-text span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.history-text b { font-size:12px; }.history-text span { color:var(--muted); font-size:10px; }.history-open { padding:5px 7px; border:0; border-radius:7px; color:var(--mint); background:rgba(92,226,188,.11); font-size:10px; font-weight:800; text-decoration:none; }.empty-state { padding:26px 15px; border:1px dashed var(--line); border-radius:15px; color:var(--muted); text-align:center; font-size:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.metric { padding:13px 7px; border:1px solid var(--line); border-radius:15px; background:var(--surface); text-align:center; }.metric span { display:block; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.metric strong { display:block; margin-top:4px; color:#c7d4ff; font-size:18px; }.upload-card { display:flex; flex-direction:column; gap:9px; }.upload-card input,.upload-card select { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--ink); background:#0d1426; font-size:12px; }.upload-card input[type=file] { color:var(--muted); }.admin-field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.upload-note { margin:1px 2px 3px; color:var(--muted); font-size:10px; line-height:1.5; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; display:flex; width:min(100%,540px); padding:8px 14px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(11,16,32,.9); backdrop-filter:blur(20px); transform:translateX(-50%); }.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 1px; border:0; color:var(--muted); background:transparent; font-size:10px; font-weight:700; }.nav-item span { font-size:18px; line-height:19px; }.nav-item.active { color:#c3d1ff; }.nav-item.active span { text-shadow:0 0 13px var(--blue); }
.access-gate { display:grid; place-items:center; align-content:center; min-height:100vh; padding:32px; text-align:center; }.gate-icon,.result-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 17px; border-radius:22px; color:#19264b; background:linear-gradient(145deg,#bed0ff,#9c83f3); font-size:32px; box-shadow:0 12px 28px rgba(110,138,252,.3); }.access-gate h1 { margin:0; font-size:25px; letter-spacing:-.05em; }.access-gate p { max-width:290px; margin:9px auto; color:var(--muted); }
.sheet-backdrop { position:fixed; z-index:20; inset:0; background:rgba(3,5,14,.67); backdrop-filter:blur(5px); }.sheet { position:fixed; z-index:21; right:50%; bottom:0; width:min(100%,540px); padding:12px 18px calc(22px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-bottom:0; border-radius:26px 26px 0 0; background:#151d32; box-shadow:0 -18px 55px rgba(0,0,0,.35); transform:translateX(50%); }.sheet-handle { width:36px; height:4px; margin:0 auto 15px; border-radius:10px; background:rgba(255,255,255,.18); }.sheet h2 { margin:0; font-size:22px; letter-spacing:-.05em; }.sheet-copy { margin:7px 0 15px; color:var(--muted); font-size:12px; }.icon-close { position:absolute; top:13px; right:16px; width:26px; height:26px; border:0; border-radius:50%; color:var(--muted); background:rgba(255,255,255,.08); font-size:20px; }.plan-list { display:flex; flex-direction:column; gap:8px; }.plan { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px; border:1px solid var(--line); border-radius:15px; background:#10172a; }.plan-info b,.plan-info span { display:block; }.plan-info b { font-size:13px; }.plan-info span { margin-top:2px; color:var(--muted); font-size:10px; }.plan button { flex:none; min-width:92px; padding:9px; border:0; border-radius:10px; color:#1a2445; background:#b6c7ff; font-size:11px; font-weight:800; }.result-sheet { text-align:center; }.result-sheet .result-icon { margin-bottom:11px; color:#143429; background:linear-gradient(145deg,#a8f0d7,#5ce2bc); }.result-sheet .primary-button,.result-sheet .secondary-button { margin-top:9px; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:16px; padding:4px; border:1px solid var(--line); border-radius:14px; background:#0c1324; }.mode-button { min-height:38px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }.mode-button.active { color:#182344; background:linear-gradient(135deg,#c1d0ff,#a7b9f6); box-shadow:0 5px 15px rgba(78,103,193,.25); }.editor-mode[hidden] { display:none; }.editor-mode.active { animation:fade .18s ease both; }.logo-upload { display:flex; flex-direction:column; align-items:center; padding:19px 13px; border:1px dashed rgba(156,177,244,.36); border-radius:15px; background:rgba(14,22,42,.74); text-align:center; cursor:pointer; }.logo-upload input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }.logo-upload-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:8px; border-radius:12px; color:#1a2548; background:linear-gradient(145deg,#c3d2ff,#9faefa); font-size:23px; }.logo-upload b { font-size:13px; }.logo-upload small { max-width:275px; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.45; }.file-status { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:9px; padding:9px 11px; border-radius:10px; color:var(--muted); background:rgba(120,147,231,.08); font-size:10px; }.file-status span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-status b { flex:none; color:#9fb7ff; }.file-status.ready { color:var(--mint); background:rgba(92,226,188,.08); }.helper-note { margin:9px 2px 0; color:var(--muted); font-size:10px; line-height:1.45; }
.admin-refresh { padding:7px 9px; border:1px solid rgba(170,131,255,.3); border-radius:9px; color:#d8c7ff; background:rgba(170,131,255,.1); font-size:10px; font-weight:800; }.admin-metrics { grid-template-columns:repeat(2,1fr); }.metric small { display:block; color:var(--muted); font-size:8px; }.admin-section { margin-top:14px; padding:15px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(29,38,64,.96),rgba(15,21,38,.95)); }.admin-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.admin-section h3 { margin:0; font-size:16px; }.admin-help { margin:7px 0 11px; color:var(--muted); font-size:10px; line-height:1.5; }.admin-list { display:flex; flex-direction:column; gap:8px; margin-top:11px; }.admin-row { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid rgba(142,162,222,.14); border-radius:13px; background:#0e1629; }.admin-row-main { flex:1; min-width:0; }.admin-row-main b,.admin-row-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-row-main b { font-size:12px; }.admin-row-main span { margin-top:3px; color:var(--muted); font-size:9px; }.admin-actions { display:flex; flex:none; gap:5px; }.mini-action { min-height:30px; padding:6px 8px; border:1px solid rgba(133,158,239,.23); border-radius:8px; color:#cbd8ff; background:rgba(133,158,239,.1); font-size:9px; font-weight:800; }.mini-action.approve { color:#baffea; border-color:rgba(92,226,188,.25); background:rgba(92,226,188,.09); }.mini-action.danger { color:#ffd0da; border-color:rgba(255,115,144,.25); background:rgba(255,115,144,.09); }.admin-form { display:flex; flex-direction:column; gap:10px; }.admin-label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.07em; }.admin-label input,.admin-label textarea,.admin-search input,.package-field input { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--ink); background:#0d1426; font-size:12px; resize:vertical; }.toggle input { position:absolute; opacity:0; }.toggle span { display:block; width:42px; height:24px; padding:3px; border-radius:20px; background:#303b58; transition:.2s; }.toggle span:after { display:block; width:18px; height:18px; border-radius:50%; background:#fff; content:""; transition:.2s; }.toggle input:checked+span { background:#5ce2bc; }.toggle input:checked+span:after { transform:translateX(18px); }.package-editor { display:flex; flex-direction:column; gap:7px; }.package-config { display:grid; grid-template-columns:1fr 92px 67px; align-items:end; gap:7px; padding:9px; border:1px solid rgba(142,162,222,.14); border-radius:11px; background:#0e1629; }.package-config b { align-self:center; font-size:10px; }.package-field { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:8px; }.package-field input { padding:8px 6px; }.admin-search { display:flex; gap:7px; margin-top:10px; }.admin-search button { flex:none; padding:0 12px; border:0; border-radius:10px; color:#182344; background:#b8c9ff; font-size:10px; font-weight:800; }.template-admin-thumb { display:grid; flex:none; place-items:center; width:44px; height:44px; overflow:hidden; border-radius:10px; background:#26375e; }.template-admin-thumb svg { width:100%!important; height:100%!important; }.payment-status { flex:none; padding:4px 6px; border-radius:7px; color:var(--gold); background:rgba(255,209,102,.09); font-size:8px; font-weight:800; }
@media (min-width:541px) { body { background:#050814; }.app-shell { border-right:1px solid rgba(255,255,255,.04); border-left:1px solid rgba(255,255,255,.04); } }
.lottie-preview { width:88%; height:88%; transform:none; }
.font-preview { display:flex; align-items:center; gap:10px; min-height:47px; margin-top:9px; padding:9px 12px; overflow:hidden; border:1px solid rgba(121,157,255,.18); border-radius:12px; color:#eef3ff; background:linear-gradient(135deg,rgba(121,157,255,.1),rgba(170,131,255,.08)); }.font-preview span { flex:none; color:var(--muted); font:700 10px Manrope,sans-serif; }.font-preview b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:700; }
.tool-section { margin-top:14px; padding:11px; border:1px solid rgba(142,162,222,.12); border-radius:14px; background:rgba(9,15,29,.38); }.tool-section .control-row { margin-top:0; }.scale-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:10px; }.scale-presets button,.position-pad button { min-height:32px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:#111a2e; font-size:10px; font-weight:800; }.scale-presets button.active { border-color:rgba(121,157,255,.5); color:#192344; background:#b8c9ff; }.position-tool>div:first-child { display:flex; align-items:center; justify-content:space-between; }.position-tool>div:first-child span { color:var(--blue); font-size:10px; font-weight:800; }.position-pad { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:9px; }.position-pad button { font-size:16px; }.position-pad .position-reset { color:#17213e; background:#b8c9ff; }
.catalog-tools { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:8px; margin-bottom:10px; }.catalog-search { display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--line); border-radius:12px; background:#0d1426; }.catalog-search span { color:var(--muted); font-size:18px; }.catalog-search input,.catalog-tools select { min-width:0; width:100%; min-height:41px; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }.catalog-tools select { padding:0 8px; border:1px solid var(--line); border-radius:12px; background:#0d1426; }.catalog-empty { grid-column:1/-1; }
.package-config { grid-template-columns:minmax(0,1fr) 90px 96px; padding:11px; border-radius:12px; }.package-config b { grid-column:1/-1; color:#cbd8ff; letter-spacing:.08em; }.package-title { grid-column:1/2; }.package-description { grid-column:1/-1; }
@media (max-width:380px) { .app-shell { padding-right:13px; padding-left:13px; }.credit-pill { max-width:132px; font-size:9px; }.catalog-tools { grid-template-columns:1fr; }.package-config { grid-template-columns:1fr 1fr; }.package-title,.package-description,.package-config b { grid-column:1/-1; }.admin-row { align-items:flex-start; }.admin-actions { flex-direction:column; } }

/* Canvas is the compatibility fallback for TGS files that Lottie-web cannot mount with SVG. */
.lottie-preview canvas,.template-icon>canvas,.template-admin-thumb canvas { display:block; width:100%!important; height:100%!important; object-fit:contain; }

/* Admin Subnav & Categorized Tabs */
.admin-subnav { display:flex; gap:6px; overflow-x:auto; padding:4px 0 14px; scrollbar-width:none; }
.admin-subnav::-webkit-scrollbar { display:none; }
.admin-subnav-btn { flex:none; padding:8px 13px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--surface); font-size:11px; font-weight:700; transition:all .15s ease; cursor:pointer; }
.admin-subnav-btn.active { color:#121a35; background:linear-gradient(130deg,#b8c9ff,#8ea8ff); border-color:transparent; box-shadow:0 4px 14px rgba(121,157,255,.3); font-weight:800; }
.admin-subtab[hidden] { display:none!important; }
.admin-subtab.active { display:block; animation:fade .2s ease both; }

/* Visual Font Selector Chips */
.control-section { margin-top:14px; }
.font-chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(95px,1fr)); gap:7px; margin-top:7px; }
.font-chip { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#0e1528; cursor:pointer; transition:all .15s ease; }
.font-chip span { font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.font-chip b { font-size:16px; color:var(--blue); margin-left:4px; }
.font-chip.active { border-color:var(--blue); background:#1c2847; box-shadow:0 0 0 1px var(--blue); }
.color-badge, .pos-badge { font-size:10px; font-weight:700; color:var(--blue); }

/* Dual-Mode Payment Sheet (Stars + Karta) */
.pay-method-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0 14px; padding:4px; border:1px solid var(--line); border-radius:14px; background:#0c1324; }
.pay-tab { min-height:38px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s ease; }
.pay-tab.active { color:#121a35; background:linear-gradient(130deg,#b8c9ff,#8ea8ff); font-weight:800; box-shadow:0 4px 12px rgba(121,157,255,.25); }
.pay-section[hidden] { display:none!important; }
.pay-section.active { display:block; animation:fade .2s ease both; }
.card-details-box { padding:14px; border:1px solid rgba(121,157,255,.2); border-radius:14px; background:linear-gradient(135deg,rgba(29,42,77,.8),rgba(15,22,41,.9)); margin-bottom:12px; }
.card-num-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card-label { font-size:10px; color:var(--muted); font-weight:700; }
.card-num { font-size:17px; font-weight:800; color:#ffd166; letter-spacing:.05em; font-family:monospace; }
.copy-btn { padding:5px 9px; border:1px solid rgba(255,209,102,.3); border-radius:8px; color:var(--gold); background:rgba(255,209,102,.1); font-size:10px; font-weight:800; cursor:pointer; }
.card-sub-row { margin-top:6px; font-size:11px; color:var(--muted); }
.card-plans-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.card-plan-item { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:#10172a; }
.card-plan-item b { font-size:13px; display:block; }
.card-plan-item span { font-size:10px; color:var(--muted); display:block; margin-top:2px; }
.card-plan-price { color:#5ce2bc; font-weight:800; font-size:12px; text-align:right; }

/* Studio Template Selector Ribbon */
.studio-template-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.studio-template-info { display:flex; align-items:center; gap:8px; }
.studio-tmpl-badge { padding:3px 8px; border-radius:8px; font-size:10px; font-weight:800; background:rgba(121,157,255,.15); color:var(--accent); border:1px solid rgba(121,157,255,.3); }
.studio-template-info b { font-size:13px; color:var(--text); }
.studio-change-btn { padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:#151d32; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; }
.studio-change-btn:hover { border-color:var(--accent); color:var(--accent); }
.studio-template-ribbon { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.studio-template-ribbon::-webkit-scrollbar { display:none; }
.studio-tmpl-chip { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:12px; border:1px solid var(--line); background:#10172a; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; transition:all .18s ease; }
.studio-tmpl-chip:hover { border-color:rgba(121,157,255,.5); color:var(--text); }
.studio-tmpl-chip.active { border-color:var(--accent); background:linear-gradient(135deg,rgba(121,157,255,.2),rgba(84,107,255,.1)); color:#fff; box-shadow:0 0 12px rgba(121,157,255,.25); }
.studio-tmpl-chip span { font-size:13px; }
.template-preview-error { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,115,144,.32); border-radius:12px; color:#ffd0da; background:rgba(255,115,144,.1); font-size:22px; font-weight:900; cursor:pointer; }