/* ── Tokens ── */
:root,[data-theme="light"]{--text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);--text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);--text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);--text-xl:clamp(1.4rem,1.1rem + 1vw,1.9rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;--color-surface-offset:#edeae5;--color-border:#d4d1ca;--color-divider:#dcd9d5;--color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;--color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-highlight:#cedcd8;--color-success:#437a22;--color-success-soft:#d4dfcc;--color-warning:#964219;--color-warning-soft:#ead8cf;--color-error:#a12c7b;--color-error-soft:#e9d7e2;--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:.9rem;--radius-xl:1.25rem;--radius-full:999px;--shadow-sm:0 1px 2px rgba(26,24,20,0.06);--shadow-md:0 8px 24px rgba(26,24,20,0.08);--font-display:'Boska',Georgia,serif;--font-body:'Satoshi',Inter,sans-serif;--transition:180ms cubic-bezier(0.16,1,0.3,1);}
[data-theme="dark"]{--color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;--color-surface-offset:#2a2926;--color-border:#393836;--color-divider:#2a2927;--color-text:#cdccca;--color-text-muted:#979692;--color-text-faint:#6f6d69;--color-primary:#4f98a3;--color-primary-hover:#67abb4;--color-primary-highlight:#2d3b3d;--color-success:#83b564;--color-success-soft:#2d3b28;--color-warning:#d18f63;--color-warning-soft:#3c2d25;--color-error:#d87ab0;--color-error-soft:#3c2a35;--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 10px 28px rgba(0,0,0,0.4);}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;--color-surface-offset:#2a2926;--color-border:#393836;--color-divider:#2a2927;--color-text:#cdccca;--color-text-muted:#979692;--color-text-faint:#6f6d69;--color-primary:#4f98a3;--color-primary-hover:#67abb4;--color-primary-highlight:#2d3b3d;--color-success:#83b564;--color-success-soft:#2d3b28;--color-warning:#d18f63;--color-warning-soft:#3c2d25;--color-error:#d87ab0;--color-error-soft:#3c2a35;--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 10px 28px rgba(0,0,0,0.4);}}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;line-height:1.55;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:radial-gradient(circle at top left,color-mix(in srgb,var(--color-primary) 7%,transparent),transparent 30%),var(--color-bg)}
img,picture{display:block;max-width:100%;height:auto}
input,button,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15}
p{text-wrap:pretty;max-width:72ch}
button{cursor:pointer;background:none;border:none}
a{color:var(--color-primary);text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.82em;background:color-mix(in srgb,var(--color-text) 6%,transparent);padding:.15rem .4rem;border-radius:.4rem}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,[role="button"],input,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}

/* ── Layout ── */
.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:var(--space-6);background:color-mix(in srgb,var(--color-surface) 90%,transparent);backdrop-filter:blur(14px);border-right:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);display:flex;flex-direction:column;gap:var(--space-5);overflow-y:auto}
.main{min-width:0;padding:var(--space-6);display:grid;gap:var(--space-6);align-content:start}
.detail-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.detail-meta{margin-top:.75rem}

/* ── Brand ── */
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 60%,black));color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md);flex-shrink:0}
.brand-text strong{display:block;font-family:var(--font-display);font-size:1.4rem;line-height:1;font-weight:700}
.brand-text span{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ── Nav ── */
nav{display:grid;gap:var(--space-2)}
.nav-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:700;margin-bottom:.2rem}
.nav-btn{display:block;width:100%;text-align:left;padding:.85rem 1rem;border-radius:var(--radius-lg);border:1px solid transparent;background:transparent;color:var(--color-text);transition:all var(--transition)}
.nav-btn.active{background:var(--color-primary-highlight);border-color:color-mix(in srgb,var(--color-primary) 25%,transparent)}
.nav-title{display:block;font-size:var(--text-sm);font-weight:700}
.nav-meta{display:block;color:var(--color-text-muted);font-size:var(--text-xs);margin-top:.15rem}
.sidebar-footer{margin-top:auto;display:grid;gap:var(--space-3)}
.user-pill{display:flex;align-items:center;gap:var(--space-2);padding:.6rem .8rem;border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);font-size:var(--text-sm);font-weight:700}

/* ── Topbar ── */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.headline h1{margin:0;font-size:var(--text-xl);letter-spacing:-.02em;font-weight:700}
.headline p{margin:.45rem 0 0;color:var(--color-text-muted);font-size:var(--text-sm)}
.topbar-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ── Cards ── */
.panel{background:color-mix(in srgb,var(--color-surface) 92%,transparent);border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:var(--space-5)}
.course-card{padding:var(--space-5);display:grid;gap:var(--space-4)}
.course-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.course-header h3{margin:0;font-size:1.2rem}
.course-meta{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:.3rem}
.admin-panel{padding:var(--space-5);display:grid;gap:var(--space-4)}
.admin-panel h3{font-size:var(--text-lg)}

/* ── Badges ── */
.status-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.status-dot{width:.5rem;height:.5rem;border-radius:999px;background:currentColor}
.status-active{background:var(--color-success-soft);color:var(--color-success)}
.status-paused{background:var(--color-warning-soft);color:var(--color-warning)}
.status-dev{background:var(--color-error-soft);color:var(--color-error)}

/* ── Summary card ── */
.summary-card{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
.summary-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:700}
.summary-main{font-size:1.05rem;font-weight:700}
.summary-sub{color:var(--color-text-muted);font-size:var(--text-sm)}
.section-title{font-size:1rem;margin-bottom:.8rem}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.link-sm{font-size:var(--text-sm);color:var(--color-primary)}

/* ── Controls ── */
.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.control{padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);display:grid;gap:var(--space-3)}
.control label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:700}
.control-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:700}
.control-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.toggle-label{font-size:.95rem;font-weight:700}
.switch{position:relative;width:52px;height:28px;min-width:52px;border-radius:999px;background:color-mix(in srgb,var(--color-text) 18%,transparent);transition:background var(--transition);border:0;cursor:pointer}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:999px;background:white;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform var(--transition)}
.switch.on{background:var(--color-primary)}
.switch.on::after{transform:translateX(24px)}
.time-control,.target-time-control,.booking-days-control{display:grid;gap:var(--space-2)}
.time-input,.time-input.native-time{width:100%;min-height:48px;border-radius:var(--radius-lg);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface);color:var(--color-text);padding:.9rem 1rem;font-size:16px;appearance:none;-webkit-appearance:none}
.time-input:focus,.time-input.native-time:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.time-input.native-time::-webkit-date-and-time-value{text-align:left}
.time-input.native-time::-webkit-calendar-picker-indicator{opacity:.72;cursor:pointer}
.time-display,.booking-days-help{font-size:.9rem;color:var(--color-text-muted)}
.save-time-btn{width:100%;justify-content:center;min-height:44px}
.days-mode-group{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;border:0}
.days-mode-option{position:relative}
.days-mode-option input{position:absolute;opacity:0;pointer-events:none}
.days-mode-option span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.625rem .95rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);background:var(--color-surface);color:var(--color-text-muted);font-size:.95rem;font-weight:600;cursor:pointer}
.days-mode-option input:checked + span{background:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface));border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);color:var(--color-primary)}
.days-mode-option input:focus-visible + span{outline:2px solid var(--color-primary);outline-offset:3px}
.booking-pref-link{padding:0;text-transform:none;letter-spacing:0;font-weight:600;white-space:nowrap}

/* ── Modal ── */
.modal-shell{position:fixed;inset:0;display:grid;place-items:center;padding:var(--space-4);z-index:40}
.modal-backdrop{position:absolute;inset:0;background:rgba(16,15,13,.55);backdrop-filter:blur(4px)}
.modal-card{position:relative;z-index:1;width:min(100%,540px);padding:var(--space-5);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);box-shadow:var(--shadow-md);display:grid;gap:var(--space-4)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.modal-header h3{font-size:1.1rem}
.modal-body{display:grid;gap:var(--space-4)}
.modal-block{display:grid;gap:var(--space-2)}
.modal-block strong{font-size:var(--text-sm)}
.modal-block p{margin:0;color:var(--color-text-muted);font-size:var(--text-sm)}

/* ── Run log ── */
.runs{display:grid;gap:.65rem}
.run-item{display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);align-items:start;padding:.75rem .9rem;border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid color-mix(in srgb,var(--color-text) 7%,transparent)}
.run-icon{width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;font-size:.85rem;font-weight:700;flex-shrink:0}
.run-copy span{color:var(--color-text-muted);font-size:var(--text-sm)}
.run-copy strong{display:block;font-size:var(--text-sm)}
.run-success{background:var(--color-success-soft);color:var(--color-success)}
.run-warning{background:var(--color-warning-soft);color:var(--color-warning)}
.run-error{background:var(--color-error-soft);color:var(--color-error)}
.run-neutral{background:var(--color-primary-highlight);color:var(--color-primary)}
.run-info{background:var(--color-surface-offset);color:var(--color-text-muted)}

/* ── Log block ── */
.log-block{background:#121210;color:#dddbd6;border-radius:var(--radius-lg);padding:var(--space-4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.65;overflow:auto;max-height:480px;white-space:pre-wrap}
.log-line{display:block}
.log-line.log-success{color:#8bc868}
.log-line.log-warning{color:#e5a86c}
.log-line.log-error{color:#e07ba0}
.log-line.log-neutral{color:#7bbbc4}

/* ── Buttons ── */
.primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.25rem;border-radius:var(--radius-full);background:var(--color-primary);border:1px solid var(--color-primary);color:#fff;font-weight:700;font-size:var(--text-sm)}
.primary-btn.full-width{width:100%}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.1rem;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm);text-align:center}
.ghost-btn-sm{padding:.45rem .8rem;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-xs);font-weight:700;cursor:pointer}
.chip-btn{display:inline-flex;align-items:center;padding:.65rem 1rem;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm);font-weight:700}
.theme-toggle{width:100%;padding:.75rem 1rem;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;text-align:center}
.hidden{display:none!important}

/* ── Table ── */
.table-wrap{overflow:auto;border-radius:var(--radius-lg);border:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);vertical-align:top}
th{background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:var(--text-xs)}

/* ── Login ── */
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:var(--space-6)}
.login-card{width:100%;max-width:400px;padding:var(--space-8);background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);display:grid;gap:var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-1)}
.login-card form{display:grid;gap:var(--space-4);margin-top:var(--space-1)}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em}
.field input{padding:.85rem 1rem;border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);background:var(--color-surface-2);color:var(--color-text);margin:0}
.primary-btn.full-width{width:100%;margin-top:var(--space-1)}

/* ── Alerts ── */
.alert{padding:.85rem 1.1rem;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:700}
.alert-error{background:var(--color-error-soft);color:var(--color-error)}
.alert-success{background:var(--color-success-soft);color:var(--color-success)}

/* ── Empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted)}
.empty-icon{font-size:3rem;margin-bottom:var(--space-4)}
.empty-state h3{color:var(--color-text);margin-bottom:var(--space-2)}
.muted{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ── Back link ── */
.back-link{color:var(--color-text-muted);font-size:var(--text-sm);display:inline-block;margin-bottom:.5rem}
button.back-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;display:inline-block;margin-bottom:.5rem}
button.link-sm{background:none;border:none;padding:0;cursor:pointer;font:inherit}
button.ghost-btn, button.back-link, button.link-sm{appearance:none;-webkit-appearance:none;background:none;border:none;cursor:pointer;font:inherit;text-align:left;}

/* ── Responsive ── */
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--color-text) 10%,transparent)}}
@media(max-width:600px){
  .main{padding:var(--space-4)}
  .sidebar{padding:var(--space-4)}
  .control-grid{grid-template-columns:1fr}
  .course-grid{grid-template-columns:1fr}
  .topbar{align-items:flex-start}
  .course-card,.admin-panel,.control{padding:var(--space-4)}
  .section-title-row{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .save-time-btn{width:100%}
}
@media (min-width:768px){
  .time-control{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .save-time-btn{width:auto;min-width:88px}
}
@media (min-width:900px){
  .detail-grid{grid-template-columns:1fr 1fr;align-items:start}
}

/* Touch-first interaction states */
.nav-btn:active{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface));border-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}
.primary-btn:active{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}
.ghost-btn:active,.ghost-btn-sm:active,.chip-btn:active,.theme-toggle:active{background:var(--color-surface-offset)}
.back-link:active,a:active,.link-sm:active{color:var(--color-primary-hover)}

@media (hover: hover) and (pointer: fine) {
  a:hover{color:var(--color-primary-hover)}
  .nav-btn:hover{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface));border-color:color-mix(in srgb,var(--color-primary) 20%,transparent);transform:translateY(-1px)}
  .primary-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;transform:translateY(-1px)}
  .ghost-btn:hover{background:var(--color-surface-offset);transform:translateY(-1px)}
  .ghost-btn-sm:hover{background:var(--color-surface-offset)}
  .chip-btn:hover{background:var(--color-surface-offset);color:var(--color-text)}
  .theme-toggle:hover{background:var(--color-surface-offset)}
  .back-link:hover{color:var(--color-primary)}
}