:root{--blue:#0089f5;--navy:#07234e;--muted:#69809e;--line:#e2edf6;--light:#eef8ff}*{box-sizing:border-box}body{margin:0;background:linear-gradient(120deg,#f1f9fe,#f8fbfe);color:var(--navy);font:15px/1.5 'Segoe UI',Arial,sans-serif}a{color:#007ae4;text-decoration:none}a:hover{text-decoration:underline}button,.button{border:0;border-radius:9px;background:linear-gradient(135deg,#009aff,#0075e4);padding:11px 18px;color:white;font:600 14px 'Segoe UI',Arial,sans-serif;cursor:pointer;display:inline-block;text-align:center}button:hover,.button:hover{filter:brightness(.96);text-decoration:none}.pale{background:#dff1ff;color:#0075d9}.danger{background:#fff0f0;color:#b32626}.wide{width:100%}.inline{display:inline}.textbutton{background:none;color:#007ae4;padding:5px 0;font-weight:400}.muted,small{color:var(--muted)}h1{font-size:28px;line-height:1.2}h2{font-size:23px;line-height:1.3;margin:0 0 12px}h3{font-size:16px;line-height:1.4;margin:0}p{margin:9px 0}input,textarea{width:100%;border:1px solid #d2e0ec;border-radius:8px;padding:12px;color:var(--navy);background:white;font:inherit;min-width:0}textarea{resize:vertical;min-height:88px}input:focus,textarea:focus{outline:2px solid #b2dfff;border-color:var(--blue)}label{display:block;font-weight:600;margin-bottom:15px}label input,label textarea{margin-top:6px}small{display:block;font-size:12px}hr{border:0;border-top:1px solid var(--line);margin:26px 0}.topbar{background:linear-gradient(100deg,#0b3869,#061e44);color:white;min-height:70px;display:flex;align-items:center;gap:22px;padding:0 28px;position:sticky;top:0;z-index:20;box-shadow:0 3px 13px #0b386920}.brand{display:flex;align-items:center;gap:10px;font-size:35px;font-weight:800;letter-spacing:-1.5px;color:inherit;white-space:nowrap}.brand img{width:48px;height:48px}.brand:hover{text-decoration:none}.topbar nav{display:flex;flex:1;justify-content:space-around;align-self:stretch;gap:5px}.topbar nav a{display:flex;align-items:center;gap:8px;color:#e9f4ff;padding:0 8px;position:relative;font-weight:500;white-space:nowrap}.topbar nav span{font-size:22px;color:#bbdefc}.topbar nav .active:after{content:'';height:4px;background:#00c2ff;position:absolute;bottom:7px;left:8px;right:8px;border-radius:4px}.search{display:flex;background:#ffffff18;border:1px solid #ffffff30;border-radius:10px;max-width:250px}.search input{background:none;border:0;color:white;padding:9px 12px}.search input::placeholder{color:#c7d8ed}.search button{background:none;padding:5px 12px;font-size:23px}.tiny{width:34px;height:34px;object-fit:cover;border-radius:50%}.testbar{text-align:center;font-size:12px;padding:7px 10px;color:#5e7691;background:#eaf6ff}.testbar a{margin-left:10px}.layout{max-width:1580px;display:grid;grid-template-columns:minmax(230px,300px) minmax(400px,1fr) minmax(245px,310px);gap:18px;margin:14px auto 75px;padding:0 24px}.left,.right{display:flex;flex-direction:column;gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 6px 20px #0c345709;overflow:hidden}.profile-card{position:relative}.profile-cover{height:125px;background:#c5e5f6 url('cover.svg') center/cover}.portrait{display:block;border:5px solid #fff;border-radius:50%;width:132px;height:132px;object-fit:cover;margin:-90px auto 12px;position:relative;box-shadow:0 3px 15px #122d4a14}.profile-info{padding:0 18px 18px}.profile-info h2{margin-top:0}.profile-info .muted{margin:0}.online{color:#279d4b}.bio{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:14px;overflow-wrap:anywhere}.bio h3{margin-bottom:7px}.bio p{margin:0}.friends-card,.right .card{padding:18px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.section-title>a,.section-title>span{font-size:12px;white-space:nowrap}.friend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 9px}.friend-grid a{text-align:center;color:var(--navy);font-weight:600;font-size:12px;min-width:0;overflow:hidden}.friend-grid img{width:100%;aspect-ratio:1;max-width:80px;height:auto;margin-bottom:4px}.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-grid span{display:block;text-overflow:ellipsis;overflow:hidden}.hero{height:235px;border-radius:13px;display:flex;position:relative;align-items:center;padding:25px 32px;background:#d4edff url('cover.svg') center/cover;overflow:hidden;margin-bottom:15px;box-shadow:0 4px 15px #105b9920}.hero>div{position:relative;z-index:1}.hero-brand{display:flex;align-items:center;font-size:clamp(42px,5.2vw,76px);font-weight:850;letter-spacing:-4px;line-height:1.2}.hero-brand img{width:90px;margin-right:12px}.hero p{font-size:27px;font-weight:700;color:#0076ed;margin:0 0 0 102px}.hero>span{position:absolute;right:18px;bottom:14px;color:white;font:italic 18px Georgia;text-shadow:0 1px 4px #18375a}.composer{display:flex;gap:13px;padding:19px;margin-bottom:16px}.composer form{flex:1;min-width:0}.composer label{font-size:14px;margin:0 0 9px}.composer textarea{height:66px;min-height:66px}.compose-bottom{display:flex;align-items:center;gap:10px;margin:9px 0}.compose-bottom button{margin-left:auto}.composer .filebutton{display:inline-block;padding:9px 14px;background:#e4f3ff;color:#007ae4;border-radius:7px;cursor:pointer;position:relative;overflow:hidden;margin:0;white-space:nowrap}.filebutton input{opacity:0;position:absolute;inset:0;cursor:pointer}.filename{font-size:11px;color:var(--muted);overflow:hidden;max-width:100px;text-overflow:ellipsis}.feed{padding:17px 12px}.feed>.section-title{padding:0 7px}.post{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:13px;scroll-margin-top:90px}.post:last-child{margin:0}.post-head{display:flex;gap:10px;align-items:center}.person{font-weight:700;color:var(--navy)}.post-menu{margin-left:auto;position:relative}.post-menu summary{cursor:pointer;list-style:none;color:var(--muted)}.post-menu form{background:white;padding:12px;box-shadow:0 5px 20px #1233;min-width:190px;position:absolute;right:0;z-index:3;border-radius:10px}.post-body{margin:10px 0 12px;overflow-wrap:anywhere}.post-photo{display:block;width:100%;max-height:480px;object-fit:cover;border-radius:9px}.post-actions{display:flex;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.comments{font-size:13px}.comments>p{padding:8px 10px;background:#f4f8fc;border-radius:7px;overflow-wrap:anywhere}.comments form{display:flex;gap:8px;margin-top:10px}.comments input{padding:8px 10px}.comments button{padding:7px 12px}.birthday{text-align:center;background:linear-gradient(120deg,white,#f1faff)}.birthday>h3{text-align:left}.birthday>.avatar{width:75px;height:75px;margin:20px 0 10px}.gift{font-size:64px;color:#69b6f2;line-height:1.5}.online-person{display:flex;align-items:center;gap:10px;margin-bottom:17px;color:var(--navy);font-size:13px}.online-person:last-child{margin:0}.online-person>span{margin-left:auto}.promise>div{display:flex;gap:12px;align-items:center;margin-top:14px}.promise>div>span{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#e5f3ff;color:var(--blue);font-size:29px}.promise p{margin:0;font-size:13px}.promise small{margin-top:3px}.chat-dock{position:fixed;bottom:46px;right:27px;background:linear-gradient(135deg,#009dff,#0066d4);color:white;padding:13px 20px;border-radius:13px;box-shadow:0 6px 20px #0067bf3a;z-index:21;font-size:14px}.chat-dock span{color:#6bff83;margin:0 17px 0 30px}footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:8px 28px;background:#ffffffef;border-top:1px solid var(--line);font-size:11px;z-index:20}footer strong{font-size:17px}footer a:first-of-type{margin-left:auto}footer em{margin-left:auto}.content{padding:28px}.content h1{margin-top:0}.content h2{font-size:19px;margin-top:25px}.row{display:flex;gap:9px}.member{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.member>.person,.member>strong{flex:1}.empty{text-align:center;padding:45px 15px;color:var(--muted)}.empty>div{font-size:58px;color:#60b4ee}.empty h2{color:var(--navy)}.empty p{margin-bottom:20px}.chat-friends{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.conversation{display:flex;flex-direction:column;gap:12px;max-height:500px;overflow:auto;padding:20px 0}.bubble{background:#eef3f8;padding:10px 15px;border-radius:12px;max-width:85%;align-self:flex-start;overflow-wrap:anywhere}.bubble p{margin:0 0 5px}.mine{align-self:flex-end;background:#def0ff}.auth{max-width:540px;margin:70px auto;background:white;border-radius:15px;padding:35px}.welcome{min-height:100vh;max-width:1250px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center;padding:40px}.welcome-copy .brand{font-size:50px}.welcome-copy h1{font-size:52px;margin-bottom:15px;letter-spacing:-2px}.welcome-copy>p{font-size:19px;color:var(--muted)}.welcome-art{width:100%;border-radius:18px;margin:24px 0}.values{display:flex;flex-wrap:wrap;gap:15px;color:#0073c9;font-size:13px}.login{padding:30px}.login>p{color:var(--muted);margin-bottom:22px}.login details{font-size:12px;color:var(--muted)}.check{font-size:12px;display:flex;gap:10px;font-weight:400}.check input{width:17px;flex-shrink:0;margin:0}.notice{background:#e2f5ec;border:1px solid #b9dfca;border-radius:9px;padding:15px;color:#205e43}.tabs{display:flex;gap:20px;padding:15px;margin-bottom:15px}.badge{background:#00a1fa;color:white;padding:0 6px;border-radius:12px;font-size:10px}
@media(min-width:1700px){.layout{margin-top:20px}.hero{height:260px}}@media(max-width:1250px){.topbar{gap:13px;padding:0 15px}.topbar nav a{font-size:12px}.topbar nav span{display:none}.search{max-width:170px}.layout{grid-template-columns:220px minmax(340px,1fr) 240px;padding:0 13px;gap:13px}.hero{padding:24px 20px}.hero-brand{font-size:56px}.hero-brand img{width:65px}.hero p{margin-left:77px;font-size:22px}.profile-info{padding:0 14px 15px}}@media(max-width:1000px){.right{display:none}.layout{grid-template-columns:220px minmax(0,1fr);max-width:950px}.topbar nav a{padding:0 5px}.topbar .search{display:none}.brand{font-size:29px}.hero-brand{font-size:64px}.welcome{gap:30px;padding:30px}.welcome-copy h1{font-size:40px}}@media(max-width:680px){.topbar{flex-wrap:wrap;padding:9px 13px;gap:5px;position:relative}.topbar .brand{margin-right:auto}.topbar>a:last-child{order:1}.topbar nav{order:2;width:100%;flex:auto;min-height:42px;overflow:auto;justify-content:space-between}.topbar nav a{font-size:11px;padding:0 5px}.topbar nav .active:after{bottom:0}.testbar{font-size:10px}.layout{display:block;padding:0 10px;margin-top:10px}.left{display:none}.hero{height:180px;padding:20px}.hero-brand{font-size:54px;letter-spacing:-2px}.hero-brand img{width:60px}.hero p{font-size:21px;margin-left:72px}.hero>span{font-size:14px}.composer{padding:13px;gap:9px}.composer>.avatar{width:33px;height:33px}.composer small{font-size:10px}.compose-bottom button,.filebutton{font-size:12px}.filename{display:none}.post{padding:11px}.post-body{font-size:14px}.post-photo{max-height:350px}.feed{padding:13px 8px}.content{padding:20px}.chat-dock{right:12px;padding:10px 15px;bottom:49px}footer{padding:10px 12px;gap:13px}footer em,footer>span{display:none}.welcome{display:block;padding:24px 15px}.welcome-copy h1{font-size:37px}.welcome-art{display:none}.welcome-copy{margin-bottom:28px}.welcome-copy>p{font-size:16px}.welcome-copy .muted{font-size:12px}.login{padding:22px}.row button{padding:10px}.auth{margin:30px 15px}.member{font-size:13px}.member button{font-size:11px;padding:8px}.tabs{flex-wrap:wrap}.comments button{font-size:11px}.bubble{max-width:95%}}