:root { color-scheme: dark; background: #070d1a; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing: border-box; }
html,body,#root { margin: 0; width: 100%; height: 100%; }
button,a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible,a:focus-visible { outline: 2px solid #78b9ff; outline-offset: 4px; }
.web-shell { display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; color: #f0f6ff; }
.web-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; padding: max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); border-bottom: 1px solid #243957; background: #0b1628; }
.brand { display: flex; gap: 10px; align-items: center; color: #f0f6ff; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: 1.6px; }
.brand img { border-radius: 10px; }
.install-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 16px; min-height: 44px; color: #070d1a; background: #78b9ff; font-size: 14px; font-weight: 750; }
.install-button:hover { background: #9acaff; }
.install-button:disabled { opacity: .6; cursor: wait; }
.web-main { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
.connection-notice { padding: 10px 20px; background: #3d3219; color: #ffe1a1; font-size: 14px; line-height: 1.5; }
.install-dialog { padding: 28px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; color: #f0f6ff; background: #101c30; border: 1px solid #2d4e7a; border-radius: 24px; box-shadow: 0 30px 100px #0009; }
.install-dialog::backdrop { background: #030a17d9; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #192b47; color: #f0f6ff; font-size: 26px; }
.install-icon { border-radius: 18px; }
.eyebrow { margin-top: 24px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: #78b9ff; }
.install-dialog h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.7px; margin: 12px 0; }
.install-dialog p,.install-dialog li { line-height: 1.6; }
.install-dialog p { color: #a6b8d3; }
.install-dialog ol { padding-left: 24px; margin: 24px 0; }
.install-dialog li { padding: 0 0 14px 6px; font-size: 16px; }
.install-dialog li::marker { color: #78b9ff; font-weight: 800; }
.install-dialog .install-note { font-size: 14px; }
.wide { width: 100%; }
@media (min-width: 800px) { .web-header { padding-left: max(32px,calc((100vw - 1120px)/2)); padding-right: max(32px,calc((100vw - 1120px)/2)); } }
@media (max-width: 360px) { .brand { font-size: 12px; letter-spacing: .6px; gap: 6px; } .web-header { padding-left: 12px; padding-right: 12px; } .install-button { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.web-header { box-shadow: 0 8px 35px #02091844; }
.web-main { background: radial-gradient(ellipse at 20% 0%, #17376555, transparent 55%), #070d1a; }
.install-button { transition: transform .16s ease, background .16s ease; box-shadow: 0 4px 20px #247fff22; }
.install-button:active { transform: scale(.97); }
.brand img { width: 40px; height: 40px; }
input { transition: border-color .16s ease, box-shadow .16s ease; }
input:focus { outline: none; box-shadow: 0 0 0 3px #4b9fff18; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Final interface: clear hierarchy, tactile controls and motion preferences. */
[data-surface="hero"] { background: radial-gradient(ellipse at 95% 0%,#286cdc70,transparent 58%),linear-gradient(120deg,#10316a,#101f3b); box-shadow: 0 14px 44px #02081438; }
[data-surface="card"] { box-shadow: 0 7px 25px #02081426; }
[data-control] { transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
[data-control="button"][data-tone="primary"] { background-image: linear-gradient(120deg,#2563eb,#2459d4); box-shadow: 0 5px 16px #075bfa24; }
[data-control="button"][data-tone="danger"] { background: #30202c; }
[data-control="nav"][aria-selected="true"] { box-shadow: inset 0 0 0 1px #4679b45c,0 5px 20px #0002; }
[role="button"]:focus-visible,[role="tab"]:focus-visible { outline: 2px solid #8acaff; outline-offset: 3px; }
@media (hover:hover) {
 [data-control="metric"]:hover,[data-control="routine"]:hover { transform: translateY(-3px); border-color:#568cdf!important; box-shadow:0 12px 28px #02081455; }
 [data-control="nav"]:hover { background-color:#142b49; }
}
[role="progressbar"]>div { transition:width .4s ease; }
[role="dialog"] { animation: glow-enter .18s ease-out; }
@keyframes glow-enter { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion:reduce) { [data-control], [role="progressbar"]>div {transition:none!important;transform:none!important;} }

.brand-connections { padding: 10px 0 4px; color:#f0f6ff; }
.manual-feature { display:flex; align-items:center; flex-wrap:wrap; gap:24px; padding:28px; border:1px solid #3465a0; border-radius:24px; background:linear-gradient(120deg,#142d51,#0f1b30); }
.manual-copy { flex:1 1 280px; min-width:0; }
.manual-signature { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:1.2px; color:#91c4ff; }
.manual-signature img { border-radius:12px; }
.manual-signature small { display:block; margin-top:4px; font-size:12px; font-weight:500; letter-spacing:0; color:#b5c7df; }
.manual-copy h2 { margin:20px 0 10px; font-size:clamp(24px,3vw,30px); letter-spacing:-.7px; line-height:1.2; }
.manual-copy p { margin:0; max-width:460px; color:#b5c7df; font-size:16px; line-height:1.65; }
.manual-action { flex:1 1 260px; max-width:360px; display:flex; flex-direction:column; gap:10px; }
.manual-link { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; min-height:56px; border-radius:14px; text-decoration:none; color:#071427; background:#8cc5ff; font-size:16px; font-weight:750; line-height:1.45; box-shadow:0 6px 24px #165dd12b; transition:background .18s,transform .18s; }
.manual-link:hover { background:#b2d9ff; transform:translateY(-2px); }
.manual-link:active { transform:translateY(0); }
.external-note { color:#a6b8d3; font-size:12px; line-height:1.5; }
.social-heading { margin:26px 0 14px; }
.social-heading h3 { margin:0 0 5px; font-size:18px; font-weight:650; }
.social-heading p { margin:0; color:#a6b8d3; font-size:14px; line-height:1.6; }
.social-links { display:flex; flex-wrap:wrap; gap:10px; }
.social-links a { flex:1 1 180px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #294467; border-radius:15px; padding:16px; color:#8cc5ff; text-decoration:none; transition:border-color .18s,background .18s; }
.social-links a:hover { border-color:#74b5ff; background:#13263e; }
.social-links strong { display:block; color:#f0f6ff; font-size:15px; font-weight:650; }
.social-links small { display:block; margin-top:5px; color:#a6b8d3; font-size:13px; }
@media(max-width:480px) { .manual-feature { padding:22px; gap:20px; } .manual-action { max-width:none;flex-basis:100%; } .social-links a {flex-basis:100%;} }
@media(prefers-reduced-motion:reduce) { .manual-link:hover {transform:none;} }