/* ─────────────────────────────────────────────────────────────────────────────
   planner_site_style.css -- the Celebration Planner in the SAME look as the Banner Creator and Banner
   Speculation (owner, 7 Nov 2026: "make celebration planner to look like these two pages"). Scoped to
   body[data-tool=planner]. The first part is GENERATED from banner_site_style.css (the site menu, the P3
   band, B1 plates, inputs, picker tiles, the Download Options pop-ups, the type-tinted character boxes) with every
   Banner-Creator-only rule left out; the hand-written part at the end puts every panel in the house box (option B
   of bannerbox_trial.html) on the P1 page. Re-make the generated part with the scratchpad script mkplanner.py if
   the banner style changes; keep the tail.
   ───────────────────────────────────────────────────────────────────────────── */
body[data-tool=planner]{--gold:var(--acc,#FFD84A);--edge:rgba(255,255,255,.07);background:#0b0d12;font-family:Rajdhani,sans-serif}
body[data-tool=planner] .site-head{display:none !important}
body[data-tool=planner] .studio{padding-top:0 !important}
body[data-tool=planner] .bc-band{position:relative;isolation:isolate;grid-column:1/-1 !important;grid-row:1;padding:18px 0 18px;margin:0 0 22px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
body[data-tool=planner] .bc-band::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  pointer-events:none;border-bottom:2px solid var(--acc,#FFD84A);
  background:radial-gradient(ellipse at 50% 160%,rgba(var(--acc-rgb,255,216,74),.34),transparent 62%),
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,#0d1016}
html{overflow-x:clip}
body[data-tool=planner] .bc-band > *{margin:0 !important}
body[data-tool=planner] .bc-band .tool-switch, body[data-tool=planner] .bc-band .toolbar{justify-content:center;flex-wrap:wrap;padding:0}
body[data-tool=planner] .bc-band .toolbar .quiet{margin-left:0}
body[data-tool=planner] .bc-band .intro{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
body[data-tool=planner] .bc-band .intro h1{margin:0;font:400 1.35rem 'Black Han Sans',sans-serif;font-style:italic;letter-spacing:2px;color:var(--acc,#FFD84A)}
body[data-tool=planner] .bc-band .draft-status{font:500 .78rem Oswald,sans-serif;letter-spacing:.5px;color:#9aa1b0;padding:0}
body[data-tool=planner] .plate{color:#fff;font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.85)}
body[data-tool=planner] .plate::before{border-radius:4px;
  background:linear-gradient(rgba(var(--acc-rgb,255,216,74),.08),rgba(var(--acc-rgb,255,216,74),.08)),#151922;
  border:1px solid rgba(var(--acc-rgb,255,216,74),.45);
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
body[data-tool=planner] .plate:hover, body[data-tool=planner] .plate:focus-visible{color:#fff}
body[data-tool=planner] .plate:hover::before, body[data-tool=planner] .plate:focus-visible::before{border-color:var(--acc,#FFD84A);box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] .plate.active, body[data-tool=planner] .plate[aria-pressed=true]{color:#fff}
body[data-tool=planner] .plate[aria-current=page]::before, body[data-tool=planner] .plate.active::before, body[data-tool=planner] .plate[aria-pressed=true]::before{background:rgba(var(--acc-rgb,255,216,74),.22);border-color:var(--acc,#FFD84A);box-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.2)}
body[data-tool=planner] .plate.quiet::before{border-color:rgba(255,255,255,.16)}
body[data-tool=planner] .plate.danger{color:#ff9a9a}
body[data-tool=planner] .plate.danger::before{background:linear-gradient(rgba(232,48,48,.10),rgba(232,48,48,.10)),#151922;border-color:rgba(255,110,110,.45)}
body[data-tool=planner] .plate:disabled{opacity:.35}
body[data-tool=planner] .text-button{color:var(--acc,#FFD84A);font-weight:700}
body[data-tool=planner] .text-button:hover{color:#fff}
body[data-tool=planner] button:focus-visible, body[data-tool=planner] a:focus-visible{outline-color:var(--acc,#FFD84A)}
body[data-tool=planner] .panel{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible}
body[data-tool=planner] .panel-heading{padding:0 0 10px;margin:0 0 4px;background:none;border-bottom:0;display:flex;align-items:center;gap:12px;
  font:400 1.05rem 'Black Han Sans',sans-serif;font-style:italic;letter-spacing:.5px;color:var(--acc,#FFD84A)}
body[data-tool=planner] .panel-heading::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--acc-rgb,255,216,74),.5),transparent)}
body[data-tool=planner] .info-fields{padding:6px 0 0}
body[data-tool=planner] .featured-section{border-top:0}
body[data-tool=planner] .unit-slot{border:0 !important;background:#0d1017;border-radius:8px}
body[data-tool=planner] .unit-slot:hover{background:#12161f;box-shadow:0 0 0 1px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] input:not([type=range]):not([type=checkbox]):not([type=file]), body[data-tool=planner] textarea, body[data-tool=planner] select{background:#06070a !important;border:0 !important;border-radius:6px !important;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05) !important;color:#eef0f4}
body[data-tool=planner] input:focus, body[data-tool=planner] textarea:focus, body[data-tool=planner] select:focus{outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 0 0 1px rgba(var(--acc-rgb,255,216,74),.6) !important}
body[data-tool=planner] input[type=range]{accent-color:var(--acc,#FFD84A)}
body[data-tool=planner] input[type=checkbox]{accent-color:var(--acc,#FFD84A)}
body[data-tool=planner] .art-card, body[data-tool=planner] .art-stage{border:0 !important;border-radius:8px}
body[data-tool=planner] .art-card:hover{box-shadow:0 0 0 2px rgba(var(--acc-rgb,255,216,74),.55),0 0 16px rgba(var(--acc-rgb,255,216,74),.25) !important}
body[data-tool=planner] .art-card[aria-pressed=true]{background:rgba(var(--acc-rgb,255,216,74),.12);box-shadow:0 0 0 2px var(--acc,#FFD84A),0 0 16px rgba(var(--acc-rgb,255,216,74),.3) !important}
body[data-tool=planner] .segments button, body[data-tool=planner] .type-options button, body[data-tool=planner] .picker-type{border:0 !important;background:#141821;border-radius:6px}
body[data-tool=planner] .segments button:hover, body[data-tool=planner] .type-options button:hover, body[data-tool=planner] .picker-type:hover{background:#1a1f2a}
body[data-tool=planner] .segments button[aria-pressed=true], body[data-tool=planner] .type-options button[aria-pressed=true], body[data-tool=planner] .picker-type[aria-pressed=true]{background:rgba(var(--acc-rgb,255,216,74),.16);color:#fff;box-shadow:inset 0 0 0 1px var(--acc,#FFD84A),0 0 10px rgba(var(--acc-rgb,255,216,74),.2)}
body[data-tool=planner] .featured-chip > button{border:0;background:#1a1f2a}
body[data-tool=planner] .featured-chip > button:hover{color:var(--acc,#FFD84A);background:rgba(var(--acc-rgb,255,216,74),.14)}
body[data-tool=planner] .featured-summon .feat-head::before, body[data-tool=planner] .featured-summon .feat-head::after{background:rgba(var(--acc-rgb,255,216,74),.4)}
body[data-tool=planner] .trial-tag{border:0}
body[data-tool=planner] dialog.modal{background:linear-gradient(180deg,#12151d,#08090d);border:1px solid rgba(var(--acc-rgb,255,216,74),.4);border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.75),0 0 30px rgba(var(--acc-rgb,255,216,74),.10)}
body[data-tool=planner] dialog.modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
body[data-tool=planner] .modal-heading{background:#0d1017;border-bottom:1px solid rgba(var(--acc-rgb,255,216,74),.28)}
body[data-tool=planner] .modal-heading h2{font:400 1.15rem 'Black Han Sans',sans-serif;font-style:italic;letter-spacing:.5px;color:var(--acc,#FFD84A)}
body[data-tool=planner] .modal-heading .eyebrow{color:#9aa1b0}
body[data-tool=planner] .modal-actions{background:#0d1017;border-top:1px solid rgba(var(--acc-rgb,255,216,74),.22)}
body[data-tool=planner] .picker-tools{border-bottom:0;background:#0b0d12}
body[data-tool=planner] .close{width:34px;height:34px;min-width:0;min-height:0;padding:0;display:inline-grid;place-items:center;
  font-size:0;color:#aeb4c0;background:none;border:0;border-radius:50%;transition:color .15s,background-color .15s}
body[data-tool=planner] .close::before{content:'\2715';font:400 18px 'Segoe UI Symbol','Inter',system-ui,sans-serif;line-height:1}
body[data-tool=planner] .close:hover{color:var(--acc,#FFD84A);background:rgba(var(--acc-rgb,255,216,74),.12)}
body[data-tool=planner] .toast{background:linear-gradient(180deg,#12151d,#08090d);border:1px solid rgba(var(--acc-rgb,255,216,74),.5);border-radius:10px}
@media(max-width:700px){
  body[data-tool=planner] .bc-band{padding:14px 0}
}
body[data-tool=planner] #saveBannerCopyBtn{display:none !important}
body[data-tool=planner] dialog.ask-dialog{width:min(440px,calc(100% - 28px))}
body[data-tool=planner] .ask-dialog .ask-text{margin:0;padding:20px 22px;font:500 1rem Inter,sans-serif;color:#d6dae2;line-height:1.5}
body[data-tool=planner] .ask-dialog .modal-actions{justify-content:flex-end}
body[data-tool=planner] .unit-slot.tslot{border-left:3px solid var(--tc) !important;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),#0d1017}
body[data-tool=planner] .unit-slot.tslot.main-slot{box-shadow:0 0 18px -6px color-mix(in srgb,var(--tc) 70%,transparent)}
body[data-tool=planner] .unit-slot.tslot:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 32%,transparent),transparent 75%),#12161f;box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 55%,transparent)}
body[data-tool=planner] .unit-slot .unit-tp{display:block;font:700 .62rem Oswald,sans-serif;letter-spacing:1.5px;color:var(--tc);margin:0 0 2px}
body[data-tool=planner] .type-options button, body[data-tool=planner] .picker-type, body[data-tool=planner] .rarity-options button, body[data-tool=planner] #pickerRarities button{background:none !important;border:0 !important;box-shadow:none !important;outline:0}
body[data-tool=planner] .type-options button img, body[data-tool=planner] .picker-type img, body[data-tool=planner] .rarity-options button img, body[data-tool=planner] #pickerRarities button img{opacity:.68;filter:none;transition:opacity .15s,filter .15s,transform .15s}
body[data-tool=planner] .type-options button:hover img, body[data-tool=planner] .picker-type:hover img, body[data-tool=planner] .rarity-options button:hover img, body[data-tool=planner] #pickerRarities button:hover img{opacity:.85;filter:none}
body[data-tool=planner] .type-options button[aria-pressed=true] img, body[data-tool=planner] .picker-type[aria-pressed=true] img, body[data-tool=planner] .rarity-options button[aria-pressed=true] img, body[data-tool=planner] #pickerRarities button[aria-pressed=true] img{opacity:1;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb,255,216,74),.75));transform:scale(1.06)}
body[data-tool=planner] .bc-band > .tool-switch{margin:14px auto 4px}
html:has(body[data-tool=planner]), body[data-tool=planner]{background:#11141b}

/* ── hand-written: the planner's own parts ── */
body[data-tool=planner] .bc-band .intro p,body[data-tool=planner] .bc-band .intro .eyebrow,
body[data-tool=planner] #draftStatus{display:none !important}
/* every panel = the house box (bannerbox_trial B): near-black, a thin site-colour edge, a soft shadow */
body[data-tool=planner] .panel{background:linear-gradient(180deg,#151821,#0a0c11);border:1px solid rgba(var(--acc-rgb,255,216,74),.35);
  border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
/* the summon banners keep their own colour along the top (Dokkan Fest red, Carnival teal ...) */
body[data-tool=planner] .banner-panel{border-top:2px solid var(--banner-color)}
body[data-tool=planner] .panel-heading{padding:16px 18px 6px}
body[data-tool=planner] .info-fields{padding:8px 18px 18px}
body[data-tool=planner] .banner-head,body[data-tool=planner] .awakening-head{background:none;border-bottom:1px solid rgba(var(--acc-rgb,255,216,74),.18)}
body[data-tool=planner] .featured-section{border-top:0}
body[data-tool=planner] .featured-summon .feat-box{background:#0a0c11;border:1px solid rgba(var(--acc-rgb,255,216,74),.6);border-radius:10px;
  box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.18),inset 0 0 18px rgba(var(--acc-rgb,255,216,74),.06)}
body[data-tool=planner] .featured-summon .feat-head{color:var(--acc,#FFD84A)}
body[data-tool=planner] .part-heading h2{color:#fff}
body[data-tool=planner] .part-number,body[data-tool=planner] .eyebrow,body[data-tool=planner] .edit-hint{color:var(--acc,#FFD84A)}
body[data-tool=planner] .part-name{border-bottom-color:rgba(var(--acc-rgb,255,216,74),.25)}
body[data-tool=planner] .thumb-placeholder{background:#0a0c11}
body[data-tool=planner] .preview-intro{border-bottom-color:rgba(var(--acc-rgb,255,216,74),.3)}
body[data-tool=planner] .preview-intro h2{color:var(--acc,#FFD84A)}
body[data-tool=planner] .trial-foot{color:#7d8392}

/* ── 7 Nov 2026 (owner): the toolbar as icons, a picture download, EZA / SEZA badges bottom right ── */
/* the real toolbar stays in the page (the icons press its buttons) but is not shown */
body[data-tool=planner].pl-icon-actions .bc-band > nav.toolbar{display:none !important}
body[data-tool=planner] .pl-actions{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
body[data-tool=planner] .pl-act{position:relative;display:inline-grid;place-items:center;width:40px;height:36px;padding:0 !important;color:var(--acc,#FFD84A)}
body[data-tool=planner] .pl-act:hover,body[data-tool=planner] .pl-act.lit{color:#fff}
body[data-tool=planner] .pl-act.lit::before{border-color:var(--acc,#FFD84A) !important;box-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.45)}
body[data-tool=planner] .pl-act.pl-dl{margin-left:0}
body[data-tool=planner] .pl-act.busy{opacity:.55;cursor:progress}
body[data-tool=planner] .pl-act .tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#08090d;
  border:1px solid rgba(var(--acc-rgb,255,216,74),.4);border-radius:5px;padding:3px 8px;font:700 .68rem Rajdhani,sans-serif;letter-spacing:1px;
  text-transform:uppercase;color:#fff;opacity:0;pointer-events:none;transition:opacity .15s;z-index:70}
body[data-tool=planner] .pl-act:hover .tip,body[data-tool=planner] .pl-act:focus-visible .tip{opacity:1}
/* the last icon's name would hang past a phone's edge and make the page scroll sideways: it opens to the left */
body[data-tool=planner] .pl-act:last-child .tip{left:auto;right:0;transform:none}
/* EZA / SEZA badge on a character tile: bottom right (it was over the art's top left) */
/* = detail.html's .ft-ezaseza, the card page's own spot for it (bottom 9.5%, right -10%, 56.5%) */
body[data-tool=planner] .thumb .awakening{left:auto;top:auto;right:-10%;bottom:9.5%;width:56.5%;height:auto;z-index:6}
/* the SSR / UR / LR stages under a character are framed tiles (same as the Banner Creator) */
body[data-tool=planner] .stage-strip.framed-stages{display:flex !important;gap:10px;margin-top:10px}
body[data-tool=planner] .stage-strip.framed-stages .thumb-placeholder{font:700 11px Oswald,sans-serif}
body[data-tool=planner] .side-slots .stage-strip.framed-stages .thumb{--size:38px !important}
body[data-tool=planner] .side-slots .stage-strip.framed-stages{gap:8px;margin-top:6px}
/* Design Banner + Add Banner: icons side by side in each summon banner, names on hover (same plates as the top icons) */
body[data-tool=planner] .bn-acts{display:flex;gap:6px;align-items:center}
body[data-tool=planner] .bn-act{position:relative;display:inline-grid;place-items:center;width:40px;height:36px;padding:0 !important;color:var(--acc,#FFD84A)}
body[data-tool=planner] .bn-act:hover{color:#fff}
body[data-tool=planner] .bn-act .tip{position:absolute;top:calc(100% + 7px);left:0;white-space:nowrap;background:#08090d;
  border:1px solid rgba(var(--acc-rgb,255,216,74),.4);border-radius:5px;padding:3px 8px;font:700 .68rem Rajdhani,sans-serif;letter-spacing:1px;
  text-transform:uppercase;color:#fff;opacity:0;pointer-events:none;transition:opacity .15s;z-index:70}
body[data-tool=planner] .bn-act:hover .tip,body[data-tool=planner] .bn-act:focus-visible .tip{opacity:1}
body[data-tool=planner] .saved-banner-dialog .empty-message{text-align:center;padding:34px 20px;font:400 1.3rem 'Black Han Sans',sans-serif;font-style:italic;color:#9aa1b0}
/* "No banner": the pop-up shrinks to the message instead of standing at full height with nothing in it */
body[data-tool=planner] dialog.saved-banner-dialog:has(.empty-message){height:fit-content !important;max-height:none;width:min(440px,calc(100% - 24px))}
body[data-tool=planner] .saved-banner-dialog:has(.empty-message) .saved-banner-list{flex:none;min-height:0;overflow:visible}
body[data-tool=planner] .saved-banner-dialog:has(.empty-message) .modal-actions{display:none}

/* ── NEW ITEMS: support memories (blank film frame + your picture) and support items (item frame + your picture) ── */
body[data-tool=planner] .items-panel{margin-top:20px}
body[data-tool=planner] .items-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-right:18px}
body[data-tool=planner] .items-head .panel-heading{flex:1;min-width:200px}
body[data-tool=planner] .items-add{display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}
body[data-tool=planner] .items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;padding:12px 18px 18px}
body[data-tool=planner] .ni-empty{grid-column:1/-1;margin:4px 0}
body[data-tool=planner] .ni-card{display:flex;align-items:center;gap:16px;text-align:left;padding:12px 14px;border:0;border-radius:10px;background:#0d1017;color:#eef0f4;cursor:pointer;min-width:0}
body[data-tool=planner] .ni-card:hover{background:#12161f;box-shadow:0 0 0 1px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] .ni-card:disabled{cursor:default}
body[data-tool=planner] .ni-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-tool=planner] .ni-kind{font:700 .62rem Oswald,sans-serif;letter-spacing:1.5px;color:var(--acc,#FFD84A)}
body[data-tool=planner] .ni-name{font:700 1.05rem/1.2 Rajdhani,sans-serif;color:#fff;overflow-wrap:anywhere}
body[data-tool=planner] .ni-eff{font:500 .82rem/1.4 Inter,sans-serif;color:#aeb4c0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* a memory tile: the film frame on top, the picture in its window (x 25-125, y 9-89 of 152 x 100, a hair larger so no gap shows) */
body[data-tool=planner] .ni-mem{position:relative;display:block;flex:none;width:152px;aspect-ratio:152/100}
body[data-tool=planner] .ni-mem .ni-pic{position:absolute;left:16%;top:8.5%;width:67.2%;height:82%;background:#0b0d12 no-repeat center/cover}
body[data-tool=planner] .ni-mem .ni-film{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* an item tile: the frame, the picture over it at 0.98x (Support Items page) */
body[data-tool=planner] .ni-item{position:relative;display:block;flex:none;width:96px;aspect-ratio:1}
body[data-tool=planner] .ni-item .ni-frame{position:absolute;inset:0;width:100%;height:100%}
/* the picture sits INSIDE the frame's plate (the bevel is the outer 12%), placed by its zoom / position */
/* the frame's plate is a PENTAGON (point at the top), measured on the 200px gold frame: apex (100,14), shoulders
   (13,44) / (187,44), bottom (29,186) / (171,186). The picture box is the plate's bounding box (x 6.5-93.5%, y 7-93%)
   cut to that shape, a hair inside so it never touches the bevel. The download draws the same cut on a canvas
   (html2canvas has no clip-path) -- celebration_poster.js composeItems(); keep the two equal. */
body[data-tool=planner] .ni-item .ni-pic{position:absolute;left:6.5%;top:7%;width:87%;height:86%;background:no-repeat center/contain;z-index:1;
  clip-path:polygon(50% 1.5%,98.5% 18%,90% 98.5%,10% 98.5%,1.5% 18%)}
body[data-tool=planner] .ni-pic.ni-none{display:grid;place-items:center;background:none;color:#6d7586;font:400 30px Rajdhani,sans-serif}
body[data-tool=planner] .ni-mem .ni-pic.ni-none{background:#141821}
/* the editor */
body[data-tool=planner] .item-dialog{width:min(640px,calc(100% - 24px))}
body[data-tool=planner] .ni-edit{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
body[data-tool=planner] .ni-big .ni-mem{width:260px}
body[data-tool=planner] .ni-big .ni-item{width:150px}
body[data-tool=planner] .ni-side{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px}
body[data-tool=planner] .ni-frames{display:flex;gap:8px;flex-wrap:wrap}
body[data-tool=planner] .ni-fbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:0;border-radius:8px;background:#0d1017;color:#aeb4c0;cursor:pointer;font:700 .66rem Oswald,sans-serif;letter-spacing:1px;text-transform:uppercase}
body[data-tool=planner] .ni-fbtn img{height:38px;width:auto;display:block}
body[data-tool=planner] .ni-fbtn:hover{color:#fff;box-shadow:0 0 0 1px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] .ni-fbtn[aria-pressed=true]{color:#fff;background:rgba(var(--acc-rgb,255,216,74),.14);box-shadow:inset 0 0 0 1px var(--acc,#FFD84A),0 0 10px rgba(var(--acc-rgb,255,216,74),.2)}
body[data-tool=planner] .ni-upload{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:600px){body[data-tool=planner] .items-grid{grid-template-columns:1fr;padding:10px}
  body[data-tool=planner] .ni-card .ni-mem{width:120px}body[data-tool=planner] .ni-card .ni-item{width:78px}
  body[data-tool=planner] .ni-big .ni-mem{width:100%}}

/* the picture adjuster in the item editor */
body[data-tool=planner] .ni-big{touch-action:none;cursor:grab}
body[data-tool=planner] .ni-big:active{cursor:grabbing}
body[data-tool=planner] .ni-adjust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
body[data-tool=planner] .ni-adjust[hidden]{display:none}
body[data-tool=planner] .ni-adjust input[type=range]{flex:1;min-width:120px}
body[data-tool=planner] .ni-hint{width:100%;margin:0}
/* a designed banner in its summon banner, framed like the game's banner art */
body[data-tool=planner] .attached-banner-image{border:2px solid rgba(var(--acc-rgb,255,216,74),.45);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.45);background:#06070a}
body[data-tool=planner] .attached-banner{justify-items:stretch}
body[data-tool=planner] .attached-banner .bn-acts{justify-self:start}
/* Picture Background: the button in the part heading and its pop-up */
body[data-tool=planner] .part-heading .cv-btn{flex:none}
body[data-tool=planner] .part-heading .cv-btn .tip{left:auto;right:0}
body[data-tool=planner] .cover-dialog{width:min(760px,calc(100% - 24px))}
body[data-tool=planner] .cv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[data-tool=planner] .cv-opt{display:flex;flex-direction:column;gap:8px;padding:8px;border:0;border-radius:10px;background:#0d1017;color:#aeb4c0;cursor:pointer;font:700 .72rem Oswald,sans-serif;letter-spacing:1px;text-transform:uppercase}
body[data-tool=planner] .cv-opt:hover:not(:disabled){color:#fff;box-shadow:0 0 0 1px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] .cv-opt[aria-pressed=true]{color:#fff;background:rgba(var(--acc-rgb,255,216,74),.14);box-shadow:inset 0 0 0 1px var(--acc,#FFD84A),0 0 10px rgba(var(--acc-rgb,255,216,74),.2)}
body[data-tool=planner] .cv-opt:disabled{opacity:.45;cursor:default}
body[data-tool=planner] .cv-pic{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#06070a}
body[data-tool=planner] .cv-art{position:absolute;inset:0;background:no-repeat center/cover}
body[data-tool=planner] .cv-char{position:absolute;left:0;right:0;top:4%;bottom:-6%;background:no-repeat center bottom/contain}
body[data-tool=planner] .cv-none{position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;font:600 .78rem Rajdhani,sans-serif;letter-spacing:.4px;text-transform:none;color:#6d7586}
@media(max-width:600px){body[data-tool=planner] .cv-grid{grid-template-columns:1fr 1fr}}
/* ZOOM / X / Y sliders for an item picture, one under the other */
body[data-tool=planner] .ni-adjust{display:grid;grid-template-columns:1fr;gap:4px}
body[data-tool=planner] .ni-sl{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px;margin:0}
body[data-tool=planner] .ni-sl .field-label{margin:0;white-space:nowrap}
body[data-tool=planner] .ni-adjust #itemReset{justify-self:start}
/* the designed banner in its summon banner: smaller, centred */
body[data-tool=planner] .attached-banner-image{width:min(100%,360px);justify-self:center}
/* My Drafts: the summon banners a celebration holds, as their logos */
body[data-tool=planner] .draft-kinds{display:flex;gap:10px;align-items:center;margin-top:6px}
body[data-tool=planner] .draft-kinds img{height:28px;width:auto;max-width:90px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* 8 Nov 2026 (owner): EZA / SEZA -- a remove X right on the tile, bigger characters in the editor, no import / export */
body[data-tool=planner] .aw-wrap{position:relative}
body[data-tool=planner] .aw-wrap>.unit-slot{width:100%}
body[data-tool=planner] .aw-x{position:absolute;top:8px;right:8px;z-index:8;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,17,.85);color:#c9ccd4;font:600 20px/1 Rajdhani,sans-serif;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
body[data-tool=planner] .aw-x:hover{color:#fff;border-color:rgba(var(--acc-rgb,255,216,74),.8);box-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.35)}
body[data-tool=planner] .awakening-slots .unit-slot{min-height:122px;padding:12px 44px 12px 14px;gap:16px}
body[data-tool=planner] .awakening-slots .unit-slot>.thumb{--size:98px}
body[data-tool=planner] .awakening-slots .unit-name{font-size:18px}
body[data-tool=planner] #exportBtn,body[data-tool=planner] #importBtn{display:none !important}

body[data-tool=planner] .picker-cat{min-width:220px;max-width:100%;padding:8px 12px;border-radius:6px;border:1px solid rgba(var(--acc-rgb,255,216,74),.45);background:linear-gradient(180deg,#151821,#08090d);color:var(--acc,#FFD84A);font:700 13px Rajdhani,sans-serif;letter-spacing:.5px}
body[data-tool=planner] .picker-cat option{background:#0d1017;color:#e6e8ee}
body[data-tool=planner] .picker-cat[hidden]{display:none}

/* 8 Nov 2026 (owner): main character + side banner -- no rarity text (UR / LR) under the name, and the SSR / UR / LR stage
   tiles bigger, still smaller than the character's own (last form) tile */
body[data-tool=planner] .banner-panel .unit-meta,
body[data-tool=planner] .awakening-slots .unit-meta,
body[data-tool=planner] .f2p-slots .unit-meta{display:none}
body[data-tool=planner] .banner-panel .main-slot .stage-strip.framed-stages .thumb{--size:70px !important}
body[data-tool=planner] .banner-panel .main-slot .stage-strip.framed-stages{gap:16px}
body[data-tool=planner] .side-slots .stage-strip.framed-stages .thumb{--size:46px !important}
body[data-tool=planner] .side-slots .stage-strip.framed-stages{gap:12px}

/* Optional character F2P flag: the Timeline's angled, glowing tag. */
.planner-f2p-control{display:flex;align-items:center;gap:12px;cursor:pointer}
.planner-f2p-control input{width:16px;height:16px;margin:0}
.planner-f2p-tag{position:relative;isolation:isolate;display:inline-block;width:auto;align-self:center;text-align:center;white-space:nowrap;padding:3px 14px;border:0;border-radius:0;background:none;font:700 .66rem Rajdhani,sans-serif;letter-spacing:1.6px;color:#40e0d0;text-shadow:0 0 6px rgba(64,224,208,.9)}
.planner-f2p-tag::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;background:linear-gradient(180deg,rgba(64,224,208,.38),rgba(64,224,208,.14)),#0d1017;border:1px solid #40e0d0;box-shadow:0 0 10px rgba(64,224,208,.6),inset 0 0 8px rgba(64,224,208,.35)}
.planner-f2p-description{font:600 12px Rajdhani,sans-serif;color:#40e0d0;letter-spacing:.2px}

/* Unchecked F2P means NEW for new releases, in Timeline's green. */
.planner-new-tag{color:#7be0a4;text-shadow:0 0 6px rgba(42,166,98,.9)}
.planner-new-tag::before{background:linear-gradient(180deg,rgba(42,166,98,.38),rgba(42,166,98,.14)),#0d1017;border-color:#7be0a4;box-shadow:0 0 10px rgba(42,166,98,.6),inset 0 0 8px rgba(42,166,98,.35)}

body[data-tool=planner] .f2p-panel{margin-top:22px}
body[data-tool=planner] .f2p-panel .panel-heading{padding:0;border:0;background:none;color:#40e0d0}
body[data-tool=planner] .f2p-panel .panel-heading small{font:600 12px Rajdhani,sans-serif;letter-spacing:0}
body[data-tool=planner] .f2p-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}
body[data-tool=planner] .f2p-slots>.small{grid-column:1 / -1;margin:0}
@media(max-width:700px){body[data-tool=planner] .f2p-slots{grid-template-columns:1fr}.f2p-panel .awakening-head{height:auto;flex-wrap:wrap;gap:12px}}

/* Character removal has its own X; keep the hover free of an EDIT label. */
body[data-tool=planner] .unit-slot .edit-hint{display:none}

/* Keep the planner's names and all awakening-stage artwork inside phone-sized cards. */
@media(max-width:700px){
  body[data-tool=planner] .unit-slot .unit-copy{min-width:0;max-width:100%}
  body[data-tool=planner] .unit-slot .unit-name,body[data-tool=planner] .unit-slot .unit-notes{white-space:normal;overflow-wrap:anywhere}
  body[data-tool=planner] .unit-slot .stage-strip.framed-stages{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:12px!important;max-width:100%;padding:6px 7px 2px 3px;box-sizing:border-box}
  body[data-tool=planner] .unit-slot .stage-strip.framed-stages .thumb{width:100%;max-width:var(--size);height:auto;aspect-ratio:1;justify-self:center}
  body[data-tool=planner] .unit-slot{box-sizing:border-box}
}