/* Stylish Name — refined palette */
:root{
  --bg:#0b1020;
  --bg-2:#111935;
  --panel:#161e3d;
  --panel-2:#1d264a;
  --text:#eef1ff;
  --muted:#9aa6c8;
  --accent:#ff6ec7;
  --accent-2:#7a5cff;
  --accent-3:#5ad1ff;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --ok:#3ddc97;
  --radius:14px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(900px 500px at 50% -150px,#1c2452 0%,var(--bg) 65%) no-repeat var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:820px;margin:0 auto;padding:24px 16px 100px}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.input-wrap{padding:16px;border-bottom:1px solid var(--border)}
.input-wrap textarea{width:100%;min-height:84px;resize:vertical;background:rgba(0,0,0,.25);color:var(--text);border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.4;outline:none;transition:border-color .15s,box-shadow .15s}
.input-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,110,199,.18)}
.hint{display:flex;align-items:center;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}
.hint .clear{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px}
.hint .clear:hover{color:var(--text);background:rgba(255,255,255,.06)}

.size-wrap{margin-top:12px;padding:10px 12px;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:6px}
.size-wrap label{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center}
.size-wrap label span{color:var(--text);font-weight:600}
.size-wrap input[type=range]{width:100%;accent-color:var(--accent);height:4px}

.results{display:none}
.results.show{display:block}
.fr{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.fr:last-child{border-bottom:none}
.fr:hover{background:rgba(255,255,255,.04)}
.fr:active,.fr.copied{background:rgba(255,110,199,.10)}
.fr .ft{flex:1;min-width:0;color:var(--text);font-size:17px;line-height:1.4;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.fr .ft::-webkit-scrollbar{display:none}
.fr .ci{flex:0 0 auto;color:var(--muted);font-size:11px;opacity:0;transition:opacity .15s}
.fr:hover .ci{opacity:1}
.fr.copied .ci{opacity:1;color:var(--ok)}

.loadwrap{padding:14px;text-align:center;border-top:1px solid var(--border)}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{box-shadow:0 8px 22px rgba(122,92,255,.35)}

.helper{text-align:center;color:var(--muted);font-size:13px;margin:18px 4px 14px;line-height:1.5}

.tagcloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 24px}
.tagcloud a{font-size:12px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:.15s}
.tagcloud a:hover{color:var(--text);border-color:var(--accent);background:rgba(255,110,199,.08)}

.info-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.info-card h2{font-size:18px;margin:20px 0 8px;background:linear-gradient(90deg,var(--accent),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.info-card h2:first-child{margin-top:0}
.info-card p,.info-card li{color:#c8d0eb;font-size:14.5px;line-height:1.65}
.faq{border-top:1px solid var(--border);padding:12px 0}
.faq q{display:block;font-weight:600;color:var(--text);margin-bottom:4px}
.faq q::before,.faq q::after{content:""}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--ok);color:#04221a;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

footer{margin:26px 0 0;text-align:center;color:var(--muted);font-size:12px}

@media (max-width:560px){
  .wrap{padding:16px 12px 100px}
  .fr{padding:10px 12px}
  .fr .ft{font-size:15px}
  .info-card{padding:18px}
}