*{box-sizing:border-box}
:root{
 --blue:#0758c8;
 --blue2:#0a70df;
 --navy:#082e67;
 --bg:#f5f8fc;
 --card:#fff;
 --border:#dbe5f0;
 --text:#102d54;
 --muted:#687b95;
}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",sans-serif;background:var(--bg);color:var(--text)}
a{color:#086bd8}

.app-topbar{
 height:64px;
 background:linear-gradient(90deg,#0e4dad,#0878df);
 color:#fff;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 24px;
 position:sticky;
 top:0;
 z-index:50
}
.app-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.brand-bp{
 font-size:0;
 line-height:1;
 display:inline-flex;
 align-items:center;
}

.brand-bp::before{
 content:"icom";
 display:inline-block;
 font-family:"Brush Script MT","Segoe Script","URW Chancery L","Apple Chancery",cursive;
 font-size:31px;
 line-height:1;
 font-weight:700;
 font-style:italic;
 letter-spacing:-2px;
 color:#fff;
 transform:skewX(-7deg);
 transform-origin:center;
 text-shadow:0 1px 1px rgba(0,0,0,.10);
}

.brand-name{
 font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",sans-serif;
 font-size:13px;
 line-height:1;
 font-weight:600;
 letter-spacing:.09em;
 color:rgba(255,255,255,.95);
 position:relative;
 top:1px;
}
.topbar-user{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.topbar-user a{color:#fff}
.top-sep{opacity:.65}

.app-shell{display:flex;min-height:calc(100vh - 64px)}
.app-sidebar{
 width:246px;
 flex:0 0 246px;
 background:#fff;
 border-right:1px solid #dce5ef;
 padding:17px 10px 24px;
}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
 min-height:44px;
 display:flex;
 align-items:center;
 gap:11px;
 padding:10px 13px;
 border-radius:9px;
 color:#17365d;
 text-decoration:none;
 font-weight:750;
 font-size:14px;
 white-space:nowrap
}
.side-nav a:hover{background:#eef5ff;color:#0969d4}
.side-nav a.active{background:#e9f3ff;color:#0768d3}
.nav-icon{
 width:22px;
 text-align:center;
 color:#17365d;
 font-size:17px;
 font-weight:800;
 flex:0 0 22px;
}
.side-nav a.active .nav-icon{color:#0768d3}

.app-main{
 flex:1;
 min-width:0;
 padding:30px 30px 44px;
 background:var(--bg)
}
.dashboard-page{width:100%;max-width:1500px;margin:0 auto}
.page-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.page-title-row h1{margin:0;color:#0a2c5d;font-size:30px;line-height:1.2}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi-card{
 min-height:108px;
 background:#fff;
 border:1px solid var(--border);
 border-radius:13px;
 box-shadow:0 3px 12px rgba(30,61,105,.06);
 padding:18px 22px;
 display:flex;
 align-items:center;
 gap:18px
}
.kpi-icon{width:57px;height:57px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;flex:0 0 57px}
.kpi-icon.blue{background:#dcecff;color:#0c6bd8}
.kpi-icon.green{background:#d9f6e8;color:#09a55e}
.kpi-icon.purple{background:#e9defe;color:#7651d5}
.kpi-icon.orange{background:#ffead7;color:#f07821}
.kpi-label{font-size:14px;color:#415977;font-weight:750;margin-bottom:4px}
.kpi-value{font-size:29px;font-weight:900;letter-spacing:-.5px;color:#082e70}
.kpi-value.alert-value{color:#df3e36}

.section-title{font-size:22px;color:#092e5f;margin:26px 0 13px}
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.channel-card{
 min-height:114px;background:#fff;border:1px solid var(--border);border-radius:13px;
 box-shadow:0 3px 12px rgba(30,61,105,.06);
 display:flex;align-items:center;gap:17px;padding:19px 22px
}
.channel-logo{width:43px;height:43px;border-radius:11px;display:grid;place-items:center;font-weight:900;flex:0 0 43px}
.channel-logo.tiktok{background:#111;color:#fff;font-size:23px}
.channel-logo.line{background:#11c638;color:#fff;font-size:10px}
.channel-logo.base{background:#f3f5f7;color:#b66b35;font-size:18px}
.channel-name{font-size:14px;color:#405774;font-weight:700}
.channel-sales{font-size:25px;color:#083277;font-weight:900;margin-top:2px}
.channel-count{font-size:14px;color:#5d7089;margin-top:2px}

.dashboard-table-card{
 background:#fff;border:1px solid var(--border);border-radius:13px;
 box-shadow:0 3px 12px rgba(30,61,105,.06);overflow:hidden
}
.table-scroll{width:100%;overflow-x:auto}
.dashboard-table{width:100%;border-collapse:collapse;table-layout:auto}
.dashboard-table th{
 background:#f4f7fb;color:#3d5573;font-size:12px;font-weight:800;
 padding:13px 16px;text-align:left;border-bottom:1px solid #dfe7f1;white-space:nowrap
}
.dashboard-table td{
 padding:13px 16px;border-bottom:1px solid #e7edf4;color:#172f51;font-size:13px;white-space:nowrap
}
.dashboard-table tbody tr:last-child td{border-bottom:0}
.channel-pill,.status-pill{display:inline-block;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}
.channel-pill.base{background:#e1efff;color:#086ddd}
.channel-pill.atouch{background:#dcf7e8;color:#109252}
.channel-pill.tiktok{background:#efe8ff;color:#6742b8}
.channel-pill.direct{background:#eef1f5;color:#536274}
.status-pill{background:#dff8e8;color:#159656}
.table-footer-link{border-top:1px solid #e5ebf2;padding:13px 17px;text-align:right}
.table-footer-link a{text-decoration:none;font-weight:800;color:#0869d5}

/* Shared page components */
h1{color:#0a2c5d}
h2,h3{color:#103665}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:18px;box-shadow:0 3px 12px rgba(30,61,105,.05)}
.label{font-size:12px;color:var(--muted);font-weight:750}
.metric{font-size:28px;font-weight:900;color:#0a347b;margin-top:5px}
.metric.sm{font-size:21px}
.muted{color:var(--muted)}
.badge,.pill{display:inline-block;border-radius:999px;padding:5px 9px;background:#e9f3ff;color:#0865c8;font-size:12px;font-weight:800}
.btn,button,input[type=submit],input[type=button]{
 display:inline-block;border:0;border-radius:8px;background:#1269ce;color:#fff;
 padding:9px 14px;text-decoration:none;font-weight:800;cursor:pointer
}
.btn.light,.light{background:#edf4ff;color:#15549f}
.form{background:#fff;border:1px solid var(--border);border-radius:13px;padding:20px;max-width:980px}
.field{margin-bottom:14px}.field label{display:block;font-weight:750;margin-bottom:6px}
.field input,.field select,.field textarea,.filters input,.filters select{
 width:100%;padding:10px 11px;border:1px solid #cbd8e8;border-radius:8px;background:#fff
}
.field textarea{min-height:90px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters input,.filters select{width:auto;min-width:180px}
.table{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:auto}
table{width:100%;border-collapse:collapse}
.table th,.table td{padding:11px 12px;border-bottom:1px solid #edf1f6;text-align:left;white-space:nowrap;font-size:13px}
.table th{background:#f4f7fb;color:#445c79;font-size:12px}
.alert{padding:12px 14px;border:1px solid #bfe3c9;background:#eaf8ee;border-radius:8px;margin-bottom:14px}
.alert.warn{border-color:#f0c36d;background:#fff6e5;color:#8a5a00}
.warn{background:#fff6df;border-color:#f0d28f}
.low{color:#c87900;font-weight:800}.ok{color:#17843b;font-weight:800}
.login{min-height:100vh;display:grid;place-items:center;background:#eef4ff}.loginbox{width:min(420px,92vw);background:#fff;padding:28px;border-radius:14px;border:1px solid #dce5f1}

@media(max-width:1150px){
 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .channel-grid{grid-template-columns:1fr}
}
@media(max-width:850px){
 .app-sidebar{display:none}
 .app-main{padding:20px 14px 34px}
 .kpi-grid,.grid,.grid2,.grid3,.row{grid-template-columns:1fr}
 .page-title-row h1{font-size:25px}
}


.channel-logo.brand-img{
 width:48px;
 height:48px;
 border-radius:12px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 background:#fff;
 flex:0 0 48px;
 border:1px solid #edf1f5;
}

.channel-logo.brand-img img{
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
}

.channel-logo.brand-img img[alt="TikTok Shop"]{
 padding:5px;
 background:#000;
}

.channel-logo.brand-img img[alt="Atouch LINE"]{
 padding:0;
 background:#06c755;
}

.channel-logo.brand-img img[alt="BASE"]{
 padding:0;
 background:#1fb9b8;
}


/* =========================================================
   V2.6.2d CHANNEL BRAND ICON FIX
   元画像サイズに関係なく必ずカード内42pxに固定
   ========================================================= */

.channel-card{
 overflow:hidden !important;
}

.channel-logo.brand-img{
 width:48px !important;
 height:48px !important;
 min-width:48px !important;
 max-width:48px !important;
 min-height:48px !important;
 max-height:48px !important;
 flex:0 0 48px !important;
 padding:0 !important;
 margin:0 !important;
 overflow:hidden !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 border-radius:11px !important;
 background:#fff !important;
}

.channel-logo.brand-img > img.channel-brand-icon{
 display:block !important;
 width:42px !important;
 height:42px !important;
 min-width:42px !important;
 max-width:42px !important;
 min-height:42px !important;
 max-height:42px !important;
 object-fit:contain !important;
 object-position:center !important;
 margin:0 !important;
 padding:0 !important;
 position:static !important;
 transform:none !important;
 float:none !important;
}

/* TikTokは黒背景込みで見やすく */
.channel-logo.brand-img > img[alt="TikTok Shop"]{
 background:#000 !important;
 border-radius:9px !important;
 padding:4px !important;
}

/* LINEは正方形の公式アイコンをそのまま */
.channel-logo.brand-img > img[alt="Atouch LINE"]{
 background:transparent !important;
 border-radius:9px !important;
}

/* BASEも元画像を切らずに中央表示 */
.channel-logo.brand-img > img[alt="BASE"]{
 background:transparent !important;
 border-radius:9px !important;
}

/* 念のためダッシュボード内の巨大画像化を完全防止 */
.dashboard-page img{
 max-width:100% !important;
 height:auto;
}

.dashboard-page .channel-logo img{
 width:42px !important;
 height:42px !important;
 max-width:42px !important;
 max-height:42px !important;
}