:root { --bg:#0b0f14; --surface:#121826; --text:#e6edf3; --muted:#9fb0c0; --primary:#4f8cff; --border:#1f2937; }
[data-theme='light'] { --bg:#ffffff; --surface:#f7f9fb; --text:#0b1220; --muted:#6b7a90; --primary:#3b82f6; --border:#e3e8ef; }
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:980px;margin:0 auto;padding:0 16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:box-shadow .2s ease,border-color .2s ease}
.card:hover{box-shadow:0 14px 34px rgba(0,0,0,.28);border-color:rgba(79,140,255,.35)}
.np-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.np-header .container{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
.np-actions{display:flex;gap:8px;margin-top:0;align-items:center}
/* Manual page: add space between textarea and buttons */
.card textarea + .np-actions{margin-top:16px}
.np-actions a{text-decoration:none}
.np-header + .container{margin-top:12px}
/* Ensure spacing exists even if the first container (tip) is hidden */
.np-header + .container[hidden] + .container{margin-top:12px}
.np-footer{padding:16px 0 32px;color:var(--muted)}
.np-footer .container{text-align:center}
.np-footer .footer-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--border)}
.np-footer .footer-link:hover{color:var(--text); border-color: rgba(79,140,255,.6)}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:16px;margin:0}
.theme-toggle{height:34px;min-width:34px;padding:0;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0;font-size:16px;transition:background .15s ease, border-color .15s ease, transform .04s ease}
.theme-toggle svg{display:block;width:16px;height:16px}
.theme-toggle:hover{background:rgba(255,255,255,.06)}
[data-theme='light'] .theme-toggle:hover{background:#eef2f7;border-color:#d7dde5}
.theme-toggle:active{transform:translateY(1px)}
.secondary{background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text);height:40px;padding:10px 14px;cursor:pointer;transition:transform .04s ease,filter .2s ease}
.primary{background:var(--primary);border:1px solid #3c6fe0;border-radius:10px;color:#fff;height:40px;padding:10px 14px;cursor:pointer;transition:transform .04s ease,filter .2s ease}
.primary:hover{filter:brightness(1.05)}
.secondary:hover{filter:brightness(1.08)}
.primary:active,.secondary:active{transform:translateY(1px)}
.np-header .secondary{height:28px;padding:6px 10px;border-radius:8px}
.hero .np-actions .primary{height:28px;padding:6px 10px;border-radius:8px}
.manual-btn{display:flex;align-items:center;gap:6px;font-weight:500;transition:all .2s ease}
.manual-btn svg{display:block;width:16px;height:16px}
.manual-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,140,255,.3)}
.label{display:block;font-weight:600;margin-bottom:8px}
textarea{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:12px;min-height:220px;font-family:'Noto Sans Devanagari',ui-monospace,Menlo,Consolas,monospace;line-height:1.7}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:840px){.grid{grid-template-columns:1fr}}
.checkbox{display:flex;align-items:center;gap:8px}

/* Lessons layout (mirrors main app look) */
.hero { margin: 18px 0 10px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hero h2 { margin: 0; }
.hero p { margin: 0; color: var(--muted); max-width: 60ch; }
.lessons-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top: 12px; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 16px; }
.pill { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.pill.active { background: var(--primary); color: #fff; border-color: #3c6fe0; }
/* Manual recents */
#np-recents .pill{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:1000px){ .lessons-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:740px){ .lessons-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .lessons-grid{ grid-template-columns: 1fr; } }
.lesson-card { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px; transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease; }
.lesson-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); border-color: rgba(79,140,255,.35); }
.lesson-title { font-weight:700; }
.lesson-meta { color: var(--muted); font-size:12px; }
.lesson-actions { display:flex; justify-content:center; align-items:center; }
.lesson-actions a { text-decoration:none; }
.lesson-play { width:36px; height:36px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--border); cursor:pointer; }
.lesson-play:hover { filter: brightness(1.08); }
.lesson-retry { width:36px; height:36px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--primary); background:rgba(79,140,255,0.1); cursor:pointer; }
.lesson-retry:hover { filter: brightness(1.08); background:rgba(79,140,255,0.2); }
.lesson-retry svg{display:block;width:18px;height:18px}

/* Lesson Results */
.lesson-results { 
  background: rgba(79,140,255,0.08); 
  border: 1px solid rgba(79,140,255,0.2); 
  border-radius: 8px; 
  padding: 8px 12px; 
  margin: 8px 0; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  align-items: center; 
}
.result-item { 
  display: flex; 
  align-items: center; 
  gap: 4px; 
  font-size: 11px; 
}
.result-label { 
  color: var(--muted); 
  font-weight: 500; 
}
.result-value { 
  color: var(--text); 
  font-weight: 600; 
}
.result-time { 
  color: var(--muted); 
  font-size: 10px; 
  margin-left: auto; 
}

.divider{height:1px;background:var(--border);border:0;margin:16px 0}

/* Tip / Notice component */
.np-tip{display:flex;align-items:center;gap:10px;background:rgba(79,140,255,.08);border:1px solid rgba(79,140,255,.25);border-radius:10px;padding:10px 12px;margin:12px 0 16px}
.np-tip .np-tip-icon{display:grid;place-items:center;width:18px;height:18px;color:var(--primary)}
.np-tip .np-tip-text{color:var(--text);font-size:13px}
.np-tip .np-tip-text .muted{color:var(--muted)}
.np-tip .np-tip-close{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;line-height:0}
.np-tip .np-tip-close:hover{color:var(--text)}

/* Inline keyboard key style */
.kbd{display:inline-block;min-width:28px;padding:2px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.2;text-align:center}
[data-theme='light'] .kbd{background:#f5f7fb}



/* Manual page: prevent textarea overflow */
#np-manual{box-sizing:border-box;max-width:100%;display:block}
/* Character counter styling */
.char-counter{font-size:12px;color:var(--muted);margin-top:6px;text-align:right}