:root{
      --bg:#020916;
      --panel:rgba(5,18,38,.78);
      --panel-2:rgba(7,28,53,.82);
      --line:rgba(108,187,255,.25);
      --cyan:#51ddff;
      --cyan2:#0a8dff;
      --gold:#ffd177;
      --gold2:#ff9d32;
      --text:#f5fbff;
      --muted:#91abc5;
      --green:#3ff2a5;
      --danger:#ff7285;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);
      font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif}
    body{
      background:
        radial-gradient(circle at 50% 45%,rgba(0,113,187,.18),transparent 34%),
        radial-gradient(circle at 74% 20%,rgba(65,40,145,.14),transparent 28%),
        linear-gradient(180deg,#010713,#031226 58%,#020916);
    }
    body:before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
      background-image:
        radial-gradient(circle at 12% 22%,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
        radial-gradient(circle at 72% 14%,rgba(81,221,255,.85) 0 1px,transparent 1.6px),
        radial-gradient(circle at 88% 62%,rgba(255,209,119,.8) 0 1px,transparent 1.6px),
        radial-gradient(circle at 32% 76%,rgba(255,255,255,.6) 0 1px,transparent 1.6px);
      background-size:190px 170px,250px 230px,230px 210px,310px 280px;
    }
    button{font:inherit}
    .app{height:100%;display:grid;grid-template-rows:76px 1fr 66px;min-width:320px}
    header{
      position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;
      padding:0 26px;border-bottom:1px solid rgba(92,168,228,.18);
      background:linear-gradient(180deg,rgba(2,9,22,.96),rgba(2,9,22,.72));
      backdrop-filter:blur(12px)
    }
    .brand{display:flex;align-items:center;gap:15px}
    .brand-mark{
      width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#08101d;
      font-weight:900;font-size:20px;background:linear-gradient(145deg,#fff0af,#f5a63d);
      box-shadow:0 0 28px rgba(255,189,70,.35),inset 0 1px 0 #fff8ce
    }
    .brand-title{font-size:24px;font-weight:800;letter-spacing:.5px}
    .brand-title small{font-size:10px;color:#91abc5}
    .brand-title b{color:var(--gold)}
    .brand-sub{font-size:12px;color:var(--muted);margin-top:4px;letter-spacing:1.8px}
    .status{display:flex;align-items:center;gap:16px;color:#cfe3f6;font-size:13px}
    .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green)}
    .status-chip{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(101,173,225,.26);
      border-radius:10px;background:rgba(6,21,43,.66)}
    main{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:14px;padding:14px 18px}
    .side{
      position:relative;z-index:10;min-height:0;border:1px solid var(--line);border-radius:15px;
      background:linear-gradient(180deg,rgba(4,18,38,.88),rgba(3,13,29,.78));backdrop-filter:blur(12px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
    }
    .left{padding:14px}
    .section-title{font-size:13px;color:#cde3f6;font-weight:700;letter-spacing:.8px;margin:2px 2px 12px}
    .menu{display:grid;gap:9px}
    .menu button{
      width:100%;height:44px;border-radius:11px;border:1px solid rgba(89,164,221,.25);
      color:#d9edff;background:rgba(6,27,52,.68);cursor:pointer;text-align:left;padding:0 13px;
      display:flex;align-items:center;gap:10px;transition:.2s ease
    }
    .menu button:hover{transform:translateX(2px);border-color:rgba(81,221,255,.58);background:rgba(8,49,80,.78)}
    .menu button:disabled{opacity:.38;cursor:not-allowed;transform:none}
    .menu .primary{
      color:#071321;border-color:rgba(255,209,119,.88);font-weight:800;justify-content:center;
      background:linear-gradient(145deg,#ffe4a3,#eaa64d);box-shadow:0 0 25px rgba(255,181,64,.22)
    }
    .menu .primary:hover{transform:translateY(-1px);background:linear-gradient(145deg,#fff0b9,#f1b65f)}
    .icon{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;
      background:rgba(81,221,255,.09);color:var(--cyan);font-size:16px}
    .primary .icon{background:rgba(0,0,0,.12);color:#162239}
    .mini-stats{margin-top:15px;border-top:1px solid rgba(105,178,233,.14);padding-top:13px;display:grid;gap:12px}
    .mini-stat{display:flex;justify-content:space-between;align-items:end}
    .mini-stat span{font-size:12px;color:var(--muted)}
    .mini-stat strong{font-size:19px;color:var(--green);font-weight:700}
    .hint{margin-top:16px;padding:12px;border-radius:11px;background:rgba(81,221,255,.055);font-size:12px;
      color:#a9c5de;line-height:1.7;border:1px solid rgba(81,221,255,.1)}
    .stage{
      position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:18px;
      border:1px solid rgba(71,161,226,.23);
      background:
        radial-gradient(ellipse at 50% 46%,rgba(12,76,122,.28),transparent 53%),
        linear-gradient(180deg,rgba(2,14,30,.9),rgba(2,9,19,.78));
      box-shadow:inset 0 0 90px rgba(0,64,115,.16),0 15px 60px rgba(0,0,0,.2)
    }
    .stage:before{
      content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.27;
      background-image:linear-gradient(rgba(44,135,196,.09) 1px,transparent 1px),
        linear-gradient(90deg,rgba(44,135,196,.08) 1px,transparent 1px);
      background-size:52px 52px;mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%)
    }
    #map{position:absolute;inset:0;z-index:2}
    #netCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
    .map-shade{position:absolute;inset:0;z-index:3;pointer-events:none;
      background:radial-gradient(ellipse at center,transparent 40%,rgba(1,8,18,.44) 92%)}
    .breadcrumb{
      position:absolute;z-index:8;top:16px;left:50%;transform:translateX(-50%);
      display:flex;align-items:center;gap:8px;max-width:78%;padding:9px 14px;border-radius:12px;
      background:rgba(3,17,35,.76);border:1px solid rgba(94,180,240,.22);backdrop-filter:blur(10px);
      font-size:13px;white-space:nowrap
    }
    .breadcrumb button{border:0;background:none;color:#a9c9e3;cursor:pointer;padding:0}
    .breadcrumb button:hover{color:var(--cyan)}
    .breadcrumb strong{color:var(--gold);overflow:hidden;text-overflow:ellipsis}
    .level-badge{
      position:absolute;z-index:8;left:18px;bottom:18px;padding:10px 13px;border-radius:11px;
      background:rgba(3,20,40,.76);border:1px solid rgba(81,221,255,.2);backdrop-filter:blur(10px)
    }
    .level-badge small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
    .level-badge b{font-size:16px}
    .net-caption{
      position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%);
      min-width:250px;text-align:center;padding:10px 18px;border-radius:13px;
      background:rgba(3,17,35,.76);border:1px solid rgba(255,209,119,.24);backdrop-filter:blur(10px)
    }
    .net-caption b{color:var(--gold);font-size:15px}
    .net-caption div{font-size:11px;color:var(--muted);margin-top:3px}
    .loading{
      position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
      background:rgba(1,8,18,.76);backdrop-filter:blur(5px);transition:.25s
    }
    .loading.hidden{opacity:0;pointer-events:none}
    .loader-box{text-align:center;color:#b9d7ee}
    .spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(81,221,255,.13);
      border-top-color:var(--cyan);margin:0 auto 12px;animation:spin .85s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .error-box{max-width:460px;padding:20px;text-align:center;line-height:1.7;color:#ffd9de}
    .right{padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
    .area-card{padding:13px;border-radius:12px;border:1px solid rgba(93,170,224,.17);background:rgba(5,25,49,.55)}
    .area-name{font-size:19px;font-weight:800;color:var(--gold);margin-bottom:5px}
    .area-path{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .net-corner-layer{position:absolute;inset:0;z-index:10;pointer-events:none}
    .net-corner-card{
      --cat:#53ddff;position:absolute;width:184px;min-height:94px;pointer-events:auto;
      transform:translate(-50%,-50%);border-radius:15px;padding:10px 11px 9px;cursor:pointer;
      border:1px solid color-mix(in srgb,var(--cat) 46%,transparent);
      background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--cat) 16%,transparent),transparent 44%),
        linear-gradient(145deg,rgba(5,27,51,.95),rgba(3,14,31,.91));
      color:#eaf8ff;box-shadow:0 13px 32px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s,filter .2s
    }
    .net-corner-card:hover,.net-corner-card:focus-within{border-color:var(--cat);filter:brightness(1.08)}
    .net-corner-card.active{
      border-color:var(--cat);
      box-shadow:0 0 30px color-mix(in srgb,var(--cat) 25%,transparent),0 13px 32px rgba(0,0,0,.34)
    }
    .net-corner-card.active:after{
      content:"当前";position:absolute;right:8px;top:7px;padding:2px 6px;border-radius:999px;
      color:#07131e;background:var(--cat);font-size:9px;font-weight:900
    }
    .net-corner-card[data-position="bottom-right"]{
      --cat:#a778ff;
    }
    .net-corner-card[data-position="bottom-right"] .corner-icon{
      background:#a778ff;
    }
    .corner-main{display:grid;grid-template-columns:35px 1fr;gap:9px;align-items:center}
    .corner-icon{
      width:35px;height:35px;border-radius:11px;display:grid;place-items:center;
      color:#07131e;background:var(--cat);font-size:17px;font-weight:900;
      box-shadow:0 0 16px color-mix(in srgb,var(--cat) 32%,transparent)
    }
    .corner-name{font-size:15px;font-weight:900;letter-spacing:.4px}
    .corner-sub{margin:6px 0 0 44px;color:#9fbed6;font-size:10px;white-space:nowrap}
    .corner-actions{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 0 44px}
    .corner-action{
      border:1px solid color-mix(in srgb,var(--cat) 48%,transparent);cursor:pointer;
      background:rgba(3,16,31,.78);color:#edf9ff;border-radius:999px;padding:4px 8px;
      font-size:9px;line-height:1;white-space:nowrap
    }
    .corner-action:hover{border-color:var(--cat)}
    .corner-action:disabled{opacity:.42;cursor:not-allowed}
    .selected-category-panel{
      --cat:#53ddff;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;
      padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);
      background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 12%,rgba(5,25,49,.7)),rgba(4,17,35,.72))
    }
    .selected-category-icon{
      width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
      background:var(--cat);color:#07131e;font-weight:900;font-size:19px
    }
    .selected-category-name{font-size:16px;font-weight:900}
    .selected-category-sub{font-size:10px;color:#9bb8d0;margin-top:4px}
    .selected-mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .selected-mode-action{
      height:34px;border-radius:9px;border:1px solid rgba(81,221,255,.28);
      background:rgba(5,28,51,.72);color:#e9f8ff;cursor:pointer;font-size:11px
    }
    .selected-mode-action:hover{border-color:var(--cyan)}
    .selected-mode-action:disabled{opacity:.42;cursor:not-allowed}
    .category-head{display:flex;align-items:center;justify-content:space-between;padding:1px 1px 0}
    .category-head b{font-size:13px;color:#dcefff;letter-spacing:.6px}
    .category-head span{font-size:11px;color:var(--green)}
    .category-grid{display:grid;gap:9px}
    .category-card{
      --cat:#53ddff;position:relative;width:100%;min-height:82px;border-radius:13px;cursor:pointer;
      border:1px solid color-mix(in srgb,var(--cat) 30%,transparent);
      background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 10%,rgba(5,25,49,.82)),rgba(4,17,35,.78));
      color:#eaf7ff;text-align:left;padding:11px 12px;overflow:hidden;transition:.22s ease
    }
    .category-card:before{
      content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 4px 4px 0;
      background:var(--cat);box-shadow:0 0 14px var(--cat)
    }
    .category-card:hover{transform:translateX(-2px);border-color:color-mix(in srgb,var(--cat) 62%,transparent)}
    .category-card.active{
      border-color:color-mix(in srgb,var(--cat) 88%,white 8%);
      background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 22%,rgba(6,29,54,.9)),rgba(5,22,43,.88));
      box-shadow:0 0 25px color-mix(in srgb,var(--cat) 17%,transparent),inset 0 1px 0 rgba(255,255,255,.06)
    }
    .cat-top{display:grid;grid-template-columns:35px 1fr auto;gap:9px;align-items:center}
    .cat-icon{
      width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:900;
      color:#07131e;background:var(--cat);box-shadow:0 0 17px color-mix(in srgb,var(--cat) 28%,transparent)
    }
    .cat-name{font-size:15px;font-weight:800;letter-spacing:.3px}
    .cat-count{font-size:16px;color:var(--cat);font-weight:800;font-variant-numeric:tabular-nums}
    .cat-sub{margin:7px 0 0 44px;color:#91abc5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .category-summary{
      padding:10px 11px;border-radius:11px;border:1px solid rgba(91,170,226,.15);
      background:rgba(5,25,49,.5);font-size:11px;color:#9db9d1;line-height:1.65
    }
    .category-summary b{color:var(--gold);font-size:12px}
    .cat-actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0 44px}
    .cat-action{
      appearance:none;border:1px solid color-mix(in srgb,var(--cat) 48%,transparent);cursor:pointer;
      background:rgba(4,18,35,.72);color:#e7f6ff;border-radius:999px;padding:4px 8px;
      font-size:10px;line-height:1;white-space:nowrap
    }
    .cat-action:hover{background:color-mix(in srgb,var(--cat) 16%,rgba(4,18,35,.78));border-color:var(--cat)}
    .cat-action:disabled{opacity:.38;cursor:not-allowed}
    .publish{
      margin-top:auto;height:42px;border:1px solid rgba(81,221,255,.42);border-radius:11px;cursor:pointer;
      color:#e9f9ff;background:linear-gradient(135deg,rgba(7,91,137,.82),rgba(11,54,101,.82));font-weight:700
    }
    .publish:hover{border-color:var(--cyan);box-shadow:0 0 24px rgba(81,221,255,.15)}
    .publish:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
    footer{
      position:relative;z-index:20;display:grid;grid-template-columns:160px 1fr;align-items:center;
      padding:0 22px;border-top:1px solid rgba(92,168,228,.18);
      background:rgba(2,10,22,.9);backdrop-filter:blur(12px)
    }
    .ticker-title{color:var(--gold);font-size:13px;font-weight:800}
    .ticker-viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
    .ticker{display:flex;width:max-content;gap:54px;animation:ticker 30s linear infinite}
    .ticker:hover{animation-play-state:paused}
    .tick{display:flex;align-items:center;gap:9px;white-space:nowrap;color:#cce3f5;font-size:12px}
    .tick i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
    .tick em{font-style:normal;color:var(--muted)}
    @keyframes ticker{to{transform:translateX(-50%)}}
    .toast{
      position:fixed;z-index:99;left:50%;top:92px;transform:translate(-50%,-20px);opacity:0;
      background:rgba(4,23,43,.94);border:1px solid rgba(81,221,255,.38);border-radius:12px;
      padding:11px 18px;color:#e7f7ff;pointer-events:none;transition:.25s;box-shadow:0 15px 45px rgba(0,0,0,.35)
    }
    .toast.show{opacity:1;transform:translate(-50%,0)}