/* Standard markup uses std-* classes and native semantics. Behaviour hooks:
   data-mode-toggle (optional dark/light value), data-menu-toggle + aria-controls,
   data-menu-resize + aria-controls, data-modal-open + aria-controls,
   data-modal-close, and role=tab inside role=tablist with aria-controls. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); color: var(--body-fg); font-family: var(--body-font); font-size: var(--text-md); line-height: var(--line-body); }
[hidden] { display: none !important; }
.std-app, .std-dashboard { min-height: 100dvh; min-width: 0; }
.std-app { max-width: var(--app-width); margin-inline: auto; padding: var(--space-4); padding-bottom: calc(var(--control-lg) + var(--space-8)); }
.std-dashboard { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.std-main { min-width: 0; padding: var(--space-6); }
.std-side-menu { position: relative; background: var(--surface); padding: var(--space-3); overflow: auto; }
.std-dashboard:has(.std-side-menu[hidden]) { grid-template-columns: minmax(0, 1fr); }
[data-menu-resize] { position: absolute; inset-block: 0; right: 0; width: var(--hit-target); cursor: ew-resize; touch-action: none; }
.std-button, [data-mode-toggle], .std-input, .std-select, .std-textarea, .std-combobox, .std-date-picker { font: inherit; min-height: var(--control-md); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: var(--space-2) var(--control-pad-md); background: var(--surface); color: var(--body-fg); max-width: 100%; }
.std-button, [data-mode-toggle] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; line-height: var(--line-tight); transition: background-color var(--motion-fast) var(--ease-standard); }
.std-button:hover, [data-mode-toggle]:hover { background: var(--muted-bg); }
.std-button-primary, [data-mode-toggle][aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.std-button-primary:hover, [data-mode-toggle][aria-pressed="true"]:hover { background: var(--accent-hover); }
.std-button-secondary { background: var(--surface); }
.std-button-ghost { background: transparent; border-color: transparent; text-decoration: underline; }
.std-button-danger { background: var(--danger-bg); color: var(--on-danger); border-color: var(--danger-bg); }
.std-button-danger:hover { background: var(--danger-hover); }
.std-button-loading, [aria-busy="true"] { cursor: progress; }
.std-button:disabled { cursor: not-allowed; }
:where(.std-app, .std-dashboard) :focus-visible, :where(.std-button, [data-mode-toggle], .std-input, .std-select, .std-textarea, [data-menu-resize]):focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; box-shadow: var(--focus-ring); }
.std-app :where(.std-button, .std-input, .std-select) { min-height: var(--control-lg); }
.std-form, .std-field, .std-radio-group, .std-settings { display: grid; gap: var(--space-3); min-width: 0; }
.std-textarea { resize: vertical; min-height: calc(var(--control-lg) * 2); }
.std-checkbox, .std-radio, .std-switch { accent-color: var(--accent); min-width: var(--hit-target); min-height: var(--hit-target); vertical-align: middle; }
.std-switch { appearance: none; width: var(--control-lg); border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: var(--surface); padding: var(--space-1); }
.std-switch::before { content: ""; display: block; width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--radius-pill); background: var(--body-fg); transition: transform var(--motion-fast) var(--ease-standard); }
.std-switch:checked { background: var(--accent); }
.std-switch:checked::before { transform: translateX(var(--space-4)); background: var(--on-accent); }
.std-field-note, .std-muted { color: var(--muted); }
.std-error-summary, .std-error-state, .std-danger-zone { border: 1px solid var(--err); padding: var(--space-4); border-radius: var(--radius-md); }
.std-error-summary { color: var(--err); }
.std-drop-zone { border: 2px dashed var(--control-border); border-radius: var(--radius-md); padding: var(--space-8); text-align: center; }
.std-file-upload { display: grid; gap: var(--space-3); }
.std-progress { width: 100%; accent-color: var(--accent); }
.std-table-wrap { overflow-x: auto; }
.std-table { width: 100%; border-collapse: collapse; }
.std-table :where(th, td) { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--border); }
.std-table th { font-weight: var(--weight-semibold); background: var(--muted-bg); }
.std-filter-bar, .std-batch-bar, .std-pager, .std-list-row, .std-approval-row, .std-page-header, .std-app-header, .std-public-nav, .std-footer, .std-breadcrumb, .std-subnav, .std-segmented-control, .std-tabs, .std-detail-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.std-list-row, .std-approval-row { border-bottom: 1px solid var(--border); justify-content: space-between; }
.std-card, .std-stat-tile, .std-pricing-card, .std-sign-in, .std-sign-up, .std-reset, .std-consent, .std-cta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); min-width: 0; }
.std-stat-value { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.std-badge, .std-pill { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); background: var(--surface); }
.std-success { color: var(--ok); } .std-warning { color: var(--warn); } .std-danger { color: var(--err); }
.std-tabs [role="tab"], .std-detail-tabs [role="tab"], .std-segmented-control [role="tab"] { font: inherit; min-height: var(--control-md); padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--body-fg); border: 1px solid var(--control-border); cursor: pointer; }
[role="tab"][aria-selected="true"] { border-bottom: 3px solid var(--accent); font-weight: var(--weight-bold); }
.std-modal, .std-confirm-dialog, .std-bottom-sheet, .std-side-drawer, .std-lightbox { background: var(--surface-raised); color: var(--body-fg); border: 1px solid var(--control-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-modal); max-width: calc(100vw - var(--space-8)); max-height: calc(100dvh - var(--space-8)); overflow: auto; z-index: var(--layer-modal); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.std-bottom-sheet { margin: auto auto 0; width: 100%; }
.std-side-drawer { margin: 0 0 0 auto; height: 100dvh; }
.std-toast, .std-notice, .std-tooltip, .std-popover, .std-dropdown-menu, .std-avatar-menu { padding: var(--space-3); background: var(--surface-raised); color: var(--body-fg); border: 1px solid var(--control-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.std-toast { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--layer-toast); max-width: calc(100vw - var(--space-8)); }
.std-tooltip, .std-popover, .std-dropdown-menu, .std-avatar-menu { z-index: var(--layer-dropdown); }
.std-spinner { display: inline-block; width: var(--icon-lg); height: var(--icon-lg); border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: std-spin var(--motion-ambient) linear infinite; }
.std-skeleton { min-height: var(--control-md); background: var(--control-border); border-radius: var(--radius-sm); animation: std-pulse var(--motion-ambient) var(--ease-ambient) infinite; }
.std-empty-state, .std-refusal, .std-forbidden, .std-not-found { padding: var(--space-8); text-align: center; }
.std-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--control-border); object-fit: cover; }
.std-chart { width: 100%; color: var(--body-fg); background: var(--surface); }
.std-chart-series { stroke: var(--accent); fill: none; stroke-width: 2; }
.std-code { font-family: var(--mono-font); padding: var(--space-4); overflow: auto; background: var(--muted-bg); border-radius: var(--radius-md); }
.std-prose { line-height: var(--line-prose); overflow-wrap: anywhere; }
.std-prose a, .std-breadcrumb a, .std-footer a { color: var(--link); text-decoration: underline; }
.std-video, .std-audio, .std-image-slot, .std-thumbnail { display: block; max-width: 100%; border-radius: var(--radius-md); }
.std-image-slot, .std-thumbnail { width: 100%; object-fit: cover; background: var(--muted-bg); }
.std-media-grid, .std-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.std-media-item { position: relative; min-width: 0; }
.std-duration, .std-processing-state { background: var(--surface); color: var(--body-fg); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.std-duration { position: absolute; bottom: var(--space-2); right: var(--space-2); }
.std-bottom-tabs, .std-bottom-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border-top: 1px solid var(--control-border); z-index: var(--layer-sticky); }
.std-bottom-actions { position: fixed; inset-inline: 0; }
.std-stepper { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4); list-style-position: inside; }
.std-stepper [aria-current="step"] { font-weight: var(--weight-bold); text-decoration: underline; }
.std-hero { padding: var(--space-8); text-align: center; }
.std-hero h1 { font-size: var(--text-xl); }
.std-oauth { width: 100%; }
@keyframes std-spin { to { transform: rotate(360deg); } }
@keyframes std-pulse { 50% { opacity: .5; } }
@media (max-width: 600px) {
  .std-dashboard { grid-template-columns: minmax(0, 1fr); }
  .std-main { padding: var(--space-3); }
  .std-side-menu { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .std-spinner, .std-skeleton { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}