/* ========== MD3 TOKENS ========== */

:root {

  --primary: #b4c6ff;

  --primary-container: #1a1d3a;

  --on-primary: #0a0a1a;

  --on-primary-container: #d6e4ff;

  --secondary: #4dd0e1;

  --secondary-container: #1a2a2e;

  --on-secondary: #002023;

  --on-secondary-container: #a0e5e5;

  --tertiary: #ffd29c;

  --tertiary-container: #2e2418;

  --on-tertiary: #1a1200;

  --on-tertiary-container: #ffe0b2;

  --error: #ffb4ab;

  --error-container: #3b0a0a;

  --on-error: #1a0000;

  --on-error-container: #ffdad6;

  --success: #a8d494;

  --success-container: #1a2e14;

  --on-success-container: #d3f0c5;

  --info: #a0cafd;

  --info-container: #1a2333;

  --on-info-container: #d6e4ff;

  --surface: #0f0e17;

  --surface-variant: #1c1b29;

  --surface-container: #171623;

  --surface-container-high: #1e1d2d;

  --surface-container-highest: #252434;

  --on-surface: #e6e1e5;

  --on-surface-variant: #c9c4ca;

  --outline: #4a4754;

  --outline-variant: #2e2c38;

  --scrim: rgba(0, 0, 0, 0.6);

  --radius-xs: 4px;

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 28px;

  --radius-full: 9999px;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3);

  --elev-2: 0 2px 8px rgba(0, 0, 0, 0.4);

  --elev-3: 0 4px 16px rgba(0, 0, 0, 0.5);

  --ease: cubic-bezier(0.2, 0, 0, 1);

  --dur-fast: 150ms;

  --dur-mid: 250ms;

  --dur-slow: 400ms;

  --sidebar-w: 320px;

  --topbar-h: 56px;

}

/* ========== RESET ========== */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

  font-size: 16px;

  -webkit-text-size-adjust: 100%;

}

body {

  font-family:

    "Roboto",

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;

  background: var(--surface);

  color: var(--on-surface);

  min-height: 100vh;

  overflow-x: hidden;

  line-height: 1.5;

  -webkit-tap-highlight-color: transparent;

}

a {

  color: var(--primary);

  text-decoration: none;

}

button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  background: none;

  color: inherit;

  font-size: 1rem;

}

input,

select,

textarea {

  font-family: inherit;

  font-size: 1rem;

  color: var(--on-surface);

  background: transparent;

  border: 1px solid var(--outline);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  width: 100%;

  outline: none;

  transition: border-color var(--dur-fast) var(--ease);

}

input:focus,

select:focus,

textarea:focus {

  border-color: var(--primary);

}

textarea {

  min-height: 100px;

  resize: vertical;

}

img {

  max-width: 100%;

  display: block;

}

.mono {

  font-family: "Roboto Mono", monospace;

}

.muted {

  color: var(--on-surface-variant);

  font-size: 0.82rem;

}

.mt-2 {

  margin-top: 8px;

}

.mt-3 {

  margin-top: 12px;

}

.mt-4 {

  margin-top: 16px;

}

.mb-2 {

  margin-bottom: 8px;

}

.mb-3 {

  margin-bottom: 12px;

}

.mb-4 {

  margin-bottom: 16px;

}

/* ========== LAYOUT ========== */

/* 背景由布局容器统一承载，确保内容超过一屏时侧边栏色块始终填满整列，

   避免 sticky 侧栏在滚动后下方露出 body 底色（"色块只覆盖一部分"）。 */

.app-layout {

  display: flex;

  min-height: 100vh;

  background: linear-gradient(

    180deg,

    var(--surface-container) 0%,

    var(--surface-variant) 100%

  );

}

/* ========== SIDEBAR ========== */

.sidebar {

  width: var(--sidebar-w);

  flex-shrink: 0;

  background: linear-gradient(

    180deg,

    var(--surface-container) 0%,

    var(--surface-variant) 100%

  );

  border-right: 1px solid var(--outline-variant);

  display: flex;

  flex-direction: column;

  position: sticky;

  top: 0;

  align-self: stretch;

  min-height: 100vh;

  z-index: 100;

}

.brand-area {

  padding: 20px 24px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-bottom: 1px solid var(--outline-variant);

}

.brand-icon {

  width: 42px;

  height: 42px;

  border-radius: var(--radius-md);

  background: linear-gradient(135deg, #6366f1 0%, #4facfe 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  color: #fff;

  flex-shrink: 0;

  cursor: pointer;

  animation: pulse-glow 3s ease-in-out infinite;

}

@keyframes pulse-glow {

  0%,

  100% {

    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);

  }

  50% {

    box-shadow: 0 0 24px rgba(79, 172, 254, 0.6);

  }

}

.brand-text {

  display: flex;

  flex-direction: column;

  min-width: 0;

}

.brand-title {

  font-size: 1rem;

  font-weight: 500;

  color: var(--on-surface);

  white-space: nowrap;

}

.brand-sub {

  font-size: 0.75rem;

  color: var(--on-surface-variant);

  white-space: nowrap;

}

.nav-section {

  padding: 8px 12px;

  flex-shrink: 0;

}

.nav-section-title {

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--on-surface-variant);

  padding: 12px 12px 6px;

  font-weight: 500;

}

.nav-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px 14px;

  border-radius: var(--radius-sm);

  font-size: 0.92rem;

  color: var(--on-surface-variant);

  cursor: pointer;

  transition: all var(--dur-fast) var(--ease);

  margin-bottom: 2px;

  user-select: none;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.nav-item:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--on-surface);

}

.nav-item.active {

  background: var(--primary-container);

  color: var(--on-primary-container);

  font-weight: 500;

}

.nav-item .nav-icon {

  font-size: 1.25rem;

  width: 24px;

  text-align: center;

  flex-shrink: 0;

}

.nav-badge {

  margin-left: auto;

  background: var(--error-container);

  color: var(--error);

  font-size: 0.7rem;

  padding: 1px 8px;

  border-radius: var(--radius-full);

  font-weight: 500;

}

.sidebar-spacer {

  flex: 1;

  min-height: 20px;

}

.sidebar-footer {

  padding: 12px;

  border-top: 1px solid var(--outline-variant);

  flex-shrink: 0;

}

.icon-btn {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: var(--radius-sm);

  color: var(--on-surface-variant);

  font-size: 0.85rem;

  width: 100%;

  transition: all var(--dur-fast) var(--ease);

  justify-content: flex-start;

}

.icon-btn:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--on-surface);

}

.icon-btn .mdi {

  font-size: 1.2rem;

}

.sidebar-credit {

  font-size: 0.7rem;

  color: var(--on-surface-variant);

  text-align: center;

  margin-top: 8px;

  line-height: 1.6;

  opacity: 0.7;

}