/* KAAMORA app – mobile-first, low-data (system fonts, no images). Colours come from admin settings via CSS variables. */
.k-app {
	--k-primary: #E8590C;
	--k-secondary: #1E3A5F;
	--k-success: #0E9F6E;
	--k-danger: #C92A2A;
	--k-bg: #F3F4F1;
	--k-radius: 18px;
	--k-font: 17px;
	--k-ink: #17202A;
	--k-ink-2: #5B6670;
	--k-line: #DCE0DA;
	--k-card: #FFFFFF;
	--k-soft: color-mix(in srgb, var(--k-primary) 10%, #fff);
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--k-bg);
	color: var(--k-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Kannada", "Noto Sans Tamil", "Noto Sans Telugu", sans-serif;
	font-size: var(--k-font);
	line-height: 1.45;
	-webkit-tap-highlight-color: transparent;
	text-align: left;
}
.k-app *, .k-app *::before, .k-app *::after { box-sizing: border-box; }
.k-app h1, .k-app h2, .k-app h3, .k-app p { margin: 0; font-family: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
:where(.k-app button, .k-app input, .k-app select, .k-app textarea) {
	font: inherit; color: inherit; margin: 0; letter-spacing: 0; text-transform: none; box-shadow: none;
}
:where(.k-app button) { cursor: pointer; background: none; border: 0; padding: 0; line-height: 1.2; }
.k-app button:disabled { opacity: .55; cursor: default; }
.k-app :focus-visible { outline: 3px solid var(--k-secondary); outline-offset: 2px; }
.k-app input:not([type=checkbox]):not([type=radio]):not([type=range]), .k-app select, .k-app textarea {
	width: 100%; padding: 13px 14px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; min-height: 50px;
}
.k-app textarea { resize: vertical; min-height: 70px; }
.k-app input:focus, .k-app select:focus, .k-app textarea:focus { border-color: var(--k-secondary); outline: none; }
.k-app img { max-width: 100%; display: block; }
.k-app [hidden] { display: none !important; }

body.kaamora-page { background: var(--k-bg, #F3F4F1); }

/* layout */
.k-screen { min-height: 100vh; display: flex; flex-direction: column; }
.k-main { flex: 1; padding: 16px 16px 110px; display: flex; flex-direction: column; gap: 14px; }
.k-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--k-bg); border-bottom: 1px solid var(--k-line); }
.k-top .k-logo { height: 30px; width: auto; }
.k-wordmark { font-weight: 900; font-size: 1.15em; letter-spacing: .04em; color: var(--k-secondary); }
.k-top-actions { display: flex; gap: 8px; align-items: center; }
.k-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: #fff; border: 1px solid var(--k-line); text-decoration: none; color: var(--k-ink); font-size: .85em; }
.k-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 560px; z-index: 40; display: flex; background: #fff; border-top: 1px solid var(--k-line); padding-bottom: env(safe-area-inset-bottom); }
.k-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px 8px; color: var(--k-ink-2); position: relative; }
.k-nav button span { font-size: 1.35em; line-height: 1; }
.k-nav button small { font-size: .68em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.k-nav button.on { color: var(--k-primary); }
.k-nav button.on::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--k-primary); }
.k-nav button.k-has::after { content: ""; position: absolute; top: 8px; right: calc(50% - 18px); width: 10px; height: 10px; border-radius: 50%; background: var(--k-danger); border: 2px solid #fff; }

.k-h { font-size: 1.4em; font-weight: 800; }
.k-h3 { font-size: 1.05em; font-weight: 700; margin-top: 6px; }
.k-muted { color: var(--k-ink-2); font-size: .9em; }
.k-center { text-align: center; justify-content: center; }
.k-pad { padding: 16px; }
.k-mt { margin-top: 10px; }
.k-row { display: flex; gap: 10px; align-items: center; }
.k-row > .k-btn { flex: 1; }
.k-wrap { flex-wrap: wrap; }
.k-row-sb { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.k-col { display: flex; flex-direction: column; gap: 8px; }
.k-two, .k-card.k-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.k-label { display: block; font-weight: 600; font-size: .9em; margin: 12px 0 6px; }
.k-label:first-child { margin-top: 0; }

.k-card { background: var(--k-card); border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 16px; display: block; width: 100%; text-align: left; }
.k-card > h3 { font-size: .95em; font-weight: 700; margin-bottom: 10px; color: var(--k-ink-2); }
.k-card.k-hl { border: 2px solid var(--k-primary); background: var(--k-soft); }
.k-card.k-warn { border-color: #E9C46A; background: #FFF8E1; font-size: .92em; }
.k-card.k-missing { border: 2px solid var(--k-danger); }

/* buttons */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px; border-radius: 14px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: transform .08s; text-align: center; }
.k-btn:active { transform: scale(.98); }
.k-app .k-primary { background: var(--k-primary); color: #fff !important; }
.k-app .k-success { background: var(--k-success); color: #fff !important; }
.k-app .k-danger { background: var(--k-danger); color: #fff !important; }
.k-app .k-ghost { background: #fff; border-color: var(--k-line); color: var(--k-ink) !important; }
.k-block { width: 100%; }
.k-lg { min-height: 60px; font-size: 1.1em; }
.k-xl { min-height: 76px; font-size: 1.3em; border-radius: 20px; }
.k-sm { min-height: 40px; padding: 8px 12px; font-size: .85em; }
.k-link { color: var(--k-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; display: inline-block; }
.k-sticky { position: sticky; bottom: 72px; z-index: 20; padding: 10px 0 4px; background: linear-gradient(to top, var(--k-bg) 70%, transparent); }
.k-spinner { width: 34px; height: 34px; margin: 24px auto; border: 4px solid var(--k-line); border-top-color: var(--k-primary); border-radius: 50%; animation: k-spin .8s linear infinite; }
.k-spin-sm { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; display: inline-block; animation: k-spin .8s linear infinite; }
.k-ghost .k-spin-sm { border-color: var(--k-line); border-top-color: var(--k-primary); }
.k-boot { display: flex; min-height: 60vh; align-items: center; justify-content: center; }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* toasts, modal, net */
.k-toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 520px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.k-toast { background: var(--k-ink); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: .92em; font-weight: 600; animation: k-in .2s ease-out; }
.k-toast.ok { background: var(--k-success); }
.k-toast.err { background: var(--k-danger); }
.k-toast.out { opacity: 0; transition: opacity .4s; }
@keyframes k-in { from { opacity: 0; transform: translateY(-8px); } }
.k-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 23, 32, .55); display: flex; align-items: flex-end; justify-content: center; }
.k-modal-card { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 24px 24px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: k-up .22s ease-out; }
.k-modal-card h3 { font-size: 1.2em; font-weight: 800; }
@keyframes k-up { from { transform: translateY(30px); opacity: .4; } }
.k-confirm-msg { font-size: 1.1em; font-weight: 600; }
.k-danger-t { color: var(--k-danger); }
.k-netbar { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--k-ink); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: .85em; z-index: 50; }

/* login */
.k-login { padding: 28px 18px 40px; display: flex; flex-direction: column; gap: 18px; min-height: 100vh; justify-content: center; }
.k-login-hero { text-align: center; padding: 10px 0 6px; }
.k-login-hero .k-wordmark { font-size: 2.4em; display: block; letter-spacing: .06em; }
.k-login-hero .k-logo { height: 64px; margin: 0 auto; }
.k-tag-line { font-size: 1.15em; color: var(--k-ink-2); margin-top: 6px; font-weight: 600; }
.k-login-title { font-size: 1.25em; font-weight: 800; margin-bottom: 8px; }
.k-role-pick { display: grid; gap: 12px; }
.k-role { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; background: #fff; border: 1.5px solid var(--k-line); border-radius: var(--k-radius); padding: 18px; }
.k-role:hover, .k-role:focus-visible { border-color: var(--k-primary); }
.k-role-ico { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 50%; background: var(--k-soft); display: flex; align-items: center; justify-content: center; font-size: 1.9em; }
.k-role b { font-size: 1.15em; }
.k-role small { color: var(--k-ink-2); }
.k-phone { display: flex; align-items: stretch; border: 1.5px solid var(--k-line); border-radius: 12px; overflow: hidden; background: #fff; }
.k-phone span { display: flex; align-items: center; padding: 0 12px; background: var(--k-bg); font-weight: 700; }
.k-app .k-phone input { border: 0 !important; border-radius: 0; font-size: 1.15em; letter-spacing: .05em; }
.k-app .k-otp { font-size: 1.6em !important; letter-spacing: .5em; text-align: center; font-weight: 800; }
.k-login-form .k-btn { margin-top: 16px; }

/* segmented / chips / stepper / switch */
.k-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.k-seg label { flex: 1 1 140px; }
.k-seg input { position: absolute; opacity: 0; pointer-events: none; }
.k-seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 8px 12px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; }
.k-seg input:checked + span { border-color: var(--k-primary); background: var(--k-soft); color: var(--k-primary); }
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-chips > button, .k-chk span { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 14px; border-radius: 23px; border: 1.5px solid var(--k-line); background: #fff; font-weight: 600; font-size: .92em; cursor: pointer; }
.k-chips > button.on, .k-chk input:checked + span { border-color: var(--k-primary); background: var(--k-primary); color: #fff; }
.k-chips input[type=date] { flex: 1; min-width: 150px; }
.k-chk input { position: absolute; opacity: 0; }
.k-svcchips > button { border-radius: 14px; }
.k-svcchips > button span { font-size: 1.3em; }
.k-stepper { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--k-line); border-radius: 14px; background: #fff; overflow: hidden; }
.k-stepper button { width: 54px; height: 54px; font-size: 1.6em; font-weight: 700; color: var(--k-primary); }
.k-stepper output { font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.k-switch { display: flex; align-items: center; gap: 8px; font-weight: 700; min-height: 50px; padding: 0 12px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; cursor: pointer; }
.k-switch input { width: 22px; height: 22px; accent-color: var(--k-danger); }
.k-card[data-f] .k-two > [data-f] { border-radius: 12px; }
.k-two > .k-missing, [data-f].k-missing { outline: 2px solid var(--k-danger); outline-offset: 3px; border-radius: 12px; }

/* customer home: the mic */
.k-hero-c { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 0 8px; gap: 6px; }
.k-greet { color: var(--k-ink-2); font-weight: 600; }
.k-mic { position: relative; width: 178px; height: 178px; margin: 18px 0 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.k-mic-core { position: relative; z-index: 2; width: 136px; height: 136px; border-radius: 50%; background: var(--k-primary); color: #fff; font-size: 3.4em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--k-primary) 22%, transparent), 0 14px 30px color-mix(in srgb, var(--k-primary) 40%, transparent); }
.k-mic-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--k-primary) 45%, transparent); animation: k-ring 2.6s ease-out infinite; }
.k-mic-ring.r2 { animation-delay: 1.3s; }
@keyframes k-ring { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.k-hero-title { font-size: 1.8em; font-weight: 900; line-height: 1.1; }
.k-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k-quick button { display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 64px; background: #fff; border: 1px solid var(--k-line); border-radius: 16px; font-weight: 700; text-align: left; }
.k-quick button span { font-size: 1.4em; }
.k-count { margin-left: auto; background: var(--k-primary); color: #fff; border-radius: 12px; padding: 2px 9px; font-size: .85em; }
.k-svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.k-svc button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; background: #fff; border: 1px solid var(--k-line); border-radius: 16px; text-align: left; }
.k-svc small { color: var(--k-ink-2); }
.k-svc-ico { font-size: 1.6em; line-height: 1; }
.k-jobmini { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--k-line); border-radius: 16px; text-align: left; }
.k-jobmini > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.k-jobmini small { color: var(--k-ink-2); font-size: .85em; }
.k-active { display: flex; flex-direction: column; gap: 8px; }
.k-list { display: flex; flex-direction: column; gap: 8px; }
.k-amt { display: flex; flex-direction: column; align-items: flex-end; }
.k-empty { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* badges */
.k-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: .74em; font-weight: 700; background: #E8ECEF; color: var(--k-ink); white-space: nowrap; }
.k-badge.s-searching, .k-badge.s-accepted { background: #FFF1D6; color: #8A5300; }
.k-badge.s-assigned, .k-badge.s-on_the_way, .k-badge.s-open { background: #DCEBFF; color: #1D4E89; }
.k-badge.s-arrived, .k-badge.s-in_progress, .k-badge.s-started { background: #E3DBFF; color: #4B2B9E; }
.k-badge.s-awaiting_confirmation, .k-badge.s-completed { background: #FFE5D6; color: #9A3A00; }
.k-badge.s-paid, .k-badge.s-closed, .k-badge.s-resolved { background: #D7F5E7; color: #0B6B49; }
.k-badge.s-cancelled, .k-badge.s-disputed, .k-badge.s-urgent { background: #FFE0D9; color: #A52A0A; }

/* booking */
.k-voicebar { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--k-secondary); color: #fff; border-radius: var(--k-radius); }
.k-mini-mic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: var(--k-primary) !important; font-size: 1.5em; position: relative; }
.k-voicebar.listening .k-mini-mic::after, .listening::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--k-primary); animation: k-ring 1.1s ease-out infinite; }
.k-app .listening { position: relative; }
.k-vtext { min-width: 0; }
.k-vq { font-weight: 700; }
.k-heard { font-size: .88em; opacity: .85; font-style: italic; }
.k-voicebar { flex-wrap: wrap; position: sticky; top: 66px; z-index: 25; }
.k-voicebar .k-vtext { flex: 1 1 100%; }
.k-voicebar.done { background: var(--k-success); }
.k-voicebar.thinking .k-vq::after { content: " …"; }
.k-vinput { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
.k-app .k-vinput input { flex: 1; min-width: 0; min-height: 52px; border: 0; border-radius: 26px; padding: 0 18px; color: var(--k-ink); }
.k-vsend, .k-csend { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: #fff; color: var(--k-secondary); font-size: 1.3em; font-weight: 900; }
.k-qchips { flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.k-qchips:empty { display: none; }
.k-qchips button { flex: 0 0 auto; padding: 9px 14px; border-radius: 20px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: .9em; border: 1px solid rgba(255,255,255,.35); }
.k-compose { display: flex; gap: 8px; width: 100%; margin-top: 14px; background: #fff; border: 1.5px solid var(--k-line); border-radius: 30px; padding: 5px; }
.k-compose:focus-within { border-color: var(--k-secondary); }
.k-app .k-compose input { flex: 1; min-width: 0; border: 0 !important; min-height: 50px; padding: 0 14px; background: transparent; }
.k-app .k-csend { background: var(--k-primary); color: #fff; }
.k-examples { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.k-ex { padding: 7px 12px; border-radius: 16px; background: #fff; border: 1px dashed var(--k-line); font-size: .85em; color: var(--k-ink-2); }
.k-pulse { animation: k-pulse 1.6s ease-in-out infinite; }
@keyframes k-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-primary) 25%, transparent); } }
.k-online.k-locked { background: #9AA5B1; box-shadow: none; }
.k-howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.k-block-item p { margin-bottom: 8px; }
.k-map { height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--k-line); background: #e9ece6; z-index: 1; }
.k-map-lg { height: 260px; }
.k-search { display: flex; gap: 8px; }
.k-search .k-btn { flex: 0 0 auto; }
.k-results { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.k-results button { text-align: left; padding: 10px; border-radius: 10px; background: var(--k-bg); font-size: .88em; }
.k-card textarea[name=address] { margin-top: 10px; }
.k-pin { background: none; border: 0; }
.k-pin span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--k-primary); box-shadow: 0 3px 8px rgba(0,0,0,.3); font-size: 15px; }
.k-pin-worker span { background: var(--k-secondary); }

/* confirm & bill */
.k-confirm { display: flex; flex-direction: column; gap: 14px; }
.k-bigline { display: flex; align-items: center; gap: 12px; font-size: 1.35em; }
.k-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 14px 16px; }
.k-dl dt { color: var(--k-ink-2); font-size: .9em; }
.k-dl dd { margin: 0; font-weight: 600; }
.k-bill { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 14px 16px; }
.k-card .k-bill { border: 0; padding: 0; }
.k-bill > div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.k-bill-total { border-top: 1.5px dashed var(--k-line); padding-top: 10px; margin-top: 4px; font-size: 1.3em; font-weight: 900; }

/* job tracking */
.k-jobhead { display: flex; flex-direction: column; gap: 10px; }
.k-jh-top { display: flex; align-items: center; gap: 12px; }
.k-jh-top > div { display: flex; flex-direction: column; }
.k-jh-top small { color: var(--k-ink-2); }
.k-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--k-secondary); color: #fff; font-weight: 700; }
.k-status.s-cancelled, .k-status.s-disputed { background: var(--k-danger); }
.k-status.s-paid, .k-status.s-closed { background: var(--k-success); }
.k-radar { width: 14px; height: 14px; border-radius: 50%; background: #fff; position: relative; flex: 0 0 14px; }
.k-radar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; animation: k-ring 1.4s ease-out infinite; }
.k-jobbody { display: flex; flex-direction: column; gap: 12px; }
.k-pincard { text-align: center; padding: 14px; border-radius: var(--k-radius); background: #fff; border: 2px dashed var(--k-secondary); }
.k-pin-digits { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.k-pin-digits span { width: 54px; height: 64px; border-radius: 12px; background: var(--k-bg); display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: 900; font-variant-numeric: tabular-nums; border: 1.5px solid var(--k-line); }
.k-worker { display: flex; align-items: center; gap: 12px; }
.k-av { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: var(--k-bg); display: flex; align-items: center; justify-content: center; font-size: 1.6em; overflow: hidden; }
.k-av img { width: 100%; height: 100%; object-fit: cover; }
.k-av-lg { width: 72px; height: 72px; flex-basis: 72px; }
.k-wi { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.k-wi small { color: var(--k-ink-2); }
.k-verified { color: var(--k-success); }
.k-call { background: var(--k-success); color: #fff !important; border: 0; font-size: 1.2em; }
.k-photos { display: flex; gap: 8px; }
.k-photos figure { margin: 0; flex: 1; }
.k-photos img { border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.k-photos figcaption { font-size: .8em; color: var(--k-ink-2); }
.k-timeline { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--k-line); display: flex; flex-direction: column; gap: 10px; }
.k-timeline li { display: flex; flex-direction: column; position: relative; }
.k-timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--k-primary); }
.k-timeline small { color: var(--k-ink-2); }
details.k-card summary { cursor: pointer; font-weight: 700; }

/* rating */
.k-rate { display: flex; flex-direction: column; gap: 10px; }
.k-stars { display: flex; gap: 6px; }
.k-stars button { font-size: 2.3em; color: #CBD2D9; line-height: 1; padding: 2px; }
.k-stars button.on { color: #F2A900; }
.k-tag.on { background: var(--k-secondary) !important; border-color: var(--k-secondary) !important; color: #fff; }
.k-dictate { display: flex; gap: 8px; align-items: flex-start; }
.k-dictate .k-icon-btn { position: relative; }

/* tickets */
.k-ticket p { margin-top: 6px; }
.k-reply { margin-top: 8px; padding: 8px 10px; background: var(--k-bg); border-radius: 10px; }
.k-reply small { color: var(--k-ink-2); }

/* worker home – the digital chowk */
.k-whome { display: flex; flex-direction: column; gap: 14px; }
.k-earn { display: flex; align-items: baseline; gap: 8px; justify-content: center; padding-top: 4px; }
.k-earn small { color: var(--k-ink-2); font-weight: 600; }
.k-earn-v { font-size: 2.6em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.k-earn span { color: var(--k-ink-2); }
.k-status-pill { align-self: center; padding: 6px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--k-line); font-weight: 700; }
.k-chowk { position: relative; height: 240px; display: flex; align-items: center; justify-content: center; }
.k-online { position: relative; z-index: 2; width: 196px; height: 196px; border-radius: 50%; background: var(--k-secondary); color: #fff; font-size: 1.45em; font-weight: 900; line-height: 1.1; padding: 20px; box-shadow: 0 0 0 12px color-mix(in srgb, var(--k-secondary) 15%, transparent), 0 14px 30px rgba(0,0,0,.18); }
.k-wave { position: absolute; width: 196px; height: 196px; border-radius: 50%; border: 3px solid var(--k-success); opacity: 0; }
.is-on .k-online { background: var(--k-success); box-shadow: 0 0 0 12px color-mix(in srgb, var(--k-success) 18%, transparent), 0 14px 30px rgba(0,0,0,.18); }
.is-on .k-wave { animation: k-wave 3s ease-out infinite; }
.is-on .k-wave.w2 { animation-delay: 1s; }
.is-on .k-wave.w3 { animation-delay: 2s; }
@keyframes k-wave { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.k-active-mini { display: flex; flex-direction: column; gap: 8px; }
.k-todo { display: flex; flex-direction: column; gap: 2px; border-color: var(--k-primary); }
.k-todo small { color: var(--k-ink-2); }

/* offer overlay */
.k-offer-modal { align-items: stretch; background: rgba(15, 23, 32, .8); }
.k-offer-modal .k-modal-card { border-radius: 0; max-height: none; height: 100%; justify-content: center; }
.k-offer { display: flex; flex-direction: column; gap: 16px; }
.k-urgent { align-self: center; background: var(--k-danger); color: #fff; padding: 6px 16px; border-radius: 20px; font-weight: 800; animation: k-blink 1s steps(2) infinite; }
@keyframes k-blink { 50% { opacity: .6; } }
.k-offer-svc { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.35em; font-weight: 800; }
.k-offer-pay { text-align: center; font-size: 3.6em; font-weight: 900; color: var(--k-success); line-height: 1; font-variant-numeric: tabular-nums; }
.k-offer-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.k-offer-facts > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 4px; background: var(--k-bg); border-radius: 12px; }
.k-offer-facts b { font-size: 1.05em; }
.k-offer-facts small { color: var(--k-ink-2); font-size: .78em; }
.k-offer-notes { text-align: center; font-style: italic; color: var(--k-ink-2); }
.k-offer-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.k-offer-btns .k-btn { min-height: 76px; font-size: 1.25em; }
.k-timerbar { height: 6px; background: var(--k-line); border-radius: 3px; overflow: hidden; }
.k-timerbar span { display: block; height: 100%; width: 100%; background: var(--k-primary); transition: width 1s linear; }
.k-offer-row.urgent { border-left: 6px solid var(--k-danger); }
.k-money { color: var(--k-success); font-weight: 900; font-variant-numeric: tabular-nums; }
.k-money.neg, .neg { color: var(--k-danger); }
.pos { color: var(--k-success); }

/* active job */
.k-ajob { display: flex; flex-direction: column; gap: 12px; }
.k-addr { font-weight: 600; margin-bottom: 10px !important; }
.k-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; counter-reset: s; }
.k-steps li { font-size: .7em; text-align: center; color: var(--k-ink-2); padding-top: 10px; border-top: 4px solid var(--k-line); }
.k-steps li.done { border-color: var(--k-success); color: var(--k-ink); }
.k-steps li.now { border-color: var(--k-primary); color: var(--k-primary); font-weight: 800; }
.k-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.k-keypad button { height: 64px; border-radius: 14px; background: var(--k-bg); font-size: 1.6em; font-weight: 800; }
.k-keypad button[data-k="✓"] { background: var(--k-success); color: #fff; }

/* earnings */
.k-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.k-stats > div { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; }
.k-stats small { color: var(--k-ink-2); font-size: .78em; }
.k-stats b { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.k-tx { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
.k-txrow { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--k-line); }
.k-txrow:last-child { border-bottom: 0; }
.k-txrow span { display: flex; flex-direction: column; }
.k-txrow small { color: var(--k-ink-2); font-size: .8em; }

/* profile */
.k-me { display: flex; gap: 14px; align-items: center; }
.k-me > div:last-child { display: flex; flex-direction: column; gap: 6px; }
.k-me small { color: var(--k-ink-2); }
.k-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.k-lang { position: relative; display: flex; flex-direction: column; padding: 10px 12px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }
.k-lang input { position: absolute; opacity: 0; }
.k-lang b { font-size: 1.1em; }
.k-lang small { color: var(--k-ink-2); }
.k-lang.on, .k-lang:has(input:checked) { border-color: var(--k-primary); background: var(--k-soft); }
.k-refcode { font-size: 1.2em; letter-spacing: .08em; color: var(--k-ink); }
.k-app input[type=range] { width: 100%; accent-color: var(--k-primary); }

@media (min-width: 600px) {
	.k-app { border-left: 1px solid var(--k-line); border-right: 1px solid var(--k-line); }
	.k-modal { align-items: center; }
	.k-modal-card { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   PREMIUM LAYER (v1.2) – depth, rich header band, refined controls
   ===================================================================== */
.k-app {
	--k-ink: #0F172A;
	--k-ink-2: #64748B;
	--k-line: #E2E8F0;
	--k-sh-1: 0 1px 2px rgba(15, 23, 42, .05);
	--k-sh-2: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -14px rgba(15, 23, 42, .22);
	--k-sh-3: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 44px -18px rgba(15, 23, 42, .35);
	font-family: var(--k-family, system-ui), system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Kannada", "Noto Sans Tamil", "Noto Sans Telugu", sans-serif;
	letter-spacing: -0.005em;
}
.k-app.k-depth-0 { --k-sh-2: none; --k-sh-3: none; }
.k-app.k-depth-2 { --k-sh-2: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -16px rgba(15, 23, 42, .35); }

.k-top { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: rgba(226, 232, 240, .8); }
.k-wordmark { color: var(--k-ink); font-weight: 800; letter-spacing: .08em; }
.k-icon-btn { border-color: var(--k-line); box-shadow: var(--k-sh-1); font-weight: 600; }
.k-main { gap: 16px; padding-top: 14px; }

.k-card, .k-quick button, .k-svc button, .k-jobmini, .k-dl, .k-bill, .k-tx, .k-stats > div, .k-role { border-color: transparent; box-shadow: var(--k-sh-2); border-radius: calc(var(--k-radius) + 2px); }
.k-card > h3 { text-transform: none; color: var(--k-ink); font-size: 1em; }
.k-h { font-size: 1.5em; letter-spacing: -0.02em; }

/* Buttons */
.k-app .k-btn { border-radius: 16px; font-weight: 700; letter-spacing: -0.01em; }
.k-app .k-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--k-primary) 88%, #fff), var(--k-primary)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--k-primary) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.k-app .k-success { background: linear-gradient(180deg, color-mix(in srgb, var(--k-success) 85%, #fff), var(--k-success)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--k-success) 70%, transparent); }
.k-app .k-danger { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--k-danger) 70%, transparent); }
.k-app .k-ghost { border-color: var(--k-line); box-shadow: var(--k-sh-1); }
.k-app .k-outline-danger { background: #fff; color: var(--k-danger) !important; border: 1.5px solid color-mix(in srgb, var(--k-danger) 45%, #fff); }
.k-app .k-outline-danger:hover { background: color-mix(in srgb, var(--k-danger) 7%, #fff); }

/* Header band (customer home) */
.k-band {
	position: relative; overflow: hidden; margin: -2px -4px 0; padding: 22px 18px 18px; border-radius: 28px; color: #fff;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k-primary) 55%, transparent) 0%, transparent 55%),
		radial-gradient(90% 70% at 0% 100%, rgba(255,255,255,.10) 0%, transparent 60%),
		linear-gradient(155deg, var(--k-secondary) 0%, color-mix(in srgb, var(--k-secondary) 70%, #000) 100%);
	box-shadow: var(--k-sh-3);
}
.k-hero-solid .k-band { background: var(--k-secondary); }
.k-hero-light .k-band { background: #fff; color: var(--k-ink); }
.k-band .k-greet { color: inherit; opacity: .8; font-weight: 600; margin: 0; }
.k-band .k-hero-title { font-size: 2.05em; font-weight: 800; letter-spacing: -0.03em; margin: 2px 0 2px; color: inherit; }
.k-band-sub { opacity: .78; margin-bottom: 16px !important; }
.k-composer { background: #fff; color: var(--k-ink); border-radius: 22px; padding: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.k-app .k-composer textarea { border: 0 !important; min-height: 116px; resize: none; font-size: 1.08em; line-height: 1.5; padding: 14px 14px 6px; background: transparent; box-shadow: none; }
.k-app .k-composer textarea::placeholder { color: #94A3B8; }
.k-comp-bar { display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid #F1F5F9; }
.k-comp-mic { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px !important; border-radius: 30px; background: color-mix(in srgb, var(--k-primary) 10%, #fff) !important; color: var(--k-primary); font-weight: 800; }
.k-comp-mic .k-mic-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--k-primary); color: #fff; font-size: 1.2em; box-shadow: 0 6px 16px -6px var(--k-primary); }
.k-comp-mic .k-mic-ring { inset: auto; left: 6px; top: 6px; width: 44px; height: 44px; }
.k-comp-count { margin-left: auto; color: #94A3B8; font-size: .78em; font-variant-numeric: tabular-nums; }
.k-app .k-comp-go { min-height: 52px; padding: 0 18px; }
.k-band .k-examples { justify-content: flex-start; margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.k-band .k-ex { flex: 0 0 auto; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 8px 13px; }
.k-hero-light .k-band .k-ex { background: var(--k-bg); color: var(--k-ink-2); border-color: var(--k-line); }

/* Nearby map */
.k-nearby { display: flex; flex-direction: column; gap: 10px; }
.k-nearby h3 { margin: 0 !important; }
.k-map-sm { height: 190px; }
.k-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85em; font-weight: 600; color: var(--k-ink-2); }
.k-legend:empty { display: none; }
.k-legend-b { margin-top: 8px; }
.k-leg i, .k-status-pill i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--c); vertical-align: 0; }
.k-st-free { --c: var(--k-c-free, #16A34A); }
.k-st-busy { --c: var(--k-c-busy, #F59E0B); }
.k-st-working { --c: var(--k-c-working, #7C3AED); }
.k-st-offline { --c: #94A3B8; }
.k-npin span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--c); box-shadow: 0 3px 8px rgba(0,0,0,.25); font-size: 14px; }
.k-npin.k-st-free span { animation: k-glow 2s ease-in-out infinite; }
@keyframes k-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent), 0 3px 8px rgba(0,0,0,.25); } }

/* Services & quick tiles */
.k-svc button { padding: 16px; gap: 6px; }
.k-svc-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--k-primary) 10%, #fff); font-size: 1.45em; }
.k-jobmini .k-svc-ico { width: 42px; height: 42px; flex: 0 0 42px; }
.k-quick button span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--k-bg); font-size: 1.2em; }

/* Booking assistant */
.k-voicebar { border-radius: 24px; padding: 14px; background: linear-gradient(155deg, var(--k-secondary), color-mix(in srgb, var(--k-secondary) 72%, #000)); box-shadow: var(--k-sh-3); }
.k-voicebar .k-vq { font-size: 1.1em; }
.k-app .k-vinput textarea { flex: 1; min-width: 0; min-height: 54px; max-height: 160px; border: 0 !important; border-radius: 18px; padding: 15px 16px; resize: none; color: var(--k-ink); font-size: 1.02em; line-height: 1.4; background: #fff; }
.k-vinput { align-items: flex-end; }

/* Job tracking */
.k-jobactions { display: flex; gap: 8px; }
.k-jobactions .k-btn { flex: 1; min-height: 48px; }
.k-status { border-radius: 18px; box-shadow: var(--k-sh-2); }
.k-replace { font-size: .9em; padding: 2px 4px 0; margin-top: -4px; }
.k-reasons { display: flex; flex-direction: column; gap: 8px; }
.k-reason input { position: absolute; opacity: 0; }
.k-reason span { display: block; padding: 14px 16px; border: 1.5px solid var(--k-line); border-radius: 14px; font-weight: 600; cursor: pointer; }
.k-reason input:checked + span { border-color: var(--k-danger); background: color-mix(in srgb, var(--k-danger) 6%, #fff); color: var(--k-danger); }
.k-reason input:focus-visible + span { outline: 3px solid var(--k-secondary); }

/* Worker home */
.k-whome .k-earn { flex-direction: column; align-items: center; gap: 0; padding: 20px; border-radius: 26px; color: #fff; background: linear-gradient(155deg, var(--k-secondary), color-mix(in srgb, var(--k-secondary) 70%, #000)); box-shadow: var(--k-sh-3); }
.k-whome .k-earn small, .k-whome .k-earn span { color: rgba(255,255,255,.75); }
.k-whome .k-earn-v { font-size: 3em; }
.k-status-pill { display: inline-flex; align-items: center; box-shadow: var(--k-sh-2); border: 0; padding: 8px 18px; }
.k-status-pill i { width: 12px; height: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }

/* Floating bottom nav */
.k-nav { bottom: 10px; width: calc(100% - 20px); max-width: 540px; border: 0; border-radius: 24px; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 12px 30px -10px rgba(15,23,42,.35); padding: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
.k-nav button { border-radius: 18px; padding: 8px 2px; }
.k-nav button.on { background: color-mix(in srgb, var(--k-primary) 11%, #fff); }
.k-nav button.on::before { display: none; }
.k-main { padding-bottom: 120px; }
.k-sticky { bottom: 86px; }

/* Modal polish */
.k-modal { backdrop-filter: blur(3px); }
.k-modal-card { box-shadow: 0 -20px 50px -20px rgba(15,23,42,.4); }
.k-app .k-comp-go { white-space: nowrap; }
.k-nearby .k-link { font-size: .85em; white-space: nowrap; padding: 4px 0; }
@media (max-width: 420px) { .k-comp-count { display: none; } .k-comp-mic b { display: none; } .k-comp-mic { padding: 4px !important; } .k-app .k-comp-go { margin-left: auto; } }