/* Google Ads Dashboard – Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:      #f8f8f6;
    --bg2:     #ffffff;
    --text:    #1a1a18;
    --muted:   #6b6b67;
    --hint:    #9c9a92;
    --border:  rgba(0,0,0,0.10);
    --border2: rgba(0,0,0,0.18);
    --ok:      #3B6D11; --ok-bg:   #EAF3DE;
    --warn:    #854F0B; --warn-bg:  #FAEEDA;
    --alert:   #A32D2D; --alert-bg: #FCEBEB;
    --blue:    #185FA5;
    --radius:  8px;
    --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:      #1a1a18;
        --bg2:     #222220;
        --text:    #e8e6de;
        --muted:   #9c9a92;
        --hint:    #6b6b67;
        --border:  rgba(255,255,255,0.10);
        --border2: rgba(255,255,255,0.18);
        --ok:      #C0DD97; --ok-bg:   #27500A;
        --warn:    #FAC775; --warn-bg:  #633806;
        --alert:   #F09595; --alert-bg: #791F1F;
    }
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    padding: 0;
}

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; }

/* Mode Bar */
.mode-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius);
    background: #EEEDFE; border: 0.5px solid #AFA9EC;
    margin-bottom: 1.25rem; font-size: 13px; color: #3C3489;
}
.mode-bar p { flex: 1; margin: 0; }
.mode-bar code { background: #CECBF6; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #26215C; }

/* Header */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 8px; }
.topbar h1 { font-size: 20px; font-weight: 500; }
.topbar p { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Badges */
.badge { font-size: 11px; padding: 3px 9px; border-radius: var(--radius); font-weight: 500; }
.badge-demo   { background: #EEEDFE; color: #3C3489; }
.badge-ok     { background: var(--ok-bg);    color: var(--ok); }
.badge-warn   { background: var(--warn-bg);  color: var(--warn); }
.badge-alert  { background: var(--alert-bg); color: var(--alert); }

/* Alerts */
.alert { display: flex; gap: 10px; padding: 9px 13px; border-radius: var(--radius); margin-bottom: 7px; font-size: 13px; }
.alert-d  { background: var(--alert-bg); border: 0.5px solid rgba(163,45,45,0.35); color: var(--alert); }
.alert-w  { background: var(--warn-bg);  border: 0.5px solid rgba(133,79,11,0.35); color: var(--warn); }
.alert-ok { background: var(--ok-bg);    border: 0.5px solid rgba(59,109,17,0.35); color: var(--ok); }

/* KPI Grid */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin-bottom: 1.25rem; }
.mc { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.mc-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.mc-val   { font-size: 21px; font-weight: 500; line-height: 1.2; }
.mc-sub   { font-size: 11px; color: var(--hint); margin-top: 2px; }
.mc-good .mc-val { color: var(--ok); }
.mc-bad  .mc-val { color: var(--alert); }
.mc-warn .mc-val { color: var(--warn); }

/* Chart */
.sec-title { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 9px; }
.chart-wrap { position: relative; width: 100%; height: 180px; margin-bottom: 1.25rem; background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px; }
.legend { display: flex; gap: 14px; margin-bottom: 8px; font-size: 11px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.lsq { width: 18px; height: 3px; border-radius: 1px; display: inline-block; }

/* Divider */
hr.div { border: none; border-top: 0.5px solid var(--border); margin: 1.25rem 0; }

/* Campaign Table */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 400; font-size: 11px; color: var(--muted); padding: 5px 10px; border-bottom: 0.5px solid var(--border2); }
td { padding: 9px 10px; border-bottom: 0.5px solid var(--border); color: var(--text); }
tr:last-child td { border-bottom: none; }
td.bad { color: var(--alert); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.dot-g { background: #639922; }
.dot-r { background: #E24B4A; }
.dot-a { background: #BA7517; }

/* Loader */
#loader { padding: 3rem; text-align: center; color: var(--muted); font-size: 14px; }
#content { display: none; }