@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #060813; --panel: #0d1120; --panel-2: #111627; --text: #f4f6fb;
  --muted: #8e96aa; --line: rgba(255,255,255,.09); --cyan: #64f5d2;
  --blue: #65a8ff; --pink: #ff6caa; --red: #ff6f79; --sidebar: 245px;
  --ease: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: "Manrope","Noto Sans SC",system-ui,sans-serif; }
button,input,textarea,select { font: inherit; } button,a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; }
body::selection { background: var(--cyan); color: #05100d; }

.auth-page { min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 10%,#111b34 0,transparent 40%),var(--bg); }
.auth-glow { position: fixed; width: 430px; height: 430px; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; }.auth-glow-one { background: var(--cyan); left: -180px; bottom: -180px; }.auth-glow-two { background: #946dff; right: -170px; top: -180px; }
.auth-shell { width: min(470px,calc(100% - 32px)); padding: 40px 0; position: relative; z-index: 1; }.admin-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; margin-bottom: 22px; }.admin-brand > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(100,245,210,.45); background: rgba(100,245,210,.08); border-radius: 11px; color: var(--cyan); font-weight: 800; }.admin-brand b { font-weight: 800; }
.auth-card { padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: rgba(13,17,32,.76); backdrop-filter: blur(20px); box-shadow: 0 30px 100px rgba(0,0,0,.3); }.admin-kicker { color: var(--cyan); font-size: 9px; letter-spacing: .2em; font-weight: 800; margin: 0 0 9px; }.auth-card h1 { margin: 0 0 13px; font-size: 32px; letter-spacing: -.045em; }.auth-intro { color: var(--muted); line-height: 1.8; font-size: 13px; margin: 0 0 25px; }.auth-form { display: grid; gap: 16px; }.auth-form label,.admin-form label { display: grid; gap: 8px; color: #abb2c1; font-size: 12px; font-weight: 600; }
input,textarea,select { width: 100%; color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 11px; outline: 0; transition: border-color .25s,background .25s,box-shadow .25s; } input,select { height: 44px; padding: 0 13px; } textarea { padding: 13px; resize: vertical; line-height: 1.7; min-height: 100px; } input:focus,textarea:focus,select:focus { border-color: rgba(100,245,210,.5); background: rgba(100,245,210,.035); box-shadow: 0 0 0 3px rgba(100,245,210,.07); } input[type=file] { padding: 8px; } input[type=file]::file-selector-button { height: 27px; border: 0; border-radius: 7px; padding: 0 10px; margin-right: 10px; background: rgba(100,245,210,.12); color: var(--cyan); cursor: pointer; }
.admin-primary { min-height: 45px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; color: #06110e; background: var(--cyan); border: 0; border-radius: 11px; padding: 0 18px; font-weight: 800; font-size: 13px; cursor: pointer; transition: transform .25s,background .25s,box-shadow .25s; }.admin-primary:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 12px 35px rgba(100,245,210,.13); }.auth-tip { color: #656e82; font-size: 10px; text-align: center; margin: 18px 0 0; }.back-site { display: block; color: var(--muted); font-size: 11px; text-align: center; margin-top: 22px; transition: color .25s; }.back-site:hover { color: var(--cyan); }
.flash { padding: 12px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; }.auth-card .flash { margin-bottom: 17px; }.flash-success { color: #9af7df; background: rgba(100,245,210,.08); border: 1px solid rgba(100,245,210,.2); }.flash-error { color: #ffadb4; background: rgba(255,111,121,.08); border: 1px solid rgba(255,111,121,.2); }

.admin-page { background: linear-gradient(125deg,rgba(100,245,210,.025),transparent 30%),var(--bg); }
.admin-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar); padding: 27px 21px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(8,11,21,.91); backdrop-filter: blur(18px); }.admin-sidebar .admin-brand { margin: 0 6px 42px; }.admin-nav { display: grid; gap: 7px; }.admin-nav a { min-height: 43px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border-radius: 10px; color: #7e879a; font-size: 12px; font-weight: 600; transition: color .25s,background .25s,transform .25s; }.admin-nav a i { width: 21px; color: #697286; font-style: normal; font-size: 15px; text-align: center; }.admin-nav a:hover,.admin-nav a.active { color: var(--text); background: rgba(255,255,255,.05); transform: translateX(3px); }.admin-nav a.active i { color: var(--cyan); }.sidebar-bottom { margin-top: auto; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }.sidebar-bottom a,.sidebar-bottom button { width: 100%; min-height: 39px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #7f8799; border: 0; border-radius: 9px; background: transparent; font-size: 11px; cursor: pointer; transition: color .25s,background .25s; }.sidebar-bottom a:hover,.sidebar-bottom button:hover { color: var(--cyan); background: rgba(100,245,210,.055); }
.admin-menu-toggle { display: none; }
.admin-main { margin-left: var(--sidebar); width: calc(100% - var(--sidebar)); max-width: 1420px; padding: 34px clamp(28px,4vw,65px) 70px; }.admin-topbar { min-height: 85px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 30px; }.admin-topbar h1 { margin: 4px 0 0; font-size: 29px; letter-spacing: -.04em; }.admin-status { display: flex; align-items: center; gap: 8px; color: #778094; font-size: 10px; letter-spacing: .08em; margin-top: 18px; }.admin-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2s infinite; }@keyframes pulse { 50% { opacity: .45; } }
.flash-stack { position: sticky; top: 15px; z-index: 20; display: grid; gap: 8px; margin-bottom: 20px; }.flash-stack .flash { box-shadow: 0 12px 35px rgba(0,0,0,.2); backdrop-filter: blur(15px); }
.admin-section { scroll-margin-top: 20px; padding: 35px 0 70px; border-bottom: 1px solid var(--line); }.admin-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }.admin-section-title > div { position: relative; padding-left: 49px; }.admin-section-title > div > span { position: absolute; left: 0; bottom: 4px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--cyan); font-size: 9px; border: 1px solid rgba(100,245,210,.25); border-radius: 50%; }.admin-section-title p { color: #727b8e; font-size: 11px; margin: 0; }.admin-section-title > div p { color: var(--cyan); letter-spacing: .18em; font-size: 8px; font-weight: 800; margin-bottom: 5px; }.admin-section-title h2 { font-size: 28px; letter-spacing: -.035em; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.stat-card { min-height: 145px; padding: 23px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); position: relative; overflow: hidden; }.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -45px; bottom: -50px; border-radius: 50%; background: var(--cyan); filter: blur(35px); opacity: .11; }.stat-card span { color: #81899b; font-size: 11px; }.stat-card strong { font-size: 40px; line-height: 1; margin: 19px 0 auto; }.stat-card small { color: #596174; font-size: 8px; letter-spacing: .2em; }.quick-note { margin-top: 14px; padding: 20px 22px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(101,168,255,.13); border-radius: 15px; background: rgba(101,168,255,.035); }.quick-note-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); border: 1px solid rgba(101,168,255,.2); }.quick-note h3 { font-size: 13px; margin: 0 0 5px; }.quick-note p { color: #788195; font-size: 11px; line-height: 1.6; margin: 0; }
.admin-panel,.content-list { border: 1px solid var(--line); border-radius: 18px; background: rgba(13,17,32,.65); overflow: hidden; }.create-panel { padding: 25px; }.panel-heading,.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.panel-heading { padding-bottom: 21px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }.panel-heading > div { display: flex; align-items: center; gap: 12px; }.panel-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(100,245,210,.2); border-radius: 9px; background: rgba(100,245,210,.055); }.panel-heading h3,.list-heading h3 { font-size: 15px; margin: 0; }.panel-heading small { color: #596174; font-size: 8px; letter-spacing: .17em; }
.admin-form { display: grid; gap: 20px; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.field-grid.two-cols { grid-template-columns: 1fr 1fr; }.field-wide { grid-column: 1/-1; }.check-field { display: flex !important; grid-template-columns: auto 1fr; align-items: center; align-self: end; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); cursor: pointer; }.check-field input { width: 16px; height: 16px; accent-color: var(--cyan); }.check-field span { color: #9aa2b3; font-size: 11px; }.danger-check span { color: #dd8b93; }.admin-form > .admin-primary { justify-self: start; min-width: 135px; }.file-preview { min-height: 120px; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; color: #596174; font-size: 10px; overflow: hidden; background: rgba(255,255,255,.015); }.file-preview img { width: 100%; max-height: 260px; object-fit: cover; }.square-preview { width: 145px; aspect-ratio: 1; min-height: 0; }.square-preview img { height: 100%; max-height: none; }
.content-list { margin-top: 17px; }.list-heading { padding: 18px 22px; border-bottom: 1px solid var(--line); }.list-heading span { color: #687185; font-size: 10px; }.editor-item { border-bottom: 1px solid var(--line); }.editor-item:last-child { border-bottom: 0; }.editor-item summary { list-style: none; min-height: 82px; padding: 13px 19px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: background .25s; }.editor-item summary::-webkit-details-marker { display: none; }.editor-item summary:hover,.editor-item[open] summary { background: rgba(255,255,255,.025); }.summary-thumb { width: 80px; height: 54px; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: #111626; }.summary-thumb.square { width: 54px; height: 54px; }.summary-thumb img { width: 100%; height: 100%; object-fit: cover; }.summary-thumb.empty { display: grid; place-items: center; color: #5d6578; border: 1px solid var(--line); }.summary-copy { min-width: 0; }.summary-copy h4 { font-size: 13px; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.summary-copy p { max-width: min(620px,55vw); color: #687185; font-size: 9px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.summary-copy b { color: #9199a9; font-weight: 600; }.summary-copy .state-online { color: var(--cyan); }.summary-open { margin-left: auto; color: #687185; font-size: 10px; }.editor-item[open] .summary-open { color: var(--cyan); }.editor-body { padding: 24px; border-top: 1px solid var(--line); background: rgba(0,0,0,.09); }.editor-body audio { width: 100%; height: 42px; margin-bottom: 20px; }.delete-form { margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(255,111,121,.1); }.danger-button { min-height: 38px; border: 1px solid rgba(255,111,121,.22); border-radius: 9px; padding: 0 13px; color: #ff929b; background: rgba(255,111,121,.055); cursor: pointer; font-size: 11px; transition: background .25s,border-color .25s; }.danger-button:hover { background: rgba(255,111,121,.12); border-color: rgba(255,111,121,.4); }.empty-state { padding: 45px 20px; text-align: center; color: #687185; font-size: 11px; }
.security-panel { padding: 25px; }.compact-form { max-width: 640px; }.admin-footer { padding: 25px 0 0; color: #555d70; font-size: 9px; letter-spacing: .13em; text-align: center; }

@media (max-width: 900px) {
  :root { --sidebar: 220px; }
  .admin-main { padding-left: 25px; padding-right: 25px; }.admin-section-title > p { display: none; }
  .field-grid,.field-grid.two-cols { grid-template-columns: 1fr; }.field-wide { grid-column: auto; }.stat-grid { gap: 9px; }
}
@media (max-width: 700px) {
  :root { --sidebar: 265px; }
  .admin-sidebar { transform: translateX(-105%); transition: transform .35s var(--ease); box-shadow: 25px 0 80px rgba(0,0,0,.45); }.admin-sidebar.open { transform: translateX(0); }
  .admin-menu-toggle { display: block; position: fixed; z-index: 50; right: 16px; top: 15px; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 11px; background: rgba(13,17,32,.9); backdrop-filter: blur(12px); }.admin-menu-toggle span { display: block; width: 19px; height: 1px; margin: 6px auto; background: var(--text); transition: transform .3s; }.admin-menu-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }.admin-menu-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .admin-main { margin: 0; width: 100%; padding: 25px 16px 50px; }.admin-topbar { padding-right: 50px; }.admin-status { display: none; }.admin-section { padding: 25px 0 55px; }.stat-grid { grid-template-columns: 1fr; }.stat-card { min-height: 115px; }.stat-card strong { margin: 13px 0 auto; }.create-panel,.editor-body,.security-panel { padding: 19px; }.editor-item summary { padding: 12px; }.summary-thumb { width: 64px; }.summary-copy p { max-width: 42vw; }.summary-open { font-size: 0; }.summary-open::after { content: "+"; font-size: 16px; }.quick-note { align-items: flex-start; }
  .auth-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }