/* ==========================================================================
   StatCounter Lite — 普普風（Pop Art）藍白主題
   設計語彙：粗黑外框、實心硬陰影（不模糊）、平塗色塊、網點底紋、大字級。
   圖表色彩已用 dataviz 驗證工具檢查（分類對比／色盲安全性／對比度），非隨意挑色。
   ========================================================================== */

:root {
    color-scheme: light;

    /* 普普風核心：黑色描邊 + 平塗色 */
    --ink: #0b0b0b;
    --bg: #e3edfb;
    --surface: #ffffff;
    --surface-muted: #f2f7fe;

    /* 藍色系（主色）*/
    --blue: #2a78d6;          /* 平塗色塊、圖表主色 */
    --blue-deep: #1d5aa8;     /* 白底上的文字（對比 6.82:1）*/
    --blue-btn: #2568c2;      /* 按鈕底色（配白字 5.47:1，通過 WCAG AA）*/
    --blue-pale: #d6e6fb;
    --blue-paler: #eaf2fd;

    /* 普普風點綴色 */
    --red: #e34948;
    --red-deep: #c23b3b;
    --red-pale: #fde3e3;
    --yellow: #ffd23f;
    --green-deep: #16794a;
    --green-pale: #dcf5e8;
    --violet: #6d3fd1;
    --violet-pale: #ece3fd;
    --amber-deep: #a35b00;
    --amber-pale: #ffeeca;

    --text: #0b0b0b;
    --text-secondary: #44546b;
    --text-muted: #6b7a90;

    --radius: 16px;
    --radius-sm: 10px;

    /* 普普風的招牌：不模糊的實心位移陰影 */
    --pop-sm: 3px 3px 0 var(--ink);
    --pop: 6px 6px 0 var(--ink);
    --pop-lg: 9px 9px 0 var(--ink);
    --border: 3px solid var(--ink);
    --border-thin: 2px solid var(--ink);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    /* 網點底紋（halftone），普普風的視覺標記 */
    background-image: radial-gradient(circle, rgba(42, 120, 214, .20) 21%, transparent 22%);
    background-size: 20px 20px;
    background-attachment: fixed;
}

/* ---------- 導覽列 ---------- */
.topnav {
    background: var(--surface);
    padding: 14px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topnav .brand {
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
    font-size: 23px;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}
.topnav .brand::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--yellow);
    border: var(--border-thin);
    box-shadow: var(--pop-sm);
}
.topnav a { color: var(--blue-deep); text-decoration: none; font-weight: 700; }
.topnav a:hover { text-decoration: underline; }
.nav-right { font-size: 16px; color: var(--text-secondary); font-weight: 600; }

.container { max-width: 1220px; margin: 34px auto; padding: 0 22px 64px; }

h1 { font-size: 36px; font-weight: 900; margin: 0; letter-spacing: -.03em; line-height: 1.15; }
h2 { font-size: 22px; font-weight: 900; margin: 0 0 14px; letter-spacing: -.02em; }
p { color: var(--text-secondary); font-size: 17px; }
a { color: var(--blue-deep); font-weight: 600; }

/* ---------- 頁首橫幅（標題 + 操作按鈕）---------- */
.page-head {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 22px 26px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
/* 標題左側的黃色色條，普普風的平塗色塊語彙 */
.page-head::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 14px;
    background: var(--yellow);
    border-right: var(--border);
}
.page-head-text { padding-left: 16px; min-width: 0; }
.page-head-sub { font-size: 16px; color: var(--text-secondary); margin-top: 4px; font-weight: 600; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 按鈕 ---------- */
button, .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-btn);
    color: #fff;
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-size: 17px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--pop-sm);
    transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
button:hover, .btn:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }
/* 按下時往陰影方向位移，做出「壓下去」的實體感 */
button:active, .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-ghost:hover { background: var(--yellow); color: var(--ink); }
.btn-sm { padding: 7px 14px; font-size: 15px; }

.link-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--red-deep);
    padding: 0;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 800;
}
.link-btn:hover { background: none; color: var(--red); }
.link-btn:active { transform: none; }

/* ---------- Bento Grid ---------- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 22px;
}
.bento-card {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 24px 26px;
    min-width: 0;
    transition: transform .1s ease, box-shadow .1s ease;
}
.bento-card:hover { transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.bento-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }

@media (max-width: 980px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-span-3 { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-span-2, .bento-span-3, .bento-span-4 { grid-column: span 1; }
}

/* ---------- KPI 數字方塊 ---------- */
.stat-tile { display: flex; flex-direction: column; gap: 6px; }
.stat-tile .stat-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.stat-tile .stat-value {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink);
}
.stat-tile .stat-sub { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.stat-tile .stat-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--yellow);
    border: var(--border-thin);
    box-shadow: var(--pop-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 25px;
    margin-bottom: 8px;
}

/* ---------- 資料表格 ---------- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    overflow: hidden;
    margin-top: 4px;
}
.data-table th {
    background: var(--blue-btn);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    padding: 14px 16px;
    border-bottom: var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: 14px 16px;
    font-size: 17px;
    border-bottom: var(--border-thin);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--surface-muted); }
.data-table tbody tr:hover { background: var(--yellow); }
.data-table .num {
    font-weight: 900;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.data-table .site-title { font-weight: 900; font-size: 18px; }
.data-table .site-sub { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.data-table .row-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.data-table .nowrap { white-space: nowrap; }
/* 表格內的 IP 等等值：用低調的等寬字，避免整欄都是搶眼色塊造成閱讀疲勞 */
.data-table .mono {
    font-family: "Consolas", "Menlo", monospace;
    font-size: 15px;
    background: var(--blue-paler);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
/* 卡片內的表格不重複描粗框與陰影，避免視覺上層層疊疊 */
.bento-card .data-table, .panel .data-table { border: var(--border-thin); box-shadow: none; }

/* ---------- 卡片容器 ---------- */
.panel {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 26px 28px;
    margin-top: 24px;
}
.panel > .data-table { border: var(--border-thin); box-shadow: none; }

/* ---------- 表單 ---------- */
.inline-form {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: end;
}
.panel > .inline-form { border: var(--border-thin); box-shadow: none; padding: 20px 22px; }
.inline-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
}
.inline-form input, .inline-form select {
    padding: 11px 13px;
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    font-size: 17px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}
.inline-form input:focus, .inline-form select:focus {
    outline: none;
    box-shadow: var(--pop-sm);
    border-color: var(--blue);
}

/* ---------- 提示訊息 ---------- */
.notice {
    background: var(--yellow);
    border: var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    color: var(--ink);
    padding: 15px 20px;
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 22px;
}
.error { color: var(--red-deep); font-weight: 800; font-size: 17px; }

/* ---------- 徽章 ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border: var(--border-thin);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--ink);
}
.badge-human { background: var(--green-pale); color: var(--green-deep); }
.badge-search { background: var(--blue-pale); color: var(--blue-deep); }
.badge-ai { background: var(--violet-pale); color: var(--violet); }
.badge-crawler { background: var(--amber-pale); color: var(--amber-deep); }

/* ---------- 網站區塊（sites.php）：大區塊 → 中區塊 → 小區塊 三層 ----------
   大區塊 .site-block  ：一個網站一張獨立卡片（粗黑框＋硬陰影），彼此間距大，一眼分得出界線
   中區塊 .sub-block   ：卡片內的功能分區（網站資料／安裝碼），細框＋淺底
   小區塊 .snippet-box ：中區塊內的個別項目（兩種安裝碼）
   ------------------------------------------------------------------------ */
.site-block {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    margin-top: 30px;
    overflow: hidden;
}
.site-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: var(--blue-btn);
    border-bottom: var(--border);
}
.site-block-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* 序號圓標，讓多個網站更容易點數與區分 */
.site-block-no {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--yellow);
    border: var(--border-thin);
    box-shadow: var(--pop-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900; color: var(--ink);
}
.site-block-name { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
/* 藍底上的文字顏色經對比實測挑選：#e8f2fe 對 #2568c2 為 4.84:1、#ffeaea 為 4.74:1，
   皆通過 WCAG AA 一般文字 4.5:1 門檻（原本的 #d6e6fb 4.32、#ffd9d9 4.22 未達標）*/
.site-block-domain { font-size: 15px; color: #e8f2fe; font-weight: 600; }
.site-block-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-block-actions .link-btn { color: #ffeaea; }
.site-block-actions .link-btn:hover { color: #fff; }

.site-block-body { padding: 24px; display: flex; flex-direction: column; gap: 22px; }

.sub-block {
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    padding: 20px 22px;
}
.sub-block-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #bcd3ee;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.sub-block-hint { font-size: 15px; font-weight: 600; color: var(--text-secondary); }

/* 網站資料的鍵值對 */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.kv dt { font-size: 16px; font-weight: 800; color: var(--text-secondary); }
.kv dd { margin: 0; font-size: 16px; }

.block-footnote {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 16px 0 0;
}

/* ---------- 安裝碼區塊 ---------- */
.snippet-box {
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-top: 14px;
    overflow: hidden;
}
.snippet-box:first-of-type { margin-top: 0; }
.snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 16px;
    background: var(--blue-pale);
    border-bottom: var(--border-thin);
}
.snippet-title { font-weight: 900; font-size: 16px; color: var(--ink); }
.snippet-title .tag {
    display: inline-block;
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 13px;
    margin-right: 9px;
}
.snippet-code {
    display: block;
    padding: 15px 16px;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 15px;
    line-height: 1.55;
    word-break: break-all;
    white-space: pre-wrap;
    background: var(--surface);
    color: var(--ink);
    border: none;
    width: 100%;
}
.snippet-note {
    font-size: 15px;
    color: var(--text-secondary);
    padding: 0 16px 14px;
    margin: 10px 0 0;
    border-top: 1px dashed #c8d8ee;
    padding-top: 12px;
}

/* ---------- 舊版相容格線 ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 22px; }
.grid-2 > div, .grid-3 > div {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 24px 26px;
}
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- 登入／建立管理員頁 ---------- */
.auth-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    margin: 0;
    background-color: var(--bg);
    background-image: radial-gradient(circle, rgba(42, 120, 214, .20) 21%, transparent 22%);
    background-size: 20px 20px;
}
.auth-box {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--pop-lg);
    padding: 38px 34px;
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-box h1 { display: flex; align-items: center; gap: 12px; font-size: 30px; }
.auth-box h1::before {
    content: "";
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--yellow);
    border: var(--border-thin);
    box-shadow: var(--pop-sm);
    flex: 0 0 auto;
}
.auth-box label { display: flex; flex-direction: column; gap: 7px; font-size: 16px; font-weight: 800; }
.auth-box input {
    padding: 12px 13px;
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    font-size: 17px;
    font-family: inherit;
}
.auth-box input:focus { outline: none; box-shadow: var(--pop-sm); border-color: var(--blue); }
.auth-box button { justify-content: center; }

code {
    background: var(--yellow);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 5px;
    border: 2px solid var(--ink);
    font-size: 15px;
    font-weight: 700;
}
.snippet-code code, code.snippet-code { border: none; background: none; padding: 0; font-weight: 400; }