:root{color-scheme:dark;--bg:#071521;--surface:#102435;--surface2:#152e41;--border:#294457;--text:#e8f2f8;--muted:#9cb1c0;--accent:#54b7ff;--green:#27c5a4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 system-ui,Tahoma,Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.top{height:72px;display:flex;align-items:center;gap:22px;padding:0 24px;background:#091c2b;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px;min-width:240px}.brand strong{display:block;font-size:17px;direction:ltr;text-align:right}.brand small{display:block;color:var(--muted);font-size:11px}.logo{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#147a91,#16b78e);font-weight:900;letter-spacing:-2px}.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:8px 13px;flex:1;max-width:500px}.search span{font-size:24px}.search input{background:none;border:0;outline:none;color:var(--text);width:100%;min-width:0}.topnav{display:flex;gap:12px;margin-inline:auto}.topnav button{background:none;border:0;color:var(--muted);font-size:27px;padding:2px 13px;border-bottom:3px solid transparent}.topnav button.active{color:var(--accent);border-color:var(--accent)}.preview,.demo-tag{font-size:11px;color:#a6d8fa;border:1px solid #285678;border-radius:20px;padding:5px 10px}.layout{max-width:1540px;margin:auto;padding:22px;display:grid;grid-template-columns:225px minmax(0,1fr) 290px;gap:18px;align-items:start}.sidebar,.rightbar{position:sticky;top:94px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{width:100%;text-align:right;padding:12px 15px;color:var(--text);background:none;border:0;border-radius:10px;font-size:17px}.sidebar nav button span{font-size:14px;margin-right:12px}.sidebar nav button.active,.sidebar nav button:hover{background:#163b5b}.primary{background:linear-gradient(115deg,#087f73,#10b39a);border:1px solid #31d5b5;color:white;padding:12px 18px;border-radius:9px;font-weight:700}.full{width:100%;margin-top:17px}.side-section{border-top:1px solid var(--border);margin-top:22px;padding-top:12px}.side-section h4{color:var(--muted);font-size:13px}.side-section a{display:block;padding:9px 5px;color:#c5d8e4;font-size:13px}.intro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.intro small{color:var(--green)}h1{margin:1px 0;font-size:25px}h2,h3{margin:0 0 10px}.intro p,.right-panel p{margin:2px 0 0;color:var(--muted);font-size:13px}.card{border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden}.composer{padding:16px}.composer-line{display:flex;align-items:center;gap:12px}.avatar{background:linear-gradient(135deg,#2b7b9c,#12a27e);border:2px solid #6bd7bd;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-weight:bold;flex:none}.composer-line button{flex:1;border:1px solid var(--border);border-radius:13px;text-align:right;background:var(--surface2);color:var(--muted);padding:13px}.compose-actions{display:flex;justify-content:space-around;gap:8px;margin-top:15px;flex-wrap:wrap}.compose-actions button,.post-actions button,.filters button,.text-button{background:transparent;border:0;color:#bcd3e0;padding:7px 10px}.compose-actions button:hover,.post-actions button:hover{color:var(--accent)}.filters{display:flex;gap:8px;overflow:auto;padding:18px 0 12px}.filters button{white-space:nowrap;background:#102536;border:1px solid #254254;border-radius:25px;font-size:13px}.filters button.selected{background:#2076ae;color:white}.post{margin-bottom:15px;padding:17px}.post-head{display:flex;align-items:center;gap:10px}.post-head .person{flex:1}.person strong{display:block}.person small{color:var(--muted);font-size:12px}.post .category{font-size:11px;color:#75d9c2;border:1px solid #25695d;padding:3px 8px;border-radius:20px}.post h3{margin:14px 0 4px;font-size:18px}.post p{white-space:pre-wrap;overflow-wrap:anywhere;color:#d6e4ed;margin:0 0 15px}.post-art{height:220px;display:grid;place-items:center;background:radial-gradient(circle at 45% 35%,#285c78,#0c2738 70%);border:1px solid #355467;border-radius:10px;margin-bottom:10px;text-align:center}.post-art .machine{font-size:82px}.post-art small{display:block;color:#aac5d5}.post-meta{color:var(--muted);font-size:12px;padding:10px 0;border-bottom:1px solid var(--border)}.post-actions{display:flex;justify-content:space-between;gap:4px}.post-actions button{font-size:13px}.post-actions button.liked{color:#6fc1ff}.comment-area{margin-top:10px;border-top:1px solid var(--border);padding-top:12px}.comment-area input{width:100%;padding:11px;border-radius:9px;background:#0a1d2b;border:1px solid var(--border);color:white}.comment-item{background:#0c2030;padding:8px 10px;border-radius:8px;margin:8px 0;overflow-wrap:anywhere}.rightbar{display:grid;gap:14px}.community-banner{padding:0 14px 16px}.banner-art{height:95px;background:linear-gradient(120deg,#245b71,#142d42,#256f65);display:grid;place-items:center;font-size:35px;margin:0 -14px 12px}.community-banner h2{font-size:18px;direction:ltr;text-align:right}.community-banner p{color:var(--muted);font-size:12px}.stats{display:flex;justify-content:space-around;text-align:center;margin-top:16px;border-top:1px solid var(--border);padding-top:12px}.stats strong,.stats small{display:block}.stats strong{font-size:12px}.stats small{font-size:11px;color:var(--muted)}.right-panel{padding:15px}.right-panel h3{font-size:15px}.group-mini{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #263e4e}.group-mini>span{font-size:25px;background:#214358;border-radius:8px;padding:4px 10px}.group-mini b,.group-mini small{display:block}.group-mini b{font-size:13px}.group-mini small{color:var(--muted);font-size:11px}.text-button{color:#6ec8ff}.link-button{display:block;text-align:center;margin-top:14px}.placeholder{padding:24px}.placeholder h2{font-size:21px}.placeholder p{color:var(--muted)}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px}.tile{padding:18px;background:#152f43;border:1px solid #315166;border-radius:12px}.tile strong{display:block;margin:6px 0}.tile p{font-size:12px}dialog{border:1px solid #3b6376;border-radius:15px;background:#102737;color:white;width:min(95vw,570px);padding:23px}dialog::backdrop{background:#020912cf}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head button,.modal-actions button:not(.primary){background:#1b394a;border:1px solid #35586a;color:white;border-radius:8px;padding:8px 12px}.hint{color:#a9c3d1;font-size:12px}dialog label{display:block;margin:12px 0}dialog input,dialog textarea,dialog select{display:block;width:100%;padding:11px;margin-top:6px;border-radius:8px;background:#091c29;border:1px solid #3a6071;color:white}dialog textarea{resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}#toast{position:fixed;bottom:78px;left:18px;background:#1a4c60;color:white;border-radius:10px;padding:12px 16px;display:none;z-index:10}.bottomnav{display:none}@media(max-width:1150px){.layout{grid-template-columns:200px minmax(0,1fr)}.rightbar{display:none}.topnav{margin:0}}@media(max-width:730px){.top{height:62px;padding:0 12px;gap:9px}.brand{min-width:0}.brand strong{font-size:12px}.brand small{font-size:10px}.logo{width:35px;height:35px;font-size:12px}.search{max-width:none;padding:5px 8px}.search input{font-size:12px}.topnav,.preview,.sidebar{display:none}.layout{display:block;padding:12px 10px 78px}.intro h1{font-size:21px}.intro p{font-size:12px}.demo-tag{font-size:9px}.composer{padding:12px}.compose-actions button{font-size:12px;padding:5px}.post{padding:12px}.post-art{height:170px}.bottomnav{display:flex;justify-content:space-around;align-items:center;position:fixed;bottom:0;right:0;left:0;background:#0b2030;border-top:1px solid #335367;padding:5px 0 max(7px,env(safe-area-inset-bottom));z-index:7}.bottomnav button{background:none;border:0;color:#bdd0dc;font-size:25px;display:grid;justify-items:center}.bottomnav button small{font-size:10px}.bottomnav button.active{color:#66c0ff}.bottomnav .plus{background:#268de3;border-radius:50%;color:white;width:46px;height:46px;display:grid;place-items:center;font-size:28px}.post-actions button{font-size:12px;padding:7px 4px}}
/* Professional profile preview */
.profile-cover{height:135px;border-radius:14px 14px 0 0;background:linear-gradient(110deg,#105a67,#183b61 52%,#138c78);position:relative}
.profile-summary{padding:0 18px 18px;margin-top:-35px;position:relative}.profile-big-avatar{height:74px;width:74px;border:4px solid #102435;border-radius:50%;display:grid;place-items:center;background:linear-gradient(130deg,#1c8ba1,#18b98c);font-size:26px;font-weight:800}.profile-summary h2{margin:8px 0 0}.profile-summary p{color:var(--muted);margin:4px 0}.profile-label{display:inline-block;color:#6de1c1;font-size:12px}.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.profile-actions button{border-radius:9px;padding:10px 14px}.profile-secondary{background:#1b394d;color:#d8ecf7;border:1px solid #3a5b6c}.profile-section{padding:18px;margin-top:14px}.profile-section h3{font-size:17px}.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-field{background:#152e40;border:1px solid #29485a;border-radius:10px;padding:10px;min-width:0;overflow-wrap:anywhere}.profile-field small{display:block;color:var(--muted);font-size:11px}.profile-field strong{display:block;font-size:13px;margin-top:4px}.profile-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.profile-form label{font-size:13px;color:#cce1ec}.profile-form input,.profile-form select,.profile-form textarea{width:100%;background:#0b1e2c;border:1px solid #38596b;border-radius:8px;color:white;padding:10px;margin-top:5px;min-width:0}.profile-form textarea{resize:vertical}.profile-form .wide{grid-column:1/-1}.profile-note{color:#a8c0ce;font-size:12px}.profile-login{border:1px dashed #387b82;border-radius:11px;padding:16px;background:#102c39;margin-top:14px}.profile-login button:disabled{opacity:.65;cursor:not-allowed}@media(max-width:730px){.profile-fields,.profile-form{grid-template-columns:1fr}.profile-cover{height:105px}.profile-section{padding:13px}.profile-summary{padding:0 13px 14px}}

/* Compact mobile navigation and professional network profile */
.profile-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 8px;scrollbar-width:thin}
.profile-tabs button{flex:0 0 auto;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);padding:8px 16px;font-size:13px}
.profile-tabs button.active{color:#071b29;background:#5dc9b4;border-color:#5dc9b4;font-weight:700}
.skill-list{display:flex;flex-wrap:wrap;gap:8px}.skill-pill{border-radius:999px;padding:6px 12px;border:1px solid #2f897d;background:#143e46;color:#a6f2df;font-size:13px}
.professional-profile{overflow:hidden}
@media(max-width:730px){
.top{height:65px;padding:0 12px;gap:9px}
.brand{min-width:0;flex:0 0 auto;gap:7px}.brand strong{font-size:12px;max-width:143px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand small{font-size:9px}
.logo{width:35px;height:35px;font-size:12px}
.search{padding:5px 8px;min-width:0;border-radius:10px}.search input{font-size:12px}.search span{font-size:19px}
.intro{margin-bottom:15px}.intro h1{font-size:24px}.intro p{font-size:13px}
.composer{padding:12px}.composer-line{gap:8px}.composer-line button{font-size:13px;padding:10px}.compose-actions button{font-size:12px}
.profile-summary h2{font-size:21px}
}

/* Lucide open-source SVG assets, pinned version, loaded individually (no bulky icon font). */
.ui-icon{width:19px;height:19px;display:inline-block;vertical-align:middle;flex-shrink:0;filter:brightness(0) saturate(100%) invert(83%) sepia(15%) saturate(363%) hue-rotate(160deg) brightness(100%) contrast(95%)}
button.active .ui-icon,.selected .ui-icon{filter:brightness(0) saturate(100%) invert(73%) sepia(51%) saturate(1808%) hue-rotate(171deg) brightness(105%) contrast(102%)}
.search .ui-icon{width:20px;height:20px}.topnav button .ui-icon{width:22px;height:22px}
#sideNav button{display:flex;align-items:center;gap:12px}
.compose-actions button .ui-icon{width:17px;height:17px;margin-inline-end:4px}