:root {
	--sw-bg: #001b13;
	--sw-bg-2: #00482e;
	--sw-green: #0a7a43;
	--sw-green-2: #17a65a;
	--sw-mint: #7be38f;
	--sw-shadow: 0 24px 64px rgba(0, 19, 12, 0.3);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sw-bg); }
body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 12% 0%, rgba(123, 227, 143, 0.2), transparent 26rem),
		linear-gradient(145deg, #001b13 0%, #003623 58%, #00482e 100%);
	color: #effff4;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
.hidden { display: none !important; }
.monospace { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }

.crypto-field {
	position: fixed;
	inset: -35%;
	transform: rotate(-12deg);
	background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(123, 227, 143, 0.025) 39px 40px);
	pointer-events: none;
}

.keylink-shell {
	width: min(100%, 480px);
	margin: 0 auto;
	border-inline: 1px solid rgba(149, 232, 176, 0.08);
}
.keylink-header h1, .keylink-header h2 { margin: 0; color: #effff4; font-size: 1.06rem; line-height: 1.08; }
.keylink-header h1:empty { display: none; }
.keylink-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
#backButton.hidden + .keylink-brand { grid-column: 1 / 3; }
.keylink-brand-logo { display: block; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 16px; object-fit: contain; }
.keylink-brand-copy { min-width: 0; }
.keylink-brand-copy .keylink-eyebrow { margin: 0; line-height: 1.25; }
.icon-button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(149, 232, 176, 0.16); border-radius: 15px; background: #0c1f15; color: #a6f5c2; }
.icon-button svg { width: 21px; }

.app-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
.app-panel.active { display: block; }
.home-hero { position: relative; padding: 22px 20px; border: 1px solid rgba(149, 232, 176, 0.14); border-radius: 28px; background: radial-gradient(circle at 90% 0%, rgba(123, 227, 143, 0.2), transparent 16rem), linear-gradient(145deg, rgba(2, 57, 38, 0.95), rgba(3, 82, 49, 0.88)); box-shadow: var(--sw-shadow), inset 0 1px rgba(255,255,255,0.08); }
.home-hero .eyebrow { margin: 0 0 6px; color: #7be38f; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-hero h2 { margin: 0; font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.02; letter-spacing: -.045em; }
.home-hero p:last-child { max-width: 31rem; margin: 12px 0 0; color: #b2c8ba; line-height: 1.5; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 20px; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; padding: 10px; border: 1px solid rgba(123,227,143,.24); border-radius: 21px; background: linear-gradient(145deg, #0d9953, #087441); color: white; font-weight: 800; box-shadow: 0 12px 26px rgba(0, 30, 18, .28); }
.primary-action.secondary { background: linear-gradient(145deg, rgba(12, 48, 31, .96), rgba(8, 33, 22, .96)); }
.primary-action svg { width: 20px; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 2px 8px; }
.library-heading h2 { margin: 0; font-size: 1.35rem; }
.search-control { position: relative; width: 132px; }
.search-control svg { position: absolute; top: 50%; left: 11px; width: 17px; transform: translateY(-50%); color: #91aa9a; }
.search-control input { width: 100%; min-height: 44px; padding: 0 10px 0 35px; border: 1px solid rgba(149,232,176,.16); border-radius: 15px; background: #10271b; color: #effff4; }

.form-card { padding: 20px; border: 1px solid rgba(149, 232, 176, 0.14); border-radius: 28px; background: linear-gradient(145deg, rgba(2, 57, 38, 0.95), rgba(3, 72, 45, 0.9)); box-shadow: var(--sw-shadow), inset 0 1px rgba(255,255,255,.07); }
.panel-intro { display: flex; gap: 13px; align-items: center; margin-bottom: 20px; }
.panel-intro h2 { margin: 0 0 5px; font-size: 1.5rem; }
.panel-intro p { margin: 0; color: #a9c0b1; line-height: 1.4; }
.step-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; background: rgba(57,215,127,.14); color: #7be38f; }
.step-icon.large { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 20px; }
.form-row { display: block; margin-bottom: 15px; }
.form-row > span { display: flex; justify-content: space-between; gap: 8px; margin: 0 2px 7px; color: #e8fff0; font-size: .82rem; font-weight: 800; }
.form-row b, .form-row em { color: #7be38f; font-size: .67rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.form-row em { color: #91aa9a; }
input, textarea, select { width: 100%; min-height: 48px; border: 1px solid rgba(149,232,176,.16); border-radius: 16px; outline: none; background: rgba(2,62,39,.78); color: #effff4; }
input, select { padding: 0 13px; }
textarea { min-height: 112px; padding: 13px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: #39d77f; box-shadow: 0 0 0 3px rgba(57,215,127,.15); }
.form-row small { display: block; margin: 6px 2px 0; color: #91aa9a; font-size: .72rem; line-height: 1.35; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(145deg, #0d9953, #087441); color: white; font-weight: 800; }
.button.secondary { border-color: rgba(149,232,176,.18); background: #10271b; color: #dff9e7; }
.button.subtle { border-color: rgba(149,232,176,.12); background: transparent; color: #a6c4b0; }
.button.compact { width: auto; min-width: 92px; padding-inline: 13px; }
.button svg { width: 19px; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.notice { display: flex; gap: 10px; margin: 13px 0; padding: 12px; border: 1px solid rgba(123,227,143,.15); border-radius: 15px; background: rgba(2,35,23,.62); color: #bcd4c3; font-size: .78rem; line-height: 1.4; }
.notice svg { width: 19px; flex: 0 0 19px; color: #7be38f; }
.notice.warning { border-color: rgba(242,185,75,.25); background: rgba(85,57,8,.24); color: #f2dba9; }
.or-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 17px 0; color: #789181; font-size: .75rem; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; background: rgba(149,232,176,.12); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; border-bottom: 1px solid rgba(149,232,176,.12); }
.setting-row strong, .setting-row small { display: block; }
.setting-row small { margin-top: 4px; color: #91aa9a; font-size: .72rem; line-height: 1.35; }
.setting-select select { width: 130px; }
.setting-actions { display: flex; gap: 7px; }
.advanced-details { margin-top: 16px; padding: 13px; border: 1px solid rgba(149,232,176,.12); border-radius: 16px; color: #b9d1c0; }
.advanced-details summary { min-height: 32px; font-weight: 800; cursor: pointer; }
.advanced-details dl { margin: 10px 0 0; }
.advanced-details dl div { display: grid; grid-template-columns: 105px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(149,232,176,.1); }
.advanced-details dt { color: #91aa9a; }
.advanced-details dd { margin: 0; }

.app-footer { display: grid; gap: 7px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(149,232,176,.1); background: transparent; color: #81a08b; font-size: .68rem; text-align: center; }
.footer-social { display: grid; gap: 5px; }
.footer-heading { color: #b7d8c2; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.social-links { display: flex; align-items: center; justify-content: center; gap: 7px; }
.social-link { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 7px; border-radius: 9px; color: #a7e5bb; font-weight: 700; text-decoration: none; }
.social-link:hover, .social-link:focus-visible { background: rgba(57,215,127,.1); color: #dff9e7; outline: 1px solid rgba(149,232,176,.2); }
.social-link svg { width: 14px; height: 14px; }
.social-link.is-disabled { color: #6f8d79; cursor: default; opacity: .72; }
.social-link.is-disabled:hover, .social-link.is-disabled:focus-visible { background: transparent; outline: 0; }
.footer-meta, .footer-about { display: flex; align-items: center; justify-content: center; gap: 7px; }
.app-footer button { padding: 0; border: 0; background: transparent; color: #9fd9b2; font-weight: 700; }
.footer-about { color: #688473; }
.footer-about button { min-height: 28px; }
.about-card { text-align: center; }
.about-card h2 { margin-bottom: 8px; }
.about-version { color: #7be38f !important; font-weight: 800; }

.menu-sheet { position: fixed; inset: 0; z-index: 70; display: none; align-items: end; justify-content: center; }
.menu-sheet.active { display: flex; }
.menu-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,13,8,.72); backdrop-filter: blur(8px); }
.menu-panel { position: relative; width: min(calc(100% - 24px), 452px); margin-bottom: max(12px, env(safe-area-inset-bottom)); padding: 18px; border: 1px solid rgba(149,232,176,.16); border-radius: 30px; background: #07150e; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.menu-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.menu-title h2 { margin: 0; }
.menu-items { overflow: hidden; border: 1px solid rgba(149,232,176,.12); border-radius: 22px; }
.menu-item { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-bottom: 1px solid rgba(149,232,176,.1); background: #0b2015; color: #effff4; text-align: left; font-weight: 800; }
.menu-item:last-child { border-bottom: 0; }
.menu-item > svg:last-child { width: 18px; color: #6f8c79; }

.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: end; justify-content: center; padding: 14px; background: rgba(0,13,8,.78); backdrop-filter: blur(9px); }
.modal.active { display: flex; }
.modal-card { width: min(100%, 452px); max-height: calc(100svh - 28px); overflow-y: auto; padding: 20px; border: 1px solid rgba(149,232,176,.16); border-radius: 28px; background: linear-gradient(145deg, #0b2015, #06110c); color: #effff4; box-shadow: 0 30px 80px rgba(0,0,0,.52); }
.modal-card > h2, .modal-card > p { text-align: center; }
.modal-card > p { color: #a8bdae; line-height: 1.5; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.keylink-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keylink-modal-header h2 { margin: 0; }
.detail-status { margin: 16px 0; padding: 14px; border-radius: 16px; background: rgba(57,215,127,.11); color: #aef4c7; font-weight: 800; }
.detail-status.expired { background: rgba(242,185,75,.12); color: #f2cf87; }
.keylink-readonly { min-height: 86px; margin-top: 13px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .68rem; overflow-wrap: anywhere; }
.keylink-qr-code { display: grid; place-items: center; min-height: 250px; margin: 15px auto; padding: 14px; border-radius: 24px; background: white; }
.keylink-qr-code img, .keylink-qr-code canvas { width: min(100%, 252px); height: auto; image-rendering: crisp-edges; }
.share-pending-state { display: grid; justify-items: center; gap: 12px; margin: 18px 0 4px; padding: 22px 18px; border: 1px solid rgba(242,185,75,.25); border-radius: 20px; background: rgba(85,57,8,.24); color: #f2dba9; text-align: center; }
.share-pending-state > svg { width: 36px; height: 36px; color: #f2cf87; }
.share-pending-state p { margin: 0; line-height: 1.5; }
.share-pending-notice > div { display: grid; gap: 8px; }
.share-pending-notice strong, .share-pending-notice span { display: block; }
.share-pending-notice .button { justify-self: start; margin-top: 2px; }
.incoming-keylink-actions { display: grid; gap: 9px; margin-top: 18px; }
.keylink-secret-text { min-height: 100px; padding: 18px; border: 1px solid rgba(123,227,143,.2); border-radius: 18px; background: #020b07; color: #effff4; font: 800 1.45rem/1.35 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; }

.pin-card { text-align: center; }
.pin-entry { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: min(100%, 286px); margin: 18px auto; }
.pin-entry.six { grid-template-columns: repeat(6, 1fr); width: min(100%, 360px); gap: 7px; }
.pin-input { position: absolute; inset: 0; z-index: 2; width: 100%; opacity: 0; cursor: text; }
.pin-box { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(149,232,176,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(0,34,21,.76), rgba(1,73,43,.58)); }
.pin-box.filled::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #dff9e7; box-shadow: 0 0 0 5px rgba(223,249,231,.07); }
.pin-entry:focus-within .pin-box { border-color: #39d77f; }
.form-error { min-height: 20px; margin: 4px 0 8px; color: #ff8177 !important; font-size: .78rem; }
.text-button { min-height: 44px; border: 0; background: transparent; color: #9eddb3; font-weight: 700; }
.lock-screen { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 0%, rgba(57,215,127,.16), transparent 25rem), #020b07; }
.lock-screen.active { display: grid; }
.scanner-card video { display: block; width: 100%; min-height: 260px; border-radius: 18px; background: #020b07; object-fit: cover; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 120; max-width: min(calc(100% - 28px), 420px); padding: 12px 16px; border: 1px solid rgba(149,232,176,.18); border-radius: 15px; background: #0c2418; color: #effff4; box-shadow: 0 16px 40px rgba(0,0,0,.4); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .2s ease; }
.toast.active { opacity: 1; transform: translate(-50%, 0); }
.toast.danger { border-color: rgba(255,129,119,.4); }

.onboarding-card { margin: min(12vh, 72px) auto 0; text-align: center; }
.onboarding-card h2 { margin-bottom: 6px; font-size: 1.8rem; }
.onboarding-card > p { color: #a8bdae; line-height: 1.5; }
.access-pin-toggle { cursor: pointer; }
.toggle-input { width: 50px; min-width: 50px; min-height: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; appearance: none; background: #173c29; box-shadow: inset 0 0 0 1px rgba(149,232,176,.2); cursor: pointer; transition: .18s ease; }
.toggle-input::after { content: ""; display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; background: #91aa9a; transition: .18s ease; }
.toggle-input:checked { background: #0d9953; }
.toggle-input:checked::after { transform: translateX(22px); background: white; }
.toggle-input:disabled { opacity: .55; cursor: wait; }
.access-pin-card { display: grid; gap: 8px; margin: 12px 0; padding: 15px; border: 1px solid rgba(123,227,143,.24); border-radius: 18px; background: rgba(2,35,23,.65); }
.access-pin-card > span { color: #91aa9a; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.access-pin-card > small { color: #a8bdae; line-height: 1.45; }
.access-pin-value { color: #effff4; font: 800 1.8rem/1.15 "SFMono-Regular", Consolas, monospace; letter-spacing: .16em; }
.access-pin-controls { margin: 14px 0; padding: 0 14px; border: 1px solid rgba(149,232,176,.12); border-radius: 18px; }
.recovery-settings-block { margin: 12px 0 18px; padding: 16px; border: 1px solid rgba(149,232,176,.16); border-radius: 20px; background: rgba(2,35,23,.5); }
.recovery-settings-block h3 { margin: 5px 0 8px; font-size: 1rem; line-height: 1.4; }
.recovery-settings-block p { margin: 12px 0 0; color: #a8bdae; font-size: .78rem; line-height: 1.5; }
.recovery-settings-block .keylink-readonly { width: 100%; }
.privacy-label { display: inline-block; margin-bottom: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(242,185,75,.13); color: #f2dba9; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.recovery-path { display: grid; gap: 7px; margin: 14px 0; padding: 14px; border: 1px solid rgba(149,232,176,.14); border-radius: 16px; background: rgba(2,35,23,.55); color: #bcd4c3; font-size: .8rem; line-height: 1.45; }
.recovery-path code { padding: 9px; border-radius: 10px; background: #020b07; color: #bdf3cd; white-space: normal; }

@media (max-width: 374px) {
	.app-panel { padding-inline: 10px; }
	.keylink-header { gap: 7px; padding-inline: 10px; }
	.keylink-brand { gap: 7px; }
	.keylink-brand-logo { width: 56px; height: 56px; flex-basis: 56px; }
	.keylink-brand .keylink-eyebrow { font-size: .58rem; letter-spacing: .06em; }
	.keylink-header h1 { font-size: .88rem; }
	.social-links { gap: 2px; }
	.social-link { padding-inline: 5px; font-size: .62rem; }
	.home-actions { gap: 8px; }
	.primary-action { font-size: .78rem; }
	.form-card { padding-inline: 16px; }
	.modal-actions.stacked-mobile { grid-template-columns: 1fr; }
	.pin-entry.six { gap: 5px; }
	.pin-entry.six .pin-box { border-radius: 12px; }
}

@media (min-width: 700px) {
	.modal { align-items: center; }
	.keylink-shell .keylink-header { padding-right: 14px; padding-left: 14px; }
	.keylink-shell .keylink-toolbar { padding-right: 14px; padding-left: 14px; }
	.keylink-shell .keylink-list { padding-right: 10px; padding-left: 10px; }
}

@media (prefers-reduced-transparency: reduce) {
	.keylink-header, .menu-backdrop, .modal { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}