:root { --brand:#f97316; --bg:#fff; --ink:#1f2937; --muted:#6b7280; --card:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color:var(--ink); background:var(--bg); }
.app-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:10; }
h1{ font-size:18px; margin:0; }
.primary{ background:var(--brand); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
.tabs{ display:flex; gap:8px; padding:8px 8px; overflow:auto; border-bottom:1px solid #eee; }
.tab{ background:#f3f4f6; border:none; padding:8px 12px; border-radius:999px; cursor:pointer; }
.tab.active{ background:var(--brand); color:#fff; }
main{ padding:16px; }
.cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media(min-width:900px){ .cards{ grid-template-columns:repeat(4, 1fr); } }
.card{ background:var(--card); border:1px solid #eee; border-radius:12px; padding:12px; }
.card h3{ margin:0 0 8px; font-size:14px; color:var(--muted); }
.card p{ font-size:24px; margin:0; font-weight:700; }
.card.warn{ border-color:#f59e0b; background:#fffbeb; }
.panel{ margin-top:16px; background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; }
.form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:8px 0 12px; }
.form-grid input, .form-grid select{ width:100%; padding:8px; border:1px solid #ddd; border-radius:8px; }
table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; }
thead th{ background:#f9fafb; text-align:left; padding:10px; font-size:12px; color:var(--muted); border-bottom:1px solid #eee; }
tbody td{ padding:10px; border-bottom:1px solid #f3f4f6; font-size:14px; vertical-align:top; }
.action{ display:flex; gap:8px; }
.kanban{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; overflow:auto; }
@media(min-width:1200px){ .kanban{ grid-template-columns: repeat(4, 1fr); } }
.column{ background:#fff; border:1px solid #eee; border-radius:12px; padding:8px; min-height:200px; }
.column h3{ margin:0 0 8px; font-size:14px; color:var(--muted); }
.list{ display:flex; flex-direction:column; gap:8px; min-height:100px; }
.card-deal{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:8px; cursor:grab; }
.card-deal .title{ font-weight:700; }
.mono{ background:#0b1220; color:#d1e7ff; padding:12px; border-radius:10px; overflow:auto; min-height:120px; }
.app-footer{ text-align:center; padding:12px; color:var(--muted); }
.settings-grid{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.file input{ display:none; }
.file{ background:#f3f4f6; padding:8px 12px; border-radius:8px; cursor:pointer; }
.note{ color:var(--muted); }
#account-search{ width:100%; padding:8px; border:1px solid #ddd; border-radius:8px; margin:8px 0 12px; }
ul{ margin:0; padding-left:20px; }