/* Tiny Media prototype visual theme. Keeps the existing app markup and controls. */
body.dark{
  --bg:#101110;
  --paper:#171917;
  --ink:#eeefe9;
  --muted:#8d918b;
  --line:#272a27;
  --purple:#b5e4be;
  --purple-soft:#1a241b;
  --pink:#b5e4be;
  --shadow:0 12px 32px rgba(0,0,0,.18);
}

body{min-width:320px}
.sidebar{width:240px;background:#101110;border-color:#202220;padding:30px 17px 17px}
.brand{color:#eeefe9}
.brand-mark{background:#b5e4be;box-shadow:none}
.brand-mark i{background:#152018}
.main-nav{gap:5px;margin-top:38px}
.nav-item{height:44px;color:#a7aaa4;font-weight:500}
.nav-item:hover,.nav-item.active{background:#1a241b;color:#b5e4be}
.new-post{background:#b5e4be;color:#152018;box-shadow:none;border-radius:10px}
.new-post:hover{background:#d0f1d4;transform:translateY(-1px)}
.sidebar-profile{border-color:#272a27}
.sidebar-profile b{color:#eeefe9}
.sidebar-profile small{color:#8d918b}

.main-content{margin-left:240px;background:#101110}
.topbar{height:82px;background:rgba(16,17,16,.96);border-color:#202220;padding:0 34px;gap:22px}
.tab-heading h1{color:#eeefe9;font-size:20px}
.tab-heading p{color:#777c76}
.search{background:#171917;border-color:#272a27;color:#899189}
.search input{color:#e8ece7}
.search input::placeholder{color:#777d76}
.top-actions .icon-button{background:#171917;border-color:#272a27;color:#a7aaa4}
.top-actions .icon-button:hover{color:#b5e4be;border-color:#55755b}
.top-avatar{box-shadow:0 0 0 1px #303630}

.page-view{padding:28px 34px 60px}
.feed-layout{display:grid;grid-template-columns:minmax(0,650px) minmax(270px,310px);gap:30px;justify-content:center;align-items:start}
.feed-column{display:contents}
.stories-panel{grid-column:2;grid-row:1;background:#171917;border-color:#272a27;border-radius:13px;box-shadow:none;padding:15px 14px}
.section-title h2,.rail-title h3{color:#e8ece7}
.section-title span{color:#8d918b}
.section-title>button{color:#152018;background:#b5e4be;border-radius:8px}
.stories{gap:12px}
.story small{color:#a4a9a2}
.story-ring{background:linear-gradient(135deg,#b5e4be,#60846a)}
.story-ring.own{background:#202820}
.feed-tabs{grid-column:1;grid-row:1;border-bottom:1px solid #272a27;margin:0 0 14px;height:51px}
.feed-tabs button{color:#858b83}
.feed-tabs button.selected{color:#d8e6d9}
.feed-tabs button.selected:after{background:#b5e4be}
.live-label{color:#8d918b}
#feed{grid-column:1;grid-row:2;min-width:0}
.right-rail{grid-column:2;grid-row:2;display:grid;align-content:start;gap:14px}
.welcome-card{min-height:170px;padding:16px;background:linear-gradient(135deg,#1c291e,#1a201b);border:1px solid #2b392d;border-radius:13px;box-shadow:none}
.welcome-card h3{color:#e1e8df;font-size:16px}
.welcome-card p{color:#a5aaa2}
.welcome-card button{background:#b5e4be;color:#152018;border-radius:8px}
.welcome-orbit{border-color:#ffffff16}
.rail-card{background:#171917;border-color:#272a27;border-radius:13px;box-shadow:none}
.rail-title button{color:#b5e4be}
.suggestion .suggest-user b{color:#e1e8df}
.suggestion .suggest-user small{color:#8d918b}
.follow-btn{background:#1a241b;color:#bfe8c5}
.right-rail footer{color:#777d76}

.post-card{background:#171917;border-color:#272a27;border-radius:13px;box-shadow:none;transition:border-color .18s,transform .18s}
.post-card:hover{border-color:#38483a;transform:translateY(-1px)}
.post-head b,.post-copy{color:#e7eae4}
.post-head small,.post-copy~.post-tags,.post-stats{color:#8d918b}
.post-copy{font-size:12px;line-height:1.7}
.post-image{background:#222822;border-radius:9px}
.post-actions{border-color:#282b28}
.post-actions button{color:#8e948c}
.post-actions button:hover{color:#d7e4d7}
.post-actions button.liked{color:#f28a9c}
.post-actions .save-action.saved{color:#b5e4be}
.empty-state{background:#171917;border-color:#272a27;color:#979e96}
.empty-state h3{color:#eeefe9}
.empty-state p{color:#a2a79f}

.simple-head h2,.simple-head h3{color:#eeefe9}
.simple-head p,.eyebrow{color:#8d918b}
.primary-btn{background:#b5e4be;color:#152018;border-color:#b5e4be}
.primary-btn:hover{background:#d0f1d4;color:#152018}
.outline-btn{background:#171917;border-color:#343a34;color:#c5cbc3}
.outline-btn:hover{border-color:#607764;color:#b5e4be}
.explore-tile,.video-tile{background:#171917;border-color:#272a27}
.explore-tile:hover,.video-tile:hover{border-color:#55755b}
.messages-app{background:#171917;border-color:#272a27}
.chat-row.active,.chat-row:hover{background:#1a241b}
.chat-row span b,.chat-head b{color:#e1e8df}
.chat-row span small,.chat-head small{color:#8d918b}
.received{background:#252a25;color:#e1e8df}
.sent{background:#b5e4be;color:#152018}
.chat-input{border-color:#272a27}
.chat-input input,.msg-search{background:#101110;border-color:#303630;color:#e8ece7}
.chat-input button{color:#b5e4be}

.modal-backdrop{background:#090b09c9}
.modal{background:#171917;border:1px solid #303630;color:#eeefe9}
.modal>p,.privacy-note{color:#a0a59e}
.modal-close{color:#a0a59e}
.auth-switch,.post-type button{background:#202320;color:#9da39b}
.auth-switch button.selected,.post-type button.selected{background:#1a2a1d;color:#b5e4be}
.modal form input:not([type=file]),.modal textarea{background:#101110;border-color:#303630;color:#eeefe9}
.modal form input::placeholder,.modal textarea::placeholder{color:#777d76}
.upload-box{border-color:#3c4b3e;background:#141714}
.upload-box b{color:#d8ded6}
.upload-box small{color:#8d918b}
.post-footer{border-color:#303630}
.post-footer>span{color:#8d918b}
.user-modal{background:#171917}
.user-profile-row h2,.user-stats b{color:#eeefe9}
.user-bio{color:#c1c7bf}
.user-stats{border-color:#303630}
.comment-item{background:#101110;border-color:#303630}
.toast{background:#202821;color:#e7efe5}

body.dark{--bg:#101110;--paper:#171917;--ink:#eeefe9;--muted:#8d918b;--line:#272a27;--purple:#b5e4be;--purple-soft:#1a241b;--shadow:0 12px 32px rgba(0,0,0,.18)}
body.dark .topbar{background:rgba(16,17,16,.96)}
body.dark .nav-item:hover,body.dark .nav-item.active,body.dark .chat-row.active,body.dark .chat-row:hover{background:#1a241b;color:#b5e4be}
body.dark .auth-switch button.selected{background:#1a2a1d;color:#b5e4be}
body.dark .received{background:#252a25}

@media(max-width:1150px){
  .main-content{margin-left:205px}
  .sidebar{width:205px}
  .topbar{padding:0 26px}
  .page-view{padding:25px 26px 55px}
  .feed-layout{grid-template-columns:minmax(0,640px) 260px;gap:20px}
}
@media(max-width:900px){
  .feed-layout{grid-template-columns:minmax(0,680px);max-width:680px;margin:auto;gap:12px}
  .stories-panel{grid-column:1;grid-row:1}
  .feed-tabs{grid-column:1;grid-row:2}
  #feed{grid-column:1;grid-row:3}
  .right-rail{display:none}
  .sidebar{width:75px}
  .main-content{margin-left:75px}
  .topbar{padding:0 24px}
  .page-view{padding:23px}
}
@media(max-width:600px){
  body{background:#101110}
  .sidebar{display:none}
  .main-content{margin-left:0}
  .topbar{height:74px;padding:0 16px;gap:12px}
  .mobile-brand{color:#eeefe9}
  .mobile-brand span{color:#b5e4be}
  .tab-heading h1{font-size:14px}
  .tab-heading p{color:#777d76}
  .page-view{padding:15px 12px 30px}
  .stories-panel{padding:13px}
  .stories{gap:12px}
  .post-card{padding:14px 12px 10px;margin-bottom:11px;border-radius:13px}
  .post-image img{max-height:300px}
  .post-actions button{font-size:9px}
  .mobile-nav{background:#171917;border-color:#272a27}
  .mobile-nav button{color:#858b83}
  .mobile-nav button.active{color:#b5e4be}
  .messages-app{background:#171917;border-color:#272a27}
  .modal{background:#171917}
}

/* The existing appearance toggle switches to a light version of the same layout. */
body:not(.dark){background:#f7f8fc;color:#202438}
body:not(.dark) .sidebar{background:#fff;border-color:#eceef4}
body:not(.dark) .brand{color:#202438}
body:not(.dark) .brand-mark{background:linear-gradient(135deg,#8e72ed,#ee8cad);box-shadow:none}
body:not(.dark) .brand-mark i{background:#fff}
body:not(.dark) .nav-item{color:#73798c}
body:not(.dark) .nav-item:hover,body:not(.dark) .nav-item.active{background:#f2efff;color:#7967e8}
body:not(.dark) .new-post{background:linear-gradient(105deg,#7f6be9,#a378ea);color:#fff}
body:not(.dark) .main-content{background:#f7f8fc}
body:not(.dark) .topbar{background:rgba(247,248,252,.94);border-color:#eceef4}
body:not(.dark) .tab-heading h1{color:#202438}
body:not(.dark) .tab-heading p{color:#9298aa}
body:not(.dark) .search,body:not(.dark) .top-actions .icon-button{background:#fff;border-color:#eceef4;color:#73798c}
body:not(.dark) .search input{color:#202438}
body:not(.dark) .stories-panel,body:not(.dark) .rail-card,body:not(.dark) .post-card{background:#fff;border-color:#eceef4;box-shadow:0 10px 35px rgba(49,55,88,.045)}
body:not(.dark) .section-title h2,body:not(.dark) .rail-title h3,body:not(.dark) .post-head b,body:not(.dark) .post-copy{color:#202438}
body:not(.dark) .section-title span,body:not(.dark) .story small,body:not(.dark) .suggestion .suggest-user small,body:not(.dark) .post-head small,body:not(.dark) .post-stats{color:#9298aa}
body:not(.dark) .section-title>button{background:#f0edff;color:#7967e8}
body:not(.dark) .story-ring{background:linear-gradient(135deg,#ff8fa7,#a274e8)}
body:not(.dark) .story-ring.own{background:#eeeff5}
body:not(.dark) .feed-tabs{border-color:#eceef4}
body:not(.dark) .feed-tabs button.selected{color:#7967e8}
body:not(.dark) .feed-tabs button.selected:after{background:#7967e8}
body:not(.dark) .welcome-card{background:linear-gradient(140deg,#8b77ec,#b480e5);border:0}
body:not(.dark) .welcome-card h3,body:not(.dark) .welcome-card p{color:#fff}
body:not(.dark) .welcome-card button{background:#fff;color:#8368dd}
body:not(.dark) .rail-title button{color:#7967e8}
body:not(.dark) .suggestion .suggest-user b{color:#202438}
body:not(.dark) .follow-btn{background:#f0edff;color:#7967e8}
body:not(.dark) .right-rail footer{color:#9298aa}
body:not(.dark) .post-actions{border-color:#eceef4}
body:not(.dark) .post-actions button{color:#7d8293}
body:not(.dark) .post-actions button:hover{color:#7967e8}
body:not(.dark) .post-actions button.liked{color:#f07391}
body:not(.dark) .post-actions .save-action.saved{color:#7967e8}
body:not(.dark) .empty-state{background:#fff;border-color:#eceef4;color:#9a9eaa}
body:not(.dark) .empty-state h3{color:#202438}
body:not(.dark) .empty-state p{color:#9298aa}
body:not(.dark) .primary-btn{background:#7967e8;color:#fff;border-color:#7967e8}
body:not(.dark) .primary-btn:hover{background:#6e5bd8;color:#fff}
body:not(.dark) .outline-btn{background:#fff;border-color:#eceef4;color:#777c8c}
body:not(.dark) .outline-btn:hover{border-color:#b9b0ef;color:#7967e8}
body:not(.dark) .explore-tile,body:not(.dark) .video-tile{background:#fff;border-color:#eceef4}
body:not(.dark) .messages-app{background:#fff;border-color:#eceef4}
body:not(.dark) .chat-row.active,body:not(.dark) .chat-row:hover{background:#f5f3fc}
body:not(.dark) .chat-row span b,body:not(.dark) .chat-head b{color:#202438}
body:not(.dark) .chat-row span small,body:not(.dark) .chat-head small{color:#9298aa}
body:not(.dark) .received{background:#f4f3f9;color:#202438}
body:not(.dark) .sent{background:#8571e4;color:#fff}
body:not(.dark) .chat-input{border-color:#eceef4}
body:not(.dark) .chat-input input,body:not(.dark) .msg-search{background:#fff;border-color:#eceef4;color:#202438}
body:not(.dark) .chat-input button{color:#7967e8}
body:not(.dark) .modal-backdrop{background:#1c1d2d80}
body:not(.dark) .modal,body:not(.dark) .user-modal{background:#fff;border-color:#eceef4;color:#202438}
body:not(.dark) .modal>p,body:not(.dark) .privacy-note,body:not(.dark) .modal-close{color:#9298aa}
body:not(.dark) .auth-switch,body:not(.dark) .post-type button{background:#f3f3f8;color:#969baa}
body:not(.dark) .auth-switch button.selected,body:not(.dark) .post-type button.selected{background:#fff;color:#7967e8}
body:not(.dark) .modal form input:not([type=file]),body:not(.dark) .modal textarea{background:#fff;border-color:#eceef4;color:#202438}
body:not(.dark) .modal form input::placeholder,body:not(.dark) .modal textarea::placeholder{color:#a5a9b7}
body:not(.dark) .upload-box{border-color:#d7d4e7;background:#fff}
body:not(.dark) .upload-box b{color:#777d90}
body:not(.dark) .upload-box small,body:not(.dark) .post-footer>span{color:#a4a8b5}
body:not(.dark) .post-footer,body:not(.dark) .user-stats{border-color:#eceef4}
body:not(.dark) .user-profile-row h2,body:not(.dark) .user-stats b{color:#202438}
body:not(.dark) .user-bio{color:#656b7b}
body:not(.dark) .comment-item{background:#f7f8fc;border-color:#eceef4}
body:not(.dark) .toast{background:#292b3b;color:#fff}
@media(max-width:600px){body:not(.dark){background:#f7f8fc}body:not(.dark) .mobile-nav{background:#fff;border-color:#eceef4}body:not(.dark) .mobile-nav button{color:#888da0}body:not(.dark) .mobile-nav button.active{color:#7967e8}}

/* Added social features */
.avatar-photo{overflow:hidden;background:#252925}.avatar-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar-me-button{padding:0;background:transparent;border:0;box-shadow:none}.avatar-me-button .avatar{width:34px;height:34px}
.explore-tabs,.profile-tabs{display:flex;gap:7px;overflow:auto;margin:14px 0 18px;border-bottom:1px solid var(--line);scrollbar-width:none}.explore-tabs button,.profile-tabs button{white-space:nowrap;padding:11px 14px;color:var(--muted);font-size:11px;font-weight:700;border-bottom:2px solid transparent}.explore-tabs button.selected,.profile-tabs button.selected{color:#b5e4be;border-color:#b5e4be}
.all-stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}.all-story-card{height:260px;position:relative;overflow:hidden;border-radius:17px;background:#202521;padding:0;text-align:left}.all-story-card>img,.all-story-card>video{width:100%;height:100%;object-fit:cover}.all-story-author{position:absolute;left:12px;right:10px;bottom:12px;display:flex;align-items:center;gap:8px;color:#fff;text-shadow:0 1px 5px #000}.all-story-author .avatar{width:31px;height:31px;border:1px solid #fff}.story-text-card,.story-text-only{display:grid;place-items:center;width:100%;height:100%;padding:24px;color:#fff;background:linear-gradient(135deg,#42665c,#252c29);font-size:18px;font-weight:750;overflow-wrap:anywhere}.story-text-only{font-size:24px;text-align:center}.story-view>video{width:100%;height:100%;object-fit:contain}.video-title-input{width:100%;height:43px;border:1px solid var(--line);border-radius:10px;padding:0 12px;margin-bottom:10px;outline:none}.video-title-input.hidden{display:none!important}
#videoGrid.video-grid{display:flex;flex-direction:column;align-items:center;gap:18px;max-height:calc(100vh - 210px);overflow-y:auto;scroll-snap-type:y mandatory;padding:4px 0 26px}.tiny-video-slide{width:min(100%,440px);height:min(76vh,760px);min-height:430px;position:relative;overflow:hidden;border-radius:22px;background:#070808;scroll-snap-align:start;isolation:isolate}.tiny-video-slide>video{width:100%;height:100%;object-fit:contain;background:#080909}.tiny-video-caption{position:absolute;left:17px;right:78px;bottom:19px;color:white;text-align:left;text-shadow:0 2px 8px #000}.tiny-video-caption>b{font-size:15px}.tiny-video-caption p{font-size:12px;margin:5px 0 0}.tiny-video-author{position:absolute;right:13px;bottom:16px;display:grid;gap:12px;justify-items:center;color:white}.tiny-video-author button{display:grid;justify-items:center;gap:4px;color:#fff;font-size:10px;text-shadow:0 1px 6px #000}.tiny-video-author button[data-user]{max-width:70px;overflow:hidden}.tiny-video-author .avatar{width:42px;height:42px;border:2px solid #fff}.tiny-video-author small{display:block;font-size:10px}.tiny-video-like.liked{color:#ff6d86}.tiny-video-slide .tiny-video-author button:not([data-user]){font-size:24px}.tiny-video-slide .tiny-video-author button small{font-size:10px}
.group-chat-icon{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;background:#20362b;color:#b5e4be;flex:none}.group-modal{width:min(100%,470px)}.group-modal h2{margin-bottom:18px}.group-modal form>label{display:grid;gap:7px;color:var(--muted);font-size:11px}.group-select-head{display:flex;justify-content:space-between;align-items:center;margin:17px 0 8px;font-size:12px}.group-select-head button{color:#b5e4be;font-size:11px}.group-people{display:grid;gap:6px;max-height:38vh;overflow:auto;margin-bottom:16px}.group-person{display:flex!important;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;margin:0!important}.group-person>span:nth-child(2){display:grid;gap:3px;flex:1}.group-person b{font-size:11px}.group-person small{font-size:9px;color:var(--muted)}.group-person input{accent-color:#8bcc9a;width:17px;height:17px}.avatar-upload-label{cursor:pointer;white-space:nowrap}.profile-text-tile{display:grid;place-items:center;width:100%;height:100%;padding:16px;color:var(--ink);background:var(--paper);overflow:hidden}.profile-page-posts button{position:relative}.profile-page-posts button small{position:absolute;left:0;right:0;bottom:0;padding:8px;background:#0009;color:white;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px}
@media(max-width:600px){.mobile-nav button{min-width:0;flex:1;font-size:17px}.mobile-nav small{font-size:7px;white-space:nowrap}.tiny-video-slide{height:calc(100dvh - 180px);min-height:420px;width:100%;border-radius:15px}.video-head-actions #openBigVideos{display:none}#videoGrid.video-grid{max-height:calc(100dvh - 165px);margin:0 -12px}.all-stories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.all-story-card{height:230px}.profile-tabs{margin:13px -8px}.explore-tabs{margin-left:-3px;margin-right:-3px}.explore-tabs button,.profile-tabs button{padding:10px 11px;font-size:10px}.group-modal{padding:23px 16px}.avatar-me-button .avatar{width:31px;height:31px}}

/* Give Tiny Video the available viewport and scale landscape clips to the frame. */
#videoGrid.video-grid{max-height:calc(100dvh - 185px)}
.tiny-video-slide{width:min(100%,720px);height:min(84dvh,900px);min-height:520px}
.tiny-video-slide>video{object-fit:cover}
@media(max-width:600px){#videoGrid.video-grid{max-height:calc(100dvh - 155px)}.tiny-video-slide{width:100%;height:calc(100dvh - 170px);min-height:0}.tiny-video-slide>video{object-fit:cover}}

/* The stories card sets the first desktop grid row height; pull the feed up beneath its tabs. */
@media(min-width:901px){#homeView .feed-layout #feed{margin-top:-68px}}
@media(max-width:900px){#homeView .feed-layout #feed{margin-top:0}}
#videosView .video-head-actions #videoPost{display:none}
.watching-tiny-videos .topbar{display:none}
.watching-tiny-videos #videosView{max-width:none;height:100dvh;padding:0}
.watching-tiny-videos #videosView>.simple-head{display:none}
.watching-tiny-videos #videoGrid.video-grid{height:100dvh;max-height:100dvh;padding:0;gap:0}
.watching-tiny-videos .tiny-video-slide{width:min(100%,760px);height:100dvh;min-height:0;border-radius:0}
@media(max-width:600px){.watching-tiny-videos #videosView{height:calc(100dvh - 61px)}.watching-tiny-videos #videoGrid.video-grid{height:calc(100dvh - 61px);max-height:calc(100dvh - 61px);margin:0}.watching-tiny-videos .tiny-video-slide{height:calc(100dvh - 61px);width:100%;border-radius:0}}
@media(min-width:601px){body.watching-tiny-videos .topbar{display:none}body.watching-tiny-videos #videosView>.simple-head{display:none}body.watching-tiny-videos #videosView{height:100dvh;padding:0}body.watching-tiny-videos #videoGrid.video-grid{height:100dvh;max-height:100dvh}body.watching-tiny-videos .tiny-video-slide{height:100dvh;min-height:0}}
.delete-share-btn,.tiny-delete-share,.story-delete-btn{border:0;border-radius:8px;background:#fff;color:#b4233d;padding:8px 11px;font-size:12px;font-weight:600;cursor:pointer}
.viewer-copy .delete-share-btn{display:block;margin-top:14px}
.tiny-delete-share{margin-top:8px;font-size:11px}
.story-overlay .story-delete-btn{position:absolute;right:0;top:-5px}
/* Keep each Tiny Video slide exactly one full scroll viewport; flex items must not shrink. */
body.watching-tiny-videos #videoGrid.video-grid{align-items:stretch;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}
body.watching-tiny-videos #videoGrid.video-grid>.tiny-video-slide{flex:0 0 100%;height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always}
/* Reels/Shorts-style frame follows each video's own aspect ratio on desktop. */
@media(min-width:601px){body.watching-tiny-videos #videoGrid.video-grid{align-items:center}body.watching-tiny-videos #videoGrid.video-grid>.tiny-video-slide{width:min(100%,calc(100dvh * var(--video-ratio, .5625)));border-radius:18px}body.watching-tiny-videos .tiny-video-slide>video{object-fit:contain}}
@media(max-width:600px){body.watching-tiny-videos #videoGrid.video-grid>.tiny-video-slide{width:100%;aspect-ratio:auto;border-radius:0}body.watching-tiny-videos .tiny-video-slide>video{object-fit:cover}}
/* Scale the whole uploaded frame into the player without cropping its edges. */
body.watching-tiny-videos .tiny-video-slide>video{object-fit:contain;background:#080909}