:root{
  --bg:#f7f8fb;--surface:#ffffff;--surface-2:#f1f3f7;--text:#111827;--muted:#697386;--line:#e3e7ee;
  --nav:#0b1120;--nav-text:#f8fafc;--accent:#ef2d33;--accent-dark:#d91f25;--blue:#1f6fe5;
  --shadow:0 12px 34px rgba(15,23,42,.07);--radius:20px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);background:var(--bg)
}
:root[data-theme="dark"]{
  --bg:#0b0d12;--surface:#141820;--surface-2:#1a1f29;--text:#f5f7fb;--muted:#9aa4b4;--line:#262c37;
  --nav:#07090d;--nav-text:#fff;--shadow:0 12px 34px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}a{color:inherit}.shell{width:min(1240px,calc(100% - 36px));margin-inline:auto}

/* Header */
.topbar{position:sticky;top:0;z-index:50;background:var(--nav);color:var(--nav-text);box-shadow:0 4px 18px rgba(0,0,0,.14)}
.header-inner{min-height:76px;display:grid;grid-template-columns:auto minmax(260px,560px) 1fr auto;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap;font-size:21px;font-weight:850;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:40px;height:32px;border-radius:10px;background:var(--accent);color:#fff;font-size:15px}.brand-copy b{font-weight:900}
.search{display:flex;min-width:0}.search input{min-width:0;flex:1;height:44px;border:1px solid rgba(255,255,255,.18);border-right:0;border-radius:14px 0 0 14px;padding:0 15px;background:rgba(255,255,255,.07);color:#fff;font-size:15px;outline:none}.search input::placeholder{color:#9ca3af}.search input:focus{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1)}.search button{height:44px;border:0;border-radius:0 14px 14px 0;padding:0 24px;background:var(--accent);color:#fff;font-weight:850;cursor:pointer}.search button:hover{background:var(--accent-dark)}
.desktop-nav{display:flex;justify-content:flex-end;align-items:center;gap:26px}.desktop-nav a{text-decoration:none;font-size:14px;font-weight:750;color:#f2f4f7}.desktop-nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:8px}.icon-btn,.pwa-install{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;border-radius:12px;height:38px;padding:0 12px;font-weight:800;cursor:pointer}.icon-btn{width:38px;padding:0;font-size:18px}.pwa-install[hidden]{display:none!important}.pwa-install:hover,.icon-btn:hover{background:rgba(255,255,255,.13)}

.main{padding-block:28px 48px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--blue);margin:0 0 7px}.muted{color:var(--muted)}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.notice.error{border-color:#f5b5b8;color:#b42318;background:#fff8f8}.notice p{margin:7px 0 0}

/* Search results */
.results-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}.results-head h1{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.025em}.sort-form{display:flex;align-items:center;gap:9px}.sort-form label{font-size:13px;font-weight:800;color:var(--muted)}.sort-form select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 38px 10px 12px;font-size:14px}
.quick-chips{display:flex;gap:9px;overflow:auto;padding:2px 0 20px;scrollbar-width:none}.quick-chips::-webkit-scrollbar{display:none}.quick-chips a{flex:none;text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:8px 13px;border-radius:999px;font-size:13px;font-weight:750;color:var(--muted)}.quick-chips a:hover{border-color:#c9d4e5;color:var(--text)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.video-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.035);transition:transform .2s ease,box-shadow .2s ease}.video-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.thumb{display:block;position:relative;aspect-ratio:16/9;background:#d9dee6;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.thumb:hover img{transform:scale(1.025)}.duration{position:absolute;right:8px;bottom:8px;background:rgba(8,10,15,.82);color:#fff;padding:4px 7px;border-radius:7px;font-size:12px;font-weight:900}.card-body{padding:14px 15px 16px}.card-body h2{font-size:16px;line-height:1.36;margin:0 0 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-body h2 a{text-decoration:none}.card-body h2 a:hover{color:var(--accent)}.channel,.stats,.summary{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.channel{font-weight:700;color:var(--text)}.summary{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pager{display:flex;justify-content:center;gap:10px;margin-top:30px}.pager a{padding:11px 15px;border-radius:12px;text-decoration:none;font-weight:800;background:var(--surface);border:1px solid var(--line)}

/* Watch page */
.watch-page{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}.watch-main{min-width:0}.back{display:inline-flex;margin:0 0 14px;text-decoration:none;color:var(--blue);font-weight:850;font-size:14px}.player-wrap{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050505 center/cover no-repeat;box-shadow:0 12px 35px rgba(0,0,0,.16)}.player-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.15));pointer-events:none;opacity:0;transition:opacity .2s}.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s ease;background:#000;z-index:2}.player-wrap.is-loaded iframe{opacity:1}.player-wrap.is-loaded .player-loading{opacity:0;pointer-events:none}.player-loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);z-index:1;transition:opacity .2s}.player-loading span{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.watch-tags-top{display:flex;gap:11px;overflow:auto;scrollbar-width:none;padding:13px 0 1px}.watch-tags-top::-webkit-scrollbar{display:none}.watch-tags-top a{flex:none;color:var(--blue);font-size:12px;text-decoration:none;font-weight:750}
.watch-title{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:11px 0 17px}
.creator-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.creator-block{display:flex;align-items:center;gap:11px;min-width:0}.avatar,.comment-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ffd5d7,#ef2d33);color:#fff;font-weight:900;flex:none}.avatar{width:42px;height:42px;font-size:17px}.creator-block>div{display:grid;gap:2px}.creator-block strong{font-size:14px}.creator-block span:not(.avatar){font-size:12px;color:var(--muted)}.subscribe-btn{margin-left:4px;text-decoration:none;background:var(--accent);color:#fff;padding:10px 15px;border-radius:999px;font-size:13px;font-weight:900}.subscribe-btn:hover{background:var(--accent-dark)}
.action-row{display:flex;gap:8px;flex-wrap:wrap}.action-pill{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;min-height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.action-pill:hover{background:var(--surface-2)}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:17px;margin-top:18px;overflow:hidden}.stats-strip>div{padding:14px 12px;display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:7px;align-items:center;border-right:1px solid var(--line)}.stats-strip>div:last-child{border-right:0}.stat-icon{grid-row:1/3;color:var(--muted);font-size:18px}.stats-strip strong{font-size:14px;white-space:nowrap}.stats-strip small{font-size:11px;color:var(--muted)}
.description-card{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:15px 16px 14px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.tags a{text-decoration:none;color:var(--blue);background:#eaf2ff;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:750}:root[data-theme="dark"] .tags a{background:#162744;color:#8db9ff}.description-head{display:flex;justify-content:space-between;align-items:center}.description-head h2{font-size:14px;margin:0 0 8px}.description{font-size:13px;line-height:1.62;overflow-wrap:anywhere;position:relative}.description.is-collapsed{max-height:112px;overflow:hidden}.description.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,transparent,var(--surface))}.description-toggle{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:850;font-size:12px;padding:10px 0 0;cursor:pointer}

/* Up next */
.up-next-panel{position:sticky;top:96px;min-width:0}.up-next-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.up-next-head h2{font-size:16px;margin:0}.autoplay-label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.toggle-dot{width:29px;height:16px;border-radius:999px;background:var(--accent);position:relative}.toggle-dot::after{content:"";position:absolute;width:12px;height:12px;right:2px;top:2px;border-radius:50%;background:#fff}.up-next-list{display:grid;gap:9px}.up-next-card{display:grid;grid-template-columns:124px minmax(0,1fr);gap:10px;padding:8px;border-radius:15px}.up-next-card.is-featured{background:#ffecec}:root[data-theme="dark"] .up-next-card.is-featured{background:#2a171a}.up-next-thumb{display:block;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#222}.up-next-thumb img{width:100%;height:100%;object-fit:cover;display:block}.up-next-copy{min-width:0}.up-next-copy h3{font-size:12px;line-height:1.35;margin:1px 0 5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.up-next-copy h3 a{text-decoration:none}.up-next-copy p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Comments */
.comments-section{margin-top:18px}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.section-title-row h2{font-size:17px;margin:0}.section-title-row h2 span{font-weight:500;color:var(--muted);font-size:13px}.section-title-row>a{color:var(--accent);font-size:12px;font-weight:850;text-decoration:none}.comments{display:grid;gap:9px}.comment{display:grid;grid-template-columns:auto 1fr;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px}.comment-avatar{width:34px;height:34px;font-size:13px}.comment-content{min-width:0}.comment-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px}.comment-head span{color:var(--muted);font-size:11px}.comment p{font-size:13px;line-height:1.55;margin:7px 0 6px}.comment-actions{display:flex;gap:16px;color:var(--muted);font-size:11px;font-weight:750}.empty-comments{border:1px dashed var(--line);border-radius:16px;padding:18px;color:var(--muted);font-size:13px;background:var(--surface)}

/* More like this */
.related-section{margin-top:22px}.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.related-card{min-width:0}.related-card .thumb{border-radius:12px}.related-body{padding:8px 2px}.related-body h3{font-size:12px;line-height:1.35;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.related-body h3 a{text-decoration:none}.related-body p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.45}

.footer{border-top:1px solid var(--line);padding:24px 0;background:var(--surface);color:var(--muted);font-size:12px;text-align:center}

@media(max-width:1040px){
  .header-inner{grid-template-columns:auto minmax(220px,1fr) auto}.desktop-nav{display:none}
  .watch-page{grid-template-columns:260px minmax(0,1fr)}.up-next-card{grid-template-columns:104px minmax(0,1fr)}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:780px){
  .shell{width:min(100% - 24px,1240px)}.header-inner{grid-template-columns:1fr auto;padding:12px 0;gap:10px}.brand{font-size:19px}.header-actions{grid-column:2;grid-row:1}.search{grid-column:1/-1;grid-row:2;width:100%}.search input{height:46px;background:#fff;color:#111827;border-color:#d7dce4}.search input::placeholder{color:#7b8492}.search button{height:46px}.main{padding-top:18px}.watch-page{display:block}.up-next-panel{display:none}.back{margin-bottom:12px}.watch-title{font-size:24px}.creator-actions{align-items:flex-start}.action-row{width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}.action-row::-webkit-scrollbar{display:none}.action-pill{flex:none}.stats-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.stats-strip>div{padding:12px 6px;grid-template-columns:1fr;text-align:center;gap:2px}.stat-icon{display:none}.stats-strip strong{font-size:12px}.stats-strip small{font-size:10px}.related-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none}.related-grid::-webkit-scrollbar{display:none}.related-card{flex:0 0 72%;scroll-snap-align:start}.results-head{align-items:flex-start;flex-direction:column}.results-head h1{font-size:27px}
}
@media(max-width:620px){
  .shell{width:min(100% - 20px,1240px)}.brand-mark{width:38px;height:31px}.pwa-install{height:34px;padding:0 9px;font-size:12px}.icon-btn{height:34px;width:34px}.player-wrap{border-radius:16px}.watch-tags-top{padding-top:11px}.watch-title{font-size:22px;margin-top:8px}.creator-block{width:100%}.subscribe-btn{margin-left:auto}.stats-strip{margin-top:14px}.description-card{padding:14px}.section-title-row h2{font-size:18px}.comment{padding:12px}.video-grid{grid-template-columns:1fr;gap:18px}.video-card{border-radius:16px}.video-card .thumb{aspect-ratio:16/9}.card-body{padding:13px 8px 4px;background:transparent}.video-card{border:0;background:transparent;box-shadow:none}.card-body h2{font-size:17px}.summary{display:none}.quick-chips{padding-bottom:15px}.results-head{margin-bottom:14px}.results-head h1{font-size:25px}.sort-form select{padding:9px 34px 9px 11px}.footer{font-size:11px}
}

/* =========================================================
   TSP Videos v1.3.0 — app navigation, personal library & UX
   ========================================================= */

/* Search visibility: always use a light field, even in dark mode/autofill. */
.search input,
:root[data-theme="dark"] .search input{
  background:#fff!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  caret-color:#111827!important;
  border-color:#d7dce4!important;
  color-scheme:light;
  opacity:1!important;
}
.search input::placeholder,
:root[data-theme="dark"] .search input::placeholder{color:#7b8492!important;opacity:1}
.search input:focus,
:root[data-theme="dark"] .search input:focus{background:#fff!important;border-color:#8cb6f2!important;box-shadow:0 0 0 3px rgba(31,111,229,.13)}
.search input:-webkit-autofill,
.search input:-webkit-autofill:hover,
.search input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:#111827!important;
  caret-color:#111827!important;
}

/* More room for the five primary app destinations on wide screens. */
.desktop-nav{gap:18px}.desktop-nav a{font-size:13px}

/* Autoplay */
.autoplay-control,.mobile-autoplay{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:750}
.switch{width:48px;height:27px;border:0;border-radius:999px;padding:0;background:#cbd2dc;position:relative;cursor:pointer;transition:background .2s;flex:none}
.switch span{position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s}
.switch.is-on{background:var(--accent)}.switch.is-on span{transform:translateX(21px)}
.switch-small{width:36px;height:21px}.switch-small span{width:17px;height:17px;left:2px;top:2px}.switch-small.is-on span{transform:translateX(15px)}
.mobile-autoplay{display:none}
.watch-topline{display:flex;justify-content:space-between;align-items:center;gap:12px}.watch-topline .back{margin-bottom:14px}
.action-pill.is-saved{background:#eaf2ff;border-color:#bad3fb;color:#155dbb}:root[data-theme="dark"] .action-pill.is-saved{background:#162744;border-color:#284d7f;color:#9ac1ff}

/* App pages */
.app-page{max-width:1100px;margin:0 auto}.app-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 24px}.app-page-head h1{font-size:36px;letter-spacing:-.035em;margin:0 0 7px}.app-page-head p:not(.eyebrow){margin:0;color:var(--muted);font-size:14px}.soft-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.soft-btn:hover{background:var(--surface-2)}
.personal-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.personal-video-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);min-width:0}.personal-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#15171c}.personal-thumb img{width:100%;height:100%;object-fit:cover;display:block}.personal-video-copy{min-width:0}.personal-video-copy h2{font-size:15px;line-height:1.35;margin:2px 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.personal-video-copy h2 a{text-decoration:none}.personal-video-copy p{font-size:11.5px;color:var(--muted);margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.personal-card-actions{display:flex;gap:12px;margin-top:10px}.personal-card-actions a,.personal-card-actions button{border:0;background:transparent;color:var(--blue);padding:0;font:inherit;font-size:11.5px;font-weight:850;text-decoration:none;cursor:pointer}.personal-card-actions button{color:var(--muted)}
.personal-empty{border:1px dashed var(--line);border-radius:18px;padding:32px;text-align:center;background:var(--surface);color:var(--muted)}.personal-empty strong{display:block;color:var(--text);font-size:18px}.personal-empty p{margin:7px 0 0}

.playlist-create{display:flex;gap:10px;margin-bottom:20px;max-width:620px}.playlist-create input,.modal-create input,.settings-card input{min-width:0;flex:1;height:46px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);padding:0 14px;font:inherit;outline:none}.playlist-create input:focus,.modal-create input:focus,.settings-card input:focus{border-color:#8cb6f2;box-shadow:0 0 0 3px rgba(31,111,229,.12)}.playlist-create button,.modal-create button,.settings-card button[type="submit"]{border:0;border-radius:13px;background:var(--accent);color:#fff;padding:0 18px;font-weight:850;cursor:pointer}.playlist-page-list{display:grid;gap:15px}.playlist-block{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.playlist-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.playlist-block-head h2{font-size:20px;margin:0 0 3px}.playlist-block-head p{font-size:12px;color:var(--muted);margin:0}.danger-text{border:0;background:transparent;color:#c5282f;font-weight:800;cursor:pointer}.playlist-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.playlist-mini-video{display:grid;gap:7px;text-decoration:none;font-size:11.5px;font-weight:750;line-height:1.3}.playlist-mini-video img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px;background:#111}.playlist-mini-video span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.account-card,.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:20px;box-shadow:var(--shadow)}.account-card{display:flex;align-items:center;gap:16px}.account-avatar{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ffb8bd,var(--accent));color:#fff;font-size:25px;font-weight:900}.account-card h2,.settings-card h2{margin:0 0 5px;font-size:20px}.account-card p{margin:0;color:var(--muted);font-size:12px}.settings-card form{display:flex;align-items:end;gap:10px}.settings-card label:not(.setting-row){display:grid;gap:7px;flex:1;font-size:12px;font-weight:800}.settings-card button[type="submit"]{height:46px}.save-status{font-size:12px;color:var(--blue);font-weight:800;min-width:38px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.setting-row>span{display:grid;gap:4px}.setting-row strong{font-size:14px}.setting-row small{font-size:11.5px;color:var(--muted)}.storage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.storage-stats div{display:grid;text-align:center;padding:14px 6px;border-radius:14px;background:var(--surface-2)}.storage-stats strong{font-size:24px}.storage-stats span{font-size:11px;color:var(--muted)}

/* Playlist modal */
.modal[hidden]{display:none!important}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(5,8,14,.66);backdrop-filter:blur(4px)}.modal-card{position:relative;width:min(480px,100%);max-height:min(650px,85vh);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.35)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h2{margin:0;font-size:20px}.modal-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:23px;cursor:pointer}.modal-create{display:flex;gap:8px;margin:16px 0}.modal-create button{height:44px}.modal-playlists{display:grid;gap:8px}.modal-playlist-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:12px 13px;text-align:left;cursor:pointer}.modal-playlist-row:hover{background:var(--surface-2)}.modal-playlist-row span{display:grid;gap:3px}.modal-playlist-row small{color:var(--muted)}.modal-playlist-row strong{color:var(--blue);font-size:12px}.modal-playlist-row.has-video strong{color:#17834f}.modal-open{overflow:hidden}

/* Mobile app navigation */
.mobile-app-nav{display:none}

@media(max-width:1120px){
  .desktop-nav{display:none}
}

@media(max-width:780px){
  .mobile-autoplay{display:flex}.watch-topline .back{margin-bottom:12px}
  .main{padding-bottom:92px}.footer{padding-bottom:92px}
  .mobile-app-nav{position:fixed;z-index:70;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line);box-shadow:0 -10px 28px rgba(15,23,42,.08);padding:7px 4px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(16px)}
  .mobile-app-nav a{display:grid;place-items:center;gap:2px;min-width:0;text-decoration:none;color:var(--muted);font-size:10px;font-weight:800}.mobile-app-nav a span{font-size:20px;line-height:1}.mobile-app-nav a b{font:inherit}.mobile-app-nav a.is-active{color:var(--accent)}
  .app-page-head{align-items:flex-start;flex-direction:column;margin-bottom:18px}.app-page-head h1{font-size:29px}.personal-video-grid{grid-template-columns:1fr}.personal-video-card{grid-template-columns:142px minmax(0,1fr);gap:11px;padding:10px}.playlist-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-grid{grid-template-columns:1fr}.settings-card form{align-items:stretch;flex-direction:column}.settings-card button[type="submit"]{height:44px}.playlist-create{max-width:none}.playlist-create input{width:100%}
}

@media(max-width:520px){
  .personal-video-card{grid-template-columns:118px minmax(0,1fr)}.personal-video-copy h2{font-size:13.5px}.personal-video-copy p{font-size:10.5px}.playlist-create{display:grid}.playlist-create button{height:44px}.account-card,.settings-card{padding:16px}.storage-stats strong{font-size:20px}.modal{padding:12px}.modal-card{border-radius:19px}.mobile-app-nav a{font-size:9.5px}.mobile-app-nav a span{font-size:19px}
}