:root{
  --bg: #0b1220;
  --panel: #111a2e;
  --panel2: #0f1830;
  --text: #e7eefc;
  --muted: #a9b6d3;
  --border: rgba(231, 238, 252, 0.12);
  --accent: #6aa6ff;
  --danger: #ff6a7a;
  --btn: #1a2a4d;
  --btnHover: #223764;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 15% 10%, #13224a 0%, var(--bg) 55%) fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header{
  padding: 20px 22px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
}
.header h1{margin:0 0 6px; font-size: 20px; letter-spacing:0.2px}
.header p{margin:0; color:var(--muted); font-size:13px}
.header code{color:#cfe0ff}

.layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 14px;
  padding: 14px;
  flex: 1;
  min-height: 0;
}

.panel,
.canvas{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(17,26,46,0.75);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

.panel{display:flex; flex-direction:column; min-height:0}

.panel-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.label{font-weight:600; font-size:13px}
.spacer{flex:1}

textarea{
  flex:1;
  width:100%;
  border:0;
  outline:none;
  resize:none;
  padding: 12px;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
}

.btn{
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  cursor:pointer;
}
.btn:hover{background:var(--btnHover)}
.btn:active{transform: translateY(1px)}
.btn-secondary{background: rgba(255,255,255,0.03)}

.error{
  display:none;
  padding: 10px 12px;
  color: #ffd2d7;
  border-top: 1px solid rgba(255,106,122,0.22);
  background: rgba(255,106,122,0.10);
}

.hint{
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}

.canvas{display:flex; flex-direction:column; min-height:0}
.canvas-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.canvas-title{font-weight:700; font-size:13px; color:#d9e7ff}
.canvas-actions{display:flex; gap:10px}

.svg-wrap{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background: radial-gradient(900px 460px at 20% 20%, rgba(106,166,255,0.07) 0%, rgba(106,166,255,0.00) 60%);
}
#svg{display:block; width:100%; height:100%}

.footer{
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  flex: 0 0 auto;
}

@media (max-width: 980px){
  body{overflow:auto}
  .layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
}