:root,
.lg-svg-admin,
.lg-svg-library-preview,
#abc-editor-app{
  --panel:#ffffff;
  --line:#d9e1ea;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#2f9e44;
  --accent-2:#e8f7ec;
  --danger:#d83a52;
  --shadow:0 14px 34px rgba(15,23,42,.08);
  --btn-size:54px;
  --icon-size:24px;
  --stroke:2;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}

.tb-preview{
  position:relative;
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(180deg,#f7fbff 0%,#f3f6fb 100%);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.tb-preview::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:
    radial-gradient(circle at 20% 20%, #000 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, #000 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, #000 1px, transparent 1px);
  background-size:140px 140px;
}

.tb-head{
  margin-bottom:18px;
}

.tb-head h2{
  margin:0 0 6px;
  font-size:20px;
  font-weight:800;
}

.tb-head p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.tb-states{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}

.tb-state-block{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}

.tb-state-block h3{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
}

.tb-state-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tb-preview .tb-btn{
  pointer-events:none;
  cursor:default;
}

.tb-btn{
  width:var(--btn-size);
  height:var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f1f1 75%);
  border:2px solid #2f2f2f;
  color:#222;
  cursor:pointer;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.12);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
}

.tb-btn:hover{
  transform:translateY(-2px);
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #f3f3f3 75%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.15),
    0 6px 10px rgba(0,0,0,.18);
}

.tb-btn--hover-demo{
  transform:translateY(-2px);
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #f3f3f3 75%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.15),
    0 6px 10px rgba(0,0,0,.18);
}

.tb-btn:active{
  transform:translateY(1px);
  box-shadow:inset 0 4px 7px rgba(0,0,0,.35);
}

.tb-btn.active{
  background:radial-gradient(circle at 40% 35%, #ffffff 0%, #eeeeee 70%);
  border-color:#111;
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.25),
    0 0 0 2px var(--accent),
    0 0 0 8px var(--accent-2),
    0 3px 6px rgba(0,0,0,.18);
}

.tb-btn.danger{
  color:var(--danger);
}

.tb-btn:disabled,
.tb-btn.disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  background:#f3f5f8;
  border-color:#cbd5e1;
  color:#7d8794;
}

.tb-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(43,111,255,.25),
    inset 0 2px 4px rgba(0,0,0,.22);
}

.tb-icon{
  width:var(--icon-size);
  height:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.tb-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.tb-icon svg path,
.tb-icon svg line,
.tb-icon svg polyline,
.tb-icon svg polygon,
.tb-icon svg circle,
.tb-icon svg rect{
  vector-effect:non-scaling-stroke;
  stroke:currentColor;
  stroke-width:var(--stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:760px){
  .tb-preview{
    padding:16px;
    border-radius:18px;
  }

  .tb-states{
    grid-template-columns:1fr;
  }
}