/* ===== Music Party · Multi-Library Fusion =====
   Brutalist: hard borders + offset shadows
   Glass: backdrop-filter blur
   Magic UI: animated gradient text + glow keyframes
   DaisyUI cyberpunk: neon accents on dark bg
   Radix: clean component primitives
   =============================================== */
* { box-sizing:border-box; margin:0; padding:0; }

:root {
  color-scheme:dark;
  --bg:#0A0A0A;
  --bg-surface:rgba(0,0,0,0.55);
  --bg-card:rgba(0,0,0,0.65);
  --bg-glass:rgba(0,0,0,0.5);
  --border:#3D3D3D;
  --border-strong:#555555;
  --bw:3px;

  --primary:#66CCFF;
  --primary-rgb:102,204,255;
  --primary-dim:rgba(var(--primary-rgb),0.15);
  --primary-glow:rgba(var(--primary-rgb),0.3);
  --primary-light:#99DDFF;

  --accent-orange:#FF8C42;
  --accent-green:#44E688;
  --accent-pink:#FF6699;

  --text:#F5F5F5;
  --text-secondary:#A0A0A0;
  --text-muted:#666;

  --bw-sm:2px;
  --font:"JetBrains Mono","Segoe UI","Microsoft YaHei","PingFang SC",system-ui,monospace;
  --font-display:"JetBrains Mono","Segoe UI",system-ui,monospace;
}

html { font-size:16px; -webkit-font-smoothing:antialiased; }
body {
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:0.9rem; font-weight:400;
  line-height:1.6; overflow-x:hidden; position:relative;
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("/bg.webp") center/cover no-repeat; opacity:0.2;
}
body.modal-open { overflow:hidden; }
h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.15; }
.hidden { display:none !important; }

/* ---- Magic UI: Animated Gradient Text ---- */
@keyframes gradientMove {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.gradient-text {
  background:linear-gradient(90deg,var(--primary),#44D4FF,var(--primary-light),var(--primary),#44D4FF);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientMove 4s linear infinite;
}

/* ---- Brutalist: Hard shadow utils ---- */
.brutal-shadow {
  box-shadow:var(--bw) var(--bw) 0 var(--border);
}
.brutal-shadow:hover {
  box-shadow:5px 5px 0 var(--primary-dim);
}

/* ---- Login ---- */
.login-view,.app-view { position:relative; z-index:1; }

.login-view {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(ellipse 80% 50% at 20% 50%, rgba(102,204,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,140,66,0.04), transparent 60%),
    var(--bg);
}

/* Glass card */
.login-card {
  width:min(440px,100%); padding:2.8rem 2.2rem;
  background:var(--bg-glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:2px solid rgba(102,204,255,0.25);
  border-radius:2px;
  box-shadow:8px 8px 0 rgba(102,204,255,0.08);
}

.brand { text-align:center; margin-bottom:2.2rem; }
.brand-mark {
  width:52px; height:52px; border-radius:2px; margin:0 auto 1rem;
  border:2px solid var(--primary); object-fit:cover;
  background:var(--bg-card); display:block;
  box-shadow:4px 4px 0 rgba(102,204,255,0.2);
}
.brand h1 { font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; }
.brand p { font-size:0.82rem; color:var(--text-secondary); margin-top:0.3rem; }
.brand-mark.small { width:34px; height:34px; margin:0; }

.tabs {
  display:flex; gap:0; margin-bottom:1.6rem;
  border:2px solid var(--border); background:var(--bg);
}
.tab {
  flex:1; border:0; border-radius:0; padding:0.6rem 0; background:transparent;
  color:var(--text-muted); font-family:var(--font-display); font-size:0.8rem;
  font-weight:600; cursor:pointer; transition:all .2s; text-align:center;
  text-transform:uppercase; letter-spacing:0.05em;
}
.tab.active { background:var(--primary); color:var(--bg); }

.form { display:grid; gap:1rem; }
label {
  display:grid; gap:0.3rem; font-size:0.66rem; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.08em;
}

/* Brutalist inputs */
input,select,textarea {
  width:100%; border:var(--bw-sm) solid var(--border); border-radius:2px;
  padding:0.65rem 0.8rem; outline:none;
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:0.86rem;
  transition:border-color .15s,box-shadow .15s;
}
.profile-text-input {
  min-height:48px; font-size:1rem; font-weight:700; letter-spacing:0;
}
.field-hint {
  color:var(--text-muted); font-size:0.62rem; line-height:1.35;
  text-transform:none; letter-spacing:0;
}
textarea { min-height:100px; resize:vertical; }
input:focus,select:focus,textarea:focus {
  border-color:var(--primary);
  box-shadow:4px 4px 0 var(--primary-dim);
}

select {
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),
    linear-gradient(135deg,var(--primary) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
select option { background:var(--bg); }

/* Brutalist buttons */
button {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  min-height:40px; border:var(--bw-sm) solid var(--border); border-radius:2px;
  padding:0.5rem 1rem; background:transparent; color:var(--text);
  font-family:var(--font-display); font-size:0.78rem; font-weight:600;
  cursor:pointer; transition:all .15s; white-space:nowrap;
  text-transform:uppercase; letter-spacing:0.04em;
}
button:hover { background:var(--bg-card); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--border); }

.primary {
  border-color:var(--primary); background:var(--primary);
  color:var(--bg); font-weight:700;
}
.primary:hover {
  background:var(--primary-light); border-color:var(--primary-light);
  box-shadow:5px 5px 0 var(--primary-glow); transform:translate(-2px,-2px);
}

.wide { width:100%; }
.ghost { border-color:transparent; color:var(--text-secondary); }
.ghost:hover { border-color:var(--border); background:var(--bg-card); box-shadow:3px 3px 0 var(--border); }
.ghost.bright { color:var(--text); }
.danger { border-color:rgba(255,102,153,0.4); color:var(--accent-pink); }
.danger:hover { background:rgba(255,102,153,0.1); border-color:var(--accent-pink); box-shadow:4px 4px 0 rgba(255,102,153,0.25); }

/* ---- Topbar (Glass) ---- */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0.5rem 1.5rem;
  border-bottom:2px solid var(--border);
  background:rgba(0,0,0,0.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.top-title { display:flex; align-items:center; gap:0.6rem; }
.top-title h1 { font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; }
.top-title p { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.userbar { display:flex; align-items:center; gap:0.8rem; font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; }

/* ---- Asymmetric Layout ---- */
.workspace {
  display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:1.2rem; padding:1.2rem 1.5rem; max-width:1320px; margin:0 auto;
}

/* Brutalist sidebar */
.sidebar {
  display:grid; align-content:start; gap:0;
  border:var(--bw) solid var(--border); background:var(--bg-surface);
}
.menu-item {
  justify-content:flex-start; width:100%; min-height:44px; gap:0.6rem;
  border:0; border-bottom:1px solid var(--border); border-radius:0;
  color:var(--text-secondary); text-align:left; font-size:0.72rem;
  font-weight:600; padding:0.55rem 0.8rem; text-transform:uppercase;
  font-family:var(--font-display); letter-spacing:0.04em;
}
.menu-item:last-child { border-bottom:0; }
.menu-item:hover { background:var(--bg-card); color:var(--text); }
.menu-item.active {
  background:var(--primary); color:var(--bg);
  border-right:3px solid var(--primary-light);
}
.menu-item iconify-icon { margin-right:6px; flex-shrink:0; }

.pane { min-width:0; }

/* ---- Brutalist Cards ---- */
.panel,.stat-card,.activity-row,.detail-panel {
  border:var(--bw) solid var(--border); border-radius:2px;
  background:var(--bg-surface); transition:box-shadow .15s,border-color .15s;
}
.panel { padding:1.4rem 1.6rem; max-width:860px; }
.form-panel { max-width:880px; }

/* Asymmetric hero: content-heavy left, graphic right */
.hero-panel {
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:2rem; align-items:center;
  padding:1.8rem 2rem; border:var(--bw) solid var(--border); border-radius:2px;
  background:var(--bg-surface); position:relative; overflow:hidden;
}
.hero-panel::before {
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:4px;
  background:var(--primary); z-index:1;
}
.hero-panel:hover { border-color:var(--primary-dim); }
.hero-panel:hover { box-shadow:8px 8px 0 var(--primary-dim); }
.hero-panel p { margin-top:0.5rem; font-size:0.85rem; color:var(--text-secondary); line-height:1.6; max-width:500px; }

.eyebrow {
  margin-bottom:0.4rem; font-size:0.6rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--primary);
  font-family:var(--font-display);
}

.section-title {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem; padding-bottom:0.6rem;
  border-bottom:1px solid var(--border);
}
.section-title h2 {
  font-size:1.05rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.04em;
}
.list-title { align-items:flex-start; }
.list-title p { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.hero-actions,.section-title,.detail-actions { display:flex; align-items:center; gap:0.5rem; }
.hero-actions { justify-content:flex-end; flex-wrap:wrap; }

/* ---- Stats (asymmetric sizes) ---- */
.stats-grid {
  display:grid; grid-template-columns:1.4fr 1fr 0.8fr;
  gap:0.8rem; margin:1.2rem 0;
}
.stat-card {
  padding:1.1rem 1.3rem; display:grid; gap:0.15rem;
  position:relative; overflow:hidden;
}
.stat-card:nth-child(1) { border-left:4px solid var(--primary); }
.stat-card:nth-child(2) { border-left:4px solid var(--accent-green); }
.stat-card:nth-child(3) { border-left:4px solid var(--accent-orange); }
.stat-card:hover {
  border-color:var(--primary-dim);
  box-shadow:6px 6px 0 var(--primary-dim);
}
.stat-card span {
  font-size:0.64rem; color:var(--text-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
}
.stat-card strong { font-size:2.4rem; font-weight:800; }
.stat-card:nth-child(1) strong { color:var(--primary); }
.stat-card:nth-child(2) strong { color:var(--accent-green); }
.stat-card:nth-child(3) strong { color:var(--accent-orange); }
.stat-icon { position:absolute; top:0.8rem; right:0.8rem; opacity:0.08; font-size:2rem; }

/* ---- Activities ---- */
.activity-list { display:grid; gap:0.45rem; }
.activity-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:0.8rem; padding:0.7rem 1rem;
  cursor:pointer; border:2px solid var(--border); border-radius:2px;
  box-shadow:3px 3px 0 var(--border);
}
.activity-row:hover { border-color:var(--primary-dim); box-shadow:5px 5px 0 var(--primary-dim); }
.activity-row.selected { border-color:var(--primary); background:rgba(102,204,255,0.05); box-shadow:4px 4px 0 var(--primary-glow); }

.row-main { display:grid; gap:0.2rem; min-width:0; }
.row-title { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.row-title h3 { font-size:0.82rem; font-weight:700; font-family:var(--font-display); }
.row-meta { display:flex; flex-wrap:wrap; gap:0.5rem; font-size:0.66rem; color:var(--text-muted); }

.badge {
  display:inline-flex; align-items:center; min-height:20px;
  padding:0.08rem 0.5rem; border-radius:2px;
  font-size:0.58rem; font-weight:700; letter-spacing:0.04em; white-space:nowrap;
  border:1px solid var(--border); text-transform:uppercase;
}
.badge { border-color:var(--border); color:var(--text-muted); }
.badge.running { border-color:var(--accent-green); color:var(--accent-green); }
.badge.done { border-color:var(--text-muted); color:var(--text-muted); }
.badge.open { border-color:var(--accent-orange); color:var(--accent-orange); }

/* ---- Detail ---- */
.detail-panel { padding:1.4rem; display:grid; gap:0.8rem; }
.detail-head { display:grid; gap:0.3rem; }
.detail-head h2 { font-size:1.1rem; font-weight:800; }
.detail-head p { color:var(--text-secondary); line-height:1.55; font-size:0.8rem; }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.detail-grid div,.detail-block {
  padding:0.6rem; border:1px solid var(--border); border-radius:2px;
  background:var(--bg-card); display:grid; gap:0.15rem;
}
.detail-grid span,.detail-block span { font-size:0.58rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }
.detail-grid strong,.detail-block p { font-size:0.78rem; overflow-wrap:anywhere; line-height:1.45; }

.detail-summary {
  border:2px solid var(--border); background:var(--bg-card);
  padding:0.9rem; display:grid; gap:0.5rem;
}
.detail-title-line { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; flex-wrap:wrap; }
.detail-title-line h2 { font-size:1rem; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.35rem 0.8rem; color:var(--text-secondary); font-size:0.72rem; }
.detail-tabs {
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:0.8rem;
  border:2px solid var(--border); background:var(--bg);
}
.detail-tabs button {
  border:0; border-right:1px solid var(--border); border-radius:0;
  min-height:42px; color:var(--text-secondary); background:transparent;
}
.detail-tabs button:last-child { border-right:0; }
.detail-tabs button.active { background:var(--primary); color:var(--bg); }
.detail-tab-panel {
  min-height:260px; padding:0.9rem; border:2px solid var(--border);
  border-top:0; background:rgba(0,0,0,0.34);
}
.modal-bottom-actions { margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--border); }
.join-tab-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }

.comment-list { display:grid; gap:0.65rem; }
.comment-item,.reply-item {
  padding:0.65rem; border:1px solid var(--border); background:var(--bg-card);
}
.comment-head { display:flex; align-items:center; gap:0.5rem; }
.comment-head strong { display:flex; align-items:center; gap:0.35rem; font-size:0.78rem; }
.comment-head time { margin-left:auto; color:var(--text-muted); font-size:0.62rem; }
.level-badge {
  display:inline-flex; padding:0 0.28rem; border:1px solid currentColor;
  font-size:0.55rem; line-height:1.4; color:inherit;
}
.comment-content { margin:0.5rem 0 0; color:var(--text); font-size:0.8rem; line-height:1.55; overflow-wrap:anywhere; }
.comment-actions { display:flex; gap:0.35rem; margin-top:0.35rem; }
.mini { min-height:28px; padding:0.2rem 0.45rem; font-size:0.62rem; }
.danger-text { color:var(--accent-pink); }
.reply-list { display:grid; gap:0.4rem; margin-top:0.55rem; padding-left:1rem; border-left:2px solid var(--border); }
.reply-box { display:grid; grid-template-columns:1fr auto; gap:0.45rem; margin-top:0.5rem; }
.reply-box textarea,.comment-compose textarea { min-height:54px; }
.comment-compose { display:grid; grid-template-columns:1fr auto; gap:0.5rem; margin-top:0.75rem; }

.album-toolbar {
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
  margin-bottom:0.75rem; color:var(--text-muted); font-size:0.66rem;
}
.photo-upload {
  display:inline-flex; align-items:center; justify-content:center; gap:0.35rem;
  min-height:40px; padding:0.5rem 0.8rem; border:2px solid var(--border);
  background:transparent; color:var(--text-secondary); cursor:pointer;
}
.photo-upload input { display:none; }
.photo-upload.disabled { opacity:0.5; cursor:not-allowed; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.65rem; }
.pending-photo {
  display:flex; align-items:center; gap:0.65rem; margin-bottom:0.75rem;
  padding:0.6rem; border:2px dashed var(--primary); background:var(--primary-dim);
}
.pending-photo img {
  width:64px; height:64px; object-fit:cover; border:1px solid var(--primary);
}
.pending-photo strong { display:block; color:var(--primary); font-size:0.76rem; }
.pending-photo p { color:var(--text-secondary); font-size:0.66rem; overflow-wrap:anywhere; }
.pending-photo small { color:var(--text-muted); font-size:0.6rem; }
.upload-progress {
  width:min(260px,100%); height:8px; margin:0.35rem 0 0.15rem;
  border:1px solid var(--border); background:var(--bg); overflow:hidden;
}
.upload-progress span {
  display:block; height:100%; background:var(--primary);
  transition:width 220ms cubic-bezier(.2,.8,.2,1);
}
.photo-card { border:1px solid var(--border); background:var(--bg-card); padding:0.35rem; display:grid; gap:0.35rem; }
.photo-card > button { display:block; width:100%; padding:0; border:0; min-height:0; }
.photo-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--border); }
.photo-card figcaption { display:grid; gap:0.1rem; font-size:0.62rem; color:var(--text-muted); }
.photo-card figcaption span { color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.exp-card {
  padding:0.7rem; border:1px solid var(--border); background:var(--bg-card);
}
.exp-line { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; font-size:0.72rem; }
.exp-line span { color:var(--text-muted); }
.exp-bar { height:8px; margin-top:0.45rem; border:1px solid var(--border); background:var(--bg); overflow:hidden; }
.exp-bar span { display:block; height:100%; background:var(--primary); }

/* ---- Profile ---- */
.profile-head { display:grid; grid-template-columns:80px minmax(0,1fr); gap:1rem; align-items:center; }
.avatar-large,.avatar { object-fit:cover; border-radius:2px; background:var(--bg-card); }
.avatar-large { width:80px; height:80px; border:2px solid var(--primary); }
.avatar { width:36px; height:36px; border:1px solid var(--border); flex:0 0 auto; }

.mine-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem; margin-top:0.8rem; }
.mine-grid .panel { padding:1rem; max-width:none; }
.profile-password-btn { width:fit-content; margin-top:0.6rem; }

/* ---- Participants ---- */
.participant-list { display:grid; gap:0.35rem; }
.participant-item {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:2px;
  background:var(--bg-card);
}
.participant-item strong { display:block; font-size:0.76rem; }
.participant-item p { color:var(--text-muted); font-size:0.62rem; margin-top:0.05rem; }

/* ---- QR ---- */
.qr-button { width:fit-content; padding:1px; border:2px solid var(--border); border-radius:2px; }
.qr-thumb { display:block; width:88px; height:88px; object-fit:contain; border-radius:2px; transition:box-shadow .15s; }
.qr-button:hover { border-color:var(--primary); box-shadow:3px 3px 0 var(--primary-dim); }

/* ---- Glass Modal ---- */
.modal {
  position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:1.5rem;
}
.modal-backdrop {
  position:absolute; inset:0;
  background:rgba(5,5,5,0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.modal-panel {
  position:relative; z-index:1;
  width:min(900px,100%); max-height:min(82vh,780px); overflow:auto;
  border:2px solid rgba(102,204,255,0.2); border-radius:2px;
  background:var(--bg-glass); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  box-shadow:12px 12px 0 rgba(102,204,255,0.06);
  padding:1.5rem;
}
.compact-modal { width:min(460px,100%); }
.modal-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; margin-bottom:1rem; padding-bottom:0.6rem;
  border-bottom:2px solid var(--border);
}
.modal-head h2 { font-size:1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
.modal-close { flex-shrink:0; }
.modal-title-wrap { display:flex; align-items:flex-start; gap:0.7rem; min-width:0; }
.modal-back-btn {
  min-height:32px; padding:0.25rem 0.55rem; border:1px solid var(--border);
  color:var(--text-secondary); flex-shrink:0;
}
.modal-edit { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.detail-actions { flex-wrap:wrap; }

/* ---- Image preview ---- */
.image-preview {
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:2rem;
}
.image-preview img {
  position:relative; z-index:1;
  max-width:min(88vw,720px); max-height:82vh; object-fit:contain;
  border:3px solid var(--primary); border-radius:2px;
  background:#fff; box-shadow:10px 10px 0 var(--primary-dim);
}
.preview-close { position:fixed; top:1rem; right:1rem; z-index:2; }

/* ---- Empty/dashed ---- */
.empty,.detail-empty {
  padding:1rem; border:2px dashed var(--border);
  color:var(--text-muted); font-size:0.78rem; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.04em;
}

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.list-layout { display:grid; gap:0.8rem; }

/* ---- Brutalist Toast ---- */
.toast {
  position:fixed; right:1rem; bottom:1rem; z-index:30;
  max-width:min(360px,calc(100vw - 2rem));
  padding:0.7rem 1rem; border:2px solid var(--primary); border-radius:2px;
  background:var(--bg); color:var(--text); font-size:0.76rem;
  font-family:var(--font-display); font-weight:600;
  box-shadow:6px 6px 0 var(--primary-dim);
  opacity:0; transform:translateX(4px); transition:all .2s; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(0); }

/* ---- Icons ---- */
iconify-icon { display:inline-flex; vertical-align:middle; flex-shrink:0; }
.label-icon { margin-right:2px; opacity:0.5; }
.title-icon { margin-right:4px; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:0; }

/* ---- Responsive ---- */
/* Tablet (<=900px) */
@media (max-width:900px) {
  :root { --bw:2px; --bw-sm:1px; }
  .workspace { grid-template-columns:1fr; padding:0.8rem; gap:0.8rem; }
  .hero-panel { grid-template-columns:1fr; padding:1.2rem; }
  .hero-panel::before { width:3px; }
  .hero-panel:hover { box-shadow:4px 4px 0 var(--primary-dim); }
  .stats-grid { grid-template-columns:1fr 1fr 1fr; gap:0.45rem; }
  .stat-card { padding:0.7rem; border-left-width:3px; }
  .stat-card strong { font-size:1.6rem; }
  .stat-card:hover { box-shadow:3px 3px 0 var(--primary-dim); }
  .sidebar {
    position:sticky; top:0; z-index:10;
    display:grid; grid-template-columns:repeat(5,1fr);
    border:var(--bw-sm) solid var(--border);
  }
  .menu-item { justify-content:center; min-height:36px; font-size:0.62rem; padding:0.3rem; text-align:center; border-bottom:0; border-right:1px solid var(--border); }
  .menu-item:last-child { border-right:0; }
  .menu-item iconify-icon { margin-right:2px; width:14px; height:14px; }
  .hero-actions { width:100%; display:grid; grid-template-columns:1fr; }
  .hero-actions button { width:100%; }
  .mine-grid { grid-template-columns:1fr 1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .summary-grid,.join-tab-grid { grid-template-columns:1fr; }
  .profile-head { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .section-title { display:grid; grid-template-columns:1fr; gap:0.3rem; }
  .section-title button { width:100%; }
  .topbar { padding:0.4rem 0.8rem; gap:0.8rem; }
  .topbar .userbar { font-size:0.72rem; gap:0.5rem; }
  .topbar .userbar button { min-height:34px; font-size:0.65rem; padding:0.3rem 0.6rem; }
  /* Reduce glass blur on mobile for performance */
  .login-card,.topbar,.modal-panel { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .login-card { box-shadow:4px 4px 0 rgba(102,204,255,0.06); }
  .modal-panel { box-shadow:6px 6px 0 rgba(102,204,255,0.04); padding:1rem; }
  /* Ensure touch-friendly sizes */
  button { min-height:42px; }
  input,select,textarea { min-height:42px; font-size:0.9rem; }
  /* Prevent horizontal scroll */
  body { overflow-x:hidden; max-width:100vw; }
}
/* Phone (<=500px) */
@media (max-width:500px) {
  :root { --bw:2px; --bw-sm:1px; }
  .login-view { padding:12px; }
  .login-card { padding:1.6rem 1rem; width:100%; box-shadow:3px 3px 0 rgba(102,204,255,0.05); }
  .brand h1 { font-size:1.2rem; }
  .brand-mark { width:40px; height:40px; }
  .topbar { padding:0.35rem 0.6rem; gap:0.4rem; }
  .top-title h1 { font-size:0.85rem; }
  .top-title p { font-size:0.6rem; }
  .topbar .brand-mark.small { width:26px; height:26px; }
  .workspace { padding:0.5rem; gap:0.5rem; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:0.35rem; }
  .stat-card { padding:0.6rem; }
  .stat-card strong { font-size:1.4rem; }
  .mine-grid { grid-template-columns:1fr; }
  .activity-row { grid-template-columns:1fr; padding:0.55rem 0.7rem; }
  .activity-row:hover { box-shadow:2px 2px 0 var(--primary-dim); }
  .two-col { grid-template-columns:1fr; gap:0.5rem; }
  .modal { padding:0.2rem; align-items:end; }
  .modal-panel { padding:0.8rem; max-height:90vh; border-radius:2px 2px 0 0; box-shadow:0 -4px 0 var(--primary-dim); }
  .modal-head { margin-bottom:0.6rem; padding-bottom:0.4rem; }
  .modal-title-wrap { display:grid; gap:0.35rem; }
  .modal-back-btn { width:fit-content; }
  .hero-panel { padding:1rem; }
  .hero-panel:hover { box-shadow:3px 3px 0 var(--primary-dim); }
  .hero-panel p { font-size:0.78rem; }
  .section-title h2 { font-size:0.9rem; }
  .detail-panel { padding:0.8rem; }
  .detail-tabs { grid-template-columns:1fr; }
  .detail-tabs button { border-right:0; border-bottom:1px solid var(--border); }
  .detail-tabs button:last-child { border-bottom:0; }
  .comment-compose,.reply-box { grid-template-columns:1fr; }
  .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { padding:0.9rem; }
  .form { gap:0.7rem; }
  .list-layout { gap:0.5rem; }
  /* Remove brutalist shadow on small screens (they overflow) */
  .hero-panel,.stat-card,.activity-row,.login-card,.modal-panel {
    box-shadow:2px 2px 0 var(--primary-dim);
  }
  /* Ensure no horizontal overflow */
  *,*::before,*::after { max-width:100%; }
}

/* ---- Mobile bg crop ---- */
@media (max-width:900px) and (orientation:portrait) {
  body::after { background-position:58% center; }
}

/* ---- Footer ---- */
.site-footer {
  position:relative; z-index:1; text-align:center;
  padding:0.8rem 1rem; border-top:1px solid var(--border);
}
.site-footer a {
  color:var(--text-muted); text-decoration:none; font-size:0.7rem;
  font-family:var(--font); letter-spacing:0.03em;
}
.site-footer a:hover { color:var(--primary); }