:root{--brand:#9b87f5;--brand-600:#7c6cf0;--bg:#faf7ff;--text:#2f2a44;--muted:#7a7394;--white:#fff;--border:#eee7ff}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Microsoft YaHei;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;background:var(--white);padding:12px;border-bottom:1px solid var(--border);z-index:5;display:flex;gap:8px;align-items:center;justify-content:space-between}
.topbar .title{font-weight:800;color:var(--brand)}.content{padding:10px 10px 72px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.col{background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px}
.col h2{margin:4px 4px 8px;font-size:16px;color:var(--brand)}.list{display:flex;flex-direction:column;gap:8px}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:60px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.tab{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-weight:600}.tab.active{color:var(--brand)}
.pills{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:8px}.pill{background:#fff;border:1px solid var(--border);border-radius:9999px;padding:8px 0;text-align:center;color:var(--muted)}
.pill.active{border-color:var(--brand-600);color:var(--brand-600);background:#f4f1ff}.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px}
.btn{border:none;border-radius:12px;padding:10px 14px;font-weight:700}.btn-primary{background:linear-gradient(135deg,#a78bfa,#8b5cf6);color:#fff}.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.small{font-size:12px;color:var(--muted)}
.product-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;gap:10px}
.product-img{width:60px;height:60px;border-radius:10px;background:#ede9fe;display:flex;align-items:center;justify-content:center;color:#7c6cf0;font-weight:800}
.sep{height:1px;background:var(--border);margin:8px 0}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:9999px;background:#fff;cursor:pointer;user-select:none}
.chip.active{border-color:var(--brand-600);color:var(--brand-600);background:#f4f1ff}


/* --- My Account page minimal styles --- */
.account-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.account-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 24px 22px;
}
.brand {
  font-size: 20px;
  text-align: center;
  margin: 0 0 8px;
}
.section-title {
  font-size: 18px;
  text-align: center;
  margin: 8px 0 16px;
}
.auth-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  font-size: 14px;
}
.auth-form .field span {
  margin-bottom: 6px;
  color: #333;
}
.auth-form input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
}
.actions { margin-top: 10px; }
.btn {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.btn.primary { background:#111; color:#fff; }
.or {
  text-align: center;
  margin: 14px 0;
  color: #888;
}
.google-btn { display:flex; justify-content:center; }
.signup { text-align:center; margin-top: 10px; }
.link { color:#0b57d0; text-decoration:none; }
.link:hover { text-decoration:underline; }


.auth-switch { text-align:center; margin-top:10px; display:flex; gap:10px; justify-content:center; align-items:center; }
.auth-switch .sep { color:#bbb; }

.google-caption{ text-align:center; font-size:14px; color:#555; margin:8px 0 10px; }