:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0f172a;--card-bg: #1e293b;--card-border: #334155;--accent: #38bdf8;--accent-hover: #7dd3fc;--text-primary: #f8fafc;--text-secondary: #94a3b8;--input-bg: #0f172a;--input-border: #475569;--result-bg: #0f172a;--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text-primary)}.app{min-height:100vh;display:flex;flex-direction:column;max-width:440px;margin:0 auto;padding:1rem}.header{text-align:center;padding:1.5rem 0 1rem}.header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.category-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.25rem}.category-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem .25rem;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-family:inherit}.category-btn:hover{border-color:var(--accent);color:var(--text-primary)}.category-btn.active{border-color:var(--accent);background:#38bdf814;color:var(--accent)}.category-icon{font-size:1.25rem;line-height:1}.category-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.converter-card{flex:1;display:flex;flex-direction:column;gap:.5rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:1.25rem}.unit-row{display:flex;flex-direction:column;gap:.5rem}.unit-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.unit-select{width:100%;padding:.65rem .9rem;background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.95rem;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;cursor:pointer;transition:border-color .2s}.unit-select:focus{outline:none;border-color:var(--accent)}.unit-input{width:100%;padding:.85rem 1rem;background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1.35rem;font-weight:600;font-family:inherit;transition:border-color .2s}.unit-input:focus{outline:none;border-color:var(--accent)}.unit-input::placeholder{color:var(--text-secondary);font-weight:400;font-size:1rem}.unit-input::-webkit-outer-spin-button,.unit-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.unit-input[type=number]{-moz-appearance:textfield}.swap-btn{align-self:center;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--card-bg);border:2px solid var(--card-border);color:var(--accent);cursor:pointer;transition:all .2s ease;flex-shrink:0}.swap-btn:hover{background:#38bdf81a;border-color:var(--accent);transform:rotate(180deg)}.swap-btn:active{transform:rotate(180deg) scale(.92)}.result-display{width:100%;padding:.85rem 1rem;background:var(--result-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm);font-size:1.35rem;font-weight:600;color:var(--accent);min-height:3.2rem;display:flex;align-items:center;word-break:break-all}.footer{padding:1.25rem 0;text-align:center}.footer p{font-size:.8rem;color:var(--text-secondary);line-height:1.4}@media(max-width:360px){.category-bar{grid-template-columns:repeat(2,1fr)}.unit-input,.result-display{font-size:1.15rem}}@media(min-width:441px){.app{padding:2rem}}