.sv-stories { margin:0 0 22px; padding:18px 20px 14px; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--sv-radius,12px); color:var(--ink); background:var(--surface); box-shadow:0 5px 18px rgba(24,53,99,.045); }
.sv-stories[hidden],.sv-story-dialog [hidden] { display:none!important; }
.sv-stories > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sv-stories h2 { margin:0 0 3px; font-size:19px; line-height:1.4; }
.sv-stories header p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.sv-stories header > span { flex:0 0 auto; padding:4px 9px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:var(--soft); font-size:10px; }
.sv-stories-tabs { display:flex; gap:18px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.sv-stories-tabs button { padding:0 0 10px; border:0; border-bottom:2px solid transparent; color:var(--muted); background:transparent; font:600 13px/1.5 Inter,Arial,sans-serif; cursor:pointer; }
.sv-stories-tabs button.active { color:var(--ink); border-bottom-color:#f04a9c; }
.sv-stories-strip { display:flex; align-items:start; gap:20px; overflow-x:auto; padding:2px 1px 5px; scrollbar-width:thin; }
.sv-story-add,.sv-story-person { display:flex; align-items:center; flex-direction:column; gap:8px; flex:0 0 88px; width:88px; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.sv-story-add > span { display:grid; place-items:center; width:76px; height:76px; border:2px dashed #a6bddb; border-radius:50%; color:#0874f7; background:var(--soft); }
.sv-story-add .sv-icon { width:29px; height:29px; }
.sv-story-add strong,.sv-story-person strong { width:100%; overflow:hidden; color:inherit; font:600 11px/1.5 Inter,Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.sv-stories-people { display:flex; align-items:start; gap:17px; min-width:0; }
.sv-story-ring { display:grid; place-items:center; width:76px; height:76px; padding:3px; border-radius:50%; background:linear-gradient(35deg,#ffcc47,#ff7b44 25%,#ff2da6 65%,#a340e7); }
.sv-story-ring img { display:block; width:68px; height:68px; border:3px solid var(--surface); border-radius:50%; object-fit:cover; }
.sv-story-avatar-fallback { display:grid; place-items:center; width:68px; height:68px; border:3px solid var(--surface); border-radius:50%; background:#253759; color:#fff; font-size:25px; font-weight:600; }
.sv-story-person.is-seen .sv-story-ring { background:#a1b1c6; }
.sv-story-demo { padding:1px 5px; border-radius:4px; color:#8b4fbb; background:#f0e7fc; font:700 8px/1.5 Inter,Arial,sans-serif; letter-spacing:.4px; }
.sv-stories-empty,.sv-stories-people > p { width:270px; max-width:65vw; margin:17px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.sv-stories-status { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.sv-stories-status:empty { display:none; }
.sv-stories button:focus-visible,.sv-story-dialog :is(button,a,input,textarea,summary):focus-visible { outline:2px solid #83b5f4; outline-offset:3px; }
.sv-story-dialog { width:min(640px,calc(100% - 24px)); max-height:92dvh; margin:auto; padding:0; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:var(--surface); box-shadow:0 25px 90px rgba(6,19,42,.4); font-family:Inter,Arial,sans-serif; }
.sv-story-dialog * { box-sizing:border-box; }
.sv-story-dialog::backdrop { background:rgba(6,16,33,.83); backdrop-filter:blur(6px); }
.sv-story-compose form { padding:24px; }
.sv-story-compose header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sv-story-compose header small { display:block; margin-bottom:5px; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:1px; }
.sv-story-compose h2 { margin:0; font-size:24px; line-height:1.4; }
.sv-story-compose header button { flex:0 0 34px; width:34px; height:34px; border:0; border-radius:7px; color:var(--muted); background:var(--soft); font-size:24px; cursor:pointer; }
.sv-story-intro { margin:16px 0 20px; color:var(--muted); font-size:13px; line-height:1.7; }
.sv-story-media-options { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 10px; }
.sv-story-media-options button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--soft); font-size:12px; cursor:pointer; }
.sv-story-media-options button .sv-icon { width:17px; height:17px; }
.sv-story-media-options button.active { color:#fff; border-color:#0874f7; background:#0874f7; }
.sv-story-image-help { margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--soft); font-size:12px; line-height:1.7; }
.sv-story-author-picker { margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.sv-story-author-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sv-story-author-heading strong { font-size:13px; }
.sv-story-author-heading > small { padding:3px 6px; border:1px solid var(--line); border-radius:5px; color:var(--blue); font-size:9px; }
.sv-story-author-picker > p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.65; }
.sv-story-author-picker .sv-story-author-status { font-size:10px; }
.sv-story-author-picker label { margin-top:12px; }
.sv-story-author-results { display:grid; gap:5px; max-height:190px; margin-top:10px; overflow-y:auto; }
.sv-story-author-results button { display:flex; align-items:center; gap:9px; width:100%; padding:8px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); text-align:left; cursor:pointer; }
.sv-story-author-results img { flex:0 0 32px; width:32px; height:32px; border-radius:50%; object-fit:cover; }
.sv-story-author-results button > span { min-width:0; overflow-wrap:anywhere; }
.sv-story-author-results strong { display:block; font-size:12px; line-height:1.5; }
.sv-story-author-results small { display:block; color:var(--muted); font-size:10px; line-height:1.6; }
.sv-story-author-selected { display:flex; align-items:center; justify-content:space-between; gap:9px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.sv-story-author-selected > span { min-width:0; color:var(--ink); font-size:12px; font-weight:600; line-height:1.65; overflow-wrap:anywhere; }
.sv-story-author-selected button { padding:5px 7px; border:1px solid var(--line); border-radius:5px; color:var(--blue); background:var(--surface); font-size:10px; cursor:pointer; }
.sv-story-author-note { display:block; margin-top:10px; color:var(--muted); font-size:10px; line-height:1.7; }
.sv-story-compose label { display:grid; gap:7px; margin-top:16px; color:var(--ink); font-size:13px; font-weight:600; }
.sv-story-compose label > small { color:var(--muted); font-size:10px; font-weight:400; }
.sv-story-compose :is(input,textarea) { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--soft); font:14px/1.6 Inter,Arial,sans-serif; }
.sv-story-compose textarea { resize:vertical; min-height:70px; max-height:160px; }
.sv-story-check { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; padding:8px 11px; border:1px solid var(--line); border-radius:7px; color:var(--blue); background:var(--soft); font-size:12px; cursor:pointer; }
.sv-story-check .sv-icon { width:15px; height:15px; }
.sv-story-compose-preview { margin-top:14px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#101a2a; text-align:center; }
.sv-story-compose-preview :is(img,video) { display:block; max-width:100%; max-height:300px; margin:auto; object-fit:contain; }
.sv-story-compose-preview iframe { display:block; width:100%; height:300px; border:0; }
.sv-story-help { margin-top:18px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.sv-story-help summary { padding:12px; color:var(--ink); background:var(--soft); font-size:13px; font-weight:650; cursor:pointer; }
.sv-story-help > div { padding:1px 14px 13px; }
.sv-story-help h3 { margin:14px 0 4px; font-size:13px; line-height:1.5; }
.sv-story-help p { margin:0 0 8px; color:var(--muted); font-size:12px; line-height:1.7; }
.sv-story-help code { display:block; max-width:100%; padding:5px 7px; border-radius:5px; background:var(--soft); color:var(--blue); font-size:11px; overflow-wrap:anywhere; }
.sv-story-help .sv-story-help-note { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); font-size:11px; }
.sv-story-form-feedback { margin:13px 0 0; color:var(--blue); font-size:12px; line-height:1.6; }
.sv-story-compose footer { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.sv-story-compose footer button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:39px; padding:9px 12px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface); font-size:12px; cursor:pointer; }
.sv-story-compose footer button.primary { color:#fff; border-color:#0874f7; background:#0874f7; }
.sv-story-compose footer .sv-icon { width:15px; height:15px; }
.sv-story-compose button:disabled { opacity:.55; cursor:wait; }
.sv-story-viewer { width:min(450px,calc(100% - 24px)); height:min(800px,92dvh); max-height:92dvh; overflow:hidden; color:#fff; background:#0a1020; border-color:#30415d; }
.sv-story-viewer[open] { display:flex; flex-direction:column; }
.sv-story-progress { display:flex; flex:0 0 4px; gap:4px; margin:10px 12px 0; }
.sv-story-progress > span { display:block; flex:1; height:3px; border-radius:3px; background:#4c5363; overflow:hidden; }
.sv-story-progress i { display:block; height:100%; background:#fff; }
.sv-story-viewer header { display:flex; align-items:center; gap:9px; flex:0 0 auto; min-height:65px; padding:11px 12px; }
.sv-story-viewer header > img { flex:0 0 35px; width:35px; height:35px; border:1px solid #526381; border-radius:50%; object-fit:cover; }
.sv-story-viewer header > div { flex:1; min-width:0; }
.sv-story-viewer header a { display:block; overflow:hidden; color:#fff; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; }
.sv-story-viewer header small { display:block; margin-top:3px; color:#bac6d9; font-size:10px; }
.sv-story-viewer header button { display:grid; place-items:center; flex:0 0 27px; width:27px; height:30px; padding:4px; border:0; border-radius:5px; color:#fff; background:transparent; font-size:23px; cursor:pointer; }
.sv-story-viewer header .sv-icon { width:16px; height:16px; }
.sv-story-viewer header button:disabled { opacity:.3; cursor:default; }
.sv-story-stage { display:flex; align-items:center; justify-content:center; flex:1; min-height:0; width:100%; background:#080c15; }
.sv-story-stage :is(img,video) { display:block; width:100%; max-width:100%; height:100%; max-height:100%; object-fit:contain; }
.sv-story-stage iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.sv-story-stage > p { max-width:85%; margin:0; padding:18px; color:#c3d0e2; font-size:14px; line-height:1.7; text-align:center; }
.sv-story-viewer > :is(.sv-story-prev,.sv-story-next) { position:absolute; z-index:2; top:48%; display:grid; place-items:center; width:30px; height:43px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:7px; color:#fff; background:rgba(8,16,28,.5); font-size:32px; cursor:pointer; }
.sv-story-prev { left:9px; }.sv-story-next { right:9px; }
.sv-story-viewer footer { display:flex; flex-direction:column; flex:0 0 auto; gap:7px; padding:14px 15px; max-height:225px; overflow-y:auto; background:linear-gradient(#0b1221,#121d30); }
.sv-story-viewer footer p { margin:0; color:#fff; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.sv-story-viewer footer a { align-self:flex-start; color:#94c5ff; font-size:11px; font-weight:600; text-decoration:none; }
.sv-story-viewer footer small { color:#a5b5cf; font-size:9px; line-height:1.6; }
.sv-story-reactions { display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 0; }
.sv-story-reaction-buttons { display:flex;gap:7px; }
.sv-story-reaction-buttons button { display:flex;align-items:center;gap:5px;min-width:48px;min-height:36px;padding:5px 8px;border:1px solid #384763;border-radius:18px;color:#fff;background:#1c2940;font-size:21px;cursor:pointer; }
.sv-story-reaction-buttons button small { color:#c4d3ea;font-size:11px; }
.sv-story-reaction-buttons button.selected { border-color:#fb72af;background:#463046;box-shadow:0 0 0 1px #fb72af; }
.sv-story-reaction-buttons button:disabled { opacity:.55;cursor:default; }
.sv-story-reaction-members-button { min-height:34px;padding:7px 9px;border:1px solid #384763;border-radius:7px;color:#c8ddfa;background:#1c2940;font-size:11px;cursor:pointer; }
.sv-story-viewer .sv-story-reaction-status { flex-basis:100%;margin:0;color:#b9c9df;font-size:10px;line-height:1.5; }
.sv-story-reaction-drawer { position:absolute;z-index:5;inset:80px 12px 155px;display:flex;flex-direction:column;padding:14px;border:1px solid #465b79;border-radius:12px;background:#142136;color:#fff;box-shadow:0 12px 50px #0009;overflow:hidden; }
.sv-story-reaction-drawer-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px; }.sv-story-reaction-drawer-head strong { font-size:14px; }.sv-story-reaction-drawer-head button { width:30px;height:30px;border:0;border-radius:5px;color:#fff;background:#263954;font-size:23px;cursor:pointer; }
.sv-story-reaction-people { flex:1;min-height:0;overflow-y:auto; }
.sv-story-reaction-person { display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #32435d; }.sv-story-reaction-person img { width:32px;height:32px;flex:0 0 32px;object-fit:cover;border-radius:50%; }.sv-story-reaction-person :is(a,span):not(.sv-story-reaction-emoji) { flex:1;min-width:0;color:#edf4ff;font-size:12px;text-decoration:none;overflow-wrap:anywhere; }.sv-story-reaction-emoji { margin-left:auto;font-size:24px; }
.sv-story-reaction-drawer > p { margin:10px 0 0;color:#b8c9e2;font-size:10px;line-height:1.6; }.sv-story-reaction-drawer > button { margin-top:10px;padding:8px;border:1px solid #425979;border-radius:6px;color:#fff;background:#263954;font-size:12px;cursor:pointer; }
.sv-stories-viewing { overflow:hidden; }
@media(max-width:680px) {
 .sv-stories { padding:15px 13px 12px; margin-bottom:17px; }.sv-stories h2 { font-size:17px; }.sv-stories header p { font-size:11px; }.sv-stories-strip { gap:13px; }.sv-stories-people { gap:11px; }
 .sv-story-add,.sv-story-person { flex-basis:76px; width:76px; }.sv-story-ring,.sv-story-add > span { width:67px; height:67px; }.sv-story-ring img,.sv-story-avatar-fallback { width:59px; height:59px; }.sv-story-add strong,.sv-story-person strong { font-size:10px; }
 .sv-story-compose form { padding:18px; }.sv-story-compose h2 { font-size:21px; }.sv-story-compose :is(input,textarea) { font-size:16px; }.sv-story-intro { font-size:12px; }.sv-story-compose footer { flex-wrap:wrap; }
 .sv-story-viewer { width:100%; max-width:100%; height:100dvh; max-height:100dvh; border-radius:0; border:0; }.sv-story-dialog:not(.sv-story-viewer) { max-height:94dvh; }
}