/* Feed Cycle v2 – Flat High-Contrast UI */
/* Design tokens (flattened: no gradients, no shadows) */
:root{--bg:#101317;--surface:#181c23;--surface-alt:#1d222b;--border:#303845;--border-strong:#4a5563;--text:#e6e9ef;--muted:#8f97a4;--primary:#53aaff;--accent:#34d399;--danger:#f87171;--radius:14px;--focus-color:color-mix(in srgb,var(--primary) 85%, white 0%);--focus-ring:0 0 0 3px color-mix(in srgb,var(--primary) 55%, transparent)}
:root[data-theme=light]{--bg:#f5f7fa;--surface:#ffffff;--surface-alt:#f1f4f8;--border:#c9d1db;--border-strong:#9aa6b4;--text:#1d2734;--muted:#606b77;--primary:#1e76ed;--accent:#059669;--danger:#dc2626}
@media (prefers-color-scheme:light){:root[data-theme=system]{--bg:#f5f7fa;--surface:#ffffff;--surface-alt:#f1f4f8;--border:#c9d1db;--border-strong:#9aa6b4;--text:#1d2734;--muted:#606b77;--primary:#1e76ed;--accent:#059669;--danger:#dc2626}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:17px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
[class~=visually-hidden]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* Icon system */
/* Scale steps: base 1em text -> primary icon 1.35em, icon-only 1.55em (rough golden ratio 1.618 softened) */
.icon{width:1.35em;height:1.35em;display:inline-block;vertical-align:middle;fill:currentColor;flex-shrink:0}
.btn-icon-only{padding:.6rem .6rem;display:inline-flex;align-items:center;justify-content:center}
.btn-icon-only .icon{width:1.55em;height:1.55em}
/* Denser icon sizing for compact toolbar rows */
.mp-row.top .icon{width:1.25em;height:1.25em}
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--surface-alt);color:var(--text);border:2px solid var(--border-strong);border-radius:14px;padding:.78rem 1.05rem;min-height:52px;min-width:52px;display:inline-flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:600;letter-spacing:.22px;line-height:1}
button:disabled{opacity:.5;cursor:not-allowed}
button:hover:not(:disabled){background:var(--surface);filter:none}
button:not(.cue-btn):active:not(:disabled){transform:translateY(1px)}
a{text-decoration:none;color:var(--primary)}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea,[role=button]):focus-visible{outline:2px solid var(--focus-color);outline-offset:2px;border-radius:10px;box-shadow:var(--focus-ring)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--primary);color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:500}
.fc-header{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;background:var(--surface);border-bottom:2px solid var(--border-strong);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:.75rem}
.app-title{font-size:1.35rem;margin:0;font-weight:600;letter-spacing:.3px}
.version{font-size:.75rem;opacity:.82;padding:.25rem .6rem;border:2px solid var(--border-strong);border-radius:999px;font-weight:600;background:var(--surface-alt);letter-spacing:.35px}
.primary-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{min-width:40px}
.media-player{background:var(--surface);border-bottom:2px solid var(--border-strong);padding:.65rem 1rem;display:flex;flex-direction:column;gap:.55rem;position:sticky;top:70px;z-index:35;font-size:.85rem}
.mp-row{display:flex;align-items:center;gap:.5rem}
.mp-row.top button{min-height:auto;padding:.35rem .55rem;font-size:.7rem}
progress{width:100%;height:10px;border-radius:6px;overflow:hidden;background:var(--border-strong)}
progress::-webkit-progress-bar{background:var(--border-strong)}
progress::-webkit-progress-value{background:var(--primary)}
progress::-moz-progress-bar{background:var(--primary)}
.mp-time{font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
/* New cue variable skip control */
.cue-row{display:flex;align-items:center;gap:.75rem}
.cue-track{position:relative;flex:1;height:46px;background:var(--border-strong);background-size:100% 3px;background-repeat:no-repeat;background-position:center;touch-action:none}
.cue-track.dragging::after{content:"";position:absolute;inset:0;background:var(--primary);opacity:.1;pointer-events:none}
.cue-btn{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--dx,0px)),-50%);width:54px;height:54px;border-radius:50%;border:3px solid var(--primary);background:var(--surface-alt);color:var(--text);cursor:grab;font-size:1.05rem;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s,transform .1s}
.cue-btn:hover{background:var(--surface)}
.cue-btn.dragging{background:var(--primary);color:#fff}
.cue-btn:active{cursor:grabbing}
.cue-btn:focus{outline:2px solid var(--primary);outline-offset:2px}
.app-main{padding:0 0 4rem}
.panel-stack{position:fixed;left:0;right:0;top:var(--stackOffset,140px);bottom:0;display:flex;flex-direction:column;overflow:hidden;z-index:10}
.panel{background:var(--surface);border:0;border-radius:0;margin:0;max-width:none;display:flex;flex-direction:column;position:absolute;inset:0}
.panel-bar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.15rem;border-bottom:2px solid var(--border-strong);background:var(--surface-alt);border-radius:0}
.panel-bar h2{flex:1;margin:0;font-size:1.22rem;font-weight:650;letter-spacing:.3px}
.panel-body{padding:1.2rem 1.35rem 2.5rem;display:flex;flex-direction:column;gap:1.05rem;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.panel-body.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.15rem;align-content:start;padding:1.2rem 1.35rem 4rem}
.menu-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.menu-list li{margin:0}
.actions-col{display:flex;flex-direction:column;gap:.6rem}
.subs-list{display:flex;flex-direction:column;gap:.65rem}
.muted{color:color-mix(in srgb,var(--muted) 68%,var(--text) 32%);font-size:.82rem}
.row{display:flex;gap:.6rem;align-items:center}
.subs-list .row{align-items:center !important;padding:.4rem .2rem;border-bottom:1px solid var(--border);}
.subs-list .row:last-child{border-bottom:none}
.subs-list .row strong{flex:1;min-width:180px;display:flex;align-items:center;line-height:1.2}
.subs-actions{display:flex;gap:.4rem;align-items:center}
.card{background:var(--surface-alt);border:2px solid var(--border);border-radius:14px;padding:1.05rem;display:flex;flex-direction:column;gap:.6rem;position:relative}
.card:hover{border-color:var(--border-strong)}
.card.unread{outline:3px solid color-mix(in srgb,var(--primary) 65%, transparent);outline-offset:0}
.card.read{opacity:.88}
.card-media{width:calc(100% + 2.1rem);margin:-1.05rem -1.05rem .55rem -1.05rem;aspect-ratio:16/9;overflow:hidden;border-radius:12px 12px 0 0;background:#05070a;display:flex;align-items:center;justify-content:center}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;background:#05070a}
.card h3{margin:.1rem 0;font-size:1.12rem;line-height:1.35;font-weight:600;letter-spacing:.25px}
.card .meta{font-size:.8rem;color:color-mix(in srgb,var(--muted) 70%,var(--text) 30%);display:flex;gap:.6rem;flex-wrap:wrap;font-weight:500}
.card .excerpt{font-size:.9rem;line-height:1.45;opacity:.98;max-height:5.4em;overflow:hidden}
.card .tags{display:flex;gap:.3rem;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.15rem 0 .15rem}
.chips .chips{margin:0;gap:.4rem}
.chip{background:color-mix(in srgb,var(--primary) 20%, var(--surface));border:2px solid color-mix(in srgb,var(--primary) 55%, var(--border));color:var(--text);padding:.25rem .65rem;border-radius:999px;font-size:.65rem;line-height:1;font-weight:650;letter-spacing:.4px;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;min-height:auto}
.chip:hover{background:color-mix(in srgb,var(--primary) 32%, var(--surface-alt))}
.chip:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.chip.cat-chip{background:color-mix(in srgb,var(--accent) 25%, var(--surface));border-color:color-mix(in srgb,var(--accent) 65%, var(--border))}
.chip.cat-chip:hover{background:color-mix(in srgb,var(--accent) 38%, var(--surface-alt))}
.tag{background:color-mix(in srgb,var(--accent) 26%,var(--surface));border:2px solid color-mix(in srgb,var(--accent) 70%,var(--border));padding:.28rem .7rem;border-radius:999px;font-size:.72rem;font-weight:650;letter-spacing:.3px}
.tag-manage{display:flex;flex-direction:column;gap:.8rem;margin-top:1.2rem}
.tag-pills{display:flex;flex-wrap:wrap;gap:.55rem}
.tag-pill{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--accent) 22%, var(--surface));border:2px solid color-mix(in srgb,var(--accent) 60%, var(--border));border-radius:999px;overflow:hidden}
.tag-pill button{border:none;background:transparent;min-height:auto;min-width:auto;padding:.35rem .65rem;font-size:.72rem;font-weight:650;letter-spacing:.3px;color:inherit;display:inline-flex;align-items:center;gap:.3rem}
.tag-pill button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px;border-radius:0}
.tag-pill-label{cursor:pointer}
.tag-pill-label:hover{background:color-mix(in srgb,var(--accent) 32%, var(--surface-alt))}
.tag-pill-remove{border-left:1px solid color-mix(in srgb,var(--accent) 55%, var(--border-strong));font-size:.85rem;line-height:1}
.tag-pill-remove:hover{background:color-mix(in srgb,var(--danger) 25%, var(--surface));color:color-mix(in srgb, #fff 70%, var(--text))}
.tag-pill-remove:focus-visible{border-radius:0}
.tag-add-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.tag-add-form input{flex:1 1 220px;min-width:160px;background:var(--surface-alt);border:2px solid var(--border);color:var(--text);padding:.6rem .75rem;border-radius:10px;font:inherit}
.tag-add-form input:focus{outline:2px solid var(--focus-color);outline-offset:2px}
.tag-add-form .chip{padding:.45rem 1rem;font-size:.75rem}
.article-viewer{display:flex;flex-direction:column;gap:1.6rem;max-width:900px;margin:0 auto;color:var(--text)}
.article-head{display:flex;flex-direction:column;gap:1rem}
.article-context{gap:.5rem}
.article-title{margin:0;font-size:2.05rem;line-height:1.2;font-weight:700;letter-spacing:.2px}
.article-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.9rem;color:color-mix(in srgb,var(--muted) 75%,var(--text) 25%)}
.article-meta .meta-item{display:flex;align-items:center;gap:.35rem}
.article-meta time{color:inherit;font-weight:600}
.article-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.action-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.15rem;border:2px solid var(--border-strong);border-radius:14px;background:var(--surface-alt);color:var(--text);font-weight:600;letter-spacing:.25px;min-height:48px;transition:background .15s,border-color .15s,transform .1s;text-decoration:none}
.action-btn:hover{background:var(--surface)}
.action-btn.primary{background:color-mix(in srgb,var(--primary) 32%, var(--surface));border-color:color-mix(in srgb,var(--primary) 65%, var(--border));color:var(--text)}
.favorite-toggle{gap:.4rem;padding:.55rem .95rem;min-height:46px}
.favorite-toggle .icon{width:1.1em;height:1.1em}
.favorite-toggle.is-favorite{background:color-mix(in srgb,var(--accent) 35%, var(--surface));border-color:color-mix(in srgb,var(--accent) 70%, var(--border));color:color-mix(in srgb,#ffffff 78%, var(--text))}
.favorite-toggle.is-favorite:hover{background:color-mix(in srgb,var(--accent) 48%, var(--surface-alt))}
.article-hero{margin:0;border-radius:18px;overflow:hidden;background:var(--surface-alt);border:2px solid var(--border-strong)}
.article-hero img{display:block;width:100%;height:auto;max-height:min(60vh,520px);object-fit:contain;background:color-mix(in srgb,var(--surface) 92%, black 8%)}
.article-media{display:flex;flex-direction:column;gap:1rem}
.article-media-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.article-media-title{margin:0;font-size:1.1rem;font-weight:650;letter-spacing:.2px}
.article-media-count{font-size:.8rem;color:color-mix(in srgb,var(--muted) 78%,var(--text) 22%)}
.media-entry{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border:2px solid var(--border);border-radius:14px;background:var(--surface-alt)}
.media-entry+.media-entry{margin-top:.5rem}
.media-entry-info{display:flex;flex-direction:column;gap:.45rem;flex:1 1 auto;min-width:0}
.media-entry-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.media-entry-title{margin:0;font-size:1rem;font-weight:650;letter-spacing:.2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-entry-kind{padding:.25rem .55rem;border-radius:999px;border:2px solid color-mix(in srgb,var(--primary) 55%, var(--border));background:color-mix(in srgb,var(--primary) 20%, var(--surface));font-size:.7rem;font-weight:650;letter-spacing:.3px;flex:0 0 auto;text-transform:uppercase}
.media-entry-meta,.media-entry-host{font-size:.82rem;color:color-mix(in srgb,var(--muted) 72%, var(--text) 28%)}
.media-entry-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.media-entry-actions .action-btn{min-width:140px;justify-content:center}
.media-entry.media-video .media-entry-kind{background:color-mix(in srgb,var(--accent) 25%, var(--surface));border-color:color-mix(in srgb,var(--accent) 60%, var(--border))}
.mp-track{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem;color:color-mix(in srgb,var(--muted) 75%, var(--text) 25%);margin-bottom:.2rem}
.mp-track-article{padding:.35rem .75rem;font-size:.72rem;min-height:auto}
.video-viewer-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
.video-viewer-title{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:.25px}
.video-viewer-meta,.video-viewer-host{font-size:.85rem;color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%)}
.video-frame{margin:0;border-radius:18px;background:var(--surface-alt);border:2px solid var(--border-strong);display:grid;place-items:center;padding:clamp(.5rem,2vw,1.25rem);gap:0}
.video-frame .video-player{max-width:100%;max-height:min(70vh,640px);width:auto;height:auto;object-fit:contain;background:#000;border-radius:12px}
.video-frame.is-portrait .video-player{width:auto;max-width:min(100%,420px)}
.video-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;align-items:center}
.video-actions .action-btn{min-width:160px;justify-content:center}
@media (max-width:720px){.media-entry{flex-direction:column;align-items:stretch}.media-entry-title{white-space:normal}.media-entry-actions{justify-content:flex-start}.media-entry-actions .action-btn{width:100%}}
.article-content{font-size:1.02rem;line-height:1.72;display:flex;flex-direction:column;gap:1.25rem;color:var(--text)}
.article-content p{margin:0}
.article-content p + p{margin-top:.25rem}
.article-content h2,.article-content h3,.article-content h4{margin:1.6rem 0 .75rem;font-weight:700;line-height:1.3}
.article-content a{color:var(--primary);text-decoration:underline}
.article-content img{max-width:100%;border-radius:14px;border:2px solid var(--border-strong);background:var(--surface-alt)}
.article-content blockquote{margin:1.6rem 0;padding:1rem 1.25rem;border-left:4px solid color-mix(in srgb,var(--primary) 55%, var(--border));background:color-mix(in srgb,var(--primary) 8%, var(--surface-alt));border-radius:0 12px 12px 0;font-style:italic}
.article-content ul,.article-content ol{margin:0;padding-left:1.5rem;display:flex;flex-direction:column;gap:.35rem}
.article-content pre{background:var(--surface-alt);border:2px solid var(--border-strong);border-radius:12px;padding:1rem;font-family:"Fira Code", "SFMono-Regular", Consolas, monospace;font-size:.9rem;overflow:auto}
.article-tags{display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem}
.tag-manage-header{display:flex;align-items:center;justify-content:space-between}
.tag-manage-header h3{margin:0;font-size:1rem;font-weight:650}
.tag-toggle-list{display:flex;flex-wrap:wrap;gap:.55rem}
.tag-toggle{border:2px solid color-mix(in srgb,var(--accent) 55%, var(--border));background:color-mix(in srgb,var(--accent) 18%, var(--surface));color:var(--text);min-height:auto;min-width:auto;padding:.45rem .85rem;border-radius:999px;font-size:.75rem;font-weight:650;letter-spacing:.3px;cursor:pointer;transition:background .15s,border-color .15s}
.tag-toggle:hover{background:color-mix(in srgb,var(--accent) 30%, var(--surface-alt))}
.tag-toggle.is-selected{background:color-mix(in srgb,var(--accent) 45%, var(--surface));border-color:color-mix(in srgb,var(--accent) 75%, var(--border));}
.tag-toggle:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.fav{position:absolute;top:.55rem;right:.55rem;background:var(--surface);border:2px solid var(--border-strong);font-size:1.15rem;border-radius:12px;padding:.42rem;color:var(--muted);transition:background .15s,border-color .15s,color .15s}
.fav:hover{background:var(--surface-alt);color:var(--text)}
.fav[aria-pressed=true]{color:#f9b938}
.back-btn{background:transparent;border:2px solid var(--border-strong)}
.danger{background:color-mix(in srgb,var(--danger) 32%,var(--surface));border:2px solid color-mix(in srgb,var(--danger) 70%,var(--border));font-weight:650}
.empty{padding:2rem;text-align:center;color:var(--muted)}
/* Form styling */
.panel-form{display:flex;flex-direction:column;gap:1.2rem;max-width:640px}
.panel-form fieldset{border:2px solid var(--border-strong);border-radius:12px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.85rem}
.panel-form legend{padding:0 .4rem;font-size:.8rem;font-weight:650;letter-spacing:.15rem;text-transform:uppercase;color:var(--muted)}
.panel-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:550;font-size:.85rem}
.panel-form input,
.panel-form select,
.panel-form textarea{background:var(--surface-alt);border:2px solid var(--border);color:var(--text);padding:.65rem .75rem;border-radius:10px;font:inherit}
.panel-form input:focus,
.panel-form select:focus,
.panel-form textarea:focus{outline:2px solid var(--focus-color);outline-offset:2px}
.panel-form .choice{flex-direction:row;align-items:center;gap:.55rem;font-weight:600;font-size:.9rem}
.panel-form .choice input{margin:0}
.panel-form small{font-size:.75rem;line-height:1.35;color:color-mix(in srgb,var(--muted) 78%,var(--text) 22%)}
.form-actions{display:flex;gap:.75rem;margin-top:.25rem}
.form-actions button{flex:0 0 auto}
.filter-form{display:flex;flex-direction:column;gap:1.1rem}
.filter-form .fg{border:2px solid var(--border-strong);border-radius:12px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.65rem}
.filter-form .fg legend{padding:0 .4rem;font-size:.8rem;font-weight:650;letter-spacing:.12rem;text-transform:uppercase;color:var(--muted)}
.filter-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:550;font-size:.9rem}
.filter-form input[type="search"],
.filter-form select,
.filter-form input[type="date"]{background:var(--surface-alt);border:2px solid var(--border);color:var(--text);padding:.6rem .75rem;border-radius:10px;font:inherit}
.filter-form select[multiple]{min-height:8rem}
.filter-form input:focus,
.filter-form select:focus{outline:2px solid var(--focus-color);outline-offset:2px}
.filter-form .inline-checkbox{flex-direction:row;align-items:center;gap:.5rem;margin-top:.35rem;font-weight:550}
.filter-form .choice{flex-direction:row;align-items:center;gap:.5rem;font-weight:550}
.filter-form .choice input,
.filter-form .inline-checkbox input{margin:0}
.panel-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}
.panel-actions .primary{background:color-mix(in srgb,var(--primary) 32%, var(--surface));border-color:color-mix(in srgb,var(--primary) 65%, var(--border));}
/* Transitions for panels */
/* Remove entrance animation in flat style to reduce motion & keep immediacy */
.panel{animation:none}
@media (max-width:800px){.panel{margin:0}.media-player{top:54px}.fc-header{flex-wrap:wrap;gap:.5rem}.panel-body.list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:1rem .9rem 4.5rem}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
/* Forced colors adjustments for Windows High Contrast Mode */
@media (forced-colors:active){:root{--focus-color:Highlight}body{forced-color-adjust:auto}button,.panel,.card,.media-player,.fc-header{border:2px solid ButtonText}.cue-btn{border-color:Highlight}:where(a,button,input,select,textarea,[role=button]):focus-visible{outline:2px solid Highlight;box-shadow:none}}