:root {
    --ink: #101828;
    --muted: #667085;
    --line: #e8eaf0;
    --soft: #f7f8fc;
    --primary: #6c5ce7;
    --primary-dark: #5040c5;
    --teal: #00bfa6;
    --orange: #f15922;
    --shadow: 0 18px 55px rgba(24, 29, 58, .09);
}

* { box-sizing: border-box; }
body { color: var(--ink); background: var(--soft); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.form-control, .form-select { border-color: #dfe2eb; border-radius: 12px; padding: .75rem .9rem; }
.form-control:focus, .form-select:focus { border-color: #988ef1; box-shadow: 0 0 0 .25rem rgba(108, 92, 231, .12); }
.form-control-lg, .form-select-lg { border-radius: 14px; }
.card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 30px rgba(24, 29, 58, .04); }
.eyebrow { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.brand-mark { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-weight: 800; letter-spacing: -.03em; font-size: 1.25rem; }
.brand-symbol { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8c7cf5, #31d1bd); box-shadow: 0 10px 25px rgba(0, 194, 168, .22); }

/* Auth */
.auth-page { min-height: 100vh; overflow-x: hidden; background: #f9f9fd; }
.auth-layout { min-height: 100vh; display: flex; position: relative; z-index: 1; }
.auth-hero { width: 58%; padding: 7vh 7vw; color: #fff; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 20% 10%, #7567e7, transparent 34%), linear-gradient(145deg, #18162e, #282054 62%, #352775); position: relative; overflow: hidden; }
.auth-hero h1 { font-size: clamp(3.2rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.07em; margin: 2rem 0 1.5rem; }
.auth-hero h1 span { color: #82e5d4; }
.auth-hero .lead { max-width: 480px; color: rgba(255,255,255,.72); font-size: 1.1rem; }
.hero-features { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; color: rgba(255,255,255,.86); font-size: .85rem; }
.hero-preview { position: absolute; right: 7vw; bottom: 7vh; width: 230px; height: 300px; transform: rotate(7deg); }
.mini-poster { position: relative; z-index: 1; height: 100%; border-radius: 8px; padding: 24px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #171331; background: linear-gradient(148deg,#f8cf64,#fff5be 55%,#f7a443); box-shadow: 0 25px 70px rgba(0,0,0,.35); text-align: center; }
.mini-poster small { font-size: .55rem; letter-spacing: .16em; font-weight: 800; }
.mini-poster strong { font-size: 2.1rem; line-height: .88; letter-spacing: -.08em; margin: 25px 0; }
.mini-poster b { color: #ef4e29; font-size: 2rem; }
.mini-poster em { font-size: .65rem; font-style: normal; }
.preview-glow { position: absolute; inset: 15% -20%; background: #6c5ce7; filter: blur(50px); opacity: .6; }
.auth-panel { width: 42%; display: grid; place-items: center; padding: 5vw; }
.auth-card { width: min(100%, 450px); background: rgba(255,255,255,.86); }
.auth-card h2 { margin: .65rem 0 .3rem; font-size: 2.15rem; letter-spacing: -.06em; }
.auth-divider { color: #98a2b3; display: flex; align-items: center; gap: 1rem; margin: 1.7rem 0; }
.auth-divider:before, .auth-divider:after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-orb { position: fixed; width: 280px; height: 280px; border-radius: 50%; filter: blur(60px); opacity: .22; z-index: 0; }
.auth-orb-one { background: #8a7df0; top: -80px; right: -80px; }.auth-orb-two { background: #00bfa6; bottom: -90px; left: -90px; }

/* App shell */
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 10; color: #d5d4ed; padding: 26px 16px; background: linear-gradient(180deg,#17162d,#211c42); }
.app-sidebar .brand-mark { margin: 0 12px 48px; }
.sidebar-label { color: #8d8aa9; font-size: .65rem; font-weight: 800; letter-spacing: .14em; padding: 0 14px; margin: 22px 0 8px; }
.sidebar-link { display: flex; gap: 12px; align-items: center; color: #bdbbd2; border-radius: 12px; padding: 11px 14px; margin: 3px 0; font-size: .92rem; transition: .2s; }
.sidebar-link:hover, .sidebar-link.active { color: #fff; background: rgba(255,255,255,.11); }
.sidebar-link.active { box-shadow: inset 3px 0 0 #82e5d4; }
.sidebar-bottom { position: absolute; left: 16px; right: 16px; bottom: 22px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }
.account-mini { display: flex; align-items: center; gap: 10px; color: #fff; padding: 9px 10px; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(135deg,#6c5ce7,#00bfa6); }
.app-main { width: calc(100% - 260px); margin-left: 260px; padding: 32px clamp(20px, 4vw, 60px); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 34px; }
.page-title { font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.065em; font-weight: 800; margin: 0; }
.page-subtitle { color: var(--muted); margin: .35rem 0 0; }
.topbar-actions { display: flex; gap: .7rem; align-items: center; }
.stat-card { padding: 22px; height: 100%; }
.stat-icon { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg,#6c5ce7,#9c92f5); font-size: 1.2rem; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.06em; margin-top: 18px; }
.stat-label { color: var(--muted); font-size: .85rem; }
.welcome-card { min-height: 180px; padding: 30px; color: #fff; border: 0; overflow: hidden; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 22%), linear-gradient(125deg,#332b75,#6c5ce7 55%,#00bfa6); }
.welcome-card h2 { font-size: 2rem; letter-spacing: -.06em; }
.table-card { padding: 24px; }
.table > :not(caption) > * > * { padding: 1rem .75rem; }
.badge-soft { background: #eeecff; color: var(--primary-dark); border-radius: 99px; padding: .4rem .7rem; font-weight: 700; }
.badge-success-soft { background: #e7faf5; color: #087d68; }
.badge-warning-soft { background: #fff6df; color: #9a6b00; }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }
.impersonation-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 22px; padding: 13px 16px; color: #5d4300; border: 1px solid #f2d27b; border-radius: 14px; background: #fff8df; box-shadow: 0 8px 24px rgba(130, 96, 0, .08); }
.impersonation-banner strong, .impersonation-banner span { display: block; }.impersonation-banner span { margin-top: 2px; font-size: .82rem; color: #846b2d; }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 360px; }

/* Generator */
.generator-layout { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(400px, 1.1fr); gap: 22px; align-items: start; }
.config-card, .preview-card { padding: 24px; }
.preview-card { position: sticky; top: 24px; }
.section-title { font-weight: 800; letter-spacing: -.04em; font-size: 1.15rem; }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.model-option { display: flex; flex-direction: column; min-width: 0; border: 2px solid var(--line); padding: 0; background: #fff; border-radius: 13px; overflow: hidden; cursor: pointer; text-align: left; }
.model-option.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,.12); }
.model-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; min-height: 170px; padding: 7px; background: #f4f5f8; }
.model-option img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; }
.model-option .model-name { display: block; min-width: 0; padding: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; font-weight: 700; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-control { display: flex; gap: 8px; align-items: center; }.color-control input[type=color] { width: 46px; height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; }
.iframe-preview { width: 100%; min-height: 670px; border: 0; border-radius: 14px; background: #f4f4f6; }
.batch-table-wrap { max-height: 410px; overflow: auto; }
.poster-history-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: 13px 0; }

@media (max-width: 1100px) { .auth-hero { width: 50%; padding: 5vw; }.auth-panel { width: 50%; }.generator-layout { grid-template-columns: 1fr; }.preview-card { position: static; } }
@media (max-width: 767px) { .app-sidebar { position: static; width: 100%; min-height: auto; padding: 15px; }.app-sidebar .brand-mark { margin: 0 8px 16px; }.sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; }.sidebar-label, .sidebar-bottom { display: none; }.app-main { width: 100%; margin-left: 0; padding: 24px 16px; }.app-shell { display: block; }.topbar { align-items: flex-start; flex-direction: column; }.model-grid { grid-template-columns: repeat(2,1fr); }.model-thumb { min-height: 210px; }.admin-user-actions { min-width: 0; justify-content: flex-start; }.impersonation-banner { align-items: flex-start; flex-direction: column; }.style-grid { grid-template-columns: 1fr; }.iframe-preview { min-height: 520px; }.auth-panel { width: 100%; padding: 24px; }.auth-layout { min-height: 100vh; } }