:root { --panel: rgba(22,22,22,.9); --border: rgba(255,255,255,.14); --muted: #ababab; --text: #f5f5f5; }
body { min-height: 100vh; background: #090909; }.nav-links a.active { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.45); }.profile-menu-banner { background:linear-gradient(135deg,#3a3a3a,#171717); }
.binds-page { min-height:100vh; padding:132px max(20px,6vw) 64px; color:var(--text); background:linear-gradient(135deg,#050505 0%,#181818 52%,#0b0b0b 100%); }.binds-header,.binds-layout { width:min(1060px,100%); margin-inline:auto; }.binds-header { margin-bottom:28px; animation:fade-up .55s ease-out both; }.binds-header h1 { margin:0; font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.05em; }.binds-header p { margin:8px 0 0; color:var(--muted); }
.binds-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.binds-panel { padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--panel); box-shadow:0 12px 32px rgba(0,0,0,.28); animation:fade-up .55s ease-out both; }.generator-panel { animation-delay:.08s; }.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:19px; border-bottom:1px solid var(--border); }.section-heading h2 { margin:0; font-size:1.25rem; }.section-heading p { margin:5px 0 0; color:var(--muted); font-size:.9rem; }.section-heading > i { padding:11px; border-radius:12px; color:#eee; background:#303030; }
.bind-list { display:grid; gap:10px; margin-top:18px; }.bind-item { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:13px; border:1px solid transparent; border-radius:13px; background:#1c1c1c; transition:border-color .2s ease,transform .2s ease; }.bind-item:hover { border-color:var(--border); transform:translateX(3px); }.bind-item kbd { min-width:48px; padding:8px 7px; border:1px solid #565656; border-bottom-width:3px; border-radius:7px; color:#fff; text-align:center; font:700 .83rem Arial,sans-serif; background:#282828; }.bind-item strong,.bind-item span { display:block; }.bind-item strong { font-size:.94rem; }.bind-item span { margin-top:3px; color:var(--muted); font-size:.78rem; }.copy-bind,.copy-result { border:0; border-radius:9px; color:#eee; cursor:pointer; background:#353535; transition:background .2s ease,transform .2s ease; }.copy-bind { width:35px; height:35px; }.copy-bind:hover,.copy-result:hover:not(:disabled) { background:#515151; transform:translateY(-1px); }
.bind-form { display:grid; gap:9px; margin-top:18px; }.command-fields { display:grid; gap:10px; }.command-group { display:grid; gap:9px; }.command-group + .command-group { padding-top:10px; border-top:1px solid var(--border); }.bind-form label { color:#d4d4d4; font-size:.85rem; font-weight:700; }.bind-form input { width:100%; padding:12px 13px; border:1px solid var(--border); border-radius:9px; outline:0; color:#f5f5f5; font:inherit; background:#1c1c1c; }.bind-form input:focus { border-color:#e1e1e1; box-shadow:0 0 0 3px rgba(255,255,255,.08); }.add-command { width:max-content; padding:8px 10px; border:1px solid var(--border); border-radius:8px; color:#ddd; font:700 .8rem Arial,sans-serif; cursor:pointer; background:#292929; transition:background .2s ease; }.add-command:hover { background:#3d3d3d; }.remove-command { justify-self:end; padding:5px 8px; border:0; border-radius:6px; color:#ccc; font:700 .75rem Arial,sans-serif; cursor:pointer; background:#343434; }.remove-command:hover { background:#555; }.generate-button { margin-top:7px; padding:12px; border:0; border-radius:9px; color:#111; font:700 .92rem Arial,sans-serif; cursor:pointer; background:#eeeeee; transition:transform .2s ease,background .2s ease; }.generate-button:hover { transform:translateY(-2px); background:#fff; }.bind-result { min-height:91px; margin-top:17px; padding:13px; display:flex; flex-direction:column; gap:12px; justify-content:space-between; border:1px dashed var(--border); border-radius:11px; background:#171717; }.bind-result code { overflow-wrap:anywhere; color:#e7e7e7; font-size:.82rem; }.copy-result { align-self:flex-end; padding:8px 11px; font:700 .8rem Arial,sans-serif; }.copy-result:disabled { cursor:not-allowed; opacity:.48; }
@keyframes fade-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @media (max-width:760px) { .binds-page { padding-top:92px; }.binds-layout { grid-template-columns:1fr; } }

.category-eyebrow{display:inline-flex;gap:8px;align-items:center;color:#bdbdbd;font-size:.75rem;font-weight:800;letter-spacing:.12em;margin-bottom:8px}