:root { --bg: #fff8fb; --surface: #fff; --ink: #302630; --muted: #786d79; --line: rgba(111,76,101,0.14); --pink: #ef5796; --pink-deep: #cb3376; --pink-soft: #ffe2ee; --mint: #e2f7ed; --shadow: 0 20px 55px rgba(100,62,88,0.11); --font: 'DM Sans', sans-serif; --display: 'Space Grotesk', sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: radial-gradient(circle at 10% 0,rgba(255,184,211,0.46),transparent 30rem),radial-gradient(circle at 100% 30%,rgba(214,241,255,0.55),transparent 28rem),var(--bg); color: var(--ink); font-family: var(--font); }
button, input, textarea { font: inherit; }.hidden { display: none !important; }
.admin-shell { width: min(1380px,calc(100% - 32px)); margin: 0 auto; padding-bottom: 42px; }
.admin-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }.admin-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg,#ff8ab7,#e7458a); color: #fff; box-shadow: 0 12px 28px rgba(219,55,128,0.22); font: 700 12px var(--display); }.admin-brand > span:last-child { display: flex; flex-direction: column; }.admin-brand small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }.admin-brand strong { font: 700 19px var(--display); }
.admin-actions { display: flex; align-items: center; gap: 10px; }.ghost-link, .save-button, .secondary-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; padding: 0 17px; font-weight: 800; font-size: 13px; cursor: pointer; }.ghost-link { border: 1px solid var(--line); background: rgba(255,255,255,0.75); color: var(--ink); text-decoration: none; }.save-button { border: 0; background: linear-gradient(135deg,#ff79ad,#df3d84); color: #fff; box-shadow: 0 12px 25px rgba(215,51,122,0.22); }.secondary-button { border: 1px solid var(--line); background: #fff; color: var(--pink-deep); }
.login-card { min-height: 390px; display: grid; grid-template-columns: 1fr minmax(300px,480px); align-items: center; gap: 60px; margin-top: 50px; padding: clamp(28px,5vw,70px); border: 1px solid var(--line); border-radius: 34px; background: rgba(255,255,255,0.78); box-shadow: var(--shadow); backdrop-filter: blur(18px); }.eyebrow { color: var(--pink-deep); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }.login-card h1 { margin: 15px 0 12px; font: 700 clamp(38px,5vw,64px)/1 var(--display); letter-spacing: -2px; }.login-card p { max-width: 620px; color: var(--muted); line-height: 1.7; }.login-card form { display: grid; gap: 12px; padding: 25px; border-radius: 24px; background: linear-gradient(145deg,#fff0f6,#fff8e9); }.login-card input, .form-grid input, .form-grid textarea, .entity-fields input, .entity-group-heading input, .json-editor-block textarea { width: 100%; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }.login-card input { min-height: 50px; padding: 0 15px; }.login-card form button { min-height: 50px; border: 0; border-radius: 13px; background: #312632; color: #fff; font-weight: 850; cursor: pointer; }.form-message { grid-column: 2; color: #c7376f !important; font-size: 12px; }
.admin-main { padding-top: 24px; }.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }.stats-grid article { min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,0.78); box-shadow: var(--shadow); }.stats-grid span { color: var(--muted); font-size: 12px; font-weight: 800; }.stats-grid strong { font: 700 34px var(--display); color: var(--pink-deep); }
.admin-tabs { position: sticky; top: 8px; z-index: 5; display: flex; gap: 7px; margin: 18px 0; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.78); box-shadow: var(--shadow); backdrop-filter: blur(18px); }.admin-tabs button { flex: 0 0 auto; min-height: 43px; padding: 0 16px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 850; cursor: pointer; }.admin-tabs button.is-active { background: var(--pink); color: #fff; }
.admin-panel { display: none; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,0.8); box-shadow: var(--shadow); }.admin-panel.is-active { display: block; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.panel-heading h2 { margin-top: 7px; font: 700 31px var(--display); letter-spacing: -1.2px; }.hint-chip { padding: 9px 12px; border-radius: 999px; background: var(--mint); color: #377e63; font-size: 10px; font-weight: 800; }.panel-note { margin: -10px 0 20px; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; gap: 16px; }.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }.form-grid label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }.form-grid .full { grid-column: 1 / -1; }.form-grid input { min-height: 46px; padding: 0 13px; }.form-grid textarea { padding: 13px; resize: vertical; }.form-grid input:focus, .form-grid textarea:focus, .entity-fields input:focus, .json-editor-block textarea:focus { border-color: rgba(239,87,150,0.55); box-shadow: 0 0 0 4px rgba(239,87,150,0.09); }
.json-editor-block { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff8fb; }.json-editor-block > div { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }.json-editor-block strong { font: 700 16px var(--display); }.json-editor-block small { color: var(--muted); }.json-editor-block textarea { min-height: 240px; padding: 14px; resize: vertical; font: 12px/1.55 Consolas, monospace; }.json-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.json-split .json-editor-block { margin-top: 0; }
.entity-editor { display: grid; gap: 15px; }.entity-group { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; }.entity-group-heading { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(90deg,#fff0f6,#fff9ee); }.entity-group-heading input { min-height: 40px; padding: 0 12px; font-weight: 850; }.entity-group-heading span { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; }.entity-list { display: grid; }.entity-row { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--line); }.entity-avatar { position: relative; width: 48px; height: 48px; overflow: hidden; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#ffe2ee,#eee5ff); color: var(--pink-deep); font: 700 12px var(--display); }.entity-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }.entity-fields { display: grid; grid-template-columns: minmax(190px,0.75fr) minmax(260px,1.25fr); gap: 10px; }.entity-fields input { min-height: 42px; padding: 0 12px; }.remove-button { width: 34px; height: 34px; border: 0; border-radius: 11px; background: #fff0f3; color: #d33f70; font-size: 20px; cursor: pointer; }
.save-bar { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 13px 14px 13px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.88); box-shadow: var(--shadow); backdrop-filter: blur(18px); }.save-bar span { color: var(--muted); font-size: 12px; font-weight: 700; }.save-bar span[data-type='success'] { color: #2f916d; }.save-bar span[data-type='warning'] { color: #bb7b18; }.save-bar span[data-type='error'] { color: #cf346e; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2,1fr); }.login-card { grid-template-columns: 1fr; gap: 28px; }.form-message { grid-column: auto; }.json-split { grid-template-columns: 1fr; }.entity-fields { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .admin-shell { width: calc(100% - 18px); }.admin-header { align-items: flex-start; padding: 12px 0; }.admin-actions .ghost-link { display: none; }.admin-brand small { display: none; }.admin-panel { padding: 18px; }.stats-grid { gap: 8px; }.stats-grid article { min-height: 96px; padding: 16px; }.stats-grid strong { font-size: 27px; }.two-columns { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.panel-heading { align-items: flex-start; flex-direction: column; }.entity-row { grid-template-columns: 45px 1fr 34px; padding: 10px; }.entity-avatar { width: 42px; height: 42px; }.save-bar { align-items: stretch; flex-direction: column; }.save-bar .save-button { width: 100%; } }