/* =========================
   XuanCloud OS V4 Design System
   1) tokens  2) layout  3) components  4) utilities  5) responsive
   ========================= */
:root{
  --bg:#f7fbff;--bg-soft:#edf8fb;--paper:#fff;--glass:rgba(255,255,255,.82);--glass-strong:rgba(255,255,255,.94);
  --ink:#10243a;--ink-2:#35506a;--muted:#72879a;--faint:#9babb9;--line:#dceaf2;--line-soft:#edf4f7;
  --sky:#2588f4;--cyan:#11b7cf;--jade:#18b58f;--teal:#0f9d9b;--gold:#f2ab42;--amber:#ffc766;--red:#e85b67;--violet:#7d70ef;
  --sky-wash:#eaf5ff;--cyan-wash:#e9fbff;--jade-wash:#eafbf5;--gold-wash:#fff7e8;--red-wash:#fff0f2;--violet-wash:#f0eeff;
  --shadow:0 18px 52px rgba(31,78,110,.09);--shadow-sm:0 8px 26px rgba(37,79,108,.075);--focus:0 0 0 4px rgba(17,183,207,.12);
  --r-lg:22px;--r:16px;--r-sm:12px;--sidebar:284px;--topbar:74px;--space:16px;--transition:.18s ease;
}
html[data-density="compact"]{--space:11px;--topbar:66px;--r-lg:18px;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;box-shadow:var(--focus);border-color:#98dbe7!important}::selection{background:#c8eff5;color:#10354b}svg{display:block}.hidden{display:none!important}

/* Ambient eastern-cyber background: no external images */
.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:
 radial-gradient(circle at 8% 0%,rgba(37,136,244,.15),transparent 23%),
 radial-gradient(circle at 90% 4%,rgba(17,183,207,.12),transparent 23%),
 radial-gradient(circle at 94% 88%,rgba(242,171,66,.09),transparent 21%),
 radial-gradient(circle at 36% 100%,rgba(24,181,143,.07),transparent 30%),
 linear-gradient(rgba(38,99,136,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(38,99,136,.025) 1px,transparent 1px);background-size:auto,auto,auto,auto,32px 32px,32px 32px}
.scene .mountains{position:absolute;right:-5vw;bottom:-4vh;width:min(80vw,1180px);height:38vh;opacity:.18}.scene .cloud{position:absolute;border:1px solid rgba(17,183,207,.18);border-radius:50%}.scene .c1{width:136px;height:46px;left:12%;top:10%;border-left-color:transparent;border-bottom-color:transparent}.scene .c2{width:92px;height:32px;left:21%;top:13%;border-right-color:transparent;border-bottom-color:transparent}.scene .c3{width:120px;height:42px;right:12%;top:23%;border-left-color:transparent;border-bottom-color:transparent;opacity:.55}

/* App shell */
.shell{position:relative;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;z-index:1}.sidebar{height:100vh;overflow:auto;padding:15px 13px;border-right:1px solid rgba(209,228,239,.95);background:rgba(248,253,255,.84);backdrop-filter:blur(22px);display:flex;flex-direction:column;z-index:40}.brand{display:flex;align-items:center;gap:11px;padding:7px 8px 13px}.brandmark{width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,var(--sky),var(--cyan) 52%,var(--jade));box-shadow:0 12px 28px rgba(37,136,244,.24);display:grid;place-items:center;color:white;font:800 20px/1 "STKaiti","KaiTi",serif;position:relative;overflow:hidden}.brandmark:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.48);border-radius:11px}.brand-copy strong{font-size:14px;letter-spacing:.07em}.brand-copy small{display:block;color:#7d91a3;font-size:9px;margin-top:3px;letter-spacing:.08em}.seal{margin-left:auto;width:26px;height:26px;border:1px solid rgba(232,91,103,.45);color:#d94b57;border-radius:6px;display:grid;place-items:center;background:#fffafa;font:700 10px serif;transform:rotate(-4deg)}
.workspace-pill{margin:0 5px 10px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.76);display:flex;align-items:center;gap:8px}.workspace-pill .orb{width:9px;height:9px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 5px rgba(24,181,143,.1)}.workspace-pill strong{font-size:10px}.workspace-pill small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.nav-group{margin-top:3px}.nav-title{padding:10px 10px 5px;color:#98a9b8;font-size:8px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.nav{display:flex;flex-direction:column;gap:3px}.navbtn{position:relative;width:100%;border:0;background:transparent;color:#536d83;padding:9px 10px;border-radius:12px;display:flex;align-items:center;gap:9px;text-align:left;font-size:10px;transition:var(--transition)}.navbtn:hover{background:rgba(255,255,255,.76);color:var(--ink);transform:translateX(1px)}.navbtn.active{background:linear-gradient(90deg,#fff,rgba(236,249,255,.94));color:#1f72cc;box-shadow:var(--shadow-sm);font-weight:850}.navbtn.active:before{content:"";position:absolute;left:-3px;top:10px;width:3px;height:20px;border-radius:99px;background:linear-gradient(var(--cyan),var(--sky))}.ni{width:22px;height:22px;border-radius:7px;background:#edf6fc;display:grid;place-items:center;font-size:10px;font-weight:900;flex:none}.navbtn.active .ni{background:linear-gradient(135deg,#e2f3ff,#e4fbf5)}.nbadge{margin-left:auto;border-radius:999px;padding:2px 6px;font-size:8px;background:#eef0ff;color:#6758df;font-weight:900}.nbadge.warn{background:#fff2d8;color:#aa6b0e}.side-health{margin-top:auto;border:1px solid var(--line);border-radius:17px;padding:13px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,252,255,.92));box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.side-health:after{content:"云";position:absolute;right:9px;top:-5px;color:rgba(17,183,207,.08);font:800 58px serif}.side-health .title{font-size:10px;font-weight:850;display:flex;align-items:center;gap:7px}.pulse{width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 4px rgba(24,181,143,.12)}.progress{height:6px;background:#edf3f7;border-radius:999px;overflow:hidden;margin:10px 0 7px}.progress i{display:block;height:100%;width:96%;background:linear-gradient(90deg,var(--jade),var(--cyan),var(--sky))}.side-health .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}

.main{min-width:0;display:flex;flex-direction:column;height:100vh}.topbar{height:var(--topbar);flex:none;padding:0 20px;border-bottom:1px solid rgba(211,227,238,.94);background:rgba(255,255,255,.74);backdrop-filter:blur(20px);display:flex;align-items:center;gap:10px;z-index:30}.menu-btn{display:none}.search{position:relative;flex:1;max-width:760px}.search input{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.95);border-radius:14px;padding:10px 88px 10px 38px;color:var(--ink);font-size:10px}.search .mag{position:absolute;left:13px;top:10px;color:#7a91a5}.kbd{position:absolute;right:9px;top:8px;border:1px solid var(--line);border-radius:7px;background:#f8fbfd;padding:3px 7px;color:#8093a4;font-size:8px}.top-actions{display:flex;align-items:center;gap:7px;margin-left:auto}.status-chip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:7px 9px;color:#587087;font-size:8px}.iconbtn{width:37px;height:37px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;color:#536c82;font-size:13px;position:relative}.iconbtn .count{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;border-radius:99px;background:var(--red);color:#fff;font-size:7px;display:grid;place-items:center;border:2px solid #fff}.profile{display:flex;align-items:center;gap:8px;padding-left:3px}.avatar{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#dff2ff,#e0fff6);border:1px solid #d8eaf4;color:#2576ca;display:grid;place-items:center;font-weight:900}.profile strong{font-size:10px}.profile small{display:block;color:var(--muted);font-size:8px;margin-top:1px}.content{height:calc(100vh - var(--topbar));overflow:auto;padding:20px}.page{display:none;max-width:1600px;margin:0 auto}.page.active{display:block;animation:pagein .18s ease-out}@keyframes pagein{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Components */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.eyebrow{font-size:8px;font-weight:950;color:#0da6bb;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}.pagehead h1{font-size:23px;line-height:1.1;margin:0 0 6px;letter-spacing:-.035em}.pagehead p{margin:0;color:var(--muted);font-size:10px;line-height:1.65;max-width:790px}.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#fff;color:#425e75;border-radius:11px;padding:8px 11px;font-size:9px;font-weight:850;transition:var(--transition)}.btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--sky),var(--cyan) 58%,var(--jade));color:#fff}.btn.gold{background:#fffaf0;border-color:#f3d49f;color:#a86d14}.btn.danger{background:#fff7f8;border-color:#ffd1d6;color:#be3f4a}.btn.soft{background:#f5faff}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.grid{display:grid;gap:var(--space)}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.span2{grid-column:span 2}.span3{grid-column:span 3}.card{position:relative;background:var(--glass);backdrop-filter:blur(16px);border:1px solid rgba(216,232,243,.98);border-radius:var(--r-lg);padding:var(--space);box-shadow:var(--shadow-sm);overflow:hidden}.card.cloud:after{content:"";position:absolute;right:10px;top:8px;width:65px;height:24px;opacity:.12;background:radial-gradient(circle at 13px 15px,transparent 8px,var(--cyan) 9px 10px,transparent 11px),radial-gradient(circle at 33px 12px,transparent 11px,var(--cyan) 12px 13px,transparent 14px),radial-gradient(circle at 54px 15px,transparent 8px,var(--cyan) 9px 10px,transparent 11px)}.cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.card h3{font-size:11px;margin:0}.muted{color:var(--muted)}.small{font-size:9px}.tiny{font-size:8px}.metric{display:flex;align-items:center;justify-content:space-between;min-height:112px}.metric .label{color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.metric .value{font-size:25px;font-weight:900;letter-spacing:-.05em;margin:6px 0 2px}.metric .trend{font-size:8px;color:#53936f}.micon{width:42px;height:42px;border-radius:13px;background:var(--sky-wash);color:#2478cf;display:grid;place-items:center;font-size:10px;font-weight:900}.micon.jade{background:var(--jade-wash);color:#178c70}.micon.gold{background:var(--gold-wash);color:#ae761c}.micon.violet{background:var(--violet-wash);color:#6d5fdc}.status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--jade-wash);color:#167d65;padding:4px 7px;font-size:8px;font-weight:850;white-space:nowrap}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--jade)}.status.warn{background:var(--gold-wash);color:#9a6818}.status.warn:before{background:var(--gold)}.status.danger{background:var(--red-wash);color:#b1444f}.status.danger:before{background:var(--red)}.status.info{background:var(--sky-wash);color:#276fac}.status.info:before{background:var(--sky)}.status.violet{background:var(--violet-wash);color:#6557cf}.status.violet:before{background:var(--violet)}
.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.72fr);gap:var(--space);margin-bottom:var(--space)}.hero-main{min-height:210px;padding:22px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(236,249,255,.9));border:1px solid var(--line);border-radius:26px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.hero-main h2{font:800 27px/1.15 "STKaiti","KaiTi","Microsoft YaHei",serif;margin:0 0 8px;letter-spacing:.04em}.hero-main p{max-width:680px;color:var(--muted);font-size:10px;line-height:1.75}.hero-main .hero-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.hero-main .hero-kpis span{border:1px solid var(--line);background:rgba(255,255,255,.84);border-radius:999px;padding:6px 9px;font-size:8px;color:#50697f}.hero-art{position:absolute;right:-34px;bottom:-20px;width:54%;height:86%;opacity:.58}.hero-art path:nth-child(1){fill:#13b7cf}.hero-art path:nth-child(2){fill:#18b58f}.hero-art path:nth-child(3){fill:#2588f4}.hero-art path:nth-child(4){fill:#f2ab42}.hero-side{display:grid;gap:var(--space)}.score{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px}.ring{width:102px;height:102px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--jade) 0 74%,var(--cyan) 74% 94%,#e9f0f4 94%);position:relative}.ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:white}.ring b{position:relative;z-index:1;font-size:20px}.score ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}.score li{font-size:8px;color:#536d82;display:flex;justify-content:space-between;gap:12px}.score li strong{color:#213a50}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--space)}.toolbar input,.toolbar select{border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 10px;color:var(--ink);font-size:9px}.toolbar input{min-width:240px}.seg{display:flex;border:1px solid var(--line);background:#fff;border-radius:11px;padding:3px;gap:2px}.seg button{border:0;background:transparent;color:#6b8093;border-radius:8px;padding:5px 8px;font-size:8px}.seg button.active{background:var(--sky-wash);color:#2375c7;font-weight:850}.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space)}.appcard{background:var(--glass-strong);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);transition:var(--transition)}.appcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.apphead{display:flex;align-items:center;gap:9px}.appicon{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#dff4ff,#e5fff6);display:grid;place-items:center;color:#2278c9;font-weight:900}.appmeta{min-width:0;flex:1}.appmeta strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appmeta small{display:block;color:var(--muted);font-size:7px;margin-top:2px}.appstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.appstat{background:#f8fbfd;border-radius:10px;padding:7px}.appstat b{display:block;font-size:11px}.appstat span{font-size:7px;color:var(--muted)}.apptags{display:flex;gap:4px;flex-wrap:wrap}.tag{font-size:7px;border-radius:999px;padding:3px 6px;background:var(--jade-wash);color:#187f67}.tag.blue{background:var(--sky-wash);color:#286eb0}.tag.gold{background:var(--gold-wash);color:#9a6818}.tag.violet{background:var(--violet-wash);color:#6456c8}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:8px}.table th{color:#8093a4;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.table tr:hover td{background:rgba(245,250,253,.75)}.matrix th,.matrix td{text-align:center}.matrix th:first-child,.matrix td:first-child{text-align:left;position:sticky;left:0;background:rgba(255,255,255,.96);z-index:2}.dot{width:23px;height:23px;border-radius:8px;display:inline-grid;place-items:center;background:var(--jade-wash);color:#188168;font-weight:900}.dot.pending{background:var(--gold-wash);color:#a56d18}.dot.conflict{background:var(--red-wash);color:#b84450}.dot.off{background:#f2f5f7;color:#a2b0bb}.policygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.policy{background:#f8fbfd;border:1px solid var(--line-soft);border-radius:12px;padding:9px}.policy strong{display:block;font-size:9px}.policy span{display:block;color:var(--muted);font-size:7px;margin-top:3px;line-height:1.5}.minirow{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line-soft);padding:8px 0;font-size:8px}.minirow:first-child{border-top:0}.rowicon{width:33px;height:33px;border-radius:10px;background:var(--sky-wash);display:grid;place-items:center;color:#246fc0;font-size:9px;font-weight:900}.notice{border:1px solid #cceee7;background:var(--jade-wash);border-radius:12px;padding:10px;font-size:8px;color:#306d5e;line-height:1.6}.notice.gold{border-color:#f2dfb9;background:var(--gold-wash);color:#8e681e}.notice.red{border-color:#f3cfd4;background:var(--red-wash);color:#98434c}.notice.blue{border-color:#cde4fa;background:var(--sky-wash);color:#39698e}.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space)}.flow{display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:center;gap:8px;padding:14px}.flow .node{min-width:86px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px;text-align:center;font-size:8px}.flow .arr{color:#84a0b5}.switch{width:36px;height:20px;border-radius:999px;background:var(--jade);padding:2px;transition:var(--transition)}.switch:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.13);transform:translateX(16px);transition:var(--transition)}.switch.off{background:#ccd7df}.switch.off:after{transform:translateX(0)}.timeline{display:grid;gap:8px}.event{display:grid;grid-template-columns:76px 24px 1fr;gap:8px;align-items:start}.event time{font-size:7px;color:var(--muted);padding-top:4px}.event .mark{width:10px;height:10px;border-radius:50%;margin:3px auto;background:var(--jade);box-shadow:0 0 0 4px rgba(24,181,143,.09)}.event .body{padding:0 0 10px;border-bottom:1px solid var(--line-soft)}.event .body strong{font-size:9px}.event .body p{margin:2px 0 0;font-size:7px;color:var(--muted)}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space)}.module{border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:16px;padding:13px}.module .top{display:flex;align-items:center;gap:9px}.module .glyph{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,var(--sky-wash),var(--jade-wash));display:grid;place-items:center;font-weight:900;color:#2677c3}.module h4{margin:0;font-size:10px}.module p{font-size:8px;color:var(--muted);line-height:1.55}.module footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.code{font-family:"SFMono-Regular",Consolas,monospace;background:#f6fafc;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:8px;color:#315064;overflow:auto}.spark{height:34px;display:flex;align-items:flex-end;gap:3px}.spark i{display:block;flex:1;min-width:3px;border-radius:3px 3px 0 0;background:linear-gradient(var(--cyan),var(--sky));opacity:.72}.quota{display:grid;grid-template-columns:100px 1fr 54px;gap:8px;align-items:center;font-size:8px}.bar{height:7px;border-radius:99px;background:#edf2f5;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--jade),var(--cyan),var(--sky))}.ornament{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:12px 0}

/* Drawers, dialogs, command palette */
.drawer{position:fixed;right:-390px;top:0;width:min(390px,92vw);height:100vh;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(30,70,100,.12);z-index:80;padding:18px;transition:.22s ease;overflow:auto}.drawer.show{right:0}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.drawer h2{font-size:15px;margin:0}.notification{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.notification .ng{width:32px;height:32px;border-radius:10px;background:var(--sky-wash);display:grid;place-items:center;font-size:9px}.notification strong{font-size:9px}.notification p{font-size:7px;color:var(--muted);margin:3px 0}.palette,.modal-backdrop,.login{position:fixed;inset:0;background:rgba(17,36,56,.22);backdrop-filter:blur(8px);display:none;place-items:center;z-index:100}.palette.show,.modal-backdrop.show,.login.show{display:grid}.palette-box{width:min(620px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 80px rgba(22,55,78,.22);padding:11px}.palette-box input{width:100%;border:0;border-bottom:1px solid var(--line);padding:12px 10px;font-size:12px;outline:0}.palette-list{max-height:390px;overflow:auto;padding-top:7px}.palette-item{display:flex;justify-content:space-between;gap:8px;padding:10px;border-radius:11px;font-size:9px}.palette-item:hover,.palette-item.active{background:var(--sky-wash)}.palette-item small{color:var(--muted)}.modal{width:min(470px,92vw);background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 28px 80px rgba(22,55,78,.22);padding:18px}.modal h3{margin:0 0 7px;font-size:14px}.modal p{font-size:9px;color:var(--muted);line-height:1.65}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17334a;color:#fff;padding:9px 12px;border-radius:10px;font-size:9px;opacity:0;pointer-events:none;transition:.18s;z-index:120}.toast.show{opacity:1;transform:translate(-50%,0)}.login{background:linear-gradient(145deg,#f7fbff,#edf9f9)}.login-card{width:min(900px,92vw);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 30px 90px rgba(27,74,103,.16)}.login-art{position:relative;min-height:470px;padding:24px;background:linear-gradient(150deg,#f7fdff,#e9f9fb);overflow:hidden}.login-art h1{font:800 31px/1.2 "STKaiti","KaiTi",serif;margin-top:70px}.login-art p{max-width:430px;color:var(--muted);font-size:9px;line-height:1.8}.login-mountain{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:.5}.login-form{padding:34px;align-self:center}.login-form h2{margin:0 0 7px;font-size:20px}.login-form>p{font-size:9px;color:var(--muted);line-height:1.6}.passkey,.secondary-login{width:100%;border:0;border-radius:12px;padding:11px;font-size:10px;font-weight:850}.passkey{background:linear-gradient(135deg,var(--sky),var(--cyan),var(--jade));color:#fff}.secondary-login{background:#f4f9fc;color:#3d5e77;border:1px solid var(--line)}.login-divider{text-align:center;color:#9aabba;font-size:8px;margin:15px 0}.login-field{margin-bottom:10px}.login-field label{display:block;font-size:8px;color:#6f8498;margin-bottom:4px}.login-field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px}.login-note{margin-top:12px;padding:9px;border-radius:10px;background:var(--gold-wash);color:#86621f;font-size:7px;line-height:1.6}

/* Utilities */
.mt{margin-top:var(--space)}.mb{margin-bottom:var(--space)}.right{margin-left:auto}.nowrap{white-space:nowrap}.danger-zone{border:1px solid #f2cbd0;background:linear-gradient(145deg,#fff,#fff7f8)}.kill{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #f1c7cc;background:#fff8f9;border-radius:15px;padding:13px}.kill .state{font-size:16px;font-weight:950;color:#bf4350}.kill.off .state{color:#748899}.kill.off{background:#f7f9fa;border-color:#dde6eb}

@media(max-width:1200px){.app-grid{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--sidebar:258px}.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;top:0;width:var(--sidebar);transition:.22s}.sidebar.open{left:0;box-shadow:20px 0 60px rgba(25,58,82,.16)}.menu-btn{display:grid}.profile .pcopy,.status-chip.hide-sm{display:none}.content{padding:15px}.g3,.g2,.policygrid,.split{grid-template-columns:1fr 1fr}.app-grid{grid-template-columns:repeat(2,1fr)}.flow{justify-content:flex-start;overflow:auto}.login-card{grid-template-columns:1fr}.login-art{display:none}}
@media(max-width:620px){.topbar{padding:0 10px}.search .kbd,.status-chip{display:none}.content{padding:11px}.pagehead{display:block}.pagehead .actions{margin-top:10px}.g5,.g4,.g3,.g2,.policygrid,.split,.app-grid,.module-grid{grid-template-columns:1fr}.metric{min-height:98px}.toolbar input{min-width:100%;width:100%}.score{grid-template-columns:90px 1fr}.ring{width:84px;height:84px}.hero-main{padding:18px}.hero-main h2{font-size:23px}.profile{display:none}.span2,.span3{grid-column:auto}}
/* Larger, responsive login workspace for desktop displays. */
.metric .value{font-size:clamp(34px,2.25vw,44px);line-height:1.05;letter-spacing:-.035em}.appstat b{font-size:18px}.policy strong,.minirow b{font-size:12px}.ring b{font-size:30px}.empty-state{grid-column:1/-1;min-height:150px;display:grid;place-content:center;text-align:center;padding:28px;border:1px dashed var(--line);border-radius:16px;background:rgba(247,251,253,.7);color:var(--muted)}.empty-state strong{font-size:18px;color:#36556d}.empty-state p{margin:7px 0 0;font-size:12px;line-height:1.7}.unavailable{min-height:250px;display:grid;place-content:center;text-align:center}.unavailable h2{margin:14px 0 6px;font-size:28px}.unavailable p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.login-card{width:min(1280px,94vw);min-height:min(700px,82vh);grid-template-columns:1.15fr .85fr;border-radius:30px}.login-art{min-height:min(700px,82vh);padding:clamp(32px,3vw,52px)}.login-art .brand{gap:14px}.login-art .brandmark{width:58px;height:58px;border-radius:17px;font-size:25px}.login-art .brand-copy strong{font-size:18px}.login-art .brand-copy small{font-size:11px}.login-art h1{font-size:clamp(38px,2.6vw,50px);margin-top:clamp(80px,12vh,130px)}.login-art p{max-width:600px;font-size:clamp(13px,.9vw,16px)}.login-form{padding:clamp(42px,4vw,70px)}.login-form h2{margin-bottom:9px;font-size:clamp(28px,2vw,38px)}.login-form>p{font-size:13px}.passkey,.secondary-login{border-radius:14px;padding:15px;font-size:14px}.login-divider{font-size:12px;margin:20px 0}.login-field{margin-bottom:14px}.login-field label{font-size:12px;margin-bottom:6px}.login-field input{border-radius:13px;padding:14px;font-size:16px}.login-note{margin-top:16px;padding:13px;border-radius:12px;font-size:11px}
@media(max-width:900px){.login-card{width:min(620px,94vw);min-height:auto;grid-template-columns:1fr}.login-art{display:none}.login-form{padding:clamp(28px,7vw,48px)}}
@media(max-height:760px) and (min-width:901px){.login-card,.login-art{min-height:min(600px,88vh)}.login-art h1{margin-top:50px}.login-form{padding-top:30px;padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition:none!important}

/* XuanCloud COSMOS — high-legibility glass interface */
:root{--bg:#06111f;--bg-soft:#0a1929;--paper:#0d2032;--glass:rgba(11,31,48,.76);--glass-strong:rgba(13,35,53,.94);--ink:#f1f8ff;--ink-2:#c5d9e7;--muted:#9bb4c5;--faint:#7894a8;--line:rgba(171,218,232,.18);--line-soft:rgba(173,220,234,.09);--sky:#4fa8ff;--cyan:#35dae5;--jade:#59e4b7;--teal:#2bc7bd;--sky-wash:rgba(79,168,255,.13);--cyan-wash:rgba(53,218,229,.12);--jade-wash:rgba(89,228,183,.12);--gold-wash:rgba(242,171,66,.13);--red-wash:rgba(232,91,103,.14);--violet-wash:rgba(125,112,239,.15);--shadow:0 24px 70px rgba(0,0,0,.34);--shadow-sm:0 12px 34px rgba(0,0,0,.22);--focus:0 0 0 4px rgba(53,218,229,.18);--r-lg:28px;--r:18px;--r-sm:14px;--sidebar:304px;--topbar:82px;--space:20px}
body{font-size:15px;background:#06111f;color:var(--ink);font-weight:450}.scene{background:radial-gradient(circle at 74% 17%,rgba(34,220,190,.22),transparent 24%),radial-gradient(circle at 36% 72%,rgba(52,133,255,.18),transparent 31%),linear-gradient(145deg,#030a14 0%,#081b2d 48%,#071722 100%)}.scene:before{content:"";position:absolute;inset:-30%;background-image:radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.5px);background-size:74px 74px;opacity:.18;animation:cosmosDrift 26s linear infinite}.scene:after{content:"";position:absolute;width:72vw;height:72vw;right:-22vw;bottom:-49vw;border:1px solid rgba(83,240,202,.34);border-radius:50%;box-shadow:0 0 100px rgba(53,218,229,.22),inset 0 0 90px rgba(46,154,255,.12)}@keyframes cosmosDrift{to{transform:translate3d(74px,74px,0)}}
.shell{background:transparent}.sidebar{background:linear-gradient(180deg,rgba(5,18,31,.9),rgba(7,25,39,.78));border-right:1px solid var(--line);box-shadow:16px 0 60px rgba(0,0,0,.18);backdrop-filter:blur(28px)}.brandmark{box-shadow:0 0 38px rgba(53,218,229,.24)}.brand-copy strong{font-size:20px;letter-spacing:.02em}.brand-copy small{font-size:12px;color:var(--muted)}.workspace{background:rgba(255,255,255,.035);border-color:var(--line);padding:17px}.workspace strong{font-size:14px}.workspace small{font-size:12px}.nav-title{font-size:11px;color:#7299ae;letter-spacing:.16em}.navbtn{min-height:52px;color:#a9c1d1;font-size:15px;padding:10px 13px}.navbtn:hover{background:rgba(74,188,218,.08);color:#fff}.navbtn.active{background:linear-gradient(90deg,rgba(65,186,255,.18),rgba(56,224,190,.07));color:#f5fdff;box-shadow:inset 3px 0 var(--cyan),0 12px 34px rgba(0,0,0,.14)}.navbtn .ni{background:rgba(119,190,220,.09);font-size:12px}.nbadge{font-size:11px}
.topbar{background:rgba(5,18,31,.76);border-color:var(--line);backdrop-filter:blur(26px)}.search{background:rgba(255,255,255,.045);border-color:var(--line)}.search input{color:var(--ink);font-size:14px}.search input::placeholder{color:#7f9caf}.iconbtn,.status-chip{background:rgba(255,255,255,.055);border-color:var(--line);color:var(--ink);font-size:14px}.profile .pcopy strong{font-size:14px}.profile .pcopy small{font-size:11px}
.content{background:linear-gradient(135deg,rgba(10,31,48,.42),rgba(5,18,29,.16));padding:28px 30px 64px}.pagehead{margin-bottom:24px}.eyebrow{font-size:11px;color:var(--cyan);letter-spacing:.19em}.pagehead h1{font-size:clamp(34px,3vw,48px);letter-spacing:-.045em;margin-bottom:10px}.pagehead p{font-size:15px;line-height:1.75;max-width:900px;color:var(--muted)}
.card,.hero-main,.appcard,.module,.drawer,.modal,.palette-box{background:linear-gradient(145deg,rgba(17,45,65,.83),rgba(8,27,43,.72));border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(24px) saturate(125%)}.card:before,.appcard:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 28%)}.card:hover,.appcard:hover{border-color:rgba(77,222,220,.32);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 34px rgba(53,218,229,.06)}.hero{gap:22px}.hero-main{min-height:360px;padding:34px;overflow:hidden}.hero-main h2{font-size:clamp(34px,3.1vw,54px);line-height:1.12;max-width:760px}.hero-main>p{font-size:15px;line-height:1.8;max-width:720px}.hero-kpis span{background:rgba(255,255,255,.055);border-color:var(--line);color:#b8d0df;font-size:12px;padding:8px 12px}.hero-art{filter:saturate(1.2) drop-shadow(0 0 26px rgba(53,218,229,.16));opacity:.58}.card h3,.cardhead h3{font-size:16px}.metric{min-height:144px}.metric .label{font-size:12px;color:#99b7ca}.metric .value{font-size:clamp(40px,3vw,56px)}.metric .trend{font-size:12px}.micon{width:54px;height:54px;border-radius:17px;font-size:13px}.minirow{font-size:14px;padding:12px 0}.minirow b{font-size:14px}.small{font-size:14px}.tiny{font-size:12px}.status{font-size:11px;padding:6px 9px}.btn{font-size:14px;padding:11px 16px;color:#d7e9f3;background:rgba(255,255,255,.055);border-color:var(--line)}.btn.primary{box-shadow:0 12px 32px rgba(25,182,209,.2)}
.toolbar input,.toolbar select,.login-field input{font-size:14px;color:var(--ink);background:rgba(255,255,255,.05);border-color:var(--line)}.toolbar input::placeholder{color:#7895a8}.table{font-size:14px}.table th{font-size:11px;color:#89a9bc;padding:14px 13px}.table td{padding:15px 13px;border-color:var(--line-soft)}.appmeta strong{font-size:15px}.appmeta small{font-size:11px}.appstat b{font-size:22px}.appstat span{font-size:11px}.tag{font-size:11px}.policy strong{font-size:14px}.policy span{font-size:12px}.notice{font-size:13px;line-height:1.75}.code{font-size:13px;line-height:1.7;background:rgba(0,0,0,.2);color:#aeeef1}.empty-state{min-height:190px;background:rgba(0,0,0,.12);border-color:rgba(143,207,222,.2)}.empty-state strong{font-size:22px;color:#eaf8ff}.empty-state p{font-size:14px;color:var(--muted)}.unavailable h2{font-size:32px}.unavailable p{font-size:15px}
.login{background:radial-gradient(circle at 68% 22%,rgba(62,219,190,.18),transparent 30%),linear-gradient(145deg,#030914,#0a2132)}.login-card{background:rgba(7,24,38,.9);border-color:rgba(158,222,232,.25);box-shadow:0 40px 120px rgba(0,0,0,.6)}.login-art{background:radial-gradient(circle at 70% 80%,rgba(59,225,196,.2),transparent 35%),linear-gradient(155deg,#0b2639,#071421)}.login-form{background:rgba(5,18,30,.62)}.login-form>p,.login-field label{color:var(--muted)}.secondary-login{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line)}.login-note{background:rgba(242,171,66,.11);color:#f3cc85}
@media(max-width:1200px){:root{--sidebar:274px}.content{padding:22px}.pagehead h1{font-size:36px}.hero-main h2{font-size:38px}}
@media(max-width:900px){.content{padding:18px}.pagehead p{font-size:14px}.navbtn{font-size:14px}.metric .value{font-size:42px}}
@media(max-width:620px){.content{padding:14px}.pagehead h1{font-size:32px}.hero-main h2{font-size:34px}.hero-main>p{font-size:14px}.card{padding:18px}.metric{min-height:124px}.btn{font-size:13px}}

/* React Bits + Aceternity inspired interaction layer */
.content:before{content:"";position:fixed;z-index:-1;inset:var(--topbar) 0 0 var(--sidebar);background:radial-gradient(640px circle at var(--pointer-x,70%) var(--pointer-y,18%),rgba(48,222,202,.12),transparent 42%),radial-gradient(520px circle at 18% 74%,rgba(80,118,255,.1),transparent 46%);transition:background .18s linear;pointer-events:none}.page.active{animation:pageReveal .48s cubic-bezier(.16,1,.3,1)}@keyframes pageReveal{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.pagehead h1,.hero-main h2{background:linear-gradient(90deg,#fff 0%,#c7f9f0 38%,#75cfff 70%,#fff 100%);background-size:220% auto;color:transparent;background-clip:text;-webkit-background-clip:text;animation:titleFlow 8s linear infinite}@keyframes titleFlow{to{background-position:220% center}}
.hero-main:before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1px;background:linear-gradient(105deg,transparent 5%,rgba(91,231,213,.72),rgba(80,143,255,.56),transparent 70%);background-size:240% 100%;animation:borderTravel 7s linear infinite;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes borderTravel{to{background-position:240% 0}}
.hero-main:after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(80,231,210,.23),rgba(50,138,255,.08) 42%,transparent 68%);filter:blur(4px);animation:auroraPulse 6s ease-in-out infinite alternate;pointer-events:none}@keyframes auroraPulse{to{transform:translate(-90px,75px) scale(1.16);opacity:.64}}
.grid,.app-grid,.module-grid{perspective:1200px}.card,.appcard,.module{--spot-x:50%;--spot-y:50%;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}.card:after,.appcard:after,.module:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--spot-x) var(--spot-y),rgba(76,229,213,.14),transparent 62%);opacity:0;transition:opacity .28s;pointer-events:none}.card:hover:after,.appcard:hover:after,.module:hover:after{opacity:1}.card:hover,.appcard:hover,.module:hover{transform:translateY(-5px);border-color:rgba(100,237,220,.42)}
.metric{overflow:visible}.metric:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--glow-angle,0deg),transparent 0 68%,rgba(76,228,209,.72),rgba(87,143,255,.64),transparent 88%);opacity:.55;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:glowOrbit 7s linear infinite}@property --glow-angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes glowOrbit{to{--glow-angle:360deg}}
.btn.primary{position:relative;overflow:hidden}.btn.primary:after{content:"";position:absolute;inset:-40% auto -40% -55%;width:34%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.56),transparent);animation:buttonShine 4.8s ease-in-out infinite}@keyframes buttonShine{0%,60%{left:-55%}85%,100%{left:130%}}
.navbtn.active .ni,.micon,.appicon{animation:iconFloat 4s ease-in-out infinite}@keyframes iconFloat{50%{transform:translateY(-3px);filter:drop-shadow(0 7px 12px rgba(55,219,208,.2))}}
.empty-state{position:relative;overflow:hidden}.empty-state:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,207,220,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,207,220,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at center,#000,transparent 72%);animation:emptyGrid 12s linear infinite}@keyframes emptyGrid{to{background-position:28px 28px}}
.status.info:after{content:"";width:5px;height:5px;margin-left:2px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:statusPing 2s ease-out infinite}@keyframes statusPing{70%,100%{box-shadow:0 0 0 8px transparent}}
@media(hover:none){.card:hover,.appcard:hover,.module:hover{transform:none}.card:after,.appcard:after,.module:after{display:none}}
@media(prefers-reduced-motion:reduce){.page.active,.pagehead h1,.hero-main h2,.hero-main:before,.hero-main:after,.metric:before,.btn.primary:after,.navbtn.active .ni,.micon,.appicon,.empty-state:before,.status.info:after{animation:none!important}}

/* DAWN theme — energetic, bright and compact */
:root{--bg:#eefbff;--bg-soft:#e5f8f6;--paper:#fff;--glass:rgba(255,255,255,.78);--glass-strong:rgba(255,255,255,.94);--ink:#102b45;--ink-2:#315774;--muted:#66859a;--faint:#8ba4b4;--line:rgba(75,151,178,.2);--line-soft:rgba(75,151,178,.1);--sky:#278cff;--cyan:#08c5dc;--jade:#18c995;--teal:#0eb8a8;--sky-wash:rgba(39,140,255,.1);--cyan-wash:rgba(8,197,220,.1);--jade-wash:rgba(24,201,149,.11);--gold-wash:rgba(255,173,51,.13);--red-wash:rgba(239,85,102,.1);--violet-wash:rgba(119,104,239,.1);--shadow:0 24px 70px rgba(32,101,130,.12);--shadow-sm:0 12px 34px rgba(39,104,133,.1);--sidebar:232px}
body{background:#eefbff;color:var(--ink)}.scene{background:radial-gradient(circle at 82% 12%,rgba(41,219,190,.28),transparent 25%),radial-gradient(circle at 31% 79%,rgba(70,145,255,.2),transparent 32%),linear-gradient(145deg,#f7fdff,#e8fbf6 52%,#eef6ff)}.scene:before{background-image:radial-gradient(circle,rgba(36,133,164,.35) 0 1px,transparent 1.5px);opacity:.18}.scene:after{border-color:rgba(24,201,149,.34);box-shadow:0 0 100px rgba(8,197,220,.18),inset 0 0 90px rgba(39,140,255,.1)}
.sidebar{background:linear-gradient(180deg,rgba(249,254,255,.93),rgba(235,251,248,.88));box-shadow:14px 0 48px rgba(36,101,128,.09)}.brand{padding-left:14px;padding-right:14px}.brand-copy strong{font-size:17px}.brand-copy small{font-size:10px}.workspace{margin-left:12px;margin-right:12px;padding:13px}.nav-group{padding-left:9px;padding-right:9px}.navbtn{min-height:46px;font-size:14px;padding:8px 10px}.navbtn.active{background:linear-gradient(90deg,rgba(39,140,255,.13),rgba(24,201,149,.1));color:#12658c}.navbtn:hover{background:rgba(39,140,255,.07);color:#145a78}
.topbar{background:rgba(255,255,255,.78)}.search,.iconbtn,.status-chip{background:rgba(255,255,255,.72);color:var(--ink)}.content{background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(226,250,246,.3))}.content:before{inset:var(--topbar) 0 0 var(--sidebar);background:radial-gradient(640px circle at var(--pointer-x,70%) var(--pointer-y,18%),rgba(24,201,149,.13),transparent 42%),radial-gradient(520px circle at 18% 74%,rgba(39,140,255,.11),transparent 46%)}
.pagehead h1,.hero-main h2{background:linear-gradient(90deg,#143d61,#168fbe 38%,#0db992 70%,#143d61);background-size:220% auto;background-clip:text;-webkit-background-clip:text}.card,.hero-main,.appcard,.module,.drawer,.modal,.palette-box{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(242,253,252,.76));box-shadow:var(--shadow-sm)}.card:hover,.appcard:hover,.module:hover{box-shadow:0 20px 50px rgba(30,116,143,.16),0 0 34px rgba(8,197,220,.08)}.hero-main:after{background:radial-gradient(circle,rgba(24,201,149,.23),rgba(39,140,255,.08) 42%,transparent 68%)}.hero-kpis span{background:rgba(255,255,255,.72);color:#40677f}.toolbar input,.toolbar select,.login-field input{background:rgba(255,255,255,.84);color:var(--ink)}.btn{background:rgba(255,255,255,.8);color:#315a72}.empty-state{background:rgba(255,255,255,.48)}.empty-state strong{color:#244f69}.code{background:#eef8fb;color:#225f78}
.login{background:radial-gradient(circle at 72% 18%,rgba(24,201,149,.2),transparent 30%),linear-gradient(145deg,#f4fcff,#e5faf4)}.login-card{background:rgba(255,255,255,.9);border-color:var(--line);box-shadow:0 40px 120px rgba(31,101,126,.22)}.login-art{background:radial-gradient(circle at 70% 80%,rgba(24,201,149,.2),transparent 35%),linear-gradient(155deg,#f5fdff,#e7faf7)}.login-form{background:rgba(255,255,255,.65)}.secondary-login{background:#f1f8fb;color:var(--ink)}
@media(max-width:1200px){:root{--sidebar:220px}}