/* Components for the screens added in v8 (login, registration, my page, member management, shops, profile photos).
   All selectors are prefixed with .kn- so they do not override the older style layers. */
body { --kn-accent: #236754; --kn-accent-ink: #fff; --kn-text: #22312b; --kn-sub: #4b5a53; --kn-line: #d9e0db; --kn-err: #a3341f; --kn-panel: #fff; }
body[data-role="guest"] { --kn-accent: #6f5a36; }
body[data-role="staff"] { --kn-accent: #284a68; }

/* forms */
.kn-form { display: grid; gap: 4px; }
.kn-form fieldset { border: 0; border-top: 1px solid var(--kn-line); margin: 18px 0 0; padding: 14px 0 0; min-width: 0; }
.kn-form legend { font-size: 15px; font-weight: 700; color: var(--kn-text); padding: 0 8px 0 0; }
body .kn-field { margin-top: 12px; min-width: 0; }
body .kn-field > label, body .kn-labeltext { display: block; font-size: 14px; font-weight: 600; color: var(--kn-text); margin: 0 0 6px; letter-spacing: 0; }
body .kn-field input, body .kn-field select, body .kn-field textarea, body .kn-form > textarea { font-size: 16px; min-height: 46px; border: 1px solid #b9c4bd; border-radius: 8px; padding: 10px 12px; width: 100%; background: #fff; color: var(--kn-text); }
body .kn-field input[readonly] { background: #f3f5f3; color: var(--kn-sub); }
body .kn-form [aria-invalid="true"] { border-color: var(--kn-err); box-shadow: 0 0 0 2px #a3341f22; }
.kn-hint { font-size: 13px; color: var(--kn-sub); margin: -2px 0 6px; line-height: 1.6; }
.kn-error { font-size: 13.5px; color: var(--kn-err); font-weight: 600; margin: 6px 0 0; line-height: 1.6; }
.kn-error::before { content: "入力エラー："; }
body .kn-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--kn-text); margin: 18px 0 0; line-height: 1.7; font-weight: 400; }
.kn-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.kn-form .btn { margin-top: 18px; min-height: 48px; font-size: 15px; }
.kn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kn-notice { background: #fff8e3; border: 1px solid #e3c979; color: #45360e; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; }
.kn-note { font-size: 13.5px; color: var(--kn-sub); line-height: 1.7; }
.kn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kn-actions .btn { margin-top: 0; }
.kn-stack { flex-direction: column; align-items: stretch; }
.kn-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.kn-h3 { font-size: 16px; margin: 0 0 6px; }
.kn-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.kn-list li { display: grid; gap: 2px; font-size: 13.5px; color: var(--kn-sub); border-bottom: 1px solid var(--kn-line); padding-bottom: 8px; }
.kn-list .textbtn { justify-self: start; font-size: 14px; }

/* restricted features: reason + next step */
.kn-access { background: var(--kn-panel); border: 1px solid var(--kn-line); border-radius: 10px; padding: 26px; max-width: 640px; }
.modal .kn-access { border: 0; padding: 0; }
.kn-access-icon { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: #eef1ee; color: var(--kn-accent); }
.kn-access h2 { font-size: 20px; margin: 10px 0 6px; color: var(--kn-text); }
.kn-access p { font-size: 14.5px; color: var(--kn-text); line-height: 1.8; margin: 6px 0; }
.kn-label { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--kn-accent); vertical-align: middle; }

/* tabs, panels, definition lists */
.kn-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--kn-line); margin: 6px 0 14px; scrollbar-width: thin; }
.kn-tabs button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; font-size: 14px; color: var(--kn-sub); cursor: pointer; min-height: 44px; }
.kn-tabs button.active { color: var(--kn-text); font-weight: 700; border-bottom-color: var(--kn-accent); }
.kn-panel { padding: 22px; }
.kn-dl { display: grid; gap: 0; margin: 0 0 16px; }
.kn-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--kn-line); }
.kn-dl dt { font-size: 13.5px; color: var(--kn-sub); }
.kn-dl dd { margin: 0; font-size: 14.5px; color: var(--kn-text); overflow-wrap: anywhere; }

/* status badges: always text + colour */
.kn-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid #c9d1cc; background: #f4f6f4; color: #2d3b35; white-space: nowrap; }
.kn-c-active { background: #e4f2ea; border-color: #9cc9ae; color: #1d5b3a; }
.kn-c-pending { background: #fff4dc; border-color: #e3c37c; color: #6a4a08; }
.kn-c-cancelled, .kn-a-suspended { background: #fbe9e5; border-color: #e1a597; color: #8a2b17; }
.kn-c-none { background: #f1f2f4; border-color: #c8ccd3; color: #3b4250; }
.kn-a-active { background: #e8f0f7; border-color: #a8c0d6; color: #22476a; }
.kn-status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.kn-sub { display: block; font-size: 14px; font-weight: 500; color: var(--kn-sub); margin-top: 4px; }

/* member list */
.kn-filters { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-end; }
.kn-filters .kn-field { flex: 1 1 150px; }
.kn-filters .kn-grow { flex: 3 1 260px; }
.kn-filters .kn-actions { margin-top: 12px; }
.kn-result { font-size: 14px; color: var(--kn-text); margin: 16px 0 10px; }
.kn-table-wrap { overflow-x: auto; }
.kn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kn-table th { text-align: left; font-size: 12.5px; color: var(--kn-sub); font-weight: 600; background: #f5f7f8; padding: 10px; border-bottom: 1px solid var(--kn-line); white-space: nowrap; }
.kn-table td { padding: 12px 10px; border-bottom: 1px solid var(--kn-line); color: var(--kn-text); vertical-align: middle; }
.kn-break { overflow-wrap: anywhere; word-break: break-all; }
.kn-link { background: none; border: 0; padding: 0; color: var(--kn-accent); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 32px; }
.kn-history { list-style: none; margin: 0; padding: 0; }
.kn-history li { display: grid; grid-template-columns: 150px 140px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--kn-line); font-size: 14px; }
.kn-history time, .kn-by { color: var(--kn-sub); font-size: 13px; }
.kn-history p { margin: 0; }

/* avatars & profile */
.kn-avatar { display: inline-flex; flex: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; background: #dfe9e2; color: #234536; font-weight: 700; font-size: 14px; overflow: hidden; }
.kn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-avatar.lg { width: 96px; height: 96px; font-size: 34px; }
.kn-avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.profile-button .kn-avatar, .workspace-person .kn-avatar { width: 34px; height: 34px; }
.kn-profile { display: flex; gap: 22px; align-items: flex-start; }
.kn-profile h2 { margin: 4px 0; font-size: 22px; }
.kn-meta { color: var(--kn-sub); font-size: 14px; margin: 0 0 8px; }

/* emergency entry is visible on every user screen */
.kn-emergency { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c9553c; color: #8c2a14; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13.5px; font-weight: 700; min-height: 40px; cursor: pointer; }
.kn-emergency .icon { width: 16px; height: 16px; }
.kn-emergency-side { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid #e0b3a6; background: #fff7f4; color: #8c2a14; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 700; margin-bottom: 10px; cursor: pointer; }
.kn-top-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

@media (max-width: 760px) {
  .kn-split, .kn-grid2 { grid-template-columns: 1fr; }
  .kn-panel { padding: 16px; }
  .kn-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .kn-history li { grid-template-columns: 1fr; gap: 2px; }
  .kn-profile { flex-direction: column; gap: 12px; }
  .kn-table thead { display: none; }
  .kn-table, .kn-table tbody, .kn-table tr, .kn-table td { display: block; width: 100%; }
  .kn-table tr { border: 1px solid var(--kn-line); border-radius: 8px; margin-bottom: 10px; padding: 6px 12px; background: #fff; }
  .kn-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 6px 0; border: 0; }
  .kn-table td::before { content: attr(data-label); font-size: 12.5px; color: var(--kn-sub); }
  .kn-emergency span { display: none; }
  .kn-emergency { padding: 7px 9px; }
  .kn-top-btn { padding: 7px 10px; font-size: 13px; }
  .kn-filters .kn-field, .kn-filters .kn-grow { flex: 1 1 100%; }
}

/* demo bar: readable size, and the demo menu stays reachable on phones */
body .public-demo-bar, body .public-demo-bar p, body .public-demo-bar > span, body .public-demo-bar button { font-size: 12px; }
body .public-demo-bar > button[data-f="role-picker"] { display: inline-block; margin-left: auto; font-weight: 700; color: var(--kn-accent); }
body .public-demo-bar > button[data-action="about"] { margin-left: 0; }
.kn-top-btn, .mobilebrand { white-space: nowrap; }
@media (max-width: 760px) {
  body .toptools { gap: 6px; }
  body .kn-top-btn { padding: 6px 9px; font-size: 12.5px; min-height: 36px; }
  body .kn-emergency { min-height: 36px; }
  body .public-demo-bar > button[data-action="about"] { display: none; }
}

/* shops */
.kn-shop-filters { margin: 14px 0 0; padding: 16px 18px 18px; }
.kn-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kn-shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kn-line); border-radius: 10px; overflow: hidden; }
.kn-shop-open { display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; flex: 1; }
.kn-shop-open img { width: 100%; aspect-ratio: 400 / 220; object-fit: cover; display: block; background: #f3f0ea; }
.kn-shop-open:focus-visible { outline: 3px solid var(--kn-accent); outline-offset: -3px; }
.kn-shop-body { display: grid; gap: 6px; padding: 14px 16px 6px; }
.kn-shop-body strong { font-size: 17px; color: var(--kn-text); }
.kn-shop-meta { font-size: 13px; color: var(--kn-sub); font-weight: 600; }
.kn-shop-short { font-size: 14px; color: var(--kn-text); line-height: 1.7; }
.kn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-tags span { font-size: 12.5px; border: 1px solid #c9d6cd; background: #f2f7f3; color: #24503a; border-radius: 6px; padding: 2px 8px; }
.kn-shop-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px 14px; }
.kn-shop-detail { background: #fff; border: 1px solid var(--kn-line); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.kn-shop-hero { width: 100%; max-height: 320px; object-fit: cover; display: block; background: #f3f0ea; }
.kn-shop-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 20px 22px 0; }
.kn-shop-head h1 { font-size: 26px; margin: 4px 0 8px; color: var(--kn-text); }
.kn-shop-desc { padding: 0 22px; font-size: 15px; line-height: 1.85; color: var(--kn-text); }
.kn-shop-detail .kn-dl { padding: 0 22px; }
.kn-shop-detail .kn-notice { margin: 0 22px 22px; }
@media (max-width: 760px) {
  .kn-shop-grid { grid-template-columns: 1fr; }
  .kn-shop-head { flex-direction: column; padding: 16px 16px 0; }
  .kn-shop-desc, .kn-shop-detail .kn-dl { padding: 0 16px; }
  .kn-shop-detail .kn-notice { margin: 0 16px 16px; }
}
.kn-shop-head .save-button, .kn-shop-foot .save-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #b9c4bd; border-radius: 8px; padding: 8px 12px; min-height: 40px; background: #fff; color: var(--kn-text); font-size: 14px; font-weight: 600; }
.kn-shop-head .save-button.selected, .kn-shop-foot .save-button.selected { background: #fff4dc; border-color: #d9b45c; color: #5a3e05; }

/* profile icon & photos (sample images only) */
.kn-avatar.sm { width: 26px; height: 26px; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.kn-author { display: inline-flex; align-items: center; }
.message-author { display: flex; align-items: center; }
.kn-avatar-col { display: grid; gap: 10px; justify-items: center; flex: none; }
.kn-avatar-col .btn { font-size: 13px; min-height: 38px; padding: 6px 12px; }
.kn-photos { margin-top: 22px; border-top: 1px solid var(--kn-line); padding-top: 16px; }
.kn-photos-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn-photos-head h3 { margin: 0; font-size: 17px; }
.kn-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; max-width: 560px; }
.kn-photo { padding: 0; border: 0; background: #eee; aspect-ratio: 1; cursor: pointer; border-radius: 4px; overflow: hidden; }
.kn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-photo:focus-visible { outline: 3px solid var(--kn-accent); outline-offset: 2px; }
.kn-photo-large { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; background: #f3f3f3; }
.kn-photo-thumb { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; }
.kn-avatar-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.kn-avatar-option { display: grid; justify-items: center; gap: 6px; border: 2px solid var(--kn-line); border-radius: 10px; background: #fff; padding: 10px 6px; cursor: pointer; font-size: 13px; color: var(--kn-text); }
.kn-avatar-option img { width: 64px; height: 64px; border-radius: 50%; }
.kn-avatar-option.selected { border-color: var(--kn-accent); background: #f2f7f3; font-weight: 700; }
@media (max-width: 760px) {
  body[data-login="yes"] .profile-button { display: inline-flex; padding: 0; border: 0; background: none; }
  .kn-avatar-col { justify-items: start; }
}

/* staff: case page, notices, moderation */
.kn-case-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; margin-top: 10px; }
.kn-case-who p { font-size: 14.5px; margin: 4px 0 14px; }
.kn-thread { display: grid; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px 2px 10px; border-bottom: 1px solid var(--kn-line); margin-bottom: 8px; }
.kn-msg { border-radius: 10px; padding: 10px 14px; max-width: 88%; border: 1px solid var(--kn-line); }
.kn-msg.member { background: #f6f7f8; justify-self: start; }
.kn-msg.staff { background: #eaf2fa; border-color: #c3d6ea; justify-self: end; }
.kn-msg small { display: block; font-size: 12.5px; color: var(--kn-sub); margin-bottom: 4px; }
.kn-msg p { margin: 0; font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.kn-case-side .kn-form + .kn-form { margin-top: 20px; border-top: 1px solid var(--kn-line); padding-top: 14px; }
.kn-case-side textarea { width: 100%; min-height: 90px; font-size: 15px; }
.kn-notes { margin-top: 10px; display: grid; gap: 8px; }
.kn-notice-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kn-line); flex-wrap: wrap; }
.kn-notice-row h3 { font-size: 16px; margin: 6px 0 2px; }
.kn-report .kn-history { margin-top: 8px; }
/* member chat */
.kn-chat-guide { margin-bottom: 12px; }
.kn-chat-guide .kn-dl > div { grid-template-columns: 120px minmax(0, 1fr); padding: 8px 0; }
.kn-case-banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 16px; background: #f4f8f5; border-bottom: 1px solid var(--kn-line); font-size: 14px; color: var(--kn-text); }
.kn-case-sep { text-align: center; font-size: 12.5px; color: var(--kn-sub); margin: 14px 0 6px; padding: 4px 10px; border-top: 1px dashed #c9d2cc; }
.suggestions button { white-space: normal; text-align: left; }
@media (max-width: 900px) { .kn-case-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .kn-chat-guide .kn-dl > div { grid-template-columns: 1fr; } .kn-msg { max-width: 100%; } }

/* readable minimum text size (older layers used 8–11px in many places) */
body :is(.nav-group-title, .workspace-name, .switch-role-link, .breadcrumb, .breadcrumb *, .footer, .footer button, .footer span, .pill, .meta-line, .posttag, .eyebrow, .status, .count-label, .role-label, .case-badge, .metric-link, .unassigned, .update-meta, .update-meta span, .update-state, .chat-date, .msg small, .join-button, .save-button span, .nav-number, .notification-count, .checklist-foot, .journey-tabs small, .journey-tabs span, .progressline span, .profile-button small, .case-subject small, .panel-foot, .panel-foot span, .case-result-count span, .textbtn, small, .sr-only) { font-size: 12.5px; }
body :is(.muted, .card p, .guest-free-card p, .locked-feature p, .helpbox p, .community-callout p, .guest-hero p, .guest-help p, .privacy-note, .privacy-note span, .support-foot, .support-foot span, .guest-readonly, .guest-readonly button, .postactions button, .suggestions button, .case-table th, .case-table td, .role-sidebar nav button span) { font-size: 13.5px; }
body .notification-count, body .nav-number { min-width: 18px; height: 18px; line-height: 18px; }
@media (max-width: 760px) {
  body .role-mobile-nav button span { font-size: 12px; white-space: nowrap; }
  body .role-mobile-nav .nav-lock { display: none; }
}
body button.mobilebrand { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.kn-chat-guide summary { cursor: pointer; min-height: 32px; }
.kn-chat-guide[open] summary { margin-bottom: 8px; }
/* calmer guest hero: plain heading instead of a poster-sized one */
body .guest-hero { padding: 26px 28px; min-height: 0; }
body .guest-hero h2 { font-size: 24px; line-height: 1.5; margin: 12px 0; }
body .guest-hero p { color: var(--kn-text); }
@media (max-width: 760px) { body .guest-hero { padding: 20px; } body .guest-hero h2 { font-size: 20px; } }
.kn-policy ul { margin: 6px 0 14px; padding-left: 1.3em; line-height: 1.9; font-size: 14.5px; }
.kn-policy h2 { margin-top: 18px; }
.kn-notice .textbtn { margin-left: 6px; }
.kn-a-withdrawn { background: #ececec; border-color: #b9b9b9; color: #3d3d3d; }
.kn-withdraw { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--kn-line); }

/* shop listing details (tabelog-like structure, own design) */
.kn-shop-vi { font-size: 13.5px; color: var(--kn-sub); margin: 0; }
.kn-rating { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--kn-text); }
.kn-rating > span[aria-hidden] { color: #c9821c; letter-spacing: 1px; }
.kn-shop-budget { font-size: 13.5px; color: var(--kn-text); }
.kn-tags .kn-tag-coupon { background: #fff4dc; border-color: #e3c37c; color: #5a3e05; }
.kn-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-top: 12px; flex: 1 1 100%; }
.kn-checks .kn-check { margin: 0; }
.kn-shop-tabs { margin: 16px 22px 0; }
.kn-shop-section { padding: 6px 22px 10px; }
.kn-shop-keyinfo { margin-top: 14px; }
.kn-shop-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.kn-shop-photo { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #eee; }
.kn-shop-photo img { width: 100%; aspect-ratio: 400 / 260; object-fit: cover; display: block; }
.kn-shop-photo span { position: absolute; left: 6px; bottom: 6px; background: #fffffff0; color: var(--kn-text); font-size: 12.5px; padding: 2px 8px; border-radius: 4px; }
.kn-coupon { border: 2px dashed #d9b45c; background: #fffaf0; border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.kn-coupon.none { border-color: var(--kn-line); background: #f7f7f7; }
.kn-coupon-title { font-size: 18px; font-weight: 700; margin: 4px 0; color: var(--kn-text); }
.kn-rating-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.kn-rating-big > span[aria-hidden] { color: #c9821c; font-size: 22px; }
.kn-rating-big strong { font-size: 28px; }
.kn-review { border-bottom: 1px solid var(--kn-line); padding: 12px 0; }
.kn-review > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kn-review p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.8; }
.kn-menu .kn-badge { margin-left: 8px; }
.kn-shop-foot-note { margin: 0 22px 22px; }
@media (max-width: 760px) {
  .kn-shop-tabs { margin: 12px 16px 0; }
  .kn-shop-section { padding: 6px 16px 10px; }
  .kn-shop-photos { grid-template-columns: 1fr 1fr; }
  .kn-shop-foot-note { margin: 0 16px 16px; }
}
body .kn-shop-section .kn-shop-desc, body .kn-shop-section .kn-dl { padding: 0; }
.kn-upload .btn { cursor: pointer; }
.kn-upload input[type=file] { display: none; }
.kn-warn { color: #8a2b17; }
.kn-id-cell { display: inline-flex; align-items: center; gap: 6px; }

/* ===== v10 consistency layer: one size per component type (forms, buttons, tabs, cards) =====
   Selectors use body:is([data-role]) so they win over the older role-specific layers. */
body { --kn-control-h: 46px; --kn-btn-h: 46px; --kn-top-btn-h: 40px; --kn-radius: 8px; --kn-label-gap: 6px; --kn-field-gap: 14px; --kn-card-pad: 20px; }
@media (max-width: 760px) { body { --kn-card-pad: 16px; } }

/* inputs & selects: same height, font, border everywhere (16px avoids zoom on iPhone) */
body:is([data-role]) :is(main, .modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select) {
  box-sizing: border-box; height: var(--kn-control-h); min-height: var(--kn-control-h); padding: 0 12px; margin: 0; font-size: 16px; line-height: 1.2;
  border: 1px solid #b9c4bd; border-radius: var(--kn-radius); background-color: #fff; color: var(--kn-text); max-width: 100%;
}
body:is([data-role]) :is(main, .modal) textarea { box-sizing: border-box; min-height: 110px; padding: 10px 12px; margin: 0; font-size: 16px; line-height: 1.6; border: 1px solid #b9c4bd; border-radius: var(--kn-radius); width: 100%; max-width: 100%; }
body:is([data-role]) :is(main, .modal) :is(input, select, textarea):focus-visible { outline: 3px solid #7aa7d8; outline-offset: 1px; }

/* labels, hints and errors: one rhythm */
body:is([data-role]) :is(main, .modal) form label:not(.kn-check):not(.checkrow):not(.attach-label):not(.photo-chat):not(.btn),
body:is([data-role]) .kn-field > label, body:is([data-role]) .kn-labeltext {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--kn-text); margin: var(--kn-field-gap) 0 var(--kn-label-gap); padding: 0; background: none; border: 0; letter-spacing: 0;
}
body:is([data-role]) .kn-field { margin-top: var(--kn-field-gap); }
body:is([data-role]) .kn-field > label { margin-top: 0; }
body:is([data-role]) .kn-hint { margin: var(--kn-label-gap) 0 0; }
body:is([data-role]) .kn-error { margin: var(--kn-label-gap) 0 0; }
body:is([data-role]) .kn-grid2 { align-items: start; }

/* buttons: primary / secondary / danger share size, corner and type size */
body:is([data-role]) :is(main, .modal) .btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--kn-btn-h); height: auto; padding: 0 18px; margin: 0; border-radius: var(--kn-radius);
  font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; max-width: 100%; text-decoration: none;
}
body:is([data-role]) :is(main, .modal) .btn.full { width: 100%; }
body:is([data-role]) :is(main, .modal) .btn .icon { width: 18px; height: 18px; flex: none; }
body:is([data-role]) .toptools .btn.kn-top-btn { min-height: var(--kn-top-btn-h); padding: 0 14px; font-size: 14px; }
body:is([data-role]) :is(main, .modal) form:not(.inline-search):not(#feature-chat) > .btn[type=submit], body:is([data-role]) .kn-form > .btn { margin-top: 18px; }
body:is([data-role]) .kn-actions, body:is([data-role]) .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body:is([data-role]) .kn-actions .btn, body:is([data-role]) .modal-actions .btn { margin-top: 0; }
body:is([data-role]) .kn-avatar-col .btn { min-height: var(--kn-btn-h); font-size: 14px; padding: 0 18px; }
@media (max-width: 760px) {
  body:is([data-role]) :is(main, .modal) .btn { padding: 0 14px; }
  body:is([data-role]) .toptools .btn.kn-top-btn { padding: 0 10px; font-size: 13px; }
}

/* search bars and filter rows: input and button side by side at the same height */
body:is([data-role]) .inline-search { display: flex; gap: 8px; align-items: stretch; }
body:is([data-role]) .inline-search input { flex: 1; min-width: 0; font-size: 16px; }
body:is([data-role]) .inline-search .btn { min-height: var(--kn-control-h); margin: 0; padding: 0 14px; }
body:is([data-role]) .kn-filters { align-items: flex-end; gap: 0 14px; }
body:is([data-role]) .kn-filters .kn-actions { margin-top: var(--kn-field-gap); }
body:is([data-role]) .kn-filters .kn-actions .btn { margin-top: 0; }

/* tabs: one look for my page, member ledger, shop detail and the case list filters */
body:is([data-role]) :is(.kn-tabs, .case-tabs) { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--kn-line); margin: 8px 0 16px; padding: 0; scrollbar-width: thin; }
body:is([data-role]) :is(.kn-tabs, .case-tabs) button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; margin: 0 0 -1px; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--kn-sub); white-space: nowrap; cursor: pointer; }
body:is([data-role]) :is(.kn-tabs, .case-tabs) button.active { color: var(--kn-text); font-weight: 700; border-bottom-color: var(--kn-accent); }
body:is([data-role]) .case-tabs button span { font-size: 12.5px; min-width: 22px; padding: 1px 6px; border-radius: 4px; background: #f0f3f5; }
body:is([data-role]) .kn-shop-tabs { margin: 16px 22px 0; }
@media (max-width: 760px) { body:is([data-role]) .kn-shop-tabs { margin: 12px 16px 0; } }

/* cards, lists, tables: same padding; side-by-side cards keep their action at the bottom */
body:is([data-role]) main .card, body:is([data-role]) main .kn-panel { padding: var(--kn-card-pad); }
body:is([data-role]) main :is(.grid2, .kn-shop-grid, .guest-free-grid, .locked-feature-grid) { align-items: stretch; }
body:is([data-role]) main .grid2 > .card { display: flex; flex-direction: column; }
body:is([data-role]) main .grid2 > .card > :is(.btn, a.btn, .textbtn):last-child, body:is([data-role]) main .grid2 > .card > .row:last-child { margin-top: auto; }
body:is([data-role]) main .grid2 > .card > :is(.btn, a.btn):last-child { align-self: flex-start; }
body:is([data-role]) main .grid2 > .card.coupon > .btn:last-child { align-self: stretch; }
body:is([data-role]) :is(.history-row, .kn-notice-row, .admin-item) { padding: 12px 0; }
body:is([data-role]) .kn-table td, body:is([data-role]) .kn-table th { padding: 12px 10px; }

/* chat input row: photo button, text field and send button on one line */
body:is([data-role]) .chatinput { display: flex; align-items: center; gap: 8px; }
body:is([data-role]) .chatinput input { flex: 1; }
body:is([data-role]) .chatinput .btn { margin: 0; min-width: var(--kn-btn-h); padding: 0 12px; }
body:is([data-role]) .kn-form { gap: 0; }
/* v10 visual review fixes */
body:is([data-role]) .case-management > .kn-note { padding: 0 var(--kn-card-pad); margin: 8px 0 12px; }
body:is([data-role]) :is(.kn-note, .kn-hint, p) > .textbtn { display: inline; padding: 0; min-height: 0; vertical-align: baseline; }
body:is([data-role]) .kn-form > :first-child, body:is([data-role]) .kn-form > :first-child > .kn-field:first-child, body:is([data-role]) .kn-form > .kn-grid2:first-child > .kn-field { margin-top: 0; }
body:is([data-role]) .esimcard .muted { font-size: 13px; }
body:is([data-role]) main .grid2 > .card > :is(.pill, .iconbox, .eyebrow, .status) { align-self: flex-start; }