/* Hard clamp: prevent page-level horizontal overflow (keeps common header layout consistent) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background:#0b0f16;
  color:#e6e8eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.page { padding:12px; }

.pt-head { margin-bottom:10px; }

.pt-title { font-size:18px; font-weight:700; }

.pt-sub { font-size:12px; opacity:0.7; }

.pt-status { font-size:12px; opacity:0.7; margin-top:4px; }

.pt-card {
  background:#121826;
  border-radius:12px;
  padding:8px;
}

.pt-table-wrap { overflow:auto; max-height: 360px; }

/* iOS Safari: stabilize momentum scrolling within the scroll container */
.pt-table-wrap{
  -webkit-overflow-scrolling: touch;
}

/* Fixed layout so columns don't expand with long names */
.pt-table {
  border-collapse: separate;
  border-spacing: 0;
  width:100%;
  table-layout: fixed;
  min-width: 916px; /* allow horizontal scroll for resource columns */
}

.pt-table th,
.pt-table td {
  border-bottom:1px solid #1f2636;
  padding:6px 8px;
  font-size:12px;
  text-align:right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sticky header row only */
.pt-table thead th {
  position: sticky;
  top: 0;
  background:#121826;
  z-index: 5;
}

/* Sticky columns (パッケージ名 + 購入数) */
:root{
  --pt-col-name: 98px;
  --pt-col-count: 56px;
}
.pt-col-name{ width: 98px !important; }















.pt-col-ratio_b{ width: 68px !important; }
.pt-col-dia_per_yen{ width: 60px !important; }
.pt-col-sumdia{ width: 76px !important; }
.pt-col-invite{ width: 46px !important; }
.pt-col-diamond{ width: 68px !important; }
.pt-col-immortal_stone{ width: 56px !important; }
.pt-col-mythic_stone{ width: 56px !important; }
.pt-col-pet_food{ width: 56px !important; }
.pt-col-battery{ width: 56px !important; }
.pt-col-churu{ width: 38px !important; }
.pt-col-mine_key{ width: 46px !important; }
.pt-col-gold{ width: 68px !important; }
.pt-col-jpy{ width: 68px !important; }
.pt-col-count{ width: 56px !important; }
.pt-col-name{ width: 98px !important; }
.pt-col-count{ width: 56px !important; }
.pt-col-jpy{ width: 68px !important; }

.pt-table th.name,
.pt-table td.name{
  text-align: left;
}
.pt-table th.count,
.pt-table td.count{
  text-align: left;
}

.pt-table th.sticky-col,
.pt-table td.sticky-col{
  position: sticky;
  background: #0c1018; /* must be opaque to prevent bleed-through */
  background-clip: padding-box;
  z-index: 20;
  /* iOS Safari: reduce sticky jitter / 1px shifts during scroll */
  transform: translateZ(0);
  will-change: transform;
}
.pt-table .sticky-col1{ left: 0; z-index: 21; }
.pt-table .sticky-col2{ left: var(--pt-col-name); z-index: 22; }

/* Header row is above body, and top-left intersections are highest */
.pt-table thead th{ z-index: 50; }
.pt-table thead th.sticky-col{ background:#121826; z-index: 60; }
.pt-table thead th.sticky-col1{ z-index: 70; }
.pt-table thead th.sticky-col2{ z-index: 71; }



/* JPY column (NOT sticky) */
.pt-table th.jpy,
.pt-table td.jpy {
  width: 22px;
}

/* Upper limit column */
.pt-table th.limit,
.pt-table td.limit {
  width: 20px;
  text-align:center;
}

/* Resource columns */
.pt-table th.res,
.pt-table td.res {
  width: 58px;
}

.pt-table th.res img {
  width:20px;
  height:20px;
  display:block;
  margin: 0 auto;
}

/* Compact header cells for icons */
.pt-table th.res {
  padding:2px 3px;
  text-align:center;
}


/* Compact numeric columns (JPY + resources) */
.pt-table td.jpy,
.pt-table td.limit,
.pt-table td.res {
  padding: 2px 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pt-table th.jpy,
.pt-table th.limit,
.pt-table th.res {
  padding: 2px 3px;
}


/* Per-resource column widths (px) */
.pt-table th.res-gold, .pt-table td.res-gold { width:  22px; }
.pt-table th.res-mine_key, .pt-table td.res-mine_key { width:  12px; }
.pt-table th.res-churu, .pt-table td.res-churu { width:  12px; }
.pt-table th.res-battery, .pt-table td.res-battery { width:  16px; }
.pt-table th.res-pet_food, .pt-table td.res-pet_food { width:  16px; }
.pt-table th.res-mythic_stone, .pt-table td.res-mythic_stone { width:  16px; }
.pt-table th.res-immortal_stone, .pt-table td.res-immortal_stone { width:  16px; }
.pt-table th.res-diamond, .pt-table td.res-diamond { width:  22px; }
.pt-table th.res-invite, .pt-table td.res-invite { width:  18px; }



/* Grid lines: add vertical separators */
.pt-table th,
.pt-table td {
  border-right: 1px solid #1f2636;
}
.pt-table th:last-child,
.pt-table td:last-child {
  border-right: none;
}


/* Extra right breathing room from vertical grid line */
.pt-table td.jpy,
.pt-table td.limit,
.pt-table td.res {
  padding-right: 6px;
}

.pt-table thead th.name,
.pt-table thead th.jpy { text-align: center; }

/* Prevent table min-width from expanding the whole page (affects common header layout) */
.pt-card { max-width: 100%; overflow: hidden; }
.pt-table-wrap { width: 100%; max-width: 100%; overflow: auto; }

/* Make zero values less prominent */
.pt-table td.zero {
  color: rgba(230,232,235,0.22);
}


.page, .pt-card {
  max-width: 100%;
}



/* ---------- Phase2: settings panel ---------- */
.pt-settings{
  /* NOTE: .pt-card already provides the outer card. Avoid double borders here. */
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.pt-settings-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:6px;
}
.pt-field{
  display:flex;
  align-items:center;
  gap:6px;
}
.pt-field-wide{ flex: 1 1 160px; }
.pt-field-label{
  font-size: 11px;
  opacity: .8;
}
.pt-select, .pt-input{
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #273044;
  background: #0b0f16;
  color:#e6e8eb;
  font-size: 12px;
}
.pt-btn{
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #2b3750;
  background: #121826;
  color:#e6e8eb;
  font-size: 12px;
}
.pt-btn:active{ transform: translateY(1px); }

.pt-toggles{
  gap:10px;
}
.pt-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid #1f2636;
  background:#0b0f16;
  font-size:12px;
}
.pt-toggle img{ width:20px; height:20px; display:block; }
.pt-toggle input{ transform: translateY(0.5px); }

.pt-kpis{
  font-size: 11px;
  opacity: .85;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* calc columns */
.pt-table th.calc, .pt-table td.calc{ width: 20px; text-align:right; }


/* prevent package name wrapping */
.pt-table td.res, .pt-table td.jpy, .pt-table td.limit, .pt-table td.calc{
  white-space: nowrap;
}

.pt-table th.calc{
  font-size: 10px;
}


/* Phase2v4: per-price double availability toggles */
.pt-double{
  gap: 8px;
}
.pt-double .pt-double-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid #1f2636;
  background:#0b0f16;
  font-size: 12px;
}
.pt-double .pt-double-item .pt-badge{
  font-size: 11px;
  opacity: .85;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #273044;
}


/* budget apply button */
#btnBudgetApply{ white-space: nowrap; }

/* Phase3: make limit column sticky (next to package name) */
.pt-table th.limit, .pt-table td.limit{
  position: sticky;
  left: 32px; /* equals name column width */
  z-index: 3;
  background: #0b0f16;
}
.pt-table thead th.limit{ z-index: 6; }

/* Phase3: limit cell contents */
.pt-limit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  white-space: nowrap;
}
.pt-limit button{
  width: 16px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #273044;
  background:#121826;
  color:#e6e8eb;
  font-size: 12px;
  line-height: 16px;
  padding: 0;
}
.pt-limit .pt-count{
  min-width: 12px;
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.pt-limit .pt-max{
  opacity: .65;
  font-size: 11px;
}

/* Phase3: summary panel */
.pt-summary{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 3px double #2b3750;
}
.pt-summary-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pt-sum-item{
  display:flex;
  gap: 6px;
  align-items: baseline;
}
.pt-sum-label{
  font-size: 11px;
  opacity: .75;
}
.pt-sum-val{
  font-size: 14px;
  font-weight: 700;
}
.pt-summary-hint{
  margin-top: 6px;
  font-size: 11px;
  opacity: .75;
}

/* Phase3v3: column width overrides */
.pt-table th.limit, .pt-table td.limit{ width: 36px; } /* +20px vs previous */
.pt-table th.res-gold, .pt-table td.res-gold{ width: 28px; } /* +6px */

/* Phase3v3: summary table under double line */
.pt-summary-table-wrap{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 3px double #2b3750;
}
.pt-table-summary .pt-limit button{ display:none; }

/* Phase3v5: summary table stacked under list table (same card) */
.pt-summary-table-wrap{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 3px double #2b3750;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pt-summary-table-wrap .pt-table{
  min-width: var(--pt-table-minw, 884px);
}

/* Phase4: limit reached / disabled buttons */
.pt-limit button:disabled{
  opacity: .35;
  filter: grayscale(1);
}
.pt-limit.is-cap .pt-count{
  color: #ffb86b;
}
.pt-limit.is-zero .pt-count{
  opacity: .7;
}

/* Phase4v2: separate cards */
.pt-card--tables{ margin-top: 10px; }

/* Phase4v5: explicit card roles */
.pt-card--settings{ margin-top: 10px; }
.pt-card--tables{ margin-top: 10px; }

/* Phase5: merge purchase UI into name column + popup controls */
.pt-namecell{ display:block; }
.pt-nameText{
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-countText{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.95;
}

/* Popup */
.pt-popup[hidden],
.pt-popup-overlay[hidden],
.pt-overlay[hidden]{
  display: none !important;
}

.pt-popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}
.pt-popup{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 16px));
  background: #121826;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  z-index: 9999;
}
.pt-popup-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pt-popup-title{
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.pt-popup-close{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-size: 18px;
  line-height: 24px;
}
.pt-popup-body{
  padding: 10px;
}
.pt-popup-qtyrow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.pt-popup-btn{
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-size: 18px;
  font-weight: 800;
}
.pt-popup-btn:disabled{
  opacity: .35;
}
.pt-popup-qty{
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pt-popup-sum{
  margin-top: 10px;
  font-weight: 700;
}


/* --- Phase5: package cell layout (name + qty) --- */
.pt-table td.name.pt-namecell{
  display: grid;
  grid-template-columns: 1fr 44px;
  column-gap: 6px;
  align-items: center;
}
.pt-nameText{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-nameMeta{
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Header label center (パ / JPY) */
.pt-table thead th.name,
.pt-table thead th.jpy{
  text-align: center;
}

/* v5d: keep header 'パッケージ' but prevent it from widening the name column */

/* === Phase5h: fixed widths are managed by colgroup === */
.pt-col-name{ width: 98px !important; }
.pt-col-jpy{ width: 68px !important; }
.pt-col-gold{ width: 68px !important; }
.pt-col-mine_key{ width: 46px !important; }
.pt-col-churu{ width: 38px !important; }
.pt-col-battery{ width: 56px !important; }
.pt-col-pet_food{ width: 56px !important; }
.pt-col-mythic_stone{ width: 56px !important; }
.pt-col-immortal_stone{ width: 56px !important; }
.pt-col-diamond{ width: 68px !important; }
.pt-col-invite{ width: 46px !important; }
.pt-col-sumdia{ width: 76px !important; }
.pt-col-dia_per_yen{ width: 60px !important; }
.pt-col-ratio_b{ width: 68px !important; }

/* package cell: name + qty area (qty centered) */
.pt-namecell{
  display: grid;
  grid-template-columns: 1fr 56px;
  align-items: center;
  gap: 4px;
}
.pt-nameText{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-nameMeta{
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: .92;
}


/* === Phase6a: settings accordions === */
.pt-acc{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  padding: 0;
  margin: 10px 0;
  overflow: hidden;
}
.pt-acc-sum{
  list-style: none;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  user-select: none;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pt-acc[open] .pt-acc-sum{
  background: rgba(255,255,255,.04);
}
.pt-acc-sum::-webkit-details-marker{ display:none; }
.pt-acc-body{ padding: 10px 12px; }

.pt-row-tools{ padding-top: 4px; padding-bottom: 4px; }
.pt-mini-btn{
  height: 32px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-weight: 800;
}

.pt-rate-list{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.pt-rate-item{ display:grid; grid-template-columns: 22px 1fr 96px; align-items:center; column-gap:10px; padding:4px 6px; }
.pt-rate-icon{
  width: 20px;
  height: 20px;
  opacity: .95;
}
.pt-rate-name{
  font-size: 12px;
  opacity: .92;
}
/* StepE: rate inputs/selects should match dark-theme form controls */
.pt-rate-input{
  width:96px;
  box-sizing:border-box;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #273044;
  background: #0b0f16;
  color:#e6e8eb;
  font-size: 12px;
}

/* Safari: keep select text vertically centered */
select.pt-rate-input{
  line-height: 28px;
}

.pt-budget-row{
  align-items: end;
  gap: 8px;
}
.pt-field-budget{ flex: 1; }
.pt-input-budget{
  width: 60px;
  max-width: 120px;
}

/* budget popup */
.pt-popup--budget .pt-popup-body{ padding: 12px; }
.pt-budget-value{
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  margin-bottom: 10px;
}
.pt-budget-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pt-budget-btn{
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pt-budget-foot{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}


/* === Phase6b: row states & anti-zoom === */
.pt-table tbody tr.pt-has-qty td{
  /* qty>=1 & not capped: make it clearly visible (green-ish) */
  background: rgba(60, 255, 160, 0.22);
}
.pt-table tbody tr.pt-at-cap td{
  /* capped: brighter pink/red for dark theme */
  background: rgba(255, 80, 130, 0.34);
}
.pt-table tbody tr.pt-row-selected td{
  box-shadow: inset 0 0 0 2px rgba(70,220,140,0.70);
}
.pt-table tbody tr.pt-row-selected.pt-at-cap td{
  box-shadow: inset 0 0 0 2px rgba(255, 120, 170, 0.92);
}

/* prevent double-tap zoom-ish behaviors on interactive controls */
.pt-btn, .pt-mini-btn, .pt-popup-btn, .pt-budget-btn, select, input{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pt-popup-btn, .pt-btn, .pt-mini-btn, .pt-budget-btn{
  user-select: none;
  -webkit-user-select: none;
}


/* popup minus/clear layout */
.pt-popup-minuswrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pt-popup-actions{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.pt-popup-ok{
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #e8eefc;
  font-weight: 800;
}
/* popup plus/max layout */
.pt-popup-pluswrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pt-popup-btn--half{
  width: 100%;
}
.pt-popup-btn--solo{
  grid-column: 1 / span 2;
}


/* Phase6e: keep sticky columns opaque AND reflect row state backgrounds */
.pt-table tbody tr.pt-has-qty td.sticky-col{
  background: #123a2a; /* opaque variant */}
.pt-table tbody tr.pt-at-cap td.sticky-col{
  background: #3a1426; /* opaque variant */
}
.pt-table tbody tr.pt-row-selected td.sticky-col{
  /* keep current background; outline already drawn via box-shadow */
  background-clip: padding-box;
}

/* Ensure sticky columns are not overridden by legacy rules */
.pt-table th.name.sticky-col,
.pt-table td.name.sticky-col,
.pt-table th.count.sticky-col,
.pt-table td.count.sticky-col{
  padding: 6px 8px; /* unify height */
}

/* Add subtle divider to the right of sticky columns */
.pt-table td.sticky-col2,
.pt-table th.sticky-col2{
  box-shadow: 1px 0 0 #1f2636;
}


/* Selected row info bar (shown when a row is selected) */
.pt-selected-info{margin:6px 0 10px 0;padding:8px 10px;border:1px solid rgba(255,255,255,0.10);border-radius:10px;background:rgba(255,255,255,0.04);}
.pt-selected-text{font-size:12px;line-height:1.35;}
.pt-selected-placeholder{opacity:0.7;}
.pt-sel-items{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pt-sel-price{font-variant-numeric:tabular-nums;opacity:0.95;margin-right:2px;}
.pt-sel-item{display:inline-flex;align-items:center;gap:4px;}
.pt-sel-ico{width:16px;height:16px;display:inline-block;}
.pt-sel-val{font-variant-numeric:tabular-nums;}

/* Slightly smaller package name text (values only) */
.pt-table td.name .pt-nameText{font-size:12.5px;}


/* Phase6: 購入数列の見た目調整 */
.pt-table thead th.count{
  font-size: 12px; /* ほんの少し小さく */
}
.pt-table tbody td.count{
  text-align: center;
}


.pt-budget-meta{margin:6px 0 10px 0;font-size:11px;opacity:0.8;text-align:center;}
.pt-budget-foot{display:flex;justify-content:center;gap:10px;margin-top:10px;}
.pt-popup-btn--ok{border-color:rgba(180,220,255,0.35);}


/* calc columns header center */
.pt-table thead th.calc{ text-align:center; }

.pt-rate-item select.pt-rate-input{ width:96px; }

.pt-note{ font-size:11px; color:var(--pt-muted,#b7c2d1); line-height:1.35; margin-top:8px; }
.pt-note div{ margin:4px 0; }


/* Phase6t: sort bar moved under selected info */
.pt-sortbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin: 6px 0 10px;
}
.pt-sortbar .pt-field{
  margin:0;
}

/* Phase6t: rate reset button */
.pt-rate-actions{
  display:flex;
  justify-content:flex-end;
  margin: 4px 0 8px;
}
.pt-btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}
.pt-btn-ghost:active{ transform: translateY(1px); }

/* Phase6t: center table calc headers */
.pt-table thead th.calc{ text-align:center; }


/* Step1-③ (A-D): toolbar moved to table area; keep IDs unchanged */
.pt-status{display:none;}
.pt-card-label{
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  margin: 0 0 8px 0;
}
.pt-toolbar{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin: 8px 0 10px;
}
.pt-toolbar-row{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.pt-toolbar-row .pt-field-budget{flex: 0 0 auto;}
.pt-toolbar-row .pt-field-budget .pt-input-budget{width:60px;}
.pt-toolbar-row #btnBudgetQuick{flex:0 0 auto; white-space:nowrap;}
.pt-toolbar-row #btnBulkBuy{flex:0 0 auto; white-space:nowrap;}
.pt-toolbar-row .pt-field-sort{flex: 0 0 auto;}
.pt-toolbar-row .pt-field-sort .pt-select{width:100px;}


/* Planned summary card (icons + totals) shown above summary table */
.pt-planned-summary{
  margin: 0 0 10px 0;
  position: sticky;
  left: 0;
  z-index: 3;
}
.pt-planned-title{
  font-size: 11px;
  color: rgba(255,255,255,.78);
  margin: 0 0 6px 0;
  line-height: 1.25;
}


/* toolbar sub row (category filter button) */
.pt-toolbar-sub{
  display:flex;
  align-items:center;
  gap: 10px;
  row-gap: 8px;
  flex-wrap: wrap;
  padding: 0 8px 10px;
  margin-top: -4px; /* visually attached to toolbar */
}
.pt-toolbar-subtext{
  font-size: 11px;
  color: rgba(255,255,255,.72);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* bulk buy popup */
.pt-popup--bulk{
  width: min(380px, calc(100vw - 16px));
  top: 8%;
}
.pt-bulk-sum{
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.pt-bulk-list{
  display:flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(56vh, 420px);
  overflow: auto;
  padding-right: 2px;
}
.pt-bulk-group{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.pt-bulk-item{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto auto auto auto;
  gap: 6px;
  align-items:center;
  padding: 6px 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.pt-bulk-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.pt-bulk-mini{
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-size: 12px;
  font-weight: 800;
}
.pt-bulk-qty{
  min-width: 54px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 12px;
  opacity: .95;
}
.pt-bulk-line-sum{
  min-width: 78px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 12px;
}
.pt-bulk-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.pt-bulk-foot{
  display:flex;
  justify-content:center;
  margin-top: 10px;
}

/* category popup */
.pt-popup--cat{
  width: min(340px, calc(100vw - 16px));
  top: 10%;
}
.pt-cat-note{
  font-size: 11px;
  color: rgba(255,255,255,.75);
  margin: 0 0 10px;
  line-height: 1.3;
}
.pt-cat-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.pt-cat-item{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;

  flex-wrap: wrap;
}
.pt-cat-item input{
  width: 18px;
  height: 18px;
}
.pt-cat-anno{
  font-size: 11px;
  color: rgba(255,255,255,.70);
  line-height: 1.25;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

.pt-cat-badge{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 8px 10px;
}
.pt-cat-subtitle{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  margin: 0 0 8px;
}
.pt-cat-item--sub{ padding-left: 6px; }
.pt-cat-actions{
  display:flex;
  gap: 8px;
  margin-top: 12px;
}
.pt-cat-actions .pt-popup-btn{ flex: 1 1 auto; }
.pt-cat-foot{
  display:flex;
  justify-content:center;
  margin-top: 10px;
}


/* Budget over warning */
.pt-input.pt-input--over{
  color: #ff4d4d !important;
  background: #ffe65c !important;
  border-color: #ffb100 !important;
}

/* Budget popup extra row */
.pt-budget-foot2{ display:flex; justify-content:center; margin-top:8px; }
.pt-popup-btn--ghost{ background: transparent; border:1px solid #2b3750; color:#cfe0ff; }
/* Sub modal (confirm) */
.pt-submodal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 50;
}
/* Safari safeguard: ensure hidden attribute always wins */
.pt-submodal[hidden]{
  display: none !important;
}
.pt-submodal-box{
  width: min(320px, 92vw);
  background:#0f1623;
  border:1px solid #2b3750;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.pt-submodal-text{ font-size: 13px; line-height: 1.5; color:#e8f1ff; }
.pt-submodal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 12px; }

/* Notes inside accordion bodies */
.pt-note{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed #2b3750;
  color: #bcd0ef;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-line;
  background: rgba(20, 30, 45, .55);
}


/* Purchase-count priority sort (toolbar) */
.pt-check{
  display:flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid #2b3750;
  background:#121826;
  color:#e6e8eb;
  font-size:12px;
  user-select:none;
}
.pt-check input{
  width:16px;
  height:16px;
  accent-color:#4da3ff;
}
.pt-check span{ white-space:nowrap; }

/* Icon-sort clickable headers */
.pt-table:not(.pt-table-summary) thead th.pt-icon-sortable{
  cursor:pointer;
}
.pt-table:not(.pt-table-summary) thead th.pt-icon-sortable:hover{
  background: rgba(255,255,255,.06);
}


.pt-popup-sum--grand{
  margin-top: 6px;
  font-weight: 600;
  opacity: 0.9;
}


/* Phase5c: spacing + help accordion */
.pt-after-summary-spacer{ height: 16px; }

.pt-help-acc{ margin-top: 0; }
.pt-help-body{
  padding: 6px 0;
  color: var(--txt2, #b8c1d9);
  font-size: 13px;
  line-height: 1.5;
}

.pt-bottom-spacer{ height: 200px; }


/* Original packages modal */
.pt-popup--orig{
  width: min(96vw, 780px);
  max-height: 86vh;
  top: 7%;
}
.pt-popup--orig{
  display: flex;
  flex-direction: column;
}
.pt-popup--orig .pt-popup-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pt-orig-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pt-orig-item{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
}
.pt-orig-row{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pt-orig-row + .pt-orig-row{ margin-top: 8px; }
.pt-orig-label{
  font-size: 12px;
  opacity: 0.85;
}
.pt-orig-input{
  width: 110px;
}
.pt-orig-input--res{ width: 56px; padding-left: 8px; padding-right: 8px; text-align: right; }
.pt-orig-input--name{ width: 220px; }
.pt-orig-res-wrap{
  width: 100%;
  overflow-x: auto;
}
.pt-orig-res-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64px;
  gap: 6px;
  padding-bottom: 4px;
}
.pt-orig-res-cell{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.pt-orig-res-head{
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  opacity: 0.9;
}
.pt-orig-res-head img{
  width: 18px;
  height: 18px;
}