:root { --bg:#07120d; --surface:#102219; --surface2:#142a1f; --line:rgba(125,225,155,.16); --green:#48d978; --lime:#92ed54; --white:#f5faf7; --muted:#a8b9ae; --danger:#ff7878; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin:0; min-width:320px; color:var(--white); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; }
button,input,textarea { font:inherit; }
button,a,label.file-card { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
.login-screen { display:grid; place-items:center; min-height:100svh; padding:22px; background:radial-gradient(circle at 50% 20%,rgba(72,217,120,.12),transparent 28%),linear-gradient(145deg,#0b1d13,#06100b); }
.login-card { width:min(440px,100%); padding:38px; border:1px solid rgba(72,217,120,.24); border-radius:26px; background:rgba(12,29,19,.93); box-shadow:0 30px 80px rgba(0,0,0,.38); }
.login-card img { width:78px; height:78px; margin:0 auto 20px; border-radius:19px; }
.login-card > span,.editor-hero > span { display:block; color:var(--green); font-size:10px; font-weight:900; letter-spacing:.15em; text-align:center; }
.login-card h1 { margin:10px 0; font-size:30px; letter-spacing:-.04em; text-align:center; }
.login-card p { margin:0 0 23px; color:var(--muted); font-size:13px; text-align:center; }
.login-card label,.field { display:grid; gap:7px; color:#dbe8df; font-size:11px; font-weight:800; }
input,textarea { width:100%; color:var(--white); border:1px solid rgba(255,255,255,.11); outline:0; border-radius:12px; background:#09160f; transition:border-color .2s,box-shadow .2s; }
input { min-height:46px; padding:0 13px; }
textarea { min-height:100px; padding:12px 13px; resize:vertical; }
input:focus,textarea:focus { border-color:rgba(72,217,120,.6); box-shadow:0 0 0 3px rgba(72,217,120,.08); }
.primary,.ghost,.small-add { min-height:42px; padding:0 17px; border:1px solid transparent; border-radius:11px; font-size:12px; font-weight:900; cursor:pointer; }
.primary { color:#07120d; background:linear-gradient(135deg,var(--green),var(--lime)); }
.ghost { display:inline-flex; align-items:center; justify-content:center; color:var(--green); border-color:rgba(72,217,120,.25); background:rgba(72,217,120,.04); }
.login-card .primary { width:100%; margin-top:3px; }
.login-card > a { display:block; margin-top:17px; color:var(--muted); font-size:11px; text-align:center; }
.form-error { min-height:18px; margin:8px 0 !important; color:#ff9b9b !important; text-align:left !important; }
.admin-header { position:sticky; z-index:100; top:0; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:10px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(7,18,13,.94); backdrop-filter:blur(18px); }
.admin-brand { display:flex; align-items:center; gap:11px; }
.admin-brand img { width:44px; height:44px; border-radius:12px; }
.admin-brand span { display:grid; }
.admin-brand b { font-size:14px; }
.admin-brand small { color:var(--muted); font-size:10px; }
.header-actions { display:flex; align-items:center; gap:9px; }
.save-state { margin-right:8px; color:#71857a; font-size:10px; font-weight:800; }
.save-state.changed { color:#ffc45e; }
.save-state.saved { color:var(--green); }
.admin-layout { display:grid; grid-template-columns:230px minmax(0,1fr); width:min(1440px,100%); margin:auto; }
.admin-nav { position:sticky; top:72px; align-self:start; display:grid; gap:3px; height:calc(100svh - 72px); padding:30px 20px; border-right:1px solid rgba(255,255,255,.07); overflow:auto; }
.admin-nav a { padding:10px 12px; color:#8fa096; border-radius:9px; font-size:11px; font-weight:750; }
.admin-nav a:hover { color:var(--white); background:rgba(72,217,120,.07); }
.editor-main { width:min(1000px,calc(100% - 48px)); margin:0 auto; padding:60px 0 100px; }
.editor-hero { padding:34px; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 85% 20%,rgba(72,217,120,.11),transparent 30%),var(--surface); }
.editor-hero > span { text-align:left; }
.editor-hero h1 { margin:10px 0 8px; font-size:clamp(30px,4vw,45px); letter-spacing:-.05em; }
.editor-hero p { margin:0; color:var(--muted); }
.editor-section { margin-top:20px; padding:26px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(16,34,25,.73); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.07); }
.section-title > div { display:flex; align-items:center; gap:12px; }
.section-title > div > span { display:grid; place-items:center; width:31px; height:31px; color:var(--green); border:1px solid rgba(72,217,120,.22); border-radius:9px; background:rgba(72,217,120,.06); font-size:9px; font-weight:950; }
.section-title h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.section-title p { margin:0; color:var(--muted); font-size:11px; }
.small-add { color:var(--green); border-color:rgba(72,217,120,.22); background:rgba(72,217,120,.05); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field.full { grid-column:1 / -1; }
.field small { color:#718379; font-size:9px; font-weight:500; }
.collection { display:grid; gap:12px; }
.collection-card { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:20px; border:1px solid rgba(255,255,255,.07); border-radius:17px; background:#0a1810; }
.collection-card .card-number { grid-column:1 / -1; color:var(--green); font-size:9px; font-weight:950; letter-spacing:.12em; }
.collection-card .field.full { grid-column:1 / -1; }
.remove-item { position:absolute; top:12px; right:12px; width:31px; height:31px; color:#ff9b9b; border:0; border-radius:9px; background:rgba(255,120,120,.08); cursor:pointer; }
.switch-field { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 13px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#09160f; }
.switch-field input { width:18px; min-height:18px; accent-color:var(--green); }
.compact { margin-top:14px; }
.tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tool-card { display:grid; gap:5px; min-height:110px; padding:20px; color:var(--white); border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#0a1810; text-align:left; cursor:pointer; }
.tool-card:hover { border-color:rgba(72,217,120,.28); }
.tool-card span { color:var(--muted); font-size:11px; }
.tool-card.danger b { color:var(--danger); }
.file-card { position:relative; }
.file-card input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.toast { position:fixed; z-index:300; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:13px 17px; color:#07120d; background:var(--white); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); font-size:12px; font-weight:800; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { .admin-layout{grid-template-columns:1fr}.admin-nav{position:static;display:flex;height:auto;padding:14px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);overflow:auto}.admin-nav a{white-space:nowrap}.editor-main{padding-top:28px}.save-state{display:none} }
@media (max-width:650px) { .admin-header{align-items:flex-start;padding:10px 13px}.admin-brand small,.header-actions .ghost{display:none}.header-actions{margin-left:auto}.header-actions .primary{padding-inline:12px}.editor-main{width:calc(100% - 24px)}.editor-hero,.editor-section{padding:19px;border-radius:18px}.section-title{align-items:flex-start}.section-title p{display:none}.section-title .small-add{min-width:42px;padding-inline:10px}.form-grid,.collection-card,.tool-grid{grid-template-columns:1fr}.collection-card .field.full,.collection-card .card-number{grid-column:1}.collection-card{padding:17px}.remove-item{top:9px;right:9px} }