/* Index workspace VI refresh. Visual-only overrides for the dynamic storyboard UI. */


 
:root {
  --vi-bg: #0b0d12;
  --vi-surface: #121620;
  --vi-surface-2: #171c27;
  --vi-surface-3: #1c2230;
  --vi-line: #293241;
  --vi-line-soft: #202631;
  --vi-text: #f5f7fb;
  --vi-muted: #8f98a8;
  --vi-accent: #7b61ff;
  --vi-accent-hover: #917dff;
  --vi-teal: #42d2c1;
  --vi-green: #86d55a;
  --vi-danger: #ff7785;
  --vi-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}
html, body { background: var(--vi-bg) !important; color: var(--vi-text); color-scheme: dark; }
body { font-family: "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.5; }
button, input, textarea, select { font-family: inherit; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: 68px; height: auto; padding: 12px 22px; gap: 14px; background: #0f131b !important; border-bottom: 1px solid var(--vi-line-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.topbar .brand-mini { display: flex !important; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--vi-text) !important; font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.topbar .brand-mini .site-logo { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 11px !important; border: 1px solid #3a4160 !important; background: #191d2b !important; box-shadow: 0 5px 16px rgba(0, 0, 0, .28) !important; }
.topbar .brand-mini span { display: block !important; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.topbar-tools { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.topbar-tools > .btn { min-height: 34px; padding: 7px 11px; border-radius: 8px; font-size: 12px; }
.auth-card { display: flex; align-items: center; gap: 7px; }
.auth-card input, .auth-card select { height: 34px; min-width: 106px; padding: 0 10px; background: #171c26 !important; border: 1px solid #353d4d !important; border-radius: 8px; color: var(--vi-text) !important; color-scheme: dark; }
.auth-card .btn { min-height: 34px; padding: 7px 13px; }
.auth-card .tiny { color: var(--vi-muted); font-size: 10px; }
.auth-card.signed strong { color: var(--vi-text); font-size: 13px; }
.layout { grid-template-columns: minmax(250px, var(--sidebar-width, 300px)) 10px minmax(0, 1fr); min-height: calc(100vh - 68px); background: var(--vi-bg); }
.sidebar { position: sticky; top: 68px; height: calc(100vh - 68px); overflow: auto; background: #10141c !important; border-right: 1px solid var(--vi-line-soft); scrollbar-color: #30394a transparent; }
.layout-resizer { width: 10px; background: #0e1219 !important; }
.layout-resizer::after { left: 4px; width: 2px; background: #2c3545; }
.layout-resizer:hover::after, .layout-resizer:focus-visible::after { left: 3px; width: 4px; background: var(--vi-accent); }
.side-top { display: none; }
.side-section { padding: 16px 16px 17px; border-bottom: 1px solid var(--vi-line-soft); }
.side-section:first-of-type { padding-top: 18px; }
.section-title { margin: 0 0 10px; color: #e5e8ef; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.project-management .project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 8px; }
.project-management .project-row input, .project-management .project-select, .project-select, .api-row input { height: 35px; min-width: 0; padding: 0 10px; background: #171c26 !important; border: 1px solid #333c4b !important; border-radius: 8px; color: var(--vi-text) !important; }
.project-management .project-row input { width: 100%; font-size: 13px; font-weight: 700; }
.project-management .project-select { width: 100%; margin-bottom: 8px; }
.project-management .side-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.project-management .side-actions .btn { min-height: 34px; padding: 7px 5px; font-size: 12px; }
.project-management .autosave { margin-top: 10px; color: var(--vi-muted); font-size: 11px; }
.hint, .autosave-time { color: var(--vi-muted) !important; font-size: 11px; }
.server-title { margin-bottom: 8px; }
.server-title .section-title { margin-bottom: 0; }
.server-item { padding: 10px; background: var(--vi-surface-2) !important; border: 1px solid var(--vi-line); border-radius: 9px; }
.server-item.active { background: #1b2030 !important; border-color: #5d50b6; box-shadow: inset 2px 0 0 var(--vi-accent); }
.server-info strong { color: #edf0f6; font-size: 12px; }
.server-info > span, .server-status-note { color: var(--vi-muted) !important; }
.server-actions { gap: 5px; margin-top: 8px; }
.server-actions .icon-btn { min-height: 30px; padding: 6px 8px; }
.ratio-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ratio { min-height: 66px; padding: 6px 2px; background: #171c26 !important; border: 1px solid #303949; border-radius: 8px; color: #9ba4b4; font-size: 10px; }
.ratio:hover { border-color: #59647a; background: #1c2330 !important; }
.ratio.active { background: #211d42 !important; border-color: var(--vi-accent); color: #d3cdff; box-shadow: 0 0 0 2px rgba(123, 97, 255, .14); }
.ratio-shape { border-width: 1px; }
.script-import textarea, .side-section textarea { width: 100%; min-height: 170px; padding: 11px; background: #0e131b !important; border: 1px solid #343d4d !important; border-radius: 9px; color: #e9ecf2 !important; font-size: 12px; line-height: 1.55; }
.main { min-width: 0; padding: 24px 26px 54px; background: var(--vi-bg) !important; }
.main-head { display: flex !important; align-items: center !important; gap: 16px; margin-bottom: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--vi-line-soft); }
.main:not(.global-settings-page) .main-head > div:first-child { display: block !important; flex: 1 1 auto; min-width: 0; }
.main-head h1 { margin: 0; color: #f8f9fc; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.main-head p { color: var(--vi-muted); font-size: 12px; }
.main-head .top-tools { flex: 0 0 auto; }
.top-tools { gap: 7px; }
.top-tools .btn { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.settings { grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 8px; margin-bottom: 18px; }
.setting-card { min-height: 67px; padding: 12px 14px; background: var(--vi-surface) !important; border: 1px solid var(--vi-line-soft); border-radius: 9px; box-shadow: none; }
.setting-card span { color: var(--vi-muted); font-size: 11px; }
.setting-card strong { margin-top: 3px; color: var(--vi-text); font-size: 21px; line-height: 1; }
.setting-card:nth-child(2) strong { color: var(--vi-green); }
.setting-card:nth-child(3) strong { color: var(--vi-accent-hover); }
.shot-list { gap: 14px; }
.shot { overflow: hidden; background: var(--vi-surface) !important; border: 1px solid var(--vi-line); border-radius: 12px; box-shadow: var(--vi-shadow); }
.shot.active-shot { border-color: #665bd0; box-shadow: 0 0 0 2px rgba(123, 97, 255, .15), var(--vi-shadow); }
.shot-head { display: flex; align-items: center; min-height: 52px; padding: 9px 14px !important; background: var(--vi-surface-2) !important; border-bottom: 1px solid var(--vi-line-soft); }
.shot-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.shot-heading .shot-title { color: #f4f6fb; font-size: 15px !important; font-weight: 800; }
.shot-heading .shot-meta { color: var(--vi-muted); font-size: 11px !important; }
.shot-actions { margin-left: auto; gap: 6px; }
.shot-actions .btn { min-height: 32px; padding: 6px 10px; border-radius: 7px; font-size: 11px; }
.shot-actions .shot-copy { background: #202736; border-color: #3a4558; }
.shot-actions .shot-delete { min-width: 0 !important; min-height: 32px !important; padding: 6px 10px !important; background: #2a1820 !important; border: 1px solid #693541 !important; color: #ff9aa4 !important; font-size: 11px !important; }
.shot-body { grid-template-columns: minmax(0, var(--shot-split, 50%)) 10px minmax(0, 1fr); gap: 0; align-items: stretch; padding: 12px !important; background: var(--vi-surface) !important; }
.shot-panel { min-width: 0; overflow: hidden; background: #151a24 !important; border: 1px solid var(--vi-line); border-radius: 10px; }
.shot-split-resizer { width: 10px; min-width: 10px; background: #151a24; }
.shot-split-resizer::after { left: 4px; width: 2px; background: #30394a; }
.shot-split-resizer:hover::after { left: 3px; width: 4px; background: var(--vi-accent); }
.panel-content { padding: 14px !important; }
.script-pane textarea { min-height: 164px; padding: 12px; background: #0d1219 !important; border: 1px solid #374153 !important; border-radius: 8px; color: #eef1f6 !important; font-size: 13px; line-height: 1.6; }
.script-pane textarea:focus { border-color: var(--vi-accent) !important; box-shadow: 0 0 0 3px rgba(123, 97, 255, .14); }
.script-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.script-actions .btn { width: 100%; min-height: 38px; padding: 8px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: normal; line-height: 1.25; }
.btn { min-height: 38px; padding: 8px 13px; background: #1b2230; border: 1px solid #364154; border-radius: 8px; color: #e8ebf2; box-shadow: none; transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease; }
.btn:hover { background: #252d3c; border-color: #59657c; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--vi-accent) !important; border-color: var(--vi-accent) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(123, 97, 255, .25); }
.btn.primary:hover { background: var(--vi-accent-hover) !important; border-color: var(--vi-accent-hover) !important; }
.btn.purple { background: #204e57 !important; border-color: #2b8990 !important; color: #b9fff4 !important; }
.btn.purple:hover { background: #27636d !important; border-color: #42d2c1 !important; }
.btn.ghost { background: #171d28 !important; border-color: #364154 !important; color: #e6e9ef !important; }
.btn.danger { background: #2a1820 !important; border-color: #693541 !important; color: #ff9aa4 !important; }
.asset-area { margin-top: 14px; }
.asset-group-title { margin-bottom: 8px; color: #adb6c5; font-size: 11px; font-weight: 700; }
.asset-area .media-slot-row { gap: 7px; padding-bottom: 5px; }
.asset-area .media-slot-row .slot-wrap { width: 66px; min-width: 66px; max-width: 66px; }
.asset-area .media-slot-row .tile { width: 58px; min-width: 58px; max-width: 58px; height: 58px; min-height: 58px; max-height: 58px; background: #0f151e; border: 1px dashed #3d485b; border-radius: 8px; }
.asset-area .media-slot-row .slot-name { color: #8f99a9; font-size: 10px; }
.asset-area .media-slot-row .file-name, .asset-area .media-slot-row .slot-alias { color: #788395; font-size: 9px; }
.status { min-height: 52px; margin-top: 10px; padding: 8px 10px; background: #10151e !important; border: 1px solid var(--vi-line); border-radius: 8px; color: #7f8a9d; font-size: 11px; }
.status.ok { background: #15251d !important; border-color: #315d42; color: #9bdd72; }
.status.error { background: #29171e !important; border-color: #63313c; color: #ff9da7; }
.video-pane.shot-panel { background: #111722 !important; border-color: #334052; box-shadow: none; }
.video-pane .panel-content { padding: 12px !important; }
.video-pane .preview-box { position: relative; aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; border: 1px solid #3e4b60 !important; border-radius: 9px; background: #090d13 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.video-pane .preview-box video, .video-pane .preview-box img { background: #090d13; }
.preview-empty { gap: 5px; color: #9ba5b5; }
.preview-empty strong { color: #e9edf4; font-size: 15px; }
.preview-empty small { color: #7f899b; font-size: 11px; }
.preview-camera { color: #68758b; font-size: 28px; }
.video-ratio-badge, .video-history-label { background: rgba(11, 15, 23, .86); color: #e5e9f2; }
.video-controls { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.video-controls .duration { display: flex; align-items: center; gap: 6px; }
.video-controls .duration-label { color: var(--vi-muted); font-size: 11px; }
.video-controls .duration select { width: 62px; min-width: 62px; height: 36px; padding: 0 7px; background: #171d28 !important; border: 1px solid #364154 !important; border-radius: 7px; color: var(--vi-text) !important; font-size: 12px; }
.video-controls .generate-btn, .video-controls .video-secondary-btn { min-height: 36px; padding: 7px 10px; border-radius: 7px; font-size: 11px; }
.video-controls .generate-btn { background: var(--vi-accent) !important; border-color: var(--vi-accent) !important; }
.video-controls .video-download-link { color: #b8c0ce; }
.video-controls .history-video-btn.active { background: #1b5a58; border-color: #42d2c1; color: #d4fff9; }
.progress-line { margin-top: 10px; color: #8792a4; font-size: 10px; }
.progress-line b { color: #c4baff; }
.bar { height: 4px; margin-top: 5px; background: #252d3a; }
.bar i { background: var(--vi-accent); }
.debug { background: #11161f !important; border-top: 1px solid var(--vi-line-soft); }
.debug details { background: #151b25; border-color: var(--vi-line); }
.debug summary { color: #aeb6c4; font-size: 11px; }
.debug pre { background: #0a0e14; color: #cbd3df; }
.asset-library-inline .btn, .asset-library-switch .btn { min-height: 36px; font-size: 11px; }
.asset-library-inline .project-select { height: 36px; min-width: 170px; padding: 0 9px; background: #201d42 !important; border: 1px solid #5d50b6 !important; border-radius: 8px; color: #ded9ff !important; font-size: 11px; }
.reference-library-backdrop { background: rgba(3, 5, 9, .72) !important; }
.reference-library-modal { background: var(--vi-surface) !important; border: 1px solid var(--vi-line) !important; border-radius: 11px; box-shadow: 0 28px 80px rgba(0, 0, 0, .5); }
.reference-library-header, .reference-library-footer { background: var(--vi-surface-2) !important; border-color: var(--vi-line); }
.reference-library-body { background: #0f141c !important; }
.reference-library-asset { background: #171d28 !important; border-color: #354052; color: #e8ebf2; }
.reference-library-asset:hover { background: #222a38 !important; border-color: var(--vi-accent-hover); }
.toast { background: #f2f4f8 !important; color: #161a23 !important; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.guest { max-width: 680px; margin: 90px auto; padding: 38px; background: var(--vi-surface) !important; border: 1px solid var(--vi-line); border-radius: 12px; box-shadow: var(--vi-shadow); }
.guest h1 { color: var(--vi-text); font-size: 24px; }
.guest p { color: var(--vi-muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible { outline: 2px solid var(--vi-accent-hover); outline-offset: 2px; }
@media (max-width: 1180px) { .main { padding: 20px 18px 42px; } .main-head { flex-wrap: wrap; } .main-head .top-tools { margin-left: auto; } .asset-library-inline { flex-basis: 100%; order: 3; } .asset-library-inline .project-select { max-width: none; width: 100%; } }
@media (max-width: 760px) { .topbar { padding: 10px 13px; } .topbar .brand-mini span { max-width: calc(100vw - 90px); font-size: 14px; } .topbar-tools { width: 100%; margin-left: 0; } .topbar-tools > .btn { flex: 1 1 0; } .auth-card { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .auth-card .btn { width: 100%; } .layout { display: block; } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--vi-line-soft); } .main { padding: 16px 12px 34px; } .main-head { display: grid !important; gap: 10px; padding-bottom: 14px; } .main-head .top-tools { margin-left: 0; } .top-tools .btn { flex: 1 1 0; min-width: 0; } .settings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .setting-card { min-height: 61px; padding: 10px 8px; } .setting-card strong { font-size: 18px; } .shot-body { grid-template-columns: 1fr !important; gap: 10px; padding: 10px !important; } .shot-split-resizer { display: none; } .shot-head { align-items: flex-start; flex-wrap: wrap; } .shot-actions { width: 100%; margin-left: 0; } .shot-actions .btn { flex: 1 1 0; } .script-actions { grid-template-columns: 1fr 1fr; } .video-controls { align-items: stretch; flex-wrap: wrap; } .video-controls .duration { flex: 1 1 100%; } .video-controls .duration select { width: 100%; flex: 1; } .video-controls .generate-btn, .video-controls .video-secondary-btn { flex: 1 1 0; } .guest { margin: 36px 14px; padding: 26px 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

:root {
  --vi-bg: #0a0d12;
  --vi-surface: #151a23;
  --vi-surface-2: #1c2431;
  --vi-surface-3: #222c3a;
  --vi-line: #3b4758;
  --vi-line-soft: #2c3645;
  --vi-text: #f7f9fc;
  --vi-muted: #b0bac9;
  --vi-accent: #7f6bff;
  --vi-accent-hover: #9a89ff;
  --vi-teal: #35d3c0;
  --vi-green: #9ade68;
  --vi-danger: #ff8995;
}
html, body { background: var(--vi-bg) !important; color: var(--vi-text) !important; }
body { font-size: 13px; }
.side-section, .main-head, .shot-head { border-color: var(--vi-line-soft) !important; }
.section-title, .field-label, .asset-group-title { color: #eef2f8 !important; }
.hint, .autosave, .autosave-time, .shot-meta, .slot-name, .file-name, .slot-alias { color: var(--vi-muted) !important; }
.project-management .project-row input, .project-management .project-select, .project-select, .api-row input, .auth-card input, .auth-card select, .video-controls .duration select { background: #1b2430 !important; border-color: #4a586b !important; color: #f7f9fc !important; -webkit-text-fill-color: #f7f9fc; }
.project-management .project-row input::placeholder, .auth-card input::placeholder, .script-pane textarea::placeholder { color: #9da8b8 !important; }
.btn { background: #222c3a !important; border-color: #4a586b !important; color: #f5f7fb !important; }
.btn:hover { background: #2d3949 !important; border-color: #6b7a90 !important; }
.btn.primary { background: var(--vi-accent) !important; border-color: var(--vi-accent) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(127,107,255,.32); }
.btn.primary:hover { background: var(--vi-accent-hover) !important; border-color: var(--vi-accent-hover) !important; }
.btn.purple { background: #12636a !important; border-color: #35d3c0 !important; color: #e4fffb !important; }
.btn.purple:hover { background: #197d81 !important; border-color: #76f0e1 !important; }
.btn.ghost { background: #202a38 !important; border-color: #4a586b !important; color: #f2f5fa !important; }
.btn.danger, .shot-actions .shot-delete { background: #3a1e27 !important; border-color: #87505e !important; color: #ffb0b8 !important; }
.topbar { background: #10151d !important; border-bottom-color: #334052 !important; }
.sidebar { background: #121821 !important; border-right-color: #334052 !important; }
.main { background: var(--vi-bg) !important; }
.setting-card, .shot { background: var(--vi-surface) !important; border-color: var(--vi-line) !important; }
.setting-card span { color: #b6c0ce !important; }
.setting-card strong { color: #ffffff !important; }
.setting-card:nth-child(2) strong { color: var(--vi-green) !important; }
.setting-card:nth-child(3) strong { color: var(--vi-accent-hover) !important; }
.shot-head { background: var(--vi-surface-2) !important; }
.shot-panel { background: #1a212c !important; border-color: var(--vi-line) !important; }
.shot-body { background: var(--vi-surface) !important; }
.script-pane textarea { background: #111821 !important; border-color: #4a586b !important; color: #f5f7fb !important; }
.script-pane textarea:focus { border-color: var(--vi-accent) !important; box-shadow: 0 0 0 3px rgba(127,107,255,.2); }
.status { background: #141c26 !important; border-color: #435166 !important; color: #aeb9c9 !important; }
.status.ok { background: #183022 !important; border-color: #4b8659 !important; color: #b8f08f !important; }
.status.error { background: #3a1e27 !important; border-color: #87505e !important; color: #ffb0b8 !important; }
.video-pane.shot-panel { background: #18212d !important; border-color: #516175 !important; }
.video-pane .preview-box { background: #080c12 !important; border-color: #596a80 !important; }
.video-pane .preview-box video, .video-pane .preview-box img { background: #080c12 !important; }
.preview-empty, .preview-empty small { color: #b5c0cf !important; }
.preview-empty strong { color: #f1f4f9 !important; }
.preview-camera { color: #8c9ab0 !important; }
.video-controls .duration-label, .progress-line { color: #c2cbd8 !important; }
.video-controls .duration select { width: 72px; min-width: 72px; padding-left: 8px; padding-right: 6px; }
.video-controls { gap: 8px; }
.video-controls .generate-btn, .video-controls .video-secondary-btn { min-height: 36px; padding: 7px 11px; font-size: 11px; }
.video-controls .generate-btn { background: #725cff !important; border-color: #9b8bff !important; color: #fff !important; }
.video-controls .video-download-link { background: #263242 !important; color: #f0f4f9 !important; }
.video-controls .history-video-btn.active { background: #176b68 !important; border-color: var(--vi-teal) !important; color: #e4fffb !important; }
.progress-line b { color: #d8d1ff !important; }
.bar { background: #303b4c !important; }
.bar i { background: var(--vi-teal) !important; }
.script-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
.script-actions .btn { min-height: 40px; padding: 8px 6px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.script-actions .asset-library-trigger { background: #2e255f !important; border-color: #8d7cff !important; color: #eeeaff !important; }
.script-actions .asset-library-trigger:hover { background: #40327d !important; border-color: #b3a8ff !important; }
.script-actions .auto-reason-button, .script-actions [data-action="match-reference-content"] { background: #222c3a !important; border-color: #4a586b !important; color: #f5f7fb !important; }
.script-actions .auto-reason-button:hover, .script-actions [data-action="match-reference-content"]:hover { background: #2d3949 !important; border-color: #7b8aa0 !important; }
.shot { border-width: 1px !important; border-style: solid !important; border-color: #445267 !important; }
.shot-panel { border-width: 1px !important; border-style: solid !important; }
.reference-library-inline .project-select { min-width: 170px; width: 170px; }
.reference-library-inline .btn { min-height: 36px; }
.reference-library-modal { border-color: #526177 !important; }
.reference-library-header, .reference-library-footer { border-color: #3e4b5d !important; }
.reference-library-asset { color: #f0f3f8 !important; border-color: #4c596c !important; }
@media (max-width: 1180px) { .script-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .script-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .video-controls .duration { flex: 1 1 100%; } .video-controls .duration select { width: 100%; } }

:root { --vi-muted: #c0c9d6; --vi-line: #465468; --vi-line-soft: #334052; }
.hint, .autosave, .autosave-time, .shot-meta, .slot-name, .file-name, .slot-alias, .duration-label, .progress-line { color: #c0c9d6 !important; }
.section-title, .field-label, .asset-group-title, .generation-preference > span { color: #f2f5fa !important; }
.btn { color: #f8fafc !important; background: #273344 !important; border-color: #56657a !important; }
.btn:hover { background: #354358 !important; border-color: #8190a5 !important; }
.btn.primary { background: #765fff !important; border-color: #a294ff !important; color: #fff !important; }
.btn.purple { background: #117b78 !important; border-color: #4ce2cf !important; color: #f0fffd !important; }

.script-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; }
.script-actions .btn { min-height: 42px !important; padding: 8px 6px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important; }
.script-actions .btn.purple { background: #117b78 !important; border-color: #4ce2cf !important; color: #f0fffd !important; }
.script-actions [data-action="auto-match-library"] { background: #315d9b !important; border-color: #79a9f5 !important; color: #f5f9ff !important; }
.script-actions [data-action="match-reference-content"] { background: #344354 !important; border-color: #718198 !important; color: #f5f8fc !important; }
.script-actions .asset-library-trigger { background: #5239a6 !important; border-color: #a99aff !important; color: #fff !important; }
.script-actions [data-action="auto-match-library"]:hover { background: #3d73ba !important; }
.script-actions [data-action="match-reference-content"]:hover { background: #46566b !important; }
.script-actions .asset-library-trigger:hover { background: #6a4bc7 !important; }

.shot-generation-row { gap: 6px !important; padding-top: 9px !important; margin-top: 9px !important; border-top-color: #334052 !important; }
.shot-generation-row .generation-preference { gap: 4px !important; }
.shot-generation-row .generation-preference select { width: auto !important; min-width: 52px !important; max-width: 58px !important; height: 34px !important; padding: 0 5px !important; font-size: 11px !important; text-align: center; }
.shot-generation-row .generation-preference:nth-of-type(2) select { min-width: 58px !important; max-width: 62px !important; }
.shot-generation-row .duration select { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 34px !important; padding: 0 4px !important; font-size: 11px !important; }
.shot-generation-row .generate-btn { min-height: 36px !important; padding: 7px 12px !important; background: #765fff !important; border-color: #a294ff !important; color: #fff !important; }

.shot { border: 1px solid #59697e !important; }
.shot-panel { border: 1px solid #4b5b70 !important; }
@media (max-width: 1180px) { .script-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .script-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .shot-generation-row .generation-preference, .shot-generation-row .duration, .shot-generation-row .generate-btn { flex: 1 1 calc(50% - 4px) !important; } .shot-generation-row .generation-preference select, .shot-generation-row .duration select { width: 100% !important; max-width: none !important; } }

.shot-generation-row { align-items: center !important; gap: 6px !important; }
.shot-generation-row .h3-template-select { display:inline-block!important; width:190px!important; min-width:190px!important; max-width:190px!important; }
@media (min-width: 761px) { .shot-generation-row { display:grid!important; grid-template-columns:190px 92px 58px 72px max-content max-content max-content!important; grid-auto-flow:row!important; flex-wrap:nowrap!important; overflow-x:auto; } .shot-generation-row > .generation-preference, .shot-generation-row > .duration, .shot-generation-row > .btn { width:auto!important; min-width:0!important; max-width:none!important; flex:none!important; margin-left:0!important; } .shot-generation-row > .generation-preference select { width:100%!important; min-width:0!important; max-width:none!important; } .shot-generation-row>.generation-preference:nth-of-type(1){grid-column:2}.shot-generation-row>.generation-preference:nth-of-type(2){grid-column:3}.shot-generation-row>.duration{grid-column:4}.shot-generation-row>.btn[data-action="optimize-h3"]{grid-column:5}.shot-generation-row>.btn[data-action="auto-match-library"]{grid-column:6}.shot-generation-row>.btn[data-action="match-reference-content"]{grid-column:7} }
.shot-generation-row > .btn { min-height: 36px !important; padding: 7px 10px !important; border-radius: 8px !important; background: #273344 !important; border: 1px solid #56657a !important; color: #f8fafc !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important; }
.shot-generation-row > .btn:hover { background: #354358 !important; border-color: #8190a5 !important; }
.shot-generation-row > [data-action="open-reference-library"] { background: #5239a6 !important; border-color: #a99aff !important; color: #fff !important; }
.shot-generation-row > [data-action="open-reference-library"]:hover { background: #6a4bc7 !important; border-color: #c0b6ff !important; }
.shot-generation-row > [data-action="optimize-h3"] { background: #117b78 !important; border-color: #4ce2cf !important; color: #f0fffd !important; }
.shot-generation-row > [data-action="optimize-h3"]:hover { background: #197d81 !important; border-color: #76f0e1 !important; }
.shot-generation-row > [data-action="auto-match-library"] { background: #315d9b !important; border-color: #79a9f5 !important; color: #f5f9ff !important; }
.shot-generation-row > [data-action="auto-match-library"]:hover { background: #3d73ba !important; }
.shot-generation-row > [data-action="match-reference-content"] { background: #344354 !important; border-color: #718198 !important; color: #f5f8fc !important; }
.shot-generation-row > [data-action="match-reference-content"]:hover { background: #46566b !important; }
.shot-generation-row > .generate-btn { background: #765fff !important; border-color: #a294ff !important; color: #fff !important; box-shadow: 0 5px 14px rgba(127,107,255,.3); }
.asset-library-after-slots .generate-btn { background: #765fff !important; border-color: #a294ff !important; color: #fff !important; box-shadow: 0 5px 14px rgba(127,107,255,.3); }
.shot-generation-row > .generate-btn:hover { background: #9a89ff !important; border-color: #c1b7ff !important; }
.shot-generation-row > .generation-preference select, .shot-generation-row > .duration select { color: #f7f9fc !important; -webkit-text-fill-color: #f7f9fc; background: #1b2430 !important; border-color: #4a586b !important; }
@media (max-width: 1180px) { .shot-generation-row > .btn { flex: 0 0 auto !important; } }
@media (max-width: 760px) { .shot-generation-row > .btn, .shot-generation-row > .generation-preference, .shot-generation-row > .duration, .shot-generation-row > .generate-btn { flex: 1 1 calc(50% - 4px) !important; } }

.reference-library-backdrop { z-index: 80 !important; background: rgba(3, 6, 10, .78) !important; backdrop-filter: blur(5px); }
.reference-library-modal { display: flex !important; flex-direction: column !important; min-width: 420px; min-height: 320px; overflow: hidden !important; background: #151b25 !important; border: 1px solid #59697e !important; border-radius: 10px !important; color: #f7f9fc !important; box-shadow: 0 30px 90px rgba(0,0,0,.58) !important; }
.reference-library-header { flex: 0 0 58px; height: 58px !important; padding: 0 15px !important; background: #202938 !important; border-bottom: 1px solid #445267 !important; cursor: grab; }
.reference-library-header:active { cursor: grabbing; }
.reference-library-title { display: grid !important; align-content: center; gap: 1px !important; min-width: 0; }
.reference-library-title span { color: #b8c2d0 !important; font-size: 11px !important; line-height: 1.25; }
.reference-library-title strong { overflow: hidden; color: #fff !important; font-size: 16px !important; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.reference-library-header-actions { display: flex; align-items: center; gap: 7px !important; margin-left: auto; }
.reference-library-header-actions .btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 7px !important; font-size: 11px !important; }
.reference-library-header-actions .icon-btn { display: grid; width: 32px; min-width: 32px; height: 32px; padding: 0 !important; place-items: center; background: #2a3545 !important; border: 1px solid #59697e !important; border-radius: 7px !important; color: #f8fafc !important; font-size: 19px; line-height: 1; }
.reference-library-header-actions .icon-btn:hover { background: #3b2630 !important; border-color: #9a5968 !important; color: #ffb5bd !important; }
.reference-library-body { flex: 1 1 auto !important; min-height: 0; height: auto !important; overflow: auto !important; padding: 16px !important; background: #101620 !important; scrollbar-color: #526177 #161d28; scrollbar-width: thin; }
.reference-library-group { margin: 0 0 20px !important; }
.reference-library-group:last-child { margin-bottom: 2px !important; }
.reference-library-group h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px !important; color: #f5f7fb !important; font-size: 13px; font-weight: 800; }
.reference-library-group h4::after { content: ""; flex: 1; height: 1px; background: #344154; }
.reference-library-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important; gap: 10px !important; }
.reference-library-asset { min-width: 0; padding: 7px !important; gap: 7px !important; background: #1b2430 !important; border: 1px solid #46566b !important; border-radius: 8px !important; color: #f4f7fb !important; box-shadow: none !important; transition: background .16s ease, border-color .16s ease, transform .16s ease !important; }
.reference-library-asset:hover { background: #273448 !important; border-color: #9b8bff !important; box-shadow: 0 0 0 2px rgba(127,107,255,.16) !important; transform: translateY(-1px); }
.reference-library-asset:focus-visible { outline: 2px solid #a99aff; outline-offset: 2px; }
.reference-library-asset .asset-preview { display: flex; min-height: 110px !important; height: 110px; align-items: center; justify-content: center; overflow: hidden; background: #0b1017 !important; border: 1px solid #303c4d; border-radius: 6px !important; }
.reference-library-asset .asset-preview img { display: block; width: 100%; height: 110px !important; object-fit: contain !important; background: #0b1017; }
.reference-library-asset > span:last-child { color: #eef2f8 !important; font-size: 11px !important; font-weight: 700; }
.reference-library-asset .asset-preview-empty, .reference-library-asset .asset-local-path { color: #aeb9c8 !important; font-size: 10px !important; }
.reference-library-asset.is-empty, .reference-library-asset:disabled { opacity: .62 !important; }
.reference-library-body > .library-empty, .reference-library-grid > .library-empty { padding: 24px 16px !important; background: #171f2a !important; border: 1px dashed #526177 !important; border-radius: 8px !important; color: #bdc6d3 !important; text-align: center; }
.reference-library-footer { flex: 0 0 auto; min-height: 52px; padding: 9px 14px !important; background: #202938 !important; border-top: 1px solid #445267 !important; color: #bec7d4 !important; }
.reference-library-footer-actions { gap: 7px !important; }
.reference-library-resize { width: 22px !important; height: 22px !important; }
.reference-library-resize::after { right: 5px !important; bottom: 5px !important; width: 8px !important; height: 8px !important; border-color: #8f9eb2 !important; }

.main.settings-open > .global-settings-page { background: #0b0f15 !important; color: #f7f9fc !important; scrollbar-color: #526177 transparent; }
.global-settings-page { max-width: 1380px !important; grid-template-columns: 210px minmax(0, 1fr) !important; column-gap: 22px !important; }
.settings-page-head { align-items: center !important; margin-bottom: 20px !important; padding-bottom: 17px !important; border-bottom-color: #334052 !important; }
.settings-page-head h1 { color: #fff !important; font-size: 27px !important; font-weight: 800; }
.settings-page-head p { color: #b7c1cf !important; font-size: 12px; }
.global-settings-page .settings-page-back { min-height: 36px !important; background: #202a38 !important; border-color: #536278 !important; color: #f4f7fb !important; }
.global-settings-page .settings-tabs { position: sticky !important; top: 18px !important; min-height: 0 !important; padding: 8px !important; background: #121923 !important; border: 1px solid #344154 !important; border-radius: 9px !important; }
.global-settings-page .settings-tab { min-height: 43px !important; padding: 10px 12px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 7px !important; color: #c0cad7 !important; font-size: 13px !important; font-weight: 700 !important; }
.global-settings-page .settings-tab:hover { background: #202a38 !important; border-color: #3f4d60 !important; color: #fff !important; }
.global-settings-page .settings-tab.active { background: #31265f !important; border-color: #735fe0 !important; color: #fff !important; box-shadow: inset 3px 0 0 #a294ff !important; }
.global-settings-page > .settings-tab-panel { max-height: none !important; overflow: visible !important; padding: 0 !important; }
.global-settings-stack { gap: 14px !important; }
.global-settings-page .settings-panel { overflow: hidden; background: #151c26 !important; border: 1px solid #445267 !important; border-radius: 9px !important; box-shadow: 0 14px 34px rgba(0,0,0,.24) !important; }
.global-settings-page .settings-panel::before { height: 2px !important; background: #7f6bff !important; }
.global-settings-page .settings-panel-title { gap: 3px !important; padding: 14px 18px !important; background: #202938 !important; border-bottom: 1px solid #3d4a5d !important; color: #fff !important; }
.global-settings-page .settings-panel-title strong { color: #fff !important; font-size: 14px !important; }
.global-settings-page .settings-panel-title span { color: #b9c3d0 !important; font-size: 11px !important; }
.global-settings-page .settings-panel .side-section { padding: 17px 18px !important; background: #151c26 !important; color: #f5f7fb !important; }
.global-settings-page .settings-panel .side-section + .side-section { border-top-color: #344154 !important; }
.global-settings-page .section-title, .global-settings-page h3, .global-settings-page h4, .global-settings-page strong { color: #f6f8fb; }
.global-settings-page .hint, .global-settings-page small, .global-settings-page label, .global-settings-page .online-api-meta, .global-settings-page .online-api-state { color: #b8c2d0 !important; }
.global-settings-page input:not([type="checkbox"]):not([type="radio"]), .global-settings-page select, .global-settings-page textarea { background: #101720 !important; border: 1px solid #4a596e !important; color: #f7f9fc !important; -webkit-text-fill-color: #f7f9fc; }
.global-settings-page input::placeholder, .global-settings-page textarea::placeholder { color: #929fb0 !important; -webkit-text-fill-color: #929fb0; }
.global-settings-page input:focus, .global-settings-page select:focus, .global-settings-page textarea:focus { border-color: #907dff !important; box-shadow: 0 0 0 3px rgba(127,107,255,.18) !important; }
.global-settings-page .h3-provider-tabs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 7px !important; }
.global-settings-page .h3-provider-tabs button { min-height: 39px !important; padding: 0 12px !important; background: #1c2532 !important; border: 1px solid #46566b !important; color: #c4cedb !important; text-align: center !important; }
.global-settings-page .h3-provider-tabs button:hover { background: #273448 !important; color: #fff !important; }
.global-settings-page .h3-provider-tabs button.active { background: #31265f !important; border-color: #806bea !important; color: #fff !important; box-shadow: inset 0 -2px 0 #a99aff !important; }
.global-settings-page .online-api-panel { gap: 10px !important; }
.global-settings-page .online-api-toolbar { padding-bottom: 2px; }
.global-settings-page .online-api-list { gap: 8px !important; }
.global-settings-page .online-api-card, .global-settings-page .api-config-card, .global-settings-page .online-api-detail { background: #19222e !important; border: 1px solid #46566b !important; border-radius: 8px !important; }
.global-settings-page .online-api-card { padding: 10px 12px !important; }
.global-settings-page .online-api-card.active { background: #292550 !important; border-color: #8876ed !important; box-shadow: inset 3px 0 0 #a294ff; }
.global-settings-page .online-api-avatar { background: #2a3545 !important; color: #eef2f8 !important; }
.global-settings-page .online-api-card.active .online-api-avatar { background: #6654cb !important; color: #fff !important; }
.global-settings-page .online-api-name { color: #fff !important; }
.global-settings-page .online-api-state { background: #222c3a !important; border-color: #445267 !important; }
.global-settings-page .online-api-actions .btn { min-height: 30px !important; }
.global-settings-page .online-api-detail { padding: 15px !important; }
.global-settings-page .online-api-detail-head { border-bottom-color: #3a4759 !important; }
.global-settings-page .online-api-switch, .global-settings-page .online-models { background: #141c26 !important; border-color: #445267 !important; }
.global-settings-page .online-api-segment button { background: #1c2532 !important; border-color: #46566b !important; color: #c4cedb !important; }
.global-settings-page .online-api-segment button.active { background: #31265f !important; border-color: #806bea !important; color: #fff !important; }
.global-settings-page .api-config-list { padding: 15px 18px !important; }
.global-settings-page .api-config-card { padding: 14px !important; }

.global-settings-page .user-info-body { padding: 18px; color: #f6f8fb; }
.global-settings-page .profile-overview { gap: 8px !important; margin-bottom: 14px !important; }
.global-settings-page .profile-stat, .global-settings-page .member-plan, .global-settings-page .device-box { background: #19222e !important; border: 1px solid #445267 !important; border-radius: 8px; }
.global-settings-page .profile-stat { padding: 12px !important; }
.global-settings-page .profile-stat small, .global-settings-page .member-plan small, .global-settings-page .device-box small { color: #b8c2d0 !important; }
.global-settings-page .profile-stat strong, .global-settings-page .device-box strong, .global-settings-page .member-plan h4 { color: #fff !important; }
.global-settings-page .profile-stat.accent, .global-settings-page .member-plan.active { background: #292550 !important; border-color: #8876ed !important; box-shadow: inset 3px 0 0 #a294ff !important; }
.global-settings-page .profile-stat.accent strong { color: #c8c0ff !important; }
.global-settings-page .member-plans { gap: 9px !important; margin: 12px 0 16px !important; }
.global-settings-page .member-plan { padding: 13px !important; }
.global-settings-page .member-plan .price { color: #fff; }
.global-settings-page .device-box { gap: 10px !important; padding: 13px !important; }
.global-settings-page .device-box > div { min-width: 0; padding: 8px 10px; background: #141c26; border-radius: 6px; }
.global-settings-page .device-box strong { display: block; overflow-wrap: anywhere; }
.global-settings-page .user-edit-grid label { color: #c6cfdb !important; }
.global-settings-page .user-info-actions { display: flex; justify-content: flex-end; margin: 12px 0 20px; }
.global-settings-page .recharge-list { background: #141c26; border: 1px solid #3f4d60; border-radius: 8px; }
.global-settings-page .recharge-list > div { border-bottom-color: #344154 !important; color: #eef2f8; }

.server-list { display: grid !important; gap: 6px !important; margin-top: 8px !important; }
.server-item { display: grid !important; grid-template-columns: minmax(92px,1fr) auto !important; align-items: center !important; gap: 7px !important; min-height: 38px; padding: 6px 7px !important; border-radius: 7px !important; }
.server-info { display: flex !important; align-items: center !important; gap: 7px !important; min-width: 0; }
.server-name-row { flex: 0 1 auto; gap: 5px !important; min-width: 0; }
.server-name-row strong { overflow: hidden; max-width: 92px; color: #f5f7fb !important; font-size: 11px !important; text-overflow: ellipsis; white-space: nowrap; }
.server-status-dot { width: 7px !important; height: 7px !important; box-shadow: none !important; }
.server-status-text { display: none !important; }
.server-info > span { flex: 1 1 auto; min-width: 0; color: #aeb9c8 !important; font-size: 10px !important; }
.server-status-note { display: none !important; }
.server-actions { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 3px !important; margin: 0 !important; white-space: nowrap; }
.server-toggle { gap: 3px !important; color: #c2cbd7 !important; font-size: 10px !important; }
.server-toggle input { width: 13px; height: 13px; margin: 0; accent-color: #7f6bff !important; }
.server-actions .icon-btn { min-height: 27px !important; height: 27px; padding: 4px 6px !important; background: #263140 !important; border: 1px solid #4a596e !important; border-radius: 6px !important; color: #edf1f7 !important; font-size: 10px !important; line-height: 1; }
.server-actions .icon-btn:hover { background: #354358 !important; border-color: #77869a !important; }
.server-actions .icon-btn.danger { background: #3a1e27 !important; border-color: #87505e !important; color: #ffb0b8 !important; }
.server-title { margin-bottom: 7px !important; }
.server-title .btn { min-height: 30px !important; padding: 5px 9px !important; }
.workflow-picker { gap: 4px !important; margin-top: 8px !important; }
.workflow-picker label { color: #c4ceda !important; font-size: 10px !important; }
.workflow-picker select { height: 32px !important; }
.server-list + .hint, .workflow-picker + .hint { margin-top: 6px !important; font-size: 10px !important; line-height: 1.4; }
.global-settings-page .server-item { grid-template-columns: minmax(180px,1fr) auto !important; }
.global-settings-page .server-name-row strong { max-width: 180px; }
@media (max-width: 900px) { .global-settings-page { grid-template-columns: 170px minmax(0,1fr) !important; } .global-settings-page .online-api-summary { grid-template-columns: 28px minmax(0,1fr) auto !important; } .global-settings-page .online-api-drag { display: none; } }
@media (max-width: 760px) { .reference-library-modal { left: 10px !important; top: 10px !important; width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; min-width: 0 !important; min-height: 0 !important; } .reference-library-header { flex-basis: auto; min-height: 58px; height: auto !important; padding: 9px 10px !important; } .reference-library-header-actions { gap: 5px !important; } .reference-library-header-actions .btn { padding: 6px 7px !important; } .reference-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .global-settings-page { display: block !important; } .global-settings-page .settings-tabs { position: static !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; margin-bottom: 12px !important; } .global-settings-page .settings-panel .side-section, .global-settings-page .user-info-body { padding: 14px !important; } .global-settings-page .profile-overview, .global-settings-page .member-plans { grid-template-columns: 1fr 1fr !important; } .server-item { grid-template-columns: minmax(82px,1fr) auto !important; } .server-info > span { display: none; } }

.sidebar .server-item { grid-template-columns: minmax(52px,1fr) auto !important; gap: 5px !important; padding: 5px 6px !important; }
.sidebar .server-info { gap: 4px !important; }
.sidebar .server-name-row { flex: 1 1 auto; }
.sidebar .server-name-row strong { max-width: 72px; font-size: 10px !important; }
.sidebar .server-info > span, .sidebar .server-status-note { display: none !important; }
.sidebar .server-actions { gap: 2px !important; }
.sidebar .server-toggle { font-size: 9px !important; }
.sidebar .server-toggle input { width: 12px; height: 12px; }
.sidebar .server-actions .icon-btn { min-height: 25px !important; height: 25px; padding: 3px 5px !important; font-size: 9px !important; }

.sidebar { padding: 0 0 18px !important; background: #10161f !important; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #354256; border: 2px solid #10161f; border-radius: 999px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.workspace-nav { position: relative; margin: 0 10px 10px !important; padding: 15px 8px 9px !important; background: linear-gradient(180deg, #171f2b 0%, #131a24 100%) !important; border: 1px solid #344154 !important; border-radius: 12px !important; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.workspace-nav::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: linear-gradient(90deg, #806bea, #42d2c1); border-radius: 0 0 4px 4px; opacity: .9; }
.workspace-nav-label { display: flex !important; align-items: center; gap: 8px; margin: 0 9px 8px !important; color: #aab6c6 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.workspace-nav-label::before { content: ""; width: 6px; height: 6px; background: #8d7cff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(141,124,255,.14); }
.workspace-nav-item { position: relative; display: grid !important; grid-template-columns: 24px minmax(0,1fr) 14px; align-items: center; gap: 9px !important; min-height: 44px !important; margin: 3px 0 !important; padding: 8px 10px !important; overflow: hidden; background: transparent !important; border: 1px solid transparent !important; border-left: 2px solid transparent !important; border-radius: 9px !important; color: #c0cad7 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.workspace-nav-item::before { display: grid; width: 22px; height: 22px; place-items: center; background: #222c3a; border: 1px solid #46566b; border-radius: 7px; color: #b8c3d2; font-size: 11px; font-weight: 900; line-height: 1; }
.workspace-nav-item:nth-of-type(2)::before { content: "文"; color: #cbbfff; background: #2d2850; border-color: #665ab2; }
.workspace-nav-item:nth-of-type(3)::before { content: "批"; color: #a9d4ff; background: #213552; border-color: #4b79b4; }
.workspace-nav-item:nth-of-type(4)::before { content: "偏"; color: #a9fff1; background: #1f4c4b; border-color: #3e9990; }
.workspace-nav-item:nth-of-type(5)::before { content: "设"; color: #ffd6ad; background: #4b3525; border-color: #a86e39; }
.workspace-nav-item::after { content: "›"; justify-self: end; color: #728096; font-size: 18px; font-weight: 400; line-height: 1; transform: translateX(-1px); transition: color .16s ease, transform .16s ease; }
.workspace-nav-item[aria-expanded="true"]::after { color: #c5bbff; transform: rotate(90deg) translateX(-1px); }
.workspace-nav-item:hover { background: #222c3a !important; border-color: #435166 !important; border-left-color: #6c7a8e !important; color: #fff !important; transform: translateX(1px); }
.workspace-nav-item:hover::before { border-color: #718198; background: #2c394b; }
.workspace-nav-item.active { background: linear-gradient(90deg, #302861 0%, #252541 100%) !important; border-color: #5e51b9 !important; border-left-color: #a294ff !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(162,148,255,.10), 0 5px 14px rgba(0,0,0,.14); }
.workspace-nav-item.active::after { color: #ddd7ff; }
.workspace-nav-item.active::before { background: #6555cc; border-color: #a294ff; color: #fff; box-shadow: 0 0 0 3px rgba(162,148,255,.12); }
.workspace-nav-item:focus-visible { outline: 2px solid #a294ff; outline-offset: 2px; }

.sidebar > .side-section:not(.project-management) { position: relative; margin: 0 10px 8px !important; padding: 14px 12px !important; background: #151d28 !important; border: 1px solid #344154 !important; border-radius: 11px !important; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.sidebar > .side-section:not(.project-management)::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: 0; width: 2px; background: #445268; border-radius: 0 4px 4px 0; opacity: .9; }
.sidebar > .side-section:not(.project-management) .section-title { display: flex; align-items: center; gap: 7px; margin-bottom: 11px !important; color: #eef2f8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .01em; }
.sidebar > .side-section:not(.project-management) .section-title::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; background: #718198; border-radius: 50%; }
.sidebar > .side-section.h3-model-section::before { background: #35d3c0; }
.sidebar > .side-section.h3-model-section .section-title::before { background: #35d3c0; box-shadow: 0 0 0 3px rgba(53,211,192,.12); }
.sidebar > .side-section:has(.ratio-grid)::before { background: #806bea; }
.sidebar > .side-section:has(.ratio-grid) .section-title::before { background: #a294ff; box-shadow: 0 0 0 3px rgba(162,148,255,.12); }
.sidebar > .side-section:has(.server-list)::before { background: #6ca7ff; }
.sidebar > .side-section:has(.server-list) .section-title::before { background: #8ec0ff; box-shadow: 0 0 0 3px rgba(142,192,255,.12); }
.sidebar > .side-section:has(#bulkScript)::before { background: #f0a35d; }
.sidebar > .side-section:has(#bulkScript) .section-title::before { background: #ffc07f; }

[data-script-copy-panel], [data-batch-toolbar], [data-global-preferences-panel] { position: relative; margin: -3px 20px 10px !important; padding: 12px 12px 14px !important; background: #101720 !important; border: 1px solid #3f4d61 !important; border-top: 0 !important; border-radius: 0 0 10px 10px !important; box-shadow: inset 0 2px 0 rgba(127,107,255,.12); }
[data-script-copy-panel].is-expanded, [data-batch-toolbar].is-expanded, [data-global-preferences-panel].is-expanded { border-left-color: #6555cc !important; border-right-color: #6555cc !important; border-bottom-color: #6555cc !important; }
[data-script-copy-panel]::before, [data-batch-toolbar]::before, [data-global-preferences-panel]::before { content: "二级操作"; display: block; margin: 0 0 9px 2px; color: #8f9db0; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
[data-script-copy-panel] .btn, [data-batch-toolbar] .btn, [data-global-preferences-panel] .btn { min-height: 34px; border-radius: 7px; font-size: 11px; }
[data-script-copy-panel] .big-import { min-height: 42px !important; background: #4c36a0 !important; border-color: #9b8bff !important; color: #fff !important; }
[data-script-copy-panel] .wide { background: #2f619c !important; border-color: #78a7eb !important; color: #fff !important; }
[data-script-copy-panel] textarea { min-height: 150px !important; background: #0c121a !important; border-color: #45566d !important; }
[data-batch-toolbar] .batch-toolbar-head strong, [data-global-preferences-panel] .field-label { color: #f4f7fb !important; }
[data-batch-toolbar] .batch-toolbar-head span, [data-global-preferences-panel] small { color: #b4bfce !important; }

.topbar-project-management { padding: 4px 8px !important; background: #151d28 !important; border: 1px solid #344154 !important; border-radius: 9px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.topbar-project-management::before { content: "项目"; padding-right: 2px; color: #8f9db0; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.topbar-project-management .project-row input, .topbar-project-management .project-select { height: 30px !important; background: #0f161f !important; border-color: #4c5b70 !important; }
.topbar-project-management .side-actions .btn { min-height: 28px !important; background: #253143 !important; border-color: #4d5d73 !important; }
.topbar-project-management .side-actions .btn.primary { background: #7059eb !important; border-color: #a294ff !important; }
.topbar-project-management .autosave, .topbar-project-management .hint { color: #b5c0ce !important; }

@media (max-width: 1100px) {
  .workspace-nav { margin-left: 8px !important; margin-right: 8px !important; }
  .sidebar > .side-section:not(.project-management) { margin-left: 8px !important; margin-right: 8px !important; }
  [data-script-copy-panel], [data-batch-toolbar], [data-global-preferences-panel] { margin-left: 16px !important; margin-right: 16px !important; }
}
@media (max-width: 760px) {
  .workspace-nav { margin: 0 8px 9px !important; }
  .workspace-nav-item { min-height: 42px !important; }
  .sidebar > .side-section:not(.project-management) { margin-left: 8px !important; margin-right: 8px !important; }
  [data-script-copy-panel], [data-batch-toolbar], [data-global-preferences-panel] { margin-left: 14px !important; margin-right: 14px !important; }
  .topbar-project-management { border-radius: 8px !important; }
}

.workspace-nav-item[data-nav="script-copy"]::before { content: "文" !important; color: #d4caff !important; background: #342c68 !important; border-color: #796ce0 !important; }
.workspace-nav-item[data-nav="batch"]::before { content: "批" !important; color: #b8d8ff !important; background: #244268 !important; border-color: #6097d9 !important; }
.workspace-nav-item[data-nav="preferences"]::before { content: "偏" !important; color: #adfff3 !important; background: #20504f !important; border-color: #45a69b !important; }
.workspace-nav-item[data-nav="global-settings"]::before { content: "设" !important; color: #ffd7b3 !important; background: #553b28 !important; border-color: #ba7b42 !important; }
.workspace-nav-item[data-nav="script-copy"].active::before { background: #765de0 !important; border-color: #c1b7ff !important; }
.workspace-nav-item[data-nav="batch"].active::before { background: #3d72b2 !important; border-color: #a3cbff !important; }
.workspace-nav-item[data-nav="preferences"].active::before { background: #258d87 !important; border-color: #8af5e7 !important; }
.workspace-nav-item[data-nav="global-settings"].active::before { background: #9a6339 !important; border-color: #ffd1a8 !important; }

[data-script-copy-panel]::before, [data-batch-toolbar]::before, [data-global-preferences-panel]::before, .topbar-project-management::before { display: none !important; }

[data-script-copy-panel].is-expanded, [data-batch-toolbar].is-expanded, [data-global-preferences-panel].is-expanded { position: relative; }
[data-script-copy-panel].is-expanded::after, [data-batch-toolbar].is-expanded::after, [data-global-preferences-panel].is-expanded::after { content: ""; position: absolute; top: -12px; left: -9px; width: 2px; height: 13px; background: #6f60d8; border-radius: 2px; }

.settings-page .settings-content,.global-settings .settings-content,[data-settings-section=global] .settings-content{align-items:flex-start;justify-content:flex-start;}
.settings-page .provider-config,.settings-page .provider-settings,.settings-page .image-provider,.settings-page .video-provider,.global-settings .provider-config,.global-settings .provider-settings,[data-settings-section=image] .provider-config,[data-settings-section=video] .provider-config{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;}

   intrinsic label width; the row scrolls only when the editing pane is narrow. 
.shot-generation-row {
  display: flex !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 10px 12px 12px !important;
  scrollbar-width: thin;
}

/* Final Gork palette override (kept at the end so earlier legacy passes
   cannot change the requested visual treatment). */
:root { --vi-bg:#111821; --vi-surface:#151d28; --vi-surface-2:#1b2430; --vi-line:#344354; --vi-line-soft:#273342; --vi-text:#f7f9fc; --vi-muted:#9ba9bb; --vi-accent:#7f6bff; }
html, body, .app { background:#111821 !important; color:#f7f9fc !important; }
.topbar { background:#111821 !important; border-bottom:1px solid #273342 !important; box-shadow:none !important; }
.sidebar { background:#111821 !important; border-right-color:#273342 !important; }
.main { background:#111821 !important; }
.workspace-nav { background:transparent !important; border:0 !important; border-bottom:1px solid #273342 !important; border-radius:0 !important; box-shadow:none !important; }
.workspace-nav-item, .workspace-nav-item:hover, .workspace-nav-item.active { display:flex !important; align-items:center !important; width:100% !important; min-height:38px !important; margin:2px 0 !important; padding:8px 12px !important; background:transparent !important; border:0 !important; border-left:2px solid transparent !important; border-radius:5px !important; color:#aeb9c8 !important; font-size:13px !important; font-weight:500 !important; text-align:left !important; box-shadow:none !important; transform:none !important; }
.workspace-nav-item:hover { background:#1a2430 !important; color:#f7f9fc !important; }
.workspace-nav-item.active { background:#242046 !important; border-left-color:#8f7dff !important; color:#fff !important; font-weight:700 !important; }
.workspace-nav-item::before, .workspace-nav-item::after, .workspace-nav-dot { display:none !important; content:none !important; }
.workspace-nav-item,
.workspace-nav-item:hover,
.workspace-nav-item.active,
.workspace-nav-label,
.workspace-nav-label + .workspace-nav-item { font-family: SimHei, "黑体", "Microsoft YaHei", sans-serif !important; }
.workspace-nav-item,
.workspace-nav-item.active,
.workspace-nav-item:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.workspace-nav-item { font-weight: 700 !important; letter-spacing: 0 !important; }
.workspace-nav-item,
.workspace-nav-item:hover,
.workspace-nav-item.active { font-family: SimHei, "黑体", "Microsoft YaHei", sans-serif !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.sidebar > .side-section:not(.project-management) { margin:0 !important; padding:16px 18px !important; background:transparent !important; border:0 !important; border-bottom:1px solid #273342 !important; border-radius:0 !important; box-shadow:none !important; }
.sidebar > .side-section:not(.project-management)::before, .sidebar > .side-section:not(.project-management) .section-title::before { display:none !important; }
.sidebar > .side-section:not(.project-management) .section-title { color:#dbe2eb !important; font-size:12px !important; font-weight:700 !important; }
.shot { background:#151e29 !important; border:1px solid #344354 !important; border-radius:7px !important; box-shadow:none !important; }
.shot-head { background:#1b2430 !important; border-bottom-color:#2f3e4f !important; }
.shot-panel { background:#19232f !important; border-color:#344354 !important; border-radius:6px !important; }
.setting-card { background:#151e29 !important; border-color:#2f3e4f !important; border-radius:6px !important; box-shadow:none !important; }
@media (max-width:760px) { .topbar { padding:10px 14px !important; } .main { padding:16px 12px 32px !important; } }

/* Gork-inspired visual pass: quiet charcoal canvas, open workspace, and
   text-only first-level navigation. Keep all existing behaviors intact.  */
:root {
  --vi-bg: #111821;
  --vi-surface: #151d28;
  --vi-surface-2: #1b2430;
  --vi-surface-3: #202b39;
  --vi-line: #344354;
  --vi-line-soft: #273342;
  --vi-text: #f7f9fc;
  --vi-muted: #9ba9bb;
  --vi-accent: #7f6bff;
  --vi-accent-hover: #9a89ff;
}

html, body { background: #111821 !important; }
body { color: #f7f9fc !important; }
.topbar {
  min-height: 64px !important;
  padding: 10px 24px !important;
  background: #111821 !important;
  border-bottom: 1px solid #273342 !important;
  box-shadow: none !important;
}
.topbar .brand-mini { gap: 10px !important; font-size: 15px !important; font-weight: 700 !important; }
.topbar .brand-mini .site-logo { width: 34px !important; height: 34px !important; border-radius: 9px !important; box-shadow: none !important; }
.topbar-tools { gap: 6px !important; }
.topbar-tools > .btn, .auth-card .btn { min-height: 32px !important; border-radius: 6px !important; font-size: 11px !important; }
.layout { grid-template-columns: minmax(232px, var(--sidebar-width, 280px)) 8px minmax(0, 1fr) !important; min-height: calc(100vh - 64px) !important; }
.sidebar {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  background: #111821 !important;
  border-right: 1px solid #273342 !important;
}
.layout-resizer { width: 8px !important; background: #111821 !important; }
.layout-resizer::after { left: 3px !important; width: 2px !important; background: #2d3a49 !important; }
.layout-resizer:hover::after { background: #7f6bff !important; }
.workspace-nav {
  margin: 0 !important;
  padding: 18px 14px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #273342 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.workspace-nav::before, .workspace-nav-label::before { display: none !important; }
.workspace-nav-label {
  margin: 0 12px 10px !important;
  color: #6f7e91 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.workspace-nav-item,
.workspace-nav-item:hover,
.workspace-nav-item.active {
  display: flex !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 2px 0 !important;
  padding: 8px 12px !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 5px !important;
  color: #aeb9c8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  transform: none !important;
  box-shadow: none !important;
}
.workspace-nav-item:hover { background: #1a2430 !important; color: #f7f9fc !important; }
.workspace-nav-item.active { background: #242046 !important; border-left-color: #8f7dff !important; color: #fff !important; font-weight: 700 !important; }
.workspace-nav-item::before, .workspace-nav-item::after, .workspace-nav-dot { display: none !important; content: none !important; }
.sidebar > .side-section:not(.project-management) {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #273342 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sidebar > .side-section:not(.project-management)::before,
.sidebar > .side-section:not(.project-management) .section-title::before { display: none !important; }
.sidebar > .side-section:not(.project-management) .section-title {
  margin-bottom: 10px !important;
  color: #dbe2eb !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
[data-script-copy-panel], [data-batch-toolbar], [data-global-preferences-panel] {
  margin: -1px 14px 8px !important;
  padding: 12px 14px 14px !important;
  background: #0f161f !important;
  border: 1px solid #334354 !important;
  border-top: 0 !important;
  border-radius: 0 0 7px 7px !important;
  box-shadow: none !important;
}
.topbar-project-management {
  padding: 3px 7px !important;
  background: #151e29 !important;
  border: 1px solid #344354 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.topbar-project-management .project-row input, .topbar-project-management .project-select { height: 28px !important; }
.main {
  padding: 24px 30px 48px !important;
  background: #111821 !important;
}
.main-head {
  min-height: 42px !important;
  margin-bottom: 15px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #273342 !important;
}
.main-head h1 { font-size: 21px !important; }
.settings { gap: 7px !important; margin-bottom: 14px !important; }
.setting-card {
  min-height: 58px !important;
  padding: 10px 12px !important;
  background: #151e29 !important;
  border: 1px solid #2f3e4f !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.setting-card strong { font-size: 18px !important; }
.shot-list { gap: 12px !important; }
.shot {
  background: #151e29 !important;
  border: 1px solid #344354 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.shot-head { min-height: 46px !important; padding: 8px 12px !important; background: #1b2430 !important; border-bottom: 1px solid #2f3e4f !important; }
.shot-heading .shot-title { font-size: 14px !important; }
.shot-body { padding: 10px !important; background: #151e29 !important; }
.shot-panel { background: #19232f !important; border: 1px solid #344354 !important; border-radius: 6px !important; }
.panel-content { padding: 11px !important; }
.script-pane textarea { background: #101820 !important; border-color: #3c4d60 !important; border-radius: 5px !important; font-size: 12px !important; }
.video-pane.shot-panel { background: #17212c !important; border-color: #3c4d60 !important; }
.video-pane .preview-box { border-color: #45566a !important; border-radius: 5px !important; }
.btn { min-height: 34px !important; border-radius: 6px !important; }
.shot-actions .btn, .shot-generation-row > .btn { min-height: 32px !important; border-radius: 5px !important; }
.status { border-radius: 5px !important; }

@media (max-width: 760px) {
  .topbar { padding: 10px 14px !important; }
  .main { padding: 16px 12px 32px !important; }
  .workspace-nav { padding: 12px 8px !important; }
  .sidebar > .side-section:not(.project-management) { padding: 14px !important; }
}

/* Script copy detail view: keep the storyboard visible and present the copy
   editor as a calm right-side workspace drawer. The existing script content
   and actions remain untouched; this is a layout-only treatment. */
[data-batch-toolbar][hidden],
[data-global-settings-panel][hidden],
[data-global-preferences-panel][hidden] { display: none !important; }

.main.script-copy-modal-open {
  position: relative !important;
  isolation: isolate !important;
  min-height: calc(100vh - 64px) !important;
  overflow: hidden !important;
}
.main.script-copy-modal-open::before {
  background: rgba(5, 9, 15, .26) !important;
  backdrop-filter: blur(2px) !important;
}
.main.script-copy-modal-open > .script-copy-modal-backdrop { z-index: 11 !important; }
.main.script-copy-modal-open > .script-copy-panel {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  z-index: 20 !important;
  width: min(520px, calc(100% - 24px)) !important;
  max-height: none !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 28px 28px 32px !important;
  background: #151d28 !important;
  border: 1px solid #4b5b70 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: -22px 0 60px rgba(0, 0, 0, .34) !important;
}
.main.script-copy-modal-open > .script-copy-panel::before {
  content: "剧本文案详情" !important;
  display: block !important;
  margin: 0 48px 5px 0 !important;
  color: #f7f9fc !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.main.script-copy-modal-open > .script-copy-panel::after {
  content: "编辑内容并按分镜号整理，内容会实时保留在当前项目中" !important;
  display: block !important;
  margin: 0 0 22px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.main.script-copy-modal-open > :not(.script-copy-panel):not(.script-copy-modal-backdrop) {
  filter: blur(3px) !important;
  opacity: .62 !important;
  pointer-events: none !important;
  user-select: none !important;
}
.script-copy-modal-close {
  top: 22px !important;
  right: 22px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid #52647b !important;
  border-radius: 8px !important;
  background: #202b39 !important;
  color: #f7f9fc !important;
  font-size: 22px !important;
}
.script-copy-modal-close:hover { background: #2b394a !important; border-color: #9b8bff !important; }
.main.script-copy-modal-open > .script-copy-panel textarea {
  display: block !important;
  width: 100% !important;
  min-height: 320px !important;
  height: calc(100vh - 405px) !important;
  max-height: none !important;
  padding: 16px !important;
  background: #0e151e !important;
  border: 1px solid #52647b !important;
  border-radius: 10px !important;
  color: #f7f9fc !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}
.main.script-copy-modal-open > .script-copy-panel textarea:focus {
  border-color: #9b8bff !important;
  box-shadow: 0 0 0 3px rgba(127, 107, 255, .2) !important;
}
.main.script-copy-modal-open > .script-copy-panel .btn {
  min-height: 40px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}
.main.script-copy-modal-open > .script-copy-panel .big-import { margin-top: 2px !important; background: #6f58dc !important; border-color: #9b8bff !important; }
.main.script-copy-modal-open > .script-copy-panel .wide { margin-top: 10px !important; background: #2c6ea8 !important; border-color: #6faef0 !important; }
.main.script-copy-modal-open > .script-copy-panel > button:not(.script-copy-modal-close) { width: 100% !important; }
.main.script-copy-modal-open > .script-copy-panel > button[data-action^="auto-"] {
  width: calc(33.333% - 6px) !important;
  margin: 0 6px 10px 0 !important;
  min-height: 36px !important;
  padding: 7px 6px !important;
  font-size: 11px !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
@media (max-width: 760px) {
  .main.script-copy-modal-open { min-height: calc(100vh - 10px) !important; }
  .main.script-copy-modal-open > .script-copy-panel {
    position: fixed !important;
    inset: 64px 10px 10px !important;
    width: auto !important;
    padding: 24px 16px 20px !important;
    border: 1px solid #4b5b70 !important;
    border-radius: 10px !important;
  }
  .main.script-copy-modal-open > .script-copy-panel textarea { height: calc(100vh - 360px) !important; min-height: 220px !important; }
  .script-copy-modal-close { top: 16px !important; right: 16px !important; }
  .main.script-copy-modal-open > .script-copy-panel > button[data-action^="auto-"] { width: calc(33.333% - 5px) !important; margin-right: 5px !important; }
}