@font-face { font-family: Golos; src: url("../assets/fonts/GolosText-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; --green:#126a3a; --green-2:#1d855b; --glow:#2dc974; --ink:#262424; --paper:#f5f6f1; --muted:#66736e; --line:rgba(18,106,58,.18); --danger:#a93d32; }
* { box-sizing: border-box; min-width: 0; }
html { background: var(--paper); overflow-x: clip; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 10% 0%, rgba(45,201,116,.1), transparent 32%), var(--paper); font-family:Golos,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.admin-shell { min-height:100svh; }
.login-card { width:min(calc(100% - 32px), 560px); min-height:620px; margin:clamp(18px,7vh,80px) auto; padding:clamp(28px,5vw,54px); display:flex; flex-direction:column; gap:42px; border:1px solid var(--line); border-radius:32px; background:rgba(255,255,255,.86); box-shadow:0 30px 90px rgba(6,28,19,.13); }
.admin-brand { display:inline-flex; align-items:center; gap:13px; width:max-content; color:inherit; text-decoration:none; }
.admin-brand img { width:52px; height:52px; padding:5px; object-fit:cover; border:1px solid var(--line); border-radius:15px; background:white; }
.admin-brand span { display:grid; gap:3px; }.admin-brand b { letter-spacing:.06em; }.admin-brand small { color:var(--muted); font-size:12px; }
.eyebrow { display:block; margin-bottom:12px; color:var(--green-2); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.login-card h1,.editor-header h1 { margin:0; font-size:clamp(38px,7vw,64px); line-height:.96; letter-spacing:-.05em; overflow-wrap:anywhere; hyphens:auto; }
.login-card p { color:var(--muted); line-height:1.6; }
.login-card form { display:grid; gap:15px; }.login-card label,.json-editor label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:700; }
input,textarea,select { width:100%; color:var(--ink); border:1px solid var(--line); border-radius:12px; background:white; outline:none; }
input,select { min-height:45px; padding:10px 12px; } textarea { padding:13px; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--green-2); box-shadow:0 0 0 3px rgba(29,133,91,.1); }
.login-card form button,#save-button { min-height:48px; padding:12px 18px; color:white; border:0; border-radius:12px; background:var(--green); font-weight:750; }
.form-message,.editor-status output { min-height:18px; color:var(--danger); font-size:12px; }.form-message.success,.editor-status output.success { color:var(--green-2); }
.back-link { margin-top:auto; color:var(--green); font-weight:700; text-underline-offset:4px; }
.workspace { min-height:100svh; }
.workspace-header { position:sticky; z-index:20; top:0; min-height:74px; padding:10px max(18px,calc((100% - 1500px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(245,246,241,.92); backdrop-filter:blur(16px); }
.admin-brand.compact img { width:46px; height:46px; }.session-actions { display:flex; align-items:center; gap:13px; color:var(--muted); font-size:13px; }
.ghost-button,.preview-link { padding:10px 13px; color:var(--green); border:1px solid var(--line); border-radius:10px; background:white; text-decoration:none; font-weight:700; }
.workspace-grid { width:min(calc(100% - 36px),1500px); margin:28px auto 70px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; align-items:start; }
.content-nav { position:sticky; top:100px; padding:22px; display:grid; gap:7px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.7); }
.content-nav h2 { margin:0 0 13px; font-size:24px; }.content-nav button { padding:13px; display:grid; grid-template-columns:28px 1fr; gap:8px; text-align:left; color:var(--muted); border:1px solid transparent; border-radius:11px; background:transparent; }
.content-nav button b { color:var(--green-2); font-size:10px; }.content-nav button.active { color:white; border-color:var(--green); background:var(--green); }.content-nav button.active b { color:#f8e534; }
.content-nav p { margin:18px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.editor-panel { padding:clamp(22px,3.4vw,46px); border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.86); box-shadow:0 22px 70px rgba(6,28,19,.08); overflow:hidden; }
.editor-header { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; }.editor-header h1 { font-size:clamp(38px,5vw,62px); }.editor-header p { max-width:680px; margin:14px 0 0; color:var(--muted); line-height:1.5; }
.editor-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.mode-tabs { margin-top:32px; display:flex; gap:6px; border-bottom:1px solid var(--line); }.mode-tabs button { padding:12px 14px; color:var(--muted); border:0; border-bottom:2px solid transparent; background:transparent; }.mode-tabs button.active { color:var(--green); border-color:var(--glow); }
.editor-status { min-height:48px; padding:14px 0; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.content-group { margin:10px 0; border:1px solid var(--line); border-radius:16px; background:rgba(247,249,245,.72); overflow:clip; }.content-group > summary { padding:15px 17px; display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--green); font-weight:750; list-style:none; }.content-group > summary::before { content:"+"; width:20px; color:var(--green-2); }.content-group[open] > summary::before { content:"−"; }.content-group > summary::-webkit-details-marker { display:none; }
.group-content { padding:4px 15px 15px; display:grid; gap:11px; }.group-content .content-group { margin:0; background:white; }
.scalar-field { display:grid; grid-template-columns:minmax(150px,.34fr) minmax(0,1fr); gap:14px; align-items:start; padding:11px 0; border-top:1px solid rgba(18,106,58,.1); }.scalar-field:first-child { border-top:0; }.scalar-field > span { padding-top:12px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }.scalar-field textarea { min-height:86px; line-height:1.45; }
.array-tools,.item-tools { display:flex; gap:6px; flex-wrap:wrap; }.array-tools button,.item-tools button { padding:7px 10px; color:var(--green); border:1px solid var(--line); border-radius:8px; background:white; font-size:11px; }.item-tools button.danger { color:var(--danger); }
.array-item-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }.json-editor textarea { min-height:620px; font:13px/1.55 Consolas,"SFMono-Regular",monospace; tab-size:2; }.json-editor output { display:block; margin-top:8px; color:var(--green-2); font-size:12px; }.json-editor output.error { color:var(--danger); }
[hidden] { display:none !important; }
.layout-audit { position:fixed; z-index:1000; left:8px; bottom:8px; padding:7px 9px; color:white; border-radius:6px; background:#9b2f2f; font:11px/1.2 Consolas,monospace; }.layout-audit[data-status="ok"] { background:var(--green); }
@media (max-width:900px) { .workspace-grid { grid-template-columns:1fr; }.content-nav { position:static; display:flex; overflow-x:auto; padding:10px; }.content-nav .eyebrow,.content-nav h2,.content-nav p { display:none; }.content-nav button { flex:0 0 auto; min-width:150px; }.editor-header { display:grid; }.editor-actions { justify-content:flex-start; } }
@media (max-width:560px) { .workspace-header { padding-inline:12px; }.admin-brand.compact small,.session-actions span { display:none; }.workspace-grid { width:calc(100% - 20px); margin-top:12px; gap:12px; }.editor-panel { padding:18px 14px; border-radius:20px; }.scalar-field { grid-template-columns:1fr; gap:5px; }.scalar-field > span { padding-top:0; }.editor-actions > * { flex:1; text-align:center; }.editor-status { display:grid; }.login-card { min-height:calc(100svh - 28px); margin:14px auto; padding:28px 24px; border-radius:24px; }.login-card h1 { font-size:clamp(31px,10vw,44px); }.content-nav { margin-inline:-1px; }.json-editor textarea { min-height:60svh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }