html, body { background:#FAFAF7; color:#0A1628; font-family:'Manrope', sans-serif; }
body { min-height:100vh; }
.font-display { font-family:'Fraunces', serif; font-feature-settings:"ss01"; }

[data-screen] { display:none !important; }
html[data-view="app"]     [data-screen="app"]     { display:flex !important; }
html[data-view="trainee"] [data-screen="trainee"] { display:flex !important; }
html[data-view="home"]    [data-screen="home"]    { display:flex !important; flex-direction:column; }

.home-screen { background:#FAFAF7; height:100dvh; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; }
@media(max-width:1023px){ .home-screen { height:auto; min-height:100dvh; overflow:visible; } }

.home-header {
  background:#fff;
  border-bottom:1px solid #E8E5DC;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) 14px calc(32px + env(safe-area-inset-left, 0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  z-index:10;
  gap:12px;
}
@media(max-width:768px){ .home-header { padding: calc(12px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px)); } }
@media(max-width:480px){ .home-header { padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px)); } }

#home-brand-mark > div { min-width:0; }
@media(max-width:640px){
  #home-brand-mark img:first-child { height:34px !important; }
  #home-brand-mark img:last-child  { height:17px !important; }
  #home-brand-mark > div { gap:10px !important; }
}
@media(max-width:380px){
  #home-brand-mark img:first-child { height:30px !important; }
  #home-brand-mark img:last-child  { height:15px !important; }
  #home-brand-mark > div { gap:8px !important; }
}

.gear-btn-inline {
  width:38px; height:38px; border-radius:50%;
  background:#FAFAF7; border:1px solid #E8E5DC;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s; flex-shrink:0;
}
.gear-btn-inline:hover { background:#fff; transform:rotate(60deg); border-color:#2563EB; }
.gear-btn-inline svg { color:#5E7299; transition:color .25s; }
.gear-btn-inline:hover svg { color:#2563EB; }
@media(max-width:480px){ .gear-btn-inline { width:34px; height:34px; } }

.home-hero {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, #0F1B2D 0%, #1A2942 60%, #0A1628 100%);
}
@media(max-width:768px){ .home-hero { padding:52px 20px; } }
@media(max-width:480px){ .home-hero { padding:44px 16px; } }
.home-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(37,99,235,0.18), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(37,99,235,0.12), transparent 55%);
  pointer-events:none;
}
.home-hero::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(250,250,247,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,250,247,0.025) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.home-hero-content { max-width:780px; text-align:center; position:relative; z-index:1; width:100%; }

@media(max-width:380px){
  .home-hero-cta { flex-direction:column; align-items:stretch; }
  .home-hero-cta button { width:100%; justify-content:center; }
}

.home-footer-bar {
  background:#0A1628;
  color:#B5C0D6;
  padding: 16px calc(32px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(32px + env(safe-area-inset-left, 0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  flex-shrink:0;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid #1A2942;
}
.home-footer-bar .footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.home-footer-bar button { color:#8A9BBD; transition:color .2s; background:none; border:none; cursor:pointer; font:inherit; padding:0; }
.home-footer-bar button:hover { color:#fff; }
@media(max-width:768px){ .home-footer-bar { padding: 14px calc(20px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); } }
@media(max-width:640px){
  .home-footer-bar { padding: 16px calc(18px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)); justify-content:center; text-align:center; flex-direction:column; gap:10px; font-size:12px; }
  .home-footer-bar .footer-links { gap:18px; justify-content:center; }
}

.modal-xl { max-width:820px !important; }

[data-screen="app"] > header {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
[data-screen="app"] { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media(max-width:640px){
  .modal { padding:1.4rem 1.2rem !important; border-radius:.7rem !important; }
  .modal h3.font-display { font-size:1.35rem !important; }
}

.section { padding:80px 24px; max-width:1100px; margin:0 auto; }
.section.alt { background:#fff; max-width:none; }
.section.alt .inner { max-width:1100px; margin:0 auto; padding:0 24px; }

.value-card { background:#fff; border:1px solid #E8E5DC; border-radius:10px; padding:28px; transition:all .2s; }
.value-card:hover { border-color:#2563EB; transform:translateY(-3px); box-shadow:0 18px 36px rgba(10,22,40,0.06); }
.value-icon { width:44px; height:44px; background:#DBEAFE; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#1E40AF; margin-bottom:16px; }

.pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pill-pending { background:#FEF3C7; color:#B45309; }
.pill-approved { background:#DBEAFE; color:#1E40AF; }
.pill-rejected { background:#FEE2E2; color:#B91C1C; }
.pill-active   { background:#DBEAFE; color:#1E40AF; }
.pill-revoked  { background:#FEE2E2; color:#B91C1C; }
.pill-reissued { background:#FEF3C7; color:#B45309; }

.cert-filter-btn { padding:.45rem .9rem; font-size:.78rem; font-weight:500; color:#5E7299; border-radius:.45rem; transition:all .15s; cursor:pointer; background:none; border:none; }
.cert-filter-btn:hover { color:#0A1628; }
.cert-filter-btn.is-active { background:#fff; color:#0A1628; box-shadow:0 1px 3px rgba(10,22,40,0.08); }

.cert-timeline-item { display:flex; gap:14px; padding-bottom:18px; }
.cert-timeline-item:last-child { padding-bottom:0; }
.cert-timeline-marker { display:flex; flex-direction:column; align-items:center; flex-shrink:0; padding-top:2px; }
.cert-timeline-dot { width:14px; height:14px; border-radius:50%; border:2px solid; background:#fff; }
.cert-timeline-line { width:2px; flex:1; background:#E8E5DC; margin-top:4px; min-height:8px; }
.cert-timeline-content { flex:1; min-width:0; padding-top:1px; }

.t-screen { background: linear-gradient(180deg, #FAFAF7 0%, #F4F3EE 100%); min-height:100vh; flex-direction:column; align-items:center; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); box-sizing:border-box; }
.t-card { background:#fff; border:1px solid #E8E5DC; border-radius:1rem; box-shadow:0 1px 2px rgba(10,22,40,.04); }

.t-rgpd-modal { position:fixed; inset:0; background:rgba(10,22,40,0.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; padding-top:max(20px, env(safe-area-inset-top, 20px)); padding-bottom:max(20px, env(safe-area-inset-bottom, 20px)); animation: tFadeIn .18s ease-out; }
.t-rgpd-modal.is-open { display:flex; }
.t-rgpd-modal-content { background:#fff; border-radius:14px; max-width:720px; width:100%; max-height:100%; min-height:0; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(10,22,40,0.35); animation: tModalSlide .22s ease-out; overflow:hidden; }
.t-rgpd-modal-head { padding:22px 26px 16px; border-bottom:1px solid #E8E5DC; display:flex; align-items:flex-start; gap:12px; flex-shrink:0; }
.t-rgpd-modal-head h3 { font-family:'Fraunces',serif; font-size:22px; font-weight:500; letter-spacing:-0.01em; color:#0A1628; line-height:1.2; }
.t-rgpd-modal-head p { font-size:11px; text-transform:uppercase; letter-spacing:0.15em; color:#5E7299; margin-top:3px; }
.t-rgpd-modal-close-x { background:none; border:0; cursor:pointer; color:#5E7299; padding:6px; margin-left:auto; flex-shrink:0; }
.t-rgpd-modal-close-x:hover { color:#0A1628; }
.t-rgpd-modal-body { padding:18px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; flex:1 1 auto; min-height:0; font-size:14px; color:#1F2937; }
.t-rgpd-modal-body > * + * { margin-top:.5rem; }
.t-rgpd-modal-foot { padding:14px 26px 20px; border-top:1px solid #E8E5DC; display:flex; justify-content:flex-end; flex-shrink:0; gap:8px; }

@keyframes tFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes tModalSlide { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }

.checkbox-row.is-locked { opacity:0.45; cursor:not-allowed; }
.checkbox-row.is-locked input { pointer-events:none; }

.rgpd-read-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; background:#fff; border:1.5px solid #2563EB; color:#1E40AF; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; transition:all .15s; }
.rgpd-read-btn:hover { background:#DBEAFE; transform: translateY(-1px); }
.rgpd-read-btn.is-read { border-color:#16A34A; color:#15803D; background:#DCFCE7; }
.rgpd-read-btn.is-read:hover { background:#BBF7D0; }

.rgpd-hint { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; background:#FEF3C7; border:1px solid #FCD34D; border-radius:8px; color:#92400E; font-size:13px; font-weight:500; line-height:1.5; margin-top:12px; }
.rgpd-hint.is-hidden { display:none; }
.t-step { display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8A9BBD; }
.t-step-num { width:26px; height:26px; border-radius:50%; background:#F4F3EE; color:#5E7299; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-family:'Fraunces',serif; }
.t-step.is-active { color:#0A1628; }
.t-step.is-active .t-step-num { background:#0A1628; color:#fff; }
.t-step.is-done .t-step-num { background:#2563EB; color:#fff; }
.t-step-line { flex:1; height:1px; background:#E8E5DC; }
.t-step.is-done + .t-step-line { background:#2563EB; }

.yt-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#0A1628; border-radius:.6rem; overflow:hidden; }
.yt-wrap iframe { width:100%; height:100%; border:0; display:block; }
.yt-overlay { position:absolute; inset:0; pointer-events:none; }

.checkbox-row { display:flex; gap:.75rem; padding:.85rem; background:#FAFAF7; border:1px solid #E8E5DC; border-radius:.55rem; cursor:pointer; transition:all .12s; align-items:flex-start; }
.checkbox-row:hover { background:#F4F3EE; border-color:#D6D2C5; }
.checkbox-row.is-checked { background:#DBEAFE; border-color:#2563EB33; }
.checkbox-row input[type=checkbox] { width:18px; height:18px; margin-top:1px; accent-color:#2563EB; cursor:pointer; flex-shrink:0; }

.cert-frame { background:#fff; border:1px solid #E8E5DC; border-radius:.6rem; overflow:hidden; }

.grain::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.03;
}

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#D6D2C5; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#8A9BBD; }

@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes modalIn { from { opacity:0; transform:translate(-50%, calc(-50% + 8px)); } to { opacity:1; transform:translate(-50%, -50%); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.anim-in { animation:fadeUp .4s ease-out both; }
.anim-fade { animation:fadeIn .25s ease-out both; }

.stagger > * { opacity:0; animation:fadeUp .5s ease-out forwards; }
.stagger > *:nth-child(1){ animation-delay:.04s; }
.stagger > *:nth-child(2){ animation-delay:.08s; }
.stagger > *:nth-child(3){ animation-delay:.12s; }
.stagger > *:nth-child(4){ animation-delay:.16s; }
.stagger > *:nth-child(5){ animation-delay:.20s; }
.stagger > *:nth-child(n+6){ animation-delay:.24s; }

.input { width:100%; padding:.7rem .9rem; border:1px solid #E8E5DC; background:#fff; border-radius:.5rem; font-size:.9rem; transition:all .15s ease; color:#0A1628; }
.input:focus { outline:none; border-color:#0A1628; box-shadow:0 0 0 3px rgba(10,22,40,.08); }
.input::placeholder { color:#B5C0D6; }
.label { display:block; font-size:.78rem; font-weight:600; color:#1A2942; margin-bottom:.4rem; letter-spacing:.02em; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:.5rem; font-weight:600; font-size:.875rem; transition:all .15s ease; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.btn-primary { background:#0A1628; color:#fff; }
.btn-primary:hover { background:#1A2942; transform:translateY(-1px); box-shadow:0 6px 14px rgba(10,22,40,.18); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-secondary { background:#fff; color:#0A1628; border-color:#E8E5DC; }
.btn-secondary:hover { border-color:#0A1628; background:#FAFAF7; }
.btn-secondary:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost { background:transparent; color:#3D5278; }
.btn-ghost:hover { background:#F4F3EE; color:#0A1628; }
.btn-danger { background:#B91C1C; color:#fff; }
.btn-danger:hover { background:#8E1414; }
.icon-btn { padding:.45rem; border-radius:.4rem; color:#5E7299; transition:all .12s; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent; }
.icon-btn:hover { background:#F4F3EE; color:#0A1628; }
.icon-btn.danger:hover { background:#FEE2E2; color:#B91C1C; }

.toast { position:fixed; top:24px; right:24px; padding:.85rem 1.1rem; border-radius:.6rem; font-weight:600; font-size:.85rem; box-shadow:0 14px 30px rgba(10,22,40,.18); z-index:9999; animation:fadeUp .3s ease-out; max-width:380px; display:flex; align-items:center; gap:.6rem; }
.toast.success { background:#2563EB; color:#fff; }
.toast.error { background:#B91C1C; color:#fff; }
.toast.info { background:#0A1628; color:#fff; }

.modal-backdrop { position:fixed; inset:0; background:rgba(10,22,40,.55); z-index:100; animation:fadeIn .2s ease-out; backdrop-filter:blur(2px); }
.modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:.9rem; padding:1.8rem; width:92%; max-width:520px; max-height:90vh; overflow-y:auto; z-index:101; animation:modalIn .25s ease-out; box-shadow:0 30px 60px rgba(10,22,40,.25); }
.modal-lg { max-width:680px; }

.nav-link { display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:.5rem; color:#5E7299; font-weight:500; font-size:.875rem; transition:all .15s ease; cursor:pointer; user-select:none; }
.nav-link:hover:not(.is-disabled) { background:#F4F3EE; color:#0A1628; }
.nav-link.is-active { background:#0A1628; color:#fff; box-shadow:0 4px 12px rgba(10,22,40,.15); }
.nav-link.is-active svg { color:#fff; }
.nav-link.is-disabled { opacity:.38; cursor:not-allowed; }

.page { display:none; }
.page.is-active { display:block; animation:fadeUp .35s ease-out; }

.grid-row { display:grid; align-items:center; padding:.95rem 1.3rem; border-bottom:1px solid #F4F3EE; transition:background .12s ease; }
.grid-row:last-child { border-bottom:none; }
.grid-row.is-head { background:#FAFAF7; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#3D5278; border-bottom:1px solid #E8E5DC; }
.grid-row.is-data:hover { background:#FAFAF7; }

.badge { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:1rem; font-size:.7rem; font-weight:700; letter-spacing:.03em; }
.badge-accent { background:#DBEAFE; color:#1E40AF; }
.badge-paper { background:#F4F3EE; color:#1A2942; }
.badge-warn { background:#FEF3C7; color:#B45309; }

.skel { background:linear-gradient(90deg, #F4F3EE 0%, #E8E5DC 50%, #F4F3EE 100%); background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite; border-radius:.4rem; height:1rem; }

.login-aside {
  background:
    radial-gradient(at 25% 20%, rgba(37,99,235,0.20) 0px, transparent 50%),
    radial-gradient(at 75% 85%, rgba(94,114,153,0.15) 0px, transparent 50%),
    linear-gradient(135deg, #0A1628 0%, #1A2942 100%);
  position:relative; overflow:hidden;
}
.login-aside::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.quote-mark {
  position:absolute; top:-20px; left:-20px;
  font-family:'Fraunces', serif; font-size:220px; font-weight:400;
  color:rgba(59,130,246,0.22); line-height:1; user-select:none; pointer-events:none;
}

.clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.t-card { background:#fff; border:1px solid #E8E5DC; border-radius:.9rem; overflow:hidden; transition:all .18s ease; display:flex; flex-direction:column; }
.t-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,22,40,.10); border-color:#D6D2C5; }
.t-thumb { aspect-ratio:16/9; background:#0A1628; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.t-thumb img { width:100%; height:100%; object-fit:cover; }
.t-thumb-empty { color:#3D5278; }
.t-play { position:absolute; inset:0; background:rgba(10,22,40,.35); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.t-card:hover .t-play { opacity:1; }

.badge-danger { background:#FEE2E2; color:#B91C1C; }
.badge-muted { background:#F4F3EE; color:#5E7299; }

.mselect { max-height:240px; overflow-y:auto; border:1px solid #E8E5DC; border-radius:.5rem; background:#fff; }
.mselect-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; border-bottom:1px solid #F4F3EE; cursor:pointer; transition:background .1s; }
.mselect-item:last-child { border-bottom:none; }
.mselect-item:hover { background:#FAFAF7; }
.mselect-item.is-selected { background:#DBEAFE; }
.mselect-item input[type=checkbox] { accent-color:#2563EB; cursor:pointer; }

.token-pill { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.72rem; background:#F4F3EE; color:#1A2942; padding:.2rem .5rem; border-radius:.35rem; letter-spacing:.02em; }
.toggle { position:relative; width:42px; height:24px; background:#D6D2C5; border-radius:12px; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.toggle.is-on { background:#2563EB; }
.toggle.is-on::after { transform:translateX(18px); }

.stepper { display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem; }
.step { display:flex; align-items:center; gap:.45rem; font-size:.75rem; font-weight:600; color:#8A9BBD; }
.step-num { width:22px; height:22px; border-radius:50%; background:#F4F3EE; color:#5E7299; display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.step.is-active { color:#0A1628; }
.step.is-active .step-num { background:#0A1628; color:#fff; }
.step.is-done .step-num { background:#2563EB; color:#fff; }
.step-line { flex:1; height:1px; background:#E8E5DC; max-width:32px; }