/* ===== StudioFlow — Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --navy-900:#111114;
  --navy-800:#18181c;
  --navy-700:#212126;
  --violet-500:#8c52ff;
  --violet-600:#7a3ff2;
  --violet-100:#f2e9ff;
  --blue-500:#4f9cf9;
  --green-500:#2ecc71;
  --orange-500:#ffa64d;
  --red-500:#ff5c72;
  --pink-500:#ff6fa5;
  --gold-500:#d4af6a;
  --gold-700:#9c7a3c;
  --bg:#f6f6fa;
  --card:#ffffff;
  --border:#edeef3;
  --text:#1c1e2b;
  --text-mut:#8b8fa3;
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 4px 16px rgba(30,34,70,.05);
  --shadow-lg: 0 16px 40px rgba(30,34,70,.12);
}

*{box-sizing:border-box;}
html,body{height:100%; max-width:100%; overflow-x:hidden;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14.5px; line-height:1.6; font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.icon{width:18px;height:18px;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
h1,h2,h3,h4{font-weight:600; letter-spacing:-.015em;}

/* ===== Layout ===== */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0; color:#b9bac6;
  background:linear-gradient(180deg,#0f0f13 0%, #14141a 100%);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:40;
  transition: transform .25s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:22px 20px 18px; }
.sidebar-brand .logo-mark{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;object-fit:cover;
  background:linear-gradient(135deg,var(--violet-500),#b18cff);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px;
}
img.logo-mark{ background:none; display:block; }
.sidebar-brand .brand-name{font-weight:500;font-size:16px;color:#fff;letter-spacing:.01em;}
.sidebar-brand .brand-sub{font-size:11px;color:#71727f;}

.sidebar-nav{ padding:10px 12px; flex:1; overflow-y:auto; }
.sidebar-section-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:#7d7f92; padding:18px 14px 7px; }
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px;
  color:#9b9caa; font-weight:400; margin-bottom:2px; font-size:13.6px; transition:.15s;
}
.nav-item .icon{width:17px;height:17px; opacity:.7;}
.nav-item:hover{ background:rgba(255,255,255,.045); color:#fff; }
.nav-item:hover .icon{ opacity:1; }
.nav-item.active{ background:rgba(140,82,255,.14); color:#fff; font-weight:500; }
.nav-item.active .icon{ opacity:1; color:#c0a3ff; }
.nav-badge{
  margin-left:auto; font-size:8.5px; font-weight:700; letter-spacing:.08em;
  padding:2px 6px; border-radius:5px; line-height:1.4;
  background:#ffd429; color:#111114; flex-shrink:0;
}
.nav-item.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#b18cff,var(--violet-500));
}

.sidebar-user{
  margin:10px 14px 18px; padding:12px; border-radius:13px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:36px;height:36px;border-radius:50%; background:var(--violet-500); color:#fff;
  display:flex;align-items:center;justify-content:center; font-weight:500; font-size:13px; flex-shrink:0;
  background-size:cover; background-position:center;
}
.sidebar-user .u-name{color:#fff; font-weight:500; font-size:13px;}
.sidebar-user .u-role{color:#71727f; font-size:11.5px; text-transform:capitalize;}
.sidebar-logout{margin-left:auto; color:#8b8fb3;}
.sidebar-logout:hover{color:#fff;}

.main{ margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:72px; background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:19px; margin:0; font-weight:600;}
.topbar .sub{color:var(--text-mut); font-size:12.5px; margin-top:2px;}
.topbar-actions{display:flex; align-items:center; gap:12px;}
.burger{display:none; background:none;border:none;color:var(--text);}

.content{ padding:26px 28px 60px; max-width:1400px; width:100%; }

/* ===== Cards / KPIs ===== */
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; border:1px solid var(--border); }
.card h3{margin:0 0 14px; font-size:15px; font-weight:600;}

.kpi{ display:flex; flex-direction:column; gap:10px; }
.kpi .kpi-top{display:flex; align-items:center; justify-content:space-between;}
.kpi .kpi-icon{
  width:42px;height:42px;border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff;
}
.kpi .kpi-value{font-size:26px; font-weight:600;}
.kpi .kpi-label{color:var(--text-mut); font-size:12.5px;}
.kpi .kpi-trend{font-size:12px; font-weight:500; padding:3px 8px; border-radius:20px;}
.trend-up{color:#1a9a56; background:#e8faf0;}
.trend-down{color:#e0435e; background:#fdecef;}

.bg-violet{background:linear-gradient(135deg,var(--violet-500),#b18cff);}
.bg-blue{background:linear-gradient(135deg,var(--blue-500),#7cc0ff);}
.bg-green{background:linear-gradient(135deg,#28c76f,#3ee08c);}
.bg-orange{background:linear-gradient(135deg,#ff9f43,#ffc069);}
.bg-pink{background:linear-gradient(135deg,#ff6fa5,#ff97c1);}
.bg-red{background:linear-gradient(135deg,#ff5c72,#ff8a97);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:11px; border:none;
  font-weight:500; font-size:13.5px; transition:.15s;
}
.btn .icon{width:16px;height:16px;}
.btn-primary{background:var(--violet-500); color:#fff;}
.btn-primary:hover{background:var(--violet-600);}
.btn-light{background:var(--violet-100); color:var(--violet-600);}
.btn-light:hover{background:#e2ddfd;}
.btn-outline{background:transparent; border:1.5px solid var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--violet-500); color:var(--violet-600);}
.btn-danger{background:#fdecef; color:#e0435e;}
.btn-danger:hover{background:#fbdbe0;}
.btn-sm{padding:7px 13px; font-size:12.5px; border-radius:9px;}
.btn-icon{padding:9px; border-radius:10px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ===== Table ===== */
.table-wrap{overflow-x:auto;}
table.sf-table{width:100%; border-collapse:collapse;}
.sf-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mut);
  padding:10px 14px; border-bottom:1.5px solid var(--border); font-weight:500;
}
.sf-table td{padding:13px 14px; border-bottom:1px solid var(--border); font-size:13.6px; vertical-align:middle;}
.sf-table tr:last-child td{border-bottom:none;}
.sf-table tr:hover td{background:#fafbff;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:500;}
.badge-green{background:#e8faf0; color:#1a9a56;}
.badge-red{background:#fdecef; color:#e0435e;}
.badge-orange{background:#fff5e8; color:#c97a12;}
.badge-blue{background:#eaf3ff; color:#2d76d1;}
.badge-violet{background:var(--violet-100); color:var(--violet-600);}
.badge-gray{background:#f0f1f6; color:#75798f;}

.person-cell{display:flex;align-items:center;gap:10px;}
.person-cell .avatar{width:32px;height:32px;font-size:11.5px;}
.person-cell .p-name{font-weight:500; font-size:13.5px;}
.person-cell .p-sub{font-size:11.8px; color:var(--text-mut);}

/* ===== Forms ===== */
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:12.8px; font-weight:500; margin-bottom:6px; color:#3a3d58;}
.form-row .hint{font-size:11.5px; color:var(--text-mut); margin-top:5px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input[type=tel],select,textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border); background:#fbfbfe; color:var(--text); font-size:13.8px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet-500); background:#fff;}
textarea{resize:vertical; min-height:80px;}
.checkbox-row{display:flex; align-items:center; gap:9px;}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(21,24,51,.5); display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px; backdrop-filter:blur(2px);
}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:18px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border);}
.modal-header h2{font-size:17px; margin:0; font-weight:600;}
.modal-body{padding:22px 24px;}
.modal-footer{padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;}
.modal-close{background:none;border:none;color:var(--text-mut);}

/* ===== Alerts / Flash ===== */
.alert{padding:13px 16px; border-radius:12px; margin-bottom:18px; font-size:13.6px; font-weight:600; display:flex; align-items:center; gap:10px;}
.alert-success{background:#e8faf0; color:#1a9a56;}
.alert-error{background:#fdecef; color:#e0435e;}
.alert-info{background:#eaf3ff; color:#2d76d1;}

/* ===== Planning / Calendar ===== */
.planning-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.week-nav{display:flex; align-items:center; gap:8px;}
.week-nav .btn-icon{background:var(--violet-100); color:var(--violet-600);}
.week-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:12px;}
@media(max-width:1000px){.week-grid{grid-template-columns:1fr;}}
.day-col{background:var(--card); border-radius:14px; border:1px solid var(--border); min-height:120px; overflow:hidden;}
.day-col-header{padding:11px 12px; text-align:center; border-bottom:1px solid var(--border);}
.day-col-header .d-name{font-size:11.5px; color:var(--text-mut); text-transform:uppercase; font-weight:500;}
.day-col-header .d-num{font-size:17px; font-weight:600;}
.day-col-header.today{background:var(--violet-100);}
.day-col-body{padding:8px; display:flex; flex-direction:column; gap:8px;}
.session-card{
  border-radius:10px; padding:9px 10px; font-size:12px; cursor:pointer; border-left:4px solid var(--violet-500);
  background:var(--violet-100); color:#3a3560;
}
.session-card .s-time{font-weight:600; font-size:11.5px;}
.session-card .s-title{font-weight:500; margin:2px 0;}
.session-card .s-meta{color:#6d6795; font-size:11px;}
.session-card .s-cap{margin-top:4px; font-size:10.8px; font-weight:500;}
.session-card:hover{filter:brightness(.97);}
.session-card.full{opacity:.65;}
.day-empty{color:var(--text-mut); font-size:11.5px; text-align:center; padding:14px 4px;}

/* ===== Class filter chips ===== */
.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{padding:7px 14px; border-radius:20px; background:#fff; border:1.5px solid var(--border); font-size:12.8px; font-weight:600; color:var(--text-mut);}
.chip.active{background:var(--violet-500); border-color:var(--violet-500); color:#fff;}

/* ===== Class card (client booking) ===== */
.class-card{ background:var(--card); border-radius:14px; border:1px solid var(--border); padding:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.class-card .c-time-block{
  width:62px; flex-shrink:0; text-align:center; background:var(--violet-100); border-radius:11px; padding:8px 4px; color:var(--violet-600); font-weight:600;
}
.class-card .c-time-block .t-big{font-size:16px;}
.class-card .c-time-block .t-small{font-size:10.5px; color:#8a7fd8;}
.class-card .c-info{flex:1; min-width:180px;}
.class-card .c-title{font-weight:600; font-size:14.5px;}
.class-card .c-meta{color:var(--text-mut); font-size:12px; margin-top:3px;}
.class-card form{width:auto;}

/* ===== Progress bar ===== */
.progress{height:8px; border-radius:20px; background:#eef0f8; overflow:hidden;}
.progress > div{height:100%; background:linear-gradient(90deg,var(--violet-500),#b18cff); border-radius:20px;}

/* ===== Empty state ===== */
.empty-state{text-align:center; padding:50px 20px; color:var(--text-mut);}
.empty-state .icon{width:44px;height:44px; margin-bottom:12px; opacity:.4;}

/* ===== Auth split layout ===== */
.auth-split-wrap{ display:flex; min-height:100vh; background:#fff; }
.auth-split-left{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.auth-split-form{ width:100%; max-width:400px; }
.auth-split-logo{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-split-logo .logo-mark{ width:38px;height:38px;border-radius:11px; background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600; flex-shrink:0; }
.auth-split-title{ font-size:26px; font-weight:600; margin:0 0 8px; }
.auth-split-sub{ color:var(--text-mut); font-size:13.5px; margin:0 0 26px; }
.auth-split-right{
  flex:1 1 50%; position:relative; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:44px; color:#fff;
}
.auth-split-caption{ max-width:440px; }
.auth-split-caption h2{ font-size:24px; font-weight:600; margin:0 0 10px; }
.auth-split-caption p{ font-size:14px; opacity:.88; line-height:1.6; margin:0; }
@media(max-width:860px){
  .auth-split-right{ display:none; }
  .auth-split-left{ padding:32px 20px; }
}

/* ===== Auth (legacy centered card, still used by non-split contexts) ===== */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-900),#2a2e5c); padding:20px;}
.auth-card{background:#fff; width:100%; max-width:420px; border-radius:20px; padding:40px 34px; box-shadow:var(--shadow-lg);}
.auth-logo{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:22px;}
.auth-logo .logo-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--violet-500),var(--pink-500)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;}
.auth-card h1{text-align:center; font-size:20px; margin:0 0 6px;}
.auth-card .sub{text-align:center; color:var(--text-mut); font-size:13px; margin-bottom:26px;}

/* ===== Install wizard ===== */
.install-wrap{min-height:100vh; background:var(--bg); padding:40px 20px;}
.install-shell{max-width:640px; margin:0 auto;}
.install-steps{display:flex; justify-content:space-between; margin-bottom:30px;}
.i-step{flex:1; text-align:center; position:relative;}
.i-step .dot{width:30px;height:30px;border-radius:50%; background:#e4e6f2; color:#8890a6; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-weight:600; font-size:12.5px;}
.i-step.active .dot,.i-step.done .dot{background:var(--violet-500); color:#fff;}
.i-step .lbl{font-size:11px; color:var(--text-mut); font-weight:500;}
.i-step.active .lbl{color:var(--violet-600);}

.req-list{list-style:none; padding:0; margin:0;}
.req-list li{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border);}
.req-list li:last-child{border-bottom:none;}

/* ===== Misc ===== */
.text-mut{color:var(--text-mut);}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.section-title h2{font-size:18px; margin:0; font-weight:600;}

/* ===== Month calendar ===== */
.month-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.month-cell{background:var(--card); border:1px solid var(--border); border-radius:12px; min-height:88px; padding:8px; text-decoration:none; color:var(--text); display:block; transition:.15s;}
.month-cell:hover{border-color:var(--violet-500); box-shadow:0 4px 14px rgba(140,82,255,.12);}
.month-cell.other-month{opacity:.35;}
.month-cell.today{background:var(--violet-100); border-color:var(--violet-500);}
.month-cell .m-num{font-weight:600; font-size:13px;}
.month-cell .m-count{margin-top:8px; font-size:11px; font-weight:500; color:var(--violet-600); background:var(--violet-100); border-radius:8px; padding:2px 7px; display:inline-block;}
.month-dow{text-align:center; font-size:11px; font-weight:500; color:var(--text-mut); text-transform:uppercase; padding-bottom:6px;}
@media(max-width:640px){
  .month-grid{grid-template-columns:repeat(7,1fr); gap:4px;}
  .month-cell{min-height:52px; padding:5px; font-size:11px;}
  .month-cell .m-count{font-size:9px; padding:1px 4px;}
}

/* ===== Settings sub-navigation ===== */
.settings-tabs{
  display:flex; gap:6px; overflow-x:auto; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:7px; margin-bottom:22px; -webkit-overflow-scrolling:touch;
}
.settings-tab{
  display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:11px;
  font-size:13px; font-weight:500; color:var(--text-mut); white-space:nowrap; flex-shrink:0; transition:.14s;
}
.settings-tab .icon{ width:16px; height:16px; }
.settings-tab:hover{ background:#f5f5fb; color:var(--text); }
.settings-tab.active{ background:var(--violet-500); color:#fff; }

.pagination-gap{ display:flex; align-items:center; padding:0 4px; color:var(--text-mut); font-size:13px; }

/* ===== Subscription rows ===== */
.sub-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.sub-row:last-child{ border-bottom:none; }

/* ===== Shared app shell (coach & client desktop) ===== */
.app-shell{ display:block; }
.app-sidebar{ display:none; }
.app-topbar{ display:none; }

@media(min-width:960px){
  .app-shell{ display:flex; min-height:100vh; align-items:stretch; }

  .app-sidebar{
    display:flex; flex-direction:column; width:246px; flex-shrink:0;
    background:linear-gradient(180deg,#0f0f13 0%, #14141a 100%);
    border-right:1px solid rgba(255,255,255,.06); color:#b9bac6;
    position:fixed; top:0; bottom:0; left:0; z-index:40;
  }
  .app-sidebar .brand-name{
    font-weight:500; font-size:14.5px; color:#fff; letter-spacing:.01em;
    max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  .app-body{ flex:1; min-width:0; margin-left:246px; display:flex; flex-direction:column; }

  .app-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    height:70px; padding:0 30px; background:var(--card); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:30;
  }

  /* Le bandeau mobile et la barre du bas disparaissent au profit de la sidebar */
  .coach-hero, .client-hero{ display:none; }
  .coach-bottom-nav, .client-bottom-nav{ display:none !important; }
  .client-tabs-desktop{ display:none !important; }
  .coach-body, .client-body{ padding-bottom:0; }

  .coach-main, .client-main{ max-width:1180px; margin:0; padding:26px 30px 60px; width:100%; }
  .coach-page-title, .client-page-title{ font-size:21px; margin-bottom:20px; }

  /* Grilles plus larges sur grand écran */
  .coach-main .grid-2, .client-main .grid-2{ grid-template-columns:repeat(2,1fr); }
  .course-card{ max-width:none; }
  .course-visual{ width:110px; min-height:104px; }
  .event-grid{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); }
  .day-strip{ position:sticky; top:70px; background:var(--bg); padding-top:8px; z-index:20; }
}

@media(min-width:1400px){
  .coach-main, .client-main{ max-width:1320px; }
}

/* ===== Account tabs & photo cropper ===== */
.sheet-tabs{
  display:flex; gap:6px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:6px; margin-bottom:20px;
}
.sheet-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px;
  border:none; background:transparent; border-radius:11px; font-size:13px; font-weight:500;
  color:var(--text-mut); font-family:inherit; transition:.14s;
}
.sheet-tab .icon{ width:16px; height:16px; }
.sheet-tab.active{ background:var(--violet-500); color:#fff; }
@media(max-width:520px){ .sheet-tab{ font-size:12px; padding:10px 8px; } .sheet-tab .icon{ display:none; } }

.crop-stage{ position:relative; width:300px; max-width:100%; margin:0 auto; border-radius:14px; overflow:hidden; }
.crop-stage canvas{ display:block; cursor:grab; touch-action:none; width:100%; height:auto; }
.crop-stage canvas:active{ cursor:grabbing; }
.crop-mask{
  position:absolute; inset:0; pointer-events:none; border-radius:14px;
  box-shadow:inset 0 0 0 2000px rgba(20,20,30,.45);
  -webkit-mask:radial-gradient(circle at center, transparent 49%, #000 50%);
  mask:radial-gradient(circle at center, transparent 49%, #000 50%);
}

/* ===== Coach notifications & notes ===== */
.coach-notif{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:12px;
  background:linear-gradient(90deg, rgba(140,82,255,.10), rgba(140,82,255,.03));
  border:1px solid rgba(140,82,255,.20); border-radius:14px;
}
.cn-icon{
  width:32px;height:32px;border-radius:10px; background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cn-msg{ font-size:13px; font-weight:500; line-height:1.45; }
.cn-time{ font-size:11px; color:var(--text-mut); margin-top:2px; }
.cn-close{
  background:none; border:none; color:var(--text-mut); padding:4px; border-radius:8px; flex-shrink:0;
}
.cn-close:hover{ background:rgba(0,0,0,.05); color:var(--text); }

.note-item{
  background:#fafaff; border:1px solid var(--border); border-left:3px solid var(--violet-500);
  border-radius:11px; padding:12px 14px; margin-bottom:10px;
}
.note-item.is-incident{ background:#fff7f8; border-left-color:var(--red-500); }
.note-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ===== Referral (client) ===== */
.referral-hero{
  background:linear-gradient(140deg, #7a3ff2 0%, #9f6bff 45%, #c0a3ff 100%);
  color:#fff; border-radius:20px; padding:26px 22px; margin-bottom:20px; position:relative; overflow:hidden;
}
.referral-hero::after{
  content:''; position:absolute; right:-50px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,0) 65%);
}
.ref-title{ font-size:19px; font-weight:600; letter-spacing:-.02em; position:relative; z-index:1; }
.ref-sub{ font-size:13px; opacity:.85; margin:8px 0 20px; line-height:1.55; position:relative; z-index:1; }
.ref-code-box{
  background:rgba(255,255,255,.13); border:1px dashed rgba(255,255,255,.4); border-radius:14px;
  padding:14px 18px; text-align:center; margin-bottom:16px; position:relative; z-index:1;
}
.ref-code-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.ref-code{ font-family:monospace; font-size:24px; font-weight:600; letter-spacing:.18em; margin-top:4px; }
.ref-actions{ display:flex; gap:10px; position:relative; z-index:1; }
.ref-link-input{
  position:absolute; opacity:0; pointer-events:none; left:-9999px;
}

/* ===== Universal widget ===== */
.wgt-grid{ display:grid; gap:16px; }
.wgt-grid.cols-1{ grid-template-columns:1fr; }
.wgt-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.wgt-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:820px){ .wgt-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .wgt-grid.cols-2, .wgt-grid.cols-3{ grid-template-columns:1fr; } }
.wgt-filters{ grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.wgt-full{ grid-column:1/-1; }
.wgt-empty{ grid-column:1/-1; text-align:center; padding:40px 16px; color:var(--text-mut); font-size:13px; }
.wgt-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.wgt-visual{ aspect-ratio:16/10; background-size:cover; background-position:center; }
.wgt-visual.poster{ aspect-ratio:4/5; }
.wgt-body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.wgt-title{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.wgt-desc{ font-size:12.2px; color:var(--text-mut); margin:0; flex:1; }
.wgt-meta{ font-size:11.8px; color:var(--text-mut); text-transform:capitalize; }

.plan-card .wgt-body{ gap:6px; }
.plan-price{ font-size:26px; font-weight:600; letter-spacing:-.03em; color:var(--violet-600); }
.plan-price span{ font-size:12px; font-weight:400; color:var(--text-mut); letter-spacing:0; }
.plan-list{ list-style:none; padding:0; margin:6px 0 12px; font-size:12.5px; color:var(--text); }
.plan-list li{ padding:5px 0 5px 20px; position:relative; }
.plan-list li::before{ content:'✓'; position:absolute; left:0; color:#1a9a56; font-weight:600; }

/* ===== Event cards (posters 1080x1350) ===== */
.event-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
@media(max-width:620px){ .event-grid{ grid-template-columns:1fr; } }
.event-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.event-card.is-off{ opacity:.6; }
.event-poster{
  position:relative; aspect-ratio:4/5; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:16px;
}
.event-poster::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.78) 100%);
}
.event-kind{ position:absolute; top:12px; left:12px; z-index:2; }
.event-off{ position:absolute; top:12px; right:12px; z-index:2; }
.event-poster-foot{ position:relative; z-index:2; color:#fff; }
.ep-date{ font-size:11.5px; opacity:.9; letter-spacing:.02em; text-transform:capitalize; }
.ep-title{ font-size:17px; font-weight:600; letter-spacing:-.02em; margin-top:3px; line-height:1.25; }
.event-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.event-desc{ font-size:12.6px; color:var(--text-mut); margin:0; line-height:1.55; }
.event-meta-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.2px; color:var(--text-mut); }
.event-meta-row .icon{ width:14px; height:14px; vertical-align:-2px; }
.event-price{ font-size:16px; font-weight:600; color:var(--violet-600); }

/* ===== Avatar editor ===== */
.avatar-editor{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.avatar-preview{
  width:78px; height:78px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--violet-500),#b18cff); background-size:cover; background-position:center;
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:500;
  border:3px solid #fff; outline:1px solid var(--border);
}

/* ===== Client app (premium) ===== */
.client-body{ background:var(--bg); }

.client-hero{
  background:linear-gradient(140deg, #7a3ff2 0%, #9f6bff 45%, #c0a3ff 100%);
  color:#fff; padding:22px 20px 26px; border-radius:0 0 26px 26px; position:relative; overflow:hidden;
}
.client-hero::after{
  content:''; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 65%);
}
.client-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:2; }
.client-hero-user{ display:flex; align-items:center; gap:12px; color:#fff; min-width:0; }
.client-hero-user .avatar{ background-size:cover; background-position:center; border:2px solid rgba(255,255,255,.25); }
.ch-hello{ font-size:12.5px; opacity:.72; }
.ch-name{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.client-icon-btn{
  position:relative; width:40px;height:40px;border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10); color:#fff; display:flex; align-items:center; justify-content:center;
}
.client-icon-btn:hover{ background:rgba(255,255,255,.18); }
.notif-dot{
  position:absolute; top:-5px; right:-5px; background:#ff5c72; color:#fff; font-size:9.5px; font-weight:600;
  border-radius:20px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.notif-dropdown{
  display:none; position:absolute; right:0; top:48px; width:min(300px, calc(100vw - 40px));
  max-height:380px; overflow-y:auto; background:#fff; color:var(--text);
  border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:70;
}
.notif-dropdown.open{ display:block; }
.notif-dropdown-head{ padding:13px 16px; border-bottom:1px solid var(--border); }
.notif-row{ padding:11px 16px; border-bottom:1px solid var(--border); }
.notif-row:last-child{ border-bottom:none; }
.notif-row.unread{ background:#f5f3ff; font-weight:500; }

.client-hero-stats{ display:flex; gap:10px; margin-top:20px; position:relative; z-index:1; }
.client-hero-stat{
  flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:12px 14px; backdrop-filter:blur(6px);
}

.client-main{ max-width:900px; margin:0 auto; padding:22px 16px 30px; }
.client-page-title{ font-size:23px; font-weight:600; letter-spacing:-.03em; margin:0 0 16px; }
.client-tabs-desktop{
  display:flex; gap:6px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:7px; margin-bottom:22px; flex-wrap:wrap;
}

.coach-scan-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:14px;
  background:#fff; color:var(--violet-600); font-weight:600; font-size:13px; flex-shrink:0;
}
.coach-scan-btn .icon{ width:18px; height:18px; }
@media(max-width:420px){ .coach-scan-btn span{ display:none; } .coach-scan-btn{ padding:11px; } }

/* ===== QR camera scanner ===== */
.qr-scanner{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:#12121a; display:flex; align-items:center; justify-content:center;
}
.qr-scanner video{ width:100%; height:100%; object-fit:cover; display:none; }
.qr-scanner.active video{ display:block; }
.qr-frame{
  position:absolute; inset:18% 16%; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 2000px rgba(10,10,16,.45);
  border:2px solid rgba(255,255,255,.85);
}
.qr-scanner:not(.active) .qr-frame{ box-shadow:none; border-color:rgba(255,255,255,.25); }
.qr-scanner.found .qr-frame{ border-color:#2ecc71; }
.qr-hint{
  position:absolute; bottom:12px; left:12px; right:12px; text-align:center;
  color:#fff; font-size:12px; background:rgba(0,0,0,.55); padding:7px 10px; border-radius:10px;
}

/* ===== Coach app (premium mobile-first) ===== */
.coach-body{ background:var(--bg); padding-bottom:86px; }

.coach-hero{
  background:linear-gradient(140deg, #7a3ff2 0%, #9f6bff 45%, #c0a3ff 100%);
  color:#fff; padding:22px 20px 26px; border-radius:0 0 26px 26px; position:relative; overflow:hidden;
}
.coach-hero::after{
  content:''; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 65%);
}
.coach-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:1; }
.coach-hello{ font-size:12.5px; opacity:.72; }
.coach-name{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.coach-icon-btn{
  width:40px;height:40px;border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10); color:#fff; display:flex; align-items:center; justify-content:center;
}
.coach-icon-btn:hover{ background:rgba(255,255,255,.18); }

.coach-hero-stats{ display:flex; gap:10px; margin-top:20px; position:relative; z-index:1; }
.coach-hero-stat{
  flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:12px 14px; backdrop-filter:blur(6px);
}
.chs-value{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.chs-label{ font-size:10.5px; opacity:.75; margin-top:2px; }

.coach-main{ max-width:760px; margin:0 auto; padding:22px 16px 30px; }
.coach-page-title{ font-size:24px; font-weight:600; letter-spacing:-.03em; margin:0 0 16px; }

.day-strip{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; -webkit-overflow-scrolling:touch; }
.day-strip::-webkit-scrollbar{ display:none; }
.day-pill{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:54px; padding:10px 6px 8px; border-radius:16px; background:var(--card);
  border:1.5px solid var(--border); color:var(--text-mut); transition:.16s;
}
.day-pill .dp-name{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }
.day-pill .dp-num{ font-size:17px; font-weight:600; color:var(--text); letter-spacing:-.02em; }
.day-pill .dp-dot{ width:5px;height:5px;border-radius:50%; background:var(--violet-500); }
.day-pill.is-today .dp-num{ color:var(--violet-600); }
.day-pill.active{ background:var(--navy-900); border-color:var(--navy-900); color:rgba(255,255,255,.65); }
.day-pill.active .dp-num{ color:#fff; }
.day-pill.active .dp-dot{ background:#fff; }

.coach-day-label{ font-size:13px; font-weight:500; margin:6px 2px 14px; text-transform:capitalize; }

.course-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  margin-bottom:14px; transition:.16s;
}
.course-card.is-past{ opacity:.62; }
.course-card[open]{ border-color:#ddd9f7; }
.course-summary{ list-style:none; cursor:pointer; display:flex; gap:14px; padding:14px; align-items:stretch; }
.course-summary::-webkit-details-marker{ display:none; }
.course-visual{
  width:78px; flex-shrink:0; border-radius:14px; background-size:cover; background-position:center;
  position:relative; min-height:88px;
}
.course-time-chip{
  position:absolute; left:6px; bottom:6px; background:rgba(255,255,255,.94); color:#1c1e2b;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:8px;
}
.course-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.course-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.course-name{ font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
.course-chevron{ color:var(--text-mut); display:flex; transition:transform .2s; }
.course-card[open] .course-chevron{ transform:rotate(90deg); }
.course-meta{ font-size:12.2px; color:var(--text-mut); }
.course-progress{ display:flex; align-items:center; gap:9px; }
.cp-track{ flex:1; height:6px; border-radius:20px; background:#eff0f7; overflow:hidden; }
.cp-fill{ height:100%; border-radius:20px; }
.cp-label{ font-size:11px; color:var(--text-mut); font-weight:500; }
.course-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.mini-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:500;
  padding:3px 8px; border-radius:20px; background:#f3f4fa; color:#6d7186;
}
.mini-badge .icon{ width:12px; height:12px; }
.mini-badge.ok{ background:#e8faf0; color:#1a9a56; }
.mini-badge.muted{ background:#f0f1f6; color:#9a9db1; }

.course-body{ padding:4px 14px 14px; border-top:1px solid var(--border); }
.course-action{ padding:0 14px 14px; }
.student-row{
  display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.student-row:last-child{ border-bottom:none; }
.student-name{ font-size:13.6px; font-weight:500; }
.student-sub{ font-size:11.6px; color:var(--text-mut); }

.coach-search{ position:relative; margin-bottom:16px; }
.coach-search .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-mut); width:17px; height:17px; }
.coach-search input{ padding-left:42px; border-radius:14px; background:var(--card); }

.student-card{
  display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:13px 15px; margin-bottom:10px;
}
.student-rate{ text-align:right; flex-shrink:0; }
.sr-value{ font-size:16px; font-weight:600; color:var(--violet-600); }
.sr-label{ font-size:10px; color:var(--text-mut); }

.coach-empty{ text-align:center; padding:48px 20px; color:var(--text-mut); }
.coach-empty .icon{ width:42px; height:42px; opacity:.35; margin-bottom:12px; }
.coach-empty .ce-title{ font-size:15px; font-weight:500; color:var(--text); }
.coach-empty .ce-sub{ font-size:12.8px; margin-top:4px; }

.coach-bottom-nav{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; box-sizing:border-box;
  width:100%; max-width:100vw; overflow:hidden;
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border); padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.coach-bottom-nav .cbn-item{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  color:#a3a7bd; font-size:10.5px; font-weight:500; text-align:center;
}
.coach-bottom-nav .cbn-item span{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.coach-bottom-nav .cbn-item .icon{ width:22px; height:22px; flex-shrink:0; }
.coach-bottom-nav .cbn-item.active{ color:var(--violet-600); }

@media(min-width:900px){
  .coach-hero{ border-radius:0; padding:26px 32px 30px; }
  .coach-hero-top, .coach-hero-stats{ max-width:760px; margin-left:auto; margin-right:auto; }
  .coach-bottom-nav{ max-width:420px; left:50%; transform:translateX(-50%); border-radius:20px 20px 0 0; border:1px solid var(--border); border-bottom:none; }
}

/* ===== Permissions grid ===== */
.perm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media(max-width:560px){ .perm-grid{ grid-template-columns:1fr; } }
.perm-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
  border:1.5px solid var(--border); font-size:12.8px; cursor:pointer; background:#fafaff; transition:.14s;
}
.perm-item:hover{ border-color:#d7d5f5; }
.perm-item input{ width:auto; margin:0; accent-color:var(--violet-500); }
.perm-item .perm-icon{ display:flex; color:var(--text-mut); }
.perm-item .perm-icon .icon{ width:16px; height:16px; }
.perm-item:has(input:checked){ background:var(--violet-100); border-color:var(--violet-500); }
.perm-item:has(input:checked) .perm-icon{ color:var(--violet-600); }

/* ===== Admin shared page components (premium) ===== */
.page-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-toolbar h2{ font-size:20px; font-weight:600; margin:0; letter-spacing:-.02em; }
.page-toolbar .page-sub{ color:var(--text-mut); font-size:12.8px; margin:5px 0 0; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px 14px; margin-bottom:20px;
}
.filter-search{ position:relative; flex:1; min-width:200px; }
.filter-search .icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-mut); width:16px; height:16px; pointer-events:none;
}
.filter-search input{ padding-left:38px; background:#fafaff; border-radius:11px; }
.filter-bar select{ max-width:210px; background:#fafaff; border-radius:11px; }
.filter-count{ margin-left:auto; white-space:nowrap; }

.table-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.table-card .table-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 20px; border-bottom:1px solid var(--border);
}
.table-card .table-card-head h3{ margin:0; font-size:15px; font-weight:600; }
.table-card .table-wrap{ padding:4px 8px 8px; }
.sf-table th{ font-weight:500; letter-spacing:.06em; font-size:10.5px; color:#9a9db1; }
.sf-table td{ font-size:13.4px; }
.sf-table tr:hover td{ background:#fbfbff; }

.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
.tile{
  background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:.16s;
}
.tile:hover{ border-color:#dcdcec; }
.tile-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tile-title{ font-weight:600; font-size:14.6px; letter-spacing:-.01em; }
.tile-meta{ color:var(--text-mut); font-size:12.3px; }
.tile-foot{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }

.stat-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
.stat-row:last-child{ border-bottom:none; }
.stat-row .s-label{ color:var(--text-mut); }
.stat-row .s-value{ font-weight:500; }

.pagination{ display:flex; gap:6px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.pagination a{
  min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; padding:0 10px;
  border-radius:10px; border:1px solid var(--border); font-size:13px; color:var(--text); background:var(--card);
}
.pagination a:hover{ border-color:var(--violet-500); color:var(--violet-600); }
.pagination a.active{ background:var(--violet-500); border-color:var(--violet-500); color:#fff; font-weight:500; }

/* ===== Admin dashboard (premium) ===== */
.dash-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.dash-title{ font-size:21px; font-weight:600; margin:0; letter-spacing:-.02em; }
.dash-sub{ color:var(--text-mut); font-size:13px; margin:5px 0 0; }

.dash-alert{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; margin-bottom:20px;
  background:linear-gradient(90deg, rgba(140,82,255,.09), rgba(140,82,255,.03));
  border:1px solid rgba(140,82,255,.16); color:var(--text); font-size:13.3px;
}
.dash-alert-icon{
  width:32px;height:32px;border-radius:10px; background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dash-alert > span:nth-child(2){ flex:1; }
.dash-alert b{ font-weight:600; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
@media(max-width:1150px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .kpi-grid{ grid-template-columns:1fr; } }

.kpi-card{
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px;
  display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:140px;
}
.kpi-card-featured{
  background:linear-gradient(135deg, var(--violet-500) 0%, #9d68ff 55%, #b18cff 100%);
  border-color:transparent; color:#fff;
}
.kpi-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.kpi-card-label{ font-size:12.5px; color:var(--text-mut); font-weight:400; }
.kpi-card-featured .kpi-card-label{ color:rgba(255,255,255,.78); }
.kpi-card-value{ font-size:26px; font-weight:600; letter-spacing:-.03em; margin-top:6px; }
.kpi-bubble{
  width:42px;height:42px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.kpi-bubble-light{ background:rgba(255,255,255,.2); color:#fff; }
.bg-violet-soft{ background:linear-gradient(135deg,#b18cff,#cbb4ff); }
.kpi-card-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.8px; }
.kpi-card-prev{ color:var(--text-mut); }
.kpi-card-featured .kpi-card-prev{ color:rgba(255,255,255,.7); }
.kpi-delta{ padding:3px 9px; border-radius:20px; font-weight:500; font-size:11.5px; }
.kpi-delta.up{ background:#e8faf0; color:#1a9a56; }
.kpi-delta.down{ background:#fdecef; color:#e0435e; }
.kpi-card-featured .kpi-delta.up{ background:rgba(255,255,255,.22); color:#fff; }
.kpi-card-featured .kpi-delta.down{ background:rgba(255,255,255,.22); color:#fff; }

.dash-split{ display:grid; grid-template-columns:1.7fr 1fr; gap:20px; align-items:start; }
@media(max-width:1000px){ .dash-split{ grid-template-columns:1fr; } }

.chart-bars-lg{ height:230px; }
.chart-bars-lg .chart-bar-track{ max-width:52px; position:relative; }
.chart-bar-fill{ position:relative; }
.chart-bar-fill.is-current{ background:linear-gradient(180deg,#b18cff,var(--violet-500)); }
.chart-bars-lg .chart-bar-fill:not(.is-current){ background:#e7e8f2; }
.chart-bars-lg .chart-bar-col:hover .chart-bar-fill:not(.is-current){ background:#d6d8ea; }
.chart-tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#1c1e2b; color:#fff; font-size:11px; padding:5px 9px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.15s;
}
.chart-bar-col:hover .chart-tip{ opacity:1; }

.gauge-wrap{ display:flex; justify-content:center; padding:6px 0 2px; }
.gauge-svg{ width:100%; max-width:230px; }
.gauge-stats{ display:flex; justify-content:space-around; gap:12px; border-top:1px solid var(--border); padding-top:14px; margin-top:6px; }
.gauge-stat-label{ font-size:11px; color:var(--text-mut); }
.gauge-stat-value{ font-size:15px; font-weight:600; margin-top:2px; }

.dash-course-row{
  display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.dash-course-row:last-child{ border-bottom:none; }
.dash-course-time{ text-align:center; min-width:52px; }
.dash-course-time .t-big{ font-size:14px; font-weight:600; }
.dash-course-time .t-small{ font-size:11px; color:var(--text-mut); }
.dash-course-bar{ width:4px; height:34px; border-radius:4px; flex-shrink:0; }
.text-danger{ color:var(--red-500); }

.dash-activity-row{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.dash-activity-row:last-child{ border-bottom:none; }
.dash-activity-dot{
  width:8px;height:8px;border-radius:50%; background:var(--violet-500); flex-shrink:0; margin-top:6px;
  box-shadow:0 0 0 3px rgba(140,82,255,.13);
}

/* ===== Charts ===== */
.chart-bars{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:200px; }
.chart-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.chart-bar-val{ font-size:12px; font-weight:500; color:var(--text-mut); margin-bottom:6px; }
.chart-bar-track{ flex:1; width:100%; max-width:46px; display:flex; align-items:flex-end; background:#f3f4fa; border-radius:10px; overflow:hidden; }
.chart-bar-fill{ width:100%; border-radius:10px; background:linear-gradient(180deg,#b18cff,var(--violet-500)); transition:height .4s ease; }
.chart-bar-label{ font-size:11px; color:var(--text-mut); margin-top:8px; text-transform:capitalize; }

/* ===== Loyalty card (client pass) ===== */
.loyalty-card{
  position:relative; border-radius:22px; padding:22px 24px; margin-bottom:22px; overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.38), rgba(255,255,255,0) 45%),
    linear-gradient(140deg, #f7c948 0%, #f9d976 38%, #f3e2b3 68%, #e8d8b0 100%);
  color:#4a3b12; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 30px rgba(200,160,40,.22);
}
.loyalty-card::before{
  content:''; position:absolute; top:-70px; right:-50px; width:210px; height:210px; border-radius:50%;
  border:22px solid rgba(255,255,255,.30); pointer-events:none;
}
.loyalty-card::after{
  content:''; position:absolute; bottom:-90px; left:-60px; width:240px; height:240px; border-radius:50%;
  border:16px solid rgba(255,255,255,.22); pointer-events:none;
}
.loyalty-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; position:relative; z-index:1; }
.loyalty-studio{ font-size:15.5px; font-weight:600; letter-spacing:.01em; }
.loyalty-tier{ font-size:10px; letter-spacing:.16em; margin-top:3px; color:#8a6d1a; font-weight:600; }
.loyalty-qr{
  background:#fff; border-radius:12px; padding:6px; line-height:0; flex-shrink:0;
  border:none; cursor:pointer; display:block; position:relative; z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.loyalty-qr canvas{ display:block; border-radius:4px; }
.loyalty-qr:active{ transform:scale(.97); }
.loyalty-number{
  font-family:'SFMono-Regular', ui-monospace, Menlo, monospace; font-size:17px; letter-spacing:.16em;
  color:#3d3009; margin-bottom:18px; position:relative; z-index:1;
}
.loyalty-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.loyalty-label{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(74,59,18,.62); }
.loyalty-name{ font-size:12.5px; font-weight:500; letter-spacing:.04em; margin-top:2px; }
@media(max-width:520px){
  .loyalty-card{ padding:18px; }
  .loyalty-number{ font-size:14.5px; letter-spacing:.12em; }
}

/* ===== Client bottom nav (mobile app style) ===== */
.client-bottom-nav{ display:none; }
@media(max-width:860px){
  .client-tabs-desktop{ display:none !important; }
  body{ padding-bottom:78px; }
  .client-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; box-sizing:border-box;
    width:100%; max-width:100vw; overflow:hidden;
    background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border); padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .cbn-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
    color:#a3a7bd; font-size:10.5px; font-weight:500; border-radius:12px; text-align:center;
  }
  .cbn-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cbn-item .icon{ width:22px; height:22px; flex-shrink:0; }
  .cbn-item.active{ color:var(--violet-600); }
  .cbn-item.active .icon{ color:var(--violet-600); }
}

/* ===== Coach day navigation ===== */
.coach-day-nav{
  display:flex; gap:8px; overflow-x:auto; padding:4px 2px 14px; position:sticky; top:0; background:var(--bg); z-index:20;
  -webkit-overflow-scrolling:touch;
}
.coach-day-chip{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 14px; border-radius:12px;
  background:#fff; border:1.5px solid var(--border); color:var(--text); min-width:56px; text-decoration:none;
}
.coach-day-chip .d-name{ font-size:10px; text-transform:uppercase; font-weight:500; color:var(--text-mut); }
.coach-day-chip .d-num{ font-size:15px; font-weight:600; }
.coach-day-chip .d-count{ font-size:9.5px; font-weight:500; color:var(--violet-600); background:var(--violet-100); border-radius:10px; padding:0 6px; }
.coach-day-heading{ font-weight:600; font-size:14px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.03em; margin:22px 2px 10px; }
.session-block summary::-webkit-details-marker{ display:none; }
.session-block summary{ position:relative; }
.session-block[open] summary{ border-bottom:1px solid var(--border); }

/* ===== Client tabs ===== */
.client-tab{
  display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:12px; font-weight:500; font-size:13.3px;
  color:#6b7090; background:transparent;
}
.client-tab .icon{width:17px;height:17px;}
.client-tab:hover{background:#f2f1fc;}
.client-tab.active{background:linear-gradient(135deg,var(--violet-500),#b18cff); color:#fff;}

@media(max-width:960px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.3); }
  .main{margin-left:0;}
  .burger{display:block;}
  .content{padding:16px 14px 90px;}
  .topbar{padding:0 16px; height:64px;}
  .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;}
}

@media(max-width:640px){
  .chip-row{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .chip{flex-shrink:0;}
  .class-card{flex-direction:column; align-items:stretch; text-align:left;}
  .class-card .c-time-block{width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 14px;}
  .class-card .c-time-block .t-big,.class-card .c-time-block .t-small{display:inline;}
  .class-card form, .class-card > .btn{width:100%;}
  .class-card form button{width:100%; justify-content:center;}
  .planning-toolbar{flex-direction:column; align-items:stretch;}
  .planning-toolbar .btn-primary{width:100%; justify-content:center;}
  .week-nav{justify-content:space-between;}
  .modal{max-width:100%; border-radius:16px 16px 0 0; position:fixed; bottom:0; left:0; max-height:85vh;}
  .modal-overlay{align-items:flex-end; padding:0;}
  .sf-table{font-size:12.5px;}
  .section-title{flex-direction:column; align-items:stretch; gap:10px;}
  .section-title > div:last-child, .section-title > .flex{width:100%;}
  .section-title .btn{width:100%; justify-content:center;}
}


/* ===== Notifications : liste, sélection, animation ===== */
.notif-row{ display:block; padding:12px 16px; border-bottom:1px solid var(--border); color:var(--text); }
.notif-row:last-child{ border-bottom:none; }
.notif-row.unread{ background:#f5f3ff; font-weight:500; }
.notif-row:hover{ background:#faf9ff; }
@keyframes sf-bell { 0%,100%{transform:rotate(0)} 20%{transform:rotate(14deg)} 40%{transform:rotate(-12deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-5deg)} }
.bell-ring{ animation:sf-bell .6s ease 2; transform-origin:top center; }

.notif-toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:12px 16px; margin-bottom:14px;
}
.notif-selectall{ display:flex; align-items:center; gap:8px; font-size:12.8px; font-weight:500; cursor:pointer; }
.notif-selectall input{ width:auto; margin:0; accent-color:var(--violet-500); }
.notif-item{
  display:flex; align-items:center; gap:12px; padding:14px 6px;
  border-bottom:1px solid var(--border);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item.is-unread{ background:#f5f3ff; border-radius:10px; padding-left:10px; padding-right:10px; }
.notif-item .notif-check{ width:auto; margin:0; accent-color:var(--violet-500); flex-shrink:0; }
.notif-icon{
  width:36px; height:36px; border-radius:10px; background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ===== Sélection de créneau (coach) ===== */
.slot-list{ max-height:340px; overflow-y:auto; padding-right:4px; }
.slot-day{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mut);
  font-weight:600; margin:14px 0 8px;
}
.slot-day:first-child{ margin-top:0; }
.slot{
  width:100%; display:flex; align-items:center; gap:13px; padding:11px 13px; margin-bottom:8px;
  border:1.5px solid var(--border); border-radius:13px; background:#fafaff; text-align:left;
  font-family:inherit; transition:.14s; position:relative;
}
.slot:hover{ border-color:#d5d2f5; }
.slot.selected{ border-color:var(--violet-500); background:var(--violet-100); }
.slot-time{ display:flex; flex-direction:column; align-items:center; min-width:44px; flex-shrink:0; }
.slot-time b{ font-size:14.5px; font-weight:600; color:var(--text); }
.slot-time small{ font-size:10.5px; color:var(--text-mut); }
.slot-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.slot-name{ font-size:13.6px; font-weight:500; }
.slot-meta{ font-size:11.5px; color:var(--text-mut); margin-top:2px; }
.slot-check{ opacity:0; color:var(--violet-600); flex-shrink:0; transition:.14s; }
.slot-check .icon{ width:17px; height:17px; }
.slot.selected .slot-check{ opacity:1; }

/* ===== Gestion des remplacements (admin) ===== */
.nav-count{
  margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:20px;
  background:var(--red-500); color:#fff; font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.repl-card{
  display:flex; gap:16px; background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:16px; margin-bottom:14px;
}
.repl-card.is-urgent{ border-color:rgba(255,92,114,.35); }
.repl-date{
  width:76px; flex-shrink:0; border-radius:14px; color:#fff; text-align:center;
  padding:12px 6px; display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.rd-day{ font-size:23px; font-weight:600; line-height:1; }
.rd-month{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.9; }
.rd-time{ font-size:11.5px; font-weight:500; margin-top:4px; background:rgba(255,255,255,.22); border-radius:6px; padding:2px 0; }
.repl-body{ flex:1; min-width:0; }
.repl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.repl-title{ font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.repl-meta{ font-size:12.3px; color:var(--text-mut); margin-top:3px; text-transform:capitalize; }
.repl-people{ display:flex; gap:26px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.rp-label{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mut); }
.rp-name{ font-size:13.5px; font-weight:500; margin-top:2px; }
.rp-phone{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--violet-600); font-weight:500; margin-top:3px; }
.rp-phone .icon{ width:13px; height:13px; }
.rp-phone.muted{ color:var(--text-mut); font-weight:400; }
.repl-reason{ font-size:12.5px; color:var(--text-mut); font-style:italic; padding:10px 0 0; }
.repl-actions{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
@media(max-width:700px){
  .repl-card{ flex-direction:column; gap:12px; }
  .repl-date{ width:100%; flex-direction:row; justify-content:flex-start; gap:12px; padding:10px 14px; align-items:center; }
  .rd-time{ margin-top:0; padding:2px 10px; }
  .repl-actions form{ width:100%; }
  .repl-actions .btn{ flex:1; justify-content:center; }
}

/* ===== Bandeau d'installation de l'application ===== */
.pwa-bar{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:16px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 4px 16px rgba(30,34,70,.06);
}
.pwa-icon{ width:42px; height:42px; border-radius:11px; flex-shrink:0; }
.pwa-title{ font-size:13.8px; font-weight:600; }
.pwa-sub{ font-size:11.8px; color:var(--text-mut); margin-top:2px; }
.pwa-close{
  background:none; border:none; color:var(--text-mut); padding:5px; border-radius:8px; flex-shrink:0;
}
.pwa-close:hover{ background:rgba(0,0,0,.05); }
.pwa-ios{
  background:var(--violet-100); border:1px solid rgba(140,82,255,.2); border-radius:14px;
  padding:14px 16px; margin-bottom:16px; font-size:12.8px; line-height:1.6; color:var(--text);
}
@media(min-width:960px){ .pwa-bar, .pwa-ios{ display:none !important; } }

/* ===== Page Extensions ===== */
.ext-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }
.ext-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; display:flex; flex-direction:column; }
.ext-card.is-active{ border-color:rgba(140,82,255,.4); }
.ext-head{ display:flex; align-items:flex-start; gap:13px; margin-bottom:12px; }
.ext-icon{
  width:44px; height:44px; border-radius:13px; flex-shrink:0; color:#fff;
  background:linear-gradient(135deg,var(--violet-500),#b18cff);
  display:flex; align-items:center; justify-content:center;
}
.ext-name{ font-size:15.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ext-badge{
  background:#ffd429; color:#111114; font-size:9.5px; font-weight:700;
  letter-spacing:.08em; padding:3px 8px; border-radius:5px;
}
.ext-tagline{ font-size:12.3px; color:var(--text-mut); margin-top:3px; }
.ext-desc{ font-size:12.8px; color:var(--text-mut); line-height:1.6; margin:0 0 14px; flex:1; }
.ext-features{ list-style:none; padding:0; margin:0 0 16px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ext-features li{ font-size:11.8px; color:var(--text); padding-left:17px; position:relative; }
.ext-features li::before{ content:'✓'; position:absolute; left:0; color:#1a9a56; font-weight:600; }
.ext-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px; }
@media(max-width:560px){ .ext-features{ grid-template-columns:1fr; } }

/* ===== Correctifs responsive — espace admin ===== */
@media(max-width:860px){
  /* En-têtes de page : titre et actions empilés proprement */
  .page-toolbar, .dash-toolbar{ flex-direction:column; align-items:stretch; gap:14px; }
  .page-actions, .dash-toolbar .flex{ width:100%; }
  .page-actions .btn, .dash-toolbar .btn{ flex:1 1 auto; justify-content:center; min-width:0; }
  .page-toolbar h2, .dash-title{ font-size:19px; }

  /* Barre de filtres : plein écran, plus de débordement */
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .filter-bar select, .filter-bar .btn{ width:100%; max-width:none; }
  .filter-search{ min-width:0; width:100%; }
  .filter-count{ margin-left:0; text-align:center; }

  /* Tableaux : défilement horizontal maîtrisé */
  .table-card{ border-radius:14px; }
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sf-table{ min-width:640px; }

  /* Les groupes de boutons d'action ne débordent plus des cellules */
  .sf-table td .flex{ flex-wrap:nowrap; gap:6px; }
  .btn-icon{ flex-shrink:0; }

  /* Cartes KPI : une colonne, valeurs lisibles */
  .kpi-grid{ grid-template-columns:1fr !important; gap:12px; }
  .kpi-card{ min-height:0; padding:16px; }
  .kpi-card-value{ font-size:23px; }

  /* Graphiques et jauges */
  .dash-split{ grid-template-columns:1fr; }
  .chart-bars, .chart-bars-lg{ height:180px; }
  .gauge-svg{ max-width:190px; }

  /* Modales : plein écran en bas, comme une feuille */
  .modal{ max-width:100% !important; width:100%; margin:0; border-radius:20px 20px 0 0; max-height:92vh; }
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal-body{ max-height:calc(92vh - 150px); overflow-y:auto; }
  .modal-footer{ position:sticky; bottom:0; background:var(--card); }
  .modal-footer .btn{ flex:1; justify-content:center; }

  /* Formulaires : une colonne */
  .form-grid{ grid-template-columns:1fr !important; }

  /* Grilles de cartes */
  .tile-grid, .ext-grid{ grid-template-columns:1fr; }
  .settings-tabs{ margin-bottom:16px; }

  /* Onglets et pastilles défilables sans casser la mise en page */
  .chip-row{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .chip{ flex-shrink:0; }

  /* Lignes d'activité et de cours */
  .dash-course-row{ gap:10px; }
  .dash-course-row > div[style*="min-width:110px"]{ width:100%; }

  /* Barre du haut compacte */
  .topbar{ padding:0 16px; }
  .topbar-studio{ font-size:14px; }
  .content{ padding:18px 14px 40px; }
}

@media(max-width:520px){
  .page-actions{ flex-direction:column; }
  .page-actions .btn{ width:100%; }
  .sf-table{ min-width:520px; font-size:12.5px; }
  .card{ padding:16px; }
}


/* ===== Zone de dépôt (import d'extension) ===== */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:38px 20px; border:2px dashed var(--border); border-radius:16px; background:#fafaff;
  cursor:pointer; transition:.16s; text-align:center;
}
.dropzone:hover{ border-color:var(--violet-500); background:var(--violet-100); }
.dropzone.is-over{ border-color:var(--violet-500); background:var(--violet-100); transform:scale(1.01); }
.dropzone.is-ready{ border-style:solid; border-color:var(--violet-500); background:var(--violet-100); }
.dropzone.is-error{ border-color:var(--red-500); background:#fff5f6; }
.dz-icon{
  width:46px; height:46px; border-radius:14px; background:#fff; color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.dz-icon .icon{ width:21px; height:21px; }
.dz-title{ font-size:14px; font-weight:600; color:var(--text); }
.dz-sub{ font-size:12.2px; color:var(--text-mut); }

/* ===== Apparence : palettes et aperçu ===== */
.preset-row{ display:flex; gap:10px; flex-wrap:wrap; }
.preset{
  display:flex; align-items:center; gap:9px; padding:10px 15px; border-radius:12px;
  border:1.5px solid var(--border); background:#fff; font-size:12.8px; font-weight:500;
  color:var(--text); font-family:inherit; transition:.14s;
}
.preset:hover{ border-color:var(--violet-500); }
.preset.active{ border-color:var(--violet-500); background:var(--violet-100); color:var(--violet-600); }
.preset-dot{ width:17px; height:17px; border-radius:50%; flex-shrink:0; }

.theme-preview{ display:flex; gap:10px; height:132px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg); }
.tp-side{ width:52px; flex-shrink:0; padding:12px 8px; display:flex; flex-direction:column; gap:7px; }
.tp-side span{ height:9px; border-radius:4px; background:rgba(255,255,255,.16); display:block; }
.tp-side span.on{ background:var(--violet-500); }
.tp-main{ flex:1; padding:12px 12px 12px 0; display:flex; flex-direction:column; gap:8px; }
.tp-kpi{ height:44px; border-radius:12px; }
.tp-card{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.tp-btn{ height:22px; width:80px; border-radius:10px; }

.login-preview{
  height:96px; border-radius:11px; background-size:cover; background-position:center;
  border:1px solid var(--border);
}

/* ===== Signature ===== */
.sf-credit{
  text-align:center; font-size:11px; color:var(--text-mut); padding:18px 16px 26px; line-height:1.6;
}
.sf-credit a{ color:var(--violet-600); font-weight:500; }


/* ===== Sélecteur de séance (calendrier) ===== */
.picker{ position:relative; }
.picker-trigger{
  width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:11px; background:#fbfbfe;
  font-family:inherit; font-size:13.2px; color:var(--text-mut); text-align:left; transition:.14s;
}
.picker-trigger:hover{ border-color:var(--violet-500); }
.picker.is-set .picker-trigger{ border-color:var(--violet-500); background:var(--violet-100); color:var(--text); }
.picker-trigger .pk-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-trigger .icon{ width:16px; height:16px; flex-shrink:0; }

.picker-panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow:var(--shadow-lg);
}
.pk-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pk-month{ font-size:13.5px; font-weight:600; text-transform:capitalize; }
.pk-nav{
  width:30px; height:30px; border:1px solid var(--border); border-radius:9px; background:#fff;
  font-size:17px; line-height:1; color:var(--text-mut);
}
.pk-nav:hover{ border-color:var(--violet-500); color:var(--violet-600); }
.pk-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.pk-weekdays span{ text-align:center; font-size:10px; color:var(--text-mut); font-weight:600; }
.pk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pk-day{
  position:relative; aspect-ratio:1; border:none; background:transparent; border-radius:9px;
  font-size:12.5px; color:var(--text); font-family:inherit;
}
.pk-day.is-void{ visibility:hidden; }
.pk-day:hover:not(.is-void){ background:#f2f2f8; }
.pk-day.has-items{ font-weight:600; }
.pk-day.has-items i{
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--violet-500);
}
.pk-day.is-today{ color:var(--violet-600); }
.pk-day.selected{ background:var(--violet-500); color:#fff; }
.pk-day.selected i{ background:#fff; }

.pk-slots{ margin-top:12px; max-height:190px; overflow-y:auto; border-top:1px solid var(--border); padding-top:10px; }
.pk-empty{ text-align:center; font-size:12.3px; color:var(--text-mut); padding:16px 8px; }
.pk-slot{
  width:100%; display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:5px;
  border:1px solid var(--border); border-radius:10px; background:#fafaff; text-align:left; font-family:inherit;
}
.pk-slot:hover{ border-color:var(--violet-500); background:var(--violet-100); }
.pk-slot b{ font-size:13px; min-width:40px; }
.pk-slot span{ display:flex; flex-direction:column; font-size:11.5px; color:var(--text-mut); }
.pk-slot em{ font-style:normal; font-size:13px; font-weight:500; color:var(--text); }
.pk-clear{
  width:100%; margin-top:10px; padding:9px; border:1px solid var(--border); border-radius:9px;
  background:#fff; font-size:12.3px; color:var(--text-mut); font-family:inherit;
}
.pk-clear:hover{ border-color:var(--red-500); color:var(--red-500); }

/* ===== Recherche d'adhérent ===== */
.client-picker{ position:relative; }
.client-picker .cp-input{ width:100%; }
.cp-list{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:70;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); max-height:230px; overflow-y:auto;
}
.cp-item{
  width:100%; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:10px 13px; border:none; background:none; text-align:left; font-family:inherit;
  border-bottom:1px solid var(--border);
}
.cp-item:last-child{ border-bottom:none; }
.cp-item:hover{ background:var(--violet-100); }
.cp-item b{ font-size:13.2px; font-weight:500; }
.cp-item span{ font-size:11.5px; color:var(--text-mut); }
.cp-empty{ padding:16px; text-align:center; font-size:12.3px; color:var(--text-mut); }


/* ===== Classement des parrains ===== */
.rank-row{
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--border);
}
.rank-row:last-of-type{ border-bottom:none; }
.rank-pos{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; background:#f2f2f8; color:var(--text-mut);
}
.rank-pos.rank-1{ background:#ffd429; color:#4a3b12; }
.rank-pos.rank-2{ background:#dfe1ea; color:#4a4d61; }
.rank-pos.rank-3{ background:#f0c9a3; color:#5c3f1e; }
.rank-name{ font-size:13.6px; font-weight:500; color:var(--text); }
.rank-name:hover{ color:var(--violet-600); }
.rank-meta{ font-size:11.6px; color:var(--text-mut); margin-top:2px; }
.rank-score{
  font-size:17px; font-weight:600; color:var(--violet-600); flex-shrink:0;
}


/* ===== Automatisations ===== */
.auto-group-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.11em; font-weight:600;
  color:var(--text-mut); margin:24px 0 10px;
}
.auto-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start; }
.auto-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.auto-card.is-on{ border-color:rgba(var(--sf-primary-rgb,140,82,255),.35); }
.auto-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer; list-style:none; }
.auto-head::-webkit-details-marker{ display:none; }
.auto-icon{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:#f2f2f8; color:var(--text-mut); display:flex; align-items:center; justify-content:center;
}
.auto-card.is-on .auto-icon{ background:var(--violet-100); color:var(--violet-600); }
.auto-name{ display:block; font-size:13.8px; font-weight:500; }
.auto-desc{ display:block; font-size:11.6px; color:var(--text-mut); margin-top:2px; }
.auto-state{
  font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:20px;
  background:#f2f2f8; color:var(--text-mut); flex-shrink:0;
}
.auto-card.is-on .auto-state{ background:#e8faf0; color:#1a9a56; }
.auto-chevron{ color:var(--text-mut); display:flex; transition:transform .2s; }
.auto-card[open] .auto-chevron{ transform:rotate(90deg); }
.auto-body{ padding:4px 16px 16px; border-top:1px solid var(--border); }
.var-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.var-chip{
  padding:5px 10px; border:1px solid var(--border); border-radius:20px; background:#fafaff;
  font-size:11.3px; color:var(--violet-600); font-family:inherit; font-weight:500;
}
.var-chip:hover{ border-color:var(--violet-500); background:var(--violet-100); }

/* ===== Centre d'aide ===== */
.help-hero{
  background:linear-gradient(140deg,var(--violet-600),var(--violet-500));
  color:#fff; border-radius:20px; padding:34px 28px; margin-bottom:24px; text-align:center;
}
.help-hero h2{ font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-.02em; }
.help-hero p{ font-size:13.5px; opacity:.85; margin:0 0 20px; }
.help-search{ position:relative; max-width:460px; margin:0 auto; }
.help-search .icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-mut); width:17px; height:17px; }
.help-search input{ width:100%; padding:13px 16px 13px 44px; border:none; border-radius:13px; font-size:14px; }

.help-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:28px; }
.help-cat{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:6px; transition:.14s;
}
.help-cat:hover{ border-color:var(--violet-500); }
.hc-icon{
  width:40px; height:40px; border-radius:12px; background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.hc-label{ font-size:14.5px; font-weight:600; }
.hc-count{ font-size:11.8px; color:var(--text-mut); }

.help-section{ margin-bottom:26px; }
.help-section-title{
  display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; margin-bottom:12px;
}
.help-section-title .icon{ width:18px; height:18px; color:var(--violet-600); }
.help-item{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  margin-bottom:9px; overflow:hidden;
}
.help-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; cursor:pointer; list-style:none; font-size:14px; font-weight:500;
}
.help-item summary::-webkit-details-marker{ display:none; }
.help-item[open]{ border-color:rgba(var(--sf-primary-rgb,140,82,255),.35); }
.hi-chevron{ color:var(--text-mut); display:flex; transition:transform .2s; flex-shrink:0; }
.help-item[open] .hi-chevron{ transform:rotate(90deg); }
.help-answer{ padding:0 18px 18px; border-top:1px solid var(--border); }
.help-answer p{ font-size:13.4px; line-height:1.7; color:var(--text-mut); margin:14px 0 0; }
.help-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }



/* ===== Centre d'aide (panneau) ===== */
[hidden]{ display:none !important; }

.help-fab{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; align-items:center; gap:8px; padding:12px 18px; border:none; border-radius:30px;
  background:var(--violet-500); color:#fff; font-family:inherit; font-size:13.2px; font-weight:600;
  box-shadow:0 6px 20px rgba(var(--sf-primary-rgb,140,82,255),.35); transition:.16s;
}
.help-fab:hover{ transform:translateY(-2px); }
.help-fab .icon{ width:17px; height:17px; }
.help-fab.is-open{ opacity:0; pointer-events:none; }
@media(max-width:860px){ .help-fab{ display:none; } }

.help-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(400px, 100vw);
  background:var(--card); border-left:1px solid var(--border);
  box-shadow:-16px 0 44px rgba(20,20,40,.14);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.help-panel.is-open{ transform:translateX(0); visibility:visible; }

.hp-head{
  display:flex; align-items:center; gap:12px; padding:18px 18px 16px;
  background:linear-gradient(140deg,var(--violet-600),var(--violet-500)); color:#fff;
}
.hp-title{ font-size:15.5px; font-weight:600; }
.hp-sub{ font-size:11.8px; opacity:.85; margin-top:2px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-back, .hp-close{
  width:32px; height:32px; border:none; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center;
}
.hp-back:hover, .hp-close:hover{ background:rgba(255,255,255,.3); }
.hp-back .icon, .hp-close .icon{ width:16px; height:16px; }

.hp-search{ position:relative; padding:14px 16px; border-bottom:1px solid var(--border); }
.hp-search .icon{ position:absolute; left:29px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-mut); }
.hp-search input{ width:100%; padding:11px 14px 11px 40px; border:1.5px solid var(--border); border-radius:11px; font-size:13.2px; background:#fafaff; }
.hp-search input:focus{ border-color:var(--violet-500); outline:none; }

.hp-list, .hp-answer{ flex:1; overflow-y:auto; padding:12px 16px 20px; }

.hp-group{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  color:var(--text-mut); margin:14px 0 7px; padding-left:2px;
}
.hp-group:first-child{ margin-top:2px; }
.hp-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; margin-bottom:6px; border:1px solid var(--border); border-radius:11px;
  background:#fff; text-align:left; font-family:inherit; font-size:13px; color:var(--text);
  line-height:1.45; transition:.14s;
}
.hp-q:hover{ border-color:var(--violet-500); background:var(--violet-100); }
.hp-q i{ font-style:normal; color:var(--text-mut); flex-shrink:0; font-size:15px; }
.hp-none{ text-align:center; font-size:12.8px; color:var(--text-mut); padding:36px 16px; line-height:1.7; }

.hp-intro{ font-size:13.6px; line-height:1.7; color:var(--text); margin:2px 0 16px; }
.hp-steps{ list-style:none; padding:0; margin:0 0 18px; counter-reset:hp; }
.hp-steps li{
  position:relative; counter-increment:hp; padding:0 0 14px 38px;
  font-size:13.1px; line-height:1.65; color:var(--text-mut);
}
.hp-steps li::before{
  content:counter(hp); position:absolute; left:0; top:-1px;
  width:25px; height:25px; border-radius:8px; background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
}
.hp-steps li::after{
  content:''; position:absolute; left:12px; top:27px; bottom:2px; width:1.5px; background:var(--border);
}
.hp-steps li:last-child{ padding-bottom:0; }
.hp-steps li:last-child::after{ display:none; }

.hp-links{ display:flex; flex-direction:column; gap:7px; }
.hp-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border:1px solid var(--border); border-radius:11px;
  font-size:13px; font-weight:500; color:var(--violet-600); background:#fafaff;
}
.hp-link:hover{ border-color:var(--violet-500); background:var(--violet-100); }
.hp-link i{ font-style:normal; }

.hp-foot{ padding:12px 16px; border-top:1px solid var(--border); }
.hp-all{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--text-mut); font-weight:500; padding:8px;
}
.hp-all:hover{ color:var(--violet-600); }
.hp-all .icon{ width:15px; height:15px; }

@media(max-width:860px){
  .help-panel{ width:100vw; border-left:none; }
}

/* Bouton d'aide dans la barre du haut */
.topbar-help{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--border);
  background:var(--card); color:var(--text-mut);
  display:none; align-items:center; justify-content:center; flex-shrink:0;
}
.topbar-help:hover{ border-color:var(--violet-500); color:var(--violet-600); }
@media(max-width:860px){ .topbar-help{ display:flex; } }


/* ===== Automatisations : canaux et interrupteurs ===== */
.auto-legend{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:12.2px; color:var(--text); margin-bottom:18px; padding:12px 16px;
  background:var(--card); border:1px solid var(--border); border-radius:13px;
}
.auto-legend span{ display:flex; align-items:center; gap:7px; }
.lg-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.lg-push{ background:var(--violet-500); }
.lg-mail{ background:#4f9cf9; }

.auto-badges{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

.auto-switch{
  display:flex; align-items:center; gap:11px; padding:12px 0 16px;
  font-size:13.4px; font-weight:500; cursor:pointer; user-select:none;
}
.auto-switch input{ position:absolute; opacity:0; width:0; height:0; }
.sw-track{
  width:42px; height:24px; border-radius:20px; background:#dcdce8; flex-shrink:0;
  position:relative; transition:.2s;
}
.sw-knob{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.auto-switch input:checked + .sw-track{ background:var(--violet-500); }
.auto-switch input:checked + .sw-track .sw-knob{ transform:translateX(18px); }

.auto-channels{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.chan{
  display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer;
  border:1.5px solid var(--border); border-radius:12px; background:#fafaff; transition:.14s;
}
.chan.is-on{ border-color:var(--violet-500); background:var(--violet-100); }
.chan input{ position:absolute; opacity:0; width:0; height:0; }
.chan-icon{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:#fff; color:var(--text-mut); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
}
.chan.is-on .chan-icon{ background:var(--violet-500); color:#fff; border-color:transparent; }
.chan span:last-child{ display:flex; flex-direction:column; min-width:0; }
.chan b{ font-size:12.8px; font-weight:600; }
.chan small{ font-size:10.8px; color:var(--text-mut); }

.auto-section{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  color:var(--violet-600); margin:18px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--border);
}
@media(max-width:520px){ .auto-channels{ grid-template-columns:1fr; } }