/* ---------- Variables ---------- */
  :root{
    --green:#006400;
    --green-dark:#004d00;
    --yellow:#FFD700;
    --bg-light:#e6ffe6;
    --bg-card:#fff;
    --text:#333;
    --shadow:0 2px 6px rgba(0,0,0,.08);
    /* whiteboard bg */
    --light-bg-color: #ffffff;
    /* dark */
    --bg-dark:#121212;
    --card-dark:#1e1e1e;
    --text-dark:#e0e0e0;
    --footer-dark: #333;
    --dark-bg-color: #2e2e2e;
  }

  /* ---------- Reset / base ---------- */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;font-size:100%}
  body{font-family:Roboto,system-ui,sans-serif;background:var(--bg-light);color:var(--text);line-height:1.55;min-block-size:100dvh;transition:background .3s,color .3s}
  body.dark-mode{background:var(--bg-dark);color:var(--text-dark)}
  a{color:var(--green);text-decoration:underline;} /* Links underlined by default */
   a:hover{text-decoration:none;}
  body.dark-mode a{color:var(--yellow);}
  img{max-inline-size:100%;block-size:auto}
  strong { font-weight: 700; }
  /* Ensure focus states are visible */
  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible, .hamburger:focus-visible, .accordion:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
  body.dark-mode a:focus-visible, body.dark-mode button:focus-visible, body.dark-mode select:focus-visible, body.dark-mode input:focus-visible, body.dark-mode [tabindex="0"]:focus-visible, body.dark-mode .hamburger:focus-visible, body.dark-mode .accordion:focus-visible { outline-color: var(--yellow); }


  /* ---------- Header ---------- */
  header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-card);color:var(--green);box-shadow:var(--shadow);position:sticky;top:0;z-index:100;} /* z-index added */
  header img{inline-size:48px;}
  header h1{font-weight:700;font-size:clamp(1.2rem,4vw+.4rem,1.8rem); flex-grow: 1; text-align: right; /* Right align header text */}
  body.dark-mode header{background:var(--card-dark);color:var(--text-dark)}

  @media (max-width: 600px) {
    header { padding: .5rem 1rem; gap: .5rem; }
    header img { inline-size: 40px; }
    header h1 { font-size: clamp(1.0rem, 3.5vw + .4rem, 1.6rem); }
  }

  /* ---------- Navigation ---------- */
  nav{background:var(--yellow);box-shadow:var(--shadow)}
  .nav-wrap{display:flex;justify-content:space-around;align-items:center;max-inline-size:1200px;margin-inline:auto;block-size:56px}
  .nav-links{display:flex;flex:1;justify-content:space-around;list-style:none; align-items: center; }
  .nav-links a{display:flex;flex-direction:column;align-items:center;gap:.15rem; font-size:.72rem;font-weight:500;padding: .15rem .5rem .35rem .5rem; border-radius:6px;transition:background .2s,transform .2s, color .2s; color: var(--green); text-decoration: none;}
  .nav-links i{font-size:1.15rem}
  .nav-links a.active,
  .nav-links a:focus-visible,
  .nav-links a:hover{background:var(--green);color:#fff}

  @media(max-width:600px){
    nav{position:fixed;inset-block-end:0;inset-inline:0; z-index: 99;}
    body{padding-block-end:56px}
  }
  @media(min-width:601px){
    nav { position: sticky; top: 0; z-index: 98; }
    .nav-wrap{block-size:64px}
    .nav-links a{font-size:.8rem}
  }
  body.dark-mode nav{background:#333}
  body.dark-mode .nav-links a{color:var(--text-dark)}
  body.dark-mode .nav-links a.active,
  body.dark-mode .nav-links a:focus-visible,
  body.dark-mode .nav-links a:hover{background:var(--yellow);color:var(--bg-dark)}


  /* ---------- Containers & sections ---------- */
   main { position: relative; z-index: 1; }
  .container{inline-size:clamp(90%,1200px,95%);margin-inline:auto;padding-block:1.25rem 2rem}
  section{background:var(--bg-card);padding:1.25rem 1rem;border-radius:12px;box-shadow:var(--shadow);margin-block-end:1.5rem}
  body.dark-mode section{background:var(--card-dark)}
  section h2{font-size:clamp(1.1rem,2.2vw+.7rem,1.6rem);margin-block-end:.75rem;color:var(--green);border-block-end:2px solid var(--yellow);display:inline-block;padding-block-end:.25rem}
  body.dark-mode section h2{color:var(--yellow);border-color:var(--green)}
  section p { margin-bottom: 1em; }
  section ul { list-style: disc; margin-left: 25px; margin-bottom: 1em; }

  /* ---------- Search ---------- */
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .search-container { position: relative; margin-bottom: 1.5rem; }
  #site-search { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 6px; }
  body.dark-mode #site-search { background-color: var(--card-dark); border-color: #555; color: var(--text-dark); }
  #site-search:focus { border-color: var(--primary-color); outline: 2px solid var(--primary-color); }
  body.dark-mode #site-search:focus { border-color: var(--yellow); outline-color: var(--yellow); }

  .search-results-dropdown { display: none; /* Hidden by default */ position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-card); border: 1px solid #ccc; border-top: none; border-radius: 0 0 6px 6px; max-height: 300px; overflow-y: auto; z-index: 101; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
  body.dark-mode .search-results-dropdown { background-color: var(--card-dark); border-color: #555; }
  .search-results-dropdown a { display: block; padding: 0.75rem 1rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--bg-faint); }
   .search-results-dropdown a:last-child { border-bottom: none; }
  body.dark-mode .search-results-dropdown a { color: var(--text-dark); border-bottom-color: #333; }
  .search-results-dropdown a:hover, .search-results-dropdown a:focus { background-color: var(--bg-faint); color: var(--green); }
  body.dark-mode .search-results-dropdown a:hover, body.dark-mode .search-results-dropdown a:focus { background-color: #333; color: var(--yellow); }
   .search-results-dropdown span { font-size: 0.85em; color: #666; display: block; margin-top: 2px; }
   body.dark-mode .search-results-dropdown span { color: #aaa; }


  /* ---------- Dashboard grid ---------- */
  #dashboard .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.9rem}
  .tile{background:var(--green);color:#fff;text-align:center;padding:1.1rem .5rem;border-radius:10px;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content: center; min-block-size:clamp(96px,18dvh,140px);transition:background .25s,transform .25s; text-decoration: none; /* Remove underline from tiles */}
  .tile i{font-size:1.6rem}
  .tile:hover{background:var(--green-dark);transform:translateY(-4px)}
  .tile span{font-weight:700;font-size:.78rem; max-width: 100%;}
  body.dark-mode .tile { background: var(--card-dark); color: var(--text-dark); }
  body.dark-mode .tile:hover { background: #333; }


  /* ---------- Content Frame (for tiles) ---------- */
  #frame-container { display: none; margin-block-start: 1.5rem; position: relative; }
  #frame-container.active { display: block; }
  #content-frame { width: 100%; height: 600px; border: none; box-shadow: var(--shadow); border-radius: 12px; background-color: var(--bg-card); }
  body.dark-mode #content-frame { background-color: var(--card-dark); }
  #close-frame { position: absolute; top: -40px; right: 0; background-color: var(--green); color: #fff; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; font-size: 0.9em; z-index: 5;}
  #close-frame:hover { background-color: var(--green-dark); }
  #fallback-message { display: none; text-align: center; margin-top: 10px; padding: 15px; background-color: var(--yellow); color: var(--green); border-radius: 6px; }
  #fallback-message a { color: var(--green); text-decoration: underline; font-weight: bold; }
  body.dark-mode #fallback-message { background-color: var(--green); color: var(--yellow); }
  body.dark-mode #fallback-message a { color: var(--yellow); }

  /* ---------- Common iframe wrapper ---------- */
  .iframe-wrap{position:relative; padding-bottom: 56.25%; height: 0; border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow); margin-top: 1rem; }
  body.dark-mode .iframe-wrap{background:var(--card-dark)}
  .iframe-wrap iframe{position: absolute; top: 0; left: 0; inline-size:100%;block-size:100%;border:0}

  /* iframe loading spinner */
  .iframe-loading-container { position: relative; }
  .iframe-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--green); border-radius: 50%; animation: spin 1s linear infinite; z-index: 5; }
  body.dark-mode .iframe-loading { border-color: #555; border-top-color: var(--yellow); }
  @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }


  /* ---------- Whiteboard container ---------- */
  .whiteboard-container{position:relative;inline-size:100%;block-size:600px;border:1px solid var(--green);border-radius:8px;background:var(--light-bg-color);overflow:hidden;margin-top:1rem;transition:background-color .3s,border-color .3s}
  body.dark-mode .whiteboard-container{background:var(--dark-bg-color);border-color:var(--text-dark)}
  #whiteboard{display:block;inline-size:100%;block-size:100%;background-color:transparent;touch-action:none}

  #whiteboard.pen-cursor{cursor:crosshair}
  #whiteboard.text-cursor{cursor:text}
  #whiteboard.eraser-cursor{cursor:none}
  #eraser-preview{position:absolute;border:1px dashed grey;border-radius:50%;background:rgba(128,128,128,.3);pointer-events:none;display:none;z-index:20}

  /* Whiteboard Tools & Buttons */
  .button-group{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:8px;z-index:10}
  .button-group button{background:var(--green);color:#fff;border:none;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:.85em;transition:background-color .3s;display:flex;align-items:center;gap:5px}
  .button-group button:hover{background:var(--green-dark)}
  body.dark-mode .button-group button{background:#444;color:var(--text-dark)}
  body.dark-mode .button-group button:hover{background:#222}

  .button-group button.active{outline:2px solid var(--yellow);box-shadow:0 0 5px var(--yellow);background:var(--green-dark)}
  body.dark-mode .button-group button.active{background:#222}

  .button-group .fullscreen-button.full{background:var(--yellow);color:var(--green)}
  body.dark-mode .button-group .fullscreen-button.full{background:var(--yellow);color:var(--bg-dark)}

  .whiteboard-tools { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 8px; background: rgba(255, 255, 255, 0.9); padding: 8px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 15; }
  body.dark-mode .whiteboard-tools { background: rgba(30, 30, 30, 0.9); }
  .tool-button { background: none; border: 1px solid #ccc; padding: 5px 8px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; font-size: 1.1em; }
  .tool-button:hover { background-color: #eee; }
  .tool-button.active { background-color: var(--green); color: white; border-color: var(--green); }
  body.dark-mode .tool-button { border-color: #555; color: var(--text-dark); }
  body.dark-mode .tool-button:hover { background-color: #444; }
  body.dark-mode .tool-button.active { background-color: var(--yellow); color: var(--bg-dark); border-color: var(--yellow); }
  .color-picker, .brush-size, .font-size { height: 30px; border: 1px solid #ccc; border-radius: 4px; background: var(--bg-card); cursor: pointer; padding: 0 5px; vertical-align: middle; }
  body.dark-mode .color-picker, body.dark-mode .brush-size, body.dark-mode .font-size { background: var(--card-dark); color: var(--text-dark); border-color: #555; }
  .whiteboard-tools label { font-size: 0.8em; margin-right: 2px; vertical-align: middle;}

  #text-input-overlay { position: absolute; background: rgba(255, 255, 255, 0.9); border: 1px solid #ccc; padding: 5px; font-family: 'Roboto', sans-serif; z-index: 20; resize: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2); outline: none; min-width: 100px; min-height: 40px; line-height: 1.4; }
  body.dark-mode #text-input-overlay { background: rgba(40, 40, 40, 0.9); border-color: #555; color: var(--text-dark); }


  /* ---------- Buttons & utilities ---------- */
  .button-link{display:inline-block;margin-block-start:1rem;padding:.6rem .9rem;background:var(--green);color:#fff;border-radius:6px;font-weight:500;transition:background .25s,transform .25s; text-decoration: none;}
  .button-link i{margin-inline-start:.3rem}
  .button-link:hover{background:var(--yellow);color:var(--green);transform:translateY(-2px)}
  body.dark-mode .button-link{color:var(--bg-dark)}
  body.dark-mode .button-link:hover{color:var(--bg-dark)}

  /* ---------- Footer ---------- */
  footer{margin-block-start:3rem;padding:1rem;text-align:center;background:var(--green);color:#fff;font-size:.8rem}
  body.dark-mode footer{background:var(--footer-dark)}

  /* ---------- Dark-mode toggle button ---------- */
  .theme-toggle{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--green);padding:.25rem; margin-left: auto;}
  body.dark-mode .theme-toggle{color:var(--text-dark)}

  /* ---------- Notification ---------- */
  .notification{display:none;position:fixed;inset-block-end:1.25rem;inset-inline:50%;translate:-50% 0;background:var(--green);color:#fff;padding:.6rem 1rem;border-radius:6px;font-size:.82rem;box-shadow:var(--shadow);z-index:1000;opacity:0;transition:opacity .3s}
  body.dark-mode .notification{background:var(--yellow);color:var(--bg-dark)}

  /* Mobile nav open state */
  body.mobile-nav-open { overflow: hidden; }