.svg-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.share-dialog svg,.share-trigger svg,.guest-screen svg { width:20px; height:20px; flex-shrink:0; }
.avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--soft); color:var(--muted); font-size:14px; flex-shrink:0; }
.user-info { min-width:0; }
.user-info strong { font-size:14px; font-weight:500; display:block; }
.user-info small { display:block; margin-top:7px; font-size:12px; color:var(--muted); }
.share-trigger { min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; border:1px solid #d6dce2; background:#fff; color:var(--muted); border-radius:8px; font-size:12px; }
.share-trigger svg { width:16px; height:16px; }
.share-trigger .dot { width:5px; height:5px; background:#9ba3ad; margin-left:1px; }
.share-trigger.is-active { color:var(--success); background:#f3f9f5; border-color:#cbe0d1; }
.share-trigger.is-active .dot { background:var(--success); }
.share-trigger:hover { border-color:#a4b0b9; background:var(--soft); }
.share-trigger.is-active:hover { border-color:#8cb59b; background:var(--success-wash); }
.user-actions .secondary-button { padding-inline:14px; min-width:93px; font-size:12px; }
.share-dialog { overflow:hidden; width:min(620px,calc(100vw - 40px)); max-height:calc(100svh - 40px); margin:auto; padding:0; border:1px solid #e6e8eb; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 28px 100px #1118272b; }
.share-dialog::backdrop { background:#20293647; backdrop-filter:blur(3px); }
.share-dialog>form { display:flex; flex-direction:column; max-height:calc(100svh - 42px); min-height:0; }
.share-heading,.share-description,.share-actions { flex-shrink:0; }
.share-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:26px 28px 0; }
.share-heading .eyebrow { font-size:10px; margin:0 0 9px; color:var(--accent-ink); letter-spacing:1px; text-transform:uppercase; }
.share-heading h2 { font-size:26px; line-height:1.3; letter-spacing:-.7px; margin:0; }
.share-heading .icon-button { margin:-7px -10px 0 0; }
.share-description { margin:10px 28px 21px; color:var(--muted); font-size:12px; line-height:1.65; }
.share-content { padding:0 22px 23px 28px; margin-right:6px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#c4cbd2 transparent; }
.share-content::-webkit-scrollbar { width:6px; }
.share-content::-webkit-scrollbar-track { background:transparent; }
.share-content::-webkit-scrollbar-thumb { background:#c4cbd2; border-radius:8px; }
.share-content::-webkit-scrollbar-thumb:hover { background:#9ca7b2; }
.share-account { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:11px; background:#f9fafb; }
.share-account .avatar { width:38px; height:38px; border-radius:10px; background:#fff; }
.share-account .user-info strong { font-size:13px; }
.share-account .user-info small { font-size:11px; margin-top:5px; }
.share-build-label { font-size:11px; color:var(--muted); margin-left:auto; border:1px solid var(--line); border-radius:5px; padding:4px 7px; background:#fff; }
.settings-section { padding-top:23px; }
.section-label { display:flex; align-items:flex-start; gap:10px; }
.setting-icon { display:grid; place-items:center; color:var(--muted); width:21px; height:21px; }
.setting-icon svg { width:18px; height:18px; }
.section-label h3 { margin:0; font-weight:500; font-size:13px; line-height:1.5; }
.section-label p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.duration-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:4px; border:1px solid var(--line); border-radius:9px; margin-top:13px; background:#f6f8f9; }
.duration-options button { min-height:35px; padding:7px 3px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font-size:12px; }
.duration-options button:hover { background:#fff; }
.duration-options button[aria-pressed="true"] { background:#fff; border-color:#d9dfe5; color:var(--ink); box-shadow:0 1px 3px #252c3510; font-weight:500; }
.deadline-line { display:flex; align-items:center; gap:7px; margin:10px 1px 0; font-size:11px; line-height:1.6; color:var(--muted); }
.deadline-line .dot { width:4px; height:4px; background:var(--accent); }
.custom-deadline { margin-top:13px; }
.custom-deadline label { display:block; color:var(--muted); font-size:11px; margin-bottom:7px; }
.custom-deadline input { width:100%; min-height:42px; border:1px solid #cbd2da; border-radius:7px; padding:8px 10px; color:var(--ink); background:#fff; }
.password-section { margin-top:19px; padding-top:21px; border-top:1px solid var(--line); }
.password-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.toggle { -webkit-appearance:none; appearance:none; width:35px; height:21px; padding:0; margin:0; flex-shrink:0; background:#c5cbd2; border:1px solid transparent; border-radius:30px; cursor:pointer; position:relative; transition:background .15s; }
.toggle:before { content:""; position:absolute; height:15px; width:15px; background:#fff; border-radius:50%; top:2px; left:2px; box-shadow:0 1px 2px #0002; transition:transform .15s; }
.toggle:checked { background:var(--accent); }
.toggle:checked:before { transform:translateX(13px); }
.share-password-block { margin-top:14px; }
.share-password-block>label,.guest-card label { display:block; font-size:11px; font-weight:500; margin-bottom:8px; }
.password-control { display:flex; align-items:center; border:1px solid #cbd2da; background:#fff; border-radius:8px; padding:0 3px 0 11px; min-height:42px; }
.password-control:focus-within { outline:2px solid var(--accent-wash); border-color:var(--accent-ink); }
.password-control input { outline:none; border:0; background:transparent; width:100%; min-width:0; padding:11px 0; font-size:13px; color:var(--ink); }
.password-control .icon-button { min-width:35px; min-height:35px; padding:8px; }
.password-control .icon-button svg { width:16px; height:16px; }
.field-help { color:var(--muted); font-size:10px; line-height:1.65; margin:8px 0 0; }
.without-password-note { font-size:11px; line-height:1.6; color:var(--muted); margin:12px 0 0 31px; }
.permissions-note { display:flex; gap:9px; align-items:flex-start; padding:12px 13px; margin-top:20px; border-radius:8px; background:#fff5f8; color:#8d4155; }
.permissions-note svg { width:17px; height:17px; margin-top:1px; }
.permissions-note p { margin:0; font-size:10px; line-height:1.7; }
.permissions-note strong { font-weight:600; }
.share-actions { background:#fff; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 28px; border-radius:0 0 18px 18px; }
.share-actions .primary-button,.share-actions .secondary-button { min-height:41px; font-size:12px; }
.share-actions .primary-button svg { width:15px; height:15px; }
.share-submit-actions { display:flex; align-items:center; gap:9px; margin-left:auto; }
.share-actions .danger-text { padding:7px 0; font-size:11px; }
.active-link-section { margin-top:20px; padding-bottom:21px; border-bottom:1px solid var(--line); }
.link-status { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; font-size:11px; color:var(--muted); }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:5px; color:var(--success); background:var(--success-wash); font-size:10px; font-weight:500; }
.field-label { display:block; font-size:11px; font-weight:500; margin-bottom:8px; }
.link-control { display:flex; gap:7px; }
.link-control input { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:#f8f9fa; color:#505965; padding:10px; font-family:Inter,sans-serif; font-size:10px; }
.link-control .secondary-button { font-size:11px; padding:9px 11px; min-height:39px; gap:6px; min-width:104px; transition:color .16s ease,background-color .16s ease,border-color .16s ease; }
.link-control .secondary-button svg { width:14px; height:14px; }
.link-control .secondary-button.is-copied { color:var(--success); background:var(--success-wash); border-color:#bdd9c6; }
.link-control .secondary-button.is-copied svg { animation:copy-check-pop .28s cubic-bezier(.2,.9,.25,1.2); }
@keyframes copy-check-pop { from { opacity:.25; transform:scale(.55); } 70% { opacity:1; transform:scale(1.12); } to { opacity:1; transform:scale(1); } }
.preview-guest { margin:7px 0 -4px; padding:4px 0; font-size:10px; min-height:29px; }
.preview-guest svg { width:13px; height:13px; }
.connection-details { margin-top:20px; border-top:1px solid var(--line); }
.connection-details>summary { display:flex; align-items:center; gap:9px; min-height:52px; list-style:none; cursor:pointer; font-size:12px; font-weight:500; padding-top:4px; }
.connection-details>summary::-webkit-details-marker { display:none; }
.connection-count { display:grid; place-items:center; font-size:10px; font-weight:400; min-width:22px; height:20px; background:var(--soft); color:var(--muted); border:1px solid var(--line); border-radius:5px; }
.disclosure-chevron { margin-left:auto; width:17px; height:17px; color:var(--muted); transition:transform .15s; }
.connection-details[open] .disclosure-chevron { transform:rotate(180deg); }
.stats-period { margin:0 0 11px; font-size:10px; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:9px; padding:14px 0; }
.stats-grid>div { padding:0 14px; }
.stats-grid>div+div { border-left:1px solid var(--line); }
.stats-grid strong { font-size:23px; font-weight:500; line-height:1.1; letter-spacing:-.7px; display:block; }
.stats-grid span { display:block; font-size:9px; color:var(--muted); margin-top:8px; line-height:1.5; }
.connection-list { margin-top:9px; }
.connection-row { display:flex; align-items:center; gap:10px; padding:13px 0; }
.connection-row+.connection-row { border-top:1px solid #edf0f2; }
.device-icon { display:grid; place-items:center; width:31px; height:31px; background:var(--soft); border-radius:7px; color:var(--muted); flex-shrink:0; }
.device-icon svg { width:16px; height:16px; }
.connection-row strong { display:block; font-size:11px; font-weight:500; }
.connection-row small { display:block; font-size:9px; color:var(--muted); margin-top:5px; }
.connection-info { min-width:0; flex:1; }
.connection-controls { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.session-disconnect { background:transparent; border:0; border-radius:5px; color:#a62e4a; font-size:10px; padding:6px 7px; min-height:32px; cursor:pointer; }
.session-disconnect:hover { background:#fff1f4; }
.connection-state.revoked { color:var(--muted); }
.connection-row.is-revoked .device-icon { opacity:.55; }
.connection-row.is-revoked strong { color:var(--muted); }
.connection-state { display:inline-flex; align-items:center; gap:5px; color:var(--success); margin-left:auto; font-size:10px; white-space:nowrap; }
.connection-state .dot { width:4px; height:4px; }
.connection-state.inactive { color:var(--muted); }
.stats-note { margin:6px 0 0; color:var(--muted); font-size:9px; line-height:1.7; }
.revoke-confirm { background:#fff4f5; border:1px solid #f2cfd8; border-radius:9px; padding:14px; margin-top:13px; }
.revoke-confirm strong { display:block; font-size:12px; color:#96374f; }
.revoke-confirm p { font-size:11px; color:#8d5b69; line-height:1.6; margin:7px 0 12px; }
.revoke-confirm>div { display:flex; justify-content:flex-end; gap:8px; }
.revoke-confirm button { font-size:11px; min-height:36px; }
.danger-button { background:#a62e4a; color:#fff; padding:9px 12px; border:1px solid #a62e4a; border-radius:8px; cursor:pointer; }
.field-error { margin:9px 0 0; color:#a62e4a; font-size:11px; line-height:1.6; }
.preview-toast { position:fixed; z-index:100; bottom:24px; left:50%; transform:translateX(-50%); background:#323a42; color:#fff; padding:12px 20px; font-size:12px; line-height:1.5; border-radius:9px; box-shadow:0 8px 20px #1113; max-width:calc(100% - 32px); width:max-content; }
.preview-toast.is-error { background:var(--danger); }
.guest-host { margin-left:auto; display:flex; gap:6px; align-items:center; color:var(--muted); font-size:10px; }
.guest-host svg { width:13px; height:13px; }
.guest-screen { width:min(416px,100%); margin:35px auto 22px; text-align:center; }
.guest-lock { display:grid; place-items:center; width:56px; height:56px; color:var(--accent-ink); background:#fcecf1; border:1px solid #f8dae3; border-radius:16px; margin:0 auto 24px; }
.guest-lock svg { width:25px; height:25px; }
.guest-eyebrow { color:var(--muted); font-size:10px; margin-bottom:13px; }
.guest-screen h1 { margin:0; font-size:32px; letter-spacing:-1px; line-height:1.28; }
.guest-description { margin:16px 0 23px; font-size:13px; color:var(--muted); line-height:1.7; }
.guest-card { border:1px solid var(--line); border-radius:14px; background:#fff; padding:23px; text-align:left; box-shadow:0 5px 20px #323f4a03; }
.guest-account { display:flex; align-items:center; gap:11px; padding-bottom:20px; margin-bottom:21px; border-bottom:1px solid var(--line); }
.guest-account .avatar { width:38px; height:38px; border-radius:10px; }
.guest-account .user-info strong { font-size:13px; }
.guest-account .user-info small { font-size:11px; margin-top:5px; }
.guest-account .share-build-label { color:var(--accent-ink); border-color:#f3dce3; background:#fff7f9; }
.guest-card label { font-size:12px; }
.guest-card .password-control { min-height:46px; }
.guest-card .password-control input { font-size:12px; }
.guest-submit { width:100%; margin-top:16px; min-height:45px; font-size:13px; }
.guest-submit svg { width:17px; height:17px; margin-left:auto; }
.guest-submit { justify-content:space-between; }
.guest-deadline { display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.guest-deadline svg { width:13px; height:13px; }
.guest-footnote { margin:21px auto 0; font-size:11px; color:var(--muted); line-height:1.8; }
.guest-footnote strong { font-weight:500; }
.guest-lock.success { background:var(--success-wash); color:var(--success); border-color:#d3e7d9; }
.guest-lock.ended { background:var(--soft); color:var(--muted); border-color:var(--line); }
.back-to-preview { margin:18px auto 0; font-size:12px; }
@media(min-width:1700px) { .preview-shell { width:min(1280px,calc(100% - 120px)); } }
@media(max-width:1100px) { .prototype-hint { display:none; } .prototype-bar { justify-content:center; } }

.share-row-actions { display:flex; align-items:center; gap:14px; padding-right:23px; }
.local-share-row { display:flex; align-items:center; }
.local-share-row>.user-row { flex:1; min-width:0; }
.local-share-row .user-action { min-width:75px; }
.share-trigger { white-space:nowrap; }
.share-feedback { color:var(--success); }
@media(max-width:720px) {
 .share-dialog>form { max-height:calc(100svh - 22px); }
 .share-dialog { width:calc(100vw - 20px); max-height:calc(100svh - 20px); border-radius:14px; }
 .share-heading { padding:22px 20px 0; } .share-heading h2 { font-size:24px; }
 .share-description { margin:10px 20px 17px; font-size:11px; }
 .share-content { padding:0 14px 19px 20px; }
 .share-account { padding:12px; gap:10px; }
 .share-actions { padding:14px 20px; gap:8px; }
 .share-actions .secondary-button,.share-actions .primary-button { font-size:11px; padding:9px 11px; min-height:42px; }
 .share-actions .danger-text { font-size:10px; max-width:65px; text-align:left; justify-content:flex-start; }
 .share-submit-actions { gap:7px; }
 .duration-options { gap:2px; }
 .duration-options button { font-size:11px; min-height:37px; }
 .stats-grid>div { padding:0 10px; }
 .stats-grid span { font-size:8px; }
 .connection-row { gap:7px; }
 .connection-row small { font-size:9px; line-height:1.6; }
 .connection-row .device-icon { display:none; }
 .connection-controls { max-width:95px; }
 .session-disconnect { min-height:36px; }
 .connection-details>summary { font-size:11px; gap:7px; }
 .link-control .secondary-button>span { display:none; }
 .link-control .secondary-button { min-width:40px; }
 .local-share-row { flex-wrap:wrap; }
 .local-share-row>.user-row { flex-basis:100%; }
 .share-row-actions { width:100%; padding:0 18px 16px 76px; }
 .share-row-actions .share-trigger { width:100%; }
 .guest-host { font-size:8px; gap:4px; }
 .guest-host svg { width:11px; }
 .guest-screen { margin-top:26px; }
 .guest-screen h1 { font-size:29px; }
 .guest-card { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .disclosure-chevron,.link-control .secondary-button { transition:none; } .link-control .secondary-button.is-copied svg { animation:none; } }