/* Scoped reset only inside plugin */
.gpo-wrap, .gpo-wrap * { box-sizing: border-box; }

/* Prevent theme from forcing white text badly (scoped only) */
.gpo-wrap {
  width: 100%;
  max-width: 100%;
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  color: #111 !important; /* safe base color */
}

/* IMPORTANT:
   This ensures tool stays in content area and never stretches into sidebar. */
.gpo-shell{
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: hidden;            /* stops overflow into sidebar */
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 18px;
  background: transparent;     /* DOES NOT change site background */
}

/* Internal container background only */
.gpo-main{
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
}

/* Typography (override aggressive theme styles) */
.gpo-wrap .gpo-h1,
.gpo-wrap .gpo-h2,
.gpo-wrap .gpo-title,
.gpo-wrap .gpo-sub,
.gpo-wrap .gpo-tag,
.gpo-wrap label,
.gpo-wrap p,
.gpo-wrap span,
.gpo-wrap strong,
.gpo-wrap textarea,
.gpo-wrap select,
.gpo-wrap button{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #111 !important;
}

/* Topbar */
.gpo-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
}

.gpo-topbar__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.gpo-logo{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(45,99,255,0.85), rgba(10,163,106,0.75));
  color: rgba(0,0,0,0.75) !important;
}

.gpo-title{ font-weight: 900; font-size: 14px; }
.gpo-tag{ font-size: 12px; opacity: 0.75; }

.gpo-topbar__right{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Hero */
.gpo-hero{ padding: 10px 0 0; }
.gpo-h1{ margin: 10px 0 6px; font-size: clamp(18px, 2.2vw, 28px); }
.gpo-sub{ margin: 0; opacity: 0.75; }

/* Layout grid */
.gpo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .gpo-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.gpo-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 14px;
}

.gpo-card--full{ margin-top: 14px; }

.gpo-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.gpo-h2{ margin:0; font-size: 15px; font-weight: 900; }

.gpo-chips{ display:flex; gap: 8px; flex-wrap:wrap; }
.gpo-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Fields */
.gpo-field{ margin: 10px 0; }
.gpo-label{ display:block; margin: 0 0 6px; font-size: 13px; opacity: 0.75; }

.gpo-control{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.95);
  outline: none;
}

.gpo-control:focus{
  box-shadow: 0 0 0 4px rgba(45,99,255,0.18);
  border-color: rgba(45,99,255,0.5);
}

.gpo-control--ta{
  min-height: 170px;
  resize: vertical;
  line-height: 1.5;
}

/* Row */
.gpo-row{ display:flex; align-items:center; }
.gpo-row--gap{ gap: 10px; }
.gpo-row--wrap{ flex-wrap: wrap; }

/* Buttons */
.gpo-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.03);
  cursor:pointer;
  font-weight: 700;
}

.gpo-btn:hover{ transform: translateY(-1px); }
.gpo-btn:active{ transform: translateY(0px); }

.gpo-btn--primary{
  background: linear-gradient(135deg, rgba(45,99,255,0.92), rgba(10,163,106,0.70));
  color: rgba(255,255,255,0.98) !important;
  border-color: transparent;
}

.gpo-btn--ghost{
  background: transparent;
}

.gpo-btn--danger{
  background: rgba(214,58,58,0.10);
  border-color: rgba(214,58,58,0.30);
}

/* Note */
.gpo-note{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(45,99,255,0.07);
  border: 1px solid rgba(45,99,255,0.20);
}

/* Score */
.gpo-score{
  display:flex;
  gap: 12px;
  align-items:center;
}

.gpo-ring{
  position: relative;
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
}
.gpo-ring__svg{ width:120px; height:120px; transform: rotate(-90deg); }
.gpo-ring__track{ fill:none; stroke: rgba(0,0,0,0.09); stroke-width: 10; }
.gpo-ring__bar{
  fill:none;
  stroke: rgba(45,99,255,0.95);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 289.026524;
  stroke-dashoffset: 289.026524;
  transition: stroke-dashoffset 260ms ease;
}
.gpo-ring__val{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
}
.gpo-ring__num{ font-size: 26px; font-weight: 900; }
.gpo-ring__lab{ font-size: 12px; opacity: 0.7; }

.gpo-score__title{ font-weight: 900; }
.gpo-score__sub{ opacity: 0.75; font-size: 13px; margin-top: 2px; }

/* Suggestions */
.gpo-section{
  margin: 10px 0 8px;
  font-weight: 900;
  font-size: 12px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.gpo-suggestions{ display:grid; gap: 10px; }
.gpo-sugg{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.gpo-sugg__title{ font-weight: 900; }
.gpo-sugg__text{ margin-top: 6px; opacity: 0.75; font-size: 13px; }
.gpo-sugg__actions{ margin-top: 10px; display:flex; gap: 8px; flex-wrap:wrap; }

/* Divider */
.gpo-divider{ height: 1px; margin: 14px 0; background: rgba(0,0,0,0.10); }

/* Mini metrics */
.gpo-mini{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 520px){
  .gpo-mini{ grid-template-columns: repeat(2, 1fr); }
}
.gpo-mini__item{
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  display:flex;
  justify-content:space-between;
}

/* Templates */
.gpo-templates{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .gpo-templates{ grid-template-columns: 1fr; }
}
.gpo-tpl{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.gpo-tpl__title{ font-weight: 900; }
.gpo-tpl__desc{ margin-top: 6px; opacity: 0.75; font-size: 13px; }
.gpo-tpl__btns{ margin-top: 10px; display:flex; gap: 10px; flex-wrap:wrap; }

/* History */
.gpo-history{ display:grid; gap: 10px; }
.gpo-hitem{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.gpo-hitem__top{ display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap; }
.gpo-hitem__title{ font-weight: 900; }
.gpo-hitem__meta{ opacity: 0.75; font-size: 12px; }
.gpo-hitem__text{
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow:auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
}

/* Footer + Toast */
.gpo-footer{
  text-align:center;
  opacity: 0.75;
  padding: 16px 0 10px;
}

.gpo-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.75);
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 999999;
}
.gpo-toast.gpo-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}