/* styles.css */
:root{
    --bg:#0f1320;
    --panel:#141a2a;
    --panel-2:#0f1627;
    --accent:#59d185;
    --accent-2:#6bc1ff;
    --locked:#8087a5;
    --text:#e8ecf1;
    --muted:#b8c0cc;
    --danger:#ff6b6b;
    --focus:#ffd166;
    --ring: 0 0 0 3px rgba(255, 209, 102, .45);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:linear-gradient(180deg, #0b0e1a, #0f1320);
  }
  
  .app-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid #1f2740; background:var(--panel);
    position:sticky; top:0; z-index:10;
  }
  .brand{display:flex; align-items:center; gap:10px}
  .logo{font-size:24px}
  #app-title{font-size:18px; margin:0}
  
  .breadcrumb{display:flex; gap:6px; list-style:none; padding:0; margin:0}
  .breadcrumb li{opacity:.9}
  .breadcrumb li+li::before{content:"›"; margin:0 6px; color:var(--muted)}
  .breadcrumb a{color:var(--accent-2); text-decoration:none}
  .breadcrumb a:hover{text-decoration:underline}
  
  .container{max-width:1200px; margin:24px auto; padding:0 16px}
  
  .panel{background:var(--panel); border:1px solid #1f2740; border-radius:14px; padding:14px; margin-bottom:14px; box-shadow: 0 10px 24px rgba(5,8,20,.35)}
  .panel-row{display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center}
  .importer{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  #file-input{background:var(--panel-2); border:1px solid #2a3152; padding:8px; border-radius:8px; color:var(--text)}
  .ghost{background:transparent; border:1px solid #2a3152; color:var(--text); padding:8px 10px; border-radius:8px; cursor:pointer}
  .ghost.small{padding:6px 8px; font-size:12px}
  .ghost:hover{border-color:#3a4575}
  .help{color:var(--muted); margin:0}
  
  .topic-box{min-width:280px}
  .topic-line{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .topic-label{color:var(--muted)}
  .topic-value{font-weight:600}
  .version-badge{background:#1f2740; border:1px solid #2a3152; padding:2px 6px; border-radius:6px; color:#cdd7ff}
  
  .progress{position:relative; height:10px; background:#0d1120; border:1px solid #1f2740; border-radius:999px; overflow:hidden}
  .progress-bar{height:100%; background:linear-gradient(90deg, var(--accent), #8be6a9)}
  .progress-meta{color:var(--muted); margin-top:6px}
  .dot{margin:0 6px}
  
  .search-box{display:flex; gap:8px; align-items:center}
  #search-input{flex:1; min-width:220px; padding:10px 12px; border-radius:10px; border:1px solid #2a3152; background:var(--panel-2); color:var(--text)}
  #search-input:focus{outline:none; box-shadow:var(--ring); border-color:#3b6bd6}
  
  .legend{display:flex; gap:14px; align-items:center}
  .legend-item{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
  .legend-dot{display:inline-block; width:12px; height:12px; border-radius:50%}
  .legend-complete{background:var(--accent)}
  .legend-available{background:var(--accent-2)}
  .legend-locked{background:var(--locked)}
  
  .tree-panel{padding:0}
  .tree-container{height:65vh; min-height:420px; width:100%; background: radial-gradient(1200px 400px at 50% 10%, rgba(75, 105, 196,.09), transparent), var(--panel-2); border-radius:14px}
  
  .app-footer{max-width:1200px; margin:20px auto; padding:0 16px; color:#9fb1d3}
  
  /* Modal */
  .modal{position:fixed; inset:0; display:none}
  .modal[aria-hidden="false"]{display:block}
  .modal-backdrop{position:absolute; inset:0; background:rgba(3,6,20,.6)}
  .modal-content{
    position:absolute; right:24px; bottom:24px; width:min(640px, 96vw); max-height:80vh; overflow:auto;
    background:var(--panel); border:1px solid #2a3152; border-radius:16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
  }
  .modal-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #2a3152}
  .modal-body{padding:12px 16px; display:grid; gap:14px}
  .modal-footer{display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid #2a3152}
  .icon-btn{background:transparent; border:none; color:var(--text); font-size:18px; cursor:pointer}
  .primary{background:var(--accent-2); color:black; border:none; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:600}
  .checkbox{display:inline-flex; align-items:center; gap:8px}
  hr{border:0; height:1px; background:#2a3152; margin:8px 0}
  
  .resource-list{display:grid; gap:8px}
  .resource a{color:var(--accent-2); text-decoration:none}
  .resource a:hover{text-decoration:underline}
  .resource iframe{width:100%; height:240px; border:0; border-radius:8px}
  
  .assessment{padding:10px; border:1px dashed #2a3152; border-radius:10px}
  .assessment h4{margin:6px 0 8px}
  .quiz-question{margin-bottom:10px}
  .quiz-correct{color:var(--accent)}
  .quiz-wrong{color:var(--danger)}
  
  .danger{color:var(--danger)}
  .muted{color:var(--muted)}
  
  .node circle{stroke:#111726; stroke-width:2px}
  .node text{font-size:12px; fill:var(--text)}
  .link{fill:none; stroke:#2c355a; stroke-width:2px}
  .link.locked{stroke:#3a4166; stroke-dasharray:3 4}
  
  .node.locked circle{fill:#3a4166}
  .node.available circle{fill:#2b4e7a}
  .node.complete circle{fill:#2d8b5a}
  .node.faded{opacity:.2}
  
  button, input, .icon-btn{transition: box-shadow .15s ease, border-color .15s ease, background .15s ease}
  button:focus-visible, input:focus-visible, .icon-btn:focus-visible{outline:none; box-shadow:var(--ring)}
  
  .visually-hidden{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  
  /* Responsive tweaks */
  @media (max-width: 860px){
    .panel-row{grid-template-columns: 1fr; gap:10px}
    .tree-container{height:60vh}
  }