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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--kv-bg);
  color: var(--kv-text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Header ── */

.app-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--kv-border);
  position: relative;
  text-align: center;
}

.app-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0 52px;
}

.app-header > .app-header-center > p {
  color: var(--kv-muted);
  font-size: 0.88rem;
  margin-top: 4px;
  padding: 0 52px;
}

/* ── Home logo ── */

.home-logo {
  position: absolute;
  top: 12px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}

.home-logo img { width: 32px; height: 32px; opacity: 0.9; display: block; transition: opacity 0.15s; }
.home-logo:hover img { opacity: 1; }

.home-logo-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--kv-muted);
  transition: color 0.15s;
  white-space: nowrap;
}

.home-logo:hover .home-logo-label { color: var(--kv-accent); }

/* ── Theme toggle — MUST be before mobile @media ── */

.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--kv-border);
  background: var(--kv-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kv-muted);
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--kv-card-2);
  border-color: var(--kv-accent);
  color: var(--kv-text);
}

/* ── Mobile header ── */

@media (max-width: 800px) {
  input, select, textarea { font-size: 16px; }
  .app-header { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; }
  .home-logo { position: static; flex: 0 0 auto; order: 1; padding-top: 6px; }
  .app-header-center { flex: 1; min-width: 0; order: 2; text-align: center; }
  .theme-toggle { position: static; flex: 0 0 auto; order: 3; width: 44px; height: 44px; }
  .app-header h1 { font-size: 1.1rem; padding: 0; }
  .app-header > .app-header-center > p { padding: 0; font-size: 0.82rem; }
  .header-concepts { display: none; }
}

/* ── Concept pills ── */

.header-concepts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.concept-pill {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: var(--kv-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 160px;
}

.concept-pill strong {
  color: var(--kv-pass);
  font-size: 0.85rem;
}

/* ── Main layout ── */

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 800px) {
  main { padding: 16px 16px 40px; }
  .layout { grid-template-columns: 1fr; margin-top: 16px; }
}

/* ── Input panel ── */

.input-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-group {
  background: var(--kv-card);
  border: 1px solid var(--kv-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.group-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--kv-muted);
}

/* ── Fields ── */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--kv-text);
}

.input-wrap {
  display: flex;
  align-items: center;
  background: var(--kv-bg);
  border: 1px solid var(--kv-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.input-wrap:focus-within { border-color: var(--kv-accent); }

.currency-prefix,
.pct-suffix {
  padding: 0 10px;
  color: var(--kv-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
  user-select: none;
}

.money-input,
.num-input {
  background: transparent;
  border: none;
  color: var(--kv-text);
  font-size: 0.95rem;
  padding: 9px 10px;
  width: 100%;
  outline: none;
  font-family: inherit;
}

.pct-input { text-align: right; }

.num-input::-webkit-inner-spin-button,
.num-input::-webkit-outer-spin-button { opacity: 0.4; }

/* Standalone num inputs (not inside .input-wrap) */
.field > .num-input {
  background: var(--kv-bg);
  border: 1px solid var(--kv-border);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color 0.15s;
}

.field > .num-input:focus {
  border-color: var(--kv-accent);
  outline: none;
}

.text-input {
  background: var(--kv-bg);
  border: 1px solid var(--kv-border);
  border-radius: 8px;
  color: var(--kv-text);
  font-size: 0.95rem;
  padding: 9px 12px;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.text-input:focus { border-color: var(--kv-accent); }
.text-input::placeholder { color: var(--kv-muted); opacity: 0.7; }

/* ── Select ── */

select {
  background: var(--kv-bg);
  border: 1px solid var(--kv-border);
  border-radius: 8px;
  color: var(--kv-text);
  font-size: 0.95rem;
  padding: 9px 36px 9px 12px;
  width: 100%;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select:focus { border-color: var(--kv-accent); }

/* ── Derived + validation ── */

.derived {
  font-size: 0.8rem;
  color: var(--kv-accent);
  min-height: 1.1em;
  line-height: 1.5;
}

.validation-error {
  font-size: 0.82rem;
  color: var(--kv-fail);
  display: flex;
  align-items: center;
  gap: 6px;
}

.validation-warn {
  font-size: 0.82rem;
  color: var(--kv-warn);
}

/* ── Buttons ── */

.btn-primary {
  background: var(--kv-accent);
  color: #0f172a;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
  font-family: inherit;
}

.btn-primary:hover { background: var(--kv-accent-h); }

.btn-primary.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  width: auto;
}

.btn-ghost {
  background: transparent;
  color: var(--kv-muted);
  border: 1px solid var(--kv-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover { border-color: var(--kv-muted); color: var(--kv-text); }

.btn-add-list {
  background: transparent;
  color: var(--kv-accent);
  border: 1px dashed var(--kv-accent);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-add-list:hover { background: rgba(56, 189, 248, 0.06); }

.btn-reset {
  background: transparent;
  color: var(--kv-muted);
  border: none;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
  width: 100%;
  text-align: center;
  display: block;
}

.btn-reset:hover { opacity: 1; color: var(--kv-fail); }

/* ── Results panel ── */

.results-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Exit clock card ── */

.exit-clock-card {
  background: var(--kv-card);
  border: 1px solid var(--kv-border);
  border-radius: 16px;
  padding: 32px 24px 28px;
  text-align: center;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-clock-card > div { width: 100%; }

.clock-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kv-muted);
  margin-bottom: 24px;
}

/* ── Clock Mode A: flip panels ── */

.clock-panels {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
}

.flip-sep {
  color: var(--kv-muted);
  font-size: 2rem;
  font-weight: 300;
  align-self: center;
  padding: 0 8px;
  margin-bottom: 22px;
}

.flip-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  perspective: 600px;
}

.flip-card {
  position: relative;
  width: 72px;
  height: 88px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.flip-unit--month .flip-card { width: 86px; }
.flip-unit--year  .flip-card { width: 104px; }

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 800;
  font-family: 'Courier New', 'Courier', monospace;
  background: var(--kv-card-2);
  color: var(--kv-text);
  border-radius: 10px;
  border: 1px solid var(--kv-border);
  letter-spacing: -0.02em;
}

.flip-unit--month .flip-front,
.flip-unit--month .flip-back { font-size: 1.9rem; letter-spacing: 0.04em; }

.flip-unit--year .flip-front,
.flip-unit--year .flip-back { font-size: 2.2rem; }

.flip-back { transform: rotateX(180deg); }

.flip-card.flipping { transform: rotateX(-180deg); }

.flip-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kv-muted);
}

.clock-date-sub {
  font-size: 0.85rem;
  color: var(--kv-muted);
  margin-top: 4px;
}

/* Mobile flip panels */
@media (max-width: 800px) {
  .exit-clock-card { padding: 24px 16px 20px; }
  .flip-card { width: 56px; height: 68px; }
  .flip-unit--month .flip-card { width: 68px; }
  .flip-unit--year .flip-card { width: 82px; }
  .flip-front, .flip-back { font-size: 2.1rem; border-radius: 8px; }
  .flip-unit--month .flip-front, .flip-unit--month .flip-back { font-size: 1.45rem; }
  .flip-unit--year .flip-front, .flip-unit--year .flip-back { font-size: 1.7rem; }
  .flip-sep { font-size: 1.5rem; padding: 0 4px; }
}

@media (max-width: 400px) {
  .flip-card { width: 46px; height: 58px; }
  .flip-unit--month .flip-card { width: 58px; }
  .flip-unit--year .flip-card { width: 72px; }
  .flip-front, .flip-back { font-size: 1.7rem; }
  .flip-unit--month .flip-front, .flip-unit--month .flip-back { font-size: 1.2rem; }
  .flip-unit--year .flip-front, .flip-unit--year .flip-back { font-size: 1.4rem; }
}

/* ── Clock Mode B: big number ── */

.clock-big {
  margin: 8px 0 16px;
}

.clock-big-value {
  font-size: 3.8rem;
  font-weight: 900;
  color: var(--kv-pass);
  letter-spacing: -0.03em;
  line-height: 1;
}

.clock-big-sub {
  font-size: 0.9rem;
  color: var(--kv-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.clock-hook {
  font-size: 0.88rem;
  color: var(--kv-muted);
  margin-top: 14px;
  line-height: 1.5;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.clock-new-date {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kv-border);
}

.new-date-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kv-muted);
  margin-bottom: 4px;
}

.new-date-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kv-pass);
  letter-spacing: 0.03em;
}

/* Crossfade transition for mode switch */
#clockModeA, #clockModeB {
  transition: opacity 0.3s ease;
}

/* Danger state — real return negative (inflation > nominal return) */
.exit-clock-card.clock-danger {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.12);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.exit-clock-card.clock-danger .flip-front,
.exit-clock-card.clock-danger .flip-back {
  color: var(--kv-fail);
  border-color: rgba(239, 68, 68, 0.35);
}

.exit-clock-card.clock-danger .clock-big-value,
.exit-clock-card.clock-danger .new-date-value {
  color: var(--kv-fail);
}

@media (max-width: 800px) {
  .clock-big-value { font-size: 2.8rem; }
}

/* ── Slider card ── */

.card {
  background: var(--kv-card);
  border: 1px solid var(--kv-border);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kv-text);
  margin-bottom: 14px;
}

.slider-card { display: flex; flex-direction: column; gap: 12px; }

.slider-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--kv-muted);
}

.slider-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-bound {
  font-size: 0.78rem;
  color: var(--kv-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

#spendSlider {
  flex: 1;
  accent-color: var(--kv-accent);
  cursor: pointer;
  height: 4px;
}

.slider-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.slider-controls .input-wrap {
  flex: 0 0 120px;
}

.slider-controls select {
  flex: 1;
}

/* ── Add prompt ── */

.add-prompt {
  border-top: 1px solid var(--kv-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-prompt-actions {
  display: flex;
  gap: 8px;
}

/* ── Expense list ── */

.expense-empty {
  font-size: 0.85rem;
  color: var(--kv-muted);
  text-align: center;
  padding: 20px 0 8px;
  font-style: italic;
}

.expense-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.expense-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--kv-border);
}

.expense-item:last-child { border-bottom: none; }

.expense-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.expense-item-label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kv-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-item-amount {
  font-size: 0.82rem;
  color: var(--kv-muted);
  flex-shrink: 0;
}

.expense-item-bottom {
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--kv-muted);
  padding-left: 0;
}

.expense-fv { color: var(--kv-pass); font-weight: 500; }
.expense-months { color: var(--kv-muted); }

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--kv-border);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-input:checked + .toggle-label { background: var(--kv-accent); }
.toggle-input:checked + .toggle-label::after { transform: translateX(16px); }

.expense-delete {
  background: transparent;
  border: none;
  color: var(--kv-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.expense-delete:hover { color: var(--kv-fail); background: rgba(239,68,68,0.08); }

/* Inactive (toggled off) expense */
.expense-item.inactive .expense-item-label,
.expense-item.inactive .expense-item-amount,
.expense-item.inactive .expense-item-bottom { opacity: 0.4; }

/* ── List total row ── */

.list-total {
  border-top: 1px solid var(--kv-border);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kv-accent);
}

/* ── Footer ── */

footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  font-size: 0.8rem;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

footer a { color: var(--kv-muted); text-decoration: none; }
footer a:hover { color: var(--kv-accent); }

/* ── Light mode — Crisp White palette ── */

html:not(.dark) {
  --kv-bg:     #edf2f7;
  --kv-card:   #d4dce8;
  --kv-card-2: #c5cfe0;
  --kv-text:   #0f172a;
  --kv-muted:  #475569;
  --kv-border: #e2e8f0;
  --kv-accent: #0369a1;
  --kv-warn:   #d97706;
}

html:not(.dark) select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Utility ── */

.hidden { display: none !important; }

/* ── Tool info & FAQ ── */

.tool-info {
  max-width: 900px;
  margin: 48px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 680px) { .tool-info { grid-template-columns: 1fr; } }

.tool-info h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kv-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kv-border);
}

.tool-about p { font-size: 0.9rem; color: var(--kv-muted); line-height: 1.6; margin-bottom: 8px; }

.faq-item { border-bottom: 1px solid var(--kv-border); padding: 10px 0; }

.faq-item summary {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kv-text);
  cursor: pointer;
  list-style: none;
  padding-right: 20px;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; color: var(--kv-muted); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: 0.85rem; color: var(--kv-muted); line-height: 1.6; margin-top: 8px; }

/* ── Tool navigation bar ── */
.kv-tool-nav{display:flex;justify-content:center;overflow-x:auto;border-bottom:1px solid var(--kv-border);background:var(--kv-bg);padding:0 16px;scrollbar-width:none;}
.kv-tool-nav::-webkit-scrollbar{display:none;}
.kv-tool-nav a{flex-shrink:0;padding:10px 14px;font-size:0.82rem;font-weight:500;color:var(--kv-muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color 0.15s;}
.kv-tool-nav a:hover{color:var(--kv-text);}
.kv-tool-nav a.kv-nav-active{color:var(--kv-accent);border-bottom-color:var(--kv-accent);}
html:not(.dark) .kv-tool-nav{background:#edf2f7;border-color:#e2e8f0;}
html:not(.dark) .kv-tool-nav a{color:#475569;}
html:not(.dark) .kv-tool-nav a:hover{color:#0f172a;}
html:not(.dark) .kv-tool-nav a.kv-nav-active{color:#0369a1;border-bottom-color:#0369a1;}
@media(max-width:800px){.kv-tool-nav{justify-content:flex-start;}}