.template-banner{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:16px}.template-banner>span{flex:1;min-width:0}.template-banner small,.template-choice small{display:block;font-size:.875rem;color:var(--muted);line-height:1.5;margin-top:4px}.template-banner .btn{flex-shrink:0;font-size:.875rem}.template-browse{margin-bottom:12px}.template-list{display:grid;gap:12px;margin:16px 0}.template-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;width:100%;padding:16px;min-height:44px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:inherit}.template-choice b{font-size:1rem}.template-intro{margin:0 0 16px;line-height:1.5}.template-guidance{margin:16px 0;line-height:1.5}.template-preview{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}.template-preview>li{border:1px solid var(--line);border-radius:16px;padding:12px}.template-step{display:flex;align-items:center;gap:8px}.template-step b{flex:1;min-width:0}.template-preview summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--lapis);font-size:.875rem}.template-reading{max-height:40dvh;overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--line);border-radius:12px}.template-reading .arabic{font-size:1.5rem}.offline-banner{position:relative;max-width:568px;margin:12px auto 0;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:.875rem;line-height:1.5}.offline-banner[hidden]{display:none}.offline-banner button{margin-inline-start:8px}.offline-summary{padding:16px}.offline-summary p{margin:8px 0;line-height:1.5}.offline-summary .btn{margin-top:8px}.offline-summary .offline-state{font-weight:600}.offline-open-note{font-size:.875rem;color:var(--muted)}@media(max-width:600px){.offline-banner{margin-inline:16px}.template-banner{flex-wrap:wrap}.template-banner .btn{width:100%}}@media(prefers-reduced-motion:reduce){.offline-banner{transition:none}}

.template-banner{margin-inline:16px}

.template-choice svg{width:24px;height:24px;flex:none}.template-preview a.link{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}.template-reading .feature-ar{font-size:var(--ar-size);line-height:1.9}.template-banner>span{flex-basis:200px}