@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.ksa-portal {
	--a: #1f6f54; --a2: #185a44; --a50: #e8f4ee; --a100: #cfe7dc;
	--ink: #0f172a; --soft: #475569; --muted: #64748b; --line: #e6e8ef; --line2: #d6dae3; --bg: #f6f7fb;
	--ok: #047857; --okbg: #ecfdf5; --err: #b91c1c; --errbg: #fef2f2;
	--sh: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
	--sh2: 0 18px 40px -18px rgba(16,24,40,.22);
	/* Break out of narrow theme content columns so cards can sit side by side */
	width: min(960px, calc(100vw - 32px)); max-width: none !important; position: relative; left: 50%; transform: translateX(-50%); color: var(--ink);
	font: 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.ksa-portal * { box-sizing: border-box; }
.ksa-portal h2, .ksa-portal h3 { font-family: inherit; color: var(--ink); letter-spacing: -.02em; }

/* Cards */
.ksa-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin: 0 0 18px; box-shadow: var(--sh); }

/* Sign in / sign up */
.ksa-auth { max-width: 460px; margin: 8px auto 40px; padding: 30px 32px; box-shadow: var(--sh2); }
.ksa-auth-head { text-align: center; margin-bottom: 18px; }
.ksa-auth-head h2 { margin: 12px 0 4px; font-size: 24px; font-weight: 800; }
.ksa-auth-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ksa-mark, .ksa-top h2::before {
	display: inline-block; width: 44px; height: 44px; border-radius: 13px; vertical-align: middle;
	background-image: url("kit-mark.png");
	background-size: cover; background-repeat: no-repeat;
	box-shadow: 0 8px 20px -8px rgba(31,111,84,.6);
}
.ksa-tabs { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; background: #f1f3f8; border-radius: 12px; }
.ksa-tabs a { flex: 1; text-align: center; padding: 8px 12px; text-decoration: none; color: var(--muted); border-radius: 9px; font-weight: 600; font-size: 14px; }
.ksa-tabs a.on { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.ksa-portal label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 13.5px; color: var(--soft); }
.ksa-portal input[type=text], .ksa-portal input[type=email], .ksa-portal input[type=password] {
	display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--line2); border-radius: 10px;
	font: inherit; font-size: 15px; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s;
}
.ksa-portal input:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 4px rgba(31,111,84,.15); }
.ksa-portal input[type=checkbox] { accent-color: var(--a); width: 16px; height: 16px; }
.ksa-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--soft) !important; }
.ksa-check input { margin-top: 3px; }
.ksa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.ksa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--a); color: #fff !important; border: 1px solid var(--a); padding: 11px 18px; border-radius: 10px;
	font: 600 14px/1.2 inherit; cursor: pointer; text-decoration: none !important; text-align: center;
	box-shadow: 0 1px 2px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.12); transition: background .15s, box-shadow .15s, transform .15s;
}
.ksa-btn:hover { background: var(--a2); border-color: var(--a2); box-shadow: 0 10px 20px -10px rgba(31,111,84,.7); }
.ksa-btn:active { transform: translateY(1px); }
.ksa-btn-ghost { background: #fff; color: var(--ink) !important; border-color: var(--line2); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.ksa-btn-ghost:hover { background: #f8f9fc; border-color: #c4c9d6; box-shadow: var(--sh); }
.ksa-btn-wide { display: flex; width: 100%; }
.ksa-btn-small { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.ksa-inline { display: inline-block; margin: 0 8px 8px 0; }
.ksa-plan .ksa-inline { display: block; margin: 0; }

/* Messages */
.ksa-msg { padding: 13px 16px; margin: 0 0 18px; border-radius: 12px; border: 1px solid; font-size: 14px; }
.ksa-msg-ok { background: var(--okbg); border-color: #a7f3d0; color: #065f46; }
.ksa-msg-err { background: var(--errbg); border-color: #fecaca; color: #991b1b; }

/* Plans */
.ksa-plans-head { text-align: center; margin: 10px 0 22px; }
.ksa-plans-head h2 { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.ksa-plans-head p { color: var(--muted); margin: 0; }
.ksa-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.ksa-plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px; margin: 0; transition: box-shadow .2s, transform .2s; }
.ksa-plan:hover { box-shadow: var(--sh2); transform: translateY(-2px); }
.ksa-plan h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.ksa-price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; }
.ksa-plan ul { list-style: none; margin: 0 0 22px; padding: 0; color: var(--soft); font-size: 14px; flex: 1; }
.ksa-plan li { position: relative; padding-left: 26px; margin: 0 0 9px; }
.ksa-plan li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--a50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.3L12 5' fill='none' stroke='%231f6f54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ksa-plan-pop { border: 2px solid var(--a); box-shadow: 0 20px 40px -20px rgba(31,111,84,.45); }
.ksa-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #25845f, #185a44); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(31,111,84,.7); }

/* Dashboard */
.ksa-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.ksa-top h2 { margin: 0; font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.ksa-top h2::before { content: ""; width: 38px; height: 38px; border-radius: 11px; background-size: cover; background-repeat: no-repeat; }
.ksa-link { color: var(--muted); font-size: 14px; text-decoration: none; border: 1px solid var(--line2); padding: 7px 13px; border-radius: 9px; background: #fff; }
.ksa-link:hover { color: var(--ink); border-color: #c4c9d6; }
.ksa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.ksa-grid .ksa-card { margin: 0; position: relative; overflow: hidden; }
.ksa-grid .ksa-card::after { content: ""; position: absolute; right: -26px; top: -26px; width: 92px; height: 92px; border-radius: 50%; background: var(--a50); }
.ksa-grid .ksa-card:nth-child(2)::after { background: #ecfdf5; }
.ksa-grid .ksa-card:nth-child(3)::after { background: #f0f9ff; }
.ksa-label { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 6px; position: relative; z-index: 1; }
.ksa-big { font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; position: relative; z-index: 1; }
.ksa-small { font-size: 13px; color: var(--muted); position: relative; z-index: 1; }
.ksa-center { text-align: center; margin-top: 16px; }
.ksa-key { display: flex; gap: 8px; margin: 0 0 16px; }
.ksa-key input { margin: 0 !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: 1px; background: #f8f9fc !important; }
.ksa-actions { margin: 0 0 6px; }

/* Tables */
.ksa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ksa-table th, .ksa-table td { padding: 11px 10px; border-bottom: 1px solid #f0f2f6; text-align: left; vertical-align: middle; }
.ksa-table th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #f8f9fc; border-bottom: 1px solid var(--line); }
.ksa-table th:first-child { border-radius: 10px 0 0 10px; } .ksa-table th:last-child { border-radius: 0 10px 10px 0; }
.ksa-table tr:last-child td { border-bottom: 0; }
.ksa-table .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ksa-table .ksa-inline { margin: 0; }

@media (max-width: 640px) {
	.ksa-key { flex-wrap: wrap; }
	.ksa-card { padding: 18px; border-radius: 16px; }
	.ksa-auth { padding: 22px; }
	.ksa-table { font-size: 13px; }
	.ksa-table th, .ksa-table td { padding: 9px 6px; }
}