/* ================== Design Tokens ================== */
    :root{
      /* Layout */
      --headerH: 112px;
      --maxW: 1240px;
      --radius: 12px;
      --radiusSm: 8px;

      /* Colors (flat/minimal) */
      --bg0: #f4f6f5;
      --bg1: #eef4f0;
      --bg2: #f9fafb;
      --card: #ffffff;
      --txt: #111827;
      --muted: #6b7280;
      --line: rgba(17,24,39,.12);
      --line2: rgba(17,24,39,.16);

      --sage: #15803d;
      --sageSoft: rgba(21,128,61,.10);
      --sageLine: rgba(21,128,61,.24);
      --amberSoft: rgba(245,158,11,.13);

      /* Shadows */
      --shadow: 0 16px 40px rgba(17,24,39,.07);
      --shadowSm: 0 8px 22px rgba(17,24,39,.05);
      --shadowXs: none;
      --shadowMd: none;

      /* Typography */
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

/* ================== Reset & Base ================== */

    *{ box-sizing: border-box; }
    html, body{ height: 100%; }
    body{
      margin:0;
      font-family: var(--font);
      color: var(--txt);
      background: var(--bg0);
      position: relative;
      overflow-x: hidden;
    }

    a{ color: inherit; }
    .wrap{ max-width: var(--maxW); margin: 0 auto; padding: 16px; }

/* ================== Header ================== */

    header{
      position: sticky; top:0; z-index: 50;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding: 8px 0 10px;
    }

    .brand{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 220px;
    }
    .brandTitle{
      margin: 0;
      font-size: 18px;
      letter-spacing: .1px;
      font-weight: 950;
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .brandTitle .leaf{
      width: 26px; height: 26px;
      border-radius: 12px;
      display:inline-flex; align-items:center; justify-content:center;
      background: rgba(240,247,244,.88);
      border: 1px solid var(--line);
    }
    .brandSub{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.3;
    }

    .headerCenter{
      flex: 1 1 420px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding-top: 2px;
      min-width: 280px;
    }

    .chips{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:center;
      align-items:center;
    }
    .chip{
      display:inline-flex;
      align-items:baseline;
      gap: 6px;
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #f9fafb;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .chip b{ color: var(--txt); font-weight: 950; font-variant-numeric: tabular-nums; }
    .chips .chip:nth-of-type(2),
    .chips .chip:nth-of-type(3){
      border-color: var(--sageLine);
      background: var(--sageSoft);
      color: rgba(20,83,45,.78);
    }

    .lrpSelect{
      border: 0;
      background: transparent;
      color: var(--txt);
      font-weight: 950;
      font-size: 12px;
      padding: 0;
      margin: 0;
      outline: none;
      appearance: none;
      cursor: pointer;
    }
    .lrpSelect:disabled{ opacity:.55; cursor:not-allowed; }

    /* Shop picker (custom dropdown) */
    .shopPicker{ position: relative; }

    /* Nice tap feedback on iOS */
    button, input, select, a{ -webkit-tap-highlight-color: transparent; }

    .shopPicker{ position: relative; }
    .shopBtn{
      display:flex; align-items:center; gap:8px;
      height:34px;
      padding:7px 12px;
      border:1px solid var(--line);
      background: rgba(249,250,251,1);
      border-radius: 12px;
      color: var(--txt);
      font-weight: 950;
      font-size: 12px;
      line-height: 1;
      cursor:pointer;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
    }
    .shopBtn:hover{ border-color: rgba(17,24,39,.18); background: #fff; }
    .shopBtn:active{ transform: translateY(1px); }
    .shopBtn:focus-visible{
      outline: none;
      box-shadow: 0 0 0 3px rgba(16,185,129,.18);
      border-color: rgba(16,185,129,.55);
      background: #fff;
    }
    .shopBtnFlag{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
    .flagImg{ width:18px; height:18px; display:block; border-radius:3px; }
    .flagFallback{ font-size:16px; line-height:1; }
    .shopItemFlag{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }

    .shopBtnLabel{ white-space: nowrap; }
    .shopBtnChevron{ margin-left: 2px; color: rgba(17,24,39,.55); font-size: 12px; }

    .shopPopover{
      position:absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 240px;
      max-width: 320px;
      background: #fff;
      border: 1px solid rgba(17,24,39,.14);
      border-radius: 12px;
      box-shadow: 0 16px 45px rgba(17,24,39,.12);
      padding: 8px;
      z-index: 40;
      display: none;
    }
    .shopPicker.isOpen .shopPopover{ display: block; }
    .shopPicker.isOpen .shopBtn{
      background:#fff;
      border-color: rgba(16,185,129,.55);
      box-shadow: 0 0 0 3px rgba(16,185,129,.14);
    }

    .shopSearchWrap{ padding: 4px 4px 8px 4px; }
    .shopSearch{
      width: 100%;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(17,24,39,.12);
      background: rgba(249,250,251,1);
      padding: 0 10px;
      font-weight: 700;
      font-size: 12px;
      color: var(--txt);
      outline: none;
    }
    .shopSearch:focus{
      background:#fff;
      border-color: rgba(16,185,129,.55);
      box-shadow: 0 0 0 3px rgba(16,185,129,.14);
    }

    .shopList{
      max-height: 280px;
      overflow:auto;
      padding: 2px;
      border-radius: 12px;
    }
    .shopItem{
      width:100%;
      display:flex; align-items:center; gap:10px;
      padding: 9px 10px;
      border-radius: 12px;
      border: 0;
      background: transparent;
      color: var(--txt);
      text-align:left;
      cursor:pointer;
      font-weight: 850;
      font-size: 12px;
      line-height: 1.1;
      transition: background .12s ease, transform .05s ease;
    }
    .shopItem:hover{ background: rgba(16,185,129,.08); }
    .shopItem:active{ transform: translateY(1px); }
    .shopItem.isActive{
      background: rgba(16,185,129,.12);
    }
    .shopItemFlag{ font-size: 16px; line-height: 1; }
    .shopItemCode{
      margin-left:auto;
      font-weight: 900;
      font-size: 11px;
      color: rgba(17,24,39,.45);
      letter-spacing: .02em;
      text-transform: uppercase;
    }

/* ================== Gate Overlay ================== */

    .gateOverlay{
      position: fixed;
      left: 0; right: 0;
      top: var(--headerH);
      bottom: 0;
      z-index: 45;
      background: rgba(251,252,251,.74);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }
    .gateOverlay[hidden]{ display:none !important; }
    .gateCard{
      width: min(560px, 92vw);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      padding: 22px 22px 20px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .gateCard h3{
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: .2px;
    }
    .gateCard p{
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .gatePick{
      display:flex;
      gap: 16px;
      align-items:center;
      justify-content:center;
      margin: 18px 0 2px;
      flex-wrap: wrap;
    }
    .gateLabel{
      font-weight: 950;
      color: rgba(24,35,30,.82);
      font-size: 13px;
      letter-spacing: .2px;
    }

    .selectWrap{
      position: relative;
      display:inline-flex;
      align-items:center;
    }
    .selectWrap:after{
      content:"▾";
      position:absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events:none;
      color: rgba(24,35,30,.62);
      font-size: 14px;
    }
    .gateSelect{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      width: min(340px, 86vw);
      min-width: 280px;
      height: 50px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 0 46px 0 16px;
      font-weight: 900;
      font-size: 14px;
      color: var(--txt);
      cursor: pointer;
      line-height: 1;
    }
    .gateSelect:focus{
      outline: none;
      border-color: rgba(18,115,50,.55);
      box-shadow: 0 0 0 3px rgba(18,115,50,.14);
    }
    .gateSelect:disabled{ opacity:.6; cursor:not-allowed; }

    .headerActions{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:flex-end;
      flex: 0 0 auto;
      padding-top: 2px;
    }

    .btn{
      appearance:none;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      padding: 10px 12px;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      cursor:pointer;
      user-select:none;
      font-weight: 900;
      font-size: 12px;
      text-decoration: none;
    }

    .btn.isDisabled{ opacity:.55; pointer-events:none; }
    .btn:hover{ filter: brightness(1.02); }
    
    .btnPrimary{
      background: var(--sage);
      color: #fff;
      border-color: rgba(21,128,61,.35);
    }

    .ico{
      width: 18px; height: 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      opacity: .9;
    }

    @media (max-width: 980px){
      :root{ --headerH: 150px; }
      .headerCenter{ align-items:flex-start; }
      .chips{ justify-content:flex-start; }
      .headerActions{ width: 100%; justify-content:flex-end; }
    }

/* ================== Main Layout ================== */

    main{ padding: 18px 0 34px; }

    .layout{
      display:grid;
      grid-template-columns: 200px 1fr 360px;
      gap: 16px;
      align-items:start;
    }

    @media (max-width: 1120px){
      .layout{ grid-template-columns: 1fr 360px; }
      .leftCol{ grid-column: 1 / -1; }
    }

    @media (max-width: 820px){
      .layout{ grid-template-columns: 1fr; }
      .rightCol{ position: relative !important; top: auto !important; }
    }

/* ================== Card Primitives ================== */

    .card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      overflow:hidden;
      box-shadow: var(--shadowSm);
    }
    .cardHead{
      padding: 13px 16px 11px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      background: #fbfcfb;
    }
    .cardTitle{ font-size: 14px; font-weight: 950; margin: 0; letter-spacing: .1px; }
    .cardNote{ font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

/* ================== Left Rail (Categories) ================== */

    .leftCol{ display:flex; flex-direction:column; gap: 16px; }

    .catList{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap: 6px; }
    .catItem{
      width: 100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      cursor:pointer;
      text-align:left;
      font-weight: 900;
      font-size: 12px;
      color: var(--txt);
      user-select:none;
      position:relative;
    }
    .catItem:hover{ background: rgba(240,247,244,.70); border-color: var(--line); }
    .catItem.isActive{
      background: rgba(21,128,61,.10);
      border-color: var(--sageLine);
      color: #14532d;
    }
    .catItem.isActive::before{
      content:"";
      position:absolute;
      left: 7px;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 999px;
      background: var(--sage);
    }
    .catItem span{ padding-left: 10px; }
    .catItem small{
      font-size: 11px;
      color: var(--muted);
      font-weight: 900;
      background: #fff;
      border: 1px solid var(--line);
      padding: 3px 8px;
      border-radius: 8px;
      flex-shrink:0;
    }

/* ================== Catalog (Search, Table, Pager) ================== */

    .midCol{ display:flex; flex-direction:column; gap: 16px; min-width:0; }

    .searchBar{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 14px 16px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .searchWrap{ flex: 1 1 auto; position:relative; }
    input[type="search"]{
      width: 100%;
      appearance:none;
      border: 1px solid var(--line2);
      background: #fff;
      border-radius: 12px;
      padding: 12px 14px 12px 42px;
      font-size: 16px;
      outline:none;
      color: var(--txt);
    }
    input[type="search"]::placeholder{ color: var(--muted); }
    .searchIcon{
      position:absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      opacity: .55;
      pointer-events:none;
    }

/* ================== Table ================== */

    .tableWrap{ overflow: visible; background: #fff; }
    table{ width:100%; border-collapse: separate; border-spacing: 0; }

    thead th{
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f8faf8;
      color: rgba(17,24,39,.66);
      font-size: 12px;
      font-weight: 950;
      text-align:left;
      padding: 12px 12px;
      border-bottom: 1px solid var(--line2);
      white-space:nowrap;
    }

    tbody td{
      border-bottom: 1px solid rgba(17,24,39,.09);
      padding: 13px 12px;
      font-size: 13px;
      vertical-align: middle;
      background: #fff;
      height: 78px;
    }
    tbody tr:nth-child(even) td{ background: #fbfcfb; }
    tbody tr:hover td{ background: rgba(21,128,61,.055); }

    .num{ text-align:right; font-variant-numeric: tabular-nums; }
    th.selCol, td.selCol{ text-align:center; padding: 8px 10px; width: 72px; }

    .selHit{
      display:flex;
      align-items:center;
      justify-content:center;
      width: 46px;
      height: 46px;
      margin: 0 auto;
      border-radius: 10px;
      cursor:pointer;
      user-select:none;
      background: #fff;
      border: 1px solid var(--line);
      transition: transform .12s ease, filter .12s ease;
    }
    .selHit:hover{ filter: brightness(1.02); transform: translateY(-1px); }

    .bigCb{
      width: 22px;
      height: 22px;
      accent-color: var(--sage);
      cursor:pointer;
    }

    /* Narrow columns */
    th.sizeCol, td.sizeCol{ width: 60px; }
    th.retailCol, td.retailCol{ width: 86px; }
    th.wholesaleCol, td.wholesaleCol{ width: 92px; }
    th.pvCol, td.pvCol{ width: 64px; }
    th.ptsCol, td.ptsCol{ width: 64px; }
    th.num, td.num{ padding-left: 8px; padding-right: 16px; }

    td.sizeCol{ font-size: 12px; color: rgba(56,78,69,.9); white-space:nowrap; }
    td.pvCol{
      color: #14532d;
      font-weight: 950;
    }
    td.wholesaleCol{
      color: rgba(17,24,39,.78);
      font-weight: 850;
    }

    td.nameCol{ max-width:0; padding-right: 10px; white-space: normal; overflow:hidden; }
    td.nameCol .nameMain{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: clip;
      font-weight: 950;
      line-height: 1.2;
      font-size: 14px;
      word-break: break-word;
    }

/* ================== Pager ================== */

    .pager{
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap:wrap;
      background: #fff;
    }
    .pagerLeft{ font-size: 12px; color: var(--muted); font-weight: 800; }
    .pagerBtns{ display:flex; gap: 6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

    .pageBtn{
      appearance:none;
      border: 1px solid var(--line2);
      background: #fff;
      border-radius: 10px;
      padding: 8px 11px;
      font-weight: 950;
      font-size: 12px;
      cursor:pointer;
      min-width: 40px;
    }
    .pageBtn[disabled]{ opacity: .55; cursor: not-allowed; }
    .pageBtn.isActive{
      border-color: var(--sageLine);
      background: var(--sageSoft);
      color: #14532d;
    }
    .pageDots{ padding: 0 6px; color: var(--muted); font-weight: 950; font-size: 12px; }

/* ================== Right Column ================== */

    .rightCol{
      position: sticky;
      top: calc(var(--headerH) + 14px);
      display:flex;
      flex-direction:column;
      gap: 16px;
      align-self:start;
    }
    @media (max-width: 1120px){
      .rightCol{ position: relative; top: auto; }
    }

    .orderEmpty{
      padding: 12px;
      border: 1px dashed rgba(193,214,203,.85);
      border-radius: var(--radiusSm);
      background: rgba(240,247,244,.55);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
    }
    .orderList{
      background: #f7f9f8;
    }
    .orderItem{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 12px;
      padding: 14px;
      background: #fff;
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items:start;
      box-shadow: 0 8px 22px rgba(17,24,39,.045);
    }
    .orderItem + .orderItem{ margin-top: 10px; }
    .oiName{ font-weight: 950; font-size: 14px; line-height: 1.2; }
    .oiMeta{ font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 700; }
    .oiRight{ display:flex; flex-direction:column; gap: 10px; align-items:flex-end; }
    .oiNums{
      font-size: 12px;
      color: rgba(17,24,39,.64);
      text-align:right;
      font-weight: 800;
      line-height: 1.25;
    }
    .oiNums b{ color: #111827; font-weight: 950; }
    .oiActions{
      display:flex;
      gap: 8px;
      align-items:center;
      padding: 4px;
      border-radius: 12px;
      background: #f8faf8;
      border: 1px solid rgba(17,24,39,.08);
    }

    .miniBtn{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      cursor:pointer;
      font-weight: 950;
      font-size: 14px;
    }
    .miniBtn:hover{ filter: brightness(1.02); }
    .miniBtnDanger{
      border-color: rgba(160,60,60,.18);
      background: rgba(255,240,240,1);
    }
    .qtyBadge{
      min-width: 44px;
      height: 40px;
      text-align:center;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--sageLine);
      background: var(--sageSoft);
      color: #14532d;
      font-weight: 950;
      font-size: 12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

/* ================== Milestones ================== */

    .mileRow{ padding: 12px 16px 18px; }
    .mileGrid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .mile{
      display:flex;
      flex-direction:column;
      gap: 8px;
      padding: 10px 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      user-select:none;
    }

    .mile.active,
    .mile.infoActive{
      border-color: var(--sageLine);
      background: var(--sageSoft);
    }
    .mile.infoActive{
      border-color: rgba(245,158,11,.28);
      background: var(--amberSoft);
    }
    .mile.active .mileIcon,
    .mile.infoActive .mileIcon{
      background: #fff;
      border-color: var(--sageLine);
      color: #14532d;
      font-weight: 950;
    }
    .mile.active .mileProgFill,
    .mile.infoActive .mileProgFill{
      background: var(--sage);
    }

    .mileWrap{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .mileIcon{
      width: 44px; height: 44px;
      border-radius: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .2px;
      background: rgba(240,247,244,.88);
      border: 1px solid var(--line);
      color: var(--txt);
    }

    .mileLabel{
      font-size: 11px;
      font-weight: 850;
      color: var(--muted);
      line-height: 1.2;
      min-height: 28px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .mileProg{
      height: 7px;
      border-radius: 999px;
      overflow:hidden;
      background: rgba(193,214,203,.35);
    }
    .mileProgFill{
      height: 100%;
      width: 0%;
      background: rgba(21,128,61,.42);
      transition: width .18s ease;
    }

    @media (max-width: 720px){
      .mileGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

/* ================== Order Peek Button ================== */

    .orderPeekBtn{
      appearance:none;
      border: 1px solid var(--sage);
      background: var(--sage);
      color: #fff;
      border-radius: 12px;
      padding: 10px 12px;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      cursor:pointer;
      user-select:none;
      font-weight: 950;
      font-size: 12px;
      white-space: nowrap;
    }

    .orderPeekBtn:disabled{ opacity:.55; cursor:not-allowed; }
    .orderPeekBtn:hover{ filter: brightness(1.04); }
    .orderPeekText{ display:inline-block; }
    
    .orderBadge{
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: #fff;
      border: 1px solid rgba(255,255,255,.42);
      color: #14532d;
      font-variant-numeric: tabular-nums;
    }
    .orderBadge.isZero{ display:none; }
    .orderBadge.pop{ animation: badgePop .22s ease; }
    
    @keyframes badgePop{
      0%{ transform: scale(.85); }
      60%{ transform: scale(1.15); }
      100%{ transform: scale(1); }
    }

/* ================== Modal ================== */

    .modal[hidden]{ display:none; }
    .modal{
      position: fixed;
      inset: 0;
      z-index: 90;
      display:block;
    }
    .modalBackdrop{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.28);
      backdrop-filter: blur(2px);
      cursor: pointer;
    }
    .modalPanel{
      position:absolute;
      right: 16px;
      top: calc(var(--headerH) + 16px);
      width: min(420px, calc(100vw - 32px));
      max-height: calc(100vh - var(--headerH) - 32px);
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.97);
      box-shadow: var(--shadow);
      overflow:hidden;
      transform: translateX(18px);
      opacity: 0;
      animation: panelIn .22s ease forwards;

      /* Scroll fix */
      display:flex;
      flex-direction:column;
    }
    @keyframes panelIn{
      to{ transform: translateX(0); opacity: 1; }
    }
    .modalHead{
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      background: #fff;
    }
    .modalTitle{ font-size: 14px; font-weight: 950; margin:0; }
    .modalSub{ font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 800; }
    .modalClose{
      appearance:none;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      width: 40px;
      height: 40px;
      cursor:pointer;
      font-weight: 950;
    }
    .modalClose:hover{ filter: brightness(1.02); }

    /* Order list inside modal: always scroll when needed */
    .modalPanel .orderList{
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      max-height: none;
      padding: 12px;
    }

/* ================== Toast ================== */

    .toast[hidden]{ display:none; }
    .toast{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 18px;
      z-index: 95;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.92);
      font-size: 12px;
      font-weight: 900;
      color: var(--txt);
      opacity: 0;
      animation: toastIn .18s ease forwards;
    }
    @keyframes toastIn{
      to{ opacity: 1; }
    }

/* ================== LRP Picker ================== */

    .lrpPickCard .lrpPickBody{ 
      padding: 14px 16px 16px; 
      display:flex; 
      flex-direction:column; 
      gap:10px; 
    }
    .lrpPickLabel{ 
      font-size: 11px; 
      font-weight: 600; 
      color: var(--txt); 
    }
    .lrpPickHint{ 
      color: var(--muted); 
      font-size: 13px; 
      line-height: 1.35; 
    }
    .lrpPickCard .selectWrap{ 
      position: relative; 
    }
    .lrpPickCard .selectWrap:after{
      content: "▾";
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: rgba(20, 24, 33, .55);
      font-size: 14px;
    }
    .lrpPickCard .lrpSelect{
      width: 100%;
      height: 44px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 0 40px 0 14px;
      font-weight: 800;
      letter-spacing: .2px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    .lrpPickCard .lrpSelect:focus{
      outline: none;
      border-color: rgba(16, 124, 56, .45);
      box-shadow: 0 0 0 4px rgba(16, 124, 56, .12);
    }
    .lrpPickCard .lrpSelect:disabled{ opacity: .7; }
    
    /* LRP legend – subtle */
    .lrp-legend{
      margin-top: 10px;
      padding: 10px 12px 0;
      border-top: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }
    .lrp-legend div{
      margin: 2px 0;
    }
    .lrp-legend strong{
      font-weight: 850;
      color: #14532d;
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      *{ transition: none !important; scroll-behavior: auto !important; }
    }

  
/* ================== AI SEO Sections ================== */
.seoStack{ display:flex; flex-direction:column; gap:16px; margin: 18px 0 16px; }
.seoCard{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(248,252,249,.92), #fff 36%),
    #fff;
}
.seoCard .cardBody{ padding: 18px 20px 20px; }
.seoIntro{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items:start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.seoKicker{
  margin: 0 0 7px;
  color: #15803d;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.seoCard h1{
  max-width: 760px;
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: .1px;
  font-weight: 950;
  line-height: 1.15;
}
.seoLead{ max-width: 1040px; }
.seoCard h2{
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .1px;
  font-weight: 950;
}
.seoCard p, .seoCard li{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650;
}
.seoCard ul, .seoCard ol{ margin: 8px 0 0; padding-left: 0; }
.seoQuickFacts{
  display:grid;
  gap: 8px;
  align-content:start;
}
.seoQuickFacts span{
  display:flex;
  align-items:center;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(22,101,52,.16);
  border-radius: 12px;
  background: rgba(240,253,244,.76);
  color: #14532d;
  font-size: 12px;
  font-weight: 900;
}
.seoAliasBox{
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(22,101,52,.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(240,253,244,.72), rgba(255,255,255,.92));
}
.seoAliasBox h2{
  margin-bottom: 7px;
}
.seoAliasBox p{
  max-width: 1080px;
  margin: 0;
}
.seoGrid{
  display:grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 16px;
}
.seoFeatureGrid{ margin-top: 16px; }
.seoPanel{
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.seoPanelTint{
  background: linear-gradient(180deg, rgba(240,253,244,.62), rgba(255,255,255,.92));
  border-color: rgba(22,101,52,.18);
}
.seoSteps{
  counter-reset: seo-step;
  list-style:none;
}
.seoSteps li{
  counter-increment: seo-step;
  position:relative;
  min-height: 30px;
  padding: 3px 0 8px 42px;
}
.seoSteps li::before{
  content: counter(seo-step);
  position:absolute;
  left:0;
  top:0;
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.seoChecks{
  list-style:none;
}
.seoChecks li{
  position:relative;
  padding: 0 0 9px 26px;
}
.seoChecks li::before{
  content:"";
  position:absolute;
  left:0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #15803d;
  box-shadow: 0 0 0 5px rgba(22,163,74,.10);
}
.seoPills{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px; }
.seoPill{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  color: rgba(17,24,39,.74);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.seoPill a{ text-decoration:none; }
.faqGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}
.faqItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.faqQ{ margin: 0 0 7px; font-size: 13px; font-weight: 950; color: var(--txt); }
.faqA{ margin: 0; }
.seoSupportGrid{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.seoInfoBlock{
  padding: 2px 0;
}
.seoInfoBlock p{ margin: 0 0 10px; }
@media (max-width: 980px){
  .seoIntro,
  .seoGrid,
  .faqGrid{ grid-template-columns: 1fr; }
  .seoCard .cardBody{ padding: 16px; }
}

  
/* ===== AI SEO anchor highlight ===== */
.seoTarget{ scroll-margin-top: calc(var(--headerH) + 12px); }
.seoTarget.isActive{
  background: linear-gradient(180deg, rgba(21,128,61,.08), #fff);
  box-shadow: 0 8px 24px rgba(21,128,61,.08);
  border-radius: var(--radius);
  transition: background .3s ease, box-shadow .3s ease;
}

  
/* Space between calculator and About */
#calculator{ margin-bottom: 16px; }

.srSnippet{
  max-width: 940px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}