:root {
    --ink: #1b2539;
    --muted: #6f7c90;
    --line: #e5eaf1;
    --accent: #6558e8;
    --bs-primary: #6558e8;
    --bs-primary-rgb: 101, 88, 232;
    --surface: #f5f7fb;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: #4d3ed1;
}
button,
input,
select,
textarea {
    font: inherit;
}
:focus-visible {
    outline: 3px solid #aa9cff;
    outline-offset: 4px;
}
.skip-link {
    position: fixed;
    top: -80px;
    left: 16px;
    z-index: 100;
    background: white;
    padding: 12px;
}
.skip-link:focus {
    top: 12px;
}
.app-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: 248px;
    background: #141b2d;
    color: #a7b0c6;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
    z-index: 20;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.6px;
    padding: 0 10px;
}
.brand:hover {
    color: white;
}
.brand small {
    display: block;
    color: #9ba5bd;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 1px;
}
.brand-mark {
    width: 39px;
    height: 41px;
    background: #7464f2;
    border-radius: 12px;
    display: grid;
    place-content: center;
    font-size: 33px;
    line-height: 1;
    position: relative;
    padding-bottom: 5px;
}
.brand-mark span {
    color: #b7f2d5;
    position: absolute;
    right: 6px;
    bottom: 1px;
}
.nav-caption {
    font-size: 9px;
    letter-spacing: 1.8px;
    margin: 48px 12px 14px;
    color: #8793ae;
}
.side-nav {
    display: grid;
    gap: 7px;
}
.side-nav a {
    padding: 12px 14px;
    color: #abb5cb;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 9px;
    font-weight: 500;
}
.side-nav a:hover {
    background: #202941;
    color: white;
}
.side-nav a.active {
    background: #7160ee;
    color: white;
    box-shadow: 0 6px 18px #0002;
}
.nav-symbol {
    width: 20px;
    text-align: center;
    font-size: 21px;
    line-height: 1;
}
.sidebar-note {
    border: 1px solid #303950;
    border-radius: 12px;
    margin: 44px 4px 24px;
    padding: 19px 17px;
    background: linear-gradient(135deg, #232c44, #1a2236);
}
.note-line {
    width: 23px;
    height: 3px;
    background: #ad9bff;
    display: block;
    margin-bottom: 16px;
}
.sidebar-note strong {
    color: #eef0ff;
    font-size: 13px;
}
.sidebar-note p {
    font-size: 12px;
    color: #b1bbd0;
    margin: 9px 0 17px;
}
.sidebar-note a {
    font-size: 12px;
    color: #c1b7ff;
    display: flex;
    justify-content: space-between;
}
.sidebar-footer {
    margin-top: auto;
    padding: 12px 8px 0;
    font-size: 10px;
    color: #94a1ba;
    display: flex;
    gap: 8px;
    align-items: center;
}
.live-dot {
    width: 6px;
    height: 6px;
    background: #78d8af;
    border-radius: 50%;
    display: inline-block;
}
.workspace {
    margin-left: 248px;
    width: calc(100% - 248px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.topbar {
    min-height: 85px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 42px;
}
.breadcrumbs {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 13px;
    align-items: center;
    min-width: 0;
}
.breadcrumbs strong {
    font-weight: 500;
    color: #435069;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}
.breadcrumbs > span {
    color: #c5ccd7;
}
.account-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.avatar {
    background: #eeebff;
    color: #6552cf;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}
.account-name {
    font-size: 12px;
    max-width: 200px;
    overflow-wrap: anywhere;
}
.account-name small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}
.logout-button {
    border: 0;
    background: none;
    font-size: 11px;
    color: var(--muted);
    padding: 7px 0;
}
.logout-button:hover {
    color: var(--accent);
}
.account-register {
    font-size: 12px;
    color: #5a667b;
}
.workspace-content {
    padding: 38px 42px 50px;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}
.workspace-footer {
    padding: 20px 42px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    color: #8792a5;
    font-size: 10px;
    letter-spacing: 0.3px;
}
.workspace-footer > span:first-child {
    font-weight: 700;
}
h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.25;
    margin: 7px 0 10px;
}
h2,
h3 {
    letter-spacing: -0.4px;
}
.eyebrow {
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 700;
    color: var(--muted);
}
.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
}
.page-heading p {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
}
.page-heading .btn {
    flex-shrink: 0;
}
.btn {
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 11px 18px;
    transition:
        background 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: #5547d0;
    --bs-btn-hover-border-color: #5547d0;
    --bs-btn-active-bg: #493bbf;
    --bs-btn-active-border-color: #493bbf;
    box-shadow: 0 4px 10px #6558e821;
}
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: #ded8ff;
    --bs-btn-hover-bg: #f0edff;
    --bs-btn-hover-color: #5142c8;
    --bs-btn-hover-border-color: #bdb2ff;
    --bs-btn-active-bg: #6558e8;
    --bs-btn-active-border-color: #6558e8;
}
.btn-outline-secondary {
    --bs-btn-color: #59677d;
    --bs-btn-border-color: #dde3ec;
    --bs-btn-hover-bg: #f2f4f8;
    --bs-btn-hover-color: #25314a;
    --bs-btn-hover-border-color: #b8c2d1;
}
.btn-sm {
    padding: 7px 15px;
    font-size: 11px;
}
.plus-sign {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.catalog-banner {
    border: 1px solid #dfdaf8;
    border-radius: 16px;
    background: linear-gradient(110deg, #eeebfc 0%, #f1f0fd 65%, #e9f3fb 100%);
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
    overflow: hidden;
}
.catalog-banner h2 {
    font-size: 21px;
    font-weight: 700;
    margin: 7px 0;
}
.catalog-banner p {
    color: #768097;
    font-size: 12px;
    margin: 0;
    max-width: 510px;
}
.banner-visual {
    width: 140px;
    height: 100px;
    position: relative;
    flex-shrink: 0;
}
.mini-card {
    position: absolute;
    width: 70px;
    height: 90px;
    border: 3px solid #fff;
    border-radius: 13px;
    box-shadow: 0 12px 18px #6956ac20;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: white;
    font-weight: 700;
}
.mini-card:first-child {
    background: #a898e6;
    transform: rotate(-16deg);
    left: 11px;
    top: 4px;
}
.mini-card:last-child {
    background: #7464e9;
    transform: rotate(13deg);
    left: 61px;
    top: 0;
}
.play-triangle {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 19px solid #fff;
    margin-left: 5px;
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.section-heading h2 {
    font-size: 16px;
    font-weight: 650;
    margin: 0;
}
.section-heading > span {
    color: var(--muted);
    font-size: 11px;
}
.count-pill {
    font-size: 11px;
    padding: 3px 8px;
    background: #e9edf4;
    border-radius: 5px;
    margin-left: 7px;
    font-weight: 600;
    color: #67748b;
}
.playable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.playable-card {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: white;
    overflow: hidden;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.playable-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px #2734510b;
}
.playable-cover {
    height: 155px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ded9fa, #c5b9f1);
    color: #7160d4;
}
.cover-1 {
    background: linear-gradient(135deg, #d6ebed, #b7dbd6);
    color: #428e83;
}
.cover-2 {
    background: linear-gradient(135deg, #fbe6ca, #efc99f);
    color: #b2753f;
}
.cover-3 {
    background: linear-gradient(135deg, #d9e4fb, #b8cef3);
    color: #4e79bc;
}
.cover-4 {
    background: linear-gradient(135deg, #f2daea, #dfb8d7);
    color: #a26196;
}
.cover-5 {
    background: linear-gradient(135deg, #e5e9d1, #cdd6a5);
    color: #89934c;
}
.cover-geometry {
    position: relative;
    width: 72px;
    height: 82px;
    border-radius: 17px;
    border: 1px solid #ffffffa8;
    background: #ffffff59;
    transform: rotate(-12deg);
    box-shadow: 16px 13px 0 #ffffff35;
    display: grid;
    place-items: center;
}
.cover-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    flex: none;
    object-fit: contain;
    mask-image: linear-gradient(to right, transparent, #000 min(6px, 8%), #000 calc(100% - min(6px, 8%)), transparent),
        linear-gradient(to bottom, transparent, #000 min(4px, 8%), #000 calc(100% - min(4px, 8%)), transparent);
    mask-composite: intersect;
}
.logo-form-preview {
    display: block;
    max-width: 200px;
    max-height: 130px;
    margin-top: 12px;
    object-fit: contain;
}
.user-management-blocks {
    display: grid;
    gap: 24px;
}
.password-input-row {
    display: flex;
    gap: 8px;
    align-items: start;
}
.password-input-row .form-control { min-width: 0; }
.password-toggle { flex: none; }
.cover-geometry::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 20px solid currentColor;
    transform: rotate(12deg);
    margin-left: 5px;
}
.cover-code {
    position: absolute;
    left: 18px;
    bottom: 14px;
    font-size: 9px;
    letter-spacing: 1.4px;
    font-weight: 600;
}
.cover-date {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-size: 10px;
}
.request-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.list-controls, .list-pagination, .pagination-links {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}
.list-controls { margin: 18px 0 24px; }
.list-controls label { color: var(--muted); font-size: 12px; }
.list-controls .form-select {
    margin-top: 4px;
}
.list-controls select[name="type"] {
    min-width: 180px;
}
.list-controls select[name="sort"] {
    min-width: 250px;
}
.list-controls label {
    max-width: 100%;
}
.list-pagination { margin-top: 24px; align-items: center; justify-content: space-between; color: var(--muted); }
.pagination-links { align-items: center; gap: 6px; }
.request-feedback { padding: 18px; margin: 16px 0; border: 1px solid #f0d7ac; background: #fff8ec; border-radius: 10px; overflow-wrap: anywhere; }
.request-feedback p { margin: 8px 0 0; }
.request-actions .request-status-form { flex-wrap: wrap; }
.rejection-comment-field { flex-basis: 100%; }
.rejection-comment-field textarea { min-width: 240px; }
.status-Closed { background: #edf0f4; color: #657082; }
.admin-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.admin-navigation a {
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 600;
}
.admin-navigation a:hover {
    background: #ece9fc;
    color: var(--accent);
}
.admin-navigation a.active {
    background: var(--accent);
    color: #fff;
}
.admin-creatives-table .creative-text {
    white-space: normal;
    min-width: 200px;
    max-width: 360px;
    overflow-wrap: anywhere;
}
.buyers-table-wrapper {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 20px;
}
.buyers-table {
    margin: 0;
    font-size: 13px;
}
.buyers-table th,
.buyers-table td {
    padding: 16px 12px;
    white-space: nowrap;
}
.preview-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.cover-badge {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 9px;
}
.cover-code,
.cover-date,
.cover-badge {
    z-index: 1;
    background: #ffffffeb;
    border: 1px solid #ffffff80;
    border-radius: 5px;
    padding: 3px 7px;
    line-height: 1.4;
}
.cover-with-image .cover-code { left: 12px; bottom: 12px; }
.cover-with-image .cover-date { right: 12px; bottom: 12px; }
.creative-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.playable-body {
    padding: 20px;
}
.playable-body h3 {
    font-size: 17px;
    font-weight: 650;
    margin: 0 0 9px;
}
.playable-body h3 a {
    color: var(--ink);
}
.card-description {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    min-height: 39px;
    overflow-wrap: anywhere;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 10px;
    color: #8590a2;
    margin: 17px 0;
}
.card-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #edf0f5;
    padding-top: 14px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
}
.card-action > span {
    font-size: 18px;
}
.tag-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.tag {
    font-size: 9px;
    color: #707d91;
    background: #f3f5f9;
    border: 1px solid #e9edf3;
    border-radius: 4px;
    padding: 2px 7px;
}
.status-badge,
.visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    background: #f0edff;
    color: #7962c4;
    white-space: nowrap;
}
.status-New {
    background: #eef1f8;
    color: #6b7892;
}
.status-InProgress {
    background: #fff3da;
    color: #98702c;
}
.status-Completed {
    background: #e3f5ed;
    color: #368566;
}
.status-Rejected {
    background: #fce9e9;
    color: #b45c60;
}
.visibility-Private {
    background: #f4eaf8;
    color: #9566a6;
}
.visibility-Embargo {
    background: #fff2dc;
    color: #9d7836;
}
.visibility-Open {
    background: #e8f5ef;
    color: #438b6d;
}
.empty-state {
    background: white;
    border: 1px dashed #d8dfec;
    border-radius: 14px;
    text-align: center;
    padding: 54px 25px;
}
.empty-state-mark {
    width: 60px;
    height: 60px;
    background: #efecfc;
    color: #8776dd;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 0 auto 19px;
    font-size: 28px;
}
.empty-state h2 {
    font-size: 19px;
    font-weight: 650;
}
.empty-state p {
    max-width: 405px;
    margin: 10px auto 22px;
    color: var(--muted);
    font-size: 12px;
}
.card {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 3px 8px #27345102;
}
.description {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #69768b;
}
.request-card {
    padding: 25px 28px;
    margin-bottom: 16px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 13px;
}
.request-card-compact {
    position: relative;
    padding: 16px 22px;
    margin-bottom: 10px;
}
.request-card-compact h2 {
    overflow-wrap: anywhere;
}
.request-card-compact .request-card-top {
    margin-bottom: 8px;
}
.request-card-compact .request-meta {
    margin-bottom: 10px;
}
.request-unread-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
}
.request-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}
.request-card h2 {
    font-size: 17px;
    font-weight: 650;
    margin: 3px 0 0;
}
.request-number {
    font-size: 10px;
    color: #94a0b4;
    font-weight: 600;
    letter-spacing: 0.6px;
}
.request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: 11px;
    color: #8390a3;
    margin-bottom: 15px;
}
.request-bottom {
    border-top: 1px solid #edf0f5;
    padding-top: 15px;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.request-bottom > span {
    font-size: 11px;
    color: var(--muted);
}
.request-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.request-actions form {
    display: flex;
    gap: 8px;
}
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 25px;
    align-items: start;
}
.form-card {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.form-section + .form-section {
    border-top: 1px solid var(--line);
    margin-top: 26px;
    padding-top: 25px;
}
.form-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.step-number {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    background: #f0edff;
    color: #7867d1;
    font-size: 11px;
    font-weight: 650;
    border-radius: 7px;
}
.form-section-heading h2 {
    font-size: 15px;
    font-weight: 650;
    margin: 0;
}
.form-label {
    font-size: 12px;
    font-weight: 600;
    color: #48556b;
    margin-bottom: 8px;
}
.form-control,
.form-select {
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-size: 13px;
    padding: 11px 13px;
    color: #3d4960;
    background-color: #fff;
}
.form-select {
    padding-right: 38px;
}
.form-control::placeholder {
    color: #a4adbc;
    font-size: 12px;
}
.form-control:focus,
.form-select:focus {
    border-color: #a699ef;
    box-shadow: 0 0 0 3px #7360e610;
}
.form-text,
.field-help {
    font-size: 11px;
    color: #8691a3;
    margin-top: 8px;
}
.form-footer {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.form-footer > a {
    color: var(--muted);
    font-size: 12px;
}
.info-panel {
    background: #eeebfb;
    border: 1px solid #e4dff5;
    border-radius: 14px;
    padding: 24px;
    color: #6d6492;
}
.info-panel h2 {
    font-size: 15px;
    font-weight: 650;
    color: #504674;
    margin: 0 0 14px;
}
.info-panel h3 {
    font-size: 12px;
    font-weight: 650;
    margin: 19px 0 6px;
}
.info-panel p {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.8;
}
.info-panel .small-note {
    border-top: 1px solid #dcd5ef;
    padding-top: 16px;
    margin-top: 20px;
    font-size: 11px;
}
.back-link {
    display: inline-flex;
    gap: 7px;
    color: #8390a3;
    font-size: 11px;
    margin-bottom: 18px;
}
.detail-heading {
    margin-bottom: 25px;
}
.detail-heading h1 {
    margin: 12px 0;
}
.detail-metadata {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: #8490a2;
    font-size: 11px;
}
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 26px;
    align-items: start;
}
.preview-panel {
    background: #e9edf4;
    border: 1px solid #e0e6f0;
    border-radius: 15px;
    overflow: hidden;
}
.preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 11px;
    color: #718097;
    background: #f9fafc;
    border-bottom: 1px solid #e0e6f0;
}
.window-dots {
    display: flex;
    gap: 5px;
}
.window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d3d9e4;
}
.preview-stage {
    padding: 25px;
    display: flex;
    justify-content: center;
    background: radial-gradient(#cbd3e1 0.7px, transparent 0.7px);
    background-size: 14px 14px;
}
.playable-preview {
    width: 100%;
    max-width: 360px;
    height: 540px;
    border: 7px solid #283249;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 15px 28px #33415d1c;
}
.preview-caption {
    font-size: 11px;
    color: #8390a2;
    line-height: 1.8;
    margin-top: 14px;
}
.download-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 25px;
}
.download-card h2 {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 7px;
}
.download-card > p {
    color: var(--muted);
    font-size: 12px;
}
.download-card .form-section-heading {
    margin-bottom: 16px;
}
.download-card .btn {
    width: 100%;
}
.detail-description {
    background: white;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 24px;
    margin-top: 24px;
}
.detail-description h2 {
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 14px;
}
.detail-description p {
    font-size: 13px;
    margin-bottom: 0;
}
.access-note {
    margin-top: 16px;
    padding: 14px 17px;
    background: #f1eefb;
    border-radius: 9px;
    color: #8271a9;
    font-size: 11px;
}
.identity-page:not(:has(.auth-intro)) .workspace-content {
    max-width: 1100px;
}
.identity-page .workspace-content:has(.auth-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 42px;
    align-items: center;
    padding-top: 55px;
    padding-bottom: 55px;
}
.auth-intro h2 {
    font-size: 34px;
    letter-spacing: -1.3px;
    line-height: 1.3;
    font-weight: 700;
    margin: 20px 0;
}
.auth-intro h2 span {
    color: #8774dc;
}
.auth-intro > p {
    color: var(--muted);
    font-size: 13px;
    max-width: 340px;
    line-height: 1.9;
}
.auth-art {
    height: 225px;
    position: relative;
    max-width: 340px;
    margin-top: 30px;
}
.art-orbit {
    width: 180px;
    height: 180px;
    border: 1px solid #dbd5f1;
    border-radius: 50%;
    position: absolute;
    left: 65px;
    top: 5px;
}
.art-orbit::after {
    content: "";
    position: absolute;
    inset: 20px -20px;
    border: 1px solid #e5e0f2;
    border-radius: 50%;
    transform: rotate(35deg);
}
.art-tile {
    width: 90px;
    height: 120px;
    border-radius: 15px;
    position: absolute;
    box-shadow: 0 15px 25px #7260a521;
}
.tile-one {
    background: #c3b7ed;
    transform: rotate(-19deg);
    left: 60px;
    top: 30px;
    border: 3px solid white;
}
.tile-two {
    background: linear-gradient(150deg, #9d8bed, #6853d6);
    transform: rotate(12deg);
    left: 140px;
    top: 50px;
    border: 3px solid white;
}
.art-play {
    position: absolute;
    left: 174px;
    top: 96px;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 21px solid white;
    transform: rotate(12deg);
}
.art-label {
    position: absolute;
    bottom: 12px;
    left: 105px;
    font-size: 9px;
    letter-spacing: 2.5px;
    color: #9b8abf;
}
.auth-content {
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 12px 40px #24345205;
    min-width: 0;
}
.auth-content h1 {
    font-size: 25px;
    margin-bottom: 25px;
}
.auth-content h2 {
    font-size: 15px;
    color: #6f7c90;
    line-height: 1.7;
}
.auth-content h3 {
    font-size: 15px;
}
.auth-content .row {
    display: block;
}
.auth-content .row > div {
    width: 100%;
    max-width: none;
}
.auth-content .row > div + div {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.auth-content .row > div + div p {
    font-size: 11px;
    color: #8792a4;
}
.auth-content .form-floating > label {
    font-size: 12px;
    color: #8390a2;
}
.auth-content .form-floating .form-control {
    font-size: 13px;
}
.auth-content section p {
    font-size: 12px;
}
.auth-content hr {
    color: #dfe5ee;
}
.auth-content .btn-lg {
    font-size: 13px;
}
.alert {
    border-radius: 10px;
    font-size: 12px;
}
.validation-summary-valid {
    display: none;
}
.auth-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin: -10px 0 28px;
}
.auth-switch {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin: 25px 0 0;
}
.auth-content .form-check-label {
    color: #6f7c90;
    font-size: 12px;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
@media (min-width: 1700px) {
    .playable-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1200px) {
    .sidebar {
        width: 218px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .workspace {
        margin-left: 218px;
        width: calc(100% - 218px);
    }
    .topbar {
        padding: 16px 28px;
    }
    .workspace-content {
        padding: 30px 28px 40px;
    }
    .workspace-footer {
        padding: 18px 28px;
    }
    .playable-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 18px;
    }
    .form-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 18px;
    }
    .auth-intro h2 {
        font-size: 28px;
    }
    .identity-page .workspace-content:has(.auth-intro) {
        gap: 24px;
    }
    .auth-content {
        padding: 23px;
    }
    .breadcrumbs {
        font-size: 11px;
        gap: 9px;
    }
    .account-name {
        max-width: 140px;
    }
}
@media (max-width: 980px) {
    .sidebar {
        width: 190px;
    }
    .workspace {
        margin-left: 190px;
        width: calc(100% - 190px);
    }
    .brand {
        font-size: 18px;
        padding: 0 3px;
    }
    .brand-mark {
        width: 32px;
        height: 36px;
        font-size: 29px;
    }
    .brand small {
        font-size: 7px;
    }
    .nav-caption {
        letter-spacing: 1px;
        font-size: 8px;
    }
    .side-nav a {
        font-size: 12px;
        padding: 11px;
    }
    .sidebar-note {
        padding: 15px 12px;
    }
    .sidebar-footer {
        font-size: 9px;
    }
    .breadcrumbs {
        display: none;
    }
    .topbar {
        justify-content: flex-end;
        min-height: 72px;
    }
    .form-layout,
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .info-panel {
        order: 1;
    }
    .detail-grid .download-card {
        max-width: none;
    }
    .identity-page .workspace-content:has(.auth-intro) {
        grid-template-columns: 1fr;
        max-width: 650px;
    }
    .auth-art {
        display: none;
    }
    .auth-intro h2 {
        font-size: 30px;
        margin: 12px 0;
    }
    .auth-intro > p {
        max-width: 100%;
    }
}
@media (max-width: 700px) {
    .app-shell {
        display: block;
    }
    .sidebar {
        width: 100%;
        position: static;
        padding: 17px 20px 12px;
        gap: 15px;
    }
    .brand {
        font-size: 19px;
        gap: 10px;
    }
    .brand small {
        font-size: 8px;
    }
    .nav-caption,
    .sidebar-note,
    .sidebar-footer {
        display: none;
    }
    .side-nav {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    .side-nav a {
        font-size: 11px;
        padding: 8px 10px;
        gap: 6px;
    }
    .nav-symbol {
        font-size: 17px;
        width: 16px;
    }
    .workspace {
        margin-left: 0;
        width: 100%;
    }
    .topbar {
        padding: 12px 20px;
        min-height: 64px;
    }
    .account-nav {
        gap: 15px;
    }
    .account-name {
        font-size: 11px;
        max-width: 220px;
    }
    .workspace-content {
        padding: 26px 20px 35px;
    }
    .page-heading {
        align-items: flex-start;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 23px;
    }
    h1 {
        font-size: 26px;
    }
    .page-heading .btn {
        padding: 10px 14px;
    }
    .catalog-banner {
        padding: 23px;
        gap: 12px;
        margin-bottom: 25px;
    }
    .catalog-banner h2 {
        font-size: 18px;
    }
    .catalog-banner p {
        font-size: 11px;
    }
    .banner-visual {
        width: 75px;
        height: 90px;
    }
    .mini-card {
        width: 51px;
        height: 67px;
        border-width: 2px;
    }
    .mini-card:first-child {
        left: -8px;
        top: 8px;
    }
    .mini-card:last-child {
        left: 22px;
        top: 5px;
    }
    .play-triangle {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }
    .workspace-footer {
        padding: 18px 20px;
        font-size: 9px;
        gap: 15px;
    }
    .request-card,
    .form-card {
        padding: 22px;
    }
    .form-footer {
        flex-wrap: wrap;
    }
    .preview-stage {
        padding: 20px;
    }
    .playable-preview {
        height: 500px;
    }
    .detail-metadata {
        gap: 8px 18px;
    }
    .auth-intro .eyebrow {
        font-size: 9px;
    }
    .auth-intro h2 {
        font-size: 27px;
    }
    .identity-page .workspace-content:has(.auth-intro) {
        padding-top: 25px;
    }
    .auth-content {
        padding: 23px;
    }
    .empty-state {
        padding: 35px 22px;
    }
}
@media (max-width: 440px) {
    .playable-grid {
        grid-template-columns: 1fr;
    }
    .section-heading > span {
        font-size: 10px;
    }
    .catalog-banner h2 {
        font-size: 16px;
    }
    .catalog-banner .eyebrow {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .banner-visual {
        display: none;
    }
    .request-card-top {
        flex-wrap: wrap;
    }
    .request-actions form {
        flex-wrap: wrap;
    }
    .request-actions .form-select {
        width: 100% !important;
    }
    .account-name {
        max-width: 190px;
    }
    .workspace-footer > span:last-child {
        max-width: 145px;
        text-align: right;
    }
    .playable-preview {
        height: 460px;
    }
    .preview-stage {
        padding: 15px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
    .btn:hover,
    .playable-card:hover {
        transform: none;
    }
}

.preview-controls {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: #f9fafc;
}
.preview-controls label {
    font-size: 11px;
    color: #718097;
}
.preview-controls input {
    width: 95px;
}
.preview-controls select {
    width: 155px;
}
.preview-controls .btn {
    font-size: 12px;
}
.preview-stage {
    overflow: hidden;
}
.preview-viewport {
    position: relative;
    flex: none;
    width: 374px;
    height: 654px;
}
.preview-viewport .playable-preview {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: content-box;
    max-width: none;
    width: 360px;
    height: 640px;
    transform-origin: top left;
    display: block;
}
.catalog-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.catalog-filter{padding:9px 17px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#657189;font-size:12px;font-weight:600}
.catalog-filter:hover{border-color:#bfb5f3;color:var(--accent)}
.catalog-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.playable-card{position:relative}
.favorite-form{position:absolute;top:12px;left:12px;z-index:2;margin:0}
.favorite-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #ffffffb3;border-radius:10px;background:#fffffff0;color:#59657a;cursor:pointer;box-shadow:0 2px 8px #25314a0a}
.favorite-button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.favorite-button:hover{background:#fff8df;color:#91620a}
.favorite-button.is-selected{background:#fff5ce;color:#946500;border-color:#f1d786}
.favorite-button.is-selected svg{fill:currentColor}
#custom-localization{margin:26px 0 0;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;min-width:0}
#custom-localization legend{float:none;width:auto;padding:0 8px;font-size:16px;font-weight:600}
.translation-field{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);min-width:0}
.translation-source{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;color:var(--muted);margin:0 0 8px}
.translation-field textarea{font-size:13px;min-height:90px;resize:vertical}

.geo-editor-header{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:24px;align-items:center}
.geo-editor-header .field-help{margin:0}
.translation-field .form-label{overflow-wrap:anywhere}
@media(max-width:700px){#custom-localization{padding:20px}.geo-editor-header,.translation-field{grid-template-columns:1fr;gap:10px}}
.feedback-scales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.feedback-form{max-width:950px}
.feedback-scales .field-help{margin:0 0 10px}
.feedback-admin-scales{display:flex;gap:20px;flex-wrap:wrap;margin:22px 0}
.feedback-admin-scales dt{font-size:11px;color:var(--muted);font-weight:500}
.feedback-admin-scales dd{font-size:17px;font-weight:600;margin:5px 0}
.feedback-reminder,.feedback-invitation{padding:20px 24px;margin-bottom:24px;border:1px solid #ded7f5;border-radius:12px;background:#f0edfc}
.feedback-reminder p,.feedback-invitation p{font-size:12px;color:#6f668b;margin:8px 0 14px}
.feedback-reminder form{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.feedback-scales{grid-template-columns:1fr}.feedback-reminder,.feedback-invitation{padding:18px}}
.feedback-dialog{width:min(900px,calc(100vw - 32px));max-height:90dvh;margin:auto;padding:0;border:1px solid #e3e0ef;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 24px 100px #080e3055;overflow:hidden}
.feedback-dialog[open]{display:flex;flex-direction:column}
.feedback-dialog::backdrop{background:#10182cb8;backdrop-filter:blur(4px)}
body:has(.feedback-dialog[open]){overflow:hidden}
.feedback-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line);flex-shrink:0}
.feedback-dialog-header h2{font-size:19px;font-weight:650;margin:0}
.feedback-dialog-close{border:0;background:#f3f2f8;color:#687187;font-size:26px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer}
#feedback-dialog-body{overflow-y:auto;overscroll-behavior:contain;padding:24px 28px;min-height:100px}
.feedback-dialog .feedback-form{border:0;padding:0;max-width:none;box-shadow:none}
.feedback-dialog-footer{padding:14px 28px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;flex-shrink:0}
.feedback-form-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.feedback-form-heading h2{font-size:20px;font-weight:650;overflow-wrap:anywhere}
.feedback-face{width:100px;position:relative;flex-shrink:0;padding-top:12px;text-align:center;color:#28374c}
.feedback-face small{display:block;font-size:10px;white-space:nowrap;color:var(--muted)}
.feedback-average{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e6e2ee;border-radius:20px;padding:2px 11px;min-width:48px;box-shadow:0 3px 9px #212d4812;font-size:17px;font-weight:700;line-height:1.4;color:#5542c5}
.face-circle{fill:#e9e8f0;transition:fill .18s}
.face-eye{fill:currentColor}.face-mouth{stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.feedback-face[data-mood=sad] .face-circle{fill:#f8b4af}
.feedback-face[data-mood=neutral] .face-circle{fill:#ffe29a}
.feedback-face[data-mood=happy] .face-circle{fill:#bce9bb}
.feedback-face[data-mood=great] .face-circle{fill:#8fddb1}
.feedback-face[data-mood=great] .face-mouth{fill:currentColor}
.feedback-download-context{padding:12px 14px;background:#f6f5fb;border-radius:8px}
.feedback-save-status{font-size:13px;margin:20px 0 0}
@media(max-width:700px){.feedback-dialog{width:calc(100vw - 16px);max-height:94dvh;border-radius:14px}.feedback-dialog-header,#feedback-dialog-body{padding:18px}.feedback-dialog-footer{padding:12px 18px}.feedback-form-heading{gap:14px}.feedback-form-heading h2{font-size:17px}.feedback-face{width:92px}}
@media(prefers-reduced-motion:reduce){.face-circle{transition:none}}
.feedback-form .feedback-performance-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.feedback-invitation.feedback-callout{padding:0;margin:0 0 16px;border:1px solid #6a57dc;border-radius:12px;background:linear-gradient(110deg,#6550d8,#7967ea);box-shadow:0 5px 16px #6558e827}
.feedback-callout a{display:flex;align-items:center;gap:12px;padding:16px;color:#fff;min-height:78px}
.feedback-callout a:hover{color:#fff;background:#ffffff0d;border-radius:12px}
.feedback-callout strong{display:block;font-size:14px;font-weight:650}
.feedback-callout small{display:block;font-size:10px;color:#e9e3ff;margin-top:3px;line-height:1.5}
.feedback-callout-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#ffffff20;flex-shrink:0}
.feedback-callout-arrow{margin-left:auto;font-size:21px}

.feedback-perfect {
    display: none;
    object-fit: contain;
}
.feedback-face[data-perfect="true"] > svg {
    display: none;
}
.feedback-face[data-perfect="true"] .feedback-perfect {
    display: inline-block;
}

.customization-group {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--border, #dce0e8);
    border-radius: 12px;
    min-width: 0;
}

.customization-group legend {
    font-size: 1.05rem;
    font-weight: 600;
}

.customization-field {
    display: block;
    margin-bottom: 12px;
}

.customization-field span {
    display: block;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.customization-image {
    margin: 16px 0;
    overflow-wrap: anywhere;
}

.customization-image img {
    display: block;
    max-width: 160px;
    max-height: 120px;
    object-fit: contain;
    margin: 8px 0;
}

.customization-image img[hidden] {
    display: none;
}

.customization-image .btn {
    margin-top: 8px;
}

.customization-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.customization-dialog {
    width: min(900px, calc(100vw - 24px));
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    overflow: hidden;
}

.customization-dialog[open] {
    display: flex;
    flex-direction: column;
}

.customization-dialog::backdrop {
    background: #10182cb8;
}

body:has(.customization-dialog[open]) {
    overflow: hidden;
}

.customization-dialog-header,
.customization-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    flex-shrink: 0;
}

.customization-dialog-header {
    border-bottom: 1px solid var(--line);
}

.customization-dialog-header h2 {
    margin: 0;
    font-size: 20px;
}

.customization-close {
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    width: 36px;
    height: 36px;
    line-height: 1;
}

.customization-dialog-body {
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 0;
}

.customization-dialog-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--line);
}

.customization-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.customization-tabs button {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

.customization-tabs button[aria-selected="true"] {
    background: #eeeafa;
    border-color: #8f79cd;
}

.customization-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.customization-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #77718b;
    border-radius: 50%;
    color: #615a75;
    background: #fff;
    font-size: 13px;
    flex-shrink: 0;
    cursor: help;
}

.customization-field .customization-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -80px;
    z-index: 2;
    width: min(260px, calc(100vw - 80px));
    padding: 10px 12px;
    border-radius: 8px;
    background: #292337;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    font-weight: normal;
}

.customization-info:hover .customization-tooltip,
.customization-info:focus .customization-tooltip {
    display: block;
}

.image-compression-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 12px 0;
}

.image-compression-controls label {
    display: grid;
    grid-template-columns: minmax(100px, 200px) auto;
    align-items: center;
    gap: 8px;
}

.image-compression-controls input {
    grid-column: 1;
    width: 100%;
}

.image-compression-controls output {
    grid-column: 2;
}

.customization-export-size {
    margin: 0;
    padding: 10px 24px;
    flex-shrink: 0;
}

.customization-image,
.customization-image-card {
    padding: 20px;
    margin: 24px 0;
    border: 1px solid #d9d3e7;
    border-radius: 14px;
    background: #faf9fd;
    box-shadow: 0 2px 6px #30204c08;
}

.customization-image > p:first-child,
.customization-image-card > legend {
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.customization-image-card .customization-image {
    padding: 0;
    margin: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 600px) {
    .customization-image,
    .customization-image-card {
        padding: 14px;
    }
}

#simple-customization {
    margin-top: 32px;
}

.favorite-effect {
    position: fixed;
    z-index: 1000;
    width: 21px;
    height: 21px;
    pointer-events: none;
    color: #bc850c;
}

.favorite-effect svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.favorite-particle {
    width: 13px;
    height: 13px;
}

.favorite-button:disabled {
    cursor: wait;
}

.live-dot {
    position: relative;
    isolation: isolate;
    flex: 0 0 6px;
}

.live-dot::before,
.live-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform-origin: center;
    opacity: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    animation: workspace-pulse 4.8s ease-out infinite;
    pointer-events: none;
}

.live-dot::after {
    animation-delay: 2.4s;
}

@keyframes workspace-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot::before,
    .live-dot::after {
        animation: none;
        display: none;
    }
}

.live-dot {
    color: #78d8af;
}

.field-help {
    font-size: 13px;
    color: #5e6a7c;
    line-height: 1.55;
}

.customization-field .customization-tooltip[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(260px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    border: 0;
}

.customization-field .customization-tooltip[popover]:not(:popover-open) {
    display: none;
}

.customization-field .customization-tooltip[popover]:popover-open {
    display: block;
}

.image-search {
    display: block;
    margin-bottom: 18px;
    font-weight: 600;
}

.image-search input {
    margin-top: 8px;
}

.customization-image-card > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.customization-image-card > summary::before {
    content: "▸";
    flex-shrink: 0;
}

.customization-image-card[open] > summary::before {
    content: "▾";
}

.customization-image-card > summary img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}

.customization-image-card > summary img[hidden] {
    display: none;
}

.image-card-body {
    padding-top: 18px;
}

.image-advanced {
    padding-bottom: 16px;
}

.image-advanced > summary {
    cursor: pointer;
    color: #5e5673;
    margin-bottom: 12px;
}

.file-budget {
    padding: 10px 0;
}

.file-budget-track {
    height: 7px;
    background: #e9edf3;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}

.file-budget-fill {
    display: block;
    height: 100%;
    width: 0;
    background: #459b7c;
    transition: width 250ms ease;
}

.file-budget.is-over .file-budget-fill {
    background: #b83b46;
}

.customization-dialog[open],
.feedback-dialog[open] {
    animation: portal-dialog-enter 160ms ease-out;
}

.customization-dialog[open]::backdrop,
.feedback-dialog[open]::backdrop {
    animation: portal-backdrop-enter 160ms ease-out;
}

.preview-panel.is-applied {
    animation: portal-applied 350ms ease-out;
}

@keyframes portal-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes portal-backdrop-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes portal-applied {
    from {
        box-shadow: 0 0 0 3px #58b48a88;
    }
    to {
        box-shadow: 0 0 0 3px transparent;
    }
}

.mobile-export-link {
    display: none;
}

@media (max-width: 850px) {
    .mobile-export-link:not([hidden]) {
        display: block;
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 8;
        max-width: calc(100vw - 32px);
        box-shadow: 0 5px 20px #20284033;
    }
    body:has(dialog[open], input:focus, textarea:focus) .mobile-export-link {
        display: none;
    }
    #download-form {
        scroll-margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customization-dialog[open],
    .feedback-dialog[open],
    .customization-dialog[open]::backdrop,
    .feedback-dialog[open]::backdrop,
    .preview-panel.is-applied {
        animation: none;
    }
    .file-budget-fill {
        transition: none;
    }
}

.card-meta,
.detail-metadata {
    font-size: 12px;
    color: #5e6a7c;
}

.tag {
    font-size: 11px;
    color: #59667a;
}

.customization-dialog .customization-export-size.file-budget {
    padding: 18px 24px;
    border-top: 1px solid var(--line);
}

.file-budget-track {
    margin: 12px 0 8px;
}

.audio-edit-card audio {
    display: block;
    width: 100%;
    margin: 16px 0;
}

.audio-edit-card label:not(.audio-toggle) {
    display: block;
    margin: 12px 0;
}

.audio-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.file-budget {
    margin-top: 12px;
    padding: 16px 0;
}

.file-budget-savings:not(:empty) {
    display: block;
    margin-top: 8px;
}