/* ============================================================
   Codex / Sanctum — Global Stylesheet
   All design tokens, resets, utilities, and component styles.
   Plugin stylesheets inherit these tokens via CSS custom properties.
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
/*
   Two token namespaces are supported for backwards compatibility:
     --am-*      (canonical Sanctum tokens)
     --color-*   (legacy layout tokens used by layout/layout.css)
   Both are defined on :root so plugin and layout stylesheets can use either.
*/

:root {
  /* Backgrounds */
  --am-bg:             #0d1117;
  --am-surface:        #161b22;
  --am-surface-raised: #21262d;

  /* Borders */
  --am-border:         #30363d;

  /* Text */
  --am-text:           #c9d1d9;
  --am-text-strong:    #e6edf3;
  --am-text-muted:     #8b949e;

  /* Brand / State colours */
  --am-primary:        #1f6feb;
  --am-primary-hover:  #388bfd;
  --am-success:        #238636;
  --am-success-fg:     #3fb950;
  --am-danger:         #da3633;
  --am-danger-fg:      #f85149;
  --am-warning:        #e3b341;
  --am-warning-fg:     #d29922;

  /* Shape */
  --am-radius:         6px;
  --am-radius-lg:      12px;

  /* Typography */
  --am-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --am-mono:           'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Elevation */
  --am-shadow:         0 1px 3px rgba(0,0,0,0.4);
  --am-shadow-lg:      0 4px 16px rgba(0,0,0,0.6);

  /* Motion */
  --am-transition:     150ms ease;

  /* Layout */
  --am-header-height:  56px;
  --am-nav-width:      220px;
  --am-nav-collapsed:  56px;

  /* ── Legacy --color-* aliases (for layout/layout.css compatibility) ── */
  --color-bg:               var(--am-bg);
  --color-surface:          var(--am-surface);
  --color-surface-raised:   var(--am-surface-raised);
  --color-border:           var(--am-border);
  --color-text:             var(--am-text);
  --color-text-muted:       var(--am-text-muted);
  --color-primary:          var(--am-primary);
  --color-primary-hover:    var(--am-primary-hover);
  --color-danger:           var(--am-danger);
  --color-danger-hover:     var(--am-danger-fg);
  --color-success:          var(--am-success);
  --color-warning:          var(--am-warning);
  --color-error:            var(--am-danger);

  /* Layout geometry aliases */
  --header-height:          var(--am-header-height);
  --sidebar-width:          var(--am-nav-width);

  /* Typography aliases */
  --font-size-sm:           12px;
  --font-size-md:           14px;
  --font-size-lg:           18px;
  --font-weight-normal:     400;
  --font-weight-bold:       600;

  /* Spacing aliases */
  --space-xs:               4px;
  --space-sm:               8px;
  --space-md:               16px;
  --space-lg:               24px;
  --space-xl:               32px;

  /* Shape aliases */
  --radius-sm:              var(--am-radius);
  --radius-md:              var(--am-radius);
  --radius-lg:              var(--am-radius-lg);

  /* Shadow aliases */
  --shadow-sm:              var(--am-shadow);
  --shadow-md:              var(--am-shadow-lg);

  /* Transition alias */
  --transition-fast:        var(--am-transition);
}

/* ── Reset / Normalize ─────────────────────────────────────── */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--am-bg);
    color: var(--am-text);
    font-family: var(--am-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

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

  button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
  }

  img, svg {
    display: block;
    max-width: 100%;
  }

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

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    color: var(--am-text-strong);
    line-height: 1.25;
  }

  p {
    margin: 0 0 12px;
  }

  p:last-child {
    margin-bottom: 0;
  }

  code, pre {
    font-family: var(--am-mono);
    font-size: 13px;
  }

  code {
    background: var(--am-surface-raised);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    padding: 1px 5px;
  }

  pre {
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    padding: 16px;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }

  pre code {
    background: none;
    border: none;
    padding: 0;
  }

  hr {
    border: none;
    border-top: 1px solid var(--am-border);
    margin: 16px 0;
  }
}

/* ── App Shell ─────────────────────────────────────────────── */

.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

/* Core layout shell — injected by core-layout plugin */
.am-layout {
  display: grid;
  grid-template-rows: var(--am-header-height) 1fr;
  grid-template-columns: var(--am-nav-width) 1fr;
  grid-template-areas:
    "header header"
    "nav    main";
  height: 100vh;
  overflow: hidden;
}

.am-header {
  grid-area: header;
  background: var(--am-surface);
  border-bottom: 1px solid var(--am-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 100;
}

.am-header-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--am-text-strong);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  margin-right: 8px;
}

.am-header-spacer {
  flex: 1;
}

.am-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pod container for header buttons injected by plugins */
[data-pod="header.button"] {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-pod="header.status"] {
  display: flex;
  align-items: center;
  gap: 6px;
}

.am-nav {
  grid-area: nav;
  background: var(--am-surface);
  border-right: 1px solid var(--am-border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.am-nav-section {
  padding: 8px 0;
}

.am-nav-label {
  padding: 6px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--am-text-muted);
}

.am-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--am-text);
  cursor: pointer;
  border-radius: var(--am-radius);
  margin: 1px 6px;
  transition: background var(--am-transition), color var(--am-transition);
  user-select: none;
  border: none;
  background: none;
  width: calc(100% - 12px);
  text-align: left;
  font-size: 14px;
}

.am-nav-item:hover {
  background: var(--am-surface-raised);
  color: var(--am-text-strong);
}

.am-nav-item.active {
  background: rgba(31, 111, 235, 0.15);
  color: var(--am-primary-hover);
  font-weight: 500;
}

.am-nav-item .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

.am-main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  position: relative;
}

/* ── Buttons ──────────────────────────────────────────────── */

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--am-radius);
  border: 1px solid var(--am-border);
  background: var(--am-surface-raised);
  color: var(--am-text);
  font-family: var(--am-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--am-transition), border-color var(--am-transition),
              color var(--am-transition), opacity var(--am-transition);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.am-btn:hover {
  background: color-mix(in srgb, var(--am-surface-raised) 80%, white 20%);
  border-color: color-mix(in srgb, var(--am-border) 70%, white 30%);
  color: var(--am-text-strong);
}

.am-btn:active {
  transform: translateY(1px);
}

.am-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.am-btn-primary {
  background: var(--am-primary);
  border-color: var(--am-primary);
  color: #ffffff;
}

.am-btn-primary:hover {
  background: var(--am-primary-hover);
  border-color: var(--am-primary-hover);
  color: #ffffff;
}

.am-btn-danger {
  background: var(--am-danger);
  border-color: var(--am-danger);
  color: #ffffff;
}

.am-btn-danger:hover {
  background: color-mix(in srgb, var(--am-danger) 85%, white 15%);
  border-color: color-mix(in srgb, var(--am-danger) 85%, white 15%);
  color: #ffffff;
}

.am-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.am-btn-lg {
  padding: 10px 20px;
  font-size: 15px;
}

.am-btn-icon {
  padding: 6px;
  aspect-ratio: 1;
}

/* ── Form Inputs ──────────────────────────────────────────── */

.am-input {
  display: block;
  width: 100%;
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  color: var(--am-text);
  font-family: var(--am-font);
  font-size: 14px;
  padding: 7px 11px;
  outline: none;
  transition: border-color var(--am-transition), box-shadow var(--am-transition);
}

.am-input:focus {
  border-color: var(--am-primary);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}

.am-input::placeholder {
  color: var(--am-text-muted);
}

.am-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.am-input-sm {
  padding: 4px 8px;
  font-size: 13px;
}

.am-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--am-text-strong);
  margin-bottom: 5px;
}

.am-form-group {
  margin-bottom: 16px;
}

.am-form-hint {
  font-size: 12px;
  color: var(--am-text-muted);
  margin-top: 4px;
}

.am-authz-inline-empty {
  display: inline-flex;
  padding: 0;
  text-align: left;
}

.am-authz-role-dialog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.am-authz-permission-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.am-authz-permission-group {
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  margin: 0;
  padding: 12px;
}

.am-authz-permission-group legend {
  color: var(--am-text-strong);
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
}

.am-authz-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
}

.am-authz-permission-option {
  align-items: flex-start;
  color: var(--am-text);
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
  line-height: 1.35;
  min-height: 28px;
}

.am-authz-permission-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.am-authz-permission-option strong {
  color: var(--am-text-strong);
  font-size: 12px;
  font-weight: 600;
}

.am-authz-permission-option small {
  color: var(--am-text-muted);
  font-size: 11px;
}

.am-authz-permission-option input {
  margin-top: 2px;
}

/* ── Cards ────────────────────────────────────────────────── */

.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  padding: 20px;
  box-shadow: var(--am-shadow);
}

.am-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--am-border);
}

.am-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--am-text-strong);
}

.am-card-body {
  /* content area */
}

.am-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--am-border);
}

/* ── Badges ───────────────────────────────────────────────── */

.am-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.am-badge-default {
  background: var(--am-surface-raised);
  border-color: var(--am-border);
  color: var(--am-text-muted);
}

.am-badge-primary {
  background: rgba(31, 111, 235, 0.15);
  border-color: rgba(31, 111, 235, 0.4);
  color: var(--am-primary-hover);
}

.am-badge-success {
  background: rgba(35, 134, 54, 0.15);
  border-color: rgba(35, 134, 54, 0.4);
  color: var(--am-success-fg);
}

.am-badge-danger {
  background: rgba(218, 54, 51, 0.15);
  border-color: rgba(218, 54, 51, 0.4);
  color: var(--am-danger-fg);
}

.am-badge-warning {
  background: rgba(227, 179, 65, 0.15);
  border-color: rgba(227, 179, 65, 0.4);
  color: var(--am-warning);
}

/* ── Tables ───────────────────────────────────────────────── */

.am-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
}

.am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.am-table th {
  background: var(--am-surface);
  color: var(--am-text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--am-border);
  white-space: nowrap;
}

.am-table td {
  padding: 10px 14px;
  color: var(--am-text);
  border-bottom: 1px solid var(--am-border);
  vertical-align: middle;
}

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

.am-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ── Spinner ──────────────────────────────────────────────── */

.am-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--am-border);
  border-top-color: var(--am-primary);
  border-radius: 50%;
  animation: am-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.am-spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.am-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes am-spin {
  to { transform: rotate(360deg); }
}

/* ── Toast Notifications ──────────────────────────────────── */

#toast-root {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.am-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  padding: 12px 14px;
  box-shadow: var(--am-shadow-lg);
  pointer-events: all;
  animation: am-toast-in var(--am-transition) ease forwards;
  color: var(--am-text);
  font-size: 13px;
  line-height: 1.4;
  min-width: 240px;
}

.am-toast.am-toast-success { border-left: 3px solid var(--am-success); }
.am-toast.am-toast-danger  { border-left: 3px solid var(--am-danger);  }
.am-toast.am-toast-warning { border-left: 3px solid var(--am-warning); }
.am-toast.am-toast-info    { border-left: 3px solid var(--am-primary); }

.am-toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.am-toast.am-toast-success .am-toast-icon { color: var(--am-success-fg); }
.am-toast.am-toast-danger  .am-toast-icon { color: var(--am-danger-fg);  }
.am-toast.am-toast-warning .am-toast-icon { color: var(--am-warning);    }
.am-toast.am-toast-info    .am-toast-icon { color: var(--am-primary-hover); }

.am-toast-body {
  flex: 1;
}

.am-toast-title {
  font-weight: 600;
  color: var(--am-text-strong);
  margin-bottom: 2px;
}

.am-toast-msg {
  color: var(--am-text-muted);
}

.am-toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--am-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  transition: color var(--am-transition);
  margin-top: -2px;
}

.am-toast-dismiss:hover {
  color: var(--am-text-strong);
}

.am-toast.am-toast-out {
  animation: am-toast-out var(--am-transition) ease forwards;
}

@keyframes am-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes am-toast-out {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── Modal ────────────────────────────────────────────────── */

#modal-root {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
}

#modal-root.am-modal-root-active {
  pointer-events: all;
}

.am-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: all;
  animation: am-fade-in var(--am-transition) ease;
}

.am-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: all;
  animation: am-fade-in var(--am-transition) ease;
}

.am-modal {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  box-shadow: var(--am-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: am-slide-up 200ms ease;
}

.am-modal-small {
  max-width: 420px;
}

.am-modal-medium {
  max-width: 560px;
}

.am-modal-large {
  max-width: 920px;
}

.am-modal-fullscreen {
  max-width: none;
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
}

.am-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--am-border);
}

.am-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--am-text-strong);
}

.am-modal-close {
  background: none;
  border: none;
  color: var(--am-text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--am-radius);
  transition: color var(--am-transition), background var(--am-transition);
}

.am-modal-close:hover {
  color: var(--am-text-strong);
  background: var(--am-surface-raised);
}

.am-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.am-modal-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--am-border);
}

.am-drawer {
  width: min(460px, 100vw);
  height: 100%;
  background: var(--am-surface);
  border-left: 1px solid var(--am-border);
  box-shadow: -18px 0 44px rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: am-drawer-in 180ms ease;
}

.am-drawer-small {
  width: min(360px, 100vw);
}

.am-drawer-medium {
  width: min(460px, 100vw);
}

.am-drawer-large {
  width: min(720px, 100vw);
}

.am-drawer-fullscreen {
  width: 100vw;
}

.am-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--am-border);
}

.am-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--am-text-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

@keyframes am-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes am-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes am-drawer-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ── Update Banner ────────────────────────────────────────── */

.am-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  background: var(--am-warning);
  color: #0d1117;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--am-shadow);
}

.am-update-banner a,
.am-update-banner button {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: var(--am-radius);
  color: #0d1117;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  text-decoration: none;
  transition: background var(--am-transition);
}

.am-update-banner button:hover {
  background: rgba(0,0,0,0.25);
}

/* ── Utility: empty state ─────────────────────────────────── */

.am-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--am-text-muted);
  text-align: center;
  gap: 8px;
}

.am-empty-icon {
  width: 40px;
  height: 40px;
  opacity: 0.4;
  margin-bottom: 4px;
}

.am-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--am-text);
}

/* ── Utility spacing / visibility ─────────────────────────── */

.am-hidden {
  display: none !important;
}

.am-u-block {
  display: block !important;
}

.am-u-mt-8 {
  margin-top: 8px !important;
}

.am-u-mt-12 {
  margin-top: 12px !important;
}

.am-u-mt-16 {
  margin-top: 16px !important;
}

.am-u-mb-0 {
  margin-bottom: 0 !important;
}

.am-u-mb-8 {
  margin-bottom: 8px !important;
}

.am-u-mb-12 {
  margin-bottom: 12px !important;
}

.am-u-pt-12 {
  padding-top: 12px !important;
}

.am-pre-scroll-sm {
  max-height: 280px;
  overflow: auto;
}

.am-pre-scroll-md {
  max-height: 320px;
  overflow: auto;
}

.am-startup-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 12px;
  color: var(--am-text-muted, #8b949e);
  font-family: var(--am-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.am-startup-error-title {
  color: var(--am-danger-fg, #f85149);
  font-size: 18px;
  font-weight: 600;
}

.am-startup-error-message {
  font-size: 13px;
}

/* ── Plugin CSS scoping ───────────────────────────────────── */
/*
   Plugins must scope their CSS under .am-plugin-{name}.
   This ensures tokens are inherited but styles do not leak globally.
   Example:
     .am-plugin-my-plugin .my-widget { background: var(--am-surface); }
     .am-plugin-my-plugin { --am-primary: #ff6b35; }  (local token override)
*/

/* ── Scrollbar styling ────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--am-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--am-border) 70%, white 30%);
}

/* ── Focus visible ────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--am-primary);
  outline-offset: 2px;
}

/* ── Selection ────────────────────────────────────────────── */

::selection {
  background: rgba(31, 111, 235, 0.3);
  color: var(--am-text-strong);
}