*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#e4e4e4}.dashboard{max-width:1200px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:1.8rem;color:#fff;margin-bottom:.5rem}.header .subtitle{color:#8892b0;font-size:.9rem}.cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:1.5rem;margin-bottom:1.5rem}.card{background:#ffffff0d;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.card:hover{border-color:#64ffda4d;box-shadow:0 8px 32px #0000004d}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.card-title{font-size:1.1rem;font-weight:600;color:#ccd6f6}.card-badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.badge-aws{background:#f903;color:#f90}.badge-idc{background:#64ffda33;color:#64ffda}.endpoint-info{background:#0003;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-family:Monaco,Menlo,monospace;font-size:.85rem;color:#8892b0}.endpoint-info.route{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.route-arrow{color:#64ffda}.buttons-row{display:flex;gap:.75rem;margin-bottom:1rem}.test-button{flex:1;padding:.75rem 1rem;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.test-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.test-button.secondary{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.test-button.idc{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.test-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.test-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.test-button .spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;padding:1rem;background:#0003;border-radius:8px}.status-item{display:flex;align-items:center;gap:.5rem}.status-label{color:#8892b0;font-size:.85rem}.status-value{font-weight:500;font-size:.9rem}.status-value.ok{color:#64ffda}.status-value.error{color:#ff6b6b}.status-value.pending{color:#8892b0}.status-icon{font-size:1rem}.response-viewer{background:#0000004d;border-radius:8px;overflow:hidden}.response-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#0003;cursor:pointer}.response-header h4{font-size:.85rem;color:#8892b0;font-weight:500}.toggle-icon{color:#8892b0;transition:transform .2s ease}.toggle-icon.open{transform:rotate(180deg)}.response-body{padding:1rem;font-family:Monaco,Menlo,monospace;font-size:.8rem;line-height:1.5;max-height:300px;overflow-y:auto}.response-body pre{white-space:pre-wrap;word-break:break-all}.json-key{color:#82aaff}.json-string{color:#c3e88d}.json-number{color:#f78c6c}.json-boolean{color:#c792ea}.json-null{color:#ff5370}.region-flag{font-size:1.2rem;margin-right:.25rem}.empty-state{text-align:center;padding:2rem;color:#8892b0}.empty-state-icon{font-size:2rem;margin-bottom:.5rem}.section{margin-bottom:2rem}.section-title{font-size:1.2rem;color:#ccd6f6;margin-bottom:1rem}.architecture-diagram{background:#ffffff0d;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.diagram-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.diagram-header h3{font-size:1.1rem;color:#ccd6f6}.diagram-controls{display:flex;gap:.5rem}.diagram-controls button{padding:.5rem 1rem;border:none;border-radius:6px;background:#64ffda1a;color:#64ffda;cursor:pointer;font-size:.85rem;transition:all .2s ease}.diagram-controls button:hover{background:#64ffda33}.diagram-controls button:disabled{opacity:.5;cursor:not-allowed}.diagram-container{background:#0003;border-radius:8px;padding:1rem;margin-bottom:1rem}.diagram-row{display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.node{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;padding:.5rem .75rem;text-align:center;min-width:55px;transition:all .3s ease}.node.active{border-color:gold;box-shadow:0 0 15px #ffd70066;animation:pulse .5s ease-in-out}.node.success{border-color:#64ffda;background:#64ffda1a}.node.error{border-color:#ff6b6b;background:#ff6b6b1a}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.node-icon{font-size:1.2rem;margin-bottom:.15rem}.node-label{font-size:.8rem;color:#ccd6f6;font-weight:500}.node-detail{font-size:.7rem;color:#8892b0;margin-top:.25rem}.arrow{color:#8892b0;font-size:1.2rem}.arrow-small{color:#8892b0;font-size:.8rem}.arrow-split{display:flex;flex-direction:column;color:#8892b0;font-size:1.2rem;line-height:1}.region-column{display:flex;flex-direction:column;gap:.5rem}.region-box{background:#0003;border-radius:8px;padding:.75rem;border-left:3px solid}.region-box.seoul{border-left-color:#667eea}.region-box.tokyo{border-left-color:#f093fb}.region-header{font-size:.75rem;color:#ccd6f6;margin-bottom:.5rem;font-weight:500}.region-nodes{display:flex;align-items:center;gap:.25rem}.region-nodes .node{min-width:45px;padding:.35rem .5rem}.region-nodes .node .node-label{font-size:.7rem}.idc-row{margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(255,255,255,.1)}.idc-connection{display:flex;align-items:center;gap:1rem;justify-content:center}.diagram-result{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1rem;background:#0003;border-radius:8px}.result-item{display:flex;align-items:center;gap:.5rem}.result-label{color:#8892b0;font-size:.85rem}.result-value{font-weight:500;color:#ccd6f6}.result-value.ok{color:#64ffda}.result-value.error{color:#ff6b6b}.routing-test{background:#ffffff0d;border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.routing-header{margin-bottom:1rem}.routing-header h3{font-size:1.1rem;color:#ccd6f6;margin-bottom:.25rem}.routing-description{font-size:.85rem;color:#8892b0}.routing-controls{display:flex;gap:.5rem;margin-bottom:1.5rem}.routing-controls button{padding:.5rem 1rem;border:none;border-radius:6px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;font-size:.85rem;transition:all .2s ease}.routing-controls button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.routing-controls button:disabled{opacity:.6;cursor:not-allowed;transform:none}.routing-results{margin-bottom:1.5rem}.routing-bar-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.routing-bar-item{background:#0003;border-radius:8px;padding:1rem}.bar-label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem;color:#ccd6f6}.bar-track{height:24px;background:#ffffff0d;border-radius:4px;overflow:hidden;margin-bottom:.25rem}.bar-fill{height:100%;border-radius:4px;transition:width .3s ease}.bar-fill.seoul{background:linear-gradient(135deg,#667eea,#764ba2)}.bar-fill.tokyo{background:linear-gradient(135deg,#f093fb,#f5576c)}.bar-fill.unknown{background:#ffffff4d}.bar-expected{font-size:.75rem;color:#8892b0}.routing-summary{display:flex;align-items:center;gap:1rem;font-size:.85rem;color:#8892b0}.loading-indicator{color:gold}.instance-distribution{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.instance-distribution h4{font-size:.85rem;color:#8892b0;margin-bottom:.75rem}.instance-list{display:flex;flex-wrap:wrap;gap:.5rem}.instance-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:#0003;border-radius:6px;font-size:.8rem;border-left:3px solid}.instance-item.seoul{border-left-color:#667eea}.instance-item.tokyo{border-left-color:#f093fb}.instance-region{font-size:1rem}.instance-id{font-family:Monaco,Menlo,monospace;color:#64ffda}.instance-count{color:#8892b0}.instance-info{font-family:Monaco,Menlo,monospace;font-size:.75rem;color:#64ffda;cursor:help}.routing-history{background:#0003;border-radius:8px;padding:1rem}.routing-history h4{font-size:.9rem;color:#ccd6f6;margin-bottom:.75rem}.history-table{font-size:.8rem}.history-header{display:grid;grid-template-columns:40px 100px 120px 80px 100px;gap:.5rem;padding:.5rem;background:#0003;border-radius:4px;color:#8892b0;font-weight:500;margin-bottom:.5rem}.history-body{max-height:200px;overflow-y:auto}.history-row{display:grid;grid-template-columns:40px 100px 120px 80px 100px;gap:.5rem;padding:.5rem;border-radius:4px;color:#ccd6f6}.history-row.seoul{background:#667eea1a}.history-row.tokyo{background:#f093fb1a}.history-row.error{background:#ff6b6b1a}@media(max-width:768px){.cards-container{grid-template-columns:1fr}.dashboard{padding:1rem}.buttons-row{flex-direction:column}.diagram-header{flex-direction:column;align-items:flex-start}.diagram-controls{flex-wrap:wrap}.diagram-row{flex-direction:column}.region-nodes{flex-wrap:wrap;justify-content:center}.routing-controls{flex-wrap:wrap}.history-header,.history-row{grid-template-columns:30px 80px 90px 60px 80px;font-size:.7rem}}.test-logger{background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.logger-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:#0003;cursor:pointer}.logger-header h3{font-size:1.1rem;color:#ccd6f6;display:flex;align-items:center;gap:.5rem}.log-count{font-size:.85rem;color:#8892b0;font-weight:400}.logger-content{padding:1.5rem}.logger-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.filter-buttons button{padding:.4rem .8rem;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:transparent;color:#8892b0;cursor:pointer;font-size:.8rem;transition:all .2s ease}.filter-buttons button:hover{border-color:#64ffda4d;color:#ccd6f6}.filter-buttons button.active{background:#64ffda1a;border-color:#64ffda;color:#64ffda}.clear-btn{padding:.4rem .8rem;border:1px solid rgba(255,107,107,.3);border-radius:6px;background:transparent;color:#ff6b6b;cursor:pointer;font-size:.8rem;transition:all .2s ease}.clear-btn:hover{background:#ff6b6b1a}.log-table{background:#0003;border-radius:8px;overflow:hidden}.log-header{display:grid;grid-template-columns:80px 80px 120px 60px 70px 1fr;gap:.5rem;padding:.75rem 1rem;background:#0000004d;color:#8892b0;font-size:.8rem;font-weight:500}.log-body{max-height:300px;overflow-y:auto}.log-row{display:grid;grid-template-columns:80px 80px 120px 60px 70px 1fr;gap:.5rem;padding:.6rem 1rem;color:#ccd6f6;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s ease}.log-row:hover{background:#ffffff08}.log-row.ok{border-left:2px solid #64ffda}.log-row.error{border-left:2px solid #ff6b6b;background:#ff6b6b0d}.log-type{color:#82aaff;font-weight:500}.log-details{color:#8892b0;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-empty{text-align:center;padding:2rem;color:#8892b0}@media(max-width:768px){.log-header,.log-row{grid-template-columns:60px 60px 80px 50px 50px 1fr;font-size:.7rem;padding:.5rem}.logger-controls{flex-direction:column;align-items:flex-start}}.flow-routing-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:1024px){.flow-routing-row{grid-template-columns:1fr}}.architecture-diagram.compact{padding:1rem}.architecture-diagram.compact .diagram-header{margin-bottom:1rem}.architecture-diagram.compact .diagram-header h3{font-size:1rem}.architecture-diagram.compact .diagram-container{padding:1rem}.architecture-diagram.compact .node{padding:.5rem .75rem;min-width:55px}.architecture-diagram.compact .node-icon{font-size:1.2rem}.architecture-diagram.compact .node-label{font-size:.7rem}.architecture-diagram.compact .region-box{padding:.75rem}.architecture-diagram.compact .region-header{font-size:.75rem;margin-bottom:.5rem}.architecture-diagram.compact .region-nodes .node{min-width:45px;padding:.4rem .5rem}.architecture-diagram.compact .arrow{font-size:1.2rem}.architecture-diagram.compact .arrow-small{font-size:.8rem}.architecture-diagram.compact .arrow-split{font-size:1rem}