/* コテツ Web Tools 共通デザインシステム */
:root {
  --suite-bg: #f5f7fb;
  --suite-surface: #ffffff;
  --suite-surface-soft: #f8fafc;
  --suite-text: #172033;
  --suite-muted: #64748b;
  --suite-line: #dfe5ee;
  --suite-primary: #2563eb;
  --suite-primary-hover: #1d4ed8;
  --suite-primary-soft: #eff6ff;
  --suite-danger: #c2413b;
  --suite-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
  --suite-radius: 18px;
  --suite-control-radius: 11px;
  --suite-font: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
}

html[data-theme="dark"],
body.dark-theme {
  --suite-bg: #0b1120;
  --suite-surface: #111827;
  --suite-surface-soft: #172033;
  --suite-text: #e5edf8;
  --suite-muted: #9aa8bc;
  --suite-line: #2b374a;
  --suite-primary: #60a5fa;
  --suite-primary-hover: #93c5fd;
  --suite-primary-soft: #152a48;
  --suite-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}

body.tool-app {
  min-width: 320px;
  color: var(--suite-text);
  background: var(--suite-bg);
  font-family: var(--suite-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.kotetsu-nav {
  width: 100%;
  position: sticky;
  z-index: 1000;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--suite-line) 86%, transparent);
  background: color-mix(in srgb, var(--suite-surface) 92%, transparent);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px);
}

.kotetsu-nav__inner {
  width: min(1200px, calc(100% - 40px));
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.kotetsu-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--suite-text) !important;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}

.kotetsu-nav a:hover { color: var(--suite-primary) !important; }
.kotetsu-nav__brand { color: var(--suite-primary) !important; }

.tool-app :is(button, input, textarea, select) { font-family: var(--suite-font); }

.tool-app :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--suite-primary) 42%, transparent) !important;
  outline-offset: 2px !important;
}

.tool-app :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-radius: var(--suite-control-radius);
}

.tool-app :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--suite-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--suite-primary) 14%, transparent) !important;
  outline: none;
}

.tool-app :is(.card, .form-card, .card-container, .quick-add-panel, .overview, .completed-panel, .social-card) {
  border-color: var(--suite-line);
  border-radius: var(--suite-radius);
  background: var(--suite-surface);
  box-shadow: var(--suite-shadow);
}

.tool-app :is(.eyebrow, .section-kicker) {
  color: var(--suite-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.tool-app :is(.primary-btn, .btn-primary, .button.primary, .primary-button, .button-primary) {
  border-color: var(--suite-primary);
  border-radius: var(--suite-control-radius);
  color: #fff;
  background: var(--suite-primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--suite-primary) 24%, transparent);
}

.tool-app :is(.primary-btn, .btn-primary, .button.primary, .primary-button, .button-primary):hover {
  border-color: var(--suite-primary-hover);
  background: var(--suite-primary-hover);
}

.tool-app :is(.secondary-btn, .btn-secondary, .button.secondary, .secondary-button, .button-secondary) {
  border-color: var(--suite-line);
  border-radius: var(--suite-control-radius);
  color: var(--suite-text);
  background: var(--suite-surface);
}

.tool-app :is(.secondary-btn, .btn-secondary, .button.secondary, .secondary-button, .button-secondary):hover {
  border-color: color-mix(in srgb, var(--suite-primary) 45%, var(--suite-line));
  background: var(--suite-primary-soft);
}

.tool-app :is(.privacy-notice, .privacy-banner, .local-badge) {
  border-color: color-mix(in srgb, var(--suite-primary) 28%, var(--suite-line));
  color: color-mix(in srgb, var(--suite-primary) 42%, var(--suite-text));
  background: var(--suite-primary-soft);
}

.tool-app--amazon {
  --grad-primary: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
  --grad-hover: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%);
  --bg-app: var(--suite-bg);
  --bg-card: var(--suite-surface);
  --bg-card-hover: var(--suite-surface);
  --border-color: var(--suite-line);
  --border-focus: var(--suite-primary);
  --text-main: var(--suite-text);
  --text-muted: var(--suite-muted);
  --input-bg: var(--suite-surface);
  --shadow-main: var(--suite-shadow);
  --badge-bg: var(--suite-primary-soft);
  --badge-text: var(--suite-primary);
}

.tool-app--amazon .decorations { opacity: 0.45; }
.tool-app--amazon .app-container { max-width: 760px; padding-top: 38px; }
.tool-app--amazon .app-header h1 { color: var(--suite-text); font-family: var(--suite-font); }
.tool-app--amazon .logo-icon { stroke: var(--suite-primary); animation: none; }
.tool-app--amazon .theme-toggle-btn { border-radius: var(--suite-control-radius); }

.tool-app--invoice {
  --ink: var(--suite-text);
  --muted: var(--suite-muted);
  --line: var(--suite-line);
  --accent: var(--suite-primary);
  --accent-dark: var(--suite-primary-hover);
  --bg: var(--suite-bg);
}

.tool-app--invoice .app-header { background: var(--suite-surface); }
.tool-app--invoice .sidebar { background: var(--suite-surface-soft); }
.tool-app--invoice .preview-wrap { background: #e2e8f0; }
.tool-app--invoice .paper { border-radius: 3px; }

.tool-app--qr {
  --bg-main: var(--suite-bg);
  --bg-card: var(--suite-surface);
  --bg-sub: var(--suite-surface-soft);
  --text-primary: var(--suite-text);
  --text-secondary: var(--suite-muted);
  --border-color: var(--suite-line);
  --color-primary: var(--suite-primary);
  --color-primary-hover: var(--suite-primary-hover);
  --card-shadow: var(--suite-shadow);
  --border-radius: var(--suite-radius);
  --border-radius-sm: var(--suite-control-radius);
}

.tool-app--qr .app-header {
  border: 0;
  background: linear-gradient(135deg, var(--suite-primary-soft), var(--suite-surface-soft));
}

.tool-app--qr .app-title { color: var(--suite-text); }
.tool-app--qr .main-content { padding-top: 38px; }

.tool-app--sns .app-header { top: 60px; background: color-mix(in srgb, var(--suite-surface) 92%, transparent); }
.tool-app--sns .tool-toolbar-title { color: var(--suite-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }

.tool-app--eisenhower {
  --bg: var(--suite-bg);
  --surface: var(--suite-surface);
  --surface-subtle: var(--suite-surface-soft);
  --text: var(--suite-text);
  --text-soft: var(--suite-muted);
  --border: var(--suite-line);
  --border-strong: #b8c3d2;
  --primary: var(--suite-primary);
  --primary-hover: var(--suite-primary-hover);
  --primary-soft: var(--suite-primary-soft);
  --focus: var(--suite-primary);
  --shadow: var(--suite-shadow);
}

.tool-app--eisenhower .app-header { padding-top: 32px; }
.tool-app--eisenhower .local-badge { color: var(--suite-primary); }

.tool-app .app-footer {
  margin-top: 20px;
  padding: 25px 16px;
  color: #cbd5e1;
  background: #2c3e50;
}

@media (max-width: 600px) {
  .kotetsu-nav__inner { width: calc(100% - 28px); }
  .kotetsu-nav__brand { font-size: 0.76rem !important; }
  .tool-app--sns .app-header { top: 60px; }
}

@media print {
  .kotetsu-nav { display: none !important; }
}