/* Bidnapper / EZsniper interface, layout ".3" (page_in.htm, logged in and out).
   Loaded after Bootstrap 3, devoops and global_out/global_in.css, so it wins over them.
   The site's palette comes from <html data-site="{SITEDOMAIN}">: blue/white for
   bidnapper.com (the default), teal-green/white for ezsniper.com. */

:root {
	--brand: #045089;
	--brand-600: #03446f;
	--brand-700: #023457;
	--brand-400: #2a6fb0;
	--brand-300: #7fb0dc;
	--brand-100: #d9e8f5;
	--brand-50: #eef5fb;
	--accent: #f2593f;
	--accent-600: #d8452c;
	--on-brand: #fff;
	--ink: #1c2654;
	--ink-2: #45507a;
	--muted: #6b7491;
	--line: #e2e7ef;
	--line-2: #eef1f6;
	--bg: #f4f7fb;
	--surface: #fff;
	--ok: #17864a;
	--ok-bg: #e7f6ee;
	--warn: #b45309;
	--warn-bg: #fff6e5;
	--danger: #c0392b;
	--danger-bg: #fdecea;
	--radius: 14px;
	--radius-sm: 9px;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
	--shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
	--shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--topbar-h: 64px;
	--sidenav-w: 248px;
	--ctl-h: 40px;		/* form controls: normal height */
	--ctl-h-sm: 36px;	/* compact: toolbars, filters */
}
[data-site="ezsniper.com"] {
	--brand: #008a8a;
	--brand-600: #007272;
	--brand-700: #005a5a;
	--brand-400: #22a3a3;
	--brand-300: #79cfcd;
	--brand-100: #cdeeed;
	--brand-50: #ebf8f7;
	--accent: #f47b4a;
	--accent-600: #dd6233;
	--ink: #17302f;
	--ink-2: #3f5655;
	--muted: #667a79;
	--line: #e0e9e8;
	--line-2: #edf3f2;
	--bg: #f3f8f7;
}

/* ---------- base ---------- */
html[data-site] { font-size: 16px; overflow-y: auto; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
/* global_out.css rules for the old layout that the new one must not inherit */
.ui h1 { float: none; display: block; margin-left: 0; }
.ui a { white-space: normal; text-decoration: none; }
.ui .prose a, .ui .main-inner p a, .ui .notice-bar a { text-decoration: underline; }
.ui p { line-height: inherit; }
.ui header { max-height: none !important; }
.ui .layout-app .site-only, .ui.layout-app .site-only { display: none; }
body.ui {
	margin: 0;
	background: var(--bg);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.ui.layout-site { background: var(--surface); }
.ui h1, .ui h2, .ui h3, .ui h4, .ui h5, .ui h6 {
	color: var(--ink);
	font-family: var(--font);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
}
.ui h1 { font-size: 2.1rem; }
.ui h2 { font-size: 1.6rem; }
.ui h3 { font-size: 1.22rem; }
.ui h4 { font-size: 1.05rem; }
.ui h5, .ui h6 { font-size: .95rem; }
.ui #ajax-content h1 { visibility: visible; padding-top: 0; }	/* devoops hid them */
.ui a { color: var(--brand); }
.ui a:hover, .ui a:focus { color: var(--brand-700); }
.ui img { max-width: 100%; height: auto; }
.ui :focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; }
.ui hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.ui .text-muted { color: var(--muted); }
.ui .text-center { text-align: center; }
.ui .skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--surface); padding: 8px 14px; border-radius: var(--radius-sm); }
.ui .skip-link:focus { left: 12px; top: 12px; }
.ui .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.ui .btn {
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-family: var(--font);
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
	text-shadow: none;
	box-shadow: none;
	background-image: none;
}
.ui .btn-primary, .ui .btn-brand, .ui input.btn.green, .ui .btn.green {
	background: var(--brand);
	border: 1px solid var(--brand);
	color: var(--on-brand);
}
.ui .btn-primary:hover, .ui .btn-primary:focus, .ui .btn-brand:hover, .ui .btn-brand:focus, .ui .btn-primary:active {
	background: var(--brand-600);
	border-color: var(--brand-600);
	color: var(--on-brand);
}
.ui .btn-accent, .ui .btn-warning {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
}
.ui .btn-accent:hover, .ui .btn-accent:focus, .ui .btn-warning:hover, .ui .btn-warning:focus {
	background: var(--accent-600);
	border-color: var(--accent-600);
	color: #fff;
}
.ui .btn-default, .ui .btn-ghost {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
}
.ui .btn-default:hover, .ui .btn-default:focus, .ui .btn-ghost:hover, .ui .btn-ghost:focus {
	background: var(--brand-50);
	border-color: var(--brand-300);
	color: var(--brand-700);
}
.ui .btn-on-dark {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
}
.ui .btn-on-dark:hover, .ui .btn-on-dark:focus { background: #fff; color: var(--brand-700); }
.ui .btn-link { color: var(--brand); font-weight: 600; }
.ui .btn-lg { padding: 12px 24px; font-size: 16px; border-radius: 11px; }
.ui .btn-block { display: block; width: 100%; }

/* ---------- forms ---------- */
/* global_out.css makes search boxes content-box: with width:100% and padding they overflowed */
.ui input[type=search] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ui ::placeholder { color: #98a1b3; opacity: 1; font-family: inherit; font-size: inherit; font-style: normal; text-shadow: none; }
.ui ::-webkit-input-placeholder { color: #98a1b3; font-family: inherit; font-size: inherit; font-style: normal; text-shadow: none; }
.ui .form-control, .ui input[type=text], .ui input[type=password], .ui input[type=email], .ui input[type=number], .ui input[type=tel], .ui input[type=search], .ui select, .ui textarea {
	font-family: var(--font);
	font-size: 15px;
	color: var(--ink);
	border: 1px solid #cfd7e3;
	border-radius: var(--radius-sm);
	box-shadow: none;
	background-color: var(--surface);
	transition: border-color .15s, box-shadow .15s;
}
.ui .form-control { height: var(--ctl-h); padding: 8px 12px; line-height: 1.4; }
.ui textarea.form-control { height: auto; }
/* selects: one chevron for all (Bootstrap's and the browsers' differ) */
.ui select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7491' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 12px 8px;
	padding: 4px 32px 4px 10px;
	cursor: pointer;
}
.ui select::-ms-expand { display: none; }
.ui select.form-control:not([multiple]):not([size]) { padding: 6px 32px 6px 12px; }
/* inputs and selects without .form-control (older app pages): global_out.css zeroes their padding */
.ui .main input[type=text]:not(.form-control), .ui .main input[type=password]:not(.form-control), .ui .main input[type=email]:not(.form-control),
.ui .main input[type=number]:not(.form-control), .ui .main input[type=tel]:not(.form-control), .ui .main input[type=search]:not(.form-control) {
	height: var(--ctl-h-sm);
	padding: 6px 10px;
	max-width: 100%;
	vertical-align: middle;
}
.ui .main select:not(.form-control):not([multiple]):not([size]) { height: var(--ctl-h-sm); max-width: 100%; vertical-align: middle; }
.ui .main textarea:not(.form-control) { padding: 8px 10px; max-width: 100%; }
.ui .form-control:focus, .ui input[type=text]:focus, .ui input[type=password]:focus, .ui input[type=email]:focus, .ui select:focus, .ui textarea:focus {
	border-color: var(--brand-400);
	box-shadow: 0 0 0 3px var(--brand-100);
	outline: none;
}
.ui label { color: var(--ink); font-weight: 600; font-size: 14px; }
.ui .field { margin-bottom: 16px; }
.ui .field label { display: block; margin-bottom: 6px; }
.ui .field .req { color: var(--accent); }
.ui .hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- top bar ---------- */
.ui .topbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	height: var(--topbar-h);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--line);
}
.ui .topbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	max-width: 1240px;
	margin: 0 auto;
}
.ui.layout-app .topbar-inner { max-width: none; }
.ui .brand { display: flex; align-items: center; flex: 0 0 auto; }
.ui .brand img { height: 40px; width: auto; display: block; }
[data-site="bidnapper.com"] .ui .brand img, .ui[data-logo="bidnapper"] .brand img { height: 36px; }
.ui .nav-toggle {
	display: none;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 22px;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	margin-left: -8px;
	cursor: pointer;
}
.ui .nav-toggle:hover { background: var(--brand-50); }
.ui .mainnav { display: flex; align-items: center; gap: 2px; margin: 0 0 0 12px; padding: 0; list-style: none; }
.ui .mainnav a {
	display: block;
	padding: 8px 12px;
	border-radius: 9px;
	color: var(--ink-2);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.ui .mainnav a:hover, .ui .mainnav a:focus { background: var(--brand-50); color: var(--brand-700); }
.ui .mainnav a.active { color: var(--brand); background: var(--brand-50); }
.ui .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ui .topbar-right .login-link { font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 9px; }
.ui .topbar-right .login-link:hover { background: var(--brand-50); color: var(--brand-700); }

/* user menu (logged in) */
.ui .usermenu { position: relative; }
.ui .usermenu-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: 999px;
	padding: 4px 12px 4px 4px;
	cursor: pointer;
	color: var(--ink);
	font-weight: 600;
	font-family: var(--font);
	font-size: 14px;
	max-width: 260px;
}
.ui .usermenu-btn:hover { border-color: var(--brand-300); }
.ui .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	flex: 0 0 auto;
}
.ui .usermenu-btn .uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .menu-pop {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 230px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	padding: 6px;
	z-index: 1040;
	list-style: none;
	margin: 0;
}
.ui .menu-pop.open { display: block; }
.ui .menu-pop a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.ui .menu-pop a:hover, .ui .menu-pop a:focus { background: var(--brand-50); color: var(--brand-700); }
.ui .menu-pop .fa { width: 18px; text-align: center; color: var(--muted); }
.ui .menu-pop .sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- app shell (logged in) ---------- */
.ui .shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.ui .sidenav {
	flex: 0 0 var(--sidenav-w);
	width: var(--sidenav-w);
	background: var(--surface);
	border-right: 1px solid var(--line);
	position: sticky;
	top: var(--topbar-h);
	height: calc(100vh - var(--topbar-h));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 1020;
}
/* menu + account status scroll (only when the window is short); Recon and the searches stay at the bottom */
.ui .sidenav-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 12px 16px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.ui .sidenav-scroll:hover, .ui .sidenav-scroll:focus-within { scrollbar-color: #cfd7e3 transparent; }
.ui .sidenav-scroll::-webkit-scrollbar { width: 6px; }
.ui .sidenav-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.ui .sidenav-scroll:hover::-webkit-scrollbar-thumb { background: #cfd7e3; }
.ui .sidenav-foot { flex: 0 0 auto; padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.ui .sidenav-foot .sidenav-nav { margin-bottom: 4px; }
.ui .sidenav-nav, .ui .sidenav-nav ul { list-style: none; margin: 0; padding: 0; }
.ui .sidenav-nav > li { margin: 1px 0; }
.ui .sidenav-nav a, .ui .sidenav-nav .grp-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	color: var(--ink-2);
	font-weight: 600;
	font-size: 14.5px;
	font-family: var(--font);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}
.ui .sidenav-nav a:hover, .ui .sidenav-nav a:focus, .ui .sidenav-nav .grp-btn:hover { background: var(--brand-50); color: var(--brand-700); }
.ui .sidenav-nav .ico { width: 20px; text-align: center; font-size: 16px; color: var(--muted); flex: 0 0 20px; }
.ui .sidenav-nav a:hover .ico, .ui .sidenav-nav .grp-btn:hover .ico { color: var(--brand); }
.ui .sidenav-nav > li.active > a, .ui .sidenav-nav > li.active > .grp-btn { background: var(--brand); color: #fff; }
.ui .sidenav-nav > li.active > a .ico, .ui .sidenav-nav > li.active > .grp-btn .ico { color: #fff; }
.ui .sidenav-nav .grp-btn .caret-r { margin-left: auto; font-size: 12px; transition: transform .15s; }
.ui .sidenav-nav .grp.open > .grp-btn .caret-r { transform: rotate(90deg); }
.ui .sidenav-nav .grp > ul { display: none; padding: 2px 0 6px 32px; }
.ui .sidenav-nav .grp.open > ul { display: block; }
.ui .sidenav-nav .grp > ul a { font-weight: 500; font-size: 14px; padding: 7px 12px; }
.ui .sidenav-nav .sep { height: 1px; background: var(--line); margin: 10px 6px; }
.ui .sidenav-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 12px 8px; }
.ui .side-search { position: relative; margin: 6px 0 0; }
.ui .side-search .fa { position: absolute; left: 11px; top: 50%; margin-top: -7px; line-height: 14px; font-size: 13px; color: var(--muted); pointer-events: none; }
.ui .sidenav .side-search .form-control { height: 34px; padding: 6px 10px 6px 32px; font-size: 13.5px; background: var(--bg); border-color: var(--line); }
.ui .sidenav .side-search .form-control:focus { background: var(--surface); border-color: var(--brand-400); }

/* account status card in the sidebar ({ACCOUNT_STATUS}, accountstatus.htm; row classes from
   includes/accountstatus.php: good, bad, login_bad) */
.ui .acct-card { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 13.5px; color: var(--ink-2); }
.ui .acct-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui .acct-head a { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ui .acct-list { list-style: none; margin: 0; padding: 4px 0; }
.ui .acct-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 9px; align-items: center; padding: 7px 12px; line-height: 1.35; }
.ui .acct-row + .acct-row { border-top: 1px solid var(--line-2); }
.ui .acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.ui .acct-row.bad .acct-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.ui .acct-row.login_bad .acct-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.ui .acct-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .acct-val { text-align: right; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ui .acct-val:empty::before { content: "Active"; color: var(--ok); font-weight: 600; }
.ui a.acct-val { color: var(--danger); font-weight: 700; text-decoration: underline; }
.ui .acct-fix { display: none; grid-column: 2 / -1; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--warn); text-decoration: underline; }
.ui .acct-row.login_bad .acct-fix { display: block; }
.ui .acct-card > .acct-row { padding-top: 10px; padding-bottom: 10px; }
.ui .acct-free { display: flex; align-items: flex-start; gap: 10px; margin: 4px 10px 10px; padding: 9px 11px; border-radius: 9px; background: var(--ok-bg); color: #0f5a32; line-height: 1.4; }
.ui .acct-free .fa { margin-top: 2px; }
.ui .acct-free span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.ui .acct-free strong { font-weight: 600; font-size: 13px; }
.ui .acct-none { padding: 12px; }
.ui .acct-none p { margin: 0 0 10px; color: var(--danger); font-weight: 600; }
.ui .px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ui .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui .main-inner { flex: 1 0 auto; padding: 24px 28px 32px; width: 100%; }

/* notices (ERROR / GRACE / EMAIL blocks) */
.ui .notice-bar { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; border: 1px solid; font-size: 14.5px; }
.ui .notice-bar .fa { margin-top: 3px; }
.ui .notice-bar.err { background: var(--danger-bg); border-color: #f5c2bc; color: #8a2a1f; }
.ui .notice-bar.warn { background: var(--warn-bg); border-color: #f6d9a8; color: #7a3e06; }
.ui .notice-bar.info { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.ui .notice-bar.ok { background: var(--ok-bg); border-color: #b9e4cb; color: #0f5a32; }
.ui .notice-bar a { font-weight: 600; color: inherit; text-decoration: underline; }
.ui .notice-bar .error, .ui .notice-bar .error * { background: none; border: 0; padding: 0; margin: 0; color: inherit; }
.ui .notices > .notice-bar { margin: 16px 28px 0; }
.ui.layout-site .notices { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ui.layout-site .notices > .notice-bar { margin: 16px 0 0; }
@media (max-width: 991px) {
	.ui .notices > .notice-bar { margin: 12px 16px 0; }
	.ui.layout-site .notices { padding: 0 16px; }
	.ui.layout-site .notices > .notice-bar { margin: 12px 0 0; }
}

/* footer (site frame only: the app frame has none) */
.ui .site-footer { background: var(--ink); color: #c9d1e6; padding: 56px 0 28px; font-size: 14.5px; }
[data-site="ezsniper.com"] .ui .site-footer, .ui[data-site="ezsniper.com"] .site-footer { color: #c8dbda; }
.ui .site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.ui .site-footer a { color: #fff; text-decoration: none; opacity: .88; }
.ui .site-footer a:hover { opacity: 1; text-decoration: underline; }
.ui .site-footer ul { list-style: none; margin: 0; padding: 0; }
.ui .site-footer li { margin: 0 0 8px; }
.ui .site-footer .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.ui .site-footer .foot-logo { background: #fff; display: inline-block; padding: 8px 12px; border-radius: 10px; margin-bottom: 14px; }
.ui .site-footer .foot-logo img { height: 32px; width: auto; display: block; }
.ui .site-footer .legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 36px; padding-top: 20px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* bottom tab bar (logged in, phones) */
.ui .tabbar { display: none; }

/* ---------- marketing layout (logged out pages) ---------- */
.ui .container-ui { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.ui .container-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.ui .section { padding: 72px 0; }
.ui .section-sm { padding: 44px 0; }
.ui .section-alt { background: var(--bg); }
.ui .section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ui .section-head p { font-size: 17px; color: var(--muted); }
.ui .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.ui .lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); font-weight: 400; margin-bottom: 0; }

.ui .hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: radial-gradient(1200px 500px at 85% -10%, var(--brand-400) 0%, transparent 60%), linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 60%, var(--brand-400) 100%);
	padding: 88px 0 96px;
}
.ui .hero h1, .ui .hero h2, .ui .hero h3, .ui .hero h4 { color: #fff; }
.ui .hero h1 { font-size: 3rem; letter-spacing: -.02em; margin-bottom: 18px; }
.ui .hero .lead { color: rgba(255, 255, 255, .9); font-size: 19px; max-width: 640px; }
.ui .hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ui .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.ui .hero-art { background: rgba(255, 255, 255, .96); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.ui .hero-art img { display: block; border-radius: 10px; width: 100%; }
.ui .hero-art .shots { display: grid; gap: 12px; }
.ui .hero-badges { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 34px; color: rgba(255, 255, 255, .88); font-size: 14.5px; font-weight: 500; }
.ui .hero-badges .fa { color: #fff; margin-right: 6px; }
.ui .page-hero { padding: 56px 0 60px; }
.ui .page-hero h1 { font-size: 2.4rem; margin-bottom: 8px; }
.ui .page-hero .lead { font-size: 17.5px; }

.ui .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ui .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ui .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.ui .card-ui {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px;
}
.ui .card-ui h3 { margin-top: 0; }
.ui a.card-ui { display: block; text-decoration: none; color: var(--ink-2); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ui a.card-ui:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand-300); }
.ui .icon-badge {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--brand-50);
	color: var(--brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	margin-bottom: 16px;
}

.ui .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 34px 0; }
.ui .feature-row + .feature-row { border-top: 1px solid var(--line-2); }
.ui .feature-row.flip .feature-media { order: 2; }
.ui .feature-media { text-align: center; }
.ui .feature-media img { max-height: 300px; }
.ui .feature-row h3 { font-size: 1.6rem; }
.ui .feature-row p { font-size: 16.5px; }

.ui .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.ui .stat .num { font-size: 2.4rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; line-height: 1.1; }
.ui .stat .lbl { color: var(--muted); font-weight: 600; }

.ui .checks { list-style: none; padding: 0; margin: 0 0 16px; }
.ui .checks li { position: relative; padding: 6px 0 6px 32px; }
.ui .checks li::before {
	content: "\f00c";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 7px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand);
	font-size: 11px;
	line-height: 22px;
	text-align: center;
}

/* testimonials */
.ui .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ui .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ui .quote blockquote { border: 0; margin: 0 0 18px; padding: 0; font-size: 15.5px; color: var(--ink-2); flex: 1 1 auto; }
.ui .quote blockquote::before { content: "\201C"; display: block; font-size: 54px; line-height: .8; color: var(--brand-300); font-family: Georgia, serif; }
.ui .quote .who { display: flex; align-items: center; gap: 12px; }
.ui .quote .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ui .quote .who strong { display: block; color: var(--ink); }
.ui .quote .who span { color: var(--muted); font-size: 13px; }
.ui .stars { color: #f5a524; letter-spacing: 2px; margin-bottom: 6px; }

/* screenshots */
.ui .shots-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ui .shot { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); }
.ui .shot img { display: block; border-radius: 6px; }

/* call to action band */
.ui .cta-band { background: linear-gradient(135deg, var(--brand-700), var(--brand)); color: #fff; border-radius: 20px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ui .cta-band h2 { color: #fff; margin: 0 0 6px; }
.ui .cta-band p { color: rgba(255, 255, 255, .88); margin: 0; font-size: 17px; }

/* pricing */
.ui .price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 880px; margin: 0 auto; }
.ui .price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ui .price-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.ui .price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ui .price-card h3 { font-size: 1.2rem; margin-bottom: 14px; }
.ui .price-card .amount { font-size: 3rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.ui .price-card .per { color: var(--muted); font-weight: 600; margin: 6px 0 20px; }
.ui .price-card .checks { flex: 1 1 auto; margin-bottom: 24px; }
.ui .price-note { text-align: center; color: var(--muted); margin-top: 22px; font-size: 14px; }
.ui .guarantee { display: flex; gap: 16px; align-items: center; max-width: 880px; margin: 0 auto 36px; padding: 18px 22px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 14px; color: var(--brand-700); font-weight: 600; font-size: 16px; }
.ui .guarantee .fa { font-size: 26px; }

/* long-form text */
.ui .prose { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.ui .prose h2 { font-size: 1.55rem; margin: 2.2em 0 .6em; }
.ui .prose h3 { font-size: 1.22rem; margin: 1.9em 0 .5em; }
.ui .prose h4, .ui .prose h5, .ui .prose h6 { margin: 1.6em 0 .4em; }
.ui .prose > :first-child, .ui .prose .anchor:first-child + h3, .ui .prose .anchor:first-child + h2 { margin-top: 0; }
.ui .prose p { margin: 0 0 1.05em; }
.ui .prose ul, .ui .prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.ui .prose li { margin: .3em 0; }
.ui .prose img { border-radius: 10px; border: 1px solid var(--line); margin: .4em 0 1em; }
.ui .prose img.align-left { float: left; margin: .3em 1.4em .8em 0; max-width: 45%; }
.ui .prose img.align-right { float: right; margin: .3em 0 .8em 1.4em; max-width: 45%; }
.ui .prose img.align-center { display: block; margin: .6em auto 1.1em; }
.ui .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; display: block; overflow-x: auto; }
.ui .prose td, .ui .prose th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.ui .prose blockquote { border-left: 4px solid var(--brand-300); background: var(--brand-50); margin: 0 0 1.2em; padding: 12px 18px; border-radius: 0 10px 10px 0; font-size: inherit; }
.ui .prose::after, .ui .acc-body::after { content: ""; display: table; clear: both; }
.ui .anchor { display: block; position: relative; top: calc(-1 * var(--topbar-h) - 16px); visibility: hidden; }

/* table of contents + collapsible sections (FAQ, tutorial, troubleshooting) */
.ui .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.ui .toc { position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; font-size: 14px; padding-right: 6px; }
.ui .toc h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.ui .toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.ui .toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.ui .toc li a:hover { color: var(--brand); border-left-color: var(--brand); }
.ui .toc .toc-search { margin-bottom: 14px; }
.ui details.acc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; box-shadow: var(--shadow-sm); }
.ui details.acc > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 52px 16px 20px;
	font-weight: 700;
	color: var(--ink);
	font-size: 17px;
	position: relative;
	border-radius: 12px;
}
.ui details.acc > summary::-webkit-details-marker { display: none; }
.ui details.acc > summary::after {
	content: "\f067";
	font-family: FontAwesome;
	position: absolute;
	right: 18px;
	top: 50%;
	margin-top: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand);
	font-size: 12px;
	line-height: 28px;
	text-align: center;
	font-weight: normal;
}
.ui details.acc[open] > summary::after { content: "\f068"; }
.ui details.acc > summary:hover { color: var(--brand); }
.ui details.acc[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.ui .acc-body { padding: 18px 22px 8px; }
.ui .faq-q { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.ui .doc-search-empty { display: none; padding: 16px; color: var(--muted); }

/* auth / form cards */
.ui .auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ui .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 34px; }
.ui .auth-card h2 { font-size: 1.5rem; }
.ui .auth-card .form-control { height: 46px; font-size: 16px; }
.ui .auth-card .btn-lg { width: 100%; }
.ui .auth-card .help-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; }
.ui .form-error { color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-weight: 600; }
.ui .form-error:empty { display: none; }
.ui .side-points h2 { font-size: 2rem; }
.ui .side-points .checks li { font-size: 17px; padding-top: 9px; padding-bottom: 9px; }

/* ---------- legacy components inside the app (devoops / Bootstrap 3 / global_in.css) ---------- */
.ui .main .box {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 0 20px;
	z-index: auto;
}
.ui .main .box-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	padding: 10px 6px;
	overflow: visible;
}
.ui .main .box-name { line-height: 30px; cursor: default; }
.ui .main .box-name > i { color: var(--brand); }
.ui .main .box-content { background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); padding: 16px; }
.ui .main .row-fluid, .ui .main #ajax-content { min-height: 0; }
.ui .main .panel { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.ui .main .panel-heading { border-radius: var(--radius) var(--radius) 0 0; }
.ui .main .table > thead > tr > th, .ui .main table.data th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--line); background: var(--bg); }
.ui .main .table > tbody > tr > td { border-top-color: var(--line-2); }
.ui .main .nav-tabs { border-bottom-color: var(--line); }
.ui .main .nav-tabs > li > a { border-radius: 10px 10px 0 0; color: var(--ink-2); font-weight: 600; }
.ui .main .nav-tabs > li.active > a, .ui .main .nav-tabs > li.active > a:hover { color: var(--brand); border-color: var(--line) var(--line) transparent; }
.ui .main .pagination > li > a, .ui .main .pagination > li > span { border-color: var(--line); color: var(--ink-2); }
.ui .main .pagination > li.selected > a, .ui .main .pagination > .active > a { background: var(--brand); border-color: var(--brand); color: #fff; }
.ui .main .content-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; }
.ui .main .content-pagination .pagination { margin: 0; }
.ui .main .content-pagination > span > img { display: none; }
.ui .main blockquote.centered, .ui .main blockquote.notice { border: 1px solid var(--brand-100); background: var(--brand-50); border-radius: 12px; padding: 12px 16px; font-size: 15px; margin: 0 0 16px; }
.ui .main .empty-state { text-align: center; padding: 48px 20px; border-bottom: 0; font-family: inherit; }
.ui .main .empty-state p { color: var(--muted); }
.ui .main .empty-state h3 { margin-bottom: 8px; }
.ui .main .error { color: inherit; }
.ui .modal-content { border-radius: 16px; border: 0; box-shadow: var(--shadow-lg); }
.ui .modal-header { border-bottom-color: var(--line); }
.ui .modal-footer { border-top-color: var(--line); }
.ui .modal { z-index: 2050; }
.ui .modal-backdrop { z-index: 2040; }
.ui .dropdown-menu { border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow-lg); padding: 6px; }
.ui .dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; }
.ui .popup_overlay { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); z-index: 2060; }
.ui #dimmer { z-index: 2055; }
.ui #ajax-content > div[style*="#E7E7E7"], .ui #ajax-content > div[style*="#e7e7e7"] { background: transparent !important; }

.ui .main table.data { width: 100%; }
.ui .main table.data th, .ui .main table.data td { padding: 6px 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.ui .mainnav a { padding: 8px 9px; }
	.ui .hero h1 { font-size: 2.5rem; }
}
@media (max-width: 991px) {
	.ui .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.ui.layout-site .mainnav {
		display: none;
		position: fixed;
		top: var(--topbar-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lg);
		padding: 10px 14px 16px;
		margin: 0;
	}
	.ui.layout-site .mainnav a { padding: 12px 14px; font-size: 16px; }
	.ui.nav-open.layout-site .mainnav { display: flex; }
	.ui .sidenav {
		position: fixed;
		left: 0;
		top: var(--topbar-h);
		bottom: 0;
		height: auto;
		transform: translateX(-105%);
		transition: transform .2s ease;
		box-shadow: var(--shadow-lg);
		z-index: 1050;
		width: 290px;
		max-width: 86vw;
	}
	.ui.nav-open .sidenav { transform: none; }
	.ui .scrim { display: none; position: fixed; inset: var(--topbar-h) 0 0 0; top: var(--topbar-h); left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, .4); z-index: 1045; }
	.ui.nav-open .scrim { display: block; }
	.ui .main-inner { padding: 18px 16px 24px; }
	.ui .hero-grid, .ui .feature-row, .ui .auth-wrap, .ui .doc-layout { grid-template-columns: 1fr; gap: 28px; }
	.ui .feature-row.flip .feature-media { order: 0; }
	.ui .feature-media img { max-height: 220px; }
	.ui .grid-3, .ui .quotes, .ui .shots-row { grid-template-columns: 1fr 1fr; }
	.ui .grid-4 { grid-template-columns: 1fr 1fr; }
	.ui .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
	.ui .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
	.ui .site-footer .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	:root { --topbar-h: 58px; }
	body.ui { font-size: 15px; }
	.ui h1 { font-size: 1.75rem; }
	.ui h2 { font-size: 1.4rem; }
	.ui .topbar-inner { padding: 0 12px; gap: 8px; }
	.ui .brand img { height: 32px; }
	[data-site="bidnapper.com"] .ui .brand img, .ui[data-logo="bidnapper"] .brand img { height: 26px; }
	.ui .topbar-right .login-link { padding: 8px 6px; }
	.ui .topbar-right .btn { padding: 7px 12px; font-size: 14px; }
	.ui .usermenu-btn .uname { display: none; }
	.ui .usermenu-btn { padding: 3px; }
	.ui .usermenu-btn .fa-angle-down { display: none; }
	.ui .section { padding: 48px 0; }
	.ui .hero { padding: 52px 0 60px; }
	.ui .hero h1 { font-size: 2.05rem; }
	.ui .hero .lead { font-size: 17px; }
	.ui .page-hero { padding: 38px 0 40px; }
	.ui .page-hero h1 { font-size: 1.9rem; }
	.ui .grid-2, .ui .grid-3, .ui .grid-4, .ui .quotes, .ui .shots-row, .ui .price-grid { grid-template-columns: 1fr; }
	.ui .stats { grid-template-columns: 1fr; gap: 14px; }
	.ui .cta-band { padding: 30px 24px; }
	.ui .card-ui, .ui .auth-card { padding: 22px; }
	.ui .prose { font-size: 16px; }
	.ui .prose img.align-left, .ui .prose img.align-right { float: none; margin: .4em 0 1em; max-width: 100%; }
	.ui .site-footer .foot-grid { grid-template-columns: 1fr; }
	.ui .hide-sm { display: none !important; }

	/* phones: bottom tab bar for the main app pages */
	.ui.layout-app .tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid var(--line);
		padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
	}
	.ui .tabbar a {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 6px 2px;
		font-size: 11px;
		font-weight: 600;
		color: var(--muted);
		text-decoration: none;
		border-radius: 10px;
	}
	.ui .tabbar a .fa, .ui .tabbar a .icon { font-size: 19px; }
	.ui .tabbar a.active { color: var(--brand); background: var(--brand-50); }
	.ui.layout-app .main-inner { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }	/* clear the fixed tab bar */

	.ui .main .box-content { padding: 12px; }
	.ui .main .table-responsive-ui { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 400px) {
	.ui .topbar-right .login-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ui *, .ui *::before, .ui *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.ui .topbar, .ui .sidenav, .ui .tabbar, .ui .site-footer { display: none !important; }
	.ui .shell { display: block; }
}

/* page body in the site frame: new public pages lay out their own full-width sections
   (site-bleed); any other page gets a padded column (site-inner) */
.ui .site-inner { max-width: 1160px; margin: 0 auto; padding: 32px 20px 64px; width: 100%; }
.ui .site-bleed { width: 100%; }
.ui.layout-site .shell { display: block; min-height: calc(100vh - var(--topbar-h) - 240px); }
.ui.layout-site .main { display: block; }
@media (max-width: 767px) {
	.ui .site-inner { padding: 22px 16px 48px; }
}

.ui .eyebrow-on-dark { color: rgba(255, 255, 255, .85); }
.ui .hero .eyebrow { color: rgba(255, 255, 255, .85); }
.ui .quotes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin: 0 auto; }
.ui .quote { margin: 0; }
.ui .press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; margin-top: 44px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui .press img { height: 34px; width: auto; filter: grayscale(1); opacity: .8; }
.ui .press img:hover { filter: none; opacity: 1; }
@media (max-width: 767px) { .ui .quotes-2 { grid-template-columns: 1fr; } .ui .press img { height: 28px; } }

/* home page hero illustration (decorative) */
.ui .snipe-mock { font-size: 14px; color: var(--ink-2); }
.ui .snipe-mock .sm-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ui .snipe-mock .sm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ui .snipe-mock .sm-title { margin-left: 8px; font-weight: 700; color: var(--ink); }
.ui .snipe-mock .sm-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.ui .snipe-mock .sm-row + .sm-row, .ui .snipe-mock .sm-stats + .sm-row { border-top: 1px solid var(--line-2); }
.ui .snipe-mock .sm-thumb { width: 46px; height: 46px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 46px; }
.ui .snipe-mock .sm-info { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.ui .snipe-mock .sm-info strong { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .snipe-mock .sm-info span { color: var(--muted); font-size: 13px; }
.ui .snipe-mock .sm-count { color: var(--accent); }
.ui .snipe-mock .sm-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.ui .snipe-mock .sm-pending { background: var(--brand-50); color: var(--brand); }
.ui .snipe-mock .sm-won { background: var(--ok-bg); color: var(--ok); }
.ui .snipe-mock .sm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 4px 12px; }
.ui .snipe-mock .sm-stats div { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.ui .snipe-mock .sm-stats span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.ui .snipe-mock .sm-stats b { color: var(--ink); font-size: 15px; }
.ui .snipe-mock .sm-done { opacity: .85; }
.ui .hero-illustration img { max-height: 360px; margin: 0 auto; display: block; }

/* why page: research excerpts */
.ui .research { display: grid; gap: 18px; }
.ui .research-item { margin: 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
.ui .research-item blockquote { border: 0; margin: 0 0 12px; padding: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.ui .research-item figcaption { font-size: 13.5px; color: var(--muted); font-style: italic; }
.ui .research-item figcaption a { color: var(--brand); }
.ui .lead-center { margin-left: auto; margin-right: auto; }

/* join / login / contact */
.ui .auth-section { background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 70%); }
.ui .auth-narrow { max-width: 460px; }
.ui .auth-title { font-size: 1.6rem; text-align: center; margin-bottom: 22px; }
.ui .side-points .h-sub { font-size: 1.15rem; color: var(--brand); margin: 18px 0 8px; }
.ui .captcha-box { min-height: 78px; }
.ui .fine-print { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.ui .auth-card .btn-lg + .help-row { margin-top: 16px; }
@media (max-width: 991px) { .ui .auth-wrap .auth-card { order: -1; } }
@media (max-width: 360px) { .ui .captcha-box { transform: scale(.88); transform-origin: 0 0; } }
.ui .hero a.on-dark { color: #fff; text-decoration: underline; }
.ui .form-grid { gap: 0 20px; }
.ui .sent-card { text-align: center; }
.ui .sent-card h2 { font-size: 1.35rem; }
.ui .cta-center { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.ui .notfound { padding-top: 40px; padding-bottom: 40px; }

/* ---------- auctions / archive list (shared.3/en/list.htm) ---------- */
.ui .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.ui .page-title { font-size: 1.6rem; margin: 0; }
.ui .page-head-actions { display: flex; gap: 8px; }
.ui .notice-bar .grow { flex: 1 1 auto; }
.ui .ad-slot { text-align: center; margin: 0 0 16px; overflow: hidden; }

.ui .add-snipe .box-content { padding: 16px; }
.ui .snipe-grid { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(130px, 1fr) minmax(110px, .9fr) minmax(140px, 1.4fr) auto; gap: 12px; align-items: end; }
.ui .snipe-grid .fld label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.ui .snipe-grid .fld select, .ui .snipe-grid .fld .form-control { width: 100%; height: var(--ctl-h); }
.ui .snipe-grid .fld-go .btn { height: var(--ctl-h); padding: 0 28px; font-size: 15px; }

.ui .list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px !important; }
.ui .list-toolbar .form-control, .ui .list-toolbar select { height: var(--ctl-h-sm); width: auto; display: inline-block; font-size: 14px; }
.ui .list-toolbar input.form-control { padding: 6px 12px; }
.ui .list-toolbar .tb-check { margin: 0 4px; display: inline-flex; align-items: center; }
.ui .list-toolbar .tb-check input { width: 18px; height: 18px; margin: 0; }
.ui .list-toolbar .tb-search { display: inline-flex; gap: 6px; }
.ui .list-toolbar .tb-search .form-control { width: 200px; }
.ui .list-toolbar .tb-search .btn { height: var(--ctl-h-sm); padding: 0 14px; }
.ui .list-toolbar .tb-update { height: var(--ctl-h-sm); padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; }
.ui .list-toolbar .tb-update { margin-left: auto; text-decoration: none; }
.ui .auc-content { padding: 0 !important; }

.ui .auc-list-ui { --cols: 30px 64px minmax(0, 1fr) 150px 140px 110px 130px 120px; }
.ui .auc-headrow, .ui .auc {
	display: grid;
	grid-template-columns: var(--cols);
	grid-template-areas:
		"sel thumb main seller ends bid cur status"
		". . alerts alerts alerts alerts alerts alerts"
		". . acts acts acts acts acts acts";
	column-gap: 14px;
	align-items: start;
}
.ui .auc-headrow { grid-template-areas: ". . main seller ends bid cur status"; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ui .auc-headrow a { color: var(--muted); }
.ui .auc-headrow a:hover { color: var(--brand); }
.ui .auc-headrow .c-main { grid-area: main; }
.ui .auc-headrow .c-seller { grid-area: seller; }
.ui .auc-headrow .c-ends { grid-area: ends; }
.ui .auc-headrow .c-bid { grid-area: bid; }
.ui .auc-headrow .c-cur { grid-area: cur; }
.ui .auc-headrow .c-status { grid-area: status; }
.ui .auc-headrow .sort.aa::after { content: " \f0d8"; font-family: FontAwesome; }
.ui .auc-headrow .sort.da::after { content: " \f0d7"; font-family: FontAwesome; }
.ui .auc-headrow .sort.aa, .ui .auc-headrow .sort.da { color: var(--brand); }
.ui .auc { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface); transition: background-color .15s; }
.ui .auc:hover { background: #fbfcfe; }
.ui .auc:last-child { border-bottom: 0; }
.ui .auc .a_named { position: absolute; top: calc(-1 * var(--topbar-h) - 10px); }
.ui .auc-sel { grid-area: sel; margin: 22px 0 0; }
.ui .auc-sel input { width: 18px; height: 18px; margin: 0; }
.ui .auc-thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.ui .auc-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.ui .auc-main { grid-area: main; min-width: 0; }
.ui .auc-title { font-weight: 600; font-size: 15px; line-height: 1.35; margin: 0 0 4px; }
.ui .auc-title a { color: var(--ink); }
.ui .auc-title a:hover { color: var(--brand); }
.ui .auc-title .qty { color: var(--muted); font-weight: 500; font-size: 13px; }
.ui .auc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.ui .auc-meta .note { color: var(--warn); font-weight: 600; }
.ui .auc-meta .contin:empty { display: none; }
.ui .auc-seller { grid-area: seller; font-size: 13.5px; min-width: 0; overflow: hidden; width: auto; padding: 0; }
.ui .auc-seller > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui .auc-seller .small { color: var(--muted); font-size: 12px; }
.ui .auc-stats { display: contents; }
.ui .auc-cell { min-width: 0; width: auto; padding: 0; font-size: 14px; line-height: 1.35; }
.ui .auc-cell .lbl { display: none; }
.ui .auc-cell strong { color: var(--ink); font-weight: 700; }
.ui .auc-cell small { color: var(--muted); font-size: 11.5px; }
.ui .auc-cell .sub { display: block; color: var(--muted); font-size: 12px; }
.ui .auc-ends { grid-area: ends; }
.ui .auc-bid { grid-area: bid; }
.ui .auc-cur { grid-area: cur; }
.ui .auc-status { grid-area: status; }
.ui .auc-alerts { grid-area: alerts; }
.ui .auc-alert { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; font-size: 13px; background: var(--warn-bg); color: #7a3e06; }
.ui .auc-alert a { color: inherit; text-decoration: underline; }
.ui .auc-actions { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ui .auc-actions ul.actions { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.ui .auc-actions ul.actions li { margin: 0; padding: 0; min-width: 0; max-width: none; float: none; }
.ui .auc-actions ul.actions a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ui .auc-actions ul.actions a:hover { background: var(--brand-50); color: var(--brand-700); }
.ui .auc-actions ul.actions .icon { color: var(--brand); font-size: 14px; }
.ui .auc-actions .small.info { color: var(--muted); font-size: 13px; }
.ui .auc-actions .auc-alert { width: 100%; margin: 0 0 4px; }
.ui .auc.warn { background: #fffbf3; }
.ui .auc.just-added { grid-template-areas: "sel thumb main main main main main main"; background: var(--brand-50); border-left: 4px solid var(--brand); }
.ui .auc.just-added .ja-tag { position: absolute; top: 8px; right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }

/* status badges (snipe.js swaps the "btns STATUS" class) */
.ui .btns { display: inline-block; cursor: pointer; padding: 0; border-radius: 999px; text-decoration: none; }
.ui .btns span { display: inline-block; width: auto; min-width: 0; margin: 0; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--brand-700); background: var(--brand-50); }
.ui .btns.WON span { color: var(--ok); background: var(--ok-bg); }
.ui .btns.DONE span { color: #4b5563; background: #eef0f3; }
.ui .btns.QUEUED span { color: #0e6a8a; background: #e3f5fb; }
.ui .btns.BID_TOO_LOW span, .ui .btns.BIN span, .ui .btns.EARLY span, .ui .btns.RESERVE span { color: var(--warn); background: var(--warn-bg); }
.ui .btns.ERROR span, .ui .btns.LATE span, .ui .btns.PASSWORD span, .ui .btns.BLOCKED span, .ui .btns.REMOVED span { color: var(--danger); background: var(--danger-bg); }

.ui .list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); }
.ui .list-foot .content-pagination { padding: 0; }
.ui .list-foot .cont-page { color: var(--muted); font-size: 13px; }
.ui .bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ui .btn-danger-ghost { color: var(--danger) !important; }
.ui .btn-danger-ghost:hover { background: var(--danger-bg) !important; border-color: #f5c2bc !important; }
.ui .list-totals { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; margin: 0 8px 0 0; font-size: 13px; color: var(--muted); }	/* fills the space between the pager and the buttons */
.ui .list-totals div { display: flex; gap: 6px; white-space: nowrap; }
.ui .list-totals dt { font-weight: 500; }
.ui .list-totals dd { font-weight: 700; color: var(--ink); margin: 0; }
.ui .notes-pop { width: 420px; max-width: calc(100vw - 32px); padding: 20px !important; }
.ui .notes-pop .pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 1199px) {
	.ui .auc-list-ui { --cols: 30px 64px minmax(0, 1fr) 130px 100px 120px 110px; }
	.ui .auc { grid-template-areas: "sel thumb main ends bid cur status" ". . alerts alerts alerts alerts alerts" ". . acts acts acts acts acts"; }
	.ui .auc-headrow { grid-template-areas: ". . main ends bid cur status"; }
	.ui .auc-seller, .ui .auc-headrow .c-seller { display: none; }
	.ui .auc.just-added { grid-template-areas: "sel thumb main main main main main"; }
	.ui .snipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ui .snipe-grid .fld-note { grid-column: span 2; }
}
@media (max-width: 767px) {
	.ui .page-title { font-size: 1.35rem; }
	.ui .page-head-actions .btn { padding: 6px 10px; }
	.ui .snipe-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ui .snipe-grid .fld-note, .ui .snipe-grid .fld-go { grid-column: 1 / -1; }
	.ui .snipe-grid .fld-go .btn { width: 100%; }
	.ui .list-toolbar .tb-search { flex: 1 1 100%; order: 5; }
	.ui .list-toolbar .tb-search .form-control { flex: 1 1 auto; width: auto; }
	.ui .list-toolbar .tb-show { flex: 1 1 auto; }
	.ui .auc-headrow { display: none; }
	.ui .auc {
		grid-template-columns: 24px 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"sel thumb main main"
			"stats stats stats stats"
			"alerts alerts alerts alerts"
			"acts acts acts status";
		column-gap: 10px;
		padding: 14px 12px;
		border-bottom: 8px solid var(--bg);
	}
	.ui .auc-sel { margin-top: 18px; }
	.ui .auc-thumb, .ui .auc-thumb img { width: 56px; height: 56px; }
	.ui .auc-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
	.ui .auc-cell { background: var(--bg); border-radius: 9px; padding: 7px 9px; font-size: 13.5px; }
	.ui .auc-cell .lbl { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 1px; }
	.ui .auc-status { align-self: center; margin-top: 6px; }
	.ui .auc-actions { margin-top: 6px; }
	.ui .auc-actions ul.actions a { padding: 7px 8px; }
	.ui .auc.just-added { grid-template-areas: "sel thumb main main"; }
	.ui .list-foot { flex-direction: column; align-items: stretch; }
	.ui .bulk-actions { margin-left: 0; }
	.ui .bulk-actions .btn { flex: 1 1 auto; }
	.ui .list-totals { justify-content: flex-start; margin: 0; }
}

/* section tabs (tab_menu.htm DEFAULT_MENU: settings, My eBay import, apps) */
.ui .tabs-ui { display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-shadow: var(--shadow-sm); }
.ui .tabs-ui::-webkit-scrollbar { display: none; }
.ui .tabs-ui a { flex: 0 0 auto; padding: 8px 14px; border-radius: 9px; color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.ui .tabs-ui a:hover { background: var(--brand-50); color: var(--brand-700); }
.ui .tabs-ui a.active { background: var(--brand); color: #fff; }
/* old fixed-width tables inside app pages: scroll instead of overflowing the screen */
@media (max-width: 767px) {
	.ui .main-inner table.data, .ui .main-inner table.tab-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ui .main-inner [style*="width:25em"], .ui .main-inner [style*="width: 25em"] { width: auto !important; max-width: 100%; }
}

/* ---------- app pages: shared pieces ---------- */
.ui .page-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ui .card-app { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.ui .card-app h3 { font-size: 1.05rem; margin: 0 0 10px; }
.ui .card-app h3 .fa { color: var(--brand); margin-right: 4px; }
.ui .search-row { display: flex; gap: 8px; }
.ui .search-row .form-control { flex: 1 1 auto; min-width: 0; width: auto; }
.ui .search-row .btn { flex: 0 0 auto; height: var(--ctl-h); padding: 0 18px; }

/* Recon (recon.htm) */
.ui .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1100px; }
.ui .tool-card { display: flex; flex-direction: column; }
.ui .tool-card p { flex: 1 1 auto; margin: 0 0 18px; }
.ui .tool-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ui .tool-head .icon-badge { margin: 0; flex: 0 0 48px; }
.ui .tool-head h2 { font-size: 1.2rem; margin: 0; }

/* error.php3 (shared.3/en/error.htm) and its login form (<site>.3/en/login.htm) */
.ui .msg-page { max-width: 620px; margin: 16px auto; display: grid; gap: 20px; }
.ui .msg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px 26px; text-align: center; }
.ui .msg-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--warn-bg); color: var(--warn); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 14px; }
.ui .msg-body { font-size: 16px; line-height: 1.65; color: var(--ink); }
.ui .msg-body b:first-child { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.ui .msg-body p { margin: .7em 0 0; }
.ui .msg-body ul { display: inline-block; text-align: left; margin: .5em 0 0; padding-left: 1.2em; color: var(--ink-2); font-size: 15px; }
.ui .msg-body a { font-weight: 600; text-decoration: underline; }
.ui .msg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.ui .msg-login { padding: 28px; box-shadow: var(--shadow); border-radius: var(--radius); }
.ui .msg-login h2 { font-size: 1.3rem; text-align: center; margin-bottom: 18px; }

/* subscribe page (<site>.3/en/subscribe_os.htm GROUP + subscribeb.htm, js/3/subscribe.js) */
.ui .sub-container { min-height: 120px; }
.ui .sub-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--muted); font-weight: 600; }
.ui .tabs-label { font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.ui .plan-intro { font-size: 16px; color: var(--ink-2); margin: 0 0 16px; }
.ui .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; max-width: 1100px; padding-top: 12px; }
.ui .plan-grid-1 { grid-template-columns: minmax(0, 540px); }
.ui .plan-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; }
.ui .plan-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.ui .plan-card .tag { position: absolute; top: -12px; left: 22px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.ui .plan-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ui .plan-top .icon-badge { margin: 0; flex: 0 0 48px; }
.ui .plan-name { font-size: 1.3rem; margin: 0; }
.ui .plan-name sup { color: var(--muted); font-size: .55em; top: -.7em; margin-left: 1px; }
.ui .plan-desc { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.ui .plan-card .checks { flex: 1 1 auto; margin: 0 0 18px; font-size: 14.5px; }
.ui .plan-card .checks li { padding-top: 4px; padding-bottom: 4px; }
.ui .plan-card .checks li::before { top: 5px; }
.ui .plan-opts { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui .plan-opts legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ui .plan-opt { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 500; }
.ui .plan-opt input { position: absolute; left: 16px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ui .plan-opt .po {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	grid-template-areas: "dot name price" "dot note price";
	column-gap: 12px;
	align-items: center;
	padding: 12px 16px 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ui .plan-opt .po::before { content: ""; grid-area: dot; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c3cbd8; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; transition: border-color .15s, border-width .15s; }
.ui .plan-opt .po-name { grid-area: name; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.35; }
.ui .plan-opt .po-note { grid-area: note; color: var(--muted); font-size: 12.5px; }
.ui .plan-opt .po-price { grid-area: price; color: var(--ink); font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui .plan-opt:hover .po { border-color: var(--brand-300); }
.ui .plan-opt input:focus-visible + .po { box-shadow: 0 0 0 3px var(--brand-100); }
.ui .plan-opt input:checked + .po { border-color: var(--brand); background: var(--brand-50); }
.ui .plan-opt input:checked + .po::before { border: 6px solid var(--brand); }
.ui .pay-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 1100px; margin-top: 22px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.ui .pay-hint { margin: 0; color: var(--muted); font-size: 14.5px; }
.ui .pay-hint .ph-need { display: none; color: var(--danger); font-weight: 600; }
.ui .need-plan .pay-hint .ph-need { display: inline; }
.ui .need-plan .pay-hint .ph-default { display: none; }
.ui .need-plan .plan-opt .po { border-color: #f5c2bc; }
.ui .pay-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ui .btn-paypal { background: #ffc439; border: 1px solid #ffc439; color: #1a1a1a; }
.ui .btn-paypal:hover, .ui .btn-paypal:focus { background: #f2b52a; border-color: #f2b52a; color: #1a1a1a; }
.ui .sub-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; max-width: 1100px; margin-top: 28px; }
.ui .sub-info p { font-size: 14px; margin: 0 0 .7em; }
.ui .sub-info p:last-child { margin-bottom: 0; }
.ui .pay-logos { display: flex; flex-wrap: wrap; gap: 10px; font-size: 32px; line-height: 1; color: var(--ink-2); margin: 2px 0 12px; }

/* subscribe: confirm / credit card step (subscribeb.htm CONFIRM_*) */
.ui .checkout { max-width: 640px; margin: 0 auto; }
.ui .back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 600; }
.ui .checkout-card { padding: 28px; }
.ui .checkout-title { font-size: 1.5rem; margin: 0 0 6px; }
.ui .checkout-note { margin: 0 0 14px; color: var(--brand-700); font-weight: 600; }
.ui .checkout .secure { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.ui .checkout .secure .fa-lock { color: var(--ok); margin-right: 4px; }
.ui .checkout-card form + .secure { margin: 16px 0 0; text-align: center; }
.ui .order-sum { margin: 0 0 20px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.ui .order-sum .lbl { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui .order-sum .info { color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.5; }
.ui .form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ui .form-cols .span-2 { grid-column: 1 / -1; }
.ui .checkout .field select { width: 100%; height: var(--ctl-h); }
.ui .exp-row { display: flex; gap: 10px; }
.ui .exp-row select { flex: 1 1 0; min-width: 0; }
.ui .checkout .captcha-box { margin: 4px 0 16px; }
.ui .checkout-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }

@media (max-width: 991px) {
	.ui .sub-info { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.ui .tool-grid, .ui .plan-grid, .ui .form-cols { grid-template-columns: 1fr; }
	.ui .plan-grid { gap: 26px; }
	.ui .plan-card, .ui .checkout-card, .ui .msg-card { padding: 20px 18px; }
	.ui .pay-bar { flex-direction: column; align-items: stretch; padding: 14px; }
	.ui .pay-btns .btn { flex: 1 1 auto; }
	.ui .checkout-actions .btn { flex: 1 1 auto; }
	.ui .search-row .btn { padding: 0 14px; }
}

/* ---------- My Account: settings.php tabs (settings*.htm), change_email.htm, change_password.htm ---------- */
.ui .set-body { max-width: 1100px; }
.ui .set-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.ui .set-intro p { margin: 0; color: var(--muted); font-size: 15px; max-width: 72ch; }
.ui .set-note { position: relative; margin: 18px 0 0; padding-left: 22px; color: var(--muted); font-size: 14px; max-width: 80ch; }
.ui .set-note > .fa { position: absolute; left: 0; top: 3px; color: var(--brand); }
.ui .set-narrow { max-width: 560px; }
.ui .set-sub { font-size: 1rem; margin: 0 0 12px; }
.ui .field + .set-sub { margin-top: 22px; }
.ui .set-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ui .set-col { display: grid; gap: 20px; align-content: start; }
.ui .set-card { padding: 22px; }
.ui .set-card + .set-card { margin-top: 20px; }
.ui .set-grid > .set-card + .set-card, .ui .set-col > .set-card + .set-card { margin-top: 0; }
.ui .set-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 10px; }
.ui .set-head .icon-badge, .ui .svc-name .icon-badge, .ui .addon-card .icon-badge { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; margin: 0; }
.ui .set-head h2 { font-size: 1.1rem; margin: 1px 0 2px; }
.ui .set-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ui .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 13px 0; margin: 0; border-top: 1px solid var(--line-2); max-width: none; }
.ui .set-head + .set-row { border-top: 0; }
.ui .set-card > .set-row:last-child { padding-bottom: 0; }
.ui .set-lbl { display: block; min-width: 0; margin: 0; color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.ui .set-lbl small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 13px; }
.ui .set-ctl { flex: 0 0 auto; width: 220px; max-width: 55%; }
.ui .set-card .set-ctl select:not([multiple]):not([size]) { width: 100%; height: var(--ctl-h); font-size: 14.5px; }
.ui .set-ctl-unit { display: flex; align-items: center; gap: 8px; }
.ui .set-card .set-ctl-unit select:not([multiple]):not([size]) { flex: 1 1 auto; min-width: 0; width: auto; }
.ui .set-unit { color: var(--muted); font-size: 14px; }
.ui .set-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ui .set-actions .btn-ghost { order: -1; }
.ui .set-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 18px; font-size: 14.5px; }
.ui .set-form .set-actions { max-width: 1100px; }

/* on/off switch: a real checkbox (opacity 0) over the track, so forms post as before */
.ui .set-switch { cursor: pointer; font-weight: 400; }
.ui .switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; }
.ui .switch input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ui .switch-ui { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 999px; background: #c9d1dd; transition: background-color .15s, box-shadow .15s; }
.ui .switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .15s; }
.ui .switch input:checked + .switch-ui { background: var(--brand); }
.ui .switch input:checked + .switch-ui::after { transform: translateX(18px); }
.ui .switch input:focus-visible + .switch-ui { box-shadow: 0 0 0 3px var(--brand-100); }
.ui .set-switch:hover .switch input:not(:checked) + .switch-ui { background: #b5bfcd; }

/* Account Service (settings.htm OV) */
.ui .svc-cash { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 16px; border-radius: 12px; background: var(--ok-bg); border: 1px solid #b9e4cb; color: #0f5a32; font-weight: 600; }
.ui .svc-cash strong { font-size: 1.1rem; }
.ui .svc-list { display: grid; gap: 14px; }
.ui .svc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 300px; grid-template-areas: "name stats actions"; align-items: center; gap: 14px 24px; padding: 18px 22px; }
.ui .svc-name { grid-area: name; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ui .svc-name h2 { font-size: 1.05rem; margin: 0 0 2px; }
.ui .svc-name p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ui .svc-stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.ui .svc-stats dt { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui .svc-stats dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; }
.ui .svc-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ui .svc-actions form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ui .svc-ctl .btn:disabled, .ui .svc-ctl .btn.disabled { display: none; }
.ui .svc-ctl .btn[name=pause] { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.ui .svc-ctl .btn[name=pause]:hover, .ui .svc-ctl .btn[name=pause]:focus { background: var(--danger-bg); border-color: #f5c2bc; color: var(--danger); }
.ui .svc-ctl .btn[name=unpause] { background: var(--ok); border: 1px solid var(--ok); color: #fff; }
.ui .svc-ctl .btn[name=unpause]:hover, .ui .svc-ctl .btn[name=unpause]:focus { background: #12703d; border-color: #12703d; color: #fff; }

/* Manage Logins (settings_sites.htm) and the tables on the other tabs */
.ui .login-tbl, .ui .app-tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; }
.ui .login-tbl th, .ui .app-tbl th { padding: 10px 12px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; border: 0; border-bottom: 1px solid var(--line); background: transparent; line-height: 1.4; }
.ui .login-tbl td, .ui .app-tbl td { padding: 12px; border: 0; border-top: 1px solid var(--line-2); vertical-align: middle; text-align: left; color: var(--ink-2); font-size: 14.5px; background: none; }
.ui .login-tbl tbody:first-of-type tr:first-child td, .ui .app-tbl tbody:first-of-type tr:first-child td { border-top: 0; }
.ui .login-tbl th:first-child, .ui .login-tbl td:first-child { padding-left: 0; }
.ui .login-tbl th:last-child, .ui .login-tbl td:last-child { padding-right: 0; }
.ui .login-tbl strong { color: var(--ink); }
.ui .login-tbl .col-act { text-align: right; white-space: nowrap; }
.ui .login-tbl .col-act .btn { white-space: nowrap; }
.ui .login-tbl td.col-note { color: var(--muted); font-size: 13.5px; }
.ui .login-tbl .form-control { height: var(--ctl-h-sm); padding: 6px 10px; font-size: 14px; max-width: 240px; }
.ui .login-tbl .form-control + .form-control { margin-top: 6px; }
.ui .login-tbl label.unstyle { display: none; }	/* holds only the hidden Homelink checkbox */
.ui .login-tbl .mask { color: var(--muted); letter-spacing: 2px; }
.ui .login-tbl .mask_pass, .ui .login-tbl .show_pass a { color: var(--muted); font-size: 13.5px; }
.ui .login-tbl .pass { font-family: Menlo, Consolas, monospace; color: var(--danger); }
.ui #settings_main_note { padding: 10px 14px; border: 0; border-radius: 10px; background: var(--brand-50); color: var(--brand-700); font-size: 14px; }
.ui .login-tbl tr.note td { border-top: 0; }
.ui .ebay-row .ebay-link { color: var(--muted); font-size: 13.5px; }
.ui .ebay-row .ebay-link a { font-weight: 600; }
.ui .ebay-row .ebay-link span { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.ui .login-tbl .add-site td { padding: 18px 0 0; border-top: 1px solid var(--line); }
.ui .login-tbl .add-site h3 { font-size: 15px; margin: 0 0 12px; }
.ui .add-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.ui .add-grid .field { margin: 0; }
.ui .login-tbl .add-grid select:not([multiple]):not([size]) { width: 100%; height: var(--ctl-h); }
.ui .login-tbl .add-grid .form-control { height: var(--ctl-h); max-width: none; font-size: 15px; }
.ui .add-grid .btn { height: var(--ctl-h); padding: 0 18px; }
.ui .login-tbl .site-note { padding: 10px 14px; border: 1px solid #f6d9a8; border-radius: 10px; background: var(--warn-bg); color: #7a3e06; }
.ui .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 12px; font-weight: 700; }
.ui .stat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: default; }
.ui .stat-pill.ok { background: var(--ok-bg); color: var(--ok); }
.ui .stat-pill.bad { background: var(--danger-bg); color: var(--danger); }
.ui .stat-pill.off { background: var(--line-2); color: var(--muted); }

/* tables in a card that has no padding: Billing History, Referrals */
.ui .card-flush { padding: 0; overflow: hidden; }
.ui .tbl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.ui .tbl-head h2 { font-size: 1.1rem; margin: 0 0 2px; }
.ui .tbl-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ui .tbl-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.ui .tbl-filter label { margin: 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.ui .tbl-filter select:not([multiple]):not([size]) { min-width: 130px; }
.ui .tbl-filter .btn { height: var(--ctl-h-sm); padding: 0 16px; }
.ui .app-tbl th { background: var(--bg); }
.ui .app-tbl th:first-child, .ui .app-tbl td:first-child { padding-left: 22px; }
.ui .app-tbl th:last-child, .ui .app-tbl td:last-child { padding-right: 22px; }
.ui .app-tbl tbody.rows tr:hover td { background: var(--brand-50); }
.ui .app-tbl .num { text-align: right; white-space: nowrap; }
.ui .app-tbl td.num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.ui .app-tbl .muted { color: var(--muted); font-size: 13.5px; }
.ui .app-tbl .nowrap { white-space: nowrap; }
.ui .rows:not(:empty) + .empty-rows { display: none; }
.ui .app-tbl .empty-rows td { padding: 0; border-top: 0; }
.ui .tbl-empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.ui .tbl-empty .fa { display: block; margin-bottom: 10px; font-size: 28px; color: var(--brand-300); }
.ui .tbl-empty p { margin: 0; font-size: 14.5px; }
.ui .set-grid-refer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

/* Add-ons (settings_addons.htm) */
.ui .addon-list { display: grid; gap: 14px; max-width: 900px; }
.ui .addon-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.ui .addon-body { flex: 1 1 auto; min-width: 0; }
.ui .addon-body h2 { font-size: 1.05rem; margin: 0 0 2px; }
.ui .addon-body p { margin: 0; color: var(--muted); font-size: 14px; }
.ui .addon-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* the "bidding login rejected" popup (#addons_prefs, settings_sites.htm AJAX_CHANGE) */
.ui #addons_prefs { width: 420px; max-width: calc(100vw - 32px); padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.ui .pop-form h2 { font-size: 1.25rem; margin: 0 0 14px; }
.ui .pop-form .notice-bar { font-size: 14px; }
.ui .pop-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* change_email.htm: change_email.php's {ERROR} is "<br><br><span style=...>message</span>" */
.ui .form-msg:empty { display: none; }
.ui .form-msg { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #f5c2bc; border-radius: 12px; background: var(--danger-bg); color: #8a2a1f; font-size: 14.5px; }
.ui .form-msg br { display: none; }
.ui .form-msg span[style] { color: inherit !important; font-weight: 600 !important; }

@media (max-width: 1199px) {
	.ui .svc-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name actions" "stats stats"; }
	.ui .add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ui .add-grid .add-btn { align-self: end; }
}
@media (max-width: 991px) {
	.ui .set-grid, .ui .set-grid-refer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ui .set-card { padding: 18px; }
	.ui .svc-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "stats" "actions"; padding: 18px; }
	.ui .svc-actions { justify-content: flex-start; }
	.ui .addon-card { flex-wrap: wrap; padding: 18px; }
	.ui .tbl-head { padding: 16px 18px; }
	.ui .set-actions .btn { flex: 1 1 auto; }
	/* tables become stacked rows, labelled from data-title */
	.ui .login-tbl, .ui .login-tbl tbody, .ui .login-tbl tr, .ui .login-tbl td,
	.ui .app-tbl, .ui .app-tbl tbody, .ui .app-tbl tr, .ui .app-tbl td { display: block; width: auto; }
	.ui .login-tbl thead, .ui .app-tbl thead { display: none; }
	.ui .login-tbl tbody.sites > tr { padding: 10px 0; border-top: 1px solid var(--line-2); }
	.ui .login-tbl tbody.sites > tr:first-child { border-top: 0; padding-top: 0; }
	.ui .login-tbl tbody.sites > tr.note { border-top: 0; padding: 0; }
	.ui .login-tbl td, .ui .login-tbl tbody:first-of-type tr:first-child td { padding-top: 4px; padding-bottom: 4px; padding-right: 0; border-top: 0; }
	.ui .login-tbl td:not([data-title]) { padding-left: 0; }
	.ui .login-tbl td:empty { display: none; }
	.ui .login-tbl td[data-title], .ui .app-tbl tbody.rows td[data-title] { position: relative; min-height: 28px; padding-left: 104px; }
	.ui .login-tbl td[data-title]::before, .ui .app-tbl tbody.rows td[data-title]::before { content: attr(data-title); position: absolute; left: 0; top: 6px; width: 94px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
	.ui .login-tbl .col-act { padding-top: 8px; text-align: left; }
	.ui .login-tbl .form-control { max-width: none; }
	.ui .login-tbl .add-site td { padding-top: 16px; }
	.ui .add-grid { grid-template-columns: minmax(0, 1fr); }
	.ui .add-grid .btn { width: 100%; }
	.ui .app-tbl tbody.rows tr { padding: 10px 18px; border-top: 1px solid var(--line-2); }
	.ui .app-tbl tbody.rows tr:first-child { border-top: 0; }
	.ui .app-tbl tbody.rows td { padding: 3px 0 3px 104px; border-top: 0; text-align: left; }
	.ui .app-tbl tbody.rows td[data-title]::before { left: 0; top: 5px; }
	.ui .app-tbl tbody.rows tr:hover td { background: none; }
}
@media (max-width: 480px) {
	.ui .set-row:not(.set-switch) { flex-direction: column; align-items: stretch; gap: 8px; }
	.ui .set-ctl { width: 100%; max-width: none; }
}