*{box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.container{max-width:100%;margin:0 auto}h1{color:#fff;text-align:center;text-shadow:2px 2px 4px #0000004d;margin-bottom:30px;font-size:2.5em}.controls{background:#fff;border-radius:10px;margin-bottom:20px;padding:20px;box-shadow:0 4px 6px #0000001a}.search-box{border:2px solid #667eea;border-radius:8px;outline:none;width:100%;padding:12px 20px;font-size:16px;transition:border-color .3s}.search-box:focus{border-color:#764ba2}.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;display:grid}.stat-card{text-align:center;background:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 6px #0000001a}.stat-value{color:#667eea;font-size:2em;font-weight:700}.stat-label{color:#666;margin-top:5px}.stock-grid{gap:20px;display:grid}.stock-grid-1{grid-template-columns:1fr}.stock-grid-2{grid-template-columns:repeat(2,1fr)}.stock-grid-3{grid-template-columns:repeat(3,1fr)}.stock-card{background:#fff;border-radius:12px;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:0 4px 6px #0000001a}.stock-card:hover{transform:translateY(-5px);box-shadow:0 8px 12px #0003}.stock-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.stock-symbol{font-size:1.5em;font-weight:700}.stock-info table td{color:#000}.stock-price{background:#fff3;border-radius:5px;padding:5px 10px;font-size:1.2em}.chart-container{cursor:pointer;background:#f5f5f5;width:100%;height:400px;transition:transform .2s;overflow:hidden}.chart-container:hover{transform:scale(1.02)}.chart-container img{object-fit:contain;width:100%;height:100%}.stock-info{padding:15px 20px}.info-row{border-bottom:1px solid #eee;justify-content:space-between;padding:8px 0;display:flex}.info-row:last-child{border-bottom:none}.info-label{color:#000;font-weight:500}.info-value{color:#000;font-weight:600}.options-section{background:#f8f9fa;margin-top:10px;padding:15px}.options-title{color:#667eea;margin-bottom:10px;font-size:1.1em;font-weight:700}.options-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.option-item{background:#fff;border-left:3px solid #667eea;border-radius:6px;padding:10px}.option-item.put{border-left-color:#f97316}.option-strike{color:#666;font-size:.85em}.option-price{color:#000;font-size:1.1em;font-weight:700}.no-data,.loading{text-align:center;color:#fff;padding:40px;font-size:1.2em}.modal{z-index:1000;background-color:#000000e6;width:100%;height:100%;display:block;position:fixed;top:0;left:0;overflow:auto}.modal-content{width:90%;max-width:1200px;margin:2% auto;position:relative}.modal-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;padding:20px;display:flex}.modal-title{font-size:1.5em;font-weight:700}.close-btn{color:#fff;cursor:pointer;font-size:35px;font-weight:700;transition:color .3s}.close-btn:hover{color:#ddd}.canvas-container{background:#fff;border-radius:0 0 10px 10px;padding:20px;position:relative}#drawingCanvas{cursor:crosshair;max-width:100%;margin:0 auto;display:block}.drawing-tools{background:#fff;border-bottom:2px solid #667eea;flex-wrap:wrap;align-items:center;gap:10px;padding:15px;display:flex}.tool-btn{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:5px;padding:10px 20px;font-weight:700;transition:background .3s}.tool-btn:hover{background:#5568d3}.tool-btn.active{background:#764ba2}.color-picker{cursor:pointer;border:2px solid #667eea;border-radius:5px;padding:5px}.line-width{border:2px solid #667eea;border-radius:5px;padding:8px}.market-depth-container{margin-top:4px;font-size:.75em}.depth-section{margin-bottom:6px}.depth-header{margin-bottom:2px;font-size:.9em;font-weight:700}.depth-bid{color:#2e7d32}.depth-ask{color:#c62828}.depth-order{border-bottom:1px solid #f0f0f0;justify-content:space-between;padding:2px 0;display:flex}.depth-order:last-child{border-bottom:none}.depth-price{font-weight:600}.depth-quantity{color:#666;font-size:.95em}@media (max-width:768px){.stock-grid-1,.stock-grid-2,.stock-grid-3{grid-template-columns:1fr!important}h1{font-size:1.8em}.modal-content{width:95%;margin:5% auto}}@media (max-width:1400px){.stock-grid-3{grid-template-columns:repeat(2,1fr)}}
