:root { --admin-ink: #09111f; --admin-paper: #f4f7fc; --admin-muted: #67758b; --admin-line: rgba(9,17,31,.12); }
* { box-sizing: border-box; }
body.adminPage { min-width: 320px; margin: 0; color: var(--admin-ink); background: var(--admin-paper); font-family: Manrope, Arial, sans-serif; }
.adminShell { width: min(1380px, calc(100% - 64px)); margin: 0 auto; }
.adminHero { padding: 166px 0 92px; color: #fff; background: radial-gradient(circle at 74% 18%, rgba(56,220,255,.19), transparent 22%), radial-gradient(circle at 86% 70%, rgba(140,91,255,.18), transparent 26%), #08101d; }
.adminHero h1 { max-width: 800px; margin: 18px 0; font-size: clamp(50px, 6vw, 86px); font-weight: 760; letter-spacing: -.075em; line-height: .94; }
.adminHero h1 em { color: transparent; background: linear-gradient(90deg, #fff, #74ddff 42%, #9d7cff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.adminHero > div > p:not(.adminKicker) { max-width: 640px; margin: 0; color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.7; }
.adminKicker { display: flex; gap: 10px; align-items: center; margin: 0; color: #bff8ff; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 800; }
.adminKicker i { width: 8px; height: 8px; border-radius: 50%; background: #40e5bd; box-shadow: 0 0 0 5px rgba(64,229,189,.1), 0 0 18px #40e5bd; }
.adminHeroLinks { display: flex; gap: 22px; margin-top: 34px; }.adminHeroLinks a { color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; }.adminHeroLinks a span { margin-left: 6px; color: #38dcff; }
.adminWorkspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 50px; padding: 68px 0 120px; }
.adminSidebar { align-self: start; position: sticky; top: 106px; display: grid; gap: 8px; }.adminTab { display: flex; min-height: 55px; align-items: center; gap: 14px; padding: 0 16px; border: 1px solid transparent; border-radius: 13px; color: var(--admin-muted); background: transparent; text-align: left; font-size: 14px; font-weight: 750; }.adminTab span { color: #95a4b9; font-family: "DM Mono", monospace; font-size: 10px; }.adminTab.isActive { border-color: rgba(39,100,255,.2); color: #173b7a; background: #e6efff; }.adminTab.isActive span { color: #2764ff; }
.adminLocalNote { padding: 20px 16px; margin-top: 22px; border: 1px solid var(--admin-line); border-radius: 16px; background: #fff; }.adminLocalNote i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #ffb84e; }.adminLocalNote p { margin: 12px 0 6px; font-size: 12px; font-weight: 800; }.adminLocalNote small { color: var(--admin-muted); font-size: 10px; line-height: 1.45; }
.adminPanelHead { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }.adminPanelHead h2 { margin: 12px 0 8px; font-size: clamp(35px,4vw,54px); letter-spacing: -.065em; line-height: .98; }.adminPanelHead > div > p:last-child { max-width: 620px; margin: 0; color: var(--admin-muted); font-size: 13px; line-height: 1.6; }.adminStat { padding: 9px 12px; border: 1px solid var(--admin-line); border-radius: 99px; color: #2764ff; background: #fff; font: 10px "DM Mono", monospace; white-space: nowrap; }
.adminFormLayout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px,.88fr); gap: 24px; align-items: start; }.contentForm, .contentListPanel { padding: 28px; border: 1px solid var(--admin-line); border-radius: 21px; background: #fff; box-shadow: 0 18px 44px rgba(8,22,46,.05); }.contentForm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.contentForm label { display: grid; gap: 8px; }.contentForm label.wide, .contentForm .adminSubmit, .contentForm .adminFormStatus { grid-column: 1/-1; }.contentForm label > span { color: var(--admin-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; }.contentForm input, .contentForm textarea, .contentForm select { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #d7e0eb; border-radius: 10px; outline: 0; color: var(--admin-ink); background: #fbfcff; font: inherit; font-size: 13px; }.contentForm textarea { min-height: 76px; resize: vertical; line-height: 1.55; }.contentForm textarea[name=content] { min-height: 330px; }.contentForm input:focus, .contentForm textarea:focus, .contentForm select:focus { border-color: #2764ff; box-shadow: 0 0 0 4px rgba(39,100,255,.09); }.contentForm small { color: var(--admin-muted); font-size: 10px; line-height: 1.45; }.adminSubmit { display: inline-flex; width: max-content; min-height: 48px; align-items: center; gap: 12px; padding: 0 19px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#3770ff,#754eff); box-shadow: 0 12px 24px rgba(53,92,255,.24); font-size: 12px; font-weight: 800; }.adminSubmit:hover { transform: translateY(-1px); }.adminFormStatus { min-height: 20px; margin: 0; color: #2764ff; font-size: 11px; line-height: 1.45; }
.contentListPanel { max-height: 930px; overflow: auto; }.contentListHead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--admin-line); color: var(--admin-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; }.contentListHead b { color: #2764ff; font-family: "DM Mono", monospace; font-weight: 500; }.contentList { display: grid; gap: 10px; margin-top: 14px; }.contentItem { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px; border: 1px solid var(--admin-line); border-radius: 13px; }.contentItem p { margin: 0; color: #1b2a41; font-size: 12px; font-weight: 750; line-height: 1.35; }.contentItem small { display: block; margin-top: 5px; color: var(--admin-muted); font-size: 10px; }.contentItem b { color: #2764ff; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; }.contentDelete { align-self: start; padding: 0; border: 0; color: #d14a5e; background: transparent; font-size: 10px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .adminShell { width: min(100% - 40px, 760px); }.adminHero { padding-top: 138px; }.adminWorkspace { grid-template-columns: 1fr; gap: 34px; }.adminSidebar { position: static; display: flex; flex-wrap: wrap; }.adminTab { flex: 1 1 200px; }.adminLocalNote { display: none; }.adminFormLayout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .adminShell { width: calc(100% - 28px); }.adminHero { padding: 128px 0 65px; }.adminHero h1 { font-size: 48px; }.adminWorkspace { padding: 45px 0 80px; }.adminPanelHead { align-items: start; flex-direction: column; }.contentForm, .contentListPanel { padding: 20px 16px; border-radius: 16px; }.contentForm { grid-template-columns: 1fr; }.contentForm label.wide, .contentForm .adminSubmit, .contentForm .adminFormStatus { grid-column: auto; }.contentForm textarea[name=content] { min-height: 270px; } }