/* Shared visual language with the draiver.si school dashboard. */
:root{
  --ink:#14282e;
  --muted:#6e7f84;
  --orange:#ff6b20;
  --orange-deep:#ed5e16;
  --cream:#f5f7f6;
  --line:#e5ebec;
  --dark:#073540;
  --teal:#0d5360;
  --shadow:0 16px 48px rgba(14,44,50,.08);
}

body{
  background-color:var(--cream);
  background-image:linear-gradient(rgba(245,247,246,.96),rgba(245,247,246,.96)),url('./apps/platform/assets/main-d-watermark-pattern-v2.png');
  background-size:auto,1100px 700px;
  background-position:center top;
}
.app-shell{grid-template-columns:238px minmax(0,1fr)}
.sidebar{
  position:sticky;
  top:76px;
  height:calc(100vh - 76px);
  min-height:calc(100vh - 76px);
  padding:16px 14px 14px;
  overflow:auto;
  border:0;
  color:#dfeaec;
  background:linear-gradient(180deg,#073540,#063d49 69%,#073540);
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar .brand{display:none}
.sidebar-identity{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:60px;
  margin:0 3px 20px;
  padding:9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(255,255,255,.055);
}
.sidebar-identity-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#c5e957,#84b900);color:#073540;font-size:18px}
.sidebar-identity strong,.sidebar-identity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-identity strong{font-size:11px;color:#fff}
.sidebar-identity small{margin-top:3px;font-size:9px;color:#92b0b5}
.sidebar-identity-chevron{color:#789da3}
.sidebar-group-label{padding:0 13px 9px;color:#6f9aa0;font-size:9px}
.side-nav{gap:3px}
.nav-item{position:relative;min-height:42px;padding:8px 12px;color:#acc4c7;border-radius:9px;font-size:12px}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.is-active{background:#fff;color:#073540;box-shadow:0 8px 22px rgba(1,25,31,.2)}
.nav-item.is-active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#a7db00}
.nav-icon{font-size:19px;color:#a8c6c8}
.nav-item.is-active .nav-icon{color:#ff6b20}
.sidebar-visual{height:145px;margin:12px 3px 3px;background:url('./apps/platform/assets/sidebar-tech-car.png') center bottom/contain no-repeat;opacity:.8}
.sidebar-note{margin:0 3px;padding:12px;border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.045);color:#e3eff0}
.sidebar-note strong{color:#fff;font-size:11px}
.sidebar-note p{color:#91b3b7;font-size:9px}
.sidebar-bottom{padding:13px 6px 0;color:#789da2;font-size:8px}
.small-dot{background:#a7db00;box-shadow:0 0 0 4px rgba(167,219,0,.15)}

.main-wrap{padding-top:76px}
.topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:60;
  display:grid;
  grid-template-columns:238px minmax(0,1fr) auto;
  gap:18px;
  height:76px;
  padding:0 26px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(9,41,47,.025);
}
.platform-brand{display:flex;align-items:center;width:187px;height:100%}
.platform-brand img{display:block;width:174px;height:auto;max-height:54px;object-fit:contain}
.topbar .mobile-brand{display:none}
.breadcrumb{
  justify-self:center;
  justify-content:flex-start;
  width:min(540px,100%);
  min-height:38px;
  padding:0 13px;
  border:1px solid #e5ebec;
  border-radius:10px;
  background:#f8faf9;
  color:#829398;
  font-size:11px;
}
.breadcrumb:before{content:"▣";font-size:13px;color:#ff6b20;margin-right:3px}
.breadcrumb strong{color:#173f48}
.topbar-right{gap:12px}
.demo-pill{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#466a6e;font-size:10px}
.avatar{background:#dceeee;color:#174a4d;width:36px;height:36px}
main{width:min(1460px,100%);padding:30px 34px 70px}

.page-heading{
  min-height:146px;
  align-items:center;
  margin:0 0 20px;
  padding:22px 27px;
  border:1px solid #e0ebeb;
  border-radius:19px;
  background:#eef7f5 url('./apps/platform/assets/hero-road-light.png') right center/auto 100% no-repeat;
  box-shadow:var(--shadow);
}
.page-heading>div{position:relative;z-index:1}
.page-heading h1{color:#093743;font-size:clamp(29px,2.7vw,39px);margin:7px 0 5px}
.page-heading p{color:#678087;max-width:580px}
.section-kicker,.aside-kicker{color:#ff6b20}
.feature-badge{position:relative;z-index:1;border-color:#dce8e7;color:#174f58;background:#fff}
.release-banner{background:linear-gradient(113deg,#073540,#0a4651);box-shadow:var(--shadow)}
.release-badge{background:#a7db00;color:#183d42}
.home-hero,.mode-card,.aside-card,.lesson-panel,.decision-panel,.drive-controls,.demo-cockpit{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.lesson-panel,.decision-panel,.aside-card{border-radius:16px}
.lesson-item{border-color:#e5ebec}
.lesson-item:hover{border-color:#ffbc97}
.lesson-item.is-active{border-color:#ffb78f;background:#fff7f1;box-shadow:inset 3px 0 #ff6b20}
.lesson-icon{background:#eaf3f2;color:#0d6671}
.lesson-item.is-active .lesson-icon{background:#fff0e7;color:#ff6b20}
.lesson-check{color:#62a45a}
.mini-progress span,.journey-track span{background:linear-gradient(90deg,#ff6b20,#a7db00)}
.simulation-stage,.drive-stage{box-shadow:var(--shadow)}
.stage-label,.stage-place{background:rgba(7,53,64,.82)}
.simulation-prompt,.sim-speed,.stage-dashboard{background:rgba(7,47,57,.91)}
.prompt-kicker{color:#ffb789}
.demo-pedal-gas{background:#0d5360}
.demo-pedal-brake{background:#e6674c}
.btn-primary{background:#ff6b20;box-shadow:0 7px 18px rgba(255,107,32,.2)}
.btn-primary:hover{background:#ed5e16}
.home-footnote{color:#7e9296}
.classroom-nav-link{text-decoration:none}
.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mode-card-classroom{text-decoration:none;color:inherit}
.mode-card-classroom .mode-symbol{background:#e7f2f0;color:#0c6973}
.classroom-art{display:flex;align-items:center;gap:13px;padding:12px 15px;background:linear-gradient(135deg,#0a3c47,#126371)}
.classroom-art-screen{position:relative;display:grid;place-items:center;width:58%;height:100%;border:2px solid #75a5a7;border-radius:8px;background:linear-gradient(150deg,#214e54 40%,#2f7378);overflow:hidden}
.classroom-art-road{position:absolute;bottom:-14px;width:62%;height:66%;background:#536366;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%)}
.classroom-art-road:after{content:"";position:absolute;left:49%;top:7%;width:3px;height:90%;background:repeating-linear-gradient(to bottom,#fff 0 7px,transparent 7px 15px)}
.classroom-art-play{z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ff6b20;color:#fff;font-size:12px;box-shadow:0 6px 16px #062e35aa}
.classroom-art-cues{align-self:stretch;display:flex;flex-direction:column;justify-content:space-around;flex:1}
.classroom-art-cues i{display:block;height:10px;border-radius:3px;background:#5b9599}
.classroom-art-cues i:nth-child(2){width:78%;background:#a7db00}
.classroom-art-cues i:nth-child(3){width:62%}
.classroom-art-badge{position:absolute;right:10px;bottom:8px;padding:4px 6px;border-radius:4px;background:#a7db00;color:#173b41;font-size:8px;font-weight:900;letter-spacing:.04em}
@media(max-width:1250px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-card-classroom{grid-column:1/-1}.mode-card-classroom .classroom-art{height:125px}}
@media(max-width:700px){.mode-grid{grid-template-columns:1fr}.mode-card-classroom{grid-column:auto}.mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}}
.drive3d-coach{display:grid;grid-template-columns:88px 160px minmax(0,1fr);align-items:center;gap:15px;margin-top:12px;padding:11px 15px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 7px 20px rgba(14,44,50,.045)}
.drive3d-coach[hidden],.drive3d-steps[hidden]{display:none!important}
.drive3d-limit{display:grid;justify-items:center;gap:1px}
.drive3d-limit span,.drive3d-stopping span{color:#81989a;font-size:8px;font-weight:900;letter-spacing:.08em}
.drive3d-limit strong{display:grid;place-items:center;width:46px;height:46px;margin-top:4px;border:5px solid #dc5140;border-radius:50%;color:#173943;background:#fff;font-size:20px;line-height:1}
.drive3d-limit small,.drive3d-stopping small{color:#81989a;font-size:9px}
.drive3d-stopping{display:flex;flex-direction:column;gap:3px;border-left:1px solid #e4ece8;padding-left:15px}
.drive3d-stopping strong{font-size:21px;color:#103d47;line-height:1.1}
.drive3d-coach p{margin:0;padding:11px 13px;background:#edf7f3;border-radius:9px;color:#195b51;font-size:11px;font-weight:750;line-height:1.4}
.drive3d-coach.is-urgent p{background:#fff0e8;color:#be512e}
.drive3d-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.drive3d-step{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:9px;align-items:center;padding:10px 13px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 7px 20px rgba(14,44,50,.045)}
.drive3d-step>span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#edf3f2;color:#678a8b;font-size:10px;font-weight:900}
.drive3d-step strong{font-size:11px;color:#1b3b42}
.drive3d-step small{font-size:9px;color:#82999c;margin-top:2px}
.drive3d-step.is-active{border-color:#ffba96;box-shadow:inset 3px 0 #ff6b20,0 7px 20px rgba(14,44,50,.045)}
.drive3d-step.is-active>span{background:#fff0e7;color:#ff6b20}
.drive3d-step.is-complete{border-color:#d0e8ce}
.drive3d-step.is-complete>span{background:#e9f7e6;color:#3c995a}
.drive3d-step.is-failed{border-color:#eeb7a9}
.drive3d-feedback{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.drive3d-feedback .feedback-icon{grid-column:1}
.drive3d-feedback>div:nth-child(2){grid-column:2}
.drive3d-report{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:4px}
.drive3d-report-row{padding:12px;border:1px solid #dce9e4;border-radius:9px;background:#fff}
.drive3d-report-row>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.drive3d-report-row strong{font-size:11px}
.drive3d-report-row span{padding:4px 6px;border-radius:5px;font-size:8px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.drive3d-report-row span.is-safe{background:#e8f7ec;color:#2e8753}
.drive3d-report-row span.is-error{background:#fff0e7;color:#d45c27}
.drive3d-report-row span.is-pending{background:#eef3f2;color:#778b8e}
.drive3d-report-row p{font-size:10px;line-height:1.5;margin:6px 0 0;color:#6f8385}
.drive3d-feedback .feedback-next{grid-column:1/-1;justify-self:start;margin:2px 0 0}

@media(max-width:1120px){
  .app-shell{grid-template-columns:200px minmax(0,1fr)}
  .topbar{grid-template-columns:200px minmax(0,1fr) auto}
  .platform-brand img{width:158px}
  .sidebar{padding-left:11px;padding-right:11px}
}
@media(max-width:850px){
  .app-shell{display:block}
  .sidebar{display:none}
  .main-wrap{padding-top:64px}
  .topbar{height:64px;grid-template-columns:1fr auto;padding:0 20px}
  .platform-brand{height:64px;width:145px}
  .platform-brand img{width:142px}
  .breadcrumb{display:none}
  .demo-pill{font-size:9px;padding:7px 9px}
  .mobile-nav{background:#073540;border-top:1px solid #1c5862;box-shadow:0 -8px 25px rgba(7,53,64,.15)}
  .mobile-nav-item{color:#a7c5c9}
  .mobile-nav-item.is-active{color:#fff;background:#0b4b56;box-shadow:inset 0 3px #a7db00}
  main{padding:23px 20px 100px}
}
@media(max-width:580px){
  .topbar{padding:0 17px}
  .platform-brand{width:124px}
  .platform-brand img{width:122px}
  .demo-pill{font-size:0;min-width:30px;height:30px;padding:0;justify-content:center}
  .demo-pill .small-dot{margin:0}
  .demo-pill:after{content:"Demo";font-size:9px;margin-left:6px}
  .page-heading{min-height:0;padding:19px 18px;background-size:auto 70%;background-position:right top}
  .page-heading h1{font-size:29px}
  .page-heading p{font-size:12px;max-width:88%}
  .feature-badge{display:none}
  .lesson-panel{padding:16px}
  .drive3d-steps{gap:6px;margin-top:8px}
  .drive3d-coach{grid-template-columns:75px 130px minmax(0,1fr);gap:8px;padding:10px}
  .drive3d-stopping{padding-left:8px}
  .drive3d-coach p{padding:8px;font-size:10px}
  .drive3d-step{padding:8px;grid-template-columns:24px minmax(0,1fr);column-gap:6px}
  .drive3d-step>span{width:24px;height:24px;font-size:9px}
  .drive3d-step strong{font-size:9px}
  .drive3d-step small{font-size:8px}
  .drive3d-report{grid-template-columns:1fr}
}
@media(max-width:580px){
  .drive3d-coach{grid-template-columns:72px minmax(0,1fr);gap:8px}
  .drive3d-limit{grid-row:1/3}
  .drive3d-stopping{border-left:0;padding-left:0}
  .drive3d-coach p{grid-column:2}
  .drive3d-step{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:66px;text-align:center}
  .drive3d-step strong{font-size:10px;line-height:1.2}
  .drive3d-step small{display:none}
}