/* ==================================================================== PTG Vantage — CEO uchun operatsion nazorat. Manba: DIZAYN.md (YAGONA HAQIQAT MANBAI). Korpus — Vesper (qora/oq/kulrang, urg'usiz). RANG faqat MA'LUMOTDA: grafik, holat nuqtasi, ogohlantirish, faol bo'lim. ==================================================================== */ /* -------------------------------------------------------------------- DIZAYN.md 3-BO'LIM — OQ CHAQNASHGA QARSHI, 1-QOIDA. Bu BIRINCHI qoida bo'lishi SHART: sahifa ochilganda oq yonib ketmasin. -------------------------------------------------------------------- */ html,body{background:#000000!important;color:#ffffff} /* -------------------------------------------------------------------- 1. Tokenlar (DIZAYN.md 1-bo'lim) -------------------------------------------------------------------- */ :root{ /* Fon va matn — Vesper */ --bg: #000000; --panel: #0A0A0B; --panel-2: #0F0F11; --text: #ffffff; --muted: #9a9a9a; --stat: #d8d8d8; --border: rgba(255,255,255,.16); --border-soft: rgba(255,255,255,.12); /* MA'LUMOT qatlami — holat ranglari */ --accent: #F97316; --accent-dim: rgba(249,115,22,.18); --ok: #22C55E; --warn: #EAB308; --alert: #F97316; --crit: #EF4444; /* O'lchamlar (1440px) */ --logo: 15.5px; --logo-mark: 22px; --nav: 14px; --nav-h: 40px; --btn: 13.5px; --btn-h: 40px; --h1: 32px; --stat-size: 13.5px; --header-y: 18px; --header-x: 28px; --rail-w: 64px; --ai-w: 360px; --gap: 16px; --radius: 12px; } /* -------------------------------------------------------------------- 2. Shriftlar (DIZAYN.md 2-bo'lim) DIQQAT: WOFF2 fayllar `static/fonts/` ga QO'YILMAGAN (tarmoqqa chiqish taqiqlangan, CDN ham taqiqlangan). Fayl yo'q bo'lsa brauzer jimgina `system-ui` zaxirasiga tushadi — interfeys buzilmaydi. Fayllarni keyin shu papkaga tashlasangiz, kod o'zgarishisiz ishga tushadi. -------------------------------------------------------------------- */ @font-face{font-family:"Inter";font-style:normal;font-weight:100 900; font-display:swap;src:url("/static/fonts/inter.woff2") format("woff2")} @font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400; font-display:swap;src:url("/static/fonts/instrument-serif-italic.woff2") format("woff2")} *{box-sizing:border-box;margin:0;padding:0} /* Oq chaqnashga qarshi 3-QOIDA (2-qoida `` da) */ html,body{background:#000;background:var(--bg,#000);color:#fff;color:var(--text,#fff)} html,body{height:100%} body{ font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px;line-height:1.45;letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit} em,.urgu{ font-family:"Instrument Serif","Times New Roman",Times,serif; font-style:italic;font-weight:400;color:var(--muted); } ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)} /* -------------------------------------------------------------------- 4.4. Grain qatlami — butun sahifaga "plyonka" hissi -------------------------------------------------------------------- */ .grain{ position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgyJyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE4MCcgaGVpZ2h0PScxODAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg=="); background-size:180px 180px; } /* ==================================================================== 4.1. SUYUQ METALL PILL (nav, filtr, tab, chip) ==================================================================== */ .pill{ height:var(--nav-h);padding:0 18px;border-radius:7px; overflow:hidden;position:relative; display:inline-flex;align-items:center;gap:8px; border:1px solid rgba(198,198,198,.55); background:linear-gradient(105deg,#050505 0%,#2a2a2a 48%,#4a4a4a 100%); color:#f3f3f3;font-size:var(--nav);font-weight:400;letter-spacing:-.01em; cursor:pointer;white-space:nowrap; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; } .pill::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%); transform:translateX(-120%);transition:transform .6s ease; } .pill:hover::before{transform:translateX(120%)} .pill:hover{ border-color:rgba(235,235,235,.9); background:linear-gradient(105deg,#111 0%,#3a3a3a 45%,#6a6a6a 100%); box-shadow:0 0 18px rgba(200,210,230,.18); } /* Faol holat — chap chekkada 2px to'q sariq chiziq */ .pill.faol{color:#fff} .pill.faol::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--accent); } .pill.kichik{height:30px;padding:0 12px;font-size:12px;border-radius:6px} /* ==================================================================== 4.2. TUGMALAR ==================================================================== */ .btn{ position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center; height:var(--btn-h);padding:0 16px;border-radius:6px;font-size:var(--btn); font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;cursor:pointer; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease; } .btn::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 76%); transform:translateX(-130%);transition:transform .65s ease; } .btn:hover::after{transform:translateX(130%)} .btn-solid{ background:linear-gradient(180deg,#fff 0%,#e7e7e7 48%,#cfcfcf 100%); color:#111;border:1px solid #fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.95); } .btn-solid:hover{ background:linear-gradient(180deg,#fff 0%,#f3f6ff 42%,#d5def2 100%); border-color:#f2f6ff; box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(186,208,255,.35),0 8px 18px rgba(255,255,255,.12); } .btn-ghost{ background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(0,0,0,.45) 50%,rgba(160,175,200,.08)); color:#fff;border:1px solid rgba(198,198,198,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .btn-ghost:hover{ background:linear-gradient(135deg,rgba(210,225,255,.18),rgba(0,0,0,.35) 48%,rgba(180,195,220,.16)); border-color:rgba(220,230,255,.75); box-shadow:0 0 20px rgba(170,200,255,.22); } /* Muzli — AI panel uchun */ .btn-muz{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} /* ==================================================================== 4.3. KARTA ==================================================================== */ .karta{ background:var(--panel);border:1px solid var(--border-soft); border-radius:var(--radius);padding:20px; display:flex;flex-direction:column;min-height:0;min-width:0; } .karta.bosiladi{transition:border-color .25s ease,transform .25s ease} .karta.bosiladi:hover{border-color:var(--border);transform:translateY(-1px)} .karta-bosh{ display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:14px;flex:0 0 auto; } .karta-nom{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--text)} .karta-izoh{font-size:11.5px;color:var(--muted)} /* ==================================================================== 5. TUZILMA — bitta ekran, skroll faqat jadval ichida ==================================================================== */ .qobiq{ height:100dvh;overflow:hidden; display:grid;grid-template-columns:var(--rail-w) 1fr var(--ai-w); transition:grid-template-columns .35s cubic-bezier(.16,1,.3,1); } .qobiq.ai-yopiq{grid-template-columns:var(--rail-w) 1fr 0} /* ---- Chap ikonka paneli (64px) ---- */ .rail{ z-index:50;grid-column:1; border-right:1px solid var(--border-soft);background:var(--panel); display:flex;flex-direction:column;align-items:center; padding:14px 0;gap:6px;overflow:hidden; } .rail-logo{ width:var(--logo-mark);height:var(--logo-mark);border-radius:6px; display:grid;place-items:center;margin-bottom:12px;flex:0 0 auto; background:linear-gradient(140deg,#fff 0%,#bdbdbd 100%);color:#000; font-weight:700;font-size:11px;letter-spacing:-.04em; } .rail-ayr{flex:1 1 auto} .rail-tugma{ position:relative;width:40px;height:40px;border-radius:8px; display:grid;place-items:center;color:var(--muted); border:1px solid transparent;background:transparent;cursor:pointer; transition:color .25s ease,background .25s ease,border-color .25s ease; } .rail-tugma svg{width:19px;height:19px;display:block} .rail-tugma:hover{color:#fff;background:rgba(255,255,255,.05);border-color:var(--border-soft)} .rail-tugma.faol{color:var(--accent)} .rail-tugma.faol::before{ content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:2px; border-radius:1px;background:var(--accent); } .rail-tugma .ip{ position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); padding:5px 9px;border-radius:6px;background:#161618;border:1px solid var(--border-soft); font-size:11.5px;color:#fff;white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .18s ease;z-index:60; } .rail-tugma:hover .ip{opacity:1} /* ---- Asosiy ustun ---- */ .asos{ grid-column:2;min-width:0;overflow:hidden; display:flex;flex-direction:column; padding:var(--header-y) var(--header-x);gap:var(--gap); } .tepa{display:flex;align-items:center;gap:14px;flex:0 0 auto} .tepa h1{ font-size:var(--h1);font-weight:500;letter-spacing:-.03em;line-height:1.05; } .tepa h1 em{font-size:.96em} .tepa-ong{margin-left:auto;display:flex;align-items:center;gap:10px} /* Jonli nuqta */ .jonli{ display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted); padding:0 12px;height:30px;border-radius:6px; border:1px solid var(--border-soft);background:var(--panel-2); } .jonli i{ width:6px;height:6px;border-radius:50%;background:var(--ok);display:block; animation:nafas 2s ease-in-out infinite; } @keyframes nafas{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.45)}} /* Til almashtirish */ .til{display:inline-flex;border:1px solid var(--border-soft);border-radius:6px;overflow:hidden;background:var(--panel-2)} .til button{ height:30px;padding:0 10px;font-size:11.5px;font-weight:500;letter-spacing:.04em; background:transparent;border:0;color:var(--muted);cursor:pointer; transition:color .2s ease,background .2s ease; } .til button+button{border-left:1px solid var(--border-soft)} .til button:hover{color:#fff} .til button.faol{color:#fff;background:rgba(255,255,255,.08)} /* ---- 5.1. Hero plitkalar ---- */ .hero{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);flex:0 0 auto} .plitka{ position:relative;background:var(--panel);border:1px solid var(--border-soft); border-radius:var(--radius);padding:14px 16px;overflow:hidden; transition:border-color .25s ease; } .plitka:hover{border-color:var(--border)} .plitka .yorliq{ font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); display:block;margin-bottom:6px; } .plitka .raqam{ font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1; font-variant-numeric:tabular-nums; } .plitka .belgi{position:absolute;right:12px;bottom:10px;opacity:.22;color:currentColor} .plitka .belgi svg{width:22px;height:22px;display:block} .plitka.c-oq .raqam{color:#fff} .plitka.c-ok .raqam,.plitka.c-ok .belgi{color:var(--ok)} .plitka.c-jim .raqam,.plitka.c-jim .belgi{color:var(--muted)} .plitka.c-alert .raqam,.plitka.c-alert .belgi{color:var(--alert)} .plitka.c-crit .raqam,.plitka.c-crit .belgi{color:var(--crit)} .plitka.yonish{animation:yonish .4s ease-out} @keyframes yonish{0%{box-shadow:0 0 0 0 var(--accent-dim)}100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}} /* ---- Asosiy tarmoq: jadval | o'ng ustun ---- */ .tarmoq{ flex:1 1 auto;min-height:0; display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); grid-template-rows:minmax(0,1.35fr) minmax(0,1fr); gap:var(--gap); } .a-jadval{grid-column:1;grid-row:1} .a-ong {grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);min-height:0} .a-diqqat{grid-column:1;grid-row:2} .a-trend {grid-column:2;grid-row:2} .tarmoq.bir-ustun{grid-template-columns:minmax(0,1fr)} /* ---- 5.2. Guruhlar jadvali ---- */ .asbob{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .qidiruv{ height:30px;padding:0 10px;min-width:190px;border-radius:6px; background:var(--panel-2);border:1px solid var(--border-soft); color:#fff;font-size:12.5px;outline:none; transition:border-color .25s ease; } .qidiruv::placeholder{color:var(--muted)} .qidiruv:focus{border-color:rgba(255,255,255,.34)} select.qidiruv{cursor:pointer;min-width:0} .jadval-quti{flex:1 1 auto;min-height:0;overflow:auto;margin:0 -6px;padding:0 6px} table{width:100%;border-collapse:collapse;font-size:13px} thead th{ position:sticky;top:0;z-index:2;background:var(--panel); text-align:left;padding:8px 10px;font-size:10.5px;font-weight:500; letter-spacing:.1em;color:var(--muted);white-space:nowrap; border-bottom:1px solid var(--border-soft); } tbody td{ padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; } tbody tr{transition:background .18s ease,transform .18s ease;cursor:pointer} tbody tr:hover{background:rgba(255,255,255,.03);transform:translateX(2px)} td.raqamli{font-variant-numeric:tabular-nums} .hujayra-bosh{font-weight:500} .hujayra-izoh{font-size:11px;color:var(--muted);margin-top:2px} .uzun{max-width:1px;width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chevron{color:var(--muted);text-align:right;width:20px} /* Holat nuqtasi */ .holat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px} .holat i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)} .h-faol i{background:var(--ok)} .h-kutmoqda i{background:var(--alert)} .h-jim i{background:var(--warn)} .h-tashlangan i{background:var(--crit)} /* Ball + progress */ .ball{display:flex;align-items:center;gap:9px;min-width:104px} .ball b{font-weight:500;font-variant-numeric:tabular-nums;font-size:12.5px;width:46px} .ball .yol{flex:1 1 auto;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden} .ball .bar{ display:block;height:100%;width:0;border-radius:2px;background:var(--ok); transition:width .5s cubic-bezier(.16,1,.3,1); } /* Sahifalash */ .sahifalash{ flex:0 0 auto;display:flex;align-items:center;gap:8px; padding-top:10px;margin-top:auto;font-size:12px;color:var(--muted); } .sahifalash .raqamlar{margin-left:auto;display:flex;gap:4px} .sahifalash .raqamlar button{ min-width:26px;height:26px;padding:0 6px;border-radius:5px;cursor:pointer; background:transparent;border:1px solid var(--border-soft);color:var(--muted); font-size:12px;transition:all .2s ease; } .sahifalash .raqamlar button:hover{color:#fff;border-color:var(--border)} .sahifalash .raqamlar button.faol{background:var(--accent);border-color:var(--accent);color:#0b0b0b;font-weight:600} .sahifalash .raqamlar button:disabled{opacity:.35;cursor:default} /* ---- 5.3. Gauge ---- */ .olcham{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 auto;min-height:0} .gauge{position:relative;width:100%;max-width:180px;aspect-ratio:1/.62} .gauge svg{width:100%;height:100%;display:block;overflow:visible} .gauge .yoy-fon{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9;stroke-linecap:round} .gauge .yoy{fill:none;stroke:var(--ok);stroke-width:9;stroke-linecap:round; transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1),stroke .4s ease} .gauge-markaz{ position:absolute;left:0;right:0;bottom:2px;text-align:center;pointer-events:none; } .gauge-markaz b{display:block;font-size:28px;font-weight:500;letter-spacing:-.04em; line-height:1;font-variant-numeric:tabular-nums} .gauge-markaz span{display:block;font-size:11px;color:var(--muted);margin-top:4px} /* ---- Donut ---- */ .donut-quti{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;align-items:center;justify-content:center} .donut{width:100%;max-width:132px;aspect-ratio:1} .donut svg{width:100%;height:100%;display:block;transform:rotate(-90deg)} .donut circle{fill:none;stroke-width:13; transition:stroke-dasharray .6s cubic-bezier(.16,1,.3,1)} .legenda{display:flex;flex-direction:column;gap:5px;width:100%;font-size:11.5px} .legenda div{display:flex;align-items:center;gap:7px;color:var(--muted)} .legenda i{width:7px;height:7px;border-radius:2px;flex:0 0 auto} .legenda b{margin-left:auto;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums} /* ---- 5.4. Diqqat talab qiladi ---- */ .diqqat-royxat{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;margin:0 -8px;padding:0 8px} .diqqat-satr{ display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:8px; cursor:pointer;transition:background .18s ease;animation:sirgal .3s cubic-bezier(.16,1,.3,1); } .diqqat-satr:hover{background:rgba(255,255,255,.035)} @keyframes sirgal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .diqqat-belgi{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center; background:var(--accent-dim);color:var(--alert)} .diqqat-belgi svg{width:14px;height:14px;display:block} .diqqat-satr.d-crit .diqqat-belgi{background:rgba(239,68,68,.16);color:var(--crit)} .diqqat-satr.d-warn .diqqat-belgi{background:rgba(234,179,8,.16);color:var(--warn)} .diqqat-matn{min-width:0;flex:1 1 auto} .diqqat-matn b{display:block;font-size:12.5px;font-weight:500;color:var(--alert); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .diqqat-satr.d-crit .diqqat-matn b{color:var(--crit)} .diqqat-satr.d-warn .diqqat-matn b{color:var(--warn)} .diqqat-matn span{display:block;font-size:11px;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lozim{ flex:0 0 auto;font-size:10.5px;letter-spacing:.04em;padding:2px 8px;border-radius:20px; border:1px solid var(--border-soft);color:var(--muted); } .lozim.l-yuqori{color:var(--crit);border-color:rgba(239,68,68,.4)} .lozim.l-orta{color:var(--warn);border-color:rgba(234,179,8,.4)} /* ---- Trend grafigi ---- */ .trend{flex:1 1 auto;min-height:0;position:relative} .trend svg{width:100%;height:100%;display:block;overflow:visible} .trend .chiziq{ fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round; } .trend .chiziq.chiz{animation:chizish 1s cubic-bezier(.16,1,.3,1) forwards} @keyframes chizish{to{stroke-dashoffset:0}} .trend .maydon{fill:url(#trendGrad);opacity:0;animation:paydo .6s ease .5s forwards} @keyframes paydo{to{opacity:1}} .trend .tor{stroke:rgba(255,255,255,.06);stroke-width:1} /* ---- Bo'sh holat ---- */ .bosh-holat{ flex:1 1 auto;display:grid;place-items:center;text-align:center; color:var(--muted);font-size:13px;gap:4px;padding:18px; } .bosh-holat em{font-size:17px} .bosh-holat[hidden]{display:none} /* ==================================================================== 6. AI PANELI ==================================================================== */ .ai{ grid-column:3;z-index:45;min-width:0;overflow:hidden; border-left:1px solid var(--border-soft);background:var(--panel); display:flex;flex-direction:column; } .qobiq.ai-yopiq .ai{border-left-color:transparent} .ai-ich{ width:var(--ai-w);height:100%;display:flex;flex-direction:column; padding:var(--header-y) 18px;gap:12px;min-height:0; } .ai-bosh{display:flex;align-items:center;gap:10px;flex:0 0 auto} .ai-bosh h2{font-size:15px;font-weight:500;letter-spacing:-.02em} .ai-yop{ margin-left:auto;width:28px;height:28px;border-radius:6px;cursor:pointer; background:transparent;border:1px solid var(--border-soft);color:var(--muted); display:grid;place-items:center;transition:color .2s ease,border-color .2s ease; } .ai-yop:hover{color:#fff;border-color:var(--border)} .ai-yop svg{width:14px;height:14px;display:block} /* Bo'sh joy sarlavhadan KEYIN — "Tozalash" va "yopish" o'ngda yonma-yon */ .ai-bosh h2{margin-right:auto} .ai-bosh .ai-yop{margin-left:0} .ai-tozala{ height:26px;padding:0 9px;border-radius:6px;cursor:pointer; background:transparent;border:1px solid var(--border-soft);color:var(--muted); font-size:11px;letter-spacing:.02em; transition:color .2s ease,border-color .2s ease; } .ai-tozala:hover{color:#fff;border-color:var(--border)} .ai-tozala[hidden]{display:none} /* 6.1. Qadamlar */ .qadamlar{ flex:0 0 auto;background:var(--panel-2);border:1px solid var(--border-soft); border-radius:10px;overflow:hidden; } .qadamlar[hidden]{display:none} .qadam-bosh{ display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer; font-size:11.5px;color:var(--muted); } .qadam-bosh .ok{margin-left:auto;transition:transform .25s ease} .qadamlar.yigilgan .qadam-bosh .ok{transform:rotate(-90deg)} .qadamlar.yigilgan .qadam-royxat{display:none} .qadam-royxat{padding:2px 12px 11px;display:flex;flex-direction:column;gap:7px} .qadam{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted); animation:sirgal .3s cubic-bezier(.16,1,.3,1)} .qadam .bel{flex:0 0 auto;width:13px;text-align:center;line-height:1.4} .qadam .qiy{margin-left:auto;font-size:11px;color:var(--muted);opacity:.8} .qadam.q-ok .bel{color:var(--ok)} .qadam.q-ket .bel{color:var(--accent);display:inline-block;animation:aylan 1s linear infinite} .qadam.q-ket {color:var(--text)} .qadam.q-nav .bel{color:var(--muted);opacity:.55} .qadam.q-xato .bel{color:var(--crit)} .qadam.q-xato {color:var(--crit)} @keyframes aylan{to{transform:rotate(360deg)}} /* 6.2. Javob */ .ai-javob{ flex:1 1 auto;min-height:0;overflow:auto;font-size:13px;line-height:1.55; display:flex;flex-direction:column;gap:9px; } .ai-javob p{color:var(--stat)} .ai-javob ul{padding-left:17px;color:var(--stat)} .ai-javob strong{color:#fff;font-weight:600} /* 6.2a. Suhbat tarixi — savol o'ngda, javob chapda. Ro'yxat to'planadi. */ .xabar{ display:flex;flex-direction:column;gap:7px;max-width:94%; padding:10px 12px;border-radius:10px; border:1px solid var(--border-soft);background:var(--panel-2); animation:in-soft .35s cubic-bezier(.16,1,.3,1); } .xabar.tinch{animation:none} /* tarix yuklanganda sakramasin */ .xabar.x-savol{ align-self:flex-end;background:rgba(255,255,255,.06);color:#fff; text-align:left; } .xabar.x-javob{align-self:flex-start} .xabar .kim{ font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); } .xabar p{margin:0;white-space:pre-wrap} .xabar.x-savol p{color:#fff} .xabar.x-xatoli{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.06)} .ai-javob .kursor{ display:inline-block;width:7px;height:14px;vertical-align:-2px; background:var(--accent);animation:miltilla .9s steps(2) infinite; } @keyframes miltilla{50%{opacity:0}} .manba{ display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted); border-bottom:1px dashed rgba(255,255,255,.2);cursor:pointer;width:fit-content; } .manba:hover{color:#fff} .sarf{font-size:10.5px;color:var(--muted);opacity:.75;font-variant-numeric:tabular-nums} .ai-xato{ display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:10px; background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);font-size:12.5px; } .ai-xato .sarl{color:var(--crit);display:flex;align-items:center;gap:7px} .ai-xato .amal{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)} /* 6.3. Chiplar + savol maydoni */ .chiplar{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto} .ai-savol{display:flex;gap:8px;flex:0 0 auto} .ai-savol input{ flex:1 1 auto;min-width:0;height:var(--btn-h);padding:0 12px;border-radius:6px; background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.4) 55%); border:1px solid var(--border-soft);color:#fff;font-size:13px;outline:none; backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:border-color .25s ease; } .ai-savol input::placeholder{color:var(--muted)} .ai-savol input:focus{border-color:rgba(255,255,255,.34)} .ai-savol .btn{flex:0 0 auto;padding:0 13px} /* AI ochish tugmasi (panel yopiq bo'lganda) */ .ai-och{display:none} .qobiq.ai-yopiq .ai-och{display:inline-flex} /* ==================================================================== KIRISH SAHIFASI ==================================================================== */ .kirish-fon{ min-height:100dvh;display:grid;place-items:center;padding:24px; background:radial-gradient(900px 520px at 50% -14%,rgba(255,255,255,.06),transparent 68%),#000; } .kirish-quti{ width:100%;max-width:352px;display:flex;flex-direction:column;gap:11px; background:var(--panel);border:1px solid var(--border-soft); border-radius:var(--radius);padding:26px; } .kirish-quti .brend{display:flex;align-items:center;gap:10px;font-size:var(--logo);font-weight:500} .kirish-quti .izoh{font-size:12.5px;color:var(--muted);margin-bottom:6px} .kirish-quti label{font-size:11.5px;color:var(--muted)} .kirish-quti input{ height:var(--btn-h);padding:0 12px;border-radius:6px;background:var(--panel-2); border:1px solid var(--border-soft);color:#fff;font-size:14px;outline:none; transition:border-color .25s ease; } .kirish-quti input:focus{border-color:rgba(255,255,255,.34)} .kirish-quti .btn{width:100%;margin-top:4px} .kirish-quti .mayda{font-size:11px;color:var(--muted);opacity:.75;text-align:center} .xabar.xato{ font-size:12.5px;padding:9px 11px;border-radius:7px; background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ffb4b4; } /* ==================================================================== 7. KIRISH ANIMATSIYASI (DIZAYN.md 7-bo'lim) QAT'IY: `.appear` tinch holatda opacity:1 — animatsiya ishlamasa ham sahifa bo'sh qolmaydi. ==================================================================== */ .appear{ opacity:1; animation-duration:1.05s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-delay:var(--d,.08s); } .appear.is-in{animation:none;opacity:1;transform:none;clip-path:none;filter:none} .appear--scale{animation-name:in-scale} .appear--soft {animation-name:in-soft} .appear--mask {animation-name:in-mask} .appear--pop {animation-name:in-pop} .appear--btn {animation-name:in-btn} .appear--side {animation-name:in-side} .appear--stat {animation-name:in-stat} .appear--em {animation-name:in-em;animation-duration:1.2s} @keyframes in-scale{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}} @keyframes in-soft {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes in-mask {from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}} @keyframes in-pop {0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}} @keyframes in-btn {from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} @keyframes in-side {from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}} @keyframes in-stat {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes in-em {from{opacity:.35;filter:blur(4px)}to{opacity:1;filter:none}} .mask-quti{overflow:hidden} /* ==================================================================== 8. MOSLASHUVCHANLIK (DIZAYN.md 8-bo'lim) ==================================================================== */ @media (min-width:1920px){ :root{--h1:40px;--ai-w:400px;--header-x:40px;--gap:20px} } @media (max-width:1439px){ :root{--h1:28px;--ai-w:320px;--header-x:20px} } @media (max-width:1279px){ /* AI paneli yopiq boshlanadi — JS `ai-yopiq` sinfini qo'yadi */ .a-ong{grid-template-columns:1fr 1fr} } @media (max-width:1023px){ .qobiq{ height:auto;min-height:100dvh;overflow:auto; grid-template-columns:1fr;grid-template-rows:auto 1fr; } .rail{ grid-column:1;grid-row:1;flex-direction:row;justify-content:flex-start; width:100%;padding:8px 12px;gap:4px; border-right:0;border-bottom:1px solid var(--border-soft); } .rail-ayr{flex:1 1 auto} .rail-tugma.faol::before{left:8px;right:8px;top:auto;bottom:-8px;width:auto;height:2px} .rail-tugma .ip{display:none} .asos{grid-column:1;grid-row:2;overflow:visible} .hero{grid-template-columns:repeat(2,1fr)} .tarmoq{display:flex;flex-direction:column} .a-ong{grid-template-columns:1fr 1fr} .karta{min-height:220px} .jadval-quti{max-height:52vh} .ai{ position:fixed;inset:0;z-index:45;border-left:0; background:rgba(10,10,11,.82); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); } .ai-ich{width:100%;max-width:520px;margin:0 auto} .qobiq.ai-yopiq .ai{display:none} } /* ==================================================================== HARAKATNI KAMAYTIRISH (DIZAYN.md 7-bo'lim) ==================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} .appear,.hero-photo,em,.badge-star{ opacity:1;transform:none;clip-path:none;filter:none} } /* Yordamchi sinflar */ [hidden]{display:none!important} .faqat-oqish{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .o-muted{color:var(--muted)} .o-ok{color:var(--ok)} .o-warn{color:var(--warn)} .o-alert{color:var(--alert)} .o-crit{color:var(--crit)}