/* AImagine commercial workspace skin. Keeps the legacy DOM/API contract intact. */
:root {
  --studio-bg: #0b0e0d;
  --studio-canvas: #0f1311;
  --studio-panel: #151a18;
  --studio-panel-raised: #1a201d;
  --studio-control: #101512;
  --studio-line: #2b3530;
  --studio-line-strong: #3c4b44;
  --studio-text: #f0f4f2;
  --studio-muted: #a6b0ab;
  --studio-dim: #75817b;
  --studio-brand: #2fb39a;
  --studio-brand-hover: #39c0a5;
  --studio-brand-soft: #19352e;
  --studio-gold: #dda84a;
  --studio-success: #53c187;
  --studio-danger: #ef7176;
  --studio-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

html { color-scheme: dark; background: var(--studio-bg); }
body.studio-user,
body.studio-admin {
  background: var(--studio-bg);
  color: var(--studio-text);
  font-family: Inter, "Segoe UI Variable Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body.studio-user *, body.studio-admin * { letter-spacing: 0 !important; }
body.studio-user ::selection, body.studio-admin ::selection { background: #276b5c; color: #fff; }
body.studio-user :where(button, a, input, select, textarea, [tabindex]):focus-visible,
body.studio-admin :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #73ddc8 !important;
  outline-offset: 2px !important;
}
body.studio-user :where(button, a, .nav-item, .chip, .side-tab),
body.studio-admin :where(button, a, .nav-item, .tag, .pg) { -webkit-tap-highlight-color: transparent; }

/* User gateway */
.studio-user .login-wrap { background: #0b0e0d !important; }
.studio-user .login-wrap.show { grid-template-columns: minmax(560px, 1fr) minmax(400px, 480px); }
.studio-user .login-wrap::before {
  display: block !important;
  background:
    linear-gradient(rgba(11, 14, 13, .18), rgba(11, 14, 13, .82)),
    url("/static/studio-login.webp") center/cover no-repeat !important;
  opacity: .46;
}
.studio-user #login-canvas,
.studio-user .ll::before,
.studio-user .ll::after,
.studio-user .lr::after { display: none !important; }
.studio-user .ll {
  isolation: isolate;
  padding: 40px 52px 34px;
  background: linear-gradient(90deg, rgba(10, 13, 12, .94), rgba(10, 13, 12, .58));
  border-right: 1px solid rgba(127, 151, 141, .18);
}
.studio-user .ll-nav { max-width: 980px; }
.studio-user .ll-logo-mark,
.studio-user .lc-bmark,
.studio-user .sb-logo .lm {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--studio-brand) !important;
  color: #07120f;
  box-shadow: none !important;
  font-weight: 900;
}
.studio-user .ll-logo-name,
.studio-user .lc-bname,
.studio-user .sb-logo .ln,
.studio-user .boot-logo {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--studio-text) !important;
}
.studio-user .ll-nav-tag {
  border: 1px solid #396258;
  border-radius: 4px;
  background: rgba(17, 40, 34, .82);
  color: #a4e7d8;
  font-size: 11px;
  font-weight: 700;
}
.studio-user .ll-hero { max-width: 900px; justify-content: flex-end; padding: 56px 0 24px; }
.studio-user .ll-eyebrow { margin-bottom: 14px; color: #7ed7c5; font-size: 12px; }
.studio-user .ll-title {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 760;
  line-height: 1.03;
}
.studio-user .ll-title .t-accent,
.studio-user .ll-type-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #7ed7c5;
}
.studio-user .ll-type-wrap { margin-bottom: 28px; }
.studio-user .ll-type-text { font-size: 16px; }
.studio-user .ll-caps { gap: 8px; margin-bottom: 20px; }
.studio-user .ll-cap {
  min-height: 164px;
  padding: 17px;
  border: 1px solid rgba(117, 139, 130, .26);
  border-radius: 6px;
  background: rgba(18, 24, 21, .78);
  backdrop-filter: none;
}
.studio-user .ll-cap:hover { background: rgba(25, 36, 31, .9); border-color: #477064; transform: none; }
.studio-user .ll-cap::before { display: none; }
.studio-user .ll-cap .cap-icon,
.studio-user .ll-cap:nth-child(n) .cap-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border: 1px solid #365d53;
  border-radius: 5px;
  background: #183029;
}
.studio-user .ll-cap .cap-en { color: #74cdbb; font-size: 10px; }
.studio-user .ll-cap .cap-title { color: #eef4f1; }
.studio-user .ll-cap .cap-desc { color: #a2aea8; }
.studio-user .ll-footer { padding-top: 16px; border-color: rgba(117, 139, 130, .22); }
.studio-user .ll-stat:not(:last-child) { border-color: rgba(117, 139, 130, .22); }
.studio-user .ll-stat .sv { font-size: 17px; }
.studio-user .ll-stat .sv em { color: #7ed7c5; }
.studio-user .lr {
  padding: 34px;
  background: #0d1110;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .18);
}
.studio-user .login-card {
  max-width: 390px;
  max-height: calc(100vh - 68px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #34423c;
  border-radius: 8px;
  background: #151a18;
  box-shadow: var(--studio-shadow);
  backdrop-filter: none;
  animation: none;
}
.studio-user .lc-brand-row { margin-bottom: 22px; }
.studio-user .lc-title { margin-bottom: 5px; font-size: 24px; font-weight: 720; }
.studio-user .lc-sub { margin-bottom: 20px; color: var(--studio-muted); }
.studio-user .lc-tabs { border-color: #303b36; border-radius: 6px; background: #0e1210; }
.studio-user .lc-tab { min-height: 38px; border-radius: 4px; }
.studio-user .lc-tab.active { background: #203a32; color: #a3e9db; box-shadow: none; }
.studio-user .lf-inp { min-height: 44px; border-color: #35423c; border-radius: 6px; background: #101512; }
.studio-user .lf-inp:focus-within { border-color: #42baa3; background: #101512; box-shadow: 0 0 0 3px rgba(47, 179, 154, .14); }
.studio-user .lf input::placeholder { color: #65716b; }
.studio-user .btn-auth { min-height: 44px; border-radius: 6px; background: #229a83; box-shadow: none; }
.studio-user .btn-auth:hover:not(:disabled) { background: var(--studio-brand-hover); transform: none; box-shadow: none; }
.studio-user .btn-auth::before, .studio-user .btn-auth::after { display: none; }
.studio-user .lc-switch button { color: #79d6c3; }

/* User application shell */
.studio-user .app.show { grid-template-columns: 228px minmax(0, 1fr); }
.studio-user .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #0f1412;
  border-color: #28322d;
}
.studio-user .sb-top { padding: 17px 15px 14px; border-color: #28322d; }
.studio-user .sb-logo { margin: 0; }
.studio-user .sb-nav { padding: 14px 9px; }
.studio-user .nav-item { min-height: 40px; padding: 9px 11px; border-radius: 5px; color: #9fa9a4; }
.studio-user .nav-item:hover { color: #f5f7f6; background: #19221e; }
.studio-user .nav-item.active { color: #b9f0e5; background: #19342d; border-color: #386b60; box-shadow: inset 3px 0 #39b9a0; }
.studio-user .nav-item .ni { color: #8e9b95; }
.studio-user .nav-item.active .ni { color: #6cd3be; }
.studio-user .sb-foot { padding: 11px 9px; border-color: #28322d; }
.studio-user .sb-user { padding: 9px; border-color: #303b36; border-radius: 6px; background: #141a17; }
.studio-user .sb-avatar { border-radius: 5px; background: #275d51; }
.studio-user .sb-credits { border-radius: 4px; background: #312817; color: #efc46d; }
.studio-user .sb-btn { min-height: 36px; border-color: #344039; border-radius: 5px; }
.studio-user .main { min-width: 0; padding: 24px 28px 40px; background: var(--studio-bg); }
.studio-user .section { max-width: 1600px; margin: 0 auto; transform: none; }
.studio-user .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid #29322e; }
.studio-user .sec-head h2 { margin: 0; color: var(--studio-text); font-size: 21px; font-weight: 700; }
.studio-user .sec-head p { max-width: 680px; margin: 0; color: var(--studio-muted); text-align: right; }
.studio-user .card,
.studio-user .video-config-card,
.studio-user .video-queue-card {
  border: 1px solid var(--studio-line) !important;
  border-radius: 7px !important;
  background: var(--studio-panel) !important;
  box-shadow: none !important;
}
.studio-user .card { padding: 17px; margin-bottom: 14px; }
.studio-user .card::before { display: none; }
.studio-user .card-h { min-height: 34px; margin-bottom: 12px; }
.studio-user .card-h h3, .studio-user .vcc-header h3 { font-size: 14px; font-weight: 680; }
.studio-user .gen-layout,
.studio-user .video-layout { grid-template-columns: minmax(470px, 1.06fr) minmax(390px, .94fr); gap: 14px; }
.studio-user .gen-sidebar { top: 12px; max-height: calc(100vh - 86px); }
.studio-user .gen-sidebar .card { padding: 0; }
.studio-user .side-tabs,
.studio-user .video-side-tabs,
.studio-user .mode-row { border-color: #2b3530; background: #101512; }
.studio-user .mode-row { gap: 0; overflow: hidden; border: 1px solid #303b36; border-radius: 6px; }
.studio-user .mode-btn { min-height: 40px; border: 0; border-radius: 0; background: #101512; }
.studio-user .mode-btn + .mode-btn { border-left: 1px solid #303b36; }
.studio-user .mode-btn.active,
.studio-user .side-tab.active { color: #a8ebdd !important; background: #19352e !important; border-color: #3c7568 !important; box-shadow: inset 0 -2px #3bc0a5; }
.studio-user .side-tab { min-height: 43px; display: flex; align-items: center; justify-content: center; }
.studio-user .side-panel { background: #131815; }
.studio-user .pbox,
.studio-user .video-prompt-container,
.studio-user .upz,
.studio-user .optional-wrap { border-color: #34413b !important; border-radius: 6px !important; background: #101512 !important; }
.studio-user .pbox textarea { min-height: 150px; border: 0 !important; box-shadow: none !important; }
.studio-user .pbox-bar { min-height: 39px; border-color: #2c3631; }
.studio-user :where(input[type=text], input[type=password], input[type=number], input[type=email], select, textarea) {
  border-color: #34413b !important;
  border-radius: 5px !important;
  background: #101512 !important;
  color: var(--studio-text) !important;
}
.studio-user :where(input, select):not([type=checkbox]):not([type=radio]) { min-height: 40px; }
.studio-user :where(input, select, textarea):focus { border-color: #43bba4 !important; box-shadow: 0 0 0 3px rgba(47, 179, 154, .12) !important; }
.studio-user label.fl { color: #aab5af; font-size: 11px; text-transform: none; }
.studio-user .chip,
.studio-user .ratio-chip,
.studio-user .batch-pill,
.studio-user .preset-chip,
.studio-user .vh-range-btn,
.studio-user .mat-folder-chip {
  border: 1px solid #35413b !important;
  border-radius: 4px !important;
  background: #121714 !important;
  color: #b4beb9 !important;
}
.studio-user :where(.chip, .ratio-chip, .batch-pill, .preset-chip, .vh-range-btn, .mat-folder-chip):hover { border-color: #52645c !important; color: #fff !important; }
.studio-user .chip.act,
.studio-user .ratio-chip.act,
.studio-user .batch-pill.act,
.studio-user .preset-chip.applied,
.studio-user .vh-range-btn.active,
.studio-user .mat-folder-chip.active { border-color: #438073 !important; background: #1a382f !important; color: #a9eddf !important; box-shadow: none !important; }
.studio-user .btn { min-height: 36px; border-radius: 5px; box-shadow: none !important; transform: none !important; }
.studio-user .btn-pri,
.studio-user .btn-gen,
.studio-user .video-gen-btn { border: 1px solid #42bba3 !important; background: #229a83 !important; color: #fff !important; }
.studio-user :where(.btn-pri, .btn-gen, .video-gen-btn):hover:not(:disabled) { background: var(--studio-brand-hover) !important; }
.studio-user .btn-out { border: 1px solid #3a4740; background: #141a17; color: #bdc7c2; }
.studio-user .btn-out:hover:not(:disabled) { border-color: #596b62; background: #1b2521; color: #fff; }
.studio-user .btn-danger { border-color: #71373b; background: #321b1e; color: #ffb1b4; }
.studio-user .recent-trigger,
.studio-user .pbtn,
.studio-user .optional-toggle,
.studio-user .video-option-btn,
.studio-user .vh-date-apply { border-color: #3b4942 !important; border-radius: 4px !important; background: #151d19 !important; color: #bec8c3 !important; }
.studio-user .tq-list, .studio-user .video-queue-list { scrollbar-gutter: stable; }
.studio-user .tq-card,
.studio-user .vq-item { border: 1px solid #303b35; border-radius: 5px; background: #101512; }
.studio-user .tq-card:hover, .studio-user .vq-item:hover { border-color: #475b52; }
.studio-user .tq-st,
.studio-user .tag,
.studio-user .video-cost-badge { border-radius: 3px !important; }
.studio-user .tq-st.processing { background: #193a32; color: #8de0cf; }
.studio-user .tq-st.completed { background: #173526; color: #82d8a5; }
.studio-user .tq-st.failed { background: #351c20; color: #f5969a; }
.studio-user .hist-grid,
.studio-user .video-hist-grid { gap: 9px; }
.studio-user .hist-card,
.studio-user .video-thumb-card,
.studio-user .mat-item { border: 1px solid #303b35; border-radius: 5px; background: #101512; box-shadow: none; }
.studio-user .hist-card:hover,
.studio-user .video-thumb-card:hover,
.studio-user .mat-item:hover { border-color: #52665d; transform: none; }
.studio-user .hist-card .him,
.studio-user .video-thumb-card .vt-thumb { background: #0b0f0d; }
.studio-user .hc-btn,
.studio-user .vt-act-btn,
.studio-user .vq-copy-btn { border: 1px solid #53635b !important; border-radius: 4px !important; background: rgba(14, 19, 17, .92) !important; color: #e0e6e3 !important; }
.studio-user .vh-filter-bar,
.studio-user .vh-custom-row,
.studio-user .vhc-header,
.studio-user .vqc-header { border-color: #2c3631 !important; background: #111613 !important; }
.studio-user .video-cost-badge { border: 1px solid #5c4922; background: #2c2516; color: #d8c69e; }
.studio-user .video-cost-badge .cost-val { color: #f2c96c; }
.studio-user .video-upload-plus-btn { border: 1px dashed #4c756a !important; border-radius: 5px !important; background: #14221d !important; color: #83d8c7 !important; }
.studio-user .tbl-wrap { border: 1px solid #2d3732; border-radius: 5px; background: #111613; }
.studio-user table { font-size: 13px; }
.studio-user table thead { background: #0f1411; }
.studio-user table th { color: #8f9b95; text-transform: none; }
.studio-user table th, .studio-user table td { padding: 10px 12px; border-color: #29322e; }
.studio-user table tbody tr:hover { background: #19211e; }
.studio-user pre { border: 1px solid #303b35; background: #0e1210 !important; }
.studio-user .modal-mask,
.studio-user .video-modal-overlay { background: rgba(4, 7, 6, .86); backdrop-filter: blur(2px); }
.studio-user .modal,
.studio-user .video-modal-container { border: 1px solid #3b4842 !important; border-radius: 7px !important; background: #151a18 !important; box-shadow: var(--studio-shadow) !important; }
.studio-user .modal-h, .studio-user .modal-f, .studio-user .video-modal-footer { border-color: #2d3732 !important; }
.studio-user .toast { border-radius: 5px; background: #19211e; box-shadow: var(--studio-shadow); }

/* Administration */
.studio-admin { --accent: var(--studio-brand); --accent-soft: var(--studio-brand-soft); }
.studio-admin .shell { grid-template-columns: 228px minmax(0, 1fr); }
.studio-admin .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 17px 0 0;
  border-color: #28322d;
  background: #0f1412;
}
.studio-admin .logo { padding: 0 16px 15px; color: var(--studio-text); font-size: 17px; font-weight: 760; }
.studio-admin .logo::after { content: "CONTROL"; margin-left: 8px; color: #6d7b74; font-size: 9px; font-weight: 700; }
.studio-admin .sidebar .me { padding: 9px 16px 13px; border-color: #28322d; }
.studio-admin .sidebar .me .role { border-radius: 3px; background: #19352e; color: #9ee5d7; }
.studio-admin .nav { padding: 0 9px; }
.studio-admin .nav-item { min-height: 38px; padding: 8px 10px; border-radius: 5px; color: #9fa9a4; }
.studio-admin .nav-item:hover { background: #19221e; color: #fff; }
.studio-admin .nav-item.active { border-color: #37685d; background: #19342d; color: #b9f0e5; box-shadow: inset 3px 0 #39b9a0; }
.studio-admin .nav-item .ic { color: #86928c; }
.studio-admin .nav-item.active .ic { color: #6ed5c0; }
.studio-admin .nav-group-label { margin-top: 8px; padding: 14px 10px 6px; border-color: #28322d; color: #69766f; }
.studio-admin .sidebar .footer { padding: 11px 9px; border-color: #28322d; }
.studio-admin .main { min-width: 0; padding: 23px 27px 40px; background: var(--studio-bg); }
.studio-admin .section { max-width: 1700px; margin: 0 auto; }
.studio-admin .section > h2 { color: var(--studio-text); font-size: 20px; font-weight: 700; }
.studio-admin .section > .sub { margin-bottom: 15px; padding-bottom: 12px; border-color: #29322e; color: var(--studio-muted); }
.studio-admin .card,
.studio-admin .stat { border: 1px solid var(--studio-line); border-radius: 7px; background: var(--studio-panel); box-shadow: none; }
.studio-admin .card { padding: 16px; }
.studio-admin .card::before, .studio-admin .stat::before { display: none; }
.studio-admin .card-h { min-height: 34px; margin-bottom: 12px; }
.studio-admin .card-h h3 { font-size: 14px; font-weight: 680; }
.studio-admin .stats-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 9px; margin-bottom: 14px; }
.studio-admin .stat { min-height: 106px; padding: 14px; }
.studio-admin .stat:hover { border-color: #44534b; }
.studio-admin .stat-l { color: #a6b0ab; font-size: 11px; }
.studio-admin .stat-v { color: #f3f6f4; font-size: 22px; font-variant-numeric: tabular-nums; }
.studio-admin .stat-d { color: #75817b; }
.studio-admin .btn { min-height: 35px; border-radius: 5px; box-shadow: none !important; transform: none !important; }
.studio-admin .btn-pri { border: 1px solid #42bba3; background: #229a83; color: #fff; }
.studio-admin .btn-pri:hover:not(:disabled) { background: var(--studio-brand-hover); }
.studio-admin .btn-out { border: 1px solid #3a4740; background: #141a17; color: #bdc7c2; }
.studio-admin .btn-out:hover:not(:disabled) { border-color: #596b62; background: #1b2521; color: #fff; }
.studio-admin .btn-danger { border-color: #71373b; background: #321b1e; color: #ffb1b4; }
.studio-admin :where(input[type=text], input[type=password], input[type=number], input[type=email], select, textarea) {
  min-height: 39px;
  border: 1px solid #34413b;
  border-radius: 5px;
  background: #101512;
  color: var(--studio-text);
}
.studio-admin :where(input, select, textarea):focus { border-color: #43bba4; box-shadow: 0 0 0 3px rgba(47, 179, 154, .12); }
.studio-admin label.fl { color: #aab5af; text-transform: none; }
.studio-admin .tbl-wrap { border: 1px solid #2d3732; border-radius: 5px; background: #111613; }
.studio-admin table { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.studio-admin table thead { position: sticky; top: 0; z-index: 2; background: #0e1310; }
.studio-admin table th { color: #909c96; font-size: 11px; text-transform: none; }
.studio-admin table th, .studio-admin table td { padding: 9px 11px; border-color: #29322e; }
.studio-admin table tbody tr:hover { background: #19211e; }
.studio-admin .tag, .studio-admin .tl-elvl { border-radius: 3px; }
.studio-admin .tag-info { background: #19352e; color: #9ee5d7; }
.studio-admin .tag-ok { background: #173526; color: #82d8a5; }
.studio-admin .tag-warn { background: #312817; color: #efc46d; }
.studio-admin .tag-err { background: #351c20; color: #f5969a; }
.studio-admin .pager .pg { border-color: #35413b; border-radius: 4px; background: #121714; }
.studio-admin .modal-mask { background: rgba(4, 7, 6, .86); backdrop-filter: blur(2px); }
.studio-admin .modal { border: 1px solid #3b4842; border-radius: 7px; background: #151a18; box-shadow: var(--studio-shadow); }
.studio-admin .modal-h, .studio-admin .modal-f { border-color: #2d3732; }
.studio-admin .login-gate {
  background:
    linear-gradient(90deg, rgba(10, 14, 12, .68), rgba(10, 14, 12, .94)),
    url("/static/studio-login.webp") center/cover no-repeat;
}
.studio-admin .login-box { max-width: 390px; padding: 28px; border: 1px solid #3a4740; border-radius: 7px; background: #151a18; box-shadow: var(--studio-shadow); }
.studio-admin .login-box h2 { margin-bottom: 18px; text-align: left; font-size: 21px; }
.studio-admin .ql-toolbar.ql-snow, .studio-admin .ql-container.ql-snow { border-color: #34413b !important; background: #101512 !important; }
.studio-admin .toast { border-radius: 5px; background: #19211e; box-shadow: var(--studio-shadow); }

/* Responsive behavior shared by the product and control center. */
@media (max-width: 1180px) {
  .studio-user .gen-layout, .studio-user .video-layout { grid-template-columns: 1fr; }
  .studio-user .gen-sidebar { position: static; max-height: none; }
  .studio-user .video-right-col { min-height: 520px; }
  .studio-admin .stats-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 900px) {
  .studio-user .login-wrap.show { grid-template-columns: 1fr; }
  .studio-user .ll { display: none; }
  .studio-user .lr { align-items: center; padding: 18px; }
  .studio-user .login-card { max-width: 420px; max-height: calc(100vh - 36px); }
  .studio-user .app.show, .studio-admin .shell { grid-template-columns: 1fr; }
  .studio-user .sidebar, .studio-admin .sidebar {
    position: fixed;
    left: -244px;
    top: 0;
    bottom: 0;
    z-index: 80;
    width: 228px;
    height: 100vh;
    box-shadow: 16px 0 38px rgba(0, 0, 0, .34);
    transition: left .18s ease;
  }
  .studio-user .sidebar.open, .studio-admin .sidebar.open { left: 0; }
  .studio-user .main, .studio-admin .main { padding: 68px 14px 28px; }
  .studio-user .mobile-toggle, .studio-admin .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #3a4740;
    border-radius: 5px;
    background: #151a18;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
  }
  .studio-user .sec-head { display: block; }
  .studio-user .sec-head p { margin-top: 4px; text-align: left; }
  .studio-admin .card-h > div { flex-wrap: wrap !important; }
}
@media (max-width: 600px) {
  .studio-user .login-card { padding: 21px 17px; }
  .studio-user .main, .studio-admin .main { padding-right: 10px; padding-left: 10px; }
  .studio-user .card, .studio-user .video-config-card, .studio-admin .card { padding: 13px; }
  .studio-user .gen-layout, .studio-user .video-layout { display: block; }
  .studio-user .gen-sidebar, .studio-user .video-right-col { margin-top: 10px; }
  .studio-user .card-h, .studio-admin .card-h { align-items: stretch; }
  .studio-user .btn, .studio-user .mode-btn, .studio-user .side-tab, .studio-admin .btn { min-height: 42px; }
  .studio-user .video-cost-row { width: 100%; margin-left: 0; justify-content: space-between; }
  .studio-admin .stats-grid { grid-template-columns: 1fr 1fr; }
  .studio-admin .stat { min-height: 92px; padding: 11px; }
  .studio-admin .stat-v { font-size: 19px; }
  .studio-user .modal-mask, .studio-admin .modal-mask { padding: 8px; }
}
@media (max-width: 390px) {
  .studio-admin .stats-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.studio-user *, body.studio-user *::before, body.studio-user *::after,
  body.studio-admin *, body.studio-admin *::before, body.studio-admin *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .studio-user .ann-track { animation: none; padding-left: 16px; }
}


/* ── Commercial polish: icons, density, queue/history ── */
.studio-user .cap-icon,
.studio-user .tq-empty .ic,
.studio-user .mode-ic,
.studio-user .tab-ic,
.studio-user .pbtn-ic,
.studio-user .upz-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7ed7c5;
}
.studio-user .cap-icon svg { width: 16px; height: 16px; }
.studio-user .mode-row { gap: 8px; margin-bottom: 12px; }
.studio-user .mode-btn {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid #34423c;
  background: #101512;
  color: #a6b0ab;
  gap: 8px;
}
.studio-user .mode-btn.active {
  border-color: #3c7d6e;
  background: #18352e;
  color: #b9f0e5;
}
.studio-user .side-tabs {
  gap: 6px;
  padding: 4px;
  border: 1px solid #303b36;
  border-radius: 7px;
  background: #0f1311;
}
.studio-user .side-tab {
  min-height: 38px;
  border-radius: 5px;
  color: #93a09a;
  gap: 7px;
  font-weight: 600;
}
.studio-user .side-tab.active {
  background: #1a342d;
  color: #b6efe4;
  border-color: #386b60;
}
.studio-user .tab-badge {
  background: #229a83;
  color: #07120f;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 800;
}
.studio-user .tq-list,
.studio-user #v-queue {
  background: transparent;
}
.studio-user .tq-empty {
  min-height: 180px;
  color: #8f9b95;
  border: 1px dashed #33403a;
  border-radius: 7px;
  background: #111614;
}
.studio-user .tq-empty .ic {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 8px;
  border: 1px solid #365d53;
  background: #183029;
}
.studio-user .pbox {
  border-color: #35423c !important;
  border-radius: 7px !important;
  background: #101512 !important;
}
.studio-user .pbox:focus-within {
  border-color: #42baa3 !important;
  box-shadow: 0 0 0 3px rgba(47,179,154,.14) !important;
}
.studio-user .btn-gen,
.studio-user .btn-pri {
  min-height: 44px;
  border-radius: 6px !important;
  background: #229a83 !important;
  color: #07120f !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}
.studio-user .btn-gen:hover,
.studio-user .btn-pri:hover {
  background: #39c0a5 !important;
}
.studio-user .chips .chip,
.studio-user .batch-pill,
.studio-user .vh-range-btn {
  min-height: 34px;
  border-radius: 5px !important;
  border-color: #35423c !important;
  background: #101512 !important;
  color: #a6b0ab !important;
}
.studio-user .chips .chip.active,
.studio-user .batch-pill.act,
.studio-user .vh-range-btn.active {
  border-color: #3c7d6e !important;
  background: #18352e !important;
  color: #b9f0e5 !important;
}
.studio-user .sb-credits,
.studio-user #p-credits {
  color: #efc46d !important;
}
.studio-user .gen-layout,
.studio-user .video-layout {
  align-items: start;
}
.studio-user .gen-sidebar .card,
.studio-user .video-queue-card {
  min-height: 520px;
}
.studio-user select,
.studio-user input[type="text"],
.studio-user input[type="number"],
.studio-user input[type="password"],
.studio-user textarea {
  border-color: #35423c !important;
  border-radius: 6px !important;
  background: #101512 !important;
  color: #f0f4f2 !important;
}
.studio-user select:focus,
.studio-user input:focus,
.studio-user textarea:focus {
  border-color: #42baa3 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47,179,154,.14) !important;
}

/* Admin denser commercial control center */
.studio-admin .login-box h2 {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 740;
}
.studio-admin .login-box::before {
  display: none;
}
.studio-admin .logo {
  font-weight: 800;
  color: #f0f4f2;
}
.studio-admin .logo::after { display: none; }
.studio-admin .admin-login-brand,
.studio-admin .admin-sidebar-brand {
  display: flex;
  align-items: center;
  color: #f0f4f2;
}
.studio-admin .admin-login-brand {
  gap: 13px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #303b36;
}
.studio-admin .admin-sidebar-brand {
  gap: 9px;
  min-height: 54px;
}
.studio-admin .admin-login-brand img,
.studio-admin .admin-sidebar-brand img {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
}
.studio-admin .admin-login-brand img {
  width: 62px;
  height: 46px;
}
.studio-admin .admin-sidebar-brand img {
  width: 46px;
  height: 36px;
}
.studio-admin .admin-login-brand span,
.studio-admin .admin-sidebar-brand span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.studio-admin .admin-login-brand strong {
  font-size: 18px;
  font-weight: 760;
}
.studio-admin .admin-sidebar-brand strong {
  font-size: 15px;
  font-weight: 760;
}
.studio-admin .admin-login-brand small,
.studio-admin .admin-sidebar-brand small {
  margin-top: 3px;
  color: #87938d;
  font-size: 10px;
  font-weight: 600;
}
.studio-admin .me {
  border: 1px solid #303b36;
  border-radius: 7px;
  background: #141a17;
}
.studio-admin .nav-group-label {
  color: #6f7c76;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}
.studio-admin .section > h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 740;
}
.studio-admin .section > .sub {
  margin: 0 0 16px;
  color: #a6b0ab;
}
.studio-admin .card {
  border: 1px solid #2b3530 !important;
  border-radius: 7px !important;
  background: #151a18 !important;
  box-shadow: none !important;
}
.studio-admin table th {
  background: #121714;
  color: #8f9b95;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #2b3530;
}
.studio-admin table td {
  border-bottom: 1px solid #232b27;
  color: #e8eeeb;
}
.studio-admin .stat {
  border: 1px solid #2b3530;
  border-radius: 7px;
  background: #151a18;
}
.studio-admin .stat-v { color: #f0f4f2; font-weight: 780; }
.studio-admin .btn-pri {
  background: #229a83 !important;
  color: #07120f !important;
  border: none !important;
}
.studio-admin .btn-out {
  border-color: #3a4640 !important;
  background: #101512 !important;
  color: #d7e0db !important;
}
.studio-admin a { color: #79d6c3 !important; }

@media (max-width: 980px) {
  .studio-user .login-wrap.show { grid-template-columns: 1fr; }
  .studio-user .ll { min-height: auto; padding: 28px 22px 12px; }
  .studio-user .ll-hero { padding: 28px 0 12px; }
  .studio-user .ll-title { font-size: clamp(32px, 9vw, 48px); }
  .studio-user .ll-caps { grid-template-columns: 1fr; }
  .studio-user .lr { padding: 18px; }
  .studio-user .app.show { grid-template-columns: 1fr; }
}

/* Marked feedback refinements: unified gateway and compact video controls. */
.studio-user .login-wrap.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: #090d0b !important;
}
.studio-user .login-wrap::before {
  display: block !important;
  background:
    linear-gradient(180deg, rgba(5, 9, 7, .50), rgba(5, 9, 7, .80)),
    linear-gradient(90deg, rgba(5, 9, 7, .38), rgba(5, 9, 7, .12) 50%, rgba(5, 9, 7, .46)),
    url("/static/studio-login.webp") center 42% / cover no-repeat !important;
  opacity: 1;
}
.studio-user .login-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 13, 11, .12) 54%, rgba(8, 13, 11, .74) 100%);
}
.studio-user .login-wrap .ll {
  display: none !important;
}
.studio-user .login-wrap .lr {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.studio-user .login-card {
  width: min(100%, 416px);
  max-width: 416px;
  max-height: calc(100vh - 56px);
  padding: 30px;
  border-color: rgba(119, 144, 133, .48);
  border-radius: 8px;
  background: rgba(18, 24, 21, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
}
.studio-user .lc-brand-row {
  margin-bottom: 24px;
}
.studio-user .lc-title {
  font-size: 25px;
  line-height: 1.25;
}
.studio-user .lc-sub {
  margin-bottom: 22px;
}

.studio-user .video-duration-slider {
  box-sizing: border-box;
  min-width: 158px;
  height: 44px;
  padding: 0 12px;
  gap: 10px;
  border: 1px solid #35423c;
  border-radius: 6px;
  background: #101512;
  transition: border-color .15s ease, background-color .15s ease;
}
.studio-user .video-duration-slider:hover,
.studio-user .video-duration-slider:focus-within {
  border-color: #4b7066;
  background: #121916;
}
.studio-user .video-duration-slider input[type="range"] {
  width: 96px;
  height: 4px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 2px !important;
  background: #3b4943 !important;
  box-shadow: none !important;
  accent-color: #42bba3;
}
.studio-user .video-duration-slider input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #b9f0e5;
  border-radius: 50%;
  background: #269e87;
  box-shadow: 0 0 0 3px rgba(38, 158, 135, .16);
  transform: none;
}
.studio-user .video-duration-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: none;
  box-shadow: 0 0 0 4px rgba(66, 187, 163, .20);
}
.studio-user .video-duration-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #3b4943;
}
.studio-user .video-duration-slider input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #269e87;
}
.studio-user .video-duration-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #b9f0e5;
  border-radius: 50%;
  background: #269e87;
  box-shadow: 0 0 0 3px rgba(38, 158, 135, .16);
}
.studio-user .video-duration-slider span.dur-val {
  min-width: 28px;
  color: #dce6e1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.studio-user .video-cost-row {
  display: grid;
  grid-template-columns: max-content 120px;
  align-items: stretch;
  gap: 8px;
  min-height: 44px;
  margin-left: auto;
}
.studio-user .video-cost-badge {
  min-height: 44px;
  padding: 0 12px;
  justify-content: center;
  border-color: #4a4230;
  border-radius: 6px !important;
  background: #211e17;
  color: #aeb7b2;
  font-size: 12px;
}
.studio-user .video-cost-badge .cost-val {
  color: #eac46f;
  font-variant-numeric: tabular-nums;
}
.studio-user .video-gen-btn {
  box-sizing: border-box;
  width: 120px;
  min-width: 120px;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;
  justify-content: center;
  gap: 7px;
  border-radius: 6px !important;
  font-size: 13px;
  line-height: 1;
}
.studio-user .video-gen-btn .gen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

@media (max-width: 600px) {
  .studio-user .login-wrap.show {
    align-items: center;
    padding: 16px;
  }
  .studio-user .login-wrap .lr {
    padding: 0;
  }
  .studio-user .login-card {
    max-height: calc(100vh - 32px);
    padding: 24px 20px;
  }
  .studio-user .video-cost-row {
    grid-template-columns: minmax(0, 1fr) 120px;
    width: 100%;
    margin-left: 0;
  }
}

@media (max-height: 680px) {
  .studio-user .login-wrap.show {
    align-items: flex-start;
    overflow-y: auto;
  }
  .studio-user .login-card {
    max-height: none;
  }
}

/* Lanshang AI gateway. Scoped to auth so the workspace skin stays unchanged. */
.studio-user .login-wrap.show {
  display: grid !important;
  grid-template-columns: minmax(0, 58fr) minmax(400px, 42fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: #ffffff !important;
  color: #162235;
}
.studio-user .login-wrap::before,
.studio-user .login-wrap::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.studio-user #login-canvas { display: none !important; }

.studio-user .login-wrap .ll {
  display: flex !important;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 44px clamp(44px, 7vw, 110px) 38px !important;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  background: #3157e8 !important;
  color: #ffffff;
}
.studio-user .login-wrap .ll::before,
.studio-user .login-wrap .ll::after,
.studio-user .login-wrap .lr::after { display: none !important; }
.studio-user .login-wrap .ll-nav {
  width: 100%;
  max-width: 720px;
}
.studio-user .login-wrap .ll-logo { gap: 0; }
.studio-user .login-wrap .brand-logo-left {
  box-sizing: border-box;
  width: 200px;
  height: 76px;
  padding: 0;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
}
.studio-user .login-wrap .ll-logo > div { display: none; }
.studio-user .login-wrap .ll-nav-tag {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
}
.studio-user .login-wrap .ll-hero {
  width: 100%;
  max-width: 720px;
  justify-content: center;
  padding: 50px 0 34px;
}
.studio-user .login-wrap .ll-eyebrow {
  margin-bottom: 16px;
  color: #d8eaff;
  font-size: 13px;
  font-weight: 600;
}
.studio-user .login-wrap .ll-eyebrow::before,
.studio-user .login-wrap .ll-eyebrow::after { display: none; }
.studio-user .login-wrap .ll-title {
  max-width: 720px;
  margin: 0 0 18px;
  color: #ffffff !important;
  font-size: 46px;
  font-weight: 760;
  line-height: 1.22;
  text-wrap: balance;
}
.studio-user .login-wrap .ll-title .t-accent {
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}
.studio-user .login-wrap .ll-type-wrap {
  min-height: 52px;
  max-width: 650px;
  margin-bottom: 38px;
}
.studio-user .login-wrap .ll-type-text {
  background: none !important;
  color: #d8eaff !important;
  font-size: 17px;
  line-height: 1.75;
  -webkit-text-fill-color: currentColor !important;
}
.studio-user .login-wrap .ll-type-cursor { background: #ffffff; }
.studio-user .login-wrap .ll-caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 34px;
  margin: 0 0 26px;
  border: 0;
}
.studio-user .login-wrap .ll-cap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.studio-user .login-wrap .ll-cap:not(:last-child) {
  border-right: 0 !important;
}
.studio-user .login-wrap .ll-cap:last-child { grid-column: 1 / -1; }
.studio-user .login-wrap .ll-cap::before { display: none !important; }
.studio-user .login-wrap .ll-cap .cap-icon,
.studio-user .login-wrap .ll-cap:nth-child(n) .cap-icon {
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 5px;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff;
}
.studio-user .login-wrap .ll-cap:nth-child(2) .cap-icon { color: #d9f99d; }
.studio-user .login-wrap .ll-cap:nth-child(3) .cap-icon { color: #99f6e4; }
.studio-user .login-wrap .ll-cap .cap-en {
  display: none;
  color: #c7e1ff;
  font-size: 11px;
}
.studio-user .login-wrap .ll-cap .cap-title {
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 15px;
}
.studio-user .login-wrap .ll-cap .cap-desc {
  grid-column: 2;
  color: #e5f1ff;
  font-size: 12px;
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-user .login-wrap .ll-footer {
  width: 100%;
  max-width: 720px;
  padding-top: 18px;
  border-color: rgba(255, 255, 255, .25);
}
.studio-user .login-wrap .ll-stat:not(:last-child) {
  border-color: rgba(255, 255, 255, .25);
}
.studio-user .login-wrap .ll-stat .sv {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}
.studio-user .login-wrap .ll-stat .sk {
  color: #c7e1ff;
  font-size: 11px;
}

.studio-user .login-wrap .lr {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px clamp(38px, 5vw, 76px) !important;
  overflow-y: auto;
  background: #ffffff !important;
  box-shadow: none !important;
}
.studio-user .login-wrap .login-card {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 420px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #162235;
  animation: none !important;
  backdrop-filter: none !important;
}
.studio-user .login-wrap .lc-brand-row {
  align-items: center;
  gap: 0;
  display: none;
  margin-bottom: 38px;
}
.studio-user .login-wrap .brand-logo-card {
  box-sizing: border-box;
  width: 170px;
  height: 64px;
  object-fit: contain;
  background: #ffffff;
}
.studio-user .login-wrap .lc-brand-row > div { display: none; }
.studio-user .login-wrap .lc-title {
  margin-bottom: 8px;
  color: #14213d !important;
  font-size: 30px;
  font-weight: 760;
  line-height: 1.25;
}
.studio-user .login-wrap .lc-sub {
  margin-bottom: 28px;
  color: #5d6b82 !important;
  font-size: 14px;
  line-height: 1.65;
}
.studio-user .login-wrap .lc-tabs {
  min-height: 42px;
  margin-bottom: 26px;
  padding: 3px;
  border: 0 !important;
  border-radius: 6px;
  background: #edf3fb !important;
}
.studio-user .login-wrap .lc-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px;
  border-radius: 4px;
  color: #617089;
  font-size: 13px;
}
.studio-user .login-wrap .lc-tab.active {
  background: #ffffff !important;
  color: #1267d8 !important;
  box-shadow: 0 1px 4px rgba(23, 55, 95, .12) !important;
}
.studio-user .login-wrap .lf { margin-bottom: 16px; }
.studio-user .login-wrap .lf label {
  margin-bottom: 7px;
  color: #34445e !important;
  font-size: 13px;
  font-weight: 650;
}
.studio-user .login-wrap .lf label span { color: #718096 !important; }
.studio-user .login-wrap .lf-inp {
  box-sizing: border-box;
  min-height: 50px;
  border: 1px solid #cbd6e5 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.studio-user .login-wrap .lf-inp:hover { border-color: #91a4bd !important; }
.studio-user .login-wrap .lf-inp:focus-within {
  border-color: #1267d8 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(18, 103, 216, .12) !important;
}
.studio-user .login-wrap .lf-inp .icon { opacity: 1; }
.studio-user .login-wrap .lf-inp .icon svg { stroke: #718096; }
.studio-user .login-wrap .lf input {
  color: #17243a !important;
  caret-color: #1267d8;
}
.studio-user .login-wrap .lf input::placeholder { color: #68778d !important; }
.studio-user .login-wrap .lf-remember {
  align-items: flex-start;
  margin: 6px 0 16px;
  color: #526177 !important;
  line-height: 1.5;
}
.studio-user .login-wrap .lf-remember input,
.studio-user .login-wrap .auth-agreement input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #1267d8;
}
.studio-user .login-wrap .lf-remember .note { color: #77859a !important; }
.studio-user .login-wrap .l-err {
  margin: 4px 0 12px;
  color: #c62828 !important;
  line-height: 1.45;
}
.studio-user .login-wrap .btn-auth {
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 6px !important;
  background: #3157e8 !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none !important;
  transform: none !important;
}
.studio-user .login-wrap .btn-auth:hover:not(:disabled) { background: #2447cf !important; }
.studio-user .login-wrap .btn-auth:active:not(:disabled) { background: #1d3bb4 !important; }
.studio-user .login-wrap .btn-auth:disabled { opacity: .58; }
.studio-user .login-wrap .btn-auth::before,
.studio-user .login-wrap .btn-auth::after { display: none !important; }
.studio-user .login-wrap .auth-agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  color: #59677b;
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
}
.studio-user .login-wrap .auth-agreement input { flex: 0 0 auto; }
.studio-user .login-wrap .policy-link {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1267d8;
  font: inherit;
  cursor: pointer;
}
.studio-user .login-wrap .policy-link:hover { color: #084a9f; text-decoration: underline; }
.studio-user .login-wrap .lc-switch {
  margin-top: 17px;
  color: #718096 !important;
}
.studio-user .login-wrap .lc-switch button { color: #1267d8 !important; }
.studio-user .login-wrap .lc-switch button:hover { color: #084a9f !important; }
.studio-user .login-wrap .l-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-color: #e4eaf2;
  color: #8390a3;
}

.studio-user .policy-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  height: min(78vh, 760px);
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  color: #223047;
  box-shadow: 0 18px 48px rgba(18, 38, 68, .24);
}
.studio-user .policy-dialog[open] { display: flex; flex-direction: column; }
.studio-user .policy-dialog::backdrop { background: rgba(10, 27, 50, .56); }
.studio-user .dialog-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e1e8f1;
  background: #ffffff;
}
.studio-user .dialog-heading h2 {
  margin: 0 0 5px;
  color: #14213d;
  font-size: 20px;
  line-height: 1.35;
}
.studio-user .dialog-heading p {
  margin: 0;
  color: #718096;
  font-size: 12px;
}
.studio-user .dialog-close {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #edf3fb;
  color: #34445e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.studio-user .dialog-close:hover { background: #dfe9f6; color: #1267d8; }
.studio-user .dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 24px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #34445e;
  font-size: 14px;
  line-height: 1.85;
}
.studio-user .dialog-content h3 {
  margin: 24px 0 8px;
  color: #14213d;
  font-size: 16px;
  line-height: 1.45;
}
.studio-user .dialog-content p { max-width: 72ch; margin: 0 0 10px; }
.studio-user .dialog-content ol,
.studio-user .dialog-content ul { margin: 0 0 12px; padding-left: 24px; }
.studio-user .dialog-content li { margin-bottom: 6px; }

.studio-user .boot-brand-logo {
  width: 210px;
  height: 96px;
  object-fit: contain;
  background: #ffffff;
}
.studio-user .sb-brand-logo {
  width: 94px;
  height: 38px;
  object-fit: contain;
  border-radius: 4px;
  background: #ffffff;
}

@media (max-width: 1120px) {
  .studio-user .login-wrap.show {
    grid-template-columns: minmax(0, 55fr) minmax(390px, 45fr) !important;
  }
  .studio-user .login-wrap .ll { padding-inline: 38px !important; }
  .studio-user .login-wrap .ll-title { font-size: 42px; }
}

@media (max-width: 900px) {
  .studio-user .login-wrap.show {
    display: block !important;
    min-height: 100vh;
    overflow-y: auto;
  }
  .studio-user .login-wrap .ll { display: none !important; }
  .studio-user .login-wrap .lr {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 34px 24px !important;
  }
  .studio-user .login-wrap .login-card { max-width: 430px !important; }
  .studio-user .login-wrap .lc-brand-row { display: flex; }
}

@media (max-width: 520px) {
  .studio-user .login-wrap .lr {
    align-items: flex-start;
    padding: 24px 18px 30px !important;
  }
  .studio-user .login-wrap .brand-logo-card {
    width: 154px;
    height: 58px;
  }
  .studio-user .login-wrap .lc-brand-row { margin-bottom: 26px; }
  .studio-user .login-wrap .lc-title { font-size: 24px; }
  .studio-user .login-wrap .lf-remember { flex-wrap: wrap; }
  .studio-user .login-wrap .lf-remember .note {
    display: block;
    width: 100%;
    padding-left: 23px;
  }
  .studio-user .policy-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }
  .studio-user .dialog-header { padding: 18px 16px 15px; }
  .studio-user .dialog-content { padding: 4px 16px 22px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .studio-user .login-wrap .ll {
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
  .studio-user .login-wrap .brand-logo-left {
    width: 168px;
    height: 64px;
  }
  .studio-user .login-wrap .ll-hero { padding: 25px 0 18px; }
  .studio-user .login-wrap .ll-title {
    margin-bottom: 10px;
    font-size: 39px;
  }
  .studio-user .login-wrap .ll-type-wrap {
    min-height: 31px;
    margin-bottom: 20px;
  }
  .studio-user .login-wrap .ll-type-text { font-size: 15px; }
  .studio-user .login-wrap .ll-caps {
    gap: 15px 30px;
    margin-bottom: 12px;
  }
  .studio-user .login-wrap .ll-footer { padding-top: 12px; }
  .studio-user .login-wrap .lr {
    align-items: flex-start;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .studio-user .login-wrap .lc-sub { margin-bottom: 17px; }
  .studio-user .login-wrap .lc-tabs { margin-bottom: 18px; }
  .studio-user .login-wrap .lf { margin-bottom: 12px; }
  .studio-user .login-wrap .l-foot {
    margin-top: 16px;
    padding-top: 12px;
  }
}

/* Login polish: quiet brand panel, transparent logo, focused auth surface. */
.studio-user .login-wrap.show {
  grid-template-columns: minmax(0, 56fr) minmax(420px, 44fr) !important;
  background: #f4f7fb !important;
}
.studio-user .login-wrap .ll {
  padding: 40px clamp(48px, 7vw, 112px) 36px !important;
  background: #172554 !important;
}
.studio-user .login-wrap .ll-nav,
.studio-user .login-wrap .ll-hero,
.studio-user .login-wrap .ll-footer {
  max-width: 680px;
}
.studio-user .login-wrap .ll-nav {
  align-items: center;
}
.studio-user .login-wrap .ll-logo {
  min-width: 0;
}
.studio-user .login-wrap .brand-logo-left {
  width: 158px;
  height: 72px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(4, 10, 31, .18));
}
.studio-user .login-wrap .ll-nav-tag {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 500;
}
.studio-user .login-wrap .ll-hero {
  justify-content: center;
  padding: 34px 0 28px;
}
.studio-user .login-wrap .ll-eyebrow {
  margin-bottom: 18px;
  color: #91a9e8;
  font-size: 13px;
  font-weight: 600;
}
.studio-user .login-wrap .ll-title {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: 48px;
  font-weight: 720;
  line-height: 1.18;
}
.studio-user .login-wrap .ll-type-wrap {
  min-height: 50px;
  max-width: 580px;
  margin-bottom: 38px;
}
.studio-user .login-wrap .ll-type-text {
  color: rgba(241, 245, 255, .76) !important;
  font-size: 16px;
  line-height: 1.75;
}
.studio-user .login-wrap .ll-type-cursor {
  background: #7dd3c7;
}
.studio-user .login-wrap .ll-caps {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 580px;
  margin-bottom: 0;
}
.studio-user .login-wrap .ll-cap:last-child {
  grid-column: auto;
}
.studio-user .login-wrap .ll-cap {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 50px;
  column-gap: 15px;
}
.studio-user .login-wrap .ll-cap .cap-icon,
.studio-user .login-wrap .ll-cap:nth-child(n) .cap-icon {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: #3157e8 !important;
  color: #ffffff;
}
.studio-user .login-wrap .ll-cap:nth-child(2) .cap-icon {
  background: #cc5c52 !important;
  color: #ffffff;
}
.studio-user .login-wrap .ll-cap:nth-child(3) .cap-icon {
  background: #218477 !important;
  color: #ffffff;
}
.studio-user .login-wrap .ll-cap .cap-title {
  margin-bottom: 1px;
  font-size: 14px;
  font-weight: 650;
}
.studio-user .login-wrap .ll-cap .cap-desc {
  color: rgba(232, 238, 255, .66);
  font-size: 12px;
}
.studio-user .login-wrap .ll-footer {
  justify-content: flex-start;
  gap: 32px;
  padding-top: 16px;
  border-color: rgba(255, 255, 255, .14);
}
.studio-user .login-wrap .ll-stat {
  flex: 0 1 150px;
}
.studio-user .login-wrap .ll-stat:not(:last-child) {
  padding-right: 30px;
  border-color: rgba(255, 255, 255, .14);
}
.studio-user .login-wrap .ll-stat .sv {
  font-size: 14px;
  font-weight: 650;
}
.studio-user .login-wrap .ll-stat .sk {
  margin-top: 3px;
  color: rgba(226, 233, 255, .58);
  font-size: 10px;
}

.studio-user .login-wrap .lr {
  align-items: center;
  justify-content: center;
  padding: 38px clamp(34px, 5vw, 74px) !important;
  background: #f4f7fb !important;
}
.studio-user .login-wrap .login-card {
  max-width: 438px !important;
  padding: 38px 40px 32px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 44px rgba(20, 35, 72, .10) !important;
}
.studio-user .login-wrap .lc-title {
  margin-bottom: 9px;
  color: #16213b !important;
  font-size: 28px;
  font-weight: 720;
}
.studio-user .login-wrap .lc-sub {
  margin-bottom: 26px;
  color: #647087 !important;
}
.studio-user .login-wrap .lc-tabs {
  margin-bottom: 24px;
  background: #eef2f7 !important;
}
.studio-user .login-wrap .lc-tab {
  color: #657187;
}
.studio-user .login-wrap .lc-tab.active {
  color: #284fc9 !important;
  box-shadow: 0 1px 3px rgba(30, 48, 82, .12) !important;
}
.studio-user .login-wrap .lf {
  margin-bottom: 15px;
}
.studio-user .login-wrap .lf label {
  color: #33415a !important;
  font-weight: 600;
}
.studio-user .login-wrap .lf-inp {
  min-height: 49px;
  border-color: #d6deea !important;
  background: #f9fbfd !important;
}
.studio-user .login-wrap .lf-inp:hover {
  border-color: #aebbd0 !important;
}
.studio-user .login-wrap .lf-inp:focus-within {
  border-color: #3157e8 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(49, 87, 232, .12) !important;
}
.studio-user .login-wrap .lf-inp .icon svg {
  stroke: #7a879b;
}
.studio-user .login-wrap .lf input {
  color: #17233a !important;
  caret-color: #3157e8;
}
.studio-user .login-wrap .lf input::placeholder {
  color: #6f7d91 !important;
}
.studio-user .login-wrap .lf-remember input,
.studio-user .login-wrap .auth-agreement input {
  accent-color: #3157e8;
}
.studio-user .login-wrap .btn-auth {
  min-height: 49px;
  background: #3157e8 !important;
}
.studio-user .login-wrap .btn-auth:hover:not(:disabled) {
  background: #2748c5 !important;
}
.studio-user .login-wrap .btn-auth:active:not(:disabled) {
  background: #203ba5 !important;
}
.studio-user .login-wrap .policy-link,
.studio-user .login-wrap .lc-switch button {
  color: #3157e8 !important;
}
.studio-user .login-wrap .policy-link:hover,
.studio-user .login-wrap .lc-switch button:hover {
  color: #203ba5 !important;
}
.studio-user .login-wrap .l-foot {
  color: #8a96a8;
}

.studio-user .boot-brand-logo,
.studio-user .sb-brand-logo,
.studio-user .login-wrap .brand-logo-card {
  background: transparent !important;
}
.studio-user .boot-brand-logo,
.studio-user .sb-brand-logo {
  border-radius: 0;
}

@media (max-width: 1120px) {
  .studio-user .login-wrap.show {
    grid-template-columns: minmax(0, 52fr) minmax(410px, 48fr) !important;
  }
  .studio-user .login-wrap .ll {
    padding-inline: 42px !important;
  }
  .studio-user .login-wrap .ll-title {
    font-size: 42px;
  }
}

@media (max-width: 900px) {
  .studio-user .login-wrap.show,
  .studio-user .login-wrap .lr {
    background: #f4f7fb !important;
  }
  .studio-user .login-wrap .lr {
    align-items: flex-start;
    padding: 28px 20px !important;
  }
  .studio-user .login-wrap .login-card {
    max-width: 440px !important;
    margin: 0 auto;
    padding: 32px 34px 28px !important;
  }
  .studio-user .login-wrap .lc-brand-row {
    justify-content: flex-start;
    margin-bottom: 26px;
  }
  .studio-user .login-wrap .brand-logo-card {
    width: 132px;
    height: 66px;
    padding: 0;
    border-radius: 0;
    filter: drop-shadow(0 2px 2px rgba(33, 51, 91, .08));
  }
}

@media (max-width: 520px) {
  .studio-user .login-wrap .lr {
    padding: 16px 12px 22px !important;
  }
  .studio-user .login-wrap .login-card {
    max-width: 100% !important;
    padding: 26px 22px 24px !important;
    border-radius: 7px !important;
    box-shadow: 0 8px 24px rgba(20, 35, 72, .09) !important;
  }
  .studio-user .login-wrap .lc-brand-row {
    margin-bottom: 20px;
  }
  .studio-user .login-wrap .brand-logo-card {
    width: 120px;
    height: 60px;
  }
  .studio-user .login-wrap .lc-title {
    font-size: 24px;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .studio-user .login-wrap .ll {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
  }
  .studio-user .login-wrap .brand-logo-left {
    width: 136px;
    height: 62px;
  }
  .studio-user .login-wrap .ll-hero {
    padding: 18px 0 12px;
  }
  .studio-user .login-wrap .ll-title {
    font-size: 38px;
  }
  .studio-user .login-wrap .ll-type-wrap {
    margin-bottom: 18px;
  }
  .studio-user .login-wrap .ll-caps {
    gap: 12px;
  }
  .studio-user .login-wrap .ll-footer {
    padding-top: 10px;
  }
  .studio-user .login-wrap .lr {
    align-items: flex-start;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  .studio-user .login-wrap .login-card {
    padding: 26px 34px 24px !important;
  }
  .studio-user .login-wrap .lc-sub {
    margin-bottom: 16px;
  }
  .studio-user .login-wrap .lc-tabs {
    margin-bottom: 16px;
  }
  .studio-user .login-wrap .lf {
    margin-bottom: 11px;
  }
}

/* Keep the light authentication surface isolated from the dark studio form theme. */
.studio-user .login-wrap {
  color-scheme: light;
}
.studio-user .login-wrap .lf-inp > input[type="text"],
.studio-user .login-wrap .lf-inp > input[type="password"] {
  min-height: 47px;
  padding: 11px 14px 11px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.studio-user .login-wrap .lf-inp > input[type="text"]:focus,
.studio-user .login-wrap .lf-inp > input[type="password"]:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.studio-user .login-wrap .lf-remember input[type="checkbox"],
.studio-user .login-wrap .auth-agreement input[type="checkbox"] {
  appearance: auto;
  display: block;
  flex: 0 0 15px;
  align-self: center;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  min-height: 15px !important;
  max-height: 15px;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 3px;
  background: #ffffff !important;
  box-shadow: none !important;
  accent-color: #3157e8;
}
.studio-user .login-wrap .lf-remember,
.studio-user .login-wrap .auth-agreement {
  align-items: center;
  line-height: 20px;
}
.studio-user .login-wrap .lf-remember > span,
.studio-user .login-wrap .auth-agreement > span {
  min-width: 0;
  line-height: 20px;
}