:root{color-scheme:dark;--green:#00ed69;--text:#f5f5f5;--muted:#bdbdbd;--cut:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px)}*{box-sizing:border-box}html{background:#070b08}body{margin:0;min-height:100svh;font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif;color:var(--text);background:radial-gradient(ellipse at 0 42%,#00793255,transparent 42%),radial-gradient(ellipse at 100% 55%,#00b04c44,transparent 40%),repeating-linear-gradient(135deg,transparent 0 110px,#00ed690a 110px 113px,transparent 113px 190px),#070b08;position:relative;isolation:isolate}body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:38vw;height:100vh;top:0;background:linear-gradient(135deg,transparent 16%,#00ed69 16% 20%,#005424 20% 24%,transparent 24% 31%,#00b14b 31% 33%,transparent 33% 72%,#00d35a 72% 79%,transparent 79%);opacity:.7}body:before{left:-17vw}body:after{right:-17vw;transform:rotate(180deg)}.page{width:min(1136px,calc(100% - 48px));margin:auto;padding:0 0 28px}.masthead{min-height:174px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;gap:24px;align-items:center}.brand-mark{width:130px;height:130px;border:5px solid #00bf54;border-radius:50%;box-shadow:0 0 24px #00ed6933,inset 0 0 20px #00ed6922;background:radial-gradient(circle at 35% 25%,#203728,#030703 70%);display:grid;place-items:center;flex-shrink:0;font-size:85px;font-weight:950;font-style:italic;color:var(--green)}.brand-name{margin:0;white-space:nowrap;font-size:clamp(25px,3.6vw,48px);font-style:italic;font-weight:950;letter-spacing:-1.5px;text-transform:uppercase;text-shadow:0 2px 0 #666}.brand-name span{color:var(--green);text-shadow:0 2px 0 #00752c}.brand-subtitle{margin:10px 0 0;text-transform:uppercase;font-size:14px;letter-spacing:8px;color:#ddd}.tagline{border-block:1px solid var(--green);padding:18px 24px;letter-spacing:6px;font-size:14px;white-space:nowrap;background:linear-gradient(135deg,#00bc50 0 18px,#080b08 18px);transform:skew(-12deg)}.shell{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.panel{position:relative;padding:2px;background:var(--green);clip-path:var(--cut);filter:drop-shadow(0 0 8px #00ed6955);min-width:0}.panel:before{content:"";position:absolute;inset:7px;border:1px solid #00ed6966;clip-path:var(--cut);pointer-events:none;z-index:1}.panel-inner{height:100%;padding:36px 40px;background:radial-gradient(ellipse at 100% 100%,#00421d55,transparent 45%),linear-gradient(135deg,#151b17,#080b08 55%,#090e0b);clip-path:var(--cut)}.result-panel .panel-inner{padding:26px;min-height:560px}.eyebrow{margin:0 0 12px;color:var(--green);font-size:16px;font-weight:800;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:7px;height:22px;background:var(--green)}h1{margin:0 0 8px;font-size:clamp(34px,4vw,50px);font-style:italic;font-weight:900;line-height:1.15;letter-spacing:-1px}h1 span{color:var(--green)}.subtitle{margin:0 0 24px;color:var(--muted);font-size:18px;line-height:1.45}label{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:19px;font-weight:700}.code-icon{background:var(--green);border-radius:50%;color:#080b08;width:27px;height:27px;display:grid;place-items:center;font-size:15px;font-weight:900}.input-wrap{position:relative}.copy-btn{position:absolute;right:12px;top:10px;background:transparent;color:#ddd;border:0;width:44px;height:44px;cursor:pointer;font-size:25px;border-radius:6px}.copy-btn:hover{background:#ffffff16}.copy-btn:focus-visible,.btn:focus-visible{outline:3px solid #fff;outline-offset:-5px}textarea{display:block;width:100%;min-height:208px;resize:vertical;padding:18px 48px 18px 18px;border:1px solid #555;border-radius:12px;color:#ddd;background:linear-gradient(135deg,#101714,#0c100d);font:15px/1.65 Consolas,monospace;outline:none}textarea::placeholder{color:#b9bfc1;opacity:1}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #00ed6922}.actions{display:grid;grid-template-columns:1.14fr 1fr;gap:20px;margin-top:26px}.btn{min-height:62px;padding:14px 12px;border:0;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);font-size:21px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;transition:filter .2s,transform .2s;touch-action:manipulation}.btn:hover{filter:brightness(1.2)}.btn:active{transform:translateY(1px)}.btn-activate{color:#03160a;background:linear-gradient(145deg,#42ff92,#00ed69 45%,#00ba50);box-shadow:inset 0 0 14px #36ff84}.btn-deactivate{color:white;background:var(--green);position:relative;isolation:isolate}.btn-deactivate:before{content:"";position:absolute;inset:1px;background:#080b08;clip-path:inherit;z-index:-1}.btn-icon{font-size:30px;line-height:1}.btn:disabled{opacity:.55;cursor:wait}.result-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:24px}.result-title{margin:0;font-size:24px;display:flex;align-items:center;gap:14px}.bars{color:var(--green);font-size:30px}.status-pill{padding:10px 18px;border-radius:999px;color:#f5f5f5;background:#ffffff0d;font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}.status-pill:before{content:"";width:12px;height:12px;background:var(--green);border-radius:50%}.status-pill[data-state="error"]:before{background:#ff6363}.status-pill[data-state="loading"]:before{background:#ffc14d}.result-box{min-height:248px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:32px;border:1px solid #313b34;border-block-color:#00c653;border-radius:13px;background:linear-gradient(135deg,#111713,#0c100d)}.result-icon{width:55px;height:55px;display:grid;place-items:center;border:2px solid var(--green);border-radius:50%;color:#33ff88;background:#003a18;font:700 32px Georgia,serif;box-shadow:0 0 15px #00ed6933}.result-message{margin:4px 0 0;font-size:23px;font-weight:800}.result-detail{margin:0;color:var(--muted);font-size:18px;line-height:1.55;overflow-wrap:anywhere}.result-box.error{border-color:#ff6363}.result-box.error .result-icon{color:#ff6363;border-color:#ff6363;background:#301010}pre{width:100%;max-height:180px;margin:0;padding:12px;overflow:auto;border:1px solid #333;border-radius:6px;color:#ddd;background:#080b08;font:14px/1.5 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}pre[hidden]{display:none}.footer{display:flex;align-items:center;gap:28px;margin-top:70px;font-size:14px;letter-spacing:4px;text-align:center;white-space:nowrap}.footer:before,.footer:after{content:"";height:1px;background:linear-gradient(90deg,transparent,var(--green));flex:1}.footer:after{transform:rotate(180deg)}.footer strong{color:var(--green)}
@media(max-width:1000px){.brand-mark{width:110px;height:110px;font-size:70px}.brand-subtitle{letter-spacing:7px;font-size:14px}.tagline{display:none}.panel-inner{padding:28px 24px}.result-panel .panel-inner{padding:24px;min-height:100%}.btn{font-size:17px;gap:9px}.actions{gap:12px}}
@media(max-width:700px){.page{width:calc(100% - 28px);padding-bottom:max(24px,env(safe-area-inset-bottom))}.masthead{min-height:128px;justify-content:center;gap:0}.brand{gap:14px}.brand-mark{width:76px;height:76px;border-width:3px;font-size:48px}.brand-name{font-size:clamp(28px,7vw,38px);letter-spacing:-1px}.brand-subtitle{margin-top:7px;font-size:12px;letter-spacing:3px}.shell{grid-template-columns:minmax(0,1fr);gap:18px}.panel-inner{padding:25px 20px}.eyebrow{font-size:14px;margin-bottom:14px}h1{font-size:38px}.subtitle{font-size:16px;margin-bottom:22px}label{font-size:17px}textarea{min-height:216px;padding:16px 42px 16px 13px;font-size:14px;line-height:1.75}.actions{margin-top:20px;gap:10px}.btn{min-height:56px;font-size:16px;gap:8px}.btn-icon{font-size:25px}.result-panel .panel-inner{padding:22px 20px;min-height:310px}.result-header{margin-bottom:18px}.result-title{font-size:21px}.status-pill{font-size:14px;padding:8px 12px}.status-pill:before{width:9px;height:9px}.result-box{min-height:205px;padding:24px;gap:12px}.result-message{font-size:21px}.result-detail{font-size:16px}.result-icon{width:46px;height:46px;font-size:27px}.footer{margin-top:30px;gap:10px;font-size:14px;letter-spacing:2px}body:before,body:after{width:65vw;opacity:.35}body:before{left:-40vw}body:after{right:-40vw}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}