/* v50.91 — unified top-header visual system (equipment header is the reference) */
:root{
  --rs-head-max:980px;
  --rs-head-pad-x:12px;
  --rs-head-switch-h:34px;
  --rs-head-radius:11px;
  --rs-head-dark:rgba(0,0,0,.20);
  --rs-head-border:rgba(255,255,255,.34);
  --rs-head-band:linear-gradient(180deg,rgba(9,16,30,.98),rgba(12,19,34,.95));
}

/* Same hero background / density on all three tools */
.cp-top-shell header, .status-header{
  position:relative;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  overflow:hidden;
  isolation:isolate;
  padding:0 !important;
}
.cp-top-shell header::before, .status-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,15,30,.28);
  pointer-events:none;
  z-index:0;
}

.hdr, .status-hero{
  position:relative;
  z-index:1;
  width:min(100%,var(--rs-head-max)) !important;
  margin:0 auto !important;
  padding:max(8px,env(safe-area-inset-top)) var(--rs-head-pad-x) 12px !important;
}

/* Two equal navigation buttons at the very top */
.hdr-top, .status-hero-top{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:7px !important;
  width:100%;
  margin:0 !important;
}
.hdr-actions-row{ display:contents !important; }

.cp-top-shell .switchbtn, .status-switchbtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:var(--rs-head-switch-h) !important;
  height:auto !important;
  padding:7px 8px !important;
  margin:0 !important;
  border:1px solid var(--rs-head-border) !important;
  border-radius:var(--rs-head-radius) !important;
  background:var(--rs-head-dark) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:.73rem !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.15) !important;
}
.cp-top-shell .switchbtn:active, .status-switchbtn:active{ transform:translateY(1px); }
.rs-switch-icon{
  flex:0 0 auto;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.9rem !important;
  line-height:1 !important;
}
.rs-switch-icon--image{
  width:22px;
  height:22px;
}
.rs-switch-icon--image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.cp-top-shell .switchbtn .navtxt, .status-switchbtn span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Logo / brand block */
.hdr-brand, .status-hero-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  width:100%;

}

/* Page label + optional page-specific info */
.hdr-subtitle-row, .status-hero-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  width:100%;
  margin:0 !important;
}
.hdr-subtitle, .status-hero-copy{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center;

  max-width:70%;
  padding:6px 13px !important;
  margin:0 !important;
  border:1px solid #f4c38c !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#f0ab63,#d8842a) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  letter-spacing:.06em !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 8px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.22) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
}
.hdr-subtitle::before, .status-hero-copy::before{ content:none !important; display:none !important; }
.rs-page-label-icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:7px;
  border-radius:6px;
  overflow:hidden;
}
.rs-page-label-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38));
}

/* Same yellow description band */
.hdr-desc, .status-hero-sub{

  width:100% !important;
  max-width:none !important;

  margin:1px 0 0 !important;
  padding:7px 11px !important;
  border:1px solid #f4e39b !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#efd86b,#d5b740) !important;
  color:#242424 !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  text-align:left !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.22) !important;
  text-shadow:none !important;
}
.hdr-sub{ margin:0 !important; }

/* Tool/action band: same frame and button rhythm */
.cp-toolbar-band,
.status-toolbar-band,
.equip-tabs-band{
  background:var(--rs-head-band) !important;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
.cp-toolbar-inner,
.status-toolbar-inner,
.equip-tabs-band .equip-toolbar-inner{
  width:min(100%,var(--rs-head-max)) !important;
  max-width:var(--rs-head-max) !important;
  margin:0 auto !important;

}
.cp-toolbar-band .toolbtn,
.status-toolbar-band .status-toolbtn,
.equip-tabs-band .tab{
  min-height:55px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(241,245,249,.94) !important;
  box-shadow:none !important;
}
.cp-toolbar-band .toolbtn:hover,
.status-toolbar-band .status-toolbtn:hover,
.equip-tabs-band .tab:hover{ background:rgba(255,255,255,.08) !important; }
.cp-toolbar-band .toolbtn.active,
.status-toolbar-band .status-toolbtn.active,
.equip-tabs-band .tab.is-active{
  border-color:rgba(147,197,253,.78) !important;
  background:linear-gradient(135deg,#2563eb,#4f46e5) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

@media(max-width:520px){
  :root{
    --rs-head-pad-x:9px;
  }
  .cp-top-shell .switchbtn, .status-switchbtn{
    min-height:32px !important;
    padding:6px 6px !important;
    font-size:.68rem !important;
  }
  .hdr-subtitle, .status-hero-copy{
    min-height:30px !important;
    padding:5px 10px !important;
    font-size:12.5px !important;
    letter-spacing:.025em !important;
    max-width:68%;
  }
  .hdr-desc, .status-hero-sub{
    padding:6px 9px !important;
    font-size:10.5px !important;
  }

  .cp-toolbar-band .toolbtn,
  .status-toolbar-band .status-toolbtn,
  .equip-tabs-band .tab{ min-height:52px !important; }
}

@media(max-width:370px){
  .rs-page-label-icon{ width:18px; height:18px; margin-right:5px; }
  .cp-top-shell .switchbtn, .status-switchbtn{ font-size:.62rem !important; }
  .rs-switch-icon--image{ width:16px; height:16px; }
  .hdr-subtitle, .status-hero-copy{ font-size:11.5px !important; padding-left:8px !important; padding-right:8px !important; }
}

/* CP toolbar — shared visual treatment; geometry is defined below. */
.cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn{
  border-color:rgba(255,255,255,.26) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.12) !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn:active{
  background:linear-gradient(135deg,rgba(37,99,235,.48),rgba(79,70,229,.42)) !important;
  border-color:rgba(147,197,253,.70) !important;
}

/* ======================================================================
   v52.06 — header / toolbar geometry lock + page identity colors
   Goal: all three tools share the same header height and toolbar rhythm.
   ====================================================================== */
:root{
  --rs-page-label-h:34px;
  --rs-desc-min-h:42px;
  --rs-toolbar-btn-h:62px;
  --rs-toolbar-gap:7px;
}

/* Remove historical per-page spacing differences between switch row and brand. */
.hdr-hideable,
.status-hero-hideable{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}
.hdr-brand, .status-hero-brand{
  margin-top:7px !important;
  gap:4px !important;
}

/* Same logo geometry on every tool. */

/* Page identity labels: CP = blue, Status = orange, Equipment = green. */
.hdr-subtitle, .status-hero-copy{
  min-height:var(--rs-page-label-h) !important;
  height:var(--rs-page-label-h) !important;
  box-sizing:border-box !important;
}
.hdr-subtitle{
  border-color:#93c5fd !important;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
  box-shadow:0 8px 20px rgba(30,64,175,.30),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.status-hero-copy{
  border-color:#f4c38c !important;
  background:linear-gradient(135deg,#f0ab63,#d8842a) !important;
  box-shadow:0 8px 20px rgba(180,83,9,.26),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Description bands reserve the same vertical space even when one text fits on one line. */
.hdr-desc, .status-hero-sub{
  display:flex !important;
  align-items:center !important;
  min-height:var(--rs-desc-min-h) !important;
  box-sizing:border-box !important;
}

/* One toolbar geometry for CP utilities / Status tabs / Equipment categories. */
.cp-toolbar-inner,
.status-toolbar-inner,
.equip-tabs-band .equip-toolbar-inner{
  padding:6px 9px 7px !important;
}
.status-toolbar-wrap{
  margin:0 !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three,
.status-toolbar-band .status-toolbar,
.equip-tabs-band .tabs{
  display:grid !important;
  gap:var(--rs-toolbar-gap) !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.cp-toolbar-band #topToolbar.cp-toolbar-three{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.status-toolbar-band .status-toolbar,
.equip-tabs-band .tabs{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn,
.status-toolbar-band .status-toolbtn,
.equip-tabs-band .tab{
  width:100% !important;
  min-width:0 !important;
  min-height:var(--rs-toolbar-btn-h) !important;
  height:var(--rs-toolbar-btn-h) !important;
  max-height:var(--rs-toolbar-btn-h) !important;
  margin:0 !important;
  padding:6px 4px !important;
  gap:4px !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:center !important;
}
.status-toolbar-band .status-toolbtn{
  display:flex !important;
  flex-direction:column !important;
}
.equip-tabs-band .tab{
  display:grid !important;
  place-items:center !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn svg,
.status-toolbar-band .status-toolbtn .ico{
  width:20px !important;
  height:20px !important;
  font-size:20px !important;
  line-height:20px !important;
  flex:0 0 auto !important;
}
.equip-tabs-band .tab > span{
  font-size:1rem !important;
  line-height:20px !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .txt,
.status-toolbar-band .status-toolbtn .txt,
.equip-tabs-band .tab strong{
  font-size:11px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  text-align:center !important;
}
.cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .txt-stones{
  font-size:9.5px !important;
  line-height:1.02 !important;
}

@media(max-width:520px){
  :root{
    --rs-page-label-h:30px;
    --rs-desc-min-h:40px;
    --rs-toolbar-btn-h:60px;
    --rs-toolbar-gap:7px;
  }
  .hdr-brand, .status-hero-brand{ margin-top:6px !important; }
  .cp-toolbar-inner,
  .status-toolbar-inner,
  .equip-tabs-band .equip-toolbar-inner{ padding:5px 8px 6px !important; }
}

@media(max-width:370px){
  :root{ --rs-toolbar-gap:5px; }
  .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .txt,
  .status-toolbar-band .status-toolbtn .txt,
  .equip-tabs-band .tab strong{ font-size:10px !important; }
  .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .txt-stones{ font-size:8.8px !important; }
}


/* v53.35 — header image banner treatment on all pages */
.hdr-brand, .status-hero-brand{
  gap:10px !important;
  margin-top:8px !important;
}
.hdr-subtitle-row, .status-hero-title-row{
  margin-top:-2px !important;
}
@media(max-width:520px){
}


/* v53.35 — remove legacy header artwork; the new title illustration IS the header */
.cp-top-shell header, .status-header{
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.cp-top-shell header::before, .status-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
.hdr, .status-hero{
  background:transparent !important;
}
.hdr-hideable, .status-hero-hideable{
  background:transparent !important;
}
.hdr-top, .status-hero-top{
  position:relative;
  z-index:2;
}
.hdr-brand, .status-hero-brand{
  position:relative;
  z-index:1;
}

/* v53.36 — keep page-switch navigation completely clear of the title artwork */
.hdr-top,
.status-hero-top{
  position:relative !important;
  z-index:3 !important;
  margin:0 0 14px !important;
}
.hdr-brand,
.status-hero-brand{
  position:relative !important;
  z-index:1 !important;
  margin-top:0 !important;
}
.cp-top-shell .switchbtn,
.status-switchbtn{
  box-shadow:0 5px 12px rgba(0,0,0,.18) !important;
}
@media(max-width:520px){
  .hdr-top,
  .status-hero-top{
    margin-bottom:12px !important;
  }
  .hdr-brand,
  .status-hero-brand{
    margin-top:0 !important;
  }
}


/* v53.45 — CP toolbar rebalance: unify icon/text rhythm */
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn{
  min-height:72px !important;
  height:72px !important;
  max-height:72px !important;
  padding:8px 6px !important;
  gap:5px !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .toolbtn-custom-icon,
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn > svg{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .toolbtn-custom-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .toolbtn-custom-icon--large img{
  border-radius:8px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .txt{
  font-size:13px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  text-align:center !important;
  white-space:nowrap !important;
  letter-spacing:0 !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .txt-stones{
  font-size:12px !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}
@media (max-width:520px){
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn{
    min-height:68px !important;
    height:68px !important;
    max-height:68px !important;
    padding:7px 5px !important;
    gap:4px !important;
  }
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .toolbtn-custom-icon,
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn > svg{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .txt{
    font-size:12px !important;
  }
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .txt-stones{
    font-size:11px !important;
  }
}
@media (max-width:380px){
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three .toolbtn .txt{
    font-size:11px !important;
  }
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .txt-stones{
    font-size:10px !important;
  }
}


/* v53.47 — use the icon's built-in frame; match キャラ一覧 geometry exactly */
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .toolbtn-custom-icon{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}
body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .toolbtn-custom-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:8px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
}
@media (max-width:520px){
  body.cp-page .cp-toolbar-band #topToolbar.cp-toolbar-three #btnHeaderStones .toolbtn-custom-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }
}


/* v53.52 — tighter auto-hide + no content bleed under the tall title header */
.cp-top-shell,
.status-top-shell{
  background:rgba(5,7,10,.995) !important;
  isolation:isolate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .16s cubic-bezier(.22,.72,.2,1) !important;
}
.cp-top-shell.is-header-hidden,
.status-top-shell.is-header-hidden{
  transition-duration:.14s !important;
}
/* Keep the visible title region opaque while it is sticky.  This is a plain
   neutral backing only; the old scenery/header artwork is not restored. */
.cp-top-shell > header,
.status-top-shell > .status-header,
.status-top-shell > header.status-header{
  background:rgba(5,7,10,.995) !important;
}
@media (prefers-reduced-motion: reduce){
  .cp-top-shell,
  .status-top-shell{ transition:none !important; }
}

/* v53.60 — main page identity titles: larger and centered on all three tools */
.hdr-subtitle-row,
.status-hero-title-row{
  justify-content:center !important;
  text-align:center !important;
}
.hdr-subtitle,
.status-hero-copy{
  max-width:92% !important;
  min-height:44px !important;
  height:44px !important;
  padding:7px 18px !important;
  font-size:18px !important;
  letter-spacing:.055em !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.rs-page-label-icon{
  width:30px !important;
  height:30px !important;
  margin-right:9px !important;
  border-radius:7px !important;
}
@media(max-width:520px){
  .hdr-subtitle,
  .status-hero-copy{
    max-width:94% !important;
    min-height:40px !important;
    height:40px !important;
    padding:6px 15px !important;
    font-size:16px !important;
    letter-spacing:.04em !important;
  }
  .rs-page-label-icon{
    width:27px !important;
    height:27px !important;
    margin-right:8px !important;
  }
}
@media(max-width:370px){
  .hdr-subtitle,
  .status-hero-copy{
    font-size:15px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .rs-page-label-icon{
    width:25px !important;
    height:25px !important;
    margin-right:7px !important;
  }
}