/* ===== Shaft UI · marca Shaft Digital ===== */
:root{
  --accent-rgb: 177 18 27; --accent-deep-rgb: 148 23 27; --accent-lite-rgb: 223 39 41;
  --spark-rgb: 239 213 157; --ink-rgb: 36 22 20; --bg: #FAF5EB;
  --blob-1:#F6D6D2; --blob-2:#F3ECDF; --blob-3:#F6E4BD;
}
/* ===== Núcleo CSS ===== */
:root{color-scheme:light;
  --accent:rgb(var(--accent-rgb));--accent-deep:rgb(var(--accent-deep-rgb));--accent-lite:rgb(var(--accent-lite-rgb));
  --ink:rgb(var(--ink-rgb));--muted:rgb(var(--ink-rgb) / .66);--line:rgb(var(--ink-rgb) / .10);
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-xl:30px;--r-lg:24px;--r-md:18px;--r-sm:12px;
  --grad:linear-gradient(160deg,var(--accent-lite) 0%,var(--accent) 52%,var(--accent-deep) 100%);
  --ring:inset 0 0 0 1px rgba(255,255,255,.95);
  --depth:0 1px 1px rgb(var(--ink-rgb) / .05),0 6px 16px -6px rgb(var(--ink-rgb) / .14),0 22px 44px -22px rgb(var(--accent-rgb) / .32);
  --lift:0 4px 10px -4px rgb(var(--ink-rgb) / .18);
  --glow:0 8px 18px -8px rgb(var(--accent-rgb) / .85);
  --ease:cubic-bezier(.2,.8,.2,1);}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 96px;min-height:100vh}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(30px,5vw,42px);line-height:1.05;font-weight:800}
h2{font-size:clamp(22px,3.4vw,28px);line-height:1.12;font-weight:800}
h3{font-size:16px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
p{margin:0}.lead{font-size:17px;color:var(--muted)}.muted{color:var(--muted)}
button{font-family:var(--font)}
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.mesh i:nth-child(1){width:520px;height:520px;background:var(--blob-1);top:-160px;right:-120px;animation:float 16s ease-in-out infinite alternate}
.mesh i:nth-child(2){width:460px;height:460px;background:var(--blob-2);top:40%;left:-200px;animation:float 20s ease-in-out infinite alternate-reverse}
.mesh i:nth-child(3){width:300px;height:300px;background:var(--blob-3);bottom:-80px;right:10%;opacity:.45;animation:float 18s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(-50px,60px) scale(1.12)}}
.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.stack{display:flex;flex-direction:column;gap:12px}
.sec{display:flex;flex-direction:column;gap:14px}
.glass{position:relative;border-radius:var(--r-lg);isolation:isolate;padding:24px;
  background:linear-gradient(165deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.62) 55%,rgba(255,255,255,.48) 100%);
  border:1px solid rgb(var(--accent-rgb) / .16);
  box-shadow:var(--ring),inset 0 1px 0 #fff,inset 0 -10px 24px -18px rgb(var(--accent-rgb) / .35),var(--depth);
  backdrop-filter:saturate(1.6) blur(8px);-webkit-backdrop-filter:saturate(1.6) blur(8px)}
.glass::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 38%)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgb(var(--accent-lite-rgb) / .12),transparent 60%)}
.glass:hover::after{opacity:1}
.glass.filled{color:#fff;background:var(--grad);border-color:rgb(var(--accent-deep-rgb) / .5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.6),0 30px 60px -30px rgb(var(--accent-rgb) / .9),var(--depth)}
.glass.filled::before{background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 40%)}
.glass.filled .muted{color:inherit;opacity:.8}
.well{border-radius:16px;padding:8px;background:rgb(var(--accent-rgb) / .05);border:1px solid rgb(var(--accent-rgb) / .08);box-shadow:inset 0 1px 2px rgb(var(--ink-rgb) / .05)}
.icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;color:#fff;position:relative;background:var(--grad);
  border:1px solid rgb(var(--accent-deep-rgb) / .35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.6),var(--glow)}
.icon::before{content:"";position:absolute;inset:2px 2px 50% 2px;border-radius:13px 13px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.icon svg{width:24px;height:24px;stroke-width:2.1;position:relative}
.icon.sm{width:42px;height:42px;border-radius:12px}.icon.sm svg{width:20px;height:20px}
.icon.xs{width:30px;height:30px;border-radius:9px}.icon.xs svg{width:16px;height:16px}
.icon.soft{color:var(--accent);background:linear-gradient(180deg,#fff,rgb(var(--accent-rgb) / .08));border-color:rgb(var(--accent-rgb) / .2);box-shadow:var(--ring),var(--lift)}
.chip,.tag,.eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;
  background:linear-gradient(180deg,#fff,rgb(var(--accent-rgb) / .07));border:1px solid rgb(var(--accent-rgb) / .22);
  box-shadow:var(--ring),inset 0 -2px 4px rgb(var(--accent-rgb) / .08),var(--lift)}
.chip{padding:9px 16px;font-size:14px;color:var(--ink);cursor:pointer}.chip svg{width:16px;height:16px;color:var(--accent)}
.tag{padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--accent-deep);white-space:nowrap}
.tag.hot{color:#fff;background:var(--grad);border-color:rgb(var(--accent-deep-rgb) / .5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--glow)}
.tag.plain{color:var(--muted);border-color:var(--line)}
.eyebrow{align-self:flex-start;padding:6px 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .15)}
.chip.solid{color:#fff;background:var(--grad);border-color:rgb(var(--accent-deep-rgb) / .5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.5),var(--glow)}
.chip.solid svg{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:700 15px var(--font);cursor:pointer;
  color:#fff;background:var(--grad);border:1px solid rgb(var(--accent-deep-rgb) / .5);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.55),var(--glow);transition:transform .2s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn.ghost{color:var(--ink);background:linear-gradient(180deg,#fff,rgb(var(--accent-rgb) / .06));border-color:rgb(var(--accent-rgb) / .22);box-shadow:var(--ring),var(--lift)}
.btn.sm{min-height:38px;padding:0 15px;font-size:14px}
.btn.icon-only{width:42px;min-height:42px;padding:0}
.btn.white{color:var(--accent-deep);background:linear-gradient(180deg,#fff,#fbeeee);border-color:rgba(255,255,255,.9);box-shadow:var(--ring),0 10px 24px -10px rgba(0,0,0,.4)}
.btn.glassy{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.input{min-height:50px;padding:0 16px;border-radius:var(--r-md);font:500 16px var(--font);color:var(--ink);outline:none;width:100%;
  background:linear-gradient(180deg,rgb(var(--accent-rgb) / .04),#fff);border:1px solid var(--line);
  box-shadow:var(--ring),inset 0 2px 4px rgb(var(--ink-rgb) / .06);transition:border-color .2s,box-shadow .2s}
textarea.input{padding:14px 16px;min-height:96px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:linear-gradient(180deg,rgb(var(--accent-rgb) / .04),#fff)}
.input:focus{border-color:var(--accent);box-shadow:var(--ring),0 0 0 4px rgb(var(--accent-rgb) / .15)}
.toggle{appearance:none;width:52px;height:32px;border-radius:999px;position:relative;cursor:pointer;background:rgb(var(--ink-rgb) / .12);flex:none;margin:0;
  box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .15);transition:background .25s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgb(var(--ink-rgb) / .25);transition:transform .3s var(--ease)}
.toggle:checked{background:var(--grad)}.toggle:checked::after{transform:translateX(20px)}
.segmented{display:inline-flex;padding:4px;border-radius:999px;background:rgb(var(--accent-rgb) / .07);box-shadow:inset 0 1px 3px rgb(var(--ink-rgb) / .08);max-width:100%;overflow-x:auto;scrollbar-width:none}
.segmented button{border:0;background:none;font:700 14px var(--font);color:var(--muted);padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.segmented button[aria-pressed="true"]{color:var(--ink);background:#fff;box-shadow:var(--ring),var(--lift)}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px}
.row + .row{border-top:1px solid var(--line)}
.row .grow{flex:1;min-width:0}
.kv dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.amount{font-size:clamp(40px,8vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.navbar{position:sticky;top:max(10px,env(safe-area-inset-top,0px));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:999px}
.toast{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;font-size:13.5px;font-weight:600;background:#fff;border:1px solid var(--line);box-shadow:var(--ring),0 6px 14px -8px rgb(var(--ink-rgb) / .25)}
.sheet{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow-y:auto;
  transform:translate(-50%,calc(100% + 40px));transition:transform .5s var(--ease);z-index:40;border-radius:var(--r-xl)}
.sheet.open{transform:translate(-50%,0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ===== Motion ===== */
.rv{transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease);transition-delay:var(--d,0s)}
.rv.out{opacity:0;transform:translateY(28px) scale(.97);filter:blur(6px)}
.rv.out.up{transform:translateY(-28px) scale(.97)}
.enter{animation:enter .6s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes enter{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv.out{opacity:1;transform:none;filter:none}}

/* ===== App ===== */
[hidden]{display:none!important}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap;cursor:pointer}
.brand .dot{width:10px;height:10px;border-radius:50%;background:rgb(var(--spark-rgb));box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .18),0 0 0 1px rgb(var(--accent-rgb)) inset}
.nav-actions{display:flex;gap:6px;align-items:center}
.kbd{font:700 11px var(--font);color:var(--muted);padding:1px 6px;border-radius:6px;border:1px solid var(--line);background:#fff}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
.tabbar{display:none}
@media (max-width:760px){
  .navbar .segmented,.navbar .hide-sm{display:none}
  .tabbar{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:25;padding:6px;border-radius:999px;width:min(420px,calc(100% - 24px));justify-content:space-between}
  .tabbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font:700 11px var(--font);color:var(--muted);padding:7px 0;border-radius:999px;position:relative}
  .tabbar button svg{width:20px;height:20px}
  .tabbar button[aria-pressed="true"]{color:var(--accent);background:#fff;box-shadow:var(--ring),var(--lift)}
  .tabbar .badge{position:absolute;top:2px;right:calc(50% - 22px)}
}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);font-weight:600;font-size:15px;margin-top:6px}
.list{padding:6px}
.list .row{border-radius:16px;transition:background .2s}
.list .row.clickable{cursor:pointer}
.list .row.clickable:hover{background:rgb(var(--accent-rgb) / .04)}
.list .row + .row{border-top:1px solid var(--line)}
.sec-title{display:flex;align-items:center;gap:10px;padding:0 6px}
.sec-title h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.sec-title .count{font-size:13px;font-weight:700;color:var(--muted)}
.t-title{font-weight:700;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.t-meta{font-size:13px;color:var(--muted);font-weight:600;display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;align-items:center}
.t-meta svg{width:13px;height:13px;vertical-align:-2px}
.done .t-title{text-decoration:line-through;color:var(--muted)}
.check{width:26px;height:26px;border-radius:50%;flex:none;cursor:pointer;display:grid;place-items:center;color:transparent;padding:0;
  background:linear-gradient(180deg,#fff,rgb(var(--accent-rgb) / .06));border:1.5px solid rgb(var(--accent-rgb) / .4);box-shadow:var(--ring),var(--lift);transition:transform .2s var(--ease)}
.check svg{width:15px;height:15px;stroke-width:3}
.check:hover{transform:scale(1.08);color:rgb(var(--accent-rgb) / .5)}
.check.on{background:var(--grad);border-color:var(--accent-deep);color:#fff;box-shadow:var(--glow)}
.check.pop{animation:pop .45s var(--ease)}
@keyframes pop{40%{transform:scale(1.3)}}
.row.leaving{animation:leave .5s var(--ease) forwards}
@keyframes leave{to{opacity:0;transform:translateX(24px);filter:blur(3px)}}
.prio{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .15);flex:none}
.capture{display:flex;gap:8px;align-items:center;padding:8px;border-radius:999px}
.capture input{flex:1;border:0;background:transparent;font:600 16px var(--font);color:var(--ink);outline:none;padding:0 10px;min-width:0;min-height:42px}
.capture input::placeholder{color:rgb(var(--ink-rgb) / .42)}
.empty{text-align:center;padding:38px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .icon{margin-bottom:4px}
.more{border:0;background:none;color:var(--accent-deep);font:700 14px var(--font);cursor:pointer;padding:10px 16px;display:flex;align-items:center;gap:6px}
.more svg{width:16px;height:16px}
.progress{height:6px;border-radius:6px;background:rgb(var(--accent-rgb) / .1);overflow:hidden;box-shadow:inset 0 1px 2px rgb(var(--ink-rgb) / .08)}
.progress i{display:block;height:100%;background:var(--grad);border-radius:6px}
.idea-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:560px){.idea-grid{grid-template-columns:1fr}}
.idea{padding:18px;cursor:pointer;transition:transform .25s var(--ease)}
.idea:hover{transform:translateY(-3px)}
.idea p{color:var(--muted);font-size:14px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.backdrop{position:fixed;inset:0;z-index:35;background:rgb(var(--ink-rgb) / .18);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.form{display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title-input{border:0;background:transparent;font:800 22px var(--font);letter-spacing:-.02em;color:var(--ink);outline:none;width:100%;padding:0}
.files{display:flex;flex-direction:column;gap:6px}
.file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.file svg{width:16px;height:16px;color:var(--accent)}
.file img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.secret{display:flex;gap:8px;align-items:center}
.secret code{flex:1;font:600 14px ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 14px;border-radius:14px;background:rgb(var(--accent-rgb) / .05);border:1px solid var(--line)}

/* Paleta ⌘K */
.palette{position:fixed;left:50%;top:12vh;width:min(620px,calc(100% - 32px));transform:translate(-50%,-12px) scale(.98);opacity:0;pointer-events:none;z-index:45;
  transition:all .3s var(--ease);padding:10px;border-radius:var(--r-lg)}
.palette.open{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.palette .search{display:flex;align-items:center;gap:10px;padding:6px 10px}
.palette .search svg{width:20px;height:20px;color:var(--accent)}
.palette .search input{flex:1;border:0;background:transparent;font:600 18px var(--font);color:var(--ink);outline:none;min-height:44px}
.palette .results{max-height:52vh;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.pitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer}
.pitem.sel{background:#fff;box-shadow:var(--ring),var(--lift)}
.pitem .grow{flex:1;min-width:0}
.pitem .t-title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phint{display:flex;gap:14px;justify-content:flex-end;padding:8px 10px 2px;font-size:12px;color:var(--muted);font-weight:600}

/* IA */
.mic{width:84px;height:84px;border-radius:50%;margin:6px auto;display:grid;place-items:center;cursor:pointer;color:#fff;border:1px solid rgb(var(--accent-deep-rgb) / .5);
  background:var(--grad);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.55),var(--glow);transition:transform .2s var(--ease)}
.mic svg{width:34px;height:34px}
.mic:active{transform:scale(.95)}
.mic.rec{animation:recpulse 1.3s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .45),var(--glow)}50%{box-shadow:0 0 0 18px rgb(var(--accent-rgb) / 0),var(--glow)}}
.ai-reply{white-space:pre-wrap;font-size:15px;line-height:1.55;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--ring)}
.ai-opts{display:flex;flex-wrap:wrap;gap:8px}
.dots span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--accent);animation:dot 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}

/* Alarme */
.alarm{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;color:#fff;
  background:radial-gradient(circle at 50% 30%,var(--accent-lite),var(--accent) 45%,var(--accent-deep) 100%)}
.alarm::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.22),transparent 55%);animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.2}}
.alarm .box{position:relative;text-align:center;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:18px}
.alarm .bell{width:110px;height:110px;border-radius:32px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 30px 60px -20px rgba(0,0,0,.4);animation:ring .9s ease-in-out infinite}
.alarm .bell svg{width:56px;height:56px}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}}
.alarm h1{font-size:clamp(34px,6vw,58px);color:#fff}
.alarm .when{font-size:18px;font-weight:700;opacity:.9}
.alarm .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.alarm .btn{min-height:56px;font-size:17px;padding:0 26px}
.alarm .others{font-size:14px;font-weight:700;opacity:.85}
.sound-off{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.45}}

/* Login */
.login{min-height:calc(100dvh - 120px);display:grid;place-items:center}
.login .glass{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 26px;text-align:center}
.pin-dots{display:flex;gap:12px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgb(var(--accent-rgb) / .4);background:#fff;transition:all .2s var(--ease)}
.pin-dots i.on{background:var(--grad);border-color:var(--accent-deep);transform:scale(1.1);box-shadow:var(--glow)}
.pin-dots.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.key{height:72px;border-radius:50%;font:700 24px var(--font);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,rgb(var(--accent-rgb) / .06));border:1px solid rgb(var(--accent-rgb) / .18);box-shadow:var(--ring),var(--lift);transition:transform .15s}
.key:active{transform:scale(.92);background:rgb(var(--accent-rgb) / .12)}
.key.blank{visibility:hidden}
.key svg{width:24px;height:24px}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:max(90px,calc(env(safe-area-inset-bottom,0px) + 90px));z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#toasts .toast{animation:enter .4s var(--ease) both}
#toasts .toast svg{width:18px;height:18px;color:var(--accent)}
.qr{width:240px;height:240px;border-radius:18px;background:#fff;padding:10px;border:1px solid var(--line);margin:0 auto}
.sheet.glass,.palette.glass{background:linear-gradient(165deg,rgba(255,255,255,.97) 0%,rgba(255,252,248,.94) 100%)}