.app-shell {background:radial-gradient(ellipse at 95% 0,#172136,transparent 55%),#0d121d;color:#edf2ff}
.app-main {width:100%;min-width:0;max-width:1520px;margin-inline:auto}
.app-sidebar {background:linear-gradient(160deg,#161f30,#101622 70%);border-color:#253047}
.app-sidebar .brand {display:flex;align-items:center;gap:10px;color:#f1f5ff;font-size:22px;font-weight:700;letter-spacing:-.055em}
.app-sidebar .is-active {box-shadow:inset 3px 0 #aa96ff;background:#202941}
.ws-switch,.ws-meter,.guild-card,.module-list .module-row {border:1px solid #2b374c;border-radius:15px;background:linear-gradient(135deg,#1c2434,#151d2a);box-shadow:0 1px 0 #ffffff06 inset}
.ws-switch {padding:12px;margin-bottom:16px}.ws-switch summary {cursor:pointer;list-style:none}.ws-switch strong,.ws-switch a{display:block;padding:4px;overflow-wrap:anywhere}.ws-switch a {font-size:.84rem}
.ws-eyebrow,.ws-state,.ws-badge,#ws-result {font:600 11px/1.6 system-ui;letter-spacing:.12em;color:#a7b5cf}.ws-eyebrow{display:block}
.app-breadcrumb {border-bottom:1px solid #263147;padding-bottom:18px;margin-bottom:30px;color:#aebbd2}
.ws-hero,.ws-library,.ws-dialog-head,.ws-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ws-hero {padding:18px 0 32px;border-bottom:1px solid #293247}.ws-hero h1{font-size:clamp(38px,5vw,66px);letter-spacing:-.06em;line-height:1.1;margin:12px 0}.ws-hero h1 span{color:#5cdae6}.ws-hero p,.ws-library p,.module-list p{color:#aab6ca}
.ws-meter{min-width:220px;padding:20px}.ws-meter b{font-size:34px}.ws-meter progress{width:100%;height:5px;accent-color:#79badf}
.ws-library {margin:30px 0 16px}.ws-library h2{font-size:22px}.ws-library input,.ws-controls button,.ws-config,.ws-dialog button:not(.btn){background:#172133;color:#d3def2;border:1px solid #324057;border-radius:8px;padding:9px 13px;font:inherit}.ws-controls{justify-content:flex-start;gap:6px;margin:16px 0}.ws-controls button,.ws-config{cursor:pointer;font-size:13px}.ws-controls button[aria-pressed=true]{background:#2b3351;border-color:#737ab1}.ws-controls label{margin-left:auto;font-size:13px}
.module-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.module-list .module-row{padding:20px;display:flex;flex-direction:column;position:relative;gap:12px;align-items:flex-start}.module-list .module-row[hidden],.guild-card[hidden]{display:none}.module-row__top form{position:absolute;right:16px;top:19px}.ws-badge{display:flex;align-items:center;gap:8px;letter-spacing:.02em}.ws-badge svg{color:#9daeff;background:#232d42;border-radius:8px;width:32px;height:32px;padding:6px}.ws-state{margin-top:auto;padding-top:10px;width:100%;border-top:1px solid #2a3242;letter-spacing:.02em}.is-enabled .ws-state{color:#7ae0d9}.ws-dialog{color:#e9effb;background:#131b29;border:1px solid #394663;border-radius:18px;width:min(850px,94vw);max-height:86vh;margin:auto;padding:0}.ws-dialog::backdrop{background:#030914bf;backdrop-filter:blur(5px)}.ws-dialog-head,.ws-fields{padding:24px}.ws-dialog-head{background:#1b2639;border-bottom:1px solid #334059;position:sticky;top:0;z-index:1}.ws-dialog-head h2{margin:4px 0}.ws-dialog button{cursor:pointer}#premium {margin-top:40px}
@media(min-width:861px){.app-sidebar{position:sticky;top:0;max-height:100vh;overflow:auto}}
@media(max-width:1150px){.module-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.app-sidebar{align-items:center}.app-sidebar>*{flex-shrink:0}.app-sidebar .ws-switch,.app-sidebar>.ws-eyebrow{display:none}}
@media(max-width:600px){.module-list{grid-template-columns:1fr}.ws-meter{width:100%}.ws-library input{width:100%}.ws-controls label{margin-left:0}}
.app-main{background:transparent}.ws-login{display:grid;place-items:center;min-height:55vh}.ws-login .login-card{background:transparent;text-align:center;border:0;box-shadow:none;width:min(100%,560px)}.ws-login .login-card img{margin:0 auto 24px}.ws-login .btn{width:auto;display:inline-flex}.btn--primary{background:linear-gradient(110deg,#7264ce,#4c77cf);color:white}

/* Light from the workspace shows through the rail and its inset panels. */
.app-shell {
  background: radial-gradient(ellipse at 0 220px,#35314e 0,transparent 430px),
    radial-gradient(ellipse at 82% 8%,#1c2b43 0,transparent 600px),#0d121d;
}
.app-sidebar {
  background: linear-gradient(150deg,rgba(32,42,63,.65),rgba(15,22,36,.80));
  backdrop-filter:blur(22px) saturate(135%);
  border-color:rgba(169,189,232,.16);
  box-shadow:inset -1px 0 rgba(255,255,255,.035);
}
.ws-switch,.ws-meter,.guild-card,.module-list .module-row,.premium-card {
  background:linear-gradient(130deg,rgba(42,54,77,.64),rgba(20,29,45,.83));
  border-color:rgba(159,185,225,.20);
}
.ws-dialog-head {background:rgba(27,39,61,.91);backdrop-filter:blur(16px)}
.ws-dialog::backdrop {background:#060b16b8;backdrop-filter:blur(7px)}
.module-list .module-row,.guild-card {position:relative;isolation:isolate}
.module-list .module-row::before,.guild-card::before {
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(175px circle at var(--light-x,50%) var(--light-y,25%),rgba(152,173,255,.17),transparent);
  opacity:0;pointer-events:none;
}
@media (hover:hover) and (pointer:fine) {
  .module-list .module-row:hover,.guild-card:hover {border-color:#586a89!important}
  .module-list .module-row:hover::before,.guild-card:hover::before {opacity:1}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .module-list .module-row,.guild-card {transition:transform .2s ease,border-color .2s ease}
  .module-list .module-row:hover,.guild-card:hover {transform:translateY(-4px)}
}
.module-row .toggle{position:relative}
.module-row .toggle input[type=checkbox]{inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
.module-row .toggle input[type=checkbox]:disabled{cursor:not-allowed}