/* Generated offline; original fonts cover every remaining glyph. */
@font-face{font-family:"Inter";src:url("/assets/studija-assets/modern/InterVariable-core.woff2?v=943036575de6d250") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0,U+20-7E,U+A0-AC,U+AE-FF,U+104-105,U+10C-10D,U+116-119,U+12E-12F,U+160-161,U+16A-16B,U+172-173,U+17D-17E,U+300-304,U+306-30A,U+30C,U+30F,U+313,U+315,U+31B,U+323,U+326-328,U+32C,U+337-338,U+342-343,U+346-36F,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20AC,U+2122,U+2190-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2212,U+FEFF;}
@font-face{font-family:"Inter";src:url("/assets/studija-assets/modern/InterVariable.woff2?v=693b77d4f32ee9b8") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+100-103,U+106-10B,U+10E-115,U+11A-12D,U+130-148,U+14A-15F,U+162-169,U+16C-171,U+174-17C,U+17F-1C3,U+1C5-254,U+256-27B,U+27E-284,U+286-290,U+292-2A4,U+2A6-2FF,U+374-376,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3D7,U+3DC-3DD,U+3F0-3F6,U+3F9-3FA,U+3FC-479,U+480-49D,U+4A0-4FF,U+52F,U+E3F,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1E9B,U+1E9D-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20C0,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+2150-217F,U+2183-2186,U+2189,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2295-2298,U+2303-2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+25A0-25A2,U+25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+2605-2606,U+263C,U+2661,U+2665,U+266A-266B,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2788,U+27EF,U+27F5-27FA,U+2913,U+2A38,U+2B06,U+2B12-2B13,U+2B1C,U+2B24,U+2C7C,U+2C7F,U+2DFF,U+2E18,U+A69F,U+A7FF,U+A92E,U+E000,U+E002-E05E,U+E06A-E0BD,U+E0C8-E0CC,U+E0DC-E0E6,U+E0F3-E0F5,U+E106,U+E109-E10A,U+E10C-E10F,U+E111-E113,U+E117-E118,U+E121-E122,U+E124,U+E12A-E15E,U+E163,U+E1C3,U+E1D2-E1DF,U+E1E1-E2DC,U+EE01-EE07,U+EE09-EE0A,U+EE0C-EE12,U+EE14,U+EE17,U+EE1D-EE45,U+EE47-EE84,U+EE87-EED6,U+EED8-EEE1,U+F6C3,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852;}
@font-face{font-family:"Phosphor-Duotone";src:url("/assets/studija-assets/modern/Phosphor-Duotone-core.woff2?v=72eaf861aaeb5c73") format("woff2");font-weight:normal;font-style:normal;font-display:block;unicode-range:U+E000-E001,U+E00C-E00D,U+E094-E095,U+E0A8-E0A9,U+E0AC-E0AD,U+E0EA-E0EB,U+E0F4-E0F9,U+E106-E107,U+E10E-E10F,U+E112-E113,U+E15C-E15D,U+E182-E183,U+E18A-E18B,U+E196-E197,U+E1A8-E1A9,U+E1BC-E1BD,U+E1CA-E1CB,U+E1D4-E1D7,U+E1DA-E1DD,U+E20A-E20B,U+E210-E211,U+E230-E231,U+E23E-E23F,U+E242-E243,U+E246-E247,U+E272-E273,U+E2A0-E2A3,U+E2AC-E2AD,U+E2CA-E2CB,U+E2CE-E2CF,U+E2D6-E2D9,U+E2E2-E2E3,U+E2F0-E2F1,U+E2FA-E2FB,U+E33A-E33B,U+E348-E349,U+E390-E391,U+E39C-E39F,U+E3B6-E3B9,U+E3D0-E3D5,U+E3EC,U+E3EE,U+E3F1,U+E3F3,U+E3F6,U+E3F9,U+E406,U+E409,U+E434-E437,U+E466-E467,U+E46C-E46D,U+E474-E479,U+E47C-E47F,U+E490-E493,U+E4A2-E4A3,U+E4AA-E4AB,U+E4BE-E4BF,U+E4C2-E4C3,U+E4D6-E4D7,U+E4DA-E4DB,U+E4E0-E4E1,U+E4E8-E4E9,U+E4F6-E4F7,U+E514-E515,U+E53A-E53B,U+E546-E547,U+E560-E561,U+E588-E589,U+E58E-E58F,U+E5A2-E5A3,U+E5BA-E5BB,U+E5D2-E5D3,U+E60E-E611,U+E61C-E61D,U+E628-E62B,U+E638-E639,U+E63C-E63D,U+E650-E651,U+E66A-E66B,U+E688-E689,U+E69A-E69B,U+E6A2-E6A3,U+E6AC-E6AD,U+E6B8-E6B9,U+E6C8-E6CB,U+E6D0-E6D1,U+E6D6-E6D7,U+E6EE-E6EF,U+E710-E711,U+E730-E731,U+E740-E741,U+E778-E779,U+E77E-E77F,U+E792-E793,U+E7BC-E7BD,U+E802-E803,U+E82E-E82F,U+E836-E837,U+E83C-E83D,U+E844-E845,U+E8A0-E8A1,U+E8A8-E8A9,U+E9C4-E9C5,U+EA7E-EA81,U+EA8A-EA8B,U+EAF0-EAF1,U+EB7A-EB7B,U+EBAC-EBAD,U+EBB6-EBB7,U+EBE4-EBE5,U+EC2E-EC2F,U+EC72-EC73,U+EC7C-EC7D,U+ECA6-ECA7,U+ECBE-ECBF,U+ECDE-ECDF,U+ED6E-ED6F,U+ED82-ED83,U+EDBC-EDBD,U+EDDE-EDDF,U+EE40-EE41,U+EE5C-EE5D;}
@font-face{font-family:"Phosphor-Duotone";src:url("/assets/studija-assets/modern/Phosphor-Duotone.woff2?v=93d163cd4b1f0773") format("woff2");font-weight:normal;font-style:normal;font-display:block;unicode-range:U+0-1,U+20,U+E002-E00B,U+E00E-E093,U+E096-E0A7,U+E0AA-E0AB,U+E0AE-E0D7,U+E0DA-E0E9,U+E0EC-E0EF,U+E0F2-E0F3,U+E0FE-E105,U+E108-E10D,U+E110-E111,U+E114-E14A,U+E14C-E15B,U+E15E-E181,U+E184-E189,U+E18C-E195,U+E198-E1A1,U+E1A4-E1A7,U+E1AA-E1BB,U+E1BE-E1C9,U+E1CC-E1D3,U+E1D8-E1D9,U+E1DE-E209,U+E20C-E20F,U+E212-E22F,U+E232-E23D,U+E240-E241,U+E244-E245,U+E248-E24B,U+E254-E271,U+E274-E29F,U+E2A4-E2AB,U+E2AE-E2C9,U+E2CC-E2CD,U+E2D0-E2D5,U+E2DA-E2E1,U+E2E4-E2EF,U+E2F2-E2F9,U+E2FE-E311,U+E314-E339,U+E33C-E347,U+E34A-E38F,U+E392-E39B,U+E3A0-E3A3,U+E3A8-E3B5,U+E3BA-E3CF,U+E3D6-E3EB,U+E3ED,U+E3EF-E3F0,U+E3F2,U+E3F4-E3F5,U+E3F7-E3F8,U+E3FA-E405,U+E407-E408,U+E40A-E419,U+E41E-E433,U+E438-E45F,U+E462-E465,U+E468-E46B,U+E46E-E473,U+E47A-E47B,U+E480-E48F,U+E494-E499,U+E49C-E4A1,U+E4A6-E4A9,U+E4AC-E4B7,U+E4BA-E4BD,U+E4C0-E4C1,U+E4C4-E4D5,U+E4D8-E4D9,U+E4DC-E4DF,U+E4E2-E4E7,U+E4EA-E4F0,U+E4F2-E4F5,U+E4F8-E513,U+E516-E539,U+E53C-E545,U+E548-E55F,U+E562-E577,U+E57A-E587,U+E58A-E58D,U+E590-E5A1,U+E5A4-E5B9,U+E5BC-E5D1,U+E5D4-E60D,U+E612-E61B,U+E61E-E627,U+E62C-E637,U+E63A-E63B,U+E63E-E64F,U+E652-E669,U+E66C-E687,U+E68A-E699,U+E69C-E6A1,U+E6A4-E6AB,U+E6AE-E6AF,U+E6B2-E6B7,U+E6BA-E6C7,U+E6CC-E6CF,U+E6D2-E6D5,U+E6D8-E6ED,U+E6F0-E70F,U+E712-E72F,U+E732-E737,U+E73A-E73F,U+E742-E74B,U+E74E-E769,U+E76C-E76F,U+E774-E777,U+E780-E783,U+E786-E787,U+E78A-E791,U+E794-E797,U+E79A-E7A5,U+E7A8-E7A9,U+E7AE-E7BB,U+E7BE-E7C9,U+E7CC-E7D9,U+E7DE-E7EB,U+E7F2-E7F7,U+E7FC-E801,U+E804-E813,U+E816-E827,U+E830-E835,U+E838-E839,U+E83E-E83F,U+E842-E843,U+E85E-E865,U+E86A-E86B,U+E86E-E883,U+E88C-E88F,U+E89A-E89F,U+E8A6-E8A7,U+E8B0-E8B3,U+E8B6-E8B7,U+E8BA-E8BB,U+E8BE-E8C9,U+E8CC-E8D5,U+E8DC-E8DF,U+E8E4-E8E9,U+E8EC-E8ED,U+E8F2-E8F9,U+E8FC-E8FD,U+E902-E903,U+E906-E907,U+E914-E91B,U+E922-E925,U+E92A-E92B,U+E946-E94B,U+E94E-E951,U+E954-E961,U+E964-E965,U+E968-E969,U+E96C-E96D,U+E974-E979,U+E98A-E98D,U+E9A0-E9A1,U+E9A8-E9AD,U+E9B0-E9B3,U+E9B8-E9BB,U+E9C0-E9C3,U+E9C8-E9C9,U+E9CC-E9CD,U+E9D0-E9D1,U+E9D8-E9D9,U+E9DC-E9E1,U+E9E4-E9E9,U+E9EC-E9ED,U+E9F0-E9FF,U+EA04-EA09,U+EA0E-EA0F,U+EA12-EA15,U+EA1A-EA25,U+EA28-EA2D,U+EA32-EA3F,U+EA42-EA4F,U+EA5A-EA5F,U+EA64-EA6B,U+EA6E-EA6F,U+EA78-EA79,U+EA7C-EA7D,U+EA84-EA89,U+EA8C-EA93,U+EA96-EAA9,U+EAAC-EAAD,U+EAB4-EAB9,U+EABE-EABF,U+EAC2-EAC5,U+EACA-EACF,U+EAD4-EAD5,U+EADA-EAE3,U+EAE6-EAE9,U+EAEE-EAEF,U+EAF2-EAFB,U+EAFE-EB67,U+EB6A-EB6D,U+EB70-EB71,U+EB78-EB79,U+EB7C-EB7D,U+EB80-EB81,U+EB8A-EB8B,U+EB8E-EB8F,U+EB92-EB9F,U+EBA2-EBA7,U+EBAA-EBAB,U+EBAE-EBAF,U+EBB4-EBB5,U+EBBC-EBBF,U+EBC6-EBC7,U+EBD4-EBD7,U+EBDC-EBE1,U+EBE6-EBE9,U+EBF8-EBF9,U+EC08-EC09,U+EC14-EC15,U+EC1E-EC1F,U+EC22-EC27,U+EC2A-EC2B,U+EC34-EC39,U+EC48-EC4D,U+EC50-EC51,U+EC54-EC59,U+EC5C-EC5F,U+EC62-EC63,U+EC68-EC71,U+EC76-EC77,U+EC7A-EC7B,U+EC7E-EC81,U+EC86-EC89,U+EC8C-EC9B,U+ECA0-ECA1,U+ECA4-ECA5,U+ECA8-ECA9,U+ECAC-ECAF,U+ECB2-ECBD,U+ECC0-ECCB,U+ECCE-ECD1,U+ECD4-ECD9,U+ECDC-ECDD,U+ECE0-ECE1,U+ECEA-ECFF,U+ED02-ED03,U+ED08-ED13,U+ED16-ED17,U+ED1C-ED1D,U+ED24-ED25,U+ED2C-ED43,U+ED46-ED57,U+ED5C-ED5D,U+ED60-ED6D,U+ED70-ED71,U+ED74-ED75,U+ED7A-ED81,U+ED86-ED89,U+ED8C-ED93,U+ED98-ED9B,U+ED9E-EDBB,U+EDBE-EDC9,U+EDCE-EDDD,U+EDE0-EDE3,U+EDE6-EDE9,U+EDEC-EDEF,U+EDF2-EDF7,U+EDFE-EDFF,U+EE02-EE07,U+EE0A-EE0D,U+EE12-EE13,U+EE26-EE3F,U+EE42-EE5B,U+EE5E-EE69,U+EE74-EE75,U+EE80-EE83;}

/* Generated by scripts/build_studio_icons.py; Phosphor MIT. */


.ph-duotone {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Duotone" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-duotone.ph-anchor:before {
  content: "\e514";
  opacity: 0.2;
}
.ph-duotone.ph-anchor:after {
  content: "\e515";
  margin-left: -1em;
}
.ph-duotone.ph-angle:before {
  content: "\e7bc";
  opacity: 0.2;
}
.ph-duotone.ph-angle:after {
  content: "\e7bd";
  margin-left: -1em;
}
.ph-duotone.ph-archive:before {
  content: "\e00c";
  opacity: 0.2;
}
.ph-duotone.ph-archive:after {
  content: "\e00d";
  margin-left: -1em;
}
.ph-duotone.ph-arrows-clockwise:before {
  content: "\e094";
  opacity: 0.2;
}
.ph-duotone.ph-arrows-clockwise:after {
  content: "\e095";
  margin-left: -1em;
}
.ph-duotone.ph-article:before {
  content: "\e0a8";
  opacity: 0.2;
}
.ph-duotone.ph-article:after {
  content: "\e0a9";
  margin-left: -1em;
}
.ph-duotone.ph-at:before {
  content: "\e0ac";
  opacity: 0.2;
}
.ph-duotone.ph-at:after {
  content: "\e0ad";
  margin-left: -1em;
}
.ph-duotone.ph-barn:before {
  content: "\ec72";
  opacity: 0.2;
}
.ph-duotone.ph-barn:after {
  content: "\ec73";
  margin-left: -1em;
}
.ph-duotone.ph-bookmark-simple:before {
  content: "\e0ea";
  opacity: 0.2;
}
.ph-duotone.ph-bookmark-simple:after {
  content: "\e0eb";
  margin-left: -1em;
}
.ph-duotone.ph-browser:before {
  content: "\e0f4";
  opacity: 0.2;
}
.ph-duotone.ph-browser:after {
  content: "\e0f5";
  margin-left: -1em;
}
.ph-duotone.ph-browsers:before {
  content: "\e0f6";
  opacity: 0.2;
}
.ph-duotone.ph-browsers:after {
  content: "\e0f7";
  margin-left: -1em;
}
.ph-duotone.ph-bus:before {
  content: "\e106";
  opacity: 0.2;
}
.ph-duotone.ph-bus:after {
  content: "\e107";
  margin-left: -1em;
}
.ph-duotone.ph-camera:before {
  content: "\e10e";
  opacity: 0.2;
}
.ph-duotone.ph-camera:after {
  content: "\e10f";
  margin-left: -1em;
}
.ph-duotone.ph-car:before {
  content: "\e112";
  opacity: 0.2;
}
.ph-duotone.ph-car:after {
  content: "\e113";
  margin-left: -1em;
}
.ph-duotone.ph-cards:before {
  content: "\e0f8";
  opacity: 0.2;
}
.ph-duotone.ph-cards:after {
  content: "\e0f9";
  margin-left: -1em;
}
.ph-duotone.ph-chat:before {
  content: "\e15c";
  opacity: 0.2;
}
.ph-duotone.ph-chat:after {
  content: "\e15d";
  margin-left: -1em;
}
.ph-duotone.ph-check:before {
  content: "\e182";
  opacity: 0.2;
}
.ph-duotone.ph-check:after {
  content: "\e183";
  margin-left: -1em;
}
.ph-duotone.ph-checks:before {
  content: "\e53a";
  opacity: 0.2;
}
.ph-duotone.ph-checks:after {
  content: "\e53b";
  margin-left: -1em;
}
.ph-duotone.ph-circle:before {
  content: "\e18a";
  opacity: 0.2;
}
.ph-duotone.ph-circle:after {
  content: "\e18b";
  margin-left: -1em;
}
.ph-duotone.ph-clipboard:before {
  content: "\e196";
  opacity: 0.2;
}
.ph-duotone.ph-clipboard:after {
  content: "\e197";
  margin-left: -1em;
}
.ph-duotone.ph-code:before {
  content: "\e1bc";
  opacity: 0.2;
}
.ph-duotone.ph-code:after {
  content: "\e1bd";
  margin-left: -1em;
}
.ph-duotone.ph-coin:before {
  content: "\e60e";
  opacity: 0.2;
}
.ph-duotone.ph-coin:after {
  content: "\e60f";
  margin-left: -1em;
}
.ph-duotone.ph-columns:before {
  content: "\e546";
  opacity: 0.2;
}
.ph-duotone.ph-columns:after {
  content: "\e547";
  margin-left: -1em;
}
.ph-duotone.ph-control:before {
  content: "\eca6";
  opacity: 0.2;
}
.ph-duotone.ph-control:after {
  content: "\eca7";
  margin-left: -1em;
}
.ph-duotone.ph-cookie:before {
  content: "\e6ca";
  opacity: 0.2;
}
.ph-duotone.ph-cookie:after {
  content: "\e6cb";
  margin-left: -1em;
}
.ph-duotone.ph-copy:before {
  content: "\e1ca";
  opacity: 0.2;
}
.ph-duotone.ph-copy:after {
  content: "\e1cb";
  margin-left: -1em;
}
.ph-duotone.ph-cpu:before {
  content: "\e610";
  opacity: 0.2;
}
.ph-duotone.ph-cpu:after {
  content: "\e611";
  margin-left: -1em;
}
.ph-duotone.ph-crop:before {
  content: "\e1d4";
  opacity: 0.2;
}
.ph-duotone.ph-crop:after {
  content: "\e1d5";
  margin-left: -1em;
}
.ph-duotone.ph-cross:before {
  content: "\e8a0";
  opacity: 0.2;
}
.ph-duotone.ph-cross:after {
  content: "\e8a1";
  margin-left: -1em;
}
.ph-duotone.ph-crosshair:before {
  content: "\e1d6";
  opacity: 0.2;
}
.ph-duotone.ph-crosshair:after {
  content: "\e1d7";
  margin-left: -1em;
}
.ph-duotone.ph-cube:before {
  content: "\e1da";
  opacity: 0.2;
}
.ph-duotone.ph-cube:after {
  content: "\e1db";
  margin-left: -1em;
}
.ph-duotone.ph-cube-transparent:before {
  content: "\ec7c";
  opacity: 0.2;
}
.ph-duotone.ph-cube-transparent:after {
  content: "\ec7d";
  margin-left: -1em;
}
.ph-duotone.ph-cursor:before {
  content: "\e1dc";
  opacity: 0.2;
}
.ph-duotone.ph-cursor:after {
  content: "\e1dd";
  margin-left: -1em;
}
.ph-duotone.ph-desktop:before {
  content: "\e560";
  opacity: 0.2;
}
.ph-duotone.ph-desktop:after {
  content: "\e561";
  margin-left: -1em;
}
.ph-duotone.ph-door:before {
  content: "\e61c";
  opacity: 0.2;
}
.ph-duotone.ph-door:after {
  content: "\e61d";
  margin-left: -1em;
}
.ph-duotone.ph-dot:before {
  content: "\ecde";
  opacity: 0.2;
}
.ph-duotone.ph-dot:after {
  content: "\ecdf";
  margin-left: -1em;
}
.ph-duotone.ph-download:before {
  content: "\e20a";
  opacity: 0.2;
}
.ph-duotone.ph-download:after {
  content: "\e20b";
  margin-left: -1em;
}
.ph-duotone.ph-dress:before {
  content: "\ea7e";
  opacity: 0.2;
}
.ph-duotone.ph-dress:after {
  content: "\ea7f";
  margin-left: -1em;
}
.ph-duotone.ph-drop:before {
  content: "\e210";
  opacity: 0.2;
}
.ph-duotone.ph-drop:after {
  content: "\e211";
  margin-left: -1em;
}
.ph-duotone.ph-empty:before {
  content: "\edbc";
  opacity: 0.2;
}
.ph-duotone.ph-empty:after {
  content: "\edbd";
  margin-left: -1em;
}
.ph-duotone.ph-engine:before {
  content: "\ea80";
  opacity: 0.2;
}
.ph-duotone.ph-engine:after {
  content: "\ea81";
  margin-left: -1em;
}
.ph-duotone.ph-export:before {
  content: "\eaf0";
  opacity: 0.2;
}
.ph-duotone.ph-export:after {
  content: "\eaf1";
  margin-left: -1em;
}
.ph-duotone.ph-eyes:before {
  content: "\ee5c";
  opacity: 0.2;
}
.ph-duotone.ph-eyes:after {
  content: "\ee5d";
  margin-left: -1em;
}
.ph-duotone.ph-file:before {
  content: "\e230";
  opacity: 0.2;
}
.ph-duotone.ph-file:after {
  content: "\e231";
  margin-left: -1em;
}
.ph-duotone.ph-files:before {
  content: "\e710";
  opacity: 0.2;
}
.ph-duotone.ph-files:after {
  content: "\e711";
  margin-left: -1em;
}
.ph-duotone.ph-film-strip:before {
  content: "\e792";
  opacity: 0.2;
}
.ph-duotone.ph-film-strip:after {
  content: "\e793";
  margin-left: -1em;
}
.ph-duotone.ph-fingerprint:before {
  content: "\e23e";
  opacity: 0.2;
}
.ph-duotone.ph-fingerprint:after {
  content: "\e23f";
  margin-left: -1em;
}
.ph-duotone.ph-fire:before {
  content: "\e242";
  opacity: 0.2;
}
.ph-duotone.ph-fire:after {
  content: "\e243";
  margin-left: -1em;
}
.ph-duotone.ph-flashlight:before {
  content: "\e246";
  opacity: 0.2;
}
.ph-duotone.ph-flashlight:after {
  content: "\e247";
  margin-left: -1em;
}
.ph-duotone.ph-folder-simple-star:before {
  content: "\ec2e";
  opacity: 0.2;
}
.ph-duotone.ph-folder-simple-star:after {
  content: "\ec2f";
  margin-left: -1em;
}
.ph-duotone.ph-function:before {
  content: "\ebe4";
  opacity: 0.2;
}
.ph-duotone.ph-function:after {
  content: "\ebe5";
  margin-left: -1em;
}
.ph-duotone.ph-gauge:before {
  content: "\e628";
  opacity: 0.2;
}
.ph-duotone.ph-gauge:after {
  content: "\e629";
  margin-left: -1em;
}
.ph-duotone.ph-gear-six:before {
  content: "\e272";
  opacity: 0.2;
}
.ph-duotone.ph-gear-six:after {
  content: "\e273";
  margin-left: -1em;
}
.ph-duotone.ph-ghost:before {
  content: "\e62a";
  opacity: 0.2;
}
.ph-duotone.ph-ghost:after {
  content: "\e62b";
  margin-left: -1em;
}
.ph-duotone.ph-guitar:before {
  content: "\ea8a";
  opacity: 0.2;
}
.ph-duotone.ph-guitar:after {
  content: "\ea8b";
  margin-left: -1em;
}
.ph-duotone.ph-hard-drives:before {
  content: "\e2a0";
  opacity: 0.2;
}
.ph-duotone.ph-hard-drives:after {
  content: "\e2a1";
  margin-left: -1em;
}
.ph-duotone.ph-hash:before {
  content: "\e2a2";
  opacity: 0.2;
}
.ph-duotone.ph-hash:after {
  content: "\e2a3";
  margin-left: -1em;
}
.ph-duotone.ph-heartbeat:before {
  content: "\e2ac";
  opacity: 0.2;
}
.ph-duotone.ph-heartbeat:after {
  content: "\e2ad";
  margin-left: -1em;
}
.ph-duotone.ph-hospital:before {
  content: "\e844";
  opacity: 0.2;
}
.ph-duotone.ph-hospital:after {
  content: "\e845";
  margin-left: -1em;
}
.ph-duotone.ph-image:before {
  content: "\e2ca";
  opacity: 0.2;
}
.ph-duotone.ph-image:after {
  content: "\e2cb";
  margin-left: -1em;
}
.ph-duotone.ph-images:before {
  content: "\e836";
  opacity: 0.2;
}
.ph-duotone.ph-images:after {
  content: "\e837";
  margin-left: -1em;
}
.ph-duotone.ph-info:before {
  content: "\e2ce";
  opacity: 0.2;
}
.ph-duotone.ph-info:after {
  content: "\e2cf";
  margin-left: -1em;
}
.ph-duotone.ph-key:before {
  content: "\e2d6";
  opacity: 0.2;
}
.ph-duotone.ph-key:after {
  content: "\e2d7";
  margin-left: -1em;
}
.ph-duotone.ph-keyboard:before {
  content: "\e2d8";
  opacity: 0.2;
}
.ph-duotone.ph-keyboard:after {
  content: "\e2d9";
  margin-left: -1em;
}
.ph-duotone.ph-lamp:before {
  content: "\e638";
  opacity: 0.2;
}
.ph-duotone.ph-lamp:after {
  content: "\e639";
  margin-left: -1em;
}
.ph-duotone.ph-layout:before {
  content: "\e6d6";
  opacity: 0.2;
}
.ph-duotone.ph-layout:after {
  content: "\e6d7";
  margin-left: -1em;
}
.ph-duotone.ph-lightbulb-filament:before {
  content: "\e63c";
  opacity: 0.2;
}
.ph-duotone.ph-lightbulb-filament:after {
  content: "\e63d";
  margin-left: -1em;
}
.ph-duotone.ph-link:before {
  content: "\e2e2";
  opacity: 0.2;
}
.ph-duotone.ph-link:after {
  content: "\e2e3";
  margin-left: -1em;
}
.ph-duotone.ph-list:before {
  content: "\e2f0";
  opacity: 0.2;
}
.ph-duotone.ph-list:after {
  content: "\e2f1";
  margin-left: -1em;
}
.ph-duotone.ph-lock:before {
  content: "\e2fa";
  opacity: 0.2;
}
.ph-duotone.ph-lock:after {
  content: "\e2fb";
  margin-left: -1em;
}
.ph-duotone.ph-log:before {
  content: "\ed82";
  opacity: 0.2;
}
.ph-duotone.ph-log:after {
  content: "\ed83";
  margin-left: -1em;
}
.ph-duotone.ph-memory:before {
  content: "\e9c4";
  opacity: 0.2;
}
.ph-duotone.ph-memory:after {
  content: "\e9c5";
  margin-left: -1em;
}
.ph-duotone.ph-money:before {
  content: "\e588";
  opacity: 0.2;
}
.ph-duotone.ph-money:after {
  content: "\e589";
  margin-left: -1em;
}
.ph-duotone.ph-moon-stars:before {
  content: "\e58e";
  opacity: 0.2;
}
.ph-duotone.ph-moon-stars:after {
  content: "\e58f";
  margin-left: -1em;
}
.ph-duotone.ph-mouse:before {
  content: "\e33a";
  opacity: 0.2;
}
.ph-duotone.ph-mouse:after {
  content: "\e33b";
  margin-left: -1em;
}
.ph-duotone.ph-needle:before {
  content: "\e82e";
  opacity: 0.2;
}
.ph-duotone.ph-needle:after {
  content: "\e82f";
  margin-left: -1em;
}
.ph-duotone.ph-network:before {
  content: "\edde";
  opacity: 0.2;
}
.ph-duotone.ph-network:after {
  content: "\eddf";
  margin-left: -1em;
}
.ph-duotone.ph-note:before {
  content: "\e348";
  opacity: 0.2;
}
.ph-duotone.ph-note:after {
  content: "\e349";
  margin-left: -1em;
}
.ph-duotone.ph-option:before {
  content: "\e8a8";
  opacity: 0.2;
}
.ph-duotone.ph-option:after {
  content: "\e8a9";
  margin-left: -1em;
}
.ph-duotone.ph-orange:before {
  content: "\ee40";
  opacity: 0.2;
}
.ph-duotone.ph-orange:after {
  content: "\ee41";
  margin-left: -1em;
}
.ph-duotone.ph-package:before {
  content: "\e390";
  opacity: 0.2;
}
.ph-duotone.ph-package:after {
  content: "\e391";
  margin-left: -1em;
}
.ph-duotone.ph-palette:before {
  content: "\e6c8";
  opacity: 0.2;
}
.ph-duotone.ph-palette:after {
  content: "\e6c9";
  margin-left: -1em;
}
.ph-duotone.ph-path:before {
  content: "\e39c";
  opacity: 0.2;
}
.ph-duotone.ph-path:after {
  content: "\e39d";
  margin-left: -1em;
}
.ph-duotone.ph-pause:before {
  content: "\e39e";
  opacity: 0.2;
}
.ph-duotone.ph-pause:after {
  content: "\e39f";
  margin-left: -1em;
}
.ph-duotone.ph-percent:before {
  content: "\e3b6";
  opacity: 0.2;
}
.ph-duotone.ph-percent:after {
  content: "\e3b7";
  margin-left: -1em;
}
.ph-duotone.ph-person-simple-run:before {
  content: "\e730";
  opacity: 0.2;
}
.ph-duotone.ph-person-simple-run:after {
  content: "\e731";
  margin-left: -1em;
}
.ph-duotone.ph-phone:before {
  content: "\e3b8";
  opacity: 0.2;
}
.ph-duotone.ph-phone:after {
  content: "\e3b9";
  margin-left: -1em;
}
.ph-duotone.ph-placeholder:before {
  content: "\e650";
  opacity: 0.2;
}
.ph-duotone.ph-placeholder:after {
  content: "\e651";
  margin-left: -1em;
}
.ph-duotone.ph-play:before {
  content: "\e3d0";
  opacity: 0.2;
}
.ph-duotone.ph-play:after {
  content: "\e3d1";
  margin-left: -1em;
}
.ph-duotone.ph-play-circle:before {
  content: "\e3d2";
  opacity: 0.2;
}
.ph-duotone.ph-play-circle:after {
  content: "\e3d3";
  margin-left: -1em;
}
.ph-duotone.ph-plus:before {
  content: "\e3d4";
  opacity: 0.2;
}
.ph-duotone.ph-plus:after {
  content: "\e3d5";
  margin-left: -1em;
}
.ph-duotone.ph-polygon:before {
  content: "\e6d0";
  opacity: 0.2;
}
.ph-duotone.ph-polygon:after {
  content: "\e6d1";
  margin-left: -1em;
}
.ph-duotone.ph-pulse:before {
  content: "\e000";
  opacity: 0.2;
}
.ph-duotone.ph-pulse:after {
  content: "\e001";
  margin-left: -1em;
}
.ph-duotone.ph-queue:before {
  content: "\e6ac";
  opacity: 0.2;
}
.ph-duotone.ph-queue:after {
  content: "\e6ad";
  margin-left: -1em;
}
.ph-duotone.ph-radio:before {
  content: "\e77e";
  opacity: 0.2;
}
.ph-duotone.ph-radio:after {
  content: "\e77f";
  margin-left: -1em;
}
.ph-duotone.ph-receipt:before {
  content: "\e3ec";
  opacity: 0.2;
}
.ph-duotone.ph-receipt:after {
  content: "\e3f1";
  margin-left: -1em;
}
.ph-duotone.ph-record:before {
  content: "\e3ee";
  opacity: 0.2;
}
.ph-duotone.ph-record:after {
  content: "\e3f3";
  margin-left: -1em;
}
.ph-duotone.ph-repeat:before {
  content: "\e3f6";
  opacity: 0.2;
}
.ph-duotone.ph-repeat:after {
  content: "\e3f9";
  margin-left: -1em;
}
.ph-duotone.ph-resize:before {
  content: "\ed6e";
  opacity: 0.2;
}
.ph-duotone.ph-resize:after {
  content: "\ed6f";
  margin-left: -1em;
}
.ph-duotone.ph-rows:before {
  content: "\e5a2";
  opacity: 0.2;
}
.ph-duotone.ph-rows:after {
  content: "\e5a3";
  margin-left: -1em;
}
.ph-duotone.ph-ruler:before {
  content: "\e6b8";
  opacity: 0.2;
}
.ph-duotone.ph-ruler:after {
  content: "\e6b9";
  margin-left: -1em;
}
.ph-duotone.ph-scan:before {
  content: "\ebb6";
  opacity: 0.2;
}
.ph-duotone.ph-scan:after {
  content: "\ebb7";
  margin-left: -1em;
}
.ph-duotone.ph-scroll:before {
  content: "\eb7a";
  opacity: 0.2;
}
.ph-duotone.ph-scroll:after {
  content: "\eb7b";
  margin-left: -1em;
}
.ph-duotone.ph-selection:before {
  content: "\e69a";
  opacity: 0.2;
}
.ph-duotone.ph-selection:after {
  content: "\e69b";
  margin-left: -1em;
}
.ph-duotone.ph-share:before {
  content: "\e406";
  opacity: 0.2;
}
.ph-duotone.ph-share:after {
  content: "\e409";
  margin-left: -1em;
}
.ph-duotone.ph-signature:before {
  content: "\ebac";
  opacity: 0.2;
}
.ph-duotone.ph-signature:after {
  content: "\ebad";
  margin-left: -1em;
}
.ph-duotone.ph-sliders-horizontal:before {
  content: "\e434";
  opacity: 0.2;
}
.ph-duotone.ph-sliders-horizontal:after {
  content: "\e435";
  margin-left: -1em;
}
.ph-duotone.ph-smiley:before {
  content: "\e436";
  opacity: 0.2;
}
.ph-duotone.ph-smiley:after {
  content: "\e437";
  margin-left: -1em;
}
.ph-duotone.ph-sparkle:before {
  content: "\e6a2";
  opacity: 0.2;
}
.ph-duotone.ph-sparkle:after {
  content: "\e6a3";
  margin-left: -1em;
}
.ph-duotone.ph-spinner:before {
  content: "\e66a";
  opacity: 0.2;
}
.ph-duotone.ph-spinner:after {
  content: "\e66b";
  margin-left: -1em;
}
.ph-duotone.ph-stack:before {
  content: "\e466";
  opacity: 0.2;
}
.ph-duotone.ph-stack:after {
  content: "\e467";
  margin-left: -1em;
}
.ph-duotone.ph-steps:before {
  content: "\ecbe";
  opacity: 0.2;
}
.ph-duotone.ph-steps:after {
  content: "\ecbf";
  margin-left: -1em;
}
.ph-duotone.ph-stop:before {
  content: "\e46c";
  opacity: 0.2;
}
.ph-duotone.ph-stop:after {
  content: "\e46d";
  margin-left: -1em;
}
.ph-duotone.ph-subtitles:before {
  content: "\e1a8";
  opacity: 0.2;
}
.ph-duotone.ph-subtitles:after {
  content: "\e1a9";
  margin-left: -1em;
}
.ph-duotone.ph-sun-dim:before {
  content: "\e474";
  opacity: 0.2;
}
.ph-duotone.ph-sun-dim:after {
  content: "\e475";
  margin-left: -1em;
}
.ph-duotone.ph-swap:before {
  content: "\e83c";
  opacity: 0.2;
}
.ph-duotone.ph-swap:after {
  content: "\e83d";
  margin-left: -1em;
}
.ph-duotone.ph-sword:before {
  content: "\e5ba";
  opacity: 0.2;
}
.ph-duotone.ph-sword:after {
  content: "\e5bb";
  margin-left: -1em;
}
.ph-duotone.ph-table:before {
  content: "\e476";
  opacity: 0.2;
}
.ph-duotone.ph-table:after {
  content: "\e477";
  margin-left: -1em;
}
.ph-duotone.ph-tabs:before {
  content: "\e778";
  opacity: 0.2;
}
.ph-duotone.ph-tabs:after {
  content: "\e779";
  margin-left: -1em;
}
.ph-duotone.ph-tag:before {
  content: "\e478";
  opacity: 0.2;
}
.ph-duotone.ph-tag:after {
  content: "\e479";
  margin-left: -1em;
}
.ph-duotone.ph-target:before {
  content: "\e47c";
  opacity: 0.2;
}
.ph-duotone.ph-target:after {
  content: "\e47d";
  margin-left: -1em;
}
.ph-duotone.ph-terminal:before {
  content: "\e47e";
  opacity: 0.2;
}
.ph-duotone.ph-terminal:after {
  content: "\e47f";
  margin-left: -1em;
}
.ph-duotone.ph-text-aa:before {
  content: "\e6ee";
  opacity: 0.2;
}
.ph-duotone.ph-text-aa:after {
  content: "\e6ef";
  margin-left: -1em;
}
.ph-duotone.ph-ticket:before {
  content: "\e490";
  opacity: 0.2;
}
.ph-duotone.ph-ticket:after {
  content: "\e491";
  margin-left: -1em;
}
.ph-duotone.ph-timer:before {
  content: "\e492";
  opacity: 0.2;
}
.ph-duotone.ph-timer:after {
  content: "\e493";
  margin-left: -1em;
}
.ph-duotone.ph-translate:before {
  content: "\e4a2";
  opacity: 0.2;
}
.ph-duotone.ph-translate:after {
  content: "\e4a3";
  margin-left: -1em;
}
.ph-duotone.ph-tray:before {
  content: "\e4aa";
  opacity: 0.2;
}
.ph-duotone.ph-tray:after {
  content: "\e4ab";
  margin-left: -1em;
}
.ph-duotone.ph-upload:before {
  content: "\e4be";
  opacity: 0.2;
}
.ph-duotone.ph-upload:after {
  content: "\e4bf";
  margin-left: -1em;
}
.ph-duotone.ph-user:before {
  content: "\e4c2";
  opacity: 0.2;
}
.ph-duotone.ph-user:after {
  content: "\e4c3";
  margin-left: -1em;
}
.ph-duotone.ph-users:before {
  content: "\e4d6";
  opacity: 0.2;
}
.ph-duotone.ph-users:after {
  content: "\e4d7";
  margin-left: -1em;
}
.ph-duotone.ph-video:before {
  content: "\e740";
  opacity: 0.2;
}
.ph-duotone.ph-video:after {
  content: "\e741";
  margin-left: -1em;
}
.ph-duotone.ph-video-camera:before {
  content: "\e4da";
  opacity: 0.2;
}
.ph-duotone.ph-video-camera:after {
  content: "\e4db";
  margin-left: -1em;
}
.ph-duotone.ph-wall:before {
  content: "\e688";
  opacity: 0.2;
}
.ph-duotone.ph-wall:after {
  content: "\e689";
  margin-left: -1em;
}
.ph-duotone.ph-warning:before {
  content: "\e4e0";
  opacity: 0.2;
}
.ph-duotone.ph-warning:after {
  content: "\e4e1";
  margin-left: -1em;
}
.ph-duotone.ph-waveform:before {
  content: "\e802";
  opacity: 0.2;
}
.ph-duotone.ph-waveform:after {
  content: "\e803";
  margin-left: -1em;
}
.ph-duotone.ph-wheelchair:before {
  content: "\e4e8";
  opacity: 0.2;
}
.ph-duotone.ph-wheelchair:after {
  content: "\e4e9";
  margin-left: -1em;
}
.ph-duotone.ph-wind:before {
  content: "\e5d2";
  opacity: 0.2;
}
.ph-duotone.ph-wind:after {
  content: "\e5d3";
  margin-left: -1em;
}
.ph-duotone.ph-x:before {
  content: "\e4f6";
  opacity: 0.2;
}
.ph-duotone.ph-x:after {
  content: "\e4f7";
  margin-left: -1em;
}


#sessionPrivate[hidden]{display:none!important}
.studio-account{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;font-size:12px}
.studio-account #sessionName{margin-left:auto;overflow-wrap:anywhere;min-width:0}
.studio-account button{padding:5px 10px}
.studio-server-note{margin:0;padding:4px 16px 8px;font-size:12px;opacity:.8}
:root{color-scheme:dark;--bg:#0c111c;--side:#0b1019;--panel:#111a29;--field:#0d1522;--hover:#1b2a3f;--line:#27374f;--text:#e7edfc;--muted:#a0b0ca;--cyan:#31c7f3;--cyan-bg:#103e55;--violet:#a78bfa;--purple-bg:#262044;--primary:#b82be5;--success:#58dba5;--error:#ff9d9d;--focus:#57d5ff;font-family:Inter,system-ui,sans-serif;font-size:13px}
:root[data-theme=light]{color-scheme:light;--bg:#f4f6fa;--side:#edf1f8;--panel:#fff;--field:#f8faff;--hover:#e6ecf6;--line:#c9d3e2;--text:#192b45;--muted:#50617b;--cyan:#007ba6;--cyan-bg:#d9f1fa;--violet:#7448bb;--purple-bg:#eee7fb;--primary:#8620b6;--success:#137e56;--error:#b9273b;--focus:#007da8}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.45}button,input,select,textarea{font:inherit;color:inherit}button,select,summary,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button,a,summary{transition:background-color .14s,border-color .14s,color .14s,transform .14s}button:active:not(:disabled){transform:translateY(1px)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.native-proxy{display:none!important}.skip-link{position:fixed;left:12px;top:-80px;z-index:20;background:var(--panel);padding:12px}.skip-link:focus{top:12px}p{margin:6px 0}h1,h2,h3{margin:0;line-height:1.25}h1,h2{font-size:20px;font-weight:650;letter-spacing:-.025em}a{color:var(--cyan)}.hint,.section-label{color:var(--muted);font-size:11px;line-height:1.5}.hint:empty,p:empty{display:none}.ph-duotone{font-size:21px;flex-shrink:0;vertical-align:middle}
.studio{display:grid;grid-template-columns:190px minmax(450px,1fr) minmax(300px,.55fr);min-height:100dvh;max-width:2000px;margin:auto}.navigation,.creation,.workspace{min-width:0}.navigation{background:var(--side);border-right:1px solid var(--line);padding:22px 12px 12px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100dvh;overflow:auto}.brand{padding:0 6px}.brand-title{display:flex;align-items:center;gap:9px}.brand-title>.ph-duotone{font-size:29px;color:var(--cyan)}.brand h1{font-size:19px;white-space:nowrap}.brand p{font-size:9px;letter-spacing:.17em;color:var(--muted);margin:7px 0 0 39px}.indicator{color:var(--success);margin-left:auto}.indicator .ph-duotone{font-size:18px}.navigation nav,.model-picker{display:flex;flex-direction:column;gap:5px}.navigation button,.navigation summary{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:10px;border-radius:5px;min-height:40px}.navigation button:hover,.navigation summary:hover{background:var(--hover)}.navigation button.active{background:var(--cyan-bg);border-left:3px solid var(--cyan);padding-left:8px}.navigation button.active>.ph-duotone{color:var(--cyan)}.section-label{font-size:10px;letter-spacing:.07em;margin:0 10px 9px}.sidebar-models{border-top:1px solid var(--line);padding-top:18px}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}.nav-count{font-size:10px;margin-left:auto;background:var(--hover);padding:3px 5px;border-radius:4px}.nav-button:has(.nav-count:not([hidden])){flex-wrap:wrap}.nav-count:not([hidden]){margin-left:31px}
.creation{padding:22px;border-right:1px solid var(--line);position:relative}.creation-header{display:flex;gap:10px;align-items:center;margin-bottom:20px}.creation-header h2{font-size:25px}.creation-header .hint{margin:5px 0 0}.current-model{margin-left:auto;display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px 11px;border-radius:5px;white-space:nowrap}.current-model .ph-duotone{color:var(--cyan)}.results-toggle{border:0;background:transparent;color:var(--muted);font-size:22px;padding:4px 8px}.workflow-tabs,.mode-tabs:not(.model-picker),.creativity-row,.workspace-tabs{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:3px;gap:3px}.workflow-tabs{margin-bottom:16px}.workflow-tabs button,.mode-tabs:not(.model-picker) button,.creativity-row button,.workspace-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:4px;padding:9px 5px;font-size:12px;min-width:0}.workflow-tabs button{flex-direction:column;gap:4px;font-size:11px}.workflow-tabs button[aria-pressed=true]{background:var(--purple-bg);color:var(--violet);border-bottom-color:var(--violet)}.mode-tabs:not(.model-picker) button.active,.workspace-tabs button[aria-pressed=true],.creativity-row button[aria-pressed=true]{background:var(--cyan-bg);border-bottom-color:var(--cyan)}button:hover:not(:disabled){background-color:var(--hover)}.workflow-tabs .ph-duotone{font-size:23px}
.prompt-editors{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin:14px 0 16px}.prompt-editors>div{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px;display:flex;flex-direction:column}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin-bottom:6px}.field-title{font-weight:600;font-size:12px}.prompt-editors textarea{min-height:190px;flex:1;line-height:1.55}.prompt-editors .hint{font-size:10px;margin:6px 0 0}.prompt-editors>div:last-child textarea{border-color:color-mix(in srgb,var(--cyan) 55%,var(--line))}textarea,select,input:not([type=checkbox]):not([type=hidden]){background:var(--field);border:1px solid var(--line);border-radius:5px;padding:8px 10px;max-width:100%;min-width:0}textarea{width:100%;resize:vertical;min-height:80px;display:block}textarea::placeholder,input::placeholder{color:var(--muted);opacity:.85}select{cursor:pointer}label>select{display:block;width:100%;margin-top:5px}input[type=checkbox]{accent-color:var(--cyan);width:15px;height:15px;vertical-align:middle}input[type=file]{width:100%;font-size:11px}label{font-size:12px}button.plate,.job-action,.enqueue-handle,.lever{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:7px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;font-size:12px;text-decoration:none}#enhancePrompt{font-size:11px;color:var(--violet);background:var(--purple-bg);padding:5px 8px;min-height:27px}#promptAdditions{min-height:54px;height:62px;margin-top:7px}.additions-editor .hint{font-size:10px}.prompt-genres{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.prompt-genres button{border-radius:20px;font-size:11px;padding:5px 11px;min-height:29px}.prompt-genres button[aria-pressed=true]{background:var(--purple-bg);border-color:var(--violet)}details{border-top:1px solid var(--line);padding:10px 0;margin:8px 0}summary{cursor:pointer;color:var(--muted);font-size:12px;list-style-position:inside}summary:hover{color:var(--text)}details[open]>summary{margin-bottom:12px}#wanControls>summary{font-weight:500;color:var(--text)}.creative-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}.creative-options label{font-size:11px}.creativity-row{margin:12px 0}.creativity-row .ph-duotone{font-size:21px}.enhancement-actions{display:flex;justify-content:flex-end;gap:6px;margin:8px 0}
.generation-details{margin-top:0;padding-top:0;border:0}.generation-details>summary{display:flex;align-items:center;gap:7px}.generation-details>summary:after{content:'+';margin-left:auto}.generation-details[open]>summary:after{content:'−'}.generation-settings{display:grid;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}.generation-settings textarea{min-height:64px}.ltx-controls>div:not([hidden]){padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;margin:8px 0}.ltx-controls img,.source img{max-width:100%;max-height:120px;object-fit:contain;border-radius:5px}.h3-reference-previews{display:flex;flex-wrap:wrap;gap:6px}.h3-reference-previews img{width:70px;height:70px;object-fit:cover}.source{margin:8px 0}.source:has(img[hidden]){display:none}.source p{font-size:11px}.output-actions{display:flex;align-items:end;gap:12px;margin:16px 0 10px}.dials{display:flex;gap:10px;flex:1}.dial-field{flex:1;min-width:0}.dial-label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.dial-value{width:100%;padding:9px!important}.dial-wrap,.dial-values,.hinges,.blood{display:none}.enqueue-handle{background:var(--primary);color:white;border-color:transparent;padding:10px 16px;min-height:39px;white-space:nowrap;font-weight:600}.enqueue-handle:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 82%,var(--text))}.last-frame-option{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px}.last-frame-option .hint{font-size:10px}.launch-assembly{margin-top:14px}.lever{width:100%;min-height:36px}.generation-notes{font-size:11px}.draft-note{color:var(--success);margin-top:12px}.job-error,[data-error=true],#connectionStatus{color:var(--error)}
.workspace{padding:22px 16px 14px;min-width:0}.workspace-header h2{font-size:18px;display:none}.workspace-tabs{margin-bottom:14px}.workspace-tabs .ph-duotone{font-size:22px}.workspace-tabs button{font-size:13px;padding:8px}.status-disclosure{margin:0 0 10px;border:0;padding:0}.status-disclosure>summary{font-size:10px}.status-copy{display:flex;flex-direction:column;gap:4px;font-size:11px}.connection-heartbeat{white-space:pre-line;color:var(--success);font-size:10px}.connection-heartbeat[data-connection=stale]{color:var(--error)}#studioStatus{font-weight:600}#studioDetail,#studioEstimate{font-size:11px;color:var(--muted)}.gallery-toolbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:12px 0}.gallery-toolbar .mode-tabs{flex:1}.gallery-toolbar .mode-tabs button{font-size:11px;padding:5px}.gallery-toolbar select{font-size:11px;width:100%}.icon-button{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px;min-width:32px;min-height:32px}.gallery-toolbar #imageCollection{flex:1 0 100%;order:3}.panel{min-width:0}.panel>h1{font-size:15px;margin:12px 0}.panel>.hint{font-size:11px}#imageGallery,#videoLibrary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#videoLibrary .job{margin:0;padding:9px}.image-card{position:relative;border:1px solid var(--line);border-radius:5px;background:var(--panel);min-width:0;padding:0 0 6px}.image-card.selected{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.image-card img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:4px 4px 0 0}.image-card p{font-size:10px;overflow-wrap:anywhere;padding:0 7px;margin:6px 0 0}.image-card button.image-icon{position:absolute;top:6px;width:30px;height:30px;background:#0c1723e8;border:1px solid #7fa0be;color:#ecfaff;border-radius:5px;display:grid;place-items:center;padding:4px}.image-icon-video{right:42px}.image-icon-collection{right:6px}.image-icon[aria-pressed=true]{background:#056b83!important;border-color:#6ce0ff!important}.image-icon .ph-duotone{font-size:20px}.image-icon:after{content:attr(data-hint);position:absolute;right:0;top:35px;background:var(--panel);color:var(--text);border:1px solid var(--line);padding:7px 9px;border-radius:4px;white-space:normal;width:150px;font-size:11px;visibility:hidden;z-index:5}.image-icon:hover:after,.image-icon:focus-visible:after,.image-icon[data-tip=open]:after{visibility:visible}.image-pagination{justify-content:space-between;margin:12px 0!important;gap:5px!important}.image-pagination button{font-size:10px;padding:5px}.image-pagination .hint{font-size:10px}#videoPanel{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:9px;margin-bottom:12px}video{display:block;width:100%;max-height:350px;background:#000;border-radius:4px;margin:8px 0}#videoName{font-size:11px}#closeVideo{font-size:10px;padding:3px 6px;min-height:25px;float:right}.empty-gallery{padding:40px 12px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:6px}.empty-gallery>.ph-duotone{font-size:38px;color:var(--cyan)}
.row{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:8px 0}.row>label{flex:1;min-width:120px}.job{border:1px solid var(--line);padding:12px;border-radius:6px;background:var(--panel);margin:10px 0;overflow-wrap:anywhere}.job-summary{color:var(--text);font-size:12px}.job pre,.prompt-preview,#log{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;background:var(--field);padding:10px;border-radius:5px;max-height:300px;overflow:auto}.job .job-action{margin:4px 4px 0 0;font-size:11px}.provider-check{padding:10px;border-bottom:1px solid var(--line)}.provider-check.error,.provider-check.failed{color:var(--error)}.batch-scenes{padding-left:20px}.batch-scenes>li{border-bottom:1px solid var(--line);padding:10px 0}.batch-scenes textarea{min-height:60px}.time-estimate{color:var(--cyan);font-size:12px}audio{width:100%}.results-collapsed{grid-template-columns:190px minmax(450px,1fr)}.results-collapsed .workspace{display:none}body:is([data-view=tools],[data-view=system],[data-view=collection],[data-view=queue]) .creation{display:none}body:is([data-view=tools],[data-view=system],[data-view=collection],[data-view=queue]) .workspace{grid-column:2/-1}body[data-view=tools] [data-page=tools]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}body[data-view=tools] [data-page=tools]>.panel{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:16px}body[data-view=tools] .workspace-tabs{max-width:440px}body:is([data-view=tools],[data-view=queue],[data-view=system]) .workspace-header h2{display:block;margin:16px 0}#sandboxNotice{padding:8px;background:var(--purple-bg);color:var(--violet);text-align:center}#modelStorage{margin:0;border:0;padding:0}#modelStorage summary{font-size:12px}#modelStorage[open]{padding-bottom:8px}#modelStorage .hint{font-size:10px}#modelStorageRows{font-size:11px}#modelStorageRows button{font-size:11px;min-height:30px;padding:5px}body:is([data-studio-state=failed],[data-studio-state=offline]) .indicator{color:var(--error)}body[data-studio-state=running] .indicator{color:var(--cyan)}body[data-studio-state=queued] .indicator{color:var(--violet)}
#videoLibrary .job{padding:0 0 6px}#videoLibrary .job>button{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;width:100%;margin:0;padding:0 0 7px;overflow:hidden;font-size:10px;overflow-wrap:anywhere;text-align:center;border:0}#videoLibrary .job>button img{width:100%;height:auto;aspect-ratio:1.65;object-fit:cover;display:block}#videoLibrary .job>p{font-size:10px;padding:0 7px}.image-card img{max-width:100%}.workspace-body{min-width:0}.quick-creative{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0}.quick-creative label{font-size:11px}.quick-creative .ph-duotone{color:var(--cyan);font-size:19px;margin-right:5px}.status-disclosure summary{color:var(--success)}body:is([data-studio-state=failed],[data-studio-state=offline]) .status-disclosure summary{color:var(--error)}
@media(min-width:1550px){.studio{grid-template-columns:210px minmax(600px,1fr) minmax(340px,.55fr)}.workflow-tabs button{flex-direction:row;font-size:12px;padding:12px 6px}.prompt-editors textarea{min-height:230px}.results-collapsed{grid-template-columns:210px 1fr}}
@media(max-width:1150px){.studio{grid-template-columns:154px minmax(370px,1fr) minmax(240px,.55fr)}.navigation{padding:18px 8px;gap:20px}.brand h1{font-size:16px}.brand-title{gap:5px}.brand-title>.ph-duotone{font-size:24px}.brand p{display:none}.navigation button{font-size:12px;padding:8px}.creation{padding:16px}.workspace{padding:16px 12px}.current-model{font-size:11px;padding:6px}.creation-header h2{font-size:21px}.prompt-editors{gap:8px}.prompt-editors>div{padding:8px}.editor-heading{flex-wrap:wrap}.prompt-editors textarea{min-height:180px;font-size:12px}.output-actions{flex-wrap:wrap}.output-actions>#rec{margin-left:auto}.results-collapsed{grid-template-columns:154px 1fr}.creative-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.studio{grid-template-columns:145px minmax(0,1fr)}.creation{border-right:0}.workspace{grid-column:2;border-top:1px solid var(--line)}.navigation{grid-row:1/3}body[data-view=tools] [data-page=tools]{grid-template-columns:1fr}.results-collapsed{grid-template-columns:145px minmax(0,1fr)}}
@media(max-width:600px){.studio,.results-collapsed{display:block}.navigation{height:auto;position:static;padding:12px;gap:12px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.brand-title{gap:8px}.brand h1{font-size:20px}.brand-title>.ph-duotone{font-size:29px}.indicator{margin-left:0}.navigation nav{flex-direction:row;gap:3px;flex-wrap:wrap}.navigation nav button{width:auto;flex:1;min-width:52px;flex-direction:column;gap:4px;font-size:10px;padding:7px 3px;min-height:54px}.navigation nav button.active{border-left:1px solid transparent;border-bottom:2px solid var(--cyan);padding-left:3px}.nav-count:not([hidden]){margin:0;font-size:9px}.sidebar-models{border:0;padding:0;display:flex;align-items:center;gap:8px}.sidebar-models>.section-label{display:none}.model-picker{flex:1;flex-direction:row}.model-picker button{width:auto;flex:1;font-size:12px;min-height:36px}.sidebar-bottom{margin:0;padding:0;border:0;display:flex;align-items:start;gap:8px;flex-wrap:wrap}.sidebar-bottom>button{width:auto;font-size:11px;padding:6px;min-height:32px}.sidebar-bottom #modelStorage{flex:1;min-width:130px}.sidebar-bottom #modelStorage summary{padding:6px;font-size:11px;min-height:32px}.theme-switch span{display:none}.creation{padding:16px 12px}.creation-header{margin-bottom:12px;gap:6px}.creation-header h2{font-size:22px}.current-model{font-size:10px;padding:5px}.current-model .ph-duotone{font-size:17px}.workflow-tabs{gap:1px}.workflow-tabs button{font-size:9px;padding:7px 2px;min-height:58px}.workflow-tabs .ph-duotone{font-size:22px}.prompt-editors{grid-template-columns:1fr}.editor-heading{flex-wrap:nowrap}.prompt-editors textarea{min-height:125px;font-size:16px}.creative-options{grid-template-columns:repeat(2,minmax(0,1fr))}textarea,select,input:not([type=checkbox]){font-size:16px!important}.creative-options select{font-size:14px!important}.creativity-row button{font-size:11px;gap:5px;flex-direction:column}.creativity-row .ph-duotone{font-size:22px}.dials{width:100%;flex-basis:100%;gap:8px}.output-actions>#rec{width:100%;min-height:44px}.workspace{padding:16px 12px}.results-toggle{display:none}.results-collapsed .workspace{display:block}.image-card img{aspect-ratio:1.5}.image-pagination{flex-wrap:wrap}.workspace-tabs button{min-height:44px}.row>label{min-width:120px}.last-frame-option{line-height:1.8}.generation-settings{padding:10px}.navigation #modelStorage[open]{flex-basis:100%}.prompt-genres button,.job-action{min-height:36px}.image-card button.image-icon{width:38px;height:38px}.image-icon-video{right:48px}.image-icon:after{top:42px}.enhancement-actions{flex-wrap:wrap}}
.additions-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.additions-heading .enhancement-actions{margin:0}.additions-heading .job-action{font-size:10px;min-height:26px;padding:4px 7px}.prompt-editors textarea{min-height:190px}.quick-creative select{width:100%}#enhancePrompt:before{content:'\e6a2';font-family:Phosphor-Duotone;font-size:16px}
.image-card:nth-child(2n+1) .image-icon:after{left:0;right:auto}
@media(max-width:600px){.prompt-editors textarea{min-height:125px}.quick-creative{grid-template-columns:1fr;gap:8px}.quick-creative label{display:grid;grid-template-columns:24px 110px 1fr;align-items:center}.quick-creative label>select{grid-column:3;margin:0;font-size:14px!important}.additions-heading{flex-wrap:wrap}.additions-heading .enhancement-actions{margin-left:auto}.image-card button.image-icon{width:44px;height:44px}.image-icon-video{right:54px}.image-icon:after{top:48px}}
.audio-prompt-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#audioPromptPanel label{min-width:0}#audioPromptPanel textarea{display:block;width:100%;resize:vertical;min-height:100px}#audioPromptPanel .row{flex-wrap:wrap}#audioPromptPanel .row>label{flex:1 1 180px;min-width:min(100%,180px)}#audioPromptPanel input[type=number]{width:92px}#audioPromptPanel p{overflow-wrap:anywhere}@media(max-width:1100px){.audio-prompt-columns{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Desktop studio columns scroll independently; the video queue action stays visible. */
@media(min-width:901px){
  body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  #sessionPrivate{display:flex;flex:1;min-height:0}
  .studio{flex:1;min-height:0;height:100%;align-self:stretch}
  .navigation{position:static;height:auto;min-height:0}
  .creation,.workspace{min-height:0;height:100%}
  .creation{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  .creation-header{flex:none;margin-bottom:14px}
  #videoCreation{display:flex;flex-direction:column;min-height:0;flex:1}
  .video-form-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
  #videoCreation>.output-actions{flex:none;z-index:1;margin:0;padding:10px 0 14px;background:var(--bg);border-top:1px solid var(--line)}
  #photoCreation{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
  .workspace{overflow-y:auto;overscroll-behavior:contain}
}
.convert-batch-list{list-style:none;margin:6px 0;padding:0;max-height:240px;overflow:auto}.convert-batch-list li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}.convert-batch-list li span{flex:1;min-width:0;overflow-wrap:anywhere}.convert-batch-list li button{flex:none}
.image-card .image-project-action{display:block;width:calc(100% - 12px);margin:6px 6px 0;padding:5px 4px;font-size:10px;min-height:28px}
.image-card .image-preview-action{grid-column:1/-1;width:100%;margin:5px 0 0;padding:5px 4px;font-size:10px;min-height:28px}
.image-search{display:flex;align-items:center;gap:6px;margin:0 0 8px;min-width:0}.image-search label{font-size:11px;white-space:nowrap}.image-search input{flex:1;min-width:0;height:32px;padding:5px 8px}.image-search .job-action{margin:0;padding:5px 9px;min-height:32px;font-size:11px}.image-search [hidden]{display:none}@media(max-width:600px){.image-search{flex-wrap:wrap}.image-search label{width:100%}.image-search input{flex-basis:100%;width:100%}.image-search .job-action{flex:1;min-height:38px}}
#imageDetails{width:min(850px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:14px;background:var(--panel,#15231e);color:var(--text,#e7eee5);border:1px solid var(--line,#728474);border-radius:10px;box-shadow:0 24px 80px #000c}#imageDetails::backdrop{background:#020807d9}.image-details-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.image-details-head h3{margin:0;font-size:17px;overflow-wrap:anywhere}#imageDetailsPreview{display:block;max-width:100%;max-height:55vh;width:auto;height:auto;margin:10px auto;object-fit:contain;border-radius:5px}#imageDetailsPreview[hidden]{display:none}#imageDetailsMetadata p{overflow-wrap:anywhere;white-space:pre-wrap}.image-details-actions{display:flex;gap:8px;flex-wrap:wrap}
.image-details-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0}.image-details-controls .job-action{margin:0;min-width:32px;padding:5px 8px}.image-details-controls .hint{min-width:42px;text-align:center}.image-details-control-gap{flex:1}.image-details-stage{height:min(52vh,580px);min-height:180px;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;background:#09120f;border:1px solid var(--line,#728474);border-radius:6px}.image-details-stage #imageDetailsPreview{flex:none;display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain;user-select:none}.image-details-stage #imageDetailsPreview[hidden]{display:none}.image-details-stage.zoomed{cursor:grab}.image-details-stage.dragging{cursor:grabbing}@media(max-width:600px){.image-details-controls{gap:4px}.image-details-controls .job-action{min-height:38px;min-width:38px}.image-details-control-gap{flex-basis:100%}.image-details-stage{height:45vh;min-height:160px}}
@media(max-width:600px){.image-card .image-project-action{min-height:38px}}
.photo-editors{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.photo-editors>div{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:9px}.photo-editors textarea{min-height:160px;margin-top:6px}.photo-editors>div:last-child textarea{border-color:color-mix(in srgb,var(--cyan) 55%,var(--line))}.photo-editors .editor-heading{margin:0}.photo-actions,.photo-submit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:9px 0}.photo-actions label{margin-left:auto}.photo-actions select{min-width:136px}.photo-genres{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.photo-genres button[aria-pressed=true]{background:var(--purple-bg);border-color:var(--violet)}.photo-style-grid,.photo-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}.photo-style-grid label,.photo-settings-grid label{min-width:0}.photo-style-grid input,.photo-settings-grid input,.photo-settings-grid select{display:block;width:100%;margin-top:4px}.photo-lora{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:5px 0;border-bottom:1px solid var(--line)}.photo-lora label{flex:1;min-width:140px}.photo-lora input[type=number]{width:66px}.photo-check{display:inline-block;margin:8px 10px 8px 0}#photoDenoiseRow input{width:84px}#photoAdditions{min-height:62px;margin:5px 0}#photoQueueStatus{flex:1;min-width:180px}#photoJobs .job{padding:7px 10px;margin:6px 0}#photoJobs .job p{font-size:11px}.photo-editors .hint{margin-top:5px}@media(max-width:900px){.photo-editors{grid-template-columns:1fr}.photo-editors textarea{min-height:110px}}@media(max-width:600px){.photo-style-grid,.photo-settings-grid{grid-template-columns:1fr 1fr}.photo-actions label{margin-left:0}.photo-submit-row .enqueue-handle{width:100%;min-height:44px}.photo-lora .job-action{min-height:38px}}@media(max-width:390px){.photo-style-grid,.photo-settings-grid{grid-template-columns:1fr}}
.audio-word-bank{margin:6px 0 10px;padding:0 8px 8px;border:1px solid var(--line);border-radius:6px;background:var(--field)}
.audio-word-bank[hidden]{display:none}
.audio-word-bank summary{cursor:pointer;font-size:12px;color:var(--cyan)}
.audio-word-bank .row{margin:3px 0 7px;align-items:center}
.audio-word-bank .row label{flex:0 1 180px;min-width:120px}
.audio-word-bank .row select{margin-left:6px}
.audio-word-bank-items{display:flex;flex-wrap:wrap;gap:5px;max-height:142px;overflow:auto}
.audio-word-chip{padding:5px 8px;min-height:30px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--text);font-size:11px;cursor:pointer}
.audio-word-chip:hover,.audio-word-chip:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.video-seed-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:7px 0;font-size:11px}.video-seed-row label{display:flex;align-items:center;gap:6px;white-space:nowrap}.video-seed-row input{width:124px;min-width:0;padding:6px 8px}.video-seed-row .hint{flex:1;min-width:150px;margin:0}@media(max-width:600px){.video-seed-row input{width:150px}}
.batch-source-choice{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px;color:var(--text)}.batch-source-choice input{width:auto;flex:none;margin:0;accent-color:var(--cyan)}.batch-source-choice[hidden]{display:none}
.studio-file-drop{position:relative}.studio-file-drop-active{outline:2px dashed var(--cyan);outline-offset:-3px}.studio-file-drop-active::after{content:attr(data-drop-hint);position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:12px;text-align:center;pointer-events:none;background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--text);font-size:12px;font-weight:700;border-radius:6px}
.audio-library-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:8px}
.audio-library-row>label{min-width:0;width:100%}
.audio-library-row .job-action{white-space:normal}
@media(max-width:600px){.audio-library-row{grid-template-columns:repeat(2,minmax(0,1fr))}.audio-library-row>label{grid-column:1/-1}.audio-library-row>.job-action{width:100%}}

#imageDetailsAllSettings{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;user-select:text}.image-details-stage.zoomed #imageDetailsPreview{max-width:none;max-height:none}
.image-delete-controls { flex-wrap: wrap; margin-block: 12px; }
.image-delete-choice { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; padding: 8px; }
.image-delete-choice input { width: auto; }
.shared-gpu-queue { margin-block: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.shared-gpu-queue h2 { font-size: 15px; margin: 0 0 10px; }
.shared-gpu-queue table { width: 100%; border-collapse: collapse; }
.shared-gpu-queue th, .shared-gpu-queue td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.shared-gpu-queue p { overflow-wrap: anywhere; }
#imageDeleteStatus { overflow-wrap: anywhere; }

#llmChatPanel details{margin:0}
#llmChatPanel textarea{min-height:88px;height:auto;font:inherit;margin:5px 0 8px}
.llm-chat-messages{display:grid;gap:7px;max-height:330px;overflow:auto;margin:10px 0;padding:2px}
.llm-chat-message{max-width:94%;padding:8px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line);overflow-wrap:anywhere;white-space:pre-wrap}
.llm-chat-message[data-role="user"]{justify-self:end;background:color-mix(in srgb,var(--cyan) 11%,var(--panel))}
.llm-chat-message[data-role="assistant"]{justify-self:start}
.llm-chat-message strong{display:block;margin-bottom:3px;color:var(--cyan);font-size:12px}
@media(max-width:600px){.llm-chat-message{max-width:100%}.llm-chat-messages{max-height:270px}}

#photoFacePanel{margin-top:10px}
#photoFacePanel>summary{margin-bottom:6px}
.photo-face-library{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0}
.photo-face-library .job-action{min-height:32px}
.photo-face-previews{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0}
.photo-face-previews figure{margin:0;width:96px;min-width:0}
.photo-face-previews img{display:block;width:96px;height:96px;object-fit:cover;border:1px solid var(--line);border-radius:5px;background:var(--field)}
.photo-face-previews figcaption{font-size:11px;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
#photoFaceLibraryStatus{overflow-wrap:anywhere}
@media(max-width:600px){.photo-face-library .job-action{min-height:44px}}

.photo-variant-group > h4 { margin: 2px 0 8px; font-size: 14px; }
#photoAutoProcessing { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
#photoAutoProcessing legend { padding: 0 5px; font-size: 13px; }
.photo-variant-review { margin: 8px 0 12px; }
.photo-variant-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 8px; }
.photo-variant-choice { min-width: 0; background: var(--panel); }
.photo-variant-choice img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--field); border-radius: 4px; }
.photo-variant-choice label { display: flex; align-items: center; gap: 6px; margin: 7px 0; font-size: 12px; }
.photo-variant-choice a { font-size: 11px; }
.photo-variant-group .job-action:disabled { cursor: default; opacity: .55; }
.photo-result-preview { display: block; width: min(100%, 180px); aspect-ratio: 1; object-fit: contain; background: var(--field); border-radius: 6px; margin: 8px 0; }
.photo-style-field { min-width: 0; }
.photo-style-entry { display: flex; align-items: stretch; gap: 5px; margin-top: 4px; }
.photo-style-entry input { flex: 1; min-width: 0; width: auto; margin: 0; }
.photo-style-save.job-action { display: grid; place-items: center; flex: 0 0 34px; width: 34px; min-height: 34px; padding: 0; font-size: 19px; }
.photo-style-save[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); }
#photoStyleStatus { margin: 4px 0 8px; }
@media (max-width: 600px) { .photo-style-save.job-action { flex-basis: 40px; width: 40px; min-height: 40px; } }
.image-stale-review { margin: 7px 0 11px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; }
.image-stale-review > summary { cursor: pointer; }
.image-stale-review > .hint { margin: 7px 0; }
.image-stale-list { display: grid; gap: 7px; margin-top: 8px; }
.image-stale-row { display: grid; gap: 7px; min-width: 0; padding: 8px; background: var(--panel); border-radius: 5px; }
.image-stale-head { display: flex; flex-wrap: wrap; gap: 3px 9px; align-items: baseline; }
.image-stale-thumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.image-stale-thumbs img { width: 54px; height: 54px; object-fit: contain; background: var(--field); border-radius: 4px; }
.image-stale-row > button { justify-self: start; }
#photoExpand[aria-pressed=true] { background: var(--purple-bg); border-color: var(--violet); }
#photoTemplateDialog { width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
#photoTemplateDialog::backdrop { background: #0009; }
#photoTemplateDialog label { display: block; margin: 10px 0 4px; }
#photoTemplateDialog input, #photoTemplateDialog select, #photoTemplateDialog textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
#photoTemplateDialog textarea { min-height: 180px; font-size: 14px; }
#photoTemplateDialog .photo-actions { flex-wrap: wrap; }
#photoTemplateDialog button { white-space: normal; }

.audio-wave-player{margin:14px 0;min-width:0}
.aw-surface{position:relative;height:90px;margin:0 12px;touch-action:none;cursor:crosshair;background:#121a22;border:1px solid #526273;border-radius:6px}
.aw-surface svg{width:100%;height:100%;display:block;pointer-events:none}
.aw-peaks{stroke:#83c8cb;stroke-width:3}.aw-selection{fill:#ebbb4930;stroke:#ebbb49;stroke-width:2}.aw-cursor{stroke:#fff;stroke-width:2}
.audio-wave-player .aw-handle{position:absolute;top:0;bottom:0;width:24px;min-width:24px;padding:0;transform:translateX(-50%);border:0;border-radius:4px;background:linear-gradient(90deg,transparent 10px,#ebbb49 10px,#ebbb49 14px,transparent 14px);cursor:ew-resize;touch-action:none}
.aw-handle:focus-visible{outline:2px solid white;outline-offset:0}
.aw-fields{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.aw-fields label{flex:1;min-width:110px}.aw-fields input{width:100%;box-sizing:border-box;min-width:0}
.aw-actions{display:flex;flex-wrap:wrap;gap:8px}.aw-status,.aw-info{overflow-wrap:anywhere}

/* B1 materials over the existing studio. Native controls and layout stay in charge. */
@font-face {
  font-family: "B1 Plate";
  src: url('/assets/studija-assets/b1/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --oxide-900: #0d1715;
  --oxide-800: #152422;
  --oxide-700: #1d302d;
  --oxide-600: #2a433f;
  --verdigris: #91c8b9;
  --brass: #eed09a;
  --brass-dark: #6e5530;
  --cherry: #6b0f17;
  --paper: #e6dcc6;
  --ink: #d9e3dd;
  --ink-dim: #cbdad2;
  --glow-green: #6dff9e;
  --glow-red: #ffb1a9;
  --glow-amber: #ffb347;
  --font-plate: "B1 Plate", "Arial Narrow", sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, sans-serif;
  --metal-top: var(--oxide-600);
  --metal-bottom: var(--oxide-800);
  --metal-edge: #728f80;
  --metal-highlight: #c8e6dc2e;
  --metal-shadow: #0009;
  --metal-grain: #adc9bb03;
  /* E11.1: brushed casing, recessed bench and raised controls are distinct materials. */
  --surface-shell: linear-gradient(115deg, #3b4940, #303e38 25%, #26332e 58%, #18241f);
  --surface-panel: linear-gradient(165deg, #2b302a, #171d18 55%, #111913);
  --surface-recess: linear-gradient(180deg, #1e221c, #151b16);
  --surface-field: #101510;
  --surface-control: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  --metal-surface: var(--surface-shell);
  --brass-rim: #ae8950;
  --brass-reflection: #f4d59d55;
  --surface-plaque: linear-gradient(110deg, #44341f, #2d2418 55%, #3a2f1d);
  --recess-shadow: inset 0 3px 8px var(--metal-shadow), inset 0 -1px 0 var(--metal-highlight), 0 1px 0 var(--metal-highlight);
  --field-shadow: inset 0 2px 5px var(--metal-shadow), inset 0 0 0 1px #0003;
  --rivet-light: #acb9a0;
  --rivet-dark: #394940;
  --rivet-slot: #121d18;
  --bg: var(--oxide-900);
  --side: var(--oxide-800);
  --panel: var(--oxide-800);
  --field: var(--surface-field);
  --hover: #304a41;
  --line: var(--metal-edge);
  --text: var(--ink);
  --muted: var(--ink-dim);
  --cyan: var(--verdigris);
  --cyan-bg: #27463c;
  --violet: var(--brass);
  --purple-bg: #3d3020;
  --primary: var(--cherry);
  --success: var(--glow-green);
  --error: var(--glow-red);
  --focus: var(--glow-amber);
  --plate-radius: 10px;
  --plate-shadow: inset 0 1px 0 var(--brass-reflection), inset 0 -2px 0 var(--metal-shadow),
    inset 0 0 0 1px var(--metal-shadow), 0 7px 16px var(--metal-shadow);
  --rivet: radial-gradient(circle at 35% 30%, var(--rivet-light), var(--rivet-dark) 64%, var(--rivet-slot) 70%, transparent 76%);
  --rivet-cut: linear-gradient(135deg, transparent 43%, var(--rivet-slot) 44% 55%, transparent 56%);
}

:root[data-theme=light] {
  color-scheme: light;
  --oxide-900: #dee5d9;
  --oxide-800: #e1e7d9;
  --oxide-700: #d5dfcd;
  --oxide-600: #c9d7c0;
  --verdigris: #285b49;
  --brass: #6d4c1d;
  --cherry: #7a1722;
  --paper: #273828;
  --ink: #1d3027;
  --ink-dim: #405345;
  --glow-green: #235f35;
  --glow-red: #9a2530;
  --glow-amber: #794511;
  --metal-edge: #6c8168;
  --metal-highlight: #fffbeccc;
  --metal-shadow: #392b1833;
  --metal-grain: #294f2d03;
  --rivet-light: #e5d3a4;
  --rivet-dark: #7e7859;
  --rivet-slot: #474633;
  /* E11.8: warm brushed casing, porcelain bench, recessed patina and brass controls. */
  --surface-shell: linear-gradient(115deg, #eee9dc, #dcd7c6 35%, #cec9b9 75%, #dcd7c6);
  --surface-panel: linear-gradient(165deg, #f2efe5, #e7e5d9 55%, #d9decd);
  --surface-recess: linear-gradient(180deg, #dad6c4, #ece9da);
  --surface-field: #f1f3e9;
  --brass-rim: #866236;
  --brass-reflection: #fff8;
  --surface-plaque: linear-gradient(110deg, #ecd9a9, #f6eacb 55%, #e3cea0);
  --field-shadow: inset 0 2px 5px var(--metal-shadow), inset 0 0 0 1px #28351e12;
  --field: var(--surface-field);
  --hover: #c4d4ba;
  --bg: var(--oxide-900);
  --side: var(--oxide-800);
  --panel: var(--oxide-800);
  --line: var(--metal-edge);
  --text: var(--ink);
  --muted: var(--ink-dim);
  --cyan: var(--verdigris);
  --cyan-bg: #c5d9c5;
  --violet: var(--brass);
  --purple-bg: #e7d9b9;
  --primary: var(--cherry);
  --success: var(--glow-green);
  --error: var(--glow-red);
  --focus: var(--glow-amber);
}

body {
  font-family: var(--font-body);
  background: radial-gradient(ellipse at 70% 0, color-mix(in srgb, var(--verdigris) 10%, transparent), transparent 65%), var(--bg);
}

/* Rivets are backgrounds, never overlays that intercept clicks or obscure labels. */
.studio > .metal {
  border: 1px solid var(--brass-rim);
  border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet-cut) 9px calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    var(--rivet) 7px calc(100% - 7px) / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) calc(100% - 7px) / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--metal-highlight) 10%, transparent), transparent 60%),
    var(--metal-surface);
  box-shadow: var(--plate-shadow);
}
.brand {
  padding-block: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
h1, h2, h3, .brand h1, .creation-header h2, .workspace-header h2 {
  font-family: var(--font-plate);
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--paper);
  text-shadow: 0 1px 0 var(--metal-shadow);
}
.brand h1 { font-size: 28px; }
.creation-header h2, .workspace-header h2 { font-size: 28px; }
.brand h1, .creation-header h2, .workspace-header h2 {
  background: var(--surface-plaque);
  /* Keep the text off the bright inset rim and its top reflection. */
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--brass-rim), inset 0 2px var(--brass-reflection), 0 2px 4px var(--metal-shadow);
}
.creation-header { padding-inline-start: 8px; }
.section-label { color: var(--brass); }
.prompt-editors > div, .photo-editors > div,
body[data-view=tools] [data-page=tools] > .panel {
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px 0 var(--metal-highlight), inset 0 -1px 3px var(--metal-shadow);
  border-color: var(--metal-edge);
  border-radius: var(--plate-radius);
}
.studio-account {
  background: var(--side);
  border-bottom: 1px solid var(--metal-edge);
}
.account-usage.account-usage {
  color: var(--text);
  background: var(--panel);
  border-color: var(--metal-edge);
  box-shadow: var(--plate-shadow);
}
.account-usage.account-usage button {
  color: var(--text);
  background: var(--field);
  border-color: var(--line);
}
.account-usage .usage-job { border-color: var(--line); }
/* D2: tactile controls; native state, labels and event handlers remain authoritative. */
:root {
  --control-top: #443d2c;
  --control-bottom: #262a20;
  --control-hover-top: #514731;
  --control-selected-top: #365c4f;
  --control-selected-bottom: #213d32;
  --control-selected-text: #e4f0e6;
  --switch-knob: #d4b47c;
  --switch-knob-light: #f1d9a3;
  --switch-knob-dark: #79603a;
  --control-shadow: inset 0 1px 0 var(--metal-highlight), inset 0 -2px 0 var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
:root[data-theme=light] {
  --control-top: #ede0be;
  --control-bottom: #d7cba9;
  --control-hover-top: #f5ebd0;
  --control-selected-top: #b9d0b8;
  --control-selected-bottom: #a7c1a7;
  --control-selected-text: #1d3027;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle),
[data-page=tools] .row > button,
.studio-account button, .account-usage.account-usage button {
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: var(--surface-control);
  box-shadow: var(--control-shadow);
  text-shadow: 0 1px var(--metal-shadow);
  transition: background-color .14s, border-color .14s, box-shadow .14s, transform .08s;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle):hover:not(:disabled),
[data-page=tools] .row > button:hover:not(:disabled),
.studio-account button:hover:not(:disabled), .account-usage.account-usage button:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom));
  border-color: var(--brass);
  filter: none;
}
:is(.job-action, .preset, .icon-button, .plate, .results-toggle):active:not(:disabled),
.studio-account button:active:not(:disabled), .account-usage.account-usage button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px var(--metal-shadow), inset 0 0 0 1px var(--metal-edge);
}
.workflow-tabs, .mode-tabs:not(.model-picker), .creativity-row, .workspace-tabs {
  background: var(--field);
  border-color: var(--brass-rim);
  box-shadow: inset 0 2px 5px var(--metal-shadow), 0 1px var(--metal-highlight);
}
.workflow-tabs button + button, .mode-tabs:not(.model-picker) button + button,
.creativity-row button + button, .workspace-tabs button + button {
  border-inline-start-color: var(--brass-rim);
}
.workflow-tabs button, .mode-tabs:not(.model-picker) button, .creativity-row button, .workspace-tabs button {
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: background-color .14s, border-color .14s, box-shadow .14s;
}
.workflow-tabs button:hover:not(:disabled), .mode-tabs:not(.model-picker) button:hover:not(:disabled),
.creativity-row button:hover:not(:disabled), .workspace-tabs button:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}
.workflow-tabs button[aria-pressed=true], .mode-tabs:not(.model-picker) button[aria-pressed=true],
.creativity-row button[aria-pressed=true], .workspace-tabs button[aria-pressed=true],
.model-picker button[aria-pressed=true], :is(.prompt-genres, .photo-genres) button[aria-pressed=true],
.preset[aria-pressed=true] {
  color: var(--control-selected-text);
  background: linear-gradient(180deg, var(--control-selected-top), var(--control-selected-bottom));
  border-color: var(--verdigris);
  /* A raised tile and solid bottom edge distinguish selection without colour alone. */
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -3px var(--verdigris), 0 2px 4px var(--metal-shadow);
}
:is(.prompt-genres, .photo-genres) button { border-radius: 6px; }
/* The original checkbox stays focusable and exposes its checked state to assistive tools.
   The brass slider is entirely CSS; no duplicate button or synchronisation is needed. */
input[type=checkbox] {
  appearance: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 36px;
  height: 22px;
  min-width: 36px;
  padding: 0;
  margin: 0 5px 0 0;
  vertical-align: middle;
  border: 1px solid var(--metal-edge);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, var(--switch-knob-light), var(--switch-knob) 50%, var(--switch-knob-dark) 85%) 2px 50% / 16px 16px no-repeat,
    var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow), 0 1px var(--metal-highlight);
  cursor: pointer;
  transition: background-position .16s, border-color .16s;
}
input[type=checkbox]:checked {
  background-position: calc(100% - 2px) 50%;
  background-color: var(--control-selected-bottom);
  border-color: var(--verdigris);
  box-shadow: inset 0 0 0 1px var(--verdigris), inset 0 2px 4px var(--metal-shadow);
}
input[type=checkbox]:hover:not(:disabled):not(:focus-visible) { outline: 1px solid var(--brass); outline-offset: 1px; }
button:disabled, input[type=checkbox]:disabled { opacity: .55; cursor: not-allowed; }
button:disabled { transform: none; }
:focus-visible, input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (forced-colors: active) {
  input[type=checkbox] { appearance: auto; background: none; box-shadow: none; }
  :is(.job-action, .preset, .icon-button, .plate, .results-toggle),
  .studio-account button, .account-usage.account-usage button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .workflow-tabs button[aria-pressed=true], .mode-tabs button[aria-pressed=true],
  .creativity-row button[aria-pressed=true], .workspace-tabs button[aria-pressed=true],
  :is(.prompt-genres, .photo-genres) button[aria-pressed=true], .preset[aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  :focus-visible { outline-color: Highlight; }
}

/* D3: recessed fields, existing select-backed dials and the existing queue buttons.
   No extra control, submission handler or source of option values is introduced. */
textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=range]) {
  color: var(--text);
  background-color: var(--field);
  border-color: var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 5px var(--metal-shadow), 0 1px 0 var(--metal-highlight);
  caret-color: var(--verdigris);
}
textarea::placeholder, input::placeholder { color: var(--muted); opacity: 1; }
:is(textarea, select, input):hover:not(:disabled):not(:focus-visible) { border-color: var(--brass); }
:is(textarea, select, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:is(textarea, select, input):disabled { cursor: not-allowed; }
input[readonly], textarea[readonly] { border-style: dashed; }
select option { color: var(--text); background: var(--field); }
input[type=range] { accent-color: var(--brass); }
input[type=file]::file-selector-button {
  font: inherit;
  color: var(--text);
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  border: 1px solid var(--metal-edge);
  border-radius: 4px;
  padding: 5px 8px;
  margin-inline-end: 8px;
  box-shadow: var(--control-shadow);
}
.dial-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.dial-label { color: var(--brass); text-align: center; margin: 0; font-family: var(--font-plate); font-size: 16px; }
.dial-wrap { display: flex; justify-content: center; order: 1; }
.dial-field .dial {
  position: relative;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-radius: 50%;
  background: var(--oxide-900);
  box-shadow: inset 0 0 0 3px var(--metal-shadow), 0 5px 7px var(--metal-shadow);
  cursor: ew-resize;
  touch-action: none;
}
.dial-field .dial::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: url('/assets/studija-assets/b1/knob.webp') center / cover no-repeat;
  /* The crop's indicator starts at -45 degrees. The existing angle is -60…60. */
  transform: rotate(calc(var(--dial-angle, 0deg) + 45deg));
  transition: transform .16s ease-out;
  pointer-events: none;
}
.dial-field .dial:hover { border-color: var(--brass); }
.dial-field .dial.dragging { cursor: grabbing; }
.dial-value { order: 2; text-align: center; }
.dial-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 6px;
  order: 3;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.dial-values .selected { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Audio-driven duration remains controlled by audio. The native disabled field
   stays visible; its enhancement cannot offer a second, unlocked path. */
.dial-field:has(.dial-value:disabled) :is(.dial-wrap, .dial-values) { display: none; }
:is(#rec, #photoGenerate, #startQueue) {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
  min-width: 150px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  font-family: var(--font-plate);
  font-size: 19px;
  font-weight: 500;
  color: var(--paper);
  background: var(--surface-control);
  border: 1px solid var(--brass-rim);
  box-shadow: var(--plate-shadow);
  border-radius: 7px;
}
:is(#rec, #photoGenerate)::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 480 / 122;
  background: url('/assets/studija-assets/b1/lever.webp') center / contain no-repeat;
  border-radius: 5px;
  filter: drop-shadow(0 4px 3px var(--metal-shadow));
  transform-origin: 50% 100%;
  transition: transform .14s ease-out;
  pointer-events: none;
}
:is(#rec, #photoGenerate, #startQueue):hover:not(:disabled) { background: var(--oxide-700); border-color: var(--brass); }
:is(#rec, #photoGenerate):active:not(:disabled)::before { transform: translateY(3px) scaleY(.85); }
:is(#rec, #startQueue) :is(.small-grip, .lever-grip) { display: none; }
#rec .lever-label {
  padding: 3px 12px;
  color: #271d12;
  background: linear-gradient(180deg, #eed4a0, #c4a16a);
  border: 1px solid var(--brass-dark);
  border-radius: 4px;
  box-shadow: inset 0 1px #fff5, 0 2px 3px var(--metal-shadow);
}
/* Long mode-dependent option lists wrap without widening the three columns. */
@media (max-width: 600px) {
  .dial-values { font-size: 12px; }
  .dial-field .dial { width: 66px; height: 66px; }
}
@media (forced-colors: active) {
  textarea, select, input:not([type=checkbox]):not([type=hidden]) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .dial-field .dial::before, :is(#rec, #photoGenerate)::before { display: none; }
  .dial-wrap, .dial-values { display: none; }
  :is(#rec, #photoGenerate, #startQueue), #rec .lever-label {
    color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none;
  }
  :is(textarea, select, input):focus-visible { outline-color: Highlight; }
}

/* Small gutters keep all existing viewport and independent scroll rules intact. */
@media (min-width: 901px) {
  .studio { gap: 8px; padding: 8px; }
}
@media (max-width: 900px) {
  .studio > .metal { margin: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* Stop decorative depression too. Real dial/meter positions still follow values. */
  button:active:not(:disabled):not(.aw-handle), summary:active { transform: none !important; }
  .audio-wave-player .aw-handle:active:not(:disabled) { transform: translateX(-50%) !important; }
  :is(#rec, #photoGenerate):active:not(:disabled)::before { transform: none !important; }
}
@media (forced-colors: active) {
  .studio > .metal { background: Canvas; box-shadow: none; border-color: CanvasText; }
  .studio > .metal::before, .studio > .metal::after { display: none; }
  h1, h2, h3 { color: CanvasText; text-shadow: none; }
}

/* D5: shared card trays and engraved tables; native content and states stay intact. */
:root { --tray: #29151a; --table-row: #1d302d; }
:root[data-theme=light] { --tray: #dbcfbf; --table-row: #d5dfcd; }
.workspace-body #imageGallery, #videoLibrary {
  gap: 12px;
  padding: 12px;
  background: var(--tray);
  border: 1px solid var(--metal-edge);
  border-radius: 8px;
  box-shadow: inset 0 3px 8px var(--metal-shadow), 0 1px var(--metal-highlight);
  align-content: start;
}
#videoLibrary:empty { display: none; }
:is(.image-card, .job, .usage-job, .account, .storage-model-row) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  border-radius: 7px;
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
:is(.job, .usage-job, .storage-model-row) { padding: 12px; margin-block: 10px; }
.account-usage .usage-job, body[data-studio-admin] .usage-job { padding: 12px; border-color: var(--metal-edge); }
.image-card { display: block; padding: 0 8px 10px; overflow: visible; }
.image-card > img {
  width: calc(100% + 16px); max-width: none; margin: 0 -8px;
  object-fit: contain; background: var(--field); border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--metal-edge);
}
.image-card > p { font-size: 12px; line-height: 1.5; padding: 0; margin: 9px 0; }
.image-card :is(.image-preview-action, .image-project-action) {
  width: 100%; margin: 6px 0 0; padding: 7px; font-size: 12px; min-height: 36px;
  white-space: normal; overflow-wrap: anywhere;
}
.image-card.selected {
  border-color: var(--verdigris);
  box-shadow: inset 3px 0 var(--verdigris), 0 0 0 2px var(--verdigris);
}
.image-card.selected::before {
  content: '\2713'; position: absolute; top: 6px; left: 6px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--verdigris); border-radius: 4px;
  color: var(--control-selected-text); background: var(--control-selected-bottom);
  font-size: 20px; pointer-events: none;
}
.image-card:has(.image-delete-choice input:checked) { border-style: dashed; }
.image-card button.image-icon {
  color: var(--text); background: var(--panel); border-color: var(--metal-edge);
  box-shadow: var(--control-shadow);
}
.image-card:nth-child(2n+1) .image-icon::after { left: auto; right: 0; }
.image-card .image-icon[aria-pressed=true] {
  color: var(--control-selected-text); background: var(--control-selected-bottom) !important;
  border-color: var(--verdigris) !important; box-shadow: inset 0 -3px var(--verdigris);
}
.image-delete-choice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
#videoLibrary .job { overflow: visible; }
#videoLibrary .job > button { color: var(--text); background: var(--panel); border-radius: 6px; }
#videoLibrary .job > p, :is(.usage-job, .account) p { font-size: 12px; line-height: 1.6; }
:is(.job, .usage-job, .account, .storage-model-row) :is(button, a, strong) {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.empty-gallery {
  color: var(--muted); background: var(--panel); border-color: var(--metal-edge);
  box-shadow: inset 0 2px 5px var(--metal-shadow); overflow-wrap: anywhere;
}
#imageGalleryStatus, #imagePageStatus { overflow-wrap: anywhere; line-height: 1.6; }
.shared-gpu-queue table, .workspace .mh-projects table, body[data-studio-admin] table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: var(--panel); color: var(--text); font-variant-numeric: tabular-nums;
}
.shared-gpu-queue table { table-layout: fixed; }
.shared-gpu-queue :is(th, td), .workspace .mh-projects :is(th, td), body[data-studio-admin] :is(th, td) {
  padding: 10px 12px; border-bottom: 1px solid var(--metal-edge);
  text-align: left; vertical-align: top; overflow-wrap: anywhere; line-height: 1.5;
}
.shared-gpu-queue th, .workspace .mh-projects th, body[data-studio-admin] th {
  color: var(--brass); background: var(--field); white-space: normal;
  font-family: var(--font-plate); font-size: 16px; font-weight: 500;
}
.shared-gpu-queue tbody tr:nth-child(even), .workspace .mh-projects tbody tr:nth-child(even),
body[data-studio-admin] tbody tr:nth-child(even) { background: var(--table-row); }
.mh-projects .mh-table, body[data-studio-admin] .plan-table {
  min-width: 0; max-width: 100%; overflow: auto;
  border: 1px solid var(--metal-edge); border-radius: 7px;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
}
.mh-projects .mh-table table { min-width: 440px; }
.workspace .mh-projects .mh-table :is(th, td):not(:first-child) { min-width: 90px; }
/* Shared surfaces of the standalone admin page. */
body[data-studio-admin] { color: var(--text); background: var(--bg); }
body[data-studio-admin] p { color: var(--muted); overflow-wrap: anywhere; }
body[data-studio-admin] a, body[data-studio-admin] .badge { color: var(--verdigris); }
body[data-studio-admin] button {
  color: var(--text); background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  border-color: var(--metal-edge); box-shadow: var(--control-shadow);
}
@media (max-width: 600px) {
  .workspace-body #imageGallery, #videoLibrary { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .image-card :is(.image-preview-action, .image-project-action) { min-height: 44px; }
  .shared-gpu-queue :is(th, td) { padding: 8px; }
}
@media (forced-colors: active) {
  :is(.image-card, .job, .usage-job, .account, .storage-model-row, .empty-gallery),
  .workspace-body #imageGallery, #videoLibrary,
  .shared-gpu-queue table, .workspace .mh-projects table, body[data-studio-admin] table,
  .shared-gpu-queue th, .workspace .mh-projects th, body[data-studio-admin] th {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .image-card.selected { outline: 2px solid Highlight; outline-offset: 1px; }
  .image-card.selected::before { color: HighlightText; background: Highlight; }
  .image-card button.image-icon, body[data-studio-admin] button { color: ButtonText; background: ButtonFace; }
  .image-card .image-icon[aria-pressed=true] { color: HighlightText; background: Highlight !important; }
  body[data-studio-admin] p { color: CanvasText; }
}

/* D6: compact, native status disclosure and shared message plates. No clipped text. */
.workspace-header .status-disclosure {
  margin: 0 0 10px;
  padding: 0;
  min-width: 0;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
}
.workspace-header .status-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.status-disclosure > summary::-webkit-details-marker { display: none; }
.status-disclosure #studioStatus { min-width: 0; overflow-wrap: anywhere; }
.status-info {
  flex: 0 0 20px;
  margin-left: auto;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brass);
  border: 1px solid currentColor;
  border-radius: 50%;
}
.status-disclosure[open] .status-info { color: var(--text); background: var(--field); }
.status-disclosure .live-status { padding: 10px; border-top: 1px solid var(--line); }
.status-disclosure .status-copy { gap: 7px; font-size: 12px; overflow-wrap: anywhere; }
.status-disclosure :is(#studioDetail, #studioEstimate, .connection-heartbeat) { font-size: 12px; line-height: 1.5; }
.status-disclosure :is(#studioDetail, #studioEstimate):empty { display: none; }
.studio :is(#queueDetail, #queueEstimate, .connection-heartbeat) { overflow-wrap: anywhere; }
body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure { border-inline-start: 3px solid var(--error); }
body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure #studioStatus { color: var(--error); }
/* Existing roles and texts convey meaning; colour never replaces the message. */
.studio :is(p[role=status], p[role=alert], p.job-error):not(:empty) {
  padding: 8px 10px;
  margin-block: 8px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brass);
  border-radius: 5px;
  background: var(--field);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.studio :is(p[role=alert], p.job-error, p[data-error=true]):not(:empty) {
  color: var(--error);
  border-inline-start-color: var(--error);
}
.studio :is(p[role=status], p[role=alert], p.job-error):empty { margin: 0; padding: 0; border: 0; }
.studio .mh-draft-notice { color: var(--text); background: var(--field); border-color: var(--brass); }
@media (max-width: 600px) {
  .workspace-header .status-disclosure > summary { min-height: 44px; }
}
@media (forced-colors: active) {
  .workspace-header .status-disclosure, .status-disclosure .live-status,
  .studio :is(p[role=status], p[role=alert], p.job-error):not(:empty), .studio .mh-draft-notice {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .status-info, .status-disclosure[open] .status-info,
  body:is([data-studio-state=failed], [data-studio-state=offline]) .status-disclosure #studioStatus { color: CanvasText; background: Canvas; }
}

/* D4: API-backed lamps, SVG instruments and model glass. */
.b1-job-indicator { display:flex; align-items:center; gap:9px; min-width:0; font-size:12px; color:var(--text); }
.b1-lamp { --lamp-lit:#52645b; display:inline-block; flex:0 0 28px; width:28px; height:30px; border:2px solid var(--brass-dark); border-bottom:5px solid var(--brass-dark); border-radius:9px 9px 3px 3px; background:radial-gradient(ellipse at 35% 24%,#fff8,transparent 35%),repeating-linear-gradient(90deg,transparent 0 3px,#0002 3px 4px),var(--lamp-lit); box-shadow:inset 0 0 5px #0008,0 2px 3px var(--metal-shadow); }
body[data-b1-state=queued] .b1-lamp { --lamp-lit:#ffb347; box-shadow:inset 0 0 4px #794511,0 0 12px #ffb34766; }
body[data-b1-state=running] .b1-lamp { --lamp-lit:#de5042; box-shadow:inset 0 0 4px #6b0f17,0 0 12px #de504266; }
body[data-b1-state=succeeded] .b1-lamp { --lamp-lit:#65d992; border-radius:50% 50% 3px 3px; box-shadow:inset 0 0 4px #235f35,0 0 12px #65d99266; }
body:is([data-b1-state=failed],[data-b1-state=offline]) .b1-lamp-status { color:var(--error); }
.b1-instruments { display:flex; flex-wrap:wrap; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:14px; }
.b1-meter { display:flex; align-items:center; gap:10px; margin:0; min-width:0; max-width:100%; }
.b1-meter svg { width:86px; height:86px; flex:0 0 86px; filter:drop-shadow(0 3px 3px var(--metal-shadow)); }
.b1-meter .rim { stroke:var(--brass); stroke-width:2; }
.b1-meter .face { stroke:#6e5530; stroke-width:2; }
.b1-meter .glass-gleam { fill:none; stroke:#fff6; stroke-width:2; stroke-linecap:round; }
.b1-meter .ticks { fill:none; stroke:#4b3821; stroke-width:1.5; }
.b1-meter .needle { stroke:#6b0f17; stroke-width:3; stroke-linecap:round; transform-origin:50px 50px; transition:transform .45s ease-out; }
.b1-meter .hub { fill:#6b0f17; stroke:#6e5530; stroke-width:1; }
.b1-meter figcaption,.b1-vial figcaption { display:flex; flex-direction:column; gap:4px; min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:12px; }
.b1-reading { font-variant-numeric:tabular-nums; }
.b1-scale,.b1-vial small { color:var(--muted); font-size:11px; }
#accountUsage .b1-meter { margin:14px 0; }
.b1-vials { display:flex; flex-wrap:wrap; gap:18px; margin:14px 0; }
.b1-vials:empty { display:none; }
.b1-vial { width:108px; margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.b1-glass { width:54px; height:112px; position:relative; overflow:hidden; border-radius:24px 24px 8px 8px; border:2px solid var(--line); border-top:8px solid var(--brass-dark); border-bottom:10px solid var(--brass-dark); background:linear-gradient(90deg,#d9eee52e,#d9eee507 30%,#d9eee518 70%,#d9eee54d); box-shadow:inset 0 0 0 1px #d9eee538,0 4px 6px var(--metal-shadow); }
.b1-glass:after { content:''; position:absolute; inset:8px auto 8px 7px; width:5px; border-radius:5px; background:#fff4; }
.b1-liquid { position:absolute; left:0; right:0; bottom:0; height:48%; background:linear-gradient(0deg,#6b0f17,#9a2530d9); border-top:2px solid #ffb1a966; }
.b1-vial[data-loaded=true] .b1-glass { border-color:var(--brass); box-shadow:inset 0 0 0 1px #ffb34755,0 0 12px #ffb34726; }
.b1-bubble { display:none; position:absolute; bottom:4px; left:15px; width:6px; height:6px; border:1px solid #ffd0c4; border-radius:50%; }
.b1-vial[data-running=true] .b1-bubble { display:block; animation:b1-bubble-rise 2.6s ease-in infinite; }
.b1-bubble:nth-child(3) { left:30px; animation-delay:-.9s!important; }
.b1-bubble:nth-child(4) { left:23px; width:4px; height:4px; animation-delay:-1.8s!important; }
@keyframes b1-bubble-rise { from { transform:translateY(0); opacity:0; } 20% { opacity:1; } to { transform:translateY(-62px); opacity:0; } }
@media(max-width:600px) { .b1-instruments { gap:14px; } .b1-meter svg { width:70px; height:70px; flex-basis:70px; } .b1-vials { gap:12px; } .b1-vial { width:88px; } .b1-job-indicator { margin-block:5px; } }
@media(prefers-reduced-motion:reduce) { .b1-meter .needle { transition:none; } .b1-vial .b1-bubble { animation:none!important; display:none!important; } }
@media(forced-colors:active) { .b1-lamp,.b1-glass { display:none; } .b1-meter svg { filter:none; } .b1-meter .glass-gleam { display:none; } .b1-meter .rim,.b1-meter .face { fill:Canvas; stroke:CanvasText; } .b1-meter .ticks,.b1-meter .needle { stroke:CanvasText; } .b1-meter .hub { fill:CanvasText; } }

/* D7: engraved navigation rail, compact account bar and wrapping phone menu. */
.navigation { gap: 18px; }
.navigation nav { gap: 6px; }
.navigation .nav-button {
  min-width: 0;
  min-height: 46px;
  margin: 0;
  font-family: var(--font-plate);
  font-size: 20px;
  line-height: 1.2;
  color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
  overflow-wrap: anywhere;
  transition: background-color .14s, border-color .14s;
}
.navigation .nav-button > .ph-duotone { flex: 0 0 auto; font-size: 22px; color: var(--brass); }
.navigation .nav-button:hover { background: var(--hover); border-color: var(--brass); }
.navigation .nav-button.active {
  color: var(--control-selected-text);
  background: linear-gradient(180deg, var(--control-selected-top), var(--control-selected-bottom));
  border: 1px solid var(--verdigris);
  padding-left: 10px;
  box-shadow: inset 3px 0 var(--verdigris), inset 0 1px var(--metal-highlight), 0 2px 4px var(--metal-shadow);
}
.navigation .nav-button.active > .ph-duotone { color: var(--control-selected-text); }
.navigation .nav-count:not([hidden]) {
  max-width: 100%; margin: 2px 0 0; font-family: var(--font-body); font-size: 11px;
  color: var(--text); background: var(--field); border: 1px solid var(--metal-edge);
  white-space: normal; overflow-wrap: anywhere;
}
.sidebar-models, .sidebar-bottom { border-color: var(--metal-edge); padding-top: 12px; }
.navigation .theme-switch { color: var(--text); min-height: 44px; }
.brand-title { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 6px; }
.brand-title > .ph-duotone { font-size: 24px; }
.brand-title .indicator { margin: 0; }
.brand-title h1 { white-space: normal; min-width: 0; font-size: 26px; }
.brand p { color: var(--brass); margin-left: 0; }
.studio-account { gap: 6px 12px; padding: 6px 16px; color: var(--text); }
.studio-account #sessionName { flex: 0 1 auto; max-width: 40%; line-height: 1.4; }
.studio-account a { color: var(--verdigris); text-underline-offset: 3px; padding-block: 7px; }
.studio-account button { min-height: 32px; }
@media (max-width: 600px) {
  .navigation { padding: 12px; }
  .navigation nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-block: 12px; }
  .navigation nav .nav-button {
    width: 100%; min-width: 0; min-height: 68px; padding: 8px 4px;
    font-size: 17px; text-align: center; justify-content: center; flex-direction: column;
  }
  .navigation nav .nav-button.active { padding-left: 4px; box-shadow: inset 0 -3px var(--verdigris), inset 0 1px var(--metal-highlight); }
  .sidebar-models { display: block; }
  .sidebar-models .model-picker { gap: 6px; }
  .sidebar-models .model-picker button { min-width: 0; min-height: 44px; white-space: normal; }
  .sidebar-bottom { align-items: center; margin-top: 8px; gap: 6px; }
  .sidebar-bottom #modelStorage { min-width: 0; }
  .sidebar-bottom #modelStorage summary { min-height: 44px; }
  .sidebar-bottom .theme-switch { margin-left: auto; width: auto; padding: 8px; }
  .theme-switch span { display: inline; }
  .studio-account { padding: 6px 12px; gap: 4px 10px; }
  .studio-account #sessionName { max-width: 100%; margin-left: 0; flex: 1 1 100%; }
  .studio-account button, .studio-account a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (forced-colors: active) {
  .navigation .nav-button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .navigation .nav-button > .ph-duotone, .navigation .nav-button.active > .ph-duotone { color: ButtonText; }
  .navigation .nav-button.active { color: ButtonText; background: ButtonFace; border-color: Highlight; outline: 2px solid Highlight; outline-offset: -4px; box-shadow: none; }
  .studio-account a { color: LinkText; }
}
/* Keep the selected modifier legible also while the pointer rests on it. */
#photoExpand[aria-pressed=true]:hover:not(:disabled) {
  color: var(--text);
  background: var(--purple-bg);
  filter: none;
}
.studio-account a { opacity: 1; }

/* D8: the video workbench. Existing mode/source controls and API state remain
   authoritative; all surfaces reuse the shared materials without extra assets. */
#videoCreation .workflow-tabs { gap: 5px; padding: 5px; }
#videoCreation .workflow-tabs button {
  padding: 10px 6px; min-height: 72px; white-space: normal;
  font-family: var(--font-plate); font-size: 17px; line-height: 1.2;
}
#videoCreation .workflow-tabs button span { overflow-wrap: anywhere; }
#videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) {
  padding: 10px 12px; margin-block: 12px;
  border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -1px var(--metal-shadow);
}
#videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) > summary {
  color: var(--paper); font-family: var(--font-plate); font-size: 18px;
  min-height: 28px; line-height: 1.4; overflow-wrap: anywhere;
}
#videoCreation .generation-settings {
  padding: 12px; gap: 8px; background: var(--field);
  border-color: var(--metal-edge); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
#videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1.25fr);
  align-items: center; gap: 8px 12px;
}
#videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls)[hidden] { display: none; }
#videoCreation .generation-settings :is(p, textarea) { grid-column: 1 / -1; margin: 0; }
#videoCreation .generation-settings #ltxDialogueControls > label:first-child { grid-column: 1 / -1; }
#videoCreation :is(#h3ReferenceControls, #ltxFirstControls, #ltxEndControls, #ltxAudioControls, .source) {
  padding: 12px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#videoCreation :is(#h3ReferenceControls, #ltxEndControls, #ltxAudioControls) > :is(label, select) {
  display: block; width: 100%; margin-block: 8px;
}
#videoCreation #ltxAudioControls > label:has(input[type=checkbox]) {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
}
#videoCreation #ltxAudioControls input[type=checkbox] { flex: none; }
#videoCreation :is(#sourcePreview, #ltxEndPreview) {
  max-height: 180px; width: auto; max-width: 100%;
  border: 1px solid var(--metal-edge); padding: 4px; background: var(--field);
}
#videoCreation .h3-reference-previews figure { margin: 6px 0; }
#videoCreation .h3-reference-previews figcaption { color: var(--paper); font-size: 12px; }
#videoCreation .prompt-editors { gap: 12px; }
#videoCreation .prompt-editors > div { padding: 12px; }
#videoCreation .field-title { font-family: var(--font-plate); font-size: 20px; font-weight: 500; color: var(--paper); }
#videoCreation .editor-heading { flex-wrap: wrap; gap: 6px; }
#videoCreation .additions-heading { flex-wrap: wrap; gap: 6px; }
#videoCreation .hint { line-height: 1.6; overflow-wrap: anywhere; }
#videoCreation .video-seed-row { padding-block: 8px; }
#videoCreation .output-actions {
  gap: 12px; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); align-items: end;
}
@media (min-width: 901px) {
  #videoCreation > .output-actions {
    padding: 12px; margin-block: 8px 12px;
    background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  }
  #videoCreation .video-form-scroll { padding: 3px 8px 5px 3px; }
}
@media (max-width: 600px) {
  #videoCreation .workflow-tabs { flex-wrap: wrap; }
  #videoCreation .workflow-tabs button { flex: 1 1 28%; min-height: 68px; font-size: 17px; }
  #videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) > summary { min-height: 44px; }
  #videoCreation .generation-settings :is(#h3Settings, #ltxSettings, #ltxDialogueControls) { grid-template-columns: minmax(0, 1fr); }
  #videoCreation .prompt-editors > div { padding: 10px; }
  #videoCreation .output-actions { margin-block: 12px; }
  #videoCreation :is(#ltxUploadFirst, #ltxReloadAudio, #ltxMoreAudio, #batchAdd) { min-height: 44px; white-space: normal; }
}
@media (forced-colors: active) {
  #videoCreation :is(.generation-settings, .generation-details, #wanControls, #promptBatch, .generation-notes,
    #h3ReferenceControls, #ltxFirstControls, #ltxEndControls, #ltxAudioControls, .source, .output-actions) {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
}

/* D9: photo workbench, using the existing native controls and shared materials. */
/* Only show the keyboard shortcut while it actually has focus. */
.skip-link:not(:focus) { clip-path: inset(50%); }
#photoCreation { gap: 12px; }
#photoCreation > details,
#photoCreation #photoLorasPanel,
#photoCreation #photoAutoProcessing,
#photoCreation .photo-submit-row {
  min-width: 0; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#photoCreation details > summary {
  min-height: 44px; align-content: center; cursor: pointer;
  font-family: var(--font-plate); font-size: 20px; color: var(--paper);
}
#photoCreation details[open] > summary { margin-bottom: 10px; }
#photoCreation .photo-editors { gap: 12px; }
#photoCreation .photo-editors > div { padding: 12px; }
#photoCreation .field-title {
  font-family: var(--font-plate); font-size: 20px; font-weight: 500; color: var(--paper);
}
#photoCreation .editor-heading { flex-wrap: wrap; gap: 6px; }
#photoCreation :is(.photo-settings-grid, .photo-style-grid) { gap: 12px; margin-block: 12px; }
#photoCreation :is(.photo-settings-grid, .photo-style-grid) label { color: var(--paper); line-height: 1.5; }
#photoCreation .photo-actions { gap: 10px; }
#photoCreation .hint { line-height: 1.6; overflow-wrap: anywhere; }
#photoCreation .photo-style-entry { gap: 8px; }
#photoCreation .photo-style-entry input { width: 0; }
#photoCreation .photo-style-save.job-action { flex: 0 0 44px; width: 44px; min-height: 44px; }
#photoCreation .photo-loras { display: grid; gap: 8px; }
#photoCreation .photo-lora {
  padding: 10px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: var(--field); gap: 10px;
}
#photoCreation .photo-lora label { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
#photoCreation .photo-lora input[type=checkbox] { flex: none; }
#photoCreation .photo-lora input[type=number] { width: 78px; }
#photoCreation .photo-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
#photoCreation :is(#photoDenoiseRow, #photoNegativeRow, #photoSkinDenoiseRow):not([hidden]) {
  display: block; margin-block: 10px; color: var(--paper); line-height: 1.5;
}
#photoCreation :is(#photoDenoiseRow, #photoNegativeRow, #photoSkinDenoiseRow) > :is(input, textarea) {
  display: block; width: 100%; margin-top: 6px;
}
#photoCreation #photoAutoProcessing legend { color: var(--paper); font-family: var(--font-plate); font-size: 18px; }
#photoCreation :is(#photoFaceFields, #photoReactorSettings, #photoPulidSettings) {
  min-width: 0; padding: 10px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: var(--field);
}
#photoCreation .photo-face-previews figure { width: 112px; }
#photoCreation .photo-face-previews img {
  width: 112px; height: 112px; object-fit: contain; padding: 4px;
  border-color: var(--metal-edge); border-radius: var(--plate-radius); box-shadow: var(--plate-shadow);
}
#photoCreation .photo-face-previews figcaption { color: var(--paper); line-height: 1.5; font-size: 12px; }
#photoCreation .photo-submit-row { gap: 12px; margin-block: 8px; }
#photoTemplateDialog {
  border-color: var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); overflow-wrap: anywhere;
}
#photoTemplateDialog h2 { color: var(--paper); }
#photoTemplateDialog label { color: var(--paper); line-height: 1.5; }
#photoTemplateDialog .photo-actions { gap: 10px; }
@media (min-width: 901px) {
  #photoCreation { padding: 3px 8px 5px 3px; }
}
@media (max-width: 600px) {
  #photoCreation :is(.photo-settings-grid, .photo-style-grid) { grid-template-columns: minmax(0, 1fr); }
  #photoCreation .photo-editors > div { padding: 10px; }
  #photoCreation .photo-actions label { margin-left: 0; }
  #photoCreation .photo-lora label { min-width: 0; flex-basis: 100%; }
  #photoCreation .photo-lora .job-action { min-height: 44px; white-space: normal; }
  #photoCreation #photoQueueStatus { min-width: 0; flex-basis: 100%; }
  #photoTemplateDialog { padding: 12px; }
  #photoTemplateDialog .photo-actions button { width: 100%; min-height: 44px; }
}
@media (forced-colors: active) {
  #photoCreation > details, #photoCreation :is(#photoLorasPanel, #photoAutoProcessing, .photo-lora,
    #photoFaceFields, #photoReactorSettings, #photoPulidSettings, .photo-submit-row), #photoTemplateDialog {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
  }
}

/* D10: collection controls, full-size inspection and result selection trays. */
/* E10 G2: a single empty result plate; controls return with real catalog data. */
.workspace-body #imageGallery:empty, #videoLibrary:empty { display: none; }
:is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state=empty],
:is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state=search] {
  min-height: 128px; display: grid; place-content: center; text-align: center;
  padding: 24px; margin-block: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius); background: var(--field); color: var(--text);
  box-shadow: inset 0 2px 6px var(--metal-shadow); font: 500 21px/1.5 var(--font-plate);
}
.library-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block: 12px; }
.library-empty-actions .job-action { min-height: 44px; margin: 0; }
:is(#imageDeleteStatus,#videoLibraryStatus):empty { display: none; }
@media (forced-colors: active) {
  :is(#imageGalleryStatus,#videoLibraryStatus)[data-library-state] { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
}
.workspace-body [data-page=gallery] { gap: 12px; }
.gallery-toolbar,
[data-page=gallery] .image-search,
#imageDeleteControls,
[data-page=gallery] .image-pagination,
#imageDetails,
.photo-variant-group {
  min-width: 0; padding: 12px; border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); color: var(--text);
}
.gallery-toolbar { flex-wrap: wrap; margin: 0; gap: 10px; }
.gallery-toolbar .small-tabs { flex: 1 1 220px; min-width: 0; }
.gallery-toolbar #imageCollection { flex: 1 1 200px; min-width: 0; }
.gallery-toolbar #imageScope { width: 100%; max-width: none; margin: 0; }
[data-page=gallery] .image-search { gap: 10px; margin-block: 10px; align-items: center; }
[data-page=gallery] .image-search label { color: var(--paper); font-family: var(--font-plate); font-size: 19px; }
[data-page=gallery] .image-search input { min-width: 0; flex: 1 1 180px; margin: 0; }
[data-page=gallery] .image-search .job-action,
#imageDeleteControls .job-action,
[data-page=gallery] .image-pagination .job-action { margin: 0; min-height: 40px; }
#imageDeleteControls { align-items: center; gap: 10px; margin-block: 10px; }
#imageDeleteCount { flex: 1 1 160px; font-variant-numeric: tabular-nums; }
[data-page=gallery] .image-pagination { gap: 10px !important; margin-block: 12px !important; }
[data-page=gallery] .image-pagination .hint { flex: 1 1 160px; text-align: center; font-size: 12px; line-height: 1.6; }
#imagesView :is(.hint, details), #videosView :is(.hint, label) { line-height: 1.6; overflow-wrap: anywhere; }
.image-card .image-delete-choice {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--metal-edge);
  font-size: 12px; color: var(--paper); min-height: 36px;
}
.image-card:has(.collect-image[aria-pressed=true]) > img { border-bottom-color: var(--verdigris); }
#imageDetails { padding: 16px; }
.image-details-head { align-items: start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--metal-edge); }
.image-details-head h3 { min-width: 0; color: var(--paper); font-family: var(--font-plate); font-size: 26px; font-weight: 500; line-height: 1.3; }
.image-details-head .job-action { flex: none; margin: 0; }
.image-details-controls { gap: 8px; margin-block: 12px; }
.image-details-controls .job-action { min-width: 40px; min-height: 40px; }
.image-details-controls .hint { color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.image-details-stage {
  background: var(--field); border: 1px solid var(--metal-edge);
  box-shadow: inset 0 3px 9px var(--metal-shadow); border-radius: 8px;
}
#imageDetailsMetadata { padding-top: 12px; }
#imageDetailsMetadata p { font-size: 13px; line-height: 1.6; }
#imageDetailsSettingsSection { margin-top: 12px; padding: 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 8px; }
#imageDetailsSettingsSection summary { color: var(--paper); font-family: var(--font-plate); font-size: 20px; min-height: 40px; align-content: center; cursor: pointer; }
#imageDetailsAllSettings { color: var(--text); font-size: 13px; line-height: 1.6; margin-block: 10px; }
.image-details-actions { gap: 10px; }
.image-details-actions .job-action { margin: 10px 0 0; white-space: normal; }
#videosView .panel { min-width: 0; background: linear-gradient(180deg, var(--oxide-700), var(--panel)); box-shadow: var(--plate-shadow); }
#videoUploadRow > label { display: block; min-width: 0; max-width: 100%; }
#videoUploadRow input[type=file] { display: block; width: 100%; min-width: 0; }
#videoPanel #closeVideo { float: none; min-height: 40px; margin: 0 0 10px; }
#videoPanel h1, #videosView .panel > h1, .photo-variant-group h4 { color: var(--paper); font-family: var(--font-plate); font-size: 24px; font-weight: 500; }
.photo-variant-choices { gap: 12px; }
.photo-variant-choice { min-width: 0; padding: 10px; border-color: var(--metal-edge); background: var(--field); }
.photo-variant-choice > img { object-fit: contain; background: var(--field); border-radius: 6px; }
.photo-variant-choice > a { display: inline-block; margin: 8px 8px 8px 0; line-height: 1.6; }
.photo-variant-choice label { display: flex; align-items: center; gap: 8px; min-height: 40px; line-height: 1.6; overflow-wrap: anywhere; color: var(--paper); }
.photo-variant-choice:has(input:checked) { border-color: var(--verdigris); box-shadow: inset 3px 0 var(--verdigris); }
.photo-variant-review .row { gap: 10px; }
@media (max-width: 600px) {
  .gallery-toolbar { padding: 10px; }
  .gallery-toolbar :is(.small-tabs, #imageCollection) { flex-basis: 100%; }
  [data-page=gallery] .image-search { display: flex; flex-wrap: wrap; padding: 10px; }
  [data-page=gallery] .image-search label { flex-basis: 100%; }
  [data-page=gallery] .image-search input { flex-basis: 100%; }
  [data-page=gallery] .image-search .job-action { flex: 1; }
  #imageDeleteControls { padding: 10px; }
  #imageDeleteControls > * { flex: 1 1 100%; margin: 0; }
  [data-page=gallery] .image-pagination { padding: 10px; flex-wrap: wrap; }
  [data-page=gallery] .image-pagination .hint { order: -1; flex-basis: 100%; }
  [data-page=gallery] .image-pagination .job-action { flex: 1; min-width: 0; white-space: normal; }
  #imageDetails { padding: 12px; }
  .image-details-head h3 { font-size: 23px; }
  .image-details-head .job-action { padding-inline: 8px; }
  .image-details-controls .job-action { min-width: 44px; min-height: 44px; }
  .image-details-actions .job-action { width: 100%; min-height: 44px; }
  .photo-variant-choices { grid-template-columns: minmax(0, 1fr); }
  .photo-variant-review .job-action { min-height: 44px; white-space: normal; }
}
@media (forced-colors: active) {
  .gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination), #imageDeleteControls,
  #imageDetails, .image-details-stage, #imageDetailsSettingsSection,
  #videosView .panel, .photo-variant-group, .photo-variant-choice {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .image-details-head h3, #imageDetailsSettingsSection summary, #imageDetailsAllSettings,
  .image-card .image-delete-choice, .photo-variant-choice label,
  #videosView .panel > h1, .photo-variant-group h4 { color: CanvasText; }
  .photo-variant-choice:has(input:checked) { outline: 2px solid Highlight; outline-offset: 1px; }
}

/* D11: queue instrument bench and private history. Existing API captions,
   counts, disclosures and actions remain the source of truth. */
[data-page=queue] > .panel { min-width: 0; padding: 16px; }
[data-page=queue] > .panel > h1 {
  font-family: var(--font-plate); font-size: 27px; font-weight: 500; color: var(--paper);
}
[data-page=queue] :is(#queueStatus, #queueCounts) {
  padding: 10px 12px; margin-block: 10px; border: 1px solid var(--metal-edge);
  border-radius: 6px; color: var(--text); background: var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow); line-height: 1.6; overflow-wrap: anywhere;
}
[data-page=queue] #queueStatus { font: 500 23px/1.4 var(--font-plate); color: var(--paper); }
.shared-gpu-queue {
  min-width: 0; margin-block: 16px; padding: 14px; border: 1px solid var(--metal-edge);
  border-radius: 8px; background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow);
}
.shared-gpu-queue h2 { margin-block: 18px 10px; font: 500 23px/1.3 var(--font-plate); color: var(--paper); }
.shared-gpu-queue .b1-instruments { gap: 14px 24px; margin-bottom: 12px; padding: 0 0 14px; }
.shared-gpu-queue .b1-meter { flex: 1 1 200px; }
.shared-gpu-queue .b1-meter figcaption > strong { color: var(--paper); font: 500 20px/1.3 var(--font-plate); }
.shared-gpu-queue .b1-reading { font-size: 15px; line-height: 1.5; }
.shared-gpu-queue .b1-vials {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: 14px; padding: 14px; background: var(--tray); border: 1px solid var(--metal-edge);
  border-radius: 7px; box-shadow: inset 0 3px 8px var(--metal-shadow);
}
.shared-gpu-queue .b1-vials:empty { display: none; }
.shared-gpu-queue .b1-vial { width: auto; min-width: 0; gap: 10px; }
.shared-gpu-queue .b1-vial figcaption { width: 100%; line-height: 1.5; }
.shared-gpu-queue .b1-vial figcaption > strong { color: var(--paper); font: 500 19px/1.3 var(--font-plate); }
.shared-gpu-queue .b1-glass {
  height: 140px; width: 60px; border-radius: 28px 28px 9px 9px;
  border-top: 9px solid var(--brass-dark); border-bottom: 12px solid var(--brass-dark);
  background: linear-gradient(90deg, #d9eee550, #d9eee507 30%, #d9eee518 70%, #d9eee560);
  box-shadow: inset 0 0 0 1px #d9eee550, inset -5px 0 8px #0003, 0 5px 8px var(--metal-shadow);
}
.shared-gpu-queue .b1-liquid { left: 3px; right: 3px; bottom: 2px; border-radius: 0 0 4px 4px; }
.shared-gpu-queue .b1-vial[data-loaded=true] .b1-glass {
  border-color: var(--brass); box-shadow: inset 0 0 0 1px #ffb34766, 0 0 12px #ffb34726, 0 5px 8px var(--metal-shadow);
}
.shared-gpu-queue table { width: 100%; margin-block: 12px; }
.shared-gpu-queue :is(th, td) { overflow-wrap: anywhere; }
[data-page=queue] #jobs { gap: 12px; margin-top: 16px; }
[data-page=queue] #jobs > .job {
  padding: 12px; margin: 0; border: 1px solid var(--metal-edge); border-radius: 7px;
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
[data-page=queue] #jobs > .queue-job { padding: 0; overflow: visible; }
[data-page=queue] #jobs > .queue-job > summary {
  padding: 12px; margin: 0; border: 0; border-radius: 6px; line-height: 1.6;
  font: 500 19px/1.6 var(--font-plate); color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
}
[data-page=queue] #jobs > .queue-job > .job-summary > strong { color: var(--paper); font: 500 21px/1.4 var(--font-plate); }
[data-page=queue] #jobs .personal-queue-info {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--metal-edge); line-height: 1.6;
  font-family: var(--font-body); font-size: 12px;
}
[data-page=queue] #jobs > .queue-job[open] { padding-bottom: 12px; border: 1px solid var(--metal-edge); }
[data-page=queue] #jobs > .queue-job[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
[data-page=queue] #jobs > .queue-job > :is(p, details) { margin: 12px; }
[data-page=queue] #jobs > .queue-job > .job-action { margin: 0 0 8px 12px; max-width: calc(100% - 24px); white-space: normal; }
[data-page=queue] #jobs > p { padding: 14px; color: var(--muted); line-height: 1.6; }
@media (max-width: 600px) {
  [data-page=queue] > .panel, .shared-gpu-queue { padding: 10px; }
  .shared-gpu-queue .b1-meter { flex-basis: 100%; }
  .shared-gpu-queue .b1-vials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 12px 8px; }
  .shared-gpu-queue .b1-glass { height: 128px; }
  [data-page=queue] #jobs .job-action { min-height: 44px; }
  [data-page=queue] #jobs > .queue-job > .job-action { display: block; width: calc(100% - 24px); }
}
@media (forced-colors: active) {
  .shared-gpu-queue, .shared-gpu-queue .b1-vials,
  [data-page=queue] :is(#queueStatus, #queueCounts),
  [data-page=queue] #jobs > .job, [data-page=queue] #jobs > .queue-job > summary {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .shared-gpu-queue :is(h2, .b1-vial figcaption > strong, .b1-meter figcaption > strong),
  [data-page=queue] > .panel > h1, [data-page=queue] #jobs > .queue-job > .job-summary > strong { color: CanvasText; }
}

/* D12: editing bench. Higher specificity survives the lazy-loaded project CSS.
   Native timeline geometry, drag/trim hit areas and crop coordinates stay intact. */
body[data-view=tools] [data-page=tools] > :is(.mh-projects, .panel) { grid-column: 1 / -1; }
.workspace .mh-projects {
  padding: 16px; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel)); box-shadow: var(--plate-shadow);
}
.workspace .mh-projects > header {
  gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--metal-edge);
}
.workspace .mh-projects > header > div { min-width: 0; }
.workspace .mh-projects > header > .ph-duotone { color: var(--brass); }
.workspace .mh-projects h2 { font: 500 28px/1.2 var(--font-plate); color: var(--paper); }
.workspace .mh-projects .mh-bar { gap: 8px; margin-block: 12px; }
.workspace .mh-projects label { font: 12px/1.5 var(--font-body); color: var(--muted); }
.workspace .mh-projects :is(input:not([type=checkbox]), select) {
  min-height: 40px; color: var(--text); background: var(--field); border-color: var(--metal-edge);
  border-radius: 5px; font: 13px/1.5 var(--font-body);
  box-shadow: inset 0 2px 4px var(--metal-shadow), 0 1px var(--metal-highlight);
}
.workspace .mh-projects input[type=checkbox] { width: 20px; height: 20px; padding: 0; }
.workspace .mh-projects button:not(:is(.mh-clip, .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle)) {
  min-height: 40px; max-width: 100%; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere;
  font: 500 17px/1.3 var(--font-plate); color: var(--paper); border-color: var(--metal-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px 2px var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects button.mh-primary { border-color: var(--brass); }
.workspace .mh-projects button:hover:not(:disabled):not(:is(.mh-crop-zone, .mh-crop-handle)) { border-color: var(--brass); }
.workspace .mh-projects button:disabled { opacity: .6; cursor: not-allowed; }
.workspace .mh-projects :is(button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.workspace .mh-projects :is(.mh-clip, .mh-trim-handle, .mh-seam):focus-visible { outline-offset: -3px; }
.workspace .mh-projects details {
  padding: 0 12px 12px; margin-top: 12px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
.workspace .mh-projects details:not([open]) { padding-bottom: 0; }
.workspace .mh-projects summary {
  margin-inline: -12px; padding: 10px 12px; color: var(--paper); font: 500 19px/1.5 var(--font-plate);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px;
  overflow-wrap: anywhere;
}
.workspace .mh-projects details[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
.workspace .mh-projects :is(.mh-summary, .mh-status, .mh-page, .hint) {
  line-height: 1.6; font-size: 12px; overflow-wrap: anywhere;
}
.workspace .mh-projects .mh-time-fields { gap: 12px; margin-block: 12px; }
.workspace .mh-projects .mh-composition-preview {
  margin-block: 16px; padding: 12px; background: var(--tray); border: 1px solid var(--metal-edge);
  border-radius: 7px; box-shadow: inset 0 2px 5px var(--metal-shadow);
}
.workspace .mh-projects .mh-composition-preview video {
  border: 1px solid var(--metal-edge); background: #0d1715; border-radius: 5px;
}
.workspace .mh-projects .mh-timeline {
  padding: 8px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px;
  box-shadow: inset 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects .mh-ruler {
  color: var(--brass); background: var(--panel); padding-inline: 4px; border-bottom: 1px solid var(--metal-edge);
  font-variant-numeric: tabular-nums;
}
.workspace .mh-projects .mh-track { border-top-color: var(--metal-edge); }
.workspace .mh-projects .mh-track-label { color: var(--brass); font: 500 15px/1.5 var(--font-plate); }
.workspace .mh-projects .mh-track-clips {
  background: repeating-linear-gradient(90deg, transparent 0 39px, var(--metal-highlight) 40px 41px), var(--panel);
}
.workspace .mh-projects button.mh-clip {
  color: var(--text); background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  border-color: var(--metal-edge); box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow);
}
.workspace .mh-projects button.mh-clip[aria-pressed=true] { border: 2px solid var(--brass); }
.workspace .mh-projects button.mh-clip[data-primary=true] { box-shadow: inset 0 -3px var(--brass); }
.workspace .mh-projects :is(button.mh-trim-handle, button.mh-seam) { color: var(--brass); background: var(--field); }
.workspace .mh-projects :is(.mh-source-frame, .mh-source-preview) {
  padding: 8px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--field);
  box-shadow: inset 0 2px 4px var(--metal-shadow);
}
.workspace .mh-projects .mh-source-frame-copy { overflow-wrap: anywhere; }
.workspace .mh-projects .mh-draft-notice { border-radius: 5px; border-left-color: var(--brass); }
body[data-view=tools] [data-page=tools] > .panel > details {
  padding: 0 12px 12px; margin-block: 14px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--panel);
}
body[data-view=tools] [data-page=tools] > .panel > details:not([open]) { padding-bottom: 0; }
body[data-view=tools] [data-page=tools] > .panel > details > summary {
  margin-inline: -12px; padding: 10px 12px; color: var(--paper); font: 500 19px/1.5 var(--font-plate);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px;
}
body[data-view=tools] :is(#smoothSource, #smoothSourceStatus) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .workspace .mh-projects { padding: 10px; }
  .workspace .mh-projects .mh-bar { gap: 8px; }
  .workspace .mh-projects .mh-time-fields { grid-template-columns: 1fr; }
  .workspace .mh-projects :is(input:not([type=checkbox]), select) { min-height: 44px; }
  .workspace .mh-projects button:not(:is(.mh-clip, .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle)) { min-height: 44px; }
  .workspace .mh-projects .mh-page { white-space: normal; }
  .workspace .mh-projects .mh-composition-preview { padding: 8px; }
  .workspace .mh-projects .mh-source-frame { flex-wrap: wrap; }
  .workspace .mh-projects .mh-source-frame-copy { flex: 1 1 160px; }
}
@media (forced-colors: active) {
  .workspace .mh-projects, .workspace .mh-projects :is(details, summary, .mh-composition-preview, .mh-timeline, .mh-track-clips, .mh-source-frame, .mh-source-preview),
  body[data-view=tools] [data-page=tools] > .panel > details, body[data-view=tools] [data-page=tools] > .panel > details > summary {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  .workspace .mh-projects :is(button:not(.mh-crop-zone), input, select) { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  .workspace .mh-projects button.mh-crop-zone { background: transparent; border-color: Highlight; box-shadow: none; }
  .workspace .mh-projects button.mh-clip[aria-pressed=true] { border-color: Highlight; }
  .workspace .mh-projects :is(button, input, select, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* D13: audio bench. Native fields, PCM player and waveform coordinates remain
   in charge; colour tokens also supply the light patina. No extra assets. */
#audioPromptPanel > h1, #audioMixPanel > h1,
[data-page=tools] > .panel:has(#audioUpload) > h1 {
  font: 500 28px/1.3 var(--font-plate); color: var(--paper); margin-block: 0 16px;
}
#audioPromptPanel h2 { font: 500 23px/1.3 var(--font-plate); color: var(--paper); }
#audioPromptPanel :is(.row, .audio-prompt-columns), #audioMixPanel .row { gap: 12px; margin-block: 12px; }
#audioPromptPanel label { line-height: 1.6; overflow-wrap: anywhere; }
#audioPromptPanel label > :is(select, input:not([type=checkbox])) { display: block; max-width: 100%; }
#audioPromptPanel label > select { width: 100%; }
#audioPromptPanel .audio-word-bank .row select { margin-left: 0; }
#audioPromptPanel input[type=number] { width: 100%; }
#audioPromptPanel :is(#speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
[data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track) {
  min-width: 0; padding: 14px; margin-block: 16px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: inset 0 1px var(--metal-highlight), 0 3px 6px var(--metal-shadow);
}
#audioPromptPanel #speechSettings > details { flex-basis: 100%; }
#audioPromptPanel #omniDesign { flex-basis: 100%; }
#audioPromptPanel details {
  padding: 0 12px 12px; margin-block: 14px; min-width: 0; border: 1px solid var(--metal-edge);
  border-radius: 7px; background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
#audioPromptPanel details:not([open]) { padding-bottom: 0; }
#audioPromptPanel summary {
  padding: 10px 12px; margin-inline: -12px; font: 500 19px/1.5 var(--font-plate); color: var(--paper);
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700)); border-radius: 6px; overflow-wrap: anywhere;
}
#audioPromptPanel details[open] > summary { border-bottom: 1px solid var(--metal-edge); border-radius: 6px 6px 0 0; }
#audioPromptPanel .audio-prompt-columns > label { padding: 12px; border: 1px solid var(--metal-edge); border-radius: 7px; background: var(--field); }
#audioPromptPanel textarea { margin-top: 6px; }
#audioPromptPanel .audio-word-bank-items { gap: 8px; margin-top: 12px; }
#audioPromptPanel .audio-word-chip { color: var(--text); min-height: 36px; line-height: 1.5; }
#audioPromptPanel .audio-word-chip:hover { color: var(--brass); }
#audioPromptPanel .job-action, #audioMixPanel .job-action,
[data-page=tools] > .panel:has(#audioUpload) .job-action,
[data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) {
  max-width: 100%; min-height: 40px; white-space: normal; overflow-wrap: anywhere;
  padding: 8px 12px; color: var(--paper); font: 500 17px/1.4 var(--font-plate);
  border: 1px solid var(--metal-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--oxide-600), var(--oxide-700));
  box-shadow: inset 0 1px var(--metal-highlight), inset 0 -2px var(--metal-shadow), 0 2px 4px var(--metal-shadow);
}
#audioPromptPanel :is(#speechGenerate, #sfxGenerate, #musicGenerate) { border-color: var(--brass); }
[data-page=tools] .audio-wave-player .aw-surface {
  background: var(--field); border-color: var(--metal-edge); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
[data-page=tools] .audio-wave-player .aw-peaks { stroke: var(--verdigris); }
[data-page=tools] .audio-wave-player .aw-selection { fill: color-mix(in srgb, var(--brass) 15%, transparent); stroke: var(--brass); }
[data-page=tools] .audio-wave-player .aw-cursor { stroke: var(--text); }
[data-page=tools] .audio-wave-player .aw-handle {
  background: linear-gradient(90deg, transparent 10px, var(--brass) 10px, var(--brass) 14px, transparent 14px);
}
[data-page=tools] .audio-wave-player .aw-info { color: var(--brass); font-variant-numeric: tabular-nums; }
#audioPromptPanel :is(button, summary):focus-visible,
[data-page=tools] .audio-wave-player :is(button, input):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
[data-page=tools] .audio-wave-player .aw-handle:focus-visible { outline-offset: 0; }
#audioPromptPanel .hint, #audioMixPanel .hint, [data-page=tools] > .panel:has(#audioUpload) .hint { line-height: 1.6; }
#audioMixPanel .mix-track > strong { font: 500 20px/1.5 var(--font-plate); color: var(--paper); }
#audioMixPanel .mix-track label { min-width: 0; }
#audioPromptPanel :is(#vrAsrApply, #vrSave) { margin-top: 10px; }
@media (max-width: 600px) {
  #audioPromptPanel :is(#speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track) { padding: 10px; }
  #audioPromptPanel .audio-prompt-columns { grid-template-columns: minmax(0, 1fr); }
  #audioPromptPanel .row > label, #audioMixPanel .mix-track .row > label { flex-basis: 100%; min-width: 0; }
  #audioPromptPanel #speechBatchOptions { width: 100%; }
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel) .row > label { flex-basis: 100%; min-width: 0; }
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel) label > :is(select, input) { display: block; width: 100%; }
  #audioPromptPanel :is(input:not([type=checkbox]), select, .job-action, .audio-word-chip),
  #audioMixPanel .job-action, [data-page=tools] > .panel:has(#audioUpload) .job-action,
  [data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) { min-height: 44px; }
  [data-page=tools] .audio-wave-player .aw-actions button { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  #audioPromptPanel :is(details, summary, .audio-prompt-columns > label, #speechSettings, #omniSettings, #f5Settings, #voiceReferencePanel, #sfxGeneration, #musicGeneration),
  [data-page=tools] :is(#audioExportPanel, #audioExcerptPanel, .audio-wave-player, .mix-track, .audio-wave-player .aw-surface) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  #audioPromptPanel :is(h1, h2), #audioMixPanel > h1, #audioMixPanel .mix-track > strong,
  [data-page=tools] > .panel:has(#audioUpload) > h1, [data-page=tools] .audio-wave-player .aw-info { color: CanvasText; }
  #audioPromptPanel .job-action, #audioMixPanel .job-action,
  [data-page=tools] > .panel:has(#audioUpload) .job-action, [data-page=tools] .audio-wave-player :is(.aw-actions button, .aw-retry) {
    color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none;
  }
  [data-page=tools] .audio-wave-player :is(.aw-peaks, .aw-cursor) { stroke: CanvasText; }
  [data-page=tools] .audio-wave-player .aw-selection { fill: transparent; stroke: Highlight; }
  [data-page=tools] .audio-wave-player .aw-handle { background: transparent; border-inline: 2px solid Highlight; }
}

/* D14: operator benches. All diagnostics, native actions and permission gates
   remain owned by the existing modules. No decorative usage measurements. */
[data-page=system] { --warning: var(--focus); --danger: var(--error); min-width: 0; display: grid; gap: 16px; }
[data-page=system] > .panel, body[data-studio-admin] main {
  min-width: 0; border: 1px solid var(--metal-edge); border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow); padding: 20px 16px 16px; margin: 0;
  overflow-wrap: anywhere;
}
[data-page=system] > .panel > h1 { font: 500 28px/1.3 var(--font-plate); color: var(--paper); margin: 0 12px 14px; }
[data-page=system] :is(section, #cpuFileReviewRows > details, #gpuFileReviewRows > details) {
  min-width: 0; max-width: 100%; padding: 14px; margin-block: 14px;
  border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--panel); box-shadow: inset 0 1px var(--metal-highlight);
}
[data-page=system] h2 { font: 500 24px/1.3 var(--font-plate); color: var(--brass); margin: 0 0 12px; }
[data-page=system] :is(p, #log) { line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
[data-page=system] :is(#cpuRows, #dataDiskRows, #storageUsageRows, #systemErrorRows, #providerRows) > p {
  padding: 8px 10px; margin: 5px 0; border-inline-start: 2px solid var(--brass-dark);
  background: var(--field); border-radius: 0 5px 5px 0; color: var(--muted);
}
[data-page=system] :is([role=status], #log) {
  min-width: 0; color: var(--text); background: var(--field); border: 1px solid var(--metal-edge);
  padding: 10px 12px; border-radius: 6px; box-shadow: inset 0 2px 5px var(--metal-shadow);
}
[data-page=system] [role=status]:empty { display: none; }
[data-page=system] .job-action { margin: 4px 6px 6px 0; min-height: 40px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
[data-page=system] summary, #modelStorage summary {
  min-width: 0; color: var(--paper); font: 500 20px/1.5 var(--font-plate);
  padding: 8px 10px; min-height: 40px; cursor: pointer; overflow-wrap: anywhere;
}
#modelStorage { width: 100%; }
.sidebar-bottom #modelStorage[open] { padding: 8px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 7px; }
.navigation #modelStorage > summary { color: var(--brass); font-size: 22px; }
.navigation #modelStorage .storage-model-row summary { font: 500 20px/1.5 var(--font-plate); }
#modelStorage > .hint, #modelStorageStatus { font: 12px/1.65 var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
#modelStorage .storage-model-row { margin-block: 12px; padding: 12px; }
.storage-model-row > strong { display: block; color: var(--paper); font: 500 24px/1.4 var(--font-plate); }
#modelStorage .storage-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#modelStorage .job-action { margin: 0; min-width: 0; min-height: 40px; width: 100%; padding: 8px 6px; font-size: 12px; }
.storage-model-row details { background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; }
.storage-model-row details[open] { padding-bottom: 10px; }
.storage-model-row details[open] > summary { border-bottom: 1px solid var(--metal-edge); }
#modelStorage .storage-model-row details > label { display: flex; align-items: start; gap: 8px; margin: 12px 10px; font: 12px/1.6 var(--font-body); color: var(--text); }
.storage-model-row input[type=checkbox] { flex: none; margin: 2px 0 0; }
#modelStorage details .job-action { width: calc(100% - 20px); margin-inline: 10px; }
body[data-studio-admin] { color-scheme: dark; padding: 24px 16px; font: 14px/1.6 var(--font-body); }
:root[data-theme=light] body[data-studio-admin] { color-scheme: light; }
body[data-studio-admin] main { max-width: 1120px; padding: 24px; }
body[data-studio-admin] header { padding: 0 4px 16px; border-bottom: 1px solid var(--metal-edge); margin-bottom: 18px; }
body[data-studio-admin] small { color: var(--brass); letter-spacing: .1em; }
body[data-studio-admin] h1 { font: 500 36px/1.2 var(--font-plate); margin-block: 10px 16px; }
body[data-studio-admin] h2 { font: 500 26px/1.3 var(--font-plate); color: var(--paper); }
body[data-studio-admin] #sessionName { overflow-wrap: anywhere; }
body[data-studio-admin] .tools {
  padding: 14px; gap: 12px; border: 1px solid var(--metal-edge); border-radius: 7px;
  background: var(--field); box-shadow: inset 0 2px 5px var(--metal-shadow);
}
body[data-studio-admin] .tools label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body[data-studio-admin] :is(button, select) { max-width: 100%; min-height: 40px; }
body[data-studio-admin] button { white-space: normal; overflow-wrap: anywhere; }
body[data-studio-admin] select { color: var(--text); background: var(--field); border-color: var(--metal-edge); }
body[data-studio-admin] .plan-table { margin-block: 14px 24px; }
body[data-studio-admin] .plan-table table { min-width: 760px; }
body[data-studio-admin] :is(th, td) { min-width: 100px; }
body[data-studio-admin] .account { padding: 16px; }
body[data-studio-admin] .account h2 { font-size: 24px; }
body[data-studio-admin] .account .badge { padding: 6px 10px; background: var(--field); border-inline-start: 3px solid var(--verdigris); border-radius: 0 5px 5px 0; }
body[data-studio-admin] .actions { gap: 10px; padding-block: 10px; }
body[data-studio-admin] .account .plan { flex-basis: 100%; gap: 10px; }
body[data-studio-admin] .plan label { display: grid; gap: 6px; min-width: 0; flex: 1 1 240px; max-width: 100%; }
body[data-studio-admin] .plan select { width: 100%; min-width: 0; }
body[data-studio-admin] #adminMessage:not(:empty) { padding: 10px 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); }
[data-page=system] :is(button, summary):focus-visible, #modelStorage :is(button, summary, input):focus-visible,
body[data-studio-admin] :is(button, select, input, a, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
  [data-page=system] > .panel { padding: 20px 12px 12px; }
  [data-page=system] section { padding: 12px; }
  [data-page=system] .job-action { width: 100%; margin: 4px 0 8px; }
  [data-page=system] :is(button, summary), #modelStorage :is(button, summary) { min-height: 44px; }
  .sidebar-bottom #modelStorage[open] { flex-basis: 100%; }
  body[data-studio-admin] { padding: 12px; }
  body[data-studio-admin] main { padding: 20px 12px; }
  body[data-studio-admin] :is(button, select) { min-height: 44px; }
  body[data-studio-admin] .tools label { width: 100%; }
  body[data-studio-admin] .tools label select { flex: 1; min-width: 0; }
  body[data-studio-admin] .actions > button { width: 100%; }
  body[data-studio-admin] .account .plan { flex-direction: column; align-items: stretch; width: 100%; }
  body[data-studio-admin] .plan label { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-studio-admin] *, body[data-studio-admin] *::before, body[data-studio-admin] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  [data-page=system] :is(.panel, section, [role=status], #log, details), #modelStorage,
  #modelStorage :is(.storage-model-row, details), body[data-studio-admin] :is(main, header, .tools, .account, .badge, #adminMessage) {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  [data-page=system] :is(p, h1, h2, summary), #modelStorage :is(summary, strong, label, p),
  body[data-studio-admin] :is(h1, h2, small, p, a, select) { color: CanvasText; background: Canvas; }
  body[data-studio-admin] button { color: ButtonText; background: ButtonFace; }
  [data-page=system] :is(button, summary):focus-visible, #modelStorage :is(button, summary, input):focus-visible,
  body[data-studio-admin] :is(button, select, input, a, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* E11.6: a static laboratory showcase. Instruments are decoration, never state.
   Session text, visibility and native actions stay in auth/ui.js. */
body[data-studio-access] {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  color: var(--text);
  padding: 48px 24px;
  font-size: 15px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--brass-rim) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--verdigris) 12%, transparent), transparent 65%), var(--bg);
}
body[data-studio-access]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 12%, var(--metal-highlight) 12% calc(12% + 1px), transparent calc(12% + 1px) 88%, var(--metal-highlight) 88% calc(88% + 1px), transparent calc(88% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 95px, var(--metal-grain) 95px 96px);
}
body[data-studio-access] *, body[data-studio-access] *::before, body[data-studio-access] *::after { box-sizing: border-box; }
body[data-studio-access] main {
  position: relative;
  width: min(560px, 100%);
  min-width: 0;
  padding: 36px;
  border: 1px solid var(--brass-rim);
  border-radius: var(--plate-radius);
  background:
    var(--rivet-cut) 9px 9px / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) 9px / 8px 8px no-repeat,
    var(--rivet-cut) 9px calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet-cut) calc(100% - 9px) calc(100% - 9px) / 8px 8px no-repeat,
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    var(--rivet) 7px calc(100% - 7px) / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) calc(100% - 7px) / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    var(--surface-panel);
  box-shadow: var(--plate-shadow);
}
body[data-studio-access] main::before {
  content: '';
  display: block;
  height: 128px;
  margin: 0 0 24px;
  border: 1px solid var(--brass-rim);
  border-radius: 70px 70px 8px 8px;
  /* Embedded SVG: no image request, no text, no moving or invented readings. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 128'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop stop-color='%23f4c476' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23f4c476' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='240' cy='60' rx='88' ry='60' fill='url(%23a)'/%3E%3Cg stroke='%238e774c' stroke-width='3' fill='none'%3E%3Cpath d='M12 112H468M40 112V24H170M310 24H440V112M240 0V32'/%3E%3Ccircle cx='95' cy='67' r='39'/%3E%3Ccircle cx='95' cy='67' r='32' stroke='%23435443'/%3E%3Cpath d='M71 50l4 3m4-13 2 5m14-10v6m14-1-2 5m12 5-4 3' stroke='%23b89a62' stroke-width='2'/%3E%3Cpath d='M95 67l17-14' stroke='%23d5bd8b'/%3E%3Ccircle cx='95' cy='67' r='4' fill='%238e774c'/%3E%3Cpath d='M177 31v58q0 13 13 13t13-13V31m-30 0h34m-28 50h22M361 29v23l-18 35q-7 15 9 15h39q16 0 9-15l-18-35V29m-25 0h29m-39 53h49' stroke='%23778e80'/%3E%3Cpath d='M214 76q26-13 52 0l-9 8h-34z' fill='%23ae8950'/%3E%3Cpath d='M228 32h24l7 44h-38z' stroke='%23d5bd8b'/%3E%3Cpath d='M233 44h14v25h-14z' fill='%23edc782' stroke='none'/%3E%3Cpath d='M219 103h42m-36 9v-9m30 9v-9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat, #15201a;
  box-shadow: var(--recess-shadow);
}
body[data-studio-access] :is(h1, p, small, a, button) { overflow-wrap: anywhere; }
body[data-studio-access] main > small {
  display: block;
  width: fit-content;
  padding: 6px 14px;
  border: 1px solid var(--brass-rim);
  border-radius: 4px;
  background: var(--surface-plaque);
  box-shadow: var(--control-shadow);
  color: var(--brass);
  font-family: var(--font-plate);
  font-size: 15px;
  letter-spacing: .12em;
}
body[data-studio-access] h1 { margin: 20px 0 16px; font-size: 44px; line-height: 1.15; color: var(--brass); }
body[data-studio-access] p { margin: 16px 0; color: var(--muted); }
body[data-studio-access] small { color: var(--muted); font-size: 13px; }
body[data-studio-access] #sessionStatus {
  padding: 14px 16px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--brass-rim);
  border-inline-start: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
}
body[data-studio-access] #sessionName { color: var(--text); }
body[data-studio-access] #sessionName:empty { display: none; }
body[data-studio-access] a { display: inline-block; color: var(--verdigris); text-underline-offset: .2em; padding-block: 10px; }
body[data-studio-access] button {
  min-height: 48px;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  box-shadow: var(--control-shadow);
  text-shadow: 0 1px var(--metal-shadow);
  line-height: 1.4;
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
body[data-studio-access] button:hover:not(:disabled) { background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom)); border-color: var(--brass); }
body[data-studio-access] button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--metal-shadow); }
body[data-studio-access] button:disabled { opacity: 1; color: var(--muted); background: var(--field); cursor: wait; }
body[data-studio-access] #sessionPrivate a {
  display: block;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--brass-rim);
  border-radius: 6px;
  background: var(--surface-control);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--control-shadow);
}
body[data-studio-access] #sessionPrivate #sessionLogout {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  text-shadow: none;
}
/* Reserve the existing pending-state slots before its session response arrives.
   Long names/errors can still grow: no fixed height or clipped live content. */
body[data-studio-access=waiting] main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 128px auto auto auto minmax(1.55em, auto) minmax(48px, auto);
  gap: 16px;
}
body[data-studio-access=waiting] main::before { grid-row: 1; margin: 0; }
body[data-studio-access=waiting] main > small { grid-row: 2; }
body[data-studio-access=waiting] h1 { grid-row: 3; margin: 0; }
body[data-studio-access=waiting] #sessionStatus { grid-row: 4; margin: 0; min-height: calc(3 * 1.55em + 30px); }
body[data-studio-access=waiting] #sessionName { grid-row: 5; margin: 0; }
body[data-studio-access=waiting] #sessionName:empty { display: block; }
body[data-studio-access=waiting] :is(#sessionLogin, #sessionLogout) { grid-row: 6; grid-column: 1; }
body[data-studio-access] :is(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
  body[data-studio-access] { padding: 28px 16px; }
  body[data-studio-access] main { padding: 28px 20px; }
  body[data-studio-access] main::before { height: 104px; margin-bottom: 20px; }
  body[data-studio-access=waiting] main { grid-template-rows: 104px auto auto auto minmax(1.55em, auto) minmax(48px, auto); }
  body[data-studio-access=waiting] main::before { margin: 0; }
  body[data-studio-access] h1 { font-size: 36px; }
  body[data-studio-access] #sessionStatus { padding: 12px; }
}
@media (max-width: 360px) {
  body[data-studio-access=waiting] #sessionStatus { min-height: calc(4 * 1.55em + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-studio-access] *, body[data-studio-access] *::before, body[data-studio-access] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  body[data-studio-access]::before, body[data-studio-access] main::before { display: none; }
  body[data-studio-access=waiting] main { display: block; }
  body[data-studio-access], body[data-studio-access] :is(main, #sessionStatus) { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-access] main > small { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-access] :is(h1, p, small) { color: CanvasText; text-shadow: none; }
  body[data-studio-access] a { color: LinkText; }
  body[data-studio-access] #sessionPrivate a { color: LinkText; background: Canvas; border-color: LinkText; box-shadow: none; }
  body[data-studio-access] #sessionPrivate #sessionLogout { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  body[data-studio-access] button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; text-shadow: none; }
  body[data-studio-access] button:disabled { color: GrayText; }
  body[data-studio-access] :is(a, button):focus-visible { outline-color: Highlight; }
}

/* D16: credit desks. Exact values and accounting stay in the existing scripts. */
/* Credit details occupy a row above the studio, not a fourth desktop column. */
body[data-studio-server] #sessionPrivate { flex-direction: column; }
#accountUsage.account-usage {
  margin: 12px 20px;
  padding: 18px;
  min-width: 0;
  border-radius: var(--plate-radius);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
}
#accountUsage > summary {
  padding: 6px 0;
  color: var(--brass);
  font: 500 25px/1.35 var(--font-plate);
  overflow-wrap: anywhere;
}
#accountUsage[open] > summary { padding-bottom: 14px; border-bottom: 1px solid var(--metal-edge); }
/* E10 G1: a closed ledger is one compact, accessible row. */
#accountUsage.account-usage:not([open]) { margin-block: 6px; padding: 4px 14px; }
#accountUsage:not([open]) > summary { min-height: 44px; padding: 7px 0; font-size: 22px; }
.studio-help { margin-block: 8px; color: var(--muted); font: 12px/1.6 var(--font-body); }
.studio-help > summary { min-height: 44px; padding-block: 12px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.studio-help > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.studio-help > p { margin-block: 8px; }
#photoCreation details.studio-help { margin-block: 4px; padding: 0; border: 0; background: none; box-shadow: none; }
#photoCreation details.studio-help > summary { padding-block: 8px; font: 12px/1.6 var(--font-body); color: var(--text); }
#photoCreation details.studio-help[open] > summary { margin-bottom: 0; }
@media (forced-colors: active) {
  .studio-help, .studio-help > summary { color: CanvasText; }
  .studio-help > summary:focus-visible { outline-color: Highlight; }
}
@media (min-width: 901px) {
  #accountUsage.account-usage { flex: none; max-height: 45dvh; overflow-y: auto; }
}
:is(#usageBalance, #adminUsageBalance, #billingBalance) {
  padding: 14px 16px;
  border: 1px solid var(--metal-edge);
  border-inline-start: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  color: var(--text);
  background: var(--field);
  box-shadow: inset 0 2px 5px var(--metal-shadow);
  font-size: 14px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#usageJobs, #adminUsageJobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 18px; }
:is(#accountUsage, #adminUsage) .usage-job { padding: 16px; }
:is(#accountUsage, #adminUsage) .usage-job > strong { display: block; color: var(--paper); font: 500 22px/1.4 var(--font-plate); }
:is(#accountUsage, #adminUsage) .usage-job :is(p, small) { color: var(--muted); font: 12px/1.75 var(--font-body); font-variant-numeric: tabular-nums; }
:is(#accountUsage, #adminUsage) .usage-job > div:not(:empty) { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--metal-edge); }
:is(#accountUsage, #adminUsage, #adminBilling) :is(p, small, strong, h2, h3, label, button) { overflow-wrap: anywhere; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) {
  min-width: 0;
  padding: 20px;
  margin-block: 24px;
  border: 1px solid var(--metal-edge);
  border-radius: var(--plate-radius);
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  box-shadow: var(--plate-shadow);
}
body[data-studio-admin] :is(#adminUsage, #adminBilling) h2 { margin-block: 0 16px; }
body[data-studio-admin] :is(#adminUsageBasis, #billingQuote) { padding: 12px; color: var(--muted); background: var(--field); border-radius: 6px; font-size: 12px; line-height: 1.75; }
body[data-studio-admin] #billingUser { color: var(--brass); overflow-wrap: anywhere; }
body[data-studio-admin] .billing-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 18px; }
body[data-studio-admin] .billing-form label { color: var(--muted); gap: 8px; font-size: 13px; }
body[data-studio-admin] .billing-form :is(input, select) {
  min-height: 44px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 5px var(--metal-shadow);
  font: 14px/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
}
body[data-studio-admin] .billing-form input::placeholder { color: var(--muted); opacity: 1; }
body[data-studio-admin] #creditTopup { padding: 16px; margin-block: 24px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 7px; }
body[data-studio-admin] #creditTopup h3 { margin: 0 0 12px; color: var(--brass); font-size: 24px; }
body[data-studio-admin] #billingMessage:not(:empty) { padding: 12px; background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); }
body[data-studio-admin] :is(#billingHistory, #billingLedger) { display: grid; gap: 10px; margin-block: 18px; }
body[data-studio-admin] :is(#billingHistory, #billingLedger) p { margin: 0; padding: 12px; color: var(--muted); background: var(--field); border: 1px solid var(--metal-edge); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
#gpuEstimateDialog {
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 3rem));
  color: var(--text);
  background: linear-gradient(180deg, var(--oxide-700), var(--panel));
  border: 1px solid var(--metal-edge);
  box-shadow: var(--plate-shadow), 0 18px 60px #0009;
  overflow-wrap: anywhere;
}
#gpuEstimateDialog::backdrop { background: #07110dd9; }
#gpuEstimateDialog h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.2; }
#gpuEstimateDialog label { display: block; margin-bottom: 8px; color: var(--muted); }
#gpuEstimateDialog select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--metal-edge); border-radius: 6px; color: var(--text); background: var(--field); font: inherit; }
#gpuEstimateText { padding: 14px; color: var(--text); background: var(--field); border-inline-start: 3px solid var(--brass); border-radius: 0 6px 6px 0; line-height: 1.75; font-variant-numeric: tabular-nums; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button, #gpuEstimateDialog button {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--text);
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  box-shadow: var(--control-shadow);
  font: 13px/1.5 var(--font-body);
  white-space: normal;
  max-width: 100%;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
#gpuEstimateDialog button { margin: 6px 8px 0 0; }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:hover:not(:disabled), #gpuEstimateDialog button:hover:not(:disabled) { background: linear-gradient(180deg, var(--control-hover-top), var(--control-bottom)); border-color: var(--brass); }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:active:not(:disabled), #gpuEstimateDialog button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--metal-shadow); }
body[data-studio-admin] :is(#adminUsage, #adminBilling) button:disabled, #gpuEstimateDialog button:disabled { opacity: 1; color: var(--muted); background: var(--field); cursor: wait; }
#accountUsage :is(summary, button):focus-visible, #gpuEstimateDialog :is(select, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 700px) {
  #usageJobs, #adminUsageJobs, body[data-studio-admin] .billing-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #accountUsage.account-usage { margin: 12px 8px; padding: 14px; }
  #accountUsage > summary { font-size: 23px; min-height: 44px; }
  body[data-studio-admin] :is(#adminUsage, #adminBilling) { padding: 14px; }
  body[data-studio-admin] #creditTopup { padding: 12px; }
  :is(#accountUsage, #adminUsage, #adminBilling) button { width: 100%; margin-inline: 0; }
  #gpuEstimateDialog button { width: 100%; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#accountUsage, #adminUsage, #adminBilling, #gpuEstimateDialog) *, #gpuEstimateDialog { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  #accountUsage.account-usage, body[data-studio-admin] :is(#adminUsage, #adminBilling, #creditTopup),
  :is(#usageBalance, #adminUsageBalance, #billingBalance, #adminUsageBasis, #billingQuote, #billingMessage, #gpuEstimateDialog, #gpuEstimateText),
  body[data-studio-admin] :is(#billingHistory, #billingLedger) p, :is(#accountUsage, #adminUsage) .usage-job {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none;
  }
  #accountUsage > summary, :is(#accountUsage, #adminUsage, #adminBilling, #gpuEstimateDialog) :is(h2, h3, p, small, strong, label) { color: CanvasText; text-shadow: none; }
  body[data-studio-admin] .billing-form :is(input, select), #gpuEstimateDialog select { color: FieldText; background: Field; border-color: FieldText; box-shadow: none; }
  body[data-studio-admin] :is(#adminUsage, #adminBilling) button, #gpuEstimateDialog button { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
  #accountUsage :is(summary, button):focus-visible, #gpuEstimateDialog :is(select, button):focus-visible { outline-color: Highlight; }
}

/* D17: a shared phone target floor. Existing controls keep their semantics;
   large navigation/creation controls and editors keep their existing sizes;
   timeline/crop handles retain their geometry and larger parent hit areas.
   Important overrides the legacy per-control height rules, only on phones. */
@media (max-width: 600px) {
  body:not([data-studio-access]) :is(button, summary, select, input):not(:is(
    input[type=checkbox], input[type=radio], input[type=range], input[type=hidden],
    .navigation nav button, .workflow-tabs button, .enqueue-handle, .dial,
    .mh-trim-handle, .mh-seam, .mh-crop-zone, .mh-crop-handle
  )) { min-height: 44px !important; }
  body summary { align-content: center; }
  .studio :is(.small-tabs, .image-search, .audio-library-row, .creative-head) { gap: 8px; }
  .studio :is(button:not(.mh-clip), summary) { overflow-wrap: anywhere; }
}

/* A2: use the desktop rail width on tablets too. The legacy 145px column
   left too little room beside icons and split Lithuanian words into fragments.
   Keep the type size, phone layout and flexible editor column unchanged. */
@media (min-width: 601px) and (max-width: 900px) {
  .studio, .studio.results-collapsed { grid-template-columns: 190px minmax(0, 1fr); }
  /* The replaced stacked pane must not anchor the document at its old offset. */
  :root { overflow-anchor: none; }
}

/* E10 G3: one form scale, aligned helpers and a Lithuanian native picker. */
:root { --heading-page: 28px; --heading-group: 23px; --heading-field: 20px; }
.creation-header h2, .workspace-header h2,
[data-page=tools] > .panel > h1, [data-page=system] > .panel > h1,
.workspace .mh-projects h2 {
  font: 500 var(--heading-page)/1.3 var(--font-plate);
}
[data-page=tools] > .panel > h1 { margin-block: 0 16px; }
#audioPromptPanel h2, .shared-gpu-queue h2 { font-size: var(--heading-group); }
#videoCreation .field-title, #photoCreation .field-title { font-size: var(--heading-field); }
:is(#photoCreation, #audioPromptPanel) .field-action-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; gap: 12px; margin-block: 12px;
}
:is(#photoCreation, #audioPromptPanel) .field-action-row > label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; line-height: 1.6;
}
:is(#photoCreation, #audioPromptPanel) .field-action-row > label > select { width: 100%; margin: 0; }
:is(#photoCreation, #audioPromptPanel) .field-action-row > button,
#videoCreation .enhancement-actions > button {
  margin: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere;
}
#videoCreation .enhancement-actions { align-items: start; gap: 12px; }
.studio-file-picker {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  width: 100%; max-width: 100%; min-width: 0; margin-block: 6px; padding: 8px;
  border: 1px solid var(--metal-edge); border-radius: 6px; background: var(--field);
}
.studio-file-picker > input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.studio-file-action {
  flex: 0 0 auto; padding: 9px 12px; min-height: 44px; border: 1px solid var(--metal-edge);
  border-radius: 5px; color: var(--text);
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  font: 500 19px/1.3 var(--font-plate); box-shadow: var(--control-shadow);
}
.studio-file-name { flex: 1 1 140px; min-width: 0; color: var(--muted); font: 13px/1.6 var(--font-body); overflow-wrap: anywhere; }
.studio-file-picker:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.studio-file-picker:has(input:disabled) { opacity: .5; }
.studio-file-picker > input:disabled { cursor: not-allowed; }
#videoCreation label.studio-file-field { display: block; margin-block: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.creation .launch-assembly { width: 100%; height: auto; min-height: 0; margin: 12px 0; }
#startQueue { width: 100%; min-height: 44px; padding: 10px 14px; }
#startQueue .lever-label { font: inherit; color: inherit; padding: 0; white-space: normal; }
@media (max-width: 600px) {
  :is(#photoCreation, #audioPromptPanel) .field-action-row { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .studio-file-picker, .studio-file-action { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .studio-file-name { color: CanvasText; }
  .studio-file-picker:focus-within { outline-color: Highlight; }
}


/* E10.5b.4 / G4: the frame, recessed work area and glass have separate surfaces.
   No new textures, requests, animation or data-derived decoration. */
:root {
  --signal-idle: #52645b;
  --signal-queued: #ffb347;
  --signal-running: #de5042;
  --signal-done: #6dff9e;
  --signal-halo: 8px;
  --glass-reflection: #ecfff04d;
}
:root[data-theme=light] {
  --signal-idle: #758477;
  --glass-reflection: #ffffffa6;
}
.studio > .creation {
  --metal-surface: var(--surface-panel);
}

/* E11.2: the original enqueue action has a trough and its live instruments.
   The footer remains in the existing desktop grid, reachable without scrolling. */
#videoCreation .output-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.creation-console { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.creation-action {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0;
  padding: 8px; border: 2px solid var(--brass-rim); border-radius: 8px;
  background: var(--surface-recess); box-shadow: var(--plate-shadow);
}
#videoCreation .creation-action #rec { width: 100%; min-width: 240px; min-height: 112px; align-self: center; font-size: 22px; }
.creation-price, .creation-job-status { margin: 0; color: var(--text); text-align: center; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.creation-price { font-weight: 650; }
.creation-lab { min-width: 0; }
.creation-readings { display: grid; gap: 7px; }
.creation-readings .b1-meter { gap: 8px; }
.creation-readings .b1-meter svg { width: 38px; height: 38px; flex-basis: 38px; }
.creation-readings .b1-meter figcaption { gap: 1px; font-size: 13px; }
.creation-readings .b1-scale { font-size: 11px; }
.creation-readings .b1-reading { color: var(--paper); font-weight: 650; }
.creation-gpu-lamp { display: block; flex: 0 0 12px; width: 12px; height: 18px; border: 2px solid var(--brass-rim); border-radius: 7px 7px 3px 3px; background: var(--muted); }
.creation-lab[data-gpu=sleeping] .creation-gpu-lamp { background: var(--muted); }
.creation-lab[data-gpu=starting] .creation-gpu-lamp { background: #ffb347; box-shadow: 0 0 9px #ffb34766; }
.creation-lab[data-gpu=working] .creation-gpu-lamp { background: #65d992; box-shadow: 0 0 9px #65d99266; }
.creation-vials { gap: 8px; margin: 8px 0 0; max-height: 104px; overflow-y: auto; }
.creation-vials .b1-vial { width: 82px; flex-direction: row; gap: 5px; align-items: center; text-align: left; }
.creation-vials .b1-glass { width: 22px; height: 46px; flex: 0 0 22px; border-top-width: 4px; border-bottom-width: 5px; }
.creation-vials .b1-glass::after { left: 3px; width: 2px; }
.creation-vials .b1-bubble { left: 5px; width: 3px; height: 3px; }
.creation-vials .b1-bubble:nth-child(3), .creation-vials .b1-bubble:nth-child(4) { left: 10px; width: 3px; height: 3px; }
.creation-vials .b1-vial figcaption { font-size: 11px; gap: 2px; }
.creation-empty { margin: 0; color: var(--muted); font-size: 12px; }
#videoCreation .dial-values { font-size: 13px; gap: 3px 7px; }
#videoCreation .dial-values .selected { padding-inline: 5px; border: 1px solid var(--brass-rim); border-radius: 3px; background: var(--field); }
@media (max-width: 1150px) {
  .creation-console { grid-template-columns: minmax(0, 1fr); }
  .creation-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-readings .b1-meter:last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #videoCreation .creation-action #rec { min-width: min(280px, 100%); }
  .creation-readings .b1-scale { display: none; }
}
@media (forced-colors: active) {
  .creation-action { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .creation-gpu-lamp { display: none; }
  .creation-readings .b1-reading, .creation-price, .creation-job-status, .creation-empty { color: CanvasText; }
  #videoCreation .dial-values .selected { border-color: Highlight; }
}
.studio > .workspace {
  --metal-surface: var(--surface-panel);
}
.prompt-editors > div, .photo-editors > div,
body[data-view=tools] [data-page=tools] > .panel,
.shared-gpu-queue {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--recess-shadow);
}
/* Native fields remain the sole editor; the inset is only paint. */
textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=file]) {
  box-shadow: var(--field-shadow);
}
.shared-gpu-queue .b1-vials {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tray) 92%, #000), var(--tray));
  box-shadow: inset 0 3px 7px var(--metal-shadow), inset 0 -1px var(--metal-highlight);
}
/* The brand bulb has no telemetry. Only the adjacent API-backed lamp reports a job. */
.brand-title .indicator { color: var(--brass); filter: none; text-shadow: none; }
.brand-title .indicator .ph-duotone { color: inherit; }
body[data-b1-state] .b1-lamp {
  --lamp-lit: var(--signal-idle);
  --lamp-halo: transparent;
  border-radius: 9px 9px 3px 3px;
  background: radial-gradient(ellipse at 32% 22%, #fff9, transparent 32%),
    linear-gradient(90deg, #0003, transparent 35% 65%, #0004), var(--lamp-lit);
  box-shadow: inset 0 0 5px #0008, inset 0 1px #fff4,
    0 0 var(--signal-halo) var(--lamp-halo), 0 2px 3px var(--metal-shadow);
}
body[data-b1-state=queued] .b1-lamp { --lamp-lit: var(--signal-queued); --lamp-halo: #ffb3474d; }
body[data-b1-state=running] .b1-lamp { --lamp-lit: var(--signal-running); --lamp-halo: #de50424d; }
body[data-b1-state=succeeded] .b1-lamp { --lamp-lit: var(--signal-done); --lamp-halo: #6dff9e4d; }
body[data-b1-state=failed] .b1-lamp { --lamp-lit: var(--signal-running); }
body:is([data-b1-state=offline], [data-b1-state=canceled], [data-b1-state=canceling]) .b1-lamp { border-style: dashed; }
.b1-glass, .shared-gpu-queue .b1-glass {
  border-color: var(--brass-dark);
  background: linear-gradient(90deg, #05151059, var(--glass-reflection) 12%,
    #d9eee50a 27% 65%, var(--glass-reflection) 88%, #05151059);
  box-shadow: inset 0 0 0 1px #e6dcc666, inset -4px 0 7px #0004,
    0 1px 0 var(--metal-highlight), 0 5px 8px var(--metal-shadow);
}
.b1-glass::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass) 30%, var(--brass-dark));
  z-index: 1; pointer-events: none;
}
.b1-glass::after {
  inset: 7px auto 7px 7px; width: 4px;
  background: linear-gradient(180deg, #fff8, #fff2 55%, #fff5);
  box-shadow: 30px 0 0 -1px #fff2;
  z-index: 1; pointer-events: none;
}
.b1-vial[data-loaded=true] .b1-glass,
.shared-gpu-queue .b1-vial[data-loaded=true] .b1-glass {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px #ffb34766, inset -4px 0 7px #0004,
    0 0 var(--signal-halo) #ffb34733, 0 5px 8px var(--metal-shadow);
}
.b1-liquid {
  background: linear-gradient(90deg, #6b0f17, #a9363bd9 28%, #9a2530d9 68%, #6b0f17);
}
@media (forced-colors: active) {
  .studio > :is(.creation, .workspace), .prompt-editors > div, .photo-editors > div,
  body[data-view=tools] [data-page=tools] > .panel, .shared-gpu-queue,
  .shared-gpu-queue .b1-vials { background: Canvas; box-shadow: none; border-color: CanvasText; }
  .brand-title .indicator { color: CanvasText; }
  .brand h1, .creation-header h2, .workspace-header h2 {
    background: Canvas; color: CanvasText; box-shadow: none;
  }
  .workflow-tabs button + button, .mode-tabs:not(.model-picker) button + button,
  .creativity-row button + button, .workspace-tabs button + button { border-inline-start-color: CanvasText; }
  textarea, select, input:not([type=checkbox]):not([type=hidden]):not([type=file]) { box-shadow: none; }
}

/* E10 G5: spend phone space on the editor, keeping every label and hit area.
   Native disclosure state, draft values and desktop/tablet geometry stay intact. */
@media (max-width: 600px) {
  .navigation { gap: 8px; padding: 10px 12px; }
  .navigation .brand { padding-block: 0 8px; }
  .navigation nav { margin-block: 0; }
  .navigation :is(.sidebar-models, .sidebar-bottom) { padding-top: 8px; }
  .navigation .sidebar-bottom { margin-top: 0; }
  .navigation .sidebar-models .section-label { margin-bottom: 6px; }

  #videoCreation .workflow-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px; margin-bottom: 8px;
  }
  #videoCreation .workflow-tabs button {
    flex-direction: row; min-height: 44px; padding: 8px 6px;
    gap: 8px; line-height: 1.3;
  }
  #videoCreation .workflow-tabs button:nth-child(3) { grid-column: 1 / -1; }
  #videoCreation .workflow-tabs button span { overflow-wrap: normal; }
  #videoCreation :is(.generation-details, #wanControls, #promptBatch, .generation-notes) {
    margin-block: 8px; padding: 6px 10px;
  }
  #videoCreation .prompt-editors { gap: 8px; }
  #videoCreation .output-actions { margin-block: 8px; }

  [data-page=gallery] .gallery-toolbar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px;
  }
  [data-page=gallery] .gallery-toolbar .small-tabs { grid-column: 1 / -1; }
  [data-page=gallery] #imageCollection { grid-column: 2; grid-row: 2; }
  [data-page=gallery] #reloadImages { grid-column: 1; grid-row: 2; margin: 0; }
  [data-page=gallery] .image-search {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; margin-block: 8px;
  }
  [data-page=gallery] .image-search label { grid-column: 1 / -1; }
  [data-page=gallery] .image-search input { width: 100%; }
  [data-page=gallery] .image-search .job-action { margin: 0; }
  [data-page=gallery] .image-search #imageSearchClear { grid-column: 1 / -1; }
}

/* E11.7: a compact phone rail leaves the first editor in the opening frame.
   All original controls and labels remain in DOM/keyboard order; no sticky
   action covers fields, errors or the on-screen keyboard. */
@media (max-width: 600px) {
  .navigation {
    display: grid; grid-template-columns: minmax(0, 1fr) 126px;
    gap: 6px; padding: 8px;
  }
  .navigation .brand { grid-row: 1; grid-column: 1; padding: 0; }
  .navigation .brand-title h1 { font-size: 24px; }
  .navigation .brand p { margin-top: 3px; }
  .navigation nav { grid-row: 2; grid-column: 1 / -1; gap: 4px; }
  .navigation nav .nav-button {
    min-height: 48px; padding: 5px 3px; gap: 3px;
    display: block; font-size: 17px;
  }
  .navigation nav .nav-button > .ph-duotone { font-size: 18px; margin-right: 3px; }
  .navigation nav .nav-count:not([hidden]) { display: block; line-height: 1.4; }
  .navigation .sidebar-models { grid-row: 3; grid-column: 1 / -1; padding: 0; }
  .navigation .sidebar-bottom { display: contents; }
  .navigation .sidebar-bottom .theme-switch {
    grid-row: 1; grid-column: 2; margin: 0; padding: 4px;
    justify-content: center; gap: 4px; font-size: 13px;
  }
  .navigation .sidebar-bottom #modelStorage { grid-row: 4; grid-column: 1 / -1; }
  .studio > .creation { padding: 12px 6px; }
  /* The plaque's inner spacing supplies this gap without pushing the editor down. */
  .creation .creation-header { margin-bottom: 0; }
  #videoCreation .generation-details { padding-block: 0; }
  #videoCreation .prompt-editors { margin-top: 8px; }
  #videoCreation .workflow-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 3px; }
  #videoCreation .workflow-tabs button { grid-column: span 2; gap: 4px; padding-inline: 3px; }
  #videoCreation .workflow-tabs button:nth-child(-n+2) { grid-column: span 3; }
  #videoCreation .workflow-tabs button:nth-child(3) { grid-column: span 2; }
  #videoCreation .prompt-editors > div { padding: 8px; }
  #videoCreation .creation-action { padding: 4px; border-width: 1px; }
  #videoCreation .creation-action #rec { min-width: 280px; }
  .creation-console { gap: 8px; }
  .creation-lab .creation-readings { gap: 6px; }
}

/* E11.3: paint the original native fields. No proxy controls, DOM moves or
   handlers: options, multi-select, file chooser and editing keep their contract. */
:root { --surface-notes: linear-gradient(180deg, #13271f, #182d25); }
:root[data-theme=light] { --surface-notes: linear-gradient(180deg, #f6eed7, #eee5ca); }
select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
  appearance: none;
  border-color: var(--brass-rim) !important;
  padding-inline-end: max(32px, 2.6em) !important;
  background-color: var(--field) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
    linear-gradient(135deg, var(--brass) 50%, transparent 50%), var(--surface-recess) !important;
  background-position: right 18px center, right 13px center, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--recess-shadow);
}
/* Listboxes retain their native rows and selection feedback; no fake arrow. */
select[multiple], select[size]:not([size="1"]) { border-color: var(--brass-rim); }
.studio-file-picker {
  border-color: var(--brass-rim);
  background: var(--surface-recess);
  box-shadow: var(--recess-shadow);
}
.studio-file-action { border-color: var(--brass-rim); }
textarea {
  background: var(--surface-notes) !important;
  border-inline-start: 3px solid var(--brass-rim);
  box-shadow: var(--recess-shadow);
  font-size: 16px !important;
  line-height: 1.6;
  caret-color: var(--text);
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
    appearance: auto;
    background: Field !important; color: FieldText;
    border-color: FieldText !important; box-shadow: none;
  }
  textarea { background: Field !important; color: FieldText; border-color: FieldText; box-shadow: none; }
  .studio-file-picker, .studio-file-action {
    background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none;
  }
}

/* E11.4: readable body copy; optional technical prose lives in native details. */
body { font-size: 15px; line-height: 1.5; }
.studio :is(.hint, small, p[role=status], p[role=alert], .job-error,
  .generation-notes, .creation-empty, .b1-job-indicator,
  .b1-meter figcaption, .b1-vial figcaption, .b1-vial small, .b1-scale,
  .status-copy, .status-copy > p, .usage-job p, .account p),
body[data-studio-admin] :is(.hint, small, table, .billing-form label, #billingHistory p, #billingLedger p) {
  font-size: 13px;
  line-height: 1.5;
}
.studio .hint, .studio small { font-size: 13px !important; }
#videoCreation :is(.last-frame-option, .video-seed-row, .generation-settings label) { font-size: 15px; }
#videoCreation .generation-notes { color: var(--text); }
#videoCreation .generation-notes > summary { min-height: 44px; }
#videoCreation .generation-notes > .hint { display: block; margin-block: 10px; }

/* E11.5: one compact brass account plaque; errors remain a full visible row. */
body[data-studio-server] .studio-account {
  padding: 6px 16px;
  gap: 4px 14px;
  font-size: 15px;
  border: 1px solid var(--brass-rim);
  background: var(--surface-plaque);
  box-shadow: var(--plate-shadow);
}
body[data-studio-server] .studio-account #sessionName {
  margin: 0 auto 0 0;
  flex: 1 1 0;
  max-width: none;
  color: var(--paper);
}
.session-credit {
  min-width: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body[data-studio-server] .studio-account :is(button, a) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body[data-studio-server] .studio-account #sessionStatus { flex: 1 1 100%; }
@media (min-width: 901px) {
  /* Prevent intrinsic content sizing below the account plaque. */
  body[data-studio-server] .studio { width: 100%; margin-inline: 0; }
}
@media (max-width: 600px) {
  body[data-studio-server] .studio-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px 12px;
    gap: 2px 10px;
    font-size: 13px;
  }
  body[data-studio-server] .studio-account #sessionName { grid-column: 1; grid-row: 1; }
  .session-credit { grid-column: 2; grid-row: 1; max-width: 55vw; line-height: 1.4; }
  body[data-studio-server] .studio-account #sessionLogout { grid-column: 2; grid-row: 2; justify-self: end; }
  body[data-studio-server] .studio-account a { grid-column: 1; }
  body[data-studio-server] .studio-account #sessionStatus { grid-column: 1 / -1; grid-row: 3; }
  body[data-studio-server][data-studio-role=admin] .studio-account { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionName { grid-column: 1 / -1; }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionLogout { grid-column: 3; }
  body[data-studio-server][data-studio-role=admin] .studio-account #sessionAdmin { grid-column: 2; grid-row: 2; }
}
@media (forced-colors: active) {
  body[data-studio-server] .studio-account { background: Canvas; border-color: CanvasText; box-shadow: none; }
  body[data-studio-server] .studio-account :is(#sessionName, .session-credit) { color: CanvasText; }
}

/* E11.9: the same casing, recessed bench and brass plaques on every view.
   Paint only: native disclosure, table scrolling and live readings stay intact. */
body[data-studio-admin] main {
  border-color: var(--brass-rim);
  background:
    var(--rivet) 7px 7px / 12px 12px no-repeat,
    var(--rivet) calc(100% - 7px) 7px / 12px 12px no-repeat,
    repeating-linear-gradient(100deg, transparent 0 3px, var(--metal-grain) 3px 4px),
    var(--surface-shell);
  box-shadow: var(--plate-shadow);
}
.gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination),
#imageDeleteControls, #imageDetails, .photo-variant-group,
[data-page=queue] > .panel, .workspace .mh-projects, #accountUsage.account-usage,
body[data-studio-admin] :is(#adminUsage, #adminBilling, .plan-table) {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--recess-shadow);
}
:is(.image-card, .photo-variant-card), [data-page=queue] #jobs > .job,
:is(#accountUsage, #adminUsage) .usage-job, body[data-studio-admin] .account {
  background: var(--surface-panel);
  border-color: var(--brass-rim);
  box-shadow: var(--plate-shadow);
}
[data-page=queue] #jobs > .queue-job > summary,
.shared-gpu-queue h2, .workspace .mh-projects h2,
body[data-view=tools] #cpuProcessingTitle,
#accountUsage > summary, body[data-studio-admin] :is(h1, #adminUsage > h2, #adminBilling > h2, .account h2) {
  padding: 8px 12px;
  color: var(--paper);
  background: var(--surface-plaque);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--brass-rim), inset 0 2px var(--brass-reflection), 0 2px 4px var(--metal-shadow);
  overflow-wrap: anywhere;
}
body[data-studio-admin] :is(.tools, #creditTopup, #billingHistory p, #billingLedger p) {
  background: var(--surface-recess);
  border-color: var(--brass-rim);
  box-shadow: var(--field-shadow);
}
.workspace .mh-projects :is(label, .hint),
[data-page=queue] #jobs .personal-queue-info,
:is(#accountUsage, #adminUsage) .usage-job :is(p, small) { font-size: 13px; }
body[data-studio-admin] :is(button, select),
[data-page=gallery] :is(.image-search, .image-pagination) .job-action { min-height: 44px; }
@media (forced-colors: active) {
  body[data-studio-admin] :is(main, h1, h2, .account, .tools, #adminUsage, #adminBilling, .plan-table, #creditTopup, #billingHistory p, #billingLedger p),
  .gallery-toolbar, [data-page=gallery] :is(.image-search, .image-pagination),
  #imageDeleteControls, #imageDetails, .photo-variant-group, .image-card, .photo-variant-card,
  [data-page=queue] > .panel, [data-page=queue] #jobs > .job, [data-page=queue] #jobs > .queue-job > summary,
  .shared-gpu-queue h2, .workspace .mh-projects, .workspace .mh-projects h2,
  body[data-view=tools] #cpuProcessingTitle, #accountUsage.account-usage, #accountUsage > summary,
  :is(#accountUsage, #adminUsage) .usage-job {
    color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; text-shadow: none;
  }
}