/* RubyOTP styles - minimal custom on top of Tailwind CDN */
:root{
  --ruby:#e11d48;
  --ruby-dark:#9f1239;
  --bg:#0b0d12;
  --surface:#11141b;
  --surface-2:#171b24;
  --border:#222836;
  --text:#e5e7eb;
  --muted:#94a3b8;
}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',ui-sans-serif,system-ui,sans-serif;}
.glass{background:linear-gradient(180deg,rgba(225,29,72,.08),rgba(0,0,0,0));border:1px solid var(--border);backdrop-filter:blur(8px);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;}
.card-2{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;}
.btn-ruby{background:linear-gradient(135deg,#f43f5e,#9f1239);color:#fff;}
.btn-ruby:hover{filter:brightness(1.08);}
.input{background:#0e1118;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:.6rem .8rem;width:100%;outline:none;}
.input:focus{border-color:var(--ruby);box-shadow:0 0 0 3px rgba(225,29,72,.15);}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;font-size:.7rem;font-weight:600;}
.badge-ok{background:rgba(34,197,94,.15);color:#4ade80;}
.badge-pending{background:rgba(234,179,8,.15);color:#facc15;}
.badge-fail{background:rgba(239,68,68,.15);color:#f87171;}
.scroll-thin::-webkit-scrollbar{height:6px;width:6px;}
.scroll-thin::-webkit-scrollbar-thumb{background:#2a3142;border-radius:3px;}
.spinner{width:18px;height:18px;border:2px solid #fff5;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fade .3s ease both;}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.toast{position:fixed;top:1rem;right:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem;}
.toast > div{background:#171b24;border:1px solid var(--border);border-left:4px solid var(--ruby);padding:.7rem 1rem;border-radius:10px;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.4);}
.tab-active{background:linear-gradient(135deg,#f43f5e,#9f1239);color:#fff;}
.nav-item.active{background:rgba(225,29,72,.12);color:#fff;border-left:3px solid var(--ruby);}
.skeleton{background:linear-gradient(90deg,#1a1f2c 0%,#222836 50%,#1a1f2c 100%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:768px){
  .sidebar{position:fixed;left:-100%;top:0;height:100vh;width:80%;max-width:320px;z-index:60;transition:left .25s ease;}
  .sidebar.open{left:0;}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;display:none;}
  .sidebar-overlay.open{display:block;}
}