/* ============================================================ CyberSec Arsenal — shared theme Design tokens, reset, matrix backdrop, buttons, toasts. ============================================================ */ :root{ --bg:#050a05; --bg2:#0a1a0a; --bg3:#0d1f0d; --green:#00ff41; --cyan:#00e5ff; --purple:#bd00ff; --red:#ff0040; --yellow:#ffeb00; --orange:#ff6b00; --card:#0a1a0a; --border:#1a3a1a; --text:#c0ffc0; --dim:#507050; --glow:0 0 20px rgba(0,255,65,.25); --radius:10px; --font:ui-monospace,'JetBrains Mono','Fira Code','SF Mono',Menlo,Consolas,'DejaVu Sans Mono','Courier New',monospace; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ background:var(--bg); color:var(--text); font-family:var(--font); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{color:var(--cyan);text-decoration:none} a:hover{text-decoration:underline} canvas#matrix{ position:fixed; inset:0; z-index:0; opacity:.07; pointer-events:none; } /* Scrollbars */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:#020802} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--green)} /* Buttons */ .btn{ font-family:var(--font); cursor:pointer; border-radius:6px; border:1px solid var(--green); background:rgba(0,255,65,.08); color:var(--green); padding:11px 18px; font-size:14px; letter-spacing:1px; transition:all .2s; text-transform:uppercase; } .btn:hover{background:rgba(0,255,65,.18);box-shadow:var(--glow)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-ghost{background:none;border-color:var(--border);color:var(--dim)} .btn-ghost:hover{border-color:var(--green);color:var(--green);box-shadow:none} /* Form fields */ .field{margin-bottom:16px;text-align:left} .field label{ display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase; color:var(--dim);margin-bottom:6px; } .field input{ width:100%; background:#020802; border:1px solid var(--border); border-radius:6px; padding:12px 14px; color:var(--green); font-family:var(--font); font-size:14px; outline:none; transition:all .25s; } .field input:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.25)} .field input::placeholder{color:#2a4a2a} /* Toast notifications */ #toasts{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px} .toast{ min-width:230px;max-width:360px;padding:13px 16px;border-radius:11px; font-size:13px;line-height:1.45;font-family:var(--font); border:1px solid var(--border);border-left:3px solid var(--dim); background:var(--card);color:var(--text); box-shadow:0 10px 34px rgba(0,0,0,.35);animation:slideIn .25s ease; } .toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--red)} .toast.info{border-left-color:var(--cyan)} @keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} @keyframes fadeOut{to{opacity:0;transform:translateX(30px)}} .spinner{ width:16px;height:16px;border:2px solid rgba(0,255,65,.25); border-top-color:var(--green);border-radius:50%; display:inline-block;animation:spin .7s linear infinite;vertical-align:middle; } @keyframes spin{to{transform:rotate(360deg)}} /* ============================================================ Kunduzgi (light) rejim — ============================================================ */ :root[data-theme="light"]{ --bg:#eef2ee; --bg2:#e3e9e3; --bg3:#d8e0d8; --green:#0b7a2a; --cyan:#0779a0; --purple:#7b1fa2; --red:#c62828; --yellow:#8a7000; --orange:#c2410c; --card:#ffffff; --border:#ccd8cc; --text:#16241a; --dim:#5c6b5c; --glow:0 0 12px rgba(11,122,42,.18); } [data-theme="light"] canvas#matrix{opacity:.03} [data-theme="light"] ::-webkit-scrollbar-track{background:#dde5dd} [data-theme="light"] ::-webkit-scrollbar-thumb{background:#aebfae} /* asosiy yuzalar */ [data-theme="light"] header{background:linear-gradient(135deg,#dff3e3,#eef7f0,#dff3e3);box-shadow:0 2px 20px rgba(0,80,20,.08)} [data-theme="light"] .logo{text-shadow:none} [data-theme="light"] .toolbar{background:#e7efe7} [data-theme="light"] #search{background:#fff;color:var(--text)} [data-theme="light"] #search::placeholder{color:#9ab09a} [data-theme="light"] aside,[data-theme="light"] .reader-nav,[data-theme="light"] .lab-cli, [data-theme="light"] .ai-input{background:#e7efe7} [data-theme="light"] .cmd-row,[data-theme="light"] .launch-cmd,[data-theme="light"] .ai-msg.bot .ai-bubble{background:#f2f6f2;border-color:#d8e2d8} [data-theme="light"] .cmd-code{color:#0a6a86} [data-theme="light"] .cmd-desc{color:#4a5a4e;border-top-color:#d3ddd3} [data-theme="light"] .modal{background:#fff;box-shadow:0 0 50px rgba(0,80,20,.15)} [data-theme="light"] #modal.sheet .md-head{background:linear-gradient(180deg,#f2f7f2 72%,rgba(255,255,255,.96));border-bottom-color:#d8e2d8;box-shadow:0 6px 16px rgba(0,60,20,.06)} [data-theme="light"] #modal.sheet .modal-close{background:rgba(255,255,255,.65)} [data-theme="light"] .lab-launch{background:linear-gradient(135deg,#dff3e3,#eef7f0)} [data-theme="light"] .nav-btn,[data-theme="light"] .user-badge,[data-theme="light"] .book-card, [data-theme="light"] .ai-hello .chips button,[data-theme="light"] .ctf-filters #ctf-search, [data-theme="light"] .fset,[data-theme="light"] .ccat,[data-theme="light"] .ai-input input, [data-theme="light"] .field input,[data-theme="light"] .field textarea,[data-theme="light"] .sec-select, [data-theme="light"] .profile .field input,[data-theme="light"] .profile .field textarea, [data-theme="light"] .pf-tg,[data-theme="light"] .auth-card{background:#fff;color:var(--text)} [data-theme="light"] .auth-card{box-shadow:0 8px 40px rgba(0,80,20,.12)} /* oq/och matnlarni to'q qilish */ [data-theme="light"] .tool-name,[data-theme="light"] .book-card h3,[data-theme="light"] .lab-card h3, [data-theme="light"] .md-head h2,[data-theme="light"] .lt-head h3,[data-theme="light"] .profile .pf-head h2, [data-theme="light"] .md strong,[data-theme="light"] .step .st{color:#0e1c12} [data-theme="light"] .ai-msg.user .ai-bubble{background:#dbeef6;color:#0a3540;border-color:#a8d4e0} /* kod bloklari o'qilishi uchun */ [data-theme="light"] .md pre{background:#0d160d} [data-theme="light"] .md code{background:#e3ece3;color:#0a6a86;border-color:#cddccd} /* kitob o'quvchi — kunduzgi rejim (haqiqiy kitob sahifasidek) */ [data-theme="light"] .reader-body .md{color:#2b3a30} [data-theme="light"] .reader-body .md p,[data-theme="light"] .reader-body .md li{color:#2c3d31} [data-theme="light"] .reader-body .md > p:first-of-type::first-letter{text-shadow:none} [data-theme="light"] .reader-body .md strong{color:#0e1c12} [data-theme="light"] .reader-body .md blockquote{color:#5c5417;background:linear-gradient(180deg,rgba(180,140,0,.1),rgba(180,140,0,.03));border-color:rgba(180,140,0,.3);border-left-color:#b08900} [data-theme="light"] .reader-body .md blockquote::before{color:#b08900} [data-theme="light"] .reader-body .md td{color:#2e3d32;border-bottom-color:rgba(0,0,0,.06)} [data-theme="light"] .reader-body .md tr:nth-child(even) td{background:rgba(0,60,20,.03)} [data-theme="light"] .reader-body .md tr:hover td{background:rgba(11,122,42,.07)} [data-theme="light"] .reader-body .md th{background:linear-gradient(135deg,rgba(11,122,42,.14),rgba(7,121,160,.1));border-bottom-color:rgba(11,122,42,.3)} [data-theme="light"] .reader-body .md :not(pre) > code{background:rgba(123,31,162,.09);color:#7b1fa2;border-color:rgba(123,31,162,.25)} /* kunduzgi rejim — neon "glow"larni yumshatish, ranglarni moslashtirish */ [data-theme="light"] canvas#matrix{opacity:.02} [data-theme="light"] .logo,[data-theme="light"] .section-title,[data-theme="light"] .page-head h1, [data-theme="light"] .rn-title,[data-theme="light"] .md h1,[data-theme="light"] .fav-star.on, [data-theme="light"] .auth-logo{text-shadow:none} [data-theme="light"] .user-badge .dot{box-shadow:0 0 6px rgba(11,122,42,.45)} [data-theme="light"] .nav-btn.active{box-shadow:0 2px 10px rgba(11,122,42,.18)} [data-theme="light"] .tool-card{background:#fff;border-color:#d8e2d8;box-shadow:0 2px 10px rgba(0,60,20,.05)} [data-theme="light"] .tool-card:hover{box-shadow:0 4px 18px rgba(11,122,42,.15)} [data-theme="light"] .lab-card{background:#fff;border-color:#d8e2d8} [data-theme="light"] .lab-card:hover{box-shadow:0 4px 18px rgba(11,122,42,.15)} [data-theme="light"] .tool-desc,[data-theme="light"] .task,[data-theme="light"] .book-card p{color:#425246} /* yechilgan kartaning kunduzgi ko'rinishi */ [data-theme="light"] .lab-card.solved{border-color:var(--green); background:linear-gradient(160deg,rgba(11,122,42,.12),rgba(11,122,42,.03))} [data-theme="light"] .lab-card.solved h3,[data-theme="light"] .lab-card.solved h3 .cid, [data-theme="light"] .lab-card.solved .cta{color:var(--green)} [data-theme="light"] .lab-card .lc-solved{background:linear-gradient(135deg,var(--green),#0e9a37);color:#fff;box-shadow:0 0 8px rgba(11,122,42,.3)} [data-theme="light"] .lc-diff.d-1{color:#0b7a2a;border-color:rgba(11,122,42,.35);background:rgba(11,122,42,.07)} /* teg (tag) chiplari — kunduzda och rang */ [data-theme="light"] .tag{background:#eef4ee;border-color:#d3ddd3;color:#5c6b5c} [data-theme="light"] .tag:hover{border-color:var(--cyan);color:var(--cyan)} [data-theme="light"] .tags{border-top-color:#dbe4db} [data-theme="light"] .ccat{background:#fff} [data-theme="light"] .pg-btn{background:#fff;border-color:#d3ddd3;color:#5c6b5c} [data-theme="light"] .pg-btn:hover{border-color:var(--green);color:var(--green)} [data-theme="light"] .pg-btn.active{color:#fff;background:linear-gradient(135deg,var(--green),#0e9a37)} /* Test (Quiz) — kunduzgi rejim */ [data-theme="light"] .qp-opt{background:#f4f8f4;border-color:#d8e2d8;color:var(--text)} [data-theme="light"] .qp-opt:hover:not(:disabled){background:rgba(7,121,160,.07)} [data-theme="light"] .qp-letter{background:rgba(0,0,0,.06);color:#5c6b5c} [data-theme="light"] .qp-bar{background:#dbe4db} [data-theme="light"] .qp-opt.correct{background:rgba(11,122,42,.14)} [data-theme="light"] .qp-opt.wrong{background:rgba(198,40,40,.12)} [data-theme="light"] .qp-exp.ok{color:#1c5a2a;background:rgba(11,122,42,.09)} [data-theme="light"] .qp-exp.bad{color:#8a2230;background:rgba(198,40,40,.08)} [data-theme="light"] .qp-next{color:#fff} [data-theme="light"] .us-item{background:#f4f8f4;border-color:#d8e2d8} [data-theme="light"] .lbx-row{background:#fff;border-color:#d8e2d8} [data-theme="light"] .lbx-rank{background:#eef4ee;color:var(--green)} [data-theme="light"] .lbx-tabs{background:#eef4ee;border-color:#d8e2d8} [data-theme="light"] .lbx-tab.active{color:#fff} [data-theme="light"] .lbx-tnum{color:#0b7a2a} [data-theme="light"] .lbx-row.r3 .lbx-rank{color:var(--green)} [data-theme="light"] .ad-btn{background:#fff;border-color:#d8e2d8;color:#5c6b5c} [data-theme="light"] .ad-table td{border-bottom-color:rgba(0,0,0,.06)} [data-theme="light"] .ad-table tbody tr:hover td{background:rgba(11,122,42,.05)} [data-theme="light"] .ad-role{background:#eef4ee} [data-theme="light"] .fbtn{color:#5c6b5c} [data-theme="light"] .fbtn.active{background:rgba(11,122,42,.1);color:var(--green)}