:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#eaf3ff;background:#081321;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#12345b 0,#081321 50%)}button,input,select{font:inherit}button{cursor:pointer}.shell{width:min(1120px,100%);margin:auto;padding:28px 18px 46px}.auth-card{width:min(430px,100%);margin:5vh auto 0;text-align:center;padding:34px 32px;background:rgba(13,29,49,.96);border:1px solid #24527e;border-radius:18px;box-shadow:0 20px 70px #0008}.logo{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid #4ca3ff;box-shadow:0 0 28px #2285e866}.auth-card h1{font-size:29px;margin:16px 0 5px}.subtitle{color:#9ab9d8;margin:0 0 20px}.copyright{font-size:13px;color:#6e8eae;margin:27px 0 0}.message{min-height:22px;color:#73baff;white-space:pre-wrap}.tabs{display:flex;border-bottom:1px solid #284968;margin:20px 0}.tab{flex:1;background:transparent;color:#91aac2;border:0;border-bottom:2px solid transparent;padding:10px}.tab.active{color:#56adff;border-bottom-color:#2991eb}.auth-form{display:grid;gap:14px;text-align:left}.auth-form label,label{display:flex;flex-direction:column;gap:7px;color:#a8c2dc;font-size:14px}input,select{width:100%;color:#eaf3ff;background:#0a1b2d;border:1px solid #315778;border-radius:7px;padding:10px;outline:none}input:focus,select:focus{border-color:#45a9ff;box-shadow:0 0 0 2px #238de933}.check{flex-direction:row!important;align-items:center;gap:8px}.check input{width:auto}.primary,.outline,.link-button{border-radius:7px;padding:10px 18px;border:1px solid #3198ef}.primary{color:#fff;background:#1974c8}.primary:hover{background:#258ee8}.outline,.link-button{color:#83c6ff;background:transparent}.link-button{border:0;margin-top:20px}.app-view{display:block}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0 20px;font-size:20px}.topbar span{font-size:14px;color:#8eaecc;margin-left:13px}.panel{background:#0d1d31;border:1px solid #244b70;border-radius:12px;padding:22px;margin:16px 0}.panel h2{font-size:19px;margin:0 0 15px}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}fieldset{border:1px solid #315778;border-radius:8px;margin:20px 0;padding:12px}legend{color:#8fcaff;padding:0 7px}#groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}#groups label{flex-direction:row;align-items:center;background:#102943;padding:9px;border-radius:6px}.section-heading{display:flex;align-items:center;justify-content:space-between}article{border-top:1px solid #234461;padding:16px 0}.status{display:inline-block;color:#a9d8ff;background:#153e64;border-radius:14px;padding:4px 10px;font-size:13px}.account-card{padding:10px 0}.password-input-wrap{position:relative;display:inline-flex;align-items:center;width:220px}.password-input-wrap input{width:100%;padding-right:38px}.password-toggle{position:absolute;right:5px;border:0;background:transparent;color:#80b9e8;padding:5px 8px;line-height:1}.password-toggle:hover{color:#fff}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#a8c4df;font-size:12px}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.controls input{width:220px}.password-row{display:flex;gap:9px;flex-wrap:wrap}.password-row select{max-width:220px}.password-row input{max-width:300px}.admin-user-card h3{margin:0 0 8px;color:#eaf3ff}.admin-user-card p{margin:7px 0;color:#a8c2dc}.admin-user-password{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.admin-user-password input{max-width:330px}.admin-password-panel{margin-bottom:16px}.panel-hint{margin:-7px 0 16px;color:#7898b8;font-size:13px}.admin-table-head,.admin-user-row{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(150px,1fr) minmax(250px,1.7fr) minmax(160px,1.1fr);gap:14px;align-items:center}.admin-table-head{padding:0 14px 9px;color:#7898b8;font-size:13px;border-bottom:1px solid #244b70}.admin-user-card{padding:10px 14px;border-bottom:1px solid #1d3c5b}.admin-user-card:last-child{border-bottom:0}.admin-user-row{padding:0}.admin-user-name{color:#eaf3ff;font-size:16px;font-weight:650;overflow-wrap:anywhere}.admin-password-status,.admin-login-time{color:#a8c2dc;font-size:13px}.admin-user-password{display:flex;gap:8px;align-items:center;min-width:0}.admin-user-password input{max-width:none;min-width:0;flex:1}.admin-user-password button{white-space:nowrap}.admin-account-list{margin:8px 0 0;padding:8px 12px;background:#0a192a;border:1px solid #1e405f;border-radius:8px}.admin-account-list h4{margin:0 0 6px;color:#8fcaff;font-size:13px;font-weight:600}.admin-account-grid{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(150px,1fr) minmax(110px,.7fr);gap:6px 14px;align-items:center;font-size:13px}.admin-account-grid .muted,.admin-empty{color:#7898b8}.admin-account-grid .account-status{color:#a9d8ff}.admin-empty{font-size:13px}[hidden]{display:none!important}@media(max-width:760px){.admin-table-head{display:none}.admin-user-row{grid-template-columns:1fr 1fr;gap:10px}.admin-user-name,.admin-user-password{grid-column:1/-1}.admin-login-time{grid-column:1/-1}.admin-account-grid{grid-template-columns:1fr 1fr}.admin-account-grid .account-status{grid-column:1/-1}}@media(max-width:520px){.auth-card{padding:28px 20px}.shell{padding:15px 10px}.panel{padding:16px}.topbar{font-size:18px}.admin-user-row{grid-template-columns:1fr}.admin-user-name,.admin-user-password,.admin-user-login-time{grid-column:auto}.admin-account-grid{grid-template-columns:1fr}}
:root{--admin-gap:10px}.admin-table-head,.admin-user-row{grid-template-columns:minmax(100px,.8fr) minmax(120px,.9fr) minmax(190px,1.5fr) minmax(140px,1fr);gap:var(--admin-gap)}.admin-user-card{padding-top:8px;padding-bottom:8px}.admin-user-password{margin-top:0}.admin-account-list{margin-top:6px;padding:7px 10px}.admin-account-list h4{margin-bottom:4px}.admin-account-grid{gap:4px 10px}.admin-login-time{white-space:nowrap;font-variant-numeric:tabular-nums}.password-input-wrap{flex-shrink:0}.admin-user-password .password-input-wrap{flex:1;min-width:0}.admin-user-password .password-input-wrap input{width:100%}@media(max-width:760px){.admin-user-password .password-input-wrap{width:min(100%,330px)}.admin-login-time{white-space:normal}}
.account-meta{display:grid;gap:4px;margin:8px 0 10px;color:#a8c2dc;font-size:14px}.account-meta-item{display:flex;gap:6px;align-items:baseline}.account-meta-item span{color:#7898b8}.account-meta-item strong{color:#eaf3ff;font-weight:600;overflow-wrap:anywhere}.account-action-hint{display:block;width:100%;color:#8fcaff;font-size:12px;margin-top:2px}.status-running{color:#8ff0ad;background:#124b32;border:1px solid #237b4b}.account-card .controls{margin-top:10px}.account-card .controls button{min-width:68px}
.account-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.account-header h3{margin:0;min-width:0;overflow-wrap:anywhere;font-size:21px}.account-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.account-config-actions{justify-content:flex-start}
.account-heading-main{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}.account-heading-main h3{flex:0 1 auto}.account-renew-button{padding:5px 10px!important;min-height:30px;font-size:12px!important;line-height:1}.account-live-status{display:inline-block;padding:4px 9px;border-radius:12px;font-size:12px;line-height:1.2;white-space:nowrap}.account-live-running{color:#8ff0ad;background:#124b32;border:1px solid #237b4b}.account-live-stopped{color:#ffb1b1;background:#4a2028;border:1px solid #a54b57}.account-live-pending{color:#ffd994;background:#4b3918;border:1px solid #97732c}
dialog{color:#eaf3ff;background:#0d1d31;border:1px solid #315778;border-radius:10px;padding:20px;max-width:min(560px,calc(100% - 24px));width:100%}dialog::backdrop{background:#0009}.dispatch-hero-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;max-height:50vh;overflow:auto}.dispatch-hero-option{display:flex;flex-direction:row;align-items:center;gap:8px;padding:9px;background:#102943;border-radius:6px}.dispatch-hero-option input{width:auto}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.admin-account-grid .account-status.status-running{display:inline-block;width:max-content;padding:3px 9px;border-radius:12px;color:#8ff0ad;background:#124b32;border:1px solid #237b4b}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px}.topbar-account{justify-self:start;font-size:14px;color:#9fc6e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.topbar-title{grid-column:2;justify-self:center;white-space:nowrap}.topbar>button{grid-column:3;justify-self:end}@media(max-width:520px){.topbar-account{font-size:12px}.topbar-title{font-size:18px}}
.topbar-account{font-size:16px}.account-card>h3{font-size:21px}@media(max-width:520px){.topbar-account{font-size:14px}}
.topbar-title{font-size:28px;line-height:1.2}.check input,#groups input[type=checkbox]{width:auto;flex:0 0 auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;accent-color:#31c875}.check input:focus,#groups input[type=checkbox]:focus{outline:none;box-shadow:none;border-color:transparent}.section-heading #user-refresh{color:#72e0a1;border-color:#2fbd70;background:transparent}.section-heading #user-refresh:hover{color:#fff;background:#17663d;border-color:#45dd87}@media(max-width:520px){.topbar-title{font-size:22px}}
.admin-topbar .topbar-title{font-size:32px}.admin-password-panel .password-row select{max-width:190px}.admin-password-panel .password-row input{max-width:240px}.admin-user-row{grid-template-columns:minmax(100px,.8fr) minmax(120px,.9fr) minmax(190px,1.5fr) minmax(140px,1fr) minmax(100px,.7fr)}.admin-delete-user{white-space:nowrap;color:#ffb1b1;border-color:#a54b57}.admin-delete-user:hover{color:#fff;background:#873240;border-color:#d86674}
.admin-management-grid{display:grid;gap:10px}.admin-management-grid .password-row{gap:7px}.admin-management-grid .password-row input,.admin-management-grid .password-row select{max-width:210px;padding:8px;border-radius:10px}.admin-management-grid .password-row button{padding:8px 13px;border-radius:12px;font-size:13px}.admin-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.admin-list-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid #2b587d;border-radius:12px;background:#102943;font-size:13px}.admin-list-item strong{color:#eaf3ff}.admin-list-item span{color:#8faec8;font-size:12px}.admin-primary-tag{color:#7de5a1!important}.admin-topbar .outline,.admin-management-grid button,.admin-user-row button{border-radius:12px}
.section-heading #admin-refresh{color:#72e0a1;border-color:#2fbd70;background:transparent}.section-heading #admin-refresh:hover{color:#fff;background:#17663d;border-color:#45dd87}
.admin-table-head,.admin-user-row{grid-template-columns:minmax(180px,1fr) minmax(270px,1.5fr) minmax(190px,1fr);gap:18px}.admin-table-head{font-size:16px;font-weight:650;color:#a9c9e7;padding-bottom:12px}.admin-user-card{padding:14px 14px}.admin-user-name{font-size:18px}.admin-login-time{font-size:16px;white-space:nowrap}.admin-user-password input{font-size:15px}.admin-user-password button{font-size:15px;padding:9px 15px}@media(max-width:760px){.admin-table-head{display:none}.admin-user-row{grid-template-columns:1fr 1fr;gap:12px}.admin-user-name,.admin-user-password{grid-column:1/-1}.admin-login-time{grid-column:1/-1;white-space:normal}}
.admin-user-row{grid-template-columns:minmax(140px,.8fr) minmax(390px,2fr) minmax(190px,1fr)}.admin-user-password .admin-delete-user{color:#ffb1b1;border-color:#a54b57}.admin-user-password .admin-delete-user:hover{color:#fff;background:#873240;border-color:#d86674}
.idle-groups{display:block;width:100%;margin:10px 0}.idle-groups .idle-groups-frame{display:block;width:100%;min-width:0;margin:0;padding:12px;border:1px solid #45a9ff;border-radius:8px;background:#0a1b2d}.idle-groups-frame>legend{padding:0 9px;color:#8fcaff;font-size:16px;font-weight:650}.idle-groups .idle-category-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.idle-groups .idle-category-row fieldset{margin:0;min-width:0;padding:12px}.idle-groups fieldset>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}.idle-groups label{display:flex;flex-direction:row;align-items:center;gap:8px;background:#102943;padding:9px;border-radius:6px}
.idle-groups input[type=checkbox]{width:auto;flex:0 0 auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;accent-color:#31c875}.idle-groups input[type=checkbox]:focus{outline:none;box-shadow:none}
@media(max-width:900px){.admin-table-head,.admin-user-row{grid-template-columns:minmax(76px,.65fr) minmax(0,2fr) minmax(125px,1fr);gap:8px}.admin-user-password{gap:6px}.admin-user-password input{flex:1 1 100px}.admin-user-password button{padding:8px 10px;font-size:13px}}
@media(max-width:760px){.admin-table-head{display:none}.admin-user-row{grid-template-columns:1fr 1fr;gap:10px}.admin-user-name,.admin-user-password{grid-column:1/-1}.admin-login-time{grid-column:1/-1;white-space:normal}}

/* Mobile layout: keep the viewport fixed while allowing normal vertical scrolling. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{touch-action:pan-y}
@media(max-width:600px){
  .shell{width:100%;padding:12px 10px 28px}
  .auth-card{width:100%;margin:16px auto 0;padding:24px 16px;border-radius:14px}
  .auth-card h1{font-size:25px}
  .logo{width:76px;height:76px}
  .auth-form{gap:11px}
  input,select,.primary,.outline,.link-button{min-height:42px;padding:9px 11px}
  .topbar{width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:5px 0 12px}
  .topbar-account{min-width:0;max-width:100%;font-size:12px}
  .topbar-title,.admin-topbar .topbar-title{font-size:19px;max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  .topbar>button{padding:8px 10px;min-height:36px}
  .panel{width:100%;padding:14px;margin:10px 0;border-radius:10px}
  .panel h2{font-size:17px;margin-bottom:10px}
  .fields{grid-template-columns:1fr;gap:10px}
  fieldset{margin:13px 0 15px;padding:9px}
  #groups{grid-template-columns:1fr 1fr;gap:6px}
  #groups label{padding:8px 6px;font-size:12px;min-width:0}
  .section-heading{gap:8px;align-items:center}
  .section-heading h2{font-size:16px}
  .account-meta-item{flex-wrap:wrap;gap:3px 6px}
  .account-meta-item strong{max-width:100%;word-break:break-all}
  .account-card>h3{font-size:17px}
  .controls{gap:6px}
  .controls button{flex:1 1 0;min-width:0}
  .admin-user-row{grid-template-columns:1fr;gap:8px}
  .admin-user-name,.admin-user-password,.admin-login-time{grid-column:auto}
  .admin-user-password{width:100%;flex-wrap:wrap}
  .admin-user-password input{width:100%;flex:1 1 100%;min-width:0}
  .admin-user-password button{flex:1 1 auto}
  .admin-account-grid{grid-template-columns:1fr;gap:5px}
  .admin-account-grid .account-status{grid-column:auto}
  .password-row{display:grid;grid-template-columns:1fr;gap:7px}
  .password-row input,.password-row select,.password-row button{max-width:none;width:100%}
  .admin-list{display:grid;gap:7px}
  .admin-list-item{flex-wrap:wrap;padding:8px}
  .admin-list-item input{flex:1 1 140px;min-width:0}
  .admin-list-item button{flex:0 1 auto}
}

/* Best-effort overlay when a docked browser inspection pane changes the
   viewport. It is only a deterrent; browser controls are outside page control. */
#inspection-guard{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  text-align:center;
  color:#f4eaff;
  background:#090611;
}
#inspection-guard strong{font-size:20px;color:#e8b8ff}
#inspection-guard span{font-size:14px;color:#bca8cf}

/* Self-configuration option layout: keep the hero rail compact and make
   each nested table use the requested number of choices per row.  These
   selectors are intentionally scoped to the configuration dialog and placed
   last so they win over the older responsive presets above. */
#cultivation-skill-dialog #cultivation-skill-picker{
  grid-template-columns:minmax(52px,62px) minmax(0,1fr)!important;
}
#cultivation-skill-dialog #cultivation-skill-heroes button{
  width:100%!important;
  min-width:0!important;
  padding:5px 2px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
#cultivation-skill-dialog #cultivation-skill-list .skill-choice-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .formation-options-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
#cultivation-skill-dialog #cultivation-skill-list .adjutant-options-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .equip-options-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-picker,
#cultivation-skill-dialog #cultivation-skill-list .kismet-options-list,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-picker{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-picker>.skill-category,
#cultivation-skill-dialog #cultivation-skill-list .kismet-options-list>.skill-category,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-picker>.skill-category{
  width:100%;
  min-width:0;
}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-options{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .beast-options-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .sp-army-options-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .god-options-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .god-skill-options-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#cultivation-skill-dialog #cultivation-skill-list .scheme-options-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
#cultivation-skill-dialog #cultivation-skill-list .scheme-choice-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}
#cultivation-skill-dialog #cultivation-skill-list .scheme-choice-grid .dispatch-hero-option{min-width:0;overflow-wrap:anywhere}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option{
  min-width:0;
  overflow-wrap:anywhere;
}
@media(max-width:600px){
  #cultivation-skill-dialog #cultivation-skill-picker{
    grid-template-columns:minmax(48px,58px) minmax(0,1fr)!important;
  }
  #cultivation-skill-dialog #cultivation-skill-list .skill-choice-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .adjutant-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .equip-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .beast-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .sp-army-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-skill-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .scheme-choice-grid .dispatch-hero-option{
    min-width:0;
    padding-left:2px;
    padding-right:2px;
    font-size:10px;
  }
}


/* Final account/dialog layout pass. The heading keeps the stable status
   directly below the logged-in account name; controls are split into a large
   start/stop row and a secondary reset/remove row. */
.account-heading-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.account-heading-main h3{width:100%}
.account-header{align-items:flex-start}
.account-live-status{width:max-content}
.account-config-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.account-primary-actions,.account-secondary-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.account-primary-actions button{min-width:110px;min-height:42px;font-size:15px;font-weight:650}
.account-secondary-actions button{min-width:86px}
.account-create-notes{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1;color:#a5a4aa;line-height:1.35}
.account-create-notes small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-create-notes small:nth-child(2){padding-left:5em}
.account-create-panel .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-add-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.account-add-row .add-account-button{flex:0 0 auto}
.account-add-row .account-create-notes{align-items:flex-start;text-align:left}
.activation-field{width:min(330px,36%)}
.dispatch-hero-option--with-power{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.hero-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-option-power{color:#aaa2b8;font-size:.88em;white-space:nowrap;font-variant-numeric:tabular-nums}

dialog[open]#cultivation-dialog,
dialog[open]#dispatch-hero-dialog{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 16px)}
#cultivation-dialog form,#dispatch-hero-dialog form{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
#cultivation-dialog h2,#dispatch-hero-dialog h2{flex:0 0 auto}
#cultivation-dialog .panel-hint,#dispatch-hero-dialog .panel-hint{flex:0 0 auto}
#cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
#cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{flex:0 0 auto;position:relative;z-index:1;margin-top:8px;padding-top:10px;background:#11151a}

@media(max-width:600px){
  .account-create-panel .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-create-heading{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start;gap:6px;margin-bottom:8px}
  .account-create-heading>div:first-child{min-width:0}
  .account-create-heading h2{font-size:16px!important;white-space:nowrap}
  .account-add-row{align-items:center;gap:8px;margin-top:6px}
  .account-add-row .account-create-notes{grid-column:auto;grid-row:auto;order:initial;width:auto;flex:1;padding:0}
  .account-create-notes small{font-size:10px;white-space:normal}
  .activation-field{grid-column:2;grid-row:1;width:100%;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 5px}
  .activation-field input{min-width:0}
  .activation-field small{grid-column:1/-1}
  .account-header{display:block}
  .account-heading-main{gap:3px}
  .account-heading-main h3{font-size:17px;line-height:1.3}
  .account-live-status{font-size:11px;padding:3px 7px}
  .account-primary-actions,.account-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px}
  .account-primary-actions button,.account-secondary-actions button{width:100%;min-width:0}
  .account-primary-actions button{min-height:42px;font-size:14px}
  .account-secondary-actions button{min-height:35px;font-size:12px;padding:6px 7px}
  .account-config-actions{gap:5px}
  .account-card .controls>button{width:100%}
  .dispatch-hero-option--with-power{grid-template-columns:auto minmax(0,1fr);gap:4px}
  .hero-option-power{grid-column:2;font-size:10px;line-height:1.1}
  dialog[open]#cultivation-dialog,dialog[open]#dispatch-hero-dialog{width:calc(100% - 14px);max-width:calc(100% - 14px);height:min(680px,calc(100dvh - 14px));padding:11px}
  #cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{padding-bottom:4px}
  #cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{margin-top:5px;padding-top:7px}
}

/* Keep account-card actions compact. The large two-row treatment is not
   suitable for the account list on phones. */
.account-card .account-config-actions{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap}
.account-card .account-config-actions button{min-width:68px;min-height:34px;padding:6px 9px;font-size:12px;font-weight:400}
/* In self configuration, heroes stay in a vertical rail and treasure/seal
   choices use the same dense multi-column grid as the treasure table. */
#cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;max-height:none}
#cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto;width:100%;min-width:0;text-align:left;white-space:normal}
#cultivation-skill-dialog .soul-treasure-options,
#cultivation-skill-dialog .god-seal-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:none;overflow:visible}
@media(max-width:600px){
  .account-card .account-config-actions{display:flex;flex-direction:row;gap:4px;flex-wrap:wrap}
  .account-card .account-config-actions button{min-width:0;min-height:34px;flex:0 1 auto;padding:6px 8px;font-size:11px}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex-direction:column;flex:0 0 27%;width:auto;max-width:27%;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
  #cultivation-skill-dialog #cultivation-skill-heroes button{width:100%;min-width:0;min-height:34px;padding:5px 4px;font-size:12px;text-align:left;white-space:normal}
  #cultivation-skill-dialog .soul-treasure-options,
  #cultivation-skill-dialog .god-seal-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  #cultivation-skill-dialog .soul-treasure-options .dispatch-hero-option,
  #cultivation-skill-dialog .god-seal-options .dispatch-hero-option{min-height:44px;padding:5px 3px;font-size:11px}
}

/* Final mobile precedence: the configuration picker keeps the hero rail on
   the left even though older rules define a horizontal rail earlier. */
@media(max-width:600px){
  #cultivation-skill-dialog #cultivation-skill-picker{display:grid;grid-template-columns:minmax(78px,27%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:7px}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex-direction:column;flex:0 0 auto;width:auto;max-width:none;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;gap:5px;padding:0 3px 0 0}
  #cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto;width:100%;min-width:0;min-height:34px;padding:5px 4px;text-align:left;white-space:normal}
}

/* Last cascade layer for the account list and self-configuration picker. */
.account-card .account-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:wrap}
.account-card .account-actions button{min-width:68px;min-height:34px;padding:6px 9px;font-size:12px;font-weight:400}
@media(max-width:600px){
  .account-card .account-actions{gap:4px}
  .account-card .account-actions button{min-width:0;min-height:34px;flex:0 1 auto;padding:6px 8px;font-size:11px}
  #cultivation-skill-dialog #cultivation-skill-picker{display:grid;grid-template-columns:minmax(78px,27%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:7px}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex-direction:column;flex:0 0 auto;width:auto;max-width:none;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;gap:5px;padding:0 3px 0 0}
  #cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto;width:100%;min-width:0;min-height:34px;padding:5px 4px;text-align:left;white-space:normal}
  #cultivation-skill-dialog .soul-treasure-options,#cultivation-skill-dialog .god-seal-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
}

/* Final account-card precedence after the older mobile rules. */
.account-card .account-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:wrap}
.account-card .account-actions button{width:auto!important;min-width:68px;min-height:34px;flex:0 1 auto;padding:6px 9px;font-size:12px}
@media(max-width:600px){
  .account-card .account-actions{gap:4px}
  .account-card .account-actions button{min-width:0;min-height:34px;padding:6px 8px;font-size:11px}
}

/* Account list buttons remain compact and inline, including configuration
   actions below the account metadata. */
.account-card .account-actions,
.account-card .controls.account-config-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:wrap}
.account-card .account-actions button,
.account-card .controls.account-config-actions button{width:auto!important;min-width:68px;min-height:34px;flex:0 1 auto;padding:6px 9px;font-size:12px}
@media(max-width:600px){
  .account-card .account-actions,
  .account-card .controls.account-config-actions{gap:4px}
  .account-card .account-actions button,
  .account-card .controls.account-config-actions button{min-width:0;min-height:34px;padding:6px 8px;font-size:11px}
}

/* Refined neo-noir purple UI with full-card green selection feedback. */
:root{
  --purple-950:#0b0715;
  --purple-900:#120d20;
  --purple-850:#18112b;
  --purple-800:#211735;
  --purple-700:#34264f;
  --purple-500:#7254db;
  --purple-400:#9b82ff;
  --purple-300:#ded5ff;
  --purple-text:#f3efff;
  --purple-muted:#a99cbe;
  --select-green:#36d994;
  --select-green-dark:#153e31;
}
body{background:radial-gradient(ellipse at 50% -15%,#29204a 0,#140f24 42%,#0b0715 100%)}
.auth-card,.panel{background:linear-gradient(145deg,#171129f5,#110c1ff5);border:1px solid #32264b;border-radius:18px;box-shadow:0 18px 55px #05030b99}
.auth-card{border-radius:24px}
fieldset,.admin-account-list,.admin-user-card,.admin-list-item,.account-card,.activation-code-row{border-color:#2c2143;border-radius:14px}
input,select,textarea{background:#0e0a19;border-color:#34284e;border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:#8d74f3;box-shadow:0 0 0 3px #8065e522}
button,.primary,.outline,.link-button{border-radius:999px;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
button:active{transform:translateY(1px)}
button.primary{background:linear-gradient(135deg,#8063ec,#6545cf);border-color:#927bf0;box-shadow:0 5px 18px #6143c833}
button.primary:hover{background:linear-gradient(135deg,#967cff,#7554e1);border-color:#b2a1ff;box-shadow:0 7px 22px #7757e655}
button.outline,.link-button{background:#171128;border-color:#453663;color:#d6caff}
button.outline:hover,.link-button:hover{background:#251a3d;border-color:#8068c8;color:#fff}
.tab{border-radius:999px}
dialog{border-radius:20px;border-color:#453663;background:linear-gradient(145deg,#19132b,#100b1d)}
.skill-category,.skill-category details{border-color:#302448;border-radius:13px;background:#120d20}
.skill-category summary{border-radius:12px;color:#dfd5ff}
.idle-groups label,#groups label,.dispatch-hero-option{
  position:relative;
  color:#ddd5f1;
  background:linear-gradient(145deg,#1b1530,#171126);
  border:1px solid #302448;
  border-radius:13px;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.idle-groups label:hover,#groups label:hover,.dispatch-hero-option:hover{background:#251b3a;border-color:#685397;transform:translateY(-1px)}
.idle-groups label:has(input:checked),#groups label:has(input:checked),.dispatch-hero-option:has(input:checked){
  color:#f1fff8;
  background:linear-gradient(145deg,#176b4b,#124b37);
  border-color:#39d995;
  box-shadow:0 0 0 1px #39d99555 inset,0 5px 18px #16a66b22;
}
.idle-groups label:has(input:checked):hover,#groups label:has(input:checked):hover,.dispatch-hero-option:has(input:checked):hover{background:linear-gradient(145deg,#1b805a,#15573f)}
.idle-groups label input[type="checkbox"],#groups label input[type="checkbox"],.dispatch-hero-option input[type="checkbox"],.dispatch-hero-option input[type="radio"]{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  min-width:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  clip-path:inset(50%)!important;
  border:0!important;
  opacity:0!important;
}
.idle-groups label:has(input:focus-visible),#groups label:has(input:focus-visible),.dispatch-hero-option:has(input:focus-visible),.check:has(input:focus-visible){outline:2px solid #a58cff;outline-offset:3px}
.check{width:max-content;max-width:100%;padding:8px 12px;border:1px solid #302448;border-radius:999px;background:#171128}
.check:has(input:checked){color:#f1fff8;background:#15553d;border-color:#39d995}
.check input[type="checkbox"]{accent-color:#39d995}
.account-live-running{color:#a8ffd3;background:#124b35;border-color:#2acb83}
.account-live-stopped{color:#ffc4cd;background:#49202d;border-color:#be536b}
.account-live-pending{color:#e6dcff;background:#36264f;border-color:#765bbb}
.admin-account-field .account-live-running{color:#a8ffd3;background:#124b35;border-color:#2acb83}
.admin-account-field .account-live-stopped{color:#ffc4cd;background:#49202d;border-color:#be536b}
@media(max-width:600px){
  .panel{border-radius:15px}
  .account-list-actions button,.account-card .controls button{border-radius:999px}
}

/* Unified purple-black visual theme. Keep status colors semantic: running
   remains green and stopped remains red while the surrounding controls use
   the application's purple palette. */
:root{
  --purple-950:#090611;
  --purple-900:#100a1d;
  --purple-850:#171027;
  --purple-800:#211638;
  --purple-700:#36225a;
  --purple-500:#8d5ce6;
  --purple-400:#b487ff;
  --purple-300:#d8c5ff;
  --purple-text:#eee7ff;
  --purple-muted:#ad9bc9;
}
html{background:var(--purple-950)}
body{color:var(--purple-text);background:var(--purple-950)}
.shell{background:transparent}
.auth-card,.panel{color:var(--purple-text);background:var(--purple-900);border-color:var(--purple-700);box-shadow:0 14px 40px #05020caa}
.auth-card{box-shadow:0 20px 65px #05020dcc}
.auth-card h1,.panel h2,.panel h3,.dialog-actions h2{color:var(--purple-text)}
.subtitle,.panel-hint,.copyright,.activation-field small,.account-feature-selection-hint{color:var(--purple-muted)}
.message{color:var(--purple-400)}
.logo{border-color:var(--purple-500);box-shadow:0 0 24px #8d5ce655}
.tabs{border-color:var(--purple-700)}
.tab{color:var(--purple-muted)}
.tab.active{color:var(--purple-300);border-bottom-color:var(--purple-500)}
label,legend,.account-meta-item span{color:var(--purple-muted)}
input,select,textarea{color:var(--purple-text);background:var(--purple-950);border-color:var(--purple-700)}
input::placeholder{color:#796a96}
input:focus,select:focus,textarea:focus{border-color:var(--purple-400);box-shadow:0 0 0 2px #8d5ce633}
button.primary{color:#fff;background:#7141bd;border-color:#9a6be8;box-shadow:0 4px 12px #5b2d9c33}
button.primary:hover{background:#8654d6;border-color:#b487ff}
button.outline,.link-button{color:var(--purple-300);background:#160d28;border-color:var(--purple-700)}
button.outline:hover,.link-button:hover{color:#fff;background:#2a1a48;border-color:var(--purple-400)}
button:disabled{opacity:.52;filter:saturate(.55);cursor:not-allowed}
.topbar{border-bottom:1px solid #2b1c48}
.topbar-account,.admin-login-time{color:var(--purple-muted)}
.topbar-title{color:var(--purple-300)}
.section-heading{border-color:var(--purple-700)}
article{border-color:#2b1c48}
fieldset{background:#120b20;border-color:var(--purple-700)}
fieldset fieldset{background:#180f2b}
legend{color:var(--purple-300)}
.idle-groups label,#groups label,.dispatch-hero-option{color:var(--purple-text);background:#1b1030;border:1px solid #302052}
.idle-groups label:hover,#groups label:hover,.dispatch-hero-option:hover{background:#281743;border-color:var(--purple-500)}
.dispatch-hero-option:has(input:checked),.idle-groups label:has(input:checked),#groups label:has(input:checked){background:#2d1a4d;border-color:var(--purple-400);box-shadow:0 0 0 1px #8d5ce655 inset}
details{border-color:var(--purple-700);background:#130b22}
details>summary{color:var(--purple-300);background:#1a0f2d}
details>summary:hover{background:#281743;color:#fff}
dialog{color:var(--purple-text);background:var(--purple-900);border-color:var(--purple-500);box-shadow:0 20px 70px #05020dcc}
dialog::backdrop{background:#05020ccc}
.dialog-actions{border-top:1px solid #2b1c48;padding-top:12px}
.account-meta-item strong,.account-header h3{color:var(--purple-text)}
.account-feature{color:var(--purple-300);background:#25163f;border-color:#4a3172}
.account-list-actions #user-refresh{color:#c5aaff;border-color:#7650b8;background:#160d28}
.account-list-actions #user-refresh:hover{color:#fff;background:#2a1a48;border-color:var(--purple-400)}
.account-live-pending{color:#e7d7ff;background:#3a235b;border-color:#8154bf}
.activation-history-heading{margin-top:14px;gap:12px}
.activation-history-heading h3{margin:0}
.activation-history-heading button{padding:5px 12px;font-size:12px}
.admin-user-card,.admin-account-list,.activation-code-row{background:#130b22;border-color:#332151}
.admin-primary-tag{color:var(--purple-300);background:#291744;border-color:#6a45a4}
input[type="checkbox"],input[type="radio"]{appearance:none;-webkit-appearance:none;width:18px!important;height:18px;flex:0 0 18px;padding:0;margin:0;border:1px solid #7650b8;border-radius:5px;background:#0c0715;display:inline-grid;place-content:center;box-shadow:none}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]::before{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);transition:transform .12s ease}
input[type="radio"]::before{content:"";width:8px;height:8px;border-radius:50%;background:#c09aff;transform:scale(0);transition:transform .12s ease}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:#7141bd;border-color:#b487ff;box-shadow:0 0 0 3px #8d5ce622}
input[type="checkbox"]:checked::before,input[type="radio"]:checked::before{transform:scale(1)}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--purple-400);outline-offset:2px}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{background:#17101f;border-color:#49375f}
.check{color:var(--purple-muted)}
hr{border:0;border-top:1px solid #2b1c48}
pre,.activation-code-result{color:#d7c6f5;background:#0d0817;border-color:#4a3172}
@media(max-width:600px){
  .auth-card,.panel{border-radius:10px}
  .panel{padding:14px}
  .dialog-actions{padding-top:9px}
}

@media(max-width:600px){
  .admin-list{grid-template-columns:minmax(0,1fr);width:100%}
  .admin-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;width:100%;padding:11px;border-radius:9px}
  .admin-list-details{grid-column:1/-1;gap:4px}
  .admin-list-time{white-space:normal;overflow-wrap:anywhere}
  .admin-primary-tag{grid-column:2;grid-row:1}
  .admin-list-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;width:100%}
  .admin-list-actions input{grid-column:1/-1;width:100%;max-width:none}
  .admin-list-actions button{width:100%;min-width:0;padding:8px 9px;font-size:13px}
  .admin-account-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
  .admin-account-item{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0 10px;border-radius:8px}
  .admin-account-field{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:8px;padding:9px 0;border-bottom:1px solid #1e405f}
  .admin-account-field:last-child{border-bottom:0}
  .admin-account-label{font-size:13px}
  .admin-account-field strong,.admin-account-field>span:not(.admin-account-label){min-width:0;font-size:14px;line-height:1.4}
  .admin-user-card{padding:12px 8px}
  .admin-user-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .admin-user-password{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;width:100%;margin:0}
  .admin-user-password input{grid-column:1/-1;width:100%;max-width:none}
  .admin-user-password button{width:100%;min-width:0;padding:8px 5px;font-size:13px}
  .admin-login-time{font-size:13px}
}

@media(min-width:601px){
  .admin-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
  .admin-list-item{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,1.5fr);align-items:center;gap:8px 16px;padding:12px 14px;border:1px solid #2b587d;border-radius:10px;background:#102943}
  .admin-list-details{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;min-width:0}
  .admin-list-details strong{font-size:15px}
  .admin-list-time{white-space:normal;overflow-wrap:anywhere}
  .admin-primary-tag{grid-column:1;grid-row:2;justify-self:start}
  .admin-list-actions{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
  .admin-list-actions input{width:100%;max-width:none;min-width:0}
  .admin-list-actions button{white-space:nowrap}
  .admin-account-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
  .admin-account-item{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:9px 11px;border:1px solid #1e405f;border-radius:7px;background:#0b1d30}
  .admin-account-field{display:flex;flex-direction:column;gap:4px;min-width:0}
  .admin-account-label{color:#7898b8;font-size:12px}
  .admin-account-field strong,.admin-account-field>span:not(.admin-account-label){color:#d8ebff;overflow-wrap:anywhere;line-height:1.4}
}
.admin-account-field .account-live-status{display:inline-block;width:max-content;max-width:100%;padding:3px 8px;border-radius:12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-account-field .account-live-running{color:#8ff0ad;background:#124b32;border:1px solid #237b4b}
.admin-account-field .account-live-stopped{color:#ffb1b1;background:#4a2028;border:1px solid #a54b57}
.admin-account-field .account-live-pending{color:#e7d7ff;background:#3a235b;border:1px solid #8154bf}
.activation-code-result{padding:12px;border:1px solid #3179ad;border-radius:8px;background:#09192a;color:#a8e2ff;font-size:14px;user-select:all}
.activation-code-list{display:grid;gap:6px;max-height:260px;overflow:auto}
.activation-code-row{padding:8px 10px;border:1px solid #1e405f;border-radius:7px;background:#0a192a;color:#a8c2dc;font-size:13px;overflow-wrap:anywhere}
.account-list-actions{display:flex;align-items:center;gap:8px}
.account-list-actions #user-renew,.account-list-actions #user-refresh{padding:6px 10px;font-size:13px;min-height:32px}
#renew-dialog{max-width:min(440px,calc(100% - 24px))}
#renew-dialog h2{text-align:center;margin:0 0 12px}
#renew-form{display:grid;gap:12px}
#renew-form .renew-note{margin:0;color:#9ab9d8;font-size:13px;line-height:1.55}
#renew-form label{gap:6px}
#renew-form .dialog-actions{margin-top:4px}
.subscription-remaining{font-variant-numeric:tabular-nums;color:#8ff0ad!important}
/* Self cultivation skill picker: selected heroes stay visible while one hero's skills are edited. */
#cultivation-skill-picker{display:grid;grid-template-columns:minmax(120px,0.32fr) minmax(0,1fr);gap:12px;height:min(58vh,560px);max-height:calc(100vh - 170px);min-height:260px;align-items:stretch}
#cultivation-skill-heroes{display:flex;flex-direction:column;gap:6px;overflow:auto;padding-right:4px}
#cultivation-skill-heroes button{text-align:left;white-space:normal;width:100%}
#cultivation-skill-heroes button.active{border-color:#7fc8ff;background:#1c4c72;color:#fff}
#cultivation-skill-list{min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;padding-right:4px;align-self:stretch}
.skill-plan-hero{display:block}
.skill-table-title{margin:12px 0 4px;color:#7fc8ff;font-size:19px;font-weight:700}
.skill-table-note{margin:0 0 8px;color:#8da9c3;font-size:12px;line-height:1.5}
.skill-category{margin:8px 0;border:1px solid #234968;border-radius:6px;background:#0b1d30}
.skill-category summary{display:list-item;position:relative;z-index:1;cursor:pointer;touch-action:manipulation;user-select:none;padding:9px 11px;color:#d8ebff;font-weight:600;list-style-position:inside;pointer-events:auto}
.skill-category[open] summary{border-bottom:1px solid #234968}
.skill-category .dispatch-hero-list{padding:9px 11px}
.skill-options-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.skill-options-grid .dispatch-hero-option{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:5px;min-height:62px;padding:8px 4px;line-height:1.2}
.skill-options-grid .dispatch-hero-option span{display:block;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;writing-mode:horizontal-tb}
.skill-options-grid .dispatch-hero-option input{order:2;flex:0 0 auto}
/* Star choices use a readable vertical list so Chinese names never collapse
   into narrow, character-by-character columns. */
.star-quadrant>.skill-options-grid{display:flex;flex-direction:column;gap:8px}
.star-quadrant>.skill-options-grid>.star-quality>.skill-options-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.star-quadrant .star-quality .dispatch-hero-option{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;min-height:44px;padding:9px 11px;gap:10px}
.star-quadrant .star-quality .dispatch-hero-option span{max-width:none;overflow-wrap:anywhere;word-break:keep-all}
.star-quadrant .star-quality .dispatch-hero-option input{order:2}
@media(max-width:600px){#cultivation-skill-picker{grid-template-columns:minmax(78px,27%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:7px}#cultivation-skill-heroes{flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:0}#cultivation-skill-heroes button{min-width:0;min-height:34px;padding:5px 4px;font-size:12px;line-height:1.3}}
#cultivation-skill-dialog{height:min(760px,calc(100vh - 24px));max-height:calc(100vh - 24px);overflow:hidden}
#cultivation-skill-dialog form{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
#cultivation-skill-dialog #cultivation-skill-picker{flex:1 1 0;min-height:0;height:auto;max-height:none;overflow:hidden}
#cultivation-skill-dialog .dialog-actions{flex:none;margin-top:16px}
#cultivation-skill-dialog #cultivation-skill-heroes,
#cultivation-skill-dialog #cultivation-skill-list,
#cultivation-skill-dialog .skill-category .dispatch-hero-list{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#cultivation-skill-dialog #cultivation-skill-list{
  min-height:0;
  height:auto;
  max-height:none;
  overflow-y:scroll;
  overflow-x:hidden;
  align-self:stretch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#cultivation-skill-dialog .skill-category .dispatch-hero-list{
  max-height:none;
  overflow:visible;
}
#cultivation-skill-dialog #cultivation-skill-heroes::-webkit-scrollbar,
#cultivation-skill-dialog #cultivation-skill-list::-webkit-scrollbar,
#cultivation-skill-dialog .skill-category .dispatch-hero-list::-webkit-scrollbar{display:none}
#cultivation-dialog{max-width:min(760px,calc(100% - 24px))}
#cultivation-dialog #cultivation-list{grid-template-columns:repeat(3,minmax(0,1fr));scrollbar-width:none;-ms-overflow-style:none}
#cultivation-dialog #cultivation-list::-webkit-scrollbar{display:none}
#cultivation-skill-dialog .skill-options-grid{scrollbar-width:none;-ms-overflow-style:none}
#cultivation-skill-dialog .skill-options-grid::-webkit-scrollbar{display:none}
@media(max-width:600px){
  #cultivation-dialog #cultivation-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
  #cultivation-dialog #cultivation-list .dispatch-hero-option{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:58px;padding:5px 2px;text-align:center;font-size:12px;line-height:1.2;overflow-wrap:anywhere;}
}
@media(max-width:600px){.account-header{align-items:start;gap:5px}.account-heading-main{gap:4px}.account-heading-main h3{font-size:16px;line-height:1.4}.account-renew-button{padding:4px 7px!important;font-size:11px!important}.account-live-status{font-size:11px;padding:3px 6px}.account-actions{gap:4px;flex-wrap:nowrap}.account-actions button{min-width:0;padding:6px 7px;font-size:12px;white-space:nowrap}.account-card .account-config-actions button{flex:0 1 auto;min-width:0;padding:8px 9px;font-size:12px}#cultivation-skill-dialog{width:calc(100% - 12px);max-width:calc(100% - 12px);height:min(600px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);padding:12px}#cultivation-skill-dialog h2{margin:0 0 8px;font-size:18px}#cultivation-skill-dialog .dialog-actions{margin-top:9px}}

@media(max-width:760px){.idle-groups .idle-category-row{grid-template-columns:1fr}}
@media(max-width:600px){
  .account-list-actions{gap:6px}
  .account-list-actions #user-renew,.account-list-actions #user-refresh{min-height:38px;padding:6px 11px;font-size:13px}
  #renew-dialog{padding:16px}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fields label{font-size:12px;gap:4px}
  .fields input{min-height:38px;padding:7px 8px}
  .activation-field{grid-column:1/-1}
  .idle-groups{margin:7px 0}
  .idle-groups .idle-groups-frame{padding:8px}
  .idle-groups .idle-category-row{gap:6px}
  .idle-groups .idle-category-row fieldset{padding:7px;margin:0}
  .idle-groups-frame>legend,.idle-groups fieldset>legend{font-size:13px}
  .idle-groups fieldset>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .idle-groups label{padding:6px;font-size:12px;gap:5px}
  .account-card .controls{gap:5px}
  .account-card .controls button{font-size:12px;padding:7px 8px}
}
.account-create-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.account-create-heading h2{margin:0!important}
.activation-field{width:min(360px,48%);gap:4px!important;font-size:13px!important}
.activation-field input{min-height:40px;padding:8px 10px}
.activation-field small{color:#7898b8;font-size:12px;line-height:1.3}
.account-feature-selection-hint{margin:4px 0 10px;color:#8fcaff;font-size:12px;line-height:1.4}
@media(max-width:600px){
  .account-create-heading{align-items:flex-start;gap:8px;margin-bottom:9px}
  .account-create-heading>div{flex:0 0 auto;padding-top:4px}
  .account-create-heading h2{font-size:15px!important;white-space:nowrap}
  .activation-field{flex:1;min-width:0;width:auto;font-size:11px!important}
  .activation-field input{min-height:34px;padding:6px 8px;font-size:13px}
  .activation-field small{font-size:10px}
}

/* Final selection layer: the whole option becomes green when selected. */
.idle-groups label:has(input:checked),
#groups label:has(input:checked),
.dispatch-hero-option:has(input:checked){
  color:#f1fff8!important;
  background:linear-gradient(145deg,#176b4b,#124b37)!important;
  border-color:#39d995!important;
  box-shadow:0 0 0 1px #39d99555 inset,0 5px 18px #16a66b22!important;
}
.idle-groups label:has(input:checked):hover,
#groups label:has(input:checked):hover,
.dispatch-hero-option:has(input:checked):hover{background:linear-gradient(145deg,#1b805a,#15573f)!important}
.idle-groups label input[type="checkbox"],
#groups label input[type="checkbox"],
.dispatch-hero-option input[type="checkbox"],
.dispatch-hero-option input[type="radio"]{visibility:hidden!important}
.check{position:relative;cursor:pointer}
.check input[type="checkbox"]{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important}

/* Compact dark mobile finish. */
@media(max-width:600px){
  :root{--purple-950:#07050d;--purple-900:#0d0915;--purple-850:#120d1d;--purple-800:#181126;--purple-700:#282039;--purple-500:#5b419a;--purple-400:#8069c2;--purple-300:#c8bfdc;--purple-text:#e7e2ee;--purple-muted:#91879f}
  body{background:radial-gradient(ellipse at 50% -20%,#171326 0,#0c0913 46%,#07050d 100%);font-size:13px}
  .shell{padding:8px 8px 18px}
  .auth-card{margin:10px auto 0;padding:20px 13px;border-radius:18px}
  .auth-card h1{font-size:23px;margin:10px 0 3px}
  .logo{width:68px;height:68px}
  .auth-form{gap:8px}
  input,select,.primary,.outline,.link-button{min-height:36px;padding:7px 9px}
  .primary,.outline{font-size:13px}
  .topbar{gap:4px;padding:3px 0 8px}
  .topbar>button{padding:6px 9px;min-height:32px}
  .topbar-title,.admin-topbar .topbar-title{font-size:18px}
  .panel{padding:10px;margin:7px 0;border-radius:12px}
  .panel h2{font-size:16px;margin-bottom:7px}
  .panel-hint{margin:-3px 0 9px;font-size:12px}
  .fields{gap:6px}
  .fields label{font-size:12px;gap:3px}
  fieldset{margin:8px 0 10px;padding:7px;border-radius:10px}
  legend{font-size:12px}
  .idle-groups{margin:5px 0}
  .idle-groups .idle-groups-frame{padding:6px}
  .idle-groups .idle-category-row{gap:4px}
  .idle-groups .idle-category-row fieldset{padding:5px}
  .idle-groups fieldset>div{gap:4px}
  .idle-groups label,#groups label{padding:5px 4px;font-size:11px;gap:4px;border-radius:9px}
  .section-heading{gap:5px}
  .section-heading h2{font-size:15px}
  .account-list-actions{gap:4px}
  .account-list-actions #user-renew,.account-list-actions #user-refresh{min-height:32px;padding:5px 8px;font-size:12px}
  article{padding:9px 0}
  .account-card{padding:7px 0}
  .account-card .controls{gap:4px;margin-top:7px}
  .account-card .controls button{padding:6px 7px;font-size:11px}
  .account-meta{gap:3px;margin:6px 0 7px;font-size:12px}
  .account-features{gap:4px;margin:3px 0 6px;font-size:11px}
  .account-feature{padding:2px 6px}
  .admin-user-card{padding:9px 6px}
  .admin-account-list{margin-top:5px;padding:5px 7px}
  .admin-account-grid{gap:3px}
  .admin-account-item{padding:0 7px}
  .admin-account-field{padding:6px 0;gap:6px}
  .admin-list{gap:5px}
  .admin-list-item{padding:7px;border-radius:10px}
  .dialog-actions{gap:5px;margin-top:9px;padding-top:8px}
  dialog{padding:13px;border-radius:16px}
  #renew-dialog{padding:13px}
  .skill-category{margin:5px 0}
  .skill-category summary{padding:7px 8px}
}

/* Darker palette for every viewport; green states remain intentionally vivid. */
body{background-color:#07050d}
.auth-card,.panel{background:linear-gradient(145deg,#120d1d,#0b0812);border-color:#282039}
input,select,textarea{background:#09070f;border-color:#2a203d}
button.primary{background:linear-gradient(135deg,#5b3d9e,#432d79);border-color:#7354ae}
button.primary:hover{background:linear-gradient(135deg,#6d4bb9,#51378f);border-color:#8d72cb}
button.outline,.link-button{background:#110b1b;border-color:#302445;color:#c7bfd5}
button.outline:hover,.link-button:hover{background:#1c142a;border-color:#5e4a84}

/* Compact mobile presentation: remove the large empty tracks left by the
   desktop-first grids and keep the noir palette restrained. */
@media (max-width:600px){
  .shell{padding:6px 6px 14px}
  .panel{padding:8px;margin:5px 0;border-radius:9px}
  .panel h2{font-size:15px;margin:0 0 5px}
  .section-heading{min-height:28px}
  .fields{gap:5px}
  .fields input,.fields select{min-height:33px;padding:5px 7px}
  input,select,.primary,.outline,.link-button{min-height:33px;padding:5px 8px}
  button{line-height:1.2}
  .account-card{padding:5px 0}
  .account-card>h3{font-size:15px}
  .account-meta{margin:4px 0 5px;gap:2px;font-size:11px}
  .account-card .controls{margin-top:4px;gap:3px}
  .account-card .controls button{padding:5px 6px;font-size:11px}
  article{padding:6px 0}
  fieldset{margin:6px 0 7px;padding:5px}
  .idle-groups .idle-groups-frame{padding:5px}
  .idle-groups .idle-category-row fieldset{padding:4px}
  .idle-groups fieldset>div{gap:3px}
  .idle-groups label,#groups label{padding:4px 3px;min-height:29px;font-size:10px;border-radius:7px}
  .dispatch-hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-height:none}
  .dispatch-hero-option{min-width:0;min-height:38px;padding:5px 3px;font-size:11px;line-height:1.15;border-radius:7px}
  .skill-options-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .skill-options-grid .dispatch-hero-option{min-height:42px;padding:4px 2px;font-size:11px}
  .skill-category{margin:4px 0;border-radius:8px}
  .skill-category summary{padding:6px 7px;font-size:12px}
  .dialog-actions{gap:4px;margin-top:6px;padding-top:6px}
  dialog{padding:10px;border-radius:12px}
  #cultivation-dialog #cultivation-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  #cultivation-dialog #cultivation-list .dispatch-hero-option{min-height:46px;padding:4px 1px;font-size:10px}
}

/* Keep the non-mobile surface dark; only selected/running states stay bright. */
body{background:radial-gradient(ellipse at 50% -18%,#161124 0,#0b0811 46%,#05040a 100%)}
.auth-card,.panel{background:linear-gradient(145deg,#100b18,#09070e);border-color:#211a30;box-shadow:0 12px 34px #020106aa}
input,select,textarea{background:#08060c;border-color:#241b33}
button.primary{background:linear-gradient(135deg,#4b327e,#332258);border-color:#5b438d;box-shadow:0 3px 12px #2f1e501f}
button.primary:hover{background:linear-gradient(135deg,#5a3d95,#402b6b);border-color:#755ca8}
button.outline,.link-button{background:#0d0914;border-color:#29203a;color:#b8afc7}
button.outline:hover,.link-button:hover{background:#171025;border-color:#4b3968}
.reset-groups{margin:8px 0 10px}
.reset-note{margin:6px 0 0;color:var(--purple-muted);font-size:12px;line-height:1.5}
#reset-dialog{max-width:min(620px,calc(100% - 24px))}
#reset-dialog h2{text-align:center;margin:0 0 8px}
#reset-dialog .dialog-actions{margin-top:12px}
@media(max-width:600px){
  #reset-dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);padding:11px}
  #reset-dialog .idle-groups{margin:4px 0 7px}
  #reset-dialog .idle-groups-frame{padding:5px}
  #reset-dialog .idle-category-row{gap:4px}
  #reset-dialog .idle-category-row fieldset{padding:4px}
  #reset-dialog .idle-groups fieldset>div{gap:3px}
  #reset-dialog .idle-groups label{min-height:30px;padding:4px 3px;font-size:11px}
  #reset-dialog .dialog-actions{margin-top:7px}
}

/* Tighten the account form and make feature chips wrap around their labels
   instead of stretching into mostly empty half-width tiles. */
@media(max-width:600px){
  body{font-size:14px}
  .panel{padding:10px}
  .panel h2{font-size:18px}
  .primary,.outline,.link-button{font-size:13px}
  .idle-groups label,#groups label{font-size:12px;min-height:32px;padding:5px 7px}
  .dispatch-hero-option{font-size:12px;min-height:42px;padding:6px 5px}
  .skill-options-grid .dispatch-hero-option{font-size:12px;min-height:46px;padding:5px 3px}
  .skill-category summary{font-size:13px;padding:7px 8px}
  .section-heading h2{font-size:16px}
  .account-card>h3{font-size:17px}
  .account-card .controls button{font-size:12px;padding:6px 8px}
  .account-meta{font-size:13px}
  .account-create-panel{padding:7px;margin:5px 0}
  .account-create-heading{gap:5px;margin-bottom:5px;align-items:center}
  .account-create-heading h2{font-size:16px!important;line-height:1.25}
  .activation-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 6px;min-width:0;font-size:12px!important;line-height:1.2}
  .activation-field input{min-width:0;min-height:36px;padding:6px 8px;font-size:13px}
  .activation-field small{grid-column:1/-1;font-size:10px;line-height:1.25}
  .account-create-panel .fields{gap:4px 6px}
  .account-create-panel .fields label{gap:3px;font-size:12px;line-height:1.2}
  .account-create-panel .fields input{min-height:36px;padding:6px 8px;font-size:13px}
  .account-create-panel .idle-groups{margin:3px 0}
  .account-create-panel .idle-groups-frame{padding:4px;border-color:#30283c;background:#0a0810}
  .account-create-panel .idle-groups-frame>legend,
  .account-create-panel .idle-groups fieldset>legend{color:#aaa0b9;font-size:11px}
  .account-create-panel .idle-groups .idle-category-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .account-create-panel .idle-groups .idle-category-row fieldset{padding:3px;border-color:#292334;background:#0e0b15}
  .account-create-panel .idle-groups fieldset>div{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:3px 5px}
  .account-create-panel .idle-groups label{display:inline-flex!important;flex:0 0 auto!important;width:max-content!important;max-width:100%;min-height:34px;padding:6px 9px;font-size:13px;line-height:1.2;border-radius:8px}
  .account-create-panel .account-feature-selection-hint{margin:3px 0 6px;font-size:11px}
  .account-create-panel .add-account-button{min-height:36px;padding:7px 13px;font-size:13px}
}

/* Keep the two挂机 categories visually symmetrical and make their choices
   read in a stable two-column order on phones. */
@media(max-width:600px){
  .account-create-panel .idle-groups .idle-category-row{
    align-items:stretch;
  }
  .account-create-panel .idle-groups .idle-category-row>fieldset{
    display:flex;
    flex-direction:column;
    align-self:stretch;
    height:100%;
    min-height:100%;
  }
  .account-create-panel .idle-groups .idle-category-row>fieldset>div{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    align-items:start;
    gap:4px;
    flex:1 1 auto;
  }
  .account-create-panel .idle-groups .idle-category-row>fieldset label{
    width:auto!important;
    min-width:0;
    max-width:none;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
  }
  #reset-dialog .idle-groups .idle-category-row>fieldset{
    display:flex;
    flex-direction:column;
    align-self:stretch;
  }
  #reset-dialog .idle-groups .idle-category-row>fieldset>div{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:4px;
    flex:1 1 auto;
  }
  #reset-dialog .idle-groups .idle-category-row>fieldset label{
    width:auto!important;
    min-width:0;
    max-width:none;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
  }
}

/* Make every selectable option in the configuration tables readable and
   easier to tap, and enlarge the account-level configuration actions. */
#cultivation-dialog .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option{
  min-height:50px!important;
  padding:11px 10px!important;
  font-size:16px!important;
  line-height:1.4!important;
  overflow-wrap:anywhere;
}
#cultivation-dialog .dispatch-hero-option input,
#cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option input{
  transform:scale(1.25);
  transform-origin:center;
}
.account-card .controls.account-config-actions>button{
  min-height:46px!important;
  padding:9px 15px!important;
  font-size:16px!important;
  font-weight:650!important;
}
#user-renew{
  min-height:42px!important;
  padding:8px 17px!important;
  font-size:16px!important;
  font-weight:650!important;
}
.account-card .account-header>.account-actions>.account-reset-row button{
  min-height:44px!important;
  padding:8px 12px!important;
  font-size:16px!important;
  font-weight:650!important;
}
@media(max-width:600px){
  #cultivation-dialog .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option{
    min-height:48px!important;
    padding:9px 7px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  .account-card .controls.account-config-actions>button{
    min-height:44px!important;
    padding:8px 11px!important;
    font-size:15px!important;
  }
  #user-renew{min-height:40px!important;padding:7px 13px!important;font-size:15px!important}
  .account-card .account-header>.account-actions>.account-reset-row button{
    min-height:40px!important;
    padding:7px 10px!important;
    font-size:14px!important;
  }
}

/* The platform login should stay a compact card instead of spanning the
   entire phone width. */
@media(max-width:600px){
  .auth-card{
    width:min(342px,calc(100% - 28px));
    margin:18px auto 0;
    padding:18px 16px;
    border-radius:14px;
  }
  .auth-card h1{font-size:22px;margin:9px 0 3px}
  .auth-card .subtitle{font-size:13px;margin-bottom:13px}
  .auth-card .tabs{margin:13px 0}
  .auth-card .auth-form{gap:8px}
  .auth-card .auth-form input{min-height:35px;padding:6px 8px}
  .auth-card .auth-form .primary{min-height:36px;padding:7px 12px}
  .auth-card .copyright{margin:16px 0 0;font-size:11px}
}

/* Neutral black-gray surfaces improve contrast and keep purple as a small
   accent instead of the dominant page color. */
:root{
  --purple-950:#050608;
  --purple-900:#0b0d11;
  --purple-850:#11141a;
  --purple-800:#171b22;
  --purple-700:#252b35;
  --purple-500:#66547f;
  --purple-400:#8e7aa8;
  --purple-300:#d1cbd8;
  --purple-text:#f0eef2;
  --purple-muted:#a5a4aa;
}
body{background:#07090c;color:#eeeef0}
.auth-card,.panel{background:#101318;border-color:#303640;box-shadow:0 12px 34px #000b}
.account-create-panel{background:#12161b;border-color:#48505b}
input,select,textarea{background:#080a0d;border-color:#3a424d;color:#f2f2f4}
input:focus,select:focus,textarea:focus{border-color:#8e7aa8;box-shadow:0 0 0 2px #8e7aa833}
button.primary{background:#5a4672;border-color:#806b98;box-shadow:0 3px 12px #0005}
button.primary:hover{background:#6b5585;border-color:#9b87b0}
button.outline,.link-button{background:#171a20;border-color:#4a515c;color:#d7d5db}
button.outline:hover,.link-button:hover{background:#222730;border-color:#7d7189}
.account-create-panel .idle-groups .idle-groups-frame{background:#0b0f13;border-color:#59636e}
.account-create-panel .idle-groups .idle-category-row>fieldset{background:#11161b;border-color:#3d4650}
.idle-groups label,#groups label,.dispatch-hero-option{background:#1a2027;border-color:#424b57;color:#e0e0e4}
.idle-groups label:hover,#groups label:hover,.dispatch-hero-option:hover{background:#252c35;border-color:#716580}
.idle-groups label:has(input:checked),#groups label:has(input:checked),.dispatch-hero-option:has(input:checked){background:#176b4b!important;border-color:#39d995!important;color:#f1fff8}
.account-create-panel .idle-groups-frame>legend,.account-create-panel .idle-groups fieldset>legend{color:#d0ccd5}
.account-create-panel label{color:#d0d1d5}
.account-create-heading h2,.account-meta-item strong,.account-header h3{color:#f0eef2}
dialog{background:#11151a;border-color:#515a64;color:#eeeef0}
dialog::backdrop{background:#000c}
.skill-category,.skill-category details{background:#11151a;border-color:#363e47}
.skill-category summary{color:#e4e3e7}
.skill-category[open] summary{border-bottom-color:#363e47}
.idle-groups .idle-groups-frame{background:#0b0f13;border-color:#59636e}
.idle-groups-frame>legend,.idle-groups fieldset>legend{color:#d0ccd5}
.check{background:#171b21;border-color:#414852;color:#d2d2d6}
.check:has(input:checked){background:#15553d;border-color:#39d995;color:#f1fff8}

/* Mobile configuration dialogs: keep the hero rail horizontal and give the
   nested soul, seal and kismet choices the full content width. */
@media(max-width:600px){
  #cultivation-skill-dialog form{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
  #cultivation-skill-dialog #cultivation-skill-picker{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto;max-height:none;gap:6px;overflow:hidden}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex:0 0 auto;flex-direction:row;width:100%;max-width:100%;min-height:38px;max-height:44px;overflow-x:auto;overflow-y:hidden;gap:5px;padding:0 0 2px}
  #cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto;width:auto;min-width:72px;min-height:34px;padding:6px 10px;white-space:nowrap;text-align:center}
  #cultivation-skill-dialog #cultivation-skill-list{flex:1 1 auto;width:100%;min-width:0;min-height:0;height:auto;max-height:none;overflow-x:hidden;overflow-y:auto;padding:0 2px 2px 0}
  #cultivation-skill-dialog #cultivation-skill-list .skill-options-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  #cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-list:not(.skill-options-grid){grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  #cultivation-skill-dialog .dialog-actions{flex:0 0 auto;margin-top:6px;padding-top:8px;background:#11151a}
  #reset-dialog{width:calc(100% - 36px);max-width:calc(100% - 36px);padding:10px}
  #reset-dialog .idle-groups .idle-category-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  #reset-dialog .idle-groups .idle-category-row fieldset{padding:3px}
  #reset-dialog .idle-groups fieldset>div{grid-template-columns:1fr;gap:3px}
  #reset-dialog .idle-groups label{font-size:10px;min-height:28px;padding:4px 2px}
}

/* Final cascade: compact account actions and a left-side hero rail in the
   self-configuration dialog. */
.account-card .account-config-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:wrap}
.account-card .account-config-actions button{min-width:68px;min-height:34px;padding:6px 9px;font-size:12px;font-weight:400}
@media(max-width:600px){
  .account-card .account-config-actions{gap:4px}
  .account-card .account-config-actions button{min-width:0;min-height:34px;flex:0 1 auto;padding:6px 8px;font-size:11px}
  #cultivation-skill-dialog #cultivation-skill-picker{display:grid;grid-template-columns:minmax(78px,27%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:7px}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex;flex-direction:column;flex:0 0 auto;width:auto;max-width:none;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;gap:5px;padding:0 3px 0 0}
  #cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto;width:100%;min-width:0;min-height:34px;padding:5px 4px;text-align:left;white-space:normal}
  #cultivation-skill-dialog .soul-treasure-options,#cultivation-skill-dialog .god-seal-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
}

/* Final overrides: keep hero-picker actions visible and account controls in
   stable rows at phone widths, after the legacy responsive rules above. */
.account-heading-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.account-heading-main h3{width:100%}
.account-header{align-items:flex-start}
.account-live-status{width:max-content}
.account-config-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.account-primary-actions,.account-secondary-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.account-primary-actions button{min-width:110px;min-height:42px;font-size:15px;font-weight:650}
.account-secondary-actions button{min-width:86px}
.account-create-notes{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1;color:#a5a4aa;line-height:1.35}
.account-create-notes small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activation-field{width:min(330px,36%)}
.dispatch-hero-option--with-power{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.hero-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-option-power{color:#aaa2b8;font-size:.88em;white-space:nowrap;font-variant-numeric:tabular-nums}
dialog[open]#cultivation-dialog,dialog[open]#dispatch-hero-dialog{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 16px)}
#cultivation-dialog form,#dispatch-hero-dialog form{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
#cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
#cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{flex:0 0 auto;position:relative;z-index:1;margin-top:8px;padding-top:10px;background:#11151a}
@media(max-width:600px){
  .account-create-heading{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start;gap:6px;margin-bottom:8px}
  .account-create-heading>div:first-child{min-width:0}
  .account-create-heading h2{font-size:16px!important;white-space:nowrap}
  .account-create-notes{grid-column:1/-1;grid-row:2;order:3;width:100%;padding:2px 1px 0}
  .account-create-notes small{font-size:10px;white-space:normal}
  .activation-field{grid-column:2;grid-row:1;width:100%;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 5px}
  .activation-field input{min-width:0}
  .activation-field small{grid-column:1/-1}
  .account-header{display:block}
  .account-heading-main{gap:3px}
  .account-heading-main h3{font-size:17px;line-height:1.3}
  .account-live-status{font-size:11px;padding:3px 7px}
  .account-primary-actions,.account-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px}
  .account-primary-actions button,.account-secondary-actions button{width:100%;min-width:0}
  .account-primary-actions button{min-height:42px;font-size:14px}
  .account-secondary-actions button{min-height:35px;font-size:12px;padding:6px 7px}
  .account-config-actions{gap:5px}
  .dispatch-hero-option--with-power{grid-template-columns:auto minmax(0,1fr);gap:4px}
  .hero-option-power{grid-column:2;font-size:10px;line-height:1.1}
  dialog[open]#cultivation-dialog,dialog[open]#dispatch-hero-dialog{width:calc(100% - 14px);max-width:calc(100% - 14px);height:min(680px,calc(100dvh - 14px));padding:11px}
  #cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{padding-bottom:4px}
  #cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{margin-top:5px;padding-top:7px}
}

/* End-of-file overrides for the compact phone layout. */
.account-heading-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.account-heading-main h3{width:100%}
.account-header{align-items:flex-start}
.account-live-status{width:max-content}
.account-config-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.account-primary-actions,.account-secondary-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.account-primary-actions button{min-width:110px;min-height:42px;font-size:15px;font-weight:650}
.account-secondary-actions button{min-width:86px}
.account-create-notes{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1;color:#a5a4aa;line-height:1.35}
.account-create-notes small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activation-field{width:min(330px,36%)}
.dispatch-hero-option--with-power{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.hero-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-option-power{color:#aaa2b8;font-size:.88em;white-space:nowrap;font-variant-numeric:tabular-nums}
dialog[open]#cultivation-dialog,dialog[open]#dispatch-hero-dialog{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 16px)}
#cultivation-dialog form,#dispatch-hero-dialog form{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
#cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
#cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{flex:0 0 auto;position:relative;z-index:1;margin-top:8px;padding-top:10px;background:#11151a}
@media(max-width:600px){
  .account-create-heading{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start;gap:6px;margin-bottom:8px}
  .account-create-heading>div:first-child{min-width:0}
  .account-create-heading h2{font-size:16px!important;white-space:nowrap}
  .account-create-notes{grid-column:1/-1;grid-row:2;order:3;width:100%;padding:2px 1px 0}
  .account-create-notes small{font-size:10px;white-space:normal}
  .activation-field{grid-column:2;grid-row:1;width:100%;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 5px}
  .activation-field input{min-width:0}
  .activation-field small{grid-column:1/-1}
  .account-header{display:block}
  .account-heading-main{gap:3px}
  .account-heading-main h3{font-size:17px;line-height:1.3}
  .account-live-status{font-size:11px;padding:3px 7px}
  .account-primary-actions,.account-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px}
  .account-primary-actions button,.account-secondary-actions button{width:100%;min-width:0}
  .account-primary-actions button{min-height:42px;font-size:14px}
  .account-secondary-actions button{min-height:35px;font-size:12px;padding:6px 7px}
  .account-config-actions{gap:5px}
  .dispatch-hero-option--with-power{grid-template-columns:auto minmax(0,1fr);gap:4px}
  .hero-option-power{grid-column:2;font-size:10px;line-height:1.1}
  dialog[open]#cultivation-dialog,dialog[open]#dispatch-hero-dialog{width:calc(100% - 14px);max-width:calc(100% - 14px);height:min(680px,calc(100dvh - 14px));padding:11px}
  #cultivation-dialog #cultivation-list,#dispatch-hero-dialog #dispatch-hero-list{padding-bottom:4px}
  #cultivation-dialog .dialog-actions,#dispatch-hero-dialog .dialog-actions{margin-top:5px;padding-top:7px}
}

/* Final compact account and five-column treasure choices. */
.account-card .account-actions{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.account-card .account-actions button{width:auto!important;min-width:0;min-height:32px;flex:0 1 auto;padding:5px 7px;font-size:11px;white-space:nowrap}
.account-card .controls.account-config-actions{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;gap:5px;flex-wrap:wrap}
.account-card .controls.account-config-actions>button{width:auto!important;min-width:0;min-height:32px;flex:0 1 auto;padding:5px 8px;font-size:11px;white-space:nowrap}
@media(max-width:600px){
  .account-card .account-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:5px!important}
  .account-card .account-heading-main{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;min-width:0}
  .account-card .account-heading-main h3{width:100%;font-size:16px;line-height:1.3}
  .account-card .account-actions{display:flex!important;max-width:48vw;justify-content:flex-end;gap:3px;flex-wrap:wrap}
  .account-card .account-actions button{min-height:29px;padding:4px 6px;font-size:10px}
  .account-card .controls.account-config-actions{gap:4px}
  .account-card .controls.account-config-actions>button{min-height:31px;padding:5px 7px;font-size:10px}
  #cultivation-skill-dialog #cultivation-skill-picker{display:grid!important;grid-template-columns:minmax(78px,27%) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:7px!important}
  #cultivation-skill-dialog #cultivation-skill-heroes{display:flex!important;flex-direction:column!important;flex:0 0 auto!important;width:auto!important;max-width:none!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;gap:5px!important;padding:0 3px 0 0!important}
  #cultivation-skill-dialog #cultivation-skill-heroes button{flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:34px!important;padding:5px 4px!important;text-align:left!important;white-space:normal!important}
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-groups,
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-groups,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-options{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;gap:3px!important;max-height:none!important;overflow:visible!important}
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-groups>.skill-category,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-groups>.skill-category{min-width:0;margin:2px 0}
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-groups summary,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-groups summary{padding:5px 2px;font-size:9px;line-height:1.2;overflow-wrap:anywhere}
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option{min-width:0;min-height:42px;padding:4px 2px;font-size:9px;line-height:1.15;overflow-wrap:anywhere}
}

/* Restore compact controls throughout the game-account list. */
.account-list-panel .account-list-actions>button{min-height:30px!important;padding:5px 9px!important;font-size:12px!important}
.account-card .account-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:8px!important}
.account-card .account-heading-main{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important}
.account-card .account-heading-main h3{width:auto!important;min-width:0!important;margin:0!important;flex:0 1 auto!important}
.account-card .account-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;flex-wrap:nowrap!important;max-width:none!important}
.account-card .account-actions button{width:auto!important;min-width:0!important;min-height:30px!important;flex:0 0 auto!important;padding:4px 7px!important;font-size:11px!important;white-space:nowrap!important}
@media(max-width:600px){
  .account-list-panel .account-list-actions>button{min-height:30px!important;padding:4px 8px!important;font-size:11px!important}
  .account-card .account-header{gap:5px!important}
  .account-card .account-heading-main{gap:4px!important}
  .account-card .account-heading-main h3{font-size:15px!important;line-height:1.25!important}
  .account-card .account-actions{gap:3px!important;flex-wrap:wrap!important;max-width:46vw!important}
  .account-card .account-actions button{min-height:28px!important;padding:4px 5px!important;font-size:10px!important}
}

/* Shared in-app replacement for browser prompt/confirm dialogs. */
#app-dialog{
  width:min(420px,calc(100% - 28px));
  max-width:min(420px,calc(100% - 28px));
  padding:20px;
  border:1px solid #4b5561;
  border-radius:16px;
  background:#11151a;
  color:#eeeef0;
  box-shadow:0 22px 70px #000c;
}
#app-dialog::backdrop{background:#000b;backdrop-filter:blur(2px)}
#app-dialog.dialog-fallback-open,
dialog.dialog-fallback-open{display:block;position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:1000;max-height:calc(100vh - 24px);overflow:auto}
@supports (height:100dvh){dialog.dialog-fallback-open{max-height:calc(100dvh - 24px)}}
html.dialog-fallback-active{overflow:hidden}
html.dialog-fallback-active::before{content:"";position:fixed;inset:0;background:#000b;backdrop-filter:blur(2px);z-index:999}
#app-dialog form{display:flex;flex-direction:column;gap:10px}
#app-dialog [hidden]{display:none!important}
#app-dialog h2{margin:0;text-align:center;color:#f0eef2;font-size:19px}
#app-dialog p{margin:0;color:#c5c7cc;line-height:1.5;overflow-wrap:anywhere}
#app-dialog label{display:flex;flex-direction:column;gap:6px;color:#d5d6da}
#app-dialog input{width:100%;min-width:0}
#app-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid #303740}
@media(max-width:600px){
  #app-dialog{width:calc(100% - 32px);max-width:400px;padding:16px;border-radius:14px}
  #app-dialog h2{font-size:17px}
  #app-dialog .dialog-actions button{min-height:38px;min-width:76px}
}

/* Final self-configuration grids. Keep these rules last so the older
   responsive presets cannot change the requested column counts. */
#cultivation-skill-dialog #cultivation-skill-picker{grid-template-columns:minmax(52px,62px) minmax(0,1fr)!important}
#cultivation-skill-dialog #cultivation-skill-heroes{min-width:0!important}
#cultivation-skill-dialog #cultivation-skill-heroes button{width:100%!important;min-width:0!important;padding:5px 2px!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
#cultivation-skill-dialog #cultivation-skill-list .skill-choice-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .formation-options-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
#cultivation-skill-dialog #cultivation-skill-list .adjutant-options-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .equip-options-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .soul-ordinary-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-picker,
#cultivation-skill-dialog #cultivation-skill-list .kismet-options-list,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-picker{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-picker>.skill-category,
#cultivation-skill-dialog #cultivation-skill-list .kismet-options-list>.skill-category,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-picker>.skill-category{width:100%!important;min-width:0!important}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}
#cultivation-skill-dialog #cultivation-skill-list .beast-options-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .sp-army-options-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .god-options-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .god-skill-options-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
#cultivation-skill-dialog #cultivation-skill-list .skill-choice-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .formation-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .adjutant-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .equip-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .beast-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .sp-army-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .god-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .god-skill-options-grid .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){
  #cultivation-skill-dialog #cultivation-skill-picker{grid-template-columns:minmax(48px,58px) minmax(0,1fr)!important}
  #cultivation-skill-dialog #cultivation-skill-list .skill-choice-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .formation-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .adjutant-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .equip-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .beast-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .sp-army-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-skill-options-grid .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option{font-size:10px;min-width:0;padding-left:2px;padding-right:2px}
}

/* The picker rows themselves stay vertical; only their expanded item lists
   use the requested three-column layout.  These combined selectors outrank
   the legacy mobile five-column presets above. */
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-groups.soul-treasure-picker,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-groups.god-seal-picker{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
}

/* Enlarged selection controls for the hero picker and its expanded tables.
   Keep the existing column counts, but give labels enough height and type
   size to be readable and easy to tap. */
#cultivation-dialog .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option{
  min-height:44px;
  padding:10px 11px;
  font-size:14px;
  line-height:1.35;
}
#cultivation-dialog .dispatch-hero-option input,
#cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option input{
  transform:scale(1.15);
  transform-origin:center;
}
#cultivation-skill-dialog #cultivation-skill-heroes button{
  min-height:40px!important;
  padding:8px 6px!important;
  font-size:14px!important;
  line-height:1.3!important;
}
#cultivation-skill-dialog #cultivation-skill-list .skill-category summary{
  min-height:44px;
  padding:10px 12px;
  font-size:15px;
  line-height:1.35;
}
#cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option,
#cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options .dispatch-hero-option{
  min-height:48px;
  padding:10px 9px;
  font-size:14px;
}
@media(max-width:600px){
  #cultivation-dialog .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .dispatch-hero-option{
    min-height:44px;
    padding:9px 8px;
    font-size:13px;
  }
  #cultivation-skill-dialog #cultivation-skill-heroes button{
    min-height:40px!important;
    padding:8px 6px!important;
    font-size:13px!important;
  }
  #cultivation-skill-dialog #cultivation-skill-list .skill-category summary{
    min-height:42px;
    padding:9px 9px;
    font-size:14px;
  }
  #cultivation-skill-dialog #cultivation-skill-list .soul-treasure-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .god-seal-options .dispatch-hero-option,
  #cultivation-skill-dialog #cultivation-skill-list .kismet-slot-options .dispatch-hero-option{
    min-height:46px;
    padding:8px 6px;
    font-size:13px;
  }
}

/* Account status belongs directly under the logged-in account name, without
   a redundant caption. Keep desktop actions at a readable fixed width. */
.account-card .account-header{
  grid-template-columns:minmax(0,1fr) 260px!important;
  align-items:start!important;
  gap:16px!important;
}
.account-card .account-heading-main{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  min-width:0!important;
}
.account-card .account-heading-main h3{width:auto!important}
.account-card .account-heading-main .account-status-line{
  display:flex;
  margin:0;
  padding:0;
  color:inherit;
  font-size:13px;
}
.account-card .account-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:7px!important;
  width:260px!important;
  max-width:none!important;
  flex-wrap:initial!important;
}
.account-card .account-header>.account-actions>button{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  padding:8px 10px!important;
  font-size:15px!important;
  font-weight:700!important;
}
.account-card .account-header>.account-actions .account-start-button{color:#55e58b!important;border-color:#2fbf6b!important}
.account-card .account-header>.account-actions .account-stop-button{color:#ff7777!important;border-color:#d64c5b!important}
.account-card .account-header>.account-actions>.account-reset-row{grid-column:1/-1;width:100%;margin:0}
.account-card .account-header>.account-actions>.account-reset-row button{width:100%!important;min-height:38px!important;padding:7px 10px!important;font-size:14px!important}
@media(max-width:600px){
  .account-card .account-header{grid-template-columns:minmax(0,1fr) minmax(150px,46%)!important;gap:8px!important}
  .account-card .account-actions{width:100%!important;gap:5px!important}
  .account-card .account-header>.account-actions>button{min-height:38px!important;padding:6px 7px!important;font-size:13px!important}
  .account-card .account-header>.account-actions>.account-reset-row button{min-height:34px!important;font-size:12px!important}
  .account-card .account-heading-main .account-status-line{font-size:12px}
}

/* Final account-card precedence. */
.account-card .account-header{grid-template-columns:minmax(0,1fr) 260px!important;align-items:start!important;gap:16px!important}
.account-card .account-heading-main{display:flex!important;flex-direction:column!important;align-items:flex-start!important;flex-wrap:nowrap!important;gap:7px!important;min-width:0!important}
.account-card .account-heading-main h3{width:auto!important}
.account-card .account-heading-main .account-status-line{display:flex!important;margin:0!important;padding:0!important;font-size:13px!important}
.account-card .account-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;gap:7px!important;width:260px!important;max-width:none!important;flex-wrap:initial!important}
.account-card .account-header>.account-actions>button{width:100%!important;min-width:0!important;min-height:42px!important;padding:8px 10px!important;font-size:15px!important;font-weight:700!important}
.account-card .account-header>.account-actions .account-start-button{color:#55e58b!important;border-color:#2fbf6b!important}
.account-card .account-header>.account-actions .account-stop-button{color:#ff7777!important;border-color:#d64c5b!important}
.account-card .account-header>.account-actions>.account-reset-row{grid-column:1/-1!important;width:100%!important;margin:0!important}
.account-card .account-header>.account-actions>.account-reset-row button{width:100%!important;min-height:38px!important;padding:7px 10px!important;font-size:14px!important}
@media(max-width:600px){
  .account-card .account-header{grid-template-columns:minmax(0,1fr) minmax(150px,46%)!important;gap:8px!important}
  .account-card .account-actions{width:100%!important;gap:5px!important}
  .account-card .account-header>.account-actions>button{min-height:38px!important;padding:6px 7px!important;font-size:13px!important}
  .account-card .account-header>.account-actions>.account-reset-row button{min-height:34px!important;font-size:12px!important}
  .account-card .account-heading-main .account-status-line{font-size:12px!important}
}

/* Game account actions: primary start/stop controls share one row and the
   reset action sits directly underneath. */
.account-card>.account-status-line{
  display:flex;
  align-items:center;
  gap:7px;
  margin:7px 0 4px;
  color:#8da9c3;
  font-size:13px;
}
.account-card .account-header>.account-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;
  width:min(360px,54%);
  grid-template-rows:auto auto;
  margin-top:0;
  justify-content:stretch!important;
}
.account-card .account-header>.account-actions>button{
  width:100%!important;
  min-height:42px!important;
  padding:8px 12px!important;
  font-size:15px!important;
  font-weight:700!important;
}
.account-card .account-header>.account-actions .account-start-button{color:#55e58b!important;border-color:#2fbf6b!important}
.account-card .account-header>.account-actions .account-stop-button{color:#ff7777!important;border-color:#d64c5b!important}
.account-card .account-header>.account-actions>.account-reset-row{grid-column:1/-1;width:100%;margin:0}
.account-card .account-header>.account-actions>.account-reset-row button{width:100%!important;min-height:36px;padding:6px 10px;font-size:13px}
.account-card>.account-config-actions{margin-top:8px}
.admin-expiry-actions{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.admin-account-field .admin-account-remove{width:max-content;min-height:27px;padding:3px 8px;font-size:11px;margin:0;white-space:nowrap}
@media(max-width:600px){
  .account-card .account-header{grid-template-columns:minmax(0,1fr) minmax(155px,54%)!important;align-items:start!important}
  .account-card .account-header>.account-actions{width:100%;gap:5px!important}
  .account-card .account-header>.account-actions>button{min-height:38px!important;padding:6px 7px!important;font-size:13px!important}
  .account-card .account-header>.account-actions>.account-reset-row button{min-height:33px;font-size:12px}
  .account-card>.account-status-line{font-size:12px}
}

/* Status is displayed below the logged-in username with no "current status"
   caption. Keep the desktop controls in a two-button row plus full-width reset. */
.account-card .account-header{grid-template-columns:minmax(0,1fr) 260px!important;align-items:start!important;gap:16px!important}
.account-card .account-heading-main{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;min-width:0!important}
.account-card .account-heading-main h3{margin:0!important}
.account-card .account-heading-main .account-status-line{display:flex!important;align-items:center!important;margin:0!important;padding:0!important;font-size:13px!important}
.account-card .account-header>.account-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto!important;gap:7px!important;width:260px!important;max-width:none!important;justify-content:stretch!important;align-items:stretch!important}
.account-card .account-header>.account-actions>button{display:block!important;width:100%!important;min-width:0!important;min-height:42px!important;padding:8px 10px!important;font-size:15px!important;font-weight:700!important;white-space:nowrap!important}
.account-card .account-header>.account-actions .account-start-button{color:#55e58b!important;border-color:#2fbf6b!important}
.account-card .account-header>.account-actions .account-stop-button{color:#ff7777!important;border-color:#d64c5b!important}
.account-card .account-header>.account-actions>.account-reset-row{grid-column:1/-1!important;width:100%!important;margin:0!important}
.account-card .account-header>.account-actions>.account-reset-row button{display:block!important;width:100%!important;min-height:38px!important;padding:7px 10px!important;font-size:14px!important}
.admin-account-identity{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
@media(max-width:600px){
  .account-card .account-header{grid-template-columns:minmax(0,1fr) minmax(155px,54%)!important;gap:8px!important}
  .account-card .account-header>.account-actions{width:100%!important;gap:5px!important}
  .account-card .account-header>.account-actions>button{min-height:38px!important;padding:6px 7px!important;font-size:13px!important}
  .account-card .account-header>.account-actions>.account-reset-row button{min-height:34px!important;font-size:12px!important}
  .account-card .account-heading-main .account-status-line{font-size:12px!important}
}

/* Desktop account card: status stays directly under the account name, while
   start/stop share a row and reset occupies the row below them. */
@media(min-width:601px){
  .account-card .account-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 260px!important;
    align-items:start!important;
    gap:16px!important;
  }
  .account-card .account-heading-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
    min-width:0!important;
  }
  .account-card .account-heading-main h3{margin:0!important}
  .account-card .account-heading-main .account-status-line{
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
  }
  .account-card .account-header>.account-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:8px!important;
    width:260px!important;
    max-width:none!important;
    margin:0!important;
  }
  .account-card .account-header>.account-actions>button{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:8px 10px!important;
    font-size:15px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  .account-card .account-header>.account-actions>.account-reset-row{
    grid-column:1/-1!important;
    width:100%!important;
    margin:0!important;
  }
  .account-card .account-header>.account-actions>.account-reset-row button{
    display:block!important;
    width:100%!important;
    min-height:38px!important;
    padding:7px 10px!important;
    font-size:14px!important;
  }
}
.dispatch-hero-list{grid-template-columns:repeat(3,minmax(0,1fr))}
#dispatch-hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#dispatch-hero-list .dispatch-hero-option{min-width:0}
.account-list-actions{display:flex;align-items:center;gap:1em}
.account-list-actions #user-refresh{font-size:1.12em;padding:11px 20px}
.admin-account-grid{grid-template-columns:minmax(130px,1fr) minmax(90px,.7fr) minmax(130px,1fr) minmax(100px,.8fr) minmax(90px,.65fr)!important}
.admin-account-field:nth-child(3) .admin-account-label{color:#8fcaff}
.admin-account-remove{display:block!important;min-height:36px!important;padding:7px 16px!important;font-size:14px!important;font-weight:700!important;color:#ff8b8b!important;border-color:#d64c5b!important;background:#3a1720!important}
.admin-account-field:nth-child(5) .admin-expiry-actions{margin-top:3px}
@media(max-width:520px){
  #dispatch-hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #dispatch-hero-list .dispatch-hero-option{font-size:12px;padding:7px 4px}
  .account-list-actions #user-refresh{font-size:1.05em;padding:9px 15px}
  .admin-account-grid{grid-template-columns:minmax(0,1fr)!important}
  .admin-account-item{grid-template-columns:minmax(0,1fr)!important}
}

/* On desktop, keep each user's挂机账号 on its own row so the account
   fields stay readable instead of being compressed side by side. */
@media(min-width:761px){
  .admin-account-grid{grid-template-columns:minmax(0,1fr)!important;gap:7px!important}
}

.admin-user-name-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.admin-toggle-account-removal{white-space:nowrap;padding:6px 10px;font-size:12px}
.admin-account-list .admin-account-remove{display:none!important}
.admin-account-list.account-removal-open .admin-account-remove{display:block!important}
.account-removal-list{display:grid;gap:8px;max-height:55vh;overflow:auto;min-width:min(360px,70vw)}
.account-removal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid #3a2460;border-radius:8px;background:#100a20}
.account-removal-row strong{overflow-wrap:anywhere}
.account-removal-row .admin-account-remove{display:block!important;min-width:64px;color:#ff8b8b;border-color:#d64c5b;background:#3a1720}

/* Compact mobile admin account cards into two readable rows:
   account/status, then plan/remaining-time/manage. */
@media(max-width:760px){
  .admin-user-name-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
  .admin-toggle-account-removal{padding:6px 9px!important;font-size:12px!important;white-space:nowrap}
  .admin-account-list .admin-account-remove{display:none!important}
  .admin-account-list.account-removal-open .admin-account-remove{display:block!important}
  .admin-account-item{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:0 8px!important;
    padding:7px 8px!important;
    border:1px solid #3a2460!important;
    border-radius:9px!important;
    background:#100a20!important;
    margin:0 0 7px!important;
  }
  .admin-account-item:last-child{margin-bottom:0!important}
  .admin-account-item .admin-account-field{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    gap:4px!important;
    padding:7px 0!important;
    border-bottom:0!important;
  }
  .admin-account-item .admin-account-field:nth-child(1){grid-column:1 / span 2;grid-row:1}
  .admin-account-item .admin-account-field:nth-child(2){grid-column:3 / span 2;grid-row:1}
  .admin-account-item .admin-account-field:nth-child(4){grid-column:5 / span 2;grid-row:1}
  .admin-account-item .admin-account-field:nth-child(3){grid-column:1 / -1;grid-row:2}
  .admin-account-item .admin-account-label{font-size:12px!important;line-height:1.2!important}
  .admin-account-item .admin-account-field strong,
  .admin-account-item .admin-account-field>span:not(.admin-account-label){
    font-size:14px!important;
    line-height:1.35!important;
    min-width:0!important;
  }
  .admin-account-item .admin-expiry-actions{min-width:0!important}
  .admin-account-item .admin-account-remove{width:max-content!important;max-width:100%!important}
}

/* Keep renewal beside the account-list title and make refresh a prominent
   green action on the right. */
.account-list-panel .section-heading>div:first-child.account-heading-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0;
}
.account-list-panel .account-heading-actions h2{margin:0!important;white-space:nowrap}
.account-list-panel .account-heading-actions #user-renew{min-height:40px!important;padding:8px 18px!important;font-size:15px!important;font-weight:700!important;white-space:nowrap}
.account-list-panel .account-list-actions #user-refresh,
.account-list-panel .account-list-actions .account-refresh-button{
  min-height:42px!important;
  padding:9px 18px!important;
  font-size:15px!important;
  font-weight:700!important;
  color:#55e58b!important;
  border-color:#2fbf6b!important;
  background:#123b29!important;
}
.account-list-panel .account-list-actions #user-refresh:hover,
.account-list-panel .account-list-actions .account-refresh-button:hover{color:#fff!important;background:#17663d!important;border-color:#45dd87!important}
@media(max-width:600px){
  .account-list-panel .section-heading>div:first-child.account-heading-actions{gap:7px!important}
  .account-list-panel .account-heading-actions #user-renew{min-height:38px!important;padding:7px 14px!important;font-size:14px!important}
  .account-list-panel .account-list-actions #user-refresh,
  .account-list-panel .account-list-actions .account-refresh-button{min-height:40px!important;padding:8px 14px!important;font-size:14px!important}
}