@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--bg:#090d16;--panel:#111827;--panel2:#0d1421;--line:#222d40;--text:#edf2fa;--muted:#8794a8;--gold:#d8b56d;--blue:#5d9df4;--green:#36c99a;--red:#f16d79}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans','Noto Sans KR',sans-serif;font-size:14px}.app-shell{min-height:100vh;display:flex}.sidebar{width:236px;flex-shrink:0;background:#0b111d;border-right:1px solid #1d293b;padding:26px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 38px}.brand-mark{width:42px;height:42px;border:1px solid #9b7d45;border-radius:12px;display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:17px;letter-spacing:-1px;background:linear-gradient(145deg,#242031,#101725)}.brand-mark span{font-size:10px;margin-left:2px}.brand strong{display:block;font-size:13px;letter-spacing:1.2px}.brand small{display:block;color:#7f8ca0;font-size:9px;letter-spacing:2px;margin-top:4px}.sidebar nav{display:grid;gap:7px}.nav-item{height:44px;border-radius:9px;display:flex;align-items:center;gap:13px;padding:0 13px;color:#8491a5;text-decoration:none;font-size:13px}.nav-item span{font-size:17px;width:18px;text-align:center}.nav-item.active{background:linear-gradient(90deg,#262335,#191d2b);color:#e6c783;border:1px solid #423b35}.sidebar-bottom{margin-top:auto;border:1px solid #202c3e;border-radius:10px;padding:13px;display:flex;gap:10px;align-items:flex-start}.connection-dot,.status-pill i,.live-tag i{width:7px;height:7px;border-radius:50%;background:#d3a956;display:inline-block;flex-shrink:0;margin-top:4px}.sidebar-bottom b{display:block;font-size:11px}.sidebar-bottom small{display:block;color:#77859a;font-size:10px;line-height:1.5;margin-top:5px}.main{max-width:1800px;width:calc(100% - 236px);padding:30px 34px 22px;margin:0 auto}.topbar,.welcome-row,.panel-heading,.source-controls,.button-row,.top-actions{display:flex;align-items:center;justify-content:space-between}.eyebrow,.section-kicker{color:#b99a61;font-size:9px;letter-spacing:2px;font-weight:700}.topbar h1{font-size:25px;margin:7px 0 0;letter-spacing:-.8px}.top-actions{gap:16px}.status-pill{border:1px solid #354052;border-radius:30px;padding:8px 12px;color:#aeb9c9;font-size:11px}.status-pill i{background:#d1a65b;margin:0 7px 0 0}.avatar{width:34px;height:34px;border-radius:50%;background:#262b3c;border:1px solid #45404a;color:#d8b56d;display:grid;place-items:center;font-size:11px;font-weight:700}.welcome-row{margin:29px 0 20px}.welcome-row h2{font-size:17px;margin:0 0 6px}.welcome-row p{color:var(--muted);font-size:12px;margin:0}.primary-btn,.secondary-btn,.danger-btn,.outline-btn{border:0;border-radius:8px;padding:11px 15px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;transition:.2s}.primary-btn{background:linear-gradient(135deg,#e3c47e,#b88e4d);color:#15131a;box-shadow:0 5px 18px #b78d4d22}.primary-btn:hover{filter:brightness(1.08)}.primary-btn span{font-size:15px;margin-right:6px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:17px}.panel,.stat-card{background:linear-gradient(145deg,#121b2b,#0f1725);border:1px solid var(--line);border-radius:12px;min-width:0}.panel{padding:17px}.panel-heading{margin-bottom:15px}.panel-heading h3{font-size:14px;margin:5px 0 0}.mini-tag,.live-tag{font-size:9px;letter-spacing:1px;border:1px solid #354052;border-radius:20px;padding:6px 9px;color:#9ba8ba}.mini-tag.muted{color:#6f7c90;border-color:#2b3545}.live-tag{color:#a9b5c5}.live-tag i{background:#59677a;width:6px;height:6px;margin:0 5px 0 0}.source-stage{height:310px;background:#080d16;border:1px solid #263348;border-radius:8px;position:relative;overflow:hidden;display:grid;place-items:center;user-select:none}#sourceVideo{width:100%;height:100%;object-fit:contain;display:none}.source-stage.has-video #sourceVideo{display:block}.source-stage.has-video .empty-state{display:none}.empty-state{max-width:300px;text-align:center;padding:20px;display:flex;align-items:center;flex-direction:column}.empty-icon{width:48px;height:48px;border-radius:14px;background:#182438;border:1px solid #34445e;color:#d6b46e;display:grid;place-items:center;font-size:22px;margin-bottom:13px}.empty-state b,.mirror-empty b{font-size:12px}.empty-state span,.mirror-empty span{font-size:10px;color:#77869c;line-height:1.6;margin:7px 0 13px}.outline-btn{background:transparent;border:1px solid #66583d;color:#d9bd83;padding:8px 12px}.stage-label{position:absolute;bottom:9px;left:10px;font-size:8px;letter-spacing:1.5px;color:#aab4c3;background:#0a101bd9;padding:5px 7px;border-radius:4px;display:none}.has-video .stage-label{display:block}.selection-box{position:absolute;border:2px solid #e7c477;background:#e7c47722;box-shadow:0 0 0 9999px #05091477;cursor:move;pointer-events:none}.source-controls{gap:10px;margin-top:13px;flex-wrap:wrap}.instruction{display:flex;align-items:center;gap:7px;color:#9aa7b9;font-size:10px}.number{border:1px solid #6e5d3e;color:#dfbf7a;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:9px}.button-row{gap:7px}.secondary-btn{background:#1c2a3d;color:#c4d0df;border:1px solid #35465e}.danger-btn{background:#2b1a25;color:#e99ba4;border:1px solid #59313e}.secondary-btn:disabled,.danger-btn:disabled{opacity:.4;cursor:not-allowed}.hint-box{margin-top:13px;padding:10px 11px;background:#171e2a;border-radius:7px;color:#8997aa;font-size:10px;line-height:1.6}.hint-box span{color:#d7b66e;margin-right:6px}.mirror-stage{height:310px;background:#080d16;border:1px solid #263348;border-radius:8px;position:relative;overflow:hidden;display:grid;place-items:center}#cropCanvas{width:100%;height:100%;object-fit:contain;display:none}.mirror-stage.has-crop #cropCanvas{display:block}.mirror-stage.has-crop .mirror-empty{display:none}.mirror-empty{display:flex;flex-direction:column;align-items:center;text-align:center}.scan-icon{font-size:35px;color:#65758d;margin-bottom:10px}.mirror-footer{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:14px}.mirror-footer div{padding:0 10px;border-right:1px solid #273246}.mirror-footer div:first-child{padding-left:0}.mirror-footer div:last-child{border:0}.mirror-footer small{display:block;color:#75849a;font-size:8px;letter-spacing:1px;margin-bottom:5px}.mirror-footer b{font-size:10px;color:#d1d9e5}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:17px}.stat-card{padding:15px 16px}.stat-top{display:flex;justify-content:space-between;color:#96a3b5;font-size:10px}.stat-symbol{font-size:17px;color:#c3a365}.stat-value{display:block;font-size:21px;margin:12px 0 5px;letter-spacing:-.5px}.stat-value em{font-style:normal;font-size:12px;color:#a2afc0}.stat-card small{font-size:9px;color:#738198}.lower-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:17px;margin-top:17px}.roadmap-placeholder{height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px}.roadmap-grid{display:grid;grid-template-columns:repeat(6,22px);gap:7px}.roadmap-grid span{width:22px;height:22px;border:1px solid #354052;border-radius:50%;background:#111a29}.roadmap-placeholder p{font-size:10px;color:#738198}.prediction-empty{height:117px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.brain-icon{font-size:25px;color:#c4a66c;margin-bottom:5px}.prediction-empty b{font-size:11px}.prediction-empty p{max-width:300px;font-size:9px;color:#78869b;line-height:1.6}.probability-row{display:flex;justify-content:space-between;border-top:1px solid #263246;padding-top:12px;gap:7px}.probability-row div{font-size:9px;color:#95a2b4;display:flex;align-items:center;gap:5px}.probability-row b{color:#dce3ed}.p-dot,.b-dot,.t-dot{width:7px;height:7px;border-radius:50%;background:#4f94e8}.b-dot{background:#ed6d79}.t-dot{background:#48c69b}footer{color:#65748a;font-size:9px;margin-top:22px;text-align:center}footer span{color:#bd9e64;margin:0 5px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#202b3c;border:1px solid #45536a;color:#e8eef7;padding:11px 16px;border-radius:8px;font-size:11px;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.sidebar{width:190px}.main{width:calc(100% - 190px);padding:25px 20px}.workspace{grid-template-columns:1fr}.source-stage,.mirror-stage{height:290px}.lower-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.app-shell{display:block}.sidebar{width:100%;height:auto;padding:13px 15px;border-right:0;border-bottom:1px solid #1d293b}.brand{padding:0 3px 12px}.sidebar nav{display:flex;overflow:auto;gap:5px}.nav-item{white-space:nowrap;height:36px;padding:0 10px;font-size:11px}.sidebar-bottom{display:none}.main{width:100%;padding:20px 13px}.topbar h1{font-size:20px}.status-pill{font-size:9px;padding:7px 9px}.welcome-row{align-items:flex-start;gap:12px;flex-direction:column}.welcome-row h2{font-size:15px}.primary-btn{width:100%}.panel{padding:12px}.source-stage,.mirror-stage{height:220px}.source-controls{align-items:flex-start;flex-direction:column}.button-row{width:100%}.button-row button{flex:1}.stats-grid{gap:8px}.stat-card{padding:12px}.stat-value{font-size:18px}.lower-grid{gap:10px}.probability-row{flex-wrap:wrap}.mirror-footer{grid-template-columns:1fr 1fr 1fr}.mirror-footer b{font-size:9px}}

.result-panel{margin-top:17px}.result-intro{font-size:11px;color:#8d9bb0;line-height:1.7;margin:0 0 14px}.result-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-btn{border-radius:9px;padding:13px 10px;border:1px solid #354052;background:#121c2c;color:#edf2fa;text-align:left;cursor:pointer;font-family:inherit}.result-btn b{display:block;font-size:12px;letter-spacing:1px}.result-btn small{display:block;color:#a2afc0;font-size:10px;margin-top:5px}.result-btn.player{border-color:#315b91;background:#14243a}.result-btn.banker{border-color:#78404a;background:#2b1922}.result-btn.tie{border-color:#286b58;background:#132b28}.result-btn:hover{filter:brightness(1.2)}.result-summary{display:flex;align-items:center;gap:25px;margin:15px 0;padding:12px 0;border-top:1px solid #263246;border-bottom:1px solid #263246}.result-summary div{display:grid;gap:5px}.result-summary small{font-size:9px;color:#7e8ca1}.result-summary b{font-size:12px}.result-summary button{margin-left:auto}.history-strip{display:flex;gap:6px;flex-wrap:wrap;min-height:30px}.history-chip{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;border:1px solid}.history-chip.P{background:#152a45;color:#7eb6ff;border-color:#3c77b7}.history-chip.B{background:#351c25;color:#ff9aa4;border-color:#a84d5b}.history-chip.T{background:#16352f;color:#7de0c0;border-color:#398f77}.history-empty{font-size:10px;color:#64748b}.result-note{font-size:9px;color:#74839a;margin:12px 0 0;line-height:1.6}
@media(max-width:650px){.result-actions{gap:6px}.result-btn{padding:11px 7px}.result-btn b{font-size:10px}.result-btn small{font-size:9px}.result-summary{gap:12px;flex-wrap:wrap}.result-summary button{margin-left:0;width:100%}}