
.tgw-window{
  --tgw-color:#18f6ff;
  --tgw-glow:.75;        /* 0~1 */
  --tgw-bg-op:.15;       /* 0~1 */
  --tgw-radius:16px;
  --tgw-bw:2px;          /* border width */
  --tgw-ctl:14px;        /* corner cut lengths */
  --tgw-ctr:14px;
  --tgw-cbr:14px;
  --tgw-cbl:14px;
  --tgw-min-h:auto;

  position: relative;
  width: 100%;
  min-height: var(--tgw-min-h);
}

.tgw-shell{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: var(--tgw-radius);
  overflow: hidden;
  clip-path: polygon(
    var(--tgw-ctl) 0%,
    calc(100% - var(--tgw-ctr)) 0%,
    100% var(--tgw-ctr),
    100% calc(100% - var(--tgw-cbr)),
    calc(100% - var(--tgw-cbr)) 100%,
    var(--tgw-cbl) 100%,
    0% calc(100% - var(--tgw-cbl)),
    0% var(--tgw-ctl)
  );
}

/* Border layer */
.tgw-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: color-mix(in oklab, var(--tgw-color) 80%, transparent);
  opacity: calc(0.55 + var(--tgw-glow) * 0.35);
  filter: drop-shadow(0 0 calc(18px * var(--tgw-glow)) color-mix(in oklab, var(--tgw-color) 70%, transparent));
}

/* Inner panel */
.tgw-shell::after{
  content:"";
  position:absolute;
  inset: var(--tgw-bw);
  pointer-events:none;
  border-radius: calc(var(--tgw-radius) - var(--tgw-bw));
  background:
    radial-gradient(120% 85% at 12% 8%, color-mix(in oklab, var(--tgw-color) 24%, transparent), transparent 55%),
    radial-gradient(110% 70% at 88% 10%, color-mix(in oklab, var(--tgw-color) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--tgw-color) calc(var(--tgw-bg-op) * 70%), transparent), rgba(0,0,0,0.80));
  opacity: 1;
}

/* Scanlines subtle */
.tgw-shell .tgw-body::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: calc(0.12 + var(--tgw-glow) * 0.10);
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0) 7px,
    rgba(0,0,0,0) 12px
  );
  mix-blend-mode: screen;
}

.tgw-header{
  position: relative;
  z-index: 2;
  padding: 12px 14px 10px;
}

.tgw-header::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--tgw-color) 70%, transparent), transparent);
  opacity: calc(0.35 + var(--tgw-glow) * 0.35);
}

.tgw-title{
  color: color-mix(in oklab, var(--tgw-color) 78%, white);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-shadow: 0 0 calc(10px * var(--tgw-glow)) color-mix(in oklab, var(--tgw-color) 60%, transparent);
}

.tgw-body{
  position: relative;
  z-index: 2;
  padding: 14px;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  line-height: 1.7;
  min-height: 120px;
}

.tgw-body::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
  opacity: calc(0.25 + var(--tgw-glow) * 0.25);
  pointer-events:none;
}


/* If no title/header, remove header spacing and top separator */
.tgw-window.tgw-no-header .tgw-body::before{
  display:none;
}
.tgw-window.tgw-no-header .tgw-body{
  padding-top: 16px;
}
