html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6f8;
    color: #18212f;
}

a {
    font: inherit;
}

.page-shell {
    position: fixed;
    inset: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    width: 100%;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 22px 12px;
    background: #ffffff;
    border-bottom: 1px solid #d7dde5;
}

.top-bar h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
}

.top-bar p,
.save-status-line {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5c6877;
}

.save-status-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}

.save-indicator-light {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #94a3b8;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

.save-state-neutral .save-indicator-light {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.14), 0 0 8px rgba(148, 163, 184, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

.save-state-pending .save-indicator-light {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18), 0 0 12px rgba(245, 158, 11, 0.62), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    animation: save-light-pulse 1s ease-in-out infinite;
}

.save-state-saved .save-indicator-light {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16), 0 0 12px rgba(34, 197, 94, 0.54), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.save-state-error .save-indicator-light {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16), 0 0 12px rgba(239, 68, 68, 0.56), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

@keyframes save-light-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .58;
    }
}

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.status-row a {
    color: #1457a8;
    text-decoration: none;
}

.status-row .top-action-button {
    min-height: 32px;
}

.status-pill {
    border: 1px solid #9ec4a8;
    background: #e9f7ed;
    color: #225a32;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
}

.status-note {
    color: #5c6877;
    font-size: 12px;
}

.download-icon {
    width: 16px;
    height: 16px;
    background: currentColor;
    display: inline-block;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%203a1%201%200%200%201%201%201v8.59l2.3-2.3a1%201%200%201%201%201.4%201.42l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%201%201%201.4-1.42l2.3%202.3V4a1%201%200%200%201%201-1ZM5%2019a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%203a1%201%200%200%201%201%201v8.59l2.3-2.3a1%201%200%201%201%201.4%201.42l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%201%201%201.4-1.42l2.3%202.3V4a1%201%200%200%201%201-1ZM5%2019a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.editor-host {
    min-height: 0;
    display: flex;
    overflow: hidden;
    padding: 0;
}

.editor-host .dxreRoot {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #ffffff;
}

.ai-launcher-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    display: grid;
    gap: 10px;
    justify-items: end;
}

.ai-launcher-button {
    min-width: 158px;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24);
    transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.ai-launcher-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.28);
}

.ai-launcher-button:active {
    transform: translateY(0);
}

.ai-launcher-button-table {
    background: linear-gradient(135deg, #0f766e 0%, #0284c7 52%, #2563eb 100%);
}

.ai-launcher-button-assistant {
    background: linear-gradient(135deg, #0f766e 0%, #2563eb 48%, #c026d3 100%);
}

.ai-icon-table,
.ai-icon-spark {
    width: 17px;
    height: 17px;
    background: currentColor;
    color: #ffffff;
    display: inline-block;
}

.ai-icon-table {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Zm0%204v4h5V8H4Zm7%200v4h9V8h-9Zm9%206h-9v4h9v-4ZM9%2018v-4H4v4h5Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Zm0%204v4h5V8H4Zm7%200v4h9V8h-9Zm9%206h-9v4h9v-4ZM9%2018v-4H4v4h5Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.ai-icon-spark {
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27m12%202%201.8%205.2L19%209l-5.2%201.8L12%2016l-1.8-5.2L5%209l5.2-1.8L12%202Zm7%2011%201%202.8%203%201.2-3%201.2-1%202.8-1-2.8-3-1.2%203-1.2%201-2.8ZM5%2014l1.2%203.2L9%2018.5l-2.8%201.3L5%2023l-1.2-3.2L1%2018.5l2.8-1.3L5%2014Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27m12%202%201.8%205.2L19%209l-5.2%201.8L12%2016l-1.8-5.2L5%209l5.2-1.8L12%202Zm7%2011%201%202.8%203%201.2-3%201.2-1%202.8-1-2.8-3-1.2%203-1.2%201-2.8ZM5%2014l1.2%203.2L9%2018.5l-2.8%201.3L5%2023l-1.2-3.2L1%2018.5l2.8-1.3L5%2014Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.table-ai-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.empty-state {
    margin: 60px auto;
    width: min(520px, calc(100vw - 32px));
    background: #ffffff;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    padding: 24px;
}

.empty-state h1 {
    margin: 0 0 12px;
    font-size: 20px;
}

@media (max-width: 720px) {
    .top-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-row {
        width: 100%;
    }

    .ai-launcher-stack {
        right: 14px;
        bottom: 14px;
    }
}