/* ============================================
   VoiLog - 声活ダッシュボード
   Dark × Green Creative UI + Light Mode
   ============================================ */

/* --- CSS Variables: Dark (default) --- */
:root {
  --bg-main: #0d1117;
  --bg-card: #161b22;
  --bg-card-top: #1c212b;
  --bg-card-hover: #1c2333;
  --bg-sidebar: #0d1117;
  --bg-input: #0d1117;
  --bg-modal: #161b22;
  --accent: #64c87a;
  --accent-end: #3ecf8e;
  --accent-glow: rgba(100, 200, 122, 0.15);
  --accent-glow-strong: rgba(100, 200, 122, 0.25);
  --accent-line: rgba(100, 200, 122, 0.40);
  --text-main: #e6edf3;
  --text-sub: #8b949e;
  --text-dim: #484f58;
  --border: #30363d;
  --border-light: #21262d;
  --danger: #f85149;
  --warning: #d29922;
  --info: #58a6ff;
  --purple: #bc8cff;
  --orange: #f0883e;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-full: 9999px;
  --font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  --sidebar-width: 240px;
  --tabbar-height: 64px;
  --header-height: 60px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-theme: 0.3s ease;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2);
  --cat-vocal: #64c87a;
  --cat-reading: #58a6ff;
  --cat-analysis: #bc8cff;
  --cat-audition: #f0883e;
  --cat-other: #8b949e;
  --primary: #64c87a;
}

/* --- Light Mode --- */
[data-theme="light"] {
  --bg-main: #f6f8fa;
  --bg-card: #ffffff;
  --bg-card-top: #ffffff;
  --bg-card-hover: #f0f3f6;
  --bg-sidebar: #ffffff;
  --bg-input: #f6f8fa;
  --bg-modal: #ffffff;
  --text-main: #1f2328;
  --text-sub: #656d76;
  --text-dim: #8b949e;
  --border: #d0d7de;
  --border-light: #d8dee4;
  --accent-glow: rgba(100, 200, 122, 0.12);
  --accent-glow-strong: rgba(100, 200, 122, 0.20);
  --accent-line: rgba(100, 200, 122, 0.50);
  --overlay-bg: rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.08);
  --primary: #64c87a;
}

/* --- Reset & Base --- */
*, *::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);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color var(--transition-theme), color var(--transition-theme);
}
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
#voilog-app { display: flex; min-height: 100dvh; }

/* ============================================
   Lucide Icon Sizing
   ============================================ */
.card-icon-wrapper {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-glow);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-lucide { width: 20px; height: 20px; color: var(--accent); stroke-width: 2; }
.nav-lucide { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.tab-lucide { width: 22px; height: 22px; stroke-width: 2; transition: transform var(--transition-fast); }
.header-lucide { width: 20px; height: 20px; stroke-width: 2; }
.inline-lucide { width: 14px; height: 14px; stroke-width: 2; vertical-align: -2px; display: inline; }
.todo-lucide { width: 16px; height: 16px; stroke-width: 2; color: var(--text-dim); flex-shrink: 0; }
.todo-lucide.done-icon { color: var(--accent); }
.btn-icon { width: 18px; height: 18px; stroke-width: 2; }

/* ============================================
   Theme Toggle
   ============================================ */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub);
  transition: all var(--transition-fast);
  position: relative; overflow: hidden;
}
.theme-toggle:hover { background: rgba(100,200,122,0.1); color: var(--accent); }
.theme-icon { width: 20px; height: 20px; stroke-width: 2; position: absolute; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
.theme-icon-light { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-icon-dark { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-icon-light { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-icon-dark { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* ============================================
   Sidebar (Desktop Only)
   ============================================ */
.sidebar {
  display: none; position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-width); background: var(--bg-sidebar);
  border-right: 1px solid var(--border); flex-direction: column;
  z-index: 100; padding: 20px 0;
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 24px; margin-bottom: 32px; }
.logo-icon { font-size: 1.6rem; display: flex; align-items: center; color: var(--accent); }
.logo-icon i[data-lucide] { width: 1.5rem; height: 1.5rem; }
.logo-text {
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -0.02em;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius-btn); color: var(--text-sub);
  font-size: 0.9rem; font-weight: 500; transition: all var(--transition-fast); position: relative;
}
.sidebar-nav-item:hover { background: rgba(100,200,122,0.06); color: var(--text-main); }
.sidebar-nav-item.active { background: var(--accent-glow); color: var(--accent); }
.sidebar-nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  background: linear-gradient(180deg, var(--accent), var(--accent-end));
  border-radius: 0 4px 4px 0;
}
.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.user-avatar-small {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #0d1117;
}
.user-name-small { font-size: 0.85rem; color: var(--text-sub); }

/* ============================================
   Main Content
   ============================================ */
.main-content { flex: 1; width: 100%; min-height: 100dvh; }

/* ============================================
   Header
   ============================================ */
.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--header-height);
  background: color-mix(in srgb, var(--bg-main) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.header-left { display: flex; align-items: center; }
.mobile-logo { display: flex; align-items: center; gap: 8px; }
.mobile-logo .logo-icon { font-size: 1.3rem; }
.mobile-logo .logo-text { font-size: 1.2rem; }
.header-right { display: flex; align-items: center; gap: 8px; }
.header-icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); transition: all var(--transition-fast);
}
.header-icon-btn:hover { background: rgba(100,200,122,0.1); color: var(--text-main); }
.notification-badge {
  position: absolute; top: 6px; right: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--danger); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #0d1117;
}

/* ============================================
   Page Transitions
   ============================================ */
.page { display: none; animation: pageFadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   Greeting
   ============================================ */
.greeting-section { padding: 24px 20px 8px; }
.greeting-text { font-size: 1.35rem; font-weight: 700; line-height: 1.4; animation: fadeInUp 0.5s ease; }
.greeting-date { margin-top: 4px; font-size: 0.85rem; color: var(--text-sub); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   Card Grid
   ============================================ */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px 20px; max-width: 1200px; }
.card {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px 20px 20px 24px; cursor: pointer;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-normal), background-color var(--transition-theme);
  position: relative; overflow: hidden; box-shadow: var(--shadow-card);
}
.card-accent-line {
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-line);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover .card-accent-line { background: var(--accent); box-shadow: 0 0 8px rgba(100,200,122,0.3); }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-end));
  opacity: 0; transition: opacity var(--transition-normal);
}
.card:hover { transform: scale(1.02); border-color: rgba(100,200,122,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(100,200,122,0.1); }
.card:hover::before { opacity: 1; }
.card:active { transform: scale(0.99); }

.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-header-right { display: flex; align-items: center; gap: 8px; }
.card-flair { font-size: 1rem; opacity: 0.7; transition: opacity var(--transition-fast), transform var(--transition-fast); color: var(--accent); display: flex; align-items: center; }
.card-flair i[data-lucide] { width: 1.1rem; height: 1.1rem; }
.card:hover .card-flair { opacity: 1; transform: scale(1.15); }
.card-badge { background: var(--accent-glow); color: var(--accent); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); }
.card-badge-text { color: var(--text-sub); font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
.card-new-badge { background: linear-gradient(135deg, var(--accent), var(--accent-end)); color: #0d1117; font-size: 0.65rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-full); }
.card-trend { font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.card-trend.up { color: var(--accent); }
.card-title { font-size: 1.18rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.card-subtitle { font-size: 0.82rem; color: var(--text-sub); margin-bottom: 12px; font-weight: 500; }
.card-subtitle strong { color: var(--accent); }
.card-header-link { font-size: 0.75rem; color: var(--text-sub); display: flex; align-items: center; gap: 4px; transition: color var(--transition-fast); }
.card-header-link:hover { color: var(--accent); }

/* ToDo Card */
.progress-bar-container { width: 100%; height: 6px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 14px; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-end)); border-radius: var(--radius-full); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); position: relative; }
.todo-preview { display: flex; flex-direction: column; gap: 8px; }
.todo-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-sub); font-weight: 500; }
.todo-item.done { color: var(--text-dim); text-decoration: line-through; }

/* Diary Card */
.diary-preview { margin-top: 4px; }
.diary-excerpt {
  font-size: 0.82rem; color: var(--text-sub); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px; font-style: italic;
  border-left: 3px solid var(--accent-line); padding: 6px 0 6px 12px;
  background: rgba(100,200,122,0.03); border-radius: 0 6px 6px 0;
}
.diary-mood { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.mood-label { color: var(--text-dim); }
.mood-emoji { font-size: 1rem; }
.mood-text { color: var(--accent); font-weight: 600; }

/* Script Card */
.script-text {
  font-size: 0.82rem; color: var(--text-sub); font-style: italic; margin-bottom: 10px; line-height: 1.5;
  border-left: 3px solid rgba(210,153,34,0.4); padding: 6px 0 6px 12px;
  background: rgba(210,153,34,0.03); border-radius: 0 6px 6px 0;
}
.script-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.7rem; padding: 3px 10px; border-radius: var(--radius-full); background: rgba(210,153,34,0.1); color: #d29922; border: 1px solid rgba(210,153,34,0.2); font-weight: 500; }

/* Practice Card */
.practice-chart { margin-top: 8px; }
.chart-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 64px; gap: 6px; }
.chart-bar-group { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 4px; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; max-width: 24px; background: linear-gradient(180deg, var(--accent), var(--accent-end)); border-radius: 4px 4px 0 0; opacity: 0.5; min-height: 2px; transition: all var(--transition-normal); }
.chart-bar.active { opacity: 1; box-shadow: 0 0 8px var(--accent-glow-strong); }
.chart-bar.dim { background: var(--border); opacity: 0.3; }
.chart-label { font-size: 0.65rem; color: var(--text-dim); }
.chart-label.active-label { color: var(--accent); font-weight: 700; }

/* Calendar */
.mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; }
.cal-header { font-size: 0.65rem; color: var(--text-dim); text-align: center; padding: 4px 0; font-weight: 600; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; border-radius: 8px; color: var(--text-sub); position: relative; }
.cal-day.today { background: linear-gradient(135deg, var(--accent), var(--accent-end)); color: #0d1117; font-weight: 700; }
.cal-day.has-event::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-day.has-event.audition-dot::after { background: var(--warning); }
.cal-day.has-event.lesson-dot::after { background: var(--info); }
.cal-day.past { color: var(--text-dim); opacity: 0.5; }
.upcoming-events { display: flex; flex-direction: column; gap: 10px; }
.event-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(100,200,122,0.02); border-radius: var(--radius-btn); border: 1px solid var(--border-light); transition: background var(--transition-fast); }
.event-item:hover { background: rgba(100,200,122,0.04); }
.event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.event-dot.audition { background: var(--warning); }
.event-dot.lesson { background: var(--info); }
.event-dot.recording { background: var(--accent); }
.event-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.event-title { font-size: 0.82rem; font-weight: 600; }
.event-time { font-size: 0.72rem; color: var(--text-sub); }
.event-type-badge { font-size: 0.65rem; padding: 3px 8px; border-radius: var(--radius-full); font-weight: 600; flex-shrink: 0; }
.audition-badge { background: rgba(210,153,34,0.12); color: var(--warning); }
.lesson-badge { background: rgba(88,166,255,0.12); color: var(--info); }
.recording-badge { background: rgba(100,200,122,0.12); color: var(--accent); }

/* Tool Cards */
.card-small { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
.card-small .card-icon-wrapper { margin-bottom: 10px; }
.card-title-small { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; }
.card-subtitle-small { font-size: 0.72rem; color: var(--text-sub); font-weight: 500; }

/* ============================================
   Rank Badge (sidebar / header / profile)
   ============================================ */

/* Sidebar: user info vertical stack */
.sidebar-user { flex-direction: column; align-items: flex-start; gap: 4px; }
.sidebar-user-info { display: flex; flex-direction: column; gap: 3px; }

/* Inline badge (sidebar) */
.rank-badge-inline {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--radius-full);
  border: 1px solid currentColor; line-height: 1.4;
  transition: all 0.3s ease;
}
/* Profile badge (settings) */
.profile-rank-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 16px;
}
.rank-badge-profile {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 5px 14px; border-radius: var(--radius-full); border: 1px solid currentColor;
  transition: all 0.3s ease;
}
/* Header badge (mobile) */
.header-user-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rank-badge-header {
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: var(--radius-full); border: 1px solid currentColor;
  line-height: 1.3; white-space: nowrap;
}
.rank-badge-header:empty { display: none; }

/* Rank tier colors */
/* レギュラー会員 */
.rank-regular .rank-badge-inline,
.rank-regular .rank-badge-profile,
.rank-regular .rank-badge-header {
  color: #8b949e; background: rgba(139,148,158,0.1);
  border-color: rgba(139,148,158,0.35);
}
/* エキスパート会員 */
.rank-expert .rank-badge-inline,
.rank-expert .rank-badge-profile,
.rank-expert .rank-badge-header {
  color: #58a6ff; background: rgba(88,166,255,0.12);
  border-color: rgba(88,166,255,0.4);
  box-shadow: 0 0 8px rgba(88,166,255,0.25);
}
/* プレミア会員 */
.rank-premium .rank-badge-inline,
.rank-premium .rank-badge-profile,
.rank-premium .rank-badge-header {
  color: #d29922; background: rgba(210,153,34,0.12);
  border-color: rgba(210,153,34,0.45);
  box-shadow: 0 0 12px rgba(210,153,34,0.35), 0 0 24px rgba(210,153,34,0.12);
}
/* 唯我独尊会員 */
.rank-legend .rank-badge-inline,
.rank-legend .rank-badge-profile,
.rank-legend .rank-badge-header {
  background: linear-gradient(90deg, rgba(255,110,118,0.15), rgba(188,140,255,0.15), rgba(88,166,255,0.15));
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  animation: legend-glow 2.5s ease-in-out infinite alternate;
}
.rank-legend .rank-badge-inline::before,
.rank-legend .rank-badge-profile::before,
.rank-legend .rank-badge-header::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(90deg, #ff6e76, #bc8cff, #58a6ff, #bc8cff, #ff6e76);
  z-index: -1; background-size: 200% 100%;
  animation: legend-border 3s linear infinite;
}
@keyframes legend-glow {
  from { box-shadow: 0 0 10px rgba(255,110,118,0.4), 0 0 20px rgba(188,140,255,0.2); }
  to   { box-shadow: 0 0 18px rgba(188,140,255,0.5), 0 0 36px rgba(88,166,255,0.2); }
}
@keyframes legend-border { to { background-position: 200% 0; } }
.rank-legend .rank-badge-inline,
.rank-legend .rank-badge-profile {
  color: #f0c0c4;
}

/* AI badge generation button */
.btn-rank-gen {
  font-size: 0.72rem; color: var(--text-sub); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 4px;
  transition: all var(--transition-fast); cursor: pointer;
}
.btn-rank-gen:hover { border-color: var(--accent); color: var(--accent); }
.btn-rank-gen:disabled { opacity: 0.5; cursor: not-allowed; }
/* Rank badge image (when AI generated) */
.rank-badge-img-profile {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 20px rgba(188,140,255,0.4);
  margin-bottom: 4px;
}

/* ============================================
   Tab Bar
   ============================================ */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabbar-height);
  background: color-mix(in srgb, var(--bg-main) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  padding: 6px 4px; border-radius: var(--radius-btn);
  color: var(--text-dim); font-size: 0.65rem; font-weight: 500;
  transition: all var(--transition-fast); flex: 1; text-align: center; white-space: nowrap;
}
.tab-item:hover { color: var(--text-sub); }
.tab-item.active { color: var(--accent); }
.tab-item.active .tab-lucide { transform: scale(1.15); }
.bottom-spacer { height: calc(var(--tabbar-height) + 16px); }

/* ============================================
   TODO PAGE
   ============================================ */
.todo-page { padding: 24px 20px; max-width: 720px; margin: 0 auto; }
.todo-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.todo-page-title { font-size: 1.4rem; font-weight: 700; }
.todo-page-date { font-size: 0.82rem; color: var(--text-sub); margin-top: 2px; }
.btn-add-task {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; font-weight: 700; font-size: 0.85rem;
  transition: all var(--transition-fast); box-shadow: 0 2px 8px rgba(100,200,122,0.3);
}
.btn-add-task:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(100,200,122,0.4); }
.btn-add-task:active { transform: translateY(0); }

/* Filters */
.todo-filters { margin-bottom: 20px; }
.todo-status-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.status-tab {
  padding: 6px 16px; border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 600; color: var(--text-sub);
  border: 1px solid var(--border); background: transparent;
  transition: all var(--transition-fast);
}
.status-tab:hover { border-color: var(--accent); color: var(--text-main); }
.status-tab.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.todo-category-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-chip {
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 500; color: var(--text-sub);
  border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; gap: 5px;
  transition: all var(--transition-fast);
}
.cat-chip:hover { border-color: var(--text-dim); }
.cat-chip.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vocal-dot { background: var(--accent); }
.reading-dot { background: var(--info); }
.analysis-dot { background: var(--purple); }
.audition-dot { background: var(--orange); }
.other-dot { background: var(--text-dim); }

/* Task List */
.todo-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; min-height: 60px; }
.task-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-card);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all var(--transition-fast); box-shadow: var(--shadow-card);
  animation: taskSlideIn 0.3s ease;
}
@keyframes taskSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.task-card:hover { border-color: rgba(100,200,122,0.3); }
.task-card.completed { opacity: 0.55; }

/* Checkbox */
.task-checkbox {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition-fast); position: relative;
}
.task-checkbox:hover { border-color: var(--accent); }
.task-checkbox.checked {
  background: var(--accent); border-color: var(--accent);
  animation: checkPop 0.3s cubic-bezier(0.4,0,0.2,1);
}
.task-checkbox.checked::after {
  content: ''; width: 6px; height: 10px;
  border: 2px solid #0d1117; border-top: none; border-left: none;
  transform: rotate(45deg); margin-top: -2px;
}
@keyframes checkPop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

.task-content { flex: 1; min-width: 0; }
.task-name { font-size: 0.88rem; font-weight: 600; transition: all var(--transition-fast); }
.task-card.completed .task-name { text-decoration: line-through; color: var(--text-dim); }
.task-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.task-cat-tag {
  font-size: 0.65rem; padding: 2px 8px; border-radius: var(--radius-full);
  font-weight: 600; border: 1px solid;
  display: inline-flex; align-items: center; vertical-align: middle;
}
.task-cat-tag.vocal { color: var(--accent); border-color: rgba(100,200,122,0.3); background: rgba(100,200,122,0.08); }
.task-cat-tag.reading { color: var(--info); border-color: rgba(88,166,255,0.3); background: rgba(88,166,255,0.08); }
.task-cat-tag.analysis { color: var(--purple); border-color: rgba(188,140,255,0.3); background: rgba(188,140,255,0.08); }
.task-cat-tag.audition { color: var(--orange); border-color: rgba(240,136,62,0.3); background: rgba(240,136,62,0.08); }
.task-cat-tag.insight { color: var(--warning); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.08); }
.task-cat-tag.other { color: var(--text-sub); border-color: var(--border); background: transparent; }

.task-delete {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: all var(--transition-fast);
}
.task-delete:hover { color: var(--danger); background: rgba(248,81,73,0.1); }
.task-delete svg { width: 16px; height: 16px; }

/* Empty */
.todo-empty { text-align: center; padding: 40px 20px; color: var(--text-sub); }
.empty-icon { font-size: 2.5rem; margin-bottom: 12px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.empty-icon i[data-lucide] { width: 2.5rem; height: 2.5rem; }
.stat-icon-inline { width: 1rem; height: 1rem; vertical-align: middle; color: var(--accent); }
.empty-text { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.empty-sub { font-size: 0.82rem; color: var(--text-dim); }

/* Stats */
.todo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 16px; text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.stat-ring-container { position: relative; width: 60px; height: 60px; margin: 0 auto 8px; }
.stat-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.stat-ring-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); }
.stat-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.stat-number { font-size: 1.8rem; font-weight: 700; color: var(--text-main); line-height: 1.2; margin-bottom: 4px; }
.stat-number.streak { font-size: 1.4rem; }
.stat-label { font-size: 0.72rem; color: var(--text-sub); font-weight: 500; }

/* ============================================
   Modal
   ============================================ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-sheet {
  width: 100%; max-width: 480px;
  height: 100dvh;
  background: var(--bg-modal); border-radius: 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background-color var(--transition-theme);
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }
.modal-handle { display: none; }
.modal-title { display: none; }

/* Modal header bar */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-header-title {
  font-size: 1rem; font-weight: 700; flex: 1; text-align: center;
}
.modal-header-cancel {
  color: var(--text-sub); font-size: 0.92rem; font-weight: 500;
  min-width: 64px; padding: 6px 4px;
}
.modal-header-cancel:hover { color: var(--text-main); }
.modal-header-submit {
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; font-size: 0.88rem; font-weight: 700;
  padding: 8px 18px; border-radius: var(--radius-full);
  min-width: 80px; text-align: center;
  transition: box-shadow var(--transition-fast);
}
.modal-header-submit:hover { box-shadow: 0 2px 12px rgba(100,200,122,0.4); }

/* Modal scrollable body */
.modal-body {
  flex: 1; overflow-y: auto;
  padding: 24px 20px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* Form base */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.78rem; color: var(--text-sub); font-weight: 600; margin-bottom: 8px; }
.form-required { color: var(--accent); font-size: 0.7rem; font-weight: 700; margin-left: 5px; background: var(--accent-glow); padding: 1px 6px; border-radius: var(--radius-full); }
.form-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-main); font-size: 0.88rem; font-family: inherit;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input-lg { font-size: 1rem; padding: 14px; }

/* Category chips — larger tap targets */
.form-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.form-chip {
  padding: 10px 16px; border-radius: var(--radius-full);
  font-size: 0.82rem; font-weight: 600; color: var(--text-sub);
  border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; gap: 6px;
  transition: all var(--transition-fast); cursor: pointer;
}
.form-chip:hover { border-color: var(--accent); color: var(--text-main); }
.form-chip.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); font-weight: 700; }

/* Time row */
.time-row { display: flex; gap: 10px; align-items: center; }
.time-row .form-input { flex: 1; }
.time-sep { color: var(--text-sub); font-weight: 500; flex-shrink: 0; }

/* Details section */
.detail-section { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.detail-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-sub); font-weight: 600;
  width: 100%; padding: 4px 0; cursor: pointer;
  transition: color var(--transition-fast);
}
.detail-toggle:hover { color: var(--text-main); }
.detail-toggle .toggle-icon { transition: transform 0.2s ease; margin-left: auto; }
.detail-toggle.open .toggle-icon { transform: rotate(180deg); }
.detail-fields { display: none; margin-top: 20px; }
.detail-fields.open { display: block; }

/* Legacy button styles (kept for non-modal uses) */
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel {
  flex: 1; padding: 12px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); font-weight: 600; font-size: 0.88rem;
  color: var(--text-sub); transition: all var(--transition-fast);
}
.btn-cancel:hover { border-color: var(--text-dim); color: var(--text-main); }
.btn-submit {
  flex: 1; padding: 12px; border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; font-weight: 700; font-size: 0.88rem;
  transition: all var(--transition-fast);
}
.btn-submit:hover { box-shadow: 0 4px 16px rgba(100,200,122,0.3); }

/* Desktop: centered dialog (not full screen) */
@media (min-width: 641px) {
  .modal-overlay { align-items: center; }
  .modal-sheet {
    height: auto; max-height: 88vh; border-radius: 16px;
    transform: translateY(20px) scale(0.97);
  }
  .modal-overlay.open .modal-sheet { transform: translateY(0) scale(1); }
}

/* ============================================
   Responsive
   ============================================ */
@media (min-width: 641px) {
  .card-grid { grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 20px 24px; }
  .card-large { grid-column: span 3; }
  .card-medium { grid-column: span 3; }
  .card-full { grid-column: span 6; }
  .card-small { grid-column: span 2; }
  .greeting-section { padding: 28px 24px 10px; }
  .greeting-text { font-size: 1.5rem; }
  .todo-page { padding: 28px 24px; }
  .todo-stats { gap: 16px; }
}

@media (min-width: 1025px) {
  .sidebar { display: flex; }
  .main-content { margin-left: var(--sidebar-width); }
  .mobile-logo { display: none; }
  .tab-bar { display: none; }
  .bottom-spacer { height: 24px; }
  .card-grid { padding: 20px 32px; gap: 20px; max-width: 960px; }
  .greeting-section { padding: 32px 32px 12px; }
  .greeting-text { font-size: 1.6rem; }
  .app-header { padding: 0 32px; }
  .todo-page { padding: 32px 32px; }
}

/* ============================================
   Animations
   ============================================ */
.card { animation: cardFadeIn 0.4s ease both; }
.card:nth-child(1) { animation-delay: 0.05s; } .card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; } .card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; } .card:nth-child(6) { animation-delay: 0.3s; }
.card:nth-child(7) { animation-delay: 0.35s; } .card:nth-child(8) { animation-delay: 0.4s; }
@keyframes cardFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.card-ripple { position: absolute; border-radius: 50%; background: rgba(100,200,122,0.15); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.notification-badge { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { to { left: 100%; } }

/* ============================================
   DIARY PAGE
   ============================================ */
.diary-page { padding: 24px 20px; max-width: 720px; margin: 0 auto; }
.diary-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.diary-page-title { font-size: 1.4rem; font-weight: 700; }

/* Diary Summary */
.diary-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
.summary-item {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-btn); font-size: 0.78rem;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.summary-icon { font-size: 1rem; flex-shrink: 0; }
.summary-value { font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Diary Filters */
.diary-filters { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.diary-search-bar {
  position: relative;
}
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-dim); stroke-width: 2; pointer-events: none; }
.diary-search-input { padding-left: 36px !important; }

.diary-month-nav { display: flex; align-items: center; gap: 8px; justify-content: center; }
.month-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); border: 1px solid var(--border);
  transition: all var(--transition-fast);
}
.month-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.month-nav-label { font-size: 0.92rem; font-weight: 700; min-width: 120px; text-align: center; }

.diary-mood-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.mood-filter-btn {
  padding: 5px 10px; border-radius: var(--radius-full);
  font-size: 0.82rem; border: 1px solid var(--border); background: transparent;
  color: var(--text-sub); transition: all var(--transition-fast); cursor: pointer;
}
.mood-filter-btn:hover { border-color: var(--accent); }
.mood-filter-btn.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.diary-cat-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.insight-dot { background: var(--warning); }

/* Diary List */
.diary-list { display: flex; flex-direction: column; gap: 12px; min-height: 60px; }
.diary-card-entry {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 18px 20px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-normal), background-color var(--transition-theme);
  box-shadow: var(--shadow-card); animation: taskSlideIn 0.3s ease;
}
.diary-card-entry:hover { transform: scale(1.01); border-color: rgba(100,200,122,0.3); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.diary-card-entry .card-accent-line { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-line); transition: background var(--transition-normal); }
.diary-card-entry:hover .card-accent-line { background: var(--accent); box-shadow: 0 0 8px rgba(100,200,122,0.3); }

.diary-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.diary-card-date { font-size: 0.82rem; color: var(--text-sub); font-weight: 600; }
.diary-card-mood { font-size: 1.2rem; }
.diary-card-body {
  font-size: 0.88rem; color: var(--text-main); line-height: 1.7; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.diary-card-readmore { color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.diary-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.diary-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.diary-card-tags .task-cat-tag { font-size: 0.62rem; padding: 2px 7px; }
.diary-card-practice { font-size: 0.75rem; color: var(--text-sub); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.diary-empty { text-align: center; padding: 40px 20px; color: var(--text-sub); }

/* Diary Edit Page */
.diary-edit-page { padding: 24px 20px; max-width: 720px; margin: 0 auto; }
.diary-edit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.diary-back-btn {
  display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600;
  color: var(--text-sub); transition: color var(--transition-fast); padding: 8px 0;
}
.diary-back-btn:hover { color: var(--accent); }
.diary-edit-title { font-size: 1.2rem; font-weight: 700; }
.diary-detail-actions { display: flex; gap: 4px; }
.diary-detail-delete:hover { color: var(--danger) !important; background: rgba(248,81,73,0.1) !important; }

.diary-form { display: flex; flex-direction: column; gap: 4px; padding-bottom: 80px; }
.form-textarea {
  resize: none; min-height: 100px; line-height: 1.7;
  transition: border-color var(--transition-fast), height 0.2s ease;
}
.form-textarea-sm { min-height: 60px; }
.form-optional { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; }

/* Mood Selector */
.mood-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: var(--radius-card); border: 2px solid var(--border);
  background: transparent; transition: all var(--transition-fast); cursor: pointer; min-width: 56px;
}
.mood-btn:hover { border-color: var(--accent); }
.mood-btn.active { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 12px var(--accent-glow); }
.mood-btn-emoji { font-size: 1.6rem; }
.mood-btn-label { font-size: 0.65rem; color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.mood-btn.active .mood-btn-label { color: var(--accent); }

/* Practice time */
.practice-time-input { display: flex; align-items: center; gap: 8px; }
.practice-minutes { max-width: 120px; text-align: center; }
.time-unit { font-size: 0.88rem; color: var(--text-sub); font-weight: 600; }

/* Save button */
.diary-save-area {
  position: fixed; bottom: 0; left: 0; right: 0; padding: 16px 20px;
  background: color-mix(in srgb, var(--bg-main) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light); z-index: 50;
  transition: background-color var(--transition-theme);
}
.btn-save-diary { width: 100%; max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; }

/* Diary Detail Page */
.diary-detail-page { padding: 24px 20px; max-width: 720px; margin: 0 auto; }
.diary-detail-content { animation: pageFadeIn 0.3s ease; }
.detail-date-mood { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail-date { font-size: 1.1rem; font-weight: 700; }
.detail-mood { font-size: 1.5rem; }
.detail-mood-text { font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.detail-section { margin-bottom: 20px; }
.detail-section-label { font-size: 0.75rem; color: var(--text-sub); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.detail-text {
  font-size: 0.92rem; line-height: 1.8; color: var(--text-main); white-space: pre-wrap;
  padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-btn); border-left: 3px solid var(--accent-line);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.detail-good { border-left-color: rgba(100,200,122,0.5); background: rgba(100,200,122,0.03); }
.detail-tomorrow { border-left-color: rgba(88,166,255,0.5); background: rgba(88,166,255,0.03); }
.detail-tags-row { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-practice { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-main); font-weight: 600; padding: 8px 14px; background: var(--accent-glow); border-radius: var(--radius-btn); display: inline-flex; }

/* Confetti */
.confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 10px; height: 10px; top: -10px;
  animation: confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
}

/* Responsive diary adjustments */
@media (max-width: 640px) {
  .diary-summary { grid-template-columns: repeat(2, 1fr); }
  .mood-selector { gap: 6px; }
  .mood-btn { min-width: 48px; padding: 8px 8px; }
  .mood-btn-emoji { font-size: 1.3rem; }
  .diary-save-area { padding-bottom: calc(16px + var(--tabbar-height)); }
}

@media (min-width: 641px) {
  .diary-page { padding: 28px 24px; }
  .diary-edit-page { padding: 28px 24px; }
  .diary-detail-page { padding: 28px 24px; }
  .diary-save-area { padding-bottom: 20px; }
}

@media (min-width: 1025px) {
  .diary-page { padding: 32px 32px; }
  .diary-edit-page { padding: 32px 32px; }
  .diary-detail-page { padding: 32px 32px; }
  .diary-save-area { left: var(--sidebar-width); }
}

/* ============================================
   CALENDAR PAGE
   ============================================ */
.cal-page { padding: 24px 20px; max-width: 900px; margin: 0 auto; }
.cal-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.cal-page-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-page-title { font-size: 1.4rem; font-weight: 700; }
.cal-view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; }
.cal-view-btn {
  padding: 6px 16px; font-size: 0.78rem; font-weight: 600;
  color: var(--text-sub); background: transparent; border: none; cursor: pointer;
  transition: all var(--transition-fast);
}
.cal-view-btn.active { background: var(--accent-glow); color: var(--accent); }
.cal-view-btn:hover:not(.active) { color: var(--text-main); }

/* Calendar Nav */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.cal-nav-left { display: flex; align-items: center; gap: 8px; }
.cal-nav-right { display: flex; align-items: center; gap: 12px; }
.cal-nav-label { font-size: 1rem; font-weight: 700; min-width: 110px; text-align: center; }
.cal-today-btn {
  padding: 5px 14px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600;
  color: var(--accent); border: 1px solid var(--accent); background: transparent;
  transition: all var(--transition-fast); cursor: pointer;
}
.cal-today-btn:hover { background: var(--accent-glow); }

/* Legend */
.cal-legend { display: flex; gap: 10px; font-size: 0.68rem; color: var(--text-sub); }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-todo { background: var(--accent); }
.legend-diary { background: var(--info); }
.legend-event { background: var(--orange); }

/* Month Grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid-header {
  font-size: 0.72rem; color: var(--text-dim); text-align: center; padding: 8px 0;
  font-weight: 600; text-transform: uppercase;
}
.cal-grid-header.weekend { color: var(--orange); opacity: 0.7; }
.cal-cell {
  min-height: 72px; padding: 6px; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--transition-fast); position: relative;
  background: var(--bg-card);
}
.cal-cell:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.other-month { opacity: 0.35; }
.cal-cell.selected { border-color: var(--accent); background: var(--accent-glow); }
.cal-cell-date {
  font-size: 0.78rem; font-weight: 600; margin-bottom: 4px;
  display: flex; align-items: center; gap: 4px;
}
.cal-cell-date .today-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
}
.cal-cell-indicators { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-ind { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-ind-todo { background: var(--accent); }
.cal-ind-diary { background: var(--info); }
.cal-ind-event { background: var(--orange); }
.cal-ind-deadline { background: var(--danger); }
.cal-ind-lesson { background: var(--info); }
.cal-cell-mood { font-size: 0.7rem; margin-top: 2px; }

/* Week View */
.cal-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-week-col {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 12px 10px; min-height: 200px;
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.cal-week-col.today-col { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.cal-week-col-header {
  text-align: center; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.cal-week-day-name { font-size: 0.72rem; color: var(--text-sub); font-weight: 600; }
.cal-week-day-num { font-size: 1.1rem; font-weight: 700; }
.cal-week-col.today-col .cal-week-day-num { color: var(--accent); }
.cal-week-section { margin-bottom: 8px; }
.cal-week-section-label { font-size: 0.62rem; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-week-todo-item {
  display: flex; align-items: center; gap: 6px; font-size: 0.72rem;
  padding: 3px 0; color: var(--text-sub); cursor: pointer;
}
.cal-week-todo-item.done { text-decoration: line-through; opacity: 0.5; }
.cal-week-todo-cb {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition-fast);
}
.cal-week-todo-cb.checked { background: var(--accent); border-color: var(--accent); }
.cal-week-todo-cb.checked::after {
  content: ''; width: 4px; height: 7px;
  border: 1.5px solid #0d1117; border-top: none; border-left: none;
  transform: rotate(45deg); margin-top: -1px;
}
.cal-week-diary-link {
  font-size: 0.72rem; color: var(--accent); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: opacity var(--transition-fast);
}
.cal-week-diary-link:hover { opacity: 0.8; }
.cal-week-event {
  font-size: 0.68rem; padding: 3px 6px; border-radius: 4px;
  margin-bottom: 3px; font-weight: 600;
}
.cal-week-event.audition { background: rgba(240,136,62,0.12); color: var(--orange); }
.cal-week-event.lesson { background: rgba(88,166,255,0.12); color: var(--info); }
.cal-week-event.deadline { background: rgba(248,81,73,0.12); color: var(--danger); }

/* Day Panel */
.day-panel-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.day-panel-overlay.open { opacity: 1; pointer-events: auto; }
.day-panel {
  width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto;
  background: var(--bg-modal); border-radius: 16px 16px 0 0;
  padding: 20px 24px 32px; transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background-color var(--transition-theme);
}
.day-panel-overlay.open .day-panel { transform: translateY(0); }
.day-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.day-panel-date { font-size: 1.1rem; font-weight: 700; }
.day-panel-close {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--text-sub); transition: all var(--transition-fast);
}
.day-panel-close:hover { background: rgba(100,200,122,0.1); color: var(--text-main); }
.day-panel-section { margin-bottom: 16px; }
.day-panel-section-title { font-size: 0.78rem; font-weight: 600; color: var(--text-sub); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.day-panel-mood { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-panel-mood-emoji { font-size: 1.5rem; }
.day-panel-mood-label { font-size: 0.88rem; color: var(--accent); font-weight: 600; }
.day-panel-todo-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg-input); border-radius: var(--radius-btn); margin-bottom: 4px;
  font-size: 0.82rem; cursor: pointer; transition: background var(--transition-fast);
}
.day-panel-todo-item:hover { background: var(--bg-card-hover); }
.day-panel-todo-item.done { opacity: 0.5; text-decoration: line-through; }
.day-panel-diary-preview {
  font-size: 0.85rem; line-height: 1.7; color: var(--text-sub);
  padding: 10px 14px; background: var(--bg-input); border-radius: var(--radius-btn);
  border-left: 3px solid var(--accent-line);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.day-panel-diary-link { font-size: 0.78rem; color: var(--accent); font-weight: 600; margin-top: 6px; display: inline-block; cursor: pointer; }
.day-panel-diary-link:hover { text-decoration: underline; }
.day-panel-event {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg-input); border-radius: var(--radius-btn); margin-bottom: 4px;
}
.day-panel-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.day-panel-event-title { font-size: 0.85rem; font-weight: 600; }
.day-panel-event-note { font-size: 0.72rem; color: var(--text-sub); }
.day-panel-add-btn {
  display: flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600;
  color: var(--accent); padding: 6px 0; cursor: pointer;
  transition: opacity var(--transition-fast);
}
.day-panel-add-btn:hover { opacity: 0.8; }

/* Calendar Stats */
.cal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.cal-stat-card { text-align: center; padding: 14px 10px; }
.cal-stat-icon { font-size: 1.2rem; margin-bottom: 4px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cal-stat-icon i[data-lucide] { width: 1.2rem; height: 1.2rem; }
.cal-stat-value { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 2px; }

/* Responsive Calendar */
@media (max-width: 640px) {
  .cal-cell { min-height: 52px; padding: 4px; }
  .cal-cell-date { font-size: 0.7rem; }
  .cal-cell-date .today-badge { width: 20px; height: 20px; font-size: 0.65rem; }
  .cal-cell-indicators { gap: 2px; }
  .cal-ind { width: 5px; height: 5px; }
  .cal-cell-mood { display: none; }
  .cal-legend { display: none; }
  .cal-stats { grid-template-columns: repeat(2, 1fr); }
  .cal-week-grid { overflow-x: auto; grid-template-columns: repeat(7, minmax(120px, 1fr)); padding-bottom: 8px; }
  .cal-nav { flex-direction: column; align-items: flex-start; }
  .cal-nav-right { width: 100%; justify-content: space-between; }
}

@media (min-width: 641px) {
  .cal-page { padding: 28px 24px; }
}

@media (min-width: 1025px) {
  .cal-page { padding: 32px 32px; }
  /* Desktop: side panel instead of bottom sheet */
  .day-panel-overlay { align-items: stretch; justify-content: flex-end; }
  .day-panel {
    max-width: 380px; width: 380px; height: 100%; max-height: 100%;
    border-radius: 0; transform: translateX(100%);
  }
  .day-panel-overlay.open .day-panel { transform: translateX(0); }
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
.settings-page { padding: 20px 16px; max-width: 640px; margin: 0 auto; }
.settings-page-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; }

/* Accordion */
.settings-accordion { display: flex; flex-direction: column; gap: 8px; }
.settings-section {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.settings-acc-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: none; border: none; cursor: pointer;
  color: var(--text-main); text-align: left;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.settings-acc-btn:hover { background: var(--bg-card-hover); }
.settings-section.open .settings-acc-btn { border-bottom-color: var(--border); }
.settings-acc-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.settings-acc-label { font-size: 0.95rem; font-weight: 600; flex: 1; }
.settings-acc-chevron {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--text-sub);
  transition: transform var(--transition-fast);
}
.settings-section.open .settings-acc-chevron { transform: rotate(180deg); }
.settings-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.settings-section.open .settings-acc-body { max-height: 4000px; }

.settings-section-title {
  font-size: 0.88rem; font-weight: 700; color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.settings-section-icon { width: 18px; height: 18px; stroke-width: 2; }
.settings-card {
  padding: 20px;
  transition: background-color var(--transition-theme);
}
.settings-divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Profile */
.profile-avatar-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; position: relative; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: #0d1117;
}
.profile-avatar-edit {
  position: absolute; bottom: 0; right: calc(50% - 48px);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); cursor: pointer; transition: all var(--transition-fast);
}
.profile-avatar-edit:hover { border-color: var(--accent); color: var(--accent); }
.btn-save-profile {
  width: 100%; padding: 10px; margin-top: 8px; display: flex; align-items: center;
  justify-content: center; gap: 6px; font-size: 0.88rem;
}
.btn-save-profile:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Theme Options */
.theme-options { display: flex; gap: 12px; }
.theme-option { flex: 1; cursor: pointer; }
.theme-option input[type="radio"] { display: none; }
.theme-option-content {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border: 2px solid var(--border); border-radius: var(--radius-card);
  transition: all var(--transition-fast);
}
.theme-option input:checked + .theme-option-content { border-color: var(--accent); background: var(--accent-glow); }
.theme-option-content:hover { border-color: rgba(100,200,122,0.4); }
.theme-option-label { font-size: 0.78rem; font-weight: 600; }
.theme-option input:checked + .theme-option-content .theme-option-label { color: var(--accent); }

.theme-option-preview { display: flex; gap: 4px; align-items: center; }
.tp-bg, .tp-card, .tp-accent { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(128,128,128,0.2); }
.dark-preview .tp-bg { background: #0d1117; }
.dark-preview .tp-card { background: #161b22; }
.dark-preview .tp-accent { background: #64c87a; }
.light-preview .tp-bg { background: #f6f8fa; }
.light-preview .tp-card { background: #ffffff; }
.light-preview .tp-accent { background: #64c87a; }
.system-preview .tp-bg { background: linear-gradient(135deg, #0d1117 50%, #f6f8fa 50%); }
.system-preview .tp-card { background: linear-gradient(135deg, #161b22 50%, #ffffff 50%); }
.system-preview .tp-accent { background: #64c87a; }

/* Toggle Switch */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.settings-row-info { flex: 1; }
.settings-row-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; }
.settings-row-desc { font-size: 0.75rem; color: var(--text-sub); }
.settings-row-extra { padding: 8px 0 4px; }
.settings-future-note {
  font-size: 0.72rem; color: var(--text-dim); text-align: center; margin-top: 12px;
  padding: 8px; background: var(--bg-input); border-radius: var(--radius-btn);
}

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--border);
  border-radius: 12px; transition: all var(--transition-fast);
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  left: 3px; bottom: 3px; background: var(--text-main);
  transition: all var(--transition-fast);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: #0d1117; }

/* Data Actions */
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.data-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-radius: var(--radius-btn); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition-fast); border: 1px solid var(--border);
  color: var(--text-main); background: transparent; font-family: inherit;
}
.data-btn:hover { border-color: var(--accent); color: var(--accent); }
.data-btn-export { flex: 1; justify-content: center; }
.data-btn-import { flex: 1; justify-content: center; }
.data-btn-danger {
  width: 100%; justify-content: center; border-color: rgba(248,81,73,0.3);
  color: var(--danger); background: rgba(248,81,73,0.05);
}
.data-btn-danger:hover { background: rgba(248,81,73,0.12); border-color: var(--danger); }

/* Integrations */
.integration-item { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.integration-icon { font-size: 1.3rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-input); flex-shrink: 0; color: var(--accent); }
.integration-icon i[data-lucide] { width: 1.2rem; height: 1.2rem; }
.integration-info { flex: 1; }
.integration-name { font-size: 0.88rem; font-weight: 600; }
.integration-status { font-size: 0.72rem; font-weight: 500; }
.integration-status.disconnected { color: var(--text-dim); }
.integration-status.connected { color: var(--accent); }
.integration-btn {
  padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-sub); background: transparent;
  cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0;
}
.integration-btn:hover { border-color: var(--accent); color: var(--accent); }

/* App Info */
.app-info-row { display: flex; align-items: center; justify-content: space-between; }
.app-info-label { font-size: 0.82rem; color: var(--text-sub); }
.app-info-value { font-size: 0.82rem; font-weight: 600; }
.app-info-links { display: flex; flex-direction: column; gap: 10px; }
.app-info-link {
  font-size: 0.82rem; color: var(--text-sub); display: flex; align-items: center; gap: 6px;
  transition: color var(--transition-fast);
}
.app-info-link:hover { color: var(--accent); }

/* Settings responsive */
@media (min-width: 641px) {
  .settings-page { padding: 28px 24px; }
}
@media (min-width: 1025px) {
  .settings-page { padding: 32px 32px; }
}

/* ============================================
   EVENT MODAL EXTRAS
   ============================================ */
.event-delete-area {
  text-align: center; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.event-delete-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.82rem; color: var(--danger); font-weight: 600;
  cursor: pointer; background: none; border: none; font-family: inherit;
  padding: 8px 12px; border-radius: var(--radius-btn);
  transition: all var(--transition-fast);
}
.event-delete-link:hover { background: rgba(248,81,73,0.1); }

/* Day panel event card with edit icon */
.day-panel-event-row { display: flex; align-items: center; gap: 8px; }
.day-panel-event-content { flex: 1; cursor: pointer; }
.day-panel-event-edit {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: all var(--transition-fast);
  cursor: pointer; background: none; border: none;
}
.day-panel-event-edit:hover { color: var(--accent); background: rgba(100,200,122,0.1); }
.day-panel-event-edit svg { width: 14px; height: 14px; }

/* Day panel edit button (pencil icon for todos, events, diary) */
.day-panel-edit-btn {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: all var(--transition-fast);
  cursor: pointer; background: none; border: none; padding: 0;
}
.day-panel-edit-btn:hover { color: var(--accent); background: rgba(100,200,122,0.1); }
.day-panel-edit-btn svg { width: 14px; height: 14px; }

/* Task card edit button */
.task-edit-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: all var(--transition-fast);
  cursor: pointer; background: none; border: none; padding: 0;
}
.task-edit-btn:hover { color: var(--accent); background: rgba(100,200,122,0.1); }
.task-edit-btn svg { width: 16px; height: 16px; }

/* Audition deadline display */
.audition-deadline {
  font-size: 0.85rem; font-weight: 600;
}

/* Week view add event button */
.cal-week-add-event {
  font-size: 0.65rem; color: var(--accent); cursor: pointer;
  display: flex; align-items: center; gap: 3px; margin-top: 4px;
  padding: 3px 0; transition: opacity var(--transition-fast);
  background: none; border: none; font-family: inherit; font-weight: 600;
}
.cal-week-add-event:hover { opacity: 0.7; }

/* Week view event card clickable */
.cal-week-event { cursor: pointer; transition: opacity var(--transition-fast); }
.cal-week-event:hover { opacity: 0.8; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::selection { background: var(--accent-glow-strong); color: var(--text-main); }

/* Discord参加ボタン - テーマ対応 */
.integration-btn-discord { color: #0d1117; }
[data-theme="dark"] .integration-btn-discord { color: #fff; }
@media (prefers-color-scheme: dark) {
  :not([data-theme="light"]) .integration-btn-discord { color: #fff; }
}

/* ============================================
   AI Feedback UI
   ============================================ */
.ai-feedback-container { margin-top: 24px; }
.btn-request-ai {
  width: 100%; margin-bottom: 16px; background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ai-feedback-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  padding: 20px; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 4px 12px rgba(99,102,241,0.05); border-top: 3px solid rgba(99, 102, 241, 0.8);
}
.btn-close-ai {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  color: var(--text-sub); cursor: pointer; padding: 4px; border-radius: 50%;
  transition: all var(--transition-fast);
}
.btn-close-ai:hover { background: rgba(99,102,241,0.1); color: var(--text-main); }
.ai-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ai-card-icon {
  font-size: 24px; width: 40px; height: 40px; background: rgba(99,102,241,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.ai-card-icon i[data-lucide] { width: 1.3rem; height: 1.3rem; }
.ai-card-title { margin: 0; font-size: 1rem; color: var(--text-main); padding: 0; font-weight: 700; }
.ai-card-subtitle { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-sub); }
.ai-feedback-content { font-size: 0.95rem; line-height: 1.6; color: var(--text-main); }
.ai-feedback-content strong { color: rgba(133, 136, 255, 0.9); }
.ai-loading-box { text-align: center; padding: 24px; color: var(--text-sub); }
.ai-spinner {
  border: 3px solid rgba(99, 102, 241, 0.1); border-top: 3px solid rgba(99, 102, 241, 0.8);
  border-radius: 50%; width: 28px; height: 28px; animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}
.ai-settings-area { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.export-md-area { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.gemini-key-wrap { display: flex; gap: 8px; position: relative; }
.btn-toggle-key {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-sub); cursor: pointer; padding: 4px;
}
.btn-toggle-key:hover { color: var(--text-main); }
.gemini-caption { font-size: 0.75rem; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

/* =========================================
   ぼいラボ連携
   ========================================= */
.save-status {
  font-size: 0.85rem;
  margin-top: 8px;
  min-height: 20px;
  transition: all 0.3s ease;
}
.save-status.saving { color: var(--text-sub); }
.save-status.success { color: var(--primary); font-weight: bold; }
.save-status.error { color: var(--danger); font-weight: bold; }

.export-guide {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.guide-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.85rem;
}
.guide-link:hover { text-decoration: underline; }

/* =========================================
   Google カレンダー連携スタイル
   ========================================= */

/* エクスポート・インポート共通ブロック */
.calendar-sync-block {
  padding: 8px 0;
}

/* チェックボックスラベルを縦並びで表示 */
.export-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-main);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* インポートエリア（ボタン＋ファイル名横並び） */
.import-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.import-filename {
  font-size: 0.82rem;
  color: var(--text-sub);
  word-break: break-all;
}

/* セカンダリボタン（.ics ファイルを選択） */
.btn-secondary {
  background: rgba(100, 200, 122, 0.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(100, 200, 122, 0.3) !important;
}
.btn-secondary:hover {
  background: rgba(100, 200, 122, 0.2) !important;
}

/* ゴーストボタン（キャンセル） */
.btn-ghost {
  background: transparent !important;
  color: var(--text-sub) !important;
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* プレビューパネル */
.import-preview {
  margin-top: 16px;
  padding: 16px;
  background: rgba(100, 200, 122, 0.04);
  border: 1px solid rgba(100, 200, 122, 0.15);
  border-radius: 12px;
}
.preview-list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 12px;
  border-radius: 8px;
}
.preview-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
}
.preview-item:last-child {
  border-bottom: none;
}
.preview-item-date {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-bottom: 2px;
}
.preview-item-title {
  font-size: 0.88rem;
  color: var(--text-main);
  font-weight: 500;
}

/* プレビュー下部のアクション行 */
.preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.preview-actions span {
  font-size: 0.82rem;
  color: var(--text-sub);
  flex: 1;
  min-width: 120px;
}

/* ガイドテキスト */
.export-guide-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-main);
}
.export-guide-steps {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.export-guide-steps li {
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.6;
}

/* スマホ対応: ボタンを縦並びに */
@media (max-width: 480px) {
  .preview-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .preview-actions span {
    text-align: center;
  }
}
/* AI タスク提案 */
.ai-suggested-task {
  margin-top: 16px;
  padding: 16px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 12px;
}
.suggested-task-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 10px;
}
.suggested-task-body {
  margin-bottom: 12px;
}
.suggested-task-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary, #e2e8f0);
  margin-bottom: 6px;
}
.suggested-task-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.suggested-task-category,
.suggested-task-duration {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
}
.suggested-task-duration {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}
.btn-add-task {
  width: 100%;
  padding: 12px;
  border: 1px dashed rgba(124, 58, 237, 0.4);
  border-radius: 10px;
  background: transparent;
  color: #a78bfa;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-task:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: #a78bfa;
}
.btn-add-task.added {
  background: rgba(52, 211, 153, 0.1);
  border-color: #34d399;
  color: #34d399;
  cursor: default;
}
.btn-add-task:disabled {
  opacity: 0.8;
}

/* ============================================
   GROUP PAGE (Task 6) — グループ機能UI
   ============================================ */

/* ページ全体レイアウト */
.groups-page {
  padding: 24px 20px;
  max-width: 720px;
  margin: 0 auto;
}
.groups-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.groups-page-title {
  font-size: 1.4rem;
  font-weight: 700;
}
.groups-page-subtitle {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-top: 4px;
}

/* グループ/フレンド タブ切り替え */
.groups-tabs {
  display: flex;
  margin-bottom: 24px;
  background: var(--bg-input);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.groups-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-sub);
  border-radius: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.groups-tab.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* グループ作成/参加 アクションカード */
.groups-action-card {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
}
.groups-action-half {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.groups-action-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.groups-action-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.groups-action-icon i[data-lucide] { width: 2rem; height: 2rem; }
.groups-action-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}
.groups-action-desc {
  font-size: 0.72rem;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* グループ作成/参加ボタン */
.btn-group-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(100,200,122,0.3);
  width: 100%;
  cursor: pointer;
}
.btn-group-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(100,200,122,0.45);
}
.btn-group-action.btn-join {
  width: auto;
  border-radius: var(--radius-btn);
  flex-shrink: 0;
  padding: 10px 16px;
}

/* 招待コード入力行 */
.groups-join-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.groups-join-input {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
}

/* 参加グループ一覧セクション */
.groups-list-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.groups-section-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

/* グループカード（1グループ＝1カード） */
.group-card {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: taskSlideIn 0.3s ease;
}
.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
  flex-wrap: wrap;
}
.group-card-title {
  font-size: 1rem;
  font-weight: 700;
}

/* 招待コードボタン（クリックでコピー） */
.group-invite-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.group-invite-btn:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.group-invite-code {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-family: monospace;
}

/* リーダーボード（メンバー一覧） */
.group-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.group-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-fast);
}
.group-member-row:last-child {
  border-bottom: none;
}
.group-member-row:hover {
  background: rgba(100, 200, 122, 0.03);
}
/* 自分の行をハイライト */
.group-member-me {
  background: rgba(100, 200, 122, 0.06) !important;
}
.group-member-me:hover {
  background: rgba(100, 200, 122, 0.09) !important;
}

/* 順位アイコン */
.group-member-rank {
  width: 28px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* アバター円 */
.group-member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0d1117;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.group-member-info {
  flex: 1;
  min-width: 0;
}
.group-member-name {
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.group-member-role {
  font-size: 0.7rem;
  color: var(--text-sub);
  margin-top: 2px;
}

/* 「あなた」タグ */
.group-me-tag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-full);
}

/* ポイント表示 */
.group-member-points {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}
.group-points-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
}
.group-points-unit {
  font-size: 0.65rem;
  color: var(--text-sub);
  font-weight: 600;
}

/* レスポンシブ対応 */
@media (min-width: 641px) {
  .groups-page { padding: 28px 24px; }
  .groups-action-card { max-width: 600px; }
}
@media (min-width: 1025px) {
  .groups-page { padding: 32px 32px; }
}

/* ============================================
   SPLASH SCREEN
   ============================================ */
#splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: #111518;
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#splash-screen.splash-visible { opacity: 1; }
#splash-screen.splash-exit {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.splash-content {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  transform: scale(1);
  transition: transform 0.5s ease;
}
#splash-screen.splash-exit .splash-content {
  transform: scale(1.12);
}
.splash-logo-wrap {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  animation: splashLogoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.splash-logo {
  width: 120px; height: 120px; border-radius: 28px; object-fit: cover;
  filter: drop-shadow(0 0 24px rgba(100,200,122,0.5)) drop-shadow(0 0 48px rgba(100,200,122,0.25));
}
.splash-logo-wrap::after {
  content: ''; position: absolute; inset: -12px; border-radius: 40px;
  background: radial-gradient(circle, rgba(100,200,122,0.2) 0%, transparent 70%);
  animation: splashGlow 2s ease-in-out infinite alternate;
}
@keyframes splashGlow {
  from { opacity: 0.4; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}
.splash-brand {
  font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: 0.05em;
  opacity: 0;
  animation: splashTextIn 0.5s ease 0.3s forwards;
}
@keyframes splashTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.splash-loader-circle-wrap {
  width: 100px; height: 100px; position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: splashTextIn 0.5s ease 0.5s forwards;
}
.splash-progress-circle {
  width: 100px; height: 100px; transform: rotate(-90deg);
}
.splash-progress-bg {
  fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 6;
}
.splash-progress-fill {
  fill: none; stroke: url(#splash-gradient); stroke-width: 6;
  stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash-progress-fill { stroke: var(--primary, #64c87a); }
.splash-progress-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: 0.05em; font-family: monospace;
}
.dropdown-filters {
  display: flex; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap;
}
.form-select-filter {
  flex: 1; min-width: 130px; font-weight: 600; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238b949e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: right 12px top 50%; background-size: 10px auto;
  appearance: none;
}

/* ============================================
   USE CASE CARD (ホームグリッド内)
   ============================================ */
.usecase-card { cursor: pointer; }
.usecase-chips-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.usecase-chip {
  font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 9999px;
  background: rgba(100,200,122,0.08); border: 1px solid rgba(100,200,122,0.2);
  color: var(--accent); white-space: nowrap; transition: all 0.2s ease;
}
.usecase-card:hover .usecase-chip {
  background: rgba(100,200,122,0.14); border-color: rgba(100,200,122,0.35);
}

/* ============================================
   USE CASE SECTION (ホーム下部)
   ============================================ */
.usecase-section {
  padding: 40px 20px 32px; max-width: 960px; margin: 0 auto;
}
.usecase-section-header { text-align: center; margin-bottom: 32px; }
.usecase-section-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 8px;
}
.usecase-section-sub { font-size: 0.88rem; color: var(--text-sub); }
.usecase-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.usecase-item-card {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), border-color var(--transition-normal), box-shadow var(--transition-slow);
  animation: cardFadeIn 0.4s ease both;
}
.usecase-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(100,200,122,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(100,200,122,0.1);
}
.usecase-item-icon-wrap {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.usecase-item-icon { font-size: 1.5rem; line-height: 1; }
.usecase-item-title { font-size: 1rem; font-weight: 700; color: var(--text-main); line-height: 1.4; }
.usecase-item-desc { font-size: 0.82rem; color: var(--text-sub); line-height: 1.7; flex: 1; }
.usecase-item-badge {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 700;
  padding: 3px 10px; border-radius: 9999px;
  color: var(--accent); border: 1px solid rgba(100,200,122,0.3);
  background: rgba(100,200,122,0.08); width: fit-content; margin-top: 4px;
}
@media (min-width: 641px) {
  .usecase-section { padding: 48px 24px 40px; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .usecase-section-title { font-size: 1.8rem; }
}
@media (min-width: 1025px) {
  .usecase-section { padding: 56px 32px 48px; }
  .usecase-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ============================================
   Exchange & Friends Additional UI
   ============================================ */
.btn-exchange {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; border: none; padding: 6px 12px; border-radius: 20px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: all var(--transition-fast); box-shadow: 0 2px 8px rgba(100,200,122,0.3);
}
.btn-exchange:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(100,200,122,0.4);
}
.exchange-item-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.exchange-item-icon {
  font-size: 2.5rem; line-height: 1; margin-bottom: 4px;
}
.exchange-item-name {
  font-size: 0.95rem; font-weight: 700; color: var(--text-main);
}
.exchange-item-price {
  font-size: 0.85rem; font-weight: 800; color: var(--primary);
  background: rgba(100, 200, 122, 0.1); padding: 2px 8px; border-radius: 12px;
}
.btn-exchange-action {
  margin-top: 8px; font-size: 0.8rem; padding: 6px 12px;
}
.friend-request-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px;
}
.friend-request-icon-btn {
  background: none; border: none; padding: 6px; cursor: pointer;
  border-radius: 50%; transition: all var(--transition-fast);
  display: inline-flex; align-items: center; justify-content: center;
}
.friend-request-icon-btn.reject { color: var(--danger); background: rgba(248,81,73,0.1); }
.friend-request-icon-btn.reject:hover { background: rgba(248,81,73,0.2); }
.friend-request-icon-btn.accept { color: #3ecf8e; background: rgba(62,207,142,0.1); }
.friend-request-icon-btn.accept:hover { background: rgba(62,207,142,0.2); }

/* =========================================
   Aura & Title Badge Styles
   ========================================= */

/* --- Cyber Green (サイバーグリーン) --- */
.aura-cyber {
  box-shadow: 0 0 0 2px rgba(100,200,122,0.9), 0 0 12px 4px rgba(100,200,122,0.5), 0 0 24px 6px rgba(100,200,122,0.2);
  animation: pulse-cyber 2s ease-in-out infinite alternate;
}
@keyframes pulse-cyber {
  0%   { box-shadow: 0 0 0 2px rgba(100,200,122,0.9), 0 0 10px 3px rgba(100,200,122,0.5), 0 0 20px 5px rgba(100,200,122,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(100,200,122,1),   0 0 18px 6px rgba(100,200,122,0.7), 0 0 36px 10px rgba(100,200,122,0.3); }
}

/* --- Flame (炎) --- */
.aura-flame {
  box-shadow: 0 0 0 2px rgba(251,113,33,0.9), 0 0 12px 4px rgba(251,113,33,0.5), 0 0 24px 6px rgba(239,68,68,0.2);
  animation: pulse-flame 1.6s ease-in-out infinite alternate;
}
@keyframes pulse-flame {
  0%   { box-shadow: 0 0 0 2px rgba(251,113,33,0.9), 0 0 10px 3px rgba(251,113,33,0.5), 0 0 20px 5px rgba(239,68,68,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(239,68,68,1),    0 0 18px 6px rgba(251,113,33,0.8), 0 0 36px 10px rgba(251,113,33,0.4); }
}

/* --- Aurora (北極光) --- */
.aura-aurora {
  animation: pulse-aurora 3s ease-in-out infinite;
}
@keyframes pulse-aurora {
  0%   { box-shadow: 0 0 0 2px rgba(139,92,246,0.8), 0 0 12px 4px rgba(139,92,246,0.5), 0 0 24px 6px rgba(56,189,248,0.2); }
  50%  { box-shadow: 0 0 0 2px rgba(56,189,248,0.8), 0 0 12px 4px rgba(56,189,248,0.5), 0 0 24px 6px rgba(139,92,246,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(139,92,246,0.8), 0 0 12px 4px rgba(139,92,246,0.5), 0 0 24px 6px rgba(56,189,248,0.2); }
}

/* --- Gold (ゴールド) --- */
.aura-gold {
  box-shadow: 0 0 0 2px rgba(250,204,21,0.9), 0 0 12px 4px rgba(250,204,21,0.5), 0 0 24px 6px rgba(234,179,8,0.2);
  animation: pulse-gold 2.2s ease-in-out infinite alternate;
}
@keyframes pulse-gold {
  0%   { box-shadow: 0 0 0 2px rgba(250,204,21,0.9), 0 0 10px 3px rgba(250,204,21,0.5), 0 0 20px 5px rgba(234,179,8,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(250,204,21,1),   0 0 18px 8px rgba(250,204,21,0.8), 0 0 40px 12px rgba(250,204,21,0.4); }
}

/* --- Void (闇) --- */
.aura-void {
  box-shadow: 0 0 0 2px rgba(168,85,247,0.6), 0 0 12px 4px rgba(109,40,217,0.5), 0 0 24px 6px rgba(49,10,108,0.5);
  animation: pulse-void 2.8s ease-in-out infinite alternate;
}
@keyframes pulse-void {
  0%   { box-shadow: 0 0 0 2px rgba(168,85,247,0.5), 0 0 8px 3px rgba(109,40,217,0.4), 0 0 20px 6px rgba(49,10,108,0.4); }
  100% { box-shadow: 0 0 0 2px rgba(216,180,254,0.8), 0 0 16px 6px rgba(168,85,247,0.6), 0 0 36px 10px rgba(109,40,217,0.3); }
}

.equipped-title-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =========================================
   Exchange Modal - リニューアル
   ========================================= */
.exchange-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}
@media (max-width: 400px) {
  .exchange-grid { grid-template-columns: 1fr; }
}
.exchange-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 12px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, transform 0.2s;
}
.exchange-item-card:hover {
  border-color: rgba(100,200,122,0.4);
  transform: translateY(-2px);
}
.exchange-item-card.owned {
  border-color: rgba(100,200,122,0.5);
  background: rgba(100,200,122,0.04);
}
.exchange-item-card.equipped-card {
  border-color: var(--accent);
  background: rgba(100,200,122,0.08);
}

/* アバタープレビュー（交換所カード内の縮小版アバター） */
.aura-preview-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0d1117;
  margin-bottom: 4px;
  flex-shrink: 0;
  transition: all 0.3s;
}
.exchange-item-name { font-size: 0.88rem; font-weight: 700; color: var(--text-main); }
.exchange-item-price {
  font-size: 0.8rem; font-weight: 800;
  color: #f0883e;
  background: rgba(240,136,62,0.1);
  padding: 2px 10px; border-radius: 12px;
}
.exchange-item-status {
  font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 9999px;
  margin-top: 2px;
}
.exchange-item-status.status-owned {
  background: rgba(100,200,122,0.15);
  color: var(--accent);
  border: 1px solid rgba(100,200,122,0.3);
}
.exchange-item-status.status-equipped {
  background: var(--accent);
  color: #0d1117;
}
.btn-exchange-buy {
  margin-top: 4px; font-size: 0.78rem; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117; border: none; cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(100,200,122,0.3);
}
.btn-exchange-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(100,200,122,0.4); }
.btn-exchange-buy:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-exchange-equip {
  margin-top: 4px; font-size: 0.78rem; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; width: 100%;
  background: transparent;
  color: var(--accent); border: 1px solid var(--accent-line); cursor: pointer;
  transition: all 0.2s;
}
.btn-exchange-equip:hover { background: var(--accent-glow); }
.btn-exchange-equip.btn-unequip {
  color: var(--text-sub); border-color: var(--border);
}
.btn-exchange-equip.btn-unequip:hover { background: rgba(255,255,255,0.04); }

/* =========================================
   Settings - 装備中コスメ表示
   ========================================= */
.equipped-cosmetics-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.equipped-cosm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
}
.cosm-label { color: var(--text-sub); }
.cosm-value { font-weight: 700; color: var(--text-main); }

/* profile-points-block */
.profile-points-block {
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 12px;
  margin-top: 12px;
  text-align: center;
}
.profile-points-label { font-size: 0.85rem; color: var(--text-sub); }
.profile-points-value {
  font-size: 1.2rem; font-weight: 700; color: #f0883e; margin-top: 2px;
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.profile-points-unit { font-size: 0.8rem; font-weight: 400; }

/* Exchange modal header */
.exchange-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.exchange-modal-title {
  font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.exchange-my-points-badge {
  font-size: 0.9rem; font-weight: 700;
  background: var(--bg-body, var(--bg-input));
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-main);
}
.exchange-my-points-badge span { color: var(--accent); }

/* =========================================
   Tech Icons & Dark Green Accents
   ========================================= */
.tech-icon-green {
  color: #64c87a !important;
  filter: drop-shadow(0 0 4px rgba(100, 200, 122, 0.4));
}

.text-tech-green {
  color: var(--accent);
  font-family: inherit;
  letter-spacing: 0.02em;
}

/* =========================================
   Settings - オーラ管理 (Inventory)
   ========================================= */
.settings-aura-manager {
  margin-top: 24px;
}

.inventory-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-aura-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
  background: var(--bg-input);
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
}

.aura-inventory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
}

.aura-inventory-card:hover {
  transform: translateY(-2px);
}

.aura-inventory-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 2px solid var(--border);
  transition: all 0.2s;
  font-size: 1rem;
}

.aura-inventory-card.active .aura-inventory-preview {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.aura-inventory-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-sub);
  text-align: center;
}

.aura-inventory-card.active .aura-inventory-name {
  color: var(--accent);
}

.equipped-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  display: none;
}

.aura-inventory-card.active .equipped-dot {
  display: block;
}

/* 称号用インベントリ */
.title-inventory-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.title-inventory-item {
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.title-inventory-item.active {
  background: var(--accent);
  color: #0d1117;
  border-color: var(--accent);
}

/* ============================================
   Global FAB (Floating Action Button) & Handedness
   ============================================ */
.global-fab {
  position: fixed;
  /* モバイル: 下部ナビバーから十分な距離を確保 */
  bottom: calc(var(--tabbar-height) + 36px);
  right: 20px;
  /* 前より一回り大きく */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  color: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(100,200,122,0.45);
  /* FABはボトムナビ(100)より前・モーダル/パネル(200)より後ろのレイヤーに配置 */
  z-index: 150;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  border: none;
  cursor: pointer;
}
.global-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(100,200,122,0.55);
}
.global-fab:active {
  transform: scale(0.95);
}
.global-fab .fab-icon {
  /* アイコンも一回り大きく */
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
}
/* モバイル・左利き: 左端から少し余裕を持たせた位置に配置 */
body.left-handed .global-fab {
  right: auto;
  left: 24px;
}
/* PCデスクトップ: タブバーがないので調整 */
@media (min-width: 1025px) {
  .global-fab {
    bottom: 36px;
    right: 36px;
  }
  /* PC左利き: サイドバー(240px)を完全に避け、コンテンツエリア内の左下に配置 */
  body.left-handed .global-fab {
    right: auto;
    left: calc(var(--sidebar-width) + 48px);
    bottom: 36px;
  }
}

/* ============================================
   Handedness Card Toggle UI — Green-tech style
   ============================================ */

/* 選択されたカードをアクセントカラーでハイライト */
#hand-btn-right[data-active="true"],
#hand-btn-left[data-active="true"] {
  border-color: var(--accent) !important;
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 16px var(--accent-glow-strong);
}
#hand-btn-right[data-active="true"] .hand-card-icon,
#hand-btn-left[data-active="true"] .hand-card-icon {
  color: var(--accent);
  opacity: 1;
}
#hand-btn-right[data-active="true"] .hand-card-dot,
#hand-btn-left[data-active="true"] .hand-card-dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* 未選択カードにホバー効果 */
#hand-btn-right:not([data-active="true"]):hover,
#hand-btn-left:not([data-active="true"]):hover {
  border-color: rgba(100,200,122,0.3) !important;
  background: var(--bg-card-hover) !important;
  color: var(--text-main) !important;
}

/* アイコンラッパー（グリーンテック共通スタイルに揃える） */
.hand-card-icon {
  width: 36px; height: 36px;
  color: var(--text-dim);
  opacity: 0.7;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
/* 選択状態インジケーター */
.hand-card-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}