:root{
  --ica-blue:#2563EB;
  --ica-gold:#F59E0B;
  --ica-success:#10B981;
  --ica-bg:#F8FAFC;
  --ica-line:#E5E7EB;
  --ica-text:#0F172A;
}

.ica-hub-strip,
.ica-dashboard-panel,
.ica-badges-hero,
.ica-badge-progress-card,
.ica-badge-card,
.ica-unlock-modal,
.ica-toast,
.ika-mascot .ika-bubble,
.ika-mascot .ika-avatar{
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.ica-hub-strip,
.ica-dashboard-panel,
.ica-badges-hero{
  background:#fff;
  border:1px solid rgba(37,99,235,.1);
  border-radius:24px;
}

.ica-hub-strip{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  padding:28px;
  margin:0 0 28px;
  background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(245,158,11,.07));
}
.ica-hub-copy h2,
.ica-badges-hero h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:8px 0 10px;}
.ica-hub-copy p,
.ica-badges-hero p{color:#64748B;margin:0;max-width:58ch}
.ica-hub-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ica-hub-badges span{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.06);font-weight:600;color:#0F172A}
.ica-hub-actions{display:grid;gap:16px;align-content:start}

.ica-badge-progress-card{padding:20px;border-radius:22px;border:1px solid rgba(245,158,11,.18);background:linear-gradient(180deg,#fff,rgba(248,250,252,.95));}
.ica-badge-progress-card.empty{background:#fff;border-style:dashed}
.ica-badge-progress-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ica-badge-progress-head h3{margin:6px 0;font-size:1.25rem}
.ica-badge-progress-head p{margin:0;color:#64748B;font-size:.96rem}
.ica-badge-progress-icon{width:88px;height:88px;object-fit:contain}
.ica-progress-track{height:12px;border-radius:999px;background:#E5E7EB;overflow:hidden;margin:18px 0 12px}
.ica-progress-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ica-blue),var(--ica-gold));}
.ica-progress-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;color:#64748B;font-size:.94rem}
.ica-progress-meta strong{color:#0F172A;font-size:1.08rem}

.ica-dashboard-panel{padding:22px;margin-top:18px}
.ica-dashboard-panel.full{margin-top:22px}
.ica-rank-chip{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(245,158,11,.08));border:1px solid rgba(37,99,235,.1)}
.ica-rank-chip.compact{margin-top:16px}
.ica-rank-chip img{width:64px;height:64px;object-fit:contain;flex:none}
.ica-rank-chip span{display:block;color:#64748B;font-size:.9rem}
.ica-rank-chip strong{display:block;color:#0F172A;font-size:1rem}
.ica-stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.ica-stats-mini div,.ica-inline-badge,.ica-recent-badge{background:#F8FAFC;border:1px solid var(--ica-line);border-radius:18px;padding:12px}
.ica-stats-mini span{display:block;color:#64748B;font-size:.82rem}
.ica-stats-mini strong{font-size:1.2rem;color:#0F172A}
.ica-recent-badges,.ica-inline-badges{display:grid;gap:12px;margin-top:16px}
.ica-inline-badges{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ica-recent-badge,.ica-inline-badge{display:flex;align-items:center;gap:12px}
.ica-recent-badge img,.ica-inline-badge img{width:50px;height:50px;object-fit:contain}
.ica-recent-badge span,.ica-inline-badge span{color:#64748B;font-size:.86rem}

.ica-badges-hero{display:grid;grid-template-columns:1fr .95fr;gap:24px;padding:28px;margin-bottom:22px;background:linear-gradient(140deg, rgba(37,99,235,.08), rgba(245,158,11,.08));}
.ica-badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.ica-badge-card{display:flex;gap:14px;padding:16px;background:linear-gradient(180deg,#ffffff 0%,#fffaf2 100%);border:1px solid rgba(192,139,54,.16);border-radius:22px;cursor:pointer;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;outline:none;box-shadow:0 14px 30px rgba(15,23,42,.06)}
.ica-badge-card:hover,.ica-badge-card:focus-visible{transform:translateY(-4px);border-color:rgba(192,139,54,.34);box-shadow:0 18px 34px rgba(15,23,42,.1)}
.ica-badge-card.is-locked{opacity:.75}
.ica-badge-card.is-near{border-color:rgba(192,139,54,.4);background:linear-gradient(180deg,#fffdf7,rgba(192,139,54,.08))}
.ica-badge-card.is-unlocked{border-color:rgba(176,132,53,.3)}
.ica-badge-card.rarity-legendary{background:linear-gradient(180deg, rgba(250,237,206,.85), rgba(255,255,255,.98));}
.ica-badge-art{width:86px;min-width:86px;height:86px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(180deg,#fffdf7,rgba(192,139,54,.08));border:1px solid rgba(45,36,24,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.ica-badge-art img{width:72px;height:72px;object-fit:contain}
.ica-badge-meta{display:grid;gap:10px;min-width:0}
.ica-badge-meta h3{margin:0;font-size:1.08rem;color:#0F172A}
.ica-badge-meta p{margin:0;color:#64748B;font-size:.92rem}
.ica-badge-topline,.ica-badge-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.ica-badge-pill{padding:6px 10px;border-radius:999px;background:rgba(24,52,92,.08);color:#173056;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ica-badge-pill.is-soft{background:rgba(192,139,54,.14);color:#8C5A18}
.ica-mini-progress{height:10px;border-radius:999px;background:#E5E7EB;overflow:hidden;flex:1}
.ica-mini-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--ica-blue),var(--ica-gold));border-radius:999px}
.ica-badge-progress-row{display:flex;align-items:center;gap:10px}
.ica-badge-foot{font-size:.8rem;color:#64748B}

.is-shimmer{position:relative;overflow:hidden}
.is-shimmer::after{content:'';position:absolute;inset:-20%;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);animation:icaShimmer 2.4s linear infinite;}
@keyframes icaShimmer{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

.ica-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:18px;z-index:1100}
.ica-unlock-modal{position:relative;max-width:560px;width:min(100%,560px);background:#fff;border-radius:28px;padding:28px;text-align:center;overflow:hidden;border:1px solid rgba(37,99,235,.1)}
.ica-unlock-modal.is-legendary{background:linear-gradient(180deg, rgba(254,243,199,.6), #fff)}
.ica-modal-close{position:absolute;top:14px;right:14px;border:0;background:#fff;padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:700;color:#0F172A}
.ica-unlock-icon{width:120px;height:120px;object-fit:contain;margin:10px auto 14px;display:block}
.ica-unlock-modal h2{font-size:2rem;margin:6px 0}
.ica-unlock-modal p{color:#64748B;margin:0 auto;max-width:34ch}
.ica-unlock-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.ica-unlock-meta span{padding:8px 12px;border-radius:999px;background:#F8FAFC;border:1px solid var(--ica-line);font-weight:600}
.ica-unlock-burst{position:absolute;inset:-40%;pointer-events:none;background:
radial-gradient(circle at 30% 40%, rgba(245,158,11,.2) 0 3%, transparent 4%),
radial-gradient(circle at 70% 28%, rgba(37,99,235,.16) 0 3%, transparent 4%),
radial-gradient(circle at 40% 76%, rgba(16,185,129,.18) 0 3%, transparent 4%),
radial-gradient(circle at 65% 74%, rgba(245,158,11,.2) 0 2.5%, transparent 3%);
animation:icaFloat 6s linear infinite;opacity:.9}
@keyframes icaFloat{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.ica-toast-rail{position:fixed;top:94px;right:16px;display:grid;gap:10px;z-index:1150}
.ica-toast{min-width:240px;max-width:min(88vw,340px);padding:14px 16px;border-radius:16px;background:#fff;border:1px solid rgba(15,23,42,.08);transform:translateY(-10px);opacity:0;transition:all .24s ease;color:#0F172A;font-weight:600}
.ica-toast.is-visible{opacity:1;transform:translateY(0)}
.ica-toast.success{border-color:rgba(16,185,129,.3);background:linear-gradient(180deg,#fff,rgba(16,185,129,.06))}
.ica-toast.accent{border-color:rgba(245,158,11,.35);background:linear-gradient(180deg,#fff,rgba(245,158,11,.08))}

.ika-mascot{position:fixed;right:18px;bottom:96px;z-index:1000;display:grid;justify-items:end;gap:10px;pointer-events:none}
.ika-mascot.is-hidden .ika-bubble{display:none}
.ika-fab-toggle,.ika-avatar{pointer-events:auto}
.ika-fab-toggle{width:44px;height:44px;border-radius:999px;border:0;background:#fff;color:#0F172A;font-size:1.35rem;cursor:pointer;font-weight:800;box-shadow:0 10px 30px rgba(15,23,42,.12)}
.ika-bubble{position:relative;max-width:min(84vw,292px);padding:14px 16px 14px 18px;border-radius:20px 20px 8px 20px;background:linear-gradient(180deg,#fffaf0 0%,#ffffff 56%,#fbf7ee 100%);border:1px solid rgba(192,139,54,.22);font-size:.93rem;line-height:1.45;color:#2D2418;opacity:0;transform:translateY(6px) scale(.98);transition:all .2s ease;pointer-events:none;box-shadow:0 18px 34px rgba(15,23,42,.12)}
.ika-bubble.is-visible{opacity:1;transform:translateY(0) scale(1)}
.ika-bubble::before{content:'“';position:absolute;top:7px;left:11px;font-size:1.4rem;line-height:1;color:rgba(192,139,54,.34);font-weight:800}
.ika-bubble::after{content:'';position:absolute;inset:6px;border-radius:16px;border:1px solid rgba(45,36,24,.06);pointer-events:none}
.ika-avatar{position:relative;width:126px;height:126px;border-radius:34px;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.98),rgba(255,250,240,.86) 24%,rgba(234,219,187,.38) 25%,rgba(18,35,58,.16) 72%),linear-gradient(180deg,#fffdf8 0%,rgba(246,238,221,.96) 48%,rgba(24,45,76,.08) 100%);display:grid;place-items:center;border:1px solid rgba(192,139,54,.18);cursor:pointer;transition:transform .24s ease,opacity .24s ease,box-shadow .24s ease;box-shadow:0 24px 60px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.82)}
.ika-avatar:hover{transform:translateY(-2px);box-shadow:0 28px 62px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.86)}
.ika-avatar::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(192,139,54,.2);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 65%)}
.ika-avatar svg{width:104px;height:104px;overflow:visible}
.ika-avatar::after{content:'';position:absolute;inset:18px;border-radius:22px;border:1px dashed rgba(192,139,54,.14);pointer-events:none}
.ika-mascot.is-hidden .ika-avatar{width:56px;height:56px;border-radius:999px;opacity:.94;box-shadow:0 14px 30px rgba(15,23,42,.14)}
.ika-mascot.is-hidden .ika-avatar svg{width:46px;height:46px}
.ika-avatar.is-idle{animation:ikaBob 3.2s ease-in-out infinite}
.ika-avatar.is-happy{animation:ikaHop .8s ease-in-out 2}
.ika-avatar.is-sad{animation:ikaTilt 1.2s ease-in-out 2}
.ika-avatar.is-thinking{animation:ikaThink 1.6s ease-in-out infinite}
.ika-avatar.is-celebrating{animation:ikaCelebrate .95s ease-in-out 3}
.ika-avatar.is-cool{animation:ikaCool 1.6s ease-in-out infinite}
.ika-avatar.is-sleeping{animation:ikaSleep 2.4s ease-in-out infinite}

.ika-avatar .ika-shadow,.ika-avatar .ika-wing,.ika-avatar .ika-body,.ika-avatar .ika-brow,.ika-avatar .ika-eye,.ika-avatar .ika-eye-shell,.ika-avatar .ika-mouth,.ika-avatar .ika-star,.ika-avatar .ika-tail{transition:transform .24s ease,opacity .24s ease}
.ika-avatar .ika-halo,.ika-avatar .ika-crown-base,.ika-avatar .ika-crown-shadow,.ika-avatar .ika-crown-gem,.ika-avatar .ika-crown-rim{transition:transform .24s ease,opacity .24s ease}
.ika-avatar .ika-eye,.ika-avatar .ika-eye-shell,.ika-avatar .ika-eye-spark{transform-origin:center}
.ika-avatar .ika-brow.left,.ika-avatar .ika-brow.right{transform-origin:center}
.ika-avatar .ika-arm-left,.ika-avatar .ika-arm-right{transform-origin:80px 92px;transition:transform .24s ease}
.ika-avatar .ika-star{transition:all .2s ease;opacity:.92;filter:drop-shadow(0 3px 10px rgba(245,158,11,.28))}

.ika-avatar.is-idle .ika-eye-shell,.ika-avatar.is-idle .ika-eye,.ika-avatar.is-idle .ika-eye-spark{animation:ikaBlink 6.2s ease-in-out infinite}
.ika-avatar.is-thinking .ika-eye-shell.left,.ika-avatar.is-thinking .ika-eye.left{transform:translateX(-1px) scaleY(.72)}
.ika-avatar.is-thinking .ika-eye-shell.right,.ika-avatar.is-thinking .ika-eye.right{transform:translateX(1px) scaleY(.72)}
.ika-avatar.is-thinking .ika-brow.left{transform:translateY(-1px) rotate(-4deg)}
.ika-avatar.is-thinking .ika-brow.right{transform:translateY(-1px) rotate(4deg)}
.ika-avatar.is-sleeping .ika-eye-shell,.ika-avatar.is-sleeping .ika-eye,.ika-avatar.is-sleeping .ika-eye-spark{transform:scaleY(.12)}
.ika-avatar.is-sad .ika-mouth{transform:translateY(2px) scaleX(.9)}
.ika-avatar.is-cool .ika-star{opacity:1;transform:translateY(-5px) scale(1.06)}
.ika-avatar.is-happy .ika-arm-left{transform:rotate(-10deg) translate(-2px,-2px)}
.ika-avatar.is-happy .ika-arm-right{transform:rotate(10deg) translate(2px,-2px)}
.ika-avatar.is-celebrating .ika-arm-left{transform:rotate(-20deg) translate(-6px,-5px)}
.ika-avatar.is-celebrating .ika-arm-right{transform:rotate(20deg) translate(6px,-5px)}

@keyframes ikaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ikaHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) scale(1.03)}}
@keyframes ikaTilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes ikaThink{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes ikaCelebrate{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}75%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes ikaCool{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes ikaSleep{0%,100%{transform:translateY(0)}50%{transform:translateY(2px) scale(.99)}}
@keyframes ikaBlink{0%,45%,47%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}

.empty-state.compact{padding:16px;border-radius:18px;background:#F8FAFC;border:1px dashed var(--ica-line)}
.btn-sm{padding:10px 14px;font-size:.9rem}

@media (max-width: 900px){
  .ica-hub-strip,.ica-badges-hero{grid-template-columns:1fr;padding:22px}
}
@media (max-width: 720px){
  .ica-toast-rail{left:12px;right:12px;top:auto;bottom:88px}
  .ica-toast{max-width:none;min-width:0}
  .ika-mascot{right:12px;bottom:86px}
  .ika-avatar{width:88px;height:88px}
  .ika-avatar svg{width:74px;height:74px}
  .ica-badge-grid{grid-template-columns:1fr}
  .ica-badge-card{padding:14px}
  .ica-badge-art{width:74px;min-width:74px;height:74px}
  .ica-badge-art img{width:62px;height:62px}
  .ica-stats-mini{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 560px){
  .ica-progress-meta,.ica-badge-foot,.ica-badge-topline{display:grid;gap:6px;justify-content:start}
  .ica-stats-mini{grid-template-columns:1fr}
  .ica-hub-badges span{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .is-shimmer::after,
  .ika-avatar,
  .ica-unlock-burst{animation:none !important}
  .ica-badge-card,.ica-toast,.ika-bubble{transition:none !important}
}

.ika-avatar.is-speaking{animation:ikaTalk .7s ease-in-out infinite}
.ika-avatar.is-speaking .ika-mouth{animation:ikaMouth .22s ease-in-out infinite;transform-origin:50% 50%}
.ika-avatar.is-speaking .ika-eye-shell{animation:ikaBlinkSoft 2.6s ease-in-out infinite}
.ika-bubble.is-voice{box-shadow:0 18px 34px rgba(37,99,235,.16), 0 0 0 5px rgba(197,165,90,.08)}
@keyframes ikaTalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ikaMouth{0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(1.14) scaleY(1.3)}}
@keyframes ikaBlinkSoft{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.15)}}

.ika-avatar .ika-crown-base{filter:drop-shadow(0 8px 14px rgba(180,83,9,.22))}
.ika-avatar .ika-crown-gem.top{filter:drop-shadow(0 0 10px rgba(254,243,199,.55))}
.ika-avatar .ika-crown-gem.left,.ika-avatar .ika-crown-gem.right{opacity:.95}
.ika-avatar.is-happy .ika-crown-base,.ika-avatar.is-celebrating .ika-crown-base{transform:translateY(-1px) scale(1.02)}
.ika-avatar.is-thinking .ika-crown-gem.top{opacity:.92;transform:scale(1.06)}
.ika-avatar.is-celebrating .ika-star{opacity:1;transform:translateY(-7px) scale(1.1)}