/* Прва фаза: глобални елементи и само почетна страна Синтаксе. */
.sidebar{background:var(--color-sidebar);border-color:var(--border);padding:28px 16px}.brand{flex-direction:column;align-items:flex-start;gap:14px;font-size:1rem;line-height:1.5;padding:0 10px}.brand img{width:92px;height:92px;object-fit:contain;box-shadow:none}.sidebar-label{margin-top:30px;color:var(--muted-text);letter-spacing:.035em}.nav-item{border-radius:0 14px 14px 0;border-left:3px solid transparent;box-shadow:none!important}.nav-item.active{border-left-color:var(--orange-accent);background:var(--cream);color:var(--primary-brown)}.nav-item:hover{background:var(--hover)}.nav-icon{font-size:20px;color:var(--primary-brown)}
.primary,.secondary,.choice,textarea,input,select{transition:border-color var(--duration),background var(--duration),box-shadow var(--duration)}.primary{background:var(--primary-brown)}.primary:hover{background:var(--secondary-brown)}.secondary:hover,.choice:hover{background:var(--hover)}.choice.selected{background:var(--active);border-color:var(--primary-brown)}.word.selected{background:var(--primary-brown)}.topbar{background:var(--surface);border-color:var(--border)}.context-bar{color:var(--muted-text)}.mode-chip{color:var(--primary-brown);border-color:var(--border)}progress{accent-color:var(--progress)}
[data-view=landing] .mode-chip{display:none}[data-view=landing] .context-bar{margin-bottom:8px}[data-view=landing] #main{max-width:1180px}
.syntax-start-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px 0 30px;border-bottom:1px solid var(--border);margin-bottom:26px}.syntax-start-intro .eyebrow{color:var(--secondary-brown);font-size:.75rem;letter-spacing:.065em;margin-bottom:12px}.syntax-start-intro h1{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:400;line-height:1.2;margin:0 0 12px}.syntax-start-intro .intro-copy{font-size:1.1rem;color:var(--muted-text)}.syntax-book{margin:0 16px 0 0;flex:0 0 100px}.syntax-book img{display:block;width:100px;height:auto;box-shadow:var(--shadow-card)}.syntax-book figcaption{font-size:.75rem;text-align:center;color:var(--muted-text);margin-top:8px}
.syntax-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.syntax-mode-card{display:flex;align-items:flex-start;text-align:left;gap:16px;padding:24px 22px;min-height:154px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);transition:background var(--duration),border-color var(--duration)}.syntax-mode-card:hover{border-color:var(--primary-brown);background:var(--cream)}.syntax-mode-card:active{background:var(--active)}.syntax-mode-number{font-size:.875rem;color:var(--orange-accent);margin-top:3px;font-variant-numeric:tabular-nums}.syntax-mode-copy{min-width:0;flex:1}.syntax-mode-copy strong{display:block;font-size:1rem;line-height:1.5;color:var(--secondary-brown);margin-bottom:10px}.syntax-mode-copy>span{display:block;font-size:.9375rem;line-height:1.65;color:var(--muted-text);overflow-wrap:anywhere}.syntax-mode-arrow{color:var(--primary-brown);align-self:center;font-size:1.2rem}.syntax-mode-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:1100px) and (min-width:801px){.syntax-mode-card{padding:20px 16px;gap:12px}.syntax-mode-copy strong{font-size:.9375rem}.syntax-mode-copy>span{font-size:.875rem}.brand{font-size:.875rem}.brand img{width:76px;height:76px}}
@media(max-width:800px){.sidebar{padding:14px 20px}.brand{flex-direction:row;align-items:center;font-size:.9375rem;gap:14px;padding:0}.brand img{width:58px;height:58px}.nav-item{border-radius:8px;border-left-width:3px}.mode-nav{margin-top:14px}.syntax-start-intro{padding-top:14px;gap:24px}.syntax-mode-card{min-height:145px;padding:20px 16px;gap:12px}}
@media(max-width:560px){.sidebar{padding:12px 14px}.brand{font-size:.875rem}.brand img{width:52px;height:52px}.mode-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin-top:10px}.nav-item{font-size:.75rem;min-height:44px;padding:8px 5px;line-height:1.4}.nav-icon{font-size:17px;flex:0 0 18px}.syntax-start-intro{padding:12px 0 20px;margin-bottom:20px;gap:18px}.syntax-start-intro h1{font-size:2rem;margin-bottom:8px}.syntax-start-intro .eyebrow{font-size:.6875rem;letter-spacing:.02em;line-height:1.6;margin-bottom:8px}.syntax-start-intro .intro-copy{font-size:1rem}.syntax-book{flex-basis:70px;margin:0}.syntax-book img{width:70px}.syntax-book figcaption{font-size:.6875rem}.syntax-mode-grid{grid-template-columns:1fr;gap:12px}.syntax-mode-card{padding:18px 16px;min-height:0;gap:14px}.syntax-mode-copy strong{font-size:1rem;margin-bottom:6px}.syntax-mode-copy>span{font-size:.9375rem}.syntax-mode-arrow{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.syntax-start-intro{flex-wrap:wrap}.syntax-start-intro>div{flex:1 1 14rem;min-width:0}.syntax-start-intro h1{overflow-wrap:anywhere}.brand span{min-width:0;overflow-wrap:anywhere}
.syntax-mode-card{min-width:0}.syntax-mode-copy strong{overflow-wrap:anywhere}@media(max-width:560px){.syntax-mode-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.syntax-start-intro>div{flex-basis:100%}.syntax-start-intro h1{overflow-wrap:break-word}}
/* Одобрени водич и приручник чине једну готову композицију на улазу у област. */
.syntax-welcome{position:relative;isolation:isolate;flex:0 0 210px;width:210px;height:280px;margin:0 12px 0 0}
.syntax-welcome .syntax-jana{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.project-stage{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(440px,2fr) minmax(120px,.7fr);grid-template-areas:"olivera core book" "olivera core jana";align-items:end;gap:12px;max-width:1180px;margin:clamp(20px,5vh,60px) auto}.project-start{grid-area:core;align-self:center;min-width:0;padding:clamp(24px,4vw,48px);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}.project-start h1{font-size:clamp(2rem,4.3vw,3.5rem);font-weight:400;line-height:1.15;margin:0 0 18px}.project-authors{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 22px}.project-authors>div{display:flex;align-items:center;gap:10px}.project-side,.project-book{margin:0;min-width:0;pointer-events:none}.project-side img,.project-book img{display:block;width:100%;height:auto;object-fit:contain}.project-olivera{grid-area:olivera;align-self:end}.project-jana{grid-area:jana;align-self:end}.project-book{grid-area:book;align-self:start;justify-self:end;width:min(100%,112px)}.project-howto{margin-top:22px;padding:14px 16px;border-left:3px solid var(--orange-accent);background:var(--cream);font-size:.92rem}.project-howto h2{font-size:1rem;margin:0 0 8px}.project-howto p{margin:0;color:var(--muted-text)}.project-module-select{margin-top:28px;max-width:420px}.project-module-label{display:block;font-weight:700;margin-bottom:10px}.project-module-select #module-select{max-width:none;width:100%;min-height:52px;font-size:1rem}.module-book-reference{margin:16px 0 0;color:var(--muted-text);font-size:.95rem}.phonetics-lesson{padding:18px;border-left:3px solid var(--orange-accent);background:var(--cream);margin:16px 0 22px}.phonetics-lesson h3{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px}.phonetics-lesson p{margin:0 0 15px}.phonetics-lesson p:last-child{margin-bottom:0}
@media(max-width:1040px){.project-stage{grid-template-columns:minmax(96px,.5fr) minmax(400px,2fr) minmax(96px,.5fr);gap:6px}.project-book{width:min(100%,88px)}}
@media(max-width:700px){.project-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"core core" "book book" "olivera jana";align-items:end;gap:10px;margin:16px auto}.project-start{padding:24px 18px}.project-book{justify-self:center;width:76px}.project-side{width:min(100%,155px)}.project-olivera{justify-self:end}.project-jana{justify-self:start}.project-start h1{font-size:clamp(2rem,11vw,3rem)}}
@media(max-width:560px){.syntax-welcome{flex-basis:180px;width:180px;height:225px;margin:0 auto}.syntax-start-intro{gap:8px}}
.project-olivera{transform:translateY(-32px)}
.mode-intro-illustration{width:min(100%,560px);margin:0 auto 22px}.mode-intro-illustration img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:700px){.project-olivera{transform:translateY(-26px)}}
@media(max-width:560px){.mode-intro-illustration{margin-bottom:18px}}