/* ============================================================
   KI Studio — cinematic dark, layout kiểu Higgsfield
   Trái: panel cấu hình · Phải: feed kết quả
   ============================================================ */
:root {
  --bg: #171717; --bg-2: #1e1e1e;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.16);
  --text: #f2f2f6; --text-2: rgba(242, 242, 246, 0.62); --text-3: rgba(242, 242, 246, 0.38);
  --acc: #b7ea12; --acc-2: #d4f545; --acc-3: #8fb80e;
  --danger: #ff5d73; --ok: #4ade80;
  --radius: 12px; --radius-sm: 12px;
  --font: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-d: 'Space Grotesk', 'Be Vietnam Pro', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--acc); color: #0a0a0f; }
a { color: inherit; }
code { font-family: var(--font-d); font-size: 0.88em; background: rgba(183,234,18,0.1); color: var(--acc); padding: 0.1em 0.4em; border-radius: 6px; }
.hidden { display: none !important; }

/* nền */
.bg-stage { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.bg-aurora { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5; }
.bg-aurora.a1 { width: 60vw; height: 60vw; left: -18vw; top: -20vw; background: radial-gradient(circle at 40% 40%, rgba(143,184,14,0.28), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.bg-aurora.a2 { width: 55vw; height: 55vw; right: -15vw; top: 5vh; background: radial-gradient(circle at 60% 40%, rgba(212,245,69,0.18), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.bg-aurora.a3 { width: 70vw; height: 70vw; left: 15vw; bottom: -40vw; background: radial-gradient(circle at 50% 50%, rgba(183,234,18,0.1), transparent 65%); animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.08); } to { transform: translate(-5vw, 6vh) scale(0.95); } }
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%); }
.bg-noise { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 20%, transparent 40%, rgba(4,4,9,0.85) 100%); }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 3.5vw; background: linear-gradient(180deg, rgba(6,6,11,0.94), rgba(6,6,11,0.65) 75%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 0 14px rgba(183,234,18,0.25)); }
.brand-name { font-family: var(--font-d); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; }
.brand-name b { color: var(--acc); }
.topnav { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 999px; padding: 4px; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: all 0.2s; }
.nav-link .ic { width: 14px; height: 14px; }
.nav-link:hover { color: var(--text); }
.nav-link.active { background: var(--text); color: #0a0a0f; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.wallet-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; text-decoration: none; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid rgba(183,234,18,0.35); background: rgba(183,234,18,0.08); transition: all 0.2s; }
.wallet-pill:hover { background: rgba(183,234,18,0.15); }
.wallet-pill .ic { width: 15px; height: 15px; color: var(--acc); }
.wallet-pill b { font-family: var(--font-d); color: var(--acc); font-size: 15px; }
.wallet-pill span { color: var(--text-2); font-size: 12px; }
.wallet-plus { font-style: normal; font-weight: 700; background: var(--acc); color: #0a0a0f; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.userbox { position: relative; cursor: pointer; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(183,234,18,0.5); display: block; }
.user-menu { position: absolute; right: 0; top: 46px; min-width: 230px; background: rgba(18,18,28,0.98); border: 1px solid var(--stroke-2); border-radius: 14px; padding: 8px; display: none; box-shadow: 0 16px 50px rgba(0,0,0,0.6); }
.userbox.open .user-menu { display: block; }
.um-head { padding: 10px 12px; border-bottom: 1px solid var(--stroke); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.um-head b { font-size: 14px; } .um-head span { font-size: 12px; color: var(--text-3); }
.user-menu a, .user-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); text-decoration: none; background: none; border: none; font-family: var(--font); cursor: pointer; }
.user-menu a:hover, .user-menu button:hover { background: var(--panel-2); color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: 14px; border-radius: 999px; padding: 10px 20px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; user-select: none; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn .ic { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--acc); color: #0a0a0f; box-shadow: 0 4px 24px rgba(183,234,18,0.22); }
.btn-primary:hover { box-shadow: 0 6px 34px rgba(183,234,18,0.4); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--stroke); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--stroke-2); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-mini { padding: 7px 13px; font-size: 12px; border-radius: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--stroke); }
.btn-mini:hover { border-color: var(--acc); color: var(--acc); }
.btn-generate { width: 100%; padding: 17px 24px; font-size: 17px; background: linear-gradient(135deg, #f2ff7a, var(--acc) 40%, #c8e63a); color: #0a0a0f; font-weight: 700; letter-spacing: 0.02em; }

/* views */
main { min-height: 80vh; }
.view { display: none; max-width: 1380px; margin: 0 auto; padding: 4vh 3.5vw 8vh; }
.view.on { display: block; animation: fadeUp 0.35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.glass { background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--stroke); border-radius: var(--radius); backdrop-filter: blur(18px); }
.glass-strong { background: linear-gradient(160deg, rgba(24,24,36,0.97), rgba(12,12,20,0.97)); border: 1px solid var(--stroke-2); border-radius: var(--radius); }

/* hero */
.hero { max-width: 1000px; margin: 0 auto; padding: 7vh 0 6vh; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--stroke); background: var(--panel); padding: 9px 20px; border-radius: 999px; margin-bottom: 32px; }
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-title { font-family: var(--font-d); font-size: clamp(42px, 7vw, 90px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 24px; }
.hero-title em { font-style: normal; background: linear-gradient(100deg, var(--acc) 10%, var(--acc-2) 55%, var(--acc-3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { max-width: 620px; margin: 0 auto 38px; font-size: clamp(15px, 1.6vw, 18px); color: var(--text-2); line-height: 1.65; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-bottom: 60px; flex-wrap: wrap; }
.hero-stats { display: inline-flex; align-items: center; gap: 26px; padding: 18px 34px; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--panel); flex-wrap: wrap; justify-content: center; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat b { font-family: var(--font-d); font-size: 23px; color: var(--acc); }
.stat span { font-size: 11px; color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }
.stat-sep { width: 1px; height: 34px; background: var(--stroke); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.home-card { padding: 26px; text-decoration: none; transition: transform 0.2s, border-color 0.2s; display: block; }
.home-card:hover { transform: translateY(-4px); border-color: rgba(183,234,18,0.35); }
.hc-ic { font-size: 34px; margin-bottom: 14px; }
.home-card h3 { font-size: 18px; margin-bottom: 8px; }
.home-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.hc-go { font-size: 13.5px; font-weight: 600; color: var(--acc); }
.home-prices { padding: 26px; margin-top: 8px; }
.home-prices h3 { font-family: var(--font-d); margin-bottom: 16px; }
.hp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hp-chip { font-size: 13px; border: 1px solid var(--stroke); background: rgba(0,0,0,0.3); padding: 9px 15px; border-radius: 11px; color: var(--text-2); }
.hp-chip b { color: var(--acc); font-family: var(--font-d); }

/* ===== CREATE — studio bottom-bar kiểu openhiggsfield ===== */
.studio { display: flex; flex-direction: column; height: calc(100vh - 130px); position: relative; isolation: isolate; }
.studio-stage { flex: 1; overflow-y: auto; padding: 4px 4px 180px; }
.studio-stage::-webkit-scrollbar { width: 8px; }
.studio-stage::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 8px; }
.stage-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.stage-title { display: flex; align-items: center; gap: 9px; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.stage-head h2 { font-family: var(--font-d); font-size: clamp(20px, 2.4vw, 28px); }
.stage-tabs { display: flex; gap: 5px; }
.stage-tabs .mode-tab { flex: none; padding: 7px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); font-size: 12px; }
.stage-tabs .mode-tab.active { background: var(--acc); border-color: var(--acc); }
.preview-status { font-size: 12px; color: var(--text-3); padding: 5px 13px; border-radius: 999px; border: 1px solid var(--stroke); margin-left: auto; }
.preview-status.run { color: var(--acc-2); border-color: rgba(212,245,69,0.4); }

/* feed masonry */
.stage-feed { display: block; columns: 300px 4; column-gap: 16px; }
.feed-card { break-inside: avoid; margin-bottom: 16px; overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.feed-card:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.fc-media { width: 100%; background: #000; position: relative; overflow: hidden; }
.fc-media video, .fc-media img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; background: #000; }
.fc-media .ph { position: relative; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); }
.fc-media .ph .loader-ring { width: 34px; height: 34px; border-width: 2.5px; }
.fc-skel { background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.fc-status { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 7px; text-transform: uppercase; backdrop-filter: blur(8px); z-index: 2; }
.fc-status.queued, .fc-status.running { background: rgba(212,245,69,0.16); color: var(--acc-2); }
.fc-status.success { background: rgba(74,222,128,0.16); color: var(--ok); }
.fc-status.failed { background: rgba(255,93,115,0.18); color: var(--danger); }
.fc-topbtns { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.fc-icobtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--stroke-2); background: rgba(0,0,0,0.6); color: var(--text-2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.fc-icobtn:hover { color: var(--acc); border-color: var(--acc); }
.fc-icobtn.faved { color: var(--acc); border-color: var(--acc); }
.fc-prog { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); transition: width 0.6s; }
.fc-info { padding: 12px 14px; }
.fc-prompt { font-size: 12.5px; color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-3); }
.fc-acts { display: flex; gap: 8px; padding: 0 14px 13px; }
.feed-empty { text-align: center; padding: 80px 20px; color: var(--text-3); border: 1.5px dashed var(--stroke); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pe-frame { width: 64px; height: 64px; border-radius: 16px; border: 1.5px dashed var(--stroke-2); display: flex; align-items: center; justify-content: center; }
.pe-frame svg { width: 30px; height: 30px; opacity: 0.5; }
.feed-empty p { font-size: 14px; line-height: 1.7; }
.loader-ring { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(183,234,18,0.15); border-top-color: var(--acc); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== COMPOSER — bar nổi đáy kiểu openhiggsfield ===== */
.composer { flex: none; margin-top: 10px; background: linear-gradient(180deg, rgba(20,20,32,0.92), rgba(10,10,16,0.96)); border: 1px solid var(--stroke-2); border-radius: 22px; padding: 12px 14px; backdrop-filter: blur(18px); box-shadow: 0 -8px 60px rgba(0,0,0,0.5); }
.comp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comp-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.comp-refs:empty { display: none; }
.comp-refs .thumb { position: relative; width: 72px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--stroke-2); flex: none; cursor:pointer; transition:transform .18s var(--motion-out, ease),border-color .18s ease,box-shadow .18s ease; }
.comp-refs .thumb:hover{transform:translateY(-1px);border-color:rgba(183,234,18,.55)}.comp-refs .thumb.is-tagged{border-color:var(--ki-acid);box-shadow:0 0 0 2px rgba(183,234,18,.12)}
.comp-refs .thumb.is-video{background:#171922}.comp-refs .thumb video{width:100%;height:100%;object-fit:cover}.comp-refs .thumb .t-play{position:absolute;left:5px;top:5px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.65);font-size:8px;color:#fff}
.comp-refs .thumb .t-tag{position:absolute;left:4px;bottom:4px;max-width:61px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-d);font-size:8px;font-weight:700;background:rgba(0,0,0,.70);color:var(--ki-acid);padding:2px 4px;border-radius:4px; }
.comp-refs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.comp-refs .thumb .t-del { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: none; font-size: 10px; cursor: pointer; z-index:2; }
.comp-status { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.comp-input { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.4); border: 1px solid var(--stroke-2); border-radius: 22px; padding: 6px 8px 6px 14px; }
.prompt-shell{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}
.prompt-shell .ci-text{width:100%}
.prompt-editor{position:relative;flex:1;min-width:0;min-height:38px;display:flex;align-items:stretch}
.prompt-highlight{position:absolute;inset:0;overflow:hidden;white-space:pre-wrap;word-break:break-word;font:400 14.5px/1.55 var(--font);color:transparent;pointer-events:none;padding:8px 4px 8px 0}
.prompt-highlight .ph-tag{display:inline-block;margin:0 -1px;padding:2px 4px;border-radius:5px;background:rgba(183,234,18,.28);color:transparent;box-shadow:inset 0 0 0 1px rgba(183,234,18,.28);line-height:1.25}
#promptInput{position:relative;z-index:1;background:transparent;color:var(--text);caret-color:var(--acc);resize:none;overflow-y:hidden;font:400 14.5px/1.55 var(--font);padding:8px 4px 8px 0;display:block;width:100%}
.prompt-editor.focused #promptInput{min-height:110px}
@media (prefers-reduced-motion:reduce){.prompt-editor.focused #promptInput{min-height:0}}
.prompt-tag-menu{position:absolute;z-index:100;left:0;right:0;bottom:calc(100% + 11px);max-height:232px;overflow-y:auto;padding:6px;background:rgba(22,23,29,.96);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.48);backdrop-filter:blur(18px);animation:tag-menu-in .18s var(--motion-out, ease) both}
.prompt-tag-menu[hidden]{display:none!important}.prompt-tag-opt{width:100%;min-height:45px;display:flex;align-items:center;gap:9px;padding:6px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;font-family:var(--font);cursor:pointer}.prompt-tag-opt:hover{background:rgba(183,234,18,.1)}.pto-visual{display:grid;place-items:center;overflow:hidden;width:32px;height:32px;border-radius:8px;background:rgba(183,234,18,.14);color:var(--ki-acid);font-size:12px}.pto-visual img{width:100%;height:100%;object-fit:cover}.prompt-tag-opt b,.prompt-tag-opt small{display:block}.prompt-tag-opt b{font-size:12px}.prompt-tag-opt small{margin-top:1px;color:var(--text-3);font-size:10px}@keyframes tag-menu-in{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}
.comp-input:focus-within { border-color: rgba(183,234,18,0.5); box-shadow: 0 0 0 3px rgba(183,234,18,0.08); }
.ci-btn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--panel-2); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ci-btn:hover { border-color: var(--acc); color: var(--acc); }
.ci-btn svg { width: 18px; height: 18px; }
.ci-text { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font); font-size: 14.5px; }
.ci-text::placeholder { color: var(--text-3); }
.ci-send { width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; background: var(--acc); color: #0a0a0f; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ci-send:hover { box-shadow: 0 0 20px rgba(183,234,18,0.4); transform: scale(1.05); }
.ci-send svg { width: 19px; height: 19px; }
.comp-chips { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.cc-seg { display: flex; gap: 3px; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke); border-radius: 999px; padding: 3px; }
.cc-seg-btn { padding: 7px 14px; border-radius: 999px; border: none; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.cc-seg-btn.active { background: var(--acc); color: #0a0a0f; }
.cc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(0,0,0,0.28); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; user-select: none; }
.cc-chip:hover { border-color: var(--stroke-2); color: var(--text); }
.cc-chip.open { border-color: var(--acc); color: var(--acc); }
.cc-chip .cci { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.cc-chip .cc-caret { width: 14px; height: 14px; flex: none; opacity: 0.5; }
.cc-spacer { flex: 1; }
.cc-price { display: flex; align-items: baseline; gap: 7px; padding-right: 4px; }
.cc-price span:first-child { font-family: var(--font-d); font-size: 19px; font-weight: 700; color: var(--acc); }
.cc-price .gp-sub { font-size: 11px; color: var(--text-3); }

/* POPUP — model/motion/ratio/... */
.pop { position: fixed; bottom: calc(118px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(12px) scale(.975); transform-origin: 50% 100%; z-index: 75; width: min(460px, 92vw); max-height: min(64vh, 620px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; box-shadow: 0 22px 88px rgba(0,0,0,0.78); background: linear-gradient(160deg, #181824, #0c0c14); opacity: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pop.is-open { animation: pop-in .32s cubic-bezier(.16,1,.3,1) both; }
.pop.is-closing { animation: pop-out .18s cubic-bezier(.4,0,1,1) both; pointer-events: none; }
.pop[hidden] { display: none !important; }
@keyframes pop-in { from { opacity:0; filter:blur(3px); transform:translateX(-50%) translateY(16px) scale(.955); } 65% { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(-2px) scale(1.008); } to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes pop-out { from { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) scale(1); } to { opacity:0; filter:blur(2px); transform:translateX(-50%) translateY(10px) scale(.975); } }
.pop.pop-sm { width: min(360px, 90vw); }
.pop-head { padding: 13px 16px 9px; border-bottom: 1px solid var(--stroke); display: flex; align-items: center; gap: 8px; }
.pop-head b { font-size: 13px; font-family: var(--font-d); }
.pop-search { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke); border-radius: 10px; padding: 9px 13px; color: var(--text); font-family: var(--font); font-size: 13px; outline: none; }
.pop-search:focus { border-color: rgba(183,234,18,0.5); }
.pop-body { overflow-y: auto; padding: 12px; }
.pop-body::-webkit-scrollbar { width: 6px; }
.pop-body::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 8px; }
.pop-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; }
.pop-field { margin-bottom: 13px; }
.pop-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.pop-field .chip-row { margin-top: 6px; }

.model-channel-block{border-top:1px solid var(--stroke)}
.model-channel-block .pop-head{justify-content:space-between}
.pop-hint{font-size:10px;color:var(--text-3);font-weight:400}
.model-channel-block[hidden]{display:none!important}

.model-tabs { display:flex; gap:3px; padding:6px 10px; border-bottom:1px solid var(--stroke); background:rgba(255,255,255,.018); }
.model-tab { position:relative; min-height:34px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:var(--text-3); font:600 12px var(--font); cursor:pointer; transition:color .18s ease,background .18s ease,transform .18s ease; }
.model-tab:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.06)}
.model-tab.is-active{color:#10120a;background:var(--acc);box-shadow:0 5px 15px rgba(183,234,18,.16)}
.model-tab:disabled{opacity:.32;cursor:not-allowed}
.model-pane{min-height:0;animation:pane-in .22s cubic-bezier(.16,1,.3,1) both}
.model-pane[hidden]{display:none!important}
@keyframes pane-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.model-channel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 6px;border-bottom:1px solid var(--stroke)}
.model-channel-head b{font:600 13px var(--font-d)}
.channel-opt{min-height:59px;transform:translateZ(0)}
.channel-opt .channel-check{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;font:700 12px var(--font-d);color:#13150d;background:var(--acc);box-shadow:0 0 0 4px rgba(183,234,18,.08);transition:transform .2s cubic-bezier(.16,1,.3,1),opacity .16s ease}
.channel-opt:not(.on) .channel-check{opacity:0;transform:scale(.55)}
.channel-opt.on{border-color:var(--acc);background:linear-gradient(100deg,rgba(183,234,18,.12),rgba(183,234,18,.035))}
.channel-opt.on .mo-txt b{color:var(--acc)}

.model-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px 8px;color:var(--text);border:0;border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 6px;background:transparent;width:100%;text-align:left;cursor:pointer}.model-group-head>span{display:flex;flex-direction:column;gap:2px;min-width:0}.model-group-head b{font:700 12px var(--font-d);letter-spacing:.01em}.model-group-head small{color:var(--text-3);font-size:10px;white-space:normal}.model-group-head em{font:700 10px var(--font-d);color:var(--ki-acid);font-style:normal;white-space:nowrap}.model-group-head:not(:first-child){margin-top:12px}.model-group-body{animation:group-in .32s cubic-bezier(.22,1,.36,1) both;padding-bottom:8px}
@keyframes group-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.model-group-body.is-closing{animation:group-out .2s ease-in both}
@keyframes group-out{to{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.model-group-body,.model-group-body.is-closing{animation:none}}.model-group-selected{display:flex;align-items:center;gap:8px;padding:7px 4px 10px;color:var(--text-2);font-size:11px}.model-glyph-mini{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:rgba(183,234,18,.14);color:var(--ki-acid);font:800 8px var(--font-d)}

.model-opt { display: flex; align-items: center; gap: 11px; text-align: left; background: rgba(0,0,0,0.2); border: 1px solid var(--stroke); border-radius: 12px; padding: 11px 12px; cursor: pointer; font-family: var(--font); color: var(--text); transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; width: 100%; margin-bottom: 7px; }
.model-opt:hover { border-color: var(--stroke-2); transform:translateY(-1px); }
.model-opt:active { transform:translateY(0) scale(.988); }
.model-opt.on { border-color: var(--acc); background: rgba(183,234,18,0.07); }
.mo-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 7px; flex: none; }
.mo-badge.video { background: rgba(143,184,14,0.16); color: var(--acc-3); }
.mo-badge.image { background: rgba(212,245,69,0.13); color: var(--acc-2); }
.model-opt .mo-txt { flex: 1; min-width: 0; }
.model-opt .mo-txt b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-opt .mo-txt span { font-size: 11px; color: var(--text-3); font-family: var(--font-d); }
.model-opt .mo-price { font-size: 11.5px; color: var(--acc); font-family: var(--font-d); white-space: nowrap; }
.mp-loading { font-size: 12.5px; color: var(--text-3); padding: 18px 8px; text-align: center; display: block; }

/* motion list trong pop */
.motion-card { text-align: left; background: rgba(0,0,0,0.2); border: 1px solid var(--stroke); border-radius: 11px; padding: 11px; cursor: pointer; color: var(--text); font-family: var(--font); transition: all 0.15s; width: 100%; margin-bottom: 7px; display: block; }
.motion-card:hover { border-color: var(--stroke-2); }
.motion-card.on { border-color: var(--acc); background: rgba(183,234,18,0.07); }
.motion-card b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.motion-card.on b { color: var(--acc); }
.motion-card span { font-size: 11px; color: var(--text-3); line-height: 1.4; display: block; }
.motion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 7px; }

/* generic */
.mode-tab { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--stroke); cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; background: rgba(0,0,0,0.3); color: var(--text-2); transition: all 0.2s; }
.mode-tab.active { background: var(--acc); color: #0a0a0f; border-color: var(--acc); }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-family: var(--font-d); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 10px; cursor: pointer; background: rgba(0,0,0,0.3); border: 1px solid var(--stroke); color: var(--text-2); transition: all 0.15s; user-select: none; }
.chip:hover { border-color: var(--stroke-2); color: var(--text); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #0a0a0f; font-weight: 600; }
.text-in, .select-in { width: 100%; font-family: var(--font); font-size: 14px; color: var(--text); background: rgba(0,0,0,0.32); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.text-in:focus, .select-in:focus { border-color: rgba(183,234,18,0.55); box-shadow: 0 0 0 3px rgba(183,234,18,0.1); }
.text-in.prompt { resize: vertical; min-height: 92px; line-height: 1.55; }
.select-in { appearance: none; padding-right: 38px; cursor: pointer; }
.select-in option { background: #12121c; }
.gp-sub { font-size: 11.5px; color: var(--text-3); }

/* pages */
.page-head { margin-bottom: 30px; }
.page-head h2 { font-family: var(--font-d); font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 8px; }
.page-sub { color: var(--text-2); font-size: 14px; }
.sec-title { font-family: var(--font-d); font-size: 20px; margin: 34px 0 18px; }

/* pricing tabs */
.pt-tabs { display: flex; gap: 6px; margin: 14px 0 18px; }
.pt-tabs .mode-tab { flex: none; padding: 9px 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); }
.pt-tabs .mode-tab.active { background: var(--acc); border-color: var(--acc); }
.price-sec { margin-bottom: 26px; }
.price-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.price-sec-head h4 { font-family: var(--font-d); font-size: 16px; }
.price-sec-head .pc-id { font-family: var(--font-d); font-size: 11.5px; color: var(--text-3); }
.price-sec-head .pc-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 9px; border-radius: 999px; background: rgba(212,245,69,0.12); color: var(--acc-2); }
.chan-block { margin-bottom: 10px; }
.chan-block .chan-name { font-size: 12px; color: var(--text-2); margin-bottom: 7px; }
.chan-name .star { color: var(--acc); }
table.ptbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ptbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 7px 10px; border-bottom: 1px solid var(--stroke); }
table.ptbl td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
table.ptbl tr:hover td { background: rgba(255,255,255,0.02); }
table.ptbl .d { font-family: var(--font-d); color: var(--text-2); }
table.ptbl .vnd { font-family: var(--font-d); font-weight: 700; color: var(--acc); text-align: right; }
table.ptbl .cost { color: var(--text-3); font-size: 12px; }

/* pricing (cards cũ) */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 22px; }
.pkg-card { padding: 26px 24px; position: relative; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s, border-color 0.2s; }
.pkg-card:hover { transform: translateY(-4px); border-color: rgba(183,234,18,0.4); }
.pkg-card.hot { border-color: rgba(183,234,18,0.45); box-shadow: 0 8px 44px rgba(183,234,18,0.1); }
.pkg-tag { position: absolute; top: -11px; right: 18px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; background: var(--acc); color: #0a0a0f; padding: 3px 12px; border-radius: 999px; }
.pkg-card h3 { font-size: 16px; }
.pkg-credits { font-family: var(--font-d); font-size: 38px; font-weight: 700; color: var(--acc); }
.pkg-credits small { font-size: 14px; color: var(--text-2); font-weight: 400; }
.pkg-price { font-size: 15px; color: var(--text-2); }
.pkg-per { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.payg { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.payg h3 { font-size: 17px; } .payg p { font-size: 13px; color: var(--text-2); }
.payg-form { display: flex; gap: 10px; }
.payg-form .text-in { max-width: 320px; }
.payg-preview { font-size: 13.5px; color: var(--acc-2); }
.price-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.price-card { padding: 22px; }
.price-card h4 { font-size: 15px; margin-bottom: 4px; }
.price-card .pc-id { font-family: var(--font-d); font-size: 11px; color: var(--text-3); margin-bottom: 14px; display: block; }
.pt-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--stroke); font-size: 13px; }
.pt-row span:first-child { color: var(--text-2); font-family: var(--font-d); }
.pt-row b { color: var(--acc); font-family: var(--font-d); }
.pt-row small { color: var(--text-3); font-weight: 400; }

/* gallery page */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gal-empty { text-align: center; padding: 60px 20px; color: var(--text-3); border: 1.5px dashed var(--stroke); border-radius: var(--radius); }

/* wallet */
.wallet-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.wallet-card { padding: 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wc-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.wc-bal { font-family: var(--font-d); font-size: 46px; color: var(--acc); }
.wc-bal small { font-size: 16px; color: var(--text-2); }
.wc-vnd { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.topup-card, .ledger-card { padding: 24px; }
.topup-card h3, .ledger-card h3 { font-family: var(--font-d); font-size: 16px; margin-bottom: 16px; }
.ledger-card { margin-top: 0; }
.topup-list, .ledger-list { display: flex; flex-direction: column; }
.tu-row, .lg-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 13px; }
.tu-row .tu-l b, .lg-row .lg-l b { display: block; font-size: 13px; }
.tu-row .tu-l span, .lg-row .lg-l span { font-size: 11.5px; color: var(--text-3); }
.pill { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.pill.pending { background: rgba(183,234,18,0.13); color: var(--acc); }
.pill.paid, .pill.success { background: rgba(74,222,128,0.13); color: var(--ok); }
.pill.failed, .pill.expired, .pill.cancelled { background: rgba(255,93,115,0.13); color: var(--danger); }
.lg-plus { color: var(--ok); font-family: var(--font-d); font-weight: 700; }
.lg-minus { color: var(--danger); font-family: var(--font-d); font-weight: 700; }

/* admin */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.admin-tabs .mode-tab { flex: none; padding: 9px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); }
.admin-tabs .mode-tab.active { background: var(--acc); border-color: var(--acc); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 18px; }
.kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); display: block; margin-bottom: 6px; }
.kpi b { font-family: var(--font-d); font-size: 24px; color: var(--text); }
.kpi b.green { color: var(--ok); } .kpi b.yellow { color: var(--acc); }
.chart-card { padding: 24px; margin-bottom: 16px; }
.chart-card h3 { font-family: var(--font-d); font-size: 15px; margin-bottom: 16px; }
.chart-card h4.mt { margin: 22px 0 12px; font-size: 14px; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--stroke); }
table.tbl td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
table.tbl tr:hover td { background: rgba(255,255,255,0.02); }
.tbl .mono { font-family: var(--font-d); font-size: 11.5px; }
.tbl .dim { color: var(--text-3); }
/* Bảng admin: cuộn ngang trên màn hẹp, ghim cột đầu tiên */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px 6px; }
.tbl-wrap > table.tbl { width: max-content; min-width: 100%; }
.tbl-wrap > table.tbl th:first-child, .tbl-wrap > table.tbl td:first-child {
  position: sticky; left: 0; z-index: 2; background: #1e1e20;
  box-shadow: 1px 0 0 rgba(255,255,255,0.08);
}
.tbl-wrap > table.tbl th:first-child { z-index: 3; }
/* Bay từ nút gửi lên hàng đợi */
.fly-dot { position: fixed; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; z-index: 9999; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f2ffa1, var(--acc) 55%, #7a9a0c);
  box-shadow: 0 0 16px 4px rgba(183,234,18,.55), 0 0 42px 10px rgba(183,234,18,.16); }
/* Logo loading cho job đang chạy */
.ki-loader { position: relative; width: 160px; height: 160px; background: transparent; border-radius: 50%; overflow: hidden; }
.ki-loader video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; transform: scale(1.8); transform-origin: center; }
.ki-loader::before, .ki-loader::after { display: none; }
@keyframes ki-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(.93); } }
@keyframes ki-glow { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ki-loader img, .ki-loader::before, .ki-loader::after { animation: none; }
}
/* Card giá model cho mobile */
.amodel-cards { display: none; }
@media (max-width: 640px) {
  #atab-models .tbl-wrap { display: none; }
  .amodel-cards { display: grid; gap: 10px; }
  .amodel-card { padding: 13px 15px; }
  .amodel-card .green { color: var(--ok); }
  .amc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  .amc-title b { display: block; font-size: 14px; margin-bottom: 2px; }
  .amc-title .mono { font-size: 11px; }
  .amc-btns { display: flex; gap: 6px; flex-shrink: 0; }
  .amc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .amc-grid > div { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 8px 10px; min-width: 0; }
  .amc-grid span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 3px; }
  .amc-grid b { font-size: 13px; font-family: var(--font-d); overflow-wrap: break-word; }
  .amc-grid i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 2px; }
}
.tbtn { font-size: 11.5px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--stroke-2); background: var(--panel-2); color: var(--text); cursor: pointer; font-family: var(--font); }
.tbtn:hover { border-color: var(--acc); color: var(--acc); }
.tbtn.danger:hover { border-color: var(--danger); color: var(--danger); }
.admin-search { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-search .text-in { max-width: 320px; padding: 9px 12px; font-size: 13px; }
.cfg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cfg-item label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.cfg-item .text-in { padding: 10px 12px; font-size: 13px; }
.cfg-item small { display: block; font-size: 11px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
.cfg-form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#cfgMsg { font-size: 13px; }
#cfgMsg.ok { color: var(--ok); } #cfgMsg.err { color: var(--danger); }
.pkg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pkg-form .text-in { padding: 10px 12px; font-size: 13px; }

/* footer */
.foot { padding: 26px 3.5vw 40px; border-top: 1px solid var(--stroke); font-size: 12px; color: var(--text-3); text-align: center; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(3,3,8,0.72); backdrop-filter: blur(8px); padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 440px; padding: 28px; background:rgba(28,28,30,.55); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,.08); border-radius:18px; }
.modal h3 { font-family: var(--font-d); font-size: 20px; margin-bottom: 8px; }
.modal-sub { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 16px; }
.modal-row { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.pay-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-qr { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pay-qr img { width: 240px; border-radius: 12px; border: 1px solid var(--stroke-2); }
.pay-bank { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.pay-status { font-size: 13px; color: var(--acc-2); }
.pay-status.paid { color: var(--ok); font-weight: 700; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: rgba(2,2,6,0.92); backdrop-filter: blur(10px); padding: 4vh 4vw; }
.lightbox[hidden] { display: none; }
.lb-content { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-content video, .lb-content img { max-width: 92vw; max-height: 78vh; border-radius: 12px; }
.lb-prompt { font-size: 13px; color: var(--text-2); max-width: 640px; text-align: center; line-height: 1.6; }
.lb-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--stroke-2); color: var(--text); font-size: 17px; cursor: pointer; }
.lb-close:hover { background: var(--danger); }

/* toast */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { font-size: 13.5px; font-weight: 500; padding: 12px 22px; border-radius: 12px; background: rgba(20,20,30,0.95); border: 1px solid var(--stroke-2); box-shadow: 0 8px 40px rgba(0,0,0,0.5); animation: toastIn 0.25s ease; max-width: 90vw; text-align: center; }
.toast.ok { border-color: rgba(74,222,128,0.5); } .toast.err { border-color: rgba(255,93,115,0.5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .create-layout { grid-template-columns: 1fr; }
  .cfg { position: static; max-height: none; }
  .admin-2col, .wallet-layout { grid-template-columns: 1fr; }
  .topnav { display: none; }
}
@media (max-width: 560px) {
  .cfg-row2 { grid-template-columns: 1fr; }
  .payg-form { flex-direction: column; }
  .payg-form .text-in { max-width: none; }
}

/* Apple-inspired pricing refinement: quiet surfaces, clear hierarchy, responsive cards */
#btnPricingDetails { display: block; margin: 0 0 16px; }
#pricingDetails[hidden] { display: none !important; }
#ptVideo, #ptImage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
}
#ptVideo[hidden], #ptImage[hidden] { display: none !important; }
.price-card-apple {
  min-width: 0;
  overflow: hidden;
  padding: 20px 21px 8px;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(31,32,39,.96), rgba(22,23,29,.96));
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.price-card-apple:hover { border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
.price-card-apple.is-unlimited { border-color: rgba(183,234,18,.28); }
.price-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 16px; }
.price-card-kicker { min-height: 21px; margin-bottom: 4px; }
.price-card-top h4 { color: var(--text); font-size: 15px; line-height: 1.38; font-weight: 650; letter-spacing: -.015em; }
.price-card-id { display: inline-block; margin-top: 4px; color: var(--text-3); font: 11px var(--font-d); overflow-wrap: anywhere; }
.price-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-2); font-size: 10px; font-weight: 650; letter-spacing: .035em; }
.price-tag-unlimited { background: rgba(183,234,18,.12); color: var(--acc); }
.price-card-hero { flex: none; color: var(--acc); text-align: right; font: 700 20px/1.1 var(--font-d); white-space: nowrap; }
.price-card-hero small { display: block; margin-top: 5px; color: var(--text-3); font: 500 10px var(--font); letter-spacing: .02em; }
.price-card-note { margin: -7px 0 12px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.price-rows { border-top: 1px solid rgba(255,255,255,.075); }
.price-row { display: grid; grid-template-columns: minmax(70px,1fr) auto auto; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid rgba(255,255,255,.055); }
.price-row-label { min-width: 0; color: var(--text-2); font-size: 12px; line-height: 1.35; }
.price-row-label small { display: block; margin-top: 3px; color: var(--text-3); font-size: 10px; overflow-wrap: anywhere; }
.price-row-cost { color: var(--text-3); font: 11px var(--font-d); white-space: nowrap; }
.price-row strong { color: var(--text); font: 650 13px var(--font-d); white-space: nowrap; text-align: right; }
.price-row strong small { color: var(--text-3); font: 10px var(--font); }
.price-empty { padding: 12px 0; color: var(--text-3); font-size: 12px; }
#ptTabs { display: inline-flex; padding: 4px; gap: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); margin: 0 0 18px; }
#ptTabs .mode-tab { flex: none; min-width: 104px; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 13px; }
#ptTabs .mode-tab.active { background: rgba(255,255,255,.11); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
#unlimitedBox { margin: 22px 0 30px; padding: 22px 24px; border-radius: 20px; border-color: rgba(183,234,18,.23); background: linear-gradient(135deg, rgba(183,234,18,.055), rgba(255,255,255,.025) 55%); box-shadow: none; }
#unlimitedBox h3 { font-size: 18px; letter-spacing: -.02em; }
#unlimitedBox #unlimitedPrice { color: var(--acc); font-variant-numeric: tabular-nums; }
#unlimitedBox p { max-width: 720px; line-height: 1.55; }
#unlimitedBox .payg-form { margin-top: 8px; }
#unlimitedBox .btn-primary { min-height: 44px; padding-inline: 22px; }
#pkgGrid { gap: 12px; }
#pkgGrid .pkg-card { border-radius: 18px; background: rgba(255,255,255,.035); box-shadow: none; }
#pkgGrid .pkg-card.hot { border-color: rgba(183,234,18,.32); }
@media (max-width: 560px) {
  .price-card-apple { padding: 17px 16px 6px; border-radius: 16px; }
  .price-row { grid-template-columns: minmax(64px,1fr) auto; gap: 8px; }
  .price-row-cost { display: none; }
  .price-row strong { font-size: 12px; }
  #ptTabs { width: 100%; }
  #ptTabs .mode-tab { flex: 1; }
  #unlimitedBox { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .price-card-apple { transition: none; }
}
.model-search { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.32); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 0 12px; }
.model-search .flic { flex: none; }
.model-search .text-in { border: none; background: transparent; padding: 10px 0; }
.model-search .text-in:focus { box-shadow: none; }
.model-search:focus-within { border-color: rgba(183,234,18,0.55); }
.prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* masonry feed — khổ thật của media, mới nhất trước */
.feed-grid { display: block; columns: 280px 3; column-gap: 16px; }
.feed-card { break-inside: avoid; margin-bottom: 16px; }
.fc-media { width: 100%; background: #000; position: relative; overflow: hidden; min-height: 120px; }
.fc-media video, .fc-media img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; background: #000; }
.fc-media .ph { min-height: 220px; position: relative; }
.fc-skel { background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.fc-topbtns { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.fc-icobtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--stroke-2); background: rgba(0,0,0,0.6); color: var(--text-2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.fc-icobtn:hover { color: var(--acc); border-color: var(--acc); }
.fc-icobtn.faved { color: var(--acc); border-color: var(--acc); }

/* gallery tabs */
.gal-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.gal-tabs .mode-tab { flex: none; padding: 9px 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); }
.gal-tabs .mode-tab.active { background: var(--acc); border-color: var(--acc); }

.lb-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lb-meta { font-size: 12px; color: var(--text-3); }

/* ===== KI STUDIO — project library / liquid glass ===== */
:root{--ki-acid:#b7ea12;--ki-bg:#101114;--ki-line:rgba(255,255,255,.10)}
body{background:var(--ki-bg)}
.bg-stage{background:radial-gradient(circle at 78% -10%,rgba(183,234,18,.13),transparent 30%),radial-gradient(circle at 15% 110%,rgba(72,105,255,.09),transparent 38%),#101114}
.bg-grid,.bg-noise{opacity:0}.bg-vignette{background:radial-gradient(ellipse 95% 75% at 50% 0%,transparent 5%,rgba(8,9,11,.65) 100%)}
.topbar{padding:10px max(16px,3vw);background:rgba(17,18,21,.64);border-bottom-color:rgba(255,255,255,.075);backdrop-filter:saturate(155%) blur(24px);-webkit-backdrop-filter:saturate(155%) blur(24px)}
.brand{gap:9px}.brand-mark{width:34px;height:34px;overflow:hidden;border-radius:9px;background:var(--ki-acid);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 12px rgba(183,234,18,.2)}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.brand-name{font-family:var(--font);font-size:14px;font-weight:750;letter-spacing:-.02em}.brand-name b{color:var(--ki-acid)}
.topnav{background:rgba(255,255,255,.055);border-color:var(--ki-line);backdrop-filter:blur(16px)}.nav-link{font-size:13px;padding:8px 15px}.nav-link.active{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.1)}
.wallet-pill{background:rgba(183,234,18,.09);border-color:rgba(183,234,18,.33)}.wallet-pill .ic,.wallet-pill b{color:var(--ki-acid)}.wallet-plus,.btn-primary,.ci-send{background:var(--ki-acid);color:#11130d;box-shadow:0 6px 18px rgba(183,234,18,.17)}
/* Discover library */
#view-home{max-width:1800px;padding:0;min-height:calc(100vh - 58px)}.project-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100vh - 58px)}.project-sidebar{position:sticky;top:58px;height:calc(100vh - 58px);padding:18px 12px;border-right:1px solid rgba(255,255,255,.07);background:rgba(17,18,21,.44);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;flex-direction:column}.project-new,.project-side-link{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:12px;color:rgba(255,255,255,.79);font-size:13px;font-weight:600;text-decoration:none;transition:background .18s ease,color .18s ease,transform .18s ease}.project-new{color:#f9faf7;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.075);margin-bottom:13px}.project-new:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}.project-new span{width:22px;height:22px;border-radius:8px;background:rgba(183,234,18,.18);color:var(--ki-acid);display:grid;place-items:center;font-size:19px;font-weight:400;line-height:1}.project-side-links{display:grid;gap:3px}.project-side-link:hover,.project-side-link.active{background:rgba(255,255,255,.075);color:#fff}.ps-icon{color:var(--ki-acid);width:18px;text-align:center;font-size:16px}.project-side-foot{margin-top:auto;padding:14px 10px;border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.065);display:flex;gap:10px;align-items:center}.side-orb{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;color:#121315;background:var(--ki-acid);font-size:10px;font-weight:800}.project-side-foot p{font-size:11px;line-height:1.35;color:var(--text-3)}.project-side-foot b{color:var(--text);font-size:12px}.project-side-foot span{display:inline-block;margin-top:2px}
.project-library{padding:clamp(24px,4vw,54px);min-width:0}.library-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:28px}.library-eyebrow{color:var(--ki-acid);display:block;margin-bottom:7px;font:700 10px/1 var(--font-d);letter-spacing:.16em}.library-head h1{font:650 clamp(28px,3vw,42px)/1.08 var(--font);letter-spacing:-.05em}.library-create{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;color:#121315;background:var(--ki-acid);border-radius:13px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.library-create:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(183,234,18,.22)}.library-create span{font-size:18px;font-weight:400}.library-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;margin:0 -4px 25px;padding:4px;scrollbar-width:none}.library-tabs::-webkit-scrollbar{display:none}.library-tab{border:0;min-height:36px;padding:0 13px;border-radius:10px;color:var(--text-3);background:transparent;font:500 12.5px var(--font);cursor:pointer;white-space:nowrap;transition:.18s ease}.library-tab:hover{color:var(--text);background:rgba(255,255,255,.05)}.library-tab.active{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.1)}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}.project-tile{min-width:0;cursor:pointer}.project-tile[hidden]{display:none}.project-visual{position:relative;aspect-ratio:1.7/1;overflow:hidden;border-radius:15px;background:#202228;box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 12px 35px rgba(0,0,0,.20);transform:translateZ(0);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}.project-tile:hover .project-visual{transform:translateY(-3px) scale(1.008);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 18px 42px rgba(0,0,0,.34)}.project-tile:focus-visible{outline:3px solid var(--ki-acid);outline-offset:4px;border-radius:16px}.project-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 4px 0}.project-copy b{display:block;color:#f4f5f1;font-size:13px;line-height:1.35}.project-copy span{display:block;margin-top:3px;color:var(--text-3);font-size:11px}.project-copy em{padding-top:1px;color:rgba(255,255,255,.42);font:500 10px var(--font);font-style:normal;white-space:nowrap}
/* Project preview art direction (no external image dependency) */
.pv-handbag{background:linear-gradient(128deg,#efe9df 0%,#dcc8ad 58%,#7a6a5b 100%)}.pv-handbag:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.8),transparent 26%),linear-gradient(110deg,transparent 40%,rgba(33,84,57,.34))}.pv-bag{position:absolute;left:48%;top:48%;width:30%;height:32%;border-radius:43% 43% 36% 36%;background:#176440;box-shadow:inset 0 -15px 18px rgba(0,0,0,.2),0 12px 20px rgba(0,0,0,.23);transform:rotate(-9deg);font-size:0}.pv-bag:after{content:'';position:absolute;width:60%;height:75%;top:-55%;left:21%;border:7px solid #153b29;border-bottom:0;border-radius:55% 55% 0 0}.pv-sun{position:absolute;width:120px;height:120px;border-radius:50%;top:-45px;left:15%;background:rgba(255,255,255,.66);filter:blur(14px)}
.pv-diagram{background:#f4f4f1;color:#202226}.pv-diagram:before{content:'';position:absolute;inset:-30%;background:repeating-radial-gradient(circle at 50% 45%,transparent 0 24px,rgba(30,30,30,.05) 25px 26px)}.diag-title{position:absolute;top:11%;width:100%;text-align:center;font:700 clamp(12px,1.4vw,19px)/1 var(--font-d)}.diag-line{position:absolute;height:15%;background:#fff;border-radius:4px;box-shadow:0 4px 10px rgba(21,43,75,.18);border-left:4px solid #6a91cf}.diag-line.a{width:37%;left:8%;top:39%}.diag-line.b{width:42%;right:8%;top:49%;border-left-color:#4e72ab}.diag-line.c{width:28%;left:22%;top:68%;border-left-color:#d49d61}.diag-line.d{width:31%;right:21%;top:70%;border-left-color:#d56676}
.pv-horse{background:linear-gradient(160deg,#1e2939 0%,#5d3e38 58%,#d77f43 100%)}.horse-sun{position:absolute;width:100px;height:100px;border-radius:50%;right:20%;top:-24px;background:#f6ab52;filter:blur(10px)}.horse-body{position:absolute;left:36%;bottom:8%;font-size:clamp(80px,11vw,160px);color:#211d20;line-height:1;text-shadow:0 12px 0 #18171b}.horse-ground{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(transparent,rgba(12,12,15,.65))}
.pv-ugc{background:linear-gradient(138deg,#f8d9c4 0%,#ffe8d9 50%,#e5b69a 100%)}.ugc-person{position:absolute;right:25%;bottom:-10%;width:31%;height:74%;border-radius:55% 55% 18% 18%;background:linear-gradient(#35221f 0 32%,#ec9f7b 33% 48%,#f7c6d2 49%)}.ugc-phone{position:absolute;left:11%;top:18%;padding:9px 12px;background:rgba(255,255,255,.86);color:#222;font:800 10px var(--font-d);transform:rotate(-5deg)}.ugc-copy{position:absolute;left:8%;bottom:11%;color:#322521;font:800 clamp(18px,3vw,36px)/.85 var(--font-d)}
.pv-red{display:flex;align-items:flex-start;padding:11% 8%;background:#f20920;color:#fff;font:800 clamp(18px,2.5vw,32px)/1 var(--font-d)}.pv-red i{position:absolute;width:20%;aspect-ratio:1;border-radius:8px;background:#f7eee1;right:18%;top:20%;box-shadow:0 8px 18px rgba(0,0,0,.24)}.pv-red i+i{right:32%;top:57%;width:13%;background:#f1d1b0}
.pv-pool{background:linear-gradient(145deg,#128cb7,#66d6ef 52%,#a7ecf5)}.pool-ripple{position:absolute;width:70%;aspect-ratio:1;border:2px solid rgba(255,255,255,.6);border-radius:50%;left:12%;top:10%;box-shadow:0 0 0 20px rgba(255,255,255,.11),0 0 0 45px rgba(255,255,255,.07)}.pool-person{position:absolute;width:22%;height:63%;bottom:-10%;left:45%;border-radius:50% 50% 15% 15%;background:linear-gradient(#201616 0 20%,#e8b28f 21% 35%,#f2a7bb 36%);transform:rotate(18deg)}
.pv-portrait{background:linear-gradient(150deg,#b7b8c4,#1b1c23 72%)}.portrait-disc{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;right:12%;top:15%;background:radial-gradient(circle at 30% 30%,#f2f5dd,transparent 30%),#b0df45}.portrait-figure{position:absolute;width:28%;height:78%;bottom:-6%;left:38%;border-radius:47% 47% 10% 10%;background:linear-gradient(#1a1516 0 30%,#d9a98c 31% 45%,#181a20 46%)}
.pv-analysis{background:linear-gradient(135deg,#f3ece2,#c7b8a4)}.analysis-screen{position:absolute;left:16%;right:16%;top:12%;bottom:18%;border-radius:12px;background:linear-gradient(145deg,#202023,#513e31);box-shadow:0 9px 22px rgba(0,0,0,.28)}.analysis-lamp{position:absolute;width:25%;height:10%;bottom:9%;right:13%;border-radius:50%;background:var(--ki-acid);box-shadow:0 0 22px rgba(183,234,18,.55)}
@media(max-width:1100px){.project-shell{grid-template-columns:1fr}.project-sidebar{position:static;height:auto;display:flex;flex-direction:row;align-items:center;gap:8px;padding:10px max(16px,3vw);border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.project-new{margin:0}.project-side-links{display:flex}.project-side-foot{display:none}.project-side-link{font-size:12px;padding:0 9px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.project-library{padding:24px 16px 38px}.library-head{align-items:flex-start;margin-bottom:19px}.library-head h1{font-size:30px}.library-create{min-height:38px;padding:0 11px;font-size:0}.library-create span{font-size:20px}.project-grid{grid-template-columns:1fr;gap:22px}.project-visual{border-radius:14px}.project-sidebar{overflow-x:auto}.project-side-links{display:none}.project-new{min-width:132px}.brand-text{display:none}.topbar{padding:9px 12px}.top-actions{gap:5px}.wallet-pill{padding:7px 9px}.wallet-pill span{display:none}}
@media(prefers-reduced-motion:reduce){.project-visual,.project-new,.library-create{transition:none}}
/* KI model identity glyphs */
.mo-glyph{width:32px;height:32px;flex:none;display:inline-grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.12);color:#f4f5ef;font:800 9px/1 var(--font-d);letter-spacing:-.06em;box-shadow:inset 0 1px rgba(255,255,255,.13)}
.mo-glyph.is-video{background:linear-gradient(145deg,rgba(143,112,255,.45),rgba(64,43,142,.32));color:#f5efff}.mo-glyph.is-image{background:linear-gradient(145deg,rgba(33,185,144,.40),rgba(19,91,75,.31));color:#e8fff8}.mo-glyph.is-unlimited{background:linear-gradient(145deg,rgba(183,234,18,.42),rgba(119,151,0,.26));color:#161a08}
.model-opt{gap:9px}.model-opt .mo-txt{margin-left:1px}.model-opt .mo-badge{padding:3px 6px;font-size:8px}
.project-real-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#17181d}
.model-tabs,.model-pane,.model-channel-head,.model-channel-block{display:none!important}
#popChannel{width:min(400px,92vw)}

.cc-chip{font-family:var(--font);appearance:none;-webkit-appearance:none;outline:none}.cc-chip:focus-visible{outline:2px solid var(--ki-acid);outline-offset:2px}.pop{pointer-events:auto}.composer{position:relative;z-index:10}

:root{--motion-out:cubic-bezier(.16,1,.3,1);--motion-in:cubic-bezier(.4,0,1,1)}
.glass{transition:transform .25s var(--motion-out),border-color .25s ease,box-shadow .25s ease}
.home-card:hover,.pkg-card:hover,.price-card-apple:hover{transform:translateY(-3px);border-color:rgba(183,234,18,.28);box-shadow:0 15px 35px rgba(0,0,0,.24)}
.cc-chip{transition:transform .18s var(--motion-out),border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease}
.cc-chip:hover{transform:translateY(-1px)}.cc-chip:active{transform:translateY(0) scale(.97)}
.cc-chip.open{box-shadow:0 0 0 3px rgba(183,234,18,.08),0 8px 18px rgba(0,0,0,.19)}
.btn-primary{transition:transform .18s var(--motion-out),box-shadow .18s ease,filter .18s ease}.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 10px 25px rgba(183,234,18,.25)}.btn-primary:active{transform:translateY(0) scale(.98)}
.ci-send{transition:transform .2s var(--motion-out),box-shadow .2s ease}.ci-send:active{transform:scale(.9)}
.composer{transition:border-color .24s ease,box-shadow .24s ease}.composer:focus-within{border-color:rgba(183,234,18,.34);box-shadow:0 -8px 60px rgba(0,0,0,.5),0 0 0 3px rgba(183,234,18,.045)}
.feed-card{animation:feed-reveal .38s var(--motion-out) both}.feed-card:nth-child(2){animation-delay:.035s}.feed-card:nth-child(3){animation-delay:.07s}.feed-card:nth-child(4){animation-delay:.105s}@keyframes feed-reveal{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Không ép transform ở đây: animation fill-mode giữ đúng trạng thái cuối
     theo từng breakpoint (desktop: translateX(-50%), mobile: bottom-sheet). */
  .pop{filter:none!important}
}

/* Persistent admin announcement */
.announce-bar{position:sticky;top:0;z-index:80;min-height:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:7px 48px;background:linear-gradient(90deg,rgba(183,234,18,.96),rgba(228,255,79,.93),rgba(183,234,18,.96));color:#11140b;font-size:12px;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 18px rgba(0,0,0,.2)}.announce-bar.hidden{display:none!important}.announce-bar span{white-space:nowrap;animation:announce-scroll 20s linear infinite}@keyframes announce-scroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.user-admin-hint{margin:8px 0 14px;color:var(--text-3);font-size:12px}
/* Emergency UX reset: keep logo and restored landing within their intended bounds. */
.brand-mark{width:34px!important;height:34px!important;flex:0 0 34px!important;overflow:hidden!important}.brand-mark img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important}
#view-home{max-width:1380px!important;margin:0 auto!important;padding:4vh 3.5vw 8vh!important;min-height:0!important}.hero{max-width:1000px!important;margin:0 auto!important;padding:7vh 0 6vh!important;text-align:center!important}


/* ============================================================
   Responsive 2026-10-13 — mobile / iPad / desktop đều xài được
   (mobile-first theo UX guidelines: touch target ≥44px, safe-area,
   popup dạng bottom-sheet trên điện thoại)
   ============================================================ */

/* --- thanh điều hướng đáy cho tablet & mobile (thay topnav bị ẩn) --- */
@media (max-width: 1080px) {
  .topnav {
    display: flex;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    justify-content: space-around;
    gap: 2px;
    padding: 6px;
    background: rgba(17,18,22,0.9);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border: 1px solid var(--stroke-2);
    border-radius: 20px;
    box-shadow: 0 12px 44px rgba(0,0,0,0.55);
  }
  .topnav .nav-link {
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px 4px 7px;
    font-size: 10.5px;
    border-radius: 14px;
    white-space: nowrap;
  }
  .topnav .nav-link .ic { width: 20px; height: 20px; }
  .topnav .nav-link.active { background: rgba(183,234,18,0.14); color: var(--ki-acid); box-shadow: none; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .toast-wrap { bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* --- popup thành bottom-sheet trên điện thoại --- */
@media (max-width: 640px) {
  .pop {
    left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto; max-width: none;
    transform: none;
    max-height: min(80dvh, 660px);
    border-radius: 20px;
  }
  .pop.is-open { animation: pop-in-m 0.3s cubic-bezier(.16,1,.3,1) both; }
  .pop.is-closing { animation: pop-out-m 0.18s ease both; }
  @keyframes pop-in-m { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes pop-out-m { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(20px) scale(0.98); } }
}

/* --- touch target ≥44px (iOS) / 48dp (Android), chống iOS auto-zoom --- */
.cc-chip { min-height: 44px; }
.chip { min-height: 44px; }
.model-group-head { min-height: 46px; }
@media (pointer: coarse) {
  .fc-icobtn { width: 40px; height: 40px; font-size: 16px; }
  .tbtn { padding: 9px 15px; font-size: 12.5px; }
  .model-opt { padding: 13px 12px; }
  .nav-link { min-height: 44px; }
  .pop-search, .text-in, .select-in { font-size: 16px; }
  .chip-row, .comp-chips { gap: 8px; }
}

/* --- safe-area cho tai thỏ / thanh gesture --- */
.topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.composer { margin-bottom: env(safe-area-inset-bottom); }
.modal-backdrop { padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.lightbox { padding: max(4vh, env(safe-area-inset-top)) 4vw max(4vh, env(safe-area-inset-bottom)); }

/* --- chiều cao theo viewport động (trình duyệt mobile co giãn thanh địa chỉ) --- */
.studio { height: calc(100dvh - 130px); }
main { min-height: 80dvh; }

/* --- bảng giá không tràn màn hình nhỏ --- */
@media (max-width: 640px) {
  .chan-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.ptbl { min-width: 560px; }
  .price-sec { overflow: hidden; }
  .stage-feed, .feed-grid { columns: 2; column-gap: 12px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .admin-2col { grid-template-columns: 1fr; }
}

/* --- iPad (portrait) & tablet nhỏ: popup rộng vừa, studio thoáng --- */
@media (min-width: 641px) and (max-width: 1080px) {
  .pop { width: min(540px, 94vw); }
  #popChannel { width: min(460px, 94vw); }
  .studio { height: calc(100dvh - 150px); }
  .view { padding-left: 4vw; padding-right: 4vw; }
}

/* --- màn hình lớn: giới hạn chiều rộng popup, feed nhiều cột --- */
@media (min-width: 1440px) {
  .stage-feed { columns: 320px 5; }
  .pop { width: min(500px, 92vw); }
}

/* ============================================================
   ARTLIST RE-THEME (2026-10-14) — theo ngôn ngữ Artlist AI
   1 accent màu brand #b7ea12 · serif editorial · hairline · pill CTA
   ============================================================ */
:root{
  --font-serif:'Playfair Display','Be Vietnam Pro',Georgia,serif;
  --art-line:rgba(255,255,255,.09);
}

/* --- 1. nền lặng: bỏ aurora/grid/noise --- */
.bg-aurora,.bg-grid,.bg-noise{ display:none !important; }
.bg-stage{ background:#171717; }
.bg-vignette{ background:radial-gradient(ellipse 110% 80% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* --- 2. topbar 72px kiểu Artlist (chỉ desktop; mobile giữ bottom bar) --- */
.topbar{ min-height:72px; padding:0 3.5vw; background:rgba(12,12,14,.55); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.06); }
.brand-mark{ background:transparent; box-shadow:none; border-radius:50%; }
.brand-mark img{ border-radius:50%; }
.brand-name{ font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:.05em; }
@media (min-width:1081px){
  .topnav{ background:transparent; border:none; padding:0; gap:2px; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav-link{ color:rgba(255,255,255,.62); padding:10px 14px; border-radius:0; font-size:13.5px; }
  .nav-link:hover{ color:#fff; text-shadow:0 0 16px rgba(255,255,255,.55); }
  .nav-link.active{ background:none; color:#fff; box-shadow:inset 0 -2px 0 #b7ea12; border-radius:0; }
}

/* --- 3. nút CTA pill vàng glossy --- */
.btn{ border-radius:40px; }
.btn-primary,.btn-generate,.ci-send,.library-create{
  background:radial-gradient(115% 175% at 50% 118%, #d4f545 0%, #b7ea12 42%, #9fc414 78%, #8fb80e 100%);
  color:#171717; border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(70,90,0,.28), inset 3px 0 8px rgba(255,255,255,.14), inset -3px 0 8px rgba(255,255,255,.14);
}
.btn-primary:hover,.btn-generate:hover,.ci-send:hover,.library-create:hover{
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(70,90,0,.28), 0 2px 26px rgba(183,234,18,.5);
}
.btn-primary:active,.btn-generate:active{ transform:scale(.98); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.18); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.wallet-plus{ background:#b7ea12; color:#171717; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

/* --- 4. hero editorial --- */
.hero{ padding:8vh 0 7vh; }
.hero-kicker{ background:transparent; border:none; color:rgba(255,255,255,.55); letter-spacing:.26em; padding:0; margin-bottom:34px; }
.kicker-dot{ display:none; }
.hero-title{ font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; line-height:1.08; font-size:clamp(40px,7vw,88px); }
.hero-title em{ font-style:italic; background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:#b7ea12; color:#b7ea12; }
.hero-sub{ color:rgba(255,255,255,.62); max-width:640px; }
.hero-stats{ background:transparent; border:none; border-top:1px solid var(--art-line); border-bottom:1px solid var(--art-line); border-radius:0; padding:24px 8px; gap:30px; }
.stat b{ font-family:var(--font); font-weight:700; color:#fff; }
.stat span{ color:rgba(255,255,255,.45); }
.stat-sep{ background:var(--art-line); }

/* --- 5. cards hairline, không đổ bóng --- */
.glass{ background:#202020; border:1px solid #2c2c2c; border-radius:12px; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
.glass-strong{ background:rgba(28,28,30,.4); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.home-card{ border-radius:12px; }
.home-card:hover{ transform:translateY(-4px); border-color:rgba(183,234,18,.35); box-shadow:none; }
.home-card h3{ font-family:var(--font-serif); font-weight:500; font-size:21px; }
.hc-ic{ display:none; }
.hc-go{ color:#b7ea12; }
.hp-chip{ background:#1c1c1c; }
.hp-chip b{ color:#b7ea12; }
.home-prices h3{ font-family:var(--font-serif); font-weight:500; font-size:22px; }

/* --- 6. tiêu đề serif --- */
.page-head h2{ font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; }
.sec-title{ font-family:var(--font-serif); font-weight:500; font-size:22px; }

/* --- 7. chips / popup / composer --- */
.chip.on,.mode-tab.active,.cc-chip.open{ background:#b7ea12; border-color:#b7ea12; color:#171717; box-shadow:none; }
.model-opt.on,.channel-opt.on,.motion-card.on{ border-color:rgba(183,234,18,.55); background:rgba(183,234,18,.06); }
.composer{ background:rgba(28,28,28,.94); border:1px solid #333; border-radius:18px; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 -8px 60px rgba(0,0,0,.5); }
.pop{ background:rgba(30,30,32,.55); -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%); border:1px solid rgba(255,255,255,.08); }
.pop-head{ border-bottom:1px solid var(--art-line); }
.model-opt{ background:#242424; border-color:#333; }
.mo-glyph{ background:#2b2b2b; border:1px solid #3a3a3a; box-shadow:none; color:#b7ea12; }

/* --- 8. misc --- */
.foot{ border-top:1px solid var(--art-line); }
::selection{ background:#b7ea12; color:#171717; }
code{ background:rgba(183,234,18,.1); color:#b7ea12; }
.price-card-apple,.pkg-card{ border-radius:12px; }
.pkg-card.hot{ box-shadow:none; }
.pkg-badge{ background:#b7ea12; color:#171717; }
.announce-bar{ background:#b7ea12; color:#171717; }
/* --- 9. tiêu đề studio serif --- */
.stage-head h2{ font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; }

/* ============================================================
   LIQUID GLASS (2026-10-14) — vật liệu kính lỏng kiểu Apple
   Công thức: nền mờ rgba + blur(22-28px) saturate(170%)
   + viền sáng cạnh trong (ánh sáng bắt vào mép kính)
   + lớp sheen phản chiếu + bóng đổ sâu
   Áp dụng cho floating chrome (topbar/nav/composer/popup),
   KHÔNG áp cho cards nội dung (tránh kính chồng kính).
   ============================================================ */

/* --- topbar kính --- */
.topbar{
  background:rgba(22,22,23,.55);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 34px rgba(0,0,0,.35);
}

/* --- bottom nav mobile: viên kính nổi (signature iOS 26) --- */
@media (max-width:1080px){
  .topnav{
    background:rgba(30,30,32,.55);
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.5);
  }
  .topnav::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%);
  }
}

/* --- thanh composer: pill kính --- */
.composer{
  background:rgba(30,30,32,.6);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.25), 0 -14px 50px rgba(0,0,0,.45);
}

/* --- popup: tấm kính mờ (nội dung bên trong vẫn sắc nét) --- */
.pop{
  background:rgba(30,30,32,.72);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 30px 80px rgba(0,0,0,.6);
}

/* --- nút CTA: thêm vệt sheen lướt khi hover (cảm giác lỏng) --- */
.btn-primary,.btn-generate,.ci-send{ position:relative; overflow:hidden; }
.btn-primary::after,.btn-generate::after,.ci-send::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%);
  transform:translateX(-130%); transition:transform .55s ease;
}
.btn-primary:hover::after,.btn-generate:hover::after,.ci-send:hover::after{ transform:translateX(130%); }

/* --- chữ trên kính: tăng tương phản (vibrancy) --- */
.topbar .nav-link,.topnav .nav-link{ font-weight:600; }

/* --- fallback: trình duyệt không có backdrop-filter --- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{ background:rgba(18,18,19,.94); }
  .composer,.pop{ background:#1f1f1f; }
}
@media (max-width:1080px){
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .topnav{ background:rgba(22,22,24,.96); }
  }
}

/* --- tôn trọng cài đặt hệ thống --- */
@media (prefers-reduced-transparency:reduce){
  .topbar,.composer,.pop{ background:#1e1e1e; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .btn-primary::after,.btn-generate::after,.ci-send::after{ display:none; }
}
@media (max-width:1080px){
  @media (prefers-reduced-transparency:reduce){
    .topnav{ background:#1e1e1e; -webkit-backdrop-filter:none; backdrop-filter:none; }
    .topnav::after{ display:none; }
    .topnav::before{ display:none; }
  }
}

/* ============================================================
   LIQUID GLASS v2 (2026-10-14) — khớp 100% ảnh mẫu Artlist
   - Nút gel: vệt specular trắng mạnh mép trên + viền sáng quanh
     nút + đáy olive đậm + halo vàng ngoài
   - Nút kính đen: nền mờ + viền sáng bắt ở cạnh trên rõ rệt
   ============================================================ */

/* --- nút CTA gel vàng brand --- */
.btn-primary,.btn-generate,.ci-send,.library-create{
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 26%, rgba(255,255,255,0) 46%),
    radial-gradient(130% 190% at 50% 118%, #e6f973 0%, #c8f226 34%, #a5d310 62%, #7fa50a 88%, #6b8c07 100%);
  color:#1c2204;
  border:none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -3px 8px rgba(52,72,0,.42),
    inset 3px 0 10px rgba(255,255,255,.22),
    inset -3px 0 10px rgba(255,255,255,.22),
    0 0 0 1px rgba(255,255,255,.16),
    0 2px 10px rgba(0,0,0,.35),
    0 0 28px rgba(183,234,18,.32);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover,.btn-generate:hover,.ci-send:hover,.library-create:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -3px 8px rgba(52,72,0,.42),
    inset 3px 0 10px rgba(255,255,255,.25),
    inset -3px 0 10px rgba(255,255,255,.25),
    0 0 0 1px rgba(255,255,255,.2),
    0 4px 16px rgba(0,0,0,.4),
    0 0 38px rgba(183,234,18,.5);
}
.btn-primary:active,.btn-generate:active{ transform:scale(.98); filter:brightness(.97); }
.btn-primary:disabled{ opacity:.45; filter:grayscale(.4); box-shadow:none; }

/* --- nút kính đen (kiểu Sign In) --- */
.btn-ghost{
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.14) 100%),
    rgba(38,38,41,.55);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 28px rgba(0,0,0,.42);
  color:#fff;
}
.btn-ghost:hover{ background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 38%, rgba(0,0,0,.1) 100%),
    rgba(48,48,52,.6);
  border-color:rgba(255,255,255,.24); }

/* --- panel prompt kính đậm hơn (giống khung Describe) --- */
.composer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 30%),
    rgba(26,26,28,.62);
  border-radius:24px;
}

/* ============================================================
   ROUND 6 (2026-10-14): i18n toggle + LIQUID GLASS v3 + MOTION
   ============================================================ */

/* --- nút chuyển ngôn ngữ --- */
.lang-toggle{
  display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:#8e8e93;font-size:12px;font-weight:800;letter-spacing:.1em;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  transition:border-color .25s,color .25s,transform .15s;
}
.lang-toggle i{font-style:normal;opacity:.3;font-weight:400}
.lang-toggle [data-l]{opacity:.55;transition:opacity .25s,color .25s}
.lang-toggle [data-l].on{opacity:1;color:#d4f545}
.lang-toggle:hover{border-color:rgba(255,255,255,.25)}
.lang-toggle:active{transform:scale(.95)}

/* --- liquid glass v3: saturate sâu hơn, edge sáng rõ hơn --- */
.topbar{
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
}
@media (max-width:1080px){
  .topnav{
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
  }
}
.composer{
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
}
.pop{
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
}
.nav-link:active{transform:scale(.94)}
.nav-link{transition:color .25s,transform .15s}

/* --- hero entrance: stagger từng lớp --- */
.view .hero > *{opacity:0}
.view.on .hero > *{animation:hero-in 1s cubic-bezier(.16,1,.3,1) forwards}
.view.on .hero > :nth-child(1){animation-delay:.03s}
.view.on .hero > :nth-child(2){animation-delay:.12s}
.view.on .hero > :nth-child(3){animation-delay:.22s}
.view.on .hero > :nth-child(4){animation-delay:.32s}
.view.on .hero > :nth-child(5){animation-delay:.42s}
@keyframes hero-in{
  from{opacity:0;transform:translateY(30px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* --- CTA gel: shimmer ánh sáng trôi chậm (ambient) --- */
.hero-cta .btn-primary{position:relative;overflow:hidden}
.hero-cta .btn-primary::before{
  content:"";position:absolute;inset:-40% -20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:cta-shimmer 5.5s ease-in-out infinite;
}
@keyframes cta-shimmer{
  0%,55%{transform:translateX(-120%)}
  90%,100%{transform:translateX(120%)}
}
/* nhịp thở glow nhẹ cho CTA chính */
.hero-cta .btn-primary{animation:cta-breathe 4.5s ease-in-out infinite}
@keyframes cta-breathe{
  0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 8px rgba(52,72,0,.42),inset 3px 0 10px rgba(255,255,255,.22),inset -3px 0 10px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.16),0 2px 10px rgba(0,0,0,.35),0 0 22px rgba(183,234,18,.28)}
  50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 8px rgba(52,72,0,.42),inset 3px 0 10px rgba(255,255,255,.22),inset -3px 0 10px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.16),0 2px 10px rgba(0,0,0,.35),0 0 40px rgba(183,234,18,.45)}
}

/* --- reveal on scroll --- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* --- feed cards: fade-up khi render --- */
.feed-card{animation:card-in .6s cubic-bezier(.16,1,.3,1) both}
@keyframes card-in{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

/* --- chip bấm: nảy nhẹ --- */
.cc:active{transform:scale(.93)}
.cc{transition:transform .15s,background .25s,border-color .25s,color .25s}

/* --- tôn trọng reduced motion/transparency --- */
@media (prefers-reduced-motion:reduce){
  .view .hero > *{opacity:1;animation:none}
  .view.on .hero > *{animation:none;opacity:1}
  .hero-cta .btn-primary::before,.hero-cta .btn-primary{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .feed-card{animation:none}
}

/* ============================================================
   ROUND 7 (2026-10-14): LIGHTSWEEP + LIQUID GLASS ANIMATED
   ============================================================ */

/* --- lightsweep chạy ngang thẻ gói (điểm nhấn) --- */
.pkg-card{position:relative;overflow:hidden}
.pkg-card::before{
  content:"";position:absolute;inset:-30% -60%;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.14) 50%,transparent 56%);
  transform:translateX(-130%) skewX(-8deg);
  animation:pkg-sweep 7s ease-in-out infinite;
}
.pkg-card > *{position:relative;z-index:2}
@keyframes pkg-sweep{
  0%,62%{transform:translateX(-130%) skewX(-8deg)}
  92%,100%{transform:translateX(130%) skewX(-8deg)}
}
/* thẻ HOT/BEST: sweep nhanh hơn + sáng hơn */
.pkg-card.hot::before{
  background:linear-gradient(105deg,transparent 42%,rgba(212,245,69,.22) 50%,transparent 58%);
  animation-duration:4.5s;
}

/* --- tag HOT/BEST: nhịp glow --- */
.pkg-tag{animation:tag-glow 2.6s ease-in-out infinite}
@keyframes tag-glow{
  0%,100%{box-shadow:0 0 0 rgba(183,234,18,0)}
  50%{box-shadow:0 0 18px rgba(183,234,18,.75)}
}

/* --- giá gói: shimmer nhẹ trên số tiền --- */
.pkg-price{
  background:linear-gradient(100deg,#fff 30%,#d4f545 48%,#fff 62%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:price-shimmer 6s ease-in-out infinite;
}
@keyframes price-shimmer{
  0%,55%{background-position:120% 0}
  90%,100%{background-position:-20% 0}
}

/* --- nút mua trong thẻ gói: sweep ambient --- */
.pkg-card .btn-primary{position:relative;overflow:hidden}
.pkg-card .btn-primary::after{animation:btn-ambient 5s ease-in-out infinite}
@keyframes btn-ambient{
  0%,60%{transform:translateX(-130%) skewX(-12deg);opacity:0}
  62%{opacity:1}
  95%,100%{transform:translateX(130%) skewX(-12deg);opacity:0}
}

/* --- liquid glass: vệt sáng trôi trên thanh nav đáy --- */
@media (max-width:1080px){
  .topnav{overflow:hidden}
  .topnav::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
    background-size:250% 100%;
    animation:glass-drift 9s ease-in-out infinite;
  }
  @keyframes glass-drift{
    0%,100%{background-position:120% 0}
    50%{background-position:-20% 0}
  }
}

/* --- liquid glass: composer có ánh sáng "thở" --- */
.composer{position:relative;z-index:10;margin-top:-140px;background:rgba(28,28,30,.18);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.composer::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  opacity:.5;animation:glass-breathe 5s ease-in-out infinite;
}
@keyframes glass-breathe{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}

/* --- tôn trọng reduced motion --- */
@media (prefers-reduced-motion:reduce){
  .pkg-card::before,.pkg-tag,.pkg-price,.pkg-card .btn-primary::after,
  .topnav::before,.composer::after{animation:none}
  .pkg-price{-webkit-text-fill-color:currentColor;color:inherit;background:none}
}

/* ================= FLOW STUDIO ================= */
#view-flow{max-width:1800px;padding:0;min-height:calc(100vh - 58px)}
.flow-shell{display:flex;flex-direction:column;height:calc(100vh - 58px);height:calc(100dvh - 58px)}
.flow-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(20,20,20,.72);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);z-index:5}
.flow-title{min-width:200px}
.flow-eyebrow{font:700 10px var(--font-d);letter-spacing:.22em;color:var(--ki-acid)}
.flow-title h2{font-family:var(--font-d);font-size:22px;font-weight:800;letter-spacing:-.01em;margin:2px 0}
.flow-title p{margin:0;color:var(--text-3);font-size:12px}
.flow-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.flow-cost{font:700 12.5px var(--font-d);color:var(--ki-acid);white-space:nowrap}
.flow-ghost{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text-2);font:600 12.5px var(--font);cursor:pointer}
.flow-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.25)}
.flow-run{min-height:42px;padding:0 20px;font-weight:800}
.flow-run.is-running{opacity:.65;pointer-events:none}
.flow-canvas{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab;
  background-color:#101010;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);
  background-size:26px 26px}
.flow-canvas:active{cursor:grabbing}
.flow-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#flowEdges{position:absolute;left:0;top:0;width:10px;height:10px;overflow:visible;pointer-events:none}
#flowNodes{position:absolute;left:0;top:0}
.fe-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.fe-line{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2.5;pointer-events:none;transition:stroke .15s}
.fe:hover .fe-line,.fe.sel .fe-line{stroke:var(--ki-acid);filter:drop-shadow(0 0 6px rgba(183,234,18,.6))}
.fe-line.temp{stroke:var(--ki-acid);stroke-dasharray:7 5;animation:fe-dash 1s linear infinite}
@keyframes fe-dash{to{stroke-dashoffset:-12}}
.fnode{position:absolute;left:0;top:0;width:264px;border-radius:16px;
  background:rgba(28,28,30,.78);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px rgba(0,0,0,.45);
  will-change:transform;user-select:none;-webkit-user-select:none}
.fnode-head{display:flex;align-items:center;gap:8px;padding:11px 12px;cursor:grab;border-bottom:1px solid rgba(255,255,255,.08);touch-action:none}
.fnode-head:active{cursor:grabbing}
.fnode-dot{width:10px;height:10px;border-radius:50%;background:var(--nd);box-shadow:0 0 10px var(--nd);flex:none}
.fnode-head b{font:700 13px var(--font-d);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode-st{font:700 10px var(--font-d);color:var(--ki-acid)}
.fnode.st-running{border-color:rgba(183,234,18,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(183,234,18,.35),0 0 28px rgba(183,234,18,.25);animation:fnode-pulse 1.4s ease-in-out infinite}
@keyframes fnode-pulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(183,234,18,.55),0 0 40px rgba(183,234,18,.4)}}
.fnode.st-error{border-color:rgba(255,90,90,.6)}
.fnode.st-done{border-color:rgba(183,234,18,.35)}
.fnode-x{border:0;background:transparent;color:var(--text-3);font-size:12px;cursor:pointer;padding:6px;border-radius:8px}
.fnode-x:hover{color:#ff6b6b;background:rgba(255,90,90,.12)}
.fnode-io{display:flex;justify-content:space-between;padding:10px 0 2px;min-height:8px}
.fnode-ins,.fnode-outs{display:flex;flex-direction:column;gap:9px}
.fport{display:flex;align-items:center;gap:8px;padding:6px 2px;position:relative}
.fport label{font:600 11px var(--font-d);color:var(--text-2);white-space:nowrap}
.fport i{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:#2a2a2c;flex:none;transition:.15s}
.fport.in{padding-left:0}
.fport.in i{margin-left:-8px}
.fport.out{flex-direction:row;padding-right:0}
.fport.out i{margin-right:-8px;order:2}
.fport.out{cursor:crosshair}
.fport.out:hover i{border-color:var(--ki-acid);background:var(--ki-acid);box-shadow:0 0 10px rgba(183,234,18,.8);transform:scale(1.25)}
.fport.in:hover i{border-color:var(--ki-acid)}
.fnode-body{padding:8px 12px 4px;display:flex;flex-direction:column;gap:8px}
.flab{display:flex;flex-direction:column;gap:5px;font:600 10.5px var(--font-d);color:var(--text-3);letter-spacing:.04em}
.fin{width:100%;box-sizing:border-box;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:var(--text);font:500 12.5px var(--font);padding:9px 10px;outline:none;resize:vertical}
.fin:focus{border-color:rgba(183,234,18,.6)}
select.fin{appearance:none;-webkit-appearance:none;cursor:pointer}
textarea.fin{min-height:56px;line-height:1.45}
.fupload{display:block;border:1.5px dashed rgba(255,255,255,.2);border-radius:12px;min-height:84px;cursor:pointer;overflow:hidden;position:relative}
.fupload span{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3);font-size:12px}
.fupload img,.fupload video{width:100%;height:110px;object-fit:cover;display:block}
.fupload:hover{border-color:rgba(183,234,18,.55)}
.fnode-foot{padding:2px 12px 12px}
.fnode-result:empty{display:none}
.fnode-result img,.fnode-result video{width:100%;border-radius:10px;display:block;max-height:150px;object-fit:cover;cursor:zoom-in;border:1px solid rgba(255,255,255,.12)}
.fnode-err{color:#ff8a8a;font-size:11.5px;line-height:1.4;margin-top:6px}
.fnode-err:empty{display:none}
.flow-hint{position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--text-3);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;max-width:min(520px,70vw)}
.flow-zoom{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}
.flow-zoom button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(20,20,22,.8);backdrop-filter:blur(12px);color:var(--text);font-size:17px;cursor:pointer}
.flow-zoom button:hover{border-color:rgba(183,234,18,.5);color:var(--ki-acid)}
.flow-fab{position:absolute;right:16px;bottom:66px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(183,234,18,.5);background:rgba(183,234,18,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ki-acid);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:.18s;z-index:6}
.flow-fab:hover{background:rgba(183,234,18,.28);transform:scale(1.06)}
.flow-ctx{position:absolute;z-index:20;width:230px;border-radius:14px;padding:6px;
  background:rgba(26,26,28,.92);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.6);
  animation:ctx-in .16s cubic-bezier(.2,.9,.3,1.2)}
.flow-ctx.hidden{display:none}
@keyframes ctx-in{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:none}}
.flow-ctx-title{font:700 10.5px var(--font-d);letter-spacing:.14em;color:var(--text-3);padding:8px 10px 6px}
.flow-ctx button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:600 13px var(--font);cursor:pointer;text-align:left}
.flow-ctx button:hover{background:rgba(183,234,18,.12)}
.flow-ctx button i{font-style:normal;width:26px;height:26px;border-radius:8px;background:rgba(183,234,18,.14);color:var(--ki-acid);display:grid;place-items:center;font-size:14px;flex:none}
.flow-ctx button.danger{color:#ff8a8a}
.flow-ctx button.danger i{background:rgba(255,90,90,.14);color:#ff8a8a}
/* cổng + đường nối màu theo kiểu dữ liệu (text=xanh, image=cam, video=tím) */
.fport[data-type="text"] i{border-color:rgba(138,180,255,.75)}
.fport[data-type="image"] i{border-color:rgba(255,184,107,.75)}
.fport[data-type="video"] i{border-color:rgba(199,146,234,.75)}
.fe-t-text .fe-line{stroke:rgba(138,180,255,.55)}
.fe-t-image .fe-line{stroke:rgba(255,184,107,.55)}
.fe-t-video .fe-line{stroke:rgba(199,146,234,.55)}
/* đường nối "chảy" khi flow đang chạy */
.fe-live .fe-line{stroke-dasharray:10 8;animation:fe-live .65s linear infinite}
@keyframes fe-live{to{stroke-dashoffset:-18}}
/* kết quả vừa gen xong: hiện lên nhẹ */
.res-fresh{animation:res-in .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes res-in{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
/* node đang kéo / được chọn / hover */
.fnode{transition:box-shadow .22s ease,border-color .22s ease,opacity .22s ease}
.fnode:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 55px rgba(0,0,0,.55)}
.fnode.is-drag{z-index:12;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 80px rgba(0,0,0,.65)}
.fnode.is-drag .fnode-head{cursor:grabbing}
.fnode.sel{border-color:rgba(183,234,18,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(183,234,18,.45),0 14px 40px rgba(0,0,0,.45)}
/* huy hiệu chi phí + nút chạy riêng trên node */
.fnode-cost{font:700 10px var(--font-d);color:var(--ki-acid);background:rgba(183,234,18,.1);border:1px solid rgba(183,234,18,.32);padding:3px 8px;border-radius:20px;white-space:nowrap;flex:none}
.fnode-cost:empty{display:none}
.fnode-run{border:1px solid rgba(183,234,18,.4);background:rgba(183,234,18,.1);color:var(--ki-acid);border-radius:8px;min-width:26px;height:26px;cursor:pointer;font-size:10px;display:grid;place-items:center;flex:none;padding:0 4px}
.fnode-run:hover{background:rgba(183,234,18,.3)}
/* thanh tiến trình trên node khi chạy */
.fnode-prog{height:3px;background:rgba(255,255,255,.07);margin:0 12px;border-radius:2px;overflow:hidden;display:none}
.fnode.st-running .fnode-prog{display:block}
.fnode-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ki-acid),#fff);border-radius:2px;transition:width .5s}
/* node tắt / khóa */
.fnode.is-off{opacity:.42;filter:saturate(.35)}
.fnode.is-off .fnode-head b{text-decoration:line-through}
.fnode.is-locked{border-style:dashed;border-color:rgba(138,180,255,.55)}
/* pager lịch sử kết quả */
.fnode-hist:empty{display:none}
.fnode-hist{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;font:600 11px var(--font-d);color:var(--text-3)}
.fnode-hist button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--text);border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1}
.fnode-hist button:hover{border-color:rgba(183,234,18,.5);color:var(--ki-acid)}
/* sticky note */
.fnode-t-note{background:rgba(58,50,18,.88);border-color:rgba(255,216,77,.4)}
.fnode-t-note .fnode-dot{background:#ffd84d;box-shadow:0 0 10px #ffd84d}
.fnode-t-note .fnode-head{cursor:grab}
textarea.fin.fnote{background:rgba(0,0,0,.28);border-color:rgba(255,216,77,.25)}
textarea.fin.fnote:focus{border-color:rgba(255,216,77,.6)}
/* popover thư viện template */
.flow-tplwrap{position:relative}
.flow-tplpop{position:absolute;top:calc(100% + 10px);right:0;width:300px;max-height:70vh;overflow:auto;z-index:40;border-radius:16px;padding:8px;
  background:rgba(24,24,26,.96);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.65);
  animation:ctx-in .16s cubic-bezier(.2,.9,.3,1.2)}
.flow-tplpop.hidden{display:none}
.ftpl-sec{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.ftpl-sec button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:600 13px var(--font);cursor:pointer;text-align:left}
.ftpl-sec button:hover{background:rgba(183,234,18,.12)}
.ftpl-sec button i{font-style:normal;color:var(--ki-acid);font-size:12px}
.ftpl-sec button span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftpl-sec button em{font-style:normal;color:var(--text-3);padding:4px 8px;border-radius:8px;font-size:12px}
.ftpl-sec button em:hover{color:#ff6b6b;background:rgba(255,90,90,.12)}
.ftpl-save{display:flex;gap:8px;padding:8px 4px 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
.ftpl-save input{flex:1;min-width:0;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:var(--text);font-size:13px;padding:9px 10px;outline:none}
.ftpl-save input:focus{border-color:rgba(183,234,18,.6)}
.ftpl-save button{flex:none;border:1px solid rgba(183,234,18,.45);background:rgba(183,234,18,.12);color:var(--ki-acid);border-radius:10px;padding:9px 12px;font:700 13px var(--font);cursor:pointer;white-space:nowrap}
.ftpl-save button:hover{background:rgba(183,234,18,.25)}
/* WanAnimate (noPrompt): composer chế độ auto — chỉ upload + tạo */
.wan-hint{display:none;flex:1;align-items:center;min-height:44px;padding:0 6px;color:var(--text-2);font:500 13px/1.45 var(--font)}
#composer.wan-mode .prompt-shell{display:none}
#composer.wan-mode .wan-hint{display:flex}
#composer.wan-mode .cc-seg,
#composer.wan-mode #chipMotion,
#composer.wan-mode #chipRatio,
#composer.wan-mode #chipDur,
#composer.wan-mode #chipQual{display:none!important}
.flow-edge-del{position:absolute;z-index:10;transform:translate(-50%,0);display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,90,90,.5);background:rgba(30,10,10,.9);color:#ff8a8a;font:600 12px var(--font);cursor:pointer;white-space:nowrap}
.flow-edge-del.hidden{display:none}
@media (max-width:1080px){
  .flow-shell{height:calc(100dvh - 58px - 64px)}
  .flow-top{padding:10px 14px;gap:10px}
  .flow-title p{display:none}
  .flow-title h2{font-size:18px}
  .flow-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fnode.st-running{animation:none}
  .fe-line.temp{animation:none}
  .fe-live .fe-line{animation:none}
  .res-fresh{animation:none}
}

/* ============ TEMPLATES ============ */
.tpl-tools{display:flex;align-items:center;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.tpl-search{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;max-width:420px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:40px;
  padding:10px 16px;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.tpl-search svg{width:18px;height:18px;opacity:.55;flex:none}
.tpl-search input{flex:1;background:none;border:0;outline:0;color:#fff;font-size:15px;min-width:0}
.tpl-search input::placeholder{color:rgba(255,255,255,.4)}
.tpl-count{font-size:13px;color:rgba(255,255,255,.5)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tpl-loading{color:rgba(255,255,255,.5);padding:24px 0}
.tpl-card{background:rgba(32,32,34,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s}
.tpl-card:hover{transform:translateY(-3px);border-color:rgba(183,234,18,.45)}
.tpl-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.tpl-thumb img,.tpl-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tpl-tag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:rgba(0,0,0,.62);color:#B7EA12;border:1px solid rgba(183,234,18,.4);
  padding:4px 8px;border-radius:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tpl-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.tpl-play svg{width:52px;height:52px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.tpl-card:hover .tpl-play{opacity:1}
.tpl-body{padding:12px 14px}
.tpl-body h4{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-more{display:flex;justify-content:center;margin:26px 0 8px}
/* modal */
.tpl-modal-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.62)}
.tpl-modal-wrap.hidden{display:none}
.tpl-modal{position:relative;width:min(680px,100%);max-height:92dvh;overflow-y:auto;border-radius:18px;padding:20px;
  background:rgba(28,28,30,.35)!important;-webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%);border:1px solid rgba(255,255,255,.08);
  animation:group-in .32s cubic-bezier(.22,1,.36,1)}
.tpl-modal .pop-x{position:absolute;top:12px;right:12px;z-index:2}
.tpl-modal-video{border-radius:12px;overflow:hidden;background:#000;margin-bottom:14px}
.tpl-modal-video video{width:100%;max-height:46dvh;display:block;background:#000}
.tpl-modal h3{margin:0 0 6px;font-size:19px}
.tpl-modal-desc{margin:0 0 12px;font-size:14px;color:rgba(255,255,255,.6)}
.tpl-modal-prompt{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.85);white-space:pre-wrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:14px;max-height:220px;overflow-y:auto;margin:0 0 16px}
.tpl-modal-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){
  .tpl-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tpl-body{padding:10px}
  .tpl-body h4{font-size:12.5px}
  .tpl-modal{padding:14px}
}

/* ============ MOBILE NATIVE (skill mobile-native + mobile-app-ui-design) ============ */
html {
  -webkit-tap-highlight-color: transparent; /* tắt flash xám khi chạm */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; /* chặn pull-to-refresh cướp scroll */
}
body { overscroll-behavior: none; }
/* Bấm phản hồi ngay + không select chữ trên control */
button, a, [role="button"], .cc-chip, .nav-link, .mode-tab, .fc-icobtn {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Chống hover dính trên cảm ứng (iOS giữ trạng thái hover sau khi chạm) */
@media (hover: none) {
  .btn-primary:hover, .btn-ghost:hover, .btn-mini:hover, .btn:active,
  .home-card:hover, .feed-card:hover, .ci-send:hover, .ci-btn:hover,
  .fc-icobtn:hover, .wallet-pill:hover, .nav-link:hover,
  .comp-refs .thumb:hover, .prompt-tag-opt:hover, .pkg-card:hover { transform: none; }
  /* Press feedback thay cho hover */
  .btn-primary:active, .ci-send:active { transform: scale(.96); }
  .cc-chip:active, .nav-link:active, .btn-mini:active { transform: scale(.96); }
  .feed-card:active { transform: scale(.995); }
}
/* Chống iOS tự zoom khi focus ô nhập (phải ≥16px) — đồng bộ cả lớp highlight */
@media (pointer: coarse) {
  #promptInput, .prompt-highlight { font-size: 16px; }
  input, textarea, select { font-size: 16px; }
}
/* Touch target tối thiểu cho nút nhỏ */
.fc-icobtn { min-width: 36px; min-height: 36px; }
.cc-chip { min-height: 40px; }
/* Sticker Khuyên dùng */
.model-opt{position:relative}
.mo-badge.rec{position:absolute;top:-8px;right:10px;background:rgba(20,20,22,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#B7EA12;border:1px solid rgba(183,234,18,.45);font-size:8px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.4);white-space:nowrap}

/* Mobile: giảm overlap composer để không che job card */
@media (max-width: 768px) {
  .composer{margin-top:-40px}
  .studio-stage{padding-bottom:120px}
}

/* Mobile: popup chọn thời lượng/độ phân giải hiển thị rõ hơn */
@media (max-width: 768px) {
  .pop.pop-sm {
    position: fixed !important;
    bottom: 20px !important;
    left: 5vw !important;
    right: 5vw !important;
    width: 90vw !important;
    max-height: 50vh !important;
    z-index: 1000 !important;
  }
  .pop-chips .chip {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 16px;
  }
}

/* Fix popup mobile: đảm bảo nội dung hiện đầy đủ */
@media (max-width: 768px) {
  #popDur, #popQual, #popRatio {
    position: fixed !important;
    bottom: 90px !important;
    left: 4vw !important;
    right: 4vw !important;
    width: 92vw !important;
    max-height: 40vh !important;
    min-height: 120px !important;
    z-index: 2000 !important;
    display: block !important;
  }
  #popDur[hidden], #popQual[hidden], #popRatio[hidden] {
    display: none !important;
  }
  #popDur .pop-body, #popQual .pop-body, #popRatio .pop-body {
    min-height: 80px !important;
    padding: 12px !important;
  }
  #durationChips, #qualityChips, #ratioChips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #durationChips .chip, #qualityChips .chip, #ratioChips .chip {
    min-height: 44px !important;
    min-width: 60px !important;
    font-size: 15px !important;
    padding: 12px 18px !important;
  }
}

/* Mobile: feed 1 cột, card không bị cắt */
@media (max-width: 768px) {
  .stage-feed, .feed-grid {
    columns: 1 !important;
    column-gap: 0 !important;
    padding: 0 12px !important;
  }
  .feed-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    break-inside: avoid !important;
  }
  .feed-card img, .feed-card video {
    width: 100% !important;
    height: auto !important;
  }
}

/* Prompt input: hover/focus → mở rộng mượt, rời chuột → thu lại */
#promptInput {
  transition: min-height 0.25s ease, padding 0.25s ease !important;
  min-height: 44px !important;
  height: auto !important;
  field-sizing: content;
  max-height: 190px;
  resize: none;
  overflow-y: auto;
}
.prompt-editor:hover #promptInput,
.prompt-editor:focus-within #promptInput {
  min-height: 140px !important;
  padding: 12px 4px 12px 0 !important;
}

/* Loading video full card */
.fc-loading-video {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  background: #000;
  /* Tối ưu render trên mobile */
  transform: translateZ(0);
  will-change: transform;
  -webkit-transform: translateZ(0);
}

/* Progress bar tinh tế cho card loading */
.fc-prog {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #B7EA12, #d4ff4f);
  box-shadow: 0 0 8px rgba(183, 234, 18, 0.6);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
}
.ph-pct {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fc-media {
  position: relative;
  overflow: hidden;
}

/* Media Library Picker */
.media-picker-modal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.media-picker-modal.open { display: flex; }
.media-picker-box {
  background: rgba(28,28,30,0.95); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; max-width: 520px; width: 100%; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.media-picker-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 8px; font-weight: 600; font-size: 15px; color: #fff;
}
.media-picker-close {
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.media-picker-sub {
  padding: 0 18px 12px; font-size: 12px; color: rgba(255,255,255,0.45);
}
.media-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 0 18px 18px; overflow-y: auto;
}
.media-picker-item {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.media-picker-item:hover { transform: scale(1.04); border-color: #B7EA12; }
.media-picker-item img, .media-picker-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mpi-kind {
  position: absolute; bottom: 4px; right: 4px; font-size: 14px;
  background: rgba(0,0,0,0.5); border-radius: 6px; padding: 2px 5px;
}
.media-picker-loading, .media-picker-empty {
  grid-column: 1 / -1; text-align: center; padding: 30px 10px;
  color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.6;
}

/* Tính lời */
.profit-calc { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.profit-calc label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.profit-calc input { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 14px; width: 180px; }
.profit-calc select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 14px; min-width: 220px; }
.profit-calc select option { background: #1c1c1e; color: #fff; }
.profit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.profit-grid .kpi b.green { color: #B7EA12; }
.profit-grid .kpi b.red { color: #ff6b6b; }
.profit-grid .kpi b.yellow { color: #ffd43b; }
.tbl .green { color: #B7EA12; }
.tbl .red { color: #ff6b6b; }

/* Sale pricing — premium ribbon */
.pkg-card { position: relative; overflow: hidden; }
.pkg-listprice { text-decoration: line-through; color: var(--text-3); font-size: 13px; opacity: 0.6; margin-bottom: 2px; }
.pkg-price { color: #B7EA12; font-size: 26px; font-weight: 800; text-shadow: 0 0 18px rgba(183,234,18,0.35); }
/* Pill sale inline cạnh giá — kiểu SaaS premium */
.pkg-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkg-sale {
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: #0a0f02;
  background: linear-gradient(135deg, #ffd43b, #ff922b);
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(255,146,43,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  white-space: nowrap;
}
/* Nhãn TIẾT KIỆM dưới giá */
.pkg-save { display: inline-block; margin-top: 4px; font-size: 12px; color: #B7EA12;
  background: rgba(183,234,18,0.1); border: 1px solid rgba(183,234,18,0.3);
  padding: 3px 10px; border-radius: 20px; }

/* ===== Premium liquid glass — thẻ gói (2026-10-15) ===== */
#pkgGrid .pkg-card {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 35%, rgba(255,255,255,0.01) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.25),
    0 10px 36px rgba(0,0,0,0.35);
  padding: 30px 26px 28px;
  gap: 8px;
}
#pkgGrid .pkg-card:hover {
  transform: translateY(-5px);
  border-color: rgba(183,234,18,0.35);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),
    0 16px 48px rgba(0,0,0,0.4),
    0 0 32px rgba(183,234,18,0.08);
}
/* Thẻ HOT/BEST nổi bật hơn */
#pkgGrid .pkg-card.hot {
  background:
    linear-gradient(165deg, rgba(183,234,18,0.14) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(183,234,18,0.4);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),
    inset 0 -1px 1px rgba(0,0,0,0.2),
    0 12px 44px rgba(0,0,0,0.35),
    0 0 40px rgba(183,234,18,0.14);
}
/* Tag HOT/BEST premium */
#pkgGrid .pkg-tag {
  position: absolute;
  top: 20px; left: 24px; right: auto !important;
  width: max-content; max-width: calc(100% - 48px);
  white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; line-height: 1;
  background: linear-gradient(135deg, #d4f545, #a8d90e);
  color: #0a0f02;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(183,234,18,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Tên gói sang hơn */
#pkgGrid .pkg-card h3 {
  font-size: 17px; font-weight: 600; letter-spacing: 0.02em;
  margin-top: 26px; color: rgba(255,255,255,0.95);
}
/* Số credit — gradient chữ premium */
#pkgGrid .pkg-credits {
  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(120deg, #e8ffa1, #B7EA12 60%, #8fc40a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(183,234,18,0.25));
  margin: 4px 0;
}
/* Huy hiệu sale tròn — căn lại vị trí */
/* Giá */
#pkgGrid .pkg-listprice { font-size: 14px; }
#pkgGrid .pkg-price { font-size: 28px; margin-top: 2px; }
#pkgGrid .pkg-per { font-size: 12.5px; opacity: 0.75; margin: 2px 0 14px; }
/* Nút mua premium */
#pkgGrid .pkg-card .btn-primary {
  border-radius: 16px; padding: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #d4f545, #a8d90e);
  box-shadow: 0 4px 20px rgba(183,234,18,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  border: none; color: #0a0f02;
}
#pkgGrid .pkg-card .btn-primary:active { transform: scale(0.98); }

/* ================= STUDIO 3D ================= */
.s3d-page { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.s3d-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.s3d-page-head h2 { font-size: 28px; margin: 0 0 6px; }
.s3d-sub { opacity: 0.7; font-size: 14px; margin: 0; max-width: 640px; }
.s3d-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.s3d-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 16px; }
.s3d-card-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.s3d-card-meta { font-size: 12px; opacity: 0.55; margin-bottom: 12px; }
.s3d-card-actions { display: flex; gap: 8px; }
.s3d-empty, .s3d-loading { grid-column: 1 / -1; text-align: center; opacity: 0.65; padding: 40px 16px; line-height: 1.7; }
.s3d-note { margin-top: 18px; font-size: 12px; opacity: 0.45; text-align: center; }
.s3d-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; background: #0d0d0d; }
.s3d-stage { flex: 1; min-width: 0; position: relative; }
.s3d-stage .t3d-studio-host { position: absolute; inset: 0; }
.s3d-chat { width: 340px; flex: none; display: flex; flex-direction: column; background: #141414; border-left: 1px solid rgba(255,255,255,0.08); }
.s3d-chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.s3d-chat-head b { font-size: 15px; }
.s3d-cost { font-size: 11px; opacity: 0.55; background: rgba(183,234,18,0.12); color: #B7EA12; padding: 3px 8px; border-radius: 20px; }
.s3d-x { margin-left: auto; background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: 0.7; padding: 4px 8px; }
.s3d-x:hover { opacity: 1; }
.s3d-chat-box { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.s3d-msg { max-width: 92%; }
.s3d-msg p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.s3d-msg.me { align-self: flex-end; background: #B7EA12; color: #0a0f02; border-radius: 14px 14px 4px 14px; padding: 10px 12px; }
.s3d-msg.me p { margin: 0; }
.s3d-msg.ai { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px 14px 14px 4px; padding: 10px 12px; }
.s3d-msg.ai b { font-size: 12px; color: #B7EA12; }
.s3d-chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.s3d-chat-input textarea { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #fff; padding: 10px 12px; font-size: 14px; resize: none; font-family: inherit; }
.s3d-chat-input textarea:focus { outline: none; border-color: #B7EA12; }
.s3d-credit { padding: 8px 14px; font-size: 11px; opacity: 0.4; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 860px) {
  .s3d-overlay { flex-direction: column; }
  .s3d-stage { flex: 1; min-height: 0; }
  .s3d-chat { width: 100%; height: 42%; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
}

/* ---------- 3D Studio Guide modal ---------- */
.s3d-guide-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.s3d-guide-modal[hidden]{display:none!important}
.s3d-guide-box{background:#1e1e1e;border:1px solid #333;border-radius:16px;max-width:560px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}
.s3d-guide-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333}
.s3d-guide-head b{font-size:18px}
.s3d-guide-body{padding:20px;overflow-y:auto}
.s3d-guide-body h4{margin:16px 0 6px;color:#B7EA12}
.s3d-guide-body h4:first-child{margin-top:0}
.s3d-guide-body p{margin:0 0 8px;color:#ccc;line-height:1.5}

/* Referral */
.referral-card{margin-top:18px;padding:18px}
.referral-card h3{margin:0 0 6px}
.ref-row{display:flex;gap:10px;align-items:center;margin:12px 0}
.ref-row code{font-size:18px;letter-spacing:2px;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;padding:8px 14px}
.ref-stats{display:flex;gap:24px;margin:10px 0}
.ref-stats b{display:block;font-size:22px;color:#B7EA12}
.ref-stats span{font-size:12px;color:#888}
.ref-list{font-size:13px;color:#aaa;max-height:150px;overflow:auto}

/* User menu liquid glass */
.user-menu {
  background: rgba(20, 20, 28, 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Avatar unlimited ring */
.avatar-wrap { position: relative; display: inline-block; }
.avatar-ring {
  position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--ring-color, #ff8c00) var(--ring-pct, 100%), rgba(255,255,255,0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

/* Unlimited badge near avatar */
.unlimited-tag {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff3b30, #ff6b60);
  color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.5);
  pointer-events: none; z-index: 2;
}

/* --- Payment hero: số tiền + credit nổi bật --- */
.pay-amount-hero{text-align:center;padding:20px 16px;background:linear-gradient(135deg,rgba(183,234,18,.08),rgba(183,234,18,.02));border:1px solid rgba(183,234,18,.2);border-radius:16px;margin-bottom:16px}
.pay-amount{font-size:38px;font-weight:800;color:#B7EA12;font-family:Georgia,serif;letter-spacing:.5px;line-height:1.1}
.pay-credit{font-size:20px;font-weight:700;color:#fff;margin-top:8px}
.pay-order{font-size:12px;color:#777;margin-top:8px;font-family:monospace;letter-spacing:.5px}

/* --- Prompt char counter --- */
.prompt-counter{font-size:11px;color:#666;text-align:right;margin-top:2px;margin-right:4px;font-family:monospace;pointer-events:none;position:relative;z-index:1}
.prompt-counter.warn{color:#ff6b6b;font-weight:700}

/* --- Support ticket --- */
.support-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#B7EA12;color:#111;border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 20px rgba(183,234,18,.4);z-index:999;display:flex;align-items:center;justify-content:center}
.support-fab:hover{transform:scale(1.05)}
@media(max-width:768px){
  .support-fab{bottom:90px;right:16px;width:48px;height:48px;font-size:20px}
}
.support-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.support-box{background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:24px;width:100%;max-width:440px;color:#fff}
.support-box h3{margin:0 0 16px;color:#B7EA12;font-size:18px}
.support-box label{display:block;font-size:13px;color:#999;margin:12px 0 4px}
.support-box input,.support-box select,.support-box textarea{width:100%;background:#222;border:1px solid #444;border-radius:8px;color:#fff;padding:10px;font-size:14px;box-sizing:border-box}
.support-box textarea{min-height:100px;resize:vertical}
.support-actions{display:flex;gap:10px;margin-top:18px}
.support-actions button{flex:1;padding:12px;border-radius:10px;border:none;font-size:15px;font-weight:700;cursor:pointer}
.btn-send{background:#B7EA12;color:#111}
.btn-cancel{background:#333;color:#fff}

/* --- Referral pill in header --- */
.ref-pill{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;margin-left:8px;text-decoration:none;font-size:20px;
background:rgba(183,234,18,.12);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
border:1px solid rgba(183,234,18,.4);box-shadow:0 4px 20px rgba(183,234,18,.25),inset 0 1px 0 rgba(255,255,255,.15);
animation:refGlow 2.5s ease-in-out infinite;transition:transform .2s}
.ref-pill:hover{transform:scale(1.12) rotate(-8deg)}
@keyframes refGlow{0%,100%{box-shadow:0 4px 20px rgba(183,234,18,.25),inset 0 1px 0 rgba(255,255,255,.15)}50%{box-shadow:0 4px 32px rgba(183,234,18,.55),inset 0 1px 0 rgba(255,255,255,.25)}}

/* Loading card animations - không đứng hình */
@keyframes ki-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.03); }
}
@keyframes ki-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ki-prog-indeterminate {
  0% { left: -40%; width: 40%; }
  100% { left: 100%; width: 40%; }
}
/* Logo/placeholder nhấp nháy nhẹ khi đang chạy */
.feed-card .fc-preview:empty,
.feed-card[data-status="running"] .fc-preview img[alt=""],
.feed-card:has(.fc-badge-running) .fc-preview {
  animation: ki-pulse 2s ease-in-out infinite;
}
/* Progress bar chạy indeterminate khi ở 0% */
.fc-prog[data-indeterminate="true"] {
  animation: ki-prog-indeterminate 1.5s ease-in-out infinite !important;
  background: linear-gradient(90deg, transparent, #B7EA12, transparent) !important;
  background-size: 200% 100% !important;
}

/* ===== VPS Stats (admin overview) ===== */
.vps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px}
.vps-card{background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 16px;text-align:center;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.vps-card:hover{transform:translateY(-2px);border-color:rgba(183,234,18,.3)}
.vps-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#B7EA12,transparent);opacity:.6}
.vps-card .v{font-size:26px;font-weight:800;margin:10px 0 6px;background:linear-gradient(135deg,#fff,#B7EA12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Georgia,serif}
.vps-card .l{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:2px;font-weight:600}
.vps-card .icon{font-size:22px;opacity:.8}

/* ===== VPS Gauges (pro dashboard) ===== */
.gauge-wrap{position:relative;width:110px;height:110px;margin:0 auto 10px}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-center .icon{font-size:20px;margin-bottom:2px}
.gauge-center .v{font-size:20px!important;margin:0!important}
.uptime-big{font-size:36px;margin-bottom:8px}