.xerzio-shell { color: #111827; }
.dark .xerzio-shell { color: #f3f4f6; }
.xerzio-shell .magic-text {
  background: linear-gradient(90deg, #6a7fdb, #b8b3e9, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.xerzio-shell .menu-item, .xerzio-shell button, .xerzio-shell a { transition: all .25s ease; }
.xerzio-shell .menu-item:hover { color: #6a7fdb; }
.xerzio-shell .xerzio-badge {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(106,127,219,.12);
  color: #3248b6; border: 1px solid rgba(106,127,219,.18); padding: .7rem 1rem; border-radius: 999px; font-size: .92rem;
}
.dark .xerzio-shell .xerzio-badge { color: #d9e8ff; background: rgba(184,179,233,.12); }
.xerzio-status-dot { width: 10px; height: 10px; border-radius: 999px; background: #00e5ff; box-shadow: 0 0 18px #00e5ff; }
.xerzio-shell .card-hover:hover { transform: translateY(-8px); }
.xerzio-shell .xerzio-panel {
  background: rgba(255,255,255,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(106,127,219,.12); box-shadow: 0 14px 40px rgba(31,41,55,.08);
}
.dark .xerzio-shell .xerzio-panel { background: rgba(17,24,39,.7); border-color: rgba(184,179,233,.12); }
.xerzio-shell .slide-in { opacity: 0; transform: translateY(30px); transition: all .6s ease; }
.xerzio-shell .slide-in.active { opacity: 1; transform: translateY(0); }
.xerzio-shell .star {
  position: absolute; border-radius: 50%; background: rgba(184,179,233,.9); animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.9);} 50% { opacity: 1; transform: scale(1.6);} }

.shine-button {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6a7fdb 0%, #8f9af0 45%, #b8b3e9 100%);
  box-shadow: 0 12px 28px rgba(106,127,219,.25); transition: transform .25s ease, box-shadow .25s ease;
}
.shine-button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(106,127,219,.35); }
.shine-button::before {
  content: ""; position: absolute; top: -120%; left: -40%; width: 36%; height: 340%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.15) 68%, transparent 100%);
  transform: rotate(20deg) translateX(-220%); transition: transform .8s ease;
}
.shine-button:hover::before { transform: rotate(20deg) translateX(520%); }
.ghost-button {
  border: 1px solid rgba(106,127,219,.25); background: rgba(255,255,255,.84); color: #596ecb;
  backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(17,24,39,.05);
}
.dark .ghost-button { background: rgba(17,24,39,.72); color: #d9e8ff; border-color: rgba(184,179,233,.18); }
.ghost-button:hover { transform: translateY(-2px); }

.xerzio-list-item { display: flex; align-items: center; gap: 12px; color: #4b5563; }
.dark .xerzio-list-item { color: #d1d5db; }
.xerzio-list-item i { color: #6a7fdb; }

.xerzio-modal-overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(10,15,30,.72); padding: 20px;
}
.xerzio-modal-card {
  position: relative; width: 100%; max-width: 540px; border-radius: 32px; padding: 34px 28px 26px;
  background: rgba(255,255,255,.97); box-shadow: 0 30px 80px rgba(0,0,0,.3); border: 1px solid rgba(184,179,233,.35);
}
.dark .xerzio-modal-card { background: rgba(17,24,39,.98); }
.xerzio-modal-close {
  position: absolute; right: 16px; top: 8px; font-size: 34px; line-height: 1; color: #6b7280; background: transparent; border: 0;
}
.xerzio-modal-close:hover { color: #6a7fdb; }

.xerzio-field { position: relative; display: block; }
.xerzio-input {
  width: 100%; height: 64px; padding: 24px 16px 10px; border-radius: 14px; border: 1.5px solid #d6daf7; background: #f7f8fc;
  outline: none; font-size: 1rem; color: #111827; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dark .xerzio-input { background: rgba(31,41,55,.8); color: #fff; border-color: rgba(184,179,233,.18); }
.xerzio-field span {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #6b7bd6; pointer-events: none; transition: all .18s ease;
  background: transparent; padding: 0 4px;
}
.xerzio-input:focus { border-color: #6a7fdb; background: #fff; box-shadow: 0 0 0 4px rgba(106,127,219,.10); }
.dark .xerzio-input:focus { background: rgba(17,24,39,.98); }
.xerzio-input:focus + span,
.xerzio-input:not(:placeholder-shown) + span {
  top: 0; transform: translateY(-50%); font-size: .82rem; color: #6a7fdb; background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 100%);
}
.dark .xerzio-input:focus + span,
.dark .xerzio-input:not(:placeholder-shown) + span { background: linear-gradient(to bottom, transparent 45%, rgba(17,24,39,.98) 45%, rgba(17,24,39,.98) 100%); }
.xerzio-otp-input { letter-spacing: .30em; font-weight: 700; }
.xerzio-form-message { min-height: 24px; margin-top: 12px; font-size: .95rem; }
.xerzio-form-message.success { color: #089981; }
.xerzio-form-message.error { color: #dc2626; }
body.xerzio-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .xerzio-modal-card { padding: 28px 18px 22px; border-radius: 24px; }
  .xerzio-input { height: 58px; }
}