/* ============================================================
   ChatSpark — 白ベース + パステルワンポイント + ダークモード
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---- Light Theme ---- */
[data-theme="light"]{
  --bg:#ffffff;--bg-card:#fafafa;--bg-elevated:#f5f5f5;
  --accent:#c9a0ff;--accent-soft:rgba(201,160,255,.12);--accent-gradient:linear-gradient(135deg,#c9a0ff,#ffb3c6);
  --text:#333333;--text-secondary:#666666;--text-muted:#999999;
  --border:rgba(0,0,0,.08);--shadow:0 1px 8px rgba(0,0,0,.04);--shadow-lg:0 4px 20px rgba(0,0,0,.06);
}
/* ---- Dark Theme ---- */
[data-theme="dark"]{
  --bg:#1a1a2e;--bg-card:#252540;--bg-elevated:#2e2e4a;
  --accent:#c9a0ff;--accent-soft:rgba(201,160,255,.15);--accent-gradient:linear-gradient(135deg,#c9a0ff,#ffb3c6);
  --text:#e8e8f0;--text-secondary:#b0b0c8;--text-muted:#7878a0;
  --border:rgba(255,255,255,.08);--shadow:0 1px 8px rgba(0,0,0,.2);--shadow-lg:0 4px 20px rgba(0,0,0,.3);
}

:root{--font:'Noto Sans JP','Inter',-apple-system,sans-serif;--radius:10px;--radius-sm:8px}

html{font-size:14px}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.8;transition:background .3s,color .3s}

.app{max-width:520px;margin:0 auto;padding:20px 16px}

/* Header */
.app-header{text-align:center;margin-bottom:20px}
.header-row{display:flex;align-items:center;justify-content:center;gap:12px;position:relative}
.app-header h1{font-size:1.5rem;font-weight:800}
.app-header h1 i{color:var(--accent);margin-right:4px}
.app-header p{font-size:.85rem;color:var(--text-muted);font-weight:500;margin-top:2px}
.accent{color:var(--accent)}

/* Theme Toggle */
.theme-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--bg-card);color:var(--text-muted);font-size:.9rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* Category Bar */
.category-bar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch}
.category-bar::-webkit-scrollbar{display:none}
.cat-btn{flex-shrink:0;padding:7px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card);font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;color:var(--text-secondary);white-space:nowrap}
.cat-btn i{margin-right:3px;font-size:.72rem}
.cat-btn:hover,.cat-btn.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* Card Stack */
.card-stack{position:relative;min-height:220px;margin-bottom:14px}
.topic-card{background:var(--bg-card);border-radius:var(--radius);padding:28px 22px;box-shadow:var(--shadow-lg);border:1px solid var(--border);text-align:center;animation:cardIn .35s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.topic-cat{font-size:.75rem;font-weight:600;color:var(--accent);margin-bottom:10px;display:inline-block;padding:3px 10px;background:var(--accent-soft);border-radius:14px}
.topic-text{font-size:1.05rem;font-weight:700;line-height:1.8;margin-bottom:10px;color:var(--text)}
.topic-hint{font-size:.78rem;color:var(--text-muted);font-weight:500}
.topic-hint i{color:var(--accent);margin-right:3px}

/* Actions */
.card-actions{display:flex;gap:10px;margin-bottom:24px}
.action-btn{flex:1;padding:12px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}
.action-btn i{margin-right:4px}
.action-btn.skip{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}
.action-btn.skip:hover{border-color:var(--accent);color:var(--accent)}
.action-btn.fav{background:var(--accent);color:#fff}
.action-btn.fav:hover{opacity:.9}

/* Favorites */
.favorites-section h2{font-size:.88rem;font-weight:700;margin-bottom:10px;color:var(--text)}
.favorites-section h2 i{color:var(--accent);margin-right:4px}
.favorites-section h2 span{color:var(--text-muted);font-weight:500}
.fav-list{display:flex;flex-direction:column;gap:6px}
.fav-item{padding:10px 12px;background:var(--bg-card);border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--border);display:flex;align-items:center;gap:10px}
.fav-item-text{flex:1;font-size:.82rem;font-weight:600;line-height:1.6}
.fav-item-cat{font-size:.68rem;font-weight:600;color:var(--accent);padding:2px 8px;background:var(--accent-soft);border-radius:10px;white-space:nowrap}
.fav-delete{background:none;border:none;font-size:.85rem;cursor:pointer;color:var(--text-muted);transition:color .2s}
.fav-delete:hover{color:#e74c3c}