/* Workr Ambassador Portal — bright, campus-energy responsive design system. */

.wap-app,
.wap-login-shell,
.wap-access-card,
.wap-toast {
	--wap-ink: #101a33;
	--wap-navy: #0a1730;
	--wap-blue: #2f5bff;
	--wap-violet: #7c5cff;
	--wap-cyan: #12c7e6;
	--wap-lime: #d8f24f;
	--wap-sun: #ffc93c;
	--wap-coral: #ff5d7a;
	--wap-paper: #f5f4fc;
	--wap-surface: #ffffff;
	--wap-line: #e4e2f2;
	--wap-muted: #6b7290;
	--wap-success: #129a6b;
	--wap-warning: #b5710a;
	--wap-danger: #d1445f;
	--wap-display: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;
	--wap-sans: "Manrope", "Segoe UI", sans-serif;
	--wap-gradient-brand: linear-gradient(135deg, var(--wap-blue), var(--wap-violet));
	--wap-gradient-hype: linear-gradient(135deg, #f4fb8a, var(--wap-sun));
	--wap-gradient-dark: radial-gradient(circle at 85% 0%, rgba(124, 92, 255, .35), transparent 45%), radial-gradient(circle at 0% 100%, rgba(18, 199, 230, .22), transparent 40%), linear-gradient(160deg, #0a1730 10%, #16215a 100%);
	font-family: var(--wap-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--wap-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wap-app *, .wap-app *::before, .wap-app *::after,
.wap-login-shell *, .wap-login-shell *::before, .wap-login-shell *::after,
.wap-access-card *, .wap-access-card *::before, .wap-access-card *::after {
	box-sizing: border-box;
}

.wap-app [hidden], .wap-login-shell [hidden] { display: none !important; }
.wap-app button, .wap-app input, .wap-app select, .wap-app textarea,
.wap-login-shell button, .wap-login-shell input, .wap-login-shell select, .wap-login-shell textarea { font: inherit; }
.wap-app button, .wap-login-shell button { cursor: pointer; }
.wap-app img, .wap-login-shell img, .wap-access-card img { display: block; max-width: 100%; }
.wap-app h1, .wap-app h2, .wap-app h3, .wap-app h4, .wap-app p,
.wap-login-shell h1, .wap-login-shell h2, .wap-login-shell p,
.wap-access-card h2, .wap-access-card p { margin-top: 0; }

.wap-app h1, .wap-app h2, .wap-app h3,
.wap-login-shell h1, .wap-login-shell h2, .wap-access-card h2 {
	font-family: var(--wap-display);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.08;
	color: var(--wap-ink);
	overflow-wrap: anywhere;
}

.wap-app p, .wap-login-shell p, .wap-access-card p { color: var(--wap-muted); }
.wap-app a, .wap-login-shell a, .wap-access-card a { color: var(--wap-blue); }

.wap-skip-link {
	position: fixed; top: 12px; left: 12px; z-index: 10000;
	padding: 10px 14px; border-radius: 10px; background: #fff;
	box-shadow: 0 10px 30px rgba(12, 27, 58, .18);
	transform: translateY(-160%); transition: transform .2s ease;
}
.wap-skip-link:focus { transform: translateY(0); }

/* Member shell */
.wap-app {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: 276px minmax(0, 1fr);
	width: 100%; max-width: none; min-width: 0; min-height: 100vh;
	background:
		radial-gradient(circle at 8% 4%, rgba(124,92,255,.08), transparent 40%),
		radial-gradient(circle at 96% 22%, rgba(18,199,230,.08), transparent 38%),
		radial-gradient(rgba(47,91,255,.09) 1.6px, transparent 1.6px),
		var(--wap-paper);
	background-size: auto, auto, 26px 26px, auto;
	overflow: hidden;
}

.wap-sidebar {
	position: sticky; top: 0; z-index: 50;
	display: flex; flex-direction: column;
	min-width: 0; height: 100vh; padding: 26px 22px 18px;
	color: #fff;
	background: var(--wap-gradient-dark);
	box-shadow: 12px 0 36px rgba(12,27,58,.14); overflow: hidden;
}

.wap-brand {
	display: flex; align-items: center; gap: 13px; min-width: 0;
	padding: 3px 9px 25px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.wap-brand img { width: 46px; height: 46px; padding: 6px; border-radius: 15px; background: rgba(255,255,255,.1); }
.wap-brand div, .wap-profile-mini div { min-width: 0; }
.wap-brand strong { display: block; font-family: var(--wap-display); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.wap-brand span { display: block; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.wap-nav { display: grid; gap: 5px; min-height: 0; margin: 22px 0 16px; overflow-y: auto; scrollbar-width: thin; }
.wap-nav-item {
	appearance: none; display: flex; align-items: center; gap: 13px;
	min-width: 0; min-height: 48px; padding: 11px 14px;
	border: 0; border-radius: 14px; background: transparent;
	color: rgba(255,255,255,.68); font-size: 14px; font-weight: 600; text-align: left;
	transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wap-nav-item:hover, .wap-nav-item:focus-visible { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.wap-nav-item.is-active { color: #fff; background: var(--wap-gradient-brand); box-shadow: 0 10px 24px rgba(47,91,255,.35); }
.wap-icon { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; font-size: 17px; line-height: 1; }

.wap-sidebar-footer {
	position: relative; z-index: 2; flex: 0 0 auto; margin-top: auto;
	padding: 17px 8px 2px; border-top: 1px solid rgba(255,255,255,.14);
}
.wap-profile-mini { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wap-avatar, .wap-top-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.wap-avatar-placeholder { display: grid; place-items: center; background: var(--wap-gradient-brand); color: #fff; font-size: 15px; font-weight: 800; }
.wap-profile-mini strong, .wap-profile-mini span { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wap-profile-mini strong { font-size: 13px; font-weight: 700; }
.wap-profile-mini span { margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.5); }
.wap-logout { display: inline-block; margin: 11px 0 0 53px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.74) !important; text-decoration: none; }
.wap-logout:hover, .wap-logout:focus-visible { color: #fff !important; text-decoration: underline; }

.wap-page { min-width: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.wap-topbar {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	min-width: 0; min-height: 112px; padding: 22px clamp(24px,4vw,58px);
	border-bottom: 1px solid rgba(16,26,51,.08); background: rgba(245,244,252,.86);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.wap-topbar > div:first-child { min-width: 0; }
.wap-eyebrow, .wap-login-kicker { margin-bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--wap-blue); }
.wap-topbar h1 { margin-bottom: 0; font-size: clamp(30px,4vw,46px); }
.wap-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }

.wap-status-pill, .wap-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	max-width: 100%; padding: 7px 12px; border: 1px solid rgba(18,154,107,.16); border-radius: 999px;
	background: #e5f9ef; color: var(--wap-success); font-size: 11px; font-weight: 800; line-height: 1.2;
	text-transform: capitalize; white-space: nowrap;
}
.wap-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(18,154,107,.12); }
.wap-icon-button {
	appearance: none; display: grid; place-items: center; flex: 0 0 44px;
	width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
	border: 1px solid var(--wap-line); border-radius: 50%; aspect-ratio: 1/1;
	background: var(--wap-surface); color: var(--wap-blue); line-height: 1;
	box-shadow: 0 7px 18px rgba(47,91,255,.12);
	transition: transform .17s ease, box-shadow .17s ease;
}
.wap-icon-button:hover, .wap-icon-button:focus-visible { transform: translateY(-1px) scale(1.04); box-shadow: 0 10px 22px rgba(47,91,255,.2); }
.wap-icon-button span { display: block; line-height: 1; }
.wap-top-avatar { width: 44px; height: 44px; border: 3px solid #fff; box-shadow: 0 7px 18px rgba(12,27,58,.16); }

.wap-main { width: min(100%,1500px); min-width: 0; margin: 0 auto; padding: clamp(26px,4vw,58px); }
.wap-view, .wap-view > *, .wap-grid, .wap-grid > *, .wap-card, .wap-card > * { min-width: 0; }
.wap-loading { display: grid; place-items: center; align-content: center; gap: 15px; min-height: 52vh; color: var(--wap-muted); }
.wap-loading p { margin: 0; font-size: 14px; font-weight: 600; }
.wap-loader-mark { width: 46px; height: 46px; border: 3px solid rgba(124,92,255,.15); border-top-color: var(--wap-violet); border-right-color: var(--wap-cyan); border-radius: 50%; animation: wap-spin .8s linear infinite; }
.wap-loader-mark span { display: none; }
@keyframes wap-spin { to { transform: rotate(360deg); } }

/* Layout and cards */
.wap-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.wap-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wap-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.wap-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wap-grid-main { grid-template-columns: minmax(0,1.85fr) minmax(300px,.9fr); }
.wap-card {
	position: relative; width: 100%; padding: clamp(20px,2.4vw,30px);
	border: 1px solid var(--wap-line); border-radius: 24px; background: var(--wap-surface); color: var(--wap-ink);
	box-shadow: 0 16px 34px rgba(16,26,51,.06); overflow: hidden;
}
button.wap-card { font-family: var(--wap-sans); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
button.wap-card:hover, button.wap-card:focus-visible { transform: translateY(-3px); border-color: rgba(47,91,255,.35); box-shadow: 0 20px 42px rgba(47,91,255,.14); }
.wap-card-dark { border-color: rgba(255,255,255,.08); background: var(--wap-gradient-dark); color: #fff; box-shadow: 0 22px 48px rgba(12,27,58,.2); }
.wap-card-dark h2, .wap-card-dark h3, .wap-card-dark h4, .wap-card-dark strong { color: #fff; }
.wap-card-dark p { color: rgba(255,255,255,.68); }
.wap-card-yellow { border-color: #eee79a; background: var(--wap-gradient-hype); box-shadow: 0 18px 40px rgba(201,168,10,.16); }

.wap-card-head, .wap-section-head, .wap-stat-label, .wap-copy-block-head, .wap-mission-header, .wap-referral-code {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0;
}
.wap-card-head > div, .wap-section-head > div, .wap-mission-header > div, .wap-copy-block-head > * { min-width: 0; }
.wap-card-head { margin-bottom: 19px; }
.wap-card-head h2, .wap-section-head h2 { margin-bottom: 8px; font-size: clamp(28px,3vw,42px); }
.wap-card-head h3, .wap-section-head h3, .wap-card h3 { margin-bottom: 6px; font-size: clamp(20px,2vw,26px); }
.wap-card-head p, .wap-section-head p { margin-bottom: 0; font-size: 13px; }
.wap-section-head { align-items: flex-end; margin-bottom: 24px; }

.wap-hero { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: clamp(24px,3vw,44px); min-height: 245px; }
.wap-progress-ring { position: relative; display: grid; place-items: center; width: 154px; height: 154px; border-radius: 50%; background: conic-gradient(var(--wap-cyan) var(--progress), rgba(255,255,255,.14) 0); box-shadow: 0 0 0 6px rgba(18,199,230,.08); }
.wap-progress-ring::after { content: ""; position: absolute; inset: 12px; border-radius: inherit; background: #101f47; }
.wap-progress-ring-content { position: relative; z-index: 1; text-align: center; }
.wap-progress-ring-content strong, .wap-progress-ring-content span { display: block; }
.wap-progress-ring-content strong { font-family: var(--wap-display); font-size: 32px; font-weight: 700; }
.wap-progress-ring-content span { margin-top: 3px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.wap-hero-copy h2 { margin-bottom: 10px; font-size: clamp(32px,4vw,48px); color: #fff; }
.wap-hero-copy > p:not(.wap-eyebrow) { max-width: 700px; font-size: 14px; }
.wap-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.wap-hero-meta span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.8); }

.wap-stat-card { min-height: 174px; transition: transform .18s ease, box-shadow .18s ease; }
.wap-stat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(16,26,51,.1); }
.wap-stat-label { align-items: center; color: var(--wap-muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.wap-stat-icon, .wap-company-mark, .wap-empty-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; background: var(--stat-wash,#edf0ff); color: var(--stat-color,var(--wap-blue)); font-weight: 800; }
.wap-stat-value { margin-top: 25px; font-family: var(--wap-display); font-size: clamp(29px,3.2vw,40px); font-weight: 700; line-height: 1; color: var(--wap-ink); overflow-wrap: anywhere; }
.wap-stat-value small { font-family: var(--wap-sans); font-size: 13px; font-weight: 600; color: var(--wap-muted); }
.wap-stat-sub { margin-top: 10px; font-size: 11px; color: var(--wap-muted); }

/* Mission and content */
.wap-mission-header { align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.wap-company-mark { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg,#e8edff,#e3f9fc); color: var(--wap-blue); font-family: var(--wap-display); }
.wap-mission-header h3, .wap-mission-header p { margin-bottom: 2px; }
.wap-mission-header p { font-size: 12px; }
.wap-mission-media { margin: 18px 0; border: 1px solid var(--wap-line); border-radius: 18px; background: #eef0fb; overflow: hidden; }
.wap-mission-media img { width: 100%; max-height: 520px; object-fit: contain; }
.wap-copy-block { min-width: 0; margin-top: 17px; padding: 16px; border: 1px solid #dfe1f2; border-radius: 16px; background: #f6f6fc; }
.wap-copy-block-head { align-items: center; }
.wap-copy-block-head strong { font-size: 12px; font-weight: 800; }
.wap-copy-block pre { max-width: 100%; margin: 13px 0 0; font-family: var(--wap-sans); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: #34435d; }
.wap-copy-button { appearance: none; flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--wap-line); border-radius: 10px; background: var(--wap-surface); color: var(--wap-blue); font-size: 11px; font-weight: 800; transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.wap-copy-button:hover, .wap-copy-button:focus-visible { background: var(--wap-blue); color: #fff; transform: translateY(-1px); }
.wap-referral-code { align-items: center; padding: 15px; border: 1px dashed #b9bfe6; border-radius: 15px; background: #f5f5fc; }
.wap-referral-code span, .wap-referral-code strong { display: block; }
.wap-referral-code span { font-size: 10px; color: var(--wap-muted); font-weight: 600; }
.wap-referral-code strong { margin-top: 2px; font-family: var(--wap-display); font-size: 18px; letter-spacing: .04em; overflow-wrap: anywhere; }

/* Buttons and forms */
.wap-button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wap-button {
	appearance: none; display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; max-width: 100%; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px;
	font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none !important;
	transition: transform .17s ease, box-shadow .17s ease, background-color .17s ease;
}
.wap-button:hover, .wap-button:focus-visible { transform: translateY(-2px) scale(1.015); }
.wap-button:active { transform: translateY(0) scale(.99); }
.wap-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.wap-button-primary { background: var(--wap-gradient-brand); color: #fff !important; box-shadow: 0 10px 26px rgba(47,91,255,.3); }
.wap-button-secondary { border-color: var(--wap-line); background: var(--wap-surface); color: var(--wap-ink) !important; }
.wap-button-secondary:hover { border-color: var(--wap-blue); color: var(--wap-blue) !important; }
.wap-button-yellow { background: var(--wap-gradient-hype); color: #4a3a00 !important; box-shadow: 0 10px 22px rgba(201,168,10,.22); }
.wap-form { display: grid; gap: 17px; min-width: 0; }
.wap-field { display: grid; gap: 7px; min-width: 0; }
.wap-field label, .wap-login-panel label { font-size: 11px; font-weight: 800; color: #2a3457; }
.wap-field input, .wap-field select, .wap-field textarea,
.wap-login-panel input[type="text"], .wap-login-panel input[type="password"], .wap-login-panel input[type="email"] {
	appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
	padding: 11px 13px; border: 1.5px solid #d7d9ee; border-radius: 12px; outline: none; background: #fff;
	color: var(--wap-ink); font-size: 14px; box-shadow: 0 1px 2px rgba(16,26,51,.03);
	transition: border-color .17s ease, box-shadow .17s ease;
}
.wap-field textarea { min-height: 112px; resize: vertical; }
.wap-field input:focus, .wap-field select:focus, .wap-field textarea:focus, .wap-login-panel input:focus { border-color: var(--wap-blue); box-shadow: 0 0 0 4px rgba(47,91,255,.12); }
.wap-field small { font-size: 10px; color: var(--wap-muted); }

/* Status, lists and data */
.wap-pill-pending, .wap-pill-onboarding, .wap-pill-normal, .wap-pill-open, .wap-pill-in_progress, .wap-pill-processing { border-color: #cddcfb; background: #edf3ff; color: #2e50c9; }
.wap-pill-verified, .wap-pill-active, .wap-pill-qualified, .wap-pill-approved, .wap-pill-paid, .wap-pill-resolved { border-color: #bfeed9; background: #e5f9ef; color: var(--wap-success); }
.wap-pill-needs_correction, .wap-pill-warning, .wap-pill-high, .wap-pill-selected, .wap-pill-onboarded, .wap-pill-locked { border-color: #f2d9a3; background: #fff4dc; color: var(--wap-warning); }
.wap-pill-rejected, .wap-pill-missed, .wap-pill-urgent, .wap-pill-removed, .wap-pill-closed, .wap-pill-cancelled { border-color: #f6c9d4; background: #ffeef2; color: var(--wap-danger); }
.wap-list { display: grid; min-width: 0; }
.wap-list-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 14px 0; border-bottom: 1px solid #ece9f7; }
.wap-list-item:last-child { border-bottom: 0; }
.wap-list-item > div { min-width: 0; }
.wap-list-item h4 { margin-bottom: 3px; font-family: var(--wap-sans); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.wap-list-item p { margin-bottom: 0; font-size: 11px; overflow-wrap: anywhere; }

.wap-alert { min-width: 0; padding: 14px 15px; border: 1px solid #cbdcf7; border-radius: 14px; background: #eef3ff; color: #23408f; }
.wap-alert strong, .wap-alert p { display: block; overflow-wrap: anywhere; }
.wap-alert strong { font-size: 12px; font-weight: 800; }
.wap-alert p { margin: 4px 0 0; font-size: 11px; color: inherit; }
.wap-alert-success { border-color: #bfe9d5; background: #e9f9f1; color: #0f7d55; }
.wap-alert-warning { border-color: #f2d9a3; background: #fff4dc; color: #855505; }
.wap-alert-error { border-color: #f4c6d0; background: #ffeef2; color: #a02a44; }
.wap-progress-track { height: 8px; margin-top: 17px; border-radius: 999px; background: rgba(47,91,255,.1); overflow: hidden; }
.wap-progress-track span { display: block; width: var(--width,0%); height: 100%; border-radius: inherit; background: var(--wap-gradient-brand); }

.wap-calendar { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 8px; min-width: 0; }
.wap-day { position: relative; display: grid; place-items: center; align-content: center; min-width: 0; min-height: 68px; padding: 7px 3px; border: 1px solid #e4e2f2; border-radius: 13px; background: #fbfbff; text-align: center; transition: transform .15s ease; }
.wap-day strong, .wap-day span { display: block; max-width: 100%; }
.wap-day strong { font-family: var(--wap-display); font-size: 19px; font-weight: 700; }
.wap-day span { margin-top: 3px; font-size: 7px; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; color: var(--wap-muted); }
.wap-day.is-verified { border-color: #b7ecd4; background: #e7f9f0; }
.wap-day.is-pending { border-color: #bfd2f6; background: #edf3ff; }
.wap-day.is-needs_correction, .wap-day.is-missed, .wap-day.is-rejected { border-color: #f2d29c; background: #fff3da; }
.wap-day.is-today { border-color: var(--wap-violet); box-shadow: 0 0 0 3px rgba(124,92,255,.15); }
.wap-day.is-today::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--wap-violet); animation: wap-pulse 1.6s ease-in-out infinite; }
@keyframes wap-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.4); } }

.wap-chart { display: flex; align-items: flex-end; gap: 7px; height: 210px; padding: 14px 4px 0; border-bottom: 1px solid var(--wap-line); }
.wap-chart-bar { position: relative; flex: 1 1 0; min-width: 5px; max-width: 34px; height: var(--bar-height); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg,var(--wap-cyan),var(--wap-blue)); }
.wap-chart-bar:hover::after { content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; width: max-content; max-width: 170px; padding: 6px 8px; border-radius: 8px; background: var(--wap-navy); color: #fff; font-size: 9px; font-weight: 600; transform: translateX(-50%); }

.wap-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wap-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 11px; }
.wap-table th, .wap-table td { padding: 12px 10px; border-bottom: 1px solid #ece9f7; vertical-align: middle; text-align: left; }
.wap-table th { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wap-muted); }
.wap-table td { overflow-wrap: anywhere; }
.wap-table tr.is-current-user td { background: #f0f3ff; }
.wap-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edeefa; font-weight: 800; }
.wap-rank-1 { background: linear-gradient(135deg,#ffe27a,var(--wap-sun)); color: #6b4b00; box-shadow: 0 0 0 3px rgba(255,201,60,.25); }
.wap-rank-2 { background: #e7e9f5; color: #4b5578; }
.wap-rank-3 { background: linear-gradient(135deg,#ffd7b0,#f0a76a); color: #7a3f0c; }

.wap-empty { display: grid; place-items: center; min-height: 190px; padding: 24px; border: 1.5px dashed #cfd0ea; border-radius: 18px; background: #f8f8fd; text-align: center; }
.wap-empty-icon { margin-bottom: 12px; }
.wap-empty h3 { margin-bottom: 6px; font-size: 21px; }
.wap-empty p { max-width: 360px; margin-bottom: 0; font-size: 11px; }
.wap-ticket-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--wap-blue); border-radius: 0 10px 10px 0; background: #f1f4ff; }
.wap-ticket-reply strong { font-size: 10px; }
.wap-ticket-reply p { margin-top: 3px; }
.wap-mobile-nav { display: none; }

/* Public access and login */
.wap-access-card { width: min(92%,560px); margin: 64px auto; padding: clamp(28px,6vw,52px); border: 1px solid var(--wap-line); border-radius: 26px; background: var(--wap-surface); box-shadow: 0 25px 65px rgba(16,26,51,.14); text-align: center; }
.wap-access-card img { width: 62px; margin: 0 auto 22px; }
.wap-access-card h2 { margin-bottom: 10px; font-size: clamp(30px,6vw,44px); }
.wap-access-card p { margin-bottom: 24px; }

.wap-login-shell {
	isolation: isolate; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr);
	width: 100%; max-width: none; min-width: 0; min-height: 100vh; background: var(--wap-paper); overflow: hidden;
}
.wap-login-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(48px,8vw,128px); background: var(--wap-gradient-dark); color: #fff; overflow: hidden; }
.wap-login-visual::before { content: ""; position: absolute; left: -120px; bottom: -140px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(216,242,79,.28), transparent 68%); filter: blur(2px); }
.wap-login-visual::after { content: ""; position: absolute; right: -150px; top: 12%; width: 380px; height: 380px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(124,92,255,.05), 0 0 0 140px rgba(18,199,230,.035); }
.wap-login-logo { position: relative; z-index: 1; width: 78px; margin-bottom: 42px; }
.wap-login-kicker { position: relative; z-index: 1; color: var(--wap-lime); }
.wap-login-visual h1 { position: relative; z-index: 1; max-width: 760px; margin-bottom: 23px; font-size: clamp(42px,6vw,76px); font-weight: 700; line-height: 1.02; color: #fff; }
.wap-login-visual > p { position: relative; z-index: 1; max-width: 660px; margin-bottom: 30px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.72); }
.wap-login-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; }
.wap-login-features span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }

.wap-login-panel { display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; padding: clamp(38px,7vw,98px); background: #fffefe; }
.wap-login-panel > * { width: 100%; max-width: 490px; margin-right: auto; margin-left: auto; }
.wap-login-panel > img { width: 58px; height: auto; margin-bottom: 36px; }
.wap-login-panel h1, .wap-login-panel h2 { margin-bottom: 14px; font-size: clamp(36px,5vw,56px); font-weight: 700; }
.wap-login-panel > p:not(.wap-eyebrow):not(.wap-login-help) { margin-bottom: 28px; font-size: 13px; line-height: 1.75; }
.wap-login-panel .wap-alert { margin-bottom: 18px; }
.wap-login-panel form { display: grid; gap: 0; }
.wap-login-panel form p { width: 100%; margin: 0 0 16px; }
.wap-login-panel form label { display: block; margin-bottom: 7px; }
.wap-login-panel form .login-remember { display: flex; align-items: center; margin-top: 1px; }
.wap-login-panel form .login-remember label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.wap-login-panel input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--wap-blue); }
.wap-login-panel form .login-submit { margin-top: 4px; }
.wap-login-panel input[type="submit"] { appearance: none; width: 100%; min-height: 52px; border: 0; border-radius: 13px; background: var(--wap-gradient-brand); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 14px 30px rgba(47,91,255,.28); cursor: pointer; transition: transform .17s ease, box-shadow .17s ease; }
.wap-login-panel input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(47,91,255,.34); }
.wap-forgot { margin-top: 4px; font-size: 12px; font-weight: 800; text-decoration: none; }
.wap-login-help { margin-top: 46px; margin-bottom: 0; font-size: 10px; }

.wap-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1000; max-width: min(380px,calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; background: var(--wap-navy); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 15px 40px rgba(12,27,58,.3); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.wap-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1220px) {
	.wap-app { grid-template-columns: 240px minmax(0,1fr); }
	.wap-sidebar { padding-right: 17px; padding-left: 17px; }
	.wap-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.wap-calendar { grid-template-columns: repeat(6,minmax(0,1fr)); }
	.wap-hero { grid-template-columns: 130px minmax(0,1fr); }
	.wap-progress-ring { width: 130px; height: 130px; }
}

/* Tablet and mobile */
@media (max-width: 900px) {
	html:has(.wap-app), body:has(.wap-app), html:has(.wap-login-shell), body:has(.wap-login-shell) { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
	.wap-app { display: block; width: 100%; max-width: 100%; min-height: 100svh; overflow: visible; }
	.wap-sidebar { display: none; }
	.wap-page { width: 100%; max-width: 100%; height: auto; min-height: 100svh; overflow: visible; }
	.wap-topbar { min-height: 88px; padding: 15px 18px; }
	.wap-topbar h1 { font-size: clamp(27px,7vw,36px); }
	.wap-top-actions { gap: 8px; }
	.wap-status-pill { display: none; }
	.wap-icon-button, .wap-top-avatar { width: 38px; min-width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; }
	.wap-main { width: 100%; max-width: 100%; padding: 22px 18px 108px; }
	.wap-grid-main { grid-template-columns: minmax(0,1fr); }
	.wap-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.wap-calendar { grid-template-columns: repeat(6,minmax(0,1fr)); }

	.wap-mobile-nav { position: fixed; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); left: 12px; z-index: 100; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: auto; max-width: none; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: rgba(10,23,48,.97); box-shadow: 0 15px 38px rgba(12,27,58,.32); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	.wap-mobile-nav .wap-nav-item { display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 5px 2px; border-radius: 13px; font-size: 8px; text-align: center; box-shadow: none; }
	.wap-mobile-nav .wap-nav-item.is-active { background: var(--wap-gradient-brand); box-shadow: 0 6px 16px rgba(47,91,255,.4); }
	.wap-mobile-nav .wap-icon { width: 20px; height: 20px; font-size: 15px; }

	.wap-login-shell { display: grid; grid-template-columns: minmax(0,1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 100svh; overflow: visible; }
	.wap-login-visual { display: none; }
	.wap-login-panel { grid-column: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 100svh; padding: clamp(30px,10vw,58px) max(22px,env(safe-area-inset-left)) max(34px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-right)); }
	.wap-login-panel > * { width: min(100%,490px); max-width: 100%; }
}

@media (max-width: 640px) {
	.wap-grid-2, .wap-grid-3, .wap-grid-4 { grid-template-columns: minmax(0,1fr); }
	.wap-card { padding: 20px; border-radius: 20px; }
	.wap-hero { grid-template-columns: minmax(0,1fr); justify-items: start; min-height: 0; }
	.wap-progress-ring { width: 112px; height: 112px; }
	.wap-progress-ring-content strong { font-size: 27px; }
	.wap-hero-copy h2 { font-size: 33px; }
	.wap-section-head, .wap-card-head { align-items: flex-start; flex-wrap: wrap; }
	.wap-calendar { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
	.wap-day { min-height: 60px; border-radius: 11px; }

	.wap-table { min-width: 0; }
	.wap-table thead { display: none; }
	.wap-table, .wap-table tbody, .wap-table tr, .wap-table td { display: block; width: 100%; }
	.wap-table tr { margin-bottom: 12px; padding: 12px; border: 1px solid var(--wap-line); border-radius: 14px; background: #fff; }
	.wap-table td { display: grid; grid-template-columns: minmax(76px,.7fr) minmax(0,1.3fr); gap: 11px; padding: 8px 0; border-bottom: 1px solid #ece9f7; text-align: right; }
	.wap-table td:last-child { border-bottom: 0; }
	.wap-table td::before { content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; color: var(--wap-muted); }

	.wap-list-item { align-items: flex-start; flex-wrap: wrap; }
	.wap-list-item > .wap-pill { margin-left: 0; }
	.wap-button-row .wap-button { flex: 1 1 170px; }
	.wap-copy-block-head { align-items: flex-start; flex-wrap: wrap; }
	.wap-topbar .wap-eyebrow { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.wap-login-panel { justify-content: flex-start; padding-top: 42px; }
	.wap-login-panel > img { width: 52px; margin-bottom: 28px; }
	.wap-login-panel h1, .wap-login-panel h2 { font-size: clamp(36px,13vw,52px); }
	.wap-login-help { margin-top: 35px; }
	.wap-toast { right: 16px; bottom: 92px; left: 16px; }
}

@media (max-width: 380px) {
	.wap-main { padding-right: 14px; padding-left: 14px; }
	.wap-topbar { padding-right: 14px; padding-left: 14px; }
	.wap-top-avatar { display: none; }
	.wap-calendar { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.wap-mobile-nav { right: 8px; left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.wap-loader-mark { animation-duration: 1.8s; }
	.wap-day.is-today::after { animation: none; }
	.wap-button, .wap-nav-item, .wap-toast, button.wap-card, .wap-icon-button, .wap-copy-button, .wap-stat-card, .wap-day { transition: none; }
}