:root { --primary:#2e74b5; --primary-dark:#1f5a91; --primary-light:#deebf7; --bg:#f4f7fa; --surface:#fff; --surface-muted:#f8fafc; --field-bg:#fff; --button-hover:#f0f4f8; --text:#2c3540; --text-sub:#6b7785; --border:#dde4ec; --danger:#c0392b; --success:#1e8e5a; --warning:#b9770e; --badge-gray-bg:#eceff3; --badge-gray-text:#5d6b7a; --badge-green-bg:#def2e7; --badge-red-bg:#fae3e0; --badge-orange-bg:#fdeed8; --shadow:0 1px 3px rgba(20,40,60,.08),0 4px 14px rgba(20,40,60,.06); font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; font-size:14px; color:var(--text); color-scheme:light; }
:root[data-theme="dark"] { --primary:#6aa7df; --primary-dark:#9cc7ef; --primary-light:#1f3348; --bg:#101820; --surface:#17212b; --surface-muted:#111b24; --field-bg:#111b24; --button-hover:#203040; --text:#e6edf3; --text-sub:#a7b4c2; --border:#2b3a48; --danger:#ff8a80; --success:#63d69a; --warning:#f3ba5d; --badge-gray-bg:#263342; --badge-gray-text:#c3ced9; --badge-green-bg:#173827; --badge-red-bg:#3f211f; --badge-orange-bg:#3f2e18; --shadow:0 1px 3px rgba(0,0,0,.22),0 10px 28px rgba(0,0,0,.28); color-scheme:dark; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } h1,h2,h3 { color:var(--text); font-weight:700; } .layout { display:flex; min-height:100vh; }.sidebar { position:sticky; top:0; width:220px; height:100vh; flex-shrink:0; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--border); }.brand { padding:20px 18px 16px; border-bottom:1px solid var(--border); }.brand-name { color:var(--primary); font-size:15px; font-weight:800; }.brand-sub { margin-top:2px; color:var(--text-sub); font-size:11px; } nav { flex:1; display:flex; flex-direction:column; gap:2px; padding:12px 10px; overflow:auto; }.nav-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:var(--text); font-size:13px; font-weight:600; text-align:left; }.nav-item:hover { background:var(--bg); }.nav-item.active { color:var(--primary-dark); background:var(--primary-light); }.nav-icon { width:17px; flex:0 0 17px; color:currentColor; text-align:center; font-size:16px; line-height:1; }.sidebar-footer { display:flex; flex-direction:column; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }.user { overflow-wrap:anywhere; }.theme-toggle { justify-content:center; }.theme-mark { font-size:13px; line-height:1; }.main { flex:1; min-width:0; }.view { display:none; }.view.active { display:block; }.page { max-width:1200px; padding:24px 32px; }.page-title { margin:0 0 20px; font-size:20px; }.card { margin-bottom:20px; padding:20px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }.card h2 { margin:0 0 10px; font-size:14px; }.table-card { padding:0; overflow:hidden; }.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }.spacer { flex:1; }.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:13px; font-weight:600; }.btn:hover { background:var(--button-hover); }.btn.primary { border-color:var(--primary); background:var(--primary); color:#fff; }.btn.primary:hover { background:var(--primary-dark); }.btn.danger { color:var(--danger); border-color:#e8c8c4; }.btn.sm { padding:4px 10px; font-size:12px; }.field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }.field label { color:var(--text-sub); font-size:12px; font-weight:600; } input[type="text"],input[type="number"],input[type="date"],input[type="email"],select,textarea { padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--field-bg); color:var(--text); font-size:14px; } input:focus,select:focus,textarea:focus { outline:2px solid rgba(46,116,181,.35); border-color:var(--primary); }.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 16px; }.table { width:100%; border-collapse:collapse; background:var(--surface); }.table th { padding:9px 12px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; text-align:left; white-space:nowrap; }.table td { padding:9px 12px; border-bottom:1px solid var(--border); font-size:13px; }.table tbody tr:last-child td { border-bottom:0; }.table tr.clickable:hover td { cursor:pointer; background:var(--primary-light); }.table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:700; }.badge.gray { background:var(--badge-gray-bg); color:var(--badge-gray-text); }.badge.blue { background:var(--primary-light); color:var(--primary-dark); }.badge.green { background:var(--badge-green-bg); color:var(--success); }.badge.red { background:var(--badge-red-bg); color:var(--danger); }.badge.orange { background:var(--badge-orange-bg); color:var(--warning); }.muted { color:var(--text-sub); font-size:12px; }.empty { padding:36px 0; color:var(--text-sub); text-align:center; }.checkbox-label,.reply-filter { display:inline-flex; align-items:center; gap:5px; color:var(--text-sub); font-size:13px; white-space:nowrap; }.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:20px; }.stat-card { display:grid; gap:6px; padding:18px 20px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); color:inherit; text-align:left; }.stat-card:hover { border-color:var(--primary); }.stat-label { color:var(--text-sub); font-size:12px; font-weight:600; }.stat-value { color:var(--primary-dark); font-size:24px; font-weight:800; }.stat-sub { margin-left:6px; color:var(--text-sub); font-size:13px; font-weight:600; }.columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.tabs { display:flex; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.tab { padding:8px 16px; border:0; background:transparent; color:var(--text-sub); font-size:13px; font-weight:600; }.tab.active { background:var(--primary); color:#fff; }.lead-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.lead-column { min-height:280px; padding:14px; border-radius:10px; background:#eaf0f5; }.lead-column h2 { display:flex; justify-content:space-between; margin:0 0 10px; font-size:14px; }.lead-column h2 span { color:var(--text-sub); font-size:12px; font-weight:500; }.lead-card { display:grid; gap:9px; margin-bottom:10px; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }.lead-card p { margin:0; color:var(--text-sub); font-size:12px; }.lead-card footer { display:flex; justify-content:space-between; font-size:12px; font-weight:700; }.lead-card footer span:last-child { color:var(--text-sub); font-weight:500; }.items-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }.items-head h2 { margin:0; font-size:15px; }.product-picker { display:flex; align-items:center; gap:7px; }.product-picker select { max-width:260px; }.items-table input { width:100%; }.item-controls { white-space:nowrap; text-align:right; }.totals { width:300px; margin:16px 0 0 auto; }.totals div { display:flex; justify-content:space-between; margin-top:5px; padding:8px 12px; border-radius:6px; background:var(--primary-light); }.totals .grand { background:var(--primary); color:#fff; font-size:16px; }.date-row { display:grid; grid-template-columns:1fr auto; gap:6px; }.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(28,42,56,.4); }.modal-backdrop.hidden,.action-menu.hidden { display:none; }.modal { width:min(600px,100%); padding:22px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 20px 55px rgba(18,36,54,.22); }.modal h2 { margin:0 0 16px; font-size:18px; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }.action-menu { position:fixed; z-index:30; min-width:185px; padding:4px; border:1px solid var(--border); border-radius:7px; background:var(--surface); box-shadow:0 6px 18px rgba(0,0,0,.14); }.action-menu button { display:block; width:100%; padding:8px 10px; border:0; border-radius:4px; background:transparent; color:var(--text); text-align:left; }.action-menu button:hover { background:var(--button-hover); }.action-menu .danger { color:var(--danger); }.action-menu hr { height:1px; margin:4px 0; border:0; background:var(--border); } #toast { position:fixed; right:24px; bottom:24px; z-index:40; padding:11px 14px; border-radius:7px; background:#26394c; color:#fff; opacity:0; transform:translateY(8px); transition:.18s; pointer-events:none; } #toast.show { opacity:1; transform:translateY(0); }
.kanban-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; overflow-x:auto; padding-bottom:4px; }.kanban-lane { min-height:380px; min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-muted); }.kanban-lane header { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }.kanban-lane h2 { margin:0; font-size:14px; }.lead-label { color:var(--primary-dark); font-size:11px; font-weight:700; }.lead-card > div { display:flex; justify-content:flex-end; gap:5px; }
@media (max-width:900px) { .sidebar { width:64px; }.brand { min-height:84px; padding:21px 6px; }.brand-name,.brand-sub,.sidebar-footer { display:none; }.nav-item { justify-content:center; padding:12px; font-size:0; }.nav-icon { font-size:18px; }.page { padding:22px; }.columns,.lead-columns { grid-template-columns:1fr; }.lead-column { min-height:auto; }.kanban-board { grid-template-columns:repeat(4,260px); } }
@media (max-width:620px) { .sidebar { display:none; }.page { padding:18px 14px; }.toolbar { align-items:stretch; }.toolbar .spacer { display:none; }.toolbar input,.toolbar select { flex:1; min-width:0; }.tabs { width:100%; overflow:auto; }.tab { padding:8px 12px; white-space:nowrap; }.product-picker { align-items:stretch; flex-wrap:wrap; }.product-picker select { width:100%; max-width:none; }.items-table { min-width:760px; }.card { overflow:auto; }.totals { width:100%; } }