:root{--ink:#173b38;--muted:#6e7973;--paper:#f5f5ef;--line:#dfe3d9;--orange:#ce6547;--green:#dce9db;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0;background:transparent;color:inherit}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b56148;outline-offset:3px}
button:hover{filter:brightness(.94)}
.hidden{display:none!important}
.sidebar{width:236px;height:100vh;position:fixed;left:0;top:0;border-right:1px solid var(--line);background:#eeefe7;padding:34px 24px;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;font-size:26px;font-weight:700}
.brand-mark{display:grid;place-items:center;background:var(--ink);color:#eee8ce;border-radius:16px;width:48px;height:48px}
.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:2px;margin-top:4px}
.sidebar nav{margin-top:55px;display:grid;gap:12px}
.sidebar nav a{padding:13px 16px;display:flex;gap:14px;border-radius:10px;font-size:18px}
.sidebar nav a span{font-size:15px}
.sidebar nav a.active{background:#dce4d8;font-weight:600}
.sidebar-note{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.8}
.status-dot{display:inline-block;width:6px;height:6px;background:#548862;border-radius:50%;margin-right:5px}
.content{margin-left:236px;padding:0 42px 130px;max-width:1450px}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between}
.desktop-kicker{color:var(--muted);font-size:13px;letter-spacing:1px}
.private-badge{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:7px 12px;color:#61796c}
.mobile-brand,.mobile-nav{display:none}
h1{font-size:32px;letter-spacing:-1px;margin:17px 0 10px}
h2{font-size:21px;margin:24px 0 14px}
h3{font-size:17px;margin:0 0 10px}
p{line-height:1.7}
.subtitle{color:var(--muted);margin:0 0 24px;font-size:14px}
.hero{display:grid;grid-template-columns:1fr 225px;gap:28px;background:var(--ink);border-radius:20px;color:#f1f4e6;padding:30px 32px;margin:28px 0}
.hero .eyebrow{font-size:10px;letter-spacing:3px;color:#b7ccba}
.hero h2{font-size:27px;line-height:1.45;max-width:520px;margin:12px 0}
.hero p{color:#b4c6bb;font-size:13px;margin-bottom:20px}
.primary,.secondary,.danger{border-radius:9px;padding:11px 18px;font-size:13px;font-weight:600;display:inline-flex;gap:7px;align-items:center;justify-content:center}
.primary{background:var(--ink);color:#fff}
.hero .primary{background:#e4eccf;color:var(--ink)}
.secondary{background:#e8ece3;border:1px solid var(--line)}
.danger{background:#f2dfd5;color:#a74632}
.hero-art{border:1px solid #8aab945c;min-height:175px;border-radius:50% 50% 10px 10px;background:#31574e;position:relative;display:grid;place-items:center;overflow:hidden}
.hero-art span{font-family:serif;font-size:38px;z-index:1;letter-spacing:10px}
.hero-art:before,.hero-art:after{content:"";width:280px;height:280px;position:absolute;border:1px solid #92b0a469;border-radius:50%;top:65px}
.hero-art:after{top:100px;width:350px;height:350px}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:26px 0 14px}
.section-heading h2{margin:0}
.section-heading small{color:var(--muted)}
.search{position:relative;margin:24px 0 18px}
.search input{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 17px 14px 41px;width:100%;color:var(--ink);font-size:14px}
.search:before{content:'⌕';position:absolute;left:16px;top:10px;font-size:24px;color:var(--muted)}
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px}
.chip{white-space:nowrap;background:#eaede4;border:1px solid var(--line);padding:8px 13px;border-radius:20px;font-size:12px}
.chip.active{background:var(--ink);color:white;border-color:var(--ink)}
.episode-list{display:grid;gap:10px}
.episode{display:flex;align-items:center;gap:16px;padding:18px 16px;background:#fff;border:1px solid var(--line);border-radius:13px}
.episode-art{flex-shrink:0;width:70px;height:70px;border-radius:11px;background:#d8e3d0;display:grid;place-items:center;position:relative;overflow:hidden;font-size:24px;font-family:serif;font-weight:700;color:#385b4d}
.episode-art:after{content:'';position:absolute;width:75px;height:75px;top:28px;left:-4px;border:1px solid #8aa18a;border-radius:50%}
.episode:nth-child(even) .episode-art{background:#ecd9c7;color:#a15b40}
.episode-info{flex:1;min-width:0}
.episode-info h3{font-size:15px;line-height:1.45;margin:5px 0}
.episode-info p{color:var(--muted);font-size:12px;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:650px}
.eyebrow{color:#7b877b;font-size:10px;letter-spacing:1px}
.episode-actions{display:flex;gap:8px;align-items:center}
.icon{width:34px;height:34px;border-radius:50%;background:#f1f3ed;font-size:18px;display:grid;place-items:center}
.play{border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;min-width:42px;height:42px;font-size:17px}
.progress-track{height:3px;max-width:180px;background:#e7e9df;margin-top:9px;border-radius:10px;overflow:hidden}
.progress-track div{height:100%;background:#648571}
.empty{padding:48px 24px;text-align:center;border:1px dashed #cad3c5;border-radius:16px;color:var(--muted)}
.detail-head{padding:26px;background:#e3eadd;border-radius:18px;margin-top:20px}
.detail-head h1{font-size:28px;margin:10px 0}
.detail-meta{font-size:12px;color:#677d6b;display:flex;gap:12px;flex-wrap:wrap}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.back{font-size:13px;padding:7px 0;color:var(--muted)}
.panel{background:white;border:1px solid var(--line);border-radius:15px;padding:23px;margin:18px 0}
.panel p{font-size:14px;color:#596d5e}
.source{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.source:last-child{border:0}
.source a{color:#a5533b;word-break:break-all}
.source summary{cursor:pointer;font-weight:600}
.script-turn{display:flex;gap:13px;margin:17px 0;font-size:14px;line-height:1.8}
.speaker{width:36px;height:36px;border-radius:50%;background:#e3eadd;flex-shrink:0;display:grid;place-items:center;font-size:11px}
.script-turn:nth-child(even) .speaker{background:#f0dccd}
.script-turn p{margin:0}
.mini{position:fixed;left:252px;right:20px;bottom:18px;border:1px solid #dce2d3;border-radius:16px;background:#fffef7;box-shadow:0 7px 30px #122f2514;height:78px;z-index:10;display:flex;align-items:center;padding:12px 16px;gap:16px}
.mini-info{display:flex;align-items:center;gap:12px;text-align:left;min-width:0;flex:1}
.mini-info strong{display:block;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:380px}
.mini-info small{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.mini-art{height:44px;width:44px;border-radius:10px;flex-shrink:0;background:#dfe8d7;display:grid;place-items:center;font-size:24px;font-family:serif}
.mini button small,.player-controls button small{display:block;font-size:10px}
.mini>button:not(.mini-info){flex-shrink:0;font-size:20px}
.mini #mini-time{font-size:11px;color:var(--muted)}
.mini input{width:18%;accent-color:var(--ink)}
dialog{border:0;padding:0;color:var(--ink);border-radius:20px;width:450px;max-width:100%;background:#f4f4eb}
dialog::backdrop{background:#09261fd9;backdrop-filter:blur(5px)}
.player-inner{padding:22px 32px 35px}
.player-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.player-top span{font-size:12px;letter-spacing:2px;color:var(--muted)}
.player-top button{font-size:26px;width:34px;height:34px}
.large-art{height:310px;border-radius:18px;background:#234d43;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e7e9cb;position:relative;overflow:hidden}
.large-art span{font-family:serif;font-size:52px;letter-spacing:16px;z-index:1;margin-left:16px}
.large-art p{position:absolute;bottom:16px;font-size:11px;letter-spacing:3px;color:#c1cead}
.large-art i{position:absolute;border:1px solid #adca9460;width:300px;height:300px;border-radius:50%;top:120px}
.large-art i:nth-child(3){top:160px;width:420px;height:420px}
.large-art i:nth-child(4){top:200px;width:520px;height:520px}
#player h2{font-size:22px;line-height:1.4;margin:25px 0 8px}
#player-show{font-size:12px;color:var(--muted);margin:0 0 20px}
#player-seek{width:100%;accent-color:var(--ink)}
.time-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}
.player-controls{display:flex;justify-content:center;align-items:center;gap:35px;margin:20px 0}
.player-controls button{font-size:26px}
.player-controls .play{width:66px;height:66px;font-size:23px}
.player-options{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:var(--muted)}
.player-options select{border:0;background:#e5e9dc;padding:6px;border-radius:6px;color:var(--ink)}
#audio-error{font-size:12px;color:#a44331}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:118px;background:var(--ink);color:white;padding:12px 20px;border-radius:10px;z-index:50;font-size:13px;max-width:90%;box-shadow:0 4px 16px #0002}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
label{font-size:12px;display:block;color:#596c5f}
label input,label textarea,label select{display:block;width:100%;margin-top:7px;border:1px solid #d4dece;background:#fafbf6;border-radius:8px;padding:11px;color:var(--ink)}
textarea{resize:vertical;min-height:110px;line-height:1.6}
.wide{grid-column:1/-1}
.hint{font-size:11px!important;color:var(--muted)!important;margin:6px 0 14px}
.form-footer{display:flex;align-items:center;gap:14px;margin-top:18px}
.job{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:space-between;margin:10px 0;gap:10px}
.job strong{font-size:14px}
.job p{font-size:11px;color:var(--muted);margin:4px 0}
.badge{font-size:11px;background:#e4ecd9;color:#4e6d53;padding:5px 9px;border-radius:15px}
.badge.failed{background:#f5ded3;color:#a84b30}
.steps{display:flex;overflow-x:auto;gap:9px;margin:22px 0;font-size:11px}
.steps span{white-space:nowrap;padding:7px 11px;background:#e4e8de;border-radius:15px}
.steps span.active{color:white;background:var(--ink)}
pre{white-space:pre-wrap;word-break:break-word;font-size:11px;line-height:1.7;background:#edf1e7;padding:14px;border-radius:8px}
.review-check{display:flex;align-items:flex-start;gap:9px;line-height:1.6;margin:18px 0}
.review-check input{width:auto;margin:4px 0 0}
.login{max-width:390px;margin:70px auto}
.login h1{font-size:28px}
.login button{width:100%;margin-top:20px}
.error-banner{border-radius:10px;background:#f5e1d5;color:#954733;padding:13px 16px;font-size:13px}
.text-button{font-size:12px;padding:5px 0;color:var(--muted)}


/* Shared sizing: long titles must shrink inside flex/grid containers. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { min-width: 280px; }
.content, #view, .hero > div, .episode-info, .mini-info > span:last-child,
.job > div, .form-grid > *, .script-turn p { min-width: 0; }
h1, h2, h3, .panel p, .source, .job strong { overflow-wrap: anywhere; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
#logout { min-height: 44px; padding: 8px; }
.mini-info > span:last-child { flex: 1; }
.mini-info strong { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .mobile-nav a { touch-action: manipulation; }
.icon { width: 44px; height: 44px; flex-shrink: 0; }
.play { min-width: 44px; height: 44px; flex-shrink: 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; }
#player { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
body:has(#player[open]) { overflow: hidden; }
.player-top button { width: 44px; height: 44px; }
.player-controls > button { min-width: 48px; min-height: 48px; }
#player-seek, #mini-seek { min-height: 28px; cursor: pointer; }
.player-options label { display: flex; align-items: center; gap: 6px; }
.player-options select { width: auto; margin: 0; min-height: 44px; }
.player-options > button { min-height: 44px; }
.review-check input { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--ink); }
progress.progress-track { appearance: none; border: 0; width: 100%; display: block; }
progress.progress-track::-webkit-progress-bar { background: #e7e9df; }
progress.progress-track::-webkit-progress-value { background: #648571; }
progress.progress-track::-moz-progress-bar { background: #648571; }

@media (max-width: 1100px) {
  .content { padding-left: 26px; padding-right: 26px; }
  .hero { grid-template-columns: minmax(0, 1fr) 160px; padding: 25px; }
  .hero h2 { font-size: 23px; }
  .mini #mini-time { display: none; }
  .mini input { width: 12%; }
}

/* Phone and tablet H5: one column, reachable controls and persistent playback. */
@media (max-width: 900px) {
  :root { --nav-height: 64px; --player-space: 0px; }
  body:has(#mini:not(.hidden)) { --player-space: 100px; }
  html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .sidebar { display: none; }
  .content {
    margin: 0 auto; max-width: 740px;
    padding: 0 max(20px, env(safe-area-inset-right, 0px))
      calc(var(--nav-height) + var(--player-space) + 28px + env(safe-area-inset-bottom, 0px))
      max(20px, env(safe-area-inset-left, 0px));
  }
  .topbar {
    position: sticky; top: 0; z-index: 5; height: auto;
    min-height: calc(76px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px); gap: 12px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .mobile-brand { display: block; flex-shrink: 0; font-size: 24px; font-weight: 700; letter-spacing: 1px; }
  .mobile-brand span { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 1px; margin-top: 4px; }
  .desktop-kicker { display: none; }
  .topbar-actions { gap: 6px; }
  .private-badge { font-size: 11px; padding: 7px 9px; white-space: nowrap; }
  #logout { font-size: 12px; }
  h1 { font-size: clamp(25px, 6vw, 32px); line-height: 1.4; margin: 26px 0 10px; letter-spacing: -.5px; }
  .subtitle { font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
  .hero {
    position: relative; display: block; padding: 24px; margin: 24px 0;
    border-radius: 20px; overflow: hidden;
  }
  .hero > div { position: relative; z-index: 1; }
  .hero .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .hero h2 { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.5; margin: 16px 0 12px; max-width: 100%; }
  .hero p { font-size: 13px; line-height: 1.8; margin: 0 0 20px; }
  .hero .primary { font-size: 14px; min-height: 48px; padding: 12px 20px; }
  .hero-art { display: none; }
  .section-heading { align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 28px 0 16px; }
  .section-heading h2 { font-size: 21px; }
  .section-heading small { font-size: 12px; }
  .search { margin: 18px 0 14px; }
  .search input { font-size: 16px; min-height: 50px; padding: 13px 14px 13px 42px; }
  .search:before { top: 8px; }
  .chips { gap: 8px; padding: 4px 2px 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { font-size: 13px; min-height: 44px; padding: 10px 16px; flex-shrink: 0; }
  .episode-list { gap: 14px; }
  .episode { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 16px; }
  .episode-art { width: 60px; height: 68px; font-size: 22px; border-radius: 12px; align-self: start; }
  .episode-info h3 { font-size: 16px; line-height: 1.55; margin: 7px 0; }
  .episode-info p { font-size: 12px; max-width: none; white-space: normal; line-height: 1.7; }
  .eyebrow { font-size: 11px; line-height: 1.6; }
  .episode-actions {
    grid-column: 1 / -1; justify-content: flex-end; gap: 12px;
    border-top: 1px solid #edf0e7; padding-top: 10px;
  }
  .episode-actions .icon { display: inline-flex; justify-content: center; align-items: center; gap: 6px; width: auto; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; font-size: 20px; }
  .episode-actions .icon:after { font-size: 12px; }
  .episode-actions [data-favorite]:after { content: '收藏'; }
  .episode-actions [data-queue]:after { content: '队列'; }
  .episode-actions .queue-add { display: inline-flex; }
  .episode-actions .play { min-width: 44px; height: 44px; font-size: 17px; }
  .episode > .text-button { grid-column: 1 / -1; min-height: 44px; justify-self: end; padding: 8px 12px; }
  .progress-track { max-width: 100%; margin-top: 10px; }
  .mobile-nav {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 6px max(8px, env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: #f5f6eff5; border-top: 1px solid var(--line); z-index: 11;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .mobile-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 48px; font-size: 23px; color: #6d8071; border-radius: 12px; }
  .mobile-nav a span { font-size: 11px; }
  .mobile-nav a.active { color: var(--ink); font-weight: 600; background: #e3eadd; }
  .mini {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-rows: 48px 24px; gap: 0 8px;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
    height: 88px; max-width: 700px; margin: 0 auto; padding: 8px 12px;
    border-radius: 16px; box-shadow: 0 4px 24px #122f2520;
  }
  .mini-info { width: 100%; height: 48px; padding: 0; gap: 10px; }
  .mini-art { height: 40px; width: 40px; font-size: 22px; border-radius: 10px; }
  .mini-info strong { font-size: 13px; max-width: 100%; }
  .mini-info small { font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini #mini-back, .mini #mini-time { display: none; }
  .mini #mini-play { font-size: 17px; min-width: 44px; height: 44px; }
  .mini #mini-next { min-width: 44px; height: 44px; font-size: 23px; }
  .mini #mini-seek { display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; height: 24px; min-height: 24px; margin: 0; padding: 0; accent-color: var(--ink); }
  .toast { bottom: calc(var(--nav-height) + var(--player-space) + 16px + env(safe-area-inset-bottom, 0px)); font-size: 14px; width: max-content; max-width: calc(100% - 32px); }
  .detail-head { padding: 22px 20px; border-radius: 18px; margin-top: 16px; }
  .detail-head h1 { font-size: 25px; line-height: 1.5; }
  .detail-meta { font-size: 12px; gap: 10px 14px; line-height: 1.7; }
  .detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .detail-actions .primary { grid-column: 1 / -1; }
  .primary, .secondary, .danger { min-height: 48px; padding: 12px 16px; font-size: 14px; text-align: center; white-space: normal; }
  .panel { padding: 20px; margin: 18px 0; border-radius: 16px; }
  .panel h3 { font-size: 18px; line-height: 1.6; }
  .panel p { font-size: 14px; line-height: 1.9; }
  .hint { font-size: 12px!important; line-height: 1.8; }
  .source { font-size: 14px; padding: 12px 0; }
  .source summary { min-height: 44px; padding: 10px 0; line-height: 1.7; }
  .script-turn { font-size: 14px; gap: 12px; }
  .speaker { width: 40px; height: 40px; font-size: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wide { grid-column: auto; }
  label { font-size: 14px; line-height: 1.6; }
  label input, label select, label textarea { min-width: 0; max-width: 100%; min-height: 48px; font-size: 16px; padding: 12px; }
  input[type=file] { overflow: hidden; }
  textarea { min-height: 150px; }
  .form-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-footer .hint { margin: 0; }
  .form-grid summary { min-height: 44px; padding: 10px 0; }
  .review-check { font-size: 14px; line-height: 1.8; }
  .review-check input { min-height: 20px; width: 20px; margin-top: 3px; padding: 0; }
  .panel > .primary, .panel > .secondary { width: 100%; margin: 6px 0; }
  .steps { gap: 8px; padding-bottom: 8px; font-size: 12px; }
  .steps span { padding: 10px 14px; }
  .job { padding: 16px; align-items: flex-start; gap: 12px; }
  .job strong { font-size: 15px; line-height: 1.7; }
  .job p { font-size: 12px; }
  .job .badge { flex-shrink: 0; font-size: 11px; line-height: 1.6; margin-top: 3px; }
  pre { max-width: 100%; font-size: 12px; }
  #player {
    position: fixed; inset: 0; margin: 0; padding: 0;
    width: 100%; max-width: 100%; height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .player-inner { padding: calc(12px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); max-width: 480px; margin: auto; }
  .player-top { margin-bottom: 16px; }
  .player-top span { font-size: 13px; }
  .large-art { height: 240px; height: min(65vw, 34svh, 280px); border-radius: 22px; }
  .large-art span { font-size: 48px; }
  .large-art p { font-size: 11px; letter-spacing: 2px; }
  #player h2 { font-size: 23px; line-height: 1.5; margin: 24px 0 8px; }
  #player-show { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
  #player-seek { height: 40px; margin: 0; }
  .time-row { font-size: 12px; margin-top: 0; }
  .player-controls { gap: 32px; margin: 18px 0; }
  .player-controls .play { width: 72px; height: 72px; }
  .player-options { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; font-size: 13px; }
  .player-options label { font-size: 13px; white-space: nowrap; }
  .player-options select { font-size: 16px; min-height: 44px; padding: 8px 4px; }
  .player-options > button { min-height: 44px; padding: 6px; font-size: 13px; }
  #audio-error { font-size: 13px; }
  .login { margin: 32px auto; }
}

@media (max-width: 360px) {
  .content { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .hero, .panel { padding: 18px; }
  .episode { padding: 14px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .episode-art { width: 52px; height: 62px; font-size: 19px; }
  .topbar-actions .private-badge { font-size: 10px; padding: 6px; }
  .mini { gap: 0 4px; padding-left: 8px; padding-right: 8px; }
  .mini-art { display: none; }
  .player-inner { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  .player-options { grid-template-columns: 1fr 1fr; }
  .player-options label { grid-column: 1 / -1; justify-content: center; }
  .job { flex-wrap: wrap; }
}

@media (max-width: 900px) and (max-height: 500px) {
  .large-art { height: 120px; }
  .large-art p { display: none; }
  .player-top { margin-bottom: 10px; }
  #player h2 { margin-top: 16px; font-size: 20px; }
  .player-controls { margin: 12px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .episode, .primary { transition: background .18s, transform .18s; }
  .primary:active { transform: scale(.97); }
}

/* Personal sections: the daily newsroom. */
.news-kicker { display: block; margin-top: 28px; color: #a5533b; }
.news-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 20px; color: #f1f4e6; background: var(--ink); }
.news-banner .eyebrow { color: #c2d3bd; }
.news-banner strong { display: block; font-size: 42px; letter-spacing: -1px; margin-top: 12px; }
.news-banner strong small { font-size: 14px; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.news-banner p { font-size: 13px; color: #c2d3bd; margin-bottom: 0; }
.news-duration { text-align: right; flex-shrink: 0; }
.news-duration span { display: block; margin-top: 8px; font-size: 12px; color: #c2d3bd; }
.news-status-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 24px; font-size: 13px; color: var(--muted); }
.news-edition .section-heading { margin-top: 0; }
.news-callout { background: #edf1e7; padding: 16px; border-radius: 12px; font-size: 14px; line-height: 1.8; }
.news-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; margin: 20px 0; color: var(--muted); }
.news-facts b { color: var(--ink); }
.news-audio-note { margin-top: 16px; }
.news-source-list { margin: 16px 0 24px; }
.news-source { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-source > div:first-child { min-width: 0; flex: 1; }
.news-source strong { overflow-wrap: anywhere; font-size: 15px; }
.news-source p { font-size: 12px; margin: 6px 0; }
.news-source a { display: inline-block; font-size: 12px; color: #a5533b; overflow-wrap: anywhere; max-width: 100%; line-height: 1.8; }
.news-source-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.news-source-actions button { min-height: 44px; }
.news-story { padding: 18px 0; border-bottom: 1px solid var(--line); }
.news-story:last-child { border-bottom: 0; }
.news-story h3 { margin: 10px 0; }
.news-history { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 14px; }
.news-history .hint { margin: 0; }
@media (max-width: 900px) {
  .news-banner { padding: 22px; gap: 12px; }
  .news-banner strong { font-size: 36px; }
  .news-banner strong small { font-size: 12px; }
  .news-banner p { font-size: 12px; }
  .news-duration span { font-size: 11px; }
  .news-source { flex-direction: column; align-items: stretch; gap: 8px; }
  .news-source-actions { justify-content: flex-end; }
  .news-source-actions .text-button { padding: 8px 12px; }
}
@media (max-width: 360px) {
  .news-banner { flex-direction: column; align-items: stretch; padding: 20px; }
  .news-duration { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; border-top: 1px solid #517269; margin-top: 12px; padding-top: 8px; }
  .news-duration strong { font-size: 28px; }
}

.reddit-meta, .reddit-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.reddit-meta { justify-content:space-between; }
.reddit-meta a { color:var(--ink); overflow-wrap:anywhere; }
.reddit-settings { margin-top:20px; }
.reddit-settings > summary { cursor:pointer; min-height:44px; padding:10px 0; }
.reddit-settings form { margin-top:18px; }
.reddit-story h3 { line-height:1.6; }
button:disabled { opacity:.5; cursor:default; }
@media(max-width:600px){.reddit-banner strong{font-size:26px}.reddit-actions{display:grid;grid-template-columns:1fr 1fr}.reddit-meta{font-size:12px;gap:8px}}

.reddit-detail { margin:12px 0; }
.reddit-detail > summary { min-height:44px; cursor:pointer; padding:10px 0; }
.reddit-original { white-space:pre-wrap; overflow-wrap:anywhere; }
.reddit-comment { border-top:1px solid var(--line); padding:12px 0; }