:root{
  --bg: #0b1020;
  --panel: #11162a;
  --panel-2: #0e1426;
  --text: #e6e9ef;
  --subtext: #aab2c5;
  --primary: #6ea8fe;
  --primary-600:#5a8fe0;
  --accent: #8b5cf6;
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
  --chip: #1b2341;
  --border: #1f2a44;
  --muted: #0b1224;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

:root.light{
  --bg: #f7f8fc;
  --panel: #ffffff;
  --panel-2:#f2f4fb;
  --text:#0f172a;
  --subtext:#475569;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --accent:#7c3aed;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --chip:#f1f5f9;
  --border:#e2e8f0;
  --muted:#f1f5f9;
  --shadow: 0 10px 30px rgba(2,6,23,.12);
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, 'Helvetica Neue', Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 500px at 70% -20%, rgba(139,92,246,.25), transparent 50%),
              radial-gradient(1000px 400px at -10% 10%, rgba(110,168,254,.2), transparent 50%),
              var(--bg);
  color:var(--text);
}

.app-header{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background:linear-gradient(to bottom, rgba(11,16,32,.8), rgba(11,16,32,.2));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}
.brand svg{color:var(--primary)}

.icon-btn{display:inline-flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:10px; color:var(--text); background:transparent; border:1px solid var(--border); cursor:pointer}
.icon-btn:hover{background:var(--panel)}
.actions{display:flex; align-items:center; gap:8px}

.container{max-width:1100px; margin:28px auto; padding:0 20px}
.card{background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow)}
.card-header{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:22px 22px 12px 22px}
.title{margin:0; font-size:28px; cursor:pointer; user-select:none; transition:color 0.2s ease}
.title:hover{color:var(--primary)}
.subtitle{margin:6px 0 0; color:var(--subtext)}
.meta{display:flex; align-items:center; gap:8px}

.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 10px}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--chip); color:var(--subtext)}

.editor-wrap{padding:0 22px 22px}
.editor-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.editor-toolbar label{color:var(--subtext); margin-right:8px}
.editor-toolbar select{height:36px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:0 10px}

.editor-label{color:var(--subtext); font-weight:600}

textarea#code{width:100%; min-height:360px; resize:vertical; padding:14px 16px; border-radius:14px; border:1px solid var(--border); outline:none; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px; line-height:1.6; box-shadow: inset 0 0 0 9999px rgba(0,0,0,.08);}
textarea#code:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(110,168,254,.2)}

.actions-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px 22px}
.btn{height:40px; padding:0 14px; border-radius:12px; border:1px solid var(--border); cursor:pointer; font-weight:600; letter-spacing:.2px}
.btn.primary{background:linear-gradient(180deg, var(--primary), var(--primary-600)); color:white; border:none}
.btn.secondary{background:transparent; color:var(--text)}
.btn.ghost{background:transparent; color:var(--subtext)}
.btn:disabled{opacity:.6; cursor:not-allowed}

.hint{margin:0 22px 18px; color:var(--subtext)}

.toast{position:fixed; right:22px; bottom:22px; max-width:360px; padding:12px 14px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:none}
.toast.show{display:block; animation:slideIn .2s ease}
.toast.success{border-color: rgba(34,197,94,.35)}
.toast.error{border-color: rgba(239,68,68,.35)}
.toast.warn{border-color: rgba(251,191,36,.35)}
@keyframes slideIn{from{transform: translateY(8px); opacity:0} to{transform: translateY(0); opacity:1}}

@media (max-width: 640px){
  .card-header{flex-direction:column}
  .actions-row{flex-direction:column-reverse; align-items:stretch}
  .editor-toolbar{flex-direction:column; align-items:stretch}
}