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

:root {
  --bg: #f7f7f7;
  --bg-gradient-start: #f7f7f7;
  --bg-gradient-end: #f0f0f0;
  --text-primary: #111111;
  --text-secondary: #5f6368;
  --text-tertiary: #6b7280;
  --text-status: #6b7280;
  --text-accent: #d81b60;
  --text-powder-blue: #9DB7D9;
  --text-sea-glass-teal: #72E6C8;
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --bg-gradient-start: #0a0a0a;
    --bg-gradient-end: #1a1a1a;
    --text-primary: #ececec;
    --text-secondary: #a8aeb6;
    --text-tertiary: #7e8791;
    --text-status: #9ba2ab;
    --text-accent: #f2a6c2;
    --text-powder-blue: #9DB7D9;
    --text-sea-glass-teal: #72E6C8;
    --border: #333;
  }
}

/* Manual theme overrides */
[data-theme="light"] {
  --bg: #f7f7f7;
  --bg-gradient-start: #f7f7f7;
  --bg-gradient-end: #f0f0f0;
  --text-primary: #111111;
  --text-secondary: #5f6368;
  --text-tertiary: #6b7280;
  --text-status: #6b7280;
  --text-accent: #d81b60;
  --text-powder-blue: #9DB7D9;
  --text-sea-glass-teal: #72E6C8;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --bg: #111;
  --bg-gradient-start: #0a0a0a;
  --bg-gradient-end: #1a1a1a;
  --text-primary: #ececec;
  --text-secondary: #a8aeb6;
  --text-tertiary: #7e8791;
  --text-status: #9ba2ab;
  --text-accent: #f2a6c2;
  --text-powder-blue: #9DB7D9;
  --text-sea-glass-teal: #72E6C8;
  --border: #333;
}

body {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 80px 60px 40px 60px;
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  min-height: 100vh;
}

@media (min-width: 768px) {
  body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  main {
    width: 100%;
  }
}

/* Background layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: -2;
  pointer-events: none;
}

/* Noise/grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}


h1, .status, .status-line, .row, .row span, .row a, .util-btn, .qr-panel, .qr-url, .location-name {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

h1 {
  font-size: 18px;
  font-weight: normal;
  color: var(--text-primary);
  /* text-align: center; */
  margin-bottom: 32px;
}

.h1-decoration {
  color: var(--text-tertiary);
  margin-left: 6px;
}

.h1-decoration .char {
  display: inline-block;
  opacity: 0;
  animation: charFadeIn 0.4s ease forwards;
}

@keyframes charFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.status {
  position: relative;
  padding-left: 14px;
  margin-bottom: 32px;
}

.status::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--text-tertiary);
  animation: borderGrow 0.6s ease 0.15s forwards;
}

.status.status-plain {
  padding-left: 0;
}

.status.status-plain::before {
  display: none;
}

@keyframes borderGrow {
  to {
    height: 100%;
  }
}

.status-header,
.status-line {
  opacity: 0;
  transform: translateY(-8px);
}

.status-header.visible,
.status-line.visible {
  animation: slideFadeIn 0.5s ease forwards;
}

.status-header {
  font-size: 14px;
  color: var(--text-status);
  line-height: 1.4;
  margin-bottom: 2px;
}

.status-line {
  font-size: 14px;
  color: var(--text-status);
  line-height: 1.4;
}

.location-name {
  color: var(--text-accent);
}

.weather-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: -4px;
  margin-top: -4px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.weather-icon.loaded {
  opacity: 1;
}

nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
  transition: opacity 0.2s ease;
}

.row {
  display: flex;
  align-items: baseline;
  padding: 8px 0;
  min-height: 44px;
  opacity: 0;
  transform: translateY(-8px);
}

.row.visible {
  animation: slideFadeIn 0.5s ease forwards;
}

@keyframes slideFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .row,
  .status-header,
  .status-line {
    opacity: 1;
    transform: none;
  }
  .row.visible,
  .status-header.visible,
  .status-line.visible {
    animation: none;
  }
  .status::before {
    height: 100%;
    animation: none;
  }
  body::before,
  body::after {
    animation: none;
  }
  .sig-text {
    clip-path: none;
    animation: none;
  }
  .h1-decoration .char {
    opacity: 1;
    animation: none;
  }
}

.row span {
  width: 55%;
  flex-shrink: 0;
  padding-right: 16px;
}

.row .row-label {
  color: var(--text-primary);
}

.row .row-value,
.row > span:last-child {
  color: var(--text-secondary);
}

.row a {
  color: var(--text-secondary);
  text-decoration: none;
}

.row a::after {
  content: '\2197';
  display: inline-block;
  margin-left: 4px;
  font-size: 0.85em;
  vertical-align: top;
  color: var(--text-secondary);
}

.row a:hover {
  text-decoration: underline;
}

.censored {
  color: var(--text-secondary);
  filter: blur(3.5px);
  user-select: none;
  pointer-events: none;
}

.source-icon {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 480px) {
  body {
    padding: 40px 30px 20px 30px;
  }

  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 0;
  }

  .row span {
    width: 100%;
    padding-right: 0;
  }

  .row a {
    font-size: 12px;
    color: var(--text-secondary);
  }
}

/* Utility Buttons */
.utility-buttons {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 10px;
}

.util-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.util-btn:hover {
  border-color: var(--text-secondary);
}

.util-btn:focus {
  outline: none;
}

/* Theme toggle icons - show moon in light mode, sun in dark mode */
.icon-sun { display: none; }
.icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  .icon-sun { display: block; }
  .icon-moon { display: none; }
}

/* Override for manual theme */
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* QR Button active state */
.util-btn.active {
  background: var(--text-primary);
  color: var(--bg);
  border-color: var(--text-primary);
}

.util-btn.active:hover {
  border-color: var(--text-primary);
}

/* Nav hidden state for QR toggle */
nav.hidden {
  display: none;
}

/* QR Panel (inline, replaces contact list) */
.qr-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  gap: 24px;
  opacity: 0;
  transform: translateY(-8px);
}

.qr-panel.visible {
  display: flex;
  animation: slideFadeIn 0.3s ease forwards;
}

.qr-panel.hiding {
  display: flex;
  animation: slideUpFadeOut 0.3s ease forwards;
}

@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.qr-card {
  border-radius: 16px;
}

@media (prefers-color-scheme: dark) {
  .qr-card {
    background: #f5f0eb;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }
}

[data-theme="dark"] .qr-card {
  background: #f5f0eb;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .qr-card {
  background: none;
  padding: 0;
  box-shadow: none;
}

.qr-code {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code svg {
  width: 100%;
  height: 100%;
}

.qr-url {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Finances Nav */
.finances-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
  transition: opacity 0.2s ease;
}

.finances-nav.hidden {
  display: none;
}

.finances-nav .row {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Value with copy button - override .row span styles */
.finances-nav .row > span:first-child {
  width: 55%;
  flex-shrink: 0;
  padding-right: 16px;
}

.value-with-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto !important;
  flex-shrink: 1;
  padding-right: 0 !important;
}

.copyable-value {
  color: var(--text-secondary) !important;
  white-space: nowrap;
  width: auto !important;
  flex-shrink: 1;
  padding-right: 0 !important;
}

.copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  top: -1px;
}

.copy-btn:hover {
  color: var(--text-secondary);
}

.copy-btn:focus {
  outline: none;
}

.copy-btn:active {
  color: var(--text-tertiary);
}

.copy-btn .copy-icon {
  display: block;
}

.copy-btn .check-icon {
  display: none;
  color: #22c55e;
}

.copy-btn.copied .copy-icon {
  display: none;
}

.copy-btn.copied .check-icon {
  display: block;
}

@media (max-width: 480px) {
  .finances-nav .row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 0;
  }

  .finances-nav .row > span:first-child {
    width: 100%;
    padding-right: 0;
  }

  .copyable-value {
    font-size: 12px;
  }
}

/* Signature Spine */
.signature-spine {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

.sig-text {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: color 0.15s ease;
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  animation: revealUpward 0.8s ease forwards;
  animation-delay: 0.5s;
}

@keyframes revealUpward {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.signature-spine:hover .sig-text {
  color: var(--text-secondary);
}

.signature-spine:focus {
  outline: none;
}

.signature-spine.active .sig-text {
  color: var(--text-primary);
}

/* Signature Panel */
.signature-panel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
  opacity: 0;
  transform: translateY(-8px);
}

.signature-panel.visible {
  display: flex;
  animation: slideFadeIn 0.5s ease forwards;
}

.signature-panel.hiding {
  display: flex;
  animation: slideUpFadeOut 0.5s ease forwards;
}

.signature-message {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.signature-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

.signature-panel .signature-divider:first-child {
  margin-top: 0;
}

.signature-full {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-tertiary);
  word-break: break-all;
  display: block;
}

@media (max-width: 480px) {
  .signature-spine {
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .sig-text {
    font-size: 10px;
  }

  .signature-message {
    font-size: 12px;
  }
}

/* Blog */
.blog-post {
  max-width: 62ch;
  margin-bottom: 56px;
}

.blog-post > header,
.blog-post > section {
  opacity: 0;
  transform: translateY(-8px);
}

.blog-post > header.visible,
.blog-post > section.visible {
  animation: slideFadeIn 0.5s ease forwards;
}

.blog-post h2 {
  font-size: 18px;
  font-weight: normal;
  color: var(--text-powder-blue);
  margin-bottom: 6px;
}

.post-meta {
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.post-note {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-bottom: 18px;
}

.blog-post h3 {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-powder-blue);
  margin: 18px 0 8px;
}

.blog-post p,
.blog-post li {
  color: var(--text-secondary);
}

.blog-post strong {
  color: var(--text-accent);
  font-weight: 700;
}

.blog-post .quoted {
  color: var(--text-sea-glass-teal);
}

.blog-post ul,
.blog-post ol {
  margin-left: 20px;
}

.blog-post li {
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-post > header,
  .blog-post > section {
    opacity: 1;
    transform: none;
  }

  .blog-post > header.visible,
  .blog-post > section.visible {
    animation: none;
  }
}