helixevo 0.2.39 → 0.2.40

package/dashboard/app/globals.css

@@ -1,556 +1,1225 @@
-/* ════════════════════════════════════════════════════════════════
-   HelixEvo Dashboard — Premium Warm Theme
-   Inspired by modern fintech/data platforms
-   ════════════════════════════════════════════════════════════════ */
-
 :root {
-  /* ─── Backgrounds (warm palette) ─── */
-  --bg: #f4f2ee;
-  --bg-card: #ffffff;
-  --bg-section: #eceae5;
-  --bg-hover: #e6e3dd;
-  --bg-input: #f4f2ee;
-  --bg-sidebar: #f9f8f5;
-
-  /* ─── Borders & Elevation ─── */
-  --border: #ddd9d1;
-  --border-focus: #c5c0b6;
-  --border-subtle: #e8e5de;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.03);
-  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
-  --shadow-xl: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
-
-  /* ─── Typography ─── */
-  --text: #1a1a17;
-  --text-secondary: #3d3d36;
-  --text-dim: #6b6b60;
-  --text-muted: #9c9c90;
-
-  /* ─── Accent Colors ─── */
-  --purple: #6d28d9;
-  --purple-light: #f3eefe;
-  --purple-border: #c4b5fd;
-  --green: #0d7c5f;
-  --green-light: #ecf7f3;
-  --green-border: #a7d8c8;
-  --red: #c0392b;
-  --red-light: #fdf0ee;
-  --red-border: #e8a89e;
-  --yellow: #b8860b;
-  --yellow-light: #fdf6e3;
-  --yellow-border: #e0cc8a;
-  --blue: #2563eb;
-  --blue-light: #eff6ff;
-  --blue-border: #bfdbfe;
-  --teal: #0d7c5f;
-  --teal-light: #e8f5f0;
-
-  /* ─── Radius & Type ─── */
-  --radius: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-}
-
-/* ─── Reset ─── */
-* { box-sizing: border-box; margin: 0; padding: 0; }
+  --bg: #f7f4ef;
+  --bg-elevated: rgba(255, 255, 255, 0.84);
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --bg-card-strong: #ffffff;
+  --bg-section: #efebe4;
+  --bg-section-strong: #e8e2d9;
+  --bg-hover: #ece6dd;
+  --bg-input: #f5f2ec;
+  --bg-sidebar: rgba(250, 248, 243, 0.88);
+  --bg-soft-purple: linear-gradient(140deg, rgba(130, 95, 255, 0.12), rgba(255, 255, 255, 0.72));
+  --bg-soft-green: linear-gradient(140deg, rgba(17, 132, 98, 0.12), rgba(255, 255, 255, 0.72));
+  --bg-soft-blue: linear-gradient(140deg, rgba(38, 97, 214, 0.12), rgba(255, 255, 255, 0.72));
+  --bg-soft-amber: linear-gradient(140deg, rgba(209, 141, 20, 0.14), rgba(255, 255, 255, 0.72));
+  --bg-soft-red: linear-gradient(140deg, rgba(203, 79, 64, 0.14), rgba(255, 255, 255, 0.72));
 
-body {
+  --border: rgba(130, 112, 91, 0.18);
+  --border-strong: rgba(100, 82, 63, 0.24);
+  --border-focus: rgba(62, 118, 175, 0.36);
+  --border-subtle: rgba(130, 112, 91, 0.1);
+
+  --shadow-sm: 0 1px 2px rgba(60, 42, 16, 0.04), 0 10px 16px rgba(73, 48, 18, 0.02);
+  --shadow-md: 0 6px 18px rgba(52, 34, 15, 0.07), 0 1px 1px rgba(52, 34, 15, 0.05);
+  --shadow-lg: 0 18px 38px rgba(52, 34, 15, 0.1), 0 4px 12px rgba(52, 34, 15, 0.05);
+  --shadow-xl: 0 30px 80px rgba(48, 30, 12, 0.16), 0 8px 24px rgba(48, 30, 12, 0.08);
+
+  --text: #171613;
+  --text-secondary: #3a3833;
+  --text-dim: #615d56;
+  --text-muted: #8c877f;
+
+  --purple: #6b49df;
+  --purple-strong: #5630c9;
+  --purple-light: #f2edff;
+  --purple-border: #cec2ff;
+  --green: #0f8363;
+  --green-strong: #0a6b50;
+  --green-light: #ebf7f2;
+  --green-border: #b6e1d3;
+  --red: #cb4f40;
+  --red-strong: #a63d31;
+  --red-light: #fcedea;
+  --red-border: #f1b9b2;
+  --yellow: #c18a17;
+  --yellow-strong: #9b6d12;
+  --yellow-light: #fff5dc;
+  --yellow-border: #efd695;
+  --blue: #2d66d8;
+  --blue-strong: #1f4fb0;
+  --blue-light: #edf4ff;
+  --blue-border: #bfd4ff;
+  --teal: #12796d;
+  --teal-light: #e6f7f4;
+
+  --radius-sm: 10px;
+  --radius: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+
+  --font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'SF Mono', monospace;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 100%;
   background: var(--bg);
+}
+
+body {
+  min-height: 100vh;
   color: var(--text);
   font-family: var(--font);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   font-size: 14px;
   line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  background:
+    radial-gradient(circle at top left, rgba(112, 92, 255, 0.08), transparent 28%),
+    radial-gradient(circle at right 16% top 12%, rgba(10, 131, 99, 0.08), transparent 22%),
+    radial-gradient(circle at left 20% bottom 12%, rgba(45, 102, 216, 0.06), transparent 24%),
+    linear-gradient(180deg, #faf7f2 0%, #f5f1eb 36%, #f4efe8 100%);
+}
+
+::selection {
+  background: rgba(18, 121, 109, 0.18);
+  color: var(--text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.18s ease, opacity 0.18s ease;
+}
+
+a:hover {
+  color: inherit;
 }
 
-::selection { background: var(--teal-light); color: var(--teal); }
-a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
-a:hover { color: #0a6149; text-decoration: none; }
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
+}
 
 code {
   font-family: var(--font-mono);
   font-size: 12px;
   padding: 2px 7px;
   background: var(--bg-section);
-  border-radius: 5px;
   color: var(--text-secondary);
-  font-feature-settings: normal;
+  border-radius: 6px;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: flex;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   SIDEBAR — Warm, light, refined
-   ════════════════════════════════════════════════════════════════ */
 .sidebar {
-  width: 220px;
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
-  padding: 0;
+  width: 284px;
   flex-shrink: 0;
   position: sticky;
   top: 0;
   height: 100vh;
   display: flex;
   flex-direction: column;
+  background: linear-gradient(180deg, rgba(252, 250, 246, 0.92) 0%, rgba(248, 244, 238, 0.88) 100%);
+  border-right: 1px solid var(--border);
+  backdrop-filter: blur(18px);
+  box-shadow: inset -1px 0 0 rgba(255,255,255,0.45);
   z-index: 20;
 }
 
 .sidebar-logo {
   display: flex;
-  align-items: center;
-  gap: 11px;
-  padding: 22px 18px 18px;
-  border-bottom: 1px solid var(--border);
+  gap: 14px;
+  align-items: flex-start;
+  padding: 24px 22px 18px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .logo-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #0d7c5f, #2563eb);
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
-  flex-shrink: 0;
-  box-shadow: 0 2px 10px rgba(13,124,95,0.25);
+  color: white;
+  background: linear-gradient(145deg, #1d8f7b 0%, #3256e4 52%, #7b55f8 100%);
+  box-shadow: 0 10px 24px rgba(63, 82, 181, 0.18);
+}
+
+.sidebar-brand {
+  min-width: 0;
+}
+
+.sidebar-title {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  line-height: 1.1;
+}
+
+.sidebar-subtitle {
+  margin-top: 3px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.sidebar-meta {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.sidebar-signal {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(15, 131, 99, 0.09);
+  color: var(--green-strong);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.sidebar-signal-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(15, 131, 99, 0.1);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 12px 24px;
+}
+
+.sidebar-group + .sidebar-group {
+  margin-top: 18px;
+}
+
+.sidebar-group-label {
+  padding: 0 12px 10px;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1.7px;
+  text-transform: uppercase;
+}
+
+.sidebar-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .nav-item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 9px 14px;
-  border-radius: 8px;
+  gap: 11px;
+  padding: 11px 12px;
+  border-radius: 14px;
   color: var(--text-dim);
   font-size: 13px;
-  font-weight: 500;
-  margin: 1px 6px;
-  text-decoration: none;
-  transition: all 0.15s ease;
+  font-weight: 600;
+  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
 }
+
 .nav-item:hover {
-  background: var(--bg-hover);
+  background: rgba(255,255,255,0.68);
   color: var(--text);
-  text-decoration: none;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
+  transform: translateX(1px);
+}
+
+.nav-item.active {
+  color: var(--text);
+  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(248, 245, 240, 0.92) 100%);
+  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,0.7);
+}
+
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 10px;
+  bottom: 10px;
+  width: 3px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--green) 0%, var(--blue) 55%, var(--purple) 100%);
+}
+
+.nav-icon {
+  width: 22px;
+  height: 22px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.54);
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.nav-item.active .nav-icon {
+  background: linear-gradient(145deg, rgba(18,121,109,0.1), rgba(107,73,223,0.12));
 }
 
 .sidebar-footer {
-  padding: 14px 18px;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
+  border-top: 1px solid var(--border-subtle);
+  padding: 18px 20px 20px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15));
+}
+
+.sidebar-footer-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.sidebar-footer-label {
+  font-size: 10px;
   color: var(--text-muted);
-  display: flex;
-  justify-content: space-between;
+  font-weight: 700;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+
+.sidebar-footer-value {
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.sidebar-footer-link {
+  display: inline-flex;
+  width: fit-content;
   align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .main-content {
   flex: 1;
-  padding: 36px 44px;
-  max-width: 1320px;
-  min-height: 100vh;
+  min-width: 0;
+  padding: 30px 32px 56px;
+}
+
+.main-content-inner {
+  width: min(1440px, 100%);
+  margin: 0 auto;
+}
+
+.page-hero-card,
+.page-header {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 24px;
+  padding: 28px 30px;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border);
+  background:
+    radial-gradient(circle at top right, rgba(107, 73, 223, 0.08), transparent 28%),
+    radial-gradient(circle at left center, rgba(18, 121, 109, 0.08), transparent 26%),
+    linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(252,249,244,0.88) 100%);
+  box-shadow: var(--shadow-md);
+}
+
+.page-hero-grid {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.page-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 14px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: rgba(18, 121, 109, 0.08);
+  color: var(--teal);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.page-title {
+  font-size: clamp(28px, 3vw, 42px);
+  line-height: 1.02;
+  letter-spacing: -1.4px;
+  font-weight: 850;
+}
+
+.page-desc {
+  margin-top: 10px;
+  max-width: 780px;
+  color: var(--text-dim);
+  font-size: 15px;
+  line-height: 1.72;
+}
+
+.page-hero-actions {
+  min-width: fit-content;
+}
+
+.hero-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.hero-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 11px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.hero-chip-neutral { background: rgba(87, 74, 60, 0.08); color: var(--text-secondary); border-color: rgba(87, 74, 60, 0.08); }
+.hero-chip-purple { background: var(--purple-light); color: var(--purple-strong); border-color: var(--purple-border); }
+.hero-chip-green { background: var(--green-light); color: var(--green-strong); border-color: var(--green-border); }
+.hero-chip-blue { background: var(--blue-light); color: var(--blue-strong); border-color: var(--blue-border); }
+.hero-chip-yellow { background: var(--yellow-light); color: var(--yellow-strong); border-color: var(--yellow-border); }
+.hero-chip-red { background: var(--red-light); color: var(--red-strong); border-color: var(--red-border); }
+
+.card {
+  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+}
+
+.card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-md);
+}
+
+.card-body {
+  padding: 22px;
+}
+
+.section-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(255,255,255,0.9));
+  box-shadow: var(--shadow-md);
+}
+
+.section-frame::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(circle at top right, rgba(255,255,255,0.52), transparent 24%);
+}
+
+.section-frame-neutral { background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(255,255,255,0.9)); }
+.section-frame-purple { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,246,255,0.92)); }
+.section-frame-green { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,252,248,0.92)); }
+.section-frame-blue { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,248,255,0.92)); }
+.section-frame-yellow { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,240,0.92)); }
+.section-frame-red { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,246,244,0.92)); }
+
+.section-frame-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
+  padding: 22px 24px 0;
+}
+
+.section-frame-body {
+  padding: 18px 24px 24px;
+}
+
+.section-frame-eyebrow,
+.card-header-label,
+.section-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+}
+
+.section-frame-title {
+  margin-top: 8px;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.55px;
+  line-height: 1.15;
+}
+
+.section-frame-description {
+  margin-top: 8px;
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.65;
+  max-width: 760px;
+}
+
+.section-frame-actions {
+  min-width: fit-content;
+}
+
+.metric-card-anchor {
+  display: block;
+}
+
+.metric-card {
+  height: 100%;
+  padding: 18px 18px 16px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.metric-card-link:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.metric-card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.metric-card-label {
+  color: var(--text-dim);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.metric-card-value {
+  margin-top: 8px;
+  font-size: 34px;
+  font-weight: 850;
+  line-height: 1;
+  letter-spacing: -1.4px;
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-card-sublabel {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.55;
+}
+
+.metric-card-icon {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: rgba(255,255,255,0.6);
+  border: 1px solid rgba(255,255,255,0.5);
+  font-size: 18px;
+}
+
+.metric-card-purple { background: var(--bg-soft-purple); }
+.metric-card-purple .metric-card-value, .metric-card-purple .metric-card-icon { color: var(--purple-strong); }
+.metric-card-green { background: var(--bg-soft-green); }
+.metric-card-green .metric-card-value, .metric-card-green .metric-card-icon { color: var(--green-strong); }
+.metric-card-blue { background: var(--bg-soft-blue); }
+.metric-card-blue .metric-card-value, .metric-card-blue .metric-card-icon { color: var(--blue-strong); }
+.metric-card-yellow { background: var(--bg-soft-amber); }
+.metric-card-yellow .metric-card-value, .metric-card-yellow .metric-card-icon { color: var(--yellow-strong); }
+.metric-card-red { background: var(--bg-soft-red); }
+.metric-card-red .metric-card-value, .metric-card-red .metric-card-icon { color: var(--red-strong); }
+.metric-card-neutral .metric-card-value, .metric-card-neutral .metric-card-icon { color: var(--text); }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.badge-purple { background: var(--purple-light); color: var(--purple-strong); border-color: var(--purple-border); }
+.badge-green { background: var(--green-light); color: var(--green-strong); border-color: var(--green-border); }
+.badge-red { background: var(--red-light); color: var(--red-strong); border-color: var(--red-border); }
+.badge-yellow { background: var(--yellow-light); color: var(--yellow-strong); border-color: var(--yellow-border); }
+.badge-blue { background: var(--blue-light); color: var(--blue-strong); border-color: var(--blue-border); }
+.badge-gray { background: rgba(97, 93, 86, 0.08); color: var(--text-dim); border-color: rgba(97, 93, 86, 0.08); }
+
+.score-track {
+  position: relative;
+  overflow: hidden;
+  height: 6px;
+  flex: 1;
+  background: rgba(97, 93, 86, 0.12);
+  border-radius: 999px;
+}
+
+.score-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.7);
+  border: 1px solid var(--border-subtle);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.tab-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 24px;
+  padding: 5px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.72);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.tab-item {
+  border: none;
+  background: transparent;
+  padding: 9px 16px;
+  border-radius: 999px;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.18s ease;
+}
+
+.tab-item:hover {
+  color: var(--text-secondary);
+  background: rgba(255,255,255,0.82);
+}
+
+.tab-item.active {
+  color: var(--text);
+  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,244,239,0.98));
+  box-shadow: var(--shadow-sm);
+}
+
+.stat-card {
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 22px;
+  box-shadow: var(--shadow-sm);
+}
+
+.stat-value {
+  font-size: 34px;
+  line-height: 1;
+  font-weight: 850;
+  letter-spacing: -1.4px;
+}
+
+.stat-label {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 24px;
+  text-align: center;
+}
+
+.empty-state-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(239,235,228,0.96));
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), var(--shadow-sm);
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+
+.empty-state-title {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.4px;
+}
+
+.empty-state-desc {
+  margin-top: 8px;
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.65;
+  max-width: 420px;
+}
+
+.console-panel {
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
+  box-shadow: var(--shadow-md);
+}
+
+.console-panel-green { border-color: var(--green-border); }
+.console-panel-red { border-color: var(--red-border); }
+.console-panel-yellow { border-color: var(--yellow-border); }
+.console-panel-blue { border-color: var(--blue-border); }
+.console-panel-purple { border-color: var(--purple-border); }
+
+.console-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  background: linear-gradient(180deg, rgba(250,248,244,0.96), rgba(242,238,231,0.92));
+  border-bottom: 1px solid var(--border);
+}
+
+.console-panel-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+.console-panel-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.console-panel-body {
+  max-height: 420px;
+  overflow: auto;
+  padding: 0;
+}
+
+.console-panel-body pre,
+.console-panel-body code,
+.console-panel-body {
+  font-family: var(--font-mono);
+}
+
+.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
+.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
+.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
+.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+
+.overview-grid {
+  display: grid;
+  gap: 22px;
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.action-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 156px;
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
+}
+
+.action-card::after {
+  content: '';
+  position: absolute;
+  inset: auto 18px 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, currentColor, transparent);
+  opacity: 0.18;
+}
+
+.action-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--border-strong);
+}
+
+.action-card:disabled {
+  cursor: not-allowed;
+}
+
+.action-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.action-card-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.72);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
+}
+
+.action-card-title {
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: -0.2px;
+}
+
+.action-card-subtitle {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.flow-diagram {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: auto;
+}
+
+.flow-step {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  background: rgba(255,255,255,0.72);
+  border: 1px solid rgba(130,112,91,0.12);
+}
+
+.flow-step-terminal {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
+}
+
+.flow-connector {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.signal-list {
+  display: grid;
+  gap: 10px;
+}
+
+.signal-row {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 14px 16px;
+  border-radius: var(--radius);
+  background: rgba(255,255,255,0.64);
+  border: 1px solid var(--border-subtle);
+}
+
+.signal-row-attention {
+  background: linear-gradient(180deg, rgba(255,245,220,0.86), rgba(255,251,241,0.82));
+  border-color: var(--yellow-border);
+}
+
+.signal-dot {
+  width: 10px;
+  height: 10px;
+  margin-top: 5px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--yellow);
+  box-shadow: 0 0 0 6px rgba(193, 138, 23, 0.08);
+}
+
+.signal-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.signal-text {
+  margin-top: 4px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.summary-list {
+  display: grid;
+  gap: 10px;
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: rgba(255,255,255,0.64);
+  border: 1px solid var(--border-subtle);
+}
+
+.summary-row-main {
+  min-width: 0;
+}
+
+.summary-row-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.summary-row-meta {
+  margin-top: 3px;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.skill-score-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.skill-score-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: rgba(255,255,255,0.66);
+  border: 1px solid var(--border-subtle);
+}
+
+.skill-score-main {
+  min-width: 0;
+}
+
+.skill-score-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.skill-score-name span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.skill-score-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 100px;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   PAGE HEADERS
-   ════════════════════════════════════════════════════════════════ */
-.page-header { margin-bottom: 28px; }
-.page-title {
-  font-size: 26px;
-  font-weight: 800;
-  letter-spacing: -0.6px;
-  color: var(--text);
-  line-height: 1.15;
-}
-.page-desc {
-  font-size: 14px;
-  color: var(--text-dim);
-  margin-top: 6px;
-  line-height: 1.5;
-  font-weight: 400;
+.chronicle-list {
+  position: relative;
+  display: grid;
+  gap: 18px;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   CARDS
-   ════════════════════════════════════════════════════════════════ */
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow 0.25s ease, border-color 0.25s ease;
+.chronicle-list::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 12px;
+  width: 2px;
+  background: linear-gradient(180deg, rgba(107, 73, 223, 0.28), rgba(18, 121, 109, 0.2));
 }
-.card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-focus);
+
+.chronicle-item {
+  position: relative;
+  padding-left: 42px;
 }
-.card-body { padding: 22px; }
 
-.card-header-label {
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 1.5px;
-  margin-bottom: 16px;
+.chronicle-marker {
+  position: absolute;
+  top: 14px;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--purple), var(--blue));
+  box-shadow: 0 0 0 5px rgba(107, 73, 223, 0.1);
 }
 
-/* ════════════════════════════════════════════════════════════════
-   BADGES
-   ════════════════════════════════════════════════════════════════ */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 5px;
-  white-space: nowrap;
-  letter-spacing: 0.2px;
-}
-.badge-purple { background: var(--purple-light); color: var(--purple); }
-.badge-green { background: var(--green-light); color: var(--green); }
-.badge-red { background: var(--red-light); color: var(--red); }
-.badge-yellow { background: var(--yellow-light); color: var(--yellow); }
-.badge-blue { background: var(--blue-light); color: var(--blue); }
-.badge-gray { background: var(--bg-section); color: var(--text-dim); }
-
-/* ════════════════════════════════════════════════════════════════
-   SCORE BARS
-   ════════════════════════════════════════════════════════════════ */
-.score-track {
-  height: 5px;
-  background: var(--bg-section);
-  border-radius: 3px;
+.chronicle-card {
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
+  box-shadow: var(--shadow-sm);
   overflow: hidden;
-  flex: 1;
 }
-.score-fill {
-  height: 100%;
-  border-radius: 3px;
-  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+
+.chronicle-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-/* ════════════════════════════════════════════════════════════════
-   STATS
-   ════════════════════════════════════════════════════════════════ */
-.stat-value {
-  font-size: 32px;
+.chronicle-title {
+  font-size: 16px;
   font-weight: 800;
-  line-height: 1;
-  letter-spacing: -1px;
-  font-variant-numeric: tabular-nums;
-}
-.stat-label {
-  font-size: 11px;
-  color: var(--text-dim);
-  margin-top: 6px;
-  font-weight: 500;
-  letter-spacing: 0.1px;
+  letter-spacing: -0.3px;
 }
 
-.section-label {
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 1.5px;
-  margin-bottom: 12px;
+.chronicle-meta {
+  margin-top: 5px;
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  color: var(--text-dim);
+  font-size: 11px;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   TAB BAR
-   ════════════════════════════════════════════════════════════════ */
-.tab-bar {
-  display: inline-flex;
-  background: var(--bg-section);
-  border-radius: 10px;
-  padding: 3px;
-  gap: 2px;
-  margin-bottom: 24px;
+.chronicle-body {
+  padding: 18px 20px 20px;
 }
-.tab-item {
-  padding: 7px 18px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-  background: none;
-  font-family: var(--font);
-  white-space: nowrap;
+
+.proposal-card {
+  background: rgba(255,255,255,0.78);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 10px;
 }
-.tab-item:hover {
-  color: var(--text-secondary);
-  background: rgba(255,255,255,0.6);
+
+.proposal-card:last-child {
+  margin-bottom: 0;
 }
-.tab-item.active {
-  background: var(--bg-card);
-  color: var(--text);
-  font-weight: 600;
+
+.proposal-card:hover {
+  border-color: var(--border-strong);
   box-shadow: var(--shadow-sm);
 }
 
-/* ════════════════════════════════════════════════════════════════
-   LAYER SECTIONS (Network page)
-   ════════════════════════════════════════════════════════════════ */
+.detail-panel {
+  width: 430px;
+  height: 100%;
+  overflow-y: auto;
+  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,245,239,0.95));
+  border-left: 1px solid var(--border);
+  box-shadow: -18px 0 42px rgba(53, 36, 15, 0.08);
+  padding: 28px;
+  animation: slideIn 0.24s ease;
+}
+
+@keyframes slideIn {
+  from { transform: translateX(18px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
 .layer-section {
+  position: relative;
+  overflow: hidden;
   border-radius: var(--radius-xl);
   padding: 22px;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
+  box-shadow: var(--shadow-md);
 }
+
 .layer-generalized {
-  background: linear-gradient(135deg, #faf5ff, #ede9fe);
+  background: linear-gradient(145deg, rgba(248,243,255,0.98), rgba(243,238,255,0.92));
   border: 1px solid var(--purple-border);
 }
 .layer-evolved {
-  background: linear-gradient(135deg, #ecf7f3, #d1f0e5);
+  background: linear-gradient(145deg, rgba(239,249,244,0.98), rgba(233,247,240,0.92));
   border: 1px solid var(--green-border);
 }
 .layer-original {
-  background: var(--bg-card);
+  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(251,248,243,0.92));
   border: 1px solid var(--border);
 }
 .layer-project {
-  background: linear-gradient(135deg, #fdf6e3, #faefc7);
+  background: linear-gradient(145deg, rgba(255,251,240,0.98), rgba(255,247,228,0.92));
   border: 1px solid var(--yellow-border);
 }
 
-/* ════════════════════════════════════════════════════════════════
-   SKILL CARDS
-   ════════════════════════════════════════════════════════════════ */
 .skill-card {
-  background: var(--bg-card);
+  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 14px 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
   box-shadow: var(--shadow-sm);
 }
+
 .skill-card:hover {
+  transform: translateY(-2px);
   box-shadow: var(--shadow-md);
-  border-color: var(--border-focus);
-  transform: translateY(-1px);
+  border-color: var(--border-strong);
 }
+
 .skill-card.selected {
   border-color: var(--teal);
-  box-shadow: 0 0 0 2px var(--teal-light), var(--shadow-md);
+  box-shadow: 0 0 0 3px rgba(18,121,109,0.12), var(--shadow-md);
 }
 
-/* ─── Flow Labels ─── */
 .flow-label {
   font-size: 10px;
-  font-weight: 500;
+  font-weight: 700;
   color: var(--text-dim);
-  background: var(--bg);
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.76);
+  padding: 4px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--border-subtle);
 }
+
 .flow-arrow {
   text-align: center;
-  padding: 10px 0;
+  padding: 12px 0 2px;
   font-size: 11px;
   color: var(--text-muted);
-  font-weight: 500;
-  letter-spacing: 0.5px;
-}
-
-/* ════════════════════════════════════════════════════════════════
-   TIMELINE
-   ════════════════════════════════════════════════════════════════ */
-.timeline-item {
-  position: relative;
-  padding-left: 24px;
-  padding-bottom: 18px;
-  border-left: 2px solid var(--border);
-  margin-left: 6px;
-}
-.timeline-item:last-child { border-left-color: transparent; }
-.timeline-dot {
-  position: absolute;
-  left: -7px;
-  top: 3px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid var(--bg);
-  box-shadow: 0 0 0 2px var(--border);
-}
-
-.detail-panel {
-  background: var(--bg-card);
-  border-left: 1px solid var(--border);
-  box-shadow: -4px 0 24px rgba(0,0,0,0.06);
-  width: 420px;
-  height: 100%;
-  overflow-y: auto;
-  padding: 28px;
-  animation: slideIn 0.25s ease;
-}
-
-@keyframes slideIn {
-  from { transform: translateX(24px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-/* ─── Empty State ─── */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 56px 24px;
-  text-align: center;
-}
-.empty-state-icon {
-  width: 52px;
-  height: 52px;
-  border-radius: 14px;
-  background: var(--bg-section);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16px;
-  color: var(--text-muted);
-}
-.empty-state-title {
-  font-size: 16px;
   font-weight: 700;
-  color: var(--text);
-  margin-bottom: 6px;
-}
-.empty-state-desc {
-  font-size: 13px;
-  color: var(--text-dim);
-  max-width: 360px;
-  line-height: 1.55;
-}
-
-/* ═══ Stat Cards ═══ */
-.stat-grid {
-  display: grid;
-  gap: 14px;
-  margin-bottom: 28px;
-}
-.stat-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 20px 22px;
-  box-shadow: var(--shadow-sm);
-  transition: all 0.25s ease;
-}
-.stat-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-focus);
-}
-
-/* ─── React Flow Overrides ─── */
-.react-flow__background { opacity: 0.3; }
-.react-flow__controls {
-  box-shadow: var(--shadow-md) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
-  overflow: hidden;
-}
-.react-flow__controls-button {
-  background: var(--bg-card) !important;
-  border-color: var(--border) !important;
-}
-.react-flow__controls-button:hover {
-  background: var(--bg-hover) !important;
+  letter-spacing: 0.1em;
 }
 
 .view-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
   gap: 16px;
+  margin-bottom: 20px;
 }
+
 .view-header-left {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
 }
+
 .view-header-stat {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  font-size: 12px;
+  gap: 8px;
+  padding: 6px 11px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.68);
+  border: 1px solid var(--border-subtle);
   color: var(--text-dim);
-  padding: 5px 12px;
-  background: var(--bg-section);
-  border-radius: 6px;
-  font-weight: 500;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-/* ═══ Proposal Card ═══ */
-.proposal-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+.react-flow__background { opacity: 0.26; }
+.react-flow__controls {
+  box-shadow: var(--shadow-lg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 16px !important;
   overflow: hidden;
-  margin-bottom: 10px;
-  transition: all 0.2s ease;
+  background: rgba(255,255,255,0.92) !important;
 }
-.proposal-card:hover {
-  box-shadow: var(--shadow-sm);
-  border-color: var(--border-focus);
+.react-flow__controls-button {
+  background: transparent !important;
+  border-color: var(--border) !important;
+  color: var(--text-secondary) !important;
 }
-
-.score-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 8px;
-  border-radius: 5px;
-  background: var(--bg-section);
+.react-flow__controls-button:hover {
+  background: rgba(255,255,255,0.92) !important;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   GRID UTILITIES
-   ════════════════════════════════════════════════════════════════ */
-.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
-.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
-.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
-.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
-
-/* ════════════════════════════════════════════════════════════════
-   GUIDE PAGE
-   ════════════════════════════════════════════════════════════════ */
 .guide-layout {
   display: flex;
   gap: 0;
-  margin: -36px -44px;
+  margin: -30px -32px;
   min-height: 100vh;
 }
 
 .guide-toc {
-  width: 220px;
+  width: 240px;
   flex-shrink: 0;
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
   border-right: 1px solid var(--border);
-  background: var(--bg-sidebar);
+  background: linear-gradient(180deg, rgba(250, 248, 243, 0.88), rgba(246, 242, 236, 0.82));
+  backdrop-filter: blur(18px);
   padding-bottom: 20px;
 }
 .guide-toc-header {
@@ -608,8 +1277,8 @@ code {
 
 .guide-content {
   flex: 1;
-  max-width: 860px;
-  padding: 0 56px 80px;
+  max-width: 920px;
+  padding: 0 56px 88px;
   margin: 0 auto;
 }
 
@@ -660,7 +1329,7 @@ code {
 }
 .guide-feature-card:hover {
   box-shadow: var(--shadow-md);
-  border-color: var(--border-focus);
+  border-color: var(--border-strong);
   transform: translateY(-2px);
 }
 .guide-feature-icon {
@@ -830,7 +1499,7 @@ code {
   border-radius: var(--radius);
   transition: border-color 0.15s;
 }
-.guide-direction:hover { border-color: var(--border-focus); }
+.guide-direction:hover { border-color: var(--border-strong); }
 .guide-direction-arrow {
   font-size: 22px;
   font-weight: 800;
@@ -1055,7 +1724,7 @@ code {
   transition: all 0.15s ease;
 }
 .guide-command-card:hover {
-  border-color: var(--border-focus);
+  border-color: var(--border-strong);
   box-shadow: var(--shadow-sm);
 }
 .guide-command-name {
@@ -1149,7 +1818,7 @@ code {
   transition: all 0.2s ease;
   overflow: hidden;
 }
-.guide-faq-item:hover { border-color: var(--border-focus); }
+.guide-faq-item:hover { border-color: var(--border-strong); }
 .guide-faq-item.open {
   border-color: var(--green-border);
   box-shadow: 0 0 0 1px var(--green-light);
@@ -1192,3 +1861,36 @@ code {
   text-align: center;
   padding: 24px 0;
 }
+
+@media (max-width: 1200px) {
+  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .guide-hero-features,
+  .guide-judges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 980px) {
+  .app-shell { display: block; }
+  .sidebar {
+    position: relative;
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .main-content { padding: 20px 16px 40px; }
+  .main-content-inner { width: 100%; }
+  .grid-2,
+  .grid-3,
+  .grid-4,
+  .grid-5,
+  .skill-score-grid,
+  .guide-hero-features,
+  .guide-judges-grid { grid-template-columns: 1fr; }
+  .page-hero-grid,
+  .section-frame-header,
+  .view-header { flex-direction: column; align-items: stretch; }
+  .detail-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }
+  .guide-layout { display: block; margin: -20px -16px; }
+  .guide-toc { position: relative; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  .guide-content { max-width: none; padding: 0 20px 64px; }
+}