:root{--bg:#0b1220;--card:#0f1a2b;--muted:#8ea0b5;--text:#e6eefc;--accent:#4db6ff;--ring:rgba(77,182,255,.35)}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#12213d,transparent),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans Thai,sans-serif}.container{max-width:1100px;margin:48px auto;padding:0 20px}.header{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#3ac7ff,#1472ff);display:grid;place-items:center;box-shadow:0 10px 30px #1472ff59}h1{font-size:clamp(28px,4vw,38px);margin:0;letter-spacing:.3px}.sub{color:var(--muted);margin-top:6px}.controls{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}input[type=search],select{background:#0a1424;border:1px solid #1e2b44;color:var(--text);padding:12px 14px;border-radius:12px;outline:none}input[type=search]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 6px var(--ring)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}.card{background:var(--card);border:1px solid #1a2740;border-radius:16px;padding:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover{transform:translateY(-4px);border-color:#2a3b60;box-shadow:0 10px 30px #00000040}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.2px;border:1px solid #1e314f;color:#b7ccff}.badge.skill{border-color:#1a3b36;color:#b8ffe9}.title{font-weight:600;line-height:1.35;margin:10px 0 6px;min-height:44px}.meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}.actions{margin-top:12px;display:flex;gap:8px}.btn{text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:#0a1424;border:1px solid #1e2b44;color:var(--text);border-radius:12px;font-weight:600}.btn:hover{border-color:var(--accent)}.small{font-size:12px;color:var(--muted)}.hidden{display:none!important}