:root {
    --sap-blue: #0a6ed1;
    --sap-blue-dark: #0854a0;
    --sap-blue-soft: #eaf3fc;
    --sap-shell: #354a5f;
    --sap-gold: #e9730c;
    --sap-gold-soft: #fff3e8;
    --success: #107e3e;
    --success-soft: #e5f5eb;
    --warning: #e76500;
    --warning-soft: #fff4e5;
    --error: #bb0000;
    --error-soft: #ffebeb;
    --ink: #1d2d3e;
    --muted: #5b738b;
    --line: #d9e2ea;
    --line-strong: #b8c8d6;
    --surface: #ffffff;
    --canvas: #f5f6f7;
    --canvas-blue: #eef4f9;
    --shadow-sm: 0 1px 3px rgba(30, 54, 78, 0.12);
    --shadow-md: 0 8px 28px rgba(30, 54, 78, 0.16);
    --shadow-lg: 0 20px 60px rgba(20, 45, 70, 0.22);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --font: "72", "Segoe UI", Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
}

body {
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

[hidden] {
    display: none !important;
}

.app-shell {
    min-height: 100vh;
}

.shellbar {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    background: var(--sap-shell);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 275px;
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #36a9e1, #0a6ed1);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.brand-copy strong {
    font-size: 15px;
    letter-spacing: 0.01em;
}

.brand-copy small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
}

.shell-project {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-project .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ad3a0;
    box-shadow: 0 0 0 3px rgba(122, 211, 160, 0.18);
    flex: 0 0 auto;
}

.shell-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-button,
.mini-icon-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
}

.icon-button {
    width: 38px;
    height: 38px;
    color: rgba(255, 255, 255, 0.88);
}

.icon-button:hover,
.icon-button:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.upload-screen {
    min-height: calc(100vh - 56px);
    background:
        radial-gradient(circle at 14% 12%, rgba(10, 110, 209, 0.12), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(54, 169, 225, 0.13), transparent 26%),
        linear-gradient(180deg, #f8fbfe 0%, #eef4f9 100%);
    position: relative;
    overflow: hidden;
}

.upload-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(83, 120, 150, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 120, 150, 0.08) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.upload-hero {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 72px 0 64px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid #bfd8ee;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--sap-blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.upload-hero h1 {
    max-width: 890px;
    margin: 24px auto 16px;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #16324a;
}

.upload-hero > p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.upload-card {
    width: min(720px, 100%);
    margin: 38px auto 0;
    padding: 20px;
    border: 1px solid rgba(148, 174, 197, 0.55);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
}

.drop-zone {
    width: 100%;
    min-height: 225px;
    padding: 34px;
    border: 2px dashed #9fc3e2;
    border-radius: 14px;
    background: #f8fbfe;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 160ms ease;
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.dragover {
    border-color: var(--sap-blue);
    background: var(--sap-blue-soft);
    outline: none;
    transform: translateY(-1px);
}

.upload-icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e6f2fc, #d6ebfb);
    color: var(--sap-blue);
    box-shadow: inset 0 0 0 1px rgba(10, 110, 209, 0.12);
}

.upload-icon svg {
    width: 30px;
    height: 30px;
}

.drop-zone strong {
    font-size: 18px;
    color: #1d405e;
}

.drop-zone > span:last-child {
    color: var(--muted);
}

.selected-file {
    margin: 14px 0 0;
    border-radius: 10px;
    background: var(--success-soft);
    color: #155c36;
    padding: 11px 14px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

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

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
    min-height: 36px;
    border-radius: 7px;
    padding: 0 14px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: 130ms ease;
}

.primary-button {
    background: var(--sap-blue);
    border-color: var(--sap-blue);
    color: #fff;
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled) {
    background: var(--sap-blue-dark);
    border-color: var(--sap-blue-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 110, 209, 0.18);
}

.primary-button.large {
    width: 100%;
    margin-top: 14px;
    min-height: 48px;
    font-size: 15px;
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.secondary-button {
    background: #fff;
    color: var(--sap-blue-dark);
    border-color: #a9c7df;
}

.secondary-button:hover,
.secondary-button:focus-visible {
    border-color: var(--sap-blue);
    background: var(--sap-blue-soft);
    outline: none;
}

.ghost-button {
    background: transparent;
    color: var(--sap-blue-dark);
}

.ghost-button:hover,
.ghost-button:focus-visible {
    background: var(--sap-blue-soft);
    outline: none;
}

.danger-button {
    background: #fff;
    color: var(--error);
    border-color: #e7aaaa;
}

.danger-button:hover,
.danger-button:focus-visible {
    background: var(--error-soft);
    outline: none;
}

.form-error {
    margin: 12px 0 0;
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--error-soft);
    color: var(--error);
    text-align: left;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 36px;
    text-align: left;
}

.feature-grid article {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(157, 181, 202, 0.52);
    background: rgba(255, 255, 255, 0.78);
    display: flex;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--sap-blue-soft);
    color: var(--sap-blue);
    font-weight: 800;
    font-size: 12px;
}

.feature-grid strong {
    display: block;
    margin: 2px 0 5px;
    color: #1d405e;
}

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

.workspace {
    height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    overflow: hidden;
}

.sheet-sidebar {
    min-width: 0;
    height: 100%;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(31, 65, 95, 0.05);
    z-index: 3;
    transition: width 180ms ease;
}

.workspace.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
}

.workspace.sidebar-collapsed .sheet-sidebar {
    width: 64px;
}

.workspace.sidebar-collapsed .sidebar-heading > span,
.workspace.sidebar-collapsed .sheet-filter-wrap,
.workspace.sidebar-collapsed .sheet-item-copy,
.workspace.sidebar-collapsed .sheet-toggle,
.workspace.sidebar-collapsed .sidebar-summary {
    display: none;
}

.workspace.sidebar-collapsed .sidebar-heading {
    justify-content: center;
    padding-inline: 0;
}

.workspace.sidebar-collapsed .mini-icon-button svg {
    transform: rotate(180deg);
}

.workspace.sidebar-collapsed .sheet-list {
    padding: 8px;
}

.workspace.sidebar-collapsed .sheet-item {
    min-height: 46px;
    padding: 0;
    justify-content: center;
}

.workspace.sidebar-collapsed .sheet-badge {
    margin: 0;
}

.sidebar-heading {
    min-height: 50px;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    color: #294a67;
}

.mini-icon-button {
    width: 30px;
    height: 30px;
    color: var(--muted);
}

.mini-icon-button:hover,
.mini-icon-button:focus-visible {
    background: var(--canvas-blue);
    color: var(--sap-blue);
    outline: none;
}

.sheet-filter-wrap,
.search-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--muted);
}

.sheet-filter-wrap {
    margin: 12px;
    padding: 0 10px;
    min-height: 36px;
}

.sheet-filter-wrap svg,
.search-control svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.sheet-filter-wrap input,
.search-control input {
    border: 0;
    outline: 0;
    min-width: 0;
    width: 100%;
    background: transparent;
    color: var(--ink);
}

.sheet-filter-wrap input {
    padding: 8px 7px;
}

.sheet-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
    scrollbar-width: thin;
}

.sheet-item {
    width: 100%;
    min-height: 54px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
    position: relative;
    color: var(--ink);
}

.sheet-item:hover {
    background: #f3f7fa;
}

.sheet-item.active {
    background: var(--sap-blue-soft);
    color: var(--sap-blue-dark);
}

.sheet-item.active::before {
    content: "";
    position: absolute;
    left: -8px;
    width: 3px;
    height: 30px;
    border-radius: 0 3px 3px 0;
    background: var(--sap-blue);
}

.sheet-item.disabled {
    color: #73879a;
}

.sheet-badge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #e8eef3;
    color: #4b6780;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.sheet-item.mandatory .sheet-badge {
    background: var(--sap-gold-soft);
    color: var(--sap-gold);
}

.sheet-item.active .sheet-badge {
    background: #d7eafb;
    color: var(--sap-blue);
}

.sheet-item-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sheet-item-copy strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.sheet-item-copy small {
    color: var(--muted);
    font-size: 11px;
}

.sheet-toggle {
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: #b9c6d0;
    position: relative;
    flex: 0 0 auto;
    transition: 140ms ease;
}

.sheet-toggle::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: 140ms ease;
}

.sheet-toggle.on {
    background: var(--sap-blue);
}

.sheet-toggle.on::after {
    transform: translateX(12px);
}

.sheet-toggle.locked {
    background: var(--sap-gold);
}

.sidebar-summary {
    min-height: 70px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f8fafb;
}

.sidebar-summary div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-summary div + div {
    border-left: 1px solid var(--line);
}

.sidebar-summary span {
    font-weight: 800;
    color: #274a68;
    font-size: 17px;
}

.sidebar-summary small {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.content-area {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
}

.object-header {
    min-height: 92px;
    padding: 15px 22px 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.object-title-wrap {
    min-width: 0;
}

.breadcrumbs {
    color: var(--sap-blue);
    font-size: 12px;
    margin-bottom: 7px;
}

.object-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.object-title-row h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #213d55;
}

.mandatory-pill,
.optional-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.mandatory-pill {
    color: #9b4300;
    background: var(--sap-gold-soft);
}

.optional-pill {
    color: var(--sap-blue-dark);
    background: var(--sap-blue-soft);
}

.object-subtitle {
    margin-top: 6px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    font-size: 12px;
}

.object-subtitle code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #eef2f5;
    color: #3b5870;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 11px;
}

.header-metrics {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.header-metric {
    min-width: 96px;
    padding: 8px 12px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-metric strong {
    font-size: 19px;
    color: #294a67;
}

.header-metric small {
    color: var(--muted);
    font-size: 11px;
}

.commandbar {
    min-height: 54px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.commandbar-left,
.commandbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.commandbar-right {
    margin-left: auto;
}

.segmented-control {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.segment {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-right: 1px solid var(--line-strong);
    background: #fff;
    cursor: pointer;
    color: #36566f;
    font-weight: 700;
}

.segment:last-child {
    border-right: 0;
}

.segment.active {
    background: var(--sap-blue);
    color: #fff;
}

.search-control {
    min-width: 210px;
    min-height: 36px;
    padding: 0 9px;
}

.search-control input {
    padding: 8px 7px;
}

.search-control:focus-within,
.sheet-filter-wrap:focus-within {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 1px var(--sap-blue);
}

.select-control {
    min-height: 36px;
    padding: 0 31px 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.save-status {
    min-width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.save-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
}

.save-status.saving > span {
    background: var(--warning);
    animation: pulse 1s infinite;
}

.save-status.error {
    color: var(--error);
}

.save-status.error > span {
    background: var(--error);
}

@keyframes pulse {
    50% { opacity: 0.35; }
}

.disabled-sheet-notice {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border: 1px solid #b8d3e9;
    border-radius: 9px;
    background: var(--sap-blue-soft);
    color: #244f72;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.editor-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    scrollbar-width: thin;
}

.record-toolbar {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 4;
}

.record-navigation,
.record-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.record-counter {
    min-width: 115px;
    padding: 0 8px;
    text-align: center;
    color: #37566f;
    font-weight: 700;
}

.record-nav-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--sap-blue-dark);
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.record-nav-button:disabled {
    color: #9aabb9;
    cursor: default;
    background: #f5f7f8;
}

.record-nav-button:not(:disabled):hover {
    background: var(--sap-blue-soft);
    border-color: var(--sap-blue);
}

.empty-record-state {
    min-height: 420px;
    border: 1px dashed #b6c9d8;
    border-radius: 14px;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px;
}

.empty-record-state .empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--sap-blue-soft);
    color: var(--sap-blue);
}

.empty-record-state .empty-icon svg {
    width: 34px;
    height: 34px;
}

.empty-record-state h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #284964;
}

.empty-record-state p {
    max-width: 440px;
    margin: 0 auto 18px;
    color: var(--muted);
    line-height: 1.55;
}

.group-card {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.group-card.hidden-by-filter {
    display: none;
}

.group-header {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    width: 100%;
    background: #f8fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
}

.group-header:hover {
    background: #f0f5f8;
}

.group-header-copy {
    display: flex;
    align-items: center;
    gap: 9px;
}

.group-chevron {
    color: var(--muted);
    transition: transform 150ms ease;
}

.group-card.collapsed .group-chevron {
    transform: rotate(-90deg);
}

.group-header strong {
    color: #294a67;
}

.group-header small {
    color: var(--muted);
}

.group-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
}

.group-status .required-count {
    color: #9b4300;
    background: var(--sap-gold-soft);
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 700;
}

.group-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 16px;
}

.group-card.collapsed .group-fields {
    display: none;
}

.field-control {
    min-width: 0;
}

.field-control.hidden-by-filter {
    display: none;
}

.field-label-row {
    min-height: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 5px;
}

.field-label {
    min-width: 0;
    color: #27445d;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.35;
}

.field-label .required-star {
    color: var(--error);
    margin-left: 2px;
}

.field-tech {
    color: #6b8194;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 10px;
    font-weight: 500;
    margin-left: 5px;
}

.field-info-button {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--sap-blue);
    background: transparent;
    cursor: pointer;
}

.field-info-button:hover,
.field-info-button:focus-visible {
    background: var(--sap-blue-soft);
    outline: none;
}

.field-info-button svg {
    width: 16px;
    height: 16px;
}

.field-input,
.field-textarea {
    width: 100%;
    border: 1px solid #9fb3c3;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    transition: 120ms ease;
}

.field-input {
    min-height: 38px;
    padding: 7px 9px;
}

.field-textarea {
    min-height: 82px;
    padding: 8px 9px;
    resize: vertical;
}

.field-input:hover,
.field-textarea:hover {
    border-color: #6f8da5;
}

.field-input:focus,
.field-textarea:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 1px var(--sap-blue);
    outline: none;
}

.field-control.required .field-input,
.field-control.required .field-textarea {
    border-left: 3px solid var(--sap-gold);
}

.field-control.invalid .field-input,
.field-control.invalid .field-textarea {
    border-color: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

.field-error {
    margin-top: 4px;
    color: var(--error);
    font-size: 11px;
    line-height: 1.35;
}

.field-hint {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.indicator-control {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid #9fb3c3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
}

.indicator-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.indicator-switch {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #aebdc8;
    position: relative;
    transition: 140ms ease;
}

.indicator-switch::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: 140ms ease;
}

.indicator-control input:checked + .indicator-switch {
    background: var(--sap-blue);
}

.indicator-control input:checked + .indicator-switch::after {
    transform: translateX(14px);
}

.indicator-text {
    color: #435f76;
    font-size: 12px;
    font-weight: 700;
}

.grid-shell {
    min-width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: auto;
}

.data-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.data-grid th,
.data-grid td {
    min-width: 180px;
    max-width: 260px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0;
    background: #fff;
}

.data-grid th {
    height: 58px;
    padding: 8px 9px;
    background: #eff4f9;
    color: #284b68;
    text-align: left;
    font-size: 11px;
    vertical-align: top;
    position: sticky;
    top: 0;
    z-index: 4;
}

.data-grid th.required {
    background: var(--sap-gold-soft);
}

.data-grid th .grid-tech {
    display: block;
    margin-top: 4px;
    color: #6a8195;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 9px;
    font-weight: 500;
}

.data-grid .row-number-cell,
.data-grid .row-number-header {
    min-width: 54px;
    width: 54px;
    max-width: 54px;
    position: sticky;
    left: 0;
    z-index: 5;
    background: #e9eff4;
    text-align: center;
}

.data-grid .row-number-cell {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.data-grid .row-number-header {
    z-index: 6;
}

.data-grid td.invalid {
    background: var(--error-soft);
}

.grid-input {
    width: 100%;
    min-height: 38px;
    border: 0;
    padding: 7px 8px;
    background: transparent;
    color: var(--ink);
    outline: none;
}

.grid-input:focus {
    box-shadow: inset 0 0 0 2px var(--sap-blue);
    background: #fff;
}

.grid-add-row {
    margin-top: 10px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 38, 55, 0.5);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: fade-in 120ms ease;
}

@keyframes fade-in {
    from { opacity: 0; }
}

.modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in 150ms ease;
}

.modal.wide {
    width: min(1050px, 100%);
}

@keyframes modal-in {
    from { transform: translateY(10px) scale(0.99); opacity: 0; }
}

.modal-header {
    min-height: 62px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #25445e;
}

.modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.modal-close:hover {
    background: #eef3f6;
    color: var(--ink);
}

.modal-body {
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.modal-footer {
    min-height: 62px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: #f8fafb;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.info-panel {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
}

.info-meta {
    border-radius: 10px;
    background: #f1f5f8;
    padding: 14px;
}

.info-meta dl {
    margin: 0;
}

.info-meta dt {
    margin-top: 11px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-meta dt:first-child {
    margin-top: 0;
}

.info-meta dd {
    margin: 3px 0 0;
    color: #284964;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.info-copy {
    color: #3f5870;
    line-height: 1.65;
    white-space: pre-wrap;
}

.paste-textarea {
    width: 100%;
    min-height: 190px;
    border: 1px solid #99afc0;
    border-radius: 8px;
    padding: 10px;
    resize: vertical;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;
    line-height: 1.45;
    outline: none;
}

.paste-textarea:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 1px var(--sap-blue);
}

.paste-options {
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #405c73;
}

.checkbox-label,
.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.paste-preview {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: auto;
    max-height: 240px;
}

.paste-preview table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 11px;
}

.paste-preview th,
.paste-preview td {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 7px 8px;
    min-width: 120px;
    text-align: left;
}

.paste-preview th {
    position: sticky;
    top: 0;
    background: #eff4f9;
    color: #36566f;
}

.mapping-summary {
    margin: 10px 0;
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--sap-blue-soft);
    color: #2b587c;
    font-size: 12px;
}

.column-search {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    padding: 7px 9px;
    outline: none;
}

.column-search:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 1px var(--sap-blue);
}

.column-actions {
    margin: 10px 0;
    display: flex;
    gap: 8px;
}

.column-list {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.column-item {
    min-height: 46px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.column-item:last-child {
    border-bottom: 0;
}

.column-item:hover {
    background: #f7fafc;
}

.column-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.column-item-copy strong {
    font-size: 12px;
    color: #2b4c67;
}

.column-item-copy small {
    color: var(--muted);
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 10px;
}

.validation-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.validation-stat {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #f8fafb;
}

.validation-stat strong {
    display: block;
    font-size: 22px;
    color: #294a67;
}

.validation-stat small {
    color: var(--muted);
}

.validation-stat.error strong {
    color: var(--error);
}

.validation-stat.warning strong {
    color: var(--warning);
}

.validation-list {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.validation-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 90px 150px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 12px;
}

.validation-item:last-child {
    border-bottom: 0;
}

.validation-item .severity {
    font-weight: 800;
}

.validation-item.error .severity {
    color: var(--error);
}

.validation-item.warning .severity {
    color: var(--warning);
}

.validation-success {
    padding: 24px;
    border-radius: 10px;
    text-align: center;
    background: var(--success-soft);
    color: #155c36;
}

.export-checklist {
    display: grid;
    gap: 10px;
}

.export-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.export-check .check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--success-soft);
    color: var(--success);
    flex: 0 0 auto;
}

.export-check.warning .check-icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.export-check strong {
    display: block;
    color: #284964;
    margin-bottom: 3px;
}

.export-check p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.toast-root {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.toast {
    width: min(390px, calc(100vw - 36px));
    min-height: 48px;
    padding: 11px 14px;
    border-radius: 9px;
    background: #263f55;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 9px;
    pointer-events: auto;
    animation: toast-in 180ms ease;
}

.toast.success {
    background: #176b3a;
}

.toast.error {
    background: #a51616;
}

@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
}

.loading-overlay {
    position: fixed;
    inset: 56px 0 0;
    z-index: 900;
    background: rgba(245, 246, 247, 0.78);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
}

.loading-card {
    padding: 18px 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2c4b64;
    font-weight: 700;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #d6e5f1;
    border-top-color: var(--sap-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

@media (max-width: 1220px) {
    .commandbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .commandbar-right {
        width: 100%;
        justify-content: flex-end;
    }

    .object-header {
        min-height: 104px;
    }

    .group-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .workspace {
        grid-template-columns: 245px minmax(0, 1fr);
    }

    .object-header {
        grid-template-columns: 1fr;
    }

    .header-metrics {
        display: none;
    }

    .search-control {
        min-width: 150px;
    }

    .group-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .brand-copy small,
    .shell-project {
        display: none;
    }

    .brand {
        min-width: 0;
    }

    .upload-hero {
        width: min(100% - 24px, 1120px);
        padding-top: 42px;
    }

    .upload-card {
        padding: 12px;
    }

    .drop-zone {
        min-height: 190px;
        padding: 24px 14px;
    }

    .workspace,
    .workspace.sidebar-collapsed {
        display: block;
        height: auto;
        min-height: calc(100vh - 56px);
    }

    .sheet-sidebar,
    .workspace.sidebar-collapsed .sheet-sidebar {
        width: 100%;
        height: auto;
        max-height: 260px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .workspace.sidebar-collapsed .sidebar-heading > span,
    .workspace.sidebar-collapsed .sheet-filter-wrap,
    .workspace.sidebar-collapsed .sheet-item-copy,
    .workspace.sidebar-collapsed .sheet-toggle,
    .workspace.sidebar-collapsed .sidebar-summary {
        display: initial;
    }

    .workspace.sidebar-collapsed .sheet-filter-wrap,
    .workspace.sidebar-collapsed .sidebar-summary {
        display: flex;
    }

    .workspace.sidebar-collapsed .sheet-list {
        padding: 0 8px 12px;
    }

    .workspace.sidebar-collapsed .sheet-item {
        min-height: 54px;
        padding: 7px 8px;
        justify-content: flex-start;
    }

    .workspace.sidebar-collapsed .sheet-badge {
        margin: initial;
    }

    .sheet-list {
        max-height: 160px;
    }

    .content-area {
        min-height: 700px;
    }

    .commandbar-left,
    .commandbar-right {
        width: 100%;
        flex-wrap: wrap;
    }

    .commandbar-right {
        justify-content: flex-start;
    }

    .save-status {
        display: none;
    }

    .search-control {
        flex: 1;
    }

    .object-header {
        padding-inline: 14px;
    }

    .editor-area {
        padding: 10px;
    }

    .record-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .record-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .info-panel {
        grid-template-columns: 1fr;
    }

    .validation-summary {
        grid-template-columns: 1fr;
    }

    .validation-item {
        grid-template-columns: 80px 1fr;
    }

    .validation-item > :last-child {
        grid-column: 1 / -1;
    }
}

/* v2.0 usability fixes and assisted-import workflow */
html,
body {
    height: 100%;
}

.workspace {
    height: calc(100dvh - 56px);
    min-height: 0;
}

.content-area {
    min-height: 0;
    overflow: hidden;
}

.object-header,
.commandbar,
.disabled-sheet-notice {
    flex: 0 0 auto;
}

.editor-area {
    min-height: 0;
    max-height: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.commandbar {
    overflow-x: auto;
    scrollbar-width: thin;
}

.secondary-button.large.secondary-large {
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
}

.ai-button svg {
    color: #7a3db8;
}

.field-explanation {
    min-height: 34px;
    margin: -1px 0 7px;
    color: #526d83;
    font-size: 11px;
    line-height: 1.42;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grid-header-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.grid-info-button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    padding: 2px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--sap-blue);
    cursor: pointer;
    flex: 0 0 auto;
}

.grid-info-button:hover {
    background: rgba(10, 110, 209, 0.12);
}

.grid-info-button svg {
    width: 14px;
    height: 14px;
}

.grid-explanation {
    display: block;
    margin-top: 4px;
    color: #5d7488;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 400;
    max-height: 24px;
    overflow: hidden;
}

.warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border: 1px solid #efbd7c;
    border-radius: 9px;
    background: var(--warning-soft);
    color: #71400d;
}

.warning-banner > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--warning);
}

.warning-banner strong,
.warning-banner span {
    display: block;
}

.warning-banner span {
    margin-top: 3px;
    line-height: 1.48;
    font-size: 12px;
}

.warning-banner.compact {
    margin: 12px 0 0;
    padding: 9px 11px;
    font-size: 12px;
}

.inline-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
}

.sample-search {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: #36566f;
    font-size: 12px;
    font-weight: 700;
}

.sample-search input,
.text-control {
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    outline: none;
}

.sample-search input:focus,
.text-control:focus {
    border-color: var(--sap-blue);
    box-shadow: 0 0 0 1px var(--sap-blue);
}

.sample-list {
    max-height: 540px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.sample-item {
    min-height: 76px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.sample-item:last-child {
    border-bottom: 0;
}

.sample-item:hover {
    background: #f8fbfd;
}

.sample-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--sap-blue-soft);
    color: var(--sap-blue);
}

.sample-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sample-copy strong {
    color: #284964;
}

.sample-copy span,
.sample-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sample-copy span {
    color: #506b81;
    font-size: 12px;
}

.sample-copy small {
    color: var(--muted);
    font-size: 10px;
}

.empty-sample-state {
    padding: 38px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    text-align: center;
    color: var(--muted);
}

.empty-sample-state.compact {
    border: 0;
}

.empty-sample-state h3 {
    margin: 0 0 8px;
    color: #294a67;
}

.empty-sample-state code {
    padding: 2px 5px;
    border-radius: 4px;
    background: #eef2f5;
}

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

.ai-setup-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafb;
}

.ai-setup-card h3 {
    margin: 0 0 12px;
    color: #294a67;
    font-size: 14px;
}

.ai-setup-card > label:not(.file-picker) {
    display: grid;
    gap: 5px;
    margin-top: 9px;
    color: #405c73;
    font-size: 11px;
    font-weight: 700;
}

.ai-setup-card .select-control {
    width: 100%;
}

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

.file-picker strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #36566f;
    font-size: 11px;
}

.ai-setup-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.ai-consent {
    align-items: flex-start !important;
    display: flex !important;
    font-weight: 500 !important;
    line-height: 1.4;
}

.ai-preview-section,
.ai-mapping-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.section-heading {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.section-heading h3,
.section-heading p {
    margin: 0;
}

.section-heading h3 {
    color: #294a67;
    font-size: 15px;
}

.section-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.status-pill {
    color: #5c2b92;
    background: #f2e9fb;
}

.source-preview-table {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.source-preview-table table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.source-preview-table th,
.source-preview-table td {
    min-width: 110px;
    max-width: 240px;
    padding: 6px 8px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.source-preview-table th {
    min-width: 40px;
    width: 40px;
    background: #edf2f6;
    color: var(--muted);
    position: sticky;
    left: 0;
    z-index: 2;
}

.source-preview-table tr.selected-header-row td,
.source-preview-table tr.selected-header-row th {
    background: var(--sap-gold-soft);
    color: #75410c;
    font-weight: 800;
}

.ai-mapping-list {
    max-height: 500px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.ai-mapping-row {
    min-height: 76px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 32px minmax(150px, .8fr) 28px minmax(260px, 1.2fr) minmax(210px, 1fr);
    align-items: center;
    gap: 9px;
    background: #fff;
}

.ai-mapping-row:last-child {
    border-bottom: 0;
}

.ai-mapping-row.disabled {
    background: #f7f8f9;
    opacity: .68;
}

.mapping-select {
    display: grid;
    place-items: center;
}

.mapping-select input {
    width: 17px;
    height: 17px;
}

.mapping-source,
.mapping-confidence {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mapping-source strong {
    color: #294a67;
    overflow-wrap: anywhere;
}

.mapping-source small,
.mapping-confidence span,
.mapping-confidence small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.mapping-arrow {
    color: #7890a4;
}

.mapping-target .select-control {
    width: 100%;
}

.mapping-confidence strong {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
}

.mapping-confidence.high strong {
    color: var(--success);
    background: var(--success-soft);
}

.mapping-confidence.medium strong {
    color: #8a5100;
    background: var(--warning-soft);
}

.mapping-confidence.low strong {
    color: var(--muted);
    background: #eef2f5;
}

.mapping-confidence small {
    color: #75410c;
}

.ai-import-options {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.ai-import-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #405c73;
    font-size: 11px;
    font-weight: 700;
}

.key-change-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.key-change-summary > div {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #f1f5f8;
}

.key-change-summary small,
.key-change-summary code {
    display: block;
}

.key-change-summary small {
    color: var(--muted);
    margin-bottom: 4px;
}

.key-change-summary code {
    overflow-wrap: anywhere;
    color: #284964;
    font-weight: 800;
}

.key-change-summary > span {
    display: grid;
    place-items: center;
    color: var(--sap-blue);
}

.key-target-list {
    max-height: 260px;
    overflow: auto;
    margin: 12px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    list-style: none;
}

.key-target-list li {
    padding: 9px 11px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.key-target-list li:last-child {
    border-bottom: 0;
}

.key-target-list span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1050px) {
    .ai-setup-grid {
        grid-template-columns: 1fr;
    }

    .ai-mapping-row {
        grid-template-columns: 32px 1fr 24px 1.4fr;
    }

    .mapping-confidence {
        grid-column: 2 / -1;
    }
}

@media (max-width: 700px) {
    body {
        overflow-y: auto;
    }

    .workspace,
    .workspace.sidebar-collapsed {
        height: auto;
    }

    .content-area {
        overflow: visible;
    }

    .editor-area {
        max-height: none;
        overflow: visible;
    }

    .sample-item {
        grid-template-columns: 40px 1fr;
    }

    .sample-item .secondary-button {
        grid-column: 1 / -1;
    }

    .ai-mapping-row {
        grid-template-columns: 28px 1fr;
    }

    .mapping-arrow {
        display: none;
    }

    .mapping-target,
    .mapping-confidence {
        grid-column: 2;
    }
}

/* v3.0 large-sheet performance and multi-tab AI workflow */
.grid-pager {
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.grid-pager-summary,
.grid-pager-actions,
.grid-pager-actions label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.grid-pager-summary strong {
    color: #294a67;
}

.grid-pager-summary span,
.grid-pager-actions,
.grid-pager-actions label {
    color: var(--muted);
    font-size: 11px;
}

.compact-select {
    min-width: 72px;
    height: 30px;
}

.setup-note {
    padding: 8px 9px;
    border-radius: 7px;
    background: var(--sap-blue-soft);
    color: #315b7b !important;
}

.ai-open-fields {
    margin: 0 0 12px;
}

.ai-open-summary {
    padding: 11px 13px;
    border: 1px solid #b8d3e9;
    border-radius: 9px;
    background: var(--sap-blue-soft);
    color: #244f72;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ai-open-summary.complete {
    border-color: #a9d2b4;
    background: var(--success-soft);
    color: #1f6a38;
}

.ai-open-summary > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: currentColor;
}

.ai-open-summary strong,
.ai-open-summary span {
    display: block;
}

.ai-open-summary span {
    margin-top: 2px;
    font-size: 11px;
}

.open-field-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.open-field-chips span {
    margin: 0;
    padding: 3px 7px;
    border: 1px solid rgba(66, 124, 172, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: #315b7b;
    font-size: 10px;
}

.ai-sheet-group {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.ai-sheet-group.open-group {
    border-color: #d9b66b;
}

.ai-sheet-group-header {
    padding: 10px 12px;
    background: #f3f7fa;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ai-sheet-group.open-group .ai-sheet-group-header {
    background: var(--sap-gold-soft);
}

.ai-sheet-group-header h4,
.ai-sheet-group-header p {
    margin: 0;
}

.ai-sheet-group-header h4 {
    color: #294a67;
    font-size: 13px;
}

.ai-sheet-group-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.ai-sheet-group .ai-mapping-list {
    max-height: 420px;
    border: 0;
    border-radius: 0;
}

.ai-mapping-row {
    grid-template-columns: 32px minmax(145px, .75fr) 28px minmax(290px, 1.3fr) minmax(200px, 1fr);
}

.mapping-destination {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(170px, 1.2fr);
    gap: 7px;
}

.mapping-destination .select-control {
    width: 100%;
    min-width: 0;
}

.ai-mapping-row.imported {
    background: var(--success-soft);
    opacity: .82;
}

.ai-mapping-row.imported .mapping-source small {
    color: var(--success);
    font-weight: 700;
}

.ai-import-result {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #a9d2b4;
    border-radius: 8px;
    background: var(--success-soft);
    color: #245f36;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 1050px) {
    .mapping-destination {
        grid-template-columns: 1fr;
    }

    .grid-pager {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .grid-pager-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .mapping-destination {
        grid-column: 2;
    }
}

/* Studio 5: fast column fill and actionable validation */
.field-label-actions,
.grid-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.field-bulk-button,
.grid-bulk-button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    padding: 4px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--sap-blue);
    cursor: pointer;
}

.grid-bulk-button {
    width: 20px;
    height: 20px;
    padding: 2px;
}

.field-bulk-button:hover,
.field-bulk-button:focus-visible,
.grid-bulk-button:hover,
.grid-bulk-button:focus-visible {
    background: var(--sap-blue-soft);
    outline: none;
}

.field-bulk-button svg,
.grid-bulk-button svg {
    width: 15px;
    height: 15px;
}

.bulk-field-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.bulk-field-summary > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafb;
}

.bulk-field-summary small,
.bulk-field-summary strong,
.bulk-field-summary code {
    display: block;
    min-width: 0;
}

.bulk-field-summary small {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
}

.bulk-field-summary strong,
.bulk-field-summary code {
    overflow: hidden;
    color: #294a67;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-field-meaning {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--sap-blue);
    background: #f3f8fc;
    color: #425f76;
    font-size: 12px;
    line-height: 1.5;
}

.bulk-mode-banner,
.validation-guidance {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #a9c9e4;
    border-radius: 8px;
    background: var(--sap-blue-soft);
    color: #285575;
    font-size: 11px;
}

.bulk-mode-banner span,
.validation-guidance span {
    color: #577189;
}

.stacked-label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: #36566f;
    font-size: 12px;
    font-weight: 700;
}

.stacked-label small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.validation-list {
    overflow: visible;
}

.validation-item {
    display: grid;
    grid-template-columns: 155px minmax(240px, 1fr);
    gap: 10px 14px;
    padding: 12px;
}

.validation-item-meta,
.validation-item-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 4px;
}

.validation-item-meta > span:not(.severity),
.validation-item-copy small {
    color: var(--muted);
    font-size: 10px;
}

.validation-item-copy strong {
    color: #294a67;
    font-size: 12px;
    line-height: 1.4;
}

.validation-item-copy code {
    font-size: 10px;
}

.validation-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}

.validation-action-button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 10px;
}

@media (max-width: 760px) {
    .bulk-field-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bulk-mode-banner,
    .validation-guidance {
        flex-direction: column;
    }

    .validation-item {
        grid-template-columns: 1fr;
    }

    .validation-actions {
        grid-column: 1;
    }
}

/* Version 6: bulk data tools and spreadsheet-style range selection */
.grid-selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .75rem;
    padding: .75rem 1rem;
    border: 1px solid #8fb8dc;
    border-radius: .625rem;
    background: #eef7ff;
    box-shadow: 0 1px 2px rgba(18, 51, 77, .08);
}

.grid-selection-copy {
    display: flex;
    flex-direction: column;
    min-width: 12rem;
}

.grid-selection-copy strong { color: #12334d; }
.grid-selection-copy span { color: #516b7d; font-size: .78rem; margin-top: .15rem; }
.grid-selection-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; }

.data-grid td.grid-selected,
.data-grid th.grid-selected {
    background: #d9efff !important;
    box-shadow: inset 0 0 0 2px #0a6ed1;
}

.data-grid td.grid-selected .grid-input { background: #f4faff; }
.data-grid tr.grid-row-in-selection .row-number-cell { background: #d9efff; }
.grid-column-select,
.grid-corner-select,
.grid-row-select,
.grid-row-delete {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.grid-column-select {
    padding: 0;
    text-align: left;
    font-weight: 700;
    min-width: 0;
}

.grid-corner-select { width: 100%; height: 100%; font-weight: 700; }
.row-number-cell { display: flex; align-items: center; justify-content: space-between; gap: .15rem; }
.grid-row-select { flex: 1; padding: .4rem .25rem; font-weight: 700; color: #365b75; }
.grid-row-delete { width: 1.65rem; height: 1.65rem; padding: .28rem; border-radius: .25rem; opacity: .15; }
.grid-row-delete svg { width: 100%; height: 100%; fill: currentColor; }
.row-number-cell:hover .grid-row-delete,
.grid-row-delete:focus { opacity: .85; color: #aa0808; background: #fff0f0; }

.data-tools-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 1rem;
}

.data-tool-card {
    border: 1px solid #d5dadd;
    border-radius: .75rem;
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.data-tool-card-header { display: flex; align-items: flex-start; gap: .75rem; }
.data-tool-card-header > svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; fill: #0a6ed1; margin-top: .15rem; }
.data-tool-card-header h3 { margin: 0; color: #1d2d3e; font-size: 1rem; }
.data-tool-card-header p { margin: .2rem 0 0; color: #5b7385; font-size: .82rem; line-height: 1.45; }
.data-tool-divider { height: 1px; background: #e5e9eb; margin: .15rem 0; }
.range-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.option-row { display: flex; flex-wrap: wrap; gap: 1rem; padding: .25rem 0; color: #334a5e; font-size: .84rem; }
.option-row label { display: flex; align-items: center; gap: .4rem; }
.full-width { width: 100%; justify-content: center; }
.danger-outline { color: #aa0808; border-color: #e7a7a7; background: #fff; }
.danger-outline:hover { background: #fff1f1; border-color: #c94b4b; }
.find-replace-preview { padding: .75rem; border-radius: .5rem; background: #f5f6f7; color: #415b70; font-size: .84rem; }
.find-replace-preview strong { color: #0a6ed1; }
.clipboard-help-card { margin-top: 1rem; background: #f7fbff; }
.required-key-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .45rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: #fff3cd;
    color: #704d00;
    font-size: .65rem;
    font-weight: 700;
    vertical-align: middle;
}

@media (max-width: 980px) {
    .data-tools-grid { grid-template-columns: 1fr; }
    .grid-selection-toolbar { align-items: flex-start; flex-direction: column; }
    .grid-selection-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
    .range-inputs { grid-template-columns: 1fr; }
}
.row-number-cell { display: table-cell; white-space: nowrap; }
.grid-row-select { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; }
.grid-row-delete { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.empty-state-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

/* Aiden design system — Version 6.0.1 */
:root {
    --aiden-blue: #3a5178;
    --aiden-blue-dark: #293b5b;
    --aiden-blue-deep: #1f2d45;
    --aiden-blue-soft: #edf1f7;
    --aiden-blue-softer: #f6f8fb;
    --aiden-green: #bed52e;
    --aiden-green-dark: #a8bf1c;
    --aiden-green-soft: #f3f8d8;
    --aiden-white: #ffffff;
    --sap-blue: var(--aiden-blue);
    --sap-blue-dark: var(--aiden-blue-dark);
    --sap-blue-soft: var(--aiden-blue-soft);
    --sap-shell: var(--aiden-blue);
    --ink: #24334b;
    --muted: #66758a;
    --line: #dce2eb;
    --line-strong: #bdc8d7;
    --surface: #ffffff;
    --canvas: #f3f5f8;
    --canvas-blue: var(--aiden-blue-soft);
    --shadow-sm: 0 1px 3px rgba(31, 45, 69, 0.10);
    --shadow-md: 0 10px 30px rgba(31, 45, 69, 0.14);
    --shadow-lg: 0 28px 70px rgba(20, 31, 49, 0.28);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    --shell-height: 68px;
}

html,
body {
    background: var(--canvas);
    color: var(--ink);
}

::selection {
    background: rgba(190, 213, 46, 0.34);
    color: var(--aiden-blue-deep);
}

:focus-visible {
    outline-color: var(--aiden-green);
}

.shellbar {
    height: var(--shell-height);
    padding: 0 24px;
    background: linear-gradient(115deg, var(--aiden-blue-deep), var(--aiden-blue) 72%);
    border-bottom: 3px solid var(--aiden-green);
    box-shadow: 0 8px 30px rgba(31, 45, 69, 0.23);
}

.brand {
    min-width: 310px;
    gap: 15px;
}

.brand-logo {
    display: block;
    width: 112px;
    max-height: 40px;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 auto;
}

.brand-copy {
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.brand-copy strong {
    font-size: 15px;
    letter-spacing: -0.01em;
}

.brand-copy small {
    color: rgba(255, 255, 255, 0.68);
}

.shell-project .status-dot {
    background: var(--aiden-green);
    box-shadow: 0 0 0 4px rgba(190, 213, 46, 0.18);
}

.icon-button {
    border-radius: 10px;
}

.icon-button:hover,
.icon-button:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(190, 213, 46, 0.35);
}

.upload-screen {
    min-height: calc(100vh - var(--shell-height));
    background:
        radial-gradient(circle at 12% 15%, rgba(190, 213, 46, 0.22), transparent 26%),
        radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.10), transparent 25%),
        linear-gradient(145deg, rgba(31, 45, 69, 0.98), rgba(58, 81, 120, 0.94));
}

.upload-screen::before {
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.upload-hero {
    padding: 68px 0 62px;
}

.eyebrow {
    padding: 8px 14px;
    border-color: rgba(190, 213, 46, 0.48);
    background: rgba(190, 213, 46, 0.11);
    color: var(--aiden-green);
    backdrop-filter: blur(10px);
}

.upload-hero h1 {
    color: var(--aiden-white);
    font-size: clamp(38px, 5vw, 60px);
    letter-spacing: -0.045em;
}

.upload-hero h1 span {
    color: var(--aiden-green);
}

.upload-hero > p {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 300;
}

.upload-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.drop-zone {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 16px;
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.dragover {
    border-color: var(--aiden-green);
    background: var(--aiden-green-soft);
    box-shadow: 0 0 0 4px rgba(190, 213, 46, 0.15);
}

.upload-icon {
    background: var(--aiden-blue-soft);
    color: var(--aiden-blue);
    box-shadow: inset 0 0 0 1px rgba(58, 81, 120, 0.12);
}

.drop-zone strong,
.feature-grid strong {
    color: var(--aiden-blue-deep);
}

.primary-button {
    background: var(--aiden-green);
    border-color: var(--aiden-green);
    color: var(--aiden-blue-deep);
    box-shadow: 0 5px 14px rgba(96, 114, 10, 0.14);
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled) {
    background: var(--aiden-green-dark);
    border-color: var(--aiden-green-dark);
    color: var(--aiden-blue-deep);
    box-shadow: 0 0 0 4px rgba(190, 213, 46, 0.23);
}

.secondary-button {
    color: var(--aiden-blue);
    border-color: rgba(58, 81, 120, 0.32);
}

.secondary-button:hover,
.secondary-button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
    border-color: var(--aiden-blue);
    background: var(--aiden-blue-soft);
    box-shadow: 0 0 0 3px rgba(58, 81, 120, 0.10);
}

.upload-card .secondary-button {
    background: rgba(255, 255, 255, 0.92);
}

.feature-grid article {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    backdrop-filter: blur(12px);
    transition: transform 180ms ease, background 180ms ease;
}

.feature-grid article:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

.feature-icon {
    background: var(--aiden-green);
    color: var(--aiden-blue-deep);
}

.feature-grid strong {
    color: #fff;
}

.feature-grid p {
    color: rgba(255, 255, 255, 0.68);
}

/* Workspace structure and template-sheet scrolling fix */
.workspace {
    height: calc(100dvh - var(--shell-height));
    min-height: 0;
    grid-template-columns: 300px minmax(0, 1fr);
    background: var(--canvas);
}

.sheet-sidebar {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #f9fafc;
    border-right-color: var(--line);
    box-shadow: 5px 0 20px rgba(31, 45, 69, 0.05);
}

.sidebar-heading,
.sheet-filter-wrap,
.sidebar-summary {
    flex: 0 0 auto;
}

.sidebar-heading {
    min-height: 56px;
    color: var(--aiden-blue);
    background: #fff;
    border-bottom: 3px solid var(--aiden-green);
}

.sheet-filter-wrap {
    border-radius: 10px;
}

.sheet-filter-wrap:focus-within,
.search-control:focus-within {
    border-color: var(--aiden-blue);
    box-shadow: 0 0 0 3px rgba(58, 81, 120, 0.12);
}

.sheet-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(58, 81, 120, 0.45) transparent;
    padding: 8px 9px 14px;
}

.sheet-list::-webkit-scrollbar,
.editor-area::-webkit-scrollbar,
.commandbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.sheet-list::-webkit-scrollbar-thumb,
.editor-area::-webkit-scrollbar-thumb,
.commandbar::-webkit-scrollbar-thumb {
    background: rgba(58, 81, 120, 0.35);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.sheet-item {
    margin-bottom: 3px;
    border-radius: 10px;
}

.sheet-item:hover {
    background: var(--aiden-blue-soft);
}

.sheet-item.active {
    background: linear-gradient(90deg, var(--aiden-green-soft), #fff);
    color: var(--aiden-blue-dark);
    box-shadow: inset 0 0 0 1px rgba(190, 213, 46, 0.32);
}

.sheet-item.active::before {
    left: -9px;
    width: 4px;
    height: 34px;
    background: var(--aiden-green);
}

.sheet-badge {
    background: #e8ecf2;
    color: var(--aiden-blue);
}

.sheet-item.active .sheet-badge {
    background: var(--aiden-blue);
    color: #fff;
}

.sheet-toggle.on {
    background: var(--aiden-green);
}

.sheet-toggle.on::after {
    background: var(--aiden-blue-deep);
}

.sidebar-summary {
    background: var(--aiden-blue);
    border-top: 0;
}

.sidebar-summary div + div {
    border-left-color: rgba(255, 255, 255, 0.16);
}

.sidebar-summary span {
    color: var(--aiden-green);
}

.sidebar-summary small {
    color: rgba(255, 255, 255, 0.66);
}

.content-area {
    min-height: 0;
    overflow: hidden;
    background: var(--canvas);
}

.object-header {
    background: #fff;
    border-bottom-color: var(--line);
}

.breadcrumbs,
.field-info-button,
.empty-record-state .empty-icon,
.data-tool-card-header > svg,
.find-replace-preview strong {
    color: var(--aiden-blue);
}

.object-title-row h1,
.header-metric strong,
.group-header strong,
.field-label,
.modal-header h2,
.validation-item-copy strong {
    color: var(--aiden-blue-deep);
}

.commandbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 18px rgba(31, 45, 69, 0.06);
}

.segment.active {
    background: var(--aiden-blue);
}

.ai-button {
    color: var(--aiden-blue-deep);
    border-color: rgba(190, 213, 46, 0.7);
    background: var(--aiden-green-soft);
}

.ai-button:hover,
.ai-button:focus-visible {
    border-color: var(--aiden-green-dark);
    background: #eef6bd;
}

.disabled-sheet-notice,
.bulk-mode-banner,
.validation-guidance {
    border-color: rgba(58, 81, 120, 0.25);
    background: var(--aiden-blue-soft);
    color: var(--aiden-blue-dark);
}

.editor-area {
    min-height: 0;
    overflow: auto;
    background:
        linear-gradient(rgba(58, 81, 120, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 81, 120, 0.025) 1px, transparent 1px),
        var(--canvas);
    background-size: 28px 28px;
}

.record-toolbar,
.group-card,
.grid-shell,
.data-tool-card,
.modal {
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.record-toolbar {
    border-top: 3px solid var(--aiden-green);
}

.group-header {
    background: var(--aiden-blue-softer);
}

.group-header:hover {
    background: var(--aiden-blue-soft);
}

.field-input:focus,
.field-textarea:focus,
.paste-textarea:focus,
.select-control:focus {
    border-color: var(--aiden-blue);
    box-shadow: 0 0 0 3px rgba(58, 81, 120, 0.12);
}

.field-control.required .field-input,
.field-control.required .field-textarea {
    border-left-color: var(--aiden-green-dark);
}

.indicator-control input:checked + .indicator-switch {
    background: var(--aiden-green);
}

.indicator-control input:checked + .indicator-switch::after {
    background: var(--aiden-blue-deep);
}

.data-grid th {
    background: var(--aiden-blue-soft);
    color: var(--aiden-blue-deep);
}

.data-grid th.required {
    background: var(--aiden-green-soft);
}

.grid-input:focus {
    box-shadow: inset 0 0 0 2px var(--aiden-blue);
}

.grid-selection-toolbar {
    border-color: rgba(190, 213, 46, 0.65);
    background: var(--aiden-green-soft);
}

.grid-selection-copy strong {
    color: var(--aiden-blue-deep);
}

.data-grid td.grid-selected,
.data-grid th.grid-selected {
    background: var(--aiden-green-soft) !important;
    box-shadow: inset 0 0 0 2px var(--aiden-green-dark);
}

.data-grid td.grid-selected .grid-input,
.data-grid tr.grid-row-in-selection .row-number-cell {
    background: #f9fbe9;
}

.modal-backdrop {
    background: rgba(31, 45, 69, 0.66);
    backdrop-filter: blur(4px);
}

.modal-header {
    border-top: 4px solid var(--aiden-green);
}

.modal-footer {
    background: var(--aiden-blue-softer);
}

.required-key-badge {
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
}

.toast.success {
    border-left-color: var(--aiden-green);
}

@media (max-width: 900px) {
    .brand {
        min-width: 0;
    }

    .brand-logo {
        width: 92px;
    }

    .brand-copy small {
        display: none;
    }
}

@media (max-width: 700px) {
    .shellbar {
        height: 60px;
        padding: 0 12px;
    }

    .brand-logo {
        width: 82px;
        max-height: 32px;
    }

    .brand-copy {
        padding-left: 10px;
    }

    .brand-copy strong {
        font-size: 12px;
    }

    .upload-screen {
        min-height: calc(100vh - 60px);
    }

    .workspace,
    .workspace.sidebar-collapsed {
        height: auto;
        min-height: calc(100vh - 60px);
    }

    .sheet-sidebar,
    .workspace.sidebar-collapsed .sheet-sidebar {
        min-height: 0;
        overflow: hidden;
    }

    .sheet-list,
    .workspace.sidebar-collapsed .sheet-list {
        min-height: 96px;
        max-height: 180px;
        overflow-y: auto;
    }

    .content-area {
        overflow: visible;
    }

    .editor-area {
        overflow: visible;
    }
}

/* Authentication, account and administration surfaces — SheetCopilot 7 */
.shell-text-link,
.portal-nav > a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-weight: 700;
    padding: 9px 11px;
    border-radius: 9px;
    white-space: nowrap;
}

.shell-text-link:hover,
.shell-text-link:focus-visible,
.portal-nav > a:hover,
.portal-nav > a:focus-visible,
.portal-nav > a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.shell-account,
.account-chip {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 6px 0 8px;
    line-height: 1.2;
}

.shell-account strong,
.account-chip strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.shell-account small,
.account-chip small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
}

.shell-logout-form,
.portal-nav form,
.project-card-actions form {
    margin: 0;
}

.viewer-mode .viewer-hidden {
    display: none !important;
}

.viewer-mode .field-input[readonly],
.viewer-mode .field-textarea[readonly],
.viewer-mode .grid-input[readonly] {
    cursor: default;
    background: #f8fafc;
    color: var(--ink);
}

.viewer-mode .record-toolbar::after {
    content: "Viewer licence · read-only";
    margin-left: auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
    font-size: 11px;
    font-weight: 800;
}

.auth-page {
    min-height: 100vh;
    overflow: auto;
    background: var(--aiden-blue-deep);
}

.login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
}

.login-story {
    position: relative;
    min-width: 0;
    padding: 42px clamp(34px, 6vw, 92px) 48px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(190, 213, 46, 0.25), transparent 27%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.09), transparent 32%),
        linear-gradient(145deg, var(--aiden-blue-deep), var(--aiden-blue));
}

.login-story::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.login-story > * {
    position: relative;
    z-index: 1;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    text-decoration: none;
}

.login-brand img {
    width: 118px;
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}

.login-brand span {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.login-brand strong {
    font-size: 16px;
}

.login-brand small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
}

.login-copy {
    max-width: 760px;
    margin-top: clamp(54px, 9vh, 108px);
}

.login-copy .eyebrow {
    border-color: rgba(190, 213, 46, 0.7);
    background: rgba(190, 213, 46, 0.13);
    color: #eaf4a8;
}

.login-copy h1 {
    margin: 22px 0 18px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.login-copy > p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    line-height: 1.7;
}

.login-feature-list {
    max-width: 770px;
    display: grid;
    gap: 10px;
    margin-top: 38px;
}

.login-feature-list article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(8px);
}

.login-feature-list article > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--aiden-green);
    color: var(--aiden-blue-deep);
    font-size: 11px;
    font-weight: 900;
}

.login-feature-list strong {
    display: block;
    margin: 1px 0 4px;
    font-size: 14px;
}

.login-feature-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.5;
}

.consultant-card {
    max-width: 770px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
    padding: 13px;
    border: 1px solid rgba(190, 213, 46, 0.44);
    border-radius: 15px;
    background: rgba(20, 31, 49, 0.34);
}

.consultant-card img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.84);
    border-radius: 13px;
    background: #fff;
}

.consultant-card div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.consultant-card small {
    color: var(--aiden-green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.consultant-card strong {
    margin-top: 4px;
    font-size: 19px;
}

.consultant-card span,
.consultant-card a {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.consultant-card a:hover {
    color: #fff;
}

.contact-email-pending {
    font-style: italic;
}

.login-panel {
    display: grid;
    place-items: center;
    padding: 38px clamp(24px, 5vw, 72px);
    background: #f4f6f9;
}

.login-card {
    width: min(490px, 100%);
    padding: clamp(28px, 5vw, 46px);
    border: 1px solid var(--line);
    border-top: 5px solid var(--aiden-green);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.login-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}

.login-lock {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
}

.login-lock svg {
    width: 24px;
    height: 24px;
}

.login-card h1,
.login-card h2 {
    margin: 9px 0 7px;
    color: var(--aiden-blue-deep);
    line-height: 1.15;
}

.login-card h2 {
    font-size: 25px;
}

.login-card > p,
.login-card-heading p,
.setup-required p {
    color: var(--muted);
    line-height: 1.55;
}

.login-card-heading p {
    margin: 0;
}

.login-form,
.stacked-admin-form,
.password-reset-form {
    display: grid;
    gap: 16px;
}

.login-form label,
.stacked-admin-form label,
.password-reset-form label,
.user-edit-grid label {
    display: grid;
    gap: 7px;
    color: var(--aiden-blue-deep);
    font-size: 12px;
    font-weight: 800;
}

.login-form label small,
.stacked-admin-form label small {
    color: var(--muted);
    font-weight: 500;
}

.text-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
}

.text-control:focus {
    border-color: var(--aiden-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 81, 120, 0.12);
}

.login-support {
    margin: 23px 0 0;
    text-align: center;
    font-size: 11px;
}

.setup-required {
    padding: 18px;
    border: 1px solid rgba(190, 213, 46, 0.62);
    border-radius: 12px;
    background: var(--aiden-green-soft);
}

.setup-required p {
    margin: 6px 0 14px;
}

.single-auth-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 20% 10%, rgba(190, 213, 46, 0.28), transparent 28%),
        linear-gradient(145deg, var(--aiden-blue-deep), var(--aiden-blue));
}

.setup-card {
    width: min(570px, 100%);
}

.dark-brand {
    margin-bottom: 34px;
    color: var(--aiden-blue-deep);
}

.dark-brand span {
    border-left-color: var(--line);
}

.dark-brand small {
    color: var(--muted);
}

.portal-page {
    min-height: 100vh;
    overflow: auto;
    background: var(--canvas);
}

.portal-shellbar .brand {
    color: #fff;
    text-decoration: none;
}

.portal-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.portal-main {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0 72px;
}

.portal-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.portal-heading h1 {
    margin: 15px 0 7px;
    color: var(--aiden-blue-deep);
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.035em;
}

.portal-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.portal-notice,
.licence-summary-card,
.empty-portal-state,
.project-card,
.admin-panel {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.portal-notice {
    margin-bottom: 18px;
    padding: 14px 16px;
}

.portal-notice.success {
    border-left: 4px solid var(--success);
    color: var(--success);
}

.licence-summary-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) 1fr;
    align-items: center;
    gap: 24px;
    margin-bottom: 26px;
    padding: 20px 23px;
    border-left: 5px solid var(--aiden-green);
}

.licence-summary-card div {
    display: flex;
    flex-direction: column;
}

.licence-summary-card small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.licence-summary-card strong {
    margin-top: 5px;
    color: var(--aiden-blue-deep);
    font-size: 18px;
}

.licence-summary-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.empty-portal-state {
    padding: 64px 30px;
    text-align: center;
}

.empty-portal-state .empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 16px;
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
}

.empty-portal-state h2 {
    margin: 0 0 8px;
    color: var(--aiden-blue-deep);
}

.empty-portal-state p {
    margin: 0 0 22px;
    color: var(--muted);
}

.project-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
    gap: 18px;
}

.project-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 15px;
    padding: 20px;
    border-top: 4px solid var(--aiden-blue);
}

.project-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--aiden-blue-soft);
    color: var(--aiden-blue);
}

.project-card-copy {
    min-width: 0;
}

.project-card-copy h2 {
    margin: 9px 0 7px;
    overflow-wrap: anywhere;
    color: var(--aiden-blue-deep);
    font-size: 16px;
}

.project-card-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.status-pill,
.account-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
    font-size: 10px;
    font-weight: 800;
}

.project-card-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.danger-button {
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid #e7aaaa;
    border-radius: 9px;
    background: #fff4f4;
    color: var(--error);
    cursor: pointer;
    font-weight: 800;
}

.danger-button:hover,
.danger-button:focus-visible {
    background: var(--error-soft);
    outline: none;
}

.admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    gap: 22px;
    align-items: start;
}

.admin-side-column {
    display: grid;
    gap: 22px;
    position: sticky;
    top: calc(var(--shell-height) + 22px);
}

.admin-panel {
    overflow: hidden;
}

.admin-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--aiden-blue-softer);
}

.admin-panel-heading h2 {
    margin: 0 0 5px;
    color: var(--aiden-blue-deep);
    font-size: 18px;
}

.admin-panel-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.compact-panel .stacked-admin-form {
    padding: 20px 22px 23px;
}

.account-status.active {
    background: var(--success-soft);
    color: var(--success);
}

.account-status.inactive {
    background: var(--error-soft);
    color: var(--error);
}

.user-list {
    display: grid;
}

.user-row {
    border-bottom: 1px solid var(--line);
}

.user-row:last-child {
    border-bottom: 0;
}

.user-row > summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 17px 22px;
    cursor: pointer;
}

.user-row > summary::-webkit-details-marker {
    display: none;
}

.user-row > summary:hover {
    background: var(--aiden-blue-softer);
}

.user-summary-copy {
    min-width: 0;
}

.user-summary-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--aiden-blue-deep);
    white-space: nowrap;
}

.user-summary-copy span {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.user-summary-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.user-row-content {
    padding: 22px;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
}

.user-edit-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 0.8fr 0.8fr;
    gap: 14px;
}

.user-edit-actions,
.password-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.password-reset-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    flex: 1 1 560px;
}

.two-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-checkbox {
    grid-template-columns: auto 1fr !important;
    align-items: center;
    justify-content: start;
}

.managed-ai-note {
    padding: 12px 13px;
    border: 1px solid rgba(190, 213, 46, 0.55);
    border-radius: 9px;
    background: var(--aiden-green-soft);
    color: var(--aiden-blue-deep);
    font-size: 12px;
    line-height: 1.5;
}

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

    .login-panel {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .login-copy {
        margin-top: 58px;
    }

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

    .admin-side-column {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .shellbar {
        height: auto;
        min-height: var(--shell-height);
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .shell-actions,
    .portal-nav {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
    }

    .shell-account,
    .account-chip {
        margin-left: auto;
    }

    .portal-main {
        width: min(100% - 28px, 1280px);
        padding-top: 32px;
    }

    .portal-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .licence-summary-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .admin-side-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .login-story {
        padding: 28px 22px 34px;
    }

    .login-brand img {
        width: 92px;
    }

    .login-copy h1 {
        font-size: 38px;
    }

    .login-panel {
        padding: 28px 16px;
    }

    .login-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .consultant-card {
        align-items: flex-start;
    }

    .user-edit-grid,
    .two-field-row,
    .password-reset-form {
        grid-template-columns: 1fr;
    }

    .project-card-grid {
        grid-template-columns: 1fr;
    }

    .project-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .project-card-actions a,
    .project-card-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* Actual administration component class bindings */
.admin-user-list {
    display: grid;
}

.admin-user-card {
    border-bottom: 1px solid var(--line);
}

.admin-user-card:last-child {
    border-bottom: 0;
}

.admin-user-card > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 17px 22px;
    cursor: pointer;
}

.admin-user-card > summary::-webkit-details-marker {
    display: none;
}

.admin-user-card > summary:hover {
    background: var(--aiden-blue-softer);
}

.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--aiden-blue);
    color: #fff;
    font-weight: 900;
}

.user-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.user-summary strong,
.user-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-summary strong {
    color: var(--aiden-blue-deep);
}

.user-summary small {
    margin-top: 4px;
    color: var(--muted);
}

.licence-badge {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--aiden-blue-soft);
    color: var(--aiden-blue-deep);
    font-size: 10px;
    font-weight: 900;
    text-transform: capitalize;
}

.licence-badge.advanced {
    background: var(--aiden-green-soft);
}

.admin-user-body {
    padding: 22px;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.35fr 0.75fr 0.75fr;
    gap: 14px;
    align-items: end;
}

.admin-form-grid label {
    display: grid;
    gap: 7px;
    color: var(--aiden-blue-deep);
    font-size: 12px;
    font-weight: 800;
}

.admin-form-grid .admin-checkbox {
    grid-column: 1 / span 2;
    align-self: center;
}

.admin-form-actions {
    grid-column: 3 / -1;
    display: flex;
    justify-content: flex-end;
}

.admin-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.admin-secondary-actions > form:last-child {
    margin-left: auto;
}

@media (max-width: 1100px) {
    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-form-grid .admin-checkbox,
    .admin-form-actions {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .admin-user-card > summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .admin-user-card > summary .licence-badge,
    .admin-user-card > summary .account-status {
        margin-left: 50px;
    }

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

    .admin-secondary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-secondary-actions > form:last-child {
        margin-left: 0;
    }
}