:root{
  --blue:#2563eb; --blue-light:#eff6ff;
  --orange:#ea580c; --orange-light:#fff7ed;
  --green:#16a34a; --green-light:#f0fdf4;
  --purple:#7c3aed; --purple-light:#f5f3ff;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-500:#64748b; --gray-700:#334155; --gray-900:#0f172a;
  --red:#dc2626; --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif; background:var(--gray-50); color:var(--gray-900);}
a{color:var(--blue); text-decoration:none;}
header#topbar{background:#fff; border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:20;}
.topbar-inner{max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.topbar-inner h1{font-size:17px; margin:0;}
#mainNav{display:flex; align-items:center; gap:14px; font-size:14px; flex-wrap:wrap;}
#mainNav a{color:var(--gray-700); font-weight:600; padding:6px 4px;}
#mainNav a.active{color:var(--blue); border-bottom:2px solid var(--blue);}
#whoami{color:var(--gray-500); font-size:13px;}
.hidden{display:none !important;}

main#app{max-width:1100px; margin:0 auto; padding:18px 16px 60px;}

.btn{border:none; border-radius:8px; padding:9px 14px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:#1d4ed8;}
.btn-secondary{background:var(--gray-100); color:var(--gray-700);}
.btn-secondary:hover{background:var(--gray-200);}
.btn-danger{background:#fee2e2; color:var(--red);}
.btn-success{background:var(--green-light); color:var(--green);}
.btn-ghost{background:transparent; color:var(--gray-500); padding:6px 8px;}
.btn-sm{padding:6px 10px; font-size:13px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:16px;}
.center-box{max-width:380px; margin:60px auto; text-align:center;}
.center-box h2{margin-bottom:18px;}

.field{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--gray-500); margin-bottom:12px;}
.field input, .field select, .field textarea{border:1px solid var(--gray-300); border-radius:8px; padding:9px 10px; font-size:14px; font-family:inherit;}
.field textarea{resize:vertical; min-height:56px;}
.form-error{color:var(--red); font-size:13px; margin:8px 0;}
.filters{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:16px;}
.filters .field{margin-bottom:0; min-width:140px;}
.toolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px;}

table.list-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--gray-200);}
table.list-table th{text-align:left; font-size:12px; color:var(--gray-500); padding:10px 12px; background:var(--gray-50); border-bottom:1px solid var(--gray-200);}
table.list-table td{padding:10px 12px; border-bottom:1px solid var(--gray-100); font-size:14px; vertical-align:middle;}
table.list-table tr:last-child td{border-bottom:none;}
table.list-table tr:hover td{background:var(--gray-50);}

.badge{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;}
.badge-japan{background:var(--blue-light); color:var(--blue);}
.badge-korea{background:var(--purple-light); color:var(--purple);}
.badge-warehouse{background:var(--orange-light); color:var(--orange);}
.badge-splitting{background:#fef9c3; color:#a16207;}
.badge-completed{background:var(--green-light); color:var(--green);}
.badge-pending{background:var(--orange-light); color:var(--orange);}
.badge-shipped{background:var(--green-light); color:var(--green);}

.empty-state{text-align:center; padding:60px 20px; color:var(--gray-500);}
.empty-state div:first-child{font-size:38px; margin-bottom:10px;}

.stage-timeline{display:flex; gap:0; margin:18px 0 24px; overflow-x:auto;}
.stage-step{flex:1; min-width:150px; padding:14px; border:2px solid var(--gray-200); border-radius:10px; margin-right:10px; background:#fff;}
.stage-step.done{border-color:var(--green); background:var(--green-light);}
.stage-step.current{border-color:var(--blue); background:var(--blue-light);}
.stage-step h4{margin:0 0 6px; font-size:14px;}
.stage-step .meta{font-size:12px; color:var(--gray-500); line-height:1.6;}

.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; margin-top:8px;}
.photo-thumb{position:relative; border-radius:8px; overflow:hidden; height:90px; background:var(--gray-100); cursor:pointer;}
.photo-thumb img{width:100%; height:100%; object-fit:cover;}
.photo-thumb .dl-btn{position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:6px; font-size:11px; padding:2px 6px; cursor:pointer;}

.section-title{font-size:15px; font-weight:700; margin:22px 0 10px;}

.batch-card{border:1px solid var(--gray-200); border-radius:10px; padding:12px; margin-bottom:10px; background:#fff;}
.batch-card .row1{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.batch-card .meta{font-size:13px; color:var(--gray-500); margin-top:4px;}
.batch-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}

.inline-form{display:flex; gap:8px; flex-wrap:wrap; align-items:end; background:var(--gray-50); border:1px dashed var(--gray-300); border-radius:10px; padding:12px; margin-bottom:14px;}
.inline-form .field{margin-bottom:0;}
.inline-form input{width:120px;}
.inline-form input.wide{width:180px;}

.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:flex-start; justify-content:center; padding:24px 12px; overflow:auto; z-index:100;}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:12px; width:100%; max-width:520px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden;}
.modal-header{padding:16px 20px; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center;}
.modal-header h2{font-size:16px; margin:0;}
.modal-body{padding:18px 20px; overflow:auto;}
.modal-footer{padding:14px 20px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:8px;}

.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px;}
.lightbox-close{position:absolute; top:16px; right:20px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer;}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--gray-900); color:#fff; padding:10px 18px; border-radius:8px; font-size:14px; z-index:300; opacity:0; pointer-events:none; transition:opacity .2s;}
.toast.show{opacity:1;}

.file-input-hidden{display:none;}
.summary{font-size:13px; color:var(--gray-500); margin-bottom:10px;}
@media (max-width:600px){
  table.list-table{font-size:13px;}
  .stage-timeline{flex-direction:column;}
  .stage-step{margin-right:0; margin-bottom:10px;}
}