.guide-page { max-width: 1260px; }
.guide-hero { padding-bottom: 28px; }
.guide-hero h1 { max-width: 850px; font-size: clamp(2.5rem, 5vw, 5rem); }
.guide-warning { display: flex; gap: 14px; align-items: center; margin-bottom: 58px; padding: 13px 16px; border-left: 2px solid var(--orange); background: rgba(255,157,99,.07); color: var(--muted); font-size: 12px; }
.guide-warning strong { color: var(--orange); white-space: nowrap; }
.guide-section { scroll-margin-top: 90px; margin-bottom: 70px; }
.guide-title { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.guide-title > span { color: var(--lime); font: 12px "SFMono-Regular", Consolas, monospace; }
.guide-title h2 { margin-top: -5px; }
.guide-section > p { max-width: 830px; color: var(--muted); font-size: 13px; }
.guide-section a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.value-grid, .os-grid, .trouble-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.value-grid { margin: 20px 0; }
.value-grid > div, .os-card, .trouble-grid > div { padding: 17px; border: 1px solid var(--line); background: var(--panel); }
.value-grid code { display: block; margin-bottom: 7px; color: var(--lime); font-size: 11px; }
.value-grid span { color: var(--muted); font-size: 12px; }
.route { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 15px 16px; border: 1px solid var(--line); background: var(--panel-soft); font-size: 12px; }
.route span, .os-card header span { color: var(--orange); font: 10px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.route b { color: var(--lime); font-weight: 400; }
.guide-note { display: block; margin-top: 14px; padding: 14px 16px; border-left: 2px solid var(--blue); background: rgba(121,183,255,.06); color: var(--muted); font-size: 12px; }
.guide-note strong { display: block; margin-bottom: 8px; color: var(--blue); }
.guide-note ol { margin: 0; padding-left: 20px; }
.unlock-row { display: flex; gap: 10px; align-items: end; max-width: 620px; }.unlock-row label, .builder-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }.unlock-row label { flex: 1; }.unlock-row input, .builder-grid input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); outline: 0; background: #0a0d0c; color: var(--text); font: inherit; }.unlock-row input:focus, .builder-grid input:focus { border-color: var(--lime); }.unlock-row button, .encrypt-button { flex: 0 0 auto; white-space: nowrap; padding: 11px 15px; border: 1px solid var(--lime); background: var(--lime); color: #10140d; font-weight: 700; cursor: pointer; }.vault-status { min-height: 20px; color: var(--lime) !important; }.secret-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.secret-grid > div { min-height: 86px; padding: 16px; border: 1px solid var(--line); background: var(--panel); }.secret-grid span, .secret-grid strong { display: block; }.secret-grid span { margin-bottom: 12px; color: var(--muted); font-size: 11px; }.secret-grid strong { color: var(--lime); font: 12px "SFMono-Regular", Consolas, monospace; word-break: break-word; }.builder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }.encrypt-button { margin-bottom: 14px; }.vault-output { display: block; width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line); background: #0a0d0c; color: var(--muted); font: 11px/1.5 "SFMono-Regular", Consolas, monospace; }.vault-page .guide-warning { border-left-color: var(--purple); }.vault-page .guide-warning strong { color: var(--purple); }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.account-card { padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.account-card header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.account-card header span, .account-card header strong { display: block; }
.account-card header span { color: var(--purple); font: 11px "SFMono-Regular", Consolas, monospace; }
.account-card header strong { max-width: 75%; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-card dl { display: grid; gap: 8px; margin: 0; }
.account-card dl div { display: grid; gap: 4px; }
.account-card dt { color: var(--muted); font-size: 10px; }
.account-card dd { min-height: 30px; margin: 0; padding: 7px 9px; overflow-wrap: anywhere; border: 1px solid var(--line); background: #0a0d0c; color: var(--lime); font: 11px/1.4 "SFMono-Regular", Consolas, monospace; }
.vault-group .account-card dd { color: rgba(200, 238, 98, .15); }
.vault-group.vault-unlocked .account-card { opacity: 1; }
.vault-group.vault-unlocked .account-card dd { color: var(--lime); }
.vault-lock { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.vault-access-title { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }.vault-access-title > span { color: var(--lime); font: 12px "SFMono-Regular", Consolas, monospace; }.vault-access-title h2 { font-size: 1.45rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vault-builder { padding: 22px; border: 1px solid rgba(179,148,255,.35); background: rgba(179,148,255,.045); }
.vault-builder .guide-title { margin-bottom: 22px; }
.vault-builder .guide-title > span, .vault-builder .eyebrow { color: var(--purple); }
.vault-builder .encrypt-button { background: var(--purple); border-color: var(--purple); }
.builder-master { display: grid; gap: 6px; max-width: 360px; color: var(--muted); font-size: 11px; }
.builder-master input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); outline: 0; background: #0a0d0c; color: var(--text); font: inherit; }
.builder-load { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.builder-load label { display: grid; gap: 6px; min-width: min(360px, 100%); color: var(--muted); font-size: 11px; }
.builder-load input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); outline: 0; background: #0a0d0c; color: var(--text); font: inherit; }
.load-button, .reset-button { padding: 11px 15px; border: 1px solid var(--purple); background: var(--purple); color: #15101a; font-weight: 700; cursor: pointer; }
.reset-button { border-color: var(--line); background: transparent; color: var(--muted); }
.builder-status { min-height: 20px; margin: 12px 0 0; color: var(--purple); font-size: 12px; }
.encrypt-button:disabled { border-color: var(--line); background: var(--line); color: var(--muted); cursor: not-allowed; }
.builder-account-groups { display: grid; gap: 26px; margin: 24px 0; }
.builder-account-group > h3 { margin: 0 0 10px; color: var(--text); font-size: 14px; }
.builder-account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.builder-account-card { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line); background: rgba(10,13,12,.45); }
.builder-account-card > strong { color: var(--purple); font: 11px "SFMono-Regular", Consolas, monospace; }
.builder-account-card label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.builder-account-card input { width: 100%; padding: 8px 9px; border: 1px solid var(--line); outline: 0; background: #0a0d0c; color: var(--text); font: 12px/1.4 inherit; }
.builder-account-card input:focus, .builder-master input:focus { border-color: var(--purple); }
.os-grid { margin: 20px 0; }
.os-grid.compact { margin-top: 0; }
.os-card header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 16px; }
.os-card h3, .trouble-grid h3, .final-rules h3 { margin: 0; font-size: 14px; }
.os-card ol { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 12px; }
.os-card li { margin-bottom: 7px; }
.os-card p, .trouble-grid p, .final-rules p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
pre { overflow-x: auto; margin: 12px 0 20px; padding: 14px 16px; border: 1px solid var(--line); background: #0a0d0c; color: #c4d4c6; font: 12px/1.65 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.os-card pre { margin-bottom: 0; }
code { color: var(--lime); font-family: "SFMono-Regular", Consolas, monospace; font-size: .92em; }
.path-grid, .choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.path-grid div, .choice-grid span { padding: 10px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.path-grid span { display: block; margin-bottom: 5px; color: var(--blue); font: 10px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.config-card { margin: 12px 0; border: 1px solid var(--line); background: var(--panel); }
.config-card header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.config-card header h3 { margin: 0; font-size: 13px; }.config-card header code { color: var(--muted); font-size: 10px; }.config-card pre { margin: 0; border: 0; }
.subheading { margin: 30px 0 12px; font-size: 14px; }
.test-list { border-top: 1px solid var(--line); }.test-list > div { display: grid; grid-template-columns: 36px 1fr 1.25fr 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }.test-list b { color: var(--lime); font: 11px "SFMono-Regular", Consolas, monospace; }.test-list strong { font-size: 13px; }.test-list pre { margin: 0; padding: 9px 11px; }.test-list span { color: var(--muted); font-size: 11px; }
.trouble-grid { grid-template-columns: repeat(2, 1fr); }.trouble-grid h3 { margin-bottom: 7px; }.final-rules { margin-top: 12px; padding: 18px; border: 1px solid rgba(200,238,98,.3); background: rgba(200,238,98,.05); }.final-rules strong { color: var(--text); }
@media (max-width: 900px) { .value-grid, .trouble-grid { grid-template-columns: 1fr; }.test-list > div { grid-template-columns: 30px 1fr; }.test-list pre, .test-list span, .test-list > div > ol { grid-column: 2; }.test-list > div > ol { margin: 0; padding-left: 20px; } }
@media (max-width: 700px) { .guide-warning { display: block; }.guide-warning strong { display: block; margin-bottom: 5px; }.os-grid { grid-template-columns: 1fr; }.path-grid, .choice-grid { grid-template-columns: 1fr; }.config-card header { display: block; }.config-card header code { display: block; margin-top: 5px; } }
@media (max-width: 700px) { .unlock-row { display: grid; align-items: stretch; }.builder-load { display: grid; align-items: stretch; }.builder-load label { min-width: 0; }.secret-grid, .account-grid, .builder-grid, .builder-account-grid { grid-template-columns: 1fr; }.vault-builder { padding: 16px; } }
.unlock-row label { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.unlock-row button, .load-button, .reset-button, .encrypt-button, .download-list b { flex-shrink: 0; white-space: nowrap; }