/* ============================================================
   PhotoRate — "The Gallery" design system
   Jewel-tone palette (emerald/teal + champagne gold) on a warm
   neutral canvas, with dark ink "stage" panels for photos.
   Layered on top of Bootstrap 5.3.
   ============================================================ */

:root {
    /* Canvas & surfaces */
    --pr-canvas:      #f4f3ef;   /* warm neutral page background */
    --pr-surface:     #ffffff;   /* cards, panels */
    --pr-surface-2:   #faf9f6;   /* subtle alt surface */
    --pr-ink:         #15161b;   /* near-black ink (text + dark stage) */
    --pr-ink-2:       #1d1f27;   /* raised dark surface */
    --pr-muted:       #6b6f7b;   /* secondary text */
    --pr-line:        #e6e4dd;   /* hairline borders */
    --pr-bg:          var(--pr-bg);   /* social app background */
    --pr-border:      var(--pr-border);   /* social hairlines */
    --pr-hover:       var(--pr-hover);   /* hover backgrounds */
    --pr-glass:       rgba(255,255,255,.92); /* sticky bars (blur) */

    /* Brand accents */
    --pr-accent:      #0f766e;   /* emerald-teal — primary action */
    --pr-accent-2:    #0b5c55;   /* hover */
    --pr-accent-soft: #d8efec;
    --pr-gold:        #d8a128;   /* champagne gold — stars, highlights */
    --pr-gold-2:      #f0c969;
    --pr-rose:        #b3334e;   /* danger / report */

    /* Effects */
    --pr-radius:      16px;
    --pr-radius-sm:   11px;
    --pr-shadow:      0 1px 2px rgba(16,18,24,.04), 0 8px 24px -12px rgba(16,18,24,.18);
    --pr-shadow-lg:   0 24px 60px -24px rgba(16,18,24,.45);

    /* Bootstrap overrides */
    --bs-primary:     #0f766e;
    --bs-primary-rgb: 15,118,110;
    --bs-body-color:  #20222a;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: var(--pr-radius-sm);
}

/* ---- Base ---------------------------------------------------------- */
body {
    background:
        radial-gradient(1200px 480px at 100% -10%, rgba(15,118,110,.06), transparent 60%),
        radial-gradient(900px 420px at -10% 0%, rgba(216,161,40,.07), transparent 55%),
        var(--pr-canvas);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3,
.navbar-brand, .stat-tile .h2, .pr-display {
    font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 700;
}

a { color: var(--pr-accent); text-decoration: none; }
a:hover { color: var(--pr-accent-2); text-decoration: underline; text-underline-offset: 3px; }

.text-muted { color: var(--pr-muted) !important; }

/* ---- Navbar -------------------------------------------------------- */
.app-nav {
    background: var(--pr-ink);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-top: .6rem; padding-bottom: .6rem;
    backdrop-filter: saturate(140%);
}
.app-nav .navbar-brand {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: 1.32rem; color: #fff;
}
.app-nav .navbar-brand .brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--pr-gold-2), var(--pr-gold));
    color: var(--pr-ink); font-size: 1.05rem; box-shadow: 0 4px 14px -4px rgba(216,161,40,.6);
}
.app-nav .navbar-brand .brand-logo { max-height: 38px; width: auto; display: block; }
.app-nav .nav-link {
    color: rgba(255,255,255,.74); font-weight: 500; border-radius: 8px;
    padding: .4rem .7rem !important; transition: color .12s, background .12s;
}
.app-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-nav .nav-link.text-info    { color: var(--pr-gold-2) !important; }
.app-nav .nav-link.text-warning { color: var(--pr-gold-2) !important; }
.app-nav .dropdown-menu {
    border: 1px solid var(--pr-line); border-radius: var(--pr-radius-sm);
    box-shadow: var(--pr-shadow); padding: .35rem;
}
.app-nav .dropdown-item { border-radius: 8px; font-weight: 500; padding: .5rem .7rem; }
.coin-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(216,161,40,.16); color: var(--pr-gold-2);
    border: 1px solid rgba(216,161,40,.28);
    padding: .32rem .7rem; border-radius: 999px; font-weight: 600; font-size: .85rem;
}

/* ---- Buttons ------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 10px; padding: .55rem 1.1rem; letter-spacing: -.01em; }
.btn-lg { padding: .8rem 1.5rem; border-radius: 12px; }
.btn-primary {
    --bs-btn-bg: var(--pr-accent); --bs-btn-border-color: var(--pr-accent);
    --bs-btn-hover-bg: var(--pr-accent-2); --bs-btn-hover-border-color: var(--pr-accent-2);
    --bs-btn-active-bg: var(--pr-accent-2); --bs-btn-active-border-color: var(--pr-accent-2);
    --bs-btn-disabled-bg: var(--pr-accent); --bs-btn-disabled-border-color: var(--pr-accent);
    box-shadow: 0 8px 20px -10px rgba(15,118,110,.7);
}
.btn-warning {
    --bs-btn-bg: var(--pr-gold); --bs-btn-border-color: var(--pr-gold);
    --bs-btn-hover-bg: #c08f1f; --bs-btn-hover-border-color: #c08f1f;
    --bs-btn-color: #1a1407; --bs-btn-hover-color: #1a1407;
}
.btn-outline-primary {
    --bs-btn-color: var(--pr-accent); --bs-btn-border-color: var(--pr-accent);
    --bs-btn-hover-bg: var(--pr-accent); --bs-btn-hover-border-color: var(--pr-accent);
}
.btn-outline-danger { --bs-btn-color: var(--pr-rose); --bs-btn-border-color: rgba(179,51,78,.45);
    --bs-btn-hover-bg: var(--pr-rose); --bs-btn-hover-border-color: var(--pr-rose); }
.btn-danger { --bs-btn-bg: var(--pr-rose); --bs-btn-border-color: var(--pr-rose);
    --bs-btn-hover-bg: #97283f; --bs-btn-hover-border-color: #97283f; }

/* ---- Cards & surfaces --------------------------------------------- */
.card {
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    background: var(--pr-surface);
    box-shadow: var(--pr-shadow);
}
.card.shadow-sm { box-shadow: var(--pr-shadow) !important; }
.badge { font-weight: 600; letter-spacing: -.01em; }
.alert { border-radius: var(--pr-radius-sm); border: 1px solid transparent; }
.form-control, .form-select {
    border-radius: 10px; border-color: var(--pr-line); padding: .6rem .8rem;
    background: var(--pr-surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--pr-accent);
    box-shadow: 0 0 0 .2rem rgba(15,118,110,.16);
}
.form-label { font-weight: 600; font-size: .9rem; color: #353842; }

/* ---- Hero ---------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(700px 300px at 88% -30%, rgba(216,161,40,.28), transparent 60%),
        linear-gradient(135deg, #16181f 0%, #14302c 130%);
    color: #fff; border-radius: calc(var(--pr-radius) + 6px);
    padding: clamp(2.2rem, 5vw, 3.6rem);
    box-shadow: var(--pr-shadow-lg);
}
.hero h1, .hero .display-4, .hero .display-5 { color: #fff; }
.hero .lead { color: rgba(255,255,255,.82); }
.hero .eyebrow {
    text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
    font-weight: 700; color: var(--pr-gold-2);
}
.hero .btn-light { --bs-btn-color: var(--pr-ink); font-weight: 700; }

/* ---- Stat tiles ---------------------------------------------------- */
.stat-tile {
    background: var(--pr-surface); border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius); padding: 1.3rem 1.4rem;
    box-shadow: var(--pr-shadow); height: 100%;
}
.stat-tile .label, .stat-tile .text-muted {
    text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
    font-weight: 700; color: var(--pr-muted);
}
.stat-tile .h2 { margin: .2rem 0 0; color: var(--pr-ink); font-size: 2rem; }
.stat-tile i { color: var(--pr-accent); }

/* ---- Picture cards (grids) ---------------------------------------- */
.picture-card { transition: transform .14s ease, box-shadow .14s ease; }
.picture-card:hover { transform: translateY(-3px); box-shadow: var(--pr-shadow-lg); }
.picture-card img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: var(--pr-radius-sm);
}

/* ============================================================
   THE RATE STAGE — signature element
   ============================================================ */
.rate-stage-wrap {
    background: var(--pr-ink);
    border-radius: calc(var(--pr-radius) + 4px);
    box-shadow: var(--pr-shadow-lg);
    overflow: hidden; border: 1px solid rgba(255,255,255,.06);
}
.rate-stage {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background:
        radial-gradient(620px 320px at 50% -8%, rgba(216,161,40,.16), transparent 70%);
    text-align: center; color: #fff;
}
.rate-stage .stage-photo {
    display: inline-block; position: relative; line-height: 0;
    border-radius: 14px; padding: 8px;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.rate-stage .stage-photo img {
    max-height: 56vh; width: auto; max-width: 100%;
    border-radius: 8px; display: block;
}
.rate-stage .stage-caption { color: #fff; margin-top: 1.1rem; font-size: 1.05rem; }
.rate-stage .stage-byline { color: rgba(255,255,255,.6); font-size: .85rem; }
.rate-stage hr { border-color: rgba(255,255,255,.12); }
.rate-stage .text-muted { color: rgba(255,255,255,.6) !important; }

/* Score readout (your rating + average) */
.score-readout { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: .25rem 0 1rem; }
.score-chip {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px; padding: .55rem .95rem; min-width: 110px;
    color: #fff;
}
.score-chip .k { display:block; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); font-weight: 700; }
.score-chip .v { font-size: 1.35rem; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; }
.score-chip .v .bi { color: var(--pr-gold-2); }
.score-chip.mine { border-color: rgba(216,161,40,.5); background: rgba(216,161,40,.12); }

/* Star widget — large, gold, on dark */
.star-rate { display: inline-flex; flex-direction: row-reverse; gap: .12rem; font-size: 2.1rem; }
.star-rate input { display: none; }
.star-rate label { color: rgba(255,255,255,.22); cursor: pointer; transition: color .1s, transform .1s; }
.star-rate label:hover { transform: scale(1.12); }
.star-rate label:hover,
.star-rate label:hover ~ label,
.star-rate input:checked ~ label { color: var(--pr-gold-2); }
.star-hint { color: rgba(255,255,255,.55); font-size: .8rem; }

/* Skip button on the stage */
.btn-skip {
    background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px; font-weight: 600; padding: .5rem 1.05rem;
}
.btn-skip:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Gem / special pills */
.gem-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.special-btn {
    border: 1.5px solid transparent; border-radius: 14px; padding: .6rem .9rem;
    background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
    transition: transform .1s, background .12s, box-shadow .12s; min-width: 96px;
}
.special-btn:hover:not(:disabled) { transform: translateY(-3px); background: rgba(255,255,255,.1); }
.special-btn:disabled { opacity: .42; cursor: not-allowed; }
.special-btn .gem-icon { font-size: 1.7rem; display: block; line-height: 1; margin-bottom: .15rem; }
.special-btn .gem-name { font-weight: 700; font-size: .92rem; }
.special-btn .gem-meta { font-size: .72rem; color: rgba(255,255,255,.6); display: block; }
.special-btn.used { position: relative; }
.special-btn.used::after {
    content: "given"; position: absolute; inset: auto 0 .35rem 0; text-align: center;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-gold-2);
}

/* ---- Rank badges --------------------------------------------------- */
.rank-badge {
    width: 2.1rem; height: 2.1rem; line-height: 2.1rem; text-align: center;
    border-radius: 10px; font-weight: 800; display: inline-block;
    font-family: 'Bricolage Grotesque', sans-serif;
}
.rank-1 { background: linear-gradient(150deg, var(--pr-gold-2), var(--pr-gold)); color: #1a1407; }
.rank-2 { background: linear-gradient(150deg, #e9eaee, #c2c5cc); color: #20222a; }
.rank-3 { background: linear-gradient(150deg, #e6a877, #c97c43); color: #2a1608; }

/* ---- Footer -------------------------------------------------------- */
footer.app-footer {
    border-top: 1px solid var(--pr-line); margin-top: 4rem; padding: 2.2rem 0;
    color: var(--pr-muted); font-size: .85rem;
}
footer.app-footer .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--pr-ink); }

/* ---- Misc ---------------------------------------------------------- */
.section-eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
    font-weight: 700; color: var(--pr-accent);
}
.modal-content { border: none; border-radius: var(--pr-radius); box-shadow: var(--pr-shadow-lg); }
.table { --bs-table-border-color: var(--pr-line); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Advertising slots --------------------------------------------- */
.ad-slot {
    margin: 1rem auto;
    text-align: center;
}
.ad-slot .ad-label {
    display: block;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-muted);
    margin-bottom: .25rem;
}
.ad-slot img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--pr-line);
}

/* ---- Admin two-column shell ---------------------------------------- */
.admin-shell { display: flex; gap: 1.5rem; align-items: flex-start; }
.admin-side {
    flex: 0 0 230px; width: 230px; position: sticky; top: 84px;
    background: var(--pr-surface); border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius); padding: .9rem; box-shadow: var(--pr-shadow);
}
.admin-side-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; margin-bottom: .6rem; color: var(--pr-ink); }
.admin-side-sub { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pr-muted); font-weight: 700; padding: .2rem .7rem; }
.admin-nav .nav-link {
    color: #3a3d47; border-radius: 9px; padding: .5rem .7rem; font-weight: 500;
    display: flex; align-items: center; gap: .55rem;
}
.admin-nav .nav-link:hover { background: var(--pr-surface-2); color: var(--pr-ink); }
.admin-nav .nav-link.active { background: var(--pr-accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(15,118,110,.7); }
.admin-main { flex: 1 1 auto; min-width: 0; }   /* min-width:0 lets wide tables scroll */

@media (max-width: 800px) {
    .admin-shell { flex-direction: column; }
    .admin-side { position: static; width: 100%; flex-basis: auto; }
    .admin-nav { flex-direction: row !important; flex-wrap: wrap; }
}

/* ---- Picture comments ---------------------------------------------- */
.comment-item { border-bottom: 1px solid var(--pr-line); padding: .7rem 0; }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.comment-avatar.placeholder { background: var(--pr-ink); color: var(--pr-gold-2); display: inline-flex; align-items: center; justify-content: center; }

/* ====================================================================
   SOCIAL LAYOUT (Twitter / VK / Instagram-style) — user-facing pages
   ==================================================================== */
body.is-social {
    background: var(--pr-bg);
    background-image: none;
}
.app-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 0 16px;
}

/* ---- Left rail (desktop) ---- */
.rail {
    flex: 0 0 250px; width: 250px;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    padding: 18px 10px 18px 4px;
}
.rail-brand {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
    font-size: 1.4rem; color: var(--pr-ink); padding: .35rem .7rem 1rem;
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
}
.rail-brand:hover { text-decoration: none; color: var(--pr-ink); }
.rail-brand .brand-mark {
    width: 34px; height: 34px; border-radius: 10px; background: var(--pr-ink);
    color: var(--pr-gold-2); display: inline-flex; align-items: center; justify-content: center;
}
.rail-brand .brand-logo { max-height: 38px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link {
    display: flex; align-items: center; gap: 1rem;
    padding: .72rem .9rem; border-radius: 999px;
    color: var(--pr-ink); font-weight: 500; font-size: 1.05rem; text-decoration: none;
    transition: background .15s ease;
}
.rail-link i { font-size: 1.3rem; }
.rail-link:hover { background: var(--pr-border); color: var(--pr-ink); text-decoration: none; }
.rail-link.active { font-weight: 700; }
.rail-link.active i { color: var(--pr-accent); }
.rail-cta {
    border-radius: 999px; font-weight: 700; padding: .7rem; margin: .9rem .4rem .4rem;
    font-size: 1.05rem;
}
.rail-foot { margin-top: auto; padding: .4rem; }
.rail-user {
    display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 999px;
    text-decoration: none; color: var(--pr-ink);
}
.rail-user:hover { background: var(--pr-border); color: var(--pr-ink); text-decoration: none; }
.rail-user.dropdown-toggle::after { margin-left: auto; }
.rail-avatar, .topbar-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.rail-avatar.placeholder, .topbar-avatar.placeholder {
    background: var(--pr-ink); color: var(--pr-gold-2);
    display: inline-flex; align-items: center; justify-content: center;
}
.topbar-avatar { width: 34px; height: 34px; }
.rail-user-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rail-user-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.rail-user-coins { font-size: .8rem; color: var(--pr-muted); }

/* ---- Main content column ---- */
.app-main {
    flex: 1 1 auto; min-width: 0; max-width: 920px;
    padding: 18px 0 110px;
    border-left: 1px solid var(--pr-border); border-right: 1px solid var(--pr-border);
    padding-left: 26px; padding-right: 26px;
}

/* ---- Mobile top bar + bottom tabs ---- */
.mobile-topbar { display: none; }
.bottom-tabs { display: none; }

@media (max-width: 991.98px) {
    .rail { display: none; }
    .app-shell { gap: 0; padding: 0; }
    .app-main {
        max-width: 100%; border: none; padding: 0 14px 92px;
    }
    .mobile-topbar {
        display: flex; align-items: center; gap: .5rem;
        position: sticky; top: 0; z-index: 1020;
        margin: 0 -14px 14px; padding: .55rem 14px;
        background: var(--pr-glass); backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--pr-border);
    }
    .mobile-brand {
        font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.2rem;
        color: var(--pr-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
    }
    .mobile-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--pr-ink); color: var(--pr-gold-2); display: inline-flex; align-items: center; justify-content: center; }
    .mobile-brand .brand-logo { max-height: 32px; }
    .mobile-brand .brand-word { display: none; }

    .bottom-tabs {
        display: flex; justify-content: space-around; align-items: center;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        background: var(--pr-glass); backdrop-filter: blur(10px);
        border-top: 1px solid var(--pr-border); padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom));
    }
    .bottom-tabs .tab {
        flex: 1; text-align: center; padding: .55rem 0; color: #6b6f7b; font-size: 1.45rem;
        text-decoration: none;
    }
    .bottom-tabs .tab.active { color: var(--pr-accent); }
    .bottom-tabs .tab-cta {
        color: #fff; background: var(--pr-accent); width: 50px; height: 50px; flex: 0 0 50px;
        border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        margin-top: -14px; box-shadow: 0 8px 18px -6px rgba(15,118,110,.7); font-size: 1.5rem;
    }
}

/* ---- Social card polish (applies app-wide) ---- */
.is-social .card {
    border: 1px solid var(--pr-border);
    border-radius: 16px;
}
.is-social .picture-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.is-social .picture-card:hover { transform: translateY(-2px); box-shadow: var(--pr-shadow-lg); }
.is-social .btn { border-radius: 999px; }
.is-social .badge { border-radius: 999px; }

/* ---- Private messages --------------------------------------------- */
.msg-thread { max-height: 60vh; overflow-y: auto; gap: .35rem; display: flex; flex-direction: column; }
.msg-row { display: flex; }
.msg-row.mine { justify-content: flex-end; }
.msg-bubble {
    max-width: 78%; padding: .5rem .8rem .95rem; border-radius: 16px; position: relative;
    background: var(--pr-border); color: var(--pr-ink); font-size: .95rem; line-height: 1.35;
}
.msg-row.mine .msg-bubble { background: var(--pr-accent); color: #fff; }
.msg-time { position: absolute; right: .6rem; bottom: .28rem; font-size: .62rem; opacity: .6; }
.msg-compose { display: flex; gap: .5rem; align-items: flex-end; }
.msg-compose textarea { flex: 1; border-radius: 16px; }
.msg-compose .btn { border-radius: 50%; width: 46px; height: 46px; flex: 0 0 46px; }
.min-w-0 { min-width: 0; }

.mobile-msg { position: relative; color: var(--pr-ink); font-size: 1.35rem; text-decoration: none; }
.mobile-msg-badge {
    position: absolute; top: -4px; right: -6px; background: var(--pr-rose); color: #fff;
    font-size: .6rem; min-width: 16px; height: 16px; border-radius: 9px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ---- Custom page editor -------------------------------------------- */
.pp-editor { border: 1px solid var(--pr-line); border-radius: 12px; overflow: hidden; background: #fff; }
.pp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; background: var(--pr-surface-2); border-bottom: 1px solid var(--pr-line); }
.pp-toolbar button {
    border: 1px solid transparent; background: transparent; border-radius: 7px;
    min-width: 32px; height: 30px; padding: 0 7px; cursor: pointer; color: var(--pr-ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1;
}
.pp-toolbar button:hover { background: var(--pr-hover); }
.pp-sep { width: 1px; height: 20px; background: var(--pr-line); margin: 0 4px; }
.pp-content { min-height: 300px; max-height: 60vh; overflow-y: auto; padding: 14px 16px; outline: none; }
.pp-content:focus { box-shadow: inset 0 0 0 2px var(--pr-accent-soft); }
.pp-content img { max-width: 100%; height: auto; border-radius: 8px; }
.pp-content blockquote { border-left: 3px solid var(--pr-accent); margin: .5rem 0; padding: .25rem .9rem; color: var(--pr-muted); }
.pp-content h2, .pp-content h3 { font-family: 'Bricolage Grotesque', sans-serif; }
.pp-source { width: 100%; min-height: 300px; border: 0; padding: 14px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; outline: none; resize: vertical; }

/* ---- Static page body rendering ------------------------------------ */
.static-page .page-body img { max-width: 100%; height: auto; border-radius: 10px; }
.static-page .page-body { line-height: 1.65; }

/* ===================================================================
   THEMES — color presets + dark mode (applied via <html data-theme>)
   Light presets only swap the accent; dark also pairs with
   data-bs-theme="dark" so Bootstrap recolors its components.
   =================================================================== */
[data-theme="indigo"] { --pr-accent:#4f46e5; --pr-accent-2:#4338ca; --pr-accent-soft:#e0e7ff; --bs-primary:#4f46e5; --bs-primary-rgb:79,70,229; }
[data-theme="violet"] { --pr-accent:#7c3aed; --pr-accent-2:#6d28d9; --pr-accent-soft:#ede9fe; --bs-primary:#7c3aed; --bs-primary-rgb:124,58,237; }
[data-theme="rose"]   { --pr-accent:#e11d48; --pr-accent-2:#be123c; --pr-accent-soft:#ffe4e6; --bs-primary:#e11d48; --bs-primary-rgb:225,29,72; }
[data-theme="amber"]  { --pr-accent:#d97706; --pr-accent-2:#b45309; --pr-accent-soft:#fef3c7; --bs-primary:#d97706; --bs-primary-rgb:217,119,6; }
[data-theme="ocean"]  { --pr-accent:#0284c7; --pr-accent-2:#0369a1; --pr-accent-soft:#e0f2fe; --bs-primary:#0284c7; --bs-primary-rgb:2,132,199; }

[data-theme="dark"] {
    --pr-canvas:#0f1115; --pr-bg:#0f1115; --pr-surface:#171a21; --pr-surface-2:#1d2129; --pr-ink-2:#1d2129;
    --pr-ink:#e8eaed; --pr-muted:#9aa0aa; --pr-line:#2a2f3a; --pr-border:#262b34; --pr-hover:#222732;
    --pr-glass:rgba(18,20,26,.9);
    --pr-accent:#14b8a6; --pr-accent-2:#0d9488; --pr-accent-soft:#0e3a37;
    --bs-primary:#14b8a6; --bs-primary-rgb:20,184,166; --bs-body-color:#e8eaed;
}
/* Smooth the switch */
body, .card, .rail, .app-main, .mobile-topbar, .bottom-tabs, .pp-editor { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

/* ---- Theme picker (offcanvas) -------------------------------------- */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.theme-swatch {
    border:2px solid var(--pr-border); background:var(--pr-surface); border-radius:14px;
    padding:.7rem .4rem .55rem; cursor:pointer; text-align:center; transition:border-color .15s, transform .1s;
    color:var(--pr-ink); display:flex; flex-direction:column; align-items:center; gap:.45rem;
}
.theme-swatch:hover { transform:translateY(-2px); }
.theme-swatch.active { border-color:var(--pr-accent); }
.theme-swatch .dot {
    width:34px; height:34px; border-radius:50%;
    box-shadow:0 2px 8px -2px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.6);
}
.theme-swatch .nm { font-size:.78rem; font-weight:600; }
.theme-swatch .dot.is-dark { border-color:#3a3f4a; }
.theme-trigger { background:none; border:0; color:inherit; cursor:pointer; }