/* Zeshan Freelance — client portal (dark/teal, matches theme) */
.zfl-portal{
	--zfl-bg:#0d1216;
	--zfl-surface:#111820;
	--zfl-line:#1e2a33;
	--zfl-ink:#e9f1f4;
	--zfl-muted:#8fa3ac;
	--zfl-faint:#5e727b;
	--zfl-teal:#2dd4bf;
	--zfl-teal-soft:#5eead4;
	--zfl-on-teal:#04120f;
	max-width:1080px;
	margin:0 auto;
	font-family:'Inter',system-ui,sans-serif;
	color:var(--zfl-ink);
}
/* If theme provides tokens, inherit them */
:root[data-theme] .zfl-portal{color:var(--ink,#e9f1f4)}

.zfl-flash{max-width:1080px;margin:0 auto 20px;padding:13px 18px;border-radius:10px;font-size:14.5px;border:1px solid}
.zfl-flash-success{background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.4);color:#2dd4bf}
.zfl-flash-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#f87171}

.zfl-portal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.zfl-hello{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em}
.zfl-sub{color:var(--zfl-muted);font-size:15px;margin-top:4px}
.zfl-logout{color:var(--zfl-muted);font-size:14px;border:1px solid var(--zfl-line);padding:9px 16px;border-radius:8px;text-decoration:none;transition:.2s}
.zfl-logout:hover{border-color:var(--zfl-teal);color:var(--zfl-teal)}

.zfl-card{background:var(--zfl-surface);border:1px solid var(--zfl-line);border-radius:16px;padding:26px 28px}
.zfl-card h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;margin:0 0 18px;color:var(--zfl-ink)}

.zfl-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zfl-dash-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}

.zfl-portal label{display:block;font-size:13.5px;color:var(--zfl-muted);margin-bottom:14px;font-weight:500}
.zfl-portal input,.zfl-portal select,.zfl-portal textarea{
	display:block;width:100%;margin-top:7px;
	background:var(--zfl-bg);border:1px solid var(--zfl-line);border-radius:9px;
	padding:12px 14px;color:var(--zfl-ink);font-family:inherit;font-size:15px;transition:.2s;
}
.zfl-portal input:focus,.zfl-portal select:focus,.zfl-portal textarea:focus{
	outline:0;border-color:var(--zfl-teal);box-shadow:0 0 0 3px rgba(45,212,191,.14)
}
.zfl-portal textarea{resize:vertical}
.zfl-portal select option{background:#111820;color:#e9f1f4}

.zfl-btn{
	background:var(--zfl-teal);color:var(--zfl-on-teal);border:0;border-radius:9px;
	padding:13px 24px;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;
	transition:.2s;width:100%;margin-top:4px;
}
.zfl-btn:hover{background:var(--zfl-teal-soft);transform:translateY(-1px)}

.zfl-note{font-size:13px;color:var(--zfl-faint);margin:0 0 6px;line-height:1.5}

.zfl-orders{width:100%;border-collapse:collapse;font-size:14px}
.zfl-orders th,.zfl-orders td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--zfl-line)}
.zfl-orders th{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--zfl-faint);font-weight:600}
.zfl-orders td{color:var(--zfl-muted)}
.zfl-empty{color:var(--zfl-faint);font-size:14.5px}

.zfl-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
	background:var(--zfl-line);color:var(--zfl-muted)}
.zfl-badge-pending{background:rgba(234,179,8,.15);color:#eab308}
.zfl-badge-in-progress{background:rgba(59,130,246,.15);color:#60a5fa}
.zfl-badge-invoiced{background:rgba(168,85,247,.15);color:#c084fc}
.zfl-badge-paid{background:rgba(45,212,191,.15);color:#2dd4bf}
.zfl-badge-cancelled{background:rgba(239,68,68,.15);color:#f87171}

@media (max-width:820px){
	.zfl-auth-grid,.zfl-dash-grid{grid-template-columns:1fr}
	.zfl-orders{display:block;overflow-x:auto}
}

/* ============================================================
   Premium auth (login / signup) — split card with brand panel
   ============================================================ */
.zfl-auth-wrap{
	--zfl-bg:#0d1216;--zfl-surface:#111820;--zfl-line:#1e2a33;
	--zfl-ink:#e9f1f4;--zfl-muted:#8fa3ac;--zfl-faint:#5e727b;
	--zfl-teal:#2dd4bf;--zfl-teal-soft:#5eead4;--zfl-cyan:#22a5c9;--zfl-on-teal:#04120f;
	min-height:70vh;display:flex;align-items:center;justify-content:center;
	padding:40px 0;font-family:'Inter',system-ui,sans-serif;color:var(--zfl-ink);
}
.zfl-auth-card{
	display:grid;grid-template-columns:1fr 1.1fr;width:100%;max-width:920px;
	background:var(--zfl-surface);border:1px solid var(--zfl-line);border-radius:20px;
	overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}

/* Left brand panel */
.zfl-auth-aside{
	position:relative;padding:44px 40px;
	background:
		radial-gradient(circle at 25% 20%,rgba(45,212,191,.18),transparent 55%),
		linear-gradient(160deg,#0f1c20,#0a1013);
	border-right:1px solid var(--zfl-line);
	display:flex;flex-direction:column;
}
.zfl-auth-aside::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background-image:linear-gradient(rgba(45,212,191,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.06) 1px,transparent 1px);
	background-size:34px 34px;
	-webkit-mask-image:radial-gradient(circle at 30% 25%,#000,transparent 70%);
	mask-image:radial-gradient(circle at 30% 25%,#000,transparent 70%);
}
.zfl-auth-brandmark{display:flex;align-items:center;gap:11px;position:relative;z-index:1;margin-bottom:auto}
.zfl-shield{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--zfl-teal),var(--zfl-cyan));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.zfl-shield svg{width:21px;height:21px;fill:var(--zfl-on-teal)}
.zfl-brandname{font-family:'Sora',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em}
.zfl-auth-headline{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:32px 0 12px;position:relative;z-index:1}
.zfl-auth-tagline{color:var(--zfl-muted);font-size:15px;line-height:1.6;position:relative;z-index:1;margin-bottom:22px}
.zfl-auth-perks{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid;gap:12px}
.zfl-auth-perks li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--zfl-ink)}
.zfl-auth-perks li::before{content:"";width:18px;height:18px;border-radius:50%;flex-shrink:0;
	background:rgba(45,212,191,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.zfl-auth-pkg{position:relative;z-index:1;background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.3);border-radius:12px;padding:16px 18px}
.zfl-auth-pkg-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zfl-teal)}
.zfl-auth-pkg-v{font-family:'Sora',sans-serif;font-weight:600;font-size:17px;margin:5px 0 6px}
.zfl-auth-pkg-note{font-size:13px;color:var(--zfl-muted)}

/* Right form panel */
.zfl-auth-main{padding:44px 44px 40px}
.zfl-auth-tabs{position:relative;display:flex;gap:6px;background:var(--zfl-bg);border:1px solid var(--zfl-line);border-radius:11px;padding:5px;margin-bottom:30px}
.zfl-tab{flex:1;position:relative;z-index:1;background:none;border:0;cursor:pointer;padding:11px 0;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--zfl-muted);border-radius:8px;transition:color .25s}
.zfl-tab-underline{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:8px;background:var(--zfl-teal);transition:transform .28s cubic-bezier(.16,1,.3,1);z-index:0}
.zfl-auth-main[data-tab="signup"] .zfl-tab-underline{transform:translateX(100%)}
.zfl-auth-main[data-tab="login"]  .zfl-tab[data-target="login"],
.zfl-auth-main[data-tab="signup"] .zfl-tab[data-target="signup"]{color:var(--zfl-on-teal)}

/* Form show/hide by active tab */
.zfl-auth-form{display:none;animation:zflFade .35s ease}
.zfl-auth-main[data-tab="login"]  .zfl-auth-form[data-form="login"]{display:block}
.zfl-auth-main[data-tab="signup"] .zfl-auth-form[data-form="signup"]{display:block}
@keyframes zflFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.zfl-auth-h{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 5px}
.zfl-auth-p{color:var(--zfl-muted);font-size:14.5px;margin:0 0 22px}
.zfl-lbl{display:block;font-size:13px;color:var(--zfl-muted);margin-bottom:16px;font-weight:500}
.zfl-lbl input{
	display:block;width:100%;margin-top:7px;background:var(--zfl-bg);border:1px solid var(--zfl-line);
	border-radius:9px;padding:12px 14px;color:var(--zfl-ink);font-family:inherit;font-size:15px;transition:.2s;
}
.zfl-lbl input:focus{outline:0;border-color:var(--zfl-teal);box-shadow:0 0 0 3px rgba(45,212,191,.14)}
.zfl-hint-sm{display:block;margin-top:6px;font-size:12px;color:var(--zfl-faint)}
.zfl-auth-row{display:flex;justify-content:flex-end;margin:-4px 0 18px}
.zfl-auth-forgot{color:var(--zfl-muted);font-size:13px;text-decoration:none;transition:.2s}
.zfl-auth-forgot:hover{color:var(--zfl-teal)}
.zfl-auth-switch{margin:18px 0 0;text-align:center;font-size:14px;color:var(--zfl-muted)}
.zfl-link{background:none;border:0;color:var(--zfl-teal);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.zfl-link:hover{color:var(--zfl-teal-soft)}

@media (max-width:760px){
	.zfl-auth-card{grid-template-columns:1fr;max-width:440px}
	.zfl-auth-aside{padding:32px 30px}
	.zfl-auth-headline{font-size:22px;margin-top:20px}
	.zfl-auth-main{padding:32px 30px}
}

/* ============================================================
   Premium client dashboard (Profile)
   ============================================================ */
.zfl-dash{
	--zfl-bg:#0d1216;--zfl-surface:#111820;--zfl-line:#1e2a33;
	--zfl-ink:#e9f1f4;--zfl-muted:#8fa3ac;--zfl-faint:#5e727b;
	--zfl-teal:#2dd4bf;--zfl-teal-soft:#5eead4;--zfl-cyan:#22a5c9;--zfl-on-teal:#04120f;
	max-width:1080px;margin:0 auto;font-family:'Inter',system-ui,sans-serif;color:var(--zfl-ink)
}

/* Hero */
.zfl-dash-hero{position:relative;overflow:hidden;border:1px solid var(--zfl-line);border-radius:20px;
	padding:30px 32px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.zfl-dash-hero-bg{position:absolute;inset:0;z-index:0;
	background:radial-gradient(circle at 12% 20%,rgba(45,212,191,.20),transparent 42%),
		radial-gradient(circle at 88% 90%,rgba(34,165,201,.14),transparent 46%),
		linear-gradient(160deg,#0f1c20,#0b1114)}
.zfl-dash-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px);
	background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at 20% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 20% 30%,#000,transparent 70%)}
.zfl-dash-id{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.zfl-dash-avatar{width:60px;height:60px;border-radius:16px;flex-shrink:0;
	background:linear-gradient(135deg,var(--zfl-teal),var(--zfl-cyan));color:var(--zfl-on-teal);
	display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:26px;
	box-shadow:0 12px 28px -10px rgba(45,212,191,.5)}
.zfl-dash-name{font-family:'Sora',sans-serif;font-size:23px;font-weight:700;margin:0;letter-spacing:-.01em}
.zfl-dash-email{color:var(--zfl-muted);font-size:13.5px;margin-top:3px}
.zfl-logout{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;color:var(--zfl-muted);
	font-size:13.5px;border:1px solid var(--zfl-line);padding:10px 16px;border-radius:9px;text-decoration:none;transition:.2s;background:rgba(13,18,22,.5)}
.zfl-logout:hover{border-color:var(--zfl-teal);color:var(--zfl-teal)}

/* Stat cards */
.zfl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.zfl-stat{background:var(--zfl-surface);border:1px solid var(--zfl-line);border-radius:15px;padding:20px}
.zfl-stat-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.zfl-stat-ic svg{width:20px;height:20px}
.zfl-stat-ic--all{background:rgba(45,212,191,.14);color:var(--zfl-teal)}
.zfl-stat-ic--active{background:rgba(96,165,250,.14);color:#60a5fa}
.zfl-stat-ic--done{background:rgba(45,212,191,.14);color:var(--zfl-teal)}
.zfl-stat-ic--spent{background:rgba(234,179,8,.14);color:#eab308}
.zfl-stat-num{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;line-height:1}
.zfl-stat-lbl{color:var(--zfl-faint);font-size:12.5px;margin-top:5px;text-transform:uppercase;letter-spacing:.04em}

/* Tabs */
.zfl-tabbar{display:flex;gap:4px;background:var(--zfl-surface);border:1px solid var(--zfl-line);
	border-radius:12px;padding:5px;margin-bottom:20px;overflow-x:auto}
.zfl-tabbtn{flex:1;min-width:max-content;background:none;border:0;cursor:pointer;padding:11px 18px;
	font-family:inherit;font-size:14px;font-weight:600;color:var(--zfl-muted);border-radius:8px;transition:.2s;white-space:nowrap}
.zfl-tabbtn:hover{color:var(--zfl-ink)}
.zfl-tabbtn.is-active{background:var(--zfl-teal);color:var(--zfl-on-teal)}

/* Panels */
.zfl-panel{display:none;animation:zflFade .35s ease}
.zfl-dash[data-tab="overview"] [data-panel="overview"],
.zfl-dash[data-tab="order"] [data-panel="order"],
.zfl-dash[data-tab="orders"] [data-panel="orders"],
.zfl-dash[data-tab="profile"] [data-panel="profile"]{display:block}
.zfl-panel-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}

.zfl-welcome h3{font-size:21px}
.zfl-welcome p{color:var(--zfl-muted);font-size:15px;line-height:1.6;margin:0 0 20px}
.zfl-btn-ghost{background:transparent!important;color:var(--zfl-ink)!important;border:1px solid var(--zfl-line)!important;width:auto!important;display:inline-block}
.zfl-btn-ghost:hover{border-color:var(--zfl-teal)!important}

/* Activity list */
.zfl-activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.zfl-activity-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--zfl-line)}
.zfl-activity-item:last-child{border-bottom:0}
.zfl-activity-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--zfl-faint)}
.zfl-dot-paid{background:var(--zfl-teal)}.zfl-dot-in-progress{background:#60a5fa}
.zfl-dot-pending{background:#eab308}.zfl-dot-invoiced{background:#c084fc}.zfl-dot-cancelled{background:#f87171}
.zfl-activity-main{flex:1;display:flex;flex-direction:column}
.zfl-activity-title{font-size:14.5px;font-weight:500;color:var(--zfl-ink)}
.zfl-activity-date{font-size:12px;color:var(--zfl-faint)}

/* Order cards */
.zfl-order-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zfl-order-card{background:var(--zfl-bg);border:1px solid var(--zfl-line);border-radius:13px;padding:18px 20px;transition:.2s}
.zfl-order-card:hover{border-color:var(--zfl-teal)}
.zfl-order-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.zfl-order-service{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:var(--zfl-ink)}
.zfl-order-ref{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--zfl-faint);margin-top:3px}
.zfl-order-details{color:var(--zfl-muted);font-size:13.5px;line-height:1.55;margin:0 0 14px}
.zfl-order-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--zfl-line)}
.zfl-order-amount{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:var(--zfl-teal)}
.zfl-order-amount em{color:var(--zfl-faint);font-weight:400;font-size:13px}
.zfl-order-date{font-size:12.5px;color:var(--zfl-faint)}

/* Empty state */
.zfl-empty-state{text-align:center;padding:36px 20px}
.zfl-empty-ic{width:60px;height:60px;margin:0 auto 16px;border-radius:16px;background:rgba(45,212,191,.1);
	display:flex;align-items:center;justify-content:center;color:var(--zfl-teal)}
.zfl-empty-ic svg{width:30px;height:30px}
.zfl-empty-state p{color:var(--zfl-muted);margin:0 0 18px}

/* Profile */
.zfl-profile{display:flex;flex-direction:column;margin-bottom:18px}
.zfl-profile-row{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;border-bottom:1px solid var(--zfl-line)}
.zfl-profile-row:last-child{border-bottom:0}
.zfl-profile-k{color:var(--zfl-faint);font-size:13.5px}
.zfl-profile-v{color:var(--zfl-ink);font-size:14.5px;font-weight:500;text-align:right;word-break:break-word}

@media(max-width:820px){
	.zfl-stats{grid-template-columns:1fr 1fr}
	.zfl-panel-grid{grid-template-columns:1fr}
	.zfl-order-cards{grid-template-columns:1fr}
}