:root { --ink:#2a2c3a; --slate:#5e6078; --mist:#8a8ca3; --pale:#eef0f5; --line:rgba(94,96,120,.18); --ok:#2f7a4f; --err:#b23a2f; --font:"Unbounded","Helvetica Neue",Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); font-weight:300; font-size:14px; color:var(--ink); background:#f3f4f8; line-height:1.55; }
a { color:var(--slate); text-decoration:none; } a:hover { color:var(--ink); }
h1 { font-weight:300; font-size:26px; margin:0 0 20px; } h2 { font-weight:300; font-size:18px; margin:0 0 14px; } h3 { font-weight:400; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin:0 0 12px; }
.wrap { max-width:1140px; margin:0 auto; padding:0 22px; }
.ah { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.ah .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.ah .logo { display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); }
.ah .logo img { height:32px; }
.ah nav { display:flex; gap:22px; font-size:12px; letter-spacing:.06em; }
.ah nav .muted { color:var(--mist); }
main { padding:34px 22px 60px; }
.af { text-align:center; color:var(--mist); font-size:11px; padding:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; margin-bottom:22px; }
.flash { border-radius:10px; padding:12px 16px; margin-bottom:18px; font-size:13px; }
.flash.ok { background:#e6f4ea; color:var(--ok); } .flash.err { background:#fbe9e7; color:var(--err); } .flash.info { background:#e8ebf5; color:var(--slate); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:#fff; font:inherit; font-size:12px; letter-spacing:.04em; cursor:pointer; }
.btn:hover { background:#3f4158; color:#fff; }
.btn.ghost { background:transparent; color:var(--ink); } .btn.ghost:hover { background:rgba(42,44,58,.06); }
.btn.sm { padding:7px 14px; font-size:11px; } .btn.danger { border-color:var(--err); color:var(--err); background:transparent; } .btn.danger:hover { background:#fbe9e7; }
.row { display:grid; gap:16px; } .row.c2 { grid-template-columns:1fr 1fr; } .row.c3 { grid-template-columns:1fr 1fr 1fr; } .row.c4 { grid-template-columns:2fr 1fr 1fr 1fr; }
.f { margin-bottom:16px; } .f label { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:6px; }
.f input[type=text], .f input[type=email], .f input[type=password], .f input[type=url], .f input[type=number], .f input[type=datetime-local], .f textarea, .f select { width:100%; font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.f input:focus, .f textarea:focus, .f select:focus { outline:none; border-color:var(--slate); box-shadow:0 0 0 3px rgba(94,96,120,.12); }
.f small { display:block; color:var(--mist); font-size:11px; margin-top:5px; }
.f.chk { display:flex; gap:10px; align-items:center; } .f.chk label { margin:0; text-transform:none; letter-spacing:0; font-size:13px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-weight:400; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); padding:8px 10px; border-bottom:1px solid var(--line); }
td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
.tag { display:inline-block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--pale); color:var(--slate); }
.tag.pub { background:#e6f4ea; color:var(--ok); } .tag.draft { background:#fff3e0; color:#9a5b00; } .tag.past { background:#ececf1; color:var(--mist); } .tag.cancel { background:#fbe9e7; color:var(--err); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.login { max-width:400px; margin:70px auto; text-align:center; }
.login img { height:44px; margin-bottom:26px; }
.login .card { text-align:left; }
.imgs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:10px; }
.imgs .im { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--pale); font-size:11px; }
.imgs .im img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.imgs .im .b { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; gap:6px; }
.imgs .im input { width:44px; font:inherit; font-size:11px; padding:3px 5px; border:1px solid var(--line); border-radius:6px; }
.imgs .im .del { color:var(--err); cursor:pointer; background:none; border:0; font:inherit; font-size:11px; }
.dyn { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dyn .r { display:grid; gap:10px; padding:12px; border-bottom:1px solid var(--line); align-items:end; background:#fff; }
.dyn .r:last-child { border-bottom:0; }
.dyn .r input, .dyn .r select, .dyn .r textarea { width:100%; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.dyn .r label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); display:block; margin-bottom:4px; }
.dyn .r .rm { background:none; border:0; color:var(--err); cursor:pointer; font:inherit; font-size:18px; line-height:1; padding:8px; }
.dyn .r .cnt { font-size:11px; color:var(--mist); white-space:nowrap; padding-bottom:9px; }
.groups .r { grid-template-columns:2fr 1.3fr 1.3fr .7fr auto auto; }
.fields .r { grid-template-columns:2fr 1.2fr 1fr .8fr 2fr auto; }
.addrow { margin-top:10px; }
#editor { min-height:260px; background:#fff; font-family:var(--font); font-weight:300; font-size:14px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color:var(--line) !important; }
.ql-toolbar.ql-snow { border-radius:10px 10px 0 0; } .ql-container.ql-snow { border-radius:0 0 10px 10px; }
.sticky-save { position:sticky; bottom:0; background:rgba(243,244,248,.9); backdrop-filter:blur(8px); padding:14px 0; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--line); margin-top:10px; }
.stat { display:flex; gap:26px; margin-bottom:22px; } .stat div b { display:block; font-size:24px; font-weight:300; } .stat div span { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.muted { color:var(--mist); } .small { font-size:12px; }
@media (max-width:900px) { .row.c2, .row.c3, .row.c4, .groups .r, .fields .r { grid-template-columns:1fr; } .ah nav { gap:12px; font-size:11px; } }