.connection{padding:10px 12px;margin-bottom:12px;border-radius:8px;background:#e6f2ff;color:#004f9e;font-size:9px;font-weight:700}
.connection.error{background:#fae8e6;color:#9b2018}
.connection.ok{background:#e8f8e6;color:#218f28}
.stories #storyList{display:flex;gap:22px}
.stories #storyList button{min-width:62px}
.postMedia{height:250px;background:#eef5f6;display:grid;place-items:center;overflow:hidden}
.postMedia img,.postMedia video{width:100%;height:100%;object-fit:cover}
.postMedia a{color:#006fd6;font-weight:700}
.comments{border-top:1px solid var(--line);padding:8px 14px}
.comments p{font-size:9px;margin:5px 0}
.comments p b{color:#004f9e}
.emptyFeed{background:white;border:1px dashed var(--line);border-radius:12px;padding:45px;text-align:center;color:var(--muted);font-size:10px}
.modal form label{display:grid;gap:4px;font-size:9px;font-weight:700;margin-top:8px}
.modal form input,.modal form select,.modal form textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;font:inherit}
.modal form .upload{display:block;font-weight:400;cursor:pointer}
.modal form .upload input{border:0;padding:8px 0}
.formError{min-height:16px;color:#b42318;font-size:9px}
.submit[disabled]{opacity:.55}
.storyViewer{display:none;position:fixed;inset:0;background:#101719ee;z-index:50;place-items:center;color:white}
.storyViewer.open{display:grid}
.storyViewer>button{position:absolute;right:20px;top:15px;background:none;border:0;color:white;font-size:28px}
.storyViewer #storyMedia{width:min(520px,90vw);height:min(75vh,720px);display:grid;place-items:center}
.storyViewer img,.storyViewer video{max-width:100%;max-height:100%;border-radius:12px}
.storyViewer>p{position:absolute;bottom:20px}
.toast{position:fixed;right:18px;bottom:18px;background:#1f2a2e;color:white;padding:11px 15px;border-radius:8px;z-index:80;font-size:10px}
.welcomeModal{display:none;position:fixed;inset:0;z-index:100;place-items:center;padding:20px;background:rgba(16,23,25,.76);backdrop-filter:blur(7px)}
.welcomeModal.open{display:grid}
.welcomeCard{position:relative;width:min(520px,94vw);padding:34px;border:1px solid rgba(0,111,214,.16);border-radius:18px;background:linear-gradient(145deg,#fff,#f2f8ff);box-shadow:0 30px 80px rgba(16,35,45,.3);text-align:center}
.welcomeClose{position:absolute;top:14px;right:15px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:#fff;font-size:20px;cursor:pointer}
.welcomeIcon{position:relative;display:block;width:68px;height:54px;margin:0 auto 18px}
.welcomeIcon::before,.welcomeIcon::after{content:"";position:absolute;left:18px;width:38px;height:3px;background:#80bfff;transform-origin:left center}
.welcomeIcon::before{top:25px;transform:rotate(-25deg)}
.welcomeIcon::after{top:26px;transform:rotate(25deg)}
.welcomeIcon i{position:absolute;z-index:1;width:22px;height:22px;border:4px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 4px 12px rgba(0,111,214,.25)}
.welcomeIcon i:nth-child(1){left:0;top:17px;background:var(--green)}
.welcomeIcon i:nth-child(2){right:0;top:0}
.welcomeIcon i:nth-child(3){right:0;bottom:0}
.welcomeCard>small{color:var(--blue);font-size:9px;font-weight:900;letter-spacing:1.5px}
.welcomeCard h2{margin:6px 0 10px;font-size:30px;color:var(--ink)}
.welcomeCard>p{max-width:410px;margin:0 auto 20px;color:var(--muted);font-size:12px;line-height:1.55}
.welcomePoints{display:grid;gap:9px;text-align:left}
.welcomePoints>span{display:flex;gap:12px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.welcomePoints>span>b{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#e6f2ff;color:var(--blue);font-size:16px}
.welcomePoints>span>i{display:grid;gap:2px;font-style:normal}
.welcomePoints strong{font-size:11px}
.welcomePoints small{color:var(--muted);font-size:9px;line-height:1.35}
.welcomeStart{width:100%;margin-top:16px;padding:13px;border:0;border-radius:9px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark));font-weight:900;cursor:pointer}
.welcomeCard>label{display:flex;justify-content:center;gap:7px;align-items:center;margin-top:12px;color:var(--muted);font-size:9px}
.storyComposerClose{position:absolute;right:15px;top:12px;border:0;background:none;font-size:22px;cursor:pointer}
.storyUpload{display:grid!important;place-items:center;min-height:90px;padding:18px!important;border:1px dashed #8eb7d9!important;border-radius:10px;background:#f6fbff;color:var(--blue)!important;cursor:pointer}
.storyUpload input{margin-top:10px;background:#fff}
.storyViewer.open{display:flex;flex-direction:column;justify-content:center;padding:55px 20px 24px}
.storyViewer #storyMedia{width:min(520px,90vw);height:min(62vh,620px);flex:0 1 auto}
.storyAuthor{position:absolute;top:18px;left:22px;display:flex;align-items:center;gap:9px}
.storyAuthor>i{width:34px;height:34px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:var(--blue);font-size:9px;font-style:normal;font-weight:900}
.storyAuthor span{display:grid;gap:2px}
.storyAuthor b{font-size:10px}
.storyAuthor small{color:#bfd0d6;font-size:8px}
.storyFooter{width:min(520px,90vw);padding:12px 4px 0}
.storyFooter>p{min-height:18px;margin:0 0 10px;color:#fff;font-size:12px;line-height:1.45;text-align:left}
.storyReactionBar{display:flex;gap:8px}
.storyReactionBar button{flex:1;padding:9px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;background:rgba(255,255,255,.1);cursor:pointer}
.storyReactionBar button.selected{color:#10201b;background:#fff}
.storyViews{margin-top:9px;border:0;color:#c6d5d9;background:transparent;font-size:9px;cursor:pointer}
.storyViewerList{display:none;max-height:150px;margin-top:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.1);overflow:auto}
.storyViewerList.open{display:block}
.storyViewerList>p{display:flex;align-items:center;gap:8px;margin:4px 0;padding:5px}
.storyViewerList>p>i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--blue);font-size:8px;font-style:normal;font-weight:900}
.storyViewerList>p>span{display:grid;gap:2px}
.storyViewerList>p b{font-size:9px}
.storyViewerList>p small{color:#bfd0d6;font-size:8px}