:root{
  --anime-accent:#72a2ff;
  --anime-accent-2:#8f67ff;
  --anime-accent-3:#36e2ff;
  --anime-red:#ff4f7c;
  --anime-soft:#cfd7ff;
}

.anime-toggle{
  position:fixed; top:16px; right:16px; z-index:99999;
  display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:11px 14px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,rgba(17,21,46,.92),rgba(15,17,33,.84));
  box-shadow:0 18px 44px rgba(0,0,0,.28); backdrop-filter:blur(16px);
  font:700 13px/1 Inter,system-ui,sans-serif;
}
.anime-toggle i{font-style:normal; font-size:16px; filter:drop-shadow(0 0 10px rgba(114,162,255,.45));}
.anime-toggle small{display:block; font-size:10px; opacity:.66; font-weight:600; letter-spacing:.08em; text-transform:uppercase;}
.anime-toggle .anime-toggle-text{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.anime-toggle[data-state="off"]{opacity:.78}

body.anime-mode::before{
  content:""; position:fixed; inset:-10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(114,162,255,.16), transparent 18%),
    radial-gradient(circle at 84% 14%, rgba(143,103,255,.12), transparent 16%),
    radial-gradient(circle at 80% 76%, rgba(54,226,255,.10), transparent 18%),
    radial-gradient(circle at 16% 86%, rgba(255,79,124,.09), transparent 16%);
  filter:blur(18px);
  animation:animeBgDrift 18s ease-in-out infinite alternate;
}
body.anime-mode::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(120deg, rgba(255,255,255,.02), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(114,162,255,.10), transparent 18%),
    radial-gradient(circle at 12% 88%, rgba(255,79,124,.08), transparent 18%);
}
@keyframes animeBgDrift{
  0%{transform:translate3d(-1%,0,0) scale(1)}
  100%{transform:translate3d(1.5%,-1%,0) scale(1.03)}
}
.anime-float{animation:animeFloat 6s ease-in-out infinite;}
.anime-float-slow{animation:animeFloat 9s ease-in-out infinite;}
.anime-glow-pulse{animation:animeGlowPulse 3.8s ease-in-out infinite alternate}
@keyframes animeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes animeGlowPulse{from{filter:drop-shadow(0 0 8px rgba(114,162,255,.20))}to{filter:drop-shadow(0 0 20px rgba(143,103,255,.32))}}
@keyframes animeSlideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

body.anime-mode .glass,
body.anime-mode .panel,
body.anime-mode .auth-card,
body.anime-mode .feature,
body.anime-mode .quick,
body.anime-mode .nav-item,
body.anime-mode .stat,
body.anime-mode .card{
  box-shadow:0 18px 52px rgba(8,10,24,.20), inset 0 1px rgba(255,255,255,.04);
}
body.anime-mode .panel:hover,
body.anime-mode .quick:hover,
body.anime-mode .feature:hover,
body.anime-mode .nav-item:hover,
body.anime-mode .glass:hover{
  transform:translateY(-3px);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-color:rgba(114,162,255,.18);
  box-shadow:0 24px 70px rgba(13,16,38,.28), 0 0 0 1px rgba(114,162,255,.08) inset;
}

/* auth */
.landing-page .hero-visual{overflow:visible}
.anime-auth-hero{
  position:absolute; right:-40px; bottom:-30px; width:min(38vw,420px); z-index:0; pointer-events:none;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
.landing-page .device-wrap{position:relative; z-index:2}
.anime-auth-glow{position:absolute; right:30px; bottom:40px; width:310px; height:310px; border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle, rgba(88,136,255,.24), transparent 70%); filter:blur(18px)}
.anime-auth-mascot{
  position:absolute; right:-26px; bottom:-44px; width:120px; z-index:3; pointer-events:none;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.26));
}
.landing-page .auth-card{position:relative; overflow:visible}
.landing-page.anime-mode .auth-card{box-shadow:0 26px 80px rgba(22,24,56,.42), inset 0 0 0 1px rgba(114,162,255,.08)}

/* dashboard */
body.dashboard-page.anime-mode .app-shell::before{
  content:""; position:fixed; right:-180px; top:80px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(114,162,255,.12), transparent 65%); filter:blur(24px); pointer-events:none; z-index:-1;
}
.anime-dashboard-banner{
  margin:22px 0 20px; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;
  padding:22px; border-radius:28px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(11,14,34,.86),rgba(17,20,45,.74));
  animation:animeSlideIn .55s ease both;
}
.anime-dashboard-banner::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(114,162,255,.10), transparent 45%, rgba(255,79,124,.08)); pointer-events:none}
.anime-dashboard-copy{position:relative; z-index:2}
.anime-dashboard-copy h3{margin:10px 0 8px; font-size:clamp(24px,3vw,34px); line-height:1.08; color:#fff}
.anime-dashboard-copy p{margin:0 0 14px; color:#b9c4e8; max-width:560px}
.anime-tag-row{display:flex; flex-wrap:wrap; gap:10px}
.anime-tag-row span{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.07); color:#d7def9; font-size:12px; border:1px solid rgba(255,255,255,.08)}
.anime-dashboard-visual{position:relative; min-height:280px; display:flex; justify-content:flex-end; align-items:center}
.anime-dashboard-visual img{width:100%; max-width:460px; border-radius:24px; object-fit:cover; box-shadow:0 26px 70px rgba(0,0,0,.34)}
.anime-dashboard-mascot{position:fixed; right:18px; bottom:20px; z-index:120; display:flex; align-items:flex-end; gap:10px; pointer-events:none}
.anime-dashboard-mascot img{width:118px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));}
.anime-dashboard-mascot .bubble{max-width:220px; padding:11px 14px; border-radius:18px 18px 6px 18px; background:linear-gradient(135deg,rgba(18,22,44,.95),rgba(30,34,71,.82)); color:#eef4ff; border:1px solid rgba(114,162,255,.18); box-shadow:0 16px 34px rgba(0,0,0,.24); font-size:12px; line-height:1.5}
.anime-dashboard-mascot .bubble strong{display:block; margin-bottom:4px; font-size:13px}
.anime-live-guardians{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; width:100%}
.anime-guardian-card{padding:14px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); text-align:center}
.anime-guardian-card img{width:100%; max-height:210px; object-fit:contain; margin-bottom:8px}
.anime-guardian-card h4{margin:0 0 4px; color:#fff; font-size:15px}
.anime-guardian-card p{margin:0; color:#aeb7d8; font-size:12px; line-height:1.45}
.anime-guardian-card.call{box-shadow:inset 0 0 0 1px rgba(49,203,255,.08)}
.anime-guardian-card.put{box-shadow:inset 0 0 0 1px rgba(255,79,124,.08)}
.anime-section-accent{
  margin:0 0 18px; padding:14px 16px; border-radius:22px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(12,15,35,.82), rgba(23,27,58,.70));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,220px); gap:16px; align-items:center;
  overflow:hidden; position:relative; animation:animeSlideIn .45s ease both;
}
.anime-section-accent::before{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(114,162,255,.08), transparent 55%, rgba(255,79,124,.06)); pointer-events:none;
}
.anime-section-accent-copy{position:relative; z-index:1}
.anime-section-kicker{font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:#85b5ff; margin-bottom:6px}
.anime-section-accent h4{margin:0 0 6px; font-size:20px; color:#fff}
.anime-section-accent p{margin:0; color:#c7d0f1; line-height:1.6; font-size:12px}
.anime-section-accent img{position:relative; z-index:1; width:100%; max-height:150px; object-fit:contain; justify-self:end; filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
body.anime-mode .placeholder.anime-with-accent{position:relative; overflow:hidden}
body.anime-mode .placeholder.anime-with-accent::after{content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, rgba(114,162,255,.55), transparent)}

/* admin */
body.admin-page.anime-mode main::before{
  content:""; position:fixed; left:-120px; top:110px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(143,103,255,.16), transparent 70%); filter:blur(22px); pointer-events:none; z-index:-1;
}
.anime-admin-banner{margin:18px 0 24px; display:grid; grid-template-columns:1fr; gap:18px; position:relative; overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg,rgba(10,12,28,.92),rgba(19,22,48,.82)); animation:animeSlideIn .55s ease both;}
.anime-admin-banner img{width:100%; height:auto; display:block}
.anime-admin-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:22px; background:linear-gradient(180deg,rgba(6,8,20,.02),rgba(6,8,20,.74) 88%)}
.anime-admin-overlay h3{margin:8px 0 6px; color:#fff; font-size:30px}
.anime-admin-overlay p{margin:0; max-width:640px; color:#d2daf5}
.anime-admin-mascot{position:fixed; right:18px; bottom:18px; z-index:120; width:92px; pointer-events:none; filter:drop-shadow(0 16px 34px rgba(0,0,0,.34));}

/* system pages */
.anime-system-shell{width:min(1020px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,390px); gap:24px; align-items:center}
.anime-system-card{padding:28px; text-align:left}
.anime-system-card h1{margin:8px 0 10px; font-size:clamp(30px,4.4vw,44px); line-height:1.06}
.anime-system-card p{color:#aeb7d5; line-height:1.7}
.anime-system-points{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 8px}
.anime-system-points span{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#d9e1ff; font-size:12px}
.anime-system-art{position:relative}
.anime-system-art img{width:100%; border-radius:28px; box-shadow:0 28px 80px rgba(0,0,0,.28)}
.anime-system-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.anime-system-actions a,.anime-system-actions button{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:14px; border:1px solid rgba(255,255,255,.08); text-decoration:none; color:#fff; font-weight:800; background:linear-gradient(135deg,#695ef8,#4e87ff,#35cedc); box-shadow:0 16px 34px rgba(92,104,255,.2); cursor:pointer}
.anime-system-actions .ghost{background:rgba(255,255,255,.06)}
.system-page-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:12px; font-weight:800; letter-spacing:.08em}
.system-page-badge i{width:8px; height:8px; border-radius:50%; background:#5dd6ff; box-shadow:0 0 16px currentColor}

@media (max-width:1080px){
  .anime-dashboard-banner{grid-template-columns:1fr}
  .anime-system-shell,.anime-section-accent{grid-template-columns:1fr}
}
@media (max-width:900px){
  .anime-auth-hero{width:min(52vw,320px); right:-18px; bottom:-18px; opacity:.92}
  .anime-auth-mascot{width:94px; right:-18px; bottom:-30px}
}
@media (max-width:760px){
  .anime-toggle{top:12px; right:12px; padding:10px 12px}
  .anime-toggle .anime-toggle-text span{font-size:12px}
  .anime-dashboard-mascot{right:10px; bottom:10px}
  .anime-dashboard-mascot img{width:88px}
  .anime-dashboard-mascot .bubble{max-width:160px; font-size:11px}
  .anime-live-guardians{grid-template-columns:1fr}
  .anime-admin-overlay h3{font-size:24px}
}


/* 6.0.0 full anime visual system */
body.anime-mode{isolation:isolate}
.anime-scene{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(circle at 14% 18%,rgba(143,103,255,.13),transparent 24%),
  radial-gradient(circle at 85% 20%,rgba(54,226,255,.10),transparent 22%),
  radial-gradient(circle at 72% 82%,rgba(255,79,124,.08),transparent 26%)}
.anime-grid{position:absolute;inset:-20%;opacity:.13;background-image:linear-gradient(rgba(114,162,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(114,162,255,.18) 1px,transparent 1px);background-size:56px 56px;transform:perspective(700px) rotateX(68deg) translateY(30%);transform-origin:center bottom;animation:animeGridDrift 18s linear infinite}
.anime-scanline{position:absolute;left:0;right:0;height:140px;top:-160px;background:linear-gradient(180deg,transparent,rgba(104,219,255,.055),transparent);animation:animeScan 10s linear infinite}
.anime-particles{position:absolute;inset:0}
.anime-particles i{position:absolute;left:var(--x);bottom:-18px;width:var(--size);height:var(--size);border-radius:50%;background:#b8d4ff;box-shadow:0 0 12px #72a2ff;opacity:.3;animation:animeParticle var(--dur) linear var(--delay) infinite}
@keyframes animeGridDrift{to{background-position:56px 56px}}
@keyframes animeScan{to{transform:translateY(calc(100vh + 300px))}}
@keyframes animeParticle{0%{transform:translate3d(0,20px,0) scale(.6);opacity:0}15%{opacity:.34}70%{opacity:.25}100%{transform:translate3d(34px,-110vh,0) scale(1.3);opacity:0}}

.anime-decorated{position:relative!important;overflow:hidden!important;isolation:isolate}
.anime-decorated>:not(.anime-card-watermark){position:relative;z-index:2}
.anime-card-watermark{position:absolute!important;z-index:0!important;right:-28px!important;bottom:-36px!important;width:min(190px,42%)!important;height:auto!important;max-height:88%!important;object-fit:contain!important;pointer-events:none!important;opacity:.052!important;filter:saturate(.9) drop-shadow(0 16px 24px rgba(0,0,0,.2))!important;transform:translate3d(0,0,0) scale(1.02);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)!important}
body.anime-mode .anime-decorated:hover>.anime-card-watermark{opacity:.105!important;transform:translate3d(-5px,-5px,0) scale(1.07)}
body.anime-mode .panel,body.anime-mode .feature,body.anime-mode .stat,body.anime-mode .metric,body.anime-mode .modal,body.anime-mode .quick{transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
body.anime-mode .panel:hover,body.anime-mode .feature:hover,body.anime-mode .stat:hover,body.anime-mode .metric:hover,body.anime-mode .quick:hover{border-color:rgba(114,162,255,.20);box-shadow:0 22px 70px rgba(0,0,0,.24),0 0 0 1px rgba(114,162,255,.035) inset}
body.anime-mode .primary,body.anime-mode .secondary,body.anime-mode button{position:relative;overflow:hidden}
body.anime-mode .primary::after,body.anime-mode .secondary::after{content:"";position:absolute;inset:-2px auto -2px -45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);animation:animeButtonShine 5.8s ease-in-out infinite;pointer-events:none}
@keyframes animeButtonShine{0%,72%{left:-45%}88%,100%{left:125%}}

.anime-verify-hero{position:absolute;right:-46px;bottom:-34px;width:180px;z-index:1;pointer-events:none;opacity:.24;filter:drop-shadow(0 18px 34px rgba(0,0,0,.36))}
.verify-page .card{position:relative;overflow:hidden}
.verify-page .card>form,.verify-page .card>.brand,.verify-page .card>.kicker,.verify-page .card>h1,.verify-page .card>.lead,.verify-page .card>.meta,.verify-page .card>.shield,.verify-page .card>.back{position:relative;z-index:3}

.dashboard-page.anime-mode .page.active{animation:animePageIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes animePageIn{from{opacity:.35;transform:translateY(9px) scale(.995)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .anime-card-watermark{width:min(140px,38%)!important;right:-24px!important;bottom:-24px!important;opacity:.045!important}
  .anime-verify-hero{width:130px;right:-36px;bottom:-20px;opacity:.16}
  .anime-grid{background-size:42px 42px}
}
@media(prefers-reduced-motion:reduce){
  .anime-float,.anime-float-slow,.anime-grid,.anime-scanline,.anime-particles i,.dashboard-page.anime-mode .page.active,body.anime-mode .primary::after,body.anime-mode .secondary::after{animation:none!important}
  .anime-card-watermark{transition:none!important}
}