/* =================================================== CAREER COMPASS ROADMAP PAGE Matching About Us Theme =================================================== */ :root{ --bg-main:#060814; --bg-surface:#0b0f24; --bg-surface-hover:#121838; --neon-blue:#3b82f6; --neon-purple:#7c3aed; --neon-indigo:#6366f1; --neon-cyan:#06b6d4; --text-primary:#f8fafc; --text-secondary:#94a3b8; --border-glow:#1e293b; --radius-md:12px; --radius-lg:20px; --transition:all .3s ease; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Inter',sans-serif; background:var(--bg-main); color:var(--text-primary); overflow-x:hidden; } .container{ width:100%; max-width:1200px; margin:auto; padding:0 24px; } /* ===================================== NAVBAR ===================================== */ .navbar{ position:sticky; top:0; z-index:1000; background:rgba(6,8,20,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-glow); padding:20px 0; } .nav-container{ display:flex; justify-content:space-between; align-items:center; } .logo a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:white; font-size:1.5rem; font-weight:800; } 
.logo-icon{
    color:var(--neon-indigo);
     font-size:1.7rem;
     } 
     .logo span{ 
        color:var(--neon-indigo); 
    } 
.nav-links{ 
    display:flex;
     gap:34px; 
    }
     .nav-links 
     a{ 
        text-decoration:none;
        color:var(--text-secondary);
        font-weight:500; 
        transition:var(--transition); 
    } 
    .nav-links a:hover, .nav-links a.active{ 
        color:white;
     }
      .nav-actions{
         display:flex; gap:16px; 
        } 
        .btn-login{
             padding:10px 22px; 
             border:1px solid var(--border-glow);
         border-radius:10px;
          text-decoration:none; 
          color:white;
         }
          .btn-signup{ 
            padding:10px 22px; border-radius:10px; 
            text-decoration:none; 
            color:white;
             background:linear-gradient( 135deg, var(--neon-blue), var(--neon-indigo) );
              box-shadow: 0 4px 15px rgba(59,130,246,.35); 
            } 
/* ===================================== ROADMAP HERO ===================================== */
 .roadmap-hero{ 
    padding:120px 0;
     text-align:center;
     background: radial-gradient(circle at top right, rgba(99,102,241,.12), transparent 50%),radial-gradient(circle at bottom left, rgba(124,58,237,.08), transparent 50%); }
       .badge{
         display:inline-block;
          padding:8px 18px; 
          border-radius:50px;
           background:rgba(124,58,237,.15);
         border:1px solid rgba(124,58,237,.25);
          color:#a78bfa; 
          font-size:.8rem;
           font-weight:700;
            letter-spacing:1px;
          margin-bottom:25px;
         } 
         .roadmap-hero h1{
            font-size:4rem;
             line-height:1.1;
              margin-bottom:25px; 
            } 
          .gradient-text{ 
            background:linear-gradient( 135deg, #a78bfa, #6366f1 );
             -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent;
         }
          .roadmap-hero p{
            max-width:720px;
            margin:auto; 
            color:var(--text-secondary);
             font-size:1.15rem; line-height:1.8; } 
/* ===================================== SEARCH BOX ===================================== */ 
.roadmap-search{
     margin-top:45px; 
     display:flex; 
     justify-content:center;
      gap:16px; flex-wrap:wrap; 
    } 
    .roadmap-search input{
         width:650px; max-width:100%;
          padding:20px 24px;
           border-radius:16px;
            background:rgba(255,255,255,.04);
             border:1px solid var(--border-glow);
              color:white;
               font-size:1rem; 
               backdrop-filter:blur(12px); 
            } 
            .roadmap-search input::placeholder{
                 color:var(--text-secondary); 
                } 
                .roadmap-search input:focus{ 
                    outline:none; 
                    border-color:var(--neon-indigo); 
                    box-shadow: 0 0 20px rgba(99,102,241,.25);
                 } 
                 .btn-purple{ 
                    border:none;
                     cursor:pointer;
                      padding:20px 32px; 
                      border-radius:16px;
                       color:white; font-weight:600; 
                       background:linear-gradient( 135deg, var(--neon-indigo), var(--neon-purple) );
                        box-shadow: 0 0 25px rgba(124,58,237,.25); 
                    } 
/* ===================================== TOPIC CHIPS ===================================== */ 
.topic-chips{
     margin-top:40px;
      display:flex; 
      justify-content:center;
       flex-wrap:wrap; gap:15px;
     } 
     .topic-chips span{
         padding:12px 20px; 
         border-radius:50px; 
         background:var(--bg-surface);
          border:1px solid var(--border-glow); 
          color:var(--text-secondary);
           cursor:pointer;
           transition:var(--transition);
         } 
         .topic-chips span:hover{
             color:white; 
             border-color:var(--neon-purple);
              transform:translateY(-3px);
               box-shadow: 0 0 20px rgba(124,58,237,.15);
             } 
/* ===================================== ROADMAP PREVIEW CARD ===================================== */
 .roadmap-preview{ margin-top:80px; 
    background:var(--bg-surface); 
    border:1px solid var(--border-glow);
     border-radius:24px; padding:40px;
     }
      .roadmap-preview h2{
         margin-bottom:30px;
         text-align:left;
         } 
         .step-list{
             display:flex;
              flex-wrap:wrap; 
              gap:15px; 
            } 
            
            .step{
                 padding:14px 22px;
                  border-radius:12px;
                   background:rgba(255,255,255,.03);
                    border:1px solid var(--border-glow); 
                } 
                .step.active{
                     border-color:var(--neon-blue);
                      box-shadow: 0 0 15px rgba(59,130,246,.15);
                     } 
.generated-roadmap{
    display:grid;
    gap:18px;
    margin-top:28px;
}
.roadmap-step{
    padding:20px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border-glow);
}
.roadmap-step strong{
    display:block;
    margin-bottom:12px;
    color:var(--text-primary);
}
.roadmap-step ul{
    margin:0;
    padding-left:20px;
    color:var(--text-secondary);
    line-height:1.8;
}
/* ===================================== RESPONSIVE ===================================== */
@media (max-width: 900px) {
  .nav-links, .nav-actions { 
    display: none !important;
  }
}

@media (max-width: 768px) {
  .roadmap-hero {
    padding: 90px 0;
  }
  .roadmap-hero h1 {
    font-size: 2.7rem;
  } 
  .roadmap-search {
    flex-direction: column;
    gap: 12px;
  } 
  .roadmap-search button {
    width: 100%;
  } 
  .roadmap-search input {
    width: 100%;
  }
  .topic-chips {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .roadmap-hero h1 {
    font-size: 2rem;
  }
}

/* =============================================================
   CAREER COMPASS PRO ROADMAP EXPERIENCE
   ============================================================= */
:root {
  --road-bg: #070914;
  --road-card: rgba(15, 19, 42, 0.82);
  --road-card-solid: #0f132a;
  --road-line: rgba(139, 151, 197, 0.17);
  --road-muted: #9aa5ca;
  --road-purple: #8b5cf6;
  --road-blue: #3b82f6;
  --road-green: #34d399;
  --road-orange: #fb923c;
}

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--road-bg);
  color: #f8faff;
  line-height: 1.5;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ambient { position: fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; z-index: -1; }
.ambient-one { background: #6038f0; top: -180px; left: -180px; }
.ambient-two { background: #1477ff; right: -220px; top: 360px; }

.navbar { padding: 17px 0; background: rgba(7, 9, 20, .78); border-color: rgba(255,255,255,.07); }
.nav-container { max-width: 1240px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-size: 1.35rem; font-weight: 800; letter-spacing: -.04em; }
.brand i { color: #7c6df5; font-size: 1.6rem; }
.brand span { color: #6d8cff; }
.nav-links a.active { position: relative; }
.nav-links a.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -9px; border-radius: 3px; background: linear-gradient(90deg, var(--road-blue), var(--road-purple)); }
.btn-login, .btn-signup { transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn-login:hover, .btn-signup:hover { transform: translateY(-2px); }

.roadmap-hero { padding: 104px 0 78px; background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.14), transparent 45%); }
.hero-content { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 22px; border: 1px solid rgba(139,92,246,.3); border-radius: 100px; color: #c4b5fd; background: rgba(139,92,246,.09); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow i { color: #a78bfa; }
.roadmap-hero h1 { margin: 0 auto 20px; max-width: 900px; font-size: clamp(2.55rem, 6vw, 4.65rem); line-height: 1.05; letter-spacing: -.065em; }
.gradient-text { background: linear-gradient(100deg, #a78bfa 8%, #6f8cff 52%, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roadmap-hero p { max-width: 690px; font-size: 1.05rem; line-height: 1.75; }
.roadmap-search { max-width: 900px; margin: 38px auto 0; padding: 7px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; border: 1px solid rgba(148,163,215,.2); border-radius: 18px; background: rgba(14,18,40,.88); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
.search-field { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.search-field > i { color: #7f8aae; font-size: 1.3rem; }
.roadmap-search input { width: 100%; padding: 15px 0; border: 0; outline: 0; background: transparent; color: white; font-size: .97rem; }
.roadmap-search input::placeholder { color: #6f789b; }
.btn-purple { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: .9rem; transition: transform .2s ease, box-shadow .2s ease; }
.btn-purple:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(108,76,255,.34); }
.topic-chips { max-width: 900px; margin: 20px auto 0; gap: 9px; }
.topic-chips button { padding: 8px 13px; border: 1px solid rgba(148,163,215,.16); border-radius: 100px; color: #a8b1d1; background: rgba(15,19,42,.65); cursor: pointer; font-size: .78rem; font-weight: 600; transition: all .2s ease; }
.topic-chips button:hover, .topic-chips button.active { color: #fff; border-color: rgba(139,92,246,.7); background: rgba(139,92,246,.15); transform: translateY(-2px); }
.topic-chips .no-match { border: 0; color: #7d86a8; background: transparent; cursor: default; }

.roadmap-section { padding-bottom: 110px; }
.workspace-header { margin: 0 0 22px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-kicker { margin-bottom: 7px; color: #8678ff; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.workspace-header h2 { margin: 0 0 7px; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.workspace-header p { max-width: 660px; margin: 0; color: var(--road-muted); }
.workspace-actions { flex-shrink: 0; display: flex; gap: 9px; }
.secondary-button, .icon-button, .danger-button { border: 1px solid rgba(148,163,215,.2); border-radius: 11px; color: #eef2ff; background: rgba(18,23,49,.8); cursor: pointer; transition: all .2s ease; }
.secondary-button { min-height: 43px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .83rem; font-weight: 700; }
.secondary-button:hover, .icon-button:hover { border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.13); }
.icon-button { width: 43px; height: 43px; display: grid; place-items: center; font-size: 1.15rem; }

.progress-card { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 30px; padding: 22px 25px; margin-bottom: 18px; border: 1px solid var(--road-line); border-radius: 18px; background: linear-gradient(130deg, rgba(17,22,48,.92), rgba(11,14,31,.92)); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.progress-copy { display: flex; align-items: center; gap: 14px; }
.progress-copy > div:last-child { display: grid; gap: 3px; }
.progress-copy strong { font-size: .9rem; }
.progress-copy span { color: var(--road-muted); font-size: .75rem; }
.progress-ring { --size: 54px; width: var(--size); height: var(--size); flex: 0 0 var(--size); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, #111630 76%, transparent 78% 99%), conic-gradient(var(--road-purple) calc(var(--progress) * 1%), rgba(255,255,255,.08) 0); }
.progress-ring span { color: white; font-size: .72rem; font-weight: 800; }
.progress-track { height: 8px; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.07); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--road-purple), var(--road-blue), #22d3ee); transition: width .45s ease; box-shadow: 0 0 18px rgba(59,130,246,.45); }
.progress-stats { display: flex; align-items: center; gap: 16px; color: #929dc0; font-size: .71rem; }
.progress-stats span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.progress-stats i { color: #6c7aa7; }
.progress-stats span:first-child i { color: var(--road-green); }
.progress-stats b { color: #e9edff; }

.roadmap-preview { position: relative; margin: 0; padding: 0; overflow: hidden; border-radius: 20px; background: linear-gradient(rgba(13,17,36,.96), rgba(9,12,27,.96)); }
.roadmap-preview::before { content: ""; position: absolute; inset: 58px 0 0; opacity: .23; pointer-events: none; background-image: linear-gradient(rgba(135,145,190,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(135,145,190,.1) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.flowchart-toolbar { position: relative; z-index: 1; min-height: 58px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--road-line); background: rgba(13,17,36,.72); }
.legend { display: flex; gap: 17px; color: #8f99ba; font-size: .7rem; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #56617f; }
.legend-dot.unlocked { background: #8b5cf6; box-shadow: 0 0 8px #8b5cf6; }
.legend-dot.completed { background: var(--road-green); box-shadow: 0 0 8px rgba(52,211,153,.6); }
.flowchart-toolbar p { margin: 0; color: #7681a4; font-size: .71rem; }
.roadmap-flow { position: relative; z-index: 1; max-width: 900px; min-height: 500px; margin: auto; padding: 54px 30px 70px; }
.flow-item { --node-offset: 0px; position: relative; min-height: 165px; display: flex; justify-content: center; animation: nodeIn .48s both; animation-delay: calc(var(--index) * 45ms); }
.flow-item.align-left { --node-offset: -190px; }
.flow-item.align-right { --node-offset: 190px; }
.flow-node { position: relative; z-index: 2; width: 330px; min-height: 116px; align-self: flex-start; transform: translateX(var(--node-offset)); padding: 18px; display: grid; gap: 11px; text-align: left; border: 1px solid rgba(123,135,179,.23); border-radius: 15px; color: white; background: linear-gradient(145deg, rgba(25,31,62,.98), rgba(14,18,39,.98)); cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,.2); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease; }
.flow-node:hover { transform: translateX(var(--node-offset)) translateY(-4px); border-color: rgba(139,92,246,.65); box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 22px rgba(139,92,246,.1); }
.flow-node:focus-visible { outline: 3px solid rgba(96,165,250,.5); outline-offset: 3px; }
.flow-node.completed { border-color: rgba(52,211,153,.5); background: linear-gradient(145deg, rgba(16,55,55,.96), rgba(12,28,35,.98)); }
.flow-node.locked { opacity: .57; filter: saturate(.65); }
.flow-node.current { border-color: rgba(139,92,246,.75); box-shadow: 0 0 0 1px rgba(139,92,246,.15), 0 15px 38px rgba(49,26,110,.25); }
.node-top, .node-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.node-number { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #c4b5fd; background: rgba(139,92,246,.16); font-size: .69rem; font-weight: 800; }
.completed .node-number { color: #6ee7b7; background: rgba(52,211,153,.14); }
.node-status { display: inline-flex; align-items: center; gap: 5px; color: #aab3d0; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.completed .node-status { color: #6ee7b7; }
.current .node-status { color: #c4b5fd; }
.flow-node h3 { margin: 0; font-size: .98rem; letter-spacing: -.015em; }
.node-bottom { color: #7f8baa; font-size: .68rem; }
.node-bottom span { display: flex; align-items: center; gap: 5px; }
.difficulty { padding: 4px 7px; border-radius: 5px; color: #93c5fd; background: rgba(59,130,246,.1); }
.difficulty.intermediate { color: #fcd34d; background: rgba(245,158,11,.1); }
.difficulty.advanced { color: #f0abfc; background: rgba(217,70,239,.1); }
.flow-connector { position: absolute; z-index: 0; top: 116px; left: 50%; width: 2px; height: 49px; background: linear-gradient(#5b4ba5, #3b82f6); opacity: .68; }
.flow-connector::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid #5482db; border-bottom: 2px solid #5482db; transform: rotate(45deg); }
.flow-connector-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 165px; overflow: visible; pointer-events: none; }
.flow-connector-svg path { fill: none; stroke: url(#roadmap-line); stroke: rgba(91, 105, 190, .78); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.flow-connector-svg .arrow { stroke: rgba(88, 132, 224, .9); }
.mobile-flow-line { display: none; }
.flow-item.align-left .flow-connector::before, .flow-item.align-right .flow-connector::before { content: ""; position: absolute; bottom: -1px; width: 190px; height: 48px; border-bottom: 2px solid rgba(73,104,177,.68); }
.flow-item.align-left .flow-connector::before { left: 0; border-right: 2px solid rgba(73,104,177,.68); border-radius: 0 0 13px 0; }
.flow-item.align-right .flow-connector::before { right: 0; border-left: 2px solid rgba(73,104,177,.68); border-radius: 0 0 0 13px; }
.flow-end { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin: -12px auto 0; padding: 9px 14px; border: 1px solid rgba(52,211,153,.2); border-radius: 100px; color: #77d8b7; background: rgba(16,185,129,.08); font-size: .73rem; font-weight: 700; }
@keyframes nodeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.panel-backdrop { position: fixed; inset: 0; z-index: 1390; background: rgba(2,4,12,.7); opacity: 0; visibility: hidden; transition: .25s ease; }
.panel-backdrop.open { opacity: 1; visibility: visible; }
.detail-panel { position: fixed; z-index: 1400; top: 0; right: 0; width: min(570px, 100%); height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; border-left: 1px solid rgba(148,163,215,.2); background: #0c1023; box-shadow: -30px 0 80px rgba(0,0,0,.45); transform: translateX(103%); transition: transform .3s cubic-bezier(.2,.75,.25,1); }
.detail-panel.open { transform: translateX(0); }
.panel-header { padding: 22px 24px 18px; display: flex; align-items: start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--road-line); }
.panel-step { color: #8d80fc; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-header h2 { margin: 6px 0 0; font-size: 1.5rem; letter-spacing: -.035em; }
.panel-close { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(148,163,215,.17); border-radius: 10px; color: #b5bedb; background: rgba(255,255,255,.03); cursor: pointer; font-size: 1.2rem; }
.panel-body { overflow-y: auto; padding: 22px 24px 35px; scrollbar-width: thin; scrollbar-color: #303963 transparent; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 21px; }
.detail-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(148,163,215,.14); border-radius: 7px; color: #aab4d2; background: rgba(255,255,255,.025); font-size: .7rem; }
.detail-section { padding: 19px 0; border-bottom: 1px solid rgba(148,163,215,.11); }
.detail-section:first-of-type { padding-top: 0; }
.detail-section h3 { margin: 0 0 9px; display: flex; align-items: center; gap: 8px; color: #f4f6ff; font-size: .86rem; }
.detail-section h3 i { color: #8c7df5; font-size: 1rem; }
.detail-section p, .detail-section li { color: #9aa5c5; font-size: .79rem; line-height: 1.7; }
.detail-section ul, .detail-section ol { margin: 0; padding-left: 19px; }
.concept-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.concept-grid span { padding: 6px 9px; border-radius: 6px; color: #bec6df; background: rgba(107,120,165,.1); font-size: .7rem; }
.language-suggestion { border-color: rgba(56,189,248,.24); background: linear-gradient(135deg,rgba(14,165,233,.07),rgba(139,92,246,.06)); }
.language-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.language-heading h3 { margin: 0; }
.language-heading > span { color: #7f8baa; font-size: .65rem; }
.language-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.language-grid article { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(56,189,248,.15); border-radius: 9px; background: rgba(5,10,25,.55); }
.language-grid article > i { color: #38bdf8; font-size: 1.15rem; }
.language-grid b, .language-grid span { display: block; }
.language-grid b { color: #e8ecff; font-size: .74rem; }
.language-grid span { margin-top: 2px; color: #7480a2; font-size: .61rem; }
@media (max-width: 560px) { .language-heading { align-items: start; flex-direction: column; } .language-grid { grid-template-columns: 1fr; } }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.resource-card { padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(148,163,215,.15); border-radius: 10px; color: white; background: rgba(255,255,255,.025); text-decoration: none; transition: .2s ease; }
.resource-card:hover { border-color: rgba(139,92,246,.5); transform: translateY(-2px); }
.resource-card > i { color: #a78bfa; font-size: 1.25rem; }
.resource-card.youtube > i { color: #fb7185; }
.resource-card strong { display: block; font-size: .73rem; }
.resource-card span { display: block; color: #7883a7; font-size: .63rem; }
.code-block { position: relative; margin-top: 10px; padding: 14px; overflow-x: auto; border: 1px solid rgba(148,163,215,.14); border-radius: 10px; color: #a7f3d0; background: #080b18; font: .72rem/1.65 Consolas, monospace; white-space: pre-wrap; }
.notes-area { width: 100%; min-height: 100px; resize: vertical; padding: 12px; border: 1px solid rgba(148,163,215,.16); border-radius: 10px; outline: 0; color: #e7eaff; background: rgba(5,8,20,.62); font-size: .78rem; line-height: 1.6; }
.notes-area:focus { border-color: #7c6df5; box-shadow: 0 0 0 3px rgba(124,109,245,.1); }
.notes-hint { display: block; margin-top: 6px; color: #667194; font-size: .64rem; }
.project-card { margin-top: 8px; padding: 13px; border: 1px solid rgba(148,163,215,.13); border-radius: 10px; background: rgba(255,255,255,.022); }
.project-card strong { display: block; margin-bottom: 4px; color: #dce2f8; font-size: .75rem; }
.project-card p { margin: 0; }
.quiz-question { margin-bottom: 16px; }
.quiz-question > p { margin: 0 0 7px; color: #dce2f6; font-weight: 600; }
.quiz-option { margin: 5px 0; display: flex; align-items: flex-start; gap: 7px; color: #9da8c7; font-size: .74rem; cursor: pointer; }
.quiz-option input { margin-top: 3px; accent-color: #8b5cf6; }
.quiz-submit { margin-top: 5px; padding: 9px 13px; border: 0; border-radius: 8px; color: white; background: linear-gradient(135deg, #7458e8, #397bef); cursor: pointer; font-size: .72rem; font-weight: 700; }
.quiz-result { margin-left: 9px; color: #6ee7b7; font-size: .72rem; font-weight: 700; }
.panel-footer { padding: 15px 24px; border-top: 1px solid var(--road-line); background: rgba(9,12,27,.95); }
.complete-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg, #754fe4, #317be9); cursor: pointer; font-weight: 800; box-shadow: 0 10px 25px rgba(74,69,210,.22); }
.complete-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.complete-button.completed { color: #6ee7b7; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.28); box-shadow: none; }
.complete-button:disabled { color: #687394; background: rgba(92,101,133,.1); cursor: not-allowed; box-shadow: none; }

.confirm-dialog { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; background: rgba(2,4,12,.78); opacity: 0; visibility: hidden; transition: .2s; }
.confirm-dialog.open { opacity: 1; visibility: visible; }
.confirm-card { width: min(410px,100%); padding: 28px; text-align: center; border: 1px solid rgba(148,163,215,.19); border-radius: 18px; background: #10152c; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.confirm-icon { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: #fca5a5; background: rgba(239,68,68,.1); font-size: 1.35rem; }
.confirm-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.confirm-card p { margin: 0 0 22px; color: #939ebf; font-size: .8rem; }
.confirm-card > div:last-child { display: flex; justify-content: center; gap: 9px; }
.danger-button { min-height: 43px; padding: 0 17px; border-color: rgba(239,68,68,.24); color: #fecaca; background: rgba(239,68,68,.11); font-size: .8rem; font-weight: 700; }
.toast { position: fixed; z-index: 1600; right: 22px; bottom: 22px; max-width: 360px; padding: 12px 16px; border: 1px solid rgba(148,163,215,.2); border-radius: 10px; color: #e9edff; background: #151a34; box-shadow: 0 16px 40px rgba(0,0,0,.4); font-size: .78rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(52,211,153,.28); }

@media (max-width: 920px) {
  .roadmap-hero { padding-top: 88px; }
  .progress-card { grid-template-columns: auto 1fr; gap: 18px; }
  .progress-stats { grid-column: 1 / -1; justify-content: center; }
  .flow-item.align-left { --node-offset: -125px; }
  .flow-item.align-right { --node-offset: 125px; }
  .flow-item.align-left .flow-connector::before, .flow-item.align-right .flow-connector::before { width: 125px; }
}

@media (max-width: 680px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .container { padding-left: 17px; padding-right: 17px; }
  .roadmap-hero { padding: 78px 0 58px; }
  .hero-content, .roadmap-section { width: 100%; max-width: 100vw; }
  .roadmap-hero h1 { width: 100%; max-width: calc(100vw - 34px); overflow-wrap: break-word; }
  .roadmap-hero h1 br { display: none; }
  .roadmap-hero p { font-size: .92rem; }
  .roadmap-search { width: calc(100vw - 34px); max-width: calc(100vw - 34px); min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 7px; border-radius: 15px; }
  .search-field, .roadmap-search input { min-width: 0; max-width: 100%; }
  .search-field { min-height: 50px; overflow: hidden; }
  .btn-purple { width: 100%; }
  .topic-chips { width: calc(100vw - 34px); max-width: calc(100vw - 34px); }
  .workspace-header { align-items: flex-start; flex-direction: column; }
  .workspace-actions { width: 100%; }
  .workspace-actions .secondary-button { flex: 1; }
  .progress-card { padding: 18px; grid-template-columns: 1fr; }
  .progress-copy { justify-content: center; }
  .progress-stats { grid-column: auto; flex-wrap: wrap; justify-content: center; }
  .flowchart-toolbar { padding: 14px; flex-direction: column; align-items: flex-start; gap: 9px; }
  .flowchart-toolbar p { display: none; }
  .legend { width: 100%; justify-content: space-between; }
  .roadmap-flow { padding: 38px 15px 55px; }
  .flow-item, .flow-item.align-left, .flow-item.align-right { --node-offset: 0px; min-height: 155px; justify-content: flex-start; padding-left: 27px; }
  .flow-node { width: 100%; max-width: 390px; }
  .flow-connector { left: 8px; top: 57px; height: 98px; }
  .flow-connector-svg { display: none; }
  .mobile-flow-line { position: absolute; display: block; left: 8px; top: 55px; width: 2px; height: 100px; background: linear-gradient(#6354ac, #397dd6); }
  .mobile-flow-line::after { content: ""; position: absolute; left: -4px; bottom: 1px; width: 8px; height: 8px; border-right: 2px solid #5482db; border-bottom: 2px solid #5482db; transform: rotate(45deg); }
  .flow-item.align-left .flow-connector::before, .flow-item.align-right .flow-connector::before { display: none; }
  .panel-header, .panel-body, .panel-footer { padding-left: 18px; padding-right: 18px; }
  .resource-grid { grid-template-columns: 1fr; }
  .toast { right: 14px; left: 14px; bottom: 14px; max-width: none; }
  .hero-content { overflow: hidden; }
  .roadmap-search, .generator-options, .topic-chips, .trust-strip { width: 100%; max-width: 100%; box-sizing: border-box; }
  .roadmap-hero h1 { padding: 0 2px; font-size: clamp(1.82rem, 9.4vw, 2.2rem); line-height: 1.1; letter-spacing: -.052em; }
  .topic-chips { margin-left: 0; margin-right: 0; overflow: hidden; }
  .topic-chips button { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =============================================================
   CAREER COMPASS LEARNING OS — PRODUCT SURFACES
   ============================================================= */
[hidden] { display: none !important; }
select, input, textarea { color-scheme: dark; }
.roadmap-hero { padding-bottom: 64px; }
.roadmap-hero h1 { max-width: 1080px; }
.roadmap-search { position: relative; }
.search-suggestions { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; right: 0; padding: 8px; border: 1px solid rgba(148,163,215,.22); border-radius: 16px; background: rgba(12,16,35,.98); box-shadow: 0 28px 70px rgba(0,0,0,.48); backdrop-filter: blur(22px); }
.search-suggestions button { width: 100%; padding: 11px 12px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 11px; color: #f5f7ff; background: transparent; text-align: left; cursor: pointer; }
.search-suggestions button:hover, .search-suggestions button:focus { background: rgba(124,109,245,.12); outline: none; }
.search-suggestions button > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #b9adff; background: rgba(124,109,245,.13); font-size: 1.1rem; }
.search-suggestions button span { min-width: 0; flex: 1; display: grid; gap: 2px; }
.search-suggestions b { font-size: .82rem; }
.search-suggestions small { overflow: hidden; color: #7f8aac; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestions em { color: #facc15; font-size: .67rem; font-style: normal; }
.generator-options { max-width: 900px; margin: 14px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; text-align: left; }
.generator-options label { padding: 9px 12px; display: grid; gap: 3px; border: 1px solid rgba(148,163,215,.13); border-radius: 11px; background: rgba(14,18,40,.58); }
.generator-options span { color: #68749b; font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.generator-options select { width: 100%; border: 0; outline: 0; color: #cdd4ec; background: transparent; font-size: .74rem; }
.trust-strip { margin: 25px auto 0; display: flex; align-items: center; justify-content: center; gap: 17px; color: #7682a7; font-size: .67rem; }
.trust-strip span { display: flex; align-items: baseline; gap: 4px; }
.trust-strip b { color: #d4daf0; font-size: .78rem; }
.trust-strip > i { width: 3px; height: 3px; border-radius: 50%; background: #4d587d; }

.discovery-section { padding-top: 80px; padding-bottom: 105px; }
.section-heading, .view-heading { margin-bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.section-heading h2, .view-heading h3 { margin: 0 0 7px; font-size: clamp(1.55rem,3vw,2.35rem); letter-spacing: -.045em; }
.section-heading p, .view-heading p { max-width: 650px; margin: 0; color: #8f9abb; font-size: .86rem; line-height: 1.7; }
.catalog-search { padding: 6px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(148,163,215,.15); border-radius: 12px; background: rgba(13,17,36,.78); }
.catalog-search > i { margin-left: 7px; color: #7883a8; }
.catalog-search select, .panel-select { min-height: 36px; padding: 0 28px 0 9px; border: 0; border-radius: 8px; outline: 0; color: #c5cce3; background: #151a36; font-size: .7rem; }
.roadmap-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.catalog-card { position: relative; padding: 22px; overflow: hidden; border: 1px solid rgba(148,163,215,.14); border-radius: 18px; background: linear-gradient(145deg,rgba(17,22,48,.88),rgba(10,13,29,.9)); box-shadow: 0 16px 50px rgba(0,0,0,.12); animation: catalogIn .45s both; animation-delay: var(--delay); transition: transform .25s, border-color .25s, box-shadow .25s; }
.catalog-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; top: -80px; border-radius: 50%; background: #7159e8; filter: blur(55px); opacity: .1; pointer-events: none; }
.catalog-card:hover { transform: translateY(-5px); border-color: rgba(139,92,246,.42); box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.catalog-card-top { display: flex; align-items: center; justify-content: space-between; }
.catalog-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.2); border-radius: 12px; color: #ad9cff; background: rgba(139,92,246,.12); font-size: 1.25rem; }
.trend-pill { padding: 5px 8px; border-radius: 20px; color: #6ee7b7; background: rgba(52,211,153,.09); font-size: .59rem; font-weight: 800; }
.catalog-card h3 { margin: 17px 0 7px; font-size: 1.05rem; letter-spacing: -.025em; }
.catalog-card > p { min-height: 62px; margin: 0; color: #8e99b9; font-size: .73rem; line-height: 1.7; }
.catalog-meta { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 7px 12px; color: #7783a7; font-size: .62rem; }
.catalog-meta span { display: flex; align-items: center; gap: 4px; }
.catalog-meta .ph-star { color: #facc15; }
.skill-preview { min-height: 47px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.skill-preview span { padding: 4px 6px; border-radius: 5px; color: #9fa9c7; background: rgba(121,133,178,.09); font-size: .57rem; }
.catalog-card > button { width: 100%; margin-top: 16px; padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(139,92,246,.25); border-radius: 9px; color: #d8d2ff; background: rgba(139,92,246,.1); cursor: pointer; font-size: .7rem; font-weight: 800; }
.catalog-card > button:hover { color: white; background: rgba(139,92,246,.2); }
@keyframes catalogIn { from { opacity: 0; transform: translateY(10px); } }
.load-error { grid-column: 1/-1; padding: 70px 25px; text-align: center; border: 1px dashed rgba(248,113,113,.25); border-radius: 18px; background: rgba(127,29,29,.06); }
.load-error > i { color: #fb7185; font-size: 2rem; }
.load-error h3 { margin: 12px 0 6px; }
.load-error p { max-width: 620px; margin: auto; color: #929dbd; font-size: .78rem; line-height: 1.7; }

.roadmap-section { max-width: 1280px; padding-top: 48px; }
.roadmap-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.roadmap-tags span { padding: 5px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(148,163,215,.14); border-radius: 7px; color: #9ba6c6; background: rgba(255,255,255,.02); font-size: .62rem; }
.certificate-button.ready { border-color: rgba(52,211,153,.4); color: #6ee7b7; background: rgba(52,211,153,.1); animation: readyGlow 2s infinite; }
@keyframes readyGlow { 50% { box-shadow: 0 0 24px rgba(52,211,153,.18); } }
.player-bar { margin-bottom: 14px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(148,163,215,.14); border-radius: 14px; background: rgba(13,17,36,.8); }
.player-level { min-width: 230px; display: flex; align-items: center; gap: 10px; }
.avatar-ring { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.35); border-radius: 50%; color: #c4b5fd; background: linear-gradient(145deg,rgba(139,92,246,.22),rgba(59,130,246,.13)); font-size: .8rem; }
.player-level > div { flex: 1; }
.player-level span:not(.avatar-ring) { color: #dce2f6; font-size: .68rem; font-weight: 800; }
.xp-track { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.08); }
.xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b5cf6,#38bdf8); transition: width .4s; }
.player-stat { padding: 8px 10px; display: flex; align-items: center; gap: 6px; border-left: 1px solid rgba(148,163,215,.1); color: #8f9abb; font-size: .64rem; }
.player-stat i { color: #a78bfa; font-size: .9rem; }
.player-stat:nth-of-type(3) i { color: #facc15; }
.player-stat:nth-of-type(4) i { color: #fb923c; }
.player-stat b { color: #e8ebf8; }
.mission-button { margin-left: auto; padding: 8px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(56,189,248,.2); border-radius: 9px; color: #a5dff8; background: rgba(56,189,248,.07); cursor: pointer; font-size: .62rem; }
.mission-button b { color: white; }
.workspace-tabs { margin-bottom: 18px; padding: 5px; display: flex; gap: 3px; overflow-x: auto; border: 1px solid rgba(148,163,215,.14); border-radius: 13px; background: rgba(12,16,34,.86); scrollbar-width: none; }
.workspace-tabs button { min-height: 38px; padding: 0 12px; flex: 1 0 max-content; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; color: #7e89aa; background: transparent; cursor: pointer; font-size: .67rem; font-weight: 700; }
.workspace-tabs button:hover { color: #cbd2e9; background: rgba(255,255,255,.03); }
.workspace-tabs button.active { color: white; background: linear-gradient(135deg,rgba(124,88,232,.25),rgba(57,123,239,.18)); box-shadow: inset 0 0 0 1px rgba(139,92,246,.22); }
.workspace-view { display: none; animation: viewIn .3s ease; }
.workspace-view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } }
.flow-controls { display: flex; gap: 4px; }
.flow-controls button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #7883a6; background: transparent; cursor: pointer; }
.flow-controls button:hover, .flow-controls button.active { border-color: rgba(139,92,246,.28); color: #c4b5fd; background: rgba(139,92,246,.1); }
.node-progress { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.07); }
.node-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b5cf6,#38bdf8); }
.branch-label { width: max-content; margin-top: -3px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; color: #67e8f9; background: rgba(6,182,212,.09); font-size: .57rem; font-weight: 700; }
.legend-dot.branch { background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.5); }
.flow-tree .flow-node { border-style: solid; }
.flow-horizontal .roadmap-flow { max-width: none; min-height: 350px; padding: 60px 35px 85px; display: flex; overflow-x: auto; }
.flow-horizontal .flow-item, .flow-horizontal .flow-item.align-left, .flow-horizontal .flow-item.align-right { min-width: 375px; min-height: 140px; align-items: start; padding: 0 28px 0 0; --node-offset: 0px; }
.flow-horizontal .flow-node { width: 345px; }
.flow-horizontal .flow-connector-svg { top: -24px; left: 275px; width: 165px; transform: rotate(-90deg); }
.flow-horizontal .flow-end { flex: 0 0 max-content; align-self: center; margin: 30px; }

.view-eyebrow { display: block; margin-bottom: 5px; color: #8b7cf7; font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.workspace-view:not([data-view-panel="roadmap"]) { min-height: 520px; padding: 30px; border: 1px solid rgba(148,163,215,.14); border-radius: 19px; background: linear-gradient(145deg,rgba(15,20,44,.88),rgba(9,12,27,.94)); }
.study-summary { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.study-summary span { padding: 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px; border: 1px solid rgba(148,163,215,.12); border-radius: 11px; color: #838eae; background: rgba(255,255,255,.02); font-size: .63rem; }
.study-summary i { grid-row: 1/3; color: #a78bfa; font-size: 1.2rem; }
.study-summary b { color: #eef1fb; font-size: .93rem; }
.week-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.week-card { padding: 17px; border: 1px solid rgba(148,163,215,.12); border-radius: 13px; background: rgba(255,255,255,.022); }
.week-card.current { border-color: rgba(139,92,246,.4); box-shadow: inset 0 0 30px rgba(139,92,246,.05); }
.week-head { display: flex; align-items: center; justify-content: space-between; color: #9487ff; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.week-head b { color: #7883a5; font-size: .57rem; }
.week-card h4 { margin: 12px 0 10px; font-size: .85rem; }
.week-card ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; color: #8d98b7; font-size: .65rem; }
.week-card li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; }
.week-card li b { color: #bdc5dd; }
.week-card li.rest { color: #6ee7b7; }

.metric-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
.metric-grid article { padding: 15px; display: grid; gap: 4px; border: 1px solid rgba(148,163,215,.12); border-radius: 11px; background: rgba(255,255,255,.022); }
.metric-grid i { color: #8b7df5; font-size: 1.15rem; }
.metric-grid span { margin-top: 5px; color: #7e89aa; font-size: .6rem; }
.metric-grid b { color: #f0f3fc; font-size: 1.12rem; }
.analytics-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.analytics-card { padding: 19px; border: 1px solid rgba(148,163,215,.12); border-radius: 13px; background: rgba(255,255,255,.02); }
.card-heading { display: flex; justify-content: space-between; gap: 15px; }
.card-heading h4 { margin: 0; font-size: .8rem; }
.card-heading span { color: #707c9f; font-size: .6rem; }
.activity-chart { height: 190px; padding-top: 25px; display: flex; align-items: end; gap: 8px; }
.activity-chart > span { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 6px; }
.activity-chart i { width: 100%; max-width: 28px; min-height: 6px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#8b5cf6,#3b82f6); opacity: .75; }
.activity-chart b { color: #647095; font-size: .55rem; font-weight: 600; }
.skill-bars { margin-top: 20px; display: grid; gap: 15px; }
.skill-bars > div > span { margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; color: #a9b2cd; font-size: .62rem; }
.skill-bars span b { color: #dce2f4; }
.skill-bars > div > i { height: 5px; display: block; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.06); }
.skill-bars em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b5cf6,#38bdf8); }
.badge-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
.badge-card { padding: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(148,163,215,.1); border-radius: 10px; opacity: .45; background: rgba(255,255,255,.018); }
.badge-card.unlocked { border-color: rgba(250,204,21,.18); opacity: 1; background: rgba(250,204,21,.035); }
.badge-card > i:first-child { color: #7b86a6; font-size: 1.05rem; }
.badge-card.unlocked > i:first-child { color: #facc15; }
.badge-card div { min-width: 0; flex: 1; display: grid; }
.badge-card b { font-size: .63rem; }
.badge-card span { overflow: hidden; color: #6f7a9d; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.badge-card em { color: #fcd34d; font-size: .5rem; font-style: normal; }

.job-hero { margin-bottom: 16px; padding: 23px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(139,92,246,.2); border-radius: 15px; background: radial-gradient(circle at 85% 50%,rgba(139,92,246,.14),transparent 35%),rgba(255,255,255,.02); }
.job-hero h3 { margin: 0 0 6px; font-size: 1.4rem; }
.job-hero p { margin: 0; color: #8995b5; font-size: .7rem; }
.readiness-ring { width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side,#11152d 75%,transparent 77%),conic-gradient(#34d399 calc(var(--score)*1%),rgba(255,255,255,.07) 0); }
.readiness-ring b { font-size: 1rem; }
.readiness-ring span { color: #7f8aaa; font-size: .52rem; }
.salary-grid { margin-bottom: 12px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.salary-grid article { padding: 16px; display: grid; gap: 3px; border: 1px solid rgba(148,163,215,.12); border-radius: 11px; background: rgba(255,255,255,.02); }
.salary-grid span, .salary-grid small { color: #7682a4; font-size: .57rem; }
.salary-grid b { font-size: 1.02rem; }
.career-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.career-card, .interview-card { padding: 20px; border: 1px solid rgba(148,163,215,.12); border-radius: 13px; background: rgba(255,255,255,.02); }
.career-card h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 7px; font-size: .76rem; }
.career-card h4:not(:first-child) { margin-top: 22px; }
.career-card h4 i { color: #8b7df5; }
.career-card p { color: #8994b4; font-size: .67rem; line-height: 1.65; }
.company-list { display: flex; flex-wrap: wrap; gap: 6px; }
.company-list span { padding: 6px 8px; border: 1px solid rgba(148,163,215,.1); border-radius: 6px; color: #b7bfd7; background: rgba(255,255,255,.025); font-size: .6rem; }
.skill-selector { max-height: 190px; margin: 12px 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow-y: auto; }
.skill-selector input { position: absolute; opacity: 0; }
.skill-selector span { padding: 6px 8px; display: block; border: 1px solid rgba(148,163,215,.13); border-radius: 6px; color: #8d98b7; background: rgba(255,255,255,.02); cursor: pointer; font-size: .59rem; }
.skill-selector input:checked + span { border-color: rgba(52,211,153,.35); color: #6ee7b7; background: rgba(52,211,153,.08); }
.primary-small { padding: 9px 13px; border: 0; border-radius: 8px; color: white; background: linear-gradient(135deg,#7957e8,#367cee); cursor: pointer; font-size: .67rem; font-weight: 800; }
.gap-result { margin-top: 12px; }
.gap-result h5 { margin: 0 0 8px; color: #f0d58d; font-size: .68rem; }
.gap-result ol { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; list-style: none; }
.gap-result li { padding: 5px 7px; display: flex; gap: 6px; border-radius: 6px; color: #9ca7c5; background: rgba(255,255,255,.025); font-size: .57rem; }
.gap-result li b { color: #a78bfa; }
.gap-complete { display: flex; align-items: center; gap: 8px; color: #6ee7b7; }
.gap-complete span { color: #7f8baa; font-size: .58rem; }
.interview-card { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; }
.interview-card h4 { margin: 0 0 5px; }
.interview-card p { margin: 0; color: #8692b2; font-size: .67rem; }
.interview-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.interview-list article { padding: 10px; border: 1px solid rgba(148,163,215,.1); border-radius: 8px; background: rgba(255,255,255,.02); }
.interview-list span { color: #a78bfa; font-size: .54rem; font-weight: 800; text-transform: uppercase; }
.interview-list p { margin-top: 5px; font-size: .58rem; }

.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.builder-card { padding: 22px; border: 1px solid rgba(148,163,215,.13); border-radius: 14px; background: rgba(255,255,255,.02); }
.builder-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; font-size: 1.2rem; }
.builder-icon.purple { color: #c4b5fd; background: rgba(139,92,246,.13); }
.builder-icon.blue { color: #93c5fd; background: rgba(59,130,246,.13); }
.builder-card h3 { margin: 14px 0 5px; font-size: 1rem; }
.builder-card p { margin: 0 0 14px; color: #8d98b7; font-size: .68rem; line-height: 1.65; }
.builder-card label { margin-bottom: 9px; display: grid; gap: 4px; color: #7681a3; font-size: .58rem; }
.builder-card input, .builder-card select { width: 100%; padding: 9px 10px; border: 1px solid rgba(148,163,215,.13); border-radius: 8px; outline: 0; color: #dce2f5; background: rgba(6,9,21,.55); font-size: .68rem; }
.document-preview { min-height: 280px; margin-top: 14px; padding: 24px; border: 1px solid rgba(148,163,215,.12); border-radius: 14px; background: #f8fafc; color: #172033; }
.empty-document { min-height: 230px; display: grid; place-content: center; text-align: center; color: #64748b; }
.empty-document i { color: #7c3aed; font-size: 1.8rem; }
.empty-document h3 { margin: 10px 0 4px; font-size: 1rem; }
.empty-document p { margin: 0; font-size: .68rem; }
.portfolio-document, .resume-document { max-width: 850px; margin: auto; }
.portfolio-document header { display: flex; justify-content: space-between; gap: 20px; }
.portfolio-document header span { color: #7c3aed; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.portfolio-document h2, .resume-document h2 { margin: 5px 0; font-size: 1.8rem; }
.portfolio-document header p { max-width: 550px; margin: 0; color: #64748b; font-size: .72rem; }
.portfolio-document header > i { color: #7c3aed; font-size: 2.3rem; }
.portfolio-document section, .resume-document section { padding: 15px 0; border-top: 1px solid #e2e8f0; }
.portfolio-document h3, .resume-document h3 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; }
.portfolio-project { margin-top: 7px; padding: 10px; border-radius: 7px; background: #eef2ff; }
.portfolio-project p, .resume-document p, .resume-document li { color: #526079; font-size: .67rem; line-height: 1.6; }
.portfolio-document footer { display: flex; justify-content: space-between; color: #64748b; font-size: .6rem; }
.resume-document header { padding-bottom: 15px; border-bottom: 2px solid #172033; }
.resume-document header b { color: #7c3aed; font-size: .75rem; }

.playground-shell { overflow: hidden; border: 1px solid rgba(148,163,215,.14); border-radius: 15px; background: #090c1a; }
.playground-toolbar { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(148,163,215,.12); }
.playground-toolbar h3 { margin: 0; font-size: 1rem; }
.playground-toolbar > div:last-child { display: flex; gap: 7px; }
.playground-toolbar select { padding: 8px 28px 8px 9px; border: 1px solid rgba(148,163,215,.14); border-radius: 8px; color: #cbd2e8; background: #151a32; font-size: .66rem; }
.run-button { padding: 8px 13px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; color: white; background: #16a34a; cursor: pointer; font-size: .66rem; font-weight: 800; }
.editor-grid { min-height: 430px; display: grid; grid-template-columns: 1fr 1fr; }
.editor-pane, .output-pane { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.editor-pane { border-right: 1px solid rgba(148,163,215,.12); }
.pane-label { min-height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(148,163,215,.1); color: #7984a4; background: #0d1122; font-size: .61rem; }
.pane-label button { border: 0; color: #7f8aa8; background: none; cursor: pointer; }
#codeEditor { width: 100%; min-height: 390px; padding: 16px; resize: none; border: 0; outline: 0; color: #b8e5d1; background: #070a14; font: .72rem/1.65 Consolas,monospace; tab-size: 2; }
#playgroundFrame { width: 100%; height: 100%; border: 0; background: white; }
#consoleOutput { margin: 0; padding: 16px; overflow: auto; color: #d1fae5; background: #070a14; font: .72rem/1.65 Consolas,monospace; white-space: pre-wrap; }
.runner-note { margin: 0; padding: 10px 14px; display: flex; gap: 7px; border-top: 1px solid rgba(148,163,215,.1); color: #657092; font-size: .58rem; }

.community-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 14px; }
.post-composer { margin-bottom: 12px; padding: 10px; display: flex; gap: 9px; border: 1px solid rgba(148,163,215,.12); border-radius: 12px; background: rgba(255,255,255,.02); }
.post-composer input { min-width: 0; flex: 1; border: 0; outline: 0; color: #e3e7f4; background: transparent; font-size: .68rem; }
.post-composer button, .group-row button { padding: 7px 10px; border: 0; border-radius: 7px; color: white; background: #6d53dc; cursor: pointer; font-size: .6rem; font-weight: 700; }
.community-feed { display: grid; gap: 10px; }
.community-feed article, .community-card { padding: 16px; border: 1px solid rgba(148,163,215,.12); border-radius: 12px; background: rgba(255,255,255,.02); }
.post-head { display: flex; align-items: center; gap: 8px; }
.post-head > div { display: grid; }
.post-head b { font-size: .68rem; }
.post-head small { color: #6e799b; font-size: .54rem; }
.community-feed article > p { margin: 12px 0; color: #a0aac6; font-size: .68rem; line-height: 1.65; }
.community-feed article > div:last-child { display: flex; gap: 5px; }
.community-feed article > div:last-child button { padding: 5px 7px; display: flex; align-items: center; gap: 4px; border: 0; color: #7581a3; background: transparent; cursor: pointer; font-size: .57rem; }
.community-card { margin-bottom: 10px; }
.community-card h4 { margin: 0 0 11px; font-size: .74rem; }
.group-row, .leader-row { padding: 8px 0; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(148,163,215,.08); }
.group-row > span { flex: 1; display: grid; }
.group-row b { font-size: .61rem; }
.group-row small { color: #6e799b; font-size: .51rem; }
.group-row button.joined { color: #6ee7b7; background: rgba(52,211,153,.1); }
.leader-row > b { width: 20px; color: #8b7df5; font-size: .62rem; }
.leader-row span { flex: 1; font-size: .62rem; }
.leader-row em { color: #facc15; font-size: .54rem; font-style: normal; }

/* Expanded learning side panel */
.detail-panel { width: min(690px,100%); grid-template-rows: auto auto minmax(0,1fr) auto; }
.panel-tabs { padding: 5px 10px; display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--road-line); background: #0a0e20; scrollbar-width: none; }
.panel-tabs button { min-height: 33px; padding: 0 10px; flex: 1 0 max-content; border: 0; border-radius: 7px; color: #737f9f; background: transparent; cursor: pointer; font-size: .59rem; font-weight: 700; }
.panel-tabs button.active { color: #ddd8ff; background: rgba(139,92,246,.13); }
.detail-hero { margin-bottom: 19px; padding: 18px; border: 1px solid rgba(139,92,246,.16); border-radius: 12px; background: linear-gradient(140deg,rgba(139,92,246,.08),rgba(59,130,246,.04)); }
.detail-hero p { margin: 0; color: #a7b0cb; font-size: .77rem; line-height: 1.75; }
.locked-notice { margin-bottom: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(251,146,60,.18); border-radius: 9px; color: #fdba74; background: rgba(251,146,60,.06); }
.locked-notice span { display: grid; color: #8e99b8; font-size: .62rem; }
.locked-notice b { color: #fdba74; }
.check-list { padding: 0 !important; display: grid; gap: 7px; list-style: none; }
.check-list li { padding-left: 20px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 800; }
.two-column-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel-intro { margin-bottom: 18px; }
.panel-intro h3 { margin: 0 0 6px; font-size: 1.05rem; }
.panel-intro p { margin: 0; color: #8e99b8; font-size: .72rem; line-height: 1.65; }
.resource-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resource-card.expanded { min-height: 63px; text-align: left; cursor: pointer; }
.resource-card.expanded > span { min-width: 0; flex: 1; }
.resource-card.expanded > span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card.expanded > i:last-child { color: #596584; font-size: .8rem; }
button.resource-card { width: 100%; }
.flashcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.flashcard { min-height: 105px; padding: 12px; display: grid; place-content: center; border: 1px solid rgba(139,92,246,.17); border-radius: 10px; color: #d8dded; background: linear-gradient(145deg,rgba(139,92,246,.08),rgba(255,255,255,.02)); cursor: pointer; text-align: center; transform-style: preserve-3d; transition: transform .25s,border-color .25s; }
.flashcard:hover { border-color: rgba(139,92,246,.45); transform: translateY(-2px); }
.flashcard span { font-size: .72rem; font-weight: 800; }
.flashcard b { display: none; color: #a4aec9; font-size: .62rem; line-height: 1.5; }
.flashcard em { margin-top: 8px; color: #6f7b9e; font-size: .52rem; font-style: normal; }
.flashcard.revealed span { display: none; }
.flashcard.revealed b { display: block; }
.assignment-card { padding: 14px; border: 1px solid rgba(148,163,215,.13); border-radius: 10px; background: rgba(255,255,255,.02); }
.assignment-card > b { font-size: .73rem; }
.assignment-card label, .project-tier label { display: flex; align-items: center; gap: 6px; color: #6ee7b7; font-size: .61rem; cursor: pointer; }
.assignment-card input, .project-tier input { accent-color: #34d399; }
.project-stack { display: grid; gap: 8px; }
.project-tier { padding: 14px; border: 1px solid rgba(148,163,215,.13); border-radius: 10px; background: rgba(255,255,255,.02); }
.project-tier > div { display: flex; align-items: center; gap: 8px; }
.project-tier > div span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #c4b5fd; background: rgba(139,92,246,.12); font-size: .58rem; font-weight: 800; }
.project-tier h4 { margin: 0; font-size: .74rem; }
.project-tier p { margin: 8px 0; color: #929dbc; font-size: .67rem; line-height: 1.6; }
.quiz-question { padding: 12px; border: 1px solid rgba(148,163,215,.1); border-radius: 9px; background: rgba(255,255,255,.015); }
.quiz-question legend { padding: 0 3px; color: #d8deef; font-size: .69rem; font-weight: 700; line-height: 1.5; }
.answer-review { margin-top: 17px; }
.answer-review h4 { margin: 0 0 8px; font-size: .75rem; }
.answer-review ul { padding: 0; display: grid; gap: 5px; list-style: none; }
.answer-review li { padding: 8px; display: flex; gap: 7px; border-radius: 7px; background: rgba(255,255,255,.02); font-size: .61rem; }
.answer-review li.correct i { color: #34d399; }
.answer-review li.incorrect i { color: #fb7185; }
.answer-review li span { display: grid; color: #949fbd; }
.mentor-panel { text-align: center; }
.mentor-orb { width: 62px; height: 62px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.32); border-radius: 20px; color: #d8d2ff; background: radial-gradient(circle at 30% 25%,#a78bfa,#4f46e5 60%,#1e3a8a); box-shadow: 0 15px 40px rgba(79,70,229,.25); font-size: 1.6rem; }
.mentor-panel h3 { margin: 0 0 5px; }
.mentor-panel > p { margin: 0 auto 15px; max-width: 470px; color: #8c97b6; font-size: .7rem; }
.mentor-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mentor-actions button { padding: 6px 8px; border: 1px solid rgba(139,92,246,.18); border-radius: 20px; color: #aaa2e8; background: rgba(139,92,246,.06); cursor: pointer; font-size: .57rem; }
.mentor-chat { max-height: 270px; margin-top: 16px; padding: 12px; display: grid; gap: 8px; overflow-y: auto; border: 1px solid rgba(148,163,215,.1); border-radius: 11px; background: rgba(4,7,17,.4); text-align: left; }
.mentor-message { display: flex; align-items: flex-start; gap: 7px; }
.mentor-message i { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #b8aaff; background: rgba(139,92,246,.12); font-size: .72rem; }
.mentor-message p { margin: 0; padding: 8px 10px; border-radius: 2px 9px 9px 9px; color: #aab4cf; background: rgba(255,255,255,.035); font-size: .65rem; line-height: 1.6; }
.mentor-message.user { flex-direction: row-reverse; }
.mentor-message.user p { color: #cbd7f5; background: rgba(59,130,246,.1); border-radius: 9px 2px 9px 9px; }
.mentor-message.loading { opacity: .65; }
.mentor-form { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.mentor-form textarea { min-height: 70px; padding: 10px; resize: vertical; border: 1px solid rgba(148,163,215,.14); border-radius: 9px; outline: 0; color: #dce2f2; background: rgba(4,7,17,.5); font-size: .66rem; }
.mentor-form button { width: 40px; border: 0; border-radius: 9px; color: white; background: linear-gradient(145deg,#7653e5,#377ded); cursor: pointer; }

.certificate-modal, .reward-overlay { position: fixed; z-index: 1700; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(2,4,12,.84); opacity: 0; visibility: hidden; transition: .25s; }
.certificate-modal.open, .reward-overlay.open { opacity: 1; visibility: visible; }
.certificate-shell { position: relative; width: min(850px,100%); padding: 55px; overflow: hidden; text-align: center; border: 8px double #d6b968; color: #172033; background: radial-gradient(circle at 50% 0,#fff,#f8f5ea); box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.certificate-shell::before, .certificate-shell::after { content: ""; position: absolute; width: 220px; height: 220px; border: 35px solid rgba(124,58,237,.05); border-radius: 50%; }
.certificate-shell::before { left: -120px; top: -120px; }
.certificate-shell::after { right: -120px; bottom: -120px; }
.certificate-shell > .panel-close { position: absolute; right: 15px; top: 15px; color: #475569; background: white; }
.certificate-mark { width: 62px; height: 62px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: #7c3aed; background: #ede9fe; font-size: 2rem; }
.certificate-shell > span { display: block; margin-top: 12px; color: #7c3aed; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.certificate-shell h2 { margin: 8px 0 20px; font: 2.25rem Georgia,serif; }
.certificate-shell p { margin: 6px 0; color: #64748b; font: .85rem Georgia,serif; }
.certificate-shell h3 { margin: 10px 0; color: #6d28d9; font: 2rem Georgia,serif; }
.certificate-shell h4 { margin: 10px 0 24px; font: 1.25rem Georgia,serif; }
.certificate-meta { display: flex; justify-content: center; gap: 30px; color: #64748b; font-size: .65rem; }
.certificate-actions { position: relative; z-index: 2; margin-top: 25px; display: flex; justify-content: center; gap: 8px; }
.reward-card { position: relative; width: min(390px,100%); padding: 34px; overflow: hidden; text-align: center; border: 1px solid rgba(139,92,246,.35); border-radius: 20px; background: radial-gradient(circle at 50% -10%,rgba(139,92,246,.24),transparent 40%),#10142c; box-shadow: 0 35px 100px rgba(0,0,0,.55); transform: scale(.88); transition: transform .3s; }
.reward-overlay.open .reward-card { transform: scale(1); }
.reward-card > i { color: #facc15; font-size: 3rem; animation: rewardBounce .7s both; }
@keyframes rewardBounce { 50% { transform: scale(1.3) rotate(8deg); } }
.reward-card > span { display: block; margin-top: 12px; color: #a78bfa; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reward-card h2 { margin: 6px 0; font-size: 1.35rem; }
.reward-card p { margin: 0 0 18px; color: #929dbc; font-size: .72rem; }

@media (max-width: 1050px) {
  .roadmap-catalog { grid-template-columns: repeat(2,1fr); }
  .metric-grid { grid-template-columns: repeat(3,1fr); }
  .badge-grid { grid-template-columns: repeat(3,1fr); }
  .week-grid { grid-template-columns: repeat(2,1fr); }
  .interview-list { grid-template-columns: repeat(3,1fr); }
  .community-layout { grid-template-columns: 1fr 260px; }
}

@media (max-width: 760px) {
  .generator-options { grid-template-columns: 1fr; }
  .trust-strip { flex-wrap: wrap; gap: 8px 13px; }
  .section-heading, .view-heading { align-items: flex-start; flex-direction: column; }
  .catalog-search { width: 100%; }
  .catalog-search select { min-width: 0; flex: 1; }
  .roadmap-catalog { grid-template-columns: 1fr; }
  .catalog-card > p { min-height: 0; }
  .player-bar { flex-wrap: wrap; }
  .player-level { width: 100%; min-width: 0; }
  .player-stat { flex: 1; border-left: 0; }
  .mission-button { width: 100%; margin: 0; justify-content: center; }
  .workspace-tabs button { flex: 0 0 max-content; }
  .workspace-view:not([data-view-panel="roadmap"]) { padding: 18px; }
  .study-summary, .salary-grid { grid-template-columns: repeat(2,1fr); }
  .week-grid, .analytics-grid, .career-grid, .builder-grid, .community-layout { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .badge-grid { grid-template-columns: 1fr 1fr; }
  .interview-card { grid-template-columns: 1fr; }
  .interview-list { grid-template-columns: 1fr; }
  .editor-grid { min-height: 700px; grid-template-columns: 1fr; }
  .editor-pane { border-right: 0; border-bottom: 1px solid rgba(148,163,215,.12); }
  .community-layout aside { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .resource-list, .flashcard-grid, .two-column-detail { grid-template-columns: 1fr; }
  .certificate-shell { padding: 45px 20px 30px; }
  .certificate-shell h2 { font-size: 1.6rem; }
  .certificate-shell h3 { font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .search-suggestions { top: calc(50% + 10px); }
  .discovery-section { padding-top: 55px; }
  .catalog-search { display: grid; grid-template-columns: auto 1fr; }
  .catalog-search select:last-child { grid-column: 2; }
  .workspace-actions { flex-wrap: wrap; }
  .certificate-button { flex: 1; }
  .study-summary, .salary-grid, .metric-grid, .badge-grid { grid-template-columns: 1fr; }
  .playground-toolbar { align-items: flex-start; flex-direction: column; }
  .playground-toolbar > div:last-child { width: 100%; }
  .playground-toolbar select { flex: 1; }
  .community-layout aside { grid-template-columns: 1fr; }
  .certificate-meta, .certificate-actions { align-items: center; flex-direction: column; gap: 8px; }
  .roadmap-hero p { padding: 0 3px; font-size: .82rem; }
  .trust-strip { padding: 0 5px; }
}

@media print {
  body * { visibility: hidden !important; }
  .certificate-modal, .certificate-modal * { visibility: visible !important; }
  .certificate-modal { position: absolute; inset: 0; padding: 0; background: white; }
  .certificate-shell { width: 100%; min-height: 95vh; box-shadow: none; }
  .certificate-actions, .certificate-shell > .panel-close { display: none !important; }
}
.career-field-switch{display:inline-flex;gap:6px;margin:18px auto 0;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(9,11,23,.72);backdrop-filter:blur(12px)}.career-field-switch button,.career-field-switch a{display:flex;align-items:center;gap:7px;border:0;border-radius:9px;padding:10px 14px;color:#9da3b8;background:transparent;text-decoration:none;font:600 13px Inter,sans-serif;cursor:pointer}.career-field-switch .active{color:#fff;background:linear-gradient(135deg,#7c3aed,#4f6ee8);box-shadow:0 6px 18px rgba(99,70,210,.26)}.career-field-switch a:hover{color:#fff;background:rgba(255,255,255,.06)}
.field-choice-pending .roadmap-hero,.field-choice-pending .discovery-section,.field-choice-pending .roadmap-section{display:none!important}.roadmap-field-gate{min-height:calc(100vh - 82px);display:grid;place-items:center;padding:70px 0;background:radial-gradient(circle at 50% 5%,rgba(124,58,237,.17),transparent 42%)}.roadmap-field-gate[hidden]{display:none}.field-gate-copy{text-align:center;max-width:720px;margin:0 auto 36px}.field-gate-copy>span{color:#a98cff;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.field-gate-copy h1{margin:14px 0 12px;color:#f7f5ff;font-size:clamp(36px,5vw,58px);line-height:1.08;letter-spacing:-.045em}.field-gate-copy p{margin:0;color:#a7acc0;font-size:17px}.roadmap-field-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:auto}.roadmap-field-card{display:flex;gap:20px;min-height:220px;padding:28px;text-align:left;text-decoration:none;color:#f6f4ff;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(145deg,rgba(24,26,47,.96),rgba(12,14,26,.96));cursor:pointer;transition:.22s}.roadmap-field-card:hover{transform:translateY(-4px);border-color:#775dd2;box-shadow:0 24px 60px rgba(0,0,0,.35)}.roadmap-field-card>i{flex:0 0 58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#7c3aed,#4f73e6);font-size:27px}.roadmap-field-card small{color:#aa91ff;font-size:11px;font-weight:800;letter-spacing:.12em}.roadmap-field-card h2{margin:8px 0;font-size:27px}.roadmap-field-card p{min-height:66px;margin:0 0 18px;color:#a7acc0;line-height:1.55}.roadmap-field-card b{font-size:13px}@media(max-width:700px){.roadmap-field-gate{padding:44px 0}.roadmap-field-options{grid-template-columns:1fr}.roadmap-field-card{min-height:190px;padding:22px}.field-gate-copy p{font-size:15px}}
.brand-logo-image,.sidebar-brand-logo{width:38px;height:38px;border-radius:11px;object-fit:cover;object-position:center;display:block;box-shadow:0 0 18px rgba(59,130,246,.28)}.sidebar-brand-logo{width:34px;height:34px;border-radius:9px}
.field-gate-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 auto 24px;color:#fff;text-decoration:none;font-size:18px}.field-gate-brand img{width:50px;height:50px;border-radius:14px;object-fit:cover;display:block;box-shadow:0 0 26px rgba(59,130,246,.38)}