:root{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:#172b4d;background:#eef3fb}*{box-sizing:border-box}body{margin:0}header{background:linear-gradient(100deg,#0751a2,#167bd5);color:white;padding:17px max(20px,4vw);display:flex;align-items:center;gap:25px;box-shadow:0 2px 12px #174c8b22;position:sticky;top:0;z-index:5}header a{color:white;text-decoration:none}header nav{margin-left:auto}.brand{font-size:27px;font-weight:850;letter-spacing:-1px}.layout{display:grid;grid-template-columns:220px minmax(0,720px) 230px;gap:22px;max-width:1300px;margin:25px auto;padding:0 20px}.panel{background:white;border:1px solid #dce6f5;border-radius:16px;padding:22px;margin-bottom:17px;box-shadow:0 5px 20px #143e6c0a}.sidebar,.right{height:max-content;position:sticky;top:95px}.sidebar a{display:block;padding:13px;border-radius:9px;color:#174a83;text-decoration:none;font-weight:650}.sidebar a:hover{background:#e8f2ff}.content{min-width:0}h1,h2,h3{margin:0 0 15px}h1{font-size:29px}h2{font-size:21px}h3{font-size:18px}p{line-height:1.6}small{color:#6b7b93}input,textarea{display:block;width:100%;padding:13px;border:1px solid #cad7e8;border-radius:10px;margin:10px 0;font:inherit;background:#f9fbff;color:#183252}textarea{min-height:95px;resize:vertical}input[type=file]{background:white}button{background:#0969c8;color:white;border:0;border-radius:9px;padding:11px 18px;font-weight:700;cursor:pointer;margin:5px 0}button:hover{background:#004e9b}.person{display:flex;gap:12px;align-items:center}.person small{margin-left:auto}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}.bigavatar{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid white}.cover{width:100%;height:220px;object-fit:cover;border-radius:12px}.postbody{white-space:normal;font-size:16px}.comment{background:#f1f5fa;padding:10px 14px;border-radius:10px}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions form{flex:1;min-width:115px}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.auth{display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:center;max-width:1100px;margin:80px auto;padding:20px}.hero h1{font-size:55px;color:#0767c5}.hero p{font-size:23px}.alert{background:#fff3d2;padding:12px;text-align:center}@media(max-width:1050px){.layout{grid-template-columns:190px minmax(0,1fr)}.right{display:none}}@media(max-width:700px){header{flex-wrap:wrap}.layout{display:block;padding:0 12px}.sidebar{position:static;display:flex;overflow-x:auto;gap:8px;padding:8px}.sidebar a{white-space:nowrap}.auth{display:block;margin:25px auto}.hero h1{font-size:36px}.tiles{grid-template-columns:1fr}}
/* Phase 2 Messenger */
.messenger{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;min-height:520px}.chat-contacts,.chat-main{background:#fff;border:1px solid #dce6f5;border-radius:16px;padding:15px;min-width:0}.chat-contact{display:flex;align-items:center;gap:9px;padding:12px 8px;text-decoration:none;color:#174a83;border-radius:9px;overflow-wrap:anywhere}.chat-contact:hover,.chat-contact.active{background:#e8f2ff}.chat-contact span{flex:1}.unread{background:#0767c5;color:white;border-radius:15px;padding:3px 8px}.chat-main{display:flex;flex-direction:column}.chat-log{height:390px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px;background:#f6f9fe;border-radius:12px}.chat-bubble{padding:10px 13px;border-radius:14px;max-width:82%;overflow-wrap:anywhere;white-space:pre-wrap}.chat-bubble small{display:block;font-size:10px;margin-top:5px;color:inherit;opacity:.75}.chat-bubble.mine{background:#0969c8;color:white;align-self:flex-end}.chat-bubble.theirs{background:#e3eaf4;color:#17314d;align-self:flex-start}.chat-send{display:flex;align-items:center;gap:8px}.chat-send input{flex:1;min-width:0}.chat-error{color:#ae2031;font-size:13px;min-height:18px;margin:5px}.chat-empty{margin:auto;color:#64748b}.message-link{display:inline-block;padding:11px 18px;background:#e8f2ff;border-radius:9px;color:#0751a2;text-decoration:none;font-weight:bold}@media(max-width:700px){.messenger{grid-template-columns:1fr}.chat-contacts{max-height:180px;overflow-y:auto}.chat-log{height:340px}}

/* Phase 3 Messenger */
.v3-wrap{display:grid;grid-template-columns:205px minmax(0,1fr);gap:12px;background:white;border:1px solid #dce6f5;border-radius:16px;padding:12px;min-height:420px}.v3-side{border-right:1px solid #e0e8f4;overflow:auto;max-height:490px}.v3-side h3{font-size:15px;margin:10px}.v3-side details{padding:10px}.v3-side summary{cursor:pointer;color:#0751a2;font-weight:700}.v3-side label{font-size:12px}.v3-chat{min-width:0;display:flex;flex-direction:column}.v3-chat h3{margin:8px 0 12px}.v3-chat .chat-log{height:320px}.v3-compose{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.v3-compose input#v3-body{flex:1;min-width:140px}.v3-upload{background:#eaf2ff;border-radius:8px;padding:10px;cursor:pointer;color:#0751a2}.v3-upload input{width:125px;font-size:11px;padding:0;margin:5px 0}.v3-typing{font-size:12px;color:#4973a2;min-height:16px;margin:4px}.v3-picker{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}.v3-picker button{padding:3px 5px;font-size:13px;background:transparent;color:inherit}.v3-picker button:hover{background:#c1d6ee}.v3-reactions{font-size:12px}.chat-photo{display:block;max-width:220px;max-height:190px;object-fit:contain;border-radius:9px;margin:8px 0}.v3-float-button{position:fixed;right:20px;bottom:20px;z-index:20;border-radius:30px;box-shadow:0 6px 24px #18436e44}.v3-floating{position:fixed;right:18px;bottom:70px;width:min(700px,calc(100vw - 36px));height:min(530px,calc(100vh - 130px));background:white;border:1px solid #cbd8e8;border-radius:16px;box-shadow:0 14px 45px #122f5b55;z-index:20;padding:10px}.v3-floating[hidden]{display:none}.v3-floating .v3-wrap{height:100%;min-height:0}.v3-floating .v3-chat .chat-log{height:auto;flex:1;min-height:100px}.v3-close{position:absolute;right:15px;top:-44px;border-radius:50%;font-size:18px}@media(max-width:700px){.v3-wrap{grid-template-columns:1fr}.v3-side{max-height:145px;border-right:0;border-bottom:1px solid #e0e8f4}.v3-chat .chat-log{height:280px}.v3-floating .v3-side{max-height:105px}.v3-floating .v3-chat .chat-log{min-height:80px}}

/* Phase 4 */
.notification-new{border-left:5px solid #1479d3;background:#f2f8ff}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.photo-grid figure{margin:0}.photo-grid img{width:100%;height:150px;object-fit:cover;border-radius:10px}.photo-grid figcaption{font-size:12px;color:#4c6685}.listing-photo{width:100%;height:190px;object-fit:cover;border-radius:12px;margin-bottom:12px}

/* Phase 5 */
.verified-check{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#0c6fe4 0%,#4b9df3 48%,#a9b9ca 49%,#e1e9f0 78%,#7e94ac 100%);border:1px solid #779bbf;color:#fff;font-weight:900;font-size:14px;text-shadow:0 1px 2px #24496d;vertical-align:middle;box-shadow:0 1px 4px #8babc6}
select{display:block;width:100%;padding:12px;border:1px solid #cad7e8;border-radius:10px;background:#f9fbff;color:#183252;margin:10px 0;font:inherit}

/* Phase 6: blue-and-silver screenshot-inspired redesign, preserving existing PHP behavior */
:root{--navy:#092c66;--blue:#0867dc;--silver:#e4ecf7;--ink:#162943;--line:#cfdbec;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#edf3fb}
body{background:linear-gradient(110deg,#e6eef9,#f5f8fd 45%,#e8f0fa)}
.topbar{height:78px;padding:8px 22px;background:linear-gradient(110deg,#0a2b61,#174b97 65%,#092554);gap:24px;border-bottom:3px solid #4aabff;box-shadow:0 3px 18px #0b326c38}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-style:italic;font-size:29px;color:#fff;text-shadow:0 2px 3px #071c41}.brand-mark{display:inline-grid;place-items:center;border-radius:50%;width:48px;height:48px;background:linear-gradient(140deg,#e7f2ff,#2575d5 35%,#0b2f75 65%,#d5e3f6);border:3px solid #dce8fa;box-shadow:inset 0 0 0 2px #4b83c7,0 3px 9px #061c4a66;color:white;font:bold italic 32px Georgia,serif;flex-shrink:0}.top-search{width:min(330px,22vw);margin:0}.top-search input{margin:0;border-radius:26px;background:#f4f7fc;height:41px}.top-search input:disabled{opacity:1;cursor:not-allowed}.top-nav{display:flex;gap:4px;align-items:center;justify-content:center;flex:1;margin-left:0!important}.top-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:7px 11px;font-size:22px;min-width:66px;border-bottom:3px solid transparent;text-decoration:none;color:white;line-height:1.1}.top-nav a span{font-size:11px;font-weight:700}.top-nav a.active,.top-nav a:hover{background:#ffffff13;border-bottom-color:#69b7ff}.top-account{display:flex;align-items:center;gap:8px;color:white;text-decoration:none;font-weight:700;white-space:nowrap}.top-account img,.top-account .avatar-fallback{width:39px;height:39px;border-radius:50%;object-fit:cover}
.layout{max-width:1900px;grid-template-columns:minmax(205px,260px) minmax(0,1.4fr) minmax(280px,.9fr);gap:16px;margin:16px auto;padding:0 16px}.panel{border:1px solid #cfdbeb;box-shadow:0 3px 10px #173d6d12;border-radius:17px;padding:17px;margin-bottom:13px;background:linear-gradient(155deg,#fff,#f9fbff)}.sidebar,.right{top:96px;max-height:calc(100vh - 108px);overflow-y:auto;scrollbar-width:thin}.sidebar{background:transparent;border:0;box-shadow:none;padding:0}.sidebar-user{padding:6px 4px 15px}.sidebar-user a{display:flex;gap:12px;align-items:center;text-decoration:none;color:#12243d}.sidebar-user strong{font-size:15px}.sidebar-user small{display:block;font-size:12px;margin-top:3px;color:#335c92}.sidebar-avatar{width:57px;height:57px;border-radius:50%;object-fit:cover;display:grid;place-items:center}.avatar-fallback{display:inline-grid;place-items:center;background:linear-gradient(135deg,#0e6ac9,#9bc7f7);color:white;font-weight:800;border-radius:50%}.sidebar nav a{display:flex;align-items:center;gap:15px;padding:12px 14px;color:#183653;font-weight:650;border-radius:11px;margin-bottom:3px}.sidebar nav a span{font-size:23px;min-width:25px;text-align:center;color:#2a578b}.sidebar nav a.selected,.sidebar nav a:hover{background:linear-gradient(90deg,#0a58c7,#086fdf);color:white}.sidebar nav a.selected span,.sidebar nav a:hover span{color:white}.sidebar-brand{margin:24px 3px 5px;padding:14px 9px;background:linear-gradient(135deg,#0c2c63,#0a6cd4);color:white;border-radius:14px;display:flex;align-items:center;gap:8px;font-size:19px;font-style:italic;font-weight:800;flex-wrap:wrap}.sidebar-brand .brand-mark{width:39px;height:39px;font-size:25px}.sidebar-brand small{width:100%;text-align:center;color:#c6dcff;font-size:11px;font-style:normal}.content{min-width:0}.content h1{color:#0b376d}.compose-panel h2{font-size:19px}.compose-row{display:flex;align-items:flex-start;gap:10px}.compose-row textarea{min-height:58px;height:66px;border:0;border-radius:25px;background:#eef3fa;margin:0;resize:vertical;padding:18px}.compose-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #dce6f2;margin-top:12px;padding-top:10px}.compose-actions label{display:flex;align-items:center;gap:9px;font-size:12px;color:#526a86}.compose-actions select{width:auto;margin:0;padding:8px}.compose-actions button{margin:0}.stories-panel{padding:17px}.stories-panel p{color:#5b7089;margin:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-heading h2,.section-heading h3{margin:0}.section-heading a{color:#075ac1;text-decoration:none;font-size:13px;font-weight:700}.feed-heading{font-size:19px;margin:16px 0 12px}.content article.panel{padding:20px}.content article .person strong{font-size:16px}.content article .postbody{font-size:16px}.right{background:transparent;border:0;box-shadow:none;padding:0;position:sticky}.right-section h3{font-size:17px}.verification-promo{background:linear-gradient(135deg,#071e4b,#074caa 65%,#08295d);color:white;text-align:center;border:3px solid #c2d3ea;padding:19px}.verification-promo h2{font-size:20px;color:white;margin:7px 0}.promo-eyebrow{font-size:11px;letter-spacing:2px;color:#a8d5ff;font-weight:800}.promo-badge{padding:12px}.promo-badge .verified-check{width:72px;height:72px;font-size:44px;border:4px solid #e4edf9;box-shadow:0 5px 16px #061936}.verification-promo p{font-size:13px;margin:0 0 8px}.promo-price{font-size:27px;font-weight:900}.promo-price small{color:#d8e8ff;font-size:12px}.promo-button{display:block;border-radius:10px;padding:12px;background:linear-gradient(#5ba7ff,#0753b7);color:white;text-decoration:none;font-weight:800;border:1px solid #a9d7ff;margin:12px 0}.verification-promo>small{color:#c6d8f3;font-size:10px}.mini-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #e6edf5;font-size:13px}.mini-row:last-child{border:0}.mini-row>span:nth-child(2){flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}.mini-row small{display:block;font-size:11px;font-weight:400}.mini-row>a{background:#e4efff;color:#0754b6;padding:7px 9px;border-radius:8px;text-decoration:none;font-weight:700}.mini-icon{width:40px;height:40px;border-radius:10px;background:#c7dfff;display:grid;place-items:center;font-size:25px}.mini-market{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-market a{color:#142a46;text-decoration:none;min-width:0}.mini-market strong,.mini-market small{display:block}.mini-market small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.market-photo{height:100px;background:#e4ebf5;border-radius:10px;display:grid;place-items:center;font-size:32px;overflow:hidden}.market-photo img{width:100%;height:100%;object-fit:cover}.empty-note{font-size:13px;color:#6b7e94}.shortcut-links{display:grid;gap:5px;margin-top:12px}.shortcut-links a{border:1px solid #d4dfed;border-radius:9px;padding:10px;color:#214875;text-decoration:none;font-size:13px;font-weight:700}.verified-check{background:linear-gradient(135deg,#035ac6 0%,#2089f4 55%,#aebfce 56%,#eef5ff 75%,#637d9e 100%);border:2px solid #b8cce3;box-shadow:0 2px 5px #2e6aaf55}.profile-shortcut{display:none}
@media(min-width:1450px){.layout{grid-template-columns:minmax(220px,260px) minmax(0,1.25fr) minmax(330px,.75fr)}.profile-shortcut{display:block}}
@media(max-width:1250px){.top-search{display:none}.top-nav a{min-width:55px;padding:7px}.layout{grid-template-columns:205px minmax(0,1fr) 290px;gap:12px}}
@media(max-width:1050px){.layout{grid-template-columns:205px minmax(0,1fr)}.right{display:none}.top-account span:not(.avatar-fallback){display:none}}
@media(max-width:700px){.topbar{height:auto;min-height:66px;flex-wrap:wrap;padding:8px 12px;gap:6px}.brand{font-size:23px}.brand-mark{width:38px;height:38px;font-size:25px}.top-nav{order:3;width:100%;justify-content:space-around;overflow-x:auto}.top-nav a{font-size:19px;min-width:46px;padding:5px}.top-nav a span{font-size:9px}.top-account{margin-left:auto}.layout{display:block;padding:0 10px;margin-top:10px}.sidebar{position:static;display:block;max-height:none;overflow:visible}.sidebar-user,.sidebar-brand{display:none}.sidebar nav{display:flex;gap:5px;overflow-x:auto;padding-bottom:7px}.sidebar nav a{white-space:nowrap;padding:9px 12px;font-size:12px}.sidebar nav a span{font-size:16px;min-width:auto}.content{width:100%}.compose-actions{flex-wrap:wrap}.right{display:none}}

/* Phase 7 Stories, Reels, and profiles */
.story-strip{display:flex;gap:12px;overflow-x:auto;padding:6px 0 12px}.story-tile{min-width:106px;width:106px;height:154px;border-radius:14px;background:linear-gradient(140deg,#0b3d86,#6aa9f2);color:white;text-decoration:none;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;font-weight:700;font-size:12px}.story-tile .story-thumb{position:absolute;inset:0;display:grid;place-items:center;font-size:34px}.story-tile .story-thumb img{width:100%;height:100%;object-fit:cover}.story-tile>span:last-child{position:relative;z-index:1;text-shadow:0 1px 5px #000;background:#0b285844;border-radius:5px;padding:3px}.add-story{align-items:center;justify-content:center;background:linear-gradient(#c9e0fb,#0a61c5);font-size:15px}.add-story strong{font-size:45px}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}.media-card{min-width:0}.social-media{display:block;width:100%;max-height:520px;object-fit:contain;background:#0b1b36;border-radius:12px;margin-top:12px}.media-actions{display:flex;align-items:center;gap:8px}.media-actions form{display:inline-flex;align-items:center}.media-actions button{font-size:12px}.profile-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.profile-tabs a{padding:10px 13px;background:#e4efff;border-radius:9px;text-decoration:none;color:#0751a2;font-weight:700}.profile-meta{color:#5c708b}