.ab-layout-scope {
  /* Design tokens mirror andybot v1.88h1 main.css (v1.82-e token system, blue accent). */
  --ab-bg:#0f1626;          /* bg-primary */
  --ab-surface:#16213e;     /* bg-secondary */
  --ab-surface-2:#1a2744;   /* bg-tertiary (active / surface2) */
  --ab-bg-hover:#2a3a5f;    /* bg-hover */
  --ab-accent:#4f8cff;      /* accent */
  --ab-accent-hover:#3a78f0;
  --ab-accent-muted:#2a4a8a;
  --ab-on-accent:#ffffff;
  --ab-text:#e8edf5;        /* text-primary */
  --ab-text-secondary:#a0aec0;
  --ab-dim:#7f8ba3;        /* text-muted */
  --ab-border:#2d3a5c;      /* border-primary */
  --ab-border-focus:#4fa8ff;
  --ab-success:#00d084; --ab-warning:#f59e0b; --ab-error:#ee5a6f;
  --ab-radius-sm:4px; --ab-radius-md:8px; --ab-radius-lg:12px;
  display:flex; height:100vh; width:100%; overflow:hidden; color:var(--ab-text); background:var(--ab-bg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px;
}
.ab-layout-scope[data-theme="light"] { --ab-bg:#ffffff; --ab-surface:#f7f8fa; --ab-surface-2:#eef0f4; --ab-bg-hover:#f0f2f5; --ab-accent:#2563eb; --ab-accent-hover:#1d4ed8; --ab-on-accent:#ffffff; --ab-text:#1a202c; --ab-dim:#667085; --ab-border:#e2e8f0; --ab-success:#047857; --ab-warning:#b45309; --ab-error:#c53030; }
/* v1 兼容别名：dark-cyber → dark（默认），standard-modern → light */
.ab-layout-scope[data-theme="standard-modern"] { --ab-bg:#ffffff; --ab-surface:#f7f8fa; --ab-surface-2:#eef0f4; --ab-bg-hover:#f0f2f5; --ab-accent:#2563eb; --ab-accent-hover:#1d4ed8; --ab-on-accent:#ffffff; --ab-text:#1a202c; --ab-dim:#667085; --ab-border:#e2e8f0; --ab-success:#047857; --ab-warning:#b45309; --ab-error:#c53030; }
.ab-layout-scope *, .ab-layout-scope *::before, .ab-layout-scope *::after { box-sizing:border-box; }
.ab-layout-scope button { font:inherit; }
.ab-layout-rail { display:flex; flex:0 0 56px; min-width:56px; flex-direction:column; align-items:center; padding-top:12px; border-right:1px solid var(--ab-border); background:var(--ab-bg); }
.ab-layout-rail-logo { display:grid; place-items:center; width:36px; height:36px; margin-bottom:20px; border-radius:8px; color:var(--ab-on-accent); background:var(--ab-accent); font-size:18px; font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.ab-layout-rail-groups { display:flex; flex-direction:column; align-items:center; width:100%; }
.ab-layout-nav-group { display:flex; flex-direction:column; align-items:center; width:100%; }
.ab-layout-nav-divider { width:28px; height:1px; margin:10px 0; background:var(--ab-border); }
.ab-layout-nav-item { position:relative; display:flex; flex-direction:column; align-items:center; margin-bottom:8px; }
.ab-layout-nav-button { position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:8px; color:var(--ab-dim); background:transparent; cursor:pointer; font-size:18px; transition:all .15s; }
.ab-layout-nav-icon-svg { width:20px; height:20px; display:block; flex:0 0 auto; }
.ab-layout-nav-button:hover .ab-layout-nav-icon-svg { transform:translateY(-1px); }
.ab-layout-nav-button[aria-selected="true"] .ab-layout-nav-icon-svg { filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ab-accent) 35%, transparent)); }
.ab-layout-nav-button:hover { color:var(--ab-text); background:var(--ab-bg-hover); }
.ab-layout-nav-button[aria-selected="true"] { color:var(--ab-accent); background:var(--ab-surface-2); }
.ab-layout-nav-button[aria-selected="true"]::before { content:''; position:absolute; left:-8px; top:50%; width:3px; height:20px; border-radius:0 2px 2px 0; background:var(--ab-accent); transform:translateY(-50%); }
.ab-layout-nav-button:disabled { cursor:not-allowed; opacity:.4; }
.ab-layout-nav-label { margin-top:2px; color:var(--ab-dim); font-size:9px; text-align:center; }
.ab-layout-nav-badge { position:absolute; top:-2px; right:-2px; min-width:14px; padding:2px 5px; border-radius:9px; color:#fff; background:var(--ab-error); font-size:10px; font-weight:700; line-height:1; text-align:center; }
.ab-layout-rail-spacer { flex:1; }
.ab-layout-theme-item { margin-bottom:0; }
.ab-layout-rail-toggle { display:none; position:fixed; top:10px; left:10px; z-index:30; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--ab-border); border-radius:8px; color:var(--ab-text); background:var(--ab-surface); cursor:pointer; font-size:16px; }
.ab-layout-rail-backdrop { display:none; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); }
.ab-layout-view { display:flex; flex:1; min-width:0; min-height:0; }
.ab-layout-sidebar { display:none; flex:0 0 260px; min-width:260px; flex-direction:column; border-right:1px solid var(--ab-border); background:var(--ab-surface); }
.ab-layout-scope[data-mode="three-column"] .ab-layout-sidebar { display:flex; }
.ab-layout-sidebar-content { display:flex; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.ab-layout-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; background:var(--ab-bg); }
/* topbar mirrors live .topbar (padding space-md/space-lg, bg-secondary) */
.ab-layout-topbar { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-bottom:1px solid var(--ab-border); background:var(--ab-surface); }
.ab-layout-topbar-title { min-width:0; overflow:hidden; color:var(--ab-text-secondary); font-family:monospace; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
/* status mirrors live .status-badge (pill, bg-tertiary, radius 20px) */
.ab-layout-status { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; color:var(--ab-text-secondary); font-size:12px; font-weight:500; background:var(--ab-surface-2); white-space:nowrap; }
.ab-layout-status-dot { width:8px; height:8px; border-radius:50%; background:var(--ab-text-secondary); }
.ab-layout-status-dot.online { background:var(--ab-success); box-shadow:0 0 7px var(--ab-success); }
.ab-layout-status-dot.warning { background:var(--ab-warning); box-shadow:0 0 7px var(--ab-warning); animation:ab-pulse 1s infinite; }
.ab-layout-status-dot.offline { background:var(--ab-error); box-shadow:0 0 7px var(--ab-error); }
@keyframes ab-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.ab-layout-content { display:flex; flex:1; min-height:0; flex-direction:column; gap:16px; overflow-y:auto; padding:24px; }
.ab-layout-footer { flex:0 0 auto; padding:16px 24px; border-top:1px solid var(--ab-border); background:var(--ab-surface); }
@media (max-width:760px) {
  .ab-layout-rail-toggle { display:flex; }
  .ab-layout-rail { position:fixed; top:0; bottom:0; left:0; z-index:50; padding-top:56px; transform:translateX(-100%); transition:transform .2s ease; }
  .ab-layout-scope.rail-open .ab-layout-rail { transform:translateX(0); }
  .ab-layout-scope.rail-open .ab-layout-rail-backdrop { display:block; }
  .ab-layout-nav-label { display:none; }
  .ab-layout-sidebar { flex-basis:220px; min-width:220px; }
}
