:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#101828;
  --muted:#667085;
  --line:#e4e7ec;
  --primary:#173f73;
  --primary-hover:#11345f;
  --primary-soft:#eef4fb;
  --danger:#b42318;
  --danger-soft:#fef3f2;
  --success:#067647;
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow:0 8px 28px rgba(16,24,40,.06);
}

*{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at top right, rgba(23,63,115,.08), transparent 260px),
    var(--bg);
  color:var(--text);
  font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{
  outline:3px solid rgba(23,63,115,.18);
  outline-offset:2px;
}

.app-shell{
  width:min(100%,760px);
  margin:0 auto;
  padding:22px 16px 42px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:6px 2px 18px;
}

.topbar h1{
  margin:0;
  font-size:29px;
  line-height:1.15;
  letter-spacing:-.045em;
  font-weight:800;
}

.topbar h1::before{
  content:"INVENTORY";
  display:block;
  margin-bottom:5px;
  color:var(--primary);
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800;
}

.topbar p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
}

.card,.panel{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.card{
  padding:24px;
}

#loginView{
  max-width:520px;
  margin:42px auto 0;
}

#loginView::before{
  content:"📦";
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:18px;
  border-radius:16px;
  background:var(--primary-soft);
  font-size:26px;
}

.card h2,.panel h2{
  margin:0;
  color:var(--text);
  letter-spacing:-.025em;
}

.card h2{font-size:22px}

.muted{
  margin:8px 0 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.menu-card{
  position:relative;
  overflow:hidden;
  min-height:142px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  color:var(--text);
  text-align:left;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.menu-card:first-child{
  background:linear-gradient(145deg,#173f73,#102f57);
  border-color:#173f73;
  color:#fff;
}

.menu-card:first-child small{color:#d9e6f5}

.menu-card span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:18px;
  border-radius:13px;
  background:var(--surface-soft);
  font-size:22px;
}

.menu-card:first-child span{
  background:rgba(255,255,255,.14);
}

.menu-card strong{
  display:block;
  font-size:17px;
  letter-spacing:-.025em;
}

.menu-card small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

@media (hover:hover) and (pointer:fine){
  .menu-card:hover{
    transform:translateY(-2px);
    border-color:#c9d3df;
    box-shadow:0 12px 30px rgba(16,24,40,.08);
  }
}

.stack{
  display:grid;
  gap:16px;
}

label{
  display:grid;
  gap:8px;
  color:#344054;
  font-size:12px;
  font-weight:700;
}

input{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid #d0d5dd;
  border-radius:13px;
  background:#fff;
  color:var(--text);
  font-size:16px;
  transition:border-color .15s ease,box-shadow .15s ease;
}

input:focus{
  border-color:#84a8d3;
  box-shadow:0 0 0 4px rgba(23,63,115,.08);
  outline:none;
}

input::placeholder{color:#98a2b3}

.inline{
  display:flex;
  gap:8px;
  align-items:stretch;
}

.inline input{
  flex:1;
  min-width:0;
}

.btn{
  min-height:46px;
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-weight:700;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.btn.primary{
  min-height:52px;
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

.btn.primary:hover{background:var(--primary-hover)}

.btn.danger{
  min-height:52px;
  border-color:var(--danger);
  background:var(--danger);
  color:#fff;
}

.btn.ghost{
  background:#fff;
  color:#475467;
}

.btn.scan{
  min-width:76px;
  border-color:#d7e3f0;
  background:var(--primary-soft);
  color:var(--primary);
  white-space:nowrap;
}

.panel{
  margin-top:2px;
  padding:22px;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid #eef1f5;
}

.panel-head h2{
  font-size:20px;
}

.panel-head .back{
  min-height:38px;
  padding:7px 11px;
  border-radius:10px;
  font-size:12px;
}

.info-box{
  padding:14px;
  border:1px solid #e3e8ef;
  border-radius:13px;
  background:var(--surface-soft);
  color:#475467;
  font-size:13px;
  line-height:1.65;
}

.result-card{
  margin-top:10px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 12px rgba(16,24,40,.035);
  font-size:13px;
  line-height:1.65;
}

.result-card strong{
  display:block;
  margin-bottom:5px;
  color:var(--text);
  font-size:14px;
}

.message{
  min-height:20px;
  margin:12px 2px 0;
  font-size:12px;
  line-height:1.5;
}

.message.ok{color:var(--success)}
.message.err{color:var(--danger)}

.table-wrap{
  margin-top:14px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  background:#fff;
  font-size:12px;
}

th,td{
  padding:12px 13px;
  border-bottom:1px solid #eef1f5;
  text-align:left;
  white-space:nowrap;
}

th{
  position:sticky;
  top:0;
  background:#f8fafc;
  color:#475467;
  font-size:11px;
  font-weight:800;
}

tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcff}

.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.68);
  backdrop-filter:blur(4px);
}

.modal-card{
  width:min(620px,100%);
  max-height:90%;
  overflow:auto;
  padding:18px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 80px rgba(15,23,42,.26);
}

#reader{
  overflow:hidden;
  width:100%;
  border-radius:15px;
}

.hidden{display:none!important}

@media(max-width:560px){
  .app-shell{padding:15px 11px 30px}
  .topbar{padding:2px 3px 14px}
  .topbar h1{font-size:25px}
  #loginView{margin-top:24px}
  .card{padding:19px}
  .dashboard-grid{gap:9px}
  .menu-card{min-height:128px;padding:15px}
  .menu-card span{width:38px;height:38px;margin-bottom:14px;font-size:20px}
  .menu-card strong{font-size:15px}
  .menu-card small{font-size:10px}
  .panel{padding:16px}
  .panel-head{margin-bottom:16px}
  .inline{flex-wrap:wrap}
  .inline .btn.scan{width:100%}
}

@media(max-width:360px){
  .dashboard-grid{grid-template-columns:1fr}
  .menu-card{min-height:112px}
}