/* Onysoft component CSS — extracted verbatim from claudedesign/components/*.jsx .ony-* style blocks.
   Source of truth: the Stitch/Claude design kit. Tokens live in styles.css (tokens/*). */

/* The HTML `hidden` attribute must win over inline display (e.g. modal overlays use inline display:flex);
   without this they'd render open by default and never close. Standard normalize rule. */
[hidden] { display: none !important; }

/* ===== Avatar ===== */
.ony-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:visible;font-family:var(--font-sans);font-weight:700;color:#fff;user-select:none;}
.ony-avatar--square{border-radius:var(--radius-md);}
.ony-avatar__img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block;}
.ony-avatar__initials{width:100%;height:100%;border-radius:inherit;display:flex;align-items:center;justify-content:center;letter-spacing:.01em;}
.ony-avatar__status{position:absolute;right:-1px;bottom:-1px;border-radius:50%;border:2px solid var(--bg-surface);}
.ony-avatar__status--online{background:var(--status-online);}
.ony-avatar__status--warning{background:var(--status-warning);}
.ony-avatar__status--critical{background:var(--status-critical);}
.ony-avatar__status--idle{background:var(--status-idle);}

/* ===== Card ===== */
.ony-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;font-family:var(--font-sans);color:var(--text-primary);}
.ony-card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-standard),
  border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.ony-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-2px);}
.ony-card--flat{box-shadow:none;}
.ony-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--border-subtle);}
.ony-card__titles{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ony-card__title{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);}
.ony-card__sub{font-size:13px;color:var(--text-muted);}
.ony-card__actions{display:flex;align-items:center;gap:8px;flex:none;}
.ony-card__body{padding:20px;}
.ony-card__body--flush{padding:0;}
.ony-card__foot{padding:14px 20px;border-top:1px solid var(--border-subtle);background:var(--bg-sunken);}
@media (prefers-reduced-motion:reduce){.ony-card--interactive{transition:none;}}

/* ===== StatCard ===== */
.ony-stat{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);padding:18px 20px;font-family:var(--font-sans);display:flex;flex-direction:column;gap:12px;}
.ony-stat__top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ony-stat__label{font-size:13px;font-weight:600;color:var(--text-secondary);}
.ony-stat__chip{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--accent-soft);color:var(--accent);}
.ony-stat__chip--online{background:var(--status-online-soft);color:var(--status-online-text);}
.ony-stat__chip--warning{background:var(--status-warning-soft);color:var(--status-warning-text);}
.ony-stat__chip--critical{background:var(--status-critical-soft);color:var(--status-critical-text);}
.ony-stat__chip--idle{background:var(--status-idle-soft);color:var(--status-idle-text);}
.ony-stat__value{font-family:var(--font-mono);font-feature-settings:"tnum" 1;font-size:30px;font-weight:600;
  letter-spacing:-.02em;color:var(--text-primary);line-height:1;display:flex;align-items:baseline;gap:6px;}
.ony-stat__unit{font-size:15px;font-weight:500;color:var(--text-muted);font-family:var(--font-sans);}
.ony-stat__foot{display:flex;align-items:center;gap:8px;font-size:12px;}
.ony-stat__delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-family:var(--font-mono);}
.ony-stat__delta--up{color:var(--status-online-text);}
.ony-stat__delta--down{color:var(--status-critical-text);}
.ony-stat__delta--flat{color:var(--text-muted);}
.ony-stat__note{color:var(--text-muted);}

/* ===== StatusBadge ===== */
.ony-sbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;font-weight:600;
  line-height:1;padding:4px 10px 4px 8px;border-radius:var(--radius-pill);white-space:nowrap;}
.ony-sbadge__dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;position:relative;}
.ony-sbadge svg{margin-left:-1px;}
.ony-sbadge--online{background:var(--status-online-soft);color:var(--status-online-text);}
.ony-sbadge--online .ony-sbadge__dot{background:var(--status-online);}
.ony-sbadge--warning{background:var(--status-warning-soft);color:var(--status-warning-text);}
.ony-sbadge--warning .ony-sbadge__dot{background:var(--status-warning);}
.ony-sbadge--critical{background:var(--status-critical-soft);color:var(--status-critical-text);}
.ony-sbadge--critical .ony-sbadge__dot{background:var(--status-critical);}
.ony-sbadge--idle{background:var(--status-idle-soft);color:var(--status-idle-text);}
.ony-sbadge--idle .ony-sbadge__dot{background:var(--status-idle);}
.ony-sbadge--info{background:var(--accent-soft);color:var(--accent-soft-text);}
.ony-sbadge--info .ony-sbadge__dot{background:var(--accent);}
.ony-sbadge--live .ony-sbadge__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  opacity:.55;animation:ony-pulse 1.6s var(--ease-out) infinite;}
@keyframes ony-pulse{0%{transform:scale(1);opacity:.55;}70%{transform:scale(2.6);opacity:0;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.ony-sbadge--live .ony-sbadge__dot::after{animation:none;}}

/* ===== Table ===== */
.ony-tablewrap{width:100%;overflow:auto;font-family:var(--font-sans);}
.ony-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--text-primary);}
.ony-table thead th{position:sticky;top:0;background:var(--bg-sunken);text-align:left;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:11px 16px;white-space:nowrap;
  border-bottom:1px solid var(--border-default);z-index:1;}
.ony-table--nostick thead th{position:static;}
.ony-table th.ony-th--sortable{cursor:pointer;user-select:none;}
.ony-table th.ony-th--sortable:hover{color:var(--text-secondary);}
.ony-th__inner{display:inline-flex;align-items:center;gap:5px;}
.ony-th__sort{display:inline-flex;opacity:.45;}
.ony-th__sort--active{opacity:1;color:var(--accent);}
.ony-table tbody td{padding:13px 16px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;}
.ony-table tbody tr{transition:background var(--dur-fast) var(--ease-standard);}
.ony-table tbody tr:hover{background:var(--bg-hover);}
.ony-table tbody tr.ony-tr--clickable{cursor:pointer;}
.ony-table tbody tr.ony-tr--selected{background:var(--accent-soft);}
.ony-table--dense thead th{padding:8px 14px;}
.ony-table--dense tbody td{padding:9px 14px;}
.ony-td--right{text-align:right;}
.ony-td--center{text-align:center;}
.ony-td--num{font-family:var(--font-mono);font-feature-settings:"tnum" 1;}
.ony-table__sel{width:1%;white-space:nowrap;}
.ony-table__empty{padding:48px 16px;text-align:center;color:var(--text-muted);}

/* ===== Tag ===== */
.ony-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:12px;font-weight:600;
  line-height:1;padding:4px 9px;border-radius:var(--radius-sm);white-space:nowrap;border:1px solid transparent;}
.ony-tag--neutral{background:var(--bg-sunken);color:var(--text-secondary);border-color:var(--border-default);}
.ony-tag--accent{background:var(--accent-soft);color:var(--accent-soft-text);border-color:var(--accent-soft-border);}
.ony-tag--success{background:var(--status-online-soft);color:var(--status-online-text);}
.ony-tag--warning{background:var(--status-warning-soft);color:var(--status-warning-text);}
.ony-tag--danger{background:var(--status-critical-soft);color:var(--status-critical-text);}
/* Aliases so status-ish tones map onto the canonical tag palette (used across panel views). */
.ony-tag--online{background:var(--status-online-soft);color:var(--status-online-text);}
.ony-tag--idle,.ony-tag--default{background:var(--bg-sunken);color:var(--text-secondary);border-color:var(--border-default);}
.ony-tag--critical{background:var(--status-critical-soft);color:var(--status-critical-text);}
.ony-tag--info{background:var(--accent-soft);color:var(--accent-soft-text);border-color:var(--accent-soft-border);}
.ony-tag__x{display:inline-flex;cursor:pointer;opacity:.6;border-radius:3px;margin-right:-2px;}
.ony-tag__x:hover{opacity:1;}

/* ===== Dialog ===== */
.ony-dialog__scrim{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;
  animation:ony-dialog-fade var(--dur-base) var(--ease-out);}
.ony-dialog{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);width:100%;max-width:480px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  overflow:hidden;font-family:var(--font-sans);color:var(--text-primary);animation:ony-dialog-pop var(--dur-base) var(--ease-out);}
.ony-dialog--sm{max-width:380px;}.ony-dialog--lg{max-width:640px;}
.ony-dialog__head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 0;}
.ony-dialog__icon{width:38px;height:38px;border-radius:var(--radius-md);flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);}
.ony-dialog__icon--danger{background:var(--status-critical-soft);color:var(--status-critical-text);}
.ony-dialog__icon--warning{background:var(--status-warning-soft);color:var(--status-warning-text);}
.ony-dialog__titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ony-dialog__title{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.ony-dialog__desc{font-size:13px;color:var(--text-muted);line-height:1.5;}
.ony-dialog__close{flex:none;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;}
.ony-dialog__close:hover{background:var(--bg-hover);color:var(--text-primary);}
.ony-dialog__body{padding:16px 22px;overflow:auto;font-size:14px;color:var(--text-secondary);line-height:1.55;}
.ony-dialog__foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border-subtle);background:var(--bg-sunken);}
@keyframes ony-dialog-fade{from{opacity:0;}to{opacity:1;}}
@keyframes ony-dialog-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.ony-dialog,.ony-dialog__scrim{animation:none;}}

/* ===== EmptyState ===== */
.ony-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 24px;font-family:var(--font-sans);}
.ony-empty__icon{width:56px;height:56px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:8px;}
.ony-empty__title{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;}
.ony-empty__desc{font-size:13px;color:var(--text-muted);line-height:1.55;max-width:380px;}
.ony-empty__action{margin-top:12px;display:flex;gap:10px;}

/* ===== Skeleton ===== */
.ony-skel{display:block;background:var(--bg-sunken);position:relative;overflow:hidden;border-radius:var(--radius-sm);}
.ony-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--bg-hover),transparent);animation:ony-shimmer 1.4s infinite;}
.ony-skel--text{height:.7em;border-radius:var(--radius-xs);margin:.18em 0;}
.ony-skel--circle{border-radius:50%;}
.ony-skel--block{border-radius:var(--radius-lg);}
@keyframes ony-shimmer{100%{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){.ony-skel::after{animation:none;}}

/* ===== Toast ===== */
.ony-toastport{position:fixed;z-index:var(--z-toast);bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;
  max-width:380px;width:max-content;}
.ony-toast{display:flex;align-items:flex-start;gap:11px;background:var(--bg-elevated);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:13px 14px;font-family:var(--font-sans);min-width:300px;
  animation:ony-toast-in var(--dur-base) var(--ease-out);}
.ony-toast__icon{flex:none;margin-top:1px;}
.ony-toast__icon--info{color:var(--accent);}
.ony-toast__icon--success{color:var(--status-online);}
.ony-toast__icon--warning{color:var(--status-warning);}
.ony-toast__icon--critical{color:var(--status-critical);}
.ony-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ony-toast__title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;}
.ony-toast__desc{font-size:13px;color:var(--text-secondary);line-height:1.45;}
.ony-toast__close{flex:none;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:2px;border-radius:var(--radius-sm);display:flex;}
.ony-toast__close:hover{background:var(--bg-hover);color:var(--text-primary);}
@keyframes ony-toast-in{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.ony-toast{animation:none;}}

/* ===== Tooltip ===== */
.ony-tip{position:relative;display:inline-flex;}
.ony-tip__bubble{position:absolute;z-index:var(--z-tooltip);background:var(--navy-900);color:#fff;font-family:var(--font-sans);
  font-size:12px;font-weight:500;line-height:1.4;padding:6px 9px;border-radius:var(--radius-sm);white-space:nowrap;
  max-width:240px;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);}
.ony-tip__bubble--show{opacity:1;}
.ony-tip__bubble::after{content:"";position:absolute;width:7px;height:7px;background:inherit;transform:rotate(45deg);}
.ony-tip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);}
.ony-tip__bubble--top.ony-tip__bubble--show{transform:translateX(-50%) translateY(0);}
.ony-tip__bubble--top::after{bottom:-3px;left:50%;margin-left:-3px;}
.ony-tip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);}
.ony-tip__bubble--bottom.ony-tip__bubble--show{transform:translateX(-50%) translateY(0);}
.ony-tip__bubble--bottom::after{top:-3px;left:50%;margin-left:-3px;}
.ony-tip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px);}
.ony-tip__bubble--left.ony-tip__bubble--show{transform:translateY(-50%) translateX(0);}
.ony-tip__bubble--left::after{right:-3px;top:50%;margin-top:-3px;}
.ony-tip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-4px);}
.ony-tip__bubble--right.ony-tip__bubble--show{transform:translateY(-50%) translateX(0);}
.ony-tip__bubble--right::after{left:-3px;top:50%;margin-top:-3px;}
[data-theme="dark"] .ony-tip__bubble{background:var(--navy-950);border:1px solid var(--border-default);}
@media (prefers-reduced-motion:reduce){.ony-tip__bubble{transition:opacity var(--dur-fast) linear;}}

/* ===== Button ===== */
.ony-btn{--_h:38px;--_px:16px;--_fs:14px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:var(--_h);padding:0 var(--_px);font-family:var(--font-sans);font-size:var(--_fs);
  font-weight:600;line-height:1;letter-spacing:-.01em;border:1px solid transparent;border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;user-select:none;transition:background var(--dur-fast) var(--ease-standard),
  border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
  box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard);}
.ony-btn:focus-visible{outline:none;box-shadow:var(--ring);}
.ony-btn:active{transform:translateY(.5px) scale(.99);}
.ony-btn[disabled],.ony-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55;box-shadow:none;transform:none;}
.ony-btn--sm{--_h:32px;--_px:12px;--_fs:13px;}
.ony-btn--lg{--_h:44px;--_px:22px;--_fs:15px;}
.ony-btn--block{display:flex;width:100%;}
.ony-btn--primary{background:var(--accent);color:var(--accent-contrast);}
.ony-btn--primary:hover{background:var(--accent-hover);}
.ony-btn--primary:active{background:var(--accent-active);}
.ony-btn--secondary{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-strong);}
.ony-btn--secondary:hover{background:var(--bg-hover);border-color:var(--border-strong);}
.ony-btn--ghost{background:transparent;color:var(--text-secondary);}
.ony-btn--ghost:hover{background:var(--bg-hover);color:var(--text-primary);}
.ony-btn--danger{background:var(--status-critical);color:#fff;}
.ony-btn--danger:hover{background:var(--red-600);}
.ony-btn--danger:active{background:var(--red-700);}
.ony-btn__spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:ony-btn-spin .6s linear infinite;flex:none;}
@keyframes ony-btn-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.ony-btn{transition:none;}.ony-btn__spin{animation-duration:1.2s;}}

/* ===== Checkbox ===== */
.ony-check{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-sans);cursor:pointer;user-select:none;}
.ony-check--disabled{cursor:not-allowed;opacity:.55;}
.ony-check input{position:absolute;opacity:0;width:0;height:0;}
.ony-check__box{position:relative;width:18px;height:18px;flex:none;margin-top:1px;background:var(--bg-surface);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
.ony-check__box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform var(--dur-fast) var(--ease-out);}
.ony-check:hover input:not(:disabled) + .ony-check__box{border-color:var(--accent);}
.ony-check input:checked + .ony-check__box,
.ony-check input:indeterminate + .ony-check__box{background:var(--accent);border-color:var(--accent);}
.ony-check input:checked + .ony-check__box::after{transform:rotate(45deg) scale(1);}
.ony-check input:indeterminate + .ony-check__box::after{left:3px;top:7px;width:10px;height:0;border-width:0 0 2px 0;transform:none;}
.ony-check input:focus-visible + .ony-check__box{box-shadow:var(--ring);}
.ony-check__text{display:flex;flex-direction:column;gap:2px;}
.ony-check__label{font-size:14px;color:var(--text-primary);line-height:1.35;}
.ony-check__hint{font-size:12px;color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){.ony-check__box,.ony-check__box::after{transition:none;}}

/* ===== IconButton ===== */
.ony-iconbtn{--_s:38px;display:inline-flex;align-items:center;justify-content:center;width:var(--_s);height:var(--_s);
  padding:0;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);
  cursor:pointer;flex:none;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
  border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.ony-iconbtn:hover{background:var(--bg-hover);color:var(--text-primary);}
.ony-iconbtn:active{transform:scale(.94);}
.ony-iconbtn:focus-visible{outline:none;box-shadow:var(--ring);}
.ony-iconbtn[disabled]{cursor:not-allowed;opacity:.5;}
.ony-iconbtn--sm{--_s:32px;}
.ony-iconbtn--lg{--_s:44px;}
.ony-iconbtn--solid{background:var(--accent);color:var(--accent-contrast);}
.ony-iconbtn--solid:hover{background:var(--accent-hover);color:var(--accent-contrast);}
.ony-iconbtn--outline{border-color:var(--border-strong);color:var(--text-secondary);}
.ony-iconbtn--outline:hover{background:var(--bg-hover);}
.ony-iconbtn--danger:hover{background:var(--status-critical-soft);color:var(--status-critical-text);}
@media (prefers-reduced-motion:reduce){.ony-iconbtn{transition:none;}}

/* ===== Input ===== */
.ony-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans);}
.ony-field__label{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;gap:4px;align-items:center;}
.ony-field__req{color:var(--status-critical);}
.ony-input{position:relative;display:flex;align-items:center;background:var(--bg-surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-fast);}
.ony-input:hover{border-color:var(--slate-400);}
.ony-input:focus-within{border-color:var(--accent);box-shadow:var(--ring);}
.ony-input__icon{display:flex;align-items:center;color:var(--text-muted);padding-left:12px;}
.ony-input input{flex:1;width:100%;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14px;color:var(--text-primary);padding:9px 12px;border-radius:inherit;}
.ony-input input::placeholder{color:var(--text-muted);}
.ony-input--sm input{padding:6px 10px;font-size:13px;}
.ony-input--lg input{padding:12px 14px;font-size:15px;}
.ony-input__trail{display:flex;align-items:center;color:var(--text-muted);padding-right:12px;}
.ony-field--error .ony-input{border-color:var(--status-critical);}
.ony-field--error .ony-input:focus-within{box-shadow:0 0 0 3px var(--status-critical-soft);}
.ony-input--disabled{background:var(--bg-sunken);opacity:.7;cursor:not-allowed;}
/* Multiline input — theme-consistent with .ony-input (used in alarms/commands/machine-detail dialogs). */
.ony-textarea{display:block;width:100%;background:var(--bg-surface);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-sans);
  font-size:14px;line-height:1.5;padding:9px 12px;resize:vertical;outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.ony-textarea::placeholder{color:var(--text-muted);}
.ony-textarea:hover{border-color:var(--slate-400);}
.ony-textarea:focus{border-color:var(--accent);box-shadow:var(--ring);}
/* Inline accent link (dashboard "view all" etc.) */
.ony-link{color:var(--accent);font-weight:600;text-decoration:none;}
.ony-link:hover{text-decoration:underline;}
/* Square icon-only button variant for .ony-btn (e.g. copy-key button) */
.ony-btn--icon{padding:0;width:var(--_h,38px);min-width:var(--_h,38px);aspect-ratio:1;}
.ony-input--disabled input{cursor:not-allowed;}
.ony-field__hint{font-size:12px;color:var(--text-muted);}
.ony-field__hint--error{color:var(--status-critical-text);display:flex;align-items:center;gap:5px;}
@media (prefers-reduced-motion:reduce){.ony-input{transition:none;}}

/* ===== Radio ===== */
.ony-radio{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-sans);cursor:pointer;user-select:none;}
.ony-radio--disabled{cursor:not-allowed;opacity:.55;}
.ony-radio input{position:absolute;opacity:0;width:0;height:0;}
.ony-radio__dot{position:relative;width:18px;height:18px;flex:none;margin-top:1px;background:var(--bg-surface);
  border:1.5px solid var(--border-strong);border-radius:50%;
  transition:border-color var(--dur-fast) var(--ease-standard);}
.ony-radio__dot::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;
  background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease-out);}
.ony-radio:hover input:not(:disabled) + .ony-radio__dot{border-color:var(--accent);}
.ony-radio input:checked + .ony-radio__dot{border-color:var(--accent);}
.ony-radio input:checked + .ony-radio__dot::after{transform:scale(1);}
.ony-radio input:focus-visible + .ony-radio__dot{box-shadow:var(--ring);}
.ony-radio__text{display:flex;flex-direction:column;gap:2px;}
.ony-radio__label{font-size:14px;color:var(--text-primary);line-height:1.35;}
.ony-radio__hint{font-size:12px;color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){.ony-radio__dot,.ony-radio__dot::after{transition:none;}}

/* ===== Select ===== */
.ony-sel{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans);}
.ony-sel__label{font-size:13px;font-weight:600;color:var(--text-primary);}
.ony-sel__wrap{position:relative;display:flex;align-items:center;background:var(--bg-surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.ony-sel__wrap:hover{border-color:var(--slate-400);}
.ony-sel__wrap:focus-within{border-color:var(--accent);box-shadow:var(--ring);}
.ony-sel select{appearance:none;-webkit-appearance:none;flex:1;width:100%;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14px;color:var(--text-primary);padding:9px 36px 9px 12px;border-radius:inherit;cursor:pointer;}
.ony-sel--sm select{padding:6px 34px 6px 10px;font-size:13px;}
.ony-sel--lg select{padding:12px 38px 12px 14px;font-size:15px;}
.ony-sel__chev{position:absolute;right:10px;pointer-events:none;color:var(--text-muted);display:flex;}
.ony-sel__wrap--disabled{background:var(--bg-sunken);opacity:.7;}
.ony-sel__wrap--disabled select{cursor:not-allowed;}
.ony-sel--error .ony-sel__wrap{border-color:var(--status-critical);}
.ony-sel__hint{font-size:12px;color:var(--text-muted);}
.ony-sel__hint--error{color:var(--status-critical-text);}
@media (prefers-reduced-motion:reduce){.ony-sel__wrap{transition:none;}}

/* ===== Switch ===== */
.ony-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);cursor:pointer;user-select:none;}
.ony-switch--disabled{cursor:not-allowed;opacity:.55;}
.ony-switch input{position:absolute;opacity:0;width:0;height:0;}
.ony-switch__track{--_w:40px;--_h:22px;--_p:3px;position:relative;width:var(--_w);height:var(--_h);flex:none;
  background:var(--slate-300);border-radius:var(--radius-pill);
  transition:background var(--dur-base) var(--ease-standard);}
.ony-switch__thumb{position:absolute;top:var(--_p);left:var(--_p);width:calc(var(--_h) - var(--_p)*2);height:calc(var(--_h) - var(--_p)*2);
  background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out);}
.ony-switch--sm .ony-switch__track{--_w:34px;--_h:19px;}
.ony-switch input:checked + .ony-switch__track{background:var(--accent);}
.ony-switch input:checked + .ony-switch__track .ony-switch__thumb{transform:translateX(calc(var(--_w) - var(--_h)));}
.ony-switch input:focus-visible + .ony-switch__track{box-shadow:var(--ring);}
.ony-switch__label{font-size:14px;color:var(--text-primary);font-weight:500;}
[data-theme="dark"] .ony-switch__track{background:var(--slate-600);}
@media (prefers-reduced-motion:reduce){.ony-switch__track,.ony-switch__thumb{transition:none;}}

/* ===== Pagination ===== */
.ony-pag{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);flex-wrap:wrap;}
.ony-pag__info{font-size:13px;color:var(--text-muted);}
.ony-pag__info b{color:var(--text-secondary);font-weight:700;font-family:var(--font-mono);font-feature-settings:"tnum" 1;}
.ony-pag__list{display:flex;align-items:center;gap:4px;margin-left:auto;}
.ony-pag__btn{min-width:34px;height:34px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-secondary);border-radius:var(--radius-md);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;font-feature-settings:"tnum" 1;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast);}
.ony-pag__btn:hover:not(:disabled):not(.ony-pag__btn--active){background:var(--bg-hover);border-color:var(--border-strong);}
.ony-pag__btn--active{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;}
.ony-pag__btn:disabled{opacity:.45;cursor:not-allowed;}
.ony-pag__ellipsis{min-width:24px;text-align:center;color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){.ony-pag__btn{transition:none;}}

/* ===== SidebarNav ===== */
.ony-side{display:flex;flex-direction:column;background:var(--bg-surface);border-right:1px solid var(--border-default);
  width:var(--sidebar-w);height:100%;font-family:var(--font-sans);transition:width var(--dur-slow) var(--ease-in-out);}
.ony-side--collapsed{width:var(--sidebar-collapsed-w);}
.ony-side__head{display:flex;align-items:center;height:var(--topbar-h);padding:0 16px;flex:none;}
.ony-side__nav{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:2px;}
.ony-side__group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);
  padding:14px 10px 6px;}
.ony-side--collapsed .ony-side__group{text-align:center;padding:12px 0 4px;opacity:.5;}
.ony-side__foot{flex:none;padding:12px;border-top:1px solid var(--border-subtle);}
.ony-navitem{display:flex;align-items:center;gap:11px;width:100%;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-secondary);padding:8px 10px;border-radius:var(--radius-md);
  text-align:left;text-decoration:none;position:relative;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
.ony-navitem:hover{background:var(--bg-hover);color:var(--text-primary);}
.ony-navitem--active{background:var(--accent-soft);color:var(--accent-soft-text);}
.ony-navitem--active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;
  border-radius:0 3px 3px 0;background:var(--accent);}
.ony-navitem__icon{flex:none;color:currentColor;}
.ony-navitem__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ony-navitem__badge{font-family:var(--font-mono);font-size:11px;font-weight:700;background:var(--accent);color:#fff;
  padding:1px 6px;border-radius:var(--radius-pill);flex:none;}
.ony-side--collapsed .ony-navitem{justify-content:center;padding:9px;}
.ony-side--collapsed .ony-navitem__label,.ony-side--collapsed .ony-navitem__badge{display:none;}
@media (prefers-reduced-motion:reduce){.ony-side,.ony-navitem{transition:none;}}

/* ===== Tabs ===== */
.ony-tabs{display:flex;font-family:var(--font-sans);}
.ony-tabs--underline{gap:4px;border-bottom:1px solid var(--border-default);}
.ony-tab{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text-muted);padding:10px 12px;position:relative;
  transition:color var(--dur-fast) var(--ease-standard);}
.ony-tabs--underline .ony-tab::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-base) var(--ease-out);}
.ony-tab:hover{color:var(--text-secondary);}
.ony-tab--active{color:var(--accent);}
.ony-tabs--underline .ony-tab--active::after{transform:scaleX(1);}
.ony-tab:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm);}
.ony-tabs--pill{gap:4px;background:var(--bg-sunken);padding:4px;border-radius:var(--radius-md);display:inline-flex;}
.ony-tabs--pill .ony-tab{padding:7px 14px;border-radius:var(--radius-sm);color:var(--text-secondary);}
.ony-tabs--pill .ony-tab--active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-xs);}
.ony-tab__badge{font-family:var(--font-mono);font-size:11px;font-weight:600;background:var(--bg-active);color:var(--text-secondary);
  padding:1px 6px;border-radius:var(--radius-pill);}
.ony-tab--active .ony-tab__badge{background:var(--accent-soft);color:var(--accent-soft-text);}
@media (prefers-reduced-motion:reduce){.ony-tab,.ony-tab::after{transition:none;}}