/* notifications-stage14.css */ /* Patiyiz · 14. Bildirimler: scoped monochrome notifications hub */ #main-content .notification-v2{max-width:970px;width:100%;margin:0 auto;padding:13px 7px calc(85px + env(safe-area-inset-bottom,0px));font-family:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;color:#1b1c20} #main-content .notification-v2 *{box-sizing:border-box} #main-content .notification-v2 button{font-family:inherit;cursor:pointer;touch-action:manipulation} #main-content .notification-v2 :is(button,input):focus-visible{outline:3px solid #81838c;outline-offset:3px} #main-content .notification-v2 .pati-alert-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:5px 0 20px;padding:0;background:transparent;border:0;box-shadow:none} #main-content .notification-v2 .pati-alert-head .pati-alert-eyebrow{color:#94959d;font-size:10px;font-weight:850;letter-spacing:.13em} #main-content .notification-v2 .pati-alert-head h1{font-size:clamp(27px,4vw,35px);line-height:1.2;letter-spacing:-.04em;color:#202025;margin:8px 0} #main-content .notification-v2 .pati-alert-head p{font-size:12.5px;color:#70727a;margin:0;line-height:1.7} #main-content .notification-v2 .pati-alert-count{font-size:12px;background:#161619;border-radius:50px;color:#fff;padding:5px 9px;margin-left:9px;vertical-align:middle} #main-content .notification-v2 .pati-alert-head-icon{flex:0 0 51px;width:51px;height:51px;display:grid;place-items:center;border-radius:16px;background:#f2f2f4;color:#242428} #main-content .notification-v2 .notification-v2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 18px} #main-content .notification-v2 .notification-v2-stats>div{border:1px solid #e7e7ea;background:#fff;border-radius:14px;padding:15px;min-width:0;display:grid;gap:4px} #main-content .notification-v2 .notification-v2-stats b{color:#202126;font-size:25px;font-variant-numeric:tabular-nums;letter-spacing:-.04em} #main-content .notification-v2 .notification-v2-stats small{font-size:11px;color:#7d7f86} #main-content .notification-v2 .pati-alert-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 15px} #main-content .notification-v2 .pati-alert-tools button{display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:43px;padding:10px 13px;border:1px solid #e2e3e7;border-radius:12px;background:#f8f8f9;color:#42434a;font-size:11px;font-weight:800} #main-content .notification-v2 .pati-alert-tools button:disabled{opacity:.45;cursor:default} #main-content .notification-v2 .pati-alert-tools button:first-child{background:#19191c;color:#fff;border-color:#19191c} #main-content .notification-v2 .pati-alert-tools button:nth-child(2){color:#9c4141;border-color:#eedede;background:#fff7f7} #main-content .notification-v2 .pati-alert-push.notification-v2-push{display:flex;gap:13px;align-items:center;flex-wrap:wrap;background:#f4f4f5;border:1px solid #ededf0;padding:18px;border-radius:16px;margin:0 0 11px;color:#242529} #main-content .notification-v2 .notification-v2-push .pati-alert-push-icon{width:43px;height:43px;flex:0 0 43px;border-radius:13px;background:#e7e7e9;color:#303137;display:grid;place-items:center} #main-content .notification-v2 .notification-v2-push>div:nth-child(2){flex:1;min-width:130px} #main-content .notification-v2 .notification-v2-push strong{color:#27282e;font-size:13px} #main-content .notification-v2 .notification-v2-push p{color:#585a62;font-size:11px;font-weight:800;margin:5px 0} #main-content .notification-v2 .notification-v2-push small{color:#81828a;font-size:10px;line-height:1.6} #main-content .notification-v2 .notification-v2-push-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center} #main-content .notification-v2 .notification-v2-push-actions button{min-height:41px;background:#171719;color:#fff;border:1px solid #171719;border-radius:11px;padding:10px 13px;font-size:11px;font-weight:800} #main-content .notification-v2 .notification-v2-push-actions button:nth-child(2){background:#fff;color:#3c3d43;border-color:#dedfe2} #main-content .notification-v2 .notification-v2-push-actions button:disabled{opacity:.5;cursor:default} #main-content .notification-v2 .notification-v2-info{color:#787a82;font-size:10.8px;line-height:1.8;margin:0 3px 20px} #main-content .notification-v2 .notification-v2-search{display:grid;gap:9px;margin:0 0 16px} #main-content .notification-v2 .notification-v2-search label{font-size:12px;font-weight:800;color:#323339} #main-content .notification-v2 .notification-v2-search input{width:100%;min-height:47px;border:1px solid #dedee3;background:#f8f8f9;border-radius:12px;color:#242529;font-size:13px;padding:12px 14px;outline:0} #main-content .notification-v2 .notification-v2-search input:focus{border-color:#7f808a} #main-content .notification-v2 .notification-v2-filters{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 0 12px} #main-content .notification-v2 .notification-v2-filters button{min-height:40px;flex:0 0 auto;border:1px solid #dedfe3;border-radius:30px;background:#fff;color:#575963;font-size:11px;font-weight:800;padding:9px 14px} #main-content .notification-v2 .notification-v2-filters button.active{background:#18181a;color:#fff;border-color:#18181a} #main-content .notification-v2 .notification-v2-list-head{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin:16px 0 13px} #main-content .notification-v2 .notification-v2-list-head h2{font-size:18px;letter-spacing:-.04em;color:#26262b;margin:0} #main-content .notification-v2 .notification-v2-list-head span{color:#85868e;font-size:11px} #main-content .notification-v2 .notification-v2-list{display:grid;gap:10px} #main-content .notification-v2 .pati-alert-row{display:flex;align-items:center;gap:9px;border:1px solid #e6e6ea;background:#fff;border-radius:15px;padding:13px;box-shadow:none;min-width:0} #main-content .notification-v2 .pati-alert-row.is-new{background:#f9f9fa;border-color:#d3d4d9} #main-content .notification-v2 .pati-alert-entry{display:flex;gap:12px;align-items:center;flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:0;color:#242529} #main-content .notification-v2 .pati-alert-avatar{width:43px;height:43px;flex:0 0 43px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#f0f0f2} #main-content .notification-v2 .pati-alert-content{min-width:0;flex:1;display:grid;gap:7px} #main-content .notification-v2 .pati-alert-title{color:#25252a;font-size:12.8px;line-height:1.5;font-weight:750;overflow-wrap:anywhere} #main-content .notification-v2 .pati-alert-meta{font-size:10.5px;color:#7b7d85} #main-content .notification-v2 .pati-alert-unread{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#24252a} #main-content .notification-v2 .pati-alert-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto} #main-content .notification-v2 .pati-alert-row-actions button{min-height:37px;border:1px solid #e2e2e7;background:#f6f6f7;color:#474850;border-radius:10px;padding:8px 11px;font-size:10px;font-weight:800} #main-content .notification-v2 .pati-alert-row-actions .pati-alert-remove{color:#964043;background:#fff5f5;border-color:#f2dfdf} #main-content .notification-v2 .pati-alert-row-actions .pati-alert-follow-back{background:#18181a;color:#fff;border-color:#18181a} #main-content .notification-v2 .notification-v2-empty,#main-content .notification-v2 .notification-v2-loading{border:1px dashed #d7d8df;border-radius:17px;background:#fafafb;text-align:center;padding:30px 18px;color:#777981} #main-content .notification-v2 .notification-v2-empty>span{font-size:30px} #main-content .notification-v2 .notification-v2-empty h3{font-size:15px;color:#24242a;margin:9px 0 5px} #main-content .notification-v2 .notification-v2-empty p{font-size:12px;line-height:1.7;color:#7b7c85} #main-content .notification-v2 .notification-v2-empty button{min-height:43px;padding:10px 16px;border:0;border-radius:11px;background:#171719;color:#fff;font-size:11px;font-weight:800} #main-content .notification-v2 .notification-v2-error{background:#fff1f1;color:#91393d;border:1px solid #f0dcdd;border-radius:12px;padding:12px 14px;font-size:12px} @media(max-width:780px){#main-content .notification-v2 .pati-alert-row{flex-wrap:wrap}#main-content .notification-v2 .pati-alert-row-actions{width:100%;border-top:1px solid #eeeef0;padding-top:10px}#main-content .notification-v2 .pati-alert-row-actions button{flex:1 1 100px}} @media(max-width:620px){ #main-content .notification-v2{padding:11px 11px calc(105px + env(safe-area-inset-bottom,0px))} #main-content .notification-v2 .pati-alert-head{margin:4px 0 16px} #main-content .notification-v2 .pati-alert-head h1{font-size:27px} #main-content .notification-v2 .pati-alert-head-icon{width:42px;height:42px;flex-basis:42px} #main-content .notification-v2 .notification-v2-stats{gap:7px} #main-content .notification-v2 .notification-v2-stats>div{padding:11px 8px;border-radius:12px} #main-content .notification-v2 .notification-v2-stats b{font-size:21px} #main-content .notification-v2 .notification-v2-stats small{font-size:9px} #main-content .notification-v2 .pati-alert-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} #main-content .notification-v2 .pati-alert-tools button:last-child{grid-column:1/-1} #main-content .notification-v2 .pati-alert-push.notification-v2-push{padding:14px} #main-content .notification-v2 .notification-v2-push-actions{width:100%} #main-content .notification-v2 .notification-v2-push-actions button{flex:1 1 120px} #main-content .notification-v2 .pati-alert-row{padding:12px} #main-content .notification-v2 .pati-alert-title{font-size:12px} #main-content .notification-v2 .pati-alert-avatar{width:38px;height:38px;flex-basis:38px} } @media(max-width:360px){#main-content .notification-v2 .notification-v2-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} html[data-pati-theme="dark"] #main-content .notification-v2{color:#f3f3f5} html[data-pati-theme="dark"] #main-content .notification-v2 :is(.notification-v2-stats>div,.pati-alert-row,.notification-v2-empty,.notification-v2-loading){background:#212228;border-color:#404148} html[data-pati-theme="dark"] #main-content .notification-v2 :is(.pati-alert-head h1,.notification-v2-list-head h2,.notification-v2-stats b,.pati-alert-title,.notification-v2-empty h3){color:#f2f2f4!important} html[data-pati-theme="dark"] #main-content .notification-v2 :is(.pati-alert-head p,.pati-alert-meta,.notification-v2-stats small,.notification-v2-info,.notification-v2-empty p){color:#c8c9d0!important} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-push.notification-v2-push{background:#292a31;color:#f3f3f5;border-color:#46474f} html[data-pati-theme="dark"] #main-content .notification-v2 .notification-v2-push :is(strong,p){color:#f1f1f4} html[data-pati-theme="dark"] #main-content .notification-v2 :is(.notification-v2-search input,.notification-v2-filters button,.pati-alert-row-actions button,.pati-alert-tools button,.notification-v2-push-actions button){background:#303138;color:#f4f4f5;border-color:#50515a} html[data-pati-theme="dark"] #main-content .notification-v2 :is(.notification-v2-filters button.active,.pati-alert-tools button:first-child,.notification-v2-push-actions button:first-child){background:#f3f3f5;color:#19191b;border-color:#f3f3f5} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-row.is-new{background:#292a31;border-color:#595a63} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-entry{color:#f1f1f4} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-avatar{background:#393a42} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-unread{background:#fff} html[data-pati-theme="dark"] #main-content .notification-v2 .pati-alert-row-actions .pati-alert-remove{background:#4f3034;color:#ffe1e4;border-color:#6e4549} @media(prefers-reduced-motion:reduce){#main-content .notification-v2 *{transition:none!important}} /* stage15-navigation-qa.css */ /* Patiyiz 15. aşama — paylaşılan menü ve hesap sayfaları son düzenleri */ #app-root .sidebar{scrollbar-color:#dedee2 transparent} #app-root .sidebar #desktop-nav .nav-link{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;min-width:0;padding:11px 14px;border-radius:14px;position:relative;text-align:left} #app-root .sidebar #desktop-nav .nav-link .icon{flex:0 0 20px;width:20px;height:20px} #app-root .sidebar #desktop-nav .nav-link .pati-count-badge{flex:0 0 auto;margin-left:auto;min-width:20px;height:20px;font-size:11px;background:#db5160;color:#fff} #app-root .sidebar #desktop-nav .nav-link[aria-current="page"]{background:#ededf0!important;color:#202025!important} #app-root .sidebar #desktop-nav .nav-link:focus-visible{outline:3px solid #8b8c96;outline-offset:2px} #app-root .sidebar #desktop-nav .nav-link.active::before{background:#212124!important} #tools-form .pati-mobile-menu-item>.pati-count-badge{flex:0 0 auto!important;width:auto!important;min-width:21px;max-width:44px;height:21px;padding:0 6px;margin-left:auto;margin-right:3px;font-size:10px;font-weight:800;background:#db5160;color:#fff;line-height:1} #tools-form .pati-mobile-menu-item>span:not(.pati-count-badge){flex:1;min-width:0} #tools-form .pati-mobile-menu-item:focus-visible{outline:3px solid #85858f;outline-offset:2px} #main-content .pati-settings-notifications{min-width:0} #main-content .pati-settings-notifications .pati-actionbar{display:flex;gap:10px;flex-wrap:wrap} #main-content .pati-settings-notifications [data-view="notifications"]{min-height:45px;border-radius:12px;border:1px solid #25262b;background:#171719;color:#fff;padding:11px 16px;font-size:12px;font-weight:800;cursor:pointer} #main-content .pati-settings-notifications [data-view="notifications"]:focus-visible{outline:3px solid #878993;outline-offset:3px} #main-content .pati-achievements .pati-badge,#main-content .pati-achievements .pati-cert-card{min-width:0;overflow-wrap:anywhere} #main-content .pati-achievements .pati-cert-card button:disabled{opacity:.62;cursor:not-allowed} #main-content .pati-achievements .pati-badge small,#main-content .pati-achievements .pati-cert-card small{font-variant-numeric:tabular-nums} @media(max-width:900px){ #app-root .sidebar #desktop-nav .nav-link{min-height:46px;gap:10px;padding:10px 11px;font-size:12px} } @media(max-width:740px){ #main-content .pati-settings-notifications [data-view="notifications"]{width:100%;min-height:48px} #tools-form .pati-mobile-menu-item>.pati-count-badge{min-width:20px;font-size:10px} } html[data-pati-theme="dark"] #app-root .sidebar{scrollbar-color:#55565d transparent} html[data-pati-theme="dark"] #app-root .sidebar #desktop-nav .nav-link[aria-current="page"]{background:#34353c!important;color:#fff!important} html[data-pati-theme="dark"] #app-root .sidebar #desktop-nav .nav-link.active::before{background:#fff!important} html[data-pati-theme="dark"] #main-content .pati-settings-notifications [data-view="notifications"]{background:#f3f3f6;color:#161619;border-color:#f3f3f6} html[data-pati-theme="dark"] #tools-form .pati-mobile-menu-item>.pati-count-badge{background:#db5160;color:#fff} @media(prefers-reduced-motion:reduce){#app-root .sidebar #desktop-nav .nav-link{transition:none}} /* instagram-share-clean.css */ /* Patiyiz — simple Instagram-style native gallery + in-composer sharing. */ #post-form .pati-compose-media{margin:0 0 12px;padding:10px;border:1px solid #e7e7e9;border-radius:16px;background:#fff} #post-form .pati-media-intro{padding:2px 3px 9px} #post-form .pati-media-gallery{aspect-ratio:4/5;max-height:470px;min-height:260px;background:#151517;border-radius:12px;overflow:hidden} #post-form .pati-media-gallery>img{width:100%;height:100%;object-fit:contain} #post-form .pati-media-thumbs{gap:8px;padding:10px 0 0} #post-form .pati-media-picker-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:8px;margin-top:12px} #post-form .pati-media-picker-actions button{min-height:44px;border-radius:11px;white-space:normal;font-size:11px;font-weight:800} #post-form .pati-media-help{font-size:10.5px;line-height:1.6;color:#7b7c84} #post-form .pati-media-controls{margin:10px 0 16px;padding:12px;border-radius:13px;border:1px solid #e9e9ed;background:#f8f8f9} #post-form .pati-media-controls>label{display:block;font-size:12px;font-weight:800;color:#313238;margin:0 0 9px} #post-form .pati-ratio-options{display:flex;gap:8px;flex-wrap:wrap} #post-form .pati-ratio-options button{flex:1 1 75px;min-height:40px;border-radius:10px;font-size:11px;font-weight:800} #post-form .pati-inline-crop-toggle{display:block;margin-top:10px;width:100%;min-height:41px;border:1px solid #dedee2;border-radius:10px;background:#fff;color:#383941;font-size:11px;font-weight:800;cursor:pointer} #post-form .pati-inline-crop-toggle:focus-visible,#post-form .pati-media-picker-actions button:focus-visible{outline:3px solid #81828c;outline-offset:2px} #post-form .pati-crop-preview[hidden]{display:none!important} #post-form .pati-crop-preview:not([hidden]){margin-top:12px} #story-form #story-photo-preview img{max-height:min(60dvh,510px);width:100%;object-fit:contain;border-radius:12px} @media(max-width:680px){ #post-form .pati-compose-media{padding:8px;border-radius:12px} #post-form .pati-media-gallery{min-height:220px;aspect-ratio:4/5;max-height:54dvh} #post-form .pati-media-picker-actions{grid-template-columns:repeat(2,minmax(0,1fr))} #post-form .pati-media-picker-actions button{min-height:46px} #post-form .pati-media-help{padding:0 2px} } html[data-pati-theme="dark"] #post-form :is(.pati-compose-media,.pati-media-controls){background:#23242a;color:#f5f5f7;border-color:#44454c} html[data-pati-theme="dark"] #post-form .pati-media-controls>label{color:#f5f5f7} html[data-pati-theme="dark"] #post-form .pati-inline-crop-toggle{background:#303137;color:#f4f4f7;border-color:#50515a} @media(prefers-reduced-motion:reduce){#post-form .pati-media-picker-actions button{transition:none}} /* post-detail-twitter-text-stage16.css */ /* Patiyiz · Post detail V2: vertical Instagram-style continuous browsing, X-inspired text cards and reliable DM history layout. */ #main-content .pati-detail-screen{width:100%;max-width:760px;min-width:0;margin:0 auto;padding:8px 10px 20px;display:flex;flex-direction:column;gap:12px} #main-content .pati-detail-toolbar{display:flex;align-items:center;gap:12px;min-height:51px;background:#fff;border:1px solid #ebebef;border-radius:14px;padding:8px 12px;color:#222329} #main-content .pati-detail-toolbar>button{display:inline-flex;align-items:center;gap:6px;min-height:42px;border:0;background:#f4f4f5;color:#24252a;border-radius:10px;font-size:12px;font-weight:800;padding:9px 13px;cursor:pointer} #main-content .pati-detail-toolbar>button .icon{width:16px;height:16px} #main-content .pati-detail-toolbar>div{flex:1;min-width:0;display:grid;gap:4px} #main-content .pati-detail-toolbar strong{font-size:14px} #main-content .pati-detail-toolbar small{color:#84858d;font-size:10px} #main-content .pati-detail-toolbar>span{white-space:nowrap;color:#888994;font-size:10px} #main-content .pati-detail-list{position:relative;height:calc(100dvh - 160px);min-height:250px;max-height:900px;overflow-y:auto;scrollbar-width:thin;scroll-snap-type:y proximity;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:block;border-radius:15px} #main-content .pati-detail-item{margin:0 0 12px;scroll-snap-align:start;scroll-margin-top:8px;min-width:0} #main-content .pati-detail-item>.pati-feed-card{margin:0!important;width:100%;max-width:none} #main-content .pati-detail-list:focus-visible,#main-content .pati-detail-toolbar button:focus-visible{outline:3px solid #858690;outline-offset:2px} /* Text-only cards follow a clean social-post structure: avatar/author, blue handle, readable body, compact actions and timestamp. */ #main-content .pati-feed-card.pati-feed-text-only{width:100%!important;max-width:720px;border:1px solid #e5e5e9!important;border-radius:20px!important;background:#fff!important;box-shadow:none!important;overflow:hidden} #main-content .pati-feed-text-only .pati-feed-card-header{padding:16px 18px 7px!important;min-height:65px;background:#fff!important} #main-content .pati-feed-text-only .pati-feed-card-header .pati-profile-row{gap:12px!important} #main-content .pati-feed-text-only .pati-feed-card-header .avatar{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important} #main-content .pati-feed-text-only .pati-feed-card-header .pati-profile-row strong{font-size:15px!important;font-weight:800!important;color:#1c1d22!important;line-height:1.25} #main-content .pati-feed-text-only .pati-feed-card-header .pati-profile-row small{font-size:12px!important;color:#2691d5!important;margin-top:4px} #main-content .pati-feed-text-only .pati-feed-pet{padding:0 20px 3px 78px!important} #main-content .pati-feed-text-only .pati-feed-text-content{background:#fff!important;border:0!important;padding:16px 24px 18px!important;min-height:0} #main-content .pati-feed-text-only .pati-feed-text-content .pati-post-caption{font-size:clamp(15px,2.5vw,17px)!important;line-height:1.7!important;font-weight:470!important;color:#25262b!important;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.006em} #main-content .pati-feed-text-only .pati-feed-text-content .pati-hashtag{color:#1d90d4!important} #main-content .pati-feed-text-only .pati-social-actions{padding:0 18px!important;min-height:42px!important;border-top:1px solid #f2f2f4!important} #main-content .pati-feed-text-only .pati-post-details{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:0 20px 16px!important} #main-content .pati-feed-text-only .pati-post-like-summary{font-size:11px;font-weight:700;color:#595a64} #main-content .pati-feed-text-only .pati-post-time{font-size:10px;color:#858691} @media(max-width:740px){ #main-content .pati-detail-screen{padding:5px 0 0;gap:5px;max-width:100%} #main-content .pati-detail-toolbar{border-radius:0;border-left:0;border-right:0;padding:6px 12px} #main-content .pati-detail-toolbar>span{display:none} #main-content .pati-detail-list{height:calc(100dvh - 145px - env(safe-area-inset-bottom,0px));max-height:none;min-height:200px;border-radius:0;padding:0} #main-content .pati-detail-item{margin-bottom:9px} #main-content .pati-detail-item>.pati-feed-card{border-radius:0!important} #main-content .pati-feed-posts>.pati-feed-text-only{border:1px solid #e5e5e9!important;border-radius:16px!important;margin:12px 9px!important;width:calc(100% - 18px)!important} #main-content .pati-feed-text-only .pati-feed-card-header{padding:14px 14px 5px!important} #main-content .pati-feed-text-only .pati-feed-text-content{padding:13px 17px 16px!important} #main-content .pati-feed-text-only .pati-feed-card-header .avatar{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important} } html[data-pati-theme="dark"] #main-content .pati-detail-toolbar, html[data-pati-theme="dark"] #main-content .pati-feed-card.pati-feed-text-only, html[data-pati-theme="dark"] #main-content .pati-feed-text-only .pati-feed-card-header, html[data-pati-theme="dark"] #main-content .pati-feed-text-only .pati-feed-text-content{background:#202126!important;border-color:#3b3d45!important} html[data-pati-theme="dark"] #main-content .pati-feed-text-only .pati-feed-card-header .pati-profile-row strong, html[data-pati-theme="dark"] #main-content .pati-feed-text-only .pati-feed-text-content .pati-post-caption, html[data-pati-theme="dark"] #main-content .pati-detail-toolbar strong{color:#f7f7f9!important} html[data-pati-theme="dark"] #main-content .pati-detail-toolbar>button{background:#36373e;color:#f3f3f5} html[data-pati-theme="dark"] #main-content .pati-feed-text-only .pati-social-actions{background:#202126!important;border-color:#35363d!important} @media(prefers-reduced-motion:reduce){#main-content .pati-detail-list{scroll-behavior:auto}} /* profile-explore-coin-polish.css */ /* Patiyiz: text profile posts, explore placeholders, custom coin and next follower target */ #main-content .pati-profile-text-feed{display:flex;flex-direction:column;gap:12px;max-width:730px;margin:12px auto 28px;padding:0 12px} #main-content .pati-profile-text-feed>.pati-feed-card{width:100%!important;max-width:none!important;min-width:0;box-shadow:none!important} #main-content .pati-profile-text-feed>.pati-feed-text-only{border-radius:18px!important} #main-content .pati-profile-text-feed .pati-feed-text-content{min-height:0} #main-content .pati-profile-text-feed .pati-post-caption{overflow-wrap:anywhere;white-space:pre-wrap} @media(max-width:620px){#main-content .pati-profile-text-feed{padding:0 9px;gap:9px;margin-top:8px}} /* Show a polished static placeholder while legacy videos without cover images load. */ #main-content .pati-explore-media-screen .pati-explore-media:has(video[data-explore-preview]){position:relative;background:radial-gradient(circle at 50% 38%,#4a4c54,#17181b 73%)!important;overflow:hidden} #main-content .pati-explore-media-screen .pati-explore-media:has(video[data-explore-preview]):before{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#ffffffb5;font-size:21px;z-index:0} #main-content .pati-explore-media-screen .pati-explore-media:has(video.is-ready):before{display:none} #main-content .pati-explore-media-screen .pati-explore-preview-video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover} /* Only the coin badge is rebranded, not the PatiCoin reward economy or screen. */ .pati-coin-icon{display:inline-block;width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.22em;flex:none} .pati-header-coins .pati-coin-icon,.pati-desktop-coins .pati-coin-icon{width:23px;height:23px;vertical-align:middle} .paticoin-hero>strong .pati-coin-icon{width:42px;height:42px;vertical-align:-.2em} .paticoin-burst .pati-coin-icon{width:42px;height:42px;vertical-align:middle} .paticoin-task b .pati-coin-icon,.pati-follower-coin .pati-coin-icon{width:16px;height:16px} .paticoin-item strong .pati-coin-icon,.paticoin-shop-head button .pati-coin-icon{width:20px;height:20px} .paticoin-invite-redeem .pati-coin-icon,.paticoin-confirm .pati-coin-icon{width:18px;height:18px} /* Compact premium-style milestone at the top of user's profile. */ #main-content .pati-follower-hint{display:grid;gap:10px;text-align:left;margin:12px 0 15px;padding:15px 17px;border:1px solid #e8e8eb;border-radius:18px;background:linear-gradient(135deg,#fff 25%,#faf9f5 100%);box-shadow:0 4px 20px rgba(17,20,25,.045);color:#1a1b1e;cursor:pointer;max-width:100%} #main-content .pati-follower-hint .pati-goal-header{display:flex;align-items:center;gap:11px;min-width:0} #main-content .pati-follower-hint .pati-goal-header>span:nth-child(2){display:grid;gap:4px;min-width:0} #main-content .pati-follower-hint .pati-goal-header small{font-size:10px;font-weight:850;letter-spacing:.1em;color:#8a754d} #main-content .pati-follower-hint .pati-goal-header strong{font-size:17px;font-weight:850;letter-spacing:-.02em} #main-content .pati-follower-hint .pati-goal-medal{flex:none;display:grid;place-items:center;border-radius:13px;width:42px;height:42px;background:linear-gradient(145deg,#f6e6bc,#c29b4d);color:#514019;font-size:23px;box-shadow:inset 0 0 0 2px #ffffff6a} #main-content .pati-follower-hint .pati-goal-arrow{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #e6dfd2;color:#927239;font-size:17px} #main-content .pati-follower-hint .pati-goal-subtitle{font-size:12px;color:#66666b;font-weight:550} #main-content .pati-follower-hint .pati-goal-stats,#main-content .pati-follower-hint .pati-goal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700} #main-content .pati-follower-hint .pati-goal-stats strong{color:#7e622c;font-variant-numeric:tabular-nums} #main-content .pati-follower-hint .pati-goal-foot small{font-size:11px;color:#77777b} #main-content .pati-follower-hint .pati-goal-foot small:last-child{color:#8d6b30;font-weight:800} #main-content .pati-follower-hint .pati-follower-progress{height:8px;background:#ece8dd;border-radius:99px;overflow:hidden} #main-content .pati-follower-hint .pati-follower-progress i{background:linear-gradient(90deg,#b18c49,#efd79a);border-radius:inherit} html[data-pati-theme="dark"] #main-content .pati-follower-hint{background:linear-gradient(135deg,#222327,#302b23);border-color:#4a4032;color:#f9f7f1} html[data-pati-theme="dark"] #main-content .pati-follower-hint .pati-goal-subtitle,html[data-pati-theme="dark"] #main-content .pati-follower-hint .pati-goal-foot small{color:#c9c3b7} @media(max-width:420px){#main-content .pati-follower-hint{padding:13px 14px}#main-content .pati-follower-hint .pati-goal-header strong{font-size:15px}} /* Next-target badge uses the actual Patiyiz logo instead of a gold square. */ #main-content .pati-follower-hint .pati-goal-logo{ width:44px;height:44px;max-width:44px;flex:none;display:block; object-fit:contain;background:#000;border-radius:12px;border:0; box-shadow:0 1px 3px rgba(0,0,0,.1) } /* Gesture-triggered navigation slides in the swipe direction. */ @media(max-width:740px){ #main-content.pati-view-enter.pati-view-swipe-next{animation:pati-tab-enter-next .25s cubic-bezier(.18,.74,.2,1) both} #main-content.pati-view-enter.pati-view-swipe-prev{animation:pati-tab-enter-prev .25s cubic-bezier(.18,.74,.2,1) both} } @keyframes pati-tab-enter-next{from{opacity:.8;transform:translate3d(13%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes pati-tab-enter-prev{from{opacity:.8;transform:translate3d(-13%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @media(prefers-reduced-motion:reduce){ #main-content.pati-view-enter.pati-view-swipe-next,#main-content.pati-view-enter.pati-view-swipe-prev{animation:none!important} } /* patiyiz-mobile-rewards-shop-20261025.css */ /* Patiyiz · user-requested mobile, reward and shop polish · 2026-10-25 */ /* Keep saved highlight data untouched; remove the profile-only shelf from view. */ #main-content .pati-ig-highlight-section{display:none!important} /* New story: open the device gallery first; never show a giant empty black preview. */ #modal-root .modal:has(#story-form) .modal-content{display:block!important;padding:16px!important} #story-form .pati-story-quick-media{display:grid;gap:12px;background:#fff;border:1px solid #e9e9eb;border-radius:18px;padding:16px} #story-form .pati-story-quick-intro{display:flex;align-items:center;gap:12px} #story-form .pati-story-quick-intro>div{display:grid;gap:3px;min-width:0} #story-form .pati-story-quick-intro strong{color:#202125;font-size:16px;font-weight:850} #story-form .pati-story-quick-intro small{font-size:12px;color:#777981;line-height:1.4} #story-form .pati-story-quick-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#15161a;color:white;font-size:23px;flex:none} #story-form .pati-story-quick-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px} #story-form .pati-story-quick-buttons button{min-height:47px;border-radius:13px;padding:10px;border:1px solid #e4e5e8;font-weight:800;font-size:13px;cursor:pointer} #story-form .pati-story-quick-primary{background:#17181c;color:white;border-color:#17181c!important} #story-form .pati-story-quick-secondary{background:#f7f7f8;color:#23242a} #story-form #story-photo-preview[hidden]{display:none!important} #story-form #story-photo-preview:not([hidden]){display:flex;align-items:center;justify-content:center;min-height:0!important;max-height:48dvh;aspect-ratio:9/16;margin:0 auto;background:#0b0c10;border-radius:17px;overflow:hidden;width:min(100%,270px);box-shadow:0 12px 30px rgba(0,0,0,.12)} #story-form #story-photo-preview img{width:100%!important;height:100%!important;max-height:48dvh;object-fit:contain!important} #story-form .pati-story-quick-caption{display:grid;gap:8px;margin:14px 0 9px;font-size:13px;font-weight:800;color:#33353b} #story-form .pati-story-quick-caption span{font-size:11px;color:#9a9ba2;font-weight:550} #story-form .pati-story-quick-caption input{min-height:48px;padding:12px 14px;border:1px solid #e3e4e8;background:#f8f8fa;color:#22242a;border-radius:13px;outline:none;font-size:15px} #story-form .pati-story-quick-caption input:focus{border-color:#8f929b} #story-form .pati-story-quick-extras{background:#f7f7f8;border:1px solid #eeeef1;border-radius:13px;padding:12px;margin:10px 0} #story-form .pati-story-quick-extras summary{cursor:pointer;font-size:13px;font-weight:780;color:#35353a;list-style-position:inside} #story-form .pati-story-quick-extras .pati-story-editor{margin-top:12px;display:grid;gap:10px} #story-form .pati-story-quick-extras input,#story-form .pati-story-quick-extras select{max-width:100%;width:100%;min-height:42px} #story-form .pati-story-highlight-option{background:#f8f8fa!important;border-radius:13px!important} #modal-root .modal:has(#story-form) .modal-footer{background:#fff;border-top:1px solid #e9e9ed} @media(max-width:500px){ #modal-root .modal:has(#story-form) .modal-content{padding:12px!important} #story-form .pati-story-quick-media{padding:12px;border-radius:15px} #story-form #story-photo-preview:not([hidden]){max-height:43dvh} } /* PatiCoin: completed tasks appear separately at the very end. */ #main-content .paticoin-done-zone{margin-top:28px;padding-top:20px;border-top:1px solid #e9eaf0} #main-content .paticoin-done-zone .paticoin-task{opacity:.68;background:#f8f8fa;border-color:#ececf0} #main-content .paticoin-done-zone .paticoin-task-icon{background:#e5ece8!important;color:#317254!important} #main-content .paticoin-done-zone .paticoin-tasks:empty{display:none} /* Explore: sort controls, scrollable horizontally without layout shift. */ #main-content .pati-explore-media-screen .pati-explore-sort{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 12px 13px;white-space:nowrap} #main-content .pati-explore-sort::-webkit-scrollbar{display:none} #main-content .pati-explore-sort button{flex:0 0 auto;min-height:35px;padding:8px 13px;border:1px solid #e4e5e9;background:#f7f7f8;border-radius:100px;color:#4b4d54;font-size:11px;font-weight:800;cursor:pointer} #main-content .pati-explore-sort button.active{background:#1b1b1f;color:#fff;border-color:#1b1b1f} #main-content .pati-explore-sort button:focus-visible{outline:2px solid #767a84;outline-offset:2px} /* Premium magazine-style Pati Mağaza. Existing PatiCoin accounting is unchanged. */ #main-content .pati-shop-v2{max-width:1110px;margin:0 auto;padding:10px 12px 42px;min-width:0} #main-content .pati-shop-v2 .pati-shop-hero{background:radial-gradient(circle at 85% 10%,#48413c 0%,transparent 43%),linear-gradient(140deg,#141519,#29292f)!important;color:#fff;border:1px solid #282a30;border-radius:25px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:clamp(20px,4vw,38px);box-shadow:0 14px 32px rgba(13,14,17,.12)} #main-content .pati-shop-hero>div{min-width:0} #main-content .pati-shop-eyebrow{font-size:10px;letter-spacing:.13em;color:#e9cca0;font-weight:880} #main-content .pati-shop-hero h1{color:#fff!important;font-size:clamp(29px,5vw,43px);line-height:1.12;letter-spacing:-.045em;margin:8px 0 12px} #main-content .pati-shop-hero p{color:#c5c5ca;font-size:13px;line-height:1.6;max-width:480px;margin:0} #main-content .pati-shop-wallet{border:1px solid #ffffff36;background:#ffffff12;color:#fff;border-radius:18px;padding:16px 18px;display:grid;gap:5px;text-align:left;cursor:pointer;min-width:152px} #main-content .pati-shop-wallet>span{font-size:9px;letter-spacing:.1em;color:#c7c7cb;font-weight:800} #main-content .pati-shop-wallet strong{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:850;font-variant-numeric:tabular-nums} #main-content .pati-shop-wallet strong .pati-coin-icon{width:29px;height:29px} #main-content .pati-shop-wallet small{font-size:10px;color:#d7bd89;font-weight:750} #main-content .pati-shop-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:30px 3px 16px} #main-content .pati-shop-section-title span{color:#97918a;letter-spacing:.14em;font-size:9px;font-weight:800} #main-content .pati-shop-section-title h2{font-size:24px;letter-spacing:-.035em;color:#1d1d20;margin:5px 0 0} #main-content .pati-shop-section-title>small{font-size:11px;color:#93949a} #main-content .pati-shop-filter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 0 17px} #main-content .pati-shop-filter button{padding:9px 15px;white-space:nowrap;background:#f8f8f9;color:#484950;border:1px solid #e8e8ec;border-radius:100px;font-size:12px;font-weight:750;cursor:pointer} #main-content .pati-shop-filter button.active{background:#191a1e;color:#fff;border-color:#191a1e} #main-content .pati-shop-v2 .paticoin-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important;margin:0!important} #main-content .pati-shop-v2 .pati-shop-card{display:flex!important;flex-direction:column;gap:14px;min-width:0;min-height:242px;padding:21px!important;border:1px solid #e7e7ea!important;border-radius:21px!important;background:#fff!important;color:#212126!important;box-shadow:0 5px 17px rgba(18,20,28,.035)!important} #main-content .pati-shop-card.pati-shop-tree{background:linear-gradient(130deg,#f8fcfa,#eff8f2)!important;border-color:#d9ece0!important} #main-content .pati-shop-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} #main-content .pati-shop-card .paticoin-item-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:#f0f1f3;font-size:32px;line-height:1} #main-content .pati-shop-tree .paticoin-item-icon{background:#dfeee4} #main-content .pati-shop-type{font-size:10px;font-weight:820;color:#74757d;background:#f3f3f5;padding:7px 9px;border-radius:100px} #main-content .pati-shop-tree .pati-shop-type{background:#dbeee2;color:#31734b} #main-content .pati-shop-card-copy{flex:1;min-width:0} #main-content .pati-shop-card h3{font-size:18px!important;font-weight:850;line-height:1.25;letter-spacing:-.025em;color:#222328!important;margin:0 0 8px!important} #main-content .pati-shop-card p{font-size:12px!important;line-height:1.55;color:#73747d!important;margin:0!important} #main-content .pati-shop-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px} #main-content .pati-shop-card-bottom strong{display:flex;align-items:center;gap:6px;font-size:18px!important;font-variant-numeric:tabular-nums;color:#27282d!important;white-space:nowrap} #main-content .pati-shop-card-bottom small{color:#8f9198!important;font-weight:550;font-size:10px} #main-content .pati-shop-card-bottom button{border:0!important;border-radius:12px!important;background:#16171c!important;color:#fff!important;font-size:12px!important;font-weight:800!important;min-height:40px;white-space:nowrap;padding:10px 15px!important;cursor:pointer} #main-content .pati-shop-card-bottom button:focus-visible,#main-content .pati-shop-filter button:focus-visible{outline:2px solid #777;outline-offset:3px} #main-content .pati-shop-v2 .pati-shop-note{margin:22px 0 25px;background:#f7f7f8!important;border:1px solid #ededf0;border-radius:16px;padding:14px 16px;color:#62636a!important;font-size:11px;line-height:1.65} #main-content .pati-shop-v2 .paticoin-shop-orders-heading{border-top:1px solid #e6e6e9;padding-top:23px;margin-top:22px} #main-content .pati-shop-v2 .pati-shop-no-orders{padding:18px;background:#f7f7f9;border-radius:15px;color:#73747a;font-size:12px} #paticoin-checkout-form .pati-shop-tree-destination{padding:14px;border-radius:15px;background:#ecf7ee} #paticoin-checkout-form .pati-shop-tree-destination label{display:flex;align-items:center;font-weight:800;gap:8px;color:#244d34} #paticoin-checkout-form .pati-shop-tree-destination p{margin:10px 0 0;line-height:1.5;font-size:12px;color:#4b755a} @media(max-width:620px){ #main-content .pati-shop-v2{padding:5px 10px 30px} #main-content .pati-shop-v2 .pati-shop-hero{grid-template-columns:1fr;gap:16px;border-radius:20px;padding:21px} #main-content .pati-shop-hero h1{font-size:32px} #main-content .pati-shop-wallet{min-width:0;grid-template-columns:1fr auto;align-items:center} #main-content .pati-shop-wallet small{grid-column:1/-1} #main-content .pati-shop-v2 .paticoin-items{grid-template-columns:1fr!important;gap:12px!important} #main-content .pati-shop-v2 .pati-shop-card{min-height:0;padding:17px!important} #main-content .pati-shop-card .paticoin-item-icon{width:51px;height:51px} #main-content .pati-shop-card-bottom{flex-wrap:wrap} #main-content .pati-shop-section-title{margin-top:22px} } html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-card:not(.pati-shop-tree){background:#25262b!important;border-color:#3c3d44!important;color:#f6f6f7!important} html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-card:not(.pati-shop-tree) h3,html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-card:not(.pati-shop-tree) strong{color:#fff!important} /* patiyiz-ux-hayvanim-20261025.css */ /* Patiyiz - compact onboarding / pet center / store clarity / story editor */ #main-content .pati-progress-compact{display:block;max-width:800px;margin:8px auto 12px;padding:11px 13px;border-radius:15px;border:1px solid #e8e8eb;background:#fff;box-shadow:none} #main-content .pati-progress-compact>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:39px} #main-content .pati-progress-compact>summary::-webkit-details-marker{display:none} #main-content .pati-progress-compact .pati-progress-flag{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#1c1e23;color:#fff;flex:none} #main-content .pati-progress-compact .pati-progress-top strong{font-size:13px;font-weight:800} #main-content .pati-progress-compact .pati-progress-top p{margin:3px 0 0;font-size:11px;line-height:1.45;color:#666} #main-content .pati-progress-compact .pati-progress-count{margin-left:auto;font-size:11px;font-weight:800} #main-content .pati-progress-compact>.pati-progress-track{height:5px;overflow:hidden;border-radius:20px;margin:9px 0 0;background:#ececee} #main-content .pati-progress-compact>.pati-progress-track>div{height:100%;border-radius:20px} #main-content .pati-progress-compact:not([open])>.pati-progress-actions, #main-content .pati-progress-compact:not([open])>.pati-progress-optional{display:none!important} #main-content .pati-progress-compact[open] .pati-progress-actions{display:grid;gap:6px;margin-top:12px} #main-content .pati-progress-compact .pati-progress-action{min-height:48px} #main-content .pati-progress-optional{font-size:11px;color:#777;margin:10px 0 0} #main-content .pati-progress-optional button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;padding:2px;font-size:inherit;font-weight:750} #main-content .pati-pet-center-head{max-width:1050px;margin:4px auto 17px;padding:18px 18px 16px;border-radius:20px;border:1px solid #ececf0;background:linear-gradient(150deg,#fff,#f7f7f8)} #main-content .pati-pet-center-intro small{font-size:10px;font-weight:850;letter-spacing:.12em;color:#7e7f87} #main-content .pati-pet-center-intro h1{font-size:27px;margin:6px 0 5px;letter-spacing:-.05em;color:#202125} #main-content .pati-pet-center-intro p{font-size:12px;color:#707079;margin:0 0 14px} #main-content .pati-pet-center-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none} #main-content .pati-pet-center-tabs::-webkit-scrollbar{display:none} #main-content .pati-pet-center-tabs button{flex:1;min-width:max-content;padding:11px 13px;border:1px solid #e4e5e9;background:white;border-radius:12px;color:#46484f;font-weight:800;font-size:12px;cursor:pointer} #main-content .pati-pet-center-tabs button.active{background:#1e1f23;color:#fff;border-color:#1e1f23} #main-content .pati-pet-center-tabs button:focus-visible{outline:3px solid #878a96;outline-offset:2px} #main-content .pati-shop-stock-state{display:inline-flex;align-self:flex-start;align-items:center;min-height:26px;gap:6px;font-size:11px;font-weight:800;border-radius:50px;padding:5px 9px} #main-content .pati-shop-stock-state.is-out{background:#fae9e8;color:#ac2924} #main-content .pati-shop-stock-state.is-low{background:#fff1d9;color:#8a5809} #main-content .pati-shop-stock-state.is-pending{background:#e8ebf7;color:#4d518d} #main-content .pati-shop-stock-state.is-available{background:#e3f2e8;color:#296944} #main-content .pati-shop-card-bottom button:disabled{background:#777a81!important;cursor:not-allowed;opacity:.6} #story-form .pati-story-quick-media .pati-story-quick-buttons{order:0} #story-form .pati-story-quick-extras{margin-top:12px} #story-form .pati-story-quick-preview:not([hidden]){box-shadow:0 8px 22px #0002} html[data-pati-theme="dark"] #main-content .pati-progress-compact, html[data-pati-theme="dark"] #main-content .pati-pet-center-head{background:#25262a;color:#f8f8fa;border-color:#393b42} html[data-pati-theme="dark"] #main-content .pati-pet-center-intro h1{color:#f8f8fa} html[data-pati-theme="dark"] #main-content .pati-pet-center-tabs button:not(.active){background:#292b31;color:#e5e5e5;border-color:#42444a} @media(max-width:620px){ #main-content .pati-progress-compact{margin:6px 10px 9px;padding:9px 11px} #main-content .pati-pet-center-head{padding:14px 12px;margin:0 9px 12px;border-radius:15px} #main-content .pati-pet-center-intro h1{font-size:23px} #main-content .pati-pet-center-tabs button{font-size:11px;padding:10px 11px} } /* patiyiz-shared-create-studio-20261025.css */ /* Patiyiz shared create studio — posts, stories and Reels use the same gallery/crop layout. */ #post-form .pati-composer-flow{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;background:#f6f6f8;border:1px solid #e9e9ed;border-radius:13px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none} #post-form .pati-composer-flow span{font-size:11px;font-weight:800;color:#666971;white-space:nowrap;display:flex;align-items:center;gap:5px} #post-form .pati-composer-flow span b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#1d1f25;color:#fff;font-size:10px} #post-form .pati-composer-flow>i{font-size:10px;color:#bbbcc3;font-style:normal} #post-form[data-mode="story"] .pati-media-gallery{aspect-ratio:9/16;max-height:46dvh;min-height:200px;max-width:300px;margin:0 auto;border-radius:15px;overflow:hidden} #post-form[data-mode="story"] .pati-media-gallery img,#post-form[data-mode="story"] .pati-media-gallery video{width:100%;height:100%;object-fit:contain} #post-form[data-mode="story"] .pati-media-controls{margin-top:12px} #post-form[data-mode="story"] .pati-crop-preview{max-width:100%;overflow:hidden} #post-form[data-mode="story"] #pati-crop-canvas{max-width:100%;max-height:40dvh;object-fit:contain} #story-overlay .story-big-video,.story-fullscreen .story-big-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#09090d;z-index:1} #story-overlay .pati-story-sound{position:absolute;right:60px;top:42px;z-index:10015;background:#0009;color:#fff;padding:7px 12px;border:1px solid #ffffff45;border-radius:22px;font-size:12px;font-weight:780;cursor:pointer} #story-overlay .story-player-head{z-index:10010} #story-overlay .story-progress{z-index:10012} #story-overlay .story-caption{z-index:10012;pointer-events:none} #story-overlay .story-hit{z-index:5} @media(max-width:640px){#post-form .pati-composer-flow{padding:9px;gap:3px}#post-form .pati-composer-flow span{font-size:10px}#post-form .pati-composer-flow span b{width:18px;height:18px}#post-form[data-mode="story"] .pati-media-gallery{max-height:43dvh}} @media(prefers-reduced-motion:reduce){#post-form .pati-composer-flow *,#story-overlay .pati-story-sound{transition:none!important}} /* release-ux-polish-20261028.css */ /* Patiyiz release UX polish — additive, preserves existing layout and features. */ :root{--pati-tap-size:44px} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{overscroll-behavior-y:contain} button,input,textarea,select{font:inherit} button,[role="button"],a{-webkit-tap-highlight-color:transparent} button:not(:disabled),[role="button"]{touch-action:manipulation} button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.55} :where(button,a,input,textarea,select,[role="button"],[tabindex]):focus-visible{outline:3px solid #737b8c!important;outline-offset:3px!important} :where(input,textarea,select){max-width:100%} :where(textarea){resize:vertical} :where(img,video){max-width:100%} #main-content,#modal-root,.pati-create-modal{min-width:0} #main-content .empty-state{max-width:100%;padding:clamp(22px,5vw,42px) 18px;line-height:1.55} #main-content .empty-state h3{font-size:clamp(16px,4vw,20px);line-height:1.3} .toast-stack{pointer-events:none} .toast-stack .toast{pointer-events:auto;line-height:1.45;overflow-wrap:anywhere;max-width:min(440px,calc(100vw - 24px))} #pati-create-sheet:not([hidden]){overscroll-behavior:contain} #pati-create-sheet .pati-create-choice{transition:background-color .16s ease,border-color .16s ease,transform .16s ease} #pati-create-sheet .pati-create-choice:active{transform:scale(.985)} #pati-create-sheet .pati-create-choice:focus-visible{outline-color:#b8c4de!important} @media(hover:hover){#pati-create-sheet .pati-create-choice:hover{border-color:#a5a9b3}} @media(max-width:740px){ #app-root>.mobile-bottom{padding-bottom:max(env(safe-area-inset-bottom,0px),5px)!important} #app-root>.mobile-bottom button,#app-root>.mobile-bottom a{min-height:44px;min-width:44px} #main-content{overflow-wrap:break-word} #main-content>.page-intro .top-actions button{min-height:44px} #pati-create-sheet .pati-create-choice{min-height:68px} #modal-root :where(input:not([type="checkbox"]),textarea,select){font-size:16px!important} .toast-stack{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px))} } @media(prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto!important} #pati-create-sheet .pati-create-choice{transition:none!important} *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* profile-instagram-polish-20261028.css */ /* Patiyiz profile refinement 2026-10-28. Existing functions and tabs remain unchanged. */ #main-content .pati-ig-profile{width:100%;max-width:935px;margin-inline:auto;background:#fff;color:#17191d;overflow:hidden} #main-content .pati-ig-profile .pati-ig-summary{display:flex;align-items:center;gap:clamp(16px,5vw,56px);padding:26px clamp(16px,5vw,48px) 12px;background:#fff!important;border-radius:0!important} #main-content .pati-ig-profile .pati-ig-avatar{flex:0 0 clamp(88px,20vw,150px);width:clamp(88px,20vw,150px);height:clamp(88px,20vw,150px);display:grid;place-items:center;min-width:0} #main-content .pati-ig-profile .pati-ig-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} #main-content .pati-ig-profile .pati-ig-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:9px} #main-content .pati-ig-profile .pati-ig-handle-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0} #main-content .pati-ig-profile .pati-ig-handle{font-size:clamp(17px,3.7vw,22px);font-weight:600;letter-spacing:-.035em;overflow-wrap:anywhere} #main-content .pati-ig-profile .pati-ig-name{font-size:14px;line-height:1.35;font-weight:700;overflow-wrap:anywhere} #main-content .pati-ig-profile .pati-ig-stats{display:flex;align-items:center;gap:clamp(12px,3vw,38px);flex-wrap:wrap;margin-top:5px} #main-content .pati-ig-profile .pati-ig-stats>span,#main-content .pati-ig-profile .pati-ig-stats>button{display:flex;align-items:baseline;gap:5px;min-height:44px;padding:8px 0;background:transparent;border:0;color:#17191d;cursor:pointer} #main-content .pati-ig-profile .pati-ig-stats b{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums} #main-content .pati-ig-profile .pati-ig-stats small{font-size:13px;color:#454750} #main-content .pati-ig-profile .pati-ig-bio{padding:0 clamp(16px,5vw,48px) 10px!important;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;font-size:14px} #main-content .pati-ig-profile .pati-mutual-followers{margin:0 clamp(16px,5vw,48px) 10px} #main-content .pati-ig-profile .pati-ig-actions{display:flex;gap:8px;padding:10px clamp(16px,5vw,48px) 22px!important;flex-wrap:wrap} #main-content .pati-ig-profile .pati-ig-actions button{flex:1 1 130px;min-height:38px;border-radius:9px;font-size:13px;font-weight:700;box-shadow:none;max-width:330px} #main-content .pati-ig-profile .pati-ig-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ededf0;border-bottom:1px solid #f2f2f4;gap:0;padding:0!important;margin:0!important} #main-content .pati-ig-profile .pati-ig-tabs button{position:relative;min-height:49px;border-radius:0!important;background:transparent!important;color:#777b83!important;font-size:21px;display:grid;place-items:center} #main-content .pati-ig-profile .pati-ig-tabs button.active{color:#151515!important} #main-content .pati-ig-profile .pati-ig-tabs button.active:before{content:"";position:absolute;top:0;left:17%;width:66%;height:2px;background:#151515} #main-content .pati-ig-profile .pati-ig-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;padding:0!important;margin:0!important;background:#fff!important} #main-content .pati-ig-profile .pati-profile-tile{position:relative;aspect-ratio:1/1;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0!important;padding:0} #main-content .pati-ig-profile .pati-profile-tile img,#main-content .pati-ig-profile .pati-profile-tile video{width:100%;height:100%;object-fit:cover;display:block} #main-content .pati-ig-profile .pati-profile-tile:focus-visible{outline:3px solid #737b8c!important;outline-offset:-3px!important;z-index:2} #main-content .pati-ig-profile .pati-ig-empty{grid-column:1/-1;text-align:center;padding:50px 16px} @media(max-width:740px){ #main-content .pati-ig-profile .pati-ig-summary{padding:18px 14px 8px;gap:15px;align-items:center} #main-content .pati-ig-profile .pati-ig-avatar{flex-basis:86px;width:86px;height:86px} #main-content .pati-ig-profile .pati-ig-info{gap:4px} #main-content .pati-ig-profile .pati-ig-handle{font-size:17px} #main-content .pati-ig-profile .pati-ig-stats{gap:13px;margin-top:2px} #main-content .pati-ig-profile .pati-ig-stats>span,#main-content .pati-ig-profile .pati-ig-stats>button{flex-direction:column;align-items:center;gap:2px;justify-content:center;padding:4px 0} #main-content .pati-ig-profile .pati-ig-stats b{font-size:15px} #main-content .pati-ig-profile .pati-ig-stats small{font-size:11px;white-space:nowrap} #main-content .pati-ig-profile .pati-ig-bio{padding:8px 15px 6px!important} #main-content .pati-ig-profile .pati-ig-actions{padding:8px 14px 16px!important;gap:7px} #main-content .pati-ig-profile .pati-ig-actions button{max-width:none;flex-basis:110px} } @media(max-width:350px){#main-content .pati-ig-profile .pati-ig-summary{gap:10px}#main-content .pati-ig-profile .pati-ig-avatar{flex-basis:72px;width:72px;height:72px}#main-content .pati-ig-profile .pati-ig-stats{gap:9px}} /* menu-color-polish-20261028.css */ /* Patiyiz menu v2 — colorful categories without changing global branding */ .pati-color-menu{display:grid;gap:14px;padding:2px 0 12px} .pati-color-menu .pati-feature-intro{margin:0 0 2px;color:#687080;font-size:13px} .pati-color-menu .pati-feature-group{--menu-accent:#6757cf;--menu-bg:#f1efff;background:var(--menu-bg);border:1px solid color-mix(in srgb,var(--menu-accent) 13%,white);border-radius:18px;padding:14px 12px;min-width:0} .pati-color-menu .pati-menu-tone-green{--menu-accent:#23805d;--menu-bg:#eaf8f1} .pati-color-menu .pati-menu-tone-orange{--menu-accent:#bd6a21;--menu-bg:#fff2e5} .pati-color-menu .pati-menu-tone-blue{--menu-accent:#3475ad;--menu-bg:#eaf4ff} .pati-color-menu .pati-feature-group h3{margin:0 0 10px;padding:0 4px;font-size:14px;font-weight:800;color:var(--menu-accent);letter-spacing:.01em} .pati-color-menu .pati-mobile-menu-list{display:grid;gap:7px} .pati-color-menu .pati-mobile-menu-item{display:flex!important;align-items:center;gap:11px;min-height:52px;width:100%;border-radius:12px!important;padding:8px 11px!important;background:#fff!important;border:1px solid rgba(25,30,42,.055)!important;color:#20242c!important;text-align:left;font-weight:650;font-size:14px;box-shadow:0 2px 6px rgba(15,20,30,.025);min-width:0} .pati-color-menu .pati-mobile-menu-item>span:nth-child(2){flex:1;min-width:0} .pati-color-menu .pati-menu-icon{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--menu-accent);background:var(--menu-bg)} .pati-color-menu .pati-menu-icon svg{width:19px;height:19px} .pati-color-menu .pati-menu-arrow{color:#9ba2ae;display:grid;place-items:center} .pati-color-menu .pati-menu-arrow svg{width:15px;height:15px} .pati-color-menu .pati-feature-add-pet{--menu-accent:#23805d;--menu-bg:#eaf8f1} .pati-color-menu .pati-feature-add-pet .pati-mobile-menu-item{border:1px dashed #80bda1!important;background:#f2fbf6!important} @media(hover:hover){.pati-color-menu .pati-mobile-menu-item:hover{filter:brightness(.975);transform:translateY(-1px)}} @media(max-width:740px){.pati-color-menu{gap:11px}.pati-color-menu .pati-feature-group{padding:12px 10px}.pati-color-menu .pati-mobile-menu-item{min-height:54px}} @media(prefers-reduced-motion:reduce){.pati-color-menu .pati-mobile-menu-item{transition:none!important;transform:none!important}} /* section-colors-20261028.css */ /* Patiyiz section accent refresh: restrained colors, original interaction intact */ #main-content .lost-v2{--sec-accent:#b94b57;--sec-soft:#fff0f1;--sec-border:#f3c9ce} #main-content .adopt-v2{--sec-accent:#ba6a34;--sec-soft:#fff4e8;--sec-border:#f2d5b6} #main-content .care-v2{--sec-accent:#278566;--sec-soft:#eaf8f2;--sec-border:#c8eadc} #main-content .pati-edu-v2{--sec-accent:#7755bb;--sec-soft:#f3effe;--sec-border:#dcd0f8} #main-content .kb-v2{--sec-accent:#3179a9;--sec-soft:#edf7ff;--sec-border:#c9e4f8} #main-content :is(.lost-v2,.adopt-v2,.care-v2,.pati-edu-v2,.kb-v2) :is(.lost-v2-heading,.adopt-v2-heading,.care-v2-heading) small{color:var(--sec-accent);font-weight:800;letter-spacing:.075em} #main-content .lost-v2 .lost-v2-hero{background:linear-gradient(120deg,#fff1f2,#ffe5e7)!important;border:1px solid #f3c9ce!important;color:#682e37!important} #main-content .adopt-v2 .adopt-v2-hero{background:linear-gradient(120deg,#fff4e8,#ffe7cf)!important;border:1px solid #f2d5b6!important;color:#75451e!important} #main-content .care-v2 .care-v2-hero{background:linear-gradient(120deg,#ecfbf2,#d9f4e8)!important;border:1px solid #c8eadc!important;color:#175943!important} #main-content :is(.lost-v2,.adopt-v2,.care-v2) :is(.lost-v2-hero,.adopt-v2-hero,.care-v2-hero) h2{color:inherit!important} #main-content :is(.lost-v2,.adopt-v2,.care-v2) :is(.lost-v2-hero,.adopt-v2-hero,.care-v2-hero) p{color:inherit!important;opacity:.9} #main-content .lost-v2 .lost-v2-stats>div{background:#fff4f5!important;border-color:#f3c9ce!important} #main-content .adopt-v2 .adopt-v2-stats>div{background:#fff7ed!important;border-color:#f2d5b6!important} #main-content .care-v2 .care-v2-metrics>div{background:#f0faf5!important;border-color:#c8eadc!important} #main-content :is(.lost-v2,.adopt-v2,.care-v2) :is(.lost-v2-stats,.adopt-v2-stats,.care-v2-metrics) b{color:var(--sec-accent)!important} #main-content :is(.lost-v2,.adopt-v2,.care-v2) :is(.lost-v2-create,.adopt-v2-create,.care-v2-add){background:var(--sec-accent)!important;border-color:var(--sec-accent)!important;color:#fff!important;min-height:44px} #main-content .pati-edu-v2 :is(.edu-v2-hero,.edu-v2-progress,.edu-v2-lesson-meta){border-color:#dcd0f8} #main-content .pati-edu-v2 :is(.edu-v2-hero,.edu-v2-progress){background:linear-gradient(135deg,#f8f5ff,#f0eafe)} #main-content .pati-edu-v2 :is(.edu-v2-complete,.edu-v2-lesson-track span){color:#7755bb} #main-content .kb-v2 :is(.kb-v2-article-head,.kb-v2-hero){background:linear-gradient(130deg,#f4faff,#eaf5ff);border-color:#c9e4f8} #main-content .kb-v2 :is(.kb-v2-eyebrow,.kb-v2-detail-save.is-saved){color:#3179a9} @media(max-width:740px){#main-content :is(.lost-v2,.adopt-v2,.care-v2,.pati-edu-v2,.kb-v2){overflow-wrap:anywhere}} /* hayvanim-hub-20261028.css */ /* Hayvanim Merkezi — visual hub, independent of existing data modules */ #main-content .pati-pet-center-head{max-width:960px;margin:0 auto!important;padding:8px 14px!important;background:#fff} #main-content .pati-pet-center-tabs{display:flex;overflow-x:auto;gap:8px;padding:7px 0 12px;scrollbar-width:none} #main-content .pati-pet-center-tabs button{white-space:nowrap;min-height:42px;padding:10px 16px;border-radius:999px;background:#f3f4f7;color:#525662;border:1px solid #e9eaf0;font-weight:700} #main-content .pati-pet-center-tabs button.active{background:#17191d!important;color:white!important;border-color:#17191d} #main-content .pati-pet-hub{max-width:960px;margin:0 auto;padding:0 14px 28px;color:#1a1b21} #main-content .pati-hub-hero{background:linear-gradient(117deg,#dff2ff 0%,#f4e9fb 62%,#ffe8ef 100%);border-radius:24px;padding:25px 21px;display:flex;align-items:center;min-height:170px;overflow:hidden;gap:12px} #main-content .pati-hub-copy{flex:1;min-width:0;z-index:1} #main-content .pati-hub-copy small{font-size:11px;letter-spacing:.09em;color:#526b8c;font-weight:800} #main-content .pati-hub-copy h1{font-size:clamp(22px,4vw,31px);letter-spacing:-.035em;line-height:1.12;margin:10px 0} #main-content .pati-hub-copy p{max-width:350px;font-size:13px;line-height:1.55;color:#4d5566} #main-content .pati-hub-pet-photo{width:clamp(100px,24vw,195px);height:clamp(110px,25vw,190px);border-radius:45% 45% 20px 20px;background:#fff9;display:grid;place-items:center;overflow:hidden;font-size:65px;flex-shrink:0} #main-content .pati-hub-pet-photo img{width:100%;height:100%;object-fit:cover} #main-content .pati-hub-pet-strip{display:flex;align-items:center;gap:12px;background:white;border:1px solid #ececf1;padding:11px 13px;border-radius:18px;margin:12px 0 24px;box-shadow:0 5px 20px #1b24300b} #main-content .pati-hub-pet-strip>span{width:49px;height:49px;border-radius:50%;background:#e5f5ff;display:grid;place-items:center;overflow:hidden;font-size:26px;flex-shrink:0} #main-content .pati-hub-pet-strip>span img{width:100%;height:100%;object-fit:cover} #main-content .pati-hub-pet-strip>div{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0} #main-content .pati-hub-pet-strip strong{font-size:15px;overflow-wrap:anywhere} #main-content .pati-hub-pet-strip small{font-size:12px;color:#717786} #main-content .pati-hub-pet-strip button{background:#f4f6fa;color:#242830;padding:10px 12px;border-radius:11px;font-weight:700;min-height:42px;font-size:12px} #main-content .pati-hub-section-title{font-size:19px;letter-spacing:-.03em;margin:0 0 15px} #main-content .pati-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main-content .pati-hub-card{--hub-bg:#eff5ff;--hub-ink:#2873b8;position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;min-height:155px;border:1px solid #ffffff9a!important;border-radius:20px;padding:16px;background:var(--hub-bg)!important;color:#20232b!important;gap:9px;box-shadow:none} #main-content .pati-hub-mint{--hub-bg:#e4f8ed;--hub-ink:#219961} #main-content .pati-hub-sky{--hub-bg:#e4f3ff;--hub-ink:#2481d6} #main-content .pati-hub-sun{--hub-bg:#fff0d8;--hub-ink:#e17c22} #main-content .pati-hub-rose{--hub-bg:#ffe5ed;--hub-ink:#de4c80} #main-content .pati-hub-lilac{--hub-bg:#f1e5ff;--hub-ink:#8f51ce} #main-content .pati-hub-blue{--hub-bg:#e3f2ff;--hub-ink:#327ec6} #main-content .pati-hub-icon{width:45px;height:45px;border-radius:14px;background:var(--hub-ink);display:grid;place-items:center;color:white} #main-content .pati-hub-icon svg{width:23px;height:23px} #main-content .pati-hub-card strong{font-size:15px;letter-spacing:-.015em} #main-content .pati-hub-card small{max-width:95%;font-size:12px;line-height:1.4;color:#515764} #main-content .pati-hub-chevron{position:absolute;top:21px;right:16px;font-size:27px;color:var(--hub-ink)} #main-content .pati-hub-foot{margin:21px 0 3px;padding:18px;border-radius:17px;background:#fff3df;text-align:center;color:#805d31;font-size:13px;font-weight:650} @media(min-width:760px){#main-content .pati-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:380px){#main-content .pati-hub-hero{padding:18px 14px}.pati-hub-pet-photo{width:85px!important;height:105px!important}#main-content .pati-hub-grid{gap:9px}#main-content .pati-hub-card{padding:12px;min-height:158px}#main-content .pati-hub-card strong{font-size:13px}} @media(hover:hover){#main-content .pati-hub-card:hover{filter:saturate(1.1) brightness(.985);transform:translateY(-2px)}} @media(prefers-reduced-motion:reduce){#main-content .pati-hub-card{transition:none;transform:none!important}} /* Hub navigation v2: all features grouped, no top tabs */ #main-content .pati-hub-sections{display:grid;gap:25px} #main-content .pati-hub-category{min-width:0} #main-content .pati-hub-section-title{margin:0 0 13px;font-size:19px;font-weight:800;letter-spacing:-.03em} #main-content .pati-hub-other-pets{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px} #main-content .pati-hub-mini-pet{flex:none;padding:7px 12px;border-radius:999px;background:#f4f2fc;color:#504685;font-size:12px;font-weight:700} #main-content .pati-hub-detail-back{padding:10px 14px 0;max-width:960px;margin:auto} #main-content .pati-hub-detail-back button{border:0;background:#edf3ff;color:#225d9d;border-radius:13px;min-height:43px;padding:10px 15px;font-weight:800} #main-content .pati-hub-hero .pati-hub-pet-photo{border:3px solid #ffffffab;box-shadow:0 12px 26px #1b24301c} /* simple-pet-pages-20261028.css */ /* Patiyiz simple screens — retain all actions, forms and saved data. */ #main-content :is(.care-v2,.lost-v2,.adopt-v2,.pati-edu-v2,.kb-v2,.wellness-v2){max-width:960px;margin-inline:auto;overflow-wrap:anywhere} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-hero,.lost-v2-hero,.adopt-v2-hero){display:none!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-heading,.lost-v2-heading,.adopt-v2-heading){background:#fff!important;border:0!important;border-radius:0!important;padding:15px 6px 16px!important;display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-heading,.lost-v2-heading,.adopt-v2-heading) h1{font-size:clamp(23px,5vw,30px)!important;letter-spacing:-.04em} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-heading,.lost-v2-heading,.adopt-v2-heading) p{font-size:13px!important;color:#697281} #main-content .care-v2 .care-v2-metrics>div:nth-child(1),#main-content .care-v2 .care-v2-metrics>div:nth-child(3){display:none!important} #main-content .care-v2 .care-v2-metrics,#main-content .lost-v2 .lost-v2-stats,#main-content .adopt-v2 .adopt-v2-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;margin:8px 0 18px!important} #main-content .care-v2 .care-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-metrics,.lost-v2-stats,.adopt-v2-stats)>div{padding:14px 8px!important;border-radius:17px!important;min-width:0;text-align:center} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-metrics,.lost-v2-stats,.adopt-v2-stats) span{font-size:12px!important;overflow-wrap:anywhere} #main-content .care-v2 .care-v2-shortcut{border-radius:16px;padding:12px!important;margin:8px 0!important} #main-content .care-v2 .care-v2-shortcut p{display:none} #main-content .care-v2 .care-v2-filter-title,#main-content .lost-v2 .lost-v2-row,#main-content .adopt-v2 .adopt-v2-row{display:none!important} #main-content .care-v2 .care-v2-filters,#main-content .lost-v2 .lost-v2-filters,#main-content .adopt-v2 .adopt-v2-filters{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;scrollbar-width:none;padding:4px 1px 12px!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-filters,.lost-v2-filters,.adopt-v2-filters) button{flex-shrink:0;min-height:41px!important;border-radius:999px!important;padding:9px 13px!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-search,.lost-v2-search,.adopt-v2-search){border-radius:13px!important;margin-bottom:12px!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-grid,.lost-v2-grid,.adopt-v2-grid){gap:12px!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-notice,.lost-v2-privacy,.adopt-v2-safety){font-size:12px;line-height:1.5;border-radius:12px;padding:10px 12px} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-hero{padding:18px!important;border-radius:20px!important} #main-content .pati-edu-v2:not(.edu-v2-detail) :is(.edu-v2-metrics,.edu-v2-statistics){display:none!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-hero{display:none!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-title{padding:15px 0!important} #main-content .wellness-v2 .pati-wellness-heading{border-radius:20px!important;padding:17px!important;background:linear-gradient(125deg,#e6f9ee,#e8f3ff)!important} #main-content .wellness-v2 :is(.wellness-v2-event,.pati-wellness-event){border-radius:16px!important;box-shadow:none!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2,.pati-edu-v2,.kb-v2,.wellness-v2) button:focus-visible{outline:3px solid #5685b8!important;outline-offset:2px} @media(max-width:740px){#main-content :is(.care-v2,.lost-v2,.adopt-v2,.pati-edu-v2,.kb-v2,.wellness-v2){padding-inline:12px!important}#main-content :is(.care-v2,.lost-v2,.adopt-v2) :is(.care-v2-heading,.lost-v2-heading,.adopt-v2-heading) button{min-height:44px}} /* pet-center-linked-polish-20261028.css */ /* Pet Center connected pages — restrained premium accents */ #main-content .pati-pet-hub-return{position:relative;margin:0 0 15px;display:flex;align-items:center;padding:6px 0 9px} #main-content .pati-pet-hub-return button{min-height:44px;padding:11px 16px;border:1px solid #dce7f4;border-radius:14px;background:linear-gradient(115deg,#e8f5ff,#f5ecff);font-size:13px;font-weight:800;color:#294d73;box-shadow:0 2px 10px #7da5cd13} #main-content .pati-pet-hub-linked{padding-top:10px} #main-content .pati-pet-hub-linked :is(.lost-v2-heading,.adopt-v2-heading,.kb-v2-title,.pati-edu-hero){border-radius:20px!important;padding:16px!important;background:linear-gradient(120deg,#f1f7ff,#f6f0ff)!important} #main-content .pati-pet-hub-linked.lost-v2 .lost-v2-heading{background:linear-gradient(120deg,#fff0f3,#f4edff)!important} #main-content .pati-pet-hub-linked.adopt-v2 .adopt-v2-heading{background:linear-gradient(120deg,#fff5e9,#ffebf2)!important} #main-content .pati-pet-hub-linked.kb-v2 .kb-v2-title{background:linear-gradient(120deg,#ecf7ff,#f2eeff)!important} #main-content .pati-pet-hub-linked.pati-edu-v2 .pati-edu-hero{background:linear-gradient(120deg,#fff1d9,#f6eeff)!important} #main-content .pati-pet-hub-linked :is(.lost-v2-filters,.adopt-v2-filters){max-width:100%;scrollbar-width:none} #main-content .pati-pet-hub .pati-hub-card{min-height:146px!important;box-shadow:0 5px 16px rgba(30,44,65,.045)!important} #main-content .pati-pet-hub .pati-hub-section-title{margin-top:4px} #main-content .pati-pet-hub .pati-hub-category{padding-top:2px} @media(max-width:740px){#main-content .pati-pet-hub-return{margin:0 0 10px}#main-content .pati-pet-hub-linked{padding-top:4px}#main-content .pati-pet-hub .pati-hub-card{min-height:145px!important}} /* pet-simple-a-20261028.css */ /* A design: direct actions, short labels, colorful but quiet. */ #main-content .pati-pet-hub .pati-hub-card{min-height:108px!important;gap:10px!important;padding:14px!important;border-radius:18px!important;justify-content:space-between} #main-content .pati-pet-hub .pati-hub-card small{display:none!important} #main-content .pati-pet-hub .pati-hub-icon{width:38px!important;height:38px!important;border-radius:12px!important} #main-content .pati-pet-hub .pati-hub-card strong{font-size:14px!important;line-height:1.25} #main-content .pati-pet-hub .pati-hub-chevron{top:14px!important;font-size:21px!important} #main-content .pati-pet-hub .pati-hub-grid{gap:10px!important} #main-content .pati-care-simple{max-width:780px;margin:auto;padding:12px 15px 35px!important} #main-content .pati-care-simple .pati-simple-head{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:8px 0 20px} #main-content .pati-care-simple .pati-simple-head small{font-size:10px;letter-spacing:.09em;font-weight:800;color:#21855c} #main-content .pati-care-simple .pati-simple-head h1{font-size:clamp(24px,5vw,29px);margin:4px 0;letter-spacing:-.035em} #main-content .pati-care-simple .pati-simple-head p{font-size:13px;color:#687381} #main-content .pati-care-simple .pati-simple-add{background:#24865d;color:white;border:0;border-radius:12px;padding:12px 14px;min-height:44px;font-weight:750} #main-content .pati-care-simple .pati-simple-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0 24px} #main-content .pati-care-simple .pati-simple-filter{min-width:0;min-height:86px;background:#e9f6ff;border:1px solid #d3e9fa;border-radius:17px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:12px 4px;color:#2b5b85} #main-content .pati-care-simple .pati-simple-filter:nth-child(2){background:#fff3df;border-color:#f7e5c7;color:#9d6825} #main-content .pati-care-simple .pati-simple-filter:nth-child(3){background:#e5f8ed;border-color:#cbeedb;color:#22794f} #main-content .pati-care-simple .pati-simple-filter.active{outline:2px solid currentColor;outline-offset:-3px} #main-content .pati-care-simple .pati-simple-filter b{font-size:23px;font-variant-numeric:tabular-nums} #main-content .pati-care-simple .pati-simple-filter span{font-size:12px;font-weight:650} #main-content .pati-care-simple .pati-simple-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px} #main-content .pati-care-simple .pati-simple-list-head h2{margin:0;font-size:19px} #main-content .pati-care-simple .pati-simple-list-head button{border:0;background:transparent;color:#4773a1;font-size:13px;font-weight:750;min-height:40px} #main-content .pati-care-simple .care-v2-list{display:grid;gap:10px} #main-content .pati-care-simple .care-v2-card{border-radius:16px!important} #main-content .pati-care-simple .pati-simple-empty{background:#f8f9fb;border:1px dashed #d8dde6;border-radius:18px;padding:30px 18px;display:grid;justify-items:center;gap:9px;text-align:center} #main-content .pati-care-simple .pati-simple-empty span{font-size:28px} #main-content .pati-care-simple .pati-simple-empty p{font-size:13px;color:#777f8a} #main-content .pati-care-simple .pati-simple-empty button{padding:10px 15px;background:#24865d;color:white;border-radius:10px} #main-content .pati-care-simple .pati-simple-disclaimer{margin-top:22px;font-size:11px;color:#7b8492;line-height:1.5} @media(max-width:370px){#main-content .pati-care-simple .pati-simple-filter span{font-size:11px}#main-content .pati-pet-hub .pati-hub-card{min-height:104px!important}} /* shop-contrast-refresh-20261028.css */ /* Accessible readable theme refresh; shop redesigned without changing coin transactions. */ #main-content .pati-shop-v2{max-width:980px;margin-inline:auto;color:#20242e} #main-content .pati-shop-v2 .pati-shop-hero{background:linear-gradient(125deg,#e8f5ff 0%,#f1eaff 54%,#fff1e3 100%)!important;color:#202438!important;border:1px solid #e2e9f2!important;border-radius:24px!important;padding:22px!important;box-shadow:none!important} #main-content .pati-shop-v2 .pati-shop-hero h1{color:#1e293b!important;font-size:clamp(26px,5vw,35px)} #main-content .pati-shop-v2 .pati-shop-hero p{color:#475569!important;opacity:1!important} #main-content .pati-shop-v2 .pati-shop-eyebrow{color:#52679b!important} #main-content .pati-shop-v2 .pati-shop-wallet{background:#fff!important;color:#1f2937!important;border:1px solid #d8e2f4!important;border-radius:17px!important;box-shadow:0 5px 14px #33415510!important} #main-content .pati-shop-v2 .pati-shop-wallet :is(strong,span,small){color:#273e5e!important} #main-content .pati-shop-v2 .pati-shop-filter{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px;padding:6px 1px 14px;scrollbar-width:none} #main-content .pati-shop-v2 .pati-shop-filter button{flex-shrink:0;border:1px solid #dce3ed!important;background:#f4f6fa!important;color:#394657!important;border-radius:999px!important;min-height:41px;padding:9px 16px!important;font-weight:700} #main-content .pati-shop-v2 .pati-shop-filter button.active{background:#202b40!important;color:#fff!important;border-color:#202b40!important} #main-content .pati-shop-v2 .pati-shop-card{background:#fff!important;color:#1f2937!important;border:1px solid #e4e9f1!important;border-radius:20px!important;box-shadow:0 8px 28px #17233a0c!important;overflow:hidden} #main-content .pati-shop-v2 .pati-shop-card:nth-of-type(4n+1) .pati-shop-card-top{background:#e9f6ed!important} #main-content .pati-shop-v2 .pati-shop-card:nth-of-type(4n+2) .pati-shop-card-top{background:#e8f3ff!important} #main-content .pati-shop-v2 .pati-shop-card:nth-of-type(4n+3) .pati-shop-card-top{background:#fff0e3!important} #main-content .pati-shop-v2 .pati-shop-card:nth-of-type(4n+4) .pati-shop-card-top{background:#f4ebff!important} #main-content .pati-shop-v2 .pati-shop-card h3{color:#1e293b!important;font-weight:800} #main-content .pati-shop-v2 .pati-shop-card p{color:#566174!important;opacity:1!important} #main-content .pati-shop-v2 .pati-shop-type{color:#334155!important;background:#ffffffd9!important;border-radius:999px!important} #main-content .pati-shop-v2 .pati-shop-stock-state{font-weight:700} #main-content .pati-shop-v2 .pati-shop-card-bottom strong{color:#1e293b!important} #main-content .pati-shop-v2 .pati-shop-card-bottom button:not(:disabled){background:#232a38!important;color:#fff!important;border-radius:11px!important;min-height:43px} #main-content .pati-shop-v2 .pati-shop-card-bottom button:disabled{background:#eef1f5!important;color:#606c7d!important;opacity:1!important} #main-content .pati-pet-hub .pati-hub-card strong{color:#1c2734!important} #main-content .pati-pet-hub .pati-hub-section-title{color:#212b3c!important} #main-content .pati-pet-hub .pati-hub-copy :is(h1,p){color:#263851!important} #main-content :is(.care-v2,.lost-v2,.adopt-v2,.pati-edu-v2,.kb-v2,.wellness-v2) :is(h1,h2,h3){color:#202936} #main-content :is(.care-v2,.lost-v2,.adopt-v2,.pati-edu-v2,.kb-v2,.wellness-v2) input{color:#263244!important;background:#fff!important} @media(max-width:740px){#main-content .pati-shop-v2 .pati-shop-hero{padding:17px!important}#main-content .pati-shop-v2 .pati-shop-wallet{min-height:64px}} /* pet-hub-unified-v3-20261028.css */ /* Patiyiz common pet experience v3: a calm, usable mobile-first system */ #main-content .pati-own-pets,#main-content .pati-health-home{max-width:790px;margin:0 auto;padding:18px 14px 32px;color:#202c3a} #main-content .pati-own-pets h1{font-size:27px;margin:0 0 5px} #main-content .pati-own-pets>p{color:#657085;font-size:13px} #main-content .pati-own-pets-list{display:grid;gap:11px;margin:23px 0} #main-content .pati-own-pets-list article{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid #e5eaf1;background:#fff;border-radius:17px} #main-content .pati-own-pets-image{width:60px;height:60px;flex-shrink:0;border-radius:16px;background:#f5ebff;display:grid;place-items:center;font-size:27px;overflow:hidden} #main-content .pati-own-pets-image img{width:100%;height:100%;object-fit:cover} #main-content .pati-own-pets-list article>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:5px} #main-content .pati-own-pets-list article small{color:#677486} #main-content .pati-own-pets-list article button,#main-content .pati-own-pets-add{padding:11px 15px;min-height:43px;border:0;background:#e8f4fe;color:#225781;border-radius:12px;font-weight:750} #main-content .pati-own-pets-add{background:#1f2937;color:#fff} #main-content .pati-hub-mini-pet{border:1px solid #e0d6f1!important;cursor:pointer} #main-content .pati-hub-mini-pet.active{background:#3e3477!important;color:#fff!important} #main-content .pati-health-pet{background:linear-gradient(110deg,#e8f8f0,#e9f3ff);padding:17px;border-radius:22px;display:flex;align-items:center;gap:16px} #main-content .pati-health-pet-image{height:86px;width:86px;flex-shrink:0;display:grid;place-items:center;background:#fff;border-radius:23px;overflow:hidden;font-size:41px} #main-content .pati-health-pet-image img{width:100%;height:100%;object-fit:cover} #main-content .pati-health-pet h1{font-size:25px;margin:6px 0} #main-content .pati-health-pet small{font-size:10px;color:#346e61;font-weight:800;letter-spacing:.07em} #main-content .pati-health-pet p{color:#587180;font-size:13px} #main-content .pati-health-next{display:flex;flex-direction:column;gap:7px;background:#fff7e8;border:1px solid #f3e4c6;border-radius:17px;padding:17px;margin:14px 0 23px} #main-content .pati-health-next span{color:#945e24;font-size:12px;font-weight:750} #main-content .pati-health-next strong{font-size:16px} #main-content .pati-health-next small{color:#796d60} #main-content .pati-health-home h2{font-size:18px;margin:0 0 13px} #main-content .pati-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} #main-content .pati-health-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:15px;justify-content:space-between;min-height:122px;text-align:left;border:0;border-radius:18px;padding:16px;background:#e7f5ff;color:#1e2e45} #main-content .pati-health-grid button:nth-child(2){background:#e6f7ed} #main-content .pati-health-grid button:nth-child(3){background:#fff1e3} #main-content .pati-health-grid button:nth-child(4){background:#f1e8ff} #main-content .pati-health-grid button span{font-size:27px} #main-content .pati-health-grid button strong{font-size:15px} #main-content .pati-health-add{margin:17px 0;border:0;background:#25384d;color:#fff;border-radius:13px;min-height:45px;padding:12px 16px;font-weight:750} #main-content .pati-care-simple .pati-care-more{position:relative;display:inline-flex;align-items:center} #main-content .pati-care-simple .pati-care-more summary{list-style:none;cursor:pointer;min-width:36px;min-height:40px;display:grid;place-items:center;font-weight:900;color:#566579} #main-content .pati-care-simple .pati-care-more summary::-webkit-details-marker{display:none} #main-content .pati-care-simple .pati-care-more>div{position:absolute;right:0;top:100%;width:120px;background:#fff;border:1px solid #dae2ee;border-radius:12px;z-index:5;box-shadow:0 8px 25px #1a273a22;padding:5px;display:grid} #main-content .pati-care-simple .pati-care-more button{background:transparent;color:#263143;text-align:left;min-height:40px} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;overflow:visible!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button{white-space:normal!important;text-align:left!important;min-height:64px!important;padding:13px!important;border:1px solid #e6e3ee!important;border-radius:16px!important;background:#f3ecff!important;color:#543c83!important;font-weight:750} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button:nth-child(4n+2){background:#e7f5ff!important;color:#2d658a!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button:nth-child(4n+3){background:#e9f8ed!important;color:#287448!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button:nth-child(4n+4){background:#fff2e2!important;color:#915c23!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button.active{outline:2px solid currentColor;outline-offset:-3px} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-stats,#main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-status-filters,#main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-filter-title{display:none!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories button{border-radius:16px!important;min-height:61px!important;white-space:normal!important;text-align:left!important;background:#e8f4ff!important;color:#255c8c!important;padding:12px!important;font-weight:750} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories button:nth-child(3n+2){background:#f3edff!important;color:#7344a4!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories button:nth-child(3n+3){background:#e9f8ef!important;color:#29724e!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories button.is-active{outline:2px solid currentColor;outline-offset:-3px} #main-content .lost-v2 .lost-v2-grid img,#main-content .adopt-v2 .adopt-v2-grid img{width:100%;object-fit:cover} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card,.adopt-v2-card){border:1px solid #e5eaf0!important;border-radius:19px!important;overflow:hidden;box-shadow:0 5px 19px #2834480c!important} #main-content .pati-shop-v2 .pati-shop-card-top{min-height:100px} #main-content .pati-shop-v2 .pati-shop-stock-state{font-size:12px} #main-content .pati-shop-v2 .pati-shop-card-bottom button{font-size:13px} @media(max-width:350px){#main-content .pati-health-pet-image{height:68px;width:68px}#main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button{font-size:12px}} /* Health drilldown shows only information relevant to selected tile */ #main-content .pati-health-detail.pati-health-topic-weight :is(.wellness-v2-heading-row:first-of-type,.wellness-v2-filters,.pati-wellness-events){display:none!important} #main-content .pati-health-detail:not(.pati-health-topic-weight) :is(.pati-wellness-weights){display:none!important} #main-content .pati-health-detail .pati-wellness-summary{display:none!important} #main-content .pati-health-detail .pati-wellness-heading{padding:15px!important} #main-content .pati-health-detail .pati-wellness-heading p{font-size:12px} #main-content .pati-health-detail .pati-wellness-event{background:white!important} #main-content .pati-health-detail.pati-health-topic-weight .wellness-v2-filters{display:none!important} /* pet-reference-redesign-20261028.css */ /* Patiyiz visual redesign inspired by friendly modern pet-care interfaces. Original assets and operational actions retained. Scoped to pet modules. */ #main-content :is(.pati-pet-hub,.pati-care-simple,.pati-health-home,.wellness-v2,.pati-edu-v2,.kb-v2,.lost-v2,.adopt-v2,.pati-shop-v2){--pati-text:#1b293b;--pati-muted:#607086;color:var(--pati-text);max-width:950px;margin-inline:auto} #main-content :is(.pati-pet-hub,.pati-care-simple,.pati-health-home,.wellness-v2,.pati-edu-v2,.kb-v2,.lost-v2,.adopt-v2,.pati-shop-v2) :is(button,a){-webkit-tap-highlight-color:transparent} #main-content .pati-pet-hub .pati-hub-hero{background:linear-gradient(120deg,#e5f4ff,#f2e8ff 60%,#ffe8eb)!important;min-height:195px;border-radius:26px!important;padding:22px!important} #main-content .pati-pet-hub .pati-hub-copy h1{font-size:clamp(25px,5vw,35px)!important;line-height:1.14} #main-content .pati-pet-hub .pati-hub-pet-photo{border-radius:28px!important;border:4px solid #fff!important;background:#fff!important} #main-content .pati-pet-hub .pati-hub-card{border-radius:22px!important;min-height:126px!important;padding:17px!important;box-shadow:0 4px 16px #25324a0d!important;border:1px solid #fff8!important} #main-content .pati-pet-hub .pati-hub-icon{width:44px!important;height:44px!important;border-radius:14px!important} #main-content .pati-pet-hub .pati-hub-grid{gap:12px!important} #main-content .pati-pet-hub .pati-hub-section-title{font-size:20px!important} #main-content .pati-health-home .pati-health-pet{min-height:148px;border-radius:26px!important;background:linear-gradient(125deg,#deefff,#e9f8f1)!important} #main-content .pati-health-home .pati-health-pet-image{height:100px;width:100px;border-radius:24px!important} #main-content .pati-health-home .pati-health-grid button{min-height:141px!important;border-radius:22px!important;padding:19px!important} #main-content .pati-health-home .pati-health-grid button strong{font-size:16px!important} #main-content .pati-health-home .pati-health-next{border-radius:20px!important;min-height:90px} #main-content .pati-care-simple .pati-simple-head{padding:15px 0 4px} #main-content .pati-care-simple .pati-simple-filters{gap:11px!important} #main-content .pati-care-simple .pati-simple-filter{min-height:100px!important;border-radius:21px!important;gap:8px!important} #main-content .pati-care-simple .care-v2-item{display:flex;align-items:center;gap:10px;border:1px solid #e7eaf0!important;border-radius:19px!important;background:#fff!important;padding:13px!important;box-shadow:0 4px 15px #23344c08} #main-content .pati-care-simple .care-v2-item-icon{height:47px;width:47px;border-radius:15px;background:#eaf8f1;flex-shrink:0;display:grid;place-items:center} #main-content .pati-care-simple .care-v2-item h3{color:#202c39!important;font-size:15px} #main-content .pati-care-simple .care-v2-item-main{flex:1;min-width:0} #main-content .pati-care-simple .care-v2-item-head{display:none!important} #main-content .pati-care-simple .care-v2-item-main p{font-size:12px;color:#6b7684} #main-content .pati-care-simple .care-v2-complete{border-radius:12px!important;background:#e7f6ed!important;color:#25704b!important;min-height:42px} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-hero{background:linear-gradient(115deg,#f6eaff,#fff1e1)!important;border:0!important;border-radius:25px!important;padding:23px!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-hero :is(h1,p,small,span){color:#352849!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .pati-edu-categories button{border-radius:21px!important;min-height:84px!important;padding:17px!important;font-size:15px!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-card{border:1px solid #e6eaf1!important;border-radius:19px!important;background:white!important;box-shadow:0 4px 16px #2a32430a!important} #main-content .pati-edu-v2:not(.edu-v2-detail) .edu-v2-card .pati-edu-emoji{border-radius:14px;background:#f1ebff} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-title{border-radius:22px!important;background:linear-gradient(120deg,#e9f6ff,#f3eeff)!important;padding:19px!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-categories button{min-height:80px!important;border-radius:20px!important;font-size:14px!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-card{border-radius:20px!important;border:1px solid #e5eaf2!important;box-shadow:0 5px 16px #25324a0c!important;background:#fff!important} #main-content .kb-v2:not(.kb-v2-detail) .kb-v2-card-open{background:transparent!important;color:#253249!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-heading,.adopt-v2-heading){border-radius:24px!important;padding:19px!important} #main-content .lost-v2 .lost-v2-heading{background:linear-gradient(110deg,#ffe9f0,#f2edff)!important} #main-content .adopt-v2 .adopt-v2-heading{background:linear-gradient(110deg,#fff0df,#ffeaf1)!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card,.adopt-v2-card){background:#fff!important;border-radius:22px!important;box-shadow:0 8px 24px #26384c10!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-cover,.adopt-v2-cover){aspect-ratio:4/3;overflow:hidden;background:#f1f5f9} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-cover,.adopt-v2-cover) img{width:100%;height:100%;object-fit:cover} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info){padding:15px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-description,.adopt-v2-description){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-actions,.adopt-v2-actions) button{min-height:42px;border-radius:11px!important} #main-content .pati-shop-v2 .pati-shop-hero{border-radius:26px!important;padding:23px!important;background:linear-gradient(115deg,#e3f3ff,#f1e8ff,#ffece4)!important} #main-content .pati-shop-v2 .paticoin-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important} #main-content .pati-shop-v2 .pati-shop-card{border-radius:22px!important;box-shadow:0 8px 22px #22324c0c!important} #main-content .pati-shop-v2 .pati-shop-card-top{min-height:125px!important;border-radius:17px 17px 0 0} #main-content .pati-shop-v2 .paticoin-item-icon{font-size:43px!important} #main-content .pati-shop-v2 .pati-shop-card-copy{padding:13px!important} #main-content .pati-shop-v2 .pati-shop-card-bottom{padding:12px!important} #main-content .pati-shop-v2 .pati-shop-card :is(h3,p,.pati-shop-type){color:#253248!important} #main-content .pati-shop-v2 .pati-shop-card p{font-size:12px;line-height:1.5} @media(max-width:540px){#main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:minmax(0,1fr)!important}#main-content .pati-shop-v2 .paticoin-items{grid-template-columns:minmax(0,1fr)!important}#main-content .pati-shop-v2 .pati-shop-hero{padding:16px!important}#main-content .pati-health-home .pati-health-pet-image{width:80px;height:80px}} @media(prefers-reduced-motion:reduce){#main-content :is(.pati-hub-card,.edu-v2-card,.kb-v2-card,.pati-shop-card){transition:none!important;transform:none!important}} /* patiyiz-five-reference-screens-20261028.css */ /* Patiyiz 2026 • photo-first, five reference screen families The designs are adapted to real data and existing operations; no simulated tracking or scores. */ #main-content .pati-ref-hub,#main-content .pati-ref-care,#main-content .pati-health-home, #main-content .pati-ref-academy-home,#main-content .pati-ref-academy-list, #main-content .pati-ref-kb-home,#main-content .pati-ref-kb-list, #main-content .lost-v2,#main-content .adopt-v2,#main-content .pati-ref-listing-detail{ --ink:#29263d;--muted:#786f87;font-family:inherit;color:var(--ink);max-width:850px;margin-inline:auto; } #main-content :is(.pati-ref-hub,.pati-ref-care,.pati-health-home,.pati-ref-academy-home,.pati-ref-kb-home) :is(h1,h2,h3,p){margin-block:0} #main-content :is(.pati-ref-hub,.pati-ref-care,.pati-health-home,.pati-ref-academy-home,.pati-ref-kb-home) button{font:inherit;cursor:pointer} #main-content :is(.pati-ref-hub,.pati-ref-care,.pati-health-home,.pati-ref-academy-home,.pati-ref-kb-home) button:focus-visible{outline:3px solid #453c9c!important;outline-offset:3px} /* A: lavender pet dashboard and bright quick actions */ #main-content .pati-ref-hub{background:#fbf9ff;border-radius:24px;padding:19px 16px 36px!important} #main-content .pati-ref-hub .pati-ref-greeting{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px} #main-content .pati-ref-hub .pati-ref-greeting small{font-size:11px;font-weight:800;letter-spacing:.085em;color:#8057a7} #main-content .pati-ref-hub .pati-ref-greeting h1{font-weight:850;color:#2b2442;font-size:clamp(22px,5vw,29px);margin:5px 0} #main-content .pati-ref-hub .pati-ref-greeting p{font-size:12px;color:#7f7591} #main-content .pati-ref-hub .pati-ref-greeting-mark{border-radius:14px;background:white;padding:11px 15px;box-shadow:0 5px 18px #a693c820;color:#9b69d9;font-size:22px} #main-content .pati-ref-hub .pati-ref-pet-hero{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;min-height:184px;isolation:isolate;background:linear-gradient(120deg,#a575f0,#8465d8)!important;border-radius:25px!important;padding:22px 17px 14px 23px;color:white} #main-content .pati-ref-hub .pati-ref-pet-hero:before{content:'✿';position:absolute;right:33%;top:-45px;font-size:139px;opacity:.075;z-index:-1} #main-content .pati-ref-hub .pati-ref-hero-copy{position:relative;z-index:2;max-width:64%;display:grid;justify-items:start;gap:7px} #main-content .pati-ref-hub .pati-ref-hero-copy>span{color:#f6edff;font-size:10px;font-weight:800;letter-spacing:.07em} #main-content .pati-ref-hub .pati-ref-hero-copy h2{font-weight:850;font-size:clamp(25px,5vw,34px);color:#fff!important;line-height:1.08} #main-content .pati-ref-hub .pati-ref-hero-copy p{color:#fff8!important;font-size:12px;max-width:210px;line-height:1.45} #main-content .pati-ref-hub .pati-ref-hero-copy button{min-height:38px;margin-top:8px;background:#fff!important;border:0;border-radius:10px;padding:9px 13px;color:#6e49b4!important;font-size:12px;font-weight:850} #main-content .pati-ref-hub .pati-ref-hero-photo{position:absolute;right:3px;bottom:-2px;width:43%;height:95%;border-radius:20px;overflow:hidden;display:grid;align-items:end} #main-content .pati-ref-hub .pati-ref-hero-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 13px #513a7955)} #main-content .pati-ref-hub .pati-ref-hero-photo img[src^="http"]{object-fit:cover;object-position:center} #main-content .pati-ref-hub .pati-ref-hero-paw{position:absolute;right:40%;bottom:12px;color:#ddbdff77;font-size:26px} #main-content .pati-ref-hub .pati-ref-notice{display:flex;align-items:center;gap:12px;background:#fff4ce;border:1px solid #f6e9bb;border-radius:16px;margin:13px 0 22px;padding:12px 15px;box-shadow:0 4px 14px #f7cf771a} #main-content .pati-ref-hub .pati-ref-notice-dot{font-size:19px;color:#32b879} #main-content .pati-ref-hub .pati-ref-notice div{flex:1;display:grid;gap:3px;min-width:0} #main-content .pati-ref-hub .pati-ref-notice strong{font-size:12px;color:#63502c} #main-content .pati-ref-hub .pati-ref-notice small{font-size:11px;color:#826b3e} #main-content .pati-ref-hub .pati-ref-notice button{border:0;background:transparent;color:#9b7135;min-width:35px;min-height:35px;font-size:26px} #main-content .pati-ref-hub .pati-ref-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:19px 0 12px!important} #main-content .pati-ref-hub .pati-ref-section-title h2{font-size:18px;font-weight:850;color:#302745} #main-content .pati-ref-hub .pati-ref-section-title button{background:transparent;border:0;min-height:34px;padding:2px;color:#8152ba;font-size:12px;font-weight:750} #main-content .pati-ref-hub .pati-ref-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} #main-content .pati-ref-hub .pati-ref-action{position:relative;display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:113px;border:0!important;border-radius:19px!important;padding:14px 12px 12px 15px!important;text-align:left;overflow:hidden;box-shadow:0 6px 16px #614b9118!important} #main-content .pati-ref-hub .pati-ref-action-text{display:grid;gap:5px;max-width:75%;position:relative;z-index:2} #main-content .pati-ref-hub .pati-ref-action-name{font-size:14px!important;line-height:1.18;font-weight:850!important;color:inherit!important} #main-content .pati-ref-hub .pati-ref-action small{font-size:10px;color:inherit!important;opacity:.92;line-height:1.3} #main-content .pati-ref-hub .pati-ref-action-emoji{font-size:37px;position:absolute;right:8px;bottom:7px;transform:rotate(-8deg);filter:drop-shadow(0 4px 4px #1112)} #main-content .pati-ref-hub .pati-ref-orange{background:#ffad38!important;color:#62370c!important} #main-content .pati-ref-hub .pati-ref-violet{background:#8e5bea!important;color:white!important} #main-content .pati-ref-hub .pati-ref-pink{background:#ff648e!important;color:#fff!important} #main-content .pati-ref-hub .pati-ref-blue{background:#53b4ef!important;color:#153a60!important} #main-content .pati-ref-hub .pati-ref-lavender{background:#dbc8ff!important;color:#574079!important} #main-content .pati-ref-hub .pati-ref-green{background:#bdecd1!important;color:#215b40!important} #main-content .pati-ref-hub .pati-ref-peach{background:#ffd8bb!important;color:#815227!important} #main-content .pati-ref-hub .pati-ref-teal{background:#b7e9e5!important;color:#245a61!important} #main-content .pati-ref-hub .pati-ref-pet-tiles{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;padding:2px 0 9px} #main-content .pati-ref-hub .pati-ref-pet-tile{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:103px;width:103px;padding:9px 7px!important;background:white!important;border:1px solid #f0e8fc!important;border-radius:17px!important;color:#49395d!important} #main-content .pati-ref-hub .pati-ref-pet-tile.selected{border-color:#a176e5!important;box-shadow:0 0 0 2px #a176e51b} #main-content .pati-ref-hub .pati-ref-pet-tile-image{display:grid;place-items:center;width:76px;height:76px;border-radius:13px;overflow:hidden;background:#f2e5ff} #main-content .pati-ref-hub .pati-ref-pet-tile-image img{width:100%;height:100%;object-fit:cover} #main-content .pati-ref-hub .pati-ref-pet-tile-image img[src$=".svg"]{object-fit:contain} #main-content .pati-ref-hub .pati-ref-pet-tile strong{font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #main-content .pati-ref-hub .pati-ref-pet-tile small{font-size:10px;color:#837b91} #main-content .pati-ref-hub .pati-ref-pet-tile-image.add{font-size:32px;font-weight:500;color:#8e5ac6;background:#f3eaff} /* B: cream wellness profile and organized health diary */ #main-content .pati-health-home{background:#fcf9f3!important;border-radius:24px;padding:17px 15px 35px!important} #main-content .pati-health-home .pati-health-pet{background:#fff!important;border:1px solid #f0ede5!important;border-radius:24px!important;box-shadow:0 8px 22px #6e644b0a;min-height:150px;padding:19px!important} #main-content .pati-health-home .pati-health-pet-image{height:94px;width:94px;border-radius:50%!important;background:#f9ead6!important} #main-content .pati-health-home .pati-health-pet h1{font-size:26px;color:#302d28} #main-content .pati-health-home .pati-health-pet small{color:#9e947f!important} #main-content .pati-health-home .pati-health-pet p{color:#847c6e!important} #main-content .pati-health-home .pati-health-next{background:#fff!important;border:1px solid #efede5!important;box-shadow:0 6px 19px #635b4b09;border-radius:22px!important} #main-content .pati-health-home .pati-health-next span{color:#c99321} #main-content .pati-health-home .pati-health-home h2{font-size:17px} #main-content .pati-health-home .pati-health-grid button{border-radius:22px!important;min-height:138px!important;border:0!important;padding:18px!important} #main-content .pati-health-home .pati-health-grid button:first-child{background:#cfe6d6!important} #main-content .pati-health-home .pati-health-grid button:nth-child(2){background:#ffd064!important} #main-content .pati-health-home .pati-health-grid button:nth-child(3){background:#f0ece4!important} #main-content .pati-health-home .pati-health-grid button:nth-child(4){background:#e5ddf4!important} #main-content .pati-health-home .pati-health-grid button strong{color:#453b2e!important;font-weight:850!important} #main-content .pati-health-home .pati-health-add{background:#4e644f!important;border-radius:15px!important} #main-content .pati-ref-health-back button{background:#f6edda!important;border:0;border-radius:12px;min-height:42px;padding:10px 13px;color:#6b5b42;font-weight:800} #main-content .pati-ref-weight-chart{padding:20px 14px;background:#fffdf9;border:1px solid #eee9dd;border-radius:22px;margin:20px 0;box-shadow:0 7px 20px #62553e0c} #main-content .pati-ref-weight-chart-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#746b5c} #main-content .pati-ref-weight-chart-head strong{color:#3f3a2d;font-size:22px} #main-content .pati-ref-weight-bars{height:180px;display:flex;align-items:end;justify-content:space-around;gap:12px;padding-top:14px} #main-content .pati-ref-weight-bar{height:100%;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px} #main-content .pati-ref-weight-bar>span{width:80%;max-width:44px;display:block;background:linear-gradient(180deg,#efb541,#f5dfaa);border-radius:11px 11px 4px 4px;min-height:11px} #main-content .pati-ref-weight-bar:nth-child(even)>span{background:linear-gradient(180deg,#d4a135,#f7e6bf)} #main-content .pati-ref-weight-bar small{font-size:9px;text-align:center;color:#817664;line-height:1.2} /* C: orange care schedule and timeline */ #main-content .pati-ref-care{background:#fffcf8;border-radius:23px;padding:15px 16px 35px!important} #main-content .pati-ref-care .pati-ref-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 17px} #main-content .pati-ref-care .pati-ref-subhead small{font-size:10px;color:#db8540;font-weight:850;letter-spacing:.07em} #main-content .pati-ref-care .pati-ref-subhead h1{font-size:26px;color:#2b2b31;margin:4px 0} #main-content .pati-ref-care .pati-ref-subhead p{font-size:12px;color:#877d77} #main-content .pati-ref-care .pati-ref-add-round{height:43px;width:43px;border-radius:14px;background:#ff9439!important;border:0!important;color:white!important;font-size:28px!important;line-height:1} #main-content .pati-ref-care .pati-ref-care-hero{position:relative;display:flex;align-items:center;background:linear-gradient(105deg,#ffb350,#ff913c)!important;border-radius:21px!important;min-height:165px;overflow:hidden;padding:19px 16px;isolation:isolate} #main-content .pati-ref-care .pati-ref-care-hero:before{content:'🐾';position:absolute;font-size:83px;opacity:.1;left:28%;top:-37px} #main-content .pati-ref-care .pati-ref-care-hero-copy{position:relative;z-index:2;width:61%;display:grid;justify-items:start;gap:7px} #main-content .pati-ref-care .pati-ref-care-hero-copy small{font-size:11px;font-weight:850;color:#6c3d1b} #main-content .pati-ref-care .pati-ref-care-hero-copy h2{color:#573111!important;font-size:20px;font-weight:850;line-height:1.12} #main-content .pati-ref-care .pati-ref-care-hero-copy p{font-size:12px;color:#683e1c!important;line-height:1.35} #main-content .pati-ref-care .pati-ref-care-hero-copy button{margin-top:5px;background:#fff!important;color:#ab541c!important;border:0!important;border-radius:12px!important;padding:9px 13px;font-size:12px;font-weight:850;min-height:38px} #main-content .pati-ref-care .pati-ref-care-hero>img{position:absolute;right:0;bottom:-2px;width:44%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 8px #8a411e22)} #main-content .pati-ref-care .pati-ref-care-hero>img[src^="http"]{object-fit:cover;border-radius:30% 0 0 0} #main-content .pati-ref-care .pati-ref-care-summary{display:flex;flex-direction:column;gap:5px;margin:19px 0 13px} #main-content .pati-ref-care .pati-ref-care-summary strong{font-size:17px;color:#353039} #main-content .pati-ref-care .pati-ref-care-summary small{color:#86808a;font-size:12px} #main-content .pati-ref-care .pati-simple-filters{gap:10px} #main-content .pati-ref-care .pati-simple-filter{min-height:86px!important;border-radius:18px!important;border:1px solid #eee9e4!important} #main-content .pati-ref-care .pati-simple-filter:nth-child(1){background:#fcefe2!important;color:#bc6e28!important} #main-content .pati-ref-care .pati-simple-filter:nth-child(2){background:#fff1d4!important;color:#a2771c!important} #main-content .pati-ref-care .pati-simple-filter:nth-child(3){background:#e5f6e9!important;color:#318452!important} #main-content .pati-ref-care .pati-simple-list-head h2{font-size:18px;color:#34313b} #main-content .pati-ref-care .pati-ref-care-timeline{display:grid;gap:10px;position:relative;padding-left:17px} #main-content .pati-ref-care .pati-ref-care-timeline:before{position:absolute;content:'';width:2px;left:6px;top:15px;bottom:15px;background:#f7d9ac} #main-content .pati-ref-care .pati-ref-care-task{position:relative;border:1px solid #f0e7dc!important;background:#fff!important;box-shadow:0 4px 16px #6c3d1c0a!important;padding:12px!important;border-radius:17px!important} #main-content .pati-ref-care .pati-ref-care-task:before{position:absolute;content:'';left:-18px;top:22px;width:11px;height:11px;border-radius:100%;background:#fba145;border:2px solid #fff;box-shadow:0 0 0 2px #f7d9ac} #main-content .pati-ref-care .pati-ref-care-task.is-done:before{background:#39b879} #main-content .pati-ref-care .care-v2-item-icon{background:#fff0df!important} #main-content .pati-ref-care .care-v2-complete{background:#ff963d!important;color:#fff!important;border:0!important;white-space:nowrap;font-size:12px!important;padding:9px!important} #main-content .pati-ref-care .pati-ref-care-task.is-done .care-v2-complete{background:#e4f8e9!important;color:#32794c!important} /* D: bright photographed/illustrated topic posters, separate lesson list */ #main-content .pati-ref-academy-home{padding:16px!important;background:#fffefe!important;border-radius:23px} #main-content .pati-ref-academy-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px} #main-content .pati-ref-academy-header span{font-size:11px;color:#c12983;font-weight:850;letter-spacing:.075em} #main-content .pati-ref-academy-header h1{color:#382a3b;font-size:clamp(23px,5vw,29px);margin:6px 0!important} #main-content .pati-ref-academy-header p{font-size:12px;color:#897988} #main-content .pati-ref-academy-header button{border:1px solid #f1d5e5!important;background:#fff3fa!important;border-radius:15px!important;min-width:48px;min-height:46px;font-size:27px;color:#bc3484!important} #main-content .pati-ref-academy-intro{display:flex;justify-content:space-between;align-items:center;gap:9px;background:#fff4fb;border:1px solid #f8e4f2;border-radius:16px;padding:15px;margin-bottom:25px} #main-content .pati-ref-academy-intro div{display:grid;gap:3px} #main-content .pati-ref-academy-intro strong{font-size:13px;color:#663a58} #main-content .pati-ref-academy-intro small{font-size:11px;color:#a37594} #main-content .pati-ref-academy-intro button{background:#e6248b!important;border:0!important;border-radius:11px!important;min-height:42px;color:white!important;padding:9px 13px!important;font-size:12px;font-weight:850} #main-content .pati-ref-academy-section{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} #main-content .pati-ref-academy-section h2{font-size:19px;color:#382a3b} #main-content .pati-ref-academy-section span{font-size:12px;color:#bc3f8d} #main-content .pati-ref-academy-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main-content .pati-ref-academy-topic{position:relative;display:flex;min-height:157px;align-items:center;overflow:hidden;text-align:left;border-radius:23px!important;border:0!important;padding:19px 15px!important;isolation:isolate} #main-content .pati-ref-academy-topic-copy{position:relative;z-index:2;display:grid;gap:10px;max-width:60%} #main-content .pati-ref-academy-topic strong{color:#fff!important;font-size:clamp(15px,2vw,19px);line-height:1.18;font-weight:850;text-shadow:0 1px 1px #401f2d12} #main-content .pati-ref-academy-topic small{font-size:11px;color:#fff!important;line-height:1.35;font-weight:650} #main-content .pati-ref-academy-topic img{position:absolute;right:-4px;bottom:-4px;width:48%;height:95%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 7px #511c4e1c)} #main-content .pati-ref-topic-coral{background:#ed524d!important} #main-content .pati-ref-topic-fuchsia{background:#c1148f!important} #main-content .pati-ref-topic-turquoise{background:#1daba8!important} #main-content .pati-ref-topic-gold{background:#e4a42a!important} #main-content .pati-ref-topic-violet{background:#8161d9!important} #main-content .pati-ref-topic-sage{background:#74ad73!important} #main-content .pati-ref-academy-list{padding:10px 15px!important} #main-content .pati-ref-topic-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px} #main-content .pati-ref-topic-toolbar button{min-height:41px;padding:9px 13px;border:0;border-radius:12px;background:#f5eaf4;color:#94336f;font-size:12px;font-weight:850} #main-content .pati-ref-topic-toolbar strong{font-size:15px;color:#45354b} #main-content .pati-ref-academy-list .edu-v2-hero{display:none!important} #main-content .pati-ref-academy-list .pati-edu-categories,#main-content .pati-ref-academy-list .edu-v2-filter-title,#main-content .pati-ref-academy-list .edu-v2-status-filters,#main-content .pati-ref-academy-list .edu-v2-stats{display:none!important} #main-content .pati-ref-academy-list .pati-edu-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px} #main-content .pati-ref-academy-list .pati-edu-card{border-radius:18px!important;background:#fff!important;border:1px solid #f0e3ec!important;box-shadow:0 4px 15px #882b720b!important;min-height:107px!important} #main-content .pati-ref-academy-list .pati-edu-card-body>span{display:none!important} /* E: knowledge topics ahead of its long search results */ #main-content .pati-ref-kb-home{padding:17px 15px 31px!important;background:#fbfdff!important;border-radius:23px} #main-content .pati-ref-kb-head{position:relative;overflow:hidden;background:linear-gradient(125deg,#dff4ff,#ece8ff)!important;padding:24px 19px;border-radius:24px;margin-bottom:20px} #main-content .pati-ref-kb-head>span{font-size:11px;color:#6173a2;font-weight:850;letter-spacing:.07em} #main-content .pati-ref-kb-head h1{font-size:clamp(23px,5vw,30px);line-height:1.15;color:#34426f;margin:8px 0!important;max-width:300px} #main-content .pati-ref-kb-head p{color:#67789f;font-size:12px;max-width:280px} #main-content .pati-ref-kb-head button{background:white!important;color:#466bb4!important;border:0!important;border-radius:12px!important;min-height:41px;padding:10px 15px;margin-top:15px;font-size:12px;font-weight:850} #main-content .pati-ref-kb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px} #main-content .pati-ref-kb-top h2{font-size:18px;color:#35425b} #main-content .pati-ref-kb-top button{background:transparent!important;border:0!important;color:#9362b3!important;font-size:12px;font-weight:750;min-height:40px} #main-content .pati-ref-kb-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main-content .pati-ref-kb-category{min-height:137px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;border:0!important;border-radius:21px!important;padding:17px!important;background:#e7f6ff!important;color:#335471!important} #main-content .pati-ref-kb-category strong{font-size:15px;font-weight:850;color:inherit} #main-content .pati-ref-kb-category small{font-size:11px;color:inherit;opacity:.8} #main-content .pati-ref-kb-symbol{font-size:27px} #main-content .pati-ref-kb-peach{background:#fff0da!important;color:#855428!important} #main-content .pati-ref-kb-lilac{background:#f0e5ff!important;color:#6c489e!important} #main-content .pati-ref-kb-mint{background:#def3e9!important;color:#327159!important} #main-content .pati-ref-kb-sun{background:#ffefc5!important;color:#80602a!important} #main-content .pati-ref-kb-blue{background:#e0f0fc!important;color:#386e99!important} #main-content .pati-ref-kb-footer{display:flex;align-items:center;gap:12px;margin-top:20px;padding:14px;background:#f5f6fa;border-radius:15px} #main-content .pati-ref-kb-footer span{font-size:23px} #main-content .pati-ref-kb-footer p{font-size:11px;color:#7b8191;line-height:1.5} #main-content .pati-ref-kb-list{padding:10px 15px!important} #main-content .pati-ref-kb-list .kb-v2-title,#main-content .pati-ref-kb-list .kb-v2-shortcuts,#main-content .pati-ref-kb-list .kb-v2-filter-head,#main-content .pati-ref-kb-list .kb-v2-chips{display:none!important} #main-content .pati-ref-kb-list .kb-v2-grid{display:grid;gap:12px} #main-content .pati-ref-kb-list .kb-v2-card{border-radius:19px!important;box-shadow:0 5px 16px #42608d0a!important} /* F: adoption and lost animal photos first, filters in optional drawer */ #main-content :is(.lost-v2,.adopt-v2){padding:12px!important;background:#fffdfd} #main-content .lost-v2 .lost-v2-heading{background:#fff0f1!important} #main-content .adopt-v2 .adopt-v2-heading{background:#fff2e9!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-heading,.adopt-v2-heading){border:0!important;box-shadow:none!important;border-radius:22px!important;padding:17px!important;display:flex;align-items:center;gap:11px} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-heading,.adopt-v2-heading) h1{font-size:25px!important;color:#30313b!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-heading,.adopt-v2-heading) p{font-size:12px!important;color:#7b727c!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-create,.adopt-v2-create){background:#f56d79!important;color:#fff!important;border:0!important;border-radius:13px!important;min-height:42px;font-size:12px;font-weight:800} #main-content .adopt-v2 .adopt-v2-create{background:#e66b63!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-hero,.adopt-v2-hero,.lost-v2-stats,.adopt-v2-stats){display:none!important} #main-content .pati-ref-listing-filters{margin:11px 0 17px;border:1px solid #e9e6ed;background:#fff;border-radius:14px;padding:0 12px} #main-content .pati-ref-listing-filters>summary{list-style:none;min-height:45px;display:flex;align-items:center;font-size:13px;font-weight:800;color:#58475c;cursor:pointer} #main-content .pati-ref-listing-filters>summary::-webkit-details-marker{display:none} #main-content .pati-ref-listing-filters[open]>summary{border-bottom:1px solid #f0ecf2;margin-bottom:10px} #main-content .pati-ref-listing-filters label{font-size:11px!important;color:#746c7d!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-privacy,.adopt-v2-safety){font-size:11px!important;background:#faf7f8!important;border:0!important;color:#77717b!important;border-radius:13px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card,.adopt-v2-card){min-width:0;border:1px solid #f0eaf0!important;border-radius:20px!important;box-shadow:0 5px 18px #4334490d!important;overflow:hidden;background:#fff!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-cover,.adopt-v2-cover){height:auto!important;aspect-ratio:1/1!important;background:#f2e6ed!important;border-radius:0!important;overflow:hidden} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-cover,.adopt-v2-cover) img{width:100%;height:100%;object-fit:cover} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info){padding:12px 13px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info) h3{font-size:16px!important;color:#282a35!important;margin:5px 0} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-description,.adopt-v2-description){font-size:11px!important;-webkit-line-clamp:2;line-height:1.45} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card .lost-v2-actions,.adopt-v2-card .adopt-v2-actions){display:none!important} #main-content .pati-ref-listing-view{width:100%;margin-top:12px!important;min-height:42px;border:0!important;border-radius:11px!important;padding:10px!important;background:#fff0f3!important;color:#af4d70!important;font-size:12px;font-weight:850} #main-content .adopt-v2 .pati-ref-listing-view{background:#ffeddf!important;color:#a15d33!important} #main-content .pati-ref-listing-detail{padding:8px 13px 32px!important;max-width:650px;background:#fff;border-radius:22px} #main-content .pati-ref-listing-back{border:0;border-radius:12px;background:#fff0f5;color:#985070;font-weight:800;font-size:13px;padding:10px 14px;min-height:42px;margin-bottom:13px} #main-content .pati-ref-listing-photo{aspect-ratio:1.14;overflow:hidden;border-radius:22px;background:#f3ecf3;display:grid;place-items:center} #main-content .pati-ref-listing-photo img{width:100%;height:100%;object-fit:cover} #main-content .pati-ref-listing-no-photo{font-size:110px} #main-content .pati-ref-listing-info{position:relative;margin:-25px 7px 0;background:#fff;padding:22px 18px;border-radius:22px;box-shadow:0 -6px 25px #3727380c} #main-content .pati-ref-listing-status{display:inline-block;background:#ffedf2;color:#aa4d74;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:850} #main-content .pati-ref-listing-info h1{font-size:clamp(26px,7vw,34px);margin:9px 0 4px;color:#302c36} #main-content .pati-ref-listing-info>p{color:#817786;font-size:13px;line-height:1.6} #main-content .pati-ref-listing-city{padding:12px 0;font-size:13px;color:#a06d79} #main-content .pati-ref-listing-info h2{margin:10px 0 8px;font-size:17px;color:#413743} #main-content .pati-ref-listing-description{white-space:pre-wrap;overflow-wrap:anywhere} #main-content .pati-ref-listing-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:19px} #main-content .pati-ref-listing-controls button{min-height:44px;padding:10px 13px;border:1px solid #f0e1e8;background:#fff7f8;color:#985572;border-radius:12px;font-size:12px;font-weight:800} #main-content .pati-ref-listing-controls .pati-ref-contact{flex:1;background:#f16d83;color:#fff;border:0} #main-content .pati-ref-listing-safety{margin-top:15px;background:#fbf8f8;padding:12px;border-radius:12px;color:#777;font-size:11px;line-height:1.55} @media(max-width:540px){ #main-content .pati-ref-hub{padding:15px 12px 30px!important} #main-content .pati-ref-hub .pati-ref-pet-hero{min-height:177px;padding-left:16px} #main-content .pati-ref-hub .pati-ref-action{min-height:111px;padding:12px 10px!important} #main-content .pati-ref-hub .pati-ref-action-emoji{font-size:32px;right:4px} #main-content .pati-ref-hub .pati-ref-action-text{max-width:80%} #main-content .pati-ref-academy-topics{grid-template-columns:minmax(0,1fr)} #main-content .pati-ref-academy-topic{min-height:150px} #main-content .pati-ref-academy-topic-copy{max-width:60%} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info){padding:9px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info) h3{font-size:14px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-meta,.adopt-v2-meta){font-size:10px!important;flex-wrap:wrap} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-description,.adopt-v2-description){display:none!important} #main-content .pati-ref-listing-view{font-size:11px!important} } @media(max-width:350px){ #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:minmax(0,1fr)!important} #main-content .pati-ref-hub .pati-ref-action-emoji{font-size:26px} #main-content .pati-ref-hub .pati-ref-action-name{font-size:12px!important} #main-content .pati-ref-care .pati-ref-care-hero-copy h2{font-size:17px} } @media(prefers-reduced-motion:reduce){#main-content :is(.pati-ref-hub,.pati-ref-care,.pati-ref-academy-home,.pati-ref-kb-home,.pati-ref-listing-detail) *{transition:none!important;animation:none!important}} /* patiyiz-eight-phones-final-20261028.css */ /* Patiyiz – visual match to the eight-phone concept, October 2026 The panels below use live records and working actions. No invented health score or products. */ #main-content .p4-hub,#main-content .p4-health,#main-content .pati-ref-care, #main-content .pati-ref-academy-home,#main-content .pati-ref-kb-home,#main-content .p4-shop, #main-content .lost-v2,#main-content .adopt-v2{--p4-text:#292638;--p4-sub:#736e81;--p4-border:#e9e5f0;max-width:650px;margin-left:auto;margin-right:auto;color:var(--p4-text);letter-spacing:normal} #main-content :is(.p4-hub,.p4-health,.pati-ref-care,.pati-ref-academy-home,.pati-ref-kb-home,.p4-shop,.lost-v2,.adopt-v2) button{font-family:inherit;cursor:pointer} #main-content :is(.p4-hub,.p4-health,.pati-ref-care,.pati-ref-academy-home,.pati-ref-kb-home,.p4-shop,.lost-v2,.adopt-v2) button:focus-visible{outline:3px solid #6d57d9!important;outline-offset:2px} /* 1. Hayvanım Merkezi: cream lavender shell, pet avatar row, photo card, 2x4 pastel launchers */ #main-content .p4-hub{background:#f8f3ff!important;border-radius:25px!important;padding:18px 16px 32px!important;overflow:hidden} #main-content .p4-hub .p4-hub-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:1px 0 20px} #main-content .p4-hub .p4-hub-user{display:flex;align-items:center;gap:10px;min-width:0} #main-content .p4-hub .p4-user-avatar{width:43px;height:43px;display:grid;place-items:center;overflow:hidden;flex:0 0 43px;border-radius:13px;background:#e4d0ff;color:#7344ba} #main-content .p4-hub .p4-user-avatar img{width:100%;height:100%;object-fit:cover} #main-content .p4-hub .p4-hub-user div{display:grid;gap:4px} #main-content .p4-hub .p4-hub-user small{font-size:12px;color:#362f48;font-weight:800} #main-content .p4-hub .p4-hub-user strong{font-size:11px;color:#7d7589;font-weight:500} #main-content .p4-hub .p4-header-icon{display:grid;place-items:center;background:#fff!important;color:#6a5296!important;width:43px;height:43px;border:1px solid #e2d9f3!important;border-radius:13px!important;font-size:21px} #main-content .p4-hub .p4-pet-picker{display:flex;align-items:flex-start;gap:13px;overflow-x:auto;padding:0 1px 17px;scrollbar-width:none} #main-content .p4-hub .p4-pet-thumb{display:grid;justify-items:center;gap:5px;flex:0 0 61px;min-width:61px;background:transparent!important;border:0!important;padding:2px!important;color:#625671!important} #main-content .p4-hub .p4-pet-thumb img{width:52px;height:52px;object-fit:cover;border-radius:50%;background:#ecdef9;border:3px solid #ffffff;box-shadow:0 3px 8px #493b741c} #main-content .p4-hub .p4-pet-thumb.active img{border-color:#a377e8;box-shadow:0 0 0 2px #a377e82b} #main-content .p4-hub .p4-pet-thumb span:last-child{font-size:10px;font-weight:750;max-width:66px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #main-content .p4-hub .p4-pet-add{display:grid;place-items:center;width:52px;height:52px;background:#fff;border:2px dashed #cfb5ea;border-radius:50%;color:#a377e8;font-size:29px;font-weight:600} #main-content .p4-hub .p4-hub-hero{position:relative;display:flex;align-items:center;background:linear-gradient(125deg,#9a70fa,#7654e8)!important;color:#fff!important;min-height:185px;overflow:hidden;border-radius:23px!important;padding:20px 17px!important;isolation:isolate} #main-content .p4-hub .p4-hub-hero::before{content:'🐾';position:absolute;right:33%;top:-22px;font-size:90px;opacity:.1;z-index:-1} #main-content .p4-hub .p4-hub-hero-copy{position:relative;z-index:2;display:grid;justify-items:start;gap:6px;width:61%;min-width:0} #main-content .p4-hub .p4-hub-hero-copy small{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff!important} #main-content .p4-hub .p4-hub-hero-copy h1{font-size:clamp(22px,4.8vw,32px)!important;font-weight:850;line-height:1.05;color:#fff!important;margin:2px 0!important;overflow-wrap:anywhere} #main-content .p4-hub .p4-hub-hero-copy p{font-size:11px;color:#fff!important;line-height:1.4;opacity:.91} #main-content .p4-hub .p4-hub-hero-copy button{background:#fff!important;border:0!important;border-radius:11px!important;color:#6846bf!important;font-size:11px;font-weight:850;padding:10px 12px;min-height:38px;margin-top:8px} #main-content .p4-hub .p4-hub-photo{position:absolute;right:0;bottom:0;width:45%;height:97%;overflow:hidden;border-radius:24px;display:flex;align-items:end;justify-content:center} #main-content .p4-hub .p4-hub-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 12px #33206732)} #main-content .p4-hub .p4-hub-photo img[src^="http"]{object-fit:cover;border-radius:25px 0 0 0} #main-content .p4-hub .p4-hub-status{display:flex;align-items:center;gap:10px;margin-top:12px;background:#fff1bb;border:1px solid #f6dfa8;border-radius:16px;padding:12px 13px} #main-content .p4-hub .p4-status-emoji{font-size:29px} #main-content .p4-hub .p4-hub-status>div{min-width:0;flex:1;display:grid;gap:4px} #main-content .p4-hub .p4-hub-status strong{font-size:12px;color:#55431d!important} #main-content .p4-hub .p4-hub-status small{font-size:10px;color:#71613c!important} #main-content .p4-hub .p4-hub-status button{border:0!important;background:transparent!important;color:#a57a31!important;font-size:25px;width:35px;height:35px} #main-content .p4-hub .p4-section-label{display:flex;align-items:center;justify-content:space-between;margin:21px 0 11px} #main-content .p4-hub .p4-section-label h2{font-size:17px!important;font-weight:850;color:#312f42!important;margin:0!important} #main-content .p4-hub .p4-hub-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px!important} #main-content .p4-hub .p4-hub-tile{min-height:104px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:11px;text-align:left;border:0!important;border-radius:20px!important;padding:15px!important;box-shadow:0 3px 12px #3024510a!important} #main-content .p4-hub .p4-tile-ico{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#ffffff8c;font-size:21px} #main-content .p4-hub .p4-hub-tile strong{font-size:13px;font-weight:850;color:#283144!important;line-height:1.25} #main-content .p4-hub .p4-sky{background:#d8ebff!important} #main-content .p4-hub .p4-pink{background:#f8daec!important} #main-content .p4-hub .p4-peach{background:#ffdfd1!important} #main-content .p4-hub .p4-violet{background:#e3dcff!important} #main-content .p4-hub .p4-aqua{background:#cdf2f4!important} #main-content .p4-hub .p4-coral{background:#ffd4df!important} #main-content .p4-hub .p4-rose{background:#fce0f1!important} #main-content .p4-hub .p4-amber{background:#ffe4af!important} #main-content .p4-hub .p4-all-pets{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid #e1d6f3!important;background:#fff!important;color:#67518c!important;min-height:44px;border-radius:14px!important;padding:10px 14px;margin-top:17px;font-size:12px;font-weight:800} /* 2. Health phone: warm ivory, image profile, compact real data, four colored actions */ #main-content .p4-health{padding:19px 16px 29px!important;background:#fbf9f5!important;border-radius:25px!important} #main-content .p4-health .p4-health-header{margin:1px 0 15px} #main-content .p4-health .p4-health-header span{font-size:10px;font-weight:850;color:#ae8f59;letter-spacing:.09em} #main-content .p4-health .p4-health-header h1{font-size:25px!important;color:#302c29!important;margin:4px 0!important} #main-content .p4-health .p4-health-header p{color:#857e76;font-size:12px} #main-content .p4-health .p4-health-pets{display:flex;overflow-x:auto;gap:8px;margin:0 0 12px} #main-content .p4-health .p4-health-pets button{border:1px solid #e5ddcf!important;background:#fff!important;color:#665c4e!important;border-radius:999px!important;padding:9px 14px;white-space:nowrap;font-size:12px} #main-content .p4-health .p4-health-pets button.active{background:#ddf1df!important;border-color:#99cc9e!important;color:#35613f!important} #main-content .p4-health .p4-health-profile{background:#fff!important;border:1px solid #f0ebe2;border-radius:24px!important;display:flex;align-items:center;gap:15px;padding:18px!important;box-shadow:0 6px 24px #594c3010} #main-content .p4-health .p4-health-portrait{height:88px;width:88px;flex:0 0 88px;background:#f6ecda;border-radius:50%;overflow:hidden;border:3px solid #f5eddf} #main-content .p4-health .p4-health-portrait img{height:100%;width:100%;object-fit:cover} #main-content .p4-health .p4-health-profile>div:last-child{display:grid;gap:7px;min-width:0} #main-content .p4-health .p4-health-profile strong{color:#36312d;font-size:23px;overflow-wrap:anywhere} #main-content .p4-health .p4-health-profile small{color:#897e71;font-size:12px} #main-content .p4-health .p4-health-lastweight{display:inline-flex;align-items:center;justify-content:flex-start;background:#f8f6f0;color:#806d52;font-size:12px;border-radius:10px;padding:8px 10px} #main-content .p4-health .p4-health-overview{position:relative;background:#fff!important;border:1px solid #eee8de;border-radius:21px;margin:14px 0;padding:16px;box-shadow:0 5px 18px #60553c0a} #main-content .p4-health .p4-health-overview>span{display:block;font-size:10px;letter-spacing:.06em;font-weight:850;color:#9b8d6c} #main-content .p4-health .p4-health-overview>div{display:grid;gap:4px;padding-right:65px;margin-top:10px} #main-content .p4-health .p4-health-overview strong{font-size:15px;color:#464036} #main-content .p4-health .p4-health-overview small{color:#8a8074;font-size:11px} #main-content .p4-health .p4-health-overview button{position:absolute;right:14px;bottom:15px;border:0;background:#edb34c!important;color:#4a3518!important;border-radius:11px!important;font-weight:850;min-height:37px;padding:8px 13px} #main-content .p4-health .p4-health-subhead{margin:22px 0 12px} #main-content .p4-health .p4-health-subhead h2{font-size:16px;font-weight:850;color:#4e453b;margin:0} #main-content .p4-health .p4-health-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main-content .p4-health .p4-health-action{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:122px;text-align:left;border:0!important;border-radius:22px!important;padding:18px!important;box-shadow:none!important} #main-content .p4-health .p4-health-action>span{font-size:28px} #main-content .p4-health .p4-health-action strong{font-size:14px;color:#3e3c38!important;font-weight:850} #main-content .p4-health .p4-health-gold{background:#ffe2a1!important} #main-content .p4-health .p4-health-blue{background:#d4eaf9!important} #main-content .p4-health .p4-health-green{background:#d5f1df!important} #main-content .p4-health .p4-health-purple{background:#e8dffc!important} #main-content .p4-health .p4-health-history{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:56px;background:#fff!important;border:1px solid #f0eadf!important;border-radius:16px!important;text-align:left;color:#5a534a;font-size:12px;font-weight:750;padding:14px} #main-content .p4-health .p4-add-pet{min-height:44px;margin-top:12px;border:0;background:#dfeddc!important;border-radius:12px;padding:10px 14px;color:#41603e} #main-content .p4-health .p4-health-disclaimer{font-size:11px;margin-top:17px;color:#9b9286;line-height:1.5} /* 3. Care phone: date strip, orange highlight, narrow timeline */ #main-content .pati-ref-care{background:#fffdf8!important;max-width:650px} #main-content .pati-ref-care .pati-ref-care-hero{background:linear-gradient(120deg,#ff9d43,#ffb965)!important} #main-content .pati-ref-care .pati-ref-care-task{border-radius:17px!important} #main-content .pati-ref-care .pati-simple-filter{border-radius:17px!important} #main-content .pati-ref-care .pati-ref-care-timeline::before{background:#f2d39d!important} #main-content .pati-ref-care .care-v2-item-main p{font-size:11px!important;color:#8d8073!important} #main-content .pati-ref-care .care-v2-item h3{font-size:14px;color:#3c3530!important;font-weight:850} #main-content .pati-ref-care .care-v2-complete{background:#ff9b45!important;color:#fff!important} /* 4. Academy: stacked colorful illustrated lesson posters */ #main-content .pati-ref-academy-home{max-width:650px;background:#fff!important} #main-content .pati-ref-academy-home .pati-ref-academy-header h1{color:#ba1677!important} #main-content .pati-ref-academy-home .pati-ref-academy-topics{grid-template-columns:minmax(0,1fr)!important;gap:12px!important} #main-content .pati-ref-academy-home .pati-ref-academy-topic{min-height:148px!important;border-radius:22px!important} #main-content .pati-ref-academy-home .pati-ref-academy-topic img{max-width:48%;height:115%;width:48%;object-fit:contain;right:5px;bottom:-14px} #main-content .pati-ref-academy-home .pati-ref-academy-topic strong{font-size:20px!important;line-height:1.16} #main-content .pati-ref-academy-home .pati-ref-academy-topic small{font-size:12px!important} #main-content .pati-ref-academy-home .pati-ref-academy-topic-copy{max-width:62%} #main-content .pati-ref-academy-home .pati-ref-academy-intro{border-radius:18px!important} #main-content .pati-ref-academy-list .pati-edu-card-body>strong{font-weight:800} /* 5. Knowledge: pastel 2x3 categories plus real featured guides */ #main-content .pati-ref-kb-home{max-width:650px;background:#fff!important} #main-content .pati-ref-kb-home .pati-ref-kb-head{background:#f0f1ff!important} #main-content .pati-ref-kb-home .pati-ref-kb-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important} #main-content .pati-ref-kb-home .pati-ref-kb-category{min-height:122px!important} #main-content .pati-ref-kb-home .p4-knowledge-recs{margin-top:23px;display:grid;gap:9px} #main-content .pati-ref-kb-home .p4-kb-rec-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px} #main-content .pati-ref-kb-home .p4-kb-rec-title h2{font-size:16px!important;color:#353c54!important} #main-content .pati-ref-kb-home .p4-kb-rec-title button{border:0;background:transparent;color:#7262a0;font-size:12px;font-weight:750;min-height:35px} #main-content .pati-ref-kb-home .p4-kb-rec{width:100%;background:#fff!important;border:1px solid #e9eaf1!important;display:flex;align-items:center;gap:12px;min-height:67px;text-align:left;border-radius:15px!important;padding:10px 12px!important;color:#343f53} #main-content .pati-ref-kb-home .p4-kb-rec-icon{background:#ebf3ff;border-radius:12px;font-size:24px;min-width:43px;min-height:43px;display:grid;place-items:center} #main-content .pati-ref-kb-home .p4-kb-rec>span:nth-child(2){flex:1;display:grid;gap:5px;min-width:0} #main-content .pati-ref-kb-home .p4-kb-rec strong{font-size:12px;color:#29374b;line-height:1.35} #main-content .pati-ref-kb-home .p4-kb-rec small{font-size:10px;color:#768395} /* 6/7. Lost / adoption: clear tabs and two-up photo cards in the phone */ #main-content :is(.lost-v2,.adopt-v2){max-width:650px;background:#fff!important;border-radius:22px!important} #main-content .lost-v2 .lost-v2-heading{background:linear-gradient(125deg,#fff0ef,#ffe5ea)!important} #main-content .adopt-v2 .adopt-v2-heading{background:linear-gradient(125deg,#fff2e8,#ffe9f1)!important} #main-content :is(.lost-v2,.adopt-v2) .p4-list-tabs{display:flex;align-items:center;gap:7px;overflow-x:auto;margin:15px 0 8px;scrollbar-width:none} #main-content :is(.lost-v2,.adopt-v2) .p4-list-tabs button{flex:0 0 auto;min-height:40px;border-radius:999px!important;border:1px solid #e9e6f0!important;background:#f5f5fa!important;color:#656276!important;font-size:12px;font-weight:800;padding:8px 14px} #main-content .lost-v2 .p4-list-tabs button.active{background:#7455d9!important;border-color:#7455d9!important;color:white!important} #main-content .adopt-v2 .p4-list-tabs button.active{background:#e56a87!important;border-color:#e56a87!important;color:white!important} #main-content :is(.lost-v2,.adopt-v2) .pati-ref-listing-filters{margin:0 0 14px} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-cover,.adopt-v2-cover){aspect-ratio:4/5!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card,.adopt-v2-card){border-radius:18px!important;overflow:hidden!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-badge,.adopt-v2-badge){font-size:10px!important;padding:6px 9px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-card-info,.adopt-v2-info){padding:11px!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-city,.adopt-v2-location){font-size:11px!important;color:#756d7d!important} #main-content :is(.lost-v2,.adopt-v2) .pati-ref-listing-view{background:#fff0f2!important;color:#ad4e69!important} #main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-results-head,.adopt-v2-results-head) h2{font-size:18px!important;color:#322b39!important} /* 8. PatiCoin shop — visible balance, pill categories, two-up pastel illustrated product tiles */ #main-content .p4-shop{background:#fffaff!important;border-radius:24px!important;padding:13px 14px 29px!important} #main-content .p4-shop .pati-shop-hero{background:linear-gradient(120deg,#f0e2ff,#e8e0ff)!important;border:0!important;border-radius:23px!important;padding:18px!important;display:flex;align-items:center;gap:13px} #main-content .p4-shop .pati-shop-hero h1{font-size:25px!important;color:#49397d!important} #main-content .p4-shop .pati-shop-eyebrow{color:#9376c4!important;font-size:10px!important} #main-content .p4-shop .pati-shop-hero p{font-size:11px!important;color:#82719d!important} #main-content .p4-shop .pati-shop-wallet{min-width:115px;display:grid;justify-items:center;gap:5px;flex:0 0 auto;background:#fff!important;border:1px solid #e9dff8!important;border-radius:17px!important;padding:12px!important;color:#4f368e!important} #main-content .p4-shop .pati-shop-wallet span{font-size:10px!important} #main-content .p4-shop .pati-shop-wallet strong{font-size:21px!important;color:#633dae!important;white-space:nowrap} #main-content .p4-shop .pati-shop-wallet small{font-size:10px!important;color:#8764a7!important} #main-content .p4-shop .pati-shop-section-title{margin:20px 0 12px!important} #main-content .p4-shop .pati-shop-section-title h2{font-size:19px!important;color:#3c2c50!important} #main-content .p4-shop .pati-shop-filter{display:flex!important;gap:7px!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:3px 0 13px;scrollbar-width:none} #main-content .p4-shop .pati-shop-filter button{border-radius:999px!important;flex:0 0 auto!important;font-size:11px!important;min-height:40px!important;padding:8px 12px!important} #main-content .p4-shop .pati-shop-filter button.active{background:#8861e7!important;color:white!important;border-color:#8861e7!important} #main-content .p4-shop .paticoin-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important} #main-content .p4-shop .pati-shop-card{display:flex!important;flex-direction:column!important;min-width:0;border:1px solid #f1e6f5!important;border-radius:19px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 5px 14px #5d43730a!important} #main-content .p4-shop .pati-shop-card-top{min-height:120px!important;display:grid!important;place-items:center;position:relative;background:#ffebd8!important;border-radius:0!important;padding:12px!important} #main-content .p4-shop .pati-shop-card:nth-child(4n+2) .pati-shop-card-top{background:#eee0ff!important} #main-content .p4-shop .pati-shop-card:nth-child(4n+3) .pati-shop-card-top{background:#dbf3ed!important} #main-content .p4-shop .pati-shop-card:nth-child(4n+4) .pati-shop-card-top{background:#ffe4ec!important} #main-content .p4-shop .paticoin-item-icon{font-size:53px!important;line-height:1;filter:drop-shadow(0 5px 8px #64402d1b)} #main-content .p4-shop .pati-shop-type{position:absolute;top:9px;left:9px;font-size:9px!important;padding:5px 7px!important;color:#75616a!important;background:#ffffffc8!important;border-radius:999px!important} #main-content .p4-shop .pati-shop-card-copy{padding:12px 10px 4px!important;flex:1} #main-content .p4-shop .pati-shop-card h3{font-size:13px!important;color:#312a38!important;margin:2px 0 4px!important;line-height:1.25} #main-content .p4-shop .pati-shop-card-copy p{font-size:10px!important;line-height:1.35;color:#8c818f!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #main-content .p4-shop .pati-shop-stock-state{margin:5px 10px!important;font-size:10px!important;border-radius:10px!important;padding:7px!important} #main-content .p4-shop .pati-shop-card-bottom{padding:8px 10px 12px!important;display:flex!important;gap:8px!important;align-items:stretch!important;flex-direction:column!important} #main-content .p4-shop .pati-shop-card-bottom strong{font-size:13px!important;white-space:nowrap;color:#6a48b4!important} #main-content .p4-shop .pati-shop-card-bottom button{min-height:40px!important;background:#805be0!important;color:#fff!important;border-radius:10px!important;font-size:11px!important} #main-content .p4-shop .pati-shop-card-bottom button:disabled{background:#f0edf3!important;color:#857d8d!important} #main-content .p4-shop .paticoin-shop-orders-heading{margin-top:25px!important} #main-content .p4-shop .paticoin-shop-orders-heading h2{font-size:17px!important;color:#3c3054!important} #main-content .p4-shop .paticoin-orders{background:#fff!important;border-radius:15px!important} #main-content .p4-shop .pati-shop-note{font-size:10px!important;color:#898292!important;line-height:1.55;padding:13px!important;border-radius:12px!important} @media(max-width:400px){ #main-content .p4-hub{padding:14px 12px 27px!important} #main-content .p4-hub .p4-hub-hero{min-height:164px!important;padding:15px!important} #main-content .p4-hub .p4-hub-tile{min-height:99px!important;padding:12px!important} #main-content .p4-hub .p4-hub-grid{gap:9px!important} #main-content .p4-hub .p4-hub-tile strong{font-size:12px!important} #main-content .p4-health .p4-health-profile{gap:10px;padding:12px!important} #main-content .p4-health .p4-health-portrait{width:70px;height:70px;flex-basis:70px} #main-content .p4-health .p4-health-profile strong{font-size:20px} #main-content .p4-shop .pati-shop-hero{flex-wrap:wrap} #main-content .p4-shop .pati-shop-wallet{width:100%;justify-items:start} #main-content .p4-shop .pati-shop-card-top{min-height:100px!important} #main-content .p4-shop .paticoin-item-icon{font-size:43px!important} } @media(max-width:330px){#main-content :is(.lost-v2,.adopt-v2) :is(.lost-v2-grid,.adopt-v2-grid){grid-template-columns:minmax(0,1fr)!important}#main-content .p4-shop .paticoin-items{gap:7px!important}#main-content .p4-shop .pati-shop-card-bottom strong{font-size:11px!important}} @media(prefers-reduced-motion:reduce){#main-content .p4-hub *,#main-content .p4-health *,#main-content .p4-shop *{transition:none!important;animation:none!important}} /* Clickable week selector matching the care schedule reference */ #main-content .pati-ref-care .p4-care-week{margin:19px 0 16px;padding:4px 0 0} #main-content .pati-ref-care .p4-care-week-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:11px} #main-content .pati-ref-care .p4-care-week-title strong{font-size:17px;color:#42332b;font-weight:850} #main-content .pati-ref-care .p4-care-week-title button{border:0;background:transparent;color:#db7d32;font-size:12px;font-weight:800;min-height:38px} #main-content .pati-ref-care .p4-care-dates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px} #main-content .pati-ref-care .p4-care-dates button{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;min-width:0;min-height:66px;padding:8px 2px!important;border:1px solid transparent!important;background:#fff8ef!important;color:#97795c!important;border-radius:13px!important} #main-content .pati-ref-care .p4-care-dates button.active{background:#ff963a!important;color:#fff!important;border-color:#ff963a!important;box-shadow:0 3px 9px #dd85342b} #main-content .pati-ref-care .p4-care-dates button span{font-size:10px;white-space:nowrap} #main-content .pati-ref-care .p4-care-dates button b{font-size:16px} /* patiyiz-feature-simplification-20261028.css */ /* Focused simplification: no deletion of tasks, achievements, reminders or private records. */ #main-content .pati-missions-more, #main-content .pati-follower-more, #main-content details.paticoin-done-zone, #main-content .pati-academy-more{border:1px solid #e8e4ef;border-radius:16px;background:#faf8fd;margin:12px 0} #main-content .pati-missions-more>summary, #main-content .pati-follower-more>summary, #main-content details.paticoin-done-zone>summary, #main-content .pati-academy-more>summary{ display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 15px;cursor:pointer; color:#49395f;font-size:13px;font-weight:800;list-style:none } #main-content .pati-missions-more>summary::-webkit-details-marker, #main-content .pati-follower-more>summary::-webkit-details-marker, #main-content details.paticoin-done-zone>summary::-webkit-details-marker, #main-content .pati-academy-more>summary::-webkit-details-marker{display:none} #main-content .pati-missions-more>summary:after, #main-content .pati-follower-more>summary:after, #main-content details.paticoin-done-zone>summary:after, #main-content .pati-academy-more>summary:after{content:'⌄';font-size:19px;color:#825db7} #main-content .pati-missions-more[open]>summary:after, #main-content .pati-follower-more[open]>summary:after, #main-content details.paticoin-done-zone[open]>summary:after, #main-content .pati-academy-more[open]>summary:after{transform:rotate(180deg)} #main-content .pati-missions-more-list{display:grid;gap:9px;padding:0 9px 10px} #main-content .pati-follower-more>section,#main-content .pati-follower-more>div, #main-content details.paticoin-done-zone>.paticoin-tasks{margin:8px 10px 12px} #main-content .pati-follower-more{background:#f3eafd} #main-content .pati-missions-more{background:#f7f8fc} #main-content .pati-recommended-lessons{margin:22px 0 20px} #main-content .pati-recommended-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px} #main-content .pati-recommended-heading h2{margin:0;font-size:19px;font-weight:800;color:#41283f} #main-content .pati-recommended-heading small{color:#8b758b;font-size:11px} #main-content .pati-recommended-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px} #main-content .pati-recommended-lesson{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:#fff!important;color:#322b3c!important;border:1px solid #f0e5ee!important;border-radius:16px!important;min-height:65px;padding:10px 12px!important;box-shadow:0 4px 12px #5f31450b} #main-content .pati-recommended-lesson-icon{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#fff0e9;font-size:23px} #main-content .pati-recommended-lesson:nth-child(3n+2) .pati-recommended-lesson-icon{background:#eaf2ff} #main-content .pati-recommended-lesson:nth-child(3n+3) .pati-recommended-lesson-icon{background:#f3eaff} #main-content .pati-recommended-lesson>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0} #main-content .pati-recommended-lesson strong{font-size:13px;line-height:1.3} #main-content .pati-recommended-lesson small{font-size:11px;color:#81788d} #main-content .pati-recommended-lesson>span:last-child{color:#bd78ad;font-size:20px} #main-content .pati-academy-more{grid-column:1/-1;margin:0!important} #main-content .pati-academy-hidden-topics{display:grid;grid-template-columns:1fr;gap:10px;padding:5px 10px 12px} #main-content .pati-pets-own-shortcut{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;margin:8px 0 19px;background:#f0ebff;border-radius:15px} #main-content .pati-pets-own-shortcut span{color:#695a81;font-size:12px;line-height:1.45} #main-content .pati-pets-own-shortcut button{flex:0 0 auto;min-height:42px;padding:8px 11px;background:#fff;border:1px solid #e6d5fa;color:#6747a4;border-radius:11px;font-size:12px;font-weight:800} #main-content .pati-unified-reminder{border-color:#dcedf5!important} #main-content .pati-unified-reminder .care-v2-item-icon{background:#e5f4ff!important} #main-content .pati-unified-done{font-size:11px;font-weight:750;color:#277b54} @media(max-width:390px){ #main-content .pati-recommended-heading{align-items:start;flex-direction:column;gap:5px} #main-content .pati-pets-own-shortcut{flex-direction:column;align-items:stretch} } /* patiyiz-collab-following-20261028.css */ /* Only the two optional social features: collaboration and the following timeline. */ #main-content .pati-home-feed-tabs{display:flex;align-items:center;gap:8px;margin:14px 10px 16px;border-bottom:1px solid #e5e5e5;padding-bottom:8px} #main-content .pati-home-feed-tabs button{font:inherit;flex:1;min-width:0;border:0;border-radius:10px;background:transparent;color:#777;padding:12px 10px;font-size:14px;font-weight:780;cursor:pointer} #main-content .pati-home-feed-tabs button.active,#main-content .pati-home-feed-tabs button[aria-selected="true"]{background:#181818;color:white} #main-content .pati-home-feed-tabs button:focus-visible,#main-content .pati-collab-requests button:focus-visible,#main-content .pati-following-empty button:focus-visible{outline:3px solid #888;outline-offset:3px} #main-content .pati-following-empty{margin:14px 10px 24px;padding:30px 18px;border:1px solid #e8e8e8;border-radius:18px;text-align:center;background:#fff} #main-content .pati-following-empty strong{display:block;font-size:16px;margin-bottom:9px} #main-content .pati-following-empty p{max-width:380px;margin:0 auto 16px;color:#686868;line-height:1.5;font-size:13px} #main-content .pati-following-empty button{border:1px solid #dedede;border-radius:10px;padding:10px 14px;background:#fff;font-weight:750;color:#222;margin:2px} #main-content .pati-following-empty button:first-of-type{background:#181818;color:#fff;border-color:#181818} #main-content .pati-following-state,#main-content .pati-following-error{padding:18px 12px;text-align:center;color:#646464;font-size:13px} #main-content .pati-collab-requests{margin:12px 10px 18px;border:1px solid #dedede;border-radius:18px;padding:15px;background:#fbfbfb} #main-content .pati-collab-requests h2{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin:0 0 12px;color:#181818} #main-content .pati-collab-requests h2 span{font-size:12px;min-width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#181818;color:#fff} #main-content .pati-collab-request{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid #ebebeb} #main-content .pati-collab-request>div:first-child{min-width:0;flex:1} #main-content .pati-collab-request b{font-size:13px} #main-content .pati-collab-request small{font-size:12px;line-height:1.45;color:#666;display:block;margin-top:3px;overflow-wrap:anywhere} #main-content .pati-collab-request>div:last-child{display:flex;gap:6px} #main-content .pati-collab-request button{border:1px solid #d6d6d6;border-radius:9px;background:#fff;color:#222;padding:9px 10px;font-size:12px;font-weight:750} #main-content .pati-collab-request button:first-child{background:#181818;color:#fff;border-color:#181818} #main-content .pati-collab-refresh{border:0;background:transparent;color:#575757;font-size:12px;padding:8px 0 0;cursor:pointer} #main-content .pati-collab-byline{font-size:12px;color:#555;display:inline-flex;align-items:center;gap:3px;min-width:0} #main-content .pati-collab-byline button{color:inherit;border:0;background:transparent;font-size:12px;font-weight:800;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px;cursor:pointer} #main-content .pati-collab-field{margin:12px 0 4px} #main-content .pati-collab-field input{width:100%;min-height:44px} #main-content .pati-collab-field small{display:block;color:#686868;line-height:1.4;margin:6px 0} @media(max-width:470px){ #main-content .pati-home-feed-tabs{margin:10px 5px 12px} #main-content .pati-home-feed-tabs button{padding:12px 7px} #main-content .pati-collab-requests{margin-inline:5px;padding:12px} #main-content .pati-collab-request{flex-direction:column;align-items:stretch} #main-content .pati-collab-request>div:last-child{justify-content:flex-start} #main-content .pati-collab-request button{min-height:39px} } html[data-pati-theme="dark"] #main-content .pati-collab-requests, html[data-pati-theme="dark"] #main-content .pati-following-empty{background:#1b1b1b;border-color:#3c3c3c} html[data-pati-theme="dark"] #main-content .pati-collab-requests h2, html[data-pati-theme="dark"] #main-content .pati-following-empty strong{color:#fafafa} html[data-pati-theme="dark"] #main-content .pati-collab-request{border-color:#444} html[data-pati-theme="dark"] #main-content .pati-home-feed-tabs{border-color:#444} html[data-pati-theme="dark"] #main-content .pati-home-feed-tabs button:not(.active){color:#ddd} @media(prefers-reduced-motion:reduce){ #main-content .pati-home-feed-tabs button,#main-content .pati-collab-request button{transition:none!important} } /* patiyiz-header-notifications-community-pins-20261028.css */ /* Focused 28 Oct improvements: header, pinned private message, minimal notifications, broader questions */ #app-root:not(.hidden)>.mobile-header{display:flex;align-items:center;gap:8px;min-width:0} #app-root:not(.hidden)>.mobile-header>.pati-header-share{display:flex;align-items:center;justify-content:center;flex:none;width:37px;height:37px;min-width:37px;border-radius:11px;background:#171717;color:#fff;border:1px solid #171717;padding:8px;cursor:pointer;margin-left:1px} #app-root:not(.hidden)>.mobile-header>.pati-header-share .icon{width:23px;height:23px;stroke:currentColor;stroke-width:2.4} #app-root:not(.hidden)>.mobile-header>.brand{display:flex;align-items:center;min-width:0;flex:1 1 auto;margin-left:3px;gap:6px} #app-root:not(.hidden)>.mobile-header>.brand .brand-word{white-space:nowrap} #app-root:not(.hidden)>.mobile-header>.pati-header-actions{flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:4px} #app-root:not(.hidden)>.mobile-header>.pati-header-actions #pati-header-notifications{flex:0 0 auto} #app-root:not(.hidden)>.mobile-header>.pati-header-share:focus-visible{outline:3px solid #777;outline-offset:3px} #main-content .pati-notifications-simple{max-width:720px;margin:0 auto;padding:12px 10px 26px;min-height:50vh} #main-content .pati-notifications-simple-head{padding:10px 5px 18px;border-bottom:1px solid #ececec;margin-bottom:0} #main-content .pati-notifications-simple-head h1{font-size:23px;font-weight:800;letter-spacing:-.45px;color:#171717;margin:0;display:flex;align-items:center;gap:9px} #main-content .pati-notifications-simple-head .pati-alert-count{font-size:12px;font-weight:750;min-width:24px;height:24px;line-height:24px;border-radius:50%;background:#171717;color:#fff;text-align:center} #main-content .pati-notifications-simple .notification-v2-list{display:flex;flex-direction:column;gap:0} #main-content .pati-notifications-simple .pati-alert-simple{display:block;border:0;border-bottom:1px solid #eee;border-radius:0;background:transparent;margin:0;padding:0;box-shadow:none;touch-action:pan-y} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-entry{display:flex;align-items:center;text-align:left;gap:11px;width:100%;padding:14px 8px;background:transparent;border:0;min-height:70px;cursor:pointer} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-content{min-width:0;flex:1} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-title{display:block;font-size:13px;font-weight:650;line-height:1.45;overflow-wrap:anywhere;color:#1d1d1d} #main-content .pati-notifications-simple .pati-alert-simple.is-read .pati-alert-title{font-weight:500;color:#555} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-meta{display:block;margin-top:5px;font-size:11px;color:#888} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-unread{flex:0 0 auto;min-width:7px;height:7px;border-radius:50%;background:#151515} #main-content .pati-notifications-simple .pati-alert-simple:focus-visible{outline:2px solid #888;outline-offset:-2px} #main-content .pati-notification-delete-explain{margin:0 0 12px;color:#555;line-height:1.6} #modal-root .pati-notification-delete-confirm{min-height:44px;width:100%;border-radius:12px;border:1px solid #a92323;background:#b83232;color:#fff;font-weight:800;cursor:pointer} #main-content .pati-dm-pinned-banner{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #e6e6e6;border-left:3px solid #1e1e1e;background:#fafafa;min-height:62px;max-width:100%;flex:0 0 auto} #main-content .pati-dm-pinned-banner .pati-dm-pinned-open{display:flex;flex:1;min-width:0;align-items:center;gap:8px;text-align:left;border:0;background:transparent;padding:3px 2px;color:#222;cursor:pointer} #main-content .pati-dm-pinned-banner .pati-dm-pinned-open>span:last-child{flex:1;min-width:0} #main-content .pati-dm-pinned-banner .pati-dm-pinned-open strong{display:block;font-size:12px;color:#222} #main-content .pati-dm-pinned-banner .pati-dm-pinned-open small{display:block;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;margin-top:3px} #main-content .pati-dm-pinned-banner>button:last-child{flex:0 0 auto;background:#fff;border:1px solid #dedede;border-radius:9px;padding:8px;color:#444;font-weight:700;font-size:11px;cursor:pointer} #main-content .pati-dm-message-actions{display:flex;flex-wrap:wrap;gap:8px} #main-content .pati-dm-message-actions button{min-height:43px;flex:1 1 130px} #main-content .pati-dm-pin-flash{outline:2px solid #5e5e5e;outline-offset:3px} #main-content .pati-filter-tabs{scrollbar-width:thin;overflow-x:auto} #main-content .pati-filter-tabs button{flex:0 0 auto;white-space:nowrap;min-height:39px} @media(max-width:480px){ #app-root:not(.hidden)>.mobile-header{padding-inline:9px;gap:6px} #app-root:not(.hidden)>.mobile-header>.pati-header-share{width:35px;height:35px;min-width:35px;padding:7px} #app-root:not(.hidden)>.mobile-header>.brand{margin-left:3px;gap:5px} #app-root:not(.hidden)>.mobile-header>.brand .brand-icon{flex:0 0 auto} #app-root:not(.hidden)>.mobile-header>.pati-header-actions{gap:3px} #main-content .pati-notifications-simple{padding-inline:5px} #main-content .pati-dm-pinned-banner{padding:8px 10px} } @media(max-width:370px){ #app-root:not(.hidden)>.mobile-header>.brand .brand-caption{display:none} #app-root:not(.hidden)>.mobile-header>.pati-header-actions{gap:2px} #app-root:not(.hidden)>.mobile-header>.brand{margin-left:2px} } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-header>.pati-header-share{background:#f4f4f4;color:#151515;border-color:#f4f4f4} html[data-pati-theme="dark"] #main-content .pati-notifications-simple-head{border-color:#383838} html[data-pati-theme="dark"] #main-content .pati-notifications-simple-head h1{color:#f7f7f7} html[data-pati-theme="dark"] #main-content .pati-notifications-simple .pati-alert-simple{border-color:#353535} html[data-pati-theme="dark"] #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-title{color:#f1f1f1} html[data-pati-theme="dark"] #main-content .pati-notifications-simple .pati-alert-simple.is-read .pati-alert-title{color:#bbb} html[data-pati-theme="dark"] #main-content .pati-dm-pinned-banner{background:#262626;border-color:#484848} html[data-pati-theme="dark"] #main-content .pati-dm-pinned-banner .pati-dm-pinned-open strong{color:#fafafa} html[data-pati-theme="dark"] #main-content .pati-dm-pinned-banner .pati-dm-pinned-open small{color:#c9c9c9} @media(prefers-reduced-motion:reduce){#main-content .pati-dm-pin-flash{animation:none!important}} /* patiyiz-academy-learning-path-20261028.css */ /* Patiyiz Academy: choose an illustrated subject first, then finish its lessons in order. */ #main-content .p4-hub-direct-hero>.p4-hub-hero{margin-top:0!important} #main-content .p4-hub-direct-hero>.p4-pet-picker{margin-top:12px;margin-bottom:13px} #main-content .pati-edu-path-home{max-width:650px;margin-inline:auto;background:#fff!important;padding:16px 10px 32px!important;box-sizing:border-box} #main-content .pati-edu-path-home .pati-ref-academy-header{margin-bottom:15px} #main-content .pati-edu-path-home .pati-ref-academy-header h1{font-size:clamp(25px,5vw,34px)!important;color:#1b1a1f!important;margin:6px 0 7px!important} #main-content .pati-edu-path-home .pati-ref-academy-header p{font-size:13px;line-height:1.55;color:#77707e;margin:0} #main-content .pati-edu-path-home .pati-ref-academy-section{margin-top:12px} #main-content .pati-edu-path-home .pati-ref-academy-topics{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px!important} #main-content .pati-edu-path-home .pati-ref-academy-topic{min-height:154px!important;width:100%;display:flex;align-items:center;text-align:left;position:relative;overflow:hidden;padding:21px 18px!important;border-radius:22px!important} #main-content .pati-edu-path-home .pati-ref-academy-topic-copy{z-index:1;max-width:60%;display:flex;flex-direction:column;align-items:flex-start;gap:6px} #main-content .pati-edu-path-home .pati-ref-academy-topic strong{font-size:clamp(18px,4vw,22px)!important} #main-content .pati-edu-path-home .pati-ref-academy-topic small{font-size:12px!important;line-height:1.4} #main-content .pati-edu-path-home .pati-ref-academy-topic .pati-topic-open{margin-top:12px;font-weight:800;font-size:12px;color:#282231} #main-content .pati-edu-path-home .pati-ref-academy-topic img{display:block;position:absolute;right:-4px;bottom:-17px;width:46%;height:119%;max-width:46%;object-fit:contain;object-position:center bottom;pointer-events:none} #main-content .pati-edu-path-home .pati-ref-academy-topic .pati-academy-topic-art-icon{display:grid;place-items:center;position:absolute;right:13px;top:50%;transform:translateY(-50%);width:35%;height:84%;font-size:clamp(55px,14vw,86px);text-shadow:0 7px 17px #30304a18;pointer-events:none} #main-content .pati-edu-path-home .pati-academy-total-progress{margin-top:25px;border:1px solid #eeebf4;border-radius:18px;padding:17px 18px;background:#fbfaff} #main-content .pati-edu-path-home .pati-academy-total-progress strong{font-size:13px} #main-content .pati-edu-path-home .pati-academy-total-progress small{display:block;font-size:11px;color:#777083} #main-content .pati-edu-path-home .pati-academy-total-progress .pati-edu-progressbar{height:9px;background:#e6e0ed;border-radius:20px;margin:11px 0} #main-content .pati-edu-path-home .pati-academy-total-progress .pati-edu-progressbar span{height:100%;display:block;background:#7161b8;border-radius:20px} #main-content .pati-edu-path-list{max-width:650px;margin:0 auto;padding:13px 9px 36px} #main-content .pati-edu-path-list .pati-ref-topic-toolbar{padding:9px 0 16px} #main-content .pati-edu-path-list .pati-ref-topic-toolbar button{min-height:42px;border-radius:11px;padding:9px 13px;border:1px solid #e8e4ee;background:#faf8fd;color:#303039;font-weight:800} #main-content .pati-edu-path-topic-head{display:flex;align-items:center;gap:17px;padding:18px;border-radius:22px;background:#f5f0fd;border:1px solid #eee6f7;margin:0 0 15px} #main-content .pati-edu-path-topic-icon{width:106px;height:106px;border-radius:19px;flex:0 0 106px;display:grid;place-items:center;overflow:hidden;background:#e9def8} #main-content .pati-edu-path-topic-icon img{width:100%;height:100%;object-fit:contain} #main-content .pati-edu-path-topic-icon .pati-academy-topic-art-icon{font-size:54px;line-height:1} #main-content .pati-edu-path-topic-head>div:last-child{min-width:0;flex:1} #main-content .pati-edu-path-topic-head>div:last-child>span{font-size:10px;font-weight:800;letter-spacing:.11em;color:#7b6795} #main-content .pati-edu-path-topic-head h1{font-size:clamp(19px,4vw,25px);margin:5px 0 6px;line-height:1.18;letter-spacing:-.03em;color:#252033} #main-content .pati-edu-path-topic-head p{font-size:12px;line-height:1.5;color:#71677c;margin:0} #main-content .pati-edu-path-progress{margin:13px 0;padding:16px 18px;background:#fff;border:1px solid #eae6ee;border-radius:16px} #main-content .pati-edu-path-progress>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px} #main-content .pati-edu-path-progress>div:first-child small{color:#7b7286} #main-content .pati-edu-path-progress .pati-edu-progressbar{height:10px;background:#f0ebf5;border-radius:20px;margin:11px 0 0} #main-content .pati-edu-path-progress .pati-edu-progressbar>span{display:block;height:100%;border-radius:20px;background:#795ad7} #main-content .pati-edu-path-start{display:block;width:100%;margin:13px 0 22px;min-height:49px;padding:12px 18px;border:0!important;border-radius:14px!important;background:#211b2c!important;color:#fff!important;font-weight:800;font-size:14px} #main-content .pati-edu-path-list .edu-v2-results-head{display:flex;align-items:center;justify-content:space-between;margin:19px 1px 12px} #main-content .pati-edu-path-list .edu-v2-results-head h2{font-size:18px;margin:0} #main-content .pati-edu-path-items{display:grid;grid-template-columns:1fr;gap:10px!important} #main-content .pati-edu-path-item{box-sizing:border-box;display:flex;align-items:center;gap:13px;width:100%;min-width:0;text-align:left;padding:14px 13px;min-height:89px;background:#fff;border:1px solid #e9e6ec;border-radius:16px;font:inherit;color:#1d1b23} #main-content button.pati-edu-path-item{cursor:pointer} #main-content .pati-edu-path-item .pati-edu-path-no{display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border-radius:11px;background:#efeafa;color:#6543bb;font-size:15px;font-weight:800} #main-content .pati-edu-path-item .pati-edu-path-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px} #main-content .pati-edu-path-item .pati-edu-path-copy .pati-edu-path-step{font-size:10px;font-weight:800;color:#8b8097} #main-content .pati-edu-path-item .pati-edu-path-copy strong{font-size:13px;line-height:1.35;color:#231e2b} #main-content .pati-edu-path-item .pati-edu-path-copy small{font-size:11px;line-height:1.4;color:#8b8296} #main-content .pati-edu-path-item .pati-edu-path-status{font-size:11px;color:#6d4ca9;flex:0 0 auto;text-align:right} #main-content .pati-edu-path-item.is-current{border-color:#9e86df;background:#fcfaff} #main-content .pati-edu-path-item.is-done .pati-edu-path-no{background:#d9f1e4;color:#27885d} #main-content .pati-edu-path-item.is-done .pati-edu-path-status{color:#3f8e65} #main-content .pati-edu-path-item.is-locked{opacity:.68;background:#f7f6f8;border-color:#ece9ee;cursor:not-allowed} #main-content .pati-edu-path-item.is-locked .pati-edu-path-no{background:#e7e5e9;color:#7d7883} #main-content .pati-edu-path-item.is-locked .pati-edu-path-status{color:#89838e} #main-content .pati-edu-path-complete{border-radius:12px;background:#edf8f0;color:#36704a;padding:13px;font-weight:800} #main-content .edu-path-detail .pati-edu-next-locked{background:#eee!important;color:#6b6970!important;border:1px solid #ddd!important;cursor:not-allowed!important;min-height:42px} @media(max-width:470px){ #main-content .pati-edu-path-home{padding:12px 5px 26px!important} #main-content .pati-edu-path-home .pati-ref-academy-topic{min-height:143px!important;padding:16px!important} #main-content .pati-edu-path-home .pati-ref-academy-topic img{width:48%;max-width:48%;right:-8px} #main-content .pati-edu-path-topic-head{gap:11px;padding:13px} #main-content .pati-edu-path-topic-icon{width:78px;height:78px;flex-basis:78px} #main-content .pati-edu-path-topic-icon .pati-academy-topic-art-icon{font-size:39px} #main-content .pati-edu-path-item{gap:9px;padding:12px 10px} #main-content .pati-edu-path-item .pati-edu-path-status{font-size:10px;max-width:78px} #main-content .pati-edu-path-item .pati-edu-path-copy strong{font-size:12px} } @media(max-width:365px){ #main-content .pati-edu-path-home .pati-ref-academy-topic-copy{max-width:63%} #main-content .pati-edu-path-home .pati-ref-academy-topic img{width:43%;max-width:43%} #main-content .pati-edu-path-item .pati-edu-path-status{max-width:64px} } @media(prefers-reduced-motion:reduce){#main-content .pati-edu-path-home button,#main-content .pati-edu-path-list button{transition:none!important}} /* patiyiz-notification-delete-dm-verified-20261028.css */ /* 28 Oct: one-tap notification deletion, five-tab DM navigation, own verification requests. */ #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.pati-messages-nav .pati-mobile-nav-glyph{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:30px} #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.pati-messages-nav .pati-count-badge{position:absolute;top:-4px;right:-11px;min-width:17px;min-height:17px;border-radius:999px;padding:2px 4px;display:grid;place-items:center;line-height:1;font-size:10px;color:#fff;background:#181818;border:2px solid #fff} #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.pati-messages-nav.active{background:#f0f0f3!important;color:#171719!important} #main-content .pati-notifications-simple .pati-alert-simple{display:flex;align-items:center;gap:4px;min-width:0} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-entry{width:auto;min-width:0;flex:1 1 auto} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete{display:grid;place-items:center;flex:0 0 38px;width:38px;height:40px;min-width:38px;margin:0 5px 0 0;border:0;border-radius:11px;background:transparent;color:#777;cursor:pointer;touch-action:manipulation} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete .icon{width:18px;height:18px} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete:active{background:#fce9e9;color:#b02635} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete:hover{background:#f5f2f2;color:#b02635} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete:focus-visible{outline:2px solid #a42f36;outline-offset:2px} #main-content .pati-profile-verify{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;padding:2px 0 14px} #main-content .pati-profile-verify-button{min-height:42px;border:1px solid #bfdcff;background:#eef7ff;color:#1364a5;border-radius:12px;padding:10px 15px;font-weight:800;font-size:13px;cursor:pointer} #main-content .pati-profile-verify-pending{display:inline-flex;align-items:center;min-height:41px;border:1px solid #dee8f9;background:#f3f7ff;color:#28608c;border-radius:12px;padding:10px 14px;font-weight:750;font-size:12px} #main-content .pati-profile-verify small{display:block;flex:1 0 100%;font-size:11px;line-height:1.5;color:#777;max-width:420px} #main-content .pati-profile-verify-button:focus-visible{outline:3px solid #5e9ad1;outline-offset:3px} html[data-pati-theme="dark"] #main-content .pati-profile-verify-button{background:#15334a;color:#d0e9ff;border-color:#35668a} html[data-pati-theme="dark"] #main-content .pati-profile-verify-pending{background:#26354a;color:#d1e8ff;border-color:#52637a} html[data-pati-theme="dark"] #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete{color:#c9c9c9} @media(max-width:470px){ #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-entry{padding:11px 6px} #main-content .pati-notifications-simple .pati-alert-simple .pati-alert-delete{min-width:42px;width:42px;height:44px;flex-basis:42px;margin-right:2px} #main-content .pati-profile-verify{padding-inline:3px} } @media(prefers-reduced-motion:reduce){#main-content .pati-profile-verify-button,#main-content .pati-alert-delete{transition:none!important}} /* patiyiz-menu-pet-profile-portrait-20261028.css */ /* Existing-feature polish only: in-menu notifications, pet editor, mobile profile and 9:16 story capture. */ #app-root>.mobile-header>.pati-header-actions{gap:7px;justify-content:flex-end} #app-root>.mobile-header>.pati-header-actions>.pati-header-menu{flex:0 0 auto} #tools-form .pati-feature-notifications{padding:12px;border:1px solid #e8e8eb;border-radius:17px;background:#fafafa;margin:0 0 16px;min-width:0} #tools-form .pati-menu-notifications-top{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:0 0 6px} #tools-form .pati-menu-notifications-top h3{margin:0;font-size:14px;font-weight:850;display:flex;align-items:center;gap:7px;color:#1b1b1e} #tools-form .pati-menu-notifications-top h3 .icon{width:17px;height:17px} #tools-form .pati-menu-notice-count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#18181c;color:#fff;font-size:11px} #tools-form .pati-menu-notifications-all{flex:0 0 auto;font-size:12px;font-weight:750;background:transparent;border:0;color:#4d4d56;padding:9px 5px;min-height:36px} #tools-form .pati-menu-notifications-list{max-height:260px;overflow-y:auto;overscroll-behavior:contain;min-width:0} #tools-form .pati-menu-notifications-empty{margin:3px 0 0;padding:12px 5px;color:#73747a;font-size:12px} #tools-form .pati-alert-simple{display:flex;align-items:center;gap:3px;min-width:0;margin:0;border:0;border-top:1px solid #e6e6e9;background:transparent;border-radius:0;padding:0} #tools-form .pati-alert-simple .pati-alert-entry{flex:1 1 auto;display:flex;align-items:center;text-align:left;gap:10px;min-width:0;border:0;background:transparent;padding:12px 5px;color:#27272d;cursor:pointer} #tools-form .pati-alert-simple .pati-alert-avatar{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border-radius:50%;background:#eaeaf0;overflow:hidden} #tools-form .pati-alert-simple .pati-alert-avatar .avatar{width:100%;height:100%} #tools-form .pati-alert-simple .pati-alert-content{min-width:0;flex:1} #tools-form .pati-alert-simple .pati-alert-title{font-size:12px;line-height:1.45;display:block;overflow-wrap:anywhere} #tools-form .pati-alert-simple.is-read .pati-alert-title{color:#666;font-weight:500} #tools-form .pati-alert-simple .pati-alert-meta{display:block;color:#888;margin-top:4px;font-size:10px} #tools-form .pati-alert-simple .pati-alert-unread{width:7px;height:7px;background:#171719;border-radius:50%;flex:0 0 7px} #tools-form .pati-alert-simple .pati-alert-delete{flex:0 0 41px;width:41px;min-height:43px;border:0;background:transparent;border-radius:11px;color:#74747d;display:grid;place-items:center;cursor:pointer} #tools-form .pati-alert-simple .pati-alert-delete .icon{width:18px;height:18px} #tools-form .pati-alert-simple .pati-alert-delete:hover,#tools-form .pati-alert-simple .pati-alert-delete:active{color:#a91e34;background:#fcecee} #tools-form .pati-alert-simple :is(.pati-alert-delete,.pati-alert-entry):focus-visible{outline:2px solid #5c5c62;outline-offset:-2px} /* Make new pet entry look exactly like Edit Profile, not a standalone patchwork form. */ #modal-root .modal.pati-pet-edit-modal{width:min(100% - 24px,520px)!important;max-width:520px!important;border-radius:22px!important} #modal-root .pati-pet-edit-modal .pati-edit-cover{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px 8px;border-bottom:1px solid #efeff1} #modal-root .pati-pet-edit-modal .pati-edit-avatar{height:96px;width:96px;min-width:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#f0f0f3} #modal-root .pati-pet-edit-modal .pati-pet-edit-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} #modal-root .pati-pet-edit-modal .pati-pet-edit-photo-tools{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:100%} #modal-root .pati-pet-edit-modal .pati-pet-edit-photo-tools strong{font-size:14px} #modal-root .pati-pet-edit-modal .pati-pet-edit-photo-tools small{color:#797982;font-size:11px;line-height:1.5} #modal-root .pati-pet-edit-modal .pati-pet-photo-select{display:inline-flex;align-items:center;justify-content:center;min-height:41px;border-radius:11px;background:#f0f0f3;color:#27272b;border:1px solid #e6e6e9;padding:9px 14px;font-size:13px;font-weight:800;cursor:pointer} #modal-root .pati-pet-edit-modal #pati-pet-photo{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} #modal-root .pati-pet-edit-modal .pati-edit-sections{padding:15px 0 8px} #modal-root .pati-pet-edit-modal .pati-edit-section-title{font-weight:850;margin:12px 0;font-size:13px} #modal-root .pati-pet-edit-modal .pati-pet-edit-fields-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px} #modal-root .pati-pet-edit-modal :is(input:not([type=file]),select,textarea){width:100%;min-width:0;box-sizing:border-box} #modal-root .pati-pet-edit-modal .pati-pet-delete{margin-right:auto;max-width:100%;white-space:normal;font-size:11px} /* Mobile profile: compact Instagram-like summary, fit-to-screen 3-column posts. */ @media(max-width:740px){ #main-content .pati-ig-profile{width:100%!important;max-width:100%!important;margin:0!important;overflow-x:hidden!important;border-radius:0!important;padding:0 0 calc(84px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;background:#fff!important} #main-content .pati-ig-profile .pati-ig-summary{display:grid!important;grid-template-columns:clamp(72px,21vw,88px) minmax(0,1fr)!important;gap:clamp(10px,3vw,17px)!important;align-items:center!important;padding:17px 12px 8px!important;width:100%!important;box-sizing:border-box!important;background:#fff!important;isolation:auto!important} #main-content .pati-ig-profile .pati-ig-summary:before{display:none!important;content:none!important} #main-content .pati-ig-profile .pati-ig-avatar{width:clamp(72px,21vw,88px)!important;height:clamp(72px,21vw,88px)!important;min-width:0!important;max-width:100%!important;flex-basis:auto!important;padding:2px!important;border:2px solid #e3e3e6!important;border-radius:50%!important;box-sizing:border-box!important} #main-content .pati-ig-profile .pati-ig-avatar .avatar{width:100%!important;height:100%!important;display:block} #main-content .pati-ig-profile .pati-ig-avatar img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important} #main-content .pati-ig-profile .pati-ig-info{min-width:0!important;width:100%!important;gap:3px!important} #main-content .pati-ig-profile .pati-ig-handle-row{display:flex!important;gap:5px!important;align-items:center;flex-wrap:wrap;min-width:0} #main-content .pati-ig-profile .pati-ig-handle{font-size:clamp(13px,3.9vw,18px)!important;line-height:1.25!important;overflow-wrap:anywhere!important} #main-content .pati-ig-profile .pati-ig-name{font-size:12px!important;line-height:1.35!important} #main-content .pati-ig-profile .pati-ig-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;gap:2px!important;margin:4px 0 0!important;padding:0!important} #main-content .pati-ig-profile .pati-ig-stats>span,#main-content .pati-ig-profile .pati-ig-stats>button{min-width:0!important;min-height:45px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;padding:2px 0!important;white-space:normal!important;text-align:center} #main-content .pati-ig-profile .pati-ig-stats b{font-size:clamp(13px,3.9vw,16px)!important;line-height:1.2!important} #main-content .pati-ig-profile .pati-ig-stats small{font-size:clamp(9px,2.5vw,11px)!important;line-height:1.15!important;overflow-wrap:anywhere;white-space:normal!important} #main-content .pati-ig-profile .pati-ig-bio{margin:0!important;padding:8px 13px!important;line-height:1.5!important;font-size:13px!important;overflow-wrap:anywhere} #main-content .pati-ig-profile .pati-mutual-followers{padding-inline:13px;min-width:0;box-sizing:border-box} #main-content .pati-ig-profile .pati-ig-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important;padding:8px 12px 10px!important;margin:0!important;box-sizing:border-box} #main-content .pati-ig-profile .pati-ig-actions button{flex:1 1 125px!important;min-width:0!important;max-width:100%!important;min-height:40px!important;font-size:12px!important;padding:8px!important} #main-content .pati-ig-profile .pati-profile-verify{padding-left:12px!important;padding-right:12px!important} #main-content .pati-ig-profile .pati-ig-tabs{display:flex!important;justify-content:space-around!important;width:100%!important;margin:0!important;box-sizing:border-box!important} #main-content .pati-ig-profile .pati-ig-tabs button{flex:1!important;min-width:0!important;min-height:44px!important} #main-content .pati-ig-profile .pati-ig-grid{display:grid!important;width:100%!important;max-width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;margin:0!important;padding:0!important} #main-content .pati-ig-profile .pati-profile-tile{width:100%!important;aspect-ratio:1!important;min-width:0!important;min-height:0!important;overflow:hidden!important;border-radius:0!important} #main-content .pati-ig-profile .pati-profile-tile :is(img,video){display:block;width:100%!important;height:100%!important;object-fit:cover!important} #main-content .pati-ig-profile .pati-profile-text-tile{display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere} #main-content .pati-ig-profile .pati-ig-highlights{max-width:100%!important;overflow-x:auto!important;box-sizing:border-box!important} } @media(max-width:370px){ #main-content .pati-ig-profile .pati-ig-summary{grid-template-columns:70px minmax(0,1fr)!important;gap:7px!important;padding:12px 8px 7px!important} #main-content .pati-ig-profile .pati-ig-avatar{width:70px!important;height:70px!important} #main-content .pati-ig-profile .pati-ig-handle{font-size:13px!important} #modal-root .pati-pet-edit-modal .pati-pet-edit-fields-row{grid-template-columns:1fr} #tools-form .pati-feature-notifications{padding:9px} } @media(prefers-reduced-motion:reduce){ #tools-form .pati-alert-entry,#tools-form .pati-alert-delete{transition:none!important} } /* patiyiz-desktop-mobile-parity-chat-delete-20261028.css */ /* Patiyiz: one-click private conversation removal + consistent phone/desktop layout. */ #main-content .pati-dm-layout .pati-dm-list-row{ display:flex;align-items:stretch;width:100%;min-width:0;box-sizing:border-box; background:#fff;border-bottom:1px solid #f0f0f2; } #main-content .pati-dm-layout .pati-dm-list-row[hidden]{display:none!important} #main-content .pati-dm-layout .pati-dm-list-row>.chat-person{ display:flex!important;flex:1 1 auto!important;min-width:0!important;max-width:none!important; width:auto!important;border:0!important;border-radius:0!important;padding-right:2px!important; } #main-content .pati-dm-layout .pati-dm-list-row>.chat-person .chat-person-info{ display:flex;flex:1 1 auto;flex-direction:column;min-width:0;overflow:hidden; } #main-content .pati-dm-layout .pati-dm-list-row>.chat-person .chat-person-info strong, #main-content .pati-dm-layout .pati-dm-list-row>.chat-person .chat-person-info small{ max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-dm-layout .pati-dm-list-row>.chat-person .chat-person-meta{ flex:0 0 auto;min-width:0;margin-left:auto; } #main-content .pati-dm-layout .pati-dm-delete-thread{ display:grid;place-items:center;flex:0 0 42px;width:42px;min-width:42px; margin:9px 6px 9px 0;padding:9px;border:0;border-radius:11px; background:#f6f6f8;color:#686970;cursor:pointer;touch-action:manipulation; } #main-content .pati-dm-layout .pati-dm-delete-thread .icon{width:19px;height:19px;pointer-events:none} #main-content .pati-dm-layout .pati-dm-delete-thread:hover, #main-content .pati-dm-layout .pati-dm-delete-thread:active{background:#fff0f1;color:#b32440} #main-content .pati-dm-layout .pati-dm-delete-thread:focus-visible{outline:3px solid #b32440;outline-offset:1px} html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-list-row{background:#222;border-color:#444} html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-delete-thread{background:#36363a;color:#e2dfe4} /* Laptop / desktop: same navigation, vertical content order, and phone-like proportions. */ @media(min-width:741px){ body{background:#f7f7f8!important} #app-root:not(.hidden){width:100%;max-width:none!important;margin:0 auto;min-height:100vh;overflow-x:clip} #app-root:not(.hidden)>.mobile-header{ display:flex!important;position:sticky!important;top:0;left:auto;right:auto; width:min(100%,740px)!important;max-width:740px!important;min-width:0!important; margin:0 auto!important;z-index:90!important; align-items:center;justify-content:space-between;gap:9px; min-height:66px!important;height:auto!important;box-sizing:border-box!important; padding:10px 14px!important;border-bottom:1px solid #e8e8eb!important; background:rgba(255,255,255,.98)!important;box-shadow:0 2px 11px #1818180a!important; } #app-root:not(.hidden)>.mobile-header>.brand{display:flex!important;min-width:0;flex:1 1 auto;margin:0 0 0 3px!important;padding:0!important;gap:7px!important;width:auto!important} #app-root:not(.hidden)>.mobile-header .brand-icon{width:36px;height:36px;min-width:36px;transform:none!important;border-radius:10px} #app-root:not(.hidden)>.mobile-header .brand-word{font-size:clamp(22px,2vw,27px);line-height:1.2} #app-root:not(.hidden)>.mobile-header .brand-caption{display:none} #app-root:not(.hidden)>.mobile-header>.pati-header-share{width:37px!important;height:37px!important;min-width:37px!important;display:grid!important;place-items:center} #app-root:not(.hidden)>.mobile-header>.pati-header-actions{display:flex!important;align-items:center!important;flex:0 0 auto!important;gap:7px!important} #app-root:not(.hidden)>.app-shell{ display:block!important;grid-template-columns:none!important; width:min(100%,740px)!important;max-width:740px!important;min-width:0!important; margin:0 auto!important;padding:8px 9px 106px!important;box-sizing:border-box!important; } #app-root:not(.hidden)>.app-shell>.sidebar, #app-root:not(.hidden)>.app-shell>.right-rail{display:none!important} #app-root:not(.hidden)>.app-shell>.main{ display:block!important;width:100%!important;max-width:100%!important;min-width:0!important; margin:0!important;padding:0!important;box-sizing:border-box!important; } #app-root:not(.hidden)>.mobile-bottom{ display:flex!important;position:fixed!important;z-index:80!important; bottom:0!important;left:50%!important;right:auto!important; transform:translateX(-50%)!important; width:min(100%,740px)!important;max-width:740px!important;min-width:0!important; justify-content:space-around;align-items:center;gap:3px; min-height:69px;box-sizing:border-box;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important; border-top:1px solid #e7e7ea!important;background:rgba(255,255,255,.97)!important; box-shadow:0 -4px 15px #1818180b;backdrop-filter:blur(12px); } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn{ flex:1 1 20%!important;display:flex!important;flex-direction:column!important; align-items:center;justify-content:center;gap:4px; min-width:0!important;min-height:49px!important;margin:0!important;padding:4px 2px!important; background:transparent;border:0;border-radius:12px; color:#85858b;font-size:12px;font-weight:750;cursor:pointer; } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active{color:#18191d!important;background:#f0f0f2!important} #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph{display:grid;place-items:center;position:relative;min-height:26px} #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .icon{width:24px;height:24px} #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn small{display:block;font-size:11px;font-weight:750;white-space:nowrap} #app-root:not(.hidden)>.mobile-fab{display:none!important} #main-content .pati-ig-profile{width:100%!important;max-width:100%!important;box-sizing:border-box!important} #main-content .pati-ig-profile .pati-ig-summary{padding:19px 16px 10px!important;gap:20px!important} #main-content .pati-ig-profile .pati-ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important} #main-content .pati-ig-profile .pati-profile-tile{aspect-ratio:1/1!important} #main-content .pati-dm-layout{display:block!important;width:100%!important;max-width:100%!important} #main-content .pati-dm-layout.mobile-chat-list .chat-people{ display:block!important;width:100%!important;max-height:calc(100dvh - 250px); min-height:160px;overflow-y:auto!important;border-radius:0!important; } #main-content .pati-dm-layout.mobile-chat-list .chat-window{display:none!important} #main-content .pati-dm-layout.mobile-chat-open .chat-people{display:none!important} #main-content .pati-dm-layout.mobile-chat-open .chat-window{ display:flex!important;flex-direction:column!important;width:100%!important; height:calc(100dvh - 220px)!important;min-height:270px;max-height:none!important; border-radius:0!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-history{flex:1 1 auto;min-height:0;overflow-y:auto} #main-content .pati-dm-layout .mobile-chat-back{display:inline-flex!important;align-items:center;justify-content:center} #main-content:has(.pati-dm-layout.mobile-chat-open) .pati-dm-top, #main-content:has(.pati-dm-layout.mobile-chat-open) .pati-dm-filters, #main-content:has(.pati-dm-layout.mobile-chat-open) .pati-dm-searchbar{display:none!important} } @media(max-width:470px){ #main-content .pati-dm-layout .pati-dm-delete-thread{width:42px;min-width:42px;flex-basis:42px;margin-right:3px} #main-content .pati-dm-layout .pati-dm-list-row>.chat-person{padding-left:8px!important;gap:8px!important} #main-content .pati-dm-layout .pati-dm-list-row>.chat-person .chat-person-meta{max-width:48px} } @media(prefers-reduced-motion:reduce){#main-content .pati-dm-delete-thread{transition:none!important}} /* patiyiz-centered-logo-profile-story-dm-images-20261028.css */ /* Header brand truly centered independently of the left + and right controls. */ #app-root:not(.hidden)>.mobile-header{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:5px;box-sizing:border-box} #app-root:not(.hidden)>.mobile-header>.pati-header-share{flex:0 0 37px!important;position:relative;z-index:2;margin-right:auto!important} #app-root:not(.hidden)>.mobile-header>.brand{ position:absolute!important;left:50%!important;top:50%!important; transform:translate(-50%,-50%)!important;z-index:1!important; display:flex!important;align-items:center!important;justify-content:center!important; flex:none!important;width:max-content!important;max-width:calc(100% - 130px)!important; padding:0!important;margin:0!important;min-width:0!important;gap:7px!important; pointer-events:none; } #app-root:not(.hidden)>.mobile-header>.brand>.brand-icon{flex:none!important;transform:none!important;width:35px!important;height:35px!important;min-width:35px!important;border-radius:11px!important} #app-root:not(.hidden)>.mobile-header>.brand .brand-word{font-size:clamp(19px,2.6vw,26px)!important;line-height:1.15!important;letter-spacing:-.055em!important;white-space:nowrap!important} #app-root:not(.hidden)>.mobile-header>.brand .brand-caption{display:none!important} #app-root:not(.hidden)>.mobile-header>.pati-header-actions{margin-left:auto!important;position:relative;z-index:2;flex:0 0 auto!important} @media(max-width:400px){ #app-root:not(.hidden)>.mobile-header>.brand{gap:4px!important;max-width:calc(100% - 136px)!important} #app-root:not(.hidden)>.mobile-header>.brand>.brand-icon{width:29px!important;min-width:29px!important;height:29px!important} #app-root:not(.hidden)>.mobile-header>.brand .brand-word{font-size:19px!important} #app-root:not(.hidden)>.mobile-header>.pati-header-share{flex-basis:34px!important;width:34px!important;min-width:34px!important} } @media(max-width:740px){#app-root:not(.hidden)>.mobile-header{position:fixed!important;top:0!important;left:0!important;right:0!important}} @media(min-width:741px){#app-root:not(.hidden)>.mobile-header{position:sticky!important;top:0!important}} /* One circular profile avatar, no protruding inner image or odd ring; only the story + overlaps intentionally. */ #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar{ position:relative!important;isolation:isolate;display:block!important; flex:none!important;align-self:center!important; width:clamp(74px,21vw,104px)!important;height:clamp(74px,21vw,104px)!important; min-width:0!important;max-width:none!important;aspect-ratio:1!important; padding:0!important;margin:0!important;border:0!important;border-radius:50%!important; background:transparent!important;overflow:visible!important; box-shadow:none!important;box-sizing:border-box!important; } #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar>.avatar, #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar>.avatar.l{ position:relative!important;inset:auto!important;display:grid!important;place-items:center!important; width:100%!important;height:100%!important;min-width:100%!important;max-width:100%!important; flex:none!important;aspect-ratio:1!important;margin:0!important;padding:0!important; border:2px solid #ededf0!important;border-radius:50%!important; overflow:hidden!important;box-sizing:border-box!important;background:#e8e8ec!important; font-size:clamp(21px,5vw,33px)!important; } #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar>.avatar img{ position:absolute!important;inset:0!important;display:block!important; width:100%!important;height:100%!important;max-width:100%!important; border-radius:50%!important;object-fit:cover!important;object-position:center!important; transform:none!important;margin:0!important;padding:0!important; } #main-content .pati-ig-profile .pati-profile-story-plus{ position:absolute;z-index:3;bottom:-2px;right:-4px; display:grid;place-items:center;width:29px;height:29px;min-width:29px; padding:6px;border:2px solid #fff;background:#18181d;color:#fff; border-radius:50%;box-shadow:0 1px 6px #0002;cursor:pointer;touch-action:manipulation; } #main-content .pati-ig-profile .pati-profile-story-plus .icon{width:16px;height:16px;stroke-width:2.7} #main-content .pati-ig-profile .pati-profile-story-plus:focus-visible{outline:3px solid #777;outline-offset:3px} @media(max-width:740px){ #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar{ width:clamp(72px,21vw,88px)!important;height:clamp(72px,21vw,88px)!important; } } @media(max-width:370px){ #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar{width:70px!important;height:70px!important} #main-content .pati-ig-profile .pati-profile-story-plus{width:27px;height:27px;right:-2px} } /* DM image is an edge-to-edge photo; natural aspect ratio, no blank sidebars or forced square. */ #main-content .pati-dm-layout .bubble-chat.pati-dm-image-message{ display:flex!important;flex-direction:column!important;align-items:stretch!important; flex:0 1 auto!important;width:max-content!important;max-width:min(76%,370px)!important; min-width:0!important;box-sizing:border-box!important; padding:0!important;margin-top:5px!important; background:transparent!important;border:0!important;box-shadow:none!important; border-radius:16px!important;overflow:visible!important;color:#54555d!important; } #main-content .pati-dm-layout .bubble-chat.pati-dm-image-message.mine{color:#53545b!important} #main-content .pati-dm-layout .pati-dm-image-open{ display:block!important;width:100%!important;max-width:100%!important; min-width:0!important;max-height:70dvh;overflow:hidden; padding:0!important;margin:0!important;border:0!important; border-radius:16px!important;background:transparent!important; box-shadow:none!important;cursor:zoom-in;line-height:0; } #main-content .pati-dm-layout .pati-dm-image-open>.pati-dm-image{ display:block!important;position:static!important; width:auto!important;height:auto!important;max-width:100%!important; max-height:min(65dvh,520px)!important;min-width:0!important; border:0!important;border-radius:16px!important;object-fit:contain!important; object-position:center!important;box-shadow:none!important;margin:0!important;padding:0!important; } #main-content .pati-dm-layout .bubble-chat.pati-dm-image-message>small{ display:block!important;margin-top:5px!important;padding:0 3px!important; font-size:10px!important;color:#777!important;opacity:1!important; line-height:1.4!important;white-space:normal!important; } #main-content .pati-dm-layout .bubble-chat.pati-dm-image-message .pati-dm-msg-tools{padding-top:3px!important} #main-content .pati-dm-layout .pati-dm-image-open:focus-visible{outline:3px solid #555!important;outline-offset:3px} /* Large authenticated image preview when tapped, with click-to-dismiss outside. */ #modal-root .modal.pati-dm-photo-modal{ width:min(96vw,900px)!important;max-width:900px!important; max-height:96dvh!important;height:auto!important; padding:0!important;border-radius:17px!important;overflow:hidden!important; background:#0b0b0f!important; } #modal-root .pati-dm-photo-modal .modal-header{ display:flex!important;align-items:center!important;justify-content:space-between!important; flex:0 0 auto!important;padding:12px 16px!important; border-bottom:1px solid #34343b!important;background:#17171c!important;color:#fff!important; } #modal-root .pati-dm-photo-modal .modal-header h2{color:#fff!important;font-size:15px!important} #modal-root .pati-dm-photo-modal .modal-header .close-modal{color:#fff!important} #modal-root .pati-dm-photo-modal .modal-content{display:grid!important;place-items:center!important;padding:0!important;background:#0b0b0f!important;max-height:calc(95dvh - 58px)!important;overflow:auto!important} #modal-root .pati-dm-photo-modal .pati-dm-photo-view{width:100%;min-width:0;display:grid;place-items:center;background:#0b0b0f} #modal-root .pati-dm-photo-modal .pati-dm-photo-view img{ display:block!important;width:auto!important;height:auto!important; max-width:100%!important;max-height:calc(93dvh - 72px)!important; object-fit:contain!important;margin:auto!important;border:0!important;box-shadow:none!important; } @media(max-width:740px){ #modal-root .modal.pati-dm-photo-modal{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important} #modal-root .pati-dm-photo-modal .modal-content{max-height:calc(100dvh - 61px)!important} #modal-root .pati-dm-photo-modal .pati-dm-photo-view img{max-height:calc(100dvh - 70px)!important} #main-content .pati-dm-layout .bubble-chat.pati-dm-image-message{max-width:85%!important} } @media(prefers-reduced-motion:reduce){#main-content .pati-profile-story-plus{transition:none!important}} /* patiyiz-profile-chat-photo-polish-20261028.css */ /* Patiyiz — profile media grid and unobtrusive DM controls, 2026-10-28. Keep the existing app features; override only presentation. */ /* Chat deletion is kept in an optional three-dot menu instead of consuming an always-visible large column beside every conversation. */ #main-content .pati-dm-layout .pati-dm-list-row{ position:relative!important; overflow:visible!important; min-width:0!important; } #main-content .pati-dm-layout .pati-dm-list-row>.chat-person{ min-width:0!important; flex:1 1 0%!important; } #main-content .pati-dm-layout .pati-dm-row-actions{ position:relative; display:block; flex:0 0 34px; width:34px; margin:0 4px 0 0; align-self:center; z-index:5; } #main-content .pati-dm-layout .pati-dm-row-actions[open]{z-index:60} #main-content .pati-dm-layout .pati-dm-row-actions>summary{ display:grid; place-items:center; list-style:none; width:34px; height:42px; padding:0; margin:0; background:transparent; border:0; border-radius:11px; color:#777982; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #main-content .pati-dm-layout .pati-dm-row-actions>summary::marker{content:""} #main-content .pati-dm-layout .pati-dm-row-actions>summary::-webkit-details-marker{display:none} #main-content .pati-dm-layout .pati-dm-row-actions>summary .icon{width:19px;height:19px} #main-content .pati-dm-layout .pati-dm-row-actions>summary:hover, #main-content .pati-dm-layout .pati-dm-row-actions[open]>summary{background:#f3f3f5;color:#222} #main-content .pati-dm-layout .pati-dm-row-actions>summary:focus-visible{outline:2px solid #50535b;outline-offset:2px} #main-content .pati-dm-layout .pati-dm-row-menu{ position:absolute; z-index:100; top:calc(100% + 4px); right:0; width:max-content; min-width:178px; padding:5px; border:1px solid #ececf0; border-radius:13px; background:#fff; box-shadow:0 12px 32px #0002; } #main-content .pati-dm-layout .pati-dm-row-actions:not([open]) .pati-dm-row-menu{display:none!important} #main-content .pati-dm-layout .pati-dm-row-actions .pati-dm-delete-thread{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; flex:none!important; width:100%!important; min-width:0!important; height:auto!important; min-height:40px!important; margin:0!important; padding:9px 12px!important; background:transparent!important; color:#ba3444!important; border:0!important; border-radius:8px!important; font-size:13px!important; font-weight:700!important; line-height:1.25!important; white-space:nowrap; } #main-content .pati-dm-layout .pati-dm-row-actions .pati-dm-delete-thread .icon{ width:17px!important;height:17px!important;flex:none; } #main-content .pati-dm-layout .pati-dm-row-actions .pati-dm-delete-thread:hover, #main-content .pati-dm-layout .pati-dm-row-actions .pati-dm-delete-thread:active{ background:#fff0f1!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-row-actions>summary{color:#d2d2d5} html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-row-actions[open]>summary{background:#393940;color:#fff} html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-row-menu{background:#29292e;border-color:#44444b} @media(max-width:470px){ #main-content .pati-dm-layout .pati-dm-row-actions{width:32px;flex-basis:32px;margin-right:2px} #main-content .pati-dm-layout .pati-dm-row-actions>summary{width:32px} } /* Native dialog: no cropping, card borders, stretched portrait media or old generic form footer. It closes with × or the Escape key. */ dialog.pati-dm-lightbox{ position:fixed!important; inset:0!important; box-sizing:border-box!important; display:grid; grid-template-rows:auto minmax(0,1fr); width:100vw!important; height:100vh!important; height:100dvh!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; overflow:hidden!important; background:#0c0c0f!important; color:#fff!important; z-index:2147483000; } dialog.pati-dm-lightbox:not([open]){display:none!important} dialog.pati-dm-lightbox::backdrop{background:#000d} .pati-dm-lightbox-toolbar{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px; box-sizing:border-box; background:#151518; color:#fff; border-bottom:1px solid #303037; font-size:14px; } .pati-dm-lightbox-close{ width:40px; height:40px; border:0; border-radius:50%; background:#303039; color:#fff; font-size:26px; line-height:1; cursor:pointer; } .pati-dm-lightbox-stage{ min-width:0; min-height:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); box-sizing:border-box; } .pati-dm-lightbox-stage>img{ display:block!important; width:auto!important; height:auto!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; box-shadow:none!important; } #main-content .pati-dm-layout .pati-dm-image-open, #main-content .pati-dm-layout .pati-dm-image-open>.pati-dm-image{ background:transparent!important; box-shadow:none!important; } /* The reference shows three full-bleed portrait thumbnails per row. Cropping applies to thumbnails only, never to the opened photo. */ #main-content .pati-ig-profile .pati-ig-grid{ display:grid!important; width:100%!important; max-width:100%!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:2px!important; padding:0!important; margin:0!important; background:#fff!important; } #main-content .pati-ig-profile .pati-profile-tile{ position:relative!important; display:block!important; width:100%!important; height:auto!important; min-width:0!important; min-height:0!important; aspect-ratio:3 / 4!important; padding:0!important; margin:0!important; border:0!important; border-radius:0!important; overflow:hidden!important; background:#e9eaec!important; box-shadow:none!important; cursor:pointer; } #main-content .pati-ig-profile .pati-profile-tile>img, #main-content .pati-ig-profile .pati-profile-tile>video{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; min-height:100%!important; max-height:none!important; object-fit:cover!important; object-position:center!important; margin:0!important; padding:0!important; border-radius:0!important; } #main-content .pati-ig-profile .pati-profile-play, #main-content .pati-ig-profile .pati-profile-multi{ position:absolute!important; z-index:3!important; top:7px!important; right:7px!important; left:auto!important; bottom:auto!important; display:grid!important; place-items:center!important; width:29px!important; height:29px!important; margin:0!important; padding:5px!important; border:1px solid #ffffff80; border-radius:9px!important; background:#fffffff2!important; color:#1e2024!important; box-shadow:0 2px 10px #0002!important; text-shadow:none!important; } #main-content .pati-ig-profile .pati-profile-play .icon, #main-content .pati-ig-profile .pati-profile-multi .icon{ display:block!important; width:17px!important; height:17px!important; stroke-width:2; } #main-content .pati-ig-profile .pati-profile-view-count{ position:absolute!important; z-index:2!important; bottom:0!important; left:0!important; right:0!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:5px!important; width:100%!important; box-sizing:border-box!important; padding:22px 7px 7px!important; background:linear-gradient(0deg,#000b 0%,transparent 100%)!important; color:#fff!important; font-size:clamp(11px,2.5vw,15px)!important; line-height:1.1!important; font-weight:750!important; text-shadow:0 1px 3px #0008!important; pointer-events:none; } #main-content .pati-ig-profile .pati-profile-text-tile>span:not(.pati-profile-view-count){ display:block; padding:10px; font-size:12px; overflow-wrap:anywhere; } /* The post detail may scroll vertically as before, but show the actual photo proportions within the media frame instead of cropping faces. */ #main-content .pati-detail-screen .pati-feed-card .pati-carousel-slide .pati-photo img, #main-content .pati-detail-screen .pati-feed-card .pati-video-frame .pati-post-video{ object-fit:contain!important; object-position:center!important; background:#111!important; } #main-content .pati-detail-screen .pati-feed-card .pati-carousel, #main-content .pati-detail-screen .pati-feed-card .pati-video-frame{ background:#111!important; } @media(max-width:740px){ #main-content .pati-ig-profile .pati-ig-grid{gap:2px!important} #main-content .pati-ig-profile .pati-profile-play, #main-content .pati-ig-profile .pati-profile-multi{ top:6px!important;right:6px!important;width:25px!important;height:25px!important;padding:4px!important; } #main-content .pati-ig-profile .pati-profile-view-count{padding:18px 6px 6px!important} } @media(prefers-reduced-motion:reduce){ #main-content .pati-ig-profile .pati-profile-tile, #main-content .pati-dm-layout .pati-dm-row-actions>summary{transition:none!important} } /* patiyiz-social-private-groups-20261028.css */ /* Social expansion: close friends and independent group chat UI. */ #modal-root .pati-private-note{color:#666a72;font-size:12px;line-height:1.55;margin:9px 0 12px} #modal-root .pati-social-search{display:block;width:100%;min-height:42px;box-sizing:border-box;border:1px solid #d9dae0;border-radius:10px;padding:10px 12px;font-size:16px;margin-bottom:12px} #modal-root .pati-social-people{width:100%;min-width:0;max-height:min(55dvh,500px);overflow:auto;overscroll-behavior:contain} #modal-root .pati-social-person{display:flex;align-items:center;gap:10px;min-width:0;border-bottom:1px solid #ededf0;padding:10px 4px} #modal-root .pati-social-person[hidden]{display:none!important} #modal-root .pati-social-person>.avatar{flex:0 0 40px;width:40px;height:40px} #modal-root .pati-social-person>span:not(.avatar){display:flex;flex:1;flex-direction:column;min-width:0;gap:3px;overflow:hidden} #modal-root .pati-social-person strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px} #modal-root .pati-social-person small{color:#85858c;font-size:11px;overflow:hidden;text-overflow:ellipsis} #modal-root .pati-social-person button{flex:none;min-width:72px;min-height:36px;background:#f1f1f4;border:0;border-radius:9px;padding:8px;color:#25252a;font-weight:750;font-size:12px} #modal-root .pati-social-person button.active{background:#e6f4e9;color:#197444} #modal-root .pati-social-person input[type="checkbox"]{flex:0 0 20px;width:20px;height:20px;accent-color:#242424} #modal-root .pati-group-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px} #modal-root .pati-group-tools button{border:1px solid #e2e2e6;border-radius:9px;background:#f7f7f9;color:#242429;min-height:39px;padding:7px 11px;font-weight:700;font-size:12px} #modal-root .pati-group-list-item{width:100%;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px;border:0;border-bottom:1px solid #efeff0;background:transparent;color:#262626;text-align:left} #modal-root .pati-group-list-item>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#f3f3f5} #modal-root .pati-group-list-item>strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #modal-root .pati-group-list-item>small{color:#8b8c91} #modal-root .pati-group-history{display:flex;flex-direction:column;gap:9px;min-height:150px;height:min(47dvh,440px);padding:10px 4px;overflow:auto;overscroll-behavior:contain} #modal-root .pati-group-bubble{align-self:flex-start;min-width:0;max-width:82%;border-radius:13px;padding:9px 12px;background:#f1f1f4;color:#24242a} #modal-root .pati-group-bubble.mine{align-self:flex-end;background:#e6e6eb} #modal-root .pati-group-bubble strong{font-size:11px;font-weight:800} #modal-root .pati-group-bubble p{font-size:14px;overflow-wrap:anywhere;margin:4px 0} #modal-root .pati-group-bubble small{display:block;text-align:right;color:#85858d;font-size:10px} #modal-root #pati-group-message-form [name="group_body"]{width:100%;min-height:46px;padding:12px;border:1px solid #d5d5dc;border-radius:12px;box-sizing:border-box;font-size:16px} #patiyiz-system-media .pati-system-audience{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;font-size:13px;font-weight:700;color:#24242a} #patiyiz-system-media .pati-system-audience select{font-size:14px;max-width:58%;min-height:42px;border:1px solid #d4d4dc;border-radius:9px;padding:8px;background:#fff;color:#171717} #main-content .pati-dm-top-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px} #main-content .pati-dm-top-actions .pati-dm-new[data-action="pati-group-list"]{white-space:nowrap} @media(max-width:480px){ #main-content .pati-dm-top-actions .pati-dm-new[data-action="pati-group-list"]{font-size:11px;padding:7px} #modal-root .pati-group-history{height:48dvh} #patiyiz-system-media .pati-system-audience{padding:10px 0} } html[data-pati-theme="dark"] #modal-root .pati-private-note{color:#c5c5cf} html[data-pati-theme="dark"] #modal-root .pati-social-person{border-color:#42424a} html[data-pati-theme="dark"] #modal-root .pati-social-person button, html[data-pati-theme="dark"] #modal-root .pati-group-tools button{background:#36363d;color:#f4f4f7;border-color:#4a4a53} html[data-pati-theme="dark"] #modal-root .pati-group-list-item{color:#f5f5f6} html[data-pati-theme="dark"] #modal-root .pati-group-bubble{background:#35353b;color:#f2f2f4} html[data-pati-theme="dark"] #modal-root .pati-group-bubble.mine{background:#494954} /* Group inbox: compact previews, legible unread badge, unobtrusive deletion */ #modal-root .pati-group-list-item{gap:10px;text-align:left} #modal-root .pati-group-list-item .pati-group-icon{ display:grid;place-items:center;flex:none;width:40px;height:40px; border-radius:13px;background:#f1f1f4;color:#25252a; } #modal-root .pati-group-list-item .pati-group-list-details{ display:flex;min-width:0;flex:1;flex-direction:column;gap:4px; } #modal-root .pati-group-list-item .pati-group-list-details strong, #modal-root .pati-group-list-item .pati-group-list-details small{ width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #modal-root .pati-group-list-item .pati-group-list-details small{ color:#7c7f88;font-size:12px; } #modal-root .pati-group-list-meta{ display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:5px; } #modal-root .pati-group-list-meta small{color:#868890;font-size:11px} #modal-root .pati-group-unread{ display:grid;place-items:center;min-width:23px;min-height:23px;padding:0 5px; border-radius:20px;background:#191a1e;color:white;font-size:11px;box-sizing:border-box; } #modal-root .pati-group-unread-total{margin-left:auto;font-size:12px;color:#63666d} #modal-root .pati-group-message-meta{ display:flex;align-items:center;justify-content:flex-end;gap:9px; } #modal-root .pati-group-message-meta button{ font:600 11px system-ui,sans-serif;min-height:25px;padding:3px 8px; background:transparent;border:0;border-radius:7px;color:#8d4242; cursor:pointer;opacity:.75; } #modal-root .pati-group-message-meta button:hover, #modal-root .pati-group-message-meta button:focus-visible{ background:#fceced;opacity:1; } #modal-root .pati-group-history{overflow-anchor:auto} html[data-pati-theme="dark"] #modal-root .pati-group-list-item .pati-group-list-details small, html[data-pati-theme="dark"] #modal-root .pati-group-list-meta small{color:#bbbcc6} html[data-pati-theme="dark"] #modal-root .pati-group-unread-total{color:#c8c8ce} html[data-pati-theme="dark"] #modal-root .pati-group-list-item .pati-group-icon{background:#3b3b45;color:#fafafa} html[data-pati-theme="dark"] #modal-root .pati-group-message-meta button{color:#e9b2b2} /* One messaging inbox for people and groups, including narrow phones. */ #main-content .pati-group-thread-row .pati-group-inbox-avatar, #main-content .pati-group-chat-window .pati-group-avatar{ display:grid;place-items:center;flex:0 0 44px; width:44px;height:44px;border-radius:50%; background:#e9eaef;color:#292b31; } #main-content .pati-group-thread-row .pati-group-inbox-avatar .icon, #main-content .pati-group-chat-window .pati-group-avatar .icon{ width:21px;height:21px;stroke-width:2; } #main-content .pati-group-thread-row.selected{background:#f4f4f6} #main-content .pati-group-thread-row .chat-person{min-width:0;flex:1 1 0} #main-content .pati-group-thread-row .pati-dm-row-menu button{ display:flex;align-items:center;gap:9px;width:100%; padding:10px 12px;min-height:40px; background:none;color:inherit;border:none;border-radius:8px; text-align:left;font-size:13px;font-weight:650; } #main-content .pati-group-chat-window{ display:flex;flex-direction:column;min-width:0;min-height:0; } #main-content .pati-group-chat-header{ display:flex;align-items:center;gap:10px; } #main-content .pati-group-chat-header .pati-group-chat-title{ display:flex;flex:1;flex-direction:column;min-width:0;gap:3px; } #main-content .pati-group-chat-header .pati-group-chat-title strong{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-group-chat-header .pati-group-chat-title small{font-size:11px;opacity:.67} #main-content .pati-group-chat-window .chat-history{ display:flex;flex:1;flex-direction:column;gap:12px; min-height:0;overflow:auto;overscroll-behavior:contain; } #main-content .pati-group-chat-window .pati-group-bubble{ width:max-content;max-width:82%;min-width:0; display:flex;flex-direction:column;align-self:flex-start; padding:10px 13px;border-radius:15px; overflow-wrap:anywhere;background:#f1f1f4;color:#202027; } #main-content .pati-group-chat-window .pati-group-bubble.mine{ align-self:flex-end;background:#e8e8ee;color:#202027; } #main-content .pati-group-chat-window .pati-group-bubble>strong{ font-size:11px;font-weight:800;line-height:1.2; } #main-content .pati-group-chat-window .pati-group-bubble>p{ margin:5px 0;font-size:14px;line-height:1.45;white-space:pre-wrap; } #main-content .pati-group-chat-window .pati-group-chat-form{ display:flex;align-items:center;flex:0 0 auto;min-height:60px;gap:8px; } #main-content .pati-group-chat-window .pati-group-chat-form input[name="group_body"]{ flex:1;min-width:0;width:100%;min-height:42px; border-radius:22px;padding:10px 13px;font-size:16px; } #main-content .pati-group-chat-window .pati-group-chat-form .primary-btn{ flex:none;display:grid;place-items:center;min-width:42px;min-height:42px; } #main-content .pati-group-chat-window .pati-group-empty{ text-align:center;color:#898b93;margin:auto;font-size:13px; } html[data-pati-theme="dark"] #main-content .pati-group-thread-row .pati-group-inbox-avatar, html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-avatar{ background:#393943;color:#f3f3f7; } html[data-pati-theme="dark"] #main-content .pati-group-thread-row.selected{background:#303036} html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble{ background:#35353d;color:#f5f5f8; } html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble.mine{ background:#484852;color:#fff; } @media(max-width:740px){ #main-content .pati-group-chat-window .pati-group-bubble{max-width:88%} #main-content .pati-group-chat-window .pati-group-chat-form{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))} #main-content .pati-dm-top-actions .pati-dm-new[data-action="pati-group-create-open"]{white-space:nowrap;font-size:11px} } /* patiyiz-social-phase1-20261028.css */ /* Patiyiz social phase 1: accessible repost and pinned-post presentation. */ #main-content .pati-ig-profile .pati-ig-tabs{ display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ min-width:0!important;min-height:48px!important;font-size:20px!important; } #main-content .pati-ig-profile .pati-profile-pin{ position:absolute;z-index:4;left:7px;top:7px; display:grid;place-items:center;width:25px;height:25px; border-radius:7px;background:rgba(0,0,0,.75);color:#fff; font-size:16px;font-weight:750;box-shadow:0 1px 5px #0004; pointer-events:none; } #main-content .pati-actionbar .pati-repost-btn{ min-width:38px!important;min-height:40px!important; font-size:24px!important;line-height:1!important; color:inherit!important;background:transparent!important; border:0!important;cursor:pointer; } #main-content .pati-actionbar .pati-repost-btn.active{color:#168955!important} #main-content .pati-actionbar .pati-repost-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px} #main-content .pati-repost-context{ display:flex;align-items:center;gap:7px; margin:9px 0 0;padding:9px 12px; border-radius:12px 12px 0 0;background:#f2f4f2;color:#53645c; font-weight:750;font-size:12px;line-height:1.3; } html[data-pati-theme="dark"] #main-content .pati-repost-context{background:#242b27;color:#cadbd2} @media(max-width:370px){ #main-content .pati-ig-profile .pati-ig-tabs>button{font-size:17px!important} #main-content .pati-actionbar .pati-repost-btn{min-width:32px!important} } /* Message reactions: compact under the bubble, picker only on demand. */ #main-content .pati-dm-layout .pati-dm-reaction-summary{ display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:5px 0 0; } #main-content .pati-dm-layout .pati-dm-reaction-chip{ display:inline-flex;align-items:center;justify-content:center; min-height:26px;padding:3px 8px;border:1px solid #e1e3e7; border-radius:14px;background:#f8f9fb;color:#242424; font-size:12px;line-height:1.1;white-space:nowrap; } #main-content .pati-dm-layout .pati-dm-reaction-chip.is-mine{ background:#e8f5ed;border-color:#8ad1a3;color:#123b26; } #modal-root .pati-dm-reaction-picker{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px;padding:8px 0; } #modal-root .pati-dm-reaction-picker>button{ min-width:0;min-height:47px;border:0;border-radius:12px; background:#f3f4f5;color:#101115;font-size:25px;cursor:pointer; } #modal-root .pati-dm-reaction-picker>button:hover{background:#e7f2eb} #modal-root .pati-dm-reaction-picker>button:focus-visible{outline:3px solid #3d7959;outline-offset:2px} html[data-pati-theme="dark"] #main-content .pati-dm-reaction-chip{background:#33333a;color:#eee;border-color:#555} html[data-pati-theme="dark"] #modal-root .pati-dm-reaction-picker>button{background:#36373d;color:#fff} @media(max-width:350px){#modal-root .pati-dm-reaction-picker>button{font-size:20px;min-height:42px}} /* Shared story source is tappable above story navigation hit zones. */ #story-overlay .pati-story-shared-source{ position:absolute;z-index:25;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);width:max-content;max-width:90%; min-height:42px;padding:10px 15px; color:#fff;background:rgba(0,0,0,.77);border:1px solid #ffffff73; border-radius:22px;font-size:12px;font-weight:800;line-height:1.3; backdrop-filter:blur(8px);box-shadow:0 4px 12px #0004; cursor:pointer;touch-action:manipulation; } #story-overlay .pati-story-shared-source:focus-visible{outline:3px solid #fff;outline-offset:3px} /* patiyiz-story-community-carousel-20261028.css */ /* Patiyiz 28.10 — media carousel, safe-area story actions, Q&A and exit links. */ #patiyiz-system-media .pati-system-preview-wrap{position:relative;isolation:isolate} #patiyiz-system-media .pati-system-preview-media{ overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch } #patiyiz-system-media .pati-system-preview-media::-webkit-scrollbar{display:none} #patiyiz-system-media .pati-system-carousel-controls{ position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%); display:flex;align-items:center;justify-content:space-between;gap:8px; pointer-events:none;z-index:3 } #patiyiz-system-media .pati-system-carousel-controls[hidden]{display:none!important} #patiyiz-system-media .pati-system-carousel-controls button{ flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff70; background:#090a0bdc;color:#fff;font-size:32px;line-height:1; display:grid;place-items:center;cursor:pointer;pointer-events:auto; box-shadow:0 4px 16px #0006 } #patiyiz-system-media .pati-system-carousel-controls button:disabled{opacity:.22;cursor:default} #patiyiz-system-media #pati-system-carousel-count{ background:#08080ba6;color:#fff;border-radius:18px;font-weight:800; font-size:12px;padding:7px 11px;align-self:flex-end } #patiyiz-system-media .pati-system-carousel-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 1px} #patiyiz-system-media .pati-system-carousel-dots i{width:6px;height:6px;border-radius:50%;background:#71727a} #patiyiz-system-media .pati-system-carousel-dots i.active{width:17px;border-radius:9px;background:#fff} #patiyiz-system-media .pati-system-carousel-controls button:focus-visible{outline:3px solid #fff;outline-offset:3px} #story-overlay .story-player-head{min-width:0;gap:10px;align-items:center} #story-overlay .pati-story-owner-name{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:4px} #story-overlay .pati-story-owner-name strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;flex:none} #story-overlay .pati-story-close-friends-label{display:inline-flex;align-items:center;max-width:100%;border-radius:16px;background:#228d4c;color:#fff;padding:3px 10px;font-size:10px;font-weight:850;white-space:nowrap} #story-overlay[data-audience="close_friends"] .story-playing{background:#38d278!important} #story-overlay .story-caption{ bottom:calc(86px + env(safe-area-inset-bottom,0px))!important; left:14px;right:14px;z-index:9;max-height:min(27dvh,240px); padding:10px 15px;line-height:1.5;font-size:14px; background:linear-gradient(90deg,#070707a8,#0707078a); border-radius:12px;overflow:auto;box-sizing:border-box; } #story-overlay .story-delete{ bottom:calc(12px + env(safe-area-inset-bottom,0px))!important; right:14px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px!important;min-width:88px;border:1px solid #ffffff69!important; padding:10px 15px!important;border-radius:24px!important;background:#181819d9!important; color:#fff;font-size:13px;font-weight:800;z-index:12!important;cursor:pointer; } #story-overlay .story-delete .icon{width:17px;height:17px} #story-overlay .story-delete:focus-visible, #story-overlay .story-view-user:focus-visible{outline:3px solid #878787;outline-offset:3px} #story-overlay .story-viewers-button{ z-index:12;min-height:44px;border-radius:24px;font-size:12px;padding:9px 13px; } #story-overlay .story-viewers-sheet{z-index:20;max-height:75dvh;overscroll-behavior:contain} #story-overlay .story-view-user{ display:flex;align-items:center;gap:12px;width:100%;min-height:68px; background:transparent;border:0;border-bottom:1px solid #e9e9ed; text-align:left;color:#17191d;padding:11px 4px;font:inherit;cursor:pointer } #story-overlay .story-view-user .pati-story-view-person{min-width:0;flex:1;display:grid;gap:4px} #story-overlay .story-view-user .pati-story-view-person strong, #story-overlay .story-view-user .pati-story-view-person small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #story-overlay .story-view-user .pati-story-view-chevron{color:#888;font-size:25px} #story-overlay .story-view-user .pati-story-view-like{margin-left:auto} #main-content .pati-community-head{padding:14px 14px 6px;border-radius:20px;background:#f8f8f9;margin-bottom:12px} #main-content .pati-community-head .page-intro{padding:6px 2px 8px;gap:12px;align-items:center} #main-content .pati-community-head .page-title{font-size:clamp(21px,5vw,30px);letter-spacing:-.6px} #main-content .pati-community-subhead{color:#666a72;font-size:12px;line-height:1.55;margin:0 2px 12px} #main-content .pati-community-head button[data-action="question"], #main-content .pati-community-head .top-actions button{ background:#141414!important;color:#fff!important;border:1px solid #141414!important; border-radius:13px;padding:11px 15px;min-height:44px;white-space:nowrap;font-weight:800 } #main-content .pati-filter-tabs button.active, #main-content .pati-filter-tabs button[aria-pressed="true"]{ background:#151515!important;color:#fff!important;border-color:#151515!important; } #main-content .pati-community-card{border:1px solid #e6e6e9;border-radius:18px;padding:17px;overflow:hidden} #main-content .pati-community-card .pati-pill{background:#151515!important;color:#fff!important;border:1px solid #151515!important;border-radius:18px;padding:5px 10px;font-size:11px} #main-content .pati-community-card h3{font-size:16px;line-height:1.4;letter-spacing:-.3px} #main-content .pati-community-card p{overflow-wrap:anywhere;line-height:1.6} #main-content .pati-community-card .pati-actionbar{display:flex;flex-wrap:wrap;gap:8px} #main-content .pati-community-card .pati-actionbar button{min-height:38px;max-width:100%;border-radius:11px;padding:8px 11px;font-size:12px} #main-content .pati-community-card .pati-actionbar .pati-vote-up.active{background:#e5f6eb!important;color:#196235!important;border:1px solid #a3d6b4!important} #main-content .pati-community-card .pati-actionbar .pati-vote-down.active{background:#fff0ee!important;color:#a13b31!important;border:1px solid #ebb8b3!important} #modal-root .pati-question-fullscreen{width:min(96vw,720px);max-width:720px;min-width:0;display:flex;flex-direction:column} #modal-root .pati-question-fullscreen form{min-height:0;display:flex;flex-direction:column;flex:1} #modal-root .pati-question-fullscreen .modal-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:20px 22px} #modal-root .pati-community-form-intro{background:#f5f5f7;padding:17px;border-radius:15px;margin-bottom:17px;color:#191919} #modal-root .pati-community-form-intro strong{display:block;font-size:17px;font-weight:850;letter-spacing:-.3px} #modal-root .pati-community-form-intro p{font-size:12px;line-height:1.55;margin:8px 0 0;color:#65666d} #modal-root .pati-community-form-note{font-size:11px;color:#666a72;line-height:1.5;margin:12px 2px 4px} #modal-root .pati-question-fullscreen .modal-footer .primary-btn{background:#161616!important;color:#fff!important;border:1px solid #161616!important;border-radius:12px;font-weight:850} #modal-root .pati-question-fullscreen .close-modal{min-width:42px;min-height:42px;border-radius:50%} #main-content .pati-page-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:39px;padding:5px 12px;margin:3px 0 11px;border:1px solid #dedee2;border-radius:12px;background:#fff;color:#1d1d1d;font-size:13px;font-weight:800;cursor:pointer} #main-content .pati-page-back:first-letter{font-size:22px} @media(max-width:680px){ #modal-root .pati-question-fullscreen{ position:fixed!important;inset:0!important;z-index:30;width:100vw!important;max-width:none!important; height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important; padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box } #modal-root .pati-question-fullscreen .modal-header{flex:0 0 auto;padding:14px 18px} #modal-root .pati-question-fullscreen .modal-content{padding:18px 17px;max-height:none} #modal-root .pati-question-fullscreen .modal-footer{flex:0 0 auto;padding:13px 17px 17px} #main-content .pati-community-head{padding:12px 10px 4px;margin:0 5px 12px} #main-content .pati-community-head .page-intro{flex-wrap:wrap} #main-content .pati-community-head .top-actions{margin-left:auto} #main-content .pati-community-card{padding:14px;margin:0 5px} #story-overlay .story-caption{font-size:13px} } html[data-pati-theme="dark"] #main-content .pati-community-head{background:#1e1e23} html[data-pati-theme="dark"] #main-content .pati-community-subhead{color:#bdc0c6} html[data-pati-theme="dark"] #main-content .pati-community-card{border-color:#383838} html[data-pati-theme="dark"] #modal-root .pati-community-form-intro{background:#2d2d33;color:#f6f6f8} html[data-pati-theme="dark"] #modal-root .pati-community-form-intro p, html[data-pati-theme="dark"] #modal-root .pati-community-form-note{color:#c2c4ca} html[data-pati-theme="dark"] #main-content .pati-page-back{color:#fff;background:#242429;border-color:#4d4d53} @media(prefers-reduced-motion:reduce){#patiyiz-system-media .pati-system-preview-media{scroll-behavior:auto}} /* Prevent story caption, shared-post attribution and owner actions overlapping. */ #story-overlay.pati-story-own .story-caption{bottom:calc(130px + env(safe-area-inset-bottom,0px))!important} #story-overlay .pati-story-shared-source{position:absolute;bottom:calc(90px + env(safe-area-inset-bottom,0px));left:14px;right:14px;max-width:calc(100% - 28px);z-index:14;min-height:42px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ffffff70;border-radius:13px;background:#0b0b0bd9;color:#fff;padding:9px 12px;font-size:12px;line-height:1.45;text-align:center} #story-overlay.pati-story-has-source .story-caption{bottom:calc(154px + env(safe-area-inset-bottom,0px))!important} #story-overlay.pati-story-has-source.pati-story-own .story-caption{bottom:calc(178px + env(safe-area-inset-bottom,0px))!important} /* Full-size, finger-friendly publishing controls on compact phones. */ @media(max-width:600px){ #patiyiz-system-media[data-mode="post"] .pati-system-publish-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} #patiyiz-system-media[data-mode="post"] .pati-system-publish-actions button{min-width:0!important;min-height:49px;font-size:12px;padding:9px 5px;line-height:1.35;white-space:normal} #patiyiz-system-media[data-mode="post"] #pati-system-publish{grid-column:1/-1;min-height:52px;font-size:15px} } /* 2026-10-29 — Full-height Instagram-like activity view for one's own story. */ #story-overlay .story-viewers-button{ left:14px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important; z-index:15!important;min-height:44px;padding:10px 16px!important; background:#111b!important;border:1px solid #fff9!important; color:white!important; } #story-overlay.pati-story-viewers-open .story-playing{animation-play-state:paused!important} #story-overlay .story-viewers-sheet{ position:absolute!important;inset:0!important;left:0!important;right:0!important; bottom:0!important;top:0!important;width:100%!important;height:100%!important; min-height:0!important;max-height:none!important;z-index:50!important; box-sizing:border-box!important;display:flex!important;flex-direction:column!important; overflow:hidden!important;overscroll-behavior:contain!important; padding:0!important;background:#fff!important;color:#141414!important; border-radius:0!important;box-shadow:none!important; } #story-overlay .story-viewers-sheet[hidden]{display:none!important} #story-overlay .pati-story-activity-top{ display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:10px; min-height:calc(58px + env(safe-area-inset-top,0px)); padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px; box-sizing:border-box;background:#f3f5f7;color:#111; } #story-overlay .pati-story-activity-top strong{ min-width:0;flex:1;text-align:center;font-size:16px;font-weight:850; } #story-overlay .pati-story-activity-top button{ display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px; color:#111;border:0;border-radius:50%;background:#fff;font-size:24px; cursor:pointer; } #story-overlay .pati-story-activity-top>span{width:42px;flex:0 0 42px} #story-overlay .pati-story-activity-preview{ flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center; background:#eef1f4;min-height:190px;height:clamp(190px,29dvh,290px); padding:14px 12px 12px;box-sizing:border-box;gap:11px; } #story-overlay .pati-story-activity-cover{ width:104px;height:156px;max-height:65%;border-radius:15px; overflow:hidden;background:#161719;color:#fff;display:grid;place-items:center; box-shadow:0 7px 22px #0b0b0b27;font-size:32px; } #story-overlay .pati-story-activity-cover>img, #story-overlay .pati-story-activity-cover>video{ display:block;width:100%;height:100%;object-fit:cover; } #story-overlay .pati-story-activity-hero-meta{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:15px;color:#292b30;font-size:13px;font-weight:800; } #story-overlay .pati-story-activity-hero-meta span{display:inline-flex;align-items:center;gap:5px} #story-overlay .pati-story-activity-hero-meta .icon{height:17px;width:17px} #story-overlay .pati-story-activity-heart{color:#ed284f} #story-overlay .pati-story-activity-section{ display:flex;align-items:center;gap:10px;flex:0 0 auto; padding:21px 18px 15px;border-bottom:1px solid #f0f1f3;background:#fff; } #story-overlay .pati-story-activity-section strong{ font-size:16px;font-weight:850;line-height:1.35;flex:1;min-width:0; } #story-overlay .pati-story-activity-section>span{ color:#4d61ec;font-size:14px;font-weight:850; } #story-overlay .pati-story-activity-list{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding:0 14px max(16px,env(safe-area-inset-bottom,0px)); background:#fff; } #story-overlay .pati-story-activity-person{ display:flex;align-items:center;min-height:76px;gap:4px;border-bottom:1px solid #f4f4f5; } #story-overlay .pati-story-activity-person>.story-view-user{ flex:1 1 auto;display:flex;min-width:0;width:auto;min-height:76px; border:0!important;padding:9px 4px!important;gap:13px!important; background:transparent;color:#111;text-align:left; } #story-overlay .pati-story-activity-avatar{ position:relative;flex:0 0 50px;width:50px;height:50px; display:grid;place-items:center; } #story-overlay .pati-story-activity-avatar>.avatar{ display:grid;place-items:center;width:50px!important;height:50px!important; min-width:50px!important;overflow:hidden;border-radius:50%; } #story-overlay .pati-story-activity-avatar .avatar img{ display:block;width:100%;height:100%;object-fit:cover;border-radius:50%; } #story-overlay .pati-story-activity-avatar>.pati-story-view-like{ position:absolute;bottom:-2px;right:-2px; width:23px;height:23px;display:grid;place-items:center; border:3px solid #fff;border-radius:50%;background:#ff2852;color:#fff; font-size:13px;line-height:1;margin:0!important;box-sizing:content-box; } #story-overlay .pati-story-view-person{display:flex!important;flex:1;flex-direction:column;gap:4px;min-width:0} #story-overlay .pati-story-view-person strong{ color:#151515;font-size:14px;font-weight:800;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } #story-overlay .pati-story-view-person small{ font-size:12px;color:#868893;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } #story-overlay .pati-story-activity-message{ flex:0 0 44px;width:44px;min-width:44px;height:44px; display:grid;place-items:center;background:transparent;color:#111; border:0;border-radius:12px;cursor:pointer; } #story-overlay .pati-story-activity-message .icon{width:25px;height:25px} #story-overlay .pati-story-activity-message:focus-visible, #story-overlay .story-view-user:focus-visible{ outline:2px solid #4d61ec!important;outline-offset:1px; } #story-overlay .pati-story-activity-empty, #story-overlay .pati-story-activity-loading{ margin:0;padding:30px 20px;text-align:center;line-height:1.5; font-size:13px;color:#777a85; } @media(max-width:400px){ #story-overlay .pati-story-activity-section{padding:15px 12px;font-size:14px} #story-overlay .pati-story-activity-list{padding-left:9px;padding-right:9px} #story-overlay .pati-story-activity-preview{height:clamp(180px,26dvh,240px)} } @media(prefers-reduced-motion:reduce){ #story-overlay .pati-story-activity-person{scroll-behavior:auto} } /* patiyiz-instagram-reels-dm-story-ring-20261028.css */ /* Patiyiz — Instagram profile, Reels DM cards, live story rings (2026-10-28). */ #main-content .pati-profile-instagram-link{ display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px); padding:9px 13px;margin:0 14px 13px; background:#f4f5f7;color:#1a1b20;border:1px solid #e6e7ea; border-radius:12px;text-decoration:none;min-height:42px; font-size:12px;font-weight:750;box-sizing:border-box } #main-content .pati-profile-instagram-link .icon{width:17px;height:17px;flex:none} #main-content .pati-profile-instagram-link span{font-weight:850} #main-content .pati-profile-instagram-link b{font-size:12px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #main-content .pati-profile-instagram-link:hover{background:#e9eaee} #main-content .pati-profile-instagram-link:focus-visible{outline:3px solid #7b7b85;outline-offset:2px} /* The story button is a separate sibling of the conversation button; both are keyboard accessible. */ #main-content .pati-dm-layout .pati-dm-list-row[data-has-story="true"]{position:relative;align-items:center;min-height:71px} #main-content .pati-dm-layout .pati-dm-list-row[data-has-story="true"]>.chat-person{ min-width:0;min-height:71px;flex:1 1 0%!important; padding-left:67px!important;gap:7px!important; } #main-content .pati-dm-layout .pati-dm-story-trigger{ display:grid;place-items:center;flex:none;box-sizing:border-box; width:51px;height:51px;padding:3px;border-radius:50%; background:linear-gradient(35deg,#ffb831 0%,#ff5a3d 35%,#fa225f 72%,#cc10b4 100%); color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent; } #main-content .pati-dm-layout .pati-dm-story-trigger .avatar{ display:grid;place-items:center;flex:none;overflow:hidden; box-sizing:border-box;width:100%!important;height:100%!important;max-width:none!important; background:#fff;border:2px solid #fff;border-radius:50%;font-size:14px } #main-content .pati-dm-layout .pati-dm-story-trigger .avatar img{ width:100%;height:100%;object-fit:cover;border-radius:50% } #main-content .pati-dm-layout .pati-dm-list-row>.pati-dm-story-trigger{ position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:3; } #main-content .pati-dm-layout .chat-head-avatar.pati-dm-has-story{ display:flex;align-items:center;justify-content:center;min-width:51px;flex:none; } #main-content .pati-dm-layout .chat-head-avatar .pati-dm-story-trigger{ width:49px;height:49px } #main-content .pati-dm-layout .chat-head-avatar .pati-dm-story-trigger .avatar{ width:100%!important;height:100%!important;flex:none } #main-content .pati-dm-layout .pati-dm-story-trigger:focus-visible{ outline:3px solid #d62460;outline-offset:3px } #main-content .pati-dm-layout .pati-dm-shared-card{ width:min(100%,310px);max-width:100%;min-width:0; padding:0;display:flex;flex-direction:column;overflow:hidden; border:1px solid #e5e7eb;border-radius:17px; background:#fff;color:#191a1d;text-align:left;font:inherit;cursor:pointer; box-sizing:border-box;box-shadow:0 2px 9px #10121a09 } #main-content .pati-dm-layout .pati-dm-shared-by{ display:flex;align-items:center;gap:9px;width:100%;min-width:0; padding:10px 11px;box-sizing:border-box } #main-content .pati-dm-layout .pati-dm-shared-by .avatar{ flex:none;width:34px;height:34px } #main-content .pati-dm-layout .pati-dm-shared-by>span:last-child{ flex:1;min-width:0;display:flex;flex-direction:column;gap:3px } #main-content .pati-dm-layout .pati-dm-shared-by b, #main-content .pati-dm-layout .pati-dm-shared-by small{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis } #main-content .pati-dm-layout .pati-dm-shared-by b{font-size:12px;font-weight:800} #main-content .pati-dm-layout .pati-dm-shared-by small{font-size:11px;color:#737783} #main-content .pati-dm-layout .pati-dm-shared-cover{ display:grid;place-items:center;position:relative;overflow:hidden; width:100%;aspect-ratio:4/5;background:#16171c } #main-content .pati-dm-layout .pati-dm-shared-reel .pati-dm-shared-cover{ aspect-ratio:9/13;max-height:430px } #main-content .pati-dm-layout .pati-dm-shared-cover>img{ display:block;width:100%;height:100%;object-fit:cover } #main-content .pati-dm-layout .pati-dm-shared-placeholder{ display:grid;place-items:center;color:#fff;min-height:180px } #main-content .pati-dm-layout .pati-dm-shared-placeholder .icon{width:42px;height:42px} #main-content .pati-dm-layout .pati-dm-shared-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); display:grid;place-items:center;width:56px;height:56px;border-radius:50%; background:#08090bb0;color:#fff;border:1px solid #ffffff8a; box-shadow:0 3px 16px #0004 } #main-content .pati-dm-layout .pati-dm-shared-play::before{ content:"▶";font-size:22px;margin-left:3px } #main-content .pati-dm-layout .pati-dm-shared-play .icon{display:none} #main-content .pati-dm-layout .pati-dm-shared-caption{ display:block;width:100%;padding:12px;font-size:12px;line-height:1.45; overflow-wrap:anywhere;box-sizing:border-box;color:#373b43 } #main-content .pati-dm-layout .pati-dm-shared-removed{ padding:12px;border:1px dashed #c9cbd1;background:#f5f5f7; color:#6c6f78;border-radius:12px;font-size:12px;line-height:1.45 } #main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-shared-card){ width:min(88%,350px)!important;max-width:min(88%,350px)!important; padding:5px!important;background:transparent!important; border:0!important;box-shadow:none!important;overflow:visible; } #main-content .pati-dm-layout .bubble-chat:has(.pati-dm-shared-card)>small{ display:block;text-align:right;margin-top:5px;padding:0 5px } #main-content .pati-dm-layout .pati-dm-shared-card:focus-visible{ outline:3px solid #676b78;outline-offset:3px } html[data-pati-theme="dark"] #main-content .pati-profile-instagram-link{ background:#292930;border-color:#484850;color:#f1f1f4 } html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-shared-card{ background:#26262b;color:#fff;border-color:#42434b } html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-shared-by small, html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-shared-caption{color:#d1d2d8} @media(max-width:480px){ #main-content .pati-dm-layout .pati-dm-list-row[data-has-story="true"]>.chat-person{ padding-left:65px!important } #main-content .pati-dm-layout .pati-dm-shared-card{width:min(100%,275px)} #main-content .pati-dm-layout .pati-dm-shared-reel .pati-dm-shared-cover{max-height:390px} #main-content .pati-profile-instagram-link{margin:0 12px 12px} } @media(prefers-reduced-motion:reduce){ #main-content .pati-dm-layout .pati-dm-story-trigger{transition:none} } /* patiyiz-mobile-photo-review-qa-20261028.css */ /* Patiyiz mobile QA: photo review, group actions, question composer and pet breeds */ #patiyiz-system-media .pati-system-photo-review{ display:flex;align-items:flex-start;flex-direction:column;gap:5px;margin:13px 0 9px; } #patiyiz-system-media .pati-system-photo-review[hidden]{display:none!important} #patiyiz-system-media .pati-system-photo-review strong{font-size:13px;font-weight:850} #patiyiz-system-media .pati-system-photo-review small{font-size:11px;line-height:1.5;color:#a7a9b2} #patiyiz-system-media .pati-system-thumbnails{ display:flex;overflow-x:auto;overflow-y:visible;gap:10px;padding:7px 3px 11px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:thin;max-width:100%;min-width:0; } #patiyiz-system-media .pati-system-thumbnails[hidden], #patiyiz-system-media .pati-system-photo-actions[hidden]{display:none!important} #patiyiz-system-media .pati-system-thumb-item{ position:relative;flex:0 0 auto;width:77px;height:89px;scroll-snap-align:start; } #patiyiz-system-media .pati-system-thumb-select{ position:relative;width:76px;height:76px;border-radius:14px;overflow:hidden; padding:0;background:#25262c;border:2px solid #52545b;color:#fff;cursor:pointer; } #patiyiz-system-media .pati-system-thumb-select.active{ border:3px solid #fff;box-shadow:0 0 0 2px #838892 } #patiyiz-system-media .pati-system-thumb-select>img{ display:block;width:100%;height:100%;object-fit:cover } #patiyiz-system-media .pati-system-thumb-select>span{ position:absolute;left:5px;bottom:5px;display:grid;place-items:center; min-width:20px;height:20px;padding:0 4px;border-radius:7px;font-size:11px; font-weight:800;background:#0d0d0dbb;box-sizing:border-box } #patiyiz-system-media .pati-system-thumb-remove{ position:absolute;right:-5px;top:-8px;z-index:3;display:grid;place-items:center; width:31px;height:31px;border:1px solid #ffffff99;border-radius:50%; padding:0;background:#1f2027;color:#fff;font-size:23px;font-weight:500; line-height:1;cursor:pointer;box-shadow:0 3px 12px #0008 } #patiyiz-system-media .pati-system-photo-actions{ display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 13px } #patiyiz-system-media .pati-system-photo-actions button{ min-height:43px;flex:1 1 110px;min-width:0;border:1px solid #565961; border-radius:12px;padding:8px 10px;background:#22242a;color:#fff; font-size:12px;font-weight:800;cursor:pointer } #patiyiz-system-media .pati-system-photo-actions button:disabled{opacity:.33;cursor:default} #patiyiz-system-media .pati-system-thumb-select:focus-visible, #patiyiz-system-media .pati-system-thumb-remove:focus-visible, #patiyiz-system-media .pati-system-photo-actions button:focus-visible{outline:3px solid #fff;outline-offset:3px} #main-content .pati-group-delete-top{ display:grid;place-items:center;flex:0 0 44px;min-width:44px;height:44px; border-radius:13px;border:1px solid #ead0d1;background:#fff3f3;color:#a3313c;cursor:pointer } #main-content .pati-group-delete-top .icon{width:19px;height:19px} #modal-root .pati-group-danger-zone{ border:1px solid #f0c4c6;border-radius:17px;padding:14px;margin:12px 0 17px; background:#fff7f7;display:grid;gap:8px;color:#512d31 } #modal-root .pati-group-danger-zone strong{font-size:14px;font-weight:850} #modal-root .pati-group-danger-zone p{margin:0;font-size:12px;line-height:1.55} #modal-root .pati-group-danger-zone button{ display:flex;justify-content:center;align-items:center;gap:8px;min-height:45px; border-radius:12px;border:0;background:#b33241;color:#fff;font-size:13px;font-weight:800 } #modal-root .pati-pet-breed-picker{min-width:0;width:100%} #modal-root .pati-pet-breed-picker>label{display:block;margin-bottom:6px;font-size:13px;font-weight:700} #modal-root .pati-pet-breed-picker select{ display:block;width:100%;max-width:100%;min-height:47px; border-radius:12px;border:1px solid #d9dadd;background:#fff;color:#17191d; padding:10px 34px 10px 12px;font-size:16px;box-sizing:border-box } #modal-root .pati-pet-breed-area, #modal-root .pati-pet-free-breed{width:100%;min-width:0} #modal-root .pati-pet-breed-picker[hidden], #modal-root .pati-pet-free-breed[hidden]{display:none!important} #main-content .pati-community-mobile-ask{display:none} /* Ensure flexible children are allowed to shrink instead of causing device-width overflow. */ #main-content{min-width:0;max-width:100%;box-sizing:border-box} #main-content .pati-community-card, #main-content .pati-community-head, #main-content .pati-dm-layout, #main-content .pati-group-chat-title, #main-content .pati-group-chat-header, #main-content .pati-card{min-width:0;max-width:100%;box-sizing:border-box} #main-content .pati-community-card p, #main-content .pati-group-chat-title strong{overflow-wrap:anywhere} #modal-root .modal-content .pati-field input, #modal-root .modal-content .pati-field textarea, #modal-root .modal-content .pati-field select{max-width:100%;min-width:0;box-sizing:border-box} @media(max-width:740px){ #patiyiz-system-media .pati-system-panel{ max-height:100dvh;min-height:0;overflow-y:auto; padding-bottom:max(12px,env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain; } #patiyiz-system-media .pati-system-preview-media{max-height:min(45dvh,410px)} #patiyiz-system-media .pati-system-thumbnails{gap:9px} #main-content .pati-group-chat-header{display:flex;align-items:center;gap:6px} #main-content .pati-group-chat-header .pati-group-chat-title{flex:1;min-width:0} #main-content .pati-group-chat-header .chat-view-profile{flex:0 0 auto;padding:8px} #main-content .pati-group-delete-top{flex-basis:40px;min-width:40px;height:40px} #modal-root .pati-pet-edit-fields-row{display:grid;grid-template-columns:1fr;gap:11px} #modal-root .pati-pet-breed-area{max-width:100%} #main-content .pati-community-head{margin:0 0 11px!important} #main-content .pati-community-head .page-intro{ display:flex;flex-wrap:wrap;align-items:center;gap:10px } #main-content .pati-community-head button[data-action="question"]{ display:inline-flex!important;min-height:44px!important;background:#111!important;color:#fff!important } #main-content .pati-community-mobile-ask{ display:flex;align-items:center;justify-content:center;position:fixed; right:17px;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:58; min-height:49px;padding:12px 19px;border:1px solid #111;border-radius:999px; color:#fff;background:#111;font-size:14px;font-weight:850;cursor:pointer; box-shadow:0 6px 24px #0004; } #main-content .pati-community-mobile-ask:focus-visible{outline:3px solid #777;outline-offset:3px} #main-content:has(.pati-community-head){padding-bottom:95px!important} #modal-root .pati-question-backdrop{ position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important; max-height:100dvh!important;padding:0!important;overflow:hidden!important; display:block!important;z-index:400!important;background:#fff!important; } #modal-root .pati-question-fullscreen{ position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important; margin:0!important;width:100%!important;max-width:100%!important; min-height:0!important;height:100%!important;max-height:100%!important; border-radius:0!important;display:flex!important;flex-direction:column!important; overflow:hidden!important;box-sizing:border-box!important; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important; background:#fff!important;z-index:401!important; } #modal-root .pati-question-fullscreen .modal-header{ flex:0 0 auto!important;min-height:62px;display:flex;align-items:center; padding:11px 16px!important;border-bottom:1px solid #eeeff2 } #modal-root .pati-question-fullscreen .modal-header h2{ margin:0;min-width:0;flex:1;font-size:18px;line-height:1.3;overflow-wrap:anywhere } #modal-root .pati-question-fullscreen form{ flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important; display:flex!important;flex-direction:column!important;margin:0!important } #modal-root .pati-question-fullscreen .modal-content{ flex:1 1 auto!important;min-height:0!important;max-height:none!important; padding:18px 17px!important;overflow-y:auto!important;overflow-x:hidden!important; -webkit-overflow-scrolling:touch;overscroll-behavior:contain } #modal-root .pati-question-fullscreen .modal-footer{ flex:0 0 auto!important;display:flex!important;gap:10px!important; padding:10px 16px max(14px,env(safe-area-inset-bottom,0px))!important; position:relative!important;bottom:auto!important; background:#fff!important;border-top:1px solid #e5e6e9!important; } #modal-root .pati-question-fullscreen .modal-footer button{ display:inline-flex!important;align-items:center;justify-content:center;flex:1;min-width:0; min-height:49px!important;margin:0!important;white-space:normal; padding:10px!important;border-radius:13px!important;font-size:14px!important } #modal-root .pati-question-fullscreen input, #modal-root .pati-question-fullscreen select, #modal-root .pati-question-fullscreen textarea{width:100%;max-width:100%;font-size:16px!important} #modal-root .pati-question-fullscreen textarea{min-height:110px;resize:vertical} #modal-root .pati-community-form-intro{padding:15px} #modal-root .pati-question-fullscreen .pati-upload-status{flex:0 0 auto} } @media(max-width:370px){ #main-content .pati-community-head .page-intro{gap:6px} #main-content .pati-community-head .page-title{font-size:21px} #main-content .pati-community-card .pati-actionbar{gap:6px} #main-content .pati-community-card .pati-actionbar button{max-width:100%;font-size:11px} #patiyiz-system-media .pati-system-thumb-item{width:67px;height:82px} #patiyiz-system-media .pati-system-thumb-select{width:65px;height:65px} } @media(prefers-reduced-motion:reduce){ #main-content .pati-community-mobile-ask{transition:none} } /* patiyiz-profile-links-general-20261028.css */ /* General profile links: no provider-specific inputs or hard-coded platforms. */ #main-content .pati-profile-links{margin:2px 14px 14px;max-width:calc(100% - 28px);min-width:0;box-sizing:border-box} #main-content .pati-profile-links-title{ display:flex;align-items:center;gap:7px;margin-bottom:9px;color:inherit; font-size:12px;font-weight:850 } #main-content .pati-profile-links-title .icon{width:17px;height:17px} #main-content .pati-profile-links-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px;min-width:0} #main-content .pati-profile-link{ display:flex;align-items:center;min-width:0;gap:9px;min-height:48px;padding:9px 12px; border:1px solid #e3e4e8;border-radius:13px;background:#f6f6f8;color:#181a20; text-decoration:none;box-sizing:border-box;transition:background .14s ease } #main-content .pati-profile-link:hover{background:#ebecf0} #main-content .pati-profile-link:focus-visible{outline:3px solid #85878e;outline-offset:2px} #main-content .pati-profile-link-label{ flex:0 1 auto;min-width:0;max-width:65%;font-weight:850;font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } #main-content .pati-profile-link-domain{ flex:1 1 auto;min-width:0;color:#787b85;font-size:10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right } #main-content .pati-profile-link-arrow{flex:0 0 auto;font-size:17px;font-weight:800} #modal-root .pati-edit-links-section{display:block;min-width:0;margin:12px 0;padding:12px 0;border-top:1px solid #e5e5e9} #modal-root .pati-edit-links-section .pati-edit-section-title{margin-bottom:5px} #modal-root .pati-edit-links-section .pati-edit-hint{font-size:12px;line-height:1.55;margin:0 0 13px;color:#747782} #modal-root #pati-profile-links-editor{display:grid;gap:10px;min-width:0} #modal-root .pati-profile-link-row{ display:flex;gap:7px;align-items:center;min-width:0;max-width:100%;box-sizing:border-box; padding:11px 10px;border:1px solid #e3e4e8;border-radius:15px;background:#f6f6f8 } #modal-root .pati-profile-link-inputs{display:grid;gap:9px;min-width:0;flex:1} #modal-root .pati-profile-link-inputs label{display:grid;gap:4px;min-width:0;font-size:12px;font-weight:760;color:#30343b} #modal-root .pati-profile-link-inputs input{ display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box; min-height:43px;padding:10px 11px;background:#fff;border:1px solid #d7d9df; border-radius:10px;color:#191a20;font-size:16px;outline-offset:2px } #modal-root .pati-profile-link-remove{ display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px; align-self:center;padding:0;border:1px solid #ead2d4;border-radius:12px; background:#fff4f5;color:#a13744;cursor:pointer } #modal-root .pati-profile-link-remove .icon{width:19px;height:19px} #modal-root .pati-profile-links-editor-foot{ display:flex;justify-content:space-between;align-items:center;gap:9px; flex-wrap:wrap;margin:11px 0 2px } #modal-root #pati-profile-links-count{font-size:12px;color:#7b7d85} #modal-root [data-action="pati-profile-link-add"]{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:10px 15px;min-height:44px;border:1px solid #22242b;border-radius:12px; background:#17191d;color:#fff;font-weight:800;font-size:13px;cursor:pointer } #modal-root [data-action="pati-profile-link-add"]:disabled{opacity:.45;cursor:default} #modal-root [data-action="pati-profile-link-add"] .icon{width:17px;height:17px} #modal-root [data-action="pati-profile-link-add"]:focus-visible, #modal-root .pati-profile-link-remove:focus-visible{outline:3px solid #676b75;outline-offset:2px} @media(max-width:680px){ #main-content .pati-profile-links{margin:5px 12px 13px;max-width:calc(100% - 24px)} #main-content .pati-profile-links-list{grid-template-columns:1fr} #main-content .pati-profile-link{min-height:45px;max-width:100%} #modal-root .pati-edit-links-section{padding:10px 0} #modal-root .pati-profile-link-row{padding:9px 8px;align-items:center} #modal-root .pati-profile-link-remove{width:40px;height:40px;flex-basis:40px} #modal-root .pati-profile-link-inputs input{font-size:16px} } html[data-pati-theme="dark"] #main-content .pati-profile-link, html[data-pati-theme="dark"] #modal-root .pati-profile-link-row{ color:#f3f3f6;border-color:#41434c;background:#292a30 } html[data-pati-theme="dark"] #main-content .pati-profile-link-domain{color:#c3c4cb} html[data-pati-theme="dark"] #modal-root .pati-profile-link-inputs label{color:#efeff2} html[data-pati-theme="dark"] #modal-root .pati-edit-links-section .pati-edit-hint{color:#c5c7d0} html[data-pati-theme="dark"] #modal-root .pati-profile-link-inputs input{background:#1c1d20;color:#fff;border-color:#4a4b54} /* patiyiz-mobile-full-page-editors-20261028.css */ /* Mobile full-page editors — profile, pet, lost/adoption and care forms. Desktop dialogs and compact confirmation dialogs retain their original layout. */ @media(max-width:740px){ #modal-root .pati-full-page-form-backdrop{ position:fixed!important;inset:0!important;display:flex!important; align-items:stretch!important;justify-content:stretch!important; width:100vw!important;max-width:100vw!important; height:100dvh!important;max-height:100dvh!important; margin:0!important;padding:0!important;overflow:hidden!important; overscroll-behavior:contain;background:#fff!important;z-index:405!important; box-sizing:border-box!important; } #modal-root .pati-full-page-form-backdrop>.pati-mobile-full-page-form{ position:relative!important;inset:auto!important;display:flex!important; flex-direction:column!important;flex:1 1 auto!important;min-width:0!important; width:100%!important;max-width:100%!important;min-height:0!important; height:100%!important;max-height:100%!important; margin:0!important;box-sizing:border-box!important; border:0!important;border-radius:0!important; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important; background:#fff!important;color:#17191d!important; box-shadow:none!important;overflow:hidden!important; -webkit-overflow-scrolling:touch; } #modal-root .pati-mobile-full-page-form>.modal-header{ display:flex!important;flex:0 0 auto!important; align-items:center!important;gap:12px!important;order:0; width:100%;min-width:0;min-height:64px!important; padding:9px 16px!important;margin:0!important; box-sizing:border-box!important;border-bottom:1px solid #ececf0!important; background:#fff!important; } #modal-root .pati-mobile-full-page-form .modal-header h2{ flex:1 1 auto;min-width:0;margin:0!important; font-size:19px!important;font-weight:850!important;line-height:1.3; text-align:left!important;overflow-wrap:anywhere; } #modal-root .pati-mobile-full-page-form .close-modal{ position:static!important;order:-1;display:grid!important;place-items:center; flex:0 0 44px!important;width:44px!important;height:44px!important; min-width:44px!important;min-height:44px!important;margin:0!important; border:1px solid #e3e3e8!important;border-radius:13px!important; padding:0!important;background:#f5f5f7!important;color:#121319!important; font-size:0!important;line-height:1!important;cursor:pointer; } #modal-root .pati-mobile-full-page-form .close-modal::before{ content:"‹";font-size:32px;font-family:system-ui,sans-serif;font-weight:450; transform:translateY(-2px); } #modal-root .pati-mobile-full-page-form>form{ display:flex!important;flex:1 1 auto!important; flex-direction:column!important;min-width:0!important;min-height:0!important; width:100%!important;max-height:none!important;margin:0!important; padding:0!important;overflow:hidden!important; } #modal-root .pati-mobile-full-page-form .modal-content{ flex:1 1 auto!important;min-height:0!important;max-height:none!important; overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior:contain!important;scrollbar-width:thin!important; padding:17px 16px 28px!important;margin:0!important; box-sizing:border-box!important;-webkit-overflow-scrolling:touch; } #modal-root .pati-mobile-full-page-form .modal-content>*{ max-width:100%;min-width:0;box-sizing:border-box; } #modal-root .pati-mobile-full-page-form .modal-footer{ position:relative!important;inset:auto!important;flex:0 0 auto!important; display:flex!important;align-items:center!important;gap:10px!important; width:100%!important;max-width:100%!important;margin:0!important; padding:11px 16px max(14px,env(safe-area-inset-bottom,0px))!important; border-top:1px solid #e8e8ee!important;background:#fff!important; box-sizing:border-box!important;z-index:2!important; } #modal-root .pati-mobile-full-page-form .modal-footer :is(button,.primary-btn,.outline-btn){ display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:1 1 0!important;min-width:0!important;min-height:49px!important; max-width:none!important;margin:0!important;padding:10px 12px!important; font-size:14px!important;font-weight:800!important;line-height:1.3!important; white-space:normal!important;text-align:center!important; border-radius:13px!important; } #modal-root .pati-mobile-full-page-form .modal-footer button[type="submit"]{ background:#17191d!important;color:#fff!important;border:1px solid #17191d!important; } #modal-root .pati-mobile-full-page-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){ max-width:100%!important;min-width:0!important;box-sizing:border-box!important; font-size:16px!important; } #modal-root .pati-mobile-full-page-form :is(.pati-edit-cover,.pati-edit-sections,.pati-pet-edit-fields-row){ min-width:0;max-width:100%;box-sizing:border-box; } #modal-root .pati-mobile-full-page-form .pati-edit-cover{ width:100%!important;margin:0!important; } #modal-root .pati-mobile-full-page-form .pati-edit-photo-tools{max-width:100%} #modal-root .pati-mobile-full-page-form .pati-pet-edit-fields-row{ display:grid!important;grid-template-columns:1fr!important;gap:12px!important; } #modal-root .pati-mobile-full-page-form .pati-edit-section-title{ font-weight:850;margin:13px 0 10px; } #modal-root .pati-mobile-full-page-form .pati-upload-status{ flex:0 0 auto;min-width:0;max-height:90px;overflow-y:auto; } #modal-root .pati-mobile-full-page-form .pati-edit-links-section, #modal-root .pati-mobile-full-page-form .pati-pet-breed-area{ min-width:0!important;max-width:100%!important; } #modal-root .pati-mobile-full-page-form .pati-pet-delete{ flex:1 0 100%!important;max-width:100%!important; background:#fff3f3!important;color:#a12839!important; border:1px solid #f0c1c9!important; } #modal-root .pati-mobile-full-page-form:has(.pati-pet-delete) .modal-footer{ flex-wrap:wrap!important; } #modal-root .pati-mobile-full-page-form:has(.pati-pet-delete) .modal-footer .pati-pet-delete{ order:3!important;margin-top:0!important; } #modal-root .pati-mobile-full-page-form .close-modal:focus-visible, #modal-root .pati-mobile-full-page-form .modal-footer button:focus-visible{ outline:3px solid #737780!important;outline-offset:2px!important; } } @media(max-width:370px){ #modal-root .pati-mobile-full-page-form>.modal-header{padding-inline:11px!important;gap:8px!important} #modal-root .pati-mobile-full-page-form .modal-header h2{font-size:17px!important} #modal-root .pati-mobile-full-page-form .modal-content{padding-inline:12px!important} #modal-root .pati-mobile-full-page-form .modal-footer{padding-inline:12px!important} } html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form .modal-content, html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form, html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form>.modal-header, html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form .modal-footer{ background:#17191d!important;color:#f6f7f9!important; } html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form>.modal-header, html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form .modal-footer{ border-color:#3e414a!important; } html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form .close-modal{ background:#282a32!important;color:#fff!important;border-color:#4b4d57!important; } /* patiyiz-micro-motion-20261029.css */ /* Patiyiz micro-motion — isolated visual effects, no business logic. Keeps the existing light/dark theme and native motion preference. */ #main-content .pati-heart-burst{color:#f5254d!important;text-shadow:0 4px 20px rgba(0,0,0,.2)} #main-content .pati-reel-heart-burst, #main-content .pati-reel-heart-burst svg.icon{color:#f5254d!important;stroke:#f5254d!important;fill:#f5254d!important} #main-content [data-action="like"][aria-pressed="true"] svg.icon, #main-content [data-action="like"].active svg.icon{fill:#ef244c!important;stroke:#ef244c!important} #main-content [data-action="like"][aria-pressed="true"]{color:#ef244c} #main-content .pati-heart-burst.pop{animation:patiMotionHeart .62s cubic-bezier(.17,.8,.2,1) both} #main-content .pati-reel-heart-burst.pop{animation:patiMotionHeart .62s cubic-bezier(.17,.8,.2,1) both} @keyframes patiMotionHeart{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.25)} 32%{opacity:1;transform:translate(-50%,-50%) scale(1.18)} 60%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)} } #main-content [data-action="like"].pati-like-pop svg.icon{animation:patiMotionButtonHeart .32s ease-out} @keyframes patiMotionButtonHeart{0%{transform:scale(.78)}58%{transform:scale(1.3)}100%{transform:scale(1)}} /* A compact, nonblocking coin notice appears only after actual server-awarded credit. */ .pati-motion-coin-toast{ position:fixed;z-index:10020;top:calc(env(safe-area-inset-top,0px) + 72px); right:12px;max-width:min(320px,calc(100vw - 24px));display:flex;align-items:center;gap:11px; border-radius:18px;padding:11px 14px;background:#18191d;color:white; box-shadow:0 10px 35px #0004;border:1px solid #ffffff25;pointer-events:none; animation:patiMotionToastIn .22s ease-out both; } .pati-motion-coin-toast img{width:30px;height:30px;object-fit:contain;flex:none} .pati-motion-coin-toast strong{display:block;font-size:16px;line-height:1.3;color:#ffdd88} .pati-motion-coin-toast span{display:block;font-size:12px;line-height:1.4;color:#e6e6e8;max-width:240px} .pati-motion-flying-coin{position:fixed;z-index:10019;width:28px;height:28px;pointer-events:none;object-fit:contain;filter:drop-shadow(0 4px 7px #0003)} @keyframes patiMotionToastIn{from{opacity:0;transform:translateY(-9px) scale(.96)}to{opacity:1;transform:none}} /* Distinct paw steps are visible only while an actual loading element is shown. */ .pati-motion-paws{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;vertical-align:middle} .pati-motion-paws span{display:inline-block;opacity:.25;font-size:16px;line-height:1;animation:patiMotionPawStep 1.1s ease-in-out infinite} .pati-motion-paws span:nth-child(2){animation-delay:.17s} .pati-motion-paws span:nth-child(3){animation-delay:.34s} @keyframes patiMotionPawStep{0%,70%,100%{opacity:.22;transform:translateY(0) scale(.88)}35%{opacity:1;transform:translateY(-4px) scale(1)}} #modal-root .pati-upload-status:not([hidden]) .pati-upload-spinner{display:none!important} #modal-root .pati-upload-status:not([hidden]) .pati-motion-paws{margin-right:8px} #modal-root .pati-upload-status[hidden] .pati-motion-paws{display:none} /* Animate only a newly confirmed outbound message, not every re-render. */ #main-content .bubble-chat.mine.pati-motion-message-enter, #main-content .pati-group-bubble.mine.pati-motion-message-enter{ transform-origin:right bottom;animation:patiMotionMessage .24s cubic-bezier(.17,.78,.26,1) both } @keyframes patiMotionMessage{ from{opacity:.35;transform:translateY(12px) scale(.94)} to{opacity:1;transform:translateY(0) scale(1)} } /* A newly created pet appears without shifting neighboring cards. */ #main-content .pati-motion-pet-enter{animation:patiMotionPet .4s cubic-bezier(.18,.83,.25,1) both;transform-origin:center bottom} @keyframes patiMotionPet{ from{opacity:.35;transform:translateY(14px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} } @media(prefers-reduced-motion:reduce){ #main-content .pati-heart-burst.pop,#main-content .pati-reel-heart-burst.pop, #main-content [data-action="like"].pati-like-pop svg.icon, .pati-motion-paws span,.pati-motion-coin-toast, #main-content .bubble-chat.mine.pati-motion-message-enter, #main-content .pati-group-bubble.mine.pati-motion-message-enter, #main-content .pati-motion-pet-enter{ animation:none!important;transform:none!important } #main-content .pati-heart-burst.pop,#main-content .pati-reel-heart-burst.pop{opacity:0!important} .pati-motion-paws span{opacity:1} } /* patiyiz-desktop-responsive-story-20261029.css */ /* Patiyiz 29 October 2026 — independent responsive desktop and story activity layouts. All desktop selectors start at 741px. The phone five-tab layout is untouched. */ @media (min-width:741px){ body{background:#f7f7f8!important;overflow-x:clip} #app-root:not(.hidden){width:100%!important;max-width:none!important;min-width:0!important;margin:0 auto!important;overflow-x:clip} #app-root:not(.hidden)>.mobile-header, #app-root:not(.hidden)>.mobile-bottom, #app-root:not(.hidden)>.mobile-fab{display:none!important} /* Do not interfere with fullscreen open private or group conversations. */ #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell{ display:grid!important;grid-template-columns:clamp(192px,20vw,244px) minmax(0,1fr)!important; grid-auto-flow:row!important;align-items:start!important;justify-content:stretch!important; width:100%!important;max-width:1460px!important;min-width:0!important;height:auto!important; min-height:100dvh!important;margin:0 auto!important;padding:20px clamp(12px,2vw,30px) 55px!important; gap:clamp(14px,2vw,27px)!important;position:relative!important; inset:auto!important;overflow:visible!important;box-sizing:border-box!important;transform:none!important; } #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell>.sidebar{ display:flex!important;flex-direction:column!important;position:sticky!important;top:12px!important; grid-column:1!important;min-width:0!important;width:100%!important;max-width:none!important; height:calc(100dvh - 24px)!important;max-height:calc(100dvh - 24px)!important;min-height:0!important; margin:0!important;padding:14px 9px!important;overflow-y:auto!important; overscroll-behavior:contain!important;scrollbar-width:thin;scrollbar-color:#c8c9cf transparent; border:1px solid #e9e9ed;border-radius:19px;background:#fff!important; box-shadow:0 5px 23px #15151c09;box-sizing:border-box!important; } #app-root:not(.hidden)>.app-shell>.sidebar .brand{ display:flex!important;align-items:center!important;width:100%!important;max-width:100%!important; min-width:0!important;margin:0 0 5px!important;padding:7px 5px!important;box-sizing:border-box!important; } #app-root:not(.hidden)>.app-shell>.sidebar .brand-icon{ width:36px!important;height:36px!important;flex:0 0 36px!important;transform:none!important; } #app-root:not(.hidden)>.app-shell>.sidebar .brand-word{ font-size:clamp(21px,2vw,26px)!important;white-space:nowrap; } #app-root:not(.hidden)>.app-shell>.sidebar .brand-caption{display:none!important} #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-coins{ flex:0 0 auto!important;width:auto;max-width:100%!important;margin:5px 2px 9px!important; } #app-root:not(.hidden)>.app-shell>.sidebar .nav-caption{ margin:14px 7px 7px!important;font-size:10px!important;letter-spacing:.08em; } #app-root:not(.hidden)>.app-shell>.sidebar #desktop-nav{ display:flex!important;flex:0 0 auto!important;flex-direction:column!important; width:100%!important;min-width:0!important;gap:2px!important;padding:0 2px!important; } #app-root:not(.hidden)>.app-shell>.sidebar #desktop-nav .nav-link{ display:flex!important;align-items:center!important;flex:0 0 auto!important; width:100%!important;max-width:none!important;min-width:0!important; min-height:42px!important;padding:9px 10px!important;gap:9px!important; border-radius:11px!important;font-size:12px!important;line-height:1.3!important; white-space:normal!important;overflow-wrap:anywhere!important; } #app-root:not(.hidden)>.app-shell>.sidebar #desktop-nav .nav-link .icon{ width:20px!important;height:20px!important;min-width:20px!important; } #app-root:not(.hidden)>.app-shell>.sidebar #desktop-nav .nav-link.active{ background:#ededf0!important;color:#18191c!important; } #app-root:not(.hidden)>.app-shell>.sidebar .sidebar-bottom{ flex:0 0 auto;margin-top:auto!important;padding-top:9px!important; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-actions, #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-shortcuts{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; flex:0 0 auto!important;gap:6px!important;margin:4px 2px!important; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button, #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-shortcuts button{ min-width:0!important;min-height:39px!important;padding:8px 5px!important; display:flex;align-items:center;justify-content:center;gap:5px; background:#f5f5f7;color:#23242a;border:1px solid #e2e3e8;border-radius:11px; line-height:1.3;text-align:center;font-size:11px;font-weight:800;cursor:pointer; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button.primary{ background:#17181b!important;color:#fff!important;border-color:#17181b!important; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button .icon{ width:16px;height:16px; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button:hover, #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-shortcuts button:hover{ background:#e9e9ee;color:#111;border-color:#c4c5ce; } #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button.primary:hover{ background:#34353a!important;color:#fff!important; } #app-root:not(.hidden)>.app-shell>.sidebar :is(.pati-desktop-action-button,.pati-desktop-shortcuts button):focus-visible{ outline:2px solid #242428;outline-offset:2px; } #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell>.main{ display:block!important;grid-column:2!important;position:relative!important; width:100%!important;max-width:none!important;min-width:0!important; height:auto!important;min-height:0!important;margin:0!important;padding:5px 0 24px!important; overflow:visible!important;transform:none!important;box-sizing:border-box!important; } #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell>.right-rail{ display:none!important; } #app-root:not(.hidden) #main-content{width:100%!important;max-width:100%!important;min-width:0!important} #main-content .pati-ig-profile{width:100%!important;max-width:100%!important;min-width:0!important} #main-content .pati-ig-profile .pati-ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} #main-content .pati-dm-layout.mobile-chat-list{width:100%!important;max-width:100%!important} #main-content .pati-dm-layout.mobile-chat-list>.chat-people{ width:100%!important;max-width:100%!important;min-height:170px; max-height:calc(100dvh - 250px)!important;overflow-y:auto!important; } #main-content .pati-dm-layout.mobile-chat-list>.chat-window{display:none!important} #main-content>.pati-dm-top{display:flex;flex-wrap:wrap} #main-content>.pati-dm-top .pati-dm-top-actions{flex-wrap:wrap} } @media(min-width:1180px){ #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell{ grid-template-columns:clamp(215px,17vw,244px) minmax(0,1fr) clamp(220px,19vw,285px)!important; } #app-root:not(.hidden):not(:has(#main-content .pati-dm-layout.mobile-chat-open))>.app-shell>.right-rail{ display:flex!important;grid-column:3!important;flex-direction:column!important; width:100%!important;max-width:none!important;min-width:0!important; position:sticky!important;top:20px!important;height:auto!important;max-height:calc(100dvh - 30px)!important; overflow-y:auto!important;overscroll-behavior:contain!important; margin:0!important;padding:5px 0!important;box-sizing:border-box!important; } } /* The old mobile-parity sheet set desktop chats to 100dvh minus 220px; a selected message must instead occupy the complete available viewport. */ @media(min-width:741px){ #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell{ display:block!important;position:fixed!important;inset:0!important;z-index:160!important; width:100vw!important;max-width:none!important;height:100dvh!important;min-height:0!important; padding:0!important;margin:0!important;overflow:hidden!important;background:#fff!important; } #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell>.sidebar, #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell>.right-rail{ display:none!important; } #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell>.main{ display:flex!important;flex-direction:column!important;box-sizing:border-box!important; width:100%!important;max-width:none!important;height:100%!important;min-height:0!important; padding:0!important;margin:0!important;overflow:hidden!important; } #main-content .pati-dm-layout.mobile-chat-open{ display:flex!important;flex:1 1 auto!important;height:100%!important;min-height:0!important; max-height:none!important;margin:0!important;padding:0!important;width:100%!important; } #main-content .pati-dm-layout.mobile-chat-open>.chat-people{display:none!important} #main-content .pati-dm-layout.mobile-chat-open>.chat-window{ display:flex!important;flex-direction:column!important;flex:1 1 auto!important; width:100%!important;height:100%!important;max-height:none!important;min-height:0!important; border:0!important;border-radius:0!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-history{ flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important; } #main-content:has(.pati-dm-layout.mobile-chat-open)>.pati-dm-top, #main-content:has(.pati-dm-layout.mobile-chat-open)>.pati-dm-filters, #main-content:has(.pati-dm-layout.mobile-chat-open)>.pati-dm-searchbar{ display:none!important; } html[data-pati-theme="dark"] #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell{ background:#141519!important; } } /* Story movement screen is the sole visible page: no owner picture/name in top-left. The underlying story remains intact for the back action. */ #story-overlay.pati-story-viewers-open .story-player-head, #story-overlay.pati-story-viewers-open .story-progress, #story-overlay.pati-story-viewers-open .story-hit, #story-overlay.pati-story-viewers-open .story-caption, #story-overlay.pati-story-viewers-open .story-delete, #story-overlay.pati-story-viewers-open .story-viewers-button, #story-overlay.pati-story-viewers-open .story-big-photo, #story-overlay.pati-story-viewers-open .story-big-video{ display:none!important; } #story-overlay.pati-story-viewers-open{background:#fff!important} #story-overlay .story-viewers-sheet:not([hidden]){ position:fixed!important;inset:0!important;top:0!important;left:0!important; right:0!important;bottom:0!important;z-index:999999!important; width:100vw!important;max-width:none!important; height:100dvh!important;max-height:none!important;min-height:0!important; border-radius:0!important;overflow:hidden!important; } #story-overlay .story-viewers-sheet:not([hidden])>.pati-story-activity-top{ width:100%!important;flex:0 0 auto!important; } #story-overlay .story-viewers-sheet:not([hidden])>.pati-story-activity-list{ width:100%!important;box-sizing:border-box!important; } @media(min-width:741px){ #story-overlay .story-viewers-sheet:not([hidden])>.pati-story-activity-preview, #story-overlay .story-viewers-sheet:not([hidden])>.pati-story-activity-section, #story-overlay .story-viewers-sheet:not([hidden])>.pati-story-activity-list{ padding-left:max(18px,calc((100vw - 740px)/2))!important; padding-right:max(18px,calc((100vw - 740px)/2))!important; } } html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar{ background:#18191d!important;border-color:#33343b!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-action-button, html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar .pati-desktop-shortcuts button{ background:#26272d;color:#f7f7f8;border-color:#414249; } /* patiyiz-delight-20261029.css */ /* Patiyiz Delight: responsive monochrome mascot, streak, academy path and feedback. Tokenized light/dark contrast; no global recoloring of user media. */ html{ --pdel-bg:#fff;--pdel-surface:#f5f5f7;--pdel-ink:#17181c;--pdel-muted:#60646f; --pdel-border:#e4e5ea;--pdel-strong:#202127;--pdel-soft:#eef0f4; } html[data-pati-theme="dark"]{ --pdel-bg:#191a1f;--pdel-surface:#25262c;--pdel-ink:#f6f6f8;--pdel-muted:#bdc0ca; --pdel-border:#41424b;--pdel-strong:#f6f6f8;--pdel-soft:#303139; } #main-content .pati-delight-card{ display:flex;align-items:center;gap:15px;width:100%;min-width:0;max-width:100%; padding:12px 17px;margin:10px 0 15px;box-sizing:border-box; background:var(--pdel-bg);color:var(--pdel-ink);border:1px solid var(--pdel-border); border-radius:19px;box-shadow:0 4px 18px #00000008;overflow:hidden; } #main-content .pati-delight-art{ flex:0 0 clamp(76px,19vw,106px);width:clamp(76px,19vw,106px); height:clamp(76px,19vw,106px);display:grid;place-items:center; border:1px solid var(--pdel-border);border-radius:20px;background:var(--pdel-soft); } .pati-delight-mascot{display:block;object-fit:contain;max-width:100%;width:100%;height:auto;aspect-ratio:1} #main-content .pati-delight-details{display:flex;flex-direction:column;min-width:0;flex:1;gap:4px} #main-content .pati-delight-eyebrow{font-size:10px!important;font-weight:800;letter-spacing:.08em;color:var(--pdel-muted)} #main-content .pati-delight-details>strong{font-size:clamp(17px,3vw,22px)!important;line-height:1.25;color:var(--pdel-ink)!important} #main-content .pati-delight-details>small{font-size:12px!important;color:var(--pdel-muted)!important;line-height:1.45} #main-content .pati-delight-streak-dots{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 2px} #main-content .pati-delight-streak-dots span{ display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px; border:1px solid var(--pdel-border);border-radius:50%;background:var(--pdel-surface); color:var(--pdel-muted);font-size:11px;font-weight:800; } #main-content .pati-delight-streak-dots .is-done{ background:var(--pdel-strong);border-color:var(--pdel-strong);color:var(--pdel-bg); } #main-content .pati-delight-next{font-size:11px!important;color:var(--pdel-muted)!important;line-height:1.45} #main-content .pati-delight-academy{ display:flex;align-items:center;gap:13px;padding:10px 14px;margin:12px 0 15px; border-radius:18px;border:1px solid var(--pdel-border); background:var(--pdel-surface);color:var(--pdel-ink);min-width:0; } #main-content .pati-delight-academy .pati-delight-mascot{ width:66px!important;height:66px!important;flex:0 0 66px;border-radius:15px; background:var(--pdel-soft); } #main-content .pati-delight-academy>div{display:flex;flex-direction:column;gap:4px;min-width:0} #main-content .pati-delight-academy strong{font-size:14px!important;color:var(--pdel-ink)!important;line-height:1.35} #main-content .pati-delight-academy span{font-size:12px!important;color:var(--pdel-muted)!important;line-height:1.5} #main-content .pati-edu-path-items{ --pdel-track-x:38px;position:relative;display:flex!important;flex-direction:column!important;gap:14px!important; padding:9px 4px 12px!important;overflow:visible; } #main-content .pati-edu-path-items:before{ content:'';position:absolute;left:var(--pdel-track-x);top:24px;bottom:25px; width:3px;border-radius:12px;z-index:0; background:repeating-linear-gradient(to bottom,var(--pdel-border) 0,var(--pdel-border) 8px,transparent 8px,transparent 16px); pointer-events:none; } #main-content .pati-edu-path-items>.pati-edu-path-item{ position:relative!important;z-index:1;display:flex!important;align-items:center!important; min-height:76px!important;min-width:0!important;max-width:100%!important; padding:13px 14px 13px 12px!important;box-sizing:border-box!important; background:var(--pdel-bg)!important;border:1px solid var(--pdel-border)!important; color:var(--pdel-ink)!important;border-radius:18px!important; box-shadow:0 2px 10px #00000006;gap:12px!important;transition:transform .18s ease,box-shadow .18s ease; } #main-content .pati-edu-path-items>.pati-edu-path-item:focus-visible{outline:3px solid var(--pdel-muted)!important;outline-offset:2px} #main-content .pati-edu-path-items>.pati-edu-path-item.is-current{ border:2px solid var(--pdel-ink)!important;background:var(--pdel-surface)!important; box-shadow:0 5px 18px #00000016; } #main-content .pati-edu-path-items>.pati-edu-path-item.is-locked{ opacity:1!important;background:var(--pdel-surface)!important;border-style:dashed!important; } #main-content .pati-edu-path-items .pati-edu-path-no{ display:grid!important;place-items:center!important;position:relative!important; flex:0 0 45px!important;width:45px!important;height:45px!important; border-radius:50%!important;background:var(--pdel-surface)!important; color:var(--pdel-ink)!important;border:2px solid var(--pdel-border)!important;font-size:20px!important; } #main-content .pati-edu-path-items .is-done .pati-edu-path-no{ background:var(--pdel-ink)!important;border-color:var(--pdel-ink)!important;color:var(--pdel-bg)!important } #main-content .pati-edu-path-items .is-current .pati-edu-path-no{ background:var(--pdel-ink)!important;color:var(--pdel-bg)!important;border-color:var(--pdel-ink)!important; animation:pdelCurrentStep 1.9s ease-in-out infinite; } #main-content .pati-edu-path-items .pati-edu-path-copy{min-width:0;flex:1} #main-content .pati-edu-path-items .pati-edu-path-copy strong, #main-content .pati-edu-path-items .pati-edu-path-step{ color:var(--pdel-ink)!important; } #main-content .pati-edu-path-items .pati-edu-path-copy small, #main-content .pati-edu-path-items .pati-edu-path-status{ color:var(--pdel-muted)!important; } #main-content .pati-edu-path-items .is-locked .pati-edu-path-copy strong{color:var(--pdel-muted)!important} #main-content .pati-edu-path-items .is-current .pati-edu-path-status{font-weight:900;color:var(--pdel-ink)!important} #main-content .pati-edu-path-items>.pati-edu-path-item:not(.is-locked):hover{transform:translateY(-2px);box-shadow:0 7px 20px #00000018} @keyframes pdelCurrentStep{0%,100%{box-shadow:0 0 0 0 var(--pdel-border)}50%{box-shadow:0 0 0 8px transparent}} .pati-delight-celebration{ position:fixed;left:50%;top:calc(68px + env(safe-area-inset-top,0px)); transform:translate(-50%,-12px) scale(.96);opacity:0;z-index:100120; display:flex;align-items:center;gap:10px;box-sizing:border-box; width:min(360px,calc(100vw - 24px));padding:10px 13px; border-radius:18px;border:1px solid var(--pdel-border); box-shadow:0 10px 36px #0003;background:var(--pdel-bg);color:var(--pdel-ink); pointer-events:none;transition:opacity .22s ease,transform .22s ease; } .pati-delight-celebration.is-shown{opacity:1;transform:translate(-50%,0) scale(1)} .pati-delight-celebration img{width:56px;height:56px;flex:0 0 56px;border-radius:11px;background:var(--pdel-surface)} .pati-delight-celebration span{display:flex;flex-direction:column;gap:4px;min-width:0} .pati-delight-celebration strong{font-size:14px;color:var(--pdel-ink)} .pati-delight-celebration small{font-size:12px;color:var(--pdel-muted);line-height:1.3} .pati-delight-follow-pop{ position:fixed;z-index:100110;pointer-events:none;background:var(--pdel-ink);color:var(--pdel-bg); border-radius:99px;padding:8px 11px;font-size:12px;font-weight:850; white-space:nowrap;box-shadow:0 5px 17px #0003; animation:pdelFollow .85s cubic-bezier(.18,.7,.2,1) both; } @keyframes pdelFollow{0%{opacity:0;transform:translateY(13px) scale(.85)}25%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-9px) scale(1)}} #main-content .pati-delight-lesson-success{animation:pdelLesson .45s ease-out} @keyframes pdelLesson{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}} @media(max-width:400px){ #main-content .pati-edu-path-items{--pdel-track-x:32px} #main-content .pati-delight-card{gap:10px;padding:10px} #main-content .pati-delight-art{flex-basis:74px;width:74px;height:74px} #main-content .pati-delight-streak-dots span{width:27px;height:27px;flex-basis:27px} #main-content .pati-edu-path-items>.pati-edu-path-item{padding:9px!important;gap:8px!important} #main-content .pati-edu-path-items .pati-edu-path-no{flex-basis:38px!important;width:38px!important;height:38px!important} } @media(prefers-reduced-motion:reduce){ #main-content .pati-edu-path-items .is-current .pati-edu-path-no, #main-content .pati-delight-lesson-success,.pati-delight-follow-pop{animation:none!important;transform:none!important} .pati-delight-celebration{transition:none!important} } /* patiyiz-theme-contrast-20261029.css */ /* Patiyiz 29 Oct — accessible contrast in both display modes. User photos/videos and full-screen Reel media are deliberately not recolored. */ html[data-pati-theme="light"]{color-scheme:light} html[data-pati-theme="dark"]{color-scheme:dark} html[data-pati-theme="dark"] #main-content :is( .pati-edu-path-home,.pati-edu-path-list,.edu-v2-detail,.pati-ref-academy-home, .pati-ref-academy-list,.pati-settings-list,.pati-pets-page,.pati-own-pets, .pati-saved-posts,.pati-pet-hub,.pati-community-head,.pati-notifications-simple, .pati-question-list,.pati-knowledge-home,.pati-explore-media-screen ){ background-color:transparent!important;color:#f3f3f6!important; } html[data-pati-theme="dark"] #main-content :is( .pati-edu-path-topic-head,.pati-edu-path-progress,.pati-academy-total-progress, .pati-edu-path-complete,.pati-ref-academy-section,.pati-edu-quiz, .pati-edu-lesson-body,.pati-edu-step,.pati-settings-list section, .pati-pet-hub .p4-hub-status,.pati-mobile-menu-list,.pati-feature-group, .pati-community-card,.pati-saved-heading,.pati-own-pets-list article, .pati-notifications-simple-head,.pati-theme-card,.pati-dm-top, .pati-ig-summary,.pati-ig-highlights,.pati-ig-tabs ){ background-color:#202126!important;color:#f4f4f6!important; border-color:#44464f!important; } html[data-pati-theme="dark"] #main-content .pati-edu-path-topic-icon{ background-color:#32313a!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ref-academy-header h1,.pati-ref-academy-section h2, .pati-edu-path-topic-head h1,.pati-edu-path-progress strong, .pati-academy-total-progress strong,.edu-v2-results-head h2, .pati-edu-lesson-head h1,.pati-edu-quiz strong, .pati-saved-heading h1,.pati-settings-list h3, .pati-community-card h3,.pati-ig-profile .pati-ig-stats b ){color:#f7f7f9!important} html[data-pati-theme="dark"] #main-content :is( .pati-ref-academy-header p,.pati-edu-path-topic-head p, .pati-edu-path-topic-head>div:last-child>span, .pati-edu-path-progress small,.pati-academy-total-progress small, .edu-v2-sync,.pati-edu-notice,.pati-saved-heading p, .pati-ref-academy-section>span,.pati-edu-step p,.pati-edu-quiz p, .pati-settings-list p,.pati-community-card p,.pati-pet-hub small, .pati-ig-stats small,.pati-ig-bio,.pati-profile-handle ){color:#c3c5ce!important} html[data-pati-theme="dark"] #main-content .pati-ref-academy-topic{ background:#292a31!important;border:1px solid #494b53!important; color:#f5f5f7!important;box-shadow:none!important; } html[data-pati-theme="dark"] #main-content .pati-ref-academy-topic :is(strong,small,.pati-topic-open){ color:#f5f5f7!important; } html[data-pati-theme="dark"] #main-content .pati-ref-academy-topic small{color:#c4c6cf!important} html[data-pati-theme="dark"] #main-content .pati-edu-path-list .pati-ref-topic-toolbar button, html[data-pati-theme="dark"] #main-content :is(.pati-page-back,.pati-edu-back){ background:#292a31!important;border-color:#4a4c55!important;color:#f4f4f6!important; } html[data-pati-theme="dark"] #main-content :is( .pati-feed-card,.pati-story-card,.pati-ig-profile,.pati-card, .pati-pets-tile,.pati-community-card,.pati-dm-list-row, .pati-modal-surface,.pati-feature-group ){border-color:#3b3d45!important} html[data-pati-theme="dark"] #main-content :is( .pati-home-feed-tabs,.pati-feed-posts,.pati-post-head,.pati-ig-actions, .pati-settings-list,.pati-own-pets,.pati-pets-page ){color:#f2f2f5!important} html[data-pati-theme="dark"] #main-content .pati-home-feed-tabs button{ color:#c8c9d0!important;background:#202126!important;border-color:#3b3c45!important; } html[data-pati-theme="dark"] #main-content .pati-home-feed-tabs button.active{ color:#101114!important;background:#f1f1f4!important;border-color:#f1f1f4!important; } html[data-pati-theme="dark"] #tools-form :is( .pati-feature-group,.pati-feature-notifications,.pati-mobile-menu-item, .pati-menu-notifications-list,.pati-feature-add-pet ){ background:#222329!important;border-color:#41434a!important;color:#f3f3f6!important; } html[data-pati-theme="dark"] #tools-form :is( .pati-mobile-menu-item span,.pati-feature-group h3,.pati-menu-notifications-top h3, .pati-menu-notifications-all,.pati-feature-intro ){color:#f2f2f4!important} html[data-pati-theme="dark"] #tools-form :is( .pati-menu-notifications-empty,.pati-mobile-menu-item small ){color:#c0c2cc!important} html[data-pati-theme="dark"] #modal-root :is( .modal,.modal-content,.modal-header,.modal-footer, .pati-question-fullscreen,.pati-community-form-intro,.pati-pet-editor ){background-color:#1e1f24!important;color:#f4f4f7!important;border-color:#42434c!important} html[data-pati-theme="dark"] #modal-root :is( label,small,.pati-field p,.modal-muted,.pati-community-form-note ){color:#c8cad3!important} html[data-pati-theme="dark"] #modal-root :is( input:not([type="checkbox"]),select,textarea ){background:#292a30!important;color:#f9f9fb!important;border-color:#51535d!important} html[data-pati-theme="dark"] #main-content :is( input:not([type="checkbox"]),select,textarea ){background:#26272d!important;color:#f9f9fb!important;border-color:#50525a!important} html[data-pati-theme="dark"] #main-content :is(input,textarea)::placeholder, html[data-pati-theme="dark"] #modal-root :is(input,textarea)::placeholder{color:#b0b3c0!important} html[data-pati-theme="dark"] #app-root .sidebar .nav-link:not(.active){ color:#d3d4dd!important; } html[data-pati-theme="dark"] #app-root .sidebar .nav-link.active{ background:#303139!important;color:#fdfdff!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-person-info :is(strong,small){ color:#f3f3f6!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-person-info small{color:#bfc1ca!important} html[data-pati-theme="dark"] #story-overlay .story-viewers-sheet{ background:#17181d!important;color:#f6f6f9!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-activity-top, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-preview{ background:#222329!important;color:#f6f6f9!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-activity-section, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-list{ background:#17181d!important;border-color:#3c3e48!important;color:#f4f4f7!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-activity-person, html[data-pati-theme="dark"] #story-overlay .story-view-user{border-color:#353741!important} html[data-pati-theme="dark"] #story-overlay .pati-story-activity-top button{ background:#34353e!important;color:#fff!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-activity-section strong, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-hero-meta, html[data-pati-theme="dark"] #story-overlay .pati-story-view-person strong, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-message, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-top strong{ color:#f6f6f8!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-view-person small, html[data-pati-theme="dark"] #story-overlay .pati-story-activity-empty{ color:#bfc1cc!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-activity-avatar>.pati-story-view-like{ border-color:#17181d!important; } html[data-pati-theme="light"] #story-overlay .story-viewers-sheet{ background:#fff!important;color:#17181d!important; } html[data-pati-theme="light"] #main-content .pati-edu-path-home{ background:#fff!important;color:#17181d!important; } @media(prefers-contrast:more){ #main-content .pati-edu-path-items>.pati-edu-path-item, #main-content .pati-delight-card{border-width:2px!important} #main-content :is(.pati-delight-details>small,.pati-delight-next,.pati-edu-path-copy small){ font-weight:650!important; } } /* patiyiz-streak-popup-20261029.css */ /* Daily login: a single centered streak celebration, inspired by the supplied layout, but with original Patiyiz flame, Turkish weekday labels and responsive positioning. */ html{--pati-streak-card:#fff;--pati-streak-text:#17181e;--pati-streak-muted:#777a83;--pati-streak-border:#f0e8d4;--pati-streak-empty:#ededf1;--pati-streak-backdrop:rgba(20,17,13,.62)} html[data-pati-theme="dark"]{--pati-streak-card:#24252b;--pati-streak-text:#fafafd;--pati-streak-muted:#c7c9d3;--pati-streak-border:#414049;--pati-streak-empty:#454650;--pati-streak-backdrop:rgba(0,0,0,.82)} .pati-streak-overlay{ position:fixed;inset:0;z-index:214000;box-sizing:border-box; display:grid;place-items:center;overflow-x:hidden;overflow-y:auto; padding:max(12px,env(safe-area-inset-top,0px)) 14px max(12px,env(safe-area-inset-bottom,0px)); background:var(--pati-streak-backdrop);opacity:0;transition:opacity .24s ease; -webkit-overflow-scrolling:touch; } .pati-streak-overlay.is-visible{opacity:1} .pati-streak-overlay.is-closing{pointer-events:none} .pati-streak-dialog{ position:relative;isolation:isolate;box-sizing:border-box; display:flex;flex-direction:column;align-items:center; width:min(420px,100%);max-width:100%;max-height:calc(100dvh - 26px); overflow-y:auto;overflow-x:hidden; margin:auto;padding:23px 22px 26px; border-radius:28px;border:1px solid var(--pati-streak-border); background:var(--pati-streak-card);color:var(--pati-streak-text); box-shadow:0 24px 80px rgba(0,0,0,.24); text-align:center;transform:translateY(12px) scale(.97);transition:transform .4s cubic-bezier(.15,.8,.2,1); } .pati-streak-overlay.is-visible .pati-streak-dialog{transform:translateY(0) scale(1)} .pati-streak-close{ position:absolute;top:9px;right:9px;display:grid;place-items:center; width:40px;height:40px;padding:0;border:0;border-radius:50%; background:transparent;color:var(--pati-streak-muted); font-size:28px;line-height:1;cursor:pointer; } .pati-streak-close:hover,.pati-streak-close:focus-visible{ background:var(--pati-streak-empty);color:var(--pati-streak-text) } .pati-streak-close:focus-visible{outline:2px solid #fb981f;outline-offset:2px} .pati-streak-sparkles{display:grid;place-items:center;width:170px;height:174px;max-height:26vh;margin:4px 0 6px} .pati-streak-flame{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 3px rgba(237,108,18,.12))} .pati-streak-overlay.is-visible .pati-streak-flame{animation:pati-streak-flame-welcome 1.1s cubic-bezier(.25,.72,.28,1) both} @keyframes pati-streak-flame-welcome{ 0%{opacity:.45;transform:translateY(10px) scale(.75) rotate(-7deg)} 55%{opacity:1;transform:translateY(-3px) scale(1.08) rotate(4deg)} 100%{transform:none;opacity:1} } .pati-streak-count{ font-size:clamp(66px,17vw,88px);font-weight:1000; line-height:1.04;letter-spacing:-.08em;margin:7px 0 0; color:var(--pati-streak-text);font-variant-numeric:tabular-nums; } .pati-streak-dialog h2{ margin:5px 0 0;color:var(--pati-streak-text);font-size:clamp(24px,6vw,31px); font-weight:900;letter-spacing:-.035em;line-height:1.18; } .pati-streak-message{ color:var(--pati-streak-muted);font-size:13px;line-height:1.5; margin:10px auto 20px;max-width:270px; } .pati-streak-week{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); width:100%;max-width:340px;gap:4px;margin:0 0 17px; } .pati-streak-day{display:flex;align-items:center;flex-direction:column;gap:8px;min-width:0} .pati-streak-day-circle{ width:clamp(29px,7vw,38px);height:clamp(29px,7vw,38px); border-radius:50%;display:grid;place-items:center; box-sizing:border-box;background:var(--pati-streak-empty); color:var(--pati-streak-muted);font-size:18px;line-height:1;font-weight:900; } .pati-streak-day.is-done .pati-streak-day-circle{ background:linear-gradient(135deg,#ffba3c,#fb8521); color:#fff;box-shadow:0 3px 8px rgba(248,148,31,.2); } .pati-streak-day.is-today .pati-streak-day-circle{outline:2px solid #f9a521;outline-offset:2px} .pati-streak-day-name{font-size:11px;font-weight:700;line-height:1.3;color:var(--pati-streak-muted)} .pati-streak-day.is-done .pati-streak-day-name{color:var(--pati-streak-text)} .pati-streak-best{ color:var(--pati-streak-text);font-size:12px;font-weight:800; padding:8px 13px;border-radius:100px;background:var(--pati-streak-empty) } .pati-streak-dismiss-note{color:var(--pati-streak-muted);font-size:10px;margin:11px 0 0} @media(max-width:360px){ .pati-streak-dialog{padding:13px 11px 17px;border-radius:20px} .pati-streak-sparkles{width:125px;height:132px;margin:0} .pati-streak-message{margin-bottom:12px} .pati-streak-week{gap:2px} .pati-streak-day-name{font-size:10px} } @media(max-height:590px){ .pati-streak-dialog{padding-top:12px;padding-bottom:13px} .pati-streak-sparkles{height:100px;width:106px;margin:0} .pati-streak-count{font-size:53px} .pati-streak-message{margin:5px auto 11px} .pati-streak-week{margin-bottom:9px} } @media(prefers-reduced-motion:reduce){ .pati-streak-overlay,.pati-streak-dialog{transition:none!important;transform:none!important} .pati-streak-flame{animation:none!important} } /* patiyiz-dark-contrast-audit-20261029.css */ /* Late-load dark-mode contrast audit, Oct 29. Several older Patiyiz page sheets hardcoded light backgrounds or dark text with !important. Fix per-component surfaces instead of globally recoloring photographs, Reels, icons or hero media. WCAG-inspired high contrast tokens cover titles, labels, muted text, buttons and forms. */ html[data-pati-theme="dark"]{ --pati-audit-page:#101114;--pati-audit-card:#1d1f25;--pati-audit-raised:#262831; --pati-audit-text:#f5f6f9;--pati-audit-sub:#c1c4d0;--pati-audit-border:#474954; --pati-audit-control:#30323b;--pati-audit-link:#b5c4ff; } html[data-pati-theme="dark"] #main-content :is( .p4-hub,.p4-health,.p4-shop,.pati-ref-hub,.pati-health-home,.pati-ref-care, .pati-ref-kb-home,.pati-ref-academy-home,.pati-ref-academy-list, .pati-shop-v2,.pati-care-simple,.pati-knowledge-home,.pati-pet-hub, .pati-edu-v2,.kb-v2,.lost-v2,.adopt-v2,.care-v2,.wellness-v2, .pati-own-pets,.pati-settings-list,.pati-saved-posts ){ color:var(--pati-audit-text)!important; background-color:var(--pati-audit-page)!important; } html[data-pati-theme="dark"] #main-content :is( .p4-hub,.p4-health,.p4-shop,.pati-ref-hub,.pati-ref-care,.pati-ref-kb-home, .pati-health-home,.pati-care-simple,.pati-pet-hub,.pati-shop-v2,.kb-v2, .lost-v2,.adopt-v2,.care-v2,.wellness-v2,.pati-edu-v2 ) :is(h1,h2,h3,h4,small,p,label,span,strong){ text-shadow:none; } html[data-pati-theme="dark"] #main-content :is( .p4-hub .p4-hub-user,.p4-hub .p4-section-label,.p4-hub .p4-pet-thumb, .p4-health .p4-health-header,.p4-health .p4-health-subhead, .p4-shop .pati-shop-section-title,.pati-ref-hub .pati-ref-greeting, .pati-ref-hub .pati-ref-section-title,.pati-ref-care .pati-ref-subhead, .pati-ref-care .pati-simple-list-head,.pati-ref-kb-home .p4-kb-rec-title, .kb-v2 .kb-v2-results-head,.pati-edu-v2 .edu-v2-results-head ) :is(h1,h2,h3,strong){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content :is( .p4-hub .p4-hub-user,.p4-health .p4-health-header, .p4-health .p4-health-profile,.p4-health .p4-health-overview, .pati-ref-hub .pati-ref-greeting,.pati-ref-care .pati-ref-subhead, .pati-ref-care .care-v2-item-main,.pati-ref-kb-home .p4-kb-rec, .kb-v2 .kb-v2-card,.pati-health-home .pati-health-pet ) :is(small,p){ color:var(--pati-audit-sub)!important; } html[data-pati-theme="dark"] #main-content :is( .p4-hub .p4-hub-status,.p4-hub .p4-all-pets,.p4-hub .p4-hub-user, .p4-health .p4-health-profile,.p4-health .p4-health-overview, .p4-health .p4-health-history,.p4-health .p4-health-pets button, .pati-ref-hub .pati-ref-notice,.pati-ref-hub .pati-ref-pet-tile, .pati-health-home .pati-health-pet,.pati-health-home .pati-health-next, .pati-ref-care .pati-ref-care-task,.pati-ref-weight-chart, .pati-ref-kb-home .p4-kb-rec,.kb-v2 .kb-v2-card, .kb-v2 .kb-v2-article,.kb-v2 .kb-v2-empty,.kb-v2 .kb-action-plan, .kb-v2 .kb-v2-disclaimer,.kb-v2 .kb-v2-total, .pati-edu-v2 .edu-v2-card,.pati-edu-v2 .pati-edu-step ){ background:var(--pati-audit-card)!important; color:var(--pati-audit-text)!important; border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content :is( .p4-hub .p4-hub-status,.p4-health .p4-health-profile,.p4-health .p4-health-overview, .pati-health-home .pati-health-pet,.pati-ref-care .pati-ref-care-task, .kb-v2 .kb-v2-card,.kb-v2 .kb-action-plan,.pati-ref-hub .pati-ref-notice, .pati-ref-kb-home .p4-kb-rec ) :is(h1,h2,h3,h4,strong){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content :is( .p4-hub .p4-hub-status,.p4-health .p4-health-profile,.p4-health .p4-health-overview, .pati-health-home .pati-health-pet,.pati-ref-care .pati-ref-care-task, .kb-v2 .kb-v2-card,.kb-v2 .kb-action-plan,.pati-ref-hub .pati-ref-notice, .pati-ref-kb-home .p4-kb-rec ) :is(p,small,.kb-v2-card-excerpt,.pati-ref-weight-bar small){ color:var(--pati-audit-sub)!important; } /* The older eight-screen theme uses colorful pastel action tiles. Turn each actual tile into a dark surface so inherited white text remains readable. */ html[data-pati-theme="dark"] #main-content .p4-hub :is( .p4-hub-tile,.p4-sky,.p4-pink,.p4-peach,.p4-violet,.p4-aqua,.p4-coral,.p4-rose,.p4-amber ), html[data-pati-theme="dark"] #main-content .p4-health :is( .p4-health-action,.p4-health-gold,.p4-health-blue,.p4-health-green,.p4-health-purple ){ background:var(--pati-audit-raised)!important; color:var(--pati-audit-text)!important;border:1px solid var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content :is(.p4-hub .p4-hub-tile,.p4-health .p4-health-action) :is(strong,small){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content .p4-hub .p4-hub-tile .p4-tile-ico{ background:#3a3c47!important;color:#fff!important; } html[data-pati-theme="dark"] #main-content .p4-hub :is(.p4-hub-user,.p4-pet-thumb,.p4-section-label h2){ color:var(--pati-audit-text)!important; } /* Preserve existing dark-to-violet illustration hero, but fix the other light-gradient banners. */ html[data-pati-theme="dark"] #main-content :is( .pati-pet-hub .pati-hub-hero,.pati-ref-kb-home .pati-ref-kb-head, .kb-v2:not(.kb-v2-detail) .kb-v2-title,.pati-edu-v2:not(.edu-v2-detail) .edu-v2-hero, .lost-v2 .lost-v2-heading,.adopt-v2 .adopt-v2-heading, .pati-health-home .pati-health-pet,.pati-ref-academy-intro, .pati-shop-v2 .pati-shop-hero,.p4-shop .pati-shop-hero ){ background:linear-gradient(125deg,#323340,#23252e)!important; color:var(--pati-audit-text)!important;border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-pet-hub .pati-hub-hero,.pati-ref-kb-home .pati-ref-kb-head, .kb-v2:not(.kb-v2-detail) .kb-v2-title,.pati-edu-v2:not(.edu-v2-detail) .edu-v2-hero, .lost-v2 .lost-v2-heading,.adopt-v2 .adopt-v2-heading, .pati-shop-v2 .pati-shop-hero,.p4-shop .pati-shop-hero ) :is(h1,h2,h3,strong,small,span,p){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content .pati-shop-v2 :is( .pati-shop-card,.pati-shop-wallet,.pati-shop-note,.pati-shop-no-orders, .pati-shop-card.pati-shop-tree ),html[data-pati-theme="dark"] #main-content .p4-shop :is( .pati-shop-card,.pati-shop-wallet,.pati-shop-note,.pati-shop-no-orders ){ background:var(--pati-audit-card)!important;color:var(--pati-audit-text)!important; border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content .pati-shop-v2 :is( .pati-shop-card,.pati-shop-wallet,.pati-shop-section-title,.pati-shop-hero ) :is(h1,h2,h3,strong,p,small,.pati-shop-eyebrow,.pati-shop-type,.pati-shop-card-bottom span){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-card p, html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-wallet small{ color:var(--pati-audit-sub)!important; } html[data-pati-theme="dark"] #main-content .pati-shop-v2 .pati-shop-type{ background:var(--pati-audit-raised)!important; } html[data-pati-theme="dark"] #main-content :is( .lost-v2 .lost-v2-card,.adopt-v2 .adopt-v2-card, .pati-ref-hub .pati-ref-pet-tile,.pati-shop-v2 .pati-shop-card, .care-v2 .care-v2-item,.wellness-v2 .wellness-v2-item, .pati-health-home .pati-ref-weight-chart ){ background:var(--pati-audit-card)!important; border-color:var(--pati-audit-border)!important;color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content :is( .lost-v2 .lost-v2-card,.adopt-v2 .adopt-v2-card, .care-v2 .care-v2-item,.wellness-v2 .wellness-v2-item ) :is(h2,h3,h4,strong,p,small){ color:var(--pati-audit-text)!important; } /* Knowledge Center: avoid dark-on-dark headings and pale inputs in dark mode. */ html[data-pati-theme="dark"] #main-content .kb-v2 :is( .kb-v2-title h1,.kb-v2-results-head h2,.kb-v2-card-open, .kb-v2-card-open strong,.kb-v2-article-body h2,.kb-v2-empty h3, .kb-v2-disclaimer strong,.kb-v2-source a,.kb-v2-read ){color:var(--pati-audit-text)!important} html[data-pati-theme="dark"] #main-content .kb-v2 :is( .kb-v2-subtitle,.kb-v2-card-excerpt,.kb-v2-card-type,.kb-v2-article-body p, .kb-v2-article-body li,.kb-v2-list-note,.kb-v2-source,.kb-v2-read small ){color:var(--pati-audit-sub)!important} html[data-pati-theme="dark"] #main-content .kb-v2 :is( .kb-v2-shortcuts button,.kb-v2-chips button,.kb-v2-save,.kb-v2-search,.kb-v2-search button ){ background:var(--pati-audit-control)!important;color:var(--pati-audit-text)!important; border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content .kb-v2 .kb-v2-search input{ background:transparent!important;color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content .kb-v2 :is( .kb-v2-chips button.is-active,.kb-v2-save.is-saved ){ background:#e9eaf0!important;color:#18191e!important;border-color:#e9eaf0!important; } /* Generic text components in menus, settings, profile editors, notifications, messaging. */ html[data-pati-theme="dark"] #tools-form :is( .pati-alert-entry,.pati-alert-title,.pati-alert-meta, .pati-menu-notifications-top,.pati-feature-intro,.pati-feature-group, .pati-mobile-menu-item,.pati-mobile-menu-list,.pati-menu-notifications-list ){color:var(--pati-audit-text)!important} html[data-pati-theme="dark"] #tools-form :is(.pati-alert-meta,.pati-menu-notifications-empty,.pati-mobile-menu-item small){ color:var(--pati-audit-sub)!important; } html[data-pati-theme="dark"] #tools-form :is(.pati-feature-notifications,.pati-menu-notifications-list){ background:var(--pati-audit-card)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-own-pets-list article,.pati-settings-list section,.pati-ig-summary, .pati-ig-highlights,.pati-ig-tabs,.pati-mobile-menu-list,.pati-feature-group, .pati-question-list,.pati-community-card,.pati-notifications-simple ){ background-color:var(--pati-audit-card)!important;border-color:var(--pati-audit-border)!important; color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-summary,.pati-settings-list,.pati-feature-group,.pati-community-card, .pati-own-pets-list article,.pati-notifications-simple ) :is(p,small,label,.muted,.meta){ color:var(--pati-audit-sub)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-summary,.pati-settings-list,.pati-feature-group,.pati-community-card, .pati-own-pets-list article,.pati-notifications-simple ) :is(h1,h2,h3,strong){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-theme-options button,.pati-dm-filters button,.pati-dm-top-actions button, .pati-profile-edit button,.pati-list-filter button ){ background:var(--pati-audit-control)!important; color:var(--pati-audit-text)!important;border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #main-content .pati-theme-options button.active{ background:#e9eaf0!important;color:#15151a!important;border-color:#e9eaf0!important; } html[data-pati-theme="dark"] :is(#main-content,#tools-form,#modal-root,#auth-root) :is( input:not([type="checkbox"]):not([type="radio"]),textarea,select ){ color-scheme:dark!important;background-color:#292b32!important; color:#f7f7fa!important;border-color:#545763!important; } html[data-pati-theme="dark"] :is(#main-content,#tools-form,#modal-root,#auth-root) :is(input,textarea)::placeholder{ color:#b5b8c5!important;opacity:1; } html[data-pati-theme="dark"] :is(#main-content,#tools-form,#modal-root,#auth-root) :is( input:not([type="checkbox"]):not([type="radio"]),select,textarea,button,a ):focus-visible{ outline:2px solid #ccd6ff!important;outline-offset:2px; } html[data-pati-theme="dark"] #modal-root :is( .pati-pet-edit-modal,.pati-edit-avatar,.pati-pet-photo-select, .pati-community-form-intro,.pati-question-fullscreen, .pati-feature-editor,.pati-links-editor ){ background:var(--pati-audit-card)!important; color:var(--pati-audit-text)!important; border-color:var(--pati-audit-border)!important; } html[data-pati-theme="dark"] #modal-root :is( .pati-pet-edit-modal,.pati-community-form-intro,.pati-question-fullscreen ) :is(label,span,small,p,strong,h1,h2,h3){ color:var(--pati-audit-text)!important; } html[data-pati-theme="dark"] #modal-root :is( .pati-pet-edit-modal,.pati-community-form-intro,.pati-question-fullscreen ) :is(small,.help,.muted){ color:var(--pati-audit-sub)!important; } /* Deliberate exceptions: media overlays stay bright against their existing black backdrop. */ html[data-pati-theme="dark"] #main-content :is( .pati-reel-item,.pati-reel-author,.pati-reel-tool,.pati-post-video-overlay ) :is(button,span,strong,small){ text-shadow:0 1px 4px #000b; } @media(prefers-contrast:more){ html[data-pati-theme="dark"] #main-content :is( .pati-shop-card,.kb-v2-card,.p4-hub-tile,.p4-health-action,.pati-ref-care-task ){border-width:2px!important} } /* patiyiz-story-view-time-20261029.css */ /* Hikâye hareketleri: latest view time remains readable under every viewer. Works in the same full-screen panel on iPhone, Android and desktop. */ #story-overlay .pati-story-activity-person>.story-view-user{ min-height:80px!important; } #story-overlay .pati-story-view-person{ display:flex!important;flex-direction:column!important; align-items:flex-start!important;gap:3px!important; } #story-overlay .pati-story-view-person>.pati-story-view-last{ display:block!important;max-width:100%!important; font-size:11px!important;line-height:1.45!important; font-weight:700!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important; letter-spacing:.005em; color:#59616c!important; } #story-overlay .pati-story-view-person>.pati-story-view-last time{ color:inherit!important;font:inherit!important;white-space:inherit!important; } html[data-pati-theme="dark"] #story-overlay .pati-story-view-person>.pati-story-view-last{ color:#c3c7d3!important; } @media(max-width:370px){ #story-overlay .pati-story-activity-person>.story-view-user{gap:9px!important;} #story-overlay .pati-story-view-person>.pati-story-view-last{font-size:10.5px!important} } /* patiyiz-theme-unified-20261029.css */ /* Patiyiz — final theme surface layer / 2026-10-29. Intent: one consistent set of surfaces across CSS from all previous screens. Dark-mode overrides are intentionally scoped: NEVER alter user photos/videos, full-screen Reels, camera preview, image masks or the story viewer video. Keep light mode's existing colors unchanged. */ html[data-pati-theme="dark"]{ --patix-page:#101114; --patix-panel:#1c1d22; --patix-panel-raised:#25262d; --patix-field:#2a2b32; --patix-line:#383a44; --patix-strong:#f5f5f8; --patix-muted:#bec0cc; --patix-faint:#a9adba; --patix-selection:#eeeef2; --patix-selection-ink:#17181d; } /* Fixed navigation — the missing Explore symbol in the supplied screenshot was caused by a late .mobile-nav-btn.active {color:#15161a!important} rule. */ html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom{ background:#1c1d23!important; background-color:#1c1d23!important; border-color:#373942!important; box-shadow:0 -6px 22px #0005!important; color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn{ color:#b9bbca!important;background:transparent!important;border-color:transparent!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active, html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn[aria-current="page"]{ color:#ffffff!important;background:#373943!important;border-radius:13px!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph{ color:inherit!important;opacity:1!important;filter:none!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph svg, html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph .icon{ color:inherit!important;stroke:currentColor!important;opacity:1!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn>small{ color:inherit!important;opacity:1!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn:focus-visible{ outline:2px solid #d5ddff!important;outline-offset:-2px!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active::before{ background:#fff!important;opacity:1!important; } /* Explore / content search — exact classes rendered by explorePage(). */ html[data-pati-theme="dark"] #main-content .pati-explore-media-screen, html[data-pati-theme="dark"] #main-content .pati-search-screen{ background:var(--patix-page)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.pati-explore-search-launch, html[data-pati-theme="dark"] #main-content .pati-search-top, html[data-pati-theme="dark"] #main-content .pati-search-field{ background:var(--patix-field)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.pati-explore-search-launch{ border:1px solid #4a4c57!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.pati-explore-search-launch>span{ color:#d3d5e0!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.pati-explore-search-launch .icon, html[data-pati-theme="dark"] #main-content .pati-search-field>.icon{ stroke:#e4e6ee!important;color:#e4e6ee!important; } html[data-pati-theme="dark"] #main-content .pati-search-field input{ background:transparent!important;color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-search-field input::placeholder{ color:#c3c6d0!important;opacity:1!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen .pati-explore-sort, html[data-pati-theme="dark"] #main-content .pati-explore-sort{ background:var(--patix-panel)!important; border:1px solid var(--patix-line)!important; border-radius:16px!important; color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-sort button{ background:var(--patix-field)!important; color:#d6d8e2!important; border:1px solid #484a56!important; } html[data-pati-theme="dark"] #main-content .pati-explore-sort button.active, html[data-pati-theme="dark"] #main-content .pati-explore-sort button[aria-pressed="true"]{ background:var(--patix-selection)!important; color:var(--patix-selection-ink)!important; border-color:var(--patix-selection)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-sort button:focus-visible{ outline:2px solid #d9e0ff!important;outline-offset:2px; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen .pati-explore-gallery{ background:var(--patix-page)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen .pati-explore-media{ background:#282a33!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen .pati-explore-video-icon{ color:#fff!important;background:#0009!important; } html[data-pati-theme="dark"] #main-content .pati-search-results{ background:var(--patix-page)!important;color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-search-user{ background:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content .pati-search-user:active, html[data-pati-theme="dark"] #main-content .pati-search-user:focus-visible{ background:var(--patix-panel-raised)!important; } html[data-pati-theme="dark"] #main-content .pati-search-user-info strong{ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-search-user-info small{ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content .pati-search-cancel{ background:transparent!important;color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-search-discover{ background:var(--patix-panel-raised)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content .pati-search-discover .icon{ stroke:var(--patix-strong)!important;color:var(--patix-strong)!important; } /* Empty views — common reusable helper empty() + legacy empty-state helper. Every part must invert together; it is not enough to recolor . */ html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.empty, html[data-pati-theme="dark"] #main-content :is(.empty,.empty-state,.pati-search-empty,.pati-ig-empty,.pati-following-empty), html[data-pati-theme="dark"] #main-content .pati-explore-load-more{ background:var(--patix-panel)!important; color:var(--patix-muted)!important; border:1px dashed #484a56!important; } html[data-pati-theme="dark"] #main-content :is(.empty,.empty-state,.pati-search-empty,.pati-ig-empty,.pati-following-empty) :is(strong,h1,h2,h3){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content :is(.empty,.empty-state,.pati-search-empty,.pati-ig-empty,.pati-following-empty) :is(p,small,span){ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content :is(.empty,.empty-state,.pati-search-empty,.pati-ig-empty) .icon{ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-load-more :is(button,.soft-btn){ background:var(--patix-panel-raised)!important; color:var(--patix-strong)!important;border-color:var(--patix-line)!important; } /* Social feed + profile. Avoid changing media overlays and user content brightness. */ html[data-pati-theme="dark"] #main-content :is( .pati-feed-card,.pati-feed-posts .post,.post,.card,.composer, .pati-ig-profile,.pati-ig-summary,.pati-ig-tabs, .pati-community-card,.pati-repost-context,.pati-post-details, .pati-profile-text-feed,.pati-collab-requests, .pati-following-empty,.pati-ig-highlights ){ background-color:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content :is(.pati-feed-card,.post,.card,.composer,.pati-ig-summary,.pati-community-card) :is( .post-author,.post-content,.pati-post-caption,.pati-post-head,.pati-ig-bio,.pati-ig-handle-row,.pati-ig-info,.pati-profile-text-tile ){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content :is(.pati-feed-card,.post,.card,.composer,.pati-ig-summary,.pati-community-card) :is( .muted,.meta,.post-comments,.post-author>span,.post-content .tags,small ){ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-ig-summary,.pati-ig-highlights,.pati-ig-tabs ) :is(strong,.pati-ig-name,.pati-ig-handle,.pati-ig-stats b){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-ig-summary,.pati-ig-highlights,.pati-ig-tabs ) :is(p,small,.pati-ig-bio){ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content .pati-ig-tabs button:not(.active){ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #main-content .pati-ig-tabs button.active, html[data-pati-theme="dark"] #main-content .pati-ig-tabs button[aria-selected="true"]{ color:var(--patix-strong)!important;border-color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-profile-text-tile{ background:var(--patix-panel-raised)!important; color:var(--patix-strong)!important; } /* Cards from other major sections contain both hard-coded #fff and dark text. Keep accents on illustrations but normalize the actual reading surfaces. */ html[data-pati-theme="dark"] #main-content :is( .pati-settings-list section,.pati-feature-group,.pati-pet-hub .pati-hub-card, .pati-health-profile,.pati-care-simple .care-v2-item, .pati-shop-v2 .pati-shop-card,.p4-shop .pati-shop-card, .pati-edu-path-item,.pati-ref-academy-section, .pati-ref-kb-home .p4-kb-rec,.kb-v2 .kb-v2-card, .pati-own-pets-list article,.pati-notifications-simple, .lost-v2 .lost-v2-card,.adopt-v2 .adopt-v2-card, .pati-dm-layout .chat-people,.pati-dm-layout .chat-window ){ background-color:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-edu-path-item,.pati-settings-list section,.pati-pet-hub .pati-hub-card, .pati-care-simple .care-v2-item,.pati-shop-v2 .pati-shop-card, .p4-shop .pati-shop-card,.pati-own-pets-list article,.pati-dm-layout ) :is(h1,h2,h3,h4,strong,.pati-edu-path-step){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-edu-path-item,.pati-settings-list section,.pati-pet-hub .pati-hub-card, .pati-care-simple .care-v2-item,.pati-shop-v2 .pati-shop-card, .p4-shop .pati-shop-card,.pati-own-pets-list article,.pati-dm-layout ) :is(p,small,.muted,.meta,.pati-edu-path-status){ color:var(--patix-muted)!important; } /* Floating Menus, notification lists and editable forms. */ html[data-pati-theme="dark"] #tools-form :is( .pati-feature-group,.pati-feature-notifications,.pati-menu-notifications-list, .pati-mobile-menu-list,.pati-mobile-menu-item,.pati-menu-notifications-top, .pati-alert-entry,.pati-alert-simple ){ background:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #tools-form :is( .pati-menu-notifications-empty,.pati-alert-meta,.pati-mobile-menu-item small, .pati-feature-intro,.pati-alert-simple.is-read .pati-alert-title ){ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] :is(#main-content,#tools-form,#modal-root) :is( input:not([type="checkbox"]):not([type="radio"]),select,textarea ){ background:var(--patix-field)!important; color:var(--patix-strong)!important; border-color:#51535e!important; } html[data-pati-theme="dark"] :is(#main-content,#tools-form,#modal-root) :is(input,textarea)::placeholder{ color:var(--patix-muted)!important;opacity:1!important; } html[data-pati-theme="dark"] #modal-root :is( .modal,.modal-content,.modal-header,.modal-footer, .pati-pet-edit-modal,.pati-community-form-intro,.pati-question-fullscreen ){ background-color:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #modal-root :is( .pati-pet-edit-modal,.pati-question-fullscreen,.pati-community-form-intro ) :is(h1,h2,h3,strong,label){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #modal-root :is( .pati-pet-edit-modal,.pati-question-fullscreen,.pati-community-form-intro ) :is(p,small,.muted,.help){ color:var(--patix-muted)!important; } /* Account settings, labels, and side navigation, desktop and mobile. */ html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-header, html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar, html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.right-rail{ background:var(--patix-panel)!important; color:var(--patix-strong)!important; border-color:var(--patix-line)!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar .nav-link{ color:var(--patix-muted)!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar .nav-link.active, html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.sidebar .nav-link[aria-current="page"]{ color:var(--patix-strong)!important; background:var(--patix-panel-raised)!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-header :is( .brand-word,.pati-header-menu,.pati-header-actions ){ color:var(--patix-strong)!important; } html[data-pati-theme="dark"] #main-content .pati-theme-options button.active{ background:var(--patix-selection)!important; color:var(--patix-selection-ink)!important; border-color:var(--patix-selection)!important; } /* Utility accessible focus states */ html[data-pati-theme="dark"] #main-content :is( .pati-search-user,.pati-search-discover,.pati-explore-media,.pati-explore-sort button, .pati-explore-search-launch,.pati-ig-tabs button ):focus-visible{ outline:2px solid #c6d2ff!important;outline-offset:2px!important; } @media(prefers-contrast:more){ html[data-pati-theme="dark"] #main-content :is(.empty,.empty-state,.pati-search-user,.pati-explore-sort button){ border-width:2px!important; } } /* 2026-10-29 full-page theme integrity pass. Shared tokens, predictable surfaces and readable typography for each content family. Light/dark are always paired. Do not recolor photographs, video, emoji, cover art, reaction colors or reward assets. */ html[data-pati-theme="light"]{ --pui-page:#f8f9fb;--pui-paper:#fff;--pui-raised:#f1f2f5; --pui-input:#f2f3f6;--pui-text:#1c1e23;--pui-secondary:#545864; --pui-border:#e1e3e8;--pui-active:#202126;--pui-active-text:#fff; --pui-focus:#424dd4;--pui-shadow:0 5px 18px #00000008; color-scheme:light; } html[data-pati-theme="dark"]{ --pui-page:#101114;--pui-paper:#1c1e24;--pui-raised:#272930; --pui-input:#292c35;--pui-text:#f6f7fa;--pui-secondary:#c4c7d2; --pui-border:#42454f;--pui-active:#f2f3f6;--pui-active-text:#191a20; --pui-focus:#bcc9ff;--pui-shadow:0 6px 22px #00000035; color-scheme:dark; } html[data-pati-theme="light"] body, html[data-pati-theme="light"] #app-root:not(.hidden), html[data-pati-theme="light"] #app-root:not(.hidden)>.app-shell, html[data-pati-theme="light"] #app-root:not(.hidden)>.app-shell>.main{ background:var(--pui-page)!important;color:var(--pui-text)!important; } html[data-pati-theme="dark"] body, html[data-pati-theme="dark"] #app-root:not(.hidden), html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell, html[data-pati-theme="dark"] #app-root:not(.hidden)>.app-shell>.main{ background:var(--pui-page)!important;color:var(--pui-text)!important; } /* Screen canvases — all routes that paint their own page background. */ html[data-pati-theme="dark"] #main-content :is( .pati-explore-media-screen,.pati-search-screen,.pati-edu-path-home, .pati-edu-path-list,.pati-ref-academy-home,.pati-ref-academy-list, .pati-ig-profile,.pati-pets-page,.pati-own-pets,.pati-pet-hub,.pati-care-simple, .pati-health-home,.p4-hub,.p4-health,.p4-shop,.pati-shop-v2, .pati-ref-hub,.pati-ref-care,.pati-ref-kb-home,.kb-v2,.pati-edu-v2, .care-v2,.wellness-v2,.lost-v2,.adopt-v2, .pati-settings-list,.pati-saved-posts,.pati-community-head, .pati-question-list,.pati-notifications-simple,.pati-feature-group, .pati-dm-top,.pati-dm-searchbar,.pati-dm-filters,.pati-dm-layout ){ background-color:var(--pui-page)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } /* Cards, previews, statistics, menus, progress and list surfaces. */ html[data-pati-theme="dark"] #main-content :is( .pati-feed-card,.pati-feed-card-header,.post,.card,.composer,.stories-section, .pati-ig-summary,.pati-ig-highlights,.pati-ig-tabs,.pati-ig-actions, .pati-ig-grid,.pati-ig-bio,.pati-ig-stats,.pati-profile-text-feed, .pati-post-details,.pati-post-comments,.pati-collab-requests,.pati-collab-request, .pati-explore-sort,.pati-explore-search,.pati-search-top,.pati-search-results, .pati-search-user,.empty,.empty-state,.pati-ig-empty,.pati-search-empty, .pati-community-card,.pati-community-subhead,.pati-community-question-description, .pati-ref-academy-topic,.pati-ref-academy-section,.pati-academy-total-progress, .pati-edu-path-progress,.pati-edu-path-topic-head,.pati-edu-path-complete, .pati-edu-lesson-body,.pati-edu-step,.edu-v2-detail,.edu-v2-card, .pati-pets-tile,.pati-pets-own-shortcut,.pati-pets-empty, .p4-hub-status,.p4-pet-thumb,.p4-hub-tile,.p4-all-pets, .p4-health-profile,.p4-health-overview,.p4-health-history,.p4-health-action, .pati-ref-care-task,.pati-ref-care-summary,.pati-ref-care-timeline, .care-v2-item,.wellness-v2-item,.pati-health-pet,.pati-health-next, .pati-shop-card,.pati-shop-wallet,.pati-shop-note,.pati-shop-empty, .pati-shop-no-orders,.pati-shop-filter, .p4-kb-rec,.kb-v2-card,.kb-v2-article,.kb-v2-empty,.kb-action-plan, .kb-v2-disclaimer,.lost-v2-card,.adopt-v2-card, .pati-settings-list section,.pati-notifications-simple-head,.pati-feature-group, .pati-dm-layout .chat-people,.pati-dm-layout .chat-window, .pati-dm-list-row,.pati-dm-pinned-banner,.pati-group-thread-row, .pati-group-chat-header,.pati-group-history,.pati-group-tools,.pati-group-empty, .pati-following-empty,.pati-saved-heading,.pati-story-activity-section ){ background-color:var(--pui-paper)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } /* Controls that used to remain white, grey or dark with illegible label pairs. */ html[data-pati-theme="dark"] #main-content :is( .pati-explore-search-launch,.pati-search-field,.pati-search-discover, .pati-search-cancel,.pati-explore-sort button:not(.active), .pati-ref-academy-topic,.pati-ref-kb-category,.pati-ref-kb-rec, .pati-shop-filter button:not(.active),.pati-edu-path-start, .pati-profile-edit,.pati-ig-actions button:not(.primary-btn), .pati-pets-edit,.pati-pet-add,.pati-settings-list button:not(.primary-btn), .pati-dm-filters button:not(.active),.pati-dm-top-actions button, .pati-theme-options button:not(.active),.pati-community-mobile-ask, .pati-feature-group button,.pati-notifications-simple button ){ background:var(--pui-raised)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } /* Pair foreground color with active background, never white on white. */ html[data-pati-theme="dark"] #main-content :is( .pati-explore-sort button.active,.pati-explore-sort button[aria-pressed="true"], .pati-ig-tabs button.active,.pati-ig-tabs button[aria-selected="true"], .pati-dm-filters button.active,.pati-theme-options button.active, .pati-shop-filter button.active ){ background:var(--pui-active)!important;color:var(--pui-active-text)!important; border-color:var(--pui-active)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-explore-sort button.active,.pati-explore-sort button[aria-pressed="true"], .pati-ig-tabs button.active,.pati-ig-tabs button[aria-selected="true"], .pati-dm-filters button.active,.pati-theme-options button.active, .pati-shop-filter button.active ) :is(svg,.icon,strong,small,span){ color:var(--pui-active-text)!important;stroke:currentColor!important; } html[data-pati-theme="dark"] #main-content :is( .pati-explore-sort button.active,.pati-explore-sort button[aria-pressed="true"] ){font-weight:850!important} /* Non-decorative text on all core screens. Avoid touching media overlays or photos. */ html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-pets-page,.pati-ref-academy-home,.pati-ref-academy-list, .pati-edu-path-home,.pati-edu-path-list,.pati-community-card,.pati-settings-list, .pati-pet-hub,.pati-care-simple,.p4-hub,.p4-health,.pati-shop-v2,.p4-shop, .pati-ref-kb-home,.kb-v2,.care-v2,.wellness-v2,.lost-v2,.adopt-v2, .pati-notifications-simple,.pati-explore-media-screen,.pati-search-screen, .pati-dm-layout ) :is(h1,h2,h3,h4,h5,strong,label){ color:var(--pui-text)!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-pets-page,.pati-ref-academy-home,.pati-ref-academy-list, .pati-edu-path-home,.pati-edu-path-list,.pati-community-card,.pati-settings-list, .pati-pet-hub,.pati-care-simple,.p4-hub,.p4-health,.pati-shop-v2,.p4-shop, .pati-ref-kb-home,.kb-v2,.care-v2,.wellness-v2,.lost-v2,.adopt-v2, .pati-notifications-simple,.pati-explore-media-screen,.pati-search-screen, .pati-dm-layout ) :is(p,small,.meta,.muted,.pati-edu-path-status,.pati-shop-eyebrow){ color:var(--pui-secondary)!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.empty :is(strong,p), html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.empty-state :is(strong,p){ color:var(--pui-text)!important;text-shadow:none!important; } html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.empty-state p, html[data-pati-theme="dark"] #main-content .pati-explore-media-screen>.empty p{ color:var(--pui-secondary)!important; } /* Heading and metadata contrast in chat bubbles and cards. */ html[data-pati-theme="dark"] #main-content .pati-dm-layout :is( .pati-dm-list-row,.chat-person,.chat-person-info,.pati-dm-pinned-banner, .pati-group-chat-header ) :is(h2,h3,strong,b){color:var(--pui-text)!important} html[data-pati-theme="dark"] #main-content .pati-dm-layout :is( .pati-dm-list-row,.chat-person,.chat-person-info,.pati-dm-pinned-banner, .pati-group-chat-header ) :is(small,p,.meta){color:var(--pui-secondary)!important} html[data-pati-theme="dark"] #main-content .pati-dm-layout .bubble-chat{ background:#2b2f39!important;color:var(--pui-text)!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .bubble-chat.mine{ background:#484f60!important;color:#fff!important; } /* Modal and editor consistency: labels, help text, action buttons, search suggestions. */ html[data-pati-theme="dark"] :is(#modal-root,#tools-form) :is( .modal,.modal-content,.modal-header,.modal-footer,.pati-field, .pati-feature-group,.pati-mobile-menu-item,.pati-menu-notifications-list ){ background-color:var(--pui-paper)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } html[data-pati-theme="dark"] :is(#modal-root,#tools-form) :is( .modal,.modal-content,.modal-header,.pati-field,.pati-feature-group ) :is(h1,h2,h3,h4,strong,label){color:var(--pui-text)!important} html[data-pati-theme="dark"] :is(#modal-root,#tools-form) :is( .modal,.modal-content,.modal-header,.pati-field,.pati-feature-group ) :is(p,small,.help,.muted){color:var(--pui-secondary)!important} html[data-pati-theme="dark"] :is(#main-content,#modal-root,#tools-form) :is( input:not([type="radio"]):not([type="checkbox"]),select,textarea ){ background:var(--pui-input)!important;color:var(--pui-text)!important; border-color:#596071!important; } html[data-pati-theme="dark"] :is(#main-content,#modal-root,#tools-form) :is(input,textarea)::placeholder{ color:#c0c4d1!important;opacity:1!important; } /* Shared light surfaces to repair any stale overrides across theme switching. */ html[data-pati-theme="light"] #main-content :is( .pati-ig-profile,.pati-settings-list,.pati-explore-media-screen,.pati-search-screen, .pati-edu-path-home,.pati-edu-path-list,.pati-ref-academy-home,.pati-ref-academy-list, .pati-pets-page,.pati-pet-hub,.p4-hub,.p4-health,.p4-shop,.pati-shop-v2, .pati-ref-kb-home,.kb-v2,.care-v2,.wellness-v2,.lost-v2,.adopt-v2 ){color:var(--pui-text)!important} html[data-pati-theme="light"] #main-content :is( .empty,.empty-state,.pati-search-empty,.pati-ig-empty,.pati-feed-card, .pati-community-card,.pati-shop-card,.pati-edu-path-item,.pati-ig-summary ){ background-color:var(--pui-paper)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } html[data-pati-theme="light"] #main-content :is( .pati-ig-profile,.pati-settings-list,.pati-explore-media-screen,.pati-search-screen, .pati-edu-path-home,.pati-edu-path-list,.pati-ref-academy-home,.pati-ref-academy-list, .pati-pets-page,.pati-pet-hub,.p4-hub,.p4-health,.p4-shop,.pati-shop-v2, .pati-ref-kb-home,.kb-v2,.care-v2,.wellness-v2,.lost-v2,.adopt-v2 ) :is(h1,h2,h3,h4,strong,label){color:var(--pui-text)!important} html[data-pati-theme="light"] #main-content :is( .pati-ig-profile,.pati-settings-list,.pati-explore-media-screen,.pati-search-screen, .pati-edu-path-home,.pati-edu-path-list,.pati-ref-academy-home,.pati-ref-academy-list, .pati-pets-page,.pati-pet-hub,.p4-hub,.p4-health,.p4-shop,.pati-shop-v2, .pati-ref-kb-home,.kb-v2,.care-v2,.wellness-v2,.lost-v2,.adopt-v2 ) :is(p,small,.muted,.meta){color:var(--pui-secondary)!important} html[data-pati-theme="light"] :is(#modal-root,#tools-form) :is( .modal,.modal-content,.modal-header,.modal-footer,.pati-field,.pati-feature-group ){ background-color:var(--pui-paper)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } html[data-pati-theme="light"] :is(#main-content,#modal-root,#tools-form) :is( input:not([type="radio"]):not([type="checkbox"]),select,textarea ){ background:var(--pui-input)!important;color:var(--pui-text)!important; border-color:var(--pui-border)!important; } html[data-pati-theme="light"] :is(#main-content,#modal-root,#tools-form) :is(input,textarea)::placeholder{ color:#696d77!important;opacity:1!important; } /* Collab account picker — identical layout and contrast at every screen size. */ .pati-collab-picker{display:flex;flex-direction:column;min-width:0;gap:9px;position:relative} .pati-collab-picker>label{display:block;font-size:13px;font-weight:850} .pati-collab-picker input[name="collab_handle"]{width:100%;min-width:0;min-height:45px;box-sizing:border-box;border-radius:12px;padding:10px 12px;font-size:14px} .pati-collab-search-results{ display:flex;flex-direction:column;gap:3px;max-height:min(254px,39dvh); overflow-y:auto;-webkit-overflow-scrolling:touch; padding:6px;border:1px solid var(--pui-border,#ddd); border-radius:14px;background:var(--pui-paper,#fff); box-shadow:var(--pui-shadow,0 5px 18px #0001); } .pati-collab-search-results[hidden],.pati-collab-selected[hidden]{display:none!important} .pati-collab-search-results .pati-collab-option{ display:flex;align-items:center;gap:11px;min-height:55px; width:100%;min-width:0;text-align:left;padding:7px 9px; border:1px solid transparent;border-radius:10px; background:transparent;color:var(--pui-text,#222);cursor:pointer; } .pati-collab-search-results .pati-collab-option:hover, .pati-collab-search-results .pati-collab-option.is-highlighted{ background:var(--pui-raised,#f2f3f5)!important;color:var(--pui-text,#222)!important; border-color:var(--pui-border,#ddd)!important; } .pati-collab-avatar,.pati-collab-picked-avatar{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:50%} .pati-collab-avatar>.avatar,.pati-collab-picked-avatar>.avatar{width:42px!important;height:42px!important;min-width:42px!important} .pati-collab-avatar img,.pati-collab-picked-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pati-collab-user,.pati-collab-picked-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;line-height:1.3} .pati-collab-user strong,.pati-collab-picked-text strong{font-size:13px;font-weight:850;color:var(--pui-text,#222)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pati-collab-user small,.pati-collab-picked-text small{font-size:12px;color:var(--pui-secondary,#666)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pati-collab-select-icon{flex:0 0 25px;width:25px;text-align:center;color:var(--pui-secondary,#777);font-size:17px} .pati-collab-searching,.pati-collab-no-result{margin:0;padding:13px 10px;font-size:12px;line-height:1.45;color:var(--pui-secondary,#666)} .pati-collab-selected{display:flex;align-items:center;gap:11px;min-height:58px;padding:8px 10px;background:var(--pui-raised,#eee);border:1px solid var(--pui-border,#ddd);border-radius:13px} .pati-collab-unselect{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;font-size:24px;border:0;border-radius:50%;background:transparent;color:var(--pui-text,#222);cursor:pointer} .pati-collab-hint{color:var(--pui-secondary,#666)!important;font-size:12px;line-height:1.45} html[data-pati-theme="dark"] .pati-collab-picker .pati-collab-search-results, html[data-pati-theme="dark"] .pati-collab-picker .pati-collab-selected{ background:var(--pui-paper)!important;border-color:var(--pui-border)!important; } html[data-pati-theme="dark"] .pati-collab-picker .pati-collab-option{ color:var(--pui-text)!important; } /* Preserve deliberate visual designs: do not invert avatar, video, stories or Reel art. */ @media(max-width:400px){ .pati-collab-avatar,.pati-collab-picked-avatar{width:37px;height:37px;flex-basis:37px} .pati-collab-avatar>.avatar,.pati-collab-picked-avatar>.avatar{width:37px!important;height:37px!important;min-width:37px!important} .pati-collab-search-results{max-height:33dvh} } @media(prefers-contrast:more){ .pati-collab-search-results .pati-collab-option:focus-visible{outline:3px solid var(--pui-focus)} } /* Active-button descendants inherit the matching foreground, not the generic heading or small-text color. This block must stay after the general typography rules. */ html[data-pati-theme="dark"] #main-content :is( .pati-explore-sort button.active,.pati-explore-sort button[aria-pressed="true"], .pati-dm-filters button.active,.pati-ig-tabs button.active, .pati-theme-options button.active,.pati-shop-filter button.active ) :is(strong,small,span,svg,.icon){ color:var(--pui-active-text)!important; stroke:currentColor!important; } html[data-pati-theme="light"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active, html[data-pati-theme="light"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn[aria-current="page"]{ background:#eeeff3!important;color:#17191e!important; } html[data-pati-theme="light"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active :is(.icon,small,svg), html[data-pati-theme="light"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn[aria-current="page"] :is(.icon,small,svg){ color:#17191e!important;stroke:currentColor!important; } html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn.active :is(.icon,small,svg), html[data-pati-theme="dark"] #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn[aria-current="page"] :is(.icon,small,svg){ color:#fff!important;stroke:currentColor!important; } html[data-pati-theme="dark"] #modal-root .pati-collab-search-results .pati-collab-option :is(strong,small,.pati-collab-select-icon){ color:var(--pui-text)!important; } html[data-pati-theme="light"] #modal-root .pati-collab-search-results .pati-collab-option :is(strong,small,.pati-collab-select-icon){ color:var(--pui-text)!important; } /* patiyiz-social-quality-20261029.css */ /* Patiyiz October social/creator/group polish. Scoped, keyboard and mobile safe. */ .pati-safety-controls{display:grid;gap:10px;min-width:0} .pati-safety-controls h4{margin:12px 0 0;color:var(--pui-text,#17191e);font-size:14px} .pati-safety-controls .pati-social-person{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px;border:1px solid var(--pui-border,#ddd);border-radius:12px} .pati-safety-controls .pati-social-person>span{flex:1;min-width:100px;display:grid;gap:3px} .pati-safety-controls .pati-social-person small{color:var(--pui-secondary,#5c6067)} .pati-safety-controls button,.pati-group-photo-label{background:var(--pui-raised,#f3f4f6);color:var(--pui-text,#1c1d21);border:1px solid var(--pui-border,#ddd);padding:10px 12px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:700} .pati-safety-controls [aria-pressed="true"],.pati-safety-controls [aria-checked="true"]{background:var(--pui-text,#20212a);color:var(--pui-paper,#fff)} .pati-safety-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .pati-safety-buttons button{padding:10px 5px;line-height:1.3} .pati-private-message{margin:24px 12px;padding:24px 18px;border:1px solid var(--pui-border,#ddd);border-radius:18px;text-align:center;background:var(--pui-raised,#f6f7f9);color:var(--pui-text,#111);line-height:1.55;font-size:14px;font-weight:650} .pati-insights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pati-insights-card{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px solid var(--pui-border,#ddd);border-radius:15px;background:var(--pui-raised,#f7f7f8);color:var(--pui-text,#202029);min-width:0} .pati-insights-card strong{font-size:clamp(18px,4vw,29px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .pati-insights-card small{font-size:11px;color:var(--pui-secondary,#5b606a)} #pati-insights-panel .modal-content>h3{font-size:14px;color:var(--pui-text,#202029)} .pati-insights-chart{display:flex;align-items:stretch;height:130px;gap:3px;border-bottom:1px solid var(--pui-border,#ddd);padding:10px 0 0} .pati-insights-bar{display:flex;align-items:end;flex:1 1 0;min-width:2px} .pati-insights-bar span{display:block;width:100%;background:var(--pui-text,#23252e);border-radius:4px 4px 0 0;min-height:3px} .pati-group-photo-editor{display:flex;align-items:center;gap:14px;min-width:0;margin:12px 0 16px;padding:12px;border:1px solid var(--pui-border,#ddd);border-radius:16px;color:var(--pui-text,#242531)} .pati-group-photo-editor>div{display:grid;gap:5px;min-width:0} .pati-group-photo-editor small{color:var(--pui-secondary,#6a6a72)} .pati-group-photo-preview{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:0 0 64px;background:var(--pui-raised,#eee)} .pati-group-photo-preview img,.pati-group-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pati-group-photo-label{display:inline-flex;width:max-content;align-items:center;justify-content:center;margin-top:4px} .pati-group-photo-label input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important} .pati-reaction-choice{display:grid;gap:7px;padding:12px;border:1px solid var(--pui-border,#ddd);border-radius:15px;margin:8px 0 15px;background:var(--pui-raised,#f5f6f7)} .pati-reaction-choice small{color:var(--pui-secondary,#555)} .pati-source-credit{display:block;width:100%;background:var(--pui-raised,#f5f6f7);color:var(--pui-text,#202029);border:1px solid var(--pui-border,#ddd);border-radius:10px;margin:9px 0;padding:9px 12px;font-size:12px;text-align:left;cursor:pointer} .pati-quality-status{position:fixed;z-index:10020;left:50%;top:calc(8px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 28px);padding:9px 14px;border-radius:12px;background:#1c1f26;color:#fff;font-size:12px;font-weight:650;box-shadow:0 4px 18px #0003;pointer-events:none} .pati-quality-status[hidden]{display:none!important} html.pati-low-data .pati-micro-motion,html.pati-low-data .pati-feed-card{animation-duration:.01ms!important;transition-duration:.01ms!important} @media(max-width:520px){ .pati-insights-grid{gap:8px} .pati-insights-card{padding:11px 9px} .pati-group-photo-editor{gap:10px;padding:10px} .pati-safety-buttons button{font-size:12px;min-height:44px} } @media(prefers-reduced-motion:reduce){ .pati-insights-bar,.pati-source-credit{transition:none!important} } .pati-reel-caption .pati-reel-source-credit{display:block;margin-top:7px;padding:5px 8px;border:1px solid #ffffff66;border-radius:10px;background:#0009;color:#fff;font-size:12px;line-height:1.35;text-align:left;cursor:pointer;max-width:100%} .pati-reel-caption .pati-reel-source-credit:focus-visible{outline:2px solid #fff;outline-offset:2px} /* patiyiz-polish-collab-dm-story-20261029.css */ /* 2026-10-29 — polished shared posts, DMs and owner story activity preview. Scoped components, paired light/dark surfaces, no photo or video color filters. */ html[data-pati-theme="light"]{ --p3-chat-background:#fff;--p3-chat-other:#eef0f3;--p3-chat-other-text:#191a20; --p3-chat-mine:#7243f7;--p3-chat-mine-text:#fff;--p3-chat-accent:#7450ff; --p3-chat-muted:#747783;--p3-chat-border:#e8e9ed;--p3-chat-input:#f3f4f6; --p3-collab-ink:#17181c; } html[data-pati-theme="dark"]{ --p3-chat-background:#131418;--p3-chat-other:#30323a;--p3-chat-other-text:#f4f5f8; --p3-chat-mine:#6440d9;--p3-chat-mine-text:#fff;--p3-chat-accent:#ad95ff; --p3-chat-muted:#c3c4d0;--p3-chat-border:#3c3e49;--p3-chat-input:#282a32; --p3-collab-ink:#f5f5fa; } /* Accepted joint post: precisely two overlapping photos, both names centered. */ #main-content .pati-feed-card-header:has(.pati-collab-dual-header){ display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important; align-items:center!important;justify-items:center!important;min-width:0!important; gap:4px!important;padding:9px 11px!important; } #main-content .pati-feed-card-header .pati-collab-dual-header{ grid-column:2!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important;gap:5px!important; min-width:0;max-width:min(74vw,440px);margin-inline:auto!important; color:var(--p3-collab-ink)!important;text-align:center; } #main-content .pati-feed-card-header:has(.pati-collab-dual-header)>.pati-post-more{ grid-column:3!important;justify-self:end!important;grid-row:1!important;margin-left:0!important; } #main-content .pati-collab-dual-avatars{ display:flex;align-items:center;justify-content:center; padding-right:11px;height:43px;min-height:43px; } #main-content .pati-collab-dual-avatars>span{ width:42px;height:42px;min-width:42px;display:grid;place-items:center; overflow:hidden;border-radius:50%;border:3px solid var(--pui-paper,#fff); background:var(--pui-raised,#f1f2f5);box-shadow:0 1px 3px #0002; box-sizing:border-box; } #main-content .pati-collab-dual-avatars>span+span{margin-left:-11px} #main-content .pati-collab-dual-avatars .avatar{ width:100%!important;height:100%!important;min-width:0!important; border:0!important;border-radius:50%!important;overflow:hidden; } #main-content .pati-collab-dual-avatars img{ width:100%!important;height:100%!important;object-fit:cover!important; border-radius:50%!important; } #main-content .pati-collab-dual-authors{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center; max-width:100%;gap:2px 6px;min-width:0;text-align:center; } #main-content .pati-collab-dual-authors .pati-collab-author{ display:inline!important;border:0!important;background:transparent!important; color:var(--p3-collab-ink)!important;font-size:clamp(11px,2.8vw,14px)!important; font-weight:850!important;max-width:100%;min-width:0!important; padding:2px 0!important;line-height:1.4!important;cursor:pointer; overflow-wrap:anywhere;text-align:center; } #main-content .pati-collab-dual-authors .pati-collab-author-name{color:inherit!important} #main-content .pati-collab-dual-and{ display:inline-flex;align-items:center;font-size:11px;font-weight:600; color:var(--pui-secondary,#666); } #main-content .pati-collab-verified{ display:inline-grid;place-items:center;width:14px;height:14px; border-radius:50%;font-size:10px;line-height:1; color:#fff!important;background:#4d6de4!important;vertical-align:1px; } #main-content .pati-collab-dual-label{ color:var(--pui-secondary,#666)!important;font-size:10px!important; font-weight:650!important;letter-spacing:.03em; } #main-content .pati-collab-dual-authors .pati-collab-author:focus-visible{ outline:2px solid var(--pui-focus,#5865db)!important;outline-offset:2px!important;border-radius:3px; } /* Messages: tall, comfortable thread with subtle time separators and an anchored composer. */ #main-content .pati-dm-layout .chat-window{ background:var(--p3-chat-background)!important;color:var(--p3-chat-other-text)!important; border-color:var(--p3-chat-border)!important;min-width:0!important; } #main-content .pati-dm-layout .chat-window>header{ display:flex!important;align-items:center!important;gap:12px!important; flex:0 0 auto!important;min-height:67px!important; padding:10px 14px!important;box-sizing:border-box!important; background:var(--p3-chat-background)!important;color:var(--pui-text,#222)!important; border-bottom:1px solid var(--p3-chat-border)!important; } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar){ display:flex;flex-direction:column;gap:3px;min-width:0;flex:1; } #main-content .pati-dm-layout .chat-window>header>span strong{ color:var(--pui-text,#222)!important;font-size:15px!important;line-height:1.2!important; } #main-content .pati-dm-layout .chat-window>header>span small{ color:var(--pui-secondary,#777)!important;font-size:12px!important; } #main-content .pati-dm-layout .chat-history{ display:flex!important;flex-direction:column!important;gap:10px!important; flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important; padding:19px 15px 18px!important; background:var(--p3-chat-background)!important;color:var(--pui-text,#222)!important; } #main-content .pati-dm-layout .chat-history .bubble-chat{ display:block!important;align-self:flex-start!important; width:fit-content!important;max-width:min(78%,520px)!important;min-width:0!important; padding:11px 15px!important;margin:1px 0!important; font-size:clamp(14px,2vw,16px)!important;line-height:1.48!important; font-weight:420!important;letter-spacing:0!important; white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal; border:1px solid transparent!important; border-radius:20px 20px 20px 7px!important; background:var(--p3-chat-other)!important;color:var(--p3-chat-other-text)!important; box-shadow:none!important;text-align:left!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine{ align-self:flex-end!important;margin-left:auto!important; background:var(--p3-chat-mine)!important;color:var(--p3-chat-mine-text)!important; border:1px solid transparent!important;border-radius:20px 20px 7px 20px!important; } #main-content .pati-dm-layout .chat-history .bubble-chat>small{ display:block!important;color:inherit!important;opacity:.78!important; font-size:10px!important;line-height:1.35!important; margin-top:5px!important;letter-spacing:0!important;text-align:right; } #main-content .pati-dm-layout .chat-history .bubble-chat:not(.mine)>small{color:var(--p3-chat-muted)!important;opacity:1!important} #main-content .pati-dm-layout .chat-history .pati-dm-time-divider{ display:flex!important;align-items:center;justify-content:center; align-self:stretch!important;flex:0 0 auto; width:100%;margin:17px 0 8px;pointer-events:none;text-align:center; background:transparent!important;border:0!important; } #main-content .pati-dm-layout .pati-dm-time-divider time{ display:inline-block;border-radius:999px;padding:4px 12px; color:var(--p3-chat-muted)!important;background:transparent!important; font-size:12px!important;font-weight:600!important;letter-spacing:.02em; font-variant-numeric:tabular-nums; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-msg-tools{ white-space:normal; } #main-content .pati-dm-layout .chat-form{ flex:0 0 auto!important;min-height:64px!important;margin:0!important; display:flex!important;align-items:center!important;flex-wrap:nowrap!important; gap:8px!important;padding:9px 12px!important; border-top:1px solid var(--p3-chat-border)!important; background:var(--p3-chat-background)!important; box-sizing:border-box!important; } #main-content .pati-dm-layout .chat-form input[name="body"]{ flex:1 1 auto!important;min-width:0!important;width:auto!important; min-height:44px!important;max-height:100px!important; padding:10px 14px!important;border-radius:999px!important; box-sizing:border-box!important; color:var(--pui-text,#222)!important;background:var(--p3-chat-input)!important; border:1px solid var(--p3-chat-border)!important; font-size:16px!important;font-weight:450!important;line-height:1.4!important; } #main-content .pati-dm-layout .chat-form input[name="body"]::placeholder{ color:var(--pui-secondary,#777)!important;opacity:1!important; } #main-content .pati-dm-layout .chat-form :is(.pati-dm-camera,.pati-dm-mic,.pati-dm-gallery,.primary-btn){ flex:0 0 41px!important;width:41px!important;min-width:41px!important; height:41px!important;min-height:41px!important; padding:0!important;border-radius:50%!important; display:grid!important;place-items:center!important; color:var(--pui-text,#222)!important;background:transparent!important; border:0!important; } #main-content .pati-dm-layout .chat-form :is(.pati-dm-camera,.primary-btn){ color:#fff!important;background:var(--p3-chat-accent)!important; } #main-content .pati-dm-layout .chat-form :is(.pati-dm-camera,.pati-dm-mic,.pati-dm-gallery,.primary-btn) .icon{ width:23px!important;height:23px!important;stroke:currentColor!important; } #main-content .pati-dm-layout .chat-form .primary-btn:disabled{opacity:.5!important} #main-content .pati-dm-layout .chat-form :is(.pati-dm-camera,.pati-dm-mic,.pati-dm-gallery,.primary-btn):focus-visible{ outline:2px solid var(--pui-focus,#4756db)!important;outline-offset:2px!important; } @media(max-width:410px){ #main-content .pati-dm-layout .chat-form{gap:5px!important;padding:8px!important} #main-content .pati-dm-layout .chat-form :is(.pati-dm-camera,.pati-dm-mic,.pati-dm-gallery,.primary-btn){ width:36px!important;min-width:36px!important;flex-basis:36px!important;height:36px!important;min-height:36px!important; } #main-content .pati-dm-layout .chat-history{padding-inline:10px!important} #main-content .pati-collab-dual-authors .pati-collab-author{font-size:11px!important} } @media(max-width:340px){ #main-content .pati-dm-layout .chat-form{gap:3px!important;padding:6px!important} #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.pati-dm-gallery){width:31px!important;min-width:31px!important;flex-basis:31px!important} #main-content .pati-dm-layout .chat-history .bubble-chat{max-width:85%!important} } /* Owner's story movement preview: actual latest viewer avatars or a legible empty state. */ #story-overlay .story-viewers-button.pati-story-viewer-preview{ position:absolute!important;left:14px!important; bottom:calc(62px + env(safe-area-inset-bottom,0px))!important; z-index:18!important;display:flex!important;flex-direction:column!important; align-items:flex-start!important;justify-content:center!important;gap:5px!important; width:max-content!important;max-width:min(75vw,270px)!important; min-width:0!important;min-height:0!important; padding:7px 9px!important;margin:0!important; border:1px solid #ffffff40!important;border-radius:16px!important; background:#0b0c10b5!important;color:#fff!important;box-shadow:0 3px 18px #0005!important; text-align:left!important;line-height:1.35!important;cursor:pointer; backdrop-filter:blur(7px); } #story-overlay .pati-story-viewer-preview-stack{ display:flex;align-items:center;justify-content:flex-start; min-height:39px;padding-right:10px; } #story-overlay .pati-story-preview-avatar{ width:37px;height:37px;min-width:37px;display:grid;place-items:center; border-radius:50%;overflow:hidden;border:2px solid #ffffffd9; background:#50525b;box-sizing:border-box; } #story-overlay .pati-story-preview-avatar+.pati-story-preview-avatar{margin-left:-11px} #story-overlay .pati-story-preview-avatar .avatar{ width:100%!important;height:100%!important;min-width:0!important; border-radius:50%!important;overflow:hidden;border:0!important; } #story-overlay .pati-story-preview-avatar img{ width:100%!important;height:100%!important;object-fit:cover!important; border-radius:50%!important; } #story-overlay .pati-story-viewer-preview-label{ display:block;color:#fff!important;font-size:14px!important;font-weight:850!important; } #story-overlay .pati-story-viewer-preview-status{ display:block;color:#eceef3!important;font-size:10px!important;font-weight:650!important; } #story-overlay .pati-story-viewer-empty-paw{ display:grid;place-items:center;width:34px;height:34px; border-radius:50%;border:1px solid #ffffff75;background:#ffffff24; color:#fff;font-size:21px; } #story-overlay .pati-story-viewer-preview:focus-visible{ outline:3px solid #fff!important;outline-offset:3px!important; } #story-overlay.pati-story-viewers-open .story-viewers-button{display:none!important} @media(prefers-reduced-motion:reduce){ #story-overlay .pati-story-viewer-preview, #main-content .pati-collab-dual-authors button{ transition:none!important; } } /* Seriler — permanent goal dashboard based on the one-time flame card. Original animation, daily weekday row, four goals and PatiCoin rewards. */ #main-content .pati-streaks-page{ --streak-line:var(--pui-border,#e1e3e8); --streak-ink:var(--pui-text,#1c1e23); --streak-muted:var(--pui-secondary,#545864); --streak-paper:var(--pui-paper,#fff); box-sizing:border-box;min-width:0;width:min(780px,100%); margin-inline:auto;padding:clamp(10px,2vw,22px); color:var(--streak-ink);background:transparent; } #main-content .pati-streaks-top{ display:flex;align-items:center;gap:12px;padding:5px 0 16px; color:var(--streak-ink); } #main-content .pati-streaks-back{ flex:0 0 43px;display:grid;place-items:center;width:43px;height:43px; border-radius:13px;border:1px solid var(--streak-line); background:var(--streak-paper);color:var(--streak-ink); font-size:28px;cursor:pointer; } #main-content .pati-streaks-top h1{font-size:clamp(23px,5vw,30px)!important;margin:0!important;color:var(--streak-ink)!important} #main-content .pati-streaks-top p{font-size:12px!important;margin:3px 0 0!important;color:var(--streak-muted)!important} #main-content .pati-streak-page-card{ display:flex;flex-direction:column;align-items:center;gap:0; border:1px solid var(--streak-line); border-radius:25px;padding:22px 20px 23px; background:var(--pati-streak-card,var(--streak-paper));color:var(--pati-streak-text,var(--streak-ink)); box-shadow:0 6px 23px #00000008; box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;text-align:center; } #main-content .pati-streak-page-card .pati-streak-sparkles{ height:138px;width:142px;margin:0 0 9px;max-height:none; } #main-content .pati-streak-page-card .pati-streak-flame{animation:pati-streak-flame-welcome 1s ease-out both} #main-content .pati-streak-page-card .pati-streak-count{ font-size:clamp(54px,12vw,78px);font-weight:950;color:var(--pati-streak-text,var(--streak-ink)); } #main-content .pati-streak-page-card h2{ margin:2px 0 5px!important;font-size:clamp(23px,5vw,30px)!important; color:var(--pati-streak-text,var(--streak-ink))!important; } #main-content .pati-streak-page-card .pati-streak-message{ max-width:400px;margin:9px 0 18px;color:var(--pati-streak-muted,var(--streak-muted))!important; } #main-content .pati-streak-page-card .pati-streak-week{ width:100%;max-width:350px;margin-bottom:14px; } #main-content .pati-streak-page-card .pati-streak-best{max-width:100%;color:var(--pati-streak-text,var(--streak-ink))} #main-content .pati-streak-goal-section{ margin-top:16px;padding:18px;border:1px solid var(--streak-line);border-radius:23px; background:var(--streak-paper);color:var(--streak-ink); } #main-content .pati-streak-goals-header h2{color:var(--streak-ink)!important;font-size:20px!important;margin:0 0 4px!important} #main-content .pati-streak-goals-header p{color:var(--streak-muted)!important;font-size:12px!important;margin:0 0 16px!important;line-height:1.5} #main-content .pati-streak-goal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main-content .pati-streak-goal-card{ display:flex;flex-direction:column;min-width:0;gap:7px; background:var(--pui-raised,#f3f4f6);border:1px solid var(--streak-line); border-radius:18px;padding:14px;box-sizing:border-box;color:var(--streak-ink); } #main-content .pati-streak-goal-card.is-selected{ border:2px solid var(--streak-ink);padding:13px; background:var(--streak-paper); } #main-content .pati-streak-goal-top{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; } #main-content .pati-streak-goal-days{ font-size:clamp(22px,5vw,28px);font-weight:950;line-height:1.2;color:var(--streak-ink); font-variant-numeric:tabular-nums; } #main-content .pati-streak-goal-days small{font-size:12px;color:var(--streak-muted);font-weight:700} #main-content .pati-streak-goal-coins{ display:inline-flex;gap:4px;align-items:center;padding:5px 8px; color:#915300;background:#fff0c9;border-radius:999px;font-size:12px;font-weight:900; } #main-content .pati-streak-goal-coins .pati-coin-icon{width:16px!important;height:16px!important;object-fit:contain} #main-content .pati-streak-goal-card>strong{font-size:14px!important;color:var(--streak-ink)!important} #main-content .pati-streak-goal-card>small{font-size:11px!important;color:var(--streak-muted)!important;line-height:1.5} #main-content .pati-streak-progress{ margin:6px 0 2px;height:7px;border-radius:9px;overflow:hidden; background:var(--streak-line); } #main-content .pati-streak-progress>span{ display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#ffbd36,#ff8128); transition:width .36s ease; } #main-content .pati-streak-goal-footer{ margin-top:auto;padding-top:5px;display:flex;flex-direction:column;align-items:stretch;gap:9px; } #main-content .pati-streak-goal-footer span{ color:var(--streak-muted)!important;font-size:11px;line-height:1.4; } #main-content .pati-streak-goal-footer button{ width:100%;min-height:40px;border:0;border-radius:11px;cursor:pointer; background:var(--pui-active,#1b1c21)!important; color:var(--pui-active-text,#fff)!important;font-size:12px;font-weight:850; } #main-content .pati-streak-goal-footer button:disabled{ cursor:default;opacity:1;background:var(--streak-line)!important;color:var(--streak-muted)!important; } #main-content .pati-streak-goal-card.is-earned .pati-streak-goal-footer button{ color:#176544!important;background:#e0f5e9!important; } #main-content .pati-streak-rules{ margin:16px 0 0!important;font-size:11px!important;color:var(--streak-muted)!important;line-height:1.55!important; } #main-content .pati-streaks-page button:focus-visible{ outline:3px solid var(--pui-focus,#526de0)!important;outline-offset:2px; } @media(max-width:540px){ #main-content .pati-streaks-page{padding:8px} #main-content .pati-streak-goal-section{padding:13px;border-radius:18px} #main-content .pati-streak-goal-grid{gap:9px} #main-content .pati-streak-goal-card{padding:11px;border-radius:15px} #main-content .pati-streak-goal-card.is-selected{padding:10px} #main-content .pati-streak-page-card{padding:13px 10px 19px} #main-content .pati-streak-page-card .pati-streak-sparkles{width:112px;height:118px} } /* An explicit Onayla action beside each suggestion. Tapping the name does not approve. */ .pati-collab-search-results .pati-collab-option{ box-sizing:border-box;cursor:default;gap:8px; } .pati-collab-search-results .pati-collab-user{flex:1 1 auto;min-width:0} .pati-collab-search-results .pati-collab-approve{ flex:0 0 auto;min-width:66px;min-height:39px; padding:8px 11px!important;border:1px solid var(--pui-active,#222)!important; border-radius:10px!important;color:var(--pui-active-text,#fff)!important; background:var(--pui-active,#222)!important;font-size:12px!important; font-weight:850!important;text-align:center!important;cursor:pointer; } .pati-collab-search-results .pati-collab-approve:hover{ opacity:.88; } .pati-collab-search-results .pati-collab-approve:focus-visible{ outline:3px solid var(--pui-focus,#5d6ce6)!important;outline-offset:2px!important; } html[data-pati-theme="dark"] .pati-collab-search-results .pati-collab-approve{ background:#f2f3f6!important;color:#191a20!important;border-color:#f2f3f6!important; } @media(max-width:360px){ .pati-collab-search-results .pati-collab-approve{min-width:59px;padding:6px 7px!important} } @media(prefers-reduced-motion:reduce){ #main-content .pati-streak-page-card .pati-streak-flame{animation:none!important} #main-content .pati-streak-progress>span{transition:none!important} } /* 2026-10-29 — Seriler v2: phone-first, calm premium layout. Override older 2-column mini-cards with legible one-row goals on phones. Use existing light/dark color tokens and preserve the original SVG flame. */ #main-content .pati-streaks-page{ --streak-amber:#ffad29; width:min(720px,100%)!important; max-width:100%!important; padding:clamp(12px,2.5vw,22px)!important; padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))!important; } #main-content .pati-streaks-top{ margin-bottom:4px!important;padding:3px 1px 15px!important;gap:11px!important; } #main-content .pati-streaks-back{ width:42px!important;height:42px!important;flex-basis:42px!important; border-radius:50%!important;font-size:25px!important; } #main-content .pati-streak-title{min-width:0;flex:1} #main-content .pati-streak-kicker{ display:block;font-size:10px;line-height:1.4;letter-spacing:.15em; text-transform:uppercase;font-weight:900;color:#cc841e!important; margin-bottom:2px; } html[data-pati-theme="dark"] #main-content .pati-streak-kicker{color:#ffbd58!important} #main-content .pati-streaks-top h1{ font-size:clamp(21px,5.2vw,27px)!important;line-height:1.16!important; letter-spacing:-.03em!important; } #main-content .pati-streaks-top p{ font-size:12px!important;line-height:1.4!important;margin:3px 0 0!important; } #main-content .pati-streak-page-card{ position:relative!important; border-radius:24px!important; padding:19px 15px 19px!important; gap:0!important; border:1px solid #f5dbae!important; background:linear-gradient(154deg,#fffaf0 0%,#fff4e2 100%)!important; box-shadow:0 7px 24px #a56a1d14!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card{ border-color:#594532!important; background:linear-gradient(155deg,#2c2622 0%,#221f23 100%)!important; box-shadow:0 7px 26px #0003!important; } #main-content .pati-streak-hero-eyebrow{ display:inline-flex;align-items:center;justify-content:center; border:1px solid #f5dbaa;border-radius:999px; color:#965b0a!important;background:#fff9ed; font-size:11px;font-weight:850;letter-spacing:.02em; padding:6px 12px;line-height:1.2; } html[data-pati-theme="dark"] #main-content .pati-streak-hero-eyebrow{ color:#ffc873!important;background:#3c312a!important;border-color:#655038!important; } #main-content .pati-streak-page-card .pati-streak-sparkles{ display:grid!important;place-items:center!important; width:110px!important;height:111px!important; margin:5px auto 0!important;max-height:none!important; } #main-content .pati-streak-page-card .pati-streak-flame{ max-height:112px!important;filter:drop-shadow(0 5px 6px #e6821850)!important; } #main-content .pati-streak-page-card .pati-streak-count{ margin:1px 0 0!important;font-size:clamp(56px,15vw,74px)!important; line-height:1!important;letter-spacing:-.07em!important; color:#2a201c!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card .pati-streak-count{ color:#fff7f0!important; } #main-content .pati-streak-page-card h2{ font-size:clamp(19px,5.2vw,25px)!important; letter-spacing:-.03em!important;margin:3px 0 0!important; color:#2a201c!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card h2{color:#fff7f0!important} #main-content .pati-streak-page-card .pati-streak-message{ margin:8px auto 12px!important;max-width:300px!important; font-size:12px!important;line-height:1.5!important; color:#765f50!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card .pati-streak-message{ color:#ddc7b6!important; } #main-content .pati-streak-page-card .pati-streak-week{ width:100%!important;max-width:390px!important;gap:4px!important; margin:0 auto 13px!important;padding:0 2px!important; } #main-content .pati-streak-page-card .pati-streak-day{ min-width:0!important;gap:7px!important; } #main-content .pati-streak-page-card .pati-streak-day-circle{ width:clamp(29px,8vw,38px)!important; height:clamp(29px,8vw,38px)!important; font-weight:900!important; } #main-content .pati-streak-page-card .pati-streak-day-name{ font-size:clamp(9.5px,2.6vw,11px)!important;font-weight:750!important; color:#856c60!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card .pati-streak-day-name{ color:#dac4b4!important; } #main-content .pati-streak-page-card .pati-streak-day.is-done .pati-streak-day-name{ color:#34271f!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card .pati-streak-day.is-done .pati-streak-day-name{ color:#fff0df!important; } #main-content .pati-streak-page-card .pati-streak-best{ background:#fff2d7!important;color:#765014!important; border:1px solid #f4dfa8!important; font-size:11px!important;font-weight:850!important; line-height:1.3!important;padding:7px 12px!important; } html[data-pati-theme="dark"] #main-content .pati-streak-page-card .pati-streak-best{ background:#463523!important;color:#ffcf80!important;border-color:#5b4730!important; } #main-content .pati-streak-goal-section{ border:0!important;background:transparent!important; padding:0!important;margin-top:20px!important; } #main-content .pati-streak-goals-header{ display:flex;flex-direction:column;gap:4px;margin:0 2px 13px!important; } #main-content .pati-streak-goals-header h2{ font-size:clamp(19px,5vw,23px)!important;letter-spacing:-.025em!important; margin:0!important; } #main-content .pati-streak-goals-header p{ font-size:12px!important;line-height:1.5!important;margin:0!important; } #main-content .pati-streak-goal-current{ display:flex;align-items:center;gap:8px;align-self:flex-start; font-size:11px;font-weight:800; color:var(--streak-ink)!important;margin-top:5px; } #main-content .pati-streak-goal-current>span{ width:8px;height:8px;border-radius:50%;background:#fda12d; box-shadow:0 0 0 4px #fda12d21; } #main-content .pati-streak-goal-grid{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:11px!important; } #main-content .pati-streak-goal-card{ position:relative!important;overflow:hidden!important; border-radius:20px!important; background:var(--streak-paper)!important;border:1px solid var(--streak-line)!important; box-shadow:0 3px 12px #00000007!important; padding:15px!important;gap:7px!important; } #main-content .pati-streak-goal-card.is-selected{ border:2px solid #eda12f!important;padding:14px!important; box-shadow:0 5px 20px #ec9b2c19!important; } html[data-pati-theme="dark"] #main-content .pati-streak-goal-card.is-selected{ border-color:#f6ac48!important; background:#282526!important; } #main-content .pati-streak-goal-card.is-earned{border-color:#a4d5bc!important} #main-content .pati-streak-goal-days{ color:var(--streak-ink)!important;font-size:29px!important; line-height:1.1!important; } #main-content .pati-streak-goal-coins{ display:inline-flex!important;align-items:center!important;gap:5px!important; padding:6px 9px!important;white-space:nowrap!important; border:1px solid #f6dfa4!important; background:#fff2d1!important;color:#83500b!important; font-size:12px!important;font-weight:950!important; } #main-content .pati-streak-goal-card>strong{ font-size:14px!important;line-height:1.35!important;letter-spacing:-.01em!important; } #main-content .pati-streak-goal-card>small{ font-size:12px!important;line-height:1.35!important; } #main-content .pati-streak-progress{ height:8px!important;background:var(--streak-line)!important; border-radius:20px!important;margin:7px 0 4px!important; } #main-content .pati-streak-progress>span{ background:linear-gradient(90deg,#ffb83e,#f57d22)!important; border-radius:20px!important; } #main-content .pati-streak-goal-footer{gap:9px!important;padding-top:3px!important} #main-content .pati-streak-goal-footer>span{ font-size:11px!important;line-height:1.45!important; } #main-content .pati-streak-goal-footer button{ border-radius:12px!important;min-height:43px!important; font-size:13px!important;font-weight:900!important; } #main-content .pati-streak-goal-footer button:not(:disabled):active{transform:scale(.99)} #main-content .pati-streak-rules{ margin:14px 2px 2px!important; color:var(--streak-muted)!important;font-size:11px!important;line-height:1.55!important; } @media(max-width:640px){ #main-content .pati-streaks-page{width:100%!important;padding:10px 12px calc(32px + env(safe-area-inset-bottom,0px))!important} #main-content .pati-streak-goal-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important} #main-content .pati-streak-goal-card{border-radius:17px!important;padding:13px 14px!important;gap:4px!important} #main-content .pati-streak-goal-card.is-selected{padding:12px 13px!important} #main-content .pati-streak-goal-top{display:flex!important;align-items:center!important;justify-content:space-between!important} #main-content .pati-streak-goal-days{font-size:25px!important} #main-content .pati-streak-goal-card>strong{font-size:15px!important;margin-top:2px} #main-content .pati-streak-goal-card>small{font-size:11px!important} #main-content .pati-streak-progress{margin:9px 0 3px!important} #main-content .pati-streak-goal-footer{ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(106px,auto)!important; align-items:center!important;gap:12px!important;margin-top:2px!important; } #main-content .pati-streak-goal-footer button{ width:auto!important;min-width:106px!important;min-height:42px!important; white-space:nowrap!important; } #main-content .pati-streak-goal-footer>span{max-width:100%;font-size:11px!important} } @media(max-width:355px){ #main-content .pati-streaks-page{padding-inline:8px!important} #main-content .pati-streak-page-card{padding-inline:7px!important} #main-content .pati-streak-goal-card{padding-inline:11px!important} #main-content .pati-streak-goal-card.is-selected{padding-inline:10px!important} #main-content .pati-streak-goal-footer{gap:6px!important;grid-template-columns:minmax(0,1fr) 100px!important} #main-content .pati-streak-goal-footer button{min-width:100px!important;font-size:12px!important} #main-content .pati-streak-page-card .pati-streak-week{gap:2px!important;padding:0!important} } /* Touch results must stay interactive while keyboard focus changes. */ .pati-collab-search-results .pati-collab-option{ touch-action:manipulation; position:relative; } .pati-collab-search-results .pati-collab-approve{ position:relative;z-index:2;min-height:44px!important; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } /* 29 Oct: mobile usability & predictable contrast, without altering user media. */ html[data-pati-theme="light"]{ --pati-final-field-bg:#f5f6f8; --pati-final-field-text:#17191f; --pati-final-field-line:#cdd2db; --pati-final-placeholder:#686e7a; } html[data-pati-theme="dark"]{ --pati-final-field-bg:#282b32; --pati-final-field-text:#f4f5f8; --pati-final-field-line:#535765; --pati-final-placeholder:#c0c3ce; } :is(#main-content,#modal-root) :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea,select ):not(.pati-reels-overlay-input){ background-color:var(--pati-final-field-bg)!important; color:var(--pati-final-field-text)!important; border-color:var(--pati-final-field-line)!important; } :is(#main-content,#modal-root) :is(input,textarea)::placeholder{ color:var(--pati-final-placeholder)!important;opacity:1; } :is(#main-content,#modal-root) :is(input,textarea,select,button):focus-visible{ outline:2px solid var(--p3-chat-accent,#7450ff); outline-offset:2px; } @media(max-width:740px) and (pointer:coarse){ /* At least 16px prevents iOS Safari's automatic zoom on focus. */ #modal-root :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea), #main-content .pati-dm-layout .chat-form textarea{font-size:16px!important} } @supports (content-visibility:auto){ /* Off-screen feed cards can skip style/layout/paint until approaching view. */ #main-content .pati-feed-card:not(:first-child){ content-visibility:auto; contain-intrinsic-size:auto 620px; } } @media(prefers-reduced-motion:reduce){ #main-content .pati-feed-card, #modal-root :is(input,textarea,button){scroll-behavior:auto!important} } /* patiyiz-dm-content-studio-20261029.css */ /* Patiyiz: DM quality and creator studio, 29 Oct 2026 */ .pati-dm-extra-tools{display:flex;align-items:center;gap:5px;max-width:100%;flex-wrap:wrap;margin-inline-start:auto} .pati-dm-extra-tools button,.pati-dm-gif,.pati-dm-stickers,.pati-comment-mention,.pati-mention-open{border:1px solid var(--pati-final-field-line,#d1d3d9);background:var(--pati-final-field-bg,#f3f4f6);color:var(--pati-final-field-text,#23242c);border-radius:10px;cursor:pointer;padding:6px 9px;font:inherit;font-size:12px;white-space:nowrap;min-height:35px} .pati-dm-gif{font-weight:850;letter-spacing:-.6px} .pati-dm-stickers{font-size:18px} .pati-dm-extra-tools button:focus-visible,.pati-media-review-tools button:focus-visible,.pati-mention-picker button:focus-visible{outline:2px solid #7a68d8;outline-offset:2px} .pati-dm-search-result{display:grid;gap:4px;width:100%;text-align:left;margin-block:6px;padding:12px;background:var(--pati-final-field-bg,#f4f4f6);color:var(--pati-final-field-text,#191c23);border:1px solid var(--pati-final-field-line,#dedee2);border-radius:12px;cursor:pointer;overflow-wrap:anywhere} .pati-dm-search-result strong{font-size:13px}.pati-dm-search-result span{font-size:13px}.pati-dm-search-result small{font-size:11px;opacity:.7} .pati-dm-search-hit{outline:2px solid #8864ff;outline-offset:3px;animation:pati-dm-found .9s ease-in-out} @keyframes pati-dm-found{50%{box-shadow:0 0 0 5px #9c85ff77}} .pati-chat-theme-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px} .pati-theme-preview{padding:16px 10px;border-radius:15px;border:2px solid transparent;cursor:pointer;min-height:60px;font-weight:750} .pati-theme-preview[aria-pressed=true]{outline:2px solid currentColor;outline-offset:2px} .pati-chat-classic{background:#eceef2;color:#1c2128}.pati-chat-midnight{background:#292b3e;color:#fff} .pati-chat-lavender{background:#ded5ff;color:#34214b}.pati-chat-ocean{background:#cce7ee;color:#194250}.pati-chat-rose{background:#f7d9e6;color:#5d2842} .chat-window.pati-dm-theme-midnight .chat-history{background:#222437!important;color:#f5f5ff!important} .chat-window.pati-dm-theme-midnight .bubble-chat:not(.mine){background:#37394f!important;color:#fff!important} .chat-window.pati-dm-theme-midnight .bubble-chat.mine{background:#63599e!important;color:#fff!important} .chat-window.pati-dm-theme-lavender .chat-history{background:#f4eeff!important} .chat-window.pati-dm-theme-lavender .bubble-chat.mine{background:#e0d2ff!important;color:#241d3d!important} .chat-window.pati-dm-theme-ocean .chat-history{background:#eef9fa!important} .chat-window.pati-dm-theme-ocean .bubble-chat.mine{background:#bce5ed!important;color:#1a3543!important} .chat-window.pati-dm-theme-rose .chat-history{background:#fff3f7!important} .chat-window.pati-dm-theme-rose .bubble-chat.mine{background:#f6cbde!important;color:#50203d!important} .pati-dm-sticker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .pati-dm-sticker-grid button{font-size:32px;border:1px solid var(--pati-final-field-line,#ddd);background:var(--pati-final-field-bg,#f3f4f6);padding:13px 0;border-radius:14px;cursor:pointer;min-height:62px} .bubble-chat.pati-dm-sticker-bubble{background:transparent!important;border:none!important;box-shadow:none!important;font-size:45px;line-height:1.2;padding:7px 10px!important} .pati-dm-scheduled-list{display:grid;gap:8px} .pati-dm-scheduled-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--pati-final-field-line,#ddd);border-radius:13px;padding:11px} .pati-dm-scheduled-item span{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere} .pati-dm-scheduled-item small{opacity:.7} .pati-dm-scheduled-item button{flex-shrink:0;border:0;border-radius:10px;background:#aa2632;color:white;padding:9px} .pati-comment-pinned-label{display:inline-block;font-size:11px;font-weight:700;margin-top:2px} .pati-mention-link,.pati-mention-open{font-weight:700;color:var(--pati-final-field-text,#333)} .pati-mention-link{background:transparent;border:0;padding:0 2px;text-decoration:underline;text-underline-offset:3px} .pati-mention-picker{position:relative;display:grid;gap:7px;margin:7px 0;border:1px solid var(--pati-final-field-line,#ddd);border-radius:14px;padding:9px;background:var(--pati-final-field-bg,#f6f6f7);color:var(--pati-final-field-text,#16191c);z-index:4} .pati-mention-picker input{width:100%;margin-top:5px;min-height:38px;font-size:16px!important} .pati-mention-results{display:grid;gap:4px;max-height:230px;overflow:auto} .pati-mention-results button{display:flex;gap:10px;align-items:center;border:0;background:transparent;color:inherit;padding:6px;border-radius:10px;cursor:pointer;text-align:left} .pati-mention-results button:hover{background:color-mix(in srgb,currentColor 10%,transparent)} .pati-mention-results button span{display:grid;gap:2px;font-size:13px}.pati-mention-results small{font-size:11px;opacity:.7} .pati-media-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px;-webkit-overflow-scrolling:touch;min-width:0} .pati-media-review-item{display:grid;gap:5px;flex:0 0 92px;scroll-snap-align:center;max-width:92px} .pati-media-review-item .pati-media-thumb{width:92px;height:92px;overflow:hidden} .pati-media-review-item .pati-media-thumb img,.pati-media-review-item .pati-media-thumb video{width:100%;height:100%;object-fit:cover} .pati-media-review-tools{display:flex;gap:4px;justify-content:space-between} .pati-media-review-tools button{flex:1;min-width:0;border:1px solid var(--pati-final-field-line,#ddd);border-radius:8px;min-height:32px;background:var(--pati-final-field-bg,#eee);color:var(--pati-final-field-text,#14171a);cursor:pointer;font-size:15px} .pati-media-review-tools button:last-child{color:#c03949;font-size:18px} .pati-media-review-tools button:disabled{opacity:.3;cursor:default} .pati-video-carousel .pati-carousel-slide{overflow:hidden;position:relative;min-width:100%;scroll-snap-align:start} .pati-video-carousel .pati-video-frame,.pati-video-carousel video{width:100%;height:100%;object-fit:contain} .pati-video-carousel .pati-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory} .pati-ig-tabs{overflow-x:auto;scrollbar-width:none;gap:0!important} .pati-ig-tabs button{flex:1 0 48px;min-width:46px;white-space:nowrap} @media(max-width:720px){ .pati-dm-extra-tools{gap:2px;max-width:100%} .pati-dm-extra-tools button{font-size:11px;min-height:34px;padding:5px} .pati-dm-layout .chat-window>header{flex-wrap:wrap;gap:6px;padding-block:8px} .chat-form .pati-dm-gif,.chat-form .pati-dm-stickers{flex:0 0 auto;font-size:11px;min-width:34px;min-height:36px;padding:4px} .pati-dm-stickers{font-size:17px!important} .pati-dm-scheduled-item{flex-wrap:wrap} .pati-media-review-item{flex-basis:84px;max-width:84px} .pati-media-review-item .pati-media-thumb{width:84px;height:84px} } @media(prefers-reduced-motion:reduce){.pati-dm-search-hit{animation:none}} .pati-dm-lightbox-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pati-dm-lightbox-actions button,.pati-dm-lightbox-actions a{display:grid;place-items:center;min-height:34px;min-width:34px;border-radius:9px;border:1px solid #ffffff55;background:#fff2;color:inherit;text-decoration:none;font:inherit;cursor:pointer} .pati-dm-lightbox-actions a{padding:0 9px;font-size:12px} .pati-dm-lightbox-stage{overflow:auto;touch-action:pan-x pan-y pinch-zoom} .pati-dm-lightbox-stage img{max-width:100%;max-height:80dvh;object-fit:contain;transform-origin:center center;transition:transform .18s ease} @media(prefers-reduced-motion:reduce){.pati-dm-lightbox-stage img{transition:none}} /* Round native-style group crop, Instagram-placement repost action. */ .pati-group-photo-editor{justify-content:center;flex-direction:column;text-align:center;gap:10px} .pati-group-photo-editor>div{align-items:center;text-align:center;gap:6px} .pati-group-photo-preview{height:96px;width:96px;flex:0 0 96px;border:2px solid var(--pui-border,#d4d4dc);border-radius:50%;overflow:hidden} .pati-group-photo-preview img{height:100%;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%} .pati-group-photo-label{min-height:40px} .pati-group-crop-dialog{position:fixed;max-height:min(94dvh,850px);max-width:min(430px,calc(100vw - 18px));width:100%;padding:0;border:0;border-radius:22px;background:var(--pui-paper,#fff);color:var(--pui-text,#111);box-shadow:0 18px 80px #0007} .pati-group-crop-dialog::backdrop{background:#000b} .pati-group-crop-shell{padding:14px 18px 24px;display:grid;gap:15px} .pati-group-crop-shell header{display:flex;justify-content:space-between;align-items:center;gap:12px} .pati-group-crop-shell header strong{font-size:16px;font-weight:800} .pati-group-crop-shell header button{min-width:48px;min-height:40px;padding:7px 10px;border-radius:12px;border:1px solid var(--pui-border,#ccc);background:var(--pui-raised,#f6f6f8);color:var(--pui-text,#17191e);font-weight:700;cursor:pointer} .pati-group-crop-shell header [data-group-crop=save]{background:var(--pui-text,#161921);color:var(--pui-paper,#fff)} .pati-group-crop-shell p,.pati-group-crop-shell small{margin:0;text-align:center;color:var(--pui-secondary,#666);font-size:12px;line-height:1.5} .pati-group-crop-stage{display:grid;place-items:center;position:relative;width:min(78vw,360px);height:min(78vw,360px);aspect-ratio:1;margin:auto;border-radius:50%;overflow:hidden;background:#15161a;box-shadow:0 0 0 6px var(--pui-raised,#ececf0)} .pati-group-crop-stage canvas{display:block;width:100%;height:100%;border-radius:50%;touch-action:none;cursor:grab;user-select:none} .pati-group-crop-stage canvas:active{cursor:grabbing} .pati-group-crop-outline{position:absolute;inset:0;border:3px solid #fff7;border-radius:50%;pointer-events:none} .pati-group-crop-zoom{display:grid;gap:8px;font-size:13px;font-weight:700} .pati-group-crop-zoom input{width:100%;accent-color:var(--pui-text,#1a1a1a)} .pati-group-crop-status:empty{display:none} @media(max-width:540px){ .pati-group-crop-dialog{inset:0!important;margin:0!important;width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0} .pati-group-crop-shell{padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));min-height:100dvh;align-content:center;overflow:auto} } .pati-actionbar.pati-social-actions .pati-repost-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px} .pati-social-actions .pati-repost-btn .pati-repost-symbol,.pati-reel-repost .pati-repost-symbol{width:22px;height:22px} .pati-social-actions .pati-repost-btn.active,.pati-reel-repost.active{color:#18a58c!important} .pati-reel-rail .pati-reel-repost{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:48px} .pati-reel-repost .pati-reel-action-label{font-size:10px;text-align:center;max-width:70px;line-height:1.2} /* The creator workspace takes the entire viewport and respects safe-area insets. */ body.pati-insights-open{overflow:hidden!important} .pati-creator-dashboard{--pati-analytic-accent:#705de2;--pati-analytic-muted:var(--pui-border,#e8e9ed);position:fixed;inset:0;z-index:30000;background:var(--pui-page,#f7f7f9);color:var(--pui-text,#16171d);display:flex;flex-direction:column;width:100%;height:100dvh;overflow:hidden} .pati-creator-head{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 11px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--pui-border,#ddd);background:var(--pui-paper,#fff);flex:0 0 auto;min-height:66px} .pati-creator-head>button{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--pui-border,#ddd);background:var(--pui-raised,#f3f3f5);color:var(--pui-text,#111);font-size:23px;cursor:pointer} .pati-creator-head>div{display:flex;flex-direction:column;gap:2px} .pati-creator-head strong{font-size:16px;font-weight:850} .pati-creator-head small{font-size:11px;color:var(--pui-secondary,#5c606a)} .pati-creator-loading{margin:auto;padding:24px;font-size:14px} .pati-creator-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 18px calc(25px + env(safe-area-inset-bottom,0px))} .pati-creator-container{width:100%;max-width:1050px;margin:0 auto;display:grid;gap:26px} .pati-creator-intro{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px} .pati-creator-intro h1{font-size:clamp(24px,4vw,36px);margin:0 0 4px;font-weight:850;letter-spacing:-.035em} .pati-creator-intro p{margin:0;color:var(--pui-secondary,#6a6a72);font-size:13px} .pati-creator-ranges{display:flex;gap:5px;border-radius:13px;padding:4px;background:var(--pui-paper,#fff);border:1px solid var(--pui-border,#ddd)} .pati-creator-ranges button{min-height:36px;border:0;background:transparent;color:var(--pui-text,#16171d);border-radius:10px;padding:5px 13px;font-size:12px;font-weight:750;cursor:pointer} .pati-creator-ranges button[aria-pressed=true]{background:var(--pui-text,#1b1c23);color:var(--pui-paper,#fff)} .pati-insight-section{display:grid;gap:14px} .pati-insight-section>h2{font-size:18px;margin:0;font-weight:830;letter-spacing:-.02em} .pati-insight-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .pati-insight-kpi,.pati-stat-panel{background:var(--pui-paper,#fff);border:1px solid var(--pui-border,#e4e4e9);border-radius:18px;min-width:0;box-shadow:0 2px 12px #00000008} .pati-insight-kpi{display:grid;gap:7px;padding:18px} .pati-insight-kpi span{color:var(--pui-secondary,#5d626b);font-size:12px;font-weight:650} .pati-insight-kpi strong{font-size:clamp(21px,3vw,33px);font-weight:850;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .pati-insight-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .pati-stat-panel{display:flex;flex-direction:column;gap:16px;padding:18px;min-height:225px} .pati-stat-panel h3{font-size:14px;font-weight:800;margin:0} .pati-stat-graph{display:flex;align-items:stretch;gap:3px;width:100%;height:118px;border-bottom:1px solid var(--pui-border,#e0e0e6)} .pati-stat-column{height:100%;display:flex;flex:1 1 0;align-items:flex-end;min-width:3px} .pati-stat-bar{width:100%;min-height:2px;border-radius:4px 4px 0 0;background:var(--pati-analytic-accent)} .pati-stat-axis{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--pui-secondary,#6b6e77)} .pati-engagement-panel{align-items:center;text-align:center} .pati-engagement-panel h3{align-self:flex-start} .pati-stat-donut{display:grid;place-items:center;height:132px;width:132px;border-radius:50%;background:conic-gradient(var(--pati-analytic-accent) 0 var(--pati-stat-percent),var(--pati-analytic-muted) var(--pati-stat-percent) 100%)} .pati-stat-donut span{display:grid;place-items:center;background:var(--pui-paper,#fff);border-radius:50%;width:98px;height:98px;font-size:24px;font-weight:850;font-variant-numeric:tabular-nums} .pati-engagement-panel small{font-size:11px;color:var(--pui-secondary,#6b6e77);line-height:1.5} .pati-insight-subtitle{margin:-5px 0 0;color:var(--pui-secondary,#666);font-size:12px;line-height:1.5} .pati-insight-demographics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .pati-insight-breakdown{display:grid;gap:14px} .pati-stat-breakdown-row{display:grid;gap:6px} .pati-stat-breakdown-row>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:12px} .pati-stat-progress{height:8px;border-radius:8px;background:var(--pati-analytic-muted);overflow:hidden} .pati-stat-progress span{display:block;height:100%;border-radius:8px;background:var(--pati-analytic-accent)} .pati-creator-footnote{color:var(--pui-secondary,#727680);font-size:11px;line-height:1.6;padding-bottom:14px} .pati-gender-option small{font-size:11px;color:var(--pui-secondary,#6a6e77);line-height:1.45} html[data-pati-theme="dark"] .pati-creator-dashboard{--pati-analytic-accent:#a995ff} @media(max-width:650px){ .pati-creator-scroll{padding:18px 12px calc(28px + env(safe-area-inset-bottom,0px))} .pati-creator-container{gap:24px} .pati-insight-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .pati-insight-kpi{padding:15px 12px;gap:10px} .pati-insight-charts,.pati-insight-demographics{grid-template-columns:minmax(0,1fr);gap:10px} .pati-stat-panel{min-height:205px;padding:16px} .pati-creator-ranges{width:100%} .pati-creator-ranges button{flex:1;padding-inline:6px} } @media(prefers-reduced-motion:reduce){.pati-stat-bar,.pati-stat-donut{transition:none!important}} /* patiyiz-neutral-chat-profile-20261029.css */ /* Patiyiz — neutral WhatsApp-inspired messages and three profile tabs, 2026-10-29. This final layer overrides earlier lavender and saturated DM styling. */ html[data-pati-theme="light"]{ --p3-chat-background:#f8f8f6; --p3-chat-other:#fff; --p3-chat-other-text:#1b1d20; --p3-chat-mine:#dff5dc; --p3-chat-mine-text:#19231b; --p3-chat-accent:#25292a; --p3-chat-muted:#68716b; --p3-chat-border:#e2e6e3; --p3-chat-input:#fff; } html[data-pati-theme="dark"]{ --p3-chat-background:#17191b; --p3-chat-other:#2b2d30; --p3-chat-other-text:#f1f2f3; --p3-chat-mine:#294033; --p3-chat-mine-text:#f3faf3; --p3-chat-accent:#e5e8e7; --p3-chat-muted:#afb7b3; --p3-chat-border:#393e3c; --p3-chat-input:#262a28; } /* Keep every toolbar, chat surface, and text input within the mobile viewport. */ #main-content .pati-dm-layout{ box-sizing:border-box!important; min-width:0!important; width:100%!important; max-width:100%!important; overflow:visible!important; } #main-content .pati-dm-layout .chat-window{ background:var(--p3-chat-background)!important; border-color:var(--p3-chat-border)!important; overflow:hidden!important; } #main-content .pati-dm-layout .chat-people{ background:var(--p3-chat-background)!important; color:var(--p3-chat-other-text)!important; border-color:var(--p3-chat-border)!important; } #main-content .pati-dm-layout .pati-dm-list-row{ background:transparent!important; border-color:var(--p3-chat-border)!important; } #main-content .pati-dm-layout .pati-dm-list-row .chat-person{ background:transparent!important; color:var(--p3-chat-other-text)!important; min-width:0!important; } #main-content .pati-dm-layout .pati-dm-list-row .chat-person.active{ background:color-mix(in srgb,var(--p3-chat-other) 75%,var(--p3-chat-background))!important; } #main-content .pati-dm-layout .chat-window>header{ display:flex!important; align-items:center!important; flex-wrap:nowrap!important; gap:9px!important; min-height:62px!important; padding:8px 12px!important; border-color:var(--p3-chat-border)!important; } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar){ flex:1 1 0!important; min-width:0!important; overflow:hidden; } #main-content .pati-dm-layout .chat-window>header>span strong, #main-content .pati-dm-layout .chat-window>header>span small{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #main-content .pati-dm-layout .chat-window>header .pati-dm-extra-tools{ margin-inline-start:0!important; flex:0 0 auto!important; max-width:max-content; } #main-content .pati-dm-layout .pati-dm-extra-tools button{ border-radius:9px; font-size:12px; padding:7px 9px; background:transparent!important; border-color:var(--p3-chat-border)!important; color:var(--p3-chat-other-text)!important; } #main-content .pati-dm-layout .chat-window>header .chat-view-profile{ flex:0 0 auto; font-size:12px!important; background:transparent!important; border:1px solid var(--p3-chat-border)!important; color:var(--p3-chat-other-text)!important; } #main-content .pati-dm-layout .chat-history{ background:var(--p3-chat-background)!important; color:var(--p3-chat-other-text)!important; gap:7px!important; padding:16px 12px!important; overscroll-behavior:contain; } #main-content .pati-dm-layout .chat-history .bubble-chat{ max-width:min(82%,510px)!important; font-size:15px!important; padding:10px 13px!important; border:1px solid var(--p3-chat-border)!important; background:var(--p3-chat-other)!important; color:var(--p3-chat-other-text)!important; border-radius:18px 18px 18px 5px!important; box-shadow:0 1px 2px #00000008!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine{ background:var(--p3-chat-mine)!important; color:var(--p3-chat-mine-text)!important; border-color:transparent!important; border-radius:18px 18px 5px 18px!important; } #main-content .pati-dm-layout .chat-history .bubble-chat>small{ font-size:10px!important; font-variant-numeric:tabular-nums; color:inherit!important; opacity:.64!important; white-space:nowrap; } #main-content .pati-dm-layout .chat-history .pati-dm-time-divider time{ color:var(--p3-chat-muted)!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-image-message, #main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-image-open), #main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-audio){ background:transparent!important; border:0!important; box-shadow:none!important; padding:3px 0!important; color:var(--p3-chat-other-text)!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-image-message.mine, #main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-audio).mine{ background:transparent!important; border:0!important; } #main-content .pati-dm-layout .pati-dm-image-open{ display:block!important; padding:0!important; background:transparent!important; border:0!important; overflow:hidden; border-radius:12px!important; } #main-content .pati-dm-layout .pati-dm-image{ border:0!important; border-radius:12px!important; box-shadow:none!important; display:block!important; max-width:100%!important; max-height:410px; object-fit:contain; } #main-content .pati-dm-layout .pati-dm-audio{ display:block; width:min(270px,74vw); max-width:100%; padding:0; background:transparent!important; border:0!important; box-shadow:none!important; filter:grayscale(1); } #main-content .pati-dm-layout .chat-form{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:7px!important; width:100%!important; min-width:0!important; max-width:100%!important; padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important; box-sizing:border-box!important; background:var(--p3-chat-background)!important; border-color:var(--p3-chat-border)!important; position:relative!important; overflow:visible!important; } #main-content .pati-dm-layout .chat-form input[name="body"]{ min-width:0!important; width:100%!important; flex:1 1 0!important; border-radius:24px!important; background:var(--p3-chat-input)!important; color:var(--p3-chat-other-text)!important; } #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){ flex:0 0 42px!important; width:42px!important; min-width:42px!important; height:42px!important; min-height:42px!important; border-radius:50%!important; background:transparent!important; color:var(--p3-chat-other-text)!important; border:0!important; display:grid!important; place-items:center!important; } #main-content .pati-dm-layout .chat-form .primary-btn{ background:var(--p3-chat-accent)!important; color:var(--p3-chat-background)!important; } #main-content .pati-dm-layout .chat-form .pati-dm-attach{ position:relative; flex:0 0 40px; width:40px; min-width:40px; align-self:center; } #main-content .pati-dm-layout .pati-dm-attach>summary{ display:grid; place-items:center; border:1px solid var(--p3-chat-border); border-radius:50%; background:var(--p3-chat-other); color:var(--p3-chat-other-text); width:40px; height:40px; min-height:40px; font-size:27px; line-height:1; font-weight:400; cursor:pointer; list-style:none; user-select:none; } #main-content .pati-dm-layout .pati-dm-attach>summary::-webkit-details-marker{display:none} #main-content .pati-dm-layout .pati-dm-attach>summary::marker{content:""} #main-content .pati-dm-layout .pati-dm-attach[open]>summary{ background:var(--p3-chat-other); border-color:var(--p3-chat-muted); } #main-content .pati-dm-layout .pati-dm-attach-menu{ position:absolute; bottom:calc(100% + 12px); inset-inline-start:0; z-index:70; display:grid; grid-template-columns:repeat(4,44px); gap:6px; padding:9px; background:var(--p3-chat-other); border:1px solid var(--p3-chat-border); border-radius:16px; box-shadow:0 8px 28px #00000020; } #main-content .pati-dm-layout .pati-dm-attach-menu :is(button,label){ display:grid!important; place-items:center!important; box-sizing:border-box; flex:none!important; width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; border:1px solid var(--p3-chat-border)!important; border-radius:12px!important; background:var(--p3-chat-background)!important; color:var(--p3-chat-other-text)!important; cursor:pointer; } #main-content .pati-dm-layout .pati-dm-attach-menu .icon{width:22px;height:22px} #main-content .pati-dm-layout .pati-dm-attach:not([open]) .pati-dm-attach-menu{display:none!important} #main-content .pati-dm-layout .pati-dm-attach>summary:focus-visible, #main-content .pati-dm-layout .chat-form :is(input,button):focus-visible{ outline:2px solid var(--p3-chat-muted)!important; outline-offset:2px!important; } #main-content .pati-group-chat-window .chat-history{ background:var(--p3-chat-background)!important; } #main-content .pati-group-chat-window .pati-group-bubble, html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble{ background:var(--p3-chat-other)!important; color:var(--p3-chat-other-text)!important; } #main-content .pati-group-chat-window .pati-group-bubble.mine, html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble.mine{ background:var(--p3-chat-mine)!important; color:var(--p3-chat-mine-text)!important; } #main-content .pati-group-chat-window .pati-group-chat-form .primary-btn{ background:var(--p3-chat-accent)!important; color:var(--p3-chat-background)!important; } #main-content .pati-ig-profile .pati-ig-tabs{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; align-items:stretch; width:100%; overflow:visible!important; border-color:var(--p3-chat-border)!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ flex:1 1 auto!important; min-width:0!important; min-height:62px!important; color:#6b7279!important; border-radius:0!important; display:grid!important; place-items:center!important; background:transparent!important; } #main-content .pati-ig-profile .pati-ig-tabs>button.active, #main-content .pati-ig-profile .pati-ig-tabs>button[aria-selected="true"]{color:#15191c!important} html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button{color:#afb5bb!important} html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button.active{color:#fff!important} #main-content .pati-ig-profile .pati-ig-tabs>button.active::before{ background:currentColor!important; top:auto!important; bottom:0!important; width:62%!important; left:19%!important; height:3px!important; } #main-content .pati-ig-profile .pati-profile-tab-icon{ display:block; width:31px; height:31px; fill:currentColor; stroke-width:2.35; flex:0 0 auto; } #main-content .pati-ig-profile .pati-profile-reposted{ position:absolute; top:7px; right:7px; background:#000b; color:#fff; border-radius:50%; width:24px; height:24px; display:grid; place-items:center; font-size:17px; z-index:2; } #main-content .pati-ig-profile .pati-profile-pin{ background:#000b; color:#fff; font-size:14px; } @media(max-width:740px){ #main-content .pati-dm-layout.mobile-chat-open .chat-window{ display:flex!important; flex-direction:column!important; height:calc(100dvh - 177px)!important; min-height:260px!important; max-height:none!important; width:100%!important; } #main-content .pati-dm-layout .chat-window>header{ flex-wrap:nowrap!important; padding:8px 9px!important; gap:6px!important; } #main-content .pati-dm-layout .chat-window>header .chat-head-avatar{ flex:0 0 34px!important; width:34px!important; max-width:34px!important; } #main-content .pati-dm-layout .chat-window>header .pati-dm-extra-tools button{ min-height:33px; font-size:12px; padding:5px 6px; } #main-content .pati-dm-layout .chat-form{gap:5px!important;padding-inline:8px!important} #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){ flex-basis:37px!important;width:37px!important;min-width:37px!important; height:37px!important;min-height:37px!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{min-height:58px!important} } @media(max-width:355px){ #main-content .pati-dm-layout .chat-form .pati-dm-attach, #main-content .pati-dm-layout .pati-dm-attach>summary{ width:36px!important;min-width:36px!important;flex-basis:36px!important; height:36px!important;min-height:36px!important; } #main-content .pati-dm-layout .chat-form{gap:4px!important} #main-content .pati-dm-layout .chat-form :is(.pati-dm-mic,.primary-btn){ flex-basis:34px!important;width:34px!important;min-width:34px!important; } } @media(prefers-reduced-motion:reduce){ #main-content .pati-dm-layout .pati-dm-attach-menu{transition:none!important} } /* patiyiz-profile-chat-repair-20261029.css */ /* Patiyiz — five original profile sections + story ring + compact DM corrections. Loaded last so fixes cannot be overwritten by older chat themes. */ #main-content .pati-ig-profile .pati-ig-tabs{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:0!important; overflow:hidden!important; width:100%!important; border-top:1px solid var(--p3-chat-border,#e1e4e6)!important; border-bottom:1px solid var(--p3-chat-border,#e1e4e6)!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ display:grid!important; place-items:center!important; flex:1 1 20%!important; min-width:0!important; min-height:56px!important; padding:10px 0!important; color:#737a80!important; border:0!important; border-radius:0!important; background:transparent!important; } #main-content .pati-ig-profile .pati-ig-tabs>button.active, #main-content .pati-ig-profile .pati-ig-tabs>button[aria-selected="true"]{ color:#202428!important; } #main-content .pati-ig-profile .pati-ig-tabs>button.active::before{ top:auto!important;bottom:0!important;left:23%!important; width:54%!important;height:3px!important; border-radius:4px 4px 0 0; background:currentColor!important; } #main-content .pati-ig-profile .pati-ig-tabs>button .pati-profile-tab-icon{ display:block!important; width:27px!important; height:27px!important; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button{ color:#9ca4aa!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs>button.active{ color:#fff!important; } /* Match the home timeline story: a real ring only when a live story exists. */ #main-content .pati-ig-profile .pati-ig-summary .pati-ig-avatar.pati-profile-has-story{ padding:3px!important; border:0!important; background:linear-gradient(35deg,#ffb831 0%,#ff5a3d 35%,#fa225f 72%,#cc10b4 100%)!important; } #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view{ display:grid!important; place-items:center!important; width:100%!important; height:100%!important; min-width:0!important; padding:0!important; margin:0!important; border:2px solid var(--p3-chat-background,#fff)!important; background:var(--p3-chat-background,#fff)!important; color:inherit!important; border-radius:50%!important; overflow:hidden!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent; } #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view>.avatar{ display:grid!important; place-items:center!important; width:100%!important; height:100%!important; min-width:0!important; border:0!important; border-radius:50%!important; overflow:hidden!important; position:relative!important; background:#e8e8ec; } #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view>.avatar img{ display:block!important; width:100%!important;height:100%!important; max-width:100%!important; object-fit:cover!important; object-position:center!important; border-radius:50%!important; } #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view:focus-visible{ outline:3px solid #b84a77!important;outline-offset:3px!important; } /* The header uses separate fixed photo and flexible text columns. No overlapping avatars, handles, names or profile action on narrow phones. */ #main-content .pati-dm-layout .chat-window>header{ display:grid!important; grid-template-columns:40px 46px minmax(0,1fr) auto!important; grid-auto-flow:column!important; gap:8px!important; align-items:center!important; flex-wrap:nowrap!important; width:100%!important; min-width:0!important; padding:9px 10px!important; box-sizing:border-box!important; } #main-content .pati-dm-layout .chat-window>header>.mobile-chat-back{ grid-column:1!important; grid-row:1!important; width:38px!important; min-width:38px!important; padding:0!important; margin:0!important; justify-self:center!important; align-self:center!important; } #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar{ grid-column:2!important; grid-row:1!important; width:44px!important;min-width:44px!important;max-width:44px!important; height:44px!important; display:grid!important;place-items:center!important; padding:0!important;margin:0!important; overflow:visible!important; justify-self:center!important; } #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar>.pati-dm-story-trigger{ width:44px!important;min-width:44px!important;height:44px!important; box-sizing:border-box!important; } #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar>.avatar{ display:grid!important;place-items:center!important; width:42px!important;height:42px!important; min-width:42px!important;max-width:42px!important; border-radius:50%!important; overflow:hidden!important; } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar){ grid-column:3!important; grid-row:1!important; min-width:0!important; max-width:100%!important; width:auto!important; display:flex!important; flex-direction:column!important; gap:2px!important; justify-content:center!important; overflow:hidden!important; margin:0!important; padding:0!important; } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar)>strong, #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar)>small{ display:block!important; max-width:100%!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; margin:0!important; } #main-content .pati-dm-layout .chat-window>header>.chat-view-profile{ grid-column:4!important; grid-row:1!important; justify-self:end!important; width:auto!important; min-width:0!important; max-width:64px!important; border:1px solid var(--p3-chat-border)!important; border-radius:10px!important; padding:8px 9px!important; box-sizing:border-box!important; white-space:nowrap!important; font-size:12px!important; } #main-content .pati-dm-layout .pati-dm-attach-menu{ grid-template-columns:repeat(2,44px)!important; } #main-content .pati-dm-layout .pati-dm-attach-menu button, #main-content .pati-dm-layout .pati-dm-attach-menu label{ border-radius:12px!important; } /* Voice notes: sender's actual avatar, clear native playback controls and timestamps. */ #main-content .pati-dm-layout .chat-history .bubble-chat:has(.pati-dm-voice-card), #main-content .pati-dm-layout .chat-history .bubble-chat.mine:has(.pati-dm-voice-card){ width:min(86%,370px)!important; max-width:min(86%,370px)!important; padding:2px 0!important; border:0!important; background:transparent!important; box-shadow:none!important; } #main-content .pati-dm-layout .pati-dm-voice-card{ display:flex; align-items:center; gap:11px; min-width:0; padding:11px 12px; border-radius:16px; border:1px solid var(--p3-chat-border); background:var(--p3-chat-other); box-sizing:border-box; } #main-content .pati-dm-layout .bubble-chat.mine .pati-dm-voice-card{ background:var(--p3-chat-mine); border-color:transparent; } #main-content .pati-dm-layout .pati-dm-voice-avatar{ display:grid!important; place-items:center!important; flex:0 0 42px!important; width:42px!important;height:42px!important; min-width:42px!important; border-radius:50%; overflow:hidden; background:color-mix(in srgb,var(--p3-chat-border) 75%,transparent); } #main-content .pati-dm-layout .pati-dm-voice-avatar .avatar{ width:100%!important;height:100%!important; min-width:0!important; border-radius:50%!important; overflow:hidden; } #main-content .pati-dm-layout .pati-dm-voice-avatar .avatar img{ width:100%!important;height:100%!important; object-fit:cover!important;border-radius:50%!important; } #main-content .pati-dm-layout .pati-dm-voice-main{ display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:5px; } #main-content .pati-dm-layout .pati-dm-voice-label{ display:block;min-width:0; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; font-size:11px;font-weight:700;opacity:.8; } #main-content .pati-dm-layout .pati-dm-voice-main .pati-dm-audio{ display:block!important; filter:none!important; width:100%!important; min-width:0!important; max-width:100%!important; height:38px!important; background:transparent!important; } /* RPC errors should leave an obvious way out instead of a stuck spinner. */ .pati-creator-dashboard .pati-creator-failure{ display:flex;flex-direction:column;gap:12px; align-items:center;justify-content:center;text-align:center; padding:25px 20px;margin:auto;max-width:420px; } .pati-creator-dashboard .pati-creator-failure strong{ font-size:20px;font-weight:800;color:var(--pui-text,#222); } .pati-creator-dashboard .pati-creator-failure p{ font-size:14px;line-height:1.55;color:var(--pui-secondary,#777);margin:0; } .pati-creator-dashboard .pati-creator-failure button{ padding:11px 20px;border-radius:11px; background:var(--pui-text,#222);color:var(--pui-paper,#fff); border:0;cursor:pointer;font-weight:750; } @media(max-width:740px){ #main-content .pati-dm-layout .chat-window>header{ grid-template-columns:31px 41px minmax(0,1fr) auto!important; gap:6px!important; padding:8px!important; } #main-content .pati-dm-layout .chat-window>header>.mobile-chat-back{ width:30px!important;min-width:30px!important; } #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar, #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar>.pati-dm-story-trigger{ width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important; } #main-content .pati-dm-layout .chat-window>header>.chat-view-profile{ max-width:56px!important;padding:7px 6px!important;font-size:11px!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{min-height:54px!important} #main-content .pati-ig-profile .pati-ig-tabs>button .pati-profile-tab-icon{ width:24px!important;height:24px!important; } } @media(max-width:355px){ #main-content .pati-dm-layout .chat-window>header{ grid-template-columns:27px 36px minmax(0,1fr) auto!important; gap:4px!important;padding-inline:5px!important; } #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar, #main-content .pati-dm-layout .chat-window>header>.chat-head-avatar>.pati-dm-story-trigger{ width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important; } #main-content .pati-dm-layout .chat-window>header>.chat-view-profile{ font-size:10px!important;padding:6px 4px!important;max-width:47px!important; } } /* Group chats have an optional fifth owner action: keep it in one row, not a grid overflow. */ #main-content .pati-dm-layout .chat-window.pati-group-chat-window>header.pati-group-chat-header{ display:flex!important; flex-wrap:nowrap!important; grid-template-columns:none!important; grid-auto-flow:row!important; align-items:center!important; gap:7px!important; min-width:0!important; } #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-avatar{ display:grid!important;place-items:center!important; flex:0 0 40px!important; width:40px!important;height:40px!important; min-width:40px!important;max-width:40px!important; margin:0!important; } #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-chat-title{ flex:1 1 0!important;min-width:0!important;max-width:100%!important; display:flex!important;flex-direction:column!important; overflow:hidden!important; } #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-chat-title strong, #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-chat-title small{ display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; width:100%;min-width:0; } #main-content .pati-dm-layout .pati-group-chat-window>header>.chat-view-profile, #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-delete-top{ display:grid!important;place-items:center!important;flex:0 0 auto!important; margin:0!important;grid-column:auto!important;grid-row:auto!important; } #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-delete-top{ width:35px!important;height:35px!important;min-width:35px!important;padding:6px!important; } @media(max-width:380px){ #main-content .pati-dm-layout .chat-window.pati-group-chat-window>header.pati-group-chat-header{gap:4px!important;padding-inline:5px!important} #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-avatar{flex-basis:34px!important;width:34px!important;min-width:34px!important;height:34px!important} #main-content .pati-dm-layout .pati-group-chat-window>header>.pati-group-delete-top{width:30px!important;min-width:30px!important} } /* 2026-10-29 — Twitter/X-style timeline for text posts on user profiles. Other five profile tabs keep their original full-bleed visual grids. */ #main-content .pati-ig-profile .pati-profile-text-feed{ display:flex!important; flex-direction:column!important; gap:0!important; width:100%!important; min-width:0!important; padding:0!important; margin:0!important; background:var(--pui-paper,#fff)!important; border:0!important; border-radius:0!important; color:var(--pui-text,#202127)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-item{ display:block!important; position:relative; width:100%!important; min-width:0!important; padding:0!important; margin:0!important; box-sizing:border-box!important; border-bottom:1px solid var(--pui-border,#e7e8eb)!important; background:var(--pui-paper,#fff)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card.pati-feed-text-only{ display:block!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; color:var(--pui-text,#202127)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-only .pati-feed-card-header{ min-height:52px!important; display:flex!important; align-items:center!important; background:transparent!important; padding:13px 16px 5px!important; color:var(--pui-text,#202127)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-only .pati-feed-card-header .avatar{ width:42px!important;height:42px!important; flex:0 0 42px!important;min-width:42px!important; border-radius:50%!important;overflow:hidden!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header .pati-profile-row{ display:flex!important; align-items:center!important; gap:10px!important; min-width:0!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header .pati-profile-row>div, #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header .pati-profile-row>span{ min-width:0!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header strong{ color:var(--pui-text,#202127)!important; font-weight:800!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header small{ color:var(--pui-secondary,#59616b)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-content{ display:block!important; width:100%!important; min-height:0!important; padding:3px 16px 11px 68px!important; background:transparent!important; box-sizing:border-box!important; border:0!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-content .pati-post-caption{ display:block!important; margin:0!important; font-size:clamp(15px,2vw,16px)!important; line-height:1.52!important; font-weight:400!important; letter-spacing:0!important; white-space:pre-wrap!important; overflow-wrap:anywhere!important; color:var(--pui-text,#202127)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-content .pati-hashtag, #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header .pati-profile-row small{ color:var(--pui-link,#2284c4)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-social-actions{ border:0!important; min-height:40px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:5px!important; padding:0 16px 2px 68px!important; background:transparent!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-post-details{ padding:0 16px 1px 68px!important; gap:9px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; background:transparent!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-post-like-summary{ display:none!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-post-time{ font-size:11px!important; color:var(--pui-secondary,#68707b)!important; opacity:.9!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-pet{ padding-inline:68px 16px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-open{ display:inline-flex!important; align-items:center!important; gap:6px!important; width:auto!important; min-height:28px!important; max-width:calc(100% - 84px)!important; margin:0 16px 12px 68px!important; padding:4px 2px!important; background:transparent!important; border:0!important; border-radius:0!important; font-size:12px!important; font-weight:650!important; color:var(--pui-secondary,#65707a)!important; cursor:pointer; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-open .icon{ width:13px!important;height:13px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-open:hover{ color:var(--pui-text,#202127)!important; text-decoration:underline; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-pinned{ padding:12px 16px 0 68px!important; font-size:11px!important; font-weight:750!important; color:var(--pui-secondary,#5b646f)!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-ig-empty{ display:block!important; width:100%!important; box-sizing:border-box!important; padding:45px 18px!important; grid-column:auto!important; text-align:center!important; color:var(--pui-secondary,#626975)!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-item{ background:var(--pui-paper,#1c1d22)!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-content, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed .pati-social-actions{ background:transparent!important; } @media(max-width:740px){ #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-card-header{ padding:12px 12px 4px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-only .pati-feed-card-header .avatar{ width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-text-content{ padding:4px 12px 9px 62px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-social-actions{ padding:0 12px 0 62px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-post-details{ padding:0 12px 0 62px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-open{ margin:1px 12px 10px 62px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-profile-text-pinned{ padding:10px 12px 0 62px!important; } #main-content .pati-ig-profile .pati-profile-text-feed .pati-feed-pet{ padding-inline:62px 12px!important; } } @media(prefers-reduced-motion:reduce){ #main-content .pati-ig-profile .pati-profile-text-feed *{scroll-behavior:auto!important} } /* patiyiz-story-seen-dark-final-20261029.css */ /* Patiyiz final color/seen layer — 2026-10-29. Loaded last, dark surfaces stay dark and texts legible. Deliberately do not recolor media, full-screen stories/Reels, videos or user photos. */ /* Viewed stories are still available during the full 24h lifecycle. */ #main-content .stories-strip .story-person.has-unseen-story>.story-avatar, #main-content .stories-strip .story-person.story-own>.story-own-photo.has-story{ border:3px solid transparent!important; background:linear-gradient(var(--pati-story-interior,#fff),var(--pati-story-interior,#fff)) padding-box, linear-gradient(35deg,#ffb831,#ff5a3d,#fa225f,#cc10b4) border-box!important; border-radius:50%!important; box-sizing:border-box!important; } #main-content .stories-strip .story-person.has-viewed-story>.story-avatar, #main-content .stories-strip .story-person.story-own>.story-own-photo.has-viewed-story{ border:2px solid #a6a9af!important; background:transparent!important; box-sizing:border-box!important; } #main-content .stories-strip .story-person.has-viewed-story{opacity:.83} #main-content .stories-strip .story-person.has-viewed-story .story-avatar img, #main-content .stories-strip .story-own-photo.has-viewed-story img{opacity:1!important;filter:none!important} #main-content .pati-ig-profile .pati-ig-avatar.pati-profile-story-seen{ background:transparent!important; border:2px solid #a6a9af!important; box-sizing:border-box!important; padding:3px!important; } #main-content .pati-dm-layout .pati-dm-story-trigger.is-seen{ background:#93979f!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .pati-dm-story-trigger.is-seen{background:#626771!important} html[data-pati-theme="dark"]{--pati-story-interior:#1c1d23} html[data-pati-theme="light"]{--pati-story-interior:#fff} /* Dark mode: shared semantic palette, including the late Patiyiz UI sheets. */ html[data-pati-theme="dark"]{ color-scheme:dark; --pui-paper:#1a1c21; --pui-bg:#101115; --pui-raised:#24262e; --pui-input:#292b33; --pui-border:#454853; --pui-text:#f7f8fb; --pui-secondary:#c9cbd6; --pui-link:#d2dcff; --pui-shadow:0 6px 18px #0005; --pui-active-text:#fff; --pati-story-interior:#1a1c21; --patix-page:#101115; --patix-panel:#1a1c21; --patix-panel-raised:#24262e; --patix-field:#292b33; --patix-line:#454853; --patix-strong:#f7f8fb; --patix-muted:#d2d3db; --pati-audit-page:#101115; --pati-audit-card:#1a1c21; --pati-audit-raised:#24262e; --pati-audit-text:#f7f8fb; --pati-audit-sub:#c9cbd6; --pati-audit-border:#454853; --pati-audit-control:#292b33; --bg:#101115;--paper:#1a1c21;--ink:#f7f8fb;--ink-soft:#d3d5dd; --border:#454853;--muted:#c9cbd6;--pati-bg:#101115;--pati-card:#1a1c21; --pati-ink:#f7f8fb;--pati-muted:#c9cbd6; } html[data-pati-theme="dark"] :is(body,#app-root,#app-root .app-shell,#app-root .main,#main-content){ background:#101115!important;color:#f7f8fb!important; } html[data-pati-theme="dark"] #app-root :is( .sidebar,.right-rail,.mobile-header,.mobile-bottom,.mobile-nav ){ background:#1a1c21!important;color:#f7f8fb!important;border-color:#454853!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-ig-summary,.pati-ig-highlights,.pati-ig-tabs, .stories-section,.pati-home-feed-tabs,.pati-feed-posts,.pati-feed-card,.pati-feed-card-header, .pati-feed-text-content,.pati-post-details,.pati-social-actions, .pati-settings-list,.pati-settings-list section,.pati-theme-card, .pati-pets-page,.pati-own-pets,.pati-own-pets-list article,.pati-pet-hub, .pati-ref-hub,.pati-ref-care,.pati-care-simple,.care-v2,.wellness-v2, .p4-hub,.p4-health,.p4-shop,.pati-health-home,.pati-shop-v2, .pati-knowledge-home,.kb-v2,.kb-v2-card,.pati-ref-kb-home, .pati-ref-academy-home,.pati-ref-academy-list,.pati-edu-v2, .pati-edu-path-home,.pati-edu-path-list,.edu-v2-detail, .pati-community-head,.pati-community-card,.pati-question-list, .pati-saved-posts,.pati-saved-heading,.pati-notifications-simple, .pati-explore-media-screen,.pati-search-screen,.pati-detail-toolbar, .pati-profile-text-feed,.pati-profile-text-item ){ background-color:#1a1c21!important; color:#f7f8fb!important; border-color:#454853!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-profile,.pati-settings-list,.pati-pets-page,.pati-own-pets,.pati-pet-hub, .pati-ref-hub,.pati-care-simple,.care-v2,.wellness-v2, .p4-hub,.p4-health,.p4-shop,.pati-shop-v2,.pati-knowledge-home, .pati-ref-kb-home,.kb-v2,.pati-ref-academy-home,.pati-ref-academy-list, .pati-edu-path-home,.pati-edu-path-list,.pati-explore-media-screen,.pati-search-screen ){ background-color:#101115!important; } html[data-pati-theme="dark"] #main-content :is( .pati-card,.pati-ig-actions,.pati-ig-bio,.pati-hub-hero,.pati-care-card, .pati-ref-care-task,.pati-ref-pet-tile,.pati-health-pet,.pati-health-next, .pati-edu-step,.pati-edu-quiz,.pati-edu-lesson-body,.pati-edu-path-item, .pati-ref-academy-topic,.pati-edu-v2-card,.edu-v2-card,.kb-v2-article, .pati-shop-card,.pati-shop-item,.pati-reward-card,.pati-coin-card, .pati-community-question,.pati-community-reply,.pati-community-card, .pati-search-field,.pati-search-results,.pati-search-user, .pati-following-empty,.pati-notification-item,.pati-settings-item, .pati-detail-toolbar,.pati-following-state,.pati-dm-top ){ background-color:#24262e!important;color:#f7f8fb!important; border-color:#454853!important; } html[data-pati-theme="dark"] #main-content :is( h1,h2,h3,h4,h5,h6,.page-title,.pati-ig-name,.pati-ig-handle, .pati-ig-stats b,.pati-post-caption,.pati-feed-pet, .pati-profile-text-feed .pati-post-caption,.pati-post-like-summary, .pati-story-person-name,.pati-menu-title ){ color:#f7f8fb!important; text-shadow:none; } html[data-pati-theme="dark"] #main-content :is( p,small,label,.muted,.meta,.pati-post-time,.pati-ig-bio, .pati-ig-stats small,.pati-profile-text-feed .pati-post-time, .pati-settings-description,.pati-story-person-label ){ color:#d0d2dd!important; } html[data-pati-theme="dark"] #main-content :is( .pati-feed-card,.pati-post-details,.pati-social-actions, .pati-community-card,.pati-ig-profile,.pati-pets-page ) :is(strong,span:not(.pati-heart-burst),time){ color:inherit; } html[data-pati-theme="dark"] #main-content :is( input:not([type="checkbox"]):not([type="radio"]),textarea,select, .pati-search-field input,.pati-collab-search-results ){ color-scheme:dark!important; background:#292b33!important; color:#f7f8fb!important; border-color:#555966!important; } html[data-pati-theme="dark"] #main-content :is(input,textarea)::placeholder{ color:#bfc2ce!important;opacity:1!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-actions button,.pati-page-back,.pati-theme-options button, .pati-list-filter button,.pati-explore-sort button,.pati-shop-filter button, .pati-dm-filters button,.pati-story-quick-buttons button ){ background:#2b2e37!important;color:#f7f8fb!important; border-color:#50535f!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-tabs button.active,.pati-dm-filters button.active,.pati-theme-options button.active, .pati-explore-sort button.active,.pati-shop-filter button.active, .pati-home-feed-tabs button.active ){ background:#373a45!important;color:#fff!important;border-color:#6a6e7c!important; } html[data-pati-theme="dark"] #main-content :is( .pati-ig-tabs button.active,.pati-dm-filters button.active,.pati-theme-options button.active, .pati-explore-sort button.active,.pati-shop-filter button.active ) :is(span,small,strong,svg,.icon){ color:#fff!important;stroke:currentColor!important; } html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is( .modal,.modal-content,.modal-header,.modal-footer,.auth-card, .pati-feature-group,.pati-features-list,.pati-menu-notifications-list, .pati-feature-notifications,.pati-menu-tone-blue,.pati-menu-tone-green, .pati-menu-tone-orange,.pati-menu-tone-purple,.pati-feature-editor, .pati-community-form-intro,.pati-pet-edit-modal,.pati-question-fullscreen, .pati-links-editor,.pati-profile-editor,.pati-field,.pati-dm-reaction-picker, .pati-dm-message-actions ){ background:#1a1c21!important;color:#f7f8fb!important; border-color:#454853!important; } html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is( .pati-mobile-menu-item,.pati-menu-notifications-top,.pati-menu-notifications-list, .pati-feature-add-pet,.pati-edit-avatar,.pati-pet-photo-select, .pati-community-form-note,.pati-upload-options,.pati-media-gallery, .pati-collab-selected,.pati-collab-search-results,.pati-collab-option, .pati-user-option,.pati-dm-image-select ){ background:#24262e!important;color:#f7f8fb!important; border-color:#454853!important; } html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is( h1,h2,h3,h4,strong,label,.pati-menu-title,.modal-title, .pati-mobile-menu-item>span,.pati-menu-notifications-top h3 ){color:#f7f8fb!important} html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is( p,small,.muted,.meta,.pati-feature-intro,.pati-community-form-note ){color:#d0d2dd!important} html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is( input:not([type="checkbox"]):not([type="radio"]),select,textarea ){ color-scheme:dark!important;background:#292b33!important; color:#f7f8fb!important;border-color:#545865!important; } html[data-pati-theme="dark"] :is(#modal-root,#tools-form,#auth-root) :is(input,textarea)::placeholder{color:#bec1cf!important} html[data-pati-theme="dark"] #tools-form .pati-mobile-menu-item :is(span,strong,small,svg,.icon){ color:#f7f8fb!important;stroke:currentColor!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout :is( .chat-people,.chat-window,.chat-history,.chat-form,.pati-dm-list-row,.pati-dm-filters ){background:#1a1c21!important;color:#f7f8fb!important;border-color:#454853!important} html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-history{background:#14161a!important} html[data-pati-theme="dark"] #main-content .pati-dm-layout .bubble-chat:not(.mine){ background:#292b33!important;color:#f7f8fb!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .bubble-chat.mine{ background:#284435!important;color:#f7f8fb!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-window>header{ background:#1a1c21!important;color:#f7f8fb!important;border-color:#454853!important; } /* Preserve native player artwork and embedded media across themes. */ html[data-pati-theme="dark"] #main-content :is( .pati-reel-item,.pati-reel-rail,.pati-reel-author,.pati-video-frame, .pati-carousel,.pati-carousel-slide,.pati-photo,.pati-profile-tile, .pati-pet-photo,.pati-profile-view-count ) :is(img,video,canvas){filter:none!important;opacity:1!important} html[data-pati-theme="dark"] #story-overlay, html[data-pati-theme="dark"] .story-player{background:#08090b!important;color:#fff!important} @media(max-width:740px){ html[data-pati-theme="dark"] #main-content .stories-section{ border-color:#30333b!important; } } /* Higher-specificity repairs for old hardcoded white profile and feed layouts. */ html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-grid, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-summary, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-highlights, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-feed, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-text-item, html[data-pati-theme="dark"] #main-content .pati-feed-posts>.pati-feed-card, html[data-pati-theme="dark"] #main-content .stories-section .stories-strip, html[data-pati-theme="dark"] #main-content .pati-pets-page .pati-pets-grid, html[data-pati-theme="dark"] #main-content .pati-saved-posts .pati-ig-grid{ background:#1a1c21!important;color:#f7f8fb!important;border-color:#454853!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-tile:not(:has(img,video)){ background:#292b33!important;color:#f7f8fb!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-grid .pati-ig-empty{ background:#1a1c21!important;color:#d0d2dd!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-summary :is(strong,span,small,p){ color:#f7f8fb!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats small, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-bio{ color:#d0d2dd!important; } /* patiyiz-creator-crop-20261029.css */ /* Patiyiz full-screen crop and private creator statistics — 2026-10-29 */ .pati-full-crop-dialog{ position:fixed!important;inset:0!important;z-index:2147483000!important; width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:#f7f7f8!important;color:#111215!important;box-sizing:border-box!important; } .pati-full-crop-dialog::backdrop{background:#000b!important} .pati-full-crop-shell{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden} .pati-full-crop-head{ min-height:64px;padding:calc(11px + env(safe-area-inset-top,0px)) clamp(12px,4vw,26px) 12px; display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box; } .pati-full-crop-head>strong{font-size:clamp(14px,4vw,18px);font-weight:850;text-align:center;white-space:nowrap} .pati-full-crop-head button{ padding:9px 15px;min-height:43px;border:1px solid #d8d8dc;background:#fff; color:#141518;border-radius:99px;font-size:14px;font-weight:760;cursor:pointer; } .pati-full-crop-head .pati-crop-done{background:#ffd600!important;border-color:#f5c900!important;color:#111!important;min-width:79px} .pati-full-crop-stage{ flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center; background:#e8e8ec;position:relative;padding:12px;box-sizing:border-box;overflow:hidden; } .pati-full-crop-stage canvas{ display:block;max-width:100%;max-height:100%;width:auto;height:auto; aspect-ratio:var(--pati-crop-aspect,4/5); object-fit:contain;box-shadow:0 0 0 1px #1116;touch-action:none;cursor:grab; } .pati-full-crop-stage canvas:active{cursor:grabbing} .pati-full-crop-guide{pointer-events:none;position:absolute;inset:0} .pati-full-crop-controls{ flex:0 0 auto;display:flex;flex-direction:column;gap:11px;align-items:stretch; max-height:42dvh;overflow-y:auto;padding:14px clamp(14px,4vw,26px) max(16px,env(safe-area-inset-bottom,0px)); box-sizing:border-box; } .pati-crop-top-controls{display:flex;align-items:center;justify-content:center;gap:13px} .pati-crop-top-controls button{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;min-width:77px;min-height:58px;background:#fff;color:#17191d; border:1px solid #dbdce2;border-radius:17px;font-size:25px;cursor:pointer; } .pati-crop-top-controls button small{font-size:10px;color:#484950;font-weight:750} .pati-full-crop-counter{font-size:13px;color:#6b6b74;min-width:60px;text-align:center} .pati-crop-ratios{display:flex;gap:7px;overflow-x:auto;padding:2px;scrollbar-width:none} .pati-crop-ratios button{ border:1px solid #d3d4da;background:#fff;border-radius:12px;color:#30313a; padding:10px 15px;white-space:nowrap;flex:1 0 auto;min-height:43px;cursor:pointer; font-size:12px;font-weight:750; } .pati-crop-ratios button.active{background:#202127;color:#fff;border-color:#202127} .pati-full-crop-zoom{display:grid;grid-template-columns:90px minmax(0,1fr);gap:13px;align-items:center; color:#484950;font-size:12px;font-weight:750} .pati-full-crop-zoom input{width:100%;accent-color:#272830} .pati-crop-pagination{display:flex;justify-content:space-between;gap:12px} .pati-crop-pagination button{background:#fff;border:1px solid #d9dbe0;border-radius:12px;min-height:42px; flex:1;color:#1b1c20;font-weight:750} .pati-full-crop-controls>p{margin:0;text-align:center;font-size:11px;color:#696b75;line-height:1.4} .pati-crop-status:empty{display:none} #post-form .pati-media-controls .pati-ratio-options, #post-form .pati-media-controls .pati-crop-preview, #post-form .pati-media-controls>label{display:none!important} #post-form .pati-media-controls{padding:7px 0;min-width:0} #post-form .pati-inline-crop-toggle{ display:flex;justify-content:center;align-items:center;width:100%; min-height:46px;border:1px solid var(--pui-border,#ccc);border-radius:12px; background:var(--pui-raised,#f6f6f7);color:var(--pui-text,#222); font-size:14px;font-weight:800;cursor:pointer; } html[data-pati-theme="dark"] .pati-full-crop-dialog{background:#111217!important;color:#f7f7fa!important} html[data-pati-theme="dark"] .pati-full-crop-stage{background:#07080b!important} html[data-pati-theme="dark"] .pati-full-crop-head button, html[data-pati-theme="dark"] .pati-crop-top-controls button, html[data-pati-theme="dark"] .pati-crop-pagination button, html[data-pati-theme="dark"] .pati-crop-ratios button{ background:#262730;color:#f8f8fb;border-color:#474955; } html[data-pati-theme="dark"] .pati-crop-ratios button.active{background:#f2f3f6!important;color:#17181c!important} html[data-pati-theme="dark"] .pati-full-crop-counter, html[data-pati-theme="dark"] .pati-full-crop-zoom, html[data-pati-theme="dark"] .pati-full-crop-controls>p, html[data-pati-theme="dark"] .pati-crop-top-controls button small{color:#c7c9d5} html[data-pati-theme="dark"] .pati-full-crop-head .pati-crop-done{background:#ffd600!important;color:#111!important} /* Creator stats are always full-screen and only rendered for the current profile owner. */ body.pati-insights-open{overflow:hidden!important} .pati-creator-dashboard{ position:fixed!important;inset:0!important;z-index:100050!important; width:100vw!important;height:100dvh!important; background:var(--pui-paper,#fff)!important;color:var(--pui-text,#17191d)!important; display:flex!important;flex-direction:column!important;overflow:hidden!important; box-sizing:border-box!important; } .pati-creator-dashboard .pati-creator-head{ flex:0 0 auto;display:grid;grid-template-columns:44px 1fr auto;align-items:center; gap:10px;min-height:69px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 9px; border-bottom:1px solid var(--pui-border,#e5e5e8); box-sizing:border-box;background:var(--pui-paper,#fff); } .pati-creator-dashboard .pati-creator-head button{ width:43px;height:43px;border:0;background:transparent;color:var(--pui-text,#222); font-size:28px;cursor:pointer;border-radius:13px; } .pati-creator-dashboard .pati-creator-head strong{font-size:clamp(16px,4.3vw,21px);font-weight:850;text-align:center} .pati-creator-private{color:var(--pui-secondary,#71747c);font-size:11px;white-space:nowrap} .pati-creator-dashboard .pati-creator-scroll{ overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;flex:1;min-height:0; -webkit-overflow-scrolling:touch;background:var(--pui-paper,#fff); } .pati-creator-dashboard .pati-creator-container{ width:100%;max-width:880px;min-width:0;margin:0 auto; padding:16px 16px max(50px,env(safe-area-inset-bottom,0px));box-sizing:border-box; } .pati-creator-dashboard .pati-creator-ranges{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px} .pati-creator-dashboard .pati-creator-ranges button{ flex:1;min-width:85px;min-height:39px;border:1px solid var(--pui-border,#ddd); background:var(--pui-raised,#f2f2f4);color:var(--pui-text,#222); border-radius:99px;font-size:12px;font-weight:780;white-space:nowrap; } .pati-creator-dashboard .pati-creator-ranges button[aria-pressed="true"]{ background:var(--pui-text,#17191d)!important;color:var(--pui-paper,#fff)!important;border-color:transparent!important; } .pati-creator-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--pui-border,#eee);gap:0;margin:0 -16px 22px} .pati-creator-tabs button{ padding:13px 4px 14px;border:0;border-bottom:3px solid transparent; background:transparent;color:var(--pui-secondary,#696b71);font-size:clamp(12px,3vw,15px);font-weight:750;cursor:pointer; white-space:nowrap; } .pati-creator-tabs button[aria-selected="true"]{color:var(--pui-text,#111);border-color:currentColor} .pati-creator-overview h2{font-size:22px;line-height:1.2;margin:5px 0 5px} .pati-creator-overview>p{margin:0 0 17px;color:var(--pui-secondary,#70747c);font-size:13px;line-height:1.5} .pati-creator-kpis,.pati-creator-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 22px} .pati-creator-stat,.pati-creator-detail-grid article{ text-align:left;position:relative;min-width:0;display:flex;flex-direction:column;gap:9px; border:1px solid var(--pui-border,#e5e5eb);border-radius:15px; padding:16px 14px;background:var(--pui-raised,#f7f7f8);color:var(--pui-text,#17191d); box-sizing:border-box; } .pati-creator-stat{min-height:134px;cursor:pointer} .pati-creator-stat>span:first-child{font-size:12px;font-weight:700;color:var(--pui-secondary,#6d7078)} .pati-creator-stat>strong,.pati-creator-detail-grid strong{font-size:clamp(22px,5vw,31px);font-variant-numeric:tabular-nums;font-weight:850} .pati-creator-stat>small,.pati-creator-detail-grid small{font-size:11px;color:var(--pui-secondary,#737580);line-height:1.4} .pati-creator-stat-arrow{position:absolute;right:13px;bottom:10px;font-size:22px;opacity:.65} .pati-creator-change{font-size:12px;font-weight:850} .pati-creator-change.increase,.pati-profile-insights-arrow.increase{color:#149752!important} .pati-creator-change.decrease,.pati-profile-insights-arrow.decrease{color:#d34949!important} .pati-creator-change.neutral,.pati-profile-insights-arrow.neutral{color:var(--pui-secondary,#73737a)!important} .pati-creator-profile-moves,.pati-creator-chart-card,.pati-creator-breakdown{ border-top:1px solid var(--pui-border,#e6e6e9);padding:18px 0 9px;margin:9px 0 15px; } .pati-creator-profile-moves h3,.pati-creator-chart-card h3,.pati-creator-breakdown h3{font-size:17px;margin:0 0 15px} .pati-creator-profile-moves button,.pati-creator-top-post,.pati-creator-visitor,.pati-creator-visitors-link{ display:flex;align-items:center;gap:10px;min-height:62px;width:100%;min-width:0; border:0;border-bottom:1px solid var(--pui-border,#e8e9ec);background:transparent; color:var(--pui-text,#17191d);padding:13px 4px;font-size:14px;text-align:left;cursor:pointer; } .pati-creator-profile-moves button span:first-child,.pati-creator-top-post>span{flex:1;min-width:0} .pati-creator-profile-moves button strong,.pati-creator-top-post strong{font-size:15px} .pati-creator-profile-moves button span:last-child,.pati-creator-visitors-link span{font-size:22px} .pati-creator-chart-card .pati-stat-graph{display:flex;align-items:end;gap:3px;min-height:136px;padding:10px 0 0} .pati-creator-chart-card .pati-stat-column{flex:1;min-width:2px;display:flex;align-items:end;height:128px} .pati-creator-chart-card .pati-stat-bar{width:100%;min-height:3px;background:#bd00b1;border-radius:4px 4px 0 0} .pati-creator-chart-card .pati-stat-axis{display:flex;justify-content:space-between;color:var(--pui-secondary,#777);font-size:10px;padding-top:8px} .pati-creator-detail-head h2{font-size:22px;margin:20px 0 7px} .pati-creator-detail-head p{font-size:13px;line-height:1.5;color:var(--pui-secondary,#73737a)} .pati-creator-detail-head button{border:0;background:transparent;color:var(--pui-text,#17191d);font-size:13px;font-weight:750;padding:8px 0} .pati-creator-visitor .avatar{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:50%;overflow:hidden} .pati-creator-visitor>span{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0} .pati-creator-visitor>span strong,.pati-creator-visitor>span small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pati-creator-visitor time{font-size:11px;color:var(--pui-secondary,#777)} .pati-creator-visitor-total{font-size:17px;font-weight:850;padding:15px 0} .pati-creator-top-post small{color:var(--pui-secondary,#777);font-size:11px} .pati-creator-top-post b{margin-left:auto} .pati-creator-breakdown-item{margin:13px 0} .pati-creator-breakdown-item>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:13px} .pati-creator-bartrack{height:10px;border-radius:99px;background:var(--pui-border,#e7e7eb);overflow:hidden;margin-top:7px} .pati-creator-bartrack>span{height:100%;display:block;background:#c700b1;border-radius:99px} .pati-creator-audience-count{display:flex;align-items:center;gap:12px;margin:15px 0;padding:14px;border-radius:14px;background:var(--pui-raised,#f5f5f8)} .pati-creator-audience-count strong{font-size:24px} .pati-creator-audience-count span{font-size:12px;color:var(--pui-secondary,#777)} .pati-creator-empty,.pati-creator-footnote{color:var(--pui-secondary,#74757d);font-size:12px;line-height:1.55;padding:11px 0} .pati-creator-loading{margin:auto;padding:30px;text-align:center} .pati-profile-insights-preview{ display:flex;align-items:center;gap:12px;width:calc(100% - 26px); margin:10px 13px 16px;padding:13px 16px;min-width:0;min-height:78px; background:var(--pui-raised,#f2f3f5);color:var(--pui-text,#17191d); border:1px solid var(--pui-border,#e2e2e6);border-radius:15px;text-align:left;cursor:pointer; } .pati-profile-insights-preview>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .pati-profile-insights-preview strong{font-size:17px;font-weight:850} .pati-profile-insights-preview small{font-size:12px;color:var(--pui-secondary,#71757c)} .pati-profile-insights-value{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums} .pati-profile-insights-arrow{font-size:21px;font-weight:850} html[data-pati-theme="dark"] .pati-creator-dashboard, html[data-pati-theme="dark"] .pati-creator-dashboard .pati-creator-head, html[data-pati-theme="dark"] .pati-creator-dashboard .pati-creator-scroll{background:#15161b!important;color:#fafaff!important} html[data-pati-theme="dark"] .pati-creator-stat, html[data-pati-theme="dark"] .pati-creator-detail-grid article, html[data-pati-theme="dark"] .pati-profile-insights-preview{background:#24262e!important;color:#f7f8fb!important;border-color:#4b4c57!important} html[data-pati-theme="dark"] .pati-full-crop-controls *:focus-visible, .pati-creator-dashboard button:focus-visible{outline:2px solid #a0b5ff;outline-offset:2px} @media(max-width:500px){ .pati-full-crop-controls{gap:8px;padding-top:10px} .pati-full-crop-head{min-height:57px} .pati-crop-top-controls button{min-height:49px;font-size:20px} .pati-creator-dashboard .pati-creator-container{padding-inline:12px} .pati-creator-tabs{margin-inline:-12px} .pati-creator-kpis,.pati-creator-detail-grid{gap:8px} .pati-creator-stat{padding:13px 10px;min-height:125px} .pati-creator-stat>strong,.pati-creator-detail-grid strong{font-size:22px} } @media(prefers-reduced-motion:reduce){.pati-creator-dashboard *, .pati-full-crop-dialog *{scroll-behavior:auto!important;transition-duration:.01ms!important}} /* patiyiz-compose-stability-20261029.css */ /* Patiyiz — crop, preview and publishing polish (web + native), 2026-10-29. Narrow mobile viewports never allow a media preview to overflow the page. Keep the existing five content tabs; only refine their hit areas and rhythm. */ #patiyiz-system-media .pati-system-panel{ width:min(100%,580px)!important;max-width:100%!important; min-width:0!important;box-sizing:border-box!important; overflow-x:hidden!important; } #patiyiz-system-media #pati-system-preview, #patiyiz-system-media .pati-system-preview-wrap{ width:100%!important;min-width:0!important;max-width:100%!important; overflow:hidden!important; } #patiyiz-system-media .pati-system-preview-media{ width:100%!important;max-width:100%!important; scroll-snap-type:x mandatory; overflow-x:auto!important;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:#141518!important; } #patiyiz-system-media .pati-system-preview-media::-webkit-scrollbar{display:none} #patiyiz-system-media .pati-system-preview-media :is(img,video){ min-width:100%!important;width:100%!important;max-width:100%!important; height:100%!important;flex:0 0 100%!important; display:block;object-fit:contain!important; scroll-snap-align:center;box-sizing:border-box; } #patiyiz-system-media .pati-system-crop-entry{ display:flex;align-items:center;justify-content:center;gap:9px; width:100%;min-width:0;min-height:45px; padding:11px 15px;margin:0 0 13px; font:inherit;font-size:14px;font-weight:800; border:1px solid #656874;border-radius:14px; color:#f8f8fb;background:#2c2e37;cursor:pointer; box-sizing:border-box; } #patiyiz-system-media .pati-system-crop-entry[hidden]{display:none!important} #patiyiz-system-media .pati-system-crop-entry:focus-visible{ outline:2px solid #a4b7fe;outline-offset:3px; } #patiyiz-system-media .pati-system-thumbnails{ max-width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:thin; } #patiyiz-system-media .pati-system-photo-review :is(strong,small){ line-height:1.4;overflow-wrap:anywhere; } #patiyiz-system-media .pati-system-publish-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; align-items:stretch!important;gap:9px!important; width:100%;min-width:0;max-width:100%; } #patiyiz-system-media .pati-system-publish-actions button{ min-width:0!important;width:100%!important; flex:none!important;box-sizing:border-box!important; padding:9px!important;min-height:46px!important; white-space:normal!important;line-height:1.25!important; } #patiyiz-system-media .pati-system-publish-actions #pati-system-publish{ grid-column:1 / -1; min-height:53px!important; font-weight:850!important; } #main-content .pati-ig-profile .pati-ig-tabs{ display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important; width:100%!important;min-width:0!important; gap:0!important; } #main-content .pati-ig-profile .pati-ig-tabs button{ min-width:0!important;padding:8px 3px!important; min-height:54px!important; touch-action:manipulation; } #main-content .pati-ig-profile .pati-ig-tabs .pati-profile-tab-icon{ width:25px!important;height:25px!important; max-width:100%!important; } html[data-pati-theme="dark"] #patiyiz-system-media .pati-system-crop-entry{ background:#292b33!important; color:#f7f8fb!important;border-color:#535663!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs{ background:#1a1c21!important;color:#f7f8fb!important; } @media(max-width:420px){ #patiyiz-system-media .pati-system-panel{padding-inline:10px!important} #patiyiz-system-media .pati-system-preview-media{max-height:47dvh!important} #patiyiz-system-media .pati-system-publish-actions button{font-size:12px!important} #main-content .pati-ig-profile .pati-ig-tabs button{min-height:50px!important} } @media(max-height:650px){ #patiyiz-system-media .pati-system-preview-media{max-height:35dvh!important} #patiyiz-system-media .pati-system-panel{overflow-y:auto!important} } /* patiyiz-settings-private-20261030.css */ /* Patiyiz private settings: simple, Instagram-style spacing; original UI. */ #main-content .pati-settings-v2{width:min(100%,700px);margin:0 auto;padding:4px 12px 100px;display:grid;gap:24px} #main-content .pati-settings-v2 .pati-settings-section{margin:0;background:transparent;border:none;padding:0;box-shadow:none} #main-content .pati-settings-v2 .pati-settings-section>h2{font-size:14px;font-weight:850;letter-spacing:-.02em;color:var(--ink,#17191d);margin:10px 10px 11px} #main-content .pati-settings-v2 .pati-settings-items{border:1px solid var(--line,#e8e8eb);border-radius:17px;background:var(--paper,#fff);overflow:hidden} #main-content .pati-settings-v2 .pati-settings-row{width:100%;display:flex;gap:13px;align-items:center;text-align:left;min-height:69px;padding:12px 16px;background:transparent;border:0;border-bottom:1px solid var(--line,#eceef1);color:var(--ink,#14161a);font:inherit} #main-content .pati-settings-v2 .pati-settings-row:last-child{border-bottom:0} #main-content .pati-settings-v2 .pati-settings-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;font-size:18px;background:var(--bg,#f4f5f7);border-radius:11px} #main-content .pati-settings-v2 .pati-settings-copy{flex:1;min-width:0;display:grid;gap:4px} #main-content .pati-settings-v2 .pati-settings-copy strong{font-size:14px;line-height:1.35;font-weight:750;white-space:normal;color:inherit} #main-content .pati-settings-v2 .pati-settings-copy small{font-size:12px;line-height:1.4;color:#858b96} #main-content .pati-settings-v2 .pati-settings-arrow{font-size:23px;color:#a4a9b1;font-weight:400} #main-content .pati-settings-v2 .pati-settings-switch{flex:0 0 40px;width:40px;height:24px;border-radius:99px;background:#c7cbd0;position:relative} #main-content .pati-settings-v2 .pati-settings-switch:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform .18s} #main-content .pati-settings-v2 .pati-settings-private[aria-checked="true"] .pati-settings-switch{background:#17191d} #main-content .pati-settings-v2 .pati-settings-private[aria-checked="true"] .pati-settings-switch:after{transform:translateX(16px)} #main-content .pati-settings-v2 .pati-settings-line{padding:14px;display:grid;gap:11px} #main-content .pati-settings-v2 .pati-settings-line>strong{font-size:13px} #main-content .pati-settings-v2 .pati-theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px} #main-content .pati-settings-v2 .pati-theme-options button{min-height:43px;border-radius:12px;font-weight:750} #main-content .pati-settings-v2 .pati-settings-choice{padding:17px 14px;display:grid;gap:13px;border-bottom:1px solid var(--line,#eee)} #main-content .pati-settings-v2 .pati-settings-choice>strong{font-size:13px} #main-content .pati-settings-v2 .pati-safety-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #main-content .pati-settings-v2 .pati-safety-buttons button{min-width:0;min-height:44px;padding:8px 5px;border:1px solid #dadde3;border-radius:11px;background:#f4f5f7;color:#33363c;font:inherit;font-size:11px;font-weight:750} #main-content .pati-settings-v2 .pati-safety-buttons button[aria-pressed="true"]{background:#17191d;color:#fff;border-color:#17191d} #main-content .pati-settings-v2 .pati-settings-requests{padding:12px 14px} #main-content .pati-settings-v2 .pati-settings-links{display:flex;gap:16px;flex-wrap:wrap;padding:16px;border-bottom:1px solid #e7e7e9;font-size:13px} #main-content .pati-settings-v2 .pati-settings-warning{margin:0 6px;font-size:12px;line-height:1.5;color:#818791} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-items{background:#1d2026;border-color:#373a43} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-section>h2, html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-row, html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-line{color:#f7f7f9!important} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-icon{background:#292c34;color:#f2f3f4} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-settings-choice{color:#fff;border-color:#343841} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-safety-buttons button{background:#292d33;color:#eee;border-color:#474b54} html[data-pati-theme="dark"] #main-content .pati-settings-v2 .pati-safety-buttons button[aria-pressed="true"]{background:#f4f4f6;color:#16181c;border-color:#f4f4f6} body.pati-close-picker-active{overflow:hidden!important} #pati-close-picker{position:fixed;inset:0;z-index:31000;background:#fff;color:#17191d;overflow-y:auto;overscroll-behavior:contain} #pati-close-picker *{box-sizing:border-box} #pati-close-picker .pati-close-picker-shell{width:min(100%,700px);margin:0 auto;padding:env(safe-area-inset-top,0px) 14px calc(26px + env(safe-area-inset-bottom,0px))} #pati-close-picker header{position:sticky;top:0;z-index:3;background:#fff;display:grid;grid-template-columns:55px minmax(0,1fr) 94px;align-items:center;min-height:65px;border-bottom:1px solid #e9eaee} #pati-close-picker header strong{text-align:center;font-size:17px} #pati-close-picker header button{min-height:44px;background:transparent;color:inherit;border:0;font:inherit;font-size:24px} #pati-close-picker header .pati-close-confirm{background:#17191d;border-radius:12px;color:#fff;font-size:13px;font-weight:800;padding:8px} #pati-close-picker .pati-close-info{padding:18px 5px 14px} #pati-close-picker .pati-close-info strong{font-size:16px} #pati-close-picker .pati-close-info p{font-size:12px;line-height:1.55;color:#777e88} #pati-close-picker #pati-close-search{width:100%;height:47px;border:1px solid #e5e7e9;border-radius:12px;background:#f3f4f6;padding:0 15px;font:inherit;font-size:14px;color:inherit} #pati-close-picker .pati-close-people{display:grid;padding:10px 0} #pati-close-picker .pati-close-person{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:9px 6px;background:transparent;border:0;border-bottom:1px solid #eef0f2;color:inherit;text-align:left;font:inherit} #pati-close-picker .pati-close-person .avatar{flex:none} #pati-close-picker .pati-close-person>span:nth-last-child(2){flex:1;min-width:0;display:grid;gap:3px} #pati-close-picker .pati-close-person strong{font-size:14px} #pati-close-picker .pati-close-person small{font-size:12px;color:#7d8490} #pati-close-picker .pati-close-person>b{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:2px solid #c7cbd0;border-radius:50%;font-size:14px} #pati-close-picker .pati-close-person[aria-pressed="true"]>b{background:#17191d;border-color:#17191d;color:#fff} #pati-close-picker .pati-close-error{padding:12px;color:#bf4040} #pati-close-picker .pati-close-empty{padding:32px 12px;text-align:center;color:#858b96} html[data-pati-theme="dark"] #pati-close-picker,html[data-pati-theme="dark"] #pati-close-picker header{background:#14161b;color:#f8f8fa} html[data-pati-theme="dark"] #pati-close-picker #pati-close-search{background:#282b33;border-color:#3d414b;color:#fff} html[data-pati-theme="dark"] #pati-close-picker .pati-close-person{border-color:#363a43} html[data-pati-theme="dark"] #pati-close-picker header .pati-close-confirm{background:#fff;color:#14161b} @media(max-width:410px){#main-content .pati-settings-v2{padding-inline:8px}#main-content .pati-settings-v2 .pati-safety-buttons button{font-size:10.5px}} /* patiyiz-direct-reposts-dm-media-20261030.css */ /* Full repost content and direct media in private-message shares (30 Oct 2026). */ #main-content .pati-profile-reposts-feed{ display:grid;gap:16px;width:100%;max-width:660px;min-width:0; margin:0 auto;padding:10px 0 18px;box-sizing:border-box; } #main-content .pati-profile-repost-item{min-width:0;width:100%} #main-content .pati-profile-repost-item>.pati-feed-card{ width:100%;max-width:100%;box-sizing:border-box;margin:0; } #main-content .pati-profile-reposts-feed>.pati-ig-empty{padding:28px 14px;text-align:center} .bubble-chat.pati-dm-shared-message{ width:min(76vw,385px);max-width:min(85vw,385px);min-width:0; box-sizing:border-box;overflow:hidden;padding:6px!important; } .bubble-chat.pati-dm-shared-message>.pati-dm-shared-card{width:100%} .pati-dm-shared-card{ display:flex;flex-direction:column;gap:0;overflow:hidden; min-width:0;max-width:100%;border-radius:15px; background:var(--pui-paper,#fff);color:var(--pui-text,#17191c); border:1px solid var(--pui-border,#e0e1e4); text-align:left;box-sizing:border-box; } .pati-dm-shared-card button{ font:inherit;color:inherit;cursor:pointer; } .pati-dm-shared-card .pati-dm-shared-by{ display:flex;align-items:center;gap:9px;width:100%;min-width:0; padding:12px;border:0;background:transparent;text-align:left; } .pati-dm-shared-by>.avatar,.pati-dm-shared-by .avatar{ width:36px;height:36px;min-width:36px;border-radius:50%;overflow:hidden; } .pati-dm-shared-by>span{min-width:0;display:grid;gap:2px} .pati-dm-shared-by b{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pati-dm-shared-by small{font-size:11px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pati-dm-shared-media{width:100%;min-width:0;overflow:hidden} .pati-dm-shared-video-wrap{background:#121318;display:grid;place-items:center} .pati-dm-shared-card .pati-dm-shared-video{ display:block;width:100%;max-height:min(55dvh,500px);height:auto; object-fit:contain;background:#121318; } .pati-dm-shared-card.pati-dm-shared-reel .pati-dm-shared-video{ aspect-ratio:9/16;max-height:min(55dvh,500px); } .pati-dm-shared-images{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;background:transparent; } .pati-dm-shared-images img{ flex:0 0 100%;width:100%;min-width:100%; height:auto;max-height:min(53dvh,480px); object-fit:contain;scroll-snap-align:center; } .pati-dm-shared-text{ padding:16px 14px;font-size:14px;line-height:1.5; overflow-wrap:anywhere;white-space:pre-wrap; } .pati-dm-shared-caption{ padding:12px 13px 5px;font-size:13px; line-height:1.4;overflow-wrap:anywhere;white-space:pre-wrap; } .pati-dm-shared-card .pati-dm-shared-footer{ width:100%;padding:12px 13px;display:flex;gap:7px; align-items:center;justify-content:flex-start;text-align:left; border:0;background:transparent;font-size:12px;font-weight:750; } .pati-dm-shared-footer .icon{width:15px;height:15px} .pati-dm-shared-card .pati-dm-shared-open:focus-visible, .pati-dm-shared-card .pati-dm-shared-footer:focus-visible{ outline:2px solid currentColor;outline-offset:-3px; } html[data-pati-theme="dark"] .pati-dm-shared-card{ background:#202126;color:#f4f4f5;border-color:#3b3d45; } @media(max-width:720px){ #main-content .pati-profile-reposts-feed{gap:8px;padding:5px 0 16px} #main-content .pati-profile-repost-item>.pati-feed-card{border-radius:0} .bubble-chat.pati-dm-shared-message{width:min(80vw,385px);max-width:min(86vw,385px)} } @media(prefers-reduced-motion:reduce){ .pati-dm-shared-images{scroll-behavior:auto} } /* patiyiz-story-media-mentions-20261030.css */ /* Real story still frame, readable clickable share cards and focused mention destinations. */ #story-viewers-sheet .pati-story-activity-cover{ position:relative;overflow:hidden;background:#1b1c20; } #story-viewers-sheet .pati-story-activity-cover .pati-story-activity-video-frame{ display:block;width:100%;height:100%;object-fit:cover; min-height:180px;max-height:40dvh; } #story-viewers-sheet .pati-story-activity-cover.pati-story-preview-unavailable:after{ content:"Video önizlemesi yüklenemedi"; position:absolute;inset:auto 0 0;padding:10px 8px;text-align:center; color:white;background:#17181acc;font-size:12px; } .pati-dm-shared-card .pati-dm-shared-author{ cursor:pointer;text-align:left; } .pati-dm-shared-card .pati-dm-shared-media-open{ display:block;position:relative;width:100%;padding:0;border:0; background:#16171b;color:white;overflow:hidden;text-align:center; } .pati-dm-shared-card .pati-dm-shared-play{ display:grid;place-items:center;position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:48px;height:48px; border-radius:50%;border:1px solid #ffffff80; background:#1119;color:white;font-size:20px;pointer-events:none; } .pati-dm-shared-images .pati-dm-shared-image-open{ display:flex;flex:0 0 100%;min-width:100%;min-height:0; padding:0;margin:0;border:0;background:transparent; scroll-snap-align:center;cursor:pointer; } .pati-dm-shared-card .pati-dm-shared-image-open img{ display:block;width:100%;height:auto;max-height:min(53dvh,480px); object-fit:contain; } .pati-dm-shared-card .pati-dm-shared-text-open, .pati-dm-shared-card .pati-dm-shared-caption-open{ display:block;width:100%;border:0;background:transparent; text-align:left;cursor:pointer; } #comment-form .pati-comment-mention-highlight{ background:color-mix(in srgb,#e7bd34 22%,transparent); border-radius:12px;outline:2px solid #edc84e; outline-offset:3px;transition:background .3s ease; } @media(max-width:720px){ #story-viewers-sheet .pati-story-activity-cover .pati-story-activity-video-frame{ min-height:120px;max-height:38dvh; } .pati-dm-shared-card .pati-dm-shared-play{width:42px;height:42px} } @media(prefers-reduced-motion:reduce){ #comment-form .pati-comment-mention-highlight{transition:none} } /* patiyiz-mention-mobile-fix-20261030.css */ /* Patiyiz iPhone comment @mention layout repair, 30 October 2026. Search lives ABOVE (never inside) the four-column comment composer. */ #modal-root #comment-form .modal-footer > .pati-mention-picker{ position:relative!important; display:flex!important; flex-direction:column!important; flex:0 0 auto!important; align-self:stretch!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-width:0!important; max-height:min(38dvh,290px)!important; overflow:hidden!important; margin:3px 0 2px!important; padding:12px!important; gap:8px!important; border:1px solid color-mix(in srgb,currentColor 20%,transparent)!important; border-radius:17px!important; color:inherit!important; background:color-mix(in srgb,currentColor 7%,transparent)!important; box-shadow:0 5px 18px #00000016; z-index:3!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-header{ display:flex!important;align-items:center!important;justify-content:space-between!important; min-height:27px;min-width:0;gap:12px; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-header strong{ font-size:14px!important;line-height:1.4!important;white-space:nowrap; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-close{ display:grid!important;place-items:center!important; flex:0 0 30px!important;width:30px!important;height:30px!important; min-width:30px!important;min-height:30px!important;padding:0!important; border:0!important;border-radius:50%!important; background:color-mix(in srgb,currentColor 12%,transparent)!important; color:inherit!important;font-size:24px!important;line-height:1!important; cursor:pointer; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-search-label{ display:block!important;margin:0!important;min-width:0!important; font-size:12px!important;font-weight:700!important;line-height:1.3!important; } #comment-form .modal-footer > .pati-mention-picker input.pati-mention-search{ display:block!important;box-sizing:border-box!important; flex:0 0 43px!important; width:100%!important;min-width:0!important;max-width:100%!important; min-height:43px!important;height:43px!important; margin:0!important;padding:8px 12px!important; border:1px solid color-mix(in srgb,currentColor 23%,transparent)!important; border-radius:11px!important; background:color-mix(in srgb,currentColor 5%,transparent)!important; color:inherit!important; font-size:16px!important;line-height:1.4!important; } #comment-form .modal-footer > .pati-mention-picker input.pati-mention-search::placeholder{ color:inherit!important;opacity:.56!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-results{ display:flex!important;flex-direction:column!important; flex:1 1 auto!important; width:100%!important;max-width:100%!important;min-width:0!important; min-height:0!important;max-height:170px!important; overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; gap:2px!important;padding:0!important;margin:0!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person{ display:flex!important;align-items:center!important;gap:10px!important; flex:0 0 auto!important; box-sizing:border-box!important; width:100%!important;min-width:0!important;max-width:100%!important; min-height:50px!important; border:0!important;border-radius:10px!important; margin:0!important;padding:7px 9px!important; color:inherit!important;background:transparent!important; text-align:left!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person:active{ background:color-mix(in srgb,currentColor 11%,transparent)!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person .avatar{ display:flex!important;align-items:center;justify-content:center; flex:0 0 37px!important; width:37px!important;height:37px!important;min-width:37px!important; max-width:37px!important;max-height:37px!important; border-radius:50%!important;overflow:hidden!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person .avatar img{ width:100%!important;height:100%!important;object-fit:cover!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person-name{ display:flex!important;flex-direction:column!important;gap:2px!important; flex:1 1 auto!important; min-width:0!important;max-width:100%!important;overflow:hidden!important; text-align:left!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person-name strong, #comment-form .modal-footer > .pati-mention-picker .pati-mention-person-name small{ display:block!important;width:100%!important;min-width:0!important; overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important; font-size:13px!important;line-height:1.35!important;color:inherit!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-person-name small{ font-size:11px!important;opacity:.7!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-empty{ margin:0;padding:11px 6px;font-size:13px;opacity:.75; } #comment-form .modal-footer:has(> .pati-mention-picker) .pati-comment-quick{ display:none!important; } #comment-form .modal-footer > .pati-mention-picker .pati-mention-close:focus-visible, #comment-form .modal-footer > .pati-mention-picker .pati-mention-person:focus-visible{ outline:2px solid currentColor!important;outline-offset:-2px!important; } @media(max-width:740px){ #modal-root #comment-form .modal-footer > .pati-mention-picker{ max-height:min(33dvh,240px)!important;padding:10px!important; } #comment-form .pati-comment-editor-row{ box-sizing:border-box!important;max-width:100%!important;min-width:0!important;gap:7px!important; } #comment-form .pati-comment-editor-row textarea{ flex:1 1 auto!important;min-width:0!important; } html.pati-keyboard-open #modal-root .modal-backdrop.pati-instagram-comments-backdrop{ inset:0 0 var(--pati-keyboard-inset,0px) 0!important; } html.pati-keyboard-open #modal-root .modal.pati-instagram-comments{ height:min(75dvh,calc(100dvh - var(--pati-keyboard-inset,0px) - 12px))!important; max-height:calc(100dvh - var(--pati-keyboard-inset,0px) - 12px)!important; } html.pati-keyboard-open #modal-root #comment-form .modal-footer > .pati-mention-picker{ max-height:min(30dvh,220px)!important; } } @media(max-width:360px){ #comment-form .pati-comment-editor-row .pati-comment-me .avatar{ width:31px!important;height:31px!important;min-width:31px!important; } #comment-form .pati-comment-editor-row .pati-comment-send{ padding:8px!important; } } /* patiyiz-blue-mentions-dm-20261030.css */ /* Instagram-like, readable blue mention actions and tagged DM content. */ #comment-form .pati-comment-editor-row .pati-comment-mention{ display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:3px!important; flex:0 0 auto!important;min-height:40px!important;min-width:0!important; padding:5px 3px!important;margin:0!important; border:0!important;border-radius:8px!important; background:transparent!important;color:#2388fa!important; font-size:13px!important;font-weight:800!important;line-height:1.1!important; white-space:nowrap!important;letter-spacing:0!important; cursor:pointer!important; } #comment-form .pati-comment-editor-row .pati-comment-mention span{font-weight:900!important;font-size:15px!important;color:inherit!important} #post-form .pati-mention-open{ display:inline-flex!important;align-items:center!important;gap:5px!important; width:auto!important;max-width:100%!important;min-height:40px!important; padding:8px 11px!important;border:1px solid #2388fa66!important;border-radius:11px!important; background:#2388fa12!important;color:#1683f6!important; font-size:13px!important;font-weight:800!important; white-space:nowrap!important; } #post-form .pati-mention-open span{color:inherit!important;font-weight:900!important} .pati-mention-link, #comment-form .pati-sheet-comment .pati-mention-link, #main-content .pati-mention-link, #modal-root .pati-mention-link{ display:inline!important;border:0!important;background:transparent!important; padding:0 1px!important;margin:0!important; color:#1683f6!important;font-weight:800!important;font-size:inherit!important; text-decoration:none!important;line-height:inherit!important; overflow-wrap:anywhere;cursor:pointer!important; } .pati-mention-link:focus-visible, #comment-form .pati-comment-editor-row .pati-comment-mention:focus-visible{ outline:2px solid #2388fa!important;outline-offset:2px!important; } .pati-dm-shared-card .pati-dm-mention-label{ display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:5px!important; padding:9px 12px 12px!important; background:color-mix(in srgb,#2388fa 7%,transparent)!important; border-top:1px solid color-mix(in srgb,#2388fa 22%,transparent)!important; color:#167ad9!important;font-size:12px!important;line-height:1.35!important; } .pati-dm-shared-card .pati-dm-mention-label strong{font-weight:800!important;min-width:0!important;overflow-wrap:anywhere} .pati-dm-shared-card .pati-dm-mention-label small{ display:block!important;flex-basis:100%!important; font-size:11px!important;opacity:.8!important;color:inherit!important; margin-left:24px!important; } html[data-pati-theme="dark"] .pati-mention-link, html[data-pati-theme="dark"] #comment-form .pati-comment-editor-row .pati-comment-mention, html[data-pati-theme="dark"] #post-form .pati-mention-open, html[data-pati-theme="dark"] .pati-dm-shared-card .pati-dm-mention-label{ color:#66b2ff!important; } @media(max-width:380px){ #comment-form .pati-comment-editor-row .pati-comment-mention{padding:4px 0!important;font-size:12px!important;gap:2px!important} #comment-form .pati-comment-editor-row .pati-comment-send{padding:8px!important} } /* In tagged direct messages, the tagger's name is a clear profile link. */ .pati-dm-shared-card .pati-dm-mention-label .pati-dm-mention-person{ display:inline-flex!important;align-items:center!important; border:0!important;border-radius:4px!important; padding:2px 0!important;min-width:0!important; background:transparent!important;color:#1683f6!important; font-size:12px!important;font-weight:850!important;line-height:1.35!important; cursor:pointer!important;text-align:left!important; } .pati-dm-shared-card .pati-dm-mention-label .pati-dm-mention-person:focus-visible{ outline:2px solid #2388fa!important;outline-offset:2px!important; } html[data-pati-theme="dark"] .pati-dm-shared-card .pati-dm-mention-label .pati-dm-mention-person{color:#66b2ff!important} /* patiyiz-comment-profile-only-20261030.css */ /* Direct profile navigation from comment sheet — keep only profile visible. */ #comment-form .pati-comment-profile-avatar, #comment-form .pati-comment-profile-name{ appearance:none!important;-webkit-appearance:none!important; background:transparent!important;border:0!important; padding:0!important;margin:0!important; color:inherit!important;cursor:pointer!important; font:inherit!important;letter-spacing:inherit!important; box-shadow:none!important;text-align:left!important; } #comment-form .pati-comment-profile-avatar{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:36px!important;height:36px!important;min-width:36px!important; flex:0 0 36px!important; border-radius:50%!important;overflow:hidden!important; } #comment-form .pati-sheet-comment-avatar .pati-comment-profile-avatar{ width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important; } #comment-form .pati-comment-profile-avatar .avatar, #comment-form .pati-comment-profile-avatar .avatar.s{ display:block!important;width:100%!important;height:100%!important; min-width:0!important;min-height:0!important; border-radius:50%!important;overflow:hidden!important; } #comment-form .pati-comment-profile-avatar .avatar img{ width:100%!important;height:100%!important;object-fit:cover!important; } #comment-form .pati-comment-profile-name{ display:inline-block!important;min-width:0!important;max-width:100%!important; font-size:13px!important;font-weight:800!important;line-height:1.45!important; overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } #comment-form .pati-comment-post-user .pati-comment-profile-name{ font-size:14px!important; } #comment-form .pati-comment-profile-avatar:focus-visible, #comment-form .pati-comment-profile-name:focus-visible{ outline:2px solid #2388fa!important;outline-offset:3px!important; } /* patiyiz-post-likers-fullscreen-20261030.css */ /* Patiyiz: full-screen liked-by list and profile-only comment navigation. */ #modal-root .modal-backdrop.pati-post-likers-backdrop{ position:fixed!important;inset:0!important;z-index:100800!important; display:flex!important;justify-content:center!important;align-items:stretch!important; padding:0!important;margin:0!important;background:#0008!important; } #modal-root .modal.pati-post-likers-modal{ display:flex!important;flex-direction:column!important; width:min(100%,740px)!important;max-width:740px!important; height:100dvh!important;max-height:100dvh!important; min-height:0!important;box-sizing:border-box!important; margin:0!important;border-radius:0!important; background:var(--pati-final-field-bg,#fff)!important; color:var(--pati-final-field-text,#16191c)!important; overflow:hidden!important; } #modal-root .pati-post-likers-modal>.modal-header{ flex:0 0 auto!important;display:flex!important;align-items:center!important; min-height:66px!important;padding:13px 56px 13px 20px!important; border-bottom:1px solid var(--pati-final-field-line,#e7e8eb)!important; background:inherit!important;color:inherit!important; } #modal-root .pati-post-likers-modal>.modal-header h2{font-weight:850!important;font-size:17px!important;color:inherit!important} #modal-root .pati-post-likers-modal .close-modal{ display:grid!important;place-items:center!important; position:absolute!important;top:14px!important;right:14px!important; width:38px!important;height:38px!important;min-width:38px!important; padding:0!important;border-radius:50%!important; background:color-mix(in srgb,currentColor 9%,transparent)!important; color:inherit!important;font-size:25px!important;z-index:1!important; } #modal-root .pati-post-likers-modal #pati-post-likers-form{ display:flex!important;flex-direction:column!important;flex:1 1 auto!important; min-height:0!important;overflow:hidden!important; } #modal-root .pati-post-likers-modal .modal-content{ display:flex!important;flex-direction:column!important;flex:1 1 auto!important; min-height:0!important;max-height:none!important;overflow:hidden!important; gap:0!important;padding:0!important; background:inherit!important;color:inherit!important; } #modal-root .pati-post-likers-modal .modal-footer{display:none!important} #modal-root .pati-post-likers-modal .pati-post-likers-status{ padding:12px 19px!important;flex:0 0 auto!important; font-size:12px!important;color:inherit!important;opacity:.68!important; border-bottom:1px solid var(--pati-final-field-line,#e7e8eb)!important; } #modal-root .pati-post-likers-modal .pati-post-likers-list{ flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain;-webkit-overflow-scrolling:touch!important; padding:7px 12px 22px!important;scrollbar-width:thin; } #modal-root .pati-post-likers-modal .pati-post-liker-person{ width:100%!important;max-width:100%!important;min-width:0!important; display:flex!important;align-items:center!important;gap:12px!important; min-height:65px!important; padding:9px 11px!important;box-sizing:border-box!important; border:0!important;border-radius:12px!important;background:transparent!important; color:inherit!important;font:inherit!important;text-align:left!important;cursor:pointer!important; } #modal-root .pati-post-likers-modal .pati-post-liker-person .avatar{ width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important; border-radius:50%!important;overflow:hidden!important; } #modal-root .pati-post-likers-modal .pati-post-liker-person .avatar img{ width:100%!important;height:100%!important;object-fit:cover!important; } #modal-root .pati-post-likers-modal .pati-post-liker-identity{ display:flex!important;flex:1 1 auto!important;min-width:0!important;max-width:100%!important; flex-direction:column!important;gap:3px!important; } #modal-root .pati-post-likers-modal .pati-post-liker-identity strong, #modal-root .pati-post-likers-modal .pati-post-liker-identity small{ display:block!important;width:100%!important;overflow:hidden!important; text-overflow:ellipsis!important;white-space:nowrap!important;color:inherit!important; } #modal-root .pati-post-likers-modal .pati-post-liker-identity strong{font-size:14px!important;font-weight:800!important} #modal-root .pati-post-likers-modal .pati-post-liker-identity small{font-size:12px!important;opacity:.64!important} #modal-root .pati-post-likers-modal .pati-post-liker-person>.icon{flex:0 0 18px!important;opacity:.55!important} #modal-root .pati-post-likers-modal .pati-post-liker-person:active{ background:color-mix(in srgb,currentColor 9%,transparent)!important; } #modal-root .pati-post-likers-modal .pati-post-liker-person:focus-visible{ outline:2px solid #2388fa!important;outline-offset:-2px!important; } #modal-root .pati-post-likers-modal .pati-post-likers-empty{ text-align:center!important;padding:30px 12px!important;opacity:.7!important;font-size:14px!important; } #modal-root .pati-post-likers-modal .pati-post-likers-more{ flex:0 0 auto!important;align-self:stretch!important;margin:0 15px 15px!important; padding:12px!important;border-radius:12px!important;min-height:44px!important; border:1px solid var(--pati-final-field-line,#e7e8eb)!important; background:transparent!important;color:#2388fa!important; font-size:14px!important;font-weight:800!important;cursor:pointer!important; } #main-content .pati-post-like-summary{ display:inline-block!important;width:fit-content!important;max-width:100%!important; padding:3px 0!important;margin:0!important;border:0!important; border-radius:4px!important;background:transparent!important; color:inherit!important;font-size:inherit!important; font-weight:850!important;line-height:1.4!important;text-align:left!important; cursor:pointer!important; } #main-content .pati-post-like-summary:focus-visible{outline:2px solid #2388fa!important;outline-offset:2px!important} #main-content .pati-reel-likers-trigger{ cursor:pointer!important;position:relative!important;z-index:5!important; display:block!important;min-height:24px!important;min-width:29px!important; padding:2px 0!important;text-align:center!important; } #main-content .pati-reel-likers-trigger:focus-visible{ outline:2px solid #fff!important;outline-offset:2px!important;border-radius:4px!important; } @media(max-width:740px){ #modal-root .modal.pati-post-likers-modal{ width:100vw!important;max-width:none!important; height:100dvh!important;max-height:100dvh!important; border-radius:0!important; } #modal-root .pati-post-likers-modal>.modal-header{ padding-top:max(14px,env(safe-area-inset-top,0px))!important; min-height:calc(58px + env(safe-area-inset-top,0px))!important; } #modal-root .pati-post-likers-modal .pati-post-likers-list{ padding-bottom:max(30px,env(safe-area-inset-bottom,0px))!important; } } /* patiyiz-compact-shared-story-20261030.css */ /* Compact Instagram-like repost card — ONLY story rows with shared_post_id. Original photo/video stories remain immersive full screen. */ #story-overlay.pati-story-has-source .story-player{ background:radial-gradient(ellipse at 25% 17%,#3d404a 0%,#24272f 46%,#111217 100%)!important; } #story-overlay.pati-story-has-source .pati-story-share-stage{ position:absolute!important;inset:78px 10px 116px!important; z-index:9!important; display:flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important; pointer-events:none!important; } #story-overlay.pati-story-has-source .pati-story-share-card{ position:relative!important;display:flex!important;flex-direction:column!important; flex:0 1 auto!important; box-sizing:border-box!important; width:min(76vw,310px)!important;max-width:100%!important; min-width:0!important;max-height:100%!important; gap:8px!important;padding:11px!important; border:1px solid #e5e5e8!important;border-radius:19px!important; background:#fff!important;color:#191a1e!important; box-shadow:0 22px 56px #0007,0 3px 8px #0002!important; overflow:hidden!important;pointer-events:auto!important; } #story-overlay.pati-story-has-source .pati-story-share-card-heading{ display:flex!important;flex:0 0 auto!important;align-items:center!important; gap:7px!important;min-height:29px!important;min-width:0!important; width:100%!important;color:#202126!important; text-shadow:none!important; } #story-overlay.pati-story-has-source .pati-story-share-card-dot{ display:grid!important;place-items:center!important; width:23px!important;height:23px!important;min-width:23px!important; border-radius:50%!important;background:#17191d!important; color:#fff!important;font-size:9px!important; } #story-overlay.pati-story-has-source .pati-story-share-card-heading strong{ flex:1 1 auto!important;min-width:0!important;overflow:hidden!important; white-space:nowrap!important;text-overflow:ellipsis!important; font-size:13px!important;font-weight:850!important;line-height:1.3!important; } #story-overlay.pati-story-has-source .pati-story-share-card-heading small{ flex:0 0 auto!important;color:#73747a!important;font-size:11px!important; } #story-overlay.pati-story-has-source .pati-story-share-media{ display:block!important;position:relative!important; flex:0 1 auto!important;width:100%!important; height:min(36dvh,306px)!important;max-height:min(36dvh,306px)!important; min-height:120px!important;min-width:0!important; box-sizing:border-box!important; padding:0!important;margin:0!important;border:0!important; border-radius:12px!important;overflow:hidden!important; background:#ecedf1!important;color:#25262a!important; cursor:pointer!important; } #story-overlay.pati-story-has-source .pati-story-share-media>.story-big-photo, #story-overlay.pati-story-has-source .pati-story-share-media>.story-big-video{ display:block!important;position:static!important; width:100%!important;height:100%!important; min-width:0!important;min-height:0!important; max-width:100%!important;max-height:100%!important; object-fit:contain!important;object-position:center!important; background:#ecedf1!important; border:0!important;border-radius:0!important; } #story-overlay.pati-story-has-source .pati-story-share-post-caption{ flex:0 1 auto!important;max-height:50px!important; padding:0 2px!important;margin:0!important; overflow:hidden!important;display:-webkit-box!important; -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important; font-size:12px!important;line-height:1.4!important;color:#56565c!important; text-align:left!important;overflow-wrap:anywhere!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{ display:flex!important;position:relative!important; align-items:center!important;justify-content:center!important;gap:6px!important; flex:0 0 37px!important;inset:auto!important; width:100%!important;min-height:37px!important;max-height:37px!important; margin:0!important;padding:7px 12px!important; border:0!important;border-radius:10px!important; background:#181a20!important;color:#fff!important; font-size:12px!important;font-weight:800!important;text-decoration:none!important; cursor:pointer!important; } #story-overlay.pati-story-has-source .pati-story-share-sound{ position:absolute!important;z-index:11!important; top:55px!important;right:18px!important; padding:5px 8px!important;margin:0!important; min-height:27px!important;max-width:120px!important; border:1px solid #fff5!important;border-radius:100px!important; background:#111b!important;color:#fff!important; font-size:10px!important;font-weight:750!important; text-shadow:none!important; } #story-overlay.pati-story-has-source .pati-story-share-card button:focus-visible{ outline:2px solid #2388fa!important;outline-offset:3px!important; } /* Saved own-story actions and progress stay separate from the shared card. */ #story-overlay.pati-story-own.pati-story-has-source .story-player::after{ z-index:2!important; } #story-overlay.pati-story-own.pati-story-has-source .pati-own-story-stack{ z-index:19!important; } #story-overlay.pati-story-has-source.pati-story-viewers-open .pati-story-share-stage{ opacity:0!important;pointer-events:none!important; } @media(max-width:740px){ #story-overlay.pati-story-has-source .pati-story-share-stage{ inset:calc(65px + env(safe-area-inset-top,0px)) 10px calc(100px + env(safe-area-inset-bottom,0px))!important; } #story-overlay.pati-story-has-source .pati-story-share-card{ width:min(74vw,305px)!important; } } @media(max-height:690px){ #story-overlay.pati-story-has-source .pati-story-share-stage{ inset:calc(62px + env(safe-area-inset-top,0px)) 10px calc(88px + env(safe-area-inset-bottom,0px))!important; } #story-overlay.pati-story-has-source .pati-story-share-media{ height:min(30dvh,240px)!important;max-height:min(30dvh,240px)!important; } #story-overlay.pati-story-has-source .pati-story-share-card{ gap:5px!important;padding:8px!important; } } /* patiyiz-black-outgoing-messages-20261030.css */ /* 30 Oct 2026: Reversible outgoing-message colour experiment. * Remove this stylesheet link to restore previous green bubble colours. * Only the current user's sent messages change; photo/voice/sticker media keeps its surface. */ #main-content .pati-dm-layout{ --p3-chat-mine:#0b0c0f!important; --p3-chat-mine-text:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout, html[data-pati-theme="light"] #main-content .pati-dm-layout{ --p3-chat-mine:#08090b!important; --p3-chat-mine-text:#fff!important; } #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine:not(.pati-dm-image-message):not(.pati-dm-sticker-bubble):not(:has(.pati-dm-audio)):not(:has(.pati-dm-voice-card)), html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine:not(.pati-dm-image-message):not(.pati-dm-sticker-bubble):not(:has(.pati-dm-audio)):not(:has(.pati-dm-voice-card)){ background:#0a0b0e!important; color:#fff!important; border-color:#20232a!important; } #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine>small{ color:#fff!important;opacity:.72!important; } #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine .pati-dm-msg-tools button{ color:#fff!important; } #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine .pati-dm-voice-card{ background:#0a0b0e!important;border-color:#262930!important;color:#fff!important; } #main-content .pati-group-chat-window .pati-group-bubble.mine, html[data-pati-theme="dark"] #main-content .pati-group-chat-window .pati-group-bubble.mine{ background:#0a0b0e!important;color:#fff!important;border-color:#25272b!important; } /* patiyiz-dm-reply-contrast-jump-20261030.css */ /* Reply actions and quoted-message navigation: light and dark contrast. */ #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-msg-tools{ display:flex!important;gap:6px!important;flex-wrap:wrap!important; align-items:center!important;justify-content:flex-end!important; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-msg-tools button{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-height:31px!important;padding:5px 9px!important;border-radius:9px!important; background:#e9ebef!important;color:#24262b!important; border:1px solid #cbd0d8!important;font-size:11px!important;font-weight:750!important; opacity:1!important;visibility:visible!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine .pati-dm-msg-tools button{ background:#30343c!important;border-color:#626b78!important;color:#fff!important; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-msg-tools button:focus-visible, #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-reply-preview:focus-visible{ outline:3px solid #5284ff!important;outline-offset:2px!important; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-reply-preview{ display:flex!important;flex-direction:column!important;align-items:stretch!important; gap:3px!important;text-align:left!important;box-sizing:border-box!important; width:100%!important;max-width:100%!important;min-width:0!important; padding:9px 11px!important;margin:0 0 7px!important; border:1px solid #cbd0d8!important;border-left:3px solid #636c7c!important; border-radius:10px!important;background:#f0f2f5!important;color:#20242b!important; cursor:pointer!important;opacity:1!important;white-space:normal!important; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-reply-preview span{ font-size:10px!important;font-weight:700!important;color:#515b68!important; } #main-content .pati-dm-layout .chat-history .bubble-chat .pati-dm-reply-preview strong{ font-size:12px!important;line-height:1.35!important;font-weight:650!important; color:#15181d!important;word-break:break-word!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine .pati-dm-reply-preview{ background:#262b33!important;border-color:#59616e!important;border-left-color:#9bb6ff!important;color:#fff!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine .pati-dm-reply-preview span{ color:#d2def2!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.mine .pati-dm-reply-preview strong{ color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-history .bubble-chat:not(.mine) .pati-dm-reply-preview{ background:#292d35!important;border-color:#58606c!important;border-left-color:#b0c2e6!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-history .bubble-chat:not(.mine) .pati-dm-reply-preview :is(span,strong){ color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-history .bubble-chat:not(.mine) .pati-dm-msg-tools button{ background:#313740!important;color:#fff!important;border-color:#687280!important; } #main-content .pati-dm-layout #message-form.chat-form{ flex-wrap:wrap!important; } #main-content .pati-dm-layout #message-form .pati-dm-reply-compose{ flex:0 0 100%!important;display:flex!important;align-items:center!important; justify-content:space-between!important;gap:10px!important; border-left:3px solid #426ec9!important;padding:9px 11px!important; border-radius:11px!important;background:#edf1f7!important;color:#242b37!important; min-width:0!important; } #main-content .pati-dm-layout #message-form .pati-dm-reply-compose[hidden]{display:none!important} #main-content .pati-dm-layout #message-form .pati-dm-reply-compose>div{ min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important; } #main-content .pati-dm-layout #message-form .pati-dm-reply-compose span{ font-size:11px!important;color:#3b62ae!important;font-weight:800!important; } #main-content .pati-dm-layout #message-form .pati-dm-reply-compose strong{ display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; font-size:12px!important;color:#242b37!important; } #main-content .pati-dm-layout #message-form .pati-dm-reply-compose button{ flex:0 0 34px!important;width:34px!important;height:34px!important; border:0!important;background:#d9e0ed!important;color:#242b37!important; border-radius:50%!important;font-size:22px!important;cursor:pointer!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout #message-form .pati-dm-reply-compose{ background:#292e39!important;color:#f5f7ff!important;border-left-color:#a8c4ff!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout #message-form .pati-dm-reply-compose :is(strong,span){color:#fff!important} #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-reply-target{ outline:3px solid #78a1ff!important;outline-offset:3px!important; box-shadow:0 0 0 6px rgba(104,150,255,.19)!important; animation:pati-dm-reply-pulse 1.6s ease-out!important; } @keyframes pati-dm-reply-pulse{ 0%{box-shadow:0 0 0 0 rgba(93,143,255,.58)} 65%{box-shadow:0 0 0 10px rgba(93,143,255,.12)} 100%{box-shadow:0 0 0 6px rgba(104,150,255,.19)} } @media(prefers-reduced-motion:reduce){ #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-reply-target{animation:none!important} } /* patiyiz-weekly-leaders-20261031.css */ /* Weekly Pati League. Bronze is intentionally the second-place frame. */ #main-content .pati-weekly-board{ box-sizing:border-box;margin:19px 0 25px;padding:20px; border-radius:21px;border:1px solid #dfe3e8; background:var(--pati-card,#fff);color:var(--pati-text,#17191e); box-shadow:0 7px 25px rgba(20,25,36,.045); } #main-content .pati-weekly-head{ display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px; } #main-content .pati-weekly-head>div{min-width:0} #main-content .pati-weekly-head span{ font-size:10px;letter-spacing:.1em;font-weight:850;color:inherit;opacity:.75; } #main-content .pati-weekly-head h2{ font-size:clamp(18px,3.5vw,23px);letter-spacing:-.6px;line-height:1.2; margin:5px 0 4px;font-weight:850;color:inherit; } #main-content .pati-weekly-head p{ font-size:12px;margin:0;line-height:1.5;opacity:.7;color:inherit; } #main-content .pati-weekly-head button{ flex:0 0 auto;display:inline-flex!important;align-items:center; gap:5px;min-height:36px;padding:8px 11px!important; border:1px solid #c8cbd2!important;border-radius:10px!important; color:inherit!important;background:transparent!important; font-weight:750!important;font-size:11px!important; cursor:pointer; } #main-content .pati-weekly-status{ margin:9px 0;padding:8px 12px;border-radius:10px; font-size:12px;color:inherit;background:rgba(126,137,159,.1); } #main-content .pati-weekly-podium{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:stretch; } #main-content .pati-weekly-person{ position:relative;display:flex;flex-direction:column;align-items:center;gap:10px; box-sizing:border-box;min-width:0;min-height:238px; padding:17px 13px 14px;border-radius:17px;overflow:hidden; border:2px solid transparent; } #main-content .pati-weekly-person.is-gold{ border-color:#c39122; background:linear-gradient(145deg,#fff6d7 0%,#f4d782 48%,#f9eac1 100%); color:#4d330a; box-shadow:0 8px 24px rgba(163,110,17,.11),inset 0 0 0 1px #fff6; } #main-content .pati-weekly-person.is-bronze{ border-color:#a05c39; background:linear-gradient(145deg,#f9e8dd 0%,#d7a68b 48%,#f6d9c7 100%); color:#563020; box-shadow:0 8px 24px rgba(120,73,43,.1),inset 0 0 0 1px #fff7; } #main-content .pati-weekly-person::after{ content:"";position:absolute;top:-75px;right:-45px;transform:rotate(34deg); width:75px;height:200px;background:linear-gradient(90deg,transparent,#ffffff45,transparent); pointer-events:none; } #main-content .pati-weekly-place{ text-align:center;white-space:normal;font-size:10px;letter-spacing:.055em; font-weight:900;color:inherit;line-height:1.4; } #main-content .pati-weekly-profile{ width:100%;display:flex!important;flex:1;flex-direction:column; align-items:center;justify-content:center;gap:5px;padding:0!important; background:transparent!important;border:0!important;color:inherit!important; cursor:pointer;text-align:center;min-width:0; } #main-content .pati-weekly-profile:focus-visible, #main-content .pati-weekly-head button:focus-visible{ outline:3px solid #285ad3!important;outline-offset:3px; } #main-content .pati-weekly-avatar-ring{ display:grid;place-items:center;width:88px;height:88px;padding:5px; border-radius:50%;box-sizing:border-box; border:4px solid #c69726; background:linear-gradient(145deg,#fff4c3,#c69125); box-shadow:0 4px 11px #704b1b2a; } #main-content .is-bronze .pati-weekly-avatar-ring{ border-color:#9e6347;background:linear-gradient(145deg,#f4ceb5,#a46d4c); } #main-content .pati-weekly-avatar{ display:grid;place-items:center;width:100%;height:100%; border-radius:50%;object-fit:cover;background:#fff; font-size:29px;overflow:hidden;color:#6b5032; } #main-content .pati-weekly-person-name{ display:block;max-width:100%;font-size:14px;font-weight:850; overflow-wrap:anywhere;line-height:1.3;color:inherit; } #main-content .pati-weekly-handle{ display:block;max-width:100%;font-size:11px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8;color:inherit; } #main-content .pati-weekly-bottom{ width:100%;margin-top:auto;border-top:1px solid #6c541d33; padding-top:9px;display:flex;flex-direction:column;gap:5px; text-align:center;align-items:center;color:inherit; } #main-content .pati-weekly-bottom span{font-size:11px;font-weight:700;color:inherit} #main-content .pati-weekly-bottom strong{ display:flex;align-items:center;gap:4px;font-size:12px;font-weight:850; color:inherit;line-height:1.35; } #main-content .pati-weekly-bottom img{width:15px;height:15px;object-fit:contain} #main-content .pati-weekly-empty{ flex:1;display:grid;place-items:center;font-size:12px; text-align:center;opacity:.75;color:inherit; } #main-content .pati-weekly-previous{ display:flex;gap:8px;flex-wrap:wrap;align-items:center; padding:12px 4px 0;font-size:12px;line-height:1.6;color:inherit; } #main-content .pati-weekly-previous>strong{font-size:11px;margin-right:4px} #main-content .pati-weekly-previous>span{ border:1px solid #8d91992d;padding:5px 8px;border-radius:999px; background:#8d91990d;font-size:11px; } #main-content .pati-weekly-rules{ margin:15px 0 0;font-size:11px;line-height:1.65;opacity:.74;color:inherit; } html[data-pati-theme="dark"] #main-content .pati-weekly-board{ border-color:#3d4049;background:#1b1d24;color:#f7f8fb; } html[data-pati-theme="dark"] #main-content .pati-weekly-person.is-gold{ background:linear-gradient(145deg,#423014,#8d621e 55%,#4d3916); color:#fff0c5;border-color:#d5ad51; } html[data-pati-theme="dark"] #main-content .pati-weekly-person.is-bronze{ background:linear-gradient(145deg,#492d28,#7d4f39 55%,#4f302b); color:#ffe5d1;border-color:#b17c62; } @media(max-width:510px){ #main-content .pati-weekly-board{padding:13px;border-radius:16px;margin:14px 0 22px} #main-content .pati-weekly-podium{gap:8px} #main-content .pati-weekly-person{padding:13px 8px 11px;min-height:218px;gap:8px} #main-content .pati-weekly-avatar-ring{width:72px;height:72px;padding:4px;border-width:3px} #main-content .pati-weekly-place{font-size:9px} #main-content .pati-weekly-person-name{font-size:12px} #main-content .pati-weekly-bottom strong{font-size:11px} #main-content .pati-weekly-head button{padding:6px 8px!important;min-height:34px} #main-content .pati-weekly-head p{font-size:11px} } @media(max-width:340px){#main-content .pati-weekly-avatar-ring{width:62px;height:62px}#main-content .pati-weekly-place{font-size:8px}} @media(prefers-reduced-motion:reduce){#main-content .pati-weekly-person::after{display:none}} /* Compact placements 3-5 follow the two featured medal cards. */ #main-content .pati-weekly-runners{ margin-top:12px;display:flex;flex-direction:column;gap:7px; } #main-content .pati-weekly-compact-row{ display:flex;align-items:center;gap:10px;min-height:60px; padding:6px 10px;border:1px solid #e3e5ea;border-radius:13px; box-sizing:border-box;min-width:0;background:rgba(137,145,159,.045); color:inherit; } #main-content .pati-weekly-compact-rank{ flex:0 0 31px;display:grid;place-items:center; height:31px;border-radius:10px; background:rgba(105,111,123,.12);color:inherit; font-size:12px;font-weight:850; } #main-content .pati-weekly-compact-profile{ flex:1;min-width:0;display:flex!important;align-items:center!important; gap:10px!important;padding:0!important;text-align:left!important; border:0!important;background:transparent!important; color:inherit!important;cursor:pointer; } #main-content .pati-weekly-compact-profile:focus-visible{ outline:3px solid #5c86df!important;outline-offset:4px; border-radius:8px; } #main-content .pati-weekly-mini-avatar{ display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px; box-sizing:border-box;border:2px solid #c5cad3; background:#eef0f3;border-radius:50%;overflow:hidden; font-size:19px;color:#5d6573; } #main-content .pati-weekly-mini-avatar .pati-weekly-avatar{ width:100%;height:100%;object-fit:cover;font-size:17px; border-radius:50%;background:transparent; } #main-content .pati-weekly-compact-name{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; } #main-content .pati-weekly-compact-name strong{ color:inherit;font-size:12px;font-weight:800; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-weekly-compact-name small{ font-size:10px;opacity:.7;color:inherit; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-weekly-compact-score{ flex:0 0 auto;display:flex;flex-direction:column;gap:1px; text-align:right;color:inherit;padding-left:5px; } #main-content .pati-weekly-compact-score strong{ color:inherit;font-size:12px;font-weight:850;font-variant-numeric:tabular-nums; } #main-content .pati-weekly-compact-score small{ color:inherit;font-size:10px;opacity:.65; } #main-content .pati-weekly-compact-placeholder{ flex:1;display:flex;align-items:center;gap:10px; min-width:0;font-size:11px;opacity:.7;color:inherit; } #main-content .pati-weekly-compact-row.is-empty .pati-weekly-compact-rank{ opacity:.75; } html[data-pati-theme="dark"] #main-content .pati-weekly-compact-row{ border-color:#3b3f49;background:#252832;color:#f7f8fa; } html[data-pati-theme="dark"] #main-content .pati-weekly-mini-avatar{ border-color:#676d79;background:#383d48;color:#e7e8eb; } @media(max-width:510px){ #main-content .pati-weekly-runners{margin-top:9px;gap:6px} #main-content .pati-weekly-compact-row{ gap:7px;min-height:55px;padding:5px 8px;border-radius:12px; } #main-content .pati-weekly-compact-rank{ flex-basis:27px;height:27px;font-size:11px;border-radius:8px; } #main-content .pati-weekly-mini-avatar{ flex-basis:36px;width:36px;height:36px;font-size:16px; } #main-content .pati-weekly-compact-profile{gap:7px!important} #main-content .pati-weekly-compact-name strong{font-size:11px} #main-content .pati-weekly-compact-name small{font-size:9px} #main-content .pati-weekly-compact-score strong{font-size:11px} } /* patiyiz-mobile-auth-redesign-20261030.css */ /* Mobile-first sign-in and registration; desktop keeps the existing split layout. The hero now contains the ACTUAL Patiyiz logo asset, never a generic paw SVG. */ .auth-story-top .auth-story-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff!important;border:1px solid #ffffffcc!important;border-radius:13px!important;padding:5px!important;flex:0 0 45px!important;width:45px!important;height:45px!important} .auth-story-top .auth-story-icon img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important} .auth-pane .auth-brand .patiyiz-chosen-logo{width:100%!important;height:100%!important;object-fit:contain!important} .auth-pane .pati-auth-password-field{display:flex;position:relative;width:100%;min-width:0;align-items:center} .auth-pane .pati-auth-password-field input{width:100%;min-width:0;padding-right:53px!important} .auth-pane .pati-auth-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:#6a7078;cursor:pointer} .auth-pane .pati-auth-eye:focus-visible{outline:2px solid #202126!important;outline-offset:1px} .auth-pane .pati-auth-terms{display:block!important;line-height:1.55!important;margin:10px 0!important} .auth-pane .pati-auth-terms label{display:flex!important;gap:8px!important;align-items:flex-start!important;font-size:12px!important;line-height:1.65!important;padding:5px 0!important;cursor:pointer!important} .auth-pane .pati-auth-terms input[type="checkbox"]{flex:0 0 18px!important;width:18px!important;min-width:18px!important;height:18px!important;margin:1px 0!important;accent-color:#151619!important} @media(max-width:680px){ html:has(#auth-root:not(.hidden)),body:has(#auth-root:not(.hidden)){overflow-x:hidden!important} #auth-root.auth-root:not(.hidden){display:block!important;min-height:100dvh!important;height:auto!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:0!important;background:#fff!important;overflow-x:hidden!important} #auth-root .auth-shell{display:flex!important;flex-direction:column!important;min-height:100dvh!important;height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} #auth-root .auth-story{display:flex!important;flex:0 0 auto!important;position:relative!important;box-sizing:border-box!important;min-height:228px!important;height:clamp(228px,36dvh,320px)!important;width:100%!important;max-width:100%!important;border:0!important;overflow:hidden!important;justify-content:space-between!important;padding:calc(16px + env(safe-area-inset-top,0px)) 23px 41px!important;background-position:center 44%!important;background-size:cover!important;background-color:#202025!important} #auth-root .auth-story::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,15,.45) 0%,rgba(10,12,15,.02) 35%,rgba(10,12,15,.55) 100%);pointer-events:none} #auth-root .auth-story-top{gap:10px!important;align-items:center!important;min-width:0!important} #auth-root .auth-story-top .auth-story-icon{width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important} #auth-root .auth-story-top>strong{font-size:25px!important;color:#fff!important;line-height:1.1!important;letter-spacing:-1px!important} #auth-root .auth-story-topline{display:none!important} #auth-root .auth-story-bottom{position:relative;z-index:2;max-width:360px} #auth-root .auth-story-label{display:none!important} #auth-root .auth-story h2{font-size:clamp(22px,6.2vw,30px)!important;letter-spacing:-.9px!important;line-height:1.14!important;margin:0 0 8px!important;text-wrap:balance!important;color:#fff!important} #auth-root .auth-story h2 em{color:#fff!important} #auth-root .auth-story-bottom>p{font-size:11.5px!important;line-height:1.5!important;color:#f8f8f9!important;max-width:290px!important;opacity:.96!important;margin:0!important} #auth-root .auth-pane{display:block!important;flex:1 0 auto!important;position:relative!important;z-index:5!important;box-sizing:border-box!important;min-height:0!important;width:100%!important;max-width:100%!important;margin:-22px 0 0!important;padding:23px clamp(18px,5vw,28px) max(29px,env(safe-area-inset-bottom,0px))!important;border:0!important;border-radius:25px 25px 0 0!important;background:#fff!important;color:#17191d!important;box-shadow:0 -13px 25px #0000000a!important;overflow:visible!important} #auth-root .auth-pane .auth-card{box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:450px!important;margin:0 auto!important;padding:0!important;background:#fff!important;color:#17191d!important;border:0!important;box-shadow:none!important} #auth-root .auth-pane .auth-brand{display:none!important} #auth-root .auth-pane .auth-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;padding:4px!important;border-radius:14px!important;margin:0 0 21px!important;border:1px solid #e9eaea!important;background:#f4f5f4!important} #auth-root .auth-pane .auth-tabs button{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:100%!important;min-height:42px!important;padding:8px 10px!important;border-radius:10px!important;font-size:13px!important;color:#777b80!important;background:transparent!important} #auth-root .auth-pane .auth-tabs button.active{background:#fff!important;color:#151619!important;box-shadow:0 2px 9px #00000012!important} #auth-root .auth-pane .auth-eyebrow{display:none!important} #auth-root .auth-pane .auth-card h2{font-size:clamp(25px,6.6vw,32px)!important;letter-spacing:-1px!important;font-weight:850!important;line-height:1.2!important;margin:0 0 7px!important;color:#151619!important} #auth-root .auth-pane .auth-sub{font-size:12px!important;line-height:1.55!important;margin:0 0 19px!important;color:#858b93!important;max-width:360px!important} #auth-root .auth-pane .pati-field{margin:0 0 14px!important;gap:7px!important} #auth-root .auth-pane .pati-field label{font-size:12px!important;font-weight:800!important;color:#24262a!important} #auth-root .auth-pane .pati-field input:not([type="checkbox"]){display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:49px!important;height:49px!important;margin:0!important;padding:11px 13px!important;border-radius:12px!important;border:1px solid #dfe3e0!important;background:#fff!important;color:#17191d!important;font-size:16px!important;outline-offset:2px!important;-webkit-appearance:none!important;appearance:none!important} #auth-root .auth-pane .pati-auth-password-field input{padding-right:50px!important} #auth-root .auth-pane .pati-field input::placeholder{color:#9ca2aa!important} #auth-root .auth-pane .pati-field input:focus{border-color:#151619!important;box-shadow:0 0 0 3px #15161914!important;outline:none!important} #auth-root .auth-pane .pati-auth-eye{color:#5e646c!important} #auth-root .auth-pane .auth-submit{display:flex!important;align-items:center!important;justify-content:space-between!important;box-sizing:border-box!important;width:100%!important;min-height:52px!important;margin:13px 0 0!important;padding:0 18px!important;border-radius:13px!important;background:#161719!important;color:#fff!important;font-size:14px!important;font-weight:800!important;box-shadow:0 9px 23px #00000012!important} #auth-root .auth-pane .auth-bottom{margin:11px 0!important;text-align:center!important} #auth-root .auth-pane .auth-bottom .btn-link{min-height:41px!important;padding:10px!important;font-size:12px!important;color:#151619!important} #auth-root .auth-pane .small-note{font-size:11px!important;line-height:1.5!important;color:#878c94!important;padding-top:13px!important;border-top:1px solid #e9e9ec!important;margin-top:13px!important} #auth-root .auth-pane .pati-auth-terms{font-size:11px!important;color:#5e6268!important} #auth-root .auth-pane .pati-auth-terms a{color:#17191d!important;text-decoration:underline!important;text-underline-offset:2px!important} #auth-root .auth-pane .pati-note{margin:0 0 12px!important} } @media(max-width:370px){ #auth-root .auth-story{height:215px!important;min-height:215px!important;padding-inline:18px!important} #auth-root .auth-pane{padding-left:17px!important;padding-right:17px!important} #auth-root .auth-pane .auth-card h2{font-size:24px!important} #auth-root .auth-pane .auth-tabs{margin-bottom:15px!important} #auth-root .auth-pane .pati-field{margin-bottom:10px!important} } @media(max-height:700px) and (max-width:680px){ #auth-root .auth-story{height:205px!important;min-height:205px!important;padding-bottom:28px!important} #auth-root .auth-story h2{font-size:21px!important} #auth-root .auth-story-bottom>p{font-size:10.5px!important} #auth-root .auth-pane{padding-top:17px!important} } /* Auth screen must fully disappear after a successful login at every viewport width. */ #auth-root.auth-root.hidden{display:none!important;visibility:hidden!important} /* Separate first-name and surname inputs for Patiyiz registration. */ #auth-root #auth-form .pati-auth-name-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; align-items:start; width:100%; min-width:0; box-sizing:border-box; } #auth-root #auth-form .pati-auth-name-fields .pati-field{ min-width:0; width:100%; box-sizing:border-box; } #auth-root #auth-form .pati-auth-name-fields input{ box-sizing:border-box; width:100%!important; min-width:0; max-width:100%; } @media(max-width:520px){ #auth-root #auth-form .pati-auth-name-fields{ grid-template-columns:minmax(0,1fr); gap:0; } } /* patiyiz-clean-story-dm-shares-20261030.css */ /* Story reshares: source author's REAL avatar left, clearly readable CTA. Normal camera stories retain their original fullscreen behavior. */ #story-overlay.pati-story-has-source .pati-story-share-card{ padding:0!important;gap:0!important; border-radius:16px!important;overflow:hidden!important; border:0!important; width:min(79vw,326px)!important;max-height:100%!important; background:#fff!important;box-shadow:0 16px 45px #0006!important; } #story-overlay.pati-story-has-source .pati-story-share-card-heading{ display:flex!important;align-items:center!important; padding:10px 11px!important;margin:0!important; gap:9px!important;min-width:0!important;min-height:58px!important; background:#fff!important;color:#181a1e!important; } #story-overlay.pati-story-has-source .pati-story-share-profile{ display:flex!important;align-items:center!important;gap:9px!important; min-width:0!important;width:100%!important;max-width:100%!important; padding:0!important;margin:0!important;border:0!important; background:transparent!important;color:#181a1e!important;text-align:left!important; cursor:pointer!important; } #story-overlay.pati-story-has-source .pati-story-share-profile>.avatar, #story-overlay.pati-story-has-source .pati-story-share-profile>.avatar.s, #story-overlay.pati-story-has-source .pati-story-share-default-avatar{ display:grid!important;place-items:center!important; width:35px!important;height:35px!important;min-width:35px!important; flex:0 0 35px!important;border-radius:50%!important;overflow:hidden!important; background:#222!important;color:#fff!important;font-size:14px!important; } #story-overlay.pati-story-has-source .pati-story-share-profile .avatar img{ width:100%!important;height:100%!important;object-fit:cover!important; } #story-overlay.pati-story-has-source .pati-story-share-profile>span:last-child{ display:flex!important;flex-direction:column!important;min-width:0!important;gap:3px!important; } #story-overlay.pati-story-has-source .pati-story-share-profile strong{ display:block!important;min-width:0!important;font-weight:850!important; color:#1b1b1e!important;font-size:13px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } #story-overlay.pati-story-has-source .pati-story-share-profile small{ display:block!important;color:#71747a!important;font-size:11px!important; } #story-overlay.pati-story-has-source .pati-story-share-media{ width:100%!important;min-height:110px!important; height:min(35dvh,315px)!important;max-height:min(35dvh,315px)!important; border-radius:0!important;margin:0!important;background:#f2f2f3!important; } #story-overlay.pati-story-has-source .pati-story-share-media>img, #story-overlay.pati-story-has-source .pati-story-share-media>video{ border-radius:0!important;background:#f2f2f3!important; width:100%!important;height:100%!important;object-fit:contain!important; } #story-overlay.pati-story-has-source .pati-story-share-post-caption{ padding:8px 13px 0!important;margin:0!important;color:#4b4d53!important; font-size:12px!important;line-height:1.4!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{ display:flex!important;align-items:center!important;justify-content:space-between!important; position:relative!important;inset:auto!important; width:calc(100% - 20px)!important;margin:10px!important; max-width:100%!important;min-height:44px!important;height:44px!important; flex:0 0 44px!important;box-sizing:border-box!important; padding:9px 13px!important;border:0!important;border-radius:11px!important; background:#111216!important;color:#fff!important;opacity:1!important; font-size:13px!important;line-height:1.3!important;letter-spacing:0!important; font-weight:850!important;text-shadow:none!important; box-shadow:0 4px 12px #00000024!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>span{ font-size:19px!important;line-height:1!important;color:#fff!important; } #story-overlay.pati-story-has-source .pati-story-share-sound{z-index:12!important} @media(max-width:740px){ #story-overlay.pati-story-has-source .pati-story-share-card{width:min(80vw,326px)!important} } @media(max-height:670px){ #story-overlay.pati-story-has-source .pati-story-share-media{height:min(29dvh,225px)!important;max-height:min(29dvh,225px)!important} #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{min-height:39px!important;height:39px!important;flex-basis:39px!important} } /* Tagged/shared post cards in DM: no black outer bubble or black bands around media. Text-only outgoing messages remain black as chosen by the user. */ #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.pati-dm-shared-message, #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine.pati-dm-shared-message, html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-window .chat-history .bubble-chat.mine.pati-dm-shared-message{ box-sizing:border-box!important; width:min(84vw,375px)!important;max-width:min(88vw,375px)!important;min-width:0!important; padding:0!important;margin:0!important;overflow:hidden!important; background:transparent!important;border:0!important;box-shadow:none!important; color:inherit!important;border-radius:14px!important; } #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-shared-message>.pati-dm-shared-card{ width:100%!important;box-sizing:border-box!important;border-radius:14px!important; overflow:hidden!important;background:#fff!important;color:#1a1c21!important; border:1px solid #e9e9eb!important; } html[data-pati-theme="dark"] #main-content .pati-dm-layout .chat-history .bubble-chat.pati-dm-shared-message>.pati-dm-shared-card{ background:#26272b!important;color:#f3f3f4!important;border-color:#41444c!important; } #main-content .pati-dm-layout .pati-dm-shared-media, #main-content .pati-dm-layout .pati-dm-shared-video-wrap{ background:transparent!important; } #main-content .pati-dm-layout .pati-dm-shared-video{ object-fit:contain!important;background:transparent!important; } #main-content .pati-dm-layout .pati-dm-shared-footer{ min-height:40px!important;padding:10px 12px!important; font-size:13px!important;font-weight:850!important;color:#1683f6!important; } #main-content .pati-dm-layout .bubble-chat.pati-dm-shared-message>small{ background:transparent!important;color:#777e88!important;font-size:10px!important; padding:3px 7px!important;text-align:right!important; } /* patiyiz-pan-zoom-photos-20261030.css */ /* Touch-driven photo navigation: pan across the whole zoomed image. */ .pati-dm-lightbox .pati-dm-lightbox-stage{ display:flex!important;align-items:center!important;justify-content:center!important; position:relative!important;overflow:hidden!important; width:100%!important;max-width:100%!important;min-width:0!important; touch-action:none!important;overscroll-behavior:contain!important; user-select:none!important;-webkit-user-select:none!important; cursor:zoom-in!important; } .pati-dm-lightbox .pati-dm-lightbox-stage.pati-zoomed{ cursor:grab!important; } .pati-dm-lightbox .pati-dm-lightbox-stage.pati-zoomed:active{cursor:grabbing!important} .pati-dm-lightbox .pati-dm-lightbox-stage img{ display:block!important;position:relative!important; max-width:100%!important;max-height:calc(100dvh - 120px)!important; width:auto!important;height:auto!important;object-fit:contain!important; transform-origin:center center!important; transition:none!important;will-change:transform!important; user-select:none!important;-webkit-user-select:none!important; -webkit-user-drag:none!important;pointer-events:none!important; } .pati-dm-lightbox .pati-dm-lightbox-actions [data-dm-zoom]{ min-width:37px!important;min-height:37px!important; } .pati-dm-lightbox .pati-dm-lightbox-stage:focus-visible{outline:2px solid #2388fa!important;outline-offset:-3px!important} #main-content .pati-carousel-slide .pati-photo img.pati-pinching, #main-content .pati-doubletap-photo .pati-photo img.pati-pinching{ position:relative!important;z-index:12!important; will-change:transform!important;transition:none!important; pointer-events:none!important;user-select:none!important; } #main-content .pati-carousel-slide:has(.pati-pinching){scroll-snap-align:none!important} @media(max-width:740px){ .pati-dm-lightbox .pati-dm-lightbox-stage{height:auto!important;min-height:45dvh!important;max-height:calc(100dvh - 110px)!important} .pati-dm-lightbox .pati-dm-lightbox-stage img{max-height:calc(100dvh - 125px)!important} } /* patiyiz-crop-insights-mobile-final-20261029.css */ /* 2026-10-29 • Final photo editor / private insights mobile repairs. Deliberately uses existing secure Supabase metrics; no fabricated profile activity. */ .pati-full-crop-dialog{overscroll-behavior:contain;overflow:hidden!important} .pati-full-crop-shell{min-height:0;height:100dvh;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto} .pati-full-crop-head{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px;background:var(--pui-paper,#f9f9fa);z-index:1;min-width:0} .pati-full-crop-head>strong{overflow:hidden;text-overflow:ellipsis} .pati-full-crop-stage{min-height:0;width:100%;padding:clamp(8px,2vw,18px);overflow:hidden;aspect-ratio:auto!important;background:#242528!important} .pati-full-crop-stage canvas{ width:auto!important;height:auto!important; max-width:min(100%,720px)!important;max-height:100%!important; object-fit:contain!important;touch-action:none!important; box-sizing:border-box!important;user-select:none; box-shadow:0 0 0 3px #fff9,0 8px 35px #0006!important } .pati-full-crop-guide{border:0!important} .pati-full-crop-controls{ background:var(--pui-paper,#fafafa); min-height:0;max-height:min(43dvh,390px); overscroll-behavior:contain; gap:10px;padding-bottom:max(15px,env(safe-area-inset-bottom)); } .pati-crop-top-controls button{flex:0 1 110px;min-width:64px;max-width:110px} .pati-crop-ratios{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .pati-crop-ratios button{scroll-snap-align:center} .pati-full-crop-zoom input{min-width:0} .pati-crop-status:not(:empty){color:#a13631;font-weight:750;text-align:center} .pati-creator-dashboard{isolation:isolate;overscroll-behavior:contain} .pati-creator-dashboard .pati-creator-scroll{scrollbar-gutter:stable;touch-action:pan-y} .pati-creator-dashboard .pati-creator-container{max-width:760px} .pati-creator-dashboard .pati-creator-ranges button, .pati-creator-dashboard .pati-creator-tabs button{cursor:pointer} .pati-creator-dashboard .pati-creator-stat, .pati-creator-dashboard .pati-creator-profile-moves button{transition:background .15s ease} .pati-creator-dashboard .pati-creator-stat:hover, .pati-creator-dashboard .pati-creator-profile-moves button:hover{background:var(--pui-raised,#f2f3f5)} .pati-creator-dashboard .pati-creator-stat:focus-visible, .pati-creator-dashboard .pati-creator-visitor:focus-visible{outline:3px solid #6486cb;outline-offset:2px} .pati-creator-dashboard .pati-creator-visitor{min-width:0;flex-wrap:wrap} .pati-creator-dashboard .pati-creator-visitor time{white-space:nowrap} .pati-profile-insights-preview{width:calc(100% - 24px)!important;margin:13px 12px!important;min-width:0!important} .pati-profile-insights-preview .pati-profile-insights-value{white-space:nowrap} .pati-profile-insights-preview .pati-profile-insights-arrow.increase{color:#15945b!important} .pati-profile-insights-preview .pati-profile-insights-arrow.decrease{color:#d33e48!important} html[data-pati-theme="dark"] .pati-full-crop-head, html[data-pati-theme="dark"] .pati-full-crop-controls{background:#17181e!important;color:#f8f8fa!important} html[data-pati-theme="dark"] .pati-full-crop-stage{background:#090a0d!important} html[data-pati-theme="dark"] .pati-creator-dashboard .pati-creator-scroll, html[data-pati-theme="dark"] .pati-creator-dashboard .pati-creator-head, html[data-pati-theme="dark"] .pati-creator-dashboard{background:#17181e!important;color:#f8f8fa!important} html[data-pati-theme="dark"] .pati-creator-dashboard :is(.pati-creator-stat,.pati-creator-detail-grid article,.pati-creator-audience-count,.pati-creator-breakdown){ background:#252730!important;color:#f8f8fa!important;border-color:#444752!important} html[data-pati-theme="dark"] .pati-creator-dashboard :is(h2,h3,strong,.pati-creator-detail-head button){ color:#f8f8fa!important} html[data-pati-theme="dark"] .pati-creator-dashboard :is(p,small,.pati-creator-footnote,.pati-creator-private){ color:#c7c9d4!important} @media(max-width:600px){ .pati-full-crop-dialog{width:100vw!important;max-width:100vw!important} .pati-full-crop-head{min-height:58px;gap:7px;padding-inline:12px} .pati-full-crop-head button{padding:8px 11px;min-height:40px;flex-shrink:0} .pati-full-crop-stage{padding:7px} .pati-full-crop-controls{max-height:44dvh;padding:10px 13px max(14px,env(safe-area-inset-bottom));gap:8px} .pati-crop-top-controls{gap:7px} .pati-crop-top-controls button{min-height:48px} .pati-creator-dashboard .pati-creator-container{padding:12px 12px max(48px,env(safe-area-inset-bottom))} .pati-creator-dashboard .pati-creator-kpis,.pati-creator-dashboard .pati-creator-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .pati-creator-dashboard .pati-creator-stat{min-width:0} } @media(max-height:610px) and (orientation:landscape){ .pati-full-crop-controls{max-height:39dvh;gap:5px;padding-block:6px} .pati-crop-top-controls button{min-height:35px;font-size:17px} .pati-crop-ratios button{min-height:34px;padding:6px 12px} .pati-full-crop-controls>p:not(.pati-crop-status){display:none} } /* 2026-10-30: publish buttons must remain reachable on every phone height. */ #modal-root .pati-mobile-full-page-form:has(#post-form), #modal-root .pati-mobile-full-page-form:has(#story-form){min-height:0!important;max-height:100dvh!important} #modal-root .pati-mobile-full-page-form #post-form .modal-footer, #modal-root .pati-mobile-full-page-form #story-form .modal-footer{ display:flex!important;visibility:visible!important;opacity:1!important; flex:0 0 auto!important;position:relative!important; min-height:72px!important;padding:10px 14px max(13px,env(safe-area-inset-bottom,0px))!important; z-index:20!important;background:var(--pui-paper,#fff)!important; } #modal-root #post-form .modal-footer button[type="submit"], #modal-root #story-form .modal-footer button[type="submit"]{ display:inline-flex!important;visibility:visible!important;opacity:1!important; min-width:110px!important;min-height:49px!important; align-items:center!important;justify-content:center!important; font-size:16px!important;font-weight:800!important; background:#17191d!important;color:#fff!important;border-radius:13px!important; } #modal-root #post-form .modal-footer button[type="submit"]::after{ content:none!important;display:none!important } #patiyiz-system-media .pati-system-head{ position:relative;top:auto;z-index:15;padding:8px 10px; background:#f7f7f8;box-sizing:border-box;max-width:100%; } #patiyiz-system-media .pati-system-head .pati-system-head-publish{ display:inline-flex;align-items:center;justify-content:center; width:auto!important;max-width:112px;min-width:70px;height:auto!important;min-height:43px!important; padding:8px 10px!important;border:0!important;border-radius:12px!important; background:#fff!important;color:#17181b!important;font-size:13px!important;font-weight:850!important; text-align:center;white-space:normal;line-height:1.2!important; } #patiyiz-system-media .pati-system-head .pati-system-head-publish[hidden]{display:none!important} #patiyiz-system-media .pati-system-head .pati-system-head-publish:disabled{opacity:.5!important;cursor:wait} #patiyiz-system-media .pati-system-publish-actions{ position:sticky!important;bottom:0!important;z-index:12!important; background:#f7f7f8!important; margin:12px 0 0!important;padding:12px 8px max(12px,env(safe-area-inset-bottom,0px))!important; border-top:1px solid #42444c!important;box-sizing:border-box!important; } #patiyiz-system-media #pati-system-publish{ display:flex!important;align-items:center!important;justify-content:center!important; visibility:visible!important;min-height:50px!important; background:#fff!important;color:#17181b!important; } #patiyiz-system-media #pati-system-publish:disabled{opacity:.55!important} html[data-pati-theme="dark"] #modal-root .pati-mobile-full-page-form :is(#post-form,#story-form) .modal-footer{ background:#17191d!important; } html[data-pati-theme="dark"] #modal-root :is(#post-form,#story-form) .modal-footer button[type="submit"]{ background:#f5f6f8!important;color:#17191d!important;border-color:#f5f6f8!important; } /* One timeline: vaccination, veterinarian and ordinary care tasks. */ .pati-care-calendar{ margin:14px 12px 20px;padding:15px 12px 12px; border:1px solid var(--pui-border,#e6e6ec);border-radius:17px; background:var(--pui-raised,#f8f8fa);color:var(--pui-text,#17191d); box-sizing:border-box;min-width:0; } .pati-care-calendar-head{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:8px;margin-bottom:13px} .pati-care-calendar-head strong{text-align:center;text-transform:capitalize;font-size:15px;font-weight:850} .pati-care-calendar-head button{ width:42px;height:42px;border:1px solid var(--pui-border,#d8d8df);border-radius:12px; background:var(--pui-paper,#fff);color:inherit;font-size:25px;cursor:pointer; } .pati-care-calendar-days,.pati-care-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .pati-care-calendar-days span{text-align:center;font-size:10px;font-weight:800;opacity:.7;padding:4px 0 8px} .pati-care-calendar-grid button{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1px;min-width:0;min-height:48px;padding:3px 1px; border:1px solid transparent;background:transparent;color:inherit;border-radius:12px; font-size:12px;font-weight:740;cursor:pointer; } .pati-care-calendar-grid button.is-outside{opacity:.35} .pati-care-calendar-grid button.is-today{border-color:var(--pui-border,#babcc6)} .pati-care-calendar-grid button.is-selected{ background:#20232a!important;color:white!important;border-color:#20232a!important; } .pati-care-calendar-grid button i{ display:grid;place-items:center;width:18px;height:17px;border-radius:7px; background:#e2e5f5;color:#1c233a;font-size:10px;font-weight:850;font-style:normal; } .pati-care-calendar-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:12px} .pati-care-calendar-foot small{font-size:10px;line-height:1.5;color:var(--pui-secondary,#747780)} .pati-care-calendar-foot button{ flex:0 0 auto;min-height:35px;padding:7px 12px;border-radius:10px;border:1px solid var(--pui-border,#ddd); background:var(--pui-paper,#fff);color:inherit;font-size:12px;font-weight:750; } html[data-pati-theme="dark"] .pati-care-calendar{background:#24262d!important;border-color:#444751!important;color:#f6f7f9!important} html[data-pati-theme="dark"] .pati-care-calendar-head button, html[data-pati-theme="dark"] .pati-care-calendar-foot button{background:#181a20!important;color:#f6f7f9!important;border-color:#4c505b!important} @media(max-width:390px){ .pati-care-calendar{margin-inline:7px;padding-inline:7px} .pati-care-calendar-grid{gap:2px} .pati-care-calendar-grid button{min-height:43px} .pati-care-calendar-grid button i{width:16px;height:15px} } /* Own story hearts: visible above delete, without covering activity or swipe controls. */ #story-overlay .pati-story-like.pati-story-like-own{ position:absolute!important; right:14px!important; bottom:calc(78px + env(safe-area-inset-bottom,0px))!important; z-index:14!important; width:45px!important;height:45px!important; display:grid!important;place-items:center!important; background:#15171dbb!important;color:#fff!important; border:1px solid #ffffff88!important;border-radius:50%!important; font-size:30px!important;line-height:1!important; } #story-overlay .pati-story-like.pati-story-like-own.active{ color:#ff335d!important;background:#fff!important; } #story-overlay.pati-story-viewers-open .pati-story-like-own{display:none!important} /* 30 Oct 2026 — story/reels composer layout repair. * One Share action in the lower control card, never a second action in the header. * This layer is intentionally scoped to the OS gallery/camera composer only. */ #patiyiz-system-media{ overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; padding:max(14px,env(safe-area-inset-top,0px)) clamp(12px,3.2vw,22px) max(20px,env(safe-area-inset-bottom,0px))!important; } #patiyiz-system-media .pati-system-panel{ width:min(100%,580px)!important; min-height:100%!important; max-height:none!important; overflow:visible!important; padding-inline:0!important; display:flex!important; flex-direction:column!important; gap:clamp(12px,2.2vw,18px)!important; } #patiyiz-system-media .pati-system-head{ display:grid!important; grid-template-columns:48px minmax(0,1fr) 48px!important; align-items:center!important; gap:8px!important; min-height:58px!important; padding:7px 2px 10px!important; margin:0!important; background:#f7f7f8!important; border-bottom:1px solid #e4e5e9!important; } #patiyiz-system-media .pati-system-head strong{ color:#17191d!important; text-align:center!important; font-size:clamp(17px,4.5vw,21px)!important; line-height:1.2!important; letter-spacing:-.03em!important; white-space:normal!important; } #patiyiz-system-media .pati-system-head [data-system="close"]{ display:grid!important; place-items:center!important; width:44px!important; height:44px!important; line-height:1!important; font-size:33px!important; padding:0!important; text-align:center!important; } #patiyiz-system-media .pati-system-head-spacer{ display:block!important;width:44px!important;height:44px!important; } #patiyiz-system-media .pati-system-head .pati-system-head-publish{ display:none!important; } #patiyiz-system-media #pati-system-preview{ width:100%!important; min-width:0!important; display:flex; flex-direction:column; gap:13px; } #patiyiz-system-media #pati-system-preview[hidden]{display:none!important} #patiyiz-system-media .pati-system-preview-wrap{ flex:none!important; width:100%!important; overflow:hidden!important; border-radius:20px!important; background:#15161b!important; } #patiyiz-system-media .pati-system-preview-media{ border-radius:18px!important; background:#15161b!important; overscroll-behavior-x:contain; } #patiyiz-system-media[data-mode="story"] .pati-system-preview-media, #patiyiz-system-media[data-mode="reels"] .pati-system-preview-media{ width:min(100%,355px)!important; max-width:100%!important; max-height:min(49dvh,550px)!important; margin-inline:auto!important; } #patiyiz-system-media .pati-system-preview-media :is(img,video){ width:100%!important; height:100%!important; object-fit:contain!important; background:#15161b!important; } #patiyiz-system-media .pati-system-summary{ margin:1px 0!important; color:#b8bbc4!important; text-align:center!important; line-height:1.4!important; font-size:13px!important; } #patiyiz-system-media .pati-system-edit-panel{ width:100%; min-width:0; display:flex; flex-direction:column; gap:13px; border:1px solid #e2e4e9; background:#fff; border-radius:20px; padding:clamp(12px,3vw,18px); margin:2px 0 0; box-shadow:none; } #patiyiz-system-media .pati-system-crop-entry{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; min-height:53px!important; margin:0!important; padding:13px 14px!important; border:1px solid #dfe2e7!important; border-radius:14px!important; background:#f7f7f8!important; color:#17191d!important; font-size:clamp(13px,3.7vw,15px)!important; font-weight:750!important; line-height:1.3!important; white-space:normal!important; text-align:left!important; overflow-wrap:anywhere; } #patiyiz-system-media .pati-system-crop-entry[hidden]{display:none!important} #patiyiz-system-media .pati-system-crop-chevron{ font-size:26px; font-weight:400; line-height:1; margin-inline-start:auto; color:#adb1bb; flex:none; } #patiyiz-system-media .pati-system-edit-panel :is(.pati-system-audience,.pati-system-caption-label){ margin:0!important; max-width:100%; } #patiyiz-system-media .pati-system-edit-panel .pati-system-audience{ display:grid; gap:7px; line-height:1.35; } #patiyiz-system-media .pati-system-edit-panel :is(#pati-system-caption,.pati-system-audience select){ width:100%!important; max-width:100%; min-width:0; margin:0!important; border-radius:12px!important; } #patiyiz-system-media .pati-system-publish-actions{ position:static!important; bottom:auto!important; z-index:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; gap:12px!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } #patiyiz-system-media[data-mode="story"] .pati-system-publish-actions, #patiyiz-system-media[data-mode="reels"] .pati-system-publish-actions{ grid-template-columns:minmax(0,1fr)!important; } #patiyiz-system-media[data-mode="story"] .pati-system-publish-actions button, #patiyiz-system-media[data-mode="reels"] .pati-system-publish-actions button{ grid-column:1 / -1!important; } #patiyiz-system-media .pati-system-publish-actions button{ min-height:52px!important; margin:0!important; padding:13px 14px!important; font-size:14px!important; font-weight:750!important; border-radius:14px!important; white-space:normal!important; } #patiyiz-system-media .pati-system-publish-actions [data-system="rechoose"]{ background:#f2f3f5!important; color:#17191d!important; border:1px solid #dfe1e6!important; } #patiyiz-system-media #pati-system-publish{ min-height:56px!important; border:0!important; background:#17191d!important; color:#fff!important; font-size:16px!important; font-weight:850!important; } #patiyiz-system-media .pati-system-modes{ flex:none!important; position:static!important; display:flex!important; justify-content:center!important; flex-wrap:wrap!important; gap:8px!important; width:100%!important; margin-top:auto!important; padding:17px 0 max(12px,env(safe-area-inset-bottom,0px))!important; } #patiyiz-system-media .pati-system-modes button{ min-height:44px!important; padding:10px 14px!important; border-radius:999px!important; } @media(max-width:420px){ #patiyiz-system-media .pati-system-panel{ padding-inline:0!important; overflow:visible!important; } #patiyiz-system-media .pati-system-edit-panel{gap:11px;padding:12px} #patiyiz-system-media .pati-system-publish-actions button{ font-size:14px!important; } #patiyiz-system-media[data-mode="story"] .pati-system-preview-media, #patiyiz-system-media[data-mode="reels"] .pati-system-preview-media{ max-height:43dvh!important; } } @media(max-height:680px){ #patiyiz-system-media .pati-system-panel{overflow:visible!important} #patiyiz-system-media[data-mode="story"] .pati-system-preview-media, #patiyiz-system-media[data-mode="reels"] .pati-system-preview-media{max-height:34dvh!important} } /* Story visibility control — white, readable labels on the dark media composer. * Applies to the existing selector; access rules and publish behavior stay unchanged. */ #patiyiz-system-media[data-mode="story"] .pati-system-edit-panel label.pati-system-audience{ color:#ffffff!important; font-weight:750!important; font-size:14px!important; line-height:1.45!important; } #patiyiz-system-media[data-mode="story"] .pati-system-edit-panel #pati-system-audience{ color:#ffffff!important; background:#272a32!important; border:1px solid #555964!important; padding:11px 13px!important; min-height:46px!important; color-scheme:dark; font:inherit!important; } #patiyiz-system-media[data-mode="story"] #pati-system-audience option{ background:#272a32; color:#ffffff; } html[data-pati-theme="dark"] #modal-root #post-form .pati-field:has(select[name="story_audience"]) label, html[data-pati-theme="dark"] #modal-root #story-form .pati-field:has(select[name="story_audience"]) label{ color:#ffffff!important; } html[data-pati-theme="dark"] #modal-root #post-form select[name="story_audience"], html[data-pati-theme="dark"] #modal-root #story-form select[name="story_audience"]{ color:#fff!important;background:#272a32!important;border-color:#555964!important;color-scheme:dark; } /* 30 Oct 2026 | True circle-fill avatars, without a double inset frame. */ #main-content .pati-ig-profile .pati-ig-avatar{ padding:0!important; overflow:visible!important; border-radius:50%!important; box-sizing:border-box!important; } #main-content .pati-ig-profile .pati-ig-avatar.pati-profile-story-seen{ padding:0!important; border:2px solid #a6a9af!important; } #main-content .pati-ig-profile .pati-ig-avatar.pati-profile-has-story{ padding:0!important; } #main-content .pati-ig-profile .pati-ig-avatar > .avatar, #main-content .pati-ig-profile .pati-ig-avatar > .pati-profile-story-view, #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view > .avatar{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; min-width:0!important; aspect-ratio:1/1!important; padding:0!important; margin:0!important; box-sizing:border-box!important; border:0!important; border-radius:50%!important; overflow:hidden!important; } #main-content .pati-ig-profile .pati-ig-avatar .avatar img, #main-content .pati-ig-profile .pati-ig-avatar .pati-profile-story-view img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; border-radius:50%!important; border:0!important; object-fit:cover!important; object-position:center!important; transform:none!important; } /* Profile editor follows the same framing. */ #modal-root .pati-profile-edit-modal .pati-edit-avatar{ display:grid;place-items:center; border-radius:50%!important;overflow:hidden!important; padding:0!important; } #modal-root .pati-profile-edit-modal .pati-edit-avatar img{ display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important; border-radius:50%!important; } /* 30 Oct 2026 | Story photo extends fully to the bottom action, never a black unused strip. */ #story-overlay .story-player .story-big-photo, #story-overlay .story-player .story-big-video{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; background:#08090c!important; } #story-overlay.pati-story-own .story-player::after{ content:''; position:absolute; inset:auto 0 0; height:min(47%,420px); background:linear-gradient(transparent,rgba(0,0,0,.2) 35%,rgba(0,0,0,.58)); pointer-events:none; z-index:7; } /* Actual story actions live in a single ordered vertical container. Override previously absolute-positioned caption / viewer / heart / delete styles. */ #story-overlay.pati-story-own .pati-own-story-stack{ position:absolute!important; z-index:19!important; /* Raise neither caption nor activity: shift the stack down while respecting iPhone's home-indicator safe area and keeping Sil visible. */ bottom:calc(4px + env(safe-area-inset-bottom,0px))!important; left:14px!important; right:14px!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:6px!important; max-height:min(53dvh,470px); pointer-events:none; } #story-overlay.pati-story-own .pati-own-story-stack > *, #story-overlay.pati-story-own .pati-own-story-stack button{pointer-events:auto} #story-overlay.pati-story-own .pati-own-story-stack > .story-caption{ position:relative!important; top:auto!important;bottom:auto!important;left:auto!important;right:auto!important; width:100%!important; box-sizing:border-box!important; margin:0!important; padding:13px 17px!important; text-align:center!important; font-size:14px!important; line-height:1.5!important; border-radius:17px!important; color:white!important; background:#090a0bc7!important; max-height:min(18dvh,138px)!important; overflow-y:auto!important; overflow-wrap:anywhere!important; white-space:pre-wrap!important; flex:0 1 auto; } #story-overlay.pati-story-own .pati-own-story-stack > .pati-story-shared-source{ position:relative!important; inset:auto!important; margin:0!important; width:100%!important; max-width:none!important; flex:0 0 auto; } #story-overlay.pati-story-own .pati-own-story-actions{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; min-width:0!important; flex:0 0 auto; } #story-overlay.pati-story-own .pati-own-story-actions > .story-viewers-button, #story-overlay.pati-story-own .pati-own-story-actions > .pati-story-like-own{ position:relative!important; top:auto!important;bottom:auto!important;left:auto!important;right:auto!important; z-index:20!important; margin:0!important; float:none!important; transform:none!important; } #story-overlay.pati-story-own .pati-own-story-actions > .story-viewers-button{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:5px!important; width:min(64vw,180px)!important; min-width:0!important; min-height:110px!important; max-height:155px!important; padding:12px 14px!important; box-sizing:border-box!important; flex:0 1 auto; border-radius:22px!important; background:rgba(15,15,20,.78)!important; color:#fff!important; } #story-overlay.pati-story-own .pati-own-story-actions > .pati-story-like-own{ flex:0 0 52px!important; display:grid!important; place-items:center!important; width:52px!important;height:52px!important; border-radius:50%!important; align-self:flex-end!important; } #story-overlay.pati-story-own .pati-own-story-footer{ display:flex!important; justify-content:flex-end!important; flex:0 0 auto; } #story-overlay.pati-story-own .pati-own-story-footer > .story-delete{ position:relative!important; inset:auto!important; margin:0!important; z-index:20!important; min-height:48px!important; min-width:104px!important; border-radius:22px!important; } #story-overlay.pati-story-viewers-open .pati-own-story-stack{display:none!important} @media(max-height:690px){ #story-overlay.pati-story-own .pati-own-story-stack{gap:5px!important;max-height:54dvh} #story-overlay.pati-story-own .pati-own-story-actions > .story-viewers-button{min-height:82px!important} #story-overlay.pati-story-own .pati-own-story-stack > .story-caption{max-height:12dvh!important} } /* 30 Oct 2026 | Real square editor: 4 resizable corners, image pan and pinch zoom. */ body.pati-avatar-crop-open{overflow:hidden!important} #pati-avatar-crop-overlay{ position:fixed;inset:0;z-index:260000; background:#0c0d10;color:#fff; display:flex;justify-content:center;align-items:stretch; overflow:hidden;overscroll-behavior:contain; } #pati-avatar-crop-overlay *{box-sizing:border-box} #pati-avatar-crop-overlay .pati-avatar-crop-panel{ width:min(100%,680px); height:100dvh;min-height:0; display:flex;flex-direction:column; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); background:#111216; } #pati-avatar-crop-overlay header{ display:grid;grid-template-columns:80px 1fr 80px; align-items:center;gap:5px; min-height:66px;padding:10px 12px; border-bottom:1px solid #303136; } #pati-avatar-crop-overlay header strong{font-size:15px;text-align:center;line-height:1.35} #pati-avatar-crop-overlay header button{ border:0;color:#fff;background:transparent; min-height:42px;padding:8px 5px; border-radius:10px;font:inherit;font-size:14px; } #pati-avatar-crop-overlay header .pati-avatar-crop-save{ background:#fff;color:#131417;font-weight:800; } #pati-avatar-crop-overlay header button:disabled{opacity:.55} #pati-avatar-crop-overlay .pati-avatar-crop-help{ margin:0;padding:12px 24px 14px; text-align:center;color:#b9bcc4; font-size:12px;line-height:1.5; } #pati-avatar-crop-overlay .pati-avatar-crop-stage{ position:relative;flex:1 1 auto;min-height:170px;min-width:0; background:#0c0d0f; overflow:hidden;touch-action:none; user-select:none;-webkit-user-select:none; } #pati-avatar-crop-overlay canvas{ width:100%;height:100%; display:block;touch-action:none; } #pati-avatar-crop-overlay .pati-avatar-crop-square{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); border:2px solid #fff;outline:1px solid #151515; box-shadow:0 0 0 100vmax rgba(0,0,0,.48); pointer-events:none;touch-action:none; } #pati-avatar-crop-overlay .pati-avatar-crop-grid{ position:absolute;inset:0; background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff70 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff70 66.666%,transparent calc(66.666% + .5px)), linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff70 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff70 66.666%,transparent calc(66.666% + .5px)); } #pati-avatar-crop-overlay .pati-avatar-crop-square .corner{ position:absolute;width:32px;height:32px; border:4px solid #fff; pointer-events:auto;touch-action:none; border-radius:2px; } #pati-avatar-crop-overlay .corner.top-left{top:-4px;left:-4px;border-right:0;border-bottom:0} #pati-avatar-crop-overlay .corner.top-right{top:-4px;right:-4px;border-left:0;border-bottom:0} #pati-avatar-crop-overlay .corner.bottom-left{bottom:-4px;left:-4px;border-top:0;border-right:0} #pati-avatar-crop-overlay .corner.bottom-right{bottom:-4px;right:-4px;border-top:0;border-left:0} #pati-avatar-crop-overlay footer{ flex:0 0 auto; display:grid;gap:9px; padding:18px 20px max(18px,env(safe-area-inset-bottom,0px)); font-size:13px;color:#e8e9eb; } #pati-avatar-crop-overlay footer input{width:100%;height:28px;accent-color:#fff} #pati-avatar-crop-overlay footer small{color:#a8acb5;font-size:11px} @media(max-height:650px){ #pati-avatar-crop-overlay header{min-height:51px} #pati-avatar-crop-overlay .pati-avatar-crop-help{padding:7px 18px} #pati-avatar-crop-overlay footer{padding-block:10px} } @media(prefers-reduced-motion:reduce){#pati-avatar-crop-overlay *{animation:none!important;transition:none!important}} /* 30 Oct 2026 | Own-story bottom-left activity aligned with the Sil action. The personal story has no like button; other people's heart stays as before. */ #story-overlay.pati-story-own .pati-own-story-footer{ display:flex!important; flex-direction:row!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; width:100%!important; min-width:0!important; } #story-overlay.pati-story-own .pati-own-story-footer > .story-viewers-button{ position:relative!important; inset:auto!important; transform:none!important; float:none!important; margin:0!important; display:flex!important; flex:0 1 min(50vw,190px)!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:6px!important; width:min(50vw,190px)!important; min-width:0!important; max-width:190px!important; min-height:104px!important; max-height:144px!important; overflow:hidden!important; box-sizing:border-box!important; padding:12px 13px!important; background:rgba(13,13,18,.78)!important; color:#fff!important; border:1px solid rgba(255,255,255,.44)!important; border-radius:21px!important; z-index:20!important; text-align:left!important; } #story-overlay.pati-story-own .pati-own-story-footer > .story-viewers-button .pati-story-viewer-preview-label{ font-size:16px!important; font-weight:800!important; line-height:1.2!important; } #story-overlay.pati-story-own .pati-own-story-footer > .story-viewers-button .pati-story-viewer-preview-status{ font-size:12px!important; line-height:1.3!important; } #story-overlay.pati-story-own .pati-own-story-footer > .story-delete{ align-self:flex-end!important; flex:0 0 auto!important; } #story-overlay.pati-story-own .pati-own-story-stack > .story-caption{ margin-bottom:6px!important; } #story-overlay.pati-story-own .pati-story-like-own{display:none!important} @media(max-width:350px){ #story-overlay.pati-story-own .pati-own-story-footer{gap:8px!important} #story-overlay.pati-story-own .pati-own-story-footer > .story-viewers-button{ width:min(49vw,170px)!important; min-height:88px!important; padding:9px 10px!important; } #story-overlay.pati-story-own .pati-own-story-footer > .story-delete{min-width:88px!important} } /* patiyiz-profile-professional-title-20261031.css */ /* Patiyiz profile: editable bold professional title, immediately above biography. */ #main-content .pati-ig-profile .pati-ig-about{ box-sizing:border-box; width:100%; min-width:0; padding:2px clamp(16px,5vw,48px) 10px!important; text-align:left; color:#212126; } #main-content .pati-ig-profile .pati-ig-about .pati-ig-profession{ display:block!important; width:100%; min-width:0; font-family:inherit; font-size:15px!important; line-height:1.38!important; font-weight:850!important; letter-spacing:-.012em; color:#17181d!important; opacity:1!important; white-space:normal!important; overflow-wrap:anywhere; margin:0!important; padding:0!important; } #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio{ box-sizing:border-box; margin:0!important; padding:4px 0 0!important; font-size:14px!important; line-height:1.53!important; font-weight:400!important; letter-spacing:normal; color:#36383e!important; white-space:pre-line!important; overflow-wrap:anywhere; } #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio:first-child{ padding-top:0!important; } #modal-root #profile-form .pati-profile-title-field{ min-width:0; } #modal-root #profile-form .pati-profile-title-field input{ box-sizing:border-box; max-width:100%; width:100%; font-family:inherit; font-size:16px; } #modal-root #profile-form .pati-profile-title-field small{ display:block; margin-top:6px; font-size:12px; line-height:1.45; color:#60636c; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about .pati-ig-profession{ color:#f4f4f6!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio{ color:#dedee4!important; } html[data-pati-theme="dark"] #modal-root #profile-form .pati-profile-title-field small{ color:#c0c2cb; } @media(max-width:740px){ #main-content .pati-ig-profile .pati-ig-about{ padding:5px 15px 9px!important; } #main-content .pati-ig-profile .pati-ig-about .pati-ig-profession{ font-size:14px!important; line-height:1.35!important; font-weight:850!important; } #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio{ padding-top:3px!important; font-size:13px!important; } } @media(max-width:350px){ #main-content .pati-ig-profile .pati-ig-about{padding-inline:12px!important} } /* patiyiz-profile-title-picker-20261031.css */ /* Fullscreen selectable profile titles + legible profile text */ #modal-root #profile-form .pati-profile-title-open{box-sizing:border-box;display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:52px;gap:14px;padding:12px 15px!important;text-align:left;border-radius:14px!important;border:1px solid #cfd1d7!important;background:#fafafd!important;color:#222329!important;font:inherit;font-size:15px!important;font-weight:650!important;cursor:pointer} #modal-root #profile-form .pati-profile-title-open [data-pati-profile-title-current]{flex:1;overflow-wrap:anywhere;color:inherit!important} #modal-root #profile-form .pati-profile-title-chevron{flex:none;font-size:26px;font-weight:300;line-height:1;color:inherit} #modal-root #profile-form .pati-profile-title-open:focus-visible{outline:3px solid #5c80ce!important;outline-offset:3px} html[data-pati-theme="dark"] #modal-root #profile-form .pati-profile-title-open{background:#25262e!important;color:#fff!important;border-color:#555763!important} body.pati-title-picker-open{overflow:hidden!important} .pati-title-picker,.pati-title-picker *{box-sizing:border-box} .pati-title-picker{position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;flex-direction:column;width:100%;height:100dvh;overflow:hidden;background:#fff!important;color:#17181d!important;font-family:inherit} .pati-title-picker-shell{width:100%;height:100%;max-height:100%;min-height:0;display:flex;flex-direction:column;background:inherit;color:inherit} .pati-title-picker-header{display:flex;align-items:center;gap:13px;flex:0 0 auto;border-bottom:1px solid #ebedf0;padding:max(14px,env(safe-area-inset-top)) 18px 14px;background:inherit;color:inherit} .pati-title-picker-header>div{flex:1;min-width:0} .pati-title-picker-header span{font-size:10px!important;font-weight:800!important;letter-spacing:.1em;color:inherit!important;opacity:.7} .pati-title-picker-header h2{font-size:19px!important;line-height:1.35!important;font-weight:850!important;color:inherit!important;margin:2px 0 0!important} .pati-title-picker button{color:inherit;cursor:pointer;font-family:inherit} .pati-title-picker-back{flex:none;width:40px;height:40px;background:#f0f1f4!important;border:0!important;border-radius:12px!important;display:grid;place-items:center;font-size:22px!important;color:inherit!important} .pati-title-picker-apply-top{font-size:13px!important;font-weight:850!important;min-height:40px;padding:8px 13px!important;border-radius:11px!important;border:0!important;background:#17181d!important;color:#fff!important} .pati-title-picker-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px clamp(16px,4vw,32px) 28px;scrollbar-width:thin} .pati-title-picker-scroll>*{max-width:850px;margin-left:auto;margin-right:auto} .pati-title-picker-intro p{font-size:13px;line-height:1.6;color:inherit;opacity:.8;margin:0 0 12px} .pati-title-picker-selected{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:33px} .pati-title-picked{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;border-radius:999px;background:#222329!important;color:#fff!important;font-size:12px;font-weight:750} .pati-title-picked button{width:24px;height:24px;border:0!important;border-radius:50%!important;display:grid;place-items:center;background:#ffffff30!important;color:#fff!important;font-size:17px!important;line-height:1} .pati-title-picker-no-selection{color:inherit;opacity:.72;font-size:12px} .pati-title-picker-counter{margin-top:8px;font-size:11px;color:inherit;opacity:.72;font-variant-numeric:tabular-nums} .pati-title-picker-search{display:flex;align-items:center;gap:10px;min-height:51px;width:100%;border:1px solid #d3d6db;background:#f5f6f8;color:#242630;border-radius:14px;margin-top:19px;margin-bottom:18px;padding:0 15px} .pati-title-picker-search>span{font-size:26px;line-height:1;color:inherit;opacity:.75} .pati-title-picker-search input{display:block;flex:1;min-width:0;width:100%;min-height:46px;padding:0;background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;color:inherit!important;font:inherit;font-size:16px!important} .pati-title-picker-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:16px} .pati-title-picker-category{min-width:0} .pati-title-picker-category h3,.pati-title-picker-custom h3{margin:0 0 9px!important;font-size:13px!important;font-weight:850!important;color:inherit!important;line-height:1.4} .pati-title-picker-options{display:flex;flex-direction:column;gap:5px;min-width:0} .pati-title-picker-item{display:flex;align-items:center;gap:12px;min-width:0;min-height:46px;cursor:pointer;padding:10px 12px;border-radius:11px;border:1px solid #e8eaee;background:#f7f8fa;color:#222329} .pati-title-picker-item.is-selected{border-color:#17181d;background:#e8eaef} .pati-title-picker-item input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:#222329} .pati-title-picker-item-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px!important;font-weight:650!important;line-height:1.4;color:inherit!important} .pati-title-picker-check{width:21px;flex:none;text-align:center;font-size:18px;color:inherit;font-weight:900} .pati-title-picker-custom{margin-top:19px;border-top:1px solid #dddfe5;padding-top:17px} .pati-title-picker-custom-row{display:flex;gap:8px} .pati-title-picker-custom input{flex:1;min-width:0;min-height:46px;max-width:100%;border-radius:12px;border:1px solid #cfd2d9!important;background:transparent!important;color:inherit!important;padding:10px 12px;font-family:inherit;font-size:16px!important} .pati-title-picker-custom-row button{min-height:46px;flex:none;border:0!important;border-radius:12px!important;padding:9px 15px!important;color:#fff!important;background:#222329!important;font-size:12px!important;font-weight:850!important} .pati-title-picker-no-result{font-size:13px;line-height:1.6;opacity:.8;color:inherit} .pati-title-picker-error{min-height:16px;margin:10px 0 0;color:#a3202e;font-size:12px;line-height:1.5} .pati-title-picker-footer{flex:none;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #e5e7eb;background:inherit;padding:12px clamp(16px,4vw,32px) max(13px,env(safe-area-inset-bottom))} .pati-title-picker-footer button{display:grid;place-items:center;min-height:48px;padding:12px 18px!important;border-radius:13px!important;font-weight:850!important;font-size:13px!important} .pati-title-picker-clear{border:1px solid #c7cbd2!important;color:inherit!important;background:transparent!important} .pati-title-picker-save{border:1px solid #17181d!important;color:#fff!important;background:#17181d!important;flex:1;max-width:340px} .pati-title-picker button:focus-visible,.pati-title-picker input:focus-visible{outline:3px solid #6c8ef2!important;outline-offset:2px!important} html[data-pati-theme="dark"] .pati-title-picker{background:#15161b!important;color:#fff!important} html[data-pati-theme="dark"] .pati-title-picker-header,html[data-pati-theme="dark"] .pati-title-picker-footer{border-color:#353741} html[data-pati-theme="dark"] .pati-title-picker-back{background:#2b2c33!important;color:#fff!important} html[data-pati-theme="dark"] .pati-title-picker-search{background:#26282f!important;border-color:#444750;color:#fff} html[data-pati-theme="dark"] .pati-title-picker-item{background:#23252b;border-color:#3b3e47;color:#fff} html[data-pati-theme="dark"] .pati-title-picker-item.is-selected{background:#33363e;border-color:#eef0f4} html[data-pati-theme="dark"] .pati-title-picker-item input{accent-color:#fff} html[data-pati-theme="dark"] .pati-title-picked{background:#eaecef!important;color:#17181d!important} html[data-pati-theme="dark"] .pati-title-picked button{background:#0002!important;color:#17181d!important} html[data-pati-theme="dark"] .pati-title-picker-custom{border-color:#444750} html[data-pati-theme="dark"] .pati-title-picker-apply-top,html[data-pati-theme="dark"] .pati-title-picker-custom-row button,html[data-pati-theme="dark"] .pati-title-picker-save{background:#f5f5f6!important;color:#17181d!important;border-color:#f5f5f6!important} html[data-pati-theme="dark"] .pati-title-picker-error{color:#ff99a5} html[data-pati-theme="dark"] .pati-title-picker-search input::placeholder,html[data-pati-theme="dark"] .pati-title-picker-custom input::placeholder{color:#b9bbc3!important} @media(max-width:670px){.pati-title-picker-results{grid-template-columns:minmax(0,1fr)}.pati-title-picker-header{padding-left:14px;padding-right:14px}.pati-title-picker-scroll{padding:14px 14px 22px}.pati-title-picker-footer{padding-left:14px;padding-right:14px}} @media(prefers-reduced-motion:reduce){.pati-title-picker-item{transition:none}} /* All profile text should remain equally bright and legible in dark mode. */ html[data-pati-theme="dark"] #main-content .pati-ig-profile, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-summary{background:#16171b!important;color:#fff!important} html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-info, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-handle, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-handle-row, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-name, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats b, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats small, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats span, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats button, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-profession, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-bio, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-mutual-followers, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links a, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs button{color:#fff!important;opacity:1!important} html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio{color:#fff!important;opacity:1!important} html:not([data-pati-theme="dark"]) #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio{color:#17181d!important;opacity:1!important} /* Surface-specific contrast so white profile text never lands on white cards. */ html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link:hover{ background:#25262e!important;border-color:#444650!important;color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-link-label, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-link-domain, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-link-arrow{ color:#fff!important;opacity:1!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs{ background:#16171b!important;border-color:#42434b!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs button{ background:transparent!important;color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs button.active{ background:#2e3039!important;color:#fff!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-private-message, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-empty{ background:#25262e!important;color:#fff!important; } /* patiyiz-story-text-contrast-20261031.css */ /* Story sharing contrast: text-only posts are readable instead of black-on-black. */ #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-media.pati-story-share-media-text{ display:flex!important;align-items:center!important;justify-content:flex-start!important; min-height:145px!important;height:auto!important;max-height:min(44dvh,340px)!important; padding:19px 18px!important;box-sizing:border-box!important; overflow-y:auto!important;overscroll-behavior:contain; background:#f7f8fa!important;color:#15161a!important; text-align:left!important;border:0!important;border-radius:0!important; white-space:normal!important;word-break:normal!important; } #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-text-content{ display:block!important;width:100%!important;max-width:100%!important; white-space:pre-line!important;overflow-wrap:anywhere!important; margin:0!important;padding:0!important;opacity:1!important; font-family:inherit!important;font-size:clamp(13px,2.8vw,16px)!important; font-weight:650!important;line-height:1.55!important; color:#15161a!important;-webkit-text-fill-color:#15161a!important; text-shadow:none!important;mix-blend-mode:normal!important; } #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-post-caption{ background:#fff!important;color:#17181c!important; -webkit-text-fill-color:#17181c!important;opacity:1!important;text-shadow:none!important; } #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-profile strong{ color:#17181c!important;-webkit-text-fill-color:#17181c!important;opacity:1!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{ color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important; background:#111216!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>span{ color:#fff!important;-webkit-text-fill-color:#fff!important; } /* A normal story caption always stays readable on the dark story viewer. */ #story-overlay .story-player>.story-caption, #story-overlay .story-player .pati-own-story-stack>.story-caption{ color:#fff!important;-webkit-text-fill-color:#fff!important; opacity:1!important;text-shadow:0 2px 7px rgba(0,0,0,.85)!important; background:rgba(9,10,14,.58)!important;border-radius:13px!important; padding:9px 12px!important;box-sizing:border-box!important; overflow-wrap:anywhere!important;white-space:pre-line!important; } @media(max-width:540px){ #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-media.pati-story-share-media-text{ padding:14px 13px!important;max-height:min(38dvh,290px)!important; } #story-overlay.pati-story-has-source .pati-story-share-card .pati-story-share-text-content{ font-size:13px!important;line-height:1.5!important; } } /* Guard against legacy story dark-theme rules dimming the shared card. */ #story-overlay.pati-story-has-source .pati-story-share-card{ background:#fff!important;color:#15161a!important;mix-blend-mode:normal!important; } #story-overlay.pati-story-has-source .pati-story-share-media:not(.pati-story-share-media-text){ background:#f5f5f7!important;color:#15161a!important; } #story-overlay.pati-story-has-source .pati-story-share-empty{ display:grid!important;place-items:center!important; width:100%!important;height:100%!important;color:#191a1e!important; background:#f5f5f7!important;opacity:1!important; } #story-overlay .story-player>.story-caption, #story-overlay .story-player .pati-own-story-stack>.story-caption{ mix-blend-mode:normal!important;filter:none!important;opacity:1!important; } /* patiyiz-profile-white-story-cta-fix-20261031.css */ /* Patiyiz profile surface consistency and story CTA readability. The user wants one LIGHT WHITE profile canvas (including profession, biography, website links) even when the surrounding app uses dark mode. Keep story photos, avatar and the rest of the app's theme unchanged. */ /* White profile canvas: statistics header, profession/bio, links, tabs all match. */ #main-content .pati-ig-profile, #main-content .pati-ig-profile .pati-ig-summary, #main-content .pati-ig-profile .pati-ig-info, #main-content .pati-ig-profile .pati-ig-stats, #main-content .pati-ig-profile .pati-ig-about, #main-content .pati-ig-profile .pati-ig-profession, #main-content .pati-ig-profile .pati-ig-bio, #main-content .pati-ig-profile .pati-profile-links, #main-content .pati-ig-profile .pati-mutual-followers, #main-content .pati-ig-profile .pati-ig-actions, #main-content .pati-ig-profile .pati-ig-tabs, #main-content .pati-ig-profile .pati-ig-grid, #main-content .pati-ig-profile .pati-ig-empty, html[data-pati-theme="dark"] #main-content .pati-ig-profile, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-summary, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-info, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-profession, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-bio, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-mutual-followers, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-actions, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-grid, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-empty{ background:#fff!important; background-color:#fff!important; color:#17191d!important; } /* All the information directly around the profile photo uses dark ink on white. */ #main-content .pati-ig-profile .pati-ig-handle, #main-content .pati-ig-profile .pati-ig-name, #main-content .pati-ig-profile .pati-ig-handle-row, #main-content .pati-ig-profile .pati-ig-stats, #main-content .pati-ig-profile .pati-ig-stats b, #main-content .pati-ig-profile .pati-ig-stats span, #main-content .pati-ig-profile .pati-ig-stats button, #main-content .pati-ig-profile .pati-ig-stats small, #main-content .pati-ig-profile .pati-ig-about .pati-ig-profession, #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio, #main-content .pati-ig-profile .pati-mutual-followers, #main-content .pati-ig-profile .pati-profile-links .pati-profile-link, #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-label, #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-domain, #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-arrow, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-handle, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-name, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-handle-row, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats b, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats span, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats button, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-stats small, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about .pati-ig-profession, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about .pati-ig-bio, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-mutual-followers, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-label, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-domain, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link-arrow{ color:#17191d!important; -webkit-text-fill-color:#17191d!important; opacity:1!important; text-shadow:none!important; } /* The biography should not have a shaded strip or disconnected card. */ #main-content .pati-ig-profile .pati-ig-about, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-about{ box-shadow:none!important; border:0!important; } #main-content .pati-ig-profile .pati-profile-links .pati-profile-link, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-links .pati-profile-link{ background:#fff!important; background-color:#fff!important; border:1px solid #e7e8ec!important; box-shadow:none!important; } #main-content .pati-ig-profile .pati-ig-tabs button, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs button{ background:transparent!important; color:#44474e!important; -webkit-text-fill-color:#44474e!important; opacity:1!important; } #main-content .pati-ig-profile .pati-ig-tabs button.active, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-ig-tabs button.active{ background:#f4f5f7!important; color:#17191d!important; -webkit-text-fill-color:#17191d!important; } #main-content .pati-ig-profile .pati-ig-tabs{ border-color:#ededf0!important; } #main-content .pati-ig-profile .pati-private-message, html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-private-message{ background:#fff!important;color:#17191d!important; } /* Story shared-post CTA: the label to the LEFT of the arrow was invisible. Give label its own explicitly white text, no inherited dark text fill. */ #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{ /* Earlier social-phase1 CSS applied translateX(-50%), pushing the CTA label outside the overflow-hidden story card. Reset that inherited transform. */ -webkit-transform:none!important; transform:none!important; translate:none!important; left:auto!important; right:auto!important; position:relative!important; inset:auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; box-sizing:border-box!important; width:calc(100% - 20px)!important; max-width:calc(100% - 20px)!important; min-width:0!important; min-height:44px!important; height:auto!important; margin:10px!important; padding:10px 14px!important; background:#111216!important; background-color:#111216!important; border:0!important; border-radius:11px!important; color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:none!important; opacity:1!important; visibility:visible!important; filter:none!important; font-size:13px!important; font-weight:850!important; line-height:1.3!important; white-space:normal!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>.pati-story-source-label, #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>.pati-story-source-arrow{ display:inline-block!important; position:relative!important; z-index:1!important; flex:0 1 auto!important; color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:1!important; visibility:visible!important; text-shadow:none!important; filter:none!important; mix-blend-mode:normal!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>.pati-story-source-label{ flex:1 1 auto!important; min-width:0!important; font-size:13px!important; font-weight:850!important; text-align:left!important; } #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source>.pati-story-source-arrow{ flex:0 0 auto!important; font-size:19px!important; line-height:1!important; } @media(max-width:500px){ #story-overlay.pati-story-has-source .pati-story-share-card>.pati-story-shared-source{ min-height:44px!important; margin:9px!important; width:calc(100% - 18px)!important; max-width:calc(100% - 18px)!important; } } /* patiyiz-story-upload-age-20261031.css */ /* Compact Instagram-style story age beside username. Applies to photo, video, reposted post and Reels stories. */ #story-overlay .story-player-head .pati-story-owner-name{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; min-width:0!important; flex:1 1 auto!important; max-width:100%!important; gap:4px!important; } #story-overlay .story-player-head .pati-story-owner-top{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:8px!important; width:100%!important; max-width:100%!important; min-width:0!important; line-height:1.3!important; } #story-overlay .story-player-head .pati-story-owner-top>strong{ flex:0 1 auto!important; display:inline-block!important; width:auto!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:1!important; } #story-overlay .story-player-head .pati-story-upload-age{ display:inline-block!important; position:relative!important; z-index:1!important; flex:0 0 auto!important; max-width:80px!important; white-space:nowrap!important; font-family:inherit!important; font-size:11px!important; line-height:1.4!important; font-weight:650!important; letter-spacing:0!important; color:#f1f2f5!important; -webkit-text-fill-color:#f1f2f5!important; opacity:1!important; background:rgba(0,0,0,.32)!important; border-radius:6px!important; padding:2px 5px!important; text-shadow:0 1px 3px #0009!important; user-select:none; } @media(max-width:420px){ #story-overlay .story-player-head .pati-story-owner-top{gap:5px!important} #story-overlay .story-player-head .pati-story-upload-age{font-size:10px!important;padding:2px 4px!important} } /* patiyiz-home-feed-compact-20261031.css */ /* 2026-10-31 — Mobile home-feed spacing. Keep Patiyiz styling, story rings and native media ratios intact. Only the home timeline (with its two feed tabs) is affected. */ @media (max-width:740px) { /* The tab switch stays comfortably tappable, without a tall empty panel. */ #main-content:has(>.pati-home-feed-tabs)>.pati-home-feed-tabs { gap:6px!important; margin:6px 9px 4px!important; padding-bottom:4px!important; } #main-content:has(>.pati-home-feed-tabs)>.pati-home-feed-tabs>button { box-sizing:border-box; min-height:44px!important; padding:9px 6px!important; font-size:13px!important; line-height:1.2!important; } /* The story strip sits right above the first post, as in a compact feed. Do not resize the story avatar or reposition its plus badge. */ #main-content:has(>.pati-home-feed-tabs)>.stories-section { box-sizing:border-box!important; margin:0!important; padding:7px 9px 5px!important; border-top:0!important; border-bottom:1px solid var(--pui-border,#e9e9ec)!important; border-radius:0!important; box-shadow:none!important; } #main-content:has(>.pati-home-feed-tabs)>.stories-section .stories-strip { gap:13px!important; margin:0!important; padding:4px 2px 5px!important; scroll-padding-inline:8px; } #main-content:has(>.pati-home-feed-tabs)>.stories-section .story-person { gap:5px!important; } #main-content:has(>.pati-home-feed-tabs)>.stories-section .story-person small { margin:0!important; line-height:1.25!important; } /* Zero artificial separator height above the first post. */ #main-content:has(>.pati-home-feed-tabs)>.pati-feed-posts { margin-top:0!important; padding-top:0!important; } #main-content:has(>.pati-home-feed-tabs)>.pati-feed-posts>.pati-feed-card:first-child { margin-top:0!important; } } /* Instagram-style feed chooser: screen opens directly on stories + posts. Only mobile timeline, brand and menu are affected. */ @media (max-width:740px) { #main-content > .pati-home-feed-tabs { display:none!important; } #main-content:has(>.pati-home-feed-tabs)>.stories-section { margin:0!important; padding:6px 9px 5px!important; } #main-content:has(>.pati-home-feed-tabs)>.pati-feed-posts { margin:0!important; padding:0!important; } #app-root:not(.hidden)>.mobile-header { overflow:visible!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger { appearance:none!important; -webkit-appearance:none!important; pointer-events:auto!important; cursor:pointer!important; background:transparent!important; border:0!important; box-shadow:none!important; color:inherit!important; font:inherit!important; -webkit-tap-highlight-color:transparent; } #pati-feed-menu-trigger::after { content:""; position:absolute; top:calc(50% - 4px); right:-12px; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); pointer-events:none; } #pati-feed-menu-trigger[aria-expanded="true"]::after { transform:translateY(3px) rotate(225deg); } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu { position:absolute; z-index:200; top:calc(100% + 7px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; box-sizing:border-box; width:min(286px,calc(100vw - 24px)); padding:7px; border-radius:19px; border:1px solid rgba(255,255,255,.22); color:#fff; background:rgba(33,35,42,.94); box-shadow:0 14px 38px rgba(0,0,0,.26); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu[hidden] { display:none!important; } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button { appearance:none; display:flex; align-items:center; gap:13px; width:100%; min-height:53px; padding:11px 12px; border:0; border-radius:12px; background:transparent; color:inherit!important; font:inherit; font-size:14px; font-weight:650; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button:active, #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button[aria-checked="true"] { background:rgba(255,255,255,.13); } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button .icon { display:block; width:23px; height:23px; flex:none; color:#17191d!important; stroke:#17191d!important; fill:none!important; } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button .pati-feed-menu-label { flex:1; min-width:0; } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button .pati-feed-selected { visibility:hidden; font-size:17px; font-weight:800; color:#fff; } #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button[aria-checked="true"] .pati-feed-selected { visibility:visible; } #pati-feed-menu-trigger:focus-visible, #app-root:not(.hidden)>.mobile-header>.pati-feed-menu>button:focus-visible { outline:2px solid #9ebafc!important; outline-offset:2px; } } /* Patiyiz 2026-10-31: accessible care shortcuts, lost city opt-in and mission progress */ .pati-city-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0;padding:17px;border:1px solid var(--border,#dedee1);border-radius:16px;background:var(--paper,#fff);color:var(--ink,#202127)} .pati-city-alert strong{font-size:14px}.pati-city-alert p{margin:6px 0 0;color:var(--muted,#666);font-size:12px;line-height:1.5} .pati-city-alert button{flex-shrink:0;border:1px solid currentColor;border-radius:12px;background:var(--ink,#202127);color:var(--paper,#fff);padding:10px 12px;font-weight:700;font-size:12px} .pati-city-alert button[aria-pressed="true"]{background:transparent;color:inherit} .pati-city-alert button:disabled{opacity:.6;cursor:not-allowed} .pati-care-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:15px 0 18px} .pati-care-quick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:88px;padding:10px 6px;border:1px solid var(--border,#dedee1);background:var(--paper,#fff);color:var(--ink,#202127);border-radius:14px} .pati-care-quick button span{font-size:22px}.pati-care-quick button strong{font-size:12px}.pati-care-quick button small{font-size:10px;color:var(--muted,#666);text-align:center} .pati-mission-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0;padding:0} .pati-mission-progress>div{border-radius:14px;padding:14px;border:1px solid var(--border,#dedee1);background:var(--paper,#fff);color:var(--ink,#202127)} .pati-mission-progress strong,.pati-mission-progress span{display:block;font-size:12px}.pati-mission-progress span{margin:4px 0 8px;color:var(--muted,#666)} .pati-mission-progress progress{display:block;width:100%;height:9px;accent-color:var(--ink,#202127)} @media(max-width:600px){.pati-city-alert{align-items:stretch;flex-direction:column}.pati-city-alert button{align-self:stretch}.pati-care-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.pati-mission-progress{grid-template-columns:1fr}} /* 2026-11-01 — The logo itself opens a compact, two-choice feed picker. */ #app-root .pati-feed-brand-selector{ appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important; color:inherit!important;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent; } #app-root .pati-feed-brand-selector:focus-visible{ outline:2px solid #434c59!important;outline-offset:4px;border-radius:12px; } #pati-feed-menu-trigger::after,#pati-feed-desktop-trigger::after{ content:"";position:static;display:block;flex:none; width:7px;height:7px;margin:0 0 3px 6px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);pointer-events:none; } #pati-feed-menu-trigger[aria-expanded="true"]::after, #pati-feed-desktop-trigger[aria-expanded="true"]::after{ transform:translateY(3px) rotate(225deg); } #pati-feed-menu,#pati-feed-desktop-menu{ box-sizing:border-box;width:min(292px,calc(100vw - 20px));max-height:calc(100dvh - 94px); overflow-y:auto;padding:7px;border:1px solid #e6e7ea;border-radius:17px; background:#fff;color:#18191f; box-shadow:0 13px 38px rgba(13,20,32,.19); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } #pati-feed-menu[hidden],#pati-feed-desktop-menu[hidden]{display:none!important} #pati-feed-menu>button,#pati-feed-desktop-menu>button{ appearance:none;-webkit-appearance:none;display:flex!important;align-items:center; gap:11px;width:100%;min-height:62px;margin:0;padding:10px 11px!important; border:0!important;border-radius:11px!important;background:transparent!important; color:#18191f!important;font:inherit;font-size:14px;text-align:left;cursor:pointer; } #pati-feed-menu>button[aria-checked="true"], #pati-feed-desktop-menu>button[aria-checked="true"]{background:#f1f2f5!important} #pati-feed-menu>button:focus-visible, #pati-feed-desktop-menu>button:focus-visible{ outline:2px solid #303943!important;outline-offset:-3px; } #pati-feed-menu>button .icon,#pati-feed-desktop-menu>button .icon{ display:block;flex:none;width:23px;height:23px;color:#222!important; fill:none!important;stroke:currentColor!important; } #pati-feed-menu .pati-feed-menu-label,#pati-feed-desktop-menu .pati-feed-menu-label{ display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:3px;min-width:0; } #pati-feed-menu .pati-feed-menu-label strong,#pati-feed-desktop-menu .pati-feed-menu-label strong{ font-size:14px;line-height:1.25;font-weight:800;color:#18191f; } #pati-feed-menu .pati-feed-menu-label small,#pati-feed-desktop-menu .pati-feed-menu-label small{ font-size:11px;line-height:1.35;font-weight:500;color:#626b76; } #pati-feed-menu .pati-feed-selected,#pati-feed-desktop-menu .pati-feed-selected{ visibility:hidden;font-size:17px;font-weight:800;color:#111; } #pati-feed-menu>button[aria-checked="true"] .pati-feed-selected, #pati-feed-desktop-menu>button[aria-checked="true"] .pati-feed-selected{visibility:visible} @media(max-width:740px){ #app-root:not(.hidden)>.mobile-header>.brand.pati-feed-brand-selector{z-index:4;max-width:calc(100% - 172px)!important} #app-root:not(.hidden)>.mobile-header>#pati-feed-menu{ position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%); z-index:700;background:#fff!important;border:1px solid #e6e7ea!important; color:#18191f!important;box-shadow:0 13px 38px rgba(13,20,32,.19)!important; } #pati-feed-desktop-menu{display:none!important} } @media(min-width:741px){ #app-root .sidebar>.brand.pati-feed-brand-selector{ display:flex;align-items:center;justify-content:flex-start;gap:7px; width:100%;text-align:left; } #pati-feed-desktop-menu{position:fixed;z-index:12000} } /* patiyiz-saved-priority-20261031.css */ /* Patiyiz saved library • Instagram-inspired clean, three-column grid. Works in both light and dark appearance; affects only the Saved route. */ #main-content > .pati-saved-screen { --save-paper:#ffffff; --save-ink:#15171b; --save-muted:#747982; --save-line:#e8e9ed; --save-chip:#f2f3f5; display:block!important; box-sizing:border-box!important; width:100%!important; max-width:100%!important; min-height:55vh; padding:0 0 calc(92px + env(safe-area-inset-bottom,0px))!important; margin:0!important; background:var(--save-paper)!important; color:var(--save-ink)!important; overflow:hidden!important; } html[data-pati-theme="dark"] #main-content > .pati-saved-screen { --save-paper:#0b1014; --save-ink:#fafafa; --save-muted:#aeb3bd; --save-line:#222a30; --save-chip:#252b31; } #main-content .pati-saved-page-header { display:grid!important; grid-template-columns:48px 1fr 48px!important; align-items:center!important; min-height:64px!important; margin:0!important; padding:8px 11px!important; border:0!important; border-bottom:1px solid var(--save-line)!important; border-radius:0!important; background:var(--save-paper)!important; color:var(--save-ink)!important; box-sizing:border-box!important; } #main-content .pati-saved-page-header h1 { font-size:19px!important; font-weight:800!important; text-align:center!important; line-height:1.2!important; letter-spacing:-.35px!important; margin:0!important; color:var(--save-ink)!important; } #main-content .pati-saved-back { display:grid!important; place-items:center!important; width:44px!important; height:44px!important; margin:0!important; padding:8px!important; border:0!important; background:transparent!important; color:var(--save-ink)!important; cursor:pointer!important; } #main-content .pati-saved-back svg{width:28px!important;height:28px!important;stroke:currentColor!important} #main-content .pati-saved-filters { display:flex!important; align-items:center!important; flex-wrap:nowrap!important; gap:7px!important; width:100%!important; padding:12px 12px 9px!important; margin:0!important; overflow-x:auto!important; scroll-snap-type:x proximity; scrollbar-width:none!important; background:var(--save-paper)!important; box-sizing:border-box!important; } #main-content .pati-saved-filters::-webkit-scrollbar{display:none} #main-content .pati-saved-filter { display:inline-flex!important; justify-content:center!important; align-items:center!important; flex:0 0 auto!important; gap:6px!important; box-sizing:border-box!important; min-width:64px!important; min-height:42px!important; padding:9px 13px!important; margin:0!important; border:1px solid var(--save-line)!important; border-radius:99px!important; background:var(--save-paper)!important; color:var(--save-ink)!important; font-family:inherit!important; font-size:12px!important; font-weight:750!important; line-height:1.1!important; white-space:nowrap!important; cursor:pointer!important; } #main-content .pati-saved-filter.active { background:var(--save-chip)!important; border-color:var(--save-chip)!important; } #main-content .pati-saved-color-dot { display:inline-block!important; flex:0 0 auto!important; width:10px!important; height:10px!important; border-radius:50%!important; box-shadow:0 0 0 1px #00000012!important; } .pati-saved-color-dot.green,#main-content .pati-saved-tile[data-importance="green"] .pati-saved-level>span{background:#24ac64!important} .pati-saved-color-dot.orange,#main-content .pati-saved-tile[data-importance="orange"] .pati-saved-level>span{background:#f39a22!important} .pati-saved-color-dot.red,#main-content .pati-saved-tile[data-importance="red"] .pati-saved-level>span{background:#ee4650!important} #main-content .pati-saved-subhead{ display:flex!important; justify-content:space-between!important; align-items:center!important; gap:10px!important; min-height:54px!important; margin:0!important; padding:7px 14px 8px!important; box-sizing:border-box!important; background:var(--save-paper)!important; } #main-content .pati-saved-subhead h2 { margin:0!important; font-size:17px!important; line-height:1.2!important; font-weight:800!important; color:var(--save-ink)!important; } #main-content .pati-saved-subhead>span { color:var(--save-muted)!important; font-size:12px!important; font-weight:650!important; } #main-content .pati-saved-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:2px!important; width:100%!important; margin:0!important; padding:0!important; background:var(--save-line)!important; box-sizing:border-box!important; } #main-content .pati-saved-tile { display:block!important; position:relative!important; isolation:isolate; min-width:0!important; width:100%!important; aspect-ratio:1/1.36!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:#1b2026!important; overflow:hidden!important; } #main-content .pati-saved-tile-open { position:absolute!important; inset:0!important; display:block!important; box-sizing:border-box!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:#22272d!important; color:white!important; cursor:pointer!important; } #main-content .pati-saved-tile-open>img, #main-content .pati-saved-tile-open>video { display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:0!important; margin:0!important; pointer-events:none!important; } #main-content .pati-saved-text-tile{ display:grid!important; position:absolute!important; inset:0!important; place-items:center!important; padding:10px!important; background:linear-gradient(145deg,#373d49,#17191e)!important; color:#fff!important; text-align:center!important; font-size:clamp(10px,2.6vw,15px)!important; font-weight:750!important; line-height:1.4!important; overflow:hidden!important; word-break:break-word!important; } #main-content .pati-saved-kind{ position:absolute!important; z-index:2!important; top:8px!important; right:9px!important; display:grid!important; place-items:center!important; min-width:19px!important; height:19px!important; font-size:14px!important; font-weight:900!important; text-shadow:0 1px 4px #000c!important; color:#fff!important; pointer-events:none!important; } #main-content .pati-saved-level { position:absolute!important; z-index:3!important; right:5px!important; bottom:5px!important; display:grid!important; place-items:center!important; width:34px!important; height:34px!important; padding:0!important; border:1px solid #ffffff75!important; border-radius:50%!important; background:#111b!important; box-shadow:0 2px 8px #0008!important; cursor:pointer!important; } #main-content .pati-saved-level>span { display:block!important; width:14px!important; height:14px!important; border-radius:50%!important; border:1px solid #fff7!important; } #main-content .pati-saved-hint { font-size:12px!important; line-height:1.5!important; margin:0!important; padding:18px 15px!important; color:var(--save-muted)!important; text-align:center!important; } #main-content .pati-saved-empty { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:9px!important; min-height:225px!important; padding:25px!important; text-align:center!important; color:var(--save-muted)!important; } #main-content .pati-saved-empty svg{ width:40px!important; height:40px!important; color:var(--save-muted)!important; stroke:currentColor!important; } #main-content .pati-saved-empty p { color:var(--save-ink)!important; margin:0!important; font-size:14px!important; font-weight:750!important; } #main-content .pati-saved-empty small { color:var(--save-muted)!important; font-size:12px!important; line-height:1.5!important; } .pati-saved-choice-overlay { position:fixed!important; inset:0!important; z-index:2000!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; box-sizing:border-box!important; color:#181a1e!important; } .pati-saved-choice-scrim { position:absolute!important; inset:0!important; background:#090a0cc2!important; } .pati-saved-choice-panel { position:relative!important; display:block!important; width:min(100%,500px)!important; max-height:80dvh!important; padding:17px 14px calc(16px + env(safe-area-inset-bottom,0px))!important; background:#fff!important; color:#181a1e!important; border-radius:24px 24px 0 0!important; box-shadow:0 -8px 35px #0003!important; overflow:auto!important; box-sizing:border-box!important; } .pati-saved-choice-panel header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; } .pati-saved-choice-panel h2{margin:0!important;font-size:20px!important;color:#15171b!important} .pati-saved-choice-panel header button{ width:40px!important;height:40px!important; background:#f0f0f2!important;color:#222!important; border:0!important;border-radius:50%!important; font-size:25px!important;cursor:pointer!important; } .pati-saved-choice-panel>p{ margin:2px 0 13px!important; color:#6a6f78!important;font-size:13px!important;line-height:1.4!important; } .pati-saved-choice-panel .pati-saved-choice-row{ display:flex!important; align-items:center!important; width:100%!important; min-height:66px!important; padding:9px 11px!important; gap:12px!important; border:1px solid #e8eaee!important; border-radius:13px!important; margin:7px 0!important; background:#fff!important; color:#17191e!important; font-family:inherit!important; text-align:left!important; cursor:pointer!important; } .pati-saved-choice-panel .pati-saved-choice-row[aria-pressed="true"] { background:#f4f5f7!important;border-color:#bec2c8!important; } .pati-saved-choice-row .pati-saved-color-dot{width:18px!important;height:18px!important} .pati-saved-choice-row span{display:flex!important;flex:1!important;flex-direction:column!important;gap:4px!important} .pati-saved-choice-row strong{color:#17191e!important;font-size:14px!important} .pati-saved-choice-row small{color:#696e78!important;font-size:12px!important} .pati-saved-choice-row b{color:#1b1e25!important;font-size:18px!important} .pati-saved-choice-row:disabled{opacity:.6!important;cursor:progress!important} #main-content .pati-saved-screen button:focus-visible, .pati-saved-choice-panel button:focus-visible{outline:2px solid #397af4!important;outline-offset:2px} @media(max-width:740px){ /* Hide the global (+/coin/menu) header on Saved ONLY. The saved screen owns its centered title and back action. */ #app-root:not(.hidden):has(#main-content > .pati-saved-screen) > .mobile-header { display:none!important; } #app-root:not(.hidden):has(#main-content > .pati-saved-screen) > .app-shell { padding-top:env(safe-area-inset-top,0px)!important; margin-top:0!important; } #app-root:not(.hidden):has(#main-content > .pati-saved-screen) > .app-shell > .main { padding:0!important;margin:0!important; width:100%!important;max-width:100%!important; } #main-content .pati-saved-page-header { position:sticky!important; top:env(safe-area-inset-top,0px)!important; z-index:5!important; } #main-content .pati-saved-filter {min-height:40px!important;padding:9px 12px!important} } /* Buchee: prevent a second back arrow in saved screen, including cached markup. */ #main-content .pati-saved-page-header .pati-saved-back{display:none!important} #main-content .pati-saved-page-header{grid-template-columns:48px minmax(0,1fr) 48px!important} /* patiyiz-quality-six-20261031.css */ /* Patiyiz / 31 Ekim: Reels, akış, mesaj, bakım, kayıp ilanı ve ödül UX. */ /* Keep the currently selected Patiyiz theme; override only these screens. */ .pati-reel-item{position:relative} .pati-reel-buffering{position:absolute;z-index:8;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;min-width:175px;max-width:75%;padding:14px 20px;border-radius:16px;background:rgba(0,0,0,.76);color:#fff;font-size:12px;font-weight:700;text-align:center;pointer-events:none} .pati-reel-buffering[hidden]{display:none!important} .pati-reel-spinner{display:block;width:23px;height:23px;border:3px solid #fff5;border-top-color:white;border-radius:50%;animation:patiReelBufferSpin .8s linear infinite} @keyframes patiReelBufferSpin{to{transform:rotate(360deg)}} .pati-reel-buffering progress{display:block;width:100%;height:5px;accent-color:#fff} .pati-reel-video[poster]{background:#111} .pati-feed-card .pati-carousel-track{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .pati-feed-card .pati-carousel,.pati-feed-card .pati-video-frame{aspect-ratio:var(--pati-feed-aspect,4 / 5);max-height:min(78dvh,780px);overflow:hidden} .pati-feed-card .pati-carousel-slide img{width:100%;height:100%;object-fit:contain} .pati-feed-card .pati-post-video{max-height:100%} .pati-dm-image-message .pati-dm-image-open{display:block;max-width:min(72vw,390px);padding:0;overflow:hidden} .pati-dm-image-message .pati-dm-image{display:block;width:auto;max-width:100%;max-height:min(65dvh,520px);height:auto;object-fit:contain;border-radius:14px} .pati-dm-voice-card{display:flex;align-items:center;gap:10px;max-width:min(82vw,440px);min-width:0} .pati-dm-voice-main{flex:1;min-width:0} .pati-dm-voice-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650} .pati-dm-audio{display:block;width:100%;max-width:100%;min-width:180px;height:44px} .pati-dm-rec-state:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:10px} .pati-dm-record-elapsed{font-variant-numeric:tabular-nums;font-weight:800} .pati-city-alert small{display:block;margin-top:5px;font-size:11px;line-height:1.5;opacity:.8} .pati-lost-close-btn{font-weight:750!important;border:1px solid currentColor!important} .lost-v2-card.is-found{opacity:.88} .lost-v2-card.is-found .lost-v2-badge{font-weight:800} .pati-coin-spent-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 22px} .pati-coin-spent-overview>div{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px solid var(--border,#e4e4e7);border-radius:14px;background:var(--paper,#fff);color:var(--ink,#17191d)} .pati-coin-spent-overview strong{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums} .pati-coin-spent-overview span{font-size:12px;line-height:1.5;color:var(--muted,#666)} .pati-coin-spent-overview>button{grid-column:1 / -1;min-height:44px;border:1px solid currentColor;border-radius:12px;background:transparent;color:inherit;font-weight:700} @media(max-width:740px){ /* This switch had been forcibly hidden in the 31 October home stylesheet. */ #main-content>.pati-home-feed-tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;margin:5px 9px 6px!important;padding:4px!important;border-radius:13px!important;background:var(--pui-panel,#f3f3f5)} #main-content>.pati-home-feed-tabs>button{min-height:44px!important;font-weight:700!important} #main-content>.pati-feed-posts>.pati-feed-card:nth-child(n+5){content-visibility:auto;contain-intrinsic-size:auto 520px} .pati-dm-voice-card{max-width:100%} .pati-dm-audio{min-width:148px} .pati-coin-spent-overview{gap:8px} .pati-coin-spent-overview>div{padding:12px} } @media(prefers-reduced-motion:reduce){.pati-reel-spinner{animation:none}} /* Recoverable private message media errors: never reveal signed URLs to the UI. */ .pati-dm-media-error{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 10px;margin-top:6px;border:1px solid var(--border,#ddd);border-radius:10px;font-size:12px;line-height:1.4;color:var(--ink,#222);background:var(--paper,#fff)} .pati-dm-media-error>button{min-height:36px;padding:5px 10px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-weight:700;white-space:nowrap} @media(max-width:400px){.pati-dm-media-error{flex-wrap:wrap}} /* patiyiz-clean-release-20261031.css */ /* Patiyiz / 31 Ekim: daha sade ana akış, profil, menü, geri ve seri ödülü. */ #pati-header-coins,#pati-desktop-coins{display:none!important} .pati-home-feed-tabs,#pati-feed-menu{display:none!important} #pati-global-back[hidden]{display:none!important} #pati-global-back{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:inherit;font-size:24px;line-height:1;padding:8px 5px;white-space:nowrap;min-width:56px;min-height:42px;font-weight:750} #pati-global-back span{font-size:12px;font-weight:750} #main-content>.pati-page-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:750;border:0;background:transparent;color:var(--ink,#181818);padding:7px 12px;margin:3px 0 5px;max-width:max-content;min-height:35px} @media(max-width:740px){ .mobile-header #pati-global-back:not([hidden]){flex:0 0 auto} .mobile-header #pati-global-back:not([hidden])~.brand{min-width:0;max-width:45vw} .mobile-header #pati-global-back:not([hidden])~.brand .brand-caption{display:none} #main-content>.pati-page-back{margin:4px 12px!important;padding:6px 5px} .pati-creator-dashboard,.pati-story-fullscreen{overscroll-behavior-y:contain} } /* Never require users to finish a profile. Dismissal is account-specific. */ .pati-optional-onboarding{position:relative;max-width:100%;margin:2px auto 5px;padding:0 10px} .pati-optional-onboarding .pati-progress-card{margin:0!important;max-width:100%;min-height:0} .pati-onboarding-dismiss{position:absolute;z-index:3;right:16px;top:4px;width:33px;height:33px;border:0;border-radius:50%;background:var(--paper,#fff);color:var(--ink,#222);font-size:22px;line-height:1;cursor:pointer} .pati-optional-onboarding .pati-progress-top{padding-right:38px!important} .pati-optional-onboarding .pati-progress-top p{font-size:11px!important} .pati-onboarding-thanks{max-width:100%} /* Compact insights shortcut: detailed insights still opens on tap. */ .pati-ig-profile .pati-profile-insights-preview{display:flex!important;align-items:center;gap:8px;min-height:44px!important;max-height:65px!important;margin:7px 10px!important;padding:7px 11px!important;border-radius:11px!important;width:calc(100% - 20px)!important;box-sizing:border-box} .pati-ig-profile .pati-profile-insights-preview>span:first-child{display:flex;flex:1;flex-direction:column;min-width:0;gap:1px} .pati-ig-profile .pati-profile-insights-preview strong{font-size:12px!important;line-height:1.15} .pati-ig-profile .pati-profile-insights-preview small{font-size:10px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pati-ig-profile .pati-profile-insights-value{font-size:14px!important;line-height:1.1;font-weight:800} .pati-ig-profile .pati-profile-insights-arrow{font-size:16px!important} @media(max-width:740px){.pati-ig-profile .pati-profile-insights-preview{margin:5px 7px!important;width:calc(100% - 14px)!important;min-height:40px!important;padding:6px 10px!important}} /* Full-height scrollable menu, always single-column in a vertical reading order. */ #tools-form .pati-features-list{display:flex!important;flex-direction:column!important;gap:9px!important;min-width:0;overflow-y:visible!important} #tools-form .pati-feature-group,#tools-form .pati-feature-add-pet,#tools-form .pati-feature-notifications{display:block!important;width:100%!important;box-sizing:border-box;min-width:0;margin:0!important} #tools-form .pati-mobile-menu-list{display:flex!important;flex-direction:column!important;gap:2px!important;width:100%;grid-template-columns:1fr!important} #tools-form .pati-mobile-menu-item{display:flex!important;align-items:center!important;justify-content:flex-start;gap:12px;width:100%!important;min-height:46px;text-align:left!important;box-sizing:border-box} #tools-form .pati-mobile-menu-item .pati-menu-arrow{margin-left:auto} #tools-form .pati-feature-group h3{margin:8px 0 5px} #tools-form .pati-feature-intro{margin:2px 0 6px} #tools-form .modal-content{max-height:min(75dvh,780px)!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} @media(max-width:740px){#modal-root:has(#tools-form) .modal{max-height:92dvh!important;display:flex;flex-direction:column}#tools-form{min-height:0;overflow:hidden}#tools-form>.modal-content{max-height:none!important;flex:1;overflow-y:auto!important;padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}} /* Earned streaks are collected explicitly; no coin effects before server success. */ .pati-streak-goal-card .pati-streak-collect{background:var(--ink,#111)!important;color:var(--paper,#fff)!important;border-radius:11px!important;min-height:40px;font-weight:800} .pati-streak-goal-card .pati-streak-collect:disabled{opacity:.55} .pati-streak-goal-card.is-claimable{border:1.5px solid currentColor} .pati-streak-collect-note{font-size:12px;margin:5px 0 0;opacity:.8} @media(prefers-reduced-motion:reduce){.pati-streak-goal-card{scroll-behavior:auto}} /* patiyiz-feed-menu-chat-mobile-20261031.css */ /* Patiyiz 31.10.2026 — mobile-first feed, menu, DM, and typography polish. */ /* Accessible text increase without zooming image grids or native videos. */ #app-root{font-size:15px;line-height:1.48} #app-root .pati-post-caption,#app-root .pati-home-question p,#app-root .chat-person-info small{font-size:13.5px;line-height:1.55} #app-root .pati-feed-card-header strong,#app-root .pati-home-question h3,#app-root .chat-person-info strong{font-size:15.5px;line-height:1.4} #app-root .pati-mobile-menu-item,#app-root .pati-menu-mobile-20261031 button{font-size:14.5px} /* Compact, Instagram-like actions: all controls remain individually tappable. */ #main-content .pati-feed-card .pati-social-actions{display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:3px!important;padding:6px 8px!important;flex-wrap:nowrap!important} #main-content .pati-feed-card .pati-social-actions>button{display:inline-flex!important;align-items:center;justify-content:center;gap:3px;min-width:40px!important;min-height:43px!important;margin:0!important;padding:5px 7px!important;flex:0 0 auto!important} #main-content .pati-feed-card .pati-social-actions>button.pati-save-action{margin-left:2px!important;order:5!important} #main-content .pati-feed-card .pati-social-actions>button[data-action="share-post"]{order:4!important} #main-content .pati-feed-card .pati-social-actions>button[data-action="like"]{order:1!important} #main-content .pati-feed-card .pati-social-actions>button[data-action="comment"]{order:2!important} #main-content .pati-feed-card .pati-social-actions>button[data-action="pati-repost"]{order:3!important} #main-content .pati-feed-card .pati-social-actions>button svg{width:21px;height:21px} #main-content .pati-feed-card .pati-social-actions>button span{font-size:12px} @media(max-width:375px){#main-content .pati-feed-card .pati-social-actions>button{padding:4px!important;min-width:38px!important}} /* Feed reel: visible preview and a direct, accessible link to the fullscreen viewer. */ #main-content .pati-feed-reel-card .pati-video-frame{position:relative;background:#111;overflow:hidden} #main-content .pati-feed-reel-card .pati-feed-reel-open{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;border:0;background:linear-gradient(0deg,rgba(0,0,0,.34),rgba(0,0,0,.03) 50%,rgba(0,0,0,.16));color:#fff;cursor:pointer} #main-content .pati-feed-reel-open>span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.51);backdrop-filter:blur(6px);font-size:24px;padding-left:4px} #main-content .pati-feed-reel-open>small{font-weight:800;font-size:12px;letter-spacing:.02em;text-shadow:0 1px 4px #000} #main-content .pati-feed-reel-card .pati-video-sound{z-index:8;position:absolute} /* Native Q&A cards, placed between existing post cards without opening a new filter. */ #main-content .pati-home-question{margin:12px auto!important;padding:13px 14px!important;border-radius:15px!important;background:var(--paper,#fff);color:var(--ink,#181818)} #main-content .pati-home-question-tag{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} #main-content .pati-home-question-tag>span{font-size:10px;letter-spacing:.1em;font-weight:850;border:1px solid currentColor;border-radius:999px;padding:4px 8px} #main-content .pati-home-question-tag>button{border:0;background:none;color:inherit;font-size:12px;font-weight:800;padding:8px} #main-content .pati-home-question-author{margin-bottom:8px} #main-content .pati-home-question h3{margin:8px 0 6px;font-weight:850;overflow-wrap:anywhere} #main-content .pati-home-question p{margin:3px 0 12px;overflow-wrap:anywhere} #main-content .pati-home-question-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #main-content .pati-home-question-actions>button{min-height:42px;border:1px solid var(--border,#e8e8e8);border-radius:10px;background:transparent;color:inherit;padding:6px 10px;display:inline-flex;gap:5px;align-items:center;font-weight:700;font-size:12px} #main-content .pati-home-question-actions>button:last-child{margin-left:auto} /* Keep only one visible "back" surface at mobile widths. Global header back owns navigation. */ @media(max-width:740px){ #main-content>.pati-page-back, #main-content .pati-streaks-back, #main-content .pati-dm-inbox-back, #main-content .pati-profile-back, #main-content .pati-pet-hub-return, #main-content .pati-detail-toolbar>button[data-action="post-back"]{display:none!important} #pati-global-back:not([hidden]){display:inline-flex!important;min-width:52px;gap:4px} } /* A proper mobile menu: almost edge to edge, large touch rows, single scrolling surface. */ @media(max-width:740px){ #modal-root:has(#tools-form) .modal-backdrop{display:flex!important;align-items:stretch!important;justify-content:center!important;padding:7px 6px calc(6px + env(safe-area-inset-bottom))!important;box-sizing:border-box} #modal-root:has(#tools-form) .modal{width:100%!important;max-width:none!important;max-height:calc(100dvh - 13px - env(safe-area-inset-bottom))!important;min-height:min(570px,87dvh)!important;margin:0!important;border-radius:20px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important} #modal-root:has(#tools-form) .modal-header{flex:none;padding:16px 18px!important;border-bottom:1px solid var(--border,#e4e4e7)} #modal-root:has(#tools-form) .modal-header h2{font-size:20px!important;font-weight:850!important} #modal-root:has(#tools-form) #tools-form{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden} #modal-root:has(#tools-form) #tools-form .modal-content{flex:1!important;overflow-y:auto!important;max-height:none!important;padding:13px 15px calc(88px + env(safe-area-inset-bottom))!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} } #tools-form .pati-menu-mobile-20261031{gap:12px!important} #tools-form .pati-menu-mobile-20261031 .pati-feature-group{background:var(--paper,#fff)!important;border:1px solid var(--border,#e7e7e7)!important;border-radius:17px!important;padding:9px 10px 10px!important;box-shadow:none!important} #tools-form .pati-menu-mobile-20261031 .pati-feature-group h3{padding:4px 8px!important;font-size:12px!important;letter-spacing:.02em;font-weight:850!important;color:var(--muted,#6a6a6a)!important} #tools-form .pati-menu-mobile-20261031 .pati-mobile-menu-list{display:flex!important;flex-direction:column!important;gap:0!important} #tools-form .pati-menu-mobile-20261031 .pati-mobile-menu-item{min-height:52px!important;width:100%!important;border:0!important;border-bottom:1px solid var(--border,#efefef)!important;border-radius:0!important;background:transparent!important;text-align:left!important;padding:10px 9px!important;font-weight:700!important;line-height:1.35!important} #tools-form .pati-menu-mobile-20261031 .pati-mobile-menu-item:last-child{border-bottom:0!important} #tools-form .pati-menu-mobile-20261031 .pati-menu-icon{width:36px;height:36px;min-width:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface,#f4f4f4)} #tools-form .pati-menu-mobile-20261031 .pati-menu-arrow{margin-left:auto;opacity:.65} #tools-form .pati-menu-mobile-20261031 .pati-feature-intro{font-size:12px!important;font-weight:700;opacity:.7;margin:1px 5px!important} #tools-form .pati-feature-notifications{border:1px solid var(--border,#e5e5e5)!important;background:var(--paper,#fff)!important;border-radius:17px!important;padding:12px!important} #tools-form .pati-menu-notifications-top{display:flex!important;align-items:center;justify-content:space-between;gap:8px} #tools-form .pati-menu-notifications-top h3{margin:0!important;font-size:14px!important;font-weight:850!important} #tools-form .pati-menu-notifications-all{border:1px solid var(--border,#d2d2d2)!important;border-radius:999px!important;padding:8px 14px!important;min-width:60px!important;min-height:38px!important;background:transparent!important;color:inherit!important;font-size:12px!important;font-weight:800!important} #tools-form .pati-menu-notifications-list{margin:8px 0 0!important;max-height:90px;overflow:hidden} #tools-form .pati-menu-notifications-list .pati-alert-row{margin:0!important;padding:5px!important;border:0!important;max-width:100%} #tools-form .pati-menu-notifications-list .pati-alert-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Completely white compact profile-insights shortcut on the same visual plane as the profile. */ #main-content .pati-ig-profile .pati-profile-insights-preview{background:#fff!important;background-image:none!important;color:#111!important;border:1px solid #ededed!important;box-shadow:none!important;opacity:1!important} #main-content .pati-profile-insights-preview strong,#main-content .pati-profile-insights-preview small,#main-content .pati-profile-insights-preview .pati-profile-insights-value,#main-content .pati-profile-insights-preview .pati-profile-insights-arrow{color:#111!important;opacity:1!important} #main-content .pati-profile-insights-preview small{color:#555!important} /* Widen messaging toward both phone edges, account for keyboard and safe area. */ @media(max-width:740px){ #main-content:has(.pati-dm-layout){width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0 6px!important;box-sizing:border-box!important;overflow-x:hidden!important} #main-content .pati-dm-top{margin:0!important;padding:12px 8px 8px!important;gap:8px;max-width:100%;box-sizing:border-box} #main-content .pati-dm-top-actions{gap:5px!important;flex-wrap:wrap;justify-content:flex-end} #main-content .pati-dm-top-actions button{min-height:37px!important;padding:6px 8px!important;font-size:12px!important} #main-content .pati-dm-filters{padding:0 4px!important;margin:4px 0 8px!important} #main-content .pati-dm-searchbar{display:flex!important;width:calc(100% - 8px)!important;max-width:none!important;margin:0 4px 9px!important;box-sizing:border-box} #main-content .pati-dm-layout{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;border-radius:13px!important;box-sizing:border-box!important} #main-content .pati-dm-layout .chat-people,#main-content .pati-dm-layout .chat-window{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important} #main-content .pati-dm-layout .chat-people{padding:6px 5px!important} #main-content .pati-dm-layout .pati-dm-list-row{width:100%!important;min-width:0!important;margin:0!important;padding:7px 6px!important;box-sizing:border-box!important} #main-content .pati-dm-layout .chat-person{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important} #main-content .pati-dm-layout .chat-history{padding:12px 9px!important;max-width:100%!important;box-sizing:border-box} #main-content .pati-dm-layout .chat-compose,#main-content .pati-dm-layout .chat-input-area{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding-left:7px!important;padding-right:7px!important} #main-content .pati-dm-layout .bubble-chat{max-width:min(85%,380px)!important;overflow-wrap:anywhere} #main-content .pati-dm-layout.mobile-chat-open .chat-people{display:none!important} #main-content .pati-dm-layout.mobile-chat-list .chat-window{display:none!important} } @media(prefers-reduced-motion:reduce){#main-content .pati-feed-reel-open{transition:none!important}} /* Reel rail: keep like, share and saved icon visibly grouped and thumb-friendly. */ #main-content .pati-reel-rail{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important} #main-content .pati-reel-rail .pati-reel-action{margin:0!important;padding:6px 5px!important;min-width:43px!important;min-height:47px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important} #main-content .pati-reel-rail .pati-reel-action svg{width:23px!important;height:23px!important} #main-content .pati-reel-rail .pati-reel-action-label,#main-content .pati-reel-rail .pati-reel-count{font-size:10px!important;line-height:1.25!important} @media(max-width:740px){ #main-content .pati-reel-rail{right:max(5px,env(safe-area-inset-right))!important} #main-content .pati-reel-rail .pati-reel-action{min-height:44px!important} } /* patiyiz-interaction-polish-20261031.css */ /* Patiyiz / 31 Ekim: compact story actions, touch-first DM and premium compose. */ /* Keep story controls thumb-friendly without covering the story. */ #story-overlay .pati-own-story-footer .story-viewers-button.pati-story-viewer-preview{ display:inline-flex!important;align-items:center!important;justify-content:flex-start!important; flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:min(178px,52vw)!important; min-height:34px!important;padding:5px 9px!important;gap:5px!important; border-radius:13px!important;font-size:11px!important;line-height:1.15!important; box-sizing:border-box!important; } #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-stack{ flex:none!important;max-width:41px!important;transform:scale(.82);transform-origin:left center; } #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-label{ font-size:11px!important;line-height:1.2!important;white-space:nowrap!important; } #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-status{ font-size:10px!important;line-height:1.15!important;max-width:64px!important; overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } @media(max-width:390px){ #story-overlay .pati-own-story-footer .pati-story-viewer-preview{max-width:142px!important;min-height:32px!important;padding:4px 7px!important} #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-status{max-width:42px!important} } /* Remove old always-visible buttons; reactions and options live on long press. */ #main-content .pati-dm-layout .pati-dm-msg-tools{display:none!important} #main-content .pati-dm-layout .bubble-chat[data-message-id]{touch-action:pan-y;user-select:text;-webkit-user-select:text} #main-content .pati-dm-layout .bubble-chat.pati-dm-swiping{ transform:translate3d(var(--pati-dm-swipe-x,0),0,0)!important; transition:none!important;will-change:transform; } #main-content .pati-dm-layout .bubble-chat[data-message-id] .pati-dm-reaction-summary{ pointer-events:none; } #message-options-form .pati-dm-press-emojis{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center; gap:5px;padding:8px;background:rgba(128,128,128,.08); border:1px solid rgba(128,128,128,.16);border-radius:18px;margin-bottom:12px; } #message-options-form .pati-dm-press-emojis button{ min-height:45px;border:0;border-radius:13px;background:transparent;color:inherit; font-size:26px;cursor:pointer;transition:transform .14s ease,background .14s ease; } #message-options-form .pati-dm-press-emojis button:hover, #message-options-form .pati-dm-press-emojis button:focus-visible{ transform:scale(1.09);background:rgba(128,128,128,.13);outline-offset:2px; } #message-options-form .pati-dm-press-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #message-options-form .pati-dm-press-actions button{ border:1px solid rgba(128,128,128,.2);border-radius:12px;padding:12px 9px; color:inherit;background:rgba(128,128,128,.07);font-size:13px;font-weight:650; } #message-options-form .pati-dm-press-actions button.pati-msg-delete{color:#ef6868} #message-options-form .pati-dm-press-hint{font-size:11px;opacity:.7;margin:11px 0 0;text-align:center} #main-content .pati-dm-layout .pati-dm-reply-compose:not([hidden]){ border-left:3px solid #888!important;border-radius:8px; } /* Reposted: white check, never red. */ #main-content [data-action="pati-repost"].active{ color:#fff!important;-webkit-text-fill-color:#fff!important;position:relative!important; } #main-content [data-action="pati-repost"].active .pati-repost-symbol{ color:#fff!important;stroke:#fff!important; } #main-content [data-action="pati-repost"].active::after{ content:"✓";position:absolute;top:0;right:1px; width:14px;height:14px;display:grid;place-items:center; color:#fff!important;background:#16181c;border:1px solid rgba(255,255,255,.45); border-radius:50%;font-size:10px;font-weight:900;line-height:1; box-shadow:0 1px 5px rgba(0,0,0,.35);pointer-events:none; } #main-content .pati-reel-repost.active::after{right:0;top:0} #main-content .pati-engagement-stats{ display:flex;gap:5px 13px;align-items:center;flex-wrap:wrap; padding:3px 13px 7px;margin:0;color:var(--muted,#93979e); font-size:10px;line-height:1.4;font-weight:550; } #main-content .pati-engagement-metric{white-space:nowrap;letter-spacing:.01em} #main-content .pati-reel-rail .pati-engagement-metric{ display:block;font-size:10px;min-height:10px;line-height:1.1; color:#fff;font-variant-numeric:tabular-nums; } #main-content .pati-reel-rail .pati-reel-action{gap:1px!important} #main-content .pati-video-frame .pati-video-heart-burst{ position:absolute;z-index:7;inset:50% auto auto 50%;transform:translate(-50%,-50%); color:#fff;font-size:72px;text-shadow:0 3px 18px rgba(0,0,0,.5); opacity:0;pointer-events:none; } /* Premium but controlled color on the *icons*, rather than garish cards. */ #pati-create-sheet .pati-create-choices{gap:9px!important} #pati-create-sheet .pati-create-choice{ border-radius:16px!important;border:1px solid rgba(255,255,255,.11)!important; background:linear-gradient(116deg,#202126,#17181c)!important; min-height:71px!important;padding:11px 13px!important; box-shadow:0 5px 18px rgba(0,0,0,.12)!important; } #pati-create-sheet .pati-create-choice .pati-choice-icon{ width:46px!important;height:46px!important;flex:0 0 46px!important; display:grid!important;place-items:center!important;border-radius:14px!important; color:#fff!important;border:1px solid rgba(255,255,255,.22)!important; box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 5px 13px rgba(0,0,0,.21)!important; } #pati-create-sheet .pati-create-choice .pati-choice-icon svg{color:#fff!important;stroke:#fff!important;fill:none} #pati-create-sheet .pati-create-choice[data-action="pati-create-post"] .pati-choice-icon{background:linear-gradient(145deg,#468cff,#5363e9)!important} #pati-create-sheet .pati-create-choice[data-action="pati-create-text"] .pati-choice-icon{background:linear-gradient(145deg,#21b8ac,#12807f)!important} #pati-create-sheet .pati-create-choice[data-action="pati-create-story"] .pati-choice-icon{background:linear-gradient(145deg,#f4846d,#cf5099)!important} #pati-create-sheet .pati-create-choice[data-action="pati-create-reels"] .pati-choice-icon{background:linear-gradient(145deg,#be5af2,#eb618a)!important} #pati-create-sheet .pati-create-choice[data-action="pati-create-question"] .pati-choice-icon{background:linear-gradient(145deg,#f0ac49,#db7142)!important} #pati-create-sheet .pati-create-choice:hover{border-color:rgba(255,255,255,.3)!important;background:linear-gradient(110deg,#2b2c32,#222329)!important} @media(prefers-reduced-motion:reduce){ #pati-create-sheet .pati-create-choice, #message-options-form .pati-dm-press-emojis button{transition:none!important} } /* 31 Oct follow-up: iPhone selection handles are never part of message UI. */ #main-content .pati-dm-layout .bubble-chat[data-message-id], #main-content .pati-dm-layout .bubble-chat[data-message-id] *, #modal-root #message-options-form, #modal-root #message-options-form *, #pati-creator-dashboard, #pati-creator-dashboard * { -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } #main-content .pati-dm-layout .bubble-chat[data-message-id]::selection, #pati-creator-dashboard *::selection, #modal-root #message-options-form *::selection{background:transparent!important;color:inherit!important} #modal-root #message-options-form button, #main-content .pati-dm-layout .bubble-chat button{touch-action:manipulation} #pati-creator-dashboard input, #pati-creator-dashboard textarea, #modal-root #message-options-form input, #modal-root #message-options-form textarea{ -webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important; } /* Only the main feed offers the global share plus. */ html[data-pati-view]:not([data-pati-view="home"]) #pati-header-share, html[data-pati-view]:not([data-pati-view="home"]) #app-root .nav-create, html[data-pati-view]:not([data-pati-view="home"]) #app-root .pati-desktop-action-button.primary[data-action="pati-create-open"], #pati-header-share[hidden], #app-root .nav-create[hidden]{display:none!important} /* Invisible open target: single tap enters the already fullscreen vertical Reels player. */ #main-content .pati-feed-reel-card .pati-feed-reel-open{ inset:0!important;position:absolute!important;z-index:6!important; width:100%!important;height:100%!important;border:0!important;border-radius:0!important; padding:0!important;display:block!important; background:transparent!important;box-shadow:none!important; backdrop-filter:none!important;color:transparent!important; -webkit-tap-highlight-color:transparent!important; } #main-content .pati-feed-reel-card .pati-feed-reel-open .pati-feed-reel-open-hit{display:none!important} #main-content .pati-feed-reel-card .pati-video-sound{ position:absolute!important;z-index:10!important;pointer-events:auto!important; } /* A quick, native-looking helpful / not-helpful choice, no duplicate shortcut. */ #main-content .pati-home-question .pati-home-question-actions, #main-content .pati-community-card .pati-actionbar{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important} #main-content .pati-home-question .pati-home-question-actions>button, #main-content .pati-community-card .pati-actionbar>button{ min-height:40px!important;border-radius:12px!important; padding:8px 10px!important;line-height:1.15!important;font-size:12px!important; } #main-content .pati-home-question-actions>button[data-action="vote"], #main-content .pati-home-question-actions>button[data-action="vote-negative"], #main-content .pati-community-card .pati-actionbar>button[data-action="vote"], #main-content .pati-community-card .pati-actionbar>button[data-action="vote-negative"]{ display:inline-flex!important;align-items:center!important;gap:4px!important; border:1px solid var(--border,#ddd)!important; background:transparent!important;color:inherit!important; font-weight:730!important;transition:background .12s,border-color .12s,transform .12s!important; } #main-content button[data-action="vote"] svg, #main-content button[data-action="vote-negative"] svg{width:17px!important;height:17px!important} #main-content .pati-home-question button[data-action="vote"].active, #main-content .pati-community-card button[data-action="vote"].active{ color:#ed444f!important;border-color:rgba(237,68,79,.35)!important; background:rgba(237,68,79,.09)!important; } #main-content .pati-home-question button[data-action="vote-negative"].active, #main-content .pati-community-card button[data-action="vote-negative"].active{ color:var(--ink,#202020)!important;border-color:rgba(120,120,120,.4)!important; background:rgba(128,128,128,.13)!important; } #main-content .pati-home-question button[data-action="vote"]:disabled, #main-content .pati-home-question button[data-action="vote-negative"]:disabled, #main-content .pati-community-card button[data-action="vote"]:disabled, #main-content .pati-community-card button[data-action="vote-negative"]:disabled{opacity:1!important} #main-content .pati-home-question-actions>button[data-action="replies"]{margin-left:auto!important} @media (prefers-reduced-motion:reduce){ #main-content button[data-action="vote"], #main-content button[data-action="vote-negative"]{transition:none!important} } /* 31 Oct refinement: voting result majority and natural button counters. */ #main-content .pati-home-question button[data-action="vote"].active, #main-content .pati-home-question button[data-action="vote"].pati-vote-leading, #main-content .pati-community-card button[data-action="vote"].active, #main-content .pati-community-card button[data-action="vote"].pati-vote-leading{ color:#148447!important; border-color:rgba(19,150,83,.45)!important; background:rgba(24,167,93,.10)!important; } #main-content .pati-home-question button[data-action="vote-negative"].active, #main-content .pati-home-question button[data-action="vote-negative"].pati-vote-leading, #main-content .pati-community-card button[data-action="vote-negative"].active, #main-content .pati-community-card button[data-action="vote-negative"].pati-vote-leading{ color:#d93243!important; border-color:rgba(215,53,66,.4)!important; background:rgba(219,48,65,.09)!important; } #main-content .pati-question-vote-up.pati-vote-leading, #main-content .pati-question-vote-down.pati-vote-leading{ box-shadow:inset 0 0 0 1px currentColor!important; } #main-content .pati-social-actions{display:flex!important;align-items:center!important;gap:clamp(5px,1.7vw,14px)!important;flex-wrap:nowrap!important;min-width:0} #main-content .pati-social-actions>button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;padding:6px 3px!important;font-variant-numeric:tabular-nums} #main-content .pati-social-actions .pati-engagement-metric{ display:inline!important;min-width:10px;font-size:11px!important;color:inherit!important; font-weight:650;line-height:1!important;white-space:nowrap; } #main-content .pati-social-actions>button svg{flex:none} #main-content .pati-feed-card .pati-social-actions>button[data-action="save"]{margin-left:0!important} @media(max-width:385px){#main-content .pati-social-actions>button{gap:3px!important;font-size:11px!important}} /* Reply sheet reuses exactly the established post comments layout. */ #modal-root .pati-question-comments .pati-question-reply-summary{padding:12px 15px!important;margin:0!important} #modal-root .pati-question-comments .pati-question-reply-summary h3{ margin:0 0 5px!important;font-size:14px!important;font-weight:800!important; line-height:1.42!important;color:inherit!important } #modal-root .pati-question-comments .pati-question-reply-summary p{margin:0!important;font-size:12px!important;line-height:1.5!important;opacity:.78} #modal-root .pati-question-comments .comment-list{flex:1!important;min-height:0!important;overflow-y:auto!important;padding:9px 14px 24px!important} #modal-root .pati-question-comments .pati-question-reply-row{margin-bottom:14px!important;border:0!important;background:transparent!important} #modal-root .pati-question-comments .pati-question-reply-row .pati-sheet-comment-main p{overflow-wrap:anywhere} #modal-root .pati-question-comments .modal-footer{flex:none!important} #modal-root .pati-question-comments .pati-comment-editor-row textarea{min-width:0!important;flex:1!important;resize:none!important} /* The surface behind and beside the DM header is white, not black bands. */ html[data-pati-view="messages"] body, html[data-pati-view="messages"] #app-root, html[data-pati-view="messages"] #app-root .app-shell, html[data-pati-view="messages"] #app-root .mobile-header, html[data-pati-view="messages"] #main-content:has(.pati-dm-layout), html[data-pati-view="messages"] #main-content .pati-dm-top, html[data-pati-view="messages"] #main-content .pati-dm-layout, html[data-pati-view="messages"] #main-content .pati-dm-layout .chat-window, html[data-pati-view="messages"] #main-content .pati-dm-layout .chat-history, html[data-pati-view="messages"] #main-content .pati-dm-layout .chat-people{ background:#fff!important;background-image:none!important; } html[data-pati-view="messages"] #main-content .pati-dm-top, html[data-pati-view="messages"] #main-content .pati-dm-title, html[data-pati-view="messages"] #main-content .chat-window header, html[data-pati-view="messages"] #main-content .chat-person-info, html[data-pati-view="messages"] #main-content .pati-dm-list-row{color:#15171c!important} html[data-pati-view="messages"] #main-content .chat-window header{background:#fff!important;border-color:#ebedf0!important} html[data-pati-view="messages"] #main-content .pati-dm-layout .chat-form, html[data-pati-view="messages"] #main-content .pati-dm-layout .chat-compose{background:#fff!important} html[data-pati-view="messages"] #main-content .chat-people{border-color:#edf0f3!important} @media(max-width:740px){ html[data-pati-view="messages"] #main-content:has(.pati-dm-layout){padding-inline:0!important} html[data-pati-view="messages"] #main-content .pati-dm-top{padding-left:13px!important;padding-right:13px!important} html[data-pati-view="messages"] #main-content .pati-dm-layout{border:0!important;border-radius:0!important} html[data-pati-view="messages"] #main-content .chat-history{padding:13px 14px!important} } /* Gentle inset text and headers, without moving full-bleed videos or image cards. */ #main-content .pati-post-caption, #main-content .pati-post-details, #main-content .pati-feed-text-content, #main-content .pati-home-question-author, #main-content .pati-home-question h3, #main-content .pati-home-question p, #main-content .pati-ig-info{padding-left:clamp(3px,1.5vw,8px)!important} #main-content .pati-post-details{padding-right:10px!important} #main-content .pati-home-question .pati-home-question-actions{padding-left:3px!important} /* Clear back navigation with the original single-back-per-page behavior. */ #pati-global-back:not([hidden]),#main-content>.pati-page-back{ align-items:center!important;justify-content:center!important;gap:6px!important; border:1px solid #e8eaf0!important;border-radius:13px!important; background:#f3f5f7!important;color:#22272e!important; min-height:38px!important;padding:6px 10px!important; font-size:12px!important;font-weight:760!important;line-height:1!important; box-shadow:none!important;white-space:nowrap!important; } #pati-global-back svg,#main-content>.pati-page-back svg{display:block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:740px){ #pati-global-back:not([hidden]){margin-left:8px!important;min-width:39px!important;min-height:39px!important;max-width:84px!important;position:relative!important;inset:auto!important} } html[data-pati-theme="dark"]:not([data-pati-view="messages"]) #pati-global-back:not([hidden]){ background:#22252d!important;color:#f5f5f6!important;border-color:#343943!important; } /* Video shows play / pause feedback only after an explicit single tap. */ #main-content .pati-reel-item .pati-reel-play-feedback{ display:grid!important;place-items:center!important; position:absolute!important;left:50%!important;top:48%!important;transform:translate(-50%,-50%) scale(.82); width:72px;height:72px;pointer-events:none!important;z-index:15!important; border-radius:50%;background:rgba(0,0,0,.47);color:#fff!important; font-size:39px;font-weight:720;line-height:1;opacity:0; } #main-content .pati-reel-item .pati-reel-play-feedback.pati-reel-play-flash{ animation:patiReelPlaybackFlash .78s ease-out both; } @keyframes patiReelPlaybackFlash{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.8)} 24%{opacity:1;transform:translate(-50%,-50%) scale(1)} 75%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)} } @media(prefers-reduced-motion:reduce){ #main-content .pati-reel-item .pati-reel-play-feedback.pati-reel-play-flash{ animation:patiReelPlaybackFlash .15s linear both!important; } } /* 31 Oct Q&A, mobile and theme regression repair. One final, scoped cascade rather than more global overrides. */ html[data-pati-theme="light"]{ --pati-repair-panel:#fff;--pati-repair-text:#20242a; --pati-repair-muted:#626b76;--pati-repair-line:#e7e9ee; --pati-repair-field:#f2f4f7;--pati-repair-quote:#f7f8fa; } html[data-pati-theme="dark"]{ --pati-repair-panel:#1c1e24;--pati-repair-text:#f6f7f9; --pati-repair-muted:#b4b9c4;--pati-repair-line:#414550; --pati-repair-field:#292c35;--pati-repair-quote:#252832; } /* Both Q&A replies and post comments now use the same sheet surfaces. */ html[data-pati-theme] #modal-root .modal.pati-instagram-comments, html[data-pati-theme] #modal-root .pati-instagram-comments :is(.modal-header,.modal-content,.modal-footer), html[data-pati-theme] #modal-root :is(#comment-form,#reply-form), html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) :is(.comment-list,.pati-comment-post-summary){ background:var(--pati-repair-panel)!important; background-image:none!important;color:var(--pati-repair-text)!important; } html[data-pati-theme] #modal-root .pati-instagram-comments .modal-header, html[data-pati-theme] #modal-root .pati-instagram-comments .modal-footer, html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-post-summary{ border-color:var(--pati-repair-line)!important; } html[data-pati-theme] #modal-root .pati-instagram-comments .modal-header h2, html[data-pati-theme] #modal-root .pati-instagram-comments .close-modal{ color:var(--pati-repair-text)!important; } html[data-pati-theme] #modal-root .pati-instagram-comments .close-modal{ background:var(--pati-repair-field)!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-post-summary :is(h3,p,strong,small), html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-post-user, html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment, html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment :is(p,strong), html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-profile-name{ color:var(--pati-repair-text)!important; -webkit-text-fill-color:var(--pati-repair-text)!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) :is(.pati-sheet-comment-line time,.comment-actions button,.pati-comments-empty,.pati-question-reply-summary p,.pati-comment-post-summary>small){ color:var(--pati-repair-muted)!important; -webkit-text-fill-color:var(--pati-repair-muted)!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .comment-actions button{ background:none!important;border:0!important; font-size:11px!important;font-weight:700!important; padding:4px 0!important;min-height:28px; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .comment-actions{ display:flex!important;align-items:center!important;flex-wrap:wrap!important; gap:4px 15px!important;margin:2px 0 0!important;padding:0!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .comment-list{ flex:1 1 auto!important;min-height:0!important; overflow-y:auto!important;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 14px 22px!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment{ display:grid!important;grid-template-columns:35px minmax(0,1fr) 37px!important; gap:0 10px!important;align-items:start!important; border:0!important;margin-bottom:0!important; padding:12px 2px!important;box-sizing:border-box!important;min-width:0; } html[data-pati-theme] #modal-root #reply-form .pati-question-reply-row{ grid-template-columns:35px minmax(0,1fr)!important; margin:0!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment-avatar .avatar{ width:34px!important;height:34px!important;min-width:34px!important; border-radius:50%!important;object-fit:cover!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment-main{ min-width:0!important;max-width:100%!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment-line{ display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 8px!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-sheet-comment p{ margin:4px 0 5px!important;line-height:1.46!important; font-size:14px!important;overflow-wrap:anywhere!important;white-space:pre-wrap; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-profile-name{ background:none!important;border:0!important;text-align:left!important; font-size:13px!important;font-weight:800!important;min-width:0; padding:0!important;overflow-wrap:anywhere!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-post-user{ display:flex;align-items:center;gap:9px;min-height:36px;margin-bottom:9px; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-post-summary{ flex:none!important;max-height:30%!important;overflow-y:auto!important; padding:13px 16px!important;border-bottom:1px solid var(--pati-repair-line)!important; } html[data-pati-theme] #modal-root #reply-form .pati-question-reply-summary h3{ margin:5px 0!important;line-height:1.4!important;font-weight:800!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-quick{ display:flex!important;overflow-x:auto!important;gap:8px!important; flex-wrap:nowrap!important;scrollbar-width:none!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-quick>button{ flex:0 0 35px!important;min-width:35px!important;min-height:35px!important; border:0!important;background:transparent!important;font-size:20px!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row{ display:flex!important;align-items:center!important;min-width:0!important;width:100%!important; gap:8px!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row textarea{ display:block!important;flex:1 1 0!important;min-width:0!important; min-height:44px!important;max-height:96px!important; font-size:16px!important;line-height:1.35!important;resize:none!important; padding:10px 12px!important;box-sizing:border-box!important; color:var(--pati-repair-text)!important; background:var(--pati-repair-field)!important;border:1px solid var(--pati-repair-line)!important; border-radius:21px!important;-webkit-text-fill-color:var(--pati-repair-text)!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row textarea::placeholder{ color:var(--pati-repair-muted)!important;-webkit-text-fill-color:var(--pati-repair-muted)!important;opacity:1; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row .pati-comment-send{ flex:0 0 auto!important;min-height:42px!important;border:0!important; padding:8px 12px!important;border-radius:11px!important; color:#fff!important;background:#2377ef!important; -webkit-text-fill-color:#fff!important; font-size:12px!important;font-weight:800!important; } html[data-pati-theme] #modal-root .pati-instagram-comments .modal-footer{ padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important; } html[data-pati-theme] #modal-root .pati-instagram-comments :is(#comment-form,#reply-form){ display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important; } html[data-pati-theme] #modal-root .modal.pati-instagram-comments{ height:min(82dvh,860px)!important; max-height:calc(100dvh - var(--pati-keyboard-inset,0px) - 12px)!important; } html[data-pati-theme="light"] #modal-root #comment-form .pati-comment-heart svg.icon{stroke:#747984!important} html[data-pati-theme="light"] #modal-root #comment-form .pati-comment-heart small{color:#747984!important} html[data-pati-theme="light"] #modal-root #comment-form .pati-comment-reply-hint{ background:#f1f3f7!important;color:#444b56!important; } /* The vote result is colored by the majority only. A minority selection gets a check, not a competing color. */ #main-content :is(.pati-home-question,.pati-community-card) button[data-action="vote"].active:not(.pati-vote-leading), #main-content :is(.pati-home-question,.pati-community-card) button[data-action="vote-negative"].active:not(.pati-vote-leading){ color:var(--ink,var(--pui-text,#3b414a))!important; border-color:var(--border,var(--pui-border,#aeb4bf))!important; background:var(--surface,var(--pui-raised,#e5e7eb))!important; } #main-content :is(.pati-home-question,.pati-community-card) button:is([data-action="vote"],[data-action="vote-negative"]).active:not(.pati-vote-leading)::after{ content:"✓";font-size:11px;font-weight:900;line-height:1; margin-left:1px;color:inherit; } html[data-pati-theme="dark"] #main-content :is(.pati-home-question,.pati-community-card) button:is([data-action="vote"],[data-action="vote-negative"]).active:not(.pati-vote-leading){ color:#e6e8ef!important;border-color:#646877!important;background:#383c46!important; } /* Dark mode respects the user's theme in chat and profile stats; no permanent white surfaces. */ html[data-pati-theme="dark"][data-pati-view="messages"] :is(body,#app-root,#main-content), html[data-pati-theme="dark"][data-pati-view="messages"] #app-root :is(.app-shell,.mobile-header), html[data-pati-theme="dark"][data-pati-view="messages"] #main-content :is(.pati-dm-top,.pati-dm-layout,.chat-window,.chat-history,.chat-people,.chat-compose,.chat-form), html[data-pati-theme="dark"][data-pati-view="messages"] #main-content .chat-window header{ background:var(--pati-repair-panel)!important;background-image:none!important; color:var(--pati-repair-text)!important; } html[data-pati-theme="dark"][data-pati-view="messages"] #main-content :is(.pati-dm-title,.pati-dm-top,.chat-person-info,.pati-dm-list-row){ color:var(--pati-repair-text)!important; } html[data-pati-theme="dark"][data-pati-view="messages"] #main-content :is(.chat-window header,.chat-people){ border-color:var(--pati-repair-line)!important; } html[data-pati-theme="dark"] #main-content .pati-ig-profile .pati-profile-insights-preview{ background:var(--pati-repair-panel)!important;background-image:none!important; border-color:var(--pati-repair-line)!important;color:var(--pati-repair-text)!important; } html[data-pati-theme="dark"] #main-content .pati-profile-insights-preview :is(strong,small,.pati-profile-insights-value,.pati-profile-insights-arrow){ color:var(--pati-repair-text)!important; } /* Mobile layout: no clipped action rows, sheets, menus or keyboard composer. */ @media(max-width:740px){ html[data-pati-theme] #modal-root .modal.pati-instagram-comments{ width:100%!important;max-width:none!important; height:min(83dvh,850px)!important;max-height:calc(100dvh - var(--pati-keyboard-inset,0px) - 8px)!important; border-radius:22px 22px 0 0!important; } html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .comment-list{ padding:6px 12px 15px!important; } html[data-pati-theme] #modal-root .pati-instagram-comments .modal-footer{ padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px))!important; } #main-content .pati-feed-card .pati-social-actions{ display:flex!important;align-items:center!important;justify-content:flex-start!important; flex-wrap:nowrap!important;gap:clamp(1px,1vw,7px)!important; width:100%!important;max-width:100%!important;min-width:0!important; box-sizing:border-box!important;padding:5px 6px!important; } #main-content .pati-feed-card .pati-social-actions>button{ flex:0 1 auto!important;min-width:0!important;min-height:42px!important; padding:5px 2px!important;gap:2px!important;margin:0!important; } #main-content .pati-feed-card .pati-social-actions>button svg{ width:clamp(17px,4.4vw,21px)!important;height:clamp(17px,4.4vw,21px)!important; } #main-content .pati-feed-card .pati-social-actions :is(span,.pati-engagement-metric){ font-size:clamp(10px,2.7vw,12px)!important;white-space:nowrap!important; } #main-content .pati-home-question-actions{ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important; } #main-content .pati-home-question-actions>button{ margin:0!important;min-width:0!important;justify-content:center!important; padding:8px 5px!important;white-space:normal!important; } #main-content .pati-home-question-actions>button[data-action="replies"]{ grid-column:1/-1!important; } #app-root .mobile-header{min-width:0;gap:5px;box-sizing:border-box} #app-root .mobile-header .brand{min-width:0;flex:0 1 auto} #app-root .mobile-header .brand-word, #app-root .mobile-header .brand-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #modal-root:has(#tools-form) .modal, #modal-root:has(#tools-form) #tools-form{min-width:0!important} #modal-root:has(#tools-form) .modal-content{overflow-x:hidden!important} #main-content .pati-dm-layout :is(.chat-people,.chat-window,.chat-history,.chat-compose,.chat-input-area){ min-width:0!important;max-width:100%!important;box-sizing:border-box!important; } #main-content .pati-dm-layout .bubble-chat{max-width:min(85vw,380px)!important;overflow-wrap:anywhere!important} } @media(max-width:360px){ html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row{gap:5px!important} html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row .pati-comment-me{display:none} html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-comment-editor-row .pati-comment-send{padding-inline:8px!important} #main-content .pati-feed-card .pati-social-actions>button{padding-inline:1px!important} } @media(prefers-reduced-motion:reduce){ #main-content :is(.pati-home-question,.pati-community-card) button:is([data-action="vote"],[data-action="vote-negative"]){transition:none!important} } /* Preserve visible mentions and follow controls in the light comment sheet. */ html[data-pati-theme] #modal-root :is(#comment-form,#reply-form) .pati-mention-link{ color:#2377ef!important;-webkit-text-fill-color:#2377ef!important; } html[data-pati-theme="light"] #modal-root #comment-form .pati-comment-follow{ color:#262b33!important;-webkit-text-fill-color:#262b33!important; border-color:#9ca3ae!important; } html[data-pati-theme="light"] #main-content [data-action="pati-repost"].active{ color:#252931!important;-webkit-text-fill-color:#252931!important; } html[data-pati-theme="light"] #main-content [data-action="pati-repost"].active .pati-repost-symbol{ color:#252931!important;stroke:#252931!important; } html[data-pati-theme="light"] #main-content [data-action="pati-repost"].active::after{ color:#fff!important;-webkit-text-fill-color:#fff!important; } html[data-pati-theme="dark"][data-pati-view="messages"] #main-content :is(.pati-dm-top,.pati-dm-title,.chat-person-info,.pati-dm-list-row) :is(strong,small){ color:var(--pati-repair-text)!important; } /* patiyiz-unified-social-design-20261031.css */ /* * Patiyiz • unified social screens • 31 October 2026 * Scope: home feed, Reels, public profile and direct messages. * Visual only: preserve actions, server permissions, media ratios, privacy, * story viewer and the existing mobile keyboard/viewport calculations. * Keep the previously requested white profile even in app dark mode. */ #app-root{ --pati-social-surface:#fff; --pati-social-page:#f7f8fa; --pati-social-ink:#17181b; --pati-social-secondary:#626773; --pati-social-line:#e9eaee; --pati-social-pressed:#f1f2f5; } html[data-pati-theme="dark"] #app-root{ --pati-social-surface:#1b1d22; --pati-social-page:#131418; --pati-social-ink:#f4f5f7; --pati-social-secondary:#b2b6bf; --pati-social-line:#353740; --pati-social-pressed:#292c33; } #app-root :is(button,a,input,textarea):focus-visible{ outline:2px solid #738ee6; outline-offset:2px; } /* HOME: one balanced avatar/story strip and an uninterrupted vertical feed. */ #main-content>.stories-section{ background:var(--pati-social-surface); border-color:var(--pati-social-line); } #main-content>.stories-section .stories-strip{ display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; } #main-content>.stories-section .story-person{ flex:0 0 auto;scroll-snap-align:start; } #main-content>.pati-feed-posts{min-width:0} #main-content .pati-feed-posts>.pati-feed-card{ overflow:hidden; background:var(--pati-social-surface); color:var(--pati-social-ink); border-color:var(--pati-social-line); } #main-content .pati-feed-card-header{ display:flex;align-items:center;justify-content:space-between; gap:10px;min-width:0; } #main-content .pati-feed-card-header .pati-post-more{ flex:0 0 auto;min-width:42px;min-height:42px; display:inline-flex;align-items:center;justify-content:center; } #main-content .pati-feed-card :is(.pati-photo,.pati-video-frame,.pati-feed-text-content){ max-width:100%;min-width:0; } #main-content .pati-feed-card :is(.pati-photo img,.pati-carousel-slide img){ display:block;max-width:100%; } #main-content .pati-feed-card .pati-social-actions{ display:flex!important;align-items:center!important; justify-content:flex-start!important;gap:4px!important; width:100%;min-width:0;box-sizing:border-box; } #main-content .pati-feed-card .pati-social-actions>button{ flex:0 1 auto!important;min-width:0!important; min-height:44px!important;gap:3px!important; border-radius:10px;box-sizing:border-box; } #main-content .pati-feed-card .pati-social-actions>button:active{ background:var(--pati-social-pressed); } #main-content .pati-feed-card .pati-post-details{ overflow-wrap:anywhere;min-width:0; } #main-content .pati-feed-card .pati-post-caption{ color:var(--pati-social-ink);line-height:1.53; } #main-content .pati-home-question{ max-width:100%;min-width:0;box-sizing:border-box; background:var(--pati-social-surface)!important; color:var(--pati-social-ink)!important; border:1px solid var(--pati-social-line)!important; box-shadow:none!important; } #main-content .pati-home-question h3{ font-size:16px;line-height:1.38;letter-spacing:-.015em; } #main-content .pati-home-question p{line-height:1.6} #main-content .pati-home-question-actions>button{ min-width:0;min-height:44px;border-color:var(--pati-social-line); } /* REELS: real 9:16 immersive display with a clear action rail and author line. * The original play/pause, seek, sound, like and comment handlers remain intact. */ #main-content .pati-reel-item{ position:relative;overflow:hidden;isolation:isolate;background:#070708; } #main-content .pati-reel-item .pati-reel-video{ display:block;width:100%;height:100%; object-fit:cover!important;object-position:center; background:#080808; } #main-content .pati-reel-item::after{ content:"";position:absolute;z-index:1;inset:44% 0 0; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.65) 100%); pointer-events:none; } #main-content .pati-reel-item .pati-reel-tap{z-index:1} #main-content .pati-reel-item .pati-reel-author, #main-content .pati-reel-item .pati-reel-caption, #main-content .pati-reel-item .pati-reel-rail, #main-content .pati-reel-item .pati-reel-progress{ z-index:3; } #main-content .pati-reel-item .pati-reel-author{ left:14px;right:76px;bottom:112px;min-width:0; display:flex;align-items:center;gap:8px; color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.5); } #main-content .pati-reel-author>span{ min-width:0;overflow:hidden;text-overflow:ellipsis; } #main-content .pati-reel-item .pati-reel-caption{ left:14px;right:76px;bottom:48px; max-width:none;max-height:60px;overflow-y:auto;overflow-wrap:anywhere; color:#fff!important;line-height:1.45; scrollbar-width:none; text-shadow:0 1px 4px rgba(0,0,0,.65); } #main-content .pati-reel-item .pati-reel-rail{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:flex-end!important; right:7px;bottom:36px;gap:3px!important; } #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool){ display:flex;align-items:center;justify-content:center; min-width:43px!important;min-height:44px!important; padding:5px 3px!important;gap:1px!important; color:#fff!important;text-shadow:0 1px 3px #000; } #main-content .pati-reel-rail :is(.pati-reel-action-label,.pati-reel-tool-label){ font-size:10px!important;line-height:1.15!important; } #main-content .pati-reel-item .pati-reel-progress{ bottom:8px;left:10px;right:10px;pointer-events:auto; } #modal-root .modal.pati-instagram-comments{ overscroll-behavior:contain;max-width:100%; } #modal-root .pati-instagram-comments .comment-list{ overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } /* PROFILE: spacious identity, consistent stats, legible biography and a true * square media grid. White is intentional, including in dark mode. */ #main-content .pati-ig-profile{ max-width:100%;min-width:0;box-sizing:border-box; background:#fff!important;color:#17191d!important; } #main-content .pati-ig-profile .pati-ig-summary{ display:flex;align-items:center;min-width:0; } #main-content .pati-ig-profile .pati-ig-avatar{ flex:0 0 auto;overflow:visible; } #main-content .pati-ig-profile .pati-ig-avatar :is(img,.avatar){ border-radius:50%;object-fit:cover;object-position:center; } #main-content .pati-ig-profile .pati-ig-info{ flex:1 1 auto;min-width:0; } #main-content .pati-ig-profile :is(.pati-ig-handle,.pati-ig-name,.pati-ig-bio,.pati-ig-profession){ overflow-wrap:anywhere;min-width:0; } #main-content .pati-ig-profile .pati-ig-stats{ display:flex;align-items:center;justify-content:space-around;gap:6px; } #main-content .pati-ig-profile .pati-ig-stats>:is(button,span){ flex:1 1 0;min-width:0;text-align:center; } #main-content .pati-ig-profile .pati-ig-stats small{ line-height:1.3;white-space:normal; } #main-content .pati-ig-profile .pati-ig-about{ background:#fff!important;color:#17191d!important;line-height:1.55; } #main-content .pati-ig-profile .pati-profile-links{ min-width:0;max-width:100%; } #main-content .pati-ig-profile .pati-ig-tabs{ display:flex;align-items:stretch; border-bottom:1px solid #e9eaee!important;background:#fff!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ flex:1 1 0;min-width:0;min-height:48px!important; display:flex;align-items:center;justify-content:center; } #main-content .pati-ig-profile .pati-ig-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;min-width:0;background:#fff!important; } #main-content .pati-ig-profile .pati-ig-grid>*{ min-width:0;aspect-ratio:1/1;overflow:hidden; } #main-content .pati-ig-profile .pati-ig-grid :is(img,video){ width:100%;height:100%;object-fit:cover; } /* DIRECT: one neutral chat surface with stable scrolling/composer. * No changes to keyboard calculation, message delivery, or hidden chat actions. */ #main-content .pati-dm-top{ min-width:0;box-sizing:border-box; } #main-content .pati-dm-layout{ min-width:0;max-width:100%; border-color:var(--pati-social-line); background:var(--pati-social-surface); } #main-content .pati-dm-layout .chat-people{ min-width:0;background:var(--pati-social-surface); } #main-content .pati-dm-layout .pati-dm-list-row{ min-width:0;border-color:var(--pati-social-line); } #main-content .pati-dm-layout .chat-person{ display:flex;align-items:center;min-width:0; } #main-content .pati-dm-layout .chat-person-info{ flex:1 1 auto;min-width:0;overflow:hidden; } #main-content .pati-dm-layout .chat-person-info :is(strong,small){ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-dm-layout .chat-person-meta{flex:0 0 auto} #main-content .pati-dm-layout .chat-window{ min-width:0;display:flex;flex-direction:column; } #main-content .pati-dm-layout .chat-window>header{ display:flex;align-items:center;flex:0 0 auto; min-width:0;border-bottom:1px solid var(--pati-social-line); } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar){ flex:1 1 auto;min-width:0;overflow:hidden; } #main-content .pati-dm-layout .chat-window>header>span:not(.chat-head-avatar) :is(strong,small){ max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #main-content .pati-dm-layout .chat-history{ flex:1 1 auto;min-height:0;overflow-y:auto!important; overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch; } #main-content .pati-dm-layout .bubble-chat{ max-width:min(82%,380px)!important;box-sizing:border-box; overflow-wrap:anywhere;word-break:normal; } #main-content .pati-dm-layout .bubble-chat .pati-dm-image-open{ display:block;max-width:100%;overflow:hidden; } #main-content .pati-dm-layout .bubble-chat :is(img,.pati-dm-image){ max-width:100%;height:auto; } #main-content .pati-dm-layout .chat-form{ display:flex;align-items:center;flex:0 0 auto; min-width:0;box-sizing:border-box; } #main-content .pati-dm-layout .chat-form input[name="body"]{ flex:1 1 auto;min-width:0;font-size:16px!important; } @media(max-width:740px){ /* Header: exactly one left-side share affordance, centered logo, right-side account actions. Keep the built-in page back control. */ #app-root:not(.hidden)>.mobile-header{ position:relative;display:flex;align-items:center; justify-content:space-between; min-width:0;padding-inline:10px;gap:6px; } #app-root:not(.hidden)>.mobile-header>.brand{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); display:flex;justify-content:center;align-items:center; flex:0 0 auto!important;width:auto!important; max-width:calc(100% - 174px)!important; margin:0!important;gap:5px;z-index:1; } #app-root:not(.hidden)>.mobile-header>.brand .brand-word{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:clamp(17px,4.7vw,22px)!important; } #app-root:not(.hidden)>.mobile-header>.brand .brand-caption{display:none!important} #app-root:not(.hidden)>.mobile-header>#pati-header-share{ flex:0 0 40px;min-height:40px;min-width:40px; display:flex;align-items:center;justify-content:center; border-radius:12px;z-index:2; } #app-root:not(.hidden)>.mobile-header>#pati-global-back:not([hidden]){ position:relative;z-index:3;flex:0 0 auto; } #app-root:not(.hidden)>.mobile-header>.pati-header-actions{ margin-left:auto;flex:0 0 auto;z-index:2; } #main-content>.stories-section{ padding:8px 10px 8px!important; margin:0!important;border-bottom:1px solid var(--pati-social-line)!important; } #main-content>.stories-section .stories-strip{ gap:12px!important;padding:4px 0 6px!important; scroll-padding-inline:7px; } #main-content>.stories-section .story-person{ min-width:72px;max-width:84px; } #main-content .pati-feed-posts{ width:100%;padding:0!important;margin:0!important; } #main-content .pati-feed-posts>.pati-feed-card{ border-radius:0!important;margin:0 0 7px!important; border-inline:0!important; border-bottom:1px solid var(--pati-social-line)!important; } #main-content .pati-feed-card-header{ padding:8px 12px!important;min-height:56px!important; } #main-content .pati-feed-card .pati-social-actions{ padding:4px 8px!important;gap:0!important;min-height:50px; } #main-content .pati-feed-card .pati-social-actions>button{ padding:6px 3px!important; } #main-content .pati-feed-card .pati-post-details{ padding:0 12px 13px!important; } #main-content .pati-home-question{ border-radius:0!important;border-inline:0!important; margin:0 0 7px!important;padding:12px!important; } #main-content .pati-home-question-actions{ gap:7px!important; } #main-content .pati-reel-item .pati-reel-author{ bottom:115px;left:12px;right:68px; } #main-content .pati-reel-item .pati-reel-caption{ bottom:45px;left:12px;right:68px;max-height:58px; } #main-content .pati-reel-item .pati-reel-rail{ right:max(5px,env(safe-area-inset-right))!important; bottom:36px;gap:1px!important; } #main-content .pati-ig-profile .pati-ig-summary{ gap:12px;padding:14px 12px 8px!important; } #main-content .pati-ig-profile .pati-ig-about, #main-content .pati-ig-profile .pati-profile-links{ padding-inline:12px!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ min-height:50px!important; } #main-content .pati-dm-layout .chat-people{padding:5px 4px!important} #main-content .pati-dm-layout .pati-dm-list-row{ width:100%;padding:8px 6px!important; } #main-content .pati-dm-layout .chat-person{min-height:68px!important} #main-content .pati-dm-layout .chat-window>header{ min-height:59px;gap:7px;padding-inline:10px!important; } #main-content .pati-dm-layout .chat-history{ padding:12px 10px!important; } #main-content .pati-dm-layout .chat-form{ gap:5px!important; padding:8px 9px max(10px,env(safe-area-inset-bottom))!important; } /* Let existing keyboard and viewport styles continue controlling height. */ #main-content .pati-dm-layout.mobile-chat-open .chat-window{ min-height:0!important;max-height:100%!important; } #modal-root:has(.pati-instagram-comments) .modal-backdrop{ overscroll-behavior:contain; } } @media(max-width:360px){ #app-root:not(.hidden)>.mobile-header>.brand{ max-width:calc(100% - 158px)!important; } #app-root:not(.hidden)>.mobile-header>.brand .brand-icon{ width:27px!important;height:27px!important; } #app-root:not(.hidden)>.mobile-header>.brand .brand-word{ font-size:17px!important; } #main-content .pati-feed-card .pati-social-actions>button{ padding-inline:1px!important; } #main-content .pati-ig-profile .pati-ig-summary{gap:8px} } @media(prefers-reduced-motion:reduce){ #main-content>.stories-section .stories-strip{scroll-behavior:auto} } /* patiyiz-fullscreen-reels-profile-20261031.css */ /* Patiyiz – fullscreen secondary screens, professional Reels and profile safety. * Keep existing event handlers, privacy policies, and camera/media APIs untouched. */ /* An independent back control remains visible when the shared brand header is absent. */ #main-content>.pati-page-back{ display:inline-flex!important;align-items:center;justify-content:center;gap:7px; width:auto;min-width:64px;min-height:44px;padding:7px 15px; background:var(--paper,#fff);color:var(--ink,#1a1c20); border:1px solid var(--border,#d9dce2);border-radius:13px; font-size:14px;font-weight:800;line-height:1.3; box-sizing:border-box;cursor:pointer; } #main-content>.pati-page-back:focus-visible{outline:2px solid #6688e8;outline-offset:3px} #main-content>.pati-page-back:active{opacity:.85} /* Overflow menu, only for other people's profiles. */ #main-content .pati-ig-profile{position:relative!important;overflow:visible!important} #main-content .pati-profile-more-wrap{ position:absolute;top:12px;right:12px;z-index:70;max-width:calc(100% - 24px); } #main-content .pati-profile-more-wrap>summary{ width:44px;height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center; list-style:none;border:1px solid #e1e4e8;border-radius:13px; background:#fff;color:#17191d;box-shadow:0 3px 12px #11131c12;cursor:pointer; -webkit-tap-highlight-color:transparent; } #main-content .pati-profile-more-wrap>summary::-webkit-details-marker{display:none} #main-content .pati-profile-more-wrap>summary>span{ font-size:28px;font-weight:800;letter-spacing:1px;line-height:1;transform:translateY(-4px); } #main-content .pati-profile-more-wrap[open]>summary, #main-content .pati-profile-more-wrap>summary:hover{background:#f1f2f5} #main-content .pati-profile-more-wrap>summary:focus-visible{ outline:2px solid #6688e8;outline-offset:2px; } #main-content .pati-profile-more-menu{ position:absolute;top:calc(100% + 7px);right:0;z-index:75; width:min(244px,calc(100vw - 24px));padding:8px; box-sizing:border-box;display:flex;flex-direction:column;gap:3px; border:1px solid #e2e4e9;border-radius:16px; background:#fff;color:#17191d;box-shadow:0 15px 40px #080b1129; } #main-content .pati-profile-more-menu button{ display:flex;align-items:center;width:100%;min-height:46px; margin:0!important;padding:12px 13px!important;box-sizing:border-box; border:0!important;border-radius:10px!important;background:transparent!important; color:#24262b!important;text-align:left;font-size:14px;font-weight:700; } #main-content .pati-profile-more-menu button:hover, #main-content .pati-profile-more-menu button:focus-visible{ background:#f1f2f5!important; } #main-content .pati-ig-profile .pati-ig-actions{min-width:0} /* Reels: subtle shadow gradient behind captions, distinct thumb-sized controls. * Button accessibility names already come from app.js. */ #main-content .pati-reel-item .pati-reel-rail{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:flex-end!important; gap:4px!important;right:max(8px,env(safe-area-inset-right))!important; bottom:40px!important;z-index:5!important; } #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool){ box-sizing:border-box!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; width:49px!important;min-width:49px!important;min-height:45px!important; padding:7px 3px!important;margin:0!important;gap:3px!important; border-radius:15px!important;border:1px solid #ffffff32!important; background:#15182085!important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); color:#fff!important;box-shadow:0 3px 14px #00000024; transition:background .15s ease,transform .15s ease; } #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool) svg{ width:23px!important;height:23px!important;flex:0 0 auto; stroke:#fff!important;stroke-width:2!important; } #main-content .pati-reel-rail .pati-reel-action-label{display:none!important} #main-content .pati-reel-rail :is(.pati-reel-count,.pati-reel-tool-label,.pati-engagement-metric){ font-size:10px!important;line-height:1.15!important;color:#fff!important; font-weight:800!important;text-shadow:0 1px 4px #0008; } #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool):active{ transform:scale(.96);background:#29313bbf!important; } #main-content .pati-reel-rail .pati-reel-action.active{ border-color:#ffffff88!important;background:#353942b5!important; } #main-content .pati-reel-item .pati-reel-author, #main-content .pati-reel-item .pati-reel-caption{color:#fff!important;text-shadow:0 1px 5px #000a} #main-content .pati-reel-item .pati-reel-caption{right:72px!important} /* The brand/menu header belongs exclusively to the main feed. * On desktop, inner screens occupy the full horizontal layout too. */ html[data-pati-screen="inner"] #app-root:not(.hidden)>.mobile-header{ display:none!important; } @media(min-width:741px){ html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell{ display:block!important;grid-template-columns:minmax(0,1fr)!important; width:100%!important;max-width:none!important;min-height:100dvh!important; margin:0!important;padding:0!important;gap:0!important; } html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell>.sidebar, html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell>.right-rail{ display:none!important; } html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell>#main-content{ width:100%!important;max-width:none!important; min-width:0!important;margin:0!important;padding:0!important; } html[data-pati-screen="inner"] #main-content>.pati-page-back:not([hidden]){ margin:12px!important; } } @media(max-width:740px){ html[data-pati-screen="inner"] #app-root:not(.hidden)>.mobile-header{ display:none!important; } html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell{ padding-top:max(0px,env(safe-area-inset-top))!important; } html[data-pati-screen="inner"] #app-root:not(.hidden)>.app-shell>#main-content{ padding-top:0!important;margin-top:0!important; } html[data-pati-screen="inner"] #main-content>.pati-page-back:not([hidden]){ position:relative;z-index:30;margin:7px 10px!important; } html[data-pati-screen="inner"] #main-content .pati-ig-profile .pati-profile-more-wrap{ top:12px;right:12px; } html[data-pati-screen="inner"] #main-content .pati-ig-profile .pati-profile-back{ padding-right:55px; } /* Reels are true fullscreen; keep explicit back navigation instead of bottom tabs. */ html[data-pati-view="reels"] #app-root:not(.hidden)>.mobile-bottom, html[data-pati-view="reels"] #app-root:not(.hidden)>.mobile-fab{ display:none!important; } html[data-pati-view="reels"] #app-root:not(.hidden)>.app-shell{ padding:0!important;min-height:100dvh!important; } html[data-pati-view="reels"] #main-content{ position:relative;width:100%!important;max-width:100%!important; padding:0!important;margin:0!important; } html[data-pati-view="reels"] #main-content>.pati-reels-head{display:none!important} html[data-pati-view="reels"] #main-content>.pati-page-back:not([hidden]){ display:inline-flex!important;position:fixed!important; top:max(12px,env(safe-area-inset-top))!important; left:12px!important;margin:0!important; z-index:190!important;min-width:78px;min-height:44px; padding:8px 14px!important; background:#11151bba!important;border:1px solid #ffffff66!important; color:#fff!important;box-shadow:0 4px 18px #0008; border-radius:14px!important;backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } html[data-pati-view="reels"] #main-content .pati-reels-viewport, html[data-pati-view="reels"] #main-content .pati-reel-item{ display:block!important;width:100%!important;max-width:100%!important; height:100dvh!important;max-height:none!important; min-height:0!important;margin:0!important; } html[data-pati-view="reels"] #main-content .pati-reel-video{height:100%!important} html[data-pati-view="reels"] #main-content .pati-reel-author{ bottom:120px!important;left:12px!important;right:69px!important; } html[data-pati-view="reels"] #main-content .pati-reel-caption{ bottom:48px!important;left:12px!important;right:69px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail{ bottom:max(45px,env(safe-area-inset-bottom))!important; right:max(8px,env(safe-area-inset-right))!important; } html[data-pati-view="reels"] #main-content .pati-reel-progress{ bottom:max(8px,env(safe-area-inset-bottom))!important; } #main-content .pati-profile-more-menu{right:0} } @media(max-width:360px){ #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool){ width:45px!important;min-width:45px!important;min-height:42px!important; padding:5px 2px!important; } #main-content .pati-profile-more-menu{width:min(225px,calc(100vw - 20px))} } @media(max-height:600px){ #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool){ min-height:39px!important;padding:4px 2px!important;gap:1px!important; } } @media(prefers-reduced-motion:reduce){ #main-content .pati-reel-rail :is(.pati-reel-action,.pati-reel-tool){ transition:none!important; } } /* The desktop Reels viewer follows the same immersive layout. */ @media(min-width:741px){ html[data-pati-view="reels"] #app-root:not(.hidden)>.app-shell{padding:0!important} html[data-pati-view="reels"] #main-content>.pati-reels-head{display:none!important} html[data-pati-view="reels"] #main-content>.pati-page-back:not([hidden]){ position:fixed!important;z-index:200!important; top:16px;left:16px;margin:0!important; background:#11151bba!important;color:#fff!important; border:1px solid #ffffff66!important; box-shadow:0 5px 18px #0008;backdrop-filter:blur(12px); } html[data-pati-view="reels"] #main-content .pati-reels-viewport, html[data-pati-view="reels"] #main-content .pati-reel-item{ width:100%!important;max-width:100%!important;height:100dvh!important;min-height:0!important;max-height:none!important; } } /* patiyiz-colorful-camera-chooser-20261031.css */ /* Patiyiz • Instagram-style minimalist native media chooser. * All camera, gallery, preview, cropping and publishing events stay unchanged. */ #patiyiz-system-media{ color-scheme:light!important; background:#f7f7f8!important;color:#17191d!important; padding:max(14px,env(safe-area-inset-top,0px)) 15px max(16px,env(safe-area-inset-bottom,0px))!important; } #patiyiz-system-media .pati-system-panel{ display:flex!important;flex-direction:column!important; width:100%!important;max-width:520px!important; min-height:100%!important;gap:12px!important;margin:0 auto!important; } #patiyiz-system-media .pati-system-head{ min-height:56px!important;border-bottom:1px solid #e2e4e8!important; padding:0 0 8px!important;flex:0 0 auto!important; position:relative!important;top:auto!important; background:#f7f7f8!important;color:#17191d!important;box-shadow:none!important; } #patiyiz-system-media .pati-system-head strong{ color:#191b20!important;font-size:18px!important;font-weight:800!important;letter-spacing:-.03em!important; } #patiyiz-system-media .pati-system-head button{ width:44px!important;height:44px!important;display:grid!important;place-items:center!important; border:0!important;border-radius:50%!important; color:#16181c!important;background:#e9eaed!important;font-size:28px!important;line-height:1!important; } #patiyiz-system-media #pati-system-chooser:not([hidden]){ display:flex!important;flex:1 1 auto!important; width:100%!important;max-width:510px!important;min-height:0!important; flex-direction:column!important;align-items:center!important;justify-content:center!important; margin:0 auto!important;padding:18px 0!important; } #patiyiz-system-media .pati-system-intro{ width:100%!important;text-align:center!important;padding:0 5px 22px!important; } #patiyiz-system-media .pati-system-intro-symbol{display:none!important} #patiyiz-system-media .pati-system-intro h2{ margin:0 0 6px!important;font-size:23px!important;line-height:1.18!important; font-weight:820!important;letter-spacing:-.035em!important;color:#17191d!important; } #patiyiz-system-media .pati-system-intro p{ margin:0!important;color:#737781!important;line-height:1.4!important;font-size:13px!important; } #patiyiz-system-media .pati-system-options{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; align-items:stretch!important;gap:9px!important; width:100%!important;max-width:510px!important;margin:0 auto!important; } #patiyiz-system-media .pati-system-options button[data-system]{ min-width:0!important;min-height:120px!important;width:100%!important; display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important; gap:9px!important;padding:13px 6px!important; border:1px solid #e5e6ea!important;border-radius:17px!important; background:#fff!important;background-image:none!important; color:#191b20!important;box-shadow:none!important; text-align:center!important;transform:none!important; transition:background-color .16s ease,border-color .16s ease!important; } #patiyiz-system-media .pati-system-options button[data-system]::after{display:none!important;content:none!important} #patiyiz-system-media .pati-system-options button[data-system]:hover{ background:#f1f2f4!important;border-color:#cfd2d8!important; } #patiyiz-system-media .pati-system-options button[data-system]:active{ background:#e8eaee!important;transform:none!important; } #patiyiz-system-media .pati-system-options .pati-system-option-icon, #patiyiz-system-media .pati-system-options .pati-system-option-photo, #patiyiz-system-media .pati-system-options .pati-system-option-video, #patiyiz-system-media .pati-system-options .pati-system-option-gallery{ display:grid!important;place-items:center!important; flex:0 0 43px!important;width:43px!important;height:43px!important; border:0!important;border-radius:12px!important; background:#f0f1f4!important;background-image:none!important; color:#181a20!important;box-shadow:none!important;transform:none!important; } #patiyiz-system-media .pati-system-options .pati-system-option-icon svg{ width:24px!important;height:24px!important; stroke:#181a20!important;color:#181a20!important;fill:none!important; stroke-width:1.8!important; } #patiyiz-system-media .pati-system-options button strong{ display:block!important;color:#1e2025!important; font-size:13px!important;font-weight:760!important; letter-spacing:-.015em!important;line-height:1.25!important; margin:0!important; } #patiyiz-system-media .pati-system-options button small{display:none!important} #patiyiz-system-media .pati-system-modes{ width:100%!important;max-width:510px!important; display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important; margin:0 auto!important;gap:9px!important;padding:15px 0 8px!important; border-top:1px solid #e2e3e7!important; } #patiyiz-system-media .pati-system-modes button{ min-height:44px!important;padding:9px 14px!important; border-radius:999px!important;color:#6b6e76!important;background:transparent!important; font-size:12px!important;font-weight:800!important; } #patiyiz-system-media .pati-system-modes button.active{ color:#fff!important;background:#17191e!important; } #patiyiz-system-media #pati-system-preview{ flex:1 0 auto!important;width:100%!important;color:#191b20!important; } #patiyiz-system-media .pati-system-preview-media, #patiyiz-system-media .pati-system-preview-media video{ background:#eef0f3!important;border-color:#e2e3e8!important; } #patiyiz-system-media .pati-system-summary{color:#747780!important} #patiyiz-system-media .pati-system-caption-label{color:#1a1c21!important} #patiyiz-system-media #pati-system-caption, #patiyiz-system-media #pati-system-audience{ background:#fff!important;border:1px solid #d7d9df!important;color:#181a20!important; } #patiyiz-system-media #pati-system-caption::placeholder{color:#979ba5!important} #patiyiz-system-media .pati-system-mirror-option{ color:#191b20!important;background:#fff!important;border:1px solid #e2e3e8!important; } #patiyiz-system-media .pati-system-mirror-option small{color:#70737d!important} #patiyiz-system-media .pati-system-mirror-option input{accent-color:#1a1b20!important} #patiyiz-system-media .pati-system-publish-actions button{ border:1px solid #e0e1e6!important;background:#fff!important;color:#191b20!important; } #patiyiz-system-media #pati-system-publish{ border:1px solid #191b20!important;background:#191b20!important;color:#fff!important; } #patiyiz-system-media .pati-system-error{ color:#9a2833!important;background:#fff0f1!important;border:1px solid #f1b8be!important; } #patiyiz-system-media .pati-system-edit-panel, #patiyiz-system-media .pati-system-photo-review{color:#191b20!important} #patiyiz-system-media :is(button,textarea,select):focus-visible{ outline:2px solid #17191d!important;outline-offset:3px!important; } @media(max-width:420px){ #patiyiz-system-media .pati-system-panel{gap:9px!important} #patiyiz-system-media .pati-system-options{gap:8px!important} #patiyiz-system-media .pati-system-options button[data-system]{ min-height:108px!important;padding:10px 4px!important;gap:8px!important; } #patiyiz-system-media .pati-system-options .pati-system-option-icon{ width:42px!important;height:42px!important;flex-basis:42px!important; } #patiyiz-system-media .pati-system-options button strong{font-size:12.5px!important} } @media(max-height:600px){ #patiyiz-system-media #pati-system-chooser:not([hidden]){justify-content:flex-start!important} #patiyiz-system-media .pati-system-intro{padding-bottom:11px!important} #patiyiz-system-media .pati-system-options button[data-system]{min-height:88px!important} } @media(prefers-reduced-motion:reduce){ #patiyiz-system-media .pati-system-options button[data-system]{transition:none!important} } /* Suppress any legacy decoration on creator icons. */ #patiyiz-system-media .pati-system-options .pati-system-option-icon::before, #patiyiz-system-media .pati-system-options .pati-system-option-icon::after{content:none!important;display:none!important} #patiyiz-system-media .pati-system-options .pati-system-option-icon svg{filter:none!important} /* patiyiz-share-profile-story-polish-20261031.css */ /* Patiyiz • focused final polish • 31 October 2026. Keep interactive handlers, themes, private media and full-screen chat intact. */ /* All in-app back controls share a shape and touch target. Reels and the story viewer use the same silhouette with dark-surface colors. */ #main-content>.pati-page-back, #main-content .pati-streaks-back, #main-content .pati-dm-inbox-back, #main-content .mobile-chat-back, #main-content .pati-profile-back button, #story-overlay .pati-story-activity-top button[data-action="story-viewers-close"]{ display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:7px!important;box-sizing:border-box!important; min-width:44px!important;min-height:44px!important; padding:8px 12px!important;border-radius:13px!important; border:1px solid #d9dce2!important;background:#fff!important; color:#1c2026!important;font-size:14px!important;font-weight:780!important; line-height:1.25!important;text-decoration:none!important; box-shadow:0 2px 10px #10152512!important;cursor:pointer; } #main-content>.pati-page-back:focus-visible, #main-content .pati-dm-inbox-back:focus-visible, #main-content .mobile-chat-back:focus-visible, #story-overlay .pati-story-activity-top button[data-action="story-viewers-close"]:focus-visible{ outline:2px solid #6485ee!important;outline-offset:2px; } html[data-pati-theme="dark"] #main-content>.pati-page-back, html[data-pati-theme="dark"] #main-content .pati-dm-inbox-back, html[data-pati-theme="dark"] #main-content .mobile-chat-back{ background:#22252b!important;color:#fff!important;border-color:#42464f!important; } html[data-pati-view="reels"] #main-content>.pati-page-back{ background:#11151bcb!important;color:#fff!important; border-color:#ffffff72!important;backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 5px 18px #0008!important; } #story-overlay .pati-story-activity-top button[data-action="story-viewers-close"]{ font-size:22px!important;padding:7px!important; } html[data-pati-view="profile"] #main-content>.pati-page-back, #main-content .pati-ig-profile>.pati-profile-back{ display:none!important; } /* One-line own profile actions; coin balance comes from patiCoinState, and opening it reuses the existing PatiCoin rewards handler. */ #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance){ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;gap:8px!important;min-width:0; } #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance)>button{ margin:0!important;min-width:0!important;min-height:55px!important; border-radius:13px!important; } #main-content .pati-ig-profile .pati-profile-coin-balance{ display:flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;padding:7px 9px!important;text-align:left; border:1px solid #e3e5e9!important;border-radius:13px!important; background:#fff!important;color:#1b1e23!important; box-shadow:none!important;cursor:pointer; } #main-content .pati-profile-coin-balance img{ width:28px;height:28px;min-width:28px;object-fit:contain;flex:0 0 28px; } #main-content .pati-profile-coin-balance>span{ display:flex;flex-direction:column;min-width:0;align-items:flex-start;gap:3px; } #main-content .pati-profile-coin-balance small{ color:#606672!important;font-size:11px!important;font-weight:700!important; white-space:nowrap; } #main-content .pati-profile-coin-balance strong{ color:#181b21!important;font-size:17px!important;font-variant-numeric:tabular-nums; font-weight:850!important;line-height:1.1; } #main-content .pati-profile-coin-balance:focus-visible{ outline:2px solid #7192f0;outline-offset:2px; } /* Share is a true full-screen dialog. A visible top-right close button remains reachable even with mobile safe areas and tall content. */ #modal-root:has(#share-post-form) .modal-backdrop{ position:fixed!important;inset:0!important;z-index:20000!important; width:100vw!important;height:100dvh!important;max-height:none!important; display:flex!important;align-items:stretch!important;justify-content:center!important; padding:0!important;margin:0!important;overflow:hidden!important; background:#fff!important; } #modal-root:has(#share-post-form) .modal{ display:flex!important;flex-direction:column!important; width:100vw!important;max-width:none!important;min-width:0!important; height:100dvh!important;min-height:0!important;max-height:none!important; padding:0!important;margin:0!important;border-radius:0!important; overflow:hidden!important;box-sizing:border-box!important; background:#fff!important;color:#17191d!important; box-shadow:none!important; } #modal-root:has(#share-post-form) .modal-header{ display:flex!important;align-items:center!important;justify-content:space-between!important; flex:0 0 auto!important;min-height:62px!important; padding:calc(11px + env(safe-area-inset-top,0px)) 16px 11px!important; background:#fff!important;color:#17191d!important; border-bottom:1px solid #edeef1!important; } #modal-root:has(#share-post-form) .modal-header h2{ margin:0!important;font-size:19px!important;font-weight:800!important;color:#16191e!important; } #modal-root:has(#share-post-form) .modal-header .close-modal{ display:grid!important;place-items:center!important; width:44px!important;height:44px!important;min-height:44px!important; padding:0!important;margin:0!important;border-radius:12px!important; color:#17191d!important;background:#f3f4f6!important; border:1px solid #e7e8eb!important;font-size:27px!important; } #modal-root:has(#share-post-form) #share-post-form{ flex:1 1 auto!important;min-height:0!important; height:auto!important;display:flex!important;flex-direction:column!important; overflow:hidden!important; } #modal-root:has(#share-post-form) #share-post-form>.modal-content{ flex:1 1 auto!important;min-height:0!important; overflow-y:auto!important;overflow-x:hidden!important; padding:15px 16px max(18px,env(safe-area-inset-bottom,0px))!important; box-sizing:border-box!important;-webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #modal-root:has(#share-post-form) #share-post-form>.modal-footer{ display:none!important; } #share-post-form .pati-share-preview{ margin:0 0 14px!important; } #share-post-form .pati-share-quick{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;margin:0 0 17px!important; } #share-post-form .pati-share-quick>button{ display:flex!important;align-items:center!important;justify-content:center!important; gap:8px!important;min-height:48px!important;min-width:0!important; padding:10px 9px!important;white-space:normal!important; border:1px solid #e3e5e9!important;border-radius:13px!important; background:#f7f8fa!important;color:#171a20!important; font-size:12px!important;line-height:1.3!important;font-weight:780!important; } #share-post-form .pati-share-quick>button.pati-share-to-story{ grid-column:1/-1!important; background:#f2f4fa!important;border-color:#dfe3ef!important; } #share-post-form .pati-share-quick .icon{ width:18px!important;height:18px!important;flex:0 0 18px; } #share-post-form .pati-share-search{ margin-bottom:12px!important; } #share-post-form .pati-share-recipient-title{ margin-top:4px!important; } #share-post-form .pati-share-people-grid{ align-content:start!important;min-height:0!important; padding-bottom:20px!important; } @media(min-width:741px){ #modal-root:has(#share-post-form) #share-post-form>.modal-content{ width:100%!important;max-width:780px!important;margin:0 auto!important; } } @media(max-width:380px){ #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance){gap:6px!important} #main-content .pati-profile-coin-balance img{width:24px;height:24px;min-width:24px;flex-basis:24px} #main-content .pati-profile-coin-balance small{font-size:10px!important} #main-content .pati-profile-coin-balance strong{font-size:15px!important} #share-post-form .pati-share-quick>button{font-size:11px!important;padding:9px 6px!important} } /* Modern photo crop affordance instead of the old scissors glyph. */ #patiyiz-system-media .pati-system-crop-entry{ display:flex!important;align-items:center!important;gap:11px!important; width:100%!important;min-height:56px!important;padding:10px 12px!important; border:1px solid #484c56!important;border-radius:15px!important; background:#22242b!important;color:#fff!important; font-size:14px!important;font-weight:750!important;text-align:left; box-shadow:none!important; } #patiyiz-system-media .pati-system-crop-entry[hidden]{display:none!important} #patiyiz-system-media .pati-system-crop-icon{ flex:0 0 40px;display:grid;place-items:center; width:40px;height:40px;border-radius:11px; border:1px solid #6f7583;background:#373b45;color:#fff; } #patiyiz-system-media .pati-system-crop-icon svg{ width:22px;height:22px;stroke:#fff; } #patiyiz-system-media .pati-system-crop-copy{flex:1 1 auto;min-width:0} #patiyiz-system-media .pati-system-crop-chevron{ color:#c9ccd5;font-size:24px;line-height:1;flex:0 0 auto; } #post-form .pati-inline-crop-toggle{ min-height:44px;display:inline-flex;align-items:center; border-radius:12px;padding:10px 13px; } #post-form .pati-inline-crop-toggle::before{ content:"";display:inline-block;width:18px;height:18px;margin-right:9px; background-color:currentColor; -webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0); clip-path:polygon(0 0,14% 0,14% 72%,80% 72%,80% 100%,68% 100%,68% 86%,0 86%); } /* Publish confirmation clearly says 'Yayınlandı'; sound is attached to the success branch in app.js and never to a failed publication. */ #toasts .pati-toast:not(.error){border-radius:13px} /* patiyiz-profile-menu-coin-layout-20261031.css */ /* Patiyiz profile header & PatiCoin – compact, predictable on every width. * Own profile: a real feature menu trigger. Other profiles keep their 3-dot safety menu. */ #main-content .pati-ig-profile>.pati-profile-topbar{ position:relative;z-index:10;display:flex!important;align-items:center!important; justify-content:space-between!important;gap:12px; min-height:58px;width:100%;box-sizing:border-box; padding:7px clamp(12px,3.8vw,20px)!important; background:#fff!important;color:#1b1d22!important; border-bottom:1px solid #eceef1!important; } #main-content .pati-profile-topbar-title{ font-size:16px!important;font-weight:800!important;line-height:1.25!important; letter-spacing:-.015em;color:#191b20!important; } #main-content .pati-profile-menu-trigger{ box-sizing:border-box!important;flex:0 0 44px; display:grid!important;place-items:center!important; width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; padding:0!important;margin:0!important; border:1px solid #e4e6eb!important;border-radius:13px!important; background:#f6f7f9!important;color:#24262c!important; box-shadow:none!important;cursor:pointer; -webkit-tap-highlight-color:transparent; } #main-content .pati-profile-menu-trigger svg{ display:block;width:24px;height:24px; stroke:#24262c!important;fill:none!important; } #main-content .pati-profile-menu-trigger:focus-visible{ outline:2px solid #6688e8!important;outline-offset:2px!important; } #main-content .pati-profile-menu-trigger:active{ transform:scale(.97); background:#e9ebef!important; } /* The existing personal profile is an always-white surface in either theme. */ #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance){ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important; align-items:stretch!important;justify-content:stretch!important; gap:9px!important;box-sizing:border-box!important; width:100%!important;min-width:0!important; padding:8px clamp(12px,3.8vw,20px) 14px!important; margin:0!important; } #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance)>button{ box-sizing:border-box!important; width:100%!important;min-width:0!important;max-width:100%!important; height:64px!important;min-height:64px!important;max-height:64px!important; margin:0!important;border-radius:14px!important; font-family:inherit!important; } #main-content .pati-ig-profile .pati-ig-actions>button[data-action="edit-profile"]{ display:flex!important;align-items:center!important;justify-content:center!important; padding:10px 9px!important;overflow-wrap:break-word!important; border:1px solid #22252a!important; background:#22252a!important;color:#fff!important; font-size:13px!important;font-weight:800!important; box-shadow:none!important;text-align:center; } #main-content .pati-ig-profile .pati-ig-actions>button.pati-profile-coin-balance{ display:flex!important;flex-direction:row!important;align-items:center!important; justify-content:flex-start!important;gap:9px!important; padding:8px 10px!important; border:1px solid #e0e3e8!important; border-radius:14px!important; background:#fff!important;color:#1c1e24!important; box-shadow:0 1px 6px #1b1e2c0a!important; text-align:left!important; overflow:hidden!important; } #main-content .pati-profile-coin-icon{ display:grid!important;place-items:center!important; width:35px!important;height:35px!important; flex:0 0 35px!important; box-sizing:border-box!important; border-radius:11px!important; background:#f3f4f6!important; } #main-content .pati-profile-coin-icon img{ display:block!important; width:26px!important;height:26px!important; min-width:0!important;max-width:26px!important;max-height:26px!important; object-fit:contain!important;flex:0 0 auto!important; } #main-content .pati-profile-coin-copy{ display:flex!important;flex-direction:column!important; justify-content:center!important;align-items:flex-start!important; flex:1 1 auto!important;min-width:0!important;gap:4px!important; margin:0!important;padding:0!important; } #main-content .pati-profile-coin-copy small{ display:block!important;width:100%!important; color:#666b74!important;font-weight:700!important; font-size:11px!important;line-height:1.2!important; white-space:normal!important;overflow-wrap:normal!important; letter-spacing:0!important; } #main-content .pati-profile-coin-copy strong{ display:block!important;max-width:100%!important; font-size:19px!important;line-height:1.05!important; font-weight:850!important;color:#15171a!important; font-variant-numeric:tabular-nums!important; overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; } #main-content .pati-ig-profile .pati-ig-actions>button.pati-profile-coin-balance:hover{ background:#f9fafb!important;border-color:#cdd1d8!important; } #main-content .pati-ig-profile .pati-ig-actions>button.pati-profile-coin-balance:focus-visible, #main-content .pati-ig-profile .pati-ig-actions>button[data-action="edit-profile"]:focus-visible{ outline:2px solid #7795ed!important;outline-offset:3px!important; } @media(max-width:390px){ #main-content .pati-ig-profile .pati-ig-actions:has(.pati-profile-coin-balance){ grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important; gap:7px!important; } #main-content .pati-ig-profile .pati-ig-actions>button.pati-profile-coin-balance{ padding-inline:8px!important;gap:7px!important; } #main-content .pati-profile-coin-icon{ width:29px!important;height:29px!important;flex-basis:29px!important; } #main-content .pati-profile-coin-icon img{ width:23px!important;height:23px!important;max-width:23px!important;max-height:23px!important; } #main-content .pati-profile-coin-copy small{font-size:10px!important} #main-content .pati-profile-coin-copy strong{font-size:16px!important} #main-content .pati-ig-profile .pati-ig-actions>button[data-action="edit-profile"]{font-size:12px!important} } @media(max-width:320px){ #main-content .pati-profile-coin-icon{width:25px!important;height:25px!important;flex-basis:25px!important} #main-content .pati-profile-coin-icon img{width:21px!important;height:21px!important} #main-content .pati-profile-coin-copy small{font-size:9px!important} } @media(prefers-reduced-motion:reduce){ #main-content .pati-profile-menu-trigger{transition:none!important} } /* patiyiz-reels-controls-media-icons-20261031.css */ /* Patiyiz – Reels visibility + fresh capture choice icons. Overlay-only visuals; video playback, gestures, and publication controls unchanged. */ /* Right-hand Reels controls: true contrast against any light or dark video, clear silhouettes, consistent spacing, and larger touch surfaces. */ #main-content .pati-reel-item .pati-reel-rail{ --pati-reel-ctl-bg:rgba(9,13,23,.84); --pati-reel-ctl-outline:rgba(255,255,255,.52); --pati-reel-ctl-shadow:0 4px 17px rgba(0,0,0,.4); display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:flex-end!important; width:57px!important;gap:6px!important; right:max(9px,env(safe-area-inset-right,0px))!important; bottom:max(43px,env(safe-area-inset-bottom,0px))!important; z-index:10!important; } #main-content .pati-reel-item .pati-reel-rail>button{ position:relative!important;display:flex!important; flex-direction:column!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;box-sizing:border-box!important; width:55px!important;min-width:55px!important;max-width:55px!important; min-height:52px!important;height:auto!important; margin:0!important;padding:6px 4px!important;gap:3px!important; border:1.3px solid var(--pati-reel-ctl-outline)!important; border-radius:16px!important;background:var(--pati-reel-ctl-bg)!important; color:#fff!important;box-shadow:var(--pati-reel-ctl-shadow)!important; text-shadow:0 1px 5px rgba(0,0,0,.85)!important; backdrop-filter:blur(14px) saturate(120%)!important; -webkit-backdrop-filter:blur(14px) saturate(120%)!important; touch-action:manipulation; transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; } #main-content .pati-reel-item .pati-reel-rail>button.pati-reel-tool{ width:47px!important;min-width:47px!important;max-width:47px!important; min-height:42px!important; border-radius:14px!important; background:rgba(11,16,28,.9)!important; padding:5px 3px!important; } #main-content .pati-reel-item .pati-reel-rail>button svg.icon, #main-content .pati-reel-item .pati-reel-rail>button svg:not(.pati-coin-icon){ display:block!important;flex:0 0 auto!important; width:26px!important;height:26px!important; stroke:#fff!important;stroke-width:2.2!important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); } #main-content .pati-reel-item .pati-reel-rail>button.pati-reel-tool svg.icon{ width:22px!important;height:22px!important; stroke-width:2.1!important; } #main-content .pati-reel-item .pati-reel-rail .pati-reel-count, #main-content .pati-reel-item .pati-reel-rail .pati-engagement-metric, #main-content .pati-reel-item .pati-reel-rail .pati-reel-tool-label{ display:block!important;max-width:100%!important; margin:0!important;padding:0!important; font-size:11px!important;line-height:1.2!important;font-weight:850!important; letter-spacing:0!important;white-space:nowrap!important; color:#fff!important;opacity:1!important; text-align:center!important; text-shadow:0 1px 3px rgba(0,0,0,.9)!important; } #main-content .pati-reel-item .pati-reel-rail .pati-reel-action-label{display:none!important} #main-content .pati-reel-item .pati-reel-rail>button[data-action="reel-sound"] .pati-reel-tool-label{ position:absolute!important;width:1px!important;height:1px!important; overflow:hidden!important;clip-path:inset(50%)!important; white-space:nowrap!important;opacity:0!important; } #main-content .pati-reel-item .pati-reel-rail>button:is(:hover,:focus-visible){ border-color:#fff!important;background:rgba(32,39,55,.96)!important; box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.13)!important; } #main-content .pati-reel-item .pati-reel-rail>button:focus-visible{ outline:2px solid #fff!important;outline-offset:3px!important; } #main-content .pati-reel-item .pati-reel-rail>button:active{ transform:scale(.95)!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="like"]{ border-color:#ff8eac!important;background:rgba(66,18,39,.93)!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="like"] svg.icon{ fill:#ff4b72!important;stroke:#ff587a!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="save"]{ border-color:#f9df9c!important;background:rgba(47,38,24,.95)!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="save"] svg.icon{ fill:#f7d879!important;stroke:#f7d879!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="pati-repost"]{ border-color:#6be4c3!important;background:rgba(8,51,46,.95)!important; } #main-content .pati-reel-item .pati-reel-rail>button.active[data-action="pati-repost"] svg{ stroke:#70e6c8!important; } #main-content .pati-reel-item .pati-reel-rail :is(.pati-reel-likers-trigger,.pati-engagement-metric){ cursor:pointer; } /* Compact on low-height devices without covering the video author and subtitle. */ @media(max-height:690px){ #main-content .pati-reel-item .pati-reel-rail{width:52px!important;gap:4px!important} #main-content .pati-reel-item .pati-reel-rail>button{ width:51px!important;min-width:51px!important;max-width:51px!important; min-height:47px!important;padding:4px 3px!important;gap:2px!important; } #main-content .pati-reel-item .pati-reel-rail>button.pati-reel-tool{ width:45px!important;min-width:45px!important;max-width:45px!important;min-height:39px!important; } #main-content .pati-reel-item .pati-reel-rail>button svg.icon{width:24px!important;height:24px!important} #main-content .pati-reel-item .pati-reel-rail .pati-reel-count{font-size:10px!important} } @media(max-height:530px){ #main-content .pati-reel-item .pati-reel-rail{gap:2px!important;bottom:max(28px,env(safe-area-inset-bottom,0px))!important} #main-content .pati-reel-item .pati-reel-rail>button{ min-height:41px!important;border-radius:12px!important;padding:3px 2px!important; } #main-content .pati-reel-item .pati-reel-rail>button.pati-reel-tool{min-height:34px!important} #main-content .pati-reel-item .pati-reel-rail>button svg.icon{width:21px!important;height:21px!important} } @media(max-width:360px){ #main-content .pati-reel-item .pati-reel-rail{ right:max(5px,env(safe-area-inset-right,0px))!important; } #main-content .pati-reel-item .pati-reel-caption, #main-content .pati-reel-item .pati-reel-author{right:70px!important} } /* Obsolete glossy creator icons removed. Neutral creator owns icon colors. */ @media(prefers-reduced-motion:reduce){ #main-content .pati-reel-item .pati-reel-rail>button, #patiyiz-system-media .pati-system-options .pati-system-option-icon{ transition:none!important; } } /* patiyiz-social-immersive-v2-20261031.css */ /* Patiyiz Social 2.0 – focused, native-feeling mobile composition. No changes to data access, reactions, story timing or gesture handlers. White profiles are intentional, including when app dark mode is selected. */ /* PROFILE – compact username/title bar, purposeful information hierarchy. */ #main-content .pati-ig-profile{ background:#fff!important;color:#15171b!important; border-radius:0!important;box-shadow:none!important; } #main-content .pati-ig-profile :is(.pati-profile-topbar,.pati-profile-visitor-topbar){ position:relative;display:flex!important;align-items:center!important; justify-content:space-between!important; box-sizing:border-box!important;width:100%!important;min-height:56px!important; padding:7px clamp(13px,3.7vw,22px)!important;margin:0!important; background:#fff!important;border-bottom:1px solid #f0f0f2!important; border-radius:0!important;overflow:visible!important; } #main-content .pati-ig-profile :is(.pati-profile-topbar-title,.pati-profile-visitor-username){ display:block;min-width:0;max-width:calc(100% - 68px); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:17px!important;line-height:1.3!important; font-weight:820!important;letter-spacing:-.025em; color:#17191d!important; } #main-content .pati-ig-profile>.pati-profile-visitor-topbar{ padding-right:72px!important; } #main-content .pati-ig-profile>.pati-profile-more-wrap{ top:6px!important;right:clamp(13px,3.7vw,22px)!important; } #main-content .pati-ig-profile>.pati-profile-more-wrap>summary, #main-content .pati-profile-menu-trigger{ border:1px solid #eceef1!important; background:#f6f7f9!important;color:#202126!important; box-shadow:none!important; } #main-content .pati-ig-profile .pati-ig-summary{ background:#fff!important;border:0!important; padding:19px clamp(13px,3.7vw,22px) 12px!important; gap:clamp(12px,3vw,22px)!important;align-items:center!important; } #main-content .pati-ig-profile .pati-ig-summary::before{ display:none!important;content:none!important; } #main-content .pati-ig-profile .pati-ig-avatar{ flex-shrink:0!important;border-color:#eeeef0!important; background:#fff!important;box-shadow:none!important; } #main-content .pati-ig-profile .pati-ig-handle-row{ display:flex;align-items:center;min-width:0;gap:6px; } #main-content .pati-ig-profile .pati-ig-handle{ font-size:clamp(13px,3.8vw,16px)!important; line-height:1.3!important;color:#1d2026!important; font-weight:800!important;letter-spacing:-.012em!important; } #main-content .pati-ig-profile .pati-ig-name{ color:#34373d!important;line-height:1.3!important;font-size:13px!important; font-weight:650!important; } #main-content .pati-ig-profile .pati-ig-stats{ display:flex!important;justify-content:space-between!important; min-width:0!important;margin-top:10px!important;gap:4px!important; } #main-content .pati-ig-profile .pati-ig-stats>:is(span,button){ display:flex!important;flex-direction:column!important;align-items:center!important; gap:3px!important;min-width:0!important; padding:4px 1px!important; border-radius:9px!important; } #main-content .pati-ig-profile .pati-ig-stats b{ font-size:clamp(14px,3.7vw,18px)!important;line-height:1.15!important; font-weight:840!important;color:#15171b!important; font-variant-numeric:tabular-nums!important; } #main-content .pati-ig-profile .pati-ig-stats small{ font-size:10px!important;line-height:1.25!important; color:#686d75!important;font-weight:650!important;text-align:center!important; } #main-content .pati-ig-profile .pati-ig-about{ margin:0!important;padding:3px clamp(13px,3.7vw,22px) 9px!important; background:#fff!important; } #main-content .pati-ig-profile .pati-profile-links{ background:#fff!important; } #main-content .pati-ig-profile .pati-ig-tabs{ margin-top:9px!important;border-top:1px solid #f1f1f3!important; border-bottom:1px solid #efeff1!important;gap:0!important; } #main-content .pati-ig-profile .pati-ig-tabs>button{ min-height:50px!important;border-radius:0!important; } #main-content .pati-ig-profile .pati-ig-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:2px!important;margin:0!important;padding:0!important; background:#fff!important;border:0!important; } #main-content .pati-ig-profile .pati-ig-grid>.pati-profile-tile, #main-content .pati-ig-profile .pati-ig-grid>*{ width:100%!important;min-width:0!important;max-width:100%!important; height:auto!important;aspect-ratio:3 / 4!important; min-height:0!important;overflow:hidden!important; border:0!important;border-radius:0!important; box-shadow:none!important;background:#eff0f2!important; } #main-content .pati-ig-profile .pati-ig-grid :is(img,video){ display:block!important;position:relative; width:100%!important;height:100%!important;aspect-ratio:3 / 4!important; object-fit:cover!important;object-position:center!important; border:0!important;border-radius:0!important; } #main-content .pati-ig-profile .pati-ig-grid .pati-profile-tile:focus-visible{ outline:3px solid #758ff0!important;outline-offset:-3px!important; } /* FEED – readable author line, editorial spacing and content-first photos. */ #main-content .pati-feed-posts{ min-width:0!important; } #main-content .pati-feed-posts>.pati-feed-card{ width:100%!important;min-width:0!important;max-width:100%!important; background:var(--pati-social-surface,#fff)!important; border:0!important;border-bottom:1px solid var(--pati-social-line,#e9e9ec)!important; border-radius:0!important;box-shadow:none!important; margin:0!important;padding:0 0 11px!important; overflow:hidden!important; } #main-content .pati-feed-card .pati-feed-card-header{ min-height:64px!important;box-sizing:border-box!important; padding:10px clamp(12px,3.7vw,20px)!important; display:flex!important;align-items:center!important;gap:9px!important; background:var(--pati-social-surface,#fff)!important; } #main-content .pati-feed-card .pati-feed-card-header .pati-post-more{ width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important; border:0!important;border-radius:12px!important; font-size:24px!important;color:var(--pati-social-ink,#1c1c20)!important; } #main-content .pati-feed-card .pati-feed-card-header :is(strong,b){ font-weight:800!important;letter-spacing:-.012em; } #main-content .pati-feed-card :is(.pati-carousel,.pati-video-frame,.pati-feed-text-content){ border-radius:0!important;box-shadow:none!important; } #main-content .pati-feed-card .pati-social-actions{ display:flex!important;justify-content:flex-start!important; align-items:center!important;gap:4px!important; margin:0!important;padding:5px clamp(9px,3vw,16px) 2px!important; min-height:49px!important;box-sizing:border-box!important; border:0!important;background:transparent!important; } #main-content .pati-feed-card .pati-social-actions>button{ display:inline-flex!important;align-items:center!important; justify-content:center!important;gap:5px!important; flex:0 1 auto!important;min-width:42px!important;min-height:44px!important; padding:7px 6px!important;margin:0!important; border-radius:11px!important;background:transparent!important; } #main-content .pati-feed-card .pati-social-actions>button :is(svg,.icon){ width:23px!important;height:23px!important; } #main-content .pati-feed-card .pati-post-details{ display:flex!important;flex-direction:column!important; align-items:flex-start!important;gap:5px!important; margin:0!important;padding:2px clamp(13px,3.7vw,20px) 0!important; color:var(--pati-social-ink,#18191d)!important; } #main-content .pati-feed-card .pati-post-like-summary{ font-size:13px!important;line-height:1.35!important; color:var(--pati-social-ink,#18191d)!important;font-weight:800!important; } #main-content .pati-feed-card .pati-post-caption{ font-size:13px!important;line-height:1.56!important; margin:0!important;padding:0!important; overflow-wrap:anywhere!important; } #main-content .pati-feed-card .pati-post-time{ color:var(--pati-social-secondary,#7b7e85)!important; font-size:11px!important;line-height:1.3!important; letter-spacing:0!important;text-transform:none!important; } #main-content .pati-feed-card.pati-feed-text-only .pati-feed-text-content{ padding:12px clamp(13px,3.7vw,20px) 8px!important; } /* REELS – full-bleed video, transparent overlay actions and compact controls so video occupies as much of the display as possible. */ html[data-pati-view="reels"] #main-content, html[data-pati-view="reels"] #main-content .pati-reels-viewport{ background:#050507!important; } html[data-pati-view="reels"] #main-content .pati-reel-item{ background:#050507!important;overflow:hidden!important; position:relative!important;isolation:isolate!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-video{ width:100%!important;height:100%!important; min-width:100%!important;min-height:100%!important; object-fit:cover!important;object-position:center!important; background:#050507!important; } html[data-pati-view="reels"] #main-content .pati-reel-item::after{ content:"";position:absolute;inset:51% 0 0!important; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 32%,rgba(0,0,0,.67) 100%)!important; pointer-events:none!important;z-index:1!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{ position:absolute!important;left:clamp(12px,3.2vw,20px)!important; right:71px!important;bottom:104px!important; padding:0!important;gap:8px!important; color:#fff!important;text-shadow:0 1px 5px #000b!important; z-index:9!important; } html[data-pati-view="reels"] #main-content .pati-reel-author strong{ font-size:14px!important;line-height:1.3!important;font-weight:810!important; } html[data-pati-view="reels"] #main-content .pati-reel-author small{ font-size:11px!important;color:#f0f0f2!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{ position:absolute!important;left:clamp(12px,3.2vw,20px)!important; right:74px!important;bottom:40px!important; font-size:13px!important;line-height:1.44!important; color:#fff!important;text-shadow:0 1px 5px #000e!important; max-height:57px!important;overflow:auto!important; background:none!important;border:0!important; z-index:9!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ position:absolute!important;right:max(7px,env(safe-area-inset-right,0px))!important; bottom:max(39px,env(safe-area-inset-bottom,0px))!important; width:49px!important;gap:4px!important;z-index:12!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button{ width:46px!important;min-width:46px!important;max-width:46px!important; min-height:45px!important;max-height:none!important; padding:5px 3px!important;gap:2px!important; border:1px solid #ffffff50!important; border-radius:18px!important; background:#121720a8!important; box-shadow:0 2px 9px #0004!important; backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important; color:#fff!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button svg.icon{ width:23px!important;height:23px!important; stroke-width:2.2!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-reel-count{ font-size:10px!important;font-weight:850!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool{ width:41px!important;min-width:41px!important;max-width:41px!important; min-height:37px!important;border-radius:15px!important; padding:4px 3px!important; border-color:#ffffff2b!important;background:#161a22a2!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool svg.icon{ width:19px!important;height:19px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool .pati-reel-tool-label{ font-size:10px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button:focus-visible{ outline:2px solid #fff!important;outline-offset:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-progress{ bottom:max(9px,env(safe-area-inset-bottom,0px))!important;z-index:14!important; } /* STORY – image first, hairline progress at top, close button in the opposite corner, restrained header and a cohesive footer area. Existing swipe-up viewer activity and touch navigation are untouched. */ #story-overlay:not(.pati-story-viewers-open) .story-player{ position:relative!important;background:#050507!important; color:#fff!important;overflow:hidden!important; } #story-overlay:not(.pati-story-viewers-open) .story-player>.story-progress{ position:absolute!important;z-index:30!important; top:max(9px,env(safe-area-inset-top,0px))!important; left:10px!important;right:10px!important; display:flex!important;gap:3px!important; width:auto!important;height:3px!important;max-height:3px!important; padding:0!important;margin:0!important; background:none!important; } #story-overlay .story-progress>.story-track{ display:block!important;flex:1 1 0!important;min-width:0!important; height:3px!important;border-radius:999px!important; background:rgba(255,255,255,.32)!important;overflow:hidden!important; } #story-overlay .story-progress>.story-track>.story-playing, #story-overlay .story-progress>.story-track>span{ display:block!important;height:100%!important;border-radius:999px!important; } #story-overlay:not(.pati-story-viewers-open) .story-player>.story-player-head{ display:flex!important;align-items:center!important;gap:9px!important; box-sizing:border-box!important;position:absolute!important; top:max(20px,calc(env(safe-area-inset-top,0px) + 14px))!important; left:12px!important;right:11px!important; margin:0!important;padding:7px 2px!important; z-index:32!important; background:transparent!important;border:0!important; color:#fff!important; } #story-overlay .story-player-head .pati-story-owner-name{ min-width:0!important;gap:2px!important; } #story-overlay .story-player-head .pati-story-owner-top strong{ font-size:13px!important;font-weight:780!important; color:#fff!important; } #story-overlay .story-player-head .pati-story-upload-age{ font-size:10px!important;background:#0006!important; } #story-overlay .story-player-head .story-close{ display:grid!important;place-items:center!important; flex:0 0 42px!important; box-sizing:border-box!important; width:42px!important;height:42px!important;min-height:42px!important; margin:0!important;padding:0!important; border:1px solid #ffffff4b!important;border-radius:12px!important; background:rgba(0,0,0,.38)!important; color:#fff!important;font-size:26px!important;line-height:1!important; } #story-overlay:not(.pati-story-viewers-open) .story-player :is(.story-big-photo,.story-big-video){ display:block;width:100%!important;height:100%!important; max-width:100%!important;object-fit:contain!important; object-position:center!important; } #story-overlay:not(.pati-story-viewers-open) .story-player>.story-caption{ left:13px!important;right:13px!important; bottom:max(79px,calc(env(safe-area-inset-bottom,0px) + 67px))!important; margin:0!important;padding:10px 12px!important; max-height:20dvh!important;border-radius:13px!important; background:rgba(8,10,15,.6)!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); font-size:13px!important;line-height:1.5!important;color:#fff!important; box-sizing:border-box!important;overflow:auto!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-stack{ position:absolute!important;left:0!important;right:0!important; bottom:max(9px,calc(env(safe-area-inset-bottom,0px) + 4px))!important; z-index:26!important;display:flex!important;flex-direction:column!important; align-items:stretch!important;gap:7px!important; padding:0 12px!important;box-sizing:border-box!important; background:transparent!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-stack>.story-caption{ position:relative!important;inset:auto!important; margin:0!important;padding:9px 11px!important; background:rgba(7,9,13,.67)!important; border:1px solid #ffffff2c!important; border-radius:13px!important; font-size:13px!important;line-height:1.45!important; max-height:min(18dvh,160px)!important; overflow:auto!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer{ position:relative!important;inset:auto!important; display:flex!important;flex-direction:row!important; align-items:center!important;justify-content:space-between!important; gap:9px!important;margin:0!important;padding:0!important; min-height:52px!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button{ position:relative!important;inset:auto!important; display:flex!important;flex-direction:row!important;align-items:center!important; justify-content:flex-start!important; flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important; min-height:52px!important;max-height:56px!important; padding:7px 11px!important;margin:0!important;gap:7px!important; border:1px solid #ffffff52!important;border-radius:15px!important; background:rgba(8,11,17,.7)!important;color:#fff!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-label{ font-size:13px!important;line-height:1.2!important; font-weight:800!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-status{ font-size:10px!important;line-height:1.3!important; white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-delete{ position:relative!important;inset:auto!important; flex:0 0 auto!important;align-self:center!important; width:auto!important;min-width:68px!important; min-height:48px!important; padding:9px 12px!important;margin:0!important; border:1px solid #ffffff55!important;border-radius:14px!important; background:rgba(8,11,17,.68)!important; color:#fff!important; } #story-overlay:not(.pati-story-viewers-open) .pati-story-like, #story-overlay:not(.pati-story-viewers-open) .pati-story-sound{ border:1px solid #ffffff50!important; background:rgba(5,7,12,.58)!important; color:#fff!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } @media(max-width:390px){ #main-content .pati-ig-profile .pati-ig-stats small{ font-size:9px!important; } #main-content .pati-ig-profile .pati-ig-summary{ gap:10px!important; } #main-content .pati-feed-card .pati-social-actions>button{ min-width:38px!important;padding:6px 4px!important; } #story-overlay.pati-story-own:not(.pati-story-viewers-open) .pati-own-story-footer>.story-viewers-button{ padding:7px 8px!important;gap:5px!important; } #story-overlay .pati-own-story-footer>.story-viewers-button .pati-story-viewer-preview-status{ font-size:9px!important; } } @media(max-height:650px){ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ gap:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button{ min-height:39px!important;padding:3px 2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-tool{ min-height:32px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button svg.icon{ width:20px!important;height:20px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{ bottom:93px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{ bottom:32px!important; } } @media(prefers-reduced-motion:reduce){ #main-content .pati-feed-card .pati-social-actions>button, html[data-pati-view="reels"] #main-content .pati-reel-rail>button, #story-overlay .story-close{ transition:none!important; } } /* patiyiz-reels-compact-controls-20261031.css */ /* 31 Oct 2026 | Reels compact five-action rail and independent playback utilities. Keeps original data-action handlers and their accessible labels. */ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ position:absolute!important;right:max(10px,env(safe-area-inset-right,0px))!important; bottom:max(114px,calc(env(safe-area-inset-bottom,0px) + 102px))!important; z-index:14!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:flex-end!important; width:44px!important;max-width:44px!important;gap:6px!important; box-sizing:border-box!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ box-sizing:border-box!important;display:flex!important; flex:0 0 auto!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; width:44px!important;min-width:44px!important;max-width:44px!important; min-height:48px!important;height:auto!important;max-height:none!important; margin:0!important;padding:5px 2px!important;gap:1px!important; border:1px solid rgba(255,255,255,.34)!important; border-radius:14px!important; background:rgba(12,15,24,.54)!important;color:#fff!important; box-shadow:0 2px 9px rgba(0,0,0,.17)!important; -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important; text-shadow:0 1px 3px rgba(0,0,0,.65)!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action svg.icon{ display:block!important;width:22px!important;height:22px!important; stroke-width:2.2!important;filter:drop-shadow(0 1px 2px #0006); } html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-reel-count, html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-engagement-metric{ font-size:10px!important;font-weight:800!important; line-height:1.12!important;color:#fff!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action:focus-visible{ outline:2px solid #fff!important;outline-offset:3px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.active[data-action="like"]{ background:rgba(60,15,37,.82)!important;border-color:rgba(255,145,173,.82)!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.active[data-action="save"]{ background:rgba(47,37,19,.83)!important;border-color:rgba(242,210,129,.75)!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.active[data-action="pati-repost"]{ background:rgba(10,49,43,.8)!important;border-color:rgba(99,223,189,.76)!important; } /* Speed and sound are now siblings of the right rail, not children. Their own floating row is 40+px ABOVE the scrubber, preventing overlap on iPhone. */ html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility{ position:absolute!important;z-index:16!important; right:max(11px,env(safe-area-inset-right,0px))!important; bottom:max(60px,calc(env(safe-area-inset-bottom,0px) + 51px))!important; left:auto!important;top:auto!important; display:flex!important;flex-direction:row!important; align-items:center!important;justify-content:flex-end!important; gap:7px!important;margin:0!important;padding:0!important; width:auto!important;max-width:calc(100% - 30px)!important; height:38px!important;min-height:38px!important; pointer-events:auto; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility>button.pati-reel-tool{ position:relative!important;inset:auto!important;transform:none!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;flex-direction:row!important;gap:5px!important; box-sizing:border-box!important; width:auto!important;max-width:none!important;min-width:44px!important; height:36px!important;min-height:36px!important;max-height:36px!important; margin:0!important;padding:7px 9px!important; border-radius:12px!important;border:1px solid rgba(255,255,255,.38)!important; background:rgba(10,13,21,.78)!important;box-shadow:0 2px 8px #0005!important; -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important; color:#fff!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility>button svg.icon{ width:18px!important;height:18px!important;flex:0 0 18px!important; fill:none!important;stroke:#fff!important;stroke-width:2.1!important; } html[data-pati-view="reels"] #main-content .pati-reel-utility .pati-reel-tool-label{ display:block!important;position:static!important; width:auto!important;height:auto!important;clip-path:none!important; opacity:1!important;overflow:visible!important; font-size:11px!important;font-weight:800!important;line-height:1!important; color:#fff!important;white-space:nowrap!important;text-shadow:none!important; } html[data-pati-view="reels"] #main-content .pati-reel-utility .pati-reel-sound-label, html[data-pati-view="reels"] #main-content .pati-reel-utility button[data-action="reel-sound"] .pati-reel-tool-label{ position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden!important; clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important; white-space:nowrap!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility>button:focus-visible{ outline:2px solid #fff!important;outline-offset:3px!important; } /* Progress has an isolated z-index and remains freely draggable. */ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-progress{ position:absolute!important;left:13px!important;right:13px!important; width:auto!important;bottom:max(12px,env(safe-area-inset-bottom,0px))!important; z-index:18!important;pointer-events:auto!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{ right:66px!important;bottom:119px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{ right:65px!important;bottom:51px!important; max-height:58px!important; } @media(max-height:650px){ html[data-pati-view="reels"] #main-content .pati-reel-rail{gap:3px!important} html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ min-height:41px!important;padding:3px 2px!important;border-radius:12px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action svg.icon{ width:20px!important;height:20px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{bottom:104px!important} html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{bottom:45px!important} } @media(max-height:480px){ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ bottom:max(90px,calc(env(safe-area-inset-bottom,0px) + 83px))!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ min-height:36px!important;gap:0!important;padding:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility{ bottom:max(51px,calc(env(safe-area-inset-bottom,0px) + 43px))!important; } } @media(prefers-reduced-motion:reduce){ html[data-pati-view="reels"] #main-content .pati-reel-rail>button, html[data-pati-view="reels"] #main-content .pati-reel-utility>button{ transition:none!important; } } /* patiyiz-reels-fast-feed-20261031.css */ /* Never show buffering UI before playback actually needs it. The [hidden] attribute must win over this file's display:flex!important rules. */ #main-content .pati-reel-item .pati-reel-buffering[hidden], #main-content .pati-reels-viewport>.pati-reels-load-more[hidden]{ display:none!important; } /* Reels loading should be rare and subtle, not a large repeated dialog. Actual decoding/preload/pagination logic lives in app.js. */ #main-content .pati-reel-item .pati-reel-buffering:not(.pati-reel-buffering-error){ display:flex;justify-content:center;align-items:center; width:46px!important;height:46px!important; min-width:46px!important;max-width:46px!important; min-height:46px!important;max-height:46px!important; padding:0!important;margin:0!important;gap:0!important; border:1px solid #ffffff36!important; border-radius:50%!important;background:#090b11b8!important; box-shadow:0 3px 16px #0004!important; -webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important; pointer-events:none!important; } #main-content .pati-reel-item .pati-reel-buffering .pati-reel-spinner{ display:block!important;width:22px!important;height:22px!important; border-width:2px!important; } #main-content .pati-reel-item .pati-reel-buffering:not(.pati-reel-buffering-error) :is(.pati-reel-loading-label,progress){ position:absolute!important;width:1px!important;height:1px!important; overflow:hidden!important;clip-path:inset(50%)!important; white-space:nowrap!important; } #main-content .pati-reel-item .pati-reel-buffering.pati-reel-buffering-error{ width:auto!important;min-width:155px!important;max-width:calc(100% - 70px)!important; padding:12px 16px!important;min-height:52px!important; border-radius:14px!important;background:#101319ed!important; color:#fff!important; } #main-content .pati-reel-item .pati-reel-buffering.pati-reel-buffering-error .pati-reel-loading-label{ display:block!important;font-weight:700!important;font-size:12px!important; line-height:1.4!important;color:#fff!important; } #main-content .pati-reel-item .pati-reel-buffering.pati-reel-buffering-error progress{ display:none!important; } /* Fetch next Reels unobtrusively, without a tall "Videolar yükleniyor" card. */ #main-content .pati-reels-viewport>.pati-reels-load-more[hidden]{ display:none!important; } #main-content .pati-reels-viewport>.pati-reels-load-more:not(:has(button)){ display:none!important; } @media(prefers-reduced-motion:reduce){ #main-content .pati-reel-item .pati-reel-spinner{animation:none!important} } /* patiyiz-balance-light-chat-20261031.css */ /* 31 Oct 2026 — one light theme, clear reward balance, discreet story actions and full-screen chat composers. */ html[data-pati-theme="light"]{color-scheme:light} #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-stack, #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-status{display:none!important} #story-overlay .pati-story-viewer-preview{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;min-width:106px!important} #story-overlay .pati-story-viewer-preview .pati-story-viewer-preview-label{display:block!important;white-space:nowrap!important;font-weight:800!important} #modal-root #dm-new-form .modal-footer{display:none!important} #modal-root #dm-new-form .pati-dm-new-person, #modal-root #pati-group-create-form .pati-social-person{width:100%!important;min-height:58px!important;box-sizing:border-box} #modal-root #dm-new-form .pati-dm-new-list{display:flex;flex-direction:column;gap:4px;min-width:0} #modal-root #pati-group-create-form .pati-group-people{width:100%;max-height:none!important;overflow:visible!important} #modal-root #pati-group-create-form .modal-content{min-height:0} .pati-streak-sixty{display:flex;flex-direction:column;gap:12px;margin:20px 0 10px;padding:20px;border-radius:22px;background:#fff;border:1px solid #e4e5e8;color:#17181c;box-shadow:0 8px 22px #161b2310} .pati-streak-sixty-kicker{font-size:11px;font-weight:900;letter-spacing:.07em;color:#8a510b} .pati-streak-sixty h2{margin:0;font-size:22px;font-weight:850;line-height:1.2} .pati-streak-sixty p{margin:0;font-size:14px;line-height:1.5} .pati-streak-sixty small{color:#666a72;font-size:12px} .pati-streak-sixty .pati-streak-progress{height:9px;margin-top:4px;border-radius:20px;overflow:hidden;background:#e8e9ec} .pati-streak-sixty .pati-streak-progress span{display:block;height:100%;background:#d79b29;border-radius:20px} .pati-streak-sixty button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 15px;border:0;border-radius:14px;font-weight:850;background:#17181c;color:#fff} .pati-streak-sixty button:disabled{background:#e8e9ec;color:#686d77;cursor:not-allowed} .pati-streak-sixty-status{display:block;padding:12px 13px;background:#f4f7ef;border-radius:12px;color:#305333;font-size:13px} @media(max-width:740px){ #modal-root .pati-full-page-form-backdrop:has(#dm-new-form,#pati-group-create-form){z-index:480!important} #modal-root .pati-mobile-full-page-form:has(#dm-new-form,#pati-group-create-form) .modal-content{padding-bottom:20px!important;scrollbar-width:thin} #modal-root .pati-mobile-full-page-form:has(#dm-new-form) .modal-header{border-bottom:1px solid #ececf0!important} .pati-streak-sixty{padding:16px;border-radius:17px} .pati-streak-sixty h2{font-size:20px} } /* Akışta eski yeni-bakiye rozeti de görünmesin; PatiCoin merkezine menüden erişilir. */ html[data-pati-view="home"] #pati-header-coins {display:none!important} /* patiyiz-mobile-feed-switch-20261101.css */ /* 01 Nov 2026 — Mobile-first, reliable timeline selector. Loaded LAST. */ #app-root .pati-feed-brand-selector{ appearance:none!important;-webkit-appearance:none!important; display:flex!important;align-items:center!important;justify-content:center!important; gap:6px!important;min-width:0;min-height:44px!important; padding:3px 6px!important;margin:0!important; border:0!important;border-radius:12px!important; box-shadow:none!important;background:transparent!important;color:#17191d!important; font:inherit!important;text-align:left!important;opacity:1!important;visibility:visible!important; pointer-events:auto!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent; } #app-root .pati-feed-brand-selector .brand-icon{flex:none} #app-root .pati-feed-brand-selector>div:not(.brand-icon){min-width:0} #app-root .pati-feed-brand-selector .brand-word{white-space:nowrap!important} #app-root .pati-feed-brand-selector:after{ content:""!important;display:block!important;position:static!important;flex:none; width:7px!important;height:7px!important;margin:0 0 4px 2px!important; border-right:2px solid currentColor!important;border-bottom:2px solid currentColor!important; transform:rotate(45deg)!important;pointer-events:none; } #app-root .pati-feed-brand-selector[aria-expanded="true"]:after{ transform:translateY(4px) rotate(225deg)!important; } #app-root .pati-feed-brand-selector:focus-visible,#pati-feed-menu button:focus-visible, #pati-feed-desktop-menu button:focus-visible{outline:2px solid #24282f!important;outline-offset:2px!important} .pati-feed-current{ display:block;color:#59606b!important; font-size:10px!important;font-weight:700!important;line-height:1.15!important; letter-spacing:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:94px;margin-top:3px; } #pati-feed-menu,#pati-feed-desktop-menu{ box-sizing:border-box!important;width:min(290px,calc(100vw - 24px))!important; max-height:min(350px,calc(100dvh - 110px))!important;overflow-y:auto!important; border:1px solid #e8eaed!important;border-radius:16px!important; padding:6px!important;background:#fff!important;color:#18191d!important; box-shadow:0 14px 34px #14182029!important;overscroll-behavior:contain; } #pati-feed-menu[hidden],#pati-feed-desktop-menu[hidden]{display:none!important} #pati-feed-menu>button,#pati-feed-desktop-menu>button{ display:flex!important;align-items:center!important;gap:12px!important; border:0!important;border-radius:11px!important; padding:10px 12px!important;width:100%!important;min-height:62px!important; background:#fff!important;color:#1d2026!important;text-align:left!important; font-size:14px!important;cursor:pointer; } #pati-feed-menu>button[aria-checked="true"],#pati-feed-desktop-menu>button[aria-checked="true"], #pati-feed-menu>button:active,#pati-feed-desktop-menu>button:active{background:#f0f2f5!important} #pati-feed-menu>button .icon,#pati-feed-desktop-menu>button .icon{ display:block!important;flex:none!important;width:22px!important;height:22px!important; fill:none!important;stroke:#23262d!important;color:#23262d!important; } #pati-feed-menu .pati-feed-menu-label,#pati-feed-desktop-menu .pati-feed-menu-label{ display:flex!important;flex:1!important;flex-direction:column!important;gap:3px!important; align-items:flex-start!important;justify-content:center!important;min-width:0; } #pati-feed-menu .pati-feed-menu-label strong,#pati-feed-desktop-menu .pati-feed-menu-label strong{ font-size:14px!important;line-height:1.25!important;font-weight:800!important;color:#18191d!important; } #pati-feed-menu .pati-feed-menu-label small,#pati-feed-desktop-menu .pati-feed-menu-label small{ font-size:11px!important;line-height:1.35!important;font-weight:500!important;color:#5f6974!important; } #pati-feed-menu .pati-feed-selected,#pati-feed-desktop-menu .pati-feed-selected{ display:block!important;flex:none!important;visibility:hidden!important;font-weight:800!important;color:#16181e!important; } #pati-feed-menu>button[aria-checked="true"] .pati-feed-selected, #pati-feed-desktop-menu>button[aria-checked="true"] .pati-feed-selected{visibility:visible!important} @media(max-width:740px){ #app-root:not(.hidden)>.mobile-header{ overflow:visible!important;isolation:isolate; min-width:0!important;width:100%!important;box-sizing:border-box!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger.brand{ position:absolute!important;left:50%!important;top:50%!important; transform:translate(-50%,-50%)!important;display:flex!important; width:auto!important;max-width:calc(100% - 165px)!important; z-index:15!important;overflow:visible!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger .brand-icon{ width:29px!important;height:29px!important;min-width:29px!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger .brand-word{ font-size:clamp(16px,4.8vw,21px)!important;line-height:1.1!important; letter-spacing:-.06em!important;color:#17191d!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu{ display:flex!important;position:absolute!important; top:calc(100% + 5px)!important;left:50%!important;right:auto!important; transform:translateX(-50%)!important;z-index:300!important; flex-direction:column!important; } #app-root:not(.hidden)>.mobile-header>#pati-feed-menu[hidden]{display:none!important} #app-root:not(.hidden)>.mobile-header>#pati-header-share, #app-root:not(.hidden)>.mobile-header>.pati-header-actions{position:relative;z-index:5} #pati-feed-desktop-menu{display:none!important} } @media(max-width:360px){ #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger.brand{max-width:calc(100% - 155px)!important;gap:3px!important} #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger .brand-icon{width:25px!important;height:25px!important;min-width:25px!important} #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger .brand-word{font-size:16px!important} #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger .pati-feed-current{font-size:9px!important;max-width:75px} } @media(min-width:741px){ #app-root .sidebar>.pati-feed-brand-selector.brand{ display:flex!important;justify-content:flex-start!important;align-items:center!important; width:100%!important;min-height:56px!important;max-width:100%!important; } #pati-feed-desktop-menu{position:fixed!important;z-index:30000!important;display:flex!important;flex-direction:column!important} #pati-feed-desktop-menu[hidden]{display:none!important} } /* patiyiz-dm-request-feed-polish-20261101.css */ /* 01.11.2026 — Mobile-first monochrome feed switch and readable DM requests. */ /* Feed switch: grayscale line icons on an explicit white surface. */ #pati-feed-menu>button,#pati-feed-desktop-menu>button{ color:#17191d!important;background:#fff!important; } #pati-feed-menu>button[aria-checked="true"], #pati-feed-desktop-menu>button[aria-checked="true"]{background:#eff0f2!important} #pati-feed-menu>button .icon, #pati-feed-desktop-menu>button .icon{ color:#17191d!important;stroke:#17191d!important;fill:none!important; filter:grayscale(1)!important;opacity:1!important; } #pati-feed-menu .pati-feed-selected, #pati-feed-desktop-menu .pati-feed-selected{color:#17191d!important} /* Instagram-like left-aligned engagement row without unusable touch targets. */ #main-content .pati-feed-card .pati-social-actions{ display:flex!important;justify-content:flex-start!important;align-items:center!important; flex-wrap:nowrap!important;gap:2px!important; padding:5px 8px!important;margin-left:0!important;margin-right:0!important; } #main-content .pati-feed-card .pati-social-actions>button, #main-content .pati-feed-card .pati-social-actions>button[data-action="save"]{ display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:3px!important;flex:0 0 auto!important; min-width:41px!important;min-height:44px!important; padding:6px 5px!important;margin-left:0!important;margin-right:0!important; } #main-content .pati-feed-card .pati-social-actions>button .icon{ width:21px!important;height:21px!important; } #main-content .pati-home-question .pati-home-question-actions{ justify-content:flex-start!important;gap:6px!important; } #main-content .pati-home-question .pati-home-question-actions>button[data-action="replies"]{ margin-left:0!important; } /* Incoming message requests are visually new until approved. */ #main-content .pati-dm-filters button{ display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important; } #main-content .pati-dm-filters .pati-dm-request-count{ display:inline-grid!important;place-items:center!important;flex:none!important; min-width:19px!important;height:19px!important;padding:0 5px!important; border-radius:999px!important;background:#202124!important;color:#fff!important; font-size:10px!important;line-height:1!important;font-weight:800!important; } #main-content .pati-dm-request-banner{ display:flex!important;align-items:center!important;justify-content:space-between!important; gap:12px!important;padding:12px 14px!important;margin:0!important; border-top:1px solid #e6e7ea!important;border-bottom:1px solid #e6e7ea!important; background:#f7f7f8!important;color:#17191d!important; } #main-content .pati-dm-request-banner>div{min-width:0!important;flex:1!important} #main-content .pati-dm-request-banner strong{font-size:13px!important;font-weight:800!important} #main-content .pati-dm-request-banner p{margin:4px 0 0!important;font-size:11px!important;line-height:1.45!important;color:#4f545d!important} #main-content .pati-dm-request-accept{ flex:none!important;min-height:44px!important;padding:9px 15px!important; border:0!important;border-radius:11px!important; background:#17191d!important;color:white!important; font-size:12px!important;font-weight:800!important; } #main-content .pati-dm-request-accept:focus-visible{outline:2px solid #111!important;outline-offset:3px!important} @media(max-width:740px){ #main-content .pati-feed-card .pati-social-actions{gap:0!important;padding:4px 7px!important} #main-content .pati-feed-card .pati-social-actions>button{min-width:39px!important;padding:5px 4px!important} #main-content .pati-dm-request-banner{padding:11px 12px!important} } @media(max-width:355px){ #main-content .pati-dm-request-banner{flex-wrap:wrap!important} #main-content .pati-dm-request-accept{width:100%!important} } /* 01 Nov — fix white-on-white menu symbols on the real mobile header. An older #app-root:not(.hidden) > .mobile-header > .pati-feed-menu rule was more specific than the shared icon rule above. */ #app-root:not(.hidden) > .mobile-header > #pati-feed-menu > button > svg.icon, #app-root:not(.hidden) > .mobile-header > #pati-feed-menu > button > svg.icon use, #pati-feed-desktop-menu > button > svg.icon, #pati-feed-desktop-menu > button > svg.icon use { color:#17191d!important; stroke:#17191d!important; fill:none!important; filter:none!important; opacity:1!important; visibility:visible!important; } #app-root:not(.hidden) > .mobile-header > #pati-feed-menu > button > svg.icon { display:block!important; width:23px!important;height:23px!important; flex:0 0 23px!important; } /* Compact five-action group aligned to the leading edge of the post. Override the older compound .pati-actionbar.pati-social-actions rule and the auto-margin that had pushed Save to the far edge. */ #main-content .pati-feed-card .pati-actionbar.pati-social-actions { display:flex!important; flex-flow:row nowrap!important; justify-content:flex-start!important; align-items:center!important; column-gap:5px!important; row-gap:0!important; width:100%!important; padding:5px 11px!important; min-height:50px!important; margin:0!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions > button { flex:0 0 auto!important; width:auto!important;max-width:none!important; min-width:39px!important;min-height:44px!important; margin:0!important; padding:6px 4px!important; gap:4px!important; box-sizing:border-box!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions > button[data-action="save"], #main-content .pati-feed-card .pati-actionbar.pati-social-actions > .pati-save-action { margin-left:0!important; margin-right:0!important; } @media(max-width:740px){ #main-content .pati-feed-card .pati-actionbar.pati-social-actions { justify-content:flex-start!important; column-gap:3px!important; padding:4px 9px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions > button { min-width:38px!important; padding:5px 3px!important; min-height:44px!important; } } @media(max-width:350px){ #main-content .pati-feed-card .pati-actionbar.pati-social-actions { column-gap:0!important; padding-inline:5px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions > button { min-width:35px!important; gap:2px!important; padding-inline:2px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions > button svg.icon { width:20px!important;height:20px!important; } } /* patiyiz-feed-no-black-bars-20261101.css */ /* Patiyiz / 01 Nov 2026 — clean mobile feed video appearance. * The uploader and video controls remain unchanged. The post should never * show a black placeholder or a dark tint imposed by the feed UI. */ #main-content .pati-feed-card .pati-video-frame, #main-content .pati-feed-card .pati-carousel, #main-content .pati-feed-card .pati-carousel-slide, #main-content .pati-feed-card .pati-video-slide{ background:#f2f3f5!important; background-image:none!important; border-top:0!important; border-bottom:0!important; box-shadow:none!important; } #main-content .pati-feed-card .pati-video-frame{ overflow:hidden!important;position:relative!important; } #main-content .pati-feed-card .pati-video-frame video.pati-post-video{ display:block!important;width:100%!important;height:100%!important; object-fit:cover!important;object-position:center center!important; background:#f2f3f5!important; /* Slightly fill the video viewport to conceal letterboxing at media edges. */ transform:scale(1.05)!important; transform-origin:center center!important; } #main-content .pati-feed-card .pati-video-frame video.pati-post-video.pati-selfie-mirrored{ transform:scaleX(-1) scale(1.05)!important; } #main-content .pati-feed-reel-card .pati-feed-reel-open{ background:transparent!important; background-image:none!important; box-shadow:none!important; } #main-content .pati-feed-reel-card .pati-feed-reel-open::before, #main-content .pati-feed-reel-card .pati-feed-reel-open::after{ background:transparent!important; background-image:none!important; } #main-content .pati-feed-card .pati-feed-card-header{ background:#fff!important;border-bottom:0!important;box-shadow:none!important; } #main-content .pati-feed-card .pati-video-frame .pati-video-sound{ z-index:10; } @media(prefers-reduced-motion:reduce){ #main-content .pati-feed-card .pati-video-frame video.pati-post-video{ transition:none!important; } } /* Physical top-edge media strip correction — iPhone feed. * Uploaded media sometimes already has a ~2% dark band at its top edge. * Changing wrapper background cannot remove pixels baked into the media. * Crop a small 3.2% safety margin at display-time; never edit original files. * Only regular feed cards are affected (not story editor, detail or Reels). */ #main-content .pati-feed-posts > .pati-feed-card .pati-carousel, #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-track, #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-slide, #main-content .pati-feed-posts > .pati-feed-card .pati-photo, #main-content .pati-feed-posts > .pati-feed-card .pati-video-frame{ box-sizing:border-box!important; margin:0!important;padding:0!important;border:0!important; box-shadow:none!important;line-height:0!important; overflow:hidden!important; } #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-track, #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-slide{ height:100%!important; background:transparent!important; } #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-slide .pati-photo{ position:relative!important; height:100%!important;min-height:0!important; background:#f3f4f6!important; } #main-content .pati-feed-posts > .pati-feed-card .pati-carousel-slide .pati-photo > img{ position:absolute!important; top:-3.2%!important;left:0!important; width:100%!important;height:106.4%!important; max-height:none!important; object-fit:cover!important;object-position:center center!important; content-visibility:visible!important; border:0!important;margin:0!important;padding:0!important; } /* Video media uses the same edge treatment, but keep the camera mirroring. */ #main-content .pati-feed-posts > .pati-feed-card .pati-video-frame{ position:relative!important; background:#f3f4f6!important; } #main-content .pati-feed-posts > .pati-feed-card .pati-video-frame > video.pati-post-video{ position:absolute!important; top:-3.2%!important;left:0!important; width:100%!important;height:106.4%!important; max-height:none!important; object-fit:cover!important;object-position:center center!important; transform:none!important; margin:0!important;padding:0!important;border:0!important; } #main-content .pati-feed-posts > .pati-feed-card .pati-video-frame > video.pati-post-video.pati-selfie-mirrored{ transform:scaleX(-1)!important; } /* Keep overlays, carousel arrows and audio control interactive. */ #main-content .pati-feed-posts > .pati-feed-card .pati-video-frame > :is(button,.pati-video-heart-burst){ z-index:6; } /* Never show a pseudo-element separator above the visible media. */ #main-content .pati-feed-posts > .pati-feed-card :is(.pati-carousel,.pati-video-frame)::before, #main-content .pati-feed-posts > .pati-feed-card :is(.pati-carousel,.pati-video-frame)::after{ border-top:0!important;box-shadow:none!important; } /* patiyiz-streak-mobile-fix-20261101.css */ /* Patiyiz: Seriler mobile overflow and daily celebration, 01.11.2026. */ #main-content .pati-streaks-page{ --streak-ink:#181a20;--streak-muted:#70747e;--streak-line:#e5e7eb;--streak-paper:#fff; box-sizing:border-box!important;display:flex!important;flex-direction:column!important; width:100%!important;max-width:760px!important;min-width:0!important; margin:0 auto!important;padding:14px 14px calc(35px + env(safe-area-inset-bottom,0px))!important; gap:14px!important;overflow-x:clip!important;color:var(--streak-ink)!important; } #main-content .pati-streaks-page *,#main-content .pati-streaks-page *::before, #main-content .pati-streaks-page *::after{box-sizing:border-box!important} #main-content .pati-streaks-top{ display:flex!important;align-items:flex-start!important;gap:12px!important; margin:0!important;padding:2px 0 5px!important;width:100%!important;min-width:0!important; } #main-content .pati-streaks-back{ display:grid!important;place-items:center!important;flex:0 0 44px!important; width:44px!important;height:44px!important;background:#f4f5f7!important; border:1px solid #e3e5e9!important;border-radius:14px!important;color:#181a20!important; } #main-content .pati-streak-title{min-width:0!important;flex:1!important} #main-content .pati-streak-title h1{color:#17191d!important;font-size:26px!important;margin:0!important} #main-content .pati-streak-title p{color:#727780!important;overflow-wrap:anywhere!important} #main-content .pati-streak-page-card{ display:flex!important;flex-direction:column!important;align-items:center!important; width:100%!important;min-width:0!important;margin:0!important;padding:19px 13px!important; gap:0!important;background:linear-gradient(160deg,#fff9ed,#fff3de)!important; border:1px solid #f1dfbc!important;border-radius:22px!important; box-shadow:none!important;text-align:center!important; } #main-content .pati-streak-page-card .pati-streak-sparkles{ width:104px!important;height:110px!important;flex:0 0 auto!important;margin:6px auto 0!important; } #main-content .pati-streak-page-card .pati-streak-count{font-size:62px!important;margin:0!important} #main-content .pati-streak-page-card h2{font-size:23px!important;margin:0!important} #main-content .pati-streak-page-card .pati-streak-week{ display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important; width:100%!important;max-width:390px!important;gap:3px!important; padding:0!important;margin:5px auto 12px!important; } #main-content .pati-streak-page-card .pati-streak-day{min-width:0!important;gap:5px!important} #main-content .pati-streak-page-card .pati-streak-day-circle{ width:clamp(27px,7vw,38px)!important;height:clamp(27px,7vw,38px)!important; } #main-content .pati-streak-goal-section{ width:100%!important;max-width:100%!important;min-width:0!important; padding:0!important;margin:0!important;border:0!important;background:transparent!important; } #main-content .pati-streak-goal-grid{ width:100%!important;min-width:0!important;display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important; } #main-content .pati-streak-goal-card{ display:flex!important;flex-direction:column!important;gap:8px!important; width:100%!important;min-width:0!important;margin:0!important;padding:15px!important; overflow:hidden!important;border:1px solid #e5e7eb!important; border-radius:18px!important;background:#fff!important;color:#181a20!important; } #main-content .pati-streak-goal-card.is-selected{border:2px solid #eda942!important;padding:14px!important} #main-content .pati-streak-goal-top{ display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important; gap:8px!important;align-items:center!important;min-width:0!important; } #main-content .pati-streak-goal-coins{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important} #main-content .pati-streak-goal-card>strong, #main-content .pati-streak-goal-card>small{overflow-wrap:anywhere!important} #main-content .pati-streak-goal-footer{ display:flex!important;flex-direction:column!important;align-items:stretch!important; gap:8px!important;width:100%!important;min-width:0!important;margin-top:auto!important; } #main-content .pati-streak-goal-footer>span{min-width:0!important;overflow-wrap:anywhere!important} #main-content .pati-streak-goal-footer button{ display:block!important;width:100%!important;max-width:100%!important;min-width:0!important; padding:10px 8px!important;min-height:44px!important;white-space:normal!important; overflow-wrap:anywhere!important; } #main-content .pati-streak-sixty{ display:flex!important;flex-direction:column!important;gap:10px!important; width:100%!important;max-width:100%!important;min-width:0!important; margin-top:14px!important;padding:17px!important; background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px!important; overflow:hidden!important; } #main-content .pati-streak-sixty :is(h2,p,small,strong,span){max-width:100%!important;overflow-wrap:anywhere!important} #main-content .pati-streak-sixty button{ min-height:44px!important;padding:11px 12px!important;max-width:100%!important; white-space:normal!important;border-radius:12px!important;background:#181a20!important;color:#fff!important; } #main-content .pati-streak-sixty button:disabled{background:#eceef2!important;color:#656974!important} #main-content .pati-streak-rules{overflow-wrap:anywhere!important;line-height:1.55!important} #main-content .pati-weekly-board,#main-content .pati-weekly-section,#main-content .pati-weekly-leaders{ max-width:100%!important;min-width:0!important;width:100%!important; } @media(max-width:640px){ #main-content .pati-streaks-page{ padding:12px 12px calc(98px + env(safe-area-inset-bottom,0px))!important;gap:13px!important; } #main-content .pati-streak-goal-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important} #main-content .pati-streak-goal-card{padding:15px!important} #main-content .pati-streak-goal-card.is-selected{padding:14px!important} #main-content .pati-streak-goal-footer{ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(112px,auto)!important; align-items:center!important;gap:9px!important; } #main-content .pati-streak-goal-footer button{min-width:112px!important} } @media(max-width:370px){ #main-content .pati-streaks-page{padding-inline:9px!important} #main-content .pati-streak-goal-footer{display:flex!important;flex-direction:column!important} #main-content .pati-streak-goal-footer button{width:100%!important} #main-content .pati-streak-page-card{padding:16px 8px!important} #main-content .pati-streak-page-card .pati-streak-week{gap:1px!important} #main-content .pati-streak-page-card .pati-streak-day-circle{width:clamp(25px,7.8vw,32px)!important;height:clamp(25px,7.8vw,32px)!important} } /* Original Patiyiz flame with one-time confetti motion and a real Tamam action. */ .pati-streak-overlay{z-index:240000!important;backdrop-filter:blur(5px)!important} .pati-streak-dialog{ width:min(410px,100%)!important;max-height:calc(100dvh - 28px)!important; padding:24px 20px 22px!important;background:#fff!important; color:#181a20!important;border-color:#ffdfae!important; } .pati-streak-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0} .pati-streak-confetti i{ position:absolute;top:-12px;left:calc(8% + (var(--i) * 7%)); width:8px;height:13px;border-radius:3px;background:#f4ac40; opacity:0;transform:translateY(0) rotate(0); } .pati-streak-confetti i:nth-child(3n){background:#7dbda6} .pati-streak-confetti i:nth-child(3n + 1){background:#ff8e6f} .pati-streak-overlay.is-visible .pati-streak-confetti i{ animation:pati-confetti-fall 1.55s ease-out calc(var(--i) * 45ms) 1 both; } @keyframes pati-confetti-fall{ 0%{opacity:0;transform:translateY(-10px) rotate(0) scale(.6)} 20%{opacity:1} 100%{opacity:0;transform:translateY(240px) rotate(260deg)} } .pati-streak-overlay .pati-streak-done{ position:relative!important;top:auto!important;right:auto!important;flex:0 0 auto!important; display:block!important;width:100%!important;height:auto!important;min-height:52px!important; margin:19px 0 0!important;padding:12px 20px!important; background:#191b20!important;color:#fff!important;border:0!important; border-radius:15px!important;font-size:16px!important;font-weight:850!important;line-height:1.3!important; } .pati-streak-overlay .pati-streak-done:focus-visible{outline:3px solid #e68c2c!important;outline-offset:3px!important} .pati-streak-overlay .pati-streak-sparkles{position:relative;z-index:1} .pati-streak-overlay :is(.pati-streak-count,h2,.pati-streak-message,.pati-streak-week,.pati-streak-best){ position:relative;z-index:1;color:#1b1d22!important; } @media(max-height:630px){ .pati-streak-dialog{padding:13px!important} .pati-streak-sparkles{height:112px!important;width:112px!important} .pati-streak-count{font-size:55px!important} } @media(prefers-reduced-motion:reduce){ .pati-streak-overlay.is-visible .pati-streak-confetti i{animation:none!important;opacity:0!important} } /* patiyiz-dm-longpress-20261101.css */ /* Instagram-style message long-press overlay: dark floating reactions, message, actions. */ .pati-dm-context-menu{ position:fixed!important;inset:0!important;box-sizing:border-box!important; display:flex!important;flex-direction:column!important;align-items:flex-end!important; width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0 14px!important;border:0!important; overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important; color:#fff!important;z-index:999999!important;overscroll-behavior:contain!important; } .pati-dm-context-menu:not([open]){display:none!important} .pati-dm-context-menu::backdrop{ background:rgba(14,15,19,.73)!important; -webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important; } .pati-dm-context-content{ box-sizing:border-box!important;display:flex!important;flex-direction:column!important;gap:12px!important; flex:0 0 auto!important;width:min(380px,100%)!important;max-width:100%!important;min-width:0!important; max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;overflow-x:hidden!important; margin-top:clamp(12px,var(--pati-dm-context-top,10vh),calc(100dvh - 540px))!important; margin-bottom:14px!important;padding:0!important;border:0!important;border-radius:0!important; box-shadow:none!important;background:transparent!important;color:#fff!important; scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important; } .pati-dm-context-content::-webkit-scrollbar{display:none} .pati-dm-context-reactions{ display:flex!important;align-items:center!important;justify-content:space-between!important; width:100%!important;min-height:64px!important;padding:7px 10px!important;margin:0!important;gap:2px!important; border-radius:999px!important;background:#181b1e!important;border:1px solid rgba(255,255,255,.04)!important; box-shadow:0 12px 38px rgba(0,0,0,.26)!important; } .pati-dm-context-reactions button{ flex:1 1 auto!important;min-width:0!important;max-width:48px!important; height:48px!important;min-height:48px!important;padding:0!important; border:0!important;border-radius:50%!important;background:transparent!important; color:#fff!important;font-size:27px!important;line-height:1!important; display:grid!important;place-items:center!important;touch-action:manipulation!important; transition:transform .15s ease!important; } .pati-dm-context-reactions button:active{transform:scale(1.22)!important} .pati-dm-context-reactions .pati-dm-reaction-more{color:#adb3ba!important;font-size:39px!important;font-weight:300!important} .pati-dm-context-preview{ display:flex!important;flex-direction:column!important;align-self:flex-start!important; width:fit-content!important;max-width:93%!important;min-width:0!important; margin:2px 0 4px!important;padding:12px 14px!important;gap:7px!important; border-radius:17px 17px 17px 4px!important;background:#3e4045!important; border:1px solid rgba(255,255,255,.08)!important;color:#fff!important; font-size:15px!important;line-height:1.5!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important; } .pati-dm-context-preview.is-mine{ align-self:flex-end!important;background:#6845f4!important;border:0!important; border-radius:17px 17px 5px 17px!important; } .pati-dm-context-preview span{display:block!important;max-height:110px!important;overflow:hidden!important} .pati-dm-context-preview small{display:block!important;align-self:flex-end!important;color:#d2d2d8!important;opacity:.83!important;font-size:11px!important;font-weight:500!important} .pati-dm-context-actions{ display:flex!important;flex-direction:column!important;gap:0!important;align-self:flex-end!important; width:min(315px,88%)!important;min-width:0!important;margin:0!important; padding:8px 0!important;overflow:hidden!important; background:rgba(72,73,78,.96)!important;border:1px solid rgba(255,255,255,.1)!important; color:#fff!important;border-radius:21px!important;box-shadow:0 18px 65px rgba(0,0,0,.32)!important; -webkit-backdrop-filter:blur(25px)!important;backdrop-filter:blur(25px)!important; } .pati-dm-context-actions[hidden]{display:none!important} .pati-dm-context-item{ box-sizing:border-box!important;display:flex!important;flex-direction:row!important; align-items:center!important;justify-content:flex-start!important;gap:14px!important; width:100%!important;min-height:60px!important;padding:11px 20px!important; border:0!important;border-radius:0!important;background:transparent!important; color:#f8f8fa!important;text-align:left!important;font-size:17px!important;font-weight:500!important; line-height:1.3!important;box-shadow:none!important; } .pati-dm-context-item:hover,.pati-dm-context-item:active{background:rgba(255,255,255,.085)!important} .pati-dm-context-symbol{flex:0 0 28px!important;width:28px!important;display:grid!important;place-items:center!important;color:inherit!important} .pati-dm-context-svg{width:25px!important;height:25px!important;stroke:currentColor!important;fill:none!important} .pati-dm-context-chevron{margin-left:auto!important;color:#e1e1e6!important;font-size:28px!important;font-weight:300!important} .pati-dm-context-item.is-danger{color:#ff6484!important} .pati-dm-context-item.is-danger .pati-dm-context-symbol{color:#ff6484!important} .pati-dm-context-menu button:focus-visible{outline:2px solid #dfe1f1!important;outline-offset:-4px!important} @media(max-width:440px){ .pati-dm-context-menu{padding:0 12px!important} .pati-dm-context-content{width:100%!important;gap:10px!important} .pati-dm-context-reactions{padding:7px 6px!important;min-height:58px!important} .pati-dm-context-reactions button{font-size:25px!important;max-width:45px!important;height:44px!important;min-height:44px!important} .pati-dm-context-reactions .pati-dm-reaction-more{font-size:35px!important} .pati-dm-context-actions{width:min(310px,83%)!important} .pati-dm-context-item{min-height:56px!important;font-size:16px!important;padding:9px 16px!important} } @media(max-height:690px){ .pati-dm-context-content{margin-top:10px!important;gap:8px!important} .pati-dm-context-actions{padding:5px 0!important} .pati-dm-context-item{min-height:48px!important} .pati-dm-context-reactions{min-height:52px!important} .pati-dm-context-reactions button{height:40px!important;min-height:40px!important} } @media(prefers-reduced-motion:reduce){.pati-dm-context-reactions button{transition:none!important}} /* patiyiz-101-series-20261101.css */ /* 101 Education Series: general social platform, mobile first, not pet-centric. */ #main-content .pati-edu-path-home, #main-content .pati-edu-path-list, #main-content .edu-path-detail{ width:100%!important;min-width:0!important;max-width:840px!important; margin:0 auto!important;box-sizing:border-box!important; padding:16px 14px calc(95px + env(safe-area-inset-bottom,0px))!important; color:#1c1d22!important; } #main-content .pati-ref-academy-header{ margin:0 0 20px!important;padding:22px 20px!important; background:#191b21!important;color:#fff!important;border-radius:22px!important; box-shadow:none!important;border:1px solid #282b32!important; } #main-content .pati-ref-academy-header span{color:#c5c8d0!important;font-size:11px!important;letter-spacing:.08em!important} #main-content .pati-ref-academy-header h1{color:#fff!important;font-size:27px!important;line-height:1.15!important;letter-spacing:-.035em!important;margin:9px 0!important} #main-content .pati-ref-academy-header p{color:#d4d5dc!important;font-size:13px!important} #main-content .pati-ref-academy-topics{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:11px!important;width:100%!important;min-width:0!important; } #main-content .pati-ref-academy-topic{ display:flex!important;align-items:center!important;justify-content:space-between!important; box-sizing:border-box!important;width:100%!important;min-width:0!important; min-height:125px!important;padding:14px!important; background:#fff!important;color:#191b21!important; border:1px solid #e6e7eb!important;border-radius:18px!important; box-shadow:none!important;transform:none!important; } #main-content .pati-ref-academy-topic .pati-ref-academy-topic-copy{ display:flex!important;flex:1 1 auto!important;min-width:0!important; flex-direction:column!important;align-items:flex-start!important;gap:5px!important; overflow-wrap:anywhere!important; } #main-content .pati-ref-academy-topic strong{ color:#17191e!important;font-size:15px!important;line-height:1.3!important; font-weight:800!important;overflow-wrap:anywhere!important; } #main-content .pati-ref-academy-topic small{color:#727781!important;font-size:12px!important} #main-content .pati-ref-academy-topic .pati-topic-open{ color:#484d58!important;font-size:11px!important;font-weight:730!important; } #main-content .pati-ref-academy-topic .pati-academy-topic-art-icon{ flex:0 0 auto!important;display:grid!important;place-items:center!important; width:47px!important;height:47px!important;margin:0 0 0 7px!important; border-radius:13px!important;background:#f1f2f5!important; font-size:25px!important;line-height:1!important; } #main-content .pati-edu-path-topic-head, #main-content .pati-academy-total-progress, #main-content .pati-edu-path-progress{ box-sizing:border-box!important;max-width:100%!important;min-width:0!important; border-radius:18px!important; } #main-content .pati-edu-path-topic-head{background:#f5f6f8!important;color:#17191d!important} #main-content .pati-edu-path-topic-head h1{color:#191b20!important;font-size:25px!important;overflow-wrap:anywhere!important} #main-content .pati-edu-path-topic-icon .pati-academy-topic-art-icon{font-size:30px!important} #main-content .pati-edu-path-items{width:100%!important;max-width:100%!important;min-width:0!important} #main-content .pati-edu-path-item{min-width:0!important;max-width:100%!important} #main-content .pati-edu-path-copy{min-width:0!important;overflow-wrap:anywhere!important} #main-content .pati-edu-notice{color:#727680!important;line-height:1.55!important} @media(max-width:560px){ #main-content .pati-edu-path-home,#main-content .pati-edu-path-list,#main-content .edu-path-detail{ padding:12px 12px calc(95px + env(safe-area-inset-bottom,0px))!important; } #main-content .pati-ref-academy-header{padding:20px 17px!important;border-radius:19px!important} #main-content .pati-ref-academy-header h1{font-size:23px!important} #main-content .pati-ref-academy-topics{grid-template-columns:minmax(0,1fr)!important;gap:9px!important} #main-content .pati-ref-academy-topic{min-height:91px!important;padding:13px 15px!important} #main-content .pati-ref-academy-topic strong{font-size:15px!important} } @media(prefers-reduced-motion:reduce){#main-content .pati-ref-academy-topic{transition:none!important}} /* True full-screen 101 learning environment on phone and desktop. The application's header/navigation stay behind the learning view. */ #app-root:not(.hidden) #main-content>.pati-edu{ position:fixed!important; inset:0!important; width:100vw!important;height:100dvh!important; min-width:0!important;max-width:none!important; z-index:25000!important; overflow-y:auto!important;overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; margin:0!important;border:0!important;border-radius:0!important; background:#f7f7f9!important; padding:max(18px,env(safe-area-inset-top,0px)) max(16px,calc((100vw - 960px) / 2)) max(32px,env(safe-area-inset-bottom,0px))!important; box-sizing:border-box!important; } #app-root:not(.hidden) #main-content>.pati-edu *{box-sizing:border-box!important} #main-content .pati-edu-fullscreen-top{ display:flex!important;align-items:center!important;justify-content:space-between!important; gap:12px!important;min-height:48px!important;margin:0 0 12px!important; } #main-content .pati-edu-fullscreen-top button{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-height:44px!important;padding:10px 15px!important; color:#17191e!important;background:#fff!important; border:1px solid #e3e5ea!important;border-radius:13px!important; font-size:14px!important;font-weight:790!important; } #main-content .pati-edu-fullscreen-top span{ color:#343740!important;font-weight:760!important;font-size:15px!important; } #main-content .pati-edu-duration-guide{ display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important; margin:0 0 24px!important;padding:17px 18px!important; background:#f0f2f5!important;border:1px solid #e0e3e9!important; border-radius:17px!important;color:#22252a!important; } #main-content .pati-edu-duration-guide strong{ color:#17191e!important;font-size:16px!important;font-weight:850!important; } #main-content .pati-edu-duration-guide>span{ color:#343940!important;font-size:14px!important;line-height:1.45!important; } #main-content .pati-edu-duration-guide small{ color:#717680!important;font-size:12px!important;line-height:1.5!important; margin-top:4px!important; } #main-content .pati-edu-lesson-body .pati-edu-step{ display:flex!important;flex-direction:column!important;gap:10px!important; padding:19px!important;margin:0 0 13px!important; border:1px solid #e4e6eb!important;border-radius:17px!important; background:#fff!important;color:#25272d!important; } #main-content .pati-edu-step p{ margin:0!important;max-width:75ch!important;font-size:15px!important; line-height:1.75!important;color:#34383f!important;white-space:pre-line!important; } #main-content .pati-edu-lesson-body .pati-edu-step>b{ display:grid!important;place-items:center!important;width:33px!important;height:33px!important; border-radius:11px!important;background:#eef0f4!important;color:#191b20!important; font-size:13px!important; } #main-content .pati-edu-lesson-head h1{font-size:clamp(24px,4vw,34px)!important;line-height:1.24!important} #main-content .pati-edu-quiz{ padding:19px!important;margin-top:22px!important; border:1px solid #e2e5ea!important;border-radius:18px!important; background:#fff!important; } #main-content .edu-v2-lesson-nav button{min-height:46px!important} @media(max-width:740px){ #app-root:not(.hidden) #main-content>.pati-edu{ inset:0!important;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px calc(env(safe-area-inset-bottom,0px) + 28px)!important; height:100dvh!important;width:100vw!important; } #main-content .pati-ref-academy-topics{grid-template-columns:minmax(0,1fr)!important} #main-content .pati-edu-duration-guide{padding:15px!important} #main-content .pati-edu-lesson-body .pati-edu-step{padding:16px!important} #main-content .pati-edu-step p{font-size:14px!important;line-height:1.7!important} } /* patiyiz-lesson-workshop-20261101.css */ /* Full-viewport, mobile-first guided reading; overrides legacy bounded education layout. */ body:has(#main-content .edu-path-detail) {overscroll-behavior:none} #main-content .edu-path-detail{ position:fixed!important;inset:0!important;z-index:100500!important; display:block!important;overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; box-sizing:border-box!important;width:100vw!important;min-width:0!important;max-width:none!important; height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important; margin:0!important;padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,calc((100vw - 760px)/2)) calc(48px + env(safe-area-inset-bottom,0px))!important; background:#fcfcfd!important;color:#181a1f!important;border-radius:0!important; } #main-content .edu-path-detail .pati-edu-back{ position:sticky!important;top:0!important;z-index:3!important; display:inline-flex!important;align-items:center!important; min-height:42px!important;padding:10px 15px!important;margin:0 0 14px!important; background:#f0f1f3!important;color:#20232a!important;border:1px solid #e2e3e8!important; border-radius:999px!important;font-weight:700!important;font-size:13px!important; } #main-content .edu-path-detail .edu-v2-lesson-meta{ display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px!important; margin:0 0 12px!important;font-size:12px!important;color:#60646e!important; } #main-content .edu-path-detail .edu-v2-lesson-meta span{ border-radius:999px!important;padding:6px 10px!important;background:#f2f3f5!important; } #main-content .edu-path-detail .pati-edu-lesson-head{ display:flex!important;align-items:flex-start!important;gap:13px!important; padding:24px 20px!important;margin:18px 0 16px!important;background:#191b21!important; border:0!important;border-radius:22px!important;color:white!important; } #main-content .edu-path-detail .pati-edu-lesson-head>span{ width:44px!important;height:44px!important;flex:0 0 44px!important;display:grid!important;place-items:center!important; border-radius:13px!important;background:#34363f!important;font-size:26px!important; } #main-content .edu-path-detail .pati-edu-lesson-head h1{ color:white!important;font-size:clamp(22px,5.2vw,32px)!important;line-height:1.2!important; letter-spacing:-.035em!important;overflow-wrap:anywhere!important;margin:8px 0!important; } #main-content .edu-path-detail .pati-edu-lesson-head p{ color:#d2d4da!important;line-height:1.65!important;font-size:14px!important; } #main-content .edu-path-detail .pati-edu-lesson-head small{color:#bfc2cb!important;font-size:12px!important} #main-content .edu-path-detail .pati-edu-lesson-body{ width:100%!important;min-width:0!important;margin:0!important;padding:0!important; background:transparent!important;border:0!important;box-shadow:none!important; } #main-content .pati-edu-workshop-summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px; border:1px solid #e8e9ed;border-radius:20px;padding:18px;background:#fff; } #main-content .pati-edu-workshop-summary h2{font-size:18px!important;margin:7px 0!important;color:#181a20!important} #main-content .pati-edu-workshop-summary p{font-size:13px!important;line-height:1.55!important;color:#636873!important;margin:0!important} #main-content .pati-edu-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#777c84} #main-content .pati-edu-study-clock{ display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center; border-radius:15px;background:#f0f1f3;min-width:91px;min-height:77px;padding:9px; } #main-content .pati-edu-study-clock strong{font-size:22px!important;color:#17191e!important;font-variant-numeric:tabular-nums} #main-content .pati-edu-study-clock small{font-size:10px!important;color:#737780!important} #main-content .pati-edu-time-track{height:7px!important;width:100%;overflow:hidden;border-radius:999px;background:#e8e9ed;margin:12px 0 24px} #main-content .pati-edu-time-track span{height:100%;display:block;background:#1d2027;border-radius:inherit;transition:width .3s} #main-content .pati-edu-chapter{ margin:0 0 14px!important;padding:23px 20px!important;border:1px solid #e8e9ed!important; background:#fff!important;border-radius:20px!important;box-shadow:none!important; } #main-content .pati-edu-chapter-line{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;letter-spacing:.03em;color:#757a83} #main-content .pati-edu-chapter h2{font-size:20px!important;color:#1a1c22!important;line-height:1.35!important;letter-spacing:-.02em;margin:13px 0 16px!important} #main-content .pati-edu-chapter>p{color:#3c424c!important;font-size:15px!important;line-height:1.85!important;margin:0 0 15px!important;overflow-wrap:break-word!important} #main-content .pati-edu-practice{padding:17px!important;border-radius:15px!important;background:#f5f6f8!important;border-left:3px solid #20232b!important;margin-top:18px!important} #main-content .pati-edu-practice strong{display:block;color:#202329!important;font-size:11px!important;letter-spacing:.08em;margin-bottom:8px!important} #main-content .pati-edu-practice p{margin:0!important;font-size:14px!important;line-height:1.7!important;color:#454b55!important} #main-content .pati-edu-study-note{ padding:14px 16px;margin:0 0 20px;border-radius:14px;background:#f0f1f4; color:#4e535d;font-size:13px;line-height:1.6; } #main-content .edu-path-detail .pati-edu-quiz{ margin:15px 0!important;padding:22px 18px!important;background:#fff!important; border:1px solid #e8e9ed!important;border-radius:20px!important; } #main-content .edu-path-detail .pati-edu-quiz.is-time-locked>button{opacity:.58!important;cursor:not-allowed!important} #main-content .edu-path-detail .pati-edu-quiz button{min-height:50px!important} #main-content .edu-path-detail .edu-v2-lesson-nav{display:flex;flex-wrap:wrap;gap:9px!important;padding:14px 0!important} #main-content .edu-path-detail .edu-v2-lesson-nav button{min-height:48px!important;border-radius:12px!important} #main-content .edu-path-detail .pati-edu-notice{font-size:12px!important;line-height:1.6!important;color:#777b83!important} @media(max-width:540px){ #main-content .edu-path-detail{padding:calc(10px + env(safe-area-inset-top,0px)) 13px calc(35px + env(safe-area-inset-bottom,0px))!important} #main-content .edu-path-detail .pati-edu-back{min-height:42px!important} #main-content .edu-path-detail .pati-edu-lesson-head{padding:21px 17px!important;border-radius:20px!important} #main-content .pati-edu-workshop-summary{padding:15px;gap:8px} #main-content .pati-edu-workshop-summary h2{font-size:16px!important} #main-content .pati-edu-study-clock{min-width:76px;padding:7px} #main-content .pati-edu-study-clock strong{font-size:18px!important} #main-content .pati-edu-chapter{padding:20px 17px!important} #main-content .pati-edu-chapter>p{font-size:14.5px!important;line-height:1.82!important} } @media(prefers-reduced-motion:reduce){#main-content .pati-edu-time-track span{transition:none}} /* patiyiz-photo-filters-right-menu-20261101.css */ /* Mobile-first real photo editing controls + right-edge menu drawer. */ .pati-media-edit-entry:not([hidden]){ display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important; margin:10px 0 4px!important;padding:11px 12px!important;border:1px solid #e6e7eb!important; background:#fbfbfc!important;border-radius:14px!important; } .pati-media-edit-entry button{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-height:44px!important;border:0!important;border-radius:12px!important; background:#1b1d22!important;color:white!important;padding:10px 15px!important; font-size:13px!important;font-weight:800!important;cursor:pointer!important; } .pati-media-edit-entry small{color:#6b707a!important;font-size:11px!important;line-height:1.45!important} .pati-crop-color-panel{ flex:0 0 auto!important;display:flex!important;flex-direction:column!important;gap:10px!important; min-width:0!important;width:100%!important;border-radius:16px!important;padding:12px!important; background:#fff!important;border:1px solid #e4e5e9!important; } .pati-crop-color-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important} .pati-crop-color-heading strong{color:#1b1c20!important;font-size:14px!important;font-weight:800!important} .pati-crop-color-heading button{border:0!important;background:#f0f1f3!important;color:#34373e!important;border-radius:999px!important;padding:8px 12px!important;font-weight:750!important;font-size:12px!important;min-height:34px!important} .pati-crop-filter-strip{ display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important; gap:8px!important;padding:3px 1px 8px!important;min-height:84px!important; scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important; -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important; } .pati-crop-filter-strip::-webkit-scrollbar{display:none} .pati-crop-filter-tile{ flex:0 0 65px!important;width:65px!important;min-width:65px!important;min-height:76px!important; border:1px solid #e7e8ed!important;background:#fafafb!important;border-radius:13px!important; display:flex!important;flex-direction:column!important;align-items:center!important; gap:6px!important;padding:8px 3px!important;color:#41444d!important; scroll-snap-align:start!important;box-shadow:none!important; } .pati-crop-filter-tile.active{ border:2px solid #1e2025!important;background:#f0f1f3!important;color:#17191e!important; } .pati-crop-filter-swatch{ width:37px!important;height:37px!important;min-height:37px!important;border-radius:12px!important; background:linear-gradient(135deg,#fcfcfc 5%,var(--pati-filter-tint,#c4c7ce) 75%)!important; box-shadow:inset 0 0 0 1px #0001!important; } .pati-crop-filter-tile small{font-size:10px!important;font-weight:750!important;line-height:1.2!important;text-align:center!important;color:inherit!important} .pati-crop-adjustments{display:grid!important;grid-template-columns:1fr auto!important;gap:5px 8px!important;align-items:center!important} .pati-crop-adjustments label{ grid-column:1/-1!important;display:flex!important;justify-content:space-between!important; font-size:13px!important;font-weight:750!important;color:#31343b!important;line-height:1.4!important; } .pati-crop-adjustments output{font-size:12px!important;font-variant-numeric:tabular-nums!important;color:#666c75!important} .pati-crop-adjustments input[type="range"]{ grid-column:1/-1!important;width:100%!important;min-width:0!important;height:28px!important; accent-color:#23262e!important;touch-action:pan-x!important;cursor:pointer!important; } .pati-crop-adjustments input[type="range"]+label{margin-top:3px!important} .pati-full-crop-controls{gap:10px!important;max-height:min(49dvh,465px)!important} .pati-full-crop-dialog .pati-full-crop-stage canvas{filter:none!important} /* Single unobtrusive, draggable handle; always keep feed controls accessible. */ #pati-right-menu-handle{display:none!important} @media(max-width:740px){ #app-root:not(.hidden) #pati-right-menu-handle{ display:none!important;position:fixed!important;right:-12px!important;top:45dvh!important; width:47px!important;height:47px!important;min-height:47px!important; z-index:8990!important;border-radius:50%!important;border:1px solid #3a3b42!important; background:#1b1d23!important;color:#fff!important;box-shadow:0 4px 16px #0003!important; font-size:31px!important;font-weight:400!important;line-height:1!important; align-items:center!important;justify-content:flex-start!important;padding:0 0 3px 10px!important; touch-action:pan-y!important;cursor:pointer!important; } html[data-pati-view="home"] #app-root:not(.hidden) #pati-right-menu-handle{display:flex!important} .pati-crop-color-panel{padding:10px!important;border-radius:15px!important} .pati-crop-filter-strip{gap:7px!important} .pati-media-edit-entry{margin-top:8px!important} } dialog.pati-right-menu-drawer{ position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important; max-width:none!important;max-height:none!important;margin:0!important;padding:0!important; border:0!important;border-radius:0!important;background:transparent!important; overflow:hidden!important;box-sizing:border-box!important;z-index:2147483001!important; color:#181a1f!important; } dialog.pati-right-menu-drawer:not([open]){display:none!important} dialog.pati-right-menu-drawer::backdrop{background:rgba(10,11,16,.48)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important} .pati-right-menu-panel{ position:absolute!important;top:0!important;right:0!important;bottom:0!important; display:flex!important;flex-direction:column!important; width:min(400px,90vw)!important;max-width:100%!important;height:100dvh!important; padding:0!important;background:#fff!important;color:#1e2024!important; border-radius:23px 0 0 23px!important;box-shadow:-15px 0 65px rgba(0,0,0,.24)!important; overflow:hidden!important;overscroll-behavior:contain!important;animation:patiDrawerIn .2s ease-out both!important; } @keyframes patiDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}} .pati-right-menu-head{ display:flex!important;align-items:center!important;justify-content:space-between!important; min-height:77px!important;padding:calc(15px + env(safe-area-inset-top,0px)) 20px 12px!important; border-bottom:1px solid #eceef1!important;background:#fff!important; box-sizing:content-box!important;flex:0 0 auto!important; } .pati-right-menu-head small{display:block!important;color:#8a8e96!important;letter-spacing:.15em!important;font-size:10px!important;font-weight:800!important} .pati-right-menu-head h2{margin:5px 0 0!important;color:#17191e!important;font-size:24px!important;letter-spacing:-.04em!important} .pati-right-menu-head button{ width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; background:#f1f2f4!important;color:#262932!important;border:0!important; border-radius:50%!important;display:grid!important;place-items:center!important; font-size:28px!important; } .pati-right-menu-content{ overflow-y:auto!important;overflow-x:hidden!important;flex:1 1 auto!important;min-height:0!important; overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important; padding:8px 15px calc(25px + env(safe-area-inset-bottom,0px))!important; } .pati-right-menu-content .pati-features-list{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;box-shadow:none!important} .pati-right-menu-content .pati-feature-group{margin:12px 0!important;max-width:100%!important} .pati-right-menu-content .pati-mobile-menu-item{ width:100%!important;min-height:50px!important;text-align:left!important;box-sizing:border-box!important; } .pati-right-menu-content .pati-feature-intro{font-size:12px!important;color:#787c84!important} @media(min-width:741px){dialog.pati-right-menu-drawer{display:none!important}} @media(prefers-reduced-motion:reduce){.pati-right-menu-panel{animation:none!important}} /* November 1 correction: button-only FULLSCREEN menu. No side drawer animation. */ dialog.pati-right-menu-drawer[open]{ display:block!important;position:fixed!important;inset:0!important; width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important; overflow:hidden!important;padding:0!important;margin:0!important; background:#fff!important;border:0!important;border-radius:0!important; } dialog.pati-right-menu-drawer::backdrop{ background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } dialog.pati-right-menu-drawer .pati-right-menu-panel{ top:0!important;bottom:0!important;left:0!important;right:0!important; width:100vw!important;max-width:100vw!important;height:100dvh!important; margin:0!important;padding:0!important;border:0!important;border-radius:0!important; background:#fff!important;box-shadow:none!important; animation:none!important;transform:none!important;transition:none!important; } dialog.pati-right-menu-drawer .pati-right-menu-head{ padding-top:max(18px,env(safe-area-inset-top,0px))!important; min-height:52px!important; } dialog.pati-right-menu-drawer .pati-right-menu-content{ width:100%!important;max-width:760px!important;margin:0 auto!important; padding:14px 16px calc(32px + env(safe-area-inset-bottom,0px))!important; } @media(max-width:740px){ #pati-header-coins .pati-balance-title,#pati-desktop-coins .pati-balance-title{ font-size:11px!important;font-weight:700!important;color:inherit!important;line-height:1.2!important; } #pati-profile-balance{font-variant-numeric:tabular-nums!important} #pati-right-menu-handle{transition:none!important;animation:none!important} } /* patiyiz-media-store-refresh-20261101.css */ #post-form #pati-post-media-gallery:not(.has-media){min-height:150px!important;max-height:240px!important;aspect-ratio:auto!important;} /* Patiyiz v20261101 · consistent media editing + redesigned affordable points shop. */ #post-form #pati-post-media-gallery.has-media{ width:100%!important;max-width:min(100%,450px)!important; margin-inline:auto!important;border-radius:16px!important; aspect-ratio:var(--pati-compose-ratio,4/5)!important; overflow:hidden!important;position:relative!important; background:#15161a!important;display:flex!important;align-items:center!important;justify-content:center!important; } #post-form #pati-post-media-gallery[data-ratio="4:5"]{--pati-compose-ratio:4 / 5} #post-form #pati-post-media-gallery[data-ratio="1:1"]{--pati-compose-ratio:1 / 1} #post-form #pati-post-media-gallery[data-ratio="1.91:1"]{--pati-compose-ratio:1.91 / 1} #post-form #pati-post-media-gallery[data-ratio="9:16"]{ --pati-compose-ratio:9 / 16;max-width:min(100%,295px)!important;max-height:min(65dvh,640px)!important } #post-form #pati-post-media-gallery.has-media :is(img,video){ display:block!important;width:100%!important;height:100%!important;max-height:none!important; object-fit:cover!important;object-position:center!important;border-radius:0!important; } #post-form #pati-post-media-gallery .pati-media-count{ position:absolute!important;top:12px!important;right:12px!important; background:rgba(20,21,25,.76)!important;color:#fff!important;padding:6px 11px!important;border-radius:999px!important; font-size:11px!important;font-weight:800!important } #main-content .pati-feed-card .pati-carousel, #main-content .pati-feed-card .pati-video-frame{ width:100%!important;aspect-ratio:var(--pati-feed-aspect,4 / 5)!important; max-height:min(78dvh,800px)!important;min-height:0!important;overflow:hidden!important; background:#141519!important;border-radius:0!important; } #main-content .pati-feed-card .pati-carousel .pati-carousel-track, #main-content .pati-feed-card .pati-carousel .pati-carousel-slide{ height:100%!important;min-height:0!important } #main-content .pati-feed-card .pati-carousel-slide img, #main-content .pati-feed-card .pati-video-frame video.pati-post-video{ width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important; object-fit:cover!important;object-position:center!important;display:block!important;background:transparent!important } #main-content .pati-feed-card.pati-feed-reel-card .pati-video-frame{ aspect-ratio:9/16!important;max-height:min(82dvh,900px)!important } #main-content .pati-reels-viewport .pati-reel-item video, #main-content .pati-reels-viewport .pati-reel-video{ width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important; } #story-overlay :is(img,video):not(.avatar):not(.pati-story-avatar){ object-position:center!important; } #post-form .pati-media-edit-entry:not([hidden]){display:flex!important} #post-form .pati-media-edit-entry button{font-size:14px!important} #pati-full-crop-dialog .pati-crop-ratios{scroll-snap-type:x proximity!important} #pati-full-crop-dialog .pati-crop-ratios button{min-height:44px!important;white-space:nowrap!important} #pati-full-crop-dialog .pati-full-crop-stage{min-height:120px!important} #pati-full-crop-dialog .pati-full-crop-stage canvas{max-width:100%!important;max-height:100%!important;object-fit:contain!important} #main-content .pati-store-page{ width:min(100%,1140px)!important;max-width:1140px!important;margin:0 auto!important; padding:20px clamp(12px,3.5vw,30px) 65px!important;background:#f8f9fb!important; color:#181a20!important;box-sizing:border-box!important } #main-content .pati-store-hero{ border-radius:25px!important;padding:clamp(22px,4.5vw,38px)!important; background:linear-gradient(135deg,#171a22 0%,#282d3b 100%)!important;color:white!important; display:flex!important;align-items:flex-start!important;justify-content:space-between!important; gap:20px!important;box-shadow:none!important;margin-bottom:26px!important; } #main-content .pati-store-eyebrow{font-size:11px!important;letter-spacing:.16em!important;font-weight:800!important;color:#bdc6d4!important} #main-content .pati-store-hero-copy h1{margin:10px 0!important;font-size:clamp(29px,5vw,40px)!important;line-height:1.12!important;letter-spacing:-.04em!important;color:#fff!important} #main-content .pati-store-hero-copy p{font-size:14px!important;line-height:1.7!important;color:#d1d5df!important;max-width:45ch!important} #main-content .pati-store-hero-tip{display:inline-block!important;margin-top:10px!important;color:#dce1ec!important;font-size:11px!important;font-weight:700!important} #main-content .pati-store-balance{ flex:0 0 auto!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important; min-width:138px!important;min-height:110px!important;border:1px solid #ffffff3b!important; border-radius:19px!important;padding:17px!important;background:#ffffff13!important;color:#fff!important; text-align:left!important;box-shadow:none!important } #main-content .pati-store-balance small{font-size:10px!important;letter-spacing:.09em!important;color:#cbd2df!important} #main-content .pati-store-balance strong{color:#fff!important;font-size:31px!important;line-height:1.3!important;font-variant-numeric:tabular-nums!important} #main-content .pati-store-balance span{font-size:12px!important;font-weight:750!important;color:#e0e6f0!important} #main-content .pati-store-section,#main-content .pati-store-history{margin-top:20px!important} #main-content .pati-store-section-head{ display:flex!important;align-items:end!important;justify-content:space-between!important;gap:12px!important; margin:0 0 15px!important;color:#20232a!important } #main-content .pati-store-section-head small{font-size:10px!important;letter-spacing:.12em!important;color:#818794!important;font-weight:800!important} #main-content .pati-store-section-head h2{font-size:22px!important;letter-spacing:-.025em!important;margin:4px 0 0!important;color:#1d2028!important} #main-content .pati-store-section-head>span{font-size:12px!important;color:#747982!important;font-weight:800!important} #main-content .pati-store-filterbar{ display:flex!important;gap:8px!important;padding:3px 0 14px!important;margin:0 0 6px!important; overflow-x:auto!important;overscroll-behavior-x:contain!important;scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important } #main-content .pati-store-filterbar::-webkit-scrollbar{display:none} #main-content .pati-store-filterbar button{ flex:0 0 auto!important;min-height:39px!important;white-space:nowrap!important; padding:8px 16px!important;background:#fff!important;color:#454b54!important; font-size:12px!important;font-weight:750!important;border:1px solid #e0e3e9!important; border-radius:999px!important;box-shadow:none!important } #main-content .pati-store-filterbar button.is-active{ background:#1c2029!important;color:#fff!important;border-color:#1c2029!important } #main-content .pati-store-grid{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important; align-items:stretch!important;min-width:0!important } #main-content .pati-store-product{ min-width:0!important;display:flex!important;flex-direction:column!important;background:#fff!important; border:1px solid #e5e8ee!important;border-radius:21px!important;overflow:hidden!important; box-shadow:0 3px 15px #1e293b08!important } #main-content .pati-store-art{ position:relative!important;display:grid!important;place-items:center!important;min-height:152px!important; aspect-ratio:1.38 / 1!important;background:linear-gradient(135deg,#ebedf3,#d9dde8)!important } #main-content .pati-store-product:nth-child(4n+2) .pati-store-art{background:linear-gradient(135deg,#e6edeb,#d2e4df)!important} #main-content .pati-store-product:nth-child(4n+3) .pati-store-art{background:linear-gradient(135deg,#f2ebe5,#e7d9cc)!important} #main-content .pati-store-product:nth-child(4n) .pati-store-art{background:linear-gradient(135deg,#ede8f3,#dfd8ea)!important} #main-content .pati-store-art-emoji{font-size:57px!important;line-height:1!important;filter:drop-shadow(0 9px 10px #0001)!important} #main-content .pati-store-category{ position:absolute!important;top:10px!important;left:11px!important;border-radius:999px!important; font-size:10px!important;font-weight:800!important;padding:6px 11px!important; background:#ffffffdc!important;color:#383c44!important } #main-content .pati-store-product-body{ flex:1!important;display:flex!important;flex-direction:column!important;gap:10px!important; padding:15px!important;min-width:0!important } #main-content .pati-store-product h3{margin:0!important;color:#20232a!important;font-size:16px!important;line-height:1.3!important;letter-spacing:-.02em!important} #main-content .pati-store-product p{ margin:0!important;color:#727783!important;font-size:12px!important;line-height:1.6!important; min-height:37px!important } #main-content .pati-store-stock{font-size:11px!important;color:#21805d!important;font-weight:800!important} #main-content .pati-store-stock.is-out{color:#8b8f98!important} #main-content .pati-store-purchase{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:9px!important; margin-top:auto!important;padding-top:9px!important;border-top:1px solid #edf0f3!important } #main-content .pati-store-price strong{display:block!important;color:#1b1f29!important;font-size:23px!important;font-weight:850!important;line-height:1.1!important;font-variant-numeric:tabular-nums!important} #main-content .pati-store-price small{display:block!important;font-size:10px!important;color:#7d828c!important;margin-top:4px!important} #main-content .pati-store-purchase button{ min-width:101px!important;min-height:43px!important;padding:10px 12px!important; border:0!important;border-radius:11px!important;background:#1c2029!important; color:white!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important } #main-content .pati-store-purchase button:disabled{ background:#eff0f3!important;color:#9599a2!important;cursor:not-allowed!important } #main-content .pati-store-guidance{ display:block!important;border:1px solid #e0e5ec!important;background:#fff!important; border-radius:18px!important;padding:18px 20px!important;margin-top:25px!important } #main-content .pati-store-guidance strong{color:#212530!important;font-size:14px!important} #main-content .pati-store-guidance p{color:#606774!important;font-size:12px!important;line-height:1.7!important;margin:8px 0 0!important} #main-content .pati-store-history{margin-top:30px!important} #main-content .pati-store-history .pati-store-section-head button{ min-height:38px!important;border-radius:10px!important;border:1px solid #dce0e6!important; background:#fff!important;color:#424752!important;font-size:12px!important;padding:8px 14px!important } #main-content .pati-store-orders{display:grid!important;gap:10px!important} #main-content .pati-store-order{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:15px!important;background:#fff!important;border:1px solid #e2e5ea!important;border-radius:14px!important} #main-content .pati-store-order>div{display:grid!important;gap:4px!important} #main-content .pati-store-order strong{font-size:13px!important;color:#24272e!important} #main-content .pati-store-order small{font-size:11px!important;color:#868a94!important} #main-content .pati-store-order-status{font-size:11px!important;font-weight:800!important;background:#f1f2f5!important;color:#505663!important;border-radius:999px!important;padding:7px 10px!important} #main-content .pati-store-order p,#main-content .pati-store-order details{flex-basis:100%!important;font-size:12px!important;color:#5e6470!important} #main-content .pati-store-no-results{grid-column:1/-1!important;background:#fff!important;padding:22px!important;border-radius:15px!important;color:#666c76!important;font-size:13px!important} @media(max-width:850px){#main-content .pati-store-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:540px){ #main-content .pati-store-page{padding:12px 12px calc(90px + env(safe-area-inset-bottom,0px))!important} #main-content .pati-store-hero{padding:22px 18px!important;flex-direction:column!important;border-radius:20px!important;gap:18px!important} #main-content .pati-store-balance{width:100%!important;min-height:75px!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important} #main-content .pati-store-balance strong{font-size:27px!important} #main-content .pati-store-hero-copy h1{font-size:31px!important} #main-content .pati-store-grid{gap:10px!important} #main-content .pati-store-art{min-height:111px!important} #main-content .pati-store-art-emoji{font-size:43px!important} #main-content .pati-store-product{border-radius:16px!important} #main-content .pati-store-product-body{padding:11px!important;gap:8px!important} #main-content .pati-store-product h3{font-size:13px!important} #main-content .pati-store-product p{font-size:11px!important;line-height:1.4!important;min-height:47px!important} #main-content .pati-store-purchase{flex-direction:column!important;align-items:stretch!important;gap:8px!important} #main-content .pati-store-purchase button{width:100%!important;min-height:42px!important} #main-content .pati-store-price{display:flex!important;align-items:baseline!important;gap:5px!important} #main-content .pati-store-price strong{font-size:20px!important} #main-content .pati-store-price small{font-size:10px!important} #main-content .pati-store-section-head h2{font-size:18px!important} } @media(prefers-reduced-motion:reduce){#main-content .pati-store-product{animation:none!important}} /* Clear cover editing action, shared with the full-screen image editor. */ #post-form .pati-cover-crop-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;margin:11px 0!important;padding:10px 12px!important;border:1px solid #e5e8ed!important;border-radius:13px!important;background:#f9fafb!important} #post-form .pati-cover-crop-row button{min-height:43px!important;padding:10px 15px!important;border:1px solid #dfe2e7!important;border-radius:11px!important;background:#fff!important;color:#222630!important;font-size:12px!important;font-weight:800!important} #post-form .pati-cover-crop-row small{color:#777e88!important;font-size:11px!important;line-height:1.4!important} /* 2026-11-01 · Four-item shop, no category navigation. */ #main-content .pati-calm-shop{ width:min(100%,980px)!important;margin:0 auto!important; padding:18px clamp(13px,3vw,26px) calc(96px + env(safe-area-inset-bottom,0px))!important; color:#181a1f!important;box-sizing:border-box!important;overflow-x:hidden!important; } #main-content .pati-calm-header{margin-bottom:18px!important;padding:7px 2px!important} #main-content .pati-calm-header>span{ display:block!important;font-size:10px!important;letter-spacing:.15em!important; font-weight:850!important;color:#787d87!important; } #main-content .pati-calm-header h1{ margin:7px 0 8px!important;color:#15181e!important;font-size:clamp(26px,5vw,37px)!important; font-weight:850!important;letter-spacing:-.04em!important;line-height:1.2!important; } #main-content .pati-calm-header p{margin:0!important;color:#767b86!important;font-size:13px!important;line-height:1.6!important} #main-content .pati-calm-wallet{ border-radius:23px!important;padding:clamp(17px,3vw,25px)!important; background:#1a1d25!important;color:#fff!important;margin:0 0 27px!important; border:1px solid #313542!important; } #main-content .pati-calm-wallet-top{display:flex!important;gap:14px!important;align-items:center!important;justify-content:space-between!important} #main-content .pati-calm-wallet-top>div{display:flex!important;flex-direction:column!important;gap:3px!important} #main-content .pati-calm-wallet-top small{ color:#bbc1cb!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important; } #main-content .pati-calm-wallet-top strong{ color:white!important;font-size:clamp(28px,5vw,38px)!important;font-weight:850!important;letter-spacing:-.035em!important; font-variant-numeric:tabular-nums!important; } #main-content .pati-calm-wallet-top button{ border:1px solid #ffffff31!important;background:#ffffff16!important;color:#fff!important; padding:10px 12px!important;border-radius:12px!important;min-height:44px!important; font-weight:750!important;font-size:12px!important;text-align:center!important; } #main-content .pati-calm-cash{ display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important; gap:12px!important;margin:20px 0 14px!important;padding-top:20px!important;border-top:1px solid #ffffff24!important; } #main-content .pati-calm-cash-label{ display:block!important;font-size:10px!important;letter-spacing:.12em!important; color:#aeb6c1!important;font-weight:800!important; } #main-content .pati-calm-cash h2{ margin:8px 0 0!important;font-size:clamp(20px,4vw,29px)!important;letter-spacing:-.035em!important; color:#fff!important;line-height:1.25!important; } #main-content .pati-calm-cash h2 span{color:#aab4c5!important;padding:0 5px!important} #main-content .pati-calm-planned{ background:#343b49!important;border:1px solid #ffffff2b!important;color:#dee2eb!important; font-size:11px!important;border-radius:999px!important;padding:8px 12px!important;font-weight:800!important; } #main-content .pati-calm-progress{ width:100%!important;height:9px!important;background:#404651!important;border-radius:99px!important; margin:0 0 10px!important;overflow:hidden!important; } #main-content .pati-calm-progress>span{ display:block!important;height:100%!important;border-radius:inherit!important; background:#d8dce8!important;transition:width .2s ease!important; } #main-content .pati-calm-progress-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;font-size:12px!important} #main-content .pati-calm-progress-meta span{color:#b5bdc9!important} #main-content .pati-calm-progress-meta strong{color:#fff!important;font-weight:800!important;font-variant-numeric:tabular-nums!important} #main-content .pati-calm-program-note{ margin:15px 0 0!important;color:#b5bdc7!important;font-size:11px!important;line-height:1.7!important; } #main-content .pati-calm-section-head{ display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important; margin:0 0 14px!important; } #main-content .pati-calm-section-head h2{color:#1c1f26!important;font-size:20px!important;letter-spacing:-.03em!important;margin:0!important} #main-content .pati-calm-section-head span{color:#898d98!important;font-size:12px!important;font-weight:700!important} #main-content .pati-calm-grid{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important;align-items:stretch!important;min-width:0!important; } #main-content .pati-calm-item{ display:flex!important;flex-direction:column!important;border-radius:20px!important; border:1px solid #e6e8ed!important;background:#fff!important;overflow:hidden!important; min-width:0!important;box-shadow:0 5px 16px rgba(28,33,49,.04)!important; } #main-content .pati-calm-item-art{ min-height:126px!important;display:flex!important;align-items:center!important;justify-content:center!important; flex-direction:column!important;gap:9px!important;padding:16px!important; background:linear-gradient(135deg,#f2f1ec,#e3e0d6)!important; } #main-content .pati-calm-item:nth-child(2) .pati-calm-item-art{background:linear-gradient(135deg,#edf0f5,#dfe7f0)!important} #main-content .pati-calm-item:nth-child(3) .pati-calm-item-art{background:linear-gradient(135deg,#edf3ee,#dfede3)!important} #main-content .pati-calm-item:nth-child(4) .pati-calm-item-art{background:linear-gradient(135deg,#f0f3e6,#dfe6c7)!important} #main-content .pati-calm-item-art>span{font-size:56px!important;line-height:1!important} #main-content .pati-calm-item-art>small{ font-size:10px!important;color:#4c515d!important;font-weight:850!important;letter-spacing:.12em!important; } #main-content .pati-calm-item-content{ display:flex!important;flex:1!important;flex-direction:column!important; gap:9px!important;padding:16px!important; } #main-content .pati-calm-item-content h3{ margin:0!important;font-size:16px!important;line-height:1.35!important; color:#252a32!important;font-weight:830!important; } #main-content .pati-calm-item-content>p{ margin:0!important;min-height:35px!important;color:#777c85!important; font-size:12px!important;line-height:1.55!important; } #main-content .pati-calm-item-state{ color:#767b86!important;font-size:11px!important;font-weight:760!important; } #main-content .pati-calm-item-state.is-open{color:#267551!important} #main-content .pati-calm-item-bottom{ display:flex!important;justify-content:space-between!important;align-items:center!important; gap:12px!important;margin-top:auto!important;padding-top:12px!important; border-top:1px solid #eff0f3!important; } #main-content .pati-calm-cost{display:flex!important;align-items:baseline!important;gap:5px!important;white-space:nowrap!important} #main-content .pati-calm-cost strong{ font-size:23px!important;letter-spacing:-.04em!important;line-height:1.1!important; color:#191c23!important;font-variant-numeric:tabular-nums!important; } #main-content .pati-calm-cost small{font-size:11px!important;color:#7d838b!important} #main-content .pati-calm-item-bottom button{ min-height:42px!important;min-width:96px!important;padding:10px 13px!important; border:0!important;border-radius:11px!important;background:#1d2028!important; color:#fff!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important; } #main-content .pati-calm-item-bottom button:disabled{background:#eff0f3!important;color:#9399a1!important;cursor:not-allowed!important} #main-content .pati-calm-item-foot{margin-top:3px!important;font-size:10px!important;line-height:1.5!important;color:#9095a0!important} #main-content .pati-calm-rules{ border:1px solid #e8eaee!important;border-radius:15px!important;background:#fafbfd!important; margin:18px 0!important;padding:16px!important;font-size:11px!important;line-height:1.65!important;color:#777d86!important; } #main-content .pati-calm-rules strong{color:#3a404a!important} #main-content .pati-calm-history{ border:1px solid #e6e8ed!important;border-radius:15px!important;background:#fff!important; margin:0 0 15px!important;padding:0 15px!important; } #main-content .pati-calm-history summary{ display:flex!important;justify-content:space-between!important;gap:12px!important; list-style:none!important;cursor:pointer!important;padding:16px 0!important; font-size:13px!important;font-weight:800!important;color:#242831!important; } #main-content .pati-calm-history summary::-webkit-details-marker{display:none} #main-content .pati-calm-history summary>span:last-child{color:#858b95!important;font-size:11px!important} #main-content .pati-calm-orders{display:grid!important;gap:9px!important;padding:0 0 17px!important} #main-content .pati-calm-order{ display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important; gap:8px!important;padding:12px!important;border:1px solid #edf0f3!important;border-radius:12px!important; } #main-content .pati-calm-order>div{display:grid!important;gap:5px!important} #main-content .pati-calm-order strong{font-size:12px!important;color:#2a2e34!important} #main-content .pati-calm-order small,#main-content .pati-calm-order>span{font-size:11px!important;color:#858b95!important} #main-content .pati-calm-order p,#main-content .pati-calm-order a{flex-basis:100%!important;font-size:11px!important} #main-content .pati-calm-refresh{ display:block!important;margin:0 auto!important;padding:9px 13px!important;min-height:40px!important; border:1px solid #e4e7ee!important;border-radius:11px!important;background:#fff!important; color:#49505a!important;font-size:12px!important;font-weight:720!important; } @media(max-width:530px){ #main-content .pati-calm-shop{padding:10px 12px calc(105px + env(safe-area-inset-bottom,0px))!important} #main-content .pati-calm-wallet{border-radius:19px!important;padding:17px!important} #main-content .pati-calm-wallet-top button{font-size:11px!important;max-width:48%!important} #main-content .pati-calm-grid{gap:9px!important} #main-content .pati-calm-item{border-radius:16px!important} #main-content .pati-calm-item-art{min-height:94px!important;padding:13px!important} #main-content .pati-calm-item-art>span{font-size:43px!important} #main-content .pati-calm-item-content{padding:11px!important;gap:7px!important} #main-content .pati-calm-item-content h3{font-size:13px!important} #main-content .pati-calm-item-content>p{font-size:10.5px!important;min-height:43px!important} #main-content .pati-calm-item-bottom{flex-direction:column!important;align-items:stretch!important;gap:8px!important} #main-content .pati-calm-cost strong{font-size:20px!important} #main-content .pati-calm-item-bottom button{min-height:42px!important;width:100%!important} } @media(max-width:320px){#main-content .pati-calm-grid{grid-template-columns:1fr!important}} @media(prefers-reduced-motion:reduce){#main-content .pati-calm-progress>span{transition:none!important}} /* patiyiz-dm-emoji-picker-20261101.css */ /* Full emoji keyboard-style bottom sheet: mobile first, light/dark independent. */ .pati-emoji-dialog{ position:fixed!important;inset:auto 0 0!important; width:100%!important;max-width:100%!important; height:min(84dvh,850px)!important;max-height:calc(100dvh - 36px)!important; margin:0!important;padding:0!important;border:0!important; background:#191b20!important;color:#f9fafb!important; border-radius:26px 26px 0 0!important; box-shadow:0 -12px 50px rgba(0,0,0,.32)!important; z-index:2147483640!important;overflow:hidden!important; } .pati-emoji-dialog:not([open]){display:none!important} .pati-emoji-dialog::backdrop{ background:rgba(10,12,18,.66)!important; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .pati-emoji-sheet{height:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:0 12px env(safe-area-inset-bottom,0px);min-height:0} .pati-emoji-grip{height:5px;width:40px;background:#aaadb6;border-radius:10px;margin:10px auto 12px;flex:none} .pati-emoji-search-wrap{display:flex;align-items:center;gap:10px;background:#2c3037;border-radius:18px;min-height:48px;padding:0 14px;flex:none} .pati-emoji-search-wrap>span{font-size:28px;color:#ececf0;line-height:1;flex:none} .pati-emoji-search{min-height:44px!important;flex:1;min-width:0;width:100%;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;font-size:16px!important;font-weight:400!important;outline:none!important;appearance:none} .pati-emoji-search::placeholder{color:#afb1ba!important;opacity:1} .pati-emoji-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 3px 12px} .pati-emoji-heading strong{font-size:18px;color:#f6f7f9;font-weight:750} .pati-emoji-customize{border:0!important;background:transparent!important;box-shadow:none!important;color:#8badff!important;font-size:14px!important;font-weight:700!important;min-height:40px!important;padding:0 4px!important;white-space:nowrap} .pati-emoji-quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;flex:none} .pati-emoji-quick button{display:grid;place-items:center;min-width:0;height:48px;min-height:48px;border:2px solid transparent!important;border-radius:13px!important;background:transparent!important;box-shadow:none!important;font-size:30px!important;line-height:1!important;padding:0!important;touch-action:manipulation} .pati-emoji-quick button.is-selected{border-color:#7da6ff!important;background:#353e58!important} .pati-emoji-hint{margin:7px 1px!important;background:#30343d!important;padding:9px 10px!important;border-radius:12px!important;color:#e0e4ee!important;font-size:12px!important;line-height:1.4!important} .pati-emoji-hint[hidden]{display:none!important} .pati-emoji-list{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:#6f7580 transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:12px} .pati-emoji-list h3{font-size:17px!important;color:#f8f8fa!important;font-weight:750!important;line-height:1.4!important;margin:7px 3px 12px!important} .pati-emoji-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;column-gap:0!important;row-gap:5px!important;margin-bottom:12px!important} .pati-emoji-cell{display:grid!important;place-items:center!important;width:100%!important;min-width:0!important;height:45px!important;min-height:45px!important;padding:0!important;margin:0!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-size:29px!important;line-height:1!important;white-space:nowrap!important;touch-action:manipulation!important} .pati-emoji-cell:active,.pati-emoji-cell:hover{background:#343942!important;transform:none!important} .pati-emoji-empty{font-size:14px;color:#b8bcc7;text-align:center;padding:28px 0} .pati-emoji-tabs{flex:none;display:flex;justify-content:space-between;gap:1px;padding:10px 0 4px;background:#191b20;border-top:1px solid #373a41;overflow-x:auto;scrollbar-width:none;min-height:52px} .pati-emoji-tabs::-webkit-scrollbar{display:none} .pati-emoji-tab{flex:1 0 32px!important;min-width:32px!important;max-width:48px!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:11px!important;color:#e7eaf2!important;box-shadow:none!important;font-size:21px!important;line-height:1!important;touch-action:manipulation!important} .pati-emoji-tab.is-active{background:#3d434c!important} .pati-emoji-dialog button:focus-visible{outline:2px solid #86a6ff!important;outline-offset:1px!important} .pati-origin-flag{display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle;flex:0 0 auto;font-size:13px!important;line-height:1!important;margin-left:5px!important;white-space:nowrap!important;max-width:20px!important;max-height:18px!important} #app-root>.mobile-header .brand-word{display:flex!important;align-items:center!important;gap:0!important;white-space:nowrap!important} #app-root>.mobile-header .pati-origin-flag{font-size:12px!important;margin-left:5px!important} @media (min-width:700px){ .pati-emoji-dialog{inset:auto 16px 14px auto!important;width:min(420px,calc(100vw - 32px))!important;height:min(650px,calc(100dvh - 40px))!important;border-radius:25px!important} .pati-emoji-sheet{padding-bottom:8px} } @media (max-width:365px){ .pati-emoji-sheet{padding-left:9px;padding-right:9px} .pati-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important} .pati-emoji-cell{font-size:26px!important;height:42px!important;min-height:42px!important} .pati-emoji-quick button{font-size:27px!important} } @media(prefers-reduced-motion:reduce){ .pati-emoji-cell,.pati-emoji-quick button{transition:none!important} } /* patiyiz-mobile-three-screens-20261101.css */ /* Patiyiz | 2026-11-01 | Three-screen mobile UX pass. Only home feed, Reels and direct messages. Existing actions, emoji customization, private-chat rules and native video controls are preserved. */ @media (max-width:740px){ /* 1. Home: a short and stable toolbar with genuinely tappable controls. */ html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header{ display:flex!important;align-items:center!important; box-sizing:border-box!important;width:100%!important; min-height:58px!important;height:auto!important; padding:5px max(9px,env(safe-area-inset-right,0px)) 5px max(9px,env(safe-area-inset-left,0px))!important; gap:4px!important;background:#fff!important; border-bottom:1px solid #eceef1!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-share, html[data-pati-view="home"] #app-root>.mobile-header .pati-header-actions button{ box-sizing:border-box!important;flex-shrink:0!important; min-width:42px!important;min-height:44px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; border-radius:12px!important; } html[data-pati-view="home"] #app-root>.mobile-header .pati-header-actions{ margin-left:auto!important;display:flex!important; gap:3px!important;align-items:center!important; min-width:0!important;flex:0 0 auto!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger{ min-height:44px!important; max-width:calc(100% - 168px)!important; gap:4px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .pati-feed-current{ line-height:1.15!important; max-width:84px!important;margin-top:1px!important; } html[data-pati-view="home"] #main-content{min-width:0!important} html[data-pati-view="home"] #main-content>.stories-section{ margin:0!important;padding:6px 9px 5px!important; border-radius:0!important;box-shadow:none!important; } html[data-pati-view="home"] #main-content>.stories-section .stories-heading{ margin:0!important;padding:0!important;min-height:0!important; } html[data-pati-view="home"] #main-content>.stories-section .stories-strip{ gap:12px!important;margin:0!important;padding:3px 0 4px!important; } html[data-pati-view="home"] #main-content .pati-feed-posts{ width:100%!important;max-width:none!important;margin:0!important; padding:0!important;display:flex!important;flex-direction:column!important;gap:0!important; } html[data-pati-view="home"] #main-content .pati-feed-posts>.pati-feed-card{ box-sizing:border-box!important; width:100%!important;max-width:none!important;min-width:0!important; margin:0 0 8px!important;padding:0!important; border-radius:0!important;border-left:0!important;border-right:0!important; box-shadow:none!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-feed-card-header{ box-sizing:border-box!important;min-height:54px!important; padding:7px 11px!important;margin:0!important;gap:8px!important; display:flex!important;align-items:center!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-post-more{ box-sizing:border-box!important;min-width:44px!important;min-height:44px!important; display:grid!important;place-items:center!important;margin-left:auto!important; } html[data-pati-view="home"] #main-content .pati-feed-card :is(.pati-video-frame,.pati-carousel,.pati-feed-text-content){ max-width:100%!important;margin-left:0!important;margin-right:0!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-actionbar.pati-social-actions{ box-sizing:border-box!important;display:flex!important;align-items:center!important; justify-content:flex-start!important;flex-flow:row nowrap!important; gap:clamp(1px,1vw,6px)!important; width:100%!important;min-height:49px!important; padding:2px 9px!important;margin:0!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button{ display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;box-sizing:border-box!important; min-width:42px!important;min-height:44px!important; padding:5px 4px!important;margin:0!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-post-details{ box-sizing:border-box!important;padding:0 12px 10px!important; margin:0!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-post-caption{ overflow-wrap:anywhere!important;line-height:1.45!important; } /* 2. Reels: clear actions without five large opaque boxes. */ html[data-pati-view="reels"] #main-content .pati-reel-item{ width:100%!important;max-width:100%!important; height:100dvh!important;overflow:hidden!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ right:max(8px,env(safe-area-inset-right,0px))!important; bottom:max(119px,calc(env(safe-area-inset-bottom,0px) + 112px))!important; display:flex!important;flex-direction:column!important; gap:4px!important;width:46px!important;max-width:46px!important; z-index:16!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ width:46px!important;min-width:46px!important;max-width:46px!important; height:46px!important;min-height:46px!important;max-height:46px!important; padding:3px 2px!important;margin:0!important;gap:1px!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:15px!important; background:rgba(12,15,22,.27)!important; color:#fff!important;box-shadow:none!important; backdrop-filter:blur(3px)!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action svg{ width:22px!important;height:22px!important;flex-shrink:0!important; stroke:#fff!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail .pati-reel-count, html[data-pati-view="reels"] #main-content .pati-reel-rail .pati-engagement-metric{ font-size:10px!important;line-height:1.05!important;color:#fff!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility{ position:absolute!important; right:max(9px,env(safe-area-inset-right,0px))!important; bottom:max(55px,calc(env(safe-area-inset-bottom,0px) + 49px))!important; display:flex!important;flex-direction:row!important;gap:7px!important; z-index:17!important;height:40px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-utility>button.pati-reel-tool{ min-width:44px!important;height:40px!important;min-height:40px!important; border-radius:13px!important; background:rgba(10,13,20,.62)!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-progress{ position:absolute!important;left:12px!important;right:12px!important; bottom:max(8px,env(safe-area-inset-bottom,0px))!important; z-index:20!important;pointer-events:auto!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{ bottom:max(190px,calc(env(safe-area-inset-bottom,0px) + 182px))!important; left:12px!important;right:64px!important;z-index:15!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{ box-sizing:border-box!important; left:12px!important;right:64px!important; bottom:max(105px,calc(env(safe-area-inset-bottom,0px) + 100px))!important; max-height:76px!important;min-width:0!important; z-index:16!important;display:flex!important; flex-direction:column!important;align-items:flex-start!important; gap:2px!important;overflow:hidden!important; color:#fff!important;font-size:13px!important;line-height:1.4!important; text-shadow:0 1px 5px #000b!important; } html[data-pati-view="reels"] #main-content .pati-reel-caption-text{ display:-webkit-box!important;-webkit-box-orient:vertical!important; -webkit-line-clamp:2;line-clamp:2; overflow:hidden!important;max-width:100%!important;overflow-wrap:anywhere; } html[data-pati-view="reels"] #main-content .pati-reel-caption-toggle{ display:inline-flex!important;align-items:center!important;min-height:25px!important; margin:0!important;padding:1px 6px 1px 0!important;border:0!important; background:transparent!important;color:#fff!important;font-size:12px!important; font-weight:800!important;text-shadow:0 1px 5px #000!important; } html[data-pati-view="reels"] #main-content .pati-reel-caption-toggle:focus-visible{ outline:2px solid #fff!important;outline-offset:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-caption.is-expanded{ max-height:min(35dvh,230px)!important;overflow-y:auto!important; padding:10px 12px!important;border-radius:14px!important; background:rgba(10,13,20,.87)!important; overscroll-behavior:contain!important; } html[data-pati-view="reels"] #main-content .pati-reel-caption.is-expanded .pati-reel-caption-text{ display:block!important;-webkit-line-clamp:unset!important;line-clamp:unset!important; overflow:visible!important; } html[data-pati-view="reels"] #main-content .pati-reel-item:has(.pati-reel-caption.is-expanded) .pati-reel-author{ bottom:calc(115px + min(35dvh,230px))!important; } /* 3. Direct messages: clean inbox and a composer that stays above iOS/Android keyboards. */ #main-content:has(.pati-dm-layout) .pati-dm-top{ box-sizing:border-box!important;min-height:58px!important; padding:8px 10px!important;gap:6px!important; border-bottom:1px solid #edf0f3!important; } #main-content:has(.pati-dm-layout) .pati-dm-top .pati-dm-title strong{ color:#17191d!important;font-size:20px!important;line-height:1.15!important; } #main-content:has(.pati-dm-layout) .pati-dm-filters{ box-sizing:border-box!important;display:flex!important; gap:6px!important;padding:8px 11px!important; border-bottom:1px solid #edf0f3!important; } #main-content:has(.pati-dm-layout) .pati-dm-filters button{ flex:1 1 0!important;min-width:0!important;min-height:42px!important; border-radius:11px!important;white-space:nowrap!important; } #main-content:has(.pati-dm-layout) .pati-dm-searchbar{ box-sizing:border-box!important;padding:4px 11px 10px!important; } #main-content .pati-dm-layout.mobile-chat-list .chat-people{ box-sizing:border-box!important;padding:0 8px 10px!important; background:#fff!important; } #main-content .pati-dm-layout .chat-people .chat-person{ box-sizing:border-box!important;min-height:70px!important; padding:10px 9px!important;gap:10px!important; border-radius:13px!important; } #main-content .pati-dm-layout .chat-person-info{min-width:0!important} #main-content .pati-dm-layout .chat-person-info :is(strong,small){ display:block!important;overflow:hidden!important; white-space:nowrap!important;text-overflow:ellipsis!important; } #app-root:not(.hidden):has(#main-content .pati-dm-layout.mobile-chat-open)>.app-shell{ box-sizing:border-box!important; height:var(--pati-dm-visual-height,100dvh)!important; max-height:var(--pati-dm-visual-height,100dvh)!important; min-height:0!important;padding-top:0!important;padding-bottom:0!important; } #main-content .pati-dm-layout.mobile-chat-open{ box-sizing:border-box!important;min-height:0!important; height:100%!important;max-height:100%!important;overflow:hidden!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-window{ display:flex!important;flex-direction:column!important; min-height:0!important;height:100%!important;max-height:100%!important; overflow:hidden!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-window>header{ box-sizing:border-box!important;min-height:57px!important; padding:9px 10px!important;gap:8px!important;flex:0 0 auto!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-history{ flex:1 1 auto!important;min-height:0!important; overflow-y:auto!important;overscroll-behavior:contain!important; padding:12px 11px 16px!important; -webkit-overflow-scrolling:touch!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-form{ box-sizing:border-box!important;position:relative!important; flex:0 0 auto!important;width:100%!important; display:flex!important;align-items:center!important; min-height:59px!important;gap:6px!important; margin:0!important;padding:7px 10px max(8px,env(safe-area-inset-bottom,0px))!important; background:#fff!important;border-top:1px solid #edf0f3!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-form input[name="body"]{ box-sizing:border-box!important;flex:1 1 auto!important;min-width:0!important; width:1px!important;min-height:43px!important;height:43px!important; padding:8px 13px!important;font-size:16px!important; border-radius:22px!important;background:#f4f5f7!important; color:#191b20!important;border:1px solid #e6e8ec!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-form :is(.primary-btn,.pati-dm-mic,.pati-dm-attach>summary){ box-sizing:border-box!important;flex:0 0 42px!important; min-width:42px!important;width:42px!important;height:43px!important;min-height:43px!important; display:grid!important;place-items:center!important; } html.pati-keyboard-open #main-content .pati-dm-layout.mobile-chat-open .chat-form{ padding-bottom:7px!important; } } @media (max-width:370px){ html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger{ max-width:calc(100% - 157px)!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-icon{ width:24px!important;min-width:24px!important;height:24px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-word{ font-size:16px!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-actionbar.pati-social-actions{ gap:0!important;padding-left:5px!important;padding-right:5px!important; } html[data-pati-view="home"] #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button{ min-width:39px!important;padding:4px 2px!important; } #main-content:has(.pati-dm-layout) .pati-dm-top-actions .pati-dm-new{ font-size:11px!important;padding:7px 5px!important;min-height:39px!important; } #main-content .pati-dm-layout.mobile-chat-open .chat-form{gap:4px!important;padding-left:7px!important;padding-right:7px!important} #main-content .pati-dm-layout.mobile-chat-open .chat-form :is(.primary-btn,.pati-dm-mic,.pati-dm-attach>summary){ flex-basis:40px!important;min-width:40px!important;width:40px!important; } } @media (max-height:590px) and (max-width:740px){ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail{ bottom:max(106px,calc(env(safe-area-inset-bottom,0px) + 101px))!important; gap:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ min-height:43px!important;height:43px!important;max-height:43px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-author{ bottom:174px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-caption{ bottom:97px!important; } } @media (prefers-reduced-motion:reduce){ #main-content .pati-reel-rail>button, #main-content .pati-reel-caption-toggle{transition:none!important} } /* Respect the semantic hidden attribute even with forced button styles. */ #main-content .pati-reel-caption-toggle[hidden]{display:none!important} /* Notification bell uses the existing navigation route and unread counter. */ @media (max-width:740px){ html[data-pati-view="home"] #app-root>.mobile-header #pati-header-notifications{ box-sizing:border-box!important;position:relative!important; display:inline-grid!important;place-items:center!important; flex:0 0 42px!important;width:42px!important;min-width:42px!important; height:44px!important;min-height:44px!important; padding:7px!important;margin:0!important; border:0!important;border-radius:12px!important; background:transparent!important;color:#17191d!important; box-shadow:none!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-notifications svg{ width:22px!important;height:22px!important; stroke:currentColor!important;fill:none!important; flex:0 0 22px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-notifications .pati-count-badge{ display:grid!important;place-items:center!important;position:absolute!important; top:1px!important;right:0!important;min-width:17px!important;height:17px!important; padding:0 3px!important;margin:0!important;border-radius:99px!important; background:#df273c!important;color:#fff!important; font-size:9px!important;line-height:1!important;font-weight:800!important; border:2px solid #fff!important;box-sizing:content-box!important; pointer-events:none!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins{ box-sizing:border-box!important;flex:0 1 auto!important; max-width:53px!important;padding:3px!important;gap:3px!important; white-space:nowrap!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins .pati-coin-icon{ width:17px!important;height:17px!important;flex-shrink:0!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins strong{ font-size:11px!important;min-width:0!important; } } @media(max-width:420px){ html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger{ left:calc(50% - 23px)!important;max-width:calc(100% - 180px)!important; } } @media(max-width:370px){ /* The balance remains available via the coin button; drop only the number from the crowded top bar instead of hiding notifications or share. */ html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins{ flex:0 0 40px!important;max-width:40px!important;width:40px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins strong{ display:none!important; } html[data-pati-view="home"] #app-root>.mobile-header .pati-header-actions{gap:0!important} html[data-pati-view="home"] #app-root>.mobile-header #pati-header-notifications{ flex-basis:40px!important;width:40px!important;min-width:40px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-menu{ min-width:40px!important;width:40px!important; } } /* patiyiz-mobile-layout-fixes-20261101.css */ /* 1 Nov 2026 - Mobile layout follow-up: no header overlap, compact Reels author/caption group, readable five-category profile navigation. Existing click handlers and profile/reel data filters are unchanged. */ @media (max-width:740px){ /* Main toolbar is real grid layout; brand must not be absolute centered underneath balance/notifications/menu. */ html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header{ box-sizing:border-box!important; display:grid!important; grid-template-columns:44px minmax(0,1fr) max-content!important; grid-template-rows:minmax(50px,auto)!important; align-items:center!important; column-gap:5px!important;row-gap:0!important; width:100%!important;max-width:100%!important; min-width:0!important;min-height:58px!important; padding:4px max(8px,env(safe-area-inset-right,0px)) 4px max(8px,env(safe-area-inset-left,0px))!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-header-share{ grid-column:1!important;grid-row:1!important; position:relative!important;inset:auto!important; transform:none!important;display:grid!important;place-items:center!important; width:44px!important;min-width:44px!important;height:44px!important; min-height:44px!important;margin:0!important;justify-self:start!important; z-index:2!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger.brand{ grid-column:2!important;grid-row:1!important; position:relative!important; top:auto!important;right:auto!important;bottom:auto!important;left:auto!important; transform:none!important; box-sizing:border-box!important; display:flex!important;justify-content:flex-start!important;align-items:center!important; width:100%!important;max-width:100%!important;min-width:0!important; min-height:44px!important;height:44px!important; margin:0!important;padding:2px 0!important;gap:3px!important;overflow:hidden!important; z-index:3!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-icon{ box-sizing:border-box!important; width:27px!important;min-width:27px!important;height:27px!important;flex:0 0 27px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-word{ display:flex!important;align-items:center!important; font-size:clamp(14px,4.1vw,19px)!important; overflow:hidden!important;text-overflow:ellipsis!important; max-width:100%!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .pati-origin-flag{ margin-left:3px!important;font-size:11px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions{ grid-column:3!important;grid-row:1!important;justify-self:end!important; position:relative!important;inset:auto!important;transform:none!important; box-sizing:border-box!important; display:flex!important;flex-flow:row nowrap!important;align-items:center!important; justify-content:flex-end!important;gap:2px!important; min-width:0!important;width:max-content!important;max-width:100%!important; margin:0!important;padding:0!important;z-index:4!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>button{ position:relative!important;inset:auto!important;transform:none!important; box-sizing:border-box!important;flex:0 0 40px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; width:40px!important;min-width:40px!important;max-width:40px!important; height:44px!important;min-height:44px!important;max-height:44px!important; padding:5px!important;margin:0!important; border-radius:12px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins{ display:inline-flex!important;flex:0 0 auto!important; width:auto!important;min-width:42px!important;max-width:66px!important; gap:2px!important;padding:3px 4px!important; background:#f4f5f7!important;color:#1b2028!important; border:1px solid #e5e7ec!important;box-shadow:none!important; overflow:hidden!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins::before, html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins::after{ content:none!important;display:none!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins .pati-coin-icon{ display:block!important;width:17px!important;height:17px!important; min-width:17px!important;flex:0 0 17px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins strong{ display:block!important;color:#1b2028!important; font-size:11px!important;line-height:1.1!important; max-width:40px!important;overflow:hidden!important; text-overflow:ellipsis!important;white-space:nowrap!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-notifications svg, html[data-pati-view="home"] #app-root>.mobile-header #pati-header-menu svg{ width:22px!important;height:22px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-feed-menu{ position:absolute!important;top:calc(100% + 5px)!important; left:50%!important;right:auto!important; transform:translateX(-50%)!important; z-index:1200!important; } /* All five profile filters have their actual category labels, not icon-only buttons. Horizontal scroll keeps each at a comfortable thumb size. */ #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]{ box-sizing:border-box!important; display:flex!important;flex-flow:row nowrap!important; grid-template-columns:none!important; align-items:stretch!important;justify-content:flex-start!important; gap:7px!important;width:100%!important;min-width:0!important;max-width:100%!important; padding:10px 12px!important;margin:4px 0 0!important; overflow-x:auto!important;overflow-y:hidden!important; scroll-snap-type:x proximity!important; scroll-padding-inline:12px!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:none!important; border:0!important;background:#fff!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]::-webkit-scrollbar{display:none!important} #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]{ box-sizing:border-box!important;position:relative!important; display:inline-flex!important;flex:0 0 auto!important; align-items:center!important;justify-content:center!important; width:auto!important;min-width:96px!important;max-width:none!important; height:44px!important;min-height:44px!important; padding:0 14px!important;margin:0!important; border:1px solid #e4e7eb!important;border-radius:13px!important; background:#f5f6f8!important;color:#393d45!important; font-size:13px!important;font-weight:760!important;line-height:1.15!important; white-space:nowrap!important;letter-spacing:0!important; text-align:center!important;text-transform:none!important; box-shadow:none!important;scroll-snap-align:start!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"].active, #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"][aria-selected="true"]{ background:#1c1e23!important;color:#fff!important; border-color:#1c1e23!important;box-shadow:none!important; } #main-content .pati-ig-profile .pati-ig-tabs>button .pati-profile-tab-label{ display:block!important;position:static!important; color:inherit!important;font-size:inherit!important;font-weight:inherit!important; line-height:inherit!important;opacity:1!important; } #main-content .pati-ig-profile .pati-ig-tabs>button::before, #main-content .pati-ig-profile .pati-ig-tabs>button::after{ content:none!important;display:none!important; } } /* Keep Reels author directly above the caption, with a single shared bottom anchor. Never position them separately by arbitrary offsets. */ html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info{ box-sizing:border-box!important; position:absolute!important; top:auto!important;left:12px!important; right:68px!important;bottom:max(99px,calc(env(safe-area-inset-bottom,0px) + 94px))!important; z-index:19!important; display:flex!important;flex-direction:column!important; align-items:stretch!important;justify-content:flex-end!important; gap:7px!important;padding:0!important;margin:0!important; max-height:min(44dvh,325px)!important;min-width:0!important; pointer-events:none!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-author, html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-caption{ box-sizing:border-box!important; position:relative!important; top:auto!important;bottom:auto!important;right:auto!important;left:auto!important; transform:none!important; display:flex!important;align-items:center!important; width:100%!important;min-width:0!important;max-width:100%!important; padding:0!important;margin:0!important; border:0!important;background:transparent!important; z-index:auto!important;pointer-events:auto!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-author{ flex:0 0 auto!important; flex-direction:row!important;justify-content:flex-start!important; min-height:39px!important;gap:7px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-caption{ flex:0 1 auto!important; flex-direction:column!important;align-items:flex-start!important; justify-content:flex-start!important; max-height:64px!important;overflow:hidden!important; gap:2px!important; font-size:13px!important;line-height:1.42!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info .pati-reel-caption-text{ display:-webkit-box!important;-webkit-box-orient:vertical!important; -webkit-line-clamp:2;line-clamp:2; overflow:hidden!important;max-height:none!important; max-width:100%!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-caption.is-expanded{ max-height:min(30dvh,220px)!important;overflow:auto!important; background:rgba(10,13,20,.88)!important; padding:9px 10px!important;border-radius:13px!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info>.pati-reel-caption.is-expanded .pati-reel-caption-text{ display:block!important;-webkit-line-clamp:unset!important;line-clamp:unset!important; overflow:visible!important; } html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info .pati-reel-caption-toggle[hidden]{ display:none!important; } @media(max-width:355px){ html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header{ grid-template-columns:42px minmax(0,1fr) max-content!important; column-gap:2px!important;padding-inline:5px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-icon{ width:24px!important;min-width:24px!important;flex-basis:24px!important;height:24px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-feed-menu-trigger .brand-word{ font-size:13px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins{ min-width:40px!important;max-width:54px!important; } html[data-pati-view="home"] #app-root>.mobile-header #pati-header-coins strong{ max-width:27px!important;font-size:10px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>button{ flex-basis:38px!important;min-width:38px!important;max-width:38px!important;width:38px!important; } } @media(max-height:560px){ html[data-pati-view="reels"] #main-content .pati-reel-item>.pati-reel-info{ bottom:max(91px,calc(env(safe-area-inset-bottom,0px) + 86px))!important; max-height:min(39dvh,250px)!important;gap:5px!important; } } /* patiyiz-mobile-icons-actions-insights-20261101.css */ /* Patiyiz - 01 Nov 2026. Mobile profile icon tabs, accessible post actions, single tools entry point and readable Reels counters. Loaded AFTER the previous mobile patches, without changing behavior. */ /* A single features/tools menu lives on the user's profile. */ #pati-right-menu-handle, #app-root>.mobile-header>#pati-header-menu{ display:none!important; } @media(max-width:740px){ /* Two right actions: balance and notifications. Logo/chooser is independent. */ html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header{ display:grid!important; grid-template-columns:44px minmax(0,1fr) auto!important; grid-template-rows:minmax(48px,auto)!important; align-items:center!important; gap:5px!important;box-sizing:border-box!important; width:100%!important;min-height:58px!important; padding:5px max(9px,env(safe-area-inset-right,0px)) 5px max(9px,env(safe-area-inset-left,0px))!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-feed-menu-trigger.brand{ grid-column:2!important;grid-row:1!important; position:relative!important;left:auto!important;top:auto!important; right:auto!important;bottom:auto!important; transform:none!important;min-width:0!important;width:100%!important; max-width:100%!important;min-height:44px!important; justify-content:flex-start!important;overflow:hidden!important; z-index:7!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions{ grid-column:3!important;grid-row:1!important; position:relative!important;display:flex!important; flex-direction:row!important;align-items:center!important; justify-content:flex-end!important; flex:0 0 auto!important;gap:5px!important; width:auto!important;max-width:none!important; padding:0!important;margin:0!important; z-index:8!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins{ box-sizing:border-box!important;position:relative!important; flex:0 0 auto!important; width:auto!important;max-width:89px!important;min-width:46px!important; min-height:44px!important;height:44px!important; border:1px solid #e4e6eb!important;background:#f5f6f8!important; border-radius:13px!important; display:flex!important;flex-direction:column!important; justify-content:center!important;align-items:center!important; gap:0!important;padding:3px 6px!important; box-shadow:none!important; color:#1a1c20!important; } html[data-pati-view="home"] #app-root>.mobile-header>.pati-header-actions>#pati-header-coins .pati-balance-title{ display:block!important;position:static!important; width:auto!important;max-width:100%!important;min-width:0!important; padding:0!important;margin:0!important; color:#6a6f77!important;-webkit-text-fill-color:#6a6f77!important; font-size:9px!important;font-weight:700!important;line-height:1.2!important; white-space:nowrap!important;text-align:center!important; } html[data-pati-view="home"] #app-root>.mobile-header>.pati-header-actions>#pati-header-coins strong{ display:block!important;color:#1a1c20!important; -webkit-text-fill-color:#1a1c20!important; max-width:100%!important;min-width:0!important; font-size:13px!important;line-height:1.3!important; font-weight:800!important;white-space:nowrap!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-header-share, html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-header-notifications{ display:grid!important;place-items:center!important; min-width:44px!important;width:44px!important;height:44px!important; min-height:44px!important;max-height:44px!important; padding:7px!important;box-sizing:border-box!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-header-share{ grid-column:1!important;grid-row:1!important;justify-self:start!important; position:relative!important;transform:none!important;inset:auto!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>#pati-feed-menu{ z-index:1900!important; } /* Restore the original five-icon profile organization, now consistent squares, stronger icon strokes and an unambiguous active indicator. */ #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]{ box-sizing:border-box!important; display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important; flex-direction:unset!important;align-items:stretch!important; justify-content:stretch!important; gap:2px!important;width:100%!important;max-width:100%!important; min-width:0!important;min-height:65px!important; margin:9px 0 0!important;padding:0 5px!important; overflow:visible!important; scroll-snap-type:none!important; background:#fff!important; border-top:1px solid #edf0f3!important; border-bottom:1px solid #e4e7ea!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]{ box-sizing:border-box!important; display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; flex:1 1 auto!important; width:100%!important;min-width:0!important;max-width:100%!important; height:64px!important;min-height:64px!important;max-height:64px!important; margin:0!important;padding:8px 2px 6px!important; color:#777b83!important;-webkit-text-fill-color:#777b83!important; background:#fff!important; border:0!important;border-bottom:3px solid transparent!important; border-radius:9px 9px 0 0!important; box-shadow:none!important;scroll-snap-align:none!important; -webkit-tap-highlight-color:transparent!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"].active, #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"][aria-selected="true"]{ color:#181a1f!important;-webkit-text-fill-color:#181a1f!important; background:#f1f3f6!important; border-color:#181a1f!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"] .pati-profile-tab-icon{ display:block!important;position:static!important; width:29px!important;height:29px!important; min-width:29px!important;max-width:29px!important; flex:0 0 29px!important;opacity:1!important; stroke:currentColor!important;stroke-width:2.4px!important; stroke-linecap:round!important;stroke-linejoin:round!important; filter:none!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"] .pati-profile-grid-icon{ fill:currentColor!important;stroke:none!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"] .pati-profile-tab-label, #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]::before, #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]::after{ display:none!important;content:none!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]:focus-visible{ outline:2px solid #17191e!important;outline-offset:-4px!important; } /* Slightly larger statistics card; not a giant extra section. */ #main-content .pati-ig-profile .pati-profile-insights-preview{ box-sizing:border-box!important; display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important;gap:11px!important; width:calc(100% - 24px)!important;max-width:none!important; min-height:99px!important;height:auto!important; margin:10px 12px 8px!important;padding:16px 17px!important; background:#fff!important;color:#202227!important; border:1px solid #e2e5e9!important;border-radius:17px!important; box-shadow:0 2px 7px rgba(23,26,31,.04)!important; text-align:left!important; } #main-content .pati-ig-profile .pati-profile-insights-preview>span:first-child{ display:flex!important;flex-direction:column!important; align-items:flex-start!important;justify-content:center!important; gap:4px!important;min-width:0!important; } #main-content .pati-ig-profile .pati-profile-insights-preview strong{ color:#202227!important;font-size:19px!important; font-weight:800!important;line-height:1.2!important; } #main-content .pati-ig-profile .pati-profile-insights-preview small{ color:#6d737b!important;font-size:12px!important;line-height:1.3!important; } #main-content .pati-ig-profile .pati-profile-insights-preview .pati-profile-insights-value{ color:#1e2126!important;font-weight:800!important; font-size:25px!important;line-height:1.1!important; font-variant-numeric:tabular-nums!important; } #main-content .pati-ig-profile .pati-profile-insights-preview .pati-profile-insights-arrow{ color:#1e2126!important;font-size:26px!important; font-weight:750!important;line-height:1!important; } /* Larger, bolder post controls for both the home feed and post detail. Save occupies the far right, others are naturally left aligned. */ #main-content .pati-feed-card .pati-actionbar.pati-social-actions{ box-sizing:border-box!important; display:flex!important;flex-flow:row nowrap!important; align-items:center!important;justify-content:flex-start!important; gap:clamp(2px,1.2vw,7px)!important; width:100%!important;min-height:59px!important; padding:5px 11px!important;margin:0!important; overflow:visible!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button{ box-sizing:border-box!important;position:relative!important; display:inline-flex!important;flex:0 0 auto!important; justify-content:center!important;align-items:center!important; min-width:45px!important;width:auto!important; min-height:48px!important;height:48px!important; margin:0!important;padding:7px 5px!important; gap:4px!important;border-radius:11px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button[data-action="save"]{ margin-left:auto!important;margin-right:0!important; justify-content:center!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button :is(svg,svg.icon){ display:block!important;flex:0 0 auto!important; width:clamp(24px,6.7vw,29px)!important;height:clamp(24px,6.7vw,29px)!important; stroke-width:2.45!important; stroke-linejoin:round!important;stroke-linecap:round!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button :is(span,.pati-engagement-metric){ font-size:12px!important;font-weight:720!important;line-height:1.1!important; } #main-content .pati-feed-card .pati-post-details{ padding:2px 13px 12px!important;margin:0!important; } } @media(max-width:365px){ #main-content .pati-feed-card .pati-actionbar.pati-social-actions{ gap:0!important;padding-inline:6px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button{ min-width:40px!important;padding-inline:2px!important; } #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button :is(svg,svg.icon){ width:24px!important;height:24px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions{ gap:2px!important; } html[data-pati-view="home"] #app-root:not(.hidden)>.mobile-header>.pati-header-actions>#pati-header-coins{ max-width:72px!important;min-width:43px!important; } } /* Reels action counters: white even on active green repost indicator. Do not alter the existing active/liked UI color semantics. */ html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail>button[data-action="pati-repost"] :is(.pati-engagement-metric,.pati-reel-count), html[data-pati-view="reels"] #main-content .pati-reel-item .pati-reel-rail>button[data-action="pati-repost"] :is(span,.pati-reel-action-label){ color:#fff!important;-webkit-text-fill-color:#fff!important; opacity:1!important;text-shadow:0 1px 3px #000b!important; } @media(max-width:740px){ html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action{ min-width:47px!important;width:47px!important;max-width:47px!important; min-height:48px!important;height:48px!important;max-height:48px!important; gap:2px!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button.pati-reel-action svg{ width:24px!important;height:24px!important;stroke-width:2.5!important; } html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-reel-count, html[data-pati-view="reels"] #main-content .pati-reel-rail>button .pati-engagement-metric{ color:#fff!important;-webkit-text-fill-color:#fff!important; font-weight:800!important;font-size:11px!important;line-height:1.05!important; } } /* Bottom tabs also use stronger, slightly larger strokes, with safe phone hit targets. Keep the familiar labels and the existing five destinations. */ @media(max-width:740px){ #app-root:not(.hidden)>.mobile-bottom{ box-sizing:border-box!important;grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:stretch!important; min-height:70px!important; padding:6px 4px max(8px,env(safe-area-inset-bottom,0px))!important; } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn{ box-sizing:border-box!important;min-width:0!important;max-width:none!important; min-height:56px!important;padding:5px 2px!important; gap:4px!important;border-radius:12px!important; } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph{ display:grid!important;place-items:center!important; flex:0 0 30px!important;width:32px!important;height:30px!important; } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn .pati-mobile-nav-glyph>.icon{ width:27px!important;height:27px!important; stroke-width:2.35!important;stroke-linecap:round!important; stroke-linejoin:round!important; } #app-root:not(.hidden)>.mobile-bottom>.mobile-nav-btn>small{ font-size:10.5px!important;line-height:1.1!important;font-weight:730!important; } } /* 2026-11-01: profile detail adjustments and the two Reels icon swap. Applies after the existing mobile layout rules, with no duplicate screens. */ @media(max-width:740px){ /* Make each icon explain its category even on a small phone. Retain the original 5-column grid and its 5 working tab actions. */ #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]{ grid-template-columns:repeat(5,minmax(0,1fr))!important; min-height:75px!important; padding:0 4px!important; align-items:stretch!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"]{ box-sizing:border-box!important; display:flex!important; flex-flow:column nowrap!important; align-items:center!important;justify-content:center!important; gap:5px!important; height:74px!important;min-height:74px!important;max-height:74px!important; min-width:0!important;width:100%!important; padding:6px 2px 5px!important; overflow:hidden!important; -webkit-tap-highlight-color:transparent!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"] :is(.pati-profile-tab-icon,svg.icon){ box-sizing:border-box!important; display:block!important;flex:0 0 27px!important; width:27px!important;min-width:27px!important;max-width:27px!important; height:27px!important;min-height:27px!important;max-height:27px!important; fill:none; stroke:currentColor!important;stroke-width:2.35px!important; stroke-linejoin:round!important;stroke-linecap:round!important; opacity:1!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"]>button[role="tab"] .pati-profile-grid-icon{ stroke:none!important;fill:currentColor!important; } #main-content .pati-ig-profile .pati-ig-tabs[role="tablist"] .pati-profile-tab-caption{ display:block!important;position:static!important; padding:0!important;margin:0!important; flex:0 0 auto!important; max-width:100%!important;min-width:0!important; color:inherit!important;-webkit-text-fill-color:currentColor!important; font-size:clamp(9px,2.65vw,11px)!important;line-height:1.15!important; font-weight:750!important;letter-spacing:-.01em!important; white-space:normal!important;text-align:center!important; overflow-wrap:normal!important;overflow:hidden!important; display:-webkit-box!important;-webkit-box-orient:vertical!important; -webkit-line-clamp:2!important;line-clamp:2!important; } /* Main stats: larger labels; numbers and ordering stay unchanged. */ #main-content .pati-ig-profile .pati-ig-stats :is(span,button){ min-width:0!important;text-align:center!important; align-items:center!important; } #main-content .pati-ig-profile .pati-ig-stats :is(span,button)>small{ display:block!important; font-size:clamp(12px,3.55vw,14px)!important; font-weight:720!important;line-height:1.19!important; letter-spacing:-.012em!important; white-space:normal!important; overflow-wrap:normal!important; color:#4d535c!important; opacity:1!important; } /* Return the statistics card to a compact, but still legible size. */ #main-content .pati-ig-profile .pati-profile-insights-preview{ box-sizing:border-box!important; width:calc(100% - 24px)!important; height:auto!important;min-height:83px!important;max-height:none!important; margin:7px 12px 6px!important;padding:11px 14px!important; gap:8px!important;border-radius:15px!important; } #main-content .pati-ig-profile .pati-profile-insights-preview>span:first-child{ gap:2px!important; } #main-content .pati-ig-profile .pati-profile-insights-preview strong{ font-size:17px!important;line-height:1.2!important; } #main-content .pati-ig-profile .pati-profile-insights-preview small{ font-size:11px!important;line-height:1.22!important; } #main-content .pati-ig-profile .pati-profile-insights-preview .pati-profile-insights-value{ font-size:22px!important; } #main-content .pati-ig-profile .pati-profile-insights-preview .pati-profile-insights-arrow{ font-size:23px!important; } /* The own profile has one black full-width Edit button, with no balance card. Visitors retain their existing Follow / Message action layout. */ #main-content .pati-ig-profile .pati-ig-actions.pati-own-profile-actions{ box-sizing:border-box!important; display:grid!important;grid-template-columns:minmax(0,1fr)!important; align-items:stretch!important; width:100%!important;min-width:0!important;max-width:100%!important; gap:0!important; margin:0!important;padding:9px 12px 12px!important; } #main-content .pati-ig-profile .pati-ig-actions.pati-own-profile-actions>button[data-action="edit-profile"]{ box-sizing:border-box!important;grid-column:1/-1!important; display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;min-width:0!important;max-width:100%!important; height:62px!important;min-height:62px!important;max-height:62px!important; margin:0!important;padding:10px 15px!important; background:#202126!important;color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid #202126!important; border-radius:15px!important;box-shadow:none!important; font-size:16px!important;font-weight:820!important;line-height:1.2!important; } #main-content .pati-ig-profile .pati-own-profile-actions .pati-profile-coin-balance, #main-content .pati-ig-profile .pati-own-profile-actions #pati-profile-balance{ display:none!important; } /* Swap completed in app.js: bottom Reels is the vertical-play device. */ #app-root:not(.hidden)>.mobile-bottom .pati-mobile-reels-icon{ width:27px!important;height:27px!important;min-width:27px!important; stroke:currentColor!important;stroke-width:2.5px!important; fill:none!important;opacity:1!important; } } @media(max-width:350px){ #main-content .pati-ig-profile .pati-ig-stats :is(span,button)>small{ font-size:12px!important; } #main-content .pati-ig-profile .pati-ig-tabs .pati-profile-tab-caption{ font-size:9px!important;letter-spacing:-.025em!important; } } /* patiyiz-reels-profile-final-20261101.css */ /* Patiyiz 2026-11-01: bookmark right, profile eye counter and cover chooser */ #main-content .pati-feed-card .pati-actionbar.pati-social-actions{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:clamp(1px,1vw,8px)!important;width:100%!important} #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button[data-action="save"]{order:999!important;margin-left:auto!important;margin-right:0!important;flex:0 0 44px!important;width:44px!important;position:static!important;transform:none!important;float:none!important;align-self:center!important;display:flex!important;justify-content:center!important;align-items:center!important} #main-content .pati-feed-card .pati-actionbar.pati-social-actions>button:not([data-action="save"]){order:0!important;flex-shrink:1!important;min-width:32px!important} #main-content .pati-profile-tile .pati-profile-view-count{position:absolute!important;bottom:7px!important;left:9px!important;right:auto!important;top:auto!important;z-index:9!important;display:inline-flex!important;align-items:center!important;gap:5px!important;color:white!important;font-size:clamp(12px,3.4vw,17px)!important;font-weight:800!important;letter-spacing:.1px!important;line-height:1.2!important;text-shadow:0 1px 5px #000b!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important} #main-content .pati-profile-tile .pati-profile-view-count .pati-eye-mark{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px #0008)} #post-form[data-mode="reels"] [data-pati-cover-root]{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;max-height:none!important;overflow:visible!important} #post-form[data-mode="reels"] .pati-cover-title strong{font-size:17px!important;color:#191b20!important} #post-form[data-mode="reels"] [data-pati-cover-action="gallery"],#post-form[data-mode="reels"] [data-pati-cover-action="frame"]{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important} @media(max-width:380px){#main-content .pati-feed-card .pati-actionbar.pati-social-actions>button[data-action="save"]{flex-basis:40px!important;width:40px!important}} /* patiyiz-explore-choice-20261101.css */ /* Explore mobile-first toolbar matching saved and overflow navigation */ #main-content .pati-explore-media-screen .pati-explore-custom-top{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 12px;background:#fff;color:#181b20;position:relative;z-index:10} #main-content .pati-explore-custom-search{min-width:0;flex:1 1 auto;display:flex;align-items:center;gap:12px;background:#f0f1f3;border:0;border-radius:30px;min-height:47px;padding:0 16px;color:#6d747c;text-align:left;font-size:20px} #main-content .pati-explore-custom-search span{font-size:16px} #main-content .pati-explore-custom-icon{width:42px;min-width:42px;height:44px;border:0;background:transparent;color:#202329;display:grid;place-items:center;padding:8px;border-radius:10px} #main-content .pati-explore-custom-icon svg{width:27px;height:27px} #main-content .pati-explore-custom-menu-wrap{position:relative} #main-content .pati-explore-custom-menu{position:absolute;right:0;top:calc(100% + 7px);width:min(270px,calc(100vw - 30px));z-index:100;background:#fff;border:1px solid #e0e3e8;border-radius:15px;padding:6px;box-shadow:0 12px 38px #0002} #main-content .pati-explore-custom-menu[hidden]{display:none!important} #main-content .pati-explore-custom-menu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:11px 12px;border:0;border-radius:10px;background:#fff;text-align:left;font-size:14px;font-weight:750;color:#23252b} #main-content .pati-explore-custom-menu button small{font-size:11px;font-weight:500;color:#6b7079;margin-top:3px} #main-content .pati-explore-custom-menu button.is-selected{background:#f0f1f4} #main-content .pati-explore-media-screen>.pati-explore-search-launch[hidden],#main-content .pati-explore-media-screen>.pati-explore-sort[hidden]{display:none!important} @media(max-width:370px){#main-content .pati-explore-media-screen .pati-explore-custom-top{gap:5px;padding:7px}#main-content .pati-explore-custom-icon{width:39px;min-width:39px}}