:root {
  --bg: #f5f7f4;
  --surface: #ffffff;
  --surface-soft: #edf2ed;
  --ink: #1b2822;
  --muted: #718078;
  --faint: #a9b6ae;
  --line: #dfe7e0;
  --accent: #e2ff58;
  --accent-strong: #b7dc31;
  --accent-ink: #1b261b;
  --teal: #1d6b5c;
  --shadow: 0 16px 42px rgba(27, 40, 34, .07);
  --radius: 20px;
}
[data-theme="dark"] {
  --bg: #111714; --surface: #19221e; --surface-soft: #202c26; --ink: #eff8f0; --muted: #9aaea2; --faint: #698073; --line: #2e3b34; --teal: #89d9aa; --shadow: 0 18px 48px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 15px; letter-spacing: -.01em; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 34px; height: 34px; padding: 8px 7px; border-radius: 11px; background: var(--ink); }
.brand-mark span { width: 4px; border-radius: 4px; background: var(--accent); }.brand-mark span:nth-child(1){height: 9px}.brand-mark span:nth-child(2){height: 15px}.brand-mark span:nth-child(3){height: 11px}
.brand-copy { display: grid; line-height: 1; gap: 5px; }.brand-copy strong { font-size: 17px; letter-spacing: -.03em; }.brand-copy small { color: var(--faint); font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }.privacy-pill { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.privacy-pill i { width: 7px; height: 7px; border-radius: 50%; background: #7bbb72; box-shadow: 0 0 0 4px rgba(123,187,114,.12); }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); transition: .2s ease; }.icon-button:hover { color: var(--ink); border-color: var(--faint); transform: translateY(-1px); }.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero { min-height: 320px; display: flex; align-items: center; justify-content: space-between; position: relative; border-top: 1px solid var(--line); }.hero-copy { max-width: 610px; padding: 56px 0 54px; }.eyebrow, .section-kicker { display: flex; align-items: center; gap: 9px; color: var(--teal); font-size: 10px; letter-spacing: .2em; font-weight: 800; margin: 0 0 17px; }.eyebrow-line { width: 25px; height: 2px; background: var(--accent-strong); }.hero h1 { font-size: clamp(38px, 5.4vw, 65px); line-height: 1.06; letter-spacing: -.065em; margin: 0; font-weight: 730; }.hero h1 em { font-style: normal; position: relative; z-index: 0; }.hero h1 em::after { content: ""; height: 10px; background: var(--accent); position: absolute; z-index: -1; left: -4px; right: -4px; bottom: 4px; transform: rotate(-1.8deg); }.hero-subtitle { color: var(--muted); line-height: 1.7; max-width: 490px; margin: 21px 0 0; font-size: 15px; }
.hero-orbit { position: relative; width: 280px; height: 230px; margin-right: 68px; }.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-22deg); }.orbit-one { width: 228px; height: 105px; top: 58px; left: 26px; border-color: var(--accent-strong); opacity: .75; }.orbit-two { width: 210px; height: 90px; top: 66px; left: 35px; transform: rotate(43deg); }.orbit-core { position: absolute; top: 62px; left: 105px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--accent); box-shadow: 0 0 0 9px rgba(226,255,88,.11); }.orbit-core span { font-size: 17px; font-weight: 800; letter-spacing: -.05em; }.orbit-core small { color: rgba(226,255,88,.67); font-size: 5px; letter-spacing: .16em; margin-top: -22px; }
.storage-banner { display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; }.storage-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--teal); border-radius: 10px; background: var(--surface); }.storage-icon svg { width: 18px; fill: currentColor; }.storage-banner > div:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.storage-banner strong { font-size: 12px; }.storage-banner span { font-size: 11px; color: var(--muted); }.text-button { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }.text-button:hover { color: var(--ink); }
.workspace { padding: 56px 0 40px; }.section-heading { display: flex; align-items: center; justify-content: space-between; }.section-kicker { margin-bottom: 8px; font-size: 9px; }.section-heading h2 { font-size: 25px; margin: 0; letter-spacing: -.045em; }.section-heading h2 span { vertical-align: 3px; margin-left: 5px; color: var(--faint); font-size: 12px; font-weight: 600; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 11px; font-weight: 700; font-size: 12px; border: 1px solid transparent; transition: .2s ease; }.primary-button { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 16px rgba(170,205,41,.18); }.primary-button:hover { background: #d6f347; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(170,205,41,.25); }.primary-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }.secondary-button { color: var(--ink); background: var(--surface); border-color: var(--line); }.secondary-button:hover { border-color: var(--faint); transform: translateY(-1px); }.secondary-button span { color: var(--teal); font-size: 16px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 19px; }.search-box { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }.search-box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: none; color: var(--ink); font-size: 12px; }.search-box input::placeholder { color: var(--faint); }.search-box kbd { padding: 3px 5px; white-space: nowrap; color: var(--faint); border: 1px solid var(--line); border-radius: 5px; font-size: 9px; }.filter-tabs { display: flex; align-items: center; gap: 4px; }.filter-tab { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; }.filter-tab span { min-width: 17px; padding: 2px 4px; border-radius: 5px; background: var(--surface-soft); font-size: 9px; }.filter-tab.active { color: var(--ink); background: var(--surface-soft); font-weight: 700; }.demo-note { margin: 0 0 17px; color: var(--muted); font-size: 11px; }.demo-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent-strong); }
.entries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.entry-card { position: relative; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: .25s ease; overflow: hidden; }.entry-card:hover { border-color: #c7d5ca; transform: translateY(-2px); }.entry-card::after { content:""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--accent); opacity: .07; top: -47px; right: -35px; }.card-top { display: flex; align-items: flex-start; justify-content: space-between; }.issuer { display: flex; align-items: center; gap: 9px; min-width: 0; }.issuer-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: var(--accent-ink); background: var(--accent); font-size: 13px; font-weight: 800; }.issuer-copy { min-width: 0; }.issuer-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.issuer-copy span { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }.favorite-button { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; color: var(--faint); background: transparent; }.favorite-button:hover, .favorite-button.active { color: #d09f27; background: #fff7df; }.favorite-button svg { width: 14px; fill: currentColor; }
.code-block { padding: 23px 0 18px; }.code-label { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 9px; letter-spacing: .12em; font-weight: 700; }.code-value { margin-top: 5px; color: var(--ink); font-size: 32px; line-height: 1; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-weight: 730; }.code-value.invalid { color: #d77e6c; font-size: 22px; letter-spacing: .05em; }.copy-code { border: 0; color: var(--teal); background: transparent; font-size: 10px; font-weight: 700; }.copy-code:hover { text-decoration: underline; }.timer-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }.timer-track { height: 3px; flex: 1; overflow: hidden; border-radius: 9px; background: var(--surface-soft); }.timer-track i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width 1s linear; }.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; margin-top: 2px; border-top: 1px solid var(--line); }.card-note { overflow: hidden; max-width: 160px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.card-note::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent-strong); }.card-actions { display: flex; align-items: center; gap: 10px; }.card-actions button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 10px; }.card-actions button:hover { color: var(--ink); }.card-actions .delete-button:hover { color: #c66757; }
.empty-state { padding: 65px 20px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }.empty-illustration { position: relative; width: 70px; height: 55px; margin: 0 auto 22px; }.empty-illustration span { position: absolute; width: 45px; height: 34px; border: 1px solid var(--faint); border-radius: 8px; transform: rotate(-8deg); }.empty-illustration span:nth-child(1){left:3px; top:12px; opacity:.45}.empty-illustration span:nth-child(2){left:15px; top:5px; border-color:var(--accent-strong); opacity:.8}.empty-illustration span:nth-child(3){left:27px; top:0; background:var(--accent); border-color:var(--accent); transform:rotate(8deg)}.empty-state h3 { margin: 0 0 7px; font-size: 17px; }.empty-state p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.footer { display: flex; align-items: center; gap: 9px; padding: 22px 0 30px; color: var(--faint); font-size: 10px; letter-spacing: .03em; }.footer-spacer { flex: 1; }.footer-separator { color: var(--line); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(17, 24, 20, .42); backdrop-filter: blur(6px); }.modal-backdrop[hidden] { display: none; }.modal { width: min(490px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 80px rgba(0,0,0,.22); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }.modal-header h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }.modal-close { width: 32px; height: 32px; }.field { display: grid; gap: 8px; margin-top: 15px; }.field > span { font-size: 11px; color: var(--muted); font-weight: 700; }.field b { color: #d16b58; }.field small { color: var(--faint); font-size: 10px; font-weight: 400; }.field input, .field textarea, .field select { width: 100%; resize: vertical; padding: 11px 12px; outline: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(190,221,63,.13); }.field textarea { line-height: 1.5; }.field-help { margin-top: -2px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-error { min-height: 18px; margin: 12px 0 0; color: #c75e4d; font-size: 11px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(27,40,34,.16); font-size: 11px; opacity: 0; transform: translate(-50%, 15px); pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast-check { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: var(--accent-ink); background: var(--accent); font-weight: 800; }
@media (max-width: 840px) { .hero-orbit { margin-right: 0; transform: scale(.8); transform-origin: right center; }.entries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .app-shell { width: min(100% - 30px, 520px); }.topbar { height: 72px; }.privacy-pill { display: none; }.hero { min-height: unset; }.hero-copy { padding: 42px 0 35px; }.hero h1 { font-size: 43px; }.hero-subtitle { font-size: 13px; }.hero-orbit { display: none; }.storage-banner { align-items: flex-start; flex-wrap: wrap; }.storage-banner > div:nth-child(2) { flex: 1; min-width: 190px; }.text-button { margin-left: 48px; }.workspace { padding-top: 43px; }.section-heading h2 { font-size: 22px; }.toolbar { display: grid; gap: 12px; }.search-box { width: 100%; }.filter-tabs { justify-content: flex-start; }.entries-grid { grid-template-columns: 1fr; }.entry-card { padding: 18px; }.footer { flex-wrap: wrap; }.footer-spacer { display: none; }.modal { padding: 21px; } }

/* v1.1 — reusable templates and a roomier authenticator grid */
.hero { min-height: 238px; }
.hero-copy { padding: 34px 0 30px; }
.hero h1 { font-size: clamp(35px, 4.6vw, 53px); }
.hero-subtitle { max-width: 455px; margin-top: 14px; font-size: 13px; line-height: 1.58; }
.hero-orbit { width: 250px; height: 190px; margin-right: 30px; transform: scale(.86); transform-origin: right center; }
.workspace { padding-top: 42px; }
.entries-grid { gap: 18px; }
.entry-card { min-height: 258px; padding: 24px; }
.code-block { padding: 30px 0 21px; }
.code-value { font-size: 40px; letter-spacing: .13em; }
.copy-code { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 6px 10px; color: var(--accent-ink); background: var(--accent); border-radius: 8px; font-size: 11px; box-shadow: 0 4px 10px rgba(170,205,41,.16); }
.copy-code:hover { text-decoration: none; background: #d6f347; transform: translateY(-1px); }
.copy-code svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.templates { padding: 39px 0 12px; border-top: 1px solid var(--line); }
.template-heading { align-items: end; }
.template-actions { display: flex; align-items: center; gap: 8px; }
.template-actions .secondary-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.template-hint { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.templates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.template-card { padding: 17px 18px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 28px rgba(27,40,34,.045); transition: .2s ease; }
.template-card:hover { border-color: #c7d5ca; transform: translateY(-2px); }
.template-card-top { display: flex; align-items: center; gap: 10px; }
.template-card-top > div { min-width: 0; flex: 1; }
.template-card-top strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.template-card-top > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.template-mark { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 10px; color: var(--accent-ink); background: var(--accent); font-size: 16px; }
.template-more { width: 27px; height: 27px; border: 0; border-radius: 7px; color: var(--faint); background: transparent; font-weight: 800; letter-spacing: .12em; }
.template-more:hover { color: var(--ink); background: var(--surface-soft); }
.template-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 17px 0 14px; padding: 11px 12px; border-radius: 9px; background: var(--surface-soft); font-size: 11px; }
.template-preview span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.template-preview b { overflow: hidden; max-width: 44%; color: var(--muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.template-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-card-note { color: var(--faint); font-size: 9px; white-space: nowrap; }
.template-actions-inline { display: flex; align-items: center; gap: 10px; }
.template-actions-inline button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 10px; }
.template-actions-inline button:hover { color: var(--ink); }
.template-actions-inline button[data-template-action="use"] { padding: 6px 9px; color: var(--accent-ink); background: var(--accent); border-radius: 7px; font-weight: 700; }
.template-actions-inline button[data-template-action="use"]:hover { background: #d6f347; }
.template-actions-inline .delete-button:hover { color: #c66757; }
.templates-empty { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 15px 16px; border: 1px dashed var(--line); border-radius: 13px; }
.template-empty-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--accent-ink); background: var(--accent); }
.templates-empty strong { font-size: 12px; }.templates-empty p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.template-security-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding: 10px 11px; border-radius: 9px; color: var(--teal); background: var(--surface-soft); font-size: 10px; line-height: 1.5; }.template-security-note span { color: var(--accent-strong); font-size: 16px; }

@media (max-width: 840px) {
  .hero-orbit { margin-right: 0; transform: scale(.72); }
  .templates-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero-copy { padding: 29px 0 25px; }
  .hero h1 { font-size: 37px; }
  .hero-subtitle { font-size: 12px; }
  .templates { padding-top: 32px; }
  .template-heading { align-items: flex-start; gap: 16px; flex-direction: column; }
  .template-actions { width: 100%; }.template-actions > button { flex: 1; }
  .template-hint { line-height: 1.55; }
  .templates-grid { grid-template-columns: 1fr; }
  .entry-card { min-height: 246px; padding: 20px; }
  .code-value { font-size: 36px; }
}

/* v1.2 — dedicated template library and compact shortcut cards */
.nav-button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; transition: .2s ease; }
.nav-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-button span { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 9px; }
.nav-button:hover, .nav-button.active { color: var(--ink); border-color: var(--faint); background: var(--surface-soft); }
.shortcuts-section { padding: 34px 0 50px; border-top: 1px solid var(--line); }
.shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shortcut-panel { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 10px 28px rgba(27,40,34,.04); }
.shortcut-heading { align-items: center; }.shortcut-heading h2 { font-size: 19px; }.shortcut-heading .section-kicker { margin-bottom: 6px; }
.compact-button { min-height: 33px; padding: 0 11px; font-size: 10px; }.compact-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shortcut-hint { margin: 8px 0 14px; color: var(--muted); font-size: 10px; }
.shortcut-list { display: grid; gap: 8px; }
.shortcut-card { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); transition: .2s ease; }.shortcut-card:hover { border-color: #c7d5ca; background: var(--surface-soft); }
.shortcut-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 0; border: 0; text-align: left; color: var(--ink); background: transparent; }.shortcut-main:hover .shortcut-copy strong { color: var(--teal); }
.shortcut-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; color: var(--accent-ink); background: var(--accent); font-size: 16px; font-weight: 800; }.copy-icon { font-size: 14px; }
.shortcut-copy { min-width: 0; }.shortcut-copy strong, .shortcut-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.shortcut-copy strong { font-size: 11px; }.shortcut-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.shortcut-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }.shortcut-actions button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; }.shortcut-actions button:hover { color: var(--ink); }.shortcut-actions .delete-button:hover { color: #c66757; }
.shortcut-empty { display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); }.shortcut-empty > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--accent-ink); background: var(--accent); font-size: 15px; }.shortcut-empty p { margin: 0; font-size: 10px; }
.templates-page { padding: 38px 0 70px; }.templates-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 27px; border-bottom: 1px solid var(--line); }.templates-page-header > div:first-child { min-width: 0; }.back-button { display: inline-flex; align-items: center; margin: 0 0 42px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; }.back-button:hover { color: var(--ink); }.templates-page-header h1 { margin: 0; font-size: clamp(34px, 5vw, 53px); line-height: 1; letter-spacing: -.06em; }.templates-page-header h1 span { vertical-align: 8px; margin-left: 5px; color: var(--faint); font-size: 13px; letter-spacing: 0; }.templates-page-header p:not(.section-kicker) { max-width: 540px; margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.template-page-actions { display: flex; flex: 0 0 auto; }.template-page-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 27px; }.template-library-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 28px rgba(27,40,34,.045); transition: .2s ease; }.template-library-card:hover { border-color: #c7d5ca; transform: translateY(-2px); }.template-library-top { display: flex; align-items: center; gap: 10px; }.template-library-top > div { min-width: 0; flex: 1; }.template-library-top strong, .template-library-top span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.template-library-top strong { font-size: 13px; }.template-library-top > div > span { margin-top: 4px; color: var(--muted); font-size: 10px; }.template-library-preview { overflow: hidden; margin: 17px 0 14px; padding: 11px 12px; border-radius: 9px; color: var(--ink); background: var(--surface-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.template-library-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.template-library-footer > span { color: var(--faint); font-size: 9px; white-space: nowrap; }.template-library-footer > div { display: flex; align-items: center; gap: 10px; }.template-library-footer button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 10px; }.template-library-footer button:hover { color: var(--ink); }.template-library-footer button[data-template-action="use"] { padding: 6px 9px; color: var(--accent-ink); background: var(--accent); border-radius: 7px; font-weight: 700; }.template-library-footer button[data-template-action="use"]:hover { background: #d6f347; }.template-library-footer .delete-button:hover { color: #c66757; }

@media (max-width: 840px) { .shortcut-grid { grid-template-columns: 1fr; }.library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .nav-button { padding: 0 8px; }.nav-button span { display: none; }.shortcuts-section { padding-top: 28px; }.shortcut-panel { padding: 17px; }.shortcut-card { min-height: 46px; }.shortcut-actions { gap: 7px; }.shortcut-actions button { font-size: 8px; }.templates-page { padding-top: 27px; }.templates-page-header { display: block; }.back-button { margin-bottom: 31px; }.template-page-actions { margin-top: 20px; }.template-page-actions .secondary-button { width: 100%; }.library-grid { grid-template-columns: 1fr; margin-top: 20px; }.template-library-card { padding: 16px; } }

/* v1.3 — compact OTP cards and area-level template actions */
.section-heading-actions { display: flex; align-items: center; gap: 8px; }
.entry-card { min-height: 218px; padding: 18px 20px; }
.code-block { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 0 16px; }
.code-value { margin-top: 0; font-size: 35px; }
.copy-code { min-height: 39px; padding: 8px 13px; font-size: 12px; border-radius: 9px; }
.card-note:empty { min-width: 1px; }
.icon-action { display: inline-grid !important; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.icon-action:hover { background: var(--surface-soft); }
.icon-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shortcut-card { min-height: 46px; }
@media (max-width: 620px) {
  .section-heading-actions { gap: 5px; }
  .entry-card { min-height: 208px; padding: 17px; }
  .code-block { gap: 9px; padding: 20px 0 14px; }
  .code-value { font-size: 31px; letter-spacing: .1em; }
  .copy-code { padding: 8px 10px; font-size: 11px; }
  .shortcut-card { min-height: 44px; }
}

/* v1.4 — dense horizontal shortcut lists and a compact hero */
.hero { min-height: 166px; }
.hero-copy { padding: 22px 0 20px; }
.hero h1 { font-size: clamp(31px, 3.8vw, 44px); }
.hero-subtitle { max-width: 420px; margin-top: 10px; font-size: 12px; line-height: 1.5; }
.hero-orbit { width: 195px; height: 135px; margin-right: 4px; transform: scale(.62); opacity: .72; }
.workspace { padding-top: 34px; }
.shortcuts-section { padding-top: 28px; }
.shortcut-grid { grid-template-columns: 1fr; gap: 13px; }
.shortcut-panel { padding: 17px 18px; }
.shortcut-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shortcut-card { min-width: 0; min-height: 43px; padding: 6px 8px; border-radius: 9px; }
.shortcut-icon { width: 25px; height: 25px; border-radius: 7px; font-size: 14px; }
.shortcut-copy strong { font-size: 10px; }.shortcut-copy small { font-size: 8px; }
.shortcut-actions { gap: 6px; }.shortcut-actions button { font-size: 8px; }.icon-action { width: 22px; height: 22px; }
.shortcut-hint { margin: 6px 0 10px; }
@media (max-width: 980px) { .shortcut-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .hero { min-height: 140px; }.hero-copy { padding: 20px 0 18px; }.hero h1 { font-size: 32px; }.hero-subtitle { font-size: 11px; }.hero-orbit { display: none; }.shortcut-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .shortcut-list { grid-template-columns: 1fr; }.shortcut-card { min-height: 45px; } }

/* v1.5 — hidden shortcut actions, memo panel, tighter dashboard header */
.edit-toggle.active { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.memo-panel { max-width: 460px; }
.memo-textarea { display: block; width: 100%; min-height: 58px; margin-top: 12px; padding: 10px 11px; resize: vertical; outline: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 11px; line-height: 1.5; }
.memo-textarea:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(190,221,63,.13); }
.memo-status { margin-top: 6px; color: var(--faint); font-size: 9px; }
.hero { min-height: 124px; }
.hero-copy { padding: 16px 0 15px; }
.eyebrow { margin-bottom: 8px; font-size: 9px; }
.hero h1 { font-size: clamp(28px, 3.3vw, 38px); }
.hero h1 em::after { height: 7px; bottom: 2px; }
.hero-subtitle { max-width: 380px; margin-top: 8px; font-size: 11px; line-height: 1.4; }
.hero-orbit { width: 170px; height: 112px; transform: scale(.5); }
.storage-banner { gap: 10px; padding: 10px 12px; border-radius: 11px; }
.storage-icon { width: 28px; height: 28px; border-radius: 8px; }.storage-icon svg { width: 15px; }
.storage-banner strong { font-size: 11px; }.storage-banner span { font-size: 10px; }
.workspace { padding-top: 23px; }
.toolbar { margin: 16px 0 12px; }.demo-note { margin-bottom: 12px; font-size: 10px; }
@media (max-width: 700px) { .hero { min-height: 112px; }.hero-copy { padding: 15px 0 13px; }.hero h1 { font-size: 29px; }.hero-subtitle { font-size: 10px; }.storage-banner { padding: 9px 10px; }.workspace { padding-top: 20px; }.memo-panel { max-width: none; } }