.bpg{ width:100%; color:var(--text); font:inherit; }
.bpg.bpg--inherit, .bpg.bpg--content{
  max-width: var(--wp--style--global--content-size, var(--theme-content-width, var(--content-width, var(--container-max-width, 750px))));
  margin-inline: auto;
}
.bpg.bpg--narrow{
  max-width: var(--theme-narrow-container-max-width, var(--narrow-container-max-width, 750px));
  margin-inline: auto;
}
.bpg.bpg--wide{
  max-width: var(--wp--style--global--wide-size, var(--theme-wide-width, 1200px));
  margin-inline: auto;
}
.bpg.bpg--full{ max-width: none; }

:root{
  --primary: var(--theme-palette-color-1, var(--paletteColor1, var(--ct-primary-color, #1d4ed8)));
  --text: var(--theme-text-color, var(--paletteColor2, var(--ct-text-color, #1f2937)));
  --card: var(--theme-surface-1, var(--paletteColor5, var(--ct-card-bg, #fff)));
  --bg: var(--theme-surface-2, var(--paletteColor7, var(--ct-light-bg, #f7f8fa)));
  --border: var(--theme-border-color, var(--ct-border-color, rgba(0,0,0,.12)));
  --radius: var(--theme-radius, var(--borderRadius, 6px));
  --ctrl-h: var(--theme-control-height, 42px);
  --ctrl-py: var(--theme-control-padding-y, 10px);
  --ctrl-px: var(--theme-control-padding-x, 12px);
  --focus-ring: var(--theme-focus-ring, 0 0 0 6px rgba(0,0,0,.08));
}

.bpg *{ box-sizing: border-box; font: inherit; letter-spacing: inherit; line-height: inherit; }

.bpg-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }

/* Grid: length + options + actions (desktop inline; mobile stack) */

.bpg-label{ display:block; margin:0 0 6px; color:rgba(0,0,0,.6); font-weight:600; }
.bpg-input, .bpg-select{
  width:100%; padding:var(--ctrl-py) var(--ctrl-px); min-height:var(--ctrl-h);
  border:1px solid var(--border); border-radius:var(--radius); background:#fff;
  line-height:1.5; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.bpg-input:focus, .bpg-select:focus{ outline:none; box-shadow: var(--focus-ring); }
.bpg-check{ display:flex; align-items:center; gap:8px; }
.bpg-actions{ display:flex; gap:10px; justify-content:flex-end; }
.bpg-btn{ padding:var(--ctrl-py) var(--ctrl-px); border-radius:var(--radius); border:1px solid transparent; background:var(--primary); color:#fff; cursor:pointer; }
.bpg-btn.bpg-ghost{ background:transparent; color:var(--primary); border-color:var(--primary); }

/* Output + strength */
.bpg-output-wrap{ padding: 12px 16px 16px; }
.bpg-output{
  width:100%; padding:var(--ctrl-py) var(--ctrl-px); min-height:var(--ctrl-h);
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.bpg-output:focus{ outline:none; box-shadow: var(--focus-ring); }

.bpg-strength{ margin-top:8px; display:grid; gap:6px; }
.bpg-meter{ height:8px; background:linear-gradient(90deg,#ddd,#eee); border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.bpg-meter > span{ display:block; height:100%; width:0%; background:var(--primary); transition: width .25s ease; }
.bpg-strength-row{ display:flex; justify-content:space-between; font-size:.9rem; color:rgba(0,0,0,.65); }

/* Toast */
.bpg-toast{ position:fixed; right:16px; bottom:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .18s ease, transform .18s ease; }
.bpg-toast.show{ opacity:1; transform: translateY(0); }

@media (max-width: 1080px){
  
}
@media (max-width: 900px){
  
  .bpg-actions{ justify-content:flex-start; }
}

/* New grid: [Length] | [Options(flex)] | [Actions] */
.bpg-grid{
  display:grid;
  grid-template-columns: minmax(180px, 240px) 1fr auto;
  gap:12px;
  align-items:end;
  padding:12px 16px;
}
.bpg-options{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 16px;
}
.bpg-check{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.bpg-actions{ display:flex; gap:10px; justify-content:flex-end; }

@media (max-width: 900px){
  .bpg-grid{ grid-template-columns: 1fr; }
  .bpg-check{ white-space:normal; } /* 允許小螢幕換行 */
  .bpg-actions{ justify-content:flex-start; }
}


/* --- Compact layout --- */
.bpg-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 0; flex-wrap:wrap; }
.bpg-chipset{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bpg-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; }
.bpg-chip input{ accent-color: var(--primary); }
.bpg-chip em{ font-style:normal; font-size:.85em; color:rgba(0,0,0,.55); }
.bpg-form{ padding:8px 16px 0; }
.bpg-field--length{ max-width: 380px; }

/* classic fallback (uses .bpg-grid rules from previous versions if class present) */
.bpg-layout--classic .bpg-toolbar{ display:none; }
.bpg-layout--classic .bpg-form{ display:none; }


/* --- Chip alignment fixes --- */
.bpg-chip{ white-space:nowrap; min-height: var(--ctrl-h); line-height:1; }
.bpg-chip span, .bpg-chip em{ line-height:1; }
.bpg-chip input{ margin:0; vertical-align:middle; position: relative; top: -1px; }


/* --- Split two-column layout --- */
.bpg-layout--split .bpg-split{ display:grid; grid-template-columns: var(--bpg-split-cols, 2fr 1fr); 
  gap:16px; 
  padding:12px 16px 16px;
}
.bpg-layout--split .bpg-left{ display:grid; gap:12px; align-content:start; }
.bpg-layout--split .bpg-right{ display:block; }
@media (max-width: 900px){
  .bpg-layout--split .bpg-split{ grid-template-columns: 1fr; }
}


/* --- Split vertical layout --- */
.bpg-layout--splitv .bpg-split{ display:grid; grid-template-columns: var(--bpg-split-cols, 2fr 1fr); gap:16px; padding:12px 16px 16px; }
.bpg-layout--splitv .bpg-left{ display:grid; gap:12px; align-content:start; }
.bpg-layout--splitv .bpg-chipset{ display:grid; grid-template-columns: 1fr; gap:8px; }
.bpg-layout--splitv .bpg-chip{ border-radius: var(--radius); white-space:normal; min-height: auto; padding:10px 12px; }
.bpg-layout--splitv .bpg-chip em{ font-size:.9em; }
@media (max-width: 900px){
  .bpg-layout--splitv .bpg-split{ grid-template-columns: 1fr; }
}


/* --- Mobile polish for splitv & compact forced stacks --- */
@media (max-width: 900px){
  .bpg-layout--splitv .bpg-split{ grid-template-columns: 1fr; }
  .bpg-layout--splitv .bpg-field--length{ max-width:none; }
  .bpg-layout--splitv .bpg-actions{ flex-wrap:wrap; gap:8px; }
  .bpg-layout--splitv .bpg-chipset{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .bpg-layout--splitv .bpg-chipset{ grid-template-columns: 1fr; }
  .bpg-layout--splitv .bpg-actions{ gap:6px; }
}


/* Actions on right column */
.bpg-layout--splitv .bpg-right .bpg-actions{ margin-top:12px; display:flex; gap:10px; justify-content:flex-end; }
@media (max-width: 900px){
  .bpg-layout--splitv .bpg-right .bpg-actions{ justify-content:flex-start; flex-wrap:wrap; }
}
/* Push-left-bottom when actions on left */
.bpg-layout--splitv .bpg-left{ display:flex; flex-direction:column; }
.bpg-layout--splitv .bpg-left .bpg-actions{ margin-top:auto; }
/* ===== 方案C 內建：splitv 兩欄等高 + 按鈕於右欄下方 ===== */
.bpg{ --bpg-output-min-h: 240px; }
.bpg.bpg-layout--splitv .bpg-split{ align-items: stretch; grid-template-columns: var(--bpg-split-cols, 2fr 1fr); }
.bpg.bpg-layout--splitv .bpg-right{ display:flex; }
.bpg.bpg-layout--splitv .bpg-output-wrap{ display:flex; flex-direction:column; flex:1; }
.bpg.bpg-layout--splitv .bpg-output-wrap input,
.bpg.bpg-layout--splitv .bpg-output-wrap textarea{ flex:1 1 auto; min-height: var(--bpg-output-min-h); }
/* Actions on right column (default) */
.bpg.bpg-layout--splitv .bpg-right .bpg-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
/* When actions are left (if user overrides), don't stick to bottom by default */
.bpg.bpg-layout--splitv .bpg-left .bpg-actions{ margin-top:0; }

/* Mobile polish */
@media (max-width: 900px){
  .bpg.bpg-layout--splitv .bpg-split{ grid-template-columns: 1fr; }
  .bpg.bpg-layout--splitv .bpg-right .bpg-actions{ justify-content:stretch; gap:8px; flex-wrap:wrap; }
  .bpg.bpg-layout--splitv .bpg-actions .bpg-btn{ flex:1 1 100%; }
}
@media (max-width: 420px){
  .bpg .bpg-chipset{ display:grid; grid-template-columns:1fr; gap:8px; }
  .bpg .bpg-output-wrap input,
  .bpg .bpg-output-wrap textarea{ min-height:160px; }
}