.nr-page { max-width:1180px; }
.nr-hero {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:30px; margin-bottom:22px; border:1px solid rgba(0,229,255,.16); border-radius:20px;
  background:linear-gradient(135deg,rgba(0,180,216,.13),rgba(124,58,237,.12));
}
.nr-hero::after { content:'123'; position:absolute; right:28px; bottom:-32px; font-size:8rem; font-weight:900; color:rgba(255,255,255,.025); pointer-events:none; }
.nr-hero h1 { font-size:2rem; margin-bottom:8px; }
.nr-hero p { color:var(--text-secondary); max-width:680px; line-height:1.6; }
.nr-hero-badges { display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.nr-hero-badges span { min-width:94px; padding:13px; border-radius:14px; background:rgba(7,12,20,.55); border:1px solid var(--border); text-align:center; }
.nr-hero-badges b,.nr-hero-badges small { display:block; }
.nr-hero-badges b { color:var(--accent); font-size:1.25rem; }
.nr-hero-badges small { color:var(--text-muted); margin-top:3px; }

.nr-tool { padding:22px; margin-bottom:22px; }
.nr-section-title { display:flex; align-items:center; gap:9px; margin-bottom:7px; font-size:1.15rem; }
.nr-section-title .material-icons { color:var(--accent); }
.nr-section-sub { color:var(--text-secondary); font-size:.86rem; margin-bottom:17px; }
.nr-tool-row { display:grid; grid-template-columns:minmax(220px,1fr) 190px 160px auto; gap:10px; }
.nr-tool-row input,.nr-tool-row select { width:100%; padding:12px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg-secondary); color:var(--text-primary); font:inherit; }
.nr-tool-row input:focus,.nr-tool-row select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.nr-output { margin-top:14px; min-height:68px; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.14); }
.nr-output span { color:var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.nr-output strong { flex:1; color:var(--accent); font-size:1.05rem; }
.nr-output button,.nr-example button { border:1px solid rgba(0,229,255,.2); background:rgba(0,229,255,.08); color:var(--accent); border-radius:9px; padding:8px 11px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.nr-output.is-error { background:rgba(255,77,109,.07); border-color:rgba(255,77,109,.2); }
.nr-output.is-error strong { color:var(--danger); }

.nr-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr); gap:20px; align-items:start; }
.nr-guide,.nr-practice { min-width:0; }
.nr-lesson { border:1px solid var(--border); border-radius:14px; background:var(--bg-card); margin-bottom:10px; overflow:hidden; }
.nr-lesson-head { width:100%; border:0; background:transparent; color:var(--text-primary); display:grid; grid-template-columns:38px 1fr 24px; gap:10px; align-items:center; padding:15px; text-align:left; cursor:pointer; }
.nr-lesson-head:hover { background:var(--bg-card-hover); }
.nr-lesson-head>span:first-child { color:var(--accent); }
.nr-lesson-head b,.nr-lesson-head small { display:block; }
.nr-lesson-head b { font-size:.94rem; }
.nr-lesson-head small { margin-top:3px; color:var(--text-muted); line-height:1.35; }
.nr-chevron { color:var(--text-muted); transition:transform .2s; }
.nr-lesson.open .nr-chevron { transform:rotate(180deg); }
.nr-lesson-body { display:none; padding:0 15px 16px 63px; }
.nr-lesson.open .nr-lesson-body { display:block; }
.nr-lesson-body ul { color:var(--text-secondary); padding-left:18px; line-height:1.55; font-size:.86rem; }
.nr-lesson-body li+li { margin-top:6px; }
.nr-examples { display:grid; gap:7px; margin:13px 0; }
.nr-example { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border-radius:10px; background:rgba(255,255,255,.025); }
.nr-example>div { min-width:0; }
.nr-example code { color:var(--warning); margin-right:10px; }
.nr-example strong { color:var(--text-primary); font-size:.86rem; }
.nr-example small { display:block; color:var(--text-muted); margin-top:4px; }
.nr-example button { flex-shrink:0; padding:7px; }
.nr-trap { display:flex; gap:9px; padding:10px; border-radius:10px; background:rgba(255,183,3,.07); border:1px solid rgba(255,183,3,.13); }
.nr-trap .material-icons { color:var(--warning); font-size:19px; }
.nr-trap b { color:var(--warning); font-size:.8rem; }
.nr-trap p { color:var(--text-secondary); font-size:.8rem; margin-top:2px; line-height:1.4; }

.nr-practice { position:sticky; top:20px; padding:20px; }
.nr-quick-notes { display:grid; gap:8px; margin-bottom:18px; }
.nr-quick-notes div { padding:10px; border-radius:10px; background:rgba(255,255,255,.025); color:var(--text-secondary); font-size:.8rem; line-height:1.4; }
.nr-quick-notes b { color:var(--accent); }
.nr-quiz-start { display:grid; justify-items:center; text-align:center; gap:12px; padding:25px 8px; }
.nr-quiz-start>.material-icons { font-size:42px; color:var(--accent-3); }
.nr-quiz-start b { color:var(--text-primary); }
.nr-quiz-start p { color:var(--text-muted); font-size:.8rem; margin-top:5px; }
.nr-quiz-meta { display:flex; justify-content:space-between; color:var(--text-secondary); font-size:.78rem; }
.nr-quiz-progress { height:5px; background:rgba(255,255,255,.06); border-radius:8px; overflow:hidden; margin:9px 0 17px; }
.nr-quiz-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-3)); }
.nr-practice h3 { font-size:1rem; line-height:1.45; margin-bottom:14px; }
.nr-quiz-options { display:grid; gap:8px; }
.nr-quiz-options button { display:flex; align-items:center; gap:9px; width:100%; padding:10px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); color:var(--text-secondary); text-align:left; cursor:pointer; }
.nr-quiz-options button:hover:not(:disabled) { border-color:var(--accent); color:var(--text-primary); }
.nr-quiz-options button span { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.06); color:var(--accent); font-weight:700; }
.nr-quiz-options button.correct { border-color:var(--success); background:rgba(0,214,143,.08); color:var(--success); }
.nr-quiz-options button.wrong { border-color:var(--danger); background:rgba(255,77,109,.08); color:var(--danger); }
.nr-quiz-feedback { display:none; margin-top:12px; padding:10px; border-radius:10px; font-size:.82rem; }
.nr-quiz-feedback.show { display:block; }
.nr-quiz-feedback.correct { background:rgba(0,214,143,.08); }
.nr-quiz-feedback.wrong { background:rgba(255,77,109,.08); }
.nr-quiz-feedback p { color:var(--text-secondary); margin-top:3px; line-height:1.4; }
.nr-next { margin-top:12px; margin-left:auto; }
.nr-quiz-result { display:grid; justify-items:center; text-align:center; gap:12px; padding:24px 8px; }
.nr-quiz-result>.material-icons { font-size:48px; color:var(--warning); }
.nr-quiz-result strong { color:var(--accent); font-size:1.5rem; }

@media (max-width:980px) {
  .nr-layout { grid-template-columns:1fr; }
  .nr-practice { position:static; }
  .nr-tool-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .nr-hero { align-items:flex-start; flex-direction:column; padding:21px; }
  .nr-hero h1 { font-size:1.55rem; }
  .nr-tool-row { grid-template-columns:1fr; }
  .nr-output { align-items:flex-start; flex-wrap:wrap; }
  .nr-output strong { flex-basis:100%; }
  .nr-lesson-body { padding-left:15px; }
  .nr-example strong { display:block; margin-top:4px; }
}