@cyberskill/design 1.2.0 → 1.3.8

package/dist/styles.min.css

@@ -224,6 +224,7 @@ color-scheme: dark;
 
 
 --cs-breakpoint-xs: 0px;
+--cs-breakpoint-phone: 360px;
 --cs-breakpoint-sm: 640px;
 --cs-breakpoint-md: 768px;
 --cs-breakpoint-lg: 1024px;
@@ -353,7 +354,7 @@ color-scheme: dark;
 --cs-accent-ink: #45210E;
 --cs-accent-glow: rgba(244, 186, 23, 0.48);
 --cs-accent-grad-a: #F4BA17;
---cs-accent-grad-b: #FCAF91;
+--cs-accent-grad-b: #F3B958;
 }
 
 [data-cs-element] {
@@ -387,7 +388,7 @@ color-scheme: dark;
 --cs-accent-ink: #45210E;
 --cs-accent-glow: rgba(244, 186, 23, 0.48);
 --cs-accent-grad-a: #F4BA17;
---cs-accent-grad-b: #FCAF91;
+--cs-accent-grad-b: #F3B958;
 }
 [data-cs-element="tho"][data-cs-variant="sand"] {
 --cs-accent: #F8E9C0;
@@ -399,9 +400,9 @@ color-scheme: dark;
 --cs-accent-ink: #292414;
 --cs-accent-glow: rgba(248, 233, 192, 0.48);
 --cs-accent-grad-a: #F8E9C0;
---cs-accent-grad-b: #FCAF91;
+--cs-accent-grad-b: #F3B958;
 --cs-color-text-accent: #90825E;
---cs-color-link: #90825E;
+--cs-color-link: #7B6D4A;
 }
 [data-cs-element="tho"][data-cs-variant="clay"] {
 --cs-accent: #513801;
@@ -413,7 +414,7 @@ color-scheme: dark;
 --cs-accent-ink: #2D220E;
 --cs-accent-glow: rgba(81, 56, 1, 0.48);
 --cs-accent-grad-a: #513801;
---cs-accent-grad-b: #FCAF91;
+--cs-accent-grad-b: #F3B958;
 --cs-color-text-accent: #201300;
 --cs-color-link: #201300;
 }
@@ -430,7 +431,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #FCAF91;
 --cs-accent-grad-b: #F4BA17;
 --cs-color-text-accent: #B47054;
---cs-color-link: #B47054;
+--cs-color-link: #A15E43;
 }
 [data-cs-element="hoa"][data-cs-variant="plasma"] {
 --cs-accent: #FFE1D8;
@@ -444,7 +445,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #FFE1D8;
 --cs-accent-grad-b: #F4BA17;
 --cs-color-text-accent: #967C75;
---cs-color-link: #967C75;
+--cs-color-link: #846B64;
 }
 [data-cs-element="hoa"][data-cs-variant="lava"] {
 --cs-accent: #622B06;
@@ -473,7 +474,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #2EDBF7;
 --cs-accent-grad-b: #A3D768;
 --cs-color-text-accent: #108EA0;
---cs-color-link: #108EA0;
+--cs-color-link: #027B8B;
 }
 [data-cs-element="thuy"][data-cs-variant="mist"] {
 --cs-accent: #C0F5FC;
@@ -487,7 +488,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #C0F5FC;
 --cs-accent-grad-b: #A3D768;
 --cs-color-text-accent: #5A8A90;
---cs-color-link: #5A8A90;
+--cs-color-link: #48787E;
 }
 [data-cs-element="thuy"][data-cs-variant="ocean"] {
 --cs-accent: #004554;
@@ -516,7 +517,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #A3D768;
 --cs-accent-grad-b: #FCAF91;
 --cs-color-text-accent: #629122;
---cs-color-link: #629122;
+--cs-color-link: #517B13;
 }
 [data-cs-element="moc"][data-cs-variant="bamboo"] {
 --cs-accent: #E1F1C8;
@@ -530,7 +531,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #E1F1C8;
 --cs-accent-grad-b: #FCAF91;
 --cs-color-text-accent: #7C8965;
---cs-color-link: #7C8965;
+--cs-color-link: #687451;
 }
 [data-cs-element="moc"][data-cs-variant="forest"] {
 --cs-accent: #1A4A01;
@@ -559,7 +560,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #F3B958;
 --cs-accent-grad-b: #2EDBF7;
 --cs-color-text-accent: #AC780B;
---cs-color-link: #AC780B;
+--cs-color-link: #966700;
 }
 [data-cs-element="kim"][data-cs-variant="titanium"] {
 --cs-accent: #FEE5C7;
@@ -573,7 +574,7 @@ color-scheme: dark;
 --cs-accent-grad-a: #FEE5C7;
 --cs-accent-grad-b: #2EDBF7;
 --cs-color-text-accent: #947F65;
---cs-color-link: #947F65;
+--cs-color-link: #826D54;
 }
 [data-cs-element="kim"][data-cs-variant="steel"] {
 --cs-accent: #503901;
@@ -597,12 +598,21 @@ color-scheme: dark;
 --cs-color-link: var(--cs-accent-bright);
 --cs-color-link-hover: var(--cs-color-text-primary);
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
+--cs-component-button-primary-bg: var(--cs-accent-strong);
+--cs-component-button-primary-fg: var(--cs-accent-on);
+--cs-color-text-accent: var(--cs-accent-bright);
+--cs-color-link: var(--cs-accent-bright);
+--cs-color-link-hover: var(--cs-color-text-primary);
+}
+}
 
-.cs-aurora-wash { background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; }
-[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.png"); }
-[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.png"); }
-[data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.png"); }
-[data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.png"); }
+.cs-aurora-wash { background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; }
+[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.webp"); }
+[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.webp"); }
+[data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.webp"); }
+[data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.webp"); }
 
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
 --cs-accent: #F8E9C0;
@@ -613,6 +623,17 @@ color-scheme: dark;
 --cs-accent-tint: #332701;
 --cs-accent-ink: #F6EBCC;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="tho"][data-cs-variant="sand"] {
+--cs-accent: #F8E9C0;
+--cs-accent-bright: #F6EBCC;
+--cs-accent-strong: #665A37;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #332701;
+--cs-accent-ink: #F6EBCC;
+}
+}
 [data-theme="dark"][data-cs-element="tho"] {
 --cs-accent: #F4BA17;
 --cs-accent-bright: #FEC42C;
@@ -622,6 +643,17 @@ color-scheme: dark;
 --cs-accent-tint: #352602;
 --cs-accent-ink: #FECD5E;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="tho"] {
+--cs-accent: #F4BA17;
+--cs-accent-bright: #FEC42C;
+--cs-accent-strong: #73560B;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #352602;
+--cs-accent-ink: #FECD5E;
+}
+}
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
 --cs-accent: #CDB07E;
 --cs-accent-bright: #E4CDA8;
@@ -631,6 +663,17 @@ color-scheme: dark;
 --cs-accent-tint: #372502;
 --cs-accent-ink: #E7D0AB;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="tho"][data-cs-variant="clay"] {
+--cs-accent: #CDB07E;
+--cs-accent-bright: #E4CDA8;
+--cs-accent-strong: #1F1300;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #372502;
+--cs-accent-ink: #E7D0AB;
+}
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
 --cs-accent: #FFE1D8;
 --cs-accent-bright: #FCE6DF;
@@ -640,6 +683,17 @@ color-scheme: dark;
 --cs-accent-tint: #38231C;
 --cs-accent-ink: #FCE6DF;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="hoa"][data-cs-variant="plasma"] {
+--cs-accent: #FFE1D8;
+--cs-accent-bright: #FCE6DF;
+--cs-accent-strong: #6F5750;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #38231C;
+--cs-accent-ink: #FCE6DF;
+}
+}
 [data-theme="dark"][data-cs-element="hoa"] {
 --cs-accent: #FCAF91;
 --cs-accent-bright: #FED3C3;
@@ -649,6 +703,17 @@ color-scheme: dark;
 --cs-accent-tint: #411E0F;
 --cs-accent-ink: #FED3C3;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="hoa"] {
+--cs-accent: #FCAF91;
+--cs-accent-bright: #FED3C3;
+--cs-accent-strong: #8A4A30;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #411E0F;
+--cs-accent-ink: #FED3C3;
+}
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
 --cs-accent: #E8A683;
 --cs-accent-bright: #F8C4AA;
@@ -658,6 +723,17 @@ color-scheme: dark;
 --cs-accent-tint: #401F0B;
 --cs-accent-ink: #FBC7AD;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="hoa"][data-cs-variant="lava"] {
+--cs-accent: #E8A683;
+--cs-accent-bright: #F8C4AA;
+--cs-accent-strong: #280D00;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #401F0B;
+--cs-accent-ink: #FBC7AD;
+}
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
 --cs-accent: #C0F5FC;
 --cs-accent-bright: #CDF4F9;
@@ -667,6 +743,17 @@ color-scheme: dark;
 --cs-accent-tint: #022F34;
 --cs-accent-ink: #CDF4F9;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="thuy"][data-cs-variant="mist"] {
+--cs-accent: #C0F5FC;
+--cs-accent-bright: #CDF4F9;
+--cs-accent-strong: #316167;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #022F34;
+--cs-accent-ink: #CDF4F9;
+}
+}
 [data-theme="dark"][data-cs-element="thuy"] {
 --cs-accent: #2EDBF7;
 --cs-accent-bright: #99EEFF;
@@ -676,6 +763,17 @@ color-scheme: dark;
 --cs-accent-tint: #032F36;
 --cs-accent-ink: #99EEFF;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="thuy"] {
+--cs-accent: #2EDBF7;
+--cs-accent-bright: #99EEFF;
+--cs-accent-strong: #046270;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #032F36;
+--cs-accent-ink: #99EEFF;
+}
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
 --cs-accent: #82BCCD;
 --cs-accent-bright: #ABD6E3;
@@ -685,6 +783,17 @@ color-scheme: dark;
 --cs-accent-tint: #002F3A;
 --cs-accent-ink: #AED9E6;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="thuy"][data-cs-variant="ocean"] {
+--cs-accent: #82BCCD;
+--cs-accent-bright: #ABD6E3;
+--cs-accent-strong: #011A21;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #002F3A;
+--cs-accent-ink: #AED9E6;
+}
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
 --cs-accent: #E1F1C8;
 --cs-accent-bright: #E5F1D2;
@@ -694,6 +803,17 @@ color-scheme: dark;
 --cs-accent-tint: #232D0B;
 --cs-accent-ink: #E5F1D2;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="moc"][data-cs-variant="bamboo"] {
+--cs-accent: #E1F1C8;
+--cs-accent-bright: #E5F1D2;
+--cs-accent-strong: #54603E;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #232D0B;
+--cs-accent-ink: #E5F1D2;
+}
+}
 [data-theme="dark"][data-cs-element="moc"] {
 --cs-accent: #A3D768;
 --cs-accent-bright: #C5ED9C;
@@ -703,6 +823,17 @@ color-scheme: dark;
 --cs-accent-tint: #1F2E0B;
 --cs-accent-ink: #C5ED9C;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="moc"] {
+--cs-accent: #A3D768;
+--cs-accent-bright: #C5ED9C;
+--cs-accent-strong: #416501;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #1F2E0B;
+--cs-accent-ink: #C5ED9C;
+}
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
 --cs-accent: #8EC27D;
 --cs-accent-bright: #B0D8A3;
@@ -712,6 +843,17 @@ color-scheme: dark;
 --cs-accent-tint: #193011;
 --cs-accent-ink: #B6DFA9;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="moc"][data-cs-variant="forest"] {
+--cs-accent: #8EC27D;
+--cs-accent-bright: #B0D8A3;
+--cs-accent-strong: #061D00;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #193011;
+--cs-accent-ink: #B6DFA9;
+}
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
 --cs-accent: #FEE5C7;
 --cs-accent-bright: #FBE8D2;
@@ -721,6 +863,17 @@ color-scheme: dark;
 --cs-accent-tint: #37250B;
 --cs-accent-ink: #FBE8D2;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="kim"][data-cs-variant="titanium"] {
+--cs-accent: #FEE5C7;
+--cs-accent-bright: #FBE8D2;
+--cs-accent-strong: #6B573E;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #37250B;
+--cs-accent-ink: #FBE8D2;
+}
+}
 [data-theme="dark"][data-cs-element="kim"] {
 --cs-accent: #F3B958;
 --cs-accent-bright: #FDD89F;
@@ -730,6 +883,17 @@ color-scheme: dark;
 --cs-accent-tint: #382503;
 --cs-accent-ink: #FDD89F;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="kim"] {
+--cs-accent: #F3B958;
+--cs-accent-bright: #FDD89F;
+--cs-accent-strong: #795303;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #382503;
+--cs-accent-ink: #FDD89F;
+}
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="steel"] {
 --cs-accent: #CCB17E;
 --cs-accent-bright: #DFCBA5;
@@ -739,6 +903,17 @@ color-scheme: dark;
 --cs-accent-tint: #362602;
 --cs-accent-ink: #E6D1AB;
 }
+@media (prefers-color-scheme: dark) {
+[data-theme="system"][data-cs-element="kim"][data-cs-variant="steel"] {
+--cs-accent: #CCB17E;
+--cs-accent-bright: #DFCBA5;
+--cs-accent-strong: #1F1400;
+--cs-accent-on: #f5ead9;
+--cs-accent-on-strong: #FFFDF8;
+--cs-accent-tint: #362602;
+--cs-accent-ink: #E6D1AB;
+}
+}
 
 :root {
 --cs-style-pack: liquid-glass; 
@@ -763,7 +938,12 @@ text-rendering: optimizeLegibility;
 :where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
 :where(p) { text-wrap: pretty; }
 :where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
-:where(:focus-visible) { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre, #f4ba17); outline-offset: 2px; }
+
+:where(:focus-visible) {
+outline: 2px solid var(--cs-color-text-primary, #45210e);
+outline-offset: 2px;
+box-shadow: 0 0 0 5px var(--cs-color-accent-ochre, #f4ba17);
+}
 
 .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
 .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
@@ -909,6 +1089,8 @@ box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
 color: var(--cs-color-text-primary, #45210e);
 left: 50%;
 max-inline-size: min(42rem, calc(100vw - 2rem));
+max-block-size: min(80vh, calc(100vh - 4rem));
+overflow: auto;
 padding: var(--cs-space-6, 24px);
 position: absolute;
 top: 12vh;
@@ -932,6 +1114,7 @@ align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-conte
 }
 
 .cs-table-wrap { overflow: auto; }
+.cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
 .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
 .cs-table th, .cs-table td {
 border-block-end: 1px solid rgba(69, 33, 14, 0.18);
@@ -947,7 +1130,7 @@ letter-spacing: var(--cs-letter-spacing-caps, 0.08em); color: var(--cs-color-tex
 .cs-ai-disclosure { display: inline-block; position: relative; }
 .cs-ai-disclosure__badge {
 background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
-color: #ffffff; font: inherit; font-size: 0.875rem; font-weight: 700;
+color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
 padding: 0.25rem 0.625rem; cursor: pointer;
 }
 .cs-ai-disclosure__panel {
@@ -955,7 +1138,7 @@ background: var(--cs-color-surface-panel, #ffffff);
 border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
 box-shadow: var(--cs-shadow-md, 0 12px 30px rgba(31, 19, 11, 0.18));
 display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
-min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: 20;
+min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
 }
 .cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.8125rem; }
 
@@ -1010,7 +1193,7 @@ font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
 .cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
 .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
 .cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
-.cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
+.cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-umber); }
 [data-theme="dark"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
 .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
@@ -1037,10 +1220,13 @@ textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: va
 .cs-tag__close { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }
 .cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }
 
-.cs-alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); }
+.cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }
 .cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }
 .cs-alert__title { font-weight: 700; margin: 0 0 2px; }
 .cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
+.cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }
+.cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }
+.cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-focus-ring, var(--cs-accent-bright)); outline-offset: 2px; }
 .cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }
 .cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info); }
 .cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
@@ -1053,7 +1239,11 @@ textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: va
 .cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100vw - 40px)); }
 .cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }
 .cs-toast__icon { color: var(--cs-color-text-accent); }
+.cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }
+.cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info); }
+.cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
 .cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success); }
+.cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
 .cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger); }
 .cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
 .cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }
@@ -1113,7 +1303,7 @@ textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: va
 .cs-avatar-group > .cs-avatar + .cs-avatar { margin-inline-start: -10px; }
 
 .cs-tooltip { position: relative; display: inline-flex; }
-.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-toast); }
+.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
 .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
 .cs-tooltip:hover .cs-tooltip__bubble, .cs-tooltip:focus-within .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
 
@@ -1177,7 +1367,7 @@ display: block;
 .cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
 
 .cs-menu { position: relative; display: inline-block; }
-.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-toast); display: grid; gap: 2px; }
+.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }
 .cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
 .cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-menu__item:hover { background: var(--cs-color-surface-raised); }
@@ -1193,7 +1383,12 @@ display: block;
 }
 
 .cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
-.cs-prompt:focus-within { border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 32%, transparent); }
+.cs-prompt:focus-within {
+border-color: var(--cs-color-text-primary);
+outline: 2px solid var(--cs-color-text-primary);
+outline-offset: 2px;
+box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
+}
 .cs-prompt__field { border: 0; background: transparent; resize: none; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); min-height: 44px; outline: 0; inline-size: 100%; line-height: var(--cs-font-lineHeight-body); }
 .cs-prompt__field::placeholder { color: var(--cs-color-text-muted); }
 .cs-prompt__bar { display: flex; align-items: center; gap: 10px; }
@@ -1248,7 +1443,12 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-lumi--ring { box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 34%, transparent); }
 
 .cs-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
-.cs-search:focus-within { border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 30%, transparent); }
+.cs-search:focus-within {
+border-color: var(--cs-color-text-primary);
+outline: 2px solid var(--cs-color-text-primary);
+outline-offset: 2px;
+box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
+}
 .cs-search svg { color: var(--cs-color-text-muted); flex: none; }
 .cs-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
 .cs-search input::placeholder { color: var(--cs-color-text-muted); }
@@ -1256,7 +1456,12 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-search__clear:hover { color: var(--cs-color-text-primary); }
 
 .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
-.cs-stepper:focus-within { border-color: var(--cs-color-brand-ochre); }
+.cs-stepper:focus-within {
+border-color: var(--cs-color-text-primary);
+outline: 2px solid var(--cs-color-text-primary);
+outline-offset: 2px;
+box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
+}
 .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
 .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
 .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
@@ -1347,20 +1552,20 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-datepicker__field { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
 .cs-datepicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
-.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
+.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
 .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
 .cs-timepicker:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
 .cs-timepicker select:focus { outline: none; }
 
 .cs-hovercard { position: relative; display: inline-block; }
-.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
+.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
 .cs-popconfirm { position: relative; display: inline-block; }
-.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
+.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
 .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
 .cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
 .cs-ctxmenu-zone { position: relative; }
-.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 60); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
+.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
 .cs-fab--static { position: static; align-items: flex-start; }
 .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
 .cs-fab__main:hover { filter: brightness(1.05); }
@@ -1420,7 +1625,7 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-navmenu__wrap { position: relative; }
 .cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
-.cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
+.cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); gap: 6px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
 .cs-navmenu__card { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
 .cs-navmenu__card:hover { background: var(--cs-accent-tint); }
 .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
@@ -1447,6 +1652,12 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }
 
 .cs-form { display: grid; gap: 16px; }
+
+.cs-form.is-pending { opacity: 0.72; }
+.cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
+pointer-events: none;
+cursor: wait;
+}
 .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: var(--cs-font-size-sm); }
 .cs-form__summary b { color: var(--cs-color-semantic-danger); }
 .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
@@ -1465,14 +1676,14 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 [data-theme="dark"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
 .cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
 .cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }
-.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 60); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
+.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
 .cs-backtop:hover { border-color: var(--cs-accent); }
 
 .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
 .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
 .cs-treeselect__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
-.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
+.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
 .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
 .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
 .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
@@ -1487,28 +1698,29 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
 .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
 .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
-.cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
+.cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
 .cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
-.cs-mentions__pop button:hover { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
+.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
+[data-theme="dark"] .cs-mentions__pop button:hover, [data-theme="dark"] .cs-mentions__pop button.hl, [data-theme="dark"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
 
 .cs-colorpicker { position: relative; display: inline-block; }
 .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
 .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
 .cs-colorpicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
-.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
+.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
 .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
 .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
 .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
 .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
-.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
-.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
+.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
+.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
 .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
 .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
 .cs-tour__btns { display: flex; gap: 6px; }
-.cs-qrcode { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
+.cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
 
 .cs-masonry__item { break-inside: avoid; }
 .cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
@@ -1539,6 +1751,10 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-sortable__item.is-dragging { opacity: .5; }
 .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
 .cs-sortable__grip { color: var(--cs-color-text-muted); }
+.cs-sortable__label { flex: 1; min-inline-size: 0; }
+.cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }
+.cs-sortable__ops .cs-button { cursor: pointer; }
+.cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }
 
 .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
 .cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
@@ -1547,15 +1763,30 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
 .cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }
 .cs-editor__area:focus-visible { box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }
-.cs-terminal { max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #3a2a1c; box-shadow: var(--cs-shadow-md); }
-.cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: #2a1a0d; color: #c9b7a3; font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
-.cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: #5b4331; }
+
+.cs-terminal {
+--cs-term-border: #3a2a1c;
+--cs-term-bar: #2a1a0d;
+--cs-term-dot: #5b4331;
+--cs-term-bg: #1a1108;
+--cs-term-fg: #f5ead9;
+--cs-term-muted: #c9b7a3;
+max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-term-border); box-shadow: var(--cs-shadow-md);
+}
+.cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: var(--cs-term-bar); color: var(--cs-term-muted); font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
+.cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--cs-term-dot); }
 .cs-terminal__bar span { margin-inline-start: 8px; }
-.cs-terminal__body { background: #1a1108; color: #f5ead9; font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
+.cs-terminal__body { background: var(--cs-term-bg); color: var(--cs-term-fg); font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
 .cs-terminal__line { display: flex; gap: 8px; align-items: center; }
 .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
 .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
-.cs-terminal__out { color: #c9b7a3; white-space: pre-wrap; }
+
+.cs-terminal:focus-within {
+outline: 2px solid var(--cs-color-accent-ochre);
+outline-offset: 2px;
+box-shadow: 0 0 0 5px var(--cs-color-brand-umber);
+}
+.cs-terminal__out { color: var(--cs-term-muted); white-space: pre-wrap; }
 
 @media (prefers-color-scheme: dark) {
 [data-theme="system"] .cs-segmented button[aria-pressed="true"], [data-theme="system"] .cs-segmented button[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
@@ -1566,6 +1797,7 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 [data-theme="system"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
 [data-theme="system"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
 [data-theme="system"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
+[data-theme="system"] .cs-mentions__pop button:hover, [data-theme="system"] .cs-mentions__pop button.hl, [data-theme="system"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
 }
 
 .cs-list { display: grid; gap: 2px; }
@@ -1629,9 +1861,15 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .cs-collapsible__panel > :first-child { margin-block-start: 0; }
 .cs-collapsible__panel > :last-child { margin-block-end: 0; }
 
-.cs-code { position: relative; background: #2b1e14; color: #f5ead9; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #4a3a2c; }
-.cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid #4a3a2c; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: #c9b7a3; }
-.cs-code__copy { border: 0; background: transparent; color: #c9b7a3; cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
+.cs-code {
+--cs-code-bg: #2b1e14;
+--cs-code-fg: #f5ead9;
+--cs-code-border: #4a3a2c;
+--cs-code-muted: #c9b7a3;
+position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
+}
+.cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }
+.cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
 .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
 .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
 .cs-code code { font-family: inherit; }
@@ -1669,7 +1907,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 
 .cs-popover { position: relative; display: inline-block; }
-.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-toast); }
+.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }
 .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
 
 .cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }
@@ -1690,6 +1928,12 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-cmdk__search svg { color: var(--cs-color-text-muted); }
 .cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }
+
+.cs-cmdk__search:focus-within {
+outline: 2px solid var(--cs-color-text-primary);
+outline-offset: -2px;
+box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre);
+}
 .cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }
 .cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }
 .cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }
@@ -1798,7 +2042,7 @@ background-image:
 radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
 radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
 radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
-color: #fff;
+color: #fff; 
 }
 .cs-aurora--photo { background-size: cover; background-position: center; }
 
@@ -1830,9 +2074,13 @@ box-shadow: var(--cs-shadow-xs);
 .cs-select select.cs-field__control:focus-visible,
 .cs-native-select select.cs-field__control:focus-visible,
 .cs-search:focus-within,
+.cs-stepper:focus-within,
+.cs-prompt:focus-within,
+.cs-cmdk__search:focus-within,
+.cs-terminal:focus-within,
 .cs-ai-disclosure__badge:focus-visible,
 .cs-switch input:focus-visible + .cs-switch__track {
-box-shadow: 0 0 0 5px color-mix(in oklab, var(--cs-color-accent-ochre) 26%, transparent);
+box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
 }
 
 @keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@@ -1914,23 +2162,23 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 .cs-cq-stack > * { min-inline-size: 0; max-inline-size: 100%; }
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 768px) {
 .cs-desk { padding: 24px 10px !important; }
 .cs-sheet { padding: 40px 40px !important; }
 }
-@media screen and (max-width: 620px) {
+@media screen and (max-width: 640px) {
 .cs-desk { padding: 12px 6px !important; }
 .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
 }
-@media screen and (max-width: 460px) {
+@media screen and (max-width: 360px) {
 .cs-sheet { padding: 20px 15px !important; }
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
 .cs-sheet table, .cs-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
 .cs-sidebar { position: static !important; width: auto !important; height: auto !important;
 display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important;
 align-items: center !important; border-inline-end: 0 !important;
@@ -1939,22 +2187,22 @@ border-block-end: 1px solid var(--cs-color-border-default) !important; }
 }
 
 .cs-canvas-desk { overflow-x: auto; -webkit-overflow-scrolling: touch; }
-@media screen and (max-width: 1120px) {
+@media screen and (max-width: 1280px) {
 .cs-canvas-desk > * { min-width: 960px; }
 }
 
-@media screen and (max-width: 620px) {
+@media screen and (max-width: 640px) {
 section[style*="padding: 84px"], section[style*="padding: 80px"],
 section[style*="padding: 72px"] { padding-inline: 22px !important; }
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 768px) {
 [style*="grid-template-columns: repeat(3"],
 [style*="grid-template-columns: repeat(4"],
 [style*="grid-template-columns: repeat(5"],
 [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
 }
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
 [style*="grid-template-columns: repeat(2"],
 [style*="grid-template-columns: repeat(3"],
 [style*="grid-template-columns: repeat(4"],
@@ -1971,17 +2219,17 @@ section[style*="padding: 72px"] { padding-inline: 22px !important; }
 .cs-canvas-desk [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
 .cs-canvas-desk [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
 .cs-sidebar .cs-nav-item, .cs-nav-item { min-height: 44px; }
 .cs-search { display: flex; align-items: center; min-height: 44px; }
 .cs-search input, .cs-search select { min-height: 44px; }
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
 .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
 }
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
 [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
 main { min-width: 0; }
 main > * { min-width: 0; }