:root{
  --bg:#f5f4f1;
  --surface:#ffffff;
  --surface-2:#faf9f7;
  --border:#e6e3dd;
  --text:#1f1c18;
  --text-muted:#6f6a62;
  --brand:#e0272e;      /* mercari red */
  --brand-dark:#b71f24;
  --brand-soft:#fdeceb;
  --green:#1a8a5f;
  --green-soft:#e6f6ef;
  --amber:#b8790a;
  --amber-soft:#fbf1de;
  --blue:#2563a8;
  --blue-soft:#e8f0fb;
  --gray:#8a857c;
  --shadow: 0 1px 2px rgba(31,28,24,.04), 0 4px 16px rgba(31,28,24,.06);
  --radius: 14px;
  font-synthesis: none;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app{max-width:1180px;margin:0 auto;padding:20px 20px 60px;}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:8px 4px 20px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-icon{font-size:34px;line-height:1;}
.brand h1{font-size:20px;margin:0;letter-spacing:.02em;}
.brand .sub{margin:2px 0 0;color:var(--text-muted);font-size:13px;}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:1px solid transparent;border-radius:10px;
  padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border);}
.btn.ghost:hover{background:var(--surface-2);}
.btn.danger{background:#fff;color:#c0342c;border-color:#f0c9c6;}
.btn.danger:hover{background:#fdeceb;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab{
  background:transparent;border:none;border-bottom:2px solid transparent;
  padding:10px 6px;margin-right:18px;font-size:14px;font-weight:600;
  color:var(--text-muted);cursor:pointer;
}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-bottom:20px;
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.stat-card .label{font-size:12.5px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:6px;}
.stat-card .value{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.01em;}
.stat-card .value.pos{color:var(--green);}
.stat-card .value.neg{color:var(--brand);}
.stat-card .foot{margin-top:4px;font-size:12px;color:var(--text-muted);}

/* ---------- charts ---------- */
.charts-grid{
  display:grid;
  grid-template-columns:1.4fr 1.4fr 1fr 1fr;
  gap:14px;
}
@media (max-width:980px){
  .charts-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .charts-grid{grid-template-columns:1fr;}
}
.chart-card{padding:16px 18px 18px;}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap;}
.chart-head h3{margin:0;font-size:14.5px;}
.chart-head .hint{font-size:11.5px;color:var(--text-muted);}
.chart-wrap{position:relative;height:230px;}
.chart-wrap.small{height:200px;}

/* ---------- empty state ---------- */
.empty-state{
  text-align:center;padding:60px 20px;color:var(--text-muted);
}
.empty-icon{font-size:44px;margin-bottom:8px;}
.empty-state h2{color:var(--text);font-size:18px;margin:0 0 6px;}
.empty-state p{margin:0 0 16px;font-size:13.5px;}

/* ---------- filters ---------- */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;padding:14px;margin-bottom:14px;
}
.filters input, .filters select{
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13.5px;
  background:var(--surface-2);color:var(--text);
}
.filters input[type=search]{flex:1;min-width:180px;}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;padding:4px;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:920px;}
thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:hover{background:var(--surface-2);}
tbody tr{cursor:pointer;}
td.num{text-align:right;font-variant-numeric:tabular-nums;}
td.profit-pos{color:var(--green);font-weight:700;}
td.profit-neg{color:var(--brand);font-weight:700;}
.item-name{font-weight:600;}
.table-empty{text-align:center;padding:40px;color:var(--text-muted);font-size:13.5px;}

.badge{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  white-space:nowrap;
}
.badge.st-draft{background:#f1f0ec;color:#6f6a62;}
.badge.st-listed{background:var(--blue-soft);color:var(--blue);}
.badge.st-trading{background:var(--amber-soft);color:var(--amber);}
.badge.st-completed{background:var(--green-soft);color:var(--green);}
.badge.st-cancelled{background:var(--brand-soft);color:var(--brand-dark);}

.row-actions{display:flex;gap:6px;}
.icon-btn{
  border:none;background:transparent;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;
  color:var(--text-muted);
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(31,28,24,.42);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;z-index:100;overflow-y:auto;
}
.modal-overlay[hidden]{display:none;}
.modal{
  background:var(--surface);border-radius:16px;width:100%;max-width:640px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
}
.modal-head h2{margin:0;font-size:17px;}
.modal-close{border:none;background:transparent;font-size:16px;cursor:pointer;color:var(--text-muted);padding:4px 8px;border-radius:8px;}
.modal-close:hover{background:var(--surface-2);}

#itemForm{padding:20px 22px 4px;}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;
}
.form-grid label{
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-muted);
}
.form-grid label.span2{grid-column:1/-1;}
.form-grid input, .form-grid select, .form-grid textarea{
  border:1px solid var(--border);border-radius:9px;padding:9px 10px;font-size:14px;
  color:var(--text);background:var(--surface-2);font-weight:500;font-family:inherit;
}
.form-grid textarea{resize:vertical;}
.req{color:var(--brand);}
.profit-preview{justify-content:center;}
.profit-preview output{
  font-size:18px;font-weight:800;color:var(--green);padding:8px 10px;
  background:var(--green-soft);border-radius:9px;text-align:center;
}
.profit-preview output.neg{color:var(--brand);background:var(--brand-soft);}

.modal-actions{
  display:flex;align-items:center;gap:8px;padding:18px 2px 22px;
}
.modal-actions .spacer{flex:1;}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1f1c18;color:#fff;padding:10px 18px;border-radius:10px;
  font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:200;
}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr;}
  .form-grid label.span2{grid-column:auto;}
}