/* ============================================================ Munano List — stylesheet Dark theme inspired by pointercrate. ============================================================ */ :root { --bg: #0e1013; /* page background */ --bg-soft: #16181d; /* panels and cards */ --bg-softer: #1d2026; /* hovered cards, inner boxes */ --border: #2a2e36; /* subtle borders */ --text: #e8eaed; /* main text */ --text-dim: #9aa0a8; /* secondary text */ --accent: #ff5c5c; /* Geometry Dash red */ --accent-osu: #ff66aa; /* osu! pink */ --gold: #ffd166; /* points and rank highlights */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; } /* When the osu! tab is active, the accent color switches to pink. script.js adds the class "osu-mode" to . */ body.osu-mode { --accent: var(--accent-osu); } /* ---------- Top bar ---------- */ .topbar { background: var(--bg-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 18px; } .brand-logo-full { height: 30px; width: auto; object-fit: contain; } .tabs { display: flex; gap: 8px; } .tab { background: none; border: 1px solid transparent; color: var(--text-dim); font-size: 15px; padding: 8px 16px; border-radius: 8px; cursor: pointer; } .tab:hover { color: var(--text); background: var(--bg-softer); } .tab.active { color: var(--text); background: var(--bg-softer); border-color: var(--accent); } /* Anything with the class "hidden" disappears from the page */ .hidden { display: none !important; } /* ---------- Log in / log out / register buttons ---------- */ .topbar-buttons { display: flex; gap: 8px; } .login-button { background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: 14px; padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .login-button:hover { color: var(--text); border-color: var(--accent); } /* ---------- Hero ---------- */ .hero { max-width: 1100px; margin: 0 auto; padding: 36px 20px 8px; text-align: center; } .hero h1 { font-size: 32px; letter-spacing: 0.5px; } .hero p { color: var(--text-dim); margin-top: 6px; } /* ---------- Layout ---------- */ .layout { max-width: 1100px; margin: 24px auto 60px; padding: 0 20px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } @media (max-width: 850px) { .layout { grid-template-columns: 1fr; } } /* ---------- List entries ---------- */ .list-column { display: flex; flex-direction: column; gap: 12px; } .section-label { color: var(--text-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin: 14px 4px 2px; } .entry { display: flex; align-items: center; gap: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .entry:hover { background: var(--bg-softer); border-color: var(--accent); } .entry-rank { font-size: 26px; font-weight: 800; color: var(--accent); min-width: 58px; text-align: center; } /* Top 3 ranks get a golden color */ .entry-rank.top { color: var(--gold); } /* The small video preview picture on each entry */ .entry-thumb { width: 120px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--bg-softer); flex-shrink: 0; } /* Shown when an entry has no video link */ .entry-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 12px; } @media (max-width: 600px) { .entry-thumb { display: none; } } .entry-main { flex: 1; min-width: 0; } .entry-name { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-sub { color: var(--text-dim); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry-points { text-align: right; min-width: 90px; } .entry-points .value { font-size: 18px; font-weight: 700; color: var(--gold); } .entry-points .label { font-size: 12px; color: var(--text-dim); } /* ---------- Sidebar ---------- */ .sidebar { display: flex; flex-direction: column; gap: 16px; } .panel { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .panel-title { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 10px; } .panel-text { color: var(--text-dim); font-size: 14px; line-height: 1.5; } .leaderboard { list-style: none; } .leaderboard li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 15px; } .leaderboard li:last-child { border-bottom: none; } .leaderboard .lb-rank { color: var(--text-dim); min-width: 26px; text-align: right; } .leaderboard .lb-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leaderboard .lb-points { color: var(--gold); font-weight: 700; } .submit-button { display: block; margin-top: 12px; text-align: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; padding: 10px; border-radius: 8px; } .submit-button:hover { filter: brightness(1.1); } /* ---------- Detail overlay ---------- */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; } .overlay.hidden { display: none; } .detail-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 24px; } .detail-rank { color: var(--accent); font-weight: 800; font-size: 15px; letter-spacing: 1px; } .detail-name { font-size: 26px; font-weight: 800; margin: 4px 0 14px; } .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; } .detail-row .key { color: var(--text-dim); } .detail-video { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 600; text-decoration: none; } .detail-video:hover { text-decoration: underline; } .records-title { margin-top: 20px; margin-bottom: 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .record-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 15px; } .record-row:last-child { border-bottom: none; } .record-row .percent { color: var(--gold); font-weight: 700; } /* Records below the list requirement (they give no points) */ .record-row.below-requirement { opacity: 0.45; } /* A level/score row on a profile — clickable to open its detail */ .record-row.profile-listing { cursor: pointer; } .record-row.profile-listing:hover { color: var(--accent); } .record-row a { color: var(--accent); text-decoration: none; font-size: 13px; } /* ---------- Forms (submit and log in) ---------- */ .form-label { display: block; color: var(--text-dim); font-size: 13px; margin-top: 12px; } .form-input { display: block; width: 100%; margin-top: 5px; background: var(--bg-softer); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; padding: 9px 12px; } .form-input:focus { outline: none; border-color: var(--accent); } .form-error { color: #ff8080; font-size: 14px; margin-top: 10px; min-height: 18px; } .form-button { margin-top: 8px; width: 100%; background: var(--accent); border: none; color: #fff; font-weight: 700; font-size: 15px; padding: 11px; border-radius: 8px; cursor: pointer; } .form-button:hover { filter: brightness(1.1); } .form-switch { margin-top: 14px; text-align: center; font-size: 14px; color: var(--text-dim, #999); } .form-switch a { color: var(--accent); font-weight: 600; text-decoration: none; } .form-switch a:hover { text-decoration: underline; } .nong-link, .nong-link:visited { color: var(--text); text-decoration: underline; } .nong-link:hover { color: var(--text-dim); } /* ---------- Full-width tabs (Leaderboard and Moderation) ---------- */ /* These tabs hide the sidebar and let the main column take the full width of the page. */ .layout.full-width { grid-template-columns: 1fr; } .layout.full-width .sidebar { display: none; } /* ---------- Leaderboard tab ---------- */ .lb-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 700px) { .lb-columns { grid-template-columns: 1fr; } } .lb-column-title { font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 10px; } .lb-row { display: flex; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; } .lb-row:hover { border-color: var(--accent); background: var(--bg-softer); } .lb-row .lb-place { color: var(--text-dim); font-weight: 700; min-width: 30px; } .lb-row .lb-player { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-row .lb-score { color: var(--gold); font-weight: 700; } /* Clickable player names (records, sidebar leaderboard) */ .player-link { color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } .player-link:hover { text-decoration-color: var(--accent); } /* ---------- Profile page ---------- */ /* Profiles are full pages (address /profile/), shown in the main column as one centered card. */ .profile-page { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 26px; max-width: 640px; margin: 0 auto; width: 100%; } .profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bg-softer); border: 1px solid var(--border); flex-shrink: 0; } .profile-avatar.placeholder { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--text-dim); } .profile-name { font-size: 24px; font-weight: 800; word-break: break-word; } .profile-pronouns { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-left: 8px; } .mod-name { color: #f1c40f !important; font-weight: 700; } .owner-name { color: #e74c3c !important; font-weight: 700; } .profile-sub { color: var(--text-dim); font-size: 14px; margin-top: 3px; } .profile-social { display: flex; gap: 10px; margin-top: 8px; } .profile-social-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-softer); border: 1px solid var(--border); transition: border-color 0.15s; } .profile-social-icon:hover { border-color: var(--accent); } .profile-social-icon img { width: 16px; height: 16px; object-fit: contain; } .profile-bio { color: var(--text); font-size: 15px; line-height: 1.5; margin-bottom: 14px; word-break: break-word; } .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .stat-box { background: var(--bg-softer); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; } .stat-box .value { font-size: 22px; font-weight: 800; color: var(--gold); } .stat-box .label { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* Achievement badges */ .ach { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .ach:last-child { border-bottom: none; } /* Achievements the player has not earned yet are dimmed */ .ach.locked { opacity: 0.35; } .ach-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; } .ach-desc { color: var(--text-dim); font-size: 13px; } /* Multi-line text field (profile bio) */ textarea.form-input { min-height: 80px; resize: vertical; font-family: inherit; } /* One pending submission, shown as a wide card */ .pending-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .pending-title { font-weight: 700; font-size: 15px; } .pending-detail { font-size: 14px; color: var(--text); margin-top: 3px; word-break: break-word; } .pending-detail.dim { color: var(--text-dim); font-size: 13px; } .pending-detail a { color: var(--accent); } .pending-buttons { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; width: 110px; } /* Sub-tabs inside Moderation: Levels & Scores / Players */ .mod-subtabs { display: flex; gap: 8px; margin-bottom: 4px; } .mod-subtab { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-dim); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; } .mod-subtab:hover { color: var(--text); } .mod-subtab.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Move up/down buttons on a level or score row */ .mod-row-move { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .mod-row-move .small-button { padding: 2px 8px; line-height: 1.2; } .mod-row-move .small-button:disabled { opacity: 0.3; cursor: default; } /* One level or score row in the "manage" sections */ .mod-row { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; } .mod-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .mod-row-name { font-weight: 700; font-size: 15px; word-break: break-word; } .mod-row-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; } .mod-row-buttons { display: flex; gap: 6px; flex-shrink: 0; } /* A record line inside a level row */ .mod-record { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-dim); } /* Small edit/delete buttons */ .small-button { background: var(--bg-softer); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .small-button:hover { border-color: var(--accent); } .small-button.danger { color: #ff8080; } .small-button.danger:hover { border-color: #b33939; } /* Dashed "+ Add ..." button */ .add-row-button { background: none; border: 1px dashed var(--border); color: var(--text-dim); padding: 12px; border-radius: 12px; cursor: pointer; font-size: 14px; } .add-row-button:hover { border-color: var(--accent); color: var(--text); } .approve-button, .reject-button { flex: 1; border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 7px; border-radius: 6px; cursor: pointer; } .approve-button { background: #2e9e5b; } .reject-button { background: #b33939; } .approve-button:hover, .reject-button:hover { filter: brightness(1.15); } .close-button { margin-top: 18px; width: 100%; background: var(--bg-softer); border: 1px solid var(--border); color: var(--text); padding: 10px; border-radius: 8px; font-size: 15px; cursor: pointer; } .close-button:hover { border-color: var(--accent); } /* ---------- Footer ---------- */ .footer { text-align: center; color: var(--text-dim); font-size: 13px; padding: 20px; border-top: 1px solid var(--border); } .footer code { background: var(--bg-softer); padding: 2px 6px; border-radius: 4px; } /* ---------- Home View ---------- */ .home-container { display: flex; justify-content: center; margin-top: 20px; } .home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 800px; width: 100%; } @media (max-width: 600px) { .home-cards { grid-template-columns: 1fr; } } .home-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 32px 24px; text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; } .home-card:hover { background: var(--bg-softer); border-color: var(--accent); transform: translateY(-4px); } .home-card-icon { font-size: 48px; margin-bottom: 16px; } .home-card h2 { font-size: 24px; margin-bottom: 8px; } .home-card p { color: var(--text-dim); font-size: 15px; margin-bottom: 20px; } .home-stats { color: var(--gold); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } /* ---------- Profile Tweaks ---------- */ .profile-wrapper { position: relative; max-width: 640px; margin: 0 auto; width: 100%; } .profile-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .back-to-lists-top-left { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 8px 0; } .back-to-lists-top-left:hover { color: var(--text); text-decoration: underline; } .edit-profile-top-right { width: auto !important; margin-top: 0 !important; padding: 6px 14px !important; font-size: 13px !important; } /* Wraps the rank icon, verified check and flag together so they share ONE consistent gap and size, no matter how big the name next to them is (e.g. the 24px profile name vs. a 14px row). */ .player-badges { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; vertical-align: middle; } .mod-icon { width: 16px; height: 16px; vertical-align: middle; border-radius: 4px; flex-shrink: 0; } /* Verification badge */ .verified-badge { color: #3498db; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; user-select: none; flex-shrink: 0; } /* The flag-icons library sizes flags in "em", so they blow up to match whatever font-size surrounds them (huge on the 24px profile name). Fixing the size in pixels here keeps every flag the same size as the other badges, everywhere on the site. */ .player-badges .fi { width: 18px; height: 13px; line-height: 13px; vertical-align: middle; flex-shrink: 0; } /* ------------------------------------------------------------ PRIDE FLAGS Drawn entirely with CSS gradients/shapes, no image files. Shown right after the country flag (both live as siblings inside .player-badges, whose flex "gap" spaces them evenly). ------------------------------------------------------------ */ .pride-flag { display: inline-block; position: relative; width: 18px; height: 13px; border-radius: 2px; overflow: hidden; vertical-align: middle; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); } .pride-flag-shape { position: absolute; top: 0; left: 0; height: 100%; } /* Plain horizontal-stripe flags: one linear-gradient each. */ .pride-flag-bisexual { background: linear-gradient(to bottom, #D60270 0% 40%, #9B4F96 40% 60%, #0038A8 60% 100%); } .pride-flag-pansexual { background: linear-gradient(to bottom, #FF218C 0% 33.3%, #FFD800 33.3% 66.6%, #21B1FF 66.6% 100%); } .pride-flag-aromantic { background: linear-gradient(to bottom, #3DA542 0% 20%, #A7D379 20% 40%, #FFFFFF 40% 60%, #A9A9A9 60% 80%, #000000 80% 100%); } .pride-flag-lesbian { background: linear-gradient(to bottom, #D62800 0% 20%, #FF9B55 20% 40%, #FFFFFF 40% 60%, #D462A6 60% 80%, #A40062 80% 100%); } .pride-flag-gay { background: linear-gradient(to bottom, #078D70 0% 14.3%, #26CEAA 14.3% 28.6%, #98E8C1 28.6% 42.9%, #FFFFFF 42.9% 57.1%, #7BADE2 57.1% 71.4%, #5049CC 71.4% 85.7%, #3D1A78 85.7% 100%); } .pride-flag-asexual { background: linear-gradient(to bottom, #000000 0% 25%, #A4A4A4 25% 50%, #FFFFFF 50% 75%, #810081 75% 100%); } .pride-flag-transgender { background: linear-gradient(to bottom, #5BCEFA 0% 20%, #F5A9B8 20% 40%, #FFFFFF 40% 60%, #F5A9B8 60% 80%, #5BCEFA 80% 100%); } .pride-flag-nonbinary { background: linear-gradient(to bottom, #FCF434 0% 25%, #FFFFFF 25% 50%, #9C59D1 50% 75%, #2C2C2C 75% 100%); } .pride-flag-genderfluid { background: linear-gradient(to bottom, #FE76A2 0% 20%, #FFFFFF 20% 40%, #BF12D7 40% 60%, #000000 60% 80%, #303CBE 80% 100%); } .pride-flag-agender { background: linear-gradient(to bottom, #000000 0% 14.3%, #B9B9B9 14.3% 28.6%, #FFFFFF 28.6% 42.9%, #B8F483 42.9% 57.1%, #FFFFFF 57.1% 71.4%, #B9B9B9 71.4% 85.7%, #000000 85.7% 100%); } .pride-flag-demigender { background: linear-gradient(to bottom, #7F7F7F 0% 20%, #C4C4C4 20% 40%, #FFF555 40% 60%, #C4C4C4 60% 80%, #7F7F7F 80% 100%); } .pride-flag-bigender { background: linear-gradient(to bottom, #C479A2 0% 20%, #ECA6CB 20% 40%, #D6C7E8 40% 60%, #9AC7E8 60% 80%, #6C83CB 80% 100%); } /* Straight Ally: black/white stripes with a rainbow triangle pointing right, drawn from the flagpole side. */ .pride-flag-ally { background: repeating-linear-gradient(to bottom, #000 0 25%, #fff 25% 50%); } .pride-flag-shape-ally { width: 70%; background: linear-gradient(to bottom, #E70000, #FF8C00, #FFEF00, #00811F, #0044FF, #760089); clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Demisexual: white/gray split with a black triangle and a thin purple stripe at its point. */ .pride-flag-demisexual { background: linear-gradient(to bottom, #FFFFFF 0% 50%, #D3D3D3 50% 100%); } .pride-flag-shape-demisexual { width: 55%; background: #000000; clip-path: polygon(0 0, 100% 50%, 0 100%); } .pride-flag-shape-demisexual::after { content: ""; position: absolute; top: 0; left: 55%; width: 10%; height: 100%; background: #5C2D91; } /* Intersex: yellow field with a purple ring. */ .pride-flag-intersex { background: #FFD800; } .pride-flag-shape-intersex { top: 50%; left: 50%; width: 42%; height: 60%; transform: translate(-50%, -50%); border: 1.5px solid #7902AA; border-radius: 50%; } /* Intersex-inclusive Pride (Progress flag + intersex triangle): rainbow field with a chevron of white/pink/blue/brown/black bands pointing in from the flagpole side. */ .pride-flag-progress { background: linear-gradient(to bottom, #E70000 0% 16.6%, #FF8C00 16.6% 33.3%, #FFEF00 33.3% 50%, #00811F 50% 66.6%, #0044FF 66.6% 83.3%, #760089 83.3% 100%); } .pride-flag-shape-progress { width: 60%; background: linear-gradient(to bottom, #FFFFFF 0% 20%, #F5A9B8 20% 40%, #5BCEFA 40% 60%, #613915 60% 80%, #000000 80% 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Bigger, non-clipped preview shown while picking a flag in the edit-profile form. */ .pride-flag-preview { margin: -4px 0 16px 4px; min-height: 30px; } .pride-flag-preview .pride-flag { transform: scale(2.4); transform-origin: left center; } /* Mods Sidebar Panel */ .mods-list { display: flex; flex-direction: column; gap: 8px; } .staff-row { display: flex; align-items: center; } /* Player Moderation List */ .mod-players-container { display: flex; flex-direction: column; gap: 12px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 6px; padding: 15px; margin-top: 15px; } .mod-player-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; } .mod-player-row:last-child { border-bottom: none; padding-bottom: 0; } .mod-player-controls { display: flex; align-items: center; gap: 10px; } .mod-player-id { color: var(--text-dim); font-size: 12px; } .small-select { background: var(--bg-darker); border: 1px solid var(--border-color); color: var(--text); border-radius: 4px; padding: 4px 8px; font-size: 12px; outline: none; } .small-select:disabled { opacity: 0.6; cursor: not-allowed; } /* Search Player Panel */ .search-results { background: var(--bg-darker); border: 1px solid var(--border-color); border-radius: 4px; margin-top: 8px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; } .search-results.hidden { display: none; } .search-item { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; display: flex; align-items: center; } .search-item:last-child { border-bottom: none; } .search-item:hover { background: rgba(255,255,255,0.05); }