/* Croatian Crusaders members site */

@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  --bg: #1A1512;
  --bg-2: #211B17;
  --card: #251E1A;
  --card-2: #2D2520;
  --line: rgba(212, 176, 72, 0.14);
  --line-2: rgba(232, 223, 201, 0.08);
  --gold: #D4B048;
  --gold-2: #E6C766;
  --gold-soft: rgba(212, 176, 72, 0.12);
  --paper: #E8DFC9;
  --grey: #A89F8A;
  --silver: #C9CDD2;
  --bronze: #C98B5A;
  --danger: #E07A6A;
  --ok: #8FBF7F;
  --radius: 14px;
  --display: 'Cormorant', 'Times New Roman', serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font: 15px/1.55 var(--body);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; font-weight: 600; }
h1 { font-family: var(--display); font-style: italic; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.01em; }
h2 { font-size: 18px; }
p { margin: 0 0 .6em; }
.muted { color: var(--grey); }
.gold { color: var(--gold); }
.small { font-size: 13px; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.warn { color: var(--bronze); }
.danger { color: var(--danger) !important; }
.faded { opacity: .5; }
.label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-bottom: .8em; }
.eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .3em; }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Layout ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 240px;
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 20px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { font-weight: 700; font-size: 15px; line-height: 1.1; }
.brand em { font-family: var(--display); font-weight: 600; color: var(--gold); font-size: 20px; display: block; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a, .me {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--grey); font-weight: 500; transition: background .15s, color .15s;
}
.sidebar nav a:hover, .me:hover { background: var(--card); color: var(--paper); }
.sidebar nav a.active { background: var(--gold-soft); color: var(--gold); }
.admin-link { margin-top: 10px; border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px !important; padding-top: 14px !important; }
.me { border-top: 1px solid var(--line-2); border-radius: 0; padding-top: 14px; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-text strong { color: var(--paper); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { font-size: 12px; }

.content { margin-left: 240px; padding: 36px clamp(16px, 4vw, 48px) 60px; max-width: 1240px; }
.topbar, .tabbar { display: none; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .content { margin-left: 0; padding: 20px 16px 100px; }
  .topbar {
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 10; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: rgba(26, 21, 18, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .topbar .brand { padding: 0; }
  .topbar .brand img { width: 32px; height: 32px; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
    background: rgba(33, 27, 23, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9.5px; letter-spacing: -.01em; color: var(--grey); padding: 4px 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.active { color: var(--gold); }
  .hide-sm { display: none; }
}

/* ---------- Building blocks ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; display: block;
}
a.card { transition: border-color .15s, transform .15s; }
a.card:hover { border-color: rgba(212, 176, 72, .4); }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid > .card { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.grid.tight { gap: 10px; margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); align-items: end; }
.span-2 { grid-column: span 2; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin: 0; max-width: 640px; }
.crumbs { font-size: 13px; color: var(--grey); margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--body); padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: filter .15s, background .15s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1A1512; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(232, 223, 201, .2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-done { background: rgba(143, 191, 127, .14); color: var(--ok); border-color: rgba(143, 191, 127, .35); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(224, 122, 106, .4); }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; color: var(--grey); cursor: pointer; font: inherit; font-size: 13px; padding: 4px; }
.link-btn:hover { color: var(--gold); }
.icon-btn { background: var(--card-2); border: 1px solid var(--line-2); color: var(--grey); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; }
.icon-btn:hover { color: var(--gold); border-color: var(--gold); }
form.inline { display: inline; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mover { display: inline-flex; gap: 4px; }

.flash { background: var(--gold-soft); border: 1px solid rgba(212, 176, 72, .35); color: var(--gold-2); padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; }
.flash-error { background: rgba(224, 122, 106, .1); border-color: rgba(224, 122, 106, .4); color: #F0A193; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #3A2F27, #2A221D); border: 1px solid rgba(212, 176, 72, .45);
  color: var(--gold); font-weight: 700; letter-spacing: .02em;
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 14px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > span { display: flex; flex-direction: column; min-width: 0; }
.who small { font-size: 12px; }
.big-who { margin-bottom: 20px; gap: 16px; }
.big-who strong { font-size: 20px; }

.badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; vertical-align: middle; }
.badge-gold { background: rgba(212, 176, 72, .16); color: var(--gold); }
.badge-silver { background: rgba(201, 205, 210, .13); color: var(--silver); }
.badge-bronze { background: rgba(201, 139, 90, .15); color: var(--bronze); }
.badge-admin { background: var(--gold); color: #1A1512; }
.status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; }
.status-pending { background: rgba(212, 176, 72, .15); color: var(--gold); }
.status-approved { background: rgba(143, 191, 127, .14); color: var(--ok); }
.status-rejected { background: rgba(224, 122, 106, .12); color: var(--danger); }

.bar { height: 6px; background: rgba(232, 223, 201, .08); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 99px; transition: width .3s; }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--line-2); scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--grey); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--paper); }
.tabs a.active { color: var(--gold); border-color: var(--gold); }
.admin-tabs { margin-bottom: 26px; }

/* ---------- Forms ---------- */
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--grey); }
input, select, textarea {
  font: 400 15px/1.4 var(--body); color: var(--paper); background: var(--bg); border: 1px solid rgba(232, 223, 201, .14);
  border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input[type=file] { padding: 8px; font-size: 13px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); }
textarea { resize: vertical; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form h2 { margin: 0; }
.form .btn { align-self: flex-start; }
.check { flex-direction: row; align-items: center; gap: 8px; color: var(--paper); font-weight: 500; font-size: 14px; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; }
details summary { cursor: pointer; }
details form { margin-top: 10px; }

/* ---------- Login ---------- */
.public { background: radial-gradient(ellipse at 50% -10%, #2E241D, var(--bg) 60%); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(32px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.auth-logo img { width: 120px; margin-bottom: 18px; filter: drop-shadow(0 6px 30px rgba(212, 176, 72, .25)); }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.auth-card h1 { font-size: 34px; margin: 0; }

/* ---------- Home ---------- */
.hero {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; padding: 28px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(ellipse at 85% 50%, rgba(212, 176, 72, .14), transparent 55%), var(--card);
}
.hero h1 { margin-bottom: .2em; }
.hero p { margin: 0; }
.hero-crest { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 4px 24px rgba(212, 176, 72, .25)); }
@media (max-width: 560px) { .hero-crest { width: 64px; height: 64px; } .hero { padding: 20px; } }
.stat-card { display: flex; flex-direction: column; }
.stat-card .btn { margin-top: auto; align-self: flex-start; }
.big { font-size: 30px; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.big small { font-size: 14px; font-weight: 600; }
.stat .big { font-size: 26px; }
.mini-log { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-log label { font-size: 11px; }
.mini-log input { padding: 9px; }
.mini-log .btn { grid-column: 1 / -1; justify-self: start; }
.announcement { border-left: 3px solid var(--gold); }
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-long { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 85%, transparent); }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.file-list li:last-child { border-bottom: 0; }
.file-list a { color: var(--gold); font-weight: 500; }
.mini-board { list-style: none; padding: 0; margin: 0; }
.mini-board li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.mini-board li:last-child { border: 0; }
.pos { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--grey); background: var(--card-2); }
.pos-1 { background: var(--gold); color: #1A1512; }
.pos-2 { background: var(--silver); color: #1A1512; }
.pos-3 { background: var(--bronze); color: #1A1512; }
.me-row { background: var(--gold-soft); }

/* ---------- Classroom ---------- */
.grid-modules { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.module-card { position: relative; min-height: 170px; display: flex; flex-direction: column; overflow: hidden; }
.module-num { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 54px; line-height: 1; color: rgba(212, 176, 72, .2); position: absolute; right: 16px; top: 10px; }
.module-card h2 { font-family: var(--display); font-style: italic; font-size: 26px; padding-right: 60px; margin-top: 8px; }
.module-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.module-foot .bar { flex: 1; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; color: var(--paper); }
.lesson-list a:hover { background: var(--card-2); }
.lesson-list a.current { background: var(--gold-soft); color: var(--gold); }
.lesson-list .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid rgba(232, 223, 201, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--grey); }
.lesson-list a.done .tick { background: var(--gold); border-color: var(--gold); color: #1A1512; font-weight: 700; }
.lesson-list .play { margin-left: auto; font-size: 10px; color: var(--grey); }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .lesson-layout { grid-template-columns: 1fr; } }
.lesson-side { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.player { width: 100%; aspect-ratio: 16 / 10; background: #000; border-radius: var(--radius); display: block; margin-bottom: 18px; border: 1px solid var(--line); }
.player.embed { position: relative; aspect-ratio: 16 / 9; }
.player.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.lesson-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lesson-title-row h1 { margin: 0; }
.lesson-nav { margin-top: 10px; }
.lesson-nav { align-items: stretch; }
.lesson-nav .btn {
  max-width: 48%; flex-direction: column; align-items: flex-start; gap: 5px;
  white-space: normal; overflow: visible; line-height: 1.35; text-align: left;
}
.lesson-nav .lesson-nav-next { align-items: flex-end; text-align: right; margin-left: auto; }
.lesson-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
@media (max-width: 600px) {
  .lesson-nav { flex-direction: column; }
  .lesson-nav > span:empty { display: none; }
  .lesson-nav .btn { max-width: 100%; width: 100%; }
}

.prose { line-height: 1.7; }
.prose p { margin: 0 0 .9em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--gold); margin: 1em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 .9em; }
.prose li { margin-bottom: .3em; }
.prose li::marker { color: var(--gold); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.prose strong { color: #F5EEDC; }
.prose a.doc-link { display: inline-block; padding: 3px 12px; margin: 2px 0; border: 1px solid var(--gold); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .95em; line-height: 1.5; }
.prose a.doc-link:hover { background: var(--gold); color: #1A1512; }

/* ---------- Community ---------- */
.composer-top { display: flex; gap: 12px; }
.composer textarea { border: 0; background: transparent; padding: 8px 0; font-size: 16px; }
.composer textarea:focus { box-shadow: none; }
.composer-bar { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 8px; flex-wrap: wrap; }
.composer-bar select { width: auto; padding: 8px 10px; font-size: 13px; }
.file-pick { cursor: pointer; flex-direction: row; font-weight: 500; color: var(--grey); }
.file-pick input { display: none; }
.file-pick:hover { color: var(--gold); }
.post.pinned { border-color: rgba(212, 176, 72, .45); }
.post-head { display: flex; gap: 12px; margin-bottom: 12px; }
.post-head p { margin: 0; }
.cat { font-weight: 600; }
.cat-announcement { color: var(--gold); }
.cat-win { color: var(--ok); }
.cat-question { color: var(--silver); }
.post-image img { border-radius: 10px; margin-top: 12px; max-height: 480px; object-fit: contain; background: #000; width: 100%; }
.post-foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.chip { background: var(--card-2); border: 1px solid var(--line-2); color: var(--paper); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--body); cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.chip-on { background: var(--gold-soft); border-color: rgba(212, 176, 72, .5); color: var(--gold); }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.comment p { margin: 0 0 4px; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }

/* ---------- Leaderboard ---------- */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin: 10px 0 20px; max-width: 720px; }
.podium-spot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.podium-spot strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.podium-pts { font-weight: 700; }
.podium-block {
  width: 100%; margin-top: 8px; border-radius: 12px 12px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 34px; color: #1A1512;
}
.podium-block { line-height: 1; }
.spot-1 .podium-block { height: 110px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.spot-2 .podium-block { height: 80px; background: linear-gradient(180deg, #DDE0E4, var(--silver)); }
.spot-3 .podium-block { height: 64px; background: linear-gradient(180deg, #DA9F70, var(--bronze)); }
.spot-1 .avatar { border-color: var(--gold); box-shadow: 0 0 24px rgba(212, 176, 72, .35); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; }
.board .who strong { font-size: 14px; }
.points-rules { list-style: none; padding: 0; margin: 0; }
.points-rules li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.points-rules li:last-child { border: 0; }
.points-rules strong { color: var(--gold); white-space: nowrap; }

/* ---------- Jobs ---------- */
.job h2 { font-size: 20px; margin: 0; }
.job .prose { margin: 12px 0; }
.apply { background: var(--bg); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.upsell { display: flex; gap: 14px; align-items: center; border-style: dashed; color: var(--gold); }
.upsell p { margin: 0; color: var(--paper); }

/* ---------- Admin ---------- */
.people, .cashouts { list-style: none; padding: 0; margin: 0 0 12px; }
.people li, .cashouts li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.people li:last-child, .cashouts li:last-child { border: 0; }
.cashouts p { margin: 2px 0 0; }
.cashouts a { color: var(--gold); }
.admin-module h2 { font-family: var(--display); font-style: italic; font-size: 24px; margin: 0; }
.admin-lessons { list-style: none; padding: 0; margin: 14px 0; }
.admin-lessons li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.admin-lessons li:nth-child(odd) { background: rgba(232, 223, 201, .025); }
.admin-lessons a:hover { color: var(--gold); }
.link-card { border-color: rgba(212, 176, 72, .5); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.link-card .copy-row { width: 100%; }
.drop {
  border: 1.5px dashed rgba(212, 176, 72, .4); border-radius: 12px; padding: 26px; text-align: center; cursor: pointer;
  color: var(--paper); font-weight: 400; display: block; transition: background .15s;
}
.drop:hover, .drop.over { background: var(--gold-soft); }
.drop input { display: none; }
.upload-progress .bar { height: 10px; }

/* ---- Daily objectives (stands out from the modules on purpose) ---- */
.objectives {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(212, 176, 72, 0.55);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(212, 176, 72, 0.22), transparent 55%),
    linear-gradient(160deg, #2E2516 0%, #231C15 60%, #1F1913 100%);
  box-shadow: 0 0 0 4px rgba(212, 176, 72, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.objectives::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold)); }
.objectives-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.objectives-eyebrow { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.objectives h2 { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.2; color: #F5EEDC; margin: 0; }
.objectives-side { flex: none; display: flex; align-items: center; gap: 8px; }
.objectives-streak { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.objectives-streak strong { font-size: 15px; color: var(--gold-2); }
.objectives-streak small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.objectives-arrows { display: flex; gap: 4px; }
.objectives-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(232, 223, 201, .2); color: var(--paper); font-size: 20px; line-height: 1; text-decoration: none; padding-bottom: 2px; }
.objectives-arrow:hover { border-color: var(--gold); color: var(--gold); }
.objectives-arrow.off { opacity: .25; }
.objectives-weeks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; }
.objectives-week { display: flex; align-items: center; gap: 4px; }
.objectives-week-label { font-size: 9.5px; font-weight: 700; color: var(--grey); width: 18px; }
.objectives-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(232, 223, 201, 0.1); transition: transform .1s; }
.objectives-dot:hover { transform: scale(1.3); }
.objectives-dot.locked { background: rgba(232, 223, 201, 0.06); }
.objectives-dot.viewing:not(.now) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--grey); }
.objectives-dot.done { background: var(--gold); }
.objectives-dot.now { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold-2); }
.objectives-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.objectives-tasks li { display: flex; }
.objectives-tasks li > form { flex: 1; display: flex; }
.objectives-tasks li > div { flex: 1; }
.objectives-task {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.22);
  color: var(--paper); font: inherit; font-size: 14px; line-height: 1.4; transition: border-color .15s, background .15s;
}
.objectives-task:hover { border-color: rgba(212, 176, 72, 0.5); }
.objectives-task a { color: var(--gold); text-decoration: underline; }
.objectives-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--gold); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #1A1512; }
.objectives-task.checked { background: rgba(212, 176, 72, 0.1); }
.objectives-task.checked .objectives-box { background: var(--gold); }
.objectives-task.checked > span:last-child { color: var(--grey); text-decoration: line-through; text-decoration-color: rgba(168, 159, 138, 0.6); }
.objectives-notes { margin-top: 10px; font-size: 14px; }
.objectives-notes summary { cursor: pointer; color: var(--gold); font-size: 13px; font-weight: 600; list-style: none; }
.objectives-notes summary::-webkit-details-marker { display: none; }
.objectives-notes summary::before { content: '▸ '; }
.objectives-notes[open] summary::before { content: '▾ '; }
.objectives-notes .prose { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.objectives-notes .prose p:last-child { margin-bottom: 0; }
.objectives-foot { margin: 10px 0 0; font-size: 12.5px; color: var(--gold-2); font-weight: 500; }
.objectives-task.readonly { cursor: default; }
.objectives-task.readonly:hover { border-color: var(--line); }
.objectives-locked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(212, 176, 72, 0.35); background: rgba(0, 0, 0, 0.22); }
.objectives-locked p { margin: 0; color: var(--grey); font-size: 14px; }
.objectives-locked strong { color: var(--paper); }
.objectives-lock { font-size: 22px; }
.objectives-today { margin-top: 12px; }
.objectives-empty { display: block; margin-bottom: 24px; border-style: dashed; border-color: rgba(212, 176, 72, 0.4); color: var(--grey); }
.objectives-empty strong { color: var(--gold); }
@media (max-width: 560px) {
  .objectives { padding: 14px 14px; }
  .objectives h2 { font-size: 21px; }
  .objectives-streak small { display: none; }
  .objectives-weeks { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px 10px; }
  .objectives-weeks { gap: 6px 8px; }
  .objectives-week { gap: 3px; }
  .objectives-week-label { width: 16px; }
  .objectives-dot { width: 8px; height: 8px; }
  .objectives-task { font-size: 13.5px; padding: 7px 10px; }
}

/* Home page reminder */
.objective-strip {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(212, 176, 72, 0.55); background: linear-gradient(100deg, #2E2516, #231C15);
}
.objective-strip:hover { border-color: var(--gold); }
.objective-strip-day { flex: none; padding: 6px 10px; border-radius: 9px; background: var(--gold); color: #1A1512; font-weight: 700; font-size: 13px; }
.objective-strip-text { flex: 1; display: grid; min-width: 0; }
.objective-strip-text small { color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objective-strip.is-done .objective-strip-day { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.objective-streak { flex: none; font-weight: 700; color: var(--gold-2); }
.objective-strip-go { flex: none; color: var(--gold); font-weight: 600; font-size: 13px; }

.obj-cell { display: block; font-size: 12px; white-space: nowrap; }

/* ---- Profile pictures ---- */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-xl { width: 96px; height: 96px; font-size: 32px; }
.profile-pic { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.profile-name { display: block; font-family: var(--display); font-style: italic; font-size: 30px; color: #F5EEDC; }
.profile-pic .rank-badge { margin: 2px 0 10px; }
.avatar-form { display: inline-block; margin-right: 12px; }
.file-btn { cursor: pointer; }

/* ---- Ranks ---- */
.insignia { display: inline-grid; place-items: center; color: var(--gold); flex: none; }
.insignia svg { width: 100%; height: 100%; }
.insignia-sm { width: 14px; height: 14px; }
.insignia-md { width: 22px; height: 22px; }
.insignia-lg { width: 30px; height: 30px; }
.insignia-xl { width: 64px; height: 64px; filter: drop-shadow(0 0 14px rgba(212, 176, 72, .45)); }
.insignia-1 { color: var(--grey); }
.insignia-5 { color: var(--gold-2); }
.rank-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); font-size: 12px; font-weight: 600; color: var(--paper); white-space: nowrap; }
.rank-badge.rank-4, .rank-badge.rank-5 { border-color: rgba(212, 176, 72, .5); color: var(--gold-2); }
.rank-line { display: inline-flex; align-items: center; gap: 4px; }
.rank-big { display: flex; align-items: center; gap: 10px; }
.rank-list { list-style: none; margin: 0 0 12px; padding: 0; }
.rank-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.rank-list li:last-child { border: 0; }
.rank-list span { display: grid; }
.rank-card { margin-bottom: 20px; }
.rank-current { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.rank-current span { display: grid; gap: 4px; justify-items: start; }
.rank-current .label { margin: 0; }
.rank-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.rank-option { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.rank-option:hover { border-color: var(--gold); }
.rank-option.current { border-color: var(--gold); background: var(--gold-soft); }
@media (max-width: 560px) { .rank-pick { grid-template-columns: repeat(3, 1fr); } }

/* ---- Floating embers (intro and promotion) ---- */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ember { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 6px 1px rgba(230, 199, 102, .7); opacity: 0; animation: ember-rise linear infinite; }
@keyframes ember-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translate(var(--drift, 20px), -105vh); opacity: 0; }
}

/* ---- Promotion celebration ---- */
.promo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(70, 52, 20, .96), rgba(16, 12, 10, .97) 70%); animation: fade-in .4s ease both; }
.promo-card { position: relative; max-width: 420px; text-align: center; }
.promo-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); animation: rise-in .6s .2s ease both; }
.promo-insignia { display: inline-grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 1px solid rgba(212, 176, 72, .5); background: radial-gradient(circle, rgba(212, 176, 72, .22), transparent 70%); animation: badge-in .9s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.promo-insignia .insignia-xl { width: 72px; height: 72px; }
.promo h2 { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 40px; color: #F5EEDC; margin: 22px 0 8px; animation: rise-in .6s .9s ease both; }
.promo h2 em { color: var(--gold-2); }
.promo-desc { color: var(--paper); margin: 0 0 6px; animation: rise-in .6s 1.1s ease both; }
.promo .muted { animation: rise-in .6s 1.2s ease both; }
.promo-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; animation: rise-in .6s 1.4s ease both; }
.promo-actions form { margin: 0; }
.promo.closing { animation: fade-out .35s ease both; }
@keyframes badge-in { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }

/* ---- Intro when someone opens the site ---- */
.intro { display: none; }
.show-intro .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; background: #120E0B; overflow: hidden; animation: intro-out .7s 3.1s ease both; }
.intro-glow { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 45%, rgba(212, 176, 72, .28), rgba(120, 70, 20, .12) 35%, transparent 60%); animation: glow-in 1.6s ease both; }
.intro-crest { position: relative; width: min(230px, 52vw); filter: drop-shadow(0 0 30px rgba(212, 176, 72, .35)); animation: crest-in 1.3s .2s cubic-bezier(.2, .9, .3, 1) both; -webkit-mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,.55) 50%, #000 60%); -webkit-mask-size: 300% 100%; mask-image: linear-gradient(100deg, #000 40%, rgba(0,0,0,.55) 50%, #000 60%); mask-size: 300% 100%; }
.intro-name { position: relative; margin: 26px 0 0; font-family: var(--display); font-style: italic; font-size: clamp(22px, 5vw, 34px); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); animation: name-in 1.2s 1s ease both; }
.intro-welcome { position: relative; margin: 14px 0 0; font-size: 15px; letter-spacing: .08em; color: var(--paper); animation: rise-in .8s 1.9s ease both; }
.intro-welcome em { font-family: var(--display); font-size: 20px; color: var(--gold); }
@keyframes glow-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes crest-in { 0% { opacity: 0; transform: translateY(24px) scale(.86); -webkit-mask-position: 100% 0; mask-position: 100% 0; } 70% { opacity: 1; } 100% { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes name-in { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .32em; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
.show-intro body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .show-intro .intro { animation: intro-out .4s 1.2s ease both; }
  .intro *, .promo * { animation-duration: .01s !important; animation-delay: 0s !important; }
  .ember { display: none; }
}

/* ---- Big wins ---- */
.win-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); margin: 4px 0 6px; }
.win-switch input { position: absolute; opacity: 0; pointer-events: none; }
.win-switch label { padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--grey); }
.win-switch input:checked + label { background: var(--gold); color: #1A1512; }
.win-switch input:focus-visible + label { outline: 2px solid var(--gold-2); }
.win-forms:has(#wk-client:checked) .win-form-money, .win-forms:has(#wk-money:checked) .win-form-client { display: none; }
.win-form { padding: 0; border: 0; background: none; }
.win-card { margin: 4px 0 12px; padding: 16px; border-radius: 14px; border: 1px solid rgba(212, 176, 72, .45); background: linear-gradient(140deg, rgba(212, 176, 72, .14), rgba(212, 176, 72, .03)); }
.win-top { display: flex; align-items: center; gap: 12px; }
.win-emoji { font-size: 30px; line-height: 1; }
.win-headline { margin: 0; font-family: var(--display); font-style: italic; font-size: 26px; color: #F5EEDC; line-height: 1.1; }
.win-money .win-headline { color: var(--gold-2); }
.win-verified { font-size: 12px; font-weight: 600; color: var(--ok); }
.win-pending { font-size: 12px; color: var(--grey); }
.win-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 0; }
.win-facts div { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.win-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.win-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--paper); }

/* ---- My daily tasks ---- */
.my-tasks { margin-bottom: 20px; }
.task-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); }
.task-title { flex: 1; display: grid; min-width: 0; }
.task-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-done { opacity: .7; }
.task-done .task-title strong { text-decoration: line-through; text-decoration-color: rgba(168, 159, 138, .6); }
.task-earned { color: var(--gold); font-weight: 700; white-space: nowrap; }
.task-running { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 176, 72, .12); }
.task-timer, .task-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.task-clock { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--gold-2); min-width: 64px; text-align: right; }
.timer-done .task-clock { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.diff { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.diff-easy { background: rgba(143, 191, 127, .14); color: var(--ok); }
.diff-medium { background: var(--gold-soft); color: var(--gold); }
.diff-hard { background: rgba(224, 122, 106, .15); color: var(--danger); }
.task-edit { position: relative; }
.task-edit summary { list-style: none; cursor: pointer; padding: 4px 8px; border-radius: 8px; color: var(--grey); font-weight: 700; }
.task-edit summary::-webkit-details-marker, .task-add summary::-webkit-details-marker { display: none; }
.task-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: 290px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.task-pop .task-form { margin: 0 0 10px; }
.task-add summary { list-style: none; display: inline-flex; }
.task-form { margin-top: 12px; }
.task-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) {
  .task { flex-wrap: wrap; }
  .task-timer, .task-actions { width: 100%; justify-content: flex-end; }
}

/* ---- Chat ---- */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #1A1512; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.tabbar a { position: relative; }
.tabbar .nav-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.content:has(.chat) { padding-top: 20px; padding-bottom: 20px; max-width: 980px; }
.chat { position: relative; display: flex; flex-direction: column; height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(212, 176, 72, .06), transparent 60%), var(--bg-2); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(37, 30, 26, .9); }
.chat-head > div { display: grid; }
.chat-back { font-size: 20px; color: var(--gold); padding: 0 4px; }
.chat-crest { width: 38px; height: 38px; border-radius: 50%; background: #120E0B; padding: 4px; border: 1px solid var(--line); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 12px 14px 16px; overscroll-behavior: contain; }
.chat-more { display: block; margin: 4px auto 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--grey); font: inherit; font-size: 12px; cursor: pointer; }
.chat-empty { text-align: center; color: var(--grey); margin-top: 30vh; }
.chat-day { display: flex; justify-content: center; margin: 14px 0 8px; }
.chat-day span { padding: 4px 12px; border-radius: 999px; background: var(--card-2); color: var(--grey); font-size: 12px; font-weight: 600; }
.msg { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; transition: transform .15s; }
.msg-grouped { margin-top: 3px; }
.msg-mine { flex-direction: row-reverse; }
.msg-theirs.msg-grouped { padding-left: 40px; }
.msg-avatar { flex: none; }
.msg-col { display: flex; flex-direction: column; max-width: min(75%, 520px); }
.msg-mine .msg-col { align-items: flex-end; }
.msg-name { font-size: 12px; font-weight: 700; margin: 0 0 3px 10px; }
.bubble { position: relative; padding: 7px 10px 6px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); line-height: 1.4; word-break: break-word; }
.msg-theirs:not(.msg-grouped) .bubble { border-bottom-left-radius: 4px; }
.msg-mine .bubble { background: linear-gradient(160deg, #4A3B1C, #3A2F17); border-color: rgba(212, 176, 72, .35); }
.msg-mine:not(.msg-grouped) .bubble { border-bottom-right-radius: 4px; }
.msg-text a { color: var(--gold-2); text-decoration: underline; }
.msg-time { float: right; margin: 6px 0 -2px 10px; font-size: 10px; color: var(--grey); }
.msg-photo { display: block; margin: -3px -6px 6px; }
.msg-photo img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; object-fit: cover; }
.msg-quote { display: grid; width: 100%; text-align: left; margin: 0 0 6px; padding: 5px 8px; border: 0; border-left: 3px solid var(--gold); border-radius: 6px; background: rgba(0, 0, 0, .25); color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.msg-quote strong { color: var(--gold); font-size: 12px; }
.msg-quote span { color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-deleted .bubble { opacity: .6; }
.msg-reactions { display: flex; gap: 4px; margin-top: -6px; padding: 0 6px; position: relative; z-index: 1; }
.react-chip { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.react-chip.on { border-color: var(--gold); background: #3A2F17; }
.msg-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; align-self: center; }
.msg:hover .msg-tools { opacity: 1; }
.msg-tools button { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 4px; border-radius: 8px; color: var(--grey); }
.msg-tools button:hover { background: var(--card-2); }
@media (pointer: coarse) { .msg-tools { display: none; } }
.msg-flash .bubble { animation: flash 1.4s ease; }
@keyframes flash { 30% { box-shadow: 0 0 0 3px var(--gold); } }
.react-picker { position: absolute; z-index: 20; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.react-picker button { border: 0; background: none; font-size: 24px; cursor: pointer; padding: 2px 4px; border-radius: 50%; transition: transform .1s; }
.react-picker button:hover { transform: scale(1.25); }
.chat-compose { border-top: 1px solid var(--line); background: rgba(37, 30, 26, .95); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.chat-replying, .chat-image-preview { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 6px 10px; border-left: 3px solid var(--gold); border-radius: 8px; background: rgba(0, 0, 0, .25); font-size: 13px; }
.chat-replying[hidden], .chat-image-preview[hidden] { display: none; }
.chat-replying strong { display: block; color: var(--gold); font-size: 12px; }
.chat-replying span { color: var(--grey); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-image-preview img { height: 64px; border-radius: 8px; }
.chat-bar { display: flex; align-items: flex-end; gap: 8px; }
.chat-bar textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 21px; border: 1px solid var(--line); background: var(--card); color: var(--paper); font: inherit; line-height: 1.35; }
.chat-bar textarea:focus { outline: none; border-color: rgba(212, 176, 72, .6); }
.chat-attach { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 18px; flex: none; }
.chat-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: #1A1512; font-size: 17px; cursor: pointer; }
@media (max-width: 860px) {
  .content:has(.chat) { padding: 0 0 64px; }
  .content:has(.chat) .flash { margin: 8px; }
  .chat { height: calc(100dvh - 53px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 0; border: 0; }
  .msg-col { max-width: 82%; }
}
.react-picker[hidden] { display: none; }

/* ---- Share sheet ---- */
.share-sheet { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 6, .82); backdrop-filter: blur(6px); animation: fade-in .2s ease both; }
.share-box { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.share-tabs { display: inline-flex; align-self: center; padding: 4px; gap: 4px; border-radius: 12px; background: var(--card-2); }
.share-tabs button { padding: 7px 18px; border: 0; border-radius: 9px; background: none; color: var(--grey); font: inherit; font-weight: 600; cursor: pointer; }
.share-tabs button.on { background: var(--gold); color: #1A1512; }
.share-preview { display: grid; place-items: center; min-height: 200px; overflow: hidden; }
.share-canvas { display: block; max-width: 100%; max-height: 58dvh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.share-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-hint { text-align: center; margin: 0; }
.share-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--grey); font-size: 18px; cursor: pointer; }
.objectives-share { float: right; margin: -4px 0 0 10px; }
[hidden] { display: none !important; }

/* ---- CRM ---- */
.back-link { display: inline-block; color: var(--grey); font-size: 14px; margin-bottom: 10px; }
.back-link:hover { color: var(--gold); }
.danger-text { color: var(--danger); }
.crm-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--card-2); color: var(--grey); font-size: 11px; font-weight: 600; text-align: center; line-height: 18px; }
.chip-on .crm-count, .tabs a.active .crm-count { background: var(--gold-soft); color: var(--gold); }
.crm-tabs { margin-top: 6px; }
.crm-stages { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crm-stages::-webkit-scrollbar { display: none; }
.crm-stages .chip { flex: none; text-decoration: none; display: inline-flex; align-items: center; }
.crm-add summary { cursor: pointer; color: var(--gold); font-weight: 600; list-style: none; }
.crm-add summary::-webkit-details-marker { display: none; }
.crm-add[open] summary { margin-bottom: 14px; }
.crm-list { list-style: none; margin: 0; padding: 0; }
.crm-item { border-bottom: 1px solid var(--line-2); padding: 12px 0; }
.crm-item:first-child { padding-top: 0; }
.crm-item:last-child { border-bottom: 0; padding-bottom: 0; }
.crm-item-main { display: flex; flex-direction: column; gap: 4px; color: var(--paper); text-decoration: none; }
.crm-item-main strong { font-size: 16px; }
.crm-item-main:hover strong { color: var(--gold); }
.crm-meta, .crm-stage { color: var(--grey); font-size: 13px; }
.crm-notes { color: var(--grey); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-deal { color: var(--gold); font-weight: 600; font-size: 14px; }
.crm-due { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--card-2); color: var(--grey); }
.crm-due-today { background: var(--gold-soft); color: var(--gold); }
.crm-due-late { background: rgba(224, 122, 106, .14); color: var(--danger); }
.crm-due-card { border-color: rgba(212, 176, 72, .35); }
.crm-followed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.crm-followed .chip { padding: 7px 12px; }
.crm-pill { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--card-2); color: var(--grey); }
.crm-pill-booked-call { background: var(--gold-soft); color: var(--gold); }
.crm-pill-closed { background: rgba(143, 191, 127, .14); color: var(--ok); }
.crm-pill-no-show, .crm-pill-no-sale { background: rgba(224, 122, 106, .12); color: var(--danger); }
.crm-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.crm-funnel-row { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr 2.5em 3em; align-items: center; gap: 10px; font-size: 13px; }
.crm-funnel-name { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-funnel-bar { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.crm-funnel-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.crm-funnel-n { text-align: right; font-weight: 600; }
.crm-funnel-pct { text-align: right; color: var(--grey); }
.crm-funnel-pct.low { color: var(--danger); font-weight: 600; }
.crm-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.crm-form fieldset[disabled] input, .crm-form fieldset[disabled] select, .crm-form fieldset[disabled] textarea { opacity: .85; }
.crm-form .doc-link { align-self: flex-start; padding: 4px 12px; border: 1px solid var(--gold); border-radius: 999px; font-size: 13px; color: var(--gold); text-decoration: none; }
.crm-closed { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(212, 176, 72, .35); background: var(--gold-soft); }
.crm-closed .label { margin: 0; color: var(--gold); }
.crm-openers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.crm-opener { position: relative; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.crm-opener.is-best { border-color: var(--gold); }
.crm-best { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--gold); }
.crm-opener-msg { margin: 0; white-space: pre-wrap; }
.crm-opener-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crm-opener-stats .label { display: block; margin-bottom: 2px; }
.crm-opener-stats strong { font-size: 22px; }
.crm-opener-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm-opener-edit { width: 100%; }
.crm-opener-edit .form { margin: 10px 0; }
.crm-lesson-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; color: var(--paper); border-color: rgba(212, 176, 72, .45); background: linear-gradient(135deg, rgba(212, 176, 72, .16), var(--card)); }
.crm-lesson-link strong { display: block; font-family: var(--display); font-style: italic; font-size: 24px; color: var(--gold-2); }
.crm-lesson-link small { color: var(--grey); font-size: 13px; }
.crm-lesson-link .btn { flex: none; }
.crm-strip .objective-strip-day { background: var(--card-2); color: var(--gold); border: 1px solid rgba(212, 176, 72, .4); }
.crm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crm-stats .card { padding: 16px; }
.crm-stats .big { font-size: 26px; margin: 0; }
.crm-stats .label { margin-bottom: .5em; }
@media (max-width: 760px) { .crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---- The installable app ---- */
.app-nudge { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(212, 176, 72, .4); background: linear-gradient(135deg, rgba(212, 176, 72, .14), var(--card)); }
.app-nudge img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.app-nudge strong { display: block; font-size: 15px; }
.app-nudge small { display: block; color: var(--grey); font-size: 12.5px; line-height: 1.35; }
.app-nudge .btn { flex: none; }
.app-nudge-close { flex: none; background: none; border: 0; color: var(--grey); font-size: 15px; cursor: pointer; padding: 4px; }
.app-settings { display: flex; flex-direction: column; gap: 14px; }
.app-settings .label { margin: 0; }
.app-settings-row { display: flex; align-items: center; gap: 14px; }
.app-settings-row strong { display: block; }
.app-settings-row small { display: block; font-size: 13px; line-height: 1.4; }
.app-settings-row .btn { flex: none; }
.app-settings .link-btn { align-self: flex-start; padding: 0; color: var(--gold); }
.install { max-width: 480px; }
.install h2 { font-size: 18px; margin: 0 0 8px; font-family: var(--body); font-style: normal; color: var(--gold); }
.install-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.install-steps li { line-height: 1.5; }
.install-steps.install-other { display: none; }
.install-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--card-2); color: #4C9BFF; font-size: 13px; vertical-align: middle; }
.install-more { align-self: center; color: var(--gold); }
.install-done { margin: 0; color: var(--ok); font-weight: 600; text-align: center; }
.install-qr { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.install-qr-code { flex: none; width: 112px; height: 112px; padding: 6px; border-radius: 10px; background: #fff; }
.install-qr-code svg { display: block; width: 100%; height: 100%; }
.install-qr p { margin: 0; }
@media (max-width: 560px) { .install-qr { display: none; } }
/* Installed app: no text selection flashes on buttons, no pull-to-refresh bounce on the bars. */
.is-app .tabbar, .is-app .topbar { -webkit-user-select: none; user-select: none; }
.is-app body { overscroll-behavior-y: none; }

/* Admin: file storage meter */
.storage .row-between { align-items: baseline; }
.storage .label { margin: 0; }
.storage-total { margin: 0; color: var(--grey); font-size: 14px; }
.storage-total strong { color: var(--paper); font-size: 18px; }
.storage .bar { height: 10px; }
.storage-high .bar span { background: linear-gradient(90deg, #E0A84A, #E6C766); }
.storage-full .bar span { background: var(--danger); }
.storage-full .storage-total strong { color: var(--danger); }

/* Phone top bar: Admin button for admins */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-admin { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212, 176, 72, .45); color: var(--gold); font-size: 13px; font-weight: 600; text-decoration: none; }
.topbar-admin .icon { width: 16px; height: 16px; }
.topbar-admin.active { background: var(--gold); color: #1A1512; }

.delete-member { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(224, 122, 106, .3); }
.delete-member .btn { align-self: flex-start; }
.delete-member p { margin: 0; }