@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Segoe UI,sans-serif;color:#18202f;background:#f5f7fb;--purple:#7147ff;--ink:#18202f;--muted:#778094;--line:#e6e9f1}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% -5%,#eee8ff 0,transparent 26%),#f6f8fc}header{height:76px;background:#ffffffdd;backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;color:var(--ink);text-decoration:none}.brandmark{display:grid;place-items:center;width:38px;height:38px;color:#fff;background:linear-gradient(145deg,#8b68ff,#5c32ed);border-radius:13px;box-shadow:0 8px 18px #7047ff3d}nav{display:flex;gap:8px}nav a{color:#626b7d;text-decoration:none;font-weight:600;padding:10px 14px;border-radius:11px}nav a:hover{background:#f0ecff;color:#6740ec}main{max-width:1180px;margin:0 auto;padding:44px 28px 70px;min-height:76vh}.hero{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;padding:38px 42px;border-radius:28px;color:#fff;background:linear-gradient(125deg,#22164f,#5b32d8 58%,#8b67ff);box-shadow:0 24px 55px #3d25963b;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:280px;height:280px;border:60px solid #ffffff12;border-radius:50%;right:-80px;top:-110px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;color:#d7cfff}.hero h1{font-size:38px;line-height:1.1;margin:10px 0}.hero p{margin:0;color:#ddd5ff}.summary{display:flex;flex-direction:column;position:relative;z-index:1;text-align:right}.summary strong{font-size:46px;line-height:1}.summary span{color:#ddd5ff}.sectiontitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.sectiontitle h2{font-size:24px;margin:0}.sectiontitle a{color:#6740e8;text-decoration:none;font-weight:700;font-size:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.device{background:#fff;border:1px solid #e8eaf1;border-radius:22px;padding:22px;min-height:270px;box-shadow:0 10px 32px #2f38520c;transition:.2s ease;overflow:hidden}.device:hover{transform:translateY(-3px);box-shadow:0 18px 40px #313b5a18;border-color:#ddd7f7}.cardtop{display:flex;align-items:center;justify-content:space-between}.deviceicon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#f1edff,#e7dfff);color:#6840ec;font-size:23px;font-weight:800}.status{font-size:12px;font-weight:700;padding:6px 9px;border-radius:99px}.online{color:#168657;background:#e8f8f0}.offline{color:#a04450;background:#fcecee}.meta{font-size:12px;color:#8b92a2;margin:20px 0 6px}.device h3{font-size:20px;margin:0 0 4px;overflow-wrap:anywhere}.kind{color:#6f7788;margin:0}.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}.controls form{display:flex;gap:7px;max-width:100%}.controls select{max-width:135px;border:1px solid #d8dbe5;border-radius:11px;padding:9px 10px;background:#fff;color:#273043}.button,button{display:inline-block;border:0;border-radius:11px;padding:10px 15px;color:#fff;background:linear-gradient(135deg,#7c52ff,#6237ef);text-decoration:none;font-weight:700;cursor:pointer;box-shadow:0 7px 15px #7047ff25}button:hover{filter:brightness(1.04)}button:disabled{opacity:.4}.secondary,.danger{background:#fff;box-shadow:none}.secondary{color:#6740e8;border:1px solid #d5cbff}.danger{color:#c53b4f;border:1px solid #f0c6cc}.connect,.empty,.notice{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.connect{display:flex;align-items:end;gap:14px;margin-bottom:22px}label{display:grid;gap:7px;flex:1;font-weight:600}input{padding:12px;border:1px solid #ccd1dd;border-radius:11px}.accounts{list-style:none;padding:0;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line)}.accounts li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf0f5;padding:17px}.accounts li span{margin-right:auto;color:#747b8e}.accounts form{margin:0}.notice{margin-bottom:15px;background:#fff8da}h1{font-size:36px}table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}td,th{text-align:left;padding:13px;border-bottom:1px solid #eceef3}footer{text-align:center;color:#8991a1;padding:28px;font-size:13px}@media(max-width:700px){header{height:auto;padding:15px 18px;align-items:flex-start;gap:13px;flex-direction:column}.brandmark{width:34px;height:34px}nav{width:100%;overflow:auto}nav a{padding:8px 10px}main{padding:24px 16px 50px}.hero{padding:28px 24px;align-items:flex-start;gap:28px;flex-direction:column}.hero h1{font-size:30px}.summary{text-align:left}.grid{grid-template-columns:1fr}.sectiontitle{align-items:flex-start;gap:12px;flex-direction:column}.connect,.accounts li{align-items:stretch;flex-direction:column}.accounts li span{margin:0}}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1}.scenariohero{display:flex;align-items:center;gap:22px;padding:32px 38px;border-radius:26px;color:#fff;background:linear-gradient(125deg,#172142,#6040d8);margin-bottom:24px}.scenariohero>span{font-size:50px}.scenariohero h1{margin:4px 0;font-size:34px}.scenariohero p{margin:0;color:#dcd8ee}.builder{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;margin-bottom:34px}.builder h2{margin-top:0}.builder form{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:end}.builder select{padding:12px;border:1px solid #ccd1dd;border-radius:11px;background:#fff}.scenariogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.scenariocard{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:19px;padding:17px}.scenariocard h3{margin:3px 0}.scenarioicon{display:grid;place-items:center;width:45px;height:45px;color:#fff;background:linear-gradient(145deg,#8b68ff,#5c32ed);border-radius:14px}.iconbutton{padding:9px;color:#9a6070;background:#fff;box-shadow:none;border:1px solid #f0d8dd}.iconbutton span{font-size:19px}@media(max-width:850px){.builder form{grid-template-columns:1fr 1fr}}@media(max-width:600px){.builder form{grid-template-columns:1fr}.scenariocard{grid-template-columns:auto 1fr}.scenariohero{padding:25px 22px}}
.schedulelabel{display:block;margin-top:5px;color:#6f7788;font-size:12px}.scheduleform{grid-column:1/-1;display:grid;grid-template-columns:130px auto 1fr auto;gap:13px;align-items:end;padding-top:14px;margin-top:2px;border-top:1px solid #edf0f5}.scheduleform input[type=time]{padding:9px;border:1px solid #ccd1dd;border-radius:10px}.check{display:flex;align-items:center;gap:6px;padding-bottom:9px}.check input,.days input{width:auto}.days{display:flex;flex-wrap:wrap;gap:5px}.days label{display:flex;align-items:center;gap:3px;padding:7px 8px;background:#f3f0ff;border-radius:9px;font-size:12px}@media(max-width:800px){.scheduleform{grid-template-columns:1fr 1fr}.days{grid-column:1/-1}}@media(max-width:500px){.scheduleform{grid-template-columns:1fr}.days{grid-column:auto}}
.authbody{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 20% 0,#e9e1ff,transparent 40%),#f6f8fc}.authbox{width:min(430px,calc(100% - 32px));min-height:auto;margin:0;padding:34px;background:#fff;border:1px solid var(--line);border-radius:25px;box-shadow:0 25px 60px #30205a1f}.authbox form{display:grid;gap:15px}.authbox h1{margin-bottom:20px}.authbox button{margin-top:6px}.authbox a{color:#6840ec}.authbrand{margin-bottom:30px}
.familycard,.taskcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.familycard form{display:flex;gap:7px;flex-wrap:wrap}.familycard input{max-width:110px}.taskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.taskcard form{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.taskcard small{display:block;margin-top:10px;color:#727b8d}.uploadform input{max-width:100%}pre{padding:18px;border-radius:14px;background:#151927;color:#d9e2ff;overflow:auto}
.utilityhero{display:flex;align-items:center;gap:22px;padding:30px 36px;margin-bottom:24px;color:#fff;background:linear-gradient(125deg,#153f4b,#247e78);border-radius:26px}.utilityhero>span{font-size:48px}.utilityhero h1{margin:3px 0;font-size:36px}.utilityhero p{margin:0;color:#cfe9e6}.utilityproperty{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:21px;padding:22px}.utilityproperty h3{font-size:21px;margin-bottom:3px}.utilityproperty p{color:#737c8e}.utilityproperty strong{font-size:27px}.utilityproperty span{font-size:12px;color:#8991a1}.tablewrap{overflow:auto;margin-top:20px}
.serverhero{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px;padding:36px 40px;border-radius:28px;color:#fff;background:linear-gradient(125deg,#101b35,#183d65 62%,#176f82);box-shadow:0 22px 50px #173b5e30}.serverhero h1{margin:8px 0;font-size:38px}.serverhero p{margin:0;color:#cce2ed}.servergrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.servercard,.serverdetail{background:#fff;border:1px solid var(--line);border-radius:23px;padding:25px;box-shadow:0 12px 34px #26344d10}.serverhead{display:flex;align-items:center;gap:14px}.serverhead>.status{margin-left:auto}.servericon{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;color:#fff;background:linear-gradient(145deg,#167c8d,#193b64);font-size:28px}.serverlocation{font-size:11px;font-weight:800;letter-spacing:.14em;color:#79869a}.serverhead h2,.serverhead h1{margin:2px 0 3px}.serverhead code{color:#778094}.servermetrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0 12px}.servermetrics div{padding:14px;background:#f6f8fb;border-radius:14px}.servermetrics span{display:block;color:#7a8497;font-size:12px}.servermetrics strong{display:block;margin-top:4px;font-size:20px}.serveruptime{color:#687386;font-size:13px}.serverempty{display:flex;align-items:center;gap:12px;min-height:145px;color:#7a8497}.serverempty .material-symbols-rounded{font-size:34px;color:#9aa4b5}.serveractions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}.serveractions .button{display:flex;align-items:center;gap:7px}.serveractions form{margin:0}.serverdetail{margin-top:20px}.serverdetail table{margin-top:24px}.serverdetail th{width:40%;color:#667187}.serverdetail td{font-family:ui-monospace,Consolas,monospace}.button .material-symbols-rounded,button .material-symbols-rounded{font-size:18px;vertical-align:middle}@media(max-width:760px){.serverhero{align-items:flex-start;flex-direction:column;gap:24px;padding:28px 24px}.servergrid{grid-template-columns:1fr}.servermetrics{grid-template-columns:1fr 1fr}}
.autorefresh{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:-13px 2px 14px;color:#798396;font-size:12px}.autorefresh .material-symbols-rounded{font-size:17px;animation:spin 2.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.autorecognize{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-top:24px;background:linear-gradient(135deg,#eefaf8,#fff);border-color:#cfeae5}.autorecognize h2{margin-bottom:7px}.autorecognize p{margin:0;color:#687889}.autorecognize form{display:flex;align-items:end;gap:12px;grid-template-columns:none}.autorecognize input{max-width:310px;background:#fff}.recognizeresult{text-align:center;background:#fff;border:1px solid var(--line);border-radius:25px;padding:45px}.recognizeresult>span{font-size:58px;color:#168657}.recognizeresult h1{margin:9px 0}.recognizeresult p{margin-bottom:25px;color:#657184}@media(max-width:750px){.autorecognize,.autorecognize form{align-items:stretch;flex-direction:column}}
.duealerts{padding:18px 21px;margin-bottom:20px;border:1px solid #f0d39a;border-radius:20px;background:#fff9e9}.duealerts h2{margin:0 0 11px;font-size:18px}.duealerts div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:7px 0}.duealerts .material-symbols-rounded{color:#d98c18}.duealerts div>span:last-child{color:#7a6850}.rowactions{display:flex;gap:7px;align-items:center}.rowactions form{margin:0}.rowactions>a{padding:9px 11px;text-decoration:none;border-radius:10px;font-weight:700}@media(max-width:600px){.duealerts div{grid-template-columns:auto 1fr}.duealerts div>span:last-child{grid-column:2}}
