/* Business Portal — styled to sit alongside the company website.
   Headings: Barlow (strong, trade feel). Body: Atkinson Hyperlegible (easy reading, dyslexia friendly).
   Brand colours come from Portal → Settings → Look and feel. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

.ssp-app {
	--brand: var(--ssp-brand, #1c3d2a);
	--brand-dark: var(--ssp-brand-dark, #122819);
	--brand-soft: var(--ssp-brand-soft, #e8ece9);
	--brand-text: var(--ssp-brand-text, #fff);
	--accent: var(--ssp-accent, #e2f53a);
	--accent-dark: var(--ssp-accent-dark, #c7d833);
	--accent-text: var(--ssp-accent-text, #15201a);
	--bg: #f3f5f2;
	--paper: #fff;
	--ink: #16201a;
	--muted: #5a665f;
	--line: #dde3dc;
	--line-2: #c9d1c8;
	--alert: #b8321c;
	--alert-soft: #fcebe7;
	--ok: #1f7a45;
	--ok-soft: #e3f3e8;
	--wait: #8a5a00;
	--wait-soft: #fbf1d9;
	--tree: #2e6b4a;
	--waste: #33587e;
	--firewood: #a8521a;
	--r: 16px;
	--tap: 54px;
	--shadow: 0 1px 2px rgba(22, 32, 26, .06), 0 6px 20px rgba(22, 32, 26, .05);
	--head: "Barlow", "Atkinson Hyperlegible", system-ui, sans-serif;

	font-family: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	text-align: left;
	min-height: 100vh;
}
.ssp-app *, .ssp-app *::before, .ssp-app *::after { box-sizing: border-box; }
body.ssp-body { margin: 0; background: #f3f5f2; }
.ssp-app h1, .ssp-app h2, .ssp-app h3 { font-family: var(--head); color: inherit; letter-spacing: 0; text-transform: none; margin: 0; line-height: 1.15; }
.ssp-app h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; }
.ssp-app h2 { font-size: 1.25rem; font-weight: 800; }
.ssp-app p { margin: 0 0 .75em; }
.ssp-app a { color: var(--brand); text-underline-offset: 3px; }
.ssp-app img { max-width: 100%; height: auto; }
.ssp-app :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); border-radius: 6px; }
.ssp-i { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; }

/* ---------- Frame ---------- */
.ssp-side { display: none; }
.ssp-frame { min-width: 0; }
.ssp-top {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 64px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
	background: var(--brand); color: var(--brand-text);
}
.ssp-top__brand { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.ssp-top__brand .ssp-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; background: #fff; padding: 4px 8px; border-radius: 8px; }
.ssp-top__date { display: none; margin: 0; color: var(--muted); font-weight: 700; }
.ssp-top__user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit !important; }
.ssp-top__name { display: none; font-weight: 700; }
.ssp-wordmark { font-family: var(--head); font-weight: 800; font-size: 1.2rem; line-height: 1.1; color: var(--brand-text); }
.ssp-avatar {
	display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
	background: var(--accent); color: var(--accent-text); font-family: var(--head); font-weight: 800;
}
.ssp-main { max-width: 1180px; margin: 0 auto; padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }

.ssp-bottom {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr);
	background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(22, 32, 26, .06);
	padding-bottom: env(safe-area-inset-bottom);
}
.ssp-bottom a {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 64px; color: var(--muted); text-decoration: none; font-size: .74rem; font-weight: 700;
}
.ssp-bottom .ssp-i { width: 24px; height: 24px; }
.ssp-bottom a.is-active { color: var(--brand); }
.ssp-bottom a.is-active::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 4px; border-radius: 0 0 4px 4px; background: var(--brand); }
.ssp-dot { position: absolute; top: 10px; right: calc(50% - 18px); width: 10px; height: 10px; border-radius: 50%; background: var(--alert); border: 2px solid var(--paper); }

@media (min-width: 960px) {
	.ssp-app:not(.ssp-app--login):not(.ssp-app--login2) { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
	.ssp-side {
		display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
		background: var(--brand-dark); color: #fff; padding: 20px 14px;
	}
	.ssp-side__brand { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 10px 14px; margin-bottom: 18px; border-radius: 12px; background: #fff; text-decoration: none; }
	.ssp-side__brand .ssp-logo { max-height: 56px; width: auto; object-fit: contain; }
	.ssp-side__brand .ssp-wordmark { color: var(--brand); text-align: center; }
	.ssp-side__nav { display: flex; flex-direction: column; gap: 2px; }
	.ssp-side__group { margin: 18px 12px 6px; color: rgba(255, 255, 255, .55); font-size: .8rem; font-weight: 700; }
	.ssp-side__nav a {
		display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 10px;
		color: rgba(255, 255, 255, .88) !important; text-decoration: none; font-weight: 700; font-size: .98rem;
	}
	.ssp-side__nav a:hover { background: rgba(255, 255, 255, .08); color: #fff !important; }
	.ssp-side__nav a.is-active { background: var(--accent); color: var(--accent-text) !important; }
	.ssp-side__nav .ssp-count { margin-left: auto; }
	.ssp-side__me { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 8px 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
	.ssp-side__who { display: grid; line-height: 1.3; }
	.ssp-side__who a { color: rgba(255, 255, 255, .7) !important; font-size: .9rem; }
	.ssp-top { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 32px; }
	.ssp-top__brand { display: none; }
	.ssp-top__date, .ssp-top__name { display: block; }
	.ssp-bottom { display: none; }
	.ssp-main { padding: 28px 32px 60px; }
}

/* ---------- Common ---------- */
.ssp-head { margin-bottom: 18px; }
.ssp-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ssp-sub, .ssp-hint, .ssp-muted { color: var(--muted); }
.ssp-sub { margin: 6px 0 0; }
.ssp-hint { font-size: .92rem; }
.ssp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-bottom: 2px; font-weight: 700; text-decoration: none; }
.ssp-block { margin-top: 26px; }
.ssp-block > h2, .ssp-menu-h { margin: 0 0 10px; }
.ssp-menu-h { margin-top: 22px; font-size: 1rem; color: var(--muted); }
.ssp-gap { margin-top: 18px; }
.ssp-empty { padding: 22px 20px; border: 2px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }
.ssp-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.ssp-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--alert); color: #fff; font-size: .78rem; font-weight: 700; }
.ssp-tag { display: inline-block; padding: 2px 8px; margin-left: 4px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; vertical-align: middle; }
.ssp-tag--off { background: #eceeed; color: var(--muted); }
.ssp-tag--alert { background: var(--alert); color: #fff; }

.ssp-biz { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 4px 0; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.3; color: #fff; background: var(--tree); vertical-align: middle; }
.ssp-biz .ssp-i { width: 14px; height: 14px; }
.ssp-biz--waste { background: var(--waste); }
.ssp-biz--firewood { background: var(--firewood); }
.ssp-biz--light { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

.ssp-ibadge { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: var(--brand-soft); color: var(--brand); }
.ssp-ibadge .ssp-i { width: 22px; height: 22px; }
.ssp-ibadge--alert { background: var(--alert-soft); color: var(--alert); }
.ssp-ibadge--ok { background: var(--ok-soft); color: var(--ok); }
.ssp-ibadge--due { background: var(--wait-soft); color: var(--wait); }
.ssp-ibadge--dark { background: var(--brand); color: var(--brand-text); }

.ssp-alert { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 700; border-left: 6px solid; }
.ssp-alert--error { background: var(--alert-soft); border-color: var(--alert); color: #6d1d10; }
.ssp-alert--success { background: var(--ok-soft); border-color: var(--ok); color: #124d2b; }

/* Buttons */
.ssp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--tap); padding: 12px 22px; border-radius: 12px;
	border: 2px solid var(--line-2); background: var(--paper); color: var(--ink) !important;
	font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.ssp-btn:hover { border-color: var(--ink); }
.ssp-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text) !important; }
.ssp-btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ssp-btn--wide { display: flex; width: 100%; margin-top: 12px; }
.ssp-btn--big { min-height: 60px; font-size: 1.08rem; padding: 14px 26px; }
.ssp-btn--small { min-height: 44px; padding: 8px 14px; font-size: .92rem; }
.ssp-btn--ghost { color: var(--alert) !important; }
.ssp-btn--danger { background: var(--paper); border-color: var(--alert); color: var(--alert) !important; }
.ssp-btn--danger:hover { background: var(--alert); color: #fff !important; }
.ssp-btn--file { margin-bottom: 18px; }
.ssp-btn[disabled] { opacity: .6; cursor: wait; }

/* Cards and layout */
.ssp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); margin-top: 18px; min-width: 0; }
.ssp-card > h2 { margin-bottom: 14px; }
.ssp-card--flush { padding: 0; overflow: hidden; }
.ssp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ssp-card__head a { font-weight: 700; font-size: .95rem; }
.ssp-cols { display: grid; gap: 0 18px; }
@media (min-width: 1100px) {
	.ssp-cols { grid-template-columns: 1fr 1fr; }
	.ssp-cols--wide { grid-template-columns: 3fr 2fr; }
}

/* Lists */
.ssp-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ssp-list > li + li { border-top: 1px solid var(--line); }
.ssp-list--flush { border: 0; border-radius: 0; margin: 0 -20px -20px; }
.ssp-card--flush .ssp-list--flush { margin: 0; }
.ssp-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 18px; color: var(--ink) !important; text-decoration: none; font-weight: 700; }
a.ssp-row:hover { background: #f7f9f6; }
.ssp-row__main { flex: 1; min-width: 0; }
.ssp-row__main small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: .9rem; }
.ssp-row__main small .ssp-biz { margin-top: 4px; }
.ssp-chev { color: var(--muted); width: 20px; height: 20px; }
.ssp-row--todo { box-shadow: inset 5px 0 0 var(--accent-dark); }
.ssp-row--alert { box-shadow: inset 5px 0 0 var(--alert); }
.ssp-row.is-done { color: var(--muted) !important; }
.ssp-list--cards { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 12px; }
.ssp-list--cards > li + li { border-top: 0; }

.ssp-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: #eceeed; color: var(--ink); }
.ssp-status--pending, .ssp-status--open, .ssp-status--o-new { background: var(--wait-soft); color: var(--wait); }
.ssp-status--in_progress, .ssp-status--o-confirmed, .ssp-status--o-out { background: #e3ecf6; color: #23466b; }
.ssp-status--approved, .ssp-status--resolved, .ssp-status--o-delivered { background: var(--ok-soft); color: var(--ok); }
.ssp-status--rejected, .ssp-status--o-cancelled { background: var(--alert-soft); color: var(--alert); }

/* ---------- Dashboard banner ---------- */
.ssp-hero-bg {
	background-color: var(--brand);
	background-image:
		linear-gradient(100deg, rgba(10, 22, 14, .9) 0%, rgba(10, 22, 14, .72) 55%, rgba(10, 22, 14, .45) 100%),
		var(--hero, linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%));
	background-size: cover;
	background-position: center;
}
.ssp-hero {
	position: relative; overflow: hidden;
	display: grid; gap: 18px; align-items: end;
	padding: 26px 20px 20px; border-radius: 20px; color: #fff;
}
.ssp-hero::after { /* tree line along the bottom */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none; opacity: .18;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 70V52l10-14 8 12 12-26 12 22 8-10 12 20 14-34 14 30 10-14 10 18 14-28 12 24 10-12 10 16 16-36 14 32 10-14 12 20 12-24 12 20 10-10 12 18 14-30 12 26 10-12 10 14 14-26 12 22 10-12 12 20 10-8V70z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.ssp-hero > * { position: relative; z-index: 1; }
.ssp-hero__kicker { color: rgba(255, 255, 255, .78); font-weight: 700; margin-bottom: 6px; }
.ssp-hero h1 { color: #fff; margin-bottom: 12px; }
.ssp-hero__biz { margin: 0; }
.ssp-hero .ssp-btn--primary { margin-top: 6px; }

.ssp-shiftcard { position: relative; overflow: hidden; padding: 18px 20px 30px; border-radius: 14px; background: var(--paper); color: var(--ink); }
.ssp-shiftcard::after { /* hi-vis reflective tape */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
	background: linear-gradient(to bottom, var(--accent) 0 5px, #b9c1bd 5px 9px, var(--accent) 9px 14px);
}
.ssp-shiftcard__label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.ssp-shiftcard__day { font-family: var(--head); font-weight: 800; font-size: 2.4rem; line-height: 1; margin: 0 0 2px; color: var(--brand); }
.ssp-shiftcard__date { font-size: 1.05rem; margin: 0 0 10px; }
.ssp-shiftcard__time { display: inline-block; margin: 0 0 4px; padding: 6px 12px; border-radius: 8px; background: var(--brand); color: var(--brand-text); font-family: var(--head); font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ssp-shiftcard__none { color: var(--muted); margin: 6px 0 4px; }
.ssp-shiftcard__link { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; font-size: .92rem; text-decoration: none; }
@media (min-width: 760px) {
	.ssp-hero { grid-template-columns: 1fr 300px; padding: 40px 36px 36px; min-height: 250px; }
}

/* Stats band */
.ssp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .ssp-stats { grid-template-columns: repeat(4, 1fr); } .ssp-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.ssp-stats--tight { margin: 0 0 18px; }
.ssp-stat {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
	padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
	color: var(--ink) !important; text-decoration: none;
}
.ssp-stat > .ssp-i { grid-row: 1 / 3; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.ssp-stat strong { font-family: var(--head); font-weight: 800; font-size: 2rem; line-height: 1; }
.ssp-stat strong.ssp-stat__small { font-size: 1.3rem; }
.ssp-stat span { font-size: .88rem; color: var(--muted); font-weight: 700; line-height: 1.25; }
a.ssp-stat:hover { border-color: var(--line-2); }
.ssp-stat.is-due > .ssp-i { background: var(--wait-soft); color: var(--wait); }
.ssp-stat.is-due { box-shadow: inset 0 -4px 0 var(--accent-dark), var(--shadow); }
.ssp-stat.is-alert > .ssp-i { background: var(--alert); color: #fff; }
.ssp-stat.is-alert { box-shadow: inset 0 -4px 0 var(--alert), var(--shadow); }

.ssp-mgrbar { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; border-radius: var(--r); background: var(--brand-soft); color: var(--ink) !important; text-decoration: none; border: 1px solid var(--line); }
.ssp-mgrbar > span:nth-child(2) { flex: 1; display: grid; }

/* Quick report tiles */
.ssp-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ssp-quick__btn { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 108px; border-radius: 14px; border: 1px solid var(--line); background: #fafbf9; color: var(--ink) !important; text-decoration: none; font-weight: 700; line-height: 1.25; }
.ssp-quick__btn:hover { border-color: var(--brand); background: var(--paper); }
.ssp-quick__btn.is-alert { border-color: #efc2b8; background: var(--alert-soft); }
.ssp-quick--small { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ssp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink) !important; font-weight: 700; font-size: .92rem; text-decoration: none; }
.ssp-chip .ssp-i { width: 16px; height: 16px; }
.ssp-chip:hover { border-color: var(--ink); }
.ssp-chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-text) !important; }

.ssp-feed { list-style: none; margin: 0; padding: 0; }
.ssp-feed li + li { border-top: 1px solid var(--line); }
.ssp-feed a { display: grid; gap: 2px; padding: 12px 0 12px 14px; color: var(--ink) !important; text-decoration: none; border-left: 4px solid transparent; }
.ssp-feed a.is-new { border-left-color: var(--accent-dark); }
.ssp-feed span { color: var(--muted); font-size: .92rem; }

/* ---------- Manager ---------- */
.ssp-subnav { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 18px; padding: 4px; background: #e6eae5; border-radius: 12px; scrollbar-width: none; }
.ssp-subnav a { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 9px; color: var(--ink) !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ssp-subnav a.is-active { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ssp-toolbar { display: grid; gap: 10px; margin-bottom: 16px; }
.ssp-filterchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ssp-toolbar .ssp-filterchips { margin: 0; }
.ssp-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .ssp-people { grid-template-columns: 1fr 1fr; } }
.ssp-person { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink) !important; text-decoration: none; }
.ssp-person:hover { border-color: var(--brand); }
.ssp-person.is-paused { opacity: .6; }
.ssp-person__main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ssp-person__roles { color: var(--muted); font-size: .9rem; }
.ssp-avatar--row { width: 46px; height: 46px; background: var(--brand); color: var(--brand-text); font-size: 1rem; }

.ssp-form--card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 20px 20px; box-shadow: var(--shadow); gap: 0 !important; }
.ssp-fs { border: 0; margin: 0; padding: 18px 0; min-width: 0; }
.ssp-fs + .ssp-fs { border-top: 1px solid var(--line); }
.ssp-fs > legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font-family: var(--head); font-weight: 800; font-size: 1.2rem; }
.ssp-fs > legend + * { clear: both; }
.ssp-grid2 { display: grid; gap: 14px; }
@media (min-width: 700px) { .ssp-grid2 { grid-template-columns: 1fr 1fr; } .ssp-span2 { grid-column: 1 / -1; } }
.ssp-form__actions { padding-top: 6px; }

.ssp-bizpick { display: grid; gap: 10px; }
@media (min-width: 700px) { .ssp-bizpick { grid-template-columns: repeat(3, 1fr); } }
.ssp-bizcard { position: relative; cursor: pointer; --c: var(--tree); }
.ssp-bizcard--waste { --c: var(--waste); }
.ssp-bizcard--firewood { --c: var(--firewood); }
.ssp-bizcard input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ssp-bizcard > span { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--paper); font-weight: 700; }
.ssp-bizcard > span .ssp-i { width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }
.ssp-bizcard > span small { margin-left: auto; font-weight: 400; color: var(--muted); font-size: .8rem; }
.ssp-bizcard input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, white); box-shadow: inset 0 0 0 1px var(--c); }
.ssp-bizcard input:checked + span::after { content: "✓"; margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: .9rem; }
.ssp-bizcard input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.ssp-bizcard.is-locked { opacity: .5; cursor: not-allowed; }
[data-ssp-allbiz] { margin-top: 10px; }

.ssp-rolepick { display: flex; flex-wrap: wrap; gap: 8px; }
.ssp-rolechip { position: relative; cursor: pointer; }
.ssp-rolechip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ssp-rolechip span { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--paper); font-weight: 700; }
.ssp-rolechip .ssp-i { display: none; width: 16px; height: 16px; }
.ssp-rolechip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.ssp-rolechip input:checked + span .ssp-i { display: inline; }
.ssp-rolechip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.ssp-more { margin-top: 14px; }
.ssp-more summary { cursor: pointer; font-weight: 700; color: var(--brand); min-height: 44px; display: flex; align-items: center; }
.ssp-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ssp-danger h2 { margin-bottom: 4px; }
.ssp-danger p { margin: 0; }

.ssp-kv { display: grid; grid-template-columns: 1fr; gap: 2px 18px; margin: 0 0 12px; }
.ssp-kv dt { font-weight: 700; color: var(--muted); font-size: .9rem; margin-top: 8px; }
.ssp-kv dd { margin: 0; }
@media (min-width: 600px) { .ssp-kv { grid-template-columns: 170px 1fr; } .ssp-kv dt { margin-top: 0; } .ssp-kv dt, .ssp-kv dd { padding: 8px 0; border-bottom: 1px solid var(--line); } }
.ssp-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.ssp-photos img { width: 130px; height: 130px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ssp-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.ssp-tick input { width: 22px; height: 22px; accent-color: var(--brand); }
.ssp-datebox { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; line-height: 1; }
.ssp-datebox strong { font-family: var(--head); font-size: 1.35rem; }

/* ---------- Calendar ---------- */
.ssp-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: #e6eae5; border-radius: 12px; }
.ssp-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 9px; color: var(--ink) !important; text-decoration: none; font-weight: 700; }
.ssp-tabs a.is-active { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ssp-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.ssp-day { display: grid; grid-template-columns: 88px 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.ssp-day__date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; background: var(--brand); color: var(--brand-text); text-align: center; line-height: 1.1; }
.ssp-day__date span { font-size: .75rem; font-weight: 700; opacity: .85; }
.ssp-day__date strong { font-family: var(--head); font-weight: 800; font-size: 1.9rem; }
.ssp-day__date em { font-style: normal; font-size: .85rem; }
.ssp-day__items { padding: 8px 16px; display: grid; gap: 4px; align-content: center; }
.ssp-ev { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; }
.ssp-ev + .ssp-ev { border-top: 1px dashed var(--line); }
.ssp-ev strong { font-family: var(--head); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ssp-ev--holiday strong { color: var(--waste); }
.ssp-ev__loc { flex-basis: 100%; font-size: .92rem; font-weight: 700; }
.ssp-pager { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 10px; max-width: 760px; }
.ssp-pager .ssp-btn { flex: 1; }

/* ---------- Forms ---------- */
.ssp-intro { padding: 12px 16px; background: var(--alert-soft); border-radius: 12px; font-weight: 700; color: #6d1d10; }
.ssp-form { display: grid; gap: 22px; max-width: 760px; }
.ssp-form--card { max-width: 880px; }
.ssp-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.ssp-field > label, .ssp-field > legend { display: block; margin-bottom: 8px; font-weight: 700; padding: 0; }
.ssp-optional { font-weight: 400; color: var(--muted); font-size: .88rem; }
.ssp-app input[type="text"], .ssp-app input[type="number"], .ssp-app input[type="date"], .ssp-app input[type="time"], .ssp-app input[type="search"],
.ssp-app input[type="password"], .ssp-app input[type="email"], .ssp-app input[type="tel"], .ssp-app select, .ssp-app textarea {
	width: 100%; min-height: var(--tap); padding: 12px 14px; border: 2px solid var(--line-2); border-radius: 12px;
	background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; box-shadow: none; margin: 0;
}
.ssp-app textarea { min-height: 110px; resize: vertical; }
.ssp-app input:focus, .ssp-app select:focus, .ssp-app textarea:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 0; }

.ssp-choices { display: grid; gap: 8px; }
.ssp-choices--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ssp-choice { position: relative; display: block; cursor: pointer; }
.ssp-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ssp-choice > span { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: var(--tap); padding: 12px 16px 12px 50px; position: relative; border: 2px solid var(--line-2); border-radius: 12px; background: var(--paper); font-weight: 700; }
.ssp-choice > span small { flex-basis: 100%; font-weight: 400; color: var(--muted); font-size: .88rem; }
.ssp-choice > span::before { content: ""; position: absolute; left: 16px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper); }
.ssp-choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.ssp-choice input:checked + span::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 4px var(--paper); }
.ssp-choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.ssp-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; }
.ssp-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ssp-file__btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 12px 18px; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--paper); font-weight: 700; }
.ssp-file input:focus-visible + .ssp-file__btn { outline: 3px solid var(--ink); outline-offset: 2px; }
.ssp-file__names { color: var(--muted); font-size: .92rem; }

.ssp-checklist { display: grid; gap: 8px; }
.ssp-checklist > [data-ssp-allok] { justify-self: start; margin-bottom: 4px; }
.ssp-check { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.ssp-check > span { font-weight: 700; }
.ssp-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 48px; padding: 0 12px; border: 2px solid var(--line-2); border-radius: 10px; font-weight: 700; cursor: pointer; }
.ssp-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ssp-pill--ok:has(input:checked) { background: var(--ok); border-color: var(--ok); color: #fff; }
.ssp-pill--bad:has(input:checked) { background: var(--alert); border-color: var(--alert); color: #fff; }
.ssp-pill:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) { .ssp-check { grid-template-columns: 1fr 1fr; } .ssp-check > span { grid-column: 1 / -1; } }
.ssp-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ssp-hours label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }

/* ---------- Done ---------- */
.ssp-done { text-align: center; padding: 30px 0; max-width: 440px; margin: 0 auto; }
.ssp-done__tick { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; background: var(--accent); color: var(--accent-text); animation: ssp-pop .35s ease-out; }
.ssp-done__tick .ssp-i { width: 48px; height: 48px; }
@keyframes ssp-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Requests / orders cards ---------- */
.ssp-req { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.ssp-req__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ssp-req__top .ssp-status { margin-left: auto; }
.ssp-req__sum { margin: 10px 0 2px; }
.ssp-req__meta { margin: 0; color: var(--muted); font-size: .9rem; }
.ssp-req__note { margin: 10px 0 0; padding: 10px 12px; background: var(--brand-soft); border-radius: 10px; }
.ssp-req form { margin-top: 10px; }
.ssp-list--cards { max-width: 880px; }

/* ---------- Reading ---------- */
.ssp-prose { max-width: 70ch; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.ssp-prose > *:last-child { margin-bottom: 0; }
.ssp-prose h2, .ssp-prose h3 { margin: 1.2em 0 .4em; }
.ssp-prose img, .ssp-prose iframe, .ssp-prose video { max-width: 100%; height: auto; border-radius: 10px; }
.ssp-prose iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.ssp-sign-box { max-width: 70ch; margin-top: 18px; padding: 20px; border-radius: var(--r); background: var(--brand-soft); border: 2px solid var(--brand); }
.ssp-sign-box p { font-weight: 700; }
.ssp-signed { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: var(--ok); }
.ssp-notices { display: grid; gap: 14px; max-width: 880px; }
.ssp-notice { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.ssp-notice.is-unread { box-shadow: inset 5px 0 0 var(--accent-dark), var(--shadow); }
.ssp-notice header { margin-bottom: 10px; }
.ssp-notice h2 { display: flex; align-items: center; gap: 8px; }
.ssp-notice__meta { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.ssp-notice .ssp-prose { padding: 0; border: 0; box-shadow: none; }
.ssp-notice .ssp-ack .ssp-btn { margin-top: 14px; width: auto; display: inline-flex; }
.ssp-emergency { margin-bottom: 16px; max-width: 70ch; }
.ssp-999 { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: var(--r); background: var(--alert); color: #fff !important; font-family: var(--head); font-size: 1.35rem; font-weight: 800; text-decoration: none; }
.ssp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; padding: 18px; max-width: 760px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.ssp-dl dt { font-weight: 700; color: var(--muted); }
.ssp-dl dd { margin: 0; }
.ssp-app--staff .ssp-block, .ssp-app--customer .ssp-block { max-width: 880px; }

/* ---------- Customer order form ---------- */
.ssp-order-h { margin-top: 8px; }
.ssp-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ssp-product { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.ssp-product__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ssp-product__info span, .ssp-product__info small { color: var(--muted); font-size: .92rem; }
.ssp-qty { display: flex; align-items: center; border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; flex: none; }
.ssp-qty button { width: 48px; min-height: 52px; border: 0; background: var(--brand-soft); color: var(--brand); font: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.ssp-qty button:hover { background: var(--accent); color: var(--accent-text); }
.ssp-app .ssp-qty input { width: 64px; min-height: 52px; border: 0; border-radius: 0; text-align: center; padding: 0; -moz-appearance: textfield; }
.ssp-qty input::-webkit-outer-spin-button, .ssp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ssp-product.has-qty { border-color: var(--brand); box-shadow: inset 5px 0 0 var(--brand), var(--shadow); }

/* ---------- Login ---------- */
.ssp-app--login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; background: var(--bg); }
.ssp-login { display: grid; width: 100%; max-width: 980px; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 20px 60px rgba(22, 32, 26, .15); }
.ssp-login__panel { padding: 36px 28px 30px; }
.ssp-login__brand { margin-bottom: 26px; }
.ssp-login__brand .ssp-logo { max-height: 70px; width: auto; }
.ssp-login__brand .ssp-wordmark { color: var(--brand); font-size: 1.5rem; }
.ssp-login h1 { margin-bottom: 8px; }
.ssp-login__lead { color: var(--muted); margin-bottom: 20px; }
.ssp-login__help { margin: 14px 0 6px; }
.ssp-login__help a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.ssp-login__note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin: 0; }
.ssp-login__side { position: relative; display: flex; align-items: flex-end; min-height: 180px; padding: 24px; color: #fff; }
.ssp-login__biz { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.ssp-login__biz li { display: flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 800; font-size: 1.25rem; }
.ssp-login__biz .ssp-i { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .15); }
@media (min-width: 820px) {
	.ssp-login { grid-template-columns: 1fr 1fr; min-height: 520px; }
	.ssp-login__panel { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
	.ssp-login__side { padding: 40px; }
}


/* ---------- Bell ---------- */
.ssp-top__spacer { flex: 1; }
.ssp-top { gap: 10px; }
.ssp-top__brand { margin-right: auto; }
@media (min-width: 960px) { .ssp-top__brand { margin-right: 0; } }
.ssp-bell { position: relative; }
.ssp-bell > summary { list-style: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: inherit; }
.ssp-bell > summary::-webkit-details-marker { display: none; }
.ssp-bell > summary:hover { background: rgba(127, 127, 127, .14); }
.ssp-bell > summary .ssp-i { width: 24px; height: 24px; transform-origin: 50% 10%; }
.ssp-bell.has-new > summary .ssp-i { animation: ssp-ring 1.1s .8s ease-in-out 2; }
.ssp-bell__n { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--alert); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--brand); }
@media (min-width: 960px) { .ssp-bell__n { border-color: var(--paper); } }
.ssp-bell__panel { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 50; width: min(360px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(22, 32, 26, .2); animation: ssp-drop .18s ease-out; }
.ssp-bell__head { margin: 0; padding: 14px 16px 8px; font-family: var(--head); font-weight: 800; font-size: 1.1rem; }
.ssp-bell__panel ul { list-style: none; margin: 0; padding: 0 0 8px; }
.ssp-bell__panel a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--ink) !important; text-decoration: none; }
.ssp-bell__panel a:hover { background: #f5f7f4; }
.ssp-bell__panel a > span:last-child { display: grid; min-width: 0; }
.ssp-bell__panel strong { font-size: .95rem; line-height: 1.3; }
.ssp-bell__panel small { color: var(--muted); font-size: .82rem; }
.ssp-bell__empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px 18px; color: var(--ok); font-weight: 700; }
@keyframes ssp-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes ssp-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Today box (weather + check) ---------- */
.ssp-today { display: grid; gap: 2px; margin-top: 18px; padding: 8px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 900px) { .ssp-today { grid-template-columns: 1fr 1fr; } .ssp-wx__warn, .ssp-today__check { grid-column: 1 / -1; } }
.ssp-wx { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.ssp-wx > .ssp-i { width: 30px; height: 30px; color: var(--brand); flex: none; }
.ssp-wx__day { width: 72px; flex: none; font-weight: 700; color: var(--muted); font-size: .88rem; }
.ssp-wx__main { flex: 1; display: grid; line-height: 1.3; }
.ssp-wx__main strong { font-family: var(--head); font-weight: 800; font-size: 1.15rem; }
.ssp-wx__main small { color: var(--muted); font-size: .84rem; }
.ssp-wx.is-windy { background: var(--alert-soft); }
.ssp-wx .ssp-tag .ssp-i, .ssp-tag .ssp-i { width: 14px; height: 14px; margin-right: 3px; }
.ssp-wx__warn { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--alert-soft); color: #6d1d10; font-weight: 700; font-size: .92rem; }
.ssp-today__check { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: var(--wait-soft); color: var(--ink) !important; text-decoration: none; }
.ssp-today__check > span { flex: 1; display: grid; }
.ssp-today__check small { color: var(--muted); }

/* ---------- Years with us ---------- */
.ssp-service { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .92rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ssp-service .ssp-i { color: var(--accent); }
.ssp-anniv { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--accent); color: var(--accent-text); }
.ssp-anniv > span:last-child { display: grid; }
.ssp-anniv .ssp-i { width: 30px; height: 30px; }
.ssp-confetti { position: absolute; inset: 0; pointer-events: none; }
.ssp-confetti i { position: absolute; top: -10px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: ssp-fall 2.6s ease-in 3; }
.ssp-confetti i:nth-child(3n) { background: #fff; } .ssp-confetti i:nth-child(3n+1) { background: var(--brand); } .ssp-confetti i:nth-child(3n+2) { background: var(--alert); }
.ssp-confetti i:nth-child(1) { left: 4%; animation-delay: .1s; } .ssp-confetti i:nth-child(2) { left: 11%; animation-delay: .7s; } .ssp-confetti i:nth-child(3) { left: 18%; animation-delay: .3s; } .ssp-confetti i:nth-child(4) { left: 26%; animation-delay: 1s; } .ssp-confetti i:nth-child(5) { left: 33%; animation-delay: .5s; } .ssp-confetti i:nth-child(6) { left: 41%; animation-delay: .2s; } .ssp-confetti i:nth-child(7) { left: 49%; animation-delay: .9s; } .ssp-confetti i:nth-child(8) { left: 56%; animation-delay: .4s; } .ssp-confetti i:nth-child(9) { left: 63%; animation-delay: 1.2s; } .ssp-confetti i:nth-child(10) { left: 70%; animation-delay: .6s; } .ssp-confetti i:nth-child(11) { left: 77%; animation-delay: .15s; } .ssp-confetti i:nth-child(12) { left: 84%; animation-delay: .8s; } .ssp-confetti i:nth-child(13) { left: 91%; animation-delay: .35s; } .ssp-confetti i:nth-child(14) { left: 97%; animation-delay: 1.1s; }
@keyframes ssp-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(90px) rotate(540deg); } }

/* ---------- Manager widgets ---------- */
.ssp-mini-h { margin: 14px 0 8px !important; font-size: .95rem !important; color: var(--muted); }
.ssp-card .ssp-mini-h:first-of-type { margin-top: 0 !important; }
.ssp-rota { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ssp-rota li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: #f7f9f6; }
.ssp-rota li > span:nth-child(2) { flex: 1; font-weight: 700; }
.ssp-rota em { font-style: normal; font-family: var(--head); font-weight: 800; font-variant-numeric: tabular-nums; }
.ssp-rota li.is-holiday em { color: var(--waste); }
.ssp-rota li.is-missing { background: var(--wait-soft); }
.ssp-rota .ssp-avatar--row { width: 36px; height: 36px; font-size: .85rem; }
.ssp-ok-line { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 700; margin: 0; }

/* ---------- ICE, install ---------- */
.ssp-ice { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ssp-ice li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fdf4f2; font-weight: 700; }
.ssp-ice .ssp-row__main small { color: var(--muted); }
.ssp-install { display: grid; gap: 10px; }
@media (min-width: 700px) { .ssp-install { grid-template-columns: 1fr 1fr; } }
.ssp-install > div { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.ssp-install p { margin: 0; }
.ssp-hint .ssp-i { width: 16px; height: 16px; }

/* ---------- Commission ---------- */
.ssp-qty--solo { display: inline-flex; }
.ssp-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.ssp-geo__status { color: var(--muted); font-size: .92rem; font-weight: 700; }
.ssp-geo__status.is-ok { color: var(--ok); }
.ssp-total { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--brand); }
.ssp-iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.ssp-iconbtn:hover { background: var(--alert-soft); color: var(--alert); }
.ssp-sendbox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ssp-row > strong { font-family: var(--head); font-weight: 800; white-space: nowrap; }
.ssp-row form { margin: 0; }
.ssp-colls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .ssp-colls { grid-template-columns: 1fr 1fr; } }
.ssp-colls li { display: flex; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.ssp-colls li > div { display: grid; gap: 2px; align-content: start; min-width: 0; }
.ssp-colls small { color: var(--muted); font-size: .86rem; }
.ssp-colls small a { display: inline-flex; align-items: center; gap: 4px; }
.ssp-colls small .ssp-i { width: 14px; height: 14px; }
.ssp-colls .ssp-status { justify-self: start; margin-top: 4px; }
.ssp-colls__img img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.ssp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ssp-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; transition: transform .2s ease; }
.ssp-gallery a:hover img { transform: scale(1.03); }

/* ---------- Motion ---------- */
@keyframes ssp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ssp-main > * { animation: ssp-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-main > *:nth-child(2) { animation-delay: .06s; } .ssp-main > *:nth-child(3) { animation-delay: .12s; } .ssp-main > *:nth-child(4) { animation-delay: .18s; } .ssp-main > *:nth-child(5) { animation-delay: .24s; } .ssp-main > *:nth-child(6) { animation-delay: .3s; } .ssp-main > *:nth-child(n+7) { animation-delay: .34s; }
.ssp-stats > * { animation: ssp-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-stats > *:nth-child(2) { animation-delay: .08s; } .ssp-stats > *:nth-child(3) { animation-delay: .16s; } .ssp-stats > *:nth-child(4) { animation-delay: .24s; }
.ssp-shiftcard { animation: ssp-rise .5s .15s cubic-bezier(.2, .7, .2, 1) both; }
a.ssp-stat, .ssp-quick__btn, .ssp-person, .ssp-mgrbar, .ssp-feed a, .ssp-install > div { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.ssp-stat:hover, .ssp-quick__btn:hover, .ssp-person:hover, .ssp-mgrbar:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22, 32, 26, .1); }
.ssp-btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
.ssp-btn:active, .ssp-quick__btn:active, a.ssp-stat:active { transform: scale(.97); }
a.ssp-row { transition: background-color .15s ease; }
a.ssp-row .ssp-chev { transition: transform .18s ease; }
a.ssp-row:hover .ssp-chev { transform: translateX(3px); }
.ssp-side__nav a { transition: background-color .15s ease, color .15s ease; }
.ssp-alert { animation: ssp-rise .35s ease both; }

@media (prefers-reduced-motion: reduce) { .ssp-app *, .ssp-app *::before, .ssp-app *::after { transition: none !important; animation: none !important; } }

/* ---------- Tidier dashboard ---------- */
.ssp-stats--2 { grid-template-columns: 1fr 1fr !important; }
@media (min-width: 900px) { .ssp-quick--4 { grid-template-columns: repeat(4, 1fr); } }
.ssp-mgrbar--due { background: var(--wait-soft); }
.ssp-mgrbar--alert { background: var(--alert-soft); }
.ssp-mgrbar + .ssp-mgrbar { margin-top: 10px; }
.ssp-wxline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ssp-wxline__day { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; font-size: .9rem; }
.ssp-wxline__day .ssp-i { width: 18px; height: 18px; }
.ssp-wxline__day b { font-weight: 700; }
.ssp-wxline__day.is-windy { background: var(--alert); box-shadow: none; }
.ssp-wxline__warn { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #ffd9d0; font-weight: 700; font-size: .92rem; }
.ssp-wxline__warn .ssp-i { width: 18px; height: 18px; flex: none; }

/* ---------- Yard map ---------- */
.ssp-yard-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 12px; font-size: .88rem; font-weight: 700; color: var(--muted); }
.ssp-yard-key span { display: inline-flex; align-items: center; gap: 6px; }
.ssp-yard-key i { width: 14px; height: 14px; border-radius: 4px; }
.ssp-yard { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.ssp-yard__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssp-yard__svg { display: block; width: 100%; min-width: 680px; height: auto; background: #f7f8f4; }
.ssp-yard__lines path { stroke: #2b332d; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.ssp-yard__leader { stroke: #1c3d2a; stroke-width: 3; fill: none; }
.ssp-yard__bld { font: 700 34px var(--head); fill: #6b7770; }
.ssp-bay { cursor: pointer; }
.ssp-bay__bg { fill: #eef1ea; }
.ssp-bay__edge { fill: none; stroke: #7fbf5f; stroke-width: 4; stroke-linejoin: round; transition: stroke-width .15s ease; }
.ssp-bay__fill { transform-box: fill-box; transform-origin: 50% 100%; animation: ssp-fillup 1s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-bay:nth-of-type(2n) .ssp-bay__fill { animation-delay: .1s; } .ssp-bay:nth-of-type(3n) .ssp-bay__fill { animation-delay: .2s; }
@keyframes ssp-fillup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ssp-bay__fill--x { transform-origin: 0 50%; animation-name: ssp-fillx; }
@keyframes ssp-fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ssp-bay__tag rect { fill: #fff; stroke: #1c3d2a; stroke-width: 3; }
.ssp-bay__n { font: 700 19px var(--head); fill: #5a665f; }
.ssp-yard__dot { fill: #1c3d2a; }
.ssp-bay__q { font: 800 30px var(--head); fill: #16201a; }
.ssp-bay.is-empty .ssp-bay__q { fill: #9aa39d; }
.ssp-bay:hover .ssp-bay__edge, .ssp-bay:focus .ssp-bay__edge { stroke: #16201a; stroke-width: 7; }
.ssp-bay:focus { outline: none; }
.ssp-bay.is-low .ssp-bay__edge { stroke: #b8321c; stroke-width: 6; animation: ssp-pulse 1.6s ease-in-out infinite; }
.ssp-bay.is-low .ssp-bay__tag rect { fill: #fcebe7; stroke: #b8321c; }
@keyframes ssp-pulse { 50% { stroke-opacity: .35; } }

.ssp-gauges { display: grid; gap: 10px; }
@media (min-width: 900px) { .ssp-gauges { grid-template-columns: 1fr 1fr; } }
.ssp-gauge, .ssp-baycard { border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; }
.ssp-gauge > summary, .ssp-baycard > summary { list-style: none; cursor: pointer; padding: 12px 14px; }
.ssp-gauge > summary::-webkit-details-marker, .ssp-baycard > summary::-webkit-details-marker { display: none; }
.ssp-gauge__top { display: flex; align-items: center; gap: 10px; }
.ssp-gauge__top .ssp-i { width: 22px; height: 22px; color: var(--brand); }
.ssp-gauge__top strong { flex: 1; }
.ssp-gauge__top > span { font-family: var(--head); font-weight: 800; }
.ssp-gauge__bar { display: block; height: 12px; margin: 10px 0 6px; border-radius: 6px; background: #e3e8e1; overflow: hidden; }
.ssp-gauge__bar i { display: block; height: 100%; width: var(--p); border-radius: 6px; background: var(--brand); animation: ssp-grow 1s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-gauge.is-low .ssp-gauge__bar i { background: var(--alert); }
.ssp-gauge.is-low { border-color: #efc2b8; background: var(--alert-soft); }
.ssp-gauge small { color: var(--muted); font-size: .84rem; }
@keyframes ssp-grow { from { width: 0; } }
.ssp-baylist { display: grid; gap: 8px; }
@media (min-width: 900px) { .ssp-baylist { grid-template-columns: 1fr 1fr; } }
.ssp-baycard > summary { display: flex; align-items: center; gap: 12px; }
.ssp-baycard__sw { width: 30px; height: 30px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.ssp-baycard__main { flex: 1; display: grid; }
.ssp-baycard__main small { color: var(--muted); }
.ssp-baycard__pct { font-family: var(--head); font-weight: 800; font-size: 1.2rem; }
.ssp-baycard.is-low { border-color: #efc2b8; background: var(--alert-soft); }
.ssp-baycard[open], .ssp-gauge[open] { background: var(--paper); border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); }
.ssp-baycard > .ssp-hint, .ssp-baycard > form, .ssp-gauge > form { margin: 0 14px 14px; }
.ssp-yardform { display: grid; gap: 14px; }
.ssp-quickset { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ssp-yardlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.ssp-yardlog li span { display: inline-block; min-width: 110px; color: var(--muted); }
.ssp-yardlog em { color: var(--muted); font-style: normal; }
@keyframes ssp-flash { 0%, 100% { box-shadow: 0 0 0 2px transparent; } 30% { box-shadow: 0 0 0 5px var(--accent); } }
.ssp-flashme { animation: ssp-flash 1.2s ease 2; }

/* ---------- Yard v2 ---------- */
.ssp-yardwrap { display: grid; gap: 18px; }
@media (min-width: 1150px) { .ssp-yardwrap { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.ssp-yard .ssp-yard-key { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
.ssp-yard__svg { background: #e3edd9; }
.ssp-yard__bldg { fill: #d7dbd3; stroke: #2b332d; stroke-width: 5; stroke-linejoin: round; }
.ssp-yard__bld { font: 800 32px var(--head); fill: #4a544d; }
.ssp-tree { transform-box: fill-box; transform-origin: 50% 90%; animation: ssp-sway 6s ease-in-out infinite; }
@keyframes ssp-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.02); } }
.ssp-bay__bg { fill: #f7f8f2; }
.ssp-bay__fill { animation-delay: var(--d, 0s); }
.ssp-bay__tick { stroke: rgba(255, 255, 255, .55); stroke-width: 3; }
.ssp-bay__sheen { animation: ssp-sheen 5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 1.4s); }
@keyframes ssp-sheen { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(300%); } }
.ssp-bay__sheen { transform-box: fill-box; }
.ssp-yard__leader { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ssp-draw .6s ease-out forwards; animation-delay: calc(var(--d, 0s) + .5s); }
@keyframes ssp-draw { to { stroke-dashoffset: 0; } }
.ssp-bay__pop { transform-box: fill-box; transform-origin: 50% 50%; animation: ssp-pop2 .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0s) + .7s); transition: transform .15s ease; }
@keyframes ssp-pop2 { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ssp-bay:hover .ssp-bay__pop, .ssp-bay:focus .ssp-bay__pop { transform: scale(1.12); }
.ssp-bay:hover .ssp-bay__tag rect, .ssp-bay:focus .ssp-bay__tag rect { fill: #f5fbd0; }

.ssp-ystats { padding: 18px; border-radius: 20px; background: var(--brand-dark); color: #fff; box-shadow: var(--shadow); }
.ssp-ystats h2 { color: #fff; margin-bottom: 12px; }
.ssp-ystats h3 { margin: 18px 0 8px; font-size: .95rem; color: rgba(255, 255, 255, .7); font-family: var(--head); }
.ssp-ystats__big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ssp-ystats__big div { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.ssp-ystats__big strong { display: block; font-family: var(--head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--accent); }
.ssp-ystats__big span { font-size: .85rem; color: rgba(255, 255, 255, .8); }
.ssp-ystats__sub { margin: 10px 0 0; color: rgba(255, 255, 255, .75); font-size: .9rem; }
.ssp-ystats__types { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ssp-ystats__types li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .9rem; }
.ssp-ystats__types b { font-family: var(--head); font-weight: 800; }
.ssp-ystats__types i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ssp-ystats__types em { display: block; height: 100%; width: var(--p); border-radius: 4px; animation: ssp-grow 1.1s .4s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-ystats__fuel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.ssp-ystats__fuel li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.ssp-ystats__fuel li.is-low { background: var(--alert); }
.ssp-ystats__fuel a { color: #fff !important; text-decoration: none; }

.ssp-gauge { padding: 14px; }
.ssp-gauge > .ssp-hint { margin: 6px 0 0; }
.ssp-cans { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ssp-canpick { position: relative; }
.ssp-canpick > summary { list-style: none; cursor: pointer; display: grid; justify-items: center; gap: 2px; width: 62px; padding: 6px 4px; border-radius: 12px; }
.ssp-canpick > summary::-webkit-details-marker { display: none; }
.ssp-canpick > summary:hover, .ssp-canpick[open] > summary { background: var(--brand-soft); }
.ssp-canpick small { font-weight: 700; font-size: .8rem; color: var(--muted); }
.ssp-can { width: 42px; height: 58px; }
.ssp-can__body { fill: #fff; stroke: #2b332d; stroke-width: 2.5; }
.ssp-can__handle { stroke: #2b332d; stroke-width: 2.5; }
.ssp-can__spout { fill: #2b332d; }
.ssp-can__x { stroke: rgba(255, 255, 255, .35); stroke-width: 2; fill: none; }
.ssp-can__fill { transform-box: fill-box; transform-origin: 50% 100%; animation: ssp-fillup .9s cubic-bezier(.2, .7, .2, 1) both; }
.ssp-canpick__menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: 220px; padding: 10px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(22, 32, 26, .18); display: flex; flex-wrap: wrap; gap: 6px; animation: ssp-drop .15s ease-out; }
.ssp-canpick__menu p { width: 100%; margin: 0 0 4px; font-weight: 700; }
.ssp-canpick__menu .ssp-chip { cursor: pointer; font: inherit; font-weight: 700; }
.ssp-useform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ssp-useform label { font-weight: 700; }
.ssp-useform .ssp-qty button { width: 42px; min-height: 44px; }
.ssp-app .ssp-useform .ssp-qty input { width: 56px; min-height: 44px; }
.ssp-steps10 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ssp-steps10 label { position: relative; cursor: pointer; }
.ssp-steps10 input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ssp-steps10 span { display: grid; place-items: center; min-height: 46px; border-radius: 10px; border: 2px solid var(--line-2); font-weight: 700; font-size: .9rem; background: var(--paper); }
.ssp-steps10 input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.ssp-steps10 input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.ssp-gauge__top { flex-wrap: wrap; }
@media (max-width: 600px) { .ssp-gauge__top > span:not(.ssp-tag) { flex-basis: 100%; order: 3; font-size: .95rem; } }

/* =================== v1.5: every tab polished =================== */

/* App-like page transitions (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
.ssp-side { view-transition-name: ssp-side; }
.ssp-top { view-transition-name: ssp-top; }
.ssp-bottom { view-transition-name: ssp-bottom; }
::view-transition-old(root) { animation: 160ms ease-out both ssp-vt-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(.2, .7, .2, 1) both ssp-vt-in; }
@keyframes ssp-vt-out { to { opacity: 0; } }
@keyframes ssp-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Offline bars and toasts */
.ssp-netbar, .ssp-queue { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 700; font-size: .92rem; }
.ssp-netbar[hidden], .ssp-queue[hidden] { display: none; }
.ssp-netbar { background: #2b332d; color: #fff; }
.ssp-queue { background: var(--wait-soft); color: var(--wait); }
.ssp-queue span { flex: 1; }
.ssp-netbar .ssp-i, .ssp-queue .ssp-i { width: 20px; height: 20px; }
.ssp-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 100; transform: translateX(-50%); max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 14px; background: #16201a; color: #fff; font: 700 .95rem "Atkinson Hyperlegible", sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: ssp-toast-in .3s ease both; transition: opacity .4s ease; text-align: center; }
@keyframes ssp-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ssp-toast.is-out { opacity: 0; }
@media (min-width: 960px) { .ssp-toast { bottom: 28px; } }

/* Shared bits */
.ssp-emptyart { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 20px; border: 2px dashed var(--line-2); border-radius: 20px; max-width: 560px; }
.ssp-emptyart .ssp-ibadge { width: 64px; height: 64px; border-radius: 18px; }
.ssp-emptyart .ssp-ibadge .ssp-i { width: 32px; height: 32px; }
.ssp-emptyart p { color: var(--muted); margin: 0; }
.ssp-tag--new { background: var(--accent); color: var(--accent-text); }
.ssp-tag .ssp-i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.ssp-status .ssp-i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.ssp-confetti--big i { width: 9px; height: 14px; }
.ssp-logout { margin-top: 18px; color: var(--muted) !important; }
.ssp-iconbtn--flip .ssp-i { transform: scaleX(-1); }

/* Progress ring hero */
.ssp-progress-hero { display: flex; align-items: center; gap: 20px; padding: 18px 20px; margin-bottom: 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 880px; }
.ssp-progress-hero h2 { margin-bottom: 4px; }
.ssp-progress-hero p { color: var(--muted); margin: 0 0 8px; }
.ssp-ring { position: relative; width: 104px; height: 104px; flex: none; }
.ssp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ssp-ring circle { fill: none; stroke-width: 12; }
.ssp-ring__bg { stroke: var(--brand-soft); }
.ssp-ring__fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); animation: ssp-ring-in 1.2s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ssp-ring-in { from { stroke-dashoffset: 100; } }
.ssp-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ssp-ring strong { font-family: var(--head); font-weight: 800; font-size: 1.5rem; }
.ssp-ring small { color: var(--muted); font-size: .78rem; font-weight: 700; }

/* Steps (progress trackers) */
.ssp-steps { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; gap: 0; }
.ssp-steps li { position: relative; flex: 1; display: grid; justify-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); text-align: center; }
.ssp-steps li span { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line-2); }
.ssp-steps li + li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 4px; background: var(--line); }
.ssp-steps li.is-done span { background: var(--brand); border-color: var(--brand); }
.ssp-steps li.is-done { color: var(--ink); }
.ssp-steps li.is-done + li.is-done::before { background: var(--brand); }
.ssp-steps li.is-now span { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent); }
.ssp-steps.is-ok li.is-done span { background: var(--ok); border-color: var(--ok); }
.ssp-steps.is-no li.is-now span { background: var(--alert); border-color: var(--alert); }
.ssp-req__top { flex-wrap: nowrap; }
.ssp-req__title { display: grid; flex: 1; min-width: 0; }
.ssp-req__title small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shifts: toolbar and month */
.ssp-calbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ssp-seg { display: inline-flex; gap: 4px; padding: 4px; background: #e6eae5; border-radius: 12px; }
.ssp-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 9px; color: var(--ink) !important; font-weight: 700; text-decoration: none; }
.ssp-seg a.is-active { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ssp-seg .ssp-i { width: 18px; height: 18px; }
.ssp-month { max-width: 880px; padding: 14px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ssp-month__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ssp-month__head h2 { flex: 1; font-size: 1.4rem; }
.ssp-month__head h2 small { display: block; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: .85rem; color: var(--muted); }
.ssp-month__head .ssp-iconbtn { border: 1px solid var(--line); }
.ssp-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ssp-month__dn { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.ssp-mcell { position: relative; min-height: 76px; padding: 6px; border-radius: 10px; background: #f7f9f5; display: flex; flex-direction: column; gap: 3px; animation: ssp-rise .35s both; animation-delay: calc(var(--i) * 12ms); }
.ssp-mcell.is-out { background: transparent; }
.ssp-mcell.is-out .ssp-mcell__d { color: #b3bbb5; }
.ssp-mcell.is-past:not(.is-today) .ssp-mcell__d { color: var(--muted); }
.ssp-mcell__d { font-family: var(--head); font-weight: 800; font-size: .95rem; }
.ssp-mcell.is-today { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand); }
.ssp-mcell.is-today .ssp-mcell__d { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--brand-text); }
.ssp-mcell.has-ev { cursor: pointer; background: color-mix(in srgb, var(--accent) 22%, #fff); }
.ssp-mcell.has-ev:hover, .ssp-mcell.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }
.ssp-mchip { display: block; padding: 2px 6px; border-radius: 6px; background: var(--brand); color: var(--brand-text); font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssp-mchip.is-hol { background: var(--waste); color: #fff; }
.ssp-mchip--more { background: transparent; color: var(--muted); padding: 0 4px; }
@media (max-width: 560px) {
	.ssp-month { padding: 10px 8px; }
	.ssp-mcell { min-height: 54px; padding: 4px; }
	.ssp-mchip { font-size: .66rem; padding: 1px 3px; }
}
.ssp-daydetail { display: grid; gap: 10px; margin-top: 16px; max-width: 880px; }

/* Report tiles */
.ssp-999--slim { min-height: 48px; font-size: 1rem; margin-bottom: 6px; max-width: 880px; }
.ssp-999 .ssp-i { width: 24px; height: 24px; }
.ssp-ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-width: 980px; }
.ssp-ftile { display: grid; gap: 6px; align-content: start; min-height: 128px; padding: 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink) !important; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ssp-ftile strong { font-size: 1.05rem; line-height: 1.2; margin-top: 4px; }
.ssp-ftile small { color: var(--muted); font-size: .88rem; }
.ssp-ftile:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 10px 26px rgba(22, 32, 26, .1); }
.ssp-ftile:active { transform: scale(.97); }
.ssp-ftile.is-alert { background: var(--alert-soft); border-color: #efc2b8; }
@media (max-width: 480px) { .ssp-ftiles { grid-template-columns: 1fr 1fr; } .ssp-ftile { min-height: 116px; padding: 14px; } }

/* Training */
.ssp-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 1100px; }
.ssp-course { --c: var(--tree); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink) !important; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; animation: ssp-rise .45s both; animation-delay: calc(var(--i) * 60ms); }
.ssp-course--waste { --c: var(--waste); }
.ssp-course--firewood { --c: var(--firewood); }
.ssp-course:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22, 32, 26, .12); }
.ssp-course[hidden] { display: none; }
.ssp-course__band { position: relative; display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 18px; background: var(--c); color: #fff; overflow: hidden; }
.ssp-course__band::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 22px rgba(255, 255, 255, .05); }
.ssp-course__band .ssp-i { width: 38px; height: 38px; }
.ssp-course__band em { position: relative; z-index: 1; font-style: normal; font-weight: 700; font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.ssp-course.is-done .ssp-course__band em { background: var(--accent); color: var(--accent-text); }
.ssp-course__body { display: grid; gap: 6px; padding: 16px 18px 6px; flex: 1; }
.ssp-course__body strong { font-family: var(--head); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.ssp-course__body small { color: var(--muted); }
.ssp-course__meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.ssp-course__meta .ssp-i { width: 15px; height: 15px; }
.ssp-course__cta { display: flex; align-items: center; justify-content: space-between; margin: 10px 18px 16px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; color: var(--c); }
.ssp-course.is-done .ssp-course__cta { color: var(--ok); }
.ssp-coursehead { --c: var(--tree); display: flex; align-items: center; gap: 16px; padding: 22px; margin-bottom: 14px; border-radius: 20px; background: var(--c); color: #fff; max-width: 880px; }
.ssp-coursehead h1 { color: #fff; margin-bottom: 6px; }
.ssp-coursehead > .ssp-i { width: 52px; height: 52px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .15); flex: none; }
.ssp-coursehead p { margin: 0; }
.ssp-steps--course { max-width: 420px; margin-bottom: 18px; }
.ssp-prose--course { max-width: 880px; font-size: 1.05rem; line-height: 1.7; }
.ssp-sign-box--sticky { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 -8px 30px rgba(22, 32, 26, .12); background: var(--paper); }
@media (min-width: 960px) { .ssp-sign-box--sticky { bottom: 16px; } }
.ssp-certificate { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; max-width: 880px; margin-top: 18px; padding: 20px 22px; border-radius: 20px; background: var(--brand); color: var(--brand-text); }
.ssp-certificate > .ssp-i { width: 46px; height: 46px; color: var(--accent); flex: none; }
.ssp-certificate strong { display: block; font-family: var(--head); font-weight: 800; font-size: 1.3rem; }
.ssp-certificate small { opacity: .85; }
.ssp-certificate.is-new { animation: ssp-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }

/* Documents */
.ssp-docs { display: grid; gap: 8px; max-width: 880px; }
.ssp-docs--due { margin-bottom: 22px; }
.ssp-doc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.ssp-doc:hover { border-color: var(--brand); transform: translateX(3px); }
.ssp-doc[hidden] { display: none; }
.ssp-doc.is-due { border: 2px solid var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.ssp-doc__main { flex: 1; display: grid; min-width: 0; }
.ssp-doc__main small { color: var(--muted); }
.ssp-doc__kind { display: grid; place-items: center; width: 48px; height: 56px; flex: none; border-radius: 8px 16px 8px 8px; background: #5a665f; color: #fff; font-size: .72rem; font-weight: 700; }
.ssp-doc__kind--pdf { background: #b8321c; } .ssp-doc__kind--word { background: #2b5797; } .ssp-doc__kind--excel { background: #1e7145; } .ssp-doc__kind--photo { background: #8a5a2b; } .ssp-doc__kind--page { background: var(--brand); }
.ssp-filebig { display: flex; align-items: center; gap: 14px; max-width: 880px; padding: 14px 16px; margin-bottom: 16px; border-radius: 16px; background: var(--paper); border: 2px solid var(--brand); color: var(--ink) !important; text-decoration: none; }
.ssp-filebig > span:nth-child(2) { flex: 1; display: grid; }
.ssp-filebig small { color: var(--muted); }
.ssp-toolbar input[type="search"] { max-width: 880px; }

/* Notices */
.ssp-notice { display: flex; gap: 16px; }
.ssp-notice__date { display: grid; place-items: center; align-content: center; width: 58px; height: 64px; flex: none; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: .78rem; font-weight: 700; line-height: 1.1; }
.ssp-notice__date strong { font-family: var(--head); font-weight: 800; font-size: 1.5rem; }
.ssp-notice__main { flex: 1; min-width: 0; }
.ssp-notice header .ssp-tag { margin: 0 6px 6px 0; }
.ssp-notice.is-pinned { border: 2px solid var(--brand); }
.ssp-notice.is-unread .ssp-notice__date { background: var(--accent); color: var(--accent-text); }
@media (max-width: 480px) { .ssp-notice { flex-direction: column; gap: 10px; } .ssp-notice__date { width: auto; height: auto; padding: 6px 12px; grid-auto-flow: column; justify-content: start; gap: 6px; } .ssp-notice__date strong { font-size: 1.1rem; } }

/* Contacts */
.ssp-999--hero { justify-content: flex-start; gap: 16px; min-height: 84px; padding: 16px 20px; max-width: 880px; margin-bottom: 4px; }
.ssp-999--hero .ssp-i { width: 36px; height: 36px; animation: ssp-ring 1.4s 1s ease-in-out 2; }
.ssp-999--hero span { display: grid; text-align: left; }
.ssp-999--hero small { font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: .88rem; opacity: .9; }
.ssp-people--one { grid-template-columns: 1fr !important; }
.ssp-person--static { box-shadow: none; }
.ssp-roundbtn { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--ok); color: #fff !important; }
.ssp-roundbtn--alt { background: var(--brand); }
.ssp-roundbtn .ssp-i { width: 20px; height: 20px; }
.ssp-prose--flat { padding: 0; border: 0; box-shadow: none; }

/* Account */
.ssp-profile { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 26px 22px; margin-bottom: 4px; border-radius: 20px; color: #fff; }
.ssp-profile h1 { color: #fff; margin-bottom: 4px; }
.ssp-profile p { margin: 0 0 6px; color: rgba(255, 255, 255, .85); }
.ssp-profile__roles { font-weight: 700; }
.ssp-avatar--xl { width: 84px; height: 84px; font-size: 1.9rem; flex: none; box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
@media (max-width: 480px) { .ssp-profile { flex-direction: column; align-items: flex-start; } }
.ssp-accordion { display: grid; gap: 8px; max-width: 880px; }
.ssp-acc { border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.ssp-acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; font-weight: 700; }
.ssp-acc > summary::-webkit-details-marker { display: none; }
.ssp-acc > summary > span:not(.ssp-ibadge) { flex: 1; }
.ssp-stats + .ssp-hint { margin-top: 12px; }
.ssp-acc[open] > summary .ssp-chev { transform: rotate(90deg); }
.ssp-acc > summary .ssp-chev { transition: transform .2s ease; }
.ssp-acc > form, .ssp-acc > .ssp-block, .ssp-acc > div { padding: 0 14px 16px; }
.ssp-acc .ssp-block { margin-top: 0; }

/* Mobile menu grid */
.ssp-menugrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ssp-menutile { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; text-align: center; font-weight: 700; font-size: .88rem; line-height: 1.2; }
.ssp-menutile .ssp-i { width: 28px; height: 28px; color: var(--brand); }
.ssp-menutile .ssp-count { position: absolute; top: 8px; right: 8px; }
.ssp-menutile:active { transform: scale(.96); }

[hidden] { display: none !important; }

/* Fun fact of the day */
.ssp-fact { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 16px 48px 16px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 22%, #fff); border: 1px solid color-mix(in srgb, var(--accent-dark) 45%, #fff); animation: ssp-fact-in .6s .4s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes ssp-fact-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.ssp-fact[hidden] { display: none; }
.ssp-fact__icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--accent); color: var(--accent-text); }
.ssp-fact__icon .ssp-i { width: 24px; height: 24px; animation: ssp-glow 2.4s 1s ease-in-out 2; }
@keyframes ssp-glow { 50% { transform: scale(1.15) rotate(-8deg); } }
.ssp-fact__icon i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dark); opacity: 0; animation: ssp-spark 1.2s 1.1s ease-out 2; }
.ssp-fact__icon i:nth-of-type(1) { top: -4px; left: 20px; } .ssp-fact__icon i:nth-of-type(2) { top: 8px; right: -6px; animation-delay: 1.25s; } .ssp-fact__icon i:nth-of-type(3) { top: 8px; left: -6px; animation-delay: 1.4s; }
@keyframes ssp-spark { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(1.6) translateY(-6px); } }
.ssp-fact__label { margin: 0 0 2px; font-weight: 700; font-size: .82rem; color: var(--muted); }
.ssp-fact__text { margin: 0; font-size: 1.02rem; line-height: 1.45; font-weight: 700; }
.ssp-fact__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.ssp-fact__x:hover { background: rgba(0, 0, 0, .06); }
.ssp-fact__x .ssp-i { width: 18px; height: 18px; }

/* Clearcut HQ */
.ssp-mgrbar--hq { background: var(--paper); }
.ssp-hq .clearcut-portal-frame { min-height: calc(100vh - 260px) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow); background: var(--paper) !important; }
.ssp-hq .clearcut-portal-button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 12px 22px; border-radius: 12px; background: var(--accent); color: var(--accent-text) !important; font-weight: 700; text-decoration: none; }
.ssp-hq .clearcut-portal-fallback { color: var(--muted); }
.ssp-ibadge--wa { background: #25d366; color: #fff; }
.ssp-mgrbar--wa { background: #e9fbef; border-color: #b7eccb; }
.ssp-hqbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.ssp-hqbar p { flex: 1; min-width: 200px; margin: 0; color: var(--muted); font-size: .92rem; }

/* ---------- Homepage login ---------- */
.ssp-app--login2 { min-height: 100vh; background: var(--bg); }
.ssp-l2 { display: grid; min-height: 100vh; }
@media (min-width: 900px) { .ssp-l2 { grid-template-columns: 1.1fr 1fr; } }
.ssp-l2__side { position: relative; overflow: hidden; display: none; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #fff; }
@media (min-width: 900px) { .ssp-l2__side { display: flex; } }
.ssp-l2__side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: .16; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 70V52l10-14 8 12 12-26 12 22 8-10 12 20 14-34 14 30 10-14 10 18 14-28 12 24 10-12 10 16 16-36 14 32 10-14 12 20 12-24 12 20 10-10 12 18 14-30 12 26 10-12 10 14 14-26 12 22 10-12 12 20 10-8V70z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.ssp-l2__side > * { position: relative; z-index: 1; }
.ssp-l2__brand { display: inline-flex; align-self: flex-start; padding: 12px 16px; border-radius: 14px; background: #fff; animation: ssp-rise .6s both; }
.ssp-l2__brand .ssp-logo { max-height: 64px; width: auto; }
.ssp-l2__brand .ssp-wordmark { color: var(--brand); }
.ssp-l2__kicker { margin: 0 0 8px; font-weight: 700; color: rgba(255, 255, 255, .75); animation: ssp-rise .6s .1s both; }
.ssp-l2__pitch h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; margin-bottom: 22px; animation: ssp-rise .6s .18s both; }
.ssp-l2__pitch h1 span { display: block; color: var(--accent); }
.ssp-l2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ssp-l2__list li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; animation: ssp-rise .5s both; }
.ssp-l2__list li:nth-child(1) { animation-delay: .3s; } .ssp-l2__list li:nth-child(2) { animation-delay: .4s; } .ssp-l2__list li:nth-child(3) { animation-delay: .5s; }
.ssp-l2__list .ssp-i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: var(--accent); }
.ssp-l2__biz { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ssp-l2__biz li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-size: .88rem; font-weight: 700; }
.ssp-l2__biz .ssp-i { width: 16px; height: 16px; }
.ssp-l2__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 20px; }
.ssp-l2__form { width: 100%; max-width: 420px; display: grid; gap: 16px; padding: 30px 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(22, 32, 26, .1); animation: ssp-rise .6s .15s both; }
.ssp-l2__form h2 { font-size: 2rem; }
.ssp-l2__lead { margin: -8px 0 0; color: var(--muted); }
.ssp-l2__mbrand { display: flex; justify-content: center; margin-bottom: 4px; }
.ssp-l2__mbrand .ssp-logo { max-height: 60px; width: auto; }
.ssp-l2__mbrand .ssp-wordmark { color: var(--brand); font-size: 1.4rem; }
@media (min-width: 900px) { .ssp-l2__mbrand { display: none; } }
.ssp-l2__pw { position: relative; }
.ssp-l2__pw input { padding-right: 56px !important; }
.ssp-l2__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.ssp-l2__eye:hover, .ssp-l2__eye.is-on { color: var(--brand); background: var(--brand-soft); }
.ssp-l2__caps { margin: 6px 0 0; color: var(--wait); font-weight: 700; font-size: .88rem; }
.ssp-l2__error { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--alert-soft); color: #6d1d10; font-weight: 700; }
.ssp-l2__links { margin: 0; text-align: center; }
.ssp-l2__links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.ssp-l2__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.ssp-l2__note .ssp-i { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.ssp-l2__foot { margin: 0; color: var(--muted); font-size: .85rem; }
@media (max-width: 899px) { .ssp-l2__main { min-height: 100vh; background: linear-gradient(to bottom, var(--brand) 0 220px, var(--bg) 220px); } }

/* WhatsApp setup */
.ssp-setup__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.ssp-setup__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #f7f9f6; }
.ssp-setup__list li .ssp-i { width: 22px; height: 22px; flex: none; color: var(--wait); margin-top: 2px; }
.ssp-setup__list li.is-done .ssp-i { color: var(--ok); }
.ssp-setup__list li.is-done span { color: var(--muted); text-decoration: line-through; }
.ssp-wa { display: grid; justify-items: start; gap: 8px; max-width: 620px; padding: 24px; border-radius: 20px; background: #e9fbef; border: 1px solid #b7eccb; }
.ssp-wa .ssp-ibadge { width: 56px; height: 56px; border-radius: 16px; }
.ssp-wa .ssp-ibadge .ssp-i { width: 30px; height: 30px; }
.ssp-wa p { color: var(--muted); margin: 0; }
.ssp-tips { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.ssp-tips li { display: flex; gap: 12px; align-items: flex-start; }
.ssp-tips .ssp-i { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 2px; }