/* ══════════════════════════════════════════════
   Theme: Glass Premium
   Apple Liquid Glass — honest web approximation
   Based on taste-skill Appendix C
   ══════════════════════════════════════════════ */

:root {
  /* ── Background gradient ── */
  --bg-start:           #e8e0ff;
  --bg-mid:             #d8e2ff;
  --bg-end:             #e4f5ea;

  /* ── Text hierarchy ── */
  --text-primary:       #1a1a2e;
  --text-secondary:     #6b6b82;
  --text-dim:           #9b9bb0;

  /* ── Semantic ── */
  --green:              #2c9a4f;
  --yellow:             #c4950a;
  --red:                #d94a3f;
  --accent:             #5b7cfa;

  /* ── Provider accents ── */
  --acc-opencode:       #5b7cfa;
  --acc-deepseek:       #2c9a4f;
  --acc-new-api:        #f59e0b;

  /* ── Orb colors ── */
  --orb-1-bg:           #c4b5fd;
  --orb-2-bg:           #93c5fd;
  --orb-3-bg:           #a7f3d0;

  /* ── Bar track ── */
  --bar-track-bg:       rgba(0,0,0,0.04);

  /* ── Divider ── */
  --divider-bg:         rgba(0,0,0,0.03);

  /* ── Footer border ── */
  --footer-border:      rgba(0,0,0,0.03);

  /* ── Glass tokens (outer) ── */
  --glass-shadow:       0 18px 60px rgba(90,60,160,0.08), 0 1px 4px rgba(0,0,0,0.03);
  --glass-shadow-hover: 0 24px 72px rgba(90,60,160,0.12), 0 2px 8px rgba(0,0,0,0.05);

  /* ── Error bg ── */
  --error-bg:           rgba(217,74,63,0.06);
  --error-border:       rgba(217,74,63,0.12);

  /* ── Skeleton ── */
  --skel-shine:         rgba(0,0,0,0.04);
  --skel-shine-mid:     rgba(0,0,0,0.015);
}

/* ════════════════════════ Apple Liquid Glass Card ════════════════════════ */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    var(--glass-shadow);
}

/* Liquid glass highlight glow (inner radial) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 0%, rgb(255 255 255 / .55), transparent 34%),
    linear-gradient(90deg, rgb(255 255 255 / .18), transparent 42%, rgb(255 255 255 / .14));
  pointer-events: none;
}

/* Liquid glass inner border */
.card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / .14);
  pointer-events: none;
}

.card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    var(--glass-shadow-hover);
  transform: translateY(-3px);
}

/* ════════════════════════ Skeleton ════════════════════════ */
.skeleton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    var(--glass-shadow);
}

/* ════════════════════════ Guide ════════════════════════ */
.guide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    var(--glass-shadow);
}

/* ════════════════════════ Buttons ════════════════════════ */
.btn-outline {
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .40),
    var(--glass-shadow);
  position: relative;
  isolation: isolate;
}
.btn-outline:hover {
  background:
    linear-gradient(135deg, rgb(255 255 255 / .45), rgb(255 255 255 / .12)),
    rgb(255 255 255 / .18);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .40),
    var(--glass-shadow-hover);
}

/* ════════════════════════ Theme menu glass ════════════════════════ */
.theme-menu {
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .35), rgb(255 255 255 / .10)),
    rgb(255 255 255 / .18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .30),
    0 12px 40px rgb(0 0 0 / .10);
}

/* ════════════════════════ Status tag glass (ok state only) ════════════════════════ */
.status-tag.ok {
  background: linear-gradient(135deg, rgb(46 155 79 / .10), rgb(46 155 79 / .04));
  border: 1px solid rgb(46 155 79 / .12);
}
.status-tag.error {
  border: 1px solid rgb(217 74 63 / .12);
}