:root{
    --bg:#181410;
    --bg-panel:#221c16;
    --bg-panel-2:#2a231c;
    --line:#3c3226;
    --gold:#b6913c;
    --gold-bright:#d4af5a;
    --oxblood:#7a2530;
    --oxblood-bright:#9c3140;
    --text:#e9ddc2;
    --text-dim:#a99a7c;
    --text-faint:#786c56;
    --ok:#5c7a4a;
    --warn:#b6913c;
    --danger:#9c3140;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse at top, rgba(182,145,60,0.06), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'EB Garamond', serif;
    font-size:17px;
    min-height:100vh;
  }
  h1,h2,h3,.display{
    font-family:'Cinzel', serif;
    letter-spacing:0.03em;
  }
  a{color:var(--gold-bright);}

  /* ---------- Header ---------- */
  header{
    padding:2.2rem 1.5rem 1.6rem;
    text-align:center;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  header::before, header::after{
    content:"";
    position:absolute;
    top:50%; width:80px; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  header h1{
    font-size:2rem;
    font-weight:700;
    color:var(--gold-bright);
    margin:0 0 0.35rem;
    text-shadow:0 2px 8px rgba(0,0,0,0.5);
  }
  header p{
    margin:0;
    color:var(--text-dim);
    font-style:italic;
    font-size:1.02rem;
  }

  /* ---------- Layout ---------- */
  .layout{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:0;
    max-width:1400px;
    margin:0 auto;
    align-items:start;
  }
  main{
    padding:1.6rem 1.6rem 6rem;
    min-width:0;
  }

  /* ---------- Controls ---------- */
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:0.6rem;
    margin-bottom:1.4rem;
    align-items:center;
  }
  input[type="search"]{
    flex:1 1 220px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    color:var(--text);
    padding:0.6rem 0.9rem;
    font-family:'EB Garamond', serif;
    font-size:1rem;
    border-radius:3px;
  }
  input[type="search"]:focus, .tab:focus-visible, .strsel:focus-visible, .stepbtn:focus-visible, .addbtn:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:1px;
  }
  input[type="search"]::placeholder{color:var(--text-faint);}

  .tabs{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    margin-bottom:1.4rem;
  }
  .tab{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text-dim);
    padding:0.4rem 0.85rem;
    font-family:'EB Garamond', serif;
    font-size:0.92rem;
    border-radius:2px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .tab:hover{border-color:var(--gold); color:var(--text);}
  .tab.active{
    background:var(--oxblood);
    border-color:var(--oxblood-bright);
    color:#f2e4c9;
  }

  /* ---------- Items ---------- */
  .cat-heading{
    font-size:1.05rem;
    color:var(--gold-bright);
    margin:1.8rem 0 0.6rem;
    padding-bottom:0.3rem;
    border-bottom:1px solid var(--line);
  }
  .cat-heading:first-of-type{margin-top:0;}
  .item-list{
    display:flex;
    flex-direction:column;
  }
  .item-row{
    display:grid;
    grid-template-columns: 1fr auto auto auto;
    gap:1rem;
    align-items:center;
    padding:0.65rem 0.2rem;
    border-bottom:1px solid rgba(60,50,38,0.5);
  }
  .item-row:hover{background:rgba(182,145,60,0.045);}
  .item-name{font-size:1rem;}
  .item-meta{
    font-size:0.86rem;
    color:var(--text-faint);
    display:block;
  }
  .item-stat{
    font-variant-numeric:tabular-nums;
    color:var(--text-dim);
    font-size:0.92rem;
    white-space:nowrap;
    text-align:right;
    min-width:70px;
  }
  .addbtn{
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-bright);
    width:32px; height:32px;
    border-radius:50%;
    font-size:1.2rem;
    line-height:1;
    cursor:pointer;
    transition:all .15s ease;
  }
  .addbtn:hover{background:var(--gold); color:#1b1712;}
  .addbtn:active{transform:scale(0.92);}
  .empty-msg{
    color:var(--text-faint);
    font-style:italic;
    padding:2rem 0;
    text-align:center;
  }

  /* ---------- Cart sidebar ---------- */
  aside.cart{
    background:var(--bg-panel);
    border-left:1px solid var(--line);
    min-height:100vh;
    padding:1.6rem 1.3rem 2rem;
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .cart h2{
    font-size:1.1rem;
    color:var(--gold-bright);
    margin:0 0 0.2rem;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
  }
  .cart h2 .count{
    font-family:'EB Garamond', serif;
    font-size:0.85rem;
    color:var(--text-faint);
    font-style:italic;
  }
  .cart-items{
    flex:1;
    overflow-y:auto;
    max-height:38vh;
    display:flex;
    flex-direction:column;
    gap:0.55rem;
    padding-right:2px;
  }
  .cart-items::-webkit-scrollbar{width:6px;}
  .cart-items::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
  .cart-empty{
    color:var(--text-faint);
    font-style:italic;
    font-size:0.92rem;
    padding:1rem 0;
    text-align:center;
    border:1px dashed var(--line);
    border-radius:3px;
  }
  .cart-row{
    display:grid;
    grid-template-columns: 1fr auto auto;
    gap:0.5rem;
    align-items:center;
    font-size:0.9rem;
    padding-bottom:0.5rem;
    border-bottom:1px solid rgba(60,50,38,0.5);
  }
  .cart-row .cname{color:var(--text);}
  .cart-row .csub{
    display:block;
    color:var(--text-faint);
    font-size:0.78rem;
  }
  .qty-controls{
    display:flex;
    align-items:center;
    gap:0.35rem;
  }
  .stepbtn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text-dim);
    width:22px;height:22px;
    border-radius:50%;
    cursor:pointer;
    font-size:0.85rem;
    line-height:1;
  }
  .stepbtn:hover{border-color:var(--oxblood-bright); color:var(--oxblood-bright);}
  .qty-num{min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums;}
  .cart-price{
    text-align:right;
    color:var(--gold-bright);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  .totals{
    border-top:1px solid var(--line);
    padding-top:0.9rem;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
  }
  .totals-row{
    display:flex;
    justify-content:space-between;
    font-size:0.95rem;
  }
  .totals-row.grand{
    font-family:'Cinzel', serif;
    font-size:1.05rem;
    color:var(--gold-bright);
    padding-top:0.3rem;
  }

  /* ---------- Encumbrance ---------- */
  .encumbrance{
    border-top:1px solid var(--line);
    padding-top:0.9rem;
  }
  .encumbrance-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.88rem;
    color:var(--text-dim);
    margin-bottom:0.5rem;
  }
  .strsel{
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    color:var(--text);
    font-family:'EB Garamond', serif;
    padding:0.15rem 0.4rem;
    border-radius:2px;
  }
  .gauge-track{
    position:relative;
    height:16px;
    border-radius:4px;
    overflow:hidden;
    background:var(--bg-panel-2);
    border:1px solid var(--line);
  }
  .gauge-zone{position:absolute; top:0; bottom:0;}
  .gauge-marker{
    position:absolute;
    top:-3px; bottom:-3px;
    width:2px;
    background:var(--text);
    box-shadow:0 0 4px 1px rgba(233,221,194,0.6);
  }
  .encumbrance-status{
    margin-top:0.5rem;
    font-size:0.86rem;
    text-align:center;
    padding:0.3rem;
    border-radius:2px;
    font-family:'Cinzel', serif;
    letter-spacing:0.02em;
  }
  .status-light{color:var(--ok);}
  .status-medium{color:var(--warn);}
  .status-heavy{color:var(--danger);}
  .status-over{color:#e05a5a;}

  /* ---------- Mobile ---------- */
  .cart-toggle{display:none;}
  @media (max-width: 900px){
    .layout{grid-template-columns:1fr;}
    aside.cart{
      position:fixed;
      bottom:0; left:0; right:0;
      top:auto;
      min-height:auto;
      max-height:80vh;
      border-left:none;
      border-top:1px solid var(--gold);
      transform:translateY(calc(100% - 58px));
      transition:transform .25s ease;
      z-index:50;
      box-shadow:0 -6px 24px rgba(0,0,0,0.5);
    }
    aside.cart.open{transform:translateY(0);}
    .cart-items{max-height:32vh;}
    .cart-toggle{
      display:flex;
      justify-content:space-between;
      align-items:center;
      cursor:pointer;
      margin:-1.6rem -1.3rem 0.6rem;
      padding:1rem 1.3rem;
      background:var(--oxblood);
      color:#f2e4c9;
      font-family:'Cinzel', serif;
      font-size:0.95rem;
    }
    main{padding-bottom:5rem;}
  }