@font-face{font-display:swap;font-family:red hat text;font-style:normal;font-weight:300;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-300.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:italic;font-weight:300;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-300italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:normal;font-weight:400;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-regular.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:italic;font-weight:400;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:normal;font-weight:500;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-500.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:italic;font-weight:500;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-500italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:normal;font-weight:600;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-600.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:italic;font-weight:600;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-600italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:normal;font-weight:700;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-700.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat text;font-style:italic;font-weight:700;src:url(/fonts/red-hat-text/red-hat-text-v18-latin-700italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:normal;font-weight:300;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-300.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:italic;font-weight:300;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-300italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:normal;font-weight:400;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-regular.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:italic;font-weight:400;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:normal;font-weight:500;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-500.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:italic;font-weight:500;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-500italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:normal;font-weight:600;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-600.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:italic;font-weight:600;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-600italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:normal;font-weight:700;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-700.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat mono;font-style:italic;font-weight:700;src:url(/fonts/red-hat-mono/red-hat-mono-v16-latin-700italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:300;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-300.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:300;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-300italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:400;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-regular.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:400;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:500;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-500.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:500;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-500italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:600;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-600.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:600;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-600italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:700;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-700.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:700;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-700italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:800;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-800.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:800;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-800italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:normal;font-weight:900;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-900.woff2)format("woff2")}@font-face{font-display:swap;font-family:red hat display;font-style:italic;font-weight:900;src:url(/fonts/red-hat-display/red-hat-display-v21-latin-900italic.woff2)format("woff2")}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:700;src:url(/fonts/barlow-condensed/barlow-condensed-v13-latin-700.woff2)format("woff2")}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:800;src:url(/fonts/barlow-condensed/barlow-condensed-v13-latin-800.woff2)format("woff2")}@font-face{font-display:swap;font-family:barlow condensed;font-style:normal;font-weight:900;src:url(/fonts/barlow-condensed/barlow-condensed-v13-latin-900.woff2)format("woff2")}@font-face{font-display:swap;font-family:saira condensed;font-style:normal;font-weight:700;src:url(/fonts/saira-condensed/saira-condensed-v12-latin-700.woff2)format("woff2")}@font-face{font-display:swap;font-family:saira condensed;font-style:normal;font-weight:800;src:url(/fonts/saira-condensed/saira-condensed-v12-latin-800.woff2)format("woff2")}@font-face{font-display:swap;font-family:saira condensed;font-style:normal;font-weight:900;src:url(/fonts/saira-condensed/saira-condensed-v12-latin-900.woff2)format("woff2")}html{font-family:var(--font-sans);scroll-behavior:smooth}h1,h2,h3,h4,h5{font-family:var(--font-heading)}:root{--text-xs:0.8rem;--text-2xs:0.75rem;--color-gold-50:#fcfcea;--color-gold-100:#faf9c7;--color-gold-200:#f6ef92;--color-gold-300:#f0df54;--color-gold-400:#eacc25;--color-gold-500:#dab518;--color-gold-600:#b48811;--color-gold-700:#966712;--color-gold-800:#7d5216;--color-gold-900:#6a4319;--color-gold-950:#3e240a;--color-red-50:oklch(0.971 0.013 17.38);--color-red-100:oklch(0.936 0.032 17.717);--color-red-200:oklch(0.885 0.062 18.334);--color-red-300:oklch(0.808 0.114 19.571);--color-red-400:oklch(0.704 0.191 22.216);--color-red-500:oklch(0.637 0.237 25.331);--color-red-600:oklch(0.577 0.245 27.325);--color-red-700:oklch(0.505 0.213 27.518);--color-red-800:oklch(0.444 0.177 26.899);--color-red-900:oklch(0.396 0.141 25.723);--color-red-950:oklch(0.258 0.092 26.042);--color-orange-50:oklch(0.98 0.016 73.684);--color-orange-100:oklch(0.954 0.038 75.164);--color-orange-200:oklch(0.901 0.076 70.697);--color-orange-300:oklch(0.837 0.128 66.29);--color-orange-400:oklch(0.75 0.183 55.934);--color-orange-500:oklch(0.705 0.213 47.604);--color-orange-600:oklch(0.646 0.222 41.116);--color-orange-700:oklch(0.553 0.195 38.402);--color-orange-800:oklch(0.47 0.157 37.304);--color-orange-900:oklch(0.408 0.123 38.172);--color-orange-950:oklch(0.266 0.079 36.259);--color-amber-50:oklch(0.987 0.022 95.277);--color-amber-100:oklch(0.962 0.059 95.617);--color-amber-200:oklch(0.924 0.12 95.746);--color-amber-300:oklch(0.879 0.169 91.605);--color-amber-400:oklch(0.828 0.189 84.429);--color-amber-500:oklch(0.769 0.188 70.08);--color-amber-600:oklch(0.666 0.179 58.318);--color-amber-700:oklch(0.555 0.163 48.998);--color-amber-800:oklch(0.473 0.137 46.201);--color-amber-900:oklch(0.414 0.112 45.904);--color-amber-950:oklch(0.279 0.077 45.635);--color-yellow-50:oklch(0.987 0.026 102.212);--color-yellow-100:oklch(0.973 0.071 103.193);--color-yellow-200:oklch(0.945 0.129 101.54);--color-yellow-300:oklch(0.905 0.182 98.111);--color-yellow-400:oklch(0.852 0.199 91.936);--color-yellow-500:oklch(0.795 0.184 86.047);--color-yellow-600:oklch(0.681 0.162 75.834);--color-yellow-700:oklch(0.554 0.135 66.442);--color-yellow-800:oklch(0.476 0.114 61.907);--color-yellow-900:oklch(0.421 0.095 57.708);--color-yellow-950:oklch(0.286 0.066 53.813);--color-lime-50:oklch(0.986 0.031 120.757);--color-lime-100:oklch(0.967 0.067 122.328);--color-lime-200:oklch(0.938 0.127 124.321);--color-lime-300:oklch(0.897 0.196 126.665);--color-lime-400:oklch(0.841 0.238 128.85);--color-lime-500:oklch(0.768 0.233 130.85);--color-lime-600:oklch(0.648 0.2 131.684);--color-lime-700:oklch(0.532 0.157 131.589);--color-lime-800:oklch(0.453 0.124 130.933);--color-lime-900:oklch(0.405 0.101 131.063);--color-lime-950:oklch(0.274 0.072 132.109);--color-green-50:oklch(0.982 0.018 155.826);--color-green-100:oklch(0.962 0.044 156.743);--color-green-200:oklch(0.925 0.084 155.995);--color-green-300:oklch(0.871 0.15 154.449);--color-green-400:oklch(0.792 0.209 151.711);--color-green-500:oklch(0.723 0.219 149.579);--color-green-600:oklch(0.627 0.194 149.214);--color-green-700:oklch(0.527 0.154 150.069);--color-green-800:oklch(0.448 0.119 151.328);--color-green-900:oklch(0.393 0.095 152.535);--color-green-950:oklch(0.266 0.065 152.934);--color-emerald-50:oklch(0.979 0.021 166.113);--color-emerald-100:oklch(0.95 0.052 163.051);--color-emerald-200:oklch(0.905 0.093 164.15);--color-emerald-300:oklch(0.845 0.143 164.978);--color-emerald-400:oklch(0.765 0.177 163.223);--color-emerald-500:oklch(0.696 0.17 162.48);--color-emerald-600:oklch(0.596 0.145 163.225);--color-emerald-700:oklch(0.508 0.118 165.612);--color-emerald-800:oklch(0.432 0.095 166.913);--color-emerald-900:oklch(0.378 0.077 168.94);--color-emerald-950:oklch(0.262 0.051 172.552);--color-teal-50:oklch(0.984 0.014 180.72);--color-teal-100:oklch(0.953 0.051 180.801);--color-teal-200:oklch(0.91 0.096 180.426);--color-teal-300:oklch(0.855 0.138 181.071);--color-teal-400:oklch(0.777 0.152 181.912);--color-teal-500:oklch(0.704 0.14 182.503);--color-teal-600:oklch(0.6 0.118 184.704);--color-teal-700:oklch(0.511 0.096 186.391);--color-teal-800:oklch(0.437 0.078 188.216);--color-teal-900:oklch(0.386 0.063 188.416);--color-teal-950:oklch(0.277 0.046 192.524);--color-cyan-50:oklch(0.984 0.019 200.873);--color-cyan-100:oklch(0.956 0.045 203.388);--color-cyan-200:oklch(0.917 0.08 205.041);--color-cyan-300:oklch(0.865 0.127 207.078);--color-cyan-400:oklch(0.789 0.154 211.53);--color-cyan-500:oklch(0.715 0.143 215.221);--color-cyan-600:oklch(0.609 0.126 221.723);--color-cyan-700:oklch(0.52 0.105 223.128);--color-cyan-800:oklch(0.45 0.085 224.283);--color-cyan-900:oklch(0.398 0.07 227.392);--color-cyan-950:oklch(0.302 0.056 229.695);--color-sky-50:oklch(0.977 0.013 236.62);--color-sky-100:oklch(0.951 0.026 236.824);--color-sky-200:oklch(0.901 0.058 230.902);--color-sky-300:oklch(0.828 0.111 230.318);--color-sky-400:oklch(0.746 0.16 232.661);--color-sky-500:oklch(0.685 0.169 237.323);--color-sky-600:oklch(0.588 0.158 241.966);--color-sky-700:oklch(0.5 0.134 242.749);--color-sky-800:oklch(0.443 0.11 240.79);--color-sky-900:oklch(0.391 0.09 240.876);--color-sky-950:oklch(0.293 0.066 243.157);--color-blue-50:oklch(0.97 0.014 254.604);--color-blue-100:oklch(0.932 0.032 255.585);--color-blue-200:oklch(0.882 0.059 254.128);--color-blue-300:oklch(0.809 0.105 251.813);--color-blue-400:oklch(0.707 0.165 254.624);--color-blue-500:oklch(0.623 0.214 259.815);--color-blue-600:oklch(0.546 0.245 262.881);--color-blue-700:oklch(0.488 0.243 264.376);--color-blue-800:oklch(0.424 0.199 265.638);--color-blue-900:oklch(0.379 0.146 265.522);--color-blue-950:oklch(0.282 0.091 267.935);--color-indigo-50:oklch(0.962 0.018 272.314);--color-indigo-100:oklch(0.93 0.034 272.788);--color-indigo-200:oklch(0.87 0.065 274.039);--color-indigo-300:oklch(0.785 0.115 274.713);--color-indigo-400:oklch(0.673 0.182 276.935);--color-indigo-500:oklch(0.585 0.233 277.117);--color-indigo-600:oklch(0.511 0.262 276.966);--color-indigo-700:oklch(0.457 0.24 277.023);--color-indigo-800:oklch(0.398 0.195 277.366);--color-indigo-900:oklch(0.359 0.144 278.697);--color-indigo-950:oklch(0.257 0.09 281.288);--color-violet-50:oklch(0.969 0.016 293.756);--color-violet-100:oklch(0.943 0.029 294.588);--color-violet-200:oklch(0.894 0.057 293.283);--color-violet-300:oklch(0.811 0.111 293.571);--color-violet-400:oklch(0.702 0.183 293.541);--color-violet-500:oklch(0.606 0.25 292.717);--color-violet-600:oklch(0.541 0.281 293.009);--color-violet-700:oklch(0.491 0.27 292.581);--color-violet-800:oklch(0.432 0.232 292.759);--color-violet-900:oklch(0.38 0.189 293.745);--color-violet-950:oklch(0.283 0.141 291.089);--color-purple-50:oklch(0.977 0.014 308.299);--color-purple-100:oklch(0.946 0.033 307.174);--color-purple-200:oklch(0.902 0.063 306.703);--color-purple-300:oklch(0.827 0.119 306.383);--color-purple-400:oklch(0.714 0.203 305.504);--color-purple-500:oklch(0.627 0.265 303.9);--color-purple-600:oklch(0.558 0.288 302.321);--color-purple-700:oklch(0.496 0.265 301.924);--color-purple-800:oklch(0.438 0.218 303.724);--color-purple-900:oklch(0.381 0.176 304.987);--color-purple-950:oklch(0.291 0.149 302.717);--color-fuchsia-50:oklch(0.977 0.017 320.058);--color-fuchsia-100:oklch(0.952 0.037 318.852);--color-fuchsia-200:oklch(0.903 0.076 319.62);--color-fuchsia-300:oklch(0.833 0.145 321.434);--color-fuchsia-400:oklch(0.74 0.238 322.16);--color-fuchsia-500:oklch(0.667 0.295 322.15);--color-fuchsia-600:oklch(0.591 0.293 322.896);--color-fuchsia-700:oklch(0.518 0.253 323.949);--color-fuchsia-800:oklch(0.452 0.211 324.591);--color-fuchsia-900:oklch(0.401 0.17 325.612);--color-fuchsia-950:oklch(0.293 0.136 325.661);--color-pink-50:oklch(0.971 0.014 343.198);--color-pink-100:oklch(0.948 0.028 342.258);--color-pink-200:oklch(0.899 0.061 343.231);--color-pink-300:oklch(0.823 0.12 346.018);--color-pink-400:oklch(0.718 0.202 349.761);--color-pink-500:oklch(0.656 0.241 354.308);--color-pink-600:oklch(0.592 0.249 0.584);--color-pink-700:oklch(0.525 0.223 3.958);--color-pink-800:oklch(0.459 0.187 3.815);--color-pink-900:oklch(0.408 0.153 2.432);--color-pink-950:oklch(0.284 0.109 3.907);--color-rose-50:oklch(0.969 0.015 12.422);--color-rose-100:oklch(0.941 0.03 12.58);--color-rose-200:oklch(0.892 0.058 10.001);--color-rose-300:oklch(0.81 0.117 11.638);--color-rose-400:oklch(0.712 0.194 13.428);--color-rose-500:oklch(0.645 0.246 16.439);--color-rose-600:oklch(0.586 0.253 17.585);--color-rose-700:oklch(0.514 0.222 16.935);--color-rose-800:oklch(0.455 0.188 13.697);--color-rose-900:oklch(0.41 0.159 10.272);--color-rose-950:oklch(0.271 0.105 12.094);--color-slate-50:oklch(0.984 0.003 247.858);--color-slate-100:oklch(0.968 0.007 247.896);--color-slate-200:oklch(0.929 0.013 255.508);--color-slate-300:oklch(0.869 0.022 252.894);--color-slate-400:oklch(0.704 0.04 256.788);--color-slate-500:oklch(0.554 0.046 257.417);--color-slate-600:oklch(0.446 0.043 257.281);--color-slate-700:oklch(0.372 0.044 257.287);--color-slate-800:oklch(0.279 0.041 260.031);--color-slate-900:oklch(0.208 0.042 265.755);--color-slate-950:oklch(0.129 0.042 264.695);--color-gray-50:oklch(0.985 0.002 247.839);--color-gray-100:oklch(0.967 0.003 264.542);--color-gray-200:oklch(0.928 0.006 264.531);--color-gray-300:oklch(0.872 0.01 258.338);--color-gray-400:oklch(0.707 0.022 261.325);--color-gray-500:oklch(0.551 0.027 264.364);--color-gray-600:oklch(0.446 0.03 256.802);--color-gray-700:oklch(0.373 0.034 259.733);--color-gray-800:oklch(0.278 0.033 256.848);--color-gray-900:oklch(0.21 0.034 264.665);--color-gray-950:oklch(0.13 0.028 261.692);--color-zinc-50:oklch(0.985 0 0);--color-zinc-100:oklch(0.967 0.001 286.375);--color-zinc-200:oklch(0.92 0.004 286.32);--color-zinc-300:oklch(0.871 0.006 286.286);--color-zinc-400:oklch(0.705 0.015 286.067);--color-zinc-500:oklch(0.552 0.016 285.938);--color-zinc-600:oklch(0.442 0.017 285.786);--color-zinc-700:oklch(0.37 0.013 285.805);--color-zinc-800:oklch(0.274 0.006 286.033);--color-zinc-900:oklch(0.21 0.006 285.885);--color-zinc-950:oklch(0.141 0.005 285.823);--color-neutral-50:oklch(0.985 0 0);--color-neutral-100:oklch(0.97 0 0);--color-neutral-200:oklch(0.922 0 0);--color-neutral-300:oklch(0.87 0 0);--color-neutral-400:oklch(0.708 0 0);--color-neutral-500:oklch(0.556 0 0);--color-neutral-600:oklch(0.439 0 0);--color-neutral-700:oklch(0.371 0 0);--color-neutral-800:oklch(0.269 0 0);--color-neutral-900:oklch(0.205 0 0);--color-neutral-950:oklch(0.145 0 0);--color-stone-50:oklch(0.985 0.001 106.423);--color-stone-100:oklch(0.97 0.001 106.424);--color-stone-200:oklch(0.923 0.003 48.717);--color-stone-300:oklch(0.869 0.005 56.366);--color-stone-400:oklch(0.709 0.01 56.259);--color-stone-500:oklch(0.553 0.013 58.071);--color-stone-600:oklch(0.444 0.011 73.639);--color-stone-700:oklch(0.374 0.01 67.558);--color-stone-800:oklch(0.268 0.007 34.298);--color-stone-900:oklch(0.216 0.006 56.043);--color-stone-950:oklch(0.147 0.004 49.25);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--breakpoint-xs:375px;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--breakpoint-ultrawide:3840px;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--container-8xl:88rem;--container-9xl:96rem;--container-10xl:104rem;--container-ultrawide:240rem;--text-xs:0.75rem;--text-xs--line-height:calc(1 / 0.75);--text-sm:0.875rem;--text-sm--line-height:calc(1.25 / 0.875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-0.05em;--tracking-tight:-0.025em;--tracking-normal:0em;--tracking-wide:0.025em;--tracking-wider:0.05em;--tracking-widest:0.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--radius-full:calc(infinity * 1px);--shadow-2xs:0 1px rgb(0 0 0 / 0.05);--shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);--inset-shadow-2xs:inset 0 1px rgb(0 0 0 / 0.05);--inset-shadow-xs:inset 0 1px 1px rgb(0 0 0 / 0.05);--inset-shadow-sm:inset 0 2px 4px rgb(0 0 0 / 0.05);--drop-shadow-xs:0 1px 1px rgb(0 0 0 / 0.05);--drop-shadow-sm:0 1px 2px rgb(0 0 0 / 0.15);--drop-shadow-md:0 3px 3px rgb(0 0 0 / 0.12);--drop-shadow-lg:0 4px 4px rgb(0 0 0 / 0.15);--drop-shadow-xl:0 9px 7px rgb(0 0 0 / 0.1);--drop-shadow-2xl:0 25px 25px rgb(0 0 0 / 0.15);--ease-in:cubic-bezier(0.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, 0.2, 1);--ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-xs:4px;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--aspect-video:16 / 9;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings);--color-surface:var(--color-white);--color-surface-alt:var(--color-neutral-50);--color-on-surface:var(--color-neutral-600);--color-on-surface-strong:var(--color-neutral-900);--color-primary:var(--color-black);--color-on-primary:var(--color-neutral-100);--color-secondary:var(--color-neutral-800);--color-on-secondary:var(--color-white);--color-outline:var(--color-neutral-300);--color-outline-strong:var(--color-neutral-800);--color-surface-dark:var(--color-neutral-950);--color-surface-dark-alt:var(--color-neutral-900);--color-on-surface-dark:var(--color-neutral-300);--color-on-surface-dark-strong:var(--color-white);--color-primary-dark:var(--color-white);--color-on-primary-dark:var(--color-black);--color-secondary-dark:var(--color-neutral-300);--color-on-secondary-dark:var(--color-black);--color-outline-dark:var(--color-neutral-700);--color-outline-dark-strong:var(--color-neutral-300);--color-info:var(--color-sky-500);--color-on-info:var(--color-white);--color-success:var(--color-green-500);--color-on-success:var(--color-white);--color-warning:var(--color-amber-500);--color-on-warning:var(--color-white);--color-danger:var(--color-red-500);--color-on-danger:var(--color-white)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}*,::after,::before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var( --default-font-family,ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji' );font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var( --default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace );font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:initial;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--radius-default:5px;--font-sans:"Red Hat Text", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-heading:"Red Hat Display", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-display:"Red Hat Display", sans-serif;--color-primary:#e10600;--color-primary-hover:#ff1e00;--color-primary-dark:#b80500;--color-primary-glow:rgba(225, 6, 0, 0.15);--color-primary-glow-subtle:rgba(225, 6, 0, 0.08);--color-primary-glow-hover:rgba(225, 6, 0, 0.18);--color-primary-glow-hover-subtle:rgba(225, 6, 0, 0.06);--color-primary-warm:#ff4d00;--color-dark:#0c0e14;--color-dark-deep:#060810;--color-dark-raised:#141620;--color-dark-overlay-heavy:rgba(12, 14, 20, 0.96);--color-dark-overlay-medium:rgba(12, 14, 20, 0.9);--color-dark-overlay-light:rgba(12, 14, 20, 0.82);--color-surface:#fff;--color-surface-subtle:#f7f7f9;--color-surface-shimmer:rgba(255, 255, 255, 0.04);--color-surface-shimmer-faint:rgba(255, 255, 255, 0.01);--color-text-heading:#0a0c12;--color-text-body:#141620;--color-text-muted:#222430;--color-text-on-dark:#fff;--color-text-on-dark-muted:rgba(255, 255, 255, 0.7);--color-text-on-dark-subtle:rgba(255, 255, 255, 0.5);--color-text-on-dark-faint:rgba(255, 255, 255, 0.35);--color-border-on-dark:rgba(255, 255, 255, 0.08);--color-border-on-dark-hover:rgba(255, 255, 255, 0.15);--color-portal-sidebar:#7a1a1a;--color-portal-sidebar-raised:rgba(0, 0, 0, 0.15);--color-portal-sidebar-border:rgba(255, 255, 255, 0.08);--color-portal-sidebar-border-hover:rgba(255, 255, 255, 0.15);--color-portal-sidebar-hover:rgba(255, 255, 255, 0.04);--color-manager-sidebar:#0c0e14;--color-manager-sidebar-raised:#141620;--color-manager-sidebar-border:rgba(255, 255, 255, 0.08);--color-manager-sidebar-border-hover:rgba(255, 255, 255, 0.15);--color-manager-sidebar-hover:rgba(255, 255, 255, 0.04);--color-admin-sidebar:oklch(0.371 0 0);--color-admin-sidebar-raised:rgba(0, 0, 0, 0.2);--color-admin-sidebar-border:rgba(255, 255, 255, 0.12);--color-admin-sidebar-border-hover:rgba(255, 255, 255, 0.25);--color-admin-sidebar-hover:rgba(255, 255, 255, 0.06)}@scope(button.ui-btn){:scope {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--spacing) * 2);
        cursor: pointer;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-normal);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        border: none;
        transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
    }
    :scope:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    :scope:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
    :scope:not(.small) { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 8); }
    :scope:not(.small).icon { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }
    :scope:not(.small).icon:not(.text) { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); }
    :scope.small { padding: var(--spacing) calc(var(--spacing) * 4); }
    :scope.small.icon { padding: var(--spacing) calc(var(--spacing) * 3); }

    :scope.neutral { background-color: var(--color-neutral-700); color: var(--color-white); }
    :scope.neutral:hover:not(:disabled) { background-color: var(--color-neutral-800); }

    :scope.white { background-color: var(--color-white); color: var(--color-black); border: 1px solid var(--color-neutral-300); }
    :scope.white:hover:not(:disabled) { background-color: var(--color-neutral-50); }

    :scope.light-neutral { background-color: var(--color-neutral-50); color: var(--color-black); border: 1px solid var(--color-neutral-300); }
    :scope.light-neutral:hover:not(:disabled) { background-color: var(--color-neutral-100); }

    :scope.blue { background-color: var(--color-sky-700); color: var(--color-white); }
    :scope.blue:hover:not(:disabled) { background-color: var(--color-sky-800); }

    :scope.dark-blue { background-color: var(--color-sky-900); color: var(--color-white); }
    :scope.dark-blue:hover:not(:disabled) { background-color: var(--color-sky-950); }

    :scope.green { background-color: var(--color-green-700); color: var(--color-white); }
    :scope.green:hover:not(:disabled) { background-color: var(--color-green-800); }

    :scope.dark-green { background-color: var(--color-green-900); color: var(--color-white); }
    :scope.dark-green:hover:not(:disabled) { background-color: var(--color-green-950); }

    :scope.red { background-color: var(--color-red-700); color: var(--color-white); }
    :scope.red:hover:not(:disabled) { background-color: var(--color-red-800); }

    :scope.dark-red { background-color: var(--color-red-900); color: var(--color-white); }
    :scope.dark-red:hover:not(:disabled) { background-color: var(--color-red-950); }

    :scope.yellow { background-color: var(--color-yellow-700); color: var(--color-white); }
    :scope.yellow:hover:not(:disabled) { background-color: var(--color-yellow-800); }

    :scope.primary { background-color: var(--color-primary); color: var(--color-white); }
    :scope.primary:hover:not(:disabled) { background-color: var(--color-primary-hover); }

    :scope.outline { background-color: transparent; box-shadow: inset 0 0 0 1px currentColor; }
    :scope.outline:hover:not(:disabled) { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; }
    :scope.outline.neutral { background-color: transparent; color: var(--color-neutral-700); }
    :scope.outline.white { background-color: transparent; color: var(--color-neutral-300); }
    :scope.outline.light-neutral { background-color: transparent; color: var(--color-neutral-300); }
    :scope.outline.blue { background-color: transparent; color: var(--color-sky-700); }
    :scope.outline.dark-blue { background-color: transparent; color: var(--color-sky-900); }
    :scope.outline.green { background-color: transparent; color: var(--color-green-700); }
    :scope.outline.dark-green { background-color: transparent; color: var(--color-green-900); }
    :scope.outline.red { background-color: transparent; color: var(--color-red-700); }
    :scope.outline.dark-red { background-color: transparent; color: var(--color-red-900); }
    :scope.outline.yellow { background-color: transparent; color: var(--color-yellow-700); }
    :scope.outline.primary { background-color: transparent; color: var(--color-primary); }
}@scope(button.ui-link){:scope {
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: var(--color-sky-700);
    }
    :scope:hover { text-decoration: underline; }
    :scope.red { color: var(--color-red-600); }
}@scope(nav.ui-back){:scope { margin-bottom: calc(var(--spacing) * 4); }
    a {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing);
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        text-decoration: none;
    }
    a:hover { color: var(--color-neutral-900); }
}@scope(.ui-form){input, select, textarea {
        background-color: var(--color-white);
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: calc(var(--spacing) * 2);
    }
    input[type="checkbox"], input[type="radio"] {
        width: auto;
        display: inline-block;
    }
    input:disabled, select:disabled, textarea:disabled {
        background-color: var(--color-neutral-100);
        cursor: not-allowed;
    }
    input.small, select.small, textarea.small {
        padding: var(--spacing);
    }
    input:focus, select:focus, textarea:focus {
        outline: 2px solid var(--color-sky-500);
        outline-offset: 1px;
    }

    label {
        display: block;
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        margin-bottom: calc(var(--spacing) * 2);
    }
    label.inline { display: inline; }

    .spacer { margin-bottom: calc(var(--spacing) * 3); }

    .signature-pad {
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        background-color: var(--color-white);
        overflow: hidden;
    }

    .signature-pad canvas {
        display: block;
        width: 100%;
        height: auto;
        cursor: crosshair;
        touch-action: none;
    }

    .signature-pad-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
        border-top: 1px solid var(--color-neutral-200);
        background-color: var(--color-neutral-50);
    }

    .signature-pad-hint {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
        font-style: italic;
    }

    .signature-pad-clear {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-500);
        background: none;
        border: none;
        cursor: pointer;
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
        border-radius: var(--radius-default);
    }

    .signature-pad-clear:hover:not(:disabled) {
        color: var(--color-red-600);
        background-color: var(--color-red-50);
    }

    .signature-pad-clear:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    :scope.has-error input,
    :scope.has-error select,
    :scope.has-error textarea {
        border-color: var(--color-red-500);
    }
    :scope.has-error input:focus,
    :scope.has-error select:focus,
    :scope.has-error textarea:focus {
        outline-color: var(--color-red-500);
    }
    :scope.has-error .input-group .prefix {
        border-color: var(--color-red-500);
    }
    .form-error {
        display: block;
        color: var(--color-red-600);
        font-size: var(--text-xs);
        margin-top: calc(var(--spacing) * 1);
    }

    :scope.has-success input,
    :scope.has-success select,
    :scope.has-success textarea {
        border-color: var(--color-green-500);
    }
    :scope.has-success input:focus,
    :scope.has-success select:focus,
    :scope.has-success textarea:focus {
        outline-color: var(--color-green-500);
    }
    :scope.has-success .input-group .prefix {
        border-color: var(--color-green-500);
    }
    .form-success {
        display: block;
        color: var(--color-green-600);
        font-size: var(--text-xs);
        margin-top: calc(var(--spacing) * 1);
    }

    .input-group {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        font-size: var(--text-sm);
    }
    .input-group .prefix {
        background-color: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default) 0 0 var(--radius-default);
        box-shadow: var(--shadow-xs);
        border-right: 0;
        padding: calc(var(--spacing) * 2);
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .input-group .prefix.small { padding: var(--spacing); font-size: var(--text-sm); }
    .input-group .field { flex-grow: 1; display: flex; }
    .input-group .field input { border-radius: 0 var(--radius-default) var(--radius-default) 0; width: 100%; }

    input[type="file"] {
        padding: var(--spacing);
        cursor: pointer;
    }
    input[type="file"]::file-selector-button {
        margin-left: var(--spacing);
        margin-right: calc(var(--spacing) * 2);
        background-color: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 4);
        cursor: pointer;
    }
    input[type="file"]::file-selector-button:hover {
        background-color: var(--color-neutral-200);
    }
    input[type="file"].small::file-selector-button {
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
    }
}@scope(.ui-fieldset){:scope {
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    }
    legend {
        padding: 0 calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-600);
    }
}@scope(.ui-Combobox){:scope { position: relative; }

    .chevron-icon { color: var(--color-neutral-400); }
    .check-icon { margin-left: auto; color: var(--color-green-600); }

    .trigger {
        background-color: var(--color-white);
        display: block;
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: calc(var(--spacing) * 2);
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--spacing) * 2);
        cursor: pointer;
    }
    .trigger:disabled {
        background-color: var(--color-neutral-100);
        cursor: not-allowed;
    }
    .trigger.small { padding: var(--spacing); }
    .trigger .placeholder { color: var(--color-neutral-500); }

    .select-all {
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .select-all button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        color: var(--color-neutral-600);
        font-weight: var(--font-weight-medium);
        background: none;
        border: none;
    }
    .select-all button:hover { background-color: var(--color-neutral-100); }
}@scope(.ui-Combobox-dropdown){:scope {
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        max-height: 15rem;
        overflow: auto;
    }

    .search {
        position: sticky;
        top: 0;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-neutral-200);
        padding: calc(var(--spacing) * 2);
    }
    .search input {
        width: 100%;
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: var(--spacing);
    }
    .search input:focus {
        outline: 2px solid var(--color-sky-500);
        outline-offset: 1px;
    }

    .options button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        background: none;
        border: none;
    }
    .options button:disabled {
        color: var(--color-neutral-400);
        cursor: not-allowed;
    }
    .options button:hover:not(:disabled), .options button.highlighted {
        background-color: var(--color-neutral-100);
    }
    .options button.small { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }

    .no-results {
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        text-align: center;
    }
}@scope(.ui-MultiSelect){:scope { position: relative; }

    .chevron-icon { color: var(--color-neutral-400); }

    .trigger {
        background-color: var(--color-white);
        display: block;
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: calc(var(--spacing) * 2);
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--spacing) * 2);
        cursor: pointer;
        min-height: calc(var(--text-sm) * 1.5 + calc(var(--spacing) * 4) + 2px);
    }
    .trigger:disabled {
        background-color: var(--color-neutral-100);
        cursor: not-allowed;
    }
    .trigger.small { padding: var(--spacing); min-height: calc(var(--text-sm) * 1.5 + calc(var(--spacing) * 2) + 2px); }
    .trigger .placeholder { color: var(--color-neutral-500); }
    .trigger .content { flex: 1; overflow: hidden; display: flex; align-items: center; }

    .tags {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing);
        overflow: hidden;
        align-items: center;
    }
    .tag {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--spacing) * 0.5);
        padding: var(--spacing) calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        background-color: var(--color-neutral-200);
        border-radius: var(--radius-default);
        white-space: nowrap;
        line-height: 1;
    }
    .trigger.small .tag {
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
        font-size: var(--text-xs);
    }
    .tag button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .tag button:hover { color: var(--color-neutral-900); }

    .dropdown {
        position: absolute;
        z-index: 50;
        width: 100%;
        margin-top: var(--spacing);
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        max-height: 15rem;
        overflow: auto;
    }

    .search {
        position: sticky;
        top: 0;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-neutral-200);
        padding: calc(var(--spacing) * 2);
    }
    .search input {
        width: 100%;
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: var(--spacing);
    }
    .search input:focus {
        outline: 2px solid var(--color-sky-500);
        outline-offset: 1px;
    }

    .options button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        background: none;
        border: none;
    }
    .options button:disabled {
        color: var(--color-neutral-400);
        cursor: not-allowed;
    }
    .options button:hover:not(:disabled), .options button.highlighted {
        background-color: var(--color-neutral-100);
    }

    .no-results {
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        text-align: center;
    }

    .select-all {
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .select-all button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        color: var(--color-neutral-600);
        font-weight: var(--font-weight-medium);
        background: none;
        border: none;
    }
    .select-all button:hover { background-color: var(--color-neutral-100); }
}@scope(.ui-ComboboxTrigger){:scope { position: relative; display: inline-block; }

    .check-icon { margin-left: auto; color: var(--color-green-600); }

    > button {
        cursor: pointer;
        background: none;
        border: none;
    }
    > button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .dropdown {
        position: absolute;
        z-index: 50;
        margin-top: var(--spacing);
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        max-height: 15rem;
        overflow: auto;
    }
    .dropdown.left { left: 0; }
    .dropdown.right { right: 0; }

    .search {
        position: sticky;
        top: 0;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-neutral-200);
        padding: calc(var(--spacing) * 2);
    }
    .search input {
        width: 100%;
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        font-size: var(--text-sm);
        padding: var(--spacing);
    }
    .search input:focus {
        outline: 2px solid var(--color-sky-500);
        outline-offset: 1px;
    }

    .options button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        background: none;
        border: none;
    }
    .options button:disabled {
        color: var(--color-neutral-400);
        cursor: not-allowed;
    }
    .options button:hover:not(:disabled), .options button.highlighted {
        background-color: var(--color-neutral-100);
    }

    .no-results {
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        text-align: center;
    }

    .select-all {
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .select-all button {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        cursor: pointer;
        color: var(--color-neutral-600);
        font-weight: var(--font-weight-medium);
        background: none;
        border: none;
    }
    .select-all button:hover { background-color: var(--color-neutral-100); }
}@scope(.ui-accordion){:scope {
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
    }

    .item + .item { border-top: 1px solid var(--color-neutral-200); }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
        text-align: left;
        color: var(--color-neutral-900);
        background-color: var(--color-neutral-50);
        cursor: pointer;
        border: none;
        transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
    }
    .header:hover { background-color: var(--color-neutral-100); }
    .header:focus { outline: none; background-color: var(--color-neutral-100); }
    .header:disabled {
        color: var(--color-neutral-400);
        cursor: not-allowed;
    }
    .header:disabled:hover { background-color: var(--color-neutral-50); }

    .header .title { flex: 1; }

    .header .icon {
        color: var(--color-neutral-500);
        line-height: 0;
        transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
    }
    .header .icon.open { transform: rotate(180deg); }

    .content {
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
        color: var(--color-neutral-700);
        background-color: color-mix(in srgb, var(--color-neutral-50) 50%, transparent);
        border-top: 1px solid var(--color-neutral-200);
    }
}@scope(.ui-alert){:scope {
        padding: calc(var(--spacing) * 4);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-xs);
        border: 1px solid;
    }

    .header {
        font-weight: var(--font-weight-semibold);
        margin-bottom: calc(var(--spacing) * 2);
    }

    .body { font-size: var(--text-sm); }

    :scope.white {
        background-color: var(--color-white);
        border-color: var(--color-neutral-100);
    }

    :scope.gray {
        background-color: var(--color-neutral-50);
        border-color: var(--color-neutral-200);
    }

    :scope.blue {
        background-color: var(--color-sky-50);
        border-color: var(--color-sky-200);
    }

    :scope.green {
        background-color: var(--color-green-50);
        border-color: var(--color-green-200);
    }

    :scope.red {
        background-color: var(--color-red-50);
        border-color: var(--color-red-200);
    }

    :scope.yellow {
        background-color: var(--color-yellow-50);
        border-color: var(--color-yellow-200);
    }
}@scope(.ui-badge){:scope {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-default);
        white-space: nowrap;
        border: 1px solid;
    }

    :scope.pill {
        border-radius: var(--radius-full);
    }

    :scope.green {
        color: var(--color-green-700);
        background-color: var(--color-green-50);
        border-color: var(--color-green-200);
    }

    :scope.green.solid {
        color: var(--color-white);
        background-color: var(--color-green-700);
        border-color: var(--color-green-700);
    }

    :scope.red {
        color: var(--color-red-700);
        background-color: var(--color-red-50);
        border-color: var(--color-red-200);
    }

    :scope.red.solid {
        color: var(--color-white);
        background-color: var(--color-red-700);
        border-color: var(--color-red-700);
    }

    :scope.blue {
        color: var(--color-sky-800);
        background-color: var(--color-sky-50);
        border-color: var(--color-sky-200);
    }

    :scope.blue.solid {
        color: var(--color-white);
        background-color: var(--color-sky-800);
        border-color: var(--color-sky-800);
    }

    :scope.amber {
        color: var(--color-amber-700);
        background-color: var(--color-amber-50);
        border-color: var(--color-amber-200);
    }

    :scope.amber.solid {
        color: var(--color-white);
        background-color: var(--color-amber-700);
        border-color: var(--color-amber-700);
    }

    :scope.neutral {
        color: var(--color-neutral-500);
        background-color: var(--color-neutral-100);
        border-color: var(--color-neutral-200);
    }

    :scope.neutral.solid {
        color: var(--color-white);
        background-color: var(--color-neutral-500);
        border-color: var(--color-neutral-500);
    }

    :scope.muted {
        color: var(--color-neutral-400);
        background-color: transparent;
        border-color: transparent;
    }
}@scope(.ui-border-cut-corner-card){:scope {
        position: relative;
        isolation: isolate;
        padding: calc(var(--spacing) * 5);
        width: 100%;
    }

    :scope::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--color-neutral-300);
        clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
        z-index: -2;
    }

    :scope::after {
        content: '';
        position: absolute;
        inset: 1px;
        background: var(--color-white);
        clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
        z-index: -1;
    }

    :scope.no-padding { padding: 0; }
}@scope(.ui-border-card){:scope {
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        padding: calc(var(--spacing) * 5);
        width: 100%;
    }

    :scope.no-padding { padding: 0; }
}@scope(.ui-card){:scope {
        background-color: var(--color-white);
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-default);
        width: 100%;
    }

    :scope:not(.no-padding) { padding: calc(var(--spacing) * 5); }
    :scope:not(.no-flex) { flex: 1; }

    .header {
        font-size: var(--text-xl);
        letter-spacing: var(--tracking-tight);
        color: var(--color-black);
        margin-bottom: calc(var(--spacing) * 5);
    }
    .header.center { text-align: center; }
    .header hr {
        color: var(--color-neutral-200);
        margin-top: var(--spacing);
        margin-bottom: calc(var(--spacing) * 3);
    }

    .subheader {
        font-size: var(--text-lg);
        letter-spacing: var(--tracking-tight);
        color: var(--color-black);
        margin-bottom: calc(var(--spacing) * 2);
    }

    .spacer { margin-bottom: calc(var(--spacing) * 6); }
}@scope(.ui-tabs){:scope { }

    .header {
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        width: 100%;
        font-size: var(--text-sm);
        margin-bottom: 0;
    }

    .tab {
        cursor: pointer;
        padding: calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        border-color: var(--color-neutral-300);
        border-bottom: 1px solid var(--color-neutral-300);
        background: none;
    }
    .tab.active {
        border-left: 1px solid var(--color-neutral-300);
        border-right: 1px solid var(--color-neutral-300);
        border-top: 2px solid var(--color-sky-700);
        border-bottom: none;
    }

    .filler {
        border-bottom: 1px solid var(--color-neutral-300);
        flex: 1;
    }

    .panel.hidden {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }
}@scope(.ui-menu){:scope {
        background-color: var(--color-white);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-neutral-200);
        padding: calc(var(--spacing) * 1) 0;
        min-width: 12rem;
        max-height: 24rem;
        overflow-y: auto;
    }

    .item {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        width: 100%;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        text-align: left;
        color: var(--color-neutral-700);
        background: none;
        border: none;
        cursor: pointer;
    }
    .item:hover { background-color: var(--color-neutral-100); color: var(--color-neutral-900); }
    .item:focus { background-color: var(--color-neutral-100); outline: none; }
    .item:disabled, .item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .item:disabled:hover, .item.disabled:hover { background-color: transparent; }

    .item .icon { flex-shrink: 0; }
    .item .icon.trailing { margin-left: auto; color: var(--color-neutral-400); }

    .divider {
        margin: calc(var(--spacing) * 1) 0;
        border: none;
        border-top: 1px solid var(--color-neutral-200);
    }

    .section {
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
    }

    .submenu-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .submenu-trigger .label {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
    }
}@scope(.ui-popover){:scope {
        background-color: var(--color-white);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-neutral-200);
    }
}@scope(.ui-tooltip){:scope {
        background-color: var(--color-neutral-800);
        color: var(--color-white);
        font-size: var(--text-sm);
        padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        max-width: 20rem;
        position: relative;
    }

    .arrow {
        position: absolute;
        width: 0;
        height: 0;
    }
    .arrow.top {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--color-neutral-800);
    }
    .arrow.bottom {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid var(--color-neutral-800);
    }
    .arrow.left {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid var(--color-neutral-800);
    }
    .arrow.right {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid var(--color-neutral-800);
    }
}@scope(.ui-toast-container){:scope {
        position: fixed;
        z-index: 200;
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 2);
    }

    :scope.top-right { top: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); }
    :scope.top-left { top: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); }
    :scope.bottom-right { bottom: calc(var(--spacing) * 4); right: calc(var(--spacing) * 4); flex-direction: column-reverse; }
    :scope.bottom-left { bottom: calc(var(--spacing) * 4); left: calc(var(--spacing) * 4); flex-direction: column-reverse; }
    :scope.top-center { top: calc(var(--spacing) * 4); left: 50%; transform: translateX(-50%); }
    :scope.bottom-center { bottom: calc(var(--spacing) * 4); left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
}@scope(.ui-toast){:scope {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-neutral-200);
        border-left-width: 4px;
        background-color: var(--color-white);
        min-width: 18rem;
        max-width: 28rem;
        transition: opacity 150ms ease-out, transform 150ms ease-out;
    }

    :scope.exiting {
        opacity: 0;
        transform: translateX(0.5rem);
    }

    :scope.success { border-left-color: var(--color-green-700); }
    :scope.error { border-left-color: var(--color-red-700); }
    :scope.warning { border-left-color: var(--color-yellow-500); }
    :scope.info { border-left-color: var(--color-sky-800); }
    :scope.generic { border-left-color: var(--color-neutral-400); }

    .body {
        display: flex;
        align-items: flex-start;
        gap: calc(var(--spacing) * 3);
        padding: calc(var(--spacing) * 4);
    }

    .icon { flex-shrink: 0; margin-top: 2px; }
    .icon.success { color: var(--color-green-600); }
    .icon.error { color: var(--color-red-600); }
    .icon.warning { color: var(--color-yellow-600); }
    .icon.info { color: var(--color-sky-700); }

    .message {
        flex: 1;
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
    }

    .dismiss {
        flex-shrink: 0;
        cursor: pointer;
        color: var(--color-neutral-400);
        background: none;
        border: none;
        padding: 0;
        transition: color var(--default-transition-duration) var(--default-transition-timing-function);
    }
    .dismiss:hover { color: var(--color-neutral-600); }

    .progress {
        height: 4px;
        width: 100%;
        background-color: var(--color-neutral-100);
    }
    .progress-bar {
        height: 100%;
        background-color: var(--color-neutral-300);
    }
}@scope(.ui-chart){:scope {
        height: 100%;
    }
}@scope(.ui-divider){:scope {
        color: var(--color-neutral-200);
        margin-bottom: calc(var(--spacing) * 3);
        margin-top: var(--spacing);
    }
}@scope(.ui-code-box){:scope {
        font-size: var(--text-xs);
        padding: calc(var(--spacing) * 3);
        background-color: var(--color-neutral-800);
        color: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-700);
        border-radius: var(--radius-default);
    }
}@scope(.ui-page-header){:scope { margin-top: var(--spacing); }

    h1 {
        text-align: center;
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-light);
        color: var(--color-neutral-800);
        margin-bottom: calc(var(--spacing) * 2);
    }

    hr {
        color: var(--color-neutral-200);
        margin-bottom: calc(var(--spacing) * 2);
    }
}@scope(.ui-page-link){:scope {
        color: var(--color-sky-700);
    }
    :scope:hover {
        color: var(--color-sky-800);
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }
}@scope(.ui-loader){:scope {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(var(--spacing) * 8);
    }

    .spinner {
        animation: spin 1s linear infinite;
        height: 2rem;
        width: 2rem;
        border: 4px solid var(--color-sky-700);
        border-top-color: transparent;
        border-radius: 9999px;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
}@scope(.ui-breadcrumbs){:scope {
        display: flex;
        flex-direction: row;
        color: var(--color-neutral-500);
    }

    .crumb {
        display: flex;
        align-items: center;
    }

    .crumb a {
        color: var(--color-sky-800);
        cursor: pointer;
    }
    .crumb a:hover {
        color: var(--color-sky-900);
        text-decoration: underline;
    }

    .crumb svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .current {
        color: var(--color-neutral-800);
        font-weight: var(--font-weight-semibold);
    }
}@scope(.ui-autotable){:scope {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: var(--color-white);
        border-radius: var(--radius-default);
        overflow: hidden;
    }

    :scope.shadow { box-shadow: var(--shadow-sm); }
    :scope.border { border: 1px solid var(--color-neutral-300); }

    .table-wrapper {
        overflow-x: auto;
        width: 100%;
    }

    table {
        min-width: 100%;
    }
    table.fixed { table-layout: fixed; }

    
    thead tr th { border-bottom: 1px solid var(--color-neutral-300); }

    th.color-default { background-color: var(--color-neutral-50); }
    th.color-default.sortable:hover { background-color: var(--color-neutral-300); }
    th.color-default .header-text { font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; }
    th.color-default .sort-icon { color: var(--color-black); }
    th.color-default .drag-handle { color: var(--color-neutral-500); }

    th.color-blue { background-color: var(--color-sky-900); color: var(--color-white); }
    th.color-blue.sortable:hover { background-color: var(--color-sky-800); }
    th.color-blue .header-text { font-weight: var(--font-weight-semibold); }
    th.color-blue .sort-icon { color: var(--color-white); }
    th.color-blue .drag-handle { color: rgba(255, 255, 255, 0.7); }

    th.color-green { background-color: var(--color-green-700); color: var(--color-white); }
    th.color-green.sortable:hover { background-color: var(--color-green-800); }
    th.color-green .header-text { font-weight: var(--font-weight-semibold); }
    th.color-green .sort-icon { color: var(--color-white); }
    th.color-green .drag-handle { color: rgba(255, 255, 255, 0.7); }

    th.color-gray { background-color: var(--color-neutral-600); color: var(--color-white); }
    th.color-gray.sortable:hover { background-color: var(--color-neutral-500); }
    th.color-gray .header-text { font-weight: var(--font-weight-semibold); }
    th.color-gray .sort-icon { color: var(--color-white); }
    th.color-gray .drag-handle { color: rgba(255, 255, 255, 0.7); }

    th.sortable { cursor: pointer; }
    th.draggable { user-select: none; cursor: grab; }
    th.draggable:active { cursor: grabbing; }
    th.dragging .header-content { transform: scale(0.95); }
    th.drag-over {
        outline: 2px solid var(--color-sky-500);
        outline-offset: -2px;
    }
    th.border-y { border-left: 1px solid var(--color-neutral-300); }

    
    thead tr { background-color: inherit; }

    .header-content {
        transition: transform 150ms ease;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        gap: calc(var(--spacing) * 2);
        align-items: center;
    }
    .header-inner.pos-right { flex-direction: row-reverse; }
    .header-inner.pos-center { justify-content: center; }

    .drag-handle {
        opacity: 0.4;
        flex-shrink: 0;
    }

    .header-text {
        font-size: var(--text-sm);
        flex-grow: 1;
    }

    
    th { font-size: var(--text-sm); }

    .sort-icon {
        line-height: 0;
        flex-shrink: 0;
        opacity: 0.5;
    }

    
    th.size-default { padding: calc(var(--spacing) * 4); }
    th.size-compact { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }
    th.size-supercompact { padding: var(--spacing) calc(var(--spacing) * 2); }

    
    tbody { font-size: var(--text-sm); }

    
    tbody.size-default td { padding: calc(var(--spacing) * 4); }
    tbody.size-compact td { padding: var(--spacing) calc(var(--spacing) * 2); }
    tbody.size-supercompact td { padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2); }

    
    tbody tr.alternate { background-color: var(--color-neutral-100); }
    tbody tr.border-x { border-bottom: 1px solid var(--color-neutral-300); }
    tbody tr.accordion-row { cursor: pointer; user-select: none; }

    
    tbody tr.hover-default:hover { background-color: var(--color-neutral-200); }
    tbody tr.hover-blue:hover { background-color: var(--color-sky-100); }
    tbody tr.hover-green:hover { background-color: var(--color-green-100); }
    tbody tr.hover-gray:hover { background-color: var(--color-neutral-200); }

    
    tbody.border-y td + td { border-left: 1px solid var(--color-neutral-300); }

    
    td.pos-left, th.pos-left { text-align: left; }
    td.pos-right, th.pos-right { text-align: right; }
    td.pos-center, th.pos-center { text-align: center; }

    
    .accordion-toggle {
        width: 40px;
        text-align: center;
        color: var(--color-neutral-400);
    }
    .accordion-icon {
        display: inline-block;
        transition: transform 200ms ease;
    }
    .accordion-icon.expanded { transform: rotate(90deg); }

    
    .skeleton {
        height: 1rem;
        background-color: var(--color-neutral-200);
        border-radius: var(--radius-default);
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    
    .error-cell { text-align: center; color: var(--color-red-600); }
    .empty-cell { text-align: center; color: var(--color-neutral-500); }

    
    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--color-neutral-300);
    }
    .pagination.size-default { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); }
    .pagination.size-compact, .pagination.size-supercompact { padding: var(--spacing) calc(var(--spacing) * 4); }

    .pagination-info {
        display: none;
        align-items: center;
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
    }
    @media (min-width: 640px) { .pagination-info { display: flex; } }
    .pagination-info b { line-height: 0; }
    .pagination-info span { margin-left: calc(var(--spacing) * 3); }

    .pagination-controls { display: flex; align-items: center; }
    .pagination-label {
        display: none;
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-right: calc(var(--spacing) * 2);
    }
    @media (min-width: 640px) { .pagination-label { display: block; } }

    .pagination-select { margin-right: calc(var(--spacing) * 5); }

    .pagination-page {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        padding: 0 calc(var(--spacing) * 3);
    }
}@scope(.ui-pagination-btn){:scope {
        padding: var(--spacing);
        min-height: 2.25rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-normal);
        line-height: 0;
        background: none;
        border: none;
        cursor: pointer;
    }
    :scope:hover { background-color: var(--color-neutral-100); }
    :scope:disabled {
        color: var(--color-neutral-300);
        cursor: not-allowed;
    }
    :scope:disabled:hover { background-color: transparent; }
}@scope(.ui-autotable-toolbar){:scope {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 2);
    }

    .search-area { flex-grow: 1; display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 4); align-items: flex-end; }
    .actions { display: flex; gap: calc(var(--spacing) * 2); align-items: center; }
}@scope(.ui-autotable-search){:scope {
        display: flex;
        flex-direction: column;
        gap: var(--spacing);
        min-width: 10rem;
    }

    label {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-700);
    }
}@scope(.ui-pdf-preview-scroll){:scope {
        overflow-y: auto;
        max-height: 70vh;
        padding: 16px;
        background-color: var(--color-neutral-100);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .pdf-preview-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .pdf-preview-page canvas {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        background: white;
    }

    .pdf-preview-page-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        font-weight: var(--font-weight-medium);
    }
}@scope(.ui-modal-container){:scope {
        position: fixed;
        inset: 0;
        z-index: 100;
        width: 100%;
        height: 100dvh;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        display: flex;
        justify-content: center;
        max-width: 100vw;
        max-height: 100dvh;
    }

    :scope.top { align-items: flex-start; padding-top: 2.5rem; }
    :scope.center { align-items: center; }

    .backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }
}@scope(.ui-modal){:scope {
        position: relative;
        background-color: var(--color-white);
        box-shadow: var(--shadow-md);
        font-size: var(--text-sm);
        width: 100%;
        overflow-y: auto;
        border-radius: var(--radius-default);
        max-height: calc(100dvh - 5rem);
    }

    
    :scope.size-small { max-width: 28rem; }
    :scope.size-default { max-width: 36rem; }
    :scope.size-medium { max-width: 42rem; }
    :scope.size-large { max-width: 48rem; }
    :scope.size-xlarge { max-width: 56rem; }
    :scope.size-2xlarge { max-width: 64rem; }
    :scope.size-3xlarge { max-width: 72rem; }
    :scope.size-4xlarge { max-width: 80rem; }
    :scope.size-5xlarge { max-width: 90rem; }
    :scope.size-full { max-width: none; }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--spacing) * 6) calc(var(--spacing) * 8) var(--spacing);
        font-size: var(--text-xl);
    }

    .header-close-only {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) var(--spacing);
    }

    .close-btn {
        cursor: pointer;
        color: var(--color-neutral-500);
        background: none;
        border: none;
        padding: 0;
        line-height: 0;
    }
    .close-btn:hover { color: var(--color-neutral-700); }

    .body {
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 8);
    }

    .footer {
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 8);
        padding-bottom: calc(var(--spacing) * 3 + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: calc(var(--spacing) * 2);
    }

    .footer-spacer {
        height: calc(var(--spacing) * 2);
    }

    .wizard-error {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 8);
        font-size: var(--text-sm);
        color: var(--color-red-700);
        background-color: var(--color-red-50);
        border-top: 1px solid var(--color-red-200);
    }

    .wizard-error .icon {
        flex-shrink: 0;
        color: var(--color-red-500);
    }
}@scope(.ui-confirm-modal){:scope {
        display: flex;
        justify-content: flex-end;
        gap: calc(var(--spacing) * 2);
    }

    .cancel-btn {
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        background: none;
        cursor: pointer;
    }
    .cancel-btn:hover { background-color: var(--color-neutral-50); }

    .confirm-btn {
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        border-radius: var(--radius-default);
        border: none;
        cursor: pointer;
    }

    .confirm-btn.danger {
        background-color: var(--color-red-600);
        color: var(--color-white);
    }
    .confirm-btn.danger:hover { background-color: var(--color-red-700); }
}@scope(.ui-wizard-header){:scope {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        flex: 1;
    }

    .wizard-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .wizard-title {
        font-size: var(--text-xl);
    }

    .wizard-step-name {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-neutral-600);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .wizard-steps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: 16rem;
    }

    .wizard-track {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--color-neutral-200);
        transform: translateY(-50%);
    }

    .wizard-track-fill {
        height: 100%;
        background-color: var(--color-primary);
        transition: width 300ms ease;
    }

    .wizard-step {
        position: relative;
        z-index: 1;
    }

    .wizard-step .step-indicator {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-xs);
        font-weight: 600;
        border: 2px solid var(--color-neutral-300);
        color: var(--color-neutral-400);
        background-color: var(--color-white);
        flex-shrink: 0;
        transition: all 300ms ease;
    }

    .wizard-step.active .step-indicator {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
    }

    .wizard-step.completed .step-indicator {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
    }
}@scope(.ui-wizard-footer){:scope {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: calc(var(--spacing) * 2);
    }

    .wizard-btn {
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
        font-size: var(--text-sm);
        border-radius: var(--radius-default);
        cursor: pointer;
        border: none;
    }

    .wizard-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .wizard-btn.back {
        background: none;
        border: 1px solid var(--color-neutral-300);
        color: var(--color-neutral-700);
    }
    .wizard-btn.back:hover:not(:disabled) { background-color: var(--color-neutral-50); }

    .wizard-btn.next {
        background-color: var(--color-neutral-800);
        color: var(--color-white);
    }
    .wizard-btn.next:hover:not(:disabled) { background-color: var(--color-neutral-900); }

    .wizard-btn.finish {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
    .wizard-btn.finish:hover:not(:disabled) { background-color: var(--color-red-700); }
}@scope(.ui-tutorial-overlay){:scope {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 150;
    }
}@scope(.ui-tutorial-spotlight){:scope {
        position: fixed;
        z-index: 150;
        pointer-events: none;
        border-radius: var(--radius-default);
    }

    .click-layer {
        position: fixed;
        inset: 0;
        z-index: -1;
        cursor: pointer;
    }
}@scope(.ui-tutorial-popover){:scope {
        position: fixed;
        z-index: 200;
        background-color: var(--color-white);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-neutral-200);
        max-width: 24rem;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 2);
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
    }

    .title {
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-900);
    }

    .step-counter {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
    }

    .close-btn {
        cursor: pointer;
        color: var(--color-neutral-400);
        background: none;
        border: none;
        padding: 0;
        line-height: 0;
        transition: color 150ms ease;
    }
    .close-btn:hover { color: var(--color-neutral-600); }

    .content {
        padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
        gap: calc(var(--spacing) * 2);
    }

    .nav-right {
        display: flex;
        gap: calc(var(--spacing) * 2);
    }

    .progress {
        display: flex;
        justify-content: center;
        gap: calc(var(--spacing) * 1.5);
        padding-bottom: calc(var(--spacing) * 3);
    }

    .progress-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        transition: all 300ms ease;
    }
    .progress-dot.active {
        background-color: var(--color-sky-600);
        transform: scale(1.1);
    }
    .progress-dot.inactive {
        background-color: var(--color-neutral-300);
    }
}@scope(.ui-tutorial-arrow){:scope {
        position: absolute;
        width: 0;
        height: 0;
    }

    
    :scope.border {
        
    }

    
    :scope.fill {
        
    }
}@scope(.ui-icon){:scope {
        flex-shrink: 0;
    }

    :scope.inline {
        display: inline-block;
        vertical-align: middle;
    }

    :scope.success {
        color: var(--color-green-600);
    }

    :scope.error {
        color: var(--color-red-600);
    }
}@scope(.ui-icon-container){:scope {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(var(--spacing) * 2);
    }
}@scope(.ui-sidebar-nav){:scope {
        background-color: var(--color-white);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--color-neutral-200);
        padding: calc(var(--spacing) * 2) 0;
    }

    .header {
        padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 2);
        margin-bottom: var(--spacing);
        border-bottom: 1px solid var(--color-neutral-200);
    }

    .header-text {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-400);
        letter-spacing: 0.05em;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-btn {
        width: 100%;
        text-align: left;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        cursor: pointer;
        border: none;
        border-left: 2px solid transparent;
        color: var(--color-neutral-600);
        background: none;
    }
    .nav-btn:hover {
        border-left-color: var(--color-neutral-400);
        color: var(--color-neutral-900);
        background-color: var(--color-neutral-50);
    }

    .nav-icon {
        margin-right: calc(var(--spacing) * 2);
    }
}@scope(.ui-sidebar-layout){:scope {
        display: grid;
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 8);
    }

    @media (min-width: 1024px) {
        :scope {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
    }

    .sidebar {
        display: none;
    }

    @media (min-width: 1024px) {
        .sidebar {
            display: block;
            grid-column: span 2;
        }
    }

    .sidebar-sticky {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }

    .main {
        grid-column: span 1;
        min-width: 0;
    }

    @media (min-width: 1024px) {
        .main {
            grid-column: span 10;
        }
    }
}@scope(.ui-access-denied){:scope {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        text-align: center;
        padding: calc(var(--spacing) * 8);
    }

    h1 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-800);
        margin-bottom: calc(var(--spacing) * 2);
    }

    p {
        color: var(--color-neutral-600);
        margin-bottom: calc(var(--spacing) * 4);
    }

    a {
        color: var(--color-sky-600);
    }

    a:hover {
        color: var(--color-sky-800);
        text-decoration: underline;
    }
}@scope(.ui-permission-grid){.search-bar {
        margin-bottom: 0.75rem;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead tr {
        background-color: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-neutral-300);
    }

    th {
        padding: 0.5rem 0.75rem;
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-xs);
    }

    .col-name,
    .col-desc {
        text-align: left;
    }

    .col-option {
        text-align: center;
        width: 4rem;
    }

    .perm-row {
        border-bottom: 1px solid var(--color-neutral-200);
    }

    .perm-row:hover {
        background-color: var(--color-neutral-50);
    }

    .perm-row.highlight {
        background-color: var(--color-red-50);
        border-bottom-color: var(--color-red-300);
    }

    .perm-row.highlight:hover {
        background-color: var(--color-red-100);
    }

    .cell-name,
    .cell-desc {
        padding: 0.375rem 0.75rem;
    }

    .cell-radio {
        text-align: center;
        padding: 0.375rem 0.75rem;
    }

    .cell-radio input {
        width: 1rem;
        height: 1rem;
        cursor: pointer;
    }

    .name {
        font-size: var(--text-sm);
    }

    .name.highlight {
        font-weight: var(--font-weight-semibold);
        color: var(--color-red-800);
    }

    .desc {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
    }

    .desc.highlight {
        color: var(--color-red-600);
    }
}@scope(.ui-top-bar){:scope {
        position: fixed;
        top: 0;
        right: 0;
        height: 3.5rem;
        z-index: 40;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-neutral-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.5rem;
        transition: left 250ms ease-in-out;
    }

    .top-bar-left {
        display: flex;
        align-items: center;
    }

    .top-bar-right {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .top-bar-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        color: var(--color-neutral-800);
        background: none;
        border: none;
        cursor: pointer;
    }

    .top-bar-icon-btn:hover {
        color: var(--color-neutral-950);
    }

    .top-bar-divider {
        width: 1px;
        height: 1.5rem;
        background-color: var(--color-neutral-200);
        margin: 0 0.5rem;
    }

    .top-bar-user-btn {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.375rem 0.625rem;
        cursor: pointer;
        transition: opacity 150ms;
    }

    .top-bar-user-btn:hover {
        opacity: 0.8;
    }

    .top-bar-avatar {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background-color: var(--color-neutral-800);
        color: var(--color-surface);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-bar-user-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
    }

    .top-bar-chevron {
        color: var(--color-neutral-700);
    }

    .top-bar-menu-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        color: var(--color-neutral-800);
        background: none;
        border: none;
        cursor: pointer;
        margin-right: 0.5rem;
    }

    .top-bar-menu-btn:hover {
        color: var(--color-neutral-950);
    }
}@media(max-width:768px){.ui-top-bar .top-bar-menu-btn{display:flex}.ui-top-bar .top-bar-user-name{display:none}}@scope(.top-bar-app-popover){:scope {
        min-width: 14rem;
    }

    .app-popover-header {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-neutral-500);
        padding: 0.625rem 0.75rem 0.375rem;
    }

    .app-popover-list {
        padding: 0.25rem;
    }

    .app-popover-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        text-decoration: none;
        color: var(--color-text-body);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
    }

    .app-popover-item:hover {
        background-color: var(--color-neutral-50);
        color: var(--color-text-heading);
    }

    .app-popover-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        background-color: var(--color-neutral-100);
        color: var(--color-neutral-600);
    }

    .app-popover-item:hover .app-popover-icon {
        background-color: var(--color-primary);
        color: var(--color-surface);
    }

    .app-popover-title {
        flex: 1;
    }
}@scope(.ui-transition-overlay){:scope {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, rgba(12, 14, 20, 0.95), rgba(12, 14, 20, 0.98));
        backdrop-filter: blur(4px);
        padding-bottom: 8rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease-out, visibility 0s linear 0.15s;
    }

    :scope.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.15s ease-out, visibility 0s linear;
    }

    :scope.fading-out {
        opacity: 0;
        visibility: visible;
        pointer-events: none;
        transition: opacity 0.15s ease-in, visibility 0s linear 0.15s;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .top {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .logo {
        max-width: 14rem;
        height: auto;
    }

    .divider {
        width: 1px;
        height: 5rem;
        background-color: rgba(255, 255, 255, 0.15);
    }

    .spinner {
        color: var(--color-primary);
        animation: transition-spin 1s linear infinite;
    }

    .text {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }
}@keyframes transition-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@scope(.page-not-found){:scope {
        min-height: 100vh;
        background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-deep) 100%);
        color: var(--color-text-on-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.5rem;
    }

    .error-inner {
        width: 100%;
        max-width: 32rem;
    }

    .error-content {
        padding-left: 1.5rem;
        border-left: 4px solid transparent;
        border-image: linear-gradient(180deg, var(--color-primary), var(--color-primary-warm)) 1;
    }

    .error-label {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: var(--tracking-widest);
    }

    .error-code {
        font-family: var(--font-display);
        font-size: 8rem;
        font-weight: 900;
        color: var(--color-text-on-dark);
        line-height: 1;
        letter-spacing: var(--tracking-tight);
        display: block;
        margin-top: 0.25rem;
    }

    @media (min-width: 640px) {
        .error-code {
            font-size: 10rem;
        }
    }

    .error-divider {
        width: 3rem;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-primary-warm));
        margin: 1.25rem 0;
    }

    .error-title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--color-text-on-dark);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        margin-bottom: 0.75rem;
    }

    @media (min-width: 640px) {
        .error-title {
            font-size: var(--text-2xl);
        }
    }

    .error-message {
        font-size: var(--text-sm);
        color: var(--color-text-on-dark-subtle);
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .btn-primary {
        padding: 0.625rem 1.5rem;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        background-color: var(--color-surface);
        color: var(--color-text-heading);
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: background-color 150ms;
        text-decoration: none;
    }

    .btn-primary:hover {
        background-color: var(--color-surface-subtle);
    }

    .btn-secondary {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        transition: color 150ms;
        text-decoration: none;
    }

    .btn-secondary:hover {
        color: var(--color-text-on-dark);
    }
}@scope(.layout-app-layout){:scope {
        min-height: 100vh;
        background-color: var(--color-neutral-50);
    }
}@scope(.layout-app-main-area){:scope {
        min-height: 100vh;
        transition: margin-left 250ms ease-in-out;
    }

    :scope.collapsed {
        margin-left: 4.5rem;
    }

    :scope.expanded {
        margin-left: 16rem;
    }

    :scope.collapsed .ui-top-bar {
        left: 4.5rem;
    }

    :scope.expanded .ui-top-bar {
        left: 16rem;
    }

    .main {
        padding: 5rem 2rem 1.5rem;
    }
}@scope(.layout-app-sidebar){:scope {
        background-color: var(--color-portal-sidebar);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 50;
        display: flex;
        flex-direction: column;
        transition: width 250ms ease-in-out;
        box-shadow: var(--shadow-xl);
    }

    :scope.collapsed {
        width: 4.5rem;
    }

    :scope.expanded {
        width: 16rem;
    }

    .sidebar-header {
        padding: 1.25rem 1.25rem 0.75rem;
        border-bottom: 1px solid var(--color-portal-sidebar-border);
    }

    .logo-link {
        display: block;
    }

    .logo {
        max-width: 9rem;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .sidebar-app-label {
        text-align: center;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-on-dark);
        margin-top: 0.5rem;
    }

    .sidebar-search {
        padding: 0.75rem 1rem;
        position: relative;
    }

    .search-icon {
        position: absolute;
        left: 1.625rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-on-dark-faint);
        pointer-events: none;
    }

    .search-input {
        width: 100%;
        background-color: var(--color-portal-sidebar-raised);
        border: 1px solid var(--color-portal-sidebar-border);
        border-radius: var(--radius-default);
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--color-text-on-dark-faint);
    }

    .search-input:focus {
        border-color: var(--color-portal-sidebar-border-hover);
    }

    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5rem 0;
    }

    .nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :scope.collapsed .nav-link {
        justify-content: center;
        padding: 0.625rem;
    }

    :scope.collapsed .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-footer {
        border-top: 1px solid var(--color-portal-sidebar-border);
        padding: 0.5rem;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .user-avatar {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background-color: var(--color-dark-raised);
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-details {
        flex: 1;
        min-width: 0;
    }

    .user-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-email {
        font-size: var(--text-xs);
        color: var(--color-text-on-dark-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-icon-btn {
        flex-shrink: 0;
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.375rem;
        border-radius: var(--radius-default);
        display: flex;
        align-items: center;
    }

    .footer-icon-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar-hover);
    }

    .collapse-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
        color: var(--color-text-on-dark-muted);
        font-size: var(--text-sm);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-default);
    }

    .collapse-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar-hover);
    }
}@scope(.layout-app-nav-item){:scope {
        margin: 0.125rem 0.5rem;
    }

    .nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        border-radius: var(--radius-default);
        cursor: pointer;
        text-align: left;
        text-decoration: none;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    .nav-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar-hover);
    }

    .nav-link.active {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar);
    }

    .nav-label {
        flex: 1;
    }

    .active-dot {
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
        flex-shrink: 0;
    }

    .expand-chevron {
        transition: transform 200ms;
        color: var(--color-text-on-dark-faint);
    }

    .expand-chevron.open {
        transform: rotate(90deg);
    }

    .sub-list {
        list-style: none;
        margin: 0;
        padding: 0.25rem 0 0.25rem 2.5rem;
    }

    .sub-link {
        display: block;
        padding: 0.375rem 0.75rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark-subtle);
        border-radius: var(--radius-default);
        text-decoration: none;
    }

    .sub-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar-hover);
    }

    .sub-link.active {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar);
    }
}.layout-sidebar-backdrop{display:none}@media(max-width:768px){.layout-sidebar-backdrop{display:block;position:fixed;inset:0;background-color:rgba(0,0,0,.5);z-index:45}.layout-app-main-area.collapsed,.layout-app-main-area.expanded{margin-left:0!important}.layout-app-main-area.collapsed .ui-top-bar,.layout-app-main-area.expanded .ui-top-bar{left:0!important}.layout-app-main-area .main{padding:4.5rem 1rem 1.5rem!important}.layout-app-sidebar{transform:translateX(-100%)!important}.layout-app-sidebar.mobile-open{transform:translateX(0)!important;width:16rem!important}.layout-app-sidebar.mobile-open .sidebar-header{display:block!important}.layout-app-sidebar.mobile-open .nav-link{justify-content:flex-start!important;padding:.625rem .75rem!important}.layout-app-sidebar .hide-mobile{display:none!important}}@scope(.layout-super-admin-border){:scope {
        position: fixed;
        inset: 0;
        border: 4px solid var(--color-red-800);
        pointer-events: none;
        z-index: 9999;
    }
}@scope(.layout-super-admin-bar){:scope {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--color-red-800);
        color: var(--color-white);
        padding: 0.5rem 0;
        font-size: var(--text-sm);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .disable-btn {
        padding: 0.125rem 0.75rem;
        background-color: var(--color-white);
        color: var(--color-red-800);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        border-radius: var(--radius-default);
        transition: background-color 150ms;
        cursor: pointer;
        border: none;
    }

    .disable-btn:hover {
        background-color: var(--color-red-100);
    }

    .disable-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}@scope(.layout-app-container-small){:scope {
        padding: 1.25rem 0;
        max-width: 72rem;
        margin-left: auto;
        margin-right: auto;
    }
}@scope(.layout-app-container-medium){:scope {
        padding: 1.25rem 0;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
    }
}@scope(.layout-app-container-large){:scope {
        padding: 1.25rem 0;
        max-width: 100rem;
        margin-left: auto;
        margin-right: auto;
    }
}@scope(.page-app-launcher){:scope {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
    }

    .bg-image {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(3px);
        transform: scale(1.1);
    }

    .bg-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--color-dark-overlay-heavy), var(--color-dark-overlay-light));
    }

    .content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 2rem;
    }

    .empty {
        text-align: center;
        max-width: 28rem;
    }

    .empty h2 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-light);
        color: var(--color-text-on-dark);
        margin-bottom: 1rem;
    }

    .empty p {
        color: var(--color-text-on-dark-muted);
    }

    .launcher-inner {
        width: 100%;
        max-width: 52rem;
    }

    .greeting {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        color: var(--color-text-on-dark);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }

    .subtitle {
        text-align: center;
        color: var(--color-text-on-dark-muted);
        margin-top: 0.25rem;
        margin-bottom: 2.5rem;
    }

    .apps-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .app-card {
            width: calc((100% - 2rem) / 3);
        }
    }

    .app-card {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        text-decoration: none;
        cursor: pointer;
    }

    .app-card::before {
        content: "";
        position: absolute;
        inset: 0;
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
        background-color: var(--color-border-on-dark);
        z-index: -2;
        transition: background-color 150ms;
    }

    .app-card::after {
        content: "";
        position: absolute;
        inset: 1px;
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
        background-color: var(--color-dark-raised);
        z-index: -1;
        transition: background-color 150ms;
    }

    .app-card:hover::before {
        background-color: var(--color-primary);
    }

    .app-card:hover::after {
        background-color: var(--color-dark);
    }

    .app-icon {
        color: var(--color-primary);
        margin-bottom: 1rem;
    }

    .app-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        color: var(--color-text-on-dark);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.375rem;
    }

    .app-desc {
        font-size: var(--text-xs);
        color: var(--color-text-on-dark-muted);
        line-height: 1.5;
    }
}@scope(.page-app-dashboard){:scope {
        
    }

    

    .dashboard-header {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .dashboard-title {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-black);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    

    .section {
        margin-bottom: 2rem;
    }

    .section-header {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    @media (min-width: 640px) {
        .section-header {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .section-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-left: 3px solid var(--color-primary);
        padding-left: 0.75rem;
    }

    .btn-new-reg {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 1rem;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-on-primary);
        background-color: var(--color-primary);
        border: none;
        cursor: pointer;
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        transition: opacity 150ms;
    }

    .btn-new-reg:hover {
        opacity: 0.85;
    }

    

    .track-groups {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .track-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        background-color: var(--color-portal-sidebar);
        border-bottom: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default) var(--radius-default) 0 0;
    }

    .track-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
    }

    .track-reg-count {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
    }


    .reg-division-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
    }

    .reg-car-number {
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
    }

    

    .points-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .points-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1280px) {
        .points-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .points-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .points-track {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }

    .points-division {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: 0.125rem;
    }

    .position-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        padding: 0.375rem 0.625rem;
        font-size: var(--text-base);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        color: var(--color-neutral-600);
        background-color: var(--color-neutral-100);
    }

    .position-badge.p1 {
        color: var(--color-gold-900);
        background-color: var(--color-gold-200);
    }

    .position-badge.p2 {
        color: var(--color-neutral-700);
        background-color: var(--color-neutral-200);
    }

    .position-badge.p3 {
        color: var(--color-amber-900);
        background-color: var(--color-amber-200);
    }

    .points-stats {
        display: flex;
        gap: 1.5rem;
    }

    .points-stat {
        display: flex;
        flex-direction: column;
    }

    .stat-value {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
    }

    .stat-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    

    .status-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem;
        align-items: stretch;
    }

    @media (max-width: 768px) {
        .status-row {
            grid-template-columns: 1fr;
        }
    }

    .registration-status {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .registration-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-green-700);
    }

    .registration-status-desc {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        line-height: 1.4;
    }

    .edit-registration-link {
        font-size: var(--text-xs);
    }

    .edit-registration-link button {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    

    .competitor-info-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        margin-bottom: 0.75rem;
    }

    .competitor-info {
        display: flex;
        gap: 2.5rem;
    }

    .competitor-info-item {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .competitor-info-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: var(--font-weight-medium);
    }

    .competitor-info-value {
        font-size: var(--text-sm);
        color: var(--color-neutral-800);
    }

    

    .empty-registrations {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1rem;
        color: var(--color-neutral-700);
    }

    .empty-registrations-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        color: var(--color-neutral-800);
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .empty-registrations-desc {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        max-width: 28rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    

    .coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1rem;
        color: var(--color-neutral-700);
    }

    .coming-soon-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-bold);
        color: var(--color-neutral-800);
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .coming-soon-desc {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        max-width: 28rem;
        line-height: 1.5;
    }

    

    .cta-banner-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    

    .edit-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .edit-driver-current {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
    }

    .modal-footer-buttons {
        display: flex;
        justify-content: flex-end;
        gap: calc(var(--spacing) * 2);
    }
}@scope(.page-org-selector){.loading-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    .loading-content {
        text-align: center;
    }

    .loading-text {
        color: var(--color-neutral-600);
    }

    .empty-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    .empty-content {
        text-align: center;
        max-width: 28rem;
    }

    .empty-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-light);
        color: var(--color-neutral-800);
        margin-bottom: 1rem;
    }

    .empty-desc {
        color: var(--color-neutral-600);
        margin-bottom: 1.5rem;
    }

    .selector-container {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
        padding: 2rem 0;
        position: relative;
    }

    .switching-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-radius: var(--radius-default);
    }

    .switching-content {
        text-align: center;
    }

    .switching-text {
        color: var(--color-neutral-600);
        font-size: var(--text-sm);
    }

    .selector-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .selector-title {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-light);
        color: var(--color-neutral-800);
        margin-bottom: 0.5rem;
    }

    .selector-desc {
        color: var(--color-neutral-600);
    }

    .org-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        text-align: left;
        transition: background-color 150ms;
        cursor: pointer;
        background: none;
        border: none;
        border-bottom: 1px solid var(--color-neutral-200);
    }

    .org-btn:last-child {
        border-bottom: none;
    }

    .org-btn:hover {
        background-color: var(--color-neutral-50);
    }

    .org-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .org-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-900);
    }

    .org-cert {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
    }

    .org-arrow {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-neutral-400);
    }
}@scope(.reg-wizard){.reg-wizard-prompt {
        font-size: var(--text-sm);
        font-weight: bold;
        color: var(--color-neutral-600);
        margin-bottom: calc(var(--spacing) * 4);
    }

    

    .driver-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing) * 3);
    }

    .driver-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        background: none;
        cursor: pointer;
        text-align: center;
        transition: border-color 150ms, background-color 150ms;
        color: var(--color-neutral-500);
    }

    .driver-option:hover {
        border-color: var(--color-neutral-400);
        background-color: var(--color-neutral-50);
    }

    .driver-option.selected {
        border-color: var(--color-primary);
        background-color: var(--color-red-50);
        color: var(--color-primary);
    }

    .driver-option-label {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-900);
    }

    .driver-option.selected .driver-option-label {
        color: var(--color-primary);
    }

    .driver-option-desc {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
        line-height: 1.4;
    }

    .no-active-season-msg {
        font-size: var(--text-sm);
        color: var(--color-red-50);
        background: var(--color-red-600);
        border: 1px solid var(--color-red-700);
        border-radius: var(--radius-default);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
        font-weight: var(--font-weight-semibold);
    }

    

    .confirmation-summary {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        margin-bottom: calc(var(--spacing) * 5);
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .summary-row:last-child {
        border-bottom: none;
    }

    .summary-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .summary-value {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }

    .payment-section {
        padding: calc(var(--spacing) * 4);
        background-color: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        margin-bottom: calc(var(--spacing) * 5);
    }

    .payment-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: calc(var(--spacing) * 2);
    }

    .payment-amount {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
        margin-bottom: calc(var(--spacing) * 2);
    }

    .payment-note {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-bottom: calc(var(--spacing) * 3);
    }

    .stripe-card-wrap {
        padding: calc(var(--spacing) * 3);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius);
        background: white;
        margin-top: calc(var(--spacing) * 3);
    }

    .stripe-card-error {
        font-size: var(--text-xs);
        color: var(--color-danger);
        margin-top: calc(var(--spacing) * 2);
    }

    .confirm-checkbox {
        display: flex;
        align-items: flex-start;
        gap: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .confirm-checkbox input[type="checkbox"] {
        margin-top: 0.125rem;
        accent-color: var(--color-primary);
    }

    label .required {
        color: var(--color-red-500);
        margin-left: 2px;
    }

    .wizard-required-hint .required {
        color: var(--color-red-500);
    }
}@scope(.onboarding-wizard){.onboarding-wizard-prompt {
        font-size: var(--text-sm);
        font-weight: bold;
        color: var(--color-neutral-600);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .wizard-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 5);
    }

    .wizard-field label {
        display: block;
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        margin-bottom: calc(var(--spacing) * 1);
    }

    .wizard-field label .required {
        color: var(--color-red-500);
        margin-left: 2px;
    }

    .wizard-required-hint {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
        margin-bottom: calc(var(--spacing) * 3);
    }

    .wizard-required-hint .required {
        color: var(--color-red-500);
    }

    

    .license-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing) * 3);
    }

    .license-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        background: none;
        cursor: pointer;
        text-align: center;
        transition: border-color 150ms, background-color 150ms;
        color: var(--color-neutral-500);
    }

    .license-option:hover {
        border-color: var(--color-neutral-400);
        background-color: var(--color-neutral-50);
    }

    .license-option.selected {
        border-color: var(--color-primary);
        background-color: var(--color-red-50);
        color: var(--color-primary);
    }

    .license-option-label {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-900);
    }

    .license-option.selected .license-option-label {
        color: var(--color-primary);
    }

    .license-option-desc {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
        line-height: 1.4;
    }

    

    .wizard-checkbox {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .wizard-checkbox input[type="checkbox"] {
        width: auto;
        margin-right: calc(var(--spacing) * 1);
        accent-color: var(--color-primary);
    }
}@scope(.page-company-profile){:scope {
        
    }

    .save-btn-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .save-btn-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .form-label-tooltip {
        display: block;
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        margin-bottom: 0.5rem;
    }

    .form-label-inner {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .tooltip-icon {
        cursor: help;
        color: var(--color-neutral-500);
    }

    .grid-cols-3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .grid-cols-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .address-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .address-grid {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    @media (min-width: 1280px) {
        .address-grid {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    .address-col-1 {
        grid-column: span 1;
    }

    @media (min-width: 640px) {
        .address-col-1 {
            grid-column: span 3;
        }
    }

    @media (min-width: 1280px) {
        .address-col-1 {
            grid-column: span 1;
        }
    }

    .address-col-2 {
        grid-column: span 1;
    }

    @media (min-width: 640px) {
        .address-col-2 {
            grid-column: span 2;
        }
    }

    @media (min-width: 1280px) {
        .address-col-2 {
            grid-column: span 1;
        }
    }

    .checkbox-label {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        font-size: var(--text-sm);
        width: fit-content;
        cursor: pointer;
    }

    .spacer-sm {
        margin-bottom: 0.25rem;
    }

    .spacer-md {
        margin-bottom: 1rem;
    }

    .spacer-lg {
        margin-bottom: 1.5rem;
    }

    .spacer-xl {
        margin-bottom: 2.25rem;
    }

    .spacer-xl-responsive {
        margin-bottom: 2.25rem;
    }

    @media (min-width: 1280px) {
        .spacer-xl-responsive {
            margin-bottom: 0.75rem;
        }
    }

    .empty-text {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        font-style: italic;
    }

    .hint-text {
        color: var(--color-gray-500);
        font-size: var(--text-sm);
    }

    .depository-contacts-border {
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        overflow: hidden;
    }

    .settings-two-col {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .settings-two-col {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .interest-pays-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .interest-pays-at-grid-single {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0.5rem;
    }

    .interest-pays-at-grid-double {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .maturity-label {
        font-size: var(--text-sm);
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        color: var(--color-neutral-700);
        margin-bottom: 0.5rem;
    }

    .maturity-label-hint {
        display: flex;
        color: var(--color-neutral-500);
    }

    .checkbox-row {
        font-size: var(--text-sm);
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        width: fit-content;
        cursor: pointer;
    }

    .link-text {
        color: var(--color-sky-700);
    }

    .link-text:hover {
        text-decoration: underline;
    }

    .documents-table {
        min-width: 100%;
        table-layout: auto;
    }

    .documents-table-header {
        background-color: var(--color-neutral-600);
        color: var(--color-white);
    }

    .documents-table-header th {
        padding: 0.5rem 1rem;
        text-align: left;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
    }

    .documents-table-header th:last-child {
        text-align: center;
    }

    .documents-table tbody {
        font-size: var(--text-sm);
    }

    .documents-table td {
        padding: 0.5rem 1rem;
    }

    .documents-row-alt {
        background-color: var(--color-neutral-100);
    }

    .document-type {
        font-style: italic;
    }

    .download-link {
        color: var(--color-sky-700);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .download-link:hover {
        text-decoration: underline;
    }

    .upload-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .upload-section {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .upload-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .button-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .current-logo {
        height: 40px;
        width: auto;
    }

    .financials-table-container {
        overflow-x: auto;
    }

    .financials-table {
        table-layout: fixed;
        width: 100%;
        min-width: 64rem;
    }

    .financials-table tbody tr td {
        padding: 0.5rem;
    }

    .financials-label {
        font-size: var(--text-sm);
        text-align: right;
        width: auto;
    }

    .financials-avg {
        font-size: var(--text-sm);
        text-align: center;
        width: auto;
    }

    .preference-select {
        width: 100%;
    }

    @media (min-width: 768px) {
        .preference-select {
            width: 50%;
        }
    }
}@scope(.page-institution-report){:scope {
        
    }

    .loading-text {
        color: var(--color-neutral-500);
    }

    .company-info-container {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .company-logo-container {
        display: flex;
        flex-direction: column;
        height: fit-content;
        max-height: 13rem;
        width: 13rem;
        align-items: center;
        justify-content: flex-start;
    }

    .company-logo {
        height: fit-content;
        width: auto;
        max-height: 13rem;
        max-width: 13rem;
        font-size: var(--text-sm);
    }

    .company-details {
        width: 100%;
        padding-right: 1rem;
    }

    .details-flex {
        display: flex;
        gap: 1rem;
    }

    @media (max-width: 767px) {
        .details-flex {
            flex-direction: column;
        }
    }

    @media (min-width: 768px) {
        .details-flex {
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    .details-column {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .address-block {
        font-size: var(--text-sm);
    }

    .address-block.no-address2 {
        margin-bottom: 1.25rem;
    }

    .address-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-700);
    }

    .cert-info {
        font-size: var(--text-sm);
    }

    .contact-card {
        font-size: var(--text-sm);
    }

    .contact-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-700);
    }

    .contact-name {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .contact-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-neutral-700);
    }

    .contact-link {
        width: fit-content;
    }

    .contact-link a {
        font-size: var(--text-sm);
        color: var(--color-sky-700);
    }

    .contact-link a:hover {
        color: var(--color-sky-800);
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }

    .contact-link-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 100%;
        min-height: 0;
    }

    .contact-link-icon {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-neutral-700);
    }

    .general-info-spacer {
        padding-top: 1.25rem;
    }

    .financials-empty {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
    }

    .financials-table-border {
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-default);
        overflow: hidden;
    }

    .financials-table {
        min-width: 100%;
    }

    .financials-table-header {
        background-color: var(--color-neutral-600);
        color: var(--color-white);
    }

    .financials-table-header th {
        padding: 0.375rem 0.5rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
    }

    .financials-table-header th:first-child {
        text-align: left;
        width: 25%;
    }

    .financials-table-header th:not(:first-child) {
        text-align: center;
    }

    .financials-table tbody {
        font-size: var(--text-sm);
    }

    .financials-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .financials-row-alt {
        background-color: var(--color-neutral-100);
    }

    .financials-label-cell {
        text-align: right;
        border-right: 1px solid var(--color-neutral-300);
    }

    .financials-value-cell {
        text-align: right;
        border-right: 1px solid var(--color-neutral-300);
    }

    .financials-value-cell:last-child {
        border-right: none;
    }

    .terms-section {
        margin-top: 1.5rem;
    }

    .terms-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 1024px) {
        .terms-grid {
            grid-template-columns: repeat(16, 1fr);
        }
    }

    .terms-col-5 {
        grid-column: span 1;
    }

    @media (min-width: 1024px) {
        .terms-col-5 {
            grid-column: span 5;
        }
    }

    .terms-col-4 {
        grid-column: span 1;
        font-size: var(--text-sm);
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    @media (min-width: 1024px) {
        .terms-col-4 {
            grid-column: span 4;
        }
    }

    .terms-col-3 {
        grid-column: span 1;
        font-size: var(--text-sm);
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    @media (min-width: 1024px) {
        .terms-col-3 {
            grid-column: span 3;
        }
    }

    .depository-terms-table {
        width: 100%;
        font-size: var(--text-sm);
    }

    .depository-terms-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .depository-terms-label {
        text-align: right;
        padding-right: 2ch;
    }

    .depository-terms-value {
        text-align: left;
        white-space: nowrap;
        padding-left: 0;
    }

    .rate-terms-table thead tr th {
        padding: 0.25rem 0.5rem;
        font-weight: var(--font-weight-bold);
    }

    .rate-terms-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .rate-terms-label {
        text-align: right;
    }

    .rate-terms-rate {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .rate-terms-amount {
        text-align: right;
    }

    .callables-table thead tr th {
        padding: 0.25rem 0.5rem;
        font-weight: var(--font-weight-bold);
        text-align: left;
    }

    .callables-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .callable-item {
        white-space: pre-wrap;
        display: inline;
    }

    .callable-icon {
        color: var(--color-green-800);
    }

    .section-text {
        font-size: var(--text-sm);
    }

    .wiring-table-desktop {
        table-layout: fixed;
        width: 100%;
        display: none;
    }

    @media (min-width: 1024px) {
        .wiring-table-desktop {
            display: table;
        }
    }

    .wiring-table-mobile {
        table-layout: fixed;
        width: 100%;
    }

    @media (min-width: 1024px) {
        .wiring-table-mobile {
            display: none;
        }
    }

    .wiring-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .wiring-label {
        text-align: right;
        font-size: var(--text-sm);
    }

    .wiring-value {
        font-size: var(--text-sm);
    }

    .wiring-spacer {
        padding: 0.5rem 0;
    }

    .further-instructions {
        margin-top: 1rem;
    }

    .further-instructions-table {
        table-layout: fixed;
        width: 100%;
    }

    .further-instructions-table tbody tr td {
        padding: 0.25rem 0.5rem;
    }

    .further-instructions-label {
        text-align: right;
        vertical-align: top;
        font-size: var(--text-sm);
    }

    .further-instructions-value-desktop {
        font-size: var(--text-sm);
        display: none;
    }

    @media (min-width: 1024px) {
        .further-instructions-value-desktop {
            display: table-cell;
        }
    }

    .further-instructions-row-mobile {
        display: table-row;
    }

    @media (min-width: 1024px) {
        .further-instructions-row-mobile {
            display: none;
        }
    }

    .further-instructions-value-mobile {
        font-size: var(--text-sm);
    }
}@scope(.page-institution-user-list){:scope {
        
    }

    .search-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .email-link {
        width: fit-content;
    }

    .email-link a {
        color: var(--color-sky-700);
    }

    .email-link a:hover {
        color: var(--color-sky-800);
        text-decoration: underline;
    }

    .email-link-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 100%;
        min-height: 0;
    }

    .email-icon {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-sky-700);
    }

    .action-buttons {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .edit-link {
        cursor: pointer;
        color: var(--color-sky-700);
    }

    .edit-link:hover {
        color: var(--color-sky-800);
    }

    .edit-link-inner {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }

    .delete-btn {
        cursor: pointer;
        color: var(--color-red-600);
    }

    .delete-btn:hover {
        color: var(--color-red-700);
    }

    .delete-btn-inner {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }
}@scope(.page-app-profile){:scope {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
    }

    .bg-image {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(3px);
        transform: scale(1.1);
    }

    .bg-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--color-dark-overlay-heavy), var(--color-dark-overlay-light));
    }

    .content {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 100vh;
        padding: 3rem 1.5rem;
    }

    .profile-outer {
        width: 100%;
        max-width: 44rem;
    }

    .ui-back a {
        color: var(--color-text-on-dark-muted);
    }

    .ui-back a:hover {
        color: var(--color-text-on-dark);
    }

    .profile-card {
        background-color: var(--color-dark-raised);
        border: 1px solid var(--color-border-on-dark);
        border-radius: 0.5rem;
        padding: 2.5rem;
    }

    .profile-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        color: var(--color-text-on-dark);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
        margin-bottom: 0.25rem;
    }

    .profile-subtitle {
        text-align: center;
        color: var(--color-text-on-dark-muted);
        margin-bottom: 2rem;
    }

    .profile-loading {
        text-align: center;
        color: var(--color-text-on-dark-muted);
        padding: 2rem 0;
    }

    .profile-section {
        margin-bottom: 1.5rem;
    }

    .profile-section-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border-on-dark);
    }

    .profile-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .profile-row-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    @media (max-width: 640px) {
        .profile-row,
        .profile-row-3 {
            grid-template-columns: 1fr;
        }
    }

    .profile-field {
        min-width: 0;
    }

    .ui-form label {
        color: var(--color-text-on-dark);
    }

    .profile-divider {
        border-top: 1px solid var(--color-border-on-dark);
        margin: 2rem 0;
    }

    .profile-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 1.5rem;
    }

    .profile-error {
        color: var(--color-red-400);
        font-size: var(--text-sm);
        margin-top: 0.75rem;
    }

    .profile-success {
        color: var(--color-success);
        font-size: var(--text-sm);
        margin-top: 0.75rem;
    }
}@scope(.layout-manager-layout){:scope {
        min-height: 100vh;
        background-color: var(--color-neutral-50);
    }
}@scope(.layout-manager-main-area){:scope {
        min-height: 100vh;
        transition: margin-left 250ms ease-in-out;
    }

    :scope.collapsed {
        margin-left: 4.5rem;
    }

    :scope.expanded {
        margin-left: 16rem;
    }

    :scope.collapsed .ui-top-bar {
        left: 4.5rem;
    }

    :scope.expanded .ui-top-bar {
        left: 16rem;
    }

    .main {
        padding: 5rem 2rem 1.5rem;
    }
}@scope(.manager-org-picker){:scope {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4rem 2rem;
    }

    .org-picker-icon {
        width: 4rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-default);
        background-color: var(--color-neutral-100);
        color: var(--color-neutral-500);
        margin-bottom: 1.5rem;
    }

    .org-picker-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
        margin-bottom: 0.375rem;
    }

    .org-picker-subtitle {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-bottom: 2rem;
    }

    .org-picker-combobox {
        width: 100%;
        max-width: 24rem;
    }
}@scope(.layout-manager-sidebar){:scope {
        background-color: var(--color-manager-sidebar);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 50;
        display: flex;
        flex-direction: column;
        transition: width 250ms ease-in-out;
        box-shadow: var(--shadow-xl);
    }

    :scope.collapsed {
        width: 4.5rem;
    }

    :scope.expanded {
        width: 16rem;
    }

    .sidebar-header {
        padding: 1.25rem 1.25rem 0.75rem;
        border-bottom: 1px solid var(--color-manager-sidebar-border);
    }

    .logo-link {
        display: block;
    }

    .logo {
        max-width: 9rem;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .sidebar-app-label {
        text-align: center;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-on-dark);
        margin-top: 0.5rem;
    }

    .sidebar-search {
        padding: 0.75rem 1rem;
        position: relative;
    }

    .search-icon {
        position: absolute;
        left: 1.625rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-on-dark-faint);
        pointer-events: none;
    }

    .search-input {
        width: 100%;
        background-color: var(--color-manager-sidebar-raised);
        border: 1px solid var(--color-manager-sidebar-border);
        border-radius: var(--radius-default);
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--color-text-on-dark-faint);
    }

    .search-input:focus {
        border-color: var(--color-manager-sidebar-border-hover);
    }

    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5rem 0;
    }

    .nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :scope.collapsed .nav-link {
        justify-content: center;
        padding: 0.625rem;
    }

    :scope.collapsed .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-footer {
        border-top: 1px solid var(--color-manager-sidebar-border);
        padding: 0.5rem;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .user-avatar {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-details {
        flex: 1;
        min-width: 0;
    }

    .user-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-email {
        font-size: var(--text-xs);
        color: var(--color-text-on-dark-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-icon-btn {
        flex-shrink: 0;
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.375rem;
        border-radius: var(--radius-default);
        display: flex;
        align-items: center;
    }

    .footer-icon-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar-hover);
    }

    .collapse-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
        color: var(--color-text-on-dark-muted);
        font-size: var(--text-sm);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-default);
        transition: background-color 150ms ease, color 150ms ease;
    }

    .collapse-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar-hover);
    }
}@scope(.layout-manager-nav-item){:scope {
        margin: 0.125rem 0.5rem;
    }

    .nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        border-radius: var(--radius-default);
        cursor: pointer;
        text-align: left;
        text-decoration: none;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        transition: background-color 150ms ease, color 150ms ease;
    }

    .nav-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar-hover);
    }

    .nav-link.active {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar);
    }

    .nav-label {
        flex: 1;
    }

    .active-dot {
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
        flex-shrink: 0;
        animation: dot-pop 200ms ease forwards;
    }

    @keyframes dot-pop {
        from { transform: scale(0); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
    }

    .expand-chevron {
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        color: var(--color-text-on-dark-faint);
    }

    .expand-chevron.open {
        transform: rotate(90deg);
    }

    
    .sub-list {
        list-style: none;
        margin: 0;
        padding: 0 0 0 2.5rem;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition:
            max-height 240ms cubic-bezier(0.4, 0, 0.2, 1),
            opacity    180ms ease,
            padding    240ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sub-list.open {
        max-height: 24rem;
        opacity: 1;
        padding: 0.25rem 0 0.25rem 2.5rem;
    }

    .sub-link {
        display: block;
        padding: 0.375rem 0.75rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark-subtle);
        border-radius: var(--radius-default);
        text-decoration: none;
        transition: background-color 140ms ease, color 140ms ease;
    }

    .sub-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-manager-sidebar-hover);
    }

    .sub-link.active {
        color: var(--color-text-on-dark);
        background-color: var(--color-portal-sidebar);
    }
}@media(max-width:768px){.layout-manager-main-area.collapsed,.layout-manager-main-area.expanded{margin-left:0!important}.layout-manager-main-area.collapsed .ui-top-bar,.layout-manager-main-area.expanded .ui-top-bar{left:0!important}.layout-manager-main-area .main{padding:4.5rem 1rem 1.5rem!important}.layout-manager-sidebar{transform:translateX(-100%)!important;transition:transform 260ms cubic-bezier(.4,0,.2,1),width 250ms ease-in-out!important}.layout-manager-sidebar.mobile-open{transform:translateX(0)!important;width:16rem!important}.layout-manager-sidebar.mobile-open .sidebar-header{display:block!important}.layout-manager-sidebar.mobile-open .nav-link{justify-content:flex-start!important;padding:.625rem .75rem!important}.layout-manager-sidebar .hide-mobile{display:none!important}}@scope(.page-manager-dashboard){.dashboard-header {
        margin-bottom: 2rem;
    }

    .dashboard-title {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
    }

    .dashboard-subtitle {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-top: 0.25rem;
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .dashboard-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .section-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-icon {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-default);
        background-color: var(--color-neutral-100);
        color: var(--color-neutral-600);
    }

    .section-content {
        flex: 1;
        min-width: 0;
    }

    .section-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }

    .section-description {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-top: 0.25rem;
    }

    .section-count {
        display: inline-block;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-600);
        background-color: var(--color-neutral-100);
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        margin-top: 0.5rem;
    }
}@scope(.page-manager-cars){a {
        color: var(--color-primary);
        text-decoration: underline;
    }

    a:hover {
        color: var(--color-primary-hover);
    }

    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .page-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
    }

    .page-header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .season-filter {
        min-width: 14rem;
    }

    .search-fields {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .edit-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .checkbox-field label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .checkbox-field input[type="checkbox"] {
        accent-color: var(--color-primary);
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .registrations-overview {
        margin-bottom: 1rem;
    }

    .registrations-chart-wrap {
        height: 200px;
        margin-bottom: 1rem;
    }

    .registrations-summary {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        padding-top: 0.5rem;
    }

    .summary-stat {
        display: flex;
        flex-direction: column;
    }

    .summary-divider {
        width: 1px;
        align-self: stretch;
        background: var(--color-neutral-200);
    }

    .summary-value {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-black);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
    }

    .summary-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .summary-classes {
        display: grid;
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        gap: 0.125rem 1.5rem;
    }

    .summary-class-item {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
    }

    .summary-class-value {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        color: var(--color-text-heading);
        min-width: 1.5rem;
        text-align: right;
    }

    .summary-class-label {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
    }

    .no-seasons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .no-seasons p {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
    }

    .no-seasons a {
        color: var(--color-primary);
        text-decoration: underline;
    }
}.w9-preview-canvas-wrap{background:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius);overflow:hidden}.w9-preview-canvas-wrap canvas{width:100%;height:auto;display:block}@scope(.page-manager-drivers){.search-fields {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
}@scope(.page-manager-contacts){.search-fields {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    a {
        color: var(--color-primary);
        text-decoration: underline;
    }

    a:hover {
        color: var(--color-primary-hover);
    }
}@scope(.page-manager-seasons){.page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .page-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
    }

    .row-actions {
        display: flex;
        gap: 0.375rem;
        justify-content: center;
    }

    .season-form-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .checkbox-field label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .checkbox-field input[type="checkbox"] {
        accent-color: var(--color-primary);
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }
}@scope(.page-manager-classes){.page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .page-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
    }

    .divisions-cell {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .division-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .division-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs);
        padding: 0.125rem 0.5rem;
        background-color: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius);
        color: var(--color-neutral-700);
    }

    .div-edit-btn,
    .div-delete-btn {
        all: unset;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        color: var(--color-neutral-400);
        padding: 0.0625rem;
        border-radius: 2px;
    }

    .div-edit-btn:hover {
        color: var(--color-primary);
    }

    .div-delete-btn:hover {
        color: var(--color-red-600);
    }

    .reserved-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs);
        padding: 0.125rem 0.5rem;
        background-color: var(--color-red-50);
        border: 1px solid var(--color-red-200);
        border-radius: var(--radius);
        color: var(--color-red-700);
        font-weight: var(--font-weight-medium);
    }

    .no-divisions {
        color: var(--color-neutral-400);
        font-size: var(--text-sm);
    }

    .add-division-btn {
        all: unset;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs);
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
    }

    .add-division-btn:hover {
        text-decoration: underline;
    }

    .class-form-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .checkbox-field label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        cursor: pointer;
    }

    .checkbox-field input[type="checkbox"] {
        accent-color: var(--color-primary);
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }
}@scope(.page-manager-integrations){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.integration-section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 5);
	}

	.integration-section-header {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 2);
	}

	.integration-section-title {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.integration-section-desc {
		font-size: var(--text-sm);
		color: var(--color-neutral-600);
		line-height: 1.5;
	}

	.integration-section-desc a {
		color: var(--color-primary);
		text-decoration: underline;
	}

	.integration-fields {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
		max-width: 32rem;
	}

	.key-input-wrap {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 2);
	}

	.key-input-wrap .ui-form {
		flex: 1;
	}

	.integration-actions {
		display: flex;
		gap: calc(var(--spacing) * 2);
	}

	

	.api-keys-section-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: calc(var(--spacing) * 4);
		margin-top: calc(var(--spacing) * 8);
		margin-bottom: calc(var(--spacing) * 4);
	}

	.empty-state {
		font-size: var(--text-sm);
		color: var(--color-neutral-500);
	}

	.keys-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--text-sm);
	}

	.keys-table th {
		text-align: left;
		padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-muted);
		border-bottom: 1px solid var(--color-neutral-200);
	}

	.keys-table td {
		padding: calc(var(--spacing) * 3);
		border-bottom: 1px solid var(--color-neutral-100);
		vertical-align: middle;
	}

	.keys-table tr:last-child td {
		border-bottom: none;
	}

	.key-prefix {
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		background: var(--color-neutral-100);
		padding: 2px 6px;
		border-radius: 4px;
	}

	.new-key-fields {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
	}

	.key-reveal {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
	}

	.key-reveal-warning {
		font-size: var(--text-sm);
		color: var(--color-neutral-600);
		font-weight: var(--font-weight-semibold);
	}

	.key-reveal-box {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 2);
		background: var(--color-neutral-50);
		border: 1px solid var(--color-neutral-200);
		border-radius: 6px;
		padding: calc(var(--spacing) * 3);
	}

	.key-reveal-value {
		flex: 1;
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		word-break: break-all;
		color: var(--color-text-body);
	}
}@scope(.page-manager-sales-accounts){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}
}@scope(.page-manager-sales-products){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}
}.modal-footer-buttons{display:flex;gap:calc(var(--spacing) * 2);justify-content:flex-end}.sales-account-form-fields,.product-form-fields{display:flex;flex-direction:column;gap:calc(var(--spacing) * 4)}.form-section-label{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);padding-top:calc(var(--spacing) * 2);border-top:1px solid var(--color-neutral-200);margin-top:calc(var(--spacing) * 2)}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing) * 4)}.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--spacing) * 4)}.checkbox-fields{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.checkbox-field{display:flex;align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-sm);cursor:pointer}.checkbox-field input[type=checkbox]{width:16px;height:16px;cursor:pointer}@scope(.page-manager-inventory){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.inventory-stats-row {
		display: flex;
		gap: calc(var(--spacing) * 4);
		margin-bottom: calc(var(--spacing) * 6);
	}

	.inventory-stat-card {
		background: var(--color-neutral-50);
		border: 1px solid var(--color-neutral-200);
		border-radius: 8px;
		padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
		min-width: 140px;
	}

	.inventory-stat-label {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		font-weight: var(--font-weight-semibold);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-bottom: calc(var(--spacing) * 1);
	}

	.inventory-stat-value {
		font-size: var(--text-3xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.inventory-tables-grid {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: calc(var(--spacing) * 6);
		align-items: start;
	}

	.inventory-table-section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
	}
}@scope(.page-manager-inventory-shipments){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.shipment-name-btn {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		font-weight: var(--font-weight-semibold);
		color: var(--color-primary);
		font-size: var(--text-sm);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.shipment-name-btn:hover {
		color: var(--color-primary-dark, var(--color-primary));
	}

	.shipment-detail {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 6);
	}

	.shipment-detail-header {
		display: flex;
		align-items: center;
	}

	.back-btn {
		display: inline-flex;
		align-items: center;
		gap: calc(var(--spacing) * 1);
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		font-weight: var(--font-weight-medium);
	}

	.back-btn:hover {
		color: var(--color-text-body);
	}

	.shipment-detail-meta {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 2);
	}

	.shipment-detail-title {
		font-size: var(--text-xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.shipment-detail-sub {
		display: flex;
		gap: calc(var(--spacing) * 6);
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	.shipment-detail-notes {
		font-size: var(--text-sm);
		color: var(--color-neutral-600);
		font-style: italic;
	}

	.shipment-form-fields {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
	}

	.shipment-scan-section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
		background: var(--color-neutral-50);
		border: 1px solid var(--color-neutral-200);
		border-radius: 8px;
		padding: calc(var(--spacing) * 4);
	}

	.scan-controls {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
		max-width: 28rem;
	}

	.scan-qty-row {
		display: flex;
		gap: calc(var(--spacing) * 2);
		align-items: flex-end;
	}

	.scan-qty-row .ui-form {
		flex: 1;
	}

	.shipment-totals-section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
	}

	.shipment-totals-table {
		width: auto;
		min-width: 280px;
		border-collapse: collapse;
		font-size: var(--text-sm);
	}

	.shipment-totals-table th {
		text-align: left;
		padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-muted);
		border-bottom: 1px solid var(--color-neutral-200);
	}

	.shipment-totals-table td {
		padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
		border-bottom: 1px solid var(--color-neutral-100);
	}

	.shipment-totals-table tr:last-child td {
		border-bottom: none;
	}

	.shipment-items-section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
	}
}@scope(.page-manager-inventory-suppliers){.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-heading);
		font-family: var(--font-heading);
	}

	.supplier-form-fields {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
	}
}.modal-footer-buttons{display:flex;gap:calc(var(--spacing) * 2);justify-content:flex-end}.section-label{display:flex;align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}.inventory-summary-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.inventory-summary-table th{text-align:left;padding:calc(var(--spacing) * 2)calc(var(--spacing) * 3);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);border-bottom:1px solid var(--color-neutral-200)}.inventory-summary-table td{padding:calc(var(--spacing) * 2)calc(var(--spacing) * 3);border-bottom:1px solid var(--color-neutral-100);vertical-align:middle}.inventory-summary-table tr:last-child td{border-bottom:none}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.table-loading,.table-empty{text-align:center;color:var(--color-neutral-400);padding:calc(var(--spacing) * 4)!important;font-style:italic}.serial-badge{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--color-neutral-100);padding:2px 6px;border-radius:4px}@scope(.page-manager-licensing){:scope {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-title {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
        font-family: var(--font-heading);
    }

    .section-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        font-family: var(--font-heading);
        margin-bottom: 1rem;
    }

    .section-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .section-header-row .section-title {
        margin-bottom: 0;
    }

    .license-table {
        width: 100%;
        border-collapse: collapse;
    }

    .license-table th {
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-700);
        border-bottom: 1px solid var(--color-neutral-200);
    }

    .license-table td {
        padding: 0.75rem 1rem;
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .license-table tr:last-child td {
        border-bottom: none;
    }

    .mono {
        font-family: var(--font-mono, monospace);
        font-size: var(--text-xs);
    }

    .icon-value {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .text-success {
        color: var(--color-success, #15803d);
        font-weight: var(--font-weight-medium);
    }

    .user-count-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--color-neutral-50, #fafafa);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        padding: 1rem;
        margin-top: 1rem;
    }

    .user-count-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .user-count-icon {
        padding: 0.5rem;
        background: var(--color-neutral-100);
        border-radius: 50%;
    }

    .user-count-label {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-600);
    }

    .user-count-value {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.25rem;
    }

    .user-count-number {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-heading);
    }

    .user-count-sep {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
    }

    .user-count-right {
        text-align: right;
    }

    .user-count-right-label {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
    }

    .user-count-right-value {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }

    .print-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        color: var(--color-primary);
        text-decoration: none;
        cursor: pointer;
    }

    .print-link:hover {
        text-decoration: underline;
    }

    .tos-sections {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .tos-heading {
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-800);
        margin-bottom: 0.5rem;
    }

    .tos-sections p {
        line-height: 1.5;
    }

    .eula-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
        cursor: pointer;
        margin-top: 1.5rem;
    }

    .eula-toggle:hover {
        color: var(--color-primary-700, #0369a1);
    }

    .eula-chevron {
        display: inline-flex;
        transition: transform 0.2s;
    }

    .eula-chevron.open {
        transform: rotate(90deg);
    }

    .eula-content {
        margin-top: 1rem;
        padding: 1rem;
        background: var(--color-neutral-50, #fafafa);
        border-radius: var(--radius-md, 0.375rem);
        font-size: var(--text-xs);
        color: var(--color-neutral-600);
    }

    .eula-content h5 {
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-800);
        margin-top: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .eula-content p {
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }

    .eula-disclaimer {
        margin-bottom: 0.75rem;
    }

    .tos-footer {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: 1.5rem;
    }

}@scope(.layout-admin-layout){:scope {
        min-height: 100vh;
        background-color: var(--color-neutral-50);
    }
}@scope(.layout-admin-main-area){:scope {
        min-height: 100vh;
        transition: margin-left 250ms ease-in-out;
    }

    :scope.collapsed {
        margin-left: 4.5rem;
    }

    :scope.expanded {
        margin-left: 16rem;
    }

    :scope.collapsed .ui-top-bar {
        left: 4.5rem;
    }

    :scope.expanded .ui-top-bar {
        left: 16rem;
    }

    .main {
        padding-top: 3.5rem;
    }

    .admin-page-container {
        padding: 1.5rem 1.75rem;
    }

    .admin-page-header {
        display: flex;
        align-items: center;
        padding: 0.5rem 1.25rem;
        background-color: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-neutral-200);
        font-size: var(--text-sm);
    }
}@scope(.layout-admin-sidebar){:scope {
        background-color: var(--color-admin-sidebar);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 50;
        display: flex;
        flex-direction: column;
        transition: width 250ms ease-in-out;
        box-shadow: var(--shadow-xl);
    }

    :scope.collapsed {
        width: 4.5rem;
    }

    :scope.expanded {
        width: 16rem;
    }

    .sidebar-header {
        padding: 1.25rem 1.25rem 0.75rem;
        border-bottom: 1px solid var(--color-admin-sidebar-border);
    }

    .logo-link {
        display: block;
    }

    .logo {
        max-width: 9rem;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .sidebar-app-label {
        text-align: center;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-on-dark);
        margin-top: 0.5rem;
    }

    .sidebar-search {
        padding: 0.75rem 1rem;
        position: relative;
    }

    .search-icon {
        position: absolute;
        left: 1.625rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-on-dark-faint);
        pointer-events: none;
    }

    .search-input {
        width: 100%;
        background-color: var(--color-admin-sidebar-raised);
        border: 1px solid var(--color-admin-sidebar-border);
        border-radius: var(--radius-default);
        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--color-text-on-dark-faint);
    }

    .search-input:focus {
        border-color: var(--color-admin-sidebar-border-hover);
    }

    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5rem 0;
    }

    .nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :scope.collapsed .nav-link {
        justify-content: center;
        padding: 0.625rem;
    }

    :scope.collapsed .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-footer {
        border-top: 1px solid var(--color-admin-sidebar-border);
        padding: 0.5rem;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .user-avatar {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
        color: var(--color-white);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-details {
        flex: 1;
        min-width: 0;
    }

    .user-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-email {
        font-size: var(--text-xs);
        color: var(--color-text-on-dark-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer-icon-btn {
        flex-shrink: 0;
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.375rem;
        border-radius: var(--radius-default);
        display: flex;
        align-items: center;
    }

    .footer-icon-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-admin-sidebar-hover);
    }

    .collapse-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
        color: var(--color-text-on-dark-muted);
        font-size: var(--text-sm);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-default);
    }

    .collapse-btn:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-admin-sidebar-hover);
    }
}@media(max-width:768px){.layout-admin-main-area.collapsed,.layout-admin-main-area.expanded{margin-left:0!important}.layout-admin-main-area.collapsed .ui-top-bar,.layout-admin-main-area.expanded .ui-top-bar{left:0!important}.layout-admin-main-area .main{padding-top:3.5rem!important}.layout-admin-main-area .admin-page-container{padding:1rem!important}.layout-admin-sidebar{transform:translateX(-100%)!important}.layout-admin-sidebar.mobile-open{transform:translateX(0)!important;width:16rem!important}.layout-admin-sidebar.mobile-open .sidebar-header{display:block!important}.layout-admin-sidebar.mobile-open .nav-link{justify-content:flex-start!important;padding:.625rem .75rem!important}.layout-admin-sidebar .hide-mobile{display:none!important}}@scope(.admin-search-box){:scope {
        position: relative;
        display: flex;
        align-items: center;
    }

    .admin-search-icon {
        position: absolute;
        left: 0.625rem;
        color: var(--color-neutral-400);
        pointer-events: none;
    }

    .admin-search-input {
        width: 18rem;
        padding: 0.375rem 0.75rem 0.375rem 2rem;
        font-size: var(--text-sm);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        background-color: var(--color-neutral-50);
        color: var(--color-text-body);
        outline: none;
    }

    .admin-search-input::placeholder {
        color: var(--color-neutral-400);
    }

    .admin-search-input:focus {
        border-color: var(--color-primary-300);
        background-color: var(--color-surface);
        box-shadow: 0 0 0 2px var(--color-primary-100);
    }

    .admin-search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 22rem;
        margin-top: 0.25rem;
        background-color: var(--color-surface);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        box-shadow: var(--shadow-lg);
        z-index: 100;
        max-height: 20rem;
        overflow-y: auto;
    }

    .admin-search-result {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
    }

    .admin-search-result:hover,
    .admin-search-result.active {
        background-color: var(--color-neutral-50);
    }

    .admin-search-result-name {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
        white-space: nowrap;
    }

    .admin-search-result-email {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .admin-search-result-phone {
        font-size: var(--text-xs);
        color: var(--color-neutral-400);
        white-space: nowrap;
        margin-left: auto;
    }

    .admin-search-mark {
        background-color: var(--color-yellow-100);
        color: inherit;
        border-radius: 2px;
        padding: 0 1px;
    }
}@scope(.layout-admin-nav-item){:scope {
        margin: 0.125rem 0.5rem;
    }

    .nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-on-dark-muted);
        background: none;
        border: none;
        border-radius: var(--radius-default);
        cursor: pointer;
        text-align: left;
        text-decoration: none;
    }

    .nav-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-admin-sidebar-hover);
    }

    .nav-link.active {
        color: var(--color-text-on-dark);
        background-color: rgba(255, 255, 255, 0.08);
    }

    .nav-label {
        flex: 1;
    }

    .active-dot {
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 9999px;
        background-color: var(--color-primary);
        flex-shrink: 0;
    }

    .expand-chevron {
        transition: transform 200ms;
        color: var(--color-text-on-dark-faint);
    }

    .expand-chevron.open {
        transform: rotate(90deg);
    }

    .sub-list {
        list-style: none;
        margin: 0;
        padding: 0.25rem 0 0.25rem 2.5rem;
    }

    .sub-link {
        display: block;
        padding: 0.375rem 0.75rem;
        font-size: var(--text-sm);
        color: var(--color-text-on-dark-subtle);
        border-radius: var(--radius-default);
        text-decoration: none;
    }

    .sub-link:hover {
        color: var(--color-text-on-dark);
        background-color: var(--color-admin-sidebar-hover);
    }

    .sub-link.active {
        color: var(--color-text-on-dark);
        background-color: rgba(255, 255, 255, 0.08);
    }
}@scope(.page-admin-dashboard){.dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }

    @media (min-width: 768px) {
        .dashboard-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .section-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-icon {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-default);
        background-color: var(--color-neutral-100);
        color: var(--color-neutral-600);
    }

    .section-content {
        flex: 1;
        min-width: 0;
    }

    .section-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
    }

    .section-description {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-top: 0.25rem;
    }

    .section-count {
        display: inline-block;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-600);
        background-color: var(--color-neutral-100);
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        margin-top: 0.5rem;
    }
}@scope(.page-admin-users){.search-fields {
        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
        width: 100%;
    }

    .search-fields-spacer {
        flex: 1;
    }

    .edit-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }
}@scope(.page-admin-user-detail){.error-message {
        color: var(--color-red-600);
        font-size: var(--text-sm);
        padding: 1rem 1.25rem;
    }

    .tab-section {
        padding: 1.5rem 1rem;
    }

    .section-heading {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
        margin-bottom: 0.75rem;
        margin-top: 1.5rem;
    }

    .section-heading:first-child {
        margin-top: 0;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    @media (min-width: 640px) {
        .info-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .info-grid-single {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .info-row {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .info-label {
        width: 10rem;
        flex-shrink: 0;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-500);
    }

    .info-value {
        font-size: var(--text-sm);
        color: var(--color-text-body);
    }

    .info-value a {
        color: var(--color-primary-600);
        text-decoration: none;
    }

    .info-value a:hover {
        text-decoration: underline;
    }

    .fieldset-header {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .reveal-field {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .reveal-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 2px;
        cursor: pointer;
        color: var(--color-neutral-400);
        border-radius: var(--radius-default);
    }

    .reveal-btn:hover {
        color: var(--color-neutral-600);
    }

    .edit-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .empty-state {
        padding: 1.5rem;
        text-align: center;
        font-size: var(--text-sm);
        color: var(--color-neutral-400);
    }

    

    .table-wrap {
        overflow-x: auto;
    }

    .detail-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
    }

    .detail-table th {
        text-align: left;
        padding: 0.5rem 0.75rem;
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-600);
        border-bottom: 2px solid var(--color-neutral-200);
        white-space: nowrap;
    }

    .detail-table td {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--color-neutral-100);
        color: var(--color-text-body);
    }

    .detail-table tbody tr:hover {
        background-color: var(--color-neutral-50);
    }

    .copy-field {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .copy-field-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .copy-field-text.ua-cell {
        max-width: 16rem;
    }

    .copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 2px;
        cursor: pointer;
        color: var(--color-neutral-400);
        border-radius: var(--radius-default);
        flex-shrink: 0;
    }

    .copy-btn:hover {
        color: var(--color-neutral-600);
    }

    .text-nowrap {
        white-space: nowrap;
    }

    

    .login-chart-wrap {
        height: 12rem;
        margin-bottom: 1.5rem;
    }

    .sessions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .sessions-header .section-heading {
        margin-bottom: 0;
        margin-top: 0;
    }

    

    .permissions-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .permission-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.375rem 0.75rem;
        font-size: var(--text-sm);
        border-radius: var(--radius-default);
    }

    .permission-item.granted {
        background-color: var(--color-green-50);
    }

    .permission-item.denied {
        background-color: var(--color-red-50);
    }

    .permission-key {
        font-family: var(--font-mono);
        color: var(--color-text-body);
    }

    .permission-badge {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
    }

    .permission-item.granted .permission-badge {
        color: var(--color-green-700);
    }

    .permission-item.denied .permission-badge {
        color: var(--color-red-700);
    }

    

    .role-checkboxes {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .role-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        cursor: pointer;
        font-size: var(--text-sm);
    }

    .role-checkbox:hover {
        background-color: var(--color-neutral-50);
    }

    .role-checkbox input[type="checkbox"] {
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    .role-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
    }

    .role-desc {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: 0.125rem;
    }

    .save-bar {
        display: flex;
        justify-content: flex-end;
        padding: 1rem 0;
        border-top: 1px solid var(--color-neutral-100);
        margin-top: 1rem;
    }

    

    .auth-actions {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .auth-action-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-neutral-100);
        gap: 1rem;
    }

    .auth-action-row:last-child {
        border-bottom: none;
    }

    .auth-action-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
    }

    .auth-action-desc {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: 0.125rem;
    }

    .auth-error-msg {
        font-size: var(--text-sm);
        color: var(--color-red-600);
        padding: 0.5rem 0.75rem;
        background-color: var(--color-red-50);
        border-radius: var(--radius-default);
    }

    .auth-password-hint {
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        line-height: 1.5;
    }

    

    .w9-signature {
        padding: 0.5rem;
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        text-align: center;
    }

    .w9-signature img {
        max-width: 100%;
        max-height: 8rem;
    }

    

    .w9-preview-canvas-wrap {
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        padding: 0.5rem;
    }

    .w9-preview-canvas-wrap canvas {
        width: 100%;
        height: auto;
        display: block;
    }
}@scope(.page-admin-orgs){.search-fields {
        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
        width: 100%;
    }

    .search-fields-spacer {
        flex: 1;
    }
}@scope(.page-admin-org-detail){.error-message {
        color: var(--color-red-600);
        font-size: var(--text-sm);
        padding: 1rem 1.25rem;
    }

    .tab-section {
        padding: 1.5rem 1rem;
    }

    .section-heading {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
        margin-bottom: 0.75rem;
        margin-top: 1.5rem;
    }

    .section-heading:first-child {
        margin-top: 0;
    }

    .info-grid-single {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .info-row {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .info-label {
        width: 12rem;
        flex-shrink: 0;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-neutral-500);
    }

    .info-value {
        font-size: var(--text-sm);
        color: var(--color-text-body);
    }

    .info-value a {
        color: var(--color-primary-600);
        text-decoration: none;
    }

    .info-value a:hover {
        text-decoration: underline;
    }

    .fieldset-header {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .edit-fields {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .checkbox-row {
        display: flex;
        gap: 1.5rem;
    }

    .inline-checkbox {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: var(--text-sm);
        cursor: pointer;
    }

    .modal-footer-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .empty-state {
        padding: 1.5rem;
        text-align: center;
        font-size: var(--text-sm);
        color: var(--color-neutral-400);
    }

    

    .table-wrap {
        overflow-x: auto;
    }

    .detail-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
    }

    .detail-table th {
        text-align: left;
        padding: 0.5rem 0.75rem;
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-600);
        border-bottom: 2px solid var(--color-neutral-200);
        white-space: nowrap;
    }

    .detail-table td {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--color-neutral-100);
        color: var(--color-text-body);
    }

    .detail-table td a {
        color: var(--color-primary-600);
        text-decoration: none;
    }

    .detail-table td a:hover {
        text-decoration: underline;
    }

    .detail-table tbody tr:hover {
        background-color: var(--color-neutral-50);
    }

    .text-nowrap {
        white-space: nowrap;
    }

    .member-actions {
        display: flex;
        gap: 0.375rem;
        justify-content: flex-end;
        white-space: nowrap;
    }

    

    .sessions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .sessions-header .section-heading {
        margin-bottom: 0;
        margin-top: 0;
    }

    

    .login-chart-wrap {
        height: 12rem;
        margin-bottom: 1.5rem;
    }

    

    .role-checkboxes {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .role-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        cursor: pointer;
        font-size: var(--text-sm);
    }

    .role-checkbox:hover {
        background-color: var(--color-neutral-50);
    }

    .role-checkbox input[type="checkbox"] {
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    .role-name {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-heading);
    }

    .role-desc {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: 0.125rem;
    }

    .save-bar {
        display: flex;
        justify-content: flex-end;
        padding: 1rem 0;
        border-top: 1px solid var(--color-neutral-100);
        margin-top: 1rem;
    }

    .search-fields {
        display: flex;
        gap: 0.5rem;
    }
}@scope(.page-admin-settings){:scope {
        padding: 0 calc(var(--spacing) * 5) calc(var(--spacing) * 5);
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 5);
    }

    .page-title {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900);
        letter-spacing: var(--tracking-tight);
    }

    .settings-section-title {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        margin-bottom: calc(var(--spacing) * 1);
    }

    .settings-section-desc {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .inline-checkbox {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: var(--text-sm);
        cursor: pointer;
    }

    .settings-actions {
        display: flex;
    }
}@scope(.page-admin-examples){:scope {
        padding: 0 calc(var(--spacing) * 5) calc(var(--spacing) * 5);
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 12);
    }

    section {
        scroll-margin-top: calc(var(--spacing) * 22);
    }

    

    .page-title {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900);
        margin-bottom: 0.5rem;
        letter-spacing: var(--tracking-tight);
    }

    .page-desc {
        color: var(--color-gray-600);
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-800);
        margin-bottom: 1rem;
    }

    .section-desc {
        color: var(--color-gray-600);
        margin-bottom: 1rem;
        font-size: var(--text-sm);
    }

    .subsection-title {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-gray-600);
        margin-bottom: 0.75rem;
    }

    .hint {
        font-size: var(--text-xs);
        color: var(--color-gray-500);
    }

    .code {
        background-color: var(--color-gray-100);
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        border-radius: var(--radius-default);
    }

    .body-text {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
    }

    .text-small {
        font-size: var(--text-sm);
    }

    

    .divider {
        border-color: var(--color-gray-200);
    }

    

    .grid-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }

    @media (min-width: 1024px) {
        .grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    @media (min-width: 768px) {
        .grid-3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .grid-3-sm {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }

    @media (min-width: 768px) {
        .grid-3-sm {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .grid-3-sm {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .grid-4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .grid-4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .grid-2-md {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .grid-2-md {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .grid-2-always {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .grid-3-md {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .grid-3-md {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    

    .button-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .search-all {
        flex: 1;
        min-width: 250px;
    }

    .flex-end {
        display: flex;
        justify-content: flex-end;
    }

    

    .stack-sm {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .stack-md {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .stack-lg {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .stack-xl {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    

    .pad {
        padding: 1rem;
    }

    .pad-sm {
        padding: 0.75rem;
    }

    .mt-section {
        margin-top: 1.5rem;
    }

    .mb-section {
        margin-bottom: 1.5rem;
    }

    

    .chart-sm {
        height: 16rem;
    }

    .chart-md {
        height: 20rem;
    }

    .chart-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    

    .input-full {
        width: 100%;
    }

    

    .accordion-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .accordion-label {
        font-size: var(--text-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-500);
        margin-bottom: 0.25rem;
    }

    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }


    

    .popover-sm {
        padding: 1rem;
        width: 16rem;
    }

    .popover-md {
        padding: 1rem;
        width: 18rem;
    }

    .popover-xs {
        padding: 0.75rem;
    }

    .popover-title {
        font-weight: var(--font-weight-medium);
        margin-bottom: 0.5rem;
    }

    .popover-text {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        margin-bottom: 0.75rem;
    }

    

    .tab-content {
        padding: 1rem;
    }

    .tab-content-sky {
        padding: 1rem;
        background-color: var(--color-sky-50);
    }

    .tab-content-green {
        padding: 1rem;
        background-color: var(--color-green-50);
    }

    .tab-content-amber {
        padding: 1rem;
        background-color: var(--color-amber-50);
    }

    

    .inline-icon {
        transition: transform 200ms;
    }

    .inline-icon.rotated {
        transform: rotate(180deg);
    }

    .icon-before {
        margin-right: 0.25rem;
    }

    

    .card-accent-header {
        background-color: var(--color-sky-700);
        color: var(--color-white);
        padding: 1rem;
        border-radius: var(--radius-default) var(--radius-default) 0 0;
    }

    .card-accent-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
    }

    

    .demo-box {
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        padding: 1rem;
    }

    .preview-box {
        padding: 1rem;
        border-radius: var(--radius-default);
        border: 1px solid var(--color-neutral-200);
    }

    .preview-text {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-gray-800);
    }

    .preview-subtext {
        font-size: var(--text-xs);
        margin-top: 0.25rem;
        color: var(--color-gray-600);
    }

    .color-red { color: var(--color-red-600); }
    .color-blue { color: var(--color-blue-600); }
    .color-green { color: var(--color-green-600); }
    .color-purple { color: var(--color-purple-600); }
    .color-orange { color: var(--color-orange-600); }

    .bg-yellow { background-color: var(--color-yellow-100); }
    .bg-blue { background-color: var(--color-blue-100); }
    .bg-green { background-color: var(--color-green-100); }
    .bg-pink { background-color: var(--color-pink-100); }
    .bg-gray { background-color: var(--color-gray-100); }

    

    .modal-pad {
        padding: 1.5rem;
    }

    .modal-heading {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
        margin-bottom: 1rem;
    }

    .modal-text {
        color: var(--color-neutral-600);
        margin-bottom: 1rem;
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .modal-form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .modal-info-box {
        margin-top: 1rem;
        padding: 1rem;
        background-color: var(--color-gray-50);
        border-radius: var(--radius-default);
        font-size: var(--text-sm);
    }

    .col-span-full {
        grid-column: span 2;
    }

    @media (min-width: 768px) {
        .col-span-full-md {
            grid-column: span 2;
        }
    }

    

    .feature-list {
        list-style: disc;
        list-style-position: inside;
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
    }

    .feature-list li {
        margin-top: 0.25rem;
    }
}@scope(.page-admin-logs){.section-heading {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .section-heading:first-child {
        margin-top: 0;
    }

    .activity-chart-wrap {
        height: 12rem;
        margin-bottom: 1.5rem;
    }

    .search-fields {
        display: flex;
        gap: 0.75rem;
    }

    

    .log-accordion {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        padding: 0.75rem 0;
    }

    .log-accordion-heading {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
        margin: 0 0 0.5rem;
    }

    

    .detail-row {
        display: flex;
        gap: 0.5rem;
        padding: 0.25rem 0;
        font-size: var(--text-sm);
        border-bottom: 1px solid var(--color-neutral-100);
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-label {
        flex-shrink: 0;
        width: 7rem;
        color: var(--color-neutral-500);
        font-weight: var(--font-weight-medium);
    }

    .detail-value {
        color: var(--color-text-body);
        word-break: break-all;
    }

    

    .json-tree-container {
        background-color: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-default);
        padding: 0.75rem;
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        line-height: 1.6;
    }

    .json-entry {
        padding-left: 1rem;
    }

    .json-key {
        color: var(--color-primary-700);
        margin-right: 0.375rem;
    }

    .json-index {
        color: var(--color-neutral-400);
        margin-right: 0.375rem;
    }

    .json-string {
        color: var(--color-green-700);
    }

    .json-number {
        color: var(--color-blue-700);
    }

    .json-bool {
        color: var(--color-amber-700);
    }

    .json-null {
        color: var(--color-neutral-400);
        font-style: italic;
    }

    .json-bracket {
        color: var(--color-neutral-500);
    }
}