/* ============================================
   回忆地图 · Map of Us — Design System Tokens
   樱花粉 × 奶油白 × 毛玻璃 × 治愈系高级感
   Apple Photos × Airbnb × 小红书 × 旅行手账
   ============================================ */

:root {
  /* === Color: Brand (Cherry Blossom Pink) === */
  --color-primary: #FF6FAE;
  --color-primary-hover: #e85d9a;
  --color-primary-disabled: #ffd1e6;
  --color-primary-light: #fff0f6;
  --color-primary-soft: #fff5f8;
  --color-accent: #FFC7DC;
  --color-accent-light: #ffeef4;

  /* === Color: Surface (warm cream, not cold white) === */
  --color-canvas: #FFF8FA;
  --color-bg: #FFF8FA;
  --color-bg-soft: #FFF0F5;
  --color-surface-soft: #FFF0F5;
  --color-surface-strong: #FFE4ED;
  --color-surface-card: #FFFFFF;

  /* === Glassmorphism (signature style) === */
  --color-glass-bg: rgba(255, 255, 255, 0.72);
  --color-glass-border: rgba(255, 111, 174, 0.12);
  --color-glass-strong: rgba(255, 255, 255, 0.88);

  /* === Color: Text (warm grey, not cold black) === */
  --color-ink: #3d3535;
  --color-body: #6b5e5e;
  --color-muted: #9a8c8c;
  --color-muted-soft: #bfb3b3;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* === Color: Hairlines === */
  --color-hairline: #f0e8ec;
  --color-hairline-soft: #f5eff2;
  --color-border-strong: #e0d4d8;

  /* === Color: Semantic === */
  --color-error: #e0556a;
  --color-error-hover: #c94a5a;
  --color-success: #6dbe8a;
  --color-legal-link: #FF6FAE;
  --color-scrim: rgba(61, 53, 53, 0.35);

  /* === Typography (Noto Sans SC) === */
  --font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --font-hero-xl: 48px;
  --font-hero-lg: 40px;
  --font-display-xl: 32px;
  --font-display-lg: 28px;
  --font-display-md: 24px;
  --font-display-sm: 21px;
  --font-title-lg: 19px;
  --font-title-md: 17px;
  --font-title-sm: 16px;
  --font-body-md: 16px;
  --font-body-sm: 14px;
  --font-caption: 14px;
  --font-caption-sm: 13px;
  --font-badge: 11px;
  --font-micro-label: 12px;
  --font-uppercase-tag: 8px;
  --font-button-md: 16px;
  --font-button-sm: 14px;
  --font-nav-link: 15px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === Border Radius (generous, warm) === */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* === Spacing === */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;
  --space-hero: 96px;

  /* === Shadows (pink-tinted, warm) === */
  --shadow-flat: none;
  --shadow-xs: 0 1px 2px rgba(255, 111, 174, 0.04);
  --shadow-sm: 0 2px 4px rgba(255, 111, 174, 0.06);
  --shadow-md: 0 4px 12px rgba(255, 111, 174, 0.08);
  --shadow-lg: 0 8px 24px rgba(255, 111, 174, 0.10);
  --shadow-card: 0 1px 3px rgba(255, 111, 174, 0.06),
                0 2px 8px rgba(255, 111, 174, 0.04);
  --shadow-elevated: 0 8px 30px rgba(255, 111, 174, 0.10);
  --shadow-glow: 0 0 30px rgba(255, 111, 174, 0.25);

  /* === Glassmorphism === */
  --glass-blur: blur(20px);
  --glass-blur-light: blur(10px);
  --glass-shadow: 0 2px 16px rgba(255, 111, 174, 0.08);
  --glass-border: 1px solid rgba(255, 255, 255, 0.6);

  /* === Layout === */
  --sidebar-width: 240px;
  --panel-width: 380px;

  /* === Component Heights === */
  --btn-height: 48px;
  --input-height: 56px;
  --icon-btn-sm: 32px;
  --icon-btn-md: 40px;

  /* === Transitions (smooth, emotional) === */
  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === CSS Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font-family);
  font-size:var(--font-body-md);
  font-weight:var(--weight-normal);
  line-height:1.6;
  color:var(--color-ink);
  background-color:var(--color-canvas);
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}

/* === App Shell === */
.app-shell{display:flex;min-height:100vh}
.app-sidebar{
  width:var(--sidebar-width);
  flex-shrink:0;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:100;
  background:rgba(255,248,250,0.78);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--color-glass-border);
  border-radius:0 var(--radius-2xl) var(--radius-2xl) 0;
  display:flex;
  flex-direction:column;
  transition:transform var(--transition-slow);
  box-shadow:2px 0 30px rgba(255,111,174,0.06);
}

.sidebar-resize-handle{
  position:absolute;
  right:-3px;
  top:0;bottom:0;
  width:6px;
  cursor:col-resize;
  z-index:200;
  transition:background-color 0.15s ease;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle--dragging{
  background:var(--color-primary);
}
.app-main{flex:1;margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column}
#app-content{flex:1;display:flex;flex-direction:column}

/* === Sidebar toggle (mobile) === */
.sidebar-toggle{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:110;
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--color-glass-bg);
  backdrop-filter:var(--glass-blur-light);
  -webkit-backdrop-filter:var(--glass-blur-light);
  border:var(--glass-border);
  box-shadow:var(--shadow-sm);
  align-items:center;
  justify-content:center;
  color:var(--color-ink);
}

/* === Utilities === */
.container{max-width:1280px;margin:0 auto;padding:0 var(--space-lg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.glass-card{
  background:var(--color-glass-bg);
  backdrop-filter:var(--glass-blur-light);
  -webkit-backdrop-filter:var(--glass-blur-light);
  border:var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
}
.glass-card--strong{background:var(--color-glass-strong)}

.frosted-bg{
  background:rgba(255,248,250,0.6);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
}

.text-gradient{
  background:linear-gradient(135deg, var(--color-primary), #ff8ec4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* === Empty State === */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 24px;
  text-align:center;
}
.empty-state__icon{font-size:64px;margin-bottom:var(--space-lg);animation:floatUpDown 3s ease-in-out infinite}
.empty-state__title{
  font-size:var(--font-display-lg);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  margin-bottom:var(--space-sm);
  letter-spacing:-0.02em;
}
.empty-state__text{
  font-size:var(--font-body-sm);
  color:var(--color-muted);
  margin-bottom:var(--space-lg);
  max-width:360px;
  line-height:1.7;
}

/* === Page Title === */
.page-title{
  font-size:var(--font-display-xl);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  letter-spacing:-0.03em;
  line-height:1.2;
}
.page-subtitle{
  font-size:var(--font-body-sm);
  color:var(--color-muted);
  margin-top:var(--space-xs);
}

/* === Section Header === */
.section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:20px;
}
.section-header__title{
  font-size:var(--font-display-lg);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  letter-spacing:-0.02em;
}
.section-header__link{
  font-size:var(--font-body-sm);
  color:var(--color-primary);
  font-weight:var(--weight-medium);
  transition:color var(--transition-fast);
}
.section-header__link:hover{color:var(--color-primary-hover)}

/* === Progress Bar === */
.progress-bar{
  width:100%;
  height:6px;
  background:var(--color-surface-soft);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.progress-bar__fill{
  height:100%;
  background:linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius:var(--radius-full);
  transition:width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Skeleton Loading === */
.skeleton{
  background:linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-surface-strong) 50%, var(--color-surface-soft) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === Scrollbar === */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-hairline);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}

/* === Keyframe Animations === */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes floatUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(255,111,174,0.2)}50%{box-shadow:0 0 40px rgba(255,111,174,0.35)}}
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

/* === Responsive === */
@media (max-width:744px){
  :root{
    --sidebar-width:240px;
    --font-hero-xl:36px;
    --font-hero-lg:32px;
    --font-display-xl:26px;
    --font-display-lg:24px;
  }
  .app-sidebar{
    transform:translateX(-100%);
    border-radius:0 var(--radius-xl) var(--radius-xl) 0;
  }
  .app-sidebar--open{transform:translateX(0)}
  .app-main{margin-left:0}
  .sidebar-toggle{display:flex!important}
}