:root {
  --ink: #24203c;
  --muted: #756f8d;
  --purple: #7046d9;
  --purple-dark: #4d2aa9;
  --lavender: #eee8ff;
  --surface: rgba(255, 255, 255, 0.82);
  --line: rgba(91, 61, 161, 0.12);
  --success: #239b70;
  --danger: #d64b71;
  --warning: #c58819;
  --shadow: 0 18px 45px rgba(76, 51, 140, 0.12);
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(126, 77, 224, 0.27), transparent 26rem),
    radial-gradient(circle at 0 45%, rgba(174, 128, 225, 0.24), transparent 22rem),
    #e9e3f3;
  font-family: Montserrat, sans-serif;
}
body::before { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(77,42,169,.09) 1px, transparent 1px); background-size: 27px 27px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 78%); }

button, input, select, textarea { font: inherit; }
.home-shell { position: relative; z-index: 1; width: min(100%, 820px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 34px; }
.home-header, .section-heading, .owner-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  color: var(--purple-dark);
  font-family: Furore, "Russo One", sans-serif;
  font-size: clamp(34px, 10vw, 48px);
  line-height: .95;
  letter-spacing: .035em;
}
.brand-eyebrow { margin: 0 0 3px; color: var(--purple); }
.user-badge { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 10px; font-weight: 700; }
.welcome { margin: 30px 0 14px; }
.welcome h1 { margin: 5px 0; font-size: clamp(26px, 8vw, 42px); letter-spacing: -.045em; }
.welcome-date, .eyebrow { margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.section-heading { margin: 25px 0 11px; }
.section-heading.compact { margin-top: 17px; }
.section-heading h2 { margin: 3px 0 0; font-size: 19px; }
.personal-grid, .management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.summary-tile, .shift-card, .club-card {
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.summary-tile { padding: 15px; }
.summary-tile span, .summary-tile small { display: block; color: var(--muted); font-size: 9px; }
.summary-tile strong { display: block; margin-top: 5px; font-size: 23px; }
.summary-tile.wide { grid-column: 1 / -1; }
.clickable-card { position:relative; color:inherit; text-decoration:none; cursor:pointer; transition:transform .16s ease, border-color .16s ease; }
.clickable-card::after { position:absolute; top:8px; right:9px; color:rgba(112,70,217,.55); font-size:14px; font-weight:800; content:'›'; }
.clickable-card:active { transform:scale(.975); }
.summary-tile.clickable-card { padding-right:25px; }
.shift-list, .club-list { display: grid; gap: 9px; }
.shift-card { display: flex; align-items: center; justify-content: space-between; padding: 15px; }
.shift-card strong, .shift-card span, .shift-card small { display: block; }
.shift-card strong { font-size: 16px; }
.shift-card span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.shift-card small { color: var(--purple); font-size: 13px; font-weight: 750; }
.shift-link { padding-right:34px; }
.shift-link::after { top:50%; right:12px; transform:translateY(-50%); }
.bookings-freshness { color: var(--muted); font-size: 8px; font-weight: 700; text-align: right; }
.booking-warning { margin-bottom: 9px; padding: 10px 12px; border: 1px solid rgba(197,136,25,.24); border-radius: 13px; color: #8b5a08; background: rgba(255,201,83,.14); font-size: 9px; }
.booking-list { display: grid; gap: 9px; }
.booking-group { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow); }
.booking-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; cursor: pointer; list-style: none; }
.booking-group summary::-webkit-details-marker { display: none; }
.booking-group summary strong, .booking-group summary span { display: block; }
.booking-group summary strong { font-size: 16px; }
.booking-group summary span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.booking-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--purple-dark); background: var(--lavender); font-size: 11px; font-weight: 800; }
.booking-rows { padding: 0 10px 10px; }
.booking-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 9px; padding: 11px 5px; border-top: 1px solid var(--line); }
.booking-row.past { opacity: .43; }
.booking-time { color: var(--purple-dark); font-size: 12px; font-weight: 800; }
.booking-info strong, .booking-info span { display: block; }
.booking-info strong { font-size: 12px; }
.booking-info span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.booking-guests { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.booking-order { color: var(--purple); font-size: 10px; font-weight: 800; text-decoration: none; }
.booking-empty { padding: 15px; color: var(--muted); font-size: 10px; text-align: center; }
.modules-section { margin: 0 0 24px; }
.module-grid { display:grid; gap:9px; }
.module-card { position:relative; display:grid; min-width:0; min-height:96px; padding:15px 58px 15px 17px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:20px; color:white; text-decoration:none; box-shadow:0 12px 26px rgba(50,32,94,.17); transition:transform .18s ease,box-shadow .18s ease; }
.module-card:active { transform: scale(.985); }
.module-card h2 { margin:3px 0 5px; font-family:Furore,"Russo One",sans-serif; font-size:clamp(20px,6vw,26px); letter-spacing:.015em; line-height:1; }
.module-card small { display:block; color:rgba(255,255,255,.78); font-size:9px; font-weight:650; line-height:1.35; }
.module-card .eyebrow { color:rgba(255,255,255,.63); font-size:8px; }
.module-icon { position:absolute; top:13px; right:14px; display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:12px; background:rgba(255,255,255,.1); font-size:17px; font-weight:800; }
.module-open { align-self:center; color:rgba(255,255,255,.92); font-size:9px; font-weight:800; white-space:nowrap; }
.kpi-module { background: linear-gradient(145deg, #7046d9, #3e238d); }
.problem-module { background: linear-gradient(145deg, #a24de1, #6e2ea7); }
.records-module { background:radial-gradient(circle at 14% 0,rgba(255,205,85,.34),transparent 9rem),radial-gradient(circle at 92% 12%,rgba(255,235,181,.24),transparent 8rem),linear-gradient(145deg,#7651a3,#3c2858); }
.shift-module { border-color:rgba(255,255,255,.24); background:radial-gradient(circle at 12% 0,rgba(199,169,255,.48),transparent 10rem),radial-gradient(circle at 96% 90%,rgba(71,224,205,.34),transparent 12rem),linear-gradient(135deg,#5b3a82 0%,#394f91 53%,#197d80 100%); box-shadow:0 16px 34px rgba(48,54,120,.28); }
.shift-module .module-icon { border-color:rgba(255,255,255,.3); color:white; background:rgba(255,255,255,.16); box-shadow:inset 0 1px rgba(255,255,255,.16); }
.home-tasks-section { margin-bottom:22px; }
.home-tasks-count { padding:6px 9px; border-radius:999px; color:var(--purple-dark); background:var(--lavender); font-size:10px; font-weight:800; }
.home-tasks-count.warning { color:#9a650a; background:rgba(255,201,83,.2); }
.home-task-list { display:grid; gap:8px; }
.home-task-overall { position:relative; display:grid; min-height:67px; padding:13px 15px 17px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; overflow:hidden; border:1px solid rgba(112,70,217,.16); border-radius:17px; background:var(--surface); box-shadow:var(--shadow); }
.home-task-overall span b,.home-task-overall span small { display:block; }
.home-task-overall span b { font-size:13px; }
.home-task-overall span small { margin-top:4px; color:var(--muted); font-size:9px; }
.home-task-overall > strong { color:var(--purple-dark); font-size:18px; }
.home-task-overall > i { position:absolute; right:0; bottom:0; left:0; height:4px; background:linear-gradient(90deg,var(--purple) var(--task-progress),rgba(112,70,217,.1) var(--task-progress)); }
.home-task-group { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:var(--shadow); }
.home-task-group.overdue { border-color:rgba(214,75,113,.22); }
.home-task-group > summary { display:grid; min-height:56px; padding:10px 13px; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; cursor:pointer; list-style:none; }
.home-task-group > summary::-webkit-details-marker { display:none; }
.home-task-group > summary span strong,.home-task-group > summary span small { display:block; }
.home-task-group > summary span strong { font-size:13px; }
.home-task-group > summary span small { margin-top:4px; color:var(--muted); font-size:9px; }
.home-task-group > summary > b { padding:6px 8px; border-radius:999px; color:var(--purple-dark); background:var(--lavender); font-size:10px; }
.home-task-group > summary > i { color:var(--purple); font-size:15px; font-style:normal; transition:transform .18s ease; }
.home-task-group[open] > summary > i { transform:rotate(180deg); }
.home-task-clubs { display:grid; gap:5px; padding:0 9px 9px; border-top:1px solid var(--line); }
.home-task-club { display:grid; min-height:49px; padding:8px 9px; grid-template-columns:27px minmax(0,1fr) auto; align-items:center; gap:8px; border-radius:11px; color:inherit; background:rgba(112,70,217,.045); text-decoration:none; }
.home-task-club > i { display:grid; width:27px; height:27px; place-items:center; border-radius:9px; color:var(--muted); background:rgba(117,111,141,.09); font-size:11px; font-style:normal; font-weight:900; }
.home-task-club span strong,.home-task-club span small { display:block; }
.home-task-club span strong { font-size:11px; }
.home-task-club span small { margin-top:3px; color:var(--muted); font-size:8px; }
.home-task-club > b { color:var(--purple); font-size:8px; }
.home-task-club.completed > i { color:var(--success); background:rgba(35,155,112,.1); }
.home-task-club.progress > i { color:#138a80; background:rgba(33,184,168,.1); }
.home-task-club.overdue > i { color:var(--danger); background:rgba(214,75,113,.1); }
.home-task-club.skipped > i { color:var(--muted); }
.home-task-empty { display:flex; min-height:58px; padding:13px 15px; align-items:center; justify-content:space-between; border:1px solid rgba(35,155,112,.15); border-radius:17px; color:var(--muted); background:rgba(255,255,255,.62); font-size:10px; }
.home-task-empty b { color:var(--success); font-size:17px; }
.home-task-card { position:relative; display:grid; min-height:72px; padding:12px 38px 12px 15px; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:11px; overflow:hidden; border:1px solid var(--line); border-radius:17px; color:var(--ink); text-decoration:none; background:var(--surface); box-shadow:var(--shadow); }
.home-task-card::after { position:absolute; top:50%; right:14px; color:rgba(112,70,217,.62); font-size:20px; content:'›'; transform:translateY(-50%); }
.home-task-marker { width:7px; height:36px; border-radius:999px; background:var(--purple); box-shadow:0 0 13px rgba(112,70,217,.24); }
.home-task-copy { min-width:0; }
.home-task-copy strong,.home-task-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-task-copy strong { font-size:13px; }
.home-task-copy span { margin-top:5px; color:var(--muted); font-size:10px; }
.home-task-status { padding-right:8px; color:var(--purple); font-size:9px; font-weight:800; white-space:nowrap; }
.home-task-card.progress .home-task-marker { background:#299f91; box-shadow:0 0 13px rgba(41,159,145,.26); }
.home-task-card.due-soon .home-task-marker { background:var(--warning); box-shadow:0 0 13px rgba(197,136,25,.25); }
.home-task-card.due-soon .home-task-status { color:#9a650a; }
.home-task-card.overdue { border-color:rgba(214,75,113,.2); background:rgba(255,248,251,.9); }
.home-task-card.overdue .home-task-marker { background:var(--danger); box-shadow:0 0 13px rgba(214,75,113,.24); }
.home-task-card.overdue .home-task-status { color:var(--danger); }
.home-task-more { display:grid; min-height:42px; place-items:center; border:1px solid rgba(112,70,217,.14); border-radius:14px; color:var(--purple-dark); text-decoration:none; background:rgba(255,255,255,.48); font-size:10px; font-weight:800; }
.management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.management-grid .summary-tile { padding: 13px 10px; box-shadow: none; }
.management-grid .summary-tile strong { font-size: 20px; }
.club-card { padding:0; overflow:hidden; box-shadow:none; }
.club-card > summary { display:block; padding:13px; cursor:pointer; list-style:none; }
.club-card > summary::-webkit-details-marker { display:none; }
.club-head { display:flex; align-items:center; justify-content:space-between; min-width:0; gap:9px; }
.club-head h3 { min-width:0; margin:0; font-size:22px; line-height:1.15; }
.club-overview { margin-top:13px; }
.club-shift-summary { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; }
.club-shift-summary span, .club-shift-summary strong { display:block; }
.club-shift-summary > span { color:var(--muted); font-size:11px; font-weight:800; white-space:nowrap; }
.club-shift-summary strong.shift-people-list { display:flex; min-width:0; flex-wrap:nowrap; gap:5px; margin:0; overflow-x:auto; font-size:12px; white-space:nowrap; scrollbar-width:none; }
.club-shift-summary strong.shift-people-list::-webkit-scrollbar { display:none; }
.shift-person { display:inline-flex; min-height:30px; padding:0 9px; flex:none; align-items:center; gap:3px; border:1px solid rgba(112,70,217,.2); border-radius:10px; color:var(--purple-dark); text-decoration:none; background:var(--lavender); font-size:11px; font-weight:800; }
.shift-person i { font-size:10px; font-style:normal; opacity:.65; }
.shift-person:active { opacity:.65; transform:scale(.98); }
.shift-person.static { color:var(--ink); }
.shift-person-empty { color:var(--muted); font-size:13px; font-weight:650; }
.club-live-statuses { display:flex; flex:none; align-items:center; justify-content:flex-end; gap:4px; }
.club-status { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.club-status.open { color: var(--success); background: rgba(35,155,112,.1); }
.club-status.closed { color: var(--danger); background: rgba(214,75,113,.1); }
.club-booking-status { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.club-booking-status.active { color:#946000; background:rgba(255,193,7,.17); }
.club-booking-status.empty { color:#37836a; background:rgba(68,170,132,.08); }
.club-booking-status.loading { color:var(--muted); background:rgba(117,111,141,.08); }
.club-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.club-meta > div,.club-meta > a { padding:8px 9px; border-radius:12px; background:rgba(112,70,217,.055); }
.club-problems-link { border:1px solid rgba(112,70,217,.13); color:inherit; text-decoration:none; }
.club-problems-link:active { background:rgba(112,70,217,.12); transform:scale(.985); }
.club-meta span, .club-meta strong { display: block; }
.club-meta span { color:var(--muted); font-size:9px; font-weight:650; }
.club-meta strong { margin-top:3px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.club-card .booking-rows { padding:0 10px 10px; background:rgba(112,70,217,.025); }
.club-card .booking-empty { border-top:1px solid var(--line); }
.club-expand { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:9px; color:var(--purple); font-size:9px; font-weight:750; }
.club-expand span { font-size:14px; transition:transform .18s ease; }
.club-card[open] .club-expand span { transform:rotate(90deg); }
.empty-card, .error-card { padding: 16px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.error-card { margin-top: 16px; color: var(--danger); background: rgba(214,75,113,.07); }

@media (min-width: 650px) {
  .club-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-list.management { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:390px) {
  .module-card { padding-left:14px; padding-right:52px; }
  .module-open { font-size:8px; }
  .club-head { gap:6px; }
  .club-head h3 { font-size:20px; }
  .club-status,.club-booking-status { padding-inline:6px; font-size:9px; }
}