/* Keep the interface typography on the ClickLoop origin. Ad blockers and privacy
   extensions often block Google Fonts together with advertising domains. */
@font-face {
    font-family: "Noto Kufi Arabic";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/noto-kufi-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "Noto Kufi Arabic";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/noto-kufi-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #08090d;
    --bg-2: #0e1117;
    --surface: #141821;
    --surface-2: #1b202b;
    --line: #2b303c;
    --line-strong: #050507;
    --text: #f6f1e7;
    --muted: #b6ad9c;
    --muted-2: #7f8794;
    --orange: #f47c20;
    --orange-2: #ff9d42;
    --gold: #d7a94d;
    --gold-soft: rgba(215, 169, 77, .2);
    --green: #1fbf75;
    --blue: #62a8ff;
    --danger: #ff625f;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
    --radius: 8px;
    --topbar-height: 78px;
    --page-padding: 24px;
    --content-gap: 26px;
    --section-gap: 16px;
    --card-gap: 14px;
    --tool-card-min-height: 150px;
    --tool-card-padding: 16px;
    --workbench-min-height: 320px;
}

/* Reserve icon space before Lucide finishes loading so buttons never jump or look broken. */
i[data-lucide] {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Shared modern dropdown for image tools. The native select remains available
   to the existing processing code while this surface handles interaction. */
.image-modern-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.image-modern-select {
    position: relative;
    z-index: 4;
    display: block;
    width: 100%;
    min-width: 0;
}

.image-modern-select[open] {
    z-index: 80;
}

.image-modern-select-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 100%;
    padding: 7px 34px;
    border: 1px solid rgba(215, 169, 77, .34);
    border-radius: 10px;
    color: var(--text);
    background: linear-gradient(145deg, rgba(20, 24, 33, .98), rgba(10, 13, 19, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    font-size: .77rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

.image-modern-select-summary::-webkit-details-marker {
    display: none;
}

.image-modern-select-summary > svg {
    position: absolute;
    inset-inline-end: 10px;
    width: 15px;
    height: 15px;
    color: var(--orange-2);
    transition: transform .16s ease;
}

.image-modern-select-current {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.image-modern-select[open] .image-modern-select-summary {
    border-color: rgba(255, 157, 66, .78);
    background: rgba(244, 124, 32, .1);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, .1);
}

.image-modern-select[open] .image-modern-select-summary > svg {
    transform: rotate(180deg);
}

.image-modern-select.is-disabled .image-modern-select-summary {
    opacity: .55;
    cursor: not-allowed;
}

.image-modern-select-options {
    position: absolute;
    z-index: 81;
    inset-block-start: calc(100% + 5px);
    inset-inline: 0;
    display: grid;
    gap: 3px;
    width: 100%;
    max-height: min(310px, 52vh);
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(215, 169, 77, .42);
    border-radius: 10px;
    background: #171d28;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .42);
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
}

.image-modern-select:not([open]) > .image-modern-select-options {
    display: none;
}

.image-modern-select-options button {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.image-modern-select-options button:hover,
.image-modern-select-options button:focus-visible,
.image-modern-select-options button.is-active {
    outline: 0;
    color: #1b1208;
    background: linear-gradient(135deg, #ff7d1a, #ffab2e);
}

.image-modern-select-options button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.image-modern-select-group {
    padding: 7px 8px 3px;
    border-block-start: 1px solid rgba(255, 255, 255, .07);
    color: var(--orange-2);
    font-size: .62rem;
    font-weight: 900;
    text-align: start;
}

.image-modern-select-group:first-child {
    border-block-start: 0;
}

.converter-select-card,
.animated-select-field,
.resizer-controls label,
.watermark-row label,
.story-caption-opacity {
    overflow: visible;
}

@media (max-width: 620px) {
    .image-modern-select-summary {
        min-height: 38px;
        padding-block: 6px;
        font-size: .7rem;
    }

    .image-modern-select-options {
        max-height: min(270px, 48vh);
    }

    .image-modern-select-options button {
        min-height: 32px;
        font-size: .68rem;
    }
}

.extension-connect-page {
    display: grid;
    min-height: min(620px, calc(100vh - 190px));
    place-items: center;
    padding: clamp(24px, 5vw, 64px) 18px;
}

.extension-connect-card {
    width: min(100%, 560px);
    padding: clamp(26px, 5vw, 44px);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 4%, rgba(255, 148, 31, .14), transparent 32%),
        var(--surface, #111827);
    box-shadow: 0 28px 80px rgba(2, 6, 23, .24);
    text-align: center;
}

.extension-connect-icon {
    display: inline-grid;
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 21px;
    background: linear-gradient(135deg, #ffb034, #f2760b);
    color: #161009;
    box-shadow: 0 16px 36px rgba(242, 118, 11, .24);
}

.extension-connect-icon svg {
    width: 34px;
    height: 34px;
}

.extension-connect-card h1 {
    margin: 0 0 10px;
    font-size: clamp(24px, 4vw, 34px);
}

.extension-connect-card > p {
    margin: 0 auto 22px;
    color: var(--muted, #94a3b8);
    line-height: 1.8;
}

.extension-connect-actions,
.extension-connect-card form {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.extension-connect-details {
    display: grid;
    gap: 9px;
    margin: 24px 0;
    text-align: start;
}

.extension-connect-details div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

.extension-connect-details dt {
    color: var(--muted, #94a3b8);
}

.extension-connect-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.extension-connect-success,
.extension-connect-error {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
}

.extension-connect-success {
    background: rgba(34, 197, 94, .12);
    color: #86efac;
}

.extension-connect-error {
    background: rgba(239, 68, 68, .12);
    color: #fca5a5 !important;
}

.extension-connect-success svg,
.extension-connect-error svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 540px) {
    .extension-connect-actions {
        flex-direction: column;
    }
}

.tool-workbench.image-compressor-workbench {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
    gap: 1rem;
}

.tool-workbench.image-compressor-workbench:has(.image-compressor-result-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    justify-content: stretch;
}

.image-compressor-panel,
.image-compressor-result-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    box-shadow: var(--shadow);
}

.image-compressor-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    justify-self: center;
}

.tool-workbench.image-compressor-workbench:has(.image-compressor-result-panel:not([hidden])) .image-compressor-panel {
    width: 100%;
    justify-self: stretch;
}

.image-compressor-result-panel[hidden] {
    display: none;
}

.compressor-dropzone {
    min-height: 12rem;
}

.compressor-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.compressor-option-card {
    min-width: 0;
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .025);
}

.compressor-option-card legend,
.compressor-option-card > span {
    display: block;
    padding: 0;
    margin: 0 0 .65rem;
    color: var(--text);
    font-size: .9rem;
    font-weight: 800;
}

.compressor-option-card label:not(.compressor-select-card) {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .27rem 0;
    color: var(--muted);
    font-size: .84rem;
    cursor: pointer;
}

.compressor-option-card input {
    accent-color: var(--orange);
}

.compressor-select-card select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: .65rem;
    padding: .65rem .7rem;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
}

/* Compression level is a single choice, so present it as one concise field. */
.compressor-profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
}

.compressor-profile-card > span {
    margin: 0;
    white-space: nowrap;
}

.compressor-profile-label-mobile {
    display: none;
}

.compressor-profile-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
}

/* The generic card label rule also targets spans. Keep these option rows as
   grids so their available width is shared by every choice. */
.compressor-profile-card > .compressor-profile-options {
    display: grid;
    width: 100%;
}

.compressor-profile-options button {
    min-width: 0;
    min-height: 36px;
    padding: 5px 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    background: rgba(8, 9, 13, .52);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}

.compressor-profile-options button.is-active {
    border-color: rgba(244, 124, 32, .75);
    color: #1b1208;
    background: linear-gradient(135deg, #ff7d1a, #ffab2e);
}

.compressor-choice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
}

.compressor-choice-card > span {
    margin: 0;
}

.compressor-choice-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    width: 100%;
}

.compressor-choice-card > .compressor-choice-options {
    display: grid;
    width: 100%;
}

.compressor-choice-options button {
    min-width: 0;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    background: rgba(8, 9, 13, .52);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.12;
    cursor: pointer;
}

.compressor-choice-options button.is-active {
    border-color: rgba(244, 124, 32, .75);
    color: #1b1208;
    background: linear-gradient(135deg, #ff7d1a, #ffab2e);
}

.compressor-choice-short {
    display: none;
}

.compressor-desktop-select { display: none; }

@media (min-width: 621px) {
    .compressor-profile-card > .compressor-profile-options,
    .compressor-choice-card > .compressor-choice-options {
        display: none !important;
    }

    .compressor-desktop-select {
        display: block;
        position: relative;
        width: 100%;
    }

    .compressor-desktop-menu {
        position: relative;
        z-index: 1;
    }

    .compressor-desktop-menu[open] { z-index: 30; }

    .compressor-desktop-menu summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 8px 11px;
        border: 1px solid rgba(215, 169, 77, .34);
        border-radius: 10px;
        color: var(--text);
        background: linear-gradient(145deg, rgba(20, 24, 33, .98), rgba(10, 13, 19, .94));
        box-shadow: inset 0 1px rgba(255, 255, 255, .025);
        cursor: pointer;
        font-size: .79rem;
        font-weight: 800;
        list-style: none;
    }

    .compressor-desktop-menu summary::-webkit-details-marker { display: none; }

    .compressor-desktop-menu summary svg {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        color: var(--orange-2);
        transition: transform 160ms ease;
    }

    .compressor-desktop-menu[open] summary {
        border-color: rgba(255, 157, 66, .78);
        background: rgba(244, 124, 32, .1);
        box-shadow: 0 0 0 3px rgba(244, 124, 32, .1);
    }

    .compressor-desktop-menu[open] summary svg { transform: rotate(180deg); }

    .compressor-desktop-menu-options {
        position: absolute;
        z-index: 31;
        inset-block-start: calc(100% + 6px);
        inset-inline: 0;
        display: grid;
        gap: 3px;
        padding: 5px;
        border: 1px solid rgba(215, 169, 77, .42);
        border-radius: 10px;
        background: #171d28;
        box-shadow: 0 16px 30px rgba(0, 0, 0, .42);
    }

    .compressor-desktop-menu-options button {
        width: 100%;
        min-height: 34px;
        padding: 6px 9px;
        border: 0;
        border-radius: 7px;
        color: var(--muted);
        background: transparent;
        font: inherit;
        font-size: .75rem;
        font-weight: 800;
        text-align: start;
        cursor: pointer;
    }

    .compressor-desktop-menu-options button:hover,
    .compressor-desktop-menu-options button:focus-visible,
    .compressor-desktop-menu-options button.is-active {
        outline: 0;
        color: #1b1208;
        background: linear-gradient(135deg, #ff7d1a, #ffab2e);
    }
}

@media (max-width: 620px) {
    .image-compressor-result-panel .compressor-stats {
        gap: 5px;
        margin-bottom: 10px;
    }

    .image-compressor-result-panel .compressor-stats span {
        padding: 7px 4px;
        border-radius: 10px;
        text-align: center;
    }

    .image-compressor-result-panel .compressor-stats small {
        font-size: .62rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .image-compressor-result-panel .compressor-stats b {
        overflow: visible;
        margin-top: 3px;
        font-size: .74rem;
        line-height: 1.28;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        font-variant-numeric: tabular-nums;
    }

    .image-compressor-workbench .compressor-note {
        font-size: calc(.84rem - 1px);
    }

    .image-compressor-workbench + .compressor-seo-note h2 {
        font-size: clamp(.72rem, 3vw, .82rem);
        line-height: 1.2;
        letter-spacing: -.2px;
        white-space: nowrap;
    }

    .image-compressor-workbench .compressor-supported-formats {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        align-items: center;
        justify-items: stretch;
    }

    .image-compressor-workbench .compressor-formats-label {
        display: inline-flex;
        align-items: center;
        justify-self: start;
        gap: 5px;
        font-size: .72rem;
        white-space: nowrap;
    }

    .image-compressor-workbench .compressor-formats-list {
        display: block;
        width: 100%;
        text-align: center;
        font-size: .66rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .image-compressor-workbench .compressor-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 8px 0;
    }

    .image-compressor-workbench .compressor-option-card {
        padding: 5px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: rgba(8, 9, 13, .3);
    }

    .compressor-profile-card {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        width: 100%;
    }

    .compressor-profile-card > .compressor-profile-label {
        min-width: 34px;
        font-size: .66rem;
    }

    .compressor-profile-label-full {
        display: none;
    }

    .compressor-profile-label-mobile {
        display: inline;
    }

    .compressor-profile-options {
        display: grid;
        min-width: 0;
        width: 100%;
        justify-self: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }

    .compressor-profile-card > .compressor-profile-options {
        display: grid;
    }

    .compressor-profile-options button {
        min-height: 35px;
        padding: 4px 2px;
        font-size: clamp(.61rem, 2.25vw, .68rem);
        white-space: nowrap;
        border-color: rgba(151, 165, 189, .34);
    }

    html[dir="ltr"] .compressor-profile-card > .compressor-profile-label {
        font-size: .58rem;
    }

    html[dir="ltr"] .compressor-profile-options button {
        font-size: clamp(.51rem, 2vw, .61rem);
    }

    .compressor-choice-card {
        gap: 5px;
    }

    .compressor-choice-card > span:first-child {
        font-size: .66rem;
        white-space: nowrap;
    }

    .compressor-choice-options {
        gap: 5px;
    }

    .compressor-choice-card > .compressor-choice-options {
        display: grid;
    }

    .compressor-dimensions-card .compressor-choice-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compressor-output-card .compressor-choice-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compressor-choice-options button {
        min-height: 30px;
        width: 100%;
        padding: 3px 1px;
        border-radius: 5px;
        font-size: clamp(.5rem, 2vw, .6rem);
    }

    .compressor-choice-full {
        display: none;
    }

    .compressor-choice-short {
        display: inline;
    }
}

/* Shared file uploads and download pages.  Files are deliberately presented
   as downloads, never as executable or inline content. */
.shared-file-upload-workbench {
    width: 100%;
    margin-inline: auto;
}

.shared-file-page {
    width: min(100%, 760px);
    margin-inline: auto;
}

.shared-file-upload-workbench .image-upload-panel {
    display: grid;
    gap: 12px;
}

.shared-file-upload-error {
    width: fit-content;
    max-width: min(100%, 30rem);
    margin: 0 auto 12px;
    padding: .55rem .8rem;
}

.shared-file-upload-error p { margin: 0; }

.shared-file-upload-progress {
    width: min(100%, 430px);
    justify-self: center;
    margin-top: 3px;
    padding: 9px 11px;
    gap: 6px;
    border-color: rgba(244, 124, 32, .34);
    background: rgba(244, 124, 32, .07);
}

.shared-file-upload-progress .upload-progress-track { height: 9px; }

.shared-file-upgrade-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: -3px 0 0;
    padding: 6px 9px 0;
    border-top: 1px solid rgba(244, 124, 32, .32);
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.35;
    text-align: center;
}

.shared-file-upgrade-note svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    color: var(--orange-2);
}

.shared-file-upgrade-note a {
    color: #e8bd72;
    font-weight: 750;
    text-decoration: none;
}

.shared-file-upgrade-note a:hover,
.shared-file-upgrade-note a:focus-visible {
    color: var(--orange-2);
    outline: 0;
}

@media (min-width: 621px) {
    .shared-file-upload-workbench .image-upload-panel {
        justify-items: center;
    }

    .shared-file-upload-workbench .image-dropzone,
    .shared-file-upload-workbench .supported-format-strip {
        width: min(100%, 520px);
    }

    .shared-file-upload-workbench .contact-turnstile {
        justify-self: center;
    }
}

.shared-file-types {
    justify-content: center;
    text-align: center;
}

.shared-file-types strong {
    letter-spacing: .02em;
}

.shared-file-success,
.shared-file-card,
.shared-file-ad,
.shared-file-safety {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 16px;
}

.shared-file-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    color: var(--text);
}

.shared-file-success > svg { color: #23c77c; flex: 0 0 auto; }
.shared-file-success div { display: grid; gap: 2px; min-width: 0; }
.shared-file-success span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }

/* The completed-upload details are concise; keep them comfortably readable
   instead of stretching across the entire desktop content column. */
.shared-file-upload-workbench > .shared-file-success,
.shared-file-upload-workbench > .file-share-link {
    width: min(100%, 540px);
    justify-self: center;
}

.shared-file-upload-workbench > .primary-action {
    width: fit-content;
    min-width: 0;
    justify-self: center;
}

.shared-file-upload-success-ad {
    width: min(100%, 540px);
    min-height: 96px;
    justify-self: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.shared-file-upload-success-ad .page-ad-slider,
.shared-file-upload-success-ad .page-ad-slide,
.shared-file-upload-success-ad .page-ad-link,
.shared-file-upload-success-ad .page-ad-code {
    min-height: 96px;
}

.shared-file-upload-success-ad img,
.shared-file-upload-success-ad .page-ad-code iframe,
.shared-file-upload-success-ad .page-ad-code ins {
    width: 100%;
    max-width: 100%;
    min-height: 96px;
    object-fit: cover;
}

.file-share-link,
.shared-file-share {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    margin-top: 12px;
}

.file-share-link > span { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.file-share-link input,
.shared-file-share input {
    min-width: 0;
    direction: ltr;
    min-height: 42px;
    padding-block: 2px;
    text-align: center;
    color: var(--text);
    background: rgba(10, 14, 21, .92);
    border: 1px solid var(--line);
    border-radius: .65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.file-share-link .icon-button,
.shared-file-share .icon-button {
    align-self: end;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    box-sizing: border-box;
}

.file-share-copy {
    position: relative;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.file-share-copy.is-copied {
    color: #23c77c;
    border-color: rgba(35, 199, 124, .72);
    background: rgba(35, 199, 124, .12);
    transform: translateY(-1px);
}

.file-share-copy.is-copied::after {
    content: attr(data-copied-label);
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 7px);
    z-index: 5;
    padding: 4px 7px;
    border: 1px solid rgba(35, 199, 124, .52);
    border-radius: 7px;
    color: #d8ffe9;
    background: #10251d;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.shared-file-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0 16px;
    border-bottom: 1px solid rgba(244,124,32,.35);
}

.shared-file-head .page-icon {
    position: static;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,124,32,.45);
    border-radius: 11px;
    color: var(--orange);
}

.shared-file-head h1 { margin: 3px 0; font-size: clamp(1.05rem, 2vw, 1.4rem); overflow-wrap: anywhere; }
.shared-file-head p { margin: 0; color: var(--muted); font-size: .84rem; }

.shared-file-card { margin-top: 16px; padding: 16px; display: grid; gap: 14px; }
.shared-file-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .8rem; }
.shared-file-meta span { display: inline-flex; align-items: center; gap: 5px; }
.shared-file-meta svg { width: 14px; height: 14px; color: var(--orange); }
.shared-file-download { justify-self: center; min-width: min(100%, 250px); }
.shared-file-share { margin-top: 0; align-items: center; }
.shared-file-ad { margin-top: 16px; padding: 10px; }
.shared-file-ad > small { display: block; margin-bottom: 6px; color: var(--muted); font-size: .66rem; text-align: center; }
.shared-file-safety { display: flex; gap: 7px; margin-top: 12px; padding: 10px 12px; color: var(--muted); font-size: .77rem; line-height: 1.7; }
.shared-file-safety svg { flex: 0 0 auto; width: 16px; margin-top: 3px; color: var(--orange); }

.admin-download-ad-placement,
.admin-upload-success-ad-placement {
    display: grid;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(244,124,32,.3);
}

@media (max-width: 620px) {
    .shared-file-upload-workbench,
    .shared-file-page { width: 100%; }
    .shared-file-upload-workbench .image-dropzone { min-height: 82px; }
    .shared-file-upload-workbench .supported-format-strip {
        min-height: 0;
        flex-direction: row;
        justify-content: center;
        gap: 3px 6px;
        padding: 5px 7px;
        border-radius: .55rem;
        font-size: .68rem;
        line-height: 1.35;
    }
    .shared-file-upload-workbench .supported-format-strip span,
    .shared-file-upload-workbench .supported-format-strip strong { font-size: inherit; }
    .shared-file-upload-workbench .primary-action.image-upload-submit {
        width: fit-content;
        min-width: 0;
        min-height: 42px;
        justify-self: center;
        padding: .5rem .8rem;
        font-size: .82rem;
    }
    .shared-file-upgrade-note {
        gap: 4px;
        padding-inline: 6px;
        font-size: .62rem;
        white-space: nowrap;
    }
    .shared-file-upload-workbench .shared-file-upload-progress {
        width: 100%;
        margin-top: 5px;
        padding: 8px 9px;
        border-radius: .65rem;
    }
    .shared-file-upload-workbench .shared-file-upload-progress .upload-progress-label { font-size: .72rem; }
    .shared-file-upload-workbench .shared-file-upload-progress .upload-progress-track { height: 8px; }
    .shared-file-upload-workbench .contact-turnstile {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .shared-file-upload-workbench .contact-turnstile > * { margin-inline: auto; }
    .shared-file-card { padding: 11px; gap: 10px; }
    .shared-file-meta { gap: 6px 9px; font-size: .73rem; }
    .shared-file-share { gap: 5px; }
    .file-share-link input,
    .shared-file-share input { min-height: 40px; height: 40px; }
    .shared-file-share .icon-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; }
    .shared-file-head { gap: 8px; padding-inline: 2px; }
    .shared-file-head .page-icon { width: 34px; height: 34px; }
}

.compressor-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.65;
}

.compressor-note svg {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--orange);
}

.tool-workbench.image-cropper-workbench {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
    gap: 1rem;
}

.tool-workbench.image-editor-workbench {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

.tool-workbench.image-resizer-workbench { display:grid; grid-template-columns:minmax(0,760px); justify-content:center; }
.tool-workbench.image-watermark-workbench { display:grid; grid-template-columns:minmax(0,760px); justify-content:center; }
.image-watermark-panel { display:grid; gap:14px; width:min(760px,100%); }
.watermark-another { display:inline-flex; align-items:center; justify-content:center; justify-self:center; gap:.45rem; width:fit-content; padding:.55rem .8rem; color:var(--text); font:inherit; line-height:1; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); cursor:pointer; }
.watermark-another svg { flex:0 0 auto; width:1rem; height:1rem; }
.watermark-controls { display:grid; gap:.6rem; padding:.65rem; border:1px solid var(--line); border-radius:.85rem; }
.watermark-controls[hidden],.watermark-preview[hidden] { display:none; }
.watermark-row { display:flex; flex-wrap:wrap; align-items:end; gap:.6rem; }
.watermark-row:not(.watermark-settings) { justify-content:space-between; }
.watermark-row > label { flex:0 0 auto; }
.watermark-row > label[data-watermark-text-wrap] input { width:17ch; }
.watermark-row > label[data-watermark-color-wrap] { width:5.25rem; }
.watermark-row > label[data-watermark-opacity-wrap] { display:flex; align-items:center; gap:.45rem; }
.watermark-row > label[data-watermark-opacity-wrap] input { width:7.5rem; padding:0; }
.watermark-row > label[data-watermark-opacity-wrap] output { min-width:2.6rem; color:var(--text); text-align:center; }
.watermark-controls label { display:grid; gap:.3rem; color:var(--muted); font-size:.82rem; }
.watermark-controls input,.watermark-controls select { min-width:0; padding:.42rem .5rem; color:var(--text); font:inherit; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); }
.watermark-controls input[type="color"] { width:100%; min-height:2.3rem; padding:.15rem; }
.watermark-logo-picker { display:flex; align-items:center; gap:.5rem; min-width:0; padding:.38rem .5rem; border:1px dashed var(--line); border-radius:.55rem; background:rgba(255,255,255,.025); cursor:pointer; }
.watermark-logo-picker > span { display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; padding:.3rem .45rem; color:var(--text); border-radius:.4rem; background:var(--surface); }
.watermark-logo-picker svg { width:.9rem; }
.watermark-logo-picker small { overflow:hidden; color:var(--muted-2); text-overflow:ellipsis; white-space:nowrap; }
.watermark-preview { display:grid; place-items:center; min-height:16rem; overflow:auto; padding:.7rem; border:1px solid var(--line); border-radius:.9rem; background:rgba(0,0,0,.12); }
.watermark-preview canvas { display:block; max-width:100%; max-height:34rem; object-fit:contain; box-shadow:0 .4rem 1.2rem rgba(0,0,0,.2); cursor:grab; touch-action:none; }
.watermark-preview canvas:active { cursor:grabbing; }
.watermark-drag-hint { display:flex; align-items:center; gap:.35rem; margin:0; color:var(--muted); font-size:.8rem; }
.watermark-drag-hint svg { width:1rem; height:1rem; }
@media(max-width:650px){
    .watermark-row:not(.watermark-settings){
        display:grid;
        grid-template-columns:repeat(10,minmax(0,1fr));
        align-items:end;
        row-gap:5px;
        column-gap:7px;
    }
    .watermark-row > label{min-width:0;}
    .watermark-row > label:first-child,
    .watermark-row > label[data-watermark-text-wrap]{grid-column:span 5;}
    .watermark-row > label:first-child select,
    .watermark-row > label[data-watermark-text-wrap] input{
        box-sizing:border-box;
        height:2.25rem;
        min-height:2.25rem;
    }
    .watermark-row > label:first-child select{
        padding-block:0;
        line-height:1.2;
    }
    .watermark-row > label[data-watermark-text-wrap]{width:auto;}
    .watermark-row > label[data-watermark-text-wrap] input{width:100%;min-width:0;}
    .watermark-row > label[data-watermark-color-wrap]{
        grid-column:span 2;
        width:100%;
        white-space:nowrap;
        font-size:.67rem;
    }
    .watermark-row > label[data-watermark-opacity-wrap]{
        display:grid!important;
        grid-column:span 8;
        grid-template-columns:minmax(0,1fr) max-content;
        grid-template-rows:auto auto;
        align-items:center;
        gap:3px 6px;
        width:100%;
        flex-basis:auto;
    }
    .watermark-row > label[data-watermark-opacity-wrap] > span{grid-column:1;grid-row:1;white-space:nowrap;}
    .watermark-row > label[data-watermark-opacity-wrap] output{grid-column:2;grid-row:1;}
    .watermark-row > label[data-watermark-opacity-wrap] input{grid-column:1 / -1;grid-row:2;width:100%;min-width:0;flex:auto;}
    .watermark-row > label[data-watermark-logo-wrap]{grid-column:6 / -1;min-width:0;}
    .watermark-row > label[data-watermark-logo-wrap] > span:first-child{display:none;}
    .watermark-row > label[data-watermark-logo-wrap] .watermark-logo-picker{min-height:34px;padding:2px;}
    .watermark-row > label[data-watermark-logo-wrap] .watermark-logo-picker > span{width:100%;justify-content:center;padding:4px 6px;font-size:.68rem;}
    .watermark-row > label[data-watermark-logo-wrap] .watermark-logo-picker small{display:none;}
}
.tool-workbench.image-metadata-workbench { display:grid; grid-template-columns:minmax(0,860px); justify-content:center; }
.image-metadata-panel { display:grid; gap:14px; width:min(860px,100%); }
.metadata-another-image { width:fit-content; padding:.55rem .8rem; color:var(--text); font:inherit; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); cursor:pointer; }
.metadata-workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(15rem,.8fr); gap:.8rem; align-items:stretch; }
.metadata-workspace[hidden] { display:none; }
.metadata-preview { display:grid; place-items:center; min-height:20rem; overflow:auto; padding:.8rem; border:1px solid var(--line); border-radius:.9rem; background:rgba(0,0,0,.13); }
.metadata-preview canvas { display:block; max-width:100%; max-height:34rem; object-fit:contain; box-shadow:0 .4rem 1.2rem rgba(0,0,0,.2); }
.metadata-side-panel { display:grid; align-content:start; gap:.65rem; padding:.75rem; border:1px solid var(--line); border-radius:.9rem; background:rgba(255,255,255,.02); }
.metadata-clean-card { display:flex; align-items:flex-start; gap:.6rem; padding:.7rem; border-radius:.7rem; background:rgba(72,184,127,.09); }
.metadata-card-icon { display:grid; flex:0 0 auto; place-items:center; width:2.2rem; height:2.2rem; color:#75d7a0; border-radius:.6rem; background:rgba(84,205,139,.13); }
.metadata-card-icon svg { width:1.2rem; }
.metadata-clean-card div { display:grid; gap:.18rem; }
.metadata-clean-card strong { color:var(--text); }
.metadata-clean-card small { color:var(--muted); line-height:1.45; }
.metadata-details { display:grid; grid-template-columns:1fr auto; gap:.45rem .7rem; padding:.7rem; border:1px solid var(--line); border-radius:.7rem; font-size:.86rem; }
.metadata-details span { color:var(--muted); }
.metadata-details strong { color:var(--text); font-variant-numeric:tabular-nums; text-align:end; direction:ltr; unicode-bidi:isolate; white-space:nowrap; }
.metadata-scan,.metadata-hashes { padding:.7rem; border:1px solid var(--line); border-radius:.7rem; }
.metadata-scan h2 { display:flex; align-items:center; gap:.4rem; margin:0 0 .45rem; color:var(--text); font-size:.92rem; }
.metadata-scan h2 svg { width:1rem; color:var(--accent); }
.metadata-scan p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.metadata-scan ul { display:grid; gap:.35rem; padding:0; margin:.55rem 0 0; list-style:none; }
.metadata-scan li { display:flex; align-items:center; gap:.4rem; color:var(--text); font-size:.84rem; }
.metadata-scan li::before { width:.45rem; height:.45rem; content:""; border-radius:50%; background:var(--accent); }
.metadata-clean-scan { padding-top:.55rem; margin-top:.55rem !important; color:#75d7a0 !important; border-top:1px solid var(--line); }
.metadata-hashes { display:grid; gap:.55rem; }
.metadata-hashes div { display:grid; gap:.25rem; }
.metadata-hashes span { color:var(--muted); font-size:.77rem; }
.metadata-hashes code { overflow:hidden; padding:.42rem .5rem; color:var(--text); direction:ltr; border-radius:.45rem; background:rgba(0,0,0,.16); font-size:.7rem; text-align:start; text-overflow:ellipsis; white-space:nowrap; }
.metadata-removes { padding:.7rem; border:1px solid var(--line); border-radius:.7rem; }
.metadata-removes h2 { margin:0 0 .55rem; color:var(--text); font-size:.92rem; }
.metadata-removes ul { display:grid; gap:.5rem; padding:0; margin:0; list-style:none; }
.metadata-removes li { display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.84rem; }
.metadata-removes li svg { width:1rem; color:var(--accent); }
@media(max-width:720px){.metadata-workspace{grid-template-columns:1fr;}.metadata-preview{min-height:15rem;}}
.image-resizer-panel { display:grid; gap:14px; width:min(760px,100%); }
.resizer-another-image { width:fit-content; padding:.55rem .8rem; color:var(--text); font:inherit; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); cursor:pointer; }
.resizer-controls { display:grid; grid-template-columns:minmax(10rem,1.3fr) minmax(5rem,.6fr) auto minmax(5rem,.6fr) auto; align-items:end; gap:.55rem; padding:.65rem; border:1px solid var(--line); border-radius:.85rem; }
.resizer-controls[hidden],.resizer-preview[hidden] { display:none; }
.resizer-controls label { display:grid; gap:.3rem; color:var(--muted); font-size:.82rem; }
.resizer-controls input,.resizer-controls select { min-width:0; padding:.45rem .55rem; color:var(--text); font:inherit; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); }
.resizer-controls input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.resizer-controls input[type="number"]::-webkit-outer-spin-button,
.resizer-controls input[type="number"]::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.resizer-times { padding-bottom:.45rem; color:var(--muted); font-size:1.2rem; }
.resizer-ratio { display:flex !important; flex-flow:row !important; align-items:center; padding-bottom:.5rem; white-space:nowrap; }
.resizer-preview { display:grid; place-items:center; min-height:16rem; overflow:auto; padding:.7rem; border:1px solid var(--line); border-radius:.9rem; background:rgba(0,0,0,.12); }
.resizer-preview canvas { display:block; max-width:100%; max-height:34rem; object-fit:contain; box-shadow:0 .4rem 1.2rem rgba(0,0,0,.2); }
@media (max-width:650px) {
    .resizer-controls {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .55rem;
    }

    /* Preset title and selector share the first row. */
    .resizer-controls > label:first-child {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: .5rem;
    }

    .resizer-controls > label:first-child span {
        white-space: nowrap;
    }

    .resizer-controls > label:first-child select {
        width: 100%;
        min-width: 0;
    }

    /* Width and height follow together in the next row. */
    .resizer-times { display:none; }
    .resizer-controls > label:nth-of-type(2),
    .resizer-controls > label:nth-of-type(3) {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: .4rem;
    }

    .resizer-controls > label:nth-of-type(2) { grid-column: 1; }
    .resizer-controls > label:nth-of-type(3) { grid-column: 2; }

    .resizer-controls > label:nth-of-type(2) span,
    .resizer-controls > label:nth-of-type(3) span {
        white-space: nowrap;
    }

    .resizer-controls > label:nth-of-type(2) input,
    .resizer-controls > label:nth-of-type(3) input {
        width: 100%;
        min-width: 0;
    }
    .resizer-ratio { grid-column:1 / -1; }
}

.image-editor-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
}

.image-editor-dropzone {
    min-height: 12rem;
}

.image-editor-another-image {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    color: var(--text);
    font: inherit;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
    cursor: pointer;
}

.image-editor-another-image svg { width: 1rem; }

.image-editor-canvas-wrap {
    display: grid;
    place-items: center;
    min-height: 18rem;
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(0, 0, 0, .12);
}

.image-editor-canvas-wrap[hidden],
.image-editor-controls[hidden] {
    display: none;
}

.image-editor-canvas-wrap canvas {
    display: block;
    max-width: 100%;
    max-height: 34rem;
    object-fit: contain;
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2);
}

.image-editor-controls {
    display: grid;
    gap: .55rem;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .025);
}

.image-editor-quick-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: min(100%, 560px);
    margin-inline: auto;
}

.image-editor-transform-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .35rem;
}

.image-editor-transform-actions button,
.image-editor-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 2.2rem;
    height: 2.2rem;
    min-height: 2.2rem;
    padding: .35rem;
    color: var(--text);
    font: inherit;
    font-size: .87rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
    cursor: pointer;
}

.image-editor-transform-actions button:hover,
.image-editor-reset:hover {
    border-color: var(--accent);
}

.image-editor-reset {
    width: fit-content;
    justify-self: center;
    padding-inline: .65rem;
}

.image-editor-transform-actions svg,
.image-editor-reset svg {
    width: 1rem;
}

.image-editor-adjustments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 10rem));
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
}

.image-editor-effects {
    display: grid;
    grid-template-columns: auto minmax(7rem, 1fr);
    min-width: 0;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .88rem;
}

.image-editor-effects > span { white-space: nowrap; }

.image-editor-effect-picker,
.image-editor-effect-menu {
    position: relative;
    min-width: 0;
}

.image-editor-effect-menu[open] { z-index: 32; }

.image-editor-effect-menu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(215, 169, 77, .34);
    border-radius: 10px;
    color: var(--text);
    background: linear-gradient(145deg, rgba(20, 24, 33, .98), rgba(10, 13, 19, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 800;
    list-style: none;
}

.image-editor-effect-menu summary::-webkit-details-marker { display: none; }
.image-editor-effect-menu summary svg { width: 15px; height: 15px; color: var(--orange-2); transition: transform 160ms ease; }
.image-editor-effect-menu[open] summary { border-color: rgba(255, 157, 66, .78); background: rgba(244, 124, 32, .1); box-shadow: 0 0 0 3px rgba(244, 124, 32, .1); }
.image-editor-effect-menu[open] summary svg { transform: rotate(180deg); }

.image-editor-effect-options {
    position: absolute;
    z-index: 33;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    display: grid;
    gap: 3px;
    width: min(220px, calc(100vw - 92px));
    max-height: 252px;
    padding: 5px;
    overflow-y: auto;
    border: 1px solid rgba(215, 169, 77, .42);
    border-radius: 10px;
    background: #171d28;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .42);
}

.image-editor-effect-options button {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}

.image-editor-effect-options button:hover,
.image-editor-effect-options button:focus-visible,
.image-editor-effect-options button.is-active {
    outline: 0;
    color: #1b1208;
    background: linear-gradient(135deg, #ff7d1a, #ffab2e);
}

.image-editor-adjustments legend {
    padding-inline: .35rem;
    color: var(--muted);
    font-size: .85rem;
}

.image-editor-adjustments label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .2rem .4rem;
    color: var(--muted);
    font-size: .8rem;
}

.image-editor-adjustments input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    height: .8rem;
    margin: 0;
}

.image-editor-adjustments output {
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
}

.tool-workbench.image-background-remover-workbench {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
    gap: 1rem;
}

.tool-workbench.image-background-remover-workbench:has(.image-background-remover-result-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    justify-content: stretch;
}

.image-background-remover-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    justify-self: center;
}

.tool-workbench.image-background-remover-workbench:has(.image-background-remover-result-panel:not([hidden])) .image-background-remover-panel {
    width: 100%;
    justify-self: stretch;
}

.background-remover-dropzone {
    min-height: 13rem;
}

.background-remover-browser-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .8rem .9rem;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .025);
}

.background-remover-source-preview {
    display: grid;
    place-items: center;
    min-height: 14rem;
    overflow: hidden;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(0, 0, 0, .12);
}

.background-remover-source-preview[hidden] {
    display: none;
}

.background-remover-source-preview img {
    display: block;
    width: 100%;
    max-height: 26rem;
    object-fit: contain;
    border-radius: .55rem;
}

.background-remover-browser-note svg {
    flex: 0 0 auto;
    width: 1.05rem;
    color: var(--accent);
    margin-top: .2rem;
}

.background-remover-progress {
    display: grid;
    gap: .5rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: .8rem;
    color: var(--text);
    font-size: .9rem;
}

.background-remover-progress-bar {
    display: block;
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.background-remover-progress-bar i {
    display: block;
    width: var(--background-remover-progress, 18%);
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width .25s ease;
}

.image-background-remover-result-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 14px);
    display: grid;
    gap: .9rem;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: var(--shadow);
}

.image-background-remover-result-panel[hidden] {
    display: none;
}

.background-remover-comparison {
    position: relative;
    min-height: 15rem;
    overflow: hidden;
    border-radius: .8rem;
    user-select: none;
}

.background-remover-original {
    display: block;
    width: 100%;
    min-height: 15rem;
    max-height: 28rem;
    object-fit: contain;
    background: rgba(0, 0, 0, .14);
}

.background-remover-checkerboard {
    display: grid;
    place-items: center;
    background-color: #e5e7eb;
    background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(-45deg, #cbd5e1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd5e1 75%), linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.background-remover-after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--background-remover-compare)) 0 0);
}

.background-remover-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.background-remover-slider {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: ew-resize;
    opacity: 0;
}

.background-remover-divider {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    transform: translateX(-50%);
}

.background-remover-divider::after {
    content: '↔';
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .24);
    transform: translate(-50%, -50%);
}

.background-remover-label {
    position: absolute;
    z-index: 2;
    top: .75rem;
    padding: .3rem .55rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: .4rem;
    background: rgba(15, 23, 42, .72);
    pointer-events: none;
}

.background-remover-label-before {
    inset-inline-start: .75rem;
}

.background-remover-label-after {
    inset-inline-end: .75rem;
}

.background-remover-compare-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    text-align: center;
}

.background-remover-compare-hint svg {
    width: 1rem;
}

.tool-workbench.image-cropper-workbench:has(.image-cropper-result-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    justify-content: stretch;
}

.image-cropper-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    justify-self: center;
}

.tool-workbench.image-cropper-workbench:has(.image-cropper-result-panel:not([hidden])) .image-cropper-panel {
    width: 100%;
    justify-self: stretch;
}

.cropper-editor {
    display: grid;
    gap: .8rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .025);
}

.cropper-new-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: .45rem;
    min-height: 2.65rem;
    padding: .6rem .95rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    color: var(--text);
    background: rgba(255, 255, 255, .025);
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
}

.cropper-new-image:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

.cropper-new-image svg {
    width: 1rem;
}

.cropper-toolbar {
    display: grid;
    grid-template-columns: auto minmax(13rem, 1fr) auto;
    align-items: center;
    gap: .8rem;
}

.cropper-selection-label {
    white-space: nowrap;
    color: var(--text);
    font-size: .88rem;
    font-weight: 800;
}

.cropper-mode-control {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cropper-mode-control legend {
    width: 100%;
    margin-bottom: .35rem;
    color: var(--text);
    font-size: .88rem;
    font-weight: 800;
}

.cropper-mode-control label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--muted);
    font-size: .82rem;
    cursor: pointer;
}

.cropper-mode-control input {
    accent-color: var(--orange);
}

.cropper-selection {
    width: min(100%, 20rem);
    justify-self: center;
    min-height: 2.45rem;
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: .62rem;
    color: var(--text);
    background: var(--surface-2);
    font: inherit;
}

.cropper-selection-menu {
    position: relative;
    z-index: 4;
    width: min(100%, 20rem);
    justify-self: center;
    min-width: 0;
}

.cropper-selection-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 2.45rem;
    padding: .45rem .65rem;
    border: 1px solid var(--line);
    border-radius: .62rem;
    color: var(--text);
    background: var(--surface-2);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.cropper-selection-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cropper-selection-trigger svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--orange-2);
    transition: transform .16s ease;
}

.cropper-selection-trigger[aria-expanded="true"] {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, .1);
}

.cropper-selection-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.cropper-selection-options {
    position: absolute;
    top: calc(100% + 5px);
    inset-inline: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(244, 124, 32, .36);
    border-radius: 10px;
    background: #151923;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .42);
}

.cropper-selection-options[hidden] {
    display: none;
}

.cropper-selection-options button {
    min-width: 0;
    min-height: 32px;
    padding: 4px 5px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(8, 9, 13, .56);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
}

.cropper-selection-options button:nth-of-type(-n + 2),
.cropper-selection-options-title {
    grid-column: 1 / -1;
}

.cropper-selection-options button.is-active {
    border-color: rgba(244, 124, 32, .72);
    color: #1b1208;
    background: linear-gradient(135deg, #ff7d1a, #ffab2e);
}

.cropper-selection-options-title {
    color: var(--orange-2);
    font-size: .63rem;
    font-weight: 800;
    text-align: start;
}

@media (max-width: 560px) {
    .cropper-toolbar {
        grid-template-columns: 1fr auto;
    }

    .cropper-selection {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
}

.cropper-dimensions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .84rem;
}

.cropper-dimensions svg,
.cropper-instruction svg {
    width: 1rem;
    color: var(--orange);
}

.cropper-dimensions strong {
    color: var(--text);
    direction: ltr;
}

@media (max-width: 620px) {
    .image-cropper-workbench .cropper-toolbar {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 6px;
        padding: 1px 0;
    }

    .image-cropper-workbench .cropper-selection-label {
        font-size: .72rem;
    }

    .image-cropper-workbench .cropper-selection {
        grid-column: auto;
        grid-row: auto;
        width: min(100%, 158px);
        justify-self: start;
        min-height: 36px;
        padding-inline: 9px 31px;
        border-radius: 8px;
        font-size: .72rem;
        appearance: none;
        background-color: rgba(8, 9, 13, .68);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f5bd67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
        background-position: left 9px center;
        background-repeat: no-repeat;
        background-size: 14px;
        color-scheme: dark;
    }

    .image-cropper-workbench .cropper-selection-menu {
        grid-column: auto;
        grid-row: auto;
        width: min(100%, 220px);
        justify-self: start;
    }

    .image-cropper-workbench .cropper-selection-trigger {
        min-height: 36px;
        padding-inline: 9px;
        border-radius: 8px;
        font-size: .72rem;
        background-color: rgba(8, 9, 13, .68);
    }

    .image-cropper-workbench .cropper-selection-options {
        gap: 3px;
        padding: 5px;
        border-radius: 8px;
    }

    .image-cropper-workbench .cropper-selection-options button {
        min-height: 29px;
        padding: 3px;
        border-radius: 6px;
        font-size: .63rem;
    }

    .image-cropper-workbench .cropper-selection option,
    .image-cropper-workbench .cropper-selection optgroup {
        color: var(--text);
        background: #151923;
    }

    html[dir="ltr"] .image-cropper-workbench .cropper-selection {
        background-position: right 9px center;
    }

    .image-cropper-workbench .cropper-dimensions {
        grid-column: 1 / -1;
        justify-self: center;
        min-height: 28px;
        padding: 4px 7px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: rgba(8, 9, 13, .34);
        font-size: .66rem;
        text-align: center;
    }

    .image-cropper-workbench .cropper-dimensions svg {
        width: 13px;
        height: 13px;
    }
}

.cropper-canvas-wrap {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: #0b0f15;
}

.cropper-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    cursor: crosshair;
    touch-action: none;
}

.cropper-instruction {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
}

.cropper-freehand-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
}

.cropper-freehand-note svg {
    width: 1rem;
    color: var(--orange);
}

.image-cropper-result-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-height) + 14px);
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: calc(var(--topbar-height) + 12px);
}

.cropper-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.cropper-result-actions > * {
    width: 100%;
    min-width: 0;
}

.cropper-action-label-mobile {
    display: none;
}

.cropper-preview {
    min-height: 12rem;
    object-fit: contain;
    background: #0b0f15;
}

.cropper-close-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.7rem;
    padding: .65rem 1rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.cropper-close-result:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

.cropper-close-result svg {
    width: 1rem;
}

@media (max-width: 620px) {
    .cropper-result-actions {
        gap: 5px;
    }

    .cropper-result-actions > .cropper-close-result {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 116px;
        justify-self: center;
    }

    .cropper-result-actions > * {
        min-height: 36px;
        padding: 5px 6px;
        gap: 4px;
        font-size: .69rem;
        white-space: nowrap;
    }

    .cropper-result-actions svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

    .cropper-action-label-full {
        display: none;
    }

    .cropper-action-label-mobile {
        display: inline;
    }
}

@media (max-width: 900px) {
    .tool-workbench.image-background-remover-workbench:has(.image-background-remover-result-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-workbench.image-background-remover-workbench:has(.image-background-remover-result-panel:not([hidden])) .image-background-remover-panel {
        width: min(760px, 100%);
        justify-self: center;
    }

    .image-background-remover-result-panel {
        position: static;
    }

    .tool-workbench.image-cropper-workbench:has(.image-cropper-result-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-workbench.image-cropper-workbench:has(.image-cropper-result-panel:not([hidden])) .image-cropper-panel {
        width: min(760px, 100%);
        justify-self: center;
    }

    .image-cropper-result-panel {
        position: static;
    }
}

/* Remove Chrome's blue tap flash while preserving keyboard focus visibility. */
a,
button,
input,
select,
textarea,
summary,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(244, 124, 32, .84);
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .image-upload-workbench .image-dropzone > small {
        white-space: nowrap;
        font-size: .64rem;
    }
}

/* Keep the image editor controls inside the narrow mobile content rail. */
@media (max-width: 620px) {
    .tool-workbench.image-editor-workbench,
    .image-editor-panel,
    .image-editor-controls,
    .image-editor-quick-actions,
    .image-editor-adjustments {
        min-width: 0;
        max-width: 100%;
    }

    .image-editor-controls {
        width: 100%;
        padding: 6px;
        overflow: visible;
    }

    .image-editor-quick-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        width: 100%;
    }

    .image-editor-effects {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 5px;
        width: 100%;
        min-width: 0;
        font-size: .72rem;
    }

    .image-editor-effects > span {
        white-space: nowrap;
    }

    .image-editor-transform-actions {
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 3px;
    }

    .image-editor-transform-actions button { width: 2rem; height: 2rem; min-height: 2rem; padding: .25rem; }
    .image-editor-effect-menu summary { min-height: 34px; padding: 5px 7px; font-size: .7rem; }
    .image-editor-effect-options { width: min(205px, calc(100vw - 82px)); max-height: 220px; }

    .image-editor-adjustments {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 5px;
        padding: 6px;
    }

    .image-editor-adjustments label {
        min-width: 0;
    }
}

/* English tool names stay compact without forcing a second heading line on phones. */
@media (max-width: 600px) {
    html[dir="rtl"] .tool-page-head h1 {
        font-size: clamp(14px, 4vw, 17px);
        line-height: 1.18;
        letter-spacing: -.25px;
        white-space: nowrap;
    }

    html[dir="ltr"] .tool-page-head h1 {
        font-size: clamp(15px, 4.25vw, 17px);
        line-height: 1.18;
        letter-spacing: -.35px;
        white-space: nowrap;
    }

    html[dir="ltr"] .text-tool-article > h2 {
        font-size: clamp(.68rem, 3vw, .78rem);
        letter-spacing: -.22px;
        white-space: nowrap;
    }
}

.compressor-preview {
    display: block;
    width: 100%;
    max-height: 18rem;
    margin: 1rem 0;
    object-fit: contain;
    border-radius: .85rem;
    background: var(--bg-2);
}

.compressor-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: 1rem;
}

.compressor-stats span {
    min-width: 0;
    padding: .7rem;
    border-radius: .75rem;
    background: var(--surface-2);
}

.compressor-stats small,
.compressor-stats b {
    display: block;
}

.compressor-stats small {
    color: var(--muted);
    font-size: .72rem;
}

.compressor-stats b {
    overflow: hidden;
    margin-top: .2rem;
    color: var(--text);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-workbench.file-zipper-workbench {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: start;
}

.tool-workbench.file-zipper-workbench:has(.zipper-selection:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
    justify-content: stretch;
}

.file-zipper-panel,
.file-zipper-result-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.file-zipper-panel {
    width: 100%;
    justify-self: stretch;
}

.zipper-dropzone {
    min-height: 220px;
}

@media (min-width: 601px) {
    .file-zipper-workbench .zipper-dropzone {
        width: min(100%, 560px);
        min-height: 74px;
        justify-self: center;
    }

    .file-zipper-workbench .zipper-folder-picker {
        width: max-content;
        justify-self: center;
    }
}

.zipper-folder-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3.35rem;
    padding: .65rem 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--muted);
    background: rgba(15, 19, 27, .66);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.zipper-folder-picker:hover,
.zipper-folder-picker:focus-within {
    border-color: rgba(244, 124, 32, .6);
    color: var(--text);
    background: rgba(244, 124, 32, .07);
}

.zipper-folder-picker > svg {
    width: 1.25rem;
    color: var(--orange-2);
}

.zipper-folder-picker span {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
}

.zipper-folder-picker b {
    color: var(--text);
    font-size: .86rem;
}

.zipper-folder-picker small {
    font-size: .76rem;
}

.zipper-selection {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 19, 27, .72);
}

.zipper-selection-head,
.zipper-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.zipper-selection-head {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--line);
}

.zipper-selection-head > span,
.zipper-selection-head button,
.zipper-new-files {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.zipper-selection-head > span {
    min-width: 0;
    color: var(--text);
}

.zipper-selection-head svg,
.zipper-new-files svg {
    width: 1rem;
    color: var(--orange-2);
}

.zipper-selection-head button,
.zipper-new-files {
    border: 0;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.zipper-selection-head button:hover,
.zipper-new-files:hover {
    color: var(--orange-2);
}

.zipper-selection-head button:disabled {
    cursor: wait;
    opacity: .55;
}

.zipper-file-list {
    display: grid;
    max-height: 13rem;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.zipper-file-list li {
    min-width: 0;
    padding: .62rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .84rem;
}

.zipper-file-list li:last-child {
    border-bottom: 0;
}

.zipper-selection .zipper-submit,
.zipper-selection .zipper-inline-download {
    width: calc(100% - 1.5rem);
    margin: .75rem;
}

.zipper-selection .zipper-progress {
    width: calc(100% - 1.5rem);
    margin: 0 .75rem .75rem;
    justify-self: stretch;
}

.zipper-file-list span {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zipper-file-list small {
    flex: 0 0 auto;
    color: var(--muted);
    direction: ltr;
}

.zipper-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: min(100%, 560px);
    justify-self: center;
}

.protected-zipper-options {
    gap: 12px;
}

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

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

.renamer-file-list li {
    display: grid;
    gap: .28rem;
    align-items: start;
}

.renamer-file-list .renamer-original-name {
    color: var(--muted);
    font-size: .76rem;
    text-decoration: line-through;
    opacity: .8;
}

.renamer-file-list .renamer-new-name {
    overflow: hidden;
    color: var(--text);
    font-size: .84rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.protected-password-note i {
    color: var(--gold);
}

.zipper-name-field {
    display: grid;
    align-content: start;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.zipper-name-field input {
    width: 100%;
    min-height: 2.6rem;
    padding: 0 .7rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    outline: 0;
    color: var(--text);
    background: var(--bg-2);
    direction: ltr;
    text-align: start;
}

.zipper-name-field input:focus {
    border-color: var(--orange);
}

.zipper-name-field input {
    text-align: center;
}

@media (max-width: 600px) {
    .file-zipper-workbench .zipper-folder-picker {
        align-items: flex-start;
        justify-content: center;
        gap: .55rem;
    }

    .file-zipper-workbench .zipper-folder-picker > span {
        display: grid;
        gap: 2px;
    }

    .file-zipper-workbench .zipper-folder-picker b {
        white-space: nowrap;
    }

    .file-zipper-workbench .zipper-folder-picker small {
        display: block;
        line-height: 1.35;
    }
}

.zipper-progress {
    margin: 0;
    width: min(100%, 560px);
    justify-self: center;
}

.zipper-note {
    margin: 0;
    width: min(100%, 560px);
    justify-self: center;
}

.zipper-supported-formats {
    margin: 0;
    width: min(100%, 560px);
    justify-self: center;
}

.file-zipper-result-panel {
    align-content: start;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .82);
    box-shadow: var(--shadow);
}

.zipper-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 1px solid rgba(244, 124, 32, .34);
    border-radius: 1.1rem;
    background: rgba(244, 124, 32, .1);
}

.zipper-result-icon svg {
    width: 2.1rem;
    height: 2.1rem;
    color: var(--orange-2);
}

.file-zipper-result-panel h2 {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.zipper-stats {
    margin: 0;
}

.zipper-new-files {
    justify-content: center;
    min-height: 2.6rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .tool-workbench.file-zipper-workbench:has(.zipper-selection:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .zipper-options {
        grid-template-columns: 1fr;
    }

    .protected-password-grid {
        grid-template-columns: 1fr;
    }

    .renamer-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .compressor-stats.zipper-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .tool-workbench.image-compressor-workbench:has(.image-compressor-result-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .compressor-options-grid {
        grid-template-columns: 1fr;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    background: var(--bg);
    /* Do not reserve an empty strip beside the application shell. */
    scrollbar-gutter: auto;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        var(--bg);
    background-size: 44px 44px;
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0;
    overflow-x: hidden;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html[dir="rtl"] body {
    font-family: "Noto Kufi Arabic", "Tahoma", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

.app-frame {
    display: grid;
    min-height: 100vh;
    grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "sidebar footer";
}

html[dir="rtl"] .app-frame {
    grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "sidebar main"
        "sidebar footer";
}

/* Installed-app launch screen. The artwork is requested only when the site is
   running as an installed PWA and this is the first view in the app session. */
.app-launch-splash {
    display: none;
}

html.show-app-launch-splash,
html.show-app-launch-splash body {
    overflow: hidden;
}

html.show-app-launch-splash .app-launch-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    overflow: hidden;
    isolation: isolate;
    background: #08090d;
    opacity: 1;
    transition: opacity 380ms ease, visibility 380ms ease;
}

html.show-app-launch-splash .app-launch-splash::before,
html.show-app-launch-splash .app-launch-splash::after {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
}

html.show-app-launch-splash .app-launch-splash::before {
    background: #08090d url("../media/clicker-hero.jpg") center / cover no-repeat;
}

html.show-app-launch-splash .app-launch-splash::after {
    z-index: -1;
    background: radial-gradient(circle at center, rgba(8, 9, 13, 0.12) 0, rgba(8, 9, 13, 0.38) 68%, rgba(8, 9, 13, 0.58) 100%);
}

.app-launch-splash.is-leaving {
    visibility: hidden;
    opacity: 0;
}

.app-launch-splash__content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    width: min(88vw, 420px);
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
    translate: -50% -50%;
    animation: app-launch-arrive 620ms cubic-bezier(.22, .78, .28, 1) both;
}

.app-launch-splash__logo-wrap {
    display: grid;
    width: clamp(82px, 22vw, 104px);
    aspect-ratio: 1;
    margin-block-end: 18px;
    place-items: center;
    border: 1px solid rgba(244, 124, 32, 0.72);
    border-radius: 50%;
    background: rgba(8, 10, 15, 0.72);
    box-shadow: 0 0 0 7px rgba(244, 124, 32, 0.055), 0 18px 50px rgba(0, 0, 0, 0.42), 0 0 34px rgba(244, 124, 32, 0.15);
    backdrop-filter: blur(8px);
}

.app-launch-splash__logo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

.app-launch-splash__content strong {
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.app-launch-splash__content > span:not(.app-launch-splash__logo-wrap) {
    margin-block-start: 8px;
    color: #d8c7b4;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 500;
}

.app-launch-splash__loader {
    position: relative;
    width: 72px;
    height: 3px;
    margin-block-start: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.app-launch-splash__loader::after {
    position: absolute;
    inset-block: 0;
    width: 44%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f47c20, #ffc460);
    box-shadow: 0 0 12px rgba(244, 124, 32, 0.55);
    content: "";
    animation: app-launch-loader 920ms ease-in-out infinite alternate;
}

html[dir="rtl"] .app-launch-splash__loader::after {
    inset-inline-start: 0;
}

html[dir="ltr"] .app-launch-splash__loader::after {
    inset-inline-start: 0;
}

@keyframes app-launch-arrive {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-launch-loader {
    from { transform: translateX(-62%); }
    to { transform: translateX(128%); }
}

/* Services marketplace and customer services */
.services-marketplace,
.customer-services-dashboard { display: grid; gap: 18px; }

.services-marketplace-head {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border: 1px solid rgba(215, 169, 77, .22);
    border-radius: 16px;
    background: #0b0d12;
}

.services-marketplace-head > div {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: min(100%, 680px);
    min-height: 230px;
    padding: 34px;
    background: linear-gradient(90deg, rgba(8, 10, 15, .97), rgba(8, 10, 15, .76) 72%, transparent);
}

html[dir="rtl"] .services-marketplace-head > div {
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: right;
    background: linear-gradient(270deg, rgba(8, 10, 15, .97), rgba(8, 10, 15, .76) 72%, transparent);
}
.services-marketplace-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .74; }
html[dir="rtl"] .services-marketplace-head > img { object-position: right center; }
.services-marketplace-head span,
.customer-services-head span { display: inline-flex; align-items: center; gap: 7px; color: var(--orange-2); font-size: .78rem; font-weight: 800; }
.services-marketplace-head span svg,
.customer-services-head span svg { width: 16px; height: 16px; }
.services-marketplace-head h1,
.customer-services-head h1 { margin: 8px 0 0; color: var(--text); font-size: clamp(1.65rem, 3.2vw, 2.55rem); line-height: 1.35; }
.services-marketplace-head p { max-width: 52ch; margin: 10px 0 0; color: #c7bdad; font-size: .92rem; line-height: 1.8; }

.services-tabs,
.customer-service-tabs {
    display: grid;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(215, 169, 77, .18);
    border-radius: 12px;
    background: rgba(17, 20, 27, .96);
}
.services-tabs { grid-template-columns: repeat(var(--services-tab-count, 4), minmax(0, 1fr)); }

.services-tabs a,
.customer-service-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.services-tabs a:hover,
.customer-service-tabs a:hover { color: var(--text); background: rgba(255, 255, 255, .035); }
.services-tabs a.is-active,
.customer-service-tabs a.is-active { border-color: rgba(255, 157, 66, .38); color: #ffb365; background: rgba(244, 124, 32, .1); }
.services-tabs svg,
.customer-service-tabs svg { width: 17px; height: 17px; }
.customer-service-tabs { grid-template-columns: repeat(var(--services-tab-count, 5), minmax(0, 1fr)); }

.service-category-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(230px, .72fr);
    gap: 15px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(215, 169, 77, .19);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(25, 29, 38, .98), rgba(12, 14, 20, .98));
}
.service-category-intro-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 157, 66, .28);
    border-radius: 12px;
    color: #ffb365;
    background: rgba(244, 124, 32, .09);
}
.service-category-intro-icon svg { width: 23px; height: 23px; }
.service-category-intro h2 { margin: 0; color: var(--text); font-size: 1rem; }
.service-category-intro p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.75; }
.service-category-intro > small {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid rgba(215, 169, 77, .14);
    color: #cdbfa9;
    font-size: .72rem;
    line-height: 1.7;
}
.service-category-intro > small svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: #62d99b; }
.service-category-intro--footer { margin-top: 4px; }

.service-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clicker-service-stage { display: flex; justify-content: center; width: 100%; }
.clicker-service-card { display: grid; grid-template-columns: minmax(270px, .92fr) minmax(330px, 1.08fr); width: min(100%, 920px); min-width: 0; overflow: visible; border: 1px solid rgba(215,169,77,.22); border-radius: 16px; background: linear-gradient(145deg,rgba(22,26,34,.99),rgba(9,11,16,.99)); box-shadow: 0 24px 65px rgba(0,0,0,.3); }
.clicker-service-visual { position: relative; min-width: 0; min-height: 430px; overflow: hidden; border-radius: inherit; }
.clicker-service-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(7,9,13,.88)); pointer-events: none; }
.clicker-service-visual > img { width: 100%; height: 100%; object-fit: cover; }
.clicker-service-visual > span { position: absolute; z-index: 1; inset-inline: 20px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #ffe1b3; font-size: .77rem; font-weight: 800; }
.clicker-service-visual > span svg { width: 17px; height: 17px; color: var(--orange-2); }
.clicker-service-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 30px; text-align: center; }
.clicker-service-content > header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.clicker-service-content > header > span { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-2); font-size: .72rem; font-weight: 800; }
.clicker-service-content > header > span svg { width: 15px; height: 15px; }
.clicker-service-content h2 { margin: 13px 0 0; color: var(--text); font-size: 1.65rem; }
.clicker-service-content > p { max-width: 42ch; margin: 7px auto 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.clicker-plan-form { display: grid; gap: 14px; width: min(100%,430px); margin: 22px auto 0; }
.clicker-plan-select { position: relative; display: grid; gap: 6px; text-align: start; }
.clicker-plan-select-label { color: var(--muted); font-size: .7rem; font-weight: 700; }
.clicker-plan-trigger { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 10px 14px; border: 1px solid rgba(215,169,77,.25); border-radius: 11px; color: var(--text); background: rgba(255,255,255,.035); text-align: start; cursor: pointer; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.clicker-plan-trigger:hover,.clicker-plan-trigger[aria-expanded="true"] { border-color: rgba(255,157,66,.55); background: rgba(244,124,32,.075); box-shadow: 0 0 0 3px rgba(244,124,32,.07); }
.clicker-plan-trigger > span { overflow: hidden; font-size: .88rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.clicker-plan-trigger > strong { display: inline-flex; align-items: baseline; gap: 2px; color: var(--gold); font-size: .92rem; }
.clicker-plan-trigger > strong small { font-size: .64rem; }
.clicker-plan-trigger > svg { width: 17px; height: 17px; color: var(--muted); transition: transform .2s ease; }
.clicker-plan-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.clicker-plan-menu { position: absolute; z-index: 20; top: calc(100% + 7px); inset-inline: 0; overflow: hidden; padding: 5px; border: 1px solid rgba(215,169,77,.25); border-radius: 11px; background: rgba(12,14,20,.99); box-shadow: 0 22px 55px rgba(0,0,0,.48); }
.clicker-plan-option { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; gap: 10px; align-items: center; width: 100%; min-height: 49px; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; text-align: start; cursor: pointer; }
.clicker-plan-option:hover { color: var(--text); background: rgba(255,255,255,.04); }
.clicker-plan-option.is-selected { color: #ffd39a; background: rgba(244,124,32,.1); }
.clicker-plan-option > span { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800; }
.clicker-plan-option > span small { padding: 3px 6px; border-radius: 999px; color: #66dca1; background: rgba(61,190,124,.1); font-size: .56rem; }
.clicker-plan-option > strong { color: var(--gold); font-size: .76rem; }
.clicker-plan-option > svg { width: 16px; height: 16px; opacity: 0; color: var(--orange-2); }
.clicker-plan-option.is-selected > svg { opacity: 1; }
.clicker-live-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 14px; border-radius: 11px; background: rgba(255,255,255,.025); }
.clicker-live-price > span { color: var(--muted); font-size: .7rem; }
.clicker-live-price > strong { display: inline-flex; align-items: baseline; gap: 2px; color: var(--text); font-size: 1.8rem; line-height: 1; }
.clicker-live-price > strong small { color: var(--gold); font-size: .8rem; }
.clicker-live-price > em { color: var(--muted-2); font-size: .65rem; font-style: normal; }
.clicker-plan-buy { justify-content: center; width: 100%; }
.clicker-lifetime-summary { display: grid; justify-items: center; gap: 7px; width: min(100%,430px); margin: 22px auto 0; padding: 18px; border: 1px solid rgba(98,217,155,.22); border-radius: 12px; background: linear-gradient(145deg,rgba(61,190,124,.09),rgba(255,255,255,.018)); }
.clicker-lifetime-summary > span { display: inline-flex; align-items: center; gap: 6px; color: #72e2aa; font-size: .76rem; font-weight: 800; }
.clicker-lifetime-summary > span svg { width: 16px; height: 16px; }
.clicker-lifetime-summary > strong { display: inline-flex; align-items: baseline; gap: 3px; color: var(--text); font-size: 2rem; line-height: 1; }
.clicker-lifetime-summary > strong small { color: var(--gold); font-size: .85rem; }
.clicker-lifetime-summary > small { color: var(--muted-2); font-size: .66rem; }
.clicker-lifetime-button { justify-content: center; width: min(100%,430px); min-height: 46px; margin: 10px auto 0; border-color: rgba(98,217,155,.25); color: #72e2aa; background: rgba(61,190,124,.1); opacity: 1; cursor: default; }
.clicker-lifetime-button svg { width: 17px; height: 17px; }
.service-product-card { display: flex; flex-direction: column; min-width: 0; overflow: visible; border: 1px solid rgba(215, 169, 77, .2); border-radius: 14px; background: linear-gradient(155deg, rgba(22, 26, 34, .98), rgba(10, 12, 18, .98)); box-shadow: 0 18px 46px rgba(0, 0, 0, .22); }
.service-product-card:focus-within { position: relative; z-index: 30; }
.service-product-visual { position: relative; overflow: hidden; border-radius: 13px 13px 0 0; border-bottom: 1px solid rgba(215, 169, 77, .16); }
.service-product-visual > img { display: block; width: 100%; aspect-ratio: 16 / 8.8; object-fit: cover; }
.service-product-country { position: absolute; z-index: 1; inset-block-start: 11px; inset-inline-end: 11px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 22px); min-height: 29px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 5px; color: #fff; background: rgba(8,11,17,.82); box-shadow: 0 8px 22px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.service-product-country > img { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; }
.service-product-country > b { overflow: hidden; font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }
.service-product-body { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 16px; text-align: center; }
.service-product-body > header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.service-product-body > header > span { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-2); font-size: .75rem; font-weight: 800; }
.service-product-body > header svg { width: 15px; height: 15px; }
.service-product-body h2 { margin: 0; color: var(--text); font-size: 1.05rem; }
.service-product-body > p { min-height: 3.4em; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; text-align: center; }
.service-product-body ul { display: grid; flex: 1; align-content: start; gap: 7px; margin: 0; padding: 0; list-style: none; }
.service-product-body li { display: flex; align-items: center; justify-content: center; gap: 7px; color: #d8d0c1; font-size: .74rem; text-align: center; }
.service-product-body li svg { width: 14px; height: 14px; color: #56d394; }
.service-state { display: inline-flex; align-items: center; width: max-content; padding: 5px 8px; border-radius: 999px; color: #c7bda9; background: rgba(255,255,255,.05); font-size: .67rem; }
.service-state.is-active { color: #67dfa1; background: rgba(61, 190, 124, .1); }
.service-state.is-pending { color: #ffc36f; background: rgba(244, 155, 32, .12); }
.service-state.is-expired { color: #ff8b82; background: rgba(220, 78, 70, .12); }
.service-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(215, 169, 77, .13); }
.service-price strong { color: var(--text); font-size: 1.75rem; line-height: 1; }
.service-price strong small { color: var(--gold); font-size: .78rem; }
.service-price > span { color: var(--muted-2); font-size: .7rem; }
.service-order-options { display: grid; gap: 9px; }
.service-order-options label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; }
.service-order-options input,
.service-order-options select { min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid rgba(215, 169, 77, .2); border-radius: 8px; color: var(--text); background: #0c0f15; font: inherit; }
.service-order-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 8px; align-items: end; }
.service-order-main > * { min-width: 0; }
.service-order-main .primary-action { box-sizing: border-box; justify-content: center; width: 100%; min-width: 0; min-height: 40px; padding-inline: 6px; font-size: .7rem; white-space: nowrap; }
.service-period-select { min-width: 0; }
.service-period-select .clicker-plan-trigger { box-sizing: border-box; grid-template-columns: minmax(0,1fr) auto 14px; gap: 5px; min-width: 0; min-height: 40px; padding: 6px 7px; border-radius: 8px; }
.service-period-select .clicker-plan-trigger > span { font-size: .72rem; }
.service-period-select .clicker-plan-trigger > strong { font-size: .74rem; }
.service-period-select .clicker-plan-trigger > svg { width: 14px; height: 14px; }
.service-period-select .clicker-plan-menu { top: auto; bottom: calc(100% + 7px); min-width: min(270px, calc(100vw - 42px)); }
.service-period-select .clicker-plan-option { min-height: 44px; }
.service-period-select .clicker-plan-option > span { font-size: .72rem; }
.service-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding-block: 4px; }
.service-pagination a { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding-inline: 9px; border: 1px solid rgba(215,169,77,.18); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .74rem; font-weight: 800; }
.service-pagination a:hover { border-color: rgba(255,157,66,.4); color: var(--text); }
.service-pagination a.is-active { border-color: rgba(255,157,66,.52); color: #170d05; background: var(--orange-2); }
.service-pagination a svg { width: 15px; height: 15px; }
.service-pagination-gap { display: grid; place-items: center; min-width: 24px; color: var(--muted-2); }
.services-empty { display: grid; place-items: center; gap: 9px; min-height: 260px; border: 1px dashed rgba(215,169,77,.25); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.018); }
.services-empty svg { width: 34px; height: 34px; color: var(--gold); }

.customer-services-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border: 1px solid rgba(215, 169, 77, .2); border-radius: 14px; background: linear-gradient(145deg, rgba(21,25,34,.98), rgba(10,12,18,.98)); }
.customer-services-head h1 { font-size: 1.45rem; }
.customer-services-head > a { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 8px; color: #110b04; background: linear-gradient(135deg,#ffad55,#f47c20); font-size: .78rem; font-weight: 800; }
.customer-services-head > a svg { width: 16px; height: 16px; }
.customer-service-list { display: grid; gap: 11px; }
.customer-service-card { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(145px, auto); grid-template-areas: "visual body aside" "visual access aside"; grid-template-rows: auto auto; gap: 0 18px; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid rgba(215,169,77,.18); border-radius: 13px; color: inherit; background: linear-gradient(145deg,rgba(20,24,32,.98),rgba(10,12,18,.98)); }
.customer-service-card > img { grid-area: visual; width: 160px; height: 100%; min-height: 155px; object-fit: cover; }
.customer-service-card > div { grid-area: body; align-self: center; min-width: 0; padding-block: 18px; }
.customer-service-card > div > span { display: flex; align-items: center; gap: 6px; color: var(--orange-2); font-size: .7rem; font-weight: 800; }
.customer-service-card > div > span > svg { width: 15px; height: 15px; }
.customer-service-card h2 { margin: 7px 0 0; color: var(--text); font-size: 1rem; }
.customer-service-card h2 a { color: inherit; }
.customer-service-card h2 a:hover { color: var(--orange-2); }
.customer-service-card > div > p { margin: 7px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.service-country-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.customer-service-card > aside { grid-area: aside; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; min-width: 145px; padding: 18px; border-inline-start: 1px solid rgba(215,169,77,.12); }
.customer-service-card > aside strong { display: grid; gap: 3px; color: var(--text); font-size: .82rem; text-align: end; }
.customer-service-card > aside strong small { color: var(--muted-2); font-size: .65rem; }
.customer-service-card > aside a { color: var(--orange-2); font-size: .72rem; font-weight: 800; }
.customer-service-access { grid-area: access; min-width: 0; margin: 0 0 17px; overflow: visible; border: 1px solid rgba(255,157,66,.22); border-radius: 10px; background: linear-gradient(135deg,rgba(244,124,32,.1),rgba(255,179,101,.035) 48%,rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.customer-service-access summary { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 43px; padding: 9px 11px; cursor: pointer; list-style: none; color: #f3dfc4; font-size: .73rem; font-weight: 800; }
.customer-service-access summary::-webkit-details-marker { display: none; }
.customer-service-access summary > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #ffb365; }
.customer-service-access summary > span { flex: 1; }
.customer-service-access summary .service-access-chevron { color: #a99983; transition: transform .2s ease; }
.customer-service-access[open] summary .service-access-chevron { transform: rotate(180deg); }
.customer-service-access dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0 9px 9px; }
.customer-service-access dl div { min-width: 0; padding: 9px; border: 1px solid rgba(215,169,77,.09); border-radius: 8px; background: rgba(7,10,15,.58); }
.customer-service-access dt { color: var(--muted-2); font-size: .62rem; }
.customer-service-access dd { overflow-wrap: anywhere; margin: 4px 0 0; color: var(--text); font-size: .72rem; }
.service-access-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.service-access-value > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.service-access-copy.icon-copy-action { display: inline-grid; flex: 0 0 30px; place-items: center; width: 30px; min-width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,179,101,.22); border-radius: 7px; color: #ffbd79; background: rgba(244,124,32,.075); cursor: pointer; }
.service-access-copy.icon-copy-action:hover { border-color: rgba(255,179,101,.52); color: #fff0dc; background: rgba(244,124,32,.14); }
.service-access-copy.icon-copy-action > svg { width: 14px; height: 14px; }
.service-access-copy.icon-copy-action.is-copied { border-color: rgba(61,190,124,.55); color: #79e8b1; background: rgba(61,190,124,.12); }
.customer-services-empty { display: grid; place-items: center; gap: 8px; min-height: 250px; border: 1px dashed rgba(215,169,77,.28); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.018); }
.customer-services-empty > i,
.customer-services-empty > svg { width: 38px; height: 38px; padding: 10px; border-radius: 50%; color: #100a04; background: var(--orange-2); }
.customer-services-empty strong { color: var(--text); font-size: .9rem; }
.customer-services-empty span { font-size: .75rem; }

@container site-content (max-width: 1000px) {
    .service-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container site-content (max-width: 720px) {
    .services-tabs,
    .customer-service-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-product-grid { grid-template-columns: 1fr; }
    .service-category-intro { grid-template-columns: auto minmax(0, 1fr); }
    .service-category-intro > small { grid-column: 1 / -1; padding: 11px 0 0; border-inline-start: 0; border-top: 1px solid rgba(215, 169, 77, .14); }
    .customer-service-card { grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "visual body" "access access" "aside aside"; gap: 0 12px; }
    .customer-service-card > img { width: 100px; min-height: 130px; }
    .customer-service-card > div { padding: 14px 12px 14px 0; }
    html[dir="rtl"] .customer-service-card > div { padding: 14px 0 14px 12px; }
    .customer-service-card > .customer-service-access { width: auto; margin: 0 12px 12px; }
    .customer-service-card > aside { flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; padding: 11px 14px; border-top: 1px solid rgba(215,169,77,.12); border-inline-start: 0; }
}

@media (max-width: 620px) {
    .services-marketplace,
    .customer-services-dashboard { gap: 10px; }
    .services-marketplace-head,
    .services-marketplace-head > div { min-height: 190px; }
    .services-marketplace-head > div { padding: 22px 18px; }
    html[dir="rtl"] .services-marketplace-head > div { background: linear-gradient(270deg, rgba(8, 10, 15, .96), rgba(8, 10, 15, .78) 70%, rgba(8, 10, 15, .28)); }
    .services-marketplace-head h1 { font-size: 1.55rem; }
    .services-marketplace-head p { font-size: .78rem; }
    .services-tabs,
    .customer-service-tabs { gap: 4px; padding: 4px; }
    .services-tabs { grid-template-columns: repeat(var(--services-tab-count, 4), minmax(0, 1fr)); }
    .services-tabs a,
    .customer-service-tabs a { min-height: 40px; font-size: .7rem; }
    .services-tabs a { flex-direction: column; gap: 3px; min-height: 58px; padding: 6px 2px; font-size: .62rem; line-height: 1.15; }
    .services-tabs svg { width: 20px; height: 20px; }
    .service-product-body { padding: 14px; }
    .service-category-intro { gap: 11px; padding: 14px; }
    .service-category-intro-icon { width: 42px; height: 42px; }
    .service-category-intro h2 { font-size: .9rem; }
    .service-category-intro p,
    .service-category-intro > small { font-size: .7rem; }
    .clicker-service-card { grid-template-columns: 1fr; width: 100%; }
    .clicker-service-visual { min-height: 210px; max-height: 230px; border-radius: 15px 15px 0 0; }
    .clicker-service-content { padding: 22px 16px; }
    .clicker-service-content h2 { font-size: 1.4rem; }
    .clicker-plan-form { margin-top: 17px; }
    .service-order-main { grid-template-columns: minmax(0, 1.25fr) minmax(72px, .75fr); gap: 6px; }
    .service-order-main .primary-action { padding-inline: 5px; }
    .customer-services-head { padding: 16px; }
    .customer-services-head > a { min-height: 38px; padding-inline: 10px; font-size: .68rem; }
    .customer-service-card { grid-template-columns: 78px minmax(0, 1fr); gap: 0 9px; }
    .customer-service-card > img { width: 78px; min-height: 115px; }
    .customer-service-card > .customer-service-access { margin-inline: 9px; }
    .customer-service-access dl { grid-template-columns: 1fr; }
}

/* Service administration */
.admin-nav-count { display: grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: auto; padding-inline: 5px; border-radius: 999px; color: #1a0f04; background: #ffad55; font-size: 10px; }
.admin-services-panel,
.admin-service-orders-panel { gap: 18px; }
.admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-section-heading h2 { margin: 5px 0 0; color: var(--text); font-size: 1.35rem; }
.admin-section-heading p { margin: 7px 0 0; color: var(--muted); font-size: .78rem; }
.admin-section-heading .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-2); font-size: .7rem; font-weight: 800; }
.admin-section-heading .eyebrow svg { width: 15px; height: 15px; }
.admin-service-tabs { display: grid; grid-template-columns: repeat(var(--admin-service-tab-count,4),minmax(0,1fr)); gap: 6px; padding: 5px; border: 1px solid rgba(215,169,77,.18); border-radius: 10px; background: rgba(255,255,255,.02); }
.admin-service-tabs button { min-height: 40px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.admin-service-tabs button.is-active { border-color: rgba(255,157,66,.35); color: var(--orange-2); background: rgba(244,124,32,.1); }
.admin-service-clicker-link { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: center; overflow: hidden; border: 1px solid rgba(215,169,77,.18); border-radius: 12px; background: rgba(255,255,255,.02); }
.admin-service-clicker-link > img { width: 220px; height: 150px; object-fit: cover; }
.admin-service-clicker-link h3 { margin: 0; color: var(--text); }
.admin-service-clicker-link p { margin: 7px 0 15px; color: var(--muted); font-size: .76rem; }
.admin-service-product-list { display: grid; gap: 9px; }
.admin-service-product-card,
.admin-service-create,
.admin-service-order { overflow: hidden; border: 1px solid rgba(215,169,77,.17); border-radius: 10px; background: rgba(255,255,255,.018); }
.admin-service-product-card > summary { display: grid; grid-template-columns: 72px minmax(0,1fr) auto auto 18px; gap: 12px; align-items: center; min-height: 72px; padding: 8px 14px 8px 8px; cursor: pointer; list-style: none; }
.admin-service-product-card > summary::-webkit-details-marker,
.admin-service-create > summary::-webkit-details-marker,
.admin-service-order > summary::-webkit-details-marker { display: none; }
.admin-service-product-card > summary > img { width: 72px; height: 56px; border-radius: 7px; object-fit: cover; }
.admin-service-product-card > summary > span { display: grid; gap: 2px; }
.admin-service-product-card > summary strong { color: var(--text); font-size: .8rem; }
.admin-service-product-card > summary small { color: var(--muted-2); font-size: .66rem; }
.admin-service-product-card > summary > b { color: var(--gold); font-size: .82rem; }
.admin-service-product-card > summary > em { padding: 5px 7px; border-radius: 999px; color: #9da6b3; background: rgba(255,255,255,.04); font-size: .62rem; font-style: normal; }
.admin-service-product-card > summary > em.is-active { color: #64dca0; background: rgba(61,190,124,.1); }
.admin-service-product-card > summary > svg { width: 16px; height: 16px; color: var(--muted); }
.admin-service-form { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; border-top: 1px solid rgba(215,169,77,.12); }
.admin-service-form label,
.admin-fulfillment-form label { display: grid; gap: 5px; color: var(--muted); font-size: .67rem; }
.admin-service-main-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.admin-service-main-fields label.is-wide { grid-column: 1 / -1; }
.admin-country-select { position: relative; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(215,169,77,.18); border-radius: 7px; background: #0b0e14; }
.admin-country-select:focus-within { border-color: rgba(255,157,66,.55); box-shadow: 0 0 0 3px rgba(244,124,32,.07); }
.admin-country-select img { flex: 0 0 auto; width: 34px; height: 23px; margin-inline: 10px 0; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; object-fit: cover; box-shadow: 0 2px 7px rgba(0,0,0,.3); }
.admin-country-select img[hidden] { display: none; }
.admin-service-form .admin-country-select select { width: 100%; min-height: 39px; padding: 8px 10px; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.admin-country-select option { color: #ece7de; background: #111620; }
.admin-service-form input,
.admin-service-form textarea,
.admin-fulfillment-form input,
.admin-fulfillment-form textarea { box-sizing: border-box; width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid rgba(215,169,77,.18); border-radius: 7px; color: var(--text); background: #0b0e14; font: inherit; }
.admin-service-form textarea,
.admin-fulfillment-form textarea { min-height: 76px; resize: vertical; }
.admin-service-main-fields textarea { min-height: 150px; line-height: 1.75; }
.admin-service-prices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 0; padding: 13px; border: 1px solid rgba(215,169,77,.14); border-radius: 9px; }
.admin-service-prices legend { padding-inline: 7px; color: #dbc9ae; font-size: .7rem; font-weight: 800; }
.admin-service-prices label > div { display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(215,169,77,.18); border-radius: 7px; background: #0b0e14; }
.admin-service-prices label > div:focus-within { border-color: rgba(255,157,66,.55); box-shadow: 0 0 0 3px rgba(244,124,32,.07); }
.admin-service-prices label > div b { display: grid; place-items: center; align-self: stretch; width: 34px; color: var(--gold); background: rgba(255,255,255,.035); font-size: .72rem; }
.admin-service-prices label > div input { min-height: 39px; border: 0; border-radius: 0; background: transparent; }
.admin-service-advanced { overflow: hidden; border: 1px solid rgba(215,169,77,.13); border-radius: 9px; background: rgba(255,255,255,.015); }
.admin-service-advanced > summary { display: flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 12px; cursor: pointer; color: #c8bda9; font-size: .7rem; font-weight: 800; list-style: none; }
.admin-service-advanced > summary::-webkit-details-marker { display: none; }
.admin-service-advanced > summary svg { width: 15px; height: 15px; color: var(--orange-2); }
.admin-service-advanced > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 12px; border-top: 1px solid rgba(215,169,77,.11); }
.admin-service-form .admin-service-check { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 40px; }
.admin-service-check input { width: 16px; min-height: 16px; }
.admin-service-form .primary-action.is-wide { justify-content: center; width: 100%; }
.admin-service-create { margin-top: 12px; }
.admin-service-create > summary { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px; cursor: pointer; color: var(--orange-2); font-size: .76rem; font-weight: 800; list-style: none; }
.admin-service-create > summary svg { width: 16px; height: 16px; }
.admin-orders-count { padding: 7px 10px; border-radius: 999px; color: #ffc36f; background: rgba(244,155,32,.1); font-size: .68rem; }
.admin-service-orders-list { display: grid; gap: 9px; }
.admin-service-order.is-priority { border-color: rgba(255,157,66,.34); }
.admin-service-order > summary { display: grid; grid-template-columns: 55px minmax(0,1fr) auto auto 18px; gap: 12px; align-items: center; min-height: 68px; padding: 10px 14px; cursor: pointer; list-style: none; }
.admin-service-order > summary > b { color: var(--gold); }
.admin-service-order > summary > span { display: grid; gap: 3px; }
.admin-service-order > summary > span strong { color: var(--text); font-size: .78rem; }
.admin-service-order > summary > span small { color: var(--muted-2); font-size: .63rem; }
.admin-service-order > summary > em { padding: 5px 8px; border-radius: 999px; color: #ffc36f; background: rgba(244,155,32,.1); font-size: .62rem; font-style: normal; }
.admin-service-order > summary > strong { color: #66dda0; font-size: .8rem; }
.admin-service-order > summary > svg { width: 16px; height: 16px; }
.admin-order-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px; border-top: 1px solid rgba(215,169,77,.12); }
.admin-order-details > div { display: grid; gap: 4px; padding: 10px; border-radius: 7px; background: rgba(255,255,255,.025); }
.admin-order-details span { color: var(--muted-2); font-size: .62rem; }
.admin-order-details b { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; color: var(--text); font-size: .7rem; }
.admin-order-details img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.admin-fulfillment-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 14px; border-top: 1px solid rgba(215,169,77,.12); }
.admin-fulfillment-form .primary-action { grid-column: 1 / -1; }
.admin-order-status-actions { display: flex; gap: 7px; padding: 0 14px 14px; }
.admin-order-status-actions button { min-height: 34px; padding-inline: 10px; border: 1px solid rgba(215,169,77,.18); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; }

@media (max-width: 900px) {
    .admin-fulfillment-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-service-prices,
    .admin-service-advanced > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-order-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
    .admin-service-tabs { grid-template-columns: repeat(var(--admin-service-tab-count,3),minmax(0,1fr)); }
    .admin-service-clicker-link { grid-template-columns: 1fr; }
    .admin-service-clicker-link > img { width: 100%; height: 140px; }
    .admin-service-clicker-link > div { padding: 0 14px 14px; }
    .admin-service-product-card > summary { grid-template-columns: 58px minmax(0,1fr) 16px; }
    .admin-service-product-card > summary > img { width: 58px; height: 48px; }
    .admin-service-product-card > summary > b,
    .admin-service-product-card > summary > em { display: none; }
    .admin-service-main-fields,
    .admin-service-prices,
    .admin-service-advanced > div,
    .admin-fulfillment-form,
    .admin-order-details { grid-template-columns: 1fr; }
    .admin-service-main-fields label.is-wide { grid-column: 1; }
    .admin-service-order > summary { grid-template-columns: 44px minmax(0,1fr) 16px; }
    .admin-service-order > summary > em,
    .admin-service-order > summary > strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-launch-splash__content,
    .app-launch-splash__loader::after {
        animation: none;
    }
}

/* Phone-only landscape guard. Tablets keep their normal responsive layout. */
.phone-portrait-guard {
    display: none;
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
    html,
    body {
        overflow: hidden !important;
    }

    .phone-portrait-guard {
        position: fixed;
        inset: 0;
        z-index: 2147483500;
        display: grid;
        padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
        place-items: center;
        background:
            radial-gradient(circle at 50% 42%, rgba(244, 124, 32, 0.11), transparent 38%),
            rgba(8, 9, 13, 0.975);
        backdrop-filter: blur(16px);
    }

    .phone-portrait-guard__card {
        display: grid;
        justify-items: center;
        width: min(88vw, 430px);
        padding: 20px 24px;
        border: 1px solid rgba(244, 124, 32, 0.42);
        border-radius: 18px;
        background: rgba(18, 21, 29, 0.94);
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
        color: #fff;
        text-align: center;
    }

    .phone-portrait-guard__card strong {
        margin-block-start: 12px;
        font-size: clamp(15px, 4vw, 19px);
        line-height: 1.5;
    }

    .phone-portrait-guard__card > span:last-child {
        max-width: 36ch;
        margin-block-start: 7px;
        color: #b8becb;
        font-size: clamp(10px, 2.7vw, 13px);
        line-height: 1.8;
    }

    .phone-portrait-guard__icon {
        position: relative;
        display: block;
        width: 30px;
        height: 48px;
        border: 2px solid #f47c20;
        border-radius: 7px;
        box-shadow: 0 0 22px rgba(244, 124, 32, 0.24);
        animation: phone-portrait-turn 1.7s ease-in-out infinite;
    }

    .phone-portrait-guard__icon::before {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-end: 4px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #f4a057;
        content: "";
        translate: -50% 0;
    }

    .phone-portrait-guard__icon i {
        position: absolute;
        inset: 5px 4px 11px;
        border-radius: 3px;
        background: linear-gradient(145deg, rgba(244, 124, 32, 0.18), rgba(255, 255, 255, 0.025));
    }
}

@keyframes phone-portrait-turn {
    0%, 18% { transform: rotate(90deg); }
    55%, 100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .phone-portrait-guard__icon {
        animation: none;
    }
}

.topbar {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--topbar-height);
    padding: 10px clamp(12px, 1.15vw, 22px);
    /* Match the sidebar: one structural divider, without an inset frame. */
    border: 0;
    border-bottom: 4px solid var(--line-strong);
    background: rgba(12, 14, 19, .96);
    position: sticky;
    top: 0;
    z-index: 40;
}

.brand-mark,
.installer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    color: var(--orange-2);
    background: #10131a;
    font-weight: 800;
}

.brand-logo {
    border: 0;
    background: transparent;
    object-fit: contain;
}

.brand-mark strong,
.installer-brand h1 {
    display: block;
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.brand-mark small,
.installer-brand p {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.topbar-search {
    margin-inline-start: auto;
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-toggle {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted-2);
}

.search-toggle:hover,
.topbar-search.is-open .search-toggle {
    color: var(--text);
    border-color: rgba(244, 124, 32, .45);
    background: rgba(244, 124, 32, .12);
}

.search-panel {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 80;
    display: grid;
    gap: 10px;
    width: min(430px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12, 14, 19, .98);
    box-shadow: var(--shadow);
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted-2);
    background: var(--surface);
}

.search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}

.search-field input::placeholder {
    color: var(--muted-2);
}

.search-results {
    display: grid;
    gap: 6px;
    max-height: min(380px, calc(100vh - 150px));
    overflow: auto;
    scrollbar-color: var(--orange) rgba(20, 24, 33, .92);
    scrollbar-width: thin;
}

.search-results::-webkit-scrollbar {
    width: 10px;
}

.search-results::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(20, 24, 33, .92);
}

.search-results::-webkit-scrollbar-thumb {
    border: 2px solid rgba(20, 24, 33, .92);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--orange), var(--gold));
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--orange-2), var(--gold));
}

.search-result {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text);
    text-align: start;
}

.search-result:hover,
.search-result:focus-visible {
    outline: 0;
    border-color: rgba(215, 169, 77, .35);
    background: rgba(215, 169, 77, .08);
}

.search-result i {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: var(--radius);
    color: var(--orange-2);
    background: rgba(244, 124, 32, .12);
}

.search-result span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.search-result strong,
.search-result small,
.search-empty {
    overflow-wrap: anywhere;
}

.search-result strong {
    font-size: 14px;
    line-height: 1.35;
}

.search-result small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.search-empty {
    margin: 0;
    padding: 10px;
    color: var(--muted);
    text-align: center;
}

.topbar-actions,
.workspace-actions,
.permission-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-actions {
    flex-wrap: nowrap;
    min-width: 0;
}

.icon-button,
.language-toggle,
.locale-chip,
.install-app-action,
.primary-action,
.ghost-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface);
    white-space: nowrap;
}

.icon-button {
    width: 42px;
    padding: 0;
    cursor: pointer;
}

.language-toggle,
.locale-chip {
    padding: 0 12px;
}

.locale-chip--country {
    width: 42px;
    min-width: 42px;
    padding: 0;
    overflow: hidden;
}

.locale-chip-flag {
    display: block;
    width: 28px;
    height: 20px;
    border: 1px solid rgba(244, 124, 32, .72);
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.locale-chip-country-code {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.install-app-action {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    flex: 0 0 34px;
    border: 1px solid rgba(244, 124, 32, .58);
    border-radius: var(--radius);
    color: #2a1508;
    background: var(--orange);
    cursor: pointer;
    font-weight: 800;
    white-space: nowrap;
}

.install-app-action svg {
    width: 16px;
    height: 16px;
}

.install-app-action:hover,
.install-app-action:focus-visible {
    background: var(--orange-2);
    outline: 0;
}

.language-toggle {
    border-color: rgba(244, 124, 32, .45);
}

.header-upload-menu { position: relative; flex: 0 0 auto; }
.header-upload-menu > summary { list-style: none; cursor: pointer; }
.header-upload-menu > summary::-webkit-details-marker { display: none; }
.header-upload-toggle { width: 42px; min-height: 42px; padding: 0; }
.header-upload-toggle svg { width: 18px; height: 18px; }
.header-upload-menu[open] .header-upload-toggle { color: #211205; border-color: var(--orange); background: linear-gradient(135deg,var(--orange),#ffb22e); }
.header-upload-options { position: absolute; z-index: 95; inset-block-start: calc(100% + 8px); inset-inline-end: 0; display: grid; gap: 3px; width: max-content; min-width: 150px; padding: 5px; border: 1px solid rgba(244,124,32,.46); border-radius: 11px; background: rgba(12,15,21,.99); box-shadow: 0 15px 34px rgba(0,0,0,.46); }
.header-upload-options a { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; color: var(--muted-2); border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.header-upload-options a:hover,.header-upload-options a:focus-visible { color: var(--text); border-color: rgba(244,124,32,.38); background: rgba(244,124,32,.1); outline: 0; }
.header-upload-options svg { width: 15px; height: 15px; color: var(--orange); }

.account-header-action {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--muted-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.account-header-action:hover,
.account-header-action:focus-visible {
    color: var(--text);
    border-color: rgba(244, 124, 32, .52);
    background: rgba(244, 124, 32, .11);
    outline: 0;
    transform: translateY(-1px);
}

.account-header-action svg { width: 19px; height: 19px; }

.account-header-action img,
.sidebar-account-action img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--orange);
    border-radius: inherit;
    object-fit: cover;
}

.primary-action,
.ghost-action {
    min-width: 132px;
    padding: 0 16px;
    cursor: pointer;
}

.primary-action {
    border-color: rgba(244, 124, 32, .6);
    background: var(--orange);
    color: #120b06;
    font-weight: 800;
}

.ghost-action {
    border-color: rgba(215, 169, 77, .45);
    color: var(--gold);
}

.primary-action:disabled,
.ghost-action:disabled,
select:disabled,
input:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.sidebar {
    grid-area: sidebar;
    min-width: 0;
    border-inline-end: 4px solid var(--line-strong);
    border-bottom: 4px solid var(--line-strong);
    background: rgba(10, 12, 17, .98);
    overflow: auto;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
    padding: 0 14px 22px;
}

.sidebar-scroll-top {
    position: fixed;
    z-index: 32;
    bottom: 14px;
    inset-inline-start: calc(clamp(210px, 17vw, 280px) / 2 - 19px);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #161006;
    border: 1px solid rgba(255, 192, 92, .78);
    border-radius: 50%;
    background: linear-gradient(145deg, #ffc56a, var(--orange));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .34), 0 0 0 3px rgba(244, 124, 32, .1);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sidebar-scroll-top:hover,
.sidebar-scroll-top:focus-visible {
    filter: brightness(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .42), 0 0 0 4px rgba(244, 124, 32, .17);
    outline: 0;
    transform: translateY(-2px);
}

.sidebar-scroll-top svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
}

.sidebar-account-action {
    display: none;
}

@media (max-width: 900px) {
    .sidebar-scroll-top {
        inset-inline-start: calc(clamp(60px, 17vw, 72px) / 2 - 17px);
        bottom: 10px;
        width: 34px;
        height: 34px;
    }

    .account-header-action {
        display: none;
    }

    .sidebar-account-action {
        position: fixed;
        z-index: 32;
        inset-inline-start: calc(clamp(60px, 17vw, 72px) / 2 - 17px);
        bottom: 10px;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        color: var(--muted-2);
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(20, 24, 33, .96);
    }

    .sidebar-account-action:hover,
    .sidebar-account-action:focus-visible {
        color: var(--orange);
        border-color: rgba(244, 124, 32, .54);
        outline: 0;
    }

    .sidebar-account-action svg { width: 16px; height: 16px; }

    .sidebar-scroll-top { bottom: 52px; }

    .sidebar-scroll-top svg {
        width: 16px;
        height: 16px;
    }
}

.sidebar-section {
    display: grid;
    gap: 4px;
}

.sidebar-link,
.sidebar-sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius);
    min-height: 42px;
    min-width: 0;
}

.sidebar-link {
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid transparent;
    font-weight: 700;
}

.sidebar-link.is-active,
.sidebar-link:hover {
    color: var(--text);
    border-color: rgba(244, 124, 32, .35);
    background: rgba(244, 124, 32, .1);
}

.sidebar-sub-link {
    margin-inline-start: 34px;
    padding: 7px 10px;
    min-height: 34px;
    color: var(--muted-2);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.sidebar-sub-link:hover,
.sidebar-sub-link.is-active {
    color: var(--gold);
    background: rgba(215, 169, 77, .08);
}

.sidebar-more {
    margin-inline-start: 34px;
}

.sidebar-more summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    color: var(--muted-2);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}

.sidebar-more summary::-webkit-details-marker { display: none; }
.sidebar-more summary svg { width: .95rem; transition: transform .2s ease; }
.sidebar-more[open] summary svg { transform: rotate(180deg); }
.sidebar-more .sidebar-sub-link { margin-inline-start: 0; }

.content-area {
    grid-area: main;
    --content-inline-padding: var(--page-padding);
    position: relative;
    min-width: 0;
    padding: var(--page-padding) 0 0;
}

.adblock-guard {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 9, 14, .92);
    color: #fff;
    backdrop-filter: blur(5px);
}

.adblock-guard[hidden] { display: none; }

.adblock-guard-card {
    width: min(100%, 440px);
    padding: 28px 24px;
    border: 1px solid rgba(255, 140, 34, .52);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(25, 29, 40, .99), rgba(12, 15, 23, .99));
    box-shadow: 0 22px 58px rgba(0, 0, 0, .42);
    text-align: center;
}

.adblock-guard-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 140, 34, .52);
    border-radius: 13px;
    color: var(--orange);
    background: rgba(255, 140, 34, .1);
}

.adblock-guard-icon svg { width: 21px; height: 21px; }

.adblock-guard-card h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.08rem, 3vw, 1.36rem);
}

.adblock-guard-card p {
    max-width: 39ch;
    margin: 10px auto 18px;
    color: var(--muted);
    line-height: 1.8;
}

.adblock-guard-retry {
    min-width: 145px;
    margin-inline: auto;
}

.adblock-guard-retry.is-checking svg {
    animation: adblock-guard-spin 700ms linear infinite;
}

@keyframes adblock-guard-spin { to { transform: rotate(360deg); } }

html.is-adblock-blocked,
html.is-adblock-blocked body {
    overflow: hidden !important;
}

/* A consistent, compact scrollbar for the application and scrollable controls. */
:root { scrollbar-color: var(--orange) rgba(20, 24, 33, .82); scrollbar-width: thin; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(20, 24, 33, .82); border-radius: 999px; }
*::-webkit-scrollbar-thumb { border: 2px solid rgba(20, 24, 33, .82); border-radius: 999px; background: linear-gradient(180deg, var(--orange), var(--gold)); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--orange-2), var(--gold)); }

.content-area,
.sidebar,
.resizer-controls select { scrollbar-color: var(--orange) rgba(20, 24, 33, .82); scrollbar-width: thin; }

@media (min-width: 901px) {
    html,
    body {
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    .app-frame {
        height: 100vh;
    }

    .content-area {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* The sidebar already provides the visible desktop rail. Keep the
           content independently scrollable without adding a second rail. */
        scrollbar-width: none;
    }

    .content-area::-webkit-scrollbar {
        display: none;
    }
}

.content-inner {
    display: grid;
    align-content: start;
    gap: var(--content-gap);
    width: calc(100% - (var(--content-inline-padding) * 2));
    max-width: min(1240px, calc(100% - (var(--content-inline-padding) * 2)));
    min-height: calc(100vh - var(--topbar-height) - 78px);
    margin: 0 auto var(--page-padding);
}

.site-footer {
    grid-area: auto;
    display: grid;
    width: 100%;
    gap: 18px;
    padding: 26px max(var(--page-padding), 24px) 18px;
    border-top: 1px solid rgba(215, 169, 77, .3);
    color: var(--muted);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(244, 124, 32, .09), transparent 48%),
        rgba(12, 14, 19, .98);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 24px;
}

.footer-branding {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.footer-branding strong {
    color: var(--text);
    font-size: 17px;
}

.footer-branding span,
.footer-bottom {
    font-size: 12px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    gap: 10px 10px;
}

.footer-links a { grid-column: span 3; }

.footer-links a {
    display: inline-block;
    justify-self: center;
    width: fit-content;
    padding: 3px 0;
    border-bottom: 1px solid transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
    transition: border-color .18s ease, color .18s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--orange-2);
    border-color: currentColor;
}

.footer-disclaimer {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 16px;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: var(--radius);
    color: #aeb8c8;
    font-size: 12px;
    line-height: 1.9;
    background: rgba(215, 169, 77, .045);
}
.footer-disclaimer span { display: block; }
.footer-disclaimer span + span { margin-top: 4px; color: #c4cddd; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(143, 155, 177, .14);
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(31, 191, 117, .08);
}

.cookie-consent {
    position: fixed;
    z-index: 1000;
    inset-inline: 18px;
    inset-block-end: 18px;
    display: grid;
    justify-items: center;
    pointer-events: none;
}

/* Keep the consent notice inside the reading area on desktop, never over the sidebar. */
@media (min-width: 901px) {
    html[dir="ltr"] .cookie-consent {
        inset-inline-start: calc(clamp(210px, 17vw, 280px) + 18px);
        inset-inline-end: 18px;
    }

    html[dir="rtl"] .cookie-consent {
        /* In RTL the sidebar is on the physical right, so reserve its width
           from inline-start and center the notice in the remaining content. */
        inset-inline-start: calc(clamp(210px, 17vw, 280px) + 18px);
        inset-inline-end: 18px;
    }
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(820px, 100%);
    padding: 16px 18px;
    border: 1px solid rgba(244, 124, 32, .42);
    border-radius: calc(var(--radius) + 2px);
    color: var(--text);
    background: rgba(15, 18, 25, .98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    pointer-events: auto;
}

.cookie-consent-card h2 {
    margin: 0 0 5px;
    color: var(--gold);
    font-size: 15px;
}

.cookie-consent-card p {
    max-width: 530px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.cookie-consent-card p a {
    color: var(--orange-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.cookie-consent-actions .primary-action,
.cookie-consent-actions .ghost-action {
    min-height: 38px;
    min-width: 0;
    padding: 0 12px;
    white-space: nowrap;
}

.legal-page {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 0 10px;
}

.legal-page-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.legal-page-head h1 {
    margin: 4px 0 6px;
    color: var(--text);
    font-size: clamp(22px, 2.6vw, 30px);
}

.legal-page-head p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.legal-card {
    display: grid;
    gap: 14px;
    padding: clamp(16px, 2.2vw, 22px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .88);
    box-shadow: var(--shadow);
}

.legal-card section {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(57, 67, 85, .58);
}

.legal-card section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.legal-card h2 {
    margin: 0 0 5px;
    color: var(--gold);
    font-size: 14px;
}

.legal-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.legal-contact-action {
    justify-self: start;
}

.about-service-page {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 14px 0 18px;
}

.about-service-hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: clamp(30px, 5vw, 58px) clamp(18px, 5vw, 64px);
    border: 1px solid rgba(215, 169, 77, .28);
    border-radius: 18px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(244, 124, 32, .16), transparent 52%),
        linear-gradient(145deg, rgba(24, 28, 38, .98), rgba(11, 13, 18, .98));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.about-service-hero::before {
    content: '';
    position: absolute;
    inset: 0 14% auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
}

.about-service-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}

.about-service-kicker svg {
    width: 17px;
    height: 17px;
}

.about-service-hero h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.25;
}

.about-service-hero > p {
    max-width: 760px;
    margin: 0;
    color: #bbc4d3;
    font-size: 14px;
    line-height: 1.9;
}

.about-service-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.about-service-actions a {
    min-height: 42px;
}

.about-service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr);
    gap: 16px;
}

.about-service-story,
.about-service-highlights {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 21, 29, .92);
    box-shadow: var(--shadow);
}

.about-service-story {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: clamp(20px, 3vw, 30px);
}

.about-service-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(244, 124, 32, .35);
    border-radius: 12px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .1);
}

.about-service-icon svg {
    width: 21px;
    height: 21px;
}

.about-service-story h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 19px;
}

.about-service-story p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 2;
}

.about-service-story p + p {
    margin-top: 13px;
}

.about-service-highlights {
    display: grid;
    align-content: center;
    padding: 10px 20px;
}

.about-service-highlights article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(80, 91, 111, .28);
}

.about-service-highlights article:last-child {
    border-bottom: 0;
}

.about-service-highlights article > svg {
    width: 20px;
    height: 20px;
    color: var(--gold);
}

.about-service-highlights article div {
    display: grid;
    gap: 4px;
}

.about-service-highlights strong {
    color: var(--text);
    font-size: 13px;
}

.about-service-highlights span {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.7;
}

.admin-about-heading > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-about-heading > div h2,
.admin-about-heading > div small {
    margin: 0;
}

.admin-about-heading > div small {
    color: var(--muted);
    font-size: 11px;
}

.admin-about-heading > a {
    margin-inline-start: auto;
}

.admin-about-form {
    gap: 18px;
}

.admin-about-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-about-language-grid fieldset {
    display: grid;
    align-content: start;
    gap: 13px;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(9, 11, 16, .48);
}

.admin-about-language-grid legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}

.admin-about-language-grid legend svg {
    width: 15px;
    height: 15px;
}

.admin-about-language-grid label {
    display: grid;
    gap: 7px;
    color: var(--muted-2);
    font-size: 11.5px;
    font-weight: 700;
}

.admin-about-language-grid input,
.admin-about-language-grid textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    background: rgba(8, 10, 15, .8);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}

.admin-about-language-grid input {
    min-height: 42px;
    padding: 0 12px;
}

.admin-about-language-grid textarea {
    min-height: 92px;
    padding: 10px 12px;
    resize: vertical;
}

.admin-about-language-grid textarea[name^="body_"] {
    min-height: 220px;
}

.admin-about-language-grid input:focus,
.admin-about-language-grid textarea:focus {
    border-color: rgba(244, 124, 32, .7);
    outline: 2px solid rgba(244, 124, 32, .12);
}

.admin-about-language-grid label small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.admin-about-save {
    justify-self: start;
    min-height: 43px;
}

@media (max-width: 760px) {
    .about-service-page {
        gap: 12px;
        padding-top: 2px;
    }

    .about-service-hero {
        gap: 9px;
        padding: 24px 14px;
        border-radius: 13px;
    }

    .about-service-hero h1 {
        font-size: 25px;
    }

    .about-service-hero > p {
        font-size: 11.5px;
        line-height: 1.75;
    }

    .about-service-actions {
        width: 100%;
    }

    .about-service-actions a {
        flex: 1 1 130px;
        justify-content: center;
        padding-inline: 10px;
        font-size: 11px;
    }

    .about-service-layout,
    .admin-about-language-grid {
        grid-template-columns: 1fr;
    }

    .about-service-story {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 16px;
        border-radius: 12px;
    }

    .about-service-story h2 {
        font-size: 16px;
    }

    .about-service-story p {
        font-size: 11.5px;
        line-height: 1.85;
    }

    .about-service-highlights {
        padding: 5px 15px;
        border-radius: 12px;
    }

    .about-service-highlights article {
        padding: 13px 0;
    }

    .admin-about-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .admin-about-heading > a {
        width: 100%;
        margin-inline-start: 0;
        justify-content: center;
    }

    .admin-about-language-grid fieldset {
        padding: 13px;
    }
}

.plans-page { display: grid; gap: 18px; width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 0 10px; }
.plans-page-head { display: grid; justify-items: center; gap: 7px; padding: 8px 10px 17px; text-align: center; border-bottom: 1px solid var(--line); }
.plans-page-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 12px; font-weight: 800; }
.plans-page-head .eyebrow svg { width: 15px; height: 15px; }
.plans-page-head h1 { margin: 0; color: var(--text); font-size: clamp(24px, 3vw, 34px); }
.plans-page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.plans-switcher { display: flex; justify-content: center; width: min(100%, 580px); margin: 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: rgba(10,12,17,.88); }
.plans-switcher button { flex: 0 1 132px; min-width: 0; min-height: 38px; padding: 0 8px; color: var(--muted); border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.plans-switcher button.is-active { color: #1b1007; background: var(--orange); }
.plans-single-card { width: min(100%, 560px); margin: 0 auto; }
.plan-public-card { position: relative; display: grid; gap: 15px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(155deg, rgba(27,32,43,.98), rgba(13,15,21,.98)); box-shadow: var(--shadow); overflow: hidden; }
.plan-public-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: rgba(243,167,74,.46); }
.plan-public-card.is-featured { border-color: rgba(244,148,31,.72); background: linear-gradient(155deg, rgba(54,38,20,.44), rgba(16,18,25,.99) 60%); }
.plan-public-card.is-featured::before { height: 3px; background: var(--orange); }
.plan-public-card.is-current { border-color: rgba(244,148,31,.68); box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,184,78,.08); }
.plan-public-card header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.plan-public-card header > div { display: inline-flex; align-items: center; min-width: 0; gap: 8px; }
.plan-public-header-actions { flex: 0 0 auto; }
.plan-public-card header svg { width: 18px; height: 18px; color: var(--gold); }
.plan-public-card h2 { margin: 0; color: var(--text); font-size: 17px; overflow-wrap: anywhere; }
.plan-public-header-actions > span { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(56,211,147,.28); border-radius: 999px; color: #6ee4b2; background: rgba(32,164,104,.11); font-size: 10px; font-weight: 800; }
.plan-public-price { display: grid; justify-items: center; gap: 2px; padding: 12px 0; border-block: 1px solid var(--line); text-align: center; }
.plan-public-price-line { display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; direction: inherit; }
.plan-public-billing-toggle { display: inline-flex; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: rgba(8,10,15,.7); }
.plan-public-billing-toggle button { min-height: 28px; padding: 0 10px; color: var(--muted); border: 0; border-inline-start: 1px solid var(--line); background: transparent; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.plan-public-billing-toggle button:first-child { border-inline-start: 0; }
.plan-public-billing-toggle button.is-active { color: #1d1208; background: linear-gradient(135deg, var(--orange), #ffb22d); }
.plan-public-price strong { color: var(--orange); font-size: 26px; line-height: 1.1; }
.plan-public-price strong small { font-size: 12px; }
.plan-public-price span { color: var(--muted); font-size: 11px; }
.plan-public-card ul { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.plan-public-card li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.plan-public-card li svg { width: 15px; height: 15px; color: var(--gold); }
.plan-public-card li b { color: var(--text); font-size: 11px; text-align: end; }
.plan-public-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 13px; color: #201407; border: 1px solid var(--orange); border-radius: 9px; background: var(--orange); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; }
.plan-public-action svg { width: 15px; height: 15px; }
.plan-public-action.is-current { color: #67e5b0; border-color: rgba(55,211,144,.43); background: rgba(31,157,99,.12); }
.plan-public-action:disabled { cursor: default; opacity: .54; }
.plan-public-action-row { display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.plan-public-billing-toggle--mobile { display: none; }
.plans-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 150px; padding: 18px; color: var(--muted); border: 1px solid var(--line); border-radius: 13px; background: rgba(20,24,33,.88); text-align: center; }
.plans-empty svg { width: 20px; height: 20px; color: var(--gold); }
@media (max-width: 560px) { .plans-page { gap: 13px; padding-top: 14px; } .plans-page-head { padding-bottom: 13px; } .plans-page-head p { font-size: 12px; } .plans-switcher { width: 100%; } .plans-switcher button { min-height: 35px; padding-inline: 5px; font-size: 11px; } .plan-public-card { gap: 12px; padding: 14px; } .plan-public-price { padding: 10px 0; } .plan-public-billing-toggle--header { display: none; } .plan-public-billing-toggle--mobile { display: inline-flex; flex: 0 0 auto; } .plan-public-action-row.has-billing .plan-public-action { min-width: 0; flex: 1 1 auto; padding-inline: 10px; } }

.contact-page {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 0 10px;
}

.contact-form {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .88);
    box-shadow: var(--shadow);
}

.contact-form label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: 0;
    color: var(--text);
    background: rgba(8, 9, 13, .72);
    font: inherit;
}

.contact-form textarea {
    min-height: 190px;
    padding-block: 13px;
    resize: vertical;
    line-height: 1.8;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, .1);
}

.contact-form-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.contact-turnstile {
    min-height: 65px;
    max-width: 100%;
}

.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.support-center {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 0 12px;
}

.support-center-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 132px;
    padding: clamp(18px, 3vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(244, 124, 32, .3);
    border-radius: 16px;
    background: radial-gradient(circle at 12% 20%, rgba(244, 124, 32, .17), transparent 36%), linear-gradient(145deg, rgba(25, 29, 39, .98), rgba(12, 14, 20, .98));
    box-shadow: var(--shadow);
}

.support-center-head::after {
    content: '';
    position: absolute;
    inset-inline-end: -55px;
    width: 190px;
    height: 190px;
    border: 36px solid rgba(244, 124, 32, .045);
    border-radius: 50%;
}

.support-center-icon {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 54px;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #241407;
    border: 1px solid rgba(255, 202, 116, .65);
    border-radius: 14px;
    background: linear-gradient(145deg, #ffb84e, var(--orange));
    box-shadow: 0 10px 25px rgba(244, 124, 32, .18);
}

.support-center-icon svg { width: 27px; height: 27px; }
.support-center-head > div { position: relative; z-index: 1; min-width: 0; }
.support-center-head > div > span { color: var(--orange-2); font-size: 11px; font-weight: 850; }
.support-center-head h1 { margin: 3px 0 5px; color: var(--text); font-size: clamp(22px, 3vw, 32px); }
.support-center-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.support-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 12px;
}

.support-alert svg { flex: 0 0 auto; width: 18px; height: 18px; }
.support-alert p { margin: 0; line-height: 1.7; }
.support-alert.is-error { color: #ffc0bd; border-color: rgba(235, 86, 79, .35); background: rgba(174, 47, 43, .1); }
.support-alert.is-success { color: #9be8bd; border-color: rgba(70, 200, 132, .35); background: rgba(40, 160, 99, .1); }
.support-alert > div { display: grid; gap: 3px; }

.support-compose-layout,
.support-ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(245px, .75fr);
    align-items: start;
    gap: 14px;
}

.support-compose.contact-form { gap: 12px; padding: clamp(16px, 2.4vw, 23px); border-radius: 14px; }
.support-compose > header { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.support-compose > header > div { display: flex; align-items: center; gap: 9px; }
.support-compose > header svg { width: 21px; height: 21px; color: var(--orange); }
.support-compose > header span { display: grid; gap: 2px; }
.support-compose > header strong { color: var(--text); font-size: 15px; }
.support-compose > header small { color: var(--muted); font-size: 10px; font-weight: 600; }
.support-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.support-compose textarea { min-height: 148px; }
.support-contact-hint { display: flex; align-items: center; gap: 5px; margin: -4px 0 0; color: var(--muted); font-size: 10px; }
.support-contact-hint svg { width: 13px; height: 13px; color: var(--gold); }

.support-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid rgba(70, 200, 132, .24);
    border-radius: 10px;
    background: rgba(70, 200, 132, .055);
}

.support-identity > svg { width: 22px; height: 22px; color: #68dca2; }
.support-identity > div { display: grid; min-width: 0; gap: 2px; }
.support-identity strong { color: var(--text); font-size: 12px; }
.support-identity span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.support-identity em { padding: 3px 7px; color: #91e8b7; border: 1px solid rgba(70, 200, 132, .3); border-radius: 99px; font-size: 9px; font-style: normal; font-weight: 800; }

.support-form-action { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.support-form-action .primary-action { min-height: 41px; padding-inline: 15px; }

.support-compose-aside,
.support-ticket-aside { display: grid; gap: 9px; }
.support-guest-note,
.support-signed-in,
.support-tracking-link,
.support-my-tickets {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(20, 24, 33, .82);
    box-shadow: var(--shadow);
}

.support-guest-note,
.support-signed-in { display: flex; align-items: flex-start; gap: 9px; }
.support-guest-note > svg,
.support-signed-in > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--orange); }
.support-guest-note strong,
.support-signed-in strong,
.support-tracking-link strong { color: var(--text); font-size: 12px; }
.support-guest-note p,
.support-signed-in p,
.support-tracking-link p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.75; }

.support-login-link,
.support-new-ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 11px;
    color: var(--gold);
    border: 1px solid rgba(244, 124, 32, .35);
    border-radius: 10px;
    background: rgba(244, 124, 32, .07);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.support-login-link:hover,
.support-new-ticket:hover { color: #261507; background: var(--orange); }
.support-login-link svg,
.support-new-ticket svg { width: 15px; height: 15px; }

.support-my-tickets { display: grid; gap: 10px; }
.support-my-tickets > header { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.support-my-tickets > header svg { width: 17px; height: 17px; color: var(--orange); }
.support-my-tickets > header strong { flex: 1 1 auto; color: var(--text); font-size: 12px; }
.support-my-tickets > header span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 6px; color: #241407; background: var(--orange); font-size: 10px; font-weight: 850; }
.support-my-tickets > div { display: grid; gap: 5px; }
.support-my-tickets > div > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(57, 67, 85, .75); border-radius: 8px; background: rgba(8, 10, 15, .35); text-decoration: none; }
.support-my-tickets a > span { display: grid; min-width: 0; gap: 2px; }
.support-my-tickets a strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.support-my-tickets a small { color: var(--muted); font-size: 8px; }
.support-my-tickets a em { color: var(--gold); font-size: 8px; font-style: normal; white-space: nowrap; }
.support-my-tickets a em.is-resolved { color: #75dda4; }
.support-my-tickets > p { margin: 0; color: var(--muted); font-size: 10px; }

.support-ticket-view {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(20, 24, 33, .9);
    box-shadow: var(--shadow);
}

.support-ticket-view > header { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.support-ticket-view > header > div { display: grid; min-width: 0; gap: 2px; }
.support-ticket-view > header span { color: var(--orange); font-size: 9px; font-weight: 800; }
.support-ticket-view h2 { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 16px; }
.support-ticket-view > header em { flex: 0 0 auto; padding: 4px 7px; color: var(--gold); border: 1px solid rgba(244, 124, 32, .32); border-radius: 99px; background: rgba(244, 124, 32, .08); font-size: 9px; font-style: normal; font-weight: 800; }
.support-ticket-view > header em.is-resolved { color: #8ee5b2; border-color: rgba(70, 200, 132, .3); background: rgba(70, 200, 132, .08); }

.support-thread { display: grid; gap: 8px; padding: 15px; background: rgba(8, 10, 15, .2); }
.support-thread-message { display: grid; gap: 7px; max-width: 88%; padding: 10px 11px; border: 1px solid; border-radius: 10px; }
.support-thread-message.is-customer { justify-self: start; border-color: rgba(118, 134, 161, .24); background: rgba(27, 32, 43, .72); }
.support-thread-message.is-support { justify-self: end; border-color: rgba(244, 124, 32, .32); background: rgba(244, 124, 32, .075); }
.support-thread-message > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-thread-message strong { color: var(--gold); font-size: 10px; }
.support-thread-message time { color: var(--muted); font-size: 8px; direction: ltr; }
.support-thread-message p { margin: 0; overflow-wrap: anywhere; color: var(--muted-2); font-size: 12px; line-height: 1.8; }

.support-reply-form { display: grid; gap: 10px; padding: 14px 15px; border-top: 1px solid var(--line); }
.support-reply-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.support-reply-form textarea { width: 100%; min-height: 90px; padding: 10px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 10, 15, .55); resize: vertical; font: inherit; font-size: 12px; }
.support-reply-form textarea:focus { border-color: var(--orange); outline: 0; box-shadow: 0 0 0 3px rgba(244, 124, 32, .09); }

.support-tracking-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.support-tracking-link > svg { width: 19px; height: 19px; color: var(--orange); }
.support-tracking-link input { grid-column: 1 / -1; width: 100%; height: 36px; padding: 0 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: rgba(8, 10, 15, .55); font: inherit; font-size: 9px; }
.support-tracking-link button { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 35px; color: #271507; border: 1px solid var(--orange); border-radius: 8px; background: var(--orange); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.support-tracking-link button svg { width: 14px; height: 14px; }

.admin-message-summary-name.is-visitor { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.admin-message-summary-name.is-visitor small { padding: 2px 5px; color: #d9e0eb; border: 1px solid rgba(118, 134, 161, .32); border-radius: 99px; background: rgba(118, 134, 161, .1); font-size: 9px; font-weight: 800; }
.admin-ticket-replies p.is-admin { border-color: rgba(244, 124, 32, .25); background: rgba(244, 124, 32, .055); }

@media (max-width: 820px) {
    .support-compose-layout,
    .support-ticket-layout { grid-template-columns: 1fr; }
    .support-compose-aside,
    .support-ticket-aside { grid-row: auto; }
}

@media (max-width: 560px) {
    .support-center { gap: 10px; padding-top: 13px; }
    .support-center-head { min-height: 105px; padding: 14px; border-radius: 13px; }
    .support-center-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 11px; }
    .support-center-icon svg { width: 22px; height: 22px; }
    .support-center-head h1 { font-size: 20px; }
    .support-center-head p { font-size: 10px; line-height: 1.7; }
    .support-form-grid { grid-template-columns: 1fr; gap: 9px; }
    .support-compose.contact-form { padding: 13px; }
    .support-form-action { display: grid; }
    .support-form-action .primary-action { width: 100%; }
    .support-thread { padding: 10px; }
    .support-thread-message { max-width: 96%; }
    .support-ticket-view > header { align-items: flex-start; padding: 12px; }
    .support-ticket-view h2 { font-size: 14px; }
    .support-reply-form { padding: 11px; }
    .admin-message-summary-name.is-visitor { flex-wrap: wrap; }
}

.workspace-band,
.admin-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 0 20px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.workspace-band::after,
.section-heading::after,
.admin-strip::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--gold));
}

html[dir="rtl"] .workspace-band::after,
html[dir="rtl"] .section-heading::after,
html[dir="rtl"] .admin-strip::after {
    background: linear-gradient(270deg, var(--orange), var(--gold));
}

.workspace-title h1,
.tool-page-head h1,
.admin-strip h2,
.section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.workspace-title .home-main-heading {
    white-space: nowrap;
    overflow-wrap: normal;
}

.eyebrow {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}

.tool-card,
.admin-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .88);
    box-shadow: var(--shadow);
}

.tool-section {
    display: grid;
    gap: var(--section-gap);
    padding-top: 4px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.section-heading i {
    color: var(--orange-2);
}

.section-heading h2 {
    font-size: 21px;
}

.admin-image-search {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(300px, 42vw);
    min-width: 210px;
    margin-inline-start: auto;
    padding: 4px 5px 4px 10px;
    border: 1px solid rgba(215, 169, 77, .3);
    border-radius: var(--radius);
    background: rgba(8, 9, 13, .62);
}

.admin-image-search:focus-within {
    border-color: rgba(244, 124, 32, .72);
    box-shadow: 0 0 0 3px rgba(244, 124, 32, .09);
}

.admin-image-search > i {
    width: 17px;
    flex: 0 0 auto;
    color: var(--orange-2);
}

.admin-image-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: 12px;
}

.admin-image-search input::placeholder { color: var(--muted-2); }

.admin-image-search button {
    min-height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    color: #1a0d05;
    background: var(--orange);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 620px) {
    .section-heading:has(.admin-image-search) { flex-wrap: wrap; }
    .admin-image-search {
        width: 100%;
        margin-inline-start: 0;
    }
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--card-gap);
}

.tool-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    min-height: var(--tool-card-min-height);
    padding: var(--tool-card-padding);
}

.tool-card-icon,
.page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(215, 169, 77, .35);
    border-radius: var(--radius);
    color: var(--gold);
    background: rgba(215, 169, 77, .09);
}

.tool-card-body {
    min-width: 0;
}

.tool-status,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(31, 191, 117, .1);
    font-size: 12px;
    font-weight: 700;
}

.tool-card h3 {
    margin: 6px 0 4px;
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tool-card p,
.tool-page-head p,
.upload-zone p,
.result-zone p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.tool-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    color: var(--text);
    background: transparent;
}

.tool-card-link svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--tool-card-padding);
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 12px;
    border-radius: var(--radius);
    background: rgba(244, 124, 32, .14);
    transform: translateY(-50%);
}

.tool-card:hover,
.tool-card:has(.tool-card-link:focus-visible) {
    border-color: rgba(244, 124, 32, .5);
    background: rgba(244, 124, 32, .045);
}

.tool-card:has(.tool-card-link:focus-visible) {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.admin-strip {
    align-items: flex-start;
}

.permission-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(20, 24, 33, .7);
}

.tool-page {
    display: grid;
    align-content: start;
    gap: 14px;
}

.workspace-header-ad,
.tool-page-ad {
    display: flex;
    justify-content: center;
    flex: 1 1 728px;
    min-width: min(260px, 100%);
}

.tool-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(244, 124, 32, .24);
}

.workspace-title,
.tool-page-title {
    flex: 0 1 340px;
    min-width: min(220px, 100%);
}

.tool-page-head .page-icon {
    flex: 0 0 56px;
}

.page-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 728px;
    width: 100%;
    max-width: 728px;
    min-width: min(260px, 100%);
    max-height: 90px;
    aspect-ratio: 728 / 90;
    margin-inline: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-ad-slot.is-empty {
    border-color: transparent;
    background: transparent;
}

.page-ad-link,
.page-ad-code,
.page-ad-slider,
.page-ad-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.page-ad-slider,
.page-ad-slide {
    position: relative;
}

.page-ad-slide {
    flex: 1 1 auto;
    animation: ad-slide-in .28s ease-out;
}

.page-ad-slide[hidden] {
    display: none;
}

@keyframes ad-slide-in {
    from { opacity: .28; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .page-ad-slide { animation: none; }
}

.page-ad-slot img,
.page-ad-code img,
.page-ad-code iframe,
.page-ad-code ins {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.page-ad-code > * {
    max-width: 100%;
}

.tool-workbench {
    display: grid;
    grid-template-columns: minmax(250px, 1.1fr) minmax(220px, 270px) minmax(250px, .9fr);
    gap: var(--card-gap);
    align-items: stretch;
}

.upload-zone,
.result-zone,
.tool-controls {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    min-height: var(--workbench-min-height);
    padding: 20px;
    border: 1px dashed rgba(215, 169, 77, .45);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .72);
    text-align: center;
}

.upload-zone i,
.result-zone i {
    width: 56px;
    height: 56px;
    color: var(--orange-2);
}

.upload-zone h2,
.result-zone h2 {
    margin: 0;
    font-size: 20px;
}

.tool-controls {
    justify-items: stretch;
    border-style: solid;
}

.tool-controls label,
.installer-form label,
.setting-row {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.tool-controls select,
.installer-form input,
.setting-row input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: 0;
    padding: 0 12px;
    color: var(--text);
    background: #0f131b;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.image-upload-workbench {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
}

.image-upload-workbench.has-upload-result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(14px, 2vw, 22px);
}

.image-upload-workbench.has-upload-result .image-upload-panel {
    width: 100%;
    justify-self: stretch;
    animation: uploadPanelShiftLtr .48s cubic-bezier(.2, .72, .22, 1) both;
}

html[dir="rtl"] .image-upload-workbench.has-upload-result .image-upload-panel {
    animation-name: uploadPanelShiftRtl;
}

.image-upload-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    justify-self: center;
}

.image-upload-result-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .82);
    box-shadow: var(--shadow);
    animation: uploadResultRevealLtr .5s cubic-bezier(.2, .72, .22, 1) .08s both;
}

html[dir="rtl"] .image-upload-result-panel {
    animation-name: uploadResultRevealRtl;
}

.file-picker {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 3px 10px;
    width: 100%;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px dashed rgba(215, 169, 77, .48);
    border-radius: var(--radius);
    color: var(--muted);
    background:
        linear-gradient(180deg, rgba(244, 124, 32, .08), rgba(20, 24, 33, .74)),
        rgba(15, 19, 27, .84);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.file-picker:hover,
.file-picker:focus-within,
.file-picker.is-dragging {
    border-color: var(--orange);
    background:
        linear-gradient(180deg, rgba(244, 124, 32, .16), rgba(20, 24, 33, .82)),
        rgba(15, 19, 27, .92);
    transform: translateY(-1px);
}

.file-picker.has-upload-alert {
    border-color: rgba(244, 124, 32, .88);
    background:
        linear-gradient(180deg, rgba(244, 124, 32, .18), rgba(20, 24, 33, .86)),
        rgba(15, 19, 27, .94);
}

.file-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(244, 124, 32, .45);
    border-radius: var(--radius);
    color: var(--orange-2);
    background: rgba(244, 124, 32, .12);
}

.file-picker-icon i {
    width: 20px;
    height: 20px;
}

.file-picker strong {
    grid-column: 2;
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    text-align: start;
    overflow-wrap: anywhere;
}

.file-picker small {
    grid-column: 2;
    max-width: none;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: start;
}

.selected-file-line {
    display: none;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(215, 169, 77, .24);
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(8, 9, 13, .34);
    font-size: 12px;
    font-weight: 700;
}

.file-picker.has-selected-file .selected-file-line {
    display: inline-flex;
}

.file-picker-preview {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    max-height: 280px;
    padding: 8px;
    border: 1px solid rgba(215, 169, 77, .24);
    border-radius: var(--radius);
    background: rgba(8, 9, 13, .34);
}

.file-picker.has-image-preview .file-picker-preview {
    display: grid;
    place-items: center;
}

.file-picker-preview img {
    display: block;
    max-width: 100%;
    max-height: 262px;
    border-radius: calc(var(--radius) - 2px);
    object-fit: contain;
}

.selected-file-line b {
    color: var(--text);
    overflow-wrap: anywhere;
}

.upload-inline-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 124, 32, .38);
    border-radius: var(--radius);
    color: #ffd9ca;
    background: rgba(244, 124, 32, .1);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.upload-inline-alert[hidden],
.upload-progress[hidden] {
    display: none;
}

.upload-inline-alert i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--orange-2);
}

.upload-inline-alert span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.supported-format-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(15, 19, 27, .78);
}

.supported-format-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.supported-format-strip i {
    color: var(--orange-2);
}

.supported-format-strip strong {
    color: var(--text);
}

.supported-format-types {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.supported-format-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.primary-action.image-upload-submit {
    width: fit-content;
    max-width: 100%;
    min-width: 190px;
    min-height: 58px;
    justify-self: center;
    padding-inline: 28px;
    font-size: 16px;
}

.image-converter-workbench {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
}

.image-converter-workbench:has(.image-converter-result-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    justify-content: stretch;
    gap: clamp(14px, 2vw, 22px);
}

.image-converter-panel,
.image-converter-result-panel {
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    justify-self: center;
}

.image-converter-workbench:has(.image-converter-result-panel:not([hidden])) .image-converter-panel,
.image-converter-workbench:has(.image-converter-result-panel:not([hidden])) .image-converter-result-panel {
    width: 100%;
    justify-self: stretch;
}

.converter-pair-grid {
    display: grid;
    grid-template-columns: 176px 46px 176px;
    justify-content: center;
    gap: 12px;
    align-items: end;
}

.converter-select-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .82);
}

.converter-select-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.converter-select-card select {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: var(--radius);
    outline: 0;
    color: var(--text);
    background: #0f131b;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    text-align-last: center;
}

.converter-swap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border: 1px solid rgba(244, 124, 32, .38);
    border-radius: var(--radius);
    color: var(--orange-2);
    background: rgba(244, 124, 32, .1);
}

.converter-dropzone {
    /* Keep this picker consistent with the compact upload-images picker. */
    min-height: 74px;
}

.primary-action.image-converter-submit {
    width: fit-content;
    max-width: 100%;
    min-width: 190px;
    min-height: 58px;
    justify-self: center;
    padding-inline: 28px;
    font-size: 16px;
}

.image-converter-result-panel {
    align-content: start;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .82);
    box-shadow: var(--shadow);
    animation: uploadResultRevealLtr .5s cubic-bezier(.2, .72, .22, 1) .08s both;
}

html[dir="rtl"] .image-converter-result-panel {
    animation-name: uploadResultRevealRtl;
}

.image-converter-result-panel[hidden] {
    display: none;
}

.converter-download-action {
    width: 100%;
    min-height: 54px;
}

.converter-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 8px;
    min-width: 0;
}

.converter-result-actions .converter-download-action,
.converter-result-actions .library-save-action {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 10px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .converter-result-actions {
        gap: 6px;
    }

    .converter-result-actions .converter-download-action,
    .converter-result-actions .library-save-action {
        min-height: 42px;
        padding-inline: 6px;
        gap: 4px;
        font-size: 10.5px;
    }

    .converter-result-actions .converter-download-action svg,
    .converter-result-actions .library-save-action svg {
        width: 14px;
        height: 14px;
    }
}

.converter-background-status {
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(57, 217, 138, .24);
    border-radius: var(--radius);
    color: #bdf6d6;
    background: rgba(57, 217, 138, .08);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.converter-background-status.is-error {
    border-color: rgba(244, 124, 32, .36);
    color: #ffd9ca;
    background: rgba(244, 124, 32, .1);
}

.converter-background-status[hidden] {
    display: none;
}

.converter-popular-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.converter-popular-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: var(--radius);
    color: var(--text);
    background: rgba(15, 19, 27, .64);
    font-size: 12px;
    font-weight: 800;
}

.upload-seo-note {
    display: grid;
    gap: 9px;
    max-width: 880px;
    margin: 2px auto 0;
    color: var(--muted);
    text-align: center;
}

.upload-seo-rule {
    display: block;
    width: min(520px, 100%);
    height: 2px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(244, 124, 32, .72), rgba(255, 157, 66, .58), transparent);
    box-shadow: 0 0 18px rgba(244, 124, 32, .18);
}

.upload-seo-note h2 {
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.4;
}

.upload-seo-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.upload-progress {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(244, 124, 32, .28);
    border-radius: var(--radius);
    background: rgba(244, 124, 32, .08);
}

.upload-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.upload-progress-label strong {
    color: var(--orange-2);
}

.upload-progress-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(8, 9, 13, .72);
}

.upload-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--orange), var(--orange-2), var(--gold));
    box-shadow: 0 0 18px rgba(244, 124, 32, .4);
    transition: width .16s ease;
}

.upload-success-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 42px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.upload-success-line span,
.upload-success-line small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.upload-success-line span {
    color: var(--green);
}

.upload-success-line i {
    width: 20px;
    height: 20px;
}

.image-upload-result-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 14px;
    align-items: stretch;
}

.image-preview-panel,
.image-link-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .82);
    box-shadow: var(--shadow);
}

.image-preview-frame {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: visible;
    padding: 10px;
    border: 1px solid rgba(215, 169, 77, .28);
    border-radius: var(--radius);
    color: inherit;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        #0f131b;
    background-size: 28px 28px;
}

.image-upload-result-panel .image-preview-frame {
    width: 100%;
    min-height: clamp(160px, 30vw, 240px);
    max-height: min(56vh, 420px);
    aspect-ratio: var(--uploaded-preview-ratio, 16 / 9);
    padding: 10px;
    overflow: hidden;
}

.uploaded-image-preview {
    display: block;
    width: auto;
    height: auto;
    max-height: 420px;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
}

.image-upload-result-panel .uploaded-image-preview {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.image-preview-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.image-preview-meta strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.image-preview-meta span,
.image-link-head p {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.image-link-panel {
    align-content: start;
}

.image-link-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.image-link-head i {
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 1px solid rgba(31, 191, 117, .35);
    border-radius: var(--radius);
    color: var(--green);
    background: rgba(31, 191, 117, .1);
}

.image-link-head h2,
.share-panel h3 {
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.35;
}

.link-field {
    display: grid;
    gap: 8px;
    width: 100%;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-align: start;
}

.copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
}

.link-field input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: 0;
    padding: 0 10px;
    color: var(--text);
    background: #0f131b;
}

.icon-copy-action {
    min-width: 118px;
    position: relative;
    overflow: visible;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.compact-copy-field {
    grid-template-columns: minmax(0, 1fr) 48px;
}

.compact-icon-action {
    width: 48px;
    min-width: 48px;
    padding: 0;
}

.ghost-action.compact-icon-action {
    width: 48px;
    min-width: 48px;
    padding: 0;
}

.compact-copy-label,
.image-batch-copy-label {
    display: none;
}

.icon-copy-action.is-copied {
    transform: translateY(-1px);
    border-color: rgba(31, 191, 117, .72);
    color: #ecfff6;
    background: rgba(31, 191, 117, .18);
    box-shadow: 0 12px 28px rgba(31, 191, 117, .18);
}

.copy-feedback-bubble {
    position: absolute;
    inset-block-end: calc(100% + 9px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: min(180px, 72vw);
    padding: 7px 10px;
    border: 1px solid rgba(31, 191, 117, .38);
    border-radius: 8px;
    color: #ecfff6;
    background: rgba(12, 35, 26, .96);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 6px) scale(.96);
    transition: opacity .16s ease, transform .16s ease;
}

.copy-feedback-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-right: 1px solid rgba(31, 191, 117, .38);
    border-bottom: 1px solid rgba(31, 191, 117, .38);
    background: rgba(12, 35, 26, .96);
    transform: translateX(-50%) rotate(45deg);
}

.icon-copy-action.is-copied .copy-feedback-bubble {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.direct-image-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid rgba(244, 124, 32, .55);
    border-radius: var(--radius);
    color: #120b06;
    background: var(--orange);
    font-weight: 800;
}

.share-panel {
    display: grid;
    gap: 10px;
}

.compact-share-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.share-panel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.native-share-action {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.share-panel-label i {
    width: 18px;
    height: 18px;
    color: var(--orange-2);
}

.share-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 8px;
}

.compact-share-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

html[dir="rtl"] .compact-share-actions {
    justify-content: flex-end;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--share-border, rgba(215, 169, 77, .28));
    border-radius: var(--radius);
    color: var(--share-color, var(--text));
    background: var(--share-bg, rgba(15, 19, 27, .78));
    font-weight: 800;
    overflow-wrap: anywhere;
    transition: filter .18s ease, transform .18s ease;
}

.share-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.compact-share-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
}

.compact-share-button i,
.compact-share-button svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.share-button[data-share-brand="facebook"] {
    --share-color: #ffffff;
    --share-bg: #1877f2;
    --share-border: #1877f2;
}

.share-button[data-share-brand="x"] {
    --share-color: #ffffff;
    --share-bg: #050507;
    --share-border: rgba(246, 241, 231, .24);
}

.share-button[data-share-brand="whatsapp"] {
    --share-color: #ffffff;
    --share-bg: #25d366;
    --share-border: #25d366;
}

.share-button[data-share-brand="telegram"] {
    --share-color: #ffffff;
    --share-bg: #229ed9;
    --share-border: #229ed9;
}

.share-button[data-share-brand="email"] {
    --share-color: #ffffff;
    --share-bg: #ea4335;
    --share-border: #ea4335;
}

.share-button i,
.share-button svg {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.share-svg,
.share-svg path {
    fill: currentColor;
}

@keyframes uploadPanelShiftLtr {
    from {
        opacity: .86;
        transform: translateX(48%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes uploadPanelShiftRtl {
    from {
        opacity: .86;
        transform: translateX(-48%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes uploadResultRevealLtr {
    from {
        opacity: 0;
        transform: translateX(24px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes uploadResultRevealRtl {
    from {
        opacity: 0;
        transform: translateX(-24px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: 16px;
}

.admin-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.file-table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.file-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 90px 90px 120px;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 10px 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.file-row:last-child {
    border-bottom: 0;
}

.file-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.file-row-head {
    color: var(--gold);
    background: rgba(215, 169, 77, .08);
    font-weight: 800;
}

.setting-list {
    display: grid;
    gap: 12px;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    color: var(--muted);
}

.toggle-row input {
    width: 46px;
    height: 24px;
    accent-color: var(--orange);
}

.toggle-row input[type="checkbox"] {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 26px;
    margin: 0;
    appearance: none;
    border: 1px solid rgba(215, 169, 77, .38);
    border-radius: 999px;
    outline: none;
    background: rgba(8, 9, 13, .9);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.toggle-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .32);
    transition: transform .18s ease, background .18s ease;
}

.toggle-row input[type="checkbox"]:checked {
    border-color: var(--orange);
    background: rgba(244, 124, 32, .26);
}

.toggle-row input[type="checkbox"]:checked::after {
    background: var(--orange-2);
    transform: translateX(calc(100% + 4px));
}

html[dir="rtl"] .toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(calc(-100% - 4px));
}

.toggle-row input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 124, 32, .2);
}

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

.admin-settings-group {
    min-width: 0;
}

/* Keep each settings row visually independent without turning the page into cards. */
.admin-settings-group + .admin-settings-group {
    position: relative;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gold);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--gold) 22%, transparent);
}

.admin-settings-group h3 {
    margin: 0;
    padding-inline-end: 5px;
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
}

.admin-retention-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 16px;
    min-width: 0;
}

.admin-retention-controls > * + * {
    position: relative;
    margin-inline-start: 3px;
    padding-inline-start: 13px;
}

.admin-retention-controls > * + *::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background: var(--line);
}

.admin-retention-form .admin-retention-toggle,
.admin-retention-form .admin-retention-days {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--text);
    font-weight: 750;
}

.admin-setting-inline-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.admin-settings-submit-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.admin-retention-form .admin-retention-toggle {
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-retention-form .admin-retention-toggle input {
    width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    accent-color: var(--gold);
}

.admin-retention-form .admin-retention-days {
    gap: 7px;
    white-space: nowrap;
}

.admin-retention-form .admin-retention-days input {
    width: 92px;
    min-height: 38px;
    margin: 0;
    padding: 6px 8px;
    text-align: center;
    font-weight: 800;
    direction: ltr;
}

.admin-storage-addon-layout {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.admin-storage-addon-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.admin-storage-addon-top-row h3 {
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-storage-addon-price {
    gap: 11px !important;
}

.admin-storage-addon-price input,
.admin-storage-addon-tier input {
    appearance: textfield;
    -moz-appearance: textfield;
}

.admin-storage-addon-price input::-webkit-outer-spin-button,
.admin-storage-addon-price input::-webkit-inner-spin-button,
.admin-storage-addon-tier input::-webkit-outer-spin-button,
.admin-storage-addon-tier input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.admin-storage-addon-cards { display: grid; grid-template-columns: repeat(4, minmax(108px, 1fr)); gap: 8px; width: min(100%, 680px); min-width: 0; }
.admin-storage-addon-card { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 5px 8px; border: 1px solid rgba(229,178,77,.28); border-radius: 9px; background: linear-gradient(155deg, rgba(29,35,48,.86), rgba(9,12,18,.78)); color: var(--muted); white-space: nowrap; }
.admin-storage-addon-card > span { color: var(--muted-2); font-size: 11px; font-weight: 750; }
.admin-storage-addon-card > input { appearance: textfield; width: 62px; min-height: 30px; margin: 0; padding: 3px 4px; color: var(--text); border: 1px solid var(--line); border-radius: 6px; background: rgba(4,6,10,.54); font: inherit; font-size: 12px; font-weight: 850; text-align: center; direction: ltr; outline: 0; -moz-appearance: textfield; }
.admin-storage-addon-card > input::-webkit-outer-spin-button,.admin-storage-addon-card > input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.admin-storage-addon-card > input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(244,124,32,.13); }
.admin-storage-addon-card > small { color: var(--gold); font-size: 10px; font-weight: 850; direction: ltr; }
@media (max-width: 620px) {
    .admin-storage-addon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .admin-storage-addon-card { gap: 4px; padding-inline: 5px; }
    .admin-storage-addon-card > span { font-size: 10px; }
    .admin-storage-addon-card > input { width: 52px; }
}

.admin-storage-addon-tiers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.admin-storage-addon-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 86%, #000);
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.admin-storage-addon-tier input {
    width: 58px;
    min-height: 30px;
    margin: 0;
    padding: 4px;
    border-radius: 6px;
    text-align: center;
    direction: ltr;
    font-weight: 800;
}

.admin-storage-addon-remove {
    display: inline-grid;
    width: 27px;
    height: 27px;
    padding: 0;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
    border-radius: 6px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
}

.admin-storage-addon-remove svg {
    width: 14px;
    height: 14px;
}

.admin-storage-addon-add {
    min-height: 38px;
    padding-inline: 10px;
}

.admin-retention-form .install-submit {
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 7px 12px;
    white-space: nowrap;
}

.admin-settings-save-state {
    min-width: 72px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-settings-save-state.is-saved {
    color: #57d899;
}

.admin-settings-save-state.is-warning {
    color: var(--gold);
}

@media (max-width: 720px) {
    .admin-retention-controls {
        flex-wrap: wrap;
        gap: 9px 12px;
    }

    .admin-retention-controls > * + * {
        margin-inline-start: 0;
    }

    .admin-retention-controls > * + *::before {
        display: none;
    }

    .admin-retention-days input {
        width: 78px;
    }
}

.admin-body {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    scrollbar-gutter: auto;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
        var(--bg);
    background-size: 44px 44px;
}

/* The public site benefits from a stable scrollbar gutter, but the admin
   shell already fills the viewport. Reserving it again here creates an empty
   strip beside the header and sidebar, especially obvious in RTL. */
html:has(body.admin-body) {
    scrollbar-gutter: auto;
    scrollbar-width: none;
    height: 100%;
    overflow: hidden;
}

html:has(body.admin-body)::-webkit-scrollbar,
.admin-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.admin-shell {
    display: grid;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
    grid-template-columns: 15% minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "sidebar main";
}

.admin-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.admin-topbar,
.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-topbar {
    grid-area: header;
    min-height: 72px;
    padding: 10px clamp(12px, 1.15vw, 22px);
    /* The sidebar has a single dividing edge; mirror that restraint here so
       the header reaches the viewport edges instead of looking inset. */
    border: 0;
    border-bottom: 4px solid var(--line-strong);
    border-radius: 0;
    background: rgba(12, 14, 19, .96);
    position: sticky;
    top: 0;
    z-index: 40;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-brand strong,
.admin-hero h1 {
    display: block;
    margin: 0;
    color: var(--text);
    line-height: 1.3;
}

.admin-brand strong {
    font-size: 18px;
}

.admin-brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-main {
    display: grid;
    grid-area: main;
    gap: 18px;
    align-content: start;
    grid-auto-rows: max-content;
    min-width: 0;
    padding: 10px clamp(16px, 2vw, 30px) 30px;
}

/* Hash links such as #plans must land beneath the sticky admin header. */
.admin-main > .admin-panel,
.admin-main > .admin-stat-grid,
.admin-main > .admin-dashboard-divider {
    scroll-margin-block-start: calc(var(--topbar-height) + 12px);
}

.admin-main[data-admin-view] > .admin-stat-grid,
.admin-main[data-admin-view] > .admin-panel {
    display: none;
}

.admin-main[data-admin-view] > .admin-dashboard-divider {
    display: none;
}

.admin-main[data-admin-view="overview"] > #overview,
.admin-main[data-admin-view="overview"] > #messages,
.admin-main[data-admin-view="overview"] > .admin-dashboard-divider,
.admin-main[data-admin-view="ads"] > #ads,
.admin-main[data-admin-view="storage-settings"] > #storage-settings,
.admin-main[data-admin-view="uploaded-images"] > #uploaded-images,
.admin-main[data-admin-view="conversion-records"] > #conversion-records,
.admin-main[data-admin-view="file-types"] > #file-types,
.admin-main[data-admin-view="visitors"] > #visitors,
.admin-main[data-admin-view="messages"] > #messages {
    display: grid;
}

.admin-workspace {
    display: contents;
}

.admin-sidebar {
    display: grid;
    grid-area: sidebar;
    gap: 6px;
    align-content: start;
    position: sticky;
    top: var(--topbar-height);
    align-self: start;
    width: 100%;
    height: calc(100vh - var(--topbar-height));
    padding: 12px 10px;
    overflow-y: auto;
    border-inline-end: 4px solid var(--line-strong);
    border-bottom: 4px solid var(--line-strong);
    border-radius: 0;
    background: rgba(10, 12, 17, .98);
}

.admin-sidebar-label {
    padding: 3px 6px 5px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
}

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

.admin-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 8px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: .18s ease;
}

.admin-sidebar-nav a:hover,
.admin-sidebar-nav a:focus-visible,
.admin-sidebar-nav a.is-active {
    color: var(--text);
    border-color: rgba(244, 124, 32, .42);
    background: rgba(244, 124, 32, .10);
    outline: 0;
}

.admin-sidebar-nav i,
.admin-sidebar-nav a > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--orange-2);
}
.admin-sidebar-nav a > .admin-site-icon { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }

.admin-sidebar-nav a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-inline-start: auto;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #e64b4b;
    box-shadow: 0 0 0 2px rgba(230, 75, 75, .14), 0 0 13px rgba(230, 75, 75, .65);
    font-size: 10px;
    line-height: 1;
}

.admin-header-messages {
    position: relative;
}

.admin-header-message-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    margin-inline-start: 2px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #e64b4b;
    box-shadow: 0 0 0 2px rgba(230, 75, 75, .14), 0 0 12px rgba(230, 75, 75, .55);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.admin-hero {
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.admin-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--gold));
}

html[dir="rtl"] .admin-hero::after {
    background: linear-gradient(270deg, var(--orange), var(--gold));
}

.admin-hero h1 {
    font-size: 28px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 14px;
    align-items: start;
    grid-auto-rows: max-content;
    height: max-content;
}

.admin-dashboard-divider {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: linear-gradient(90deg, transparent, rgba(244, 124, 32, .34) 18%, rgba(255, 202, 102, .82) 50%, rgba(244, 124, 32, .34) 82%, transparent);
    box-shadow: 0 0 16px rgba(244, 124, 32, .32);
}

.admin-dashboard-divider::after {
    content: "";
    position: absolute;
    inset: -1px 30%;
    background: rgba(255, 207, 113, .28);
    filter: blur(7px);
}

.admin-messages-panel {
    gap: 16px;
}

.admin-ad-panel { gap: 16px; }
.admin-ad-placement-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,9,13,.48); }
.admin-ad-placement-tabs button { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; column-gap: 7px; min-height: 54px; padding: 7px 9px; color: var(--muted-2); border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: start; font: inherit; cursor: pointer; }
.admin-ad-placement-tabs button svg { grid-row: span 2; width: 18px; height: 18px; color: var(--gold); }
.admin-ad-placement-tabs button span { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.admin-ad-placement-tabs button small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.admin-ad-placement-tabs button:hover, .admin-ad-placement-tabs button:focus-visible { color: var(--text); background: rgba(255,255,255,.045); outline: 0; }
.admin-ad-placement-tabs button.is-active { color: #241407; border-color: rgba(255,196,100,.64); background: linear-gradient(135deg,var(--orange),#ffb22e); }
.admin-ad-placement-tabs button.is-active svg, .admin-ad-placement-tabs button.is-active small { color: #241407; }
.admin-ad-placement-panel { display: grid; gap: 14px; min-width: 0; }
.admin-ad-placement-panel[hidden] { display: none; }

.admin-messages-heading {
    align-items: center;
}

.admin-messages-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.admin-messages-heading small {
    color: var(--orange-2);
    font-weight: 800;
}

.admin-notification-tabs { display: inline-flex; align-items: stretch; justify-self: start; width: fit-content; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,9,13,.52); }
.admin-notification-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 12px; color: var(--muted); border: 0; border-inline-start: 1px solid var(--line); background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.admin-notification-tabs button:first-child { border-inline-start: 0; }
.admin-notification-tabs button svg { width: 15px; height: 15px; }
.admin-notification-tabs button b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: #fff; border-radius: 999px; background: #df4b4b; box-shadow: 0 0 9px rgba(223,75,75,.45); font-size: 9px; line-height: 1; }
.admin-notification-tabs button.is-active { color: #251406; background: linear-gradient(135deg, var(--orange), #ffb22e); }
.admin-notification-tabs button.is-active b { color: #fff; background: #b93232; box-shadow: none; }
.admin-notification-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.admin-plan-alert-list { display: grid; gap: 9px; }
.admin-plan-alert-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(244,124,32,.34); border-radius: 10px; background: linear-gradient(100deg, rgba(244,124,32,.085), rgba(20,24,33,.86)); }
.admin-plan-alert-card > svg { width: 20px; height: 20px; color: var(--gold); }
.admin-plan-alert-card.is-grace-expired { border-color: rgba(224,75,75,.62); background: linear-gradient(100deg, rgba(224,75,75,.13), rgba(20,24,33,.88)); }
.admin-plan-alert-card.is-grace-expired > svg { color: #f36565; }
.admin-plan-alert-card > div { min-width: 0; display: grid; gap: 3px; }
.admin-plan-alert-card strong { color: var(--text); font-size: 13px; }
.admin-plan-alert-card p { margin: 0; color: var(--muted-2); font-size: 12px; font-weight: 650; }
.admin-plan-alert-card small { color: var(--muted); font-size: 10px; line-height: 1.6; }
.admin-plan-alert-card > a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 31px; padding: 0 9px; color: #ffd282; border: 1px solid rgba(244,124,32,.5); border-radius: 7px; background: rgba(244,124,32,.08); text-decoration: none; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-plan-alert-card > a:hover,.admin-plan-alert-card > a:focus-visible { color: #251406; background: var(--orange); outline: 0; }
.admin-plan-alert-card > a svg { width: 14px; height: 14px; }

.admin-message-list {
    display: grid;
    gap: 12px;
}

.admin-message-card {
    display: grid;
    min-width: 0;
    border: 1px solid rgba(57, 67, 85, .82);
    border-radius: var(--radius);
    background: rgba(8, 9, 13, .42);
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
}

.admin-message-card.is-new {
    border-color: rgba(255, 96, 96, .66);
    box-shadow: inset 3px 0 0 #ff5f5f;
}

.admin-message-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, .72fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    padding: 12px 14px;
}

.admin-message-card:hover .admin-message-summary,
.admin-message-card.is-open .admin-message-summary {
    background: rgba(244, 124, 32, .07);
}

.admin-message-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: start;
}

.admin-message-toggle strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.admin-message-summary-name {
    font-size: 13px;
    font-weight: 800;
}

.admin-message-summary-name.is-account-user { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.admin-message-summary-name.is-account-user img { width: 27px; height: 27px; border: 1px solid rgba(244,124,32,.52); border-radius: 50%; object-fit: cover; background: rgba(244,124,32,.1); }
.admin-message-summary-name.is-account-user small { padding: 2px 5px; color: #1d1508; border-radius: 999px; background: var(--orange); font-size: 9px; font-weight: 850; }

.admin-message-contact {
    display: grid;
    justify-items: end;
    gap: 3px;
    min-width: 0;
}

.admin-message-contact-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.admin-message-contact-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-copy-contact {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(244, 124, 32, .35);
    border-radius: 7px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .08);
    cursor: pointer;
}

.admin-copy-contact:hover,
.admin-copy-contact:focus-visible,
.admin-copy-contact.is-copied {
    color: #2a1508;
    background: var(--orange);
    outline: 0;
}

.admin-copy-contact svg {
    width: 14px;
    height: 14px;
}

.admin-message-summary svg {
    color: var(--orange-2);
    transition: transform .18s ease;
}

.admin-message-card.is-open .admin-message-summary svg {
    transform: rotate(180deg);
}

.admin-message-details {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid rgba(57, 67, 85, .7);
    background: rgba(10, 12, 17, .46);
}

.admin-message-details[hidden] {
    display: none;
}

.admin-message-meta,
.admin-message-sender {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
}

.admin-message-type {
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .12);
    font-weight: 800;
}

.admin-message-details p {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-message-details p {
    color: var(--muted);
    line-height: 1.8;
}

.admin-ticket-replies { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(57,67,85,.58); }
.admin-ticket-replies p { display: grid; gap: 4px; padding: 9px; color: var(--muted); border: 1px solid rgba(57,67,85,.7); border-radius: 8px; background: rgba(8,9,13,.32); }
.admin-ticket-replies small { color: var(--gold); font-size: 10px; }

.admin-message-sender {
    padding-top: 9px;
    border-top: 1px solid rgba(57, 67, 85, .58);
}

.admin-message-sender a {
    min-width: 0;
    overflow: hidden;
    color: var(--gold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-ticket-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(57,67,85,.58); }
.admin-ticket-resolution { display: flex; justify-content: center; }
.admin-ticket-resolution button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; color: #092415; border: 1px solid rgba(70,200,132,.6); border-radius: 8px; background: rgba(70,200,132,.82); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.admin-ticket-resolution button svg { width: 15px; height: 15px; }
.admin-ticket-resolution button[disabled] { color: #8ee5b2; border-color: rgba(70,200,132,.3); background: rgba(70,200,132,.1); cursor: default; }
.admin-ticket-reply { display: contents; }
.admin-ticket-reply textarea { width: 100%; min-height: 78px; box-sizing: border-box; resize: vertical; padding: 9px 10px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(8,9,13,.5); font: inherit; font-size: 12px; }
.admin-ticket-actions .admin-ticket-reply textarea { flex: 1 0 100%; }
.admin-ticket-reply textarea:focus { border-color: rgba(244,124,32,.62); outline: 0; }
.admin-ticket-reply button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; color: #251306; border: 1px solid rgba(255,196,100,.62); border-radius: 8px; background: var(--orange); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.admin-ticket-reply button svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
    .admin-ad-duration-add { grid-template-columns: minmax(0, 1fr) minmax(132px, 1fr); gap: 6px; }
    .admin-ad-duration-add .primary-action { padding-inline: 7px; font-size: 10px; }
    .admin-ad-placement-tabs { gap: 3px; padding: 3px; }
    .admin-ad-placement-tabs button { grid-template-columns: 1fr; justify-items: center; gap: 2px; min-height: 56px; padding: 5px 3px; text-align: center; }
    .admin-ad-placement-tabs button svg { grid-row: auto; width: 16px; height: 16px; }
    .admin-ad-placement-tabs button span { font-size: 10px; }
    .admin-ad-placement-tabs button small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 8.5px; }
}

.admin-empty-message {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 16px;
    border: 1px dashed rgba(57, 67, 85, .85);
    border-radius: var(--radius);
    color: var(--muted);
}

.admin-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 2px;
}

.admin-pagination a {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    font-weight: 800;
}

.admin-pagination a:hover,
.admin-pagination a.is-active {
    border-color: rgba(244, 124, 32, .65);
    color: #2a1508;
    background: var(--orange);
}

@media (max-width: 680px) {
    .admin-notification-tabs { width: 100%; }
    .admin-notification-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 7px; font-size: 11px; }
    .admin-notification-tabs button span { overflow: hidden; text-overflow: ellipsis; }
    .admin-plan-alert-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; }
    .admin-plan-alert-card > a { grid-column: 2; justify-self: start; min-height: 29px; }

    .admin-message-summary {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .8fr);
        gap: 10px;
    }

    .admin-message-contact-line > span {
        max-width: 110px;
    }

    .admin-message-meta,
    .admin-message-sender {
        align-items: flex-start;
        flex-direction: column;
    }
}

.admin-stat-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-content: start;
    align-self: start;
    height: 112px;
    min-height: 108px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .88);
    box-shadow: var(--shadow);
}

.admin-stat-card i,
.admin-stat-card > svg {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: var(--radius);
    color: var(--orange-2);
    background: rgba(244, 124, 32, .12);
}

.admin-stat-card span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-stat-card strong {
    min-width: 0;
    color: var(--text);
    font-size: clamp(18px, 1.55vw, 24px);
    line-height: 1.35;
    white-space: nowrap;
    overflow-wrap: normal;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 16px;
}

.admin-content-panel {
    min-width: 0;
    overflow: visible;
}

.admin-table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-table-row {
    display: grid;
    min-width: max-content;
    grid-template-columns: minmax(180px, 1fr) 120px 120px;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 10px 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.admin-table-row:last-child {
    border-bottom: 0;
}

.admin-table-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-table-head {
    color: var(--gold);
    background: rgba(215, 169, 77, .08);
    font-weight: 800;
}

  .visitor-tracking-note {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
  }

  .visitor-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
      gap: 10px;
      margin: 2px 0 16px;
  }

  .visitor-stat-card {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 2px 9px;
      align-items: center;
      min-height: 84px;
      padding: 12px;
      border: 1px solid rgba(215, 169, 77, .2);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(28, 31, 42, .94), rgba(17, 20, 28, .92));
  }

  .visitor-stat-card i,
  .visitor-stat-card > svg {
      grid-row: span 2;
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 10px;
      color: var(--orange-2);
      background: rgba(244, 124, 32, .12);
  }

  .visitor-stat-card span {
      min-width: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .visitor-stat-card strong {
      color: var(--text);
      font-size: 22px;
      line-height: 1.15;
  }

  .visitor-stat-card.is-active {
      border-color: rgba(244, 124, 32, .5);
      box-shadow: inset 0 0 22px rgba(244, 124, 32, .06);
  }

  .visitor-device {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
  }

  .visitor-device i,
  .visitor-device svg {
      width: 15px;
      height: 15px;
      color: var(--orange-2);
  }

  .visitor-country {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 34px;
      direction: rtl;
      font-size: 12px;
      white-space: nowrap;
      overflow: visible !important;
  }

  html[dir="ltr"] .visitor-country {
      direction: ltr;
  }

  .visitor-country img {
      display: block;
      width: 36px;
      height: 24px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 4px;
      object-fit: cover;
      box-shadow: 0 2px 7px rgba(0, 0, 0, .32);
  }

  .visitor-country i,
  .visitor-country svg {
      width: 19px;
      height: 19px;
      color: var(--muted);
  }

  .visitor-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 2px 0 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
  }

  .visitor-tabs a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 7px 11px;
      border: 1px solid transparent;
      border-radius: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      transition: .18s ease;
  }

  .visitor-tabs a:hover,
  .visitor-tabs a.is-active {
      color: var(--text);
      border-color: rgba(244, 124, 32, .48);
      background: rgba(244, 124, 32, .09);
  }

  .visitor-tabs i,
  .visitor-tabs svg {
      width: 16px;
      height: 16px;
      color: var(--orange-2);
  }

  .visitor-tabs b {
      min-width: 28px;
      padding: 2px 6px;
      border-radius: 999px;
      color: var(--gold);
      background: rgba(215, 169, 77, .13);
      font-size: 11px;
      text-align: center;
  }

  .visitor-limit-note {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: -4px 0 12px;
      color: var(--muted);
      font-size: 12px;
  }

  .visitor-limit-note i,
  .visitor-limit-note svg {
      width: 15px;
      height: 15px;
      color: var(--gold);
      flex: 0 0 auto;
  }

  .visitor-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 14px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
  }

  .visitor-pagination a {
      min-width: 74px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      color: var(--orange-2);
      background: rgba(244, 124, 32, .06);
      text-align: center;
  }

  .visitor-pagination a:hover {
      border-color: rgba(244, 124, 32, .58);
      background: rgba(244, 124, 32, .13);
  }

  .admin-visitor-row {
      grid-template-columns: minmax(155px, 1fr) minmax(170px, 1.15fr) minmax(170px, 1.15fr) minmax(210px, 1.45fr);
  }

  .admin-recent-visitor-row {
      grid-template-columns: minmax(130px, .9fr) minmax(300px, 1.9fr) minmax(140px, 1fr) minmax(170px, 1fr);
  }

.admin-content-row {
    grid-template-columns: 72px minmax(0, 1.65fr) minmax(78px, .8fr) minmax(68px, .65fr) minmax(96px, .8fr);
}

.admin-conversion-row {
    grid-template-columns: 58px minmax(64px, .72fr) minmax(110px, 1.3fr) 78px 76px minmax(84px, .78fr) minmax(108px, .9fr);
}

.admin-content-panel .admin-table { overflow: hidden; }
.admin-content-panel .admin-table-row { min-width: 0; gap: 8px; }
.admin-content-panel .admin-table-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-content-panel .admin-table-row > span:first-child { overflow: visible; }
.admin-content-panel .admin-processing-name {
    display: grid;
    gap: 3px;
    min-width: 0;
    white-space: normal;
}
.admin-content-panel .admin-processing-name strong,
.admin-content-panel .admin-processing-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-content-panel .admin-processing-name strong { color: var(--text); font-size: 12px; }
.admin-content-panel .admin-processing-name small { color: var(--muted-2); font-size: 10px; }

.admin-conversion-clear-form {
    margin-inline-start: auto;
}

.admin-conversion-delete {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(230, 75, 75, .5);
    border-radius: 9px;
    color: #ff7777;
    background: rgba(230, 75, 75, .1);
    cursor: pointer;
    transition: .18s ease;
}

.admin-conversion-delete:hover,
.admin-conversion-delete:focus-visible {
    color: #fff;
    border-color: #e64b4b;
    background: #c63838;
    outline: 0;
}

.admin-conversion-delete svg {
    width: 16px;
    height: 16px;
}

.admin-conversion-delete-all {
    display: inline-flex;
    width: auto;
    height: 36px;
    gap: 6px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.admin-thumb-link {
    display: inline-flex;
    width: 58px;
    height: 58px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0f131b;
}

.admin-static-thumb {
    cursor: default;
}

.admin-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-image-row {
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}

.admin-image-row:hover,
.admin-image-row:focus-visible {
    background: rgba(244, 124, 32, .07);
    outline: 0;
}

.admin-image-row.is-last-opened {
    background: linear-gradient(90deg, rgba(244, 124, 32, .16), rgba(244, 124, 32, .035));
    box-shadow: inset 3px 0 0 var(--orange);
}

.admin-image-modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(3, 4, 7, .82);
    backdrop-filter: blur(7px);
}

.admin-image-modal[hidden] { display: none; }

.admin-image-modal-card {
    position: relative;
    display: grid;
    gap: 12px;
    width: min(960px, 100%);
    max-height: calc(100vh - 44px);
    padding: 14px;
    border: 1px solid rgba(215, 169, 77, .36);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .58);
}

.admin-image-modal-card > img {
    display: block;
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 148px);
    object-fit: contain;
    background: #090b10;
}

.admin-member-file-preview iframe {
    display: block;
    width: 100%;
    min-height: 0;
    height: min(64vh, 640px);
    border: 0;
    background: #090b10;
}

.admin-member-file-preview-empty {
    display: grid;
    min-height: 220px;
    place-content: center;
    justify-items: center;
    gap: 9px;
    color: var(--muted);
    background: #090b10;
    text-align: center;
}

.admin-member-file-preview-empty svg { width: 32px; height: 32px; color: #f3ad4d; }

.admin-image-modal-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.admin-image-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.admin-image-modal-card strong {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-processing-row { cursor: pointer; }
.admin-processing-row:hover { background: rgba(244, 124, 32, .06); }
.admin-processing-modal-meta { display: grid !important; justify-items: start; }
.admin-processing-modal-meta small { color: var(--muted); font-size: 12px; }
.admin-processing-owner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    color: var(--orange-2);
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.admin-processing-owner.is-user:hover { color: #f5cb72; text-decoration: underline; }
.admin-processing-owner.is-guest { color: var(--muted); font-weight: 700; cursor: default; }

.admin-image-modal-close {
    position: absolute;
    z-index: 1;
    top: 24px;
    inset-inline-end: 24px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: var(--text);
    background: rgba(8, 9, 13, .78);
    cursor: pointer;
}

.admin-image-modal-close svg { width: 18px; }

.admin-image-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 98, 95, .44);
    border-radius: var(--radius);
    color: var(--danger);
    background: rgba(255, 98, 95, .07);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-image-delete:hover { background: rgba(255, 98, 95, .16); }
.admin-image-delete svg { width: 15px; }

.admin-section-flash {
    transition: opacity .2s ease, transform .2s ease;
}

.admin-section-flash.is-leaving {
    opacity: 0;
    transform: translateY(-4px);
}

body.has-admin-modal { overflow: hidden; }

.admin-file-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(244, 124, 32, .45);
    border-radius: var(--radius);
    color: var(--orange-2);
    background: rgba(244, 124, 32, .08);
    font-weight: 800;
}

.admin-ad-form {
    gap: 16px;
}

.admin-ad-intro,
.admin-ad-provider-form,
.admin-ad-campaign-list {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 2px);
    background: rgba(15, 19, 27, .7);
}

.admin-ad-intro strong,
.admin-ad-list-heading strong,
.admin-ad-provider-heading strong {
    color: var(--text);
}

.admin-ad-intro p,
.admin-ad-provider-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.admin-ad-campaign-fields label small {
    margin-top: 4px;
    color: var(--muted-2);
    font-size: 11px;
}

.admin-ad-duration-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr);
    align-items: center;
    justify-self: center;
    width: min(100%, 460px);
    gap: 8px;
}

.admin-ad-duration-add > label {
    min-width: 0;
    text-align: center;
}

.admin-ad-duration-add > label input { text-align: center; }

.admin-ad-duration-add .primary-action {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding-inline: 12px;
    white-space: nowrap;
}

.admin-ad-duration-add input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.admin-ad-duration-add input[type="number"]::-webkit-inner-spin-button,
.admin-ad-duration-add input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.admin-ad-file-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px dashed rgba(244, 124, 32, .55);
    border-radius: var(--radius);
    color: var(--muted);
    background: linear-gradient(135deg, rgba(244, 124, 32, .12), rgba(20, 24, 33, .72));
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.admin-ad-file-picker:hover,
.admin-ad-file-picker:focus-within {
    border-color: var(--orange-2);
    background: linear-gradient(135deg, rgba(244, 124, 32, .2), rgba(20, 24, 33, .86));
    transform: translateY(-1px);
}

.admin-ad-file-picker > input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.admin-ad-file-picker > i {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--orange-2);
}

.admin-ad-file-picker > span {
    display: grid;
    min-width: 0;
    gap: 2px;
    flex: 1 1 auto;
}

.admin-ad-file-picker strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ad-file-picker small {
    margin: 0;
    overflow: hidden;
    color: var(--muted-2);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ad-file-picker b {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid rgba(244, 124, 32, .4);
    border-radius: 6px;
    color: var(--orange-2);
    background: rgba(8, 9, 13, .36);
    font-size: 11px;
}

.admin-ad-list-heading,
.admin-ad-provider-heading,
.admin-ad-campaign {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-ad-list-heading {
    justify-content: space-between;
}

.admin-ad-list-heading > span,
.admin-ad-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .1);
    font-size: 12px;
    font-weight: 800;
}

.admin-ad-campaign-list { margin-top: 16px; }

.admin-ad-campaign {
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.admin-ad-campaign > img {
    width: 108px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg);
}

.admin-ad-campaign > div {
    display: grid;
    min-width: 0;
    gap: 3px;
    flex: 1 1 auto;
}

.admin-ad-campaign > div strong {
    color: var(--text);
    font-size: 13px;
}

.admin-ad-campaign > div small {
    overflow: hidden;
    color: var(--muted-2);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ad-remove {
    min-width: 0;
    min-height: 34px;
    padding-inline: 10px;
    color: var(--danger);
}

.admin-ad-remove svg,
.admin-ad-provider-heading > svg,
.admin-ad-duration svg { width: 15px; }

.admin-ad-provider-form { margin-top: 16px; }

.admin-ad-provider-heading > svg {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 8px;
    color: var(--orange-2);
    border-radius: var(--radius);
    background: rgba(244, 124, 32, .12);
}

@media (max-width: 620px) {
    .admin-ad-campaign {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .admin-ad-campaign > div {
        min-width: calc(100% - 120px);
    }

    .admin-ad-campaign form {
        margin-inline-start: auto;
    }
}

.admin-ad-toggle {
    align-items: center;
    min-height: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(15, 19, 27, .74);
}

.admin-ad-toggle span {
    display: grid;
    gap: 4px;
}

.admin-ad-toggle strong {
    color: var(--text);
}

.admin-ad-toggle small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.6;
}

.ad-type-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ad-type-fieldset .radio-card span {
    justify-content: center;
    font-weight: 800;
}

.ad-type-fieldset .radio-card i {
    color: var(--orange-2);
}

.admin-ad-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: stretch;
}

.ad-mode-panel {
    min-width: 0;
}

.ad-mode-panel.is-hidden {
    display: none;
}

.admin-ad-textarea,
.installer-form textarea {
    width: 100%;
    min-height: 174px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: 0;
    padding: 12px;
    color: var(--text);
    background: #0f131b;
    resize: vertical;
}

.admin-ad-preview {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.admin-ad-slot-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 728 / 90;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.admin-ad-slot-preview small {
    padding: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.admin-ad-slot-preview .page-ad-link,
.admin-ad-slot-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 420px;
    text-align: center;
}

.empty-state i {
    width: 58px;
    height: 58px;
    color: var(--danger);
}

.site-status-state {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(500px, 68vh, 720px);
    overflow: hidden;
    padding: clamp(22px, 4vw, 54px);
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: clamp(18px, 2.4vw, 28px);
    background:
        linear-gradient(145deg, rgba(22, 26, 35, .96), rgba(8, 10, 15, .98)),
        var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
    text-align: center;
}

.site-status-state::before,
.site-status-state::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(244, 124, 32, .12);
    border-radius: 50%;
}

.site-status-state::before { inset-block-start: -150px; inset-inline-start: -90px; }
.site-status-state::after { inset-block-end: -170px; inset-inline-end: -70px; }

.site-status-glow {
    position: absolute;
    z-index: -1;
    inset: 50% auto auto 50%;
    width: min(520px, 88%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 124, 32, .13), rgba(244, 124, 32, 0) 68%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.site-status-card {
    display: grid;
    justify-items: center;
    width: min(100%, 650px);
}

.site-status-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin-block-end: 13px;
}

.site-status-ring {
    position: absolute;
    border: 1px solid rgba(244, 124, 32, .24);
    border-radius: 50%;
}

.site-status-ring--outer { inset: 0; border-style: dashed; transform: rotate(12deg); }
.site-status-ring--inner { inset: 14px; background: rgba(244, 124, 32, .045); }

.site-status-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(244, 124, 32, .6);
    border-radius: 20px;
    color: var(--orange);
    background: linear-gradient(145deg, rgba(244, 124, 32, .17), rgba(215, 169, 77, .06));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05);
    transform: rotate(-5deg);
}

[dir="rtl"] .site-status-icon { transform: rotate(5deg); }
.site-status-icon > svg { width: 31px; height: 31px; stroke-width: 1.8; }

.site-status-code {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding-inline: 10px;
    border: 1px solid rgba(215, 169, 77, .28);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(215, 169, 77, .07);
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.site-status-eyebrow {
    margin: 17px 0 5px;
    color: var(--orange);
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 800;
}

.site-status-state h1 {
    max-width: 100%;
    margin: 0;
    color: var(--text);
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1.25;
    text-wrap: balance;
}

.site-status-message {
    max-width: 590px;
    margin: 13px 0 0;
    color: var(--muted-2);
    font-size: clamp(12px, 1.6vw, 15px);
    line-height: 1.9;
    text-wrap: balance;
}

.site-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-block-start: 25px;
}

.site-status-actions .primary-action,
.site-status-actions .ghost-action {
    min-width: 158px;
    min-height: 45px;
    text-decoration: none;
}

.site-status-actions svg { width: 17px; height: 17px; }
.site-status-state--offline .site-status-icon { color: var(--gold); }

@media (max-width: 620px) {
    .site-status-state {
        min-height: calc(100svh - var(--topbar-height) - 34px);
        padding: 26px 13px;
        border-radius: 15px;
    }

    .site-status-visual { width: 96px; height: 96px; margin-block-end: 10px; }
    .site-status-ring--inner { inset: 12px; }
    .site-status-icon { width: 55px; height: 55px; border-radius: 17px; }
    .site-status-icon > svg { width: 27px; height: 27px; }
    .site-status-eyebrow { margin-block-start: 14px; }
    .site-status-state h1 { font-size: clamp(25px, 8vw, 33px); }
    .site-status-message { max-width: 330px; font-size: 11px; line-height: 1.85; }
    .site-status-actions { width: min(100%, 330px); flex-wrap: nowrap; gap: 7px; margin-block-start: 20px; }
    .site-status-actions .primary-action,
    .site-status-actions .ghost-action { flex: 1 1 0; min-width: 0; min-height: 43px; padding-inline: 9px; font-size: 11px; }
}

.installer-body {
    display: grid;
    place-items: center;
    padding: 28px;
}

.installer-shell {
    width: min(980px, 100%);
}

.installer-panel {
    display: grid;
    gap: 22px;
    padding: 24px;
    border: 4px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(12, 14, 19, .96);
    box-shadow: var(--shadow);
}

.installer-brand {
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.installer-brand::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--gold));
}

.installer-brand .language-toggle {
    margin-inline-start: auto;
}

.installer-form {
    display: grid;
    gap: 18px;
}

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

.database-fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.database-fieldset legend {
    padding: 0 8px;
    color: var(--gold);
    font-weight: 800;
}

.radio-card {
    display: block;
    cursor: pointer;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: var(--surface);
}

.radio-card input:checked + span {
    color: var(--text);
    border-color: var(--orange);
    background: rgba(244, 124, 32, .12);
}

.mysql-fields.is-hidden {
    display: none;
}

.install-submit {
    justify-self: start;
}

.install-state {
    display: grid;
    justify-items: start;
    gap: 12px;
}

.install-state i {
    width: 58px;
    height: 58px;
    color: var(--green);
}

.install-state h2 {
    margin: 0;
    font-size: 24px;
}

.install-state code {
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--gold);
    background: #0f131b;
    overflow-wrap: anywhere;
}

.error-box {
    border: 1px solid rgba(255, 98, 95, .45);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: #ffd0cf;
    background: rgba(255, 98, 95, .1);
}

.success-box {
    border: 1px solid rgba(31, 191, 117, .42);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: #c9ffe5;
    background: rgba(31, 191, 117, .1);
}

.error-box p {
    margin: 0;
}

.success-box p {
    margin: 0;
}

svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

  @media (max-width: 1100px) {
      .tool-grid,
      .admin-grid,
      .admin-dashboard-grid,
      .admin-ad-grid,
    .tool-workbench {
        grid-template-columns: 1fr;
    }

    .tool-controls,
    .upload-zone,
    .result-zone {
        min-height: 220px;
    }
}

@media (max-width: 1536px), (max-height: 860px) {
    :root {
        --topbar-height: 70px;
        --page-padding: 20px;
        --content-gap: 22px;
        --section-gap: 14px;
        --card-gap: 12px;
        --tool-card-min-height: 132px;
        --tool-card-padding: 14px;
        --workbench-min-height: 270px;
    }

    body {
        font-size: 14px;
    }

    .topbar {
        gap: 12px;
    }

    .brand-symbol,
    .icon-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .icon-button,
    .language-toggle,
    .locale-chip,
    .primary-action,
    .ghost-action {
        min-height: 40px;
    }

    .brand-mark strong,
    .installer-brand h1 {
        font-size: 17px;
    }

    .workspace-band,
    .admin-strip,
    .tool-page-head {
        padding: 18px 0 16px;
    }

    .workspace-title h1,
    .tool-page-head h1,
    .admin-strip h2,
    .admin-hero h1 {
        font-size: 25px;
    }

    .section-heading h2 {
        font-size: 20px;
    }

    .tool-card {
        gap: 12px;
    }

    .tool-card h3 {
        font-size: 17px;
    }

    .upload-zone,
    .result-zone,
    .tool-controls {
        padding: 16px;
    }

    .upload-zone h2,
    .result-zone h2 {
        font-size: 18px;
    }

    .admin-shell {
        gap: 0;
        padding-top: 0;
    }

    .admin-stat-card {
        min-height: 104px;
        padding: 15px;
    }

    .admin-stat-card strong {
        font-size: 22px;
    }
}

@media (max-width: 1366px), (max-height: 780px) {
    :root {
        --topbar-height: 66px;
        --page-padding: 16px;
        --content-gap: 18px;
        --section-gap: 12px;
        --card-gap: 10px;
        --tool-card-min-height: 116px;
        --tool-card-padding: 12px;
        --workbench-min-height: 230px;
    }

    .topbar {
        gap: 10px;
    }

    .brand-symbol,
    .icon-button {
        width: 38px;
        height: 38px;
    }

    .brand-symbol,
    .icon-button {
        flex-basis: 38px;
    }

    .icon-button,
    .language-toggle,
    .locale-chip,
    .primary-action,
    .ghost-action {
        min-height: 38px;
    }

    .language-toggle,
    .locale-chip {
        padding: 0 10px;
    }

    .primary-action,
    .ghost-action {
        min-width: 118px;
        padding: 0 12px;
    }

    .sidebar-nav {
        gap: 4px;
        padding-inline: 10px;
    }

    .sidebar-link {
        min-height: 38px;
        padding: 0 10px;
    }

    .sidebar-sub-link {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .workspace-band,
    .admin-strip,
    .tool-page-head {
        padding: 14px 0 12px;
    }

    .workspace-title h1,
    .tool-page-head h1,
    .admin-strip h2,
    .admin-hero h1 {
        font-size: 23px;
    }

    .section-heading {
        padding-bottom: 10px;
    }

    .section-heading h2 {
        font-size: 18px;
    }

    .tool-card {
        grid-template-columns: 48px minmax(0, 1fr) 38px;
    }

    .tool-card-icon,
    .page-icon {
        width: 48px;
        height: 48px;
    }

    .tool-status,
    .status-pill {
        min-height: 22px;
        font-size: 11px;
    }

    .tool-card h3 {
        margin: 4px 0 3px;
        font-size: 16px;
    }

    .workspace-title,
    .tool-page-title {
        flex-basis: 280px;
    }

    .page-ad-slot {
        min-width: min(220px, 100%);
    }

    .tool-workbench {
        grid-template-columns: minmax(220px, 1.1fr) minmax(200px, 245px) minmax(220px, .9fr);
    }

    .admin-topbar {
        min-height: 66px;
        border-width: 3px;
    }

    .admin-main {
        gap: 14px;
    }

    .admin-hero {
        padding: 8px 0 10px;
    }

    .admin-stat-card {
        min-height: 96px;
    }
}

@media (max-width: 1100px) {
    .tool-grid,
    .admin-grid,
    .admin-dashboard-grid,
    .admin-ad-grid,
      .tool-workbench {
          grid-template-columns: 1fr;
      }

      .visitor-stat-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

@media (max-width: 860px) {
    .tool-section {
        scroll-margin-block-start: calc(var(--topbar-height) + 14px);
    }

    .admin-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas:
            "header"
            "sidebar"
            "main";
    }

    .admin-sidebar {
        position: static;
        height: auto;
        border-inline-end: 0;
        border-bottom: 1px solid var(--line);
    }

    .admin-sidebar-nav {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .app-frame {
        grid-template-columns: clamp(60px, 17vw, 72px) minmax(0, 1fr);
        grid-template-rows: var(--topbar-height) minmax(0, 1fr) auto;
        grid-template-areas:
            "header header"
            "sidebar main"
            "sidebar footer";
    }

    html[dir="rtl"] .app-frame {
        grid-template-columns: clamp(60px, 17vw, 72px) minmax(0, 1fr);
        grid-template-areas:
            "header header"
            "sidebar main"
            "sidebar footer";
    }

    .topbar {
        padding: 8px 12px;
        flex-wrap: nowrap;
        min-height: var(--topbar-height);
    }

    .search-panel {
        position: fixed;
        inset-block-start: calc(var(--topbar-height) - 4px);
        inset-inline: 12px;
        width: auto;
    }

    .sidebar {
        position: sticky;
        top: var(--topbar-height);
        align-self: start;
        height: calc(100vh - var(--topbar-height));
        border-bottom: 4px solid var(--line-strong);
        overflow-x: hidden;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-inline: 6px;
    }

    .sidebar-section,
    .sidebar-link,
    .sidebar-more {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tablet and phone rails use category icons only; sub-links and their
       disclosure arrows do not fit inside the compact sidebar. */
    .sidebar-section > .sidebar-sub-link,
    .sidebar-section > .sidebar-more {
        display: none;
    }

    .content-area {
        --content-inline-padding: 14px;
        padding: 18px 0 0;
    }

    .site-footer,
    .workspace-band,
    .admin-strip,
    .tool-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tool-page-head {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: start;
        column-gap: 8px;
        row-gap: 14px;
        padding-inline-start: 2px;
    }

    .tool-page-title {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }

    .tool-page-head .page-icon {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 8px;
    }

    .tool-page-head .page-icon svg {
        width: 16px;
        height: 16px;
    }

    .tool-page-ad {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .footer-top,
    .footer-bottom {
        align-items: center;
        text-align: center;
    }

    .footer-top {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .site-footer {
        padding-inline: 2px;
    }

    .footer-links {
        width: 100%;
        justify-content: center;
        gap: 10px 2px;
    }

    .footer-links a {
        min-height: 0;
        padding-inline: 0;
        font-size: clamp(9px, calc(2.4vw + 1px), 10.5px);
        letter-spacing: -.15px;
        white-space: nowrap;
    }

    .legal-page {
        gap: 9px;
        padding-top: 0;
    }

    .legal-page-head {
        padding-bottom: 9px;
    }

    .legal-page-head .eyebrow {
        font-size: 9px;
    }

    .legal-page-head h1 {
        margin: 2px 0 4px;
        font-size: 20px;
        line-height: 1.3;
    }

    .legal-page-head p {
        font-size: 11.5px;
        line-height: 1.55;
    }

    .legal-card {
        gap: 9px;
        padding: 11px;
        border-radius: 11px;
    }

    .legal-card section {
        padding-bottom: 9px;
    }

    .legal-card h2 {
        margin-bottom: 3px;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .legal-card p {
        font-size: 11px;
        line-height: 1.65;
    }

    .cookie-consent {
        inset-inline: 10px;
        inset-block-end: 10px;
    }

    .cookie-consent-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-consent-actions .primary-action,
    .cookie-consent-actions .ghost-action {
        flex: 1 1 0;
    }

    .workspace-title,
    .workspace-header-ad,
    .tool-page-title,
    .tool-page-ad,
    .page-ad-slot {
        width: 100%;
        flex-basis: auto;
    }

    .page-ad-slot {
        min-width: 0;
        margin-inline: 0;
    }

    .site-footer {
        border-inline-start: 0;
    }

    .sidebar-nav {
        gap: 4px;
        padding: 0 4px 16px;
    }

    .sidebar-link {
        justify-content: center;
        gap: 0;
        min-height: 42px;
        padding: 0;
    }

    .sidebar-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sidebar-sub-link {
        justify-content: center;
        margin-inline-start: 0;
        padding: 6px 2px;
        min-height: 31px;
        font-size: 9px;
        line-height: 1.35;
        text-align: center;
    }

    .file-row {
        grid-template-columns: 1fr;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-actions {
        justify-content: flex-start;
    }

    .admin-table-row,
    .admin-visitor-row,
    .admin-content-row,
    .admin-conversion-row {
        min-width: 0;
        grid-template-columns: 1fr;
    }
}

  @media (max-width: 620px) {
      .visitor-stat-grid {
          grid-template-columns: 1fr;
      }

      .brand-mark small {
        display: none;
    }

    .locale-chip--country {
        display: inline-flex;
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        padding: 0;
    }

    .locale-chip-flag {
        width: 26px;
        height: 18px;
    }

    .workspace-title h1,
    .tool-page-head h1 {
        font-size: 23px;
    }

    .form-grid,
    .database-fieldset,
    .ad-type-fieldset {
        grid-template-columns: 1fr;
    }

    .tool-card {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 12px;
    }

    .tool-card-icon {
        width: 46px;
        height: 46px;
    }

    .tool-card-link {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* The service catalogue is intentionally compact on phones: two clear,
       fully tappable cards per row without letting long descriptions dominate. */
    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tool-card {
        position: relative;
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: start;
        column-gap: 6px;
        row-gap: 8px;
        min-height: 144px;
        padding: 8px;
    }

    .tool-card-icon {
        grid-column: 1;
        grid-row: 1;
        width: 32px;
        height: 32px;
    }

    .tool-card .tool-status {
        display: none;
    }

    .tool-card-body {
        display: contents;
    }

    .tool-card h3 {
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        z-index: 2;
        display: block;
        margin: 0;
        overflow: visible;
        font-size: 13px;
        line-height: 1.45;
        letter-spacing: -.15px;
        pointer-events: none;
        -webkit-line-clamp: unset;
    }

    .tool-card p {
        grid-column: 1 / -1;
        grid-row: 2;
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tool-card-link {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: auto;
        height: auto;
        border-radius: inherit;
        background: transparent;
        outline: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .tool-card-link i,
    .tool-card-link svg {
        display: none;
    }

    .tool-card:has(.tool-card-link:focus-visible) {
        outline: 2px solid var(--orange);
        outline-offset: 2px;
    }

    .tool-card:has(.tool-card-link:active) {
        border-color: rgba(244, 124, 32, .72);
        background: rgba(244, 124, 32, .09);
        transform: scale(.985);
    }

    .installer-body {
        padding: 14px;
    }

    .installer-panel {
        padding: 16px;
    }

    .admin-shell {
        width: 100%;
    }

    .admin-actions .primary-action,
    .admin-actions .ghost-action {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .home-workspace-band {
        padding-top: 2px;
    }

    /* Keep touch scrolling, but do not reserve phone width for a visible scrollbar. */
    .sidebar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .content-area {
        --content-inline-padding: 2px;
        padding: 14px 2px 0;
    }

    .content-inner {
        width: 100%;
        max-width: none;
    }

    .sidebar-sub-link {
        display: none;
    }

    .sidebar-link svg {
        width: 20px;
        height: 20px;
    }

    .sidebar-more {
        display: none;
        margin-inline-start: 0;
    }

    .sidebar-more summary {
        justify-content: center;
        width: 100%;
        min-height: 42px;
        padding: 0;
    }

    .sidebar-more summary span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sidebar-more summary svg {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    .workspace-title h1,
    .tool-page-head h1 {
        font-size: 20px;
    }
}

.image-upload-workbench {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
}

.image-upload-workbench.has-upload-result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
}

@media (max-width: 1100px) {
    .image-upload-workbench.has-upload-result {
        grid-template-columns: 1fr;
    }

    .image-upload-workbench.has-upload-result .image-upload-panel,
    .image-upload-result-panel {
        animation: none;
    }

    .image-upload-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    /* Primary work actions in every image service use one compact mobile size.
       Download/result actions intentionally retain their own layout. */
    .image-upload-workbench .primary-action.image-upload-submit,
    .image-converter-workbench .primary-action.image-converter-submit,
    .image-compressor-workbench .primary-action.image-compressor-submit,
    .image-cropper-workbench .primary-action.image-cropper-submit,
    .image-editor-workbench .primary-action.image-editor-submit,
    .image-metadata-workbench .primary-action[data-metadata-submit],
    .image-resizer-workbench .primary-action[data-resizer-submit],
    .image-watermark-workbench .primary-action[data-watermark-submit],
    .animated-image-workbench .primary-action[data-animated-generate],
    .collage-workbench .primary-action[data-collage-generate],
    .story-workbench .primary-action[data-story-generate] {
        width: fit-content;
        min-width: 0;
        min-height: 42px;
        padding: .5rem .85rem;
        font-size: .82rem;
    }

    /* The initial tool action is a deliberate focal point on phones.
       Result/download controls keep their own paired layout below it. */
    .tool-workbench > .primary-action:not(.converter-download-action):not(.library-output-download),
    .tool-workbench > form > .primary-action:not(.converter-download-action):not(.library-output-download),
    .tool-workbench .tool-controls > .primary-action:not(.converter-download-action):not(.library-output-download) {
        justify-self: center;
        margin-inline: auto;
    }

    .converter-pair-grid {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
        gap: 8px;
    }

    .converter-select-card {
        padding: 10px;
    }

    .converter-select-card select {
        min-height: 42px;
        font-size: 14px;
    }

    .converter-swap-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .file-picker {
        min-height: 70px;
        padding: 11px 12px;
    }

    .copy-field {
        grid-template-columns: 1fr;
    }

    .icon-copy-action,
    .direct-image-action,
    .share-button {
        width: 100%;
    }

    .compact-copy-field {
        grid-template-columns: minmax(0, 1fr) 54px;
    }

    .compact-icon-action,
    .ghost-action.compact-icon-action {
        display: inline-flex;
        flex-direction: row;
        gap: 4px;
        width: 54px;
        min-width: 54px;
        padding: 3px 2px;
    }

    .compact-icon-action .compact-copy-label {
        display: block;
        order: -1;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    html[lang="en"] .compact-copy-field {
        grid-template-columns: minmax(0, 1fr) 60px;
    }

    html[lang="en"] .compact-icon-action,
    html[lang="en"] .ghost-action.compact-icon-action {
        width: 60px;
        min-width: 60px;
    }

    .compact-share-button {
        width: 38px;
        min-width: 38px;
    }

    .compact-share-button {
        height: 38px;
    }

    .copy-feedback-bubble {
        position: absolute;
        inset-block: auto calc(100% + 8px);
        left: 50%;
        z-index: 120;
        max-width: min(210px, calc(100vw - 32px));
    }

    .icon-copy-action.is-copied {
        transform: none;
    }

    .copy-feedback-bubble::after {
        display: block;
    }

    .supported-format-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .supported-format-strip .supported-format-types {
        display: grid;
        width: 100%;
        gap: 6px;
        text-align: center;
    }

    .supported-format-strip .supported-format-label {
        justify-self: start;
        text-align: start;
    }

    .image-upload-workbench .supported-format-strip .supported-format-label,
    .image-upload-workbench .supported-format-strip .supported-format-values {
        font-size: calc(1em - 1px);
    }

    .supported-format-strip .supported-format-values {
        justify-self: center;
    }
}

.image-converter-workbench {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    align-items: start;
}

.image-converter-workbench:has(.image-converter-result-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    justify-content: stretch;
}

@media (max-width: 1100px) {
    .image-converter-workbench:has(.image-converter-result-panel:not([hidden])) {
        grid-template-columns: 1fr;
    }

.image-converter-workbench:has(.image-converter-result-panel:not([hidden])) .image-converter-panel,
    .image-converter-result-panel {
        animation: none;
    }
}

/* Keep every tool header aligned with the upload-images header at all breakpoints. */
.tool-page-head {
    padding-top: 0;
    padding-bottom: 12px;
}

.collage-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

.collage-workbench.has-collage-images {
    grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr);
}

.collage-panel,
.collage-preview-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.collage-preview-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 14px);
    order: -1;
}

.collage-preview-panel [data-collage-preview-content] {
    min-width: 0;
}

.collage-preview-picker {
    min-height: clamp(280px, 36vw, 430px);
    align-content: center;
}

.collage-preview-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 2px;
}

.collage-preview-actions .secondary-action {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(215, 169, 77, .38);
    border-radius: 7px;
    color: var(--orange-2);
    background: rgba(215, 169, 77, .08);
    box-shadow: none;
    font-size: .72rem;
    line-height: 32px;
    white-space: nowrap;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.collage-preview-actions .secondary-action svg {
    width: 14px;
    height: 14px;
}

.collage-preview-actions .secondary-action.is-active {
    color: #15100a;
    border-color: var(--orange);
    background: var(--orange);
}

.collage-preview-actions .secondary-action:hover,
.collage-preview-actions .secondary-action:focus-visible {
    color: #15100a;
    border-color: var(--orange);
    background: var(--orange);
    transform: none;
}

.collage-order-list {
    display: grid;
    gap: 5px;
    max-height: 236px;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style: none;
}

.collage-order-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 4px 6px 4px 4px;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: 7px;
    background: rgba(15, 19, 27, .56);
}

.collage-order-thumb {
    display: block;
    width: 38px;
    height: 34px;
    border-radius: 5px;
    object-fit: cover;
    background: #090c12;
}

.collage-order-item > span:not(.collage-order-actions) {
    overflow: hidden;
    color: var(--text);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collage-order-actions {
    display: inline-flex;
    gap: 4px;
}

.collage-order-action {
    display: inline-grid;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(215, 169, 77, .3);
    border-radius: 5px;
    color: var(--orange-2);
    background: rgba(215, 169, 77, .06);
    place-items: center;
}

.collage-order-action svg {
    width: 13px;
    height: 13px;
}

.collage-order-action:disabled {
    opacity: .28;
    cursor: default;
}

.collage-editor {
    display: grid;
    gap: 13px;
}

.collage-mobile-controls {
    display: none;
}

.collage-editor-heading,
.collage-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.collage-editor-heading strong,
.collage-preview-head strong {
    color: var(--text);
    font-size: .92rem;
}

.collage-editor-heading span,
.collage-preview-head span {
    color: var(--muted);
    font-size: .75rem;
}

.collage-template-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.collage-template {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    min-height: 58px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #10141c;
    cursor: pointer;
}

.collage-template i {
    display: block;
    min-height: 10px;
    border-radius: 2px;
    background: rgba(214, 222, 237, .37);
}

.collage-template[data-collage-template="2"] { grid-template-columns: repeat(2, 1fr); }
.collage-template[data-collage-template="2"] i { grid-row: 1 / -1; }
.collage-template[data-collage-template="3"] i:first-child { grid-row: 1 / span 2; }
.collage-template[data-collage-template="3"] i:not(:first-child) { grid-column: 2 / -1; }
.collage-template[data-collage-template="4"] { grid-template-columns: repeat(2, 1fr); }
.collage-template[data-collage-template="6"] { grid-template-columns: repeat(3, 1fr); }
.collage-template[data-collage-template="9"] { grid-template-columns: repeat(3, 1fr); }
.collage-template[data-collage-template="top-3"] { grid-template-columns: repeat(2, 1fr); }
.collage-template[data-collage-template="top-3"] i:first-child { grid-column: 1 / -1; }
.collage-template[data-collage-template="strips-4"] { grid-template-columns: 1.5fr 1fr; }
.collage-template[data-collage-template="strips-4"] i:first-child { grid-row: 1 / span 3; }
.collage-template[data-collage-template="mosaic-5"] { grid-template-columns: repeat(3, 1fr); }
.collage-template[data-collage-template="mosaic-5"] i:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.collage-template-triangle-up,
.collage-template-triangle-down { display: block; }
.collage-template-triangle-up i,
.collage-template-triangle-down i { position: absolute; inset: 7px; }
.collage-template-triangle-up i:first-child,
.collage-template-triangle-down i:first-child { z-index: 1; background: var(--accent); }
.collage-template-triangle-up i:first-child { clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.collage-template-triangle-down i:first-child { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.collage-template-diagonal { grid-template-columns: repeat(3, 1fr); transform: skewX(-8deg); }
.collage-template-diagonal i { border-radius: 0; }
.collage-template-diagonal small { transform: skewX(8deg); }

.collage-template small {
    position: absolute;
    inset-inline-end: 4px;
    bottom: 3px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: #090c12;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
}

.collage-template:hover,
.collage-template.is-selected {
    border-color: rgba(255, 154, 32, .65);
}

.collage-template.is-selected i { background: var(--accent); }

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

.collage-choice-group {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.collage-choice-group > span {
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 800;
}

.collage-choice-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #090c12;
}

.collage-settings .collage-choice-group:first-child .collage-choice-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collage-choice-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.collage-choice-list button svg,
.collage-mobile-menu button svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

.collage-choice-list button.is-selected {
    border-color: rgba(255, 154, 32, .5);
    background: rgba(255, 154, 32, .14);
    color: var(--accent);
}

.collage-preview {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #090c12;
}

.collage-preview-slot {
    position: absolute;
    padding: var(--collage-gap);
    cursor: grab;
    touch-action: none;
}

.collage-preview-image-viewport {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.collage-preview-slot img,
.collage-preview-slot.is-empty {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 1px;
    object-fit: cover;
    border-radius: 4px;
    will-change: transform, object-position;
}

.collage-preview-slot.is-positioning {
    cursor: grabbing;
}

.collage-preview-slot.is-empty {
    display: grid;
    place-items: center;
    background: #151a23;
    color: var(--muted);
    font-size: 1.1rem;
}

.collage-preview-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 1px 0 0;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
    text-align: center;
}

.collage-preview-tip svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--orange-2);
}

.collage-result {
    display: grid;
    gap: 5px;
}

.collage-downloads {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.collage-downloads > div {
    display: grid;
    gap: 4px;
}

.collage-downloads .primary-action,
.collage-format-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 7px;
    border-radius: 8px;
    font-size: .7rem;
    line-height: 1;
    white-space: nowrap;
}

.collage-format-download {
    border: 1px solid rgba(215, 169, 77, .36);
    color: var(--orange-2);
    background: rgba(215, 169, 77, .08);
}

.collage-format-download:hover,
.collage-format-download:focus-visible {
    color: #15100a;
    border-color: var(--orange);
    background: var(--orange);
}

.collage-downloads svg {
    width: 14px;
    height: 14px;
}

.collage-downloads small {
    color: var(--muted);
    font-size: .67rem;
    text-align: center;
}

.animated-image-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

/* Initial actions are controls, not full-width panels.  Keep them as compact
   as their label on desktop while result/download actions retain their layout. */
.tool-workbench > .primary-action:not(.converter-download-action):not(.library-output-download),
.tool-workbench > form > .primary-action:not(.converter-download-action):not(.library-output-download),
.tool-workbench .tool-controls > .primary-action:not(.converter-download-action):not(.library-output-download) {
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    margin-inline: auto;
}

.animated-image-panel,
.animated-image-output-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.animated-image-panel {
    position: relative;
}

.animated-image-workbench.has-animated-frames {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
}

.animated-image-output-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 14px);
}

.animated-image-result {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.animated-image-stage {
    padding: 12px;
    border: 1px solid rgba(215, 169, 77, .25);
    border-radius: var(--radius);
    background: rgba(8, 9, 13, .28);
}

.animated-image-stage-head,
.animated-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.animated-image-stage-head strong {
    color: var(--text);
}

.animated-download-sources { display: none; }

.animated-result-formats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.collage-result-formats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animated-result-formats button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    padding: 6px 9px;
    color: var(--muted);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.animated-result-formats button small {
    color: inherit;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.animated-result-formats button.is-active {
    color: #1b1308;
    background: var(--orange);
    border-color: var(--orange);
}

.animated-result-formats button:disabled {
    opacity: .45;
    cursor: default;
}

.animated-result-actions { margin-top: 7px; }
.collage-result-actions,
.story-result-actions { margin-top: 7px; }

.animated-frame-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
}

.animated-frame-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 68px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(20, 24, 33, .76);
}

.animated-frame-preview {
    display: grid;
    width: 56px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(215, 169, 77, .35);
    border-radius: 8px;
    background: #090c12;
    cursor: zoom-in;
}

.animated-frame-preview:hover {
    border-color: var(--accent);
}

.animated-frame-thumb {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background: #090c12;
}

.animated-frame-card b {
    overflow: hidden;
    color: var(--text);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animated-frame-actions {
    display: flex;
    grid-column: auto;
    justify-content: flex-start;
    gap: 4px;
}

.animated-preview-modal {
    position: absolute;
    z-index: 15;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14px;
}

.animated-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 5, 9, .8);
    cursor: default;
}

.animated-preview-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: min(100%, 620px);
    max-height: min(78vh, 640px);
    padding: 12px;
    border: 1px solid rgba(215, 169, 77, .42);
    border-radius: var(--radius);
    background: #10141c;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}

.animated-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.animated-preview-head strong {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animated-preview-head button {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #151a23;
    color: var(--text);
    cursor: pointer;
}

.animated-preview-head svg {
    width: 17px;
    height: 17px;
}

.animated-preview-dialog > img {
    display: block;
    width: 100%;
    max-height: min(64vh, 550px);
    object-fit: contain;
    border-radius: 8px;
    background: #07090d;
}

.animated-frame-actions button {
    display: inline-grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: #10141c;
    cursor: pointer;
}

.animated-frame-actions button:hover:not(:disabled) {
    color: var(--orange-2);
    border-color: rgba(244, 124, 32, .6);
}

.animated-frame-actions button:disabled {
    opacity: .38;
    cursor: default;
}

.animated-frame-actions svg {
    width: 14px;
    height: 14px;
}

.animated-image-options {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.animated-choice-group {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(52, 62, 79, .72);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 25, 35, .92), rgba(12, 16, 24, .76));
}

.animated-choice-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 800;
}

.animated-choice-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.animated-choice-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(42, 50, 65, .75);
    border-radius: 10px;
    background: rgba(6, 8, 13, .68);
}

.animated-choice-group:first-child .animated-choice-list {
    display: flex;
    align-items: stretch;
}

.animated-choice-list button {
    min-height: 42px;
    padding: 5px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.animated-choice-list button small {
    display: block;
    margin-top: 1px;
    color: inherit;
    font-size: .66rem;
    font-weight: 700;
    opacity: .74;
}

/* Keep frame-duration values readable as one unit: “0.5 ثانية”. */
.animated-choice-group:first-child .animated-choice-list button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding-inline: 2px;
    white-space: nowrap;
    font-size: .68rem;
}

.animated-choice-group:first-child .animated-choice-list button small {
    display: inline;
    margin: 0;
    margin-inline-start: 1px;
    font-size: .58rem;
}

.animated-choice-list button:hover {
    color: var(--text-primary);
    background: rgba(255, 154, 32, .08);
}

.animated-choice-list button.is-selected {
    border-color: rgba(255, 154, 32, .55);
    background: rgba(255, 154, 32, .15);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(255, 154, 32, .08);
}

.animated-image-result > img {
    display: block;
    width: 100%;
    max-height: 430px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0a0d13;
    object-fit: contain;
}

@media (max-width: 900px) {
    .collage-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .collage-workbench.has-collage-images {
        grid-template-columns: minmax(0, 1fr);
    }

    .collage-preview-panel {
        position: static;
    }

    .collage-preview-picker {
        min-height: 240px;
    }

    .animated-image-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .animated-image-workbench.has-animated-frames {
        grid-template-columns: minmax(0, 1fr);
    }

    .animated-image-output-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .collage-panel,
    .collage-preview-panel {
        padding: 12px;
    }

    .collage-settings {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .collage-mobile-result-mount:not(:empty) {
        display: grid;
        margin-top: 2px;
    }

    .collage-mobile-result-mount .collage-result {
        margin: 0;
    }

    .collage-mobile-result-mount .collage-result-formats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin-top: 0;
    }

    .collage-mobile-result-mount .collage-result-formats button {
        flex-direction: column;
        gap: 2px;
        min-height: 48px;
        padding: 5px 3px;
        line-height: 1.05;
    }

    .collage-mobile-result-mount .collage-result-formats button small {
        display: block;
        font-size: .58rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .collage-editor {
        gap: 9px;
    }

    .collage-mobile-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        position: relative;
        z-index: 5;
    }

    .collage-mobile-picker {
        position: relative;
        display: grid;
        min-width: 0;
        gap: 3px;
    }

    .collage-mobile-picker > span {
        overflow: hidden;
        color: var(--muted);
        font-size: .6rem;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .collage-mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        width: 100%;
        min-width: 0;
        height: 31px;
        padding: 0 5px;
        border: 1px solid rgba(215, 169, 77, .34);
        border-radius: 7px;
        color: var(--text);
        background: rgba(20, 24, 33, .84);
        font: inherit;
        font-size: .65rem;
        font-weight: 800;
        text-align: start;
    }

    .collage-mobile-trigger > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .collage-mobile-trigger svg {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        color: var(--orange-2);
    }

    .collage-mobile-picker.is-open {
        z-index: 20;
    }

    .collage-mobile-picker.is-open .collage-mobile-trigger {
        border-color: var(--orange);
        background: rgba(215, 169, 77, .13);
    }

    .collage-mobile-menu {
        position: absolute;
        z-index: 21;
        bottom: calc(100% + 6px);
        inset-inline-start: 0;
        display: none;
        width: max-content;
        min-width: 110px;
        max-width: min(240px, calc(100vw - 26px));
        max-height: min(250px, calc(100vh - 105px));
        gap: 4px;
        padding: 5px;
        overflow: auto;
        border: 1px solid rgba(215, 169, 77, .42);
        border-radius: 9px;
        background: #171c26;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
    }

    .collage-mobile-picker.is-open .collage-mobile-menu {
        display: grid;
    }

    .collage-mobile-template-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 206px;
    }

    .collage-mobile-picker:last-child .collage-mobile-menu {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    .collage-mobile-menu button {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 29px;
        padding: 4px 6px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--text);
        background: transparent;
        font: inherit;
        font-size: .67rem;
        font-weight: 800;
        text-align: start;
        white-space: nowrap;
    }

    .collage-mobile-menu button:hover,
    .collage-mobile-menu button.is-selected {
        border-color: rgba(215, 169, 77, .42);
        color: var(--orange-2);
        background: rgba(215, 169, 77, .11);
    }

    .collage-mobile-menu button:disabled {
        opacity: .32;
        cursor: not-allowed;
    }

    .collage-mobile-template-icon {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        flex: 0 0 auto;
        width: 20px;
        height: 16px;
        padding: 2px;
        overflow: hidden;
        border: 1px solid rgba(215, 169, 77, .38);
        border-radius: 4px;
        background: #0d1118;
    }

    .collage-mobile-template-icon i {
        display: block;
        min-width: 0;
        min-height: 0;
        border-radius: 1px;
        background: rgba(215, 169, 77, .76);
    }

    .collage-mobile-template-icon.layout-2 i:nth-child(n + 3),
    .collage-mobile-template-icon.layout-3 i:nth-child(4) {
        display: none;
    }

    .collage-mobile-template-icon.layout-6,
    .collage-mobile-template-icon.layout-9 {
        grid-template-columns: repeat(3, 1fr);
    }

    .collage-mobile-template-icon.layout-top-3 i:first-child {
        grid-column: 1 / -1;
    }

    .collage-mobile-template-icon.layout-strips-4 {
        grid-template-columns: 2fr 1fr;
    }

    .collage-mobile-template-icon.layout-strips-4 i:first-child {
        grid-row: 1 / span 2;
    }

    .collage-mobile-template-icon.layout-mosaic-5 i:first-child {
        grid-row: 1 / span 2;
    }

    .collage-mobile-template-icon.layout-diagonal-3 {
        transform: skewX(-10deg);
    }

    .collage-mobile-template-icon.layout-triangle-up,
    .collage-mobile-template-icon.layout-triangle-down {
        display: block;
        position: relative;
    }

    .collage-mobile-template-icon.layout-triangle-up i,
    .collage-mobile-template-icon.layout-triangle-down i {
        position: absolute;
        inset: 2px;
    }

    .collage-mobile-template-icon.layout-triangle-up i:first-child {
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    .collage-mobile-template-icon.layout-triangle-down i:first-child {
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .collage-editor-heading,
    .collage-template-list,
    .collage-settings {
        display: none;
    }

    .collage-template-list {
        gap: 5px;
    }

    .collage-template {
        min-height: 44px;
        padding: 6px;
    }

    .collage-template i {
        min-height: 7px;
    }

    .collage-choice-group {
        gap: 5px;
    }

    .collage-choice-list button {
        min-height: 29px;
    }

    .collage-result {
        scroll-margin-top: calc(var(--topbar-height) + 18px);
    }

    .collage-preview-head {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .collage-preview-head strong {
        flex: 0 0 auto;
        font-size: .78rem;
        white-space: nowrap;
    }

    .collage-preview-head span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        font-size: clamp(.54rem, 2.4vw, .66rem);
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .collage-preview-actions {
        justify-content: center;
        gap: 8px;
    }

    .collage-preview-actions .secondary-action {
        flex: 0 1 auto;
        height: 29px;
        min-height: 29px;
        padding-inline: 7px;
        font-size: .66rem;
    }

    .collage-preview-actions .secondary-action svg {
        width: 12px;
        height: 12px;
    }

    .collage-downloads {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 9px;
        max-width: 100%;
    }

    .collage-downloads > div {
        flex: 0 0 auto;
        min-width: 0;
    }

    .collage-downloads .primary-action,
    .collage-downloads .collage-format-download {
        width: auto;
        min-height: 30px;
        padding: 0 5px;
        gap: 3px;
        border-radius: 7px;
        font-size: .59rem;
    }

    .collage-downloads svg {
        width: 11px;
        height: 11px;
    }

    .collage-downloads small {
        font-size: .6rem;
    }

    .animated-image-panel,
    .animated-image-output-panel {
        padding: 12px;
    }

    .animated-image-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .animated-frame-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* This is based on the actual reading column, not only the browser width.
   It keeps first-step actions centered even with a side panel or phone rail. */
@container site-content (max-width: 620px) {
    .animated-image-panel > .primary-action[data-animated-generate],
    .tool-workbench > .primary-action:not(.converter-download-action):not(.library-output-download),
    .tool-workbench > form > .primary-action:not(.converter-download-action):not(.library-output-download),
    .tool-workbench .tool-controls > .primary-action:not(.converter-download-action):not(.library-output-download) {
        justify-self: center !important;
        align-self: center;
        margin-inline: auto !important;
    }
}

/* Global constrained-layout safety: the reading area may become narrow when a
   browser side panel or developer tools are open.  Shared page shells must
   always be allowed to shrink before individual tool rules take over. */
.content-area,
.tool-page,
.tool-workbench,
.tool-workbench > *,
.utility-workbench,
.utility-workbench > * {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* The shared-file uploader has one work panel only.  Do not inherit the
   three-column desktop workbench used by image tools; it leaves two empty
   side columns around the form. */
.tool-workbench.shared-file-upload-workbench {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
}

/* Use the actual reading area as the responsive reference.  The browser window
   can be wide while the fixed sidebar and an open side panel leave a narrow
   area for the page itself. */
.content-area {
    container-type: inline-size;
    container-name: site-content;
}

@media (max-width: 900px) {
    .tool-workbench.image-compressor-workbench:has(.image-compressor-result-panel:not([hidden])),
    .image-converter-workbench:has(.image-converter-result-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .compressor-options-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container site-content (max-width: 1024px) {
    .tool-workbench.image-compressor-workbench:has(.image-compressor-result-panel:not([hidden])),
    .image-converter-workbench:has(.image-converter-result-panel:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .compressor-options-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Story maker */
.story-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

.story-workbench.has-story-image {
    grid-template-columns: minmax(0, 1fr);
}

.story-panel,
.story-preview-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.story-preview-panel {
    order: -1;
    width: min(100%, 540px);
    margin-inline: auto;
}

.story-workbench.has-story-image .story-preview-panel {
    position: static;
}

.story-picker {
    min-height: clamp(280px, 36vw, 430px);
    align-content: center;
}

.story-preview-empty {
    display: grid;
    min-height: clamp(280px, 36vw, 430px);
    place-content: center;
    justify-items: center;
    gap: 10px;
    color: var(--muted);
    text-align: center;
}

.story-preview-empty svg {
    width: 35px;
    height: 35px;
    color: var(--orange-2);
}

.story-editor {
    display: grid;
    gap: 15px;
}

.story-editor-head,
.story-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.story-editor-head strong,
.story-preview-head strong {
    color: var(--text);
    font-size: .94rem;
}

.story-preview-head span {
    color: var(--orange-2);
    font-size: .75rem;
    font-weight: 800;
}

.story-change-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid rgba(215, 169, 77, .38);
    border-radius: 7px;
    color: var(--orange-2);
    background: rgba(215, 169, 77, .08);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
}

.story-change-image svg {
    width: 13px;
    height: 13px;
}

.story-choice-group,
.story-text-field,
.story-texts {
    display: grid;
    gap: 7px;
}

.story-choice-group > span,
.story-text-field > span,
.story-texts-head > span {
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}

.story-choice-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.story-choice-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(13, 17, 24, .7);
    font: inherit;
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

.story-choice-list button svg {
    width: 14px;
    height: 14px;
}

.story-choice-list button.is-selected,
.story-choice-list button:hover,
.story-choice-list button:focus-visible {
    border-color: rgba(215, 169, 77, .72);
    color: var(--orange-2);
    background: rgba(215, 169, 77, .11);
    transform: none;
}

.story-text-field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    background: rgba(11, 15, 22, .75);
    font: inherit;
    font-size: .82rem;
}

.story-texts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.story-caption-style {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.story-caption-style label {
    display: grid;
    grid-template-columns: auto 16px minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    min-width: 0;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}

.story-color-control {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

.story-color-swatch {
    display: block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid rgba(215, 169, 77, .42);
    border-radius: 4px;
    background: var(--story-swatch);
}

.story-color-menu {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.story-color-menu[open] { z-index: 20; }

.story-color-menu summary {
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    list-style: none;
}

.story-color-menu summary::-webkit-details-marker {
    display: none;
}

.story-color-menu summary .story-color-swatch {
    width: 100%;
    height: 100%;
}

.story-color-options {
    position: absolute;
    z-index: 24;
    inset-inline-start: 0;
    inset-block-start: calc(100% + 7px);
    display: grid;
    grid-template-columns: repeat(4, 24px);
    gap: 6px;
    width: max-content;
    padding: 9px;
    border: 1px solid rgba(255, 154, 32, .62);
    border-radius: 10px;
    background: #151b26;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .46);
}

.story-color-options button {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 5px;
    background: var(--story-choice);
}

.story-color-options button:hover,
.story-color-options button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 1px;
}

.story-caption-style select {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 2px 20px 2px 6px;
    border: 1px solid rgba(215, 169, 77, .35);
    border-radius: 6px;
    outline: 0;
    color: var(--text);
    background: #10151e;
    font: inherit;
    font-size: .64rem;
    font-weight: 700;
    cursor: pointer;
}

.story-caption-style select[hidden] {
    display: none;
}

.story-caption-opacity label,
.story-caption-opacity {
    grid-template-columns: auto minmax(0, 1fr);
}

.story-caption-opacity .story-color-swatch {
    display: none;
}

.story-caption-opacity select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23f3c66a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 7px center;
    background-size: 12px 8px;
    padding-inline: 6px 25px;
    line-height: 26px;
}

html[dir="ltr"] .story-caption-opacity select {
    background-position: right 7px center;
}

.story-texts-head button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 7px;
    border: 1px solid rgba(215, 169, 77, .4);
    border-radius: 7px;
    color: var(--orange-2);
    background: rgba(215, 169, 77, .08);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
}

.story-texts-head button svg {
    width: 13px;
    height: 13px;
}

.story-text-fields {
    display: grid;
    gap: 9px;
}

.story-text-field-extra {
    position: relative;
}

.story-text-field-extra input {
    padding-inline-end: 42px;
}

.story-remove-text {
    position: absolute;
    inset-inline-end: 7px;
    bottom: 6px;
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
}

.story-remove-text:hover,
.story-remove-text:focus-visible {
    color: var(--orange-2);
    background: rgba(215, 169, 77, .12);
    transform: none;
}

.story-remove-text svg {
    width: 15px;
    height: 15px;
}

.story-preview {
    position: relative;
    width: min(100%, 390px);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #10151e;
    isolation: isolate;
    cursor: grab;
    touch-action: none;
}

.story-preview.is-positioning {
    cursor: grabbing;
}

.story-preview-background,
.story-preview-shade {
    position: absolute;
    inset: -26px;
}

.story-preview-background {
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: blur(20px) brightness(.58) saturate(.95);
}

.story-preview-shade {
    inset: 0;
    z-index: 1;
    background: rgba(7, 10, 16, .27);
}

.story-background-dark .story-preview-background,
.story-background-light .story-preview-background {
    display: none;
}

.story-background-dark .story-preview-shade {
    background: #10151e;
}

.story-background-light .story-preview-shade {
    background: linear-gradient(145deg, #f2c873, #d9793f 48%, #3e2631);
}

.story-preview-photo-frame {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.story-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3));
    user-select: none;
    pointer-events: none;
}

.story-image-zoom-handle {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(255, 170, 57, .85);
    border-radius: 7px;
    background: rgba(7, 10, 16, .72);
    color: #f7a329;
    cursor: nwse-resize;
    touch-action: none;
}

.story-image-zoom-handle:hover,
.story-image-zoom-handle.is-resizing {
    background: rgba(246, 141, 31, .25);
}

.story-image-zoom-handle svg {
    width: 14px;
    height: 14px;
}

.story-preview-captions {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.story-preview-caption {
    position: absolute;
    z-index: 1;
    width: min(var(--story-caption-max-width, 86%), 330px);
    margin: 0;
    padding: 8px 10px;
    border-radius: 9px;
    color: #fff;
    background: rgba(5, 8, 13, .62);
    font-size: clamp(.7rem, 2.8vw, .95rem);
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
}

.story-preview-caption.is-positioning {
    cursor: grabbing;
}

.story-preview-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .7rem;
    text-align: center;
}

.story-preview-tip svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--orange-2);
}

.story-result {
    scroll-margin-top: calc(var(--topbar-height) + 18px);
}

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

.story-downloads > div {
    display: grid;
    gap: 4px;
}

.story-downloads .primary-action,
.story-format-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 38px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: .72rem;
}

.story-format-download {
    border: 1px solid rgba(215, 169, 77, .45);
    color: var(--orange-2);
    background: rgba(215, 169, 77, .07);
}

.story-format-download:hover,
.story-format-download:focus-visible {
    color: #15100a;
    background: var(--orange);
    transform: none;
}

.story-downloads svg {
    width: 14px;
    height: 14px;
}

.story-downloads small {
    color: var(--muted);
    font-size: .67rem;
    text-align: center;
}

@container site-content (max-width: 780px) {
    .story-workbench.has-story-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-preview-panel {
        position: static;
        order: initial;
    }
}

@media (max-width: 620px) {
    .story-panel,
    .story-preview-panel {
        gap: 11px;
        padding: 11px;
        border-radius: 12px;
    }

    .story-picker,
    .story-preview-empty {
        min-height: 235px;
    }

    .story-preview {
        width: min(100%, 290px);
        border-radius: 11px;
    }

    .story-choice-list {
        gap: 5px;
    }

    .story-choice-list button {
        min-height: 33px;
        padding-inline: 4px;
        font-size: .67rem;
    }

    .story-choice-list button svg {
        width: 12px;
        height: 12px;
    }

    .story-change-image {
        min-height: 28px;
        font-size: .66rem;
    }

    .story-texts-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .story-caption-style {
        width: 100%;
        min-width: 0;
        gap: 4px;
    }

    .story-caption-style label {
        grid-template-columns: auto 15px minmax(0, 1fr);
        gap: 3px;
        font-size: .63rem;
    }

    .story-caption-opacity {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .story-caption-opacity select {
        width: 28px;
        justify-self: start;
        padding: 0;
        color: transparent;
        font-size: 0;
        background-position: center;
    }

    .story-color-swatch {
        width: 15px;
        height: 15px;
    }

    .story-texts-head [data-story-add-text] {
        width: auto;
        min-height: 25px;
        justify-content: center;
        padding: 2px 5px;
        font-size: .62rem;
    }

    .story-texts-head [data-story-add-text] svg {
        display: none;
    }
}

/* Keep the initial upload action compact.  The larger areas belong to the
   preview and editor after photos have been selected, not to the picker. */
.collage-preview-picker,
.story-picker,
.animated-image-picker {
    min-height: 74px;
    align-content: initial;
}

/* Phone layouts must never become wider than the visible reading area. */
@media (max-width: 900px) {
    :root {
        scrollbar-width: none !important;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .app-frame,
    .content-area,
    .main-content,
    main {
        min-width: 0;
        max-width: 100%;
    }

    .app-frame,
    .content-area {
        overflow-x: clip;
    }

    .content-area {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .content-area::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* Give phone content the spare space that is not needed by the icon rail. */
@media (max-width: 620px) {
    .app-frame,
    html[dir="rtl"] .app-frame {
        grid-template-columns: clamp(52px, 15vw, 60px) minmax(0, 1fr);
    }

    /* Keep the phone header flush with the viewport.  The translucent desktop
       background allowed the body's 1px grid line to show through at the top. */
    .topbar {
        top: 0;
        margin-block-start: 0;
        background: #0c0e13;
    }

    .sidebar-nav {
        padding-inline: 3px;
    }

    .sidebar-scroll-top {
        inset-inline-start: calc(clamp(52px, 15vw, 60px) / 2 - 17px);
    }

    .sidebar-account-action {
        inset-inline-start: calc(clamp(52px, 15vw, 60px) / 2 - 17px);
    }
}

/* Internal page changes keep the navigation frame in place and only dim the
   reading area very briefly while the next section is prepared. */
.content-area {
    transition: opacity 150ms ease;
}

html.is-partial-navigation .content-area {
    opacity: .64;
    pointer-events: none;
}

/* The account strips are deliberately persistent during panel changes. */
html.is-partial-navigation .content-area:has(.account-page.is-dashboard) {
    opacity: 1;
}

@media (max-width: 620px) {
    /* On phones the opacity transition reads as a full-page shake while the
       content is swapped.  The shell stays mounted, so no dimming is needed. */
    .content-area {
        transition: none;
    }

    html.is-partial-navigation .content-area {
        opacity: 1;
    }
}

/* The phone/tablet rail is part of the page width, so keep the consent card
   wholly inside the usable content column instead of laying it over the rail. */
@media (max-width: 900px) {
    .cookie-consent {
        inset-inline-start: calc(clamp(60px, 17vw, 72px) + 8px);
        inset-inline-end: 8px;
        inset-block-end: 8px;
    }
}

@media (max-width: 620px) {
    .cookie-consent {
        inset-inline-start: calc(clamp(52px, 15vw, 60px) + 6px);
        inset-inline-end: 6px;
        inset-block-end: 6px;
    }

    .cookie-consent-card {
        gap: 7px;
        padding: 10px 11px;
        border-radius: 11px;
    }

    .cookie-consent-card h2 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .cookie-consent-card p {
        font-size: 10px;
        line-height: 1.55;
    }

    .cookie-consent-actions {
        gap: 6px;
    }

    .cookie-consent-actions .primary-action,
    .cookie-consent-actions .ghost-action {
        min-height: 32px;
        padding-inline: 7px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-area {
        transition: none;
    }
}

/* Account access lives in the normal content area, not in a separate app. */
.account-page {
    width: min(100%, 650px);
    margin: clamp(8px, 2vw, 28px) auto clamp(22px, 4vw, 54px);
}

.account-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px 16px;
    border-bottom: 1px solid rgba(244, 124, 32, .38);
}

.account-page-head .page-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--orange);
    border: 1px solid rgba(244, 124, 32, .4);
    border-radius: 12px;
    background: rgba(244, 124, 32, .08);
}

.account-page-head h1 {
    margin: 0;
    font-size: clamp(20px, 2vw, 26px);
}

.account-page-head p {
    margin: 4px 0 0;
    color: var(--muted-2);
    font-size: 13px;
}

.account-auth-card,
.account-summary-card {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22, 26, 35, .96), rgba(13, 15, 21, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.account-auth-card { padding: clamp(16px, 3vw, 26px); }

.account-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(8, 10, 15, .72);
}

.account-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    color: var(--muted-2);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
}

.account-tabs a.is-active {
    color: #1b1007;
    border-color: rgba(255, 196, 100, .65);
    background: linear-gradient(135deg, var(--orange), #ffb22e);
}

.account-tabs svg { width: 16px; height: 16px; }

html[dir="rtl"] .account-tabs [data-lucide="log-in"],
html[dir="rtl"] .account-submit [data-lucide="log-in"] {
    transform: scaleX(-1);
}

.google-signin-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 260px);
    gap: 10px;
    min-height: 46px;
    margin: 16px auto 0;
    color: var(--text);
    border: 1px solid rgba(194, 202, 220, .34);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    font-weight: 750;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.google-signin-action:hover,
.google-signin-action:focus-visible {
    border-color: rgba(255, 255, 255, .64);
    background: rgba(255, 255, 255, .09);
    outline: 0;
    transform: translateY(-1px);
}

.google-signin-action.is-pending { opacity: .72; }

.google-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 7px;
    background: #fff;
}

.google-mark svg {
    display: block;
    width: 17px;
    height: 17px;
}

.library-save-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    min-width: 160px;
    min-height: 40px;
    padding: 0 13px;
    color: var(--text);
    border: 1px solid rgba(244, 124, 32, .5);
    border-radius: 10px;
    background: rgba(244, 124, 32, .1);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}
.library-save-action:hover,
.library-save-action:focus-visible { border-color: var(--orange); background: rgba(244,124,32,.18); outline: 0; }
.library-save-action svg { width: 16px; height: 16px; }
.library-save-action.is-guest { color: #8d94a0; border-color: rgba(141,148,160,.35); background: rgba(141,148,160,.08); }
.library-save-action.is-guest:hover,
.library-save-action.is-guest:focus-visible { color: #c7ccd3; border-color: rgba(180,186,196,.55); background: rgba(141,148,160,.14); }
.library-save-action.is-saving { opacity: .72; cursor: progress; }
.library-save-action.is-saved { color: #bff5d3; border-color: rgba(43,185,111,.55); background: rgba(26,122,74,.16); }

.library-file-picker-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    min-height: 36px;
    margin: 8px auto 0;
    padding: 0 13px;
    color: #ffd38d;
    border: 1px solid rgba(244,124,32,.48);
    border-radius: 9px;
    background: rgba(244,124,32,.08);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}
.library-file-picker-action:hover,
.library-file-picker-action:focus-visible { color: #fff0cf; border-color: var(--orange); background: rgba(244,124,32,.18); outline: 0; }
.library-file-picker-action svg { width: 16px; height: 16px; }

.library-file-picker-modal {
    position: fixed;
    /* Keep the application shell visible and untouched: this layer belongs
       only to the readable content column, beneath its header/sidebar/footer. */
    z-index: 39;
    inset-block: var(--topbar-height, 0px) 0;
    inset-inline-start: clamp(210px, 17vw, 280px);
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 18px;
    background: rgba(3,5,9,.7);
    backdrop-filter: blur(3px);
}
.library-file-picker-modal[hidden] { display: none; }
.library-file-picker-dialog {
    width: min(620px, 100%);
    max-height: min(680px, calc(100dvh - var(--topbar-height, 0px) - 36px));
    overflow: auto;
    margin: 0 auto;
    padding: 14px;
    color: var(--text);
    border: 1px solid rgba(244,124,32,.5);
    border-radius: 14px;
    background: #121722;
    box-shadow: 0 22px 58px rgba(0,0,0,.48);
}
.library-file-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}
.library-file-picker-head strong { color: #ffe1a5; font-size: 15px; }
.library-file-picker-head button {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    color: #aeb8c9;
    border: 1px solid rgba(154,166,185,.32);
    border-radius: 8px;
    background: #0d121b;
    cursor: pointer;
}
.library-file-picker-head button:hover,
.library-file-picker-head button:focus-visible { color: #fff; border-color: rgba(244,124,32,.65); outline: 0; }
.library-file-picker-head svg { width: 17px; height: 17px; }
.library-file-picker-list { display: grid; gap: 5px; min-height: 46px; }
.library-file-picker-loading,
.library-file-picker-empty { display: block; margin: 14px 0; color: #97a3b7; text-align: center; font-size: 12px; }
.library-file-picker-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    color: inherit;
    border: 1px solid rgba(111,126,151,.26);
    border-radius: 9px;
    background: #0e131d;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: .16s ease;
}
.library-file-picker-row:hover,
.library-file-picker-row:focus-visible { border-color: rgba(244,124,32,.6); background: rgba(244,124,32,.09); outline: 0; }
.library-file-picker-row.is-selected { border-color: var(--orange); background: rgba(244,124,32,.18); box-shadow: inset 0 0 0 1px rgba(255,180,67,.18); }
.library-file-picker-visual {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(154,166,185,.24);
    border-radius: 8px;
    background: #090e16;
}
.library-file-picker-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-file-picker-visual svg { width: 18px; height: 18px; color: var(--gold); }
.library-file-picker-row > span { display: grid; min-width: 0; gap: 3px; }
.library-file-picker-row b { overflow: hidden; color: #e9eef8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.library-file-picker-row small { color: #8290a5; font-size: 10px; }
.library-file-picker-row em { color: #ffd08a; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; unicode-bidi: isolate; }
.library-file-picker-actions { display: flex; justify-content: center; margin-top: 12px; }
.library-file-picker-confirm {
    min-width: 174px;
    min-height: 38px;
    padding: 0 14px;
    color: #17120b;
    border: 0;
    border-radius: 9px;
    background: var(--orange);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.library-file-picker-confirm:disabled { opacity: .46; cursor: not-allowed; }

@media (min-width: 621px) and (max-width: 900px) {
    .library-file-picker-modal { inset-inline-start: clamp(60px, 17vw, 72px); }
}

@media (max-width: 620px) {
    .library-file-picker-modal { inset-inline-start: clamp(52px, 15vw, 60px); padding: 9px 7px 14px; }
    .library-file-picker-dialog { max-height: calc(100dvh - var(--topbar-height, 0px) - 20px); padding: 10px; border-radius: 11px; }
    .library-file-picker-row { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 50px; padding: 7px 8px; gap: 7px; }
    .library-file-picker-visual { width: 34px; height: 34px; border-radius: 7px; }
    .library-file-picker-row b { font-size: 11px; }
    .library-file-picker-row small,
    .library-file-picker-row em { font-size: 9px; }
    .library-file-picker-action { min-height: 34px; margin-top: 6px; font-size: 11px; }
}

/* A download and its “save to my files” action are always one result pair.
   This also covers buttons added dynamically by browser-based tools. */
.library-result-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.library-result-actions > .converter-download-action,
.library-result-actions > .library-output-download,
.library-result-actions > .library-save-action {
    display: inline-flex;
    flex: 1 1 0;
    justify-content: center;
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}
.library-result-actions > .converter-download-action,
.library-result-actions > .library-output-download {
    min-height: 40px;
}

@media (max-width: 620px) {
    [data-converter-result],
    [data-compressor-result],
    [data-cropper-result],
    [data-background-remover-result],
    [data-animated-result],
    [data-collage-result],
    [data-story-result],
    [data-pdf-stage],
    .image-generated-actions {
        scroll-margin-block-start: calc(var(--topbar-height) + 12px);
    }
}

.image-generated-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.image-generated-actions > .primary-action,
.image-generated-actions > .library-output-download,
.image-generated-actions > .library-save-action {
    width: fit-content;
    min-width: 0;
}
.library-output-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    color: var(--text);
    border: 1px solid rgba(244, 124, 32, .5);
    border-radius: 10px;
    background: rgba(244, 124, 32, .1);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.library-output-download[hidden] { display: none; }
.image-generated-actions .image-editor-submit,
.image-generated-actions [data-resizer-submit],
.image-generated-actions [data-watermark-submit],
.image-generated-actions [data-metadata-submit] { display: none; }
.image-generated-actions .image-editor-submit:not([disabled]),
.image-generated-actions [data-resizer-submit]:not([disabled]),
.image-generated-actions [data-watermark-submit]:not([disabled]),
.image-generated-actions [data-metadata-submit]:not([disabled]) { display: inline-flex; }

.image-generated-actions:has(.library-output-download:not([hidden])) > .primary-action { display: none !important; }
.image-generated-actions:has(.library-output-download:not([hidden])) > .library-output-download,
.image-generated-actions:has(.library-output-download:not([hidden])) > .library-save-action { display: inline-flex; }
.image-generated-actions:has(.library-output-download:not([hidden])) {
    flex-wrap: nowrap;
}
.image-generated-actions:has(.library-output-download:not([hidden])) > .library-output-download,
.image-generated-actions:has(.library-output-download:not([hidden])) > .library-save-action {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

.cropper-result-actions > .library-result-actions {
    grid-column: 1 / -1;
}

.library-save-notice {
    position: fixed;
    z-index: 120;
    /* Center the notice in the readable content rail, never over the sidebar. */
    inset-inline-start: var(--sidebar-width, 0px);
    inset-inline-end: 0;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: min(440px, calc(100vw - var(--sidebar-width, 0px) - 24px));
    margin-inline: auto;
    padding: 11px 13px;
    color: var(--text);
    border: 1px solid rgba(244,124,32,.46);
    border-radius: 12px;
    background: rgba(14,17,24,.97);
    box-shadow: 0 14px 36px rgba(0,0,0,.34);
    font-size: 12px;
}
.library-save-notice > span { min-width: 0; }
.library-save-notice a { flex: 0 0 auto; color: var(--gold); font-weight: 800; text-decoration: none; white-space: nowrap; }
.library-save-notice.is-near-trigger {
    inset: auto;
    margin: 0;
    max-width: min(390px, calc(100vw - 16px));
    padding: 8px 10px;
    gap: 9px;
    border-radius: 9px;
    font-size: 11px;
    animation: librarySaveNoticeIn .16s ease-out both;
}
@keyframes librarySaveNoticeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

.library-upload-rail {
    position: fixed;
    inset-inline-start: clamp(210px, 17vw, 280px);
    inset-inline-end: 0;
    top: calc(var(--topbar-height) - 4px);
    z-index: 80;
    height: 4px;
    overflow: visible;
    background: rgba(244,124,32,.12);
    pointer-events: none;
}
.library-upload-rail-bar { display: block; width: 100%; height: 4px; overflow: hidden; background: transparent; }
.library-upload-rail-bar > b { display: block; width: 3%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffb33b); box-shadow: 0 0 12px rgba(244,124,32,.7); transition: width .25s ease; }
.library-upload-rail-label { position: absolute; inset-inline-end: 10px; top: 7px; padding: 3px 7px; color: #ffdca1; border: 1px solid rgba(244,124,32,.36); border-radius: 7px; background: rgba(12,14,19,.94); font-size: 10px; font-weight: 800; line-height: 1.2; box-shadow: 0 5px 16px rgba(0,0,0,.22); }
.account-pending-upload-list:empty { display: none; }
.account-file-row-pending { border-color: rgba(244,124,32,.48); background: linear-gradient(100deg, rgba(244,124,32,.09), rgba(19,23,32,.9)); }
.account-upload-progress { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.account-upload-progress > b { display: block; width: 3%; height: 100%; border-radius: inherit; background: var(--orange); transition: width .25s ease; }
.account-upload-percent { color: var(--orange-2) !important; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
    .library-upload-rail { inset-inline: clamp(52px, 15vw, 60px) 0; top: calc(var(--topbar-height) - 3px); height: 3px; }
    .library-upload-rail-bar { height: 3px; }
    .library-upload-rail-label { inset-inline-end: 5px; top: 6px; font-size: 9px; }
}

.google-setup-note {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

.account-divider {
    position: relative;
    margin: 18px 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.account-divider::before {
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: var(--line);
    content: '';
}

.account-divider span {
    position: relative;
    z-index: 1;
    padding-inline: 10px;
    background: #151921;
}

.account-form { display: grid; gap: 13px; }

.account-form label {
    display: grid;
    width: min(100%, 260px);
    gap: 7px;
    justify-self: center;
    color: var(--muted-2);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}

.account-form .account-name-field {
    width: min(100%, 260px);
    justify-self: center;
    text-align: center;
}

.account-form input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(8, 10, 15, .78);
    font: inherit;
    text-align: center;
}

.account-form .account-name-field input { text-align: center; }

.account-form input:focus {
    border-color: rgba(244, 124, 32, .7);
    outline: 2px solid rgba(244, 124, 32, .15);
}

.account-forgot-password,
.account-auth-back {
    width: min(100%, 260px);
    justify-self: center;
    color: #ffc36f;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
}

.account-forgot-password { margin-top: -3px; }

.account-forgot-password:hover,
.account-forgot-password:focus-visible,
.account-auth-back:hover,
.account-auth-back:focus-visible {
    color: #ffe0ad;
    text-decoration: underline;
    outline: 0;
}

.account-reset-intro {
    width: min(100%, 420px);
    margin: 0 auto 16px;
    color: var(--muted-2);
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
}

.account-reset-status {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 8px 0 2px;
    text-align: center;
}

.account-reset-status > svg {
    width: 34px;
    height: 34px;
    color: #56d58b;
}

.account-reset-status p {
    max-width: 430px;
    margin: 0;
    color: var(--muted-2);
    font-size: 13px;
    line-height: 1.8;
}

.account-reset-status .account-reset-delivery-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #f2c879;
}

.account-reset-delivery-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Prevent Chrome's saved-credential fill from switching account fields to a
   white browser-style background. */
.account-form input:-webkit-autofill,
.account-form input:-webkit-autofill:hover,
.account-form input:-webkit-autofill:focus,
.account-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 10, 15, .78) inset;
    box-shadow: 0 0 0 1000px rgba(8, 10, 15, .78) inset;
    transition: background-color 99999s ease-out 0s;
}

.account-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin-top: 1px;
}

.account-turnstile > * { max-width: 100%; }

.account-submit {
    width: min(100%, 260px);
    justify-self: center;
    margin-top: 4px;
}

.account-errors,
.account-flash {
    display: grid;
    gap: 7px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
}

.account-errors {
    color: #ffd8d2;
    border: 1px solid rgba(239, 85, 61, .42);
    background: rgba(163, 42, 27, .16);
}

.account-errors p,
.account-flash { margin: 0; }
.account-errors p,
.account-flash { display: flex; align-items: center; gap: 8px; }
.account-errors svg,
.account-flash svg { width: 16px; height: 16px; flex: 0 0 auto; }

.account-flash {
    color: #bcf6d4;
    border: 1px solid rgba(43, 185, 111, .4);
    background: rgba(26, 122, 74, .16);
}
.account-flash-toast { position: fixed; z-index: 46; inset-inline-start: clamp(210px, 17vw, 280px); inset-inline-end: 0; bottom: 18px; width: fit-content; max-width: min(360px, calc(100% - 24px)); margin-inline: auto; padding: 9px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.32); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.account-flash-toast.is-leaving { opacity: 0; transform: translateY(7px); }
.account-rename-toast.is-error { color: #ffd8d2; border-color: rgba(239,85,61,.42); background: rgba(163,42,27,.16); }

.account-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: clamp(16px, 3vw, 24px);
}

.account-avatar {
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #1a1006;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffbe56, var(--orange));
    font-size: 19px;
    font-weight: 800;
    overflow: hidden;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-summary-card > div { display: grid; gap: 3px; min-width: 0; }
.account-summary-card strong { font-size: 16px; }
.account-summary-card span:not(.account-avatar) { color: var(--muted-2); font-size: 12px; overflow-wrap: anywhere; }
.account-summary-card small { color: var(--gold); font-size: 11px; }
.account-summary-card form { margin-inline-start: auto; }

.account-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 11px;
    color: #ffd7cf;
    border: 1px solid rgba(231, 83, 59, .4);
    border-radius: 9px;
    background: rgba(178, 48, 30, .13);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.account-logout svg { width: 15px; height: 15px; }

.account-page.is-dashboard { width: min(100%, 1120px); margin-top: -22px; }

@media (min-width: 901px) {
    .content-inner:has(.account-page.is-dashboard) {
        width: calc(100% - 8px);
        max-width: none;
        margin-inline: auto;
    }

    .account-page.is-dashboard {
        width: 100%;
        margin-inline: 0;
        /* Leave a slim, safe separation from the desktop header border. */
        margin-top: -16px;
    }
}

@media (max-width: 900px) {
    .account-page.is-dashboard { margin-top: -16px; }
}

.account-dashboard {
    display: grid;
    gap: 16px;
    margin-top: 0;
}

.account-dashboard-tabs,
.account-service-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(17, 20, 28, .92);
}

.account-service-filters {
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

/* The account tabs are a compact navigation strip, not a full-width card. */
.account-dashboard-tabs {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    padding: 3px;
    border-radius: 5px;
}

.account-dashboard-tabs::-webkit-scrollbar {
    display: none;
}

.account-dashboard-tabs a {
    flex: 0 0 auto;
}

.account-dashboard-tabs a,
.account-service-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    color: var(--muted-2);
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    transition: .18s ease;
}

.account-dashboard-tabs a {
    min-height: 36px;
    padding-inline: 10px;
    border-radius: 4px;
}

.account-dashboard-tabs a:hover,
.account-dashboard-tabs a:focus-visible,
.account-service-filters a:hover,
.account-service-filters a:focus-visible { color: var(--text); background: rgba(255,255,255,.045); outline: 0; }
.account-dashboard-tabs a.is-active,
.account-service-filters a.is-active { color: #1b1007; border-color: rgba(255,196,100,.58); background: linear-gradient(135deg,var(--orange),#ffb22e); }
.account-dashboard-tabs svg,
.account-service-filters svg { width: 17px; height: 17px; }

/* Keep the account navigation and file filters visually grouped. */
.account-dashboard-tabs + .account-service-filters { margin-top: -8px; }

.account-files-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(22,26,35,.96), rgba(13,15,21,.98));
}
.account-files-head h2,
.account-profile-panel h2,
.account-support-panel h2 { margin: 0; font-size: 19px; }
.account-files-head p,
.account-support-panel p { margin: 5px 0 0; color: var(--muted-2); font-size: 12px; }
.account-file-toolbar-controls { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-inline-start: auto; }
.account-files-per-page { margin: 0; }
.account-files-per-page label { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 12px; white-space: nowrap; }
.account-files-per-page select { width: 68px; min-height: 38px; padding-inline: 8px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: rgba(8,10,15,.72); text-align: center; }
.account-files-per-page select option { color: var(--text); background: #12161e; }
.account-file-sort { position: relative; z-index: 4; flex: 0 0 auto; }
.account-file-sort summary { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--gold); border: 1px solid rgba(229,178,77,.32); border-radius: 9px; background: rgba(229,178,77,.07); cursor: pointer; list-style: none; }
.account-file-sort summary::-webkit-details-marker { display: none; }
.account-file-sort summary:hover,.account-file-sort[open] summary { color: #ffe1a6; border-color: rgba(229,178,77,.68); background: rgba(229,178,77,.14); outline: 0; }
.account-file-sort summary svg { width: 16px; height: 16px; }
.account-file-sort-menu { position: absolute; z-index: 8; inset-block-start: calc(100% + 6px); inset-inline-end: 0; display: grid; width: 148px; padding: 5px; border: 1px solid rgba(229,178,77,.3); border-radius: 10px; background: #141922; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.account-file-sort-menu > strong { display: block; padding: 2px 7px 5px; color: var(--gold); border-bottom: 1px solid rgba(229,178,77,.19); font-size: 10px; font-weight: 800; line-height: 1.2; }
.account-file-sort-menu a { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 7px; min-height: 30px !important; padding: 0 8px !important; color: var(--muted-2); border: 0 !important; border-radius: 6px !important; background: transparent !important; font-size: 11px !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.account-file-sort-menu a svg { width: 13px; height: 13px; }
.account-file-sort-menu a:hover,.account-file-sort-menu a.is-active { color: #1b1007 !important; background: linear-gradient(135deg,var(--orange),#ffb22e) !important; }
.account-service-filters { overflow: visible; }
.account-service-filters + [data-account-file-results] { padding-top: 3px; }
.account-service-filters a { flex: 0 0 auto; min-height: 37px; font-size: 12px; }

.account-file-list { display: grid; gap: 7px; }
.account-storage-meter { margin: 0 0 8px; padding: 10px 12px; border: 1px solid rgba(229,178,77,.28); border-radius: 12px; background: linear-gradient(110deg, rgba(244,124,32,.08), rgba(19,23,32,.92) 38%); }
@media (min-width: 720px) {
    .account-profile-panel > .account-storage-meter { width: min(100%, 620px); justify-self: center; }
}
.account-storage-meter-head { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto auto; align-items: center; gap: 9px; color: var(--text); font-size: 13px; direction: inherit; }
.account-storage-meter-head > strong { position: relative; padding-inline-end: 8px; font-size: 12px; }
.account-storage-meter-head > strong::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 1px; height: 15px; transform: translateY(-50%); background: rgba(229,178,77,.48); }
.account-storage-meter-head b { color: var(--orange-2); font-variant-numeric: tabular-nums; }
.account-storage-upgrade { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; padding: 0 8px; border: 1px solid rgba(244,124,32,.58); border-radius: 7px; background: rgba(244,124,32,.12); color: #ffc06a; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.account-storage-upgrade svg { width: 12px; height: 12px; }
.account-storage-upgrade:hover, .account-storage-upgrade:focus-visible { color: #1b1007; background: linear-gradient(135deg, var(--orange), #ffb22e); text-decoration: none; outline: 0; }
.account-storage-meter-track { height: 6px; overflow: hidden; margin: 0; border-radius: 999px; background: rgba(255,255,255,.08); }
.account-storage-meter-track > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffb22d); transition: width .25s ease; }
.account-storage-meter-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px; color: var(--muted-2); font-size: 10.5px; }
.account-storage-meter-meta > span { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.account-storage-meter-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.account-plan-remaining { display: flex; align-items: center; justify-content: center; gap: 7px; width: min(100%, 620px); justify-self: center; margin: -3px 0 5px; color: var(--muted-2); font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.account-plan-remaining > svg { width: 13px; height: 13px; color: var(--gold); }
.account-plan-remaining a { padding-inline-start: 7px; color: var(--orange-2); border-inline-start: 1px solid rgba(229,178,77,.32); font-weight: 850; text-decoration: none; }
.account-plan-remaining a:hover { color: var(--text); }
.account-renewal-warning { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; margin: -4px 0 5px; padding: 0 10px; color: #ffd28b; border: 1px solid rgba(244,124,32,.42); border-radius: 9px; background: linear-gradient(90deg,rgba(244,124,32,.14),rgba(21,25,34,.9)); font-size: 10.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.account-renewal-warning svg { width: 13px; height: 13px; color: var(--orange); }
.account-renewal-warning svg:last-child { width: 11px; height: 11px; margin-inline-start: 2px; }
.account-renewal-warning:hover,.account-renewal-warning:focus-visible { color: var(--text); border-color: var(--orange); outline: 0; }
.account-file-row {
    display: grid;
    /* Keep every file control in the same row.  The delete form is a fifth
       grid item, so it needs its own explicit track rather than creating a
       second implicit row when the viewport becomes narrower. */
    grid-template-columns: 42px minmax(0, 1fr) auto 34px 34px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(19,23,32,.9);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.account-file-row:hover,
.account-file-row:focus-visible { border-color: rgba(244,124,32,.5); background: rgba(26,31,42,.96); outline: 0; }
.account-file-row:focus-visible { box-shadow: 0 0 0 2px rgba(244,124,32,.16); }
.account-file-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--orange); border: 1px solid rgba(244,124,32,.35); border-radius: 11px; background: rgba(244,124,32,.09); }
.account-file-icon svg { width: 19px; height: 19px; }
.account-file-icon.is-image-preview { overflow: hidden; background: #0a0d13; }
.account-file-icon.is-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-file-icon.is-image-preview img[hidden] + svg { display: block; }
.account-file-row > div { display: grid; min-width: 0; gap: 4px; }
.account-file-row strong { display: flex; align-items: center; min-width: 0; gap: 5px; overflow: hidden; font-size: 14px; white-space: nowrap; }
.account-file-source-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--gold); }
.account-file-row .account-file-name { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.account-file-rename { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--muted); border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; }
.account-file-rename:hover,.account-file-rename:focus-visible { color: var(--gold); border-color: rgba(229,178,77,.38); background: rgba(229,178,77,.07); outline: 0; }
.account-file-rename svg { width: 12px; height: 12px; }
.account-file-rename-inline { display: flex; align-items: center; min-width: 0; gap: 4px; }
.account-file-row.is-renaming .account-file-name-display { display: none; }
.account-file-rename-input { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 7px; color: var(--text); border: 1px solid rgba(244,124,32,.52); border-radius: 7px; background: rgba(6,8,12,.75); font: inherit; font-size: 12px; line-height: 1; text-align: start; outline: 0; }
.account-file-rename-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(244,124,32,.13); }
.account-file-rename-save,.account-file-rename-cancel { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 7px; cursor: pointer; }
.account-file-rename-save { color: #191005; border: 1px solid rgba(255,192,90,.62); background: linear-gradient(135deg,var(--orange),#ffb22e); }
.account-file-rename-cancel { color: var(--muted-2); border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.account-file-rename-save:hover,.account-file-rename-cancel:hover,.account-file-rename-save:focus-visible,.account-file-rename-cancel:focus-visible { outline: 0; transform: translateY(-1px); }
.account-file-rename-save svg,.account-file-rename-cancel svg { width: 13px; height: 13px; }
.account-file-rename-inline.is-saving { opacity: .68; pointer-events: none; }
.account-file-rename-inline.is-error .account-file-rename-input { border-color: rgba(239,85,61,.75); }
@media (min-width: 621px) {
    .account-file-rename-inline { width: min(100%, 300px); }
}
.account-file-row span { color: var(--muted-2); font-size: 11px; }
.account-file-row .account-file-meta { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.account-file-meta .account-file-size { display: inline-flex; align-items: center; gap: 3px; color: #d9e8ff; font-weight: 750; direction: ltr; }
html[dir="rtl"] .account-file-meta .account-file-size { direction: rtl; }
.account-file-size-unit { color: #bcd0e9; }
.account-file-meta > i { color: rgba(229,178,77,.68); font-style: normal; }
.account-file-meta time { color: var(--muted-2); }
.account-file-open { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding-inline: 10px; color: var(--gold); border: 1px solid rgba(229,178,77,.35); border-radius: 9px; font-size: 12px; font-weight: 750; text-decoration: none; }
.account-file-open svg { width: 14px; height: 14px; }
.account-file-download { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--gold); border: 1px solid rgba(229,178,77,.32); border-radius: 9px; background: rgba(229,178,77,.07); text-decoration: none; }
.account-file-download:hover,.account-file-download:focus-visible { color: #ffe1a6; border-color: rgba(229,178,77,.7); background: rgba(229,178,77,.15); outline: 0; }
.account-file-download svg { width: 15px; height: 15px; }
.account-file-expiry { display: grid; grid-template-columns: auto 11px; grid-template-rows: 11px 10px; align-items: center; justify-items: center; width: 37px; height: 34px; padding: 3px; color: var(--gold); border: 1px solid rgba(229,178,77,.28); border-radius: 9px; background: rgba(229,178,77,.06); cursor: pointer; font: inherit; line-height: 1; }
.account-file-expiry > span { grid-column: 1; grid-row: 1 / span 2; color: var(--gold) !important; font-size: 11px !important; font-weight: 850; font-variant-numeric: tabular-nums; }
.account-file-expiry > small { grid-column: 1; grid-row: 2; color: var(--muted-2); font-size: 7px; font-weight: 750; }
.account-file-expiry > svg { grid-column: 2; grid-row: 1 / span 2; width: 10px; height: 10px; color: var(--gold); }
.account-file-expiry:hover,.account-file-expiry:focus-visible { border-color: rgba(244,124,32,.72); color: var(--orange-2); outline: 0; }
.account-file-delete-locked {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #6f7784;
    border: 1px solid rgba(121,130,145,.28);
    border-radius: 9px;
    background: rgba(121,130,145,.07);
    cursor: pointer;
}
.account-file-delete-locked:hover,
.account-file-delete-locked:focus-visible { color: #aeb6c1; border-color: rgba(174,182,193,.48); background: rgba(121,130,145,.14); outline: 0; }
.account-file-delete-locked svg { width: 15px; height: 15px; }
.account-file-delete-ready { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #ff9a8c; border: 1px solid rgba(242,106,91,.38); border-radius: 9px; background: rgba(242,106,91,.09); cursor: pointer; }
.account-file-delete-form { display: block; width: 34px; min-width: 0; margin: 0; }
.account-file-delete-ready:hover,.account-file-delete-ready:focus-visible { color: #fff; border-color: rgba(242,106,91,.8); background: rgba(242,106,91,.2); outline: 0; }
.account-file-delete-ready svg { width: 15px; height: 15px; }

.account-file-preview-modal {
    position: fixed;
    /* The preview is intentionally limited to the content column. */
    z-index: 39;
    inset-block-start: var(--topbar-height);
    inset-block-end: 0;
    inset-inline-start: clamp(210px, 17vw, 280px);
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5,7,11,.74);
    backdrop-filter: blur(7px);
}
.account-file-preview-modal[hidden] { display: none; }
.account-file-preview-dialog {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(680px, 100%);
    max-height: min(760px, calc(100dvh - var(--topbar-height) - 40px));
    padding: 24px;
    overflow: auto;
    color: var(--text);
    border: 1px solid rgba(244,124,32,.4);
    border-radius: 16px;
    background: #121720;
    box-shadow: 0 22px 70px rgba(0,0,0,.5);
    text-align: center;
}
.account-file-preview-image { display: grid; place-items: center; width: 100%; min-height: 130px; overflow: hidden; border-radius: 12px; background: #080b10; }
.account-file-preview-image[hidden] { display: none; }
.account-file-preview-image img { display: block; max-width: 100%; max-height: min(58vh, 560px); object-fit: contain; }
.account-file-preview-generic { display: grid; place-items: center; width: 100px; height: 100px; color: var(--orange); border: 1px solid rgba(244,124,32,.34); border-radius: 18px; background: rgba(244,124,32,.08); }
.account-file-preview-generic[hidden] { display: none; }
.account-file-preview-generic svg { width: 42px; height: 42px; }
.account-file-preview-header { display: flex; justify-content: flex-start; width: 100%; min-height: 33px; }
.account-file-preview-title-row { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-width: 0; }
.account-file-preview-title-row > strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 16px; }
.account-file-preview-dialog > span { color: var(--muted-2); font-size: 12px; }
.account-file-preview-close { position: static; display: grid; flex: 0 0 auto; place-items: center; width: 33px; height: 33px; padding: 0; color: var(--muted-2); border: 1px solid var(--line); border-radius: 9px; background: rgba(10,13,18,.7); cursor: pointer; }
.account-file-preview-close:hover { color: var(--text); border-color: rgba(244,124,32,.5); }
.account-file-preview-close svg { width: 17px; height: 17px; }
.account-file-preview-actions { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.account-file-preview-delete-form { display: flex; align-items: center; }
.account-file-preview-delete { display: grid; place-items: center; width: 39px; height: 39px; padding: 0; color: #ff938e; border: 1px solid rgba(255,98,95,.42); border-radius: 10px; background: rgba(255,98,95,.1); cursor: pointer; }
.account-file-preview-delete:hover,
.account-file-preview-delete:focus-visible { color: #ffd0cd; border-color: rgba(255,98,95,.72); background: rgba(255,98,95,.17); outline: 0; }
.account-file-preview-delete svg { width: 16px; height: 16px; }
.account-file-preview-delete-locked { color: #707986; border-color: rgba(121,130,145,.3); background: rgba(121,130,145,.08); }
.account-file-preview-delete-locked:hover,
.account-file-preview-delete-locked:focus-visible { color: #aeb6c1; border-color: rgba(174,182,193,.5); background: rgba(121,130,145,.15); }
.account-file-delete-confirm { display: inline-flex; align-items: center; gap: 5px; min-height: 39px; padding: 4px 5px 4px 9px; color: var(--muted); border: 1px solid rgba(255,98,95,.32); border-radius: 10px; background: rgba(28,17,20,.96); font-size: 11px; font-weight: 700; white-space: nowrap; }
.account-file-delete-confirm button { min-height: 28px; padding: 0 9px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); font: inherit; font-size: 10px; cursor: pointer; }
.account-file-delete-confirm button[type="submit"] { color: #250b09; border-color: rgba(255,98,95,.76); background: #ff7972; font-weight: 850; }
.account-file-preview-open { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 14px; color: #1c1207; border-radius: 10px; background: var(--orange); font-size: 12px; font-weight: 800; text-decoration: none; }
.account-file-preview-open svg { width: 15px; height: 15px; }
.account-file-preview-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 12px; color: var(--gold); border: 1px solid rgba(229,178,77,.35); border-radius: 10px; background: rgba(229,178,77,.08); font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; }
.account-file-preview-download:hover,.account-file-preview-download:focus-visible { color: #ffe4ae; border-color: rgba(229,178,77,.7); background: rgba(229,178,77,.16); outline: 0; }
.account-file-preview-download svg { width: 15px; height: 15px; }
.account-delete-confirm-modal { position: fixed; z-index: 39; inset-block-start: var(--topbar-height); inset-block-end: 0; inset-inline-start: clamp(210px, 17vw, 280px); inset-inline-end: 0; display: grid; place-items: start center; padding: clamp(20px, 7vh, 72px) 14px 24px; background: rgba(4,6,10,.72); }
.account-delete-confirm-dialog { display: grid; justify-items: center; width: min(100%, 340px); padding: 20px; border: 1px solid rgba(255,98,95,.42); border-radius: 15px; background: linear-gradient(145deg, #171b25, #10131a); box-shadow: 0 18px 48px rgba(0,0,0,.42); text-align: center; }
.account-delete-confirm-dialog > i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; color: #ff968f; border: 1px solid rgba(255,98,95,.34); border-radius: 12px; background: rgba(255,98,95,.1); }
.account-delete-confirm-dialog > strong { max-width: 100%; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-delete-confirm-dialog > p { margin: 7px 0 15px; color: var(--muted-2); font-size: 12px; }
.account-delete-confirm-dialog > div { display: flex; align-items: center; justify-content: center; gap: 8px; }
.account-delete-confirm-submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 11px; color: #2c0c0a; border: 1px solid rgba(255,98,95,.8); border-radius: 9px; background: #ff8078; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.account-delete-confirm-submit svg { width: 14px; height: 14px; }
body.has-account-delete-confirm .topbar,body.has-account-delete-confirm .sidebar,body.has-account-delete-confirm .site-footer { pointer-events: none; }
/* Leave the header, sidebar and footer visible above the preview.  They are
   deliberately non-interactive while the dialog is open. */
.topbar,
.sidebar,
.site-footer { z-index: 40; }
body.has-account-file-preview .topbar,
body.has-account-file-preview .sidebar,
body.has-account-file-preview .site-footer { pointer-events: none; }

@media (min-width: 621px) and (max-width: 900px) {
    .account-file-preview-modal { inset-inline-start: clamp(60px, 17vw, 72px); }
}
.account-pagination { display: flex; justify-content: center; gap: 5px; padding-top: 5px; }
.account-pagination a { display: grid; place-items: center; min-width: 34px; height: 34px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; text-decoration: none; }
.account-pagination a.is-active { color: #1b1007; border-color: var(--orange); background: var(--orange); font-weight: 800; }

.account-empty-state,
.account-profile-panel,
.account-support-panel {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(22,26,35,.96), rgba(13,15,21,.98));
}
.account-empty-state { display: grid; justify-items: center; gap: 10px; padding: 38px 18px; text-align: center; }
.account-empty-state > svg { width: 30px; height: 30px; color: var(--orange); }
.account-empty-state strong { font-size: 15px; }
.account-empty-state > span { color: var(--muted-2); font-size: 12px; }
.account-empty-state > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 3px; }
.account-empty-state .primary-action,
.account-empty-state .ghost-action { min-width: 126px; min-height: 38px; font-size: 12px; text-decoration: none; }

.account-profile-panel { display: grid; gap: 14px; padding: clamp(16px,3vw,24px); }
.account-profile-card { display: flex; align-items: center; gap: 14px; }
.account-profile-avatar { width: 68px; height: 68px; border: 1px solid rgba(244,124,32,.42); border-radius: 50%; object-fit: cover; background: #10141c; }
.account-profile-card > div { display: grid; gap: 4px; min-width: 0; }
.account-profile-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.account-profile-name-line h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-card.is-paid .account-profile-name-line h2 { color: #ffc36e; text-shadow: 0 0 14px rgba(244,124,32,.14); }
.account-profile-plan-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; color: #ffd285; border: 1px solid rgba(244,124,32,.5); border-radius: 7px; background: rgba(244,124,32,.11); font-size: 9px; font-weight: 850; white-space: nowrap; }
.account-profile-plan-badge svg { width: 11px; height: 11px; color: var(--orange); }
.account-profile-plan-badge.is-inactive { color: #9aa3b1; border-color: #3d4654; background: rgba(143,153,168,.08); }
.account-profile-plan-badge.is-inactive svg { color: #8f99a8; }
.account-profile-card span { color: var(--muted-2); font-size: 12px; overflow-wrap: anywhere; }
.account-profile-card small { color: var(--gold); font-size: 11px; }
.account-profile-card .account-profile-joined { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.account-profile-joined svg { width: 12px; height: 12px; color: var(--gold); }
.account-profile-plan { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 1px 0 0; }
.account-profile-plan .account-plans-link { min-height: 28px; margin: 0; padding: 0 9px; border: 1px solid rgba(244,124,32,.58); border-radius: 8px; background: rgba(244,124,32,.12); color: #ffc06a; text-decoration: none; }
.account-profile-plan .account-plans-link:hover,
.account-profile-plan .account-plans-link:focus-visible { color: #1b1007; background: linear-gradient(135deg, var(--orange), #ffb22e); text-decoration: none; outline: 0; }
.account-plans-link,
.account-membership-card a { display: inline-flex; align-items: center; width: fit-content; gap: 5px; margin-top: 3px; color: var(--orange); font-size: 11px; font-weight: 800; text-decoration: none; }
.account-plans-link svg { width: 13px; height: 13px; }
.account-plans-link:hover,
.account-plans-link:focus-visible,
.account-membership-card a:hover,
.account-membership-card a:focus-visible { color: #ffc36e; text-decoration: underline; outline: 0; }
.account-avatar-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.account-avatar-form label { display: grid; flex: 1 1 220px; gap: 6px; color: var(--muted-2); font-size: 12px; }
.account-avatar-form input[type=file] { max-width: 100%; min-height: 40px; padding: 7px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: rgba(8,10,15,.55); }
.account-avatar-form .primary-action { min-height: 40px; font-size: 12px; }
.account-avatar-form small { width: 100%; color: var(--muted); font-size: 11px; }
.account-content-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.account-content-stats article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 7px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15,19,28,.72); }
.account-content-stats article > svg { grid-row: span 2; width: 17px; height: 17px; color: var(--gold); }
.account-content-stats span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-content-stats b { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.account-storage-addon { display: grid; gap: 8px; width: min(100%, 560px); justify-self: center; padding: 11px 12px; border: 1px solid rgba(244,124,32,.34); border-radius: 12px; background: linear-gradient(100deg, rgba(244,124,32,.09), rgba(17,21,30,.78)); }
.account-storage-addon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-storage-addon-head > strong { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.account-storage-addon-head > strong svg { width: 16px; height: 16px; color: var(--orange); }
.account-storage-addon-head > span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 750; white-space: nowrap; }
.account-storage-addon-head > span svg { width: 13px; height: 13px; color: var(--gold); }
.account-storage-addon-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; direction: rtl; }
.account-storage-addon-options button { position: relative; display: grid; place-items: center; gap: 4px; min-width: 0; min-height: 58px; padding: 6px 4px; color: var(--muted-2); border: 1px solid rgba(104,117,139,.38); border-radius: 10px; background: linear-gradient(155deg, rgba(28,34,47,.9), rgba(9,12,18,.72)); box-shadow: inset 0 1px rgba(255,255,255,.025); font: inherit; font-size: 14px; font-weight: 850; line-height: 1; white-space: nowrap; cursor: pointer; direction: ltr; transition: transform .13s ease, border-color .13s ease, background .13s ease, color .13s ease, box-shadow .13s ease; }
.account-storage-addon-options button > span { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; }
.account-storage-addon-options button > em { color: #79d7ad; font-size: 9px; font-style: normal; font-weight: 850; }
.account-storage-addon-options button > em small { color: inherit; font-size: 7px; }
.account-storage-addon-options button::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.025); border-radius: 7px; pointer-events: none; }
.account-storage-addon-options button:hover { color: var(--text); border-color: rgba(244,124,32,.62); background: linear-gradient(155deg, rgba(244,124,32,.16), rgba(20,24,33,.94)); }
.account-storage-addon-options button:active,.account-storage-addon-options button.is-selected { color: #211205; border-color: var(--orange); background: linear-gradient(155deg, #ff9a35, var(--orange)); box-shadow: 0 5px 13px rgba(244,124,32,.2); transform: translateY(1px) scale(.97); }
.account-storage-addon-options button small { color: var(--gold); font-size: 9px; font-weight: 850; letter-spacing: .025em; }
.account-storage-addon-options button.is-selected small { color: #4a2508; }
.account-storage-addon-options button.is-selected > em { color: #3b1d05; }
.account-storage-addon label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 11px; font-weight: 750; white-space: nowrap; }
.account-storage-addon input { width: 56px; min-height: 31px; padding: 0 6px; color: var(--text); border: 1px solid rgba(229,178,77,.35); border-radius: 8px; background: rgba(7,9,13,.58); font: inherit; font-size: 12px; font-weight: 800; text-align: center; outline: 0; }
.account-storage-addon input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(244,124,32,.13); }
.account-storage-addon input::-webkit-outer-spin-button,
.account-storage-addon input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.account-storage-addon input[type=number] { -moz-appearance: textfield; }
.account-storage-addon label > b { color: var(--gold); font-size: 10px; }
.account-storage-addon-checkout { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.account-storage-addon-checkout[hidden] { display: none; }
.account-storage-addon-checkout p { margin: 0; color: var(--muted-2); font-size: 10px; font-weight: 700; }
.account-storage-addon-pay { display: inline-flex; min-height: 34px; min-width: 205px; justify-content: center; gap: 7px; padding-inline: 14px; font-size: 11px; text-decoration: none; }
.account-storage-addon-pay > b { padding-inline-start: 7px; border-inline-start: 1px solid rgba(25,15,5,.25); font-size: 10px; direction: ltr; }
.account-storage-addon-status { color: #75dfb1 !important; }
.account-storage-addon-status.is-error { color: #ff9c96 !important; }
.account-payment-return { display: grid; justify-items: center; gap: 10px; width: min(100%, 340px); margin: 32px auto; padding: 22px; border: 1px solid rgba(244,124,32,.38); border-radius: 14px; background: linear-gradient(145deg, rgba(22,26,35,.96), rgba(13,15,21,.98)); text-align: center; }
.account-payment-return > svg { width: 28px; height: 28px; color: var(--orange); animation: midbaa-spin 1s linear infinite; }
.account-payment-return > span { color: var(--muted-2); font-size: 12px; }
.account-payment-return.is-error > svg { animation: none; color: #ff9c96; }
.account-payment-return.is-error > span { color: #ff9c96; }
.account-payment-return.is-success { border-color: rgba(43,185,111,.48); background: linear-gradient(145deg, rgba(17,57,38,.92), rgba(11,24,18,.98)); }
.account-payment-return.is-success > svg { animation: none; color: #62d69c; }
.account-payment-return.is-success > strong,
.account-payment-return.is-success > span { color: #8de9b9; }
.checkout-confirm-page { display: grid; place-items: start center; min-height: min(590px, 72vh); padding: clamp(20px, 4vw, 54px) 12px; }
.renew-plan-page { display: grid; place-items: start center; min-height: min(590px,72vh); padding: clamp(18px,3vw,42px) 12px; }
.renew-plan-card { display: grid; gap: 14px; width: min(100%,620px); padding: 17px; border: 1px solid rgba(244,124,32,.38); border-radius: 16px; background: linear-gradient(145deg,rgba(20,24,34,.97),rgba(10,12,18,.98)); box-shadow: 0 17px 34px rgba(0,0,0,.2); }
.renew-plan-card > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(229,178,77,.25); }
.renew-plan-card > header > span { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 850; }
.renew-plan-card > header svg { width: 16px; height: 16px; color: var(--orange); }
.renew-plan-card > header > a { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 8px; }
.renew-plan-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.renew-plan-summary > div { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(14,18,26,.76); text-align: center; }
.renew-plan-summary small { color: var(--muted); font-size: 9px; }
.renew-plan-summary strong { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--text); font-size: 13px; white-space: nowrap; }
.renew-plan-summary strong svg { width: 14px; height: 14px; color: var(--gold); }
.renew-plan-summary .renew-plan-money { color: var(--orange-2); direction: ltr; }
.renew-plan-money b { color: var(--gold); font-size: 8px; }
.renew-plan-form { display: grid; gap: 12px; }
.renew-plan-storage { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(229,178,77,.22); border-radius: 12px; background: rgba(12,15,22,.72); }
.renew-plan-storage > header { display: flex; align-items: center; gap: 6px; }
.renew-plan-storage > header svg { width: 15px; height: 15px; color: var(--orange); }
.renew-plan-storage > header strong { color: var(--text); font-size: 12px; }
.renew-plan-storage > p { margin: 0; color: var(--muted); font-size: 9.5px; text-align: center; }
.renew-plan-keep-addon { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 11px; border: 1px solid rgba(104,117,139,.36); border-radius: 10px; background: rgba(20,25,35,.78); cursor: pointer; }
.renew-plan-keep-addon > input { position: absolute; opacity: 0; pointer-events: none; }
.renew-plan-keep-addon > span { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; color: transparent; border: 1px solid rgba(244,124,32,.52); border-radius: 7px; }
.renew-plan-keep-addon > span svg { width: 14px; height: 14px; }
.renew-plan-keep-addon > input:checked + span { color: #1b1007; background: var(--orange); }
.renew-plan-keep-addon > div { display: grid; gap: 3px; min-width: 0; }
.renew-plan-keep-addon strong { color: var(--text); font-size: 11px; }
.renew-plan-keep-addon small { color: var(--gold); font-size: 9px; direction: ltr; }
.renew-plan-addon-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.renew-plan-addon-options label { min-width: 0; cursor: pointer; }
.renew-plan-addon-options label.is-none { grid-column: 1 / -1; justify-self: center; width: min(100%,180px); }
.renew-plan-addon-options input { position: absolute; opacity: 0; pointer-events: none; }
.renew-plan-addon-options label > span { display: grid; place-items: center; gap: 4px; min-height: 52px; padding: 6px 2px; border: 1px solid rgba(104,117,139,.36); border-radius: 9px; background: rgba(20,25,35,.78); }
.renew-plan-addon-options label > span b { color: var(--text); font-size: 11px; direction: ltr; }
.renew-plan-addon-options label > span small { color: var(--gold); font-size: 8px; direction: ltr; }
.renew-plan-addon-options input:checked + span { border-color: var(--orange); background: linear-gradient(145deg,rgba(244,124,32,.26),rgba(28,31,39,.95)); box-shadow: inset 0 0 0 1px rgba(244,124,32,.17); }
.renew-plan-total { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 12px; border: 1px solid rgba(244,124,32,.3); border-radius: 10px; background: rgba(244,124,32,.07); }
.renew-plan-total span { color: var(--muted-2); font-size: 11px; font-weight: 750; }
.renew-plan-total strong { color: var(--orange-2); font-size: 18px; direction: ltr; }
.renew-plan-total small { color: var(--gold); font-size: 8px; }
.renew-plan-submit { min-height: 40px; justify-self: center; }
.renew-plan-error { justify-items: center; text-align: center; }
.renew-plan-error > svg { width: 28px; height: 28px; color: #ff9c96; }
.checkout-confirm-card { display: grid; gap: 13px; width: min(100%, 500px); padding: 17px; border: 1px solid rgba(244,124,32,.38); border-radius: 16px; background: linear-gradient(145deg, rgba(20,24,34,.97), rgba(10,12,18,.98)); box-shadow: 0 17px 34px rgba(0,0,0,.2); }
.checkout-confirm-card > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(229,178,77,.25); }
.checkout-confirm-card > header > span { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 11px; font-weight: 800; }
.checkout-confirm-card > header svg { width: 16px; height: 16px; }
.checkout-confirm-card > header > a { display: grid; place-items: center; width: 29px; height: 29px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 8px; }
.checkout-confirm-title { display: flex; align-items: center; justify-content: center; gap: 11px; text-align: start; }
.checkout-confirm-title > svg { flex: 0 0 auto; width: 35px; height: 35px; padding: 8px; color: var(--orange); border: 1px solid rgba(244,124,32,.42); border-radius: 12px; background: rgba(244,124,32,.09); }
.checkout-confirm-title small,.checkout-confirm-title p { display: block; margin: 0; color: var(--muted); font-size: 11px; }
.checkout-confirm-title h1 { margin: 2px 0; color: var(--text); font-size: 22px; line-height: 1.15; }
.checkout-confirm-details { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.checkout-confirm-details > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(92,102,120,.18); }
.checkout-confirm-details > div:last-child { border-bottom: 0; }
.checkout-confirm-details span { color: var(--muted); font-size: 11px; }
.checkout-confirm-details b { color: var(--text); font-size: 12px; direction: ltr; }
.checkout-confirm-total { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 11px 12px; border-radius: 10px; background: rgba(244,124,32,.09); }
.checkout-confirm-total > span { color: var(--muted-2); font-size: 11px; }
.checkout-confirm-total strong { color: var(--orange); font-size: 23px; direction: ltr; }
.checkout-confirm-total strong small { font-size: 10px; }
.checkout-confirm-total em { grid-column: 1 / -1; color: #87d7ae; font-size: 10px; font-style: normal; }
.checkout-confirm-pay { justify-self: center; min-width: min(100%, 240px); min-height: 39px; justify-content: center; }
.checkout-confirm-status,.checkout-confirm-unavailable { margin: 0; color: #ff9c96; font-size: 11px; text-align: center; }
.checkout-confirm-card--error { justify-items: center; max-width: 340px; text-align: center; }
.checkout-confirm-card--error > svg { width: 30px; height: 30px; color: #ff9c96; }
html[dir=ltr] .checkout-confirm-card > header > a svg { transform: rotate(180deg); }
.checkout-confirm-card { gap: 16px; width: min(100%, 560px); padding: 20px; border-color: rgba(244,124,32,.46); background: radial-gradient(circle at 15% 0, rgba(244,124,32,.14), transparent 38%), linear-gradient(145deg, rgba(24,29,41,.99), rgba(9,12,18,.99)); box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); }
.checkout-confirm-hero { min-width: 0; padding: 2px 0; }
.checkout-confirm-product-icon { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; color: var(--orange); border: 1px solid rgba(244,124,32,.46); border-radius: 10px; background: linear-gradient(145deg, rgba(244,124,32,.18), rgba(244,124,32,.05)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.checkout-confirm-product-icon svg { width: 17px; height: 17px; }
.checkout-confirm-hero > div { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; }
.checkout-confirm-hero small { justify-self: start; margin: 0 0 4px; color: var(--gold); font-size: 10px; font-weight: 800; white-space: nowrap; }
.checkout-confirm-plan-name { display: inline-flex; align-items: center; justify-self: center; gap: 7px; min-width: 0; }
.checkout-confirm-hero h1 { margin: 0; color: var(--text); font-size: 25px; line-height: 1.1; white-space: nowrap; }
.checkout-confirm-hero p { justify-self: end; display: inline-flex; margin: 6px 0 0; padding: 4px 8px; color: var(--muted-2); border: 1px solid rgba(229,178,77,.22); border-radius: 999px; background: rgba(229,178,77,.055); font-size: 10px; font-weight: 750; white-space: nowrap; }
.checkout-confirm-benefits { overflow: visible; border: 1px solid rgba(108,123,146,.3); border-radius: 12px; background: rgba(4,7,12,.23); }
.checkout-confirm-benefits > header { display: flex; align-items: center; gap: 6px; padding: 9px 11px; color: var(--gold); border-bottom: 1px solid rgba(108,123,146,.25); background: rgba(255,255,255,.018); font-size: 11px; }
.checkout-confirm-benefits > header svg { width: 15px; height: 15px; }
.checkout-confirm-benefits ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.checkout-confirm-benefits li { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 9px 10px; border-inline-end: 1px solid rgba(108,123,146,.18); border-bottom: 1px solid rgba(108,123,146,.18); }
.checkout-confirm-benefits li:nth-child(2n) { border-inline-end: 0; }
.checkout-confirm-benefits li:nth-last-child(-n+2) { border-bottom: 0; }
.checkout-confirm-benefits li > i { flex: 0 0 auto; width: 15px; height: 15px; color: var(--orange); }
.checkout-confirm-benefits li > span { min-width: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.checkout-confirm-benefits li > b { min-width: 0; margin-inline-start: auto; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; white-space: nowrap; }
.checkout-confirm-grace { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px; color: var(--muted); background: rgba(255,255,255,.018); }
.checkout-confirm-grace > span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; }
.checkout-confirm-grace > span svg { width: 14px; height: 14px; color: var(--orange); }
.checkout-confirm-grace > b { color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-benefit-info { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; margin-inline-start: 0; padding: 0; color: var(--gold); border: 0; background: transparent; cursor: pointer; }
.checkout-benefit-info svg { width: 15px; height: 15px; }
.checkout-benefit-info > span { position: absolute; z-index: 4; inset-inline-end: 0; bottom: calc(100% + 7px); width: min(240px, calc(100vw - 58px)); padding: 8px 9px; color: var(--text); border: 1px solid rgba(229,178,77,.38); border-radius: 8px; background: #141922; box-shadow: 0 8px 22px rgba(0,0,0,.34); font-size: 10px; font-weight: 650; line-height: 1.55; text-align: start; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .16s ease, transform .16s ease; }
.checkout-benefit-info:hover > span,.checkout-benefit-info:focus-visible > span,.checkout-benefit-info[aria-expanded="true"] > span { opacity: 1; pointer-events: auto; transform: translateY(0); }
.checkout-confirm-total { padding: 13px 14px; border: 1px solid rgba(244,124,32,.28); background: linear-gradient(100deg, rgba(244,124,32,.12), rgba(244,124,32,.045)); }
.checkout-confirm-total strong { font-size: 26px; }
.checkout-confirm-pay { width: 100%; min-height: 44px; justify-content: center; font-size: 13px; }
.account-profile-note,
.account-membership-card { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px; border: 1px solid rgba(229,178,77,.26); border-radius: 11px; color: var(--muted-2); background: rgba(229,178,77,.055); font-size: 12px; }
.account-profile-note svg,
.account-membership-card > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--gold); }
.account-membership-card > div { display: grid; gap: 3px; }
.account-membership-card strong { color: var(--text); }
.account-logout-form { display: flex; justify-content: center; }
.account-profile-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.account-profile-actions .account-plans-link { min-height: 38px; margin: 0; padding: 0 11px; border: 1px solid rgba(244,124,32,.58); border-radius: 9px; background: rgba(244,124,32,.12); color: #ffc06a; text-decoration: none; }
.account-profile-actions .account-plans-link:hover,
.account-profile-actions .account-plans-link:focus-visible { color: #1b1007; background: linear-gradient(135deg, var(--orange), #ffb22e); outline: 0; }
.account-profile-actions .account-logout-form { display: flex; margin: 0; }
.account-password-section { display: grid; gap: 8px; width: min(100%, 560px); justify-self: center; padding: 10px 12px; border: 1px solid rgba(229,178,77,.25); border-radius: 11px; background: rgba(18,22,31,.58); }
.account-password-section > header { display: flex; align-items: center; justify-content: center; }
.account-password-section > header strong { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
.account-password-section > header svg { width: 15px; height: 15px; color: var(--gold); }
.account-password-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.account-password-section.has-current-password .account-password-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-password-form label { display: grid; min-width: 0; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 750; text-align: center; }
.account-password-form input { width: 100%; min-width: 0; min-height: 34px; padding: 0 7px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(7,9,13,.58); font: inherit; font-size: 11px; text-align: center; outline: 0; }
.account-password-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(244,124,32,.13); }
.account-password-form .primary-action { grid-column: 1 / -1; justify-self: center; min-height: 34px; padding-inline: 12px; font-size: 11px; }

.account-language-section { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(100%, 560px); justify-self: center; padding: 8px 10px; border: 1px solid rgba(229,178,77,.25); border-radius: 11px; background: rgba(18,22,31,.58); white-space: nowrap; }
.account-language-section > strong { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
.account-language-section > strong svg { width: 15px; height: 15px; color: var(--gold); }
.account-language-section form { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,9,13,.72); }
.account-language-section button { min-width: 72px; min-height: 29px; padding: 0 10px; color: var(--muted-2); border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; }
.account-language-section button:hover,.account-language-section button:focus-visible { color: var(--text); background: rgba(255,255,255,.055); outline: 0; }
.account-language-section button.is-active { color: #211205; background: linear-gradient(135deg,var(--orange),#ffb22e); box-shadow: 0 3px 9px rgba(244,124,32,.16); }

.account-support-panel { width: min(100%, 720px); justify-self: center; padding: clamp(16px,3vw,24px); }
.account-support-panel > header { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.account-support-panel > header > svg { width: 23px; height: 23px; color: var(--orange); }
.account-support-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: rgba(8, 10, 15, .45); }
.account-support-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 35px; padding: 0 10px; color: var(--muted-2); border: 1px solid transparent; border-radius: 3px; font-size: 12px; font-weight: 750; text-decoration: none; }
.account-support-tabs a:hover, .account-support-tabs a:focus-visible { color: var(--text); background: rgba(255,255,255,.045); outline: 0; }
.account-support-tabs a.is-active { color: #1b1007; border-color: rgba(255,196,100,.58); background: linear-gradient(135deg,var(--orange),#ffb22e); }
.account-support-tabs svg { width: 15px; height: 15px; }
.account-support-form { display: grid; gap: 12px; margin-top: 16px; }
.account-support-tabs + .account-support-form { margin-top: 13px; }
.account-support-description { margin: 0; color: var(--gold); font-size: 12px; line-height: 1.7; }
.account-support-form label { display: grid; gap: 6px; color: var(--muted-2); font-size: 12px; }
.account-support-form input,
.account-support-form textarea { width: 100%; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: rgba(8,10,15,.55); }
.account-support-form input { min-height: 42px; padding: 0 11px; }
.account-support-form textarea { min-height: 135px; padding: 11px; resize: vertical; }
.account-support-form .primary-action { width: fit-content; min-height: 38px; padding-inline: 14px; font-size: 12px; }
.account-ticket-list { display: grid; gap: 7px; margin-top: 13px; }
.account-ticket { border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 10, 15, .36); overflow: hidden; }
.account-ticket summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 15px; align-items: center; gap: 9px; min-height: 49px; padding: 8px 11px; cursor: pointer; list-style: none; }
.account-ticket summary::-webkit-details-marker { display: none; }
.account-ticket summary > span { display: grid; min-width: 0; gap: 3px; }
.account-ticket strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-ticket small { color: var(--muted); font-size: 10px; }
.account-ticket em { padding: 3px 6px; color: #aeb8c8; border: 1px solid var(--line); border-radius: 99px; font-size: 9px; font-style: normal; white-space: nowrap; }
.account-ticket em.is-new { color: #1b1007; border-color: rgba(255,196,100,.65); background: var(--orange); }
.account-ticket summary > svg { width: 15px; height: 15px; color: var(--muted-2); transition: transform .18s ease; }
.account-ticket[open] summary > svg { transform: rotate(180deg); }
.account-ticket-thread { display: grid; gap: 7px; padding: 9px 11px; border-top: 1px solid rgba(118,134,161,.16); }
.account-ticket-message { display: grid; gap: 4px; margin: 0; padding: 8px; color: var(--muted-2); border: 1px solid rgba(118,134,161,.2); border-radius: 8px; background: rgba(8,10,15,.35); font-size: 12px; line-height: 1.8; }
.account-ticket-message span { color: var(--gold); font-size: 10px; font-weight: 750; }
.account-ticket em.is-resolved { color: #8ee5b2; border-color: rgba(70,200,132,.42); background: rgba(70,200,132,.1); }
.account-ticket-reply { display: flex; align-items: end; gap: 7px; padding: 0 11px 11px; }
.account-ticket-reply textarea { flex: 1 1 auto; min-width: 0; min-height: 37px; max-height: 100px; padding: 8px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,15,.55); resize: vertical; font: inherit; font-size: 12px; }
.account-ticket-reply button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 37px; padding: 0 10px; color: #1b1007; border: 1px solid rgba(255,196,100,.58); border-radius: 8px; background: linear-gradient(135deg,var(--orange),#ffb22e); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.account-ticket-reply button svg { width: 14px; height: 14px; }
.account-support-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 112px; margin-top: 13px; color: var(--muted-2); border: 1px dashed rgba(118,134,161,.35); border-radius: 10px; font-size: 12px; }
.account-support-empty svg { width: 18px; height: 18px; color: var(--gold); }

.account-dashboard-tabs a.account-dashboard-favorites:not(.is-active) { color: #ffd48a; border-color: rgba(244, 124, 32, .38); background: rgba(244, 124, 32, .09); }
.account-dashboard-tabs .account-dashboard-favorites b { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-inline-start: 1px; border-radius: 50%; color: #1b1007; background: var(--orange); font-size: 12px; line-height: 1; }
.account-dashboard-tabs .account-dashboard-favorites b { flex: 0 0 15px; }
.account-favorites-panel { display: grid; gap: 9px; }
.account-favorites-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.account-favorites-head h2 { margin: 0; font-size: 19px; }
.account-favorites-head p { margin: 5px 0 0; color: var(--muted-2); font-size: 12px; }
.account-favorites-head > svg { width: 23px; height: 23px; color: var(--gold); }
.account-favorite-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; }
.account-favorite-shortcuts a { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 15px; color: var(--text); border: 1px solid rgba(244, 124, 32, .32); border-radius: 10px; background: rgba(244, 124, 32, .08); font-size: 14px; font-weight: 750; text-decoration: none; }
.account-favorite-shortcuts a:hover, .account-favorite-shortcuts a:focus-visible { border-color: var(--orange); background: rgba(244, 124, 32, .16); outline: 0; }
.account-favorite-shortcuts svg { width: 19px; height: 19px; color: var(--orange); }
.account-favorites-empty { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 12px; color: var(--muted-2); border: 1px dashed rgba(229, 178, 77, .3); border-radius: 9px; background: rgba(229, 178, 77, .04); font-size: 12px; }
.account-favorites-empty svg { width: 16px; height: 16px; color: var(--gold); }
.account-favorite-picker { width: fit-content; max-width: 100%; }
.account-favorite-picker[open] { display: grid; width: 100%; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17, 20, 28, .78); }
.account-favorite-picker summary { display: grid; place-items: center; width: 34px; height: 34px; color: #221407; border: 1px solid rgba(255, 196, 100, .65); border-radius: 8px; background: linear-gradient(135deg, var(--orange), #ffb22e); cursor: pointer; list-style: none; }
.account-favorite-picker summary::-webkit-details-marker { display: none; }
.account-favorite-picker summary svg { width: 18px; height: 18px; }
.account-favorite-picker[open] summary { width: 30px; height: 30px; color: var(--muted-2); border-color: var(--line); background: rgba(8, 10, 15, .48); }
.account-favorite-picker[open] summary svg { transform: rotate(45deg); }
.account-favorites-form { display: grid; gap: 12px; }
.account-favorites-group { padding-top: 12px; border-top: 1px solid rgba(118, 134, 161, .18); }
.account-favorites-group h3 { margin: 0 0 8px; color: var(--gold); font-size: 13px; }
.account-favorites-group > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; }
.account-favorite-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.account-favorite-choice input { position: absolute; opacity: 0; pointer-events: none; }
.account-favorite-choice span { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 10px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 10, 15, .4); font-size: 12px; font-weight: 700; transition: .18s ease; }
.account-favorite-choice span::before { content: ''; flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid rgba(145, 159, 183, .7); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.account-favorite-choice svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gold); }
.account-favorite-choice:hover span { color: var(--text); border-color: rgba(244, 124, 32, .4); }
.account-favorite-choice input:checked + span { color: #221407; border-color: rgba(255, 196, 100, .65); background: linear-gradient(135deg, var(--orange), #ffb22e); }
.account-favorite-choice input:checked + span::before { border-color: #231407; background: #231407; box-shadow: inset 0 0 0 3px var(--orange); }
.account-favorite-choice input:checked + span svg { color: #221407; }
.account-favorite-choice input:focus-visible + span { outline: 2px solid rgba(255, 178, 46, .75); outline-offset: 2px; }
.account-favorites-save { justify-self: start; min-height: 40px; font-size: 12px; }

@media (max-width: 620px) {
    .account-page { width: 100%; margin-top: 2px; }
    .account-page-head { gap: 9px; padding-inline: 2px; }
    .account-page-head .page-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
    .account-page-head .page-icon svg { width: 17px; height: 17px; }
    .account-page-head h1 { font-size: 18px; }
    .account-page-head p { font-size: 11px; line-height: 1.55; }
    .account-auth-card { margin-top: 12px; padding: 13px; border-radius: 13px; }
    .account-tabs a { min-height: 36px; font-size: 12px; }
    .google-signin-action { min-height: 42px; margin-top: 12px; font-size: 13px; }
    .library-save-action { min-width: 144px; min-height: 37px; padding-inline: 10px; font-size: 11px; }
    .library-save-notice.is-near-trigger { max-width: calc(100vw - 14px); padding: 7px 8px; gap: 7px; font-size: 10.5px; }
    .library-result-actions { gap: 6px; }
    .library-result-actions > .converter-download-action,
    .library-result-actions > .library-output-download,
    .library-result-actions > .library-save-action { min-height: 38px; padding-inline: 7px; gap: 4px; font-size: 10.5px; }
    .library-result-actions svg { width: 14px; height: 14px; }
    .image-generated-actions:has(.library-output-download:not([hidden])) { gap: 6px; }
    .image-generated-actions:has(.library-output-download:not([hidden])) > .library-output-download,
    .image-generated-actions:has(.library-output-download:not([hidden])) > .library-save-action { min-height: 38px; padding-inline: 7px; gap: 4px; font-size: 10.5px; }
    .image-generated-actions:has(.library-output-download:not([hidden])) svg { width: 14px; height: 14px; }
    .image-compressor-workbench .primary-action.image-compressor-submit { justify-self: center; }
    .library-save-notice { inset-inline: clamp(52px, 15vw, 60px) 0; bottom: 12px; width: fit-content; max-width: calc(100vw - clamp(52px, 15vw, 60px) - 14px); margin-inline: auto; padding: 9px 10px; gap: 8px; font-size: 11px; }
    .account-form { gap: 10px; }
    .account-form input { min-height: 40px; }
    .account-turnstile { margin-block: 0; }
    .account-summary-card { align-items: flex-start; flex-wrap: wrap; padding: 14px; }
    .account-summary-card form { width: 100%; margin-inline-start: 0; }
    .account-logout { width: fit-content; justify-content: center; padding-inline: 10px; }
    .account-page.is-dashboard { width: 100%; margin-top: -12px; }
    .account-dashboard { gap: 10px; }
    .account-dashboard-tabs { width: 100%; max-width: none; box-sizing: border-box; justify-content: stretch; gap: 2px; padding: 2px; border-radius: 4px; }
    .account-dashboard-tabs a { min-width: 0; flex: 1 1 0; min-height: 33px; padding-inline: 4px; gap: 3px; border-radius: 3px; font-size: 10px; white-space: nowrap; }
    html[lang="en"] .account-dashboard-tabs { width: 100%; justify-content: stretch; }
    html[lang="en"] .account-dashboard-tabs a { flex: 1 1 0; padding-inline: 3px; gap: 2px; font-size: 8.8px; }
    html[lang="en"] .account-dashboard-tabs .account-dashboard-favorites { flex: 1 1 0; }
    html[lang="en"] .account-dashboard-tabs .account-dashboard-favorites b { width: 13px; height: 13px; flex-basis: 13px; font-size: 11px; }
    .account-dashboard-tabs svg { width: 15px; height: 15px; }
    .account-profile-panel h2, .account-support-panel h2, .account-favorites-head h2 { font-size: 16px; }
    .account-file-toolbar-controls { gap: 3px; margin-inline-start: auto; }
    .account-files-per-page label { gap: 4px; font-size: 10px; }
    .account-files-per-page select { width: 52px; min-height: 33px; padding-inline: 4px; font-size: 11px; }
    .account-file-sort summary { width: 33px; height: 33px; border-radius: 8px; }
    .account-file-sort summary svg { width: 14px; height: 14px; }
    .account-file-sort-menu { width: 136px; padding: 3px; border-radius: 9px; }
    .account-file-sort-menu > strong { padding: 3px 6px 5px; font-size: 9.5px; }
    .account-file-sort-menu a { min-height: 28px !important; padding-inline: 7px !important; gap: 6px; font-size: 10px !important; }
    .account-service-filters .account-file-sort-menu a { display: flex !important; align-self: stretch; width: 100%; min-width: 0; box-sizing: border-box; }
    .account-flash-toast { inset-inline-start: clamp(52px, 15vw, 60px); bottom: 12px; max-width: calc(100vw - clamp(52px, 15vw, 60px) - 14px); padding: 8px 10px; font-size: 11px; }
    .account-service-filters { width: 100%; gap: 4px; padding: 3px; border-radius: 3px; }
    .account-dashboard-tabs + .account-service-filters { margin-top: -5px; }
    .account-service-filters a { display: grid; place-items: center; width: 34px; min-width: 34px; padding-inline: 0; }
    .account-service-filters a > span { display: none; }
    .account-service-filters a { min-height: 34px; padding-inline: 9px; font-size: 11px; }
    .account-service-filters + [data-account-file-results] { padding-top: 3px; }
    .account-file-row { grid-template-columns: 35px minmax(0, 1fr) 31px 31px 31px; gap: 6px; padding: 8px; }
.account-file-icon { width: 35px; height: 35px; border-radius: 9px; }
    .account-file-icon svg { width: 16px; height: 16px; }
    .account-file-row strong { font-size: 12px; }
    .account-file-rename { width: 20px; height: 20px; border-radius: 5px; }
    .account-file-rename svg { width: 11px; height: 11px; }
    .account-file-rename-input { height: 26px; padding-inline: 5px; font-size: 10.5px; }
    .account-file-rename-save,.account-file-rename-cancel { width: 26px; height: 26px; border-radius: 6px; }
    .account-file-rename-save svg,.account-file-rename-cancel svg { width: 12px; height: 12px; }
    .account-file-row span { font-size: 9.5px; }
    .account-file-open { display: grid; place-items: center; min-height: 31px; width: 31px; padding-inline: 0; font-size: 10px; }
    .account-file-open span { display: none; }
    .account-file-download { width: 31px; height: 31px; border-radius: 8px; }
    .account-file-expiry { width: 29px; height: 31px; padding: 2px; border-radius: 8px; }
    .account-file-expiry > span { font-size: 9px !important; }
    .account-file-expiry > small { font-size: 6px; }
    .account-file-expiry > svg { width: 8px; height: 8px; }
    .account-file-delete-locked { width: 31px; height: 31px; border-radius: 8px; }
    .account-file-delete-ready { width: 31px; height: 31px; border-radius: 8px; }
    .account-file-delete-form { width: 31px; }
    .account-storage-meter { padding: 9px 10px; }
    .account-profile-panel > .account-storage-meter { width: calc(100% + 16px); box-sizing: border-box; margin-inline: -8px; }
    .account-storage-meter-head { grid-template-columns: auto minmax(34px, 1fr) auto auto; gap: 5px; }
    .account-storage-meter-head > strong { padding-inline-end: 5px; font-size: 11px; }
    .account-storage-upgrade { min-height: 24px; padding-inline: 6px; gap: 3px; font-size: 9px; }
    .account-storage-upgrade svg { width: 10px; height: 10px; }
    .account-storage-meter-meta { gap: 2px; margin-top: 5px; font-size: 9px; }
    .account-storage-meter-meta > span { overflow: visible; text-overflow: clip; }
    .account-plan-remaining { gap: 5px; width: calc(100% + 4px); margin-top: -2px; font-size: 9px; }
    .account-plan-remaining > svg { width: 11px; height: 11px; }
    .account-plan-remaining a { padding-inline-start: 5px; }
    .account-renewal-warning { gap: 5px; min-height: 29px; padding-inline: 7px; font-size: 9px; }
    .account-renewal-warning svg { width: 11px; height: 11px; }
    .account-profile-panel { gap: 9px; padding: 10px 4px; }
    .account-profile-panel > .account-storage-meter { width: calc(100% + 8px); margin-inline: -4px; }
    .account-content-stats { gap: 3px; margin-inline: -2px; }
    .account-content-stats article { grid-template-columns: 1fr; justify-items: center; gap: 1px; padding: 6px 2px; text-align: center; }
    .account-content-stats article > svg { display: none; }
    .account-content-stats span,
    .account-content-stats b { width: 100%; overflow: visible; text-overflow: clip; white-space: nowrap; }
    .account-content-stats span { font-size: 8.5px; }
    .account-content-stats b { font-size: 10.5px; }
    .account-storage-addon { width: calc(100% + 8px); box-sizing: border-box; margin-inline: -4px; padding: 9px 8px; border-radius: 10px; }
    .account-storage-addon-head { gap: 7px; }
    .account-storage-addon-head > strong { gap: 4px; font-size: 11px; }
    .account-storage-addon-head > strong svg { width: 14px; height: 14px; }
    .account-storage-addon-head > span { font-size: 8.5px; }
    .account-storage-addon-head > span svg { width: 11px; height: 11px; }
    .account-storage-addon-options { gap: 4px; }
    .account-storage-addon-options button { min-height: 49px; padding: 4px 1px; border-radius: 8px; font-size: 11px; }
    .account-storage-addon-options button::before { inset: 2px; border-radius: 5px; }
    .account-storage-addon-options button small { font-size: 7.5px; }
    .account-storage-addon label { gap: 4px; font-size: 9px; }
    .account-storage-addon input { width: 43px; min-height: 27px; padding-inline: 3px; font-size: 11px; }
    .account-storage-addon-options button > em { font-size: 7.5px; }
    .account-storage-addon-checkout { display: grid; justify-items: center; gap: 6px; }
    .account-storage-addon-checkout p { font-size: 8.5px; }
    .account-storage-addon-pay { width: min(100%, 230px); min-width: 0; min-height: 31px; }
    .checkout-confirm-page { min-height: 460px; padding: 17px 6px; }
    .renew-plan-page { min-height: 460px; padding: 13px 5px; }
    .renew-plan-card { gap: 10px; padding: 12px 8px; border-radius: 13px; }
    .renew-plan-card > header { padding: 0 2px 8px; }
    .renew-plan-summary { gap: 4px; }
    .renew-plan-summary > div { gap: 3px; padding: 7px 2px; border-radius: 8px; }
    .renew-plan-summary small { font-size: 7.5px; }
    .renew-plan-summary strong { gap: 3px; font-size: 10px; }
    .renew-plan-summary strong svg { width: 11px; height: 11px; }
    .renew-plan-storage { gap: 7px; padding: 9px 6px; }
    .renew-plan-storage > header { justify-content: center; }
    .renew-plan-storage > header strong { font-size: 10.5px; }
    .renew-plan-keep-addon { min-height: 51px; padding: 6px 8px; }
    .renew-plan-addon-options { gap: 4px; }
    .renew-plan-addon-options label > span { min-height: 47px; }
    .renew-plan-addon-options label > span b { font-size: 9.5px; }
    .renew-plan-addon-options label > span small { font-size: 7px; }
    .renew-plan-storage > p { font-size: 8px; }
    .renew-plan-total { min-height: 39px; padding-inline: 9px; }
    .renew-plan-total span { font-size: 9.5px; }
    .renew-plan-total strong { font-size: 16px; }
    .renew-plan-submit { min-height: 36px; font-size: 11px; }
    .checkout-confirm-card { gap: 10px; padding: 13px 11px; border-radius: 13px; }
    .checkout-confirm-title h1 { font-size: 18px; }
    .checkout-confirm-title > svg { width: 31px; height: 31px; padding: 7px; }
    .checkout-confirm-total strong { font-size: 20px; }
    .checkout-confirm-card { gap: 12px; padding: 15px 12px; }
    .checkout-confirm-product-icon { width: 28px; height: 28px; border-radius: 9px; }
    .checkout-confirm-product-icon svg { width: 16px; height: 16px; }
    .checkout-confirm-hero small { font-size: 9px; }
    .checkout-confirm-hero h1 { font-size: 20px; }
    .checkout-confirm-hero p { margin-top: 5px; padding: 3px 7px; font-size: 9px; }
    .checkout-confirm-benefits ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .checkout-confirm-benefits li,.checkout-confirm-benefits li:nth-child(2n),.checkout-confirm-benefits li:nth-last-child(-n+2) { display: grid; grid-template-columns: 14px minmax(0,1fr); grid-template-areas: 'icon label' 'icon value'; gap: 2px 6px; min-height: 54px; padding: 8px; border-inline-end: 1px solid rgba(108,123,146,.18); border-bottom: 1px solid rgba(108,123,146,.18); }
    .checkout-confirm-benefits li:nth-child(2n) { border-inline-end: 0; }
    .checkout-confirm-benefits li > i { grid-area: icon; align-self: center; width: 14px; height: 14px; }
    .checkout-confirm-benefits li > span { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .checkout-confirm-benefits li > b { grid-area: value; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
    html[dir="rtl"] .checkout-confirm-benefits li > b { justify-self: start; direction: rtl; text-align: start; unicode-bidi: isolate; }
    .checkout-confirm-grace { min-height: 35px; padding: 7px 8px; }
    .checkout-confirm-grace > span { font-size: 9px; }
    .checkout-confirm-grace > b { font-size: 10px; }
    .checkout-benefit-info > span { position: absolute; z-index: 30; inset-inline-start: auto; inset-inline-end: 0; bottom: calc(100% + 6px); width: min(230px, calc(100vw - clamp(52px, 15vw, 60px) - 16px)); margin: 0; }
    .checkout-confirm-pay { min-height: 40px; font-size: 12px; }
    .account-file-preview-modal {
        inset-inline-start: clamp(52px, 15vw, 60px);
        padding: 10px;
    }
    .account-file-preview-dialog { padding: 19px 14px 15px; border-radius: 14px; }
    .account-file-preview-actions { gap: 6px; }
    .account-file-preview-download,.account-file-preview-open { min-height: 36px; padding-inline: 9px; font-size: 11px; }
    .account-delete-confirm-modal { inset-inline-start: clamp(52px, 15vw, 60px); padding: 24px 10px 18px; }
    .account-delete-confirm-dialog { width: min(100%, 300px); padding: 16px 13px; border-radius: 14px; }
    .account-file-delete-confirm { gap: 4px; padding-inline: 7px 4px; font-size: 10px; }
    .account-file-delete-confirm button { padding-inline: 7px; font-size: 9px; }
    .account-empty-state { padding: 26px 12px; }
    .account-empty-state > div { width: 100%; flex-wrap: nowrap; }
    .account-empty-state .primary-action, .account-empty-state .ghost-action { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
    .account-profile-panel, .account-support-panel { padding: 13px; border-radius: 13px; }
    .account-favorites-head p { font-size: 11px; }
    .account-favorite-shortcuts { gap: 5px; }
    .account-favorite-shortcuts a { min-height: 48px; padding-inline: 12px; font-size: 13px; }
    .account-favorite-shortcuts svg { width: 18px; height: 18px; }
    .account-favorites-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .account-favorite-choice span { min-height: 35px; gap: 6px; padding-inline: 7px; font-size: 10.5px; }
    .account-favorite-choice span::before { flex-basis: 11px; width: 11px; height: 11px; }
    .account-favorite-choice svg { width: 14px; height: 14px; }
    .account-favorites-save { width: 100%; }
    .account-favorite-picker[open] { padding: 9px; border-radius: 10px; }
    .account-favorite-picker summary { width: 32px; height: 32px; }
    .account-favorite-picker:not([open]) { justify-self: center; }
    .account-profile-avatar { width: 58px; height: 58px; }
    .account-profile-name-line { gap: 5px; }
    .account-profile-plan-badge { min-height: 20px; padding-inline: 5px; font-size: 8px; }
    .account-profile-plan-badge svg { width: 9px; height: 9px; }
    .account-profile-actions { gap: 6px; }
    .account-profile-actions .account-plans-link { min-height: 34px; padding-inline: 9px; font-size: 10px; }
    .account-profile-actions .account-logout { min-height: 34px; padding-inline: 9px; font-size: 10px; }
    .account-password-section { width: calc(100% + 8px); box-sizing: border-box; margin-inline: -4px; padding: 8px; border-radius: 10px; }
    .account-password-section > header strong { font-size: 10.5px; }
    .account-password-form { gap: 4px; }
    .account-password-form label { gap: 3px; font-size: 8.5px; }
    .account-password-form input { min-height: 30px; padding-inline: 3px; font-size: 10px; }
    .account-password-form .primary-action { min-height: 31px; padding-inline: 10px; font-size: 10px; }
    .account-avatar-form { align-items: stretch; }
    .account-avatar-form .primary-action { width: 100%; }
    .account-support-form .primary-action { width: 100%; }
    .account-support-panel { width: 100%; }
    .account-support-tabs { width: 100%; }
    .account-support-tabs a { flex: 1 1 0; min-width: 0; min-height: 33px; padding-inline: 7px; font-size: 11px; white-space: nowrap; }
    .account-support-tabs svg { width: 14px; height: 14px; }
    .account-ticket summary { grid-template-columns: minmax(0, 1fr) auto 14px; gap: 6px; min-height: 45px; padding: 7px 8px; }
    .account-ticket strong { font-size: 11px; }
    .account-support-description { font-size: 11px; }
    .account-support-form .primary-action { min-height: 36px; padding-inline: 12px; }
    .account-ticket-thread { padding: 8px; }
    .account-ticket-message { padding: 7px; font-size: 11px; }
    .account-ticket-reply { gap: 5px; padding: 0 8px 8px; }
    .account-ticket-reply textarea { min-height: 34px; padding: 7px; font-size: 11px; }
    .account-ticket-reply button { min-height: 34px; padding-inline: 8px; font-size: 10px; }
    .account-logout-form { display: flex; justify-content: center; }
}

/* الإدارة: الخطط */
.admin-plans-panel { gap: 14px; }
.admin-plan-tabs { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #11151e; }
.admin-plan-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.admin-plan-tabs button:first-child { border-inline-start: 0; }
.admin-plan-tabs button.is-active { background: #ff941f; color: #18120a; font-weight: 800; }
.admin-plan-tabs svg { width: 16px; height: 16px; }
.admin-plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
@media (min-width: 861px) {
    /* The four current plans are a single comparable set on desktop. */
    .admin-plan-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.admin-plan-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #11151e; }
.admin-plan-card.is-inactive { opacity: .56; }
.admin-plan-card[data-plan-select] { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.admin-plan-card[data-plan-select]:hover,
.admin-plan-card[data-plan-select].is-selected { border-color: rgba(244,124,32,.72); background: rgba(244,124,32,.075); }
.admin-plan-card[data-plan-select]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.admin-plan-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.admin-plan-card header strong { color: var(--text); font-size: 15px; }
.admin-plan-card header span { padding: 3px 7px; border-radius: 999px; background: rgba(42, 201, 133, .12); color: #64deb0; font-size: 10px; }
.admin-plan-features { display: grid; gap: 7px; padding-top: 10px; }
.admin-plan-features span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.admin-plan-features svg { width: 14px; height: 14px; color: #f1a542; }
.admin-plan-form { display: grid; gap: 12px; max-width: 820px; }
.admin-plan-editor { display: grid; gap: 12px; max-width: 100%; margin-top: 12px; padding: 14px; border: 1px solid rgba(244,124,32,.42); border-radius: 11px; background: linear-gradient(135deg, rgba(244,124,32,.075), rgba(17,21,30,.96) 32%); }
.admin-plan-editor-head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(215,169,77,.28); }
.admin-plan-editor-head strong { color: var(--text); font-size: 15px; }
.admin-plan-editor-head span { color: var(--muted-2); font-size: 11px; }
.admin-plan-feature-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.admin-plan-feature-fields label { display: grid; gap: 6px; min-width: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.admin-plan-feature-fields select,
.admin-plan-feature-fields input { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,15,.74); text-align: center; }
.admin-plan-feature-fields option { color: var(--text); background: #11151e; }
.admin-plan-feature-fields input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.admin-plan-feature-fields input[type="number"]::-webkit-outer-spin-button,
.admin-plan-feature-fields input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.admin-plan-value-unit { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 5px; }
.admin-plan-value-unit select { padding-inline: 5px; font-size: 12px; }
.admin-plan-value-unit > b { display: grid; place-items: center; min-height: 100%; padding-inline: 5px; color: var(--gold); border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,15,.55); font-size: 11px; }
.admin-plan-extra-features { display: grid; gap: 8px; padding-top: 2px; }
.admin-plan-extra-features > strong { color: var(--gold); font-size: 12px; }
.admin-plan-feature-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.admin-plan-feature-tags:empty { display: none; }
.admin-plan-feature-tags span { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 5px 3px 9px; color: var(--text); border: 1px solid rgba(215,169,77,.34); border-radius: 999px; background: rgba(215,169,77,.09); font-size: 11px; }
.admin-plan-feature-tags b { font-weight: 700; }
.admin-plan-feature-tags button { display: inline-grid; place-items: center; width: 21px; height: 21px; padding: 0; color: var(--muted); border: 0; border-radius: 50%; background: rgba(0,0,0,.2); cursor: pointer; }
.admin-plan-feature-tags button:hover { color: var(--text); background: rgba(255,98,95,.28); }
.admin-plan-feature-tags svg { width: 13px; height: 13px; }
.admin-plan-extra-add { display: flex; align-items: center; gap: 7px; width: min(100%, 440px); }
.admin-plan-extra-add input { min-width: 0; flex: 1 1 auto; min-height: 38px; padding: 0 10px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,15,.74); }
.admin-plan-extra-add .ghost-action { flex: 0 0 auto; min-height: 38px; min-width: auto; padding-inline: 10px; }
.admin-plan-editor .install-submit { justify-self: center; width: auto; min-width: 178px; }
.admin-plan-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.admin-plan-form label { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 700; }
.admin-plan-form input[type="text"], .admin-plan-form input[type="number"] { width: 100%; min-height: 40px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: #0c1017; color: var(--text); padding: 0 10px; font: inherit; }
.admin-plan-switches { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.admin-plan-switches label { display: inline-flex; grid-template-columns: auto auto; align-items: center; gap: 7px; min-height: 34px; font-size: 12px; }
.admin-plan-switches input { accent-color: #ff941f; }
.admin-payment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 12px; }
.admin-payment-summary article { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-height: 70px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: #11151e; }
.admin-payment-summary svg { grid-row: 1 / -1; width: 19px; height: 19px; color: #f3a74a; }
.admin-payment-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-payment-summary strong { color: var(--text); font-size: 18px; line-height: 1.2; }
.admin-payment-tabs { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #11151e; }
.admin-payment-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.admin-payment-tabs button:first-child { border-inline-start: 0; }
.admin-payment-tabs button.is-active { background: #ff941f; color: #18120a; font-weight: 800; }
.admin-payment-tabs svg { width: 16px; height: 16px; }
.admin-payment-tab-panel { margin-top: 12px; }
.admin-payment-table { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #11151e; }
.admin-payment-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(100px, 1fr) minmax(90px, .7fr) minmax(86px, .65fr) minmax(145px, .9fr); align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.admin-payment-row:first-child { border-top: 0; }
.admin-payment-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-payment-head { color: #f0b34c; background: rgba(243, 173, 77, .06); font-weight: 800; }
.admin-payment-empty { color: var(--muted); }
.admin-payment-status { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 999px; color: #e9bd6e; background: rgba(243, 173, 77, .12); font-size: 10px; }
.admin-payment-status.is-completed { color: #65dfb0; background: rgba(42, 201, 133, .12); }
.admin-paypal-form { display: grid; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #11151e; }
.admin-paypal-form.is-ready { border-color: rgba(53, 206, 138, .62); background: rgba(19, 88, 59, .16); }
.admin-paypal-form.is-problem { border-color: rgba(234, 82, 82, .7); background: rgba(117, 32, 32, .16); }
.admin-paypal-enable { display: inline-flex; align-items: center; width: fit-content; gap: 7px; min-height: 30px; color: var(--text); font-size: 12px; font-weight: 800; }
.admin-paypal-form.is-ready .admin-paypal-enable input { accent-color: #36cf8b; }
.admin-paypal-form.is-problem .admin-paypal-enable input { accent-color: #ef6262; }
.admin-paypal-enable input { accent-color: #ff941f; }
.admin-paypal-connection { display: inline-flex; align-items: center; width: fit-content; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid #3d4656; border-radius: 8px; color: #b9c2d1; background: rgba(83, 95, 115, .1); font-size: 12px; font-weight: 800; }
.admin-paypal-connection svg { width: 15px; height: 15px; color: #e4ae52; }
.admin-paypal-connection.is-connected { border-color: rgba(53, 206, 138, .58); color: #77e1b1; background: rgba(30, 159, 101, .14); }
.admin-paypal-connection.is-connected svg { color: #44d695; }
.admin-paypal-connection.is-error { border-color: rgba(234, 82, 82, .68); color: #ff9c9c; background: rgba(155, 37, 37, .15); }
.admin-paypal-connection.is-error svg { color: #ff7676; }
.admin-paypal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.admin-paypal-grid label { display: grid; gap: 6px; min-width: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.admin-paypal-grid input, .admin-paypal-grid select { box-sizing: border-box; width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #0c1017; color: var(--text); padding: 0 10px; font: inherit; }
.admin-paypal-grid .admin-paypal-secret { grid-column: 1 / -1; width: min(50%, 480px); justify-self: center; }
.admin-paypal-secret input { text-align: center; }
.admin-paypal-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.admin-paypal-form .primary-action, .admin-paypal-test { width: auto; min-width: 142px; }
.admin-paypal-test { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid #a96a1d; border-radius: 8px; color: #f3bd68; background: #121821; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-paypal-test svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
    .admin-plan-tabs { width: 100%; }
    .admin-plan-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 11px; }
    .admin-plan-tabs button span { white-space: nowrap; }
    .admin-plan-list { grid-template-columns: 1fr; gap: 7px; }
    .admin-plan-card { padding: 10px; border-radius: 9px; }
    .admin-plan-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .admin-plan-features span { font-size: 10px; min-width: 0; }
    .admin-plan-features svg { flex: 0 0 auto; width: 12px; height: 12px; }
    .admin-plan-number-grid { grid-template-columns: 1fr; gap: 7px; }
    .admin-plan-feature-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .admin-plan-switches { display: grid; grid-template-columns: 1fr; gap: 4px; }
    .admin-plan-form .install-submit { justify-self: center; width: auto; min-width: 132px; }
    .admin-payment-summary { gap: 7px; margin-top: 8px; }
    .admin-payment-summary article { min-height: 62px; padding: 8px 9px; column-gap: 7px; }
    .admin-payment-summary svg { width: 17px; height: 17px; }
    .admin-payment-summary span { font-size: 10px; }
    .admin-payment-summary strong { font-size: 15px; }
    .admin-payment-tabs { width: 100%; }
    .admin-payment-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 11px; }
    .admin-payment-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; padding: 9px; }
    .admin-payment-row > span:nth-child(1)::before { content: 'المستخدم: '; color: var(--muted); }
    .admin-payment-row > span:nth-child(2)::before { content: 'الخدمة: '; color: var(--muted); }
    .admin-payment-row > span:nth-child(3)::before { content: 'المبلغ: '; color: var(--muted); }
    .admin-payment-row > span:nth-child(4)::before { content: 'الحالة: '; color: var(--muted); }
    .admin-payment-row > span:nth-child(5)::before { content: 'التاريخ: '; color: var(--muted); }
    .admin-payment-head { display: none; }
    .admin-payment-empty { display: grid; grid-template-columns: 1fr; }
    .admin-payment-empty > span:not(:first-child) { display: none; }
    .admin-paypal-grid { grid-template-columns: 1fr; gap: 8px; }
    .admin-paypal-grid .admin-paypal-secret { grid-column: auto; width: 100%; }
    .admin-paypal-actions { gap: 6px; }
    .admin-paypal-form .primary-action, .admin-paypal-test { min-width: 0; padding-inline: 10px; }
}

/* Subscriber batch image uploads: compact rows keep every generated link usable. */
.image-upload-batch-results {
    display: grid;
    width: min(100%, 760px);
    gap: 7px;
    margin-inline: auto;
    padding: 10px;
    border: 1px solid rgba(242, 138, 37, .28);
    border-radius: 12px;
    background: rgba(17, 21, 29, .94);
}
.image-batch-result-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px;
    border: 1px solid #28303d;
    border-radius: 9px;
}
.image-batch-preview {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(242, 138, 37, .38);
    border-radius: 7px;
    background: #0a0d13;
}
.image-batch-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-batch-link {
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid #2b3340;
    border-radius: 7px;
    background: #fff;
    color: #20242b;
    direction: ltr;
    font-size: .75rem;
    text-align: start;
}
.image-batch-copy { width: 40px; min-width: 40px; height: 36px; padding: 0; }
.image-batch-copy svg { width: 16px; height: 16px; }
.image-batch-result-error { margin: 0; padding: 8px; border: 1px solid rgba(241, 94, 94, .4); border-radius: 8px; color: #ffadad; font-size: .75rem; }
.watermark-batch-progress {
    display: grid;
    width: min(100%, 760px);
    gap: 7px;
    margin-inline: auto;
    padding: 11px 13px;
    border: 1px solid rgba(242, 138, 37, .42);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(22, 27, 37, .98), rgba(10, 13, 19, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.watermark-batch-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.watermark-batch-progress-head span { overflow: hidden; min-width: 0; color: var(--text); font-size: .76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.watermark-batch-progress-head strong { flex: 0 0 auto; color: var(--orange-2); font-size: .78rem; font-variant-numeric: tabular-nums; direction: ltr; }
.watermark-batch-progress-track { position: relative; height: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); border-radius: 999px; background: rgba(3, 6, 11, .82); }
.watermark-batch-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--gold)); box-shadow: 0 0 12px rgba(244, 124, 32, .3); transition: width 180ms ease; }
.image-processing-batch-results {
    display: grid;
    width: min(100%, 760px);
    gap: 7px;
    margin-inline: auto;
    padding: 10px;
    border: 1px solid rgba(242, 138, 37, .28);
    border-radius: 12px;
    background: rgba(17, 21, 29, .94);
}
.image-processing-batch-status { margin: 0 0 2px; color: #ffb35c; font-size: .76rem; font-weight: 700; text-align: center; }
.image-processing-batch-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 5px; border: 1px solid #28303d; border-radius: 9px; }
.image-processing-batch-row img { width: 48px; height: 48px; border: 1px solid rgba(242, 138, 37, .38); border-radius: 7px; background: #0a0d13; object-fit: cover; }
.image-processing-batch-row > span { overflow: hidden; min-width: 0; color: #edf0f5; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.image-processing-batch-download { min-height: 34px; padding-inline: 10px; font-size: .72rem; white-space: nowrap; }
.image-processing-batch-error { margin: 0; padding: 8px; border: 1px solid rgba(241, 94, 94, .4); border-radius: 8px; color: #ffadad; font-size: .75rem; }
@media (max-width: 640px) {
    .image-upload-batch-results { gap: 5px; padding: 6px; }
    .image-batch-result-row { grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 5px; padding: 4px; }
    .image-batch-preview { width: 38px; height: 38px; border-radius: 6px; }
    .image-batch-link { height: 32px; padding-inline: 6px; font-size: .66rem; }
    .image-batch-copy { display: inline-flex; flex-direction: row; gap: 3px; width: 44px; min-width: 44px; height: 38px; padding: 2px; }
    .image-batch-copy-label { display: block; order: -1; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
    .image-processing-batch-results { gap: 5px; padding: 6px; }
    .image-processing-batch-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 5px; padding: 4px; }
    .image-processing-batch-row img { width: 38px; height: 38px; border-radius: 6px; }
    .image-processing-batch-download { min-height: 30px; padding-inline: 7px; font-size: .66rem; }
    .watermark-batch-progress { gap: 6px; padding: 8px 9px; border-radius: 10px; }
    .watermark-batch-progress-head span { font-size: .68rem; }
    .watermark-batch-progress-head strong { font-size: .72rem; }
    .watermark-batch-progress-track { height: 7px; }
}

.admin-member-modal { position: fixed; z-index: 70; inset-block: var(--admin-topbar-height, 64px) 0; inset-inline: var(--admin-sidebar-width, 240px) 0; display: grid; place-items: start center; padding: 14px 18px 18px; background: rgba(5, 8, 13, .6); }
.admin-member-modal[hidden] { display: none; }
.admin-member-modal-card { position: relative; width: min(1040px, 100%); max-height: calc(100% - 2px); overflow: auto; padding: 17px; border: 1px solid #394456; border-radius: 13px; background: #11151e; box-shadow: 0 18px 55px rgba(0,0,0,.52); }
.admin-member-modal-close { position: absolute; top: 9px; inset-inline-end: 9px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #151a23; color: var(--muted); cursor: pointer; }
.admin-member-modal-close:hover { color: #f3ad4d; border-color: #c77a23; }
.admin-member-modal-close svg { width: 16px; height: 16px; }
.admin-member-modal-profile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline-end: 38px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.admin-member-modal-profile > img, .admin-member-modal-profile > svg { flex: 0 0 auto; width: 42px; height: 42px; padding: 7px; border: 1px solid #3b4554; border-radius: 50%; box-sizing: border-box; color: #f3ad4d; object-fit: cover; }
.admin-member-modal-profile > span { display: grid; min-width: 0; gap: 3px; }
.admin-member-modal-profile strong { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-modal-profile small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.admin-member-modal-profile > div { display: grid; gap: 3px; margin-inline-start: auto; text-align: end; }
.admin-member-modal-profile b { color: #f3ad4d; font-size: 11px; }
.admin-member-modal-profile > div small { font-size: 9px; }
.admin-member-modal-tabs { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin-top: 10px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8, 10, 15, .5); }
.admin-member-modal-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; white-space: nowrap; }
.admin-member-modal-tabs button:hover, .admin-member-modal-tabs button.is-active { border-color: rgba(243,173,77,.46); background: rgba(243,173,77,.11); color: #f3ad4d; }
.admin-member-modal-tabs svg { width: 13px; height: 13px; }
.admin-member-settings-form { display: grid; width: min(100%, 560px); gap: 9px; padding-top: 13px; }
.admin-member-settings-form > label { display: grid; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 700; }
.admin-member-settings-form input, .admin-member-settings-form select { min-width: 0; min-height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #0d1119; color: var(--text); font: inherit; font-size: 11px; }
.admin-member-settings-form input:focus, .admin-member-settings-form select:focus { border-color: #c77a23; box-shadow: 0 0 0 3px rgba(243,173,77,.08); }
.admin-member-settings-membership { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; padding-top: 2px; }
.admin-member-settings-membership > label:first-child { display: grid; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 700; }
.admin-member-settings-form .primary-action { justify-self: start; width: auto; min-width: 124px; }
.admin-member-activation-form { display: grid; width: min(100%, 560px); gap: 9px; margin-top: 15px; padding: 14px; border: 1px solid rgba(243,173,77,.24); border-radius: 11px; background: rgba(243,173,77,.045); }
.admin-member-activation-form > header { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(243,173,77,.17); }
.admin-member-activation-form > header > span { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(243,173,77,.32); border-radius: 9px; color: #f3ad4d; background: rgba(243,173,77,.08); }
.admin-member-activation-form > header svg { width: 17px; height: 17px; }
.admin-member-activation-form > header div { display: grid; min-width: 0; gap: 2px; }
.admin-member-activation-form > header strong { color: var(--text); font-size: 12px; }
.admin-member-activation-form > header small { color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.admin-member-activation-form > label { display: grid; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 700; }
.admin-member-activation-form select { min-width: 0; min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #0d1119; color: var(--text); font: inherit; font-size: 11px; }
.admin-member-activation-form select:focus { border-color: #c77a23; box-shadow: 0 0 0 3px rgba(243,173,77,.08); }
.admin-member-subscription-status { padding: 8px 10px; border: 1px solid rgba(143,153,168,.2); border-radius: 7px; color: var(--muted); background: rgba(8,10,15,.42); font-size: 10px; line-height: 1.6; }
.admin-member-subscription-status.is-active { border-color: rgba(56,211,147,.28); color: #78dfb1; background: rgba(56,211,147,.055); }
.admin-member-activation-form > p { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.6; }
.admin-member-activation-form > p svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; color: #f3ad4d; }
.admin-member-activation-form .primary-action { justify-self: start; width: auto; min-width: 138px; }
.admin-member-modal-files { display: grid; gap: 5px; padding-top: 12px; }
.admin-member-modal-file-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 7px; border-bottom: 1px solid rgba(244,124,32,.24); }
.admin-member-modal-file-controls label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.admin-member-modal-file-controls select { min-width: 96px; height: 31px; padding: 0 25px 0 8px; color: var(--text); border: 1px solid var(--line); border-radius: 7px; background: #121720; font: inherit; font-size: 10px; }
.admin-member-modal-file-controls label:nth-child(2) select { min-width: 54px; }
.admin-member-modal-file-controls small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.admin-member-modal-file-head { display: grid; grid-template-columns: minmax(0, 1fr) 70px 90px 160px 24px 39px; align-items: center; gap: 9px; min-width: 0; }
.admin-member-modal-file-row > :first-child { display: grid; grid-template-columns: minmax(0, 1fr) 70px 90px 160px 24px; align-items: center; gap: 9px; min-width: 0; }
.admin-member-modal-file-head { padding: 0 9px 4px; color: #f0ac50; font-size: 10px; font-weight: 800; }
.admin-member-modal-file-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 5px; padding: 0 5px 0 0; border: 1px solid var(--line); border-radius: 8px; }
.admin-member-modal-file-row > :first-child { padding: 9px; border: 0; color: inherit; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.admin-member-modal-file-row:hover { border-color: #c77a23; background: rgba(243,173,77,.04); }
.admin-member-modal-file-row > :first-child > svg { width: 16px; height: 16px; color: #f3ad4d; }
.admin-member-modal-file-row > :first-child .admin-member-modal-file-name { display: flex; align-items: center; min-width: 0; gap: 7px; }
.admin-member-modal-file-row > :first-child strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-modal-file-row > :first-child small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-file-delete { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(238, 91, 91, .3); border-radius: 7px; background: rgba(238, 91, 91, .07); color: #ef8585; cursor: pointer; }
.admin-member-file-delete:hover { background: rgba(238, 91, 91, .17); }
.admin-member-file-delete:disabled { opacity: .45; cursor: wait; }
.admin-member-modal-file-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 7px; }
.admin-member-modal-file-footer > span { color: var(--muted); font-size: 10px; }
.admin-member-files-delete-all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 11px; color: #ffaaaa; border: 1px solid rgba(238,91,91,.52); border-radius: 7px; background: rgba(238,91,91,.09); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.admin-member-files-delete-all:hover,.admin-member-files-delete-all:focus-visible { color: #fff; background: rgba(220,66,66,.35); outline: 0; }
.admin-member-files-delete-all:disabled { opacity: .6; cursor: wait; }
.admin-member-files-delete-all svg { width: 14px; height: 14px; }
.admin-member-file-delete svg { width: 14px; height: 14px; }
.admin-member-modal-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 5px; }
.admin-member-modal-pagination button { min-width: 57px; min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #151a23; color: var(--muted-2); font: inherit; font-size: 10px; cursor: pointer; }
.admin-member-modal-pagination button:not(:disabled):hover { border-color: #c77a23; color: #f3ad4d; }
.admin-member-modal-pagination button:disabled { opacity: .38; cursor: default; }
.admin-member-modal-pagination span { min-width: 36px; color: #f3ad4d; font-size: 10px; font-weight: 800; text-align: center; }
@media (max-width: 860px) { .admin-member-modal { inset-inline-start: 64px; } }
@media (max-width: 640px) {
    .admin-member-modal { inset-block-start: 56px; inset-inline-start: 47px; padding: 7px; align-items: start; }
    .admin-member-modal-card { max-height: calc(100vh - 70px); padding: 12px; border-radius: 11px; }
    .admin-member-modal-profile { gap: 7px; min-height: 39px; padding-bottom: 8px; }
    .admin-member-modal-profile > img, .admin-member-modal-profile > svg { width: 35px; height: 35px; padding: 5px; }
    .admin-member-modal-profile strong { font-size: 12px; }
    .admin-member-modal-profile small { font-size: 9px; }
    .admin-member-modal-profile > div { display: none; }
    .admin-member-modal-tabs { width: 100%; margin-top: 8px; }
    .admin-member-modal-tabs button { flex: 1; min-width: 0; padding-inline: 6px; }
    .admin-member-modal-tabs button span { overflow: hidden; text-overflow: ellipsis; }
    .admin-member-settings-membership { grid-template-columns: 1fr; align-items: start; gap: 7px; }
    .admin-member-settings-form .primary-action { justify-self: center; }
    .admin-member-activation-form { width: 100%; margin-top: 11px; padding: 11px; }
    .admin-member-activation-form .primary-action { justify-self: center; }
    .admin-member-modal-files { gap: 5px; padding-top: 9px; }
    .admin-member-modal-file-controls { gap: 5px; padding-bottom: 6px; }
    .admin-member-modal-file-controls label { gap: 4px; font-size: 9px; }
    .admin-member-modal-file-controls select { min-width: 78px; height: 29px; padding-inline: 6px 20px; font-size: 9px; }
    .admin-member-modal-file-controls label:nth-child(2) select { min-width: 45px; }
    .admin-member-modal-file-controls small { display: none; }
    .admin-member-modal-file-head { display: none; }
    .admin-member-modal-file-row { grid-template-columns: minmax(0, 1fr) 31px; padding: 0 3px 0 0; }
    .admin-member-modal-file-row > :first-child { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 6px; padding: 7px; }
    .admin-member-modal-file-row > :first-child small:nth-of-type(1) { display: none; }
    .admin-member-modal-file-row > :first-child small:nth-of-type(2)::before { content: 'الحجم: '; color: #e5a64d; }
    .admin-member-modal-file-row > :first-child small:nth-of-type(3) { display: none; }
    .admin-member-file-delete { width: 28px; height: 28px; }
    .admin-member-modal-file-footer { padding-top: 6px; }
    .admin-member-files-delete-all { min-height: 31px; padding-inline: 9px; font-size: 10px; }
}

/* الإدارة: الأعضاء */
.admin-members-panel { gap: 13px; }
.admin-deletion-panel { gap: 13px; }
.admin-deletion-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8, 10, 15, .5); }
.admin-deletion-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.admin-deletion-tabs button:hover, .admin-deletion-tabs button.is-active { border-color: rgba(243,173,77,.45); background: rgba(243,173,77,.1); color: #f3ad4d; }
.admin-deletion-tabs button > svg { width: 14px; height: 14px; }
.admin-content-tabs { align-self: start; margin: -3px 0 2px; }
.admin-content-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; white-space: nowrap; }
.admin-content-tabs a:hover, .admin-content-tabs a.is-active { border-color: rgba(243,173,77,.45); background: rgba(243,173,77,.1); color: #f3ad4d; }
.admin-content-tabs a > svg { width: 14px; height: 14px; }
.admin-deletion-tabs b { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(243,173,77,.18); font-size: 9px; }
.admin-cleanup-form { display: grid; width: min(100%, 760px); margin-inline: auto; justify-items: center; gap: 10px; }
.admin-cleanup-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; }
.admin-cleanup-controls label { display: grid; justify-items: center; gap: 4px; color: var(--muted-2); font-size: 10px; font-weight: 700; }
.admin-cleanup-controls select, .admin-cleanup-controls input { min-height: 35px; min-width: 140px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #0d1119; color: var(--text); font: inherit; font-size: 11px; }
.admin-cleanup-controls input { width: 92px; min-width: 0; text-align: center; }
.admin-cleanup-controls input[type=number]::-webkit-inner-spin-button, .admin-cleanup-controls input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.admin-cleanup-controls input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.admin-cleanup-age-label { padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.admin-cleanup-age-label > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.admin-cleanup-age-label em { color: var(--muted); font-style: normal; font-weight: 500; }
.admin-cleanup-controls select:focus, .admin-cleanup-controls input:focus { border-color: #c77a23; box-shadow: 0 0 0 3px rgba(243,173,77,.08); }
.admin-cleanup-preview { display: flex; align-items: center; gap: 7px; min-height: 37px; padding: 8px 10px; border: 1px solid rgba(243,173,77,.25); border-radius: 8px; background: rgba(243,173,77,.045); color: var(--muted-2); font-size: 11px; }
.admin-cleanup-preview svg { width: 16px; height: 16px; flex: 0 0 auto; color: #f3ad4d; }
.admin-cleanup-preview b { color: #f3ad4d; }
.admin-cleanup-form > .primary-action { width: auto; justify-self: center; min-width: 115px; }
.admin-trash-list { display: grid; gap: 5px; max-width: 920px; }
.admin-trash-list article { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #11151e; }
.admin-trash-list article > svg { width: 15px; height: 15px; color: #f3ad4d; }
.admin-trash-list article.is-previewable { cursor: pointer; }
.admin-trash-list article > span { display: grid; min-width: 0; gap: 2px; }
.admin-trash-list strong, .admin-trash-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-trash-list strong { color: var(--text); font-size: 11px; }
.admin-trash-list small, .admin-trash-list time { color: var(--muted); font-size: 9px; }
.admin-trash-actions { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 5px; }
.admin-trash-actions form { display: flex; margin: 0; }
.admin-trash-action, .admin-trash-actions .admin-image-delete { display: inline-grid; place-items: center; flex: 0 0 auto; width: 31px; min-width: 31px; height: 31px; min-height: 31px; margin: 0; padding: 0; border-radius: 7px; }
.admin-trash-action { border: 1px solid rgba(243,173,77,.42); color: #f3ad4d; background: rgba(243,173,77,.055); cursor: pointer; text-decoration: none; }
.admin-trash-action:hover { background: rgba(243,173,77,.15); }
.admin-trash-action svg, .admin-trash-actions .admin-image-delete svg { width: 14px; height: 14px; }
.admin-cleanup-progress { position: fixed; z-index: 90; inset-inline-end: 18px; bottom: 16px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: min(370px, calc(100vw - 36px)); padding: 10px 12px; border: 1px solid rgba(243,173,77,.4); border-radius: 10px; background: #151a23; box-shadow: 0 14px 35px rgba(0,0,0,.42); color: var(--muted-2); font-size: 11px; }
.admin-cleanup-progress svg { width: 17px; height: 17px; color: #f3ad4d; animation: admin-spin 1s linear infinite; }
.admin-cleanup-progress b { color: #f3ad4d; }
@keyframes admin-spin { to { transform: rotate(360deg); } }
.admin-members-panel .section-heading { gap: 8px; }
.admin-members-total { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 0; color: #f3ad4d; font-size: 12px; }
.admin-members-total svg { width: 15px; height: 15px; }
.admin-members-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; margin-inline-start: auto; color: var(--muted); font-size: 11px; }
.admin-members-sort > i { width: 14px; height: 14px; color: #f3ad4d; }
.admin-members-sort label { color: var(--muted-2); font-weight: 700; white-space: nowrap; }
.admin-members-sort select { min-width: 142px; min-height: 31px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #111720; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.admin-members-sort select:hover, .admin-members-sort select:focus-visible { border-color: #c77a23; }
.admin-member-list { display: grid; gap: 9px; }
.admin-member-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #11151e; }
.admin-member-card.is-inactive { opacity: .6; }
.admin-member-ident { display: flex; align-items: center; min-width: 0; gap: 9px; }
.admin-member-ident > img, .admin-member-ident > svg { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid #3b4554; border-radius: 50%; object-fit: cover; color: #f3ad4d; padding: 7px; box-sizing: border-box; }
.admin-member-ident > span { display: grid; min-width: 0; gap: 2px; }
.admin-member-name-line { display: flex; align-items: baseline; min-width: 0; gap: 6px; }
.admin-member-name-line strong { flex: 0 1 auto; min-width: 0; }
.admin-member-ident strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-ident small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.admin-member-ident .admin-member-last-login { flex: 0 0 auto; color: #7f8997; font-size: 9px; font-weight: 500; direction: rtl; }
.admin-member-ident > b { margin-inline-start: auto; padding: 3px 6px; border-radius: 999px; background: rgba(38, 203, 133, .12); color: #68dcb0; font-size: 9px; white-space: nowrap; }
.admin-member-ident > b.is-inactive { color: #a1aab7; background: rgba(143,153,168,.11); }
.admin-member-stats { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 6px 13px; color: var(--muted); font-size: 11px; }
.admin-member-stats span { display: inline-flex; align-items: center; gap: 5px; }
.admin-member-stats svg { width: 13px; height: 13px; color: #f3ad4d; }
.admin-member-actions { display: flex; align-items: center; grid-row: 1; grid-column: 2; gap: 6px; }
.admin-member-actions > .ghost-action, .admin-member-actions summary, .admin-member-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 33px; padding: 0 9px; border-radius: 7px; font: inherit; font-size: 11px; white-space: nowrap; }
.admin-member-actions details { position: relative; }
.admin-member-actions summary { list-style: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.admin-member-actions summary::-webkit-details-marker { display: none; }
.admin-member-actions details[open] > summary { border-color: #d68120; color: #f3ad4d; }
.admin-member-actions details > form { position: absolute; z-index: 4; inset-inline-end: 0; top: calc(100% + 6px); display: grid; width: 215px; gap: 8px; padding: 10px; border: 1px solid #354052; border-radius: 9px; background: #151a24; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.admin-member-actions details label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.admin-member-actions details select { min-height: 33px; border: 1px solid var(--line); border-radius: 6px; background: #0d1119; color: var(--text); padding-inline: 7px; font: inherit; font-size: 11px; }
.admin-member-actions .admin-member-active { display: inline-flex; grid-template-columns: auto auto; align-items: center; gap: 6px; }
.admin-member-actions .primary-action { width: 100%; }

/* One rule for every image service: the first work button is compact and
   centered.  Download/output controls have their own result layouts. */
.image-upload-workbench .image-upload-submit,
.image-converter-workbench .image-converter-submit,
.image-compressor-workbench .image-compressor-submit,
.image-cropper-workbench .image-cropper-submit,
.image-editor-workbench .image-editor-submit,
.image-metadata-workbench [data-metadata-submit],
.image-resizer-workbench [data-resizer-submit],
.image-watermark-workbench [data-watermark-submit],
.animated-image-workbench [data-animated-generate],
.collage-workbench [data-collage-generate],
.story-workbench [data-story-generate] {
    width: fit-content !important;
    max-width: 100%;
    justify-self: center !important;
    align-self: center;
    margin-inline: auto !important;
}

/* All image-service pickers use the same compact upload field.  Individual
   tools may add previews after selection, but their initial chooser never
   grows into a different-sized panel. */
.tool-workbench:not(.shared-file-upload-workbench) .file-picker.image-dropzone,
.animated-image-picker,
.collage-preview-picker,
.story-picker {
    box-sizing: border-box;
    width: min(100%, 520px);
    min-height: 74px !important;
    padding: 12px 14px;
    align-content: initial;
    justify-self: center;
    margin-inline: auto;
}

/* Animated-image settings appear after the images are selected: one label and
   one styled select for each setting. */
.animated-image-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
}
.animated-select-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}
.animated-select-field > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
.animated-select-field svg { width: 14px; height: 14px; color: var(--orange-2); }
.animated-select-field select {
    width: 100%;
    min-height: 40px;
    padding: 0 10px 0 30px;
    border: 1px solid rgba(60, 71, 91, .92);
    border-radius: 9px;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text);
    background-color: rgba(8, 11, 17, .88);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f4a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 14px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}
html[dir='ltr'] .animated-select-field select { padding: 0 30px 0 10px; background-position: right 10px center; }
.animated-select-field select:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244, 124, 32, .12); }

/* These animated-tool sections use grid/flex display rules, so explicitly
   preserve the native hidden state until the user selects valid images. */
.animated-image-options[hidden],
.animated-image-output-panel[hidden],
.animated-image-result[hidden],
.animated-image-panel > .compressor-note[hidden],
.animated-image-panel > [data-animated-generate][hidden],
.animated-image-output-panel > [hidden] { display: none !important; }

/* Desktop PDF pickers use the same compact chooser as the shared file tools. */
@media (min-width: 621px) {
    .pdf-dropzone.file-picker {
        box-sizing: border-box;
        width: min(100%, 520px);
        min-height: 74px;
        padding: 12px 14px;
        justify-self: center;
        margin-inline: auto;
    }
}

/* Animated-image settings: one calm control strip, not cards inside cards. */
.animated-image-options {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 10px;
    padding: 0;
}
.animated-choice-group {
    flex: 0 1 auto;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.animated-choice-title {
    justify-content: center;
    white-space: nowrap;
    font-size: .76rem;
}
.animated-choice-list {
    display: flex;
    width: fit-content;
    min-height: 0;
    padding: 3px;
    border-color: rgba(41, 50, 66, .82);
    border-radius: 11px;
    background: rgba(7, 10, 16, .72);
}
.animated-choice-list button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 4px 7px;
    font-size: .72rem;
}
.animated-choice-group:first-child .animated-choice-list button { font-size: .66rem; }
.animated-choice-group:first-child .animated-choice-list button small { font-size: .56rem; }

@media (max-width: 620px) {
    .animated-image-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .animated-choice-group { display: grid; width: auto; gap: 9px; }
    .animated-choice-title { justify-content: flex-start; font-size: .88rem; }
    .animated-choice-list { display: grid; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; padding: 5px; }
    .animated-choice-group:first-child .animated-choice-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .animated-choice-list button { min-width: 0; min-height: 42px; padding: 5px 4px; font-size: .78rem; }
    .animated-choice-group:first-child .animated-choice-list button { font-size: .72rem; }
    .animated-choice-group:first-child .animated-choice-list button small { font-size: .62rem; }
}
.admin-member-delete { border: 1px solid rgba(238, 91, 91, .3); background: rgba(238, 91, 91, .08); color: #ef8585; cursor: pointer; }
.admin-member-delete:hover { background: rgba(238, 91, 91, .17); }
.admin-member-actions svg { width: 14px; height: 14px; }
.admin-member-files { display: grid; gap: 9px; padding: 11px; border: 1px solid rgba(243, 173, 77, .4); border-radius: 10px; background: rgba(243, 173, 77, .04); }
.admin-member-files > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-member-files header > span { display: grid; gap: 2px; min-width: 0; }
.admin-member-files header strong { color: var(--text); font-size: 13px; }
.admin-member-files header small { color: var(--muted); font-size: 10px; direction: ltr; }
.admin-member-file-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 6px; }
.admin-member-file-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: inherit; text-decoration: none; }
.admin-member-file-list a:hover { border-color: #c77a23; }
.admin-member-file-list a > svg { width: 15px; height: 15px; color: #f3ad4d; }
.admin-member-file-list span { display: grid; min-width: 0; gap: 2px; }
.admin-member-file-list strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-file-list small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .admin-deletion-tabs { width: 100%; }
    .admin-deletion-tabs button { flex: 1; min-width: 0; padding-inline: 6px; }
    .admin-content-tabs { order: initial; width: 100%; margin: -2px 0 2px; overflow-x: auto; scrollbar-width: none; }
    .admin-content-tabs::-webkit-scrollbar { display: none; }
    .admin-content-tabs a { flex: 1 0 auto; padding-inline: 8px; }
    .admin-cleanup-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .admin-cleanup-controls label { min-width: 0; }
    .admin-cleanup-controls [data-cleanup-plan-wrap] { grid-column: 1 / -1; }
    .admin-cleanup-age-label { padding-inline-start: 10px; }
    .admin-cleanup-controls select { min-width: 0; width: 100%; }
    .admin-trash-list article { grid-template-columns: 16px minmax(0,1fr) auto; gap: 6px; padding: 7px; }
    .admin-trash-actions { gap: 3px; }
    .admin-trash-action, .admin-trash-actions .admin-image-delete { width: 29px; min-width: 29px; height: 29px; min-height: 29px; }
    .admin-cleanup-progress { inset-inline-end: 8px; bottom: 8px; width: calc(100vw - 63px); }
    .admin-members-panel .section-heading { flex-wrap: wrap; gap: 6px; }
    .admin-members-sort { width: 100%; margin-inline-start: 0; }
    .admin-members-sort select { flex: 1; min-width: 0; }
    .admin-member-card { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
    .admin-member-actions { grid-row: auto; grid-column: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-member-actions > .ghost-action, .admin-member-actions summary, .admin-member-actions button { width: 100%; min-width: 0; padding-inline: 5px; font-size: 10px; }
    .admin-member-actions details > form { inset-inline: 0 auto; width: min(230px, calc(100vw - 28px)); }
    .admin-member-stats { gap: 5px 9px; font-size: 10px; }
    .admin-member-file-list { grid-template-columns: 1fr; }
    .admin-member-files > header { align-items: flex-start; }
    .admin-member-files > header .ghost-action { min-height: 31px; padding-inline: 7px; font-size: 10px; }
}

@media (max-width: 620px) {
    .header-upload-toggle { width: 34px; min-height: 34px; border-radius: 8px; }
    .header-upload-toggle svg { width: 15px; height: 15px; }
    .header-upload-options { min-width: 150px; inset-block-start: calc(100% + 6px); padding: 5px; border-radius: 10px; }
    .header-upload-options a { min-height: 43px; padding-inline: 10px; gap: 8px; font-size: 11px; }
    .header-upload-options svg { width: 15px; height: 15px; }
    .account-language-section { width: calc(100% + 8px); box-sizing: border-box; margin-inline: -4px; gap: 6px; padding: 7px; border-radius: 10px; }
    .account-language-section > strong { gap: 4px; font-size: 10px; }
    .account-language-section > strong svg { width: 13px; height: 13px; }
    .account-language-section form { gap: 2px; padding: 2px; }
    .account-language-section button { min-width: 58px; min-height: 27px; padding-inline: 7px; font-size: 9.5px; }
}

/* Clicker landing page */
.clicker-home {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 18px;
}

.clicker-hero,
.clicker-account-card,
.clicker-how {
    border: 1px solid rgba(215, 169, 77, .22);
    background: linear-gradient(145deg, rgba(21, 25, 34, .97), rgba(10, 12, 18, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.clicker-hero {
    position: relative;
    isolation: isolate;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 520px;
    overflow: hidden;
    border-radius: 18px;
}

.clicker-hero::before {
    position: absolute;
    z-index: -1;
    inset: -30% auto auto -8%;
    width: 420px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 124, 32, .18), transparent 68%);
    content: "";
    pointer-events: none;
}

.clicker-hero-copy {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-height: 520px;
    min-width: 0;
    padding: clamp(34px, 5vw, 68px);
}

.clicker-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: var(--orange-2);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.clicker-kicker svg { width: 17px; height: 17px; }

.clicker-hero-copy h1 {
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--text);
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.2;
    letter-spacing: -.035em;
    text-wrap: balance;
}

html[dir="rtl"] .clicker-hero-copy h1 { letter-spacing: -.015em; line-height: 1.4; }

html[dir="ltr"] .clicker-hero-copy h1 {
    max-width: none;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.12;
}

html[dir="ltr"] .clicker-hero-copy h1 span {
    display: block;
    white-space: nowrap;
}

.clicker-hero-copy > p {
    max-width: 48ch;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: clamp(.9rem, 1.35vw, 1.05rem);
    line-height: 1.9;
}

.clicker-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.clicker-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(215, 169, 77, .18);
    border-radius: 999px;
    color: #d8d0c1;
    background: rgba(255, 255, 255, .025);
    font-size: .72rem;
    white-space: nowrap;
}

.clicker-hero-points svg { width: 14px; height: 14px; color: var(--gold); }

.clicker-browser-support {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    max-width: 500px;
    margin-top: 14px;
}

.clicker-browser-support > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 7px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 11px;
    border: 1px solid rgba(215, 169, 77, .16);
    border-radius: 9px;
    color: var(--muted);
    background: rgba(255, 255, 255, .022);
}

.clicker-browser-support > span > svg {
    grid-row: 1 / 3;
    width: 19px;
    height: 19px;
    color: var(--gold);
}

.clicker-browser-support > span > b { color: var(--text); font-size: .68rem; }
.clicker-browser-support > span > small { overflow: hidden; color: var(--muted-2); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.clicker-browser-support > span.is-enabled { border-color: rgba(63, 202, 128, .28); background: rgba(40, 174, 103, .06); }
.clicker-browser-support > span.is-enabled > svg { color: #f7b73b; }

.clicker-browser-support > span.is-enabled > small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5edb99;
    font-weight: 800;
}

.clicker-browser-support > span.is-enabled > small svg { width: 11px; height: 11px; }

.clicker-hero-actions,
.clicker-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
}

.clicker-primary-action,
.clicker-secondary-action,
.clicker-account-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 800;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.clicker-primary-action {
    border: 1px solid #ff9d42;
    color: #120b04;
    background: linear-gradient(135deg, #ffad55, #f47c20);
    box-shadow: 0 10px 28px rgba(244, 124, 32, .22);
}

.clicker-secondary-action,
.clicker-account-actions a {
    border: 1px solid rgba(215, 169, 77, .26);
    color: var(--text);
    background: rgba(255, 255, 255, .035);
}

.clicker-primary-action:hover,
.clicker-secondary-action:hover,
.clicker-account-actions a:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 157, 66, .8);
}

.clicker-primary-action svg,
.clicker-secondary-action svg,
.clicker-account-actions svg { width: 16px; height: 16px; }

.clicker-hero-visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

.clicker-hero-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 10, 15, .96) 0, rgba(8, 10, 15, .82) 38%, rgba(8, 10, 15, .2) 78%), linear-gradient(0deg, rgba(8, 9, 13, .7), transparent 48%);
    content: "";
    pointer-events: none;
}

html[dir="rtl"] .clicker-hero-visual::after {
    background: linear-gradient(270deg, rgba(8, 10, 15, .96) 0, rgba(8, 10, 15, .82) 38%, rgba(8, 10, 15, .2) 78%), linear-gradient(0deg, rgba(8, 9, 13, .7), transparent 48%);
}

.clicker-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html[dir="rtl"] .clicker-hero-visual img { transform: scaleX(-1); }

.clicker-hero-visual figcaption {
    position: absolute;
    z-index: 1;
    inset-inline-end: 20px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 157, 66, .3);
    border-radius: 9px;
    color: #efe7d8;
    background: rgba(10, 12, 17, .74);
    backdrop-filter: blur(10px);
    font-size: .69rem;
}

.clicker-hero-visual figcaption svg { width: 14px; height: 14px; color: var(--orange-2); }

.clicker-account-card,
.clicker-how {
    border-radius: 14px;
    padding: 24px;
}

.clicker-account-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clicker-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(244, 124, 32, .35);
    border-radius: 11px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .09);
}

.clicker-section-icon svg { width: 20px; height: 20px; }
.clicker-account-heading > div { display: grid; gap: 2px; }
.clicker-account-heading span,
.clicker-how > header span { color: var(--orange-2); font-size: .67rem; font-weight: 800; }
.clicker-account-heading h2,
.clicker-how h2 { margin: 0; color: var(--text); font-size: 1.08rem; }

.clicker-plan-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid rgba(215, 169, 77, .18);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
}

.clicker-plan-summary > div { display: grid; gap: 5px; }
.clicker-plan-summary small { color: var(--muted-2); font-size: .65rem; }
.clicker-plan-summary strong { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: .92rem; }
.clicker-plan-summary strong svg { width: 16px; height: 16px; color: var(--gold); }

.clicker-plan-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #58d89a;
    font-size: .67rem;
    font-weight: 800;
}

.clicker-plan-status svg { width: 14px; height: 14px; }
.clicker-plan-status.is-inactive { color: #8f99a8; }
.clicker-account-card > p { margin: 16px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.clicker-account-actions { margin-top: 18px; }
.clicker-account-actions a { flex: 1 1 120px; min-height: 40px; padding-inline: 12px; font-size: .68rem; }

.clicker-how > header { display: grid; gap: 4px; margin-bottom: 18px; }
.clicker-step-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

.clicker-step-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 36px 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 11px;
    min-width: 0;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(215, 169, 77, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .022);
}

.clicker-step-grid article > b {
    position: static;
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(215, 169, 77, .18);
    border-radius: 9px;
    color: rgba(215, 169, 77, .72);
    background: rgba(215, 169, 77, .045);
    font-size: .72rem;
    line-height: 1;
}

.clicker-step-grid article > svg { grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px; color: var(--orange-2); }
.clicker-step-grid h3 { grid-column: 3; grid-row: 1; margin: 0; color: var(--text); font-size: .83rem; }
.clicker-step-grid p { grid-column: 3; grid-row: 2; margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.7; }

@container site-content (max-width: 900px) {
    .clicker-home { grid-template-columns: 1fr; }
    .clicker-hero,
    .clicker-hero-copy { min-height: 500px; }
    .clicker-hero-copy { width: 100%; padding: 38px; }
    .clicker-hero-copy h1 { max-width: none; font-size: clamp(1.9rem, 5vw, 2.75rem); }
    html[dir="ltr"] .clicker-hero-copy h1 { max-width: none; font-size: clamp(1.9rem, 5vw, 2.75rem); }
    .clicker-hero-visual { min-height: 100%; }
    .clicker-account-card,
    .clicker-how { grid-column: 1; }
}

@media (max-width: 620px) {
    .clicker-home { gap: 10px; }
    .clicker-hero,
    .clicker-hero-copy { min-height: 560px; }
    .clicker-hero { border-radius: 12px; }
    .clicker-hero-copy { width: 100%; padding: 26px 18px 24px; }
    .clicker-hero-copy h1 { max-width: none; font-size: clamp(1.65rem, 7.5vw, 2.15rem); }
    html[dir="ltr"] .clicker-hero-copy h1 { max-width: none; font-size: clamp(1.55rem, 7vw, 2.05rem); }
    html[dir="rtl"] .clicker-hero-copy h1 { line-height: 1.42; }
    .clicker-hero-copy > p { margin-top: 12px; font-size: .75rem; line-height: 1.8; }
    .clicker-hero-points { gap: 5px; margin-top: 17px; }
    .clicker-hero-points span { min-height: 29px; padding-inline: 8px; font-size: .59rem; }
    .clicker-hero-points svg { width: 12px; height: 12px; }
    .clicker-browser-support { grid-template-columns: 1fr; margin-top: 11px; }
    .clicker-browser-support > span { min-height: 42px; padding: 7px 9px; }
    .clicker-browser-support > span > svg { width: 17px; height: 17px; }
    .clicker-hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 20px; }
    .clicker-primary-action,
    .clicker-secondary-action { min-height: 40px; padding-inline: 8px; font-size: .65rem; }
    .clicker-hero-visual { min-height: 100%; }
    .clicker-hero-visual::after,
    html[dir="rtl"] .clicker-hero-visual::after { background: linear-gradient(0deg, rgba(8, 9, 13, .96) 0, rgba(8, 9, 13, .76) 62%, rgba(8, 9, 13, .34) 100%); }
    .clicker-hero-visual figcaption { inset-inline: 10px; bottom: 10px; justify-content: center; font-size: .59rem; }
    .clicker-account-card,
    .clicker-how { padding: 17px 14px; border-radius: 11px; }
    .clicker-step-grid { grid-template-columns: 1fr; gap: 7px; }
    .clicker-step-grid article { grid-template-columns: 32px 21px minmax(0, 1fr); gap: 2px 8px; padding: 12px; }
    .clicker-step-grid article > b { width: 30px; height: 30px; }
    .clicker-step-grid article > svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .clicker-primary-action,
    .clicker-secondary-action,
    .clicker-account-actions a { transition: none; }
}

/* Duration-only clicker plans */
.duration-plans-page { max-width: 1180px; }
.duration-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.duration-plan-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 17px;
    min-width: 0;
    min-height: 285px;
    padding: 21px;
    overflow: hidden;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(24, 29, 39, .98), rgba(12, 14, 20, .99));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.duration-plan-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: rgba(244, 124, 32, .48);
    content: "";
}

.duration-plan-card.is-recommended {
    border-color: rgba(244, 124, 32, .68);
    background: linear-gradient(155deg, rgba(54, 37, 20, .48), rgba(13, 15, 22, .99) 62%);
}

.duration-plan-card.is-recommended::before { height: 3px; background: var(--orange); }
.duration-plan-card.is-lifetime { border-color: rgba(215, 169, 77, .48); }
.duration-plan-card.is-current { box-shadow: inset 0 0 0 1px rgba(56, 211, 147, .28), 0 18px 44px rgba(0, 0, 0, .24); }

.duration-plan-card > header { display: flex; align-items: center; gap: 11px; }
.duration-plan-card > header > div { display: grid; gap: 3px; min-width: 0; }
.duration-plan-card h2 { margin: 0; color: var(--text); font-size: 1rem; }
.duration-plan-card header small { color: var(--muted); font-size: .68rem; }

.duration-plan-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(244, 124, 32, .32);
    border-radius: 10px;
    color: var(--orange-2);
    background: rgba(244, 124, 32, .08);
}

.duration-plan-icon svg { width: 19px; height: 19px; }
.duration-plan-price { display: flex; align-items: flex-end; gap: 6px; align-self: center; direction: ltr; }
.duration-plan-price strong { color: var(--text); font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1; letter-spacing: -.045em; }
.duration-plan-price strong small { margin-inline-end: 2px; color: var(--orange-2); font-size: 1rem; }
.duration-plan-price > span { padding-bottom: 4px; color: var(--muted-2); font-size: .62rem; font-weight: 800; }
.duration-plan-badges { display: flex; flex-wrap: wrap; align-items: center; min-height: 26px; gap: 6px; }

.duration-plan-badges span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid rgba(215, 169, 77, .2);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(215, 169, 77, .07);
    font-size: .59rem;
    font-weight: 800;
}

.duration-plan-badges span.is-current { color: #65dea9; border-color: rgba(56, 211, 147, .24); background: rgba(56, 211, 147, .07); }
.duration-plan-badges svg { width: 12px; height: 12px; }
.duration-plan-card .plan-public-action { width: 100%; }

.admin-plans-panel [data-plan-tab="create"],
.admin-plans-panel [data-plan-panel="create"],
.admin-plans-panel .admin-plan-extra-features,
.admin-plans-panel .admin-plan-editor .admin-plan-feature-fields > label { display: none !important; }

.admin-plans-panel .admin-plan-editor .admin-plan-feature-fields > label:nth-child(4),
.admin-plans-panel .admin-plan-editor .admin-plan-feature-fields > label:nth-child(7) { display: grid !important; }

@container site-content (max-width: 920px) {
    .duration-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .duration-plan-grid { grid-template-columns: 1fr; gap: 8px; }
    .duration-plan-card { min-height: 0; padding: 16px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
    .duration-plan-card > header { grid-column: 1; }
    .duration-plan-price { grid-column: 2; grid-row: 1; align-self: center; }
    .duration-plan-price strong { font-size: 1.75rem; }
    .duration-plan-badges { grid-column: 1 / -1; min-height: 0; }
    .duration-plan-card .plan-public-action { grid-column: 1 / -1; }
}