/* ============================================
   SHOO ACTION - デザインシステム v2
   ============================================ */

:root {
    --accent-gradient: radial-gradient(circle at center, rgba(224,195,252,1) 0%, rgba(142,197,252,1) 100%);
    --primary:        #7c3aed;
    --primary-light:  #f5f3ff;
    --primary-dark:   #5b21b6;
    --success:        #10b981;
    --success-light:  #ecfdf5;
    --warning:        #f59e0b;
    --warning-light:  #fffbeb;
    --danger:         #ef4444;
    --danger-light:   #fef2f2;
    --bg:             #f7f5f2;
    --card:           #ffffff;
    --text:           #18181b;
    --text-muted:     #71717a;
    --border:         #e4dfdb;
    --shadow-sm:      0 1px 4px rgba(0,0,0,0.05);
    --shadow:         0 4px 20px rgba(0,0,0,0.07);
    --shadow-lg:      0 12px 40px rgba(0,0,0,0.10);
    --radius-xl:      24px;
    --radius-lg:      18px;
    --radius:         14px;
    --radius-sm:      10px;
    --radius-xs:      6px;
    --transition:     0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img{max-width:100%;display:block;}
a{color:var(--primary);text-decoration:none;}
input,button,textarea,select{font-family:inherit;font-size:inherit;}
ul{list-style:none;}

body {
    font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ---------- コンテナ ---------- */
.container { width:100%; max-width:960px; margin:0 auto; padding:0 20px; }

/* ---------- Lucide アイコン ---------- */
.icon { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; flex-shrink:0; }
.icon-sm { width:14px; height:14px; }
.icon-lg { width:24px; height:24px; }
.icon-xl { width:40px; height:40px; stroke-width:1.4; }
.icon-2xl{ width:56px; height:56px; stroke-width:1.2; }

/* ---------- ヘッダー ---------- */
.site-header {
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
    box-shadow:var(--shadow-sm);
}
.header-inner { display:flex; align-items:center; gap:16px; height:64px; }
.site-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-icon { font-size:1.4rem; }
.logo-text { font-family:'Inter',sans-serif; font-weight:700; font-size:1.1rem; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:.05em; }

.site-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-link { padding:6px 12px; border-radius:var(--radius-xs); font-size:.875rem; font-weight:500; color:var(--text-muted); transition:all var(--transition); display:flex; align-items:center; gap:6px; }
.nav-link:hover,.nav-link.active { background:var(--primary-light); color:var(--primary); }

.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-user { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-size:.875rem; }
.header-nickname { font-weight:600; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-points { color:var(--primary); font-weight:700; font-size:.8rem; }

.hamburger { display:none; flex-direction:column; justify-content:center; gap:4px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all var(--transition); }

/* ---------- フラッシュ ---------- */
.flash-message { padding:12px 0; font-size:.9rem; font-weight:500; }
.flash-message .container { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flash-success { background:var(--success-light); color:#065f46; }
.flash-error   { background:var(--danger-light);  color:#991b1b; }
.flash-info    { background:var(--primary-light); color:var(--primary-dark); }
.flash-close   { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.5; }

/* ---------- メイン ---------- */
.main-content { flex:1; padding-bottom:80px; }

/* ---------- セクション ---------- */
.section { margin-top:40px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title { font-size:1.05rem; font-weight:700; display:flex; align-items:center; gap:8px; }

/* ---------- カード ---------- */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }

/* ---------- ボタン ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 22px; border-radius:var(--radius-sm);
    font-weight:600; font-size:.875rem; cursor:pointer;
    border:2px solid transparent; transition:all var(--transition);
    text-decoration:none; white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary { background:var(--accent-gradient); color:#fff; border-color:transparent; }
.btn-primary:hover{ opacity:.88; }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover{ background:var(--primary-light); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger  { background:var(--danger);  color:#fff; }
.btn-sm  { padding:5px 14px; font-size:.8rem; }
.btn-lg  { padding:13px 28px; font-size:1rem; }
.btn-full{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-achieved { background:var(--success-light); color:var(--success); border-color:var(--success); cursor:default; }
.btn-white { background:#fff; color:var(--primary); }
.btn-white:hover{ background:rgba(255,255,255,.9); }

/* ---------- フォーム ---------- */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:.875rem; font-weight:600; margin-bottom:6px; }
.form-label .required { color:var(--danger); margin-left:4px; font-size:.72rem; }
.form-control { width:100%; padding:11px 14px; border:2px solid var(--border); border-radius:var(--radius-sm); font-size:.9rem; background:#fff; color:var(--text); transition:border-color var(--transition); }
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.form-hint  { font-size:.77rem; color:var(--text-muted); margin-top:4px; }
.form-error { font-size:.8rem; color:var(--danger); margin-top:4px; }

/* ---------- アバター ---------- */
.avatar {
    width:44px; height:44px; border-radius:50%;
    background:var(--accent-gradient);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.1rem; flex-shrink:0; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:32px; height:32px; border-radius:50%; background:var(--accent-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; overflow:hidden; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; }
.avatar-lg { width:80px; height:80px; border-radius:50%; background:var(--accent-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:2rem; flex-shrink:0; overflow:hidden; }
.avatar-lg img { width:100%; height:100%; object-fit:cover; }
.avatar-upload-wrap { position:relative; display:inline-block; }
.avatar-upload-btn { position:absolute; bottom:0; right:0; width:26px; height:26px; border-radius:50%; background:var(--accent-gradient); border:2px solid #fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ---------- バッジ ---------- */
.badge { display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:99px; font-size:.72rem; font-weight:600; }
.badge-easy    { background:#dcfce7; color:#166534; }
.badge-normal  { background:#fef3c7; color:#92400e; }
.badge-hard    { background:#fee2e2; color:#991b1b; }
.badge-primary { background:var(--primary-light); color:var(--primary-dark); }
.badge-success { background:var(--success-light); color:#065f46; }
.badge-featured{ background:var(--accent-gradient); color:#fff; }

/* ---------- 統計カード ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.stat-card { background:var(--card); border-radius:var(--radius); padding:20px 16px; text-align:center; box-shadow:var(--shadow); }
.stat-number { font-family:'Inter',sans-serif; font-size:2rem; font-weight:700; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-label  { font-size:.78rem; color:var(--text-muted); margin-top:5px; }

/* ---------- ミッションカード ---------- */
.missions-grid { display:grid; gap:14px; grid-template-columns:1fr; }
.mission-card {
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px 18px;
    display:flex; flex-direction:column; gap:12px;
    transition:box-shadow var(--transition),transform var(--transition);
    cursor:default;
}
.mission-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.mission-card.achieved { background:#fafffe; }

.mission-card-icon {
    width:48px; height:48px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
}
.mission-card-title { font-weight:700; font-size:.95rem; line-height:1.4; }
.mission-card-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.mission-card-desc { font-size:.82rem; color:var(--text-muted); line-height:1.7; flex:1; }
.mission-card-pts {
    font-family:'Inter',sans-serif; font-weight:800; font-size:1.5rem;
    background:var(--accent-gradient); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.mission-card-pts span { font-size:.7rem; font-weight:400; color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); }
.mission-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.mission-completed-count { font-size:.77rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }

/* ---------- カテゴリグループ ---------- */
.category-group { margin-bottom:40px; }
.category-group-title { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; margin-bottom:14px; }

/* ---------- タイムライン ---------- */
.timeline-list { display:flex; flex-direction:column; }
.timeline-item { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.timeline-item:last-child{ border-bottom:none; }
.timeline-meta { flex:1; min-width:0; }
.timeline-action { font-size:.88rem; font-weight:500; }
.timeline-action strong { color:var(--primary); }
.timeline-time  { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.timeline-points{ font-family:'Inter',sans-serif; font-weight:700; font-size:.9rem; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; }

/* ---------- リーダーボード ---------- */
.leaderboard-list { display:flex; flex-direction:column; gap:10px; }
.leaderboard-item { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:var(--radius-sm); padding:14px; box-shadow:var(--shadow-sm); }
.leaderboard-rank { font-family:'Inter',sans-serif; font-weight:700; font-size:1.4rem; width:32px; text-align:center; flex-shrink:0; }
.rank-1{color:#f59e0b;} .rank-2{color:#94a3b8;} .rank-3{color:#b45309;}
.leaderboard-name{ flex:1; font-weight:600; font-size:.9rem; }
.leaderboard-sub { font-size:.75rem; color:var(--text-muted); }
.leaderboard-pts { font-family:'Inter',sans-serif; font-weight:700; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:1rem; }

/* ---------- 注目ミッション ---------- */
.featured-card { background:var(--warning-light); border:1.5px solid #fcd34d; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.featured-label { display:inline-flex; align-items:center; gap:4px; background:var(--accent-gradient); color:#fff; padding:3px 10px; border-radius:99px; font-size:.72rem; font-weight:700; margin-bottom:10px; }
.featured-title { font-size:1rem; font-weight:700; margin-bottom:6px; }
.featured-meta  { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.featured-pts   { font-family:'Inter',sans-serif; font-size:2rem; font-weight:800; color:#d97706; }

/* ---------- レベルバー ---------- */
.level-info { background:var(--accent-gradient); border-radius:var(--radius-lg); padding:24px; color:#fff; }
.level-badge { display:inline-block; background:rgba(255,255,255,.25); padding:4px 14px; border-radius:99px; font-size:.8rem; font-weight:700; margin-bottom:6px; }
.level-title { font-size:1.5rem; font-weight:700; }
.level-points{ font-size:.85rem; opacity:.85; margin-top:4px; }
.progress-bar-wrap{ margin-top:14px; }
.progress-label{ display:flex; justify-content:space-between; font-size:.78rem; opacity:.85; margin-bottom:6px; }
.progress-bar  { height:8px; background:rgba(255,255,255,.3); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:#fff; border-radius:99px; transition:width .8s ease; }

/* ---------- ヒーロー ---------- */
.hero-banner { background:var(--accent-gradient); padding:36px 0 32px; }
.hero-title { font-size:1.5rem; font-weight:700; letter-spacing:.02em; color:#18181b; }
.hero-sub { font-size:.9rem; color:#3f3f46; margin-top:6px; }
.hero-cta { margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }

/* ヒーローユーザーカード */
.hero-user-card {
    background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
    border-radius:var(--radius); padding:16px 18px; margin-bottom:18px;
    display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm);
}
.hero-user-info{ flex:1; min-width:0; }
.hero-user-name{ font-weight:700; font-size:1rem; }
.hero-user-level{ font-size:.8rem; color:var(--text-muted); }
.hero-user-pts {
    font-family:'Inter',sans-serif; font-size:1.6rem; font-weight:800;
    background:var(--accent-gradient); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-user-pts span{ font-size:.75rem; font-weight:400; color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); }

/* ---------- タブ ---------- */
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:18px; }
.tab-btn{ padding:8px 16px; border:none; background:none; font-size:.875rem; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--transition); }
.tab-btn.active,.tab-btn:hover{ color:var(--primary); border-bottom-color:var(--primary); }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* ---------- 認証ページ ---------- */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); }
.auth-card { background:var(--card); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:40px 32px; width:100%; max-width:420px; }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-title { font-size:1.3rem; font-weight:700; margin-bottom:24px; }
.auth-footer{ margin-top:20px; text-align:center; font-size:.875rem; color:var(--text-muted); }

/* ---------- ミッション詳細 ---------- */
.mission-detail-header { background:var(--accent-gradient); padding:32px 0 28px; }
.mission-completed-banner { background:var(--success-light); border:2px solid var(--success); border-radius:var(--radius); padding:16px 20px; display:flex; align-items:center; gap:12px; color:#065f46; font-weight:600; margin-bottom:16px; }
.mission-detail-icon-wrap { width:80px; height:80px; border-radius:var(--radius-lg); background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:3rem; flex-shrink:0; }

/* ---------- 公開プロフィール ---------- */
.public-profile { text-align:center; padding:32px 0; }
.public-profile .avatar-lg { margin:0 auto 16px; }

/* ---------- テーブル ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.875rem; }
th{ background:var(--bg); padding:10px 14px; text-align:left; font-weight:600; border-bottom:2px solid var(--border); white-space:nowrap; }
td{ padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td{ background:#fafaf9; }

/* ---------- フッター ---------- */
.site-footer { background:#18181b; color:rgba(255,255,255,.6); padding:36px 0; }
.footer-inner{ text-align:center; }
.footer-inner .logo-text{ -webkit-text-fill-color:#fff; }
.footer-desc { margin-top:6px; font-size:.85rem; }
.footer-links{ display:flex; justify-content:center; gap:18px; margin:16px 0; flex-wrap:wrap; }
.footer-links a{ color:rgba(255,255,255,.5); font-size:.85rem; }
.footer-links a:hover{ color:#fff; }
.footer-copy{ font-size:.77rem; opacity:.4; }

/* ---------- ユーティリティ ---------- */
.text-center{text-align:center;} .text-muted{color:var(--text-muted);}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.flex{display:flex;} .flex-center{display:flex;align-items:center;} .justify-between{justify-content:space-between;}
.fw-700{font-weight:700;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.divider{border:none;border-top:1px solid var(--border);margin:22px 0;}
.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted);}
.empty-state .icon-empty{font-size:3rem;margin-bottom:14px;}
.spinner{width:18px;height:18px;border:2px solid rgba(124,58,237,.2);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 管理者テーマ ---------- */
body.admin-mode { background:#111827; color:#f9fafb; }
body.admin-mode .site-header { background:#1f2937; border-color:#374151; }
body.admin-mode .nav-link { color:#9ca3af; }
body.admin-mode .nav-link:hover,.admin-mode .nav-link.active { background:#374151; color:#fff; }
body.admin-mode .card { background:#1f2937; color:#f9fafb; box-shadow:none; border:1px solid #374151; }
body.admin-mode th { background:#111827; color:#9ca3af; border-color:#374151; }
body.admin-mode td { border-color:#374151; }
body.admin-mode tr:hover td { background:#111827; }
body.admin-mode .form-control { background:#374151; border-color:#4b5563; color:#f9fafb; }
body.admin-mode .form-label { color:#d1d5db; }
body.admin-mode .stat-card { background:#1f2937; border:1px solid #374151; }
body.admin-mode .site-footer { background:#0f172a; }

/* ============================================
   レスポンシブ
   ============================================ */
@media(min-width:480px) {
    .missions-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:900px) {
    .missions-grid{ grid-template-columns:repeat(3,1fr); }
    .stats-grid{ grid-template-columns:repeat(4,1fr); }
    .container{ padding:0 28px; }
}
@media(max-width:639px) {
    .site-nav{ display:none; }
    .site-nav.open { display:flex; flex-direction:column; position:absolute; top:64px;left:0;right:0; background:#fff; padding:12px; border-bottom:1px solid var(--border); box-shadow:var(--shadow); z-index:99; }
    .hamburger{ display:flex; }
    .header-nickname{ display:none; }
    .hero-title{ font-size:1.25rem; }
    .auth-card{ padding:28px 20px; }
    body.admin-mode .site-nav.open{ background:#1f2937; }
}