:root {
  --ab-navy: #0b1b33; --ab-ink: #0f172a; --ab-sky: #16a34a; --ab-sky-dark: #15803d; --ab-sky-light: #dcfce7;
  --ab-muted: #64748b; --ab-line: #e2e8f0; --ab-bg: #f1f5f9; --ab-surface: #ffffff; --ab-card: #ffffff;
  --ab-hover: #f8fafc; --ab-header-bg: #fafbfc;
  --ab-danger: #dc2626; --ab-success: #15803d; --ab-warning: #a16207;
  --ab-radius: 12px; --ab-shadow: 0 2px 8px rgb(11 27 51 / 5%);
  --ab-shadow-raised: 0 12px 32px rgb(11 27 51 / 12%);
  --ab-fast: 150ms; --ab-motion: 220ms; --ab-ease: cubic-bezier(.2,.8,.2,1);
  --ab-content-width: 1440px; --ab-sidebar-width: 244px;
}

:root[data-theme="dark"] {
  --ab-navy: #0b1b33;
  --ab-ink: #f8fafc;
  --ab-sky: #22c55e;
  --ab-sky-dark: #16a34a;
  --ab-sky-light: #143826;
  --ab-muted: #94a3b8;
  --ab-line: #24334d;
  --ab-bg: #0b0f19;
  --ab-surface: #131b2e;
  --ab-card: #131b2e;
  --ab-hover: #1e293b;
  --ab-header-bg: #162238;
  --ab-danger: #f87171;
  --ab-success: #4ade80;
  --ab-warning: #fbbf24;
  --ab-shadow: 0 2px 8px rgb(0 0 0 / 40%);
  --ab-shadow-raised: 0 12px 32px rgb(0 0 0 / 60%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ab-navy: #0b1b33;
    --ab-ink: #f8fafc;
    --ab-sky: #22c55e;
    --ab-sky-dark: #16a34a;
    --ab-sky-light: #143826;
    --ab-muted: #94a3b8;
    --ab-line: #24334d;
    --ab-bg: #0b0f19;
    --ab-surface: #131b2e;
    --ab-card: #131b2e;
    --ab-hover: #1e293b;
    --ab-header-bg: #162238;
    --ab-danger: #f87171;
    --ab-success: #4ade80;
    --ab-warning: #fbbf24;
    --ab-shadow: 0 2px 8px rgb(0 0 0 / 40%);
    --ab-shadow-raised: 0 12px 32px rgb(0 0 0 / 60%);
  }
}

.ab-layout { margin: 0; background: var(--ab-bg); color: var(--ab-ink); font: 14px/1.5 Inter, system-ui, sans-serif; }
.ab-layout *, .ab-modal *, .ab-toast *, .ab-dropdown * { box-sizing: border-box; }
.ab-page { width: 100%; max-width: var(--ab-content-width); margin-inline: auto; padding: 24px 28px 40px; min-width: 0; }
.ab-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; min-width: 0; }
.ab-header h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.6px; }
.ab-header p, .ab-header .sub { margin: 4px 0 0; font-size: 14px; color: var(--ab-muted); }
.ab-header > div:not(.ab-actions) { min-width: 0; flex: 1; }
.ab-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.ab-btn, .ab-back { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--ab-line); border-radius: 8px; background: var(--ab-surface); color: var(--ab-ink); font: 600 14px/1.4 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.ab-btn-primary { background: var(--ab-sky); border-color: var(--ab-sky); color: white; }
.ab-btn-danger { background: var(--ab-danger); border-color: var(--ab-danger); color: white; }
.ab-btn-ghost { background: transparent; border-color: transparent; }
.ab-btn:hover, .ab-back:hover { background: var(--ab-hover); }
.ab-btn-primary:hover { background: var(--ab-sky-dark); border-color: var(--ab-sky-dark); }
.ab-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.ab-btn:disabled, .ab-input:disabled, .ab-select:disabled { opacity: .55; cursor: not-allowed; }
.ab-btn-icon { width: 40px; height: 40px; padding: 0; flex-shrink: 0; }
.ab-btn:focus-visible, .ab-back:focus-visible, .ab-tabs [role=tab]:focus-visible, .ab-dropdown a:focus-visible { outline: 3px solid rgb(21 128 61 / 40%); outline-offset: 3px; }
.ab-card { background: var(--ab-card); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: 20px; box-shadow: var(--ab-shadow); color: inherit; text-decoration: none; }
.ab-card h2, .ab-card h3 { margin: 0 0 12px; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ab-sky-light); color: var(--ab-sky-dark); font-size: 12px; font-weight: 600; }
.ab-chip-success { background: var(--ab-sky-light); color: var(--ab-success); }
.ab-chip-error { background: #fee2e2; color: var(--ab-danger); }
.ab-chip-warning { background: #fef3c7; color: var(--ab-warning); }
.ab-chip-neutral { background: var(--ab-bg); color: var(--ab-muted); }
.ab-input, .ab-select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 12px; background-color: var(--ab-surface); border: 1px solid var(--ab-line); border-radius: 8px; font: inherit; color: var(--ab-ink); }
.ab-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ab-input:focus, .ab-select:focus { outline: none; border-color: var(--ab-sky); box-shadow: 0 0 0 3px rgb(21 128 61 / 15%); }
.ab-input[aria-invalid=true] { border-color: var(--ab-danger); }
.ab-field { display: grid; gap: 6px; margin-bottom: 16px; }
.ab-field:last-child { margin-bottom: 0; }
.ab-field label { font-size: 13px; font-weight: 600; }
.ab-file { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-file input { position: absolute; width: 1px; min-height: 0; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ab-file-name { min-width: 0; overflow: hidden; color: var(--ab-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ab-tabs { display: flex; position: relative; gap: 20px; border-bottom: 1px solid var(--ab-line); overflow-x: auto; }
.ab-tabs [role=tab] { background: none; border: 0; color: var(--ab-muted); padding: 12px 2px; font: 600 14px/1.5 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.ab-tabs [aria-selected=true] { color: var(--ab-sky-dark); }
.ab-tab-indicator { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ab-sky); pointer-events: none; }
.ab-tab-panel { padding-block: 20px; }
.ab-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; background: rgb(0 0 0 / 65%); opacity: 0; font: 14px/1.5 Inter, system-ui, sans-serif; color: var(--ab-ink); }
.ab-modal[hidden], .ab-dropdown[hidden], .ab-tab-panel[hidden] { display: none; }
.ab-modal.is-open { opacity: 1; }
.ab-modal-card { width: 100%; max-width: 560px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; margin: auto; border-radius: var(--ab-radius); background: var(--ab-surface); border: 1px solid var(--ab-line); box-shadow: 0 24px 64px rgb(0 0 0 / 40%); overflow: hidden; opacity: 0; }
.ab-modal.is-open .ab-modal-card { opacity: 1; }
.ab-modal-sm .ab-modal-card { max-width: 420px; }
.ab-modal-lg .ab-modal-card { max-width: 800px; }
.ab-modal-header, .ab-modal-footer { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex-shrink: 0; }
.ab-modal-header { border-bottom: 1px solid var(--ab-line); justify-content: space-between; }
.ab-modal-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ab-modal-body { padding: 20px; overflow-y: auto; min-height: 0; }
.ab-modal-body p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ab-modal-footer { border-top: 1px solid var(--ab-line); background: var(--ab-header-bg); justify-content: flex-end; }
.ab-toast-stack { position: fixed; right: 24px; top: 24px; z-index: 11000; width: min(380px, calc(100vw - 32px)); display: grid; gap: 10px; pointer-events: none; }
.ab-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--ab-line); border-left: 4px solid var(--ab-sky); border-radius: var(--ab-radius); background: var(--ab-surface); box-shadow: var(--ab-shadow-raised); font: 14px/1.5 Inter, system-ui, sans-serif; color: var(--ab-ink); overflow-wrap: anywhere; }
.ab-toast > div { flex: 1; min-width: 0; }
.ab-toast strong { display: block; margin-bottom: 2px; }
.ab-toast p { margin: 0; }
.ab-toast .ab-btn { margin: -8px -8px -8px 0; }
.ab-toast-success { border-left-color: var(--ab-success); }
.ab-toast-error { border-left-color: var(--ab-danger); }
.ab-toast-warning { border-left-color: var(--ab-warning); }
.ab-skel { background: linear-gradient(100deg, var(--ab-line) 30%, var(--ab-hover) 50%, var(--ab-line) 70%); background-size: 220% 100%; border-radius: 8px; }
.ab-empty { text-align: center; padding: 32px 20px; color: var(--ab-muted); }
.ab-empty > i { display: block; font-size: 32px; color: var(--ab-muted); margin-bottom: 12px; }
.ab-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ab-ink); }
.ab-empty p { margin: 0 0 16px; }
.ab-dropdown { position: fixed; z-index: 9000; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 80px); overflow-y: auto; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); box-shadow: var(--ab-shadow-raised); background: var(--ab-surface); color: var(--ab-ink); font: 14px/1.5 Inter, system-ui, sans-serif; transform-origin: top right; }
.ab-dropdown-header, .ab-dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
.ab-dropdown-header { border-bottom: 1px solid var(--ab-line); }
.ab-dropdown-footer { border-top: 1px solid var(--ab-line); justify-content: center; }
.ab-dropdown a { color: var(--ab-sky-dark); text-decoration: none; }
.ab-dropdown [data-notification-list] { height: min(360px, 45dvh); overflow-y: auto; }
.ab-notification { display: block; position: relative; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--ab-line); padding: 14px 30px 14px 16px; color: inherit; font: inherit; cursor: pointer; }
.ab-notification:hover { background: var(--ab-hover); }
.ab-notification strong, .ab-notification span, .ab-notification time { display: block; overflow-wrap: anywhere; }
.ab-notification span, .ab-notification time { color: var(--ab-muted); font-size: 13px; }
.ab-notification time { font-size: 11px; margin-top: 6px; }
.ab-notification.is-unread::after, .ab-bell .dot { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ab-sky); top: 20px; right: 14px; }
.ab-bell { position: relative; }
.ab-bell .dot { background: #ef4444; top: 8px; right: 8px; }
.ab-layout .side { width: var(--ab-sidebar-width); background: var(--ab-surface); border-right: 1px solid var(--ab-line); display: flex; flex-direction: column; }
.ab-layout .brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--ab-line); }
.ab-layout .brand img { width: 30px; height: 30px; border-radius: 7px; }
.ab-layout .brand b { font-size: 18px; font-weight: 800; }
.ab-layout .brand b span { color: var(--ab-sky); }
.ab-layout .nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.ab-layout .nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 3px; border-radius: 10px; color: var(--ab-ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.ab-layout .nav a i { width: 20px; color: var(--ab-muted); text-align: center; }
.ab-layout .nav a.active { background: var(--ab-sky-light); color: var(--ab-sky-dark); }
.ab-layout .nav a:hover { background: var(--ab-hover); }
.ab-layout .nav .grp { padding: 16px 12px 8px; font-size: 11px; color: var(--ab-muted); }
.ab-layout .uchip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--ab-line); position: relative; cursor: pointer; background: var(--ab-surface); }
.ab-layout .av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ab-navy); color: white; font-size: 12px; font-weight: 700; }
.ab-layout .nm { font-weight: 600; font-size: 13px; }
.ab-layout .rl { font-size: 11px; color: var(--ab-muted); }
.ab-layout .uchip-menu { display: none; position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px; padding: 12px; background: var(--ab-surface); box-shadow: var(--ab-shadow-raised); border: 1px solid var(--ab-line); border-radius: 10px; color: var(--ab-ink); }
.ab-layout .uchip-menu a { color: var(--ab-danger); text-decoration: none; }
html, body { height: 100%; max-height: 100dvh; overflow: hidden !important; }
.ab-layout { height: 100dvh; max-height: 100dvh; width: 100%; max-width: 100vw; display: flex; overflow: hidden !important; }
.ab-layout .main { min-width: 0; flex: 1; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden !important; }
.ab-layout .mobile-menu-btn { height: 40px; width: 40px; flex-shrink: 0; }
.ab-page { height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden !important; min-width: 0; padding: 0; }
.ab-header { flex-shrink: 0; }
#content { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px; }
@media (min-width: 821px) {
  .ab-layout .main { margin-left: var(--ab-sidebar-width); }
  .ab-layout .side { position: fixed; inset: 0 auto 0 0; height: 100dvh; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
}
@media (max-width: 820px) {
  .ab-layout .side { position: fixed; inset: 0 auto 0 0; height: 100dvh; transform: translateX(-100%); z-index: 200; }
  .ab-layout .side.open { transform: translateX(0); }
  .ab-header { flex-wrap: wrap; gap: 12px; }
  .ab-header h1 { font-size: 22px; }
  .ab-actions { margin-left: auto; }
  .ab-layout .main { margin-left: 0; width: 100%; }
  #content { padding: 16px; }
  .ab-toast-stack { top: 8px; right: 8px; width: calc(100vw - 16px); }
}
@media (max-width: 480px) {
  .ab-modal { padding: 8px; }
  .ab-modal-card { max-height: calc(100dvh - 16px); }
  .ab-header .ab-actions { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The @view-transition opt-in is inline in each page's <head>: in a linked sheet it misses the first frame on cached loads (InvalidStateError). */
  .side { view-transition-name: sidebar; }
  .ab-header { view-transition-name: header; }
  ::view-transition-old(root) { animation: ab-page-out var(--ab-motion) var(--ab-ease) both; }
  ::view-transition-new(root) { animation: ab-page-in var(--ab-motion) var(--ab-ease) both; }
  ::view-transition-group(sidebar), ::view-transition-group(header) { animation: none; }
  ::view-transition-old(sidebar), ::view-transition-old(header) { animation: none; opacity: 1; }
  ::view-transition-new(sidebar), ::view-transition-new(header) { animation: none; mix-blend-mode: normal; }
  .ab-btn, .ab-back, .ab-card { transition: background var(--ab-fast), box-shadow var(--ab-motion), transform var(--ab-fast) var(--ab-ease); }
  .ab-btn:not(:disabled):active, .ab-back:active { transform: scale(.97); }
  a.ab-card:hover, button.ab-card:hover, .ab-card[tabindex]:hover { transform: translateY(-3px); box-shadow: var(--ab-shadow-raised); }
  .ab-modal { transition: opacity var(--ab-motion) var(--ab-ease); }
  .ab-modal-card { transform: translateY(-24px); transition: opacity var(--ab-motion), transform var(--ab-motion) var(--ab-ease); }
  .ab-modal.is-open .ab-modal-card { transform: translateY(0); }
  .ab-tab-indicator { transition: transform var(--ab-motion) var(--ab-ease), width var(--ab-motion) var(--ab-ease); }
  .ab-tab-panel.is-entering { animation: ab-page-in var(--ab-motion) var(--ab-ease); }
  .ab-toast { animation: ab-toast-in var(--ab-motion) var(--ab-ease); }
  .ab-toast.is-leaving { animation: ab-toast-out var(--ab-fast) ease-in forwards; }
  .ab-dropdown.is-open { animation: ab-dropdown-in var(--ab-fast) var(--ab-ease); }
  .ab-dropdown.is-leaving { animation: ab-dropdown-out var(--ab-fast) ease-in forwards; }
  .ab-skel { animation: ab-shimmer 1.5s linear infinite; }
  @keyframes ab-shimmer { to { background-position: -220% 0; } }
  @keyframes ab-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes ab-page-out { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes ab-toast-in { from { opacity: 0; transform: translateX(24px); } }
  @keyframes ab-toast-out { to { opacity: 0; transform: translateX(24px); } }
  @keyframes ab-dropdown-in { from { opacity: 0; transform: scale(.96); } }
  @keyframes ab-dropdown-out { to { opacity: 0; transform: scale(.96); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}