@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --bg:           #080810;
  --surface:      #0f0f1a;
  --surface-alt:  #161626;
  --border:       #1e1e35;
  --primary:      #f97316;
  --primary-glow: #f9731640;
  --accent:       #22d3ee;
  --accent-dim:   #22d3ee20;
  --text:         #f0f0ff;
  --muted:        #6b6b8a;
  --dim:          #3d3d5c;
  --success:      #10b981;
  --warning:      #fbbf24;
  --error:        #ef4444;

  /* aliases used by tool pages */
  --surface-border:  #1e1e35;
  --text-primary:    #f0f0ff;
  --text-secondary:  #a0a0bf;
  --text-tertiary:   #6b6b8a;
  --accent-primary:  #f97316;
  --accent-success:  #10b981;
  --accent-warn:     #fbbf24;
  --accent-error:    #ef4444;
  --text-success:    #10b981;
  --text-error:      #ef4444;

  --font-display: 'Syne', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'DM Sans', sans-serif;

  --sidebar-w: 220px;
  --radius:    8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, #ffffff08 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.app { display: flex; height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  flex-shrink: 0;
  overflow-y: auto;
}

.wordmark { padding: 0 20px 24px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.wordmark .clip { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--primary); letter-spacing: -0.5px; }
.wordmark .glyph { color: var(--muted); margin: 0 6px; }
.wordmark .brand { font-family: var(--font-display); font-weight: 400; font-size: 11px; color: var(--muted); text-transform: lowercase; letter-spacing: 0.5px; }

.nav-section { padding: 0 12px; margin-bottom: 4px; }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); padding: 0 8px 6px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  color: var(--muted); text-decoration: none;
  font-size: 13.5px; font-weight: 400;
  transition: all 0.15s; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--surface-alt); color: var(--text); }
.nav-item.active { background: var(--primary-glow); color: var(--primary); }
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.nav-item.active .dot { background: var(--primary); box-shadow: 0 0 6px var(--primary); }

.nav-divider { height: 1px; background: var(--border); margin: 12px 20px; }

.main { flex: 1; overflow-y: auto; padding: 40px 48px; display: flex; flex-direction: column; gap: 32px; }

.tool-header { display: flex; flex-direction: column; gap: 6px; }
.tool-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.tool-desc { color: var(--muted); font-size: 14px; }

.scanner-wrap { position: relative; }
.scanner-input {
  width: 100%; background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 52px 16px 20px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.scanner-input::placeholder { color: var(--dim); }
.scanner-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.scanner-input.resolving { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.scanner-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  bottom: 0; opacity: 0; transition: opacity 0.3s;
  border-radius: 0 0 var(--radius) var(--radius);
}
.scanner-wrap.focused::after { opacity: 1; animation: scan 1.5s linear infinite; }
@keyframes scan {
  0% { transform: scaleX(0); opacity: 0; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

.platform-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 20px; font-size: 12px; color: var(--muted); margin-top: 12px;
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s;
}
.platform-badge.visible { opacity: 1; transform: translateY(0); }
.platform-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.format-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.format-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; cursor: pointer;
  transition: all 0.15s; min-width: 120px;
}
.format-card:hover { border-color: var(--muted); background: var(--surface-alt); }
.format-card.selected { border-color: var(--primary); background: var(--primary-glow); box-shadow: 0 0 12px var(--primary-glow); }
.format-card .f-label { font-size: 13px; font-weight: 600; font-family: var(--font-display); }
.format-card .f-meta { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 3px; }

.btn-intercept {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px; background: var(--primary); color: #000;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: 1.5px; border: none; border-radius: var(--radius);
  cursor: pointer; transition: all 0.2s; text-transform: uppercase;
}
.btn-intercept:hover { background: #fb923c; box-shadow: 0 4px 20px var(--primary-glow); transform: translateY(-1px); }
.btn-intercept:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-intercept .glyph { font-size: 18px; }

.progress-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; display: none; }
.progress-wrap.active { display: block; }
.progress-stats { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 12px; display: flex; gap: 20px; flex-wrap: wrap; }
.progress-bar-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; transition: width 0.3s ease; box-shadow: 0 0 8px var(--primary-glow); }
.progress-filename { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.captured-card { background: var(--surface); border: 1px solid var(--success); border-radius: var(--radius); padding: 20px 24px; display: none; align-items: center; gap: 16px; }
.captured-card.active { display: flex; }
.captured-icon { font-size: 24px; color: var(--success); }
.captured-info .filename { font-family: var(--font-mono); font-size: 13px; }
.captured-info .path { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-top: 3px; }

.section-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }

.options-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.option-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.option-check input[type=checkbox] { accent-color: var(--primary); width: 14px; height: 14px; }

.clip-select { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--text); font-family: var(--font-body); font-size: 13px; outline: none; }
.clip-select:focus { border-color: var(--primary); }

.clip-input { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--text); font-family: var(--font-mono); font-size: 13px; outline: none; width: 100%; }
.clip-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }

.json-viewer { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.8; overflow-x: auto; max-height: 500px; overflow-y: auto; color: var(--text); }
.json-key { color: var(--accent); }
.json-str { color: var(--success); }
.json-num { color: var(--primary); }
.json-bool { color: var(--warning); }

.clip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.clip-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.clip-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; }
.clip-table tr:hover td { background: var(--surface-alt); }

.error-banner { background: #ef444420; border: 1px solid var(--error); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--error); display: none; }
.error-banner.active { display: block; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-success { background: #10b98120; color: var(--success); border: 1px solid var(--success); }
.badge-error { background: #ef444420; color: var(--error); border: 1px solid var(--error); }
.badge-accent { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }

.textarea-input { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; width: 100%; resize: vertical; min-height: 120px; }
.textarea-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { padding: 24px 20px; }
}