:root {
  --teal: #2a8a82;
  --teal-dark: #1a6b64;
  --teal-light: #e8f3f2;
  --teal-grad: linear-gradient(160deg, #2a8a82, #3db8ae);
  --text: #1d2b2a;
  --text-muted: #7a9e9b;
  --border: #edf4f3;
  --bg: #f2f8f7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text);
}
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
}
.brand {
  font-size: 15px; font-weight: 600; padding: 12px 10px; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
  background: var(--teal-grad); color: #fff; border-radius: 10px;
}
.brand-logo { width: 26px; height: 26px; object-fit: contain; }
.login-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 12px; }
.nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  margin-bottom: 2px;
}
.nav-item.active { background: var(--teal-light); color: var(--teal-dark); font-weight: 600; }
.nav-item.disabled { color: #b5b3aa; cursor: default; }
.nav-bottom { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }

.content { flex: 1; padding: 1.5rem 2rem; min-width: 0; }
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.content-header h1 { font-size: 18px; font-weight: 600; margin: 0; }
.header-right { display: flex; align-items: center; gap: 12px; }
.updated-at { font-size: 12px; color: var(--text-muted); }
.refresh-btn {
  font-size: 12px; padding: 6px 12px; border-radius: 6px;
  background: var(--teal-grad); color: #fff; text-decoration: none; border: none; cursor: pointer;
}

.kpi-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-bottom: 12px; }
.kpi-card { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; border: 1px solid var(--border); }
.kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 600; }
.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.kpi-primary .kpi-value { font-size: 30px; }
.kpi-change { font-size: 12px; font-weight: 600; margin-top: 6px; }
.kpi-change.up { color: #27500a; }
.kpi-change.down { color: #c0392b; }
.kpi-line { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.kpi-line-label { font-size: 13px; color: #555; min-width: 3em; }
.kpi-line-value { font-size: 18px; font-weight: 600; }
.kpi-line-sub { font-size: 11px; color: var(--text-muted); }

.alert-box { background: #fdf3e4; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 12px; }
.alert-line { font-size: 13px; color: #a3711a; }
.alert-icon { display: inline-block; margin-right: 6px; }

.table-card { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; border: 1px solid var(--border); }
.table-title { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; color: var(--text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 8px 4px; border-bottom: 1px solid var(--border); }
td:not(:first-child) { white-space: nowrap; }
td:first-child { max-width: 260px; word-break: break-word; }
.row-paused { opacity: 0.55; }
.group-row td { font-weight: 600; color: var(--text); padding-top: 14px; }

.rank-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.rank-above { background: #eaf3de; color: #27500a; }
.rank-avg { background: #f1efe8; color: #444441; }
.rank-below { background: #fff0f0; color: #c0392b; }
.rank-unknown { background: #f1efe8; color: #aaa; }

/* 登入頁 */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 2rem; width: 320px; }
.login-title { font-size: 16px; font-weight: 600; margin-bottom: 1rem; text-align: center; }
.login-error { background: #fff0f0; color: #c0392b; font-size: 12px; padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; }
.login-label { display: block; font-size: 12px; color: var(--text-muted); margin: 10px 0 4px; }
.login-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.login-input-sm { width: auto; }
.login-btn { width: 100%; margin-top: 16px; padding: 8px 10px; border: none; border-radius: 6px; background: var(--teal-grad); color: #fff; font-size: 13px; cursor: pointer; }

/* 帳號管理頁 */
.account-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin-right: 8px; }
.danger-btn { background: #c0392b; }

/* 廣告管理頁 */
.dev-note { background: #f1efe8; color: #5f5e5a; font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
.ad-form-card, .ad-list-card { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid var(--border); margin-bottom: 1rem; }
.ad-form-title { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.form-section { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid var(--border); margin-bottom: 1rem; }
.form-section-title, .ab-test-title, .creative-section-title {
  font-size: 16px; font-weight: 600; color: #185fa5; display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.form-section-title i, .ab-test-title i, .creative-section-title i { color: #185fa5; font-size: 19px; }

.pill.blue:has(input:checked) { background: rgba(230,241,251,.7); border-color: rgba(55,138,221,.4); color: #0c447c; font-weight: 600; }
.pill.blue:has(input:checked) .pill-check { display: inline; color: #0c447c; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-field { margin-bottom: 20px; }
.form-field label, .form-field-label { display: block; font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.form-field input[type=text], .form-field input[type=number], .form-field input[type=datetime-local],
.form-field select, textarea, .carousel-card input[type=text] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit;
}
/* 多組受眾卡片（JS產生，不在.form-field裡面），輸入框比照上面同一套樣式 */
.audience-group-card input[type=text], .audience-group-card input[type=number], .audience-group-card select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff;
}
.form-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--teal-light); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
}
.form-toggle-title { font-size: 13px; font-weight: 600; }
.form-toggle-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.switch-checkbox { width: 18px; height: 18px; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.radio-label { display: flex; align-items: center; gap: 6px; }
.ab-test-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.creative-section { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid var(--border); margin-bottom: 1rem; }

/* 選項卡片／藥丸按鈕（2026-09-15改版，各大分類配不同選中色系） */
.pill-radio-hidden { position: absolute; opacity: 0; width: 0; height: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-fmt { display: flex; gap: 10px; }
.row-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.opt-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  position: relative; cursor: pointer; display: block;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .2s;
}
.opt-card.fmt { text-align: center; flex: 1; }
.opt-card.amber:has(input:checked) { background: rgba(250,238,218,.5); border-color: rgba(239,159,39,.5); box-shadow: 0 0 0 1px rgba(250,199,117,.6), 0 4px 12px rgba(186,117,23,.1); transform: scale(1.02); }
.opt-card.amber:has(input:checked) .check-badge { background: rgba(239,159,39,.85); opacity: 1; transform: scale(1); }
.opt-card.amber:has(input:checked) .opt-icon { color: #a3711a; }
.opt-card.coral:has(input:checked) { background: rgba(250,236,231,.6); border-color: rgba(216,90,48,.4); box-shadow: 0 0 0 1px rgba(240,153,123,.6), 0 4px 12px rgba(153,60,29,.1); transform: scale(1.02); }
.opt-card.coral:has(input:checked) .check-badge { background: rgba(216,90,48,.85); opacity: 1; transform: scale(1); }
.opt-card.coral:has(input:checked) .icon-lg { color: #993c1d; }

.check-badge {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
  opacity: 0; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.check-badge.sm { width: 18px; height: 18px; font-size: 11px; }
.opt-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.opt-title.center { justify-content: center; margin-top: 6px; }
.opt-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.badge-rec { background: #fdf3e4; color: #a3711a; font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.opt-icon { color: #888780; font-size: 16px; }
.icon-lg { color: #888780; font-size: 22px; }

.pill {
  border: 1px solid var(--border); border-radius: 20px; padding: 7px 16px; font-size: 13px;
  color: #5f5e5a; cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background .2s, border-color .2s, color .2s;
}
.pill-check { display: none; font-size: 13px; }
.pill.teal:has(input:checked) { background: rgba(225,245,238,.7); border-color: rgba(29,158,117,.4); color: #0f6e56; font-weight: 600; }
.pill.teal:has(input:checked) .pill-check { display: inline; color: #0f6e56; }
.pill.purple:has(input:checked) { background: rgba(238,237,254,.7); border-color: rgba(127,119,221,.4); color: #534ab7; font-weight: 600; }
.pill.purple:has(input:checked) .pill-check { display: inline; color: #534ab7; }
.creative-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.creative-section-head .creative-section-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.form-toggle-row.compact { max-width: 420px; }
.creative-group { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.creative-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.creative-group-label { font-size: 12px; color: var(--text-muted); }
.upload-box {
  border: 1px dashed #c9c9c9; border-radius: 6px; padding: 0.75rem; text-align: center;
  color: var(--text-muted); font-size: 12px; margin-bottom: 8px;
}
.btn-sm {
  font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; cursor: pointer;
}
.btn-remove { color: #c0392b; border-color: #f0c9c9; }
.carousel-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.carousel-card input[type=text] { flex: 1; min-width: 100px; }
.carousel-card select { width: auto; padding: 6px 8px; }
.primary-btn {
  width: 100%; padding: 10px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
  background: var(--teal-grad); color: #fff; cursor: pointer; margin-bottom: 1rem;
}
.campaign-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 10px; }
.campaign-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.campaign-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.campaign-name i { color: var(--teal-dark); font-size: 15px; }
.campaign-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.material-row {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px;
}
.material-info { display: flex; flex-direction: column; gap: 2px; }
.material-name { font-size: 13px; }
.material-metric { font-size: 12px; color: var(--text-muted); }
.metric-good { color: var(--teal-dark); font-weight: 600; }
.material-actions { display: flex; align-items: center; gap: 8px; }
.tag { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.tag-accent { background: var(--teal-light); color: var(--teal-dark); }
.tag-success { background: #eaf3de; color: #27500a; }
.tag-danger { background: #fff0f0; color: #c0392b; }
.tag-warning { background: #fdf3e4; color: #a3711a; }