@font-face {

    font-family: 'Barlow Condensed';

    src: url('../fonts/barlow-condensed-600.woff2') format('woff2');

    font-weight: 600;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Barlow Condensed';

    src: url('../fonts/barlow-condensed-700.woff2') format('woff2');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Space Grotesk';

    src: url('../fonts/space-grotesk.woff2') format('woff2');

    font-weight: 300 700;

    font-style: normal;

    font-display: swap;

}



:root {

    --bg: #070809;

    --bg-deep: #040505;

    --sidebar: #090b0b;

    --panel: #0b0e0e;

    --panel-2: #101414;

    --line: rgba(238, 243, 232, 0.12);

    --line-soft: rgba(238, 243, 232, 0.065);

    --text: #eef1e8;

    --text-soft: #c2c8bd;

    --muted: #858d80;

    --dim: #5e665b;

    --accent: #3f8cff;

    --accent-ink: #04101f;

    --danger: #ff725d;

    --success: #56d7ff;

    --warning: #ffc95c;

    --blue: #7ec9e7;

    --sans: 'Space Grotesk', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    --cn: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

    --mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

    --sidebar-w: 236px;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    -webkit-text-size-adjust: 100%;

}



body {

    margin: 0;

    min-width: 320px;

    font-family: var(--sans);

}



.admin-body {

    min-height: 100vh;

    background:

        radial-gradient(ellipse at 94% 4%, rgba(63, 140, 255, 0.035), transparent 28%),

        var(--bg);

    color: var(--text);

    font-size: 13px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}



::selection {

    background: var(--accent);

    color: var(--accent-ink);

}



h1, h2, h3, h4, p, figure, dl, dd {

    margin: 0;

}

h1, h2, h3, h4 {

    line-height: 1.2;

}

a {

    color: inherit;

    text-decoration: none;

}

button,

input,

textarea,

select {

    color: inherit;

    font: inherit;

}

button {

    cursor: pointer;

    border: 0;

    background: none;

}

img,

svg {

    display: block;

}

img {

    max-width: 100%;

}

ul, ol {

    margin: 0;

    padding: 0;

    list-style: none;

}

[hidden] {

    display: none !important;

}

*:focus-visible {

    outline: 2px solid var(--accent);

    outline-offset: 2px;

}



.accent {

    color: var(--accent);

}

.admin-mono {

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.02em;

}

.admin-muted {

    color: var(--dim);

}

.admin-kicker {

    display: block;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.13em;

    line-height: 1.5;

    text-transform: uppercase;

}

.signal-dot {

    display: inline-block;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 0 3px rgba(63, 140, 255, 0.1);

    flex: none;

}



.skip-link {

    position: fixed;

    top: 10px;

    left: 10px;

    z-index: 5000;

    transform: translateY(-200%);

    padding: 8px 12px;

    background: var(--accent);

    color: var(--accent-ink);

    font-size: 11px;

    font-weight: 700;

}

.skip-link:focus {

    transform: translateY(0);

}



/* --------------------------------------------------------------------------

   Shell + sidebar

   -------------------------------------------------------------------------- */



.admin-shell {

    display: flex;

    min-height: 100vh;

}

.admin-sidebar {

    position: sticky;

    top: 0;

    display: flex;

    flex-direction: column;

    width: var(--sidebar-w);

    height: 100vh;

    flex: none;

    padding: 24px 16px 18px;

    border-right: 1px solid var(--line-soft);

    background:

        linear-gradient(180deg, rgba(63, 140, 255, 0.025), transparent 20%),

        var(--sidebar);

    z-index: 45;

    overflow-y: auto;

}

.admin-sidebar__brand {

    padding: 0 7px 25px;

    border-bottom: 1px solid var(--line-soft);

}

.admin-brand {

    display: inline-flex;

    align-items: center;

    gap: 9px;

}

.admin-brand svg {

    width: 29px;

    height: 29px;

    color: var(--accent);

    flex: none;

}

.admin-brand > span {

    color: var(--text);

    font-family: var(--display);

    font-size: 26px;

    font-weight: 700;

    letter-spacing: 0.01em;

    line-height: 0.8;

}

.admin-brand > span > span {

    color: var(--accent);

    font-style: italic;

    padding: 0 1px;

}

.admin-sidebar__brand > small {

    display: block;

    margin-top: 9px;

    color: #4d554b;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.14em;

}

.admin-sidebar__section {

    padding: 24px 0 0;

}

.admin-sidebar__label {

    display: block;

    padding: 0 9px 8px;

    color: #454d43;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.13em;

}

.admin-nav {

    display: grid;

    gap: 3px;

}

.admin-nav a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 42px;

    padding: 8px 10px;

    border: 1px solid transparent;

    color: var(--muted);

    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;

}

.admin-nav a::before {

    content: '';

    position: absolute;

    top: 9px;

    bottom: 9px;

    left: -17px;

    width: 2px;

    background: var(--accent);

    opacity: 0;

    transition: opacity 0.2s ease;

}

.admin-nav a > svg {

    width: 15px;

    height: 15px;

    flex: none;

    opacity: 0.72;

}

.admin-nav a > span {

    font-family: var(--cn);

    font-size: 11px;

    font-weight: 500;

    flex: 1;

}

.admin-nav a > small {

    color: #484f46;

    font-family: var(--mono);

    font-size: 6px;

    letter-spacing: 0.08em;

}

.admin-nav a:hover {

    color: var(--text-soft);

    background: rgba(255, 255, 255, 0.025);

}

.admin-nav a.is-active {

    color: var(--text);

    background: rgba(63, 140, 255, 0.055);

    border-color: rgba(63, 140, 255, 0.16);

}

.admin-nav a.is-active::before {

    opacity: 1;

}

.admin-nav a.is-active > svg {

    color: var(--accent);

    opacity: 1;

}

.admin-nav a.is-active > small {

    color: var(--accent);

    opacity: 0.65;

}

.admin-sidebar__footer {

    margin-top: auto;

    padding-top: 22px;

}

.admin-user {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 8px;

    border-top: 1px solid var(--line-soft);

    border-bottom: 1px solid var(--line-soft);

}

.admin-user__avatar {

    display: grid;

    place-items: center;

    width: 30px;

    height: 30px;

    flex: none;

    border: 1px solid rgba(63, 140, 255, 0.28);

    border-radius: 50%;

    color: var(--accent);

    font-family: var(--cn);

    font-size: 12px;

    background: rgba(63, 140, 255, 0.04);

}

.admin-user > div {

    min-width: 0;

}

.admin-user strong {

    display: block;

    overflow: hidden;

    color: #bcc3b7;

    font-family: var(--cn);

    font-size: 10px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-user small {

    display: block;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

}

.admin-logout {

    padding-top: 10px;

}

.admin-logout button {

    display: flex;

    align-items: center;

    gap: 7px;

    width: 100%;

    padding: 7px 8px;

    color: #5c645a;

    font-family: var(--cn);

    font-size: 9px;

    transition: color 0.2s ease;

}

.admin-logout button svg {

    width: 12px;

    height: 12px;

}

.admin-logout button:hover {

    color: var(--danger);

}



/* --------------------------------------------------------------------------

   Workspace, topbar

   -------------------------------------------------------------------------- */



.admin-workspace {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;

}

.admin-topbar {

    position: sticky;

    top: 0;

    z-index: 35;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    min-height: 82px;

    padding: 16px clamp(20px, 3vw, 38px);

    border-bottom: 1px solid var(--line-soft);

    background: rgba(7, 8, 9, 0.89);

    backdrop-filter: blur(17px);

}

.admin-topbar__title {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

}

.admin-topbar__title > div > span {

    display: block;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.1em;

    line-height: 1.3;

}

.admin-topbar__title h1 {

    margin-top: 3px;

    color: var(--text);

    font-family: var(--cn);

    font-size: clamp(20px, 2vw, 26px);

    font-weight: 700;

    letter-spacing: -0.04em;

    line-height: 1.15;

}

.admin-menu-toggle {

    display: none;

    place-items: center;

    width: 36px;

    height: 36px;

    flex: none;

    border: 1px solid var(--line);

    color: var(--text-soft);

}

.admin-menu-toggle svg {

    width: 16px;

    height: 16px;

}

.admin-topbar__actions {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-wrap: wrap;

    justify-content: flex-end;

}

.admin-system-state {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-left: 5px;

    color: #5e665b;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.08em;

    white-space: nowrap;

}

.admin-main {

    flex: 1;

    width: 100%;

    max-width: 1480px;

    padding: 28px clamp(20px, 3vw, 38px) 45px;

}

.admin-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 13px clamp(20px, 3vw, 38px);

    border-top: 1px solid var(--line-soft);

    color: #4f574d;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.06em;

}

.admin-sidebar-backdrop {

    display: none;

}



/* --------------------------------------------------------------------------

   Buttons, alerts, links

   -------------------------------------------------------------------------- */



.admin-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 36px;

    padding: 0 13px;

    border: 1px solid transparent;

    border-radius: 1px;

    font-family: var(--cn);

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

}

.admin-button svg {

    width: 14px;

    height: 14px;

}

.admin-button--primary {

    border-color: var(--accent);

    background: var(--accent);

    color: var(--accent-ink);

}

.admin-button--primary:hover {

    background: #79b4ff;

    border-color: #79b4ff;

    transform: translateY(-1px);

}

.admin-button--ghost {

    border-color: var(--line);

    background: rgba(255, 255, 255, 0.02);

    color: var(--text-soft);

}

.admin-button--ghost:hover {

    border-color: var(--line-strong, rgba(238, 243, 232, 0.24));

    color: var(--accent);

}

.admin-button--full {

    width: 100%;

    justify-content: space-between;

}

.admin-button:disabled {

    opacity: 0.55;

    cursor: wait;

}

.admin-alert {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 18px;

    padding: 12px 14px;

    border: 1px solid var(--line);

    background: var(--panel);

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 10px;

    line-height: 1.7;

}

.admin-alert > svg {

    width: 14px;

    height: 14px;

    flex: none;

    margin-top: 2px;

}

.admin-alert--error {

    border-color: rgba(255, 114, 93, 0.32);

    background: rgba(255, 114, 93, 0.06);

    color: #ffac9f;

}

.admin-alert--error > svg {

    color: var(--danger);

}

.admin-text-link {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 9px;

    transition: color 0.2s ease;

}

.admin-text-link svg {

    width: 12px;

    height: 12px;

}

.admin-text-link:hover {

    color: var(--accent);

}

.admin-icon-link {

    display: grid;

    place-items: center;

    width: 28px;

    height: 28px;

    flex: none;

    border: 1px solid var(--line);

    color: var(--muted);

    transition: color 0.2s ease, border-color 0.2s ease;

}

.admin-icon-link svg {

    width: 13px;

    height: 13px;

}

.admin-icon-link:hover {

    color: var(--accent);

    border-color: rgba(63, 140, 255, 0.35);

}

.admin-live-pill {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 9px;

    border: 1px solid rgba(63, 140, 255, 0.2);

    color: #a4ad9f;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.08em;

}

.admin-flash {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 11px 13px;

    border: 1px solid var(--line);

    background: var(--panel);

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 10px;

}

.admin-flash > svg {

    width: 14px;

    height: 14px;

    flex: none;

}

.admin-flash > span:nth-child(2) {

    flex: 1;

}

.admin-flash > button {

    display: grid;

    place-items: center;

    width: 24px;

    height: 24px;

    color: var(--dim);

}

.admin-flash > button svg {

    width: 12px;

    height: 12px;

}

.admin-flash--success {

    border-color: rgba(86, 215, 255, 0.25);

    color: #d1e9a0;

}

.admin-flash--success > svg {

    color: var(--success);

}

.admin-flash--error {

    border-color: rgba(255, 114, 93, 0.28);

    color: #ffab9e;

}

.admin-flash--error > svg {

    color: var(--danger);

}



/* --------------------------------------------------------------------------

   Dashboard

   -------------------------------------------------------------------------- */



.admin-welcome {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;

}

.admin-welcome h2 {

    margin-top: 9px;

    color: var(--text);

    font-family: var(--cn);

    font-size: clamp(28px, 3.3vw, 40px);

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 1.1;

}

.admin-welcome p {

    margin-top: 9px;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 10px;

}

.admin-welcome p strong {

    color: var(--accent);

    font-weight: 500;

}

.admin-welcome__stamp {

    flex: none;

    padding: 11px 14px;

    border-left: 1px solid var(--line);

    color: var(--muted);

    font-family: var(--mono);

    text-align: right;

}

.admin-welcome__stamp > span {

    display: block;

    font-size: 7px;

    letter-spacing: 0.09em;

}

.admin-welcome__stamp > strong {

    display: block;

    margin-top: 2px;

    color: var(--text-soft);

    font-family: var(--display);

    font-size: 28px;

    font-weight: 600;

    line-height: 1;

}

.admin-welcome__stamp > small {

    display: block;

    margin-top: 4px;

    color: var(--dim);

    font-size: 6px;

    letter-spacing: 0.1em;

}



.admin-stat-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 18px;

}

.admin-stat-card {

    position: relative;

    min-height: 140px;

    padding: 18px 17px 15px;

    overflow: hidden;

    border: 1px solid var(--line-soft);

    background:

        linear-gradient(140deg, rgba(255, 255, 255, 0.026), transparent 55%),

        var(--panel);

}

.admin-stat-card__label {

    display: block;

    color: #5d655b;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.1em;

}

.admin-stat-card > strong {

    display: block;

    margin-top: 18px;

    color: var(--text);

    font-family: var(--display);

    font-size: 51px;

    font-weight: 600;

    letter-spacing: -0.01em;

    line-height: 0.7;

}

.admin-stat-card > strong.is-highlight {

    color: var(--accent);

}

.admin-stat-card > strong.is-compact {

    margin-top: 21px;

    font-size: 35px;

    letter-spacing: 0;

}

.admin-stat-card__foot {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 21px;

    color: #697166;

    font-family: var(--cn);

    font-size: 8px;

}

.admin-stat-card__foot svg {

    width: 11px;

    height: 11px;

}

.admin-stat-card__accent {

    position: absolute;

    right: 17px;

    bottom: 17px;

    width: 18px;

    height: 1px;

    background: var(--accent);

    opacity: 0.5;

}

.admin-stat-card:hover .admin-stat-card__accent {

    width: 33px;

}



.admin-columns {

    display: grid;

    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.78fr);

    gap: 14px;

    align-items: start;

}

.admin-side-stack {

    display: grid;

    gap: 14px;

}

.admin-panel {

    border: 1px solid var(--line-soft);

    background: var(--panel);

}

.admin-panel__head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    padding: 16px 17px 14px;

    border-bottom: 1px solid var(--line-soft);

}

.admin-panel__head h2 {

    margin-top: 5px;

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 15px;

    font-weight: 500;

    letter-spacing: -0.02em;

}

.admin-panel__head > div > .admin-kicker {

    line-height: 1.4;

}

.admin-panel__foot {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding: 11px 17px;

    border-top: 1px solid var(--line-soft);

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.04em;

}

.admin-panel__foot a {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 8px;

}

.admin-panel__foot a:hover {

    color: var(--accent);

}

.admin-panel__foot svg {

    width: 11px;

    height: 11px;

}

.admin-bars {

    display: grid;

    gap: 15px;

    padding: 18px 17px;

}

.admin-bar__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 6px;

    color: #7f877b;

    font-family: var(--cn);

    font-size: 9px;

}

.admin-bar__meta strong {

    color: var(--text-soft);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 500;

}

.admin-bar__track {

    height: 3px;

    background: rgba(255, 255, 255, 0.065);

    overflow: hidden;

}

.admin-bar__track > span {

    display: block;

    height: 100%;

    min-width: 3px;

}

.admin-recent-list {

    display: grid;

}

.admin-recent-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    border-bottom: 1px solid var(--line-soft);

    transition: background 0.2s ease;

}

.admin-recent-item:last-child {

    border-bottom: 0;

}

.admin-recent-item:hover {

    background: rgba(255, 255, 255, 0.025);

}

.admin-recent-item > img {

    width: 48px;

    height: 36px;

    object-fit: cover;

    flex: none;

    border: 1px solid var(--line-soft);

}

.admin-recent-item > div {

    min-width: 0;

    flex: 1;

}

.admin-recent-item strong {

    display: block;

    overflow: hidden;

    color: #b5bcb1;

    font-family: var(--cn);

    font-size: 9px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-recent-item span {

    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-recent-item__arrow {

    color: #4d554a;

    flex: none !important;

    margin-top: 0 !important;

}

.admin-recent-item__arrow svg {

    width: 13px;

    height: 13px;

}

.admin-empty {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding: 30px 18px;

    color: var(--muted);

}

.admin-empty > svg {

    width: 22px;

    height: 22px;

    color: #485046;

}

.admin-empty h3 {

    margin-top: 13px;

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 14px;

    font-weight: 500;

}

.admin-empty p {

    max-width: 380px;

    margin-top: 5px;

    color: var(--dim);

    font-family: var(--cn);

    font-size: 9px;

    line-height: 1.8;

}

.admin-empty--large {

    align-items: center;

    Padding: 64px 20px;

    text-align: center;

}

.admin-empty--large > svg {

    width: 31px;

    height: 31px;

}

.admin-empty--large h3 {

    font-size: 18px;

}

.admin-empty--large p {

    margin-bottom: 18px;

}

.admin-quick-actions {

    margin-top: 14px;

    padding: 19px 18px;

    border: 1px solid var(--line-soft);

    background: var(--panel);

}

.admin-quick-actions__head h2 {

    margin-top: 5px;

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 16px;

    font-weight: 500;

}

.admin-quick-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 15px;

}

.admin-quick-grid a {

    display: grid;

    grid-template-columns: 30px 1fr;

    grid-template-rows: auto auto;

    column-gap: 9px;

    padding: 12px;

    border: 1px solid var(--line-soft);

    background: rgba(255, 255, 255, 0.015);

    transition: border-color 0.2s ease, background 0.2s ease;

}

.admin-quick-grid a > span {

    display: grid;

    place-items: center;

    grid-row: span 2;

    width: 30px;

    height: 30px;

    border: 1px solid rgba(63, 140, 255, 0.2);

    color: var(--accent);

}

.admin-quick-grid a > span svg {

    width: 14px;

    height: 14px;

}

.admin-quick-grid strong {

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 9px;

    font-weight: 500;

}

.admin-quick-grid small {

    margin-top: 2px;

    color: var(--dim);

    font-family: var(--cn);

    font-size: 8px;

}

.admin-quick-grid a:hover {

    border-color: rgba(63, 140, 255, 0.3);

    background: rgba(63, 140, 255, 0.035);

}



/* --------------------------------------------------------------------------

   Tables

   -------------------------------------------------------------------------- */



.admin-table-wrap {

    width: 100%;

    overflow-x: auto;

}

.admin-table {

    width: 100%;

    min-width: 760px;

    border-collapse: collapse;

    text-align: left;

}

.admin-table th {

    padding: 10px 14px;

    border-bottom: 1px solid var(--line);

    color: #5d655a;

    font-family: var(--mono);

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    white-space: nowrap;

}

.admin-table td {

    padding: 11px 14px;

    border-bottom: 1px solid var(--line-soft);

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 10px;

    vertical-align: middle;

}

.admin-table tbody tr {

    transition: background 0.18s ease;

}

.admin-table tbody tr:hover {

    background: rgba(255, 255, 255, 0.018);

}

.admin-table tbody tr:last-child td {

    border-bottom: 0;

}

.admin-table .is-right {

    text-align: right;

}

.admin-table__stack {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}

.admin-table__stack strong {

    overflow: hidden;

    color: #c2c8bd;

    font-size: 10px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-table__stack > span,

.admin-table__stack small {

    overflow: hidden;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.01em;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-table__stack--wide {

    max-width: 310px;

}

.admin-table__stack small.admin-order-note {

    color: #766e55;

    font-family: var(--cn);

    font-size: 8px;

}

.admin-order-no {

    color: var(--accent) !important;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.02em;

}

.admin-media-cell {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 190px;

}

.admin-media-cell > img {

    width: 66px;

    height: 40px;

    object-fit: cover;

    flex: none;

    border: 1px solid var(--line-soft);

    background: #111;

}

.admin-media-cell--product > img {

    width: 57px;

    height: 43px;

}

.admin-media-cell > div {

    min-width: 0;

}

.admin-media-cell strong {

    display: block;

    overflow: hidden;

    color: #c2c8bd;

    font-family: var(--cn);

    font-size: 10px;

    font-weight: 500;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-media-cell span {

    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.02em;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.admin-media-cell em {

    display: inline-block;

    margin-top: 4px;

    padding: 2px 4px;

    color: var(--accent);

    border: 1px solid rgba(63, 140, 255, 0.2);

    font-family: var(--mono);

    font-size: 5px;

    font-style: normal;

    letter-spacing: 0.06em;

}

.admin-table-link {

    color: #aab2a6;

    border-bottom: 1px solid var(--line-soft);

    transition: color 0.2s ease, border-color 0.2s ease;

}

.admin-table-link:hover {

    color: var(--accent);

    border-color: var(--accent);

}

.admin-tag {

    display: inline-block;

    padding: 3px 6px;

    border: 1px solid var(--line-soft);

    color: #8a9286;

    font-family: var(--cn);

    font-size: 8px;

    line-height: 1.3;

    white-space: nowrap;

}

.admin-tag[style] {

    border-color: color-mix(in srgb, var(--tag-color, var(--line)) 28%, transparent);

}

.admin-count {

    color: var(--text-soft);

    font-family: var(--display);

    font-size: 20px;

    line-height: 1;

}

.admin-dot-status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #8c9587;

    font-family: var(--cn);

    font-size: 8px;

    white-space: nowrap;

}

.admin-dot-status i {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #5b633f;

}

.admin-dot-status.is-on i {

    background: var(--success);

    box-shadow: 0 0 6px rgba(86, 215, 255, 0.35);

}

.admin-dot-status.is-off i {

    background: #5c6259;

}

.admin-actions {

    display: inline-flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

}

.admin-actions form {

    display: inline-flex;

}

.admin-action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 26px;

    padding: 0 7px;

    border: 1px solid var(--line-soft);

    color: #777f73;

    font-family: var(--cn);

    font-size: 8px;

    white-space: nowrap;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;

}

.admin-action-button svg {

    width: 11px;

    height: 11px;

}

.admin-action-button--edit:hover {

    color: var(--accent);

    border-color: rgba(63, 140, 255, 0.35);

}

.admin-action-button--danger:hover {

    color: var(--danger);

    border-color: rgba(255, 114, 93, 0.35);

}

.admin-status {

    display: inline-flex;

    align-items: center;

    padding: 3px 6px;

    border: 1px solid var(--line-soft);

    color: #949c90;

    font-family: var(--cn);

    font-size: 8px;

    line-height: 1.3;

    white-space: nowrap;

}

.admin-status.status-new {

    border-color: rgba(63, 140, 255, 0.3);

    background: rgba(63, 140, 255, 0.055);

    color: var(--accent);

}

.admin-status.status-contacted {

    border-color: rgba(126, 201, 231, 0.28);

    background: rgba(126, 201, 231, 0.05);

    color: var(--blue);

}

.admin-status.status-completed {

    border-color: rgba(86, 215, 255, 0.23);

    color: var(--success);

}

.admin-status.status-cancelled {

    color: #676f63;

    text-decoration: line-through;

}

.admin-status-form {

    display: inline-flex;

    align-items: stretch;

    justify-content: flex-end;

    border: 1px solid var(--line-soft);

}

.admin-status-form select {

    width: 76px;

    height: 27px;

    padding: 0 4px;

    border: 0;

    border-right: 1px solid var(--line-soft);

    background: var(--panel);

    color: var(--muted);

    font-family: var(--cn);

    font-size: 8px;

    outline: none;

}

.admin-status-form button {

    display: grid;

    place-items: center;

    width: 27px;

    height: 27px;

    color: var(--muted);

    transition: color 0.2s ease, background 0.2s ease;

}

.admin-status-form button:hover {

    color: var(--accent-ink);

    background: var(--accent);

}

.admin-status-form button svg {

    width: 12px;

    height: 12px;

}

.admin-pagination {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 14px 15px;

    border-top: 1px solid var(--line-soft);

    color: var(--dim);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.06em;

}

.admin-pagination > div {

    display: flex;

    align-items: center;

    gap: 3px;

}

.admin-pagination a {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    min-width: 25px;

    height: 25px;

    justify-content: center;

    padding: 0 6px;

    border: 1px solid var(--line-soft);

    color: var(--muted);

    font-family: var(--cn);

    font-size: 8px;

    transition: color 0.2s ease, border-color 0.2s ease;

}

.admin-pagination a:hover {

    color: var(--accent);

    border-color: rgba(63, 140, 255, 0.35);

}

.admin-pagination a.is-active {

    border-color: var(--accent);

    background: var(--accent);

    color: var(--accent-ink);

}

.admin-pagination a svg {

    width: 11px;

    height: 11px;

}

.admin-data-note {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 16px;

    border-top: 1px solid var(--line-soft);

    color: #51594f;

    font-family: var(--cn);

    font-size: 8px;

}

.admin-data-note > span:first-child {

    display: inline-flex;

    align-items: center;

    gap: 5px;

}

.admin-data-note svg {

    width: 11px;

    height: 11px;

}



/* --------------------------------------------------------------------------

   List toolbar and filters

   -------------------------------------------------------------------------- */



.admin-list-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 13px 15px;

    border-bottom: 1px solid var(--line-soft);

}

.admin-list-toolbar--wrap {

    flex-wrap: wrap;

}

.admin-search {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: min(320px, 100%);

    padding: 0 10px;

    border: 1px solid var(--line-soft);

    background: rgba(255, 255, 255, 0.018);

}

.admin-search--small {

    min-width: 210px;

    flex: 1;

}

.admin-search svg {

    width: 13px;

    height: 13px;

    flex: none;

    color: #5b6358;

}

.admin-search input {

    min-width: 0;

    flex: 1;

    height: 34px;

    border: 0;

    background: transparent;

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 9px;

    outline: none;

}

.admin-search input::placeholder {

    color: #4d554b;

}

.admin-search button {

    padding: 3px 7px;

    border-left: 1px solid var(--line-soft);

    color: var(--muted);

    font-family: var(--cn);

    font-size: 8px;

    transition: color 0.2s ease;

}

.admin-search button:hover {

    color: var(--accent);

}

.admin-filter-form {

    display: flex;

    align-items: center;

    gap: 7px;

    flex: 1;

    flex-wrap: wrap;

}

.admin-filter-form > select {

    height: 34px;

    min-width: 120px;

    padding: 0 25px 0 9px;

    border: 1px solid var(--line-soft);

    border-radius: 0;

    background: #0d1110;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 9px;

    outline: none;

}

.admin-filter-form .admin-button {

    min-height: 34px;

}

.admin-list-toolbar__meta {

    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--dim);

    font-family: var(--cn);

    font-size: 9px;

    white-space: nowrap;

}

.admin-list-toolbar__meta strong {

    color: var(--text-soft);

    font-family: var(--mono);

    font-size: 10px;

    font-weight: 500;

}

.admin-status-tabs {

    display: flex;

    align-items: center;

    gap: 0;

    padding: 0 15px;

    border-bottom: 1px solid var(--line-soft);

    overflow-x: auto;

}

.admin-status-tabs a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 11px 12px;

    border-bottom: 1px solid transparent;

    color: #70786c;

    font-family: var(--cn);

    font-size: 9px;

    white-space: nowrap;

    transition: color 0.2s ease, border-color 0.2s ease;

}

.admin-status-tabs a strong {

    color: #555d52;

    font-family: var(--mono);

    font-size: 7px;

    font-weight: 500;

}

.admin-status-tabs a:hover {

    color: var(--text-soft);

}

.admin-status-tabs a.is-active {

    color: var(--text);

    border-color: var(--accent);

}

.admin-status-tabs a.is-active strong {

    color: var(--accent);

}



/* --------------------------------------------------------------------------

   Editors / forms

   -------------------------------------------------------------------------- */



.admin-editor {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 310px;

    align-items: start;

    gap: 14px;

}

.admin-editor__main {

    display: grid;

    gap: 14px;

}

.admin-editor__side {

    display: grid;

    gap: 14px;

}

.admin-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    padding: 17px;

}

.admin-field {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

    min-width: 0;

}

.admin-field--full {

    grid-column: 1 / -1;

}

.admin-field label {

    color: #8b9387;

    font-family: var(--cn);

    font-size: 9px;

    line-height: 1.5;

}

.admin-field label > span {

    color: var(--accent);

}

.admin-label-hint {

    color: #535b50;

    font-family: var(--mono);

    font-size: 7px;

    font-weight: 400;

    margin-left: 4px;

}

.admin-field input,

.admin-field select,

.admin-field textarea {

    width: 100%;

    border: 1px solid var(--line-soft);

    border-radius: 0;

    background: rgba(255, 255, 255, 0.021);

    padding: 9px 10px;

    color: var(--text-soft);

    font-family: var(--cn);

    font-size: 10px;

    line-height: 1.6;

    outline: none;

    transition: border-color 0.2s ease, background 0.2s ease;

}

.admin-field input,

.admin-field select {

    height: 35px;

}

.admin-field select {

    appearance: none;

    padding-right: 27px;

    background-image: linear-gradient(45deg, transparent 50%, #646c61 50%), linear-gradient(135deg, #646c61 50%, transparent 50%);

    background-position: calc(100% - 13px) 15px, calc(100% - 9px) 15px;

    background-size: 4px 4px, 4px 4px;

    background-repeat: no-repeat;

    background-color: rgba(255, 255, 255, 0.021);

}

.admin-field textarea {

    resize: vertical;

    min-height: 94px;

}

.admin-field input::placeholder,

.admin-field textarea::placeholder {

    color: #4c544a;

}

.admin-field input:focus,

.admin-field select:focus,

.admin-field textarea:focus {

    border-color: rgba(63, 140, 255, 0.45);

    background-color: rgba(255, 255, 255, 0.032);

}

.admin-field input.has-error,

.admin-field select.has-error,

.admin-field textarea.has-error {

    border-color: rgba(255, 114, 93, 0.55);

}

.admin-field > small {

    color: #535b50;

    font-family: var(--cn);

    font-size: 8px;

    line-height: 1.6;

}

.admin-field > small.admin-error-text {

    color: #f08b7b;

}

.admin-side-fields {

    display: grid;

    gap: 13px;

    padding: 17px;

}

.admin-color-field {

    display: flex;

    align-items: center;

    gap: 7px;

}

.admin-color-field input[type="text"] {

    flex: 1;

}

.admin-color-field input[type="color"] {

    width: 35px;

    height: 35px;

    padding: 2px;

    flex: none;

    border: 1px solid var(--line-soft);

    background: transparent;

    cursor: pointer;

}

.admin-media-preview {

    grid-column: 1 / -1;

    padding: 8px;

    border: 1px dashed var(--line);

    background: rgba(255, 255, 255, 0.012);

}

.admin-media-preview > span {

    display: block;

    margin-bottom: 5px;

    color: #555d52;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.07em;

}

.admin-media-preview img {

    width: 100%;

    max-height: 190px;

    object-fit: cover;

    background: #0a0c0b;

}

.admin-media-preview--wide img {

    aspect-ratio: 21 / 9;

}

.admin-check {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 8px 0;

    cursor: pointer;

}

.admin-check input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

.admin-check__box {

    position: relative;

    width: 15px;

    height: 15px;

    margin-top: 1px;

    flex: none;

    border: 1px solid var(--line-strong, rgba(238, 243, 232, 0.24));

    background: rgba(255, 255, 255, 0.02);

    transition: background 0.2s ease, border-color 0.2s ease;

}

.admin-check input:checked + .admin-check__box {

    border-color: var(--accent);

    background: var(--accent);

}

.admin-check input:checked + .admin-check__box::after {

    content: '';

    position: absolute;

    top: 2px;

    left: 5px;

    width: 3px;

    height: 7px;

    border-right: 1px solid var(--accent-ink);

    border-bottom: 1px solid var(--accent-ink);

    transform: rotate(40deg);

}

.admin-check input:focus-visible + .admin-check__box {

    outline: 2px solid var(--accent);

    outline-offset: 2px;

}

.admin-check > span:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.admin-check strong {

    color: #aab1a5;

    font-family: var(--cn);

    font-size: 9px;

    font-weight: 500;

}

.admin-check small {

    color: var(--dim);

    font-family: var(--cn);

    font-size: 8px;

    line-height: 1.5;

}

.admin-form-actions {

    display: grid;

    gap: 7px;

    padding: 0 17px 17px;

}

.admin-meta-note {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 17px;

    border-top: 1px solid var(--line-soft);

    color: #4c544a;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.04em;

}

.admin-panel--hint {

    padding: 17px;

    background:

        linear-gradient(140deg, rgba(63, 140, 255, 0.035), transparent 50%),

        var(--panel);

}

.admin-panel--hint h3 {

    margin-top: 7px;

    color: #b2b9ae;

    font-family: var(--cn);

    font-size: 13px;

    font-weight: 500;

}

.admin-panel--hint > p {

    margin-top: 7px;

    color: var(--dim);

    font-family: var(--cn);

    font-size: 9px;

    line-height: 1.8;

}

.admin-path-example {

    margin-top: 13px;

    padding-top: 9px;

    border-top: 1px solid var(--line-soft);

}

.admin-path-example span {

    color: #5a6257;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.08em;

}

.admin-path-example code {

    display: block;

    overflow-x: auto;

    margin-top: 4px;

    color: #869379;

    font-family: var(--mono);

    font-size: 7px;

    white-space: nowrap;

}



/* --------------------------------------------------------------------------

   Login

   -------------------------------------------------------------------------- */



.admin-login-page {

    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

    font-family: var(--sans);

    font-size: 13px;

    line-height: 1.6;

}

.login-shell {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    min-height: 100vh;

}

.login-aside {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    padding: 38px 44px;

    overflow: hidden;

    border-right: 1px solid var(--line-soft);

    background:

        radial-gradient(circle at 90% 10%, rgba(63, 140, 255, 0.09), transparent 34%),

        linear-gradient(145deg, #0b0e0d, #060808 70%);

    isolation: isolate;

}

.login-aside::after {

    content: 'S09';

    position: absolute;

    right: -20px;

    bottom: -170px;

    color: rgba(63, 140, 255, 0.035);

    font-family: var(--display);

    font-size: 520px;

    font-weight: 800;

    line-height: 1;

    pointer-events: none;

    -webkit-text-stroke: 1px rgba(63, 140, 255, 0.1);

}

.login-aside__grid {

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:

        linear-gradient(90deg, rgba(238, 243, 232, 0.045) 1px, transparent 1px),

        linear-gradient(0deg, rgba(238, 243, 232, 0.03) 1px, transparent 1px);

    background-size: 78px 78px;

    mask-image: radial-gradient(ellipse at 70% 40%, black 5%, transparent 70%);

}

.login-aside__brand,

.login-aside__copy,

.login-aside__meta {

    position: relative;

    z-index: 1;

}

.login-aside__brand {

    display: flex;

    align-items: center;

    gap: 10px;

}

.login-aside__brand svg {

    width: 32px;

    height: 32px;

    color: var(--accent);

}

.login-aside__brand > span {

    color: var(--text);

    font-family: var(--display);

    font-size: 29px;

    font-weight: 700;

    line-height: 0.8;

}

.login-aside__brand > span > span {

    color: var(--accent);

    font-style: italic;

}

.login-aside__copy {

    margin-top: auto;

    padding-bottom: 80px;

}

.login-aside__copy h1 {

    margin-top: 17px;

    color: var(--text);

    font-family: var(--cn);

    font-size: clamp(43px, 5vw, 72px);

    font-weight: 800;

    letter-spacing: -0.07em;

    line-height: 1.06;

}

.login-aside__copy p {

    max-width: 370px;

    margin-top: 17px;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 11px;

    line-height: 1.9;

}

.admin-kicker {

    color: #6b7368;

}

.login-aside__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 17px;

    border-top: 1px solid var(--line-soft);

    color: #5d655b;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.08em;

}

.login-aside__meta > span:first-child {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}

.login-aside__meta i {

    display: inline-block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 8px rgba(63, 140, 255, 0.4);

}

.login-panel {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background: #070909;

}

.login-panel__inner {

    width: min(360px, 100%);

}

.login-home-link {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #5f675c;

    font-family: var(--cn);

    font-size: 9px;

    transition: color 0.2s ease;

}

.login-home-link:hover {

    color: var(--accent);

}

.login-home-link svg {

    width: 12px;

    height: 12px;

}

.login-panel__head {

    margin-top: 42px;

}

.login-panel__head h2 {

    margin-top: 9px;

    color: var(--text);

    font-family: var(--cn);

    font-size: 27px;

    font-weight: 700;

    letter-spacing: -0.05em;

}

.login-panel__head p {

    margin-top: 5px;

    color: var(--dim);

    font-family: var(--cn);

    font-size: 10px;

}

.login-demo {

    margin-top: 20px;

    padding: 10px 12px;

    border: 1px solid rgba(63, 140, 255, 0.17);

    background: rgba(63, 140, 255, 0.035);

}

.login-demo > span {

    color: var(--accent);

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.1em;

}

.login-demo p {

    margin-top: 3px;

    color: #838d7d;

    font-family: var(--cn);

    font-size: 9px;

    line-height: 1.6;

}

.login-demo strong {

    color: #b6c2ab;

    font-family: var(--mono);

    font-weight: 500;

}

.login-form {

    display: grid;

    gap: 14px;

    margin-top: 22px;

}

.login-form .admin-field label {

    color: #939b8e;

}

.login-form .admin-field input {

    height: 41px;

    font-size: 12px;

}

.login-form .admin-button {

    min-height: 43px;

    margin-top: 4px;

}

.login-panel__foot {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 28px;

    padding-top: 12px;

    border-top: 1px solid var(--line-soft);

    color: #4f574d;

    font-family: var(--mono);

    font-size: 6px;

    letter-spacing: 0.06em;

}

.login-panel__foot > span:first-child {

    display: inline-flex;

    align-items: center;

    gap: 4px;

}

.login-panel__foot svg {

    width: 9px;

    height: 9px;

}

.login-panel .admin-alert {

    margin-top: 17px;

    margin-bottom: 0;

}



/* --------------------------------------------------------------------------

   Responsive

   -------------------------------------------------------------------------- */



@media (max-width: 1180px) {

    .admin-columns {

        grid-template-columns: 1fr;

    }

    .admin-side-stack {

        grid-template-columns: 1fr 1fr;

    }

    .admin-editor {

        grid-template-columns: 1fr;

    }

    .admin-editor__side {

        grid-template-columns: 1fr 1fr;

        align-items: start;

    }

    .admin-stat-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .admin-quick-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .login-shell {

        grid-template-columns: 0.95fr 1.05fr;

    }

    .login-aside {

        padding: 30px;

    }

}



@media (max-width: 900px) {

    .admin-sidebar {

        position: fixed;

        top: 0;

        bottom: 0;

        left: 0;

        height: 100dvh;

        transform: translateX(-102%);

        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

        box-shadow: 24px 0 70px rgba(0, 0, 0, 0.5);

    }

    .admin-sidebar.is-open {

        transform: translateX(0);

    }

    .admin-menu-toggle {

        display: grid;

    }

    .admin-sidebar-backdrop {

        position: fixed;

        inset: 0;

        z-index: 40;

        display: block;

        background: rgba(1, 2, 2, 0.7);

        backdrop-filter: blur(5px);

    }

    .admin-topbar {

        min-height: 70px;

    }

    .admin-system-state {

        display: none;

    }

    .admin-main {

        padding-top: 20px;

    }

    .admin-welcome__stamp {

        display: none;

    }

    .admin-panel--orders .admin-table {

        min-width: 850px;

    }

    .admin-side-stack {

        grid-template-columns: 1fr;

    }

    .login-shell {

        grid-template-columns: 1fr;

    }

    .login-aside {

        min-height: 300px;

        padding: 25px;

        border-right: 0;

        border-bottom: 1px solid var(--line-soft);

    }

    .login-aside__copy {

        padding: 50px 0 25px;

    }

    .login-aside__copy h1 {

        font-size: 48px;

    }

    .login-aside__copy p {

        display: none;

    }

    .login-aside__meta {

        display: none;

    }

    .login-panel {

        min-height: auto;

        padding: 36px 25px 50px;

    }

    .login-panel__head {

        margin-top: 30px;

    }

}



@media (max-width: 680px) {

    .admin-topbar {

        gap: 10px;

        padding: 13px 16px;

    }

    .admin-topbar__title {

        gap: 9px;

    }

    .admin-topbar__title h1 {

        font-size: 20px;

    }

    .admin-topbar__actions {

        gap: 5px;

    }

    .admin-topbar__actions .admin-button {

        min-height: 32px;

        padding: 0 9px;

        font-size: 9px;

    }

    .admin-live-pill {

        display: none;

    }

    .admin-main {

        padding: 17px 16px 36px;

    }

    .admin-footer {

        padding: 12px 16px;

        font-size: 6px;

    }

    .admin-footer > span:last-child {

        display: none;

    }

    .admin-welcome {

        margin-bottom: 18px;

    }

    .admin-welcome h2 {

        font-size: 28px;

    }

    .admin-welcome p {

        line-height: 1.75;

    }

    .admin-stat-grid {

        gap: 7px;

    }

    .admin-stat-card {

        min-height: 120px;

        padding: 14px;

    }

    .admin-stat-card > strong {

        margin-top: 16px;

        font-size: 42px;

    }

    .admin-stat-card > strong.is-compact {

        margin-top: 18px;

        font-size: 25px;

    }

    .admin-stat-card__foot {

        margin-top: 17px;

        font-size: 7px;

    }

    .admin-columns {

        gap: 10px;

    }

    .admin-side-stack {

        gap: 10px;

    }

    .admin-panel__head {

        padding: 13px 14px 12px;

    }

    .admin-panel__head h2 {

        font-size: 14px;

    }

    .admin-quick-grid {

        grid-template-columns: 1fr;

    }

    .admin-list-toolbar {

        align-items: stretch;

        flex-direction: column;

        gap: 10px;

        padding: 12px;

    }

    .admin-list-toolbar__meta {

        justify-content: space-between;

    }

    .admin-filter-form {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }

    .admin-search--small {

        grid-column: 1 / -1;

    }

    .admin-filter-form > select {

        width: 100%;

        min-width: 0;

    }

    .admin-filter-form .admin-button {

        grid-column: 1 / -1;

    }

    .admin-table th,

    .admin-table td {

        padding: 9px 11px;

    }

    .admin-status-tabs {

        padding: 0 11px;

    }

    .admin-status-tabs a {

        padding: 10px 8px;

        font-size: 8px;

    }

    .admin-data-note {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        padding: 11px 13px;

        line-height: 1.6;

    }

    .admin-pagination {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        padding: 12px;

    }

    .admin-editor__side {

        grid-template-columns: 1fr;

    }

    .admin-form-grid {

        grid-template-columns: 1fr;

        gap: 12px;

        padding: 14px;

    }

    .admin-field--full {

        grid-column: auto;

    }

    .admin-side-fields {

        padding: 14px;

    }

    .admin-form-actions {

        padding: 0 14px 14px;

    }

    .admin-media-preview {

        grid-column: auto;

    }

    .admin-quick-actions {

        padding: 14px;

    }

    .admin-quick-grid {

        gap: 6px;

    }

    .admin-empty--large {

        padding: 45px 16px;

    }

    .admin-system-state {

        display: none;

    }

    .login-aside {

        min-height: 250px;

        padding: 21px;

    }

    .login-aside__brand > span {

        font-size: 25px;

    }

    .login-aside__copy {

        padding: 35px 0 15px;

    }

    .login-aside__copy h1 {

        font-size: 40px;

    }

    .login-panel {

        padding: 27px 20px 40px;

    }

    .login-panel__head {

        margin-top: 26px;

    }

    .admin-topbar__actions .admin-button > span {

        display: none;

    }

    .admin-topbar__actions .admin-button {

        width: 32px;

        padding: 0;

    }

    .admin-topbar__actions .admin-button svg {

        margin: 0;

    }

    .admin-editor .admin-panel__head > .admin-text-link {

        font-size: 8px;

    }

}



@media (max-width: 400px) {

    .admin-stat-grid {

        grid-template-columns: 1fr;

    }

    .admin-stat-card {

        min-height: 108px;

    }

    .admin-stat-card > strong {

        font-size: 37px;

    }

    .admin-welcome h2 {

        font-size: 25px;

    }

    .admin-search {

        min-width: 0;

    }

    .admin-form-grid {

        padding: 12px;

    }

    .admin-field input,

    .admin-field select,

    .admin-field textarea {

        font-size: 10px;

    }

    .login-panel__head h2 {

        font-size: 24px;

    }

}



/* ==========================================================================

   NOVA ADMIN — settings & navy glass

   ========================================================================== */



:root {

    --bg: #040813;

    --bg-deep: #020610;

    --sidebar: #030812;

    --panel: #071224;

    --panel-2: #0a1a30;

    --line: rgba(122, 166, 235, 0.15);

    --line-soft: rgba(122, 166, 235, 0.08);

    --text: #eef5ff;

    --text-soft: #c1cfe3;

    --muted: #8398b6;

    --dim: #5a7191;

    --accent: #3f8cff;

    --accent-ink: #f7fbff;

}



.admin-body {

    background:

        radial-gradient(ellipse at 88% 3%, rgba(35, 101, 221, 0.1), transparent 30%),

        #040813;

}

.admin-sidebar {

    border-color: rgba(122, 166, 235, 0.11);

    background:

        linear-gradient(180deg, rgba(63, 140, 255, 0.045), transparent 24%),

        #030812;

}

.admin-sidebar__brand {

    border-color: rgba(122, 166, 235, 0.1);

}

.admin-brand svg {

    filter: drop-shadow(0 0 10px rgba(63, 140, 255, 0.5));

}

.admin-brand > span > span {

    color: #60b8ff;

}

.admin-brand > span {

    color: #f0f7ff;

}

.admin-nav a {

    border-radius: 9px;

}

.admin-nav a.is-active {

    border-color: rgba(95, 166, 255, 0.28);

    background: linear-gradient(90deg, rgba(47, 119, 240, 0.23), rgba(47, 119, 240, 0.05));

    color: #eff7ff;

}

.admin-nav a.is-active::before {

    background: linear-gradient(180deg, #3f8cff, #67ddff);

    box-shadow: 0 0 12px rgba(72, 173, 255, 0.4);

}

.admin-nav a.is-active > svg {

    color: #68caff;

}

.admin-user__avatar {

    border-color: rgba(96, 170, 255, 0.3);

    color: #78caff;

    background: rgba(37, 109, 214, 0.12);

}

.admin-topbar {

    border-color: rgba(122, 166, 235, 0.1);

    background: rgba(4, 10, 21, 0.85);

}

.admin-topbar::after {

    content: '';

    position: absolute;

    right: 0;

    bottom: -1px;

    left: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(76, 151, 255, 0.22), transparent);

}

.admin-main {

    position: relative;

}

.admin-panel,

.admin-quick-actions,

.admin-stat-card {

    border-radius: 14px;

    border-color: rgba(122, 166, 235, 0.12);

    background: rgba(7, 18, 34, 0.75);

    box-shadow: 0 18px 45px rgba(0, 4, 14, 0.16);

}

.admin-stat-card {

    background:

        radial-gradient(circle at 92% 0%, rgba(45, 121, 239, 0.1), transparent 32%),

        rgba(8, 20, 38, 0.76);

}

.admin-button {

    border-radius: 999px;

}

.admin-button--primary {

    border-color: rgba(121, 181, 255, 0.5);

    background: linear-gradient(135deg, #2e77f2, #4698ff);

    color: #fff;

    box-shadow: 0 8px 25px rgba(39, 111, 231, 0.2);

}

.admin-button--primary:hover {

    background: linear-gradient(135deg, #4a95ff, #6eb4ff);

    border-color: rgba(170, 216, 255, 0.65);

}

.admin-button--ghost {

    border-color: rgba(122, 166, 235, 0.2);

    background: rgba(8, 20, 38, 0.56);

}

.admin-alert,

.admin-flash {

    border-radius: 11px;

    background: rgba(8, 20, 38, 0.8);

}

.admin-table th {

    color: #5c7696;

    border-color: rgba(122, 166, 235, 0.12);

}

.admin-table td {

    border-color: rgba(122, 166, 235, 0.075);

}

.admin-table tbody tr:hover {

    background: rgba(31, 68, 121, 0.12);

}

.admin-media-cell > img {

    border-radius: 7px;

    border-color: rgba(122, 166, 235, 0.15);

}

.admin-tag {

    border-radius: 999px;

    border-color: rgba(122, 166, 235, 0.16);

    background: rgba(10, 24, 44, 0.5);

}

.admin-action-button {

    border-radius: 6px;

    border-color: rgba(122, 166, 235, 0.13);

}

.admin-status {

    border-radius: 999px;

}

.admin-filter-form > select,

.admin-search {

    border-radius: 999px;

    border-color: rgba(122, 166, 235, 0.15);

}

.admin-field input,

.admin-field select,

.admin-field textarea {

    border-radius: 7px;

    border-color: rgba(122, 166, 235, 0.15);

    background: rgba(9, 22, 40, 0.62);

}

.admin-field input:focus,

.admin-field select:focus,

.admin-field textarea:focus {

    border-color: rgba(99, 169, 255, 0.55);

    background: rgba(12, 31, 56, 0.7);

}

.admin-field select {

    background-color: rgba(9, 22, 40, 0.62);

}

.admin-panel__head,

.admin-panel__foot,

.admin-list-toolbar,

.admin-status-tabs,

.admin-data-note {

    border-color: rgba(122, 166, 235, 0.09);

}

.admin-recent-item {

    border-color: rgba(122, 166, 235, 0.075);

}

.admin-recent-item > img {

    width: 43px;

    height: 57px;

    border-radius: 6px;

    object-fit: cover;

}

.admin-sidebar-backdrop {

    background: rgba(0, 4, 12, 0.75);

}

.admin-login-page {

    background:

        radial-gradient(ellipse at 76% 12%, rgba(38, 111, 235, 0.16), transparent 36%),

        #030812;

}

.login-aside {

    border-color: rgba(122, 166, 235, 0.1);

    background:

        radial-gradient(circle at 90% 10%, rgba(58, 132, 255, 0.1), transparent 36%),

        linear-gradient(145deg, #050d1b, #020711 72%);

}

.login-panel {

    background: #030812;

}

.login-form .admin-field input {

    border-radius: 999px;

}

.login-form .admin-button {

    border-radius: 999px;

}

.login-demo {

    border-radius: 10px;

    background: rgba(48, 113, 225, 0.1);

}



/* Settings page */

.admin-settings {

    display: grid;

    gap: 14px;

}

.admin-settings__intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding: 5px 2px 7px;

}

.admin-settings__intro h2 {

    margin-top: 9px;

    color: #eff7ff;

    font-family: var(--cn);

    font-size: clamp(25px, 2.7vw, 34px);

    font-weight: 700;

    letter-spacing: -0.045em;

    line-height: 1.15;

}

.admin-settings__intro p {

    max-width: 680px;

    margin-top: 8px;

    color: var(--muted);

    font-family: var(--cn);

    font-size: 10px;

    line-height: 1.8;

}

.admin-settings__save {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: none;

}

.admin-settings__save > span {

    color: #516a8a;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.05em;

}

.admin-settings__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: start;

    gap: 14px;

}

.admin-settings__fields {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    padding: 17px;

}

.admin-settings__fields .admin-field--full {

    grid-column: 1 / -1;

}

.admin-settings__note {

    grid-column: 1 / -1;

}

.admin-settings__footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 20px;

    padding: 14px 16px;

    border: 1px solid rgba(122, 166, 235, 0.13);

    border-radius: 14px;

    background: rgba(7, 18, 34, 0.75);

}

.admin-settings__footer > span {

    color: #5b7392;

    font-family: var(--cn);

    font-size: 9px;

    margin-right: auto;

}

.admin-settings__save .admin-button {

    min-height: 38px;

}



@media (min-width: 1181px) {

    .admin-settings__grid > .admin-panel:nth-child(3) {

        grid-column: 1;

        grid-row: 2;

    }

    .admin-settings__grid > .admin-settings__note {

        grid-column: 2;

        grid-row: 2;

        align-self: stretch;

        display: flex;

        flex-direction: column;

    }

    .admin-settings__note .admin-path-example:last-child {

        margin-top: auto;

    }

}



@media (max-width: 1180px) {

    .admin-settings__grid {

        grid-template-columns: 1fr;

    }

    .admin-settings__note {

        grid-column: auto;

    }

}



@media (max-width: 760px) {

    .admin-settings__intro {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

    }

    .admin-settings__save {

        width: 100%;

        justify-content: space-between;

    }

    .admin-settings__fields {

        grid-template-columns: 1fr;

        padding: 14px;

    }

    .admin-settings__fields .admin-field--full {

        grid-column: auto;

    }

    .admin-settings__footer {

        align-items: stretch;

        flex-direction: column;

        gap: 10px;

    }

    .admin-settings__footer .admin-button {

        width: 100%;

        justify-content: space-between;

    }

}





/* ==========================================================================

   ADMIN_UI_POLISH_V1 — consistent, readable console typography

   ========================================================================== */



:root {

    --sidebar-w: 252px;

    --text: #f2f8ff;

    --text-soft: #d2dfef;

    --muted: #9ab0c8;

    --dim: #7a90ad;

    --line: rgba(122, 166, 235, 0.16);

    --line-soft: rgba(122, 166, 235, 0.09);

}



.admin-body,

.admin-login-page {

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.65;

}



.admin-body p,

.admin-login-page p {

    font-size: 14px;

    line-height: 1.7;

}



.admin-body small,

.admin-login-page small {

    font-size: 11px;

}



.admin-body label,

.admin-login-page label {

    font-size: 12.5px;

}



.admin-body td {

    color: #c6d6e8;

    font-size: 13.5px;

}



.admin-body th {

    color: #8098b6;

    font-size: 11.5px;

    font-weight: 600;

    letter-spacing: 0.08em;

}



.admin-body input,

.admin-body select,

.admin-body textarea,

.admin-login-page input,

.admin-login-page select,

.admin-login-page textarea {

    font-size: 14px;

}



.admin-mono {

    font-size: 11.5px;

    color: #9cb0c7;

}



.admin-kicker,

.admin-sidebar__label {

    color: #8ba2be;

    font-size: 10.5px;

    font-weight: 500;

    letter-spacing: 0.11em;

    line-height: 1.5;

}



/* Sidebar */

.admin-sidebar {

    padding: 26px 14px 20px;

}

.admin-sidebar__brand {

    padding: 0 8px 24px;

}

.admin-brand > span {

    color: #f4f9ff;

    font-size: 29px;

}

.admin-sidebar__brand > small {

    margin-top: 10px;

    color: #738ba8;

    font-size: 10px;

    letter-spacing: 0.11em;

}

.admin-sidebar__section {

    padding-top: 26px;

}

.admin-sidebar__label {

    padding: 0 10px 10px;

    color: #758daa;

    font-size: 10.5px;

    letter-spacing: 0.12em;

}

.admin-nav {

    gap: 5px;

}

.admin-nav a {

    min-height: 46px;

    padding: 10px 12px;

    gap: 11px;

}

.admin-nav a > svg {

    width: 17px;

    height: 17px;

}

.admin-nav a > span {

    color: #b9c9dc;

    font-size: 14px;

    font-weight: 500;

}

.admin-nav a > small {

    color: #667f9c;

    font-size: 9.5px;

    letter-spacing: 0.06em;

}

.admin-nav a:hover > span,

.admin-nav a.is-active > span {

    color: #f3f8ff;

}

.admin-nav a.is-active > small {

    color: #8bc4ff;

}

.admin-user {

    gap: 11px;

    padding: 13px 9px;

}

.admin-user__avatar {

    width: 34px;

    height: 34px;

    font-size: 14px;

}

.admin-user strong {

    color: #d5e2f1;

    font-size: 13px;

    font-weight: 600;

}

.admin-user small {

    color: #8198b4;

    font-size: 10.5px;

}

.admin-logout button {

    padding: 9px;

    color: #8299b4;

    font-size: 12px;

}

.admin-logout button svg {

    width: 14px;

    height: 14px;

}



/* Topbar */

.admin-topbar {

    min-height: 86px;

    padding: 17px clamp(22px, 2.4vw, 34px);

}

.admin-topbar__title > div > span {

    color: #8ba2be;

    font-size: 10.5px;

    letter-spacing: 0.09em;

}

.admin-topbar__title h1 {

    margin-top: 4px;

    color: #f2f8ff;

    font-size: 28px;

    font-weight: 700;

    letter-spacing: -0.025em;

}

.admin-system-state {

    color: #8ba2bd;

    font-size: 10px;

}

.admin-topbar__actions {

    gap: 10px;

}

.admin-body .admin-button {

    min-height: 38px;

    padding: 0 15px;

    font-size: 12.5px;

    font-weight: 500;

}

.admin-body .admin-button svg {

    width: 15px;

    height: 15px;

}

.admin-footer {

    color: #7890ac;

    font-size: 10.5px;

}



/* Shared controls */

.admin-alert,

.admin-flash {

    font-size: 13px;

    line-height: 1.7;

}

.admin-text-link {

    color: #a6bad1;

    font-size: 12px;

}

.admin-live-pill {

    color: #9db3c9;

    font-size: 10.5px;

}

.admin-empty h3 {

    color: #d6e4f4;

    font-size: 18px;

    font-weight: 600;

}

.admin-empty p {

    color: #91a8c2;

    font-size: 13px;

    line-height: 1.8;

}



/* Dashboard header and summary */

.admin-main {

    padding: 30px clamp(22px, 2.4vw, 34px) 48px;

}

.admin-welcome {

    margin-bottom: 28px;

}

.admin-welcome h2 {

    margin-top: 10px;

    color: #f4f9ff;

    font-size: 38px;

    line-height: 1.18;

    letter-spacing: -0.04em;

}

.admin-welcome p {

    margin-top: 11px;

    color: #9db2ca;

    font-size: 14px;

}

.admin-welcome__stamp > span {

    color: #8ba2bd;

    font-size: 10px;

}

.admin-welcome__stamp > strong {

    color: #dceafa;

    font-size: 31px;

}

.admin-welcome__stamp > small {

    color: #7890ac;

    font-size: 9.5px;

}



.admin-stat-grid {

    gap: 12px;

    margin-bottom: 20px;

}

.admin-stat-card {

    min-height: 152px;

    padding: 20px 19px 17px;

}

.admin-stat-card__label {

    color: #8098b6;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.08em;

}

.admin-stat-card > strong {

    margin-top: 20px;

    font-size: 46px;

    font-weight: 600;

    line-height: 0.82;

}

.admin-stat-card > strong.is-compact {

    margin-top: 23px;

    font-size: 33px;

}

.admin-stat-card__foot {

    margin-top: 20px;

    color: #9ab0c8;

    font-size: 12.5px;

}

.admin-stat-card__foot svg {

    width: 13px;

    height: 13px;

}



/* Panels */

.admin-columns,

.admin-side-stack {

    gap: 16px;

}

.admin-panel__head {

    padding: 18px 19px 15px;

}

.admin-panel__head h2 {

    color: #e4effb;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -0.02em;

}

.admin-panel__foot {

    padding: 13px 19px;

    color: #8aa1bc;

    font-size: 11px;

}

.admin-panel__foot a {

    color: #a9c5e2;

    font-size: 12px;

}

.admin-panel__foot svg {

    width: 13px;

    height: 13px;

}

.admin-bars {

    gap: 18px;

    padding: 21px 19px;

}

.admin-bar__meta {

    margin-bottom: 8px;

    color: #a0b5cd;

    font-size: 13px;

}

.admin-bar__meta strong {

    color: #d3e1f0;

    font-size: 13px;

}

.admin-bar__track {

    height: 4px;

}



.admin-recent-item {

    gap: 12px;

    padding: 13px 18px;

}

.admin-recent-item strong {

    color: #d0dfef;

    font-size: 13px;

    font-weight: 600;

}

.admin-recent-item span {

    margin-top: 4px;

    color: #8ca4be;

    font-size: 10.5px;

}

.admin-recent-item > img {

    width: 44px;

    height: 58px;

}



.admin-quick-actions {

    padding: 21px 20px;

}

.admin-quick-actions__head h2 {

    color: #e4effb;

    font-size: 20px;

    font-weight: 600;

}

.admin-quick-grid {

    gap: 10px;

    margin-top: 17px;

}

.admin-quick-grid a {

    padding: 14px;

    column-gap: 11px;

}

.admin-quick-grid strong {

    color: #d0dfef;

    font-size: 13px;

    font-weight: 600;

}

.admin-quick-grid small {

    margin-top: 4px;

    color: #8fa7c1;

    font-size: 11px;

    line-height: 1.5;

}



/* Tables */

.admin-table th {

    padding: 12px 15px;

    color: #8098b6;

    font-size: 11.5px;

}

.admin-table td {

    padding: 13px 15px;

    font-size: 13.5px;

}

.admin-table__stack {

    gap: 4px;

}

.admin-table__stack strong {

    color: #d5e3f2;

    font-size: 14px;

    font-weight: 600;

}

.admin-table__stack > span,

.admin-table__stack small {

    color: #8ba3be;

    font-size: 10.5px;

}

.admin-table__stack small.admin-order-note {

    font-size: 11px;

}

.admin-media-cell {

    gap: 13px;

}

.admin-media-cell > img {

    width: 68px;

    height: 43px;

}

.admin-media-cell--product > img {

    width: 58px;

    height: 48px;

}

.admin-media-cell strong {

    color: #d5e3f2;

    font-size: 14px;

    font-weight: 600;

}

.admin-media-cell span {

    margin-top: 3px;

    color: #8ba3be;

    font-size: 10.5px;

}

.admin-media-cell em {

    margin-top: 5px;

    padding: 2px 5px;

    font-size: 9.5px;

}

.admin-tag {

    padding: 4px 8px;

    color: #a6bad0;

    font-size: 11px;

}

.admin-dot-status {

    color: #a6bad0;

    font-size: 11px;

}

.admin-status {

    padding: 4px 8px;

    font-size: 11px;

}

.admin-action-button {

    min-height: 30px;

    padding: 0 9px;

    font-size: 11px;

}

.admin-action-button svg {

    width: 12px;

    height: 12px;

}

.admin-status-form select {

    height: 32px;

    font-size: 11px;

}

.admin-count {

    font-size: 22px;

}



/* Toolbars and pagination */

.admin-search input {

    height: 40px;

    font-size: 13.5px;

}

.admin-search button {

    font-size: 11.5px;

}

.admin-filter-form > select {

    height: 40px;

    font-size: 13px;

}

.admin-filter-form .admin-button {

    min-height: 40px;

}

.admin-list-toolbar__meta {

    color: #91a9c2;

    font-size: 12px;

}

.admin-list-toolbar__meta strong {

    color: #d0dfef;

    font-size: 12px;

}

.admin-status-tabs a {

    padding: 13px 13px;

    color: #9eb3ca;

    font-size: 13px;

}

.admin-status-tabs a strong {

    font-size: 10px;

}

.admin-pagination {

    color: #8ba3be;

    font-size: 11px;

}

.admin-pagination a {

    min-width: 30px;

    height: 30px;

    font-size: 11px;

}

.admin-data-note {

    color: #8ba3be;

    font-size: 11.5px;

}



/* Forms */

.admin-editor__side {

    gap: 16px;

}

.admin-form-grid {

    gap: 16px;

    padding: 20px;

}

.admin-field {

    gap: 7px;

}

.admin-field label {

    color: #a5b9cf;

    font-size: 12.5px;

}

.admin-label-hint {

    color: #839bb7;

    font-size: 10.5px;

}

.admin-field input,

.admin-field select,

.admin-field textarea {

    padding: 10px 12px;

    font-size: 14px;

    line-height: 1.55;

}

.admin-field input,

.admin-field select {

    height: 40px;

}

.admin-field textarea {

    min-height: 110px;

}

.admin-field select {

    background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;

}

.admin-field > small {

    color: #8ca4be;

    font-size: 11px;

    line-height: 1.65;

}

.admin-check strong {

    color: #c5d5e8;

    font-size: 13px;

    font-weight: 500;

}

.admin-check small {

    color: #91a9c2;

    font-size: 11px;

}

.admin-form-actions {

    gap: 9px;

    padding: 0 20px 20px;

}

.admin-side-fields {

    gap: 15px;

    padding: 20px;

}

.admin-meta-note {

    color: #8098b6;

    font-size: 10.5px;

}

.admin-panel--hint {

    padding: 20px;

}

.admin-panel--hint h3 {

    color: #d0dfef;

    font-size: 17px;

    font-weight: 600;

}

.admin-panel--hint > p {

    color: #93aac3;

    font-size: 12.5px;

    line-height: 1.8;

}

.admin-path-example span,

.admin-path-example code {

    font-size: 10.5px;

}

.admin-media-preview > span {

    color: #8ca4be;

    font-size: 10px;

}



/* Settings */

.admin-settings__intro h2 {

    color: #eff7ff;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: -0.035em;

}

.admin-settings__intro p {

    max-width: 720px;

    color: #9db2ca;

    font-size: 14px;

    line-height: 1.8;

}

.admin-settings__save > span {

    color: #849cb7;

    font-size: 11px;

}

.admin-settings__footer > span {

    color: #91a9c2;

    font-size: 12px;

}

.admin-settings__fields {

    gap: 16px;

    padding: 20px;

}



/* Login */

.admin-login-page {

    background:

        radial-gradient(ellipse at 76% 12%, rgba(38, 111, 235, 0.16), transparent 36%),

        #030812;

}

.login-aside__brand > span {

    font-size: 30px;

}

.login-aside__copy h1 {

    font-size: clamp(46px, 4.5vw, 64px);

    font-weight: 700;

    letter-spacing: -0.045em;

}

.login-aside__copy p {

    color: #a0b5cd;

    font-size: 14px;

    line-height: 1.85;

}

.login-aside__meta {

    color: #829ab6;

    font-size: 10px;

    letter-spacing: 0.06em;

}

.login-home-link {

    color: #9db2ca;

    font-size: 12px;

}

.login-panel__head h2 {

    color: #f3f8ff;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: -0.035em;

}

.login-panel__head p {

    color: #96adc6;

    font-size: 13px;

}

.login-demo > span {

    font-size: 10px;

}

.login-demo p {

    color: #a0b5cd;

    font-size: 13px;

    line-height: 1.65;

}

.login-form .admin-field label {

    color: #a5b9cf;

    font-size: 13px;

}

.login-form .admin-field input {

    height: 44px;

    font-size: 15px;

}

.login-form .admin-button {

    min-height: 46px;

    font-size: 14px;

}

.login-panel__foot {

    color: #829ab6;

    font-size: 10px;

    letter-spacing: 0.04em;

}



@media (max-width: 900px) {

    .admin-sidebar {

        width: 252px;

    }

    .admin-topbar {

        min-height: 72px;

    }

    .admin-main {

        padding-top: 22px;

    }

}



@media (max-width: 680px) {

    .admin-body {

        font-size: 14px;

    }

    .admin-body p {

        font-size: 13.5px;

    }

    .admin-topbar {

        min-height: 70px;

        padding: 13px 16px;

    }

    .admin-topbar__title > div > span {

        font-size: 9.5px;

    }

    .admin-topbar__title h1 {

        font-size: 22px;

    }

    .admin-body .admin-button {

        min-height: 34px;

        font-size: 12px;

    }

    .admin-main {

        padding: 18px 16px 38px;

    }

    .admin-welcome {

        margin-bottom: 20px;

    }

    .admin-welcome h2 {

        font-size: 29px;

    }

    .admin-welcome p {

        font-size: 13px;

    }

    .admin-stat-card {

        min-height: 126px;

        padding: 15px;

    }

    .admin-stat-card__label {

        font-size: 10px;

    }

    .admin-stat-card > strong {

        margin-top: 17px;

        font-size: 40px;

    }

    .admin-stat-card > strong.is-compact {

        margin-top: 19px;

        font-size: 27px;

    }

    .admin-stat-card__foot {

        margin-top: 17px;

        font-size: 11px;

    }

    .admin-panel__head {

        padding: 14px 15px 12px;

    }

    .admin-panel__head h2 {

        font-size: 18px;

    }

    .admin-panel__foot {

        padding: 12px 15px;

        font-size: 10.5px;

    }

    .admin-body .admin-table th {

        padding: 10px 12px;

        font-size: 10.5px;

    }

    .admin-body .admin-table td {

        padding: 11px 12px;

        font-size: 13px;

    }

    .admin-table__stack strong {

        font-size: 13.5px;

    }

    .admin-search input,

    .admin-filter-form > select {

        height: 38px;

        font-size: 13px;

    }

    .admin-field input,

    .admin-field select {

        height: 39px;

        font-size: 13.5px;

    }

    .admin-field textarea {

        font-size: 13.5px;

    }

    .admin-field label {

        font-size: 12px;

    }

    .admin-footer {

        padding: 12px 16px;

        font-size: 9.5px;

    }

    .admin-settings__intro h2 {

        font-size: 28px;

    }

    .admin-settings__intro p {

        font-size: 13px;

    }

    .login-aside__copy h1 {

        font-size: 40px;

    }

    .login-panel__head h2 {

        font-size: 28px;

    }

    .login-panel__head p {

        font-size: 12.5px;

    }

    .login-form .admin-field input {

        height: 43px;

        font-size: 14px;

    }

    .login-form .admin-button {

        min-height: 44px;

        font-size: 13.5px;

    }

    .login-panel__foot {

        font-size: 9.5px;

    }

}



/* ADMIN_UI_POLISH_V2 — secondary-label legibility floor */

.admin-kicker,

.admin-sidebar__label {

    font-size: 11.5px;

    letter-spacing: 0.09em;

}

.admin-sidebar__brand > small {

    font-size: 10.5px;

}

.admin-nav a > small {

    font-size: 10.5px;

}

.admin-user small {

    font-size: 11px;

}

.admin-topbar__title > div > span {

    font-size: 11px;

}

.admin-system-state {

    font-size: 10.5px;

}

.admin-footer {

    font-size: 11px;

}

.admin-live-pill {

    font-size: 11px;

}

.admin-stat-card__label {

    font-size: 11.5px;

}

.admin-stat-card__foot {

    font-size: 13px;

}

.admin-table th {

    font-size: 12px;

}

.admin-mono {

    font-size: 12px;

}

.admin-table__stack > span,

.admin-table__stack small {

    font-size: 11.5px;

}

.admin-table__stack small.admin-order-note {

    font-size: 11.5px;

}

.admin-media-cell span {

    font-size: 11.5px;

}

.admin-tag,

.admin-dot-status,

.admin-status {

    font-size: 11.5px;

}

.admin-action-button {

    font-size: 11.5px;

}

.admin-panel__foot {

    font-size: 11.5px;

}

.admin-panel__foot a {

    font-size: 12px;

}

.admin-recent-item span {

    font-size: 11.5px;

}

.admin-quick-grid small {

    font-size: 12px;

}

.admin-list-toolbar__meta,

.admin-list-toolbar__meta strong {

    font-size: 12px;

}

.admin-pagination {

    font-size: 11.5px;

}

.admin-data-note {

    font-size: 11.5px;

}

.admin-field label {

    font-size: 13px;

}

.admin-label-hint {

    font-size: 11px;

}

.admin-field > small {

    font-size: 11.5px;

}

.admin-check small {

    font-size: 11.5px;

}

.admin-meta-note,

.admin-path-example span,

.admin-path-example code {

    font-size: 11px;

}

.admin-settings__save > span {

    font-size: 11.5px;

}

.admin-settings__footer > span {

    font-size: 12px;

}

.admin-empty p {

    font-size: 13.5px;

}

.login-aside__meta {

    font-size: 10.5px;

}

.login-panel__foot {

    font-size: 10.5px;

}

.login-demo > span {

    font-size: 10.5px;

}



@media (max-width: 680px) {

    .admin-kicker,

    .admin-sidebar__label {

        font-size: 10.5px;

    }

    .admin-nav a > small {

        font-size: 9.5px;

    }

    .admin-sidebar__brand > small,

    .admin-system-state,

    .admin-footer {

        font-size: 10px;

    }

    .admin-stat-card__label {

        font-size: 10.5px;

    }

    .admin-table th {

        font-size: 11px;

    }

    .admin-mono,

    .admin-table__stack > span,

    .admin-table__stack small,

    .admin-media-cell span {

        font-size: 11px;

    }

    .admin-panel__foot {

        font-size: 11px;

    }

    .admin-field label {

        font-size: 12.5px;

    }

    .login-aside__meta,

    .login-panel__foot {

        font-size: 9.5px;

    }

}



/* ADMIN_UI_POLISH_V3 — final readable-label sizing */

.admin-kicker,

.admin-sidebar__label {

    font-size: 12px;

}

.admin-sidebar__brand > small {

    font-size: 11px;

}

.admin-nav a > small {

    font-size: 11px;

}

.admin-topbar__title > div > span {

    font-size: 11.5px;

}

.admin-system-state {

    font-size: 11px;

}

.admin-stat-card__label {

    font-size: 12px;

}

.admin-stat-card__foot {

    font-size: 13px;

}

.admin-body .admin-table th {

    font-size: 12.5px;

}

.admin-body .admin-table td {

    font-size: 14px;

}

.admin-table__stack strong {

    font-size: 14.5px;

}

.admin-table__stack > span,

.admin-table__stack small,

.admin-media-cell span {

    font-size: 12px;

}

.admin-tag,

.admin-dot-status,

.admin-status {

    font-size: 12px;

}

.admin-action-button {

    font-size: 12px;

}

.admin-panel__foot {

    font-size: 12px;

}

.admin-panel__foot a {

    font-size: 12.5px;

}

.admin-footer {

    font-size: 11.5px;

}

.admin-recent-item span {

    font-size: 12px;

}

.admin-quick-grid small {

    font-size: 12.5px;

}

.admin-pagination,

.admin-data-note {

    font-size: 12px;

}

.admin-field > small,

.admin-check small {

    font-size: 12px;

}

.admin-settings__save > span {

    font-size: 12px;

}

.admin-settings__footer > span {

    font-size: 12.5px;

}

.login-aside__meta,

.login-panel__foot {

    font-size: 11px;

}



@media (max-width: 680px) {

    .admin-kicker,

    .admin-sidebar__label {

        font-size: 11px;

    }

    .admin-nav a > small,

    .admin-sidebar__brand > small,

    .admin-system-state {

        font-size: 10px;

    }

    .admin-stat-card__label {

        font-size: 11px;

    }

    .admin-body .admin-table th {

        font-size: 11.5px;

    }

    .admin-body .admin-table td {

        font-size: 13.5px;

    }

    .admin-tag,

    .admin-dot-status,

    .admin-status,

    .admin-panel__foot {

        font-size: 11.5px;

    }

    .admin-footer {

        font-size: 10.5px;

    }

    .login-panel__foot {

        font-size: 10px;

    }

}



/* ADMIN_SEO_PANEL */

.admin-settings__seo {

    grid-column: 1 / -1;

}

.admin-settings__seo .admin-settings__fields {

    grid-template-columns: 1fr 1fr;

}

.admin-seo-note {

    grid-column: 1 / -1;

    margin: 2px 0 0;

    color: #8fa7c1;

    font-family: var(--cn);

    font-size: 12.5px;

    line-height: 1.8;

}

@media (max-width: 760px) {

    .admin-settings__seo .admin-settings__fields {

        grid-template-columns: 1fr;

    }

}



/* ADMIN_TRANSLATION_PAGE */

.translation-page .admin-settings__save form {

    margin: 0;

}

.translation-page .admin-settings__save .admin-button {

    min-height: 42px;

    padding: 0 18px;

}

.translation-page .admin-stat-grid {

    margin-bottom: 0;

}

.translation-page .admin-columns {

    margin-top: 14px;

}

.translation-table th:first-child {

    width: 42%;

}

.translation-table td {

    vertical-align: top;

}

.translation-cell {

    max-width: 520px;

    color: #c6d6e8;

    font-family: var(--cn);

    font-size: 13.5px;

    line-height: 1.7;

    white-space: normal;

    overflow-wrap: anywhere;

}

.translation-cell--target {

    color: #9fdcff;

}

.translation-type {

    display: inline-block;

    padding: 3px 7px;

    border: 1px solid rgba(122, 166, 235, 0.14);

    color: #9ab1c9;

    font-family: var(--mono);

    font-size: 10.5px;

    line-height: 1.4;

    white-space: nowrap;

}

.translation-page .admin-empty {

    padding: 18px 0;

}

@media (max-width: 680px) {

    .translation-page .admin-settings__save {

        width: 100%;

    }

    .translation-page .admin-settings__save form,

    .translation-page .admin-settings__save .admin-button {

        width: 100%;

    }

    .translation-cell {

        font-size: 13px;

    }

}

/* ADMIN_PER_BLOCK_TRANSLATION */
.admin-translate-button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(123, 187, 255, 0.24);
    border-radius: 8px;
    background: rgba(24, 61, 105, 0.28);
    color: #9fd3ff;
    font-family: var(--cn);
    font-size: 11.5px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admin-translate-button:hover {
    border-color: rgba(123, 187, 255, 0.52);
    background: rgba(38, 91, 153, 0.4);
    color: #e6f6ff;
}
.admin-translate-button svg {
    width: 14px;
    height: 14px;
}

/* ADMIN_PRODUCT_TYPE_SETTINGS */
.admin-settings__types {
    grid-column: 1 / -1;
}
.admin-settings__types .admin-settings__fields {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) {
    .admin-settings__types .admin-settings__fields {
        grid-template-columns: 1fr;
    }
}