@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{
  --bg: #0b0f14;
  --panel: #121922;
  --panel-2: #17202b;
  --line: #23303d;
  --text: #e7ecf1;
  --muted: #7c8894;
  --amber: #e8a33d;
  --teal: #2fa39a;
  --red: #d9534f;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* radius scale — radius-full reserved for pills/segmented controls only */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/* Shared button system — used by every tool in the dark theme */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
  padding:10px 20px; min-height:40px; border-radius:var(--radius-md); border:none;
  font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer;
  transition:background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.btn:disabled{ opacity:.4; cursor:default; }
.btn-primary{ background:var(--amber); color:var(--bg); }
.btn-primary:hover:not(:disabled){ background:#d4912e; }
.btn-secondary{ background:rgba(255,255,255,0.08); color:var(--text); }
.btn-secondary:hover:not(:disabled){ background:rgba(255,255,255,0.14); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  margin:0; padding:0; min-height:100%;
  background:
    radial-gradient(circle at 15% 10%, rgba(47,163,154,0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(232,163,61,0.06), transparent 45%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100%; display:flex; flex-direction:column; align-items:center;
  padding:48px 16px 64px;
}
header{ text-align:center; margin-bottom:36px; width:100%; }
.brand{ font-family:var(--mono); font-weight:600; font-size:18px; letter-spacing:0.06em; }
.brand span{ color:var(--amber); }
.sub{ font-size:12px; color:var(--muted); font-family:var(--mono); margin-top:4px; }
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px; width:100%; max-width:700px;
}
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; position:relative; overflow:hidden;
  text-decoration:none; color:var(--text);
  transition:border-color .2s, transform .15s;
}
.card:hover{ border-color:var(--teal); transform:translateY(-2px); }
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line); transition:background .3s;
}
.card:hover::before{ background:var(--teal); }
.tool-name{ font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:0.04em; }
.tool-name span{ color:var(--amber); }
.tool-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:6px; }
footer{ max-width:560px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:10.5px; margin-top:32px; line-height:1.6; }
.hidden{ display:none !important; }

/* Shared dropzone — used by Rachna, Sankshep, Badhai */
.dropzone{
  border:2px dashed rgba(255,255,255,0.15); border-radius:var(--radius-md);
  padding:1rem 1.5rem; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
  font-size:0.82rem; color:var(--muted);
}
.dropzone:hover,.dropzone.dragover{border-color:var(--amber);color:var(--amber);background:rgba(232,163,61,0.04)}
.dropzone:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Shared error banner */
.error{
  background:rgba(217,83,79,0.1); border:1px solid rgba(217,83,79,0.3);
  border-radius:var(--radius-md); padding:0.75rem 1rem;
  font-size:0.82rem; color:var(--red); margin-top:0.75rem; display:none;
}
.error.show{display:block}