.calculator-container{display:grid;grid-template-columns:1fr 280px;gap:24px;margin-bottom:32px}.calculator-main{background:linear-gradient(135deg, #1a1a2e 0, #16213e 100%);border-radius:28px;padding:24px;box-shadow:0 20px 40px rgba(0,0,0,0.2)}.display-area{background:#0f0f23;border-radius:20px;padding:20px;margin-bottom:20px;border:1px solid rgba(74,222,128,0.2)}.expression-display{font-family:'Fira Code',monospace;font-size:0.9rem;color:#60a5fa;min-height:28px;word-break:break-all}.result-display{display:flex;align-items:baseline;gap:12px;margin-top:8px}.result-label{font-size:1.5rem;color:#4ade80;font-weight:600}.result-value{font-family:'Fira Code',monospace;font-size:2rem;font-weight:700;color:#4ade80;word-break:break-all}.input-mode{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.mode-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:6px 16px;border-radius:30px;color:white;cursor:pointer;transition:all 0.2s}.mode-btn.active{background:var(--primary-color);border-color:var(--primary-color)}.keypad{display:flex;flex-direction:column;gap:10px}.keypad-row{display:flex;gap:10px;justify-content:center}.key-btn{width:60px;height:60px;border-radius:16px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all 0.15s;border:none;background:rgba(255,255,255,0.1);color:white}.key-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.2)}.key-btn:active{transform:translateY(0)}.key-btn.num{background:rgba(255,255,255,0.08)}.key-btn.operator{background:#f59e0b;color:white}.key-btn.operator:hover{background:#e68a00}.key-btn.hex-btn{background:#3b82f6}.key-btn.hex-btn:hover{background:#2563eb}.result-panel{background:white;border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.result-panel h3{font-size:1rem;margin-bottom:16px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.conversion-results{display:flex;flex-direction:column;gap:14px}.conv-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--gray-50);border-radius:12px}.conv-label{width:80px;font-size:0.7rem;color:var(--gray-500)}.conv-value{flex:1;font-family:'Fira Code',monospace;font-size:0.85rem;font-weight:500;word-break:break-all}.hex-value{color:#f59e0b}.bin-value{color:#10b981}.copy-conv{background:transparent;border:none;color:var(--gray-400);cursor:pointer;padding:4px 8px;border-radius:6px}.copy-conv:hover{background:var(--gray-200);color:var(--primary-color)}.bitwise-section{background:var(--gray-50);border-radius:20px;padding:20px;margin-bottom:24px}.bitwise-section h3{font-size:1rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}.bitwise-controls{display:flex;flex-direction:column;gap:16px}.bitwise-inputs{display:flex;gap:12px;flex-wrap:wrap}.bitwise-input{flex:1;padding:10px 14px;border:1px solid var(--gray-300);border-radius:12px;font-family:monospace;background:white}.bitwise-op-select{padding:10px 14px;border:1px solid var(--gray-300);border-radius:12px;background:white}.bitwise-result{background:#1a1a2e;border-radius:16px;padding:16px;display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}.bitwise-result .result-item{display:flex;justify-content:space-between;color:#e0e0e0;font-family:monospace;font-size:0.8rem}.quick-examples{margin-bottom:24px}.example-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.example-btn{background:var(--gray-100);border:1px solid var(--gray-200);padding:6px 14px;border-radius:30px;cursor:pointer;font-size:0.8rem;transition:all 0.2s}.example-btn:hover{background:var(--primary-color);color:white}.knowledge-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-top:20px}@media (max-width:900px){.calculator-container{grid-template-columns:1fr}.key-btn{width:50px;height:50px;font-size:1rem}.knowledge-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:600px){.key-btn{width:40px;height:40px;font-size:0.85rem}.knowledge-grid{grid-template-columns:1fr}.bitwise-inputs{flex-direction:column}}