*{box-sizing:border-box}
:root{--red:#ff1630;--red2:#b80019;--black:#08090a;--card:#101112;--muted:#bdbdc0}
html,body{margin:0;min-height:100%;background:#050506;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{position:relative;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;inset:auto;z-index:-2;pointer-events:none}
body:before{width:70vw;height:70vw;right:-25vw;top:18vh;background:radial-gradient(circle,rgba(255,0,25,.22),transparent 63%)}
body:after{width:80vw;height:80vw;left:-38vw;bottom:-20vh;background:radial-gradient(circle,rgba(130,0,18,.23),transparent 62%)}
.bg-grid{position:fixed;inset:0;z-index:-3;opacity:.55;background:
linear-gradient(135deg,transparent 0 17%,rgba(255,0,25,.10) 17.2% 18%,transparent 18.2% 46%,rgba(255,0,25,.07) 46.2% 47%,transparent 47.2%),
linear-gradient(35deg,transparent 0 65%,rgba(255,0,25,.09) 65.2% 70%,transparent 70.2%),
repeating-linear-gradient(155deg,transparent 0 42px,rgba(255,255,255,.018) 43px,transparent 44px)}
.brand{height:132px;padding:24px 22px 12px;display:flex;align-items:center;gap:15px;max-width:760px;margin:auto}
.brand-mark{width:68px;height:68px;border-radius:50%;border:3px solid #ff1832;box-shadow:0 0 0 6px #190308,0 0 22px rgba(255,0,30,.55);display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#343434,#080808 65%);font-size:34px;color:#fff}
.brand-name{font-size:34px;font-weight:900;letter-spacing:-1.7px;font-style:italic;white-space:nowrap}.brand-name span{color:var(--red)}
.brand-sub{font-size:10px;letter-spacing:5px;color:#aaa;margin-top:2px}
.page{width:min(700px,calc(100% - 28px));margin:8px auto 30px}
.panel{position:relative;background:linear-gradient(145deg,rgba(20,21,22,.98),rgba(7,8,9,.98));border:1px solid rgba(255,28,48,.8);border-radius:20px;padding:28px 27px 30px;margin-bottom:24px;box-shadow:0 0 0 3px rgba(255,0,28,.05),0 0 25px rgba(255,0,28,.12),inset 0 0 35px rgba(255,0,28,.025);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
.panel:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,0,25,.45);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);pointer-events:none}
.eyebrow{position:relative;color:#ff273c;font-weight:800;font-size:14px;letter-spacing:.3px;margin-bottom:15px}.eyebrow i{display:inline-block;width:8px;height:28px;background:var(--red);vertical-align:middle;margin-right:14px;box-shadow:0 0 12px rgba(255,0,30,.7)}
h1{position:relative;margin:0 0 8px;font-size:48px;line-height:1;font-style:italic;letter-spacing:-1.8px}h1 em{color:#ff1b32;font-style:italic}
.desc{position:relative;color:#c7c7c9;font-size:17px;line-height:1.55;margin:0 0 25px}
.field-title{position:relative;display:block;font-size:20px;font-weight:800;margin:0 0 12px}.field-title b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ff1630;color:#0b0b0c;font-size:16px;margin-right:12px}
.editor-wrap{position:relative}.editor-wrap textarea{display:block;width:100%;height:280px;resize:vertical;min-height:190px;border:1px solid #555;border-radius:15px;background:#0c0e0f;color:#d7d7da;padding:22px 45px 20px 18px;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none;box-shadow:inset 0 0 25px rgba(0,0,0,.45);caret-color:#ff1b32}.editor-wrap textarea:focus{border-color:#ff263b;box-shadow:0 0 0 2px rgba(255,20,45,.12),inset 0 0 25px rgba(0,0,0,.45)}
.copy{position:absolute;right:14px;top:13px;border:0;background:transparent;color:#ddd;font-size:27px;cursor:pointer}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.btn{height:72px;border-radius:14px;font-size:20px;font-weight:800;color:#fff;cursor:pointer;transition:.15s;position:relative;overflow:hidden}.btn:active{transform:scale(.985)}.activate{border:1px solid #ff2b40;background:linear-gradient(120deg,#ff152e,#ff2538 55%,#c9001b);box-shadow:0 5px 24px rgba(255,0,30,.24)}.deactivate{border:1px solid #ff263a;background:#090a0b}.btn span{font-size:32px;vertical-align:-3px;margin-right:10px}
.result-panel{padding-top:26px}.result-head{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.result-title{font-size:25px;font-weight:850}.bars{color:#ff1a32;font-size:33px;margin-right:12px}.status{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:22px;background:#17191a;font-weight:750}.status i{width:10px;height:10px;border-radius:50%;background:#19ef75;box-shadow:0 0 9px #19ef75}.result-card{position:relative;border:1px solid rgba(255,25,45,.55);border-radius:15px;background:#0c0e0f;min-height:285px;padding:36px 30px;box-shadow:inset 0 0 35px rgba(0,0,0,.45)}.result-icon{width:58px;height:58px;border:2px solid #ff1b34;color:#ff1b34;border-radius:50%;display:grid;place-items:center;font-size:37px;font-family:Georgia,serif;margin-bottom:23px}.result-card.success .result-icon{border-color:#18f277;color:#18f277}.result-card.success{border-color:rgba(255,25,45,.55)}.result-card h2{font-size:27px;margin:0 0 10px}.result-card p{font-size:17px;color:#bfc0c3;margin:0 0 20px;line-height:1.5}.result-card pre{white-space:pre-wrap;word-break:break-word;background:#070808;border:1px solid #343638;border-radius:10px;padding:18px;color:#ddd;font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0}
footer{text-align:center;color:#c1c1c3;font-size:12px;letter-spacing:4px;margin:30px 0 38px}footer span{color:#e91a30;font-weight:900}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#191a1c;border:1px solid #3a3a3d;color:#fff;padding:11px 17px;border-radius:25px;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){.brand{height:115px;padding:20px 17px 8px}.brand-mark{width:60px;height:60px;font-size:28px}.brand-name{font-size:27px}.brand-sub{font-size:8px;letter-spacing:4px}.page{width:calc(100% - 20px)}.panel{padding:25px 18px 24px}h1{font-size:43px}.desc{font-size:16px}.editor-wrap textarea{height:270px}.actions{gap:10px}.btn{height:66px;font-size:18px}.btn span{font-size:28px;margin-right:5px}.result-card{padding:30px 25px}}
@media(max-width:380px){.brand-name{font-size:23px}.brand-mark{width:53px;height:53px}.actions{grid-template-columns:1fr}.btn{height:60px}}