/* ============================================================
   GS DocSeva — gs-theme.css
   Master Design System: tokens, base, layout, nav, footer,
   hero, upload, workspace, SEO sections, components.
   Version: 1.0
   ============================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Dark-mode palette (default) */
  --ink:      #0B1220;
  --ink-2:    #0F1830;
  --panel:    #121C33;
  --panel-2:  #182446;
  --line:     rgba(148, 168, 214, 0.16);
  --signal:   #4E8CFF;
  --signal-2: #7FB2FF;
  --stamp:    #E7484A;
  --mist:     #93A2C2;
  --mist-2:   #5E6D91;
  --white:    #F5F7FC;
  --green:    #10B981;

  /* Typography */
  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* Shadows */
  --shadow-3d:   0 25px 50px -12px rgba(0,0,0,0.7), 0 0 25px rgba(78,140,255,0.15);
  --shadow-deep: 0 30px 60px -20px rgba(2,6,20,0.7);
  --shadow-soft: 0 12px 30px -12px rgba(2,6,20,0.5);
}

/* Light-mode overrides */
body.light {
  --ink:      #F6F8FC;
  --ink-2:    #EBF0F7;
  --panel:    #FFFFFF;
  --panel-2:  #F0F4FC;
  --line:     #DCE3F0;
  --white:    #0F172A;
  --mist:     #475569;
  --mist-2:   #64748B;
  --signal:   #2563EB;
  --signal-2: #1D4ED8;
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ── 3. AMBIENT BACKGROUND ──────────────────────────────────── */
.grain-field {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(78,140,255,0.18), transparent 60%),
    radial-gradient(40% 30% at 10% 10%, rgba(231,72,74,0.12), transparent 60%),
    var(--ink);
}

.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.18;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── 4. NAVIGATION ──────────────────────────────────────────── */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 74px;
  background: rgba(11,18,32,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

body.light #site-nav { background: rgba(246,248,252,0.9); }

.nav-container {
  max-width: 1280px; margin: 0 auto; height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}

.nav-logo { height: 52px; width: auto; object-fit: contain; }

.nav-links {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0;
}

.nav-links a {
  padding: 6px 14px; border-radius: 8px;
  color: var(--mist); font-weight: 700; font-size: 13px;
  transition: all 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: rgba(78,140,255,0.12);
}

/* Mobile Toggle & Navigation Drawer */
.mobile-toggle-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}
.mobile-toggle-btn span {
  display: block; width: 20px; height: 2px;
  background-color: var(--white);
  transition: all 0.3s ease;
}

.mobile-nav-drawer {
  position: fixed; top: 0; right: -300px; width: 280px; height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 2500;
  padding: 20px;
  box-shadow: var(--shadow-deep);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.mobile-nav-drawer.active { right: 0; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.drawer-title { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--white); }
.drawer-close {
  background: transparent; border: none; color: var(--mist);
  font-size: 24px; cursor: pointer; line-height: 1;
}

.drawer-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.drawer-links a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--mist); font-weight: 600; font-size: 14px;
  transition: all 0.2s ease;
}
.drawer-links a:hover,
.drawer-links a.active {
  color: var(--white); background: rgba(78,140,255,0.14);
}

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2400; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.active { opacity: 1; pointer-events: auto; }

/* Dark Mode Toggle — fixed button */
.dark-mode-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 1100;
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel); color: var(--signal-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px;
  transition: background 0.2s ease;
}

.dark-mode-toggle:hover { background: var(--panel-2); }

/* ── 5. STANDARD PAGE CONTAINER ─────────────────────────────── */
.tool-container {
  max-width: 1280px;
  margin: 85px auto 0;
  padding: 12px 20px;
  perspective: 1200px;
}

/* First-fold wrapper guarantees clean above-the-fold view */
.first-fold-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ── 6. HERO BANNER — DUAL 3D ───────────────────────────────── */
.hero-banner-dual {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-3d);
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-content-center { text-align: center; }

/* 3D Side Visual Cards */
.hero-3d-visual {
  width: 150px; height: 115px;
  border-radius: 16px;
  background: #0F172A;
  border: 1.5px solid var(--signal);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.hero-3d-visual.left-card  { transform: rotateY(-8deg) rotateX(4deg); }
.hero-3d-visual.right-card { transform: rotateY(8deg)  rotateX(4deg); border-color: var(--green); }
.hero-3d-visual:hover      { transform: rotateY(0deg)  rotateX(0deg) scale(1.03); }

/* HUD Specs Panel (right card content) */
.specs-hud-gfx {
  width: 100%; height: 100%; padding: 10px;
  display: flex; flex-direction: column; justify-content: space-around;
  font-family: var(--mono); font-size: 9px;
}

.specs-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed var(--line); padding-bottom: 4px;
}

.specs-val       { color: #38BDF8; font-weight: 700; }
.specs-val.green { color: var(--green); }

/* HUD Badge (bottom-right corner of visual cards) */
.hud-badge-tag {
  position: absolute; bottom: 5px; right: 5px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 800;
  color: var(--green);
  background: rgba(16,185,129,0.2);
  border: 1px solid var(--green);
  padding: 2px 5px; border-radius: 4px;
}

/* Scan laser animation (for visual cards that need it) */
.scan-laser-line {
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #38BDF8, #EF4444, transparent);
  box-shadow: 0 0 12px 2px #38BDF8;
  animation: gs-laser 2s ease-in-out infinite;
}

@keyframes gs-laser {
  0%   { top: 5%; }
  50%  { top: 90%; }
  100% { top: 5%; }
}

/* ── 7. EYEBROW BADGE ───────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(78,140,255,0.08);
  color: var(--signal-2);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  margin-bottom: 8px;
}

.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--stamp);
  animation: gs-blink 1.6s infinite;
}

@keyframes gs-blink { 50% { opacity: 0.3; } }

/* ── 8. UPLOAD AREA ─────────────────────────────────────────── */
.front-center-upload-shell {
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
}

.upload-area-front {
  border: 2px dashed var(--signal);
  background: var(--panel);
  border-radius: 24px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-3d);
  transition: all 0.3s ease;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.upload-area-front:hover {
  border-color: var(--signal-2);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(78,140,255,0.25);
}

.upload-area-front.drag-over {
  border-color: var(--green);
  background: rgba(16,185,129,0.08);
  transform: scale(1.02);
  box-shadow: 0 0 35px rgba(16,185,129,0.35);
}

.upload-icon { font-size: 48px; margin-bottom: 10px; }

.upload-title {
  font-size: 20px; font-weight: 800;
  font-family: var(--display); color: var(--white);
}

.upload-sub {
  font-size: 12.5px; color: var(--mist);
  margin: 4px 0 18px;
}

/* ── 9. BUTTONS ─────────────────────────────────────────────── */
.btn-action {
  background: linear-gradient(135deg, var(--signal) 0%, #2451D6 100%);
  color: #fff;
  border: none; padding: 11px 24px; border-radius: 12px;
  font-weight: 700; cursor: pointer;
  font-family: var(--display); font-size: 13.5px;
  transition: all 0.25s ease;
  box-shadow: 0 10px 20px -4px rgba(78,140,255,0.4);
  text-decoration: none;
  display: inline-block;
}

.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -3px rgba(78,140,255,0.6);
}

.btn-action:active { transform: scale(0.98); }

.btn-action.green {
  background: linear-gradient(135deg, var(--green) 0%, #059669 100%);
  box-shadow: 0 10px 20px -4px rgba(16,185,129,0.4);
}

.btn-action.green:hover { box-shadow: 0 14px 28px -3px rgba(16,185,129,0.6); }

.btn-secondary {
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--signal-2); padding: 8px 16px; border-radius: 10px;
  font-weight: 700; cursor: pointer; font-size: 12.5px;
  transition: all 0.2s ease;
}

.btn-secondary:hover { border-color: var(--signal); background: var(--panel); }

/* ── 10. POST-UPLOAD WORKSPACE ──────────────────────────────── */
.workspace-shell {
  display: none; width: 100%; max-width: 980px; margin: 0 auto;
}

.workspace-shell.active { display: block; }

.compact-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--line);
  padding: 14px 20px; border-radius: 16px; margin-bottom: 18px;
}

.compact-header-title { font-weight: 700; color: var(--white); font-size: 14.5px; }

/* ── 11. TOOL CARDS ─────────────────────────────────────────── */
.tool-card-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px; padding: 22px;
  box-shadow: var(--shadow-3d);
}

/* Image / PDF preview grid */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-height: 440px; overflow-y: auto;
  padding: 16px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 20px;
}

.item-card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.item-card:hover { transform: translateY(-3px); border-color: var(--signal); }

.item-card img {
  width: 100%; height: 140px; object-fit: contain;
  background: #fff; border-radius: 8px; border: 1px solid var(--line);
}

.item-card-footer {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  margin-top: 4px;
}

.item-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--mist); max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn-remove-item {
  background: rgba(231,72,74,0.15); border: 1px solid var(--stamp);
  color: var(--stamp); padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; cursor: pointer;
}

.btn-remove-item:hover { background: var(--stamp); color: #fff; }

/* File list item (for PDF merge style lists) */
.file-list { display: flex; flex-direction: column; gap: 12px; }

.file-item {
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 16px;
  display: flex; align-items: center; gap: 16px;
}

.file-preview {
  width: 50px; height: 65px; background: #07101f;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); flex-shrink: 0;
}

.file-info { flex-grow: 1; overflow: hidden; }

.file-name {
  font-family: var(--mono); font-size: 13.5px; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}

.file-size { font-size: 12px; color: var(--mist); }

/* ── 12. PROGRESS OVERLAY ───────────────────────────────────── */
.progress-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(11,18,32,0.85); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}

.progress-overlay.active { display: flex; }

.progress-dialog {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px; text-align: center;
  max-width: 380px; box-shadow: var(--shadow-3d);
}

.spinner {
  width: 48px; height: 48px; margin: 0 auto 16px;
  border: 4px solid var(--line); border-top-color: var(--signal);
  border-radius: 50%;
  animation: gs-spin 0.8s linear infinite;
}

@keyframes gs-spin { 100% { transform: rotate(360deg); } }

/* ── 13. SEO SECOND-FOLD CONTENT ────────────────────────────── */
.seo-second-scroll {
  margin-top: 22vh;
  padding-top: 50px;
  border-top: 1px solid var(--line);
}

.seo-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; margin-bottom: 20px;
}

.seo-card h2 {
  color: var(--signal-2); font-family: var(--display); font-size: 20px;
  border-left: 4px solid var(--signal); padding-left: 12px;
  margin: 0 0 14px;
}

.seo-card h3 { font-size: 16px; color: var(--white); margin: 20px 0 8px; }

.seo-card p,
.seo-card li { color: var(--mist); font-size: 13.5px; line-height: 1.7; }

/* Use-cases grid */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 16px;
}

.use-case-box {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px;
}

.use-case-box h4 { color: var(--white); font-size: 14px; margin-bottom: 4px; }

.use-case-box p { color: var(--mist); font-size: 12px; margin: 0; line-height: 1.5; }

/* Comparison / spec table */
.table-wrap { overflow-x: auto; margin-top: 14px; }

table.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.spec-table th {
  background: var(--panel-2); color: var(--signal-2);
  padding: 10px 12px; border: 1px solid var(--line); text-align: left;
}

.spec-table td { padding: 10px 12px; border: 1px solid var(--line); color: var(--mist); }

.spec-table td strong.good { color: var(--green); }

/* FAQ accordion */
.faq-container { max-width: 860px; margin: 0 auto; display: grid; gap: 8px; }

.faq-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}

.faq-question {
  padding: 12px 16px; font-weight: 700; cursor: pointer;
  display: flex; justify-content: space-between;
  color: var(--white); font-size: 13.5px;
  user-select: none;
}

.faq-question:hover { background: rgba(78,140,255,0.06); }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--panel-2);
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 12px 16px;
  color: var(--mist); font-size: 12.5px;
}

.faq-item.open .faq-question .faq-icon { transform: rotate(45deg); }

.faq-icon { transition: transform 0.2s ease; font-style: normal; }

/* ── 14. TRUST PILLS ────────────────────────────────────────── */
.trust-pill {
  background: rgba(78,140,255,0.08);
  border: 1px solid var(--line); color: var(--signal-2);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: inline-block; margin-top: 8px; margin-right: 6px;
}

.footer-trust-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── 15. FOOTER ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 20px 20px;
  background: var(--ink-2);
  margin-top: 60px;
}

.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 24px;
}

.footer-brand-desc { color: var(--mist); font-size: 12px; margin-bottom: 6px; }

.footer-contact-mail {
  display: inline-block; margin-top: 8px;
  color: var(--signal-2); font-weight: 700;
  font-family: var(--mono); font-size: 12px;
}

.footer-social-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mist); text-decoration: none;
  font-size: 12px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 10px; margin-top: 10px;
  transition: all 0.25s ease;
}

.footer-social-link:hover {
  border-color: #E1306C;
  color: var(--white);
  box-shadow: 0 0 14px rgba(225, 48, 108, 0.25);
  transform: translateY(-1px);
}

/* ── BATCH PROCESSING QUEUE ───────────────────────────────── */
.batch-queue-container {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-3d);
}

.batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.batch-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
}

.batch-count-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--signal-2);
  background: rgba(78, 140, 255, 0.12);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}

.batch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
}

.batch-item {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

.batch-item:hover {
  border-color: var(--signal);
}

.batch-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.batch-item-info {
  overflow: hidden;
}

.batch-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.batch-item-size {
  font-size: 11px;
  color: var(--mist);
  font-family: var(--mono);
}

.batch-item-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-align: center;
}

.batch-item-status.queued {
  color: var(--mist);
  background: rgba(148, 163, 184, 0.12);
}

.batch-item-status.processing {
  color: var(--signal-2);
  background: rgba(78, 140, 255, 0.16);
  animation: gs-blink 1.2s infinite;
}

.batch-item-status.ready {
  color: #10B981;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.batch-item-status.error {
  color: var(--stamp);
  background: rgba(239, 68, 68, 0.16);
}

.batch-btn-remove {
  background: none;
  border: none;
  color: var(--mist);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.batch-btn-remove:hover {
  color: var(--stamp);
  background: rgba(239, 68, 68, 0.12);
}

.batch-actions-bar {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn-zip-download {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  font-family: var(--display);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px -4px rgba(16, 185, 129, 0.4);
  transition: all 0.25s ease;
}

.btn-zip-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -3px rgba(16, 185, 129, 0.6);
}

/* ── RECENT ACTIVITY MODULE ───────────────────────────────── */
.recent-activity-container {
  margin-bottom: 24px;
}
.recent-activity-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--shadow-3d);
}
.recent-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.btn-clear-history {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--mist);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-clear-history:hover {
  color: var(--stamp);
  border-color: var(--stamp);
  background: rgba(239, 68, 68, 0.12);
}
.recent-activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.recent-activity-item {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
}
.recent-activity-item:hover {
  border-color: var(--signal);
  transform: translateY(-1px);
}
.recent-activity-info {
  overflow: hidden;
}
.recent-activity-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--signal-2);
  background: rgba(78, 140, 255, 0.12);
  border: 1px solid rgba(78, 140, 255, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.recent-activity-filename {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.recent-activity-meta {
  font-size: 10.5px;
  color: var(--mist);
  font-family: var(--mono);
  margin-top: 2px;
}
.recent-activity-reopen {
  flex-shrink: 0;
  background: rgba(78, 140, 255, 0.12);
  border: 1px solid var(--line);
  color: var(--signal-2);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.recent-activity-reopen:hover {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}

.footer-column h3 {
  font-size: 13px; color: var(--white); margin-bottom: 8px;
  font-family: var(--display);
}

.footer-column a {
  display: block; color: var(--mist);
  font-size: 12.5px; padding: 3px 0;
  transition: color 0.2s ease;
}

.footer-column a:hover { color: var(--signal-2); }

.footer-bottom {
  text-align: center; color: var(--mist-2);
  font-size: 11.5px; margin-top: 24px;
  border-top: 1px solid var(--line); padding-top: 14px;
}

/* ── 16. SECTION HEADINGS ───────────────────────────────────── */
.section-head { margin: 20px 0 14px; text-align: center; }
.section-head h2 { font-size: 22px; color: var(--white); letter-spacing: -0.5px; }
.section-head p  { color: var(--mist); font-size: 13px; margin-top: 2px; }

/* ── 17. ESTIMATION / STATS BOX ─────────────────────────────── */
.estimation-card-box {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin: 16px 0; text-align: center;
}

.estimation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }

.est-box {
  background: var(--panel-2); padding: 10px; border-radius: 10px; border: 1px solid var(--line);
}

.est-box .lbl { font-size: 11px; color: var(--mist); font-weight: 700; text-transform: uppercase; }
.est-box .val { font-size: 15px; font-weight: 800; font-family: var(--mono); color: var(--white); margin-top: 2px; }
.est-box.reduced .val { color: var(--green); }

.savings-badge {
  background: rgba(16,185,129,0.15); border: 1px solid var(--green); color: var(--green);
  font-size: 12.5px; font-weight: 800; padding: 6px; border-radius: 8px; font-family: var(--mono);
}

/* ── 18. BANNER / ALERT ─────────────────────────────────────── */
.alert-banner {
  display: none; margin-top: 12px; padding: 10px; border-radius: 10px;
  background: rgba(239,68,68,0.15); border: 1px solid var(--stamp);
  color: #fca5a5; font-weight: 700; font-size: 12px; text-align: center;
}

.alert-banner.visible { display: block; }

.alert-banner.success {
  background: rgba(16,185,129,0.15); border-color: var(--green); color: var(--green);
}

/* ── 19. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .mobile-toggle-btn { display: flex; }

  .hero-banner-dual {
    display: flex; flex-direction: column;
    text-align: center; padding: 18px 14px;
  }

  .hero-3d-visual { display: none !important; }

  .tool-container { margin-top: 78px; padding: 8px 12px; }

  .seo-second-scroll { margin-top: 60px; padding-top: 30px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  .items-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .use-cases-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .estimation-grid { grid-template-columns: 1fr; }
}