/* МУСОРНОЕ ВЕДРО — фирменная тема сайта */
:root{
  --bg:#0a0a14; --panel:rgba(18,18,30,0.96); --line:rgba(122,168,90,0.4);
  --txt:#e8e8f2; --mut:#9a95b0; --acc:#7aa85a;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg); color:var(--txt); font-family:'Exo 2',sans-serif; min-height:100vh;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(90,160,70,0.12), transparent),
    radial-gradient(ellipse 50% 35% at 85% 15%, rgba(168,85,247,0.06), transparent);
}
.panel{
  position:relative; max-width:760px; margin:34px auto 18px; padding:26px 30px 22px;
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 0 30px rgba(122,168,90,0.16); text-align:center;
}
.panel h1{
  font-family:'Orbitron',sans-serif; font-size:1.7rem; letter-spacing:2px;
  background:linear-gradient(135deg,#7aa85a,#b8e096); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-bottom:10px;
}
.tr-sub{color:var(--mut); max-width:640px; margin:0 auto; line-height:1.55; font-size:0.93rem;}
.tr-input-row{display:flex; gap:10px; margin:16px auto 8px; max-width:600px;}
.tr-input-row input{
  flex:1; padding:12px 16px; border-radius:12px; font-size:1rem;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--txt);
}
.tr-input-row input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(122,168,90,0.25);}
.tr-btn{
  cursor:pointer; border:1px solid rgba(255,255,255,0.22); border-radius:12px; padding:11px 20px;
  background:rgba(18,18,30,0.9); color:#e8e8f2;
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.82rem; letter-spacing:1px; transition:.2s;
}
.tr-btn:hover{border-color:var(--acc); box-shadow:0 0 12px rgba(122,168,90,0.4);}
.tr-btn-primary{background:linear-gradient(135deg,#4c7a34,#7aa85a); border-color:transparent;}
.tr-btn:disabled{opacity:0.55; cursor:wait;}
.tr-err{color:#e07a7a; min-height:22px; font-size:0.9rem;}
.tr-prog{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--mut); margin-top:8px;}
.tr-spinner{
  width:18px; height:18px; border:3px solid rgba(122,168,90,0.3);
  border-top-color:var(--acc); border-radius:50%; animation:trspin 0.8s linear infinite;
}
@keyframes trspin{to{transform:rotate(360deg);}}

/* ── сцена: ведро СВЕРХУ ── */
.bin-stage{max-width:720px; margin:8px auto 0; padding:0 14px;}
.bin-hint{text-align:center; color:var(--mut); font-size:0.9rem; margin-bottom:6px; min-height:22px;}
.bin-tools{display:flex; justify-content:center; gap:14px; align-items:center; margin-bottom:8px;}
.bin-count{color:var(--acc); font-weight:700;}
.bin-scene{
  position:relative; height:min(560px, 92vw); overflow:hidden; border-radius:18px;
}
/* корпус: вид в жерло — кольцо кромки и уходящая вглубь тьма */
.bin-body{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px, 86%); aspect-ratio:1; border-radius:50%;
  background:
    /* блик света сверху-слева на стенке */
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.10), transparent 48%),
    /* радиальные РЁБРА стенок: спицы, сходящиеся к центру = глубина */
    repeating-conic-gradient(from 8deg at 50% 52%, rgba(255,255,255,0.045) 0deg 3deg, rgba(0,0,0,0.10) 3deg 12deg),
    /* дно смещено вниз (перспектива), стенки темнеют к нему */
    radial-gradient(circle at 50% 56%, #07090c 0%, #0d1015 26%, #161a21 44%, #232935 62%, #333b49 74%, #08090b 76%, transparent 77%),
    radial-gradient(circle at 50% 50%, transparent 74%, #6b7789 76%, #8b97a9 80%, #566073 86%, #3a4250 92%, #2a303a 100%);
  box-shadow:
    inset 0 26px 44px rgba(0,0,0,0.8),
    inset 0 -8px 22px rgba(255,255,255,0.05),
    0 18px 46px rgba(0,0,0,0.65);
}
.bin-body::before{ /* внутренняя тень под кромкой — козырёк */
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 44%, transparent 62%, rgba(0,0,0,0.5) 72%, transparent 76%);
  pointer-events:none;
}
.bin-body::after{ /* дуга блика на металле кромки */
  content:''; position:absolute; inset:1.5%; border-radius:50%;
  border-top:3px solid rgba(255,255,255,0.28);
  border-left:2px solid rgba(255,255,255,0.12);
  border-right:2px solid transparent; border-bottom:2px solid transparent;
  transform:rotate(-18deg);
  pointer-events:none;
}
.bin-body.shaking{animation:binshake 0.45s ease;}
@keyframes binshake{
  0%,100%{transform:translate(-50%,-50%) rotate(0);}
  25%{transform:translate(-51.5%,-49%) rotate(-1.6deg);}
  55%{transform:translate(-48.5%,-51%) rotate(1.6deg);}
  80%{transform:translate(-50.5%,-50%) rotate(-0.8deg);}
}
/* крышка: круглая, с рёбрами и ручкой; открывание — подъём, поворот и уход */
.bin-lid{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.03);
  width:min(500px, 90%); aspect-ratio:1; border-radius:50%; cursor:pointer; z-index:30;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 12deg, rgba(0,0,0,0.1) 12deg 24deg),
    radial-gradient(circle at 45% 40%, #6b7789, #454e5d 60%, #333a46);
  box-shadow:0 10px 30px rgba(0,0,0,0.65), inset 0 0 24px rgba(255,255,255,0.06);
  transition:transform 0.85s cubic-bezier(0.35,0.9,0.3,1), opacity 0.85s, box-shadow 0.4s;
}
.bin-lid::after{ /* ручка в центре */
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26%; height:9%; border-radius:12px;
  background:linear-gradient(180deg, #7c8899, #4a5364);
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}
.bin-lid:hover{box-shadow:0 14px 36px rgba(0,0,0,0.7), 0 0 22px rgba(122,168,90,0.35), inset 0 0 24px rgba(255,255,255,0.09);}
.bin-lid.open{
  transform:translate(-50%,-50%) scale(1.12) translateX(-115%) rotate(-200deg);
  opacity:0; pointer-events:none;
}
/* мусор */
.trash-layer{position:absolute; inset:0; z-index:20;}
.trash-item{
  position:absolute; left:0; top:0; user-select:none; touch-action:none; cursor:grab;
  will-change:transform; filter:drop-shadow(0 5px 6px rgba(0,0,0,0.55));
}
.trash-item.grabbed{cursor:grabbing; filter:drop-shadow(0 12px 14px rgba(0,0,0,0.7)) brightness(1.12); z-index:25;}
.trash-item.escaping{filter:drop-shadow(0 3px 4px rgba(0,0,0,0.4));}
/* глубина: виньетка поверх мусора у стенок */
.bin-depth{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px, 86%); aspect-ratio:1; border-radius:50%; z-index:22; pointer-events:none;
  background:radial-gradient(circle, transparent 58%, rgba(0,0,0,0.38) 86%, rgba(0,0,0,0.05) 92%, transparent 94%);
}
.paper-ball{
  position:absolute; font-size:40px; background:none; border:none; cursor:pointer; z-index:23;
  transform:rotate(var(--rot)); filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  transition:transform 0.15s; padding:0; animation:ballin 0.5s ease;
}
@keyframes ballin{from{transform:rotate(var(--rot)) scale(0);}to{transform:rotate(var(--rot)) scale(1);}}
.paper-ball:hover{transform:rotate(var(--rot)) scale(1.2);}
.bin-wrap.clean .bin-body{box-shadow:inset 0 0 60px rgba(0,0,0,0.85), 0 0 34px rgba(122,168,90,0.4);}
/* тост пасхалок */
.bin-toast{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%) translateY(20px);
  background:rgba(18,18,30,0.95); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); font-size:0.85rem; padding:8px 14px; opacity:0; pointer-events:none; z-index:40;
  max-width:90%; text-align:center;
}
.bin-toast.show{animation:trtoast 2.8s ease forwards;}
@keyframes trtoast{
  0%{opacity:0; transform:translateX(-50%) translateY(20px);}
  12%,78%{opacity:1; transform:translateX(-50%) translateY(0);}
  100%{opacity:0; transform:translateX(-50%) translateY(-8px);}
}
/* найденные карточки */
.found-list{display:grid; gap:10px; margin-top:14px;}
.stat-card{
  background:rgba(18,18,30,0.92); border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  padding:12px 14px; text-align:left;
}
.stat-card.unfold{animation:unfold 0.45s cubic-bezier(0.2,0.8,0.3,1);}
@keyframes unfold{
  0%{transform:scale(0.2) rotate(-14deg); opacity:0;}
  100%{transform:scale(1) rotate(0); opacity:1;}
}
.stat-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.stat-ico{font-size:1.2rem;}
.stat-k{color:var(--mut); font-size:0.82rem; letter-spacing:0.5px; text-transform:uppercase;}
.stat-v{margin-left:auto; font-weight:700; font-size:1.02rem; color:var(--txt);}
.stat-ai{margin-top:8px; font-size:0.88rem; line-height:1.5; color:#c9c4dd; font-style:italic;}
.ai-tag{
  font-style:normal; font-size:0.66rem; letter-spacing:1px; color:#0a0a14;
  background:linear-gradient(135deg,#7aa85a,#b8e096); border-radius:5px; padding:2px 6px;
  vertical-align:middle; margin-right:4px; font-family:'Orbitron',sans-serif;
}
.clean-note{
  text-align:center; margin-top:14px; color:var(--acc); font-size:0.95rem;
  display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.tr-seo{max-width:720px; margin:38px auto 0; color:var(--mut); font-size:0.85rem; line-height:1.6; text-align:center; padding:0 16px;}
@media (max-width:640px){ .tr-input-row{flex-direction:column;} .panel{margin:20px 10px 14px; padding:20px 16px;} }