/* HSPingal app theme: totp. Loaded after the app's own styles. */
:root {
  --bg: var(--c-bg);
  --surface: #0a3e46;
  --card: #0b444d;
  --card2: #0d4a53;
  --border: rgba(253,245,221,.2);
  --border2: rgba(253,245,221,.2);
  --accent: #f4c95d;
  --accent2: #39b8a6;
  --on-accent: #07343b;
  --text: var(--c-fg);
  --text2: var(--c-sub);
  --muted: #8fbab3;
  --success: #7fe3c9;
  --ok: #7fe3c9;
  --danger: #ff9a76;
  --warn: #f4c95d;
  --warning: #f4c95d;
  --glow: rgba(244,201,93, .2);
  --app-w: 1000px;
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  color-scheme: dark;
}

.app-mast { background: var(--c-bg); }

/* A clock face. The code is the hero and everything else sits around it. */
:root { --h1-track: -0.02em; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 26px; }
.code-card { border-radius: 26px; padding: 40px 20px; background: #052a30; border: 1.5px solid var(--border); }
.code-display { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-weight: 500; font-size: clamp(2.1rem, 8vw, 4.6rem); letter-spacing: .08em; color: var(--accent); line-height: 1.1; overflow-wrap: anywhere; }
.code-display.expiring { color: var(--danger); }
.progress { height: 8px; max-width: 280px; background: var(--card2); }
.progress-bar { background: var(--accent) !important; }
.progress-bar.expiring { background: var(--danger) !important; }
.copy-btn { background: var(--accent) !important; color: var(--on-accent) !important; border-radius: 999px; }
.secret-input, .sel { background: #052a30; border-color: var(--border); }
.secret-input { font-size: 1rem; }
.lbl { color: var(--accent); }
.next-line { margin-bottom: 8px; }
.link-box, .warn { border-radius: 16px; }
.link-row input, .link-row button { background: #052a30; border-color: var(--border); }
.warn { color: #f4c95d; }
@media (min-width: 840px) {
  .app-body { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .code-card { grid-column: 1; grid-row: 1 / span 4; margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .copy-btn { grid-column: 1; grid-row: 5; margin: 14px 0; }
  .next-line { grid-column: 1; grid-row: 6; }
  .app-body > .lbl:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .secret-input { grid-column: 2; grid-row: 2; }
  .opts { grid-column: 2; grid-row: 3; }
  .error { grid-column: 2; grid-row: 4; }
  .link-box { grid-column: 2; grid-row: 4 / span 3; margin: 0; align-self: start; }
  .warn { grid-column: 1 / -1; }
}