/* ============================================================
   2027 Fall 申研进度管理网站 — 样式表
   第二阶段增强版
   ============================================================ */

/* ---- CSS 变量（设计系统 v3 — Warm Editorial） ---- */
:root {
  /* Layer: cream canvas */
  --color-canvas: #F3F2EC;
  --color-surface: #FCFBF7;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #E9E8E0;

  /* Accent: soft lime */
  --color-accent: #A7B85C;
  --color-accent-hover: #8F9F49;
  --color-accent-soft: #E2E8C5;
  --color-accent-pale: #F0F2E3;

  /* Highlight: warm yellow */
  --color-highlight: #EED56D;
  --color-highlight-soft: #F7EDBF;

  /* Text: graphite */
  --color-text-primary: #171714;
  --color-text-secondary: #66655F;
  --color-text-tertiary: #929087;

  /* Border: warm */
  --color-border: #DAD8D0;
  --color-border-strong: #BBB8AE;

  /* Semantic */
  --color-success: #5C7C61;
  --color-success-soft: #E1EBE3;
  --color-warning: #A98235;
  --color-warning-soft: #FBF2E3;
  --color-danger: #A34F47;
  --color-danger-soft: #F9EBEA;

  /* Animation tokens */
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy compat */
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-primary-light: var(--color-accent-soft);
  --color-bg: var(--color-canvas);
  --color-text: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-muted: var(--color-text-tertiary);
  --color-info: #3B82F6;
  --color-info-light: #EFF6FF;
  --color-success-light: var(--color-success-soft);
  --color-warning-light: var(--color-warning-soft);
  --color-danger-light: var(--color-danger-soft);

  /* Shadows — warm undertone */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.07);
  --shadow-card: var(--shadow-xs);

  /* Radii */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

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

  /* Typography */
  --font-size-caption: 0.72rem;
  --font-size-small:  0.85rem;
  --font-size-body:   0.95rem;
  --font-size-section: 1.1rem;
  --font-size-title:  1.4rem;
  --font-size-display: clamp(3.25rem, 7vw, 5.75rem);
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* Transitions */
  --transition-fast: var(--motion-fast);
  --transition-base: var(--motion-base);
  --transition-normal: var(--motion-base);

  --container-max: 1120px;
}

/* ---- 基础重置 ---- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.header { padding-top: env(safe-area-inset-top); }
.toast-container { padding-top: env(safe-area-inset-top); }
.container {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: 0 var(--space-lg);
}

/* ============================================================
   开屏 / 登录页
   ============================================================ */
.splash-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-canvas);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  transition: opacity .5s ease, visibility .5s ease;
  overflow: hidden; /* contain floating bricks */
}

/* --- Floating brick background --- */
.splash-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.splash-float-brick {
  position: absolute;
  left: var(--sf-x, 50%); top: var(--sf-y, 50%);
  width: 48px; height: 18px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.08);
  transform: rotate(var(--sf-r, 0deg)) scale(var(--sf-s, 0.8));
  animation: splashBrickFloat var(--sf-d, 8s) ease-in-out infinite;
}
@keyframes splashBrickFloat {
  0%, 100% { transform: rotate(var(--sf-r)) scale(var(--sf-s)) translateY(0); }
  33%      { transform: rotate(var(--sf-r)) scale(var(--sf-s)) translateY(-18px); }
  66%      { transform: rotate(var(--sf-r)) scale(var(--sf-s)) translateY(8px); }
}
/* Brick body + 3D via pseudo-elements */
.splash-float-brick::after {
  content: ''; position: absolute; top: 1px; left: 3px; right: 3px;
  height: 1.5px; background: rgba(255,255,255,.4); border-radius: 1px;
}
/* Brick studs */
.splash-float-brick::before {
  content: '';
  position: absolute; top: -5px; left: 3px; right: 3px; height: 5px;
  background:
    radial-gradient(circle at 6px 2.5px,  currentColor 2.5px, transparent 2.5px),
    radial-gradient(circle at 16px 2.5px, currentColor 2.5px, transparent 2.5px),
    radial-gradient(circle at 26px 2.5px, currentColor 2.5px, transparent 2.5px),
    radial-gradient(circle at 36px 2.5px, currentColor 2.5px, transparent 2.5px);
  background-size: 40px 5px; background-repeat: no-repeat;
}

/* Brick colors — vibrant palette */
.splash-float-brick:nth-child(1)  { color: #F06068; opacity: .25; }
.splash-float-brick:nth-child(2)  { color: #3098D8; opacity: .22; }
.splash-float-brick:nth-child(3)  { color: #38A850; opacity: .25; }
.splash-float-brick:nth-child(4)  { color: #F08830; opacity: .22; }
.splash-float-brick:nth-child(5)  { color: #8858C8; opacity: .22; }
.splash-float-brick:nth-child(6)  { color: #F5B840; opacity: .26; }
.splash-float-brick:nth-child(7)  { color: #F06068; opacity: .18; }

/* Alternate animation delays */
.splash-float-brick:nth-child(odd)  { animation-delay: -3s; }
.splash-float-brick:nth-child(even) { animation-delay: -5s; }

/* --- Language pills — tiny, top-right corner --- */
.splash-lang-corner {
  position: absolute; top: 14px; right: 16px;
  display: flex; align-items: center; gap: 6px; z-index: 2;
}
.splash-lang-pill {
  padding: 4px 10px; font-size: 0.66rem; font-weight: 520;
  font-family: var(--font-family); cursor: pointer;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-tertiary); border-radius: var(--radius-sm);
  transition: all .15s;
}
.splash-lang-pill:hover {
  border-color: var(--color-accent); color: var(--color-accent);
}
.splash-lang-pill--active {
  background: var(--color-accent); color: #FFF; border-color: var(--color-accent);
}

/* --- Bricky tooltip speech bubble --- */
.bricky-tooltip {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  background: var(--color-text-primary); color: #FFF;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 0.62rem; font-weight: 550; white-space: nowrap;
  pointer-events: none; opacity: 1;
  animation: tooltipFloat 2.4s ease-in-out infinite;
  box-shadow: var(--shadow-sm);
}
.bricky-tooltip::after {
  content: '';
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-primary);
}
@keyframes tooltipFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

.splash-overlay--hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}

.splash-card {
  position: relative; /* for the language toggle button */
  max-width: 520px; width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: 44px 32px 32px;
  text-align: center;
  box-shadow:
    0 6px 0 var(--color-border-strong),
    0 8px 24px rgba(0,0,0,.08);
  animation: splashRise .6s var(--ease-emphasized) both;
}
@keyframes splashRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Header row: Bricky icon + title, centered, no avatar --- */
.splash-header-row {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.splash-header-center {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.splash-header-text { text-align: center; }

.splash-icon { flex-shrink: 0; width: 56px; }
.splash-icon svg { filter: drop-shadow(0 3px 4px rgba(0,0,0,.08)); }

.splash-title {
  font-size: 1.15rem; font-weight: 650;
  color: var(--color-text-primary);
  margin-bottom: 2px; line-height: 1.2;
}
.splash-sub {
  font-size: 0.74rem; color: var(--color-text-secondary);
  line-height: 1.4; margin: 0;
}

/* --- Two-column grid row --- */
.splash-row-two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Field --- */
.splash-field { margin-bottom: 14px; text-align: left; }
.splash-label {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-secondary); margin-bottom: 4px;
}
.splash-input {
  width: 100%; padding: 10px 12px;
  font-size: 0.85rem; font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.splash-input::placeholder { color: var(--color-text-tertiary); }
.splash-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(167,184,92,.12);
}

.splash-error {
  font-size: 0.68rem; color: var(--color-danger);
  text-align: left; margin-top: 2px; min-height: 0;
  opacity: 0; transition: opacity .2s;
}
.splash-error--visible { opacity: 1; }

/* --- Auth fields always visible --- */
#splash-auth-fields { display: block !important; }

.splash-auth-hint-sub {
  text-align: center; font-size: 0.64rem;
  color: var(--color-text-tertiary);
  margin-top: -2px; margin-bottom: 18px;
}

/* --- Select + btn --- */
.splash-select {
  width: 100%; padding: 10px 28px 10px 12px;
  font-size: 0.85rem; font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23929087'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.splash-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(167,184,92,.12);
}

.splash-btn {
  width: 100%; padding: 11px; font-size: 0.88rem;
  justify-content: center; position: relative; overflow: visible;
  transition: transform .15s var(--ease-emphasized);
}
.splash-btn:hover::after {
  content: '\01f528';
  position: absolute; top: -20px; right: -6px;
  font-size: 1.2rem;
  animation: hammerSwing .4s ease-out;
}
@keyframes hammerSwing {
  0%   { transform: rotate(-30deg); }
  60%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.splash-btn:hover { transform: scale(1.04); }
.splash-btn:active { transform: scale(.93) rotate(-3deg); }

.splash-footer-text {
  font-size: 0.64rem; color: var(--color-text-tertiary);
  margin-top: 16px; line-height: 1.5;
}

/* Empty state enhancement */
.empty-state--onboard { min-height: 320px; }
.empty-state--onboard .empty-state-icon { font-size: 4rem; margin-bottom: var(--space-md); }
.empty-state--onboard .empty-state-desc { max-width: 320px; }

/* Contextual hint */
.ctx-hint { position: relative; display: inline-block; background: var(--color-accent-pale); color: var(--color-text-primary); font-size: 0.68rem; padding: 6px 12px; border-radius: var(--radius-sm); margin: 4px 0; line-height: 1.4; animation: ctxFadeIn .3s ease both; cursor: pointer; border: 1px solid var(--color-accent-soft); }
.ctx-hint::after { content: ' ×'; font-size: 0.8rem; opacity: .5; margin-left: 4px; }
@keyframes ctxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* ---- Icon system ---- */.icon {
  width: 16px; height: 16px; flex-shrink: 0;
  vertical-align: middle; color: inherit;
}
.icon--sm { width: 14px; height: 14px; }
.icon--md { width: 18px; height: 18px; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 28px; height: 28px; }
.icon--logo { color: var(--color-accent); }
.icon--danger { color: var(--color-danger); }

/* ---- 顶部导航栏 ---- */
.header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.header-brand {
  display: flex; align-items: center; gap: var(--space-md);
  min-width: 0;
}
.header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  background: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
}
.header-avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.header-avatar-initials {
  color: var(--color-surface);
  font-weight: 650; font-size: 0.85rem;
  line-height: 1; user-select: none;
}
.header-title {
  font-size: 1rem; font-weight: 650;
  color: var(--color-text-primary); white-space: nowrap;
}
.header-edit-btn {
  font-size: 0.78rem; color: var(--color-text-tertiary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 3px 10px; transition: all var(--transition-fast);
  display: inline-flex; align-items: center; gap: 4px;
}
.header-edit-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }

@media (max-width: 768px) { .header-edit-btn span, .header-edit-btn { font-size: 0; gap: 0; } .header-edit-btn svg { margin: 0; } }
@media (max-width: 480px) { .header-edit-btn { padding: 3px 6px; } }
.header-actions { display: flex; align-items: center; gap: var(--space-xs); }
.lang-toggle {
  font-size: 0.72rem; font-weight: 520; padding: 4px 14px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 6px;
  background: var(--color-surface); color: var(--color-text-secondary);
  cursor: pointer; transition: all var(--transition-base);
  line-height: 1.5; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 1px rgba(167,184,92,.15); }
.lang-toggle:active { transform: scale(0.97); }

/* ---- 主内容区域 ---- */
.main { flex: 1; padding: var(--space-xl) 0 var(--space-2xl); }

/* ============================================================
   欢迎区域
   ============================================================ */
.welcome { margin-bottom: var(--space-xl); }
.welcome-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, #7C3AED 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: flex; align-items: center; justify-content: space-between;
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
  animation: welcomeFadeIn 350ms ease both;
}
@keyframes welcomeFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.welcome-left { display: flex; align-items: center; gap: var(--space-lg); flex: 1; min-width: 0; }
.welcome-avatar-wrapper { flex-shrink: 0; position: relative; }
.welcome-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255,255,255,0.4);
  background-color: rgba(255,255,255,0.15);
}
.welcome-avatar-placeholder {
  width: 64px; height: 64px; border-radius: 50%;
  background-color: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: rgba(255,255,255,0.7);
}
.welcome-text { min-width: 0; }
.welcome-greeting { font-size: 0.85rem; opacity: 0.85; margin-bottom: 2px; }
.welcome-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 2px; word-break: break-word; }
.welcome-subtitle { font-size: 0.9rem; opacity: 0.85; line-height: 1.5; word-break: break-word; }
.welcome-date { font-size: 0.8rem; opacity: 0.65; margin-top: 4px; }
.welcome-right { flex-shrink: 0; }
.welcome-right .btn-ghost {
  color: #FFFFFF; border-color: rgba(255,255,255,0.4);
  background-color: rgba(255,255,255,0.1);
}
.welcome-right .btn-ghost:hover {
  background-color: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
}

/* ============================================================
   统计卡片
   ============================================================ */
.stats-section { margin-bottom: var(--space-xl); }
.stats-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md); margin-bottom: var(--space-md);
}
.stats-row--secondary { grid-template-columns: 1fr 1fr; }

.stat-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md); padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex; align-items: flex-start; gap: var(--space-md);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.stat-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.stat-card--clickable { cursor: pointer; }
.stat-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.stat-content { flex: 1; min-width: 0; }
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 2px; }
.stat-sub { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 2px; }

.stat-card--deadline .stat-value { font-size: 1.3rem; font-weight: 600; }
.stat-card--deadline .stat-sub { font-weight: 500; }
.stat-card--deadline[data-clickable-deadline] { cursor: pointer; }

/* 进度条 — LEGO brick train */
.progress-bar {
  width: 100%; height: 12px; background: transparent;
  border-radius: 0; margin-top: var(--space-sm); overflow: visible;
  display: flex; gap: 3px;
}
.progress-bar__fill {
  height: 12px; min-width: 12px;
  background:
    linear-gradient(180deg, var(--color-accent) 0%, #7A8E3F 50%, #5C6E28 100%);
  border-radius: 2px;
  box-shadow:
    0 3px 0 #5C6E28,
    0 4px 6px rgba(0,0,0,.06);
  transition: width 400ms ease;
  position: relative;
  flex-shrink: 0;
}
/* Tiny stud on each brick segment */
.progress-bar__fill::after {
  content: '';
  position: absolute; top: -5px; left: 3px; right: 3px;
  height: 5px;
  background:
    radial-gradient(circle at 4px 2.5px, var(--color-accent) 2.5px, transparent 2.5px),
    radial-gradient(circle at 12px 2.5px, var(--color-accent) 2.5px, transparent 2.5px);
  opacity: .8;
}

/* ============================================================
   工具栏
   ============================================================ */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md); min-height: 40px;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: var(--space-sm); }

/* ============================================================
   项目列表表格
   ============================================================ */
.project-list-section {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 5px solid var(--color-border);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.02),
    var(--shadow-card);
  overflow: hidden;
  animation: listFadeIn 350ms ease both;
  animation-delay: 100ms;
}
@keyframes listFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.table-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Subtle baseplate dot texture */
  background-image:
    radial-gradient(circle, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.project-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.project-table thead { background-color: #F8FAFC; border-bottom: 2px solid var(--color-border-strong); }
.project-table th {
  padding: var(--space-md); text-align: left; font-weight: 600;
  font-size: 0.8rem; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
/* Baseplate-style groove between rows */
.project-table tbody tr {
  border-bottom: 1.5px solid var(--color-border-strong);
  box-shadow: 0 1.5px 0 var(--color-border);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}
.project-table tbody tr:last-child { border-bottom: none; box-shadow: none; }
.project-table tbody tr:hover { background-color: #F8FAFC; }

/* 项目行点击可查看详情的视觉提示 */
.project-table tbody tr { position: relative; }
.project-table tbody tr::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background-color: var(--color-primary);
  opacity: 0; transition: opacity var(--transition-fast);
}
.project-table tbody tr:hover::after { opacity: 1; }

.project-table td { padding: var(--space-md); vertical-align: middle; }

/* 新增/编辑后的高亮动画 */
.project-table tbody tr.row-highlight {
  animation: rowHighlight 1.5s ease;
}
@keyframes rowHighlight {
  0%   { background-color: var(--color-primary-light); }
  100% { background-color: transparent; }
}

/* 删除时的淡出动画 */
.project-table tbody tr.row-removing {
  animation: rowFadeOut 200ms ease forwards;
  pointer-events: none;
}
@keyframes rowFadeOut {
  to { opacity: 0; transform: translateX(24px); }
}

/* 链接 */
.project-link { color: var(--color-primary); text-decoration: none; font-weight: 500; transition: color var(--transition-fast); }
.project-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.project-link--empty { color: var(--color-text); }
.project-school { font-weight: 600; color: var(--color-text); }

/* 外部链接图标 */
.project-link::after {
  content: ' ↗';
  font-size: 0.75rem; opacity: 0.6;
}

.example-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-sm);
  background-color: var(--color-warning-light); color: #B45309;
  margin-left: var(--space-xs); vertical-align: middle;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.country-tag { font-size: 0.8rem; color: var(--color-text-secondary); }
.deadline-text { font-family: var(--font-mono); font-size: 0.85rem; }

/* ============================================================
   状态标签
   ============================================================ */
.status-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 520;
  padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  transform: translateY(0);
  transition: box-shadow .12s ease, transform .12s ease;
}
.status-badge:hover { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

.status-badge--researching { background: #F3E8FF; color: #7C3AED; border-color: #DDD6FE; box-shadow: 0 2px 0 #C4B5FD; }
.status-badge--planning { background: var(--color-primary-light); color: var(--color-primary); border-color: #C7D2FE; box-shadow: 0 2px 0 #A5B4FC; }
.status-badge--preparing_materials { background: #DBEAFE; color: #2563EB; border-color: #BFDBFE; box-shadow: 0 2px 0 #93C5FD; }
.status-badge--waiting_recommendation { background: var(--color-warning-light); color: #B45309; border-color: #FDE68A; box-shadow: 0 2px 0 #FCD34D; }
.status-badge--ready_to_submit { background: #D1FAE5; color: #047857; border-color: #A7F3D0; box-shadow: 0 2px 0 #6EE7B7; }
.status-badge--submitted { background: #CFFAFE; color: #0E7490; border-color: #A5F3FC; box-shadow: 0 2px 0 #67E8F9; }
.status-badge--interviewing { background: #FCE7F3; color: #BE185D; border-color: #FBCFE8; box-shadow: 0 2px 0 #F472B6; }
.status-badge--waiting_list { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; box-shadow: 0 2px 0 #FB923C; }
.status-badge--admitted { background: var(--color-success-light); color: #047857; border-color: #A7F3D0; box-shadow: 0 2px 0 #6EE7B7; }
.status-badge--rejected { background: var(--color-danger-light); color: #B91C1C; border-color: #FECACA; box-shadow: 0 2px 0 #F87171; }
.status-badge--abandoned { background: #F3F4F6; color: #6B7280; border-color: #E5E7EB; box-shadow: 0 2px 0 #D1D5DB; }

/* ============================================================
   紧急程度标签
   ============================================================ */
.urgency-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.urgency-tag--normal { background: #ECFDF5; color: #047857; border-color: #A7F3D0; box-shadow: 0 2px 0 #6EE7B7; }
.urgency-tag--attention { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; box-shadow: 0 2px 0 #93C5FD; }
.urgency-tag--warning { background: var(--color-warning-light); color: #B45309; border-color: #FDE68A; box-shadow: 0 2px 0 #FCD34D; }
.urgency-tag--urgent { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; box-shadow: 0 2px 0 #FB923C; }
.urgency-tag--critical { background: var(--color-danger-light); color: #B91C1C; border-color: #FECACA; box-shadow: 0 2px 0 #F87171; }
.urgency-tag--expired { background: #F3F4F6; color: #6B7280; border-color: #E5E7EB; box-shadow: 0 2px 0 #D1D5DB; }
.urgency-tag--unknown { background: #F8FAFC; color: var(--color-text-muted); border-color: #E5E7EB; box-shadow: 0 2px 0 #D1D5DB; }

/* 今天截止的脉冲效果 */
.urgency-tag--critical-pulse {
  animation: urgencyPulse 2s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* ============================================================
   材料进度
   ============================================================ */
.material-progress { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-secondary); }

/* ============================================================
   空状态
   ============================================================ */
.empty-state {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  min-height: 360px;
}
.empty-state-content { text-align: center; max-width: 420px; }
.empty-state-icon { font-size: 3.5rem; margin-bottom: var(--space-lg); opacity: 1; }
.empty-state-icon .empty-bricks {
  position: relative; width: 80px; height: 70px;
  margin: 0 auto;
  animation: emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Scattered LEGO bricks — waiting to be stacked */
.empty-brick {
  position: absolute;
  width: 42px; height: 16px;
  border-radius: 3px;
  transform: rotate(var(--eb-rot)) translateY(var(--eb-y));
  animation: brickWobble 2.8s ease-in-out infinite;
  animation-delay: var(--eb-delay, 0ms);
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.08);
}
.empty-brick::after {
  content: '';
  position: absolute; top: 1px; left: 2px; right: 2px;
  height: 1px; background: rgba(255,255,255,.3);
  border-radius: 1px;
}
/* Brick mini studs */
.empty-brick::before {
  content: '';
  position: absolute; top: -4px; left: 4px; right: 4px;
  height: 4px;
  background:
    radial-gradient(circle at 5px 2px,  var(--eb-color) 2px, transparent 2px),
    radial-gradient(circle at 15px 2px, var(--eb-color) 2px, transparent 2px),
    radial-gradient(circle at 25px 2px, var(--eb-color) 2px, transparent 2px),
    radial-gradient(circle at 35px 2px, var(--eb-color) 2px, transparent 2px);
}

@keyframes brickWobble {
  0%, 100% { transform: rotate(var(--eb-rot)) translateY(var(--eb-y)); }
  50%      { transform: rotate(var(--eb-rot)) translateY(calc(var(--eb-y) - 5px)); }
}

/* Brick colors */
.empty-brick--1 { background: linear-gradient(180deg, #F06068 0%, #E84050 50%, #CC2838 100%); top: 5px; left: 18px; --eb-delay: 0ms; }
.empty-brick--2 { background: linear-gradient(180deg, #5EB8F0 0%, #3098D8 50%, #1880C0 100%); top: 25px; left: 30px; --eb-delay: .4s; }
.empty-brick--3 { background: linear-gradient(180deg, #F8A858 0%, #F08830 50%, #D87018 100%); top: 42px; left: 10px; --eb-delay: .8s; }
.empty-brick--4 { background: linear-gradient(180deg, #60C878 0%, #38A850 50%, #209038 100%); top: 18px; left: 4px; --eb-delay: 1.2s; }
.empty-state-title { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-sm); }
.empty-state-desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-lg); }
.empty-state-hint { display: none; }

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs); padding: 8px 16px; font-size: 0.85rem;
  font-weight: 500; font-family: var(--font-family);
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition-fast);
  line-height: 1.4; white-space: nowrap; text-decoration: none;
  position: relative;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: 0.6; }

.btn-primary {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: all .15s ease;
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-ghost {
  background-color: transparent; color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
  background-color: #F8FAFC; color: var(--color-text);
  border-color: var(--color-text-muted);
}
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }

.btn-danger {
  background-color: transparent; color: var(--color-danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) { background-color: var(--color-danger-light); }

.btn-danger-solid {
  background-color: var(--color-danger); color: #FFFFFF;
  border-color: var(--color-danger);
}
.btn-danger-solid:hover:not(:disabled) { background-color: #DC2626; border-color: #DC2626; }

/* ============================================================
   表格操作按钮
   ============================================================ */
.th-actions { text-align: center; width: 100px; }
.td-actions { text-align: center; white-space: nowrap; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: transparent;
  cursor: pointer; font-size: 0.9rem;
  transition: all var(--transition-fast);
}
.btn-icon:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-icon--edit { color: var(--color-primary); }
.btn-icon--edit:hover { background-color: var(--color-primary-light); }

.btn-icon--delete { color: var(--color-danger); }
.btn-icon--delete:hover { background-color: var(--color-danger-light); }

/* ============================================================
   弹窗遮罩层 + 模态框
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-normal);
}
.modal-overlay--visible { opacity: 1; pointer-events: auto; }

.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; display: flex; flex-direction: column;
  overflow: hidden; transform: translateY(12px);
  transition: transform var(--transition-normal);
}
.modal-overlay--visible .modal { transform: translateY(0); }
.modal--form { max-width: 720px; max-height: 90vh; }
.modal--small { max-width: 440px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.modal-title { font-size: 1.1rem; font-weight: 700; }

.modal-close {
  width: 32px; height: 32px; border: none; background: none;
  font-size: 1.3rem; color: var(--color-text-muted);
  cursor: pointer; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.modal-close:hover { background-color: #F1F5F9; color: var(--color-text); }
.modal-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.modal-body { padding: var(--space-lg); overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border); flex-shrink: 0;
}

/* ============================================================
   表单折叠面板
   ============================================================ */
.form-collapse {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  background-color: var(--color-surface);
}
.form-collapse-header {
  width: 100%; padding: var(--space-md);
  background: none; border: none;
  display: flex; align-items: center; gap: var(--space-sm);
  cursor: pointer; font-family: var(--font-family);
  font-size: 0.88rem; font-weight: 600; color: var(--color-text);
  text-align: left; transition: background-color var(--transition-fast);
}
.form-collapse-header:hover { background-color: #F8FAFC; }
.form-collapse-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.form-collapse-arrow {
  display: inline-block; font-size: 0.75rem; width: 16px;
  text-align: center; color: var(--color-text-muted);
  transition: transform var(--transition-normal);
}
.form-collapse-header[aria-expanded="true"] .form-collapse-arrow {
  transform: rotate(90deg);
}
.form-collapse-title { flex: 1; }

.form-collapse-body {
  overflow: hidden; max-height: 0;
  padding: 0 var(--space-md);
  transition: max-height 300ms ease, padding 300ms ease;
}
.form-collapse-body--open {
  max-height: 3000px;
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.form-section-progress {
  font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted);
  margin-left: var(--space-sm);
}

/* ============================================================
   表单样式
   ============================================================ */
.project-form { display: flex; flex-direction: column; }
.form-section { margin-bottom: var(--space-lg); }
.form-section:last-child { margin-bottom: 0; }
.form-section-title {
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.form-row { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.form-row:last-child { margin-bottom: 0; }
.form-row--two { grid-template-columns: 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }

.form-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.form-required { color: var(--color-danger); }
.form-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-left: var(--space-xs); font-weight: 400; }

.form-input {
  width: 100%; padding: 9px 12px; font-size: 0.9rem;
  font-family: var(--font-family); color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.form-input--error { border-color: var(--color-danger); }

/* School name autocomplete dropdown */
.school-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 800;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto;
  margin-top: -1px;
}
.school-suggestion-item {
  display: block; width: 100%; padding: 8px 12px; border: none; border-top: 1px solid var(--color-border);
  background: none; text-align: left; cursor: pointer;
  font-family: var(--font-family); font-size: 0.82rem; color: var(--color-text-primary);
  transition: background var(--transition-fast);
}
.school-suggestion-item:first-child { border-top: none; }
.school-suggestion-item:hover { background: var(--color-surface-subtle); }
.form-input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.form-input--valid { border-color: var(--color-success); }

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394A3B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.form-textarea { resize: vertical; min-height: 72px; }
.form-error { font-size: 0.78rem; color: var(--color-danger); min-height: 0; opacity: 0; transition: opacity var(--transition-fast); }
.form-error--visible { opacity: 1; }

/* 表单底部进度条 */
.form-progress-bar {
  margin-top: var(--space-md); padding: var(--space-md);
  background-color: #F8FAFC; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.form-progress-text { font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.form-progress-fill { transition: width 350ms ease; }

/* ============================================================
   材料状态分段控件
   ============================================================ */
.material-grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.material-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #FAFBFC;
}
.material-item-label {
  font-size: 0.82rem; font-weight: 500; color: var(--color-text);
}
.material-segment {
  display: flex; gap: 0; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden;
  flex-shrink: 0;
}
.material-segment-btn {
  padding: 3px 8px; font-size: 0.7rem; font-weight: 500;
  border: none; cursor: pointer; font-family: var(--font-family);
  background-color: #FFF; color: var(--color-text-muted);
  transition: all var(--transition-fast);
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}
.material-segment-btn:last-child { border-right: none; }
.material-segment-btn:hover:not(.material-segment-btn--active) {
  background-color: #F1F5F9; color: var(--color-text);
}
.material-segment-btn--active { color: #FFF; cursor: default; }

.material-segment-btn--active.seg-not-started   { background-color: #94A3B8; border-color: #94A3B8; }
.material-segment-btn--active.seg-in-progress   { background-color: #3B82F6; border-color: #3B82F6; }
.material-segment-btn--active.seg-completed     { background-color: #10B981; border-color: #10B981; }
.material-segment-btn--active.seg-not-needed    { background-color: #6B7280; border-color: #6B7280; }

/* ============================================================
   右侧抽屉
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 250;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-normal);
  display: flex; justify-content: flex-end;
}
.drawer-overlay--visible { opacity: 1; pointer-events: auto; }

.drawer {
  background-color: var(--color-surface);
  width: 100%; max-width: 520px; height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(40px);
  transition: transform var(--transition-normal);
  overflow: hidden;
}
.drawer-overlay--visible .drawer { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg); border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.drawer-title { font-size: 1.1rem; font-weight: 700; }
.drawer-body { padding: var(--space-lg); overflow-y: auto; flex: 1; }
.drawer-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border); flex-shrink: 0;
}

/* 详情区域 */
.detail-section { margin-bottom: var(--space-lg); }
.detail-section-title {
  font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.detail-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--space-xs) 0; gap: var(--space-sm);
}
.detail-label { font-size: 0.82rem; color: var(--color-text-secondary); flex-shrink: 0; min-width: 80px; }
.detail-value { font-size: 0.85rem; color: var(--color-text); text-align: right; word-break: break-word; }
.detail-value--link { color: var(--color-primary); text-decoration: none; }
.detail-value--link:hover { text-decoration: underline; }
.detail-empty { font-size: 0.82rem; color: var(--color-text-muted); font-style: italic; }
.detail-text-block {
  font-size: 0.85rem; color: var(--color-text); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.detail-materials-list { list-style: none; }
.detail-materials-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 0.85rem;
}
.detail-mat-label { color: var(--color-text); }
.detail-mat-status { font-size: 0.78rem; font-weight: 500; }
.detail-mat-status--completed { color: #047857; }
.detail-mat-status--in-progress { color: #2563EB; }
.detail-mat-status--not-started { color: var(--color-text-muted); }
.detail-mat-status--not-needed { color: #6B7280; }

/* ============================================================
   个人资料编辑弹窗
   ============================================================ */
.profile-avatar-edit {
  display: flex; align-items: center; gap: var(--space-lg);
  margin-bottom: var(--space-lg); padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.profile-avatar-preview {
  width: 80px; height: 80px; border-radius: 50%;
  background-color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--color-text-muted);
  flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--color-border);
}
.profile-avatar-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-avatar-actions { display: flex; flex-direction: column; gap: var(--space-sm); }
.profile-avatar-hint { font-size: 0.75rem; color: var(--color-text-muted); }

/* ============================================================
   删除确认 / 未保存确认
   ============================================================ */
.delete-confirm-text { font-size: 0.95rem; color: var(--color-text); margin-bottom: var(--space-md); }
.delete-project-info {
  background-color: #F8FAFC; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.delete-project-info .delete-school { font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.delete-project-info .delete-program { font-size: 0.9rem; color: var(--color-text-secondary); }
.delete-warning-text { font-size: 0.82rem; color: var(--color-danger); }

.unsaved-text { font-size: 0.95rem; color: var(--color-text); margin-bottom: var(--space-sm); }
.unsaved-hint { font-size: 0.82rem; color: var(--color-text-muted); }

/* ============================================================
   Toast 消息系统
   ============================================================ */
.toast-container {
  position: fixed; top: var(--space-lg); right: var(--space-lg);
  z-index: 300; display: flex; flex-direction: column;
  gap: var(--space-sm); pointer-events: none;
  max-width: 520px;
}
.toast-item {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  position: relative;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 500; line-height: 1.4;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  animation: toastIn 250ms ease both;
  max-width: 100%;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-item--removing {
  animation: toastOut 200ms ease forwards;
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(40px); }
}

.toast-item--success {
  background: linear-gradient(180deg, #4CB856 0%, #2D8E38 50%, #1B6B24 100%);
  color: #FFF;
  border: 2px solid #1B6B24;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #1B6B24, 0 5px 12px rgba(0,0,0,.1);
}
.toast-item--error {
  background: linear-gradient(180deg, #F4363F 0%, #D42026 50%, #B01217 100%);
  color: #FFF;
  border: 2px solid #B01217;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #B01217, 0 5px 12px rgba(0,0,0,.1);
}
.toast-item--warning {
  background: linear-gradient(180deg, #F99A3E 0%, #E5781A 50%, #C05A0D 100%);
  color: #FFF;
  border: 2px solid #C05A0D;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #C05A0D, 0 5px 12px rgba(0,0,0,.1);
}
.toast-item--info {
  background: linear-gradient(180deg, #3EA5E8 0%, #1A7DC4 50%, #0D5FA0 100%);
  color: #FFF;
  border: 2px solid #0D5FA0;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #0D5FA0, 0 5px 12px rgba(0,0,0,.1);
}

/* Toast stud accents removed — clean 3D brick look is enough */

.toast-item-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; margin-top: 1px; }
.toast-item-text { flex: 1; word-break: break-word; }
.toast-item-close {
  flex-shrink: 0; cursor: pointer; background: none; border: none;
  color: rgba(255,255,255,0.7); font-size: 1rem; padding: 0;
  line-height: 1; transition: color var(--transition-fast);
}
.toast-item-close:hover { color: #FFF; }

/* ============================================================
   底部
   ============================================================ */
.footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) 0; margin-top: auto;
}
.footer-text { font-size: 0.78rem; color: var(--color-text-muted); text-align: center; }

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .urgency-tag--critical-pulse { animation: none; }
}

/* ============================================================
   搜索框
   ============================================================ */
.search-box {
  position: relative; display: flex; align-items: center;
  min-width: 200px; max-width: 320px;
}
.search-icon {
  position: absolute; left: 10px; font-size: 0.85rem;
  color: var(--color-text-muted); pointer-events: none;
}
.search-input {
  width: 100%; padding: 8px 32px 8px 32px;
  font-size: 0.85rem; font-family: var(--font-family);
  color: var(--color-text); background-color: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  outline: none; transition: border-color var(--transition-fast);
}
.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.search-input::placeholder { color: var(--color-text-muted); }
.search-clear {
  position: absolute; right: 4px; width: 24px; height: 24px;
  border: none; background: none; font-size: 1rem; color: var(--color-text-muted);
  cursor: pointer; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; transition: all var(--transition-fast);
}
.search-clear:hover { background-color: var(--color-border); color: var(--color-text); }

/* ============================================================
   排序选择
   ============================================================ */
.sort-select-wrapper { flex-shrink: 0; }
.sort-select {
  width: auto; min-width: 160px; padding: 8px 32px 8px 12px;
  font-size: 0.82rem; cursor: pointer;
}

/* ============================================================
   筛选面板
   ============================================================ */
.filter-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  animation: filterSlideIn 200ms ease both;
}
@keyframes filterSlideIn {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
}
.filter-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md);
}
.filter-panel-title { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.filter-panel-body { display: flex; flex-direction: column; gap: 0; }
.filter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-sm); }
.filter-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.filter-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-select { font-size: 0.82rem; padding: 7px 28px 7px 10px; }
.filter-panel-footer { display: flex; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border); margin-top: var(--space-md); }

/* ============================================================
   筛选条件徽标
   ============================================================ */
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background-color: var(--color-primary); color: #FFF;
  border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600;
  margin-left: 2px;
}

/* ============================================================
   Active Bar：快捷筛选 + 条件标签 + 结果数量
   ============================================================ */
.active-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm);
  margin-bottom: var(--space-md);
  min-height: 36px;
}
.active-bar-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.active-bar-right { flex-shrink: 0; }

/* 快捷筛选按钮 */
.quick-filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.quick-filter-btn {
  padding: 4px 12px; font-size: 0.78rem; font-weight: 500;
  font-family: var(--font-family); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); background-color: var(--color-surface);
  color: var(--color-text-secondary); cursor: pointer;
  transition: all var(--transition-fast); white-space: nowrap;
}
.quick-filter-btn:hover { background-color: #F1F5F9; border-color: var(--color-text-muted); }
.quick-filter-btn--active {
  background-color: var(--color-primary-light); color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 条件标签 */
.active-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.active-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 0.75rem; font-weight: 500;
  background-color: var(--color-primary-light); color: var(--color-primary);
  border: 1px solid #C7D2FE; border-radius: var(--radius-full);
  white-space: nowrap; transition: all var(--transition-fast);
}
.active-tag-remove {
  cursor: pointer; font-size: 0.85rem; font-weight: 700;
  margin-left: 2px; color: var(--color-primary); opacity: 0.7;
  transition: opacity var(--transition-fast); border: none; background: none; padding: 0; line-height: 1;
}
.active-tag-remove:hover { opacity: 1; }

/* 结果数量 */
.result-count {
  font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap;
}

/* ============================================================
   统计卡片选中状态
   ============================================================ */
.stat-card--active {
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
  background-color: var(--color-primary-light);
}

/* ============================================================
   空状态操作按钮
   ============================================================ */
.empty-state-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   数据管理弹窗
   ============================================================ */
.data-section {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.data-section:first-child { padding-top: 0; }
.data-section:last-child { border-bottom: none; padding-bottom: 0; }
.data-section--danger {
  background-color: #FFFBF5;
  margin: 0 calc(-1 * var(--space-md));
  padding: var(--space-md) !important;
  border-radius: var(--radius-sm);
  border: 1px dashed #FCD34D;
}
.data-section-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); }
.data-section-desc { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: var(--space-sm); }
.data-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.data-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.data-safety-list {
  font-size: 0.78rem; color: var(--color-text-secondary);
  line-height: 1.6; padding-left: var(--space-lg); margin: 0;
}
.data-safety-list li { margin-bottom: 2px; }

/* 快照列表 */
.snapshot-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.snapshot-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background-color: #F8FAFC; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: 0.82rem; gap: var(--space-sm);
}
.snapshot-info { flex: 1; min-width: 0; }
.snapshot-time { font-weight: 500; color: var(--color-text); }
.snapshot-meta { font-size: 0.75rem; color: var(--color-text-muted); }

/* 预览内容 */
.import-preview-stats {
  background-color: #F8FAFC; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.import-preview-stat {
  display: flex; justify-content: space-between;
  font-size: 0.84rem; padding: 3px 0;
}
.import-preview-stat--warn { color: #B45309; }
.import-preview-sample { font-size: 0.82rem; color: var(--color-text-secondary); margin-top: var(--space-sm); }
.import-preview-sample strong { font-size: 0.78rem; color: var(--color-text-muted); }

/* 冲突摘要 */
.conflict-summary {
  background-color: var(--color-warning-light);
  border: 1px solid #FCD34D; border-radius: var(--radius-sm);
  padding: var(--space-md); margin-bottom: var(--space-md); font-size: 0.84rem;
}

/* 覆盖确认 */
.overwrite-warning-text { font-size: 0.9rem; color: var(--color-text); margin-bottom: var(--space-sm); line-height: 1.5; }
.overwrite-hint { font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: var(--space-sm); }

/* ============================================================
   导出中心
   ============================================================ */
.radio-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.82rem; cursor: pointer; color: var(--color-text);
  padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background-color: #FAFBFC;
  transition: all var(--transition-fast);
}
.radio-label:hover { border-color: var(--color-text-muted); }
.radio-label input[type="radio"] { margin: 0; }

.csv-preview-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
  border: 1px solid var(--color-border);
}
.csv-preview-table th {
  background-color: #F8FAFC; padding: 4px 8px; text-align: left;
  font-weight: 600; border: 1px solid var(--color-border); white-space: nowrap;
}
.csv-preview-table td {
  padding: 3px 8px; border: 1px solid var(--color-border);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   @media print — A4 打印报告
   ============================================================ */
@media print {
  /* Hide all interactive elements */
  .header, .toolbar, .filter-panel, .active-bar, .footer,
  .modal-overlay, .toast-container, .drawer-overlay,
  .dash-hero-right, .stats-section, .empty-state,
  #no-results-state, .btn, .form-collapse-header,
  .td-actions, .th-actions, .material-segment,
  .search-box, .sort-select-wrapper, .quick-filters,
  .active-tags, .result-count, .filter-panel-footer,
  .header-brand, .header-actions, .header-avatar, .lang-toggle,
  .map-tools, .map-regions, .jvm-zoom-btn, .jvm-series-container,
  .hero-segment-bar, .hero-segment-label, .hero-quote, .hero-puzzle,
  .dash-overview, .dash-card--map, .dash-grid, .dash-card,
  .dash-deadlines, .dash-countries, .dash-insights {
    display: none !important;
  }

  body {
    background: #FFF !important;
    font-size: 10pt; color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .container { max-width: 100% !important; padding: 0 !important; }
  .main { padding: 0 !important; }
  .dash-hero { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 0 16px 0 !important; }
  .dash-hero-inner { padding: 0 !important; }
  .hero-progress-number { font-size: 36pt !important; }

  /* Report containers — clean, professional */
  .report-page { width: 100%; padding: 0; }
  .report-cover {
    text-align: left; padding: 20px 0 16px;
    border-bottom: 1.5px solid #000; margin-bottom: 20px;
  }
  .report-cover h1 { font-size: 20pt; margin-bottom: 4px; font-weight: 600; }
  .report-cover p { font-size: 9pt; color: #555; margin: 2px 0; }
  .report-section { margin-bottom: 16px; page-break-inside: avoid; }
  .report-section h2 {
    font-size: 12pt; border-bottom: 1px solid #000;
    padding-bottom: 4px; margin-bottom: 10px; font-weight: 600;
  }
  .report-stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .report-stat-item { font-size: 9pt; min-width: 60px; }
  .report-stat-item strong { font-size: 14pt; display: block; }

  .report-table {
    width: 100%; border-collapse: collapse; font-size: 8pt;
    margin-bottom: 12px;
  }
  .report-table th {
    background-color: #F0F0F0; font-weight: 600; padding: 5px 6px;
    text-align: left; border: 0.5px solid #999;
  }
  .report-table td {
    padding: 4px 6px; border: 0.5px solid #CCC;
    word-break: break-word;
  }
  .report-table tr { page-break-inside: avoid; }
  .report-table thead { display: table-header-group; }

  .report-tag {
    display: inline-block; padding: 1px 5px; border: 0.5px solid #666;
    border-radius: 10px; font-size: 7pt;
  }
  .report-empty { color: #999; font-style: italic; }

  .report-deadline-list { list-style: none; padding: 0; margin: 0; }
  .report-deadline-list li {
    display: flex; justify-content: space-between; padding: 3px 0;
    border-bottom: 0.5px dotted #CCC; font-size: 9pt;
  }

  @page { size: A4; margin: 12mm; }
}

/* ============================================================
   Dashboard
   ============================================================ */

/* ——— Hero ——— */
.dash-hero {
  position: relative; margin-bottom: var(--space-xl);
  overflow: hidden; isolation: isolate;
  animation: dashFadeIn 300ms ease both;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: var(--shadow-xs);
  transition: transform 420ms var(--ease-emphasized),
              box-shadow 420ms var(--ease-emphasized);
}
.dash-hero:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06);
}
@keyframes dashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Decorative bg — Radio France inspired: soft gradient */
.hero-bg-block {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(213,222,184,.22) 0%, transparent 100%),
    linear-gradient(180deg, var(--color-accent-pale) 0%, var(--color-surface) 45%);
}
.hero-bg-block--highlight { display: none; }

.dash-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 64px;
  padding: 48px 52px;
}
.dash-hero-text { flex: 1; min-width: 0; }
.dash-hero-greeting {
  font-size: 0.62rem; font-weight: 600; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 28px;
  transition: letter-spacing 300ms var(--ease-standard);
  cursor: default;
}
.dash-hero-greeting:hover { letter-spacing: 0.28em; }
.hero-progress-number {
  font-size: clamp(3.5rem, 7.5vw, 5.5rem);
  font-weight: 480; color: var(--color-text-primary);
  line-height: 0.86; font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; letter-spacing: -0.035em;
  display: inline-block; cursor: default;
  transition: transform 320ms var(--ease-emphasized);
}

/* LEGO plaque around the big % number */
.dash-hero-display {
  position: relative;
  display: inline-flex; align-items: baseline;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 12px 28px 18px;
  box-shadow:
    0 5px 0 var(--color-border-strong),
    0 6px 16px rgba(0,0,0,.06);
  transition: transform 280ms var(--ease-emphasized), box-shadow 280ms var(--ease-emphasized);
}
.dash-hero-display:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 var(--color-border-strong),
    0 8px 20px rgba(0,0,0,.08);
}

/* Four LEGO studs on top of the plaque */
.dash-hero-display::before {
  content: '';
  position: absolute; top: -8px; left: 14px; right: 14px;
  height: 8px;
  background:
    radial-gradient(circle at 9px 4px,  var(--color-surface) 4px, transparent 4px),
    radial-gradient(circle at 27px 4px, var(--color-surface) 4px, transparent 4px),
    radial-gradient(circle at 45px 4px, var(--color-surface) 4px, transparent 4px),
    radial-gradient(circle at 63px 4px, var(--color-surface) 4px, transparent 4px);
  pointer-events: none; z-index: 1;
}
/* Stud border rings */
.dash-hero-display::after {
  content: '';
  position: absolute; top: -8px; left: 14px; right: 14px;
  height: 8px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 9px 4px,  var(--color-border-strong) 5.5px, transparent 5.5px),
    radial-gradient(circle at 27px 4px, var(--color-border-strong) 5.5px, transparent 5.5px),
    radial-gradient(circle at 45px 4px, var(--color-border-strong) 5.5px, transparent 5.5px),
    radial-gradient(circle at 63px 4px, var(--color-border-strong) 5.5px, transparent 5.5px);
}
.hero-progress-symbol {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400; color: var(--color-text-secondary);
  margin-left: 4px;
}
.dash-hero-subtitle {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary); font-weight: 400;
  line-height: 1.8; max-width: 460px; margin-top: 18px;
}
.dash-hero-deadline {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.dash-hero-deadline-label {
  display: block; font-size: 0.58rem; font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 8px;
}
.dash-hero-deadline-text { font-size: 0.88rem; font-weight: 550; color: var(--color-text-primary); }
/* Hero deadline — subtle pulse when due today */
.dash-hero-deadline--today .dash-hero-deadline-label {
  color: var(--color-accent); font-weight: 700;
}
.dash-hero-deadline--today .dash-hero-deadline-text {
  animation: heroDlPulse 3s ease-in-out infinite;
}
@keyframes heroDlPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

.dash-hero-right {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding-top: 28px;
  min-width: 160px;
}

/* --- Portfolio balance in hero text --- */
.pf-balance { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pf-item { font-size: 0.7rem; font-weight: 500; color: var(--color-text-secondary); display: flex; align-items: center; gap: 4px; cursor: default; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-dot--reach { background: #E84050; }
.pf-dot--target { background: #3098D8; }
.pf-dot--safety { background: #60C878; }

/* — Material pill segment progress — playful, interactive — */
.hero-segment-bar {
  display: flex; align-items: center; gap: 0;
  padding: 4px 0;
}
.hero-segment {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-border);
  transition: transform 220ms var(--ease-emphasized),
              background 300ms var(--ease-standard);
  cursor: pointer; position: relative;
}
.hero-segment:hover {
  transform: scale(1.8);
  background: var(--color-accent);
}
.hero-segment--done {
  background: var(--color-accent);
  transform: scale(1.2);
}
.hero-segment--done:hover {
  background: #5F8A67;
  transform: scale(2);
}
.hero-segment-connector {
  width: 20px; height: 1.5px; background: var(--color-border);
  transition: background 300ms var(--ease-standard);
}
.hero-segment:hover + .hero-segment-connector {
  background: var(--color-accent);
}
.hero-segment-label {
  font-size: 8px; font-weight: 600; color: var(--color-text-tertiary);
  letter-spacing: 0.13em; text-align: center; opacity: 0.55;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ——— LEGO Robot Head Desk Pet ——— */
.hero-puzzle {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-top: 0;
}

.puzzle-scene {
  position: relative;
  width: 96px; min-height: 130px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  animation: roboFloat 4s ease-in-out infinite;
}
@keyframes roboFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ——— Shadow ——— */
.puzzle-shadow {
  position: absolute; bottom: -2px; left: 50%;
  width: 70px; height: 8px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: roboShadow 4s ease-in-out infinite;
}
@keyframes roboShadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .55; }
  50%      { transform: translateX(-50%) scale(.7); opacity: .25; }
}

/* ——— Robot Head — warm sunny orange ——— */
.robo-head {
  position: relative; z-index: 2;
  width: 72px; height: 58px;
  background: linear-gradient(175deg, #FFE0A0 0%, #F5B840 45%, #E09820 100%);
  border-radius: 9px 9px 6px 6px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.5),
    0 3px 0 #C07818,
    0 4px 10px rgba(160,100,30,.18);
  transition: transform .15s var(--ease-emphasized);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.robo-head:hover { transform: scale(1.06); }
.robo-head:active  { transform: scale(.94); }

/* Click bounce */
.robo-head--bounce {
  animation: roboBounce .5s var(--ease-emphasized);
}
@keyframes roboBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-14px); }
  60%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* ——— Studs on top of head ——— */
.robo-stud {
  position: absolute; top: -9px;
  width: 14px; height: 9px;
  background: linear-gradient(180deg, #FFE4B0 0%, #F5B840 60%, #D89828 100%);
  border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5);
}
.robo-stud:first-of-type { left: 14px; }
.robo-stud--r           { right: 14px; }

/* ——— Face plate ——— */
.robo-face {
  position: absolute; top: 14px; left: 8px; right: 8px; bottom: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.01) 100%);
  border-radius: 5px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 7px;
}

/* ——— Eyes ——— */
.robo-eyes {
  display: flex; gap: 14px; align-items: center;
  transition: gap .3s ease;
}
.robo-eye {
  width: 10px; height: 11px;
  background: #1A1A1A;
  border-radius: 50%;
  position: relative;
  transition: width .3s ease, height .3s ease, border-radius .3s ease;
}
/* Highlight dot */
.robo-eye::after {
  content: ''; position: absolute;
  top: 2px; right: 2px;
  width: 3.5px; height: 3.5px;
  background: #FFF; border-radius: 50%;
  transition: opacity .3s;
}

/* — Expression: curious (default for 0 projects) — */
.robo-head--curious .robo-eye--l { width: 8px; height: 9px; }
.robo-head--curious .robo-eye--r { width: 12px; height: 13px; }
.robo-head--curious .robo-eyes { gap: 12px; }

/* — Expression: happy (1-2 projects) — */
.robo-head--happy .robo-eyes { gap: 15px; }

/* — Expression: excited (3-5 projects) — */
.robo-head--excited .robo-eye { width: 13px; height: 14px; }
.robo-head--excited .robo-eyes { gap: 16px; }

/* — Expression: wow (6+ projects) — */
.robo-head--wow .robo-eye { width: 14px; height: 14px; }
.robo-head--wow .robo-eye::after { width: 4px; height: 4px; top: 1px; right: 1px; }

/* ——— Mouth ——— */
.robo-mouth {
  transition: all .3s ease;
}
/* curious: small round mouth */
.robo-head--curious .robo-mouth {
  width: 8px; height: 9px;
  background: #1A1A1A; border-radius: 50%;
}
/* happy: upward arc smile */
.robo-head--happy .robo-mouth {
  width: 18px; height: 9px;
  border-bottom: 2.5px solid #1A1A1A;
  border-radius: 0 0 9px 9px;
  background: none;
}
/* excited: wide grin */
.robo-head--excited .robo-mouth {
  width: 24px; height: 12px;
  background: #1A1A1A;
  border-radius: 3px 3px 10px 10px;
  position: relative;
}
.robo-head--excited .robo-mouth::after {
  content: ''; position: absolute;
  top: 3px; left: 4px; right: 4px; height: 2px;
  background: #FFE345; border-radius: 1px;
}
/* wow: big open mouth */
.robo-head--wow .robo-mouth {
  width: 16px; height: 16px;
  background: #1A1A1A;
  border-radius: 50%;
}

/* ——— Body brick stack ——— */
.robo-body-stack {
  position: relative; z-index: 1;
  display: flex; flex-direction: column-reverse;
  align-items: center; gap: 0;
  margin-top: -2px;
}

.robo-brick {
  position: relative;
  width: 60px; height: 20px;
  border-radius: 3px;
  box-shadow:
    0 2px 0 var(--brick-shadow, rgba(0,0,0,.08)),
    0 3px 8px rgba(0,0,0,.04);
  animation: brickPop .4s var(--ease-emphasized) both;
}
@keyframes brickPop {
  from { opacity: 0; transform: translateY(-10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Soft top highlight */
.robo-brick::after {
  content: '';
  position: absolute; top: 1px; left: 4px; right: 4px;
  height: 1.5px; background: rgba(255,255,255,.45);
  border-radius: 1px;
}

/* Studs on brick top */
.robo-brick::before {
  content: '';
  position: absolute; top: -5px; left: 5px; right: 5px;
  height: 5px;
  background:
    radial-gradient(circle at 7px 2.5px,  var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 21px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 35px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 49px 2.5px, var(--brick-top) 2.5px, transparent 2.5px);
  background-size: 50px 5px; background-repeat: no-repeat;
}

/* Stagger rotation per brick */
.robo-brick:nth-child(1)  { transform: rotate(0deg); }
.robo-brick:nth-child(2)  { transform: rotate(.8deg); animation-delay: .06s; }
.robo-brick:nth-child(3)  { transform: rotate(-.6deg); animation-delay: .10s; }
.robo-brick:nth-child(4)  { transform: rotate(.5deg); animation-delay: .14s; }
.robo-brick:nth-child(5)  { transform: rotate(-.4deg); animation-delay: .18s; }
.robo-brick:nth-child(6)  { transform: rotate(.6deg); animation-delay: .22s; }
.robo-brick:nth-child(7)  { transform: rotate(-.3deg); animation-delay: .26s; }
.robo-brick:nth-child(8)  { transform: rotate(.4deg); animation-delay: .30s; }

/* — Vibrant bright brick colors — */
.robo-brick--red {
  background: linear-gradient(180deg, #F06068 0%, #E84050 45%, #CC2838 100%);
  --brick-top: #F06068; --brick-shadow: #A82030;
}
.robo-brick--blue {
  background: linear-gradient(180deg, #5EB8F0 0%, #3098D8 45%, #1880C0 100%);
  --brick-top: #5EB8F0; --brick-shadow: #1068A0;
}
.robo-brick--green {
  background: linear-gradient(180deg, #60C878 0%, #38A850 45%, #209038 100%);
  --brick-top: #60C878; --brick-shadow: #187828;
}
.robo-brick--orange {
  background: linear-gradient(180deg, #F8A858 0%, #F08830 45%, #D87018 100%);
  --brick-top: #F8A858; --brick-shadow: #B85C10;
}
.robo-brick--purple {
  background: linear-gradient(180deg, #A870E0 0%, #8858C8 45%, #7040B0 100%);
  --brick-top: #A870E0; --brick-shadow: #583090;
}

/* Ghost brick — lighter */
.robo-brick--ghost {
  background: transparent;
  border: 1.5px dashed var(--color-border-strong);
  box-shadow: none;
  opacity: .45;
  animation: ghostPulse 2.4s ease-in-out infinite;
}
.robo-brick--ghost::before,
.robo-brick--ghost::after { opacity: .2; }
@keyframes ghostPulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: .55; }
}

/* ——— Caption ——— */
.puzzle-caption {
  font-size: 0.68rem; color: var(--color-text-tertiary);
  text-align: center; max-width: 140px; line-height: 1.5;
  font-weight: 440; min-height: 2.2em;
  transition: color .3s;
}
.puzzle-caption--alt {
  color: var(--color-accent); font-weight: 500;
}

/* ——— Responsive ——— */
@media (max-width: 768px) {
  .puzzle-scene { width: 80px; min-height: 150px; }
  .robo-head { width: 60px; height: 48px; border-radius: 7px 7px 5px 5px; }
  .robo-head:hover { transform: none; }
  .robo-stud { width: 12px; height: 7px; top: -7px; }
  .robo-stud:first-of-type { left: 10px; }
  .robo-stud--r { right: 10px; }
  .robo-face { top: 11px; left: 6px; right: 6px; bottom: 6px; gap: 5px; }
  .robo-eye { width: 8px; height: 9px; }
  .robo-eye::after { width: 3px; height: 3px; }
  .robo-eyes { gap: 11px; }
  .robo-head--excited .robo-eye { width: 10px; height: 11px; }
  .robo-head--wow .robo-eye { width: 11px; height: 11px; }
  .robo-head--curious .robo-eye--l { width: 6px; height: 7px; }
  .robo-head--curious .robo-eye--r { width: 10px; height: 11px; }
  .robo-head--happy .robo-mouth { width: 14px; height: 7px; border-radius: 0 0 7px 7px; border-bottom-width: 2px; }
  .robo-head--excited .robo-mouth { width: 18px; height: 9px; }
  .robo-head--wow .robo-mouth { width: 12px; height: 12px; }
  .robo-brick { width: 48px; height: 16px; }
  .robo-brick::before {
    top: -5px; left: 3px; right: 3px; height: 5px;
    background:
      radial-gradient(circle at 5px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
      radial-gradient(circle at 16px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
      radial-gradient(circle at 27px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
      radial-gradient(circle at 38px 2.5px, var(--brick-top) 2.5px, transparent 2.5px);
    background-size: 40px 5px; background-repeat: no-repeat;
  }
}

.dash-hero-date { font-size: 0.62rem; color: var(--color-text-tertiary); font-weight: 500; opacity: 0.6; }

/* ——— Progress Ring ——— */
.dash-hero-progress { position: relative; width: 72px; height: 72px; }
.progress-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring-bg {
  fill: none; stroke: var(--color-border); stroke-width: 6;
}
.progress-ring-fill {
  fill: none; stroke: var(--color-primary); stroke-width: 6;
  stroke-linecap: round;
  /* circumference = 2*pi*42 ≈ 263.89 */
  stroke-dasharray: 263.89;
  stroke-dashoffset: 263.89;
  transition: stroke-dashoffset 800ms ease;
}
.progress-ring-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--color-text);
}

/* ——— Application Overview — franceinfo-inspired playful but editorial ——— */
.dash-overview {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-xl);
  gap: 0;
  background: var(--color-surface);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg);
  animation: dashFadeIn 350ms ease 50ms both;
  overflow: hidden;
}
.dash-overview-item {
  padding: 28px 32px 24px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: background var(--transition-base) var(--ease-standard);
  position: relative;
  border: none;
}
.dash-overview-item + .dash-overview-item {
  border-left: 1px solid rgba(0,0,0,.05);
}
.dash-overview-item:hover { background: rgba(0,0,0,.015); }

/* Decorative polka dot background — very subtle, franceinfo-style */
.dash-overview-item::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.12;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: inherit;
  transition: opacity var(--transition-base);
}
/* Four bold, distinct card tints */
.dash-overview-item:nth-child(1) { background: #F0F1EA; }
.dash-overview-item:nth-child(2) { background: #F4F2E4; }
.dash-overview-item:nth-child(3) { background: #EEECF2; }
.dash-overview-item:nth-child(4) { background: #E7EDE5; }
.dash-overview-item {
  animation: cardRise 480ms var(--ease-emphasized) var(--rise-delay, 0ms) both;
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-overview-item:nth-child(1) { --rise-delay: 60ms; }
.dash-overview-item:nth-child(2) { --rise-delay: 150ms; }
.dash-overview-item:nth-child(3) { --rise-delay: 240ms; }
.dash-overview-item:nth-child(4) { --rise-delay: 330ms; }
.dash-overview-item:hover { background: rgba(255,255,255,.5); }

/* Memo-pad grain: lowered opacity so paper texture reads through */
.dash-overview-item:nth-child(1)::before { color: #8E9A72; opacity: 0.10; }
.dash-overview-item:nth-child(2)::before { color: #B8A86A; opacity: 0.10; }
.dash-overview-item:nth-child(3)::before { color: #9A8DB5; opacity: 0.10; }
.dash-overview-item:nth-child(4)::before { color: #8B9E8B; opacity: 0.10; }
.dash-overview-item:hover::before { opacity: 0.20; }

/* LEGO stud accent on overview cards */
.dash-overview-item::after {
  content: '';
  position: absolute; top: 12px; left: 16px; z-index: 1; pointer-events: none;
  width: 9px; height: 8px; border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform 280ms var(--ease-emphasized), opacity var(--transition-base);
}
.dash-overview-item:nth-child(1)::after { color: #8E9A72; }
.dash-overview-item:nth-child(2)::after { color: #C5B57A; }
.dash-overview-item:nth-child(3)::after { color: #9A8DB5; }
.dash-overview-item:nth-child(4)::after { color: #8B9E8B; }
.dash-overview-item:hover::after { transform: scale(1.5); opacity: 0.7; }
.dash-overview-item.dash-metric--active::after { transform: scale(1.5); opacity: 0.7; }

/* Content sits above dots */
.dash-overview-value {
  position: relative; z-index: 1;
  font-size: 1.6rem; font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); line-height: 1.15;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.dash-overview-label {
  position: relative; z-index: 1;
  font-size: 0.74rem; color: var(--color-text-secondary); white-space: nowrap;
  font-weight: 480;
}
.dash-metric-sub {
  position: relative; z-index: 1;
  display: block; font-size: 0.66rem; color: var(--color-text-tertiary); margin-top: 2px;
  font-weight: 400;
}

/* Selected state */
.dash-overview-item.dash-metric--active {
  background: rgba(167,184,92,.06);
}
.dash-overview-item.dash-metric--active::after {
  transform: scale(1.8); opacity: 0.7;
}

@media (max-width: 768px) {
  .dash-overview { grid-template-columns: repeat(2, 1fr); }
  .dash-overview-item:nth-child(3) { border-left: none; }
  .dash-overview-item { padding: 20px 24px 18px; }
  .dash-overview-value { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .dash-overview { grid-template-columns: repeat(2, 1fr); }
  .dash-overview-item { padding: 16px 18px 14px; }
  .dash-overview-value { font-size: 1.15rem; }
}

/* Keep old .dash-metric--active style for the stat card click handler */
.dash-metric--active {
  border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary);
}

/* ——— Map card — same frosted gradient as other cards ——— */
.dash-card--map {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-xl);
  position: relative; overflow: hidden;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  transition:
    transform 280ms var(--ease-emphasized),
    box-shadow 280ms var(--ease-emphasized);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.7) 0%,
      rgba(250,249,244,.9) 40%,
      rgba(245,243,237,.95) 100%);
}
.dash-card--map:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.08);
}
.dash-card--map > * { position: relative; z-index: 1; }
/* Frosted glow overlay */
.dash-card--map::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,195,180,.25) 0%, transparent 50%);
}
.dash-card-title {
  font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

/* ——— Dashboard Grid — Apple Wallet memo-pad style ——— */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  animation: dashFadeIn 350ms ease 100ms both;
}

/* = Base card — frosted memo-pad, unified gradient, push-up hover = */
.dash-card {
  background: var(--color-surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden; position: relative;
  transition:
    transform 280ms var(--ease-emphasized),
    box-shadow 280ms var(--ease-emphasized);
  /* Frosted grain — soft noise overlay */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.7) 0%,
      rgba(250,249,244,.9) 40%,
      rgba(245,243,237,.95) 100%);
}
.dash-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,195,180,.25) 0%, transparent 50%);
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.08);
}
.dash-card > * { position: relative; z-index: 1; }
.dash-card--insights { grid-column: 1 / -1; }

/* ============================================================
   World Map
   ============================================================ */
.map-card-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
  margin-bottom: var(--space-md); flex-wrap: wrap;
}
.map-card-heading .dash-card-title { margin-bottom: 4px; }
.map-card-subtitle { font-size: 0.82rem; color: var(--color-text-secondary); }

/* ——— Deadlines — memo-pad date list ——— */
.dash-deadlines { display: flex; flex-direction: column; gap: 1px; padding-left: 0; }
.dash-deadline-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--font-family); font-size: 0.82rem; color: var(--color-text);
}
.dash-deadline-item:hover {
  background: rgba(0,0,0,.025);
  transform: translateX(2px);
}
.dash-deadline-date {
  flex-shrink: 0; min-width: 52px; font-size: 0.72rem;
  font-weight: 600; color: var(--color-text-tertiary);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dash-deadline-info { flex: 1; min-width: 0; }
.dash-deadline-school {
  font-weight: 580; font-size: 0.82rem; color: var(--color-text-primary);
  line-height: 1.3;
}
.dash-deadline-program {
  font-size: 0.72rem; color: var(--color-text-tertiary);
  display: block; margin-top: 1px;
}
.dash-deadline-days {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 500;
  color: var(--color-text-tertiary);
  padding: 2px 10px; border-radius: 10px;
  background: rgba(0,0,0,.03);
}
.dash-deadline-days--soon {
  color: #A34F47; background: rgba(163,79,71,.07);
}

/* ——— Country Distribution — refined clean rows ——— */
.dash-countries { display: flex; flex-direction: column; gap: 4px; padding-left: 0; }
.dash-country-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; cursor: pointer;
  padding: 4px 6px; border-radius: 8px;
  transition: background var(--transition-fast), transform var(--transition-fast);
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--font-family); color: var(--color-text);
}
.dash-country-row:hover { background: rgba(0,0,0,.025); transform: translateX(2px); }
.dash-country-name {
  width: 130px; flex-shrink: 0; font-weight: 520; font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-primary);
}
.dash-country-count {
  width: 32px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums; font-size: 0.72rem;
  color: var(--color-text-tertiary); font-weight: 500;
  font-family: var(--font-mono);
}
.dash-country-bar-wrap {
  flex: 1; height: 4px; background: rgba(0,0,0,.04); border-radius: 2px; overflow: hidden;
}
.dash-country-bar {
  height: 100%; background: var(--color-accent); border-radius: 2px;
  opacity: 0.55; transition: width 400ms ease;
}

/* ——— Insights — airy editorial notes ——— */
.dash-insights { display: flex; flex-direction: column; gap: 2px; padding-left: 0; counter-reset: insight-counter; }
.dash-insight {
  counter-increment: insight-counter;
  position: relative; padding-left: 28px;
  font-size: 0.78rem; color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(0,0,0,.04);
  line-height: 1.55; transition: background var(--transition-fast); border-radius: 6px;
}
.dash-insight::before {
  content: '0' counter(insight-counter);
  position: absolute; left: 0; top: 0;
  font-size: 11px; font-weight: 600;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dash-insight:hover { background: rgba(0,0,0,.015); }
.dash-insight:last-child { border-bottom: none; }

/* ——— Empty state ——— */
.dash-empty { font-size: 0.82rem; color: var(--color-text-muted); padding: var(--space-sm) 0; }

/* Country distribution editorial numbering */
.dash-country-row { position: relative; padding-left: 28px; }
.dash-country-row::before {
  counter-increment: country-counter;
  content: '0' counter(country-counter);
  position: absolute; left: 6px; top: 5px;
  font-size: 9px; font-weight: 600;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; opacity: 0.6;
}
.dash-countries { counter-reset: country-counter; }

/* Editorial date display */
.editorial-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: flex; flex-direction: column; align-items: center;
  width: 48px; flex-shrink: 0;
}
.editorial-date-day {
  font-size: 1.1rem; font-weight: 650; line-height: 1;
  color: var(--color-text-primary);
}
.editorial-date-month {
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

/* Deadline timeline with path drawing */
.timeline-line {
  position: relative; padding-left: 28px;
}
.timeline-line::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 1px; background: var(--color-border-strong);
  transform-origin: top;
}
.timeline-line--animated::before {
  animation: timelineDraw 600ms var(--ease-emphasized) forwards;
  transform: scaleY(0);
}
@keyframes timelineDraw { to { transform: scaleY(1); } }

.timeline-node {
  position: relative; padding: var(--space-sm) 0;
}
.timeline-node::before {
  content: ''; position: absolute; left: -24px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.motion-ready .timeline-node::before { opacity: 1; }
.timeline-node--soon::before {
  background: var(--color-accent); border-color: var(--color-accent);
  width: 8px; height: 8px; left: -24.5px; top: 13.5px;
}
.timeline-node:nth-child(1)::before { transition-delay: 100ms; }
.timeline-node:nth-child(2)::before { transition-delay: 160ms; }
.timeline-node:nth-child(3)::before { transition-delay: 220ms; }
.timeline-node:nth-child(4)::before { transition-delay: 280ms; }
.timeline-node:nth-child(5)::before { transition-delay: 340ms; }

/* Map toolbar */
.map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.map-search-wrap { position: relative; }
.map-search-input {
  width: 200px; padding: 6px 10px; font-size: 0.78rem; font-family: var(--font-family);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-primary); outline: none;
}
.map-search-input:focus { border-color: var(--color-accent); }
.map-search-input::placeholder { color: var(--color-text-tertiary); }
.map-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); max-height: 200px; overflow-y: auto;
  box-shadow: var(--shadow-md); margin-top: 2px;
}
.map-search-result-item {
  padding: 6px 10px; font-size: 0.8rem; cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  background: none; border-left: none; border-right: none;
  width: 100%; text-align: left; font-family: var(--font-family);
}
.map-search-result-item:last-child { border-bottom: none; }
.map-search-result-item:hover { background: var(--color-surface-subtle); }
.map-search-result-empty {
  padding: 8px 10px; font-size: 0.78rem; color: var(--color-text-tertiary);
  text-align: center;
}

/* Region buttons */
.map-regions { display: flex; flex-wrap: wrap; gap: 4px; }
.map-region-btn {
  padding: 4px 10px; font-size: 0.72rem; font-family: var(--font-family);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-secondary);
  cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
}
.map-region-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.map-region-btn--reset { font-weight: var(--font-weight-medium); }

.map-card-count {
  flex-shrink: 0; padding: 5px 10px; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface-subtle);
  font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap;
}

@media (max-width: 768px) {
  .map-tools { width: 100%; }
  .map-search-input { width: 100%; }
  .map-regions { width: 100%; }
}

.map-layout {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); gap: var(--space-xl);
  align-items: stretch;
}
.map-svg-wrap {
  position: relative; min-width: 0; border-radius: var(--radius-md); overflow: hidden;
}
#applicationWorldMap { width: 100%; height: 340px; min-height: 340px; transition: height .35s ease; }
/* Compact: hide ALL map content below header */
.dash-card--map--compact .map-layout { display: none; }
.dash-card--map--compact .map-tools { display: none; }
.dash-card--map--compact .map-regions { display: none; }
.dash-card--map--compact .map-country-tabs { display: none; }
.map-country-tab { padding: 4px 10px; font-size: 0.68rem; font-weight: 520; font-family: var(--font-family); cursor: pointer; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-secondary); white-space: nowrap; transition: all .15s; }
.map-country-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.map-country-tab--active { background: var(--color-accent); color: #FFF; border-color: var(--color-accent); }
.dash-card--map--compact .map-card-subtitle { display: none; }

.map-toggle-btn {
  margin-left: auto; padding: 3px 12px;
  font-size: 0.68rem; font-weight: 520; font-family: var(--font-family);
  cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-tertiary);
  transition: all .15s;
}
.map-toggle-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Map country paths */
#map-countries path {
  transition: fill 240ms var(--ease-standard), stroke 160ms var(--ease-standard);
  cursor: default;
  vector-effect: non-scaling-stroke;
  outline: none;
}
#map-countries path[data-has-projects="true"] {
  cursor: pointer;
}
#map-countries path[data-has-projects="true"]:hover,
#map-countries path[data-has-projects="true"]:focus-visible {
  filter: brightness(1.06);
  stroke-width: 1.5;
  stroke: var(--color-text-primary);
  outline: none;
}
#map-countries path[data-has-projects="true"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* jsVectorMap overrides */
.jvm-container { background: transparent !important; }
.jvm-tip { background: var(--color-text-primary) !important; color: var(--color-surface) !important; border-radius: var(--radius-sm) !important; padding: 8px 12px !important; font-size: 0.78rem !important; line-height: 1.5 !important; font-family: var(--font-family) !important; border: none !important; box-shadow: var(--shadow-md) !important; }
.jvm-zoom-btn { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; color: var(--color-text-primary) !important; width: 30px !important; height: 30px !important; font-size: 0.9rem !important; line-height: 28px !important; border-radius: 6px !important; position: absolute !important; }
.jvm-zoomin  { top: 10px !important; left: auto !important; right: 10px !important; }
.jvm-zoomout { top: 46px !important; left: auto !important; right: 10px !important; }
.jvm-zoom-btn:hover { background: var(--color-surface-subtle) !important; }

/* Per-country hover — lightweight */
.jvm-region {
  transition: fill 160ms ease, stroke 120ms ease;
  cursor: default;
}
.jvm-region:hover {
  stroke: var(--color-text-primary);
  stroke-width: 1.05;
  cursor: pointer;
}

/* Custom markers — elegant rings rather than ugly solid dots */
.jvm-marker {
  transition: r 200ms var(--ease-emphasized),
              opacity 200ms var(--ease-emphasized);
  cursor: pointer;
}

/* Map sidebar */
.map-sidebar {
  display: flex; flex-direction: column; min-height: 520px; padding: var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.78); font-size: 0.82rem;
}
.map-selected { margin-bottom: var(--space-md); }
.map-selected-title { font-weight: var(--font-weight-semibold); font-size: 1.1rem; color: var(--color-text-primary); margin-bottom: 3px; }
.map-selected-sub { font-size: 0.78rem; color: var(--color-text-tertiary); margin-bottom: var(--space-sm); }
.map-selected-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-sm); }
.map-selected-item {
  display: flex; align-items: center; gap: var(--space-sm); padding: 9px 7px;
  border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.78rem;
  cursor: pointer; transition: background var(--transition-fast); border-top: none; border-left: none; border-right: none; background: none; width: 100%; text-align: left; font-family: var(--font-family);
}
.map-selected-item:hover { background: var(--color-surface-subtle); }
.map-selected-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Map legend */
.map-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: auto; margin-bottom: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.map-legend-title { font-size: 0.72rem; font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--color-text-secondary); }
.map-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Unmapped locations */
.map-unmapped { font-size: 0.72rem; color: var(--color-text-tertiary); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.map-unmapped-toggle { cursor: pointer; color: var(--color-accent); font-weight: var(--font-weight-medium); border: none; background: none; font-family: var(--font-family); font-size: 0.72rem; }
.map-unmapped-list { margin-top: 4px; display: none; }
.map-unmapped-list--open { display: block; }


/* ============================================================
   响应式设计 — Dashboard
   ============================================================ */
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card--insights { grid-column: auto; }
  .map-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-md); }
  #applicationWorldMap { height: 280px; min-height: 280px; }
  .map-sidebar { min-height: 440px; padding: var(--space-md); }
}
@media (max-width: 768px) {
  .dash-hero-inner {
    flex-direction: column; gap: var(--space-md); padding: var(--space-lg);
  }
  .dash-hero-main { flex-direction: column; align-items: flex-start; }
  .dash-hero-right { flex-direction: row; align-items: center; gap: var(--space-md); width: 100%; justify-content: flex-start; }
  .path-nodes, .path-label { display: none; }
  .dash-hero-progress { width: 56px; height: 56px; }
  .dash-card--map { padding: var(--space-md); }
  .map-layout { grid-template-columns: 1fr; }
  #applicationWorldMap { height: 240px; min-height: 240px; }
  .map-sidebar { min-height: 0; font-size: 0.72rem; }
  .progress-ring-text { font-size: 0.75rem; }
  .hero-bg-block--highlight { display: none; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card--insights { grid-column: auto; }
  .dash-country-name { width: 100px; }
}

/* ============================================================
   响应式设计
   ============================================================ */
@media (max-width: 1024px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .stats-row--secondary { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.5rem; }
  .material-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .header-inner { height: 52px; }
  .header-title { font-size: 1rem; }
  .header-icon { font-size: 1.2rem; }

  /* 欢迎区域 */
  .welcome-card { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); }
  .welcome-left { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .welcome-title { font-size: 1.2rem; }

  /* 统计卡片 */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .stats-row--secondary { grid-template-columns: 1fr; }
  .stat-card { padding: var(--space-md); gap: var(--space-sm); }
  .stat-icon { font-size: 1.4rem; }
  .stat-value { font-size: 1.4rem; }

  .project-table { font-size: 0.82rem; }
  .project-table th, .project-table td { padding: var(--space-sm); }

  .empty-state { min-height: 280px; padding: var(--space-xl) var(--space-md); }

  /* 弹窗手机端全屏 */
  .modal-overlay { padding: 0; }
  .modal--form { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; transform: translateY(20px); }
  .modal--small { max-width: 90%; height: auto; max-height: 85vh; border-radius: var(--radius-lg); margin: auto; }
  .form-row--two { grid-template-columns: 1fr; }

  /* 工具栏手机端 */
  .toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .toolbar-left { flex-wrap: wrap; }
  .toolbar-right { justify-content: flex-end; }
  .search-box { max-width: none; flex: 1; }
  .sort-select-wrapper { flex-shrink: 1; }
  .sort-select { min-width: 130px; }

  /* 筛选面板手机端 */
  .filter-row { grid-template-columns: 1fr; }
  .filter-panel-footer { display: flex; }

  /* 抽屉手机端全屏 */
  .drawer { max-width: 100%; }
  .material-grid { grid-template-columns: 1fr; }

  /* Toast 底部居中 */
  .toast-container {
    top: auto; bottom: var(--space-lg); right: var(--space-md); left: var(--space-md);
    max-width: none; align-items: center;
  }
}

/* ============================================================
   手机端 (≤480px) — 全面适配
   ============================================================ */
@media (max-width: 480px) {

  /* --- Container --- */
  .container { padding: 0 12px; }
  .main { padding: var(--space-md) 0 var(--space-lg); }

  /* --- Header --- */
  .header-inner { height: 48px; gap: 6px; }
  .header-brand { gap: 8px; }
  .header-avatar { width: 28px; height: 28px; }
  .header-avatar-initials { font-size: 0.7rem; }
  .header-title { font-size: 0.82rem; }
  .header-edit-btn { padding: 2px 6px; font-size: 0; gap: 0; }
  .header-edit-btn svg { width: 12px; height: 12px; }
  .header-actions { gap: 2px; }
  .header-actions .btn { padding: 4px 8px; font-size: 0.68rem; }
  .lang-toggle { padding: 4px 8px; font-size: 0.65rem; }

  /* --- Hero --- */
  .dash-hero { margin-bottom: var(--space-md); }
  .dash-hero-inner {
    flex-direction: column; gap: var(--space-lg);
    padding: var(--space-lg) var(--space-md);
  }
  .dash-hero-greeting { margin-bottom: 16px; font-size: 0.56rem; }
  .dash-hero-display {
    padding: 10px 20px 14px;
    border-radius: var(--radius-md);
  }
  .dash-hero-display::before {
    top: -6px; left: 10px; right: 10px; height: 6px;
    background:
      radial-gradient(circle at 8px 3px,  var(--color-surface) 3px, transparent 3px),
      radial-gradient(circle at 22px 3px, var(--color-surface) 3px, transparent 3px),
      radial-gradient(circle at 36px 3px, var(--color-surface) 3px, transparent 3px),
      radial-gradient(circle at 50px 3px, var(--color-surface) 3px, transparent 3px);
  }
  .dash-hero-display::after {
    top: -6px; left: 10px; right: 10px; height: 6px;
    background:
      radial-gradient(circle at 8px 3px,  var(--color-border-strong) 4px, transparent 4px),
      radial-gradient(circle at 22px 3px, var(--color-border-strong) 4px, transparent 4px),
      radial-gradient(circle at 36px 3px, var(--color-border-strong) 4px, transparent 4px),
      radial-gradient(circle at 50px 3px, var(--color-border-strong) 4px, transparent 4px);
  }
  .hero-progress-number { font-size: 2.8rem; }
  .hero-progress-symbol { font-size: 1.2rem; }
  .dash-hero-subtitle { font-size: 0.78rem; margin-top: 10px; max-width: 100%; }
  .dash-hero-date { font-size: 0.58rem !important; }

  .dash-hero-right { width: 100%; justify-content: center; }
  .hero-puzzle { gap: 6px; }
  .puzzle-scene { width: 70px; min-height: 130px; }
  .puzzle-shadow { width: 50px; height: 6px; }
  .robo-head { width: 52px; height: 42px; border-radius: 7px 7px 4px 4px; box-shadow: inset 0 1px 3px rgba(255,255,255,.5), 0 2px 0 #C07818, 0 3px 6px rgba(160,100,30,.15); }
  .robo-head:hover { transform: none; }
  .robo-stud { top: -7px; width: 10px; height: 7px; }
  .robo-stud:first-of-type { left: 9px; }
  .robo-stud--r { right: 9px; }
  .robo-face { top: 10px; left: 5px; right: 5px; bottom: 5px; gap: 4px; }
  .robo-eye { width: 7px; height: 8px; }
  .robo-eye::after { width: 2.5px; height: 2.5px; top: 1px; right: 1px; }
  .robo-eyes { gap: 10px; }
  .robo-head--excited .robo-eye { width: 10px; height: 10px; }
  .robo-head--wow .robo-eye { width: 11px; height: 11px; }
  .robo-head--curious .robo-eye--l { width: 6px; height: 7px; }
  .robo-head--curious .robo-eye--r { width: 9px; height: 10px; }
  .robo-head--curious .robo-eyes { gap: 8px; }
  .robo-head--happy .robo-mouth { width: 12px; height: 6px; border-radius: 0 0 6px 6px; border-bottom-width: 2px; }
  .robo-head--excited .robo-mouth { width: 16px; height: 8px; border-radius: 2px 2px 7px 7px; }
  .robo-head--wow .robo-mouth { width: 10px; height: 10px; }
  .robo-head--excited .robo-mouth::after { top: 2px; left: 3px; right: 3px; height: 1.5px; }
  .robo-body-stack { margin-top: -1px; }
  .robo-brick { width: 38px; height: 14px; }
  .robo-brick::before {
    top: -4px; left: 3px; right: 3px; height: 4px;
    background:
      radial-gradient(circle at 5px 2px, var(--brick-top) 2px, transparent 2px),
      radial-gradient(circle at 13px 2px, var(--brick-top) 2px, transparent 2px),
      radial-gradient(circle at 21px 2px, var(--brick-top) 2px, transparent 2px),
      radial-gradient(circle at 29px 2px, var(--brick-top) 2px, transparent 2px);
    background-size: 32px 4px; background-repeat: no-repeat;
  }
  .puzzle-caption { font-size: 0.62rem; max-width: 110px; }

  /* --- Overview metrics --- */
  .dash-overview { grid-template-columns: repeat(2, 1fr); }
  .dash-overview-item { padding: 18px 16px 14px; }
  .dash-overview-item:nth-child(3) { border-left: none; }
  .dash-overview-value { font-size: 1.2rem; }
  .dash-overview-label { font-size: 0.68rem; }
  .dash-overview-item::after { top: 10px; left: 12px; width: 6px; height: 6px; }

  /* --- Map card --- */
  .dash-card--map { padding: var(--space-md); }
  .map-card-heading { flex-direction: column; gap: var(--space-sm); }
  .map-card-subtitle { font-size: 0.72rem; }
  .map-card-count { display: none; }
  .map-tools { width: 100%; flex-direction: column; }
  .map-search-input { width: 100%; }
  .map-regions { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .map-region-btn { flex-shrink: 0; font-size: 0.68rem; padding: 3px 8px; }
  .map-layout { grid-template-columns: 1fr; gap: var(--space-sm); }
  #applicationWorldMap { height: 180px; min-height: 180px; }
  .map-sidebar { min-height: 0; padding: var(--space-md); font-size: 0.75rem; }
  .map-selected-title { font-size: 1rem; }
  .map-legend { gap: 4px 8px; }
  .map-legend-item { font-size: 0.66rem; }
  .map-legend-item i { width: 8px; height: 8px; }

  /* --- Dashboard grid --- */
  .dash-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .dash-card { padding: var(--space-md); }
  .dash-card::before { top: 8px; width: 40px; height: 6px; }
  .dash-card--overview { grid-column: auto; grid-row: auto; }
  .dash-card-title { font-size: 0.62rem; margin-bottom: 10px; }
  .section-eyebrow-num { font-size: 0.7rem; }
  .dash-country-name { width: 80px; font-size: 0.74rem; }
  .dash-country-row { padding-left: 22px; }
  .dash-country-bar-wrap { height: 3px; }
  .dash-deadline-item { padding: 6px 8px; }
  .dash-deadline-school { font-size: 0.76rem; }
  .dash-deadline-program { font-size: 0.68rem; }
  .dash-deadline-date { min-width: 44px; font-size: 0.66rem; }
  .dash-deadline-days { font-size: 0.64rem; padding: 1px 7px; }
  .editorial-date { width: 38px; }
  .editorial-date-day { font-size: 0.95rem; }
  .editorial-date-month { font-size: 7px; }
  .dash-insight { font-size: 0.7rem; padding-left: 22px; }



  /* --- Search & toolbar --- */
  .toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .toolbar-left { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
  .search-box { max-width: none; flex: 1; min-width: 0; grid-column: 1 / -1; }
  .sort-select-wrapper { flex-shrink: 1; }
  .sort-select { min-width: 100px; font-size: 0.72rem; }
  .toolbar-right { justify-content: flex-end; }
  /* Hide filter label text on mobile — show icon only */
  #btn-toggle-filters span, #btn-toggle-filters { font-size: 0; }
  #btn-toggle-filters .icon { margin: 0; width: 15px; height: 15px; }
  #btn-toggle-filters { padding: 6px 8px; }

  /* --- Quick filters --- */
  .quick-filter-btn { font-size: 0.66rem; padding: 2px 7px; }
  .active-bar { gap: 3px; flex-wrap: wrap; }
  .active-tag { font-size: 0.64rem; padding: 2px 6px; }
  .result-count { font-size: 0.66rem; white-space: nowrap; }

  /* --- Filter panel --- */
  .filter-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .filter-panel-footer { display: flex; }
  .filter-select { font-size: 0.75rem; }

  /* --- Project table --- */
  .project-list-section { border-width: 3px; }
  .project-table { font-size: 0.74rem; }
  .project-table th, .project-table td { padding: 6px 4px; }
  .project-table th { font-size: 0.66rem; letter-spacing: 0.03em; }
  .status-badge { font-size: 0.66rem; padding: 2px 6px; }
  .urgency-tag { font-size: 0.66rem; padding: 2px 6px; }
  .example-tag { font-size: 0.6rem; padding: 1px 4px; }
  .deadline-text { font-size: 0.72rem; }
  .th-actions, .td-actions { width: 60px; }
  .btn-icon { width: 26px; height: 26px; font-size: 0.75rem; }
  .table-wrapper {
    background-size: 14px 14px;
    background-position: 7px 7px;
  }

  /* --- Empty state --- */
  .empty-state { min-height: 240px; padding: var(--space-xl) var(--space-md); }
  .empty-state-title { font-size: 1rem; }
  .empty-state-desc { font-size: 0.8rem; }
  .empty-brick { width: 32px; height: 12px; }
  .empty-brick::before {
    top: -3px; left: 3px; right: 3px; height: 3px;
    background:
      radial-gradient(circle at 3px 1.5px, var(--eb-color) 1.5px, transparent 1.5px),
      radial-gradient(circle at 10px 1.5px, var(--eb-color) 1.5px, transparent 1.5px),
      radial-gradient(circle at 18px 1.5px, var(--eb-color) 1.5px, transparent 1.5px),
      radial-gradient(circle at 25px 1.5px, var(--eb-color) 1.5px, transparent 1.5px);
  }

  /* --- Modals --- */
  .modal-overlay { padding: 0; }
  .modal--form { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; transform: translateY(20px); }
  .modal--small { max-width: 92%; height: auto; max-height: 85vh; border-radius: var(--radius-lg); margin: auto; }
  .modal-header { padding: var(--space-md); }
  .modal-title { font-size: 0.95rem; }
  .modal-body { padding: var(--space-md); }
  .modal-footer { padding: var(--space-sm) var(--space-md); }
  .form-row--two { grid-template-columns: 1fr; }
  .form-label { font-size: 0.75rem; }
  .form-input { font-size: 0.82rem; padding: 7px 10px; }
  .form-textarea { min-height: 60px; }
  .material-item { padding: var(--space-xs) var(--space-sm); }
  .material-item-label { font-size: 0.73rem; }
  .material-segment-btn { padding: 2px 6px; font-size: 0.62rem; }
  .form-progress-text { font-size: 0.7rem; }

  /* --- Drawer --- */
  .drawer { max-width: 100%; }
  .detail-label { font-size: 0.7rem; min-width: 60px; }
  .detail-value { font-size: 0.75rem; }
  .detail-text-block { font-size: 0.75rem; }

  /* --- Profile modal --- */
  .profile-avatar-edit { flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; }
  .profile-avatar-preview { width: 64px; height: 64px; }
  .profile-avatar-actions { align-items: center; }

  /* --- Export center --- */
  #csv-field-choices { grid-template-columns: 1fr; }
  .csv-preview-table { font-size: 0.65rem; }
  .data-section { padding: var(--space-sm) 0; }
  .data-section-title { font-size: 0.82rem; }

  /* --- Toast --- */
  .toast-container {
    top: auto; bottom: 12px; right: 8px; left: 8px;
    max-width: none; align-items: center;
  }
  .toast-item { font-size: 0.78rem; padding: 10px 14px; }

  /* --- Progress bar (LEGO brick train) --- */
  .progress-bar { height: 10px; gap: 2px; }
  .progress-bar__fill { height: 10px; min-width: 8px; }
  .progress-bar__fill::after {
    top: -4px; left: 2px; right: 2px; height: 4px;
    background:
      radial-gradient(circle at 3px 2px, var(--color-accent) 2px, transparent 2px),
      radial-gradient(circle at 9px 2px, var(--color-accent) 2px, transparent 2px);
  }

  /* --- Footer --- */
  .footer-text { font-size: 0.65rem; }

  /* --- LEGO-specific: stat cards --- */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  .stats-row--secondary { grid-template-columns: 1fr; }
  .stat-card { padding: var(--space-sm); }
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.75rem; }
  .stat-icon { font-size: 1.2rem; }
  .welcome-card { padding: var(--space-md); }

  /* --- Splash mobile --- */
  .splash-overlay { padding: var(--space-md); }
  .splash-card { padding: 32px 20px 24px; border-radius: var(--radius-lg); box-shadow: 0 4px 0 var(--color-border-strong), 0 6px 16px rgba(0,0,0,.06); }
  .splash-title { font-size: 1.1rem; }
  .splash-sub { font-size: 0.75rem; margin-bottom: 20px; }
  .splash-icon { margin-bottom: 14px; }
  .splash-icon svg { width: 50px; height: 32px; }
  .splash-card { max-width: 90%; padding: 24px 16px 20px; }
  .splash-row-two { grid-template-columns: 1fr; gap: 8px; }
  .splash-input { font-size: 0.84rem; padding: 10px 12px; }
  .splash-btn { padding: 11px; font-size: 0.85rem; }
  .splash-float-brick { width: 32px; height: 12px; }
  .splash-float-brick::before {
    top: -4px; left: 2px; right: 2px; height: 4px;
    background:
      radial-gradient(circle at 4px 2px, currentColor 2px, transparent 2px),
      radial-gradient(circle at 11px 2px, currentColor 2px, transparent 2px),
      radial-gradient(circle at 18px 2px, currentColor 2px, transparent 2px),
      radial-gradient(circle at 25px 2px, currentColor 2px, transparent 2px);
    background-size: 28px 4px; background-repeat: no-repeat;
  }
}


/* Strategy tier badges */
.strategy-badge {
  display: inline-block; font-size: 0.64rem; font-weight: 520;
  padding: 1px 7px; border-radius: var(--radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}
.strategy-badge--reach { background: #FDE8E8; color: #9B1C1C; border-color: #F8D4D4; }
.strategy-badge--target { background: #E1EFFE; color: #1E429F; border-color: #C3DDFD; }
.strategy-badge--safety { background: #DEF7EC; color: #03543F; border-color: #BCF0DA; }

/* Material readiness inline */
.mat-readiness {
  font-size: 0.72rem; font-weight: 440; color: var(--color-text-tertiary);
  margin-left: auto;
}
.mat-readiness-bar {
  display: inline-block; width: 40px; height: 5px;
  background: var(--color-border); border-radius: 3px;
  vertical-align: middle; margin: 0 6px;
  overflow: hidden;
}
.mat-readiness-bar-fill {
  height: 100%; background: var(--color-accent);
  border-radius: 3px; transition: width .3s ease;
}

.toast-item-action {
  flex-shrink: 0; cursor: pointer; background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius-sm);
  color: #FFF; font-size: 0.78rem; font-weight: 550;
  padding: 3px 10px; margin: 0 4px;
  transition: background .15s;
}
.toast-item-action:hover { background: rgba(255,255,255,.4); }


@media (max-width: 480px) {
  .brick-tl-item { padding: var(--space-xs) 0 var(--space-xs) var(--space-md); }
  .brick-tl-marker { width: 10px; height: 9px; left: -4px; top: 10px; }
  .brick-tl-marker::before { top: -2px; left: 1px; right: 1px; height: 2px; }
  .brick-tl-school { font-size: 0.74rem; }
  .brick-tl-program { font-size: 0.66rem; }
  .brick-tl-date { font-size: 0.66rem; }
}

/* ——— Next Actions ——— */
.next-actions-list { display: flex; flex-direction: column; gap: 2px; }
.na-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-family); font-size: 0.82rem; color: var(--color-text); transition: background .15s; }
.na-item:hover { background: rgba(0,0,0,.025); }
.na-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.na-indicator--urgent { background: #E84050; }
.na-indicator--ready { background: #60C878; }
.na-indicator--attention { background: #F5B840; }
.na-body { flex: 1; min-width: 0; }
.na-school { font-weight: 580; font-size: 0.8rem; color: var(--color-text-primary); }
.na-msg { font-size: 0.68rem; color: var(--color-text-tertiary); display: block; }
.na-meta { flex-shrink: 0; text-align: right; }
.na-days { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary); }
.na-days--urgent { color: #A34F47; font-weight: 550; }
@media (max-width: 480px) { .na-item { padding: 8px; gap: 8px; } .na-school { font-size: 0.74rem; } }

/* ——— Body brick stack ——— */
.robo-body-stack {
  position: relative; z-index: 1;
  display: flex; flex-direction: column-reverse;
  align-items: center; gap: 0;
  margin-top: -2px;
}

.robo-brick {
  position: relative;
  width: 60px; height: 20px;
  border-radius: 3px;
  box-shadow:
    0 2px 0 var(--brick-shadow, rgba(0,0,0,.08)),
    0 3px 8px rgba(0,0,0,.04);
  animation: brickPop .4s var(--ease-emphasized) both;
}
@keyframes brickPop {
  from { opacity: 0; transform: translateY(-10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.robo-brick::after {
  content: '';
  position: absolute; top: 1px; left: 4px; right: 4px;
  height: 1.5px; background: rgba(255,255,255,.45);
  border-radius: 1px;
}

.robo-brick::before {
  content: '';
  position: absolute; top: -5px; left: 5px; right: 5px;
  height: 5px;
  background:
    radial-gradient(circle at 7px 2.5px,  var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 21px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 35px 2.5px, var(--brick-top) 2.5px, transparent 2.5px),
    radial-gradient(circle at 49px 2.5px, var(--brick-top) 2.5px, transparent 2.5px);
  background-size: 50px 5px; background-repeat: no-repeat;
}

.robo-brick:nth-child(1)  { transform: rotate(0deg); }
.robo-brick:nth-child(2)  { transform: rotate(.8deg); animation-delay: .06s; }
.robo-brick:nth-child(3)  { transform: rotate(-.6deg); animation-delay: .10s; }
.robo-brick:nth-child(4)  { transform: rotate(.5deg); animation-delay: .14s; }
.robo-brick:nth-child(5)  { transform: rotate(-.4deg); animation-delay: .18s; }
.robo-brick:nth-child(6)  { transform: rotate(.6deg); animation-delay: .22s; }
.robo-brick:nth-child(7)  { transform: rotate(-.3deg); animation-delay: .26s; }
.robo-brick:nth-child(8)  { transform: rotate(.4deg); animation-delay: .30s; }

.robo-brick--red {
  background: linear-gradient(180deg, #F06068 0%, #E84050 45%, #CC2838 100%);
  --brick-top: #F06068; --brick-shadow: #A82030;
}
.robo-brick--blue {
  background: linear-gradient(180deg, #5EB8F0 0%, #3098D8 45%, #1880C0 100%);
  --brick-top: #5EB8F0; --brick-shadow: #1068A0;
}
.robo-brick--green {
  background: linear-gradient(180deg, #60C878 0%, #38A850 45%, #209038 100%);
  --brick-top: #60C878; --brick-shadow: #187828;
}
.robo-brick--orange {
  background: linear-gradient(180deg, #F8A858 0%, #F08830 45%, #D87018 100%);
  --brick-top: #F8A858; --brick-shadow: #B85C10;
}
.robo-brick--purple {
  background: linear-gradient(180deg, #A870E0 0%, #8858C8 45%, #7040B0 100%);
  --brick-top: #A870E0; --brick-shadow: #583090;
}

.robo-brick--ghost {
  background: transparent;
  border: 1.5px dashed var(--color-border-strong);
  box-shadow: none;
  opacity: .45;
  animation: ghostPulse 2.4s ease-in-out infinite;
}
.robo-brick--ghost::before,
.robo-brick--ghost::after { opacity: .2; }
@keyframes ghostPulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: .55; }
}

@media (max-width: 768px) { .robo-brick { width: 48px; height: 16px; } }
@media (max-width: 480px) { .robo-brick { width: 38px; height: 14px; } }

/* Phase 8 — PWA + Mobile Polish */

/* Bricky tooltip — cap width for long tips */
/* Bricky tooltip — nowrap kept, positioned well above head */
.bricky-tooltip { max-width: 180px; white-space: nowrap; top: -36px; }

/* Map heading — tighter flex gap on tablet */
@media (max-width: 768px) {
  .map-card-heading { flex-direction: column; gap: 4px; align-items: flex-start; }
  .map-card-heading .map-toggle-btn { margin-left: 0; align-self: flex-end; }
}

/* Table — native momentum scroll */
.table-wrapper { -webkit-overflow-scrolling: touch; }

/* Empty state CTA tap target */
.empty-state .btn-primary { min-height: 44px; }

/* Close button larger touch target on mobile */
@media (max-width: 480px) {
  .modal-close { width: 40px; height: 40px; font-size: 1.5rem; }
  .drawer .modal-close { width: 36px; height: 36px; }
}

/* ——— Import from Link review ——— */
/*
 * Review results can be much taller than the viewport.  Keep the modal shell
 * bounded, make the three direct children (header / body / footer) explicit
 * grid rows, and let the BODY own vertical scrolling.  This avoids the old
 * nested flex-scroll chain where .modal-body was overflow:hidden and the
 * inner .import-review-scroll could fail to receive a constrained height.
 */
#modal-import-link {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}
#modal-import-link.modal-import-link--review {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#modal-import-link.modal-import-link--review .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#import-step-review {
  min-height: 0;
  display: none;
}
#modal-import-link.modal-import-link--review #import-step-review {
  display: block;
}
.import-review-intro {
  font-size: 0.74rem;
  color: var(--color-text-tertiary);
  margin: 0 0 12px;
}
/* Body is the single vertical scroll owner; this wrapper must not create a
   competing nested scroll area. */
.import-review-scroll {
  min-height: 0;
  overflow: visible;
}
.import-review-footer {
  gap: 8px;
}
.import-review-footer .btn-primary {
  flex: 1;
}
.import-review-fields { display: flex; flex-direction: column; gap: 8px; }
.import-review-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: #FAFBFC; border: 1px solid var(--color-border); }
.import-review-icon { font-size: 0.9rem; flex-shrink: 0; width: 20px; text-align: center; }
.import-review-icon--ok { color: #60C878; }
.import-review-icon--warn { color: #F5B840; }
.import-review-icon--miss { color: var(--color-text-tertiary); }
.import-review-content { flex: 1; min-width: 0; }
.import-review-label { font-size: 0.65rem; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.import-review-value { font-size: 0.78rem; color: var(--color-text-primary); word-break: break-word; overflow-wrap: anywhere; }
.import-review-value--editable { border-bottom: 1px dashed var(--color-border-strong); cursor: text; }
.import-review-source { font-size: 0.62rem; color: var(--color-text-tertiary); margin-top: 2px; overflow-wrap: anywhere; }
.import-review-deadlines { margin-top: 4px; }
.import-review-dl-option { display: flex; align-items: center; gap: 6px; padding: 4px 6px; cursor: pointer; border-radius: 4px; transition: background .15s; }
.import-review-dl-option:hover { background: rgba(0,0,0,.03); }
.import-review-dl-option input[type="radio"] { margin: 0; }
.import-review-dl-label { font-size: 0.74rem; color: var(--color-text-primary); }


/* Import review viewport safety on very small screens */
@media (max-width: 480px) {
  #modal-import-link {
    max-width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* ============================================================
   UX ONBOARDING + WORKSPACE HIERARCHY V2 (2026-08-15)
   Product-first: original Offerland UI, less dashboard noise.
   ============================================================ */
.ux-product-tag {
  display: inline-flex; align-items: center; margin-left: 2px; padding: 2px 7px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  color: var(--color-text-tertiary); background: rgba(255,255,255,.42);
  font-size: .62rem; font-weight: 520; letter-spacing: .01em; white-space: nowrap;
}
.header-brand { flex-wrap: wrap; }
.header-title + .ux-product-tag { margin-right: 4px; }
.ux-hero-productline {
  margin: 11px 0 3px; color: var(--color-text-primary);
  font-size: .8rem; font-weight: 580; letter-spacing: -.01em;
}
.ux-onboarding-enabled .dash-hero-inner { gap: 44px; padding: 40px 48px; align-items: center; }
.ux-onboarding-enabled .dash-hero-right { min-width: 128px; padding-top: 4px; }
.ux-onboarding-enabled .hero-puzzle { transform: scale(.9); transform-origin: center center; }

/* One visible import entry. The old toolbar button remains in the DOM so the
   existing import modal/logic can still be triggered programmatically. */
.ux-onboarding-enabled #btn-import-link { display: none !important; }

/* Quick Start — same warm frosted memo-card language as the existing dashboard. */
.ux-quickstart {
  display: grid; grid-template-columns: minmax(210px,.68fr) minmax(430px,1.32fr);
  align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg);
  padding: 16px 20px; overflow: visible;
}
.ux-quickstart-copy { min-width: 0; }
.ux-quickstart-eyebrow {
  display: block; margin-bottom: 3px; color: var(--color-text-tertiary);
  font-size: .61rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.ux-quickstart-title {
  display: inline-block; margin-right: 8px; color: var(--color-text-primary);
  font-size: .88rem; font-weight: 620;
}
.ux-quickstart-desc {
  display: block; margin-top: 3px; color: var(--color-text-secondary);
  font-size: .7rem; line-height: 1.4;
}
.ux-quickstart-action {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center; gap: 7px; min-width: 0;
}
.ux-import-url { min-width: 0; width: 100%; height: 36px; font-size: .74rem; }
.ux-import-analyze { height: 36px; white-space: nowrap; }
.ux-manual-link {
  appearance: none; border: 0; background: transparent; color: var(--color-text-tertiary);
  font-family: var(--font-family); font-size: .68rem; cursor: pointer; white-space: nowrap;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.ux-manual-link:hover { color: var(--color-accent); transform: translateY(-1px); }
.ux-field-error { border-color: #B56A64 !important; box-shadow: 0 0 0 2px rgba(181,106,100,.08) !important; }

/* The map is a product highlight: full-width, large, and visually quiet around it. */
.ux-onboarding-enabled #dash-map-card {
  width: 100%; margin-bottom: var(--space-lg); padding: var(--space-lg) var(--space-xl) var(--space-xl);
  overflow: visible;
}
.ux-onboarding-enabled #dash-map-card .map-card-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  grid-template-areas: "title count toggle" "tools tools tools";
  align-items: center; gap: 8px 10px; margin-bottom: 10px;
}
.ux-onboarding-enabled #dash-map-card .map-card-heading > div:first-child { grid-area: title; min-width: 0; }
.ux-onboarding-enabled #dash-map-card .map-tools {
  grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  width: 100%; padding-top: 4px;
}
.ux-onboarding-enabled #dash-map-card .map-card-count {
  grid-area: count; padding: 4px 9px; background: transparent; font-size: .68rem;
}
.ux-onboarding-enabled #dash-map-card .map-toggle-btn { grid-area: toggle; margin-left: 0; }
.ux-onboarding-enabled #dash-map-card .map-search-input { width: 218px; }
.ux-onboarding-enabled #dash-map-card .map-regions { gap: 4px; }
.ux-onboarding-enabled #dash-map-card .map-region-btn { padding: 4px 10px; }
.ux-onboarding-enabled #dash-map-card .map-country-tabs {
  display: flex; gap: 5px; overflow-x: auto; flex-wrap: nowrap;
  padding: 5px 0 9px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ux-onboarding-enabled #dash-map-card .map-country-tabs::-webkit-scrollbar { display: none; }
.ux-onboarding-enabled #dash-map-card .map-country-tab { flex: 0 0 auto; }

/* Map owns the full canvas. Details appear only after a destination is chosen. */
.ux-onboarding-enabled #dash-map-card .map-layout {
  position: relative; display: block; min-width: 0; overflow: hidden;
  border-radius: var(--radius-md);
}
.ux-onboarding-enabled #dash-map-card .map-svg-wrap { width: 100%; }
.ux-onboarding-enabled #applicationWorldMap { height: 430px; min-height: 430px; }
.ux-onboarding-enabled #dash-map-card .map-sidebar {
  position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 8;
  width: min(320px, 35%); min-height: 0; padding: 18px;
  overflow-y: auto; opacity: 0; pointer-events: none;
  transform: translateX(calc(100% + 28px));
  box-shadow: 0 16px 44px rgba(31,32,27,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 320ms var(--ease-emphasized), opacity 220ms ease;
}
.ux-onboarding-enabled #dash-map-card.ux-map-sidebar-open .map-sidebar {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
.ux-map-close {
  position: absolute; top: 9px; right: 9px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: rgba(0,0,0,.035); color: var(--color-text-tertiary);
  font-family: var(--font-family); font-size: 1rem; cursor: pointer;
}
.ux-map-close:hover { background: rgba(0,0,0,.065); color: var(--color-text-primary); }
.ux-onboarding-enabled #dash-map-card .map-selected { padding-right: 22px; }

/* Legend remains visible without consuming a permanent sidebar. */
.ux-onboarding-enabled #dash-map-card .ux-map-inline-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 10px 2px 0; padding: 9px 0 0; border-top: 1px solid rgba(0,0,0,.05);
}
.ux-onboarding-enabled #dash-map-card .ux-map-inline-legend .map-legend-title { margin-right: 2px; }

/* Country Distribution / generic Insights are intentionally de-emphasized.
   The map already carries distribution; actionable information belongs in Next Actions. */
.ux-onboarding-enabled #dash-countries-card { display: none !important; }
.ux-onboarding-enabled .dash-grid { display: none; }

/* Next Actions + deadlines: useful work, not another analytics layer. */
.ux-action-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-lg); margin-bottom: var(--space-xl); align-items: stretch;
}
.ux-action-row #dash-next-actions,
.ux-action-row #dash-deadlines-card { margin: 0 !important; min-width: 0; }
.ux-action-row.ux-action-row--single #dash-deadlines-card { grid-column: 1 / -1; }

/* Detailed application manager remains the real working area. */
.ux-onboarding-enabled .toolbar { margin-top: 0; }
.ux-onboarding-enabled #project-list-section { margin-bottom: var(--space-xl); }

/* Quick tour — 3 core ideas only: import → map → applications. */
.ux-tour-spotlight {
  position: fixed; z-index: 168; pointer-events: none; border-radius: var(--radius-lg); opacity: 0;
  box-shadow: 0 0 0 9999px rgba(28,29,25,.23), 0 0 0 2px rgba(213,222,184,.95), 0 14px 42px rgba(0,0,0,.12);
  transition: left 360ms var(--ease-emphasized), top 360ms var(--ease-emphasized), width 360ms var(--ease-emphasized), height 360ms var(--ease-emphasized), opacity 160ms ease;
}
.ux-tour-spotlight--show { opacity: 1; }
.ux-tour-coach {
  position: fixed; z-index: 176; opacity: 0; pointer-events: none;
  transform: translateY(5px) scale(.985); padding: 14px;
  border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-md);
  background: rgba(255,255,252,.98); box-shadow: var(--shadow-lg);
  transition: opacity 180ms ease, transform 220ms var(--ease-emphasized);
}
.ux-tour-coach--show { opacity: 1; pointer-events: auto; transform: none; }
.ux-tour-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.ux-tour-step { color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .06em; }
.ux-tour-close {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--color-text-tertiary);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.ux-tour-close:hover { background: rgba(0,0,0,.035); color: var(--color-text-primary); }
.ux-tour-coach h3 { margin: 0 0 5px; color: var(--color-text-primary); font-size: .88rem; font-weight: 650; }
.ux-tour-coach p { margin: 0; color: var(--color-text-secondary); font-size: .72rem; line-height: 1.5; }
.ux-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 12px; }
.ux-tour-skip { border: 0; background: transparent; padding: 4px 0; color: var(--color-text-tertiary); font-family: var(--font-family); font-size: .65rem; cursor: pointer; }
.ux-tour-dots { display: inline-flex; gap: 4px; margin-left: auto; }
.ux-tour-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-border-strong); transition: background .2s, transform .2s; }
.ux-tour-dots i.is-active { background: var(--color-accent); transform: scale(1.18); }
.ux-tour-next { height: 31px; min-width: 58px; padding: 0 11px; font-size: .66rem; }
.ux-tour-target-pulse { animation: uxTargetPulse 760ms ease; }
@keyframes uxTargetPulse { 0%,100% { filter:none; } 50% { filter:brightness(1.025); } }
.ux-guide-btn { white-space: nowrap; }
.ux-mini-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 230; opacity: 0; transform: translate(-50%,8px);
  padding: 8px 12px; border-radius: var(--radius-full); background: #252620; color: #fff;
  font-size: .7rem; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ux-mini-toast--show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  .ux-product-tag { display: none; }
  .ux-quickstart { grid-template-columns: 1fr; gap: 10px; }
  .ux-onboarding-enabled .dash-hero-inner { padding: var(--space-xl); gap: var(--space-lg); }
  .ux-action-row { grid-template-columns: 1fr; }
  .ux-action-row #dash-deadlines-card { grid-column: auto; }
  .ux-onboarding-enabled #applicationWorldMap { height: 330px; min-height: 330px; }
  .ux-onboarding-enabled #dash-map-card .map-sidebar { width: min(330px, 52%); }
}
@media (max-width: 640px) {
  .ux-hero-productline { font-size: .74rem; }
  .ux-quickstart { padding: var(--space-md); }
  .ux-quickstart-action { grid-template-columns: minmax(0,1fr) auto; }
  .ux-manual-link { grid-column: 1 / -1; justify-self: end; }
  .ux-import-analyze { padding-left: 10px; padding-right: 10px; }
  .ux-onboarding-enabled #dash-map-card { padding: var(--space-md); }
  .ux-onboarding-enabled #dash-map-card .map-card-heading {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "title count" "tools tools";
  }
  .ux-onboarding-enabled #dash-map-card .map-toggle-btn { display: none; }
  .ux-onboarding-enabled #dash-map-card .map-search-wrap { width: 100%; }
  .ux-onboarding-enabled #dash-map-card .map-search-input { width: 100%; }
  .ux-onboarding-enabled #dash-map-card .map-regions { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .ux-onboarding-enabled #dash-map-card .map-regions::-webkit-scrollbar { display:none; }
  .ux-onboarding-enabled #applicationWorldMap { height: 225px; min-height: 225px; }
  .ux-onboarding-enabled #dash-map-card .map-sidebar {
    left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto;
    transform: translateY(calc(100% + 18px));
  }
  .ux-onboarding-enabled #dash-map-card.ux-map-sidebar-open .map-sidebar { transform: translateY(0); }
  .ux-guide-btn { font-size: 0; width: 32px; padding: 0; }
  .ux-guide-btn::after { content: '?'; font-size: .78rem; }
  .ux-tour-coach { max-width: calc(100vw - 24px); }
}


/* ============================================================
   Offerland UX polish V3
   - stronger text hierarchy
   - aligned map zoom control
   - modular Knowledge Base
   - cleaner quick-start secondary action
   ============================================================ */

/* Keep the Warm Editorial palette, but raise contrast for information that
   users actually need to read. Muted stays muted; actions/content do not. */
html.ux-onboarding-enabled {
  --color-text-secondary: #57564F;
  --color-text-tertiary: #7A786F;
  --color-accent-text: #71813F;
}
.ux-onboarding-enabled .project-link {
  color: var(--color-accent-text);
  font-weight: 560;
}
.ux-onboarding-enabled .project-link:hover { color: #5E6E31; }
.ux-onboarding-enabled .map-card-subtitle,
.ux-onboarding-enabled .ux-quickstart-desc,
.ux-onboarding-enabled .dash-card-subtitle { color: var(--color-text-secondary); }
.ux-onboarding-enabled .map-card-count,
.ux-onboarding-enabled .map-toggle-btn { color: var(--color-text-secondary); }
.ux-onboarding-enabled .detail-section-title { color: #716F67; }
.ux-onboarding-enabled .detail-label { color: #626159; }
.ux-onboarding-enabled .detail-empty { color: #858279; }

/* Secondary action should read as an action, not placeholder copy. */
.ux-manual-link {
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-weight: 580;
}
.ux-manual-link:hover {
  color: var(--color-accent-text);
  background: rgba(167,184,92,.09);
  transform: none;
}

/* jsVectorMap zoom — one tidy vertical control instead of two floating boxes. */
.ux-onboarding-enabled #dash-map-card .jvm-zoom-btn {
  right: 14px !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  color: var(--color-text-primary) !important;
  background: rgba(252,251,247,.96) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: 0 5px 16px rgba(32,33,27,.08) !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
.ux-onboarding-enabled #dash-map-card .jvm-zoom-btn::before {
  font-family: var(--font-family);
  font-size: 1.22rem;
  font-weight: 430;
  line-height: 1;
  transform: translateY(-1px);
}
.ux-onboarding-enabled #dash-map-card .jvm-zoomin {
  top: 14px !important;
  border-radius: 10px 10px 0 0 !important;
}
.ux-onboarding-enabled #dash-map-card .jvm-zoomin::before { content: '+'; }
.ux-onboarding-enabled #dash-map-card .jvm-zoomout {
  top: 49px !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 8px 16px rgba(32,33,27,.08) !important;
}
.ux-onboarding-enabled #dash-map-card .jvm-zoomout::before { content: '−'; }
.ux-onboarding-enabled #dash-map-card .jvm-zoom-btn:hover {
  background: #FFF !important;
  border-color: #AAA79D !important;
  transform: translateY(-1px);
}

/* Knowledge Base — same content, but scannable cards instead of a text wall. */
.ux-kb-enhanced { margin-top: 2px; }
.ux-kb-enhanced > .detail-section-title { margin-bottom: 12px; }
.ux-kb-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.ux-kb-card {
  min-width: 0;
  padding: 13px 14px 12px;
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,247,241,.9));
  box-shadow: 0 1px 2px rgba(0,0,0,.025);
}
.ux-kb-card--wide { grid-column: 1 / -1; }
.ux-kb-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.ux-kb-card-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9C9A91;
}
.ux-kb-card-title {
  margin: 0;
  color: #55564F;
  font-size: .78rem;
  line-height: 1.3;
  font-weight: 680;
  letter-spacing: .005em;
}
.ux-kb-card-body {
  margin: 0 !important;
  color: var(--color-text-primary);
  font-size: .82rem;
  line-height: 1.58;
  white-space: pre-wrap;
}
.ux-kb-card-body.is-collapsed {
  max-height: 7.9em;
  overflow: hidden;
  position: relative;
}
.ux-kb-card-body.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.7em;
  background: linear-gradient(180deg,rgba(248,247,241,0),rgba(248,247,241,.98));
  pointer-events: none;
}
.ux-kb-card-body.is-expanded { max-height: none; overflow: visible; }
.ux-kb-card-body.is-expanded::after { display: none; }
.ux-kb-toggle {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-text);
  font-family: var(--font-family);
  font-size: .68rem;
  font-weight: 620;
  cursor: pointer;
}
.ux-kb-toggle:hover { text-decoration: underline; }

/* Subtle category cues, kept inside the existing Offerland palette. */
.ux-kb-card--positive .ux-kb-card-dot { background: #6E8B62; }
.ux-kb-card--caution .ux-kb-card-dot { background: #B17B58; }
.ux-kb-card--source .ux-kb-card-dot { background: #73889E; }
.ux-kb-card--question .ux-kb-card-dot { background: #8D7BA8; }
.ux-kb-card--cost .ux-kb-card-dot { background: #A98235; }

/* Tour: stronger readable copy; V3 JS computes a proper applications-region rect. */
.ux-tour-coach p { color: #55564F; }
.ux-tour-step, .ux-tour-skip { color: #747168; }
.ux-tour-spotlight { border-radius: 12px; }

@media (max-width: 640px) {
  .ux-kb-grid { grid-template-columns: 1fr; }
  .ux-kb-card--wide { grid-column: auto; }
  .ux-onboarding-enabled #dash-map-card .jvm-zoom-btn {
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .ux-onboarding-enabled #dash-map-card .jvm-zoomin { top: 10px !important; }
  .ux-onboarding-enabled #dash-map-card .jvm-zoomout { top: 43px !important; }
}

/* ============================================================
   Offerland UX polish V4.1 — editorial hero only
   Keep original Offerland warmth; make product positioning the first read.
   ============================================================ */
.ux-onboarding-enabled .dash-hero-inner {
  align-items: center;
  gap: clamp(56px, 7vw, 104px);
  padding: 46px 54px 42px;
}
.ux-onboarding-enabled .dash-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.ux-onboarding-enabled .dash-hero-greeting {
  order: 1;
  margin: 0 0 18px;
  color: #76776F;
  font-size: .63rem;
  font-weight: 620;
  letter-spacing: .23em;
}
.ux-onboarding-enabled .ux-hero-productline {
  order: 2;
  margin: 0;
  max-width: 760px;
  color: #20211C;
  font-family: var(--font-family);
  font-size: clamp(2.25rem, 3.65vw, 3.15rem);
  font-weight: 560;
  line-height: 1.03;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.ux-hero-before,
.ux-hero-after { color: #20211C; }
.ux-hero-focus {
  position: relative;
  display: inline-block;

  /* translucent olive glass body */
  background: linear-gradient(
    108deg,
    rgba(91, 116, 55, 0.82) 0%,
    rgba(126, 148, 72, 0.78) 34%,
    rgba(163, 160, 84, 0.74) 67%,
    rgba(187, 143, 72, 0.76) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* subtle glass rim */

  filter: drop-shadow(0 5px 14px rgba(79, 91, 43, 0.06));

  isolation: isolate;

  animation: offerlandGlassSettle 1.15s
    cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ux-hero-focus::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255, 255, 255, 0.03) 32%,
    rgba(255, 255, 255, 0.58) 44%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 65%
  );

  background-size: 230% 100%;
  background-position: 130% center;

  -webkit-background-clip: text;
  background-clip: text;

  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;

  animation: offerlandGlassGlint 1.35s
    cubic-bezier(0.22, 1, 0.36, 1) 0.08s 1 both;
}


@keyframes offerlandGlassSettle {
  0% {
    opacity: 0;
    transform: translateY(8px) scaleX(0.986) scaleY(1.025);
    filter:
      blur(4px)
      drop-shadow(0 10px 20px rgba(79,91,43,0));
  }

  52% {
    opacity: 1;
    transform: translateY(-1px) scaleX(1.004) scaleY(0.996);
    filter:
      blur(0)
      drop-shadow(0 -1px 0 rgba(255,255,255,0.22))
      drop-shadow(0 7px 16px rgba(79,91,43,0.09));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      blur(0)
      drop-shadow(0 -1px 0 rgba(255,255,255,0.20))
      drop-shadow(0 1px 0 rgba(68,78,40,0.14))
      drop-shadow(0 7px 18px rgba(79,91,43,0.07));
  }
}

@keyframes offerlandGlassGlint {
  0% {
    opacity: 0;
    background-position: 130% center;
  }

  28% {
    opacity: 0.12;
  }

  58% {
    opacity: 0.62;
  }

  100% {
    opacity: 0;
    background-position: -55% center;
  }
}
.ux-onboarding-enabled .ux-hero-capability {
  order: 3;
  margin: 15px 0 0;
  max-width: 660px;
  color: #66665F;
  font-size: .82rem;
  font-weight: 440;
  line-height: 1.5;
  letter-spacing: .002em;
}

/* Progress remains recognizably Offerland, but stops behaving like the headline. */
.ux-progress-block {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.ux-onboarding-enabled .dash-hero-display {
  padding: 9px 16px 11px;
  border: 1px solid rgba(112,109,96,.20);
  border-radius: 15px;
  background: rgba(255,254,249,.50);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 7px 22px rgba(43,43,36,.055);
}
.ux-onboarding-enabled .dash-hero-display:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(43,43,36,.07);
}
.ux-onboarding-enabled .dash-hero-display::before,
.ux-onboarding-enabled .dash-hero-display::after { display: none; }
.ux-onboarding-enabled .hero-progress-number {
  font-size: clamp(3.2rem, 5vw, 4rem);
  font-weight: 510;
  line-height: .92;
  letter-spacing: -.055em;
  color: #191A16;
}
.ux-onboarding-enabled .hero-progress-symbol {
  margin-left: 3px;
  color: #696961;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 390;
}
.ux-progress-meta {
  width: 132px;
  display: grid;
  gap: 8px;
}
.ux-progress-label {
  color: #6F7068;
  font-size: .59rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.35;
}
.ux-progress-rule {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(111,112,104,.14);
}
.ux-progress-rule > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#728849,#A0AF62);
  transition: width .55s var(--ease-emphasized);
}

/* Default filler copy disappears; a user-authored profile subtitle is preserved. */
.ux-onboarding-enabled #welcome-subtitle {
  order: 5;
  margin: 16px 0 0;
  color: #66675F;
  font-size: .72rem;
  line-height: 1.45;
}
.ux-onboarding-enabled #welcome-subtitle.ux-default-profile-subtitle { display: none; }
.ux-onboarding-enabled .pf-balance {
  order: 6;
  margin-top: 17px;
  gap: 13px;
}
.ux-onboarding-enabled .pf-item {
  color: #5D5E57;
  font-size: .7rem;
  font-weight: 520;
}
.ux-onboarding-enabled .dash-hero-date {
  order: 7;
  margin-top: 10px !important;
  color: #8C8B83 !important;
  font-size: .62rem !important;
}
.ux-onboarding-enabled .dash-hero-deadline {
  order: 8;
  width: min(100%, 650px);
  margin-top: 25px;
  padding-top: 17px;
  border-top-color: rgba(0,0,0,.075);
}
.ux-onboarding-enabled .dash-hero-deadline-label {
  color: #74756D;
}
.ux-onboarding-enabled .dash-hero-deadline-text {
  color: #272823;
  font-size: .86rem;
}

/* Bricky is a companion, not the headline. */
.ux-onboarding-enabled .dash-hero-right {
  min-width: 170px;
  padding-top: 0;
  align-self: center;
}
.ux-onboarding-enabled .hero-puzzle {
  transform: scale(.94);
  transform-origin: center center;
}
.ux-onboarding-enabled .ux-product-tag {
  color: #65665E;
  background: rgba(255,255,255,.48);
  border-color: rgba(105,105,96,.20);
}

@media (max-width: 900px) {
  .ux-onboarding-enabled .dash-hero-inner {
    gap: 36px;
    padding: 36px 32px;
  }
  .ux-onboarding-enabled .ux-hero-productline {
    font-size: clamp(2rem, 5vw, 2.55rem);
  }
  .ux-onboarding-enabled .dash-hero-right { min-width: 130px; }
}
@media (max-width: 768px) {
  .ux-onboarding-enabled .dash-hero-inner {
    align-items: stretch;
    padding: 28px 23px 24px;
  }
  .ux-onboarding-enabled .ux-hero-productline {
    max-width: 100%;
    font-size: clamp(1.85rem, 8.8vw, 2.35rem);
  }
  .ux-onboarding-enabled .ux-hero-capability { font-size: .75rem; }
  .ux-progress-block { margin-top: 23px; }
  .ux-progress-meta { width: 112px; }
  .ux-onboarding-enabled .hero-progress-number { font-size: 3.15rem; }
  .ux-onboarding-enabled .dash-hero-right {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    margin-top: -68px;
    pointer-events: none;
  }
  .ux-onboarding-enabled .hero-puzzle {
    transform: scale(.68);
    transform-origin: right center;
    pointer-events: auto;
  }
}
@media (max-width: 480px) {
  .ux-progress-block { gap: 12px; }
  .ux-progress-meta { width: 96px; }
  .ux-onboarding-enabled .dash-hero-right { margin-top: -46px; }
  .ux-onboarding-enabled .hero-puzzle { transform: scale(.6); }
  .ux-onboarding-enabled .dash-hero-deadline { width: 100%; }
}