/* ==========================================================================
   WPFixBoard — Member auth & dashboard
   ========================================================================== */

/* ---------- shared auth notices ---------- */
.auth-notice{
	border-radius:12px; padding:13px 16px; margin-bottom:18px;
	font-size:13.5px; line-height:1.5; display:flex; gap:10px; align-items:flex-start;
}
.auth-notice svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;}
.auth-notice ul{margin:0; padding:0; list-style:none;}
.auth-notice--success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}
.auth-notice--error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.auth-notice--info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}

/* ==========================================================================
   1. Auth pages (login / register)
   ========================================================================== */
.auth{padding:48px 20px 72px;background:var(--bg-soft);}
.auth-shell{
	display:grid; grid-template-columns:0.95fr 1.05fr;
	gap:0; max-width:1040px; margin:0 auto; padding:0;
	background:#fff; border-radius:24px; overflow:hidden;
	box-shadow:var(--shadow-lg); border:1px solid var(--border-soft);
}

/* Brand / value panel */
.auth-aside{
	position:relative; overflow:hidden;
	background:var(--gradient); color:#fff;
	padding:52px 48px;
	display:flex; align-items:center;
}
.auth-aside-glow{
	position:absolute; inset:0; pointer-events:none;
	background:
		radial-gradient(circle at 18% 12%, rgba(255,255,255,0.28), transparent 42%),
		radial-gradient(circle at 88% 86%, rgba(255,255,255,0.16), transparent 48%);
}
.auth-aside-inner{position:relative; z-index:1;}
.auth-aside-brand{
	display:inline-flex; align-items:center; gap:10px;
	font-weight:800; font-size:16px; margin-bottom:46px; color:#fff;
}
.auth-aside-brand .brand-mark{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;}
.auth-aside h2{font-size:30px; font-weight:800; line-height:1.2; letter-spacing:-0.02em; margin-bottom:14px;}
.auth-aside p{font-size:15px; line-height:1.6; opacity:0.92; max-width:330px; margin-bottom:30px;}
.auth-aside-points{display:flex; flex-direction:column; gap:15px;}
.auth-aside-points li{display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500;}
.auth-aside-points svg{width:18px;height:18px;flex-shrink:0;}
.auth-aside-stat{margin-top:42px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.2); display:flex; flex-direction:column;}
.auth-aside-stat strong{font-size:34px; font-weight:800; line-height:1;}
.auth-aside-stat span{font-size:13px; opacity:0.85; margin-top:4px;}
.auth-aside--alt .auth-aside-points{margin-top:6px;}

/* Form panel */
.auth-main{padding:52px 48px; display:flex; flex-direction:column; justify-content:center;}
.auth-card{max-width:380px; width:100%; margin:0 auto;}
.auth-card h1{font-size:26px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px;}
.auth-sub{font-size:14px; color:var(--gray-600); margin-bottom:26px;}

.auth-form{display:flex; flex-direction:column; gap:16px;}
.auth-form .field{display:flex; flex-direction:column; gap:7px;}
.auth-form .field > label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.field-control{
	position:relative; display:flex; align-items:center; gap:10px;
	border:1px solid var(--border); border-radius:10px; padding:0 12px;
	background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field-control:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,79,232,0.12);}
.field-control > svg{width:17px;height:17px;color:var(--gray-400);flex-shrink:0;}
.field-control input{
	flex:1; border:none; outline:none; background:transparent;
	font-size:14px; padding:12px 0; color:var(--ink); font-family:inherit; width:100%; min-width:0;
}
.toggle-pass{
	background:none; border:none; padding:6px; color:var(--gray-400); display:flex; cursor:pointer; border-radius:6px;
}
.toggle-pass:hover{color:var(--ink-soft);}
.toggle-pass svg{width:18px;height:18px;}

.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:-2px;}
.check-inline{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:pointer;}
.check-inline input{width:16px;height:16px;accent-color:var(--primary);}
.link-muted{font-size:13px; font-weight:600; color:var(--primary);}
.link-muted:hover{text-decoration:underline;}
.check-block{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.5; color:var(--gray-600);}
.check-block input{margin-top:2px;width:16px;height:16px;accent-color:var(--primary);flex-shrink:0;}
.check-block a{color:var(--primary); font-weight:600;}
.auth-alt{text-align:center; font-size:13px; color:var(--gray-600); margin-top:20px;}
.auth-alt a{color:var(--primary); font-weight:600;}

/* honeypot */
.hp-field{position:absolute;left:-9999px;top:0;}

/* password strength meter */
.auth-meter{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:-6px;}
.auth-meter span{height:4px; flex:1 1 0; border-radius:3px; background:#eceaf6; transition:background .2s ease;}
.auth-meter[data-score="1"] span:nth-child(-n+1){background:#ef4444;}
.auth-meter[data-score="2"] span:nth-child(-n+2){background:#f59e0b;}
.auth-meter[data-score="3"] span:nth-child(-n+3){background:#3b82f6;}
.auth-meter[data-score="4"] span:nth-child(-n+4){background:#22c55e;}
.auth-meter-hint{flex-basis:100%; font-size:11.5px; color:var(--gray-400); margin-top:2px;}

.auth-form .btn-primary{margin-top:6px; font-size:15px; padding:13px 20px;}

/* ==========================================================================
   2. Dashboard
   ========================================================================== */
.dash-hero{padding:32px 0 8px; background:var(--primary-50);padding-bottom: 32px;}
.dash-hero-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.dash-hero-user{display:flex; align-items:center; gap:16px;}
.dash-avatar{
	width:54px; height:54px; border-radius:50%; flex-shrink:0;
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-weight:800; font-size:18px; box-shadow:0 6px 16px rgba(20,20,43,0.12);
}
.dash-hero h1{font-size:24px; font-weight:800; letter-spacing:-0.01em;}
.dash-hero p{font-size:14px; color:var(--gray-600); margin-top:2px;}

.dash{padding:28px 0 64px; background:var(--bg-soft);}
.dash-layout{display:flex; gap:24px; align-items:flex-start;}

/* Sidebar */
.dash-sidebar{width:248px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; position:sticky; top:24px;}
.dash-card{background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm);}

.dash-id{padding:22px 20px; text-align:center;}
.dash-avatar--lg{width:64px;height:64px;font-size:22px;margin:0 auto 12px;}
.dash-id h3{font-size:16px; font-weight:700;}
.dash-id-mail{display:block; font-size:12.5px; color:var(--gray-500); margin-top:3px; word-break:break-all;}
.dash-role{display:inline-block; margin-top:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary); background:var(--primary-100); padding:4px 12px; border-radius:999px;}

.dash-nav{padding:10px;}
.dash-nav-item{
	display:flex; align-items:center; gap:11px; padding:11px 13px;
	font-size:14px; font-weight:500; color:var(--gray-600); border-radius:9px;
}
.dash-nav-item svg{width:18px;height:18px;flex-shrink:0;}
.dash-nav-item:hover{background:var(--primary-50); color:var(--ink-soft);}
.dash-nav-item.is-active{background:var(--gradient); color:#fff;}
.dash-nav-count{margin-left:auto; font-size:11.5px; font-weight:700; background:rgba(0,0,0,0.06); padding:2px 9px; border-radius:999px;}
.dash-nav-item.is-active .dash-nav-count{background:rgba(255,255,255,0.28);}

.dash-logout{
	display:flex; align-items:center; gap:10px; padding:13px 16px;
	font-size:13.5px; font-weight:600; color:#b91c1c;
}
.dash-logout svg{width:17px;height:17px;}
.dash-logout:hover{border-color:#fecaca; background:#fef2f2;}

/* Main content */
.dash-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:20px;}

/* Stat cards */
.dash-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.dash-stat{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-sm);}
.dash-stat-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.dash-stat-icon svg{width:20px;height:20px;}
.dash-stat strong{display:block; font-size:22px; font-weight:800; line-height:1.1;}
.dash-stat span{font-size:12.5px; color:var(--gray-500);}
.dash-stat-label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft);}
.dash-muted{font-size:12.5px; color:var(--gray-400);}

/* Resolution ring */
.dash-stat--rate .ring{
	width:56px;height:56px;border-radius:50%;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	background:
		conic-gradient(var(--primary) calc(var(--p)*1%), #eceaf6 0);
}
.dash-stat--rate .ring strong{font-size:14px;}
.dash-stat--rate .ring::after{content:""; position:absolute; }
.ring{position:relative;}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;}
.ring strong{position:relative; z-index:1;}

/* Card with head */
.dash-main .dash-card{padding:22px 24px;}
.dash-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px;}
.dash-card-head h2{font-size:17px; font-weight:700;}
.link-arrow{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--primary);}
.link-arrow svg{width:14px;height:14px;}

/* Issue rows */
.dash-issue-list{display:flex; flex-direction:column;}
.dash-issue{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:15px 0; border-bottom:1px solid var(--border-soft);
}
.dash-issue:last-child{border-bottom:none;}
.dash-issue-main{min-width:0;}
.dash-issue-title{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.dash-issue-title:hover{color:var(--primary);}
.dash-issue-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dash-issue-tag{font-size:12px; font-weight:600; color:var(--gray-500); background:#f3f3fa; padding:3px 10px; border-radius:999px;}
.dash-issue-stats{display:flex; align-items:center; gap:18px; flex-shrink:0; white-space:nowrap;}
.dash-issue-stats > span{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--gray-600);}
.dash-issue-stats svg{width:15px;height:15px;color:var(--gray-400);}
.dash-issue-link{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--primary);}
.dash-issue-link svg{width:14px;height:14px;color:var(--primary);}

/* Filter chips */
.dash-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.dash-chip{
	display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
	font-size:13px; font-weight:600; color:var(--gray-600); background:var(--bg-soft); border:1px solid var(--border-soft);
}
.dash-chip:hover{border-color:var(--primary); color:var(--primary);}
.dash-chip.is-active{background:var(--ink); color:#fff; border-color:var(--ink);}
.dash-chip .dot{width:8px;height:8px;border-radius:50%;}

/* Empty state */
.dash-empty{text-align:center; padding:40px 16px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.dash-empty-icon{width:56px;height:56px;border-radius:50%;background:#f3f5fa;color:var(--gray-400);display:flex;align-items:center;justify-content:center;}
.dash-empty-icon svg{width:24px;height:24px;}
.dash-empty p{font-size:14px; color:var(--gray-600); max-width:300px;}

/* Analytics */
.dash-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.dash-bars{display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:30px;}
.dash-bar{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.dash-bar-count{font-size:12px; font-weight:700; color:var(--ink-soft);}
.dash-bar-fill{width:100%; max-width:42px; border-radius:8px 8px 0 0; background:var(--gradient); min-height:6px; transition:height .3s ease;}
.dash-bar small{font-size:11.5px; color:var(--gray-400); font-weight:600;}

.dash-breakdown{display:flex; flex-direction:column; gap:15px;}
.dash-bd-row{display:grid; grid-template-columns:130px 1fr 28px; align-items:center; gap:12px;}
.dash-bd-label{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--ink-soft);}
.dash-bd-label .dot{width:9px;height:9px;border-radius:50%;}
.dash-bd-track{height:8px; border-radius:999px; background:#f0f0f6; overflow:hidden;}
.dash-bd-bar{display:block; height:100%; border-radius:999px; transition:width .3s ease;}
.dash-bd-num{font-size:13px; font-weight:700; color:var(--ink); text-align:right;}

/* Profile forms inside dashboard */
.dash-card .auth-form{gap:14px;}
.field-input{
	width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px;
	font-size:14px; color:var(--ink); font-family:inherit; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,79,232,0.12);}
textarea.field-input{resize:vertical;}
.dash-card .auth-form .field > label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}

.dash-account{margin-top:26px; padding-top:22px; border-top:1px solid var(--border-soft);}
.dash-account h3{font-size:15px; font-weight:700; margin-bottom:14px;}
.dash-account-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:13.5px;}
.dash-account-row span{color:var(--gray-500);}
.dash-account-row strong{color:var(--ink);}
.dash-account-note{margin-top:14px; line-height:1.5;}

/* ==========================================================================
   3. Responsive
   ========================================================================== */
@media (max-width:980px){
	.auth-shell{grid-template-columns:1fr;}
	.auth-aside{display:none;}
	.auth-main{padding:40px 28px;}
	.dash-layout{flex-direction:column;}
	.dash-sidebar{width:100%; position:static; flex-direction:row; flex-wrap:wrap; align-items:stretch;}
	.dash-id{flex:1 1 220px;}
	.dash-nav{flex:1 1 220px;}
	.dash-logout{flex:1 1 100%;}
	.dash-stats{grid-template-columns:repeat(2,1fr);}
	.dash-grid-2{grid-template-columns:1fr;}
}
@media (max-width:640px){
	.auth{padding:28px 16px 48px;}
	.auth-main{padding:32px 20px;}
	.field-grid{grid-template-columns:1fr;}
	.dash-hero h1{font-size:20px;}
	.dash-main .dash-card{padding:18px 18px;}
	.dash-stats{grid-template-columns:1fr 1fr; gap:12px;}
	.dash-stat{padding:14px 14px;}
	.dash-issue{flex-direction:column; align-items:flex-start; gap:12px;}
	.dash-issue-stats{width:100%; justify-content:space-between; gap:10px;}
	.dash-bd-row{grid-template-columns:1fr; gap:4px;}
	.dash-bd-num{justify-self:flex-end;}
}

/* ==========================================================================
   Member dashboard — Upsell notices
   ========================================================================== */
.upsell-wrap{margin-bottom:22px;}
.upsell-list{display:flex; flex-direction:column; gap:14px;}

.upsell-card-fx{
	position:relative; overflow:hidden;
	display:flex; align-items:center; justify-content:space-between;
	gap:22px; flex-wrap:wrap;
	padding:22px 24px;
	border-radius:18px;
	background:linear-gradient(135deg,#faf9ff 0%, #f3f0ff 100%);
	border:1px solid #e7e2fb;
	box-shadow:0 1px 2px rgba(28,24,70,0.04);
}

.upsell-card-fx::before{
	content:""; position:absolute; top:-40px; right:-40px;
	width:160px; height:160px; border-radius:50%;
	background:radial-gradient(circle, rgba(124,92,255,0.14), transparent 70%);
	pointer-events:none;
}

.upsell-fx-left{display:flex; align-items:flex-start; gap:16px; min-width:0; flex:1 1 320px; position:relative; z-index:1;}

.upsell-fx-icon{
	flex-shrink:0;
	display:inline-flex; align-items:center; justify-content:center;
	width:46px; height:46px; border-radius:13px;
	background:var(--gradient); color:#fff;
	box-shadow:0 8px 18px rgba(91,79,232,0.32);
}
.upsell-fx-icon svg{width:23px; height:23px;}

.upsell-fx-copy h3{
	margin:2px 0 5px; font-size:17px; font-weight:800;
	letter-spacing:-0.01em; color:var(--ink);
}
.upsell-fx-desc{
	margin:0 0 9px; font-size:13.5px; line-height:1.55;
	color:var(--gray-600); max-width:520px;
}

.upsell-fx-checks{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none;}
.upsell-fx-checks li{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.upsell-fx-checks svg{width:15px; height:15px; color:var(--primary); flex-shrink:0;}

.upsell-fx-right{
	display:flex; flex-direction:column; align-items:flex-end; gap:7px;
	flex-shrink:0; position:relative; z-index:1;
}
.upsell-fx-right .btn{white-space:nowrap;}
.upsell-fx-price{font-size:12.5px; font-weight:600; color:var(--gray-600);}

@media (max-width:720px){
	.upsell-card-fx{padding:20px;}
	.upsell-fx-right{align-items:flex-start; width:100%;}
	.upsell-fx-left{flex:1 1 100%;}
}