:root{color-scheme:light;font-family:Segoe UI,HarmonyOS Sans SC,Microsoft YaHei UI,PingFang SC,system-ui,-apple-system,sans-serif;--page: #dbe8f4;--page-deep: #bfd0df;--surface: rgba(255, 255, 255, .9);--surface-solid: #ffffff;--text: #07101f;--muted: #4d5a69;--muted-soft: #8b96a3;--brand: #1f69d8;--brand-dark: #0d2d6d;--green: #078c6f;--red: #e65a55;--line: rgba(111, 132, 154, .18);--shadow: 0 12px 28px rgba(57, 83, 111, .16), inset 0 1px 0 rgba(255, 255, 255, .86);--shadow-strong: 0 16px 34px rgba(47, 73, 101, .24), inset 0 1px 0 rgba(255, 255, 255, .92);background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{min-width:320px;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.84),transparent 28rem),linear-gradient(180deg,#cfe0ef,#eaf1f8 42%,#dbe8f4)}body{min-width:320px;min-height:100svh;margin:0;background:transparent}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}:focus-visible{outline:none;box-shadow:0 0 0 4px #1f69d82e,var(--shadow)}.app-shell{position:relative;width:min(100%,520px);min-height:100svh;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom));overflow:hidden}.auth-shell{display:grid;min-height:100svh;place-items:center;padding:18px}.auth-card{width:min(420px,100%);padding:22px;border:1px solid rgba(255,255,255,.78);border-radius:18px;background:linear-gradient(145deg,#fffffff2,#eff7ffdb);box-shadow:var(--shadow-strong)}.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:18px}.auth-brand>span{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:#e7f0ff;color:var(--brand);font-size:26px}.auth-card h1{margin:0;color:var(--text);font-size:26px;line-height:1.1;font-weight:950}.auth-card p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.auth-form{display:grid;gap:12px}.app-shell:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#bfd3e5f2,#f1f6fbc7 52%,#d6e3efeb),var(--page)}.topbar{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:12px;align-items:center;margin-bottom:14px}.topbar-spacer{display:block;width:52px;height:1px}.topbar-title{min-width:0;text-align:center}.topbar-title h1{margin:0;overflow:hidden;color:var(--text);font-size:24px;line-height:1.12;font-weight:900;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.icon-button{display:grid;width:50px;height:50px;place-items:center;border:1px solid rgba(255,255,255,.78);border-radius:16px;background:linear-gradient(145deg,#ffffffeb,#e0ebf6e0);color:var(--text);cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .16s ease}.lucide-icon{display:block;width:1em;height:1em;flex:0 0 auto;stroke-width:2.15}.icon-button:hover{box-shadow:var(--shadow-strong)}.icon-button:active{transform:translateY(1px)}.refresh-button .lucide-icon{margin-top:2px;font-size:22px}.refresh-button small{margin-top:-5px;font-size:12px;font-weight:800}.screen{display:grid;gap:8px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.summary-card,.town-card,.ip-row,.village-card,.settings-block,.empty-state{border:1px solid rgba(255,255,255,.74);border-radius:12px;background:linear-gradient(145deg,#fffffff0,#f6faffd1);box-shadow:var(--shadow)}.summary-card{min-height:126px;padding:12px;text-align:left}.ip-summary-card{width:100%;color:inherit;cursor:pointer}.summary-card h2{margin:0 0 12px;color:var(--text);font-size:16px;line-height:1.2;font-weight:900}.summary-line{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.summary-line+.summary-line{margin-top:7px}.summary-line strong{display:block;color:var(--brand);font-size:25px;line-height:.95;font-weight:950;letter-spacing:0}.ip-summary-card .summary-line:first-of-type strong{color:var(--green)}.ip-summary-card .summary-line:last-of-type strong{color:var(--red)}.summary-line small{display:block;margin-top:3px;color:var(--text);font-size:13px;line-height:1.15}.summary-icon,.cloud-icon{flex:0 0 auto;color:var(--brand-dark);font-size:27px;line-height:1;filter:drop-shadow(0 5px 6px rgba(7,28,69,.16))}.home-icon{font-size:29px}.free-icon{color:var(--green)}.used-icon{color:var(--red)}.list-block,.ip-list{display:grid;gap:8px}.town-card,.ip-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center;width:100%;min-height:58px;padding:10px 12px;color:inherit;text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease}.ip-row.is-readonly{cursor:default}.ip-row.is-readonly:hover{box-shadow:var(--shadow)}.town-card:hover,.ip-row:hover,.village-card:hover,.summary-card:hover{box-shadow:var(--shadow-strong)}.town-card:active,.ip-row:active,.village-card:active{transform:translateY(1px)}.town-card strong,.ip-row strong{display:block;overflow-wrap:anywhere;color:var(--text);font-size:18px;line-height:1.18;font-weight:950}.town-card small,.ip-row small{display:block;margin-top:5px;color:#1f2937;font-size:13px;line-height:1.25;overflow-wrap:anywhere}.ip-camera-name{max-width:100%}.pill,.status{flex:0 0 auto;max-width:min(46vw,220px);overflow:visible;padding:5px 10px;border-radius:999px;background:linear-gradient(145deg,#9da6b1,#77828f);color:#fff;font-size:13px;line-height:1.1;font-weight:900;overflow-wrap:anywhere;white-space:normal;box-shadow:inset 0 1px #ffffff52}.ip-row{grid-template-columns:minmax(0,1fr) auto}.ip-tags{display:flex;max-width:min(48vw,280px);flex-wrap:wrap;justify-content:flex-end;gap:6px}.pill-used,.status.used{background:linear-gradient(145deg,#ff9c95,#e96661)}.status.pending{background:linear-gradient(145deg,#fbbf24,#d97706)}.status.online{background:linear-gradient(145deg,#34d399,#059669)}.status.offline{background:linear-gradient(145deg,#a8b1bd,#697586)}.pill-empty{background:linear-gradient(145deg,#9da6b1,#77828f)}.pill-edit,.status.free{background:linear-gradient(145deg,#23b995,#078c6f)}.chevron{color:#9aa3ad;font-size:20px;line-height:1}.village-card,.settings-block,.empty-state{padding:12px}.village-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.village-head h2,.settings-block h2,.empty-state h2{margin:0 0 6px;color:var(--text);font-size:18px;line-height:1.25;font-weight:950}.village-head p,.settings-block p,.empty-state p,.muted{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.45}.info-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin:8px 0 0}.segment-cell{grid-column:span 3}.mask-cell{grid-column:span 4}.gateway-cell{grid-column:span 5}.vlan-cell,.count-cell{grid-column:span 4}.info-grid div,.settings-stats div{min-width:0;padding:7px;border:1px solid var(--line);border-radius:8px;background:#eff6fdb8}.info-grid dt,.info-grid dd,.settings-stats dt,.settings-stats dd{margin:0}.info-grid dt,.settings-stats dt{color:var(--muted);font-size:12px;font-weight:750}.info-grid dd,.settings-stats dd{overflow:visible;margin-top:4px;color:var(--text);font-size:13px;font-weight:900;overflow-wrap:anywhere;white-space:normal}.search-panel{display:flex;gap:8px}.search-input{width:100%;min-height:42px;padding:0 12px;border:1px solid rgba(255,255,255,.78);border-radius:14px;outline:none;background:#ffffffeb;color:var(--text);box-shadow:var(--shadow)}.search-input::placeholder{color:#8b96a3}.range-note{display:flex;justify-content:space-between;gap:10px;margin:0 2px;color:var(--muted);font-size:12px;font-weight:750}.subnav-row{display:flex}.back-chip{display:inline-flex;align-items:center;gap:2px;min-height:32px;padding:0 11px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:#ffffffb8;color:var(--brand-dark);font-size:13px;font-weight:850;cursor:pointer;box-shadow:0 7px 14px #39536f1a}.back-chip .lucide-icon{margin-left:-4px;font-size:18px}.action-grid,.settings-stats,.user-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mine-profile{padding:14px 4px 8px}.mine-identity{display:flex;align-items:center;gap:14px}.mine-avatar{display:grid;width:74px;height:74px;flex:0 0 auto;place-items:center;border:3px solid rgba(255,255,255,.92);border-radius:50%;background:linear-gradient(145deg,#2f80ed,#078c6f);color:#fff;font-size:31px;font-weight:950;box-shadow:0 12px 24px #39536f2e}.mine-name{display:grid;min-width:0;gap:6px}.mine-name strong{overflow-wrap:anywhere;color:var(--text);font-size:26px;line-height:1.12;font-weight:950}.mine-name small{color:var(--muted);font-size:14px;line-height:1.3;font-weight:800}.mine-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 0}.mine-stats div{min-width:0;text-align:center}.mine-stats dt,.mine-stats dd{margin:0}.mine-stats dt{color:var(--text);font-size:22px;line-height:1.1;font-weight:950}.mine-stats dd{margin-top:5px;color:var(--muted);font-size:12px;font-weight:800}.mine-actions{overflow:hidden;border:1px solid rgba(255,255,255,.76);border-radius:12px;background:#ffffffd1;box-shadow:var(--shadow)}.mine-action{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:64px;padding:10px 12px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.mine-action+.mine-action{border-top:1px solid var(--line)}.mine-action strong,.mine-action small{display:block;overflow-wrap:anywhere}.mine-action strong{color:var(--text);font-size:16px;line-height:1.25;font-weight:950}.mine-action small{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.3;font-weight:750}.mine-action-danger{background:#ffe4e2;color:#b42318;font-size:26px;line-height:1;font-weight:500}.primary-action,.secondary-action,.text-button{min-height:38px;border:1px solid transparent;border-radius:12px;font-weight:900;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease}.primary-action{padding:0 15px;background:linear-gradient(145deg,#2f80ed,#1b5fc8);color:#fff;box-shadow:0 12px 22px #195bc642}.secondary-action{padding:0 15px;border-color:#1f69d82e;background:#e7f0ff;color:#1852aa}.secondary-action:disabled{opacity:.48}.text-button{flex:0 0 auto;padding:0 12px;background:#fff1d6;color:#a35a00}.primary-action:active,.secondary-action:active,.text-button:active{transform:translateY(1px)}.wide{width:100%;margin-top:14px}.hidden-file{display:none}.profile-block .settings-stats{margin-bottom:10px}.settings-link-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:58px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.settings-link-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:10px;background:#e7f0ff;color:var(--brand);font-size:22px}.settings-link-card strong,.settings-link-card small{display:block;overflow-wrap:anywhere}.settings-link-card strong{color:var(--text);font-size:17px;line-height:1.2;font-weight:950}.settings-link-card small{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.3;font-weight:750}.user-form,.user-list{display:grid;gap:9px}.user-form{grid-template-columns:minmax(0,1fr);margin-bottom:12px}.user-form input,.user-edit-grid input{width:100%;min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;outline:none;background:#fff;color:var(--text)}.check-field{display:flex;min-height:38px;align-items:center;gap:8px;color:#263242;font-size:13px;font-weight:850}.check-field input{width:16px;height:16px}.user-card{padding:10px;border:1px solid var(--line);border-radius:10px;background:#eff6fdb8}.user-card-head,.user-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.user-card-head{margin-bottom:9px}.user-card-head strong{min-width:0;overflow-wrap:anywhere;font-size:16px}.user-edit-grid{grid-template-columns:minmax(0,1fr)}.user-actions{justify-content:flex-end;margin-top:9px}.danger-button{background:#ffe4e2;color:#b42318}.tabbar{position:fixed;right:max(0px,calc((100% - 520px)/2));bottom:0;left:max(0px,calc((100% - 520px)/2));z-index:20;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px 12px calc(7px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.86);background:#ffffffdb;box-shadow:0 -14px 26px #2f496524;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.tab{display:grid;grid-template-rows:20px auto;align-content:center;justify-items:center;gap:3px;min-width:0;min-height:50px;border:1px solid transparent;border-radius:22px;background:transparent;color:#293849;cursor:pointer;transition:background-color .16s ease,color .16s ease,transform .12s ease}.tab-icon,.tab strong{display:block}.tab-icon{height:18px;color:#566575;font-size:21px;line-height:1;font-weight:900}.tab strong{margin-top:0;font-size:16px;line-height:1;font-weight:950}.tab.active{background:linear-gradient(145deg,#e2ebfff5,#cdddfce6);color:var(--brand-dark);box-shadow:inset 0 1px #ffffffd1}.tab.active .tab-icon{color:var(--brand)}.toast-layer{position:fixed;top:calc(18px + env(safe-area-inset-top));right:max(16px,calc((100% - 520px)/2 + 16px));z-index:50;width:min(360px,calc(100% - 32px));pointer-events:none}.toast{display:grid;grid-template-columns:10px 1fr 30px;gap:10px;align-items:center;padding:12px 10px 12px 14px;border:1px solid rgba(255,255,255,.78);border-radius:14px;background:#fffffff5;color:var(--text);box-shadow:var(--shadow-strong);pointer-events:auto}.toast p{margin:0;font-size:13px;font-weight:800;line-height:1.45}.toast-dot{width:10px;height:10px;border-radius:999px;background:var(--brand)}.toast-success .toast-dot{background:var(--green)}.toast-error .toast-dot{background:var(--red)}.toast-close{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer}.match-line{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#e7f0ffd1;color:#1852aa;font-size:13px;line-height:1.5}.dialog-layer{position:fixed;inset:0;z-index:30;display:grid;align-items:end;background:#07101f61;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dialog-panel{max-height:min(82svh,720px);overflow:auto;padding:18px;border:1px solid rgba(255,255,255,.76);border-radius:22px 22px 0 0;background:#eef6fd;box-shadow:var(--shadow-strong)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.dialog-head h2{margin:0;color:var(--text);font-size:22px;font-weight:950}.form-grid{display:grid;gap:10px}.field{position:relative;display:grid;gap:6px}.field span{color:#263242;font-size:13px;font-weight:850}.field input,.field select{width:100%;min-height:45px;padding:0 12px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fff;color:var(--text)}.field input:disabled{background:#eff6fdb8;color:var(--muted-soft)}.field select{cursor:pointer}.field small{color:var(--muted);font-size:12px}.ping-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(220px,100%);min-height:45px;padding:4px;overflow:hidden;border:2px solid #344054;border-radius:3px;background:#f8fafc;box-shadow:0 7px #3440542e}.option-switch-2{grid-template-columns:repeat(2,minmax(0,1fr))}.option-switch-3{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-height:52px}.ping-switch-option{position:relative;z-index:1;min-height:33px;padding:0 8px;border:0;border-radius:2px;background:transparent;color:#98a2b3;font-size:14px;font-weight:950;cursor:pointer}.option-switch-3 .ping-switch-option{min-height:40px;padding:0 4px;font-size:12px;line-height:1.2;white-space:normal}.ping-switch-option.is-active{background:#344054;color:#fff}.ping-switch-option[data-ping-value="1"].is-active{background:#059669}.ping-switch-option[data-ping-value="0"].is-active{background:#667085}.ping-switch-option[data-switch-value=利旧].is-active{background:#1f69d8}.ping-switch-option[data-switch-value=新建].is-active{background:#078c6f}@media(min-width:760px){body{padding:0}.app-shell{width:min(1180px,100%);min-height:100svh;padding:24px 28px 104px;overflow:visible;border:0;border-radius:0;box-shadow:none}.app-shell:before{position:fixed;background:linear-gradient(180deg,#dde9f4f5,#f6f9fcf2 42%,#e8f0f8fa),var(--page)}.topbar{grid-template-columns:92px minmax(0,1fr) 92px;margin-bottom:20px;padding:16px 18px;border:1px solid rgba(255,255,255,.74);border-radius:14px;background:#ffffffbd;box-shadow:0 10px 28px #39536f1a}.topbar-title h1{font-size:28px}.icon-button{width:auto;min-width:92px;height:44px;grid-auto-flow:column;grid-template-columns:auto auto;gap:6px;padding:0 14px;border-radius:12px}.topbar-spacer{width:92px}.refresh-button span{margin:0;font-size:22px}.refresh-button .lucide-icon{margin:0;font-size:19px}.refresh-button small{margin:0;font-size:14px}.screen{gap:12px}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.summary-card{min-height:156px;padding:18px 20px}.summary-card h2{margin-bottom:18px;font-size:16px}.summary-card{display:flex;flex-direction:column;justify-content:space-between}.summary-card .summary-line{display:flex}.summary-line+.summary-line{margin-top:12px}.summary-line span:first-child{display:block}.summary-line strong{font-size:34px}.summary-line small{font-size:13px}.summary-icon,.cloud-icon{position:static;font-size:32px;opacity:.9}.summary-card{position:relative}.home-icon,.used-icon{display:block}.list-block{gap:7px;padding:7px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:#ffffff8f;box-shadow:0 10px 28px #39536f14}.town-card,.ip-row{min-height:54px;padding:10px 14px;border-radius:9px;box-shadow:none;background:#ffffffdb}.town-card strong,.ip-row strong{font-size:16px}.town-card small,.ip-row small{margin-top:3px;font-size:12px}.village-card,.settings-block,.empty-state{border-radius:12px;box-shadow:0 10px 24px #39536f14}.info-grid{grid-template-columns:repeat(18,minmax(0,1fr))}.segment-cell{grid-column:span 5}.mask-cell{grid-column:span 6}.gateway-cell{grid-column:span 7}.vlan-cell,.count-cell{grid-column:span 6}.settings-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.profile-block .settings-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.user-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px 108px;align-items:center}.user-edit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px;align-items:center}.settings-block{max-width:none}.tabbar{right:28px;bottom:18px;left:28px;width:min(720px,calc(100% - 56px));margin:0 auto;padding:8px;border:1px solid rgba(255,255,255,.78);border-radius:14px;background:#ffffffdb;box-shadow:0 12px 28px #39536f24}.tab{grid-template-rows:18px auto;gap:3px;min-height:44px;border-radius:10px}.tab-icon{height:17px;font-size:18px}.tab strong{margin-top:0;font-size:15px}.dialog-layer{align-items:center;padding:24px}.dialog-panel{width:min(560px,100%);margin:0 auto;border-radius:22px}}@media(max-width:420px){.app-shell{padding-right:10px;padding-left:10px}.topbar{grid-template-columns:48px minmax(0,1fr) 48px;gap:10px}.topbar-spacer{width:48px}.icon-button{width:48px;height:48px}.topbar-title h1{font-size:22px}.dashboard-grid{gap:8px}.summary-card{min-height:120px;padding:11px}.summary-line strong{font-size:25px}.summary-line small{font-size:12px}.town-card,.ip-row{min-height:58px;padding:10px 11px}.town-card strong,.ip-row strong{font-size:17px}.town-card small,.ip-row small,.pill,.status{font-size:12px}}@media(max-width:350px){.dashboard-grid,.info-grid,.action-grid,.settings-stats,.user-edit-grid{grid-template-columns:1fr}.segment-cell,.mask-cell,.gateway-cell,.vlan-cell,.count-cell{grid-column:auto}.summary-card{min-height:auto}.tab strong{font-size:18px}}