:root{--bg:#0a0a0a;--paper:#111;--red:#c0392b;--red-bright:#e74c3c;--amber:#e67e22;--green:#27ae60;--text:#d4cfc9;--text-dim:#6b6560;--border:#2a2a2a;--border-lit:#3a3a3a;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Courier Prime',monospace;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:6rem 1.5rem 5rem;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.9rem 2rem;border-bottom:1px solid var(--border);background:rgba(10,10,10,.95);backdrop-filter:blur(10px);z-index:50;}
.logo{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.2em;color:var(--red-bright);display:flex;align-items:center;gap:.6rem;}
.logo-sub{font-family:'Courier Prime',monospace;font-size:.58rem;letter-spacing:.35em;color:var(--text-dim);text-transform:uppercase;line-height:1.2;}
.topbar-right{display:flex;align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.2em;color:var(--text-dim);}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--red-bright);animation:blink 2s infinite;box-shadow:0 0 6px var(--red-bright);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* LAYOUT */
.wrap{width:100%;max-width:620px;display:flex;flex-direction:column;gap:1.6rem;}
.page-title{text-align:center;padding:1rem 0 .5rem;}
.page-title h1{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:.25em;color:var(--text);line-height:1;}
.page-title p{color:var(--text-dim);font-size:.75rem;letter-spacing:.2em;margin-top:.5rem;}
.field-label{font-size:.6rem;letter-spacing:.45em;color:var(--text-dim);text-transform:uppercase;margin-bottom:.5rem;}

/* PAPER BOX */
.paper-box{background:var(--paper);border:1px solid var(--border);position:relative;overflow:hidden;transition:border-color .2s;}
.paper-box:focus-within{border-color:var(--border-lit);}
.paper-box::before{content:'';position:absolute;left:46px;top:0;bottom:0;width:1px;background:rgba(192,57,43,.12);}
textarea{width:100%;min-height:200px;background:transparent;border:none;outline:none;color:var(--text);font-family:'Courier Prime',monospace;font-size:1rem;line-height:1.85;padding:1.4rem 1.4rem 1.4rem 64px;resize:vertical;}
textarea::placeholder{color:var(--text-dim);font-style:italic;}
.char-bar{display:flex;justify-content:space-between;align-items:center;padding:.45rem 1rem;border-top:1px solid var(--border);}
.char-bar span{font-size:.62rem;color:var(--text-dim);letter-spacing:.15em;}
.char-fill{height:2px;background:var(--border-lit);border-radius:1px;overflow:hidden;flex:1;margin:0 1rem;}
.char-fill-inner{height:100%;background:var(--red);transition:width .2s;width:0%;}

/* TIMER */
.timer-setter{background:var(--paper);border:1px solid var(--border);padding:1.2rem 1.4rem;}
.timer-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem;gap:1rem;}
.timer-display{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;letter-spacing:.1em;color:var(--amber);line-height:1;}
.timer-display small{font-size:.65rem;color:var(--text-dim);letter-spacing:.3em;display:block;margin-top:3px;font-family:'Courier Prime',monospace;}
.timer-controls{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;}
.preset-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);padding:.4rem .7rem;font-family:'Courier Prime',monospace;font-size:.7rem;letter-spacing:.15em;cursor:pointer;transition:all .15s;}
.preset-btn:hover,.preset-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(230,126,34,.06);}
.timer-slider-row{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem;}
.timer-slider-row label{font-size:.6rem;letter-spacing:.25em;color:var(--text-dim);white-space:nowrap;}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;background:var(--border-lit);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 6px rgba(230,126,34,.5);}
.custom-input-row{display:flex;align-items:center;gap:.75rem;padding-top:.9rem;border-top:1px solid var(--border);flex-wrap:wrap;}
.custom-input-label{font-size:.62rem;letter-spacing:.2em;color:var(--text-dim);white-space:nowrap;}
#custom-seconds{width:90px;background:var(--bg);border:1px solid var(--border-lit);color:var(--amber);font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.1em;padding:.4rem .7rem;outline:none;transition:border-color .2s;-moz-appearance:textfield;}
#custom-seconds::-webkit-outer-spin-button,#custom-seconds::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#custom-seconds:focus{border-color:var(--amber);}
#custom-seconds.invalid{border-color:var(--red-bright);color:var(--red-bright);}
.custom-hint{font-size:.6rem;letter-spacing:.12em;color:var(--text-dim);}
.custom-hint.ok{color:var(--green);}
.custom-hint.err{color:var(--red-bright);}
.timer-note{font-size:.62rem;color:var(--text-dim);letter-spacing:.1em;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--border);line-height:1.6;}
.timer-note strong{color:var(--red-bright);}

/* WARNING */
.warning-strip{display:flex;align-items:flex-start;gap:.75rem;padding:.8rem 1rem;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.2);font-size:.72rem;color:rgba(231,76,60,.85);letter-spacing:.04em;line-height:1.6;}
.warning-strip::before{content:'⚠';font-size:.9rem;flex-shrink:0;margin-top:1px;}

/* GENERATE BUTTON */
.btn-generate{width:100%;background:var(--red);color:#fff;border:none;padding:1.1rem;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.35em;cursor:pointer;position:relative;overflow:hidden;transition:background .2s;}
.btn-generate:hover{background:var(--red-bright);}
.btn-generate:active{transform:scale(.995);}
.btn-generate::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .5s;}
.btn-generate:hover::after{transform:translateX(100%);}

/* HOW IT WORKS */
.how-it-works{border:1px solid var(--border);padding:1.2rem 1.4rem;background:var(--paper);}
.how-title{font-size:.6rem;letter-spacing:.4em;color:var(--text-dim);margin-bottom:.9rem;text-transform:uppercase;}
.step-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.7rem;}
.step-row:last-child{margin-bottom:0;}
.step-num{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--red);letter-spacing:.1em;line-height:1.2;flex-shrink:0;width:1.5rem;}
.step-txt{font-size:.72rem;color:var(--text-dim);letter-spacing:.05em;line-height:1.65;}
.step-txt strong{color:var(--text);}

/* LINK VIEW */
#link-view{display:none;flex-direction:column;gap:1.4rem;}
.success-header{text-align:center;padding:1.5rem 0 .5rem;}
.success-header h2{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:.2em;color:var(--green);}
.success-header p{color:var(--text-dim);font-size:.72rem;letter-spacing:.15em;margin-top:.4rem;}
.link-box{background:var(--paper);border:1px solid var(--border);overflow:hidden;}
.link-label-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
.link-label-row span{font-size:.58rem;letter-spacing:.35em;color:var(--text-dim);}
.link-label-row em{font-style:normal;font-size:.6rem;letter-spacing:.2em;color:var(--green);}
.link-text-row{display:flex;align-items:stretch;}
#generated-link{flex:1;padding:1rem 1.2rem;font-size:.8rem;color:var(--amber);word-break:break-all;letter-spacing:.02em;line-height:1.6;user-select:all;cursor:text;}
.btn-copy{background:var(--border);border:none;border-left:1px solid #333;color:var(--text);padding:1rem 1.3rem;font-family:'Courier Prime',monospace;font-size:.7rem;letter-spacing:.2em;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;}
.btn-copy:hover{background:var(--red);color:#fff;}
.btn-copy.copied{background:#1a4a1a;color:#6fcf97;}

/* SHARE */
.share-section{display:flex;flex-direction:column;gap:.6rem;}
.share-label{font-size:.58rem;letter-spacing:.4em;color:var(--text-dim);text-transform:uppercase;}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.share-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.8rem .5rem;border:1px solid var(--border);background:var(--paper);cursor:pointer;transition:all .18s;font-family:'Courier Prime',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text-dim);text-decoration:none;}
.share-btn:hover{transform:translateY(-2px);}
.share-btn .si{font-size:1.4rem;line-height:1;}
.share-btn.whatsapp:hover{border-color:#25d366;color:#25d366;background:rgba(37,211,102,.07);}
.share-btn.telegram:hover{border-color:#0088cc;color:#0088cc;background:rgba(0,136,204,.07);}
.share-btn.email:hover{border-color:var(--amber);color:var(--amber);background:rgba(230,126,34,.07);}
.share-btn.sms:hover{border-color:#6fcf97;color:#6fcf97;background:rgba(111,207,151,.07);}
.share-btn.twitter:hover{border-color:#1da1f2;color:#1da1f2;background:rgba(29,161,242,.07);}
.share-btn.native:hover{border-color:var(--red-bright);color:var(--red-bright);background:rgba(231,76,60,.07);}

/* PILLS */
.meta-pills{display:flex;flex-wrap:wrap;gap:.5rem;}
.pill{font-size:.6rem;letter-spacing:.2em;padding:.3rem .75rem;border:1px solid var(--border);color:var(--text-dim);}
.pill.red{border-color:rgba(192,57,43,.4);color:var(--red-bright);}
.pill.amber{border-color:rgba(230,126,34,.4);color:var(--amber);}

.divider{border:none;border-top:1px solid var(--border);}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.8rem;width:100%;font-family:'Courier Prime',monospace;font-size:.75rem;letter-spacing:.25em;cursor:pointer;transition:all .2s;text-transform:uppercase;}
.btn-secondary:hover{border-color:var(--text-dim);color:var(--text);}

/* FOOTER */
footer{position:fixed;bottom:0;left:0;right:0;padding:.55rem 2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.3em;color:var(--text-dim);background:rgba(10,10,10,.95);backdrop-filter:blur(10px);}