.layout-best-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:#eaf8ef;color:#16834a;border:1px solid #b8e4c8;font-size:9px;font-weight:700;white-space:nowrap}
  .layout-best-badge.is-other{background:#fff7e8;color:#9a6200;border-color:#f2d39b}
  .layout-drawer-head{display:none}
  .layout-candidate-item{gap:10px;padding:8px 10px!important}
  .layout-candidate-item .lc-main{min-width:78px;display:flex;align-items:center;gap:5px}
  .layout-candidate-item .lc-label{font-size:12px}
  .layout-candidate-item .lc-info{flex:1;text-align:right;line-height:1.45;white-space:normal}
  .layout-candidate-item .lc-cost{display:block;color:var(--color-text-primary);font-weight:650}
  .layout-candidate-item .lc-meta{display:block;color:var(--color-text-secondary);font-size:9.5px}
  .layout-candidate-item .lc-delta{color:#a16207}
  .layout-candidate-item.recommended{background:rgba(34,197,94,.08)}
  .layout-candidate-item.recommended .lc-label{color:#16834a}
  .layout-candidate-item .lc-badge.recommend{background:rgba(34,197,94,.14);color:#16834a}
  .layout-waste-summary{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:5px 0 4px}
  .layout-waste-chip{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:650;background:#eef5ff;color:#2667b7;border:1px solid #cfe0f8}
  .layout-waste-chip.qty{background:#fff7e8;color:#9a6200;border-color:#f2d39b}
  #lp-layout-desc{display:block;width:100%;min-width:0;text-align:center}
  .layout-dimension-note{box-sizing:border-box;width:max-content;max-width:100%;margin:4px auto 6px;padding:6px 8px;border-radius:7px;background:#f6f8fb;color:#657085;font-size:9.5px;line-height:1.5;text-align:left;white-space:nowrap;overflow-x:auto;scrollbar-width:thin}
  .rotation-tag{display:inline-block;margin-left:3px;padding:1px 4px;border-radius:4px;background:#fff3df;color:#9a6200;font-size:8px;font-weight:700;vertical-align:middle;white-space:nowrap}
  .production-over{color:#a16207;font-size:8px;white-space:nowrap}
  #layout-list-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:10080;
    background:rgba(232,238,236,.28);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  #layout-list-backdrop.open{display:block}
  /*
   * Desktop scheme picker is a compact half-screen list.  It remains fixed and
   * portaled, so opening it cannot reflow any cost-breakdown table cell.
   */
  @media(min-width:761px){
    .layout-candidate-list{
      position:fixed!important;
      z-index:10090!important;
      left:50%!important;
      right:auto!important;
      top:clamp(74px,10vh,104px)!important;
      bottom:auto!important;
      box-sizing:border-box;
      width:min(780px,calc(50vw - 24px))!important;
      max-width:calc(100vw - 40px)!important;
      max-height:min(72dvh,660px)!important;
      margin:0!important;
      padding:0 10px 10px!important;
      overflow-x:hidden!important;
      overflow-y:auto!important;
      border-radius:16px!important;
      background:rgba(249,250,248,.97)!important;
      backdrop-filter:blur(24px) saturate(1.15)!important;
      -webkit-backdrop-filter:blur(24px) saturate(1.15)!important;
      transform:translateX(-50%)!important;
      box-shadow:0 22px 58px rgba(52,70,64,.2),0 2px 10px rgba(52,70,64,.08)!important;
    }
    .layout-drawer-head{
      position:sticky;
      top:0;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin:0 -10px 10px;
      padding:11px 14px 9px;
      background:rgba(255,255,255,.96);
      border-bottom:1px solid rgba(99,160,255,.16);
      font-size:13px;
      font-weight:750;
      color:var(--color-text-primary);
    }
    .layout-drawer-close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:28px;
      height:28px;
      padding:0;
      border:0;
      border-radius:50%;
      background:#eef2f7;
      color:#536176;
      font-size:18px;
      line-height:1;
      cursor:pointer;
    }
    .layout-candidate-grid{
      display:flex;
      flex-direction:column;
      gap:5px;
      min-width:0;
    }
    .layout-candidate-item{
      display:grid!important;
      grid-template-columns:minmax(158px,190px) minmax(0,1fr);
      align-items:center!important;
      justify-content:stretch!important;
      gap:10px;
      min-width:0;
      min-height:50px;
      box-sizing:border-box;
      padding:7px 10px!important;
      border:1px solid rgba(99,160,255,.14)!important;
      border-radius:9px;
      background:rgba(255,255,255,.62);
    }
    .layout-candidate-item:last-child{border-bottom:1px solid rgba(99,160,255,.14)!important}
    .layout-candidate-item .lc-label{
      display:flex!important;
      align-items:center;
      flex-wrap:nowrap;
      min-width:0!important;
      margin-bottom:0;
      font-size:13px;
      font-weight:750;
      line-height:1.35;
      white-space:normal;
    }
    .layout-candidate-item .lc-info{
      display:block;
      min-width:0;
      width:100%;
      padding-left:0!important;
      color:var(--color-text-secondary);
      font-size:10.5px;
      line-height:1.55;
      text-align:left!important;
      white-space:normal!important;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .layout-candidate-item .lc-badge{
      display:inline-flex;
      align-items:center;
      max-width:100%;
      margin:2px 4px 2px 0;
      white-space:normal;
    }
    .layout-candidate-item .lc-row-badges{display:inline-flex;align-items:center;flex-wrap:wrap;margin-left:6px}
    .layout-candidate-item.is-lowest-cost{
      border-color:rgba(34,160,96,.30)!important;
      background:linear-gradient(90deg,rgba(218,247,230,.88),rgba(248,253,249,.88));
      box-shadow:inset 4px 0 0 rgba(31,168,96,.70),0 2px 7px rgba(31,130,82,.07);
    }
    .layout-candidate-item.is-lowest-cost .lc-label{color:#137447!important}
    .layout-candidate-item.is-standard-stock:not(.is-lowest-cost){
      border-color:rgba(67,123,196,.24)!important;
      background:linear-gradient(90deg,rgba(232,242,255,.86),rgba(250,252,255,.86));
      box-shadow:inset 4px 0 0 rgba(69,126,199,.55);
    }
    .layout-candidate-item.stock-da:not(.is-lowest-cost){
      border-color:rgba(204,145,42,.25)!important;
      background:linear-gradient(90deg,rgba(255,246,225,.88),rgba(255,253,248,.88));
      box-shadow:inset 4px 0 0 rgba(210,150,45,.58);
    }
    .layout-candidate-item .lc-badge.standard.zheng{background:rgba(66,126,205,.13);color:#2d67aa}
    .layout-candidate-item .lc-badge.standard.da{background:rgba(217,151,39,.15);color:#9a650f}
    .layout-candidate-item .lc-badge.best{background:rgba(31,168,96,.16)!important;color:#137447!important}
  }
  @media(min-width:761px) and (max-width:1100px){
    .layout-candidate-list{width:min(720px,calc(100vw - 40px))!important}
  }
  @media(max-width:760px){
    #layout-list-backdrop{position:fixed;inset:0;z-index:10080;background:rgba(25,35,55,.36)}
    #layout-list-backdrop.open{display:block}
    .layout-candidate-list{position:fixed!important;z-index:10090!important;left:8px!important;right:8px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;top:auto!important;margin:0!important;max-height:min(72dvh,620px)!important;padding:0 0 8px!important;border-radius:16px!important;overflow-y:auto!important;background:var(--color-background-secondary,#fff)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;transform:none!important;box-shadow:0 18px 55px rgba(15,23,42,.28)!important}
    .layout-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(99,160,255,.16);font-size:13px;font-weight:750;color:var(--color-text-primary)}
    .layout-drawer-close{width:28px;height:28px;border:0;border-radius:50%;background:#eef2f7;color:#536176;font-size:18px;line-height:1;cursor:pointer}
    .layout-candidate-item{display:block!important;padding:10px 14px!important;border-bottom:1px solid rgba(15,23,42,.06)!important}
    .layout-candidate-grid{display:grid;grid-template-columns:1fr;min-width:0}
    .layout-candidate-item .lc-main{margin-bottom:3px}
    .layout-candidate-item .lc-info{text-align:left}
    .layout-candidate-item .lc-meta{margin-top:2px}
  }
/* The preview already has a card and a CAD sheet frame; keep the host wrapper invisible. */
#layout-side-panel > .lp-panel{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
/* The layout canvas is the useful visual boundary; remove the redundant card shell around it. */
#layout-side-panel .lp-card{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}