*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#f5f7fb;color:#171a21}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:12px 5%;background:#fff;border-bottom:1px solid #e5e7eb}.brand{font-size:24px;font-weight:900;margin-right:auto}.brand span{font-weight:500}nav{display:flex;gap:5px;overflow:auto}nav button{white-space:nowrap;background:transparent;padding:9px;border-radius:8px}nav button:hover{background:#f0f2f5}
main{max-width:1150px;margin:auto;padding:30px 18px 70px}.page{display:none}.page.active{display:block}.hero{padding:55px;border-radius:24px;background:linear-gradient(135deg,#e8eefc,#f4efff);min-height:360px;display:flex;align-items:center}.hero>div{max-width:760px}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:800}.hero h1{font-size:48px;line-height:1.05;margin:12px 0 18px}.hero p{font-size:18px;line-height:1.6;color:#56606f}.actions{display:flex;gap:10px;flex-wrap:wrap}
.primary,.secondary,.danger,.smallBtn{padding:11px 15px;border-radius:10px;font-weight:750}.primary{background:#111827;color:#fff}.secondary,.smallBtn{background:#fff;border:1px solid #d7dce5}.danger{background:#fee2e2;color:#991b1b}
.titleRow{display:flex;justify-content:space-between;align-items:end;margin:32px 0 16px}.titleRow h2{margin:0;font-size:30px}.titleRow p,.muted{color:#667085}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid #e3e6ec;border-radius:15px;padding:18px;box-shadow:0 4px 18px rgba(20,30,50,.04)}
.service{display:flex;flex-direction:column;gap:9px}.service h3{margin:0}.service p{margin:0;color:#596273;line-height:1.45}.meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#677284}.tag{width:max-content;background:#eef1f6;border-radius:7px;padding:5px 8px;font-size:12px}.proBadge{background:#111827;color:#fff}.featuredBadge{background:#fff4cc;color:#6f5200}.price{font-size:18px;font-weight:850}.cardActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;background:#fff;padding:14px;border:1px solid #e3e6ec;border-radius:15px}input,select,textarea{width:100%;padding:11px;border:1px solid #d8dde6;border-radius:9px;background:#fff}textarea{min-height:110px;resize:vertical}.form{display:grid;gap:13px;max-width:680px}.form label{display:grid;gap:6px;font-weight:650}.hidden{display:none!important}.authGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:20px;z-index:50}.modalBox{max-width:650px;width:100%;max-height:88vh;overflow:auto;background:#fff;border-radius:17px;padding:24px;position:relative}.close{position:absolute;right:12px;top:8px;background:transparent;font-size:28px}.review{padding:12px 0;border-top:1px solid #eee}.stack{display:grid;gap:8px}.notification,.transaction{background:#fff;border:1px solid #e4e7ec;padding:12px;border-radius:10px}.notification.unread{font-weight:700}
.chatLayout{display:grid;grid-template-columns:320px 1fr;gap:16px}.conversationList{display:grid;gap:8px;align-content:start}.conversation{padding:11px;border-radius:9px;background:#f5f6f8;text-align:left}.conversation.active{outline:2px solid #111827}.chatBox{min-height:500px;display:flex;flex-direction:column}.messages{flex:1;display:flex;flex-direction:column;gap:8px;padding:15px 0;overflow:auto}.bubble{max-width:75%;background:#eef1f6;padding:10px 12px;border-radius:12px}.bubble.mine{align-self:flex-end;background:#dfe7ff}.bubble small{display:block;color:#687285;margin-top:4px}.messageForm{display:grid;grid-template-columns:1fr auto;gap:8px}
.plansGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.planCard{position:relative}.planCard.recommended{outline:2px solid #111827}.planPrice{font-size:34px;font-weight:900;margin:12px 0}.planCard ul{padding-left:20px;line-height:1.8}.notice{margin:18px 0;background:#fff9df}.statGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}.stat{background:#f5f7fb;border-radius:12px;padding:14px}.stat b{font-size:24px;display:block}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr}.chatLayout{grid-template-columns:1fr}.plansGrid{grid-template-columns:1fr}.statGrid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){header{flex-wrap:wrap;padding:10px 14px;gap:8px}.brand{margin-right:auto}nav{order:3;width:100%}.hero{padding:30px 22px;min-height:auto}.hero h1{font-size:36px}.grid,.authGrid,.filters{grid-template-columns:1fr}.actions{flex-direction:column}.titleRow h2{font-size:26px}}