:root {
    --bg: #0b0b0f;
    --bg-soft: #12131b;
    --card: #171721;
    --text: #f8f8fb;
    --muted: #aeb1c1;
    --line: #2d2f3d;
    --accent: #E74C3C;
    --accent-hover: #ff5b4a;
    --radius: 18px;
    --site-bg-gradient:
        radial-gradient(circle at 15% 10%, rgba(231, 76, 60, .12) 0%, transparent 34%),
        radial-gradient(circle at 85% 0%, rgba(58, 79, 143, .2) 0%, transparent 35%),
        #0b0d14;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background: var(--site-bg-gradient);
    color: var(--text);
    min-height: 100vh;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image: radial-gradient(#ffffff 0.5px, transparent 0.5px);
    background-size: 4px 4px;
}

.ambient {
    display: none;
}

.container {
    width: min(720px, 92vw);
    margin: 0 auto;
    padding: 28px 0 72px;
    position: relative;
}

.hero {
    text-align: center;
    padding: 10px 12px 16px;
    animation: rise .6s ease;
}

.logo {
    width: min(200px, 50vw);
    margin: 0 auto 8px;
    display: block;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .45));
}

.hero-sub {
    color: var(--muted);
    margin: 0 auto;
    max-width: 520px;
    line-height: 1.5;
    font-size: .96rem;
}

.stack { display: grid; gap: 12px; }

.card, .link-btn {
    background: linear-gradient(180deg, #1c1d28 0%, #151620 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.intro {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 700;
}

.intro h2 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 4.2vw, 1.9rem);
    line-height: 1.2;
}

.lead {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.link-btn {
    width: 100%;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 16px 18px;
    font-weight: 600;
    transition: .25s transform, .25s border-color, .25s box-shadow, .25s background;
    animation: rise .4s ease both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.link-btn:hover,
.link-btn:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(231, 76, 60, .7);
    box-shadow: 0 12px 30px rgba(231, 76, 60, .17);
    background: linear-gradient(180deg, #242533 0%, #1a1b26 100%);
    outline: none;
}

.left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.left strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(231, 76, 60, .15);
}

.right {
    color: var(--muted);
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.right b {
    font-size: 1.1rem;
    line-height: 1;
}

.internal-tag { color: var(--accent); }
.section { margin-top: 20px; padding: 20px; }

.video-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 18px;
    aspect-ratio: 16 / 9;
}

.video-wrap iframe,
.video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.form { display: grid; gap: 10px; }
input, textarea, select, button { font: inherit; }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--line);
    background: #0f1016;
    color: var(--text);
    border-radius: 12px;
    padding: 12px 14px;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .2);
}

button, .btn {
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: .2s background;
}

button:hover, .btn:hover { background: var(--accent-hover); }

.note { color: var(--muted); font-size: .92rem; }
.notice {
    border: 1px solid rgba(36, 194, 106, .35);
    background: rgba(36, 194, 106, .1);
    color: #9cf2c0;
    padding: 10px 12px;
    border-radius: 10px;
}

.error {
    border: 1px solid rgba(231, 76, 60, .4);
    background: rgba(231, 76, 60, .1);
    color: #ffb1a8;
    padding: 10px 12px;
    border-radius: 10px;
}

.footer {
    text-align: center;
    color: #8e91a3;
    margin-top: 28px;
    font-size: .85rem;
}

.back-link {
    color: var(--muted);
    text-decoration: none;
    font-size: .9rem;
    display: inline-block;
    margin-bottom: 14px;
}

.back-link:hover { color: var(--text); }
.trailer-shell { padding: 22px; }
.trailer-head { margin-bottom: 16px; }

.trailer-head h2 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 4.4vw, 2rem);
    line-height: 1.18;
}

.trailer-grid {
    display: grid;
    grid-template-columns: 1.5fr .95fr;
    gap: 16px;
    align-items: start;
}

.trailer-video { margin-bottom: 14px; }

.benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.benefits li {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    padding: 10px 12px;
    color: var(--muted);
    font-size: .95rem;
}

.trailer-form {
    padding: 16px;
    border-radius: 14px;
}

.trailer-form h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.micro-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.player-frame {
    background: #0f1118;
    border-color: rgba(231, 76, 60, .35);
    box-shadow: inset 0 0 0 1px rgba(231, 76, 60, .15), 0 10px 30px rgba(0, 0, 0, .3);
}

.player-frame video {
    width: 100%;
    height: 100%;
    background: #07080e;
    accent-color: var(--accent);
}

.playlist { display: grid; gap: 8px; }

.playlist-item {
    width: 100%;
    border: 1px solid var(--line);
    background: #121420;
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: .2s border-color, .2s background, .2s transform;
}

.playlist-item:hover {
    border-color: rgba(231, 76, 60, .65);
    background: #191c2a;
    transform: translateY(-1px);
}

.playlist-item.is-active {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(231, 76, 60, .18) 0%, rgba(231, 76, 60, .04) 100%);
}

.playlist-title {
    display: block;
    font-weight: 700;
}

.playlist-desc {
    display: block;
    color: var(--muted);
    font-size: .9rem;
    margin-top: 4px;
}

/* Admin desktop polish (clean + closer to original) */
.admin-page {
    background: #0b0b10;
}

.admin-page .admin-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
    min-height: 100vh;
    padding: 16px;
}

.admin-page .admin-sidebar {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    border: 1px solid #2a2d3f;
    border-radius: 14px;
    background: #111420;
    padding: 18px 14px;
}

.admin-page .admin-sidebar h2 {
    margin: 0 6px 14px;
    font-size: 1.05rem;
    color: #e9ebf4;
}

.admin-page .admin-sidebar nav {
    display: grid;
    gap: 7px;
}

.admin-page .admin-sidebar a {
    color: #b9bdd0;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.admin-page .admin-sidebar a:hover {
    color: #fff;
    background: #1a1d2c;
    border-color: #2e3247;
}

.admin-page .admin-sidebar a.is-active {
    color: #fff;
    background: rgba(231, 76, 60, .12);
    border-color: rgba(231, 76, 60, .45);
}

.admin-page .admin-content {
    padding: 0;
    max-width: 1180px;
}

.admin-page .admin-card {
    background: #151826;
    border: 1px solid #2b2f44;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}

.admin-page .admin-card h1,
.admin-page .admin-card h2,
.admin-page .admin-card h3 {
    margin-top: 0;
}

.admin-page .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-page input,
.admin-page select,
.admin-page textarea {
    background: #0f1220;
    border: 1px solid #31364d;
    color: #f3f4f8;
    border-radius: 10px;
}

.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus {
    border-color: rgba(231, 76, 60, .7);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .15);
}

.admin-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #2d3147;
    border-radius: 10px;
    overflow: hidden;
}

.admin-page th,
.admin-page td {
    padding: 10px 8px;
    border-bottom: 1px solid #2d3147;
}

.admin-page th {
    background: #1a1e2f;
    color: #d8dbe7;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.admin-page td {
    background: #141827;
}

.admin-page tr:last-child td {
    border-bottom: 0;
}

.admin-page .template-field.is-hidden {
    display: none;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    .admin-page .admin-wrap {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 880px) {
    .admin-page .admin-wrap {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
    }

    .admin-page .admin-sidebar {
        position: static;
        height: auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

    .admin-page .admin-content {
        padding: 14px;
    }

    .admin-page .grid-2,
    .trailer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .container { width: min(740px, 94vw); padding-top: 20px; }
    .intro { padding: 16px; }
    .link-btn { padding: 14px 14px; }
    .right { font-size: .86rem; gap: 6px; }
    .dot { width: 7px; height: 7px; box-shadow: 0 0 0 5px rgba(231, 76, 60, .16); }
}
/* Admin visible update */
.admin-page .admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #323750;
    border-radius: 12px;
    background: linear-gradient(180deg, #1a1e30 0%, #141827 100%);
}

.admin-page .admin-topbar strong {
    color: #fff;
    font-size: .96rem;
}

.admin-page .admin-topbar span {
    color: #b8bdd1;
    font-size: .88rem;
}

.admin-page .admin-card {
    border-left: 3px solid rgba(231, 76, 60, .45);
}
/* Admin polish v2: cleaner + stronger accents */
.admin-page .admin-sidebar h2 {
    position: relative;
    padding-left: 14px;
}

.admin-page .admin-sidebar h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent);
}

.admin-page .admin-sidebar a {
    position: relative;
}

.admin-page .admin-sidebar a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: transparent;
    transition: .2s background;
}

.admin-page .admin-sidebar a:hover::before,
.admin-page .admin-sidebar a.is-active::before {
    background: var(--accent);
}

.admin-page .admin-topbar {
    border-color: rgba(231, 76, 60, .45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(231, 76, 60, .15);
}

.admin-page .admin-topbar strong {
    letter-spacing: .02em;
}

.admin-page .admin-card {
    position: relative;
    overflow: hidden;
}

.admin-page .admin-card::after {
    content: '';
    position: absolute;
    right: -48px;
    top: -48px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(231, 76, 60, .2), rgba(231, 76, 60, 0));
    pointer-events: none;
}

.admin-page .admin-card h1,
.admin-page .admin-card h2,
.admin-page .admin-card h3 {
    color: #ffffff;
    letter-spacing: .01em;
}

.admin-page .admin-card h1 {
    border-bottom: 1px solid rgba(231, 76, 60, .25);
    padding-bottom: 10px;
}

.admin-page .note {
    color: #c2c7d8;
}

.admin-page input,
.admin-page select,
.admin-page textarea {
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.admin-page input:hover,
.admin-page select:hover,
.admin-page textarea:hover {
    border-color: rgba(231, 76, 60, .35);
    background: #111527;
}

.admin-page button,
.admin-page .btn {
    background: linear-gradient(180deg, #ee5e4e 0%, #E74C3C 100%);
    box-shadow: 0 8px 20px rgba(231, 76, 60, .28);
}

.admin-page button:hover,
.admin-page .btn:hover {
    background: linear-gradient(180deg, #ff6d5d 0%, #ee5443 100%);
}

.admin-page table {
    box-shadow: inset 0 0 0 1px rgba(231, 76, 60, .1);
}

.admin-page th {
    border-bottom: 1px solid rgba(231, 76, 60, .28);
}

.admin-page tr:hover td {
    background: #1a1f32;
}

.admin-page .notice {
    border-color: rgba(231, 76, 60, .45);
    background: rgba(231, 76, 60, .12);
    color: #ffd6d1;
}

.admin-page .error {
    border-color: rgba(231, 76, 60, .65);
    background: rgba(231, 76, 60, .18);
}
/* Admin neutral palette (less accent color) */
.admin-page .admin-sidebar h2::before,
.admin-page .admin-sidebar a::before {
    background: #7f879f !important;
}

.admin-page .admin-sidebar a.is-active {
    background: rgba(127, 135, 159, .16) !important;
    border-color: rgba(127, 135, 159, .45) !important;
}

.admin-page .admin-topbar {
    border-color: #3a4055 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(127, 135, 159, .15) !important;
}

.admin-page .admin-card {
    border-left: 3px solid rgba(127, 135, 159, .45) !important;
}

.admin-page .admin-card::after {
    background: radial-gradient(circle at center, rgba(127, 135, 159, .18), rgba(127, 135, 159, 0)) !important;
}

.admin-page .admin-card h1 {
    border-bottom-color: rgba(127, 135, 159, .28) !important;
}

.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus {
    border-color: rgba(127, 135, 159, .7) !important;
    box-shadow: 0 0 0 3px rgba(127, 135, 159, .15) !important;
}

.admin-page button,
.admin-page .btn {
    background: linear-gradient(180deg, #646d86 0%, #565f79 100%) !important;
    box-shadow: 0 8px 20px rgba(57, 63, 82, .28) !important;
}

.admin-page button:hover,
.admin-page .btn:hover {
    background: linear-gradient(180deg, #707a95 0%, #5e6883 100%) !important;
}

.admin-page th {
    border-bottom-color: rgba(127, 135, 159, .32) !important;
}

.admin-page .notice {
    border-color: rgba(127, 135, 159, .45) !important;
    background: rgba(127, 135, 159, .12) !important;
    color: #dde2f0 !important;
}
/* Admin minimalist cleanup */
.admin-page .admin-topbar { display: none !important; }
.admin-page .admin-card::after { content: none !important; }
.admin-page .admin-sidebar h2::before,
.admin-page .admin-sidebar a::before { content: none !important; }

.admin-page {
    background: #0b0b10 !important;
}

.admin-page .admin-wrap {
    grid-template-columns: 240px 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
}

.admin-page .admin-sidebar {
    background: #121522 !important;
    border: 1px solid #2d3144 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 14px 12px !important;
}

.admin-page .admin-sidebar h2 {
    margin: 2px 4px 10px !important;
    padding: 0 !important;
    color: #e8ebf6 !important;
}

.admin-page .admin-sidebar a {
    padding: 8px 9px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.admin-page .admin-sidebar a:hover {
    background: #1a1e2e !important;
    border-color: #2d3247 !important;
}

.admin-page .admin-sidebar a.is-active {
    background: #1f2435 !important;
    border-color: #3a4158 !important;
}

.admin-page .admin-content {
    max-width: 1100px !important;
}

.admin-page .admin-card {
    background: #151826 !important;
    border: 1px solid #2d3145 !important;
    border-left: 1px solid #2d3145 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

.admin-page .admin-card h1 {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.admin-page .admin-card h1,
.admin-page .admin-card h2,
.admin-page .admin-card h3 {
    margin-bottom: 10px !important;
}

.admin-page .grid-2 {
    gap: 10px !important;
}

.admin-page input,
.admin-page select,
.admin-page textarea {
    background: #0f1220 !important;
    border: 1px solid #33384f !important;
    border-radius: 8px !important;
}

.admin-page input:hover,
.admin-page select:hover,
.admin-page textarea:hover {
    border-color: #3c425b !important;
    background: #101426 !important;
}

.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus {
    border-color: #606b8c !important;
    box-shadow: 0 0 0 2px rgba(98, 110, 145, .2) !important;
}

.admin-page button,
.admin-page .btn {
    background: #5a637c !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.admin-page button:hover,
.admin-page .btn:hover {
    background: #66708b !important;
}

.admin-page table {
    border: 1px solid #2d3147 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.admin-page th {
    background: #1a1e2f !important;
    border-bottom: 1px solid #2d3147 !important;
}

.admin-page td {
    background: #141827 !important;
}

.admin-page tr:hover td {
    background: #181d2d !important;
}

.admin-page .notice,
.admin-page .error {
    border-radius: 8px !important;
    box-shadow: none !important;
}
/* Admin checkbox polish */
.admin-page label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d2d7e6;
    font-size: .92rem;
}

.admin-page input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #4a5068;
    border-radius: 5px;
    background: #0f1220;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    margin: 0;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.admin-page input[type="checkbox"]::before {
    content: '';
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform .15s ease-in-out;
    box-shadow: inset 1em 1em #ffffff;
    clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 22%, 84% 9%, 39% 63%);
}

.admin-page input[type="checkbox"]:checked {
    background: #5f6883;
    border-color: #7782a1;
}

.admin-page input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.admin-page input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(119, 130, 161, .35);
}
.admin-page .nav-divider {
    height: 1px;
    background: #2f3448;
    margin: 4px 2px;
    border-radius: 1px;
}
/* Admin login page */
.admin-login-page {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 15% 10%, rgba(231, 76, 60, .12) 0%, transparent 34%),
        radial-gradient(circle at 85% 0%, rgba(58, 79, 143, .2) 0%, transparent 35%),
        #0b0d14;
    padding: 20px;
}

.admin-login-shell {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    border: 1px solid #2f3448;
    border-radius: 16px;
    overflow: hidden;
    background: #111522;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.admin-login-brand {
    padding: 34px;
    border-right: 1px solid #2b3044;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #161b2b 0%, #121624 100%);
}

.admin-login-logo {
    width: 140px;
    max-width: 100%;
    display: block;
}

.admin-login-brand p {
    margin: 0;
    color: #b3bad0;
    font-size: .95rem;
}

.admin-login-card {
    padding: 34px;
}

.admin-login-card h1 {
    margin: 0 0 10px;
    font-size: 1.7rem;
}

.admin-login-card .note {
    margin: 0 0 16px;
}

@media (max-width: 840px) {
    .admin-login-shell {
        grid-template-columns: 1fr;
    }

    .admin-login-brand {
        border-right: 0;
        border-bottom: 1px solid #2b3044;
    }
}

/* Login vertical layout */
.admin-login-shell {
    width: min(460px, 100%) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.admin-login-brand {
    border-right: 0 !important;
    border-bottom: 1px solid #2b3044 !important;
    text-align: center;
    align-items: center;
}

.admin-login-card {
    padding: 28px 26px 30px !important;
}
.websites-layout {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 16px;
    align-items: start;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.portfolio-card {
    overflow: hidden;
    border-radius: 14px;
}

.portfolio-shot-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.portfolio-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portfolio-meta {
    padding: 10px 12px 12px;
}

.portfolio-meta h4 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.portfolio-meta a {
    color: var(--accent);
    text-decoration: none;
    font-size: .9rem;
}

.portfolio-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 880px) {
    .websites-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin layout uniformization */
.admin-page .admin-content {
    width: 100%;
    max-width: 1160px !important;
    margin: 0 auto;
}

.admin-page .admin-content > .admin-card {
    width: 100%;
}

.admin-page .admin-card {
    padding: 18px !important;
    border-radius: 10px !important;
}

.admin-page .admin-card h1,
.admin-page .admin-card h2,
.admin-page .admin-card h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.admin-page .admin-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-page .admin-stat-card {
    border: 1px solid #2d3147;
    border-radius: 10px;
    background: #141827;
    padding: 14px;
    display: grid;
    gap: 4px;
}

.admin-page .admin-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.admin-page .admin-stat-label {
    color: #c4c9db;
    font-size: .95rem;
}

.admin-page .admin-inline-form {
    display: inline-flex;
    margin-right: 6px;
    margin-bottom: 4px;
}



.admin-page .language-delete-row {
    display: flex;
    justify-content: flex-end;
}


@media (max-width: 880px) {
    .admin-page .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin add-section coherence */
.admin-page .admin-add-form {
    gap: 12px;
}

.admin-page .admin-add-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-page .admin-add-grid input,
.admin-page .admin-add-grid select,
.admin-page .admin-add-grid textarea {
    width: 100%;
}

@media (max-width: 980px) {
    .admin-page .admin-add-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .admin-page .admin-add-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin final polish: spacing + rhythm */
.admin-page .admin-wrap {
    gap: 16px !important;
    padding: 16px !important;
}

.admin-page .admin-content {
    width: 100%;
    max-width: 1160px !important;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.admin-page .admin-card {
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 12px !important;
}

.admin-page .admin-card > *:first-child {
    margin-top: 0 !important;
}

.admin-page .admin-card > *:last-child {
    margin-bottom: 0 !important;
}

.admin-page .form {
    gap: 12px;
}

.admin-page .grid-2 {
    gap: 12px !important;
}

.admin-page table {
    margin-top: 8px;
}

.admin-page .admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-page .admin-quick-grid .btn {
    text-align: center;
}

@media (max-width: 880px) {
    .admin-page .admin-wrap {
        padding: 0 !important;
    }

    .admin-page .admin-content {
        gap: 12px;
        padding: 14px;
    }

    .admin-page .admin-quick-grid {
        grid-template-columns: 1fr;
    }
}

/* sidebar auto-height */
.admin-page .admin-sidebar {
    height: fit-content !important;
}

/* Admin external links table alignment */
.admin-page .admin-links-table th,
.admin-page .admin-links-table td {
    vertical-align: middle;
}

.admin-page .admin-links-table .admin-link-url {
    max-width: 520px;
    word-break: break-word;
    color: #c9cfe2;
}

.admin-page .admin-links-table .admin-link-actions {
    width: 220px;
}

.admin-page .admin-links-table .admin-link-action-form {
    display: inline-flex;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

.admin-page .admin-links-table .admin-link-action-form:last-child {
    margin-right: 0;
}

/* External links table: strict alignment */
.admin-page .admin-links-table {
    table-layout: fixed;
}

.admin-page .admin-links-table col.col-label {
    width: 22%;
}

.admin-page .admin-links-table col.col-url {
    width: 43%;
}

.admin-page .admin-links-table col.col-status {
    width: 12%;
}

.admin-page .admin-links-table col.col-action {
    width: 23%;
}

.admin-page .admin-links-table th:nth-child(3),
.admin-page .admin-links-table th:nth-child(4),
.admin-page .admin-links-table td.admin-link-status,
.admin-page .admin-links-table td.admin-link-actions {
    text-align: center;
}

.admin-page .admin-links-table .admin-link-url {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-page .admin-links-table .admin-link-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.admin-page .admin-links-table .admin-link-action-form {
    margin: 0;
}

.admin-page .admin-links-table .admin-link-action-form button {
    min-width: 82px;
    padding: 8px 10px;
}

/* Portfolio upgrade */
.websites-shell .websites-head {
    margin-bottom: 18px;
}

.portfolio-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
}

.portfolio-summary strong {
    font-size: 1.25rem;
    color: #fff;
}

.portfolio-summary span {
    color: var(--muted);
    font-size: .92rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.portfolio-card {
    overflow: hidden;
    border-radius: 14px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    animation: rise .35s ease both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.portfolio-card:hover {
    transform: translateY(-3px);
    border-color: rgba(231, 76, 60, .5);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

.portfolio-shot-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #0f1220;
}

.portfolio-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.portfolio-card:hover .portfolio-shot {
    transform: scale(1.03);
}

.portfolio-meta {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.portfolio-meta h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.portfolio-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: rgba(231, 76, 60, .14);
    border: 1px solid rgba(231, 76, 60, .45);
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.portfolio-link:hover {
    background: rgba(231, 76, 60, .24);
}

.portfolio-soon {
    display: inline-block;
    color: #c2c7d8;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    padding: 7px 10px;
    border-radius: 10px;
    font-size: .85rem;
}

.portfolio-empty {
    text-align: center;
}

@media (max-width: 880px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* Portfolio redesign v2 */
.websites-shell .websites-layout {
    grid-template-columns: 1.55fr .9fr;
    gap: 18px;
}

.websites-shell .portfolio-showcase {
    display: grid;
    gap: 14px;
}

.websites-shell .portfolio-featured {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    border-radius: 16px;
    border-color: rgba(231, 76, 60, .32);
}

.websites-shell .portfolio-featured-media {
    position: absolute;
    inset: 0;
}

.websites-shell .portfolio-featured-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 11, 19, .14) 0%, rgba(9, 11, 19, .82) 70%, rgba(9, 11, 19, .95) 100%);
}

.websites-shell .portfolio-featured .portfolio-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.websites-shell .portfolio-featured-overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px;
}

.websites-shell .portfolio-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #ffd5cf;
    background: rgba(231, 76, 60, .2);
    border: 1px solid rgba(231, 76, 60, .4);
}

.websites-shell .portfolio-featured h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2.8vw, 1.55rem);
    line-height: 1.2;
}

.websites-shell .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.websites-shell .portfolio-card {
    border-radius: 14px;
    border-color: #2e3348;
}

.websites-shell .portfolio-meta {
    gap: 9px;
}

.websites-shell .portfolio-link {
    background: rgba(231, 76, 60, .16);
    border-color: rgba(231, 76, 60, .52);
}

.websites-shell .trailer-form {
    position: sticky;
    top: 14px;
}

@media (max-width: 980px) {
    .websites-shell .websites-layout {
        grid-template-columns: 1fr;
    }

    .websites-shell .trailer-form {
        position: static;
    }
}

@media (max-width: 700px) {
    .websites-shell .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .websites-shell .portfolio-featured,
    .websites-shell .portfolio-featured-overlay {
        min-height: 250px;
    }
}

/* Portfolio horizontal slider */
.websites-shell .portfolio-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
}

.websites-shell .portfolio-slider-head h3 {
    margin: 0;
    font-size: 1rem;
}

.websites-shell .portfolio-slider-controls {
    display: inline-flex;
    gap: 8px;
}

.websites-shell .portfolio-nav {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    line-height: 1;
    font-size: 1.2rem;
}

.websites-shell .portfolio-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.websites-shell .portfolio-slide {
    flex: 0 0 clamp(260px, 40vw, 360px);
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.websites-shell .portfolio-slide.is-link:hover {
    transform: translateY(-3px);
    border-color: rgba(231, 76, 60, .55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .26);
}

.websites-shell .portfolio-slide .portfolio-shot-wrap {
    aspect-ratio: 16 / 10;
    background: #0f1220;
}

.websites-shell .portfolio-slide .portfolio-meta {
    padding: 12px;
    display: grid;
    gap: 9px;
}

.websites-shell .portfolio-slide h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.28;
}

.websites-shell .portfolio-slide .portfolio-link,
.websites-shell .portfolio-slide .portfolio-soon {
    width: fit-content;
}

@media (max-width: 980px) {
    .websites-shell .websites-layout {
        grid-template-columns: 1fr;
    }

    .websites-shell .trailer-form {
        position: static;
    }
}

/* Portfolio slider while keeping previous style */
.websites-shell .portfolio-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.websites-shell .portfolio-slide {
    flex: 0 0 clamp(270px, 42vw, 360px);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.websites-shell .portfolio-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
}

.websites-shell .portfolio-slider-head h3 {
    margin: 0;
    font-size: 1rem;
}

.websites-shell .portfolio-slider-controls {
    display: inline-flex;
    gap: 8px;
}

.websites-shell .portfolio-nav {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    line-height: 1;
    font-size: 1.2rem;
}

.websites-shell .portfolio-card.portfolio-slide {
    border-radius: 14px;
}

.websites-shell .portfolio-card.portfolio-slide:hover {
    transform: translateY(-3px);
    border-color: rgba(231, 76, 60, .5);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

@media (max-width: 980px) {
    .websites-shell .websites-layout {
        grid-template-columns: 1fr;
    }

    .websites-shell .trailer-form {
        position: static;
    }
}

/* Portfolio slider: dark mask + screenshot as background */
.websites-shell .portfolio-card.portfolio-slide {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-color: #2f344a;
    background: #0f1220;
}

.websites-shell .portfolio-card.portfolio-slide .portfolio-shot-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
}

.websites-shell .portfolio-card.portfolio-slide .portfolio-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.websites-shell .portfolio-card.portfolio-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 7, 14, .38) 0%, rgba(5, 7, 14, .76) 62%, rgba(5, 7, 14, .92) 100%);
}

.websites-shell .portfolio-card.portfolio-slide .portfolio-meta {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 14px;
    gap: 8px;
}

.websites-shell .portfolio-card.portfolio-slide h4 {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* Portfolio controls integration */
.websites-shell .portfolio-slider-head {
    justify-content: flex-end;
    margin: -2px 0 8px;
}

.websites-shell .portfolio-slider-controls {
    background: rgba(18, 22, 35, .68);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: 4px;
    backdrop-filter: blur(4px);
}

.websites-shell .portfolio-nav {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: transparent !important;
    color: #d8dcef;
    border: 1px solid transparent;
    box-shadow: none !important;
}

.websites-shell .portfolio-nav:hover {
    background: rgba(231, 76, 60, .16) !important;
    border-color: rgba(231, 76, 60, .45);
    color: #fff;
}

/* Portfolio arrows fully integrated into slider */
.websites-shell .portfolio-slider-shell {
    position: relative;
}

.websites-shell .portfolio-slider-shell .portfolio-slider {
    padding-inline: 34px;
}

.websites-shell .portfolio-slider-shell .portfolio-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(12, 15, 26, .72) !important;
    color: #e3e7f5;
    backdrop-filter: blur(5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
}

.websites-shell .portfolio-slider-shell .portfolio-nav.prev {
    left: 2px;
}

.websites-shell .portfolio-slider-shell .portfolio-nav.next {
    right: 2px;
}

.websites-shell .portfolio-slider-shell .portfolio-nav:hover {
    background: rgba(231, 76, 60, .28) !important;
    border-color: rgba(231, 76, 60, .52);
    color: #fff;
}

@media (max-width: 700px) {
    .websites-shell .portfolio-slider-shell .portfolio-slider {
        padding-inline: 28px;
    }

    .websites-shell .portfolio-slider-shell .portfolio-nav {
        width: 30px;
        height: 30px;
    }
}

/* Portfolio final polish: hover arrows desktop + better spacing */
.websites-shell .websites-head {
    margin-bottom: 20px;
}

.websites-shell .websites-layout {
    gap: 22px;
}

.websites-shell .portfolio-showcase {
    gap: 16px;
}

.websites-shell .portfolio-summary {
    margin-bottom: 2px;
}

.websites-shell .portfolio-slider-shell .portfolio-slider {
    padding-inline: 38px;
    gap: 16px;
}

.websites-shell .portfolio-slide {
    flex-basis: clamp(285px, 40vw, 370px);
}

.websites-shell .portfolio-card.portfolio-slide .portfolio-meta {
    padding: 16px;
    gap: 10px;
}

@media (min-width: 901px) {
    .websites-shell .portfolio-slider-shell .portfolio-nav {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
        transform: translateY(-50%) scale(.96);
    }

    .websites-shell .portfolio-slider-shell:hover .portfolio-nav,
    .websites-shell .portfolio-slider-shell:focus-within .portfolio-nav {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }
}

@media (max-width: 900px) {
    .websites-shell .websites-layout {
        gap: 16px;
    }

    .websites-shell .portfolio-slider-shell .portfolio-slider {
        padding-inline: 30px;
        gap: 12px;
    }

    .websites-shell .portfolio-slide {
        flex-basis: clamp(250px, 78vw, 320px);
    }

    .websites-shell .portfolio-slider-shell .portfolio-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

/* More breathing room for websites form */
.websites-shell .trailer-form {
    padding: 22px;
}

@media (min-width: 981px) {
    .websites-shell .trailer-form {
        margin-left: 6px;
    }
}

/* Websites page only: more space around form block */
.websites-shell .websites-layout {
    gap: 28px;
}

.websites-shell .trailer-form {
    padding: 26px;
}

.websites-shell .trailer-form h3 {
    margin-bottom: 12px;
}

.websites-shell .trailer-form .note {
    margin-bottom: 14px;
}

.websites-shell .trailer-form .form {
    gap: 14px;
}

/* Websites page width + wider form column */
body.page-websites .container {
    width: min(1180px, 94vw);
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    gap: 28px;
}

body.page-websites .trailer-form {
    width: 100%;
    max-width: none;
    padding: 28px;
}

@media (max-width: 1100px) {
    body.page-websites .websites-layout {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
        gap: 20px;
    }
}

@media (max-width: 980px) {
    body.page-websites .container {
        width: min(760px, 94vw);
    }

    body.page-websites .websites-layout {
        grid-template-columns: 1fr;
    }
}

/* Websites width rollback: balanced layout */
body.page-websites .container {
    width: min(980px, 93vw);
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(320px, .9fr);
    gap: 22px;
}

body.page-websites .trailer-form {
    padding: 22px;
}

@media (max-width: 1100px) {
    body.page-websites .websites-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
        gap: 16px;
    }
}

/* Websites width rollback v2: compact */
body.page-websites .container {
    width: min(900px, 92vw);
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .82fr);
    gap: 16px;
}

body.page-websites .trailer-form {
    padding: 18px;
}

@media (max-width: 1100px) {
    body.page-websites .websites-layout {
        grid-template-columns: minmax(0, 1.12fr) minmax(270px, .88fr);
        gap: 14px;
    }
}

/* Websites width rollback v3: tighter */
body.page-websites .container {
    width: min(820px, 91vw);
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1.48fr) minmax(245px, .76fr);
    gap: 12px;
}

body.page-websites .trailer-form {
    padding: 16px;
}

body.page-websites .portfolio-slider-shell .portfolio-slider {
    padding-inline: 28px;
}

@media (max-width: 980px) {
    body.page-websites .container {
        width: min(760px, 94vw);
    }

    body.page-websites .websites-layout {
        grid-template-columns: 1fr;
    }
}

/* Clean websites form width (final) */
body.page-websites .container {
    width: min(900px, 92vw) !important;
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 16px !important;
}

body.page-websites .trailer-form {
    width: 340px;
    max-width: 100%;
    padding: 18px !important;
    margin-left: 0 !important;
}

@media (max-width: 980px) {
    body.page-websites .container {
        width: min(760px, 94vw) !important;
    }

    body.page-websites .websites-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.page-websites .trailer-form {
        width: 100%;
    }
}

/* Websites clean parity with other pages (final override) */
body.page-websites .container {
    width: min(720px, 92vw) !important;
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 16px !important;
    align-items: start;
}

body.page-websites .trailer-form {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 18px !important;
    margin-left: 0 !important;
    overflow: visible;
}

body.page-websites .trailer-form .form {
    gap: 12px;
}

@media (max-width: 900px) {
    body.page-websites .websites-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Websites micro-adjustment: slightly narrower form, slightly wider content */
body.page-websites .container {
    width: min(740px, 92vw) !important;
}

body.page-websites .websites-layout {
    grid-template-columns: minmax(0, 1fr) 285px !important;
}

/* Websites no-overlap final layout */
body.page-websites .websites-shell .websites-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px !important;
    gap: 16px !important;
    align-items: start;
}

body.page-websites .websites-shell .portfolio-showcase,
body.page-websites .websites-shell .trailer-form {
    min-width: 0;
}

body.page-websites .websites-shell .trailer-form {
    width: 100%;
    max-width: 290px;
    justify-self: end;
    padding: 18px !important;
    position: sticky;
    top: 12px;
}

body.page-websites .websites-shell .portfolio-slider-shell {
    position: relative;
    overflow: hidden;
}

body.page-websites .websites-shell .portfolio-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 38px 10px;
    scroll-snap-type: x mandatory;
}

body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 min(320px, calc(100% - 76px));
    max-width: 100%;
    scroll-snap-align: start;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.prev {
    left: 6px;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.next {
    right: 6px;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .websites-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.page-websites .websites-shell .trailer-form {
        max-width: none;
        width: 100%;
        justify-self: stretch;
        position: static;
    }

    body.page-websites .websites-shell .portfolio-slider {
        padding-inline: 30px;
    }

    body.page-websites .websites-shell .portfolio-slide {
        flex-basis: min(320px, calc(100% - 60px));
    }
}

/* Websites card size bump */
body.page-websites .websites-shell .websites-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
}

body.page-websites .websites-shell .trailer-form {
    max-width: 320px;
}

/* Websites card size bump v2 (larger) */
body.page-websites .websites-shell .websites-layout {
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: 18px !important;
}

body.page-websites .websites-shell .trailer-form {
    max-width: 390px;
    padding: 22px !important;
}

@media (max-width: 1100px) {
    body.page-websites .websites-shell .websites-layout {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }

    body.page-websites .websites-shell .trailer-form {
        max-width: 350px;
    }
}

/* Slider size bump (requested) */
body.page-websites .websites-shell .portfolio-slider {
    gap: 14px !important;
}

body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 min(420px, calc(100% - 86px)) !important;
    min-height: 290px;
}

body.page-websites .websites-shell .portfolio-card.portfolio-slide .portfolio-meta {
    padding: 18px !important;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .portfolio-slide {
        flex: 0 0 min(360px, calc(100% - 70px)) !important;
        min-height: 260px;
    }
}

/* Websites stable layout (single source of truth) */
body.page-websites .container {
    width: min(720px, 92vw) !important;
}

body.page-websites .websites-shell .websites-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 16px !important;
    align-items: start !important;
}

body.page-websites .websites-shell .portfolio-showcase,
body.page-websites .websites-shell .trailer-form {
    min-width: 0 !important;
}

body.page-websites .websites-shell .trailer-form {
    width: 100% !important;
    max-width: 300px !important;
    justify-self: end !important;
    padding: 18px !important;
    position: sticky !important;
    top: 12px !important;
    margin: 0 !important;
}

body.page-websites .websites-shell .portfolio-slider-shell {
    position: relative !important;
    overflow: hidden !important;
}

body.page-websites .websites-shell .portfolio-slider {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 36px 10px !important;
    scroll-snap-type: x mandatory !important;
}

body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 min(340px, calc(100% - 72px)) !important;
    min-height: 250px !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
}

body.page-websites .websites-shell .portfolio-card.portfolio-slide .portfolio-meta {
    padding: 16px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav {
    width: 32px !important;
    height: 32px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.prev {
    left: 6px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.next {
    right: 6px !important;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .websites-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.page-websites .websites-shell .trailer-form {
        max-width: none !important;
        justify-self: stretch !important;
        position: static !important;
    }

    body.page-websites .websites-shell .portfolio-slider {
        padding-inline: 30px !important;
    }

    body.page-websites .websites-shell .portfolio-slide {
        flex-basis: min(320px, calc(100% - 60px)) !important;
        min-height: 230px !important;
    }
}

/* Projects cards wider */
body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 min(390px, calc(100% - 72px)) !important;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .portfolio-slide {
        flex-basis: min(350px, calc(100% - 60px)) !important;
    }
}

/* Websites project card width fix (from screenshot) */
body.page-websites .websites-shell .websites-layout {
    grid-template-columns: minmax(0, 1fr) 280px !important;
}

body.page-websites .websites-shell .portfolio-slider {
    padding: 4px 24px 10px !important;
}

body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 calc(100% - 48px) !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .portfolio-slide {
        flex-basis: calc(100% - 44px) !important;
    }
}

/* Center project cards in slider */
body.page-websites .websites-shell .portfolio-slider {
    justify-content: center;
}

body.page-websites .websites-shell .portfolio-slide {
    margin-inline: auto;
}

/* === Websites responsive canonical override === */
body.page-websites .container {
    width: min(720px, 92vw) !important;
}

body.page-websites .websites-shell .websites-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 14px !important;
    align-items: start !important;
}

body.page-websites .websites-shell .portfolio-showcase,
body.page-websites .websites-shell .trailer-form {
    min-width: 0 !important;
}

body.page-websites .websites-shell .trailer-form {
    width: 100% !important;
    max-width: 280px !important;
    justify-self: end !important;
    padding: 16px !important;
    position: sticky !important;
    top: 12px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell {
    position: relative !important;
    overflow: hidden !important;
}

body.page-websites .websites-shell .portfolio-slider {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 26px 10px !important;
    scroll-snap-type: x mandatory !important;
}

body.page-websites .websites-shell .portfolio-slide {
    flex: 0 0 calc(100% - 52px) !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 235px !important;
    scroll-snap-align: start !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav {
    width: 30px !important;
    height: 30px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.prev {
    left: 4px !important;
}

body.page-websites .websites-shell .portfolio-slider-shell .portfolio-nav.next {
    right: 4px !important;
}

@media (max-width: 900px) {
    body.page-websites .websites-shell .websites-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.page-websites .websites-shell .trailer-form {
        max-width: none !important;
        justify-self: stretch !important;
        position: static !important;
    }

    body.page-websites .websites-shell .portfolio-slider {
        padding-inline: 22px !important;
    }

    body.page-websites .websites-shell .portfolio-slide {
        flex-basis: calc(100% - 44px) !important;
        min-height: 220px !important;
    }
}

/* Center single project in slider */
body.page-websites .websites-shell .portfolio-slider.single-item {
    justify-content: center !important;
}

body.page-websites .websites-shell .portfolio-slider.single-item .portfolio-slide {
    margin-inline: auto !important;
}

/* Match trailers form width with websites form width */
.trailer-shell:not(.websites-shell) .trailer-grid {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 14px !important;
    align-items: start !important;
}

.trailer-shell:not(.websites-shell) .trailer-form {
    width: 100% !important;
    max-width: 280px !important;
    justify-self: end !important;
    padding: 16px !important;
}

@media (max-width: 900px) {
    .trailer-shell:not(.websites-shell) .trailer-grid {
        grid-template-columns: 1fr !important;
    }

    .trailer-shell:not(.websites-shell) .trailer-form {
        max-width: none !important;
        justify-self: stretch !important;
    }
}

/* Hide portfolio slider scrollbar while keeping scroll */
body.page-websites .websites-shell .portfolio-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body.page-websites .websites-shell .portfolio-slider::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Admin messages */
.admin-page .admin-messages-layout {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.admin-page .admin-messages-list,
.admin-page .admin-messages-detail {
    min-width: 0;
}

.admin-page .admin-messages-list h3,
.admin-page .admin-messages-detail h3 {
    margin-top: 0;
}

.admin-page .admin-messages-list-scroll {
    max-height: 74vh;
    overflow: auto;
}

.admin-page .admin-messages-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-page .admin-messages-toolbar .note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .84rem;
}

.admin-page .admin-messages-list td a {
    color: #f3f5ff;
    text-decoration: none;
}

.admin-page .admin-messages-list tr.is-current td {
    background: #1d2337 !important;
}

.admin-page .admin-messages-list tr.is-unread td {
    background: rgba(244, 192, 91, .08) !important;
    border-left: 0 !important;
}

.admin-page .admin-messages-list tr.is-unread:hover td {
    background: rgba(244, 192, 91, .12) !important;
}

.admin-page .admin-messages-list tr.is-unread td:nth-child(2) {
    color: #e8c98b;
    font-weight: 700;
}

.admin-page .admin-messages-list tr.is-unread td a {
    color: #f0ddb2 !important;
}

.admin-page .admin-messages-list .admin-unread-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f2bf64;
    box-shadow: 0 0 0 3px rgba(242, 191, 100, .12);
    margin-right: 8px;
    vertical-align: middle;
}

.admin-page .admin-messages-list .admin-unread-label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 700;
    color: #2b2212;
    background: #e4c182;
    border: 1px solid #cfa96f;
    vertical-align: middle;
}

.admin-page .admin-messages-list th,
.admin-page .admin-messages-list td {
    text-align: left;
}

.admin-page .admin-sidebar-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffcd52;
    box-shadow: 0 0 0 3px rgba(255, 205, 82, .2);
    vertical-align: middle;
    margin-left: 10px;
}

.admin-page .admin-messages-thread,
.admin-page .admin-messages-actions {
    margin-bottom: 12px;
}

.admin-page .admin-messages-detail .admin-card + .admin-card {
    margin-top: 18px !important;
}

.admin-page .admin-messages-actions {
    display: grid;
    gap: 12px;
}

.admin-page .admin-messages-actions h3 {
    margin: 0 0 2px;
}

.admin-page .admin-messages-actions .form {
    margin: 0;
}

.admin-page .admin-messages-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-page .admin-messages-inline-row .note {
    margin: 0;
}

.admin-page .admin-messages-inline-help {
    font-size: .85rem;
    line-height: 1.45;
}

.admin-page .admin-messages-separator {
    border: 0;
    border-top: 1px solid #2f3550;
    margin: 14px 0;
}

.admin-page .admin-upload-result {
    margin-top: 2px;
}

.admin-page .admin-upload-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

.admin-page .admin-review-request-area {
    display: grid;
    gap: 6px;
}

.admin-page #reviewRequestForm {
    margin: 0;
    gap: 8px;
}

.admin-page #reviewRequestFeedback {
    min-height: 0 !important;
}

.admin-page #reviewLinkResult {
    margin-top: 0 !important;
}

.admin-page #reviewLinkResult .admin-upload-actions {
    margin-top: 6px;
}

.admin-page .admin-message-reply {
    border: 1px solid #2f3550;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

.admin-page .admin-message-reply.outbound {
    background: #1a2237;
}

.admin-page .admin-message-reply.inbound {
    background: #17201f;
}

@media (max-width: 1024px) {
    .admin-page .admin-messages-layout {
        grid-template-columns: 1fr;
    }

    .admin-page .admin-messages-list-scroll {
        max-height: 48vh;
    }
}

/* === Public form UI refresh (clean + conversion) === */
body:not(.admin-page) .trailer-form {
    background: linear-gradient(180deg, rgba(24, 28, 42, .94) 0%, rgba(16, 19, 30, .96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
    padding: 20px !important;
}

body:not(.admin-page) .trailer-form h3 {
    margin: 0 0 8px !important;
    font-size: 1.22rem !important;
    line-height: 1.2;
}

body:not(.admin-page) .trailer-form .note {
    margin: 0 0 14px !important;
    color: #c5cadc !important;
    font-size: .94rem;
    line-height: 1.5;
}

body:not(.admin-page) .trailer-shell .form {
    display: grid;
    gap: 12px;
}

body:not(.admin-page) .trailer-shell .form input,
body:not(.admin-page) .trailer-shell .form textarea,
body:not(.admin-page) .trailer-shell .form select {
    background: rgba(10, 12, 20, .92) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    color: #f5f7ff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

body:not(.admin-page) .trailer-shell .form input::placeholder,
body:not(.admin-page) .trailer-shell .form textarea::placeholder {
    color: #a4abc4;
}

body:not(.admin-page) .trailer-shell .form input:hover,
body:not(.admin-page) .trailer-shell .form textarea:hover,
body:not(.admin-page) .trailer-shell .form select:hover {
    border-color: rgba(231, 76, 60, .42) !important;
}

body:not(.admin-page) .trailer-shell .form input:focus,
body:not(.admin-page) .trailer-shell .form textarea:focus,
body:not(.admin-page) .trailer-shell .form select:focus {
    border-color: rgba(231, 76, 60, .86) !important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, .18) !important;
    transform: translateY(-1px);
}

body:not(.admin-page) .trailer-shell .form button {
    width: 100%;
    min-height: 48px;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #f05f4f 0%, #E74C3C 100%) !important;
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(231, 76, 60, .28);
}

body:not(.admin-page) .trailer-shell .form button:hover {
    background: linear-gradient(180deg, #ff6c5c 0%, #ef5646 100%) !important;
}

body:not(.admin-page) .trailer-shell .notice,
body:not(.admin-page) .trailer-shell .error {
    margin: 0 0 10px;
    border-radius: 12px;
    padding: 11px 12px;
}

body:not(.admin-page) .trailer-shell .form .note {
    margin: 0 0 4px !important;
    color: #d2d8ea !important;
    font-weight: 500;
}

/* Admin form builder (no-code) */
.admin-page .admin-fields-builder {
    border: 1px solid #2f3550;
    border-radius: 10px;
    padding: 10px;
    background: #121728;
}

.admin-page .admin-fields-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-page .admin-fields-list {
    display: grid;
    gap: 10px;
}

.admin-page .admin-field-row {
    border: 1px solid #323a58;
    border-radius: 10px;
    padding: 10px;
    background: #151b2e;
    display: grid;
    gap: 8px;
}

.admin-page .admin-field-row-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.admin-page .admin-remove-field {
    padding: 8px 10px;
    min-width: 110px;
}

/* External links reviews */
.external-link-block {
    display: grid;
    gap: 8px;
}

.external-reviews {
    display: grid;
    gap: 8px;
    padding: 0 4px 4px;
}

.external-review-item {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(18, 21, 32, .86);
    border-radius: 12px;
    padding: 10px 12px;
}

.external-review-item p {
    margin: 6px 0 0;
    color: #c7cbe0;
    font-size: .9rem;
    line-height: 1.45;
}

.external-review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #f2f4ff;
    font-size: .9rem;
}

.external-review-head span {
    color: #ffd26f;
    letter-spacing: .04em;
}

.rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 1rem;
    line-height: 1;
    color: #ffd26f;
    letter-spacing: .06em;
    white-space: nowrap;
}

.rating-input {
    margin: 0;
    padding: 0;
    border: 0;
}

.rating-input-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px;
}

.rating-input-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.rating-input-stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rating-input-stars label {
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: #4e5675;
    transition: color .15s ease, transform .15s ease;
    user-select: none;
}

.rating-input-stars label:hover,
.rating-input-stars label:hover ~ label,
.rating-input-stars input:checked ~ label {
    color: #ffd26f;
}

.rating-input-stars label:active {
    transform: scale(0.96);
}

/* Admin reviews moderation */
.admin-page .admin-reviews-list {
    display: grid;
    gap: 10px;
}

.admin-page .admin-review-item {
    border: 1px solid #323957;
    border-radius: 10px;
    background: #13192b;
    padding: 10px;
}

.admin-page .admin-inline-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.admin-page .admin-review-actions .admin-review-action-btn.is-danger {
    background: #7c2b2b;
}

.admin-page .admin-review-actions .admin-review-action-btn.is-danger:hover {
    background: #953434;
}

.admin-page .admin-review-actions .admin-review-action-btn.is-active {
    background: #1f5b40;
    cursor: default;
    opacity: 1;
}

.admin-page .admin-review-actions .admin-review-action-btn.is-active.is-danger {
    background: #6f2b2b;
}

.admin-page .admin-review-actions .admin-review-action-btn:disabled {
    opacity: .92;
}

.admin-page .admin-review-actions .admin-review-feedback {
    align-self: center;
    min-height: 1.2em;
}

/* Compact checkbox groups in admin pages */
.admin-page .admin-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

.admin-page .admin-checkbox-line {
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 760px) {
    .admin-page .admin-checkbox-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Simple row: checkboxes left, manage button right */
.admin-page .admin-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.admin-page .admin-checkbox-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.admin-page .admin-page-actions-right {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.admin-page .admin-checkbox-line {
    margin: 0;
    line-height: 1.15;
}

@media (max-width: 760px) {
    .admin-page .admin-page-actions {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .admin-page .admin-page-actions-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .admin-page .admin-checkbox-grid {
        flex-wrap: wrap;
    }
}

/* Language switcher */
.lang-switcher {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(10, 12, 20, .45);
    backdrop-filter: blur(4px);
}

.lang-switcher a, .lang-switcher button {
    color: #c5cadc;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: .2s color, .2s background, .2s border-color;
    background: transparent;
    outline: 0;
    cursor: pointer;
}

.lang-switcher a:hover, .lang-switcher button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
}

.lang-switcher a.is-active, .lang-switcher button.is-active {
    color: #fff;
    border-color: rgba(231, 76, 60, .55);
    background: rgba(231, 76, 60, .2);
}

@media (max-width: 560px) {
    .lang-switcher {
        margin-top: 12px;
        gap: 6px;
        padding: 5px;
    }

    .lang-switcher a, .lang-switcher button {
        font-size: .78rem;
        padding: 6px 9px;
    }
}

/* Admin AI assist (targeted fields only) */
.admin-page .admin-ai-assist-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-page .admin-ai-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.admin-page .admin-ai-translate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-page button.admin-ai-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px !important;
    border: 1px solid #363d58 !important;
    background: #151b2c !important;
    color: #dbe2f7 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    cursor: pointer;
}

.admin-page button.admin-ai-btn:hover {
    background: #1d253a !important;
    border-color: #5a688e !important;
}

.admin-page button.admin-ai-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.admin-page .admin-ai-lang {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 26px;
    padding: 0 6px !important;
    border-radius: 7px !important;
    text-transform: lowercase;
    text-align: center;
    font-size: 11px;
}

.admin-page .admin-ai-status {
    min-width: 0;
    font-size: 11px;
    color: #8f9abd;
    white-space: nowrap;
    margin-left: auto;
}

.admin-page .admin-ai-status.is-success {
    color: #92d9b2;
}

.admin-page .admin-ai-status.is-error {
    color: #e9a39d;
}

.admin-page .admin-ai-analysis {
    margin: 0 0 10px;
}

.admin-page .admin-ai-analysis-card {
    border: 1px solid #2f3651;
    background: #101628;
    border-radius: 10px;
    padding: 10px;
}

.admin-page .admin-ai-analysis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.admin-page .admin-ai-analysis-head h4 {
    margin: 0;
    font-size: .94rem;
}

.admin-page .admin-ai-score-pill {
    font-size: .78rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.admin-page .admin-ai-score-pill.is-good,
.admin-page .admin-ai-score.is-good {
    color: #9ee0b7;
    border-color: rgba(102, 194, 133, .45);
    background: rgba(42, 86, 61, .32);
}

.admin-page .admin-ai-score-pill.is-mid,
.admin-page .admin-ai-score.is-mid {
    color: #f0d39a;
    border-color: rgba(192, 143, 61, .45);
    background: rgba(88, 65, 28, .32);
}

.admin-page .admin-ai-score-pill.is-bad,
.admin-page .admin-ai-score.is-bad {
    color: #f3b2aa;
    border-color: rgba(176, 76, 76, .45);
    background: rgba(90, 37, 37, .32);
}

.admin-page .admin-ai-scores-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.admin-page .admin-ai-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #353c57;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: .8rem;
}

.admin-page .admin-ai-score strong {
    font-weight: 700;
}

.admin-page .admin-ai-analysis-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.admin-page .admin-ai-analysis-columns h5,
.admin-page .admin-ai-analysis-rewrite h5 {
    margin: 0 0 5px;
    font-size: .82rem;
}

.admin-page .admin-ai-analysis-columns ul {
    margin: 0;
    padding-left: 18px;
    font-size: .82rem;
}

.admin-page .admin-ai-analysis-columns li {
    margin-bottom: 4px;
}

.admin-page .admin-ai-suggested-reply {
    width: 100%;
    margin: 0;
    font-size: .86rem;
}

.admin-page .admin-ai-analysis-actions {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .admin-page .admin-ai-assist-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .admin-page .admin-ai-status {
        width: 100%;
        text-align: left;
        margin-left: 0;
    }

    .admin-page .admin-ai-scores-grid,
    .admin-page .admin-ai-analysis-columns {
        grid-template-columns: 1fr;
    }
}

/* Language list alignment */
.admin-page .form-inline-delete {
    margin-top: 8px;
}

.admin-page .language-delete-row {
    display: flex;
    justify-content: flex-end;
}

.admin-page .admin-language-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.admin-page .language-delete-row {
    display: none;
}
/* Existing languages cards */
.admin-page .admin-languages-list {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.admin-page .admin-language-item {
    border: 1px solid #2d3147;
    border-radius: 12px;
    background: #141827;
    padding: 14px;
}

.admin-page .admin-language-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-page .admin-language-id {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.admin-page .admin-language-id strong {
    font-size: 1rem;
}

.admin-page .admin-language-id span {
    color: #8f9abd;
    font-size: .85rem;
    letter-spacing: .08em;
}

.admin-page .admin-language-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-page .admin-language-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #3b435f;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .75rem;
    color: #cfd6ee;
    background: #1a2133;
}

.admin-page .admin-language-badge.is-default {
    border-color: #6f5cff;
    background: rgba(111, 92, 255, .22);
}

.admin-page .admin-language-badge.is-active {
    border-color: #2b9f66;
    background: rgba(43, 159, 102, .2);
}

.admin-page .admin-language-badge.is-inactive {
    border-color: #7a4252;
    background: rgba(122, 66, 82, .2);
}

.admin-page .admin-language-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.admin-page .language-delete-row {
    display: none;
}
/* Automations: full-width body editor + better paragraph readability */
.admin-page textarea.auto-template-body {
    width: 100% !important;
    min-height: 220px;
    line-height: 1.55;
    white-space: pre-wrap;
    resize: vertical;
    box-sizing: border-box;
}

/* Booking page */
.booking-shell .booking-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 14px;
    margin-top: 12px;
}

.booking-shell .booking-calendar,
.booking-shell .booking-form-wrap {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(14, 16, 24, .72);
}

.booking-shell .booking-calendar h3,
.booking-shell .booking-form-wrap h3 {
    margin: 0 0 10px;
}

.booking-shell .booking-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 410px;
    overflow: auto;
    padding-right: 3px;
}

.booking-shell .booking-day-btn {
    border: 1px solid #33384f;
    background: #0f1220;
    color: #eff2ff;
    border-radius: 10px;
    text-align: left;
    padding: 10px;
    display: grid;
    gap: 3px;
    cursor: pointer;
}

.booking-shell .booking-day-btn small {
    color: #adb4ca;
}

.booking-shell .booking-day-btn.is-active {
    border-color: rgba(231, 76, 60, .8);
    background: rgba(231, 76, 60, .14);
}

.booking-shell #selectedSlotLabel {
    margin: 0;
    font-size: .92rem;
}

@media (max-width: 900px) {
    .booking-shell .booking-grid {
        grid-template-columns: 1fr;
    }

    .booking-shell .booking-days {
        grid-template-columns: 1fr;
        max-height: 260px;
    }
}

/* Messages: compact reply tools */
.admin-page .admin-messages-actions .form {
    gap: 10px;
}

.admin-page .admin-messages-actions .admin-ai-assist-bar {
    margin: 0 0 8px;
}

.admin-page .admin-messages-actions .admin-ai-actions {
    gap: 6px;
}

/* Booking: true month calendar */
.booking-shell .booking-cal-head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.booking-shell .booking-cal-head strong {
    text-align: center;
    text-transform: capitalize;
}

.booking-shell .booking-cal-nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
}

.booking-shell .booking-cal-weekdays,
.booking-shell .booking-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.booking-shell .booking-cal-weekdays {
    margin-bottom: 6px;
}

.booking-shell .booking-cal-weekdays span {
    text-align: center;
    font-size: .8rem;
    color: #aab2ca;
}

.booking-shell .booking-cal-day,
.booking-shell .booking-cal-empty {
    min-height: 36px;
}

.booking-shell .booking-cal-day {
    border: 1px solid #343a53;
    background: #121729;
    color: #eef2ff;
    border-radius: 9px;
    cursor: pointer;
}

.booking-shell .booking-cal-day.is-active {
    border-color: rgba(231, 76, 60, .86);
    background: rgba(231, 76, 60, .18);
}

.booking-shell .booking-cal-day.is-disabled {
    opacity: .34;
    cursor: default;
}

.booking-shell .booking-cal-empty {
    border-radius: 9px;
    background: transparent;
}

.booking-shell .booking-time-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.booking-shell .booking-time-btn {
    border: 1px solid #343a53;
    background: #101423;
    color: #edf1ff;
    border-radius: 8px;
    min-height: 34px;
}

.booking-shell .booking-time-btn.is-active {
    border-color: rgba(231, 76, 60, .86);
    background: rgba(231, 76, 60, .2);
}

@media (max-width: 900px) {
    .booking-shell .booking-time-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Booking redesign */
.page-booking .booking-shell {
    background: linear-gradient(165deg, rgba(28, 32, 46, .95) 0%, rgba(15, 18, 30, .96) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
}

.page-booking .booking-shell h2 {
    margin: 2px 0 6px;
    font-size: clamp(1.5rem, 3.6vw, 2rem);
}

.page-booking .booking-shell > .note {
    color: #c9d0e5;
    margin-bottom: 14px;
}

.page-booking .booking-grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 16px;
    margin-top: 10px;
}

.page-booking .booking-calendar,
.page-booking .booking-form-wrap {
    border: 1px solid rgba(255, 255, 255, .11);
    background: linear-gradient(180deg, rgba(16, 20, 33, .94) 0%, rgba(12, 15, 24, .95) 100%);
    border-radius: 16px;
    padding: 14px;
}

.page-booking .booking-calendar h3,
.page-booking .booking-form-wrap h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: #f6f8ff;
}

.page-booking .booking-cal-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.page-booking .booking-cal-head strong {
    text-align: center;
    text-transform: capitalize;
    color: #edf2ff;
    letter-spacing: .01em;
}

.page-booking .booking-cal-nav {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #101425;
    color: #e5ebff;
    box-shadow: none;
}

.page-booking .booking-cal-nav:hover {
    background: #1a2035;
}

.page-booking .booking-cal-weekdays,
.page-booking .booking-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.page-booking .booking-cal-weekdays {
    margin-bottom: 6px;
}

.page-booking .booking-cal-weekdays span {
    text-align: center;
    font-size: .77rem;
    color: #9ea7c3;
    font-weight: 600;
}

.page-booking .booking-cal-day,
.page-booking .booking-cal-empty {
    min-height: 38px;
}

.page-booking .booking-cal-day {
    border: 1px solid rgba(255, 255, 255, .12);
    background: #11172a;
    color: #eaf0ff;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: .16s transform, .16s background, .16s border-color;
}

.page-booking .booking-cal-day:hover {
    transform: translateY(-1px);
    background: #1a2138;
    border-color: rgba(255, 255, 255, .24);
}

.page-booking .booking-cal-day.is-active {
    border-color: rgba(231, 76, 60, .92);
    background: linear-gradient(180deg, rgba(231, 76, 60, .24) 0%, rgba(231, 76, 60, .12) 100%);
}

.page-booking .booking-cal-day.is-disabled {
    opacity: .3;
    cursor: default;
    background: #0d1120;
}

.page-booking .booking-time-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.page-booking .booking-time-btn {
    border: 1px solid rgba(255, 255, 255, .13);
    background: #0f1424;
    color: #ecf1ff;
    border-radius: 9px;
    min-height: 34px;
    box-shadow: none;
}

.page-booking .booking-time-btn:hover {
    background: #1a2238;
}

.page-booking .booking-time-btn.is-active {
    border-color: rgba(231, 76, 60, .9);
    background: rgba(231, 76, 60, .22);
}

.page-booking .booking-form-wrap .form {
    gap: 9px;
}

.page-booking .booking-form-wrap .note strong {
    color: #f2f6ff;
}

.page-booking .booking-form-wrap button[type='submit'] {
    margin-top: 4px;
    min-height: 46px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f06252 0%, #e74c3c 100%);
    box-shadow: 0 10px 24px rgba(231, 76, 60, .27);
}

.page-booking .booking-form-wrap button[type='submit']:hover {
    background: linear-gradient(180deg, #ff6d5d 0%, #ee5444 100%);
}

@media (max-width: 980px) {
    .page-booking .booking-grid {
        grid-template-columns: 1fr;
    }

    .page-booking .booking-time-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}




/* Admin bookings: native datetime icon in white */
.admin-page input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.9);
    opacity: 1;
    cursor: pointer;
}

/* Admin sidebar: adapt to content height */
.admin-page .admin-wrap {
    min-height: auto !important;
    align-items: start !important;
}

.admin-page .admin-sidebar {
    height: auto !important;
    max-height: none !important;
    align-self: start !important;
}

/* Booking admin: force native calendar icon white */
.admin-page .admin-content input[type="datetime-local"] {
    color-scheme: dark;
}

.admin-page .admin-content input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2) contrast(1.05) !important;
    opacity: 1 !important;
}

/* Admin bookings: hard force white native date-time icon */
.admin-page input[name="block_start_at"],
.admin-page input[name="block_end_at"],
.admin-page input[type="datetime-local"] {
    color-scheme: dark !important;
}

.admin-page input[name="block_start_at"]::-webkit-calendar-picker-indicator,
.admin-page input[name="block_end_at"]::-webkit-calendar-picker-indicator,
.admin-page input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2.2) contrast(1.15) !important;
    opacity: 1 !important;
}

/* Admin bookings datetime icon fallback (always white) */
.admin-page .admin-booking-datetime {
    padding-right: 2.2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .6rem center !important;
    background-size: 1rem 1rem !important;
}

.admin-page .admin-booking-datetime::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 1.9rem !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Admin bookings datetime icon fixed (no shift on click) */
.admin-page .admin-booking-datetime-wrap {
    position: relative;
    display: block;
}

.admin-page .admin-booking-datetime-wrap::after {
    content: '';
    position: absolute;
    right: .7rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.admin-page .admin-booking-datetime {
    padding-right: 2.35rem !important;
    background-image: none !important;
}

.admin-page .admin-booking-datetime::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.2rem;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* Admin bookings: custom date-time picker (non-native) */
.admin-page .admin-booking-picker-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.admin-page .admin-booking-picker-input {
    min-height: 42px;
}

.admin-page .admin-booking-picker-open {
    white-space: nowrap;
    padding: 11px 12px;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid #3a3f59;
    background: #1a1f30;
    color: #ffffff;
}

.admin-page .admin-booking-picker-open:hover {
    background: #232a3f;
}

.admin-booking-picker {
    position: absolute;
    z-index: 9999;
    width: 300px;
    border: 1px solid #3a3f59;
    border-radius: 12px;
    padding: 10px;
    background: #141926;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

.admin-booking-picker-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.admin-booking-picker-title {
    text-align: center;
    font-size: 14px;
}

.admin-booking-picker-nav {
    padding: 7px 0;
    border-radius: 8px;
    border: 1px solid #3a3f59;
    background: #1f2536;
}

.admin-booking-picker-week,
.admin-booking-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.admin-booking-picker-week span {
    text-align: center;
    font-size: 12px;
    color: #b5bfd9;
}

.admin-booking-picker-grid {
    margin-top: 5px;
}

.admin-booking-picker-grid .is-empty {
    min-height: 30px;
}

.admin-booking-picker-day {
    min-height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #2d344d;
    background: #1a2133;
    color: #ffffff;
    font-weight: 500;
}

.admin-booking-picker-day:hover {
    background: #242d45;
}

.admin-booking-picker-day.is-selected {
    background: #e74c3c;
    border-color: #e74c3c;
}

.admin-booking-picker-time {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.admin-booking-picker-time select {
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid #3a3f59;
    background: #0f1421;
    color: #ffffff;
}

.admin-booking-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.admin-booking-picker-actions button {
    min-height: 38px;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .admin-booking-picker {
        width: min(300px, calc(100vw - 24px));
    }
}

/* Email signature HTML preview */
.signature-shot-wrap {
    min-height: 220px;
    background: #ffffff;
}

.signature-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border: 0;
    display: block;
    background: #ffffff;
}

/* Email signatures page */
body.page-email-signatures .container {
    width: min(1240px, 95vw);
}

.signatures-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 191, 94, .2), transparent 34%),
        radial-gradient(circle at 95% 5%, rgba(76, 145, 255, .2), transparent 36%),
        linear-gradient(165deg, rgba(24, 27, 40, .96) 0%, rgba(12, 14, 24, .98) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
}

.signatures-layout {
    display: grid;
    grid-template-columns: 1.45fr .9fr;
    gap: 16px;
    align-items: start;
}

.signatures-showcase {
    display: grid;
    gap: 12px;
}

.signatures-topline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.signatures-topline .note {
    margin: 0;
}

.signature-inbox {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(20, 23, 35, .94) 0%, rgba(12, 15, 24, .96) 100%);
}

.signature-inbox-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 10px;
}

.signature-inbox-head strong {
    font-size: .92rem;
    letter-spacing: .01em;
}

.signature-inbox-head span {
    color: var(--muted);
    font-size: .8rem;
}

.signature-inbox-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.signature-mail-item {
    border: 1px solid #333a54;
    border-radius: 10px;
    background: #101526;
    color: #eef2ff;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: .2s border-color, .2s background, .2s transform;
}

.signature-mail-item:hover {
    border-color: rgba(255, 191, 94, .75);
    transform: translateY(-1px);
}

.signature-mail-item.is-active {
    border-color: rgba(255, 191, 94, .85);
    background: linear-gradient(180deg, rgba(255, 191, 94, .2) 0%, rgba(255, 191, 94, .08) 100%);
}

.signature-mail-item span {
    display: block;
    font-size: .9rem;
    font-weight: 600;
}

.signature-mail-item small {
    display: block;
    margin-top: 5px;
    color: #b8c0db;
    font-size: .76rem;
}

.signatures-slider-shell {
    position: relative;
}

.signatures-slider-shell .portfolio-slider {
    gap: 12px;
}

.signature-slide {
    border: 1px solid rgba(255, 255, 255, .15);
    background: linear-gradient(175deg, rgba(24, 28, 42, .95) 0%, rgba(13, 16, 26, .98) 100%);
}

.signature-slide .portfolio-shot-wrap {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.signature-tags {
    display: flex;
    gap: 6px;
    margin: 8px 0 10px;
    flex-wrap: wrap;
}

.signature-tags span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 191, 94, .45);
    background: rgba(255, 191, 94, .14);
    color: #ffe0aa;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 8px;
}

body.page-email-signatures .portfolio-slider-shell .portfolio-nav,
.signatures-slider-shell .portfolio-nav {
    background: #172036;
    border: 1px solid rgba(255, 255, 255, .2);
}

.signatures-slider-shell .portfolio-nav:hover {
    border-color: rgba(255, 191, 94, .7);
    background: #202b47;
}

body.page-email-signatures .trailer-form {
    position: sticky;
    top: 20px;
}

@media (max-width: 1040px) {
    .signatures-layout {
        grid-template-columns: 1fr;
    }

    body.page-email-signatures .trailer-form {
        position: static;
    }
}

@media (max-width: 780px) {
    .signature-inbox-list {
        grid-template-columns: 1fr;
    }

    .signatures-topline {
        grid-template-columns: 1fr;
    }
}

/* Message form redesign */
.message-form-shell {
    max-width: 880px !important;
    margin: 0 auto !important;
    padding: 24px;
    border-radius: 14px;
}

/* Keep the message form page background identical to the global site background */
.message-form-shell > h2 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.15;
    color: var(--text);
}

.message-form-intro {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.65;
    font-size: .98rem;
}

.message-form {
    display: grid;
    gap: 16px;
}

.message-form-section {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, .02);
    display: grid;
    gap: 12px;
}

.message-form-section h3 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text);
}

.message-form-section-intro {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: .93rem;
}

.message-form-field {
    display: grid;
    gap: 9px;
}

.message-form-label {
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
}

.message-form-helper {
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.5;
}

.message-form textarea {
    min-height: 120px;
    resize: vertical;
}

.message-form-options {
    display: grid;
    gap: 8px;
}

.message-form-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #0f1016;
    transition: border-color .18s ease, background-color .18s ease;
}

.message-form-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(231, 76, 60, .1);
}

.message-form-option input[type="radio"],
.message-form-option input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px;
    height: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    appearance: auto;
    -webkit-appearance: auto;
    margin-top: 2px;
    accent-color: var(--accent);
}

.message-form-submit {
    width: 100%;
    margin-top: 8px;
    min-height: 48px;
    font-weight: 700;
    letter-spacing: .01em;
}

.message-form-shell .error,
.message-form-shell .notice {
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 11px 12px;
}

/* Admin lead analysis */
.admin-page .admin-lead-analysis ul {
    margin: 6px 0 10px;
    padding-left: 18px;
}

.admin-page .admin-lead-analysis li {
    margin: 4px 0;
}

.admin-page .admin-lead-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-page .admin-lead-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.admin-page .admin-lead-badge.is-green {
    color: #b6ffcf;
    background: rgba(29, 161, 84, .25);
    border-color: rgba(29, 161, 84, .6);
}

.admin-page .admin-lead-badge.is-orange {
    color: #ffd9a4;
    background: rgba(219, 140, 47, .22);
    border-color: rgba(219, 140, 47, .55);
}

.admin-page .admin-lead-badge.is-red {
    color: #ffb6b6;
    background: rgba(200, 64, 64, .24);
    border-color: rgba(200, 64, 64, .6);
}

.admin-page .admin-lead-score {
    color: #e1e6f7;
    font-weight: 600;
}

.admin-page .admin-lead-responses {
    margin-top: 10px;
    border-top: 1px solid #31364f;
    padding-top: 10px;
}

@media (max-width: 560px) {
    .message-form-shell {
        padding: 18px;
        border-radius: 14px;
    }

    .message-form-section {
        padding: 12px;
        border-radius: 12px;
    }

    .message-form-option {
        padding: 9px 10px;
    }
}

/* Admin tables: centered values */
.admin-page table th,
.admin-page table td {
    text-align: center;
    vertical-align: middle;
}

/* Admin links: force white for readability */
.admin-page a,
.admin-page a:visited,
.admin-page a:hover,
.admin-page a:focus,
.admin-page a:active {
    color: #ffffff !important;
}

/* Keep original sidebar link colors */
.admin-page .admin-sidebar a,
.admin-page .admin-sidebar a:visited {
    color: #b9bdd0 !important;
}

.admin-page .admin-sidebar a:hover,
.admin-page .admin-sidebar a:focus,
.admin-page .admin-sidebar a:active,
.admin-page .admin-sidebar a.is-active {
    color: #ffffff !important;
}

.admin-page .admin-booking-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #434a64;
    background: #20263a;
    color: #e7ebf8;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-page .admin-booking-status.is-pending {
    background: rgba(219, 140, 47, .20);
    border-color: rgba(219, 140, 47, .55);
    color: #ffd8a5;
}

.admin-page .admin-booking-status.is-confirmed {
    background: rgba(70, 175, 96, .20);
    border-color: rgba(70, 175, 96, .55);
    color: #b8f3c7;
}

.admin-page .admin-booking-status.is-canceled {
    background: rgba(188, 82, 82, .20);
    border-color: rgba(188, 82, 82, .55);
    color: #ffbcbc;
}

.admin-page .admin-booking-status.is-done {
    background: rgba(87, 116, 186, .20);
    border-color: rgba(87, 116, 186, .55);
    color: #c4d8ff;
}

.admin-page .admin-booking-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0;
}

.admin-page .admin-booking-actions .admin-inline-form {
    margin-right: 0;
    margin-bottom: 0;
}

.admin-page .admin-booking-action-btn {
    font-size: .82rem;
    padding: 6px 9px;
    min-height: 32px;
}

.admin-page .admin-booking-advanced {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.admin-page .admin-booking-advanced select {
    width: auto;
    min-width: 130px;
}

.admin-page .admin-booking-notify {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    color: #cfd4e7;
}