:root{ --bg:#0b0d12; --card:#131722; --text:#e6e8ee; --muted:#9aa3b2; --brand:#5b8cff; --chip:#1b2130; --chip-active:#2b3650; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:24px}
h1{margin:8px 0 16px;font-size:28px}
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
input[type=search]{flex:1;min-width:260px;padding:12px 14px;border-radius:10px;border:1px solid #223;outline:none;background:#0e1320;color:var(--text)}
.group{margin:18px 0 8px}
.group h2{margin:14px 0 8px;font-size:18px;color:#dfe5f2}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid #1b2233;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 16px rgba(0,0,0,.24)}
.title{font-weight:700;line-height:1.3;color:#f3f5f8}
.btn-row{display:flex;gap:8px;margin-top:auto}
.btn{appearance:none;border:1px solid #2b3a66;background:#111933;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer;transition:.2s}
.btn:hover{border-color:#3b5bdd;background:#0f1630}
.btn.primary{background:linear-gradient(135deg,#4e6cff,#6aa0ff);border-color:#4e6cff;color:white}
.btn.primary:hover{filter:brightness(1.05)}
.icon-btn{appearance:none;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px}
.icon-btn:hover{color:#fff}
.modal{position:fixed;inset:0;display:none}
.modal:not(.hidden){display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.modal-content{position:relative;max-width:860px;margin:6vh auto;background:#0f1422;border:1px solid #1c2540;border-radius:14px;padding:20px}
#modal-close{position:absolute;top:10px;right:10px}
.muted{color:var(--muted);font-size:13px;margin-bottom:8px}
article h3{margin:16px 0 8px}
article h4{margin:14px 0 6px}
article p{margin:8px 0;line-height:1.7}
article ul,article ol{margin:8px 0 8px 22px}
article code{background:#0b1120;border:1px solid #1b2440;padding:2px 5px;border-radius:6px}
article a{color:#80aaff}
hr{border:none;border-top:1px solid #223}