/* ===== Site theme (index.php, secret.php, watch.php) ===== */
:root {
    --bg: #0a0a0c;
    --surface: #131317;
    --surface-2: #1b1b21;
    --line: #26262e;
    --text: #f2f2f5;
    --muted: #9a9aa6;
    --faint: #6b6b76;
    --brand: #f5b400;
    --brand-2: #ffd34d;
    --pay: #16c784;
    --pay-2: #0fa56c;
    --danger: #ff5a5f;
    --radius: 14px;
    --header-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

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

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
    font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn i { font-size: 13px; }
.btn-pay { background: var(--pay); color: #04150e; }
.btn-pay:hover { background: #22d891; box-shadow: 0 6px 18px rgba(22, 199, 132, .25); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: #3a3a44; background: #222229; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    background: rgba(10, 10, 12, .85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo {
    width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
    background: linear-gradient(135deg, var(--brand), #ff8a00);
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), #ff8a00); color: #1a1200; font-size: 13px;
}
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.brand-name span { color: var(--brand); }

.search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 14px; pointer-events: none; }
.search input {
    width: 100%; height: 40px; padding: 0 16px 0 40px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 14px; outline: none;
    transition: border-color .15s, background .15s;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--brand); background: #1f1f26; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600; background: rgba(245, 180, 0, .1); color: var(--brand-2);
    border: 1px solid rgba(245, 180, 0, .28); white-space: nowrap;
}
.chip .mono { font-variant-numeric: tabular-nums; }

/* ---------- Page ---------- */
main { padding: 28px 0 60px; }

.promo {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 22px; margin-bottom: 30px; border-radius: var(--radius);
    background:
        radial-gradient(600px 200px at 0% 0%, rgba(245, 180, 0, .14), transparent 70%),
        radial-gradient(500px 200px at 100% 100%, rgba(22, 199, 132, .1), transparent 70%),
        var(--surface);
    border: 1px solid var(--line);
}
.promo-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(245, 180, 0, .14); color: var(--brand); font-size: 18px;
}
.promo-body { display: flex; align-items: center; gap: 16px; }
.promo h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.promo p { color: var(--muted); font-size: 14px; }
.promo strong { color: var(--text); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h1, .section-head h2 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.section-head h1 i, .section-head h2 i { color: var(--brand); font-size: 16px; }
.count { color: var(--faint); font-size: 13px; }

/* ---------- Video grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 18px; }

.card { display: block; min-width: 0; }
.thumb {
    position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #1d1d24, #121216);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s; }
.thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #4a4a57; font-size: 28px; }
.thumb::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%);
    opacity: .8; pointer-events: none;
}
.thumb-play {
    position: absolute; left: 50%; top: 50%; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px;
    border: 1px solid rgba(255, 255, 255, .25); transform: translate(-50%, -50%) scale(.85); opacity: 0;
    transition: opacity .2s, transform .2s; backdrop-filter: blur(4px);
}
.thumb-play i { margin-left: 3px; }
.thumb-badge {
    position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    background: rgba(0, 0, 0, .65); color: var(--brand-2); backdrop-filter: blur(4px);
}
.thumb-views {
    position: absolute; z-index: 2; right: 8px; bottom: 8px; font-size: 11.5px; font-weight: 600;
    padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #e6e6ea;
}
.card:hover .thumb img { transform: scale(1.04); }
.card:hover .thumb-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card.is-locked .thumb img { filter: brightness(.7); }

.card-title {
    margin-top: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { margin-top: 4px; color: var(--faint); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.card:hover .card-title { color: #fff; }

.empty {
    text-align: center; padding: 70px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted);
}
.empty i { font-size: 34px; color: #3b3b46; margin-bottom: 14px; }
.empty h3 { color: var(--text); font-size: 17px; margin-bottom: 6px; }
.empty .btn { margin-top: 18px; }

/* ---------- Watch page ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }

.player {
    position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line);
}
.player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; transition: filter .3s; }
.player.blurred video { filter: blur(18px) brightness(.5); }
.player-play {
    position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 22px;
    backdrop-filter: blur(6px); transition: transform .15s, background .15s;
}
.player-play:hover { transform: scale(1.06); background: rgba(255, 255, 255, .22); }
.player-play span { margin-left: 4px; }
.player-badge {
    position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 12px; font-weight: 600;
    padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; backdrop-filter: blur(4px);
}
.player-lock {
    position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; padding: 20px;
}
.player.blurred .player-lock { display: flex; }
.player.blurred .player-play, .player.blurred .player-badge { display: none !important; }
.player-lock .lock-icon {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    background: rgba(245, 180, 0, .16); color: var(--brand); font-size: 20px; border: 1px solid rgba(245, 180, 0, .35);
}
.player-lock h3 { font-size: 18px; }
.player-lock p { color: #c9c9d1; font-size: 14px; margin-bottom: 10px; }

.watch-title { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 18px 0 10px; }
.watch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.watch-meta { color: var(--muted); font-size: 13.5px; display: flex; gap: 14px; align-items: center; }
.watch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.watch-desc {
    margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
    color: #cfcfd6; font-size: 14px; white-space: pre-line;
}
.toast {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 200; display: none;
    padding: 10px 16px; border-radius: 10px; background: #fff; color: #111; font-weight: 600; font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.side-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.side-list { display: flex; flex-direction: column; gap: 12px; }
.side-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; }
.side-item .thumb { border-radius: 10px; }
.side-item .card-title { margin-top: 0; font-size: 14px; }
.side-item:hover .thumb img { transform: scale(1.04); }

/* ---------- Mobile pay bar ---------- */
.paybar { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 22px 0; color: var(--faint); font-size: 13px; }
.site-footer .container { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .watch { grid-template-columns: 1fr; }
    .side-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 16px; }
    .side-item { display: block; }
    .side-item .card-title { margin-top: 8px; }
}

@media (max-width: 720px) {
    :root { --header-h: auto; }
    .container { padding: 0 14px; }
    .site-header .container { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
    .brand { flex: 1; }
    .brand-name { font-size: 16px; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .header-actions .btn-pay { display: none; }
    main { padding: 18px 0 100px; }

    .promo { flex-direction: column; align-items: stretch; padding: 16px; margin-bottom: 22px; }
    .promo .btn { width: 100%; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
    .card-title { font-size: 13px; margin-top: 8px; }
    .card-meta { font-size: 11.5px; }
    .card-meta span:not(:first-child) { display: none; }
    .thumb { border-radius: 10px; }
    .thumb-play { display: none; }
    .section-head h1, .section-head h2 { font-size: 17px; }

    .watch-title { font-size: 17px; margin-top: 14px; }
    .player { border-radius: 0; margin: 0 -14px; border-left: 0; border-right: 0; }
    .side-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }

    .paybar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 150;
        padding: 10px 10px 10px 14px; border-radius: 14px;
        background: rgba(24, 24, 30, .92); border: 1px solid #2f2f38; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
    .paybar-text { font-size: 13px; line-height: 1.3; color: var(--muted); }
    .paybar-text strong { display: block; color: var(--text); font-size: 14px; }
    .site-footer { padding-bottom: 90px; }
}