*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;background:#0b0b0d;color:#ddd;min-height:100vh;padding-bottom:100px}
.bg{position:fixed;inset:0;z-index:-1;background:#0b0b0d}
.bg:before{content:'';position:absolute;inset:-40%;background:radial-gradient(ellipse at 22% 18%,rgba(45,42,60,.35),transparent 55%),radial-gradient(ellipse at 82% 78%,rgba(30,40,50,.3),transparent 50%)}
.bg:after{content:'';position:absolute;inset:0;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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.03}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.hero h1{font-size:clamp(3.8rem,12vw,7.5rem);font-weight:800;line-height:1.05;color:#eee;letter-spacing:-0.03em}
.hero h1 b{color:#c9a86c;display:block} 
.hero .sub{margin-top:24px;color:#777;font-size:16px;max-width:360px;line-height:1.5} 
.tool-area{max-width:560px;margin:0 auto;padding:20px 18px 40px}  
.panel{background:#141416;border:1px solid #2c2c32;border-radius:10px;padding:14px}
.panel textarea{width:100%;height:160px;background:#0e0e10;border:1px solid #2c2c32;border-radius:6px;padding:12px;color:#ddd;font-size:14px;font-family:inherit;resize:vertical;transition:border-color .2s ease}
.panel textarea:focus{outline:none;border-color:#5c4e32} 
.stats{font-size:12px;color:#666;margin:6px 0 2px} 
.actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:0;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease}
.actions.show{max-height:80px;opacity:1;margin-top:10px;pointer-events:auto}
.actions button,.cases button{background:#0e0e10;border:1px solid #2c2c32;color:#999;font-size:12px;padding:5px 10px;border-radius:4px;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .1s ease}
.actions button:hover,.cases button:hover{border-color:#5c4e32;color:#c9a86c}
.actions button:active,.cases button:active{transform:scale(.94)}
.cases{display:flex;flex-wrap:wrap;gap:5px;margin-top:0;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease}
.cases.show{max-height:80px;opacity:1;margin-top:10px;pointer-events:auto} 
.go{width:100%;background:#c9a86c;color:#1a1508;border:none;padding:11px;font-size:14px;font-weight:600;border-radius:6px;cursor:pointer;margin-top:12px;position:relative;transition:background .15s ease,transform .1s ease}
.go:hover{background:#d4b47a} 
.go:active{transform:scale(.985)}   
.stamp{position:absolute;right:10px;top:-14px;border:2px solid #c9a86c;color:#c9a86c;background:#0b0b0d;font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:2px;transform:rotate(-6deg) scale(0);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.stamp.show{transform:rotate(-6deg) scale(1);opacity:1}
#out{margin-top:10px;background:#0e0e10;border:1px solid #2c2c32;border-radius:6px;padding:11px;font-size:13px;color:#aaa;min-height:40px;white-space:pre-wrap;word-break:break-word;transition:border-color .3s ease}
#out.flash{border-color:#c9a86c}
@keyframes popIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
#out.flash{animation:popIn .18s ease}
.tip{text-align:center;font-size:11px;color:#555;margin-top:8px}
.bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:380px;height:58px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;border-radius:18px;background:rgba(255,255,255,0.07);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,0.13);box-shadow:0 8px 32px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(255,255,255,0.04);z-index:50}
.bar-pill{position:absolute;top:6px;bottom:6px;left:8px;border-radius:12px;background:rgba(201,168,108,0.18);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);z-index:0}
.bar button{flex:1;background:none;border:none;color:#999;font-size:13px;font-weight:500;padding:10px 6px;border-radius:12px;cursor:pointer;transition:color .15s,transform .1s;position:relative;z-index:1}
.bar button:hover{color:#ddd}
.bar button:active{transform:scale(.95)}
.bar button.on{color:#c9a86c}