:root {
    --cms-ink: #16352f;
    --cms-muted: #667b76;
    --cms-line: #dce7e3;
    --cms-surface: #ffffff;
    --cms-soft: #f4f8f6;
    --cms-accent: #16745f;
    --cms-accent-dark: #0e5b4a;
    --cms-danger: #b42318;
    --cms-shadow: 0 18px 45px rgba(23, 61, 52, 0.08);
    --cms-shadow-soft: 0 8px 24px rgba(23, 61, 52, 0.06);
}

body[data-admin-route="true"] #primary-navigation-root,
body[data-admin-route="true"] .site-footer {
    display: none;
}

body[data-admin-route="true"] #app {
    align-self: stretch;
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body[data-admin-route="true"] {
    background: #edf3f1;
}

.admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(circle at 88% 0%, rgba(22, 116, 95, 0.07), transparent 34rem),
        var(--cms-soft);
    color: var(--cms-ink);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 26px 20px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 30% 0%, rgba(95, 196, 163, 0.2), transparent 18rem),
        linear-gradient(180deg, #123f35 0%, #0d312a 100%);
    color: white;
    box-shadow: 8px 0 30px rgba(10, 44, 36, 0.08);
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 6px 34px;
    color: white;
    text-decoration: none;
}

.admin-sidebar__brand span,
.admin-gate__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #d9f4ea;
    color: #0e5b4a;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.admin-sidebar__brand div { display: grid; gap: 2px; }
.admin-sidebar__brand strong { font-size: 1.02rem; letter-spacing: -0.01em; }
.admin-sidebar__brand small { color: #a9cec4; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }

.admin-sidebar nav {
    display: grid;
    gap: 6px;
}

.admin-sidebar__label {
    margin: 0 13px 7px;
    color: #84afa4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-sidebar nav a,
.admin-sidebar__exit {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #d9ebe6;
    text-decoration: none;
    font-weight: 650;
    transition: 150ms ease;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.is-active {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.11);
    color: white;
    transform: translateX(2px);
}

.admin-nav-icon { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; }
.admin-nav-icon svg, .admin-metric-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-sidebar__footer { display: grid; gap: 8px; margin-top: auto; }
.admin-sidebar__version { padding: 0 13px; color: #86aaa1; font-size: 0.75rem; font-weight: 650; }
.admin-sidebar__exit { font-size: 0.9rem; }

.admin-workspace { min-width: 0; padding: 40px clamp(30px, 3.5vw, 60px) 72px; }
.admin-topbar { display: flex; justify-content: space-between; gap: 38px; align-items: center; margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--cms-line); }
.admin-topbar h1 { margin: 4px 0 6px; font-size: clamp(2rem, 2.4vw, 2.7rem); letter-spacing: -0.035em; line-height: 1.08; }
.admin-topbar p { margin: 0; color: var(--cms-muted); line-height: 1.55; }
.admin-topbar__identity { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; color: var(--cms-muted); }
.admin-user-card { display: grid; gap: 3px; padding: 10px 13px; border: 1px solid var(--cms-line); border-radius: 11px; background: rgba(255, 255, 255, 0.8); box-shadow: var(--cms-shadow-soft); }
.admin-user-card span { color: var(--cms-muted); font-size: 0.67rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-user-card strong { max-width: 260px; overflow: hidden; color: var(--cms-ink); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar__badges { display: grid; justify-items: end; gap: 6px; }
.admin-role-badge, .admin-version-badge { padding: 5px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 750; }
.admin-role-badge { background: #d9f4ea; color: var(--cms-accent-dark); }
.admin-version-badge { border: 1px solid #cedbd7; background: white; color: var(--cms-muted); }

.admin-toast { margin: -10px 0 24px; padding: 13px 16px; border: 1px solid #a6d9ca; border-radius: 11px; background: #eaf8f3; color: #0e5b4a; box-shadow: var(--cms-shadow-soft); }
.admin-toast[hidden] { display: none; }
.cms-loading { padding: 36px; text-align: center; color: var(--cms-muted); }
.cms-empty-state { padding: 48px 24px; border: 1px dashed #b9cbc6; border-radius: 16px; background: white; text-align: center; }
.cms-empty-state h1, .cms-empty-state h2 { margin-top: 0; }

.admin-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 18px; }
.admin-metric-card { display: grid; grid-template-columns: auto 1fr; gap: 17px; min-height: 190px; padding: 23px; border: 1px solid var(--cms-line); border-radius: 17px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--cms-shadow-soft); transition: 160ms ease; }
.admin-metric-card:hover { border-color: #bed3cd; box-shadow: var(--cms-shadow); transform: translateY(-2px); }
.admin-metric-card__icon { display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: #e7f4f0; color: var(--cms-accent); }
.admin-metric-card strong { font-size: 2rem; }
.admin-metric-card h2 { margin: 3px 0 7px; font-size: 1.08rem; }
.admin-metric-card p { margin: 0; color: var(--cms-muted); font-size: 0.9rem; line-height: 1.5; }
.admin-metric-card button, .admin-metric-card small { grid-column: 1 / -1; align-self: end; justify-self: start; }
.admin-metric-card button { padding: 0; border: 0; background: transparent; color: var(--cms-accent); font-weight: 750; cursor: pointer; }
.admin-metric-card.is-coming { background: rgba(249, 251, 250, 0.82); opacity: 0.78; }
.admin-info-panel { margin-top: 22px; padding: 25px 26px; border: 1px solid #cce3dc; border-radius: 17px; background: linear-gradient(135deg, #e2f4ee, #edf8f4); box-shadow: var(--cms-shadow-soft); }
.admin-info-panel h2 { margin-top: 0; }
.admin-info-panel p { margin-bottom: 0; max-width: 760px; color: #345f55; }

.admin-announcement-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr); gap: 22px; align-items: start; }
.admin-announcement-form, .admin-announcement-preview { border: 1px solid var(--cms-line); border-radius: 17px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--cms-shadow-soft); }
.admin-announcement-form > div:first-child h2 { margin: 5px 0 8px; }
.admin-announcement-form > div:first-child p:last-child { margin: 0; color: var(--cms-muted); line-height: 1.55; }
.admin-announcement-form label > small { color: var(--cms-muted); font-weight: 500; }
.admin-announcement-preview { position: sticky; top: 28px; padding: 24px; }
.admin-announcement-preview > .eyebrow { margin-bottom: 13px; }
.admin-announcement-preview__card { padding: 25px; border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(248, 210, 95, 0.3), transparent 38%), linear-gradient(135deg, #204f3d, #34765b); color: white; box-shadow: 0 16px 36px rgba(24, 60, 45, 0.18); }
.admin-announcement-preview__card small { color: #caeedf; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-announcement-preview__card h3 { margin: 8px 0; color: white; font-size: 1.35rem; line-height: 1.2; }
.admin-announcement-preview__card p { margin: 0; color: #e2f0ea; font-size: 0.9rem; line-height: 1.55; }
.admin-announcement-preview__card span { display: inline-flex; margin-top: 19px; padding: 9px 12px; border-radius: 9px; background: white; color: #20533f; font-size: 0.8rem; font-weight: 800; }

.admin-split-view { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.admin-content-list, .admin-edit-pane, .admin-learning-list { border: 1px solid var(--cms-line); border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--cms-shadow-soft); overflow: hidden; }
.admin-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--cms-line); }
.admin-list-toolbar h2 { margin: 0; font-size: 1rem; }
.admin-list-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid #edf2f0; background: white; color: inherit; text-align: left; cursor: pointer; }
.admin-list-row:hover, .admin-list-row.is-selected { background: #edf7f4; }
.admin-list-row.is-selected { box-shadow: inset 3px 0 0 var(--cms-accent); }
.admin-list-row span:first-child { min-width: 0; }
.admin-list-row strong, .admin-list-row small { display: block; }
.admin-list-row strong { overflow: hidden; text-overflow: ellipsis; }
.admin-list-row small { margin-top: 4px; color: var(--cms-muted); }
.status-pill { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 0.73rem; font-weight: 750; }
.status-pill--published { background: #dff6e9; color: #146c43; }
.status-pill--draft { background: #f1f1f1; color: #676767; }

.admin-editor { display: grid; grid-template-columns: minmax(0, 1fr) 310px; }
.admin-editor__main, .admin-editor__settings, .admin-learning-form { display: grid; gap: 18px; padding: 24px; }
.admin-editor__settings { align-content: start; border-left: 1px solid var(--cms-line); background: #fbfcfc; }
.admin-editor__settings h2 { margin: 0; font-size: 1rem; }
.admin-editor label, .admin-learning-form label { display: grid; gap: 7px; color: #37564f; font-size: 0.84rem; font-weight: 700; }
.admin-editor input, .admin-editor textarea, .admin-learning-form input, .admin-learning-form textarea, .admin-learning-form select, .admin-learning-toolbar input, .admin-learning-toolbar select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #c9d8d4;
    border-radius: 9px;
    background: white;
    color: var(--cms-ink);
    font: inherit;
    box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.admin-editor input:focus, .admin-editor textarea:focus, .admin-learning-form input:focus, .admin-learning-form textarea:focus, .admin-learning-form select:focus, .admin-learning-toolbar input:focus, .admin-learning-toolbar select:focus { border-color: #70ac9d; outline: 0; box-shadow: 0 0 0 3px rgba(22, 116, 95, 0.1); }
.admin-editor textarea, .admin-learning-form textarea { resize: vertical; line-height: 1.5; }
.admin-thumbnail-field { display: grid; gap: 10px; }
.admin-thumbnail-field__heading { display: grid; gap: 3px; }
.admin-thumbnail-field__heading > strong { color: #37564f; font-size: 0.84rem; }
.admin-thumbnail-field__heading > small { color: var(--cms-muted); font-size: 0.72rem; font-weight: 500; line-height: 1.4; }
.admin-thumbnail-preview { position: relative; display: grid; width: 100%; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border: 1px dashed #aac3ba; border-radius: 12px; background: linear-gradient(145deg, #edf5f1, #f8faf9); color: #628077; }
.admin-thumbnail-preview > span { display: grid; justify-items: center; gap: 3px; }
.admin-thumbnail-preview > span strong { color: #3f6e60; font-size: 1.15rem; }
.admin-thumbnail-preview > span small { color: var(--cms-muted); font-size: 0.7rem; }
.admin-thumbnail-preview.has-image { border-style: solid; background: #e7efeb; }
.admin-thumbnail-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.admin-thumbnail-field__actions { display: flex; align-items: center; gap: 10px; }
.admin-thumbnail-field__actions .secondary-button { flex: 1; }
.admin-thumbnail-remove { padding: 7px 0; border: 0; background: transparent; color: var(--cms-danger); font: inherit; font-size: 0.78rem; font-weight: 750; cursor: pointer; }
.admin-thumbnail-remove[hidden] { display: none; }
.admin-thumbnail-field > p { margin: 0; color: var(--cms-muted); font-size: 0.72rem; font-weight: 500; line-height: 1.45; }
.rich-editor { border: 1px solid #c9d8d4; border-radius: 10px; overflow: hidden; }
.rich-editor__label { display: block; padding: 9px 12px 0; color: #37564f; font-size: 0.84rem; font-weight: 700; }
.rich-editor__toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-bottom: 1px solid var(--cms-line); background: #f8faf9; }
.rich-editor__toolbar button { padding: 6px 8px; border: 1px solid #d4dfdc; border-radius: 6px; background: white; cursor: pointer; }
.rich-editor__content { min-height: 360px; padding: 18px; outline: none; line-height: 1.65; }
.rich-editor__content:focus { box-shadow: inset 0 0 0 2px #6bb5a4; }
.rich-editor__content img { max-width: 100%; height: auto; }
.admin-editor__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-editor__actions button:disabled { cursor: wait; opacity: 0.62; }
.primary-button, .secondary-button, .danger-button { min-height: 41px; padding: 10px 15px; border-radius: 9px; font-weight: 750; cursor: pointer; transition: 140ms ease; }
.primary-button { border: 1px solid var(--cms-accent); background: var(--cms-accent); color: white; }
.primary-button:hover { background: var(--cms-accent-dark); }
.secondary-button { border: 1px solid #bdd0cb; background: white; color: var(--cms-ink); }
.secondary-button:hover { border-color: #8eb2a9; background: #f3f8f6; }
.danger-button { border: 1px solid #f3b5af; background: #fff3f2; color: var(--cms-danger); }
.danger-button:hover { border-color: #e69088; background: #ffe9e7; }
.admin-delete-button { margin: 0 22px 22px; }

.admin-learning-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; gap: 9px; margin-bottom: 16px; }
.admin-learning-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr); gap: 22px; align-items: start; }
.admin-learning-list { max-height: 70vh; overflow-y: auto; }
.admin-list-summary { position: sticky; top: 0; z-index: 1; padding: 11px 15px; border-bottom: 1px solid var(--cms-line); background: #f8faf9; color: var(--cms-muted); font-size: 0.84rem; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-checkboxes { display: flex; flex-wrap: wrap; gap: 18px; }
.admin-checkboxes label { display: flex; align-items: center; gap: 7px; }
.admin-checkboxes input { width: auto; }

.admin-gate { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at top, #e2f4ee, #f7faf9 55%); }
.admin-gate section { width: min(500px, 100%); padding: 46px; border: 1px solid var(--cms-line); border-radius: 22px; background: rgba(255, 255, 255, 0.96); text-align: center; box-shadow: 0 24px 70px rgba(25, 73, 61, 0.14); }
.admin-gate__mark { margin: 0 auto 20px; width: 60px; height: 60px; font-size: 1.2rem; }
.admin-gate h1 { margin: 5px 0 12px; }
.admin-gate p { color: var(--cms-muted); line-height: 1.6; }
.admin-gate a { display: block; margin-top: 18px; color: var(--cms-accent); }
.admin-gate__version { display: block; margin-top: 28px; color: #8a9d98; font-size: 0.76rem; font-weight: 700; }

.admin-preview-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: start center; padding: 5vh 20px; overflow-y: auto; background: rgba(8, 28, 23, 0.72); }
.admin-preview { position: relative; width: min(760px, 100%); padding: clamp(25px, 5vw, 60px); border-radius: 18px; background: white; color: var(--cms-ink); }
.admin-preview > button { position: absolute; top: 14px; right: 14px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }

.admin-image-editor-overlay { position: fixed; inset: 0; z-index: 2300; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: rgba(8, 28, 23, 0.8); backdrop-filter: blur(5px); }
.admin-image-editor { width: min(820px, 100%); overflow: hidden; border: 1px solid #c9d8d4; border-radius: 20px; background: #ffffff; color: var(--cms-ink); box-shadow: 0 30px 90px rgba(4, 30, 23, 0.36); }
.admin-image-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 23px 25px 19px; }
.admin-image-editor > header h2 { margin: 4px 0 6px; color: var(--cms-ink); font-size: 1.45rem; }
.admin-image-editor > header p:last-child { max-width: 610px; margin: 0; color: var(--cms-muted); font-size: 0.86rem; line-height: 1.5; }
.admin-image-editor > header > button { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--cms-line); border-radius: 10px; background: #f7faf9; color: var(--cms-ink); font-size: 1rem; cursor: pointer; }
.admin-image-crop-frame { position: relative; width: calc(100% - 50px); aspect-ratio: 16 / 9; margin: 0 25px; overflow: hidden; border: 1px solid #aec4bc; border-radius: 14px; background: #dce6e1; cursor: grab; touch-action: none; user-select: none; }
.admin-image-crop-frame.is-dragging { cursor: grabbing; }
.admin-image-crop-frame > img { position: absolute; top: 50%; left: 50%; display: block; max-width: none; transform-origin: center; pointer-events: none; }
.admin-image-crop-grid { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.55); background: linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, 0.48) 33.3%, transparent 33.5%, transparent 66.4%, rgba(255, 255, 255, 0.48) 66.6%, transparent 66.8%), linear-gradient(0deg, transparent 33.1%, rgba(255, 255, 255, 0.48) 33.3%, transparent 33.5%, transparent 66.4%, rgba(255, 255, 255, 0.48) 66.6%, transparent 66.8%); box-shadow: inset 0 0 0 999px rgba(7, 29, 23, 0.04); pointer-events: none; }
.admin-image-crop-hint { position: absolute; bottom: 12px; left: 50%; padding: 6px 9px; border-radius: 999px; background: rgba(10, 35, 28, 0.72); color: #ffffff; font-size: 0.68rem; font-weight: 750; pointer-events: none; transform: translateX(-50%); }
.admin-image-editor__controls { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 25px; }
.admin-image-editor__controls label { display: grid; flex: 1; gap: 7px; color: #37564f; font-size: 0.8rem; font-weight: 750; }
.admin-image-editor__controls input[type="range"] { width: 100%; accent-color: var(--cms-accent); }
.admin-image-editor > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 25px; border-top: 1px solid var(--cms-line); background: #f8faf9; }
.admin-image-editor > footer > span { color: var(--cms-muted); font-size: 0.74rem; }
.admin-image-editor > footer > div { display: flex; gap: 8px; }
.admin-image-editor button:disabled { cursor: wait; opacity: 0.65; }

.page-shell { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }
.blog-page { padding: clamp(42px, 8vw, 90px) 0; }
.blog-page__heading { max-width: 720px; margin-bottom: 38px; }
.blog-page__heading h1 { margin: 4px 0 10px; font-size: clamp(2.4rem, 6vw, 4.3rem); }
.blog-page__heading > p:last-child { color: var(--cms-muted); font-size: 1.08rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { overflow: hidden; border: 1px solid var(--cms-line); border-radius: 17px; background: white; box-shadow: 0 10px 32px rgba(21, 65, 54, 0.06); }
.blog-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card__body { padding: 21px; }
.blog-card__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--cms-muted); font-size: 0.78rem; }
.blog-card h2 { margin: 12px 0 8px; font-size: 1.2rem; }
.blog-card p { color: var(--cms-muted); line-height: 1.55; }
.blog-card a, .cms-back-link { color: var(--cms-accent); font-weight: 750; text-decoration: none; }
.blog-article { width: min(780px, 100%); margin: 0 auto; }
.blog-article header { margin: 30px 0; }
.blog-article h1 { margin: 8px 0 16px; font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1.08; }
.blog-article__lead { color: #4f6862; font-size: 1.2rem; line-height: 1.6; }
.blog-article__meta { display: flex; gap: 12px; color: var(--cms-muted); font-size: 0.9rem; }
.blog-article__cover { width: 100%; max-height: 520px; margin: 10px 0 32px; border-radius: 16px; object-fit: cover; }
.blog-article__content { color: #243e38; font-size: 1.05rem; line-height: 1.78; }
.blog-article__content h2, .blog-article__content h3 { margin: 1.8em 0 0.6em; }
.blog-article__content img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article__content a { color: var(--cms-accent); }

@media (max-width: 1100px) {
    .admin-metric-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-learning-toolbar { grid-template-columns: repeat(3, 1fr); }
    .admin-learning-toolbar input { grid-column: 1 / -1; }
    .admin-editor, .admin-announcement-layout { grid-template-columns: 1fr; }
    .admin-announcement-preview { position: static; }
    .admin-editor__settings { border: 0; border-top: 1px solid var(--cms-line); }
    .admin-topbar { align-items: flex-start; }
    .admin-topbar__identity { align-items: flex-end; flex-direction: column; }
}

@media (max-width: 760px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; padding: 13px; }
    .admin-sidebar__brand { margin: 0 4px 12px; }
    .admin-sidebar__brand small, .admin-sidebar__label, .admin-sidebar__version { display: none; }
    .admin-sidebar nav { display: flex; overflow-x: auto; }
    .admin-sidebar nav a { flex: none; }
    .admin-sidebar__exit { display: none; }
    .admin-workspace { padding: 24px 14px 45px; }
    .admin-topbar { display: block; }
    .admin-topbar__identity { align-items: flex-start; margin-top: 16px; }
    .admin-topbar__badges { display: flex; justify-items: start; }
    .admin-metric-grid, .blog-grid, .admin-split-view, .admin-learning-layout { grid-template-columns: 1fr; }
    .admin-learning-toolbar { grid-template-columns: 1fr 1fr; }
    .admin-learning-toolbar input { grid-column: 1 / -1; }
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-learning-list { max-height: 48vh; }
    .admin-gate section { padding: 30px 22px; }
    .admin-image-editor-overlay { padding: 10px; }
    .admin-image-editor > header { padding: 19px 17px 15px; }
    .admin-image-crop-frame { width: calc(100% - 34px); margin-inline: 17px; }
    .admin-image-editor__controls { align-items: stretch; flex-direction: column; padding: 15px 17px; }
    .admin-image-editor__controls .secondary-button { width: 100%; }
    .admin-image-editor > footer { align-items: stretch; flex-direction: column; padding: 15px 17px; }
    .admin-image-editor > footer > div, .admin-image-editor > footer button { width: 100%; }
}