.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;padding:var(--space-xs) 0}.header-content{max-width:1400px;margin:0 auto;padding:var(--space-xs) var(--space-md);display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:var(--space-xs)}.logo-img{width:24px;height:24px;object-fit:contain}.logo-icon{font-size:20px}.logo-text{font-size:16px;font-weight:600;color:var(--color-text)}.nav{display:flex;gap:2px}.nav-btn{background:transparent;border:none;color:var(--color-text-secondary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:13px;font-weight:500;transition:all var(--transition-fast)}.nav-btn:hover{background:var(--color-surface-elevated);color:var(--color-text)}.nav-btn.active{background:var(--color-accent);color:#fff}.theme-toggle{background:transparent;border:1px solid var(--color-border);color:var(--color-text);padding:var(--space-xs);border-radius:var(--radius-sm);font-size:14px;cursor:pointer;transition:all var(--transition-fast);margin-left:var(--space-xs)}.theme-toggle:hover{background:var(--color-surface-elevated);transform:scale(1.1)}.main{flex:1;max-width:1400px;margin:0 auto;padding:var(--space-lg);width:100%;display:flex;flex-direction:column;overflow:hidden}.dashboard{animation:fadeIn .3s ease;display:flex;flex-direction:column;height:100%}.page-header{margin-bottom:var(--space-sm)}.page-header h1{font-size:18px;font-weight:600;margin-bottom:var(--space-xs)}.stocks-table{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;flex:1;display:flex;flex-direction:column}.table-body{flex:1;overflow-y:auto}.table-header{display:grid;grid-template-columns:100px 1fr 120px 100px 140px 50px;padding:var(--space-md) var(--space-lg);background:var(--color-surface-elevated);border-bottom:1px solid var(--color-border);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary)}.table-body{max-height:70vh;overflow-y:auto}.table-row{display:grid;grid-template-columns:100px 1fr 120px 100px 140px 50px;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border-subtle);cursor:pointer;transition:background var(--transition-fast);align-items:center}.table-row:hover{background:var(--color-surface-elevated)}.table-row:last-child{border-bottom:none}.col-symbol .symbol{font-weight:600;color:var(--color-text)}.col-name{color:var(--color-text-secondary);font-size:14px}.sector-tag{display:inline-block;padding:2px 8px;background:var(--color-surface-elevated);border-radius:var(--radius-sm);font-size:12px;color:var(--color-text-secondary)}.col-price{font-weight:500;font-size:15px}.col-change{font-size:14px}.watchlist-btn{background:transparent;border:none;color:var(--color-text-muted);font-size:18px;padding:var(--space-xs);transition:color var(--transition-fast)}.watchlist-btn:hover,.watchlist-btn.active{color:var(--color-warning)}.watchlist-view{animation:fadeIn .3s ease}.empty-state{text-align:center;padding:var(--space-2xl);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.empty-state p{margin-bottom:var(--space-lg);color:var(--color-text-secondary)}.stocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-lg)}.stock-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);cursor:pointer;transition:all var(--transition-fast)}.stock-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.card-header .symbol{font-weight:600;font-size:18px}.card-name{color:var(--color-text-secondary);font-size:14px;margin-bottom:var(--space-md)}.card-price{font-size:24px;font-weight:600;margin-bottom:var(--space-xs)}.card-change{font-size:14px}.detail-view{animation:fadeIn .3s ease;display:flex;flex-direction:column;flex:1;overflow:hidden}.detail-chart{flex:1;overflow:hidden;display:flex;flex-direction:column}.back-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:14px;padding:var(--space-sm) 0;margin-bottom:var(--space-lg);transition:color var(--transition-fast)}.back-btn:hover{color:var(--color-text)}.detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-xl)}.detail-header h1{font-size:32px;margin-bottom:var(--space-xs)}.detail-price{text-align:right}.detail-price .price{display:block;font-size:36px;font-weight:600;margin-bottom:var(--space-xs)}.detail-price .change{font-size:18px}.detail-chart{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:400px;margin-bottom:var(--space-xl);overflow:hidden}.chart-table-container{flex:1;overflow-y:auto;padding:var(--space-lg)}.chart-table-container h3{margin-bottom:var(--space-md);font-size:16px}.chart-table-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.chart-table-header h3{margin-bottom:0}.chart-table{width:100%;border-collapse:collapse}.chart-table th,.chart-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--color-border-subtle)}.chart-table th{font-size:12px;text-transform:uppercase;color:var(--color-text-secondary);font-weight:600}.chart-table td{font-size:14px}.chart-table tbody tr:hover{background:var(--color-surface-elevated)}.compare-view{animation:fadeIn .3s ease;display:flex;flex-direction:column;flex:1;overflow:hidden}.compare-header{flex-shrink:0;margin-bottom:var(--space-md)}.compare-table-container{flex:1;overflow:auto;overflow-x:auto;min-height:250px;max-height:70vh;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch;scrollbar-width:thin}.compare-table{border-collapse:collapse;font-size:12px;min-width:100%;table-layout:auto}.compare-table th,.compare-table td{padding:6px 8px;text-align:center;border-bottom:1px solid var(--color-border-subtle);white-space:nowrap;min-width:60px;max-width:120px}.compare-table th{background:var(--color-surface-elevated);font-size:10px;text-transform:uppercase;color:var(--color-text-secondary);font-weight:600;position:sticky;top:0;z-index:10}.compare-table th.stock-code{font-size:12px;font-weight:700;color:var(--color-text)}.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;background:var(--color-surface)!important;z-index:5;text-align:left;width:130px;min-width:130px;max-width:130px;white-space:nowrap}.compare-table th:first-child{background:var(--color-surface-elevated)!important;z-index:15}.compare-table th:not(:first-child),.compare-table td:not(:first-child){width:calc((100% - 130px) / var(--stock-count, 5));min-width:55px;max-width:100px}.compare-table td.muted{color:var(--color-text-muted)}.compare-table .row-group{border-top:2px solid var(--color-border)}.compare-table .row-close td{border-bottom:1px solid var(--color-border)}.compare-table .row-label{display:inline-block;font-size:9px;text-transform:uppercase;background:var(--color-surface-elevated);padding:2px 6px;border-radius:3px;margin-right:6px;color:var(--color-text-secondary);font-weight:600}.compare-table .row-open{background:#16a34a08}.compare-table .row-open td:first-child{border-left:3px solid var(--color-gain)}.compare-table .row-midday{background:#d9770608}.compare-table .row-midday td:first-child{border-left:3px solid var(--color-warning)}.compare-table .row-close{background:#2563eb08}.compare-table .row-close td:first-child{border-left:3px solid var(--color-accent)}.compare-table .row-alt{background:var(--color-surface-subtle)}.loading{text-align:center;padding:var(--space-2xl);color:var(--color-text-secondary)}.chart-placeholder{text-align:center}.detail-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-lg)}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.stat-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.stat-value{font-size:18px;font-weight:500}.btn-primary{background:var(--color-accent);color:#fff;border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:500;transition:background var(--transition-fast)}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:500;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--color-border)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);width:100%;max-width:400px;animation:slideUp .3s ease}.modal h2{margin-bottom:var(--space-lg);font-size:20px}.form-group{margin-bottom:var(--space-md)}.form-group label{display:block;font-size:13px;color:var(--color-text-secondary);margin-bottom:var(--space-xs)}.form-group input,.form-group select{width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:14px}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-accent)}.modal-actions{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-top:var(--space-lg)}.remove-btn{background:transparent;border:none;color:var(--color-text-muted);font-size:14px;padding:var(--space-xs) var(--space-sm);margin-left:var(--space-xs);opacity:0;transition:all var(--transition-fast)}.table-row:hover .remove-btn{opacity:1}.remove-btn:hover{color:var(--color-loss)}.header-row{display:flex;justify-content:space-between;align-items:flex-start}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-md);border-top:1px solid var(--color-border);background:var(--color-surface-elevated)}.page-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);font-size:13px;transition:all var(--transition-fast)}.page-btn:hover:not(:disabled){background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{font-size:13px;color:var(--color-text-secondary)}.footer{text-align:center;padding:var(--space-sm);border-top:1px solid var(--color-border);margin-top:auto}.footer p{font-size:11px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.table-header,.table-row{grid-template-columns:80px 1fr 80px 50px}.col-sector,.col-change{display:none}.header-content,.detail-header{flex-direction:column;gap:var(--space-md)}.detail-price{text-align:left}.compare-table-container{flex:1;min-height:180px;max-height:70vh;margin:0 calc(var(--space-sm) * -1);padding:0 var(--space-sm);border-radius:0;border-left:none;border-right:none;overflow-x:auto}.compare-table{font-size:12px}.compare-table th,.compare-table td{padding:4px 6px;min-width:55px}.compare-table th.stock-code{min-width:50px;font-size:12px}.compare-table th:first-child,.compare-table td:first-child{min-width:75px}.compare-table .row-label{display:none}.chart-table-container{flex:1;min-height:180px;max-height:40vh}.stocks-table{flex:1;min-height:0}.pagination{padding:var(--space-sm);gap:var(--space-sm)}.page-btn{padding:var(--space-xs) var(--space-sm);font-size:12px}}@media(min-width:744px)and (max-width:1024px){.app{padding:var(--space-sm)}.page-header{margin-bottom:var(--space-sm)}.page-header h1{font-size:20px}.stocks-table{font-size:13px}.table-header,.table-row{grid-template-columns:60px 1fr 80px 90px 80px 30px;padding:var(--space-sm)}.compare-table-container{flex:1;min-height:200px;max-height:55vh;margin:0;padding:0;border-radius:0;border:none}.compare-table{font-size:11px;min-width:600px}.compare-table th,.compare-table td{padding:3px 4px;width:55px;min-width:55px;max-width:55px}.compare-table th.stock-code{min-width:50px;max-width:50px;width:50px;font-size:11px}.compare-table th:first-child,.compare-table td:first-child{width:75px;min-width:75px;max-width:75px}.date-cell{min-width:75px;font-size:10px}.row-label{display:none}.chart-table-container{margin:0 calc(var(--space-md) * -1);padding:var(--space-md);border-radius:0;border-left:none;border-right:none}.chart-table{font-size:13px}.chart-table th,.chart-table td{padding:var(--space-xs) var(--space-sm)}.modal{margin:var(--space-md);max-width:calc(100% - var(--space-lg))}.form-group{margin-bottom:var(--space-md)}.form-group input,.form-group select{padding:var(--space-sm);font-size:14px}}@supports (padding: max(0px)){.app{padding-left:max(var(--space-sm),env(safe-area-inset-left));padding-right:max(var(--space-sm),env(safe-area-inset-right));padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom))}.header{padding-top:max(var(--space-md),env(safe-area-inset-top))}.modal{padding-left:max(var(--space-lg),env(safe-area-inset-left));padding-right:max(var(--space-lg),env(safe-area-inset-right));padding-bottom:max(var(--space-lg),env(safe-area-inset-bottom))}}@media screen and (device-width:744px)and (device-height:1133px)and (orientation:portrait){.app{padding:var(--space-sm);padding-top:max(var(--space-sm),env(safe-area-inset-top));padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom))}.header-content{padding:var(--space-sm) var(--space-md)}.logo-text{font-size:18px}.nav{gap:2px}.nav-btn{padding:var(--space-xs) var(--space-sm);font-size:13px}.main{padding:var(--space-sm)}.page-header{margin-bottom:var(--space-md)}.page-header h1{font-size:22px}.stocks-table{border-radius:var(--radius-md);font-size:13px}.table-header,.table-row{grid-template-columns:55px 1fr 70px 85px 30px;padding:var(--space-sm);min-height:48px}.table-header{font-size:10px}.col-symbol{font-size:12px}.col-name{font-size:11px}.col-sector{display:none}.col-price{font-size:13px}.col-change{font-size:12px}.watchlist-btn{padding:var(--space-sm);font-size:20px}.stocks-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.stock-card{padding:var(--space-md);min-height:100px}.card-header .symbol{font-size:16px}.card-name{font-size:12px}.card-price{font-size:20px}.detail-header h1{font-size:24px}.detail-price .price{font-size:28px}.detail-chart{min-height:300px;border-radius:var(--radius-md)}.detail-stats{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.stat-card{padding:var(--space-md)}.stat-value{font-size:16px}.compare-table-container{max-height:50vh;border-radius:var(--radius-md);overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.compare-table{font-size:11px;min-width:max-content;table-layout:auto}.compare-table th,.compare-table td{min-width:55px;max-width:100px;padding:4px 6px}.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;width:120px;min-width:120px;max-width:120px;z-index:5}.compare-table th:first-child{z-index:15}.btn-primary,.btn-secondary{min-height:44px;padding:var(--space-sm) var(--space-md)}.pagination{padding:var(--space-sm)}.page-btn{min-width:44px;min-height:44px}.modal{margin:var(--space-sm);max-width:calc(100% - var(--space-md));padding:var(--space-md)}.form-group input,.form-group select{min-height:44px;font-size:16px}.modal-actions{flex-direction:column}.modal-actions button{width:100%;min-height:44px}}@media screen and (device-width:1133px)and (device-height:744px)and (orientation:landscape){.app{padding:var(--space-sm)}.header-content{padding:var(--space-sm) var(--space-md)}.main{padding:var(--space-md)}.table-header,.table-row{grid-template-columns:60px 1fr 90px 90px 90px 40px;min-height:44px}.col-sector{display:block;font-size:11px}.stocks-grid{grid-template-columns:repeat(3,1fr)}.compare-table-container{max-height:60vh;overflow-x:auto;-webkit-overflow-scrolling:touch}.compare-table{min-width:max-content;table-layout:auto}.detail-stats{grid-template-columns:repeat(4,1fr)}}button,.nav-btn,.page-btn,.watchlist-btn,.table-row,.stock-card,.back-btn,.remove-btn{-webkit-tap-highlight-color:transparent}button,.table-row,.stock-card{-webkit-user-select:none;user-select:none}.form-group input,.form-group select{font-size:16px}.app{min-height:100dvh;height:100dvh}:root{--color-bg: #f5f5f7;--color-surface: #ffffff;--color-surface-elevated: #fafafa;--color-surface-subtle: #eeeeee;--color-border: #e0e0e5;--color-border-subtle: #f0f0f2;--color-accent: #2563eb;--color-accent-hover: #3b82f6;--color-gain: #16a34a;--color-loss: #dc2626;--color-warning: #d97706;--color-text: #1a1a1f;--color-text-secondary: #6b6b7b;--color-text-muted: #9b9ba5;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-normal: .25s ease}[data-theme=dark]{--color-bg: #0d0d14;--color-surface: #14141f;--color-surface-elevated: #1a1a28;--color-surface-subtle: #1f1f2e;--color-border: #2a2a3d;--color-border-subtle: #1f1f2e;--color-accent: #2563eb;--color-accent-hover: #3b82f6;--color-gain: #00c853;--color-loss: #ff1744;--color-warning: #ffab00;--color-text: #f0f0f5;--color-text-secondary: #8b8b9e;--color-text-muted: #5c5c6e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.mono{font-family:var(--font-mono)}.text-gain{color:var(--color-gain)}.text-loss{color:var(--color-loss)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}