/* SecretDrop.me - Modern Edition | October 2026
   Presentation-only styles layered after assets/style.css. */
:root {
    color-scheme: dark;
    --bg: #0b0f1a;
    --card: #171d2c;
    --card-soft: #20283c;
    --text: #f6f3ff;
    --muted: #afb8d0;
    --accent: #b6a1ff;
    --accent-2: #fa90ae;
    --success: #66d9ad;
    --danger: #ff778c;
    --border: rgba(207,205,244,.13);
    --shadow: 0 18px 55px rgba(0,0,0,.23);
    --radius: 24px;
    --page-max: 1260px;
}
html {scroll-padding-top: 105px;}
body {
    min-width: 320px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    background: radial-gradient(ellipse 780px 670px at 8% 1%, rgba(107,76,176,.14), transparent 72%),
                radial-gradient(ellipse 660px 750px at 96% 27%, rgba(226,103,156,.08), transparent 80%),
                linear-gradient(180deg,#111529 0,#0b0f1a 550px,#0d101b 100%);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
button, input, textarea, select {font-family: inherit;}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea):focus-visible {outline: 3px solid #e5b8ff; outline-offset: 3px;}
button[hidden], div[hidden], .ios-install-hint[hidden] {display:none!important;}
.wrap {width: min(var(--page-max), calc(100% - 48px)); margin-inline: auto;}
.muted {color: var(--muted);}
.card {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(27,34,51,.98), rgba(19,25,40,.98));
    box-shadow: 0 16px 50px rgba(0,0,0,.14);
}
.card + .card, .content-grid .card + .card, .grid-two .card + .card {margin-top: 18px;}
h1,h2,h3 {letter-spacing: -.027em;}
.card h1, .card h2, .card h3 {overflow-wrap: break-word;}
.skip-link {position:fixed;left:18px;top:-90px;z-index:11000;padding:12px 20px;background:#fff;color:#121629;border-radius:12px;font-weight:800;}
.skip-link:focus {top:12px;}
/* Header */
.site-header {
    position: sticky;top:0;z-index:120;
    border-bottom: 1px solid rgba(232,220,255,.11);
    background: rgba(14,17,30,.91);
    backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);
}
.site-header .header-grid {min-height:84px;gap:18px;flex-wrap:nowrap;}
.header-identity {display:flex;align-items:center;gap:14px;min-width:0;flex-shrink:0;}
.brand {display:inline-flex;align-items:center;gap:11px;padding:0;font-size:1.35rem;line-height:1.1;white-space:nowrap;letter-spacing:-.06em;}
.brand-mark {display:inline-grid;place-items:center;width:43px;height:43px;flex:none;border-radius:15px;
    background:linear-gradient(145deg,#f5b3cb,#b8a0ff);color:#1c1533;font-size:1.68rem;font-weight:900;
    box-shadow: 0 7px 25px rgba(170,130,255,.24);
}
.brand-copy {display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;}
.brand-name {font-weight:850;color:#fff;letter-spacing:-.055em;line-height:1.08;}
.brand-name > span:first-child {color:#d4c5ff;}
.brand-dot,.footer-brand > span:last-child {color:#ffa1bd;}
/* Keep the tagline connected to the brand, even on narrow screens. */
.brand-tagline {display:block;color:#d7c4f0;font-size:.81rem;font-weight:600;line-height:1.2;letter-spacing:.007em;white-space:nowrap;}
.lang-switch {margin:0 0 0 1px;display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03);font-size:1rem;}
.nav-links {display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:4px;flex:1;min-width:0;padding:0;}
.nav-links a {min-height:40px;padding:9px 11px;border:1px solid transparent;background:none;box-shadow:none;border-radius:12px;color:#c2c9de;font-size:.84rem;font-weight:700;white-space:nowrap;letter-spacing:0;}
.nav-links a:hover {transform:none;background:rgba(196,171,255,.10);border-color:rgba(196,171,255,.10);color:#fff;}
.nav-links a.active {background:rgba(188,166,255,.13);border:1px solid rgba(206,183,255,.17);color:#e9ddff;box-shadow:none;}
.nav-links .nav-cta, .nav-links .nav-cta.active {padding-inline:16px;min-height:43px;color:#211a30;background:linear-gradient(120deg,#d4baff,#ffa9c2);border:0;box-shadow:0 7px 24px rgba(175,117,219,.18);}
.nav-links .nav-cta:hover {background:linear-gradient(120deg,#e0caff,#ffc2d2);color:#211a30;}
.nav-toggle {display:none;}
.header-utilities {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding-block:8px;}
.header-utilities #intro-line {margin:0;min-height:0;padding:0;text-align:left;font-size:.84rem;font-weight:500;letter-spacing:.01em;line-height:1.5;color:#b3accd;}
.header-app-tools {display:flex;align-items:center;justify-content:flex-end;gap:10px;}
#installPWA.hero-install-btn {margin:0;padding:9px 15px;min-height:37px;border:1px solid rgba(187,163,241,.17);border-radius:11px;background:rgba(191,170,245,.07);box-shadow:none;color:#c8c0df;font-size:.8rem;}
#installPWA.hero-install-btn:hover {transform:none;background:rgba(191,170,245,.16);}
.ios-install-hint {position:relative;margin:0;z-index:5;max-width:370px;}
.main-content {padding:14px 0 20px;min-height:35vh;}
.flash {max-width:100%;margin-bottom:18px;border-radius:16px;}
/* Hero */
.hero-grid {margin-bottom:26px;}
.hero-card {
    isolation:isolate;position:relative;overflow:hidden;padding:clamp(24px,4.4vw,56px);
    border-radius:32px;border:1px solid rgba(212,190,255,.21);
    background:radial-gradient(circle at 85% 35%,rgba(128,80,195,.2),transparent 39%),
               radial-gradient(circle at 0 100%,rgba(223,110,146,.12),transparent 50%),
               linear-gradient(110deg,#21213d,#211c34 56%,#25203c 100%);
    box-shadow:0 24px 85px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-card::after {content:"";position:absolute;inset:auto -60px -210px 60%;height:400px;border:1px solid rgba(255,255,255,.06);border-radius:50%;pointer-events:none;}
.hero-eyebrow,.section-eyebrow,.trivia-kicker {display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:#ebc4de;}
.hero-eyebrow {margin-bottom:24px;letter-spacing:.11em;}
.live-dot {width:8px;height:8px;flex:none;background:#ffb6cc;border-radius:50%;box-shadow:0 0 0 4px rgba(255,171,206,.13);}
.hero-feature {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);gap:25px;align-items:center;}
.hero-story {z-index:1;position:relative;}
.hero-card h1 {margin:0 0 21px;max-width:620px;font-size:clamp(2.65rem,5.2vw,5rem);line-height:1.07;font-weight:800;color:#fcf9ff;text-shadow:none;letter-spacing:-.07em;}
.hero-card .hero-highlight {display:block;color:#eab1cf;font-family:Georgia,"Times New Roman",serif;font-size:1.05em;font-weight:500;font-style:italic;letter-spacing:-.06em;}
.hero-card p {max-width:570px;font-size:clamp(.97rem,1.3vw,1.09rem);line-height:1.75;color:#cfcbe1;margin-bottom:0;}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:28px;}
.hero-actions .button {gap:13px;min-height:51px;padding:13px 21px;border-radius:14px;}
.hero-actions .hero-primary {background:linear-gradient(115deg,#e4b8ff,#ffc2ce);color:#271e38;box-shadow:0 8px 26px rgba(194,124,199,.19);}
.hero-actions .hero-secondary {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#ede7ff;}
.hero-art {position:relative;height:310px;display:grid;place-items:center;}
.hero-art::before {content:"";width:245px;height:245px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-12deg);background:linear-gradient(142deg,#ddbafa,#f7adbe 80%);border-radius:45% 55% 51% 49% / 48% 42% 58% 52%;box-shadow:0 30px 70px rgba(155,103,200,.16);}
.hero-art-orbit {position:absolute;border:1px solid rgba(245,218,255,.16);border-radius:50%;width:340px;height:255px;transform:rotate(-31deg);}
.hero-art-orbit-two {width:280px;height:340px;transform:rotate(41deg);}
.hero-art-center {position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;text-align:center;justify-content:center;color:#27203a;transform:rotate(-7deg);}
.hero-art-center > span {height:45px;font:700 5rem/1 Georgia,serif;color:#7f527a;}
.hero-art-center strong {font:italic 600 clamp(1.22rem,2vw,1.75rem)/1.18 Georgia,serif;letter-spacing:-.03em;}
.hero-art-center small {margin-top:15px;color:#664e70;font-size:.78rem;font-weight:700;letter-spacing:.01em;}
.hero-art-star {position:absolute;right:10%;top:12%;font-size:3rem;color:#ffa9c9;transform:rotate(17deg);}
.hero-card .stats-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:35px;padding-top:22px;border-top:1px solid rgba(238,221,255,.13);}
.hero-card .stat-box {position:relative;min-height:78px;padding:6px 14px 6px 0;align-items:flex-start;text-align:left;gap:3px;border:0;background:none;border-radius:0;}
.hero-card .stat-box strong {display:block;min-width:0;height:auto;padding:0;background:none;border:0;box-shadow:none;font-size:clamp(1.22rem,2.25vw,1.85rem);font-weight:850;letter-spacing:-.045em;}
.hero-card .stat-box span:last-child {font-size:.77rem;color:#b9b5d0;}
.hero-card .stat-lock {right:12px;top:1px;}
.hero-card .stat-card-link {min-height:0;box-shadow:none;}
.hero-card .stat-card-link:hover {background:rgba(255,255,255,.03);box-shadow:none;transform:none;}
/* Main feed layout */
.content-grid {grid-template-columns:minmax(0,1.83fr) minmax(250px,.78fr);gap:25px;align-items:start;}
.content-main,.sidebar {min-width:0;}
.status-helper-box {border-color:rgba(177,162,235,.18);background:linear-gradient(120deg,rgba(73,65,105,.42),rgba(31,37,56,.98));}
.status-helper-content {gap:15px;}
.status-helper-icon-wrap {background:rgba(203,174,255,.14);border-color:rgba(203,174,255,.16);}
.status-helper-label {font-weight:800;color:#eac6e2;}
.status-helper-button {white-space:nowrap;}
.filter-card {padding:23px;margin-bottom:22px;}
.filter-heading {display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px;}
.filter-heading h2 {margin:4px 0 0!important;font-size:1.42rem;line-height:1.2;}
.filter-hint {color:#909ebc;font-size:.79rem;}
.filters {grid-template-columns:minmax(150px,.85fr) minmax(140px,1.2fr) auto;gap:10px;}
input,select,textarea {min-width:0;padding:12px 14px;border:1px solid rgba(203,209,244,.16);border-radius:12px;background:#101727;color:#f7f5ff;}
input::placeholder,textarea::placeholder {color:#919ab7;opacity:1;}
input:focus,select:focus,textarea:focus {outline:none;border-color:#bba4f6;box-shadow:0 0 0 3px rgba(188,163,255,.12);}
input[type="checkbox"],input[type="radio"] {accent-color:#b4a0fd;}
.button,.action-button {padding:11px 18px;min-height:44px;border:1px solid transparent;border-radius:12px;background:linear-gradient(110deg,#cfafff,#eeaac7);box-shadow:0 8px 22px rgba(117,83,173,.13);color:#241b32;font-weight:800;line-height:1.35;}
.button:hover,.action-button:hover {opacity:1;filter:brightness(1.07);transform:translateY(-1px);}
.button-secondary {background:#2b314a;color:#ede8ff;border-color:rgba(216,206,255,.13);box-shadow:none;}
.button-ghost {background:rgba(255,255,255,.045);color:#e9e1fb;border:1px solid var(--border);box-shadow:none;}
.button-danger {background:#ad3d5b;color:#fff;}
.button-small {min-height:37px;padding:8px 13px;}
.category-bar {padding:13px;gap:8px;border-radius:18px;}
.category-chip {padding:9px 13px;border-radius:10px;font-size:.83rem;white-space:nowrap;}
.category-chip.active {background:linear-gradient(135deg,#d7bafa,#f1abc9)!important;border-color:transparent!important;color:#241a36!important;}
.spotlight-card {padding:27px;background:linear-gradient(132deg,#342643 0%,#242340 55%,#1b253b 100%);border-color:rgba(220,175,234,.19);}
.spotlight-card h2 {color:#f4d2ea;font-size:1.22rem;}
.spotlight-text {line-height:1.7;}
.whisper-feed {grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:18px;}
.whisper-card {min-height:270px;border-radius:21px;background:linear-gradient(145deg,#1c2536,#181d31);border:1px solid rgba(224,216,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.13);}
.whisper-card:nth-child(4n+2) {background:linear-gradient(146deg,#25213a,#1c1f33);}
.whisper-card:nth-child(4n+3) {background:linear-gradient(146deg,#1c2635,#1d2332);}
.whisper-card::before {content:"“";position:absolute;right:17px;top:25px;font:700 6rem/1 Georgia,serif;color:rgba(220,191,255,.06);pointer-events:none;}
.whisper-card:hover {transform:translateY(-3px);border-color:rgba(226,196,255,.31);box-shadow:0 23px 53px rgba(0,0,0,.23);}
.whisper-card-link {min-height:270px;padding:20px;}
.whisper-body {padding:20px 4px;}
.whisper-name {font-size:.85rem;color:#f1bfdc;letter-spacing:.02em;text-shadow:none;}
.whisper-text {font-size:clamp(1rem,1.5vw,1.24rem);font-weight:650;line-height:1.47;letter-spacing:-.015em;}
.whisper-meta {font-size:.75rem;}
.whisper-category,.category-chip,.pill {border-width:1px;border-radius:999px;font-size:.76rem;}
.whisper-date {font-size:.74rem;padding:6px 3px;}
.whisper-stats {grid-template-columns:repeat(4,auto);gap:5px;}
.whisper-stats span {font-size:.71rem;padding:5px 6px;border:0;border-radius:7px;background:rgba(255,255,255,.04);}
.sidebar {position:sticky;top:105px;max-height:calc(100vh - 115px);overflow:auto;scrollbar-width:thin;scrollbar-color:#5c4d7b transparent;}
.sidebar-card {padding:22px;}
.sidebar-card h2 {font-size:1.15rem;}
.list-link {display:block;padding:12px 4px;border-bottom:1px solid rgba(225,211,255,.09);color:#d4d7e8;line-height:1.55;transition:color .15s ease, padding .15s ease;}
.list-link:hover {color:#ffd1e3;padding-left:8px;}
.pagination {display:flex;flex-wrap:wrap;gap:8px;padding:14px;}
.page-link {border-radius:10px;}
.load-more-wrap {margin-block:20px;}
/* Detail, comments, admin and forms */
.secret-single-card {padding:clamp(23px,4vw,45px);border-radius:27px;}
.secret-single-card h1 {font-size:clamp(1.55rem,3.2vw,2.45rem);line-height:1.17;}
.secret-body {font-size:clamp(1rem,1.45vw,1.16rem);line-height:1.9;overflow-wrap:anywhere;}
.breadcrumbs {margin-bottom:17px;flex-wrap:wrap;}
.reaction-row {gap:10px;flex-wrap:wrap;}
.comment-item,.moderation-item,.admin-mini-card,.admin-user-card {border-radius:17px;}
textarea {min-height:135px;resize:vertical;}
.secret-form .grid-two {gap:13px;}
.secret-form label {font-weight:700;color:#eae6f7;}
.secret-label small,.comment-label small {font-weight:500;font-size:.75rem;color:#aebad1;opacity:1;}
.secret-form input,.secret-form select {min-height:48px;border-radius:11px;}
.secret-form select,.secret-form select option,.secret-form select optgroup {background-color:#151b2c!important;color:#f6f3ff!important;}
.secret-textarea-wrapper textarea {padding:15px!important;min-height:160px;}
.secret-textarea-wrapper .char-counter,.comment-textarea-wrapper .char-counter {position:static;display:table;width:fit-content;margin:8px 0 0 auto;padding:5px 11px;background:rgba(210,192,250,.08);box-shadow:none;}
.admin-bar {flex-wrap:wrap;gap:12px;}
.admin-stats {margin-block:18px;}
.admin-tab {border-radius:12px;}
.admin-tab.active {background:rgba(204,170,255,.16);color:#f2e2ff;}
/* Compact moderation sign-in, isolated to the sign-in page. */
.admin-login-card {width:min(100%,430px);max-width:430px;margin:18px auto 30px;padding:24px 26px;}
.admin-login-card h1 {margin:0;font-size:clamp(1.55rem,3vw,1.85rem);line-height:1.2;}
.admin-login-card .secret-form {display:grid;gap:13px;margin:19px 0 0;}
.admin-login-card .admin-login-field {display:grid;gap:6px;}
.admin-login-card .admin-login-field label {margin:0;font-size:.85rem;line-height:1.4;font-weight:700;color:#e6e1f3;}
.admin-login-card .admin-login-field input {width:100%;height:43px;min-height:43px;padding:0 13px;border-radius:12px;font-size:.95rem;}
.admin-login-card .remember-check {display:inline-flex;align-items:center;gap:9px;margin:0;font-size:.84rem;font-weight:600;line-height:1.5;color:#d3cee1;}
.admin-login-card .remember-check input[type="checkbox"] {width:17px;height:17px;min-height:0;flex:0 0 17px;margin:0;padding:0;accent-color:#c8a6ff;cursor:pointer;}
.admin-login-card .admin-login-submit {min-height:45px;width:100%;padding:10px 14px;border-radius:12px;font-size:.94rem;font-weight:800;}
.admin-login-card .admin-login-divider {margin:1px 0 0;}
.admin-login-card .admin-login-info-inline {display:flex;align-items:flex-start;gap:10px;margin:0;padding:1px 0 0;background:transparent;border-radius:0;}
.admin-login-card .admin-login-info-icon {width:29px;height:29px;border-radius:9px;font-size:.82rem;}
.admin-login-card .admin-login-info-title {margin:0 0 3px;font-size:.82rem;line-height:1.3;}
.admin-login-card .admin-login-info-inline p {margin:0;color:#bac2d6;font-size:.77rem;line-height:1.5;}
.status-page-wrap {margin-inline:auto;}
.flash,.status-result-card,.status-form-card {border-radius:20px;}
/* Shared overlays: smooth, responsive, scroll independently, dialog always above sticky header */
body.modal-open {overflow:hidden;}
.secret-modal,.confirm-modal {z-index:1000;overscroll-behavior:contain;align-items:center;justify-content:center;padding:18px;}
.secret-modal::before,.confirm-modal-backdrop {background:rgba(7,10,20,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.secret-modal-content,.confirm-modal-content {
    border:1px solid rgba(230,207,255,.23);background:linear-gradient(155deg,#22243d 0,#161e30 65%,#171a2e 100%);
    box-shadow:0 28px 110px rgba(0,0,0,.58);border-radius:25px;
}
.secret-modal-content {width:min(100%,735px);max-height:min(90dvh,850px);padding:clamp(20px,3.2vw,34px);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#69587d transparent;}
.secret-modal-head {padding-right:46px;}
.secret-modal-badge {display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:rgba(228,166,216,.1);border:1px solid rgba(245,182,222,.16);color:#f8c5e6;border-radius:999px;}
.secret-modal-head h2 {font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.045em;}
.secret-modal-subtitle {color:#bbc3d7;}
.modal-close,.confirm-modal-close {z-index:3;width:40px;height:40px;border:1px solid rgba(236,220,255,.16);background:#30334b;color:#fff;border-radius:13px;}
.modal-close:hover,.confirm-modal-close:hover {background:#454361;}
.secret-form-actions {border-top:1px solid rgba(230,209,255,.11);padding-top:17px;margin-top:0;}
.secret-form-actions .button {min-height:48px;}
.trust-mini {margin-top:16px;padding-top:11px;text-align:center;font-size:.78rem;}
.confirm-modal-content {width:min(100%,475px);max-height:90dvh;overflow:auto;padding:30px 25px 24px;}
.confirm-modal-icon {width:60px;height:60px;font-size:27px;}
.confirm-modal-actions {gap:10px;}
.confirm-modal-actions .button {min-width:0;flex:1;}
/* Trust & footer */
.trust-section {padding:35px 0 4px;}
.trust-grid {gap:16px;}
.trust-card {border:1px solid rgba(231,218,255,.11);background:linear-gradient(143deg,#1a2031,#151b2b);border-radius:21px;box-shadow:none;}
.trust-card:hover {transform:translateY(-2px);}
.trust-card h3 {font-size:1.08rem;}
.trust-icon {background:rgba(218,181,255,.10);border-radius:14px;}
.trust-section .trust-intro-line {font:italic 1.13rem/1.7 Georgia,serif;color:#d8c2da;text-align:center;}
.trust-links {text-align:center;}
.trust-links a {color:#d5bdfa;}
/* Spiderpiggy: simple static promo without scripts, frames or trackers */
.trivia-promo {position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;overflow:hidden;padding:clamp(23px,3.2vw,40px);margin-top:20px;margin-bottom:38px;border:1px solid rgba(212,186,255,.27);border-radius:24px;
    background:radial-gradient(circle at 95% 13%,rgba(253,153,169,.20),transparent 25%),linear-gradient(117deg,#252644,#2d2544 52%,#482c52);}
.trivia-promo-deco {position:absolute;right:20%;top:-88px;font-size:16rem;line-height:1;color:rgba(255,202,233,.08);transform:rotate(23deg);pointer-events:none;}
.trivia-promo-content {position:relative;z-index:1;max-width:670px;}
.trivia-kicker {margin-bottom:10px;color:#ffc5e1;}
.trivia-promo h2 {margin:0 0 7px;font-size:clamp(1.4rem,2.5vw,2.15rem);line-height:1.22;}
.trivia-promo h2 span {color:#efb7da;}
.trivia-promo p {margin:0;font-size:.91rem;color:#c9c9e0;}
.trivia-promo code {padding:2px 6px;color:#ffe0ed;border-radius:5px;background:rgba(255,255,255,.09);}
.trivia-promo-button {position:relative;z-index:1;display:inline-flex;justify-content:center;align-items:center;gap:22px;min-height:50px;padding:11px 18px;border-radius:13px;background:#f1d4ff;color:#251934;font-weight:850;white-space:nowrap;transition:transform .18s,background .18s;}
.trivia-promo-button:hover {background:#fff1ff;transform:translateY(-2px);}
.site-footer {margin-top:0;padding:42px 0 28px;background:#0b0e18;border-top:1px solid rgba(229,205,255,.13);}
.footer-heading {display:flex;align-items:center;gap:20px;justify-content:space-between;padding-bottom:25px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09);}
.footer-brand {display:inline-flex;align-items:center;gap:11px;color:#fff;font-size:1.28rem;font-weight:850;letter-spacing:-.045em;}
.footer-brand .brand-mark {width:35px;height:35px;border-radius:12px;font-size:1.3rem;}
.footer-heading p {color:#a9aec3;font-size:.84rem;}
.site-footer .footer-inner {align-items:center;gap:20px;}
.footer-left {display:flex;flex-flow:row wrap;align-items:center;gap:8px;}
.footer-badge,.footer-credit,.footer-right {background:rgba(255,255,255,.035);border:1px solid rgba(228,209,255,.09);border-radius:11px;box-shadow:none;font-size:.77rem;padding:8px 11px;}
.footer-right {white-space:nowrap;}
.site-toast {z-index:1200;border:1px solid rgba(236,200,253,.2);}
/* Responsive: keep real content above the fold and avoid sideways scrolling */
@media (max-width:1180px) {
    .nav-links a {padding-inline:9px;font-size:.79rem;}
    .hero-art {height:285px;}
}
@media (max-width:970px) {
    .wrap {width:min(var(--page-max),calc(100% - 36px));}
    .site-header .header-grid {min-height:69px;flex-direction:column;align-items:stretch;gap:0;}
    .header-identity {width:100%;min-height:69px;}
    .header-identity .lang-switch {margin-left:auto;}
    .nav-toggle {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:2px;border:1px solid rgba(234,218,255,.17);border-radius:13px;background:rgba(255,255,255,.05);cursor:pointer;}
    .nav-toggle span {display:block;width:19px;height:2px;border-radius:2px;background:#f3eaff;transition:transform .2s,opacity .2s;}
    .nav-toggle[aria-expanded="true"] span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
    .nav-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0;}
    .nav-toggle[aria-expanded="true"] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
    .nav-links {display:none;flex-direction:column;align-items:stretch;gap:4px;flex:initial;width:100%;padding:6px 0 16px;max-height:calc(100dvh - 72px);overflow-y:auto;}
    .nav-links.is-expanded {display:flex;}
    .nav-links a {width:100%;min-height:44px;padding:11px 14px;justify-content:flex-start;text-align:left;font-size:.9rem;}
    .nav-links .nav-cta {justify-content:center;}
    .header-utilities {min-height:49px;}
    .hero-card {padding:32px;}
    .hero-feature {grid-template-columns:minmax(0,1fr) minmax(210px,.72fr);}
    .hero-art {height:250px;}
    .hero-art::before {width:185px;height:185px;}
    .hero-art-orbit {width:235px;height:170px;}
    .hero-art-orbit-two {width:210px;height:245px;}
    .hero-art-center strong {font-size:1.15rem;}
    .hero-art-center > span {height:33px;font-size:3.9rem;}
    .hero-art-star {right:0;}
    .content-grid {grid-template-columns:minmax(0,1fr) minmax(225px,.43fr);gap:17px;}
    .whisper-feed {grid-template-columns:1fr;}
    .whisper-card,.whisper-card-link {min-height:220px;}
    .filters {grid-template-columns:1fr;}
    .filter-card .filters .button {width:100%;}
    .whisper-stats {grid-template-columns:repeat(4,auto);}
}
@media (max-width:720px) {
    .wrap {width:calc(100% - 28px);}
    .header-utilities {align-items:flex-start;flex-direction:column;gap:5px;padding-block:11px;}
    .header-utilities #intro-line {font-size:.78rem;}
    #installPWA.hero-install-btn {min-height:34px;padding:7px 12px;}
    .main-content {padding-top:8px;}
    .hero-grid {margin-bottom:17px;}
    .hero-card {padding:26px 22px;border-radius:23px;}
    .hero-eyebrow {font-size:.62rem;letter-spacing:.08em;margin-bottom:17px;}
    .hero-feature {display:block;}
    .hero-card h1 {font-size:clamp(2.25rem,8.9vw,3.8rem);}
    .hero-card p {font-size:.96rem;line-height:1.67;}
    .hero-art {display:none;}
    .hero-actions {margin-top:22px;}
    .hero-actions .button {min-height:47px;}
    .hero-card .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;margin-top:22px;padding-top:15px;}
    .hero-card .stat-box {min-height:50px;padding:3px 8px 3px 0;}
    .hero-card .stat-box strong {font-size:1.36rem;}
    .content-grid {display:flex;flex-direction:column;gap:18px;}
    .content-main,.sidebar {width:100%;}
    .sidebar {position:static;overflow:visible;max-height:none;display:grid;grid-template-columns:1fr;gap:13px;}
    .content-grid .sidebar .card + .card {margin-top:0;}
    .whisper-feed {grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
    .whisper-card,.whisper-card-link {min-height:238px;}
    .whisper-card-link {padding:15px;}
    .whisper-stats {grid-template-columns:repeat(2,auto);}
    .trivia-promo {display:flex;flex-direction:column;align-items:stretch;gap:20px;margin-top:18px;margin-bottom:28px;padding:25px 22px;}
    .trivia-promo-button {width:100%;}
    .footer-heading {align-items:flex-start;flex-direction:column;gap:5px;}
    .footer-heading p {margin:0;}
    .footer-inner {align-items:flex-start!important;}
    .footer-left {flex-wrap:wrap;}
    .trust-grid {grid-template-columns:1fr;}
    .trust-card {padding:22px;}
    /* Modal bottom-sheet with internal scrolling, avoids body scrolling or cut-off actions */
    .secret-modal {align-items:flex-end;padding:0;}
    .secret-modal-content {width:100%;max-width:100%;max-height:calc(100dvh - 12px);margin:0;border-radius:24px 24px 0 0;padding:23px 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;}
    .secret-modal-head {padding-right:42px;}
    .secret-form .grid-two {grid-template-columns:1fr;gap:11px;}
    .secret-form textarea {min-height:125px;}
    .secret-form-actions {flex-direction:column-reverse;}
    .secret-form-actions .button {width:100%;}
    .confirm-modal {align-items:center;padding:12px;}
    .confirm-modal-content {width:100%;padding:25px 18px 20px;border-radius:21px;}
    .confirm-modal-actions {flex-direction:column;}
    .confirm-modal-actions .button {width:100%;}
}
@media (max-width:510px) {
    .wrap {width:calc(100% - 22px);}
    .brand {gap:8px;font-size:1.22rem;}
    .brand-mark {width:38px;height:38px;border-radius:12px;font-size:1.4rem;}
    .brand-copy {gap:3px;}
    .brand-tagline {font-size:.8rem;line-height:1.2;}
    .admin-login-card {margin:13px auto 24px;padding:21px 19px;}
    .admin-login-card h1 {font-size:1.55rem;}
    .admin-login-card .secret-form {margin-top:16px;gap:12px;}
    .header-identity {gap:8px;}
    .hero-card {padding:23px 19px;}
    .hero-card h1 {font-size:clamp(2.1rem,10vw,2.75rem);}
    .hero-actions {flex-direction:column;align-items:stretch;}
    .hero-actions .button {width:100%;}
    .card {border-radius:19px;}
    .filter-card {padding:17px;}
    .filter-hint {display:none;}
    .category-bar {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;}
    .category-bar .category-chip {flex:0 0 auto;scroll-snap-align:start;}
    .whisper-feed {grid-template-columns:1fr;gap:13px;}
    .whisper-card,.whisper-card-link {min-height:220px;}
    .whisper-card-link {padding:17px;}
    .whisper-body {padding:17px 3px;}
    .whisper-stats {grid-template-columns:repeat(4,auto);}
    .whisper-text {font-size:1.1rem;}
    .status-helper-content {grid-template-columns:1fr;}
    .status-helper-button {width:100%;}
    .footer-badge,.footer-credit,.footer-right {font-size:.76rem;}
    .footer-badge {border-radius:11px;}
    .footer-right {width:auto;}
    .pagination {justify-content:center;}
    .secret-single-card {padding:21px 18px;}
    .admin-bar,.admin-tabs {overflow-wrap:anywhere;}
    .admin-tabs {display:flex;flex-wrap:wrap;}
    .admin-tab {max-width:100%;}
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* English brand copy can be wider than its Dutch counterpart. */
@media (max-width:370px) { .brand {font-size:1.13rem;gap:7px;} .header-identity {gap:6px;} .brand-mark {width:35px;height:35px;font-size:1.3rem;} .brand-tagline {font-size:.68rem;} .lang-switch {width:30px;height:30px;flex-shrink:0;} }

/* Compact navigation and modal editor | 21 October 2026
   Voorkomt dat links op smalle, liggende schermen uitrekken. */
.secret-modal .secret-form #modal-secret-text {
    display: block;
    height: 118px;
    min-height: 118px;
    resize: vertical;
}

@media (max-width: 970px) {
    .site-header .header-grid { position: relative; }
    /* Dropdown floats over the page instead of stretching the header. */
    .site-header .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-height: calc(100dvh - 82px);
        margin: 0;
        padding: 10px;
        gap: 5px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(220,200,255,.20);
        border-radius: 0 0 18px 18px;
        background: #171b2d;
        box-shadow: 0 20px 45px rgba(0,0,0,.36);
        flex: none;
    }
    .site-header .nav-links a,
    .site-header .nav-links .nav-cta {
        box-sizing: border-box;
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 42px;
        padding: 10px 14px;
        margin: 0;
        justify-content: flex-start;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
        font-size: .88rem;
        line-height: 1.4;
    }
    .site-header .nav-links .nav-cta {
        justify-content: center;
        text-align: center;
        min-height: 45px;
        margin-top: 5px;
    }
}
@media (max-width: 720px) {
    .secret-modal .secret-form #modal-secret-text {height: 108px; min-height: 108px;}
}
@media (max-width: 970px) and (orientation: landscape) and (max-height: 500px) {
    .site-header .nav-links {gap: 3px; padding: 7px; max-height: calc(100dvh - 76px);}
    .site-header .nav-links a {min-height: 38px; padding: 8px 12px;}
    .site-header .nav-links .nav-cta {min-height: 42px; margin-top: 3px;}
    .secret-modal .secret-form #modal-secret-text {height: 94px; min-height: 94px;}
}