.context-picker { --ctx-bg:#1d2224; --ctx-raised:#272d2f; --ctx-line:#3c4548; --ctx-ink:#f0f0e6; --ctx-muted:#b1bbbb; color-scheme:dark; width:min(1160px,94vw); height:min(800px,90dvh); max-height:90dvh; padding:0; border:1px solid #657175; border-radius:22px; background:var(--ctx-bg); color:var(--ctx-ink); box-shadow:0 28px 100px #0009; font:16px/1.45 Figtree,system-ui,sans-serif; overflow:hidden; }
.context-picker[open] { display:flex; flex-direction:column; }
.context-picker::backdrop { background:#101719b8; backdrop-filter:blur(4px); }
.context-picker *, .context-picker *::before, .context-picker *::after { box-sizing:border-box; }
.context-picker button, .context-picker input, .context-picker textarea { font:inherit; color:inherit; }
.context-picker button { min-height:44px; border:0; cursor:pointer; background:transparent; border-radius:10px; }
.context-picker button:hover { background:#ffffff0a; }
.context-picker button:focus-visible, .context-picker input:focus-visible, .context-picker textarea:focus-visible { outline:2px solid #94bdcf; outline-offset:2px; }
.context-picker button:disabled { cursor:default; opacity:.5; }
.context-picker-header { display:flex; align-items:center; gap:13px; padding:20px 26px; border-bottom:1px solid var(--ctx-line); }
.context-picker-header img { object-fit:contain; }
.context-picker h2 { margin:0; font-size:25px; letter-spacing:-.5px; font-weight:600; }
.context-picker-close { margin-left:auto; width:44px; font-size:29px!important; }
.context-picker-body { flex:1; display:grid; grid-template-columns:172px minmax(260px,.85fr) minmax(310px,1.15fr); min-height:0; }
.context-picker-filters { display:flex; flex-direction:column; gap:6px; padding:20px 12px; border-right:1px solid var(--ctx-line); overflow:auto; }
.context-picker-filters button { text-align:left; padding:9px 12px; color:var(--ctx-muted); flex-shrink:0; }
.context-picker-filters button[aria-pressed=true] { background:#94bdcf20; color:var(--ctx-ink); }
.context-picker-filters .context-picker-web { font-size:14px; border-top:1px solid var(--ctx-line); border-radius:0; margin-top:18px; padding-top:18px; }
.context-picker-sources { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--ctx-line); }
.context-picker-sources input { background:var(--ctx-raised); border:1px solid var(--ctx-line); border-radius:12px; margin:20px 16px 12px; padding:12px 14px; min-width:0; width:calc(100% - 32px); }
.context-picker input::placeholder { color:var(--ctx-muted); }
.context-picker-list { overflow:auto; padding:0 12px 16px; overscroll-behavior:contain; }
.context-picker-row { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--ctx-line); padding:12px 0; }
.context-picker-row.is-active { background:#94bdcf0d; }
.context-picker-open { flex:1; display:flex; align-items:center; gap:13px; text-align:left; min-width:0; padding:6px; }
.context-picker-thumb { display:flex; align-items:center; justify-content:center; flex:0 0 52px; width:52px; height:62px; background:var(--ctx-raised); border-radius:5px; overflow:hidden; font-size:27px; color:var(--ctx-muted); }
.context-picker-thumb img { width:100%; height:100%; object-fit:cover; }
.context-picker-thumb.is-sticky { background:#d9c477; color:#544922; transform:rotate(-4deg); height:48px; }
.context-picker-row-copy { display:flex; flex-direction:column; min-width:0; gap:6px; }
.context-picker-row-copy strong { font-size:15px; font-weight:550; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.context-picker-row-copy small { color:var(--ctx-muted); font-size:12px; }
.context-picker-check { width:38px; flex-shrink:0; font-size:22px!important; color:var(--ctx-muted)!important; }
.context-picker-check[aria-pressed=true] { color:#c4dde5!important; }
.context-picker-preview { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; }
.context-picker-preview-body { display:flex; flex-direction:column; padding:26px; min-height:100%; }
.context-picker h3 { font:600 25px/1.25 'EB Garamond',Georgia,serif; margin:0 0 10px; }
.context-picker-detail, .context-picker-empty { color:var(--ctx-muted); margin:0 0 18px; font-size:14px; }
.context-picker-empty { line-height:1.6; }
.context-picker-list>.context-picker-empty { padding:24px 10px; }
.context-picker-modes { display:flex; padding:4px; gap:4px; background:var(--ctx-raised); border-radius:12px; margin-bottom:18px; }
.context-picker-modes button { flex:1; padding:7px 10px; font-size:13px; color:var(--ctx-muted); }
.context-picker-modes button[aria-pressed=true] { background:#485257; color:var(--ctx-ink); }
.context-picker-text { flex:1; min-height:260px; width:100%; resize:none; padding:0 6px 16px 0; background:transparent; border:0; line-height:1.65!important; font-size:16px!important; margin:0 0 14px; }
.context-picker-photo { width:100%; max-height:360px; object-fit:contain; margin-bottom:20px; border-radius:6px; }
.context-picker-use { border:1px solid #7c949d!important; padding:10px 16px; align-self:flex-start; }
.context-picker-footer { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding:16px 24px; border-top:1px solid var(--ctx-line); background:var(--ctx-bg); }
.context-picker-footer>div { display:flex; flex:1; flex-direction:column; gap:3px; }
.context-picker-footer strong { font-size:16px; font-weight:550; }
.context-picker-footer small { color:var(--ctx-muted); font-size:12px; }
.context-picker-hint { flex-basis:100%; margin:0; color:#eed49d; font-size:14px; }
.context-picker-hint:empty { display:none; }
.context-picker-plans { padding:8px 12px; border:1px solid var(--ctx-line)!important; }
.context-picker-plans[hidden] { display:none; }
.context-picker-done { background:#eeedde!important; color:#1d2224!important; padding:11px 24px; font-weight:650!important; }
.context-picker-clear { color:var(--ctx-muted)!important; font-size:13px!important; }
.context-picker-back { display:none; }
@media(max-width:850px) {
 .context-picker { width:min(620px,100vw); max-width:100vw; height:92dvh; max-height:92dvh; border-radius:24px 24px 0 0; margin:auto auto 0; }
 .context-picker-header { padding:16px 20px; }
 .context-picker h2 { font-size:23px; }
 .context-picker-body { display:flex; flex-direction:column; }
 .context-picker-filters { flex-direction:row; border-right:0; padding:12px 16px; gap:7px; min-height:68px; }
 .context-picker-filters button { white-space:nowrap; padding:8px 14px; background:var(--ctx-raised); border-radius:24px; }
 .context-picker-filters .context-picker-web { border:0; margin:0; padding:8px 14px; }
 .context-picker-sources { flex:1; border-right:0; }
 .context-picker-sources input { margin-top:4px; }
 .context-picker-preview { display:none; flex:1; }
 .context-picker.is-previewing .context-picker-preview { display:flex; flex-direction:column; }
 .context-picker.is-previewing .context-picker-sources,.context-picker.is-previewing .context-picker-filters { display:none; }
 .context-picker-back { display:block; text-align:left; margin:12px 18px 0; flex-shrink:0; }
 .context-picker-preview-body { min-height:0; flex:1; padding:16px 22px; }
 .context-picker-text { min-height:180px; }
 .context-picker-row-copy strong { font-size:17px; }
 .context-picker-row-copy small { font-size:13px; }
 .context-picker-row { padding:13px 2px; }
 .context-picker-footer { gap:8px; padding:15px 18px max(18px,env(safe-area-inset-bottom)); }
 .context-picker-footer small { max-width:220px; }
 .context-picker-clear { display:none; }
 .context-picker-done { padding:10px 18px; }
}