/* Ekdesk shell: login, home tiles, vault. Tokens, buttons, inputs, dialog and toast come from ek.css. */
.center{display:grid;place-items:center;min-height:60vh}
.wrap{max-width:900px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.brand .logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:18px;cursor:default}
.brand .logo.hold{box-shadow:0 0 0 3px var(--vault)}
h2{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.sub{color:var(--muted);margin:0 0 14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tiles .tile{padding:14px;min-height:104px;position:relative}
.tile:hover{border-color:var(--accent)}
.tile .ic{font-size:22px;margin-bottom:8px}
.tile b{display:block;font-family:var(--display);font-size:15px}
.tile small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.tile.soon{opacity:.55;pointer-events:none}
.tile.soon::after{content:"soon";position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--panel2);padding:2px 7px;border-radius:999px}
.tile.vault{border-color:var(--vault)}
.login .card{padding:16px;max-width:380px;margin:0 auto}
.login label{margin-bottom:10px}
.login .btn[type=submit]{width:100%}
.err{color:var(--bad);font-size:13px;margin:0 0 10px;min-height:18px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login h1{text-align:center;margin-bottom:14px}

.now{display:grid;gap:10px;margin-bottom:14px}
.tile.wide{min-height:0;grid-column:1/-1}
.warn{color:var(--warn)}
.pw{position:relative;display:block}
.pw input{padding-right:44px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:6px 8px}
.reckey{font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.04em;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px;user-select:all;white-space:pre-wrap;word-break:break-all;margin:10px 0}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}

.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Home backdrop: accent glow top-left, vault gold bottom-right once the vault is open */
body.home{background:radial-gradient(60vw 50vh at 0 0,rgba(91,140,255,.06),transparent 70%),var(--bg)}
body.home.vault-open{background:radial-gradient(60vw 50vh at 0 0,rgba(91,140,255,.06),transparent 70%),radial-gradient(50vw 40vh at 100% 100%,rgba(246,196,84,.04),transparent 70%),var(--bg)}
.clock{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;margin-bottom:14px;text-shadow:0 0 18px rgba(91,140,255,.35)}
:root[data-theme="light"] .clock{text-shadow:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .clock{text-shadow:none}}

.feedgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:16px}
.feedcol{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.feedcol h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.fi{display:block;color:var(--fg);text-decoration:none;font-size:13px;line-height:1.35;padding:5px 0;border-top:1px solid var(--line)}
.fi:first-of-type{border-top:0}
.fi small{display:block;color:var(--muted);font-size:11px}
.fi:hover{color:var(--accent)}

.ticker.vault{border-color:var(--vault);margin-top:-8px}
.ticker.vault .tk{color:var(--vault)}
.ticker.vault .ticker-track{animation-duration:35s}