:root,body.app-mode{--bg:#f5f7fb;--app:#f5f7fb;--panel:#fff;--panel2:#edf2fa;--surface:#fff;--surface-2:#edf2fa;--surface-hover:#e5edfa;--side:#fff;--card:#fff;--card2:#edf2fa;--line:#d6deeb;--line2:#e4e9f2;--line-soft:#e4e9f2;--text:#192c47;--muted:#576a85;--muted2:#71829a;--muted-2:#71829a;--accent:#2f66f4;--accent-dark:#2454d2;--acid:#2f66f4;--orange:#2f66f4;--orange2:#4d80ff;--purple:#2f66f4;--turquoise:#78b9ff;--green:#158069;--red:#c93449}
html[data-theme="dark"],html[data-theme="dark"] body.app-mode{--bg:#24272d;--app:#24272d;--panel:#2e323a;--panel2:#373d47;--surface:#2e323a;--surface-2:#373d47;--surface-hover:#414956;--side:#2e323a;--card:#2e323a;--card2:#373d47;--line:#4b5360;--line2:#3d4551;--line-soft:#3d4551;--text:#eef3fc;--muted:#b7c3d6;--muted2:#99a9bf;--muted-2:#99a9bf;--accent:#729aff;--accent-dark:#5685ff;--acid:#729aff;--orange:#729aff;--orange2:#8aacff;--purple:#729aff;--green:#76d8b9;--red:#ff98a8}
html,body,body.app-mode{background:var(--bg)!important;color:var(--text);background-image:none!important}
body{padding-bottom:76px}
.theme-tools{position:fixed;right:18px;bottom:16px;display:flex;gap:3px;z-index:180;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 5px 24px #15294918}
.theme-tools button{font:600 13px/1.2 system-ui;cursor:pointer;min-height:34px;margin:0;padding:8px 11px;background:transparent;color:var(--muted);border:0;border-radius:8px;width:auto}
.theme-tools button[aria-pressed="true"]{background:var(--accent);color:#fff}
.theme-tools button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.landing-nav,.sidebar,.panel,.auth-card,.card,.login-card,.top,.message,.visual,.device-card,.stat,.step,.table-wrap,.box{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)}
.btn,button.secondary,.button.secondary,.chip,.tab-btn.active,.nav button.active{background:var(--panel2);border-color:var(--line);color:var(--text)}
.btn.primary,.btn.purple,button[type="submit"]:not(.secondary):not(.danger){background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.btn.primary:hover,button[type="submit"]:not(.secondary):not(.danger):hover{background:var(--accent-dark)!important;color:#fff!important}
input,textarea,select,.field input{background:var(--panel2)!important;color:var(--text)!important;border-color:var(--line)!important}
input:focus,textarea:focus,select:focus{border-color:var(--accent)!important}
h1,h2,h3,h4,.mail-subject,.mail-sender,.brandtext,.mail-row,.mail-row.unread{color:var(--text)!important}
.mail-row.unread,.flash,.notice,.auth-tabs,.auth-tab,.row,.empty-state{background:var(--panel2)!important;color:var(--text);border-color:var(--line)!important}
.mail-row:hover,tr:hover td{background:var(--surface-hover)!important}
.small,.mini,.muted,.mail-snippet,.mail-time{color:var(--muted)!important}
.grad{background:none!important;-webkit-text-fill-color:var(--accent)!important;color:var(--accent)!important}
.dot,.icon,.num{background:var(--panel2)!important;color:var(--accent)!important}
.logo{background:transparent url('/assets/brelock-logo.webp') center/contain no-repeat!important;box-shadow:none!important;border:0!important;transform:none!important}
.logo:before,.logo:after{display:none!important}
#authRegisterTab{display:none!important}
.landing-nav{top:12px;border-radius:18px;box-shadow:0 8px 30px #14274408}
.prelaunch{padding:18px 22px;margin-top:30px;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;gap:14px;align-items:center}
.prelaunch strong{display:block;margin-bottom:4px}.prelaunch p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}.launch-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hero{padding-top:76px;padding-bottom:72px;gap:50px;grid-template-columns:1.1fr .9fr}
.hero h1{font-size:clamp(42px,6.5vw,78px);letter-spacing:-.045em;line-height:1.06}.hero .lead{font-size:19px;max-width:580px}
.brand-art{min-height:350px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:32px;position:relative;overflow:hidden}
.brand-art:before{content:'';position:absolute;width:250px;height:250px;background:var(--accent);opacity:.09;border-radius:50%}
.brand-art img{width:230px;height:230px;object-fit:contain;position:relative;filter:drop-shadow(0 20px 22px #17387325)}
.landing section:not(.hero){padding-top:32px;padding-bottom:58px}.landing .card{border:1px solid var(--line);box-shadow:none}.landing .card h3{font-size:22px}.landing .card p{line-height:1.7}.landing .footer{line-height:1.9;padding-bottom:35px;color:var(--muted)}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:45px;gap:30px}.brand-art{min-height:260px}.brand-art img{width:180px;height:180px}.landing-links{display:none!important}.prelaunch{align-items:flex-start}.theme-tools{bottom:12px;right:12px}.grid3{grid-template-columns:1fr}.nav-actions .btn{padding:9px 13px}.hero .lead{font-size:17px}}

body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}
.landing h1,.landing h2,.landing .brand,.landing .eyebrow,.chip{text-transform:none!important}
.landing h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1.12}
.landing .btn{border-radius:12px}.landing .chip{border-radius:30px;font-size:13px;letter-spacing:0;font-weight:600}
.landing .brand{font-size:20px;letter-spacing:-.02em}.logo{width:40px!important;height:44px!important;display:inline-block!important;flex-shrink:0;background-image:url('/assets/brelock-logo.svg')!important}
.auth-tabs{grid-template-columns:1fr}.auth-tab.active{background:var(--accent)!important;color:#fff!important;box-shadow:none}
body.app-mode .theme-tools{position:absolute;bottom:auto;top:14px;right:24px}body.app-mode .panel{padding-top:68px}
@media(max-width:980px){.hero{display:grid!important;grid-template-columns:1fr!important}.brand-art{margin-top:5px}.hero h1{font-size:clamp(40px,8vw,68px)}}
@media(max-width:420px){.brand span:last-child{display:inline!important}.landing .brand{font-size:16px}.landing-nav{padding:10px 12px!important}.landing .logo{width:28px!important;height:34px!important}.nav-actions .btn{width:auto!important}.hero h1{font-size:40px}.theme-tools button{font-size:12px}}

/* Unified header controls and consistent landing geometry */
.theme-switching *, .theme-switching *::before,.theme-switching *::after{transition:none!important}
body{padding-bottom:0}
.theme-tools,body.app-mode .theme-tools{position:relative!important;inset:auto!important;display:block;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;z-index:90;flex-shrink:0}
.theme-tools summary{display:flex;align-items:center;justify-content:center;gap:7px;list-style:none;cursor:pointer;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--muted);font:600 13px system-ui}
.theme-tools summary::-webkit-details-marker{display:none}.theme-tools summary:hover{background:var(--panel2)}
.theme-tools summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.theme-current-icon{font-size:18px;line-height:1}.theme-caret{font-size:14px}
.theme-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:164px;border:1px solid var(--line);border-radius:13px;padding:5px;background:var(--panel);box-shadow:0 8px 28px #13253b24}
.theme-menu button{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:11px 13px;min-height:42px;text-align:left;border-radius:8px;color:var(--text);font:600 14px system-ui}
.theme-menu button:hover{background:var(--panel2)}.theme-menu button[aria-pressed="true"]{background:var(--panel2);color:var(--accent)}
.theme-menu button[aria-pressed="true"]:after{content:'✓';margin-left:auto}
.theme-bar{display:flex;justify-content:flex-end;max-width:1240px;padding:14px 24px;margin:auto}
.app-brand .theme-tools{margin-left:auto}.app-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.app-mode .panel{padding-top:42px}
.login-brand .theme-tools{margin-left:auto}.top>.theme-tools{margin-left:auto}
.landing{padding-top:0!important}
.landing .wrap,.landing section.wrap:nth-of-type(even){width:min(1180px,calc(100% - 48px))!important;max-width:1180px!important;margin-inline:auto}
.landing .landing-nav{position:sticky!important;top:16px!important;left:auto!important;width:min(1180px,calc(100% - 48px))!important;max-width:1180px!important;margin:16px auto 0!important;padding:14px 20px!important;transform:none!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 5px 22px #182b4608!important}
.landing .nav-actions{gap:10px}.landing .brand{gap:10px}.landing .landing-links{gap:24px}
.landing section,.landing section:nth-of-type(even){background:transparent!important;color:var(--text)!important;border:0!important;padding-left:0!important;padding-right:0!important}
.landing .hero{min-height:0!important;padding-top:68px!important;padding-bottom:64px!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:48px!important;align-items:center}
.landing .hero h1{font-size:clamp(42px,5.3vw,68px)!important;line-height:1.08!important;letter-spacing:-.045em!important;margin:0}
.landing .hero .eyebrow{margin-bottom:22px}.landing .hero .lead{margin-top:24px;line-height:1.65}
.landing .chips{gap:8px;border:0!important;margin-top:24px}.landing .chip{margin:0;padding:8px 12px;border:1px solid var(--line)!important;background:var(--panel)!important}
.landing .brand-art{min-height:330px;border-radius:24px}.landing .brand-art img{width:240px;height:240px}
.landing #features{padding-top:32px!important;padding-bottom:44px!important}
.landing .section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end;margin-bottom:28px}
.landing .section-head p{margin:0;max-width:440px;line-height:1.65}.landing .label{margin-bottom:12px}
.landing .section-head h2{margin:0;font-size:clamp(30px,3.4vw,44px)!important;letter-spacing:-.035em!important;line-height:1.15!important}
.landing .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px!important;border:0!important;align-items:stretch}
.landing .grid3 .card,.landing .grid3 .card:last-child{margin:0!important;padding:26px!important;border:1px solid var(--line)!important;border-radius:18px!important;min-height:0!important;background:var(--panel)!important;display:flex;flex-direction:column;align-items:flex-start}
.landing .card .icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:var(--panel2)!important;border-radius:12px;margin:0 0 24px!important;font-size:22px;color:var(--accent)!important}
.landing .card h3{margin:0 0 12px;font-size:21px;letter-spacing:-.02em}
.landing .card p{margin:0!important;color:var(--muted)!important;line-height:1.7;font-size:15px}
.landing #about{padding-top:0!important;padding-bottom:30px!important}.landing #about .prelaunch{margin-top:0}
.landing .footer{padding-top:16px;padding-bottom:34px}
.landing .prelaunch{margin-top:28px;padding:20px 22px;border-radius:16px}.landing .prelaunch a{color:var(--accent)}
@media(max-width:900px){.landing .hero{grid-template-columns:minmax(0,1fr)!important;gap:30px!important;padding-top:42px!important}.landing .brand-art{min-height:240px}.landing .brand-art img{width:185px;height:185px}.landing .section-head{grid-template-columns:1fr;gap:18px}.landing .grid3{grid-template-columns:1fr}.landing .landing-links{display:none!important}}
@media(max-width:540px){.landing .wrap,.landing section.wrap:nth-of-type(even),.landing .landing-nav{width:calc(100% - 28px)!important}.landing .landing-nav{top:8px!important;margin-top:8px!important;padding:10px 12px!important;gap:8px}.landing .brand{font-size:15px;gap:7px}.landing .logo{width:25px!important;height:32px!important}.landing .nav-actions{gap:6px}.landing .nav-actions .btn{min-height:40px;padding:8px 11px;font-size:13px}.theme-tools summary{height:40px;padding:0 10px}.theme-label,.theme-caret{display:none}.landing .prelaunch{padding:16px}.landing .hero h1{font-size:42px!important}.landing .hero .lead{font-size:16px}.landing .grid3 .card{padding:22px!important}.landing .card .icon{margin-bottom:18px!important}body.app-mode .panel{padding-top:22px}}

/* Animated sun/moon theme switch */
.theme-tools .theme-toggle{position:relative;display:block;width:66px;height:36px;min-height:36px;margin:0;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--panel2);cursor:pointer;box-shadow:inset 0 1px 3px #17263d0d;color:var(--accent)}
.theme-tools .theme-toggle:hover{border-color:var(--accent);background:var(--panel2)}
.theme-tools .theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.theme-knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--panel);box-shadow:0 2px 5px #14274420;display:grid;place-items:center;transform:translateX(0);transition:transform .42s cubic-bezier(.22,.8,.3,1),background-color .42s ease!important}
.theme-knob svg{position:absolute;width:19px;height:19px;transition:opacity .3s ease,transform .42s ease!important}
.theme-sun{opacity:1;transform:rotate(0deg) scale(1)}.theme-moon{opacity:0;transform:rotate(-70deg) scale(.5)}
.theme-toggle[aria-checked="true"] .theme-knob{transform:translateX(30px)}
.theme-toggle[aria-checked="true"] .theme-sun{opacity:0;transform:rotate(80deg) scale(.5)}
.theme-toggle[aria-checked="true"] .theme-moon{opacity:1;transform:rotate(0deg) scale(1)}
html.theme-ready,html.theme-ready body,html.theme-ready body :where(*:not(.theme-knob):not(.theme-sun):not(.theme-moon)){transition:background-color .42s ease,color .42s ease,border-color .42s ease,box-shadow .42s ease,fill .42s ease,stroke .42s ease!important}
@media(prefers-reduced-motion:reduce){html.theme-ready,html.theme-ready body,html.theme-ready body *, .theme-knob,.theme-knob svg{transition:none!important}}
@media(max-width:540px){.theme-tools .theme-toggle{width:58px;height:34px;min-height:34px}.theme-knob{width:26px;height:26px}.theme-toggle[aria-checked="true"] .theme-knob{transform:translateX(24px)}}

/* Avoid chained inherited text transitions; keep a short single transition. */
html.theme-ready,html.theme-ready body,html.theme-ready body :where(*:not(.theme-knob):not(.theme-sun):not(.theme-moon)){transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important}
html.theme-ready body .brand,html.theme-ready body .prelaunch strong,html.theme-ready body h1,html.theme-ready body h2,html.theme-ready body h3,html.theme-ready body p,html.theme-ready body .eyebrow,html.theme-ready body .label,html.theme-ready body .chip,html.theme-ready body .landing-links a,html.theme-ready body .footer{transition:background-color .16s ease,border-color .16s ease,color .14s ease!important}
.theme-knob{transition:transform .22s cubic-bezier(.22,.8,.3,1),background-color .16s ease!important}
.theme-knob svg{transition:opacity .16s ease,transform .22s ease!important}
@media(prefers-reduced-motion:reduce){html.theme-ready,html.theme-ready body,html.theme-ready body *, .theme-knob,.theme-knob svg{transition:none!important}}

/* Paint droplets merge into a full-page theme reveal. */
@property --paint-spread{syntax:"<length>";inherits:false;initial-value:0px}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){mix-blend-mode:normal;animation:brelock-paint .68s cubic-bezier(.3,.05,.2,1) both;mask-image:radial-gradient(circle var(--paint-spread) at var(--paint-x) var(--paint-y),#000 98%,transparent 100%),radial-gradient(circle max(0px,calc(var(--paint-spread) * .72 - 4px)) at calc(var(--paint-x) - 64px) calc(var(--paint-y) + 48px),#000 98%,transparent 100%),radial-gradient(circle max(0px,calc(var(--paint-spread) * .56 - 3px)) at calc(var(--paint-x) - 120px) calc(var(--paint-y) - 32px),#000 98%,transparent 100%),radial-gradient(circle max(0px,calc(var(--paint-spread) * .64 - 6px)) at calc(var(--paint-x) + 44px) calc(var(--paint-y) + 106px),#000 98%,transparent 100%);mask-repeat:no-repeat}
@keyframes brelock-paint{0%{--paint-spread:0px}18%{--paint-spread:22px}100%{--paint-spread:var(--paint-radius)}}
html.paint-reveal .theme-knob,html.paint-reveal .theme-knob svg{transition:none!important}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important;mask-image:none!important}}

/* Liquid theme fill: a gently waving surface rises from the bottom. */
::view-transition-new(root){mask-image:none!important;animation:brelock-liquid .72s cubic-bezier(.3,.05,.2,1) both;clip-path:polygon(0% 103%,8% 104%,16% 103%,25% 104%,34% 103%,43% 104%,52% 103%,61% 104%,70% 103%,79% 104%,88% 103%,100% 104%,100% 110%,0% 110%)}
@keyframes brelock-liquid{
0%{clip-path:polygon(0% 103%,8% 104%,16% 103%,25% 104%,34% 103%,43% 104%,52% 103%,61% 104%,70% 103%,79% 104%,88% 103%,100% 104%,100% 110%,0% 110%)}
25%{clip-path:polygon(0% 83%,8% 81%,16% 80%,25% 81%,34% 83%,43% 84%,52% 83%,61% 81%,70% 80%,79% 81%,88% 83%,100% 84%,100% 110%,0% 110%)}
60%{clip-path:polygon(0% 39%,8% 41%,16% 42%,25% 41%,34% 39%,43% 38%,52% 39%,61% 41%,70% 42%,79% 41%,88% 39%,100% 38%,100% 110%,0% 110%)}
100%{clip-path:polygon(0% -5%,8% -4%,16% -3%,25% -4%,34% -5%,43% -6%,52% -5%,61% -4%,70% -3%,79% -4%,88% -5%,100% -6%,100% 110%,0% 110%)}
}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none!important;clip-path:none!important}}

/* Smooth curved surface with alternating liquid swell. */
::view-transition-new(root){animation-duration:.96s;animation-timing-function:cubic-bezier(.4,.08,.25,1)}
@supports(clip-path:shape(from 0% 50%, curve to 50% 50% with 16% 43% / 34% 57%, curve to 100% 50% with 66% 43% / 84% 57%, line to 100% 115%, line to 0% 115%, close)){
::view-transition-new(root){animation-name:brelock-liquid-smooth;clip-path:shape(from 0% 106%, curve to 50% 106% with 16% 106% / 34% 106%, curve to 100% 106% with 66% 106% / 84% 106%, line to 100% 115%, line to 0% 115%, close)}
@keyframes brelock-liquid-smooth{
0%{clip-path:shape(from 0% 106%, curve to 50% 106% with 16% 106% / 34% 106%, curve to 100% 106% with 66% 106% / 84% 106%, line to 100% 115%, line to 0% 115%, close)}
22%{clip-path:shape(from 0% 88%, curve to 50% 88% with 16% 79% / 34% 97%, curve to 100% 88% with 66% 79% / 84% 97%, line to 100% 115%, line to 0% 115%, close)}
48%{clip-path:shape(from 0% 56%, curve to 50% 56% with 16% 65% / 34% 47%, curve to 100% 56% with 66% 65% / 84% 47%, line to 100% 115%, line to 0% 115%, close)}
73%{clip-path:shape(from 0% 23%, curve to 50% 23% with 16% 16% / 34% 30%, curve to 100% 23% with 66% 16% / 84% 30%, line to 100% 115%, line to 0% 115%, close)}
100%{clip-path:shape(from 0% -9%, curve to 50% -9% with 16% -9% / 34% -9%, curve to 100% -9% with 66% -9% / 84% -9%, line to 100% 115%, line to 0% 115%, close)}
}}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none!important;clip-path:none!important}}

/* One continuous interpolation: no intermediate easing restarts. */
::view-transition-new(root){animation-timing-function:linear!important}
@supports(clip-path:shape(from 0% 50%, curve to 50% 50% with 16% 43% / 34% 57%, curve to 100% 50% with 66% 43% / 84% 57%, line to 100% 115%, line to 0% 115%, close)){
::view-transition-new(root){animation:brelock-liquid-continuous .9s linear both!important}
@keyframes brelock-liquid-continuous{from{clip-path:shape(from 0% 106%, curve to 50% 106% with 16% 97% / 34% 115%, curve to 100% 106% with 66% 97% / 84% 115%, line to 100% 115%, line to 0% 115%, close)}to{clip-path:shape(from 0% -10%, curve to 50% -10% with 16% -1% / 34% -19%, curve to 100% -10% with 66% -1% / 84% -19%, line to 100% 115%, line to 0% 115%, close)}}
}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none!important;clip-path:none!important}}