:root{--background:#f5f7fb;--surface:#fff;--surface-soft:#f8fafc;--ink:#152033;--muted:#66728a;--line:#dde3ed;--primary:#3769e8;--primary-dark:#254fc0;--success:#26865d;--danger:#c13f51;--warning:#b67917;--shadow:0 18px 48px #20305314}*{box-sizing:border-box}html{background:var(--background);min-width:320px}body{color:var(--ink);background:var(--background);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.eyebrow{color:var(--primary);letter-spacing:.105em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:800}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-page{background:#10192b;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);min-height:100vh;display:grid}.login-story{color:#fff;background:radial-gradient(circle at 12% 12%,#4f7eff61,#0000 32%),radial-gradient(circle at 78% 75%,#27b18e33,#0000 35%),#10192b;flex-direction:column;justify-content:center;min-width:0;padding:clamp(50px,8vw,120px);display:flex;position:relative;overflow:hidden}.login-story:after{content:"";border:1px solid #ffffff14;border-radius:50%;width:480px;height:480px;position:absolute;inset:10% -25% auto auto;box-shadow:0 0 0 70px #ffffff05,0 0 0 140px #ffffff05}.brand-mark{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:18px;place-items:center;width:60px;height:60px;margin-bottom:34px;display:grid;position:relative}.brand-mark svg{width:29px;height:29px}.login-story .eyebrow{z-index:1;color:#9db7ff;position:relative}.login-story h1{z-index:1;letter-spacing:-.06em;max-width:780px;margin:14px 0 22px;font-size:clamp(2.6rem,5.5vw,5.6rem);line-height:.98;position:relative}.login-summary{z-index:1;color:#b7c2d7;max-width:650px;margin:0;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.75;position:relative}.login-capabilities{z-index:1;flex-wrap:wrap;gap:12px;margin-top:44px;display:flex;position:relative}.login-capabilities span{color:#dce5f7;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:11px 14px;font-size:.79rem;display:inline-flex}.login-capabilities svg{width:16px}.login-card-wrap{background:var(--background);place-items:center;padding:36px;display:grid}.login-card{border:1px solid var(--line);background:var(--surface);width:min(100%,460px);box-shadow:var(--shadow);border-radius:25px;padding:clamp(28px,4vw,48px)}.login-icon{width:48px;height:48px;color:var(--primary);background:#edf2ff;border-radius:15px;place-items:center;margin-bottom:24px;display:grid}.login-icon svg{width:21px}.login-card h2{letter-spacing:-.03em;margin:8px 0;font-size:1.65rem}.login-card>p:not(.eyebrow){color:var(--muted);margin:0 0 26px;font-size:.86rem;line-height:1.65}.login-card label{gap:7px;margin-top:17px;display:grid}.login-card label span{color:#3d4960;font-size:.75rem;font-weight:750}.login-card input{width:100%;min-height:48px;color:var(--ink);border:1px solid var(--line);background:var(--surface-soft);border-radius:11px;outline:0;padding:0 14px;transition:border-color .15s,box-shadow .15s}.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #3769e81f}.login-card button{color:#fff;background:var(--primary);cursor:pointer;border:0;border-radius:11px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:49px;margin-top:24px;font-weight:780;display:flex}.login-card button:hover:not(:disabled){background:var(--primary-dark)}.login-card button:disabled{opacity:.55;cursor:not-allowed}.login-card button svg{width:18px}.app-shell{min-height:100vh}.topbar{color:#fff;background:#111b2f;justify-content:space-between;align-items:center;gap:20px;height:74px;padding:0 clamp(20px,5vw,72px);display:flex}.brand{align-items:center;gap:12px;display:flex}.brand>span{background:linear-gradient(145deg,#4c7cff,#315bc7);border-radius:12px;place-items:center;width:39px;height:39px;display:grid;box-shadow:0 8px 25px #295adc59}.brand svg{width:20px}.brand div{gap:2px;display:grid}.brand strong{font-size:.88rem}.brand small{color:#94a4c2;font-size:.66rem}.topbar-actions{align-items:center;gap:15px;display:flex}.signed-in{color:#aab7cf;font-size:.72rem}.signed-in strong{color:#fff}.icon-button{color:#dbe3f1;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:7px;min-height:38px;padding:0 12px;display:inline-flex}.icon-button:hover{background:#ffffff1a}.icon-button svg{width:16px}.icon-button span{font-size:.72rem;font-weight:700}.content{flex-direction:column;gap:20px;width:min(1480px,100% - 40px);margin:0 auto;padding:clamp(32px,5vw,68px) 0 80px;display:flex}.hero{justify-content:space-between;align-items:flex-end;gap:32px;padding:8px 0 18px;display:flex}.hero h1{letter-spacing:-.055em;max-width:880px;margin:9px 0 12px;font-size:clamp(2rem,4vw,4rem);line-height:1.02}.hero>div>p:last-child{max-width:760px;color:var(--muted);margin:0;line-height:1.65}.hero-actions{flex-shrink:0;gap:10px;display:flex}.button{cursor:pointer;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:0 15px;font-size:.76rem;font-weight:760;text-decoration:none;display:inline-flex}.button svg{width:16px;height:16px}.button.primary{color:#fff;background:var(--primary);box-shadow:0 8px 20px #3769e82e}.button.primary:hover:not(:disabled){background:var(--primary-dark)}.button.secondary{color:#39475e;border-color:var(--line);background:var(--surface)}.button.secondary:hover:not(:disabled){background:var(--surface-soft);border-color:#bac5d5}.button:disabled{opacity:.5;cursor:not-allowed}.button.compact{min-height:34px;padding:0 11px;font-size:.69rem}.setup-banner{background:#fff9ec;border:1px solid #eed39f;border-radius:17px;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:15px;padding:19px 21px;display:grid}.setup-banner>span{width:48px;height:48px;color:var(--warning);background:#ffefc9;border-radius:14px;place-items:center;display:grid}.setup-banner svg{width:22px}.setup-banner strong{font-size:.88rem;display:block}.setup-banner p{color:#796848;margin:5px 0 0;font-size:.77rem;line-height:1.5}.alert{border:1px solid;border-radius:11px;align-items:center;gap:9px;padding:12px 14px;font-size:.77rem;font-weight:650;line-height:1.45;display:flex}.alert svg{flex-shrink:0;width:17px}.alert.danger{color:#a52f40;background:#fff1f3;border-color:#f0bdc4}.alert.success{color:#267251;background:#eefaf4;border-color:#afe0ca}.alert.warning{color:#876015;background:#fff8e7;border-color:#edd19b;margin:18px 0}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.metric-card{border:1px solid var(--line);background:var(--surface);border-radius:17px;grid-template-rows:auto 1fr;grid-template-columns:45px minmax(0,1fr);column-gap:12px;min-width:0;min-height:160px;padding:19px;display:grid;box-shadow:0 8px 28px #2a38570b}.metric-card>div{align-self:center;gap:4px;min-width:0;display:grid}.metric-card small{color:var(--muted);letter-spacing:.045em;text-transform:uppercase;font-size:.65rem;font-weight:780}.metric-card strong{overflow-wrap:anywhere;font-size:.97rem;line-height:1.35}.metric-card>p{color:var(--muted);overflow-wrap:anywhere;grid-column:1/-1;align-self:end;margin:18px 0 0;font-size:.71rem;line-height:1.45}.metric-icon{border-radius:14px;place-items:center;width:45px;height:45px;display:grid}.metric-icon svg{width:20px}.metric-icon.neutral{color:#65718a;background:#edf0f5}.metric-icon.success{color:#247b57;background:#e8f6ef}.metric-icon.danger{color:#bd3e4f;background:#fdecef}.metric-icon.working{color:#ab7114;background:#fff4dd}.metric-icon.cloud{color:#3977b6;background:#eaf3fc}.metric-icon.database{color:#7951a9;background:#f2ecfb}.metric-icon.disk{color:#b15440;background:#fbeeea}.panel{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:23px;box-shadow:0 8px 28px #2a38570a}.panel-heading{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:19px;display:flex}.panel-heading h2{letter-spacing:-.025em;margin:4px 0 0;font-size:1.17rem}.panel-description{color:var(--muted);margin:6px 0 0;font-size:.75rem}.heading-icon{color:#8390a6;width:23px}.status-pill{color:#66728a;border:1px solid var(--line);background:var(--surface-soft);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;align-items:center;gap:7px;padding:7px 10px;font-size:.65rem;font-weight:800;display:inline-flex}.status-pill i{width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);background:currentColor;border-radius:50%}.status-pill.success{color:var(--success)}.status-pill.danger{color:var(--danger)}.status-pill.working{color:var(--warning)}.live-grid{border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(4,minmax(0,1fr));display:grid;overflow:hidden}.live-grid>div{background:var(--surface-soft);align-items:center;gap:11px;min-width:0;padding:15px;display:flex}.live-grid>div+div{border-left:1px solid var(--line)}.live-grid>div>svg{color:#8190a8;flex-shrink:0;width:18px}.live-grid span{gap:4px;min-width:0;display:grid}.live-grid small{color:var(--muted);letter-spacing:.045em;text-transform:uppercase;font-size:.61rem;font-weight:780}.live-grid strong{overflow-wrap:anywhere;font-size:.73rem;line-height:1.4}.service-message{color:var(--muted);margin:16px 0 0;font-size:.77rem;line-height:1.6}.progress{background:#e9edf4;border-radius:999px;height:5px;margin-top:15px;overflow:hidden}.progress span{border-radius:inherit;background:linear-gradient(90deg, #a9bfff, var(--primary));width:35%;height:100%;animation:1.7s ease-in-out infinite progress;display:block}@keyframes progress{0%{transform:translate(-110%)}to{transform:translate(320%)}}.schedule-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.countdown-card{border:1px solid var(--line);background:var(--surface-soft);border-radius:14px;grid-template-columns:38px minmax(0,1fr);column-gap:11px;min-width:0;padding:17px;display:grid}.countdown-card>span{color:#61708b;background:#e9edf4;border-radius:11px;grid-row:1/3;place-items:center;width:38px;height:38px;display:grid}.countdown-card>span svg{width:17px}.countdown-card small{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;align-self:end;font-size:.61rem;font-weight:800}.countdown-card strong{overflow-wrap:anywhere;font-size:1.05rem;line-height:1.3}.countdown-card p{color:var(--muted);grid-column:1/-1;margin:14px 0 0;font-size:.68rem;line-height:1.5}.countdown-card.primary-clock{background:#f4f7ff;border-color:#c9d6fa}.countdown-card.primary-clock>span{color:var(--primary);background:#e4ebff}.backup-list{flex-direction:column;gap:11px;display:flex}.backup-item{border:1px solid var(--line);border-radius:14px;overflow:hidden}.backup-summary{grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:15px;display:grid}.archive-icon{width:42px;height:42px;color:var(--primary);background:#edf2ff;border-radius:12px;place-items:center;display:grid}.archive-icon svg{width:18px}.backup-title{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.backup-title strong{font-size:.82rem}.tier{letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 7px;font-size:.58rem;font-weight:820}.tier.intraday{color:#986018;background:#fff3dd}.tier.daily{color:#3471aa;background:#eaf3fc}.tier.weekly{color:#7650a4;background:#f2ecfb}.tier.monthly{color:#387855;background:#eaf6ef}.tier.yearly{color:#814d69;background:#f8eaf2}.backup-summary p{color:var(--muted);flex-wrap:wrap;align-items:center;gap:7px;margin:5px 0 0;font-size:.69rem;display:flex}.backup-summary p i{opacity:.55;font-style:normal}.backup-summary .folder-path{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem}.backup-summary .folder-path svg{flex-shrink:0;width:13px;height:13px}.backup-summary .expiry-line{color:#93641b;font-weight:650}.backup-item details{border-top:1px solid var(--line)}.backup-item summary{color:var(--primary);background:var(--surface-soft);cursor:pointer;justify-content:space-between;align-items:center;padding:10px 15px;font-size:.7rem;font-weight:760;list-style:none;display:flex}.backup-item summary::-webkit-details-marker{display:none}.backup-item summary svg{width:16px;transition:transform .15s}.backup-item details[open] summary svg{transform:rotate(180deg)}.file-list{padding:5px 15px 10px}.file-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:14px;min-width:0;min-height:52px;padding:9px 0;display:flex}.file-row:last-child{border-bottom:0}.file-row>span{gap:3px;min-width:0;display:grid}.file-row strong{overflow-wrap:anywhere;font-size:.73rem}.file-row small{color:var(--muted);font-size:.64rem}.empty-state{min-height:230px;color:var(--muted);text-align:center;border:1px dashed #cbd3df;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:35px 20px;display:flex}.empty-state>svg{color:#8996a9;width:34px;height:34px}.empty-state strong{color:var(--ink)}.empty-state p{max-width:520px;margin:0;font-size:.77rem;line-height:1.6}@media (max-width:1100px){.metric-grid,.live-grid,.schedule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.live-grid>div:nth-child(4){border-top:1px solid var(--line)}}@media (max-width:850px){.login-page{grid-template-columns:1fr}.login-story{min-height:420px;padding:55px 30px}.login-story h1{font-size:clamp(2.6rem,11vw,4.5rem)}.login-card-wrap{padding:30px 20px 50px}.signed-in{display:none}.hero{flex-direction:column;align-items:stretch}.hero-actions{width:100%}.hero-actions .button{flex:1}}@media (max-width:620px){.topbar{height:68px;padding:0 16px}.icon-button span{display:none}.content{width:min(100% - 24px,1480px);padding-top:30px}.hero h1{font-size:2.35rem}.metric-grid,.live-grid,.schedule-grid{grid-template-columns:1fr}.live-grid>div+div,.live-grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.panel{padding:17px}.file-row{flex-direction:column;align-items:stretch}.file-row .button{width:100%}.setup-banner{grid-template-columns:40px minmax(0,1fr)}.setup-banner>span{width:40px;height:40px}}@media (prefers-reduced-motion:reduce){.spin,.progress span{animation:none}}
