*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:ui-sans-serif,system-ui,"Noto Sans Thai",sans-serif}
body{background:#f4fafc;color:#102a43}
.feed{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.short{height:100dvh;scroll-snap-align:start;position:relative;overflow:hidden;background:#111827}
.short-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(56,189,248,.18),transparent 38%),linear-gradient(160deg,#1f2937,#111827 62%,#090b10);background-size:cover;background-position:center}
.short-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.05) 28%,rgba(2,6,23,.3) 53%,rgba(2,6,23,.95) 100%)}
.feed-player{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}
.feed-play-toggle{position:absolute;z-index:9;left:50%;top:50%;display:grid;width:72px;height:72px;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(15,23,42,.42);color:#fff;font-size:30px;line-height:1;opacity:.62;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.28);transition:opacity .2s ease,background-color .2s ease,transform .2s ease}
.feed-play-toggle span{margin-left:3px}
.feed-play-toggle.is-playing{background:rgba(15,23,42,.3);opacity:.2}
.feed-play-toggle.is-playing span{margin-left:0}
.feed-play-toggle:focus-visible{outline:3px solid #38bdf8;outline-offset:4px;opacity:1}
.feed-play-toggle:active{transform:translate(-50%,-50%) scale(.94)}
.search-page{min-height:100dvh;padding-bottom:80px;background:#090b10;color:#f8fafc}
.search-header{position:sticky;z-index:30;top:0;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;background:rgba(9,11,16,.95);border-bottom:1px solid #303846;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.search-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.search-title>button{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;color:#e2e8f0;font-size:30px}
.search-title h1{margin:0;font-size:20px;line-height:1.2}
.search-title p{margin:3px 0 0;color:#94a3b8;font-size:12px}
.search-input-wrap{display:grid;grid-template-columns:24px minmax(0,1fr) 36px;align-items:center;gap:8px;min-height:48px;padding:0 8px 0 14px;border:1px solid #3b4656;border-radius:8px;background:#171d27;color:#94a3b8}
.search-input-wrap:focus-within{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.14)}
.search-input-wrap>span{font-size:22px}
.search-input-wrap input{min-width:0;border:0;outline:0;background:transparent;color:#f8fafc;font-size:16px}
.search-input-wrap input::placeholder{color:#718096}
.search-input-wrap button{display:grid;width:36px;height:36px;place-items:center;border-radius:6px;color:#cbd5e1;font-size:22px}
.search-input-wrap button[hidden]{visibility:hidden}
.search-results{display:grid;gap:10px;padding:14px 14px 24px}
.search-result{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;width:100%;min-height:88px;padding:8px;border:1px solid #2d3745;border-radius:8px;background:#111720;color:#f8fafc;text-align:left}
.search-result:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}
.search-result:active{background:#182130}
.search-thumb{position:relative;display:block;align-self:start;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:linear-gradient(145deg,#0ea5e9,#1f2937);background-size:cover;background-position:center}
.search-thumb>span{position:absolute;left:50%;top:50%;display:grid;width:34px;height:34px;place-items:center;transform:translate(-50%,-50%);border-radius:999px;background:rgba(9,11,16,.7);color:#fff;font-size:14px;padding-left:2px}
.search-result-copy{display:block;min-width:0;padding:2px 2px 2px 0}
.search-result-copy b,.search-result-copy small,.search-result-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-copy b{font-size:15px;line-height:1.35}
.search-result-copy small{margin-top:3px;color:#7dd3fc;font-size:11px}
.search-result-copy>span{margin-top:5px;color:#94a3b8;font-size:11px}
.search-result-copy .search-tags{color:#a5b4fc}
.search-state{display:grid;min-height:42dvh;place-items:center;align-content:center;gap:8px;padding:32px;text-align:center;color:#94a3b8}
.search-state>span{font-size:34px}
.search-state b{color:#e2e8f0}
.search-state small{max-width:260px;line-height:1.5}
.search-spinner{width:32px;height:32px;border:3px solid #334155;border-top-color:#38bdf8;border-radius:999px;animation:spin 1s linear infinite}
.lesson-page{min-height:100dvh;padding-bottom:82px;background:#090b10;color:#f8fafc}
.lesson-screen-header{position:sticky;z-index:25;top:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:calc(18px + env(safe-area-inset-top)) 16px 16px;border-bottom:1px solid #303846;background:rgba(9,11,16,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lesson-screen-header h1,.lesson-detail-hero h1,.lesson-create-form h1,.lesson-section-title h2{margin:0;letter-spacing:0}
.lesson-screen-header h1{font-size:24px;line-height:1.2}.lesson-screen-header p,.lesson-section-title p{margin:4px 0 0;color:#94a3b8;font-size:12px}
.lesson-primary-button{min-height:42px;padding:0 13px;border:1px solid #38bdf8;border-radius:8px;background:#38bdf8;color:#07111c;font-size:13px;font-weight:800;white-space:nowrap}
.lesson-list{display:grid;gap:10px;padding:14px}
.lesson-card{display:grid;grid-template-columns:104px minmax(0,1fr) 42px;align-items:center;gap:12px;width:100%;min-height:84px;padding:8px;border:1px solid #2d3745;border-radius:8px;background:#111720;color:#f8fafc;text-align:left}
.lesson-card:focus-visible,.lesson-media-item:focus-visible,.lesson-library-item:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}
.lesson-cover,.lesson-detail-cover{position:relative;display:grid;aspect-ratio:16/9;place-items:center;overflow:hidden;border-radius:6px;background:linear-gradient(145deg,#0ea5e9,#273244);background-position:center;background-size:cover;color:rgba(255,255,255,.9);font-size:24px}
.lesson-cover:after,.lesson-detail-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(2,6,23,.3))}.lesson-cover>span,.lesson-detail-cover>span{position:relative;z-index:1}
.lesson-card-copy{min-width:0}.lesson-card-copy>b,.lesson-card-copy>small,.lesson-card-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-card-copy>b{font-size:15px}.lesson-card-copy>small{margin-top:3px;color:#7dd3fc;font-size:11px}.lesson-card-copy>span{margin-top:5px;color:#94a3b8;font-size:11px}
.lesson-count{display:grid;justify-items:center;color:#94a3b8}.lesson-count b{color:#f8fafc;font-size:18px}.lesson-count small{font-size:10px}
.lesson-empty{display:grid;min-height:44dvh;place-items:center;align-content:center;gap:8px;padding:32px;text-align:center;color:#94a3b8}.lesson-empty>span{font-size:36px}.lesson-empty>b{color:#e2e8f0}.lesson-empty>small{max-width:280px;line-height:1.5}.lesson-empty.compact{min-height:130px;padding:24px;border:1px dashed #334155;border-radius:8px}
.lesson-detail-header{position:sticky;z-index:25;top:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:62px;padding-top:env(safe-area-inset-top);border-bottom:1px solid #303846;background:rgba(9,11,16,.96);text-align:center}.lesson-detail-header button{display:grid;width:44px;height:44px;place-items:center;font-size:30px}.lesson-detail-header span{font-size:15px;font-weight:800}
.lesson-detail-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:18px 16px;border-bottom:1px solid #242c38}.lesson-detail-hero>div:last-child{min-width:0}.lesson-detail-hero p{margin:0;color:#7dd3fc;font-size:11px}.lesson-detail-hero h1{margin-top:5px;font-size:20px;line-height:1.3}.lesson-detail-hero div>span{display:block;margin-top:6px;color:#cbd5e1;font-size:12px;line-height:1.45}.lesson-detail-hero small{display:block;margin-top:8px;color:#94a3b8}
.lesson-detail-section,.lesson-create-form{padding:18px 14px 28px}.lesson-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.lesson-section-title h2{font-size:18px}.lesson-section-title button{min-height:40px;padding:0 12px;border:1px solid #475569;border-radius:8px;color:#7dd3fc;font-size:13px;font-weight:700}
.lesson-media-list,.lesson-library-list{display:grid;gap:8px;margin-top:12px}.lesson-media-item{display:grid;grid-template-columns:28px 92px minmax(0,1fr) 20px;align-items:center;gap:9px;min-height:70px;padding:8px;border:1px solid #293342;border-radius:8px;background:#111720;color:#f8fafc;text-align:left}.lesson-order{display:grid;width:26px;height:26px;place-items:center;border-radius:999px;background:#38bdf8;color:#07111c;font-size:12px}.lesson-media-thumb,.lesson-library-thumb{position:relative;display:grid;aspect-ratio:16/9;place-items:center;border-radius:6px;background:linear-gradient(145deg,#0ea5e9,#273244);background-position:center;background-size:cover}.lesson-media-thumb span{display:grid;width:28px;height:28px;place-items:center;border-radius:999px;background:rgba(2,6,23,.7);font-size:11px;padding-left:2px}.lesson-media-copy{min-width:0}.lesson-media-copy b,.lesson-media-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-media-copy b{font-size:14px}.lesson-media-copy small{margin-top:4px;color:#94a3b8;font-size:11px}.lesson-chevron{color:#64748b;font-size:24px}
.lesson-library-inline{margin:14px 0 18px;padding:12px;border:1px solid #334155;border-radius:8px;background:#0e131c}.lesson-library-inline h3{margin:0 0 10px;font-size:14px}.lesson-library-inline>div{display:grid;gap:8px;max-height:42dvh;overflow-y:auto}.lesson-library-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:7px;border:1px solid #2d3745;border-radius:8px;background:#171d27;color:#f8fafc;text-align:left}.lesson-library-item>span:nth-child(2){min-width:0}.lesson-library-item b,.lesson-library-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-library-item b{font-size:13px}.lesson-library-item small{margin-top:3px;color:#94a3b8;font-size:10px}.lesson-library-item strong{color:#7dd3fc;font-size:11px}.lesson-library-item.is-added{opacity:.55}.lesson-library-item.is-added strong{color:#94a3b8}.lesson-missing-note{margin:12px 2px;color:#fbbf24;font-size:11px}
.lesson-create-page{padding-bottom:0}.lesson-create-form{display:grid;gap:22px;padding-bottom:94px}.lesson-create-form>section{padding-bottom:20px;border-bottom:1px solid #242c38}.lesson-create-form h1{font-size:20px}.lesson-form-fields{display:grid;gap:14px;margin-top:16px}.lesson-form-fields label{display:grid;gap:6px;color:#cbd5e1;font-size:12px;font-weight:700}.lesson-form-fields input,.lesson-form-fields textarea,.lesson-builder-search{width:100%;border:1px solid #3b4656;border-radius:8px;background:#171d27;color:#f8fafc}.lesson-form-fields input{min-height:46px;padding:0 12px}.lesson-form-fields textarea{min-height:88px;padding:12px;resize:vertical}.lesson-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lesson-selected-list{display:grid;gap:8px;margin-top:12px}.lesson-selected-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:50px;padding:8px;border:1px solid #334155;border-radius:8px;background:#111720}.lesson-selected-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.lesson-builder-actions{display:flex;gap:4px}.lesson-builder-actions button{display:grid;width:34px;height:34px;place-items:center;border-radius:6px;background:#242d3a;color:#e2e8f0}.lesson-builder-actions button:disabled{opacity:.3}.lesson-builder-actions .remove{color:#fca5a5}
.lesson-builder-search{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-height:46px;margin-top:12px;padding:0 12px;color:#94a3b8}.lesson-builder-search input{min-width:0;border:0;outline:0;background:transparent;color:#f8fafc;font-size:14px}.lesson-create-actions{position:fixed;z-index:30;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 1.6fr;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #303846;background:rgba(9,11,16,.97)}.lesson-create-actions button{min-height:48px;border:1px solid #475569;border-radius:8px;font-weight:800}.lesson-create-actions .primary{border-color:#38bdf8;background:#38bdf8;color:#07111c}
@keyframes spin{to{transform:rotate(360deg)}}
.video-frame{position:absolute;inset:12% 7% 22%;border-radius:28px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.play{width:76px;height:76px;border-radius:999px;background:rgba(255,255,255,.94);color:#312e81;display:grid;place-items:center;font-size:30px;padding-left:4px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.content{position:absolute;z-index:2;inset:auto 20px calc(22px + env(safe-area-inset-bottom));padding-right:64px}
.actions{position:absolute;z-index:3;right:16px;bottom:clamp(80px,16vh,135px);display:grid;gap:18px}
.action{display:grid;justify-items:center;gap:4px;color:white;font-size:11px}
.action button{width:48px;height:48px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);font-size:21px}
.topbar{position:fixed;z-index:20;inset:0 0 auto;height:74px;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));background:linear-gradient(180deg,rgba(2,6,23,.62),transparent);pointer-events:none}
.topbar>*{pointer-events:auto}
.tab{color:rgba(255,255,255,.68);font-size:14px}
.tab.active{color:white;font-weight:800;border-bottom:2px solid #38bdf8;padding-bottom:5px}
.nav{position:fixed;z-index:20;inset:auto 0 0;height:66px;padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-around;background:rgba(2,6,23,.86);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08)}
.nav button{font-size:10px;color:#cbd5e1;display:grid;justify-items:center;gap:2px}
.nav span{font-size:20px}
.bottom-nav{background:rgba(17,21,29,.96);border-color:#303846;color:#aeb8c7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -8px 24px rgba(0,0,0,.28)}
.bottom-nav button{color:inherit;min-width:48px;min-height:48px}
.bottom-nav .nav-item{display:grid;grid-template-rows:28px 14px;align-content:center;justify-items:center;gap:2px;flex:1;min-width:0;min-height:56px;font-size:10px;line-height:1.1;text-align:center}
.bottom-nav .nav-icon{display:grid;width:30px;height:28px;place-items:center;font-family:"Segoe UI Symbol","Noto Sans Symbols",sans-serif;font-size:26px;line-height:1}
.bottom-nav .nav-add{flex:0 0 52px;align-self:center;font-size:28px;line-height:1}
.bottom-nav button.is-active{color:#f8fafc}
.bottom-nav button.is-active .nav-icon{color:#38bdf8}
.install{position:fixed;z-index:30;right:16px;top:84px;background:#fff;color:#111827;border-radius:14px;padding:10px 13px;font-size:12px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.22)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{outline-color:#38bdf8}

/* Infographic-inspired app theme overrides for Tailwind utility classes used in app.js. */
.bg-slate-950{background-color:#090b10!important}
.bg-slate-900{background-color:#111827!important}
.bg-slate-800{background-color:#1f2937!important}
.bg-slate-700{background-color:#374151!important}
.bg-slate-100{background-color:#eef2ff!important}
.bg-cyan-400{background-color:#38bdf8!important}
.bg-cyan-300{background-color:#7dd3fc!important}
.bg-blue-700{background-color:#4f46e5!important}
.bg-sky-500{background-color:#0ea5e9!important}
.from-cyan-400{--tw-gradient-from:#38bdf8 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(56 189 248 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-cyan-300{--tw-gradient-from:#7dd3fc var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(125 211 252 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(14 165 233 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)!important}
.to-blue-700{--tw-gradient-to:#4f46e5 var(--tw-gradient-to-position)!important}
.to-slate-800{--tw-gradient-to:#111827 var(--tw-gradient-to-position)!important}
.text-cyan-300{color:#7dd3fc!important}
.text-slate-950{color:#0f172a!important}
.text-slate-900{color:#111827!important}
.text-slate-600{color:#475569!important}
.text-slate-500{color:#64748b!important}
.text-slate-400{color:#94a3b8!important}
.text-slate-300{color:#cbd5e1!important}
.border-cyan-500\/40{border-color:rgb(14 165 233 / .42)!important}
.border-slate-200{border-color:#e2e8f0!important}
.border-slate-700{border-color:#334155!important}
.border-red-800{border-color:#991b1b!important}
.border-t-cyan-500{border-top-color:#38bdf8!important}
.border-t-cyan-300{border-top-color:#7dd3fc!important}
.shadow-blue-200{--tw-shadow-color:#bfdbfe!important;--tw-shadow:var(--tw-shadow-colored)!important}
.bg-gradient-to-t.from-slate-950{--tw-gradient-from:#090b10 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(9 11 16 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.bg-gradient-to-b.from-slate-950\/95{--tw-gradient-from:rgb(9 11 16 / .95) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(9 11 16 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-slate-950\/20{--tw-gradient-to:rgb(9 11 16 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),rgb(9 11 16 / .2) var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-slate-950\/60{--tw-gradient-to:rgb(9 11 16 / .6) var(--tw-gradient-to-position)!important}
@media (hover:hover){.short:hover .feed-play-toggle{opacity:.82}.short:hover .feed-play-toggle.is-playing{opacity:.38}}
@media (prefers-reduced-motion:reduce){.feed-play-toggle{transition:none}}
@media (max-width:380px){.search-result{grid-template-columns:96px minmax(0,1fr);gap:10px}}
@media (max-width:380px){.lesson-card{grid-template-columns:88px minmax(0,1fr) 36px}.lesson-detail-hero{grid-template-columns:112px minmax(0,1fr)}.lesson-media-item{grid-template-columns:26px 78px minmax(0,1fr) 16px}.lesson-library-item{grid-template-columns:66px minmax(0,1fr) auto}.lesson-form-grid{grid-template-columns:1fr}}
@media (min-width:760px){
  #app>main{max-width:480px;margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  nav.fixed{left:50%;right:auto;width:min(480px,100%);transform:translateX(-50%)}
  header.fixed{left:50%;right:auto;width:min(480px,100%);transform:translateX(-50%)}
  .lesson-create-actions{left:50%;right:auto;width:min(480px,100%);transform:translateX(-50%)}
}

/* Clean learning palette: light blue, navy, teal, growth green, and restrained orange. */
:root{--mh-bg:#f4fafc;--mh-surface:#ffffff;--mh-soft:#e7f5f7;--mh-navy:#0b2545;--mh-primary:#123b68;--mh-teal:#168c8c;--mh-teal-soft:#dff4f4;--mh-green:#2f9e66;--mh-orange:#f59a3d;--mh-text:#102a43;--mh-muted:#5e7485;--mh-border:#cfe1e8;--mh-focus:#e8791f}
body{background:var(--mh-bg);color:var(--mh-text)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--mh-focus)!important;outline-offset:2px}
input,select,textarea{outline-color:var(--mh-focus)}

.search-page,.lesson-page{background:var(--mh-bg);color:var(--mh-text)}
.search-header,.lesson-screen-header,.lesson-detail-header{border-color:var(--mh-border);background:rgba(255,255,255,.96);color:var(--mh-navy);box-shadow:0 4px 18px rgba(18,59,104,.06)}
.search-title>button,.search-input-wrap button,.lesson-detail-header button{color:var(--mh-primary)}
.search-title p,.lesson-screen-header p,.lesson-section-title p{color:var(--mh-muted)}
.search-input-wrap,.lesson-builder-search,.lesson-form-fields input,.lesson-form-fields textarea{border-color:#b9d3dd;background:var(--mh-surface);color:var(--mh-text)}
.search-input-wrap:focus-within,.lesson-builder-search:focus-within{border-color:var(--mh-teal);box-shadow:0 0 0 3px rgba(22,140,140,.14)}
.search-input-wrap input,.lesson-builder-search input{color:var(--mh-text)}
.search-input-wrap input::placeholder,.lesson-builder-search input::placeholder,.lesson-form-fields input::placeholder,.lesson-form-fields textarea::placeholder{color:#78909e}
.search-result,.lesson-card,.lesson-media-item,.lesson-library-item,.lesson-selected-item{border-color:var(--mh-border);background:var(--mh-surface);color:var(--mh-text);box-shadow:0 3px 12px rgba(18,59,104,.05)}
.search-result:active,.lesson-card:active,.lesson-media-item:active{background:var(--mh-soft)}
.search-result:focus-visible,.lesson-card:focus-visible,.lesson-media-item:focus-visible,.lesson-library-item:focus-visible{outline-color:var(--mh-focus)}
.search-result-copy small,.lesson-card-copy small,.lesson-detail-hero p{color:var(--mh-teal)}
.search-result-copy>span,.search-state,.lesson-card-copy>span,.lesson-count,.lesson-empty,.lesson-media-copy small,.lesson-library-item small{color:var(--mh-muted)}
.search-result-copy .search-tags{color:var(--mh-primary)}
.search-state b,.lesson-empty>b,.lesson-count b{color:var(--mh-navy)}
.search-spinner{border-color:#c8dfe6;border-top-color:var(--mh-teal)}
.search-thumb,.lesson-cover,.lesson-detail-cover,.lesson-media-thumb,.lesson-library-thumb{background:linear-gradient(145deg,var(--mh-teal),var(--mh-primary))}
.search-thumb>span,.lesson-media-thumb span{background:rgba(11,37,69,.82)}

.lesson-primary-button,.lesson-create-actions .primary{border-color:var(--mh-orange);background:var(--mh-orange);color:var(--mh-navy);box-shadow:0 4px 12px rgba(245,154,61,.2)}
.lesson-detail-hero,.lesson-create-form>section{border-color:var(--mh-border)}
.lesson-detail-hero div>span,.lesson-form-fields label{color:#425d70}
.lesson-detail-hero small{color:var(--mh-muted)}
.lesson-section-title button{border-color:#8fc8c8;background:var(--mh-teal-soft);color:#0e676b}
.lesson-order{background:var(--mh-teal);color:#fff}
.lesson-chevron{color:#7591a0}
.lesson-library-inline{border-color:var(--mh-border);background:#edf8f9}
.lesson-library-item strong{color:#0e7477}.lesson-library-item.is-added{border-color:#b8dfca;background:#eef9f2;opacity:1}.lesson-library-item.is-added strong{color:var(--mh-green)}
.lesson-empty.compact{border-color:#a8cbd5;background:rgba(255,255,255,.54)}
.lesson-missing-note{color:#a65312}
.lesson-builder-actions button{background:var(--mh-soft);color:var(--mh-primary)}
.lesson-builder-actions .remove{background:#fff1f0;color:#b42318}
.lesson-create-actions{border-color:var(--mh-border);background:rgba(255,255,255,.98);box-shadow:0 -6px 20px rgba(18,59,104,.08)}
.lesson-create-actions button{border-color:#9eb9c6;background:var(--mh-surface);color:var(--mh-primary)}

.bottom-nav{border-color:var(--mh-border);background:rgba(255,255,255,.97);color:var(--mh-muted);box-shadow:0 -8px 24px rgba(18,59,104,.1)}
.bottom-nav button.is-active{color:var(--mh-navy)}
.bottom-nav button.is-active .nav-icon{color:var(--mh-teal)}
.bottom-nav .nav-add{background:var(--mh-orange)!important;color:var(--mh-navy)!important;box-shadow:0 4px 12px rgba(245,154,61,.28)}

.feed-play-toggle{border-color:rgba(255,255,255,.72);background:rgba(11,37,69,.58);color:#fff;box-shadow:0 12px 32px rgba(11,37,69,.3)}
.feed-play-toggle.is-playing{background:rgba(22,140,140,.48)}
.feed-play-toggle:focus-visible{outline-color:var(--mh-orange)!important}
.short .absolute.bottom-28.right-4 button{color:#fff;text-shadow:0 1px 3px rgba(11,37,69,.8)}
.short .absolute.bottom-28.right-4 button:last-child>span{border-color:rgba(255,255,255,.72)!important;background:var(--mh-orange)!important;color:var(--mh-navy)!important;text-shadow:none;box-shadow:0 4px 16px rgba(0,0,0,.24)}
.short .text-cyan-300{color:#6ee7df!important}
.short-bg{background:linear-gradient(160deg,var(--mh-teal),var(--mh-primary) 62%,var(--mh-navy))}
.topbar{background:linear-gradient(180deg,rgba(11,37,69,.72),transparent)}

#toast{background:var(--mh-green)!important}

.install{background:var(--mh-orange);color:var(--mh-navy)}
.bg-slate-950{background-color:var(--mh-navy)!important}
.bg-slate-900{background-color:var(--mh-surface)!important}
.bg-slate-800{background-color:var(--mh-soft)!important}
.bg-slate-700{background-color:#cfe7eb!important}
.bg-slate-100{background-color:#eaf5f7!important}
.bg-cyan-400{background-color:var(--mh-orange)!important}
.bg-cyan-300{background-color:#56c7c5!important}
.bg-blue-700{background-color:var(--mh-primary)!important}
.bg-sky-500{background-color:var(--mh-teal)!important}
.text-cyan-300{color:#0e7477!important}
.text-slate-950,.text-slate-900{color:var(--mh-navy)!important}
.text-slate-600,.text-slate-500{color:#526f80!important}
.text-slate-400,.text-slate-300{color:var(--mh-muted)!important}
.border-slate-700,.border-slate-200{border-color:var(--mh-border)!important}
.border-cyan-500\/40{border-color:rgba(22,140,140,.45)!important}
.border-t-cyan-500,.border-t-cyan-300{border-top-color:var(--mh-teal)!important}
.from-cyan-400,.from-cyan-300,.from-sky-500{--tw-gradient-from:var(--mh-teal) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(22 140 140 / 0) var(--tw-gradient-to-position)!important}
.to-blue-600,.to-blue-700{--tw-gradient-to:var(--mh-primary) var(--tw-gradient-to-position)!important}
@media (min-width:760px){#app>main{box-shadow:0 0 0 1px var(--mh-border),0 12px 40px rgba(18,59,104,.08)}}
.app-progress{position:fixed;z-index:100;top:calc(12px + env(safe-area-inset-top));left:50%;display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);min-height:48px;padding:8px 16px;transform:translateX(-50%);border:1px solid var(--mh-border);border-radius:8px;background:rgba(255,255,255,.98);color:var(--mh-navy);box-shadow:0 8px 24px rgba(18,59,104,.18)}
.app-progress .search-spinner{width:24px;height:24px;flex:0 0 24px}.app-progress b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.utility-page{min-height:100dvh;padding-bottom:82px;background:var(--mh-bg);color:var(--mh-text)}
.utility-header{position:sticky;z-index:25;top:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:68px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--mh-border);background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(18,59,104,.06);text-align:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.utility-header>button{display:grid;width:44px;height:44px;place-items:center;color:var(--mh-primary);font-size:30px}.utility-header h1{margin:0;color:var(--mh-navy);font-size:18px;letter-spacing:0}.utility-header p{margin:3px 0 0;overflow:hidden;color:var(--mh-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.utility-content{display:grid;gap:16px;padding:14px}.utility-list{display:grid;gap:9px}
.utility-list-item,.saved-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;min-height:66px;padding:9px;border:1px solid var(--mh-border);border-radius:8px;background:var(--mh-surface);color:var(--mh-text);text-align:left;box-shadow:0 3px 12px rgba(18,59,104,.05)}
.utility-list-item>span:nth-child(2),.saved-item>span:nth-child(2){min-width:0}.utility-list-item b,.utility-list-item small,.saved-item b,.saved-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.utility-list-item b,.saved-item b{color:var(--mh-navy);font-size:14px}.utility-list-item small,.saved-item small{margin-top:4px;color:var(--mh-muted);font-size:11px}.utility-list-item strong,.saved-item strong{color:var(--mh-teal);font-size:12px}
.utility-item-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;background:var(--mh-teal-soft);color:var(--mh-teal);font-size:20px;font-weight:800}.utility-list-item.is-complete{border-color:#b8dfca;background:#eef9f2}.utility-list-item.is-complete .utility-item-icon{background:#d9f2e3;color:var(--mh-green)}.utility-list-item.is-complete strong{color:var(--mh-green)}
.utility-primary{width:100%;min-height:48px;border:1px solid var(--mh-orange);border-radius:8px;background:var(--mh-orange);color:var(--mh-navy);font-weight:800;box-shadow:0 4px 12px rgba(245,154,61,.2)}
.utility-empty{display:grid;min-height:38dvh;place-items:center;align-content:center;gap:8px;padding:28px;border:1px dashed #a8cbd5;border-radius:8px;background:rgba(255,255,255,.54);color:var(--mh-muted);text-align:center}.utility-empty b{color:var(--mh-navy)}.utility-empty small{max-width:270px;line-height:1.5}
.saved-item{grid-template-columns:96px minmax(0,1fr) 20px;min-height:72px}.saved-thumb{position:relative;display:grid;aspect-ratio:16/9;place-items:center;border-radius:6px;background:linear-gradient(145deg,var(--mh-teal),var(--mh-primary));background-position:center;background-size:cover}.saved-thumb>span{display:grid;width:28px;height:28px;place-items:center;border-radius:999px;background:rgba(11,37,69,.8);color:#fff;font-size:11px;padding-left:2px}
.utility-form{display:grid;gap:16px;padding:18px 14px 100px}.utility-form>p{margin:0;color:var(--mh-muted);font-size:13px;line-height:1.5}.utility-form label,.utility-form-grid label{display:grid;gap:6px;color:#425d70;font-size:12px;font-weight:700}.utility-form input,.utility-form select,.utility-form textarea{width:100%;min-height:46px;padding:0 12px;border:1px solid #b9d3dd;border-radius:8px;background:var(--mh-surface);color:var(--mh-text)}.utility-form textarea{min-height:130px;padding:12px;resize:vertical}.utility-form input::placeholder,.utility-form textarea::placeholder{color:#78909e}
.utility-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}.utility-form-grid .wide{grid-column:1/-1}
.utility-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-top:4px}.utility-actions button{min-height:48px;border:1px solid #9eb9c6;border-radius:8px;background:var(--mh-surface);color:var(--mh-primary);font-weight:800}.utility-actions .primary{border-color:var(--mh-orange);background:var(--mh-orange);color:var(--mh-navy)}
.sticky-actions{position:fixed;z-index:30;right:0;bottom:0;left:0;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--mh-border);background:rgba(255,255,255,.98);box-shadow:0 -6px 20px rgba(18,59,104,.08)}
.delete-zone{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:6px;padding:12px;border:1px solid #f2c4c0;border-radius:8px;background:#fff5f4}.delete-zone b,.delete-zone small{display:block}.delete-zone b{color:#8f241b;font-size:13px}.delete-zone small{margin-top:3px;color:#8a5a55;font-size:10px}.danger-outline,.inline-confirm .danger{min-height:38px;padding:0 12px;border:1px solid #c93c30;border-radius:7px;color:#a12b22;font-size:12px;font-weight:800}.inline-confirm{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;color:#8f241b;font-size:12px}.inline-confirm button{min-height:36px;padding:0 10px;border:1px solid #d6a19c;border-radius:7px}.inline-confirm .danger{background:#b42318;color:#fff}
@media (min-width:760px){.sticky-actions{left:50%;right:auto;width:min(480px,100%);transform:translateX(-50%)}}
@media (max-width:380px){.utility-form-grid{grid-template-columns:1fr}.utility-form-grid .wide{grid-column:auto}.saved-item{grid-template-columns:84px minmax(0,1fr) 16px}}