@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#100f13;--panel:#151419;--line:#292630;--muted:#9a97a6;--text:#f7f5fc;--purple:#9b83ff;--purple2:#8063f5;--green:#75e2ad;--red:#ff7c8b}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#29233d 0,transparent 50%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input{font:inherit}.shell{max-width:1320px;margin:auto;padding:28px 36px 18px}.nav{height:66px;border:1px solid #302d39;border-radius:22px;background:rgba(20,19,25,.9);box-shadow:0 16px 45px #0005;display:flex;align-items:center;padding:9px 12px 9px 20px;gap:35px;position:sticky;top:14px;z-index:5;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;white-space:nowrap}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--purple);color:#100e16;font-weight:900;font-size:18px}.nav nav{display:flex;gap:7px;align-items:center;flex:1}.nav nav a{padding:13px 17px;border-radius:13px;color:#b9b5c4;font-weight:600;white-space:nowrap}.nav nav a:hover,.nav nav a.active{background:var(--purple);color:#15121e}.nav-right{display:flex;align-items:center;gap:12px}.nav-right form{margin:0}.user-pill{color:#c7c2d1;font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:13px;border:1px solid transparent;font-weight:700;cursor:pointer;white-space:nowrap}.btn-primary{background:var(--purple);color:#15121e}.btn-primary:hover{background:#b1a0ff}.btn-ghost{background:#201e26;border-color:#393542;color:#eee}.full{width:100%;margin-top:18px}.hero{padding:82px 14px 58px;position:relative;overflow:hidden}.hero-dashboard{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:68px}.eyebrow{color:var(--purple);font-size:11px;font-weight:800;letter-spacing:2px;margin:0 0 17px}.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:8px;box-shadow:0 0 12px #75e2ad88}.hero h1,.auth-card h1{font-size:clamp(38px,5vw,62px);line-height:1.05;letter-spacing:-2.7px;margin:0 0 17px;font-weight:800}.hero h1 span,.auth-card h1 span,.auth-art h2 span{color:var(--purple)}.lead{max-width:580px;color:#b2aebc;font-size:15px;line-height:1.7;margin:0}.hero-side{min-width:255px;padding:24px;border:1px solid #37313f;border-radius:20px;background:linear-gradient(135deg,#211d2a,#151419)}.mini-label{display:block;color:var(--muted);font-size:10px;letter-spacing:1.7px;margin-bottom:13px}.hero-side strong{display:block;font-size:18px;margin-bottom:8px}.small{font-size:12px}.muted{color:var(--muted)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 17px}.section-head .eyebrow{margin-bottom:7px}.section-head h2,.create-form h2,.users-table h2{font-size:23px;letter-spacing:-.7px;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat-card{border:1px solid var(--line);border-radius:21px;background:linear-gradient(145deg,#17161c,#131216);padding:22px;min-width:0;transition:border-color .2s}.stat-card:hover,.service-card:hover{border-color:#51466e}.stat-card.wide{grid-column:span 2}.stat-top{display:flex;align-items:center;justify-content:space-between}.stat-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid #50436e;border-radius:11px;background:#292238;color:var(--purple);font-size:18px}.status-chip{font-size:10px;letter-spacing:.7px;font-weight:800;padding:7px 9px;border-radius:8px;background:#28232d;color:#c5becf}.status-chip.good{background:#163126;color:var(--green)}.status-chip.bad{background:#381e27;color:var(--red)}.status-chip.neutral{color:#b7a7ff}.stat-label{font-size:13px;color:#a7a2b1;margin:20px 0 8px}.stat-value{font-size:38px;letter-spacing:-1.7px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value small{font-size:12px;letter-spacing:0;color:#9b96a4;font-weight:500;margin-left:7px}.stat-value.compact{font-size:27px;margin-top:26px;min-height:45px}.meter{height:5px;border-radius:9px;background:#2b2831;margin:17px 0 15px;overflow:hidden}.meter span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#7b5ce8,#b09aff);transition:width .4s}.stat-foot{display:flex;justify-content:space-between;gap:8px;color:#85818e;font-size:10px}.stat-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.service-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:17px;background:#151419;min-width:0}.service-logo{width:42px;height:42px;border-radius:13px;background:#272b32;display:grid;place-items:center;font-weight:800;color:#e9e6ef;flex-shrink:0}.service-logo.purple{background:#2c2342;color:var(--purple)}.service-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.service-copy strong{font-size:13px}.service-copy span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.service-status{font-size:11px;color:var(--muted);white-space:nowrap}.good-text{color:var(--green)}.bad-text{color:var(--red)}.note{margin:20px 2px 0;color:#77727f;font-size:11px;line-height:1.7;max-width:850px}.auth-wrap{display:grid;grid-template-columns:minmax(300px,450px) 1fr;gap:55px;align-items:center;max-width:1050px;margin:70px auto 50px;padding:0 20px}.auth-card{border:1px solid var(--line);border-radius:24px;padding:35px;background:#151419}.auth-card h1{font-size:38px;letter-spacing:-1.7px}.auth-form{display:flex;flex-direction:column;margin-top:27px}.auth-form label,.create-form label{color:#c6c1cf;font-size:12px;margin:15px 0 8px}.auth-form input,.create-form input{width:100%;background:#0f0e12;color:#fff;border:1px solid #37333f;border-radius:12px;padding:14px;outline:none}.auth-form input:focus,.create-form input:focus{border-color:var(--purple)}.auth-card>.small{margin-top:22px}.auth-art{min-height:340px;padding:40px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(130deg,#27213b,#151419 75%);border:1px solid #373044}.auth-art .orb{position:absolute;width:240px;height:240px;border-radius:50%;background:#8d72ff24;filter:blur(4px);right:-60px;top:-65px}.auth-art h2{font-size:37px;letter-spacing:-1.8px;line-height:1.15;margin:0 0 15px;position:relative}.auth-art>p:last-child{color:#a8a2b4;line-height:1.7;max-width:300px}.flash{margin:18px 0;padding:13px 17px;border:1px solid #554675;border-radius:12px;background:#211b2e;color:#d9d0ff}.user-layout{display:grid;grid-template-columns:310px 1fr;gap:16px;margin-bottom:40px}.create-form h2,.users-table h2{margin:8px 0 22px}.create-form .eyebrow,.users-table .eyebrow{margin-bottom:8px}.users-table{overflow:hidden}.count{font-size:12px;color:var(--purple);background:#2c2342;padding:5px 8px;border-radius:8px;margin-left:6px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#8e8998;font-weight:600}th,td{padding:15px 10px;border-bottom:1px solid #2b2831;white-space:nowrap}td{color:#ded9e7}.role{background:#24212a;border-radius:7px;padding:6px 8px;color:#c3bdcc;font-size:10px}.role.owner{color:#c5b5ff;background:#302644}.text-btn{background:none;border:0;color:var(--purple);cursor:pointer}.text-btn.danger{color:#ff8b98}footer{padding:30px 3px 5px;color:#66616e;font-size:9px;letter-spacing:1.5px}footer span{color:var(--purple);padding:0 6px}
@media(max-width:900px){.shell{padding:16px}.nav{gap:15px}.nav nav a{padding:12px}.nav nav a span{display:none}.user-pill{display:none}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-dashboard{padding-top:50px}.hero-side{min-width:210px}.user-layout{grid-template-columns:1fr}.auth-wrap{gap:20px}.auth-art{padding:25px}}
@media(max-width:620px){.shell{padding:10px}.nav{height:auto;min-height:58px;padding:8px 10px;gap:10px;border-radius:17px}.brand{font-size:13px;gap:6px}.brand-mark{width:27px;height:27px}.nav nav{gap:1px}.nav nav a{padding:10px 8px;font-size:12px}.nav-right .btn{padding:10px;font-size:11px}.hero{padding:55px 5px 30px}.hero-dashboard{display:block}.hero h1{font-size:42px;letter-spacing:-2px}.hero-side{margin-top:25px}.stats-grid{gap:9px}.stat-card{padding:14px;border-radius:16px}.stat-value{font-size:29px}.stat-value small{display:block;margin:3px 0 0;font-size:10px}.stat-value.compact{font-size:21px}.stat-foot{font-size:9px;flex-wrap:wrap}.stat-card.wide{grid-column:span 2}.service-grid{grid-template-columns:1fr}.service-card{padding:14px}.service-status{font-size:10px}.auth-wrap{display:block;margin:35px auto;padding:0 4px}.auth-card{padding:24px}.auth-art{margin-top:15px;min-height:240px}.auth-art h2{font-size:30px}.section-head h2{font-size:20px}.user-layout{gap:10px}}


/* IceWorld motion polish */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-smooth:cubic-bezier(.22,.8,.25,1)}
html{scroll-behavior:smooth}
body{isolation:isolate;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(75px);opacity:.14;will-change:transform}
body:before{width:360px;height:360px;top:12%;left:-230px;background:#8063f5;animation:ambient-drift 19s ease-in-out infinite alternate}
body:after{width:300px;height:300px;right:-190px;bottom:4%;background:#6245b9;animation:ambient-drift 23s ease-in-out infinite alternate-reverse}
@keyframes ambient-drift{from{transform:translate3d(0,-20px,0) scale(.92)}to{transform:translate3d(65px,35px,0) scale(1.12)}}
@keyframes fade-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes soft-pulse{0%,100%{box-shadow:0 0 0 0 #75e2ad00}50%{box-shadow:0 0 0 5px #75e2ad0d}}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-180% 0}}
.shell{animation:fade-in .55s ease both}
.nav{animation:fade-up .65s var(--ease-out) both;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease-out)}
.nav:hover{border-color:#484052;box-shadow:0 18px 48px #0006}
.brand-mark{transition:transform .35s var(--ease-out),box-shadow .35s ease}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 24px #9b83ff50}
.nav nav a{position:relative;transition:color .25s ease,background .3s ease,transform .3s var(--ease-out)}
.nav nav a:hover{transform:translateY(-1px)}
.btn{transition:transform .25s var(--ease-out),background .25s ease,border-color .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{box-shadow:0 5px 18px #9b83ff1c}
.btn-primary:hover{box-shadow:0 8px 28px #9b83ff3b}
.hero-dashboard{animation:fade-up .7s .06s var(--ease-out) both}
.hero h1 span{background:linear-gradient(100deg,#b5a4ff 5%,#8e70ff 45%,#c7bbff 75%,#8e70ff);background-size:220% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient-flow 8s linear infinite}
@keyframes gradient-flow{to{background-position:220% center}}
.hero-side{transition:transform .45s var(--ease-out),border-color .3s ease,box-shadow .3s ease;animation:fade-up .7s .18s var(--ease-out) both}
.hero-side:hover{transform:translateY(-4px);border-color:#67558f;box-shadow:0 18px 45px #0003}
.section-head{animation:fade-up .55s .12s var(--ease-out) both}
.stats-grid .stat-card{opacity:0;animation:fade-up .7s var(--ease-out) forwards;transition:transform .35s var(--ease-out),border-color .3s ease,background .3s ease,box-shadow .35s ease}
.stats-grid .stat-card:nth-child(1){animation-delay:.10s}
.stats-grid .stat-card:nth-child(2){animation-delay:.17s}
.stats-grid .stat-card:nth-child(3){animation-delay:.24s}
.stats-grid .stat-card:nth-child(4){animation-delay:.31s}
.stats-grid .stat-card:nth-child(5){animation-delay:.38s}
.stat-card:hover{transform:translateY(-5px);border-color:#51466e;box-shadow:0 15px 36px #0003;background:linear-gradient(145deg,#1b1922,#141318)}
.stat-icon{transition:transform .35s var(--ease-out),background .3s ease,box-shadow .3s ease}
.stat-card:hover .stat-icon{transform:translateY(-2px) rotate(-5deg);box-shadow:0 0 22px #9b83ff20;background:#302641}
.stat-value{transition:color .25s ease}
.stat-card:hover .stat-value{color:#fff}
.meter span{position:relative;overflow:hidden}
.meter span:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff30 48%,transparent 70%);background-size:220% 100%;animation:shimmer 3.4s ease-in-out infinite}
.status-chip.good{animation:soft-pulse 3s ease-in-out infinite}
.service-grid .service-card{opacity:0;animation:fade-up .65s var(--ease-out) forwards;transition:transform .35s var(--ease-out),border-color .3s ease,box-shadow .3s ease,background .3s ease}
.service-grid .service-card:nth-child(1){animation-delay:.18s}
.service-grid .service-card:nth-child(2){animation-delay:.27s}
.service-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0003;background:#19171e}
.service-logo{transition:transform .35s var(--ease-out)}
.service-card:hover .service-logo{transform:scale(1.06) rotate(-4deg)}
.note{animation:fade-in .8s .4s both}
.auth-card{animation:fade-up .7s var(--ease-out) both;transition:border-color .3s ease,box-shadow .3s ease}
.auth-card:focus-within{border-color:#5d4a82;box-shadow:0 15px 50px #0002}
.auth-art{animation:fade-up .8s .12s var(--ease-out) both}
.auth-art .orb{animation:orb-float 9s ease-in-out infinite alternate}
@keyframes orb-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-32px,28px,0) scale(1.18)}}
.auth-form input,.create-form input{transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.auth-form input:focus,.create-form input:focus{background:#141219;box-shadow:0 0 0 4px #9b83ff16}
.user-layout .stat-card{animation:fade-up .65s var(--ease-out) both}
.user-layout .stat-card:nth-child(2){animation-delay:.12s}
table tbody tr{transition:background .2s ease}
table tbody tr:hover{background:#ffffff04}
.text-btn{transition:color .2s ease,transform .2s ease}
.text-btn:hover{transform:translateY(-1px);color:#c5b5ff}
.flash{animation:fade-up .4s var(--ease-out) both}
::selection{background:#9b83ff55;color:#fff}
:focus-visible{outline:2px solid #b6a5ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}}


/* IceWorld motion system — page transitions, category slide, and layout polish */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-smooth: cubic-bezier(.65,0,.35,1); }
html { scroll-behavior: smooth; }
body { min-height:100vh; }
.shell { animation: shell-enter .68s var(--ease-out) both; }
@keyframes shell-enter { from { opacity:0; transform:translateY(9px); filter:blur(3px) } to { opacity:1; transform:translateY(0); filter:blur(0) } }
main { animation: page-enter .58s var(--ease-out) both; }
@keyframes page-enter { from { opacity:0; transform:translate3d(0,14px,0) scale(.995); filter:blur(2px) } to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0) } }
.nav { transition:background .3s, border-color .3s, box-shadow .3s, transform .35s var(--ease-out); }
.nav:hover { border-color:#40384f; box-shadow:0 18px 48px #0006; }
.nav nav a { position:relative; isolation:isolate; transition:color .25s, background .32s var(--ease-out), transform .32s var(--ease-out); }
.nav nav a::after { content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:linear-gradient(120deg,#b4a3ff,#8e72ff); opacity:0; transform:scale(.92); transition:opacity .28s,transform .32s var(--ease-out); }
.nav nav a.active::after { opacity:1; transform:scale(1); }
.nav nav a:hover { transform:translateY(-1px); color:#fff; }
.nav nav a.active:hover { color:#171321; }
.btn { position:relative; overflow:hidden; transition:transform .25s var(--ease-out), box-shadow .25s, background .25s, border-color .25s; }
.btn::after { content:""; position:absolute; top:-80%; left:-45%; width:28%; height:260%; background:linear-gradient(90deg,transparent,#ffffff42,transparent); transform:rotate(22deg) translateX(-220%); transition:transform .7s var(--ease-out); pointer-events:none; }
.btn:hover::after { transform:rotate(22deg) translateX(650%); }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px #9b83ff22; }
.btn:active { transform:translateY(0) scale(.98); }
.stat-card,.service-card,.auth-card,.auth-art { animation:card-enter .7s var(--ease-out) both; }
.stats-grid .stat-card:nth-child(1){animation-delay:.04s}.stats-grid .stat-card:nth-child(2){animation-delay:.09s}.stats-grid .stat-card:nth-child(3){animation-delay:.14s}.stats-grid .stat-card:nth-child(4){animation-delay:.19s}.stats-grid .stat-card:nth-child(5){animation-delay:.24s}
.service-grid .service-card:nth-child(2){animation-delay:.1s}
@keyframes card-enter { from { opacity:0; transform:translateY(18px) scale(.985) } to { opacity:1; transform:translateY(0) scale(1) } }
.stat-card { transition:transform .4s var(--ease-out), border-color .35s, background .35s, box-shadow .4s; }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 16px 38px #0003,0 0 0 1px #9b83ff0c; }
.service-card { transition:transform .35s var(--ease-out),border-color .3s,background .3s; }
.service-card:hover { transform:translateY(-3px); background:#19171f; }
.stat-icon,.service-logo { transition:transform .4s var(--ease-out),background .3s,box-shadow .3s; }
.stat-card:hover .stat-icon,.service-card:hover .service-logo { transform:rotate(-7deg) scale(1.07); box-shadow:0 0 24px #9b83ff18; }
.meter span { position:relative; overflow:hidden; }
.meter span::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent,#ffffff40,transparent); transform:translateX(-100%); animation:meter-shine 2.8s ease-in-out infinite; }
@keyframes meter-shine { 55%,100% { transform:translateX(150%) } }
.live-dot { animation:live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0%{box-shadow:0 0 0 0 #75e2ad80} 70%{box-shadow:0 0 0 7px #75e2ad00} 100%{box-shadow:0 0 0 0 #75e2ad00} }
.hero-side { transition:transform .4s var(--ease-out),border-color .3s; }
.hero-side:hover { transform:translateY(-3px); border-color:#51436d; }
input { transition:border-color .25s,box-shadow .25s,background .25s; }
input:focus { box-shadow:0 0 0 4px #9b83ff19; background:#121016; }
table tbody tr { transition:background .2s; }
table tbody tr:hover { background:#ffffff05; }
.flash { animation:flash-enter .4s var(--ease-out) both; }
@keyframes flash-enter { from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)} }
/* Native View Transitions where supported */
@supports (view-transition-name: root) {
  ::view-transition-old(root) { animation: vt-out .2s var(--ease-smooth) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
  @keyframes vt-out { to { opacity:0; transform:translateY(-5px) scale(.995); filter:blur(2px) } }
  @keyframes vt-in { from { opacity:0; transform:translateY(12px) scale(.99); filter:blur(3px) } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0) } }
}
body.is-leaving main { animation: page-leave .2s var(--ease-smooth) both; }
@keyframes page-leave { to { opacity:0; transform:translateY(-8px) scale(.995); filter:blur(2px) } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}
@media(max-width:620px) {
  .nav nav a:hover { transform:none; }
  .stat-card:hover,.service-card:hover,.hero-side:hover { transform:none; }
}