/* Decade of Gas admin panel. Layout: fixed top bar, section list on the left, working area on the right. */
:root{
  --green:#1E9E4A; --green-deep:#146633; --green-mid:#39B368; --green-soft:#E7F4EB;
  --ink:#0F2B20; --text:#34413A; --dim:#6F7F75; --line:#E2E8E0; --paper:#fff; --paper-2:#F6F8F4; --paper-3:#EEF2EC;
  --red:#B42318; --red-soft:#FDECEA; --amber:#9A6700; --amber-soft:#FFF4D6;
  --display:'Poppins','Montserrat',Arial,Helvetica,sans-serif; --body:'Poppins','Montserrat',Arial,Helvetica,sans-serif; --mono:'Poppins','Montserrat',Arial,Helvetica,sans-serif;
  --top:60px; --side:250px; --r:10px;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{background:var(--paper-2); color:var(--text); font:15px/1.5 var(--body); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--display); color:var(--ink); letter-spacing:-.01em; margin:0;}
a{color:var(--green-deep);}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
button{font:inherit;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important;}}

/* top bar */
.top{position:fixed; inset:0 0 auto 0; height:var(--top); background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 18px; z-index:30;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:36px; width:auto;}
.brand span{font:600 13px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--ink); padding:4px 8px; border-radius:6px;}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.top-link{font-size:14px; text-decoration:none; font-weight:500;}
.me{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
.av{width:34px; height:34px; border-radius:50%; background:var(--green-deep); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:600 13px var(--display); flex-shrink:0;}
.me-txt{display:flex; flex-direction:column; line-height:1.2;}
.me-txt b{font-size:13.5px;} .me-txt small{font-size:12px; color:var(--dim); text-transform:capitalize;}
.nav-toggle{display:none; width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; align-items:center; justify-content:center; padding:0;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block; width:16px; height:2px; background:var(--ink); position:relative; border-radius:2px;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0;} .nav-toggle span::before{top:-5px;} .nav-toggle span::after{top:5px;}

/* layout */
.shell{display:grid; grid-template-columns:var(--side) minmax(0,1fr); padding-top:var(--top); min-height:100%;}
.side{position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow-y:auto; background:#fff; border-right:1px solid var(--line); padding:14px 10px 30px;}
.side h4{font:500 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:18px 10px 6px;}
.side a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none; font-size:14px;}
.side a:hover{background:var(--paper-2);}
.side a.on{background:var(--green-soft); color:var(--green-deep); font-weight:600;}
.side a .n{font:500 11.5px var(--mono); color:var(--dim);}
.main{padding:28px clamp(16px,3vw,40px) 120px; min-width:0; outline:none;}
.loading{color:var(--dim); padding:40px 0;}
@media (max-width:900px){
  :root{--side:0px;}
  .nav-toggle{display:inline-flex;}
  .side{position:fixed; left:0; top:var(--top); width:280px; z-index:25; transform:translateX(-100%); transition:transform .2s; box-shadow:0 20px 40px rgba(0,0,0,.15);}
  .side.open{transform:none;}
  .me-txt,.top-link{display:none;}
  .brand img{height:30px;}
}

/* page header */
.ph{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:22px;}
.ph h1{font-size:28px;}
.ph .crumbs{font:500 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px;}
.ph p{margin:6px 0 0; color:var(--dim); max-width:720px;}
.ph .meta{font-size:13px; color:var(--dim);}
.ph .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 16px; border-radius:8px; border:1px solid transparent; background:var(--green-deep); color:#fff; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap;}
.btn:hover{background:var(--ink);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.ghost{background:#fff; color:var(--ink); border-color:#CDD7CF;}
.btn.ghost:hover{border-color:var(--green); color:var(--green-deep);}
.btn.danger{background:#fff; color:var(--red); border-color:#F0C4BF;}
.btn.danger:hover{background:var(--red-soft);}
.btn.sm{height:32px; padding:0 11px; font-size:13px;}
.icon-btn{width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.icon-btn:hover{border-color:var(--green); color:var(--green-deep);}
.icon-btn:disabled{opacity:.35; cursor:default;}
.icon-btn.del:hover{border-color:#F0C4BF; color:var(--red); background:var(--red-soft);}

/* cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px;}
.card + .card{margin-top:16px;}
.card h2{font-size:18px; margin-bottom:4px;}
.card .sub{color:var(--dim); font-size:14px; margin:0 0 16px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.tile{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; text-decoration:none; color:var(--text);}
.tile:hover{border-color:var(--green);}
.tile .k{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim);}
.tile b{display:block; font:600 18px var(--display); color:var(--ink); margin:6px 0 2px;}
.tile span{font-size:13px; color:var(--dim);}

/* forms */
.form{display:grid; gap:18px;}
.f{display:flex; flex-direction:column; gap:6px; min-width:0;}
.f > label, .f > .lbl{font-weight:600; font-size:13.5px; color:var(--ink);}
.f .req{color:var(--red); margin-left:2px;}
.f .help{font-size:12.5px; color:var(--dim);}
.f.err input,.f.err textarea,.f.err select{border-color:var(--red);}
.f .msg{font-size:12.5px; color:var(--red);}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],input[type=password],input[type=search],textarea,select{
  width:100%; font:14.5px var(--body); color:var(--ink); background:#fff; border:1px solid #CDD7CF; border-radius:8px; padding:9px 11px; outline:none;}
textarea{min-height:110px; resize:vertical; line-height:1.5;}
textarea.md{min-height:170px; font-family:var(--body);}
input:focus,textarea:focus,select:focus{border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
.check{display:flex; gap:9px; align-items:center; font-size:14px; cursor:pointer;}
.check input{width:17px; height:17px; accent-color:var(--green-deep);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){.row2{grid-template-columns:1fr;}}
fieldset.group{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 18px; margin:0; display:grid; gap:16px; background:var(--paper-2);}
fieldset.group > legend{font:600 15px var(--display); color:var(--ink); padding:0 6px;}

/* image field */
.img-field{display:flex; gap:14px; align-items:flex-start;}
.img-prev{width:84px; height:84px; border-radius:10px; border:1px solid var(--line); background:var(--paper-3) center/cover no-repeat; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:11px; text-align:center;}
.img-ctl{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.img-ctl .btns{display:flex; gap:8px; flex-wrap:wrap;}
.img-ctl input[type=text]{font-size:12.5px; font-family:var(--mono); padding:6px 9px;}

/* repeater */
.rep{display:grid; gap:10px;}
.rep-item{border:1px solid var(--line); border-radius:var(--r); background:#fff;}
.rep-head{display:flex; align-items:center; gap:8px; padding:8px 10px 8px 14px; cursor:pointer;}
.rep-head b{flex:1; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rep-body{padding:4px 16px 16px; display:grid; gap:14px; border-top:1px solid var(--line);}
.rep-item:not(.open) .rep-body{display:none;}

/* table */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.toolbar input[type=search]{max-width:320px;}
.toolbar .count{font-size:13px; color:var(--dim); margin-left:auto;}
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:11px 12px; border-bottom:1px solid var(--line); background:var(--paper-2); white-space:nowrap;}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr:hover{background:#FAFCF9;}
td.num{font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:13px;}
td.main-col{font-weight:600; color:var(--ink); max-width:420px;}
td.acts{white-space:nowrap; text-align:right; width:1%;}
td.acts .icon-btn{margin-left:4px;}
td .thumb{width:34px; height:34px; border-radius:50%; background:var(--paper-3) center/cover; display:inline-block; vertical-align:middle;}
.empty{padding:28px; text-align:center; color:var(--dim);}
.pill{display:inline-block; font:500 11.5px var(--mono); padding:3px 9px; border-radius:100px; background:var(--paper-3); color:var(--text); white-space:nowrap;}
.pill.green{background:var(--green-soft); color:var(--green-deep);}
.pill.red{background:var(--red-soft); color:var(--red);}
.pill.amber{background:var(--amber-soft); color:var(--amber);}

/* drawer */
.drawer-bg{position:fixed; inset:0; background:rgba(15,43,32,.35); z-index:40;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(620px,100vw); background:#fff; z-index:41; display:flex; flex-direction:column; box-shadow:-20px 0 40px rgba(15,43,32,.15);}
.drawer-head{display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line);}
.drawer-head h2{font-size:20px; flex:1;}
.drawer-body{flex:1; overflow-y:auto; padding:22px;}
.drawer-foot{display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line); background:var(--paper-2);}

/* save bar */
.savebar{position:fixed; left:calc(var(--side) + 20px); right:20px; bottom:18px; z-index:20; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:12px 14px 12px 18px; border-radius:12px; box-shadow:0 16px 40px rgba(15,43,32,.3);}
.savebar span{flex:1; font-size:14px;}
.savebar .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
@media (max-width:900px){.savebar{left:12px; right:12px;}}

/* alerts */
.alert{border-radius:var(--r); padding:12px 14px; font-size:14px; margin-bottom:16px; border:1px solid;}
.alert.err{background:var(--red-soft); border-color:#F0C4BF; color:var(--red);}
.alert.ok{background:var(--green-soft); border-color:#CFE3D5; color:var(--green-deep);}
.alert.warn{background:var(--amber-soft); border-color:#F2DC9B; color:var(--amber);}
.alert ul{margin:6px 0 0; padding-left:18px;}
.secret{font:600 16px var(--mono); background:#fff; border:1px dashed var(--green); padding:8px 12px; border-radius:8px; display:inline-block; margin-top:6px; user-select:all; color:var(--ink);}

.toast{position:fixed; left:50%; bottom:92px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.err{background:var(--red);}

.feed{list-style:none; margin:0; padding:0;}
.feed li{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;}
.feed li:last-child{border-bottom:0;}
.feed time{font:500 12px var(--mono); color:var(--dim); white-space:nowrap;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px; margin:0 0 16px;}
.kv dt{color:var(--dim);} .kv dd{margin:0; color:var(--ink); font-weight:500;}
.file-drop{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px; border:1.5px dashed #B9CDBF; border-radius:var(--r); background:var(--paper-2);}

.vid-prev{width:180px; aspect-ratio:16/10; border-radius:10px; background:#11182A; color:#9AA4B6; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; font-size:12.5px;}
.vid-prev img, .vid-prev video{width:100%; height:100%; object-fit:cover; display:block;}