:root{--bg-app:#060913;--bg-card:#0d1426b3;--bg-card-active:#16213ed9;--bg-input:#02061166;--bg-key:#16213ea6;--bg-key-hover:#1e2d55d9;--bg-key-active:#8b5cf640;--accent-cyan:#06b6d4;--accent-violet:#8b5cf6;--accent-emerald:#10b981;--accent-glow:linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);--accent-glow-orange:linear-gradient(135deg, #ff8c00 0%, #ff3c00 100%);--border-translucent:#ffffff0f;--border-glow:#00f2fe4d;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-cyan:#22d3ee;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Outfit", "Inter", sans-serif;--shadow-premium:0 20px 50px #00000080;--shadow-neon:0 0 25px #00f2fe26;--shadow-active-row:0 0 20px #8b5cf61a;--glass-blur:blur(16px);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-app);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-body);overflow:hidden}input,textarea{-webkit-user-select:text;user-select:text}#app{background-image:radial-gradient(circle at 10% 20%,#8b5cf614 0%,#0000 40%),radial-gradient(circle at 90% 80%,#06b6d414 0%,#0000 40%);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.converter-card{background-color:var(--bg-card);border:1px solid var(--border-translucent);width:100%;height:100%;box-shadow:var(--shadow-premium);-webkit-backdrop-filter:var(--glass-blur);flex-direction:column;display:flex;position:relative;overflow:hidden}@media (width>=480px){.converter-card{border:1px solid #ffffff14;border-radius:32px;width:440px;height:850px}}.app-header{border-bottom:1px solid var(--border-translucent);justify-content:space-between;align-items:center;padding:clamp(12px,2dvh,24px) 20px clamp(8px,1.5dvh,16px);display:flex}.logo-area{align-items:center;gap:10px;display:flex;position:relative}.logo-glow{background:var(--accent-glow);filter:blur(12px);opacity:.6;width:24px;height:24px;position:absolute;left:0}.logo-icon{width:28px;height:28px;color:var(--text-cyan);filter:drop-shadow(0 2px 8px #22d3ee66);z-index:1}.logo-area h1{font-family:var(--font-display);letter-spacing:-.5px;background:var(--accent-glow);-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:clamp(18px,2.8dvh,24px);font-weight:600}.sync-status{align-items:center;gap:8px;display:flex}.update-time{color:var(--text-secondary);border:1px solid var(--border-translucent);font-size:11px;font-family:var(--font-display);transition:var(--transition-fast);background-color:#ffffff0a;border-radius:20px;padding:4px 10px}.update-time.highlight-success{color:var(--accent-emerald);background-color:#10b9811a;border-color:#10b9814d}.refresh-button{background:var(--bg-key);border:1px solid var(--border-translucent);width:28px;height:28px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.refresh-button:hover{background:var(--bg-key-hover);border-color:var(--text-cyan);color:var(--text-cyan);transform:rotate(45deg)}.refresh-button:active{transform:rotate(45deg)scale(.9)}.refresh-icon{width:15px;height:15px}.refresh-button.loading .refresh-icon{color:var(--text-cyan);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.currency-rows-container{scrollbar-width:none;flex:auto;padding:clamp(8px,1.5dvh,16px) 16px clamp(4px,1dvh,8px)}.currency-rows-container::-webkit-scrollbar{display:none}.currency-rows{flex-direction:column;gap:clamp(6px,1dvh,12px);display:flex}.currency-row{border:1px solid var(--border-translucent);height:clamp(52px,7.8dvh,74px);transition:all var(--transition-normal);background-color:#ffffff05;border-radius:clamp(12px,2dvh,20px);grid-template-columns:105px 1fr;align-items:center;padding:8px 12px 8px 14px;display:grid;position:relative;overflow:hidden}.currency-row:before{content:"";width:3px;height:100%;transition:var(--transition-normal);background:0 0;position:absolute;top:0;left:0}.currency-row:hover{background-color:#ffffff0a;border-color:#ffffff1a;transform:translateY(-1px)}.currency-row.active{background-color:var(--bg-card-active);border-color:var(--border-glow);box-shadow:var(--shadow-neon), var(--shadow-active-row)}.currency-row.active:before{background:var(--accent-glow)}.currency-selector{cursor:pointer;text-align:left;border:none;border-right:1px solid var(--border-translucent);width:100%;height:100%;transition:var(--transition-fast);background:0 0;justify-content:space-between;align-items:center;padding-right:8px;display:flex}.currency-selector *{pointer-events:none}.currency-info{flex-direction:column;gap:2px;display:flex}.selector-content-left{align-items:center;gap:10px;display:flex}.currency-code{font-family:var(--font-display);color:var(--text-primary);letter-spacing:.5px;font-size:19px;font-weight:700}.currency-name{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;max-width:80px;font-size:10px;overflow:hidden}.flag-wrapper{align-items:center;gap:5px;display:flex}.currency-flag{object-fit:cover;border-radius:3px;width:24px;height:18px;box-shadow:0 1px 3px #0000004d}.chevron-icon{width:14px;height:14px;color:var(--text-muted);transition:var(--transition-fast)}.currency-selector:hover .chevron-icon{color:var(--text-cyan);transform:translateY(1px)}.input-wrapper{justify-content:flex-end;align-items:center;width:100%;height:100%;padding-left:10px;display:flex;position:relative}.currency-input{text-align:right;width:100%;height:100%;font-family:var(--font-display);color:var(--text-primary);caret-color:var(--text-cyan);background:0 0;border:none;outline:none;padding-right:28px;font-size:22px;font-weight:600}.currency-input::placeholder{color:var(--text-muted);opacity:.5}.clear-input-btn{color:var(--text-muted);cursor:pointer;opacity:0;pointer-events:none;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;right:2px;transform:scale(.8)}.clear-input-btn svg{width:18px;height:18px}.clear-input-btn:hover{color:var(--text-primary)}.currency-row.active .clear-input-btn.visible,.currency-row:hover .clear-input-btn.visible{opacity:.6;pointer-events:auto;transform:scale(1)}.currency-row.active .clear-input-btn.visible:hover{opacity:1}.keypad-container{border-top:1px solid var(--border-translucent);background-color:#02061173;flex-direction:column;flex:1.1 auto;min-height:0;padding:clamp(8px,1.5dvh,16px) 20px clamp(12px,2.5dvh,24px);display:flex}@supports (padding-bottom:env(safe-area-inset-bottom)){.keypad-container{padding-bottom:calc(clamp(8px, 1.5dvh, 16px) + env(safe-area-inset-bottom))}}.keypad-grid{flex:1;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.2dvh,10px);width:100%;max-width:360px;margin:0 auto;display:grid}.key-btn{background-color:var(--bg-key);height:100%;font-family:var(--font-display);color:var(--text-primary);cursor:pointer;border:1px solid #ffffff17;border-radius:clamp(10px,1.8dvh,16px);justify-content:center;align-items:center;font-size:clamp(16px,2.5dvh,22px);font-weight:500;transition:all 50ms ease-out;display:flex}@media (hover:hover){.key-btn:hover{background-color:var(--bg-key-hover);border-color:#ffffff1f}}.key-btn:active{background-color:var(--bg-key-active);border-color:#fff3;transform:scale(.94)}.dot-key{font-size:22px;font-weight:700}.backspace-key{color:var(--text-secondary)}.backspace-key:hover{color:#ef4444;border-color:#ef444433}.backspace-key:active{color:#ef4444;background-color:#ef44441a}dialog#currencyModal{background:0 0;border:none;outline:none;width:90%;max-width:390px;height:fit-content;max-height:80vh;margin:auto;padding:0;position:fixed;inset:0;overflow:visible}dialog#currencyModal::backdrop{-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity var(--transition-normal);background-color:#040710d1}dialog#currencyModal[open]::backdrop{opacity:1}.modal-content{height:100%;max-height:80vh;color:var(--text-primary);opacity:0;transition:transform var(--transition-normal), opacity var(--transition-normal);background-color:#0c1222;border:1px solid #ffffff14;border-radius:28px;flex-direction:column;display:flex;overflow:hidden;transform:scale(.95);box-shadow:0 25px 60px #000c,0 0 40px #00f2fe0d}dialog#currencyModal[open] .modal-content{opacity:1;transform:scale(1)}.modal-header{justify-content:space-between;align-items:center;padding:20px 20px 14px;display:flex}.modal-header h2{font-family:var(--font-display);letter-spacing:-.3px;font-size:20px;font-weight:600}.close-modal-btn{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);background-color:#ffffff08;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.close-modal-btn:hover{color:var(--text-primary);background-color:#ffffff14}.search-wrapper{align-items:center;margin:0 20px 16px;display:flex;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;transition:var(--transition-fast);position:absolute;left:14px}#currencySearch{background-color:var(--bg-input);border:1px solid var(--border-translucent);width:100%;height:44px;font-family:var(--font-body);color:var(--text-primary);transition:all var(--transition-fast);border-radius:14px;outline:none;padding:0 40px;font-size:14px}#currencySearch:focus{border-color:var(--text-cyan);background-color:#02061199;box-shadow:0 0 10px #06b6d426}#currencySearch:focus+.search-icon{color:var(--text-cyan)}.clear-search-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:none;position:absolute;right:14px}.clear-search-btn:hover{color:var(--text-primary)}.currency-list{scrollbar-width:thin;scrollbar-color:#ffffff14 transparent;flex-direction:column;flex:1;gap:4px;padding:0 12px 20px;display:flex;overflow-y:auto}.currency-list::-webkit-scrollbar{width:6px}.currency-list::-webkit-scrollbar-track{background:0 0}.currency-list::-webkit-scrollbar-thumb{background-color:#ffffff14;border-radius:10px}.currency-list::-webkit-scrollbar-thumb:hover{background-color:#ffffff26}.currency-item{cursor:pointer;text-align:left;width:100%;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;border-radius:14px;align-items:center;gap:14px;padding:10px 12px;display:flex}.currency-item:hover{background-color:#ffffff0a}.currency-item.active-choice{background-color:#06b6d414;border-color:#06b6d426}.currency-item.active-choice .item-code{color:var(--text-cyan)}.item-flag{object-fit:cover;border-radius:3px;width:26px;height:19px;box-shadow:0 1px 3px #0003}.item-details{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.item-code{font-family:var(--font-display);color:var(--text-primary);font-size:15px;font-weight:700}.item-name{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.no-results{color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 20px;display:flex}.no-results svg{width:32px;height:32px;color:var(--text-muted);opacity:.5}.no-results span{font-size:13px}