:root { --cf-orange: #f38020; --cf-dark: #313131; --sponsored: #fff9c4; }
body { font-family: 'Inter', sans-serif; background: #f4f4f7; margin: 0; color: #333; }
.hidden { display: none; }

#auth-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--cf-dark); display:flex; align-items:center; justify-content:center; z-index:1000; }
.auth-box { background: white; padding: 40px; border-radius: 12px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
input { padding: 12px; width: 250px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; }
button { background: var(--cf-orange); color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: bold; }

header { background: var(--cf-dark); color: white; padding: 30px; text-align: center; }
.container { max-width: 900px; margin: 20px auto; padding: 20px; }
.selectors { display: flex; gap: 10px; margin-bottom: 30px; }
select { flex: 1; padding: 15px; border-radius: 8px; border: 1px solid #ddd; font-size: 1rem; }

#cheat-sheet { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.card-header { border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
.instruction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { padding: 15px; border-radius: 8px; background: #f8f9fa; border: 1px solid #eee; }
.highlight-sponsored { background: var(--sponsored); border: 1px solid #fbc02d; }
.critical-alert { background: #fee2e2; border-left: 5px solid #ef4444; padding: 15px; margin-bottom: 20px; color: #b91c1c; }
h4 { margin-top: 0; color: var(--cf-dark); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }