:root{
  --page-max: 1520px;
  --page-pad: 24px;
  --bg-main: #d7dde2;
  --bg-card: #f8fafc;
  --bg-panel: #ffffff;
  --line-soft: #d8e0e8;
  --text-main: #152336;
  --text-sub: #5f6b7b;
  --accent-green: #ccf060;
  --accent-blue: #8fb6f4;
  --accent-cyan: #85d2dc;
  --accent-lilac: #b7a8ee;
  --accent-mint: #9cdcbc;
  --accent-ink: #24374d;
  --shadow-soft: 0 18px 36px rgba(30, 50, 76, 0.11);
}

*{ box-sizing: border-box; }

.container{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

body{
  margin: 0;
  min-height: 112vh;
  padding-bottom: 88px;
  background: linear-gradient(180deg, #ecf2fb 0, #f7f9fd 260px, #f8faff 100%);
  color: var(--text-main);
  font-family: "Avenir Next", "Trebuchet MS", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page-bg-shape{
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(1px);
  opacity: .38;
}
.shape-a{
  width: 320px;
  height: 320px;
  left: -120px;
  top: -80px;
  background: radial-gradient(circle, #b3cdf1, transparent 70%);
  opacity: .24;
}
.shape-b{
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -120px;
  background: radial-gradient(circle, #b5d7c2, transparent 68%);
  opacity: .22;
}

.club-portal-header{
  background: linear-gradient(90deg, #1f467d, #315f9a 58%, #3768a6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 38, 68, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.club-portal-header .container{
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px;
  min-height: 84px;
}

.club-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 0;
  color: #fff;
  text-decoration: none;
}

.club-brand-mark{
  display: block;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 26px rgba(16, 36, 68, 0.22);
}

.club-brand-mark img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-brand-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.club-brand-text strong{
  font-size: 20px;
  line-height: 1;
}

.club-brand-text em{
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.club-portal-nav{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}

.club-portal-nav::-webkit-scrollbar{
  display: none;
}

.club-portal-nav a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  transition: none;
}

.club-portal-nav a:hover,
.club-portal-nav a.active{
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.club-top-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.header-user-wrap{
  position: relative;
}

.header-user-chip{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  min-width: 0;
  padding: 4px 14px 4px 4px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.1));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-user-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(10,26,54,0.18);
}

.header-user-avatar{
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.34);
  box-shadow: 0 8px 18px rgba(12,24,46,0.18);
  background: linear-gradient(145deg, #f4f8ff, #d7e4ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-user-avatar img{
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.header-user-avatar-text{
  font-size: 17px;
  font-weight: 800;
  color: #3d5c8f;
}

.header-user-chip .user-chip-name{
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.header-user-chip .user-chip-sub{
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  max-width: 200px;
}

.header-user-alert-badge,
.header-menu-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff7f45;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 14px rgba(255,127,69,0.22);
}

.header-user-alert-badge{
  position: absolute;
  right: 30px;
  top: 7px;
}

.header-user-arrow{
  margin-left: 4px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  transition: transform 0.2s ease;
}

.header-user-arrow.open{
  transform: rotate(180deg);
}

.header-profile-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 198px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #d4dde8;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(15,23,42,0.16);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.header-profile-divider{
  height: 1px;
  margin: 4px 4px 6px;
  background: rgba(148,163,184,0.28);
}

.header-profile-menu[hidden]{
  display: none;
}

.header-profile-item.header-profile-item-with-badge{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-profile-item{
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  color: #2c3b4e;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.header-profile-item:hover{
  background: #edf3fb;
  color: #101827;
}

.header-profile-item.active{
  background: #dff0c0;
  color: #173510;
  font-weight: 700;
}
.header-profile-item.danger{
  color: #b42318;
  font-weight: 700;
}
.header-profile-item.danger:hover{
  background: #fff0ee;
  color: #912018;
}

.club-top-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.club-top-btn.light{
  background: #fff;
  color: #1f4e8c;
}

.club-top-btn.accent{
  background: linear-gradient(135deg, #f0a12f, #de6f1c);
  color: #fff;
  box-shadow: 0 10px 18px rgba(224, 111, 28, 0.28);
}

.club-top-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(19, 41, 75, 0.12);
}

.club-notice-strip{
  padding: 16px 0 0;
  position: relative;
  z-index: 1;
}

.club-notice-frame{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(212, 224, 240, 0.85);
  box-shadow: 0 10px 24px rgba(24, 52, 95, 0.08);
}

.club-notice-label{
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f4e8c, #2d6fbc);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.club-notice-track{
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
}

.club-notice-list{
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: max-content;
  list-style: none;
  padding: 0;
  margin: 0;
}

.club-notice-list li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #27405f;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.club-notice-list li::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0a12f, #de6f1c);
  box-shadow: 0 0 0 4px rgba(240, 161, 47, 0.14);
}

.club-dashboard-wrap{
  padding: 18px 0 48px;
  position: relative;
  z-index: 1;
}

.club-dashboard-container{
  max-width: var(--page-max);
}

.dashboard-shell{
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 20px;
}

.card-surface{
  background: #f6f8fb;
  border: 1px solid #dfe6ef;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.sidebar{
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
  overflow: hidden;
}

.brand-block{
  height: 108px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e4ebf2;
}
.brand-mark{
  color: var(--accent-ink);
  font-size: 18px;
  letter-spacing: -2px;
}
.brand-name{
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .5px;
  color: #1b2a3d;
}

.side-menu{
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-group{
  display: grid;
  gap: 10px;
}

.side-link{
  text-decoration: none;
  color: #3b4858;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.side-link:hover{
  background: #edf3fa;
  border-color: #dce7f3;
  transform: translateX(2px);
}
.side-link.active{
  background: linear-gradient(135deg, var(--accent-green), #d8f981);
  color: #1f2d10;
  border-color: #c7eb5d;
  font-weight: 700;
}

.side-link-toggle{
  position: relative;
  padding-right: 42px;
}

.side-link-toggle::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: currentColor;
  transition: transform .18s ease;
}

.side-group.expanded .side-link-toggle::after{
  transform: translateY(-50%) rotate(180deg);
}

.side-submenu{
  display: grid;
  gap: 10px;
  padding: 2px 0 6px 14px;
  animation: fadeView .2s ease;
}

.side-submenu[aria-hidden="true"]{
  display: none !important;
}

.side-submenu-btn{
  min-height: 56px;
  padding: 0 18px 0 28px;
  border-radius: 18px;
  border: 1px solid #d7e2ef;
  background: rgba(255, 255, 255, 0.72);
  color: #3d536b;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.side-submenu-btn:hover{
  background: #f9fbff;
  color: #111827;
  transform: translateX(1px);
  border-color: #cad9eb;
  box-shadow: 0 10px 18px rgba(57, 82, 112, 0.08), inset 0 0 0 1px #eef4fb;
}

.side-submenu-btn.active{
  color: #fff;
  background: linear-gradient(135deg, #111827, #303f54);
  font-weight: 700;
  box-shadow: 0 8px 14px rgba(17, 24, 39, 0.2);
}

.sidebar-footer{
  margin-top: auto;
  border-top: 1px solid #e3ebf3;
  padding: 0;
  display: none;
}

.user-chip{
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-chip img{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #d2dbe5;
  object-fit: cover;
}
.user-chip-name{
  font-size: 14px;
  font-weight: 700;
}
.user-chip-sub{
  font-size: 12px;
  color: var(--text-sub);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ghost-btn{
  height: 42px;
  border-radius: 12px;
  border: 1px solid #d8e1ec;
  background: #fff;
  color: #27384d;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease;
}
.ghost-btn:hover{
  transform: translateY(-1px);
  border-color: #b8ccdf;
}

.main-panel{
  min-width: 0;
  display: grid;
  gap: 16px;
}
.view-stack{
  display: grid;
  gap: 14px;
}
.manage-view{
  display: none;
  animation: fadeView .24s ease;
}
.manage-view.active-view{
  display: grid;
  gap: 14px;
}

.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi-card{
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid #dde4ec;
  box-shadow: 0 12px 24px rgba(35, 58, 86, 0.08);
}
.kpi-card.lilac{ background: linear-gradient(135deg, #c5bbf4, var(--accent-lilac)); }
.kpi-card.blue{ background: linear-gradient(135deg, #a8c8f7, var(--accent-blue)); }
.kpi-card.mint{ background: linear-gradient(135deg, #b1e4c9, var(--accent-mint)); }
.kpi-card.cyan{ background: linear-gradient(135deg, #a8dee5, var(--accent-cyan)); }

.kpi-label{
  font-size: 13px;
  color: #2a3d53;
  font-weight: 600;
}
.kpi-value{
  margin-top: 10px;
  font-size: clamp(34px, 2.3vw, 46px);
  font-weight: 800;
  line-height: 1;
}
.kpi-note{
  margin-top: 8px;
  font-size: 12px;
  color: #31475f;
}

.board-grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "chart insight agenda"
    "chart insight team";
  gap: 14px;
}

.chart-card{ grid-area: chart; }
.insight-card{ grid-area: insight; }
.agenda-card{ grid-area: agenda; }
.team-card{ grid-area: team; }

.panel-card{
  background: var(--bg-panel);
  border: 1px solid #dde4ec;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 26px rgba(28, 45, 69, 0.08);
}

.panel-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-head h3{
  margin: 0;
  font-size: 28px;
  letter-spacing: .2px;
}
.light-text{
  font-size: 13px;
  color: #6a7688;
}
.pill-btn{
  text-decoration: none;
  font-size: 12px;
  color: #21364c;
  background: #e6f0fb;
  border: 1px solid #d2e4f8;
  border-radius: 999px;
  padding: 6px 11px;
  font-family: inherit;
  cursor: pointer;
}

.module-grid{
  display: grid;
  gap: 14px;
}
.module-grid.two-col{
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.teaching-module-grid{
  grid-template-columns: 1fr;
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.teaching-form-grid{
  align-items: start;
}
.edit-form-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label,
.form-field{
  display: grid;
  gap: 6px;
  color: #425468;
  font-size: 13px;
}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 10px 12px;
  font-size: 14px;
  color: #24374f;
  background: #fff;
  font-family: inherit;
}
.currency-input{
  position: relative;
}
.currency-input-prefix{
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #425468;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
.currency-input input{
  padding-left: 30px;
}
.form-grid textarea{
  resize: vertical;
}
.map-link-search-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.map-link-search-field{
  display: grid;
  gap: 6px;
  color: #425468;
  font-size: 13px;
}
.map-link-search-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.map-link-btn{
  white-space: nowrap;
}
.map-link-helper{
  color: #6b7d91;
  font-size: 12px;
  line-height: 1.5;
}
.map-preview-card{
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #d8e4f0;
  background: #fbfdff;
}
.map-preview-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.map-preview-head strong{
  color: #284361;
  font-size: 14px;
}
.map-preview-head span{
  color: #6b7d91;
  font-size: 12px;
}
.map-preview-frame{
  width: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 14px;
  background: #e9f0f8;
}
.time-slot-builder{
  display: grid;
  gap: 10px;
}
.time-slot-controls{
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.time-slot-control-field{
  display: grid;
  gap: 6px;
  color: #425468;
  font-size: 13px;
}
.time-slot-control-field span{
  font-weight: 400;
}
.time-slot-add-btn{
  min-width: 118px;
}
.time-slot-helper{
  color: #6b7d91;
  font-size: 12px;
  line-height: 1.5;
}
.time-slot-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.time-slot-empty{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed #d4e0ec;
  background: #fbfdff;
  color: #708195;
  font-size: 12px;
}
.time-slot-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #d4e0ec;
  background: #eef4fb;
  color: #284361;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.time-slot-pill-label{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.time-slot-remove{
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: #6f82a0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.time-slot-remove:hover{
  color: #29435f;
}
.form-section-title{
  padding-top: 8px;
  color: #264564;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}
.span-2{
  grid-column: span 2;
}
.form-actions{
  display: flex;
  gap: 10px;
}

.btn-primary,
.btn-plain,
.btn-danger{
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.btn-primary{
  background: linear-gradient(135deg, #4f9fff, #2e75d7);
  border-color: #3277d6;
  color: #fff;
}
.btn-plain{
  background: #edf3fb;
  border-color: #d3e1f1;
  color: #29435f;
}
.btn-danger{
  background: #fdeaea;
  border-color: #f5c7c7;
  color: #8d2727;
}
.btn-primary:disabled,
.btn-plain:disabled,
.btn-danger:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.small{
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.simple-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.simple-list li{
  border: 1px solid #e4ebf3;
  background: #f9fcff;
  border-radius: 12px;
  padding: 10px 12px;
}
.simple-item-title{
  font-size: 14px;
  font-weight: 700;
}
.simple-item-sub{
  margin-top: 4px;
  font-size: 12px;
  color: #637488;
}

.cards-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.club-manage-card{
  border: 1px solid #e3ebf3;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border-radius: 14px;
  padding: 14px;
}
.club-manage-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.club-manage-head h4{
  margin: 0;
  font-size: 16px;
}
.club-manage-meta{
  margin-top: 6px;
  font-size: 12px;
  color: #637589;
}
.club-manage-card p{
  margin: 10px 0 0;
  font-size: 13px;
  color: #415368;
  line-height: 1.6;
  min-height: 44px;
}
.club-manage-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions-cell{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-actions button{
  border-radius: 10px;
  border: 1px solid #d6e6d0;
  background: #e7f4dd;
  color: #27411f;
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.empty-card{
  border: 1px dashed #d2dde9;
  border-radius: 14px;
  padding: 26px 16px;
  text-align: center;
  color: #6f7c8f;
}

.weekly-chart{
  height: 250px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.bar-item{
  display: grid;
  justify-items: center;
  gap: 6px;
}
.bar-track{
  width: 84%;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(180deg, #edf2f7, #e6edf6);
  border: 1px solid #e0e8f1;
  display: flex;
  align-items: end;
  overflow: hidden;
}
.bar-fill{
  width: 100%;
  background: linear-gradient(180deg, #7fb4ee, #4d87c8);
  border-radius: 8px 8px 0 0;
  transform-origin: bottom;
  animation: barRise .8s ease-out;
}
.bar-item:nth-child(2n) .bar-fill{
  background: linear-gradient(180deg, #9fd7b8, #5aad7f);
}
.bar-item:nth-child(3n) .bar-fill{
  background: linear-gradient(180deg, #d7b8ff, #9a78ca);
}
.bar-val{
  font-size: 12px;
  font-weight: 700;
}
.bar-label{
  font-size: 12px;
  color: #6b7380;
}

.insight-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.insight-list li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #e3ebf3;
  background: #f7fbff;
  border-radius: 12px;
  padding: 11px 12px;
}
.insight-list span{
  font-size: 13px;
  color: #4f6277;
}
.insight-list strong{
  font-size: 18px;
}

.quick-actions{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.quick-actions a{
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid #d6e6d0;
  background: #e7f4dd;
  color: #27411f;
  padding: 10px 12px;
  font-size: 13px;
}

.agenda-list,
.team-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.agenda-list li,
.team-list li{
  border-radius: 12px;
  border: 1px solid #e5ecf3;
  background: #f9fcff;
  padding: 10px 12px;
}
.agenda-title,
.team-name{
  font-size: 14px;
  font-weight: 700;
}
.agenda-sub,
.team-meta{
  margin-top: 4px;
  font-size: 12px;
  color: #627184;
}
.empty-item{
  text-align: center;
  color: #6f7b8a;
  font-size: 13px;
}

.table-card{
  overflow: hidden;
}
.table-wrap{
  overflow-x: auto;
}
table{
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}
thead th{
  text-align: left;
  font-size: 13px;
  color: #617387;
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 1px solid #e3eaf2;
}
tbody td{
  padding: 12px 8px;
  font-size: 14px;
  border-bottom: 1px solid #edf2f7;
}
.table-maintext{
  font-weight: 700;
  color: #22374d;
}
.table-subtext{
  margin-top: 4px;
  color: #66788e;
  font-size: 12px;
  line-height: 1.6;
}
tbody tr:hover{
  background: #f6fbff;
}
.table-row-selectable{
  cursor: pointer;
}
.table-row-selected{
  background: #eef6ff;
}
.table-row-selected td{
  box-shadow: inset 0 1px 0 #d9e7fb, inset 0 -1px 0 #d9e7fb;
}
.status-pill{
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecf4ff;
  border: 1px solid #d4e6fd;
  color: #2f4f73;
  font-size: 12px;
}
.empty-row{
  color: #6d7888;
  text-align: center;
  padding: 30px 12px;
}

.reveal{
  animation: riseIn .45s ease both;
}
.kpi-grid .reveal:nth-child(2){ animation-delay: .06s; }
.kpi-grid .reveal:nth-child(3){ animation-delay: .12s; }
.kpi-grid .reveal:nth-child(4){ animation-delay: .18s; }

@keyframes riseIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeView{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes barRise{
  from{ transform: scaleY(0); }
  to{ transform: scaleY(1); }
}

.guest-mode .dashboard-shell{
  filter: saturate(.95);
}
.guest-mode .side-link.active{
  background: linear-gradient(135deg, #dfe7f1, #e7edf4);
  border-color: #d7e0ea;
  color: #415468;
}

@media (max-width: 1280px){
  .club-portal-header .container{
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .club-portal-nav{
    width: 100%;
    justify-content: space-between;
  }
  .club-top-actions{
    justify-content: flex-start;
  }
  .header-user-chip .user-chip-sub{
    max-width: 260px;
  }
  .dashboard-shell{
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .board-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "chart chart"
      "insight agenda"
      "team team";
  }
  .cards-grid{
    grid-template-columns: 1fr;
  }
  .module-grid.two-col{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .club-notice-frame{
    flex-direction: column;
    align-items: flex-start;
  }
  .club-notice-track{
    width: 100%;
  }
  .club-dashboard-wrap{
    padding: 14px 0 36px;
  }
  .dashboard-shell{
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
  }
  .sidebar{
    min-height: auto;
  }
  .side-menu{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .side-group{
    grid-column: 1 / -1;
  }
  .board-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "insight"
      "agenda"
      "team";
  }
  .map-link-search-row{
    grid-template-columns: 1fr;
  }
  .time-slot-controls{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .time-slot-add-btn{
    width: 100%;
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px){
  .club-brand{
    gap: 10px;
  }
  .club-brand-mark{
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  .club-brand-text strong{
    font-size: 18px;
  }
  .club-brand-text em{
    font-size: 12px;
  }
  .club-portal-nav{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }
  .club-portal-nav a{
    flex: 0 0 auto;
    padding: 8px 12px;
  }
  .club-top-actions{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .header-user-wrap{
    width: 100%;
  }
  .header-user-chip{
    width: 100%;
    border-radius: 18px;
    justify-content: flex-start;
  }
  .header-profile-menu{
    right: auto;
    left: 0;
    width: min(240px, 80vw);
  }
  .club-top-btn{
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
  .club-notice-frame{
    padding: 14px;
  }
  .club-notice-list{
    gap: 18px;
  }
  .club-notice-list li{
    font-size: 13px;
  }
  .brand-name{
    font-size: 32px;
  }
  .side-menu{
    grid-template-columns: 1fr;
  }
  .kpi-grid{
    grid-template-columns: 1fr;
  }
  .panel-head h3{
    font-size: 24px;
  }
  .form-grid{
    grid-template-columns: 1fr;
  }
  .span-2{
    grid-column: span 1;
  }
  .map-link-search-actions{
    flex-direction: column;
  }
  .map-link-btn{
    width: 100%;
  }
  .time-slot-controls{
    grid-template-columns: 1fr;
  }
}