/* EXWIND GUI contract. Opt-in classes; article prose and blue-post HTML are separate. */
:root {
  --ui-bg:var(--palette-bg,#0b0c0e); --ui-panel:var(--palette-surface,#15171a);
  --ui-field:var(--palette-bg,#0b0c0e); --ui-border:var(--palette-line,#30343b);
  --ui-text:var(--palette-text,#eceef2); --ui-muted:var(--palette-muted,#aab0ba);
  --ui-hover:#252b35; --ui-raised:#20242c; --ui-row-alt:#191d24;
  --ui-primary:#376ad0; --ui-primary-hover:#477be2; --ui-focus:#699ef7;
  --ui-light-blue:#a9caff; --ui-blue-soft:#1b2b45;
  --ui-danger:#f1a1a7; --ui-success:#94d4b2; --ui-warning:#e3c48b;
  --ui-radius:6px; --ui-radius-group:8px; --ui-radius-panel:10px;
  --ui-control-height:36px; --ui-space:8px;
}
.ui-scope { color:var(--ui-text); font-size:14px; line-height:1.6; min-width:0; }
.ui-scope :where(button,input,select,textarea) { font:inherit; max-width:100%; }
.ui-scope :where(button) { cursor:pointer; touch-action:manipulation; }
.ui-scope :where(button:disabled,input:disabled,select:disabled,textarea:disabled),
.ui-button:disabled { opacity:.45; cursor:not-allowed; }
.ui-scope :where(button,input,select,textarea,a,summary,[tabindex]):focus-visible,
:where(.ui-button,.ui-input,.ui-select):focus-visible {
  outline:2px solid var(--ui-focus); outline-offset:3px;
}
.ui-scope :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea),
.ui-input,.ui-select {
  min-height:var(--ui-control-height); padding:6px 10px; border:1px solid var(--ui-border);
  border-radius:var(--ui-radius); background:var(--ui-field); color:var(--ui-text);
}
.ui-input { display:block; width:100%; min-width:0; }
textarea.ui-input { resize:vertical; min-height:94px; }
.ui-input::placeholder { color:#7f8999; }
.ui-input[aria-invalid=true] { border-color:var(--ui-danger); }
.ui-scope :where(input[type=checkbox],input[type=radio]) { accent-color:var(--ui-focus); }
.ui-scope :where(input[type=range]) { accent-color:var(--ui-focus); }
.ui-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--ui-control-height); padding:6px 13px; font-size:14px; font-weight:500;
  border:1px solid var(--ui-border); border-radius:var(--ui-radius);
  background:var(--ui-field); color:var(--ui-text); text-decoration:none; cursor:pointer;
  line-height:20px; text-align:center; touch-action:manipulation;
}
.ui-button:hover:not(:disabled) { background:var(--ui-hover); }
.ui-button:active:not(:disabled) { background:#394151; }
.ui-button--primary { background:var(--ui-primary); border-color:var(--ui-primary); color:#fff; }
.ui-button--primary:hover:not(:disabled) { background:var(--ui-primary-hover); }
.ui-button--soft { background:var(--ui-blue-soft); border-color:#3b5275; color:var(--ui-light-blue); }
.ui-button--danger { background:#301e26; border-color:#694048; color:var(--ui-danger); }
.ui-button--small { min-height:30px; padding:3px 10px; font-size:12px; }
.ui-button--ghost { background:transparent; border-color:transparent; color:var(--ui-muted); }
.ui-panel { border:1px solid var(--ui-border); border-radius:var(--ui-radius-panel); background:var(--ui-panel); }
.ui-group { border:1px solid var(--ui-border); border-radius:var(--ui-radius-group); background:var(--ui-field); }
.ui-group>summary { cursor:pointer; padding:12px 16px; font-weight:600; }
.ui-label { display:grid; gap:7px; font-weight:600; }
.ui-help { color:var(--ui-muted); font-size:12px; line-height:1.7; }
.ui-badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid #3b5275; border-radius:4px; background:var(--ui-blue-soft); color:var(--ui-light-blue); font-size:12px; line-height:1.6; }
.ui-badge--muted { background:var(--ui-raised); border-color:var(--ui-border); color:var(--ui-muted); }
.ui-alert { padding:12px 14px; border:1px solid #3b5275; border-radius:var(--ui-radius); background:var(--ui-blue-soft); color:var(--ui-light-blue); line-height:1.7; }
.ui-alert--danger { background:#301e26; border-color:#694048; color:var(--ui-danger); }
.ui-alert--success { background:#192e26; border-color:#355b48; color:var(--ui-success); }
.ui-table-wrap { overflow-x:auto; max-width:100%; border:1px solid var(--ui-border); border-radius:var(--ui-radius-group); overscroll-behavior-x:contain; }
.ui-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.ui-table :where(th,td) { padding:12px 14px; border-bottom:1px solid var(--ui-border); vertical-align:middle; }
.ui-table thead { background:var(--ui-raised); color:var(--ui-muted); }
.ui-table th { font-weight:600; }
.ui-table tbody tr:nth-child(even) { background:var(--ui-row-alt); }
.ui-table tbody tr:hover { background:var(--ui-hover); }
.ui-table tbody tr:last-child td { border-bottom:0; }
.ui-table .ui-numeric { text-align:right; font-variant-numeric:tabular-nums; }
.ui-tabs { display:flex; gap:6px; border-bottom:1px solid var(--ui-border); }
.ui-tabs>[aria-selected] { padding:9px 12px; color:var(--ui-muted); border-bottom:3px solid transparent; }
.ui-tabs>[aria-selected=true] { color:var(--ui-light-blue); border-bottom-color:var(--ui-focus); }
.ui-empty { padding:30px 16px; text-align:center; color:var(--ui-muted); }
.ui-dropzone { border:1px dashed #4f617d; border-radius:var(--ui-radius-group); background:var(--ui-field); }
.ui-dropzone:is(:hover,.dragging,.over) { border-color:var(--ui-focus); background:var(--ui-blue-soft); }
.ui-scope :where(input[type=range]) { appearance:none; height:22px; background:transparent; }
.ui-scope input[type=range]::-webkit-slider-runnable-track { height:4px; background:#383d47; border-radius:2px; }
.ui-scope input[type=range]::-webkit-slider-thumb { appearance:none; width:18px; height:10px; margin-top:-3px; border:0; border-radius:3px; background:#bfc8d8; }
.ui-scope input[type=range]::-moz-range-track { height:4px; background:#383d47; border-radius:2px; }
.ui-scope input[type=range]::-moz-range-thumb { width:18px; height:10px; border:0; border-radius:3px; background:#bfc8d8; }
@media(max-width:650px) { .ui-table :where(th,td) { padding:10px 12px; } }
