:root{color-scheme:light;font-family:BIZ UDPGothic,Hiragino Sans,Yu Gothic,Meiryo,sans-serif;background:#eef2f7;color:#172033;--bg: #eef2f7;--panel: #ffffff;--panel-soft: #f8fafc;--line: #dfe7f1;--text: #172033;--muted: #69758a;--blue: #2563eb;--blue-dark: #1645a3;--cyan: #0891b2;--green: #16a34a;--amber: #d97706;--orange: #c2410c;--violet: #7c3aed;--shadow: 0 16px 40px rgba(15, 23, 42, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#ffffffdb,#fff0 260px),var(--bg)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:276px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;background:#0f172a;color:#dbeafe;display:flex;flex-direction:column;gap:22px;z-index:20}.brand-block{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:4px 4px 12px}.brand-mark{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4)}.brand-kicker,.brand-block h1,.page-title p,.page-title h2,.panel-header h3,.panel-header span{margin:0}.brand-kicker{color:#93c5fd;font-size:12px;line-height:1.4}.brand-block h1{color:#fff;font-size:18px;line-height:1.35}.nav-list{display:grid;gap:5px}.nav-item{height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#b9c7db;display:flex;align-items:center;gap:10px;text-align:left}.nav-item:hover,.nav-item.active{background:#2563eb2e;color:#fff}.sidebar-card{margin-top:auto;padding:16px;border:1px solid rgba(148,163,184,.26);border-radius:8px;background:#0f172ab3}.mini-label{color:#93c5fd;font-size:12px}.sidebar-card strong{display:block;margin-top:6px;color:#fff;font-size:30px}.sidebar-card p{margin:8px 0 0;color:#b9c7db;font-size:12px;line-height:1.55}.progress-track{height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#94a3b840}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#22c55e)}.main-area{min-width:0}.topbar{position:sticky;top:0;z-index:10;min-height:84px;padding:16px 28px;border-bottom:1px solid rgba(203,213,225,.82);background:#f8fafceb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;align-items:center;gap:18px}.page-title{min-width:220px;display:flex;align-items:center;gap:12px}.page-title p{color:var(--muted);font-size:12px}.page-title h2{font-size:22px;line-height:1.25}.status-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;color:#1d4ed8;background:#dbeafe;font-size:12px;font-weight:700;white-space:nowrap}.status-pill.live{color:#166534;background:#dcfce7}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.search-box,.tool-button,.icon-button{height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px #0f172a05}.search-box{width:min(34vw,360px);padding:0 12px}.search-box input{width:100%;min-width:0;border:0;outline:0;color:var(--text);background:transparent}.search-box input::placeholder{color:#94a3b8}.tool-button{padding:0 12px;white-space:nowrap}.tool-button.compact{min-width:82px;justify-content:center}.icon-button{width:42px;justify-content:center;padding:0}.menu-button{display:none}.filter-band{padding:18px 28px 0;display:flex;align-items:center;gap:12px}.store-tabs{min-width:0;flex:1;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.store-tab{height:36px;flex:0 0 auto;padding:0 14px;border:1px solid #dce5f1;border-radius:999px;background:#fff;color:#334155;font-weight:700}.store-tab.selected{border-color:var(--blue);color:#fff;background:var(--blue)}.store-tab.warning:not(.selected){border-color:#fed7aa}.store-tab.pending:not(.selected){border-color:#fde68a}.content-grid{padding:18px 28px 36px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.data-source-banner{grid-column:1 / -1;min-height:82px;padding:16px 18px;border:1px solid #bfdbfe;border-radius:8px;background:linear-gradient(90deg,#2563eb1a,#0ea5e90a),#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:14px}.data-source-banner span{color:#1d4ed8;font-size:12px;font-weight:800;letter-spacing:.04em}.data-source-banner strong{display:block;margin-top:4px;font-size:16px;line-height:1.35}.data-source-banner p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.data-source-banner svg{flex:0 0 auto;color:var(--blue)}.kpi-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kpi-card,.panel{border:1px solid rgba(203,213,225,.88);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.kpi-card{min-height:128px;padding:18px;display:grid;grid-template-columns:42px 1fr;gap:14px}.kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;background:#eff6ff;color:var(--blue)}.kpi-card.green .kpi-icon{background:#dcfce7;color:var(--green)}.kpi-card.amber .kpi-icon{background:#fef3c7;color:var(--amber)}.kpi-card.violet .kpi-icon{background:#ede9fe;color:var(--violet)}.kpi-card span,.panel-header span{color:var(--muted);font-size:12px;font-weight:700}.kpi-card strong{display:block;margin-top:7px;color:var(--text);font-size:28px;line-height:1.1}.kpi-card p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.kpi-card b{color:var(--green)}.panel{min-width:0;padding:18px}.trend-panel{grid-column:span 8}.side-panel{grid-column:span 4}.store-panel{grid-column:span 8}.menu-panel{grid-column:span 4}.data-panel{grid-column:span 7}.architecture-panel{grid-column:span 5}.panel-header{min-height:36px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-header h3{margin-top:4px;font-size:17px;line-height:1.35}.micro-button{min-height:30px;border:1px solid #bfdbfe;border-radius:7px;padding:0 10px;color:#1d4ed8;background:#eff6ff;font-size:12px;font-weight:800;white-space:nowrap}.chart-box{width:100%;min-width:0}.chart-box.tall{height:318px}.chart-box.medium{height:220px}.chart-tooltip{min-width:138px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 12px 28px #0f172a1f}.chart-tooltip strong{display:block;margin-bottom:6px;font-size:13px}.chart-tooltip p{margin:5px 0;color:var(--muted);font-size:12px}.chart-tooltip span{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:999px}.alert-list{display:grid;gap:10px}.alert-row{min-height:88px;padding:12px;border:1px solid #fde68a;border-radius:8px;background:#fffbeb;display:grid;grid-template-columns:34px 1fr;gap:10px}.alert-icon{width:34px;height:34px;border-radius:8px;background:#fef3c7;color:var(--amber);display:grid;place-items:center}.alert-row span{color:var(--amber);font-size:11px;font-weight:800}.alert-row strong{display:block;margin-top:3px;font-size:13px;line-height:1.45}.alert-row p{margin:5px 0 0;color:#775113;font-size:12px;line-height:1.55}.store-table{display:grid;gap:9px}.store-row{min-height:58px;padding:10px 12px;border:1px solid #e6edf5;border-radius:8px;background:var(--panel-soft);display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(110px,1fr) 54px 64px 56px minmax(82px,.8fr);align-items:center;gap:12px}.store-name{min-width:0;display:flex;align-items:center;gap:9px}.store-name strong{display:block;font-size:13px}.store-name p{margin:4px 0 0;color:var(--muted);font-size:12px;white-space:nowrap}.dot{width:10px;height:10px;flex:0 0 auto;border-radius:999px;background:var(--green)}.dot.warning,.dot.pending{background:var(--amber)}.bar-meter{height:9px;overflow:hidden;border-radius:999px;background:#e2e8f0}.bar-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#06b6d4)}.metric{color:#334155;font-size:12px;font-weight:800;text-align:right}.store-row em{justify-self:end;min-height:26px;padding:5px 8px;border-radius:999px;color:#166534;background:#dcfce7;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap}.store-row em.warning,.store-row em.pending{color:#92400e;background:#fef3c7}.menu-summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}.menu-summary span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid #e2e8f0;border-radius:999px;color:#475569;font-size:11px;font-weight:700}.menu-summary i{width:8px;height:8px;border-radius:999px}.pipeline-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pipeline-card{min-height:112px;padding:12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;display:grid;align-content:space-between;gap:10px}.pipeline-card svg{color:var(--blue)}.pipeline-card strong{display:block;font-size:13px;line-height:1.35}.pipeline-card p{margin:4px 0 0;color:var(--muted);font-size:12px}.pipeline-card span{justify-self:start;padding:4px 8px;border-radius:999px;color:#1d4ed8;background:#dbeafe;font-size:11px;font-weight:800}.sync-table{margin-top:14px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.sync-row{min-height:42px;display:grid;grid-template-columns:1.2fr 1fr 76px 80px 70px;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e2e8f0;font-size:12px}.sync-row:last-child{border-bottom:0}.sync-row span{color:var(--muted)}.sync-row strong{font-size:12px}.sync-row em{justify-self:start;padding:4px 8px;border-radius:999px;font-size:11px;font-style:normal;font-weight:800}.sync-row em.ok{color:#166534;background:#dcfce7}.sync-row em.warn{color:#92400e;background:#fef3c7}.sync-row em.draft{color:#475569;background:#e2e8f0}.architecture-lanes{display:grid;gap:10px}.lane{min-height:94px;padding:14px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:start}.lane svg{color:var(--blue)}.lane strong{display:block;font-size:14px}.lane p{grid-column:2;margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.lane.primary{border-color:#bfdbfe;background:#eff6ff}.lane.recommended{border-color:#bae6fd;background:#f0f9ff}.sidebar-backdrop{display:none}@media(max-width:1180px){.app-shell{grid-template-columns:240px minmax(0,1fr)}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trend-panel,.side-panel,.store-panel,.menu-panel,.data-panel,.architecture-panel{grid-column:1 / -1}.pipeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:880px){.app-shell{display:block}.sidebar{position:fixed;left:0;transform:translate(-105%);width:min(84vw,300px);transition:transform .18s ease}.sidebar.sidebar-open{transform:translate(0)}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:#0f172a5c;z-index:15}.menu-button{display:inline-flex}.topbar{min-height:auto;padding:12px 16px;align-items:flex-start;flex-wrap:wrap}.page-title{min-width:0;flex:1}.topbar-actions{width:100%;margin-left:0;display:grid;grid-template-columns:1fr auto auto}.search-box{width:100%}.filter-band,.content-grid{padding-left:16px;padding-right:16px}.store-row{grid-template-columns:1fr 66px;gap:8px}.store-row .bar-meter,.store-row .metric:nth-of-type(2),.store-row .metric:nth-of-type(3){display:none}.store-row em{justify-self:end}}@media(max-width:620px){.page-title h2{font-size:18px}.status-pill{display:none}.topbar-actions{grid-template-columns:1fr 42px}.topbar-actions .tool-button{grid-column:1 / -1;order:3;justify-content:space-between}.kpi-grid,.pipeline-grid{grid-template-columns:1fr}.data-source-banner{align-items:flex-start}.kpi-card{min-height:112px}.chart-box.tall{height:260px}.sync-row{grid-template-columns:1fr 76px;min-height:58px}.sync-row span:nth-last-child(-n+2),.sync-row strong{display:none}}