:root{--ink:#17343e;--ink2:#49636b;--muted:#758992;--line:#e1e9eb;--bg:#f5f8f9;--white:#fff;--primary:#146d78;--primary2:#0b515d;--teal-light:#e8f4f2;--yellow:#ffeecb;--shadow:0 8px 34px rgba(19,53,63,.065);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:var(--primary)}:focus-visible{outline:3px solid #79d1cf;outline-offset:2px}#app{min-height:100vh}.layout{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}.sidebar{background:#103a49;color:#d6e5e7;padding:29px 19px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 22px;border-bottom:1px solid #315a66}.brand-logo{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#e9f7ef;color:#10515b;font-weight:900;font-size:25px}.brand-name{color:#fff;font-weight:800;font-size:19px;letter-spacing:-.65px}.brand-sub{font-size:11px;opacity:.75;margin-top:3px}.sidenav{display:flex;flex-direction:column;gap:5px}.navbtn{border:0;background:none;color:#c5d8de;text-align:left;width:100%;padding:13px 14px;border-radius:10px;display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600}.navbtn:hover{background:#25505c}.navbtn.active{background:#286574;color:#fff}.nav-ico{font-size:18px;width:21px;text-align:center}.sidebar-spacer{flex:1}.sidebar-note{border:1px solid #416771;border-radius:13px;padding:13px;font-size:12px;line-height:1.55;color:#c8d9de}.sidebar-note strong{color:white}.side-foot{color:#8fb0b8;font-size:11px;padding:0 9px}.main{min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px clamp(24px,4.2vw,64px);min-height:76px}.crumb{color:#758891;font-size:13px}.top-right{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.userbadge{width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#d4edeb;color:#12606a;font-weight:800;font-size:13px}.text-mini{font-size:11px;color:var(--muted)}.user-name{font-weight:700;font-size:13px}.switch{max-width:240px;border:1px solid #d6e1e5;background:#f6fbfb;padding:9px 28px 9px 10px;border-radius:9px;font-size:12px;color:var(--ink);font-weight:600}.contents{max-width:1350px;margin:auto;padding:35px clamp(24px,4.2vw,64px) 64px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#187c84;font-weight:800;margin-bottom:9px}.page-title{font-size:clamp(26px,3vw,36px);margin:0;font-weight:800;letter-spacing:-1.1px;line-height:1.17}.page-desc{color:#728790;font-size:14px;margin-top:11px;line-height:1.6}.headingrow{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:24px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);border:1px solid var(--primary);color:#fff;font-weight:750;border-radius:10px;padding:11px 15px;font-size:13px;text-decoration:none}.button:hover{background:#0d5763}.button.secondary{background:#fff;color:var(--primary);border-color:#cfdee2}.button.secondary:hover{background:#ecf7f7}.button.ghost{background:transparent;border-color:transparent;color:var(--primary)}.button.warn{background:#fff8ea;color:#765522;border-color:#f8daa1}.button.sm{font-size:12px;padding:8px 11px}.button:disabled{opacity:.55}.card{background:white;border:1px solid #e0e9ec;border-radius:16px;box-shadow:var(--shadow)}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:27px}.kpi{padding:22px 23px;min-height:140px}.kpi-label{font-size:12px;color:#76909a;font-weight:700}.kpi-value{font-size:36px;font-weight:800;letter-spacing:-1px;margin-top:13px}.kpi-hint{font-size:11px;color:#8ca0a5;margin-top:4px}.kpi-ico{float:right;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#edf5f6;font-size:18px}.columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:19px;align-items:start}.panel-head{padding:23px 24px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-title{font-size:16px;font-weight:800;letter-spacing:-.3px}.panel-sub{font-size:12px;color:#82949d;margin-top:5px}.item-list{padding:0 12px 10px}.item{display:flex;align-items:center;gap:12px;padding:16px 12px;border-top:1px solid #edf1f3}.item-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf3f4;flex-shrink:0;font-size:20px}.item-main{min-width:0;flex:1}.item-title{font-size:13px;font-weight:750;line-height:1.5}.item-sub{font-size:12px;color:#84969e;line-height:1.5;margin-top:2px}.clickitem{border:0;width:100%;background:white;text-align:left}.clickitem:hover{background:#f7fbfb}.tag{display:inline-block;background:#e9f4f0;color:#187365;border-radius:40px;font-size:10px;padding:5px 9px;font-weight:750;white-space:nowrap}.tag.draft{background:#fff2d9;color:#966321}.empty{padding:35px 24px;text-align:center;color:#81949c;font-size:14px}.pill{padding:6px 10px;border-radius:60px;background:#eff5f6;color:#396973;font-size:11px;font-weight:700;white-space:nowrap}.notice{display:flex;gap:11px;border:1px solid #cddfe1;border-radius:13px;background:#eef8f7;padding:15px 17px;color:#34636c;font-size:13px;line-height:1.6;margin-bottom:23px}.notice.warning{border-color:#eedcab;background:#fff9e9;color:#775e30}.notice strong{display:block;color:#164d55}.section-title{font-size:18px;font-weight:800;letter-spacing:-.4px;margin:28px 0 16px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}.course-card{padding:21px;display:flex;flex-direction:column;min-height:195px}.course-code{font-size:11px;font-weight:800;letter-spacing:.8px;color:#1d7d82;text-transform:uppercase}.course-title{font-size:18px;line-height:1.4;font-weight:800;letter-spacing:-.25px;margin:13px 0 8px}.course-description{font-size:12px;color:#83959a;line-height:1.6;flex:1}.course-footer{display:flex;align-items:center;justify-content:space-between;padding-top:17px;margin-top:17px;border-top:1px solid #e9eef0;font-size:12px;color:#718a92}.formlabel{font-size:12px;font-weight:750;display:block;margin:14px 0 7px}.input{border:1px solid #d5e2e5;background:#fff;border-radius:9px;padding:11px 12px;width:100%;font-size:14px;color:var(--ink);outline:none}.input:focus{border-color:#27878f;box-shadow:0 0 0 3px #d6f1ed}.modal-layer{position:fixed;inset:0;background:rgba(7,38,49,.45);display:flex;justify-content:center;align-items:center;padding:20px;z-index:9}.modal{width:min(500px,100%);max-height:90vh;overflow:auto;background:white;border-radius:19px;padding:26px;box-shadow:0 28px 80px rgba(13,34,43,.25)}.modal h2{margin:0;font-size:23px}.modal p{font-size:13px;color:#758991;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.muted{color:#84969c}.flexrow{display:flex;align-items:center;gap:10px}.flexbetween{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:flex;flex-direction:column;gap:11px}.tiny{font-size:11px}.filesize{color:#91a0a5;font-size:11px}.divider{border-top:1px solid #eaf0f2;margin:16px 0}.dropzone{border:2px dashed #bad8d9;border-radius:13px;padding:22px;text-align:center;background:#f8fbfb}.dropzone p{margin:8px 0;color:#769095;font-size:13px}.checkbox-line{display:flex;align-items:center;gap:9px;font-size:13px;padding:10px 8px;border-bottom:1px solid #eef3f3}.checkbox-line input{accent-color:#16717c}.toast{position:fixed;bottom:22px;right:22px;background:#153d49;color:white;border-radius:12px;max-width:440px;padding:14px 19px;box-shadow:0 12px 45px #183f5155;font-size:13px;z-index:20}.inline-error{font-size:12px;color:#a13d24;margin:8px 0}.role-box{padding:17px 18px;background:#f0f7f7;border:1px solid #d6e9e8;border-radius:13px;line-height:1.7;font-size:13px;color:#4f7078}.mobile-note{display:none}.detail-header{display:flex;align-items:center;gap:8px;color:#699098;font-size:12px;margin-bottom:15px}.detail-header button{border:0;background:transparent;color:#167785;font-weight:750}.statusbar{border-bottom:1px solid #eaf0f2;padding:13px 22px;font-size:12px;color:#667e86}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.school-dot{width:9px;height:9px;border-radius:50%;background:#85d2bb;display:inline-block;margin-right:4px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.columns{grid-template-columns:1fr}.sidebar{width:230px}.layout{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:760px){.layout{display:block}.sidebar{height:auto;position:static;padding:13px 16px;display:block}.brand{border:0;padding:5px 0}.brand-logo{width:35px;height:35px;font-size:20px}.brand-sub{display:none}.sidebar-spacer,.sidebar-note,.side-foot{display:none}.sidenav{flex-direction:row;overflow-x:auto;padding-top:12px;gap:5px}.navbtn{min-width:max-content;font-size:12px;padding:9px 10px}.nav-ico{font-size:14px;width:auto}.topbar{padding:12px 18px;gap:8px;flex-wrap:wrap}.top-right{gap:7px}.switch{max-width:175px}.crumb{display:none}.contents{padding:24px 17px 60px}.page-title{font-size:27px}.kpis{gap:10px}.kpi{min-height:115px;padding:15px}.kpi-value{font-size:27px}.course-card{min-height:160px}.mobile-note{display:block}.upload-grid{grid-template-columns:1fr}}
@media(max-width:420px){.user-name{display:none}.userbadge{display:none}.topbar{justify-content:flex-end}.kpi-label{font-size:11px}.kpi-ico{width:25px;height:25px}.kpi-value{font-size:25px}}
/* SALIX Edu v0.3 Erweiterungen */
.boot-splash{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#143a49}.boot-splash strong{font-size:40px;letter-spacing:-1.6px}.boot-splash strong span{color:#198f87}.boot-splash p{font-size:14px;color:#80939d}
.hero-mark{font-weight:900;font-size:30px;letter-spacing:-.9px}.hero-mark span{color:#79e4d4}.text-link{background:transparent;border:0;color:#0c747d;font-weight:750;padding:4px}.alertbox{border:1px solid #f2d8a2;border-radius:10px;background:#fff7e7;color:#74501d;font-size:13px;padding:13px 15px;margin:16px 0;line-height:1.65}.alertbox.good{border-color:#c5e8d7;background:#f1faf5;color:#215b48}.alertbox.error{border-color:#efb9b9;background:#fff3f2;color:#9b3838}.navbtn{white-space:nowrap}.sidebar{overflow-y:auto}.sidebar-note{line-height:1.65}.nav-sub{font-size:12px;color:#a1c9cf}.top-right{margin-left:auto}.crumb{line-height:1.45}.item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.course-detail-panel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:18px}.profile-chip{font-size:12px;padding:7px 10px;background:#ebf6f4;border-radius:8px;color:#286c68;white-space:nowrap}.file-row{align-items:center;flex-wrap:wrap}.file-row .item-main{min-width:190px}.file-row .item-actions{margin-left:auto}.inline-note{color:#82949c;font-size:12px;line-height:1.6}.value-card{padding:24px}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{text-align:left;color:#79929b;font-size:11px;padding:12px;border-bottom:1px solid #e1e9ec;text-transform:uppercase;letter-spacing:.6px}.data-table td{padding:13px 12px;border-bottom:1px solid #eaf0f2;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table-wrapper{overflow-x:auto}.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline-form .input{flex:1;min-width:210px}.secondary-tab{display:flex;align-items:center;gap:7px;font-size:13px;color:#80949b;white-space:nowrap}.small-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;word-break:break-all;background:#eaf3f4;padding:12px;border:1px solid #cce3e5;border-radius:10px;user-select:all;color:#155365}.new-school-card{border:1px dashed #b7d9d9;background:#f6fafa;border-radius:15px;padding:25px;text-align:center}.new-school-card h3{margin-top:8px;margin-bottom:7px}.new-school-card p{font-size:13px;color:#83959a}.footer-trust{font-size:11px;color:#89a3aa;border-top:1px solid #2d5862;padding-top:12px;margin-top:12px}.role-label{font-size:12px;font-weight:800}.list-section{margin-top:24px}.preview-empty{display:flex;justify-content:center;align-items:center;padding:50px 22px;color:#82969c;text-align:center;font-size:14px;min-height:130px}.mono{font-family:ui-monospace,monospace}.brand-logo{font-size:21px}.tiny-separator{font-size:12px;color:#a3b8bd;margin:0 6px}.action-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.button.danger{background:#fff;color:#b2473a;border-color:#f0cccc}.is-loading{opacity:.66;pointer-events:none}.modal .input[type=file]{padding:10px}.invite-summary{padding:15px;border:1px solid #d6e6e7;border-radius:12px;background:#f7fbfb}.meta-detail{color:#7c929a;font-size:12px}.top-school{max-width:200px;overflow:hidden;text-overflow:ellipsis}.course-footer .button{white-space:nowrap}.loading-dots{font-size:13px;color:#76959b}
@media(max-width:900px){.course-detail-panel{grid-template-columns:1fr}}
@media(max-width:760px){.top-right{margin-left:0}.sidebar{overflow-x:hidden}.data-table th,.data-table td{padding:10px 8px}.headingrow{align-items:flex-start}.brand{padding:4px 1px}.top-school{max-width:170px}}
/* SALIX Edu 0.4 – Lernfeldstruktur, QR-Anmeldung, Kursfreigaben */
.course-main-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.folder-grid{padding:4px 22px 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}.folder-tile{display:flex;min-height:140px;flex-direction:column;text-align:left;gap:7px;border:1px solid #d5e5e8;border-radius:13px;padding:17px;background:#f9fcfc;color:var(--ink);transition:background .15s,border-color .15s}.folder-tile:hover,.folder-tile.selected{border-color:#21858a;background:#e9f6f4}.folder-icon{font-size:30px}.folder-name{font-weight:800;font-size:14px;overflow-wrap:anywhere}.folder-sub{color:#728b93;font-size:12px}.request-card,.approval-card{margin:0 0 21px}.join-banner{border-color:#80babc;background:#e8f5f3}.item-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px}.file-row{min-width:0}.qr-modal{width:min(670px,98%)}.qr-preview{border:1px solid #e1ecef;border-radius:16px;background:#f7fbfb;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;margin:18px 0}.qr-caption{font-weight:800;color:#163e4a;font-size:14px}.qr-frame{padding:10px;background:white;border-radius:10px;display:flex;align-items:center;justify-content:center}.qr-frame img{max-width:100%;height:auto}.qr-modal .action-row{justify-content:center}#salix-print-sheet{display:none}.tag.draft{white-space:normal}.handout-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #113d4a;padding-bottom:18px;margin-bottom:35px}.handout-brand{color:#113d4a;font-size:24px;font-weight:900;letter-spacing:-1px}.handout-brand span{color:#0f8b85}.handout-label{font-size:11px;letter-spacing:1.5px;color:#5d7a82;font-weight:800}.handout-school{text-transform:uppercase;color:#117e80;font-weight:900;font-size:13px;letter-spacing:1.2px}.handout-code{font-size:13px;text-align:center;margin:12px 0 5px}.handout-code strong{font-family:ui-monospace,monospace;letter-spacing:1.1px}.handout-url{text-align:center;font-size:10px;word-break:break-all;color:#45646e}.handout-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.handout-steps div{border-radius:10px;padding:14px;border:1px solid #d9e6e8;font-size:12px;font-weight:650}.handout-steps b{background:#103a49;border-radius:50%;display:inline-flex;width:24px;height:24px;color:#fff;align-items:center;justify-content:center;margin-right:7px}.handout-foot{font-size:11px;line-height:1.6;color:#59757d;border-top:1px solid #dfe8ea;margin-top:28px;padding-top:16px}
@media(max-width:760px){.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:5px 13px 13px}.file-row{flex-wrap:wrap}.file-row .item-actions{width:100%;justify-content:flex-start}.qr-modal .action-row{justify-content:flex-start}}
@media print{
 @page{size:A4 portrait;margin:16mm}
 html,body{background:white!important;margin:0!important;padding:0!important}
 body *{visibility:hidden!important}
 #salix-print-sheet,#salix-print-sheet *{visibility:visible!important}
 #salix-print-sheet{display:block!important;position:fixed!important;left:0;top:0;width:100%!important;margin:0!important;padding:0 5mm!important;color:#17343e!important;background:#fff!important;font-family:Arial,sans-serif!important}
 #salix-print-sheet h1{font-size:32px!important;line-height:1.2;margin:0 0 15px!important}
 #salix-print-sheet h2{font-size:25px!important;margin:10px 0 20px!important}
 #salix-print-sheet .handout-instruction{font-size:15px!important;line-height:1.55;max-width:600px;margin:0 0 16px!important}
 #salix-print-sheet .qr-frame{margin:14px auto!important;width:285px!important;min-height:285px!important;padding:10px!important;border:1px solid #d9e7e9}
 #salix-print-sheet .qr-frame canvas{display:none!important}
 #salix-print-sheet .qr-frame img{display:block!important;width:260px!important;height:260px!important}
 #salix-print-sheet .handout-head{margin-bottom:32px}
}

/* SALIX Edu 0.4a — ruhiges, einheitliches Branding */
.brand{padding:4px 6px 22px;min-height:78px}
.brand-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.brand-symbol{width:47px;height:47px;object-fit:contain;flex:none;display:block}
.brand-type{min-width:0}
.brand-name{white-space:nowrap;font-size:19px;letter-spacing:-.6px;font-weight:850;line-height:1.16}
.brand-name span{font-weight:580;color:#9CDED0}
.brand-sub{font-size:9px;letter-spacing:1px;font-weight:650;white-space:nowrap;opacity:.8;margin-top:5px}






.topbar .crumb{display:flex;align-items:center;gap:6px}
.topbar-mark{width:24px;height:24px;object-fit:contain;vertical-align:middle;opacity:.84;margin-right:5px}
.boot-splash{gap:7px}
.boot-symbol{display:block;width:76px;height:76px;margin-bottom:7px}
.boot-splash strong{font-weight:830;color:#123E49}
.boot-splash span{font-weight:550;color:#418D83}
/* Der QR-Handout-Kopf übernimmt exakt dasselbe Signet wie die Website. */
.handout-head{gap:14px}
.handout-brand{display:flex;align-items:center}
.handout-brand .brand-symbol{width:62px;height:62px}
.handout-brand .brand-name{font-family:Inter,Arial,sans-serif;color:#123E49;font-size:27px;letter-spacing:-.8px}
.handout-brand .brand-name span{color:#418D83}
.handout-brand .brand-sub{font-family:Inter,Arial,sans-serif;color:#547D7B;opacity:1;font-size:8px;letter-spacing:1.4px;margin-top:5px}
@media(max-width:760px){.brand{padding:4px 1px}.brand-symbol{width:39px;height:39px}.brand-lockup--sidebar .brand-name{font-size:18px}.topbar-mark{display:none}}
@media print{
  #salix-print-sheet .brand-symbol{width:62px!important;height:62px!important;display:block!important}
  #salix-print-sheet .brand-type{display:block!important}
  #salix-print-sheet .brand-name{font-size:27px!important;color:#123E49!important}
  #salix-print-sheet .brand-name span{color:#418D83!important}
  #salix-print-sheet .brand-sub{font-size:8px!important;letter-spacing:1.4px!important;color:#547D7B!important}
  #salix-print-sheet .handout-head{page-break-inside:avoid}
}

.join-banner-action { margin-top: 10px; }

.school-card-icon { font-size: 29px; }
.test-notice { margin-top: 22px; }
.dashboard-notice-icon { font-size: 20px; }
.enrollment-row { justify-content: space-between; }
.invite-action { margin-top: 18px; }
.centered-actions { justify-content: center; }
.toast.toast-error { background: #8a3636; }

.nav-count {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 2px 5px;
  border-radius: 999px;
  background: #e5f5ed;
  color: #174f46;
  font-size: 11px;
  text-align: center;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.admin-metric {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px 18px;
  background: linear-gradient(145deg, #fff 40%, #f3faf8);
}

.admin-metric-symbol {
  position: absolute;
  top: 14px;
  right: 15px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #e6f3ef;
  color: #145e59;
  font-size: 16px;
}

.admin-metric-value {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.admin-metric-label {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, 1fr);
  align-items: start;
  gap: 18px;
}

.admin-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-overview .approval-card {
  margin: 0;
}

.admin-overview .approval-card .item {
  flex-wrap: wrap;
}

.admin-overview .approval-card .item-actions {
  margin-left: auto;
}

.admin-overview .item-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-overview .panel-title {
  margin: 0;
}

.admin-course-list {
  list-style: none;
  margin: 0;
  padding: 0 20px 8px;
}

.admin-course-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 13px 2px;
  border-top: 1px solid var(--line);
}

.admin-row-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-tools {
  padding: 20px;
}

.admin-facts {
  display: grid;
  gap: 9px;
  margin: 15px 0;
  padding: 13px 0;
  border-block: 1px solid var(--line);
  color: var(--ink2);
  font-size: 13px;
}

.admin-facts div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.admin-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.admin-empty {
  margin: 0;
  padding: 0 24px 21px;
  color: var(--ink2);
  font-size: 13px;
}

.admin-overview .preview-empty {
  min-height: 0;
  padding: 0 24px 21px;
  justify-content: flex-start;
  text-align: left;
  color: var(--ink2);
}

@media (max-width: 1040px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .admin-metrics { gap: 9px; }
  .admin-metric { padding: 14px; }
  .admin-course-list { padding-inline: 14px; }
  .admin-overview .panel-head { padding-inline: 16px; }
  .admin-overview .approval-card .item-actions { margin-left: 0; }
}

.admin-more-courses summary {
  margin: 0 20px 12px;
  padding: 8px 0;
  color: var(--primary2);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.site-legal {
  display: flex;
  justify-content: center;
  padding: 14px 18px;
  background: var(--white);
  border-top: 1px solid var(--line);
}

.site-legal nav,
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-legal a,
.legal-nav a {
  padding: 5px 2px;
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 3px;
}

.legal-page {
  min-height: 100vh;
  padding: clamp(16px, 5vw, 48px);
}

.legal-header,
.legal-content {
  max-width: 780px;
  margin-inline: auto;
}

.legal-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
}

.legal-brand img { border-radius: 8px; }

.legal-content {
  padding: clamp(20px, 5vw, 44px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.legal-content h1 {
  margin: 0 0 16px;
  line-height: 1.2;
  font-size: clamp(27px, 4vw, 38px);
}

.legal-content h2 {
  margin: 28px 0 6px;
  font-size: 19px;
}

.legal-content p { margin: 0 0 12px; }
.legal-content address { font-style: normal; }
.legal-content a { text-underline-offset: 3px; }
.legal-content li + li { margin-top: 6px; }
.legal-content .legal-draft { padding: 10px 13px; }
.legal-content .legal-draft,
.signup-privacy { font-size: 13px; }

.demo-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.demo-register h2,
.demo-register .panel-sub { margin-block: 0; }

.demo-register tbody th {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}

.demo-register td,
.demo-register th { overflow-wrap: anywhere; }

.demo-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

@media (max-width: 560px) {
  .demo-metrics { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .demo-metrics .admin-metric { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .demo-metrics .admin-metric-value { grid-column: 2; grid-row: 1; }
  .demo-metrics .admin-metric-label { grid-column: 1; grid-row: 1; }
  .demo-register table { min-width: 420px; }
}

.contact-toolbar {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  max-width: 34rem;
}

.contact-toolbar label {
  color: var(--ink2);
  font-size: 13px;
  font-weight: 750;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 16px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.contact-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-initial {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--teal-light);
  color: var(--primary2);
  font-size: 13px;
  font-weight: 800;
}

.contact-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-name h2 {
  margin: 1px 0 3px;
  font-size: 16px;
}

.contact-name p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
}

.contact-details {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.contact-details > div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 8px;
}

.contact-details dt {
  color: var(--ink2);
}

.contact-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.contact-details a {
  text-underline-offset: 3px;
}

.contact-address {
  white-space: pre-line;
}

.contact-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contact-form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-address-input {
  resize: vertical;
}

.contact-release {
  margin: 15px 0 12px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f9f8;
}

.contact-release .checkbox-line {
  min-height: 38px;
  border: 0;
  padding: 0;
  font-weight: 750;
}

.contact-release p {
  margin: 0 0 5px;
  color: var(--ink2);
}

@media (max-width: 480px) {
  .contact-form-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.storage-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 12px;
  font-size: 13px;
}

.storage-summary span,
.storage-note {
  color: var(--ink2);
}

.storage-meter {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 8px;
  accent-color: var(--primary);
}

.storage-meter::-webkit-meter-bar {
  border: 0;
  background: #e3edee;
}

.storage-meter::-webkit-meter-optimum-value { background: var(--primary); }
.storage-meter::-webkit-meter-suboptimum-value { background: #a46418; }
.storage-meter::-webkit-meter-even-less-good-value { background: #ac4437; }

.storage-note {
  margin: 6px 0 0;
  font-size: 12px;
}

.auth-entry {
  max-width: 1112px;
  min-height: 100vh;
  margin-inline: auto;
  padding: clamp(24px, 6vw, 72px) clamp(14px, 4vw, 40px);
}

.auth-entry-brand {
  margin-bottom: clamp(20px, 4vw, 36px);
}

.auth-entry-brand .brand-name {
  color: #123e49;
}

.auth-entry-brand .brand-name span {
  color: #23685e;
  font-weight: 700;
}

.auth-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2.5vw, 24px);
}

.auth-entry-demo,
.auth-entry-login {
  min-width: 0;
  padding: clamp(19px, 3vw, 34px);
  border-radius: 18px;
}

.auth-entry-demo {
  background: linear-gradient(150deg, #103447, #155762);
  color: #fff;
}

.auth-entry-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-entry-heading h1,
.auth-entry-heading h2 {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.2;
  letter-spacing: -.55px;
}

.auth-entry-arrow {
  display: grid;
  flex: 0 0 41px;
  height: 41px;
  place-items: center;
  border-radius: 11px;
  background: #e8f5f2;
  color: #144d55;
  font-size: 24px;
  font-weight: 700;
}

.auth-entry-steps {
  display: grid;
  gap: 8px;
  padding-inline-start: 23px;
  margin: 18px 0;
  line-height: 1.5;
}

.auth-entry-steps li::marker {
  color: #b1e9df;
  font-weight: 800;
}

.auth-entry-duration {
  margin: 0 0 17px;
  color: #d3f6f0;
  font-size: 14px;
}

.auth-entry-registration summary {
  width: fit-content;
  list-style: none;
  background: #e8f5f2;
  border-color: #e8f5f2;
  color: #16414a;
  cursor: pointer;
}

.auth-entry-registration summary::-webkit-details-marker { display: none; }
.auth-entry-registration summary::after { content: '↓'; }
.auth-entry-registration[open] summary::after { content: '↑'; }
.auth-entry-registration summary:hover { background: #d1eee8; }

.auth-entry-registration form {
  margin-top: 13px;
  padding: clamp(12px, 2vw, 18px);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.auth-entry-test,
.auth-entry-login > p {
  font-size: 13px;
  line-height: 1.55;
}

.auth-entry-test { margin: 14px 0 0; color: #d0e8e7; }
.auth-entry-login > p { color: var(--ink2); margin: 13px 0 18px; }
.auth-entry-login form .button { width: 100%; margin-top: 17px; }
.auth-entry-invitation { margin-bottom: 16px; }

@media (max-width: 700px) {
  .auth-entry-grid { grid-template-columns: minmax(0, 1fr); }
}

.invitation-heading,
.invitation-entry-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.invitation-heading h3 {
  margin: 0;
  font-size: 14px;
}

.invitation-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.invitation-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.invitation-list .item-sub {
  color: var(--ink2);
}

.invitation-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.birthday-card {
  margin-bottom: 18px;
}

.birthday-card h2 {
  margin: 0;
}

.birthday-card p {
  color: var(--ink2);
  font-size: 13px;
  margin: 8px 0 0;
}

.birthday-card ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.birthday-card li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  border-top: 1px solid var(--line);
  padding: 8px 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.birthday-card .button {
  margin-top: 10px;
}