:root {
  /* Modern Light (Default) */
  --bg-page: #EAF0FA;
  --bg-card: linear-gradient(145deg, #ffffff 0%, #f0f5ff 100%);
  --text-primary: #1A2332;
  --text-secondary: #5A6A85;
  --border-color: rgba(190, 210, 240, 0.7);
  --yandex-blue: #0066FF;
  --yandex-blue-hover: #0052CC;
  --yandex-blue-glow: rgba(0, 102, 255, 0.25);
  --yandex-blue-text: #FFFFFF;
  --shadow-card: 0 2px 8px rgba(26, 35, 50, 0.04), 0 8px 24px rgba(26, 35, 50, 0.06);
  --shadow-card-hover: 0 8px 16px rgba(0, 102, 255, 0.06), 0 16px 48px rgba(26, 35, 50, 0.08);
  --shadow-button: 0 4px 16px rgba(0, 102, 255, 0.2);
  --radius-card: 14px;
  --radius-btn: 10px;
  --skeleton-base: #D6E0F0;
  --skeleton-shine: #EBF2FF;
  --badge-line-bg: linear-gradient(135deg, #25D366 0%, #06C755 100%);
  --badge-line-text: #FFFFFF;
  --badge-google-bg: #F0F5FF;
  --badge-google-text: #1A2332;
  --badge-anon-bg: #E3F2FD;
  --badge-anon-text: #1565C0;
  --badge-named-bg: #FFF3E0;
  --badge-named-text: #E65100;
  --progress-track: #D6E0F0;
  --progress-track-shadow: inset 0 1px 3px rgba(0, 50, 150, 0.08);
  --progress-fill: linear-gradient(90deg, #0066FF 0%, #3385FF 100%);
  --progress-warning: linear-gradient(90deg, #FFB300 0%, #FFC107 100%);
  --progress-danger: linear-gradient(90deg, #FF3B30 0%, #FF5E57 100%);
  --urgent-pulse-color: rgba(255, 59, 48, 0.4);
}

[data-theme="dark"] {
  --bg-page: #0F1320;
  --bg-card: linear-gradient(145deg, #1A2236 0%, #131929 100%);
  --text-primary: #EAF0FA;
  --text-secondary: #8B9BB4;
  --border-color: rgba(60, 85, 130, 0.5);
  --yandex-blue: #3385FF;
  --yandex-blue-hover: #1A73E8;
  --yandex-blue-glow: rgba(51, 133, 255, 0.3);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 16px rgba(51, 133, 255, 0.1), 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-button: 0 4px 20px rgba(51, 133, 255, 0.25);
  --skeleton-base: #1A2236;
  --skeleton-shine: #25304A;
  --badge-google-bg: #1A2236;
  --badge-google-text: #EAF0FA;
  --badge-anon-bg: rgba(21, 101, 192, 0.2);
  --badge-anon-text: #64B5F6;
  --badge-named-bg: rgba(230, 81, 0, 0.2);
  --badge-named-text: #FFB74D;
  --progress-track: #1A2236;
  --progress-track-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  --progress-fill: linear-gradient(90deg, #3385FF 0%, #66A3FF 100%);
  --urgent-pulse-color: rgba(255, 94, 87, 0.5);
}

/* =========================================
   🍎 Classic Theme (iOS 6 Skeuomorphism)
   ========================================= */
[data-style="classic"] {
  --bg-page: #c5ccd4;
  --bg-card: linear-gradient(to bottom, #fdfdfd 0%, #f2f2f2 100%);
  --text-primary: #333333;
  --text-secondary: #555555;
  --border-color: #9ba2ab;
  --yandex-blue: #3871ac;
  --yandex-blue-hover: #2a5a94;
  --yandex-blue-text: #ffffff;
  --shadow-card: 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-button: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --radius-card: 8px;
  --radius-btn: 6px;
  --progress-track: #b0b6bd;
  --progress-track-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.7);
  --progress-fill: linear-gradient(to bottom, #7ba7d9 0%, #4a85c2 49%, #3871ac 50%, #2a5a94 100%);
  --progress-warning: linear-gradient(to bottom, #f7d059 0%, #d4a31c 50%, #b08310 100%);
  --progress-danger: linear-gradient(to bottom, #e07474 0%, #c13030 50%, #941f1f 100%);
  --text-shadow-light: 0 1px 0 rgba(255,255,255,0.9);
  --text-shadow-dark: 0 -1px 0 rgba(0,0,0,0.6);
}

[data-style="classic"][data-theme="dark"] {
  --bg-page: #2c2c2c;
  --bg-card: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%);
  --text-primary: #e8e8e8;
  --text-secondary: #aaaaaa;
  --border-color: #111111;
  --yandex-blue: #4a90e2;
  --shadow-card: 0 2px 5px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
  --progress-track: #1a1a1a;
  --progress-fill: linear-gradient(to bottom, #5ca0e6 0%, #3871ac 50%, #224a7a 100%);
  --text-shadow-light: none;
  --text-shadow-dark: 0 -1px 0 rgba(0,0,0,0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Pretendard JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color 0.4s ease, color 0.4s ease;
  -webkit-font-smoothing: antialiased;
}

[data-style="classic"] body {
  background-color: #c5ccd4;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M7 0h1v1H7V0zM0 7h1v1H0V7zm3-4h1v1H3V3zm4 4h1v1H7V7zM0 0h1v1H0V0zm7 7h1v1H7V7zM3 3h1v1H3V3zm4-3h1v1H7V0zM0 4h1v1H0V4z'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
[data-style="classic"][data-theme="dark"] body {
  background-color: #2c2c2c;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M7 0h1v1H7V0zM0 7h1v1H0V7zm3-4h1v1H3V3zm4 4h1v1H7V7zM0 0h1v1H0V0zm7 7h1v1H7V7zM3 3h1v1H3V3zm4-3h1v1H7V0zM0 4h1v1H0V4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Header */
.header {
  background-color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(180%);
}
[data-theme="dark"] .header { background-color: rgba(15, 19, 32, 0.75); }

[data-style="classic"] .header {
  background: linear-gradient(to bottom, #5c5c5c 0%, #424242 49%, #2b2b2b 50%, #1a1a1a 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 6px rgba(0,0,0,0.4);
  backdrop-filter: none;
}
[data-style="classic"][data-theme="dark"] .header {
  background: linear-gradient(to bottom, #333 0%, #1a1a1a 49%, #0a0a0a 50%, #000 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 3px 6px rgba(0,0,0,0.8);
}

.header-content { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }

.site-title {
  font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 0.7rem; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--yandex-blue) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.site-title i { color: var(--yandex-blue); filter: drop-shadow(0 2px 6px var(--yandex-blue-glow)); -webkit-text-fill-color: var(--yandex-blue); }

[data-style="classic"] .site-title {
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.5);
  background: none; -webkit-text-fill-color: #fff; letter-spacing: normal; font-weight: bold;
}
[data-style="classic"] .site-title i { -webkit-text-fill-color: #fff; filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.8)); }

.theme-toggle {
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border-color); border-radius: var(--radius-btn);
  width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 1.1rem; transition: all 0.2s ease;
}
.theme-toggle:focus-visible { outline: 2px solid var(--yandex-blue); outline-offset: 2px; }
[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.theme-toggle:hover { background-color: var(--yandex-blue); color: white; border-color: var(--yandex-blue); transform: scale(1.05); box-shadow: 0 4px 16px var(--yandex-blue-glow); }

[data-style="classic"] .theme-toggle {
  background: linear-gradient(to bottom, #666 0%, #444 49%, #333 50%, #111 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
  color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); border-radius: 6px;
}
[data-style="classic"] .theme-toggle:hover { 
  background: linear-gradient(to bottom, #777 0%, #555 49%, #444 50%, #222 100%); 
  transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.6); color: #fff; 
}

/* Main Layout */
.main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.intro { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 1.8rem; margin-bottom: 2rem; box-shadow: var(--shadow-card); transition: transform 0.2s ease; }
.intro h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
.intro p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem; }

.legend-box { background-color: rgba(0, 102, 255, 0.03); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; }
[data-theme="dark"] .legend-box { background-color: rgba(51, 133, 255, 0.05); }

[data-style="classic"] .intro, [data-style="classic"] .legend-box {
  background: linear-gradient(to bottom, #fdfdfd 0%, #f2f2f2 100%); border: 1px solid #9ba2ab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 #fff; border-radius: 8px;
}
[data-style="classic"][data-theme="dark"] .intro, [data-style="classic"][data-theme="dark"] .legend-box {
  background: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%); border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08);
}

.legend-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.8rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; }
.legend-title i { color: var(--text-secondary); }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
.legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.line-badge { background: var(--badge-line-bg); color: var(--badge-line-text); }
.google-badge, .no-account-badge { background-color: var(--badge-google-bg); color: var(--badge-google-text); border-color: var(--border-color); }
.anonymous-badge { background-color: var(--badge-anon-bg); color: var(--badge-anon-text); border-color: rgba(21, 101, 192, 0.15); }
.named-badge { background-color: var(--badge-named-bg); color: var(--badge-named-text); }

[data-style="classic"] .badge {
  background: linear-gradient(to bottom, #f8f8f8, #e0e0e0); border: 1px solid #999;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.1);
  color: #333; text-shadow: 0 1px 0 #fff; border-radius: 12px;
  padding: 0.25rem 0.6rem; text-transform: none; font-weight: bold; letter-spacing: normal;
}
[data-style="classic"] .line-badge { background: linear-gradient(to bottom, #4cd964 0%, #25D366 49%, #06C755 50%, #04a044 100%); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); border: 1px solid #048a3a; }
[data-style="classic"] .anonymous-badge { background: linear-gradient(to bottom, #a5d6a7 0%, #66bb6a 49%, #4caf50 50%, #388e3c 100%); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); border: 1px solid #2e7d32; }
[data-style="classic"] .named-badge { background: linear-gradient(to bottom, #ffcc80 0%, #ffa726 49%, #fb8c00 50%, #e65100 100%); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); border: 1px solid #bf360c; }
[data-style="classic"][data-theme="dark"] .badge { background: linear-gradient(to bottom, #555, #333); border: 1px solid #111; color: #ddd; text-shadow: 0 -1px 0 #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }

/* Sections */
.section-title { font-size: 1.15rem; font-weight: 700; margin: 2.5rem 0 1rem; display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(135deg, var(--text-primary) 30%, var(--yandex-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-title i { color: var(--yandex-blue); -webkit-text-fill-color: var(--yandex-blue); }
.upcoming-surveys .section-title i { color: #FFB300; filter: drop-shadow(0 2px 4px rgba(255, 179, 0, 0.2)); -webkit-text-fill-color: #FFB300; }

[data-style="classic"] .intro h2, [data-style="classic"] .section-title, [data-style="classic"] .survey-info h3, [data-style="classic"] .legend-title { 
  text-shadow: var(--text-shadow-light); letter-spacing: normal; font-weight: bold; background: none; -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); 
}
[data-style="classic"] .section-title i { -webkit-text-fill-color: var(--yandex-blue); }
[data-style="classic"][data-theme="dark"] .intro h2, [data-style="classic"][data-theme="dark"] .section-title, [data-style="classic"][data-theme="dark"] .survey-info h3, [data-style="classic"][data-theme="dark"] .legend-title { 
  text-shadow: var(--text-shadow-dark); color: #fff; -webkit-text-fill-color: #fff; 
}

/* ===== カードリスト ===== */
.survey-list { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .survey-list { grid-template-columns: repeat(2, 1fr); } }

/* ===== カード高さ揃え ===== */
.survey-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, box-shadow;
}
.survey-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  opacity: 0.6;
  pointer-events: none;
}
[data-theme="dark"] .survey-card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
.survey-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: rgba(0, 102, 255, 0.3); }
[data-theme="dark"] .survey-card:hover { border-color: rgba(51, 133, 255, 0.4); }
.survey-card.completed { opacity: 0.75; }
.survey-card.completed:hover { opacity: 0.9; }

/* 緊急カード（期限12時間以内）＋パルスアニメーション */
.survey-card.urgent {
  border-left: 4px solid #FF3B30;
  animation: urgentPulse 1.8s infinite;
}
@keyframes urgentPulse {
  0% { border-left-color: #FF3B30; box-shadow: 0 0 0 0 var(--urgent-pulse-color); }
  70% { border-left-color: #FF8A80; box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
  100% { border-left-color: #FF3B30; box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
[data-theme="dark"] .survey-card.urgent {
  border-left-color: #FF5E57;
  animation: urgentPulseDark 1.8s infinite;
}
@keyframes urgentPulseDark {
  0% { border-left-color: #FF5E57; box-shadow: 0 0 0 0 rgba(255, 94, 87, 0.5); }
  70% { border-left-color: #FF8A80; box-shadow: 0 0 0 6px rgba(255, 94, 87, 0); }
  100% { border-left-color: #FF5E57; box-shadow: 0 0 0 0 rgba(255, 94, 87, 0); }
}
[data-style="classic"] .survey-card.urgent {
  border-left: 6px solid #c13030;
  animation: none;
}
[data-style="neumorphism"] .survey-card.urgent {
  border-left: none;
  box-shadow: var(--neu-shadow-md), 0 0 0 2px #FF3B30;
  animation: urgentNeumorphPulse 1.8s infinite;
}
@keyframes urgentNeumorphPulse {
  0% { box-shadow: var(--neu-shadow-md), 0 0 0 2px #FF3B30; }
  70% { box-shadow: var(--neu-shadow-md), 0 0 0 6px rgba(255, 59, 48, 0.3); }
  100% { box-shadow: var(--neu-shadow-md), 0 0 0 2px #FF3B30; }
}

[data-style="classic"] .survey-card {
  border: 1px solid #9ba2ab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 #fff;
  border-radius: 8px;
}
[data-style="classic"] .survey-card::before { display: none; }
[data-style="classic"] .survey-card:hover { transform: none; box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 #fff; }

.survey-header {
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 102, 255, 0.015);
}
[data-theme="dark"] .survey-header { background: rgba(51, 133, 255, 0.03); }

[data-style="classic"] .survey-header {
  background: linear-gradient(to bottom, #f8f8f8, #eaeaea);
  border-bottom: 1px solid #b5b5b5;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  border-radius: 7px 7px 0 0;
}
[data-style="classic"][data-theme="dark"] .survey-header {
  background: linear-gradient(to bottom, #3a3a3a, #222);
  border-bottom: 1px solid #111;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}

.survey-info h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-primary); line-height: 1.4; }
.survey-info h3 i { color: var(--text-secondary); opacity: 0.8; margin-top: 3px; }
.survey-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.survey-body {
  padding: 1.2rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.detail-item:first-child i,
.detail-item:first-child span {
  color: var(--text-secondary);
  opacity: 0.85;
}
.detail-item i {
  color: var(--yandex-blue);
}
.survey-details {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.detail-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.detail-item i {
  width: 16px;
  text-align: center;
}

.deadline-section { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.deadline-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; }
.deadline-label { color: var(--text-secondary); }
.deadline-countdown { color: var(--yandex-blue); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.progress-wrapper { display: flex; align-items: center; gap: 0.8rem; }
.progress-bar { flex-grow: 1; background-color: var(--progress-track); border-radius: 8px; height: 8px; overflow: hidden; box-shadow: var(--progress-track-shadow); }
.progress-fill { background: var(--progress-fill); height: 100%; border-radius: 8px; transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.progress-fill.warning { background: var(--progress-warning); }
.progress-fill.danger { background: var(--progress-danger); }
.progress-text { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); min-width: 45px; text-align: right; font-variant-numeric: tabular-nums; }

.button-group {
  display: flex;
  gap: 0.8rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.url-button { background: linear-gradient(135deg, var(--yandex-blue) 0%, var(--yandex-blue-hover) 100%); color: var(--yandex-blue-text); box-shadow: var(--shadow-button); }
.url-button:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px var(--yandex-blue-glow); }
.url-button:active:not(.disabled) { transform: translateY(1px); }
.results-button { background: var(--bg-page); color: var(--yandex-blue); border: 1px solid var(--border-color); }
.results-button:hover:not(.disabled) { background-color: rgba(0, 102, 255, 0.06); border-color: var(--yandex-blue); transform: translateY(-2px); }
.url-button.disabled, .results-button.disabled { background: #D6E0F0; color: #8B9BB4; cursor: not-allowed; box-shadow: none; transform: none; border: 1px solid transparent; }
[data-theme="dark"] .url-button.disabled, [data-theme="dark"] .results-button.disabled { background: #1A2236; color: #5A6A85; }

/* Glossy Plastic Buttons (Classic) */
[data-style="classic"] .btn-base {
  background: linear-gradient(to bottom, #7ba7d9 0%, #4a85c2 49%, #3871ac 50%, #2a5a94 100%);
  border: 1px solid #1f467a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
}
[data-style="classic"] .btn-base:hover:not(.disabled) {
  background: linear-gradient(to bottom, #8cb5df 0%, #5a95d2 49%, #4a85c2 50%, #3a6aa4 100%);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
[data-style="classic"] .results-button {
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 49%, #e0e0e0 50%, #cccccc 100%);
  border: 1px solid #888;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.2);
}
[data-style="classic"] .url-button.disabled, [data-style="classic"] .results-button.disabled {
  background: linear-gradient(to bottom, #e0e0e0 0%, #cccccc 50%, #bbbbbb 100%);
  border: 1px solid #999;
  color: #777;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  box-shadow: none;
}
[data-style="classic"][data-theme="dark"] .btn-base {
  background: linear-gradient(to bottom, #5ca0e6 0%, #3871ac 49%, #2a5a94 50%, #1a3a64 100%);
  border: 1px solid #0a1a34;
}
[data-style="classic"][data-theme="dark"] .results-button {
  background: linear-gradient(to bottom, #444 0%, #222 50%, #111 100%);
  border: 1px solid #000;
  color: #ddd;
  text-shadow: 0 -1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ===== 空状態の強化 ===== */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-card);
  transition: all 0.2s ease;
}
.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  opacity: 0.6;
}
.empty-state p {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.empty-state small {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: block;
  margin-top: 0.5rem;
}

/* Skeleton (アクセシビリティ強化) */
.skeleton-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 1.4rem; height: 180px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.skeleton-line { background-color: var(--skeleton-base); border-radius: 6px; margin-bottom: 1rem; position: relative; overflow: hidden; }
.skeleton-line.title { height: 20px; width: 65%; }
.skeleton-line.meta { height: 16px; width: 45%; }
.skeleton-line.body { height: 16px; width: 100%; }
.skeleton-line.btn { height: 40px; width: 140px; margin-top: 1.2rem; border-radius: var(--radius-btn); }
.skeleton-line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation: shimmer 1.8s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

[data-style="classic"] .skeleton-card { background: linear-gradient(to bottom, #fdfdfd, #e8e8e8); border: 1px solid #999; box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 #fff; }

/* Footer */
.footer { text-align: center; padding: 3rem 1.5rem; border-top: 1px solid var(--border-color); margin-top: 3rem; background: var(--bg-card); }
.footer-content { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.hosting-info, .ai-info { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.8; }
.copyright { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin: 0.5rem 0; }
.contact-link { color: var(--yandex-blue); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; padding: 0.2rem 0.5rem; border-radius: 6px; }
.contact-link:hover { color: var(--yandex-blue-hover); background-color: rgba(0, 102, 255, 0.08); }

[data-style="classic"] .footer {
  background: linear-gradient(to bottom, #d1d6dc 0%, #b8bec5 100%);
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 -1px 3px rgba(0,0,0,0.1);
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
[data-style="classic"][data-theme="dark"] .footer {
  background: linear-gradient(to bottom, #222 0%, #111 100%);
  border-top: 1px solid #333;
  color: #ccc;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
}
[data-style="classic"] .contact-link { color: #1f467a; text-shadow: none; font-weight: bold; }

@media (max-width: 768px) {
  .main { padding: 1.5rem 1rem; }
  .header-content { padding: 1rem; }
  .site-title { font-size: 1.1rem; }
  .button-group { flex-direction: column; }
  .btn-base { width: 100%; }
  .legend-grid { grid-template-columns: 1fr; }
  .intro { padding: 1.4rem; }
}

/* =========================================
   ☁️ Neumorphism Theme (Soft UI)
   ========================================= */
[data-style="neumorphism"] {
  --bg-page: #e4e9f0;
  --bg-card: #e4e9f0;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --yandex-blue: #4a90e2;
  --yandex-blue-hover: #357abd;
  --neu-shadow-sm: 5px 5px 10px #c8ccd4, -5px -5px 10px #ffffff;
  --neu-shadow-md: 12px 12px 24px #c8ccd4, -12px -12px 24px #ffffff;
  --neu-shadow-inset: inset 5px 5px 10px #c8ccd4, inset -5px -5px 10px #ffffff;
  --radius-neu: 24px;
  --border-color: transparent;
}
[data-style="neumorphism"][data-theme="dark"] {
  --bg-page: #242832;
  --bg-card: #242832;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --yandex-blue: #63b3ed;
  --neu-shadow-sm: 5px 5px 10px #181b22, -5px -5px 10px #303542;
  --neu-shadow-md: 12px 12px 24px #181b22, -12px -12px 24px #303542;
  --neu-shadow-inset: inset 5px 5px 10px #181b22, inset -5px -5px 10px #303542;
}
[data-style="neumorphism"] body {
  background-color: var(--bg-page);
  font-family: 'Pretendard JP', -apple-system, sans-serif;
}
[data-style="neumorphism"] .header {
  background-color: var(--bg-page);
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
}
[data-style="neumorphism"] .site-title {
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  text-shadow: 2px 2px 4px #c8ccd4, -2px -2px 4px #ffffff;
  letter-spacing: -0.02em;
}
[data-style="neumorphism"][data-theme="dark"] .site-title {
  text-shadow: 2px 2px 4px #181b22, -2px -2px 4px #303542;
}
[data-style="neumorphism"] .theme-toggle {
  background-color: var(--bg-page);
  border: none;
  border-radius: 50%;
  box-shadow: var(--neu-shadow-sm);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
[data-style="neumorphism"] .theme-toggle:hover {
  box-shadow: var(--neu-shadow-sm);
  color: var(--yandex-blue);
  transform: scale(1.05);
}
[data-style="neumorphism"] .theme-toggle:active {
  box-shadow: var(--neu-shadow-inset);
  transform: scale(0.95);
}
[data-style="neumorphism"] .survey-card,
[data-style="neumorphism"] .intro,
[data-style="neumorphism"] .legend-box,
[data-style="neumorphism"] .footer {
  background-color: var(--bg-card);
  border: none;
  border-radius: var(--radius-neu);
  box-shadow: var(--neu-shadow-md);
  transition: box-shadow 0.3s ease;
}
[data-style="neumorphism"] .survey-card:hover {
  transform: none;
  box-shadow: var(--neu-shadow-md);
}
[data-style="neumorphism"] .survey-header {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
[data-style="neumorphism"][data-theme="dark"] .survey-header {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
[data-style="neumorphism"] .progress-wrapper { gap: 1rem; }
[data-style="neumorphism"] .progress-bar {
  background-color: var(--bg-page);
  border-radius: 12px;
  box-shadow: var(--neu-shadow-inset);
  height: 12px;
}
[data-style="neumorphism"] .progress-fill {
  background: linear-gradient(135deg, var(--yandex-blue), #63b3ed);
  border-radius: 12px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.6s ease;
}
[data-style="neumorphism"] .progress-fill.warning { background: linear-gradient(135deg, #ecc94b, #d69e2e); }
[data-style="neumorphism"] .progress-fill.danger { background: linear-gradient(135deg, #fc8181, #e53e3e); }
[data-style="neumorphism"] .btn-base {
  background-color: var(--bg-page);
  color: var(--yandex-blue);
  border: none;
  border-radius: 14px;
  box-shadow: var(--neu-shadow-sm);
  font-weight: 700;
  transition: all 0.15s ease;
}
[data-style="neumorphism"] .btn-base:hover:not(.disabled) {
  color: var(--yandex-blue-hover);
  box-shadow: var(--neu-shadow-sm);
  transform: translateY(-1px);
}
[data-style="neumorphism"] .btn-base:active:not(.disabled) {
  box-shadow: var(--neu-shadow-inset);
  transform: translateY(1px);
}
[data-style="neumorphism"] .btn-base.disabled {
  color: var(--text-secondary);
  opacity: 0.5;
  box-shadow: var(--neu-shadow-sm);
}
[data-style="neumorphism"] .badge {
  background: var(--bg-page);
  color: var(--text-secondary);
  border: none;
  border-radius: 20px;
  box-shadow: 3px 3px 6px #c8ccd4, -3px -3px 6px #ffffff;
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  font-size: 0.75rem;
}
[data-style="neumorphism"][data-theme="dark"] .badge {
  background: var(--bg-page);
  box-shadow: 3px 3px 6px #181b22, -3px -3px 6px #303542;
}
[data-style="neumorphism"] .line-badge { color: #06C755; }
[data-style="neumorphism"] .google-badge { color: #4285F4; }
[data-style="neumorphism"] .no-account-badge { color: var(--text-secondary); }
[data-style="neumorphism"] .anonymous-badge { color: #38A169; }
[data-style="neumorphism"] .named-badge { color: #DD6B20; }
[data-style="neumorphism"] .skeleton-card {
  background-color: var(--bg-page);
  border: none;
  box-shadow: var(--neu-shadow-md);
}
[data-style="neumorphism"] .skeleton-line {
  background-color: var(--bg-page);
  box-shadow: var(--neu-shadow-inset);
  border-radius: 10px;
}
[data-style="neumorphism"] .skeleton-line::after { display: none; }
[data-style="neumorphism"] .empty-state {
  background-color: var(--bg-page);
  border: none;
  box-shadow: var(--neu-shadow-inset);
}

/* 落下する国旗 */
.falling-flag {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  will-change: transform, top;
}

/* 既存のスタイルはそのまま維持。以下を末尾に追加 */

/* ヘッダー右側のボタン群 */
.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.help-toggle {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-btn);
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: all 0.2s ease;
}
[data-theme="dark"] .help-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.help-toggle:hover {
  background-color: var(--yandex-blue);
  color: white;
  border-color: var(--yandex-blue);
  transform: scale(1.05);
  box-shadow: 0 4px 16px var(--yandex-blue-glow);
}

[data-style="classic"] .help-toggle {
  background: linear-gradient(to bottom, #666 0%, #444 49%, #333 50%, #111 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
  border-radius: 6px;
}
[data-style="classic"] .help-toggle:hover {
  background: linear-gradient(to bottom, #777 0%, #555 49%, #444 50%, #222 100%);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.6);
  color: #fff;
}

[data-style="neumorphism"] .help-toggle {
  background-color: var(--bg-page);
  border: none;
  border-radius: 50%;
  box-shadow: var(--neu-shadow-sm);
  color: var(--text-secondary);
}
[data-style="neumorphism"] .help-toggle:hover {
  box-shadow: var(--neu-shadow-sm);
  color: var(--yandex-blue);
  transform: scale(1.05);
}
[data-style="neumorphism"] .help-toggle:active {
  box-shadow: var(--neu-shadow-inset);
  transform: scale(0.95);
}

/* モーダル (オーバーレイ＋コンテナ) */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s;
}
.modal[hidden] {
  display: none;
}
.modal:not([hidden]) {
  visibility: visible;
  opacity: 1;
}
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
[data-style="classic"] .modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
}
[data-style="neumorphism"] .modal-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.modal-container {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-card-hover);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 102, 255, 0.02);
}
.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-primary);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.modal-close:hover {
  color: var(--yandex-blue);
  background-color: rgba(0, 102, 255, 0.1);
}
[data-style="classic"] .modal-close:hover {
  background-color: rgba(0,0,0,0.1);
  color: #c13030;
}
.modal-body {
  padding: 1.5rem;
}
.modal-body .legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.modal-body .legend-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
}
.modal-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}