.of-library{max-width:850px;margin:0 auto;color:var(--ink)}
.of-library button{min-height:42px;padding:8px 14px;border-radius:8px;font:600 13px/1.5 Vazir,Tahoma,sans-serif}
.of-summary{display:flex;justify-content:space-between;align-items:center;background:#eaf2dc;border:1px solid #d3dfc4;padding:19px 22px;border-radius:16px;overflow:hidden}
.of-summary strong{display:block;font-size:clamp(22px,4vw,31px);line-height:1.65}
.of-summary small,.of-row-title small{display:block;color:var(--muted);font-size:12px}
.of-eyebrow{font-size:12px;font-weight:650;color:var(--green)}
.of-summary-art{border-radius:15px;background:#d6e6bd;color:#446342;width:63px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-7deg)}
.of-summary-art span{font:32px/1 Georgia,serif}
.of-summary-art i{width:27px;height:3px;background:#6d8b60;margin:2px;border-radius:1px}
.of-topline,.of-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}
.of-accent{display:inline-flex;padding:3px;background:#e8ece3;border-radius:10px}
.of-library .of-accent button{min-height:38px;font-size:12px}
.of-accent [aria-pressed=true]{background:#fff;color:var(--blue);box-shadow:0 1px 2px #64775e25}
.of-hint,.of-empty{color:var(--muted);font-size:13px;line-height:1.9}
.of-library .of-reconnect{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.of-list{padding:0;margin:15px 0 0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.of-row{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px}
.of-row+.of-row{border-top:1px solid var(--line)}
.of-row-title b{font-size:16px;font-weight:700}
.of-row-buttons{display:flex;align-items:center;gap:6px}
.of-library .of-secondary{background:#f6f8f1;color:#35553c;border:1px solid var(--line)}
.of-library .of-action{background:var(--blue);color:white;border:1px solid var(--blue)}
.of-library .of-remove{color:#774343;background:transparent}
.of-library .of-audio{background:var(--lime);color:#294128;border:0;margin:4px 0 10px 9px}
.of-percent{display:grid;gap:5px;font-size:12px;color:var(--blue)}
.of-percent progress{width:130px;height:8px;accent-color:var(--blue)}
.of-status{max-width:850px;margin:14px auto 32px;color:var(--muted);font-size:13px;min-height:1.8em}
.of-session{padding:clamp(17px,4vw,29px);background:#fff;border:1px solid var(--line);border-radius:16px}
.of-session h2{margin:9px 0;font-size:clamp(25px,4.5vw,33px)}
.of-word{font:normal clamp(39px,9vw,55px)/1.25 Georgia,serif;letter-spacing:-.03em;overflow-wrap:anywhere}
.of-spell{max-width:440px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:12px 0}
.of-spell label{grid-column:1/-1;font-size:13px;font-weight:650}
.of-spell input{min-width:0;height:44px;border-radius:8px;border:1px solid #aab8a8;padding:4px 10px;font:18px/1.5 Georgia,serif}
.of-feedback{background:#edf3e8;color:#284731;border-radius:9px;padding:9px 14px;margin:10px 0}
.of-foot{border-top:1px solid var(--line);padding-top:14px;margin-bottom:0}
html[data-offline-library] body{padding-bottom:18px}
@media(max-width:520px){.of-topline{align-items:stretch;flex-wrap:wrap}.of-row{padding:10px 9px;gap:6px}.of-row-buttons{gap:2px}.of-row-buttons button{padding-inline:9px}.of-spell{grid-template-columns:1fr}.of-library .of-reconnect{padding:0}.of-summary{padding:15px}.of-session .of-foot button{padding-inline:8px}}
.of-course,.of-course-label{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;color:var(--green);margin-bottom:10px}.of-course select{max-width:100%;border:1px solid var(--line);border-radius:8px;min-height:40px;font:inherit;background:#fff;color:var(--ink);padding-inline:8px}
.of-topline{flex-wrap:wrap;justify-content:flex-start}.of-topline>.of-secondary{margin-inline-start:auto}

.of-full{margin-bottom:20px;border:1px solid var(--line);border-radius:14px;padding:17px 20px;background:var(--white);color:var(--ink)}
.of-full h2{margin:0;font-size:20px}.of-full p{font-size:13px;color:var(--muted);line-height:1.8}.of-file{display:inline-block;padding:8px;color:var(--green);cursor:pointer}.of-file input{width:125px;max-width:100%;font-size:12px}
.of-full progress{display:block;width:100%;margin-top:10px;accent-color:var(--green)}.of-offline-nav{display:flex;gap:18px;padding-block:12px;color:var(--green)}.of-offline-nav a{padding:7px;text-decoration:underline}
.dl-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}.dl-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--white);min-width:0;color:var(--ink)}.dl-all{grid-column:1/-1;background:var(--paper,var(--white));border-inline-start:4px solid var(--blue)}.dl-heading{display:flex;gap:10px;align-items:flex-start}.dl-heading h3{font-size:1rem;margin:0}.dl-heading p{margin:3px 0}.dl-symbol{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:9px;background:#e7eedb;color:#365434;font-size:20px}.dl-volume{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-top:9px;color:var(--muted)}.dl-card progress{height:8px;display:block;width:100%;margin:5px 0 13px;direction:ltr}.dl-card .of-action{font-size:13px;min-height:42px}.dl-card button:disabled{opacity:.75}.dl-import summary{cursor:pointer;font-size:13px}.of-connect a{text-decoration:underline;font-weight:750}.of-offline-nav{gap:6px;flex-wrap:wrap}.of-offline-nav [hidden]{display:none}.of-offline-nav[hidden]{display:none}