.portal-body{background:#090a0d;min-height:100dvh}
.portal-shell{min-height:100dvh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.portal-sidebar{position:sticky;top:0;height:100dvh;border-inline-end:1px solid var(--line);background:#0d0f13;padding:24px 16px;display:flex;flex-direction:column;z-index:60}
.portal-sidebar .brand{padding:5px 10px 27px}.portal-sidebar .wordmark{font-size:1.25rem}
.portal-nav{display:grid;gap:6px}.portal-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:#8e9199;font-size:.78rem;transition:.2s ease}
.portal-nav a:hover,.portal-nav a.active{background:var(--gold-soft);color:var(--text)}.portal-nav a.active svg{color:var(--gold-2)}
.portal-nav .nav-count{margin-inline-start:auto;background:var(--gold-2);color:#171006;min-width:21px;height:21px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-family:var(--font-latin);font-size:.62rem;font-weight:800}
.portal-user{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.user-chip{display:flex;gap:11px;align-items:center;padding:10px;border-radius:13px;cursor:pointer}.user-chip:hover{background:#15171c}
.avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#654820,var(--gold-2));display:grid;place-items:center;color:#171006;font-weight:800;flex:none}
.user-chip strong{display:block;font-size:.76rem}.user-chip small{display:block;color:var(--muted);font-size:.62rem}

.portal-main{min-width:0}.portal-topbar{height:78px;position:sticky;top:0;z-index:50;background:rgba(9,10,13,.83);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.portal-topbar h1{font-size:1rem;margin:0}.topbar-actions{display:flex;gap:8px;align-items:center}.topbar-date{color:var(--muted);font-size:.7rem}
.portal-content{padding:28px 30px 60px;max-width:1500px;margin:auto}
.welcome{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.welcome h2{font-size:clamp(1.65rem,3vw,2.7rem);line-height:1.25;margin:0 0 7px}.welcome p{margin:0;color:var(--muted);font-size:.78rem}
.next-action{border:1px solid #654d2a;background:linear-gradient(135deg,rgba(200,146,62,.17),rgba(200,146,62,.04));border-radius:20px;padding:20px 22px;display:flex;align-items:center;gap:16px;margin-bottom:20px}
.next-icon{width:48px;height:48px;border-radius:15px;background:var(--gold-2);color:#171006;display:grid;place-items:center;flex:none}.next-action h3{margin:0 0 3px;font-size:.94rem}.next-action p{margin:0;color:#aea99e;font-size:.72rem}.next-action .btn{margin-inline-start:auto}

.client-dashboard{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:18px}
.dashboard-column{display:grid;gap:18px;align-content:start}
.portal-card{padding:20px}.portal-card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}.portal-card-head h3{margin:0;font-size:.9rem}.portal-card-head a,.portal-card-head button{color:var(--gold-2);font-size:.68rem;background:0;border:0;cursor:pointer}
.project-hero{padding:24px;min-height:335px;position:relative;overflow:hidden}.project-hero::before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;background:var(--gold);filter:blur(130px);opacity:.11;inset-inline-end:-90px;top:-120px}
.project-top{position:relative;display:flex;justify-content:space-between;gap:20px}.project-ref{font-family:var(--font-latin);color:var(--muted);font-size:.65rem}.project-hero h3{font-size:1.35rem;margin:7px 0}.project-status{display:grid;justify-items:end;gap:5px}.project-status span:last-child{font-family:var(--font-latin);font-size:1.5rem;color:var(--gold-2)}
.project-progress{position:relative;margin:25px 0 21px}
.project-progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.68rem;margin-bottom:8px}
.mini-timeline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:29px}.mini-timeline::before{content:"";height:1px;background:#31343b;position:absolute;top:7px;inset-inline:5px}
.mini-step{position:relative;padding-top:23px;font-size:.62rem;color:#72767f}.mini-step::before{content:"";position:absolute;top:2px;inset-inline-start:0;width:11px;height:11px;border-radius:50%;background:#262931;border:2px solid #565962;z-index:1}
.mini-step.done{color:#b6b3ad}.mini-step.done::before{background:var(--gold-2);border-color:var(--gold-2)}.mini-step.active{color:var(--gold-2)}.mini-step.active::before{background:#0d0f13;border-color:var(--gold-2);box-shadow:0 0 0 5px rgba(200,146,62,.12)}

.approval-list,.notification-list,.booking-list,.invoice-list{display:grid;gap:10px}
.approval-item,.notification-item,.booking-item,.invoice-item{border:1px solid var(--line-soft);background:#101217;border-radius:14px;padding:13px;display:flex;align-items:center;gap:12px}
.item-icon{width:39px;height:39px;border-radius:12px;background:#1b1e25;color:var(--gold-2);display:grid;place-items:center;flex:none}.item-main{min-width:0;flex:1}.item-main strong{font-size:.75rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-main small{color:var(--muted);font-size:.62rem}.item-amount{font-family:var(--font-latin);font-size:.76rem;color:#d8d4cd}
.approval-actions{display:flex;gap:6px}.approval-actions button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#17191f;display:grid;place-items:center;cursor:pointer}.approval-actions .approve{color:var(--green)}.approval-actions .change{color:var(--orange)}

.wallet-card{padding:22px;background:
  radial-gradient(circle at 85% 15%,rgba(229,184,101,.18),transparent 32%),
  linear-gradient(145deg,#1c1915,#101217);border-color:#56452d;min-height:210px}
.wallet-tier{display:flex;justify-content:space-between;align-items:center;color:var(--gold-3);font-family:var(--font-latin);font-size:.68rem}.wallet-points{font-family:var(--font-latin);font-size:2.55rem;font-weight:750;line-height:1.1;margin:27px 0 4px}.wallet-points+span{color:#9a958a;font-size:.67rem}
.wallet-progress{margin-top:24px}.wallet-progress .spread{font-size:.58rem;color:#8d887e;margin-top:7px}
.supervisor{display:flex;gap:13px;align-items:center}.supervisor .avatar{width:47px;height:47px;border-radius:50%}.supervisor-info{flex:1}.supervisor-info strong{font-size:.76rem;display:block}.supervisor-info small{color:var(--muted);font-size:.62rem}.online{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;margin-inline-end:5px;box-shadow:0 0 0 4px rgba(67,201,139,.1)}

.view{display:none}.view.active{display:block;animation:viewIn .25s ease}@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.view-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:23px}.view-head h2{font-size:1.7rem;margin:0 0 5px}.view-head p{margin:0;color:var(--muted);font-size:.72rem}
.project-grid,.booking-grid,.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.project-card{padding:20px}.project-card h3{font-size:1rem;margin:8px 0}.project-card p{color:var(--muted);font-size:.7rem;margin:0 0 18px}
.project-card .spread{font-size:.67rem;margin-bottom:8px}.project-card-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:17px;color:var(--muted);font-size:.64rem}
.chat-layout{display:grid;grid-template-columns:310px minmax(0,1fr);height:calc(100dvh - 140px);min-height:590px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0e1014}
.conversation-list{border-inline-end:1px solid var(--line);overflow:auto}.conversation-head{padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0e1014;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px}.conversation-head h3{margin:0;font-size:.9rem}
.conversation-item{padding:15px 17px;border-bottom:1px solid var(--line-soft);display:flex;gap:11px;cursor:pointer;transition:.2s}.conversation-item:hover,.conversation-item.active{background:#17191f}.conversation-item .avatar{width:39px;height:39px;border-radius:50%}.conversation-item strong{font-size:.73rem;display:block}.conversation-item p{font-size:.62rem;color:var(--muted);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.chat-panel{display:grid;grid-template-rows:auto 1fr auto;min-width:0}.chat-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}.chat-head .avatar{width:40px;height:40px;border-radius:50%}.chat-head strong{font-size:.77rem}.chat-head small{display:block;color:var(--muted);font-size:.6rem}
.messages{padding:21px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:radial-gradient(circle at 50% 10%,rgba(200,146,62,.035),transparent 30%)}
.message{max-width:min(70%,540px);padding:11px 14px;border-radius:15px 15px 4px;background:#1a1d23;align-self:flex-start}.message.mine{align-self:flex-end;background:#3a2a17;border:1px solid #5b4327;border-radius:15px 15px 15px 4px}.message p{margin:0;font-size:.74rem}.message time{font-family:var(--font-latin);font-size:.55rem;color:#777a82;display:block;margin-top:5px}
.chat-compose{border-top:1px solid var(--line);padding:12px;display:flex;gap:8px;align-items:end}.chat-compose textarea{min-height:45px;max-height:130px;resize:none}.chat-compose .btn-icon{flex:none}
.live-state{margin-inline-start:auto;padding:5px 8px;border-radius:999px;font-size:.56rem;color:var(--muted);background:#171a20;border:1px solid var(--line)}
.live-state[data-state="live"]{color:var(--green);background:rgba(67,201,139,.08);border-color:rgba(67,201,139,.2)}
.live-state[data-state="error"]{color:var(--red);background:rgba(239,102,115,.08);border-color:rgba(239,102,115,.2)}
.chat-send-button{background:var(--gold-2);color:#171006}
.profile-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.profile-card{padding:24px;text-align:center}.profile-card .avatar{width:90px;height:90px;border-radius:28px;margin:0 auto 14px;font-size:1.5rem}.profile-card h3{margin:0}.profile-card p{color:var(--muted);font-size:.68rem}.profile-form{padding:24px}
.file-list{display:grid;gap:10px}.file-item{padding:14px 16px;display:flex;align-items:center;gap:12px}.file-item .btn-icon{flex:none}

.portal-mobile-nav{display:none}.mobile-top-brand{display:none}
@media(max-width:1100px){
  .portal-shell{grid-template-columns:86px minmax(0,1fr)}.portal-sidebar{padding-inline:12px}.portal-sidebar .brand-lockup,.portal-nav span,.portal-user .user-chip>div:not(.avatar){display:none}.portal-sidebar .brand{justify-content:center}.portal-nav a{justify-content:center;padding:13px}.portal-nav .nav-count{position:absolute;margin:0;transform:translate(13px,-11px)}.portal-nav a{position:relative}
  .client-dashboard{grid-template-columns:1fr}.project-grid,.booking-grid,.reward-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .portal-shell{display:block}.portal-sidebar{display:none}.portal-topbar{height:64px;padding:0 15px}.portal-topbar h1,.topbar-date{display:none}.mobile-top-brand{display:block}.mobile-top-brand .wordmark{font-size:1.05rem}
  .portal-content{padding:18px 15px calc(100px + env(safe-area-inset-bottom))}
  .welcome{display:block;margin-bottom:17px}.welcome h2{font-size:1.7rem}.welcome .btn{display:none}
  .next-action{padding:15px;border-radius:17px}.next-icon{width:43px;height:43px}.next-action .btn{width:42px;min-width:42px;padding:0;font-size:0}.next-action .btn svg{font-size:1rem}
  .project-hero{min-height:360px;padding:20px}.project-top{display:block}.project-status{position:absolute;top:0;inset-inline-end:0}.mini-timeline{display:flex;overflow:auto;gap:0;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}.mini-step{flex:0 0 115px}
  .client-dashboard{display:block}.dashboard-column{margin-bottom:14px}.portal-card{padding:17px}.portal-card-head{margin-bottom:14px}
  .project-grid,.booking-grid,.reward-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory;margin-inline:-15px;padding-inline:15px;scrollbar-width:none}.project-card,.booking-grid>.card,.reward-grid>.card{flex:0 0 86vw;scroll-snap-align:center}
  .view-head{align-items:start}.view-head h2{font-size:1.45rem}.view-head .btn{width:43px;min-width:43px;font-size:0;padding:0}.view-head .btn svg{font-size:1rem}
  .chat-layout{display:block;height:calc(100dvh - 165px);min-height:0;border-radius:18px}.conversation-list{height:100%;border:0}.chat-panel{position:fixed;z-index:100;inset:0;background:#0d0f13;transform:translateX(110%);transition:.25s ease}.chat-panel.open{transform:none}.chat-head{padding-top:max(15px,env(safe-area-inset-top))}
  html[dir="ltr"] .chat-panel{transform:translateX(-110%)}html[dir="ltr"] .chat-panel.open{transform:none}
  .message{max-width:84%}.chat-compose{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .profile-layout{grid-template-columns:1fr}.profile-card{padding:20px}.profile-form{padding:18px}
  .portal-mobile-nav{position:fixed;z-index:70;bottom:8px;inset-inline:10px;height:68px;border:1px solid rgba(255,255,255,.12);border-radius:21px;background:rgba(14,16,20,.91);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);padding:5px 3px calc(5px + env(safe-area-inset-bottom));box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .portal-mobile-nav a{display:grid;place-items:center;align-content:center;gap:2px;color:#727680;font-size:.53rem}.portal-mobile-nav a.active{color:var(--gold-2)}.portal-mobile-nav svg{font-size:1.08rem}.portal-mobile-nav .chat-tab{width:48px;height:48px;margin:-15px auto 0;border-radius:16px;background:linear-gradient(135deg,var(--gold-2),#b87521);color:#181108;box-shadow:0 9px 25px rgba(200,146,62,.3)}
}
html[data-theme="future"] .portal-body{background:#040712}
html[data-theme="future"] .portal-sidebar{background:#06101d}
html[data-theme="future"] .portal-topbar{background:rgba(4,7,18,.86)}
html[data-theme="future"] .avatar{background:linear-gradient(135deg,#65e9ff,#5a8cff 58%,#976cff);color:#031019}
html[data-theme="future"] .next-action{border-color:#235c7a;background:linear-gradient(135deg,rgba(36,207,238,.15),rgba(126,92,255,.05))}
html[data-theme="future"] .approval-item,html[data-theme="future"] .notification-item,html[data-theme="future"] .booking-item,html[data-theme="future"] .invoice-item{background:#071321}
html[data-theme="future"] .wallet-card{background:radial-gradient(circle at 85% 15%,rgba(36,207,238,.18),transparent 32%),linear-gradient(145deg,#071d2c,#07101c);border-color:#23526c}
html[data-theme="future"] .chat-layout,html[data-theme="future"] .conversation-head{background:#06101d}
html[data-theme="future"] .conversation-item:hover,html[data-theme="future"] .conversation-item.active{background:#0b1c2d}
html[data-theme="future"] .message.mine{background:#0c3441;border-color:#216076}
@media(min-width:1101px){
  html[data-theme="future"] .portal-shell{grid-template-columns:104px minmax(0,1fr)}
  html[data-theme="future"] .portal-sidebar{padding-inline:12px;border-inline-end-color:#173a53}
  html[data-theme="future"] .portal-sidebar .brand-lockup,html[data-theme="future"] .portal-nav span,html[data-theme="future"] .portal-user .user-chip>div:not(.avatar){display:none}
  html[data-theme="future"] .portal-sidebar .brand{justify-content:center}
  html[data-theme="future"] .portal-sidebar .brand::after{content:"O";font:750 1.65rem/1 var(--font-latin);color:#65e9ff;text-shadow:0 0 25px rgba(101,233,255,.35)}
  html[data-theme="future"] .portal-nav a{justify-content:center;padding:13px;border-radius:4px}
  html[data-theme="future"] .portal-nav .nav-count{position:absolute;margin:0;transform:translate(13px,-11px)}
  html[data-theme="future"] .project-hero,html[data-theme="future"] .portal-card{border-radius:5px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
}
@media(max-width:760px){html[data-theme="future"] .portal-mobile-nav{background:rgba(5,14,25,.93);border-radius:13px}html[data-theme="future"] .portal-mobile-nav .chat-tab{background:linear-gradient(135deg,#65e9ff,#5a8cff 60%,#976cff)}}