/* ====== Tema (CSS Variables) ====== */
/* Dark theme defaults */
:root{
 --bg:#0b1220;
 --card:#0f172a;
 --muted:#94a3b8;
 --fg:#e2e8f0;
 --primary:#0ea5e9;
 --primary-600:#0284c7;
 --danger:#ef4444;
 --ring:rgba(14,165,233,.35);
 --border: rgba(148,163,184,.2);
 --input-bg:#0b1220;
 
}
 /* Light overrides */
html[data-theme="light"]{
 --bg:#f5f7fb;
 --card:#ffffff;
 --muted:#64748b;
 --fg:#0f172a;
 --primary:#0284c7;
 --primary-600:#0369a1;
 --danger:#b91c1c;
 --ring:rgba(2,132,199,.25);
 --border: rgba(2,8,23,.08);
 --input-bg:#ffffff;
 
}
 *{
box-sizing:border-box
}
 html,body{
height:100%
}
 body{
 margin:0;
 font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
 background:var(--bg);
 color:var(--fg);
 
}
 /* ====== Layout ====== */
.auth-wrap{
min-height:100vh;
 min-height:100dvh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:32px 16px;
 background:linear-gradient(180deg, rgba(148,163,184,0.12) 0%, rgba(15,23,42,0) 100%);

}
 .card{
width:min(460px,100%);
 background:var(--card);
 border:1px solid var(--border);
 border-radius:20px;
 padding:32px 30px;
 box-shadow:0 20px 50px rgba(15,23,42,.25);

}
 /* ====== Header / Brand ====== */
.brand{
 text-align:center;
 margin-bottom:12px 
}
 .brand-row{
display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:14px;

}
 .brand-col{
 text-align:left 
}
 .brand-logo{
width:54px;
 height:54px;
 border-radius:12px;

}
 .brand-title{
 margin:8px 0 4px;
 font-weight:700;
 letter-spacing:.3px 
}
 .brand-tagline{
 margin:0;
 color:var(--muted);
 font-size:.95rem 
}
 /* Ghost button (theme toggle) */
.btn-ghost{
 align-self:flex-start;
 border:1px solid var(--border);
 background:transparent;
 color:var(--fg);
 border-radius:12px;
 padding:8px 10px;
 cursor:pointer;
 
}
 .btn-ghost:hover{
 background:rgba(148,163,184,.08) 
}
.btn-ghost[disabled]{
 opacity:.6;
 cursor:not-allowed;
}
.btn-ghost .btn-label{
 display:inline-flex;
 align-items:center;
 gap:6px;
}
.btn-ghost .btn-spinner{
 width:14px;
 height:14px;
 border-radius:999px;
 border:2px solid var(--border);
 border-top-color:transparent;
 display:none;
 animation:spin .85s linear infinite;
}
.btn-ghost.loading .btn-spinner{
 display:inline-block;
}
 .theme-ico{
 display:inline-block;
 width:1.2rem;
 text-align:center 
}
 .theme-ico[hidden]{
 display:none !important
}
 /* ====== Form ====== */
.form{
 margin-top:12px 
}
 .form-group{
 margin:14px 0 
}
 .form-group label{
 display:block;
 font-size:.9rem;
 color:var(--muted);
 margin-bottom:6px 
}
 .form-group input{
 width:100%;
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
 outline:none;
 
}
 .form-group input:focus{
 border-color:var(--primary);
 box-shadow:0 0 0 4px var(--ring) 
}
 .form-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin:10px 0 6px 
}
 .chk{
 display:flex;
 gap:8px;
 align-items:center;
 user-select:none;
 color:var(--muted) 
}
 .chk input[type="checkbox"]{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
 }
 .chk input[type="checkbox"]::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background:transparent;
  transition:background .15s ease;
 }
 .chk input[type="checkbox"]:checked::after{
  background:var(--primary);
 }
 .link{
 color:var(--primary);
 text-decoration:none 
}
 .link:hover{
 text-decoration:underline 
}
 /* ====== Buttons ====== */
.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:14px 20px;
 min-height:48px;
 border-radius:14px;
 border:0;
 font-weight:600;
 font-size:1rem;
 line-height:1.1;
 letter-spacing:.015em;
 cursor:pointer;
 text-decoration:none;
 transition:transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;

}
 .btn:hover{
 transform:translateY(-1px);
 box-shadow:0 14px 30px rgba(14,165,233,.25);

}
 .btn:active{
 transform:translateY(0);

}
 .btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--ring);

}
 .btn[disabled]{
 opacity:.6;
 cursor:not-allowed;
 box-shadow:none;

}
 .btn-block{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;

}
 .btn-primary{
  background:linear-gradient(140deg,#0ea5e9 0%,#0284c7 55%,#0369a1 100%);
  color:#f8fafc;
  box-shadow:0 16px 32px rgba(14,165,233,.28);

}
 .btn-primary:hover{
  background:linear-gradient(140deg,#38bdf8 0%,#0284c7 55%,#0369a1 100%);

}
 .btn-primary:active{
  background:linear-gradient(140deg,#0284c7 0%,#0369a1 100%);

}
 .btn-spinner{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(248,250,252,.7);
  border-top-color:transparent;
  display:none;
  animation:spin .85s linear infinite;

}
 .btn.loading .btn-spinner{
  display:inline-block;

}
 @media (max-width: 480px){
  .btn{
   padding:13px 18px;
  }

}

@keyframes spin{
to{
transform:rotate(360deg);

}

}
 /* ====== Feedback ====== */
.error{
 margin:12px 2px 0;
 color:var(--danger) 
}
 .note{
 margin:8px 2px 0;
 color:#f59e0b 
}
 /* ====== Footer ====== */
.legal{
 margin-top:18px;
 text-align:center;
 color:var(--muted) 
}
 /* ===== Dashboard Layout ===== */
body.layout{
 display:grid;
 grid-template-columns:260px 1fr;
 min-height:100vh;
 background:var(--bg);
 margin:0;
 
}
 .sidebar{
 background:var(--card);
 border-right:1px solid var(--border);
 padding:24px 20px;
 display:flex;
 flex-direction:column;
 gap:18px;
 position:relative;
 z-index:20;
 
}
 .sidebar-brand{
display:flex;
 align-items:center;
 gap:12px;

}
 .sidebar-logo{
width:44px;
 height:44px;
 border-radius:12px;

}
 .sidebar-title{
margin:0;
 font-size:1.2rem;

}
 .sidebar-sub{
margin:2px 0 0;
 color:var(--muted);
 font-size:.9rem;

}
 .sidebar-nav{
display:flex;
 flex-direction:column;
 gap:8px;

}
 .nav-label{
margin:12px 0 4px;
 font-size:.75rem;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:var(--muted);

}
 .nav-link{
color:var(--muted);
 text-decoration:none;
 padding:10px 12px;
 border-radius:10px;
 transition:background .2s ease, color .2s ease;

}
 .nav-link:hover{
background:rgba(148,163,184,.08);
 color:var(--fg);

}
 .nav-link.active{
background:rgba(14,165,233,.15);
 color:var(--fg);

}
 .sidebar-footer{
margin-top:auto;
 color:var(--muted);
 font-size:.85rem;

}
 .sidebar-overlay{
position:fixed;
 inset:0;
 background:rgba(15,23,42,.6);
 z-index:19;
 display:none;

}
 .sidebar[data-open="true"] + .sidebar-overlay{
display:block;

}
 .topbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 24px;
 gap:24px;
 background:transparent;
 border-bottom:1px solid var(--border);
 
}
 .topbar-left{
display:flex;
 align-items:center;
 gap:16px;

}
 .topbar-heading{
display:flex;
 flex-direction:column;
 gap:4px;

}
 .topbar-title{
margin:0;
 font-size:1.6rem;

}
 .topbar-sub{
margin:4px 0 0;
 color:var(--muted);
 font-size:.95rem;

}
 .topbar-user{
margin-left:auto;
 display:flex;
 align-items:center;
 gap:12px;

}
 .topbar-user .user-meta{
display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:2px;

}
 .sidebar-toggle{
display:none;
 background:none;
 border:0;
 padding:8px;
 cursor:pointer;
 border-radius:12px;

}
 .sidebar-toggle span{
display:block;
 width:24px;
 height:2px;
 background:var(--fg);
 margin:5px 0;
 border-radius:1px;
 transition:transform .2s ease, opacity .2s ease;

}
 .sidebar[data-open="true"] .sidebar-toggle span:nth-child(1){
transform:translateY(7px) rotate(45deg);

}
 .sidebar[data-open="true"] .sidebar-toggle span:nth-child(2){
opacity:0;

}
 .sidebar[data-open="true"] .sidebar-toggle span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);

}
 .main{
display:flex;
 flex-direction:column;
 min-height:100vh;

}
 .content{
flex:1;
 padding:28px;
 display:flex;
 flex-direction:column;
 gap:24px;

}
 .kpi-grid{
display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:18px;

}
 .kpi-card{
background:var(--card);
 border:1px solid var(--border);
 border-radius:16px;
 padding:20px;
 display:flex;
 flex-direction:column;
 gap:12px;

}
 .kpi-card header{
display:flex;
 justify-content:space-between;
 align-items:center;

}
 .kpi-card h3{
margin:0;
 font-size:1.1rem;

}
 .badge{
display:inline-block;
 font-size:.75rem;
 padding:4px 8px;
 border-radius:999px;
 background:rgba(14,165,233,.15);
 color:var(--primary);
 text-transform:uppercase;
 letter-spacing:.08em;

}
.google-connection-badge{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:7px 10px;
 border-radius:999px;
 border:1px solid var(--border);
 background:rgba(148,163,184,.12);
 color:var(--muted);
 font-size:.78rem;
 font-weight:700;
 letter-spacing:.02em;
 white-space:nowrap;
}
.google-connection-badge::before{
 content:'';
 width:8px;
 height:8px;
 border-radius:999px;
 background:currentColor;
 opacity:.85;
}
.google-connection-badge--neutral{
 background:rgba(148,163,184,.12);
 color:var(--muted);
}
.google-connection-badge--disconnected{
 background:rgba(148,163,184,.16);
 color:var(--muted);
}
.google-connection-badge--pending{
 background:rgba(14,165,233,.16);
 color:var(--primary);
}
.google-connection-badge--connected{
 background:rgba(34,197,94,.16);
 color:#22c55e;
}
.google-connection-badge--error{
 background:rgba(239,68,68,.16);
 color:var(--danger);
}
 .kpi-value{
font-size:2rem;
 font-weight:700;
 margin:0;

}
 .panel{
background:var(--card);
 border:1px solid var(--border);
 border-radius:18px;
 overflow:hidden;

}
 .panel > header{
padding:18px 24px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid var(--border);

}
 .panel > header h3{
margin:0;
 font-size:1.1rem;

}
 .panel-body{
padding:22px 24px;
 color:var(--muted);

}
 .panel-body.empty{
display:flex;
 align-items:center;
 justify-content:center;
 min-height:120px;
 text-align:center;

}
 .panel-body.list ul{
margin:0;
 padding-left:18px;
 line-height:1.5;

}
 .panel-body.list li + li{
margin-top:6px;

}
.agenda-placeholder{
 text-align:center;
 color:var(--muted);
}
.agenda-placeholder p{
 margin:0;
}
.agenda-message{
 margin:0;
 padding:18px;
 border-radius:14px;
 background:rgba(148,163,184,.08);
 color:var(--muted);
 text-align:center;
}
.agenda-message.error{
 background:rgba(248,113,113,.12);
 color:var(--danger);
}
.agenda-list{
 list-style:none;
 margin:0;
 padding:0;
 display:flex;
 flex-direction:column;
 gap:12px;
}
.agenda-item{
 border:1px solid var(--border);
 border-radius:16px;
 padding:16px 18px;
 background:rgba(148,163,184,.06);
 display:flex;
 flex-direction:column;
 gap:8px;
}
.agenda-item--more{
 align-items:center;
 justify-content:center;
 text-align:center;
 font-weight:600;
 color:var(--muted);
}
.agenda-item-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
}
.agenda-item-time{
 font-weight:600;
 color:var(--fg);
}
.agenda-item-title{
 margin:0;
 font-size:1rem;
 font-weight:600;
 color:var(--fg);
}
.agenda-item-meta{
 margin:0;
 font-size:.9rem;
 color:var(--muted);
}
.agenda-item-status{
 display:inline-flex;
 align-items:center;
 padding:4px 10px;
 border-radius:999px;
 background:rgba(148,163,184,.16);
 color:var(--muted);
 font-size:.78rem;
 letter-spacing:.05em;
 text-transform:uppercase;
 font-weight:600;
}
.agenda-item-status--scheduled{
 background:rgba(14,165,233,.18);
 color:var(--primary);
}
.agenda-item-status--confirmed,
.agenda-item-status--completed{
 background:rgba(34,197,94,.18);
 color:#22c55e;
}
.agenda-item-status--cancelled,
.agenda-item-status--no_show{
 background:rgba(239,68,68,.18);
 color:var(--danger);
}
.panel-header-actions{
display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 gap:12px;
 align-items:flex-start;

}
 .panel-actions{
display:flex;
 flex-wrap:wrap;
 gap:10px;
 align-items:center;

}
 .panel-actions input[type="search"], .panel-actions select{
padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
 min-height:44px;

}
 .grid-form{
display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:16px;

}
 .grid-form input, .grid-form select, .grid-form textarea{
width:100%;
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
 min-height:44px;

}
 .grid-form textarea{
resize:vertical;
 min-height:96px;

}
 .grid-span-2{
 grid-column:1 / -1;

}
 .form-actions .action-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
 .form-actions{
  display:flex;
  align-items:center;
  gap:14px;

}
 .form-subsection{
  grid-column:1 / -1;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:rgba(148,163,184,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
 }
 .form-subsection[hidden]{
  display:none;
 }
 .form-subsection header{
  margin-bottom:6px;
 }
 .form-subsection h4{
  margin:0;
  font-size:1rem;
 }
 .form-subsection header .muted{
  margin:4px 0 0;
  font-size:.9rem;
 }
 .form-subsection .subgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
 }
 .form-subsection .subgrid .grid-span-2{
  grid-column:1 / -1;
 }
 .grid-form .form-group p{
  margin:6px 0 0;
  color:var(--muted);
 }
.form-advanced{
 grid-column:1 / -1;
 border:1px solid var(--border);
 border-radius:18px;
 background:var(--card);
 overflow:hidden;
}
.form-advanced summary{
 list-style:none;
 margin:0;
 padding:16px 18px;
 font-weight:600;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 color:var(--fg);
}
.form-advanced summary::marker{
 display:none;
}
.form-advanced summary::after{
 content:'';
 width:10px;
 height:10px;
 border-right:2px solid var(--muted);
 border-bottom:2px solid var(--muted);
 transform:rotate(45deg);
 transition:transform .2s ease;
}
.form-advanced[open] summary{
 border-bottom:1px solid var(--border);
}
.form-advanced[open] summary::after{
 transform:rotate(-135deg);
}
.form-advanced summary:focus-visible{
 outline:0;
 box-shadow:0 0 0 3px var(--ring);
 border-radius:inherit;
}
.form-advanced .form-advanced-content{
 padding:18px;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:16px;
 background:rgba(148,163,184,.04);
}
.form-advanced .form-subsection header{
 margin-bottom:8px;
}
.form-advanced .form-subsection .subgrid{
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.form-advanced[hidden]{
 display:none;
}
 @media (max-width: 720px){
  .form-subsection{
   padding:14px;
  }
  .form-subsection .subgrid{
   grid-template-columns:1fr;
  }
 }
.availability-form{
 display:flex;
 flex-direction:column;
 gap:18px;
}
.availability-grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 align-items:center;
}
.availability-grid label{
 font-weight:600;
}
.availability-row{
 display:contents;
}
.availability-header{
 display:contents;
 font-weight:600;
 color:var(--muted);
}
.availability-row input[type="time"], .availability-row input[type="number"]{
 width:100%;
 padding:10px 12px;
 border-radius:10px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
}
.package-sessions-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
}
.package-template-actions{
 display:flex;
 gap:10px;
 align-items:center;
 flex-wrap:wrap;
}
.package-template-actions select{
 flex:1;
 min-width:220px;
}
.package-sessions{
 border:1px solid var(--border);
 border-radius:14px;
 padding:14px;
 min-height:80px;
 display:flex;
 flex-direction:column;
 gap:10px;
}
.package-sessions[data-empty]:empty::before{
 content:attr(data-empty);
 color:var(--muted);
}
.package-session-item{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:10px 12px;
 border:1px solid var(--border);
 border-radius:12px;
 background:rgba(148,163,184,.06);
}
.package-session-item span{
 font-size:.95rem;
}
.package-session-item button{
 padding:6px 10px;
 font-size:.85rem;
}
@media (max-width: 760px){
 .package-template-actions{
  flex-direction:column;
  align-items:stretch;
 }
 .package-template-actions select{
  min-width:0;
 }
}
 .responsive-table{
width:100%;
 overflow-x:auto;

}
.responsive-table table{
width:100%;
 border-collapse:collapse;
 min-width:600px;

}
.responsive-table th, .responsive-table td{
padding:12px 14px;
 border-bottom:1px solid var(--border);
 text-align:left;

}
.responsive-table th.table-actions,
.responsive-table td.table-actions{
 text-align:right;
 white-space:nowrap;
}
.responsive-table .table-actions-group{
 display:inline-flex;
 align-items:center;
 justify-content:flex-end;
 gap:8px;
 flex-wrap:wrap;
}
#appointmentsTable th.table-actions,
#appointmentsTable td.table-actions{
 text-align:center;
}
#appointmentsTable .table-actions-group{
 justify-content:center;
}
.responsive-table th.company-logo-column,
.responsive-table td.company-logo-column{
 text-align:center;
 width:76px;
 min-width:76px;
}
.responsive-table th.product-thumb-column,
.responsive-table td.product-thumb-column{
 text-align:center;
 width:96px;
 min-width:96px;
}
.responsive-table td.table-actions{
 cursor:default;
}
.responsive-table th{
font-weight:600;
 color:var(--muted);
 font-size:.85rem;
 text-transform:uppercase;
 letter-spacing:.04em;

}
.responsive-table tbody tr{
  cursor:pointer;
}
.table-action{
 border:0;
 background:transparent;
 color:var(--fg);
 cursor:pointer;
 padding:4px 8px;
 border-radius:8px;
 font-size:.85rem;
 transition:background .15s ease, color .15s ease;
}
.table-action:hover{
 background:rgba(148,163,184,.12);
}
.table-action:disabled,
.table-action.table-action-disabled{
 opacity:.48;
 cursor:not-allowed;
 background:transparent;
}
.table-action:focus-visible{
 outline:2px solid var(--ring);
 outline-offset:2px;
}
.table-action-danger{
 color:var(--danger);
}
.table-action-danger:hover{
 background:rgba(239,68,68,.15);
}
.appointment-google-sync{
 display:inline-flex;
 align-items:center;
 padding:4px 10px;
 border-radius:999px;
 font-size:.76rem;
 font-weight:600;
 letter-spacing:.02em;
 border:1px solid transparent;
 white-space:nowrap;
}
.appointment-google-sync-wrapper{
 display:inline-flex;
 align-items:center;
 gap:8px;
 flex-wrap:wrap;
}
.appointment-google-meet-link{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:24px;
 padding:2px 10px;
 border-radius:999px;
 border:1px solid rgba(29,161,242,.28);
 background:rgba(29,161,242,.12);
 color:#0369a1;
 font-size:.76rem;
 font-weight:600;
 text-decoration:none;
 transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.appointment-google-meet-link:hover{
 background:rgba(29,161,242,.18);
 border-color:rgba(29,161,242,.4);
 color:#075985;
}
.appointment-google-sync--ok{
 color:#22c55e;
 background:rgba(34,197,94,.16);
 border-color:rgba(34,197,94,.28);
}
.appointment-google-sync--warn{
 color:#f59e0b;
 background:rgba(245,158,11,.16);
 border-color:rgba(245,158,11,.28);
}
.appointment-google-sync--error{
 color:var(--danger);
 background:rgba(239,68,68,.16);
 border-color:rgba(239,68,68,.28);
}
.appointment-google-sync--neutral{
 color:var(--muted);
 background:rgba(148,163,184,.12);
 border-color:rgba(148,163,184,.24);
}
.responsive-table tbody tr:hover{
  background:rgba(148,163,184,.06);
}
.company-logo-cell{
 display:flex;
 align-items:center;
 justify-content:center;
}
.company-logo-thumb{
 width:42px;
 height:42px;
 border-radius:12px;
 object-fit:cover;
 border:1px solid var(--border);
 background:var(--input-bg);
 box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.product-thumb-cell{
 display:flex;
 align-items:center;
 justify-content:center;
}
.product-thumb-image{
 width:64px;
 height:40px;
 border-radius:10px;
 object-fit:contain;
 border:1px solid var(--border);
 background:var(--input-bg);
 box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.responsive-table tbody tr.selected{
  background:rgba(14,165,233,.16);
}
.responsive-table tbody tr.selected:hover{
  background:rgba(14,165,233,.22);
}
 .responsive-table[data-empty]::after{
content:attr(data-empty);
 display:block;
 padding:20px;
 color:var(--muted);
 text-align:center;

}
 .responsive-table.has-data::after{
content:'';
 display:none;

}
 @media (max-width: 960px){
 body.layout{
grid-template-columns:1fr;

}
 .sidebar{
position:fixed;
 inset:0 auto 0 0;
 width:240px;
 transform:translateX(-110%);
 transition:transform .3s ease;
 padding:24px 18px;

}
 .sidebar[data-open="true"]{
transform:translateX(0);

}
 .sidebar-toggle{
display:block;

}
 .main{
margin-left:0;

}
 .content{
padding:24px;

}
 .panel-actions input[type="search"], .panel-actions select{
width:100%;

}
 
}
 @media (max-width: 640px){
 .content{
  padding:20px;
 }

 .topbar{
flex-direction:column;
 align-items:flex-start;
 gap:10px;
 padding:16px;

}
 .topbar-user{
width:100%;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:8px;

}
 
 .grid-form{
grid-template-columns:1fr;

}
 .grid-form textarea{
min-height:80px;

}
 .responsive-table table{
min-width:100%;
 font-size:.92rem;

}
 .panel-actions{
gap:6px;

}
 
}
 grid-column:1 / -1;

}
body.modal-open{
 overflow:hidden;
}

.modal{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:rgba(2,8,23,.55);
 z-index:50;
}

.modal[hidden]{
 display:none;
}

.modal-backdrop{
position:absolute;
inset:0;
background:transparent;
 z-index:0;
}

.modal-card{
position:relative;
background:var(--card);
 border:1px solid var(--border);
 border-radius:18px;
padding:32px 32px;
max-width:680px;
width:min(680px,92vw);
box-shadow:0 24px 60px rgba(15,23,42,.35);
display:flex;
flex-direction:column;
gap:18px;
z-index:1;
}

.modal-close{
 position:absolute;
 top:14px;
 right:18px;
 border:0;
 background:transparent;
 color:var(--muted);
 font-size:1.5rem;
 cursor:pointer;
}

.modal-header{
 display:flex;
 flex-direction:column;
 gap:8px;
}

.modal-header h2{
 margin:0;
 font-size:1.25rem;
}

.modal-message{
 margin:0;
 font-size:.95rem;
 color:var(--muted);
}

.modal-message.error{
 color:var(--danger);
}

.modal-message.success{
 color:var(--primary);
}

.modal-message.modal-debug{
 font-size:.8rem;
 font-family:monospace;
 opacity:.8;
}

.modal-content{
 display:flex;
 flex-direction:column;
 gap:18px;
}

.modal-form{
 display:flex;
 flex-direction:column;
 gap:14px;
}

.modal-form fieldset{
 margin:0;
 padding:0;
 border:0;
 display:flex;
 flex-direction:column;
 gap:10px;
}

.modal-form label{
 font-size:.9rem;
 color:var(--muted);
}

.modal-form input{
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
}

.modal-switch{
 margin:4px 0 0;
 font-size:.9rem;
 color:var(--muted);
 text-align:center;
}

.modal-link{
 border:0;
 background:transparent;
 color:var(--primary);
 cursor:pointer;
 padding:0 2px;
 font-weight:600;
}

.modal-link:hover{
 text-decoration:underline;
}

@media (max-width: 520px){
 .modal-card{
  padding:24px 20px;
  max-width:95vw;
  width:95vw;
 }
}

.text-error{
  color:#dc2626;
}

.public-store-page{
  background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);
  min-height:100vh;
}

.public-store{
  max-width:1200px;
  margin:0 auto;
  padding:28px 20px 48px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.public-store-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.public-store-eyebrow{
  margin:0 0 6px;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--muted);
}

.public-store-header h1{
  margin:0;
}

.public-store-toolbar-body{
  display:grid;
  grid-template-columns:180px 1fr auto 130px 1fr;
  gap:10px;
  align-items:center;
}

.public-store-label{
  font-size:.86rem;
  color:var(--muted);
}

.public-store-grid{
  display:grid;
  grid-template-columns:minmax(280px,360px) 1fr;
  gap:16px;
}

.public-store-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.public-store-product-card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:14px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.public-store-product-image{
  width:100%;
  max-height:180px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-soft);
  margin-bottom:10px;
}

.public-store-product-card:hover{
  border-color:rgba(14,165,233,.6);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  transform:translateY(-1px);
}

.public-store-product-card.is-selected{
  border-color:#0ea5e9;
  box-shadow:0 8px 20px rgba(14,165,233,.22);
}

.public-store-product-card h4{
  margin:6px 0;
  font-size:1.02rem;
}

.public-store-product-card p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.public-store-product-card .product-type{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(14,165,233,.14);
  color:#0284c7;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
}

.product-price-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
}

.product-price-free{
  color:#059669;
  font-weight:700;
}

.compare-at{
  color:var(--muted);
  text-decoration:line-through;
  font-size:.9rem;
}

.public-store-detail h4{
  margin:0 0 8px;
}

.public-store-detail p{
  margin:0 0 8px;
}

.public-store-product-detail-image{
  width:100%;
  max-height:240px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-soft);
  margin:8px 0 12px;
}

.public-store-detail.empty{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:14px;
}

.public-store-message{
  border-radius:12px;
  border:1px solid rgba(14,165,233,.24);
  background:rgba(14,165,233,.12);
  color:#0369a1;
  padding:10px 12px;
}

.public-store-message.error{
  border-color:rgba(220,38,38,.3);
  background:rgba(220,38,38,.1);
  color:#991b1b;
}

.public-store-result{
  margin-top:12px;
  border:1px solid rgba(34,197,94,.3);
  background:rgba(34,197,94,.12);
  border-radius:12px;
  padding:12px;
}

.public-store-result h4{
  margin:0 0 8px;
}

.public-store-result p{
  margin:0 0 7px;
}

.public-store-success{
  color:#166534;
  font-weight:600;
}

@media (max-width: 980px){
  .public-store-toolbar-body{
    grid-template-columns:1fr;
  }
  .public-store-grid{
    grid-template-columns:1fr;
  }
}

/* ===== Layout Refresh - SerenusCare Admin ===== */
html[data-theme="light"]{
 --bg:#f4f6fa;
 --card:#ffffff;
 --muted:#5b7290;
 --fg:#07162f;
 --primary:#11988b;
 --primary-600:#0f877d;
 --danger:#ef4444;
 --ring:rgba(17,152,139,.24);
 --border:#d6dde7;
 --input-bg:#ffffff;
}

body{
 font-family:"Manrope","Source Sans 3","Nunito Sans",sans-serif;
}

body.layout{
 position:relative;
 grid-template-columns:280px 1fr;
 background:var(--bg);
}

body.layout::before{
 content:"";
 position:fixed;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:#165ab7;
 z-index:120;
}

.sidebar{
 background:#fdfefe;
 border-right:1px solid var(--border);
 padding:0;
 gap:0;
}

.sidebar-brand{
 min-height:86px;
 padding:18px 24px;
 border-bottom:1px solid var(--border);
}

.sidebar-logo{
 display:none;
}

.sidebar-title{
 margin:0;
 font-size:2.2rem;
 line-height:1;
 letter-spacing:-.01em;
 color:#0f8f84;
 font-weight:800;
}

.sidebar-sub{
 display:none;
}

.sidebar-nav{
 padding:16px 10px 20px;
 gap:4px;
}

.nav-label{
 margin:6px 14px 10px;
 font-size:1.05rem;
 text-transform:none;
 letter-spacing:0;
 color:#223450;
 font-weight:600;
}

.nav-link{
 display:flex;
 align-items:center;
 gap:12px;
 color:#091b39;
 border-radius:14px;
 padding:10px 12px;
 font-size:1.02rem;
 font-weight:500;
 transition:background .2s ease,color .2s ease,transform .2s ease;
}

.nav-link::before{
 content:"";
 width:22px;
 height:22px;
 border-radius:8px;
 display:grid;
 place-items:center;
 color:#102a49;
 font-size:1rem;
 font-weight:700;
 flex:0 0 22px;
}

.nav-link[data-icon="dashboard"]::before{content:"⌂";}
.nav-link[data-icon="people"]::before{content:"⟠";}
.nav-link[data-icon="professionals"]::before{content:"◧";}
.nav-link[data-icon="appointments"]::before{content:"◷";}
.nav-link[data-icon="packages"]::before{content:"◈";}
.nav-link[data-icon="products"]::before{content:"▦";}
.nav-link[data-icon="coupons"]::before{content:"✣";}
.nav-link[data-icon="transactions"]::before{content:"$";}
.nav-link[data-icon="integrations"]::before{content:"⛭";}
.nav-link[data-icon="affiliates"]::before{content:"◎";}
.nav-link[data-icon="patients"]::before{content:"◉";}
.nav-link[data-icon="settings"]::before{content:"⚙";}

.nav-link:hover{
 background:#eef2f8;
 color:#07162f;
 transform:translateX(1px);
}

.nav-link.active{
 background:#e8edf5;
 color:#051631;
 font-weight:700;
}

.sidebar-footer{
 padding:14px 20px 20px;
 border-top:1px solid var(--border);
}

.main{
 background:var(--bg);
}

.topbar{
 min-height:70px;
 padding:10px 18px 10px 22px;
 background:#fff;
 border-bottom:1px solid var(--border);
}

.topbar-left{
 gap:10px;
}

.topbar-quick-actions{
 display:flex;
 align-items:center;
 gap:8px;
}

.topbar-icon-btn{
 border:0;
 background:transparent;
 width:34px;
 height:34px;
 border-radius:10px;
 display:grid;
 place-items:center;
 color:#274367;
 font-size:1rem;
}

.topbar-icon-btn:hover{
 background:#eef4fa;
}

.company-switcher{
 border:1px solid #b7dad5;
 background:#dbedea;
 color:#118b81;
 border-radius:14px;
 min-width:380px;
 min-height:52px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 padding:0 16px;
 font-size:1.02rem;
 font-weight:700;
 cursor:default;
}

.company-switcher-caret{
 width:10px;
 height:10px;
 border-right:2px solid #57b8ac;
 border-bottom:2px solid #57b8ac;
 transform:rotate(45deg) translateY(-2px);
}

.topbar-heading{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 border:0;
}

.topbar-user{
 gap:14px;
}

.topbar-user .user-meta{
 align-items:flex-end;
 gap:2px;
}

.topbar-user .user-meta strong{
 font-size:2rem;
 line-height:1.05;
 letter-spacing:-.01em;
}

.topbar-user .user-meta .muted{
 color:#7086a3;
 font-size:1.1rem;
}

.content{
 padding:24px 34px 34px;
 gap:22px;
}

.view{
 gap:16px;
}

.panel{
 border:1px solid #d3dbe7;
 border-radius:18px;
 background:#fff;
 overflow:hidden;
 box-shadow:0 1px 2px rgba(6,20,43,.04);
}

.panel > header{
 border-bottom:0;
 padding:24px 28px 10px;
}

.panel > header h3{
 font-size:2.6rem;
 letter-spacing:-.02em;
}

.panel-body{
 padding:14px 28px 26px;
 color:var(--muted);
}

.panel-header-actions{
 align-items:center;
}

.panel-actions{
 gap:10px;
}

.integration-tabs-panel .panel-body{
 padding:14px 28px;
}

.integration-tabs{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
}

.integration-tab{
 border:1px solid #d3dbe7;
 border-radius:999px;
 background:#fff;
 color:#395475;
 font-weight:700;
 font-size:.96rem;
 padding:9px 16px;
 min-height:40px;
 cursor:pointer;
 transition:all .18s ease;
}

.integration-tab:hover{
 border-color:#b4c3d9;
 color:#163157;
}

.integration-tab.is-active{
 background:#e8f4f2;
 border-color:#8fcfc6;
 color:#107d73;
}

.integration-token-form{
 margin-bottom:16px;
}

.integration-token-form input[type="checkbox"]{
 width:18px;
 height:18px;
}

.integration-doc-block{
 margin-top:14px;
 border:1px solid #d3dbe7;
 border-radius:14px;
 background:#f8fbff;
 padding:14px 16px;
}

.integration-doc-block h4{
 margin:0;
 font-size:1.05rem;
 color:#0f274a;
}

.integration-token-inline{
 margin-top:10px;
 display:grid;
 grid-template-columns:1fr auto;
 gap:10px;
 align-items:center;
}

.integration-code-block{
 margin:10px 0 0;
 padding:12px 14px;
 border-radius:12px;
 background:#101d34;
 color:#deebff;
 border:1px solid #1d3358;
 font-size:.92rem;
 line-height:1.45;
 overflow:auto;
 white-space:pre;
}

.panel-actions input[type="search"],
.panel-actions input[type="text"],
.panel-actions select{
 min-height:44px;
 border:1px solid #d3dbe7;
 border-radius:12px;
 background:#fff;
}

.btn{
 border-radius:14px;
 min-height:46px;
 padding:12px 20px;
 font-size:1rem;
 box-shadow:none;
 transform:none;
}

.btn:hover{
 transform:none;
 box-shadow:none;
}

.btn-primary{
 background:#11988b;
 color:#fff;
}

.btn-primary:hover{
 background:#0f877d;
}

.btn-secondary{
 background:#fff;
 border:1px solid #d3dbe7;
 color:#0a1c3b;
}

.btn-ghost{
 border:1px solid #d3dbe7;
 color:#274367;
 background:#fff;
}

.kpi-grid{
 gap:14px;
}

.kpi-card{
 border-radius:16px;
 border:1px solid #d3dbe7;
 box-shadow:none;
}

.kpi-card h3{
 font-size:1.08rem;
}

.kpi-value{
 font-size:2.4rem;
}

.badge{
 border-radius:999px;
 font-weight:700;
 text-transform:none;
 letter-spacing:0;
 background:#ecf4f3;
 color:#11988b;
}

.responsive-table{
 border:1px solid #d3dbe7;
 border-radius:16px;
 overflow:hidden;
 background:#fff;
}

.responsive-table table{
 min-width:720px;
 border-collapse:separate;
 border-spacing:0;
}

.responsive-table th,
.responsive-table td{
 padding:18px 20px;
 border-bottom:1px solid #e0e6ee;
}

.responsive-table th{
 color:#597292;
 font-size:1rem;
 font-weight:700;
 background:#fff;
}

.responsive-table td{
 color:#07162f;
 font-size:1.06rem;
}

.responsive-table tbody tr:hover{
 background:#f8fbff;
}

.table-action-btn{
 border:0;
 background:transparent;
 color:#0a1b38;
 font-weight:600;
}

.table-action-btn.table-action-danger{
 color:#ef4444;
}

.appointment-google-sync--ok{
 color:#0f8f84;
 background:rgba(17,152,139,.16);
 border-color:rgba(17,152,139,.28);
}

.appointment-google-sync--warn{
 color:#d97706;
 background:rgba(217,119,6,.15);
 border-color:rgba(217,119,6,.26);
}

.appointment-google-sync--error{
 color:#ef4444;
 background:rgba(239,68,68,.14);
 border-color:rgba(239,68,68,.24);
}

.grid-form input,
.grid-form select,
.grid-form textarea{
 border-radius:12px;
 border:1px solid #d3dbe7;
 background:#fff;
 color:#0a1c3b;
}

.grid-form input:focus,
.grid-form select:focus,
.grid-form textarea:focus{
 border-color:#89cfc6;
 box-shadow:0 0 0 3px rgba(17,152,139,.16);
}

.form-subsection,
.form-advanced,
.package-sessions,
.package-session-item{
 border-color:#d3dbe7;
 background:#fbfcfe;
}

.modal-card{
 border:1px solid #d3dbe7;
 background:#fff;
 box-shadow:0 24px 60px rgba(7,22,47,.18);
}

.google-connection-badge{
 border-color:#cbe6e1;
 background:#edf7f5;
 color:#118b81;
}

.google-connection-badge--error{
 background:#fff1f1;
 border-color:#ffd0d0;
 color:#ef4444;
}

/* ===== Layout Refresh - Checkout ===== */
.public-store-page{
 background:#f4f6fa;
}

.public-store-page::before{
 content:"";
 position:fixed;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:#165ab7;
 z-index:120;
}

.public-store{
 max-width:1240px;
 padding:16px 18px 44px;
 gap:18px;
}

.public-store-header{
 min-height:54px;
 align-items:center;
 padding:0 2px;
}

.public-store-header-actions{
 display:flex;
 align-items:center;
 gap:10px;
}

.public-checkout-brand{
 display:flex;
 align-items:center;
 gap:10px;
}

.public-checkout-logo{
 width:28px;
 height:28px;
 border-radius:8px;
 display:grid;
 place-items:center;
 background:#2f64d0;
 color:#fff;
 font-size:.85rem;
}

.public-store-header h1{
 margin:0;
 font-size:1.15rem;
 color:#072145;
}

.public-store-eyebrow{
 margin:0;
 font-size:1rem;
 color:#072145;
 font-weight:800;
 text-transform:none;
 letter-spacing:0;
}

.public-store-header .btn{
 border:1px solid #d3dbe7;
 background:#fff;
 color:#0a1c3b;
}

.public-store-toolbar{
 border-radius:14px;
}

.public-store-toolbar .panel-body{
 padding:16px 18px;
}

.public-store-toolbar-body{
 grid-template-columns:140px 1fr auto 120px 1fr;
}

.public-store-grid{
 grid-template-columns:360px 1fr;
 align-items:start;
}

.public-store-list-panel,
.public-store-detail-panel{
 border-radius:14px;
}

.public-store-detail-panel .panel-body{
 padding-top:18px;
}

.public-store-product-card{
 border:1px solid #d3dbe7;
 box-shadow:none;
 border-radius:12px;
}

.public-store-product-card.is-selected{
 border-color:#8ccfc7;
 box-shadow:0 0 0 2px rgba(17,152,139,.15);
}

.public-store-product-card .product-type{
 background:#edf5f5;
 color:#0f877d;
}

.public-store-result{
 border-radius:12px;
 border-color:#bfe5e0;
 background:#eef8f6;
}

@media (max-width: 1080px){
 .company-switcher{
  min-width:280px;
 }
 .topbar-user .user-meta strong{
  font-size:1.4rem;
 }
 .content{
  padding:20px 18px 26px;
 }
 .panel > header h3{
  font-size:2.1rem;
 }
}

@media (max-width: 860px){
 body.layout{
  grid-template-columns:1fr;
 }
 .sidebar{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:280px;
  max-width:86vw;
  transform:translateX(-100%);
  transition:transform .2s ease;
 }
 .sidebar[data-open="true"]{
  transform:translateX(0);
 }
 .sidebar-toggle{
  display:inline-flex;
 }
 .topbar{
  padding:10px 12px;
 }
 .company-switcher{
  min-width:0;
  width:100%;
 }
 .topbar-quick-actions{
  display:none;
 }
 .topbar-user{
  margin-left:0;
 }
 .topbar-user .user-meta{
  display:none;
 }
 .public-store-grid{
  grid-template-columns:1fr;
 }
 .public-store-header-actions{
  width:100%;
  justify-content:flex-end;
 }
 .integration-token-inline{
  grid-template-columns:1fr;
 }
 .products-public-link-actions{
  width:100%;
  justify-content:stretch;
  flex-wrap:wrap;
 }
 .products-public-link-actions .btn{
  width:100%;
 }
}

/* ===== Layout Refresh - Dark Mode ===== */
html[data-theme="dark"]{
 --bg:#0b1220;
 --card:#0f172a;
 --muted:#8ea1bb;
 --fg:#e7eefb;
 --primary:#27b6a8;
 --primary-600:#1e9f92;
 --danger:#f87171;
 --ring:rgba(39,182,168,.28);
 --border:#263447;
 --input-bg:#111b2d;
}

html[data-theme="dark"] body.layout{
 background:#0b1220;
}

html[data-theme="dark"] .sidebar{
 background:#101a2b;
 border-right-color:#25354b;
}

html[data-theme="dark"] .sidebar-brand{
 border-bottom-color:#25354b;
}

html[data-theme="dark"] .sidebar-title{
 color:#52d0c2;
}

html[data-theme="dark"] .nav-label{
 color:#9eb0c8;
}

html[data-theme="dark"] .nav-link{
 color:#d7e1f0;
}

html[data-theme="dark"] .nav-link::before{
 color:#d7e1f0;
}

html[data-theme="dark"] .nav-link:hover{
 background:#18263d;
 color:#ffffff;
}

html[data-theme="dark"] .nav-link.active{
 background:#233652;
 color:#ffffff;
}

html[data-theme="dark"] .topbar{
 background:#111d31;
 border-bottom-color:#25354b;
}

html[data-theme="dark"] .topbar-icon-btn{
 color:#bcd1ea;
}

html[data-theme="dark"] .topbar-icon-btn:hover{
 background:#1a2b45;
}

html[data-theme="dark"] .company-switcher{
 background:#19363d;
 border-color:#2f6970;
 color:#7cd8cd;
}

html[data-theme="dark"] .company-switcher-caret{
 border-right-color:#7cd8cd;
 border-bottom-color:#7cd8cd;
}

html[data-theme="dark"] .topbar-user .user-meta .muted{
 color:#9ab0cc;
}

html[data-theme="dark"] .main,
html[data-theme="dark"] .content{
 background:#0b1220;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .responsive-table,
html[data-theme="dark"] .public-store-toolbar,
html[data-theme="dark"] .public-store-list-panel,
html[data-theme="dark"] .public-store-detail-panel{
 background:#121d31;
 border-color:#25354b;
 box-shadow:none;
}

html[data-theme="dark"] .panel > header h3,
html[data-theme="dark"] .topbar-user .user-meta strong{
 color:#f4f8ff;
}

html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .topbar-sub{
 color:#9ab0cc;
}

html[data-theme="dark"] .panel-actions input[type="search"],
html[data-theme="dark"] .panel-actions input[type="text"],
html[data-theme="dark"] .panel-actions select,
html[data-theme="dark"] .grid-form input,
html[data-theme="dark"] .grid-form select,
html[data-theme="dark"] .grid-form textarea,
html[data-theme="dark"] .public-store input,
html[data-theme="dark"] .public-store select,
html[data-theme="dark"] .public-store textarea{
 background:#111b2d;
 border-color:#2a3f5b;
 color:#e6eefb;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .public-store-header .btn{
 background:#132036;
 border-color:#2a3f5b;
 color:#dce8fb;
}

html[data-theme="dark"] .btn-primary{
 background:#1f9e91;
}

html[data-theme="dark"] .btn-primary:hover{
 background:#218f84;
}

html[data-theme="dark"] .integration-tab{
 background:#142238;
 border-color:#2a3f5b;
 color:#c8d9f2;
}

html[data-theme="dark"] .integration-tab:hover{
 border-color:#3b5678;
 color:#ffffff;
}

html[data-theme="dark"] .integration-tab.is-active{
 background:#173238;
 border-color:#2e6871;
 color:#73d6cb;
}

html[data-theme="dark"] .responsive-table th{
 color:#9ab0cc;
 background:#121d31;
}

html[data-theme="dark"] .responsive-table th,
html[data-theme="dark"] .responsive-table td{
 border-bottom-color:#25354b;
}

html[data-theme="dark"] .responsive-table td{
 color:#e7eefb;
}

html[data-theme="dark"] .responsive-table tbody tr:hover{
 background:#17263f;
}

html[data-theme="dark"] .table-action-btn{
 color:#dce8fb;
}

html[data-theme="dark"] .form-subsection,
html[data-theme="dark"] .form-advanced,
html[data-theme="dark"] .package-sessions,
html[data-theme="dark"] .package-session-item{
 border-color:#2a3f5b;
 background:#111c2f;
}

html[data-theme="dark"] .integration-doc-block{
 background:#111c2f;
 border-color:#2a3f5b;
}

html[data-theme="dark"] .integration-doc-block h4{
 color:#f2f7ff;
}

html[data-theme="dark"] .integration-code-block{
 background:#0d172a;
 border-color:#2a3f5b;
 color:#dce8fb;
}

html[data-theme="dark"] .modal-card{
 border-color:#2a3f5b;
 background:#111c30;
 box-shadow:0 20px 50px rgba(4,10,24,.6);
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] .google-connection-badge{
 background:#173238;
 border-color:#2e6871;
 color:#6ed6ca;
}

html[data-theme="dark"] .public-store-page{
 background:#0b1220;
}

html[data-theme="dark"] .public-store-header h1,
html[data-theme="dark"] .public-store-eyebrow{
 color:#e8f1fd;
}

html[data-theme="dark"] .public-store-product-card{
 background:#121d31;
 border-color:#2a3f5b;
}

html[data-theme="dark"] .public-store-product-card h4{
 color:#f0f6ff;
}

html[data-theme="dark"] .public-store-product-card p{
 color:#9ab0cc;
}

html[data-theme="dark"] .public-store-product-card .product-type{
 background:#173238;
 color:#73d6cb;
}

html[data-theme="dark"] .public-store-result{
 background:#123036;
 border-color:#2f6970;
}

html[data-theme="dark"] .public-store-message{
 background:#13283a;
 border-color:#2e4e6e;
 color:#a7c3e5;
}

html[data-theme="dark"] .public-store-message.error{
 background:#361a1a;
 border-color:#6a2f2f;
 color:#ffb1b1;
}

/* ===== Student Portal ===== */
.student-portal-page{
 min-height:100vh;
 min-height:100dvh;
 background:var(--bg);
 color:var(--fg);
 margin:0;
}

.student-portal{
 width:min(1240px, 100%);
 margin:0 auto;
 padding:28px 18px 34px;
 display:grid;
 gap:18px;
}

.student-portal-header{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:14px;
 flex-wrap:wrap;
}

.student-portal-header h1{
 margin:0;
 font-size:2rem;
 line-height:1.15;
}

.student-portal-eyebrow{
 margin:0 0 4px;
 color:var(--primary);
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:.08em;
 font-size:.74rem;
}

.student-portal-header-actions{
 display:flex;
 gap:10px;
 align-items:center;
 flex-wrap:wrap;
}

.student-company-panel .panel-body{
 display:grid;
 grid-template-columns:1fr auto;
 gap:10px;
 align-items:end;
}

.student-company-panel .student-portal-label{
 grid-column:1 / -1;
 color:var(--muted);
 font-size:.9rem;
}

.student-company-panel input{
 width:100%;
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 color:var(--fg);
 outline:none;
}

.student-company-panel input:focus{
 border-color:var(--primary);
 box-shadow:0 0 0 4px var(--ring);
}

.student-auth-grid{
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr));
 gap:16px;
}

.student-app-grid{
 display:grid;
 grid-template-columns:1.1fr 1.8fr 1.4fr;
 gap:16px;
 align-items:start;
}

.student-profile-list{
 margin:0;
 display:grid;
 gap:12px;
}

.student-profile-list div{
 display:grid;
 gap:2px;
}

.student-profile-list dt{
 color:var(--muted);
 font-size:.82rem;
 text-transform:uppercase;
 letter-spacing:.05em;
}

.student-profile-list dd{
 margin:0;
 font-weight:600;
}

.student-profile-actions{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 margin-top:18px;
}

.student-library-list{
 display:grid;
 gap:14px;
}

.student-enrollment-card{
 border:1px solid var(--border);
 border-radius:14px;
 padding:14px;
 background:var(--input-bg);
}

.student-enrollment-card header h4{
 margin:0 0 4px;
}

.student-enrollment-card .muted{
 margin:0 0 8px;
}

.student-enrollment-meta{
 margin:0 0 7px;
 color:var(--muted);
 font-size:.9rem;
}

.student-module{
 border-top:1px dashed var(--border);
 margin-top:12px;
 padding-top:10px;
}

.student-module h5{
 margin:0 0 8px;
 font-size:.95rem;
}

.student-lesson-list{
 list-style:none;
 padding:0;
 margin:0;
 display:grid;
 gap:8px;
}

.student-lesson-item{
 display:grid;
 gap:4px;
}

.student-lesson-select{
 width:100%;
 text-align:left;
 display:flex;
 justify-content:space-between;
 gap:12px;
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--card);
 color:var(--fg);
 padding:11px 12px;
 cursor:pointer;
}

.student-lesson-item.is-selected .student-lesson-select{
 border-color:var(--primary);
 box-shadow:0 0 0 3px var(--ring);
}

.student-lesson-select:disabled{
 opacity:.6;
 cursor:not-allowed;
}

.student-lesson-title{
 font-weight:600;
}

.student-lesson-status{
 color:var(--muted);
 font-size:.86rem;
 white-space:nowrap;
}

.student-lesson-lock{
 color:var(--muted);
 font-size:.8rem;
}

.student-lesson-viewer.empty{
 color:var(--muted);
}

.student-lesson-viewer h4{
 margin:0 0 10px;
}

.student-lesson-body{
 margin:12px 0;
 padding:12px;
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 white-space:pre-wrap;
 line-height:1.45;
}

.student-lesson-locked{
 color:#f59e0b;
 font-weight:600;
}

.student-lesson-actions{
 border-top:1px solid var(--border);
 padding:12px 16px 16px;
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}

.student-portal-message{
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:rgba(14,165,233,.1);
 color:var(--fg);
}

.student-portal-message.error{
 background:rgba(239,68,68,.12);
 border-color:rgba(239,68,68,.35);
 color:#fca5a5;
}

.student-portal-message.success{
 background:rgba(16,185,129,.12);
 border-color:rgba(16,185,129,.35);
 color:#6ee7b7;
}

@media (max-width: 1180px){
 .student-app-grid{
  grid-template-columns:1fr;
 }
}

@media (max-width: 920px){
 .student-auth-grid{
  grid-template-columns:1fr;
 }
}

@media (max-width: 680px){
 .student-company-panel .panel-body{
  grid-template-columns:1fr;
 }
 .student-portal-header h1{
  font-size:1.6rem;
 }
 .student-lesson-select{
  flex-direction:column;
  align-items:flex-start;
 }
}

html[data-theme="dark"] .student-enrollment-card{
 background:#121d31;
 border-color:#2a3f5b;
}

html[data-theme="dark"] .student-lesson-select{
 background:#111b2d;
 border-color:#2a3f5b;
}

html[data-theme="dark"] .student-lesson-body{
 background:#111b2d;
 border-color:#2a3f5b;
 color:#dce8fb;
}

html[data-theme="dark"] .student-portal-message{
 background:#13283a;
 border-color:#2e4e6e;
 color:#a7c3e5;
}

/* ===== Serenus UI Refresh (Global) ===== */
:root{
 --font-base:"Manrope","Aptos","Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
 --font-mono:"JetBrains Mono","Cascadia Code","Fira Code",ui-monospace,monospace;
 --accent:#243f84;
 --bg:#0d1726;
 --card:#122235;
 --input-bg:#0e1b2d;
 --fg:#ecf3fb;
 --muted:#9bb0c9;
 --border:rgba(158,180,207,.24);
 --primary:#49c6b5;
 --primary-600:#2f9f92;
 --danger:#dd4d4d;
 --ring:rgba(73,198,181,.28);
 --radius-xs:10px;
 --radius-sm:14px;
 --radius-md:18px;
 --radius-lg:24px;
 --shadow-soft:0 20px 45px rgba(3,10,24,.22);
 --shadow-panel:0 16px 36px rgba(6,16,34,.16);
 --surface-soft:rgba(126,158,194,.1);
 --surface-strong:rgba(12,27,46,.84);
}

html[data-theme="light"]{
 --bg:#f3f7fc;
 --card:#ffffff;
 --input-bg:#ffffff;
 --fg:#1b2e57;
 --muted:#5a708d;
 --border:rgba(20,36,58,.12);
 --accent:#233d85;
 --primary:#46c5b4;
 --primary-600:#34998d;
 --danger:#c83f3f;
 --ring:rgba(70,197,180,.22);
 --surface-soft:#edf4fb;
 --surface-strong:#ffffff;
 --shadow-soft:0 24px 52px rgba(20,36,58,.1);
 --shadow-panel:0 14px 34px rgba(20,36,58,.08);
}

html[data-theme="dark"]{
 --bg:#0d1726;
 --card:#122235;
 --input-bg:#0e1b2d;
 --fg:#ecf3fb;
 --muted:#9bb0c9;
 --border:rgba(158,180,207,.24);
 --accent:#7f9fe2;
 --primary:#52d0bf;
 --primary-600:#36a496;
 --danger:#e15a5a;
 --ring:rgba(82,208,191,.3);
 --surface-soft:rgba(126,158,194,.1);
 --surface-strong:rgba(12,27,46,.84);
}

html,body{
 font-family:var(--font-base);
 color:var(--fg);
}

body{
 background:
  radial-gradient(circle at 88% -20%, rgba(73,198,181,.2) 0%, rgba(73,198,181,0) 50%),
  radial-gradient(circle at -20% 8%, rgba(36,63,132,.18) 0%, rgba(36,63,132,0) 38%),
  var(--bg);
}

a{
 color:inherit;
}

.muted{
 color:var(--muted) !important;
}

.btn{
 border-radius:var(--radius-sm);
 font-weight:700;
 letter-spacing:.01em;
 border:1px solid transparent;
 transition:all .2s ease;
}

.btn:focus-visible{
 outline:none;
 box-shadow:0 0 0 4px var(--ring);
}

.btn-primary{
 background:linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
 color:#f4fffd;
 box-shadow:0 8px 24px rgba(12,119,109,.28);
}

.btn-primary:hover{
 transform:translateY(-1px);
 filter:brightness(1.02);
}

.btn-secondary,
.btn-ghost{
 background:var(--surface-soft);
 color:var(--fg);
 border-color:var(--border);
}

.btn-secondary:hover,
.btn-ghost:hover{
 background:rgba(73,198,181,.16);
 border-color:rgba(73,198,181,.32);
}

input,select,textarea{
 font-family:var(--font-base);
}

input:focus,select:focus,textarea:focus{
 outline:none;
 border-color:var(--primary) !important;
 box-shadow:0 0 0 4px var(--ring) !important;
}

.error{
 color:#fda4af;
}

/* ===== Login ===== */
body.auth-page{
 min-height:100vh;
}

.auth-wrap{
 padding:56px 20px;
}

.auth-wrap .card{
 width:min(480px,100%);
 padding:34px 34px 28px;
 border-radius:var(--radius-lg);
 background:var(--surface-strong);
 border:1px solid var(--border);
 box-shadow:var(--shadow-soft);
}

.brand-col{
 display:grid;
 gap:8px;
}

.brand-logo-wordmark{
 width:min(320px,100%);
 height:auto;
}

.brand-title{
 font-size:1.74rem;
 line-height:1.1;
 letter-spacing:.01em;
}

.brand-tagline{
 font-size:.97rem;
 color:var(--muted);
}

.auth-shortcuts{
 display:grid;
 gap:10px;
 margin-top:12px;
}

.auth-guide{
 margin-top:14px;
 padding:14px 16px;
 border-radius:var(--radius-sm);
 border:1px solid var(--border);
 background:var(--surface-soft);
}

.auth-guide h2{
 margin:0 0 8px;
 font-size:.92rem;
 text-transform:uppercase;
 letter-spacing:.06em;
 color:var(--muted);
}

.auth-guide ol{
 margin:0;
 padding-left:18px;
 display:grid;
 gap:5px;
 color:var(--muted);
 font-size:.92rem;
}

.auth-wrap .legal{
 margin-top:16px;
 padding-top:12px;
 border-top:1px solid var(--border);
 color:var(--muted);
}

/* ===== Dashboard Shell ===== */
body.layout{
 min-height:100vh;
 display:grid;
 grid-template-columns:280px minmax(0,1fr);
 background:none;
}

.sidebar{
 position:sticky;
 top:0;
 height:100vh;
 background:var(--surface-strong);
 border-right:1px solid var(--border);
 box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
 padding:24px 14px 16px;
}

.sidebar-brand{
 margin-bottom:18px;
 padding:6px 8px 14px;
 border-bottom:1px solid var(--border);
 display:grid;
 gap:8px;
 justify-items:start;
}

.sidebar-logo{
 width:42px;
 height:42px;
 border-radius:11px;
 box-shadow:0 8px 20px rgba(15,152,140,.25);
}

.sidebar-logo-wordmark{
 width:min(188px,100%);
 height:auto;
 border-radius:12px;
 object-fit:contain;
 box-shadow:0 8px 24px rgba(20,36,58,.15);
 background:#ffffff;
 border:1px solid rgba(36,63,132,.14);
 padding:8px 10px;
}

.sidebar-brand-copy{
 padding-left:2px;
}

.sidebar-title{
 margin:0;
 font-size:1.74rem;
 font-weight:800;
 letter-spacing:.01em;
 color:var(--primary);
}

.sidebar-sub{
 margin-top:2px;
 font-size:.86rem;
 color:var(--muted);
}

.sidebar-nav{
 gap:6px;
}

.nav-label{
 margin:6px 8px 10px;
 font-size:.81rem;
 text-transform:uppercase;
 letter-spacing:.08em;
 color:var(--muted);
}

.nav-link{
 position:relative;
 display:flex;
 align-items:center;
 gap:10px;
 padding:12px 14px 12px 38px;
 border-radius:12px;
 color:var(--fg);
 font-weight:620;
 letter-spacing:.008em;
}

.nav-link::before{
 left:13px;
 color:var(--muted);
 opacity:.95;
}

.nav-link:hover{
 background:rgba(20,150,139,.12);
 color:var(--fg);
}

.nav-link.active{
 background:rgba(20,150,139,.17);
 color:var(--fg);
 box-shadow:inset 0 0 0 1px rgba(20,150,139,.22);
}

.nav-link.active::before{
 color:var(--primary);
}

.sidebar-footer{
 margin-top:auto;
 padding:12px 10px 6px;
 color:var(--muted);
 border-top:1px solid var(--border);
}

.main{
 min-width:0;
}

.topbar{
 position:sticky;
 top:0;
 z-index:20;
 min-height:86px;
 padding:14px 24px;
 border-bottom:1px solid var(--border);
 background:var(--surface-strong);
 backdrop-filter:blur(8px);
}

.topbar-left{
 gap:14px;
 min-width:0;
}

.sidebar-toggle{
 border:1px solid var(--border);
 background:var(--surface-soft);
 border-radius:11px;
 width:42px;
 height:42px;
}

.topbar-quick-actions{
 gap:8px;
}

.topbar-icon-btn{
 width:38px;
 height:38px;
 border-radius:11px;
 border:1px solid var(--border);
 background:var(--surface-soft);
 color:var(--muted);
 font-size:1rem;
}

.topbar-icon-btn:hover{
 background:rgba(20,150,139,.16);
 color:var(--fg);
}

.company-switcher{
 min-width:260px;
 min-height:46px;
 border:1px solid rgba(20,150,139,.28);
 background:rgba(20,150,139,.1);
 color:var(--primary);
 font-weight:700;
 border-radius:14px;
}

.company-switcher-caret{
 border-top-color:var(--primary);
}

.topbar-heading{
 min-width:0;
}

.topbar-title{
 margin:0;
 font-size:1.22rem;
 letter-spacing:.01em;
 color:var(--accent);
}

.topbar-sub{
 margin-top:2px;
 color:var(--muted);
 font-size:.88rem;
}

.topbar-user{
 gap:12px;
}

.topbar-user .user-meta strong{
 font-size:1.08rem;
}

.topbar-user .user-meta .muted{
 font-size:.86rem;
 color:var(--muted);
}

.content{
 padding:24px;
 max-width:1600px;
 width:100%;
}

.view{
 animation:fadeInView .24s ease;
}

.view[hidden]{
 display:none !important;
}

@keyframes fadeInView{
 from{opacity:.5; transform:translateY(4px);}
 to{opacity:1; transform:translateY(0);}
}

.panel,
.kpi-card,
.responsive-table{
 border:1px solid var(--border);
 border-radius:var(--radius-md);
 background:var(--card);
 box-shadow:var(--shadow-panel);
}

.panel{
 overflow:hidden;
}

.panel > header{
 padding:20px 24px;
 border-bottom:1px solid var(--border);
}

.panel > header h3{
 margin:0;
 font-size:1.56rem;
 line-height:1.1;
 letter-spacing:.01em;
 color:var(--accent);
}

.panel-body{
 padding:20px 24px;
}

.panel-header-actions{
 gap:16px;
}

.panel-actions{
 gap:10px;
}

.panel-actions input[type="search"],
.panel-actions input[type="text"],
.panel-actions select,
.grid-form input,
.grid-form select,
.grid-form textarea{
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--input-bg);
 color:var(--fg);
 min-height:44px;
}

.grid-form textarea{
 min-height:108px;
}

.grid-form label{
 font-weight:600;
 color:var(--muted);
}

.form-subsection{
 border:1px solid var(--border);
 border-radius:14px;
 background:var(--surface-soft);
 padding:14px 16px;
}

.form-subsection header h4{
 margin:0 0 3px;
 font-size:1.15rem;
}

.kpi-grid{
 gap:14px;
}

.kpi-card{
 padding:18px 18px 16px;
}

.kpi-card header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:10px;
}

.kpi-card h3{
 margin:0;
 font-size:1.04rem;
}

.kpi-value{
 font-size:2rem;
 line-height:1;
 margin:8px 0 6px;
}

.badge,
.chip{
 border-radius:999px;
 padding:5px 12px;
 border:1px solid rgba(20,150,139,.35);
 background:rgba(20,150,139,.12);
 color:var(--primary);
 font-weight:700;
 font-size:.79rem;
}

.responsive-table{
 overflow:auto;
}

.responsive-table table{
 width:100%;
 border-collapse:collapse;
}

.responsive-table th,
.responsive-table td{
 border-bottom:1px solid var(--border);
 padding:14px 12px;
 text-align:left;
}

.responsive-table th{
 font-size:.86rem;
 letter-spacing:.03em;
 color:var(--muted);
 text-transform:uppercase;
}

.responsive-table td{
 font-weight:520;
}

.responsive-table tbody tr:hover{
 background:rgba(20,150,139,.07);
}

.table-actions{
 white-space:nowrap;
}

.table-actions .btn,
.table-actions button{
 min-height:36px;
 padding:8px 12px;
 border-radius:10px;
}

pre.integration-code-block{
 margin:0;
 padding:14px;
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--input-bg);
 color:var(--fg);
 font-family:var(--font-mono);
 font-size:.83rem;
 overflow:auto;
}

.integration-doc-block h4{
 margin:0 0 8px;
 font-size:1rem;
}

.integration-token-inline{
 display:grid;
 grid-template-columns:1fr auto;
 gap:10px;
}

.integration-token-inline input{
 min-height:42px;
}

.company-logo-upload-row{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:10px;
 margin-top:10px;
 align-items:center;
}
.appointment-meeting-field{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:10px;
 align-items:center;
}

.company-logo-upload-row input[type="file"]{
 min-height:44px;
 padding:8px 10px;
 border-radius:12px;
 border:1px dashed var(--border);
 background:var(--input-bg);
 color:var(--fg);
}

.company-logo-upload-row .btn{
 min-height:44px;
}

.modal{
 padding:14px;
}

.modal-backdrop{
 background:rgba(7,16,30,.58);
}

.modal-card{
 border-radius:18px;
 border:1px solid var(--border);
 background:var(--surface-strong);
 box-shadow:0 28px 56px rgba(3,10,24,.33);
}

.modal-header{
 border-bottom:1px solid var(--border);
 padding-bottom:12px;
}

.modal-header h2{
 font-size:1.55rem;
}

/* ===== Public Store ===== */
body.public-store-page{
 min-height:100vh;
}

.public-store{
 width:min(1320px,96vw);
 margin:30px auto;
 display:grid;
 gap:16px;
}

.public-store-header{
 border:1px solid var(--border);
 border-radius:var(--radius-md);
 padding:16px 18px;
 background:var(--surface-strong);
 box-shadow:var(--shadow-panel);
}

.public-checkout-brand{
 display:flex;
 align-items:center;
 gap:14px;
}

.public-checkout-logo-image{
 width:min(220px,40vw);
 height:auto;
 object-fit:contain;
 background:#ffffff;
 border:1px solid rgba(36,63,132,.12);
 border-radius:12px;
 padding:8px 10px;
 box-shadow:0 8px 24px rgba(20,36,58,.1);
}

.public-store-header h1{
 margin:0;
 font-size:1.7rem;
 color:var(--accent);
}

.public-store-eyebrow{
 margin:0 0 3px;
 text-transform:uppercase;
 letter-spacing:.08em;
 font-size:.8rem;
 color:var(--muted);
}

.public-store-header-actions{
 display:flex;
 align-items:center;
 gap:10px;
}

.public-store-intro,
.public-store-toolbar,
.public-store-list-panel,
.public-store-detail-panel{
 border-radius:var(--radius-md);
}

.public-store-intro .panel-body,
.public-store-intro-body{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
}

.public-store-intro p{
 margin:0;
 font-size:.92rem;
 color:var(--muted);
}

.public-store-toolbar .panel-body{
 padding-top:16px;
 padding-bottom:16px;
}

.public-store-toolbar-body{
 display:grid;
 grid-template-columns:160px minmax(200px,1fr) auto 130px minmax(180px,1fr);
 align-items:end;
 gap:10px;
}

.public-store-label{
 font-weight:700;
 color:var(--muted);
 font-size:.85rem;
 margin:0 0 2px;
}

.public-store-grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
 gap:16px;
 align-items:start;
}

.public-store-list{
 display:grid;
 gap:10px;
}

.public-store-product-card{
 border:1px solid var(--border);
 border-radius:14px;
 background:var(--surface-soft);
 padding:14px;
 text-align:left;
 color:var(--fg);
 cursor:pointer;
}

.public-store-product-card h4{
 margin:0 0 6px;
 font-size:1.03rem;
}

.public-store-product-card p{
 margin:0;
 color:var(--muted);
}

.public-store-product-card .product-type{
 margin-top:9px;
 display:inline-flex;
}

.public-store-product-card:hover{
 border-color:rgba(20,150,139,.3);
}

.public-store-product-card.is-selected{
 background:rgba(20,150,139,.14);
 border-color:rgba(20,150,139,.44);
 box-shadow:inset 0 0 0 1px rgba(20,150,139,.18);
}

.public-store-detail{
 border:1px dashed var(--border);
 border-radius:14px;
 padding:16px;
 background:var(--surface-soft);
}

.public-store-result{
 margin-top:16px;
 padding:16px;
 border-radius:14px;
 border:1px solid rgba(20,150,139,.34);
 background:rgba(20,150,139,.12);
}

.public-store-result h4{
 margin:0 0 8px;
}

.public-store-message{
 border-radius:14px;
 border:1px solid rgba(20,150,139,.32);
 background:rgba(20,150,139,.12);
 color:var(--fg);
 padding:12px 14px;
}

.public-store-message.error{
 border-color:rgba(221,77,77,.4);
 background:rgba(221,77,77,.14);
 color:#fbc0c0;
}

.public-store-success{
 margin:8px 0 0;
 color:var(--primary);
 font-weight:700;
}

/* ===== Student Portal ===== */
body.student-portal-page{
 min-height:100vh;
}

.student-portal{
 width:min(1360px,96vw);
 margin:28px auto;
 display:grid;
 gap:16px;
}

.student-portal-header{
 border:1px solid var(--border);
 border-radius:var(--radius-md);
 background:var(--surface-strong);
 box-shadow:var(--shadow-panel);
 padding:18px 22px;
 display:flex;
 justify-content:space-between;
 gap:16px;
 align-items:flex-start;
}

.student-portal-eyebrow{
 margin:0 0 2px;
 color:var(--muted);
 font-size:.84rem;
 text-transform:uppercase;
 letter-spacing:.08em;
}

.student-portal-header h1{
 margin:0;
 font-size:2rem;
 line-height:1.08;
 color:var(--accent);
}

.student-brand-logo{
 width:min(220px,48vw);
 height:auto;
 display:block;
 object-fit:contain;
 margin:0 0 8px;
 background:#ffffff;
 border:1px solid rgba(36,63,132,.12);
 border-radius:12px;
 padding:8px 10px;
 box-shadow:0 8px 24px rgba(20,36,58,.1);
}

.student-portal-header-actions{
 display:flex;
 align-items:center;
 gap:10px;
}

.student-quickstart .panel-body,
.student-quickstart-body{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
}

.student-quickstart p{
 margin:0;
 color:var(--muted);
 font-size:.92rem;
}

.student-company-panel .panel-body{
 display:grid;
 grid-template-columns:190px minmax(220px,1fr) auto;
 align-items:end;
 gap:10px;
}

.student-company-panel .student-portal-label{
 color:var(--muted);
 font-weight:700;
 font-size:.85rem;
 margin:0 0 2px;
}

.student-auth-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:16px;
}

.student-auth-card,
.student-profile-card,
.student-library-card,
.student-lesson-card{
 border-radius:var(--radius-md);
}

.student-app-grid{
 display:grid;
 grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr) minmax(0,1.1fr);
 gap:16px;
 align-items:start;
}

.student-profile-list{
 gap:10px;
}

.student-profile-list dt{
 color:var(--muted);
 font-size:.76rem;
 text-transform:uppercase;
 letter-spacing:.07em;
}

.student-profile-list dd{
 font-weight:700;
}

.student-profile-actions{
 gap:8px;
}

.student-library-list{
 display:grid;
 gap:10px;
}

.student-enrollment-card{
 border:1px solid var(--border);
 border-radius:14px;
 background:var(--surface-soft);
}

.student-enrollment-card header h4{
 font-size:1.06rem;
}

.student-module{
 border-top:1px solid var(--border);
}

.student-lesson-select{
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--input-bg);
 min-height:50px;
}

.student-lesson-item.is-selected .student-lesson-select{
 border-color:rgba(20,150,139,.45);
 background:rgba(20,150,139,.12);
}

.student-lesson-title{
 font-weight:700;
}

.student-lesson-status{
 color:var(--muted);
}

.student-lesson-body{
 border-radius:12px;
 border:1px solid var(--border);
 background:var(--surface-soft);
}

.student-lesson-actions{
 border-top:1px solid var(--border);
 padding:14px 16px 16px;
}

.student-portal-message{
 border-radius:14px;
 border:1px solid rgba(20,150,139,.3);
 background:rgba(20,150,139,.12);
 color:var(--fg);
}

.student-portal-message.error{
 border-color:rgba(221,77,77,.4);
 background:rgba(221,77,77,.14);
 color:#ffc9c9;
}

.student-portal-message.success{
 border-color:rgba(16,185,129,.4);
 background:rgba(16,185,129,.14);
 color:#8ff4c4;
}

.products-public-link-inline{
 margin-bottom:10px;
}

.products-public-link-actions{
 display:flex;
 gap:10px;
 align-items:center;
 justify-content:flex-end;
}

.products-public-link-actions .btn{
 min-height:42px;
}

/* ===== Responsive ===== */
@media (max-width: 1240px){
 .content{
  padding:18px;
 }
 .public-store-intro .panel-body,
 .public-store-intro-body,
 .student-quickstart .panel-body,
 .student-quickstart-body{
  grid-template-columns:1fr;
 }
 .public-store-toolbar-body{
  grid-template-columns:1fr 1fr;
 }
 .student-app-grid{
  grid-template-columns:1fr;
 }
}

@media (max-width: 1024px){
 body.layout{
  display:block;
 }
 .sidebar{
  position:fixed;
  top:0;
  left:0;
  z-index:30;
  width:min(280px,86vw);
  transform:translateX(-104%);
  transition:transform .24s ease;
  box-shadow:0 26px 52px rgba(3,10,24,.42);
 }
 .sidebar[data-open="true"]{
  transform:translateX(0);
 }
 .sidebar-overlay:not([hidden]){
  position:fixed;
  inset:0;
  z-index:24;
  background:rgba(6,16,30,.52);
 }
 .topbar{
  position:sticky;
  top:0;
  z-index:18;
  padding:12px 14px;
 }
 .company-switcher{
  min-width:0;
  width:100%;
 }
 .topbar-left{
  width:100%;
  flex-wrap:wrap;
 }
 .topbar-user .user-meta{
  display:none;
 }
 .panel > header h3{
  font-size:1.52rem;
 }
 .public-store-grid{
  grid-template-columns:1fr;
 }
}

@media (max-width: 780px){
 .auth-wrap{
  padding:20px 12px;
 }
 .auth-wrap .card{
  padding:24px 18px 18px;
 }
 .topbar-quick-actions{
  display:none;
 }
 .topbar{
  min-height:70px;
 }
 .topbar-title{
  font-size:1.05rem;
 }
 .content{
  padding:12px;
 }
 .panel > header,
 .panel-body{
  padding:14px;
 }
 .panel-actions{
  width:100%;
  flex-wrap:wrap;
 }
 .panel-actions > *{
  width:100%;
 }
 .public-store{
  margin:14px auto;
 }
 .public-store-header,
 .student-portal-header{
  padding:14px;
 }
 .public-store-header{
  display:grid;
  gap:12px;
 }
 .public-store-header-actions{
  flex-wrap:wrap;
 }
 .public-store-toolbar-body{
  grid-template-columns:1fr;
 }
 .student-portal-header{
  display:grid;
 }
 .student-company-panel .panel-body{
  grid-template-columns:1fr;
 }
 .student-auth-grid{
  grid-template-columns:1fr;
 }
 .integration-token-inline{
  grid-template-columns:1fr;
 }
 .company-logo-upload-row{
  grid-template-columns:1fr;
 }
 .products-public-link-actions{
  width:100%;
  justify-content:stretch;
  flex-wrap:wrap;
 }
 .products-public-link-actions .btn{
  width:100%;
 }
}