/*
 * KM5 modern theme layer (2026-09)
 * Loaded after css_data1/2/3.php. It only restyles shape, spacing, depth and neutral
 * colours; the colours each user picks in the colour settings page (cssstyle_*) still win because
 * --km-primary is printed from cssstyle_25 in head.php.
 */

:root {
  --km-font: "Kanit"; /* site font, overridden by head.php from setup.php?p=home */
  --km-primary: #2563eb;
  --km-primary-soft: rgba(37, 99, 235, .10);
  --km-primary-ring: rgba(37, 99, 235, .22);
  --km-bg: #f3f5f9;
  --km-surface: #ffffff;
  --km-surface-2: #f8fafc;
  --km-border: #e4e7ec;
  --km-border-strong: #cfd4dc;
  --km-text: #1d2433;
  --km-muted: #667085;
  --km-success: #12b76a;
  --km-danger: #f04438;
  --km-warning: #f79009;
  --km-radius: 14px;
  --km-radius-sm: 10px;
  --km-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --km-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --km-shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);
  --km-ease: cubic-bezier(.2, .8, .2, 1);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --km-primary-soft: color-mix(in srgb, var(--km-primary) 10%, transparent);
    --km-primary-ring: color-mix(in srgb, var(--km-primary) 25%, transparent);
  }
}

/* ---------- base ---------- */
html, body {
  font-family: var(--km-font, "Kanit"), "Saysettha OT", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
  font-weight: 300;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
b, strong, th, label, .box-title, h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1, h2, h3, h4 { letter-spacing: -.01em; }
::selection { background: var(--km-primary-ring); }

.content-wrapper, .right-side { background-color: var(--km-bg); }
.content { padding: 20px 15px; }
.content img, .box-body img { max-width: 100%; }
.content img[height], .box-body img[height] { height: auto; }

a, .btn, .form-control, .box, .nav > li > a, .km-card {
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .2s var(--km-ease), transform .2s var(--km-ease);
}
:focus-visible { outline: 2px solid var(--km-primary); outline-offset: 2px; }
a:focus { outline: none; }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3c9d4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c9d4; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- top navbar ---------- */
.main-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 4px 18px rgba(16, 24, 40, .08); position: relative; z-index: 1030; }
.main-header .navbar { border: 0; min-height: 56px; }
.main-header .navbar .nav > li > a {
  font-weight: 400;
  padding-top: 18px; padding-bottom: 18px;
}
@media (min-width: 768px) {
  .main-header .navbar .navbar-nav > li > a { padding: 8px 14px; margin: 10px 2px; border-radius: 999px; }
  .main-header .navbar .navbar-custom-menu .navbar-nav > li > a { padding-top: 8px; padding-bottom: 8px; }
  .main-header .navbar .navbar-nav > li.bg-black > a,
  .main-header .navbar .navbar-nav > li.bg-black { background: transparent !important; }
  .main-header .navbar .navbar-nav > li.bg-black > a { background: rgba(0, 0, 0, .22) !important; }
}
.main-header .navbar .navbar-toggle { border-radius: 10px; margin-top: 9px; }
.main-header .user-image { border-radius: 50%; object-fit: cover; }
.navbar-nav > .user-menu > .dropdown-menu { border-radius: var(--km-radius); overflow: hidden; }

/* dropdowns */
.dropdown-menu {
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-sm);
  box-shadow: var(--km-shadow-lg);
  padding: 6px;
}
.dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; }
.dropdown-menu > li > a:hover { background: var(--km-primary-soft); }
.dropdown-menu .divider { margin: 6px 0; }

/* ---------- boxes / cards ---------- */
.box {
  border: 1px solid var(--km-border);
  border-top: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow);
  margin-bottom: 22px;
}
.box.box-solid { border: 1px solid var(--km-border); }
.box > .box-header { padding: 14px 18px; border-radius: var(--km-radius) var(--km-radius) 0 0; }
.box > .box-header.with-border { border-bottom: 1px solid var(--km-border); }
.box > .box-header > .box-title { font-size: 17px; }
.box > .box-header > .box-title > .fa { color: var(--km-primary); margin-right: 4px; }
.box > .box-body { padding: 18px; }
.box > .box-footer { border-radius: 0 0 var(--km-radius) var(--km-radius); background: var(--km-surface-2); }
.box .btn-box-tool { border-radius: 8px; }
.box .btn-box-tool:hover { background: var(--km-primary-soft); }
/* collapse button: CSS chevron (up = open, rotates down when folded) on a soft round chip that also reads over header images */
.box .btn-box-tool[data-widget="collapse"] {
  position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(16, 24, 40, .08);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--km-muted); transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.box .btn-box-tool[data-widget="collapse"] > .fa { display: none; }
.box .btn-box-tool[data-widget="collapse"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -2px 0 0 -4px; border: solid currentColor; border-width: 2px 0 0 2px; border-radius: 1px;
  transform: rotate(45deg); transition: transform .25s ease, margin .25s ease;
}
.box .btn-box-tool[data-widget="collapse"]:hover { background: #fff; color: var(--km-primary); box-shadow: 0 2px 8px rgba(16, 24, 40, .16); }
.box .btn-box-tool[data-widget="collapse"]:active { transform: scale(.92); }
.box .btn-box-tool[data-widget="collapse"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--km-primary-ring); }
.box.km-folded .btn-box-tool[data-widget="collapse"]::before { transform: rotate(225deg); margin-top: -6px; }

.panel { border-radius: var(--km-radius); box-shadow: var(--km-shadow); border-color: var(--km-border); }
.panel > .panel-heading { border-radius: var(--km-radius) var(--km-radius) 0 0; }
.well { border-radius: var(--km-radius); box-shadow: none; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--km-radius-sm);
  font-weight: 400;
  padding: 7px 16px;
  box-shadow: var(--km-shadow-sm);
}
.btn-sm, .btn-group-sm > .btn { border-radius: 8px; padding: 5px 11px; }
.btn-xs { border-radius: 6px; }
.btn-lg { border-radius: 12px; padding: 11px 22px; }
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn.active { transform: translateY(0); box-shadow: none; }
.btn-default { background: var(--km-surface); border-color: var(--km-border-strong); color: var(--km-text); }
.btn-default:hover { background: var(--km-surface-2); border-color: #b6bdc9; }
.btn-primary { border-color: transparent; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-flat { border-radius: var(--km-radius-sm); }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- forms ---------- */
.form-control, .form-control-mini, select.input, input.input, textarea.input {
  border-radius: var(--km-radius-sm);
  border: 1px solid var(--km-border-strong);
  box-shadow: none;
}
.form-control { height: 40px; padding: 8px 12px; }
textarea.form-control { height: auto; }
.form-control-mini { padding: 6px 10px; min-height: 36px; background: #fff; }
.form-control:focus, .form-control-mini:focus, input.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--km-primary) !important;
  box-shadow: 0 0 0 4px var(--km-primary-ring) !important;
  outline: none;
}
.input-group .form-control:first-child, .input-group-addon:first-child { border-radius: var(--km-radius-sm) 0 0 var(--km-radius-sm); }
.input-group .form-control:last-child, .input-group-addon:last-child { border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0; }
.input-group-addon { background: var(--km-surface-2); border-color: var(--km-border-strong); }

/* ---------- tables ---------- */
.table > thead > tr > th { background: var(--km-surface-2); color: var(--km-muted); font-size: 13px; text-transform: none; border-bottom: 1px solid var(--km-border); }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tr > td { border-top: 1px solid #eef0f4; vertical-align: middle; padding: 10px 12px; }
.table-responsive { border: 0; }

/* ---------- misc components ---------- */
.label, .badge { border-radius: 999px; font-weight: 500; padding: .3em .7em; }
.progress { border-radius: 999px; background: #eaecf0; box-shadow: none; height: 10px; overflow: hidden; }
.progress-bar { border-radius: 999px; box-shadow: none; }
.alert { border-radius: var(--km-radius); border: 0; box-shadow: var(--km-shadow-sm); }
.pagination > li > a, .pagination > li > span { border-radius: 8px !important; margin: 0 2px; border-color: var(--km-border); }
.pagination > .active > a, .pagination > .active > span { background: var(--km-primary); border-color: var(--km-primary); }
.nav-tabs > li > a { border-radius: 10px 10px 0 0; }
.nav-pills > li > a { border-radius: 999px; }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--km-shadow-lg); overflow: hidden; }
.modal-header { border-bottom-color: var(--km-border); padding: 16px 20px; }
.modal-footer { border-top-color: var(--km-border); background: var(--km-surface-2); }
.modal-backdrop.in { opacity: .45; }
.tooltip-inner { border-radius: 8px; padding: 6px 10px; }
.img-thumbnail { border-radius: var(--km-radius-sm); }
hr { border-color: var(--km-border); }

/* colorbox (popup windows such as the file manager) */
#cboxOverlay { background: #0f172a; opacity: .55 !important; }
#cboxWrapper, #cboxContent, #cboxLoadedContent { border-radius: 16px; }
#cboxContent { box-shadow: var(--km-shadow-lg); overflow: hidden; }

/* ---------- footer ---------- */
.main-footer { border-top: 1px solid var(--km-border); font-size: 13px; color: var(--km-muted); }

/* ================================================================
 * Shared UI kit for new screens (prefix km-)
 * ================================================================ */
.km-page { max-width: 1200px; margin: 0 auto; }
.km-card {
  background: var(--km-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow);
  margin-bottom: 20px;
}
.km-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--km-border); flex-wrap: wrap; }
.km-card-head h3 { margin: 0; font-size: 18px; flex: 1 1 auto; }
.km-card-head h3 .fa { color: var(--km-primary); margin-right: 6px; }
.km-card-body { padding: 20px; }
.km-muted { color: var(--km-muted); }
.km-hint { color: var(--km-muted); font-size: 13px; }
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.km-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--km-muted); cursor: pointer; padding: 0;
}
.km-btn-icon:hover { background: var(--km-primary-soft); color: var(--km-primary); }
.km-btn-icon.is-danger:hover { background: rgba(240, 68, 56, .1); color: var(--km-danger); }

.km-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--km-surface-2); border: 1px solid var(--km-border); font-size: 12px; color: var(--km-muted); }

.km-seg { display: inline-flex; background: var(--km-surface-2); border: 1px solid var(--km-border); border-radius: 12px; padding: 3px; }
.km-seg button, .km-seg a { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; color: var(--km-muted); font: inherit; cursor: pointer; text-decoration: none !important; }
.km-seg .is-active { background: var(--km-surface); color: var(--km-text); box-shadow: var(--km-shadow-sm); }

/* toasts */
.km-toasts { position: fixed; z-index: 20000; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); pointer-events: none; }
.km-toast {
  pointer-events: auto; min-width: 240px; max-width: 380px;
  display: flex; align-items: flex-start; gap: 10px;
  background: #111827; color: #f9fafb; border-radius: 12px; padding: 12px 14px;
  box-shadow: var(--km-shadow-lg); font-size: 14px;
  animation: km-toast-in .25s var(--km-ease);
}
.km-toast .fa { margin-top: 3px; }
.km-toast.is-success .fa { color: #6ce9a6; }
.km-toast.is-error .fa { color: #fda29b; }
.km-toast.is-leaving { animation: km-toast-out .2s ease forwards; }
@keyframes km-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes km-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- file manager ---------- */
body.km-fm-body { background: var(--km-bg); }
.km-fm { padding: 18px; max-width: 1100px; margin: 0 auto; }
.km-fm-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
@media (max-width: 767px) { .km-fm-top { grid-template-columns: 1fr; } .km-fm { padding: 10px; } }

.km-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 190px; padding: 26px; border: 2px dashed var(--km-border-strong); border-radius: 18px;
  background: var(--km-surface); cursor: pointer; outline: none;
}
.km-drop:hover, .km-drop:focus-visible { border-color: var(--km-primary); background: var(--km-primary-soft); }
.km-drop.is-over { border-color: var(--km-primary); background: var(--km-primary-soft); transform: scale(1.01); box-shadow: 0 0 0 6px var(--km-primary-ring); }
.km-drop-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--km-primary-soft); color: var(--km-primary); font-size: 26px; margin-bottom: 10px; }
.km-drop h4 { margin: 0 0 4px; font-size: 18px; }
.km-drop p { margin: 0; color: var(--km-muted); }
.km-drop .km-link { color: var(--km-primary); text-decoration: underline; }
.km-drop-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.km-quota { padding: 18px; }
.km-quota-num { font-size: 26px; font-weight: 500; line-height: 1.2; }
.km-quota .progress { height: 10px; margin: 12px 0 8px; }
.km-quota .progress-bar { background: var(--km-primary); transition: width .6s var(--km-ease); }
.km-quota.is-high .progress-bar { background: var(--km-warning); }
.km-quota.is-full .progress-bar { background: var(--km-danger); }

.km-queue { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.km-q-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 12px; padding: 10px 12px; }
.km-q-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--km-surface-2) center/cover no-repeat; display: grid; place-items: center; color: var(--km-muted); font-size: 18px; overflow: hidden; }
.km-q-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.km-q-sub { font-size: 12px; color: var(--km-muted); }
.km-q-bar { height: 5px; background: #eaecf0; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.km-q-bar > i { display: block; height: 100%; width: 0; background: var(--km-primary); border-radius: 99px; transition: width .2s linear; }
.km-q-item.is-done .km-q-bar > i { background: var(--km-success); }
.km-q-item.is-error { border-color: rgba(240, 68, 56, .35); background: #fffafa; }
.km-q-item.is-error .km-q-sub { color: var(--km-danger); }
.km-q-item.is-error .km-q-bar { display: none; }
.km-q-state { font-size: 18px; width: 34px; text-align: center; }
.km-q-item.is-done .km-q-state { color: var(--km-success); }
.km-q-item.is-error .km-q-state { color: var(--km-danger); }

.km-fm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 12px; }
.km-fm-toolbar .km-search { flex: 1 1 220px; position: relative; }
.km-fm-toolbar .km-search .fa { position: absolute; left: 13px; top: 12px; color: var(--km-muted); }
.km-fm-toolbar .km-search input { padding-left: 36px; }
.km-selbar { display: none; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #111827; color: #fff; margin-bottom: 12px; }
.km-selbar.is-on { display: flex; }
.km-selbar .btn { box-shadow: none; }

.km-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.km-file {
  position: relative; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--km-shadow-sm); display: flex; flex-direction: column;
}
.km-file:hover { box-shadow: var(--km-shadow); transform: translateY(-2px); }
.km-file.is-selected { border-color: var(--km-primary); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-file-prev { position: relative; aspect-ratio: 4 / 3; background: var(--km-surface-2); display: grid; place-items: center; overflow: hidden; }
.km-file-prev img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.km-file-ext { font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 10px 12px; border-radius: 10px; color: #fff; background: #98a2b3; text-transform: uppercase; }
.km-file-ext.t-pdf { background: #d92d20; } .km-file-ext.t-doc { background: #1570ef; } .km-file-ext.t-xls { background: #079455; }
.km-file-ext.t-ppt { background: #e04f16; } .km-file-ext.t-zip { background: #6941c6; } .km-file-ext.t-media { background: #0e9384; }
.km-file-check { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .92); border: 1px solid var(--km-border-strong); display: grid; place-items: center; cursor: pointer; color: transparent; z-index: 2; }
.km-file.is-selected .km-file-check { background: var(--km-primary); border-color: var(--km-primary); color: #fff; }
.km-file-body { padding: 10px 12px 6px; flex: 1 1 auto; min-width: 0; }
.km-file-name { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--km-text) !important; text-decoration: none !important; }
.km-file-meta { font-size: 12px; color: var(--km-muted); }
.km-file-actions { display: flex; gap: 2px; padding: 4px 6px 8px; border-top: 1px solid #f0f2f5; }
.km-file-actions .km-btn-icon { width: 30px; height: 30px; font-size: 14px; }
.km-file-actions .km-grow { flex: 1; }

.km-files.is-list { grid-template-columns: 1fr; gap: 8px; }
.km-files.is-list .km-file { flex-direction: row; align-items: center; }
.km-files.is-list .km-file-prev { width: 64px; height: 52px; aspect-ratio: auto; flex: 0 0 64px; margin: 6px 0 6px 40px; border-radius: 8px; }
.km-files.is-list .km-file-ext { font-size: 10px; padding: 5px 6px; }
.km-files.is-list .km-file-check { top: 50%; margin-top: -12px; }
.km-files.is-list .km-file-actions { border-top: 0; padding: 0 8px; }
.km-files.is-list .km-file:hover { transform: none; }

.km-empty { text-align: center; padding: 50px 20px; color: var(--km-muted); border: 1px dashed var(--km-border-strong); border-radius: 16px; background: var(--km-surface); }
.km-empty .fa { font-size: 38px; opacity: .5; display: block; margin-bottom: 10px; }
.km-skel { background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 50%, #eef0f4 100%); background-size: 200% 100%; animation: km-skel 1.2s infinite; border-radius: 14px; height: 210px; }
@keyframes km-skel { to { background-position: -200% 0; } }
.km-more { text-align: center; margin: 18px 0 6px; }

/* ---------- drag & drop layout builder ---------- */
.km-lb { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-lb { grid-template-columns: 1fr; } }
.km-lb-page { background: var(--km-surface-2); border: 1px solid var(--km-border); border-radius: 18px; padding: 14px; }
.km-lb-browser { display: flex; gap: 6px; margin: -2px 0 12px 2px; }
.km-lb-browser i { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; display: block; }
.km-lb-row { display: flex; gap: 12px; margin-bottom: 12px; }
.km-lb-row:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .km-lb-row { flex-direction: column; } .km-lb-col { flex-basis: auto !important; } }
.km-lb-col { min-width: 0; display: flex; flex-direction: column; }
.km-lb-col.is-empty-width { display: none; }
.km-lb-zone-title { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--km-muted); margin: 0 4px 6px; }
.km-lb-zone {
  flex: 1 1 auto; min-height: 92px; padding: 8px; border-radius: 14px; border: 2px dashed var(--km-border-strong);
  background: var(--km-surface); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.km-lb-zone.is-top { flex-direction: row; flex-wrap: wrap; min-height: 64px; }
.km-lb-zone.is-top .km-mod { flex: 1 1 200px; }
.km-lb-zone:empty::after { content: attr(data-empty); margin: auto; color: #98a2b3; font-size: 13px; text-align: center; padding: 10px; }
body.km-dragging .km-lb-zone.can-drop { border-color: var(--km-primary); background: var(--km-primary-soft); }
body.km-dragging .km-lb-zone.no-drop { opacity: .45; }
body.km-dragging .km-lb-palette-list.can-drop { border-color: var(--km-danger); background: rgba(240, 68, 56, .06); }

.km-mod {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px;
  background: var(--km-surface); border: 1px solid var(--km-border); box-shadow: var(--km-shadow-sm);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; min-width: 0;
}
.km-mod:hover { border-color: var(--km-primary); box-shadow: var(--km-shadow); }
.km-mod:active { cursor: grabbing; }
.km-mod-grip { color: #98a2b3; font-size: 13px; flex: 0 0 auto; }
.km-mod-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--km-primary-soft); color: var(--km-primary); flex: 0 0 auto; }
.km-mod-txt { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.km-mod-name { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.km-mod-sub { display: block; font-size: 11.5px; color: var(--km-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-mod .km-btn-icon { width: 28px; height: 28px; flex: 0 0 auto; opacity: .0; }
.km-mod:hover .km-btn-icon, .km-mod:focus-within .km-btn-icon { opacity: 1; }
@media (hover: none) { .km-mod .km-btn-icon { opacity: 1; } }
.km-mod.sortable-ghost { opacity: .35; border-style: dashed; }
.km-mod.sortable-chosen { box-shadow: var(--km-shadow-lg); border-color: var(--km-primary); }
.km-mod.sortable-drag { transform: rotate(1.5deg); }
.km-mod.is-flash { animation: km-flash 1s ease; }
@keyframes km-flash { 0% { box-shadow: 0 0 0 0 var(--km-primary-ring); } 30% { box-shadow: 0 0 0 6px var(--km-primary-ring); } 100% { box-shadow: var(--km-shadow-sm); } }

.km-lb-palette { position: sticky; top: 12px; }
.km-lb-palette .km-card-body { padding: 14px; }
.km-lb-palette-list { display: flex; flex-direction: column; gap: 8px; min-height: 80px; max-height: 60vh; overflow-y: auto; padding: 4px; border-radius: 12px; border: 2px dashed transparent; }
.km-lb-palette-list:empty::after { content: attr(data-empty); color: #98a2b3; font-size: 13px; text-align: center; padding: 18px 6px; }
.km-lb-palette .km-mod .km-btn-icon { display: none; }
.km-lb-palette .km-mod.is-disabled { opacity: .5; }
.km-lb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--km-muted); }
.km-lb-status.is-saving .fa { color: var(--km-primary); }
.km-lb-status.is-saved .fa { color: var(--km-success); }
.km-lb-status.is-error .fa { color: var(--km-danger); }
.km-lb-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.km-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.km-preset { display: block; text-align: center; padding: 16px; border: 1px solid var(--km-border); border-radius: 14px; background: var(--km-surface); color: var(--km-text) !important; text-decoration: none !important; }
.km-preset:hover { border-color: var(--km-primary); box-shadow: var(--km-shadow); transform: translateY(-2px); }
.km-preset img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

/* ---------- personal dashboard ---------- */
.km-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.km-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--km-surface); border: 1px solid var(--km-border); box-shadow: var(--km-shadow-sm); color: var(--km-text) !important; text-decoration: none !important; }
.km-tile:hover { border-color: var(--km-primary); box-shadow: var(--km-shadow); transform: translateY(-2px); }
.km-tile-ico { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: var(--km-primary-soft); color: var(--km-primary); }
.km-tile h4 { margin: 2px 0 4px; font-size: 16px; }
.km-tile p { margin: 0; font-size: 13px; color: var(--km-muted); line-height: 1.5; }
.km-dash-section { font-size: 13px; color: var(--km-muted); margin: 22px 2px 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.km-dash-section:first-child { margin-top: 0; }

/* ---------- dashboard tile hover animations (personal_home.php) ---------- */
.km-tile { position: relative; overflow: hidden; isolation: isolate; transition: border-color .2s, box-shadow .25s var(--km-ease), transform .25s var(--km-ease); animation: kmTileIn .5s var(--km-ease) backwards; }
.km-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -12px var(--km-primary-ring), var(--km-shadow); }
.km-tile-txt { position: relative; z-index: 1; }
.km-tile h4 { transition: color .2s; }
.km-tile:hover h4 { color: var(--km-primary); }

/* light sweep across the card */
.km-tile::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.km-tile:hover::before { animation: kmTileShine .8s ease-out; }

/* big faint icon that floats in at the bottom-right corner */
.km-tile-bg {
  position: absolute; right: -14px; bottom: -22px; z-index: 0; font-size: 92px !important; line-height: 1;
  color: var(--km-primary); opacity: 0; pointer-events: none;
  transform: translate(24px, 24px) rotate(-25deg) scale(.6);
  transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.km-tile:hover .km-tile-bg { opacity: .07; transform: translate(0, 0) rotate(-12deg) scale(1); }
/* cartoon watermark (svg from assets/km-tile-art.svg): own colours, so it needs more opacity than the flat glyph */
.km-tile-art { width: 100px; height: 100px; right: -12px; bottom: -18px; overflow: visible; }
.km-tile:hover .km-tile-art { opacity: .4; }

/* icon box: fills with the theme colour + ripple ring */
.km-tile-ico { position: relative; z-index: 1; transition: background .25s, color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.km-tile-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--km-primary); opacity: 0;
}
.km-tile:hover .km-tile-ico { background: var(--km-primary); color: #fff; transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 18px -6px var(--km-primary); }
.km-tile:hover .km-tile-ico::after { animation: kmTileRing 1.2s ease-out infinite; }
.km-tile-ico > .fa { display: inline-block; transform-origin: 50% 50%; }

/* per-icon motion (default: gentle bounce) */
.km-tile:hover .km-tile-ico > .fa { animation: kmIcoBounce .9s ease infinite; }
.km-tile:hover .km-tile-ico > .fa-user          { animation: kmIcoNod 1s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-file-text-o   { animation: kmIcoFlip 1.4s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-photo         { animation: kmIcoSwing 1.2s ease-in-out infinite; transform-origin: 50% 0; }
.km-tile:hover .km-tile-ico > .fa-link          { animation: kmIcoTwist 1.1s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-header        { animation: kmIcoJelly .9s ease infinite; }
.km-tile:hover .km-tile-ico > .fa-object-group  { animation: kmIcoPulse 1s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-rss-square    { animation: kmIcoBlink 1s steps(1) infinite, kmIcoPulse 1s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-folder-open   { animation: kmIcoHop .8s ease infinite; }
.km-tile:hover .km-tile-ico > .fa-envelope      { animation: kmIcoShake .7s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-users         { animation: kmIcoHop .7s ease infinite; }
.km-tile:hover .km-tile-ico > .fa-wechat        { animation: kmIcoPop 1s ease infinite; transform-origin: 20% 90%; }
.km-tile:hover .km-tile-ico > .fa-th-large      { animation: kmIcoTurn 1.6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.km-tile:hover .km-tile-ico > .fa-paint-brush   { animation: kmIcoPaint 1s ease-in-out infinite; transform-origin: 80% 20%; }
.km-tile:hover .km-tile-ico > .fa-share-alt     { animation: kmIcoSpin 1.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.km-tile:hover .km-tile-ico > .fa-user-secret   { animation: kmIcoPeek 1.4s ease-in-out infinite; }
.km-tile:hover .km-tile-ico > .fa-key           { animation: kmIcoKey 1.3s ease-in-out infinite; }

/* staggered entrance when the dashboard loads */
.km-dash > .km-tile:nth-child(2) { animation-delay: .04s; }
.km-dash > .km-tile:nth-child(3) { animation-delay: .08s; }
.km-dash > .km-tile:nth-child(4) { animation-delay: .12s; }
.km-dash > .km-tile:nth-child(5) { animation-delay: .16s; }
.km-dash > .km-tile:nth-child(6) { animation-delay: .20s; }
.km-dash > .km-tile:nth-child(7) { animation-delay: .24s; }
.km-dash > .km-tile:nth-child(8) { animation-delay: .28s; }

@keyframes kmTileIn    { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kmTileShine { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
@keyframes kmTileRing  { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes kmIcoBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(1px); } }
@keyframes kmIcoNod    { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-8deg); } 75% { transform: translateY(-3px) rotate(8deg); } }
@keyframes kmIcoFlip   { 0%, 100% { transform: perspective(120px) rotateY(0); } 50% { transform: perspective(120px) rotateY(180deg); } }
@keyframes kmIcoSwing  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes kmIcoTwist  { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-45deg) scale(1.15); } }
@keyframes kmIcoJelly  { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.25, .75); } 45% { transform: scale(.8, 1.2); } 60% { transform: scale(1.1, .9); } 75% { transform: scale(.97, 1.03); } }
@keyframes kmIcoPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes kmIcoBlink  { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes kmIcoHop    { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.15, .85); } 45% { transform: translateY(-7px) scale(.95, 1.05); } 70% { transform: translateY(0) scale(1.05, .95); } }
@keyframes kmIcoShake  { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes kmIcoPop    { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.25) rotate(-10deg); } 55% { transform: scale(.92) rotate(4deg); } }
@keyframes kmIcoTurn   { 0% { transform: rotate(0); } 40%, 100% { transform: rotate(90deg); } }
@keyframes kmIcoPaint  { 0%, 100% { transform: rotate(0) translateX(0); } 30% { transform: rotate(-25deg) translateX(-3px); } 60% { transform: rotate(10deg) translateX(3px); } }
@keyframes kmIcoSpin   { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes kmIcoPeek   { 0%, 100% { transform: translateX(0); } 20%, 35% { transform: translateX(-5px); } 55%, 70% { transform: translateX(5px); } }
@keyframes kmIcoKey    { 0%, 100% { transform: rotate(0); } 30%, 55% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .km-tile, .km-tile::before, .km-tile:hover .km-tile-ico::after, .km-tile:hover .km-tile-ico > .fa { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- login page ---------- */
body.km-login-body { margin: 0; background: var(--km-bg); min-height: 100vh; }
.km-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.km-login-brand {
  position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; padding: 48px clamp(28px, 6vw, 80px);
  background: radial-gradient(1200px 600px at -10% -10%, rgba(255, 255, 255, .18), transparent 60%),
              linear-gradient(135deg, var(--km-primary) 0%, #1e1b4b 100%);
}
.km-login-brand::before, .km-login-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.km-login-brand::before { width: 420px; height: 420px; right: -140px; top: -120px; }
.km-login-brand::after { width: 300px; height: 300px; left: -90px; bottom: -110px; }
.km-login-brand-in { position: relative; z-index: 1; max-width: 480px; }
.km-login-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; color: #fff !important; text-decoration: none !important; margin-bottom: 40px; }
.km-login-logo .fa { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-size: 20px; }
.km-login-logo b { font-weight: 300; opacity: .8; }
.km-login-brand h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; margin: 0 0 14px; font-weight: 600; color: #fff; }
.km-login-brand h1 span { font-weight: 300; opacity: .75; font-size: .6em; letter-spacing: .02em; }
.km-login-lead { font-size: 16px; opacity: .85; margin: 0 0 28px; }
.km-login-points { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 12px; }
.km-login-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.km-login-points .fa { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.km-login-org { font-size: 13px; opacity: .7; }

.km-login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.km-login-card { width: 100%; max-width: 400px; }
.km-login-card h2 { font-size: 28px; font-weight: 600; margin: 18px 0 8px; }
.km-login-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--km-muted) !important; text-decoration: none !important; }
.km-login-back:hover { color: var(--km-primary) !important; }
.km-field { margin-bottom: 16px; }
.km-field label { display: block; font-size: 14px; margin-bottom: 6px; }
.km-input-ico { position: relative; }
.km-input-ico > .fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--km-muted); pointer-events: none; }
.km-input-ico .form-control { height: 48px; padding-left: 40px; font-size: 15px; background: var(--km-surface); }
.km-input-ico .km-pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.km-input-ico input[type="password"], .km-input-ico input#lgPass { padding-right: 46px; }
.km-captcha { display: flex; gap: 10px; align-items: stretch; }
.km-captcha img { height: 48px; width: auto; border-radius: var(--km-radius-sm); border: 1px solid var(--km-border-strong); background: #f0f0f0; flex: 0 0 auto; }
.km-captcha .form-control { height: 48px; font-size: 18px; letter-spacing: .25em; text-align: center; }
.km-field.is-invalid .form-control { border-color: var(--km-danger) !important; box-shadow: 0 0 0 4px rgba(240, 68, 56, .15) !important; }
.km-caps { font-size: 12px; color: var(--km-warning); margin-top: 6px; }
.km-login-submit { height: 50px; font-size: 16px; font-weight: 500; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.km-login-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.km-login-alert.is-info { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.km-login-alert .fa { margin-top: 3px; }
.km-login-alert[hidden] { display: none; }
.km-login-links { display: flex; justify-content: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--km-muted); }
.km-login-note { margin-top: 28px; padding: 14px 16px; border-radius: 12px; background: var(--km-surface); border: 1px solid var(--km-border); font-size: 13px; color: var(--km-muted); overflow: hidden; }
.km-login-note img { max-width: 100%; height: auto; }

@media (max-width: 860px) {
  .km-login { grid-template-columns: 1fr; }
  .km-login-brand { padding: 28px 22px 36px; }
  .km-login-logo { margin-bottom: 18px; }
  .km-login-brand h1 { font-size: 24px; }
  .km-login-lead, .km-login-points, .km-login-org { display: none; }
  .km-login-panel { padding: 0 16px 36px; margin-top: -18px; }
  .km-login-card { background: var(--km-surface); border-radius: 20px; box-shadow: var(--km-shadow-lg); padding: 22px 20px; position: relative; z-index: 2; }
}

/* ---------- register page ---------- */
.km-register { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.km-register .km-login-brand-in { position: sticky; top: 48px; }
.km-register .km-login-panel { align-items: flex-start; padding-top: 48px; padding-bottom: 48px; }
.km-register-card { max-width: 620px; }
.km-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: none; }
.km-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.km-steps b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-weight: 500; }
.km-fieldset { border: 1px solid var(--km-border); border-radius: 16px; padding: 16px 18px 4px; margin: 0 0 18px; background: var(--km-surface); }
.km-fieldset legend { width: auto; border: 0; margin: 0; padding: 0 8px; font-size: 15px; font-weight: 500; color: var(--km-text); }
.km-fieldset legend .fa { color: var(--km-primary); margin-right: 4px; }
.km-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .km-grid-2 { grid-template-columns: 1fr; } }
.km-label { display: block; font-size: 14px; margin-bottom: 6px; font-weight: 500; }
.km-req { color: var(--km-danger); }
.km-field .form-control { height: 44px; }
.km-mono { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.km-field-hint { font-size: 12px; color: var(--km-muted); margin-top: 5px; min-height: 0; }
.km-field-hint.is-ok { color: var(--km-success); }
.km-field-hint.is-bad, .km-field-hint.is-warn { color: #b54708; }
.km-field-hint.is-bad { color: var(--km-danger); }
.km-field-err { font-size: 12.5px; color: var(--km-danger); margin-top: 5px; }
.km-field-err[hidden] { display: none; }
.km-input-state { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.km-input-state .is-ok { color: var(--km-success); }
.km-input-state .is-bad { color: var(--km-danger); }
.km-input-ico .km-input-state ~ .form-control, .km-input-ico input#rgUser, .km-input-ico input#rgRepass { padding-right: 40px; }
.km-meter { height: 4px; border-radius: 4px; background: #eaecf0; margin-top: 8px; overflow: hidden; }
.km-meter i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s var(--km-ease), background .25s; }
.km-meter i.s1 { background: var(--km-danger); } .km-meter i.s2 { background: var(--km-warning); }
.km-meter i.s3 { background: #66c61c; } .km-meter i.s4 { background: var(--km-success); }
.km-choice { display: flex; gap: 8px; }
.km-choice label { margin: 0; font-weight: 300; cursor: pointer; }
.km-choice input { position: absolute; opacity: 0; pointer-events: none; }
.km-choice span { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: var(--km-radius-sm); border: 1px solid var(--km-border-strong); background: var(--km-surface); }
.km-choice input:checked + span { border-color: var(--km-primary); background: var(--km-primary-soft); color: var(--km-primary); font-weight: 400; }
.km-choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--km-primary-ring); }
.km-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 300; cursor: pointer; font-size: 14px; }
.km-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--km-primary); }
.km-terms { border: 1px solid var(--km-border); border-radius: 12px; margin-bottom: 14px; background: var(--km-surface-2); }
.km-terms summary { cursor: pointer; padding: 10px 14px; font-size: 14px; color: var(--km-primary); }
.km-terms-body { max-height: 240px; overflow-y: auto; padding: 0 14px 12px; font-size: 13px; color: var(--km-muted); }
.km-done { text-align: center; padding: 30px 0 10px; }
.km-done-ico { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; color: #fff; background: var(--km-success); box-shadow: 0 0 0 10px rgba(18, 183, 106, .15); animation: km-toast-in .4s var(--km-ease); }
.km-done p { margin: 10px 0 24px; }
@media (max-width: 860px) {
  .km-register { grid-template-columns: 1fr; }
  .km-register .km-login-brand-in { position: static; }
  .km-register .km-steps { display: none; }
  .km-register .km-login-panel { padding-top: 0; }
  .km-fieldset { padding: 14px 12px 2px; }
}

/* ---------- forgot password ---------- */
.km-steps li { opacity: .6; }
.km-steps li.is-on { opacity: 1; }
.km-steps li.is-on b { background: #fff; color: var(--km-primary); }
.km-login .km-steps { margin-top: 8px; }
.km-progress-steps { display: flex; gap: 6px; margin: 18px 0 4px; }
.km-progress-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--km-border); }
.km-progress-steps i.is-on { background: var(--km-primary); }
.km-question { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--km-primary-soft); margin-bottom: 16px; }
.km-question > .fa { font-size: 22px; color: var(--km-primary); margin-top: 2px; }
.km-question small { display: block; color: var(--km-muted); font-size: 12px; }
.km-question b { font-size: 16px; font-weight: 500; }

/* ---------- site-wide enhancements (km-enhance.js) ---------- */
.km-ico-wrap { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: var(--km-muted); vertical-align: middle; }
a:hover > .km-ico-wrap, .km-ico-wrap:hover { background: var(--km-primary-soft); color: var(--km-primary); }
.km-legacy-ico { font-size: 15px; }
.km-legacy-ico.is-danger { color: #d92d20; }
a:hover > .km-ico-wrap .km-legacy-ico.is-danger { color: var(--km-danger); }
a:hover > .km-ico-wrap:has(.is-danger) { background: rgba(240, 68, 56, .1); }
.km-table-wrap { border: 0; margin-bottom: 0; }
.km-navbar-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 30000; background: var(--km-primary); box-shadow: 0 0 8px var(--km-primary-ring); opacity: 0; pointer-events: none; }
.km-navbar-progress.is-on { opacity: 1; animation: km-nav 8s cubic-bezier(.1, .7, .2, 1) forwards, km-nav-hide .3s 10s forwards; }
@keyframes km-nav { 0% { width: 0; } 20% { width: 45%; } 100% { width: 92%; } }
@keyframes km-nav-hide { to { opacity: 0; } }
.km-totop { position: fixed; right: 18px; bottom: 18px; z-index: 1500; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--km-border); background: var(--km-surface); color: var(--km-text); box-shadow: var(--km-shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s var(--km-ease); }
.km-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.km-totop:hover { color: var(--km-primary); border-color: var(--km-primary); }
body:has(.km-toasts .km-toast) .km-totop { bottom: 90px; }

/* ---------- public site: timeline / news, carousel, link boxes ---------- */
.timeline:before { background: var(--km-border); width: 3px; border-radius: 3px; }
.timeline > li > .timeline-item {
  border-radius: var(--km-radius); border: 1px solid var(--km-border); box-shadow: var(--km-shadow-sm);
  overflow: hidden; background: var(--km-surface);
}
.timeline > li > .timeline-item:hover { box-shadow: var(--km-shadow); }
.timeline > li > .fa, .timeline > li > .glyphicon, .timeline > li > .ion { box-shadow: 0 0 0 4px var(--km-bg); }
.timeline > .time-label > span { border-radius: 999px; padding: 4px 14px; font-weight: 400; }
.timeline > li > .timeline-item > .timeline-header { border-bottom: 1px solid #f0f2f5; font-size: 15px; }
.timeline > li > .timeline-item > .timeline-body { padding: 14px; }
.timeline > li > .timeline-item > .timeline-body img { border-radius: 10px; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 10; }
.timeline > li > .timeline-item > .timeline-body a b { font-size: 16px; font-weight: 500; line-height: 1.45; }
.timeline > li > .timeline-item > .timeline-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; color: var(--km-muted); font-size: 13px; border-top: 1px solid #f0f2f5; }
.timeline > li > .timeline-item > .timeline-footer .btn-xs { border-radius: 999px; padding: 2px 10px; box-shadow: none; }
.timeline > li > .timeline-item > .time { color: var(--km-muted); }

.carousel { border-radius: var(--km-radius); overflow: hidden; }
.carousel-inner > .item > img { width: 100%; }
.carousel-control { width: 10%; background-image: none !important; opacity: .7; }
.carousel-control .fa { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 26px; left: 50%; margin-left: -22px; }
.carousel-indicators li { width: 9px; height: 9px; margin: 0 3px; border-radius: 50%; }
.carousel-indicators .active { width: 22px; height: 9px; margin: 0 3px; border-radius: 9px; }
.box > .box-body:has(> .carousel:only-child) { padding: 0; }

.box .nav-stacked > li > div > a, .box .nav-stacked > li > a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--km-text); }
.box .nav-stacked > li > div > a:hover, .box .nav-stacked > li > a:hover { background: var(--km-primary-soft); color: var(--km-primary); text-decoration: none; }
.box .nav-stacked { margin-bottom: 2px; }
/* public page (index.php): compact module boxes, less empty space between content and the box edge */
.layout-top-nav .box > .box-header { padding: 8px 12px; }
.layout-top-nav .box > .box-body { padding: 6px 8px; }
.layout-top-nav .box .nav-stacked { margin-bottom: 0; }
.layout-top-nav .box .nav-stacked > li + li { margin-top: 0; }
.layout-top-nav .box .nav-stacked > li > div > a, .layout-top-nav .box .nav-stacked > li > a { padding: 5px 8px; }
.layout-top-nav .box .km-link-dot { padding: 5px 0 !important; }
.thumbnail { border-radius: var(--km-radius); padding: 6px; border-color: var(--km-border); }
.img-circle { object-fit: cover; }

/* legacy inputs used on public pages (class="input" / "button") */
input.input, select.input, textarea.input { padding: 6px 10px; min-height: 36px; background: var(--km-surface); }
input.button, input[type="submit"].button, button.button { border: 0; border-radius: var(--km-radius-sm); padding: 7px 16px; background: var(--km-primary); color: #fff; cursor: pointer; }
input.button:hover { filter: brightness(1.07); }

/* ---------- management shell: sidebar layout (personal / setting / setup / article / people / social) ----------
 * Everything is scoped to html.km-sb, which head.php sets before the page renders (and km-enhance.js
 * corrects), so no :has() support is needed. Selectors are long on purpose: they must beat AdminLTE's
 * ".sidebar-mini.sidebar-collapse ..." rules, several of which use !important.
 */
html.km-sb body.skin:not(.km-nosb) .wrapper { background: var(--km-bg); overflow: visible !important; }
html.km-sb body.skin:not(.km-nosb) .main-header .navbar { margin-left: 0 !important; }
html.km-sb body.skin:not(.km-nosb) .content-wrapper,
html.km-sb body.skin:not(.km-nosb) .main-footer { margin-left: 0 !important; transform: none !important; }
html.km-sb body.skin:not(.km-nosb) .content-wrapper > .container { width: auto; max-width: 1240px; }

html.km-sb body.skin:not(.km-nosb) .main-sidebar {
  background: var(--km-surface) !important; border-right: 1px solid var(--km-border); box-shadow: none;
  padding-top: 0 !important; min-height: 0;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar { padding: 0 0 16px; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar a { color: var(--km-text); }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu { padding: 6px 10px 20px; margin: 0; list-style: none; white-space: normal; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li { position: static; margin: 0; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a {
  display: flex !important; align-items: center; gap: 12px; margin: 2px 0 !important; padding: 10px 12px !important;
  border-radius: 10px; border-left: 0 !important; font-weight: 400; white-space: nowrap; box-shadow: none !important;
  background: transparent;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > .fa { width: 20px; text-align: center; font-size: 16px; color: var(--km-muted); flex: 0 0 auto; margin: 0; }
/* labels: undo AdminLTE's collapsed "mini" sidebar (hidden / fly-out spans) */
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > span,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a > span,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right) {
  display: inline-block !important; position: static !important; width: auto !important; left: auto !important; top: auto !important;
  padding: 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > span.label,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > span.pull-right {
  flex: 0 0 auto; padding: .25em .6em !important; border-radius: 999px !important; color: #fff; float: none !important;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > span.label:empty { display: none !important; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a { background: var(--km-surface-2) !important; color: var(--km-text) !important; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.active > a,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.km-active > a { background: var(--km-primary-soft) !important; color: var(--km-primary) !important; font-weight: 500; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.active > a > .fa,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.km-active > a > .fa { color: var(--km-primary); }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.header {
  display: block !important; background: transparent !important; color: var(--km-muted) !important; font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; padding: 16px 12px 6px !important; white-space: normal !important; overflow: visible;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > font { display: block; padding: 16px 12px 6px; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > font,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > font * { color: var(--km-muted) !important; font-size: 12px !important; font-weight: 500; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.divider { height: 1px; background: var(--km-border); margin: 10px 12px; padding: 0; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.divider hr { display: none; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a[data-toggle="offcanvas"] { display: none !important; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .km-side-title { display: flex; align-items: center; gap: 10px; padding: 18px 22px 6px; font-weight: 500; font-size: 15px; color: var(--km-text); }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .km-side-title .fa { color: var(--km-primary); }
.km-side-fab, .km-side-backdrop { display: none; }

/* ---------- sidebar hover animations (icon keyframes shared with the dashboard tiles) ---------- */
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a {
  position: relative; gap: 9px; padding: 6px 10px !important;
  transition: background-color .2s, color .2s;
}
/* accent bar that grows on the left */
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: var(--km-primary); transform: scaleY(0); opacity: 0;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a::before { transform: scaleY(.7); opacity: .45; }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.active > a::before,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.km-active > a::before { transform: scaleY(1); opacity: 1; }
/* icon sits in a small rounded box that fills on hover */
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > .fa {
  width: 32px; height: 32px; line-height: 32px; border-radius: 9px; transform-origin: 50% 50%;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a > .fa { background: var(--km-primary-soft); color: var(--km-primary); }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.active > a > .fa,
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li.km-active > a > .fa { background: var(--km-primary); color: #fff; box-shadow: 0 6px 14px -6px var(--km-primary); }
/* label nudges right */
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li > a > span:not(.label):not(.pull-right) { transition: transform .25s var(--km-ease); }
html.km-sb body.skin:not(.km-nosb) .main-sidebar .sidebar-menu > li:hover > a > span:not(.label):not(.pull-right) { transform: translateX(4px); }
/* one-shot icon motion per hover */
.main-sidebar .sidebar-menu > li > a:hover > .fa                    { animation: kmIcoBounce .6s ease; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-play-circle        { animation: kmIcoSpin .7s cubic-bezier(.5, 0, .3, 1); }
.main-sidebar .sidebar-menu > li > a:hover > .fa-user               { animation: kmIcoNod .7s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-file-text-o,
.main-sidebar .sidebar-menu > li > a:hover > .fa-book,
.main-sidebar .sidebar-menu > li > a:hover > .fa-calendar-o         { animation: kmIcoFlip .8s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-photo              { animation: kmIcoSwing .8s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-link               { animation: kmIcoTwist .7s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-header,
.main-sidebar .sidebar-menu > li > a:hover > .fa-tv,
.main-sidebar .sidebar-menu > li > a:hover > .fa-desktop            { animation: kmIcoJelly .7s ease; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-object-group       { animation: kmIcoPulse .6s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-rss-square         { animation: kmIcoBlink .5s steps(1) 2, kmIcoPulse .6s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-envelope,
.main-sidebar .sidebar-menu > li > a:hover > .fa-microphone         { animation: kmIcoShake .6s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-users,
.main-sidebar .sidebar-menu > li > a:hover > .fa-home               { animation: kmIcoHop .6s ease; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-wechat,
.main-sidebar .sidebar-menu > li > a:hover > .fa-commenting         { animation: kmIcoPop .7s ease; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-th-large           { animation: kmIcoTurn .8s cubic-bezier(.34, 1.56, .64, 1); }
.main-sidebar .sidebar-menu > li > a:hover > .fa-paint-brush        { animation: kmIcoPaint .7s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-share-alt,
.main-sidebar .sidebar-menu > li > a:hover > .fa-gear,
.main-sidebar .sidebar-menu > li > a:hover > .fa-plus-circle        { animation: kmIcoSpin .8s cubic-bezier(.5, 0, .3, 1); }
.main-sidebar .sidebar-menu > li > a:hover > .fa-user-secret        { animation: kmIcoPeek .9s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-key                { animation: kmIcoKey .9s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-search             { animation: kmIcoSearch .8s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-paper-plane-o      { animation: kmIcoFly .8s ease-in-out; }
.main-sidebar .sidebar-menu > li > a:hover > .fa-sign-out           { animation: kmIcoExit .7s ease-in-out; }
@keyframes kmIcoSearch { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, -2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(0, 2px); } }
@keyframes kmIcoFly    { 0% { transform: translate(0, 0); opacity: 1; } 45% { transform: translate(14px, -14px); opacity: 0; } 55% { transform: translate(-14px, 14px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes kmIcoExit   { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(5px); } 60% { transform: translateX(2px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .main-sidebar .sidebar-menu > li > a:hover > .fa { animation: none !important; }
}

@media (min-width: 992px) {
  html.km-sb body.skin:not(.km-nosb) .wrapper {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh;
  }
  html.km-sb body.skin:not(.km-nosb) .wrapper::before,
  html.km-sb body.skin:not(.km-nosb) .wrapper::after { display: none; }
  html.km-sb body.skin:not(.km-nosb) .wrapper > * { min-width: 0; }
  html.km-sb body.skin:not(.km-nosb) .main-header { grid-column: 1 / -1; grid-row: 1; }
  html.km-sb body.skin:not(.km-nosb) .main-sidebar {
    grid-column: 1; grid-row: 2 / 4; position: relative !important; transform: none !important;
    width: auto !important; z-index: 5 !important; top: auto; left: auto;
  }
  html.km-sb body.skin:not(.km-nosb) .main-sidebar > .sidebar { position: static; max-height: none; overflow: visible; height: auto !important; }
  html.km-sb body.skin:not(.km-nosb) .content-wrapper { grid-column: 2; grid-row: 2; min-height: 0 !important; }
  html.km-sb body.skin:not(.km-nosb) .main-footer { grid-column: 2; grid-row: 3; }
}

@media (max-width: 991px) {
  html.km-sb body.skin:not(.km-nosb) .main-sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0; width: 280px !important; max-width: 86vw;
    z-index: 2100 !important; transform: translateX(-105%) !important; overflow-y: auto;
    transition: transform .25s var(--km-ease) !important; box-shadow: var(--km-shadow-lg);
  }
  html.km-sb body.skin.km-side-open:not(.km-nosb) .main-sidebar { transform: none !important; }
  .km-side-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 2050; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.km-side-open .km-side-backdrop { opacity: 1; pointer-events: auto; }
  .km-side-fab {
    display: inline-flex; position: fixed; left: 16px; bottom: 16px; z-index: 1600; height: 46px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--km-primary); color: #fff; box-shadow: var(--km-shadow-lg); align-items: center; gap: 8px; font: inherit;
  }
}
.km-pager { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 0; background: transparent !important; }
.km-pager .pagination { float: none !important; }
.km-pager-info { font-size: 13px; color: var(--km-muted); }

/* ---------- small popup pages (colorbox iframes, e.g. change password) ---------- */
body.km-popup-body { background: var(--km-surface); margin: 0; }
.km-popup { padding: 18px 20px; max-width: 460px; margin: 0 auto; }
.km-popup-title { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.km-popup-title .fa { color: var(--km-primary); margin-right: 6px; }
.km-popup .km-field { margin-bottom: 12px; }
.km-popup .form-control { height: 42px; }

/* ---------- top navbar details (header.php) ---------- */
/* owner pill (header.php li.km-site-owner) - same look as .ke-owner on the external_* pages */
.main-header .navbar .nav > li.km-site-owner > a,
.main-header .navbar .nav > li.km-site-owner > a:hover,
.main-header .navbar .nav > li.km-site-owner > a:focus { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; margin: 8px 8px 8px 0; border-radius: 999px; background: rgba(255,255,255,.14) !important; color: #fff !important; font-weight: 600; font-size: 15px; line-height: 1.3; max-width: 70vw; cursor: default; box-shadow: none; transform: none; }
.main-header .navbar .nav > li.km-site-owner img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; margin: 0; }
.main-header .navbar .nav > li.km-site-owner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-header .navbar .dropdown-menu > li > a img { vertical-align: -3px; margin-right: 4px; }
.main-header .navbar .navbar-toggle img { filter: brightness(10); opacity: .9; }
.main-header .user-menu .user-header { border-radius: var(--km-radius-sm); }
.main-header .user-menu .user-header img { width: 84px; height: 84px; object-fit: cover; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer { display: flex; gap: 8px; padding: 12px; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer::before,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer::after { display: none; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer > div { float: none !important; flex: 1 1 0; min-width: 0; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%;
  padding: 8px 10px; white-space: normal; line-height: 1.3; border-radius: var(--km-radius-sm);
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn .fa { margin: 0; }
.navbar-nav > .user-menu > .dropdown-menu > .user-footer > .pull-right .btn:hover { color: #fff; background: #c9302c; border-color: #c9302c; }
@media (max-width: 767px) {
  .main-header .navbar-collapse { background: rgba(0, 0, 0, .12); border-radius: 0 0 14px 14px; }
  .main-header .navbar .navbar-nav > li > a { padding: 11px 16px; }
  /* one 56px row: toggle (left) and home/user icons (right) share the same centre line */
  .main-header .navbar { min-height: 56px; }
  .main-header .navbar-header { height: 56px; }
  .main-header .navbar .navbar-toggle { display: flex; align-items: center; justify-content: center; height: 40px; width: 44px; margin: 8px 0 8px 6px; padding: 0; line-height: 1; }
  .main-header .navbar .navbar-toggle img { display: block; }
  .main-header .navbar-custom-menu { top: 0; right: 0; height: 56px; }
  .main-header .navbar-custom-menu > .navbar-nav { margin: 0; height: 56px; }
  .main-header .navbar-custom-menu > .navbar-nav > li { height: 56px; }
  .main-header .navbar .navbar-custom-menu > .navbar-nav > li > a { display: flex; align-items: center; height: 56px; padding: 0 12px; line-height: 1; }
  .main-header .navbar-custom-menu .user-image { float: none; margin: 0; width: 34px; height: 34px; }
}

/* ---------- member directory (people.php users-list) ---------- */
.users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 16px !important; margin: 0; }
.users-list::before, .users-list::after { display: none !important; }
.users-list > li {
  float: none !important; width: auto !important; padding: 16px 10px !important; text-align: center;
  background: var(--km-surface); border: 1px solid var(--km-border); border-radius: var(--km-radius);
  font-size: 13px; color: var(--km-muted); transition: box-shadow .2s, transform .2s var(--km-ease);
}
.users-list > li:hover { box-shadow: var(--km-shadow); transform: translateY(-2px); }
.users-list > li img { width: 84px !important; height: 84px !important; border-radius: 50% !important; object-fit: cover; max-width: none; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--km-surface), 0 0 0 5px var(--km-primary-soft); }
.users-list-name { display: block; font-size: 15px; font-weight: 500; color: var(--km-text) !important; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.users-list-date { display: block; margin-top: 4px; font-size: 12px; }

/* ---------- nav pills / stacked menus inside pages (e.g. messages: inbox / comments) ---------- */
.nav-pills > li > a, .nav-stacked > li > a { border-top: 0; border-left: 0 !important; color: var(--km-text); }
.nav-stacked > li > a { border-radius: 10px !important; padding: 10px 14px; margin: 2px 0; }
.box-body.no-padding > .nav-stacked { padding: 8px; }
.nav-pills > li > a:hover, .nav-pills > li > a:focus { background: var(--km-surface-2); color: var(--km-text); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--km-primary-soft) !important; color: var(--km-primary) !important;
  border-color: transparent !important; font-weight: 500; box-shadow: none;
}
.nav-pills > li.active > a > .fa, .nav-pills > li.active > a .label { color: inherit; }

/* ---------- profile page (personal.php?p=profiles) ---------- */
.km-prof { max-width: 1180px; margin: 0 auto; }
.km-prof-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-prof-grid { grid-template-columns: 1fr; } }
.km-prof-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 16px; }
.km-prof-side .km-card { margin: 0; }
@media (max-width: 991px) { .km-prof-side { position: static; } .km-prof-nav { display: none !important; } }

.km-prof-card { overflow: hidden; text-align: center; }
.km-prof-cover { height: 86px; background: radial-gradient(400px 120px at 20% 0%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(135deg, var(--km-primary), #1e1b4b); }
.km-prof-avatar { position: relative; width: 112px; height: 112px; margin: -56px auto 10px; }
.km-prof-avatar img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; max-width: none; border: 4px solid var(--km-surface); box-shadow: var(--km-shadow); background: var(--km-surface-2); }
.km-prof-avatar-btn { position: absolute; right: 2px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--km-primary); color: #fff !important; border: 3px solid var(--km-surface); box-shadow: var(--km-shadow-sm); }
.km-prof-avatar-btn:hover { transform: scale(1.08); }
.km-prof-id h3 { margin: 0; font-size: 19px; font-weight: 500; padding: 0 14px; word-break: break-word; }
.km-prof-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 14px 16px 4px; }
.km-prof-complete, .km-prof-storage { padding: 14px 18px 16px; text-align: left; }
.km-prof-complete { border-top: 1px solid var(--km-border); margin-top: 12px; }
.km-prof-complete-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--km-muted); }
.km-prof-complete-top b { color: var(--km-text); }
.km-prof-complete .progress, .km-prof-storage .progress { margin: 8px 0 6px; height: 8px; }
.km-prof-complete .progress-bar, .km-prof-storage .progress-bar { background: var(--km-primary); transition: width .4s var(--km-ease); }
.km-prof-complete .progress-bar.progress-bar-success { background: var(--km-success); }

.km-prof-nav { padding: 8px; display: flex; flex-direction: column; }
.km-prof-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--km-text) !important; text-decoration: none !important; font-size: 14px; }
.km-prof-nav a .fa { width: 18px; text-align: center; color: var(--km-muted); }
.km-prof-nav a:hover { background: var(--km-surface-2); }
.km-prof-nav a.is-active { background: var(--km-primary-soft); color: var(--km-primary) !important; font-weight: 500; }
.km-prof-nav a.is-active .fa { color: var(--km-primary); }

.km-prof-main { min-width: 0; }
.km-prof-sec { scroll-margin-top: 16px; }
.km-prof-sec .km-card-body { padding: 20px 22px 8px; }
.km-prof-sec .km-card-head h3 { font-size: 17px; }
.km-prof .km-field { margin-bottom: 16px; }
.km-prof .km-field label, .km-prof .km-label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; color: var(--km-text); }
.km-prof .form-control { height: 42px; }
.km-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 767px) { .km-grid-3 { grid-template-columns: 1fr; } }
.km-date3 { display: grid; grid-template-columns: 90px minmax(0, 1fr) 120px; gap: 8px; max-width: 460px; }
.km-readonly { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: var(--km-radius-sm); background: var(--km-surface-2); border: 1px dashed var(--km-border-strong); color: var(--km-muted); font-variant-numeric: tabular-nums; }
.km-copy { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: var(--km-radius-sm); background: var(--km-surface-2); border: 1px solid var(--km-border); }
.km-copy code { flex: 1; background: none; color: var(--km-text); padding: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-more-fields { border: 1px dashed var(--km-border-strong); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.km-more-fields summary { cursor: pointer; color: var(--km-primary); font-size: 14px; }
.km-more-fields[open] summary { margin-bottom: 2px; }

.km-savebar {
  position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 10px 12px 10px 16px; margin-top: 4px; border-radius: 14px; background: var(--km-surface);
  border: 1px solid var(--km-border); box-shadow: var(--km-shadow);
}
.km-savebar-msg { flex: 1; font-size: 13.5px; color: var(--km-muted); }
.km-savebar-msg .fa-check-circle { color: var(--km-success); }
.km-savebar.is-dirty { border-color: var(--km-primary); box-shadow: 0 0 0 4px var(--km-primary-ring), var(--km-shadow-lg); }
.km-savebar.is-dirty .km-savebar-msg { color: var(--km-text); font-weight: 500; }
.km-savebar.is-dirty .km-savebar-msg .fa { color: var(--km-primary); }
@media (max-width: 991px) { .km-savebar { bottom: 72px; } }
.km-prof-legacy[hidden] { display: none !important; }

/* ---------- KM lightwindow (assets/km-lightwindow.js, replaces the Colorbox popups) ---------- */
html.km-lw-open, html.km-lw-open body { overflow: hidden !important; }
.km-lw[hidden] { display: none !important; }
.km-lw {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 16px; font-family: var(--km-font, "Kanit"), "Saysettha OT", system-ui, sans-serif;
}
.km-lw-backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
}
.km-lw.is-open .km-lw-backdrop { opacity: 1; }
.km-lw-win {
  position: relative; display: flex; flex-direction: column; width: 480px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--km-surface); color: var(--km-text); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .08);
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .2s ease, transform .25s var(--km-ease), width .25s var(--km-ease);
  outline: 0;
}
.km-lw.is-open .km-lw-win { opacity: 1; transform: none; }

.km-lw-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 54px;
  padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--km-border); background: var(--km-surface);
}
.km-lw-head::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--km-primary); box-shadow: 0 0 0 4px var(--km-primary-soft); margin-right: 4px;
}
.km-lw-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-lw-count { flex: 0 0 auto; font-size: 12.5px; color: var(--km-muted); background: var(--km-surface-2); border: 1px solid var(--km-border); border-radius: 99px; padding: 1px 10px; font-variant-numeric: tabular-nums; }
.km-lw-count:empty { display: none; }
.km-lw-tools { flex: 0 0 auto; display: flex; gap: 2px; }
.km-lw-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--km-muted); font-size: 15px; cursor: pointer; transition: background-color .15s, color .15s;
}
.km-lw-btn[hidden] { display: none; }
.km-lw-btn:hover { background: var(--km-primary-soft); color: var(--km-primary); }
.km-lw-x:hover { background: rgba(240, 68, 56, .1); color: var(--km-danger); }
.km-lw-x { font-size: 18px; }

.km-lw-body {
  position: relative; flex: 1 1 auto; min-height: 0; height: 240px; background: var(--km-surface);
  transition: height .25s var(--km-ease);
}
.km-lw-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--km-surface); opacity: 1; transition: opacity .2s; }
.km-lw.is-loading .km-lw-frame { opacity: 0; }
.km-lw-loader {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px;
  color: var(--km-muted); font-size: 14px; pointer-events: none;
}
.km-lw.is-loading .km-lw-loader { display: flex; }
.km-lw-spin {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--km-primary-soft);
  border-top-color: var(--km-primary); animation: km-lw-spin .8s linear infinite;
}
@keyframes km-lw-spin { to { transform: rotate(360deg); } }

.km-lw-cap { flex: 0 0 auto; padding: 10px 20px 12px; font-size: 14px; color: var(--km-muted); border-top: 1px solid var(--km-border); max-height: 30vh; overflow: auto; }
.km-lw-cap[hidden] { display: none; }

/* image viewer */
.km-lw.is-image .km-lw-body { background: #0b1020; }
.km-lw.is-image .km-lw-loader { color: #cbd5e1; }
.km-lw-img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .2s; }
.km-lw.is-loading .km-lw-img, .km-lw.is-error .km-lw-img { opacity: 0; }
.km-lw-nav {
  position: absolute; top: 50%; z-index: 2; display: none; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--km-text); box-shadow: var(--km-shadow-lg); font-size: 16px;
}
.km-lw-nav:hover { background: #fff; color: var(--km-primary); }
.km-lw-nav.is-prev { left: 20px; }
.km-lw-nav.is-next { right: 20px; }
.km-lw.has-nav .km-lw-nav { display: inline-grid; }

/* maximised */
.km-lw.is-max { padding: 8px; }
.km-lw.is-max .km-lw-win { width: 100% !important; height: 100%; max-width: none; max-height: none; }
.km-lw.is-max .km-lw-body { height: auto !important; }

/* phones: full-screen sheet */
.km-lw.is-sheet { padding: 0; align-items: flex-end; }
.km-lw.is-sheet .km-lw-win {
  width: 100% !important; max-width: none; height: calc(100vh - 10px); height: calc(100dvh - 10px); max-height: none;
  border-radius: 18px 18px 0 0; transform: translateY(40px);
}
.km-lw.is-sheet.is-open .km-lw-win { transform: none; }
.km-lw.is-sheet .km-lw-body { height: auto !important; }
.km-lw.is-sheet .km-lw-max { display: none; }
.km-lw.is-sheet .km-lw-nav { top: auto; bottom: 18px; margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .km-lw-win, .km-lw-backdrop, .km-lw-body { transition: none; }
}

/* ---------- page shown inside the lightwindow (html.km-embed, set by km-ui.js) ---------- */
html.km-embed, html.km-embed body { height: auto !important; min-height: 0 !important; background: var(--km-surface) !important; overflow-x: hidden; }
html.km-embed body { margin: 0; padding: 0; }
html.km-embed body:not(:has(> .wrapper)):not(.km-popup-body) { padding: 16px 20px; }
html.km-embed .main-header, html.km-embed .main-footer, html.km-embed .main-sidebar, html.km-embed .control-sidebar,
html.km-embed .km-totop, html.km-embed .km-sb-toggle, html.km-embed .breadcrumb { display: none !important; }
html.km-embed .wrapper { display: block !important; min-height: 0 !important; height: auto !important; background: transparent !important; overflow: visible !important; }
html.km-embed .content-wrapper { margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; transform: none !important; }
html.km-embed .content-wrapper > .container, html.km-embed .wrapper > .container { width: auto !important; max-width: none !important; padding: 0; }
html.km-embed .content { padding: 16px 20px; min-height: 0; }
html.km-embed .content-header { padding: 16px 20px 0; }
html.km-embed .content > .row:last-child > [class*="col-"]:last-child > .box:last-child, html.km-embed .content > .box:last-child { margin-bottom: 0; } /* only the very last box: stacked columns keep their gap */
html.km-embed img { max-width: 100%; }
html.km-embed img[width][height] { height: auto; }
html.km-embed table { max-width: 100%; }
html.km-embed iframe, html.km-embed video, html.km-embed embed, html.km-embed object { max-width: 100%; }
html.km-embed pre { white-space: pre-wrap; word-wrap: break-word; }
html.km-embed .box-body, html.km-embed td { overflow-wrap: break-word; }

/* ---------- link builder (personal.php?p=links) ---------- */
.km-links { max-width: 1180px; margin: 0 auto; }
.km-pos-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.km-pos { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--km-border); background: var(--km-surface); color: var(--km-text) !important; text-decoration: none !important; }
.km-pos > .fa { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--km-surface-2); color: var(--km-muted); flex: 0 0 auto; font-size: 16px; }
.km-pos span { flex: 1; min-width: 0; line-height: 1.3; }
.km-pos b { display: block; font-weight: 500; font-size: 14px; }
.km-pos small { display: block; color: var(--km-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-pos em { font-style: normal; font-size: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--km-surface-2); color: var(--km-muted); }
.km-pos:hover { border-color: var(--km-primary); }
.km-pos.is-active { border-color: var(--km-primary); background: var(--km-primary-soft); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-pos.is-active > .fa { background: var(--km-primary); color: #fff; }
.km-pos.is-active em { background: var(--km-primary); color: #fff; }

.km-links-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.km-links-grid.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991px) { .km-links-grid { grid-template-columns: 1fr; } }
.km-links-side { position: sticky; top: 14px; }
.km-links-side .km-card { margin: 0; }
.km-bg-thumb { height: 70px; border-radius: 10px; background: var(--km-surface-2) center/cover no-repeat; border: 1px solid var(--km-border); }

.km-lg-new { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--km-surface); border: 1px dashed var(--km-border-strong); margin-bottom: 16px; }
.km-lg-new > .fa { color: var(--km-primary); font-size: 18px; }
.km-lg-new .form-control { border: 0; box-shadow: none !important; padding-left: 4px; height: 40px; }
.km-lg-list { display: flex; flex-direction: column; gap: 14px; }
.km-lg-list:empty::after { content: attr(data-empty); text-align: center; padding: 40px 16px; color: var(--km-muted); border: 1px dashed var(--km-border-strong); border-radius: 16px; background: var(--km-surface); }
.km-lg { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; box-shadow: var(--km-shadow-sm); }
.km-lg.is-flash, .km-li.is-flash { animation: km-flash 1.2s ease; }
.km-lg.sortable-ghost { opacity: .4; }
.km-lg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--km-border); background: var(--km-surface-2); border-radius: 16px 16px 0 0; }
.km-lg-name { font-size: 16px; font-weight: 500 !important; }
.km-grip { display: inline-flex; gap: 1px; color: #98a2b3; cursor: grab; padding: 6px 4px; border-radius: 6px; flex: 0 0 auto; touch-action: none; }
.km-grip:hover { background: var(--km-primary-soft); color: var(--km-primary); }
.km-grip:active { cursor: grabbing; }
.km-inline {
  flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 8px;
  font: inherit; color: var(--km-text); transition: border-color .15s, background .15s, box-shadow .3s;
}
.km-inline:hover { border-color: var(--km-border); background: var(--km-surface); }
.km-inline:focus { outline: none; border-color: var(--km-primary); background: var(--km-surface); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-inline.is-saved { box-shadow: 0 0 0 3px rgba(18, 183, 106, .35); border-color: var(--km-success); }
.km-inline[data-html] { font-style: italic; color: var(--km-muted); }

.km-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: 300; white-space: nowrap; }
.km-switch input { position: absolute; opacity: 0; pointer-events: none; }
.km-switch span { width: 34px; height: 20px; border-radius: 999px; background: #d0d5dd; position: relative; transition: background .2s; flex: 0 0 auto; }
.km-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s var(--km-ease); }
.km-switch input:checked + span { background: var(--km-primary); }
.km-switch input:checked + span::after { transform: translateX(14px); }
.km-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-switch small { font-size: 12px; color: var(--km-muted); }
@media (max-width: 600px) { .km-switch small { display: none; } }

.km-li-list { list-style: none; margin: 0; padding: 8px; min-height: 44px; display: flex; flex-direction: column; gap: 4px; }
.km-li-list:empty::after { content: attr(data-empty); color: #98a2b3; font-size: 13px; padding: 10px 12px; }
.km-li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; border: 1px solid transparent; }
.km-li:hover { background: var(--km-surface-2); border-color: var(--km-border); }
.km-li.sortable-ghost { opacity: .4; background: var(--km-primary-soft); }
.km-li.sortable-chosen { background: var(--km-surface); box-shadow: var(--km-shadow); }
.km-li-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.km-li-main .km-inline { padding: 3px 8px; }
.km-li-target { font-size: 12px; color: var(--km-muted) !important; padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; }
.km-li-target:hover { color: var(--km-primary) !important; }
.km-li.is-empty .km-li-target { color: #b54708 !important; }
.km-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #d0d5dd; background: transparent; padding: 0; flex: 0 0 auto; position: relative; }
.km-dot.is-on { border: 2px solid var(--km-primary); }
.km-dot.is-on::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--km-primary); }
.km-li-add { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px 20px; }
.km-li-add > .fa { color: var(--km-muted); }
.km-li-add input { flex: 1; border: 0; border-bottom: 1px dashed var(--km-border-strong); background: transparent; padding: 6px 2px; font: inherit; outline: none; }
.km-li-add input:focus { border-bottom-color: var(--km-primary); }

.km-link-edit { border-color: var(--km-primary); box-shadow: 0 0 0 4px var(--km-primary-ring), var(--km-shadow); scroll-margin-top: 14px; }
.km-link-edit .km-field { margin-bottom: 16px; }
.km-or { display: flex; align-items: center; gap: 12px; color: var(--km-muted); font-size: 13px; margin: 6px 0 14px; }
.km-or::before, .km-or::after { content: ""; flex: 1; height: 1px; background: var(--km-border); }
.km-links-preview { margin-top: 20px; }
.km-lw.no-title .km-lw-head { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
.km-lw.no-title .km-lw-head::before { display: none; }
/* welcome popup (page_welcomepage.php): the box shrinks to its content so the window can fit its width */
.km-welcome { display: inline-block; max-width: 100%; vertical-align: top; }
.km-welcome-title { margin: 0 0 10px; font-weight: 500; }
html.km-embed .km-welcome-title { display: none; }
html.km-embed .km-welcome > p:last-child { margin-bottom: 0; }
html.km-embed body:has(> .km-welcome) { text-align: center; }
html.km-embed .km-welcome { text-align: left; }

/* ---------- settings pages (privacy / style / shared styles) ---------- */
.km-settings { max-width: 1180px; }
.km-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.km-set-grid .km-set-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .km-set-grid { grid-template-columns: 1fr; } }
.km-set-list { padding: 6px 0; }
.km-set-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin: 0; cursor: pointer; font-weight: 300; border-top: 1px solid #f0f2f5; transition: background .15s, opacity .2s; }
.km-set-list .km-set-row:first-child { border-top: 0; }
.km-set-row:hover { background: var(--km-surface-2); }
.km-set-row.is-sub { padding-left: 44px; }
.km-set-row.is-sub .km-set-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-left: 2px solid var(--km-border-strong); border-bottom: 2px solid var(--km-border-strong); margin: 0 10px 3px -20px; }
.km-set-row.is-covered { opacity: .5; }
.km-set-text { flex: 1; min-width: 0; }
.km-set-title { display: block; font-size: 14.5px; color: var(--km-text); }
.km-set-title b { font-weight: 500; }
.km-set-hint { display: block; font-size: 12.5px; color: var(--km-muted); margin-top: 2px; }
.km-switch-lg span { width: 44px; height: 26px; }
.km-switch-lg span::after { width: 22px; height: 22px; }
.km-switch-lg input:checked + span::after { transform: translateX(18px); }

.km-style-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-style-grid { grid-template-columns: 1fr; } .km-style-side { order: -1; } }
.km-style-side { position: sticky; top: 14px; }
.km-style-side .km-card { margin: 0; }
.km-color-list { padding: 4px 0; }
.km-color { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid #f0f2f5; flex-wrap: wrap; }
.km-color-list .km-color:first-child { border-top: 0; }
.km-color-swatch { position: relative; width: 42px; height: 42px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.km-color-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.km-color-swatch span { display: block; width: 100%; height: 100%; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); pointer-events: none; }
.km-color-swatch span.is-empty { background: repeating-conic-gradient(#e4e7ec 0% 25%, #fff 0% 50%) 50% / 12px 12px; }
.km-color-swatch:hover span { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 0 0 3px var(--km-primary-ring); }
.km-color-text { flex: 1 1 180px; min-width: 0; }
.km-color-name { display: block; font-size: 14.5px; font-weight: 400; }
.km-color-hex { display: flex; align-items: center; border: 1px solid var(--km-border-strong); border-radius: 10px; padding: 0 8px; height: 36px; background: var(--km-surface); }
.km-color-hex span { color: var(--km-muted); font-size: 13px; }
.km-color-hex input { width: 72px; border: 0; outline: none; font: 13px/1 ui-monospace, Consolas, monospace; text-transform: lowercase; background: transparent; }
.km-color-hex:focus-within { border-color: var(--km-primary); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-mini-select { height: 36px; border-radius: 10px; border: 1px solid var(--km-border-strong); padding: 0 8px; font: inherit; font-size: 13px; background: var(--km-surface); }
.km-presets-row { display: flex; flex-wrap: wrap; gap: 10px; }
.km-preset-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--km-border); background: var(--km-surface); font: inherit; font-size: 13.5px; cursor: pointer; }
.km-preset-chip:hover { border-color: var(--km-primary); }
.km-preset-chip.is-active { border-color: var(--km-primary); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-preset-chip b { font-weight: 400; }
.km-preset-dots { display: inline-flex; }
.km-preset-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.km-preset-dots i:first-child { margin-left: 0; }
.km-bg-pick { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.km-bg-pick .km-bg-thumb { width: 140px; height: 90px; display: grid; place-items: center; color: var(--km-muted); font-size: 12px; text-align: center; }
.km-pos9 { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
.km-pos9 label { margin: 0; cursor: pointer; }
.km-pos9 input { position: absolute; opacity: 0; }
.km-pos9 span { display: block; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--km-border-strong); background: var(--km-surface); }
.km-pos9 input:checked + span { background: var(--km-primary); border-color: var(--km-primary); }
.km-pos9 input:focus-visible + span { box-shadow: 0 0 0 3px var(--km-primary-ring); }

/* site mock used for live colour previews */
.km-mock { border-radius: 12px; overflow: hidden; border: 1px solid var(--km-border); font-size: 12.5px; background: #eef1f6; }
.km-mock-nav { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--m-primary, #2563eb); color: #fff; }
.km-mock-nav b { margin-right: auto; font-weight: 600; }
.km-mock-nav span { opacity: .9; }
.km-mock-body { padding: 12px; }
.km-mock-box { background: var(--m-box, #fff); border-radius: 10px; padding: 12px; border-top: 3px solid var(--m-primary, #2563eb); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.km-mock-title { font-weight: 600; color: var(--m-text, #1d2433); margin-bottom: 6px; }
.km-mock-text { color: var(--m-text, #1d2433); margin: 0 0 8px; line-height: 1.6; }
.km-mock-link { color: var(--m-link, #2563eb) !important; text-decoration: var(--m-u1, none) !important; }
.km-mock-visited { color: var(--m-visited, #6941c6) !important; text-decoration: var(--m-u2, none) !important; }
.km-mock-table { border-radius: 8px; overflow: hidden; border: 1px solid #e4e7ec; margin-bottom: 10px; color: var(--m-text, #1d2433); }
.km-mock-table div { padding: 5px 8px; background: #fff; }
.km-mock-table .is-alt { background: var(--m-alt, #fafbfc); }
.km-mock-table .is-hover { background: var(--m-hover, #eef4ff); }
.km-mock-btns { display: flex; gap: 6px; }
.km-mock-btn, .km-mock-btn2 { padding: 4px 10px; border-radius: 7px; color: #fff; background: var(--m-primary, #2563eb); }
.km-mock-btn2 { background: var(--m-second, #f79009); }
.km-mock-foot { padding: 8px 12px; background: var(--m-foot-bg, #fff); color: var(--m-foot-text, #667085); border-top: 1px solid #e4e7ec; }
.km-mock-sm { font-size: 11.5px; }
.km-mock-sm .km-mock-body { padding: 10px; }

.km-share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.km-share-card { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; padding: 12px; box-shadow: var(--km-shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.km-share-card:hover { box-shadow: var(--km-shadow); }
.km-share-card.is-mine { border-color: var(--km-primary); }
.km-share-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.km-share-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-share-actions { display: flex; gap: 6px; }

/* ---------- shared list bits ---------- */
.km-chip.is-live { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.km-chip.is-draft { background: #f2f4f7; color: #475467; }
.km-chip.is-wait { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.km-chip.is-pin { background: var(--km-primary-soft); border-color: transparent; color: var(--km-primary); }
.km-btn-icon.is-on { background: var(--km-primary-soft); color: var(--km-primary); }
.km-list-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.km-list-toolbar .km-seg a { display: inline-flex; align-items: center; gap: 6px; }
.km-count { font-style: normal; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--km-surface); color: var(--km-muted); }
.km-seg .is-active .km-count { background: var(--km-primary); color: #fff; }
.km-display-set { margin-top: 20px; }
.km-display-set > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.km-display-set > summary::-webkit-details-marker { display: none; }
.km-display-set[open] > summary { border-bottom: 1px solid var(--km-border); }
.km-display-set[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.km-lg-new select.form-control { border: 1px solid var(--km-border); border-radius: 10px; height: 40px; }

/* ---------- short texts: page map ---------- */
.km-tc-map { background: var(--km-surface-2); border: 1px solid var(--km-border); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.km-tc-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
@media (max-width: 767px) { .km-tc-row { grid-template-columns: 1fr; } }
.km-tc-col-side, .km-tc-col-main { display: flex; flex-direction: column; gap: 12px; }
.km-tc-avatar { height: 90px; border-radius: 14px; background: var(--km-surface); border: 1px solid var(--km-border); display: grid; place-items: center; color: #d0d5dd; font-size: 42px; }
.km-tc-ghost { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--km-surface); border: 1px solid var(--km-border); }
.km-tc-ghost i { height: 10px; border-radius: 6px; background: #eaecf0; }
.km-tc-ghost i:nth-child(2) { width: 80%; } .km-tc-ghost i:nth-child(3) { width: 60%; }
.km-tc-zone {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--km-surface);
  border: 2px dashed var(--km-border-strong); color: var(--km-text) !important; text-decoration: none !important; position: relative;
}
.km-tc-zone:hover { border-color: var(--km-primary); background: var(--km-primary-soft); }
.km-tc-zone.is-filled { border-style: solid; border-color: var(--km-border); }
.km-tc-zone.is-filled:hover { border-color: var(--km-primary); }
.km-tc-zone.is-active { border: 2px solid var(--km-primary); box-shadow: 0 0 0 4px var(--km-primary-ring); }
.km-tc-zone.is-top { min-height: 90px; background: linear-gradient(135deg, var(--km-primary-soft), var(--km-surface)); }
.km-tc-zone.is-main { min-height: 110px; }
.km-tc-zone.is-welcome { align-self: center; width: min(420px, 100%); box-shadow: var(--km-shadow); }
.km-tc-zone-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.km-tc-zone-top .fa { color: var(--km-primary); }
.km-tc-zone-top b { font-weight: 500; flex: 1; }
.km-tc-zone-top em { font-style: normal; font-size: 12px; color: var(--km-muted); }
.km-tc-zone.is-filled .km-tc-zone-top em { color: var(--km-success); }
.km-tc-zone-body { font-size: 13px; color: var(--km-muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.km-tc-zone-body strong { color: var(--km-text); font-weight: 500; }
.km-tc-zone-edit { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--km-primary); opacity: 0; transition: opacity .15s; }
.km-tc-zone:hover .km-tc-zone-edit, .km-tc-zone:focus .km-tc-zone-edit { opacity: 1; }

/* ---------- banners ---------- */
.km-banner-preview { position: relative; border-radius: 14px; overflow: hidden; background: var(--km-surface-2); min-height: 120px; }
.km-banner-preview .carousel-inner > .item > img { width: 100%; max-height: 360px; object-fit: cover; }
.km-banner-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; color: var(--km-muted); }
.km-banner-empty .fa { font-size: 36px; opacity: .5; }
.km-banner-empty[hidden] { display: none; }
.km-banner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-banner-grid { grid-template-columns: 1fr; } }
.km-banner-side { position: sticky; top: 14px; }
.km-banner-side .km-card { margin: 0; }
.km-banner-drop { min-height: 140px; }
.km-banner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.km-banner-list:empty::after { content: attr(data-empty); color: var(--km-muted); padding: 14px; }
.km-bn { position: relative; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 14px; overflow: hidden; box-shadow: var(--km-shadow-sm); }
.km-bn.sortable-ghost { opacity: .4; }
.km-bn.is-flash { animation: km-flash 1.2s ease; }
.km-bn-img { position: relative; aspect-ratio: 3 / 1; background: var(--km-surface-2) center / cover no-repeat; }
.km-bn-grip { position: absolute; left: 8px; top: 8px; background: rgba(255, 255, 255, .92); box-shadow: var(--km-shadow-sm); padding: 6px 8px; }
.km-bn-no { position: absolute; right: 8px; top: 8px; min-width: 24px; height: 24px; border-radius: 999px; background: rgba(15, 23, 42, .7); color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 6px; }
.km-bn-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.km-bn-url { display: flex; align-items: center; gap: 4px; color: var(--km-muted); font-size: 12px; padding-left: 8px; }
.km-bn-url .km-inline { font-size: 12.5px; padding: 3px 6px; }
.km-bn-del { position: absolute; right: 8px; bottom: 8px; }
.km-range { width: 100%; accent-color: var(--km-primary); }

/* ---------- photo albums ---------- */
.km-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.km-album { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; overflow: hidden; box-shadow: var(--km-shadow-sm); display: flex; flex-direction: column; }
.km-album:hover { box-shadow: var(--km-shadow); }
.km-album.is-pinned { border-color: var(--km-primary); }
.km-album-cover { position: relative; display: grid; aspect-ratio: 4 / 3; gap: 2px; background: var(--km-surface-2); text-decoration: none !important; }
.km-album-cover span { background: #eaecf0 center / cover no-repeat; }
.km-album-cover.n2 { grid-template-columns: 1fr 1fr; }
.km-album-cover.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.km-album-cover.n3 span:first-child { grid-row: 1 / 3; }
.km-album-cover.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.km-album-cover em { display: grid; place-items: center; color: var(--km-muted); font-style: normal; font-size: 13px; }
.km-album-count { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 12px; font-weight: 400; }
.km-album-body { padding: 10px 12px 4px; }
.km-album-name { width: 100%; font-weight: 500; font-size: 15px; }
.km-album-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--km-muted); padding: 2px 8px 0; }
.km-album-actions { display: flex; align-items: center; gap: 4px; padding: 8px 10px 10px; margin-top: auto; }
.km-album-actions .btn { margin-right: auto; }
.km-album-more { padding: 10px 14px 4px; border-top: 1px solid var(--km-border); background: var(--km-surface-2); }
.km-album-more .km-field { margin-bottom: 10px; }
.km-album-more label { font-size: 12.5px; margin-bottom: 4px; }
.km-album-more .form-control { height: 36px; }
.km-album-more .is-saved, .km-album-more .form-control.is-saved { border-color: var(--km-success) !important; box-shadow: 0 0 0 3px rgba(18, 183, 106, .25) !important; }

/* ---------- article list ---------- */
.km-news-list { display: flex; flex-direction: column; gap: 10px; }
.km-news-item { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 14px; box-shadow: var(--km-shadow-sm); }
.km-news-item:hover { box-shadow: var(--km-shadow); }
.km-news-item.is-pinned { border-color: var(--km-primary); }
.km-news-thumb { flex: 0 0 96px; height: 72px; border-radius: 10px; background: var(--km-surface-2) center / cover no-repeat; display: grid; place-items: center; color: #98a2b3; font-size: 24px; text-decoration: none !important; }
.km-news-main { flex: 1; min-width: 0; }
.km-news-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 2px; }
.km-news-title { width: 100%; font-size: 15.5px; font-weight: 500 !important; padding: 3px 8px; }
div.km-news-title { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-news-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--km-muted); padding: 0 8px; }
.km-news-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .km-news-item { flex-wrap: wrap; }
  .km-news-thumb { flex-basis: 72px; height: 56px; }
  .km-news-actions { width: 100%; justify-content: flex-end; border-top: 1px solid #f0f2f5; padding-top: 8px; }
}

/* ---------- article editor ---------- */
.km-editor-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.km-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-editor { grid-template-columns: 1fr; } }
.km-editor-main .km-card { margin: 0; }
.km-editor-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
.km-editor-side .km-card { margin: 0; }
.km-editor-bar { grid-column: 1 / -1; }
.km-title-input { width: 100%; border: 0; border-bottom: 2px solid var(--km-border); padding: 6px 2px 10px; margin-bottom: 14px; font: inherit; font-size: 24px; font-weight: 500; color: var(--km-text); background: transparent; outline: none; }
.km-title-input:focus { border-bottom-color: var(--km-primary); }
.km-choice-block { flex-direction: column; }
.km-choice-block label, .km-choice-block span { width: 100%; }

/* ---------- buttons: keep button colours when the button is a link ----------
 * css_data2.php styles a:link / a:visited with the user's link colours; those selectors
 * beat ".btn-primary", which painted button text in link colours. Bootstrap's own
 * hover/focus colours (#286090 etc.) also replaced the user's primary colour.
 */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:focus, a.btn:active { text-decoration: none !important; }
.btn-primary, a.btn-primary:link, a.btn-primary:visited, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .open > .dropdown-toggle.btn-primary,
.btn-danger, a.btn-danger:link, a.btn-danger:visited, .btn-danger:hover, .btn-danger:focus,
.btn-success, a.btn-success:link, a.btn-success:visited, .btn-success:hover, .btn-success:focus,
.btn-info, a.btn-info:link, a.btn-info:visited, .btn-info:hover, .btn-info:focus,
.btn-warning, a.btn-warning:link, a.btn-warning:visited, .btn-warning:hover, .btn-warning:focus { color: #fff !important; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary {
  background-color: var(--km-primary) !important; border-color: transparent !important; background-image: none !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.1); box-shadow: 0 4px 12px var(--km-primary-ring); }
.btn-primary:active, .btn-primary.active { filter: brightness(.92); box-shadow: none; }
.btn-primary:focus-visible { outline: 2px solid var(--km-primary); outline-offset: 2px; }
a.btn-default:link, a.btn-default:visited, .btn-default:hover, .btn-default:focus { color: var(--km-text) !important; }

/* soft button: tinted background, primary-coloured text (used in lists) */
.km-btn-soft, a.km-btn-soft:link, a.km-btn-soft:visited {
  background: var(--km-primary-soft) !important; color: var(--km-primary) !important; border: 1px solid transparent !important; box-shadow: none; font-weight: 500;
}
.km-btn-soft:hover, .km-btn-soft:focus { background: var(--km-primary) !important; color: #fff !important; filter: none; box-shadow: 0 4px 12px var(--km-primary-ring); }

/* icon buttons that are links should not take link colours either */
a.km-btn-icon:link, a.km-btn-icon:visited { color: var(--km-muted); text-decoration: none; }
a.km-btn-icon:hover, a.km-btn-icon:focus { color: var(--km-primary); }

/* editor: the sticky save bar stays under the writing column so it never covers the options column */
.km-editor { grid-template-rows: auto auto; }
.km-editor-main { grid-column: 1; grid-row: 1; }
.km-editor-side { grid-column: 2; grid-row: 1 / span 2; position: static; }
.km-editor-bar { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; }
@media (max-width: 991px) {
  .km-editor-main, .km-editor-side, .km-editor-bar { grid-column: 1; grid-row: auto; }
  .km-editor-side { margin-bottom: 76px; }
}

/* article / album popups: comments and author columns stack in the narrow popup; keep them apart */
@media (max-width: 1199px) {
  .content > .row > section[class*="col-lg-"] + section[class*="col-lg-"] > .box:first-child { margin-top: 0; }
  .content > .row > section[class*="col-lg-"] > .box { margin-bottom: 22px; }
  html.km-embed .content > .row:last-child > section[class*="col-lg-"]:last-child > .box:last-child { margin-bottom: 0; }
}

/* ---------- messages / friends / web boards / RSS ---------- */
.km-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--km-surface-2); max-width: none; }
.km-section-title { font-size: 15px; font-weight: 500; color: var(--km-muted); margin: 22px 2px 12px; }
.km-section-title .fa { color: var(--km-primary); margin-right: 6px; }

.km-msg-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-msg-grid { grid-template-columns: 1fr; } }
.km-msg-nav { position: sticky; top: 14px; }
.km-msg-nav .km-card { margin: 0; }
.km-msg-nav .km-prof-nav { flex-direction: column; }
.km-mail-list { display: flex; flex-direction: column; }
.km-mail-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid #f0f2f5; position: relative; }
.km-mail-row:first-child { border-top: 0; }
.km-mail-row:hover { background: var(--km-surface-2); }
.km-mail-row.is-selected { background: var(--km-primary-soft); }
.km-mail-row.is-unread::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--km-primary); }
.km-mail-check { margin: 0; display: flex; }
.km-mail-check input { width: 16px; height: 16px; accent-color: var(--km-primary); }
.km-mail-link { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--km-text) !important; text-decoration: none !important; }
.km-mail-who { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.km-mail-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--km-muted); }
.km-mail-row.is-unread .km-mail-who, .km-mail-row.is-unread .km-mail-title { font-weight: 500; color: var(--km-text); }
.km-mail-time { font-size: 12px; color: var(--km-muted); white-space: nowrap; }
.km-mail .km-card-head h3 { font-size: 18px; }
.km-mail-from { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--km-border); }
.km-mail-from .km-avatar { width: 52px; height: 52px; }
.km-mail-body { font-size: 15px; line-height: 1.8; margin-bottom: 20px; white-space: normal; word-wrap: break-word; }
.km-friend-req { text-align: center; padding: 20px; border-radius: 14px; background: var(--km-primary-soft); }
.km-friend-req > .fa { font-size: 30px; color: var(--km-primary); }
.km-friend-req p { margin: 10px 0 16px; font-size: 15px; }
.km-friend-req form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.km-comment-list { display: flex; flex-direction: column; }
.km-comment { display: flex; gap: 12px; padding: 14px 18px; border-top: 1px solid #f0f2f5; align-items: flex-start; }
.km-comment:first-child { border-top: 0; }
.km-comment.is-new { background: #fbfcff; box-shadow: inset 3px 0 0 var(--km-primary); }
.km-comment.is-hidden .km-comment-text { opacity: .55; }
.km-comment-main { flex: 1; min-width: 0; }
.km-comment-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.km-comment-top b { font-size: 14px; font-weight: 500; }
.km-comment-text { margin: 4px 0; line-height: 1.7; word-wrap: break-word; }
.km-comment-src { font-size: 12.5px; color: var(--km-muted); }
.km-comment-actions { display: flex; align-items: center; gap: 4px; margin: 0; }

.km-friends-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .km-friends-grid { grid-template-columns: 1fr; } }
.km-friends-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; }
.km-friends-side .km-card { margin: 0; }
.km-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 14px 20px 20px; }
.km-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 16px 10px 12px; border: 1px solid var(--km-border); border-radius: 14px; background: var(--km-surface); }
.km-person:hover { box-shadow: var(--km-shadow); }
.km-person-pic { position: relative; margin-bottom: 6px; }
.km-person-pic img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; max-width: none; box-shadow: 0 0 0 3px var(--km-surface), 0 0 0 5px var(--km-primary-soft); }
.km-online { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--km-success); border: 2px solid var(--km-surface); }
.km-person-name { font-weight: 500; color: var(--km-text) !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-person-sub { font-size: 12px; color: var(--km-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.km-person .km-chip { margin-top: 4px; font-size: 11px; }
.km-person-actions { display: flex; gap: 4px; align-items: center; margin-top: 10px; }
.km-mini-list { display: flex; flex-direction: column; padding: 6px 0; }
.km-mini-row { display: flex; align-items: center; gap: 10px; padding: 7px 18px; color: var(--km-text) !important; text-decoration: none !important; }
.km-mini-row:hover { background: var(--km-surface-2); }
.km-mini-row .km-avatar { width: 32px; height: 32px; }
.km-mini-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.km-date-chip { flex: 0 0 auto; width: 42px; text-align: center; border-radius: 10px; background: var(--km-surface-2); border: 1px solid var(--km-border); font-size: 10.5px; line-height: 1.2; padding: 3px 0; color: var(--km-muted); }
.km-date-chip b { display: block; font-size: 16px; color: var(--km-text); font-weight: 600; }
.km-date-chip.is-today { background: var(--km-primary); border-color: var(--km-primary); color: #fff; }
.km-date-chip.is-today b { color: #fff; }

.km-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.km-board { display: flex; flex-direction: column; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 16px; overflow: hidden; box-shadow: var(--km-shadow-sm); }
.km-board:hover { box-shadow: var(--km-shadow); }
.km-board.is-banned { opacity: .7; }
.km-board-pic { display: block; aspect-ratio: 16 / 7; background: var(--km-surface-2) center / cover no-repeat; }
.km-board-body { padding: 12px 14px 4px; flex: 1; }
.km-board-name { display: block; font-size: 16px; font-weight: 500; color: var(--km-text) !important; margin-bottom: 6px; }
.km-board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.km-board-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--km-muted); }
.km-board-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 14px 12px; }

.km-rss-add { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.km-rss-add .btn { margin-bottom: 16px; height: 40px; }
.km-rss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.km-rss-card { margin: 0; }
.km-rss-card.is-flash { animation: km-flash 1.2s ease; }
.km-rss-card .km-card-head { gap: 8px; }
.km-rss-card .km-card-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.km-rss-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #fff4e5; color: #f79009; flex: 0 0 auto; }
.km-rss-card .km-field { margin-bottom: 12px; }
.km-rss-card .km-field label { font-size: 12.5px; margin-bottom: 4px; }
.km-rss-card .form-control { height: 38px; }
.km-rss-switches { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.km-rss-foot { padding: 0 20px 16px; text-align: right; }

/* ---------- ready-made layouts (setting.php?p=theme, setting_theme_combos.php) ---------- */
.km-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.km-combo { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; border: 1px solid var(--km-border); border-radius: 14px; background: var(--km-surface); color: var(--km-text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s var(--km-ease); }
.km-combo:hover, .km-combo:focus-visible { border-color: var(--km-primary); box-shadow: var(--km-shadow); transform: translateY(-2px); outline: none; }
.km-combo.is-current { border-color: var(--km-primary); box-shadow: 0 0 0 3px var(--km-primary-ring); }
.km-combo.is-busy { opacity: .6; pointer-events: none; }
.km-combo-thumb { display: block; height: 210px; box-sizing: border-box; padding: 10px; border-radius: 10px; background: var(--km-bg); margin-bottom: 4px; }
.km-combo-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.km-combo-name .km-chip { font-weight: 400; font-size: 11px; padding: 1px 8px; }
.km-combo-desc { font-size: 13px; color: var(--km-muted); line-height: 1.45; }
.km-combo-meta { font-size: 12px; color: var(--km-muted); margin-top: auto; padding-top: 4px; }
.km-wire { display: block; width: 100%; height: 100%; }
.km-wire .kw-page { fill: #fff; stroke: var(--km-border-strong); }
.km-wire .kw-chrome { fill: #eef1f5; }
.km-wire .kw-card { fill: #fff; stroke: #e4e7ec; stroke-width: .6; }
.km-wire .kw-ln { fill: #e4e7ec; }
.km-wire .kw-dk { fill: #98a2b3; }
.km-wire .kw-wh { fill: rgba(255, 255, 255, .9); }
.km-wire .kw-pri { fill: var(--km-primary); }
.km-wire .kw-soft { fill: var(--km-primary-soft); }
.km-wire .kw-soft2 { fill: #dbe3ee; }
.km-wire .kw-bub { fill: #f2f4f7; }
.km-wire .kw-acc { fill: var(--km-warning); }
.km-wire .kw-foot { fill: #e4e7ec; }

/* ---------------- shared HTML code editor (assets/km-code.js) ---------------- */
.km-code-bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.km-code-open {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--km-border); background: var(--km-surface); color: var(--km-muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.km-code-open:hover, .km-code-open:focus { border-color: var(--km-primary); color: var(--km-primary); background: var(--km-primary-soft); outline: none; }
.km-code-wrap { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.km-code-wrap > input { flex: 1 1 auto; min-width: 0; }
.km-code-wrap > .km-code-btn { flex: 0 0 auto; }
.km-code-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.km-code-quick label, .km-code-label { display: block; font-weight: 600; margin-bottom: 6px; }
.km-code-area { font-family: Consolas, Menlo, monospace; font-size: 13px; white-space: pre; resize: vertical; tab-size: 2; }
.km-code-hint { margin: 6px 0 14px; }
.km-code-preview { width: 100%; height: 240px; border: 1px solid var(--km-border); border-radius: 8px; background: #fff; }
.km-code-modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.km-code-modal .modal-footer .btn + .btn { margin-left: 0; }
.km-code-note { margin-right: auto; font-size: 12.5px; color: var(--km-muted); text-align: left; }
@media (max-width: 640px) { .km-code-quick { grid-template-columns: 1fr; } }