/* Taxelyy CMS 2.0 - lightweight commercial admin */
:root {
    --cms-bg: #f4f6fa;
    --cms-card: #ffffff;
    --cms-card-soft: #f8fafc;
    --cms-text: #172033;
    --cms-text-soft: #607089;
    --cms-muted: #8a98ad;
    --cms-line: #e8edf4;
    --cms-line-strong: #dbe3ee;
    --cms-primary: #2f6fed;
    --cms-primary-dark: #1f57c7;
    --cms-primary-soft: #edf4ff;
    --cms-green: #16a34a;
    --cms-green-dark: #11853c;
    --cms-green-soft: #eaf8ef;
    --cms-orange: #e58b22;
    --cms-orange-soft: #fff5e8;
    --cms-purple: #7c5cd6;
    --cms-purple-soft: #f2eeff;
    --cms-danger: #dc4c64;
    --cms-danger-soft: #fff0f2;
    --cms-shadow: 0 10px 34px rgba(23, 32, 51, .055);
    --cms-shadow-hover: 0 16px 38px rgba(23, 32, 51, .09);
    --cms-radius: 16px;
    --cms-radius-sm: 10px;
    --cms-sidebar: 258px;
    --cms-topbar: 72px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--cms-bg); }

body.cms-body {
    margin: 0;
    min-height: 100vh;
    background: var(--cms-bg);
    color: var(--cms-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.cms-body a { color: inherit; text-decoration: none; }
body.cms-body button, body.cms-body input, body.cms-body textarea { font: inherit; }
body.cms-body button { cursor: pointer; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* Shell */
.cms-shell { min-height: 100vh; }

.cms-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: var(--cms-sidebar);
    flex-direction: column;
    padding: 24px 18px 20px;
    border-right: 1px solid var(--cms-line);
    background: rgba(255, 255, 255, .98);
}

.cms-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 25px;
    border-bottom: 1px solid #f0f3f8;
}

.brand-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #4f8cff, #245fe1);
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 111, 237, .25);
}

.brand-mark .icon { width: 22px; height: 22px; stroke-width: 2.4; }

.cms-brand > span:last-child { display: flex; min-width: 0; flex-direction: column; }

.cms-brand strong {
    overflow: hidden;
    color: #1b2740;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-brand small { margin-top: 2px; color: var(--cms-muted); font-size: 11px; letter-spacing: .4px; }

.cms-nav { flex: 1; padding-top: 24px; }

.nav-caption {
    margin: 0 12px 10px;
    color: #a5b0c1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 12px 13px;
    border-radius: 11px;
    color: #5c6b82;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item:hover { background: #f4f7fb; color: #223453; transform: translateX(1px); }
.nav-item.is-active { background: var(--cms-primary-soft); color: #245fda; }

.nav-item.is-active::before {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--cms-primary);
    content: "";
}

.nav-item .icon { width: 19px; height: 19px; color: #8795aa; transition: color .18s ease; }
.nav-item.is-active .icon { color: var(--cms-primary); }

.sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding: 16px 13px 2px;
    border-top: 1px solid #f0f3f8;
}

.sidebar-help { display: flex; align-items: center; gap: 7px; color: #78869b; font-size: 11.5px; }
.sidebar-help .icon { width: 14px; height: 14px; color: #41a86a; }
.sidebar-foot small { color: #b2bdcc; font-size: 10.5px; letter-spacing: .3px; }
.sidebar-backdrop { display: none; }
.cms-main { min-height: 100vh; margin-left: var(--cms-sidebar); }

/* Topbar */
.cms-topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    height: var(--cms-topbar);
    align-items: center;
    gap: 24px;
    padding: 0 34px;
    border-bottom: 1px solid rgba(230, 236, 244, .9);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
}

.topbar-menu {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #f3f6fa;
    color: #53637a;
}

.topbar-breadcrumb { display: flex; align-items: center; gap: 9px; min-width: 180px; color: #9aa6b8; font-size: 12.5px; white-space: nowrap; }
.topbar-breadcrumb a:hover { color: var(--cms-primary); }
.topbar-breadcrumb strong { overflow: hidden; max-width: 180px; color: #44536b; font-weight: 650; text-overflow: ellipsis; }

.topbar-search { position: relative; display: flex; width: min(400px, 36vw); align-items: center; margin-left: auto; }
.topbar-search > .icon { position: absolute; left: 13px; width: 17px; height: 17px; color: #97a4b8; pointer-events: none; }

.topbar-search input {
    width: 100%;
    height: 40px;
    padding: 0 74px 0 40px;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    outline: 0;
    background: #f7f9fc;
    color: var(--cms-text);
    font-size: 12.5px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.topbar-search input:focus { border-color: #bcd1fb; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .08); }
.topbar-search button { position: absolute; top: 5px; right: 5px; height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: #fff; color: #687992; font-size: 11.5px; font-weight: 650; }
.topbar-search button:hover { color: var(--cms-primary); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.icon-button {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #edf1f6;
    border-radius: 11px;
    background: #fff;
    color: #74839a;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.icon-button:hover { border-color: #dce6f5; background: #f7faff; color: var(--cms-primary); }
.notice-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border: 1.5px solid #fff; border-radius: 50%; background: #f15b6f; }
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 4px; }

.user-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f0ff, #d8e6ff);
    color: #3069d6;
    font-size: 14px;
    font-weight: 750;
}

.user-chip > span:last-child { display: flex; min-width: 68px; flex-direction: column; }
.user-chip strong { color: #3e4c63; font-size: 12.5px; font-weight: 700; }
.user-chip small { color: #9ca8b9; font-size: 10.5px; }
.logout-form { margin: 0; }

/* Content foundations */
.cms-content { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px 36px 48px; }
.cms-content > * + * { margin-top: 22px; }

.cms-flash {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid #d9eee1;
    border-radius: 13px;
    background: #f2fbf5;
    color: #247447;
    box-shadow: 0 7px 20px rgba(34, 130, 75, .06);
    font-size: 13px;
    transition: opacity .25s ease, transform .25s ease;
}

.cms-flash.is-error { border-color: #f4d7dc; background: #fff7f8; color: #b84255; }
.cms-flash.is-warning { border-color: #f4e3c8; background: #fffaf2; color: #9a661f; }
.cms-flash.is-hiding { opacity: 0; transform: translateY(-5px); }
.flash-icon { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34, 150, 86, .12); }
.cms-flash.is-error .flash-icon { background: rgba(220, 76, 100, .1); }
.cms-flash.is-warning .flash-icon { background: rgba(229, 139, 34, .13); }
.flash-icon .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.cms-flash > span:nth-child(2) { flex: 1; }
.cms-flash button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: currentColor; font-size: 18px; line-height: 1; opacity: .6; }

.eyebrow { margin: 0 0 7px; color: #7b8ca5; font-size: 10.5px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.page-header, .page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 6px 2px 2px; }
.page-header h1, .page-hero h1 { margin: 0; color: #17243a; font-size: clamp(26px, 2.3vw, 34px); font-weight: 760; letter-spacing: -.9px; line-height: 1.2; }
.page-header p:not(.eyebrow), .page-hero p:not(.eyebrow):not(.hero-copy) { max-width: 700px; margin: 9px 0 0; color: var(--cms-text-soft); font-size: 13px; }
.hero-copy { max-width: 690px; margin: 10px 0 0; color: var(--cms-text-soft); font-size: 13px; }

.header-chip, .date-range-chip {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #e6ecf4;
    border-radius: 11px;
    background: #fff;
    color: #687892;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.header-chip .icon, .date-range-chip .icon { width: 16px; height: 16px; color: #8998ad; }
.date-range-chip .icon:last-child { width: 13px; height: 13px; transform: rotate(90deg); }

/* Buttons */
.cms-btn {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cms-btn:hover { transform: translateY(-1px); }
.cms-btn .icon { width: 17px; height: 17px; }
.cms-btn-primary { background: linear-gradient(145deg, #3c7bf1, #2c68e4); color: #fff; box-shadow: 0 8px 18px rgba(47, 111, 237, .2); }
.cms-btn-primary:hover { background: linear-gradient(145deg, #3473ea, #225dd6); box-shadow: 0 11px 23px rgba(47, 111, 237, .25); }
.cms-btn-secondary { border-color: #e4eaf2; background: #fff; color: #58677e; }
.cms-btn-secondary:hover { border-color: #cfdcf1; color: #295fca; }
.cms-btn-ghost { border-color: #e5eaf1; background: #fff; color: #66768d; }
.cms-btn-ghost:hover { border-color: #cfd9e9; background: #f9fbfe; }

.cms-btn-publish {
    min-height: 54px;
    padding: 0 32px;
    border-radius: 14px;
    background: linear-gradient(145deg, #1db85a, #149647);
    color: #fff;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .23);
    font-size: 15px;
    font-weight: 720;
}

.cms-btn-publish:hover { background: linear-gradient(145deg, #19ad54, #11873f); box-shadow: 0 15px 30px rgba(22, 163, 74, .28); }
.cms-btn-publish:disabled { cursor: wait; opacity: .75; transform: none; }
/* Stats and dashboard */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.stat-card {
    display: flex;
    min-height: 124px;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border: 1px solid rgba(231, 236, 244, .9);
    border-radius: var(--cms-radius);
    background: var(--cms-card);
    box-shadow: var(--cms-shadow);
}

.stat-icon { display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; border-radius: 13px; }
.stat-icon .icon { width: 21px; height: 21px; stroke-width: 2; }
.stat-icon.is-blue { background: #edf4ff; color: #3272e8; }
.stat-icon.is-green { background: #eaf8ef; color: #20a15a; }
.stat-icon.is-orange { background: #fff4e6; color: #dc8a20; }
.stat-icon.is-purple { background: #f2eeff; color: #7b5ad3; }
.stat-card > div { display: flex; min-width: 0; flex-direction: column; }
.stat-card p { margin: 0; color: #738198; font-size: 12px; font-weight: 600; }
.stat-card strong { margin-top: 5px; color: #1c2a42; font-size: 26px; font-weight: 760; letter-spacing: -.7px; line-height: 1.15; }
.stat-card small { margin-top: 5px; color: #9ba7b8; font-size: 10.5px; }
.stat-card small.trend-up { color: #2a9c5a; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr); gap: 18px; align-items: start; }

.panel-card { border: 1px solid rgba(231, 236, 244, .92); border-radius: var(--cms-radius); background: var(--cms-card); box-shadow: var(--cms-shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; }
.panel-head .eyebrow { margin-bottom: 4px; }
.panel-head h2 { margin: 0; color: #29374d; font-size: 16px; font-weight: 720; letter-spacing: -.25px; }
.panel-hint { color: #9ca8b9; font-size: 10.5px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: #4d78cc; font-size: 11.5px; font-weight: 650; }
.text-link .icon { width: 14px; height: 14px; transition: transform .18s ease; }
.text-link:hover .icon { transform: translateX(2px); }

.recent-list { padding: 0 12px 12px; }
.recent-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 12px; transition: background .18s ease; }
.recent-item:hover { background: #f7faff; }
.recent-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.recent-copy strong { overflow: hidden; color: #34435b; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.recent-copy small { margin-top: 3px; color: #9da9ba; font-size: 10.5px; }
.recent-action { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: #b7c1cf; }
.recent-action .icon { width: 14px; height: 14px; }
.side-stack { display: grid; gap: 16px; }
.quick-card { padding-bottom: 9px; }
.quick-link { display: flex; align-items: center; gap: 12px; margin: 0 10px; padding: 11px 12px; border-radius: 12px; transition: background .18s ease; }
.quick-link:hover { background: #f7faff; }
.quick-icon { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 10px; }
.quick-icon .icon { width: 17px; height: 17px; }
.quick-icon.is-blue { background: #edf4ff; color: #3474e8; }
.quick-icon.is-green { background: #eaf8ef; color: #1fa159; }
.quick-icon.is-purple { background: #f2eeff; color: #7c5bd3; }
.quick-link > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.quick-link strong { color: #3c4a61; font-size: 12px; font-weight: 650; }
.quick-link small { margin-top: 2px; color: #a0abba; font-size: 10px; }
.quick-arrow { width: 14px; height: 14px; color: #bec7d3; }

.tip-card { display: flex; align-items: flex-start; gap: 12px; padding: 17px 18px; border: 1px solid #dcebd8; border-radius: var(--cms-radius); background: linear-gradient(145deg, #f5fbf3, #fbfdf9); }
.tip-mark { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 10px; background: #e4f5dc; color: #3b9453; }
.tip-mark .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.tip-card strong { display: block; color: #3f5f46; font-size: 12px; }
.tip-card p { margin: 4px 0 0; color: #75907a; font-size: 10.5px; line-height: 1.65; }

/* Lists and tables */
.list-card { overflow: hidden; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid #f0f3f7; }
.list-search { position: relative; display: flex; width: min(390px, 52vw); align-items: center; }
.list-search > .icon { position: absolute; left: 13px; width: 16px; height: 16px; color: #94a2b6; pointer-events: none; }

.list-search input {
    width: 100%;
    height: 40px;
    padding: 0 73px 0 39px;
    border: 1px solid #e5ebf3;
    border-radius: 11px;
    outline: 0;
    background: #f8fafc;
    color: #36465f;
    font-size: 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.list-search input:focus { border-color: #c4d6f7; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .07); }
.list-search button { position: absolute; top: 5px; right: 5px; height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: #fff; color: #61738d; font-size: 11px; font-weight: 650; }
.list-search button:hover { color: var(--cms-primary); }
.toolbar-meta { display: inline-flex; align-items: center; gap: 7px; color: #95a2b4; font-size: 10.5px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #27b368; box-shadow: 0 0 0 4px rgba(39, 179, 104, .1); }

.cms-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.cms-table th { padding: 13px 20px; border: 0; border-bottom: 1px solid #edf1f6; background: #fafbfd; color: #8c99ab; font-size: 10px; font-weight: 700; letter-spacing: .45px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cms-table td { padding: 14px 20px; border: 0; border-bottom: 1px solid #f1f4f8; color: #526176; font-size: 12px; vertical-align: middle; }
.cms-table tbody tr { transition: background .16s ease; }
.cms-table tbody tr:hover { background: #f6f9ff; }
.cms-table tbody tr:last-child td { border-bottom: 0; }
.cms-table .align-right { text-align: right; }

.content-cell { display: flex; min-width: 250px; align-items: center; gap: 13px; }
.content-thumb { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: center; border-radius: 11px; background: var(--thumb-bg, #eef4ff); color: var(--thumb-color, #2f6fed); font-size: 16px; font-weight: 750; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.content-copy { display: flex; min-width: 0; flex-direction: column; }
.content-copy a { overflow: hidden; max-width: 470px; color: #34445d; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.content-copy a:hover { color: var(--cms-primary); }
.content-copy small { margin-top: 3px; color: #9ba8b9; font-size: 10.5px; }
.soft-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border-radius: 7px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.soft-badge.is-blue { background: #edf4ff; color: #3a72d4; }
.soft-badge.is-green { background: #eaf8ef; color: #2a9257; }
.date-text { color: #7f8da0; font-size: 11px; white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.row-actions form { margin: 0; }

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5d7fb6;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.action-link .icon { width: 14px; height: 14px; }
.action-link:hover { background: #edf4ff; color: #2d67d4; }
.action-link.is-danger { color: #b7737f; }
.action-link.is-danger:hover { background: #fff0f3; color: #ce4359; }

.status-pill, .optimize-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border-radius: 8px; background: #f2fbf5; color: #39855a; font-size: 10px; font-weight: 650; white-space: nowrap; }
.status-pill > span, .optimize-pill > span { width: 5px; height: 5px; border-radius: 50%; background: #2db46b; }

.cms-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid #f0f3f7; color: #98a5b6; font-size: 10.5px; }
.page-buttons { display: flex; align-items: center; gap: 5px; }
.page-buttons a, .page-ellipsis { display: inline-flex; min-width: 31px; height: 31px; align-items: center; justify-content: center; border: 1px solid #e9edf4; border-radius: 8px; background: #fff; color: #738198; font-size: 10.5px; font-weight: 600; }
.page-buttons a:hover { border-color: #cbd9ef; color: #2f68d5; }
.page-buttons a.is-current { border-color: #2f6fed; background: #2f6fed; color: #fff; box-shadow: 0 5px 12px rgba(47, 111, 237, .2); }
.page-ellipsis { border-color: transparent; background: transparent; }

.empty-state { padding: 54px 20px; text-align: center; }
.empty-icon { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 17px; background: #f3f7fd; color: #8ea4c6; }
.empty-icon .icon { width: 25px; height: 25px; }
.empty-state h3 { margin: 13px 0 0; color: #4e5d73; font-size: 14px; }
.empty-state p { margin: 5px 0 0; color: #9aa7b8; font-size: 11px; }

/* Page decoration cards */
.section-block { display: grid; gap: 13px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px; }
.section-heading h2 { margin: 0; color: #2d3b52; font-size: 17px; font-weight: 720; letter-spacing: -.25px; }
.section-hint { color: #a3afbf; font-size: 10.5px; }
.page-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.page-card {
    display: flex;
    min-height: 94px;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px solid rgba(231, 236, 244, .95);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--cms-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-card:hover { border-color: #d5e1f3; box-shadow: var(--cms-shadow-hover); transform: translateY(-2px); }
.page-card-icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border-radius: 12px; background: #edf4ff; color: #3474e8; }
.page-card-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.page-card-copy strong { overflow: hidden; color: #36465e; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.page-card-copy small { margin-top: 4px; color: #9ca9ba; font-size: 10px; }
.page-card-arrow { color: #bec8d5; }
.page-card-arrow .icon { width: 15px; height: 15px; }
.compact-list { padding: 8px 12px; }
.compact-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; transition: background .18s ease; }
.compact-row:hover { background: #f7faff; }
.compact-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: #f5f7fb; color: #8798b0; }
.compact-icon .icon { width: 16px; height: 16px; }
.compact-row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.compact-row strong { color: #47566d; font-size: 11.5px; }
.compact-row small { margin-top: 2px; color: #a4afbe; font-size: 9.5px; }
.compact-arrow { width: 14px; height: 14px; color: #c0c9d5; }
/* Editor */
.editor-page-head { display: grid; gap: 15px; padding: 2px; }
.back-link { display: inline-flex; width: max-content; align-items: center; gap: 5px; color: #8390a3; font-size: 11px; font-weight: 600; }
.back-link .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.back-link:hover { color: var(--cms-primary); }
.editor-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.editor-heading-row h1 { margin: 0; color: #17243a; font-size: 30px; font-weight: 760; letter-spacing: -.8px; }

.editor-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 17px;
    border: 1px solid #dce8fb;
    border-radius: 13px;
    background: #f6f9ff;
}

.editor-notice-icon { display: inline-flex; width: 33px; height: 33px; flex: 0 0 33px; align-items: center; justify-content: center; border-radius: 10px; background: #e8f1ff; color: #3f73d4; }
.editor-notice strong { display: block; color: #405679; font-size: 11.5px; }
.editor-notice p { margin: 3px 0 0; color: #7d8da5; font-size: 10.5px; }
.editor-form { display: grid; gap: 18px; }

.editor-card {
    padding: 30px 34px 32px;
    border: 1px solid rgba(230, 236, 244, .95);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--cms-shadow);
}

.editor-title-field { padding-bottom: 23px; border-bottom: 1px solid #eef2f7; }
.editor-title-field > label { display: block; margin-bottom: 9px; color: #8d9aac; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }

.editor-title-input {
    width: 100%;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1b2940;
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 760;
    letter-spacing: -1px;
    line-height: 1.28;
}

.editor-title-input::placeholder { color: #c6cfdb; }
.field-hint { margin: 7px 0 0; color: #a6b1c0; font-size: 10px; }
.editor-meta-row { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(170px, .75fr) minmax(160px, .7fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid #eef2f7; }
.editor-meta-field { display: flex; flex-direction: column; gap: 7px; }
.editor-meta-field > span { color: #8e9aac; font-size: 10px; font-weight: 650; }

.editor-meta-field input {
    width: 100%;
    height: 41px;
    padding: 0 12px;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    outline: 0;
    background: #fafbfd;
    color: #536176;
    font-size: 11.5px;
}

.editor-meta-field input:focus { border-color: #bfd2f5; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .06); }
.editor-meta-field.is-static { justify-content: flex-start; padding: 9px 13px; border: 1px solid #edf1f6; border-radius: 10px; background: #fafbfd; gap: 3px; }
.editor-meta-field strong { color: #536176; font-size: 11.5px; font-weight: 650; }
.editor-meta-field strong.status-inline { color: #2b9258; }
.editor-summary-field { padding: 22px 0; border-bottom: 1px solid #eef2f7; }
.editor-summary-field label { display: block; margin-bottom: 9px; color: #45556d; font-size: 12px; font-weight: 700; }
.editor-summary-field label small { color: #a4afbf; font-size: 9.5px; font-weight: 500; }

.editor-summary-field textarea,
.seo-field textarea,
.seo-field input,
.settings-field input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    outline: 0;
    background: #fbfcfe;
    color: #3c4b62;
    font-size: 12px;
    line-height: 1.75;
    resize: vertical;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.editor-summary-field textarea:focus,
.seo-field textarea:focus,
.seo-field input:focus,
.settings-field input:focus {
    border-color: #bfd2f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .06);
}

.editor-body-field { padding-top: 23px; }
.editor-body-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.editor-body-label label { color: #45556d; font-size: 12px; font-weight: 700; }
.editor-body-label span { color: #a2aebe; font-size: 9.5px; }
.editor-paragraphs { display: grid; gap: 11px; }
.editor-paragraph { position: relative; }

.editor-paragraph textarea {
    width: 100%;
    min-height: 130px;
    padding: 14px 15px;
    border: 1px solid #e7ecf3;
    border-radius: 12px;
    outline: 0;
    background: #fcfdff;
    color: #3e4d64;
    font-size: 12.5px;
    line-height: 1.85;
    resize: vertical;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.editor-paragraph textarea:focus { border-color: #bfd2f5; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .055); }
.paragraph-index { position: absolute; right: 10px; bottom: 8px; color: #c0c9d5; font-size: 8.5px; pointer-events: none; }
.editor-action-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 7px 2px 0; }

/* SEO */
.seo-table td:nth-child(2) { width: 25%; }
.seo-table td:nth-child(3) { width: 31%; }
.seo-cell { display: flex; min-width: 160px; flex-direction: column; }
.seo-cell strong { overflow: hidden; max-width: 280px; color: #46556c; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.seo-cell span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #68778d; font-size: 10.5px; line-height: 1.55; }
.seo-cell small { margin-top: 3px; color: #a4afbf; font-size: 9px; }
.optimize-pill.is-ready { background: #eef9f2; color: #2e8e56; }
.optimize-pill.is-todo { background: #fff7ec; color: #b57a2a; }
.optimize-pill.is-todo > span { background: #e29a39; }
.seo-editor-intro { margin: 0; color: #7d8ba0; font-size: 11.5px; }
.seo-editor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 18px; align-items: start; }
.seo-form-card { padding-bottom: 4px; }
.seo-field { padding: 0 22px 20px; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.field-label-row label { color: #45556d; font-size: 12px; font-weight: 700; }
.char-counter { color: #9eabbd; font-size: 9.5px; }
.seo-field input { height: 47px; font-size: 13px; }
.seo-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 17px 22px; border-top: 1px solid #eff2f7; }
.seo-side { display: grid; gap: 16px; }
.search-snippet-card { padding-bottom: 20px; }

.search-snippet {
    margin: 0 20px;
    padding: 17px;
    border: 1px solid #e9edf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(30, 48, 78, .04);
}

.snippet-brand { display: flex; align-items: center; gap: 9px; }
.snippet-logo { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #e9f1ff; color: #2f68d5; font-size: 11px; font-weight: 750; }
.snippet-brand > span:last-child { display: flex; flex-direction: column; }
.snippet-brand strong { color: #3e4d64; font-size: 10.5px; }
.snippet-brand small { color: #8f9cad; font-size: 8.5px; }
.search-snippet h3 { margin: 12px 0 0; color: #2856a7; font-size: 15px; font-weight: 500; line-height: 1.45; }
.search-snippet p { margin: 7px 0 0; color: #65758a; font-size: 10.5px; line-height: 1.7; }
.seo-tip-card { border-color: #dbe5f6; background: linear-gradient(145deg, #f6f9ff, #fbfcff); }
.seo-tip-card .tip-mark { background: #e8f1ff; color: #3d71d3; }
.seo-tip-card strong { color: #49617f; }
.seo-tip-card p { color: #7d8da4; }
/* Analytics */
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .78fr); gap: 18px; align-items: start; }
.traffic-card { overflow: hidden; }
.traffic-chart { width: 100%; height: 352px; padding: 0 8px 8px; }
.analytics-side { display: grid; gap: 16px; }
.source-card, .popular-card { padding-bottom: 8px; }
.source-list { display: grid; gap: 15px; padding: 4px 22px 18px; }
.source-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #65748a; font-size: 10.5px; }
.source-label > span { display: inline-flex; align-items: center; gap: 7px; }
.source-label strong { color: #4f5f75; font-size: 10.5px; }
.source-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.source-dot.is-wechat { background: #22c55e; }
.source-dot.is-direct { background: #3b82f6; }
.source-dot.is-search { background: #f59e0b; }
.source-dot.is-other { background: #94a3b8; }
.source-track { overflow: hidden; height: 6px; border-radius: 10px; background: #f0f3f8; }
.source-track span { display: block; height: 100%; border-radius: inherit; background: var(--bar, #3b82f6); }
.popular-list { display: grid; gap: 2px; padding: 2px 14px 12px; }
.popular-item { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 9px; }
.popular-item:hover { background: #f8faff; }
.rank-number { color: #a6b3c4; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.popular-item > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.popular-item strong { overflow: hidden; color: #4b5a71; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.popular-item small { margin-top: 2px; color: #a3afbf; font-size: 8.5px; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .78fr); gap: 18px; align-items: start; }
.security-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: #eef9f2; color: #378357; font-size: 9.5px; font-weight: 650; }
.security-badge .icon { width: 13px; height: 13px; }
.settings-form { display: grid; gap: 17px; padding: 4px 22px 23px; }
.settings-field { display: grid; gap: 7px; }
.settings-field > span { color: #4b5b72; font-size: 11px; font-weight: 650; }
.settings-field input { height: 45px; }
.settings-actions { display: flex; justify-content: flex-end; padding-top: 3px; }
.settings-side { display: grid; gap: 16px; }
.info-list { display: grid; gap: 0; margin: 0; padding: 0 22px 18px; }
.info-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid #f0f3f7; }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { color: #8c99ab; font-size: 10px; font-weight: 500; }
.info-list dd { margin: 0; color: #4d5d74; font-size: 10.5px; font-weight: 600; text-align: right; }
.inline-status { display: inline-flex; align-items: center; gap: 6px; color: #348657; }
.inline-status > span { width: 5px; height: 5px; border-radius: 50%; background: #2db46b; }
.settings-tip-card { border-color: #dbe5f6; background: linear-gradient(145deg, #f6f9ff, #fbfcff); }
.settings-tip-card .tip-mark { background: #e8f1ff; color: #3d71d3; }
.settings-tip-card strong { color: #49617f; }
.settings-tip-card p { color: #7d8da4; }

/* Toast */
.cms-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    max-width: min(360px, calc(100vw - 40px));
    padding: 12px 16px;
    border: 1px solid #dfe7f2;
    border-radius: 12px;
    background: #fff;
    color: #506077;
    box-shadow: 0 18px 44px rgba(23, 32, 51, .16);
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}

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

/* Login */
.login-page {
    display: grid;
    min-height: 100vh;
    margin: 0;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(ellipse at 18% 12%, rgba(58, 124, 245, .18), transparent 42%),
        radial-gradient(ellipse at 88% 84%, rgba(44, 181, 113, .13), transparent 38%),
        #eef3fa;
    color: var(--cms-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-shell { width: 100%; max-width: 430px; }

.login-card {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 30px 70px rgba(33, 52, 84, .15);
    backdrop-filter: blur(18px);
}

.login-brand { display: flex; align-items: center; gap: 13px; padding-bottom: 22px; border-bottom: 1px solid #edf1f7; }

.login-brand-mark {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #4f8cff, #245fe1);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 111, 237, .24);
    font-size: 20px;
    font-weight: 750;
}

.login-brand h1 { margin: 0; color: #1c2a42; font-size: 21px; font-weight: 760; letter-spacing: -.5px; }
.login-brand p { margin: 3px 0 0; color: #8e9caf; font-size: 10.5px; }
.login-form { display: grid; gap: 16px; padding-top: 23px; }
.login-field { display: grid; gap: 7px; }
.login-field span { color: #506078; font-size: 11px; font-weight: 650; }

.login-field input {
    width: 100%;
    height: 47px;
    padding: 0 14px;
    border: 1px solid #e2e8f1;
    border-radius: 11px;
    outline: 0;
    background: #f9fbfd;
    color: #34445b;
    font-size: 13px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.login-field input:focus { border-color: #bcd0f3; background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .07); }

.login-submit {
    height: 48px;
    margin-top: 3px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(145deg, #3d7bf0, #2b66e1);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 111, 237, .22);
    font-size: 13px;
    font-weight: 700;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-submit:hover { background: linear-gradient(145deg, #3474eb, #235bd3); box-shadow: 0 13px 26px rgba(47, 111, 237, .27); transform: translateY(-1px); }
.login-alert { margin-top: 18px; padding: 10px 12px; border: 1px solid #f1d4da; border-radius: 9px; background: #fff6f7; color: #b84255; font-size: 11px; }
.login-footnote { margin: 20px 0 0; color: #a0acbd; font-size: 9.5px; text-align: center; }

/* Responsive */
@media (max-width: 1280px) {
    :root { --cms-sidebar: 238px; }
    .cms-content { padding-right: 28px; padding-left: 28px; }
    .cms-topbar { padding: 0 28px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-copy a { max-width: 360px; }
}

@media (max-width: 1100px) {
    .dashboard-grid, .analytics-grid, .settings-grid, .seo-editor-grid { grid-template-columns: 1fr; }
    .side-stack, .analytics-side, .settings-side, .seo-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-search { display: none; }
    .topbar-actions { margin-left: auto; }
}

@media (max-width: 860px) {
    .cms-sidebar { transform: translateX(-105%); transition: transform .24s ease; box-shadow: 18px 0 48px rgba(26, 42, 68, .12); }
    body.sidebar-open .cms-sidebar { transform: translateX(0); }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 45;
        display: block;
        visibility: hidden;
        background: rgba(21, 34, 55, .3);
        opacity: 0;
        transition: opacity .24s ease, visibility .24s ease;
    }

    body.sidebar-open .sidebar-backdrop { visibility: visible; opacity: 1; }
    .cms-main { margin-left: 0; }
    .topbar-menu { display: inline-flex; }
    .cms-topbar { gap: 14px; padding: 0 18px; }
    .topbar-breadcrumb { min-width: 0; flex: 1; }
    .user-chip > span:last-child { display: none; }
    .cms-content { padding: 22px 18px 38px; }
    .page-header, .page-hero { align-items: flex-start; flex-direction: column; }
    .editor-card { padding: 24px 20px 26px; }
    .editor-meta-row { grid-template-columns: 1fr; }
    .page-card-grid, .side-stack, .analytics-side, .settings-side, .seo-side { grid-template-columns: 1fr; }
    .cms-table { min-width: 780px; }
    .list-toolbar { align-items: stretch; flex-direction: column; }
    .list-search { width: 100%; }
    .editor-heading-row h1 { font-size: 26px; }
    .editor-action-bar { flex-direction: column-reverse; }
    .editor-action-bar .cms-btn { width: 100%; }
}

@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
    .cms-topbar { height: 64px; }
    .topbar-breadcrumb a, .topbar-breadcrumb > span { display: none; }
    .page-header h1, .page-hero h1 { font-size: 26px; }
    .editor-title-input { font-size: 26px; }
    .cms-pagination { align-items: flex-start; flex-direction: column; }
    .login-card { padding: 26px 22px; }
}

/* ============================================================
   Rich content editor v1 (2026-10-19)
   News uses one real body area; single pages use the same editor.
   ============================================================ */

.rich-cover-field {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid rgba(225, 232, 243, .92);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(247, 250, 255, .58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 24px rgba(40, 54, 82, .04);
}

.rich-cover-preview {
    display: flex;
    width: 180px;
    height: 112px;
    flex: 0 0 180px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(157, 173, 198, .5);
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    color: #8d9bb0;
    text-align: center;
}

.rich-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.rich-cover-preview span { font-size: 12px; font-weight: 650; line-height: 1.5; }
.rich-cover-preview small { color: #aab4c4; font-size: 10px; font-weight: 500; }
.rich-cover-copy { min-width: 0; flex: 1; }
.rich-cover-copy > label { display: block; color: #39485f; font-size: 13px; font-weight: 720; }
.rich-cover-copy > label small { color: #9aa7b9; font-size: 10px; font-weight: 500; }
.rich-cover-copy > p { margin: 5px 0 13px; color: #8593a8; font-size: 11px; line-height: 1.6; }
.rich-cover-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rich-cover-actions small { color: #8c9ab0; font-size: 10px; }
.rich-cover-actions small.is-error { color: #c44949; }

.rich-editor-field { padding-top: 22px; border-top: 1px solid #eef2f7; }

.rich-editor-shell {
    overflow: hidden;
    border: 1px solid rgba(219, 228, 241, .96);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        0 12px 34px rgba(38, 51, 78, .055);
}

.rich-editor-shell .ql-toolbar.ql-snow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(225, 232, 243, .94);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 254, .78));
    font-family: inherit;
}

.rich-editor-shell .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.rich-editor-shell .ql-toolbar.ql-snow button,
.rich-editor-shell .ql-toolbar.ql-snow .ql-picker-label { border-radius: 7px; }
.rich-editor-shell .ql-toolbar.ql-snow button:hover,
.rich-editor-shell .ql-toolbar.ql-snow button.ql-active { background: rgba(123, 97, 255, .1); }

.rich-editor-shell .ql-container.ql-snow {
    min-height: 390px;
    border: 0;
    background: rgba(255, 255, 255, .56);
    font-family: inherit;
    font-size: 14px;
}

.rich-editor-shell .ql-editor {
    min-height: 390px;
    padding: 24px 26px;
    color: #34435a;
    line-height: 1.9;
}

.rich-editor-shell .ql-editor.ql-blank::before {
    left: 26px;
    color: #a8b3c2;
    font-style: normal;
}

.rich-editor-shell .ql-editor p { margin: 0 0 .8em; }
.rich-editor-shell .ql-editor img { max-width: 100%; height: auto; border-radius: 10px; }
.rich-editor-shell .ql-editor blockquote { border-left: 3px solid #8d75ef; color: #66738a; }

.rich-editor-status {
    padding: 9px 14px;
    border-top: 1px solid rgba(231, 236, 244, .82);
    background: rgba(249, 251, 255, .7);
    color: #8d9ab0;
    font-size: 10px;
}

.rich-editor-status.is-error { color: #c44949; }

.editor-page-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eef2f7;
}

.editor-page-summary h2 { margin: 0; color: #1b2940; font-size: 28px; font-weight: 760; letter-spacing: -.8px; }
.editor-page-summary > p { max-width: 380px; margin: 0; color: #8795a9; font-size: 11px; line-height: 1.65; text-align: right; }

.page-compose-empty {
    display: flex;
    width: 100%;
    max-width: 880px;
    align-items: flex-start;
    gap: 18px;
    margin: 0 auto;
    padding: 28px 30px;
}

.page-compose-empty h2 { margin: 2px 0 6px; color: #26364e; font-size: 20px; }
.page-compose-empty p { margin: 0; color: #8492a7; font-size: 12px; line-height: 1.75; }

@media (max-width: 680px) {
    .rich-cover-field { align-items: flex-start; flex-direction: column; }
    .rich-cover-preview { width: 100%; flex-basis: auto; }
    .editor-page-summary { align-items: flex-start; flex-direction: column; }
    .editor-page-summary > p { text-align: left; }
    .rich-editor-shell .ql-editor { padding: 20px; }
}

/* ============================================================
   UI1 reference theme: warm aurora + liquid glass
   Palette sampled from UI/ui1.jpg:
   purple #7979ed, lilac #b5b5eb, mint #8ccac4,
   cyan #a9c4e4, orange #edaf7d, cold blue #3f5262.
   ============================================================ */
:root {
    --cms-bg: #e2dfe1;
    --cms-card: rgba(255, 255, 255, .34);
    --cms-text: #1c1d24;
    --cms-text-soft: #5e626e;
    --cms-muted: #7c808c;
    --cms-line: rgba(255, 255, 255, .46);
    --cms-line-strong: rgba(255, 255, 255, .66);
    --cms-primary: #7979ed;
    --cms-primary-dark: #6363df;
    --cms-primary-soft: rgba(255, 255, 255, .44);
    --cms-green: #6ebdb6;
    --cms-green-dark: #4b9e98;
    --cms-green-soft: rgba(140, 202, 196, .20);
    --cms-orange: #edaf7d;
    --cms-purple: #9a99e8;
    --cms-danger: #d86f8b;
    --cms-shadow: inset 0 1px 1px rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 18px 46px rgba(41, 52, 90, .13);
    --cms-shadow-hover: inset 0 1px 1px rgba(255, 255, 255, 1), 0 24px 56px rgba(41, 52, 90, .17);
    --cms-radius: 24px;
    --cms-radius-sm: 15px;
    --glass-bg: rgba(255, 255, 255, .34);
    --glass-bg-strong: rgba(255, 255, 255, .52);
    --glass-bg-soft: rgba(255, 255, 255, .22);
    --glass-border: rgba(255, 255, 255, .64);
    --glass-shadow: inset 0 1px 1px rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 18px 46px rgba(41, 52, 90, .13);
    --glass-blur: blur(32px) saturate(165%);
    --accent-purple: #7979ed;
    --accent-lilac: #b5b5eb;
    --accent-mint: #8ccac4;
    --accent-cyan: #a9c4e4;
    --accent-orange: #edaf7d;
    --accent-pink: #e8a8cc;
}

html {
    background: #ddd8da !important;
}

body.cms-body,
.login-page {
    background-color: #ddd8da !important;
    background-image:
        radial-gradient(ellipse 62% 55% at 2% 0%, rgba(249, 235, 222, .98) 0%, rgba(244, 226, 214, .55) 30%, transparent 62%),
        radial-gradient(ellipse 58% 62% at 100% 0%, rgba(30, 48, 66, .84) 0%, rgba(46, 66, 86, .55) 24%, transparent 58%),
        radial-gradient(ellipse 60% 58% at 100% 100%, rgba(143, 183, 214, .72) 0%, rgba(154, 168, 232, .40) 36%, transparent 66%),
        radial-gradient(ellipse 50% 52% at 4% 96%, rgba(54, 60, 78, .62) 0%, rgba(122, 118, 164, .38) 40%, transparent 68%),
        radial-gradient(ellipse 42% 34% at 20% 62%, rgba(232, 168, 204, .40) 0%, transparent 68%),
        radial-gradient(ellipse 38% 40% at 78% 58%, rgba(140, 202, 196, .34) 0%, transparent 66%),
        radial-gradient(ellipse 34% 28% at 54% 80%, rgba(237, 175, 125, .28) 0%, transparent 64%),
        radial-gradient(ellipse 46% 38% at 45% 18%, rgba(255, 255, 255, .34) 0%, transparent 70%),
        linear-gradient(135deg, #efe3da 0%, #e9e3e8 32%, #e6ebf2 62%, #dfeaef 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flow-root;
    color: var(--cms-text) !important;
    text-shadow: none !important;
}

body.cms-body::before {
    background:
        radial-gradient(ellipse 26% 22% at 74% 34%, rgba(255, 255, 255, .34), transparent 72%),
        radial-gradient(ellipse 20% 18% at 12% 70%, rgba(255, 255, 255, .22), transparent 74%) !important;
    opacity: .9 !important;
}

.cms-sidebar,
.cms-topbar,
.cms-content,
.page-header,
.page-hero,
.editor-page-head,
.stat-card,
.panel-card,
.page-card,
.editor-card,
.tip-card,
.list-card,
.seo-card,
.traffic-card,
.source-card,
.popular-card,
.settings-card,
.site-info-card,
.seo-form-card,
.search-snippet-card,
.editor-notice,
.editor-media-card,
.login-card,
.cms-flash,
.cms-toast {
    border: 1px solid rgba(255, 255, 255, .64) !important;
    background: rgba(255, 255, 255, .30) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .96),
        inset 0 -1px 0 rgba(255, 255, 255, .22),
        0 18px 46px rgba(41, 52, 90, .13) !important;
    -webkit-backdrop-filter: blur(34px) saturate(172%) !important;
    backdrop-filter: blur(34px) saturate(172%) !important;
    border-radius: 24px !important;
}

.cms-sidebar {
    background:
        radial-gradient(ellipse 70% 34% at 12% 12%, rgba(232, 168, 204, .16), transparent 70%),
        radial-gradient(ellipse 64% 40% at 90% 92%, rgba(140, 202, 196, .20), transparent 72%),
        linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(244, 242, 250, .34) 42%, rgba(235, 246, 247, .44) 100%) !important;
    border-color: rgba(255, 255, 255, .78) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .98),
        inset 0 -1px 0 rgba(255, 255, 255, .24),
        0 24px 60px rgba(48, 58, 90, .16),
        0 4px 16px rgba(48, 58, 90, .06) !important;
    border-radius: 30px !important;
}

.cms-sidebar::before {
    background: radial-gradient(circle, rgba(181, 181, 235, .34), transparent 70%) !important;
}

.cms-sidebar::after {
    background: radial-gradient(circle, rgba(140, 202, 196, .24), transparent 70%) !important;
}

.cms-topbar {
    background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34) 58%, rgba(244, 248, 250, .48)) !important;
    border-color: rgba(255, 255, 255, .78) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .98),
        0 14px 36px rgba(41, 52, 90, .12) !important;
    border-radius: 24px !important;
}

.cms-content {
    background:
        radial-gradient(ellipse 46% 36% at 8% 8%, rgba(232, 168, 204, .24), transparent 62%),
        radial-gradient(ellipse 42% 38% at 94% 12%, rgba(169, 196, 228, .22), transparent 64%),
        radial-gradient(ellipse 42% 42% at 94% 92%, rgba(140, 202, 196, .26), transparent 64%),
        radial-gradient(ellipse 34% 30% at 56% 84%, rgba(237, 175, 125, .14), transparent 64%),
        radial-gradient(ellipse 36% 32% at 28% 88%, rgba(181, 181, 235, .20), transparent 64%),
        linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(238, 242, 248, .15)) !important;
    border-color: rgba(255, 255, 255, .60) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .94),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 26px 68px rgba(41, 52, 90, .16),
        0 3px 10px rgba(41, 52, 90, .05) !important;
    border-radius: 30px !important;
}

.brand-mark,
.login-brand-mark {
    border: 1px solid rgba(255, 255, 255, .76) !important;
    background: linear-gradient(145deg, #a9a8f5 0%, #7979ed 52%, #7fc8df 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .95),
        0 9px 22px rgba(91, 97, 218, .24) !important;
}

.cms-brand strong,
.topbar-breadcrumb strong {
    color: #1c1d24 !important;
}

.nav-item {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #454854 !important;
    text-shadow: none !important;
}

.nav-item:hover {
    border-color: rgba(255, 255, 255, .70) !important;
    background: rgba(255, 255, 255, .40) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .94), 0 5px 14px rgba(48, 58, 90, .06) !important;
}

.nav-item.is-active {
    border-color: rgba(255, 255, 255, .86) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .52) 56%, rgba(255, 255, 255, .66) 100%) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 1),
        inset 0 -8px 14px rgba(121, 121, 237, .10),
        inset 0 0 0 1px rgba(255, 255, 255, .28),
        0 9px 22px rgba(48, 58, 90, .10) !important;
    color: #292a3d !important;
    text-shadow: none !important;
}

.nav-item.is-active::before {
    display: none !important;
}

.nav-item .icon {
    color: #707684 !important;
}

.nav-item.is-active .icon {
    color: var(--accent-purple) !important;
    filter: drop-shadow(0 2px 3px rgba(121, 121, 237, .24)) !important;
}

.cms-btn,
.login-submit,
.topbar-search button,
.list-search button {
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 999px !important;
    text-shadow: 0 1px 1px rgba(42, 39, 98, .16) !important;
}

.cms-btn-primary,
.login-submit,
.topbar-search button,
.list-search button {
    background: linear-gradient(180deg, #a09ef7 0%, #7776ec 48%, #6062da 100%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .82),
        inset 0 10px 16px rgba(255, 255, 255, .16),
        inset 0 -12px 20px rgba(62, 62, 185, .24),
        0 12px 28px rgba(91, 97, 218, .34),
        0 0 30px rgba(121, 121, 237, .22) !important;
}

.cms-btn-publish {
    background: linear-gradient(160deg, #a29ff8 0%, #7f7bea 36%, #b184e3 68%, #e29ac4 100%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .86),
        inset 0 10px 18px rgba(255, 255, 255, .18),
        inset 0 -12px 20px rgba(96, 65, 150, .18),
        0 13px 30px rgba(150, 113, 207, .34),
        0 0 32px rgba(228, 166, 201, .24) !important;
}

.cms-btn-primary:hover,
.cms-btn-publish:hover,
.login-submit:hover,
.topbar-search button:hover,
.list-search button:hover {
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .94),
        inset 0 10px 18px rgba(255, 255, 255, .22),
        0 16px 36px rgba(91, 97, 218, .42),
        0 0 44px rgba(168, 156, 240, .32) !important;
    filter: saturate(112%) brightness(1.05);
    transform: translateY(-1px) !important;
}

.cms-btn-secondary {
    border-color: rgba(255, 255, 255, .82) !important;
    background: linear-gradient(180deg, rgba(232, 248, 245, .88), rgba(151, 207, 201, .76)) !important;
    color: #244944 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .96),
        inset 0 8px 14px rgba(255, 255, 255, .22),
        0 8px 20px rgba(73, 151, 144, .18) !important;
}

.cms-btn-ghost {
    border-color: rgba(255, 255, 255, .66) !important;
    background: rgba(255, 255, 255, .34) !important;
    color: #555968 !important;
}

.cms-btn-secondary:hover,
.cms-btn-ghost:hover {
    border-color: rgba(255, 255, 255, .88) !important;
    background: rgba(255, 255, 255, .52) !important;
    color: #4b438b !important;
}

.topbar-search input,
.list-search input,
.editor-title-input,
.editor-meta-field input,
.editor-summary-field textarea,
.editor-paragraph textarea,
.seo-field input,
.seo-field textarea,
.settings-field input,
.login-field input {
    border: 1px solid rgba(255, 255, 255, .74) !important;
    background: rgba(255, 255, 255, .58) !important;
    box-shadow:
        inset 0 2px 5px rgba(67, 64, 110, .06),
        inset 0 1px 1px rgba(255, 255, 255, .96) !important;
    color: #232431 !important;
}

.topbar-search input::placeholder,
.list-search input::placeholder,
.editor-title-input::placeholder,
.editor-summary-field textarea::placeholder,
.editor-paragraph textarea::placeholder,
.seo-field input::placeholder,
.settings-field input::placeholder,
.login-field input::placeholder {
    color: #9294a0 !important;
}

.topbar-search input:focus,
.list-search input:focus,
.editor-title-input:focus,
.editor-meta-field input:focus,
.editor-summary-field textarea:focus,
.editor-paragraph textarea:focus,
.seo-field input:focus,
.seo-field textarea:focus,
.settings-field input:focus,
.login-field input:focus {
    border-color: rgba(121, 121, 237, .62) !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow:
        0 0 0 4px rgba(121, 121, 237, .10),
        inset 0 1px 2px rgba(255, 255, 255, .98) !important;
}

.cms-table thead {
    background: rgba(255, 255, 255, .30) !important;
}

.cms-table th,
.cms-table td {
    border-color: rgba(255, 255, 255, .34) !important;
}

.cms-table tbody tr:hover,
.cms-table tbody tr:hover .content-copy a {
    background: rgba(255, 255, 255, .46) !important;
}

.soft-badge,
.date-range-chip,
.page-buttons a,
.page-ellipsis,
.topbar-menu,
.icon-button {
    border-color: rgba(255, 255, 255, .74) !important;
    background: rgba(255, 255, 255, .40) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .94), 0 4px 12px rgba(48, 58, 90, .05) !important;
}

.page-buttons a.is-current {
    border-color: rgba(255, 255, 255, .74) !important;
    background: linear-gradient(180deg, rgba(173, 172, 247, .96), rgba(121, 121, 237, .96)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .70), 0 6px 16px rgba(91, 97, 218, .24) !important;
}

.cms-pagination {
    border-top-color: rgba(255, 255, 255, .38) !important;
}

.stat-icon.is-blue {
    background: rgba(121, 121, 237, .16) !important;
    color: #6262d9 !important;
}

.stat-icon.is-green {
    background: rgba(140, 202, 196, .22) !important;
    color: #438f89 !important;
}

.stat-icon.is-orange {
    background: rgba(237, 175, 125, .22) !important;
    color: #b0713e !important;
}

.stat-icon.is-purple {
    background: rgba(181, 181, 235, .26) !important;
    color: #7472c9 !important;
}

.action-link {
    color: #6463bf !important;
}

.action-link.is-danger {
    color: #b45d74 !important;
}

.cms-flash {
    color: #386c61 !important;
}

.cms-flash.is-error {
    color: #9f495d !important;
}

.cms-flash.is-warning {
    color: #8d642b !important;
}

.login-page {
    background-color: #e7e4e3 !important;
}

.login-card {
    background: rgba(255, 255, 255, .40) !important;
    border-color: rgba(255, 255, 255, .60) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .90), 0 8px 32px rgba(31, 38, 135, .10) !important;
}

.search-snippet {
    border-color: rgba(255, 255, 255, .54) !important;
    background: rgba(255, 255, 255, .30) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .86) !important;
}

/* Analytics note */
.analytics-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -6px 2px 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 13px;
    background: rgba(255, 255, 255, .28);
    color: #626675;
    font-size: 11px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}

.analytics-note .icon {
    width: 15px;
    height: 15px;
    color: var(--accent-purple);
}

.analytics-note strong {
    margin-left: auto;
    color: #3c3d49;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.empty-state.compact {
    padding: 24px 12px;
}

/* Page image manager */
.editor-media-card {
    margin-bottom: 20px;
    padding: 22px 22px 20px;
    background: rgba(255, 255, 255, .32) !important;
}

.editor-media-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.editor-media-head h2 {
    margin: 5px 0 0;
    color: #252632;
    font-size: 17px;
    font-weight: 720;
    letter-spacing: -.25px;
}

.editor-media-head p:not(.eyebrow) {
    margin: 5px 0 0;
    color: #727581;
    font-size: 11px;
}

.editor-media-grid {
    display: flex;
    gap: 12px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(121, 121, 237, .30) transparent;
}

.editor-media-grid::-webkit-scrollbar {
    height: 6px;
}

.editor-media-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(121, 121, 237, .28);
}

.editor-media-item {
    display: flex;
    min-width: 0;
    flex: 0 0 152px;
    width: 152px;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 14px;
    background: rgba(255, 255, 255, .30);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .92), 0 6px 16px rgba(48, 58, 90, .05);
}

.editor-media-preview {
    display: flex;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(232, 237, 249, .20));
    color: #7b7f8c;
    font-size: 11px;
}

.editor-media-preview.is-missing {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, .26) 8px, rgba(196, 199, 218, .16) 8px, rgba(196, 199, 218, .16) 16px);
}

.editor-media-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-media-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.editor-media-meta strong,
.editor-media-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-media-meta strong {
    color: #353743;
    font-size: 10px;
    font-weight: 680;
}

.editor-media-meta small {
    color: #818491;
    font-size: 8px;
}

.editor-media-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.editor-media-file {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
}

.editor-media-file::file-selector-button {
    width: 100%;
    margin: 0;
    padding: 5px 6px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(173, 172, 247, .96), rgba(121, 121, 237, .94));
    color: #fff;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.editor-media-submit {
    width: 100%;
    justify-content: center;
    padding: 6px 8px;
    font-size: 9px;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .cms-sidebar,
    .cms-topbar,
    .cms-content,
    .page-header,
    .page-hero,
    .editor-page-head,
    .stat-card,
    .panel-card,
    .page-card,
    .editor-card,
    .tip-card,
    .settings-card,
    .seo-form-card,
    .editor-notice,
    .editor-media-card,
    .login-card {
        background: rgba(255, 255, 255, .88) !important;
    }
}

@media (max-width: 720px) {
    .editor-media-card {
        padding: 18px 16px;
    }

    .editor-media-head {
        flex-direction: column;
        gap: 8px;
    }

    .editor-media-grid {
        gap: 9px;
    }

    .editor-media-item {
        flex-basis: 138px;
        width: 138px;
    }

    .analytics-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .analytics-note strong {
        width: 100%;
        margin-left: 24px;
    }
}

/* Floating shell geometry for the reference's thick-glass frame */
.cms-sidebar {
    top: 16px;
    bottom: 16px;
    left: 16px;
    width: 248px;
    overflow: hidden;
    padding: 22px 16px 18px;
}

.cms-main {
    margin-left: 280px;
}

.cms-topbar {
    top: 12px;
    height: 64px;
    margin: 16px 20px 0 0;
    padding: 0 22px;
}

.cms-content {
    width: calc(100% - 40px);
    max-width: 1540px;
    margin: 18px auto 22px;
    padding: 24px;
}

@media (max-width: 1280px) {
    .cms-sidebar {
        width: 232px;
    }

    .cms-main {
        margin-left: 258px;
    }

    .cms-topbar {
        margin-right: 16px;
        padding: 0 18px;
    }

    .cms-content {
        width: calc(100% - 32px);
        padding: 20px 18px;
    }
}

@media (max-width: 860px) {
    .cms-sidebar {
        top: 12px;
        bottom: 12px;
        left: 12px;
        width: 248px;
        transform: translateX(-112%);
        transition: transform .24s ease;
    }

    body.sidebar-open .cms-sidebar {
        transform: translateX(0);
    }

    .cms-main {
        margin-left: 0;
    }

    .cms-topbar {
        margin: 12px 12px 0;
    }

    .cms-content {
        width: calc(100% - 24px);
        padding: 18px 12px 30px;
    }

    .topbar-menu {
        display: inline-flex;
    }
}

@media (max-width: 560px) {
    .cms-topbar {
        margin: 10px 10px 0;
        padding: 0 14px;
    }

    .cms-content {
        width: calc(100% - 20px);
        padding: 16px 10px 26px;
    }
}

/* ============================================================
   Liquid Glass physics v5: real backdrop texture + thick glass
   The blur must have something to bend.
   ============================================================ */
:root {
    --glass-bg: rgba(255, 255, 255, .20);
    --glass-bg-strong: rgba(255, 255, 255, .34);
    --glass-bg-soft: rgba(255, 255, 255, .14);
    --glass-border: rgba(255, 255, 255, .90);
    --glass-blur: blur(18px) saturate(160%);
    --glass-shadow: inset 0 1px 2px rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(255, 255, 255, .60), 0 20px 40px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .05);
}

html {
    background: #e9edf1 !important;
}

/* A real spatial field: warm/cool wash plus faint mottled depth for blur to sample. */
body.cms-body,
.login-page {
    background-color: #edf0f3 !important;
    background-image:
        radial-gradient(ellipse 60% 55% at 2% 0%, rgba(255, 242, 232, .78) 0%, transparent 68%),
        radial-gradient(ellipse 52% 50% at 100% 0%, rgba(176, 195, 220, .38) 0%, transparent 70%),
        radial-gradient(ellipse 56% 52% at 100% 100%, rgba(160, 186, 212, .42) 0%, transparent 72%),
        radial-gradient(ellipse 48% 46% at 0% 100%, rgba(198, 185, 212, .30) 0%, transparent 70%),
        linear-gradient(135deg, #f6efe8 0%, #eef1f4 40%, #e8edf4 72%, #ecf3f4 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* This decorative layer is a sibling behind the shell. It is NOT an ancestor,
   so its own blur cannot isolate the glass cards. */
body.cms-body::after {
    content: '' !important;
    position: fixed !important;
    inset: -18% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(96, 224, 216, .64) 0%, transparent 36%),
        radial-gradient(circle at 80% 12%, rgba(170, 142, 250, .66) 0%, transparent 38%),
        radial-gradient(circle at 90% 62%, rgba(250, 154, 210, .58) 0%, transparent 36%),
        radial-gradient(circle at 24% 82%, rgba(128, 224, 200, .58) 0%, transparent 36%),
        radial-gradient(circle at 58% 46%, rgba(255, 255, 255, .40) 0%, transparent 30%),
        radial-gradient(circle at 46% 94%, rgba(190, 164, 250, .46) 0%, transparent 34%),
        radial-gradient(circle at 60% 72%, rgba(255, 206, 170, .30) 0%, transparent 30%) !important;
    filter: blur(80px) !important;
    opacity: .95 !important;
}

body.cms-body::before {
    display: none !important;
}

.cms-shell {
    position: relative !important;
    z-index: 1 !important;
}

/* Bug guard: no ancestor of a glass card may isolate the backdrop. */
.cms-shell,
.cms-main {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
}

/* The outer content tray must not create a nested backdrop root.
   Cards inside it then sample the real page aurora instead of a flat parent. */
.cms-content {
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .06) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .94),
        0 20px 40px rgba(0, 0, 0, .08),
        0 2px 6px rgba(0, 0, 0, .04) !important;
}

/* The four required glass properties, applied to every true glass surface. */
.cms-sidebar,
.cms-topbar,
.page-header,
.page-hero,
.editor-page-head,
.stat-card,
.panel-card,
.page-card,
.editor-card,
.tip-card,
.list-card,
.seo-card,
.traffic-card,
.source-card,
.popular-card,
.settings-card,
.site-info-card,
.seo-form-card,
.search-snippet-card,
.editor-notice,
.editor-media-card,
.login-card,
.cms-flash,
.cms-toast {
    background: rgba(255, 255, 255, .20) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 20px !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(255, 255, 255, .60),
        0 20px 40px rgba(0, 0, 0, .10),
        0 1px 3px rgba(0, 0, 0, .05) !important;
}

/* Sidebar and topbar keep their floating geometry, but not their opaque fills. */
.cms-sidebar {
    overflow: visible !important;
    background: rgba(255, 255, 255, .20) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
    backdrop-filter: blur(18px) saturate(165%) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(255, 255, 255, .60),
        0 20px 40px rgba(0, 0, 0, .10),
        0 1px 3px rgba(0, 0, 0, .05) !important;
}

.cms-topbar {
    background: rgba(255, 255, 255, .20) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
    backdrop-filter: blur(18px) saturate(165%) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(255, 255, 255, .60),
        0 20px 40px rgba(0, 0, 0, .10),
        0 1px 3px rgba(0, 0, 0, .05) !important;
}

/* Jelly buttons: the only saturated color on the page. */
.cms-btn-primary,
.cms-btn-publish,
.login-submit,
.topbar-search button,
.list-search button {
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 99px !important;
    background: linear-gradient(135deg, #7676eb 0%, #a88bea 46%, #e88fc2 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(60, 40, 120, .22) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .90),
        inset 0 -2px 4px rgba(0, 0, 0, .10),
        0 4px 12px rgba(118, 118, 235, .40) !important;
}

.cms-btn-primary:hover,
.cms-btn-publish:hover,
.login-submit:hover,
.topbar-search button:hover,
.list-search button:hover {
    filter: brightness(1.04) saturate(1.08);
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .98),
        inset 0 -2px 4px rgba(0, 0, 0, .12),
        0 7px 20px rgba(118, 118, 235, .52) !important;
}

/* Inputs are thin sheets of glass; focus makes the edge glow. */
.topbar-search input,
.list-search input,
.editor-title-input,
.editor-meta-field input,
.editor-summary-field textarea,
.editor-paragraph textarea,
.seo-field input,
.seo-field textarea,
.settings-field input,
.login-field input {
    border: 1px solid rgba(255, 255, 255, .50) !important;
    background: rgba(255, 255, 255, .30) !important;
    color: #171820 !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .82),
        inset 0 -1px 3px rgba(70, 80, 105, .06) !important;
}

.topbar-search input:focus,
.list-search input:focus,
.editor-title-input:focus,
.editor-meta-field input:focus,
.editor-summary-field textarea:focus,
.editor-paragraph textarea:focus,
.seo-field input:focus,
.seo-field textarea:focus,
.settings-field input:focus,
.login-field input:focus {
    border-color: rgba(164, 151, 255, .88) !important;
    background: rgba(255, 255, 255, .44) !important;
    box-shadow:
        0 0 0 4px rgba(150, 130, 255, .18),
        0 0 24px rgba(160, 140, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}

/* The selected navigation item is a mint-lilac glass capsule, not a white slab. */
.nav-item.is-active {
    background: linear-gradient(135deg, rgba(140, 202, 196, .56) 0%, rgba(181, 181, 235, .48) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .96),
        inset 0 -2px 3px rgba(90, 120, 140, .10),
        0 6px 16px rgba(60, 80, 110, .12) !important;
    color: #26313d !important;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .30) !important;
    border-color: rgba(255, 255, 255, .70) !important;
}

/* Secondary controls stay glassy instead of turning into solid white chips. */
.cms-btn-secondary,
.cms-btn-ghost,
.soft-badge,
.date-range-chip,
.page-buttons a,
.page-ellipsis,
.topbar-menu,
.icon-button {
    background: rgba(255, 255, 255, .34) !important;
    border-color: rgba(255, 255, 255, .62) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .76) !important;
}

/* Secondary action stays mint, like the reference's softer jelly button. */
.cms-btn-secondary {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, rgba(140, 202, 196, .54) 0%, rgba(212, 244, 239, .38) 100%) !important;
    color: #245b56 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .88),
        0 4px 12px rgba(80, 150, 142, .16) !important;
}

/* Small status pills are translucent cyan / lilac / apricot glass. */
.soft-badge {
    border: 1px solid rgba(255, 255, 255, .66) !important;
    background: linear-gradient(135deg, rgba(140, 202, 196, .36), rgba(255, 255, 255, .22)) !important;
    color: #2d625d !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .84), 0 3px 10px rgba(70, 120, 130, .08) !important;
}

.soft-badge.is-green {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, rgba(140, 202, 196, .44), rgba(210, 245, 238, .28)) !important;
    color: #23645d !important;
}

.soft-badge.is-blue {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, rgba(121, 121, 237, .22), rgba(169, 196, 228, .30)) !important;
    color: #40508f !important;
}

.soft-badge.is-orange {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, rgba(237, 175, 125, .40), rgba(255, 224, 196, .26)) !important;
    color: #875523 !important;
}

/* Table hover remains readable while letting the aurora through. */
.cms-table thead {
    background: rgba(255, 255, 255, .18) !important;
}

.cms-table tbody tr:hover,
.cms-table tbody tr:hover .content-copy a {
    background: rgba(255, 255, 255, .28) !important;
}

/* ============================================================
   Liquid Glass v7: clean canvas + Apple-style physical glass
   The canvas stays neutral. Color is reserved for controls.
   ============================================================ */

html {
    background: #f0f2f5 !important;
}

body.cms-body,
.login-page {
    background-color: #f0f2f5 !important;
    background-image: none !important;
    background-attachment: scroll !important;
}

/* A single, almost invisible cool-blue bloom in one corner.
   It gives the blur something to sample without tinting the page. */
body.cms-body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 4% 2%, rgba(112, 162, 255, .10) 0%, rgba(112, 162, 255, .035) 24%, transparent 46%) !important;
    filter: blur(100px) !important;
    opacity: .35 !important;
}

body.cms-body::before {
    display: none !important;
}

/* Remove the old colored blobs from the sidebar. */
.cms-sidebar::before,
.cms-sidebar::after {
    display: none !important;
}

/* One physical recipe for the sidebar, top bar and every content card. */
.cms-sidebar,
.cms-topbar,
.page-header,
.page-hero,
.editor-page-head,
.stat-card,
.panel-card,
.page-card,
.editor-card,
.tip-card,
.list-card,
.seo-card,
.traffic-card,
.source-card,
.popular-card,
.settings-card,
.site-info-card,
.seo-form-card,
.search-snippet-card,
.editor-notice,
.editor-media-card,
.login-card,
.cms-flash,
.cms-toast {
    background: rgba(255, 255, 255, .45) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, .80) !important;
    border-top: 1px solid rgba(255, 255, 255, 1) !important;
    border-left: 1px solid rgba(255, 255, 255, 1) !important;
    border-radius: 24px !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, .90),
        inset 0 -1px 0 rgba(255, 255, 255, .30) !important;
}

/* The content tray is only a quiet frame; the cards themselves are the glass. */
.cms-content {
    overflow: visible !important;
    background: rgba(255, 255, 255, .12) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 24px !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .035),
        inset 0 1px 0 rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* The top bar stays a thin sheet of the same material. */
.cms-topbar {
    background: rgba(255, 255, 255, .48) !important;
}

/* Primary controls: flat Apple purple, lifted by highlight + shadow. */
.cms-btn-primary,
.cms-btn-publish,
.login-submit,
.topbar-search button,
.list-search button {
    background: #7b61ff !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 99px !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(58, 42, 130, .18) !important;
    box-shadow:
        0 4px 14px rgba(123, 97, 255, .40),
        inset 0 1px 1px rgba(255, 255, 255, .60) !important;
}

.cms-btn-primary:hover,
.cms-btn-publish:hover,
.login-submit:hover,
.topbar-search button:hover,
.list-search button:hover {
    background: #846cff !important;
    background-image: none !important;
    filter: brightness(1.05);
    transform: translateY(-1px) !important;
    box-shadow:
        0 8px 22px rgba(123, 97, 255, .48),
        inset 0 1px 1px rgba(255, 255, 255, .72) !important;
}

/* Selected navigation: a raised white acrylic block. */
.nav-item {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #4d5260 !important;
    box-shadow: none !important;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .44) !important;
    border-color: rgba(255, 255, 255, .74) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

.nav-item.is-active {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #ffffff !important;
    border-radius: 999px !important;
    color: #20232b !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    text-shadow: none !important;
}

.nav-item.is-active::before {
    display: none !important;
}

.nav-item .icon {
    color: #727a89 !important;
}

.nav-item.is-active .icon {
    color: #7b61ff !important;
    filter: none !important;
}

/* Secondary controls stay quiet, white and out of the way. */
.cms-btn-secondary,
.cms-btn-ghost,
.soft-badge,
.date-range-chip,
.page-buttons a,
.page-ellipsis,
.topbar-menu,
.icon-button {
    background: rgba(255, 255, 255, .54) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .86) !important;
    color: #525866 !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .045),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.soft-badge.is-green,
.soft-badge.is-blue,
.soft-badge.is-orange {
    background: rgba(255, 255, 255, .54) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .86) !important;
    color: #525866 !important;
}

/* Inputs read as recessed glass, not colored chips. */
.topbar-search input,
.list-search input,
.editor-title-input,
.editor-meta-field input,
.editor-summary-field textarea,
.editor-paragraph textarea,
.seo-field input,
.seo-field textarea,
.settings-field input,
.login-field input {
    border: 1px solid rgba(255, 255, 255, .78) !important;
    background: rgba(255, 255, 255, .58) !important;
    background-image: none !important;
    color: #20232b !important;
    box-shadow:
        inset 0 1px 2px rgba(38, 44, 58, .05),
        inset 0 -1px 0 rgba(255, 255, 255, .82) !important;
}

.topbar-search input:focus,
.list-search input:focus,
.editor-title-input:focus,
.editor-meta-field input:focus,
.editor-summary-field textarea:focus,
.editor-paragraph textarea:focus,
.seo-field input:focus,
.seo-field textarea:focus,
.settings-field input:focus,
.login-field input:focus {
    border-color: rgba(123, 97, 255, .52) !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow:
        0 0 0 4px rgba(123, 97, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

/* Logo keeps the accent, but as a clean solid tile. */
.brand-mark,
.login-brand-mark {
    background: #7b61ff !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .68) !important;
    box-shadow:
        0 6px 18px rgba(123, 97, 255, .28),
        inset 0 1px 1px rgba(255, 255, 255, .56) !important;
}

/* Table hover stays neutral. */
.cms-table thead {
    background: rgba(255, 255, 255, .32) !important;
}

.cms-table tbody tr:hover,
.cms-table tbody tr:hover .content-copy a {
    background: rgba(255, 255, 255, .42) !important;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .cms-sidebar,
    .cms-topbar,
    .page-header,
    .page-hero,
    .editor-page-head,
    .stat-card,
    .panel-card,
    .page-card,
    .editor-card,
    .tip-card,
    .list-card,
    .seo-card,
    .traffic-card,
    .source-card,
    .popular-card,
    .settings-card,
    .site-info-card,
    .seo-form-card,
    .search-snippet-card,
    .editor-notice,
    .editor-media-card,
    .login-card {
        background: rgba(255, 255, 255, .90) !important;
    }
}

/* ============================================================
   Editor media refinement v8: module-aware image management
   ============================================================ */

.editor-media-card.is-featured {
    padding: 28px;
}

.editor-media-card.is-featured .editor-media-head {
    margin-bottom: 22px;
}

.expert-card-editor {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(240px, 1fr);
    gap: 30px;
    align-items: center;
}

.expert-card-preview {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .52);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.expert-card-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

.expert-card-preview.is-missing {
    color: #7b7f8c;
    font-size: 12px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .42) 8px, rgba(207, 211, 223, .22) 8px, rgba(207, 211, 223, .22) 16px);
}

.expert-card-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.expert-card-kicker {
    margin: 0;
    color: #8b8e9c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.expert-card-actions h3 {
    margin: 0;
    color: #20232b;
    font-size: 24px;
    font-weight: 740;
    letter-spacing: -.4px;
    line-height: 1.25;
}

.expert-card-actions p:not(.expert-card-kicker) {
    max-width: 460px;
    margin: 0;
    color: #686c79;
    font-size: 13px;
    line-height: 1.75;
}

.editor-media-form {
    align-items: stretch;
}

.editor-media-form.is-featured {
    width: 100%;
    align-items: flex-start;
    margin-top: 8px;
}

.editor-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
}

.editor-upload-trigger {
    cursor: pointer;
    user-select: none;
}

.editor-media-form.is-featured .editor-upload-trigger {
    min-height: 52px;
    padding: 0 26px;
    font-size: 14px;
}

.editor-media-item .editor-upload-trigger {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    font-size: 10px;
}

.editor-upload-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #7c808d;
    font-size: 11px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-media-item .editor-upload-name {
    text-align: center;
}

.editor-media-form.is-uploading {
    opacity: .72;
    pointer-events: none;
}

.editor-media-empty {
    padding: 30px 24px;
    border: 1px dashed rgba(255, 255, 255, .92);
    border-radius: 16px;
    background: rgba(255, 255, 255, .32);
    color: #777b87;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 860px) {
    .expert-card-editor {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .expert-card-preview {
        width: 100%;
        max-width: 520px;
    }
}
.editor-meta-field select {
    width: 100%;
    min-height: 38px;
    padding: 8px 34px 8px 12px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    color: #263244;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.editor-meta-field select:focus {
    border-color: #bfd2f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .06);
}

.editor-file-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px dashed rgba(91, 112, 146, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .56);
    color: #536176;
    font-size: 12px;
}

.editor-file-input::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #edf3ff;
    color: #315fbd;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

/* ============================================================
   Commercial dashboard composition v9 (2026-10-19)
   Layout-only refinement; keeps the existing liquid-glass recipe.
   ============================================================ */

.page-hero {
    min-height: 174px;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 44px !important;
    padding: 32px 36px !important;
}

.hero-main {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 760px;
}

.page-hero h1 {
    font-size: clamp(30px, 2.6vw, 38px) !important;
    letter-spacing: -1.15px;
}

.hero-copy {
    max-width: 700px;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.7;
}

.hero-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0 !important;
    padding: 8px 13px;
    border: 1px solid rgba(123, 97, 255, .12);
    border-radius: 999px;
    background: rgba(123, 97, 255, .075);
    color: #676b7b;
    font-size: 11.5px !important;
    font-weight: 600;
    line-height: 1.3 !important;
}

.hero-hint-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #7b61ff;
    box-shadow: 0 0 0 4px rgba(123, 97, 255, .11);
}

.hero-action {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.hero-action .cms-btn-primary {
    min-height: 50px;
    padding: 0 25px;
    font-size: 14px;
    font-weight: 700;
}

.cms-content .page-hero,
.cms-content .stat-card,
.cms-content .panel-card,
.cms-content .editor-page-head,
.cms-content .editor-card,
.cms-content .tip-card,
.cms-content .editor-notice,
.cms-content .editor-media-card {
    border-color: rgba(255, 255, 255, .88) !important;
    box-shadow:
        0 14px 38px rgba(31, 38, 61, .075),
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -1px 0 rgba(255, 255, 255, .34) !important;
}

.stat-card strong {
    color: #111 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.55px;
}

.editor-page-head,
.editor-form {
    width: 100%;
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

.editor-page-head {
    gap: 12px !important;
    padding: 26px 30px !important;
}

.back-link {
    margin-bottom: 2px;
    color: #9298a5 !important;
    font-size: 11.5px;
    font-weight: 560;
}

.editor-heading-row {
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 15px !important;
}

.editor-heading-row > div {
    min-width: 0;
}

.editor-heading-row h1 {
    font-size: clamp(32px, 3vw, 40px) !important;
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1.14;
}

.editor-heading-row .soft-badge {
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.editor-heading-row .soft-badge.is-blue {
    border: 1px solid rgba(123, 97, 255, .18) !important;
    background: linear-gradient(135deg, rgba(123, 97, 255, .16), rgba(169, 149, 255, .10)) !important;
    color: #5b3fd6 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 4px 12px rgba(123, 97, 255, .08) !important;
}

.editor-heading-row .soft-badge.is-green {
    border: 1px solid rgba(32, 161, 90, .16) !important;
    background: linear-gradient(135deg, rgba(32, 161, 90, .13), rgba(88, 190, 133, .08)) !important;
    color: #23794b !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 4px 12px rgba(32, 161, 90, .07) !important;
}

.editor-form {
    gap: 24px !important;
}

.editor-card {
    padding: 36px 40px 38px !important;
}

.editor-title-field {
    margin-bottom: 24px;
    padding-bottom: 24px !important;
}

.editor-title-input {
    min-height: 62px;
    padding: 12px 16px !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow:
        inset 0 1px 2px rgba(38, 44, 58, .04),
        inset 0 -1px 0 rgba(255, 255, 255, .82) !important;
}

.editor-meta-row {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, .9fr) minmax(150px, .76fr);
    gap: 18px !important;
    margin-bottom: 24px;
    padding: 0 0 24px !important;
}

.editor-meta-field input,
.editor-meta-field select {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.editor-meta-field.is-static {
    min-height: 48px;
    justify-content: center;
    padding: 10px 15px !important;
    border-radius: 12px !important;
}

.editor-summary-field {
    margin-bottom: 24px;
    padding: 0 0 24px !important;
}

.editor-summary-field textarea,
.editor-paragraph textarea {
    padding: 14px 16px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1.8;
}

.editor-body-field {
    padding-top: 0 !important;
}

.editor-action-bar {
    gap: 14px;
    padding-top: 0;
}

@media (max-width: 900px) {
    .page-hero {
        min-height: 0;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 28px !important;
    }

    .hero-action {
        width: 100%;
        justify-content: flex-start;
    }

    .editor-page-head,
    .editor-form {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .page-hero {
        padding: 24px 20px !important;
    }

    .hero-hint {
        align-items: flex-start;
        border-radius: 15px;
        line-height: 1.55;
    }

    .editor-page-head {
        padding: 22px 20px !important;
    }

    .editor-card {
        padding: 26px 20px 28px !important;
    }
}

/* ============================================================
   Commercial content rail v10 (2026-10-19)
   Every screen shares one centered rhythm; tables stop stretching.
   ============================================================ */

.cms-content {
    max-width: 1248px;
}

.cms-content > .page-header {
    align-items: center !important;
    min-height: 104px;
    padding: 26px 30px !important;
}

.cms-content > .page-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.cms-content > .page-header .cms-btn,
.cms-content > .page-header .header-chip,
.cms-content > .page-header .date-range-chip {
    flex: 0 0 auto;
}

.cms-content > .list-card,
.cms-content > .analytics-stats,
.cms-content > .analytics-note,
.cms-content > .analytics-grid,
.cms-content > .section-block,
.cms-content > .settings-grid,
.cms-content > .seo-editor-grid {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.cms-content.screen-settings > .page-header,
.cms-content.screen-settings > .settings-grid {
    width: 100%;
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

.cms-content.screen-seo > .editor-page-head,
.cms-content.screen-seo > .seo-editor-grid {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.cms-content > .list-card {
    overflow: hidden;
}

.list-card .list-toolbar {
    padding: 18px 24px;
}

.list-card .list-search {
    width: min(420px, 48vw);
}

.list-card .cms-table {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
}

.list-card .cms-table th,
.list-card .cms-table td {
    padding-right: 18px;
    padding-left: 18px;
}

.list-card .content-cell {
    width: 100%;
    min-width: 0;
}

.list-card .content-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.list-card .content-copy a {
    max-width: 100%;
}

.list-card:not(.seo-card) .cms-table th:nth-child(1) {
    width: auto;
    text-align: left;
}

.list-card:not(.seo-card) .cms-table th:nth-child(2) {
    width: 140px;
    text-align: center;
}

.list-card:not(.seo-card) .cms-table th:nth-child(3) {
    width: 150px;
    text-align: center;
}

.list-card:not(.seo-card) .cms-table th:nth-child(4) {
    width: 170px;
    text-align: right;
}

.list-card:not(.seo-card) .cms-table td:nth-child(2),
.list-card:not(.seo-card) .cms-table td:nth-child(3) {
    text-align: center;
}

.list-card.seo-card .cms-table th:nth-child(1) {
    width: 26%;
}

.list-card.seo-card .cms-table th:nth-child(2) {
    width: 23%;
}

.list-card.seo-card .cms-table th:nth-child(3) {
    width: 31%;
}

.list-card.seo-card .cms-table th:nth-child(4) {
    width: 120px;
    text-align: center;
}

.list-card.seo-card .cms-table th:nth-child(5) {
    width: 110px;
    text-align: right;
}

.list-card.seo-card .cms-table td:nth-child(4) {
    text-align: center;
}

.list-card.seo-card .seo-cell,
.list-card.seo-card .seo-cell strong {
    min-width: 0;
    max-width: 100%;
}

.list-card .row-actions {
    gap: 2px;
    flex-wrap: nowrap;
}

.list-card .action-link {
    gap: 4px;
    padding: 6px 7px;
    font-size: 10.5px;
}

.list-card .action-link .icon {
    width: 13px;
    height: 13px;
}

.settings-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
}

.settings-form {
    gap: 24px;
    padding: 4px 26px 28px;
}

.settings-field input {
    height: 48px;
    padding: 12px 16px;
}

@media (max-width: 1280px) {
    .cms-content {
        max-width: calc(100% - 32px);
    }
}

@media (max-width: 900px) {
    .cms-content > .page-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 18px;
        padding: 24px !important;
    }

    .list-card .list-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .list-card .list-search {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .cms-content > .page-header {
        padding: 22px 20px !important;
    }

    .settings-form {
        padding: 4px 20px 24px;
    }
}

/* Business form feedback */
.required-mark {
    display: inline-flex;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff0f3;
    color: #c64d63;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}

.form-validation-error {
    margin-right: auto;
    color: #c43e56;
    font-size: 11.5px;
    font-weight: 650;
}

.form-validation-error::before {
    content: "!";
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffedf1;
    color: #c43e56;
    font-size: 10px;
}

.expert-lock-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 16px 0 18px;
}

.expert-lock-field > span {
    color: #7f8da2;
    font-size: 10px;
    font-weight: 700;
}

.expert-lock-field input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid #e6ebf3;
    border-radius: 11px;
    outline: 0;
    background: #f3f6fa;
    color: #68758a;
    font-size: 13px;
    font-weight: 650;
    cursor: not-allowed;
}

.expert-lock-field small {
    color: #9aa6b7;
    font-size: 9.5px;
    line-height: 1.6;
}

/* One-step site keywords */
.cms-content.screen-seo > .page-header,
.cms-content.screen-seo > .seo-keyword-layout {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
}

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

.seo-keyword-card {
    overflow: hidden;
}

.seo-keyword-field {
    padding: 4px 26px 22px;
}

.seo-keyword-field > label {
    display: block;
    margin-bottom: 11px;
    color: #35445c;
    font-size: 14px;
    font-weight: 750;
}

.seo-keyword-field textarea {
    width: 100%;
    min-height: 190px;
    padding: 16px 18px;
    border: 1px solid #dfe6f0;
    border-radius: 14px;
    outline: 0;
    background: #fbfcfe;
    color: #35445c;
    font-size: 13px;
    line-height: 1.85;
    resize: vertical;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.seo-keyword-field textarea:focus {
    border-color: #bfd2f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .07);
}

.seo-keyword-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 9px;
}

.seo-keyword-meta p {
    margin: 0;
    color: #8d9aac;
    font-size: 10.5px;
    line-height: 1.65;
}

.seo-keyword-preview {
    margin: 0 26px 22px;
    padding: 16px 17px;
    border: 1px solid #e9eef5;
    border-radius: 13px;
    background: rgba(249, 251, 255, .76);
}

.seo-keyword-preview > span {
    display: block;
    margin-bottom: 10px;
    color: #7f8da2;
    font-size: 10px;
    font-weight: 700;
}

.seo-keyword-preview > p {
    margin: 0;
    color: #a0abba;
    font-size: 10.5px;
}

.keyword-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.keyword-chip {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e2e5fb;
    border-radius: 999px;
    background: #f1efff;
    color: #5d4db3;
    font-size: 10.5px;
    font-weight: 650;
}

.seo-keyword-card .seo-form-actions {
    align-items: center;
}

.seo-action-note {
    display: inline-flex;
    margin-right: auto;
    align-items: center;
    gap: 6px;
    color: #8e9cae;
    font-size: 10px;
}

.seo-action-note .icon {
    width: 14px;
    height: 14px;
    color: #3ca06a;
}

.seo-keyword-side {
    display: grid;
    gap: 16px;
}

.seo-status-card {
    padding-bottom: 8px;
}

.seo-status-list {
    display: grid;
    gap: 0;
    padding: 0 22px 12px;
}

.seo-status-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #eff2f7;
}

.seo-status-list > div:last-child {
    border-bottom: 0;
}

.seo-status-list span {
    color: #8b98aa;
    font-size: 10.5px;
}

.seo-status-list strong {
    color: #35445c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.seo-task-progress {
    margin: 2px 22px 20px;
    padding: 14px 15px 13px;
    border: 1px solid rgba(129, 111, 225, .13);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(248, 246, 255, .58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 7px 20px rgba(92, 77, 167, .055);
}

.seo-task-progress[hidden] {
    display: none;
}

.seo-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.seo-progress-head span {
    color: #68738a;
    font-size: 10.5px;
    font-weight: 700;
}

.seo-progress-head strong {
    color: #4c5670;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.seo-progress-track {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(112, 98, 185, .1);
    box-shadow: inset 0 1px 2px rgba(81, 67, 146, .07);
}

.seo-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8a78e8, #68a7ee);
    box-shadow: 0 0 12px rgba(125, 107, 232, .36);
    transition: width .38s cubic-bezier(.22, .7, .25, 1);
}

.seo-task-progress.is-running .seo-progress-track > span {
    position: relative;
}

.seo-task-progress.is-running .seo-progress-track > span::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    content: "";
    animation: seo-progress-sheen 1.35s linear infinite;
}

.seo-task-progress.is-finished .seo-progress-track > span {
    background: linear-gradient(90deg, #54b68a, #35b7af);
    box-shadow: 0 0 11px rgba(53, 183, 175, .26);
}

.seo-task-progress.is-failed .seo-progress-track > span {
    background: linear-gradient(90deg, #e58b93, #d76672);
    box-shadow: 0 0 11px rgba(215, 102, 114, .22);
}

.seo-task-progress p {
    margin: 10px 0 0;
    color: #7d8799;
    font-size: 10.5px;
    line-height: 1.6;
}

.seo-task-progress.is-failed p {
    color: #b05a65;
}

@keyframes seo-progress-sheen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

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

    .seo-keyword-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .seo-keyword-field,
    .seo-keyword-preview {
        padding-right: 18px;
        padding-left: 18px;
    }

    .seo-keyword-preview {
        margin-right: 18px;
        margin-left: 18px;
    }

    .seo-keyword-card .seo-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .seo-keyword-card .seo-form-actions .cms-btn {
        justify-content: center;
    }
}

/* Business module workspaces */
.cms-content.screen-pages > .page-header,
.cms-content.screen-pages > .section-block,
.cms-content.screen-departments > .page-header,
.cms-content.screen-departments > .list-card,
.cms-content.screen-banners > .page-header,
.cms-content.screen-banners > .list-card,
.cms-content.screen-videos > .page-header,
.cms-content.screen-videos > .list-card {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.cms-content > .module-editor-page {
    width: 100%;
}

.module-editor-page > .editor-page-head,
.module-editor-page > .editor-form {
    width: 100%;
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

.decor-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.decor-module-card {
    display: flex;
    min-height: 124px;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(231, 236, 244, .95);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(250, 252, 255, .92));
    box-shadow:
        0 14px 38px rgba(31, 38, 61, .065),
        inset 0 1px 0 rgba(255, 255, 255, .96);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.decor-module-card:hover {
    border-color: #d6e1f2;
    box-shadow: var(--cms-shadow-hover);
    transform: translateY(-2px);
}

.decor-module-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

.decor-module-icon .icon { width: 24px; height: 24px; }
.decor-module-icon.is-blue { background: #edf4ff; color: #3474e8; }
.decor-module-icon.is-green { background: #eaf8ef; color: #1f9e5a; }
.decor-module-icon.is-purple { background: #f2eeff; color: #7658ca; }
.decor-module-icon.is-orange { background: #fff4e6; color: #d98622; }

.decor-module-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.decor-module-copy strong { color: #28374f; font-size: 16px; font-weight: 750; letter-spacing: -.25px; }
.decor-module-copy small { margin-top: 7px; color: #7e8ca1; font-size: 11.5px; line-height: 1.7; }
.decor-module-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: #a2aebe; }
.decor-module-meta em {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #f3f6fb;
    color: #6f7f96;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.decor-module-meta .icon { width: 15px; height: 15px; }

.toolbar-filter { display: flex; align-items: center; }
.toolbar-filter select {
    min-width: 170px;
    height: 42px;
    padding: 0 38px 0 14px;
    border: 1px solid #e5ebf3;
    border-radius: 11px;
    outline: 0;
    background: #f8fafc;
    color: #536378;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.toolbar-filter select:focus {
    border-color: #c4d6f7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .07);
}

.list-search.is-static {
    width: auto;
    min-height: 40px;
    padding: 0 14px 0 39px;
    border: 1px solid #e8edf4;
    border-radius: 11px;
    background: #f8fafc;
    color: #75859b;
    font-size: 11.5px;
    font-weight: 600;
}

.link-text {
    display: inline-block;
    overflow: hidden;
    max-width: 240px;
    color: #718198;
    font-size: 10.5px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.content-thumb.content-photo,
.content-thumb.banner-thumb,
.content-thumb.video-thumb {
    object-fit: cover;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .55),
        0 5px 14px rgba(37, 51, 77, .08);
}

.content-thumb.content-photo {
    width: 54px;
    height: 48px;
    flex-basis: 54px;
    border-radius: 10px;
}

.content-thumb.banner-thumb {
    width: 92px;
    height: 52px;
    flex-basis: 92px;
    border-radius: 9px;
}

.content-thumb.video-thumb {
    width: 86px;
    height: 50px;
    flex-basis: 86px;
    border-radius: 9px;
}

.business-pill {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(123, 97, 255, .18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(123, 97, 255, .16), rgba(169, 149, 255, .10));
    color: #5b3fd6;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 4px 12px rgba(123, 97, 255, .08);
}

.module-form-card {
    padding: 32px 40px 36px;
}

.module-field-block {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eef2f7;
}

.module-field-block.is-first {
    padding-top: 0;
}

.module-field-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.module-field-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.module-field-heading h2 {
    margin: 0;
    color: #3e4e66;
    font-size: 13px;
    font-weight: 750;
}

.module-field-heading p {
    margin: 5px 0 0;
    color: #94a1b3;
    font-size: 10.5px;
    line-height: 1.65;
}

.module-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.module-field-label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    color: #4c5c72;
    font-size: 11.5px;
    font-weight: 650;
}

.module-field-label > span {
    color: #68778d;
    font-size: 10.5px;
    font-weight: 700;
}

.module-field-label input,
.module-field-label select,
.module-text-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid #e2e8f1;
    border-radius: 12px;
    outline: 0;
    background: #fbfcfe;
    color: #3b4b62;
    font-size: 12.5px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.module-field-label input:focus,
.module-field-label select:focus,
.module-text-input:focus {
    border-color: #bfd2f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .065);
}

.module-textarea {
    width: 100%;
    min-height: 116px;
    padding: 12px 16px;
    border: 1px solid #e2e8f1;
    border-radius: 12px;
    outline: 0;
    background: #fbfcfe;
    color: #3b4b62;
    font-size: 12.5px;
    line-height: 1.75;
    resize: vertical;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.module-textarea:focus {
    border-color: #bfd2f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .065);
}

.compact-field {
    max-width: 280px;
}

.editor-meta-row.module-meta-row {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, .72fr);
}

.module-upload-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.module-image-preview {
    display: grid;
    width: 210px;
    height: 126px;
    overflow: hidden;
    place-items: center;
    border: 1px dashed #dbe3ee;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(248, 250, 254, .95), rgba(244, 247, 252, .75));
    color: #9da9ba;
    font-size: 10.5px;
}

.module-image-preview img,
.banner-preview img,
.video-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.module-file-button {
    cursor: pointer;
}

.banner-preview,
.video-cover-preview {
    display: grid;
    width: 100%;
    overflow: hidden;
    place-items: center;
    border: 1px dashed #d9e2ef;
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(248, 250, 254, .95), rgba(244, 247, 252, .75));
    color: #9da9ba;
    font-size: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.banner-preview {
    aspect-ratio: 16 / 6;
    max-height: 330px;
    margin-bottom: 16px;
}

.video-cover-preview {
    width: min(100%, 520px);
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
}

.banner-preview.is-empty,
.video-cover-preview.is-empty,
.module-image-preview:empty {
    background:
        linear-gradient(135deg, rgba(247, 250, 255, .96), rgba(242, 246, 252, .72));
}

@media (max-width: 900px) {
    .decor-module-grid,
    .module-field-grid,
    .editor-meta-row.module-meta-row {
        grid-template-columns: 1fr;
    }

    .module-form-card {
        padding: 26px 24px 30px;
    }
}

@media (max-width: 560px) {
    .decor-module-card {
        align-items: flex-start;
        padding: 20px;
    }

    .decor-module-meta {
        display: none;
    }

    .module-upload-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .module-image-preview {
        width: 100%;
        height: 180px;
    }

    .compact-field {
        max-width: none;
    }
}