*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root,[data-theme="dark"]{
  --bg:#07090e;--surface:#0e1117;--card:#131820;--border:#1d2535;
  --accent:#00d4f5;--accent2:#7c5cff;--green:#00e676;--red:#ff1744;
  --yellow:#ffd600;--orange:#ff9100;
  --text:#dde4f0;--muted:#5a6a80;--radius:14px;
  --glow:0 0 20px rgba(0,212,245,.18);
}
[data-theme="light"]{
  --bg:#f2f4f8;--surface:#ffffff;--card:#ffffff;--border:#e0e5ef;
  --accent:#0077cc;--accent2:#5b4de8;--green:#1a9e5c;--red:#d92b3a;
  --yellow:#e6a800;--orange:#e07000;
  --text:#1a1d26;--muted:#7a8499;--radius:14px;
  --glow:0 0 20px rgba(0,119,204,.12);
}

/* BASE STYLES */
html,body{
  font-family:"Sora",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:rgba(7,9,14,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
[data-theme="light"] .header{background:rgba(255,255,255,.92)}
.logo{display:flex;align-items:center;gap:9px}
.logo-icon{font-size:1.35rem;line-height:1}
.logo-text{font-weight:800;font-size:1rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.header-right{display:flex;align-items:center;gap:10px}

/* THEME BUTTON */
.theme-btn{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:50%;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.95rem;
  transition:all .2s;
}
.theme-btn:hover{border-color:var(--accent);background:rgba(0,212,245,.08)}

/* PROFILE */
.profile-wrap{position:relative}
.profile-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 10px 5px 5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  cursor:pointer;
  transition:all .2s;
}
.profile-btn:hover{border-color:var(--accent)}
.profile-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:700;
  color:#000;
}
.profile-name{font-size:.82rem;font-weight:600;color:var(--text)}

/* DROPDOWN */
.dropdown{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:180px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all .18s ease;
  z-index:200;
}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{
  padding:11px 15px;
  font-size:.82rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .15s;
}
.dropdown-item:hover{background:rgba(0,212,245,.06)}
.dropdown-item.danger{color:var(--red)}
.dropdown-item.danger:hover{background:rgba(255,23,68,.08)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.provider-chip{
  background:rgba(0,212,245,.12);
  color:var(--accent);
  font-size:.68rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  margin-left:auto;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:10px;
  font-family:"Sora",sans-serif;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#000;
  box-shadow:0 4px 18px rgba(0,212,245,.22);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,212,245,.32)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,245,.06)}
.btn-sm{padding:7px 12px;font-size:.76rem;border-radius:8px}
.btn-copy{background:rgba(0,212,245,.1);border:1px solid rgba(0,212,245,.25);color:var(--accent)}
.btn-copy:hover{background:rgba(0,212,245,.18);border-color:var(--accent)}
.btn-restore{background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.25);color:var(--accent2)}
.btn-restore:hover{background:rgba(124,92,255,.18);border-color:var(--accent2)}

/* SPINNER */
.spinner{
  width:20px;
  height:20px;
  border:2.5px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOADING OVERLAY */
.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(7,9,14,.85);
  backdrop-filter:blur(8px);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  z-index:1000;
}
.loading-overlay.show{display:flex}
.loading-text{font-size:.85rem;color:var(--muted);font-weight:500}

/* TOAST */
.toast{
  position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 20px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:all .25s ease;
  z-index:1100;
  max-width:90%;
  text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.toast.error{border-color:var(--red);color:var(--red)}

/* v8: compact toast on small screens */
@media (max-width: 480px){
  .toast{
    bottom:70px;
    padding:8px 14px;
    font-size:.74rem;
    border-radius:10px;
    max-width:80%;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
  }
}