.dql-app {
--dql-bg1:#0f2027; --dql-bg2:#203a43; --dql-bg3:#2c5364;
--dql-accent:#7fffd4; --dql-gold:#ffd166; --dql-coral:#ff6b6b;
--dql-text:#eef7f5; --dql-muted:#b8d8d0;
--dql-card:rgba(255,255,255,0.07); --dql-border:rgba(255,255,255,0.15);
font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
background:linear-gradient(160deg,var(--dql-bg1),var(--dql-bg2),var(--dql-bg3));
color:var(--dql-text); border-radius:22px; padding:28px 18px 36px;
display:flex; flex-direction:column; align-items:center;
}
.dql-app *, .dql-app *::before, .dql-app *::after { box-sizing:border-box; }
.dql-title {
font-size:clamp(1.8rem,5vw,2.6rem); margin:0; text-align:center; letter-spacing:1px;
background:linear-gradient(90deg,var(--dql-accent),var(--dql-gold));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.dql-tagline { color:var(--dql-muted); margin:6px 0 24px; text-align:center; font-size:1.05rem; }
.dql-layout { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; width:100%; max-width:980px; }
.dql-panel { background:var(--dql-card); border:1px solid var(--dql-border); border-radius:18px; padding:20px; }
.dql-bar-panel { flex:1 1 380px; max-width:480px; }
.dql-glass-panel { flex:1 1 320px; max-width:420px; display:flex; flex-direction:column; align-items:center; }
.dql-h { font-size:1.05rem; color:var(--dql-accent); margin:0 0 14px; text-transform:uppercase; letter-spacing:2px; }
.dql-ingredients { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.dql-ing-btn {
display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
border:1px solid var(--dql-border); color:var(--dql-text); padding:10px 12px; border-radius:12px;
cursor:pointer; font-size:0.95rem; transition:transform .1s, background .2s; user-select:none;
}
.dql-ing-btn:hover { background:rgba(127,255,212,0.15); }
.dql-ing-btn:active { transform:scale(0.94); }
.dql-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.4); }
.dql-amt { margin-left:auto; font-size:0.8rem; color:var(--dql-gold); font-weight:700; min-width:38px; text-align:right; }
.dql-controls { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.dql-big {
flex:1; padding:14px 18px; border-radius:14px; border:none; font-size:1.05rem;
font-weight:700; cursor:pointer; letter-spacing:1px; transition:transform .1s, filter .2s;
}
.dql-big:active { transform:scale(0.96); }
.dql-shake { background:linear-gradient(90deg,var(--dql-accent),#4ecdc4); color:#08312a; }
.dql-shake:hover { filter:brightness(1.1); }
.dql-reset { background:rgba(255,255,255,0.12); color:var(--dql-text); border:1px solid var(--dql-border); flex:0 0 auto; }
.dql-glass-wrap { position:relative; width:190px; height:280px; margin:8px 0 4px; }
.dql-glass {
position:absolute; inset:0; border:4px solid rgba(255,255,255,0.55); border-top:none;
border-radius:0 0 60px 60px; overflow:hidden; background:rgba(255,255,255,0.04);
}
.dql-glass::after {
content:""; position:absolute; top:0; left:12%; width:14%; height:100%;
background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 70%); pointer-events:none;
}
.dql-liquid { position:absolute; bottom:0; left:0; right:0; display:flex; flex-direction:column-reverse; transition:height .4s; }
.dql-layer { width:100%; transition:height .4s; }
.dql-fill-info { color:var(--dql-muted); font-size:0.9rem; margin-bottom:10px; }
.dql-straw {
position:absolute; top:-38px; right:32px; width:12px; height:150px;
background:repeating-linear-gradient(45deg,var(--dql-coral),var(--dql-coral) 8px,#fff 8px,#fff 16px);
border-radius:6px; transform:rotate(8deg); opacity:0; transition:opacity .5s;
}
.dql-umbrella { position:absolute; top:-52px; left:18px; font-size:52px; opacity:0; transition:opacity .5s; transform:rotate(-15deg); }
.dql-shaking { animation:dql-shake-anim 0.4s ease-in-out 4; }
@keyframes dql-shake-anim {
0%,100% { transform:translateX(0) rotate(0); }
25% { transform:translateX(-12px) rotate(-6deg); }
75% { transform:translateX(12px) rotate(6deg); }
}
.dql-verdict { margin-top:22px; width:100%; max-width:980px; display:none; text-align:center; animation:dql-pop .4s ease; }
@keyframes dql-pop { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }
.dql-score { font-size:3rem; font-weight:800; color:var(--dql-gold); }
.dql-drinkname { font-size:1.4rem; color:var(--dql-accent); margin:6px 0; }
.dql-comment { color:var(--dql-muted); font-size:1.05rem; max-width:560px; margin:8px auto 16px; line-height:1.5; }
.dql-share, .dql-save {
border:none; padding:12px 22px; border-radius:12px; font-weight:700; font-size:0.95rem; cursor:pointer; margin:4px 6px;
}
.dql-share { background:linear-gradient(90deg,var(--dql-gold),var(--dql-coral)); color:#3a2200; }
.dql-save { background:rgba(127,255,212,0.2); color:var(--dql-accent); border:1px solid var(--dql-accent); }
.dql-stars { font-size:1.6rem; letter-spacing:4px; }
.dql-footer { margin-top:30px; color:var(--dql-muted); font-size:0.85rem; text-align:center; }
.dql-confetti { position:fixed; top:-20px; font-size:22px; animation:dql-fall linear forwards; z-index:9999; pointer-events:none; }
@keyframes dql-fall { to { transform:translateY(110vh) rotate(720deg); } }