:root{
  color-scheme:dark;
  --bg:#09111d;
  --panel:#111d2d;
  --panel-2:#16263a;
  --line:rgba(140,190,225,.20);
  --text:#eef6ff;
  --muted:#a8bbcd;
  --accent:#5ed7ff;
  --accent-2:#1686c9;
  --ok:#83e6b0;
  --warn:#ffd285;
  --danger:#ff9b9b;
  font-family:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100vh;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0,rgba(22,134,201,.19),transparent 30rem),
    linear-gradient(180deg,#0a1422,#07101a 70%);
}

button,input,select,textarea{font:inherit}

.demo-shell{
  width:min(1420px,calc(100% - 28px));
  margin:0 auto;
  padding:22px 0 44px;
}

.demo-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(24,48,72,.96),rgba(13,28,44,.96));
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}

.demo-top h1{
  margin:0 0 7px;
  font-size:clamp(24px,4vw,38px);
  letter-spacing:-.025em;
}

.demo-top p{max-width:820px;margin:0;color:var(--muted);line-height:1.55}

.demo-badge{
  flex:none;
  padding:8px 12px;
  border:1px solid rgba(131,230,176,.32);
  border-radius:999px;
  color:var(--ok);
  background:rgba(32,115,79,.18);
  font-size:13px;
  font-weight:700;
}

.demo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:18px;
  align-items:start;
}

.demo-panel{
  min-width:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(17,29,45,.94);
  box-shadow:0 18px 42px rgba(0,0,0,.20);
}

.demo-panel__head{
  padding:15px 17px;
  border-bottom:1px solid var(--line);
}

.demo-panel__head h2{margin:0;font-size:18px}
.demo-panel__body{padding:17px}

.demo-field{margin-bottom:14px}
.demo-field label{
  display:block;
  margin-bottom:6px;
  color:#dcecff;
  font-size:13px;
  font-weight:700;
}

.demo-field input,
.demo-field textarea,
.demo-field select{
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(140,190,225,.23);
  border-radius:11px;
  color:var(--text);
  background:#0b1726;
  outline:none;
}

.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(94,215,255,.10);
}

.demo-field textarea{min-height:88px;resize:vertical}

.demo-help{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.demo-editor-frame{
  overflow:hidden;
  border:1px solid rgba(140,190,225,.23);
  border-radius:14px;
  background:#fff;
}

.demo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(94,215,255,.31);
  border-radius:11px;
  color:#ecf9ff;
  background:linear-gradient(180deg,#176d9e,#10547c);
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
}

.demo-btn:hover{filter:brightness(1.08)}
.demo-btn--ghost{color:#dcecff;background:#132338;border-color:var(--line)}
.demo-btn--danger{color:#ffe4e4;background:#542529;border-color:rgba(255,155,155,.28)}

.demo-status{
  min-height:20px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
.demo-status.is-ok{color:var(--ok)}
.demo-status.is-error{color:var(--danger)}
.demo-status.is-warn{color:var(--warn)}

.demo-side-stack{display:grid;gap:18px;position:sticky;top:14px}

.demo-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.demo-chip{
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:#dcecff;
  background:#0d1a2a;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}

.demo-chip:hover,
.demo-chip[aria-pressed="true"]{
  border-color:rgba(94,215,255,.58);
  background:#163551;
}

.demo-image-list{display:grid;gap:10px}
.demo-image{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:10px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0c1827;
}

.demo-image img{
  width:92px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
}

.demo-image strong{display:block;margin-bottom:7px;font-size:13px}
.demo-image__actions{display:flex;gap:6px;flex-wrap:wrap}
.demo-image__actions button{
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  color:#dcecff;
  background:#16283d;
  cursor:pointer;
  font-size:11px;
}

.demo-embed-code{
  width:100%;
  min-height:116px;
  resize:vertical;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:#e7f4ff;
  background:#07111d;
  font:12px/1.45 Consolas,Monaco,monospace;
}

.demo-warning{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid rgba(255,210,133,.25);
  border-radius:12px;
  color:#ffe6ae;
  background:rgba(105,73,18,.20);
  font-size:13px;
  line-height:1.5;
}

.demo-footer{
  margin-top:18px;
  color:#7f95aa;
  font-size:12px;
  text-align:center;
}

@media(max-width:980px){
  .demo-grid{grid-template-columns:1fr}
  .demo-side-stack{position:static}
}

@media(max-width:640px){
  .demo-shell{width:min(100% - 16px,1420px);padding-top:8px}
  .demo-top{display:block;padding:16px}
  .demo-badge{display:inline-block;margin-top:13px}
  .demo-panel__body{padding:12px}
  .demo-options{grid-template-columns:1fr}
}