*{box-sizing:border-box}
:root{--green:#063d2a;--green2:#0a5a3b;--cream:#f6f3ec;--white:#fff;--ink:#142219;--muted:#6a746e;--line:#dfe4e0;--red:#c42318;--redbg:#fff0ee;--gold:#c7a13d;--shadow:0 10px 30px rgba(13,48,34,.08)}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:var(--cream);color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}.hidden{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:282px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);overflow:auto;z-index:30}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:24px;background:linear-gradient(145deg,#0b1010,#123828);color:#fff}
.sidebar-brand img{width:72px;height:72px;border-radius:18px}.sidebar-brand strong{display:block;font-size:27px;letter-spacing:.12em}.sidebar-brand span{display:block;color:#e0b34b;font-size:18px;letter-spacing:.24em}
.category-nav{padding:8px 12px}.category-nav button{width:100%;display:flex;align-items:center;gap:12px;padding:11px 7px;border:0;border-bottom:1px solid #edf0ee;background:#fff;text-align:left;font-weight:800}.category-nav button:hover,.category-nav button.active{background:#eef5f1;border-radius:12px}.category-nav img{width:50px;height:50px;flex:0 0 50px;object-fit:contain;border-radius:50%;background:#fff}.category-nav i{margin-left:auto;font-style:normal;font-size:20px}
.sidebar-settings{position:sticky;bottom:0;width:100%;border:0;background:var(--green);color:#fff;padding:17px;text-align:left;font-weight:800}
.main-shell{min-width:0;display:flex;min-height:100vh;flex-direction:column}.topbar{position:sticky;top:0;height:84px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:0 28px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:20}.menu-button{display:none}.icon-button{width:43px;height:43px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:21px}.title-button{border:0;background:none;text-align:center}.title-button strong{display:block;color:var(--green);font-size:28px;letter-spacing:.08em}.title-button span{display:block;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:8px}
.main-content{width:min(1180px,100%);margin:0 auto;padding:28px 28px 100px;flex:1}.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head p{margin:0;color:var(--gold);font-size:11px;letter-spacing:.18em;font-weight:900}.page-head h1{margin:3px 0 0;color:var(--green);font-size:29px}
.primary-button,.outline-button{border-radius:10px;padding:12px 17px;font-weight:900}.primary-button{border:0;background:var(--green);color:#fff}.outline-button{border:1px solid #8da397;background:#fff;color:var(--green)}.full{display:block;width:100%;margin-top:10px}.danger-outline{color:var(--red);border-color:#e5aaa5}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.category-card{border:1px solid #e6e9e6;background:#fff;border-radius:20px;padding:16px 13px;box-shadow:var(--shadow);text-align:center;min-height:263px;transition:.16s}.category-card:hover{transform:translateY(-3px)}.category-card img{width:min(180px,90%);aspect-ratio:1;object-fit:contain;display:block;margin:0 auto 10px}.category-card strong{display:block;font-size:20px}.category-card small{color:var(--muted);font-size:11px;letter-spacing:.08em}.category-card em{display:inline-block;margin-top:8px;font-style:normal;color:var(--green);background:#edf5f1;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.metric-card{border:1px solid var(--line);background:#fff;border-radius:17px;padding:18px;text-align:left}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;font-size:38px;color:var(--green);margin:5px 0}.danger-card strong{color:var(--red)}
.filter-bar{display:grid;grid-template-columns:1fr 260px auto;gap:11px;margin-bottom:15px}.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:0 13px;font-size:22px}.search-box input,.filter-bar select{width:100%;border:0;background:#fff;padding:13px;outline:0}.filter-bar select{border:1px solid var(--line);border-radius:11px}
.table-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:auto}.table-card table{width:100%;border-collapse:collapse;min-width:760px}.table-card th{background:var(--green);color:#fff;padding:14px;text-align:left}.table-card td{padding:13px 14px;border-bottom:1px solid #ecf0ed}.category-cell{display:flex;align-items:center;gap:9px}.category-cell img{width:38px;height:38px;object-fit:contain;border-radius:50%}.stock-value{font-size:21px;font-weight:900}.low-value{color:var(--red)}.action-row{display:flex;gap:7px}.small-action{border:1px solid #8da397;background:#fff;border-radius:8px;padding:8px 11px;font-weight:800}.inventory-cards{display:none}
.list-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px}.list-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid #edf0ee}.list-row:last-child{border-bottom:0}.list-row img{width:50px;height:50px;object-fit:contain}.list-row h3{margin:0;font-size:17px}.list-row p{margin:4px 0 0;color:var(--muted);font-size:13px}.list-amount{text-align:right;font-weight:900}.list-amount strong{display:block;font-size:23px;color:var(--red)}
.history-filter{grid-template-columns:220px 220px auto}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.settings-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px}.settings-card h2{margin-top:0;color:var(--green)}.settings-card textarea{width:100%;min-height:180px;border:1px solid var(--line);border-radius:10px;padding:12px}.settings-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-card dt{color:var(--muted)}.settings-card dd{margin:0;text-align:right;font-weight:800}.file-button{text-align:center;position:relative}.file-button input{position:absolute;opacity:0;inset:0;width:100%;cursor:pointer}
.bottom-nav{display:none}footer{background:var(--green);color:#fff;text-align:center;padding:15px;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:18px;z-index:100}.modal-card{position:relative;width:min(590px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;padding:25px}.modal-close{position:absolute;right:12px;top:10px;border:0;background:#eef1ef;border-radius:50%;width:38px;height:38px;font-size:23px}.modal-card h2{margin:0 45px 15px 0;color:var(--green)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid .wide{grid-column:1/-1}.form-grid label{display:block;font-size:13px;font-weight:800;margin-bottom:5px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px}.quantity-control{display:grid;grid-template-columns:52px 1fr 52px;gap:7px}.quantity-control button{border:0;background:#eef1ef;border-radius:10px;font-size:26px}.modal-buttons{display:flex;gap:9px;margin-top:15px}.modal-buttons>*{flex:1}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#17261e;color:#fff;border-radius:999px;padding:12px 20px;z-index:200;box-shadow:0 9px 30px #0004}.scrim{display:none}
@media(max-width:1050px){.category-grid{grid-template-columns:repeat(3,1fr)}.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;left:-295px;top:0;width:282px;transition:.22s;box-shadow:12px 0 40px rgba(0,0,0,.23)}.sidebar.open{left:0}.scrim{position:fixed;inset:0;background:#0007;z-index:25}.scrim.show{display:block}.menu-button{display:block}.topbar{height:72px;padding:0 12px}.title-button strong{font-size:21px}.title-button span{font-size:9px}.top-actions .icon-button:first-child{display:none}.main-content{padding:19px 13px 92px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.category-card{min-height:215px;padding:11px 7px}.category-card img{width:min(145px,94%)}.category-card strong{font-size:16px}.category-card small{font-size:9px}.dashboard-grid{grid-template-columns:1fr}.filter-bar,.history-filter{grid-template-columns:1fr}.table-card{display:none}.inventory-cards{display:grid;gap:11px}.inventory-mobile-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px}.mobile-card-head{display:flex;justify-content:space-between;gap:8px}.mobile-category{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.mobile-category img{width:36px;height:36px;object-fit:contain}.mobile-stock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.mobile-stock-grid div{background:#f3f6f4;border-radius:10px;padding:10px}.mobile-stock-grid small{display:block;color:var(--muted)}.settings-grid{grid-template-columns:1fr}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:7px 4px calc(7px + env(safe-area-inset-bottom));z-index:22}.bottom-nav button{border:0;background:none;font-size:10px;color:var(--muted);font-weight:800}.bottom-nav button span{display:block;font-size:20px}.bottom-nav button.active{color:var(--green)}footer{display:none}}
@media(max-width:410px){.category-card{min-height:195px}.category-card img{width:min(124px,92%)}.page-head h1{font-size:25px}.primary-button{padding:11px 12px}}
/* Final edge-safe display for abrasives and welding category images */
.category-card img,
.category-nav img,
.category-cell img,
.mobile-category img,
.list-row img{
  object-fit:contain !important;
  object-position:center !important;
}

/* Header action placement refinement */
.topbar{
  grid-template-columns:48px minmax(0,1fr) auto !important;
  padding-right:max(18px, env(safe-area-inset-right)) !important;
  padding-top:env(safe-area-inset-top);
  min-height:84px;
}
.top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:126px;
}
.top-action-button{
  width:54px;
  min-width:54px;
  height:58px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:0;
  color:var(--green);
  border-radius:14px;
}
.top-action-button:hover{
  background:#edf5f1;
}
.top-action-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #87a294;
  border-radius:50%;
  background:#fff;
  font-size:20px;
  line-height:1;
}
.top-action-button small{
  font-size:9px;
  font-weight:900;
  line-height:1;
}
@media(max-width:820px){
  .topbar{
    grid-template-columns:44px minmax(0,1fr) 112px !important;
    gap:8px !important;
    padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;
    min-height:76px;
  }
  .top-actions{
    min-width:112px;
    gap:4px;
  }
  .top-action-button{
    width:52px;
    min-width:52px;
    height:54px;
  }
  .top-action-icon{
    width:34px;
    height:34px;
    font-size:18px;
  }
  .title-button strong{
    font-size:18px !important;
    white-space:nowrap;
  }
  .title-button span{
    font-size:8px !important;
    white-space:nowrap;
  }
}
@media(max-width:410px){
  .topbar{
    grid-template-columns:40px minmax(0,1fr) 104px !important;
  }
  .top-actions{
    min-width:104px;
  }
  .top-action-button{
    width:49px;
    min-width:49px;
  }
  .title-button strong{
    font-size:16px !important;
    letter-spacing:.04em !important;
  }
  .title-button span{
    font-size:7px !important;
  }
}

/* Remove subtitle spacing and vertically center SANWA STOCK */
.title-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:56px;
}
.title-button strong{
  margin:0 !important;
  line-height:1.05 !important;
}
.title-button span{
  display:none !important;
}
@media(max-width:820px){
  .title-button{min-height:50px}
}

/* Floating TOP return button */
.top-return-button{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:24px;
  z-index:35;
  width:62px;
  height:62px;
  border:0;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  box-shadow:0 12px 30px rgba(6,61,42,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  font-weight:900;
}
.top-return-button span{
  font-size:24px;
  line-height:1;
}
.top-return-button small{
  font-size:9px;
  letter-spacing:.06em;
}
.top-return-button:hover{
  background:var(--green2);
  transform:translateY(-2px);
}
@media(max-width:820px){
  .top-return-button{
    right:max(12px, env(safe-area-inset-right));
    bottom:calc(76px + env(safe-area-inset-bottom));
    width:56px;
    height:56px;
  }
}

/* FINAL header title clipping fix */
.topbar{
  overflow:visible !important;
}
.title-button{
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
  padding:0 8px !important;
}
.title-button strong{
  display:block !important;
  max-width:100% !important;
  font-size:clamp(17px, 3vw, 28px) !important;
  letter-spacing:clamp(.02em, .35vw, .08em) !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  transform:none !important;
}
.top-return-button{
  width:58px !important;
  height:58px !important;
}
.top-return-button span{
  font-size:28px !important;
  line-height:1 !important;
}
.top-return-button small{
  display:none !important;
}
@media(max-width:820px){
  .topbar{
    grid-template-columns:42px minmax(0,1fr) 108px !important;
  }
  .title-button{
    padding:0 4px !important;
  }
  .title-button strong{
    font-size:clamp(15px, 4.3vw, 20px) !important;
    letter-spacing:.025em !important;
  }
}
@media(max-width:390px){
  .topbar{
    grid-template-columns:38px minmax(0,1fr) 102px !important;
    gap:5px !important;
  }
  .title-button strong{
    font-size:14px !important;
    letter-spacing:.015em !important;
  }
}