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

.k-dark {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  
  --line-soft: color-mix(in srgb, var(--k-primary) 26%, transparent);
  --fill: color-mix(in srgb, var(--k-primary) 7%, transparent);
  --fill-hover: color-mix(in srgb, var(--k-primary) 13%, transparent);
  --accent-soft: color-mix(in srgb, var(--k-primary) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--k-primary) 32%, transparent);
  --look-card: color-mix(in srgb, color-mix(in srgb, var(--k-bg) 92%, var(--k-ink)) 80%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 30px -18px rgba(0,0,0,.45);
  --ease: 160ms cubic-bezier(.2,.7,.3,1);
}
.k-dark[data-mode="light"] {
  --k-bg: color-mix(in srgb, var(--k-primary) 7%, #ffffff);
  --look-card: color-mix(in srgb, var(--k-primary) 2.5%, #fff);
  --line-soft: color-mix(in srgb, var(--k-primary) 24%, transparent);
  --fill: color-mix(in srgb, var(--k-primary) 6%, transparent);
  --fill-hover: color-mix(in srgb, var(--k-primary) 12%, transparent);
  --shadow: 0 1px 2px rgba(16,20,46,.06), 0 14px 36px -18px rgba(16,20,46,.32);
}

.k-dark .k-tool-name { font-family: 'Sora', sans-serif; }


.k-dark :is(.card, .settings-card, .table-card, .summary-card, .review-card, .info-card, .usage-card, .google-card, .locations-card, .biz-card, .link-card, .ai-panel, .design-panel, .section, .scan-card, .value-card, .list-card, .help-card, .focus-card, .start-panel) {
  background: var(--look-card);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.k-dark[data-mode="light"] :is(.card, .settings-card, .table-card, .summary-card, .review-card, .info-card, .usage-card, .google-card, .locations-card, .biz-card, .link-card, .ai-panel, .design-panel, .section, .scan-card, .value-card, .list-card, .help-card, .focus-card, .start-panel) {
  background: var(--look-card);
  border-color: var(--line-soft);
  box-shadow: var(--shadow);
}
.k-dark :is(.card, .settings-card, .table-card, .summary-card, .section, .review-card, .info-card, .usage-card, .ai-panel, .design-panel) > :is(h2, h3):first-child { letter-spacing: -0.015em; font-weight: 700; color: var(--k-primary); }
.k-dark :is(.card, .settings-card, .table-card, .summary-card, .section) { border-top: 3px solid var(--k-primary); }
.k-dark :is(.card.quiet) { border-top-width: 1px; border-top-color: var(--line-soft); }
.k-dark .card.quiet > h2:first-child { color: var(--k-ink-faint); }

.k-dark :is(.tiles .tile, .summary-tiles .tile) { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--fill); box-shadow: none; }


.k-dark :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .k-btn, .refresh-btn, .range-btn, .danger-btn) {
  font-family: inherit; font-weight: 600; font-size: 14px;
  min-height: 44px; padding: 10px 16px; border-radius: 11px;
  border: 1px solid var(--line-soft); background: var(--fill); color: var(--k-ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease), opacity var(--ease);
}
.k-dark :is(.btn, .btn-secondary, .btn-ghost, .k-btn, .k-btn-secondary, .refresh-btn, .range-btn):hover { background: var(--fill-hover); border-color: color-mix(in srgb, var(--k-ink) 16%, transparent); }
.k-dark :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .k-btn):active { transform: translateY(1px); }
.k-dark :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .k-btn):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.k-dark :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .k-btn):disabled { opacity: .45; cursor: default; transform: none; }
.k-dark :is(.btn.primary, .btn-primary, .k-btn-primary, .range-btn.on, .range-btn.active) { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.k-dark :is(.btn.primary, .btn-primary, .k-btn-primary):hover { background: color-mix(in srgb, var(--k-primary) 88%, #fff); border-color: color-mix(in srgb, var(--k-primary) 88%, #fff); }
.k-dark :is(.btn.danger, .btn-danger, .danger-btn) { color: var(--danger, #F87171); border-color: color-mix(in srgb, var(--danger, #F87171) 35%, transparent); background: transparent; }
.k-dark :is(.btn.danger, .btn-danger, .danger-btn):hover { background: color-mix(in srgb, var(--danger, #F87171) 10%, transparent); }

.k-dark :is(.btn.sm, .btn-sm, .btn.small, .k-btn.sm, table .btn, .row-actions .btn, .worker-actions .btn, .hold .btn, .tile .acts .btn) { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.k-dark :is(.btn.big, .btn-big) { min-height: 56px; font-size: 19px; padding: 14px 18px; }

.k-dark :is(.k-home-btn, .bedbtn, .mins button, .k-bubble, .dk-person, .dk-keys button, .tab-btn) { min-height: 0; }


.k-dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):not(.cl-rootBox *) {
  font-family: inherit; font-size: 15px;
  min-height: 46px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line-soft); background: var(--fill); color: var(--k-ink);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.k-dark textarea:not(.cl-rootBox *) { min-height: 84px; line-height: 1.45; }

.k-dark :is(input, textarea):not(.cl-rootBox *)::placeholder { color: color-mix(in srgb, var(--k-ink-faint) 80%, transparent); }
.k-dark :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.cl-rootBox *):hover { border-color: color-mix(in srgb, var(--k-ink) 18%, transparent); }
.k-dark :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.cl-rootBox *):focus { outline: none; border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--accent-ring); }
.k-dark select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--k-ink-faint) 50%), linear-gradient(135deg, var(--k-ink-faint) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.k-dark select[multiple], .k-dark select[size] { background-image: none; padding-right: 14px; }
.k-dark[data-mode="light"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.cl-rootBox *) { background: var(--fill); border-color: var(--line-soft); }
.k-dark[data-mode="light"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.cl-rootBox *):focus { border-color: var(--k-primary); }

.k-dark table :is(input, select) { min-height: 36px; padding: 6px 10px; border-radius: 8px; }
.k-dark input[type="checkbox"]:not(.cl-rootBox *), .k-dark input[type="radio"]:not(.cl-rootBox *) { accent-color: var(--k-primary); width: 18px; height: 18px; }


.k-dark :is(.modal, .modal-card, .modal-box) { border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.k-dark :is(.modal-backdrop, .backdrop, #backdrop) { backdrop-filter: blur(3px); }


.k-dark table td, .k-dark table th { border-color: var(--line-soft); }
.k-dark hr { border-color: var(--line-soft); }
.k-dark :is(.hint, .sub, .muted, .section-sub) { line-height: 1.5; }