:root{
    --green:#4CAF50; --green-2:#2e7d32; --bg:#f6f8f7; --card:#fff;
    --text:#111827; --muted:#667085; --border:#e5e7eb; --ring:rgba(76,175,80,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font-family:'Inter',system-ui,Arial; background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.search .ico{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    opacity:.7;
    width:20px;          /* <-- qo'shildi */
    height:20px;         /* <-- qo'shildi */
}
/* App Bar */
.appbar{
    position:sticky; top:0; z-index:50; background:var(--green); color:#fff;
    display:flex; align-items:center; gap:10px; padding:12px 16px; box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.app-title{font-weight:600; letter-spacing:.2px}
.icon-btn{background:transparent; border:0; color:#fff; cursor:pointer; padding:6px; border-radius:10px}
.icon{width:22px; height:22px}
/* Drawer */
.drawer{position:fixed; inset:0; background:rgba(0,0,0,.28); display:none; z-index:60; backdrop-filter:blur(1.5px)}
.drawer.show{display:block}
.drawer__panel{position:absolute; left:0; top:0; height:100%; width:82%; max-width:320px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.drawer__head{background:var(--green); color:#fff; padding:20px 16px; font-weight:600}
.drawer__a{display:flex; align-items:center; gap:10px; padding:12px 14px; margin:6px 8px; color:#111; text-decoration:none; border-radius:12px}
.drawer__a:hover{background:#f3fcf5}
/* Container */
.wrap{max-width:960px; margin:0 auto; padding:14px 16px 96px}
/* Search */
.search{position:relative; margin:10px 0 12px}
.search input{
    width:100%; background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:12px 16px 12px 44px; font-size:16px; outline:0; transition:.2s;
}
.search input:focus{border-color:var(--green); box-shadow:0 0 0 3px var(--ring)}
.search .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.7}
/* Tabs (bottom nav) */
.tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:flex; justify-content:space-around; gap:6px; padding:8px 6px;
    background:#fff; border-top:1px solid var(--border);
}
.tab{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:#475569; text-decoration:none; font-size:12px; border-radius:12px; padding:6px 10px; min-width:60px;
}
.tab.active{background:var(--green); color:#fff}
.tab svg{width:20px; height:20px}
/* Cards & list */
.list{margin-right: 15px;}
.item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
    cursor:pointer;
    transition:background .2s, transform .02s;
    margin-bottom: 10px;
}
.item:hover{background:#f3fcf5}
.item:active{transform:scale(.998)}
.item__title{font-weight:600}
.item__meaning{max-width:56%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:14px}
.pill{font-size:12px; color:#fff; background:var(--green); padding:4px 8px; border-radius:999px}
/* Details */
.details{
    display:none; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08); animation:pop .12s ease-out;
}
@keyframes pop{from{transform:translateY(2px); opacity:.96}to{transform:none; opacity:1}}
.actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.btn{border:0; border-radius:10px; padding:9px 12px; cursor:pointer; font-weight:600}
.btn-green{background:var(--green); color:#fff}
.btn-ghost{background:#eef7ef; color:#14532d}
.badge{font-size:12px; color:#fff; background:var(--green-2); padding:4px 8px; border-radius:999px}
/* Forms */
.form{display:grid; gap:10px}
.input,.textarea{width:100%; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff; font-size:16px}
.textarea{min-height:110px; resize:vertical}
/* Modals */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.25); display:none; z-index:80}
.modal.show{display:block}
.modal__card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:16px; width:92%; max-width:520px; padding:16px; border:1px solid var(--border)}
.modal__head{font-weight:600; margin-bottom:8px}
/* Skeleton & empty */
.skeleton{height:56px; border-radius:14px; border:1px solid var(--border); background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.empty{color:var(--muted); text-align:center; padding:20px}
mark{background:rgba(76,175,80,.22); padding:0 2px}
hr.sep{border:none; border-top:1px dashed var(--border); margin:8px 0}
@media (max-width:640px){.item__meaning{display:none}}
/* Tiny helper badge row */
.kpis{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 8px}
.kpi{background:#f3fcf5; color:#14532d; border:1px solid var(--border); border-radius:999px; padding:4px 8px; font-size:12px}


/* Guruh sarlavhasi */
.group__title{
    position: sticky; top: 56px; /* appbar ostida qoladi */
    background: var(--bg);
    color: #14532d;
    font-weight: 600;
    padding: 6px 8px;
    border-left: 4px solid var(--green);
    margin: 10px 0 6px;
}

/* Alfavit tezkor indeks (o‘ng tomonda) */
/* O'ng tomondagi alfavit indeksi (scrollable) */
.alpha-index{
    position: fixed;
    right: 6px;
    /* appbar balandligi ~56px bo'lsa, ozgina zaxira bilan: */
    top: 40px;
    /* pastda bottom tabs (~64–72px) + xavfsiz zona */
    bottom: calc(0px + env(safe-area-inset-bottom));
    /* z-index: 70; */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 12px;

    /* MUHIM: ichki skrollni yoqish */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* iOS silliq skroll */
    padding-top: 30px !important;
    padding-bottom: 80px !important;
}

/* Tugmalar */
.alpha-index button{
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    min-height: 20px;          /* barmoq bilan bosish osonroq */
}
.alpha-index button:hover{ background:#eef7ef; color:#14532d }
.alpha-index button.is-off{ opacity:.35; cursor: default }

/* Kichik ekranda biroz ixchamroq */
@media (max-width:640px){
    .alpha-index{right: 0px;padding:6px 4px}
    .alpha-index button{ padding:2px 6px; font-size:11px }
}

/* (ixtiyoriy) skroll chizig'ini nozikroq qilish */
.alpha-index::-webkit-scrollbar{ width: 6px }
.alpha-index::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.12);
    border-radius: 6px;
}



/* === Comments UI === */
#comments.list { display: grid; gap: 10px; }

.c-item { display:flex; gap:10px; align-items:flex-start; }
.c-ava {
    width:38px; height:38px; border-radius:50%;
    display:grid; place-items:center;
    color:#fff; font-weight:700; font-size:13px; letter-spacing:.3px;
    user-select:none; flex:0 0 38px;
}
.c-body { flex:1; min-width:0; }
.c-head { display:flex; gap:8px; align-items:center; }
.c-name { font-weight:600; color:var(--text,#111827); }
.c-time { font-size:12px; color:var(--muted,#667085); }
.c-text { margin-top:4px; white-space:pre-wrap; line-height:1.45; }