/* ============================================
   Sneakyram Code Vault – Minimal Modern
   ============================================ */

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

:root {
  --bg:          #fafbfc;
  --white:       #ffffff;
  --border:      #e4e8ee;
  --border-h:    #d0d5dd;
  --text:        #1a1d26;
  --text2:       #555d6e;
  --muted:       #8c93a1;
  --accent:      #6c5ce7;
  --accent-l:    rgba(108,92,231,.07);
  --accent-gl:   rgba(108,92,231,.18);
  --green:       #00b894;
  --green-l:     rgba(0,184,148,.08);
  --red:         #e74c3c;
  --code-bg:     #1e1e2e;
  --grad:        linear-gradient(135deg,#6c5ce7,#a29bfe,#74b9ff);
  --r:           14px;
  --r-sm:        10px;
  --sh:          0 2px 12px rgba(0,0,0,.05);
  --sh-lg:       0 8px 30px rgba(0,0,0,.07);
  --tr:          .2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* ---------- Header ---------- */
.header {
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  height:60px;padding:0 1.5rem;
}
.logo {
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text);
}
.logo-icon {
  width:36px;height:36px;
  background:var(--grad);border-radius:10px;
  display:grid;place-items:center;
  font-size:18px;color:#fff;
  box-shadow:0 3px 12px var(--accent-gl);
}
.logo-text {
  font-size:1.15rem;font-weight:800;letter-spacing:-.02em;
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---------- Container ---------- */
.container {
  max-width:720px;
  margin:0 auto;
  padding:2rem 1.5rem 4rem;
}

/* ---------- Card ---------- */
.card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1.75rem;
  margin-bottom:1.25rem;
  box-shadow:var(--sh);
  transition:var(--tr);
}
.card:hover{box-shadow:var(--sh-lg);border-color:var(--border-h)}

/* ---------- Textarea ---------- */
textarea {
  width:100%;
  background:var(--code-bg);
  color:#cdd6f4;
  border:none;
  border-radius:var(--r-sm);
  padding:1.25rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;
  line-height:1.8;
  resize:vertical;
  min-height:220px;
  outline:none;
  transition:var(--tr);
}
textarea::placeholder{color:#6c7086}
textarea:focus{box-shadow:0 0 0 3px var(--accent-gl)}

/* ---------- Input ---------- */
input[type="text"] {
  width:100%;
  background:var(--bg);
  color:var(--text);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:.7rem 1rem;
  font-family:inherit;font-size:.9rem;
  outline:none;transition:var(--tr);
}
input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-gl)}
input[type="text"]::placeholder{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.7rem 1.5rem;font-size:.875rem;font-weight:600;
  font-family:inherit;border:none;border-radius:var(--r-sm);
  cursor:pointer;transition:var(--tr);text-decoration:none;
}
.btn:active{transform:scale(.97)}

.btn-primary {
  background:var(--grad);color:#fff;
  box-shadow:0 3px 16px var(--accent-gl);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--accent-gl)}

.btn-secondary {
  background:var(--bg);color:var(--text);
  border:1.5px solid var(--border);
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

.btn-green {
  background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;
  box-shadow:0 3px 16px rgba(0,184,148,.2);
}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,184,148,.25)}

.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- Result ---------- */
.result {
  margin-top:1rem;padding:1rem 1.2rem;
  border-radius:var(--r-sm);font-size:.88rem;
  display:none;animation:fadeUp .3s ease;
}
.result.show{display:block}
.result.ok{background:rgba(0,184,148,.08);border:1.5px solid rgba(0,184,148,.2);color:#00856a}
.result.err{background:rgba(231,76,60,.06);border:1.5px solid rgba(231,76,60,.2);color:var(--red)}
.result a{color:var(--accent);font-weight:600;word-break:break-all}

/* ---------- ID Badge ---------- */
.id-badge {
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:600;
  color:var(--accent);background:var(--accent-l);
  padding:.35rem .8rem;border-radius:var(--r-sm);
  border:1.5px solid rgba(108,92,231,.12);
  user-select:all;
}

/* ---------- Loaded Snippet ---------- */
.snippet-box {
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r);overflow:hidden;margin-top:1.25rem;
  box-shadow:var(--sh);
}
.snippet-top {
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.1rem;background:var(--bg);
  border-bottom:1px solid var(--border);
}
.snippet-top .name{font-size:.85rem;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:.4rem}
.copy-btn {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.4rem .85rem;font-size:.78rem;font-weight:600;
  font-family:inherit;background:var(--white);color:var(--text2);
  border:1.5px solid var(--border);border-radius:8px;
  cursor:pointer;transition:var(--tr);
}
.copy-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-l)}
.copy-btn.copied{color:var(--green);border-color:var(--green);background:var(--green-l)}

.snippet-code {
  padding:1.25rem 1.5rem;background:var(--code-bg);
  overflow-x:auto;
}
.snippet-code pre {
  margin:0;font-family:'JetBrains Mono',monospace;
  font-size:.83rem;line-height:1.8;color:#cdd6f4;
  white-space:pre-wrap;word-break:break-word;
}
.snippet-time {
  padding:.6rem 1.1rem;border-top:1px solid var(--border);
  font-size:.75rem;color:var(--muted);background:var(--bg);
}

/* ---------- Divider ---------- */
.divider {
  display:flex;align-items:center;gap:1rem;
  margin:1.75rem 0;color:var(--muted);font-size:.8rem;font-weight:500;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ---------- Toast ---------- */
.toast-box{position:fixed;top:76px;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.toast {
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:.7rem 1.1rem;font-size:.85rem;
  color:var(--text);box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:.4rem;
  animation:slideIn .3s ease;min-width:220px;
}
.toast.out{animation:slideOut .25s ease forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(50px)}}

/* ---------- Footer ---------- */
.footer{text-align:center;padding:2rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}
.footer a{color:var(--accent);text-decoration:none;font-weight:600}

/* ---------- Anim ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeUp .35s ease}

.spinner{width:16px;height:16px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .5s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .container{padding:1.5rem 1rem}
  .card{padding:1.25rem}
  .btn-row{flex-direction:column}
}