:root{
  --bg:#0a1310; --panel:#0f1d17; --panel-2:#13261e; --line:rgba(237,233,220,.12);
  --text:#e9e6da; --dim:#93a199; --gold:#d8a928; --danger:#e08a7e; --ok:#63c39a;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font)}
h1,h2,h3{margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.15rem}
h3{font-size:1rem}
a{color:var(--gold)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--dim)}
.muted{color:var(--dim)}
.small{font-size:.85em}
.error{color:var(--danger)}

/* kirish */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login[hidden]{display:none}
.login form{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:14px}
label{display:grid;gap:6px;font-size:.85rem;color:var(--dim)}
input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
textarea{resize:vertical;min-height:72px;line-height:1.5}

.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--text);font:inherit;cursor:pointer;text-decoration:none;transition:.2s}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#0a1310;font-weight:600}
.btn.primary:hover{background:#e9c24a;color:#0a1310}
.btn.small{padding:5px 12px;font-size:.85rem}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}

/* tepa panel */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 20px;background:rgba(10,19,16,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1}
#tabs button{padding:7px 13px;border-radius:999px;border:1px solid transparent;background:none;color:var(--dim);font:inherit;cursor:pointer}
#tabs button:hover{color:var(--text)}
#tabs button.on{background:var(--panel-2);border-color:var(--line);color:var(--gold)}
.top-actions{display:flex;align-items:center;gap:10px}
.status{color:var(--dim);font-size:.85rem;min-width:90px;text-align:right}
.status.saved{color:var(--ok)}
.status.err{color:var(--danger)}

main{padding:22px 20px 80px;max-width:1500px;margin:0 auto}
.tab{display:grid;gap:18px}
.tab[hidden]{display:none}

/* kartochka va jadval */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.card + .card{margin-top:0}
.row{display:grid;gap:12px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lang{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.lang.uz{color:var(--gold)}
.miss textarea,.miss input{border-color:rgba(224,138,126,.55)}
.block{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.block:first-of-type{border-top:0;margin-top:0;padding-top:0}
.block-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tag{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.tag.hidden-tag{color:var(--danger);border-color:rgba(224,138,126,.4)}
details summary{cursor:pointer;padding:6px 0;color:var(--gold)}
.list{display:grid;gap:10px}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.thumb.contain{object-fit:contain}
.imgfield{max-width:260px}
.img-card .imgfield{max-width:none}
.grid-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.img-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}
.img-card .name{font-size:.78rem;color:var(--dim);word-break:break-all}
.drop{border:1px dashed var(--line);border-radius:10px;padding:10px;text-align:center;color:var(--dim);font-size:.85rem;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--gold);color:var(--gold)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.8rem;color:var(--dim);cursor:pointer;background:none}
.chip.on{background:var(--gold);border-color:var(--gold);color:#0a1310}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* yig'ish jurnali */
.log{position:fixed;right:18px;bottom:18px;width:min(560px,92vw);max-height:46vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;z-index:10;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.log pre{margin:0;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--dim)}
.log-close{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--dim);font-size:1.2rem;cursor:pointer}
@media (max-width:1000px){.cols3{grid-template-columns:1fr}.cols2{grid-template-columns:1fr}}
.cols3>.btn,.cols2>.btn{justify-self:start;align-self:end}
.sticky-chips{position:sticky;top:57px;z-index:4;background:rgba(10,19,16,.95);backdrop-filter:blur(10px);padding:10px 0;margin:-10px 0 0}

/* ----------------------------------------------------------- til tanlagich */
/* Yuqori panel to'la, shuning uchun til rejimi alohida yupqa chiziqda.
   Sticky: uzun sahifada ham qo'l ostida turadi. */
.langbar{position:sticky;top:57px;z-index:4;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 20px;background:rgba(10,19,16,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.langbar-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.langbar button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid transparent;background:none;color:var(--dim);font:inherit;font-size:.9rem;cursor:pointer}
.langbar button:hover{color:var(--text)}
.langbar button.on{background:var(--panel-2);border-color:var(--line);color:var(--gold)}
/* Tarjimasi yo'q matnlar soni — bosim o'tkazmasin deb yumshoq rangda. */
.langbar .badge{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--dim);font-size:.75rem;line-height:1.5}
.langbar button.on .badge{border-color:var(--gold);color:var(--gold)}

/* Bitta til ko'rinayotganda maydon butun enni egallaydi. */
.cols1{display:grid;grid-template-columns:1fr;gap:12px}

/* ------------------------------------------------------- yig'iladigan element */
.card.item{padding:0;overflow:hidden}
.item-head{display:flex;align-items:center;gap:10px;padding:12px 16px}
.card.item.open .item-head{border-bottom:1px solid var(--line)}
/* Sarlavhaning o'zi tugma: butun satr bosiladi, nishonni qidirish shart emas. */
.item-toggle{flex:1;display:flex;align-items:center;gap:10px;min-width:0;
  background:none;border:0;padding:0;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.item-toggle:hover .item-title{color:var(--gold)}
.caret{color:var(--dim);font-size:.8rem;width:12px;flex:none}
.item-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta{color:var(--dim);font-size:.82rem;white-space:nowrap;flex:none}
.item-actions{display:flex;gap:6px;flex:none}
.item-body{display:grid;gap:14px;padding:16px}
.card.item:not(.open) .item-body{display:none}

/* Kamdan-kam kerak bo'ladigan sozlama (masalan havola manzili). */
.adv{border-top:1px solid var(--line);padding-top:10px}
.adv summary{cursor:pointer;color:var(--dim);font-size:.88rem}
.adv summary:hover{color:var(--text)}
.adv input{margin-top:8px}

/* Grid ichidagi tugma butun enni egallab, matn maydoniga o'xshab qolardi. */
.row > .btn{justify-self:start}

/* Rasm yo'q bo'lganda — bo'sh ramka, buzilgan nishon emas. */
.imgfield img.thumb[hidden]{display:none}