/* ==========================================================================
   Teledemy Exam Engine — design layer (loaded after all plugin CSS and the theme)
   Harmonizes every plugin screen onto the shared design tokens.
   Keep the :root token block identical to teledemy-theme/assets/css/main.css.
   ========================================================================== */
:root{
  --td-brand-50:#F0F9FF;--td-brand-100:#D7F0FE;--td-brand-200:#C4E9FD;--td-brand-300:#7DD0FB;--td-brand-400:#19AAF8;--td-brand-500:#19AAF8;--td-brand-600:#19AAF8;--td-brand-700:#0476B9;--td-brand-800:#0C4A6E;--td-brand-900:#082F49;
  --td-gray-0:#FFFFFF;--td-gray-50:#F8FAFC;--td-gray-100:#F1F5F9;--td-gray-200:#E2E8F0;--td-gray-300:#CBD5E1;--td-gray-400:#94A3B8;--td-gray-500:#64748B;--td-gray-600:#475569;--td-gray-700:#334155;--td-gray-800:#1E293B;--td-gray-900:#0F172A;
  --td-success-50:#F0FDF4;--td-success-100:#DCFCE7;--td-success-300:#86EFAC;--td-success-600:#15803D;--td-success-700:#166534;
  --td-warning-50:#FFFBEB;--td-warning-100:#FEF3C7;--td-warning-300:#FCD34D;--td-warning-600:#B45309;--td-warning-700:#92400E;
  --td-danger-50:#FEF2F2;--td-danger-100:#FEE2E2;--td-danger-300:#FCA5A5;--td-danger-600:#B91C1C;--td-danger-700:#991B1B;
  --td-accent-300:#FDBA74;--td-accent-600:#C2410C;
  --td-text:var(--td-gray-800);--td-text-strong:var(--td-gray-900);--td-text-muted:var(--td-gray-600);--td-text-subtle:var(--td-gray-500);
  --td-bg:var(--td-gray-0);--td-bg-subtle:var(--td-gray-50);--td-surface:var(--td-gray-0);--td-border:var(--td-gray-200);--td-border-strong:var(--td-gray-300);
  --td-link:var(--td-brand-700);--td-focus:var(--td-brand-600);
  --td-text-xs:12px;--td-text-sm:14px;--td-text-md:16px;--td-text-lg:18px;--td-text-xl:20px;--td-text-2xl:24px;--td-text-3xl:30px;--td-text-4xl:clamp(32px,4.2vw,48px);
  --td-space-1:4px;--td-space-2:8px;--td-space-3:12px;--td-space-4:16px;--td-space-5:20px;--td-space-6:24px;--td-space-8:32px;--td-space-10:40px;--td-space-12:48px;--td-space-16:64px;--td-space-20:80px;
  --td-radius-sm:6px;--td-radius:8px;--td-radius-lg:12px;--td-radius-xl:16px;--td-radius-full:999px;
  --td-shadow-xs:0 1px 2px rgba(15,23,42,.06);--td-shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);--td-shadow:0 8px 24px rgba(15,23,42,.08);--td-shadow-lg:0 20px 48px rgba(15,23,42,.16);
  --td-ring:0 0 0 3px rgba(25,170,248,.4);--td-header-h:72px;
  --td-primary:#19AAF8;--td-primary-dark:#078ED7;--td-primary-text:#FFFFFF;--td-secondary:#D7F0FE;--td-secondary-dark:#C4E9FD;--td-secondary-text:#078ED7;--td-secondary-ink:#03669F;
}
@media (max-width:1024px){:root{--td-header-h:64px}}
.td-skip-link{position:absolute;left:16px;top:-80px;z-index:1000;padding:10px 16px;border-radius:8px;background:#0F172A;color:#fff;font-weight:600}
.td-skip-link:focus{top:12px}

/* Button system (identical to the theme) as a zero-specificity fallback: it styles buttons under other themes but never overrides the Teledemy theme. */
:where(.td-btn),:where(.td-btn:visited){--_bg:var(--td-primary);--_fg:var(--td-primary-text);--_bd:var(--td-primary);--_bg-h:var(--td-primary-dark);--_bd-h:var(--td-primary-dark);--_fg-h:var(--td-primary-text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--_bd);border-radius:var(--td-radius);background:var(--_bg);color:var(--_fg);
  font-family:inherit;font-size:var(--td-text-sm);font-weight:600;line-height:1.3;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s var(--td-ease),border-color .15s var(--td-ease),color .15s var(--td-ease),box-shadow .15s var(--td-ease),transform .1s}
:where(.td-btn:hover){background:var(--_bg-h);border-color:var(--_bd-h);color:var(--_fg-h)}
:where(.td-btn:active){transform:translateY(1px)}
:where(.td-btn:focus-visible){outline:none;box-shadow:var(--td-ring)}
:where(.td-btn--primary),:where(.td-btn--dark){--_bg:var(--td-primary);--_bd:var(--td-primary);--_fg:var(--td-primary-text);--_bg-h:var(--td-primary-dark);--_bd-h:var(--td-primary-dark);--_fg-h:var(--td-primary-text)}
:where(.td-btn--secondary),:where(.td-btn--light),:where(.td-btn--outline){--_bg:var(--td-secondary);--_bd:var(--td-secondary-dark);--_fg:var(--td-secondary-text);--_bg-h:var(--td-secondary-dark);--_bd-h:var(--td-secondary-dark);--_fg-h:var(--td-secondary-text)}
:where(.td-btn--ghost){--_bg:transparent;--_bd:transparent;--_fg:var(--td-text);--_bg-h:var(--td-gray-100);--_bd-h:transparent;--_fg-h:var(--td-text-strong)}
:where(.td-btn--neutral){--_bg:#fff;--_bd:var(--td-border-strong);--_fg:var(--td-text);--_bg-h:var(--td-gray-50);--_bd-h:var(--td-gray-400);--_fg-h:var(--td-text-strong)}
:where(.td-btn--danger){--_bg:#fff;--_bd:var(--td-danger-300);--_fg:var(--td-danger-600);--_bg-h:var(--td-danger-50);--_bd-h:var(--td-danger-600);--_fg-h:var(--td-danger-700)}
:where(.td-btn--danger-solid){--_bg:var(--td-danger-600);--_bd:var(--td-danger-600);--_fg:#fff;--_bg-h:var(--td-danger-700);--_bd-h:var(--td-danger-700);--_fg-h:#fff}
:where(.td-btn--success){--_bg:var(--td-success-600);--_bd:var(--td-success-600);--_fg:#fff;--_bg-h:var(--td-success-700);--_bd-h:var(--td-success-700);--_fg-h:#fff}
:where(.td-btn--on-dark){--_bg:#fff;--_bd:#fff;--_fg:var(--td-brand-700);--_bg-h:var(--td-brand-100);--_bd-h:var(--td-brand-100);--_fg-h:var(--td-brand-800)}
:where(.td-btn--sm),:where(.td-inline-btn.td-btn--sm){min-height:36px;padding:6px 12px;font-size:13px}
:where(.td-btn--lg){min-height:52px;padding:12px 24px;font-size:var(--td-text-md)}
:where(.td-btn--block){display:flex;width:100%}
:where(.td-btn[disabled]),:where(.td-btn:disabled),:where(.td-btn[aria-disabled="true"]){--_bg:var(--td-gray-100);--_bd:var(--td-gray-200);--_fg:var(--td-gray-500);--_bg-h:var(--td-gray-100);--_bd-h:var(--td-gray-200);--_fg-h:var(--td-gray-500);cursor:not-allowed;box-shadow:none;transform:none;opacity:1}
:where(.td-btn.is-loading){position:relative;color:transparent!important;pointer-events:none}
:where(.td-btn.is-loading)::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--_fg);border-right-color:transparent;animation:td-spin .7s linear infinite}

@keyframes td-spin{to{transform:rotate(360deg)}}
:where(.td-icon){width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.25em}

/* 1. Page shell & headings ------------------------------------------------- */
.td-shell{width:min(1200px,calc(100% - 40px));margin:var(--td-space-8) auto var(--td-space-16);color:var(--td-text)}
.td-shell h1{font-size:clamp(28px,3.4vw,40px);line-height:1.3;letter-spacing:-.02em;color:var(--td-text-strong)}
.td-shell h2{font-size:var(--td-text-2xl);line-height:1.35}
.td-shell h3{font-size:var(--td-text-lg);line-height:1.4}
.td-public-refresh h1{color:var(--td-text-strong)}
.td-page-head{display:grid;gap:6px;margin-bottom:var(--td-space-6)}
.td-page-head h1{margin:0}
.td-page-head p{margin:0;max-width:72ch;color:var(--td-text-muted);font-size:var(--td-text-md);line-height:1.7}
.td-page-head .td-eyebrow{margin-bottom:2px}
.td-page-head__actions,.td-panel-head .td-form-actions{display:flex;flex-wrap:wrap;gap:var(--td-space-2)}
.td-page-head p,.td-panel p{color:var(--td-text-muted)}
.td-panel{padding:var(--td-space-6)}
.td-panel h2{font-size:var(--td-text-xl)}
.td-panel>h2:first-child,.td-panel>h1:first-child{margin-top:0}
.td-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--td-warning-300);border-left-width:4px;border-radius:var(--td-radius);background:var(--td-warning-50);color:var(--td-warning-700);font-size:var(--td-text-sm)}

/* Help / Report context links (profile, question, exam) */
.td-case-context-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--td-space-2);margin:0 0 var(--td-space-4)}
.td-case-context-links a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid var(--td-border);border-radius:var(--td-radius-full);background:#fff;color:var(--td-text-muted);font-size:13px;font-weight:600}
.td-case-context-links a:hover{border-color:var(--td-brand-200);background:var(--td-brand-50);color:var(--td-brand-700)}
.td-case-context-links .td-icon{width:16px;height:16px}

/* 2. Dashboard shell ------------------------------------------------------------ */
.td-dashboard-head{display:flex;align-items:center;gap:var(--td-space-4);padding:0 0 var(--td-space-6);margin-bottom:var(--td-space-6);border-bottom:1px solid var(--td-border)}
.td-dashboard-head h1{margin:0;font-size:clamp(24px,3vw,32px)}
.td-avatar{flex:0 0 auto;width:72px;height:72px;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--td-brand-300),var(--td-brand-600))}
.td-avatar img,.td-avatar .td-profile-image{display:block;width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover;background:var(--td-brand-100)}
.td-dashboard-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--td-space-6);align-items:start}
.td-dashboard-sidebar{position:sticky;top:calc(var(--td-header-h) + 16px);max-height:calc(100vh - var(--td-header-h) - 32px);overflow-y:auto;padding:var(--td-space-3);border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;box-shadow:var(--td-shadow-xs);scrollbar-width:thin}
.admin-bar .td-dashboard-sidebar{top:calc(var(--td-header-h) + 48px)}
.td-dashboard-sidebar nav{display:grid;gap:0}
.td-dashboard-sidebar .td-nav-section{display:grid;gap:2px;padding:var(--td-space-2) 0}
.td-dashboard-sidebar .td-nav-section+.td-nav-section{border-top:1px solid var(--td-gray-100)}
.td-dashboard-sidebar .td-nav-section__title{margin:2px 0 4px;padding:0 10px;color:var(--td-text-subtle);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.td-dashboard-sidebar a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--td-radius);color:var(--td-gray-700);font-size:14px;font-weight:500;line-height:1.4;text-decoration:none}
.td-dashboard-sidebar a .td-icon{width:18px;height:18px;color:var(--td-gray-500)}
.td-dashboard-sidebar a:hover{background:var(--td-gray-100);color:var(--td-text-strong)}
.td-dashboard-sidebar a:hover .td-icon{color:var(--td-brand-600)}
.td-dashboard-sidebar a.is-active{background:var(--td-brand-100);color:var(--td-secondary-ink);font-weight:600}
.td-dashboard-sidebar a.is-active .td-icon{color:var(--td-secondary-ink)}
.td-dashboard-sidebar .td-dashboard-sidebar__logout{margin-top:var(--td-space-2);padding-top:10px;border-top:1px solid var(--td-gray-100);border-radius:0;color:var(--td-danger-600)}
.td-dashboard-sidebar .td-dashboard-sidebar__logout .td-icon{color:var(--td-danger-600)}
.td-dashboard-sidebar .td-dashboard-sidebar__logout:hover{border-radius:var(--td-radius);background:var(--td-danger-50);color:var(--td-danger-700)}
.td-profile-head{display:flex;align-items:center;gap:var(--td-space-4);margin-bottom:var(--td-space-6)}
.td-profile-head h1{margin:0}
.td-profile-head p{margin:4px 0 0;display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--td-radius-full);background:var(--td-success-100);color:var(--td-success-700);font-size:13px;font-weight:600}

/* 3. Filters, multi-selects, search rows --------------------------------------- */
.td-filter-bar,.td-public-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--td-space-4);align-items:end}
.td-filter-bar .td-field,.td-public-filter-grid .td-field{margin:0}
.td-filter-actions,.td-public-filter-actions{display:flex;flex-wrap:wrap;gap:var(--td-space-2);grid-column:1/-1;padding-top:var(--td-space-1)}
.td-multi-check__toggle,.td-search-select__toggle,.td-public-multi>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--td-border-strong);border-radius:var(--td-radius);background:#fff;color:var(--td-text-strong);font-size:var(--td-text-md);line-height:1.4;text-align:left;box-shadow:var(--td-shadow-xs);cursor:pointer;list-style:none}
.td-public-multi>summary::-webkit-details-marker{display:none}
.td-multi-check__toggle>span:first-child,.td-search-select__toggle>span:first-child,.td-public-multi>summary>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-multi-check__toggle>span[aria-hidden="true"],.td-search-select__toggle>span[aria-hidden="true"],.td-public-multi>summary>span:last-child:not(:first-child){flex:0 0 18px;width:18px;height:18px;font-size:0;background:currentColor;color:var(--td-gray-600);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .15s}
.td-multi-check__toggle[aria-expanded="true"]>span[aria-hidden="true"],.td-search-select__toggle[aria-expanded="true"]>span[aria-hidden="true"],.td-public-multi[open]>summary>span:last-child:not(:first-child){transform:rotate(180deg)}
.td-multi-check__toggle:hover,.td-search-select__toggle:hover,.td-public-multi>summary:hover{border-color:var(--td-gray-400)}
.td-multi-check__toggle:focus-visible,.td-search-select__toggle:focus-visible,.td-search-select__toggle[aria-expanded="true"],.td-public-multi>summary:focus-visible,.td-multi-check__toggle[aria-expanded="true"]{outline:none;border-color:var(--td-brand-600);box-shadow:var(--td-ring)}
.td-multi-check__toggle:disabled{background:var(--td-gray-100);color:var(--td-gray-500);border-color:var(--td-border);box-shadow:none}
.td-multi-check__menu,.td-public-checks{border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;box-shadow:var(--td-shadow-lg);padding:6px}
.td-multi-check__options label,.td-public-checks label,.td-multi-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--td-radius-sm);font-size:var(--td-text-sm);cursor:pointer}
.td-multi-check__options label:hover,.td-public-checks label:hover,.td-multi-option:hover{background:var(--td-brand-50)}
.td-multi-check__tools button{color:var(--td-link);font-weight:600;font-size:13px}

/* Native selects inside plugin screens always show the chevron, even where legacy CSS used the background shorthand. */
.td-shell select:not([multiple]),.tdg-shell select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/18px}
.td-shell select:disabled,.tdg-shell select:disabled{background-color:var(--td-gray-100)}
.td-access-shell .td-manager-filter-bar,.td-manager-filter-bar{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}

/* 4. Tables & lists --------------------------------------------------------------- */
.td-shell .td-table,.td-shell .td-question-table,.td-shell .td-access-table,.td-shell .td-audit-table{width:100%;border-collapse:collapse;font-size:var(--td-text-sm)}
.td-shell :is(.td-table,.td-question-table,.td-access-table,.td-audit-table) th{background:var(--td-gray-50);color:var(--td-text-muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.td-shell :is(.td-table,.td-question-table,.td-access-table,.td-audit-table) :is(th,td){padding:12px 14px;border-bottom:1px solid var(--td-border);text-align:left;vertical-align:middle}
.td-shell :is(.td-table,.td-question-table,.td-access-table,.td-audit-table) tbody tr:hover{background:var(--td-gray-50)}
.td-shell :is(.td-table-wrap,.td-access-table-wrap){overflow-x:auto;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff}
.td-shell :is(.td-table-wrap,.td-access-table-wrap)>table :is(tr:last-child>td){border-bottom:0}
.td-access-actions,.td-row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.td-access-actions .td-btn,.td-row-actions .td-btn{min-height:34px;padding:6px 12px;font-size:13px}
.td-list-cards{display:grid;gap:var(--td-space-3)}
.td-list-card{display:grid;gap:6px;padding:var(--td-space-4) var(--td-space-5);border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;transition:border-color .15s,box-shadow .15s}
.td-list-card:hover{border-color:var(--td-brand-200);box-shadow:var(--td-shadow-sm)}
.td-list-card h3{margin:0;font-size:var(--td-text-lg)}
.td-list-card h3 a:hover{color:var(--td-link)}
.td-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--td-radius-full);background:var(--td-gray-100);color:var(--td-gray-700);font-size:12px;font-weight:600;line-height:1.6;text-transform:capitalize;white-space:nowrap}
.td-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:is(.td-status--published,.td-status--active,.td-status--approved,.td-status--resolved,.td-status--submitted,.td-status--ready,.td-status--completed){background:var(--td-success-100);color:var(--td-success-700)}
:is(.td-status--pending,.td-status--draft,.td-status--paused,.td-status--held,.td-status--in_progress,.td-status--open,.td-status--waiting){background:var(--td-warning-100);color:var(--td-warning-700)}
:is(.td-status--rejected,.td-status--deleted,.td-status--suspended,.td-status--closed,.td-status--cancelled){background:var(--td-danger-100);color:var(--td-danger-700)}
:is(.td-status--archived,.td-status--expired){background:var(--td-gray-100);color:var(--td-gray-600)}
.td-pagination,.td-pages,.td-case-pages,#td-manage-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--td-space-2);margin-top:var(--td-space-5)}
#td-manage-pages button,.td-pages button,.td-case-pages button{min-height:38px;padding:6px 14px;border:1px solid var(--td-border-strong);border-radius:var(--td-radius);background:#fff;color:var(--td-text);font-weight:600}
#td-manage-pages button:hover,.td-pages button:hover,.td-case-pages button:hover{border-color:var(--td-brand-300);background:var(--td-brand-50);color:var(--td-brand-700)}
.td-kv>div{grid-template-columns:minmax(140px,220px) minmax(0,1fr)}

/* Question tables: give the question text room; metadata columns stay compact. */
.td-shell .td-question-table td,.td-shell .td-question-table th{vertical-align:top}
.td-shell .td-question-table th:nth-child(2),.td-shell .td-question-table td:nth-child(2){min-width:280px;width:38%}
.td-shell .td-question-table td{line-height:1.5}
.td-shell .td-question-table td:first-child,.td-shell .td-question-table th:first-child{width:44px}
/* Avatar fallback when the image cannot load (set by ui.js). */
img.td-avatar-fallback{object-fit:contain!important;background:var(--td-brand-100)!important;padding:2px;box-sizing:border-box}

/* 5. Tabs: exam sections, management areas ----------------------------------------- */
.td-exam-tabs,.td-access-nav{display:flex;gap:4px;margin:0 0 var(--td-space-6);padding:0 0 0;border-bottom:1px solid var(--td-border);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.td-exam-tabs::-webkit-scrollbar,.td-access-nav::-webkit-scrollbar{display:none}
.td-exam-tabs a,.td-access-nav a{position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:10px 14px;border:0;border-radius:var(--td-radius) var(--td-radius) 0 0;background:none;color:var(--td-text-muted);font-size:var(--td-text-sm);font-weight:600;white-space:nowrap;text-decoration:none}
.td-exam-tabs a:hover,.td-access-nav a:hover{background:var(--td-gray-50);color:var(--td-text-strong)}
.td-exam-tabs a[aria-current="page"],.td-access-nav a[aria-current="page"]{color:var(--td-brand-700)}
.td-exam-tabs a[aria-current="page"]::after,.td-access-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--td-brand-600)}

/* 6. Dialogs ------------------------------------------------------------------------- */
.td-shell dialog,.tdg-shell dialog,.td-access-dialog,.td-confirm-dialog{padding:var(--td-space-6);border:0;border-radius:var(--td-radius-xl);box-shadow:var(--td-shadow-lg);width:min(560px,calc(100vw - 32px))}
.td-shell dialog h2,.td-access-dialog h2{margin:0 0 var(--td-space-2);font-size:var(--td-text-xl);padding-right:36px}
.td-access-x,.tdg-close,.td-modal-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--td-gray-100);color:var(--td-gray-700);font-size:22px;line-height:1;cursor:pointer}
.td-access-x:hover,.tdg-close:hover,.td-modal-close:hover{background:var(--td-gray-200);color:var(--td-text-strong)}
.td-dialog-actions,.td-access-dialog-actions,.td-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--td-space-2);margin-top:var(--td-space-5)}

/* 7. Auth ---------------------------------------------------------------------------------- */
.td-auth-wrap{display:grid;place-items:start center;padding:var(--td-space-4) 0}
.td-auth-card{width:min(480px,100%);padding:var(--td-space-8);border:1px solid var(--td-border);border-radius:var(--td-radius-xl);background:#fff;box-shadow:var(--td-shadow)}
.td-auth-card h1{margin:0 0 6px;font-size:clamp(26px,3vw,32px)}
.td-auth-sub{margin:0 0 var(--td-space-6);color:var(--td-text-muted)}
.td-auth-foot{margin-top:var(--td-space-5);text-align:center;color:var(--td-text-muted)}
.td-auth-foot a,.td-auth-card a:not(.td-btn){color:var(--td-link);font-weight:600}
.td-field-error:empty{display:none}

/* 8. Exam taking (focus mode) -------------------------------------------------------- */
.td-focus-mode .td-nav,.td-focus-mode .td-search,.td-focus-mode .td-footer,.td-focus-mode .td-case-context-links{display:none}
.td-focus-mode .td-menu-toggle{display:none}
.td-exam{padding:var(--td-space-6)}
#td-exam-instructions h2{display:flex;align-items:center;gap:8px;margin-top:0}
#td-exam-instructions h2 .td-icon{color:var(--td-brand-600)}
.td-exam-note{display:flex;gap:10px;align-items:flex-start;margin:var(--td-space-5) 0;padding:12px 14px;border-radius:var(--td-radius);background:var(--td-brand-50);color:var(--td-brand-800);font-size:var(--td-text-sm)}
.td-exam-note .td-icon{color:var(--td-brand-600);margin-top:2px}
.td-exam-toolbar{position:sticky;top:calc(var(--td-header-h) + 8px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--td-space-3);margin:0 0 var(--td-space-4);padding:10px 14px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:rgba(255,255,255,.97);box-shadow:var(--td-shadow-sm)}
.admin-bar .td-exam-toolbar{top:calc(var(--td-header-h) + 40px)}
#td-exam-position{font-size:var(--td-text-md);color:var(--td-text-strong)}
#td-exam-attempts{color:var(--td-text-muted);font-size:13px}
#td-exam-timer{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--td-radius-full);background:var(--td-brand-100);color:var(--td-brand-800);font-size:var(--td-text-md);font-weight:700;font-variant-numeric:tabular-nums}
#td-exam-timer:empty{display:none}
#td-exam-timer::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4M12 14l3-3'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E") center/18px no-repeat}
#td-exam-timer.is-low{background:var(--td-warning-100);color:var(--td-warning-700)}
#td-exam-timer.is-critical{background:var(--td-danger-600);color:#fff}
@media (prefers-reduced-motion:no-preference){#td-exam-timer.is-critical{animation:td-pulse 1s ease-in-out infinite}}
@keyframes td-pulse{50%{box-shadow:0 0 0 6px rgba(185,28,28,.18)}}
#td-exam-save{color:var(--td-text-subtle);font-size:13px}
#td-exam-save:empty{display:none}
#td-exam-question{padding:var(--td-space-2) 0}
#td-exam-question h2,#td-exam-question h3,#td-exam-question p:first-child{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--td-text-strong);font-weight:600}
.td-exam-option{position:relative;display:flex;align-items:center;gap:12px;margin:10px 0;padding:14px 16px;border:1.5px solid var(--td-border-strong);border-radius:var(--td-radius-lg);background:#fff;font-size:var(--td-text-md);line-height:1.5;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.td-exam-option:hover{border-color:var(--td-brand-300);background:var(--td-brand-50)}
.td-exam-option input[type=radio]{width:20px;height:20px}
.td-exam-option:has(input:checked){border-color:var(--td-brand-600);background:var(--td-brand-100);box-shadow:0 0 0 1px var(--td-brand-600) inset}
.td-exam-option:has(input:focus-visible){box-shadow:var(--td-ring)}
.td-exam-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--td-space-2);margin:var(--td-space-5) 0}
.td-exam-controls #td-exam-next{margin-left:auto}
.td-exam-review-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px dashed var(--td-border-strong);border-radius:var(--td-radius);background:#fff;color:var(--td-text);font-size:var(--td-text-sm);font-weight:600;cursor:pointer;user-select:none}
.td-exam-review-toggle .td-icon{width:18px;height:18px;color:var(--td-gray-500)}
.td-exam-review-toggle:has(input:checked){border-color:var(--td-danger-600);background:var(--td-danger-50);color:var(--td-danger-700)}
.td-exam-review-toggle:has(input:checked) .td-icon{color:var(--td-danger-600)}
.td-exam-review-toggle:has(input:focus-visible){box-shadow:var(--td-ring)}
.td-exam-nav-panel{margin:var(--td-space-6) 0 var(--td-space-5);padding:var(--td-space-4) var(--td-space-5);border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:var(--td-gray-50)}
.td-exam-nav-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--td-space-2) var(--td-space-4)}
.td-exam-nav-head h3{margin:0;font-size:var(--td-text-md)}
.td-exam-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;color:var(--td-text-muted);font-size:12px}
.td-exam-legend li{display:inline-flex;align-items:center;gap:6px}
.td-exam-legend__swatch{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--td-gray-400);background:#fff}
.td-exam-legend__swatch.is-answered{background:var(--td-success-100);border-color:var(--td-success-600)}
.td-exam-legend__swatch.is-review{border:2px dashed var(--td-danger-600)}
.td-exam-legend__swatch.is-current{box-shadow:0 0 0 2px var(--td-brand-600);border-color:var(--td-brand-600)}
/* Navigator states keep Instruction 21 semantics: white unanswered, saved answer, red dashed review border. */
.td-exam-navigator{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;margin:var(--td-space-3) 0 0}
.td-exam-navigator button{min-width:0;height:44px;padding:0;border:1.5px solid var(--td-gray-400);border-radius:var(--td-radius);background:#fff;color:var(--td-text-strong);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:transform .1s,box-shadow .15s}
.td-exam-navigator button:hover{border-color:var(--td-brand-600)}
.td-exam-navigator .is-unanswered{background:#fff}
.td-exam-navigator .is-answered{background:var(--td-success-100);border-color:var(--td-success-600);color:var(--td-success-700)}
.td-exam-navigator .is-review{border:2.5px dashed var(--td-danger-600)}
.td-exam-navigator button[aria-current="true"]{outline:none;box-shadow:0 0 0 3px var(--td-brand-600);border-color:var(--td-brand-600)}
.td-exam-navigator button:focus-visible{outline:2px solid var(--td-brand-800);outline-offset:2px}
.td-exam-finish{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--td-space-3);padding-top:var(--td-space-5);border-top:1px solid var(--td-border)}
#td-exam-message:not([hidden]){margin-top:var(--td-space-4);padding:14px 16px;border:1px solid var(--td-danger-300);border-radius:var(--td-radius);background:var(--td-danger-50);color:var(--td-danger-700)}
.td-exam dialog{padding:var(--td-space-6);border:0;border-radius:var(--td-radius-xl)}
.td-exam dialog h2{margin-top:0}

/* 9. Results & reports --------------------------------------------------------------------- */
.td-result-grid,.td-stats-grid,.td-case-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--td-space-3)}
.td-case-metrics>*{padding:var(--td-space-4);border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff}

/* 10. Groups --------------------------------------------------------------------------------- */
.tdg-mobile-bottom-nav{box-shadow:0 -6px 20px rgba(15,23,42,.08)}

/* 11. Empty states inside plugin panels -------------------------------------------------------- */
.td-panel .td-empty-state{margin-top:var(--td-space-2)}
.td-empty{background:var(--td-gray-50)}

/* 12. Responsive ----------------------------------------------------------------------------- */
@media (max-width:850px){
  .td-dashboard-layout{display:block}
  .td-dashboard-sidebar{display:none}
  .td-dashboard-sidebar.is-open{display:block;position:fixed;z-index:120;left:12px;right:12px;top:calc(var(--td-header-h) + 8px);max-height:calc(100dvh - var(--td-header-h) - 24px);box-shadow:var(--td-shadow-lg)}
}
@media (max-width:760px){
  .td-shell{width:calc(100% - 24px);margin-top:var(--td-space-5)}
  .td-panel,.td-exam{padding:var(--td-space-4)}
  .td-dashboard-head{gap:var(--td-space-3);padding-bottom:var(--td-space-4);margin-bottom:var(--td-space-4)}
  .td-avatar{width:56px;height:56px}
  /* Wide data tables scroll horizontally instead of overflowing the page. */
  .td-shell table:not(.td-kv):not(.td-no-scroll){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .td-filter-bar,.td-public-filter-grid{grid-template-columns:1fr 1fr}
  .td-exam-toolbar{top:calc(var(--td-header-h) + 4px);padding:8px 10px}
  .td-exam-controls{display:grid;grid-template-columns:1fr 1fr}
  .td-exam-controls .td-btn,.td-exam-review-toggle{width:100%;justify-content:center}
  .td-exam-controls #td-exam-next{margin-left:0}
  .td-exam-finish{flex-direction:column-reverse;align-items:stretch}
  .td-exam-finish .td-btn{width:100%}
  .td-auth-card{padding:var(--td-space-5);box-shadow:none}
  .td-case-context-links{justify-content:flex-start}
  .td-kv>div{grid-template-columns:1fr}
}
@media (max-width:480px){.td-filter-bar,.td-public-filter-grid{grid-template-columns:1fr}}
.td-focus-mode .td-header__actions{margin-left:auto}
.td-icon{fill:none!important;stroke:currentColor}
.td-state-panel{padding:0;border:0;box-shadow:none;background:none}.td-state-panel .td-empty-state{padding:var(--td-space-12) var(--td-space-6)}.td-state-panel .td-empty-state__title{font-size:clamp(24px,3vw,32px)}

/* Checkboxes & radios inside fields: never stretched by legacy full-width input rules. */
.td-check{display:flex;align-items:center;gap:10px;line-height:1.45;cursor:pointer}
:is(.td-field,.td-form-row,.td-form-panel,.td-panel,.tdg-shell) .td-check input:is([type=radio],[type=checkbox]){width:18px;height:18px;min-height:0;margin:0;padding:0;flex:0 0 18px;box-shadow:none}
/* A row of radio choices becomes selectable option tiles. */
.td-form-row:has(>.td-check>input[type=radio]){display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--td-space-3)}
.td-form-row>.td-check:has(>input[type=radio]){min-height:48px;padding:12px 14px;border:1.5px solid var(--td-border-strong);border-radius:var(--td-radius);background:#fff;font-weight:600;transition:border-color .15s,background-color .15s}
.td-form-row>.td-check:has(>input[type=radio]):hover{border-color:var(--td-brand-300);background:var(--td-brand-50)}
.td-form-row>.td-check:has(>input:checked){border-color:var(--td-brand-600);background:var(--td-brand-100);color:var(--td-brand-800)}
.td-form-row>.td-check:has(>input:focus-visible){box-shadow:var(--td-ring)}
.td-field>span:first-child:not(.td-badge){display:block;margin:0 0 6px;color:var(--td-text-strong);font-size:var(--td-text-sm);font-weight:600}
/* Sub-section headings inside long forms act as dividers. */
:is(.td-form-panel,.td-panel) form>h3,:is(.td-form-panel,.td-panel)>form h3:not(.td-empty-state__title){margin:var(--td-space-8) 0 var(--td-space-4);padding-top:var(--td-space-5);border-top:1px solid var(--td-border);font-size:var(--td-text-lg)}
.td-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 var(--td-space-4)}
.td-form-actions,form>.td-btn:last-child{margin-top:var(--td-space-4)}
output[data-exam-end-time]{display:block;padding:10px 12px;border-radius:var(--td-radius);background:var(--td-brand-50);color:var(--td-brand-800);font-weight:600}
.td-shell :is(.td-table,.td-access-table) td:first-child:not(:has(input[type=checkbox])){min-width:190px}
.td-shell :is(.td-table,.td-access-table) td:first-child:has(input[type=checkbox])+td{min-width:170px}

/* Buttons rendered as links inside panels keep button colors (legacy `.td-panel a` rules underline and recolor links). */
:is(.td-shell,.td-panel,.tdg-shell,.td-empty-state,.td-auth-card) a.td-btn,:is(.td-shell,.td-panel,.tdg-shell,.td-empty-state,.td-auth-card) a.td-btn:visited{color:var(--_fg);text-decoration:none}
:is(.td-shell,.td-panel,.tdg-shell,.td-empty-state,.td-auth-card) a.td-btn:hover{color:var(--_fg-h);text-decoration:none}
.td-check-grid .td-check,.td-form-row>.td-check,.td-check-grid label{display:flex;align-items:center;gap:10px}
.td-contact-empty,.td-panel>p:only-of-type{color:var(--td-text-muted)}
.td-email-status{display:inline-flex;align-items:center;gap:4px}
.td-email-status .td-icon{width:16px;height:16px}
/* Full notifications page: illustrated empty state (text is provided by notifications.js). */
.td-notification-page [data-td-notification-empty]:not([hidden]){display:grid;justify-items:center;gap:8px;padding:var(--td-space-10) var(--td-space-4);border:1px dashed var(--td-border-strong);border-radius:var(--td-radius-lg);background:var(--td-gray-50)}
.td-notification-page [data-td-notification-empty]:not([hidden])::before{content:"";width:168px;height:126px;background:url(../img/notifications.svg) center/contain no-repeat}
/* Report / ticket submission feedback */
#td-case-message:empty{display:none}
#td-case-message[data-state]{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--td-space-5);padding:12px 14px;border:1px solid var(--td-brand-200);border-left-width:4px;border-radius:var(--td-radius);background:var(--td-brand-50);color:var(--td-brand-800);font-weight:500}
#td-case-message[data-state=success]{border-color:var(--td-success-300);background:var(--td-success-50);color:var(--td-success-700)}
#td-case-message[data-state=error]{border-color:var(--td-danger-300);background:var(--td-danger-50);color:var(--td-danger-700)}

/* ==========================================================================
   Management layout: left sidebar (15%) + content (85%) on every /manage/ route
   ========================================================================== */
.td-shell.td-manage-shell{width:calc(100% - 40px);max-width:1760px;margin-top:var(--td-space-6)}
.td-manage-layout{display:grid;grid-template-columns:15% 85%;align-items:start}
.td-manage-layout:not(:has(>.td-manage-sidebar)){display:block}
.td-manage-content{min-width:0;padding-left:var(--td-space-6)}
.td-manage-content>.td-page-head{margin-bottom:var(--td-space-5)}
.td-manage-content>.td-page-head .td-eyebrow{display:none}
.td-manage-sidebar{position:sticky;top:calc(var(--td-header-h) + 16px);display:flex;flex-direction:column;min-width:0;max-height:calc(100vh - var(--td-header-h) - 32px);overflow:hidden;border:1px solid var(--td-border);border-radius:var(--td-radius-xl);background:#fff;box-shadow:var(--td-shadow-sm)}
.admin-bar .td-manage-sidebar{top:calc(var(--td-header-h) + 48px);max-height:calc(100vh - var(--td-header-h) - 64px)}
.td-manage-sidebar__head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--td-gray-100);background:linear-gradient(135deg,var(--td-brand-50),#fff)}
.td-manage-sidebar__mark{flex:0 0 36px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--td-brand-500),var(--td-brand-700));color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.td-manage-sidebar__mark .td-icon{width:19px;height:19px}
.td-manage-sidebar__head div{display:grid;min-width:0;line-height:1.25}
.td-manage-sidebar__head strong{color:var(--td-text-strong);font-size:15px}
.td-manage-sidebar__head span{color:var(--td-text-subtle);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-manage-nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px;scrollbar-width:thin}
.td-manage-nav__group{display:grid;gap:1px;padding:4px 0}
.td-manage-nav__group+.td-manage-nav__group{border-top:1px solid var(--td-gray-100)}
.td-manage-nav__title{margin:4px 10px 2px;color:var(--td-text-subtle);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.td-manage-nav a{position:relative;display:flex;align-items:center;gap:10px;min-height:35px;padding:7px 10px;border-radius:var(--td-radius);color:var(--td-gray-700);font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;transition:background-color .15s,color .15s}
.td-manage-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-manage-nav a .td-icon{flex:0 0 18px;width:18px;height:18px;color:var(--td-gray-500);transition:color .15s}
.td-manage-nav a:hover{background:var(--td-gray-100);color:var(--td-text-strong)}
.td-manage-nav a:hover .td-icon{color:var(--td-brand-600)}
.td-manage-nav a.is-active{background:var(--td-brand-100);color:var(--td-brand-800);font-weight:600}
.td-manage-nav a.is-active .td-icon{color:var(--td-brand-600)}
.td-manage-nav a.is-active::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--td-brand-600)}
.td-manage-nav a:focus-visible{outline:none;box-shadow:var(--td-ring)}
.td-manage-sidebar__back{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--td-gray-100);color:var(--td-text-muted);font-size:13px;font-weight:600;text-decoration:none}
.td-manage-sidebar__back .td-icon{width:16px;height:16px}
.td-manage-sidebar__back:hover{background:var(--td-gray-50);color:var(--td-brand-700)}
/* Narrow desktop: keep the 15% column usable by dropping to icons + short labels. */
@media (max-width:1280px) and (min-width:1025px){
  .td-manage-sidebar__head div span{display:none}
  .td-manage-nav a{gap:8px;padding:8px;font-size:13px}
}
/* Tablet & phone: the sidebar becomes a scrollable pill bar above the content. */
@media (max-width:1024px){
  .td-shell.td-manage-shell{width:calc(100% - 24px)}
  .td-manage-layout{display:block}
  .td-manage-content{padding-left:0}
  .td-manage-sidebar{position:static;max-height:none;overflow:visible;margin-bottom:var(--td-space-5);border-radius:var(--td-radius-lg)}
  .td-manage-sidebar__head,.td-manage-sidebar__back,.td-manage-nav__title{display:none}
  .td-manage-nav{display:flex;gap:6px;padding:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .td-manage-nav::-webkit-scrollbar{display:none}
  .td-manage-nav__group{display:flex;gap:6px;padding:0;border:0!important}
  .td-manage-nav__group+.td-manage-nav__group{padding-left:6px;border-left:1px solid var(--td-gray-200)!important}
  .td-manage-nav a{flex:0 0 auto;min-height:36px;padding:6px 12px;border-radius:var(--td-radius-full);background:var(--td-gray-50);font-size:13px}
  .td-manage-nav a.is-active::before{display:none}
}
/* Management dashboard metric cards */
.td-case-metrics{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--td-space-4)}
.td-case-metrics>.td-panel{display:flex;flex-direction:column;gap:4px;margin:0;padding:18px 20px;border-left:4px solid var(--td-brand-400);text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s}
.td-case-metrics>.td-panel[href*="/tickets/"]{border-left-color:var(--td-accent-300)}
.td-case-metrics>.td-panel:hover{box-shadow:var(--td-shadow);transform:translateY(-1px)}
.td-case-metrics>.td-panel:focus-visible{outline:none;box-shadow:var(--td-ring)}
.td-case-metrics strong{color:var(--td-text-strong);font-size:32px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.td-case-metrics span{color:var(--td-text-muted);font-size:14px;text-transform:capitalize}

/* ==========================================================================
   Instruction 28 shared controls
   ========================================================================== */
/* Toasts (Instruction 35): top-right below the fixed header; mobile below the header, full width. */
.td-toasts{position:fixed;top:calc(var(--td-header-h,72px) + 12px);right:16px;z-index:10000;display:grid;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.admin-bar .td-toasts{top:calc(var(--td-header-h,72px) + 44px)}
.td-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border:1px solid var(--td-border);border-left:4px solid var(--td-brand-600);border-radius:var(--td-radius-lg);background:#fff;color:var(--td-text-strong);box-shadow:var(--td-shadow-lg);font-size:14px;line-height:1.45;pointer-events:auto;animation:td-toast-in .18s ease}
.td-toast>.td-icon{flex:0 0 20px;margin-top:1px;color:var(--td-brand-700)}
.td-toast>span{flex:1;min-width:0;overflow-wrap:anywhere}
.td-toast--success{border-left-color:var(--td-success-600)}.td-toast--success>.td-icon{color:var(--td-success-600)}
.td-toast--warning{border-left-color:var(--td-warning-600,#EA580C)}.td-toast--warning>.td-icon{color:var(--td-warning-600,#EA580C)}
.td-toast--error{border-left-color:var(--td-danger-600)}.td-toast--error>.td-icon{color:var(--td-danger-600)}
.td-toast__close{flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px 0 0;padding:0;border:0;border-radius:50%;background:none;color:var(--td-text-subtle);cursor:pointer}
.td-toast__close:hover,.td-toast__close:focus-visible{background:var(--td-gray-100);color:var(--td-text-strong);outline:none;box-shadow:var(--td-ring)}
.td-toast__close .td-icon{width:16px;height:16px}
.td-toast.is-leaving{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
@keyframes td-toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.td-toast{animation:none}.td-toast.is-leaving{transition:none}}
@media (max-width:680px){.td-toasts{left:12px;right:12px;top:calc(var(--td-header-h,64px) + 8px);width:auto}}

/* Confirmation modal */
dialog.td-modal{width:min(460px,calc(100vw - 32px));padding:0;border:0;border-radius:var(--td-radius-xl);box-shadow:var(--td-shadow-lg)}
dialog.td-modal::backdrop{background:rgba(15,23,42,.55)}
.td-modal__body{display:flex;gap:14px;padding:22px 22px 6px}
.td-modal__icon{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--td-brand-100);color:var(--td-brand-700)}
.td-modal__icon.is-danger{background:var(--td-danger-100);color:var(--td-danger-600)}
.td-modal h2{margin:4px 0 6px;font-size:18px}
.td-modal p{margin:0;color:var(--td-text-muted);font-size:14px;line-height:1.6}
.td-modal__actions{display:flex;justify-content:flex-end;gap:8px;padding:18px 22px 22px}

/* Searchable single-select & multi-select */
.td-combo-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important}
.td-combo.is-invalid .td-combo__toggle{border-color:var(--td-danger-600);box-shadow:0 0 0 3px rgba(185,28,28,.15)}
.td-combo,.td-msel{position:relative;width:100%;min-width:0}
.td-combo__toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--td-border-strong);border-radius:var(--td-radius);background:#fff;color:var(--td-text-strong);font:inherit;font-size:var(--td-text-md);line-height:1.4;text-align:left;box-shadow:var(--td-shadow-xs);cursor:pointer}
.td-combo__toggle:hover:not(:disabled){border-color:var(--td-gray-400)}
.td-combo__toggle:focus-visible,.is-open>.td-combo__toggle{outline:none;border-color:var(--td-brand-600);box-shadow:var(--td-ring)}
.td-combo__toggle:disabled{background:var(--td-gray-100);color:var(--td-gray-500);cursor:not-allowed;box-shadow:none}
.td-combo__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-combo__value.is-placeholder{color:var(--td-gray-500)}
.td-combo__chev{flex:0 0 18px;width:18px;height:18px;color:var(--td-gray-600);transition:transform .15s}
.is-open>.td-combo__toggle .td-combo__chev{transform:rotate(180deg)}
.td-combo__panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:150;min-width:220px;padding:6px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;box-shadow:var(--td-shadow-lg)}
.td-combo__panel.is-up{top:auto;bottom:calc(100% + 6px)}
.td-combo__search{position:relative;margin-bottom:6px}
.td-combo__search .td-icon{position:absolute;left:10px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--td-gray-500);pointer-events:none}
.td-combo__search input{width:100%;min-height:38px!important;padding:6px 10px 6px 32px!important;border:1px solid var(--td-border)!important;border-radius:var(--td-radius)!important;background:var(--td-gray-50)!important;box-shadow:none!important;font-size:14px!important}
.td-combo__search input:focus{outline:none;border-color:var(--td-brand-600)!important;box-shadow:var(--td-ring)!important;background:#fff!important}
.td-combo__list{max-height:min(280px,50vh);margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;list-style:none}
.td-combo__list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--td-radius-sm);font-size:14px;line-height:1.4;cursor:pointer}
.td-combo__list li:hover,.td-combo__list li.is-active{background:var(--td-brand-100);color:var(--td-brand-800)}
.td-combo__list li[aria-selected="true"]{font-weight:600;color:var(--td-brand-800)}
.td-combo__list li[aria-disabled="true"]{color:var(--td-gray-400);cursor:not-allowed;background:none}
.td-combo__tick{flex:0 0 16px;width:16px;height:16px;color:var(--td-brand-700)}
.td-combo__empty{margin:0;padding:12px 10px;color:var(--td-text-subtle);font-size:13px;text-align:center}
.td-msel__tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 6px;color:var(--td-text-subtle);font-size:12px}
.td-msel__tools .td-link-btn{font-size:12px;background:none;border:0;padding:0;color:var(--td-link);font-weight:600;text-decoration:underline;cursor:pointer}
.td-msel__options{max-height:min(300px,50vh);overflow-y:auto;overscroll-behavior:contain}
.td-msel__panel .td-msel__list{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;margin:0!important;padding:0!important;border:0!important;max-height:none!important;overflow:visible!important}
.td-msel__panel .td-msel__list .td-check,.td-msel__panel .td-msel__list label{margin:0!important;padding:8px 10px!important;border:0!important;border-radius:var(--td-radius-sm)!important;background:none!important;font-size:14px;font-weight:500}
.td-msel__panel .td-msel__list label:hover{background:var(--td-brand-100)!important}
.td-msel__panel .td-msel__list label:has(input:checked){color:var(--td-brand-800);font-weight:600}
.td-msel__nomatch{display:none!important}
.td-msel__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.td-msel__chips[hidden]{display:none}
.td-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 4px 3px 10px;border:1px solid var(--td-secondary-dark);border-radius:var(--td-radius-full);background:var(--td-secondary);color:var(--td-secondary-ink);font-size:13px;font-weight:600;line-height:1.4}
.td-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-chip button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.td-chip button:hover{background:rgba(7,142,215,.15)}
.td-chip button .td-icon{width:14px;height:14px}
@media (max-width:680px){.td-combo__panel{position:fixed;left:12px;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));max-height:70vh;z-index:10001;box-shadow:0 -8px 40px rgba(15,23,42,.25)}.td-combo__list,.td-msel__options{max-height:50vh}}

/* Wide tables become stacked cards on phones (labels come from the column headers). */
@media (max-width:760px){
  .td-shell table.td-responsive-table,.tdg-shell table.td-responsive-table{display:block;overflow:visible}
  table.td-responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.td-responsive-table tbody{display:grid;gap:10px}
  table.td-responsive-table tr{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff}
  table.td-responsive-table tr:hover{background:#fff}
  table.td-responsive-table td{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);align-items:center;gap:10px;min-width:0!important;width:auto!important;padding:6px 0!important;border:0!important;overflow-wrap:anywhere}
  table.td-responsive-table td::before{content:attr(data-label);color:var(--td-text-subtle);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
  table.td-responsive-table td:not([data-label])::before,table.td-responsive-table td[data-label=""]::before{display:none}
  table.td-responsive-table td:not([data-label]),table.td-responsive-table td[data-label=""]{grid-template-columns:1fr}
  table.td-responsive-table td[colspan]{grid-template-columns:1fr}
  table.td-responsive-table td[colspan]::before{display:none}
  .td-shell :is(.td-table-wrap,.td-access-table-wrap):has(.td-responsive-table){border:0;background:none;overflow:visible}
}

/* ===== Instruction 28: read-first Settings ===== */
.td-settings{display:grid;gap:var(--td-space-5);min-width:0}
.td-settings__head h2{margin:0 0 4px;font-size:var(--td-text-xl);color:var(--td-text-strong)}
.td-settings__head p{margin:0;color:var(--td-text-muted);font-size:var(--td-text-sm)}
.td-settings-card{background:var(--td-surface);border:1px solid var(--td-border);border-radius:var(--td-radius-lg);box-shadow:var(--td-shadow-xs);overflow:hidden}
.td-settings-card__head{display:flex;align-items:center;gap:var(--td-space-3);padding:var(--td-space-4) var(--td-space-5);border-bottom:1px solid var(--td-border);background:var(--td-bg-subtle)}
.td-settings-card__head h3{margin:0;font-size:var(--td-text-md);color:var(--td-text-strong)}
.td-settings-card__head p{margin:2px 0 0;font-size:13px;color:var(--td-text-muted)}
.td-settings .td-icon-tile{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--td-secondary);color:var(--td-secondary-ink)}
.td-settings .td-icon-tile .td-icon{width:20px;height:20px}
.td-setting{padding:var(--td-space-4) var(--td-space-5);border-top:1px solid var(--td-border)}
.td-settings-card__head+.td-setting{border-top:0}
.td-setting.is-editing{background:var(--td-brand-50)}
.td-setting__view{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr) auto;align-items:start;gap:var(--td-space-4)}
.td-setting__view[hidden]{display:none}
.td-setting__view--stack{grid-template-columns:minmax(0,1fr) auto}
.td-setting__label{font-weight:600;color:var(--td-text-strong);font-size:var(--td-text-sm);padding-top:6px}
.td-setting__value{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:6px;color:var(--td-text);font-size:var(--td-text-sm);overflow-wrap:anywhere}
.td-setting__hint{display:inline-flex;align-items:center;gap:4px;flex-basis:100%;color:var(--td-text-muted);font-size:12.5px}
.td-setting__hint .td-icon{width:14px;height:14px}
.td-setting__empty{color:var(--td-text-subtle,var(--td-gray-500));font-style:italic}
.td-setting__muted{color:var(--td-text-muted)}
.td-setting__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.td-setting__actions:empty{display:none}
.td-setting__avatar{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--td-gray-100);flex:0 0 auto}
.td-setting__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.td-setting__avatar--lg{width:96px;height:96px}
.td-setting__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--td-space-3) var(--td-space-5);margin:0}
.td-setting__list>div{min-width:0}
.td-setting__list dt{margin:0 0 4px;font-size:12.5px;font-weight:600;color:var(--td-text-muted);text-transform:none}
.td-setting__list dd{margin:0;font-size:var(--td-text-sm);color:var(--td-text);overflow-wrap:anywhere}
.td-setting__chips{display:flex;flex-wrap:wrap;gap:6px}
.td-chip--static{padding-right:10px}
.td-setting__pending{display:flex;gap:10px;flex-basis:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--td-warning-300);border-radius:var(--td-radius);background:var(--td-warning-50);color:var(--td-warning-700)}
.td-setting__pending>.td-icon{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.td-setting__pending strong{color:var(--td-text-strong)}
.td-setting__pending small{display:block;margin-top:4px;color:var(--td-text-muted)}
.td-setting__pending-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.td-setting__form{display:grid;gap:var(--td-space-4);margin:0}
.td-setting__form[hidden]{display:none}
.td-setting__form .td-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--td-space-4)}
.td-setting__form .td-field{margin:0}
.td-setting__buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.td-setting__error{margin:0;padding:10px 12px;border-radius:var(--td-radius);background:var(--td-danger-50);border:1px solid var(--td-danger-300);color:var(--td-danger-700);font-size:var(--td-text-sm)}
.td-setting__error[hidden]{display:none}
.td-settings .td-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--td-radius-full);font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap}
.td-settings .td-badge .td-icon{width:13px;height:13px}
.td-settings .td-badge--success{background:var(--td-success-100);color:var(--td-success-700)}
.td-settings .td-badge--warning{background:var(--td-warning-100);color:var(--td-warning-700)}
.td-settings .td-badge--danger{background:var(--td-danger-100);color:var(--td-danger-700)}
.td-settings .td-badge--info{background:var(--td-secondary);color:var(--td-secondary-ink)}
.td-settings .td-badge--neutral{background:var(--td-gray-100);color:var(--td-gray-700)}
.td-settings .td-link-btn{padding:0;border:0;background:none;color:var(--td-link);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.td-settings .td-link-btn:disabled{color:var(--td-gray-400,#94A3B8);cursor:not-allowed;text-decoration:none}
.td-settings .td-link-btn--danger{color:var(--td-danger-600)}
.td-settings .td-inline-form{display:inline;margin:0}
.td-input-prefix{display:flex;align-items:stretch;border:1px solid var(--td-border-strong,var(--td-gray-300));border-radius:var(--td-radius);background:var(--td-surface);overflow:hidden}
.td-input-prefix:focus-within{box-shadow:var(--td-ring);border-color:var(--td-brand-500)}
.td-input-prefix>span{display:grid;place-items:center;padding:0 10px;background:var(--td-bg-subtle);color:var(--td-text-muted);font-weight:600;border-right:1px solid var(--td-border)}
.td-input-prefix input{flex:1;min-width:0;border:0!important;box-shadow:none!important;border-radius:0!important}
.td-photo-edit{display:flex;align-items:center;gap:var(--td-space-4);flex-wrap:wrap}
.td-photo-edit .td-field{flex:1;min-width:220px}
.td-fieldset{margin:0;padding:0;border:0}
.td-fieldset legend{margin-bottom:6px;font-weight:600;font-size:var(--td-text-sm);color:var(--td-text-strong)}
.td-settings [data-ts-board-field][hidden]{display:none}
.td-password-modal .td-field{margin-top:14px}
.td-password-modal .td-field input{width:100%}
@media (max-width:720px){
  .td-setting{padding:var(--td-space-4)}
  .td-settings-card__head{padding:var(--td-space-4)}
  .td-setting__view,.td-setting__view--stack{grid-template-columns:1fr;gap:var(--td-space-2)}
  .td-setting__label{padding-top:0}
  .td-setting__value{padding-top:0}
  .td-setting__actions{justify-content:flex-start}
  .td-setting__buttons{justify-content:stretch}
  .td-setting__buttons .td-btn{flex:1}
}
.td-password-modal .td-modal__body>div{flex:1;min-width:0}

/* ===== Instruction 28: user workspace pages ===== */
.td-dashboard-head__text{min-width:0}
.td-dashboard-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;color:var(--td-text-muted);font-size:var(--td-text-sm)}
.td-dashboard-head__meta .td-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--td-radius-full);font-size:12px;font-weight:600}
.td-dashboard-head__meta .td-badge .td-icon{width:13px;height:13px}
.td-badge--success{background:var(--td-success-100);color:var(--td-success-700)}
.td-badge--warning{background:var(--td-warning-100);color:var(--td-warning-700)}
.td-badge--danger{background:var(--td-danger-100);color:var(--td-danger-700)}
.td-badge--info{background:var(--td-secondary);color:var(--td-secondary-ink)}
.td-badge--neutral{background:var(--td-gray-100);color:var(--td-gray-700)}
.td-ws-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--td-space-3) var(--td-space-4);margin:0 0 var(--td-space-4)}
.td-ws-head h2{margin:0;font-size:var(--td-text-xl);line-height:1.35;color:var(--td-text-strong)}
.td-ws-head p{margin:4px 0 0;color:var(--td-text-muted);font-size:var(--td-text-sm)}
.td-ws-head__actions{display:flex;flex-wrap:wrap;gap:8px}
.td-dashboard-content>.td-panel,.td-dashboard-content>.td-metrics,.td-dashboard-content>.td-ws-grid{margin-bottom:var(--td-space-4)}
.td-ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--td-space-4)}
.td-ws-grid>.td-panel{margin:0}
.td-ws-card{display:flex;flex-direction:column;gap:var(--td-space-3);align-items:flex-start}
.td-ws-card>*{max-width:100%}
.td-ws-card .td-setting__list{width:100%}
.td-ws-card h3,.td-ws-subhead{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--td-text-md);color:var(--td-text-strong)}
.td-ws-subhead{margin-bottom:var(--td-space-3)}
.td-ws-card h3 .td-icon{width:18px;height:18px;color:var(--td-brand-700)}
.td-ws-card p{margin:0}
.td-ws-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.td-ws-link{font-size:13px;font-weight:600;color:var(--td-link)}
.td-ws-bio{color:var(--td-text);line-height:1.7}
.td-ws-list{list-style:none;margin:0;padding:0;width:100%}
.td-ws-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--td-border)}
.td-ws-list li:first-child{border-top:0;padding-top:0}
.td-ws-list a{display:grid;gap:2px;min-width:0;color:inherit;text-decoration:none}
.td-ws-list a:hover .td-ws-list__title{color:var(--td-link)}
.td-ws-list__title{font-weight:600;color:var(--td-text-strong);overflow-wrap:anywhere}
.td-ws-list__meta{font-size:12.5px;color:var(--td-text-muted)}
.td-ws-score{display:grid;justify-items:end;font-weight:700;color:var(--td-text-strong)}
.td-ws-score small{font-weight:500;color:var(--td-text-muted);font-size:12px}
.td-ws-table td{vertical-align:middle}
.td-ws-table__title{font-weight:600;color:var(--td-text-strong)}
a.td-ws-table__title{color:var(--td-text-strong);text-decoration:none}
a.td-ws-table__title:hover{color:var(--td-link);text-decoration:underline}
.td-ws-table__action{text-align:right;white-space:nowrap}
.td-ws-pos{color:var(--td-success-700);font-weight:600}
.td-ws-neg{color:var(--td-danger-600);font-weight:600}
.td-ws-person{display:inline-flex;align-items:center;gap:10px}
.td-ws-person img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.td-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--td-space-3);margin-bottom:var(--td-space-4)}
.td-panel .td-metrics{margin-bottom:0}
.td-metric{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:var(--td-surface)}
.td-metric .td-icon-tile{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--td-secondary);color:var(--td-secondary-ink)}
.td-metric__label{display:block;font-size:12.5px;color:var(--td-text-muted)}
.td-metric__value{display:block;font-size:var(--td-text-xl);line-height:1.3;color:var(--td-text-strong)}
.td-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--td-gray-300);border-top-color:var(--td-brand-500);border-radius:50%;animation:td-spin .8s linear infinite;vertical-align:-3px}
@keyframes td-spin{to{transform:rotate(360deg)}}
.td-notification-fallback .td-icon{width:18px;height:18px}
.td-notification-empty .td-empty-state{padding:var(--td-space-6) 0}
@media (max-width:720px){.td-ws-table__action{text-align:left}}
.td-ws-card .td-setting__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.td-ws-card p,.td-ws-card .td-setting__muted{font-size:var(--td-text-sm);line-height:1.6}
.td-ws-card .td-setting__muted .td-icon{width:15px;height:15px;vertical-align:-2px}
.td-setting__actions form{display:flex}
.td-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.td-row-actions .td-inline-form{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin:0}
.td-resume-form label{display:grid;gap:2px;font-size:12px;color:var(--td-text-muted)}
.td-resume-form input{min-height:34px;padding:4px 8px;border:1px solid var(--td-border-strong,var(--td-gray-300));border-radius:var(--td-radius)}
.td-ws-alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:500}
.td-ws-alert>.td-icon{flex:0 0 auto}
.td-ws-alert>div{flex:1;min-width:200px;display:grid;gap:2px}
.td-ws-alert__link{font-size:13px;color:var(--td-text-muted);overflow-wrap:anywhere}
@media (max-width:720px){.td-row-actions{justify-content:flex-start}}
.td-field label>small,.td-field>label small{display:inline;margin:0 0 0 4px;font-weight:500;font-size:12.5px;color:var(--td-text-muted)}
@media (max-width:760px){
  .td-shell table.td-responsive-table,.tdg-shell table.td-responsive-table{min-width:0!important;width:100%!important;max-width:100%}
  table.td-responsive-table tbody,table.td-responsive-table tr{min-width:0;max-width:100%}
  table.td-responsive-table td,table.td-responsive-table th{white-space:normal!important}
  table.td-responsive-table td>*{min-width:0!important;max-width:100%}
}
.td-notification-item.is-unread p,.td-notification-item.is-unread .td-notification-meta{color:var(--td-gray-700)}.td-notification-item.is-unread a,.td-notification-item.is-unread .td-notification-state{color:var(--td-secondary-ink)}

/* ===== Instruction 29: /become-an-instructor/ ===== */
.td-bi{display:grid;gap:clamp(28px,4vw,44px);color:var(--td-text)}
.td-bi a:not(.td-btn){color:var(--td-link)}
.td-bi .td-eyebrow{color:var(--td-brand-700);letter-spacing:.12em}
.td-bi h2{margin:0 0 12px;font-size:clamp(20px,2.2vw,24px);line-height:1.4;color:var(--td-text-strong)}
.td-bi h3{margin:0;font-size:16px;line-height:1.45;color:var(--td-text-strong)}
.td-bi p{margin:0;font-size:15px;line-height:1.75;color:var(--td-text-muted)}
.td-bi-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,48px);padding:clamp(20px,3vw,36px);border:1px solid var(--td-border);border-radius:var(--td-radius-xl);background:linear-gradient(135deg,#fff 0%,var(--td-brand-50) 100%)}
.td-bi-hero h1{margin:6px 0 12px;font-size:clamp(26px,3.4vw,40px);line-height:1.35;color:var(--td-text-strong)}
.td-bi-lead{max-width:62ch;font-size:16px!important;color:var(--td-text)!important}
.td-bi-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.td-bi-link{font-weight:600;font-size:14px}
.td-bi-hero__art img{display:block;width:100%;max-width:400px;height:auto;margin-inline:auto}
.td-bi-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.td-bi-card{display:grid;align-content:start;gap:8px;padding:18px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff}
.td-bi-card p{font-size:14px;line-height:1.65}
.td-bi .td-icon-tile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--td-secondary);color:var(--td-secondary-ink)}
.td-bi .td-icon-tile .td-icon{width:20px;height:20px}
.td-bi-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px;padding:0;list-style:none;counter-reset:none}
.td-bi-steps li{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;font-weight:600;font-size:14px;color:var(--td-text-strong);line-height:1.4}
.td-bi-steps li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid var(--td-gray-400,#94A3B8);border-right:2px solid var(--td-gray-400,#94A3B8);transform:translateY(-50%) rotate(45deg)}
.td-bi-steps li:last-child{border-color:var(--td-success-300);background:var(--td-success-50)}
.td-bi-steps__n{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--td-secondary);color:var(--td-secondary-ink);font-size:13px}
.td-bi-note{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:var(--td-radius);background:var(--td-warning-50);border:1px solid var(--td-warning-300);color:var(--td-warning-700)!important;font-size:14px!important}
.td-bi-note .td-icon{flex:0 0 auto;width:18px;height:18px;margin-top:3px}
.td-bi-prep{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px 18px;margin:14px 0 0;padding:0;list-style:none}
.td-bi-prep li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--td-text)}
.td-bi-prep .td-icon{flex:0 0 auto;width:16px;height:16px;color:var(--td-success-600)}
.td-bi-apply{scroll-margin-top:calc(var(--td-header-h) + 16px)}
.td-bi-apply:focus{outline:none}
.td-bi-auth{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0}
.td-bi-auth>div:first-child{flex:1;min-width:260px}
.td-bi-auth__actions{display:flex;flex-wrap:wrap;gap:10px}
.td-bi-faq{display:grid;gap:8px}
.td-bi-faq h2{margin-bottom:6px}
.td-bi-qa{border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff}
.td-bi-qa summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:600;color:var(--td-text-strong);cursor:pointer;list-style:none}
.td-bi-qa summary::-webkit-details-marker{display:none}
.td-bi-qa summary .td-icon{flex:0 0 auto;width:18px;height:18px;transition:transform .15s}
.td-bi-qa[open] summary .td-icon{transform:rotate(180deg)}
.td-bi-qa p{padding:0 16px 14px;font-size:14px}
.td-bi-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:var(--td-radius-xl);background:var(--td-secondary)}
.td-bi-final h2{margin:0 0 4px;font-size:20px}
.td-bi-final p{color:var(--td-text)!important}
/* Application */
.td-ia{display:grid;gap:14px}
.td-ia-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.td-ia-head h2{margin:0}
.td-ia .td-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--td-radius-full);font-size:13px;font-weight:600}
.td-ia .td-badge .td-icon{width:15px;height:15px}
.td-ia-sub{font-size:14px!important}
.td-ia-state{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin:0}
.td-ia-state>.td-illustration{flex:0 0 auto;width:150px;height:auto}
.td-ia-state>div{flex:1;min-width:260px;display:grid;gap:12px}
.td-ia-state h3{font-size:19px}
.td-ia-actions{display:flex;flex-wrap:wrap;gap:8px}
.td-ia-notice{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--td-radius-lg);border:1px solid var(--td-danger-300);background:var(--td-danger-50)}
.td-ia-notice .td-illustration{flex:0 0 auto;width:96px;height:auto}
.td-ia-notice h3{color:var(--td-danger-700)}
.td-ia-notice p{color:var(--td-text)!important;font-size:14px!important}
.td-ia-form{display:grid;gap:16px;margin:0}
.td-ia-section{margin:0;padding:18px 20px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:#fff;min-width:0;scroll-margin-top:calc(var(--td-header-h) + 16px)}
.td-ia-section legend{display:flex;align-items:center;gap:8px;float:left;width:100%;margin:0 0 14px;padding:0;font-size:16px;font-weight:700;color:var(--td-text-strong)}
.td-ia-section legend+*{clear:both}
.td-ia-section legend .td-icon{width:18px;height:18px;color:var(--td-brand-700)}
.td-ia-section legend .td-opt{margin-left:auto}
.td-ia-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.td-ia .td-field{margin-bottom:14px}
.td-ia .td-field label{font-weight:600;font-size:14px}
.td-req{color:var(--td-danger-600);font-weight:700}
.td-opt{margin-left:4px;padding:1px 8px;border-radius:var(--td-radius-full);background:var(--td-gray-100);color:var(--td-gray-600);font-size:11.5px;font-weight:500}
.td-ia-checks{display:flex;flex-direction:column;gap:2px}
.td-ia-checks--inline{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.td-ia-checks .td-check{margin:4px 0}
.td-ia-checks[hidden]{display:none}
.td-ia-na{margin:4px 0 0!important;font-size:13.5px!important;color:var(--td-text-subtle,var(--td-gray-500))!important;font-style:italic}
.td-ia-na[hidden]{display:none}
.td-input-suffix{display:flex;align-items:stretch;max-width:220px;border:1px solid var(--td-gray-300);border-radius:var(--td-radius);background:#fff;overflow:hidden}
.td-input-suffix:focus-within{border-color:var(--td-brand-500);box-shadow:var(--td-ring)}
.td-input-suffix input{flex:1;min-width:0;border:0!important;box-shadow:none!important;outline:none!important;border-radius:0!important}
.td-input-suffix span{display:grid;place-items:center;padding:0 12px;background:var(--td-bg-subtle);border-left:1px solid var(--td-border);color:var(--td-text-muted);font-size:14px}
.td-ia .td-field-error{margin:6px 0 0;min-height:0;font-size:13px;color:var(--td-danger-600);font-weight:600}
.td-ia .td-field-error[hidden]{display:none}
.td-ia .has-error input:not([type=checkbox]),.td-ia .has-error textarea,.td-ia .has-error .td-combo__toggle,.td-ia .has-error .td-input-suffix{border-color:var(--td-danger-600)!important}
.td-ia-submitbar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border:1px solid var(--td-border);border-radius:var(--td-radius-lg);background:rgba(255,255,255,.97);box-shadow:0 -6px 20px rgba(15,23,42,.06)}
.td-ia-autosave{margin:0!important;font-size:13px!important;color:var(--td-text-muted)!important;min-height:1.4em;display:flex;align-items:center;gap:6px}
.td-ia-submitbar .td-setting__error{flex-basis:100%;order:3}
.td-ia-submitbar__buttons{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
@media (max-width:1024px){
  .td-bi-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .td-bi-steps{grid-template-columns:1fr;gap:8px}
  .td-bi-steps li:not(:last-child)::after{right:auto;left:26px;top:auto;bottom:-9px;transform:rotate(135deg)}
}
@media (max-width:760px){
  .td-bi-hero{grid-template-columns:1fr;padding:18px}
  .td-bi-hero__art{order:2}
  .td-bi-hero__art img{max-width:180px}
  .td-bi-cards{grid-template-columns:1fr}
  .td-ia-grid{grid-template-columns:1fr}
  .td-ia-section{padding:16px 14px}
  .td-ia-submitbar{bottom:calc(env(safe-area-inset-bottom,0px))}
  .td-ia-submitbar__buttons{width:100%;margin:0}
  .td-ia-submitbar__buttons .td-btn{flex:1}
  .td-ia-state>.td-illustration{width:110px}
  .td-ia-notice{flex-direction:column;align-items:flex-start}
}
.td-ia .td-badge.td-badge--success{background:var(--td-success-100);color:var(--td-success-700)}
.td-ia .td-badge.td-badge--warning{background:var(--td-warning-100);color:var(--td-warning-700)}
.td-ia .td-badge.td-badge--danger{background:var(--td-danger-100);color:var(--td-danger-700)}
.td-ia .td-badge.td-badge--neutral{background:var(--td-gray-100);color:var(--td-gray-700)}
.td-ia-notice a{color:var(--td-danger-700)!important;text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* ===== Instruction 30: Instructor settings & public profile ===== */
.td-ps-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.td-ps-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.td-ps .td-badge.td-badge--success{background:var(--td-success-100);color:var(--td-success-700)}
.td-ps-vis{margin-left:2px}
.td-ps .td-setting__value{gap:6px 12px}
.td-ps-value{min-width:0;overflow-wrap:anywhere}
.td-ps .td-setting__form .td-ia-grid{align-items:start}
.td-ps .td-ps-vis-field select{max-width:100%}
.td-ps .td-setting__form[data-ia-taxonomy] .td-ps-vis-field{max-width:420px}
.td-ips-readonly dt{display:flex;align-items:center;gap:6px}
.td-ipub{display:grid;gap:20px}
.td-ipub-hero{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:clamp(18px,3vw,30px);border:1px solid var(--td-border);border-radius:var(--td-radius-xl);background:linear-gradient(135deg,#fff 0%,var(--td-brand-50) 100%)}
.td-ipub-hero__avatar img{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--td-brand-200)}
.td-ipub-hero__text{flex:1;min-width:240px;display:grid;gap:8px;justify-items:start}
.td-ipub-hero h1{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.3;color:var(--td-text-strong)}
.td-ipub .td-badge.td-badge--success{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--td-radius-full);background:var(--td-success-100);color:var(--td-success-700);font-size:12.5px;font-weight:600}
.td-ipub .td-badge .td-icon{width:14px;height:14px}
.td-ipub-title{margin:0;font-size:16px;font-weight:600;color:var(--td-brand-700)}
.td-ipub-short{margin:0;max-width:70ch;color:var(--td-text);line-height:1.7}
.td-ipub-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.td-ipub-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;align-items:start}
.td-ipub-grid>*{display:grid;gap:16px;min-width:0}
.td-ipub-grid .td-panel{margin:0}
.td-ipub h2{margin:0 0 12px;font-size:18px;color:var(--td-text-strong)}
.td-ipub-bio{margin:0;line-height:1.8;color:var(--td-text)}
.td-ipub-dl{display:grid;gap:12px;margin:0}
.td-ipub-dl dt{margin:0 0 4px;font-size:12.5px;font-weight:600;color:var(--td-text-muted)}
.td-ipub-dl dd{margin:0;color:var(--td-text);overflow-wrap:anywhere}
@media (max-width:900px){.td-ipub-grid{grid-template-columns:1fr}}
/* Instruction 48: email verification controls */
.td-ev-actions{flex-basis:100%;margin-top:8px}.td-ev-buttons{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:8px}.td-ev-buttons .td-inline-form{display:inline-flex;align-items:center;gap:6px;margin:0}.td-ev-note{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0;padding:10px 12px;border:1px solid var(--td-success-300);border-radius:var(--td-radius);background:var(--td-success-100);color:var(--td-gray-900);font-size:14px;line-height:1.5}.td-ev-note svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--td-success-700)}.td-ev-cooldown{color:var(--td-gray-600);font-weight:600}.td-ev-code{flex-basis:100%;margin-top:12px;padding:14px;border:1px solid var(--td-gray-200);border-radius:var(--td-radius);background:var(--td-gray-50,#fafafa)}.td-ev-code label{display:block;font-weight:800;margin-bottom:6px}.td-ev-code__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.td-ev-code__row input{width:150px;max-width:100%;min-height:44px;padding:8px 12px;font-size:22px;letter-spacing:.35em;text-align:center;border:1px solid var(--td-gray-300);border-radius:var(--td-radius);font-variant-numeric:tabular-nums}.td-ev-code__actions{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:10px}.td-ev-code .td-setting__error{margin:8px 0 0}.td-ev-method{border:0;padding:0;margin:0 0 14px}.td-ev-method legend{font-weight:700;margin-bottom:6px}.td-verify-email .td-form-actions{margin-top:14px}@media(max-width:520px){.td-ev-buttons .td-inline-form,.td-ev-buttons .td-btn{width:100%}.td-ev-code__row input{width:100%}}