.ox-connect, .ox-link-row { --ox-bg:#0c191c; --ox-surface:#172b2e; --ox-text:#edf4f1; --ox-muted:#adbfbc; --ox-accent:#a4d4c1; --ox-ink:#14332c; --ox-border:#a4d4c12e; }
:is([data-theme="light"], [data-tg-theme="light"]) :is(.ox-connect,.ox-link-row) { --ox-bg:#d4e0d5; --ox-surface:#c5d6c9; --ox-text:#203b30; --ox-muted:#486354; --ox-accent:#356b53; --ox-ink:#f3f8f2; --ox-border:#78988766; }
.ox-connect { box-sizing:border-box; width:min(540px,calc(100% - 32px)); max-height:90dvh; padding:24px; border:1px solid var(--ox-border); border-radius:28px; background:var(--ox-bg); color:var(--ox-text); font:15px/1.55 Inter,system-ui,sans-serif; box-shadow:0 24px 90px #0006; }
.ox-connect::backdrop { background:#061013bb; }
.ox-connect * { box-sizing:border-box; }
.ox-connect header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ox-connect header div { flex:1; min-width:0; }
.ox-connect header strong { display:block; font-size:17px; }
.ox-connect header small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ox-muted); }
.ox-connect button { font:inherit; cursor:pointer; color:inherit; border:1px solid var(--ox-border); border-radius:16px; background:var(--ox-surface); min-height:46px; padding:10px 16px; }
.ox-connect header button { padding:0; width:42px; min-height:42px; font-size:26px; }
.ox-connect h2 { font:600 25px/1.2 Inter,system-ui,sans-serif; letter-spacing:-.6px; color:var(--ox-text); margin:24px 0 12px; }
.ox-connect p { color:var(--ox-muted); margin:0 0 20px; font-size:15px; line-height:1.6; }
.ox-connect main:focus { outline:none; }
.ox-progress { display:flex; gap:6px; }
.ox-progress i { height:3px; flex:1; border-radius:4px; background:var(--ox-border); }
.ox-progress i.active { background:var(--ox-accent); }
.ox-connect .ox-choice { width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:16px; margin:10px 0; }
.ox-choice > span:nth-child(2) { flex:1; min-width:0; }
.ox-choice strong,.ox-choice small { display:block; }
.ox-choice small { color:var(--ox-muted); margin-top:4px; font-size:13px; }
.ox-choice-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--ox-border); color:var(--ox-accent); font-size:22px; font-weight:700; flex-shrink:0; }
.ox-choice em { font-style:normal; font-size:10px; padding:3px 6px; border-radius:6px; color:var(--ox-ink); background:var(--ox-accent); }
.ox-choice em.ox-top-badge { color:#000; background:#b3ef36; font-size:12px; font-weight:800; }
.ox-connect .ox-primary,.ox-connect .ox-secondary { display:grid; place-items:center; width:100%; min-height:46px; margin-top:14px; padding:10px 16px; border:1px solid var(--ox-border); border-radius:16px; font-weight:600; text-align:center; text-decoration:none; }
.ox-connect [data-ox-download] { display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; border-radius:28px; }
.ox-connect [data-ox-download] svg { flex-shrink:0; }
.ox-connect [data-ox-client] { transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
@media (prefers-reduced-motion:reduce) { .ox-connect [data-ox-client] { transition:none; } }
.ox-connect .ox-primary { background:var(--ox-accent); color:var(--ox-ink); border-color:transparent; }
.ox-connect .ox-platforms { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.ox-platforms button { flex:1 0 auto; font-size:12px; padding:8px 11px; min-height:38px; }
.ox-connect .ox-platforms { flex-wrap:nowrap; gap:2px; padding:4px; border-radius:28px; background:var(--ox-surface); }
.ox-connect .ox-platforms button { flex:1 1 0; min-width:0; border:0; padding:8px 2px; border-radius:22px; font-size:12px; font-weight:600; }
.ox-choice-icon img { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.ox-connect .ox-choice[aria-pressed="true"] { background:color-mix(in srgb,var(--ox-accent) 12%,var(--ox-bg)); }
.ox-connect [aria-pressed="true"] { border-color:var(--ox-accent); box-shadow:inset 0 0 0 1px var(--ox-accent); }
.ox-connect .ox-platforms [aria-pressed="true"] { background:var(--ox-accent); color:var(--ox-ink); }
.ox-link-row { position:relative; display:flex; align-items:center; gap:5px; min-width:0; padding:8px; margin:12px 0 24px; border:1px solid var(--ox-border); border-radius:16px; background:var(--ox-surface); color:var(--ox-text); }
.ox-link-row input { min-width:0; width:100%; flex:1; border:0!important; background:transparent!important; color:var(--ox-text)!important; font:12px/1.4 monospace; padding:6px!important; text-overflow:ellipsis; box-shadow:none!important; }
.ox-link-row button { flex-shrink:0; min-width:38px; height:40px; min-height:40px; padding:6px; border:1px solid var(--ox-border); border-radius:11px; background:var(--ox-bg); color:var(--ox-text); cursor:pointer; }
.ox-copy-message { position:absolute; top:100%; left:8px; font-size:11px; color:var(--ox-muted); }
.ox-qr-panel { text-align:center; margin:20px 0; }
.ox-qr-panel img { max-width:100%; height:auto; background:#fff; padding:12px; border-radius:18px; }
.ox-qr-panel p { font-size:13px; margin-top:12px; }
.ox-link-row [data-ox-copy] { display:grid;place-items:center; width:44px; height:44px; background:color-mix(in srgb,var(--ox-accent) 20%,var(--ox-bg)); border-color:var(--ox-accent); }
.ox-connect .ox-subscription-done { background:color-mix(in srgb,#7fd6aa 25%,var(--ox-surface));border-color:#7fd6aa;color:var(--ox-text); }
.ox-done-scene { position:relative; margin:24px 0; height:180px; overflow:hidden; border-radius:20px; }
.ox-done-scene img { width:100%; height:100%; object-fit:cover; object-position:70% 45%; filter:brightness(.7); }
.ox-done-scene span { position:absolute; bottom:16px; left:20px; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ox-accent); color:var(--ox-ink); font-size:26px; }
.ox-note { background:var(--ox-surface); border-radius:16px; padding:16px; margin:12px 0; }
.ox-note p { font-size:13px; margin:6px 0 0; }
.ox-finish { text-align:center; padding-top:8px; }
.ox-finish h2 { margin-top:4px; }
.ox-connected-art { display:block; width:min(100%,320px); height:auto; margin:0 auto; mask-image:radial-gradient(ellipse 58% 60% at 50% 46%,#000 55%,transparent 95%); }
.ox-finish .ox-note { text-align:left; padding:22px; margin:24px 0; }
.ox-finish hr { border:0; border-top:1px solid var(--ox-border); margin:18px 0; }
.ox-connect :is(button,input):focus-visible,.ox-link-row :is(button,input):focus-visible { outline:2px solid var(--ox-accent); outline-offset:3px; }
html .mini-forest .mini-forest-scene { height:155px; min-height:155px; }
html .mini-forest .mini-forest-actions { display:grid; grid-template-columns:1fr 1fr 44px; gap:8px; }
html .mini-forest .mini-forest-actions > :only-child { grid-column:1 / -1; }
html .mini-forest .mini-forest-key { padding-bottom:0; }
html .mini-forest .ox-link-row { margin-bottom:22px; }
.cab-key-summary-actions { flex-wrap:wrap; }
.cab-key-tile > .ox-link-row { margin:12px 0 16px; }
@media(max-width:600px) { .ox-connect { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; padding:20px 18px max(28px,env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion:no-preference) { .ox-connect main { animation:ox-step-in .22s ease-out; } @keyframes ox-step-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } }