*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#0b0e14;color:#e5e7eb}
.wrapper{display:grid;grid-template-columns:1fr 360px;gap:16px;height:100vh;padding:16px}
.header{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;background:#111827;border:1px solid #1f2937}
.header .title{font-weight:700;font-size:18px}.header .tagline{font-size:12px;color:#9ca3af}
.left,.right{height:calc(100vh - 80px)}.left{border-radius:16px;background:#0f172a;border:1px solid #1f2937;padding:8px;display:flex;flex-direction:column}
.controls{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid #1f2937}
.controls button,.link{padding:8px 10px;border-radius:10px;border:1px solid #374151;background:#111827;color:#e5e7eb;cursor:pointer;text-decoration:none}
.controls button:hover,.link:hover{background:#1f2937}
.controls input[type=number]{width:80px;padding:8px;border-radius:10px;border:1px solid #374151;background:#0b0e14;color:#e5e7eb}
.viewer{flex:1;border-radius:12px;overflow:hidden;background:#0b0e14}
.viewer iframe{width:100%;height:100%;border:0}
.right{border-radius:16px;background:#0f172a;border:1px solid #1f2937;padding:12px;display:flex;flex-direction:column;gap:12px}
.small{color:#9ca3af;font-size:12px}.tip{font-size:12px;color:#9ca3af;line-height:1.4}
@media (max-width:1024px){.wrapper{grid-template-columns:1fr}.right{height:auto}}