:root{
  color-scheme: dark;
  --bg:#0b0f14; --panel:#121821; --panel2:#0f141b; --line:#1e2832;
  --txt:#e8edf2; --muted:#8395a5; --muted2:#5b6b7a;
  --green:#34d399; --red:#f87171; --amber:#fbbf24; --blue:#60a5fa;
}
*{ box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); color:var(--txt); }
body{
  font-family:-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:15px; line-height:1.6; min-height:100dvh;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.hidden{ display:none !important; }
.muted{ color:var(--muted); font-weight:400; }
.accent{ color:var(--green); }
.boot{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); }

/* ---- card ---- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; }
.card-title{ font-size:14px; color:var(--muted); margin-bottom:12px; font-weight:600; }

/* ---- login ---- */
.login-wrap{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:6px; }
.brand{ font-size:13px; letter-spacing:.35em; color:var(--muted2); }
.login-wrap h1{ font-size:30px; margin-bottom:20px; }
.login-card{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
input,select{
  background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:13px 14px; font-size:16px; width:100%;
}
input:focus,select:focus{ outline:none; border-color:var(--green); }
.btn-primary{
  background:var(--green); color:#06281d; border:none; border-radius:10px;
  padding:14px; font-size:16px; font-weight:700; cursor:pointer; margin-top:4px;
}
.btn-primary:active{ opacity:.85; }
.btn-ghost{
  background:transparent; color:var(--green); border:1px solid var(--line);
  border-radius:10px; padding:11px; font-size:14px; font-weight:600; cursor:pointer; width:100%; margin-top:14px;
}
.err{ color:var(--red); font-size:13px; text-align:center; }

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:5; background:rgba(11,15,20,.85); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.biz-switch{ width:auto; max-width:62%; font-size:15px; font-weight:700; padding:9px 12px; }
.ws-biz{ font-size:12px; font-weight:700; color:#b45309; background:#fef3c7; border-radius:999px; padding:4px 10px; white-space:nowrap; }
.topbar-right{ display:flex; gap:8px; align-items:center; }
.period{ width:auto; padding:9px 10px; font-size:14px; }
.icon-btn{ background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:10px; width:42px; height:42px; font-size:17px; cursor:pointer; }
/* 司令塔ナビ: 一目でわかる大きめラベル付きボタン */
.nav-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:11px 16px; font-weight:800; cursor:pointer; white-space:nowrap; }
.nav-btn .nb-ic{ font-size:20px; line-height:1; }
.nav-btn .nb-tx{ font-size:15px; }
.nav-btn:hover{ border-color:#1f6feb; color:#fff; background:#16202b; }
.nav-btn:active{ transform:translateY(1px); }
@media (max-width:480px){ .nav-btn{ padding:10px 12px; } .nav-btn .nb-tx{ font-size:13px; } }

/* ---- content ---- */
.content{ padding:16px; display:flex; flex-direction:column; gap:14px; max-width:560px; margin:0 auto; }

/* ---- PL hero ---- */
.pl-hero{ background:linear-gradient(160deg,#13202a,#0f141b); }
.pl-head{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ym-nav{ background:var(--panel2); border:1px solid var(--line); color:var(--muted); width:30px; height:30px; border-radius:8px; font-size:16px; line-height:1; cursor:pointer; }
.ym-nav:active{ opacity:.7; }
.pl-profit{ font-size:38px; font-weight:800; letter-spacing:-.02em; margin:4px 0 14px; }
.pl-profit.pos{ color:var(--green); } .pl-profit.neg{ color:var(--red); }
.pl-sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pl-sub > div{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px; }
.pl-sub .lbl{ display:block; font-size:11px; color:var(--muted2); }
.pl-sub .val{ display:block; font-size:16px; font-weight:700; margin-top:2px; }

/* ---- KPI ---- */
.kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }
.kpi .k-label{ font-size:12px; color:var(--muted); }
.kpi .k-val{ font-size:26px; font-weight:800; margin-top:4px; letter-spacing:-.01em; }
.kpi .k-unit{ font-size:13px; color:var(--muted2); font-weight:600; margin-left:3px; }
.kpi.hl .k-val{ color:var(--green); }

/* ---- trend ---- */
.trend{ display:flex; align-items:flex-end; gap:4px; height:120px; }
.trend .bar{ flex:1; background:var(--line); border-radius:4px 4px 0 0; min-height:3px; position:relative; transition:height .3s; }
.trend .bar.has{ background:linear-gradient(180deg,var(--green),#1c7a59); }
.trend-empty{ color:var(--muted2); font-size:13px; padding:30px 0; text-align:center; width:100%; }

.updated{ text-align:center; color:var(--muted2); font-size:12px; padding:4px 0 20px; }

/* ---- 予算ビュー ---- */
/* ステータス3色(dataviz検証済: CVD ΔE38+/コントラスト3:1+): 実績=#0da271 見込=#d97706 予算=#3b82f6 */
#budget-view{ display:flex; flex-direction:column; gap:14px; }
.bud-hero{ background:linear-gradient(160deg,#101c2b,#0f141b); }
.bud-badge{ font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; margin-left:6px; vertical-align:1px; }
.bud-badge.act{ background:rgba(13,162,113,.18); color:#34d399; }
.bud-badge.fct{ background:rgba(217,119,6,.18); color:#fbbf24; }
.bud-badge.bud{ background:rgba(59,130,246,.18); color:#60a5fa; }
.bud-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bud-tile{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:2px; }
.bud-tile .lbl{ font-size:11px; color:var(--muted2); }
.bud-tile .val{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.bud-tile .val.neg, .neg{ color:var(--red); }
.bud-mgn{ color:var(--muted); font-weight:600; }
.bud-yoy{ font-size:11px; font-weight:700; }
.bud-yoy.up{ color:var(--green); } .bud-yoy.down{ color:var(--red); }
.bud-prog-wrap{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.bud-prog-head{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.bud-prog{ position:relative; height:10px; background:var(--panel2); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.bud-prog-fill{ height:100%; background:linear-gradient(90deg,#0da271,#34d399); border-radius:999px; }
.bud-prog-pace{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--amber); opacity:.9; }
.bud-legend{ float:right; font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
.bud-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:3px; vertical-align:-1px; }
.bud-legend i.act{ background:#0da271; }
.bud-legend i.fct{ background:#d97706; }
.bud-legend i.bud{ background:rgba(59,130,246,.35); border:1px solid #3b82f6; }
.bud-chart{ display:flex; align-items:flex-end; gap:2px; height:90px; }
.bud-chart.op{ height:52px; }
.bud-chart-lbl{ font-size:11px; color:var(--muted2); margin:8px 0 4px; }
.bud-bar{ flex:1; min-height:3px; border-radius:3px 3px 0 0; }
.bud-bar.act{ background:#0da271; }
.bud-bar.fct{ background:#d97706; }
.bud-bar.bud{ background:rgba(59,130,246,.35); border:1px solid #3b82f6; border-bottom:none; }
.bud-bar.pos{ background:#0da271; }
.bud-bar.neg{ background:var(--red); opacity:.8; }
.bud-bar.cur{ outline:2px solid var(--txt); outline-offset:1px; }
.bud-ticks{ display:flex; gap:2px; margin-top:3px; }
.bud-ticks span{ flex:1; font-size:9px; color:var(--muted2); text-align:center; }
.bud-kpis .kpi.sm{ padding:11px 12px; }
.bud-kpis .kpi.sm .k-val{ font-size:19px; }
.bud-empty{ color:var(--muted2); font-size:13px; text-align:center; padding:14px; }
/* 社長ブリーフ */
.bud-brief-card{ background:linear-gradient(160deg,#182234,#0f141b); border-color:#2a3a52; }
.bud-brief-line{ font-size:14px; line-height:1.75; padding:4px 0; border-bottom:1px dashed var(--line); }
.bud-brief-line:last-child{ border-bottom:none; }
.bud-brief-line b{ font-weight:800; }
/* デイリー実績カード */
.bud-daily-card{ background:linear-gradient(160deg,#241318,#0f141b); border-color:#4a2530; }
.bud-dtiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.bud-dtile{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.bud-dtile .dtl{ font-size:11px; color:var(--muted2); }
.bud-dtile .dtv{ font-size:15px; margin-top:2px; } .bud-dtile .dtv b{ font-size:20px; font-weight:800; }
.bud-dtile .dts{ font-size:11px; color:var(--muted); margin-top:2px; }
.bud-dspark-lbl{ font-size:11px; color:var(--muted2); margin:6px 0 4px; }
.bud-dspark{ display:flex; align-items:flex-end; gap:3px; height:44px; margin-bottom:12px; }
.bud-dbar{ flex:1; background:linear-gradient(180deg,#f87171,#b4243055); border-radius:3px 3px 0 0; min-height:4px; }
.bud-dmtd{ font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin-bottom:6px; }
.bud-drow{ display:grid; grid-template-columns:64px 1fr auto auto; align-items:baseline; gap:8px; padding:5px 0; }
.bud-drow .dl{ font-size:12px; color:var(--muted); }
.bud-drow .dv{ font-size:17px; font-weight:800; }
.bud-drow .dp{ font-size:11px; color:var(--muted2); text-align:right; }
.bud-drow .dg{ font-size:11px; min-width:48px; text-align:right; }
/* サブタブ */
.bud-tabs{ position:sticky; top:64px; z-index:4; }
.bud-body{ display:flex; flex-direction:column; gap:14px; }
/* 売上構成 */
.bud-mixbar{ display:flex; gap:2px; height:22px; border-radius:6px; overflow:hidden; margin-bottom:10px; }
.bud-seg{ height:100%; border-radius:3px; }
.bud-seg.m1{ background:#0da271; }
.bud-seg.m2{ background:#3b82f6; }
.bud-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.bud-dot.m1{ background:#0da271; } .bud-dot.m2{ background:#3b82f6; }
.bud-mixlbl{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.bud-formula{ margin-top:12px; padding:10px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--muted); }
.bud-formula b{ color:var(--txt); font-size:15px; }
/* ファネル */
.bud-fnode{ display:flex; align-items:baseline; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.bud-fnode .fl{ font-size:13px; color:var(--muted); flex:1; }
.bud-fnode .fv{ font-size:19px; font-weight:800; }
.bud-fnode .fp{ font-size:11px; color:var(--muted2); }
.bud-frate{ font-size:12px; color:var(--muted); padding:5px 0 5px 18px; }
/* 横棒(構成比) */
.bud-hrow{ display:grid; grid-template-columns:92px 1fr 64px 52px; align-items:center; gap:8px; padding:5px 0; }
.bud-hrow .hl{ font-size:12px; color:var(--muted); }
.bud-hrow .hbar{ height:14px; background:var(--panel2); border-radius:4px; overflow:hidden; }
.bud-hrow .hfill{ height:100%; background:#3b82f6; opacity:.75; border-radius:4px; min-width:2px; }
.bud-hrow .hv{ font-size:13px; font-weight:700; text-align:right; }
.bud-hrow .hp{ font-size:11px; color:var(--muted2); text-align:right; }
.bud-note{ margin-top:10px; font-size:12px; color:var(--muted2); line-height:1.6; }
/* テーブル */
.bud-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; }
.bud-table{ border-collapse:collapse; font-size:12px; white-space:nowrap; min-width:100%; }
.bud-table th,.bud-table td{ padding:6px 9px; text-align:right; border-bottom:1px solid var(--line); }
.bud-table th:first-child,.bud-table td:first-child{ text-align:left; color:var(--muted); position:sticky; left:0; background:var(--panel); }
.bud-table th{ color:var(--muted2); font-weight:600; }
.bud-table th .st{ font-size:10px; font-weight:700; }
.bud-table th .st.act{ color:#34d399; } .bud-table th .st.fct{ color:#fbbf24; } .bud-table th .st.bud{ color:#60a5fa; }
.bud-table .cur{ background:rgba(59,130,246,.10); }
.bud-table td.neg{ color:var(--red); }
.bud-table.fy td,.bud-table.fy th{ padding:7px 12px; font-size:13px; }

/* ---- modal ---- */
.modal{ position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; }
.modal-card{ background:var(--panel); width:100%; max-height:88dvh; overflow:auto; border-radius:20px 20px 0 0; border-top:1px solid var(--line); padding:18px 16px calc(20px + env(safe-area-inset-bottom)); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:700; margin-bottom:14px; }
.pl-form{ display:flex; flex-direction:column; gap:12px; }
.seg{ display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button{ flex:1; background:transparent; border:none; color:var(--muted); padding:10px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; }
.seg button.seg-on{ background:var(--green); color:#06281d; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pl-list{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.pl-item{ display:flex; align-items:center; justify-content:space-between; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.pl-item .pi-main{ font-size:14px; }
.pl-item .pi-cat{ font-size:12px; color:var(--muted); }
.pl-item .pi-amt{ font-weight:700; font-size:15px; }
.pl-item .pi-amt.rev{ color:var(--green); } .pl-item .pi-amt.cost{ color:var(--red); }
.pl-item .pi-del{ background:none; border:none; color:var(--muted2); font-size:18px; cursor:pointer; padding:0 4px; margin-left:8px; }
.pl-empty{ color:var(--muted2); font-size:13px; text-align:center; padding:14px; }