/* ==========================================================================
   SECURITY-CAM.IO – Glass UI (Monochrome Grey + RED actions)
   Single page: IP + Proxy tabs in one card
   No internal scrollbars inside card
   ========================================================================== */

html, body{
  overflow-x: hidden;
  background: #fff;
}

/* Stage */
.scui-stage{
  position: relative;
  width: 100%;
}

/* Background Glow */
.scui-pagebg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 82% 22%, rgba(240,240,240,0.18), transparent 58%),
    radial-gradient(circle at 55% 88%, rgba(255,255,255,0.14), transparent 62%);
}

/* Wrapper */
.scui-wrap{
  --txt: #56585e;
  --alpha: 0.85;
  --panel: rgba(230,230,230,var(--alpha));
  --panelSub: rgba(245,245,245,calc(var(--alpha)*0.95));
  --panelAlt: rgba(235,235,235,calc(var(--alpha)*0.90));
  --border: rgba(255,255,255,0.55);

  --round: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  --shadowSoft: 0 14px 34px rgba(0,0,0,0.20);

  --icon: 56px;
  --gap: 12px;

  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  padding-top: calc(var(--icon) + var(--gap));
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--txt);
}

.scui-wrap,
.scui-wrap *{
  box-sizing: border-box;
}

/* View switching helpers */
[data-view="ip"] [data-action="proxy"],
[data-view="ip"] [data-panel="proxy"],
[data-view="ip"] [data-title="proxy"],
[data-view="ip"] [data-subtitle="proxy"]{
  display: none !important;
}

[data-view="proxy"] [data-action="ip"],
[data-view="proxy"] [data-panel="ip"],
[data-view="proxy"] [data-title="ip"],
[data-view="proxy"] [data-subtitle="ip"]{
  display: none !important;
}

/* Trigger */
.scuiTrigger{
  position: absolute;
  top: var(--gap);
  left: var(--gap);

  width: var(--icon);
  height: var(--icon);
  z-index: 5;

  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);

  display: grid;
  place-items: center;
  cursor: pointer;

  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(120%);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
  color: var(--txt);
}

.scuiTrigger:hover{
  transform: translateY(-1px) scale(1.02);
}

@keyframes scuiFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes scuiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.scuiTrigger .pulse{
  animation: scuiFloatY 2.6s ease-in-out infinite, scuiPulse 3.2s ease-in-out infinite;
}

.scuiTrigger .ico{
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: var(--txt);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
}

/* Drawer */
.scuiDrawer{
  width: 100%;
  margin: 0;
  position: relative;

  border: 1px solid var(--border);
  border-radius: var(--round);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panelSub) 100%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow);

  overflow: hidden;
  color: var(--txt);

  max-height: 0;
  opacity: 0;
  transition: max-height .32s ease, opacity .22s ease;
}

.scuiDrawer.open{
  max-height: 9999px;
  opacity: 1;
}

/* Inner Glow */
.scuiGlow{
  position: absolute;
  inset: -120px;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.18), transparent 62%),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,0.14), transparent 64%);
}

/* Top bar */
.scuiTop{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 16px;
  background: var(--panelAlt);
  border-bottom: 1px solid var(--border);
}

.scuiTopLeft{ min-width: 0; }

.scuiBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;

  padding: 3px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.25);
  border: 1px solid var(--border);
  color: var(--txt);
}

.scuiTitle{
  margin: 10px 0 6px;
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--txt);
}

.scuiSubtitle{
  margin: 0;
  max-width: 760px;
  color: rgba(86,88,94,0.92);
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.scuiTopRight{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 260px;
}

/* Buttons – IDENTISCH zu speedtest (.bpstBtn) */
.scuiBtn{
  position: relative; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 12px 16px; font-weight: 800; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(140,143,149,0.95), rgba(86,88,94,0.95)); box-shadow: 0 18px 38px rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.18); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; min-width: 220px; text-align: center; user-select: none; max-width: 100%;
}

.scuiBtn:hover{
  transform: translateY(-1px); filter: saturate(1.02); box-shadow: 0 24px 52px rgba(0,0,0,0.32), inset 0 2px 0 rgba(255,255,255,0.18);
}

.scuiBtn:disabled{
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.scuiBtnShine{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(120px 40px at 25% 20%, rgba(255,255,255,0.35), transparent 65%);
}


/* Rot-Variante – gleicher Hover/Schatten wie .scuiBtn (kein Extra Hover!) */
.scuiBtn--red{
    background: #c9cf86 !important;
    color: #fff !important;
}

/* Note */
.scuiNote{
  font-size: 13px;
  color: rgba(86,88,94,0.90);
  text-align: right;
  min-height: 18px;
  font-weight: 800;
}

/* Tabs */
.scuiTabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scuiTab{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.22);
  color: rgba(86,88,94,0.95);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
  cursor: pointer;
}

.scuiTab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.30);
}

/* INACTIVE = DOGPHONE PURPLE (#9a859e) – glossy / shimmer */
.scuiTab:not(.is-active){
  position: relative;
  overflow: hidden;

  /* glossy gradient */
  background: linear-gradient(
    180deg,
    rgba(176, 158, 180, 0.98) 0%,
    rgba(154, 133, 158, 0.98) 55%,
    rgba(132, 112, 136, 0.98) 100%
  );

  border-color: rgba(255,255,255,0.55);
  color: #fff;

  /* depth like your buttons */
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.24);
}

/* shine layer (behind text, because ::before) */
.scuiTab:not(.is-active)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;

  /* top-left glossy highlight */
  background: radial-gradient(
    120px 40px at 25% 20%,
    rgba(255,255,255,0.42),
    transparent 65%
  );
}


/* Layout grid */
.scuiGrid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  padding: 14px 16px 12px;
}

@media (max-width: 980px){
  .scuiGrid{ grid-template-columns: 1fr; }
  .scuiTop{ flex-wrap: wrap; }
  .scuiTopRight{ align-items: flex-start; min-width: auto; width: 100%; }
  .scuiNote{ text-align: left; }
  .scuiBtn{ width: 100%; min-width: 0; }
  .scuiTabs{ justify-content: flex-start; }
}

/* Panels */
.scuiPanel{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(245,245,245,0.55);
  box-shadow: var(--shadowSoft), inset 0 0 0 1px rgba(255,255,255,0.12);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.scuiPanel::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(240px 90px at 30% 0%, rgba(255,255,255,0.26), transparent 62%);
}

.scuiPanelPrimary{ min-height: 220px; }
.scuiPanelMetrics{ padding: 16px; }

/* Verdict */
.scuiVerdict{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--txt);
  text-shadow: 0 1px 10px rgba(0,0,0,0.10);
}

.scuiVerdictSub{
  margin-top: 6px;
  color: rgba(86,88,94,0.92);
  line-height: 1.45;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Hint box */
.scuiHints{
  margin-top: 12px;
  color: rgba(86,88,94,0.92);
  line-height: 1.45;
  padding: 12px 12px;
  border-radius: 14px;

  border: 1px dashed rgba(86,88,94,0.22);
  background: rgba(255,255,255,0.32);

  overflow-wrap: anywhere;
  font-weight: 600;
}

/* Actions */
.scuiActions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.scuiBtnSmall{
  min-width: 0 !important;
  padding: 10px 14px !important;
  font-size: 14px;
}

.scuiLink{
  color: rgba(86,88,94,0.95);
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

/* Metrics cards */
.scuiMetric{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(245,245,245,0.55);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.12);
  position: relative;
  margin-bottom: 12px;
}

.scuiMetric:last-child{ margin-bottom: 0; }

.scuiMetricLabel{
  font-weight: 900;
  color: rgba(86,88,94,0.95);
  letter-spacing: .01em;
}

.scuiMetricValue{
  margin-top: 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--txt);
  text-shadow: 0 1px 10px rgba(0,0,0,0.10);
  overflow-wrap: anywhere;
}

.scuiMetricNote{
  margin-top: 6px;
  color: rgba(86,88,94,0.88);
  font-size: 13px;
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* Key/Value list in card look */
.scuiKV{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.scuiKVRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 8px 10px;
  border-radius: 12px;

  border: 1px solid rgba(86,88,94,0.14);
  background: rgba(255,255,255,0.42);

  box-shadow:
    0 10px 20px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

.scuiKVKey{
  font-weight: 900;
  color: rgba(86,88,94,0.95);
  flex: 0 0 auto;
}

.scuiKVVal{
  text-align: right;
  font-weight: 900;
  color: rgba(46,46,52,0.98);
  overflow-wrap: anywhere;
  min-width: 0;
}

.scuiKVVal a{
  color: rgba(86,88,94,0.95);
  text-decoration: underline;
  font-weight: 900;
}

/* Pills */
.scuiPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(86,88,94,0.20);
  background: rgba(255,255,255,0.50);
  font-weight: 900;
  line-height: 1.1;
}

.scuiPill.is-bad{
  background: rgba(86,88,94,0.85);
  border-color: rgba(86,88,94,0.85);
  color: #fff;
}

/* Details area under the details button */
.scuiDetailsArea{
  margin-top: 12px;
}

/* Accordion */
.scuiAccordionList{
  display: grid;
  gap: 12px;
}

.scuiAccordion{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(245,245,245,0.55);
  box-shadow: 0 12px 30px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.12);
  overflow: hidden;
}

.scuiAccordion summary{
  list-style: none;
  cursor: pointer;
  padding: 14px;
  font-weight: 900;
  color: rgba(86,88,94,0.95);
  background: rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  user-select: none;
}

.scuiAccordion summary::-webkit-details-marker{
  display: none;
}

.scuiAccordion summary::after{
  content: "+";
  float: right;
  font-weight: 900;
  opacity: 0.9;
}

.scuiAccordion[open] summary::after{
  content: "–";
}

.scuiAccordionBody{
  padding: 12px 14px 14px;
}

/* Footer */
.scuiFooter{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  padding: 10px 16px;
  background: var(--panelAlt);
  border-top: 1px solid var(--border);
}

.scuiFootnote{
  color: rgba(86,88,94,0.92);
  font-size: 13px;
  overflow-wrap: anywhere;
  font-weight: 800;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scuiBtn, .scuiDrawer, .scuiTab{ transition: none; }
  .scuiTrigger .pulse{ animation: none; }
}