@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--purple:#6D28D9;--purple-dark:#4C1D95;--purple-soft:#F3E8FF;--ink:#181522;--muted:#716B7E;--border:#E8E3EF;--surface:#FFF;--page:#F8F7FB;--success:#15803D;--shadow:0 20px 60px rgba(35,17,65,.09)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:var(--page);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{min-height:100vh}
.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)}.brand-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px;overflow:hidden;background:#08060D}.brand-panel:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:rgba(109,40,217,.5);filter:blur(110px)}.brand-logo{position:relative;width:min(100%,680px);height:auto;object-fit:contain}.brand-tagline{position:relative;margin:28px 0 0;color:#D8C5FF;text-align:center;font-size:15px;letter-spacing:.04em}
.login-card{align-self:center;width:min(100% - 48px,470px);margin:48px auto;padding:46px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.eyebrow{margin:0 0 12px;color:var(--purple);font-size:11px;font-weight:800;letter-spacing:.22em}h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-.04em}h1{margin:0 0 14px;font-size:clamp(30px,3vw,40px);line-height:1.12}h2{margin:0;font-size:23px}h3{margin:0 0 8px;font-size:18px}.muted{color:var(--muted);line-height:1.65}.login-card>.muted{margin:0 0 30px;font-size:14px}label{display:block;margin-bottom:9px;font-size:13px;font-weight:700}input{width:100%;padding:14px 15px;border:1px solid #DCD5E8;border-radius:10px;color:var(--ink);background:#fff;outline:none}input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,40,217,.12)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 18px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:700;transition:transform .15s,background .15s}.button:disabled{opacity:.65;cursor:wait}.button-primary{width:100%;margin-top:16px;color:white;background:var(--purple)}.button-primary:hover:not(:disabled){background:var(--purple-dark);transform:translateY(-1px)}.button-secondary{color:#51485F;border-color:var(--border);background:white}.button-secondary:hover{background:#F7F3FC}.button-small{min-height:36px;padding:8px 12px;font-size:12px}.message{min-height:20px;margin:14px 0 0;font-size:13px;line-height:1.5}.message.error{color:#B42318}.message.success{color:var(--success)}.fine-print{margin:22px 0 0;color:#918A9D;font-size:11px;line-height:1.6}
.portal-screen{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px clamp(20px,5vw,72px);border-bottom:1px solid var(--border);background:white}.topbar-brand{display:inline-flex;align-items:center;width:210px;height:58px;overflow:hidden;border-radius:8px;background:#08060D}.topbar-brand img{width:100%;height:100%;object-fit:contain}.topbar-user{display:flex;align-items:center;gap:16px}.client-name{font-size:13px;font-weight:700}
.dashboard{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:48px 0 60px}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:30px}.page-heading h1{font-size:34px}.page-heading .muted{margin:0;font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:44px}.stat-card{padding:22px 24px;border:1px solid var(--border);border-radius:16px;background:white}.stat-label{display:block;margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:600}.stat-card strong{font-family:'Manrope',sans-serif;font-size:30px;letter-spacing:-.04em}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.section-heading .muted{margin:6px 0 0;font-size:13px}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.project-card{padding:23px;border:1px solid var(--border);border-radius:16px;background:white;box-shadow:0 5px 20px rgba(35,17,65,.025)}.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.project-name{margin:0;font-family:'Manrope',sans-serif;font-size:17px;font-weight:800}.status-pill{display:inline-flex;flex-shrink:0;padding:6px 9px;border-radius:999px;color:var(--purple-dark);background:var(--purple-soft);font-size:10px;font-weight:800;text-transform:capitalize}.status-pill.status-completed,.status-pill.status-approved{color:#166534;background:#DCFCE7}.status-pill.status-cancelled{color:#991B1B;background:#FEE2E2}.project-meta{display:flex;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid #F0ECF4;color:var(--muted);font-size:12px}.project-meta strong{color:var(--ink);font-weight:700}.empty-state{margin-top:14px;padding:54px 24px;border:1px dashed #D8CDE8;border-radius:16px;text-align:center;background:rgba(255,255,255,.7)}.empty-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 16px;border-radius:14px;color:var(--purple);background:var(--purple-soft);font-size:23px}.empty-state p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.portal-note{margin-top:40px;color:#8C8598;text-align:center;font-size:12px}
@media(max-width:800px){.login-layout{grid-template-columns:1fr;align-content:start}.brand-panel{min-height:230px;padding:28px 24px 24px}.brand-logo{max-width:440px}.brand-tagline{margin-top:12px;font-size:12px}.login-card{width:min(100% - 32px,470px);margin:24px auto 40px;padding:30px 24px}.topbar{padding:12px 16px}.topbar-brand{width:155px;height:44px}.client-name{display:none}.dashboard{width:calc(100% - 32px);padding-top:32px}.stats-grid{gap:10px}.stat-card{padding:16px}.stat-card strong{font-size:24px}.projects-grid{grid-template-columns:1fr}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.stat-card{display:flex;align-items:center;justify-content:space-between}.stat-label{margin:0}.section-heading{align-items:flex-start}}