/* Shared Midnight visual language for the workspaces and their dialogs. */
:root{--midnight-panel:#191220;--midnight-deep:#100c16;--midnight-line:#a478bc33;--midnight-text:#f4ede6;--midnight-muted:#b6aabd;--midnight-orange:#f3945d;--midnight-purple:#a47cdb}
body:not(.landing-mode){color:var(--midnight-text);background:#100a17}
body:not(.landing-mode) .sidebar{background:linear-gradient(180deg,#17101ef5,#100d17fa);border-right-color:var(--midnight-line);box-shadow:12px 0 50px #08050d30}
body:not(.landing-mode) .workspace-switch{background:#21162b;border-color:#a478bc3b;border-radius:10px;color:#f4ede6}
body:not(.landing-mode) .workspace-switch small,body:not(.landing-mode) .profile small{color:#b1a2ba}
body:not(.landing-mode) .workspace-avatar,body:not(.landing-mode) .avatar{background:#302039;border-color:#a178b14a;color:#f5b18b}
body:not(.landing-mode) .nav-label{color:#b19dbf;font-family:var(--studio-mono);font-size:9px;letter-spacing:1.6px}
body:not(.landing-mode) .nav-item{min-height:42px;color:#bfb2c9;border-radius:9px}
body:not(.landing-mode) .nav-item svg{color:#b19ac5}
body:not(.landing-mode) .nav-item:hover{background:#8e5cb51a;color:#fff8f0}
body:not(.landing-mode) .nav-item.active{color:#ffc198;background:linear-gradient(100deg,#f3945d20,#9a6ac210);border-color:#f3945d40}
body:not(.landing-mode) .nav-item.active svg{color:var(--midnight-orange)}
body:not(.landing-mode) .nav-line,body:not(.landing-mode) .profile{border-color:var(--midnight-line)}
body:not(.landing-mode) .nav-line{background:var(--midnight-line)}
body:not(.landing-mode) .topbar{background:#150f1dec;border-bottom-color:#a478bc40;backdrop-filter:blur(18px);box-shadow:0 10px 35px #08050d30}
body:not(.landing-mode) .breadcrumb{color:#c2b3ca}
body:not(.landing-mode) .breadcrumb b{color:#f4ede6}
body:not(.landing-mode) .top-link,body:not(.landing-mode) .locale{color:#b9a9c4}
body:not(.landing-mode) main{position:relative;padding-top:32px}
body:not(.landing-mode) .page-heading,body:not(.landing-mode) .editor-head{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #a478bc33;gap:20px}
body:not(.landing-mode) .page-heading h1,body:not(.landing-mode) .editor-head h1{font-family:var(--studio-display);font-size:clamp(32px,3vw,46px);line-height:1.05;letter-spacing:.3px;color:#f7f0e8;text-transform:uppercase}
body:not(.landing-mode) .page-heading p,body:not(.landing-mode) .editor-head p{max-width:740px;color:var(--midnight-muted);font-size:13px;line-height:1.75}
body:not(.landing-mode) .eyebrow{font-family:var(--studio-mono);font-size:9px;letter-spacing:1.5px;color:#b89fc9}
body:not(.landing-mode) .eyebrow .line{background:var(--midnight-orange)}
body:not(.landing-mode) .button,dialog .button{border-radius:8px;min-height:38px;background:#261c30;border-color:#a478bc47;color:#eee4f5;font-size:12px;font-weight:650;box-shadow:0 3px 10px #07040c20}
body:not(.landing-mode) .button:hover:not(:disabled),dialog .button:hover:not(:disabled){background:#35233e;border-color:#c598d178}
body:not(.landing-mode) .button.primary,dialog .button.primary{background:#f3945d;color:#25140c;border-color:#ffa872;box-shadow:0 5px 20px #d8743520}
body:not(.landing-mode) .button.primary:hover:not(:disabled),dialog .button.primary:hover:not(:disabled){background:#ffa872;color:#25140c}
body:not(.landing-mode) .button.ghost{background:#19121fbb;color:#e4c5e9;border-color:#9f73b849}
body:not(.landing-mode) .icon-button{background:#211829;border-color:#a478bc4d;color:#d9c8e4;border-radius:8px}
body:not(.landing-mode) .icon-button.active{background:#f3945d24;color:#ffc198;border-color:#f3945d80}
body:not(.landing-mode) :is(.editor,.photo-panel,.project-card,.texture-panel,.editor-empty,.empty-projects,.export-table,.fivem-format-notice){background:linear-gradient(145deg,#201628f5,#14101cf5);border:1px solid #a478bc3d;border-radius:12px;box-shadow:0 12px 32px #08040e40}
body:not(.landing-mode) .fivem-format-notice{border-left:3px solid #f3945d88;padding:18px 20px}
body:not(.landing-mode) .fivem-format-notice strong{color:#f0dfed;font-size:13px;line-height:1.6}
body:not(.landing-mode) .fivem-format-notice p{color:var(--midnight-muted);font-size:12px;line-height:1.75}
body:not(.landing-mode) :is(.editor-left,.editor-right){background:#191220ec;border-color:#a478bc33}
body:not(.landing-mode) .panel-title{color:#e2c6e9;font:500 10px var(--studio-mono);letter-spacing:1.3px;line-height:1.6}
body:not(.landing-mode) .panel-title small{color:#ad96bb;font-size:9px}
body:not(.landing-mode) .panel-divider{background:#a478bc33}
body:not(.landing-mode) :is(.field>span,.check-label){color:#d1c0db;font-size:12px;line-height:1.6}
body:not(.landing-mode) :is(.field input:not([type=range]):not([type=color]),.field select,.field textarea),dialog :is(.field input:not([type=range]):not([type=color]),.field select,.field textarea){background:#100c17;border:1px solid #a478bc45;border-radius:7px;color:#f5edf6;min-height:36px;font-size:12px}
body:not(.landing-mode) :is(input[type=range],input[type=checkbox]),dialog :is(input[type=range],input[type=checkbox]){accent-color:var(--midnight-orange)}
body:not(.landing-mode) input[type=color]{background:#201527;border-color:#a478bc55;border-radius:7px}
body:not(.landing-mode) :is(.mini-help,.file-info,.notice,.photo-panel p){color:#b9a9c4;line-height:1.8;font-size:12px}
body:not(.landing-mode) .file-info{color:#f0d8ca;overflow-wrap:anywhere}
body:not(.landing-mode) .notice{background:#201528c9;border-color:#a478bc40;border-left:2px solid #f3945d66;border-radius:8px}
body:not(.landing-mode) .model-drop,body:not(.landing-mode) .photo-upload{background:#140f1d;border-color:#a478bc66;color:#e6c7e3;border-radius:10px}
body:not(.landing-mode) :is(.model-drop.over,.photo-upload:hover){background:#2c1b34;border-color:#f3945d}
body:not(.landing-mode) .model-drop small,body:not(.landing-mode) .photo-upload small{color:#b6a4c3}
body:not(.landing-mode) .part{color:#cfc0da;border-radius:7px;min-height:32px}
body:not(.landing-mode) .part.active{background:#f3945d16;border-color:#f3945d55;color:#ffd2b8}
body:not(.landing-mode) .part:hover{background:#9a6ac21c}
body:not(.landing-mode) .viewport{background:#15101d;border-color:#a478bc30}
body:not(.landing-mode) :is(.viewport-chip,.viewport-tools){background:#18101ee8;border-color:#a478bc4d;backdrop-filter:blur(14px);color:#c7b3d3}
body:not(.landing-mode) .viewport-help{color:#c2aecd;text-shadow:0 1px 5px #000}
body:not(.landing-mode) .editor-statbar{background:#120d19;border-color:#a478bc33;color:#ad96bb;font-size:10px}
body:not(.landing-mode) .editor-statbar b{color:#f3ceb6}
body:not(.landing-mode) .prop-collision-controls summary{cursor:pointer;color:#f4bc99;padding:10px 0;font-size:12px}
body:not(.landing-mode) .photo-panel h2,body:not(.landing-mode) .texture-controls h3{font-family:var(--studio-display);font-size:30px;color:#f5e8e0;text-transform:uppercase}
body:not(.landing-mode) .step-number{background:#f3945d17;border-color:#f3945d55;color:#f6b28b}
body:not(.landing-mode) .step-row{border-color:#a478bc2e}
body:not(.landing-mode) .step-row h3{color:#ecd9ee}
body:not(.landing-mode) .status-badge{background:#8e5cb51c;border-color:#a478bc5c;color:#e2c5ef}
body:not(.landing-mode) .project-card h3{color:#f2e4ef}
body:not(.landing-mode) .export-table th{background:#24172d;color:#d2b4df;font:500 10px var(--studio-mono);letter-spacing:1px;padding-top:17px;padding-bottom:17px}
body:not(.landing-mode) .export-table td{border-color:#a478bc29;color:#e0d1e8;font-size:12px}
body:not(.landing-mode) .export-table tr:hover td{background:#9a6ac20b}
body:not(.landing-mode) footer{background:#120c18c9;border-color:#a478bc30;color:#b99bc5}
dialog{background:linear-gradient(140deg,#25172d,#140f1c 70%);border:1px solid #b48ac45e;border-radius:14px;color:#f3e8f1;box-shadow:0 24px 100px #050207b0}
dialog::backdrop{background:#0a050fc4;backdrop-filter:blur(7px)}
dialog h2{font-family:var(--studio-display);font-size:36px;line-height:1.1;text-transform:uppercase;color:#f7ede5}
dialog :is(p,.mini-help){color:#c1aecb;line-height:1.8}
dialog :is(.format-category,.file-check-report,.format-status,.ai-task,.ai-local-status){background:#1e1428;border-color:#a478bc44;border-radius:9px}
dialog summary{color:#f0d4ef}
dialog :is(.format-row,.file-check-row){border-color:#a478bc2d}
dialog .ai-photo-preview{background:#100b18;border-color:#b384c16e;color:#b9a5c3}
dialog :is(.ai-disclosure,.notice){background:#2b1a2d;border-color:#f3945d33;color:#d8b9cb}
dialog .dialog-close{background:#302037;color:#ecd5ee;border-color:#a478bc4a}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #f5ad80;outline-offset:3px}
/* Vehicle tools retain their full-screen geometry workspace. */
body.vehicle-mode .ve-app{color:#efe2f1;--ve-accent:#f3945d;--ve-border:#a478bc48;background:#15101d}
body.vehicle-mode .ve-header{background:linear-gradient(90deg,#1b1124,#120e19);border-color:#a478bc4a;box-shadow:0 5px 25px #08040f50}
body.vehicle-mode .ve-header>b{font:800 23px var(--studio-display);text-transform:uppercase;letter-spacing:.4px;color:#f5e8e1}
body.vehicle-mode .ve-header>b>span{font:500 9px var(--studio-mono);color:#d59de1}
body.vehicle-mode .ve-header input{background:#ffffff05;border-color:#a478bc30;color:#eddfef}
body.vehicle-mode :is(.ve-rail,.ve-panel){background:#19111feb;border-color:#a478bc4a;box-shadow:0 8px 30px #08040f40;backdrop-filter:blur(16px)}
body.vehicle-mode .ve-panel{border-radius:12px}
body.vehicle-mode .ve-panel-head b{font:800 24px var(--studio-display);letter-spacing:.3px;text-transform:uppercase;color:#f4e4e0}
body.vehicle-mode .ve-panel :is(p,.ve-field-label){color:#baa5c5;font-size:11px;line-height:1.8}
body.vehicle-mode .ve-button{background:#2a1d33;border-color:#a478bc4a;color:#e7d9ee;border-radius:7px;min-height:30px}
body.vehicle-mode .ve-button:hover:not(:disabled){background:#3a2544;border-color:#be91d073}
body.vehicle-mode .ve-button.accent,body.vehicle-mode .ve-rail-button.active{background:#f3945d;color:#28150e;border-color:#ffb480;box-shadow:0 3px 14px #ed895625}
body.vehicle-mode .ve-button.active:not(.ve-rail-button){background:#f3945d22;color:#ffc49f;border-color:#f3945d70}
body.vehicle-mode .ve-button.danger{background:#6e293f;color:#ffd8df;border-color:#cc6d8855}
body.vehicle-mode .ve-rail-button{background:transparent;border-color:transparent;color:#c7b0d4}
body.vehicle-mode .ve-rail-caption{color:inherit}
body.vehicle-mode .ve-field{color:#d4bddf;font-size:11px}
body.vehicle-mode :is(.ve-field input:not([type=range]):not([type=color]),.ve-field select,.ve-search,.ve-meta-editor){background:#110c19;border-color:#a478bc45;color:#f0e3f3;border-radius:7px}
body.vehicle-mode :is(.ve-panel details,.ve-layer,.ve-library .ve-button){background:#25182e;border-color:#a478bc3b}
body.vehicle-mode .ve-panel summary{color:#e8cbea}
body.vehicle-mode :is(.ve-transform-bar,.ve-bottom-toolbar,.ve-selection-modes){background:#1a1123ed;border-color:#a478bc50;color:#ceb5dc}
@media(max-width:950px){body:not(.landing-mode) .page-heading,body:not(.landing-mode) .editor-head{gap:15px;padding-bottom:18px}body:not(.landing-mode) .editor-right{background:#191220}}
@media(max-width:740px){body:not(.landing-mode) main{padding-top:22px}body:not(.landing-mode) .page-heading h1,body:not(.landing-mode) .editor-head h1{font-size:32px}body:not(.landing-mode) .editor-actions .button{min-height:38px;font-size:11px}body.vehicle-mode .ve-header>b{font-size:18px}body.vehicle-mode .ve-panel-head b{font-size:21px}dialog h2{font-size:30px}}
@media(prefers-reduced-transparency:reduce){body:not(.landing-mode) :is(.sidebar,.topbar),body.vehicle-mode :is(.ve-panel,.ve-rail){background:#191220;backdrop-filter:none}}

/* Keep the workspace header pinned, with its own space above the content. */
body:not(.landing-mode):not(.vehicle-mode){--workspace-bar-height:56px;--workspace-sidebar-width:238px}
body:not(.landing-mode):not(.vehicle-mode) .shell{padding-top:var(--workspace-bar-height)}
body:not(.landing-mode):not(.vehicle-mode) .topbar{position:fixed;top:0;left:var(--workspace-sidebar-width);right:0;width:auto;height:var(--workspace-bar-height);z-index:1000;transform:none}
body:not(.landing-mode):not(.vehicle-mode) main{scroll-margin-top:calc(var(--workspace-bar-height) + 16px)}
body.vehicle-mode .ve-header{position:sticky;top:0;z-index:1000}
@media(max-width:1150px){body:not(.landing-mode):not(.vehicle-mode){--workspace-sidebar-width:210px}}
@media(max-width:950px){body:not(.landing-mode):not(.vehicle-mode){--workspace-sidebar-width:190px}}
@media(max-width:740px){body:not(.landing-mode):not(.vehicle-mode){--workspace-sidebar-width:0px;--workspace-bar-height:57px}body:not(.landing-mode) .sidebar.open{z-index:1100}}

body:not(.landing-mode) .opt-report{background:#24172d;border-color:#a478bc47;color:#e2c9e7;font-size:12px;line-height:1.8;border-radius:8px}body:not(.landing-mode) .opt-report b{color:#ffc39f}
/* Clothing and Asset Optimizer fill the window; only parts and settings panels scroll. */
body:has(.fitted-editor){height:100dvh;overflow:hidden}
body:has(.fitted-editor) .shell{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body:has(.fitted-editor) .shell>footer{display:none}
body:has(.fitted-editor) .sidebar{overflow-y:auto;overscroll-behavior:contain}
body:has(.fitted-editor) #main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:12px 18px}
body:has(.fitted-editor) #main>.editor-head{flex:none;gap:12px;padding:0 0 8px;margin:0;align-items:center}
body:has(.fitted-editor) .editor-head h1{font-size:clamp(22px,2vw,30px);margin:0}
body:has(.fitted-editor) .editor-head :is(.eyebrow,p){display:none}
body:has(.fitted-editor) .editor-actions{gap:6px;flex-wrap:nowrap}
body:has(.fitted-editor) .editor-actions .button{min-height:34px;padding:7px 10px;white-space:nowrap}
body:has(.fitted-editor) #main>.fivem-format-notice{flex:none;padding:7px 12px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
body:has(.fitted-editor) .fivem-format-notice :is(.eyebrow,p){display:none}
body:has(.fitted-editor) .fivem-format-notice strong{font-size:11px}
body:has(.fitted-editor) #native-status{flex:none;padding:7px 12px;margin:0;max-height:68px;overflow:auto;overscroll-behavior:contain;display:flex;align-items:flex-start;gap:10px}
body:has(.fitted-editor) #native-status .native-status{min-width:0;flex:1}
body:has(.fitted-editor) #native-status :is(strong,p,summary){font-size:11px;line-height:1.4;margin:0}
body:has(.fitted-editor) #native-status .button{min-height:30px;padding:5px 9px;font-size:10px;flex:none}
body:has(.fitted-editor) #main>.notice{display:none}
body:not(.landing-mode) .fitted-editor{flex:1;min-height:0;height:auto;overflow:hidden;display:grid;grid-template-columns:180px minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;margin:0}
body:not(.landing-mode) .fitted-editor :is(.editor-left,.editor-right){min-height:0;min-width:0;height:auto;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px;display:block;grid-column:auto;grid-row:1}
body:not(.landing-mode) .fitted-editor .part-list{max-height:none;display:block;overflow:visible}
body:not(.landing-mode) .fitted-editor .viewport{min-height:0;min-width:0;height:100%;max-height:none;overflow:hidden;grid-column:2;grid-row:1}
body:not(.landing-mode) .fitted-editor .viewport>canvas{display:block}
body:not(.landing-mode) .fitted-editor .editor-statbar{grid-column:1/-1;grid-row:2;min-height:28px;padding:6px 10px;gap:12px;flex-wrap:wrap;font-size:9px}
body:not(.landing-mode) .fitted-editor .viewport-help{font-size:10px;bottom:8px}
body:not(.landing-mode) .fitted-editor .viewport-tools{bottom:32px;max-width:calc(100% - 16px);gap:5px;padding:6px}
@media(max-width:1150px){body:not(.landing-mode) .fitted-editor{grid-template-columns:145px minmax(0,1fr) 215px}body:not(.landing-mode) .fitted-editor :is(.editor-left,.editor-right){padding:9px}}
@media(max-width:850px){body:has(.fitted-editor) #main{padding:8px;gap:6px}body:not(.landing-mode) .fitted-editor{grid-template-columns:minmax(0,1fr) 205px}body:not(.landing-mode) .fitted-editor .editor-left{display:none}body:not(.landing-mode) .fitted-editor .viewport{grid-column:1}body:not(.landing-mode) .fitted-editor .editor-right{grid-column:2}body:has(.fitted-editor) .editor-head h1{font-size:22px}body:has(.fitted-editor) .editor-head{flex-wrap:wrap}body:has(.fitted-editor) .editor-actions{width:auto}body:has(.fitted-editor) #native-status{max-height:48px}}
@media(max-width:540px){body:has(.fitted-editor) #main>.fivem-format-notice{padding:4px 8px}body:has(.fitted-editor) .fivem-format-notice strong{display:none}body:has(.fitted-editor) .fivem-format-notice .button{min-height:28px;padding:4px 8px;font-size:10px}body:not(.landing-mode) .fitted-editor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(100px,28dvh) auto}body:not(.landing-mode) .fitted-editor .viewport{grid-column:1;grid-row:1}body:not(.landing-mode) .fitted-editor .editor-right{grid-column:1;grid-row:2;border-top:1px solid var(--midnight-line)}body:not(.landing-mode) .fitted-editor .editor-statbar{grid-row:3;font-size:8px;gap:6px}body:has(.fitted-editor) #native-status{display:none}}
/* Readable labels without increasing the full-window workspace height. */
body:has(.fitted-editor) :is(.editor-left,.editor-right){font-size:13px;line-height:1.5;color:#f3ecf7}
body:has(.fitted-editor) .panel-title{font-family:Hanken,Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.7px;color:#f5d6c1;line-height:1.5}
body:has(.fitted-editor) .panel-title small{font-family:Hanken,Arial,sans-serif;font-size:11px;color:#d5c6df;letter-spacing:.3px}
body:has(.fitted-editor) .field>span{font-size:13px;font-weight:650;line-height:1.5;color:#efe4f6}
body:has(.fitted-editor) .field :is(input:not([type=range]):not([type=color]),select,textarea){font-size:13px;color:#fff7fc}
body:has(.fitted-editor) :is(.mini-help,.file-info){font-size:12px;line-height:1.65;color:#d3c6de}
body:has(.fitted-editor) .file-info{color:#f7dfcd;font-weight:600}
body:has(.fitted-editor) .part{font-size:12px;line-height:1.45;min-height:36px;padding:8px 6px;color:#ded1e9}
body:has(.fitted-editor) .part-name{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
body:has(.fitted-editor) .part.active{color:#ffe0c9;background:#f3945d24}
body:has(.fitted-editor) .model-drop{font-size:13px;font-weight:650;line-height:1.5}
body:has(.fitted-editor) .model-drop small{font-size:11px;line-height:1.5;color:#d0c1dd}
body:has(.fitted-editor) :is(.panel-button,.editor-actions .button){font-size:13px;font-weight:700}
body:has(.fitted-editor) .fivem-format-notice strong{font-size:12px;font-weight:650;color:#f2e5f3}
body:has(.fitted-editor) #native-status :is(strong,p,summary){font-size:12px;line-height:1.5}
body:has(.fitted-editor) #native-status p{color:#d1c2dc}
body:has(.fitted-editor) #native-status strong{color:#ffd0ad;font-weight:750}
body:has(.fitted-editor) #native-status .button{font-size:11px}
body:has(.fitted-editor) .editor-statbar{font-size:11px;line-height:1.5;color:#cfc0dc;letter-spacing:.15px}
body:has(.fitted-editor) .editor-statbar b{font-size:12px;color:#ffe1c7;font-weight:750;font-variant-numeric:tabular-nums}
body:has(.fitted-editor) .viewport-chip{font:650 11px Hanken,Arial,sans-serif;letter-spacing:.6px;color:#ecdeF5}
body:has(.fitted-editor) .viewport-help{font:550 12px/1.5 Hanken,Arial,sans-serif;color:#f3e7f8;background:#150f1ee8;border:1px solid #a478bc50;border-radius:6px;padding:4px 8px;max-width:calc(100% - 16px);text-align:center}
body:has(.fitted-editor) #brush-size-value{font-size:12px!important;font-weight:700;color:#ffe0c4;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:540px){body:has(.fitted-editor) .editor-actions .button{font-size:12px}body:has(.fitted-editor) .editor-statbar{font-size:10px}body:has(.fitted-editor) .editor-statbar b{font-size:11px}body:has(.fitted-editor) .viewport-help{font-size:11px}}

/* Optimization results remain readable within the settings panel. */
body:has(.optimizer-editor) .opt-report{font-size:13px;line-height:1.65;color:#edddf3;padding:12px;overflow-wrap:anywhere}
body:has(.optimizer-editor) .opt-report b{font-size:14px;font-weight:750;color:#ffdbbe}
body:has(.optimizer-editor) :is(#reduction-value,#metal-value,#rough-value,#scale-value,#rotation-value){font-weight:750;color:#ffd1aa;font-variant-numeric:tabular-nums}