/* AcadMates v1.4.20 / Build 446 — isolated Help & Tutorials UI. */
.route-help { max-width: 1500px; }
.route-help .page-heading { margin-bottom: 18px; }
.help-hero { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:24px; align-items:center; padding:28px; margin-bottom:26px; overflow:hidden; position:relative; }
.help-hero::after { content:"?"; position:absolute; right:210px; top:-38px; font-size:180px; font-weight:900; line-height:1; color:rgba(81,106,145,.055); pointer-events:none; }
.help-hero-copy { position:relative; z-index:1; }
.help-hero-copy h2 { margin:6px 0 4px; font-size:clamp(24px,3vw,38px); letter-spacing:-.035em; }
.help-hero-copy > p { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.6; }
.help-search-box { display:flex; align-items:center; gap:10px; max-width:820px; min-height:54px; padding:0 16px; border:1px solid #cbd9e0; border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
.help-search-box:focus-within { border-color:#516A91; box-shadow:0 0 0 3px rgba(81,106,145,.12); }
.help-search-box svg { width:20px; height:20px; fill:var(--muted); flex:0 0 auto; }
.help-search-box input { width:100%; border:0!important; outline:0!important; box-shadow:none!important; padding:0!important; background:transparent!important; font-size:14px; min-height:48px; }
.help-quick-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.help-hero-stat { position:relative; z-index:1; display:grid; place-items:center; text-align:center; min-height:156px; padding:20px; border:1px solid rgba(81,106,145,.16); border-radius:20px; background:linear-gradient(145deg,#F5F8FA,#E4F2F5); }
.help-hero-stat strong { font-size:46px; line-height:1; color:var(--navy-900); letter-spacing:-.05em; }
.help-hero-stat span { margin-top:5px; font-size:13px; font-weight:850; }
.help-hero-stat small { margin-top:3px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.help-section { margin-top:28px; }
.help-section-row { align-items:flex-end; }
.help-result-count { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:var(--blue-50); color:var(--navy-900); font-size:11px; font-weight:850; }
.help-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.help-category-button { appearance:none; border:1px solid var(--line); border-radius:15px; background:var(--surface); padding:15px; min-height:112px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; column-gap:10px; row-gap:5px; text-align:left; color:var(--navy-900); box-shadow:var(--shadow-sm); transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.help-category-button:hover { transform:translateY(-1px); border-color:#8FD6D3; }
.help-category-button.active { border-color:#516A91; background:linear-gradient(145deg,#fff,#EEF3FA); box-shadow:0 0 0 2px rgba(81,106,145,.09); }
.help-category-icon { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#E4F2F5; color:#2F817B; }
.help-category-icon svg { width:17px; height:17px; fill:currentColor; }
.help-category-button strong { font-size:12px; line-height:1.3; }
.help-category-button > span:last-child { color:var(--muted); font-size:10.5px; line-height:1.45; }
.help-faq-list { display:grid; gap:10px; }
.help-faq-item { border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.help-faq-item > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:16px 18px; }
.help-faq-item > summary::-webkit-details-marker { display:none; }
.help-faq-item > summary span:first-child { display:grid; gap:4px; min-width:0; }
.help-faq-item > summary small { color:#2F817B; font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; }
.help-faq-item > summary strong { font-size:13.5px; line-height:1.4; color:var(--navy-900); }
.help-faq-chevron { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--blue-50); color:#516A91; font-size:20px; font-weight:500; transition:transform .18s ease; }
.help-faq-item[open] .help-faq-chevron { transform:rotate(45deg); }
.help-faq-answer { padding:0 18px 18px; border-top:1px solid rgba(217,228,232,.7); }
.help-faq-answer p { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.help-faq-actions { display:flex; gap:8px; margin-top:13px; }
.help-empty { padding:32px; border:1px dashed var(--line); border-radius:16px; background:var(--blue-50); text-align:center; }
.help-empty strong { display:block; font-size:15px; }
.help-empty p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.help-video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.help-video-card { display:grid; grid-template-rows:auto 1fr auto; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.help-video-thumb { min-height:122px; display:grid; place-items:center; align-content:center; gap:9px; background:linear-gradient(145deg,#151F3B,#516A91); color:#fff; }
.help-video-thumb > span:last-child { font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; opacity:.82; }
.help-video-play,.help-video-modal-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#fff; color:#151F3B; box-shadow:0 8px 25px rgba(0,0,0,.22); }
.help-video-play svg,.help-video-modal-icon svg { width:23px; height:23px; fill:currentColor; margin-left:2px; }
.help-video-copy { padding:15px 15px 8px; }
.help-video-copy small { color:#2F817B; font-size:9px; text-transform:uppercase; letter-spacing:.07em; font-weight:900; }
.help-video-copy h3 { margin:5px 0 6px; font-size:15px; }
.help-video-copy p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.help-video-actions { display:flex; flex-wrap:wrap; gap:7px; padding:10px 15px 15px; }
.help-video-note { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:12px 14px; border:1px solid #D9E4E8; border-radius:13px; background:#F5F8FA; color:var(--muted); font-size:11px; line-height:1.5; }
.help-video-note svg { flex:0 0 auto; width:17px; height:17px; fill:#2F817B; }
.help-video-player video { display:block; width:100%; max-height:68vh; border-radius:12px; background:#111; }
.help-video-player p { margin:12px 0 0; color:var(--muted); line-height:1.55; }
.help-video-unavailable { display:grid; place-items:center; text-align:center; gap:10px; padding:8px 4px; }
.help-video-unavailable h3 { margin:4px 0 0; }
.help-video-unavailable p { max-width:520px; margin:0; color:var(--muted); line-height:1.6; }
.help-video-unavailable .form-actions { width:100%; justify-content:center; }
@media(max-width:1120px){ .help-category-grid,.help-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .help-hero{grid-template-columns:minmax(0,1fr) 150px;} }
@media(max-width:720px){ .help-hero{grid-template-columns:1fr;padding:20px;} .help-hero-stat{min-height:110px;} .help-category-grid,.help-video-grid{grid-template-columns:1fr;} .help-section-row{align-items:flex-start;} .help-result-count{margin-top:8px;} }
:root[data-theme="dark"] #app-shell .route-help .help-hero,
:root[data-theme="dark"] #app-shell .route-help .help-category-button,
:root[data-theme="dark"] #app-shell .route-help .help-faq-item,
:root[data-theme="dark"] #app-shell .route-help .help-video-card { background:#162235!important; border-color:#33445C!important; color:#F5F8FA!important; }
:root[data-theme="dark"] #app-shell .route-help .help-search-box { background:#111B2C!important; border-color:#435571!important; }
:root[data-theme="dark"] #app-shell .route-help .help-search-box input { color:#F5F8FA!important; }
:root[data-theme="dark"] #app-shell .route-help .help-category-button.active { background:#1C3048!important; border-color:#8FD6D3!important; }
:root[data-theme="dark"] #app-shell .route-help .help-category-icon,
:root[data-theme="dark"] #app-shell .route-help .help-faq-chevron,
:root[data-theme="dark"] #app-shell .route-help .help-result-count { background:#22364F!important; color:#AEE3E0!important; }
:root[data-theme="dark"] #app-shell .route-help :is(.help-category-button strong,.help-faq-item summary strong,.help-hero-stat strong,.help-video-copy h3) { color:#F5F8FA!important; }
:root[data-theme="dark"] #app-shell .route-help :is(.help-hero-copy>p,.help-category-button>span:last-child,.help-faq-answer p,.help-video-copy p,.help-video-note,.help-empty p) { color:#B8C4D3!important; }
:root[data-theme="dark"] #app-shell .route-help .help-hero-stat { background:linear-gradient(145deg,#18263A,#20364D)!important; border-color:#33445C!important; }
:root[data-theme="dark"] #app-shell .route-help .help-faq-answer { border-top-color:#33445C!important; }
:root[data-theme="dark"] #app-shell .route-help :is(.help-video-note,.help-empty) { background:#111B2C!important; border-color:#33445C!important; }