/* ============ YANGI DIZAYN v2 (butunlay yangi ko'rinish) ============
   Yagona dizayn tili: yorug', yumshoq soyali oq kartochkalar, yumaloq burchaklar, ko'k urg'u, har bo'lim o'z rangida.
   Eski qoidalarni bosib o'tadi (style.css dan keyin yuklanadi). */
:root{
  --d2-bg:#edf0f6;--d2-s:#ffffff;--d2-s2:#f4f6fb;--d2-ink:#0e1a2b;--d2-mut:#64748b;--d2-line:#e0e6f0;--d2-ac:#2563eb;--d2-ac2:rgba(37,99,235,.11);
  --d2-sh:0 1px 2px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.08);--d2-shl:0 18px 52px rgba(15,23,42,.24);
}
html[data-theme=dark]{
  --d2-bg:#0c1117;--d2-s:#18202a;--d2-s2:#212b38;--d2-ink:#eef2f9;--d2-mut:#93a1b8;--d2-line:#2b3646;--d2-ac:#4d8dff;--d2-ac2:rgba(77,141,255,.17);
  --d2-sh:0 1px 2px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.38);--d2-shl:0 22px 60px rgba(0,0,0,.65);
}
html body{--ink:var(--d2-ink);--mut:var(--d2-mut);--line:var(--d2-line);--bg:var(--d2-s);--ac:var(--d2-ac);--ac2:var(--d2-ac2);--glass:var(--d2-s);--p1:var(--d2-s2);--p2:var(--d2-s2);color:var(--d2-ink)}
html body #plan{background:var(--d2-bg)}

/* ---- tepa qator ---- */
html body #mode button{height:40px;min-width:40px;border-radius:13px;background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh);font-weight:700}
html body #mode button:active{transform:scale(.96)}
html body #mode button[data-m].on,html body #mode button.on{background:var(--d2-ac);border-color:var(--d2-ac);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
html body #mode .sep{background:transparent;width:6px}
html body #pricechip{border-radius:16px;background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh)}
html body #info,html body #savechip{border-radius:14px;background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh)}
html body #zoomc button,html body #fitbtn{border-radius:14px;background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh)}

/* ---- yon qatorlar ---- */
html body #app #icons .ic.t3i{background:var(--d2-s);border:1px solid var(--d2-line);box-shadow:var(--d2-sh);border-radius:20px}
html body #app #icons .ic.t3i small{color:var(--d2-ink);font-weight:800}
html body #app #icons .ic.t3i[data-rail]{border-top:4px solid var(--ra,#888)}
html body #app #icons .ic.t3i:hover{border-color:var(--d2-ac);transform:translateY(-1px)}
html body #app #icons .ic.add{background:linear-gradient(180deg,#4a8bff,#2459e8)!important;color:#fff!important;border:0!important;border-radius:20px;box-shadow:0 10px 24px rgba(37,99,235,.45)!important}
html body #app #icons .ic[data-icon=theme]{background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh)}

/* ---- pastki tab qatori (telefon/planshet) ---- */
html body.dock #dock{margin:0 10px calc(10px + env(safe-area-inset-bottom,0px));padding:6px 6px;border:1px solid var(--d2-line);border-radius:28px;background:var(--d2-s);box-shadow:var(--d2-shl)}
html body #dock button{border-radius:20px;color:var(--d2-mut);font-weight:800;font-size:10.5px;min-height:52px;gap:1px}
html body #dock button .dart{display:block;width:30px;height:30px}
html body #dock button .dart svg{width:100%;height:100%}
html body #dock button.on{background:var(--d2-ac2);color:var(--d2-ink)}
html body #dock button.on::before{display:none}
html body #dock .fab{flex:0 0 62px;max-width:62px;height:56px;min-height:56px;border-radius:22px;background:linear-gradient(180deg,#4a8bff,#2459e8);color:#fff;box-shadow:0 12px 26px rgba(37,99,235,.55);margin:-20px 6px 0;border:3px solid var(--d2-s)}
html body #dock .fab.on{background:var(--d2-ink);color:var(--d2-s)}

/* ---- paneldagi oyna ---- */
html body #app #side{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:28px 28px 0 0;box-shadow:var(--d2-shl)}
@media (min-width:900px){html body.desk.pbottom #app #side{border-radius:26px}}
html body #tabs{background:var(--d2-s2);border-radius:18px;padding:4px;margin:8px 10px;border:0}
html body #tabs button{border-radius:14px;font-weight:800;color:var(--d2-mut)}
html body #tabs button.on{background:var(--d2-s);color:var(--d2-ink);box-shadow:var(--d2-sh)}
html body #panel{color:var(--d2-ink)}
html body #panel details.acc,html body details.acc{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:20px;box-shadow:none}
html body #panel details.acc>summary b{font-weight:800}
html body .card,html body .hero{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:20px;box-shadow:none}
html body .hero{background:linear-gradient(160deg,var(--d2-ac2),var(--d2-s) 55%)}
html body #panel .hsec{color:var(--d2-mut);font-weight:800}

/* ---- tugmalar, maydonlar, yorliqlar ---- */
html body .btn{border-radius:14px;font-weight:800;border:1px solid transparent;background:var(--d2-ac);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.28)}
html body .btn.gray{background:var(--d2-s2);color:var(--d2-ink);border:1px solid var(--d2-line);box-shadow:none}
html body .btn.red{background:rgba(229,72,77,.12);color:#e5484d;border:1px solid rgba(229,72,77,.25);box-shadow:none}
html body .btn.green{background:var(--d2-ac);color:#fff}
html body input,html body select,html body textarea{border-radius:12px;background:var(--d2-s2);border:1px solid var(--d2-line);color:var(--d2-ink)}
html body input:focus,html body select:focus{outline:3px solid var(--d2-ac2);border-color:var(--d2-ac)}
html body .chip{border-radius:999px;background:var(--d2-s2);border:1px solid var(--d2-line);color:var(--d2-ink);font-weight:700}
html body .chip.on{background:var(--d2-ac);border-color:var(--d2-ac);color:#fff}
html body .pk{border-radius:18px;background:var(--d2-s2);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:none}
html body .pk.wide{background:var(--d2-s2)}
html body .pcd,html body .mrow{border-radius:18px;background:var(--d2-s2);border:1px solid var(--d2-line)}
html body .pcd.on,html body .mrow.on{border-color:var(--d2-ac);background:var(--d2-ac2)}

/* ---- suzuvchi oynalar va pufaklar ---- */
html body #palette,html body #ipop,html body #prm,html body #armbar,html body #cxbar,html body #emptycard,html body #gh,html body #numpop,html body #sugg{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:22px;box-shadow:var(--d2-shl);color:var(--d2-ink)}
html body #cxed .cxh1 button,html body #cxed .cxn{border-radius:16px;background:var(--d2-s);border:1px solid var(--d2-line);box-shadow:var(--d2-sh);color:var(--d2-ink)}
html body #cxed .cxh1 button.pri{background:var(--d2-ac);border-color:var(--d2-ac);color:#fff}
html body #cxed{background-color:var(--d2-bg)}
html body #ring .rb,html body .rb{background:var(--d2-s);border:1px solid var(--d2-line);color:var(--d2-ink);box-shadow:var(--d2-sh)}
html body #elbar{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:22px;box-shadow:var(--d2-shl)}
html body #elbar .eb,html body #elbar .en input{border-radius:12px;background:var(--d2-s2);border:1px solid var(--d2-line);color:var(--d2-ink)}

/* ---- bosh sahifa va ustalar ---- */
html body #projects,html body #wiz,html body #sketch{background:var(--d2-bg);color:var(--d2-ink)}
html body .hm-card,html body .pcard{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:22px;box-shadow:var(--d2-sh)}
html body .hm-hero{border-radius:26px}
html body .hm-nav{background:var(--d2-s);border:1px solid var(--d2-line);border-radius:26px;box-shadow:var(--d2-shl)}
:root{--dockH:calc(78px + env(safe-area-inset-bottom,0px))}

/* sahifa hech qachon surilmasin (panel/oynalar ekrandan tashqariga chiqqanda yuqori qator yo'qolib qolardi) */
html,body{overflow:hidden;overflow:clip;overscroll-behavior:none}
html body #app{overflow:hidden;overflow:clip}

/* ---- v2.02: bir rangli, professional ko'rinish ---- */
html body #app #icons .ic.t3i[data-rail]{border-top:1px solid var(--d2-line)}
html body #dock button .dart{color:currentColor}
html body #dock button .dart svg{stroke-width:1.7}
html body #dock button.on{background:var(--d2-ac2);color:var(--d2-ac)}
html body .hero{background:var(--d2-s)}
html body #app #icons .ic.add{background:var(--d2-ac)!important;box-shadow:0 6px 16px rgba(37,99,235,.35)!important}
html body #dock .fab{background:var(--d2-ac);box-shadow:0 8px 20px rgba(37,99,235,.4)}
html body .gcard .gn,html body .gn{background:var(--d2-s2)!important;color:var(--d2-mut)!important;border:1px solid var(--d2-line)}
html body .gch .dot,html body .gch i{background:var(--d2-mut)!important}
html body #cxed .tag,html body #cxed .dim,html body .cxtag{background:var(--d2-s)!important;color:var(--d2-ink)!important;border:1px solid var(--d2-line)}
html body #cxed .knob,html body #cxed .kn{background:var(--d2-ac)!important;border-color:var(--d2-s)!important}
html body #tabs button.on{border-bottom:0}
html body .card.sel{border-color:var(--d2-ac);box-shadow:0 0 0 2px var(--d2-ac2)}
html body #icons .ic.on,html body #rail button.on,html body #fab{background:var(--d2-ac);color:#fff}

/* aylana tugmalar: ustiga kelganda yaqinlashadi va nomi chiqadi */
html body #ring:not(.dockbar) .rb{transition:transform .16s cubic-bezier(.3,1.4,.5,1),box-shadow .16s,background .16s,border-color .16s}
html body #ring:not(.dockbar) .rb:hover,html body #ring:not(.dockbar) .rb:focus-visible{transform:scale(1.35);z-index:5;border-color:var(--d2-ac);color:var(--d2-ac);box-shadow:0 8px 22px rgba(15,23,42,.3)}
html body #ring:not(.dockbar) .rb:active{transform:scale(1.15)}
html body #ring:not(.dockbar) .rb[data-t]::after{content:attr(data-t);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,4px) scale(.8);white-space:nowrap;padding:5px 10px;border-radius:9px;background:var(--d2-ink);color:var(--d2-s);font:700 12px/1 Jost,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
html body #ring:not(.dockbar) .rb:hover::after{opacity:1;transform:translate(-50%,0) scale(.74)}

/* hamma tugmalar: ustiga kelganda yengil yaqinlashish va yagona nom yorlig'i */
#tip2{position:fixed;z-index:99999;pointer-events:none;padding:6px 10px;border-radius:9px;background:var(--d2-ink);color:var(--d2-s);font:700 12px/1.1 Jost,system-ui,sans-serif;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;box-shadow:0 6px 16px rgba(15,23,42,.3)}
#tip2.on{opacity:1;transform:none}
@media (hover:hover){
  html body #mode button,html body #zoomc button,html body #fitbtn,html body #elbar .eb,html body #cxed .cxh1 button,html body #app #icons .ic,html body #tabs button,html body .btn,html body .chip,html body #dock button,html body .pk,html body .pcd{transition:transform .15s cubic-bezier(.3,1.4,.5,1),box-shadow .15s,border-color .15s,background .15s}
  html body #mode button:hover,html body #zoomc button:hover,html body #fitbtn:hover,html body #elbar .eb:hover,html body #cxed .cxh1 button:hover{transform:scale(1.12);border-color:var(--d2-ac)}
  html body #app #icons .ic:hover,html body .pk:hover,html body .pcd:hover{transform:translateY(-2px) scale(1.05);border-color:var(--d2-ac)}
  html body .btn:hover,html body .chip:hover,html body #dock button:hover{transform:translateY(-1px) scale(1.03)}
  html body #mode button:active,html body .btn:active,html body #app #icons .ic:active{transform:scale(.96)}
}

/* pastdan chiqadigan panel: Xona / Kommun. / Mebel / Hisob — ikonkali, katta, aniq tablar */
html body #tabs{padding:5px;gap:4px;margin:8px 10px 6px}
html body #tabs button[data-tab]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;font-size:11.5px;letter-spacing:.2px}
html body #tabs button[data-tab] .ti2{display:block;width:22px;height:22px;color:currentColor;transition:transform .18s cubic-bezier(.3,1.4,.5,1)}
html body #tabs button[data-tab] .ti2 svg{width:100%;height:100%}
html body #tabs button[data-tab]:hover .ti2{transform:scale(1.2)}
html body #tabs button[data-tab].on{color:var(--d2-ac)}
html body #tabs button[data-tab].on .ti2{transform:scale(1.1)}
html body #tabs button[data-tab]:hover{background:var(--d2-ac2);color:var(--d2-ac)}

/* Xona/Mebel/Kommun./Hisob: dumaloq ikonkalar yoyilib chiqadi */
#radtab{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,0);transition:background .2s}
#radtab.on{background:rgba(15,23,42,.18)}
#radtab .rt{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--d2-line);background:var(--d2-s);color:var(--d2-ink);box-shadow:var(--d2-shl);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3);transition:transform .26s cubic-bezier(.3,1.5,.5,1) var(--d),opacity .16s var(--d),border-color .15s,color .15s}
#radtab.on .rt{opacity:1;transform:none}
#radtab .rt svg{width:22px;height:22px}
#radtab .rt .rs{display:block;width:26px;height:26px}
#radtab .rt .rs svg{width:100%;height:100%}
#radtab .rt small{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:800 11px/1 Jost,system-ui,sans-serif;padding:4px 8px;border-radius:8px;background:var(--d2-s);color:var(--d2-ink);border:1px solid var(--d2-line);box-shadow:var(--d2-sh);pointer-events:none}
#radtab .rt:hover,#radtab .rt:focus-visible{transform:scale(1.22);border-color:var(--d2-ac);color:var(--d2-ac);transition-delay:0s}
#radtab .rt.pn{background:var(--d2-ac);border-color:var(--d2-ac);color:#fff}
#radtab .rt.pn:hover{color:#fff}

/* yon qatorlar: bir xil chiziqli ikonkalar; kompyuterda kichik dumaloq tugmalar */
html body #app #icons .ic .lic{display:block;width:26px;height:26px;color:var(--d2-ink)}
html body #app #icons .ic .lic svg{width:100%;height:100%}
html body #app #icons .ic.on .lic{color:#fff}
html body.desk #app #icons .ic{width:46px!important;height:46px!important;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border-top-width:1px!important}
html body.desk #app #icons .ic small{display:none!important}
html body.desk #app #icons .ic.add{width:46px!important;height:46px!important}
html body.desk #app #icons .ic[data-icon=theme]{width:46px!important;height:46px!important}
html body.desk #app #icons .ic:hover{transform:scale(1.14)}
html body #app #icons .ic.t3i{border-top:1px solid var(--d2-line)}

/* ---- yagona yozuv shkalasi: sarlavha 15 / matn 14 / yorliq 12 / izoh 12.5 ---- */
:root{--fs-h:15px;--fs-b:14px;--fs-l:12px;--fs-s:12.5px}
html body #panel details.acc>summary b{font-size:var(--fs-h)}
html body #panel label,html body label{font-size:var(--fs-l);font-weight:700;color:var(--d2-mut);letter-spacing:.01em}
html body .hint{font-size:var(--fs-s);line-height:1.45;color:var(--d2-mut)}
html body .btn{font-size:var(--fs-b)}
html body #panel .hsec{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
html body #panel input,html body #panel select{font-size:var(--fs-b)}
/* ---- qorong'i tema: tugma chegarasi va kontrast ---- */
html body .btn.green,html body .btn:not(.gray):not(.red){border:1px solid transparent!important}
html[data-theme=dark] body .btn,html[data-theme=dark] body .btn.green{background:#3a74e8;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35)}
html[data-theme=dark] body .btn.gray{background:var(--d2-s2);color:var(--d2-ink);box-shadow:none;border:1px solid var(--d2-line)!important}
html[data-theme=dark] body .btn.red{background:rgba(229,72,77,.16);color:#ff7b80;box-shadow:none}
html[data-theme=dark] body .chip.on,html[data-theme=dark] body #mode button.on{background:#3a74e8;border-color:#3a74e8}
html[data-theme=dark] body #panel details.acc,html[data-theme=dark] body .card,html[data-theme=dark] body .hero{border-color:#2f3b4d}
html[data-theme=dark] body #side{border-color:#2f3b4d}
html[data-theme=dark] body #app #icons .ic{border-color:#2f3b4d}