* { box-sizing: border-box; margin: 0; }
body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 13px;
       color: #333; background: #f5f7fa; }
a { color: inherit; text-decoration: none; }

.topbar { display: flex; align-items: center; justify-content: space-between;
          background: #fff; border-bottom: 1px solid #e3e8ee; padding: 10px 20px;
          position: sticky; top: 0; z-index: 10; }
.logo { font-size: 18px; font-weight: 700; color: #f07300; }
.logo span { color: #333; font-weight: 400; }
.month-nav { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.month-nav a { color: #f07300; font-size: 18px; padding: 0 6px; }

.layout { display: flex; min-height: calc(100vh - 45px); }

.sidebar { width: 230px; flex-shrink: 0; background: #fff; border-right: 1px solid #e3e8ee;
           padding: 8px 0; overflow-y: auto; }
.sidebar .adv { display: block; padding: 9px 14px; border-bottom: 1px solid #f0f3f6;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .adv:hover { background: #fff7ef; }
.sidebar .adv.active { background: #ffeedd; border-left: 3px solid #f07300;
                       padding-left: 11px; font-weight: 600; }
.adv-add { display: flex; gap: 4px; padding: 10px 12px; }
.adv-add input { flex: 1; padding: 6px 8px; border: 1px solid #cfd8e0; border-radius: 4px; }
.adv-add button { border: none; background: #f07300; color: #fff; border-radius: 4px;
                  width: 30px; cursor: pointer; }

.main { flex: 1; padding: 18px 24px; min-width: 0; }
.empty { color: #889; padding: 40px; text-align: center; }

.page-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
h1 { font-size: 20px; }

.memo { background: #fdf6df; border: 1px solid #ecdb9c; border-radius: 4px;
        padding: 10px 14px; margin-bottom: 14px; white-space: pre-wrap; }

.settings summary { cursor: pointer; color: #f07300; font-weight: 600; }
.settings form { background: #fff; border: 1px solid #e3e8ee; border-radius: 6px;
                 padding: 14px; margin-top: 8px; display: grid; gap: 10px; max-width: 640px; }
.settings label { display: grid; gap: 4px; font-weight: 600; font-size: 12px; }
.settings input, .settings textarea, .settings select {
  padding: 7px 9px; border: 1px solid #cfd8e0; border-radius: 4px;
  font: inherit; font-weight: 400; }
.budget-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.account-add { display: flex; gap: 8px; }
.account-add input { flex: 1; }
button.primary { border: none; background: #f07300; color: #fff; border-radius: 4px;
                 padding: 9px; font-weight: 700; cursor: pointer; justify-self: start;
                 min-width: 120px; }

.scroll-x { overflow-x: auto; margin-bottom: 18px; }
table { border-collapse: collapse; background: #fff; width: 100%; }
th, td { border: 1px solid #e3e8ee; padding: 7px 10px; text-align: left; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bold { font-weight: 700; }
.muted { color: #aab; }

.summary .info-col { min-width: 150px; background: #fafbfc; vertical-align: top; }
.summary .period div { margin-bottom: 8px; font-weight: 400; }
.summary .period span { display: block; font-weight: 700; color: #667; font-size: 11px; }
.summary .row-label { background: #fafbfc; font-weight: 600; white-space: nowrap; }
.summary .media-head th { background: #fff; }
.summary td, .summary th { min-width: 130px; }
.acct-id { color: #99a; font-size: 11px; text-align: left; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px;
        font-weight: 700; background: #eef; color: #36c; }
.chip.google { background: #e7f0fe; color: #1a67d2; }
.chip.yahoo { background: #feeaea; color: #d32323; }
.chip.meta { background: #e8ecfb; color: #3b5093; }
.chip.microsoft { background: #e6f4ef; color: #107c5b; }

.head-actions { display: flex; align-items: flex-start; gap: 12px; }
.filter-cap { font-size: 10px; color: #667; font-weight: 400; margin-top: 2px; }
.line-edit { display: grid; gap: 6px; }
.line-row { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: center; }
.line-desc { font-weight: 600; font-size: 12px; }
.line-desc small { color: #889; font-weight: 400; }
.line-row .del { display: flex; align-items: center; gap: 4px; font-weight: 400;
                 color: #c0392b; font-size: 11px; white-space: nowrap; }
.line-add { border: 1px dashed #cfd8e0; border-radius: 6px; padding: 10px;
            display: grid; gap: 8px; }
.line-add legend { font-size: 11px; font-weight: 700; color: #667; padding: 0 6px; }

.pace-over { color: #d32323; font-weight: 700; }
.pace-under { color: #e08a00; font-weight: 700; }

.daily .media-group { text-align: center; }
.daily .sub-head th { background: #fafbfc; font-size: 11px; color: #667; }
.daily .date-col { white-space: nowrap; background: #fafbfc; font-weight: 600; }
.daily tr.sat td { background: #f0f6ff; }
.daily tr.sun td { background: #fff0f0; }
.daily tr.today td { border-top: 2px solid #f07300; border-bottom: 2px solid #f07300; }

/* ---------------- レポート画面 ---------------- */
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 6px 16px; border-radius: 4px; font-weight: 600; color: #667; }
.tabs a.active { background: #ffeedd; color: #f07300; }
.tabs a:hover { background: #fff7ef; }

.period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.period input { padding: 6px 8px; border: 1px solid #cfd8e0; border-radius: 4px; font: inherit; }
.period button { border: none; background: #f07300; color: #fff; border-radius: 4px;
                 padding: 7px 14px; font-weight: 700; cursor: pointer; }
.period .preset { padding: 6px 10px; border: 1px solid #cfd8e0; border-radius: 4px;
                  font-size: 12px; color: #556; }
.period .preset:hover { border-color: #f07300; color: #f07300; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid #e3e8ee; border-radius: 6px; padding: 12px 14px; }
.kpi-label { font-size: 11px; color: #667; font-weight: 700; }
.kpi-value { font-size: 22px; font-weight: 700; color: #8a4300; margin: 4px 0 2px;
             font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 11px; font-weight: 700; }
.kpi-delta.up { color: #1e8449; }
.kpi-delta.down { color: #c0392b; }
.kpi-delta.muted { color: #aab; font-weight: 400; }
.kpi-prev { color: #aab; font-weight: 400; margin-left: 2px; }

.card { background: #fff; border: 1px solid #e3e8ee; border-radius: 6px;
        padding: 14px; margin-bottom: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h2 { font-size: 14px; color: #8a4300; }
.dl { font-size: 12px; font-weight: 700; color: #f07300; border: 1px solid #cfd8e0;
      border-radius: 4px; padding: 5px 10px; }
.dl:hover { border-color: #f07300; background: #fff7ef; }

.chart-toggle { display: flex; gap: 4px; flex-wrap: wrap; }
.chart-toggle button { border: 1px solid #cfd8e0; background: #fff; border-radius: 4px;
                       padding: 4px 9px; font-size: 11px; cursor: pointer; color: #556; }
.chart-toggle button.on { background: #f07300; border-color: #f07300; color: #fff; font-weight: 700; }
#chart { width: 100%; height: 260px; }
#chart .grid { stroke: #eef2f6; stroke-width: 1; }
#chart .ylab { fill: #99a; font-size: 10px; text-anchor: end; }
#chart .line { fill: none; stroke: #f07300; stroke-width: 2; }
#chart .area { fill: rgba(240,115,0,.10); stroke: none; }
#chart .dot { fill: #f07300; }
#chart-x { display: flex; justify-content: space-between; font-size: 10px;
           color: #99a; padding: 0 16px 0 64px; }

table.report th { background: #fafbfc; font-size: 11px; color: #556; white-space: nowrap; }
table.report td, table.report th { padding: 6px 10px; }
table.report .label-col { max-width: 320px; overflow: hidden; text-overflow: ellipsis;
                          white-space: nowrap; font-weight: 600; }
table.report tr:hover td { background: #fffaf4; }

/* クリエイティブ別レポート */
.hint { font-size: 11px; color: #99a; font-weight: 400; margin-left: 6px; }
.creative-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                 gap: 12px; }
.creative { border: 1px solid #e3e8ee; border-radius: 6px; overflow: hidden; background: #fff;
            display: flex; flex-direction: column; }
.creative:hover { border-color: #f07300; box-shadow: 0 2px 8px rgba(240,115,0,.14); }
.creative-img { display: block; aspect-ratio: 1/1; background: #f2f6fb; overflow: hidden; }
.creative-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.creative-img.noimg { display: flex; align-items: center; justify-content: center;
                      color: #aab; font-size: 12px; }
.creative-body { padding: 9px 10px; display: grid; gap: 4px; }
.creative-name { font-weight: 700; font-size: 12px; line-height: 1.35;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                 overflow: hidden; }
.creative-meta { font-size: 10px; color: #99a; white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
.creative-lp { font-size: 10px; color: #f07300; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; display: block; }
.creative-lp:hover { text-decoration: underline; }
.creative-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 6px;
                  margin-top: 4px; padding-top: 6px; border-top: 1px solid #f0f3f6; }
.creative-stats div { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.creative-stats span { display: block; font-size: 9px; color: #99a; font-weight: 400; }

/* セグメント別（タブ切り替え） */
.seg-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-tabs button { border: 1px solid #cfd8e0; background: #fff; border-radius: 4px;
                   padding: 5px 11px; font-size: 12px; cursor: pointer; color: #556; }
.seg-tabs button.on { background: #8a4300; border-color: #8a4300; color: #fff; font-weight: 700; }
.seg-panel { display: none; }
.seg-panel.on { display: block; }
.seg-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.bar-wrap { position: relative; display: flex; align-items: center; justify-content: flex-end;
            gap: 6px; min-width: 110px; }
.bar-wrap .bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
                 height: 14px; background: rgba(240,115,0,.20); border-radius: 2px; }
.bar-wrap span { position: relative; font-variant-numeric: tabular-nums; }

/* 親アカウント（クライアント）ツリー */
.client { border-bottom: 1px solid #eef2f6; padding-bottom: 4px; margin-bottom: 4px; }
.client-name { display: flex; align-items: center; justify-content: space-between;
               padding: 9px 14px 5px; font-weight: 700; font-size: 12px; color: #8a4300;
               letter-spacing: .02em; }
a.client-name:hover { background: #fff7ef; }
a.client-name.active { background: #ffeedd; }
.client-count { background: #f0f3f6; color: #778; border-radius: 10px; padding: 1px 7px;
                font-size: 10px; font-weight: 700; }
.client .adv { padding-left: 26px; font-size: 12px; border-bottom: none; }
.client .adv.active { padding-left: 23px; }
.parent-badge { background: #ffeedd; color: #f07300; font-size: 11px; font-weight: 700;
                border-radius: 3px; padding: 2px 8px; margin-left: 8px;
                vertical-align: middle; }

/* 削除ボタン */
.danger-zone { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f3f6; }
button.danger { border: 1px solid #e0b4ae; background: #fff; color: #c0392b; border-radius: 4px;
                padding: 7px 14px; font-weight: 700; cursor: pointer; font-size: 12px; }
button.danger:hover { background: #fdf0ee; border-color: #c0392b; }

.notice { background: #fff8ec; border: 1px solid #f0d5a8; border-radius: 6px;
          padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: #7a5a20; }
.pending-mark { color: #e08a00; font-weight: 700; margin-left: 2px; cursor: help; }
.chip.line { background: #e6f7ea; color: #06c755; }

/* ログイン画面 */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: #f5f7fa; }
.login-card { background: #fff; border: 1px solid #e3e8ee; border-radius: 8px;
              padding: 32px 28px; width: 340px; display: grid; gap: 14px;
              box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.login-logo { font-size: 26px; font-weight: 700; color: #f07300; text-align: center; }
.login-logo span { color: #333; font-weight: 400; }
.login-lead { text-align: center; color: #889; font-size: 12px; margin-top: -8px; }
.login-card label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: #556; }
.login-card input { padding: 9px 11px; border: 1px solid #cfd8e0; border-radius: 4px;
                    font: inherit; font-weight: 400; }
.login-card input:focus { outline: none; border-color: #f07300; }
.login-card button { width: 100%; margin-top: 4px; }
.login-error { background: #fdf0ee; border: 1px solid #e0b4ae; color: #c0392b;
               border-radius: 4px; padding: 9px 11px; font-size: 12px; }

/* ヘッダーのログアウト */
.topbar-right { display: flex; align-items: center; gap: 12px; }
.logout { font-size: 11px; color: #99a; }
.logout:hover { color: #c0392b; }

/* ユーザー管理 */
.main-wide { max-width: 1100px; }
.user-form { display: grid; gap: 12px; }
.user-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.user-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: #556; }
.user-form input, .user-form select { padding: 8px 10px; border: 1px solid #cfd8e0;
                                      border-radius: 4px; font: inherit; font-weight: 400; }
.scope-box { border: 1px dashed #cfd8e0; border-radius: 6px; padding: 10px 12px; }
.scope-box legend { font-size: 11px; font-weight: 700; color: #667; padding: 0 6px; }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.scope-item { display: flex; align-items: center; gap: 6px; font-size: 12px;
              font-weight: 400 !important; color: #333; }
.scope-edit summary { cursor: pointer; color: #f07300; font-size: 12px; }
.scope-edit form { margin-top: 8px; display: grid; gap: 8px; }
.row-actions { display: flex; gap: 6px; white-space: nowrap; }
button.mini { border: 1px solid #cfd8e0; background: #fff; border-radius: 4px;
              padding: 4px 9px; font-size: 11px; cursor: pointer; color: #556; }
button.mini:hover { border-color: #f07300; color: #f07300; }
button.mini.danger { color: #c0392b; border-color: #e0b4ae; }
.invite-url { display: flex; gap: 6px; margin-top: 8px; }
.invite-url input { flex: 1; padding: 7px 9px; border: 1px solid #cfd8e0; border-radius: 4px;
                    font-size: 11px; font-family: monospace; }
.invite-url button { border: 1px solid #f07300; background: #fff; color: #f07300;
                     border-radius: 4px; padding: 6px 12px; font-size: 11px;
                     font-weight: 700; cursor: pointer; }