@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --bg: #202124;
    --bg-soft: #171717;
    --panel: #1f1f1f;
    --panel-2: #262626;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --line: rgba(255,255,255,0.08);
    --blue: #8ab4f8;
    --blue-strong: #1a73e8;
    --green: #34a853;
    --yellow: #fbbc05;
    --red: #ea4335;
    --shadow: 0 20px 50px rgba(0,0,0,0.28);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Parkinsans", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(66,133,244,0.08), transparent 22%),
        radial-gradient(circle at top right, rgba(52,168,83,0.06), transparent 18%),
        linear-gradient(180deg, #1f1f1f 0%, #171717 100%);
    color: var(--text);
}

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

body {
    overflow-x: hidden;
}

.global-profile-slot {
    position: fixed;
    top: 16px;
    right: 18px;
    z-index: 120;
}

.page-center,
.auth-page,
.admin-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
}

.hero-card,
.auth-card,
.admin-card,
.history-card {
    width: 100%;
    background: rgba(31,31,31,0.88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(14px);
}

.hero-card {
    max-width: 1120px;
    padding: 56px 38px;
    text-align: center;
}

.auth-card,
.admin-card,
.history-card {
    max-width: 820px;
    padding: 32px;
}

.admin-large {
    max-width: 1200px;
}

.badge,
.history-badge,
.dictionary-label,
.sponsored-label,
.flag-badge,
.admin-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.logo {
    margin: 18px 0 10px;
    font-size: clamp(54px, 9vw, 90px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.98;
    background: linear-gradient(90deg, #8ab4f8, #34a853, #fbbc05, #ea4335, #8ab4f8);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 8s linear infinite;
}

@keyframes shine {
    from { background-position: 0 0; }
    to { background-position: 220% 0; }
}

.subtitle {
    max-width: 700px;
    margin: 12px auto 30px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 18px;
}

.search-form,
.search-form-inline {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-form {
    justify-content: center;
}

.search-form-inline {
    flex: 1;
    max-width: 860px;
}

.search-suggest-wrap {
    position: relative;
    flex: 1;
    min-width: min(340px, 100%);
}

.search-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    flex-shrink: 0;
}

.search-mode-tabs.compact {
    padding: 3px;
}

.search-mode-btn {
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: 0.18s ease;
}

.search-mode-btn:hover,
.search-mode-btn.active {
    color: #0f1115;
    background: var(--blue);
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 80;
    padding: 8px;
    border: 1px solid rgba(138,180,248,0.18);
    border-radius: 22px;
    background: rgba(31,31,31,0.98);
    box-shadow: 0 18px 46px rgba(0,0,0,0.32);
    backdrop-filter: blur(18px);
}

.search-suggestion-item {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 14px;
    border: none;
    border-radius: 15px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.search-suggestion-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.search-suggestion-item small {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 12px;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: rgba(138,180,248,0.12);
}

.search-input,
.auth-form input,
.admin-search-input,
.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 100%;
    border: 1px solid var(--line);
    background: #303134;
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: 0.2s ease;
}

.search-input {
    height: 60px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 17px;
}

.auth-form input,
.admin-search-input,
.admin-form input,
.admin-form select {
    height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 15px;
}

.admin-form textarea {
    padding: 16px;
    border-radius: 18px;
    font-size: 15px;
    resize: vertical;
    min-height: 120px;
}

.search-input:hover,
.search-input:focus,
.auth-form input:focus,
.admin-search-input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: rgba(138,180,248,0.35);
    box-shadow: 0 0 0 4px rgba(138,180,248,0.08);
}

.primary-btn,
.secondary-btn,
.auth-form button {
    border: none;
    background: linear-gradient(135deg, #8ab4f8 0%, #5c98f6 100%);
    color: #0f1115;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 10px 24px rgba(90,152,246,0.25);
}

.primary-btn,
.auth-form button {
    height: 52px;
    padding: 0 22px;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 18px;
}

.primary-btn:hover,
.secondary-btn:hover,
.auth-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(90,152,246,0.28);
}

.top-links,
.auth-links,
.header-links,
.admin-header,
.history-header {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.top-links {
    justify-content: center;
    margin-top: 24px;
}

.home-product-switch,
.product-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
}

.home-product-switch {
    margin: 0 auto 22px;
}

.home-product-switch a,
.product-switch a,
.product-switch button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
}

.home-product-switch a:hover,
.home-product-switch a.active,
.product-switch a:hover,
.product-switch a.active,
.product-switch button:hover,
.product-switch button.active {
    background: var(--blue);
    color: #0f1115;
}

.release-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin: 30px 0 0;
    padding: 22px;
    max-width: none;
    text-align: left;
    border: 1px solid rgba(138,180,248,0.22);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.14), rgba(52,168,83,0.08)),
        rgba(31,31,31,0.92);
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

.release-label {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.release-card h2 {
    margin: 6px 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.12;
}

.release-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 15px;
    max-width: 760px;
}

.release-card p + p {
    margin-top: 10px;
}

.release-alert {
    color: #ffd76a !important;
    padding: 10px 12px;
    border: 1px solid rgba(251,188,5,0.2);
    border-radius: 14px;
    background: rgba(251,188,5,0.08);
}

.release-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--text);
    font-weight: 900;
    white-space: nowrap;
}

.release-card a:hover {
    background: var(--blue);
    color: #0f1115;
}

.profile-menu {
    position: relative;
    z-index: 100;
}

.profile-trigger {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.24);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.profile-trigger:hover,
.profile-menu.is-open .profile-trigger {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(138,180,248,0.48);
    box-shadow: 0 16px 34px rgba(90,152,246,0.22);
}

.profile-trigger img,
.profile-trigger span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-trigger img {
    object-fit: cover;
}

.profile-trigger span,
.profile-avatar-large span {
    background: linear-gradient(135deg, #8ab4f8, #34a853);
    color: #0f1115;
}

.profile-popover {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: min(360px, calc(100vw - 28px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(32,33,36,0.96);
    box-shadow: 0 26px 70px rgba(0,0,0,0.45);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.profile-menu.is-open .profile-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.profile-popover::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 24px;
    background: radial-gradient(circle at top left, rgba(138,180,248,0.14), transparent 34%);
    pointer-events: none;
}

.profile-popover-top,
.profile-actions {
    position: relative;
}

.profile-popover-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 8px 16px;
    text-align: center;
}

.profile-avatar-large {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(138,180,248,0.32);
    box-shadow: 0 14px 40px rgba(0,0,0,0.26);
}

.profile-avatar-large img,
.profile-avatar-large span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 34px;
    font-weight: 900;
}

.profile-popover-top small {
    color: var(--muted);
}

.profile-score-pill {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--blue);
    background: rgba(138,180,248,0.12);
    font-size: 12px;
    font-weight: 900;
}

.profile-actions {
    display: grid;
    gap: 8px;
}

.profile-actions a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 800;
    background: rgba(255,255,255,0.04);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.profile-actions a:hover {
    transform: translateX(4px);
    background: rgba(138,180,248,0.13);
    color: var(--blue);
}

.profile-actions .profile-logout:hover {
    background: rgba(234,67,53,0.14);
    color: #ff9f95;
}

.top-links a,
.auth-links a,
.header-links a,
.admin-header a,
.history-header a {
    color: var(--muted);
    font-weight: 600;
}

.top-links a:hover,
.auth-links a:hover,
.header-links a:hover,
.admin-header a:hover,
.history-header a:hover {
    color: var(--blue);
}

.auth-form,
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-subtext {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 14px;
}

.auth-remember-hidden {
    display: none;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-weight: 700;
}

.alert.error {
    background: rgba(234,67,53,0.08);
    color: #ff9f95;
    border: 1px solid rgba(234,67,53,0.18);
}

.alert.success {
    background: rgba(52,168,83,0.08);
    color: #96e7b0;
    border: 1px solid rgba(52,168,83,0.18);
}

.auth-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1000;
    width: min(430px, calc(100vw - 28px));
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(32,33,36,0.92);
    color: var(--text);
    box-shadow: 0 18px 44px rgba(0,0,0,0.34);
    backdrop-filter: blur(18px);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    transform: translate(-50%, -12px);
    animation: authToastIn 0.32s cubic-bezier(.2,.8,.2,1) forwards;
}

.auth-toast::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(52,168,83,0.13);
}

.auth-toast[data-tone="info"]::before {
    background: var(--blue);
    box-shadow: 0 0 0 5px rgba(138,180,248,0.13);
}

.auth-toast.is-leaving {
    animation: authToastOut 0.34s ease forwards;
}

@keyframes authToastIn {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes authToastOut {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}

/* SEARCH PAGE */

.ai-page {
    min-height: 100vh;
}

.ai-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 86px 14px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(31,31,31,0.86);
    backdrop-filter: blur(18px);
}

.ai-shell {
    width: min(1180px, calc(100vw - 32px));
    min-height: calc(100vh - 76px);
    margin: 0 auto;
    padding: 32px 0;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.ai-intro {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(31,31,31,0.72);
    align-self: start;
}

.ai-intro h1 {
    margin: 18px 0 10px;
    font-size: 44px;
    line-height: 1;
}

.ai-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.ai-chat-card {
    min-height: 650px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(31,31,31,0.88);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ai-chat-messages {
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
}

.ai-message {
    width: fit-content;
    max-width: min(680px, 88%);
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
}

.ai-message > strong,
.ai-message-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--blue);
}

.ai-message p,
.ai-message-content {
    margin: 0;
    line-height: 1.62;
}

.ai-message-content p {
    margin: 0 0 12px;
}

.ai-message-content p:last-child,
.ai-message-content ul:last-child,
.ai-message-content ol:last-child,
.ai-message-content pre:last-child {
    margin-bottom: 0;
}

.ai-message-content ul,
.ai-message-content ol {
    margin: 8px 0 14px;
    padding-left: 24px;
}

.ai-message-content li {
    margin: 5px 0;
    line-height: 1.6;
}

.ai-message-content strong {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 800;
}

.ai-message-content h2,
.ai-message-content h3,
.ai-message-content h4 {
    margin: 18px 0 10px;
    color: #f7f8ff;
    line-height: 1.2;
    letter-spacing: 0;
}

.ai-message-content h2:first-child,
.ai-message-content h3:first-child,
.ai-message-content h4:first-child {
    margin-top: 0;
}

.ai-message-content h2 {
    font-size: clamp(24px, 3vw, 32px);
}

.ai-message-content h3 {
    font-size: 21px;
}

.ai-message-content h4 {
    font-size: 17px;
    color: #dfe8ff;
}

.ai-markdown-break {
    width: min(210px, 62%);
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, rgba(138,180,248,0.72), rgba(100,228,255,0.08));
}

.ai-message-content code {
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(255,255,255,0.1);
    color: #f2f2f2;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
}

.ai-message-content pre {
    margin: 10px 0 14px;
    padding: 14px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(0,0,0,0.28);
}

.ai-message-content pre code {
    padding: 0;
    background: transparent;
    display: block;
    white-space: pre;
}

.ai-message-user {
    margin-left: auto;
    background: rgba(138,180,248,0.14);
}

.ai-service-alert {
    margin: 0 18px 14px;
    padding: 14px 16px;
    border: 1px solid rgba(251,188,5,0.24);
    border-radius: 18px;
    background: rgba(251,188,5,0.1);
}

.ai-service-alert strong {
    color: #ffd66b;
}

.ai-service-alert p {
    margin: 6px 0;
    color: var(--text);
    line-height: 1.5;
}

.ai-service-alert span {
    color: var(--muted);
    font-weight: 800;
}

.ai-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
}

.ai-compose textarea {
    width: 100%;
    min-height: 52px;
    max-height: 160px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #303134;
    color: var(--text);
    outline: none;
    resize: none;
    font: inherit;
}

.ai-compose textarea:focus {
    border-color: rgba(138,180,248,0.35);
    box-shadow: 0 0 0 4px rgba(138,180,248,0.08);
}

.ai-compose button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.ai-app {
    --ai-compose-space: 140px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    background:
        linear-gradient(135deg, rgba(138,180,248,0.08), transparent 34%),
        linear-gradient(225deg, rgba(52,168,83,0.07), transparent 36%),
        #202124;
    color: #ececf1;
}

.ai-app[data-ai-theme="soft"] {
    background:
        linear-gradient(135deg, rgba(138,180,248,0.18), transparent 36%),
        linear-gradient(225deg, rgba(52,168,83,0.12), transparent 34%),
        #f4f6fb;
    color: #1f2937;
}

.ai-app[data-ai-theme="soft"] .ai-sidebar,
.ai-app[data-ai-theme="soft"] .ai-chat-header {
    background: rgba(255,255,255,0.9);
    color: #1f2937;
    border-color: rgba(15,23,42,0.1);
}

.ai-app[data-ai-theme="soft"] .ai-message-label,
.ai-app[data-ai-theme="soft"] .ai-chat-header h1 {
    color: #111827;
}

.ai-app[data-ai-theme="soft"] .ai-message-user,
.ai-app[data-ai-theme="soft"] .ai-compose-modern {
    background: #ffffff;
    color: #111827;
    border-color: rgba(15,23,42,0.12);
}

.ai-app[data-ai-theme="soft"] .ai-compose-modern textarea {
    color: #111827;
}

.ai-app[data-ai-theme="focus"] {
    background: #111827;
    color: #f9fafb;
}

.ai-app[data-ai-theme="focus"] .ai-sidebar,
.ai-app[data-ai-theme="focus"] .ai-chat-header {
    background: #0b1120;
    border-color: rgba(52,168,83,0.2);
}

.ai-app[data-ai-theme="focus"] .ai-new-chat,
.ai-app[data-ai-theme="focus"] .ai-compose-modern {
    border-color: rgba(52,168,83,0.28);
}

.ai-app[data-ai-theme="premium"] {
    background:
        linear-gradient(135deg, rgba(251,188,4,0.12), transparent 34%),
        linear-gradient(225deg, rgba(138,180,248,0.1), transparent 40%),
        #17120d;
}

.ai-app[data-ai-theme="premium"] .ai-sidebar,
.ai-app[data-ai-theme="premium"] .ai-chat-header {
    background: rgba(20,16,10,0.92);
    border-color: rgba(251,188,4,0.18);
}

.ai-app[data-ai-theme="premium"] .ai-new-chat,
.ai-app[data-ai-theme="premium"] .ai-compose-modern,
.ai-app[data-ai-theme="premium"] .ai-message-user {
    border-color: rgba(251,188,4,0.24);
    box-shadow: 0 22px 70px rgba(251,188,4,0.08);
}

.ai-app[data-ai-theme="premium"] .badge,
.ai-app[data-ai-theme="premium"] .ai-modal-kicker {
    color: #fbbc04;
}

.ai-sidebar {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
        #151618;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.ai-sidebar-top,
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ai-new-chat,
.ai-secondary-action,
.ai-project-item,
.ai-chat-row > button {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.045);
    color: #ececf1;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.ai-new-chat,
.ai-secondary-action {
    min-height: 44px;
    padding: 0 14px;
}

.ai-new-chat {
    background:
        linear-gradient(135deg, rgba(138,180,248,0.18), rgba(52,168,83,0.12)),
        rgba(255,255,255,0.05);
    border-color: rgba(138,180,248,0.18);
}

.ai-new-chat:hover,
.ai-secondary-action:hover,
.ai-project-row.active .ai-project-item,
.ai-project-item:hover,
.ai-chat-row.active > button,
.ai-chat-row > button:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.16);
}

.ai-project-box,
.ai-memory-box,
.ai-storage-box,
.ai-chat-list-wrap {
    display: grid;
    gap: 10px;
}

.ai-chat-list-wrap {
    min-height: 0;
    flex: 1;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.ai-project-list,
.ai-memory-list,
.ai-chat-list {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow: auto;
}

.ai-memory-list {
    max-height: 150px;
}

.ai-storage-box {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 10px;
}

.ai-storage-summary {
    display: grid;
    gap: 2px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    padding: 8px 10px;
}

.ai-storage-summary strong {
    color: #eef2fb;
    font-size: 12px;
    font-weight: 900;
}

.ai-storage-summary small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.ai-bundle-list {
    display: grid;
    gap: 6px;
    max-height: 160px;
    overflow: auto;
}

.ai-bundle-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    padding: 8px;
}

.ai-bundle-row a {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ai-bundle-row span,
.ai-bundle-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bundle-row span {
    color: #f0f3fa;
    font-size: 12px;
    font-weight: 900;
}

.ai-bundle-row small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.ai-bundle-row button {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #ececf1;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.ai-memory-suggestions {
    display: grid;
    gap: 6px;
}

.ai-memory-suggestions[hidden] {
    display: none;
}

.ai-memory-suggestions button {
    min-width: 0;
    border: 1px solid rgba(138,180,248,0.14);
    border-radius: 12px;
    background: rgba(138,180,248,0.08);
    color: #dde7ff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    padding: 8px 10px;
    text-align: left;
}

.ai-memory-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    padding: 8px 8px 8px 10px;
}

.ai-memory-item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.ai-memory-item strong {
    min-width: 0;
    overflow: hidden;
    color: #f0f3fa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-memory-item button {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #ececf1;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.ai-chat-search {
    display: grid;
    gap: 5px;
}

.ai-chat-search span,
.ai-project-style-editor span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.ai-chat-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    color: #ececf1;
    outline: none;
    padding: 0 11px;
    font: inherit;
    font-size: 13px;
}

.ai-chat-search input:focus {
    border-color: rgba(138,180,248,0.28);
    box-shadow: 0 0 0 3px rgba(138,180,248,0.08);
}

.ai-project-row,
.ai-chat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
    position: relative;
}

.ai-project-item,
.ai-chat-row > button {
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    padding: 9px 44px 9px 11px;
    display: grid;
    gap: 3px;
    text-align: left;
    overflow: hidden;
    line-height: 1.15;
}

.ai-project-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.ai-project-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(138,180,248,0.16);
    border: 1px solid rgba(138,180,248,0.28);
    background: color-mix(in srgb, var(--project-color, #8ab4f8) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--project-color, #8ab4f8) 42%, transparent);
    color: #f7f8ff;
    font-size: 13px;
    font-weight: 900;
    overflow: visible;
    white-space: nowrap;
}

.ai-project-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ai-project-copy > span,
.ai-chat-row > button > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-project-item small,
.ai-chat-row small,
.ai-compose-limit,
.ai-list-empty {
    color: var(--muted);
    font-size: 12px;
}

.ai-chat-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.ai-chat-row:hover .ai-chat-actions,
.ai-chat-row.active .ai-chat-actions,
.ai-project-row:hover .ai-chat-actions,
.ai-project-row.active .ai-chat-actions {
    opacity: 1;
    pointer-events: auto;
}

.ai-chat-actions button,
.ai-icon-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    color: #ececf1;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.ai-chat-actions button:hover,
.ai-icon-btn:hover {
    background: rgba(255,255,255,0.1);
}

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

.ai-export-btn,
.ai-ghost-btn {
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
    color: #ececf1;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0 14px;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.ai-export-btn:hover,
.ai-ghost-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.ai-export-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ai-mobile-close,
.ai-mobile-menu {
    display: none;
}

.ai-main {
    min-width: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.ai-chat-header {
    min-height: 72px;
    padding: 14px 88px 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(33,33,33,0.88);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ai-chat-header h1 {
    margin: 8px 0 0;
    font-size: clamp(21px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: 0;
}

.ai-chat-stage {
    min-height: 0;
    overflow: auto;
    padding: 28px 20px var(--ai-compose-space, 140px);
    scroll-padding-bottom: var(--ai-compose-space, 140px);
}

.ai-empty-hero {
    width: min(760px, 100%);
    margin: 12vh auto 0;
    text-align: center;
}

.ai-empty-hero h2 {
    margin: 0 0 12px;
    font-size: clamp(38px, 7vw, 62px);
    letter-spacing: 0;
}

.ai-empty-hero p {
    margin: 0 auto;
    max-width: 620px;
    color: #c9c9d1;
    line-height: 1.7;
    font-size: 17px;
}

.ai-prompt-grid {
    width: min(680px, 100%);
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ai-prompt-grid button {
    min-height: 48px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    color: #f2f4f8;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 0 12px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ai-prompt-grid button:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.095);
    border-color: rgba(138,180,248,0.24);
}

.ai-app .ai-chat-header,
.ai-app .ai-empty-hero {
    animation: aiPanelLiftIn 0.42s cubic-bezier(.2,.8,.2,1) both;
}

@media (min-width: 901px) {
    .ai-app .ai-sidebar {
        animation: aiPanelLiftIn 0.42s cubic-bezier(.2,.8,.2,1) both;
    }
}

.ai-app .ai-chat-header {
    animation-delay: 0.04s;
}

.ai-app .ai-empty-hero {
    animation-delay: 0.08s;
}

.ai-app .ai-compose-modern {
    animation: aiComposeLiftIn 0.42s cubic-bezier(.2,.8,.2,1) 0.12s both;
}

.ai-app .ai-message {
    animation: aiMessageLiftIn 0.28s cubic-bezier(.2,.8,.2,1) both;
}

.ai-prompt-grid button,
.ai-answer-modes button,
.ai-pro-switch,
.ai-tool-btn,
.ai-new-chat,
.ai-chat-row > button,
.ai-project-item,
.ai-secondary-action,
.ai-export-btn,
.ai-send {
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

.ai-answer-modes button:hover,
.ai-answer-modes button:focus-visible,
.ai-pro-switch:hover,
.ai-pro-switch:focus-within,
.ai-tool-btn:hover,
.ai-tool-btn:focus-visible,
.ai-new-chat:hover,
.ai-new-chat:focus-visible,
.ai-chat-row > button:hover,
.ai-chat-row > button:focus-visible,
.ai-project-item:hover,
.ai-project-item:focus-within,
.ai-secondary-action:hover,
.ai-secondary-action:focus-visible,
.ai-export-btn:hover,
.ai-export-btn:focus-visible,
.ai-send:hover,
.ai-send:focus-visible {
    transform: translateY(-1px);
}

.ai-compose-modern:focus-within {
    border-color: rgba(138,180,248,0.32);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.32),
        0 0 0 1px rgba(138,180,248,0.08);
}

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

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

@keyframes aiComposeLiftIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ai-quiz-backdrop {
    position: fixed;
    inset: 0;
    z-index: 510;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(8,9,12,0.64);
    backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ai-quiz-backdrop[hidden] {
    display: none;
}

.ai-quiz-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ai-quiz-builder {
    width: min(760px, 100%);
    max-height: min(88vh, 860px);
    position: relative;
    display: grid;
    gap: 16px;
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.12), transparent 36%),
        linear-gradient(225deg, rgba(52,168,83,0.08), transparent 34%),
        #202124;
    box-shadow: 0 30px 90px rgba(0,0,0,0.46);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
}

.ai-quiz-backdrop.is-open .ai-quiz-builder {
    transform: translateY(0) scale(1);
}

.ai-quiz-builder h2 {
    margin: 0;
    padding-right: 36px;
    font-size: 28px;
    letter-spacing: 0;
}

.ai-quiz-builder p {
    margin: 0;
    color: #b9c0cc;
    line-height: 1.6;
}

.ai-quiz-form {
    display: grid;
    gap: 15px;
}

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

.ai-quiz-form label,
.ai-quiz-block {
    display: grid;
    gap: 8px;
}

.ai-quiz-form label span,
.ai-quiz-block-title {
    color: #eef2fb;
    font-size: 13px;
    font-weight: 900;
}

.ai-quiz-form input[type="number"],
.ai-quiz-form input[type="text"],
.ai-quiz-form select,
.ai-quiz-form textarea,
.ai-quiz-free-answer input {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    outline: none;
    font: inherit;
}

.ai-quiz-form input[type="number"],
.ai-quiz-form input[type="text"],
.ai-quiz-form select,
.ai-quiz-free-answer input {
    min-height: 46px;
    padding: 0 13px;
}

.ai-quiz-form textarea {
    min-height: 150px;
    padding: 13px;
    resize: vertical;
    line-height: 1.6;
}

.ai-quiz-form input:focus,
.ai-quiz-form select:focus,
.ai-quiz-form textarea:focus,
.ai-quiz-free-answer input:focus {
    border-color: rgba(138,180,248,0.36);
    box-shadow: 0 0 0 4px rgba(138,180,248,0.08);
}

.ai-quiz-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ai-quiz-type-row {
    min-width: 0;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 76px;
    align-items: center;
    gap: 9px !important;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
}

.ai-quiz-type-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.ai-quiz-type-row input[type="number"] {
    min-height: 38px;
    padding: 0 9px;
}

.ai-quiz-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ai-quiz-segmented label {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    cursor: pointer;
}

.ai-quiz-segmented input {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
}

.ai-quiz-image-note {
    padding: 10px 12px;
    border: 1px dashed rgba(138,180,248,0.25);
    border-radius: 16px;
    color: #b9c0cc;
    background: rgba(138,180,248,0.06);
    font-size: 13px;
    font-weight: 800;
}

.ai-quiz-builder-actions,
.ai-quiz-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-compress-mode-grid {
    display: grid;
    gap: 12px;
}

.ai-compress-mode-card {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    color: #eef2fb;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
    font: inherit;
}

.ai-compress-mode-card strong {
    font-size: 16px;
}

.ai-compress-mode-card span {
    color: #b9c0cc;
    font-size: 13px;
    line-height: 1.55;
}

.ai-compress-mode-card:hover,
.ai-compress-mode-card:focus-visible {
    border-color: rgba(138, 180, 248, 0.45);
    background: rgba(138, 180, 248, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.ai-compress-mode-card-risk {
    border-color: rgba(255, 111, 97, 0.22);
}

.ai-compress-mode-card-risk:hover,
.ai-compress-mode-card-risk:focus-visible {
    border-color: rgba(255, 111, 97, 0.45);
    background: rgba(255, 111, 97, 0.08);
}

.ai-compress-processing {
    padding: 18px 4px 8px;
}

.ai-compress-processing p {
    margin: 0;
    color: #b9c0cc;
    line-height: 1.6;
}

.ai-compress-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
    align-items: start;
}

.ai-compress-preview {
    margin: 0;
    display: grid;
    gap: 10px;
}

.ai-compress-preview img {
    width: 100%;
    max-height: min(46vh, 420px);
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.ai-compress-preview figcaption,
.ai-compress-estimate {
    margin: 0;
    color: #b9c0cc;
    font-size: 13px;
    line-height: 1.5;
}

.ai-compress-controls {
    display: grid;
    gap: 14px;
}

.ai-compress-field {
    display: grid;
    gap: 8px;
}

.ai-compress-field span {
    color: #eef2fb;
    font-size: 13px;
    font-weight: 900;
}

.ai-compress-field input[type="range"],
.ai-compress-field select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    outline: none;
    font: inherit;
}

.ai-compress-field select {
    min-height: 46px;
    padding: 0 13px;
}

.ai-compress-field input[type="range"] {
    accent-color: var(--blue, #8ab4f8);
    padding: 0;
    min-height: 28px;
}

.ai-compress-warning {
    margin: 0;
    color: #ffb4a9;
    font-size: 13px;
    line-height: 1.5;
}

.ai-image-compressor .ai-quiz-builder-actions {
    margin-top: 4px;
}

@media (max-width: 760px) {
    .ai-compress-layout {
        grid-template-columns: 1fr;
    }
}

.ai-quiz-card {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.08), transparent 42%),
        rgba(255,255,255,0.035);
}

.ai-quiz-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ai-quiz-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-quiz-card h3,
.ai-quiz-question h4 {
    margin: 0;
    letter-spacing: 0;
}

.ai-quiz-card h3 {
    font-size: 24px;
}

.ai-quiz-card-head p {
    margin: 8px 0 0;
    color: #c7ccd6;
    line-height: 1.55;
}

.ai-quiz-card-head strong {
    min-width: 68px;
    min-height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #0f1115;
    background: var(--blue);
    font-size: 18px;
}

.ai-quiz-question-list {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.ai-quiz-question {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    background: rgba(18,19,22,0.52);
}

.ai-quiz-question.is-correct {
    border-color: rgba(52,168,83,0.38);
}

.ai-quiz-question.is-wrong {
    border-color: rgba(251,188,5,0.34);
}

.ai-quiz-question-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-quiz-question-top span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(138,180,248,0.16);
    color: var(--blue);
    font-weight: 900;
}

.ai-quiz-question-top small {
    color: #aeb6c5;
    font-weight: 900;
}

.ai-quiz-question h4 {
    font-size: 18px;
    line-height: 1.38;
}

.ai-quiz-choices,
.ai-quiz-match-list {
    display: grid;
    gap: 8px;
}

.ai-quiz-choices label,
.ai-quiz-match-list label {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
}

.ai-quiz-choices label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    cursor: pointer;
}

.ai-quiz-choices input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--blue);
}

.ai-quiz-free-answer {
    display: grid;
    gap: 8px;
}

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

.ai-quiz-order-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
}

.ai-quiz-order-list li div {
    display: inline-flex;
    gap: 5px;
}

.ai-quiz-order-list button,
.ai-quiz-check-btn {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.065);
    color: #eef2fb;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.ai-quiz-order-list button {
    width: 32px;
    height: 32px;
}

.ai-quiz-check-btn {
    justify-self: start;
    min-height: 38px;
    padding: 0 14px;
}

.ai-quiz-order-list button:hover,
.ai-quiz-check-btn:hover {
    border-color: rgba(138,180,248,0.28);
    background: rgba(138,180,248,0.12);
}

.ai-quiz-match-list select {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: #2f2f2f;
    color: #fff;
    padding: 0 10px;
    font: inherit;
}

.ai-quiz-feedback {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.045);
}

.ai-quiz-feedback[hidden] {
    display: none;
}

.ai-quiz-feedback strong {
    color: var(--blue);
}

.ai-quiz-feedback span,
.ai-quiz-feedback p {
    margin: 0;
    color: #d4dae5;
    line-height: 1.5;
}

.ai-app .ai-chat-messages {
    width: min(880px, 100%);
    margin: 0 auto;
    padding: 0;
}

.ai-app .ai-message {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 18px;
    border: 0;
    background: transparent;
    padding: 0;
    position: relative;
}

.ai-app .ai-message > strong,
.ai-app .ai-message-label {
    color: #ececf1;
    font-size: 13px;
    margin: 0 0 8px;
}

.ai-app .ai-message p,
.ai-app .ai-message-content {
    word-break: break-word;
}

.ai-app .ai-message-user {
    max-width: min(680px, 86%);
    margin-left: auto;
    padding: 13px 16px;
    border-radius: 18px;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.08);
}

.ai-app .ai-message-assistant {
    padding: 4px 2px 18px;
}

.ai-message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.ai-message-images figure {
    width: 112px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
}

.ai-message-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}

.ai-message-images figcaption {
    overflow: hidden;
    padding: 6px 7px;
    color: #c8d0dc;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-message-tools {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.ai-message:hover .ai-message-tools,
.ai-message:focus-within .ai-message-tools {
    opacity: 1;
    transform: translateY(0);
}

.ai-message-tools button {
    min-height: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #d9dee8;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
}

.ai-message-tools button:hover {
    background: rgba(255,255,255,0.12);
}

.ai-bundle-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    border: 1px solid rgba(138,180,248,0.2);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.1), rgba(52,168,83,0.06)),
        rgba(255,255,255,0.04);
    padding: 12px;
}

.ai-bundle-card-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.ai-bundle-card-main strong,
.ai-bundle-card-main span,
.ai-bundle-card-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bundle-card-main strong {
    color: #f4f7ff;
    font-size: 14px;
}

.ai-bundle-card-main span,
.ai-bundle-card-main small {
    color: #b9c3d2;
    font-size: 12px;
    font-weight: 700;
}

.ai-bundle-download {
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(138,180,248,0.26);
    border-radius: 12px;
    background: rgba(138,180,248,0.14);
    color: #eef4ff;
    font-size: 12px;
    font-weight: 900;
    padding: 0 12px;
}

.ai-image-request-card {
    display: grid;
    gap: 12px;
    width: min(620px, 100%);
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(103,232,249,0.22);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(103,232,249,0.10), rgba(52,168,83,0.06)),
        rgba(255,255,255,0.045);
}

.ai-image-request-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ai-image-request-head span {
    display: block;
    color: #9fb2c8;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-image-request-head strong {
    display: block;
    margin-top: 3px;
    color: #f5f8ff;
    font-size: 15px;
}

.ai-image-request-head small {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: #cbd6e6;
    font-size: 11px;
    font-weight: 850;
    padding: 5px 8px;
}

.ai-image-request-card p {
    margin: 0;
    color: #dfe6f2;
    font-size: 13px;
    line-height: 1.55;
}

.ai-image-prompt-box {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    background: rgba(0,0,0,0.16);
}

.ai-image-prompt-box span {
    color: #9fb2c8;
    font-size: 11px;
    font-weight: 950;
}

.ai-image-prompt-box p {
    color: #edf3fb;
    font-size: 12px;
}

.ai-generated-image {
    display: grid;
    gap: 8px;
}

.ai-generated-image img {
    width: min(100%, 520px);
    max-height: 560px;
    display: block;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    object-fit: contain;
    background: #15171b;
}

.ai-generated-image a {
    width: fit-content;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(138,180,248,0.26);
    border-radius: 12px;
    background: rgba(138,180,248,0.14);
    color: #eef4ff;
    font-size: 12px;
    font-weight: 900;
    padding: 0 12px;
}

.ai-image-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-generate-image-btn {
    min-height: 38px;
    border: 1px solid rgba(52,168,83,0.34);
    border-radius: 12px;
    background: rgba(52,168,83,0.16);
    color: #ecfff4;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    padding: 0 13px;
}

.ai-generate-image-btn:hover,
.ai-generate-image-btn:focus-visible {
    background: rgba(52,168,83,0.24);
}

.ai-generate-image-btn:disabled {
    cursor: progress;
    opacity: 0.62;
}

.ai-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ai-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ai-quick-replies button,
.ai-followups button {
    max-width: min(100%, 360px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #e9eef8;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    padding: 9px 12px;
    text-align: left;
}

.ai-quick-replies button:hover,
.ai-quick-replies button:focus-visible,
.ai-followups button:hover,
.ai-followups button:focus-visible {
    border-color: rgba(138,180,248,0.3);
    background: rgba(138,180,248,0.12);
}

.ai-memory-events {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.ai-memory-event {
    display: grid;
    gap: 8px;
    width: min(520px, 100%);
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    box-shadow: 0 18px 42px rgba(0,0,0,0.16);
    animation: aiMemoryCardIn 0.34s cubic-bezier(.2,.8,.2,1) both;
}

.ai-memory-event.is-internal {
    border-color: rgba(251,188,4,0.22);
    background:
        linear-gradient(135deg, rgba(251,188,4,0.10), transparent 42%),
        rgba(255,255,255,0.045);
}

.ai-memory-event.is-rejected {
    opacity: 0.66;
}

.ai-memory-event-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ai-memory-event-head span {
    flex: 0 0 auto;
    color: #d7e3f8;
    font-size: 17px;
    line-height: 1;
}

.ai-memory-event-head strong {
    min-width: 0;
    color: #f4f7ff;
    font-size: 14px;
    line-height: 1.25;
}

.ai-memory-event-head em {
    margin-left: auto;
    color: #aeb8c9;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-memory-event p {
    margin: 0;
    color: #f7f8ff;
    font-weight: 760;
}

.ai-memory-event small {
    color: #b7c1d0;
    line-height: 1.45;
}

.ai-memory-event button {
    justify-self: start;
    min-height: 32px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #e9eef8;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 0 11px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ai-memory-event button:hover,
.ai-memory-event button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255,107,97,0.32);
    background: rgba(255,107,97,0.12);
}

.ai-memory-event button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

@keyframes aiMemoryCardIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 560px) {
    .ai-bundle-card {
        grid-template-columns: 1fr;
    }

    .ai-bundle-download {
        justify-self: start;
    }

    .ai-quick-replies button,
    .ai-followups button,
    .ai-memory-event {
        width: 100%;
        max-width: 100%;
    }

    .ai-memory-event-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ai-memory-event-head em {
        width: 100%;
        margin-left: 25px;
    }
}

.ai-message-loading {
    max-width: 560px;
}

.ai-thinking {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: min(100%, 420px);
    padding: 14px 16px;
    border: 1px solid rgba(138,180,248,0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.12), rgba(52,168,83,0.08)),
        rgba(255,255,255,0.035);
    box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}

.ai-thinking-core {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.ai-thinking-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(138,180,248,0.22);
    background: conic-gradient(from 0deg, rgba(138,180,248,0), rgba(138,180,248,0.95), rgba(100,228,255,0.86), rgba(52,168,83,0), rgba(138,180,248,0));
    animation: aiThinkingSpin calc(var(--ai-thinking-speed, 0.95s) * 1.45) linear infinite;
}

.ai-thinking-ring::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: #242427;
}

.ai-thinking-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(138,180,248,0.22), rgba(52,168,83,0.12));
    color: #f7f8ff;
    font-size: 12px;
    font-weight: 900;
}

.ai-thinking-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ai-thinking-copy span {
    color: #f2f5ff;
    font-weight: 800;
    line-height: 1.2;
}

.ai-thinking-copy small {
    color: #aeb8c8;
    font-size: 12px;
}

.ai-thinking-wave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ai-thinking-wave span {
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8ab4f8, #34a853);
    animation: aiThinkingWave var(--ai-thinking-speed, 0.95s) ease-in-out infinite;
}

.ai-thinking-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.ai-thinking-wave span:nth-child(3) {
    animation-delay: 0.2s;
}

.ai-thinking-wave span:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes aiThinkingSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aiThinkingWave {
    0%, 100% {
        transform: scaleY(0.42);
        opacity: 0.48;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.ai-compose-modern {
    position: fixed;
    left: calc(50vw + 152px);
    bottom: 18px;
    transform: translateX(-50%);
    width: min(820px, calc(100vw - 352px));
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    background: #2f2f2f;
    box-shadow: 0 24px 70px rgba(0,0,0,0.36);
}

.ai-compose-intelligence {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.ai-image-generation-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 11px;
    border: 1px solid rgba(138,180,248,0.18);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
}

.ai-image-generation-panel[hidden] {
    display: none;
}

.ai-image-generation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-image-generation-head strong {
    color: #f4f7ff;
    font-size: 13px;
    font-weight: 950;
}

.ai-image-generation-head small {
    color: #b9c3d2;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.ai-image-models {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ai-image-models button {
    min-width: 0;
    min-height: 48px;
    display: grid;
    gap: 2px;
    align-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    color: #e9eef8;
    cursor: pointer;
    font: inherit;
    padding: 7px 10px;
    text-align: left;
}

.ai-image-models button span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-image-models button small {
    overflow: hidden;
    color: #aeb8c7;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-image-models button.active,
.ai-image-models button:hover,
.ai-image-models button:focus-visible {
    border-color: rgba(103,232,249,0.3);
    background: rgba(103,232,249,0.12);
}

.ai-answer-modes {
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
}

.ai-answer-modes::-webkit-scrollbar {
    display: none;
}

.ai-answer-modes button,
.ai-pro-switch {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
    color: #e9eef8;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.ai-answer-modes button {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 0 11px;
}

.ai-answer-modes button.active,
.ai-answer-modes button:hover,
.ai-answer-modes button:focus-visible {
    border-color: rgba(138,180,248,0.32);
    background: rgba(138,180,248,0.15);
    color: #f7fbff;
}

.ai-pro-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    cursor: pointer;
    white-space: nowrap;
}

.ai-pro-switch input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.ai-pro-switch:has(input:checked) {
    border-color: rgba(52,168,83,0.34);
    background: rgba(52,168,83,0.14);
}

.ai-answer-modes button:disabled,
.ai-pro-switch:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.48;
}

.ai-compose-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
}

.ai-tool-btn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    color: #eef2fb;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
}

.ai-tool-btn:hover,
.ai-tool-btn:focus-visible {
    background: rgba(255,255,255,0.1);
    border-color: rgba(138,180,248,0.25);
}

.ai-compose-modern textarea {
    min-height: 48px;
    border: 0;
    background: transparent;
    padding: 13px 14px;
}

.ai-compose-modern textarea:focus {
    box-shadow: none;
}

.ai-compose-modern .primary-btn {
    height: 44px;
}

.ai-compose-limit {
    grid-column: 1 / -1;
    padding: 0 12px 4px;
}

.ai-selected-images,
.ai-image-library {
    grid-column: 1 / -1;
}

.ai-selected-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
}

.ai-selected-images[hidden],
.ai-image-library[hidden] {
    display: none;
}

.ai-selected-images button {
    min-width: 136px;
    max-width: 176px;
    height: 48px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    color: #ececf1;
    cursor: pointer;
    padding: 5px 8px 5px 5px;
}

.ai-selected-images img,
.ai-image-library-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}

.ai-selected-images span,
.ai-image-library-grid span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.ai-selected-images b {
    color: #cfd6e2;
    font-size: 17px;
    line-height: 1;
}

.ai-image-library {
    max-height: 218px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    background: rgba(18,19,22,0.76);
    padding: 10px;
}

.ai-image-library-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.ai-image-library-head strong {
    color: #f2f5ff;
    font-size: 13px;
}

.ai-image-library-head small {
    color: var(--muted);
    font-size: 12px;
}

.ai-image-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 8px;
}

.ai-image-library-grid button {
    min-width: 0;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    color: #ececf1;
    cursor: pointer;
    padding: 6px;
    text-align: left;
}

.ai-image-library-grid button.active {
    border-color: rgba(138,180,248,0.45);
    box-shadow: 0 0 0 3px rgba(138,180,248,0.1);
}

.ai-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(8,9,12,0.62);
    backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ai-modal-backdrop[hidden] {
    display: none;
}

.ai-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ai-modal {
    width: min(440px, 100%);
    position: relative;
    display: grid;
    gap: 14px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.065), transparent 48%),
        #202124;
    box-shadow: 0 30px 90px rgba(0,0,0,0.46);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
}

.ai-modal-backdrop.is-open .ai-modal {
    transform: translateY(0) scale(1);
}

.ai-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #ececf1;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.ai-modal-kicker {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-modal h2 {
    margin: 0;
    padding-right: 34px;
    font-size: 24px;
    letter-spacing: 0;
}

.ai-modal p {
    margin: 0;
    color: #b9c0cc;
    line-height: 1.6;
}

.ai-modal input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    outline: none;
    font: inherit;
    padding: 0 14px;
}

.ai-modal input:focus {
    border-color: rgba(138,180,248,0.36);
    box-shadow: 0 0 0 4px rgba(138,180,248,0.08);
}

.ai-modal input.is-invalid {
    border-color: rgba(234,67,53,0.62);
}

.ai-project-style-editor {
    display: grid;
    gap: 13px;
}

.ai-project-style-editor[hidden] {
    display: none;
}

.ai-project-style-editor > div {
    display: grid;
    gap: 8px;
}

.ai-project-icon-options,
.ai-project-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-project-icon-options button,
.ai-project-color-options button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 13px;
    background: rgba(255,255,255,0.055);
    color: #f3f6ff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}

.ai-project-color-options button {
    background: var(--project-color);
}

.ai-project-icon-options button.active,
.ai-project-color-options button.active {
    border-color: rgba(255,255,255,0.74);
    box-shadow: 0 0 0 3px rgba(138,180,248,0.16);
}

.ai-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ai-modal-backdrop.is-danger .ai-modal .primary-btn {
    background: var(--red);
    color: #fff;
}

.ai-toast-region {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 620;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.ai-toast {
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 4px solid var(--green);
    border-radius: 14px;
    background: rgba(31,31,31,0.96);
    color: #f3f6fb;
    box-shadow: 0 18px 50px rgba(0,0,0,0.32);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ai-toast-error {
    border-left-color: var(--red);
}

.ai-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.code-soon-page {
    align-items: flex-start;
    padding-top: 72px;
}

.code-soon-card {
    max-width: 1060px;
}

.code-release-card {
    margin-top: 26px;
}

.eac-locked-card {
    max-width: 980px;
}

body.eac-body .global-profile-slot {
    top: 8px;
    right: 376px;
}

.eac-app {
    --eac-bg: #282c34;
    --eac-bg-deep: #1e2227;
    --eac-panel: #21252b;
    --eac-panel-soft: #2c313a;
    --eac-activity: #181a1f;
    --eac-border: rgba(171,178,191,0.13);
    --eac-text: #abb2bf;
    --eac-bright: #d7dae0;
    --eac-muted: #7f8794;
    --eac-blue: #61afef;
    --eac-green: #98c379;
    --eac-yellow: #e5c07b;
    --eac-purple: #c678dd;
    --eac-red: #e06c75;
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: 50px 292px minmax(0, 1fr) 360px;
    background: var(--eac-bg);
    color: var(--eac-text);
    font-family: "Parkinsans", Arial, sans-serif;
    overflow: hidden;
}

.eac-app button,
.eac-app input,
.eac-app textarea {
    font: inherit;
}

.eac-activitybar {
    min-height: 0;
    display: grid;
    grid-template-rows: auto repeat(4, 48px) minmax(0, 1fr) 48px;
    align-items: center;
    justify-items: center;
    padding: 8px 0;
    background: var(--eac-activity);
    border-right: 1px solid var(--eac-border);
}

.eac-activitybar button,
.eac-activitybar a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--eac-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.eac-activitybar button:hover,
.eac-activitybar button.active,
.eac-activitybar a:hover {
    color: var(--eac-bright);
    background: rgba(255,255,255,0.06);
}

.eac-brand {
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--eac-blue), var(--eac-green)) !important;
    color: #111419 !important;
}

.eac-sidebar,
.eac-chat-panel {
    min-width: 0;
    min-height: 0;
    background: var(--eac-panel);
    border-right: 1px solid var(--eac-border);
}

.eac-sidebar {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
}

.eac-sidebar-head,
.eac-topbar,
.eac-chat-panel header,
.eac-statusbar,
.eac-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eac-sidebar-head {
    justify-content: space-between;
}

.eac-sidebar-head span,
.eac-source-card span,
.eac-panel-title,
.eac-chat-panel header span,
.eac-modal-kicker {
    display: block;
    color: var(--eac-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.eac-sidebar-head strong,
.eac-chat-panel header strong {
    display: block;
    margin-top: 2px;
    color: var(--eac-bright);
    font-size: 16px;
}

.eac-sidebar-tools {
    display: inline-flex;
    gap: 5px;
}

.eac-sidebar-tools button,
.eac-connect-btn,
.eac-source-card button,
.eac-chat-compose button,
.eac-modal-actions button,
.eac-tutorial-actions button {
    border: 1px solid var(--eac-border);
    background: rgba(255,255,255,0.045);
    color: var(--eac-bright);
    cursor: pointer;
    font-weight: 900;
}

.eac-sidebar-tools button {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.eac-sidebar-tools button:hover,
.eac-connect-btn:hover,
.eac-source-card button:hover,
.eac-chat-compose button:not(:disabled):hover,
.eac-modal-actions button:hover,
.eac-tutorial-actions button:hover {
    border-color: rgba(97,175,239,0.42);
    background: rgba(97,175,239,0.12);
}

.eac-source-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(97,175,239,0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(97,175,239,0.11), rgba(152,195,121,0.06)), #252a32;
}

.eac-source-card strong {
    color: var(--eac-bright);
    font-size: 14px;
}

.eac-source-card p {
    margin: 0;
    color: var(--eac-muted);
    font-size: 12px;
    line-height: 1.45;
}

.eac-source-card button,
.eac-connect-btn {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 7px;
}

.eac-tree-wrap {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
}

.eac-tree {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    scrollbar-color: #4b5263 transparent;
}

.eac-tree-row {
    width: 100%;
    min-height: 30px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--eac-text);
    cursor: pointer;
    padding: 0 8px;
    text-align: left;
}

.eac-tree-row:hover,
.eac-tree-row.active {
    background: rgba(97,175,239,0.12);
    color: var(--eac-bright);
}

.eac-tree-row span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eac-tree-row .folder {
    color: var(--eac-yellow);
}

.eac-tree-row .file {
    color: var(--eac-blue);
}

.eac-tree-empty {
    color: var(--eac-muted);
    font-size: 13px;
    padding: 12px 8px;
}

.eac-editor-shell {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    background: var(--eac-bg);
}

.eac-topbar {
    min-height: 46px;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--eac-border);
    background: #242832;
}

.eac-window-dots {
    display: inline-flex;
    gap: 7px;
}

.eac-window-dots span {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--eac-red);
}

.eac-window-dots span:nth-child(2) {
    background: var(--eac-yellow);
}

.eac-window-dots span:nth-child(3) {
    background: var(--eac-green);
}

.eac-tabs {
    min-height: 42px;
    overflow-x: auto;
    border-bottom: 1px solid var(--eac-border);
    background: var(--eac-bg-deep);
}

.eac-tab {
    min-width: 150px;
    max-width: 220px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--eac-border);
    background: transparent;
    color: var(--eac-muted);
    cursor: pointer;
    font-weight: 800;
}

.eac-tab.active {
    background: var(--eac-bg);
    color: var(--eac-bright);
    box-shadow: inset 0 2px 0 var(--eac-blue);
}

.eac-breadcrumb {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--eac-border);
    color: var(--eac-muted);
    font-size: 12px;
}

.eac-editor-area {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.eac-editor-area textarea {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    padding: 18px 20px 80px;
    border: 0;
    outline: 0;
    resize: none;
    background: var(--eac-bg);
    color: var(--eac-bright);
    font-family: Consolas, "Cascadia Code", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    tab-size: 4;
}

.eac-editor-area textarea:disabled {
    opacity: 0.45;
}

.eac-editor-empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: var(--eac-bg);
}

.eac-editor-empty span {
    color: var(--eac-blue);
    font-weight: 900;
}

.eac-editor-empty strong {
    color: var(--eac-bright);
    font-size: clamp(26px, 4vw, 44px);
}

.eac-editor-empty p {
    max-width: 560px;
    margin: 0;
    color: var(--eac-muted);
    line-height: 1.6;
}

.eac-statusbar {
    min-height: 26px;
    justify-content: space-between;
    padding: 0 12px;
    background: #007acc;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.eac-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-right: 0;
    border-left: 1px solid var(--eac-border);
}

.eac-chat-panel header {
    justify-content: space-between;
    min-height: 64px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--eac-border);
}

.eac-chat-panel header small {
    padding: 5px 8px;
    border: 1px solid rgba(224,108,117,0.24);
    border-radius: 999px;
    color: var(--eac-red);
    font-weight: 900;
}

.eac-chat-panel.is-ready header small {
    border-color: rgba(152,195,121,0.28);
    color: var(--eac-green);
}

.eac-chat-log {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    overflow: auto;
    padding: 14px;
}

.eac-chat-message {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    line-height: 1.55;
    font-size: 13px;
}

.eac-chat-message strong {
    color: var(--eac-blue);
    font-size: 12px;
}

.eac-chat-message.user {
    border-color: rgba(152,195,121,0.2);
    background: rgba(152,195,121,0.08);
}

.eac-chat-message.user strong {
    color: var(--eac-green);
}

.eac-chat-compose {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--eac-border);
    background: #242832;
}

.eac-chat-compose textarea {
    width: 100%;
    min-height: 88px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: #1b1f27;
    color: var(--eac-bright);
    outline: 0;
    resize: vertical;
    padding: 11px;
}

.eac-chat-compose textarea:focus {
    border-color: rgba(97,175,239,0.5);
    box-shadow: 0 0 0 3px rgba(97,175,239,0.09);
}

.eac-chat-compose button {
    min-height: 40px;
    border-radius: 8px;
}

.eac-chat-compose button:disabled,
.eac-chat-compose textarea:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.eac-tutorial,
.eac-modal {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(10,12,16,0.72);
    backdrop-filter: blur(16px);
}

.eac-tutorial[hidden],
.eac-modal[hidden] {
    display: none;
}

.eac-tutorial section,
.eac-modal section {
    width: min(760px, 100%);
    border: 1px solid rgba(97,175,239,0.2);
    border-radius: 8px;
    background: #21252b;
    box-shadow: 0 24px 90px rgba(0,0,0,0.45);
}

.eac-tutorial section {
    padding: 28px;
}

.eac-tutorial-progress {
    color: var(--eac-blue);
    font-weight: 900;
}

.eac-tutorial h2,
.eac-modal h2 {
    margin: 10px 0;
    color: var(--eac-bright);
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: 0;
}

.eac-tutorial > section > p,
.eac-form-note {
    color: var(--eac-muted);
    line-height: 1.6;
}

.eac-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.eac-tutorial-grid article {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}

.eac-tutorial-grid span {
    color: var(--eac-purple);
    font-size: 12px;
    font-weight: 900;
}

.eac-tutorial-grid strong {
    display: block;
    margin: 8px 0 6px;
    color: var(--eac-bright);
}

.eac-tutorial-grid p {
    margin: 0;
    color: var(--eac-muted);
    font-size: 13px;
    line-height: 1.5;
}

.eac-tutorial-actions,
.eac-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.eac-tutorial-actions button,
.eac-modal-actions button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
}

.eac-tutorial-actions button:last-child,
.eac-modal-actions button:last-child {
    border-color: rgba(97,175,239,0.4);
    background: var(--eac-blue);
    color: #10151d;
}

.eac-modal section {
    position: relative;
    max-width: 560px;
    padding: 24px;
}

.eac-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--eac-bright);
    cursor: pointer;
}

.eac-modal form,
.eac-modal label {
    display: grid;
    gap: 8px;
}

.eac-modal form {
    gap: 14px;
}

.eac-modal label span {
    color: var(--eac-muted);
    font-size: 12px;
    font-weight: 900;
}

.eac-modal input[type="text"],
.eac-modal input[type="password"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: #1b1f27;
    color: var(--eac-bright);
    outline: 0;
    padding: 0 12px;
}

.eac-modal input:focus {
    border-color: rgba(97,175,239,0.52);
    box-shadow: 0 0 0 3px rgba(97,175,239,0.1);
}

.eac-source-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.eac-source-options label {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--eac-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    cursor: pointer;
}

.search-page {
    min-height: 100vh;
}

.search-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px 24px;
    background: rgba(31,31,31,0.85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}

.small-logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0;
    background: linear-gradient(90deg, #8ab4f8, #34a853, #fbbc05, #ea4335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 20px 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 26px;
    align-items: start;
}

.results-shell.personality-results-shell {
    max-width: min(1760px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
}

.results-shell.personality-results-shell .results-right {
    display: none;
}

.results-left {
    min-width: 0;
}

.results-right {
    position: sticky;
    top: 92px;
}

.results-meta {
    color: var(--muted);
    margin-bottom: 18px;
    font-size: 14px;
}

.section-title {
    color: var(--muted);
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.result-card,
.dictionary-card,
.admin-site-card,
.history-modern-card {
    background: rgba(31,31,31,0.92);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

.result-card {
    padding: 20px;
    margin-bottom: 16px;
    transition: 0.18s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    border-color: rgba(138,180,248,0.22);
}

.image-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.image-result-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(31,31,31,0.92);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    transition: 0.18s ease;
}

.image-result-card:hover {
    transform: translateY(-2px);
    border-color: rgba(138,180,248,0.22);
}

.image-result-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #151618;
}

.image-result-meta {
    display: grid;
    gap: 5px;
    padding: 12px;
}

.image-result-meta strong,
.image-result-meta small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.image-result-meta strong {
    -webkit-line-clamp: 2;
    color: var(--text);
    font-size: 14px;
}

.image-result-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--blue);
    font-size: 12px;
}

.image-result-meta small {
    -webkit-line-clamp: 2;
    color: var(--muted);
    font-size: 12px;
}

.sponsored-card {
    border-color: rgba(251,188,5,0.22);
    background: linear-gradient(180deg, rgba(43,38,24,0.65), rgba(31,31,31,0.95));
}

.sponsored-label {
    margin-bottom: 12px;
    color: #ffd76a;
    border-color: rgba(251,188,5,0.2);
}

.result-top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

.favicon,
.favicon-placeholder {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
}

.favicon {
    background: #fff;
    border: 1px solid rgba(255,255,255,0.06);
}

.favicon-placeholder {
    background: #3a3b3c;
}

.result-site-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-domain {
    font-size: 13px;
    color: var(--muted);
}

.result-title {
    font-size: 26px;
    line-height: 1.15;
    color: var(--blue);
    font-weight: 700;
}

.result-title:hover {
    text-decoration: underline;
}

.result-description {
    margin: 0;
    color: #d2d5d9;
    line-height: 1.7;
    font-size: 15px;
}

.result-contributor {
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.result-contributor strong {
    color: var(--blue);
}

.sublinks-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.sublink-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 14px;
    transition: 0.18s ease;
}

.sublink-card:hover {
    background: rgba(138,180,248,0.08);
    border-color: rgba(138,180,248,0.18);
}

.sublink-title {
    color: #dbe7ff;
    font-weight: 600;
}

.dictionary-card {
    padding: 24px;
}

.side-definition {
    min-height: 260px;
}

.dictionary-label {
    color: var(--blue);
    border-color: rgba(138,180,248,0.2);
}

.dictionary-word {
    margin: 10px 0 10px 0;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: 0;
}

.dictionary-definition {
    margin: 0;
    color: #d7dade;
    line-height: 1.8;
    font-size: 16px;
}

.dictionary-keywords {
    margin-top: 14px;
    color: var(--muted);
    font-size: 14px;
}

.empty-state {
    padding: 24px;
    border-radius: 24px;
    background: rgba(31,31,31,0.9);
    border: 1px solid var(--line);
    color: var(--muted);
}

.no-results-report-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.search-report-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}

.search-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.search-report-copy {
    min-width: 0;
}

.search-report-title {
    margin: 12px 0 8px 0;
    color: var(--text);
    font-size: clamp(24px, 3.6vw, 32px);
    line-height: 1.15;
    letter-spacing: 0;
}

.search-report-text {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.search-report-toggle {
    height: 42px;
    padding: 0 16px;
    flex-shrink: 0;
}

.search-report-form-wrap {
    display: none;
}

.search-report-form-wrap.is-open {
    display: block;
}

.no-results-copy h2 {
    margin: 0 0 10px 0;
    color: var(--text);
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.15;
    letter-spacing: 0;
}

.no-results-copy p {
    margin: 0;
    max-width: 760px;
    color: var(--muted);
    line-height: 1.75;
}

.no-results-report-form {
    margin-top: 2px;
}

.no-results-report-meta {
    width: fit-content;
}

.report-submit-row,
.report-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.report-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-form-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-form-separator::before,
.report-form-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.report-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.report-file-field input {
    padding: 12px 14px;
    height: auto;
}

.admin-empty-state {
    min-height: auto;
}

.report-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.report-meta-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
}

.report-detail-box {
    margin: 0;
}

.report-text {
    margin: 0;
    color: #d7dade;
    line-height: 1.75;
    word-break: break-word;
}

.advanced-report-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.advanced-report-image-link {
    display: block;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
}

.advanced-report-image-link img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.advanced-version-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.advanced-version-card:first-of-type {
    border-top: 0;
}

.advanced-version-card span,
.advanced-version-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.advanced-resubmit-form {
    margin-top: 14px;
}

.load-more-wrap {
    text-align: center;
    margin-top: 26px;
}

/* HISTORY */

.history-modern-page {
    min-height: 100vh;
    padding: 34px 24px 60px;
    max-width: 1280px;
    margin: 0 auto;
}

.history-hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 26px;
    padding: 28px;
    background: rgba(31,31,31,0.92);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.history-hero h1 {
    margin: 10px 0 10px 0;
    font-size: 44px;
    letter-spacing: 0;
}

.history-hero p {
    margin: 0;
    color: var(--muted);
    max-width: 720px;
    line-height: 1.7;
}

.history-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.history-modern-card {
    display: block;
    padding: 20px;
    transition: 0.18s ease;
}

.history-modern-card:hover {
    transform: translateY(-3px);
    border-color: rgba(138,180,248,0.2);
}

.history-modern-top {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    margin-bottom: 14px;
    font-size: 13px;
}

.history-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
}

.history-modern-query {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    word-break: break-word;
}

.history-modern-action {
    color: var(--blue);
    font-weight: 600;
}

.history-empty {
    margin-top: 12px;
}

.score-page {
    min-height: 100vh;
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 24px 60px;
}

.score-header {
    justify-content: space-between;
    margin-bottom: 28px;
}

.score-header h1 {
    margin: 12px 0 0;
    font-size: clamp(34px, 6vw, 58px);
    line-height: 1;
}

.score-podium {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
    gap: 14px;
    align-items: end;
    margin-bottom: 22px;
}

.score-podium-card {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(31,31,31,0.92);
    box-shadow: var(--shadow);
    text-align: center;
}

.score-podium-card span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(138,180,248,0.16);
    color: var(--blue);
    font-weight: 900;
}

.score-podium-card .score-avatar {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(138,180,248,0.12);
    margin: 0 auto;
}

.score-podium-card .score-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.score-podium-card .score-avatar span {
    color: var(--text);
    font-size: 32px;
    font-weight: 900;
}

.score-podium-card strong {
    font-size: clamp(22px, 3vw, 34px);
}

.score-podium-card small {
    color: var(--muted);
    font-weight: 800;
}

.score-rank-1 {
    order: 2;
    min-height: 260px;
    border-color: rgba(251,188,5,0.35);
}

.score-rank-2 {
    order: 1;
    min-height: 220px;
}

.score-rank-3 {
    order: 3;
    min-height: 200px;
}

.score-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.score-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(31,31,31,0.9);
}

.score-row span {
    color: var(--blue);
    font-weight: 900;
}

.score-row-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.score-row-user .score-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(138,180,248,0.14);
}

.score-row-user .score-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.score-row-user .score-avatar span {
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.score-user-meta strong {
    display: block;
}

.score-row-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.score-row-summary small.score-row-level {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(138,180,248,0.14);
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 700;
}

.score-user-meta small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.score-row em {
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
}

.score-updated {
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.account-page {
    min-height: 100vh;
    background: #1f1f1f;
}

.account-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
}

.account-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}

.account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.account-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 800;
    transition: background 0.18s ease, transform 0.18s ease;
}

.account-sidebar a:hover,
.account-sidebar a.active {
    background: rgba(138,180,248,0.15);
    transform: translateX(3px);
}

.account-sidebar span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #8ab4f8;
    color: #0f1115;
    font-weight: 900;
}

.account-main {
    min-width: 0;
}

.account-hero {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 22px;
    padding: 26px 18px 24px;
    overflow: hidden;
    text-align: center;
}

.account-shapes {
    position: absolute;
    top: 32px;
    left: 50%;
    z-index: 0;
    width: min(620px, calc(100% - 24px));
    height: 100px;
    transform: translateX(-50%);
    opacity: 0.9;
    pointer-events: none;
}

.account-shapes span {
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 24px;
    animation: accountFloat 5s ease-in-out infinite;
}

.account-shapes span:nth-child(1) {
    left: 7%;
    top: 19px;
    background: linear-gradient(135deg, #9da8ff, #4285f4);
}

.account-shapes span:nth-child(2) {
    left: 27%;
    top: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7ed957, #8ab4f8);
    animation-delay: 0.4s;
}

.account-shapes span:nth-child(3) {
    right: 27%;
    top: 25px;
    background: linear-gradient(135deg, #fbbc05, #fdd663);
    transform: rotate(45deg);
    animation-delay: 0.8s;
}

.account-shapes span:nth-child(4) {
    right: 7%;
    top: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff8a80, #ea4335);
    animation-delay: 1.2s;
}

@keyframes accountFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(8deg); }
}

.account-photo {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 46px rgba(0,0,0,0.35);
}

.account-photo img,
.account-photo span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background: linear-gradient(135deg, #8ab4f8, #34a853);
    color: #0f1115;
    font-size: 38px;
    font-weight: 900;
}

.account-hero h1,
.account-hero p,
.account-hero-tags {
    position: relative;
    z-index: 1;
}

.account-hero h1 {
    margin: 16px 0 6px;
    font-size: clamp(30px, 5vw, 48px);
}

.account-hero p {
    margin: 0;
    color: var(--blue);
    font-weight: 800;
}

.account-hero-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.account-search {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    margin: 28px auto 4px;
}

.account-search span {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(229,236,248,0.88);
    font-size: 18px;
    pointer-events: none;
}

.account-search input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: #eef3ff;
    font: inherit;
    font-weight: 750;
    padding: 0 20px 0 52px;
    outline: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.account-search input::placeholder {
    color: rgba(229,236,248,0.84);
}

.account-search input:focus {
    border-color: rgba(142,231,245,0.45);
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 0 4px rgba(142,231,245,0.08);
}

.account-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.account-pill-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--blue);
}

.account-welcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.mini-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 180px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 46px rgba(0,0,0,0.12);
}

.mini-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.mini-card-top span {
    color: var(--muted);
    font-size: 0.95rem;
}

.mini-card-top strong {
    font-size: 2rem;
    line-height: 1;
}

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

.profile-metrics span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 0.95rem;
}

.quick-actions {
    display: grid;
    gap: 10px;
}

.quick-actions a {
    display: inline-flex;
    justify-content: center;
}

.progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #8ab4f8, #34a853);
}

@media (max-width: 1000px) {
    .account-welcome-grid {
        grid-template-columns: 1fr;
    }

    .account-ai-grid,
    .account-ai-metrics,
    .account-theme-grid {
        grid-template-columns: 1fr;
    }
}

.account-form {
    max-width: 820px;
    margin: 0 auto;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255,255,255,0.03);
}

.account-section h2 {
    margin: 0 0 4px;
}

.account-section p {
    margin: 0;
    color: var(--muted);
}

.account-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.account-ai-section {
    max-width: 1040px;
    margin: 0 auto 24px;
}

.account-ai-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-ai-tabs button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0 14px;
}

.account-ai-tabs button.active,
.account-ai-tabs button:hover {
    background: rgba(138,180,248,0.16);
    border-color: rgba(138,180,248,0.32);
}

.account-ai-panel {
    display: block;
}

.account-ai-panel[hidden] {
    display: none;
}

.account-ai-grid,
.account-ai-metrics,
.account-theme-grid {
    display: grid;
    gap: 14px;
}

.account-ai-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.account-ai-metrics,
.account-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-ai-card,
.account-ai-metrics article,
.account-theme-option {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    padding: 16px;
}

.account-ai-card {
    display: grid;
    gap: 14px;
}

.account-empty-note,
.account-ai-note {
    color: var(--muted);
    font-size: 14px;
}

.account-memory-list {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
}

.account-memory-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
}

.account-memory-row span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.account-memory-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-memory-row form {
    margin: 0;
}

.account-memory-row button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.account-inline-form,
.account-theme-form {
    display: grid;
    gap: 10px;
}

.account-inline-form input,
.account-inline-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #303134;
    color: var(--text);
    font: inherit;
    padding: 0 12px;
}

.account-suggestion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-suggestion-list span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(138,180,248,0.12);
    color: #dce8ff;
    font-size: 12px;
    font-weight: 800;
}

.account-ai-metrics article {
    display: grid;
    gap: 8px;
}

.account-ai-metrics span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.account-ai-metrics strong {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1;
}

.account-theme-option {
    position: relative;
    display: grid;
    gap: 8px;
    cursor: pointer;
}

.account-theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-theme-option.active {
    border-color: rgba(138,180,248,0.48);
    box-shadow: 0 0 0 3px rgba(138,180,248,0.1);
}

.account-theme-option.locked {
    cursor: not-allowed;
    opacity: 0.62;
}

.account-theme-option strong {
    color: #fff;
}

.account-theme-option small,
.account-theme-option em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.account-theme-option em {
    color: #fbbc04;
    font-weight: 900;
}

.account-theme-preview {
    height: 76px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, #202124, #2f2f2f 55%, #8ab4f8);
}

.account-theme-preview-soft {
    background: linear-gradient(135deg, #f7f8fb, #e9eef8 55%, #8ab4f8);
}

.account-theme-preview-focus {
    background: linear-gradient(135deg, #0f1115, #121826 55%, #34a853);
}

.account-theme-preview-premium {
    background: linear-gradient(135deg, #14100a, #342719 54%, #fbbc04);
}

.history-tools {
    margin-bottom: 18px;
}

.history-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 18px;
    background: rgba(31,31,31,0.92);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.history-search-input {
    min-width: 0;
}

/* ADMIN */

.admin-header {
    justify-content: space-between;
    margin-bottom: 18px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-tab {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}

.admin-tab.active {
    background: rgba(138,180,248,0.14);
    border-color: rgba(138,180,248,0.2);
    color: var(--blue);
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
}

.admin-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.password-reveal-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.admin-password-reveal-output {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(138, 180, 248, 0.18);
    border-radius: 14px;
    background: rgba(24, 28, 34, 0.96);
    color: #f1f5ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    word-break: break-word;
}

.admin-login-history {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(138, 180, 248, 0.14);
    border-radius: 14px;
    background: rgba(24, 28, 34, 0.9);
}

.admin-login-history strong {
    display: block;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.admin-login-history ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-login-history li {
    margin-bottom: 8px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
}

.admin-login-history li:last-child {
    margin-bottom: 0;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.admin-checkbox input {
    width: auto;
    height: auto;
}

.admin-sites-list {
    display: grid;
    gap: 14px;
}

.admin-site-card {
    padding: 18px;
}

.admin-site-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.admin-priority-badge {
    color: #ffd76a;
    border-color: rgba(251,188,5,0.2);
}

.admin-site-url {
    color: var(--blue);
    font-size: 14px;
    margin-bottom: 8px;
    word-break: break-all;
}

.admin-site-desc {
    color: #d7dade;
    line-height: 1.6;
}

.admin-site-flags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.user-admin-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
}

.user-admin-head .profile-avatar-large {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.user-admin-head p {
    margin: 4px 0 0;
    color: var(--muted);
}

.sponsor-flag {
    color: #ffd76a;
    border-color: rgba(251,188,5,0.2);
}

/* RESPONSIVE */

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

    .results-right {
        position: static;
        order: -1;
    }
}

@media (max-width: 900px) {
    .search-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .search-header .small-logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .search-header .header-links {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 46px;
    }

    .search-header .search-form-inline {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
    }

    .search-form,
    .search-form-inline,
    .admin-two-cols {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .search-mode-tabs,
    .search-suggest-wrap,
    .search-form .primary-btn,
    .search-form-inline .primary-btn {
        width: 100%;
    }

    .search-mode-btn {
        flex: 1;
    }

    .global-profile-slot {
        top: 12px;
        right: 12px;
    }

    .profile-popover {
        position: fixed;
        top: 66px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        transform-origin: top right;
    }

    .hero-card {
        padding: 34px 22px;
    }

    .history-hero {
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .logo {
        font-size: 54px;
    }

    .history-hero h1 {
        font-size: 34px;
    }

    .dictionary-word {
        font-size: 30px;
    }

    .result-title {
        font-size: 22px;
    }
}
.search-tabs-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.search-tab-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    font-weight: 700;
    transition: 0.18s ease;
}

.search-tab-link:hover {
    color: var(--blue);
    border-color: rgba(138,180,248,0.2);
}

.search-tab-link.active {
    background: rgba(138,180,248,0.14);
    border-color: rgba(138,180,248,0.2);
    color: var(--blue);
}
.danger-btn {
    border: none;
    background: linear-gradient(135deg, #ea4335 0%, #cf3a2d 100%);
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 10px 24px rgba(234,67,53,0.22);
    height: 46px;
    padding: 0 18px;
    font-family: inherit;
}

.danger-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(234,67,53,0.28);
}

.admin-dictionary-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 18px;
    align-items: start;
}

.admin-search-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.admin-search-input {
    min-width: 0;
}

.admin-search-empty {
    margin-bottom: 14px;
}

.compact-list,
.admin-dictionary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compact-item {
    background: rgba(31,31,31,0.94);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.compact-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
}

.compact-summary::-webkit-details-marker {
    display: none;
}

.compact-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compact-main strong {
    font-size: 15px;
    line-height: 1.2;
}

.compact-url,
.compact-muted {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
}

.compact-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mini-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.compact-arrow {
    color: var(--blue);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.compact-item[open] .compact-arrow {
    transform: rotate(180deg);
}

.compact-content {
    border-top: 1px solid var(--line);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sublinks-editor {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.02);
}

.mini-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sublink-row {
    display: grid;
    grid-template-columns: 90px 1fr 1.4fr;
    gap: 10px;
    margin-bottom: 10px;
}

.sublink-row:last-child {
    margin-bottom: 0;
}

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

@media (max-width: 700px) {
    .sublink-row,
    .admin-two-cols {
        grid-template-columns: 1fr;
    }

    .compact-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-meta {
        width: 100%;
        justify-content: space-between;
    }

    .report-actions,
    .report-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .report-actions .primary-btn,
    .report-actions .secondary-btn,
    .report-submit-row .primary-btn,
    .report-submit-row .secondary-btn {
        width: 100%;
    }

    .admin-search-tools {
        grid-template-columns: 1fr;
    }
}
.weekly-game-card {
    margin: 34px auto 0;
    max-width: 880px;
    text-align: left;
    background: rgba(31,31,31,0.92);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 18px;
    box-shadow: var(--shadow);
    animation: fadeUp 0.5s ease;
}

.weekly-game-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    background: rgba(138,180,248,0.10);
    border: 1px solid rgba(138,180,248,0.18);
    margin-bottom: 14px;
}

.weekly-game-content {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: center;
}

.weekly-game-image {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #2d2f31;
}

.weekly-game-text h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    letter-spacing: 0;
}

.weekly-game-text p {
    margin: 0 0 12px 0;
    color: var(--muted);
    line-height: 1.65;
}

.weekly-game-end {
    color: #ffd76a;
    font-weight: 700;
    margin-bottom: 14px;
}

.weekly-game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8ab4f8 0%, #5c98f6 100%);
    color: #0f1115;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(90,152,246,0.25);
}

.weekly-game-btn:hover {
    transform: translateY(-1px);
}

.featured-game-result {
    border: 1px solid rgba(138,180,248,0.28);
    background: linear-gradient(180deg, rgba(31,31,31,0.98), rgba(36,42,53,0.95));
}

.featured-game-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(138,180,248,0.10);
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(138,180,248,0.18);
    margin-bottom: 12px;
}

.game-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.game-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8ab4f8 0%, #5c98f6 100%);
    color: #0f1115;
    font-weight: 800;
}

/* PERSONALITIES */

.personality-result-card {
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(31,31,31,0.94);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

.personality-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.personality-result-heading h2 {
    margin: 0 0 4px 0;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.02;
    letter-spacing: 0;
}

.personality-result-heading p {
    margin: 0;
    color: #d2d5d9;
    line-height: 1.5;
}

.personality-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.personality-tabs button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--text);
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.personality-tabs button.active,
.personality-tabs button:hover {
    border-color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.02);
}

.personality-google-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr) minmax(220px, 0.95fr);
    gap: 16px;
    align-items: stretch;
}

.personality-media-grid {
    min-height: 260px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 3px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
}

.personality-main-photo,
.personality-side-photos img,
.personality-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.personality-side-photos {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 0;
}

.personality-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    color: var(--blue);
    font-size: 72px;
    font-weight: 800;
    background: rgba(138,180,248,0.10);
}

.personality-info-panel,
.personality-fact-card,
.personality-reference-card,
.personality-section-block,
.personality-section-item {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05);
    border-radius: 18px;
}

.personality-info-panel {
    padding: 16px;
    min-height: 260px;
}

.personality-source-line {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.personality-source-line span,
.personality-fact-card span,
.personality-reference-card span,
.personality-group-label,
.personality-section-item span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.personality-source-line strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1.25;
}

.personality-info-panel p {
    margin: 0;
    color: #d7dade;
    line-height: 1.65;
    font-size: 14px;
}

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

.personality-fact-card,
.personality-reference-card {
    min-height: 116px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.personality-fact-card strong,
.personality-reference-card strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1.25;
}

.personality-fact-card small,
.personality-reference-card small {
    color: #d2d5d9;
    line-height: 1.45;
}

.personality-size-wide {
    grid-column: 1 / -1;
}

.personality-size-large {
    grid-column: span 2;
    min-height: 160px;
}

.personality-position-left {
    text-align: left;
    justify-items: start;
}

.personality-position-center {
    text-align: center;
    justify-items: center;
}

.personality-position-right {
    text-align: right;
    justify-items: end;
}

.personality-mini-photos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.personality-mini-photos img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.18);
}

.personality-reference-card {
    color: inherit;
}

.personality-reference-card:hover {
    border-color: rgba(138,180,248,0.24);
    background: rgba(138,180,248,0.08);
}

.personality-sections-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.personality-section-block {
    padding: 14px;
}

.personality-section-block h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.personality-section-block > p {
    margin: 0 0 12px 0;
    color: var(--muted);
    line-height: 1.55;
}

.personality-section-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.personality-section-item {
    padding: 10px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: start;
}

.personality-section-item.no-image {
    grid-template-columns: 1fr;
}

.personality-section-item img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
}

.personality-section-item strong {
    display: block;
    margin-bottom: 4px;
    line-height: 1.25;
}

.personality-section-item p {
    margin: 6px 0 0;
    color: #d2d5d9;
    line-height: 1.45;
    font-size: 13px;
}

.personality-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.personality-admin-editor,
.personality-admin-preview {
    min-width: 0;
}

.personality-admin-result-card {
    margin-bottom: 0;
}

.personality-search-tools {
    margin-top: 18px;
}

.personality-import-preview {
    margin-top: 18px;
}

.personality-add-row-btn {
    margin-top: 10px;
}

.personality-quick-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.personality-quick-row:last-child {
    margin-bottom: 0;
}

.personality-photo-row {
    grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 0.9fr) 120px 120px;
}

.personality-fact-row {
    grid-template-columns: minmax(130px, 0.8fr) minmax(160px, 1fr) minmax(160px, 1fr) 120px 120px;
}

.personality-element-row {
    grid-template-columns: 74px minmax(140px, 0.9fr) minmax(140px, 0.9fr) 110px minmax(140px, 1fr) minmax(160px, 1.1fr) minmax(160px, 1.1fr) 120px 120px;
}

@media (max-width: 800px) {
    .weekly-game-content {
        grid-template-columns: 1fr;
    }

    .weekly-game-image {
        height: 210px;
    }
}
.next-game-card {
    border-color: rgba(255, 215, 106, 0.2);
    background: linear-gradient(180deg, rgba(43,38,24,0.45), rgba(31,31,31,0.92));
}

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stats-overview-grid-query {
    margin-top: 18px;
}

.stats-overview-card,
.stats-panel {
    background: rgba(31,31,31,0.94);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.stats-overview-card {
    padding: 18px;
}

.stats-overview-card strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: 0;
}

.stats-overview-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.stats-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
    align-items: start;
}

.stats-panel {
    padding: 18px;
}

.stats-panel-wide {
    padding: 22px;
}

.stats-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.stats-panel-head-block {
    align-items: flex-start;
}

.stats-panel-text {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.ai-internal-memory-admin {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.ai-internal-memory-admin h3 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 0;
}

.ai-memory-admin-list,
.ai-memory-approved-list {
    display: grid;
    gap: 12px;
}

.ai-memory-admin-card,
.ai-memory-approved-list article {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.035);
}

.ai-memory-admin-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ai-memory-admin-card-head strong,
.ai-memory-approved-list strong {
    min-width: 0;
    color: #f7f8ff;
    line-height: 1.3;
}

.ai-memory-admin-card p,
.ai-memory-approved-list p {
    margin: 0;
    color: #d7deea;
    line-height: 1.62;
}

.ai-memory-admin-card small {
    color: var(--muted);
    line-height: 1.5;
}

.ai-memory-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.ai-memory-admin-meta span,
.ai-memory-approved-list span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
}

.ai-memory-admin-actions {
    display: grid;
    gap: 9px;
}

.ai-memory-admin-actions textarea {
    min-height: 58px;
    resize: vertical;
}

.ai-memory-admin-actions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
}

.stats-list-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-list-main strong {
    font-size: 15px;
    line-height: 1.3;
    word-break: break-word;
}

.stats-list-detail {
    max-height: 480px;
    overflow: auto;
    padding-right: 4px;
}

.stats-rank {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(138,180,248,0.14);
    color: var(--blue);
    border: 1px solid rgba(138,180,248,0.18);
    font-size: 13px;
    font-weight: 800;
}

.stats-rank-alert {
    background: rgba(251,188,5,0.12);
    color: #ffd76a;
    border-color: rgba(251,188,5,0.18);
}

.stats-filter-form {
    margin-top: 10px;
}

.stats-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(180px, 1fr) minmax(160px, 0.9fr) auto;
    gap: 12px;
    align-items: center;
}

.stats-select,
.stats-filter-grid input[type="month"] {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    padding: 0 16px;
    font: inherit;
    outline: none;
}

.stats-select:focus,
.stats-filter-grid input[type="month"]:focus {
    border-color: rgba(138,180,248,0.35);
    box-shadow: 0 0 0 4px rgba(138,180,248,0.08);
}

.stats-field-hidden {
    display: none;
}

.stats-query-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    margin-bottom: 18px;
}

.stats-query-header h2 {
    margin: 0;
    font-size: 30px;
    letter-spacing: 0;
}

.stats-chart-shell {
    margin: 18px 0;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    overflow-x: auto;
}

.stats-chart-grid {
    display: grid;
    align-items: end;
    gap: 10px;
    min-height: 240px;
}

.stats-chart-grid-year {
    grid-template-columns: repeat(12, minmax(46px, 1fr));
}

.stats-chart-grid-month {
    grid-auto-flow: column;
    grid-auto-columns: minmax(28px, 1fr);
    min-width: max-content;
}

.stats-chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.stats-chart-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.stats-chart-track {
    width: 100%;
    min-height: 176px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.stats-chart-fill {
    width: 100%;
    max-width: 34px;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, #8ab4f8 0%, #5c98f6 100%);
    box-shadow: 0 12px 28px rgba(90,152,246,0.24);
}

.stats-chart-fill.is-empty {
    background: rgba(255,255,255,0.08);
    box-shadow: none;
}

.stats-chart-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .stats-overview-grid,
    .stats-grid-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .personality-google-layout,
    .personality-admin-layout {
        grid-template-columns: 1fr;
    }

    .personality-info-panel {
        min-height: auto;
    }

    .personality-photo-row,
    .personality-fact-row,
    .personality-element-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .stats-overview-grid,
    .stats-grid-layout,
    .stats-filter-grid {
        grid-template-columns: 1fr;
    }

    .stats-panel-head,
    .stats-query-header,
    .stats-list-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-query-header .mini-badge,
    .stats-list-row .mini-badge {
        align-self: flex-start;
    }

    .stats-chart-grid-year {
        grid-auto-flow: column;
        grid-auto-columns: minmax(44px, 1fr);
        grid-template-columns: none;
        min-width: max-content;
    }

    .personality-result-heading {
        flex-direction: column;
    }

    .personality-tabs {
        justify-content: flex-start;
    }

    .personality-media-grid,
    .personality-fact-grid {
        grid-template-columns: 1fr;
    }

    .personality-side-photos {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        min-height: 120px;
    }

    .personality-size-large {
        grid-column: auto;
    }

    .personality-photo-row,
    .personality-fact-row,
    .personality-element-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.eac-body .global-profile-slot {
        top: 8px;
        right: 10px;
    }

    .eac-app {
        height: auto;
        min-height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(520px, 62dvh) minmax(380px, auto);
        overflow: visible;
    }

    .eac-activitybar {
        position: sticky;
        top: 0;
        z-index: 80;
        min-height: 50px;
        grid-template-columns: auto repeat(4, 44px) minmax(0, 1fr) 44px;
        grid-template-rows: 1fr;
        padding: 6px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--eac-border);
    }

    .eac-activitybar button,
    .eac-activitybar a {
        width: 36px;
        height: 36px;
    }

    .eac-sidebar {
        min-height: 360px;
        max-height: 48dvh;
        border-right: 0;
        border-bottom: 1px solid var(--eac-border);
    }

    .eac-topbar {
        min-height: auto;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .eac-topbar .product-switch {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .eac-tabs {
        min-height: 38px;
    }

    .eac-tab {
        min-width: 132px;
        min-height: 38px;
        font-size: 12px;
    }

    .eac-editor-area textarea {
        font-size: 13px;
        padding: 14px 14px 70px;
    }

    .eac-chat-panel {
        min-height: 380px;
        border-left: 0;
        border-top: 1px solid var(--eac-border);
    }

    .eac-tutorial,
    .eac-modal {
        align-items: start;
        overflow: auto;
    }

    .eac-tutorial section,
    .eac-modal section {
        margin: 18px 0;
    }

    .eac-tutorial-grid,
    .eac-source-options {
        grid-template-columns: 1fr;
    }

    .eac-tutorial-actions,
    .eac-modal-actions {
        flex-direction: column-reverse;
    }

    .eac-tutorial-actions button,
    .eac-modal-actions button {
        width: 100%;
    }

    .ai-app {
        grid-template-columns: 1fr;
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
    }

    .ai-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 200;
        width: min(88vw, 340px);
        height: 100dvh;
        display: flex;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 20px 0 70px rgba(0,0,0,0.38);
    }

    .ai-sidebar.is-open {
        transform: translateX(0);
    }

    .ai-app[data-ai-theme] .ai-sidebar.is-open {
        transform: translateX(0);
    }

    .ai-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
    }

    .ai-sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.ai-sidebar-open {
        overflow: hidden;
        touch-action: none;
    }

    .ai-sidebar .ai-project-list,
    .ai-sidebar .ai-memory-list,
    .ai-sidebar .ai-bundle-list,
    .ai-sidebar .ai-chat-list {
        -webkit-overflow-scrolling: touch;
    }

    .ai-sidebar .ai-project-box,
    .ai-sidebar .ai-memory-box,
    .ai-sidebar .ai-storage-box {
        flex: 0 0 auto;
    }

    .ai-sidebar .ai-project-list {
        max-height: 112px;
    }

    .ai-sidebar .ai-memory-list {
        max-height: 96px;
    }

    .ai-sidebar .ai-bundle-list {
        max-height: 110px;
    }

    .ai-sidebar .ai-chat-list-wrap {
        min-height: 160px;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .ai-sidebar .ai-chat-list {
        max-height: none;
        overflow-y: auto;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }

    .ai-mobile-close,
    .ai-mobile-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ai-main {
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
    }

    .ai-chat-header {
        min-height: 58px;
        padding: 8px 58px 8px 10px;
        align-items: center;
        background: rgba(32,33,36,0.94);
    }

    .ai-chat-header .product-switch {
        display: none;
    }

    .ai-chat-header .badge {
        display: none;
    }

    .ai-chat-header h1 {
        margin: 0;
        max-width: 46vw;
        overflow: hidden;
        font-size: 18px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ai-chat-stage {
        padding: 14px 12px var(--ai-compose-space, 150px);
        -webkit-overflow-scrolling: touch;
    }

    .ai-app .ai-chat-messages {
        width: 100%;
    }

    .ai-app .ai-message {
        margin-bottom: 16px;
    }

    .ai-app .ai-message-user {
        max-width: min(90%, 620px);
        padding: 12px 14px;
        border-radius: 18px;
    }

    .ai-app .ai-message-assistant {
        padding-right: 4px;
        padding-left: 4px;
    }

    .ai-empty-hero {
        margin-top: 5vh;
    }

    .ai-empty-hero p {
        font-size: 15px;
    }

    .ai-prompt-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ai-header-actions {
        margin-left: auto;
    }

    .ai-export-btn {
        min-height: 36px;
        padding: 0 11px;
        font-size: 13px;
    }

    .ai-compose-modern {
        left: 50%;
        width: calc(100% - 16px);
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 7px;
        padding: 8px;
        border-radius: 24px;
        margin-bottom: 0;
    }

    .ai-compose-intelligence {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 6px;
    }

    .ai-answer-modes button {
        padding: 0 10px;
    }

    .ai-pro-switch {
        padding: 0 9px;
    }

    .ai-compose-modern textarea {
        min-height: 44px;
        padding: 11px 8px;
        font-size: 15px;
    }

    .ai-tool-btn {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        font-size: 16px;
    }

    .ai-compose-modern .primary-btn {
        width: auto;
        min-width: 70px;
        height: 40px;
        padding: 0 11px;
        font-size: 13px;
    }

    .ai-image-library {
        max-height: 34vh;
    }

    .ai-memory-list {
        max-height: 118px;
    }

    .ai-modal {
        padding: 20px;
        border-radius: 18px;
    }

    .ai-modal-actions {
        flex-direction: column-reverse;
    }

    .ai-modal-actions .primary-btn,
    .ai-modal-actions .ai-ghost-btn {
        width: 100%;
    }

    .ai-toast-region {
        bottom: calc(var(--ai-compose-space, 150px) + 12px);
    }

    .ai-admin-mini-grid {
        grid-template-columns: 1fr;
    }

    .release-card,
    .ai-shell {
        grid-template-columns: 1fr;
    }

    .release-card {
        margin-right: 0;
    }

    .release-card a {
        width: 100%;
    }

    .ai-topbar {
        padding: 12px 66px 12px 14px;
        align-items: flex-start;
        flex-direction: column;
    }

    .ai-shell {
        width: min(100%, calc(100vw - 24px));
        padding: 18px 0 36px;
    }

    .ai-intro h1 {
        font-size: 36px;
    }

    .ai-chat-card {
        min-height: 560px;
    }

    .ai-compose {
        grid-template-columns: 1fr;
    }

    .ai-compose.ai-compose-modern {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ai-compose .primary-btn {
        width: 100%;
    }

    .ai-compose-modern .primary-btn {
        grid-column: auto;
        width: auto;
    }

    .ai-compose-modern .ai-compose-intelligence {
        grid-column: 1 / -1;
    }

    .ai-compose-modern .ai-compose-limit,
    .ai-compose-modern .ai-selected-images,
    .ai-compose-modern .ai-image-library,
    .ai-compose-modern .ai-image-generation-panel {
        grid-column: 1 / -1;
    }

    .ai-image-generation-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .ai-image-generation-head small {
        text-align: left;
    }

    .ai-image-models {
        grid-template-columns: 1fr;
    }

    .ai-compose-modern .ai-compose-limit {
        display: none;
    }

    .ai-compose-modern .ai-compose-tools {
        grid-column: 1 / -1;
        align-self: center;
        overflow-x: auto;
        padding-bottom: 0;
    }

    .ai-compose-modern textarea {
        grid-column: 1;
    }

    .ai-compose-modern .primary-btn {
        grid-column: 2;
    }

    .ai-selected-images button {
        min-width: 124px;
    }

    .search-header {
        padding: 12px 14px;
        position: sticky;
        top: 0;
    }

    .results-shell {
        padding: 18px 14px 42px;
        gap: 18px;
    }

    .result-card {
        padding: 16px;
        margin-bottom: 14px;
    }

    .result-top {
        align-items: flex-start;
    }

    .result-title {
        font-size: 22px;
    }

    .search-report-head {
        flex-direction: column;
        align-items: stretch;
    }

    .search-report-toggle {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }

    .search-report-form-wrap {
        display: none;
    }

    .search-report-form-wrap.is-open {
        display: block;
    }

    .history-search-form {
        grid-template-columns: 1fr;
    }

    .history-search-form .primary-btn,
    .history-search-form .secondary-btn {
        width: 100%;
    }

    .score-podium {
        grid-template-columns: 1fr;
    }

    .score-rank-1,
    .score-rank-2,
    .score-rank-3 {
        order: initial;
        min-height: 170px;
    }

    .score-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .score-row em {
        grid-column: 2;
    }

    .account-layout {
        grid-template-columns: 1fr;
        padding: 10px 14px 42px;
    }

    .account-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .account-sidebar a {
        flex: 0 0 auto;
    }

    .account-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .account-ai-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-memory-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .account-memory-row span {
        grid-column: 1 / -1;
    }

    .account-shapes {
        top: 26px;
        width: min(430px, calc(100% - 10px));
        height: 86px;
    }

    .account-shapes span {
        width: 44px;
        height: 44px;
        border-radius: 17px;
    }

    .account-shapes span:nth-child(1) {
        left: 3%;
    }

    .account-shapes span:nth-child(2) {
        left: 21%;
    }

    .account-shapes span:nth-child(3) {
        right: 21%;
    }

    .account-shapes span:nth-child(4) {
        right: 3%;
    }

    .account-search {
        margin-top: 22px;
    }

    .account-search input {
        min-height: 48px;
        font-size: 14px;
    }
}

@media (max-width: 520px) {
    .small-logo {
        font-size: 24px;
    }

    .page-center {
        align-items: flex-start;
        padding: 74px 12px 28px;
    }

    .hero-card {
        padding: 28px 16px;
        border-radius: 22px;
    }

    .logo {
        font-size: 50px;
        line-height: 1.05;
    }

    .subtitle {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .search-input {
        height: 54px;
        padding: 0 18px;
        font-size: 16px;
    }

    .search-suggestions {
        border-radius: 18px;
    }

    .profile-trigger {
        width: 42px;
        height: 42px;
    }

    .results-meta {
        margin-bottom: 14px;
    }

    .image-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .image-result-card {
        min-height: 210px;
        border-radius: 14px;
    }

    .image-result-meta {
        padding: 10px;
    }

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

    .history-modern-page {
        padding: 20px 14px 42px;
    }

    .history-hero {
        padding: 20px;
    }

    .history-hero h1 {
        font-size: 34px;
    }

    .history-modern-card {
        padding: 16px;
    }

    .history-modern-query {
        font-size: 20px;
    }
}

/* Europium V5 launch polish */

:root {
    --v5-surface: rgba(24,25,29,0.82);
    --v5-surface-strong: rgba(28,29,34,0.94);
    --v5-line: rgba(255,255,255,0.12);
    --v5-blue: #8ab4f8;
    --v5-green: #34d399;
    --v5-yellow: #fbbc05;
    --v5-red: #ff6b61;
    --v5-cyan: #67e8f9;
    --v5-purple: #a78bfa;
}

body {
    background:
        linear-gradient(125deg, rgba(138,180,248,0.10), transparent 28%),
        linear-gradient(235deg, rgba(52,211,153,0.08), transparent 32%),
        linear-gradient(180deg, #202124 0%, #17181b 58%, #111215 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 34%, rgba(138,180,248,0.08) 42%, transparent 51%),
        linear-gradient(245deg, transparent 0 38%, rgba(52,211,153,0.06) 48%, transparent 58%);
    background-size: 54px 54px, 54px 54px, 180% 180%, 190% 190%;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.16));
    animation: v5Atmosphere 18s ease-in-out infinite alternate;
}

.hero-card,
.auth-card,
.admin-card,
.history-card,
.ai-intro,
.ai-chat-card,
.result-card,
.dictionary-card,
.admin-site-card,
.history-modern-card,
.image-result-card,
.personality-result-card {
    position: relative;
    border-color: var(--v5-line);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026)),
        var(--v5-surface);
    box-shadow:
        0 28px 90px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-card {
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    transform: translateZ(0);
}

.hero-card::before,
.search-header::before,
.ai-chat-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 24%, rgba(138,180,248,0.13) 32%, transparent 42%),
        linear-gradient(250deg, transparent 0 30%, rgba(251,188,5,0.10) 42%, transparent 54%);
    opacity: 0.9;
    transform: translateX(-12%);
    animation: v5LightSweep 11s ease-in-out infinite alternate;
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 34%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 74px);
}

.badge,
.history-badge,
.dictionary-label,
.sponsored-label,
.flag-badge,
.admin-priority-badge,
.v5-kicker,
.v5-header-chip {
    border-color: rgba(138,180,248,0.24);
    background:
        linear-gradient(135deg, rgba(138,180,248,0.15), rgba(52,211,153,0.08)),
        rgba(255,255,255,0.045);
    color: #dce8ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.v5-kicker,
.v5-header-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    width: fit-content;
    padding: 0 11px;
    border: 1px solid rgba(138,180,248,0.26);
    border-radius: 999px;
    color: #eff6ff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.v5-header-chip {
    min-height: 34px;
    margin-left: -6px;
    white-space: nowrap;
}

.logo {
    position: relative;
    margin: 18px auto 12px;
    width: fit-content;
    font-size: clamp(58px, 10vw, 104px);
    letter-spacing: 0;
    background:
        linear-gradient(90deg, #8ab4f8 0%, #67e8f9 16%, #34d399 31%, #fbbc05 48%, #ff6b61 64%, #a78bfa 82%, #8ab4f8 100%);
    background-size: 340% auto;
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 12px rgba(138,180,248,0.22))
        drop-shadow(0 18px 34px rgba(0,0,0,0.28));
    animation: shine 4.7s linear infinite, v5LogoLift 5.6s ease-in-out infinite;
}

.small-logo {
    letter-spacing: 0;
    background:
        linear-gradient(90deg, #8ab4f8, #67e8f9, #34d399, #fbbc05, #ff6b61, #a78bfa, #8ab4f8);
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 6s linear infinite;
    filter: drop-shadow(0 0 12px rgba(138,180,248,0.18));
}

@keyframes shine {
    from { background-position: 0% center; }
    to { background-position: 340% center; }
}

@keyframes v5LogoLift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.012); }
}

.subtitle {
    color: #b8c0ce;
    font-size: clamp(16px, 2vw, 19px);
}

.v5-launch-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 8px auto 24px;
    padding: 18px;
    max-width: 900px;
    overflow: hidden;
    border: 1px solid rgba(138,180,248,0.24);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.13), rgba(52,211,153,0.06) 48%, rgba(251,188,5,0.08)),
        rgba(255,255,255,0.035);
    text-align: left;
}

.v5-launch-card::before,
.v5-search-announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 32%, rgba(255,255,255,0.16) 45%, transparent 58%);
    transform: translateX(-120%);
    animation: v5CardShimmer 7s ease-in-out infinite;
}

.v5-launch-copy {
    position: relative;
    min-width: 0;
}

.v5-launch-card h2 {
    margin: 9px 0 7px;
    color: #f4f7ff;
    font-size: clamp(23px, 3.6vw, 38px);
    line-height: 1.05;
    letter-spacing: 0;
}

.v5-launch-card p {
    margin: 0;
    color: #c3ccd9;
    line-height: 1.58;
}

.v5-launch-card a,
.v5-search-announcement a {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.25), rgba(52,211,153,0.18)),
        rgba(255,255,255,0.07);
    color: #f3f7ff;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.home-product-switch,
.product-switch,
.search-mode-tabs {
    border-color: rgba(255,255,255,0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
        rgba(20,21,24,0.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.home-product-switch a,
.product-switch a,
.product-switch button,
.search-mode-btn {
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.home-product-switch a:hover,
.home-product-switch a.active,
.product-switch a:hover,
.product-switch a.active,
.product-switch button:hover,
.product-switch button.active,
.search-mode-btn:hover,
.search-mode-btn.active {
    transform: translateY(-1px);
    background:
        linear-gradient(135deg, var(--v5-blue), var(--v5-cyan) 42%, var(--v5-green));
    color: #0f1115;
    box-shadow: 0 10px 22px rgba(103,232,249,0.18);
}

.search-input,
.auth-form input,
.admin-search-input,
.admin-form input,
.admin-form textarea,
.admin-form select,
.ai-compose-modern textarea {
    border-color: rgba(255,255,255,0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
        #26282d;
}

.search-input {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 12px 34px rgba(0,0,0,0.18);
}

.search-input:hover,
.search-input:focus,
.auth-form input:focus,
.admin-search-input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: rgba(103,232,249,0.42);
    box-shadow:
        0 0 0 4px rgba(103,232,249,0.09),
        0 16px 40px rgba(0,0,0,0.22);
}

.primary-btn,
.secondary-btn,
.auth-form button,
.ai-new-chat {
    background:
        linear-gradient(135deg, #8ab4f8 0%, #67e8f9 36%, #34d399 72%, #fbbc05 100%);
    background-size: 190% auto;
    color: #101318;
    box-shadow:
        0 14px 32px rgba(103,232,249,0.18),
        inset 0 1px 0 rgba(255,255,255,0.44);
}

.primary-btn:hover,
.secondary-btn:hover,
.auth-form button:hover,
.ai-new-chat:hover {
    transform: translateY(-2px);
    background-position: 100% center;
    box-shadow:
        0 20px 42px rgba(52,211,153,0.20),
        inset 0 1px 0 rgba(255,255,255,0.52);
}

.top-links a,
.auth-links a,
.header-links a,
.admin-header a,
.history-header a {
    transition: color 0.18s ease, transform 0.18s ease;
}

.top-links a:hover,
.auth-links a:hover,
.header-links a:hover,
.admin-header a:hover,
.history-header a:hover {
    transform: translateY(-1px);
    color: #67e8f9;
}

.search-page {
    background:
        linear-gradient(125deg, rgba(138,180,248,0.08), transparent 28%),
        linear-gradient(235deg, rgba(52,211,153,0.055), transparent 34%),
        #17181b;
}

.search-header {
    position: sticky;
    overflow: visible;
    border-bottom-color: rgba(255,255,255,0.11);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(22,23,27,0.84);
    box-shadow: 0 18px 54px rgba(0,0,0,0.20);
}

.search-header > * {
    position: relative;
    z-index: 1;
}

.search-header .search-form-inline {
    z-index: 30;
}

.search-header .search-suggest-wrap,
.search-header .search-suggestions {
    z-index: 100;
}

.v5-search-announcement {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    overflow: hidden;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid rgba(138,180,248,0.22);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.12), rgba(52,211,153,0.06) 52%, rgba(167,139,250,0.08)),
        rgba(255,255,255,0.035);
}

.v5-search-announcement span {
    display: block;
    margin-bottom: 4px;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.v5-search-announcement strong {
    display: block;
    color: #f4f7ff;
    font-size: clamp(18px, 2.4vw, 25px);
    line-height: 1.15;
}

.results-meta {
    color: #aeb8c8;
}

.result-card,
.image-result-card,
.dictionary-card {
    overflow: hidden;
    transition:
        transform 0.22s cubic-bezier(.2,.8,.2,1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.result-card::before,
.image-result-card::before,
.dictionary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(138,180,248,0.12), transparent 34%, rgba(52,211,153,0.08));
    opacity: 0;
    transition: opacity 0.22s ease;
}

.result-card:hover,
.image-result-card:hover,
.dictionary-card:hover {
    transform: translateY(-4px);
    border-color: rgba(103,232,249,0.28);
    box-shadow:
        0 26px 70px rgba(0,0,0,0.30),
        0 0 0 1px rgba(103,232,249,0.04);
}

.result-card:hover::before,
.image-result-card:hover::before,
.dictionary-card:hover::before {
    opacity: 1;
}

.result-title {
    color: #9ec5ff;
    letter-spacing: 0;
}

.result-title:hover {
    color: #67e8f9;
    text-decoration: none;
}

.result-description {
    color: #d7dce5;
}

.sublink-card {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sublink-card:hover {
    transform: translateY(-2px);
    border-color: rgba(103,232,249,0.24);
    background: rgba(103,232,249,0.065);
}

.image-result-card img {
    transition: transform 0.36s cubic-bezier(.2,.8,.2,1), filter 0.22s ease;
}

.image-result-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
}

.ai-app[data-ai-theme="europium"] {
    background:
        linear-gradient(125deg, rgba(138,180,248,0.10), transparent 30%),
        linear-gradient(235deg, rgba(52,211,153,0.07), transparent 34%),
        linear-gradient(180deg, #202124, #15161a 70%, #111215);
}

.ai-app[data-ai-theme="europium"] .ai-sidebar,
.ai-app[data-ai-theme="europium"] .ai-chat-header,
.ai-app[data-ai-theme="europium"] .ai-compose-modern {
    border-color: rgba(255,255,255,0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)),
        rgba(21,22,26,0.88);
    box-shadow:
        0 22px 70px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(255,255,255,0.055);
    backdrop-filter: blur(20px);
}

.ai-app[data-ai-theme="europium"] .ai-chat-header {
    position: sticky;
    overflow: hidden;
}

.ai-app[data-ai-theme="europium"] .ai-chat-header > * {
    position: relative;
    z-index: 1;
}

.ai-app[data-ai-theme="europium"] .ai-message-user {
    border-color: rgba(103,232,249,0.16);
    background:
        linear-gradient(135deg, rgba(138,180,248,0.14), rgba(52,211,153,0.07)),
        rgba(47,47,47,0.92);
}

.ai-app[data-ai-theme="europium"] .ai-message-assistant {
    border-bottom: 1px solid rgba(255,255,255,0.045);
}

.ai-app[data-ai-theme="europium"] .ai-tool-btn,
.ai-app[data-ai-theme="europium"] .ai-message-tools button,
.ai-app[data-ai-theme="europium"] .ai-project-item,
.ai-app[data-ai-theme="europium"] .ai-chat-row > button,
.ai-app[data-ai-theme="europium"] .ai-secondary-action {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
}

.ai-app[data-ai-theme="europium"] .ai-tool-btn:hover,
.ai-app[data-ai-theme="europium"] .ai-message-tools button:hover,
.ai-app[data-ai-theme="europium"] .ai-project-item:hover,
.ai-app[data-ai-theme="europium"] .ai-chat-row > button:hover,
.ai-app[data-ai-theme="europium"] .ai-chat-row.active > button {
    border-color: rgba(103,232,249,0.24);
    background: rgba(103,232,249,0.09);
}

.ai-app[data-ai-theme="europium"] .ai-empty-hero h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background:
        linear-gradient(90deg, #8ab4f8, #67e8f9, #34d399, #fbbc05, #ff6b61, #a78bfa, #8ab4f8);
    background-size: 280% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6s linear infinite;
}

@keyframes v5Atmosphere {
    from { background-position: 0 0, 0 0, 0% 50%, 100% 50%; }
    to { background-position: 18px 18px, -18px 22px, 100% 50%, 0% 50%; }
}

@keyframes v5LightSweep {
    from { transform: translateX(-18%); opacity: 0.48; }
    to { transform: translateX(18%); opacity: 0.95; }
}

@keyframes v5CardShimmer {
    0%, 52% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(120%); }
}

@media (max-width: 900px) {
    .v5-header-chip {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin: 34px 0 0;
        min-height: 28px;
        font-size: 11px;
    }

    .search-product-switch {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: center;
    }

    .search-header .search-form-inline {
        grid-row: 3;
    }

    .v5-launch-card,
    .v5-search-announcement {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .v5-launch-card a,
    .v5-search-announcement a {
        justify-self: start;
    }

    .search-header {
        padding: 12px 14px;
    }
}

@media (max-width: 640px) {
    body::before {
        background-size: 42px 42px, 42px 42px, 170% 170%, 180% 180%;
    }

    .page-center,
    .auth-page,
    .admin-page {
        padding: 18px 12px;
    }

    .hero-card {
        padding: 30px 16px;
        border-radius: 22px;
    }

    .logo {
        font-size: clamp(46px, 15vw, 64px);
        line-height: 1;
    }

    .subtitle {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .v5-launch-card {
        padding: 15px;
        border-radius: 18px;
    }

    .v5-launch-card h2 {
        font-size: 22px;
    }

    .home-product-switch,
    .product-switch {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .home-product-switch a,
    .product-switch a {
        flex: 1 0 auto;
        min-width: max-content;
    }

    .search-input {
        height: 54px;
        padding: 0 18px;
        font-size: 16px;
    }

    .results-shell {
        width: 100%;
        padding: 18px 12px 44px;
    }

    .v5-search-announcement,
    .result-card,
    .dictionary-card,
    .image-result-card {
        border-radius: 18px;
    }

    .result-card {
        padding: 16px;
    }

    .result-top {
        align-items: flex-start;
    }

    .result-title {
        font-size: 21px;
    }

    .image-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .image-result-card {
        min-height: 220px;
    }

    .ai-app[data-ai-theme="europium"] .ai-chat-header,
    .ai-app[data-ai-theme="europium"] .ai-compose-modern {
        box-shadow: 0 14px 42px rgba(0,0,0,0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* Europium Corporation Hub — Modern AAA Overhaul */
body.corporation-hub-page {
    min-height: 100vh;
    color: #f3f6fc;
    background-color: #07090e;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(56, 114, 224, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 50% at 90% 20%, rgba(52, 211, 153, 0.09), transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 80%, rgba(192, 132, 252, 0.08), transparent 60%),
        linear-gradient(180deg, #070a10 0%, #0c1018 50%, #06080d 100%);
    background-attachment: fixed;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: hidden;
}

/* Futuristic Loader */
.hub-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background:
        radial-gradient(circle at 50% 45%, rgba(66, 133, 244, 0.22), transparent 45%),
        linear-gradient(135deg, #05070a, #0b0f17);
    color: #f7fbff;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hub-loader-core {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
}

.hub-loader-rings {
    position: absolute;
    inset: 0;
}

.hub-loader-rings span {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: #8ab4f8;
    border-radius: 50%;
    animation: hubSpin 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.hub-loader-rings span:nth-child(2) {
    inset: 12px;
    border-top-color: #34d399;
    animation-duration: 2s;
    animation-direction: reverse;
}

.hub-loader-rings span:nth-child(3) {
    inset: 24px;
    border-top-color: #fbbf24;
    animation-duration: 1.1s;
}

.hub-loader-brand-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #8ab4f8, #34a853, #fbbc05);
    color: #070a0e;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 28px rgba(138, 180, 248, 0.45);
    animation: hubPulseGlow 2s ease-in-out infinite alternate;
}

.hub-loader-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.hub-loader-text strong {
    font-size: clamp(20px, 3.5vw, 30px);
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff 40%, #a6b8d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-loader-text small {
    color: rgba(220, 232, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

@keyframes hubSpin {
    to { transform: rotate(360deg); }
}

@keyframes hubPulseGlow {
    0% { transform: scale(0.96); box-shadow: 0 0 16px rgba(138, 180, 248, 0.3); }
    100% { transform: scale(1.04); box-shadow: 0 0 32px rgba(138, 180, 248, 0.6); }
}

/* Ambient Orbit & Spatial Effects */
.hub-orbit-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hub-glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    pointer-events: none;
}

.hub-glow-a {
    width: 600px;
    height: 600px;
    top: -150px;
    left: 20%;
    background: radial-gradient(circle, rgba(100, 160, 255, 0.16) 0%, transparent 70%);
}

.hub-glow-b {
    width: 500px;
    height: 500px;
    top: 40%;
    right: -100px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
}

.hub-glow-c {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.10) 0%, transparent 70%);
}

.hub-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    transform: rotate(-14deg);
    animation: hubDrift 16s ease-in-out infinite alternate;
}

.hub-orbit-a {
    width: 780px;
    height: 240px;
    top: 80px;
    right: -160px;
}

.hub-orbit-b {
    width: 620px;
    height: 190px;
    left: -180px;
    bottom: 220px;
    animation-delay: -3s;
    animation-duration: 20s;
}

.hub-orbit-c {
    width: 440px;
    height: 130px;
    right: 14%;
    bottom: 80px;
    animation-delay: -6s;
    animation-duration: 14s;
}

.hub-grid-light {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 80%);
}

@keyframes hubDrift {
    0% { transform: translateY(0) rotate(-14deg); }
    100% { transform: translateY(-24px) rotate(-9deg); }
}

/* Floating Glass Topbar */
.hub-topbar {
    position: sticky;
    top: 14px;
    z-index: 100;
    width: min(1340px, calc(100% - 32px));
    margin: 0 auto;
}

.hub-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(13, 17, 24, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 16px 40px -10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hub-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 3px 14px 3px 4px;
    border-radius: 999px;
    transition: transform 0.2s ease;
}

.hub-brand:hover {
    transform: translateY(-1px);
}

.hub-brand-badge {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #8ab4f8 0%, #34a853 50%, #fbbc05 100%);
    color: #05080c;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(138, 180, 248, 0.35);
}

.hub-brand-title {
    display: flex;
    flex-direction: column;
}

.hub-brand-title strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.1;
}

.hub-brand-title small {
    font-size: 11px;
    font-weight: 700;
    color: rgba(220, 235, 255, 0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hub-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
}

.hub-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: rgba(230, 240, 255, 0.75);
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.hub-nav-link svg {
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hub-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.hub-nav-link:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

.hub-nav-admin {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.18);
}

.hub-nav-admin:hover {
    color: #ffd86b;
    background: rgba(251, 191, 36, 0.16);
}

.hub-account-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 44px;
    justify-content: flex-end;
}

.hub-install-app {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(52, 168, 83, 0.38);
    border-radius: 999px;
    background: rgba(52, 168, 83, 0.12);
    color: #8ee6a5;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.22s ease;
}

.hub-install-app:hover {
    border-color: rgba(52, 168, 83, 0.7);
    background: rgba(52, 168, 83, 0.22);
    color: #fff;
    box-shadow: 0 0 18px rgba(52, 168, 83, 0.2);
    transform: translateY(-1px);
}

.hub-install-app[hidden] {
    display: none;
}

.hub-login-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(138, 180, 248, 0.28);
    background: linear-gradient(135deg, rgba(138, 180, 248, 0.16), rgba(66, 133, 244, 0.08));
    color: #8ab4f8;
    font-size: 13.5px;
    font-weight: 800;
    transition: all 0.22s ease;
}

.hub-login-pill:hover {
    border-color: rgba(138, 180, 248, 0.5);
    background: linear-gradient(135deg, rgba(138, 180, 248, 0.26), rgba(66, 133, 244, 0.18));
    color: #fff;
    box-shadow: 0 0 20px rgba(138, 180, 248, 0.25);
    transform: translateY(-1px);
}

/* Hub Shell Container */
.hub-shell {
    position: relative;
    z-index: 1;
    width: min(1340px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 52px) 0 80px;
}

/* Hero & Command Center Grid */
.hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    padding: clamp(20px, 3.5vw, 44px) 0 clamp(40px, 6vw, 64px);
}

.hub-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hub-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(138, 180, 248, 0.22);
    background: rgba(138, 180, 248, 0.08);
    color: #a8cdfc;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hub-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
    animation: hubPulse 2s ease-in-out infinite;
}

@keyframes hubPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.hub-hero-title {
    margin: 20px 0 18px;
    font-size: clamp(44px, 6.8vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 900;
    background: linear-gradient(145deg, #ffffff 35%, #9cb9e8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-hero-subtitle {
    max-width: 620px;
    margin: 0 0 32px;
    color: rgba(225, 238, 255, 0.76);
    font-size: clamp(16.5px, 1.8vw, 20px);
    line-height: 1.6;
    font-weight: 500;
}

.hub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.hub-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, #8ab4f8, #3b82f6);
    color: #040810;
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hub-btn-primary:hover {
    background: linear-gradient(135deg, #a4c7fa, #4f91ff);
    box-shadow: 0 14px 40px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    color: #03060c;
}

.hub-btn-primary svg {
    transition: transform 0.22s ease;
}

.hub-btn-primary:hover svg {
    transform: translateX(3px);
}

.hub-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e5eeff;
    font-size: 15px;
    font-weight: 750;
    backdrop-filter: blur(14px);
    transition: all 0.2s ease;
}

.hub-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(-1px);
}

/* Command HUD / System Matrix */
.hub-command-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(ellipse at top right, rgba(138, 180, 248, 0.08), transparent 70%),
        linear-gradient(145deg, rgba(20, 26, 38, 0.85), rgba(11, 15, 23, 0.9));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 24px 60px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hub-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hub-command-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hub-radar-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 12px #34d399;
}

.hub-radar-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #34d399;
    animation: hubRadar 2s ease-out infinite;
}

@keyframes hubRadar {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

.hub-command-status strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #e6efff;
}

.hub-version-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(220, 235, 255, 0.65);
    font-size: 11px;
    font-family: monospace;
    font-weight: 700;
}

.hub-command-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hub-metric-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hub-metric-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(215, 230, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-metric-val {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}

.hub-metric-online .hub-metric-val {
    color: #34d399;
}

.hub-metric-warning .hub-metric-val {
    color: #f87171;
}

.hub-metric-sync {
    font-size: 19px;
    line-height: 1.25;
    color: #8ab4f8;
}

.hub-live-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.hub-live-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 750;
    color: rgba(220, 235, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hub-live-map {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-live-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.18s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hub-live-row:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(2px);
}

.hub-live-row.is-disabled {
    cursor: default;
    opacity: 0.75;
}
.hub-live-row.is-disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
}

.hub-live-row-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hub-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

.hub-status-maintenance,
.hub-status-offline {
    background: #f87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

.hub-status-opening_soon {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.hub-live-row-name {
    font-size: 13.5px;
    font-weight: 750;
    color: #e5eeff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-live-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hub-live-row-ver {
    font-size: 11px;
    font-family: monospace;
    color: rgba(215, 230, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.hub-live-row-status {
    font-size: 11.5px;
    font-weight: 700;
}

.hub-status-text-online { color: #34d399; }
.hub-status-text-maintenance,
.hub-status-text-offline { color: #f87171; }
.hub-status-text-opening_soon { color: #fbbf24; }

/* Admin Ribbon */
.hub-admin-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 12px 0 34px;
    padding: 20px 24px;
    border-radius: 24px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 60%),
        linear-gradient(135deg, rgba(28, 22, 12, 0.85), rgba(18, 14, 8, 0.92));
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.hub-admin-ribbon-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hub-admin-chip {
    align-self: flex-start;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hub-admin-ribbon-left strong {
    font-size: 18px;
    color: #fff;
}

.hub-admin-ribbon-left p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(250, 230, 190, 0.75);
}

.hub-admin-ribbon-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #110e05;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
    transition: all 0.2s ease;
}

.hub-admin-ribbon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.45);
    color: #000;
}

/* Promotions & Announcements Strip */
.hub-promo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin: 12px 0 36px;
}

.hub-promo-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(138, 180, 248, 0.16);
    background:
        radial-gradient(circle at 90% 10%, rgba(138, 180, 248, 0.1), transparent 60%),
        linear-gradient(145deg, rgba(17, 24, 38, 0.75), rgba(11, 16, 25, 0.85));
    backdrop-filter: blur(20px);
    box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.35);
    transition: all 0.22s ease;
}

.hub-promo-card:hover {
    transform: translateY(-3px);
    border-color: rgba(138, 180, 248, 0.38);
    box-shadow: 0 20px 45px -10px rgba(138, 180, 248, 0.2);
}

.hub-promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8ab4f8;
    font-size: 11.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hub-promo-arrow {
    color: rgba(220, 235, 255, 0.5);
    transition: transform 0.2s ease, color 0.2s ease;
}

.hub-promo-card:hover .hub-promo-arrow {
    color: #8ab4f8;
    transform: translateX(4px);
}

.hub-promo-title {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.hub-promo-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(220, 235, 255, 0.68);
}

/* Sections Global Headers */
.hub-section {
    padding: clamp(36px, 5vw, 64px) 0 0;
}

.hub-section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 26px;
}

.hub-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8ab4f8;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-section-head h2 {
    margin: 0;
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}

.hub-section-head p {
    margin: 0;
    font-size: clamp(14.5px, 1.6vw, 16.5px);
    color: rgba(215, 230, 255, 0.65);
}

/* Projects Showcase Grid & Cards */
.hub-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.hub-project-card {
    --project-bg: none;
    --card-accent-color: #8ab4f8;
    --card-accent-glow: rgba(138, 180, 248, 0.16);
    position: relative;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #0e131d;
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

.hub-project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 30px 70px -10px rgba(0, 0, 0, 0.65),
        0 0 35px var(--card-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Project Accent Color Variations */
.hub-project-cyan {
    --card-accent-color: #38bdf8;
    --card-accent-glow: rgba(56, 189, 248, 0.22);
}

.hub-project-blue {
    --card-accent-color: #818cf8;
    --card-accent-glow: rgba(129, 140, 248, 0.22);
}

.hub-project-green {
    --card-accent-color: #34d399;
    --card-accent-glow: rgba(52, 211, 153, 0.22);
}

.hub-project-purple,
.hub-project-violet {
    --card-accent-color: #c084fc;
    --card-accent-glow: rgba(192, 132, 252, 0.22);
}

.hub-project-gold {
    --card-accent-color: #fbbf24;
    --card-accent-glow: rgba(251, 191, 36, 0.22);
}

/* Card Background Art Layer */
.hub-project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(180deg, rgba(8, 11, 18, 0.75) 0%, rgba(8, 11, 18, 0.92) 100%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
        var(--project-bg);
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center;
    opacity: 0.85;
    transform: scale(1.02);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    pointer-events: none;
}

.hub-project-card:hover::after {
    opacity: 0.98;
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.05);
}

.hub-project-card-glow {
    position: absolute;
    bottom: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--card-accent-glow);
    filter: blur(50px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hub-project-card:hover .hub-project-card-glow {
    opacity: 1;
    transform: scale(1.2);
}

.hub-project-card-glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

/* Card Header, Body, Footer Elements */
.hub-project-card-top,
.hub-project-card-body,
.hub-project-card-bottom {
    position: relative;
    z-index: 2;
}

.hub-project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hub-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.16);
    border: 1px solid rgba(52, 211, 153, 0.32);
    color: #6ee7b7;
    font-size: 11.5px;
    font-weight: 850;
}

.hub-status-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.hub-status-pill-maintenance,
.hub-status-pill-offline {
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

.hub-status-pill-opening_soon {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fde68a;
}

.hub-project-ver {
    font-size: 11.5px;
    font-family: monospace;
    font-weight: 700;
    color: rgba(230, 240, 255, 0.6);
    background: rgba(255, 255, 255, 0.07);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-project-card-body {
    margin: 18px 0;
}

.hub-project-name {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.hub-project-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(220, 235, 255, 0.75);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hub-project-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-project-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 750;
    color: #fbbf24;
}

.hub-project-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5eeff;
    font-size: 13.5px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.hub-project-card:hover .hub-project-action {
    background: var(--card-accent-color);
    color: #060a12;
    border-color: transparent;
    box-shadow: 0 4px 18px var(--card-accent-glow);
}

.hub-project-action svg {
    transition: transform 0.2s ease;
}

.hub-project-card:hover .hub-project-action svg {
    transform: translateX(4px);
}

.hub-project-card.is-disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.hub-project-card.is-disabled:hover {
    transform: none;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

/* News / Actualités Section */
.hub-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hub-news-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(18, 24, 36, 0.7), rgba(11, 15, 24, 0.8));
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.35);
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.hub-news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 180, 248, 0.28);
}

.hub-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hub-news-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(138, 180, 248, 0.14);
    border: 1px solid rgba(138, 180, 248, 0.25);
    color: #8ab4f8;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hub-news-date {
    font-size: 12px;
    font-weight: 700;
    color: rgba(220, 235, 255, 0.5);
}

.hub-news-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}

.hub-news-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(220, 235, 255, 0.7);
}

/* Upcoming / Roadmap Section */
.hub-upcoming-list {
    display: grid;
    gap: 14px;
}

.hub-upcoming-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(18, 24, 36, 0.65), rgba(11, 15, 24, 0.75));
    backdrop-filter: blur(18px);
    transition: all 0.2s ease;
}

.hub-upcoming-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(145deg, rgba(22, 30, 46, 0.75), rgba(13, 18, 28, 0.85));
}

.hub-upcoming-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-upcoming-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hub-upcoming-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(192, 132, 252, 0.14);
    border: 1px solid rgba(192, 132, 252, 0.28);
    color: #c084fc;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-upcoming-title {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    color: #fff;
}

.hub-upcoming-desc {
    margin: 0;
    font-size: 14px;
    color: rgba(220, 235, 255, 0.68);
    line-height: 1.5;
}

.hub-upcoming-time-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #fbbf24;
    font-size: 13px;
    font-weight: 800;
}

/* Hub Modern Footer */
.hub-footer {
    margin-top: clamp(48px, 8vw, 84px);
    padding: 32px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.hub-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 850;
    color: #fff;
}

.hub-footer-logo {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #8ab4f8, #34a853);
    color: #06090e;
    font-size: 12px;
    font-weight: 900;
}

.hub-footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hub-footer-links a {
    color: rgba(220, 235, 255, 0.6);
    font-size: 13.5px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.hub-footer-links a:hover {
    color: #8ab4f8;
}

.hub-footer-copy small {
    color: rgba(220, 235, 255, 0.45);
    font-size: 12.5px;
}

/* Hub Responsive Breakpoints */
@media (max-width: 1100px) {
    .hub-hero {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hub-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .hub-topbar-inner {
        flex-wrap: wrap;
        border-radius: 22px;
        padding: 10px 14px;
    }

    .hub-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 4px;
        scrollbar-width: none;
    }

    .hub-nav::-webkit-scrollbar {
        display: none;
    }

    .hub-nav-link {
        white-space: nowrap;
    }

    .hub-hero {
        padding-top: 16px;
    }

    .hub-hero-title {
        font-size: clamp(38px, 12vw, 56px);
    }

    .hub-command-metrics {
        grid-template-columns: 1fr;
    }

    .hub-admin-ribbon {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-admin-ribbon-btn {
        justify-content: center;
    }

    .hub-project-grid,
    .hub-news-grid {
        grid-template-columns: 1fr;
    }

    .hub-upcoming-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .hub-upcoming-time-chip {
        width: 100%;
        justify-content: center;
    }

    .hub-footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-orbit,
    .hub-radar-pulse::after,
    .hub-badge-dot,
    .hub-loader-brand-icon,
    .hub-loader-rings span,
    .hub-project-card::after {
        animation: none !important;
        transition: none !important;
    }
}

.project-closed-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 15%, rgba(234,67,53,0.16), transparent 28%),
        linear-gradient(135deg, #0b1018, #080a0f);
}

.project-closed-shell {
    width: min(620px, 100%);
    padding: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    background: rgba(255,255,255,0.07);
    box-shadow: 0 26px 76px rgba(0,0,0,0.34);
    text-align: center;
}

.project-closed-shell span {
    color: #fbbc05;
    font-weight: 950;
    text-transform: uppercase;
}

.project-closed-shell h1 {
    margin: 10px 0;
    font-size: clamp(34px, 7vw, 64px);
}

.project-closed-shell p {
    color: rgba(235,242,255,0.74);
}

.project-closed-actions {
    margin-top: 22px;
}

.project-closed-actions a {
    background: #8ab4f8;
    color: #071017;
}

body.auth-corporation-page .auth-page {
    background:
        radial-gradient(circle at 20% 12%, rgba(138,180,248,0.20), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(52,168,83,0.13), transparent 24%),
        linear-gradient(135deg, #0b1018, #080a0f);
}

body.auth-corporation-page .auth-card {
    max-width: 520px;
    border-radius: 28px;
    text-align: center;
}

.auth-brand-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8ab4f8, #34a853, #fbbc05);
    color: #071017;
    font-weight: 950;
}

.auth-kicker {
    color: #8ab4f8;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-saved-account {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(138,180,248,0.20);
    border-radius: 22px;
    background: rgba(138,180,248,0.08);
}

.auth-saved-account[hidden] {
    display: none;
}

.auth-saved-account span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.auth-saved-account strong {
    font-size: 22px;
}

.auth-guest-form {
    margin-top: 12px;
}

.auth-guest-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: rgba(247,251,255,0.82);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    transition: 0.2s ease;
}

.auth-guest-button:hover {
    border-color: rgba(103,232,249,0.38);
    background: rgba(103,232,249,0.10);
    color: #fff;
    transform: translateY(-1px);
}

.auth-guest-button:focus-visible {
    outline: 3px solid rgba(103,232,249,0.28);
    outline-offset: 3px;
}

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

.corporation-admin-section {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255,255,255,0.035);
}

.corporation-project-admin-list,
.corporation-admin-row {
    display: grid;
    gap: 12px;
}

.corporation-project-admin-row,
.corporation-admin-row {
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
}

.corporation-admin-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.corporation-admin-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 850;
}

.corporation-admin-checks input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

/* Split admin */
body.admin-split-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 10%, rgba(138,180,248,0.14), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(52,168,83,0.10), transparent 24%),
        linear-gradient(135deg, #11151d, #080a0f);
    color: var(--text);
}

.admin-hub-topbar {
    position: sticky;
    top: 0;
    z-index: 140;
    width: min(1420px, calc(100% - 28px));
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto;
    padding: 14px 0;
    backdrop-filter: blur(18px);
}

.admin-hub-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.admin-hub-actions > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.065);
    color: #eef4ff;
    font-weight: 850;
    padding: 0 14px;
}

.admin-home-shell {
    width: min(1420px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px 0 72px;
}

.admin-home-hero {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
    box-shadow: 0 28px 80px rgba(0,0,0,0.25);
}

.admin-home-hero > span,
.admin-page-title > div > span,
.admin-editor-section-head span,
.admin-dashboard-card > span,
.admin-link-grid a > span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-home-hero h1,
.admin-page-title h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 74px);
    line-height: 0.98;
}

.admin-home-hero p,
.admin-page-title p,
.admin-editor-section-head p {
    max-width: 780px;
    margin: 0;
    color: rgba(235,242,255,0.68);
    line-height: 1.6;
}

.admin-home-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-home-metrics article {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
}

.admin-home-metrics span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.admin-home-metrics strong {
    display: block;
    margin-top: 6px;
    font-size: 30px;
}

.admin-dashboard-grid,
.admin-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.admin-dashboard-card,
.admin-link-grid a {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 26px;
    background: rgba(255,255,255,0.055);
    box-shadow: 0 18px 50px rgba(0,0,0,0.16);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.admin-dashboard-card:hover,
.admin-link-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(138,180,248,0.32);
}

.admin-dashboard-card h2,
.admin-link-grid h3 {
    margin: 0;
    font-size: 24px;
}

.admin-dashboard-card p,
.admin-link-grid p {
    margin: 0;
    color: rgba(235,242,255,0.66);
    line-height: 1.55;
}

.admin-dashboard-card strong {
    margin-top: auto;
    color: var(--blue);
}

.admin-shell-v2 {
    width: min(1420px, calc(100% - 28px));
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    margin: 0 auto;
    padding: 22px 0 72px;
}

.admin-side-nav {
    position: sticky;
    top: 96px;
    align-self: start;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    background: rgba(255,255,255,0.045);
}

.admin-side-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    padding: 0 12px 0 6px;
    color: rgba(238,244,255,0.78);
    font-weight: 850;
}

.admin-side-nav a:hover,
.admin-side-nav a.active {
    background: rgba(138,180,248,0.14);
    color: #fff;
}

.admin-side-nav span {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(138,180,248,0.18);
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
}

.admin-workspace {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.admin-page-title {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 28px;
    background: rgba(255,255,255,0.05);
}

.admin-page-title h1 {
    font-size: clamp(34px, 5vw, 58px);
}

.admin-autosave-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(235,242,255,0.76);
    font-size: 13px;
}

.admin-autosave-status span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--muted);
}

.admin-autosave-status[data-state="dirty"] span {
    background: #fbbc05;
}

.admin-autosave-status[data-state="saving"] span {
    background: var(--blue);
    animation: autosavePulse 0.8s ease-in-out infinite alternate;
}

.admin-autosave-status[data-state="saved"] span {
    background: var(--green);
}

.admin-autosave-status[data-state="error"] span {
    background: var(--red);
}

@keyframes autosavePulse {
    to { transform: scale(1.35); opacity: 0.6; }
}

.admin-editor-tabs {
    position: sticky;
    top: 94px;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    background: rgba(16, 20, 28, 0.86);
    backdrop-filter: blur(18px);
}

.admin-editor-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.065);
    color: rgba(235,242,255,0.78);
    font-weight: 850;
    padding: 0 13px;
}

.admin-editor-tabs a:hover {
    background: rgba(138,180,248,0.16);
    color: #fff;
}

.admin-hub-editor,
.admin-users-editor {
    display: grid;
    gap: 18px;
}

.admin-editor-section {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 28px;
    background: rgba(255,255,255,0.045);
}

.admin-editor-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.admin-editor-section-head h2 {
    margin: 5px 0 6px;
    font-size: clamp(26px, 3vw, 36px);
}

.admin-console-section {
    overflow: hidden;
}

.admin-console-tabs {
    position: sticky;
    top: 94px;
    z-index: 80;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    background: rgba(16, 20, 28, 0.88);
    backdrop-filter: blur(18px);
}

.admin-console-section .admin-tab-panel.active {
    display: grid;
    gap: 18px;
}

.admin-console-section .admin-form {
    display: grid;
    gap: 14px;
}

.admin-console-section .compact-list,
.admin-console-section .report-stack,
.admin-console-section .admin-dictionary-layout,
.admin-console-section .personality-admin-layout {
    display: grid;
    gap: 14px;
}

.admin-console-section .admin-two-cols {
    align-items: start;
}

.admin-console-section .stats-overview-grid {
    margin-bottom: 0;
}

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

.admin-hub-editor label,
.admin-users-editor label {
    display: grid;
    gap: 7px;
    color: rgba(235,242,255,0.72);
    font-size: 13px;
    font-weight: 850;
}

.admin-hub-editor input,
.admin-hub-editor textarea,
.admin-hub-editor select,
.admin-users-editor input,
.admin-users-editor select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    color: #f7fbff;
    font: inherit;
    padding: 0 12px;
    outline: 0;
}

.admin-hub-editor textarea {
    min-height: 74px;
    padding-top: 10px;
    resize: vertical;
}

.admin-hub-editor select,
.admin-users-editor select {
    color: #f7fbff;
}

.admin-project-editor-list,
.admin-compact-row-list {
    display: grid;
    gap: 14px;
}

.admin-project-editor-card,
.admin-compact-editor-row {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.06), transparent 44%),
        rgba(255,255,255,0.035);
}

.admin-project-editor-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.admin-project-editor-card-head strong {
    font-size: 20px;
}

[data-admin-remove-row] {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: #ffb4aa;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    padding: 0 12px;
}

.admin-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.admin-user-table {
    display: grid;
    gap: 8px;
}

.admin-user-table-head,
.admin-user-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr 150px 120px;
    gap: 10px;
    align-items: center;
}

.admin-user-table-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-user-row {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
}

.admin-user-id {
    min-width: 0;
}

.admin-user-id strong,
.admin-user-id small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-id small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .admin-dashboard-grid,
    .admin-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-table-head {
        display: none;
    }

    .admin-user-row {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .admin-side-nav {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-page-title,
    .admin-editor-section-head {
        flex-direction: column;
    }

    .admin-autosave-status {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .admin-hub-topbar,
    .admin-hub-actions {
        flex-wrap: wrap;
    }

    .admin-hub-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-home-metrics,
    .admin-dashboard-grid,
    .admin-link-grid,
    .admin-form-grid,
    .admin-user-row,
    .admin-side-nav {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-card,
    .admin-link-grid a {
        min-height: 170px;
    }
}


/* V5 refined: quieter, deeper, no laser beams */

:root {
    --v5-surface: rgba(21,23,28,0.86);
    --v5-surface-strong: rgba(25,27,33,0.96);
    --v5-line: rgba(229,236,248,0.115);
    --v5-blue: #9cbcff;
    --v5-green: #6ee7b7;
    --v5-yellow: #f8d76b;
    --v5-red: #ff8b82;
    --v5-cyan: #8ee7f5;
    --v5-purple: #b8a6ff;
}

body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 18%),
        linear-gradient(180deg, #1c1f25 0%, #15171c 52%, #101216 100%);
}

body::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(180deg, rgba(156,188,255,0.055), transparent 42%, rgba(110,231,183,0.035));
    background-size: 58px 58px, 58px 58px, 100% 100%;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.68), rgba(0,0,0,0.08));
    animation: v5CalmDrift 22s ease-in-out infinite alternate;
}

.search-page,
.ai-app[data-ai-theme="europium"],
.actualites-page {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.034), transparent 20%),
        linear-gradient(180deg, #1c1f25 0%, #15171c 58%, #101216 100%);
}

.hero-card::before,
.search-header::before,
.ai-chat-header::before,
.v5-launch-card::before,
.v5-search-announcement::before {
    display: none;
}

.hero-card,
.result-card,
.dictionary-card,
.image-result-card,
.personality-result-card,
.ai-app[data-ai-theme="europium"] .ai-sidebar,
.ai-app[data-ai-theme="europium"] .ai-chat-header,
.ai-app[data-ai-theme="europium"] .ai-compose-modern,
.actualites-card,
.actualites-feature {
    border-color: var(--v5-line);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.026)),
        var(--v5-surface);
    box-shadow:
        0 24px 72px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.065);
}

.home-google-card {
    background: transparent;
    box-shadow: none;
}

.home-google-card::after {
    opacity: 0.16;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 34%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 82px);
}

.logo,
.small-logo,
.ai-app[data-ai-theme="europium"] .ai-empty-hero h2 {
    background:
        linear-gradient(90deg, #9cbcff 0%, #8ee7f5 20%, #6ee7b7 40%, #f8d76b 58%, #ff8b82 76%, #b8a6ff 90%, #9cbcff 100%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 10px rgba(156,188,255,0.16))
        drop-shadow(0 16px 28px rgba(0,0,0,0.24));
}

.home-search-form .search-input,
.search-input {
    border-color: rgba(229,236,248,0.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.096), rgba(255,255,255,0.035)),
        rgba(24,27,33,0.94);
    box-shadow:
        0 20px 56px rgba(0,0,0,0.30),
        0 0 0 1px rgba(255,255,255,0.035),
        inset 0 1px 0 rgba(255,255,255,0.09);
}

.home-search-form .search-input:focus,
.search-input:focus {
    border-color: rgba(142,231,245,0.36);
    box-shadow:
        0 0 0 4px rgba(142,231,245,0.08),
        0 24px 68px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.11);
}

.primary-btn,
.secondary-btn,
.auth-form button,
.ai-new-chat {
    background:
        linear-gradient(135deg, #9cbcff 0%, #8ee7f5 42%, #6ee7b7 100%);
    color: #11151a;
}

.home-apps-trigger,
.profile-trigger,
.home-apps-popover,
.search-header {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.028)),
        rgba(22,24,30,0.92);
}

.v5-search-announcement {
    border-color: rgba(142,231,245,0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.024)),
        rgba(21,23,28,0.76);
}

.v5-search-announcement a,
.v5-launch-card a,
.actualites-feature a {
    background:
        linear-gradient(135deg, rgba(156,188,255,0.20), rgba(110,231,183,0.13)),
        rgba(255,255,255,0.055);
    border-color: rgba(229,236,248,0.13);
}

.actualites-page {
    min-height: 100vh;
}

.actualites-header {
    justify-content: space-between;
}

.actualites-shell {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 56px 0 72px;
}

.actualites-hero {
    max-width: 820px;
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.actualites-hero h1 {
    margin: 0;
    color: #f5f8ff;
    font-size: clamp(42px, 7vw, 78px);
    line-height: 0.98;
    letter-spacing: 0;
}

.actualites-hero p {
    max-width: 680px;
    margin: 0;
    color: #b7c2d3;
    font-size: 18px;
    line-height: 1.65;
}

.actualites-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin: 26px 0;
    padding: 24px;
    border: 1px solid var(--v5-line);
    border-radius: 24px;
}

.actualites-feature span,
.actualites-card-top span {
    color: #8ee7f5;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.actualites-feature h2 {
    margin: 8px 0;
    color: #f5f8ff;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.08;
}

.actualites-feature p {
    max-width: 720px;
    margin: 0;
    color: #b7c2d3;
    line-height: 1.65;
}

.actualites-feature a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #f4f7ff;
    font-weight: 950;
    padding: 0 16px;
    white-space: nowrap;
}

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

.actualites-card {
    display: grid;
    gap: 12px;
    min-height: 210px;
    padding: 22px;
    border: 1px solid var(--v5-line);
    border-radius: 22px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.actualites-card:hover {
    transform: translateY(-3px);
    border-color: rgba(142,231,245,0.28);
}

.actualites-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.actualites-card-top small {
    color: #8f9caf;
    font-weight: 800;
}

.actualites-card h2 {
    margin: 0;
    color: #f1f5ff;
    font-size: clamp(21px, 3vw, 30px);
    line-height: 1.12;
}

.actualites-card p {
    margin: 0;
    color: #b7c2d3;
    line-height: 1.62;
}

.actualites-card-green .actualites-card-top span {
    color: #6ee7b7;
}

.actualites-card-gold .actualites-card-top span {
    color: #f8d76b;
}

.actualites-card-cyan .actualites-card-top span {
    color: #8ee7f5;
}

@keyframes v5CalmDrift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 14px 10px, -10px 14px, 0 0; }
}

@media (max-width: 900px) {
    .actualites-feature,
    .actualites-grid {
        grid-template-columns: 1fr;
    }

    .actualites-feature a {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .actualites-shell {
        width: min(100%, calc(100vw - 24px));
        padding: 34px 0 54px;
    }

    .actualites-hero h1 {
        font-size: 40px;
    }

    .actualites-hero p {
        font-size: 15px;
    }

    .actualites-feature,
    .actualites-card {
        border-radius: 18px;
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* V5 clean home and AI sidebar refinements */

.home-top-actions {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-apps-menu {
    position: relative;
}

.home-apps-trigger {
    width: 44px;
    height: 44px;
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    place-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
        rgba(23,24,28,0.88);
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
    backdrop-filter: blur(16px);
}

.home-apps-trigger span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #dce8ff;
    box-shadow: 0 0 10px rgba(103,232,249,0.34);
    transition: transform 0.18s ease, background 0.18s ease;
}

.home-apps-trigger:hover span,
.home-apps-menu.is-open .home-apps-trigger span {
    background: #67e8f9;
    transform: scale(1.25);
}

.home-apps-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035)),
        rgba(24,25,29,0.96);
    box-shadow: 0 28px 78px rgba(0,0,0,0.42);
    backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.2,.8,.2,1);
}

.home-apps-menu.is-open .home-apps-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.home-apps-popover a {
    min-width: 0;
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    padding: 10px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.home-apps-popover a:hover {
    transform: translateY(-2px);
    border-color: rgba(103,232,249,0.28);
    background: rgba(103,232,249,0.08);
}

.home-apps-popover strong,
.home-apps-popover small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-apps-popover strong {
    color: #eef4ff;
    font-size: 13px;
}

.home-apps-popover small {
    color: #9aa8ba;
    font-size: 11px;
    font-weight: 700;
}

.home-google-card {
    width: min(980px, 100%);
    padding: clamp(58px, 9vh, 94px) clamp(16px, 4vw, 38px) 26px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.home-google-card::before,
.home-google-card::after {
    opacity: 0.28;
}

.home-google-card .logo {
    margin-top: 0;
    margin-bottom: 8px;
}

.home-google-card .subtitle {
    margin-bottom: 24px;
}

.home-search-form {
    width: min(720px, 100%);
    margin: 0 auto;
    position: relative;
    display: block;
}

.home-search-form .search-suggest-wrap {
    width: 100%;
    min-width: 0;
}

.home-search-form .search-suggest-wrap::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    z-index: 2;
    width: 16px;
    height: 16px;
    border: 2px solid #9fb0c6;
    border-radius: 50%;
    transform: translateY(-55%);
    pointer-events: none;
}

.home-search-form .search-suggest-wrap::after {
    content: "";
    position: absolute;
    left: 36px;
    top: 50%;
    z-index: 2;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: #9fb0c6;
    transform: translateY(6px) rotate(45deg);
    pointer-events: none;
}

.home-search-form .search-input {
    height: 64px;
    padding: 0 26px 0 56px;
    border-radius: 999px;
    font-size: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.04)),
        rgba(29,30,35,0.92);
    box-shadow:
        0 24px 64px rgba(0,0,0,0.32),
        0 0 0 1px rgba(255,255,255,0.045),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.home-news-panel {
    width: min(900px, 100%);
    margin: 26px auto 0;
    display: grid;
    gap: 14px;
    text-align: left;
}

.home-news-head {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.home-news-head h2 {
    margin: 0;
    color: #f4f7ff;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.1;
}

.home-news-head p {
    max-width: 650px;
    margin: 0;
    color: #aeb8c8;
    line-height: 1.55;
}

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

.home-news-grid article {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
        rgba(24,25,29,0.70);
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.home-news-grid span {
    color: #67e8f9;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.home-news-grid strong {
    display: block;
    margin: 7px 0 5px;
    color: #edf3ff;
    line-height: 1.25;
}

.home-news-grid p {
    margin: 0;
    color: #aeb8c8;
    font-size: 13px;
    line-height: 1.45;
}

.home-compact-links {
    margin-top: 18px;
}

.ai-sidebar-collapse {
    display: inline-grid;
}

.ai-app {
    transition: grid-template-columns 0.22s cubic-bezier(.2,.8,.2,1);
}

.ai-app.ai-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

.ai-app.ai-sidebar-collapsed .ai-sidebar {
    align-items: center;
    padding: 14px 10px;
}

.ai-app.ai-sidebar-collapsed .ai-sidebar-top {
    width: 100%;
    flex-direction: column;
    justify-content: center;
}

.ai-app.ai-sidebar-collapsed .ai-sidebar-top .small-logo {
    width: 48px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103,232,249,0.20);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    font-size: 0;
}

.ai-app.ai-sidebar-collapsed .ai-sidebar-top .small-logo::before {
    content: "AI";
    display: inline-grid;
    place-items: center;
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    color: #8ee7f5;
    -webkit-text-fill-color: #8ee7f5;
    background: none;
    filter: none;
    transform: translateY(2px);
}

.ai-app.ai-sidebar-collapsed .ai-new-chat {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 16px;
    font-size: 0;
}

.ai-app.ai-sidebar-collapsed .ai-new-chat::before {
    content: "+";
    font-size: 25px;
    font-weight: 950;
}

.ai-app.ai-sidebar-collapsed .ai-project-box,
.ai-app.ai-sidebar-collapsed .ai-storage-box,
.ai-app.ai-sidebar-collapsed .ai-chat-list-wrap {
    display: none;
}

.ai-app.ai-sidebar-collapsed .ai-compose-modern {
    left: calc(50vw + 38px);
    width: min(820px, calc(100vw - 124px));
}

@media (max-width: 900px) {
    .home-top-actions {
        top: 10px;
        right: 10px;
    }

    .home-apps-popover {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-google-card {
        padding-top: 72px;
    }

    .home-news-grid {
        grid-template-columns: 1fr;
    }

    .ai-sidebar-collapse {
        display: none;
    }

    .ai-app.ai-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .ai-app.ai-sidebar-collapsed .ai-sidebar {
        align-items: stretch;
        padding: 14px;
    }

    .ai-app.ai-sidebar-collapsed .ai-sidebar-top {
        flex-direction: row;
        justify-content: space-between;
    }

    .ai-app.ai-sidebar-collapsed .ai-sidebar-top .small-logo {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 28px;
    }

    .ai-app.ai-sidebar-collapsed .ai-sidebar-top .small-logo::before {
        content: none;
    }

    .ai-app.ai-sidebar-collapsed .ai-new-chat {
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: inherit;
    }

    .ai-app.ai-sidebar-collapsed .ai-new-chat::before {
        content: none;
    }

    .ai-app.ai-sidebar-collapsed .ai-project-box,
    .ai-app.ai-sidebar-collapsed .ai-storage-box,
    .ai-app.ai-sidebar-collapsed .ai-chat-list-wrap {
        display: grid;
    }

    .ai-app.ai-sidebar-collapsed .ai-compose-modern {
        left: 50%;
        width: min(820px, calc(100vw - 24px));
    }
}

@media (max-width: 640px) {
    .home-top-actions {
        gap: 8px;
    }

    .home-apps-trigger,
    .home-top-actions .profile-trigger {
        width: 42px;
        height: 42px;
    }

    .home-apps-popover {
        right: -52px;
        width: min(330px, calc(100vw - 20px));
    }

    .home-google-card {
        padding-top: 70px;
    }

    .home-search-form .search-input {
        height: 58px;
        font-size: 16px;
    }
}

/* Home V5 reset */
body.home-page-v5 {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    color: #f7fbff;
    background:
        linear-gradient(180deg, #151922 0%, #090c12 58%, #07080d 100%);
    background-attachment: fixed;
}

body.home-page-v5::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(112deg, transparent 0 18%, rgba(126, 238, 255, 0.11) 29%, transparent 43%),
        linear-gradient(238deg, transparent 0 31%, rgba(240, 235, 124, 0.1) 48%, transparent 64%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 122px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 122px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%);
    background-size: 150% 150%, 150% 150%, auto, auto, auto;
    opacity: 0.9;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 72%, rgba(0, 0, 0, 0.58) 100%);
    animation: homeSurfaceFlow 18s ease-in-out infinite alternate;
}

body.home-page-v5::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.018) 18px 19px, transparent 19px 38px);
    opacity: 0.55;
}

body.home-page-v5 .home-top-actions {
    z-index: 20;
}

body.home-page-v5 .home-apps-trigger,
body.home-page-v5 .home-top-actions .profile-trigger {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(18, 22, 31, 0.72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px);
}

.home-reset-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(94px, 14vh, 138px) 16px 52px;
    overflow: visible;
}

.home-reset-card {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(980px, 100%);
    padding: clamp(22px, 3vh, 42px) 0 0;
    text-align: center;
}

.home-logo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0.08em 0.03em 0.1em;
    overflow: visible;
    color: transparent;
    font-size: clamp(76px, 12vw, 136px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    background:
        linear-gradient(90deg, #8beeff 0%, #68efd2 26%, #8ff0a5 48%, #f1eb76 67%, #ff9ac9 83%, #8beeff 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 22px 54px rgba(0, 0, 0, 0.42));
    animation: europiumPrism 6.5s ease-in-out infinite;
}

.home-logo::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: transparent;
    background:
        linear-gradient(90deg, #8beeff 0%, #68efd2 30%, #f1eb76 70%, #ff9ac9 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.42;
    filter: blur(18px);
    transform: translateY(10px) scale(1.015);
    animation: europiumPrism 6.5s ease-in-out infinite reverse;
}

.home-reset-card .subtitle {
    width: min(680px, 100%);
    margin: 22px auto 0;
    color: rgba(225, 232, 245, 0.78);
    font-size: clamp(16px, 2.2vw, 21px);
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: 0;
}

.home-liquid-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(560px, 100%);
    max-width: calc(100vw - 28px);
    min-height: 54px;
    margin: 26px auto 0;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

.home-liquid-switch::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(33.333333% - 3.333px);
    height: calc(100% - 10px);
    border-radius: 999px;
    background:
        linear-gradient(90deg, #86efff 0%, #65eccf 44%, #f0ea75 100%);
    background-size: 180% 100%;
    box-shadow:
        0 14px 36px rgba(101, 236, 207, 0.28),
        inset 0 -10px 18px rgba(8, 20, 24, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition:
        transform 0.62s cubic-bezier(0.18, 0.92, 0.2, 1),
        border-radius 0.62s cubic-bezier(0.18, 0.92, 0.2, 1),
        filter 0.62s ease;
    animation: liquidPulse 5s ease-in-out infinite;
}

.home-liquid-switch::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 25%;
    width: 34px;
    height: calc(100% - 20px);
    border-radius: 999px 45% 999px 45%;
    background: rgba(255, 255, 255, 0.36);
    filter: blur(9px);
    opacity: 0.72;
    pointer-events: none;
    transform: translateX(-50%);
    transition: left 0.62s cubic-bezier(0.18, 0.92, 0.2, 1), opacity 0.62s ease;
}

.home-liquid-switch:has(a:nth-child(2).active)::before,
.home-liquid-switch:has(a:nth-child(2):hover)::before,
.home-liquid-switch:has(a:nth-child(2):focus-visible)::before {
    transform: translateX(100%);
    border-radius: 0;
    filter: saturate(1.08);
}

.home-liquid-switch:has(a:nth-child(3).active)::before,
.home-liquid-switch:has(a:nth-child(3):hover)::before,
.home-liquid-switch:has(a:nth-child(3):focus-visible)::before {
    transform: translateX(200%);
    border-radius: 999px;
    filter: saturate(1.14);
}

.home-liquid-switch:has(a:nth-child(2).active)::after,
.home-liquid-switch:has(a:nth-child(2):hover)::after,
.home-liquid-switch:has(a:nth-child(2):focus-visible)::after {
    left: 58.333%;
}

.home-liquid-switch:has(a:nth-child(3).active)::after,
.home-liquid-switch:has(a:nth-child(3):hover)::after,
.home-liquid-switch:has(a:nth-child(3):focus-visible)::after {
    left: 91.666%;
}

.home-liquid-switch a {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(226, 233, 244, 0.76);
    font-size: clamp(12px, 1.55vw, 14px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.switch-label-short {
    display: none;
}

.home-liquid-switch a.active,
.home-liquid-switch a:hover,
.home-liquid-switch a:focus-visible {
    color: #071116;
}

.home-liquid-switch:has(a:not(.active):hover) a.active,
.home-liquid-switch:has(a:not(.active):focus-visible) a.active {
    color: rgba(226, 233, 244, 0.76);
}

.home-liquid-switch a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.74);
    outline-offset: -5px;
}

.home-search-form {
    position: relative;
    display: block;
    width: min(760px, 100%);
    margin: 30px auto 0;
}

.home-search-form .search-suggest-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.home-search-form .search-suggest-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25px;
    z-index: 2;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(217, 231, 248, 0.78);
    border-radius: 50%;
    transform: translateY(-54%);
    pointer-events: none;
}

.home-search-form .search-suggest-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 42px;
    z-index: 2;
    width: 11px;
    height: 2px;
    border-radius: 999px;
    background: rgba(217, 231, 248, 0.78);
    transform: translateY(9px) rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

.home-search-form .search-input {
    width: 100%;
    height: 70px;
    padding: 0 30px 0 66px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    color: #f8fbff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -18px 36px rgba(0, 0, 0, 0.16);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    outline: none;
    backdrop-filter: blur(22px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.home-search-form .search-input::placeholder {
    color: rgba(219, 228, 240, 0.58);
}

.home-search-form:focus-within .search-input {
    border-color: rgba(128, 239, 255, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.09));
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.42),
        0 0 0 5px rgba(114, 237, 222, 0.13),
        0 0 44px rgba(104, 239, 210, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.home-search-form .search-suggestions {
    top: calc(100% + 12px);
    max-height: clamp(180px, calc(100svh - 450px), 330px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(12, 15, 22, 0.94);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(20px);
}

.home-search-form .search-suggestions::-webkit-scrollbar {
    width: 8px;
}

.home-search-form .search-suggestions::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(128, 239, 255, 0.36);
}

.home-reset-card .weekly-game-card {
    width: min(760px, 100%);
    margin-top: 34px;
    text-align: left;
}

@keyframes europiumPrism {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes liquidPulse {
    0%,
    100% {
        background-position: 0% 50%;
        box-shadow:
            0 14px 36px rgba(101, 236, 207, 0.28),
            inset 0 -10px 18px rgba(8, 20, 24, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        background-position: 100% 50%;
        box-shadow:
            0 18px 44px rgba(101, 236, 207, 0.34),
            inset 0 -12px 20px rgba(8, 20, 24, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.58);
    }
}

@keyframes homeSurfaceFlow {
    0% {
        background-position: 0% 0%, 100% 0%, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 100% 100%, 0% 100%, 28px 0, 0 28px, 0 0;
    }
}

@media (max-width: 760px) {
    .home-reset-page {
        padding: 92px 14px 38px;
    }

    .home-reset-card {
        padding-top: 34px;
    }

    .home-logo {
        font-size: clamp(56px, 18vw, 88px);
    }

    .home-reset-card .subtitle {
        margin-top: 18px;
        font-size: 16px;
    }

    .home-liquid-switch {
        width: min(100%, 430px);
        max-width: calc(100vw - 28px);
        min-height: 50px;
        margin-top: 22px;
    }

    .home-liquid-switch a {
        min-height: 40px;
        padding: 0 6px;
        font-size: clamp(11px, 3.2vw, 13px);
    }

    .switch-label-full {
        display: none;
    }

    .switch-label-short {
        display: inline;
    }

    .home-search-form {
        margin-top: 24px;
    }

    .home-search-form .search-suggestions {
        max-height: clamp(160px, calc(100svh - 390px), 280px);
    }

    .home-search-form .search-input {
        height: 60px;
        padding-right: 20px;
        padding-left: 58px;
        font-size: 16px;
    }

    .home-search-form .search-suggest-wrap::before {
        left: 22px;
        width: 17px;
        height: 17px;
    }

    .home-search-form .search-suggest-wrap::after {
        left: 37px;
    }

    .home-reset-card .weekly-game-card {
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

.actualites-timeline {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin: 26px 0;
    padding: 24px;
    border: 1px solid var(--v5-line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.026)), var(--v5-surface);
    box-shadow: 0 24px 72px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.065);
}

.actualites-timeline span {
    color: #8ee7f5;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.actualites-timeline h2 {
    margin: 8px 0 0;
    color: #f5f8ff;
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.08;
}

.actualites-timeline ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.actualites-timeline li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
}

.actualites-timeline strong {
    color: #f8d76b;
    font-size: 14px;
    font-weight: 950;
}

.actualites-timeline time {
    color: #dce6f6;
    font-size: 13px;
    font-weight: 900;
}

.actualites-timeline p {
    min-width: 0;
    margin: 0;
    color: #b7c2d3;
    font-size: 13px;
    line-height: 1.4;
}

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

    .actualites-timeline li {
        grid-template-columns: auto auto;
    }

    .actualites-timeline p {
        grid-column: 1 / -1;
    }
}

.ai-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ai-file-chips a,
.ai-selected-files button {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
    max-width: min(100%, 360px);
    border: 1px solid rgba(138,180,248,0.2);
    border-radius: 14px;
    background: rgba(138,180,248,0.08);
    color: #eef4ff;
    padding: 9px 11px;
}

.ai-file-chips strong,
.ai-selected-files span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.ai-file-chips span,
.ai-selected-files small {
    color: #b7c2d3;
    font-size: 11px;
    font-weight: 800;
}

.ai-selected-files {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-selected-files[hidden] {
    display: none;
}

.ai-selected-files button {
    cursor: pointer;
    font: inherit;
}

.ai-selected-files b {
    color: #cfd6e2;
    font-size: 17px;
    line-height: 1;
}

/* Europium AI Voice conversation */
.ai-live-voice {
    width: min(760px, 100%);
    margin: 18px auto 0;
}

.ai-live-voice [hidden] {
    display: none !important;
}

.ai-live-idle {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.ai-live-mode {
    display: inline-flex;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
}

.ai-live-mode button {
    min-width: 88px;
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #aeb9c8;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.ai-live-mode button.active,
.ai-live-mode button[aria-pressed="true"] {
    background: rgba(103,232,249,0.14);
    color: #eafaff;
    box-shadow: inset 0 0 0 1px rgba(103,232,249,0.16);
}

.ai-live-start {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid rgba(103,232,249,0.24);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(138,180,248,0.18), rgba(52,168,83,0.12)),
        rgba(255,255,255,0.065);
    color: #f4f8ff;
    box-shadow: 0 18px 46px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ai-live-start:hover,
.ai-live-start:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(103,232,249,0.42);
    background:
        linear-gradient(135deg, rgba(138,180,248,0.24), rgba(52,168,83,0.16)),
        rgba(255,255,255,0.085);
}

.ai-live-start:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.ai-live-mic-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-right: 12px;
}

.ai-live-mic-mark::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 12px;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #8ee7f5, #6ee7b7);
    box-shadow: 0 0 20px rgba(103,232,249,0.28);
}

.ai-live-mic-mark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    width: 18px;
    height: 10px;
    border: 2px solid rgba(244,248,255,0.88);
    border-top: 0;
    border-radius: 0 0 14px 14px;
}

.ai-live-mic-mark span {
    position: absolute;
    left: 13px;
    bottom: 1px;
    width: 2px;
    height: 8px;
    border-radius: 999px;
    background: rgba(244,248,255,0.9);
}

.ai-live-console {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026)),
        rgba(18,20,26,0.88);
    box-shadow: 0 22px 62px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
}

.ai-live-status {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.ai-live-visual {
    min-width: 0;
    height: 94px;
    padding: 12px;
    border: 1px solid rgba(103,232,249,0.16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(103,232,249,0.1), rgba(251,188,5,0.05)),
        rgba(255,255,255,0.045);
}

.ai-live-visual canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ai-live-status-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.ai-live-status-copy > span {
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid rgba(138,180,248,0.18);
    border-radius: 999px;
    background: rgba(138,180,248,0.1);
    color: #9fe8ff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.ai-live-status-copy strong {
    color: #f7fbff;
    font-size: 20px;
    line-height: 1.15;
}

.ai-live-status-copy p {
    margin: 0;
    color: #c7d1df;
    line-height: 1.45;
}

.ai-live-status-copy small {
    min-height: 16px;
    color: #8f9aaa;
    font-size: 12px;
    font-weight: 800;
}

.ai-live-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-live-controls button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    color: #eef4ff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.ai-live-controls button > span:last-child {
    display: grid;
    gap: 1px;
    text-align: left;
}

.ai-live-controls button b,
.ai-live-controls button small {
    display: block;
    line-height: 1.08;
}

.ai-live-controls button b {
    font-size: 12px;
}

.ai-live-controls button small {
    color: #9ca8b8;
    font-size: 11px;
    font-weight: 850;
}

.ai-live-controls button[aria-pressed="true"] small {
    color: #ffe39a;
}

.ai-live-controls button:hover,
.ai-live-controls button:focus-visible {
    border-color: rgba(103,232,249,0.28);
    background: rgba(103,232,249,0.1);
}

.ai-live-controls button[aria-pressed="true"] {
    border-color: rgba(251,188,5,0.34);
    background: rgba(251,188,5,0.12);
    color: #ffe39a;
}

.ai-live-end:hover,
.ai-live-end:focus-visible {
    border-color: rgba(234,67,53,0.34) !important;
    background: rgba(234,67,53,0.12) !important;
    color: #ffb0a8;
}

.ai-live-control-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,0.085);
    color: #f7fbff;
    font-size: 12px;
    line-height: 1;
}

.ai-live-error {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(234,67,53,0.24);
    border-radius: 16px;
    background: rgba(234,67,53,0.1);
    color: #ffb0a8;
    font-weight: 800;
    line-height: 1.45;
}

.ai-live-transcript {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.ai-live-transcript-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ai-live-transcript-head strong {
    color: #f4f8ff;
    font-size: 13px;
}

.ai-live-transcript-head span {
    color: #8f9aaa;
    font-size: 12px;
    font-weight: 800;
}

.ai-live-transcript-list {
    max-height: 210px;
    display: grid;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.ai-live-transcript-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
}

.ai-live-transcript-row strong {
    color: #8ee7f5;
    font-size: 12px;
    font-weight: 950;
}

.ai-live-transcript-row.is-user strong {
    color: #8ff0a5;
}

.ai-live-transcript-row p {
    min-width: 0;
    margin: 0;
    color: #e8eef8;
    line-height: 1.45;
    font-size: 13px;
}

.ai-live-focus {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 22px;
    color: #f4fbff;
    overflow: hidden;
}

.ai-live-focus-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(103,232,249,0.22), transparent 34%),
        linear-gradient(180deg, #0d5e60 0%, #0a4d58 48%, #073046 100%);
}

.ai-live-focus-bg::before,
.ai-live-focus-bg::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.045) 43%, transparent 48%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 42px);
    animation: aiLiveFocusDrift 14s linear infinite;
}

.ai-live-focus-bg::after {
    animation-duration: 22s;
    animation-direction: reverse;
    opacity: 0.45;
}

.ai-live-focus-shell {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    min-height: min(760px, calc(100vh - 44px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 22px;
}

.ai-live-focus-head {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.ai-live-focus-mini {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #effcff;
    font: inherit;
    font-size: 22px;
    cursor: pointer;
}

.ai-live-focus-head span {
    display: inline-flex;
    max-width: 100%;
    color: rgba(225,248,255,0.72);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-live-focus-head h2 {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: clamp(30px, 5vw, 56px);
    line-height: 1.04;
    font-weight: 860;
    letter-spacing: 0;
}

.ai-live-focus-head p {
    margin: 8px 0 0;
    color: rgba(229,247,255,0.74);
    line-height: 1.35;
}

.ai-live-focus-head strong {
    color: rgba(234,251,255,0.72);
    font-size: clamp(24px, 3.8vw, 42px);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.ai-live-focus-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: 26px;
    align-items: stretch;
}

.ai-live-call-stage {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 34px;
}

.ai-live-call-orb {
    position: relative;
    width: min(42vw, 260px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(103,232,249,0.18), rgba(110,231,183,0.18)),
        rgba(255,255,255,0.08);
    box-shadow: 0 32px 90px rgba(0,0,0,0.26), inset 0 0 42px rgba(255,255,255,0.08);
}

.ai-live-call-orb span {
    position: absolute;
    inset: -18px;
    border: 1px solid rgba(142,231,245,0.28);
    border-radius: inherit;
    animation: aiLiveFocusPulse 2.4s ease-out infinite;
}

.ai-live-call-orb span:nth-child(2) {
    inset: -38px;
    animation-delay: 0.55s;
}

.ai-live-call-orb strong {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: rgba(255,255,255,0.92);
    color: #0c5a5e;
    font-size: 30px;
    font-weight: 950;
    box-shadow: 0 18px 44px rgba(0,0,0,0.2);
}

.ai-live-call-bars {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.ai-live-call-bars i {
    width: 8px;
    height: 22px;
    border-radius: 999px;
    background: rgba(226,252,255,0.82);
    animation: aiLiveFocusBars 1s ease-in-out infinite;
}

.ai-live-call-bars i:nth-child(2) { animation-delay: 0.08s; }
.ai-live-call-bars i:nth-child(3) { animation-delay: 0.16s; }
.ai-live-call-bars i:nth-child(4) { animation-delay: 0.24s; }
.ai-live-call-bars i:nth-child(5) { animation-delay: 0.32s; }
.ai-live-call-bars i:nth-child(6) { animation-delay: 0.4s; }
.ai-live-call-bars i:nth-child(7) { animation-delay: 0.48s; }

.ai-live-focus-history {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    background: rgba(3,25,37,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
}

.ai-live-focus-history-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.ai-live-focus-history-head strong {
    color: #ffffff;
    font-size: 15px;
}

.ai-live-focus-history-head span {
    color: rgba(229,247,255,0.66);
    font-size: 12px;
    font-weight: 850;
}

.ai-live-focus-list {
    min-height: 0;
    display: grid;
    align-content: end;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.ai-live-focus-row {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
}

.ai-live-focus-row span {
    color: #9ff6c9;
    font-size: 12px;
    font-weight: 950;
}

.ai-live-focus-row.is-ai span {
    color: #9fe8ff;
}

.ai-live-focus-row p,
.ai-live-focus-empty {
    margin: 0;
    color: rgba(244,251,255,0.9);
    line-height: 1.42;
    font-size: 13px;
}

.ai-live-focus-empty {
    padding: 16px;
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 16px;
    color: rgba(244,251,255,0.68);
    text-align: center;
}

.ai-live-focus-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(104px, 1fr));
    gap: 18px;
    justify-items: center;
}

.ai-live-focus-controls button {
    width: min(100%, 142px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 20px 54px rgba(0,0,0,0.18);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ai-live-focus-controls button:hover,
.ai-live-focus-controls button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(142,231,245,0.36);
    background: rgba(255,255,255,0.17);
}

.ai-live-focus-controls button[aria-pressed="true"] {
    border-color: rgba(251,188,5,0.38);
    background: rgba(251,188,5,0.16);
}

.ai-live-focus-controls button span {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.ai-live-focus-controls button small {
    max-width: 100%;
    color: rgba(241,251,255,0.84);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
}

.ai-live-focus-end {
    border-color: rgba(255,255,255,0.08) !important;
    background: #ef4038 !important;
}

.ai-live-focus-end:hover,
.ai-live-focus-end:focus-visible {
    background: #ff4a42 !important;
}

.ai-live-focus-end span {
    transform: rotate(135deg);
}

.ai-live-voice[data-state="responding"] .ai-live-call-orb {
    box-shadow: 0 34px 96px rgba(0,0,0,0.28), 0 0 70px rgba(103,232,249,0.26), inset 0 0 42px rgba(255,255,255,0.1);
}

.ai-live-voice[data-state="listening"] .ai-live-call-bars i,
.ai-live-voice[data-state="muted"] .ai-live-call-bars i {
    animation-duration: 1.8s;
    opacity: 0.58;
}

body.ai-live-focus-open {
    overflow: hidden;
}

@keyframes aiLiveFocusDrift {
    from { transform: translate3d(-4%, -2%, 0); }
    to { transform: translate3d(4%, 2%, 0); }
}

@keyframes aiLiveFocusPulse {
    0% {
        opacity: 0.56;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes aiLiveFocusBars {
    0%, 100% { height: 18px; opacity: 0.58; }
    45% { height: 62px; opacity: 1; }
}

.ai-live-voice[data-state="connecting"] .ai-live-visual,
.ai-live-voice[data-state="thinking"] .ai-live-visual {
    border-color: rgba(251,188,5,0.24);
}

.ai-live-voice[data-state="responding"] .ai-live-visual {
    border-color: rgba(103,232,249,0.32);
    box-shadow: inset 0 0 0 1px rgba(103,232,249,0.08);
}

.ai-live-voice[data-state="muted"] .ai-live-visual {
    opacity: 0.62;
}

.ai-live-voice[data-state="error"] .ai-live-visual {
    border-color: rgba(234,67,53,0.28);
}

.ai-app[data-ai-theme="soft"] .ai-live-console {
    background: rgba(255,255,255,0.92);
    color: #111827;
    border-color: rgba(15,23,42,0.1);
}

.ai-app[data-ai-theme="soft"] .ai-live-status-copy strong,
.ai-app[data-ai-theme="soft"] .ai-live-transcript-head strong {
    color: #111827;
}

.ai-app[data-ai-theme="soft"] .ai-live-status-copy p,
.ai-app[data-ai-theme="soft"] .ai-live-transcript-row p {
    color: #1f2937;
}

.ai-app[data-ai-theme="soft"] .ai-live-visual,
.ai-app[data-ai-theme="soft"] .ai-live-controls button,
.ai-app[data-ai-theme="soft"] .ai-live-transcript-row,
.ai-app[data-ai-theme="soft"] .ai-live-mode {
    border-color: rgba(15,23,42,0.1);
    background: rgba(15,23,42,0.045);
}

@media (max-width: 760px) {
    .ai-live-voice {
        margin-top: 14px;
    }

    .ai-live-start {
        width: 100%;
        min-height: 50px;
        padding: 0 14px;
        border-radius: 16px;
        font-size: 14px;
    }

    .ai-live-mode {
        width: 100%;
    }

    .ai-live-mode button {
        flex: 1 1 0;
        min-width: 0;
    }

    .ai-live-console {
        padding: 12px;
        border-radius: 20px;
    }

    .ai-live-status {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ai-live-visual {
        height: 76px;
    }

    .ai-live-status-copy strong {
        font-size: 18px;
    }

    .ai-live-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ai-live-controls button {
        min-width: 0;
        padding: 0 8px;
        font-size: 12px;
    }

    .ai-live-control-icon {
        display: none;
    }

    .ai-live-controls button > span:last-child {
        text-align: center;
    }

    .ai-live-transcript-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .ai-live-focus {
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        place-items: stretch;
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .ai-live-focus-shell {
        width: 100%;
        height: calc(100vh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
        height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 14px;
    }

    .ai-live-focus-head {
        grid-template-columns: 42px minmax(0, 1fr) 64px;
        gap: 9px;
        align-items: start;
    }

    .ai-live-focus-mini {
        width: 40px;
        height: 40px;
    }

    .ai-live-focus-head h2 {
        font-size: clamp(25px, 8vw, 34px);
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .ai-live-focus-head p {
        font-size: 13px;
        margin-top: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ai-live-focus-head strong {
        align-self: center;
        text-align: right;
        font-size: 22px;
    }

    .ai-live-focus-body {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(170px, 0.78fr) minmax(170px, 1fr);
        gap: 12px;
    }

    .ai-live-call-stage {
        min-height: 0;
        gap: 12px;
    }

    .ai-live-call-orb {
        width: min(55vw, 190px);
    }

    .ai-live-call-orb span {
        inset: -12px;
    }

    .ai-live-call-orb span:nth-child(2) {
        inset: -26px;
    }

    .ai-live-call-orb strong {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 23px;
    }

    .ai-live-call-bars {
        height: 48px;
        gap: 7px;
    }

    .ai-live-call-bars i {
        width: 7px;
    }

    .ai-live-focus-history {
        min-height: 0;
        max-height: none;
        padding: 12px;
        border-radius: 20px;
    }

    .ai-live-focus-history-head {
        gap: 8px;
    }

    .ai-live-focus-history-head strong {
        font-size: 14px;
    }

    .ai-live-focus-history-head span {
        font-size: 11px;
    }

    .ai-live-focus-list {
        gap: 8px;
        padding-right: 2px;
    }

    .ai-live-focus-row {
        padding: 9px 10px;
        border-radius: 14px;
    }

    .ai-live-focus-row p,
    .ai-live-focus-empty {
        font-size: 12px;
        line-height: 1.34;
    }

    .ai-live-focus-controls {
        width: min(100%, 390px);
        justify-self: center;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 14px;
        padding-bottom: max(2px, env(safe-area-inset-bottom));
    }

    .ai-live-focus-controls button {
        width: min(100%, 96px);
        min-width: 0;
        justify-self: center;
    }

    .ai-live-focus-controls button span {
        font-size: 23px;
    }

    .ai-live-focus-controls button small {
        font-size: 11px;
        max-width: 74px;
    }

    .ai-live-focus-end {
        grid-column: 2;
        width: min(100%, 102px) !important;
    }
}

@media (max-width: 420px) {
    .ai-live-focus-head {
        grid-template-columns: 38px minmax(0, 1fr) 56px;
    }

    .ai-live-focus-mini {
        width: 38px;
        height: 38px;
    }

    .ai-live-focus-head span {
        font-size: 10px;
    }

    .ai-live-focus-head h2 {
        font-size: 25px;
    }

    .ai-live-focus-head strong {
        font-size: 19px;
    }

    .ai-live-focus-controls {
        gap: 8px 10px;
    }
}

@media (max-height: 700px) and (max-width: 760px) {
    .ai-live-focus-shell {
        gap: 10px;
    }

    .ai-live-focus-head h2 {
        font-size: 24px;
    }

    .ai-live-focus-head p {
        display: none;
    }

    .ai-live-focus-body {
        grid-template-rows: minmax(128px, 0.62fr) minmax(140px, 1fr);
        gap: 9px;
    }

    .ai-live-call-orb {
        width: min(44vw, 150px);
    }

    .ai-live-call-orb strong {
        width: 48px;
        height: 48px;
        border-radius: 17px;
        font-size: 20px;
    }

    .ai-live-call-bars {
        height: 36px;
    }

    .ai-live-focus-history {
        padding: 10px;
    }

    .ai-live-focus-row:nth-last-child(n + 5) {
        display: none;
    }

    .ai-live-focus-controls button {
        width: min(100%, 78px);
    }

    .ai-live-focus-controls button span {
        font-size: 20px;
    }

    .ai-live-focus-controls button small {
        font-size: 10px;
    }
}

/* Europium AI - dark glass redesign inspired by the 2026 mockup */
.ai-app,
.ai-app[data-ai-theme] {
    --eu-bg: #030505;
    --eu-bg-deep: #010202;
    --eu-panel: rgba(11, 14, 15, 0.78);
    --eu-panel-strong: rgba(15, 17, 18, 0.9);
    --eu-panel-soft: rgba(255, 255, 255, 0.055);
    --eu-line: rgba(255, 255, 255, 0.115);
    --eu-line-strong: rgba(122, 238, 235, 0.28);
    --eu-text: #f5fbff;
    --eu-muted: #aeb8c2;
    --eu-dim: #77838d;
    --eu-cyan: #64f3e9;
    --eu-cyan-soft: rgba(100, 243, 233, 0.16);
    --eu-blue: #8ccaff;
    --eu-gold: #ffd77a;
    --eu-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
    --eu-inset: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    --ai-compose-space: 172px;
    position: relative;
    isolation: isolate;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    grid-template-columns: minmax(286px, 324px) minmax(0, 1fr);
    background:
        radial-gradient(circle at 58% 22%, rgba(100, 243, 233, 0.14), transparent 29%),
        radial-gradient(circle at 84% 18%, rgba(255, 215, 122, 0.09), transparent 25%),
        linear-gradient(145deg, #060807 0%, #020404 48%, #090b0b 100%);
    color: var(--eu-text);
}

.ai-app[data-ai-theme]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 17%, rgba(255, 215, 122, 0.38) 0 1px, transparent 2px),
        radial-gradient(circle at 35% 26%, rgba(100, 243, 233, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 31%, rgba(140, 202, 255, 0.22) 0 1px, transparent 2px),
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px;
    opacity: 0.42;
    mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}

.ai-app[data-ai-theme]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 53% 47%, rgba(100, 243, 233, 0.13), transparent 24%),
        radial-gradient(circle at 77% 40%, rgba(255, 215, 122, 0.08), transparent 22%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.36) 100%);
    opacity: 0.8;
}

.ai-ambient-scene {
    --ai-wave-x: 0px;
    --ai-wave-y: 0px;
    --ai-wave-tilt: 0deg;
    --ai-wave-glow: 1;
    --ai-wave-hue: 188deg;
    --ai-wave-gold: 40deg;
    --ai-wave-drift: 16s;
    --ai-pointer-x: 0px;
    --ai-pointer-y: 0px;
    --ai-star-x: 0px;
    --ai-star-y: 0px;
    position: absolute;
    inset: 0 0 0 324px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ai-lunar-globe {
    position: absolute;
    right: clamp(34px, 9vw, 128px);
    top: clamp(94px, 15vh, 160px);
    width: clamp(176px, 24vw, 320px);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(166, 255, 248, 0.72) 14%, rgba(78, 190, 198, 0.22) 36%, rgba(8, 18, 20, 0.04) 62%, transparent 72%),
        radial-gradient(circle at 66% 68%, rgba(255, 215, 122, 0.18), transparent 32%);
    box-shadow:
        0 0 54px rgba(100, 243, 233, 0.38),
        0 0 140px rgba(100, 243, 233, 0.23),
        inset -24px -18px 60px rgba(0, 0, 0, 0.3),
        inset 12px 10px 34px rgba(255, 255, 255, 0.12);
    opacity: 0.76;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0) scale(1);
    animation: aiLunarFloat 8.6s ease-in-out infinite alternate;
}

.ai-lunar-globe::before,
.ai-lunar-globe::after {
    content: "";
    position: absolute;
    inset: -24%;
    border-radius: inherit;
    background:
        conic-gradient(from 16deg, transparent 0 20%, rgba(100, 243, 233, 0.18) 28%, transparent 36% 58%, rgba(255, 215, 122, 0.12) 64%, transparent 72% 100%);
    filter: blur(16px);
    opacity: 0.82;
    animation: aiLunarAuraSpin 12s linear infinite;
}

.ai-lunar-globe::after {
    inset: -42%;
    filter: blur(28px);
    opacity: 0.52;
    animation-duration: 19s;
    animation-direction: reverse;
}

.ai-lunar-crater {
    position: absolute;
    border-radius: 999px;
    background: rgba(1, 18, 20, 0.18);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 255, 255, 0.08);
}

.ai-lunar-crater-a {
    left: 33%;
    top: 25%;
    width: 12%;
    height: 12%;
}

.ai-lunar-crater-b {
    right: 29%;
    top: 45%;
    width: 8%;
    height: 8%;
}

.ai-lunar-crater-c {
    left: 48%;
    bottom: 26%;
    width: 15%;
    height: 15%;
    opacity: 0.55;
}

.ai-lunar-orbits {
    position: absolute;
    left: 8%;
    right: 2%;
    top: 4%;
    height: 58%;
    opacity: 0.88;
    transform: translate3d(var(--ai-pointer-x), var(--ai-pointer-y), 0);
    transition: transform 2.8s ease;
}

.ai-lunar-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86%;
    height: 58%;
    border: 1px solid rgba(100, 243, 233, 0.22);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(100, 243, 233, 0.15), inset 0 0 28px rgba(100, 243, 233, 0.07);
    transform: translate(-50%, -50%) rotate(-10deg);
    animation: aiOrbitSpin 12s linear infinite;
}

.ai-lunar-orbit::before {
    content: "";
    position: absolute;
    left: 8%;
    top: 43%;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #bafffb;
    box-shadow: 0 0 18px rgba(100, 243, 233, 0.95), 0 0 44px rgba(100, 243, 233, 0.45);
}

.ai-lunar-orbit-b {
    width: 72%;
    height: 48%;
    border-color: rgba(255, 215, 122, 0.18);
    transform: translate(-50%, -50%) rotate(15deg);
    animation-duration: 17s;
    animation-direction: reverse;
}

.ai-lunar-orbit-b::before {
    left: 77%;
    top: 48%;
    background: #ffe4a0;
    box-shadow: 0 0 18px rgba(255, 215, 122, 0.82), 0 0 38px rgba(255, 215, 122, 0.36);
}

.ai-lunar-orbit-c {
    width: 102%;
    height: 66%;
    opacity: 0.55;
    transform: translate(-50%, -50%) rotate(31deg);
    animation-duration: 23s;
}

.ai-lunar-comet {
    position: absolute;
    left: -16%;
    top: 24%;
    width: 180px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(176, 255, 250, 0.94), rgba(255, 215, 122, 0.64), transparent);
    filter: blur(0.2px);
    box-shadow: 0 0 18px rgba(100, 243, 233, 0.72), 0 0 42px rgba(100, 243, 233, 0.28);
    opacity: 0;
    transform: translate3d(-20vw, 10vh, 0) rotate(-13deg);
    animation: aiLunarComet 7.2s ease-in-out infinite;
}

.ai-ambient-scene::before,
.ai-ambient-scene::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 30% 25%, rgba(100, 243, 233, 0.17), transparent 22%),
        radial-gradient(circle at 70% 18%, rgba(255, 215, 122, 0.11), transparent 20%);
    filter: blur(30px);
    opacity: 0.9;
    transform: translate3d(var(--ai-pointer-x), var(--ai-pointer-y), 0);
    transition: transform 2.6s ease;
}

.ai-ambient-scene::after {
    background:
        radial-gradient(circle at 16% 62%, rgba(140, 202, 255, 0.1), transparent 24%),
        radial-gradient(circle at 90% 72%, rgba(100, 243, 233, 0.11), transparent 28%);
    animation: aiAmbientBreath 22s ease-in-out infinite alternate;
}

.ai-ambient-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #d9fffb;
    box-shadow: 0 0 18px rgba(100, 243, 233, 0.82);
    opacity: 0.75;
    transform: translate3d(var(--ai-star-x), var(--ai-star-y), 0);
    transition: transform 8.4s ease;
}

.ai-ambient-star-a {
    left: 23%;
    top: 18%;
}

.ai-ambient-star-b {
    right: 18%;
    top: 22%;
    background: #ffe1a3;
    box-shadow: 0 0 18px rgba(255, 215, 122, 0.64);
    animation: aiStarTwinkle 4.6s ease-in-out infinite;
}

.ai-ambient-star-c {
    left: 68%;
    top: 38%;
    animation: aiStarTwinkle 6.2s ease-in-out infinite reverse;
}

.ai-ambient-wave {
    position: absolute;
    left: -22%;
    right: -16%;
    top: clamp(70px, 17vh, 178px);
    height: min(52vh, 500px);
    opacity: calc(0.94 * var(--ai-wave-glow));
    transform:
        translate3d(
            calc(var(--ai-wave-x) + var(--ai-pointer-x)),
            calc(var(--ai-wave-y) + var(--ai-pointer-y)),
            0
        )
        rotate(var(--ai-wave-tilt));
    transition: transform 6.4s cubic-bezier(.22,.72,.2,1), opacity 6.4s ease;
    animation: aiWaveFloat var(--ai-wave-drift) ease-in-out infinite alternate;
}

.ai-wave-line,
.ai-wave-core,
.ai-wave-dust {
    position: absolute;
    pointer-events: none;
}

.ai-wave-line {
    left: 0;
    right: 0;
    top: 33%;
    height: 172%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: rotate(-4deg);
}

.ai-wave-line-a {
    border-top: 3px solid rgba(112, 255, 247, 0.84);
    box-shadow:
        0 -1px 34px rgba(100, 243, 233, 0.76),
        0 -11px 92px rgba(100, 243, 233, 0.28),
        0 18px 140px rgba(100, 243, 233, 0.16);
    filter: blur(0.05px) hue-rotate(calc(var(--ai-wave-hue) - 188deg));
}

.ai-wave-line-a::before {
    content: "";
    position: absolute;
    inset: -64px 4% auto;
    height: 136px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 48% 100%, rgba(100, 243, 233, 0.52), transparent 62%),
        linear-gradient(90deg, transparent, rgba(140, 202, 255, 0.24), rgba(100, 243, 233, 0.36), transparent);
    filter: blur(24px);
    opacity: 0.96;
}

.ai-wave-line-a::after {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: -11px;
    height: 28px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 0 23%, rgba(255, 255, 255, 0.78) 36%, rgba(100, 243, 233, 0.52) 45%, transparent 58% 100%);
    filter: blur(8px);
    opacity: 0.75;
    transform: translateX(-26%);
    animation: aiWaveShimmer 4.6s ease-in-out infinite;
}

.ai-wave-line-b {
    top: 37%;
    border-top: 2px solid rgba(255, 215, 122, 0.66);
    box-shadow:
        0 -1px 30px rgba(255, 215, 122, 0.54),
        0 -8px 76px rgba(255, 215, 122, 0.18);
    filter: hue-rotate(calc(var(--ai-wave-gold) - 40deg));
    opacity: 0.84;
    transform: rotate(-2deg);
}

.ai-wave-core {
    left: 15%;
    right: 15%;
    top: 40%;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(100, 243, 233, 0.94), rgba(140, 202, 255, 0.7), rgba(255, 215, 122, 0.58), transparent);
    filter: blur(10px);
    opacity: 0.9;
    animation: aiWavePulse 5.8s ease-in-out infinite;
}

.ai-wave-dust {
    width: 42%;
    height: 66%;
    top: 24%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(100, 243, 233, 0.26), transparent 60%),
        repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 15px);
    filter: blur(10px);
    opacity: 0.46;
}

.ai-wave-dust-a {
    left: 5%;
    transform: rotate(-12deg);
}

.ai-wave-dust-b {
    right: 2%;
    transform: rotate(14deg);
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255, 215, 122, 0.16), transparent 58%),
        repeating-linear-gradient(76deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px);
}

.ai-sidebar,
.ai-main,
.ai-sidebar-backdrop {
    position: relative;
}

.ai-sidebar,
.ai-main {
    z-index: 2;
}

.ai-sidebar,
.ai-app[data-ai-theme] .ai-sidebar {
    min-height: 100dvh;
    height: 100dvh;
    gap: 18px;
    padding: 18px 18px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.016)),
        rgba(5, 6, 6, 0.84);
    box-shadow: 18px 0 70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.ai-sidebar-top {
    min-height: 46px;
}

.ai-sidebar .small-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: none;
    color: var(--eu-text);
    -webkit-text-fill-color: currentColor;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 24px rgba(100, 243, 233, 0.18);
}

.ai-sidebar .small-logo::before {
    content: "";
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 12px;
    background:
        radial-gradient(circle at 38% 32%, #fff7d6 0 5px, transparent 6px),
        radial-gradient(circle at 63% 65%, rgba(100, 243, 233, 0.92) 0 4px, transparent 5px),
        linear-gradient(135deg, rgba(255, 215, 122, 0.22), rgba(100, 243, 233, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 0 24px rgba(100, 243, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ai-new-chat,
.ai-app[data-ai-theme] .ai-new-chat {
    min-height: 54px;
    border: 1px solid rgba(100, 243, 233, 0.42);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(180, 251, 255, 0.98), rgba(49, 224, 186, 0.92)),
        var(--eu-cyan);
    color: #021313;
    box-shadow: 0 16px 44px rgba(100, 243, 233, 0.2), var(--eu-inset);
    font-size: 15px;
    font-weight: 950;
}

.ai-new-chat::before {
    content: "+";
    margin-right: 10px;
    font-size: 24px;
    line-height: 0;
    font-weight: 500;
}

.ai-new-chat:hover,
.ai-new-chat:focus-visible {
    border-color: rgba(255, 255, 255, 0.52);
    background:
        linear-gradient(135deg, rgba(210, 255, 255, 1), rgba(69, 235, 196, 0.98)),
        var(--eu-cyan);
    box-shadow: 0 18px 54px rgba(100, 243, 233, 0.29), 0 0 0 4px rgba(100, 243, 233, 0.08);
}

.ai-sidebar-section-title {
    color: rgba(235, 244, 247, 0.78);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-project-box,
.ai-storage-box,
.ai-chat-list-wrap {
    gap: 11px;
}

.ai-storage-box {
    border-top: 0;
    padding-top: 4px;
}

.ai-project-item,
.ai-chat-row > button,
.ai-secondary-action,
.ai-storage-summary,
.ai-bundle-row,
.ai-memory-item,
.ai-chat-search input,
.ai-app[data-ai-theme] .ai-project-item,
.ai-app[data-ai-theme] .ai-chat-row > button,
.ai-app[data-ai-theme] .ai-secondary-action {
    border-color: rgba(255, 255, 255, 0.105);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.025);
    color: var(--eu-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.ai-project-item,
.ai-chat-row > button {
    min-height: 52px;
    padding: 10px 46px 10px 12px;
}

.ai-secondary-action {
    min-height: 46px;
}

.ai-project-item:hover,
.ai-chat-row > button:hover,
.ai-secondary-action:hover,
.ai-project-row.active .ai-project-item,
.ai-chat-row.active > button {
    border-color: rgba(100, 243, 233, 0.28);
    background: rgba(100, 243, 233, 0.075);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ai-project-icon {
    border-color: color-mix(in srgb, var(--project-color, #64f3e9) 50%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--project-color, #64f3e9) 24%, transparent);
}

.ai-chat-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ai-chat-search input {
    min-height: 42px;
    padding: 0 40px 0 14px;
    color: var(--eu-text);
}

.ai-chat-search::after {
    content: "\2315";
    align-self: end;
    justify-self: end;
    margin: -34px 13px 0 0;
    color: rgba(245, 251, 255, 0.68);
    pointer-events: none;
}

.ai-storage-summary {
    position: relative;
    gap: 5px;
    padding: 13px 14px 17px 48px;
    overflow: hidden;
}

.ai-storage-summary::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 17px;
    width: 18px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--eu-cyan), var(--eu-blue));
    box-shadow: 0 0 20px rgba(100, 243, 233, 0.28);
}

.ai-storage-summary::after {
    content: "";
    position: absolute;
    left: 48px;
    right: 20px;
    bottom: 10px;
    height: 5px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--eu-cyan) 0 66%, rgba(255, 255, 255, 0.16) 66% 100%);
}

.ai-storage-summary strong,
.ai-bundle-row span,
.ai-project-copy > span,
.ai-chat-row > button > span {
    color: var(--eu-text);
}

.ai-storage-summary small,
.ai-bundle-row small,
.ai-project-item small,
.ai-chat-row small,
.ai-compose-limit,
.ai-list-empty {
    color: var(--eu-muted);
}

.ai-icon-btn,
.ai-chat-actions button {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--eu-text);
}

.ai-chat-actions button:hover,
.ai-icon-btn:hover,
.ai-icon-btn:focus-visible {
    border-color: rgba(100, 243, 233, 0.34);
    background: rgba(100, 243, 233, 0.12);
}

.ai-main {
    min-width: 0;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 20%);
}

.ai-chat-header,
.ai-app[data-ai-theme] .ai-chat-header {
    min-height: 86px;
    padding: 16px 92px 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(4, 5, 5, 0.64);
    box-shadow: none;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.ai-chat-header h1 {
    margin: 0;
    max-width: min(42vw, 520px);
    overflow: hidden;
    color: rgba(245, 251, 255, 0.86);
    font-size: 17px;
    font-weight: 820;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-header-actions {
    gap: 12px;
}

.ai-export-btn,
.ai-ghost-btn {
    min-height: 46px;
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--eu-text);
    box-shadow: var(--eu-inset);
}

.ai-export-btn::before {
    content: "\2193";
    margin-right: 8px;
    font-weight: 900;
}

.ai-export-btn:hover,
.ai-ghost-btn:hover,
.ai-export-btn:focus-visible,
.ai-ghost-btn:focus-visible {
    border-color: rgba(100, 243, 233, 0.28);
    background: rgba(100, 243, 233, 0.09);
}

.ai-chat-header .product-switch {
    min-height: 46px;
    padding: 0;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    overflow: hidden;
    box-shadow: var(--eu-inset);
}

.ai-chat-header .product-switch a,
.ai-chat-header .product-switch button {
    min-height: 46px;
    min-width: 92px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(245, 251, 255, 0.88);
    font-size: 14px;
    font-weight: 850;
}

.ai-chat-header .product-switch a.active,
.ai-chat-header .product-switch button.active,
.ai-chat-header .product-switch button[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(191, 255, 255, 0.98), rgba(64, 224, 197, 0.95));
    color: #021313;
}

.ai-chat-stage {
    position: relative;
    z-index: 1;
    overflow: auto;
    padding: 36px 28px var(--ai-compose-space, 172px);
    scroll-padding-bottom: var(--ai-compose-space, 172px);
    overscroll-behavior: contain;
}

.ai-empty-hero {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    margin: clamp(72px, 13vh, 150px) auto 0;
    text-align: center;
}

.ai-empty-hero h2,
.ai-app[data-ai-theme] .ai-empty-hero h2 {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 18px;
    background:
        linear-gradient(94deg, #ffd66f 0%, #ffefbd 23%, #eefdf6 43%, #61fff0 68%, #45dcff 100%);
    background-size: 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.035);
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42))
        drop-shadow(0 12px 30px rgba(100, 243, 233, 0.22))
        drop-shadow(0 0 20px rgba(255, 215, 122, 0.1));
    font-size: clamp(54px, 7vw, 82px);
    font-weight: 900;
    line-height: 1.02;
    text-wrap: balance;
    animation: aiHeroGlowPulse 4.8s ease-in-out infinite;
}

.ai-empty-hero p {
    max-width: 650px;
    color: rgba(233, 240, 246, 0.78);
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.65;
}

.ai-prompt-grid {
    width: min(900px, 100%);
    margin: 58px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
    justify-content: center;
}

.ai-prompt-grid button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
        rgba(16, 20, 20, 0.72);
    color: var(--eu-text);
    box-shadow: var(--eu-inset), 0 20px 60px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 860;
    white-space: normal;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ai-prompt-grid button::before {
    content: "";
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(140, 202, 255, 0.95), rgba(100, 243, 233, 0.75)),
        rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 22px rgba(100, 243, 233, 0.25);
}

.ai-prompt-grid button:nth-child(2)::before {
    background: linear-gradient(180deg, var(--eu-cyan), #277c87);
    mask-image: linear-gradient(#000 0 0);
}

.ai-prompt-grid button:nth-child(4)::before,
.ai-prompt-grid button:nth-child(5)::before {
    background: linear-gradient(135deg, var(--eu-gold), rgba(100, 243, 233, 0.78));
}

.ai-prompt-grid button:nth-child(5):last-child {
    grid-column: 2 / 4;
}

.ai-prompt-grid button:nth-child(5):not(:last-child) {
    grid-column: 2 / 3;
}

.ai-prompt-grid button:nth-child(6) {
    grid-column: 3 / 4;
}

.ai-prompt-grid button:hover,
.ai-prompt-grid button:focus-visible {
    border-color: rgba(100, 243, 233, 0.36);
    background:
        linear-gradient(180deg, rgba(100, 243, 233, 0.14), rgba(255, 255, 255, 0.035)),
        rgba(16, 20, 20, 0.82);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26), 0 0 0 4px rgba(100, 243, 233, 0.06);
}

.ai-live-voice {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 36px auto 0;
}

.ai-live-mode {
    min-width: min(320px, 100%);
    padding: 4px;
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: var(--eu-inset);
}

.ai-live-mode button {
    min-width: 100px;
    min-height: 36px;
    flex: 1 1 auto;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(245, 251, 255, 0.84);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.ai-live-mode button.active,
.ai-live-mode button[aria-pressed="true"] {
    border-color: rgba(100, 243, 233, 0.44);
    background: rgba(100, 243, 233, 0.22);
    color: #f5fbff;
    box-shadow: inset 0 0 0 1px rgba(100, 243, 233, 0.16);
}

.ai-live-start {
    min-width: min(430px, 100%);
    min-height: 60px;
    border-color: rgba(100, 243, 233, 0.46);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(194, 255, 252, 0.98), rgba(111, 208, 255, 0.92)),
        var(--eu-blue);
    color: #021313;
    box-shadow:
        0 20px 62px rgba(100, 243, 233, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        var(--eu-inset);
    font-size: 17px;
    font-weight: 950;
}

.ai-live-start:hover,
.ai-live-start:focus-visible {
    border-color: rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(135deg, rgba(220, 255, 254, 1), rgba(132, 219, 255, 0.98)),
        var(--eu-blue);
    box-shadow: 0 24px 74px rgba(100, 243, 233, 0.3);
}

.ai-live-mic-mark::before {
    background: #052020;
    box-shadow: none;
}

.ai-live-mic-mark::after {
    border-color: rgba(2, 19, 19, 0.9);
}

.ai-live-mic-mark span {
    background: rgba(2, 19, 19, 0.9);
}

.ai-live-console,
.ai-modal,
.ai-quiz-builder,
.ai-image-compressor,
.ai-image-library,
.ai-image-generation-panel,
.ai-app[data-ai-theme] .ai-live-console {
    border-color: rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
        rgba(9, 12, 13, 0.88);
    color: var(--eu-text);
    box-shadow: var(--eu-shadow), var(--eu-inset);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ai-app .ai-chat-messages {
    width: min(980px, 100%);
    margin: 0 auto;
}

.ai-app .ai-message {
    position: relative;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--eu-text);
}

.ai-app .ai-message-assistant {
    padding: 18px 4px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    background: transparent;
}

.ai-app .ai-message-user,
.ai-app[data-ai-theme] .ai-message-user {
    max-width: min(78%, 720px);
    margin-left: auto;
    border: 1px solid rgba(100, 243, 233, 0.26);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(100, 243, 233, 0.18), rgba(140, 202, 255, 0.1)),
        rgba(11, 17, 18, 0.82);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), var(--eu-inset);
}

.ai-app .ai-message-label {
    color: var(--eu-cyan);
}

.ai-message-content,
.ai-message-content p {
    color: rgba(245, 251, 255, 0.9);
}

.ai-message-content code,
.ai-message-content pre {
    border-color: rgba(100, 243, 233, 0.13);
    background: rgba(255, 255, 255, 0.055);
}

.ai-compose-modern,
.ai-app[data-ai-theme] .ai-compose-modern {
    left: calc(50vw + 162px);
    bottom: 28px;
    width: min(1088px, calc(100vw - 390px));
    align-items: end;
    gap: 11px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
        rgba(7, 9, 10, 0.86);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.ai-compose-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 83% 50%, rgba(100, 243, 233, 0.14), transparent 23%),
        linear-gradient(90deg, rgba(255, 215, 122, 0.08), transparent 28%, transparent 70%, rgba(100, 243, 233, 0.08));
    opacity: 0.74;
}

.ai-compose-modern > * {
    position: relative;
    z-index: 1;
}

.ai-compose-intelligence {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.ai-answer-modes {
    gap: 8px;
}

.ai-answer-modes button,
.ai-pro-switch,
.ai-tool-btn,
.ai-image-models button {
    border-color: rgba(255, 255, 255, 0.115);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(245, 251, 255, 0.9);
    box-shadow: var(--eu-inset);
}

.ai-answer-modes button.active,
.ai-answer-modes button:hover,
.ai-answer-modes button:focus-visible,
.ai-tool-btn:hover,
.ai-tool-btn:focus-visible,
.ai-image-models button.active,
.ai-image-models button:hover,
.ai-image-models button:focus-visible {
    border-color: rgba(100, 243, 233, 0.34);
    background: rgba(100, 243, 233, 0.12);
    color: var(--eu-text);
}

.ai-pro-switch:has(input:checked) {
    border-color: rgba(255, 215, 122, 0.38);
    background: rgba(255, 215, 122, 0.13);
}

.ai-pro-switch input {
    accent-color: var(--eu-cyan);
}

.ai-tool-btn {
    width: 46px;
    height: 46px;
    border-radius: 15px;
}

.ai-compose-modern textarea {
    min-height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(0, 0, 0, 0.18);
    color: var(--eu-text);
    padding: 17px 20px;
}

.ai-compose-modern textarea::placeholder {
    color: rgba(245, 251, 255, 0.42);
}

.ai-compose-modern textarea:focus {
    border-color: rgba(100, 243, 233, 0.38);
    box-shadow: 0 0 0 4px rgba(100, 243, 233, 0.07);
}

.ai-compose-modern .primary-btn {
    min-width: 142px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(177, 250, 255, 1), rgba(55, 226, 190, 0.96)),
        var(--eu-cyan);
    color: #021313;
    box-shadow: 0 18px 54px rgba(100, 243, 233, 0.24), var(--eu-inset);
    font-weight: 950;
}

.ai-compose-modern .primary-btn::after {
    content: "\2197";
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: 10px;
    border-radius: 999px;
    background: rgba(2, 19, 19, 0.12);
}

.ai-compose-modern .primary-btn:hover,
.ai-compose-modern .primary-btn:focus-visible {
    background:
        linear-gradient(135deg, rgba(211, 255, 255, 1), rgba(71, 238, 200, 1)),
        var(--eu-cyan);
    box-shadow: 0 22px 66px rgba(100, 243, 233, 0.34);
}

.ai-compose-limit {
    color: rgba(222, 232, 238, 0.68);
}

.ai-image-generation-head strong,
.ai-modal h2,
.ai-quiz-builder h2,
.ai-live-status-copy strong,
.ai-live-transcript-head strong {
    color: var(--eu-text);
}

.ai-image-generation-head small,
.ai-modal p,
.ai-quiz-builder p,
.ai-live-status-copy p,
.ai-live-status-copy small,
.ai-live-transcript-row p {
    color: rgba(222, 232, 238, 0.76);
}

.ai-toast {
    border-color: rgba(255, 255, 255, 0.13);
    border-left-color: var(--eu-cyan);
    background: rgba(8, 10, 11, 0.94);
    box-shadow: var(--eu-shadow);
}

.ai-app.ai-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

.ai-app.ai-sidebar-collapsed .ai-ambient-scene {
    left: 76px;
}

.ai-app.ai-sidebar-collapsed .ai-compose-modern {
    left: calc(50vw + 38px);
    width: min(1088px, calc(100vw - 132px));
}

.ai-app.ai-sidebar-collapsed .ai-new-chat::before {
    margin-right: 0;
}

body:has(.ai-app) .global-profile-slot {
    top: 19px;
    right: 22px;
    z-index: 80;
}

@keyframes aiAmbientBreath {
    0% {
        opacity: 0.52;
        transform: translate3d(-1.4%, -0.8%, 0) scale(1);
    }

    100% {
        opacity: 0.82;
        transform: translate3d(1.6%, 1%, 0) scale(1.04);
    }
}

@keyframes aiWaveFloat {
    0% {
        transform:
            translate3d(
                calc(var(--ai-wave-x) + var(--ai-pointer-x) - 15px),
                calc(var(--ai-wave-y) + var(--ai-pointer-y) + 6px),
                0
            )
            rotate(calc(var(--ai-wave-tilt) - 0.9deg))
            scale(1);
    }

    45% {
        transform:
            translate3d(
                calc(var(--ai-wave-x) + var(--ai-pointer-x) + 6px),
                calc(var(--ai-wave-y) + var(--ai-pointer-y) - 8px),
                0
            )
            rotate(calc(var(--ai-wave-tilt) + 0.7deg))
            scale(1.025);
    }

    100% {
        transform:
            translate3d(
                calc(var(--ai-wave-x) + var(--ai-pointer-x) + 16px),
                calc(var(--ai-wave-y) + var(--ai-pointer-y) - 5px),
                0
            )
            rotate(calc(var(--ai-wave-tilt) + 0.95deg))
            scale(1.015);
    }
}

@keyframes aiWavePulse {
    0%, 100% {
        opacity: 0.58;
        transform: scaleX(0.78) translateY(0);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.16) translateY(-2px);
    }
}

@keyframes aiWaveShimmer {
    0% {
        opacity: 0;
        transform: translateX(-32%) scaleX(0.72);
    }

    18%, 68% {
        opacity: 0.88;
    }

    100% {
        opacity: 0;
        transform: translateX(38%) scaleX(1.05);
    }
}

@keyframes aiLunarFloat {
    0% {
        opacity: 0.66;
        transform: translate3d(-10px, 10px, 0) scale(0.96);
    }

    42% {
        opacity: 0.84;
        transform: translate3d(12px, -12px, 0) scale(1.04);
    }

    100% {
        opacity: 0.74;
        transform: translate3d(-4px, -4px, 0) scale(1.01);
    }
}

@keyframes aiLunarAuraSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aiOrbitSpin {
    to {
        transform: translate(-50%, -50%) rotate(350deg);
    }
}

@keyframes aiLunarComet {
    0%, 24% {
        opacity: 0;
        transform: translate3d(-22vw, 12vh, 0) rotate(-13deg) scaleX(0.68);
    }

    34% {
        opacity: 0.95;
    }

    54% {
        opacity: 0.72;
        transform: translate3d(64vw, -8vh, 0) rotate(-13deg) scaleX(1.08);
    }

    66%, 100% {
        opacity: 0;
        transform: translate3d(92vw, -16vh, 0) rotate(-13deg) scaleX(0.86);
    }
}

@keyframes aiStarTwinkle {
    0%, 100% {
        opacity: 0.32;
        transform: translate3d(var(--ai-star-x), var(--ai-star-y), 0) scale(0.82);
    }

    48% {
        opacity: 0.92;
        transform: translate3d(var(--ai-star-x), var(--ai-star-y), 0) scale(1.18);
    }
}

@keyframes aiHeroGlowPulse {
    0%, 100% {
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42))
            drop-shadow(0 10px 28px rgba(100, 243, 233, 0.2))
            drop-shadow(0 0 18px rgba(255, 215, 122, 0.08));
    }

    50% {
        filter:
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
            drop-shadow(0 16px 42px rgba(100, 243, 233, 0.34))
            drop-shadow(0 0 30px rgba(255, 215, 122, 0.16));
    }
}

@media (max-width: 1100px) {
    .ai-app,
    .ai-app[data-ai-theme] {
        grid-template-columns: minmax(260px, 292px) minmax(0, 1fr);
    }

    .ai-ambient-scene {
        left: 292px;
    }

    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern {
        left: calc(50vw + 146px);
        width: min(920px, calc(100vw - 340px));
    }

    .ai-prompt-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        width: min(620px, 100%);
    }

    .ai-prompt-grid button:nth-child(n) {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .ai-app,
    .ai-app[data-ai-theme] {
        grid-template-columns: 1fr;
        height: 100dvh;
        min-height: 100dvh;
    }

    .ai-app[data-ai-theme]::before {
        mask-image: none;
        opacity: 0.28;
    }

    .ai-ambient-scene,
    .ai-app.ai-sidebar-collapsed .ai-ambient-scene {
        inset: 0;
        left: 0;
    }

    .ai-ambient-wave {
        left: -56%;
        right: -48%;
        top: clamp(60px, 12vh, 118px);
        height: 370px;
        opacity: 0.9;
    }

    .ai-lunar-globe {
        right: -46px;
        top: 86px;
        width: 190px;
        opacity: 0.54;
    }

    .ai-lunar-orbits {
        left: -40%;
        right: -18%;
        top: 4%;
        height: 42%;
        opacity: 0.42;
    }

    .ai-lunar-comet {
        width: 120px;
        animation-duration: 7.4s;
    }

    .ai-sidebar,
    .ai-app[data-ai-theme] .ai-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 220;
        width: min(88vw, 340px);
        height: 100dvh;
        padding: 16px;
        border-right-color: rgba(100, 243, 233, 0.16);
        overflow: hidden;
        transform: translateX(-105%);
    }

    .ai-sidebar.is-open {
        transform: translateX(0);
    }

    .ai-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 190;
    }

    .ai-main {
        z-index: 1;
        grid-row: 1;
    }

    .ai-chat-header,
    .ai-app[data-ai-theme] .ai-chat-header {
        min-height: 62px;
        padding: 8px 68px 8px 12px;
        background: rgba(4, 5, 5, 0.78);
    }

    .ai-chat-header h1 {
        max-width: 48vw;
        font-size: 16px;
    }

    .ai-export-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .ai-export-btn::before {
        margin-right: 0;
    }

    .ai-export-btn {
        font-size: 0;
    }

    .ai-export-btn::before {
        font-size: 17px;
    }

    .ai-chat-stage {
        padding: 18px 12px var(--ai-compose-space, 168px);
    }

    .ai-empty-hero {
        margin-top: clamp(46px, 9vh, 86px);
        padding: 0 4px;
    }

    .ai-empty-hero h2,
    .ai-app[data-ai-theme] .ai-empty-hero h2 {
        font-size: clamp(42px, 13vw, 62px);
    }

    .ai-empty-hero p {
        font-size: 15px;
        line-height: 1.55;
    }

    .ai-prompt-grid {
        margin-top: 34px;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ai-prompt-grid button {
        min-height: 58px;
        padding: 0 10px;
        border-radius: 15px;
        font-size: 13px;
    }

    .ai-prompt-grid button::before {
        width: 21px;
        height: 21px;
        border-radius: 8px;
    }

    .ai-live-voice {
        margin-top: 46px;
    }

    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern,
    .ai-app.ai-sidebar-collapsed .ai-compose-modern {
        left: 50%;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
        border-radius: 22px;
    }

    .ai-compose-intelligence {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .ai-answer-modes button,
    .ai-pro-switch {
        min-height: 32px;
        font-size: 12px;
    }

    .ai-compose-modern .ai-compose-tools {
        grid-column: 1 / -1;
        overflow-x: auto;
        padding: 0 0 1px;
    }

    .ai-tool-btn {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
    }

    .ai-compose-modern textarea {
        grid-column: 1;
        min-height: 46px;
        max-height: 132px;
        padding: 12px 13px;
        border-radius: 15px;
        font-size: 15px;
    }

    .ai-compose-modern .primary-btn {
        grid-column: 2;
        min-width: 48px;
        width: 48px;
        height: 46px;
        padding: 0;
        font-size: 0;
    }

    .ai-compose-modern .primary-btn::after {
        width: 32px;
        height: 32px;
        margin-left: 0;
        font-size: 17px;
    }

    .ai-compose-modern .ai-compose-limit {
        display: none;
    }

    .ai-app .ai-message-user {
        max-width: min(92%, 620px);
    }

    body:has(.ai-app) .global-profile-slot {
        top: 10px;
        right: 10px;
        z-index: 70;
    }
}

@media (max-width: 560px) {
    .ai-sidebar .small-logo {
        font-size: 22px;
    }

    .ai-prompt-grid {
        grid-template-columns: 1fr;
    }

    .ai-prompt-grid button {
        justify-content: flex-start;
        min-height: 54px;
        text-align: left;
    }

    .ai-live-start {
        min-height: 54px;
        font-size: 14px;
    }

    .ai-live-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-empty-hero h2,
    .ai-app[data-ai-theme] .ai-empty-hero h2 {
        font-size: clamp(38px, 15vw, 54px);
    }
}

@media (max-width: 380px) {
    .ai-chat-header h1 {
        max-width: 40vw;
    }

    .ai-answer-modes button {
        padding: 0 9px;
    }

    .ai-pro-switch {
        padding: 0 8px;
    }

    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern {
        width: calc(100% - 10px);
        padding: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-ambient-scene::after,
    .ai-ambient-wave,
    .ai-wave-core,
    .ai-wave-line-a::after,
    .ai-lunar-globe,
    .ai-lunar-globe::before,
    .ai-lunar-globe::after,
    .ai-lunar-orbit,
    .ai-lunar-comet,
    .ai-ambient-star,
    .ai-empty-hero h2,
    .ai-app[data-ai-theme] .ai-empty-hero h2 {
        animation: none !important;
        transition: none !important;
    }
}

/* Keep the composer in the app grid so the hero and voice controls never sit underneath it. */
.ai-chat-stage {
    padding-bottom: 28px;
    scroll-padding-bottom: 28px;
}

.ai-compose-modern,
.ai-app[data-ai-theme] .ai-compose-modern,
.ai-app.ai-sidebar-collapsed .ai-compose-modern {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    animation: none;
    justify-self: center;
    width: min(1088px, calc(100% - 56px));
    margin: 0 auto 28px;
}

.ai-toast-region {
    bottom: 18px;
}

@media (max-width: 900px) {
    .ai-chat-stage {
        padding-bottom: 16px;
        scroll-padding-bottom: 16px;
    }

    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern,
    .ai-app.ai-sidebar-collapsed .ai-compose-modern {
        width: calc(100% - 16px);
        margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .ai-toast-region {
        bottom: 92px;
    }
}

@media (max-height: 820px) and (min-width: 901px) {
    .ai-chat-stage {
        padding-top: 20px;
    }

    .ai-empty-hero {
        margin-top: clamp(26px, 5vh, 46px);
    }

    .ai-empty-hero h2,
    .ai-app[data-ai-theme] .ai-empty-hero h2 {
        margin-bottom: 12px;
        font-size: clamp(48px, 6vw, 70px);
    }

    .ai-empty-hero p {
        font-size: 16px;
        line-height: 1.5;
    }

    .ai-prompt-grid {
        margin-top: 30px;
        gap: 10px;
    }

    .ai-prompt-grid button {
        min-height: 56px;
    }

    .ai-live-voice {
        margin-top: 10px;
    }

    .ai-live-mode button {
        min-height: 30px;
    }

    .ai-live-start {
        min-height: 46px;
    }

    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern,
    .ai-app.ai-sidebar-collapsed .ai-compose-modern {
        padding: 14px 16px;
        margin-bottom: 18px;
    }

    .ai-tool-btn {
        width: 42px;
        height: 42px;
    }

    .ai-compose-modern textarea {
        min-height: 50px;
        padding: 13px 16px;
    }

    .ai-compose-modern .primary-btn {
        height: 50px;
    }
}

@media (max-width: 380px) {
    .ai-compose-modern,
    .ai-app[data-ai-theme] .ai-compose-modern {
        width: calc(100% - 10px);
    }
}

/* Europium AI home cleanup */
.ai-prompt-grid {
    display: none;
}

.ai-empty-hero,
.ai-app[data-ai-theme] .ai-empty-hero {
    margin: clamp(96px, 16vh, 180px) auto 0;
}

.ai-empty-hero p,
.ai-app[data-ai-theme] .ai-empty-hero p {
    max-width: 760px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.68;
}

.ai-compose-modern .ai-compose-tools {
    overflow: visible;
}

.ai-compose-tools .ai-compose-intelligence,
.ai-options-menu {
    position: relative;
    display: inline-flex;
    grid-column: auto;
    gap: 0;
    min-width: 0;
}

.ai-options-toggle {
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1;
}

.ai-options-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    z-index: 20;
    display: grid;
    width: min(340px, calc(100vw - 28px));
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
        rgba(7, 9, 10, 0.94);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ai-options-popover[hidden] {
    display: none;
}

.ai-options-popover .ai-answer-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
}

.ai-options-popover .ai-answer-modes button {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
}

.ai-options-popover .ai-pro-switch {
    justify-self: start;
}

.ai-options-menu.is-open .ai-options-toggle {
    border-color: rgba(100, 243, 233, 0.38);
    background: rgba(100, 243, 233, 0.14);
}

@media (max-height: 820px) and (min-width: 901px) {
    .ai-empty-hero,
    .ai-app[data-ai-theme] .ai-empty-hero {
        margin-top: clamp(42px, 8vh, 72px);
    }
}

@media (max-width: 900px) {
    .ai-compose-modern .ai-compose-tools {
        overflow: visible;
    }
}

@media (max-width: 560px) {
    .ai-options-popover {
        position: fixed;
        right: 12px;
        bottom: calc(126px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: auto;
    }

    .ai-options-popover .ai-answer-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-empty-hero,
    .ai-app[data-ai-theme] .ai-empty-hero {
        margin-top: clamp(66px, 12vh, 104px);
    }
}