/* ============================================================ ChatNova · cn.css — НЭГ ЛЭ ДИЗАЙН Портал болон админы БҮХ хуудас үүнийг ашиглана. Хуудсууд өөрсдийн :root токеныг АГУУЛАХГҮЙ — энд л байна. ============================================================ */ /* ---------- 1 · Токен ---------- */ :root{ --bg:#030409; --bg2:#070912; --panel:#0A0D1A; --panel2:#0D1122; --card:rgba(140,150,255,.045); --line:rgba(140,155,255,.12); --line2:rgba(140,155,255,.22); --text:#F2F5FF; --muted:#8C96BE; --dim:#59628C; --accent:#7A5CFF; --accent2:#3ED6FF; --pink:#FF4FC8; --gold:#F5C97B; --ok:#3EE6A2; --bad:#FF5E76; --warm:#FFC46B; --grad:linear-gradient(115deg,#7A5CFF 5%,#3ED6FF 55%,#7A5CFF 105%); --glow:0 0 44px rgba(122,92,255,.38); --shadow:0 24px 70px rgba(1,2,10,.65); --nav-bg:rgba(5,7,16,.92); --ff-d:'Playfair Display',serif; --ff-b:'Golos Text',system-ui,sans-serif; --ff-m:'JetBrains Mono',ui-monospace,monospace; --r:14px; --r-lg:18px; } [data-theme="light"]{ --bg:#F5F6FC; --bg2:#FDFDFF; --panel:#FFFFFF; --panel2:#F6F7FE; --card:#FFFFFF; --line:rgba(22,30,72,.09); --line2:rgba(22,30,72,.17); --text:#0E1226; --muted:#59628A; --dim:#8B92B4; --accent:#5F49E8; --accent2:#0BA6D8; --pink:#DE3FA6; --gold:#C89432; --ok:#0BA36B; --bad:#E0455E; --warm:#DD9A2C; --grad:linear-gradient(115deg,#5F49E8 5%,#0BA6D8 55%,#5F49E8 105%); --glow:0 0 40px rgba(95,73,232,.22); --shadow:0 22px 60px rgba(24,32,80,.13); --nav-bg:rgba(251,252,255,.94); } /* ---------- 2 · Суурь ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-family:var(--ff-b); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; transition:background .4s ease,color .4s ease; } body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(900px 520px at 14% -10%,rgba(122,92,255,.15),transparent 62%), radial-gradient(720px 450px at 90% 5%,rgba(62,214,255,.09),transparent 66%); } [data-theme="light"] body::before{opacity:.5} a{color:inherit} :focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 22px 96px} .wrap.wide{max-width:1240px} .wrap.narrow{max-width:860px} /* хуудсууд өөрсдийн .wrap padding-тай — дээд талыг нь тэглэнэ, эс бөгөөс наалттай цэсний дээр цоорхой үлдэнэ */ body .wrap{padding-top:0} body .wrap>h1:first-of-type,body .wrap>.eyebrow:first-child{margin-top:0} /* ---------- 3 · Толгойн зурвас (shell) ---------- */ /* ЧУХАЛ: НЭГ мөр. Мөр таслах нь цэсийг эвдэж харагдуулна — тиймээс nowrap, багтахгүй холбоосууд «···» дотор орно. */ .cnbar{ position:sticky; top:0; z-index:900; margin:0 -22px 26px; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .cnbar-in{ max-width:1080px; margin:0 auto; padding:8px 22px; display:flex; align-items:center; gap:4px; flex-wrap:nowrap; } .wrap.wide .cnbar-in{max-width:1240px} .wrap.narrow .cnbar-in{max-width:860px} .cnbar .brand{ font-family:var(--ff-d); font-size:16px; font-weight:600; margin-right:8px; padding:6px 2px; letter-spacing:-.01em; text-decoration:none; flex:none; } /* үндсэн холбоосууд — багтахгүй бол хэвтээ гүйлгэнэ, таслахгүй */ .cnbar .nls{ display:flex; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .cnbar .nls::-webkit-scrollbar{display:none} .cnbar a.nl{ color:var(--muted); text-decoration:none; font-size:13px; padding:6px 10px; border-radius:9px; white-space:nowrap; flex:none; transition:.18s; } .cnbar a.nl:hover{color:var(--text); background:rgba(140,150,255,.08)} .cnbar a.nl.on{color:var(--text); background:rgba(122,92,255,.16); font-weight:600} /* «···» — хоёрдогч холбоос ба админ */ .cnbar .more{position:relative; flex:none} .cnbar .icb{ border:1px solid var(--line); background:none; color:var(--muted); cursor:pointer; font-family:var(--ff-m); font-size:11px; letter-spacing:.08em; padding:5px 9px; border-radius:8px; transition:.18s; flex:none; line-height:1.5; } .cnbar .icb:hover{color:var(--text); border-color:var(--line2)} .cnbar .icb.dots{font-size:14px; letter-spacing:0; padding:4px 10px} .cnbar .icb.dots.on{color:var(--text); border-color:var(--accent)} .cnbar .menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:172px; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:6px; box-shadow:var(--shadow); display:none; z-index:950; } .cnbar .menu.open{display:block} .cnbar a.mi{ display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--muted); text-decoration:none; white-space:nowrap; } .cnbar a.mi:hover{background:rgba(140,150,255,.08); color:var(--text)} .cnbar a.mi.on{color:var(--text); background:rgba(122,92,255,.16); font-weight:600} .cnbar .out{color:var(--dim); font-size:12px; text-decoration:none; padding:6px 8px; flex:none} .cnbar .out:hover{color:var(--bad)} @media(max-width:900px){ .cnbar-in{padding:7px 14px} .cnbar .brand{display:none} .cnbar .out{font-size:0; padding:6px} .cnbar .out::after{content:"⏻"; font-size:13px} } @media(max-width:620px){ .cnbar .planchip{display:none} } /* багцын тэмдэг */ .planchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line2); border-radius:99px; padding:5px 11px; color:var(--muted); text-decoration:none; } .planchip b{color:var(--text); font-weight:600; letter-spacing:.1em} .planchip.trial{border-color:rgba(255,196,107,.45); color:var(--warm)} .planchip.trial b{color:var(--warm)} .planchip.locked{border-color:rgba(255,94,118,.45); color:var(--bad)} .planchip.locked b{color:var(--bad)} /* туршилтын анхааруулга */ .cnnote{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid rgba(255,196,107,.32); background:rgba(255,196,107,.06); border-radius:var(--r); padding:13px 17px; margin:0 0 22px; font-size:13.5px; } .cnnote.bad{border-color:rgba(255,94,118,.34); background:rgba(255,94,118,.06)} .cnnote b{font-weight:600} .cnnote .sp{flex:1} /* ---------- 4 · Толгой ---------- */ .eyebrow{font-family:var(--ff-m); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin:0 0 12px} h1{font-family:var(--ff-d); font-weight:600; font-size:clamp(28px,5vw,40px); line-height:1.14; margin:0 0 10px; letter-spacing:-.01em} h2{font-family:var(--ff-b); font-weight:600; font-size:17px; margin:0 0 4px; letter-spacing:-.01em} h3{font-weight:600; font-size:14.5px; margin:0 0 4px} .lede{color:var(--muted); max-width:62ch; margin:0 0 38px} .hint{color:var(--muted); font-size:13.5px; margin:0 0 16px} .dimtext{color:var(--dim); font-size:12.5px} /* ---------- 5 · Гадаргуу ---------- */ section,.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin-bottom:20px; box-shadow:var(--shadow); } [data-theme="light"] section,[data-theme="light"] .panel{background:#fff} .split{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start} .split.rev{grid-template-columns:1fr 340px} @media(max-width:900px){.split,.split.rev{grid-template-columns:1fr}} .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin-bottom:18px} .stat{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:rgba(255,255,255,.014)} [data-theme="light"] .stat{background:var(--panel2)} .stat b{display:block; font-family:var(--ff-m); font-size:23px; font-weight:500; letter-spacing:-.02em; margin-bottom:2px} .stat small{color:var(--dim); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase} .stat.good b{color:var(--ok)} .stat.warn b{color:var(--warm)} .stat.bad b{color:var(--bad)} .item{ display:flex; align-items:center; gap:12px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; font-size:14px; flex-wrap:wrap; } .item .grow{flex:1; min-width:150px} .item b{font-weight:600; display:block} .item small{color:var(--dim); font-size:12px; font-family:var(--ff-m)} .pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line2); border-radius:99px; padding:4px 10px; color:var(--muted); } .pill.ok{border-color:rgba(62,230,162,.4); color:var(--ok)} .pill.warn{border-color:rgba(255,196,107,.4); color:var(--warm)} .pill.bad{border-color:rgba(255,94,118,.4); color:var(--bad)} /* ---------- 6 · Хэлбэр ---------- */ label.f{display:block; font-family:var(--ff-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 6px} input,select,textarea{ width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:14px; line-height:1.5; } [data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff} input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(122,92,255,.14)} input::placeholder,textarea::placeholder{color:var(--dim)} textarea{resize:vertical; min-height:76px} .row{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:12px} .field{margin-bottom:14px} .btn{ border:1px solid var(--line2); background:rgba(140,150,255,.06); color:var(--text); border-radius:10px; padding:10px 17px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s; white-space:nowrap; } .btn:hover:not(:disabled){border-color:var(--accent); background:rgba(122,92,255,.14)} .btn:disabled{opacity:.45; cursor:not-allowed} .btn.primary{background:var(--grad); color:#080a14; border-color:transparent; box-shadow:var(--glow)} .btn.primary:hover:not(:disabled){filter:brightness(1.08)} .btn.ghost{background:none; color:var(--muted)} .btn.ghost:hover:not(:disabled){color:var(--text)} .btn.danger{border-color:rgba(255,94,118,.4); color:var(--bad); background:none} .btn.sm{padding:6px 12px; font-size:12.5px} /* ---------- 7 · Мэдэгдэл ---------- */ .msg{border-radius:10px; padding:10px 14px; font-size:13.5px; margin-top:12px} .msg.ok{border:1px solid rgba(62,230,162,.35); background:rgba(62,230,162,.07); color:var(--ok)} .msg.err{border:1px solid rgba(255,94,118,.35); background:rgba(255,94,118,.07); color:var(--bad)} .msg.info{border:1px solid var(--line); background:rgba(140,150,255,.05); color:var(--muted)} #cnToast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:2000; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:12px 20px; font-size:13.5px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; } #cnToast.on{opacity:1; transform:translate(-50%,0)} #cnToast.err{border-color:rgba(255,94,118,.5); color:var(--bad)} /* ---------- 8 · Түгжигдсэн боломж ---------- */ .locked{position:relative} .locked>*:not(.lockmsg){opacity:.28; pointer-events:none; filter:saturate(.3)} .lockmsg{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; background:linear-gradient(180deg,rgba(3,4,9,.55),rgba(3,4,9,.85)); border-radius:var(--r-lg); } [data-theme="light"] .lockmsg{background:linear-gradient(180deg,rgba(245,246,252,.7),rgba(245,246,252,.94))} .lockmsg p{margin:0; color:var(--muted); font-size:13.5px; max-width:38ch} /* ---------- 9 · Ачаалж байна ---------- */ .skel{height:14px; border-radius:6px; background:linear-gradient(90deg,var(--line),rgba(140,155,255,.06),var(--line)); background-size:200% 100%; animation:sh 1.4s linear infinite; margin:8px 0} @keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ---------- 10 · Хүснэгт ---------- */ table.cn{width:100%; border-collapse:collapse; font-size:13.5px} table.cn th{font-family:var(--ff-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)} table.cn td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top} table.cn tr:last-child td{border-bottom:none} /* ============================================================ Phase 52 нэмэлтүүд ============================================================ */ /* ---------- A · Өдрийн горимын уншигдах байдал ---------- Хуудсууд өөрсдийн