:root{--bg:#07060f;--violet:#8b5cf6;--cyan:#22d3ee;--text:#eceaf7;--muted:#9a97b3;--glass:rgba(255,255,255,.055);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
 background:linear-gradient(135deg,#07060f,#120a2a 45%,#06121f);background-size:200% 200%;animation:shift 16s ease infinite;overflow-x:hidden}
@keyframes shift{50%{background-position:100% 100%}}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.blob{position:fixed;width:44vmax;height:44vmax;border-radius:50%;filter:blur(90px);opacity:.28;z-index:0;pointer-events:none;animation:float 18s ease-in-out infinite}
.b1{background:var(--violet);top:-15vmax;left:-10vmax}.b2{background:var(--cyan);bottom:-18vmax;right:-12vmax;animation-delay:-9s}
@keyframes float{50%{transform:translate(4vmax,3vmax) scale(1.1)}}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:48px 20px 64px;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero{text-align:center}
.pill{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--glass);font-size:.78rem;color:var(--muted);backdrop-filter:blur(8px)}
h1{font-size:clamp(2.4rem,8vw,4.4rem);line-height:1.04;margin:18px 0 12px;font-weight:800;letter-spacing:-.03em}
.glow-text{background:linear-gradient(90deg,var(--cyan),var(--violet),#f0abfc,var(--cyan));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
 animation:grad 6s linear infinite;filter:drop-shadow(0 0 22px rgba(139,92,246,.55))}
@keyframes grad{to{background-position:250% 0}}
.lead{color:var(--muted);font-size:1.05rem}
.card{width:100%;padding:22px;border-radius:22px;background:var(--glass);border:1px solid var(--line);
 backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ta-wrap{position:relative;border-radius:16px;padding:1.5px;background:var(--line);transition:.3s}
.ta-wrap:focus-within{background:linear-gradient(120deg,var(--cyan),var(--violet),var(--cyan));background-size:250% 100%;animation:grad 3s linear infinite;box-shadow:0 0 30px rgba(139,92,246,.4)}
textarea{display:block;width:100%;min-height:260px;resize:vertical;padding:16px;border:0;outline:0;border-radius:15px;background:#0c0a1a;color:var(--text);font:inherit;font-size:.95rem;line-height:1.55}
textarea::placeholder{color:#6d6a86}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px}
.muted{color:var(--muted);font-size:.85rem}
.btn{cursor:pointer;border:0;padding:14px 26px;border-radius:14px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--violet),#6d28d9 55%,var(--cyan));
 box-shadow:0 0 22px rgba(139,92,246,.5);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 36px rgba(34,211,238,.6)}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--glass);border:1px solid var(--line);box-shadow:none}
.error{margin-top:14px;padding:10px 14px;border-radius:12px;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4);color:#fda4af;font-size:.9rem}
[hidden]{display:none!important}
.card,.btn.ghost{animation:up .5s ease both}
@keyframes up{from{opacity:0;transform:translateY(16px)}}

.loading{text-align:center;padding:48px 22px}
.scanner{position:relative;width:200px;height:120px;margin:0 auto 22px;display:flex;flex-direction:column;gap:10px;justify-content:center;overflow:hidden}
.scanner span{height:8px;border-radius:6px;background:rgba(255,255,255,.14);animation:pulse 1.4s ease-in-out infinite}
.scanner span:nth-child(2){width:80%;animation-delay:.15s}.scanner span:nth-child(3){width:92%;animation-delay:.3s}
.scanner span:nth-child(4){width:65%;animation-delay:.45s}.scanner span:nth-child(5){width:85%;animation-delay:.6s}
.scanner i{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 18px var(--cyan);animation:scan 1.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:0}50%{top:calc(100% - 3px)}}
@keyframes pulse{50%{opacity:.35}}
.load-text{font-size:1.1rem;background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;animation:pulse 1.6s infinite}

.result{padding:28px 24px;background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(255,255,255,.04))}
.r-head{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.gauge{position:relative;width:150px;height:150px;flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.track,.arc{fill:none;stroke-width:9;stroke-linecap:round}
.track{stroke:rgba(255,255,255,.1)}
.arc{stroke:url(#g);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 8px rgba(139,92,246,.8))}
.g-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.g-num b{font-size:2.6rem;line-height:1}.g-num small{color:var(--muted);font-size:.72rem;margin-top:4px}
.r-title h2{font-size:1.6rem}
h3{margin:22px 0 10px;font-size:1rem;color:var(--cyan);letter-spacing:.02em}
.roast p{opacity:0;transform:translateY(10px);animation:up .6s ease forwards;line-height:1.65;margin-bottom:8px;font-size:1.02rem}
.fixes{display:grid;gap:12px}
.fix{display:flex;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line);opacity:0;animation:up .6s ease forwards}
.fix .n{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.fix b{display:block;margin-bottom:3px}.fix span{color:#c9c6de;font-size:.92rem;line-height:1.5}
.brand{margin-top:24px;text-align:center;color:var(--muted);font-size:.8rem}.brand b{color:var(--cyan)}
@media(max-width:560px){.r-head{flex-direction:column;text-align:center}.row{flex-direction:column-reverse;align-items:stretch}.btn{width:100%}textarea{min-height:220px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}