.grammar-shell{max-width:1080px;margin:0 auto;padding:40px 24px 80px;color:#233d50;font:17px/1.65 system-ui,sans-serif}.grammar-shell *{box-sizing:border-box}.grammar-shell h1{font:400 clamp(2rem,5vw,3.7rem)/1.15 Georgia,serif;margin:24px 0}.grammar-shell h2{font:400 clamp(1.5rem,3vw,2.2rem)/1.25 Georgia,serif}.grammar-shell a{color:#086ba9}.grammar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;margin:32px 0}.grammar-panel{background:#fff;border:1px solid #cbdde5;border-radius:22px;padding:28px;margin:22px 0;box-shadow:0 12px 30px #244d6810}.grammar-catalog-card{text-decoration:none;border-top:5px solid #edb827;transition:transform .2s}.grammar-catalog-card:hover{transform:translateY(-3px)}.grammar-number{display:block;width:48px;border-radius:14px;text-align:center;background:#fff0b6;color:#70500a;font-weight:750;padding:8px;margin-bottom:16px}
.grammar-shell button,.grammar-button{font:650 1rem/1.4 system-ui;min-height:46px;border:1px solid #bad4e3;border-radius:12px;padding:12px 18px;background:#eaf5fc;color:#145c8a;cursor:pointer;display:inline-block;text-decoration:none}.grammar-shell .grammar-button{background:#086ba9;color:white;border-color:#086ba9}.grammar-shell button:disabled{opacity:.5;cursor:default}.grammar-shell :is(button,a,input,textarea,select,summary):focus-visible{outline:3px solid #d25135;outline-offset:3px}.grammar-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0}.grammar-message{background:#fff1c3;border-left:4px solid #c49312;padding:18px;border-radius:10px}.grammar-image{display:block;width:100%;max-height:380px;object-fit:contain;margin:18px auto;border-radius:14px;background:#f5f8fb}.grammar-shell audio{display:block;width:100%;margin:20px 0}.grammar-shell details{border:1px solid #cbdde5;background:#f4faff;border-radius:14px;padding:16px;margin:16px 0}.grammar-shell summary{cursor:pointer;font-weight:650}.grammar-copy{white-space:normal;font-size:1.15rem;line-height:1.85;overflow-wrap:anywhere}.grammar-italian{font:400 clamp(1.8rem,4vw,2.8rem)/1.35 Georgia,serif;overflow-wrap:anywhere}.grammar-counter{font-weight:700;color:#086ba9}.grammar-slide{background:white;border:1px solid #cbdde5;border-top:6px solid #edbd38;border-radius:24px;padding:32px;margin:20px 0;overflow-wrap:anywhere}.grammar-slide[data-card-type=example]{border-top-color:#1685bd}.grammar-slide[data-card-type=quiz]{border-top-color:#d25b41}.grammar-interactive .grammar-track{display:flex;align-items:flex-start;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:12px}.grammar-interactive .grammar-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0}.grammar-controls{justify-content:space-between}.grammar-controls progress{flex:1;min-width:30px;height:8px;accent-color:#086ba9}.grammar-quiz fieldset{border:0;padding:0;min-width:0}.grammar-quiz legend{font-size:1.3rem;font-weight:600;margin-bottom:20px}.grammar-quiz label{display:block;border:1px solid #cadfe8;border-radius:12px;padding:15px;margin:12px 0;background:#f7fbfe;cursor:pointer}.grammar-quiz input{accent-color:#086ba9}.grammar-feedback:not(:empty){background:#fff0d0;padding:18px;border-radius:12px}.grammar-feedback.is-correct{background:#e4f5f0}.grammar-shell [hidden]{display:none!important}
.grammar-admin{margin:0;background:#f0f7fb}.grammar-admin label{display:block;margin:16px 0}.grammar-admin :is(input:not([type=checkbox]),textarea,select){display:block;width:100%;font:inherit;border:1px solid #bed4e1;padding:12px;border-radius:10px;background:#fff;color:#203849;margin-top:6px}.grammar-admin textarea{resize:vertical}.grammar-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.grammar-edit-card{background:#f6faff;border:1px solid #cbdde5;border-left:5px solid #1685bd;border-radius:16px;padding:22px;margin:24px 0}.grammar-media-row{border-top:1px solid #cbdde5;padding:20px 0}.grammar-media-row .grammar-image{max-height:200px}.grammar-admin nav{display:flex;gap:10px;flex-wrap:wrap}.grammar-admin .grammar-panel a{overflow-wrap:anywhere}
@media(max-width:600px){.grammar-shell{padding:26px 16px 60px}.grammar-panel,.grammar-slide{padding:22px 18px}.grammar-fields{grid-template-columns:1fr}.grammar-edit-card{padding:18px 12px}.grammar-controls{gap:8px}.grammar-controls button{padding:12px}.grammar-copy{font-size:1.08rem}}
@media(prefers-reduced-motion:reduce){.grammar-catalog-card{transition:none}}