* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: #0e0e10; color: #fff; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
.view { min-height: 100%; }
.hidden { display: none; }

.card { max-width: 380px; margin: 18vh auto 0; padding: 26px 22px; background: #1a1a1e;
  border-radius: 16px; border: 1px solid #2a2a2e; }
.card h1 { font-size: 19px; margin-bottom: 20px; text-align: center; }
.inp { width: 100%; background: #121216; border: 1px solid #2a2a2e; color: #fff;
  border-radius: 10px; padding: 13px 12px; font-size: 15px; margin-bottom: 12px; }
.inp::placeholder { color: #777; }
.primary { width: 100%; background: #2a6df4; color: #fff; border: none; border-radius: 10px;
  padding: 14px; font-size: 16px; }
.primary:active { background: #1f5bd0; }
.err { color: #ff8080; font-size: 13px; text-align: center; min-height: 18px; margin-top: 6px; }
.hint { color: #888; font-size: 12px; text-align: center; margin-top: 10px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  font-size: 16px; font-weight: 600; border-bottom: 1px solid #222; position: sticky; top: 0;
  background: #0e0e10; z-index: 5; }
.ghost { background: #2a2a2e; color: #fff; border: none; border-radius: 10px; padding: 8px 16px; font-size: 14px; }
.body { padding: 16px 18px 40px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 768px) { .body { flex-direction: column !important; } }
.sec { margin-bottom: 26px; }
.sec h2 { font-size: 15px; margin-bottom: 12px; }
.sec h2 small { color: #9aa; font-weight: 400; font-size: 12px; margin-left: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: #1c1c20;
  border: 1px solid #2a6df4; color: #cfe0ff; border-radius: 18px; padding: 8px 12px; font-size: 14px; transition: border-color 0.15s, background 0.15s; }
.tag.drag-over { background: #1a3a6a; border-color: #5ba0ff; }
.tag-red { border-color: #e04040 !important; }
.tag-red.drag-over { background: #3a1a1a !important; border-color: #ff6060 !important; }
.tag-x { background: transparent; border: none; color: #ff8080; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.loc-block { margin-bottom: 14px; }
.loc-title { font-size: 13px; color: #7FA8FF; margin: 8px 0 6px; }
.add { display: flex; gap: 8px; margin-top: 10px; }
.small { background: #2a6df4; color: #fff; border: none; border-radius: 10px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.small:active { background: #1f5bd0; }
.toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.85);
  color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 14px; opacity: 0; transition: opacity .25s; z-index: 20; pointer-events: none; }
.toast.show { opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; padding: 18px; background: rgba(0,0,0,.78); }
.modal-backdrop.hidden { display: none; }
.password-modal { width: min(420px, 100%); padding: 22px; border: 1px solid #34343a;
  border-radius: 14px; background: #1a1a1e; }
.password-modal h3 { margin-bottom: 8px; font-size: 18px; }
.password-target { margin-bottom: 14px; color: #9fbaff; }
.password-input-row { display: flex; gap: 8px; align-items: stretch; }
.password-input-row .inp { margin-bottom: 0; }
.password-toggle { min-width: 66px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.inspector-password-btn { border: 0; background: transparent; color: #7fa8ff; cursor: pointer;
  white-space: nowrap; font-size: 13px; }

/* 分组标签页 */
.group-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.group-tab { background: #1c1c20; border: 1px solid #2a2a2e; color: #9aa; padding: 8px 14px;
  border-radius: 20px; font-size: 13px; cursor: pointer; transition: all .15s; }
.group-tab:hover { border-color: #4a6df4; color: #cfe0ff; }
.group-tab.active { background: #2a6df4; border-color: #2a6df4; color: #fff; font-weight: 600; }
.group-panel { display: none; }
.group-panel.active { display: block; }
.group-panel h3 { font-size: 14px; color: #7FA8FF; margin-bottom: 10px; }

/* 折叠区域 */
.collapsible { cursor: pointer; user-select: none; }
.collapsible:hover { opacity: 0.8; }
.collapsible small { pointer-events: none; }
.section-content { overflow: hidden; transition: max-height 0.3s ease-out; }
.section-content.collapsed { max-height: 0 !important; }

/* 登录方式切换 */
.login-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  background: #121216;
  border-radius: 10px;
  padding: 4px;
}
.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: #888;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.login-tab.active {
  background: #2a6df4;
  color: #fff;
}

/* 二维码容器 */
.qr-container {
  text-align: center;
  padding: 20px 0;
}
.qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.qr-code canvas {
  display: block;
}
.qr-hint {
  font-size: 14px;
  color: #cfe0ff;
  margin-bottom: 4px;
}
.qr-sub-hint {
  font-size: 12px;
  color: #888;
}

/* 次要按钮 */
.secondary {
  width: 100%;
  background: #2a2a2e;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
}
.secondary:active {
  background: #3a3a3e;
}