*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;background:#06101f;color:#fff;overflow-x:hidden}.bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,rgba(69,112,255,.35),transparent 35%),radial-gradient(circle at 80% 20%,rgba(185,63,255,.22),transparent 30%),radial-gradient(circle at 55% 90%,rgba(0,210,255,.12),transparent 35%),linear-gradient(135deg,#050915,#061326 55%,#08101d);z-index:-2}.bg:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.018);backdrop-filter:blur(40px)}.glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.28);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.hidden{opacity:0;pointer-events:none;transform:scale(.985)}.app{transition:opacity .85s ease,transform .85s ease}.login-screen{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:20;transition:opacity .75s ease,transform .75s ease,filter .75s ease}.login-screen.unlocked{opacity:0;pointer-events:none;transform:scale(1.04);filter:blur(16px)}.login-card{width:min(92vw,440px);border-radius:34px;padding:38px;text-align:center;position:relative;overflow:hidden}.login-logo{width:82px;height:82px;border-radius:26px;background:linear-gradient(145deg,#fff,#b7c6ff);color:#08101d;font-size:54px;font-weight:900;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 20px 45px rgba(0,0,0,.35)}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:rgba(255,255,255,.54)}.login-card h1{margin:0;font-size:36px}.login-sub{margin:12px 0 26px;color:rgba(255,255,255,.68)}.input-wrap{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:4px;margin-bottom:14px}input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:18px;padding:16px;text-align:center}input::placeholder{color:rgba(255,255,255,.45)}button{border:0;border-radius:18px;cursor:pointer}.login-card button{width:100%;height:58px;background:linear-gradient(135deg,#ffffff,#a9bcff);color:#08101d;font-size:17px;font-weight:800;position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(80,120,255,.25)}button.loading .btn-text{opacity:0}button.loading .loader{opacity:1}.loader{opacity:0;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:3px solid rgba(8,16,29,.22);border-top-color:#08101d;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#login-error{height:20px;margin:14px 0 4px;color:#ff7b91;opacity:0;transition:.2s}.shake{animation:shake .35s ease}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}#login-time{color:rgba(255,255,255,.5)}.topbar{margin:28px auto 34px;width:min(94%,1500px);min-height:90px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:20px 32px}.brand{display:flex;gap:16px;align-items:center}.logo-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#fff,#b7c6ff);color:#08101d;font-size:30px;font-weight:900;display:grid;place-items:center}.brand strong{font-size:22px;display:block}.brand span,.clock span,p,small{color:rgba(255,255,255,.68)}nav{display:flex;gap:12px;background:rgba(255,255,255,.06);padding:8px;border-radius:18px}nav a{color:#fff;text-decoration:none;padding:12px 22px;border-radius:14px}nav a:first-child{background:rgba(255,255,255,.12)}.top-actions{display:flex;align-items:center;gap:16px}.clock{text-align:right}#time{font-size:26px;font-weight:800}.logout-btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14);padding:13px 16px;font-weight:800}main{width:min(92%,1400px);margin:auto}.hero{margin-bottom:24px}.hero h1{font-size:42px;margin:0 0 12px}.hero p{font-size:18px;margin:0}.status-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#5ef08c;box-shadow:0 0 24px #5ef08c;vertical-align:middle}.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.metric{border-radius:22px;padding:22px}.metric span{color:rgba(255,255,255,.65);font-weight:700}.metric strong{display:block;font-size:34px;margin:10px 0 16px}.bar{height:10px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#5ef08c,#6bc7ff);border-radius:99px;transition:width .5s ease}.layout{display:grid;grid-template-columns:1fr 380px;gap:24px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{min-height:330px;border-radius:22px;padding:30px 26px;text-decoration:none;color:white;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 45px rgba(0,0,0,.25);transition:.25s}.card:hover{transform:translateY(-6px) scale(1.015);border-color:rgba(255,255,255,.32)}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.18),transparent 30%);z-index:0}.card>*{position:relative;z-index:1}.service-logo,.service-icon{position:absolute;top:38px;left:50%;transform:translateX(-50%);width:112px;height:112px;display:grid;place-items:center;filter:drop-shadow(0 20px 22px rgba(0,0,0,.42))}.service-logo img{max-width:100%;max-height:100%;object-fit:contain}.photos-logo img{transform:scale(1.08)}.service-icon svg{width:100%;height:100%}.folder path:first-child{fill:#47c7ff}.folder path:last-child{fill:#168dff}.card h2{font-size:24px;margin:0 0 8px}.card p{margin:0 0 28px}.card span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);font-size:28px}.blue{background:linear-gradient(160deg,rgba(21,78,181,.85),rgba(20,37,82,.7))}.green{background:linear-gradient(160deg,rgba(35,123,91,.8),rgba(26,54,59,.72))}.purple{background:linear-gradient(160deg,rgba(97,58,176,.82),rgba(43,32,86,.76))}.red{background:linear-gradient(160deg,rgba(147,49,70,.8),rgba(61,29,55,.76))}.cyan{background:linear-gradient(160deg,rgba(20,133,177,.8),rgba(17,74,91,.74))}.weather,.status,.network{border-radius:22px;padding:24px}.panel-title{font-weight:800;margin-bottom:22px}.right{display:flex;flex-direction:column;gap:18px}.weather{display:grid;grid-template-columns:76px 1fr;gap:16px}.weather-logo svg{width:66px;height:66px}.weather-logo circle{fill:#ffd34f}.weather-logo path{fill:#eaf5ff}.weather h2{font-size:36px;margin:4px 0}.weather p{margin:0}.weather-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid rgba(255,255,255,.13);padding-top:20px}.weather-grid div{display:flex;flex-direction:column;gap:4px}.row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.row:last-child{border-bottom:0}.ok,.network b,.up{color:#5ef08c}.down{color:#ff6d86}.unknown{color:#ffd86b}.row a,.status-link{color:#8fc7ff;text-decoration:none;font-weight:700}.status-link{display:block;margin-top:14px}.head{align-items:center}footer{width:min(92%,1400px);margin:34px auto 24px;text-align:center;padding:18px;border-radius:18px;color:rgba(255,255,255,.62)}@media(max-width:1150px){.layout{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.card{min-height:260px}.live-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.topbar{height:auto;flex-direction:column;gap:18px;padding:22px}.cards,.live-grid{grid-template-columns:1fr}.hero h1{font-size:34px}.layout{display:block}.right{margin-top:20px}.card{min-height:230px}nav{display:none}.top-actions{flex-direction:column}}