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

:root{
  --bg:#0d0d0d;
  --bg2:#141414;
  --bg3:#1a1a1a;
  --border:#2a2a2a;
  --text:#e4e4e4;
  --text2:#999;
  --text3:#666;
  --accent:#3b82f6;
  --accent2:#2563eb;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#eab308;
  --radius:10px;
  --radius2:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Fira Code','Cascadia Code',Consolas,monospace;
}

html{font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;line-height:1.6}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--border);
  background:var(--bg2);position:sticky;top:0;z-index:10
}
header a{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:1.05rem;letter-spacing:-.3px}
header a svg{color:var(--accent)}
header nav span{font-size:.78rem;color:var(--text3)}

main{flex:1;max-width:900px;width:100%;margin:0 auto;padding:40px 20px}
footer{text-align:center;padding:20px;border-top:1px solid var(--border);color:var(--text3);font-size:.75rem}

/* Editor */
.editor{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius2);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 4px 30px rgba(0,0,0,.4)
}
.editor-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;background:var(--bg3);
  border-bottom:1px solid var(--border)
}
.dots{display:flex;gap:6px}
.dots span{width:10px;height:10px;border-radius:50%}
.dots span:nth-child(1){background:#ef4444}
.dots span:nth-child(2){background:#eab308}
.dots span:nth-child(3){background:#22c55e}
.editor-title{font-size:.8rem;color:var(--text2);font-weight:500}
.limits{margin-left:auto;font-size:.7rem;color:var(--text3)}

.editor textarea{
  display:block;width:100%;min-height:420px;padding:20px 22px;
  background:var(--bg);color:var(--text);border:none;outline:none;
  font-family:var(--mono);font-size:.88rem;line-height:1.7;
  resize:vertical;tab-size:4
}
.editor textarea::placeholder{color:var(--text3)}
.editor textarea:focus{background:#0f0f0f}

.editor-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:var(--bg3);border-top:1px solid var(--border);
  font-size:.78rem;color:var(--text3)
}
.footer-left{display:flex;align-items:center;gap:16px}
.footer-right{display:flex;align-items:center;gap:10px}

/* Expiry dropdown */
.exp-select{display:flex;align-items:center;gap:6px}
.exp-select label{color:var(--text3);font-size:.73rem}
.exp-select select{
  padding:5px 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg);color:var(--text2);font-size:.73rem;
  font-family:var(--font);cursor:pointer;outline:none;
  appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center
}
.exp-select select:focus{border-color:var(--accent)}
.exp-select select option{background:var(--bg2);color:var(--text)}

/* Image button */
.img-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text2);font-size:.78rem;cursor:pointer;
  font-family:var(--font);transition:all .15s
}
.img-btn:hover{border-color:var(--accent);color:var(--accent)}
.img-btn svg{width:16px;height:16px}

#previews{display:flex;gap:6px;align-items:center}
#previews .thumb{width:28px;height:28px;border-radius:5px;object-fit:cover;border:1px solid var(--border)}
#previews .badge{font-size:.7rem;color:var(--accent);font-weight:600}

.submit-btn{
  padding:8px 22px;border-radius:var(--radius);border:none;
  background:var(--accent);color:#fff;font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:all .15s;
  letter-spacing:-.2px
}
.submit-btn:hover{background:var(--accent2);box-shadow:0 2px 12px rgba(59,130,246,.35)}

/* Error */
.err{
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);
  color:var(--red);padding:12px 18px;border-radius:var(--radius);
  margin-bottom:18px;font-size:.85rem
}

/* Paste view */
.paste-view{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden}
.topbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:11px 18px;background:var(--bg3);border-bottom:1px solid var(--border);
  font-size:.78rem
}
.topbar strong{color:var(--text);font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .meta{color:var(--text3)}
.topbar .btns{display:flex;gap:6px;margin-left:auto}
.topbar .btns button,.topbar .btns a{
  padding:5px 12px;border-radius:6px;font-size:.73rem;font-weight:500;
  cursor:pointer;text-decoration:none;font-family:var(--font);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text2);transition:all .12s
}
.topbar .btns button:hover,.topbar .btns a:hover{border-color:var(--accent);color:var(--accent)}

/* Exp badges */
.exp-badge{
  padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:600;
  white-space:nowrap
}
.exp-permanent{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.25)}
.exp-limited{background:rgba(234,179,8,.12);color:var(--yellow);border:1px solid rgba(234,179,8,.25)}

.paste-view pre{
  padding:20px 24px;margin:0;background:var(--bg);
  overflow-x:auto;font-family:var(--mono);font-size:.84rem;
  line-height:1.7;color:var(--text);white-space:pre
}
.paste-view pre code{display:block}

.images{padding:18px 24px;border-top:1px solid var(--border);background:var(--bg3)}
.images h4{font-size:.82rem;color:var(--text2);margin-bottom:12px;font-weight:500}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.img-grid a{
  display:block;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;
  transition:transform .15s
}
.img-grid a:hover{transform:scale(1.02);border-color:var(--accent)}
.img-grid img{width:100%;height:140px;object-fit:contain;background:var(--bg2)}
.img-grid span{display:block;padding:6px 10px;font-size:.68rem;color:var(--text3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.share{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--border);background:var(--bg3)}
.share input{
  flex:1;padding:8px 12px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-family:var(--mono);
  font-size:.78rem;outline:none
}
.share input:focus{border-color:var(--accent)}
.share button{
  padding:8px 14px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg);color:var(--text2);font-size:.78rem;
  cursor:pointer;font-family:var(--font);transition:all .12s
}
.share button:hover{border-color:var(--accent);color:var(--accent)}

/* 404 */
.err-page{text-align:center;padding:80px 20px}
.err-page h1{font-size:5rem;color:var(--accent);margin-bottom:8px}
.err-page p{color:var(--text2);margin-bottom:24px}
.back-btn{
  display:inline-flex;padding:10px 22px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg2);color:var(--text);
  text-decoration:none;font-size:.85rem;transition:all .15s
}
.back-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Toast */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  background:var(--bg2);color:var(--text);padding:10px 22px;
  border-radius:30px;font-size:.8rem;z-index:999;
  border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:up .25s ease
}
@keyframes up{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media(max-width:640px){
  main{padding:20px 14px}
  .editor textarea{min-height:300px;padding:16px;font-size:.82rem}
  .limits{display:none}
  .editor-header{padding:10px 14px}
  .editor-footer{flex-direction:column;gap:8px;align-items:stretch;padding:10px 14px;font-size:.72rem}
  .footer-left{justify-content:space-between;width:100%}
  .footer-right{justify-content:flex-end;width:100%}
  .paste-view pre{padding:14px 16px;font-size:.78rem}
  .img-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .img-grid img{height:100px}
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar .btns{width:100%}
}