/* ══════════════════════════════════════════════════════════════
   LIQUID GLASS — Toolbox by Renz Luigi
   Import AFTER global.css and aio-tool.css
   Applies to: index.html, aio-tool.html
   ══════════════════════════════════════════════════════════════ */

/* ── SF Pro font stack (iOS 26 style) ── */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

  --liq-bg:           #0d0c18;
  --liq-glass:        rgba(255,255,255,0.07);
  --liq-glass-hover:  rgba(255,255,255,0.12);
  --liq-border:       rgba(255,255,255,0.14);
  --liq-border-hover: rgba(255,255,255,0.28);
  --liq-blur:         blur(20px);
  --liq-blur-sm:      blur(12px);

  --liq-text:         rgba(240,237,250,1);
  --liq-text-muted:   rgba(200,190,240,0.6);
  --liq-text-hint:    rgba(180,165,255,0.42);

  --liq-orb1: rgba(85,50,195,0.45);
  --liq-orb2: rgba(22,80,210,0.35);
  --liq-orb3: rgba(165,50,130,0.25);
}

/* ── Dark background (force, overrides light mode) ── */
body {
  background: var(--liq-bg) !important;
  color: var(--liq-text) !important;
}

/* ── Animated background orbs ── */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform;
}

.bg-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--liq-orb1), transparent 70%);
  top: -160px; left: -120px;
  animation: orbDrift1 11s ease-in-out infinite alternate;
}

.bg-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--liq-orb2), transparent 70%);
  bottom: -120px; right: -80px;
  animation: orbDrift2 14s ease-in-out infinite alternate;
}

.bg-orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--liq-orb3), transparent 70%);
  top: 42%; left: 52%;
  animation: orbDrift3 17s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(55px,40px) scale(1.1); }
}
@keyframes orbDrift2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-45px,-55px) scale(0.94); }
}
@keyframes orbDrift3 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(38px,-45px) scale(1.07); }
}

/* ── Ensure all content sits above orbs ── */
.page-container {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════ */

header h1 {
  color: var(--liq-text) !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
}
header p          { color: var(--liq-text-muted) !important; }
.section-label    { color: var(--liq-text-hint) !important; }
.tool-name        { color: var(--liq-text) !important; }
.tool-desc        { color: var(--liq-text-muted) !important; }
.card-hint        { color: var(--liq-text-muted) !important; }
.results-title    { color: var(--liq-text) !important; }
.generate-hint    { color: var(--liq-text-hint) !important; }
.back-link        { color: var(--liq-text-hint) !important; }
.back-link:hover  { color: var(--liq-text-muted) !important; }

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */

.card {
  background: var(--liq-glass) !important;
  border: 0.5px solid var(--liq-border) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
  border-radius: 18px !important;
  backdrop-filter: var(--liq-blur);
  -webkit-backdrop-filter: var(--liq-blur);
}

/* ── Tool card (index.html) ── */
.tool-card {
  background: var(--liq-glass) !important;
  border: 0.5px solid var(--liq-border) !important;
  border-top-color: rgba(255,255,255,0.2) !important;
  border-radius: 16px !important;
  backdrop-filter: var(--liq-blur);
  -webkit-backdrop-filter: var(--liq-blur);
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
}
.tool-card:hover {
  background: var(--liq-glass-hover) !important;
  border-color: var(--liq-border-hover) !important;
  transform: translateY(-2px);
}
.tool-card:active {
  transform: scale(0.98) !important;
  transition-duration: 0.08s !important;
}

/* ── Tool tag pill ── */
.tool-tag {
  background: rgba(110,80,215,0.18) !important;
  border: 0.5px solid rgba(140,110,255,0.25) !important;
  color: rgba(185,160,255,0.75) !important;
}
.tool-arrow { color: rgba(185,165,255,0.38) !important; }

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */

button.btn-primary,
a.btn-primary {
  background: rgba(255,255,255,0.1) !important;
  border: 0.5px solid rgba(255,255,255,0.22) !important;
  border-top-color: rgba(255,255,255,0.35) !important;
  color: var(--liq-text) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
button.btn-primary:hover,
a.btn-primary:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(70,50,180,0.28) !important;
}
button.btn-primary:active,
a.btn-primary:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}
button.btn-primary:disabled {
  opacity: 0.35 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════
   MODE TABS (aio-tool)
   ═══════════════════════════════════════ */

.mode-tabs {
  background: var(--liq-glass) !important;
  border: 0.5px solid var(--liq-border) !important;
  border-radius: 16px !important;
  backdrop-filter: var(--liq-blur-sm);
  -webkit-backdrop-filter: var(--liq-blur-sm);
}

.mode-tab {
  color: rgba(200,185,255,0.48) !important;
  border-radius: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.mode-tab:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(225,215,255,0.82) !important;
}
.mode-tab.active {
  background: rgba(255,255,255,0.13) !important;
  border: 0.5px solid rgba(255,255,255,0.24) !important;
  color: var(--liq-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(90,70,200,0.22) !important;
}

/* ═══════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════ */

select {
  background-color: rgba(255,255,255,0.07) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a090cc' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: var(--liq-text) !important;
}
select option {
  background: #1a1828;
  color: var(--liq-text);
}
select:focus {
  border-color: rgba(140,110,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(100,80,220,0.18) !important;
}

.selector-group label { color: var(--liq-text-hint) !important; }

/* ── Upload zone ── */
.upload-zone {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.04) !important;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: rgba(140,110,255,0.5) !important;
  background: rgba(110,80,215,0.1) !important;
}
.upload-zone-text       { color: var(--liq-text-muted) !important; }
.upload-zone-text strong{ color: var(--liq-text) !important; }

/* ── Optional label ── */
.optional-label { color: var(--liq-text-hint) !important; }

/* ═══════════════════════════════════════
   TABLE
   ═══════════════════════════════════════ */

.table-wrap {
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
}
thead th {
  background: rgba(255,255,255,0.06) !important;
  color: var(--liq-text-hint) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
tbody tr { border-bottom-color: rgba(255,255,255,0.07) !important; }
tbody tr:hover { background: rgba(255,255,255,0.05) !important; }
tbody td { color: var(--liq-text) !important; }
.td-hint { color: rgba(180,165,255,0.42) !important; }
.more-rows {
  color: var(--liq-text-hint) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Stat boxes ── */
.stat-box {
  background: rgba(255,255,255,0.06) !important;
}
.stat-box .stat-val { color: var(--liq-text) !important; }
.stat-box .stat-lbl { color: var(--liq-text-hint) !important; }

/* ═══════════════════════════════════════
   MESSAGES & BADGES
   ═══════════════════════════════════════ */

.msg.info  { background: rgba(22,80,210,0.18) !important;  color: rgba(140,185,255,0.9) !important; }
.msg.warn  { background: rgba(180,130,20,0.18) !important; color: rgba(240,210,100,0.9) !important; }
.msg.error { background: rgba(160,40,40,0.22) !important;  color: rgba(245,160,160,0.9) !important; }

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */

#footer footer,
footer {
  color: rgba(180,165,255,0.32) !important;
}

/* ═══════════════════════════════════════
   FADE-UP ENTRANCE ANIMATIONS
   ═══════════════════════════════════════ */

@keyframes liquidFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

header                                { animation: liquidFadeUp 0.45s 0.02s ease both; }
.container > *:nth-child(1)           { animation: liquidFadeUp 0.45s 0.07s ease both; }
.container > *:nth-child(2)           { animation: liquidFadeUp 0.45s 0.13s ease both; }
.container > *:nth-child(3)           { animation: liquidFadeUp 0.45s 0.19s ease both; }
.container > *:nth-child(4)           { animation: liquidFadeUp 0.45s 0.25s ease both; }
.container > *:nth-child(5)           { animation: liquidFadeUp 0.45s 0.31s ease both; }
.container > *:nth-child(6)           { animation: liquidFadeUp 0.45s 0.37s ease both; }
.container > *:nth-child(7)           { animation: liquidFadeUp 0.45s 0.43s ease both; }
.container > *:nth-child(n+8)         { animation: liquidFadeUp 0.45s 0.48s ease both; }