:root{--primary: #2563eb;--secondary: #475569;--success: #10b981;--danger: #ef4444;--bg: #ffffff;--text: #0f172a;--text-muted: #64748b;--border: #e2e8f0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Work Sans,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;font-weight:400;font-size:16px}.container{max-width:1200px;margin:0 auto;padding:0 1rem}h1{font-size:2.25rem;font-weight:700;line-height:1.2;color:var(--text)}h2{font-size:1.75rem;font-weight:700;line-height:1.3;color:var(--text)}h3{font-size:1.25rem;font-weight:600;line-height:1.4;color:var(--text)}p{font-size:1rem;line-height:1.6;color:var(--text)}header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}nav{padding:1rem 0}nav .container{display:flex;justify-content:space-between;align-items:center;gap:2rem}nav .logo{font-size:1.5rem;font-weight:700;color:var(--primary);text-decoration:none;letter-spacing:-.5px;flex-shrink:0}.header-search{flex:1;max-width:500px;position:relative}.header-search .search-input-wrapper{position:relative}.header-search .search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:.5rem;box-shadow:0 10px 40px #00000026;max-height:400px;overflow-y:auto;display:none;z-index:9999}.header-search .search-dropdown.show{display:block}.header-search .dropdown-item{padding:.75rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s;display:flex;justify-content:space-between;align-items:center;text-decoration:none}.header-search .dropdown-item-left{display:flex;flex-direction:column;gap:.25rem;flex:1}.header-search .dropdown-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.header-search .dropdown-item:last-child{border-bottom:none}.header-search .dropdown-item:hover,.header-search .dropdown-item.highlighted{background:#f8fafc}.header-search .dropdown-empty{padding:1rem;text-align:center;color:var(--secondary)}.header-search .dropdown-symbol{color:var(--primary);margin-right:.75rem}.header-search .dropdown-name{flex:1;color:var(--text);font-size:.9rem}.header-search .dropdown-price{color:var(--secondary);font-size:.9rem}.header-search .dropdown-change{margin-left:.5rem;font-size:.85rem;font-weight:600}.header-search .search-input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}.header-search .etf-search-input{width:100%;padding:.625rem .75rem .625rem 2.5rem;font-size:.95rem;font-family:Work Sans,sans-serif;border:2px solid var(--border);border-radius:.5rem;background:#fff;color:var(--text);transition:all .2s}.header-search .etf-search-input::placeholder{color:#94a3b8}.header-search .etf-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}nav ul{display:flex;gap:2rem;list-style:none;flex-shrink:0}nav>.container>ul a{color:var(--text);text-decoration:none;transition:color .3s;font-size:1rem;font-weight:600}nav a:hover{color:var(--primary)}nav .divider{color:var(--border);padding:0 .5rem}main{min-height:calc(100vh - 120px)}footer{background:var(--bg);border-top:1px solid var(--border);padding:2rem 0;text-align:center;color:var(--text-muted);font-size:.875rem}.positive{color:var(--success)}.negative{color:var(--danger)}.btn{display:inline-block;padding:.5rem 1.5rem;background:var(--primary);color:#fff;text-decoration:none;border-radius:.375rem;transition:opacity .3s}.btn:hover{opacity:.9}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.75rem;border-bottom:1px solid var(--border)}th{background:#f8fafc;font-weight:600}table.sortable th.sortable-col{cursor:pointer;user-select:none;position:relative;padding-right:1.25rem}table.sortable th.sortable-col:hover{color:var(--primary, #4F46E5)}table.sortable th.sortable-col:after{content:"⇅";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-size:.6rem;opacity:.3}table.sortable th.sort-asc:after{content:"▲";opacity:.7}table.sortable th.sort-desc:after{content:"▼";opacity:.7}
