:root{--bg:#0b0f14;--panel:#0f1620;--muted:#8ea0b5;--accent:#4fd1a1;--line:#223044;--warn:#ff6565;}*, *::before, *::after {box-sizing: border-box;}html,body{height:100%;overflow:hidden;}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#e6edf3;background:var(--bg);}.app {display:grid;grid-template-columns: 1fr 320px;grid-template-rows: auto 1fr;height:100%;overflow:hidden;}header {grid-column: 1 / span 2;display: flex;align-items: center;padding: 8px 12px;background: #0c1420;border-bottom: 1px solid var(--line);}header h1{font-size:16px;font-weight:600;margin:0;opacity:.9}.logo {display: flex;align-items: center;gap: 10px;}.logo-svg {height: 32px;}.badge {font-size: 12px;color: #fff;background: #4fd1a1;padding: 2px 6px;border-radius: 4px;}.spacer {flex: 1;}.toolbar {display: flex;align-items: center;gap: 8px;}.spacer{flex:1}.toolbar{display:flex;gap:8px;flex-wrap:wrap}button, .file-label{background:#182233;color:#e6edf3;border:1px solid var(--line);padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px;}button:hover,.file-label:hover{background:#1b2940}button.primary{background:var(--accent);color:#05251a;border-color:#2aa67e}button.danger{background:#2a1414;color:#ffd2d2;border-color:#512020}input[type="file"]{display:none}main{display:grid;grid-template-columns:1fr 320px;grid-column:1 / -1;}.stage-wrap{padding:14px;overflow:auto;background:radial-gradient(800px 400px at 60% -20%, #192538 0%, transparent 60%) no-repeat;min-width: 0;min-height: 0;}.stage{display:inline-block;position:relative;background:#0c1118;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);outline:1px solid var(--line)}.stage img{display:block;max-width:100%;height:auto;border-radius:14px}.stage img{-webkit-user-drag: none;user-select: none;}.hotspot{position:absolute;border:2px dashed rgba(79,209,161,.65);background:rgba(79,209,161,.10);}.hotspot.selected{border:2px solid var(--accent);box-shadow:0 0 0 2px rgba(79,209,161,.25)}.handle{position:absolute;width:10px;height:10px;background:var(--accent);border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}.handle.nw{left:-6px;top:-6px}.handle.ne{right:-6px;top:-6px}.handle.sw{left:-6px;bottom:-6px}.handle.se{right:-6px;bottom:-6px}.handle.n{left:50%;top:-6px;transform:translateX(-50%)}.handle.s{left:50%;bottom:-6px;transform:translateX(-50%)}.handle.w{left:-6px;top:50%;transform:translateY(-50%)}.handle.e{right:-6px;top:50%;transform:translateY(-50%)}aside {grid-column: 2;box-sizing: border-box;padding: 16px;border-left: 1px solid var(--line);background: var(--panel);overflow-y: auto;min-width: 0;}aside h2{margin:0 0 12px;font-size:15px}.prop{display:grid;grid-template-columns:92px 1fr;gap:8px 10px;align-items:center;margin-bottom:10px}.prop input[type="text"], .prop input[type="url"], .prop input[type="number"], .prop textarea, .prop select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0c1420;color:#d9e1ea;font-size:13px;}.muted{color:var(--muted)}.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hr{height:1px;background:var(--line);margin:12px 0}.small{font-size:12px;opacity:.85}.badge{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;background:#0d1623;color:#9fb3c7}.hint{padding:8px 10px;border:1px dashed #2a3a53;border-radius:10px;background:#0c1421;color:#a7bbcf;font-size:12px}.ghost-cursor{position:absolute;pointer-events:none;border:1px dashed rgba(255,255,255,.35)}.prop-row {display: flex;align-items: center;}.prop-row .unit {margin-left: 4px;color: #aaa;}.prop-row input {width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0c1420;color:#d9e1ea;font-size:13px;}#splash {position: fixed;inset: 0;background: linear-gradient(-45deg, #0c1420, #122033, #1e3c4c, #4fd1a1);background-size: 300% 300%;animation: gradientShift 25s ease infinite;display: flex;align-items: center;justify-content: center;z-index: 9999;opacity: 1;transition: opacity 0.6s ease;}.splash-content {text-align: center;animation: fadeInUp 1s ease forwards;}.logo svg {height: 80px;opacity: 0;animation: fadeIn 1s ease forwards;}.tagline {color: #9ba6b2;margin: 20px 0 30px;font-size: 1.2rem;opacity: 0;animation: fadeIn 1s ease forwards 0.5s;}.buttons {display: flex;gap: 12px;justify-content: center;}.choose-btn {display: inline-block;background: #4fd1a1;color: #0c1420;font-weight: bold;padding: 14px 28px;border-radius: 8px;font-size: 1rem;cursor: pointer;transition: transform 0.2s, background 0.3s;}.choose-btn:hover {background: #3db98a;transform: translateY(-2px);}.choose-btn.secondary {background: #1e2735;color: #d9e1ea;}.choose-btn.secondary:hover {background: #2a3548;}@keyframes fadeIn {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}@keyframes gradientShift {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}.floating-shapes div {position: absolute;width: 40px;height: 40px;border: 2px dashed rgba(79, 209, 161, 0.2);border-radius: 4px;animation: float 30s linear infinite;}.floating-shapes div:nth-child(1) {top: 20%;left: 10%;animation-duration: 25s;}.floating-shapes div:nth-child(2) {top: 50%;left: 70%;animation-duration: 35s;}.floating-shapes div:nth-child(3) {top: 80%;left: 30%;animation-duration: 40s;}@keyframes float {from {transform: translateY(0) rotate(0deg);}to {transform: translateY(-200px) rotate(360deg);}}