/* X-crm — vizual ekranlar: bosh, shahar, ofis, osmon, oqim, kelajak, kun boshi, bayram, TV */

/* ---------- BOSH (Ega) ---------- */
.egaG{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
@media(max-width:1000px){.egaG{grid-template-columns:1fr}}
.cityCard{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#040A14,#0B1D33 70%,#12304F);border:1px solid var(--line);min-height:250px;cursor:pointer}
.cityTxt{position:absolute;left:22px;top:18px;display:flex;flex-direction:column;gap:3px;z-index:2}
.city{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:5px;padding:0 12px}
.bld{flex:1;background:#12294A;border-radius:3px 3px 0 0;padding:5px 4px 0;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;overflow:hidden}
.bld span{width:calc(33% - 2px);height:6px;border-radius:1px;background:#0F2340}
.bld span.g{background:var(--gold);box-shadow:0 0 4px rgba(255,200,50,.45)}
.bld span.w{background:#fff;box-shadow:0 0 6px #fff;animation:tw 1.6s infinite}
.bld span.b{background:var(--blue)}
.aiCard{border-radius:22px;padding:18px;background:linear-gradient(135deg,#1A0F2E,var(--panel));border:1px solid rgba(199,125,255,.35);display:flex;flex-direction:column;gap:12px}
:root[data-theme="light"] .aiCard{background:linear-gradient(135deg,#F3E9FF,#fff)}
.aiIns{border-radius:16px;padding:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;cursor:pointer;min-height:130px}
:root[data-theme="light"] .aiIns{background:#fff;border-color:var(--line)}
@media(max-width:700px){.aiCard .grid3{grid-template-columns:1fr}.aiIns{min-height:0}}
.lenta{display:flex;gap:10px;align-items:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);overflow:hidden}
.lentaIn{display:flex;gap:18px;font-size:13px;color:var(--tx2);white-space:nowrap;overflow:hidden;align-items:center;mask-image:linear-gradient(90deg,#000 85%,transparent)}
.dotLive{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;flex-shrink:0;animation:kutish 1.6s infinite}
.menG{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1000px){.menG{grid-template-columns:1fr}}
.davBtn{width:84px;height:84px;border-radius:50%;border:none;font-weight:800;font-size:16px;cursor:pointer;flex-shrink:0}
.davBtn.in{background:radial-gradient(circle at 35% 30%,#FFE9A0,#FFC832 60%,#C48A0A);color:#2A1C00;box-shadow:0 0 30px rgba(255,200,50,.45)}
.davBtn.out{background:radial-gradient(circle at 35% 30%,#7CCBFF,#1E5F8C 70%);color:#fff;box-shadow:0 0 30px rgba(57,182,255,.4)}
.davBtn.done{background:var(--panel2);color:var(--mut)}
.stack{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--panel2)} .stack i{display:block;height:100%}
.dbars{display:flex;align-items:flex-end;gap:3px} .db{flex:1;position:relative;height:100%;display:flex;align-items:flex-end}
.db i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--blue);opacity:.85}
.db b{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;color:var(--gold);font-weight:800}

/* ---------- BAYRAM ---------- */
.bayram{position:relative;text-align:center;padding:30px 40px;border-radius:28px;background:radial-gradient(ellipse at 50% 0%,#2A2208,#0A1424 70%);border:1px solid rgba(255,200,50,.5);box-shadow:0 0 80px rgba(255,200,50,.25);overflow:hidden;min-width:300px}
.confetti{position:absolute;inset:0;pointer-events:none} .confetti i{position:absolute;top:-10px;width:7px;height:12px;border-radius:2px;animation:conf 2.4s ease-in forwards}
@keyframes conf{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(420px) rotate(540deg);opacity:0}}

/* ---------- KARTA ---------- */
.kHead{display:flex;gap:16px;align-items:center}
.kGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.kGrid{grid-template-columns:1fr}}
.esda{display:flex;gap:10px;padding:12px 14px;border-radius:16px;background:var(--goldbg);border:1px solid rgba(255,200,50,.35)}
.qadam{border-radius:20px;padding:16px;background:linear-gradient(135deg,rgba(57,182,255,.10),var(--panel));border:1px solid rgba(57,182,255,.45);display:flex;flex-direction:column;gap:12px}
.gap{font-size:14px;line-height:1.5;padding:10px 12px;border-radius:12px;background:rgba(199,125,255,.10);border-left:3px solid var(--pur)}
.yol{display:flex;gap:6px} .yol>div{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-size:11px;font-weight:700;color:var(--mut)}
.yol>div i{width:100%;height:6px;border-radius:3px;background:var(--panel2)} .yol>div.on i{background:var(--gold)} .yol>div.on{color:var(--tx)} .yol>div.cur i{background:linear-gradient(90deg,var(--gold),var(--blue));animation:nafas 1.6s infinite}
.natB{height:56px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-weight:800;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.natB:hover{border-color:var(--blue)}
.dateB{height:58px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-weight:800}
.dateB small{font-size:11px;color:var(--mut);font-weight:700} .dateB.on{border-color:var(--gold);background:var(--goldbg)}

/* ---------- SWIPE KARTALAR ---------- */
.deck{position:relative;height:420px;max-width:380px;margin:0 auto;touch-action:pan-y}
.dcard{position:absolute;inset:0;border-radius:26px;background:linear-gradient(160deg,#13325A,#0B1D33);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 40px rgba(0,0,0,.4);transition:transform .25s,opacity .25s;user-select:none}
:root[data-theme="light"] .dcard{background:linear-gradient(160deg,#fff,#EEF4FA)}

/* ---------- SHAHAR ---------- */
.shWrap{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#02060D 0%,#071427 55%,#0F2A4A 100%);border:1px solid var(--line);min-height:560px}
.shStars{position:absolute;inset:0;pointer-events:none} .shStars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;animation:tw 3s infinite}
.shHead{position:relative;z-index:2;padding:20px 22px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.shCity{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:10px;padding:0 18px;overflow-x:auto;scrollbar-width:none}
.dom{flex:1;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:4px}
.domB{width:100%;background:linear-gradient(180deg,#14305A,#0E2240);border-radius:5px 5px 0 0;padding:6px 5px;display:grid;gap:3px;border:1px solid rgba(255,255,255,.04);border-bottom:none}
.domB span{height:7px;border-radius:1px;background:#0B1B33;cursor:pointer}
.domB span.g{background:var(--gold);box-shadow:0 0 5px rgba(255,200,50,.5)}
.domB span.m{background:#FFE9A0;box-shadow:0 0 8px #FFE9A0}
.domB span.w{background:#fff;box-shadow:0 0 10px #fff;animation:tw 1.2s infinite}
.domB span.n{background:transparent;border:1px solid var(--gold)}
.domB span.r{background:var(--red);opacity:.6}
.domN{font-size:10px;font-weight:800;color:var(--mut)}
.shLeg{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;font-weight:700;color:var(--tx2)}

/* ---------- OSMON ---------- */
.osmon{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#1A2E52 0%,#060D1A 60%,#02050B 100%);border:1px solid var(--line);height:calc(100vh - 220px);min-height:460px}
.star{position:absolute;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:transform .2s}
.star:hover{transform:translate(-50%,-50%) scale(1.8);z-index:3}
.star.sov{animation:sonish 2.4s infinite}
.osLab{position:absolute;font-size:10px;font-weight:800;color:rgba(255,255,255,.75);white-space:nowrap;pointer-events:none;transform:translate(-50%,8px)}
.osZone{position:absolute;top:10px;font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.4);transform:translateX(-50%)}

/* ---------- OFIS ---------- */
.ofis{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media(max-width:1000px){.ofis{grid-template-columns:1fr}}
.ofFloor{position:relative;border-radius:24px;background:radial-gradient(ellipse at 50% 0%,#132B4D,#081426 70%);border:1px solid var(--line);padding:18px;min-height:420px}
:root[data-theme="light"] .ofFloor{background:radial-gradient(ellipse at 50% 0%,#E8F1FB,#F7FAFD 70%)}
.desks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.desk{position:relative;border-radius:18px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:transform .2s,border-color .2s}
:root[data-theme="light"] .desk{background:#fff;border-color:var(--line)}
.desk.suhbat{border-color:rgba(255,200,50,.6);box-shadow:0 0 24px rgba(255,200,50,.18)}
.desk.bosh{border-color:rgba(57,182,255,.5)}
.desk.obyekt{border-color:rgba(199,125,255,.5)}
.desk.dam,.desk.ketdi,.desk.yoq{opacity:.5}
.desk.hl{transform:scale(1.04);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.lamp{width:12px;height:12px;border-radius:50%}
.bubble{position:absolute;top:-12px;right:10px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--gold);color:#2A1C00;animation:chiq .4s}
.keys{display:flex;gap:2px;font-size:12px}
.qora{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.qora input[type=range]{flex:1;accent-color:var(--gold)}
.soatBar{display:flex;align-items:flex-end;gap:3px;height:60px} .soatBar div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:flex-end;height:100%} .soatBar i{display:block;width:100%;background:var(--blue);border-radius:3px 3px 0 0;opacity:.8} .soatBar small{font-size:9px;color:var(--mut2)}

/* ---------- OQIM ---------- */
.oqim{position:relative;border-radius:24px;background:linear-gradient(180deg,#050C17,#0A1F3A);border:1px solid var(--line);padding:20px;overflow:hidden}
:root[data-theme="light"] .oqim{background:linear-gradient(180deg,#F7FAFD,#E8F1FB)}
.oqCols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;align-items:center;position:relative;z-index:2}
@media(max-width:700px){.oqCols{grid-template-columns:1fr 1fr}}
.oqNode{border-radius:16px;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:2px}
:root[data-theme="light"] .oqNode{background:#fff;border-color:var(--line)}
.oqNode b{font-size:26px;font-weight:800} .oqNode span{font-size:12px;font-weight:700;color:var(--mut)}
.oqSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ---------- KELAJAK ---------- */
.kel{display:grid;grid-template-columns:360px 1fr;gap:16px}
@media(max-width:1000px){.kel{grid-template-columns:1fr}}
.slid{display:flex;flex-direction:column;gap:6px} .slid input[type=range]{width:100%;accent-color:var(--pur)}
.slid .row b{font-family:var(--mono)}

/* ---------- KUN BOSHI ---------- */
.kb{position:fixed;inset:0;z-index:95;background:radial-gradient(ellipse at 50% 110%,#3A2A08 0%,#0B1730 45%,#02050B 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;overflow:hidden;color:#EAF1F8}
.kb .sun{position:absolute;bottom:-160px;left:50%;transform:translateX(-50%);width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#FFE9A0,#FFC832 45%,rgba(255,200,50,0) 70%);animation:sunUp 2.6s ease-out forwards;opacity:.9}
@keyframes sunUp{from{bottom:-360px}to{bottom:-160px}}
.kb .l{opacity:0;animation:chiq .6s ease-out forwards}
.kb h1{font-size:34px} .kb .big{font-size:58px;font-weight:800;font-family:var(--mono);color:var(--gold)}
.kb .cards{display:flex;flex-direction:column;gap:8px;width:min(420px,92vw);text-align:left}
.kb .ci{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}

/* ---------- TV ---------- */
.tv{position:fixed;inset:0;background:#02060D;color:#EAF1F8;overflow:hidden;font-size:1.4vw}
.tvHead{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:2vw;padding:1.6vw 2.4vw;z-index:3}
.tvScene{position:absolute;inset:0;padding:7vw 2.4vw 2.4vw;animation:fade .8s}
.tvBan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;padding:3vw 5vw;border-radius:2vw;background:rgba(10,30,60,.95);border:2px solid var(--gold);text-align:center;animation:chiq .5s;box-shadow:0 0 120px rgba(255,200,50,.35)}
.tvDesk{border-radius:1.4vw;padding:1.2vw;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.5vw}
.tvDesk.suhbat{border-color:rgba(255,200,50,.7);box-shadow:0 0 2vw rgba(255,200,50,.25)} .tvDesk.bosh{border-color:rgba(57,182,255,.6)} .tvDesk.obyekt{border-color:rgba(199,125,255,.6)} .tvDesk.dam,.tvDesk.ketdi,.tvDesk.yoq{opacity:.4}

/* ---------- QABUL ---------- */
.qabG{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
@media(max-width:1000px){.qabG{grid-template-columns:1fr}}

/* ---------- DAVOMAT ---------- */
.davG{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1000px){.davG{grid-template-columns:1fr}}
.ripple{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:tolqin 2.2s ease-out infinite;pointer-events:none}
@keyframes tolqin{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.45);opacity:0}}
.dgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dh{text-align:center;font-size:10px;font-weight:800;color:var(--mut2)}
.dk{position:relative;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.dk i{position:absolute;top:1px;right:3px;font-size:8px;font-style:normal;color:var(--gold)}
.dk.sm{height:26px;min-width:22px;border-radius:6px;font-size:10px}
.dtab td,.dtab th{padding:3px 2px}

/* ---------- MOLIYA ---------- */
.wf{display:flex;flex-direction:column;gap:6px}
.wfr{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center;font-size:13px}
.wfl{font-weight:700;color:var(--tx2)} .wfv{text-align:right;font-weight:800}
.wfb{position:relative;height:16px;background:var(--panel2);border-radius:5px;overflow:hidden} .wfb i{position:absolute;top:0;bottom:0;border-radius:4px}
@media(max-width:560px){.wfr{grid-template-columns:110px 1fr 90px}}

/* ---------- XODIM, DO'KON, MASHQ ---------- */
.xG{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.msg.in{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--blue);color:#04203A;border-bottom-right-radius:4px;font-weight:600}

/* ---------- TOGGLE ---------- */
.tgl{position:relative;width:44px;height:26px;border-radius:13px;border:none;background:var(--panel2);cursor:pointer;flex-shrink:0;transition:background .2s;box-shadow:inset 0 0 0 1px var(--line)}
.tgl i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--mut);transition:left .2s,background .2s}
.tgl.on{background:var(--gold)} .tgl.on i{left:21px;background:#2A1C00}
.osG{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
@media(max-width:1000px){.osG{grid-template-columns:1fr}.osmon{height:62vh}}
.egaG>*,.menG>*,.kGrid>*,.qabG>*,.davG>*,.osG>*,.ofis>*,.kel>*,.grid2>*,.grid3>*,.grid4>*{min-width:0}