/* gambling.baby — same visual language as the admin panel.
   Base tokens, .card / .btn / table classes and the .kwk-* list styles are carried over verbatim
   so the two products stay indistinguishable; gb-* rules add only what the public service needs. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f6fb;
    color: #172033;
}

a { color: #2b3ac7; }

.container { max-width: 1440px; margin: 0 auto; padding: 24px; }

.page-header, .section-header { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.page-header { margin-bottom: 24px; }
.page-header h1 { margin: 0 0 6px; color: #2b3ac7; }
.page-header p { margin: 0; color: #667085; }
.header-actions { display: flex; gap: 10px; }

.two-column { display: flex; gap: 12px; align-items: start; margin-bottom: 20px; }
.two-column > * { flex: 1; }

.card { background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05); }
.card h2 { margin: 0 0 16px; }
.top-gap { margin-top: 16px; }

.btn, .tab {
    display: inline-block;
    border: 1px solid #dbe1ea;
    background: #fff;
    color: #172033;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}
.btn-primary { background: #2b3ac7; border-color: #2b3ac7; color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 17px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; }

input[type="text"], input[type="password"], input[type="email"], select, textarea {
    width: 100%;
    border: 1px solid #dbe1ea;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    background: #fff;
    color: inherit;
}

.stat { background: #f8fafc; border-radius: 14px; padding: 14px; }
.stat-value { display: block; font-size: 26px; font-weight: 700; color: #2b3ac7; }
.stat-label { display: block; font-size: 13px; color: #667085; margin-top: 4px; }

.list-item {
    display: block;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.list-item:hover { border-color: #2b3ac7; background: #eef2ff; }

.muted { color: #667085; font-size: 13px; }
.hidden { display: none !important; }

.meta-chip { background: #eef2ff; color: #2b3ac7; border-radius: 999px; padding: 4px 10px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #edf2f7; vertical-align: top; }
thead th { font-size: 13px; color: #667085; font-weight: 600; }
tbody tr:hover { background: #f8fafc; }

/* --- carried over from the admin keyword list --- */
.kwk-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kwk-toolbar label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
table.kwk-keywords { width: 100%; border-collapse: collapse; }
table.kwk-keywords th { text-align: left; font-size: 12px; color: #667085; font-weight: 500; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; }
table.kwk-keywords td { padding: 9px 6px; border-top: 1px solid #f0f0ef; border-bottom: 0; }
tr.kwk-krow { cursor: pointer; }
tr.kwk-krow:hover { background: #f7f7f5; }
tr.kwk-krow.kwk-open { background: #eef2f7; }
.kwk-caret { width: 20px; text-align: center; color: #98968f; }
tr.kwk-detail > td { padding: 0 6px 12px; background: #eef2f7; }
.kwk-detail-inner { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 10px 12px; }
.kwk-geo-mini { height: 42px; font-size: 13px; max-width: 240px; }
table.kwk-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kwk-detail-table th { text-align: left; font-size: 12px; color: #667085; font-weight: 500; padding: 5px 6px; }
table.kwk-detail-table td { padding: 6px; border-top: 1px solid #f0f0ef; border-bottom: 0; }
.kwk-up { color: #3b6d11; }
.kwk-down { color: #a32d2d; }
.kwk-tabs { display: flex; gap: 6px; }
.kwk-tab-btn { padding: 6px 14px; font-size: 14px; }
.kwk-tab-btn.active { background: #eef2f7; border-color: #2563eb; color: #185fa5; }
.kwk-tab-btn span { opacity: .6; margin-left: 6px; }
.brand-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.brand-tile { background: #f7f7f5; border-radius: 8px; padding: 12px 14px; }
.brand-tile .muted { font-size: 12px; }
.brand-tile-v { font-size: 22px; font-weight: 500; margin-top: 4px; }

/* --- public service chrome --- */
.gb-header { background: #fff; border-bottom: 1px solid #e5e9f2; }
.gb-header-inner { display: flex; align-items: center; gap: 20px; padding: 14px 24px; }
.gb-logo { font-size: 19px; font-weight: 700; color: #2b3ac7; text-decoration: none; }
.gb-logo span { color: #98a2b3; font-weight: 500; }
.gb-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.gb-nav-link { padding: 8px 12px; border-radius: 10px; color: #344054; text-decoration: none; font-size: 14px; }
.gb-nav-link:hover { background: #f3f6fb; }
.gb-nav-link.active { background: #eef2ff; color: #2b3ac7; font-weight: 600; }
.gb-user { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gb-inline-form { display: inline; }
.gb-footer { padding: 24px; color: #98a2b3; font-size: 13px; }
.gb-footer .container { display: flex; gap: 16px; justify-content: space-between; padding: 0 24px; }

/* Right-aligned numbers need right-aligned headers, otherwise the caption floats away from its
   column. `table.kwk-keywords th` is more specific than a bare class, so it has to be named. */
.gb-right { text-align: right; }
th.gb-right,
table.kwk-keywords th.gb-right,
table.kwk-detail-table th.gb-right { text-align: right; }
.gb-count { margin: 0 0 12px; }
.gb-more { margin: 16px 0 0; }
.gb-select { width: auto; min-width: 190px; }
.gb-input-sm { width: 130px; }
.gb-geo-input { width: auto; min-width: 210px; }
.gb-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.gb-sort:hover { color: #2563eb; }
.gb-sort-on { color: #2563eb; font-weight: 600; }
.gb-sort-arrow { display: inline-block; min-width: 12px; font-size: 10px; }
.gb-geo-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.gb-filters { margin-bottom: 16px; }
.gb-filters input[type="text"] { width: auto; min-width: 180px; flex: 1; }
.gb-geos { white-space: nowrap; }
.gb-geo-chip + .gb-geo-chip { margin-left: 4px; }
.gb-spark { color: #2b3ac7; display: block; }
.gb-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gb-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gb-outbox-body { white-space: pre-wrap; font-size: 12px; word-break: break-all; }

.gb-chart { color: #2b3ac7; }
.gb-chart-box { overflow-x: auto; }
.gb-chart-labels { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: #667085; }
.gb-chart-labels b { display: block; color: #172033; font-weight: 600; }

.gb-geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gb-geo-card { display: flex; flex-direction: column; gap: 4px; }
.gb-live-filter { max-width: 320px; }

.gb-notice { background: #dcfce7; color: #166534; border-radius: 12px; padding: 12px 14px; }
.gb-error { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 12px 14px; }

/* --- auth pages --- */
.gb-auth { max-width: 460px; }
.gb-auth h1 { margin-top: 0; color: #2b3ac7; }
.gb-auth-links { margin-bottom: 0; }

/* --- landing --- */
.gb-hero { background: linear-gradient(160deg, #eef2ff 0%, #f3f6fb 60%); padding: 72px 0 56px; }
.gb-hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; color: #172033; max-width: 760px; }
.gb-hero-sub { font-size: 18px; color: #475467; max-width: 680px; margin: 0 0 28px; }
.gb-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 36px; max-width: 720px; }
.gb-section { padding-top: 8px; }
.gb-section h2 { font-size: 26px; }
.gb-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gb-features h3 { margin: 0 0 8px; font-size: 17px; }
.gb-features p { margin: 0; font-size: 14px; line-height: 1.5; }
.gb-why { line-height: 1.9; color: #475467; padding-left: 20px; }
.gb-cta { text-align: center; }
.gb-cta h2 { margin-top: 0; }

@media (max-width: 960px) {
    .page-header, .two-column, .gb-header-inner { flex-direction: column; align-items: stretch; }
    .gb-user { margin-left: 0; }
    .gb-hero h1 { font-size: 32px; }
    .container { padding: 16px; }
}