@charset "UTF-8";
/* =====================================================================
   Kamanjat themes
     classic : the site's own colours, refined   (default)
     pearl   : Apple-inspired cream / pearl, glass and silk
     night   : calm, low-glare night
   html[data-kmn-theme] is set in <head> by kmn_theme.php before the first paint;
   jscript/kmn-theme.js builds the backdrop + switch and tags inline colours:
     [data-kink]  element with its own dark/saturated text colour  (--kn night, --kp pearl)
     [data-kbg]   element with its own light background
   ===================================================================== */

/* ---------- tokens ---------- */
html[data-kmn-theme] {
  --k-ease: cubic-bezier(.32, .72, 0, 1);
  --k-radius: 14px;
  --k-text: #212529;
  --k-text-2: #5f6670;
  --k-accent: #007bff;
  --k-surface: #fff;
  --k-surface-2: #fdf5ec;
  --k-hairline: rgba(237, 31, 145, .28);
  --k-shadow: 0 1px 2px rgba(40, 30, 70, .06), 0 14px 34px -14px rgba(60, 40, 100, .22);
  --k-nav: linear-gradient(180deg, rgba(168, 168, 188, .86), rgba(146, 146, 168, .86));
  --k-nav-line: rgba(255, 255, 255, .35);
  --k-seam: rgba(80, 80, 110, .16);
  --k-pop: rgba(240, 240, 246, .9);
  --k-pill: rgba(255, 255, 255, .62);
  --k-pill-thumb: #fff;
  --k-pill-ico: #4f5864;
  --k-pill-ico-on: #bd584d;
}

html[data-kmn-theme="pearl"] {
  --k-radius: 20px;
  --k-text: #1d1d1f;
  --k-text-2: #6e6e73;
  --k-accent: #0071e3;
  --k-link: #0066cc;
  --k-surface: rgba(255, 255, 255, .78);
  --k-surface-solid: #fffefb;
  --k-surface-2: rgba(250, 247, 241, .9);
  --k-hairline: rgba(0, 0, 0, .075);
  --k-shadow: 0 1px 1px rgba(60, 50, 30, .03), 0 2px 6px rgba(60, 50, 30, .03), 0 22px 48px -22px rgba(70, 60, 40, .20);
  --k-nav: rgba(251, 250, 246, .72);
  --k-nav-line: rgba(0, 0, 0, .07);
  --k-nav-text: rgba(29, 29, 31, .80);
  --k-nav-hover: rgba(0, 0, 0, .045);
  --k-nav-on: rgba(0, 0, 0, .075);
  --k-seam: rgba(120, 110, 90, .10);
  --k-pop: rgba(252, 251, 248, .86);
  --k-input: rgba(255, 255, 255, .85);
  --k-input-line: rgba(0, 0, 0, .12);
  --k-pill: rgba(232, 229, 222, .55);
  --k-pill-thumb: #fff;
  --k-pill-ico: #86868b;
  --k-pill-ico-on: #1d1d1f;
}

html[data-kmn-theme="night"] {
  --k-radius: 20px;
  --k-text: #e6e7ee;
  --k-text-2: #a2a6b6;
  --k-accent: #6ea8ff;
  --k-link: #8ab8ff;
  --k-surface: rgba(22, 25, 36, .74);
  --k-surface-solid: #161924;
  --k-surface-2: rgba(255, 255, 255, .035);
  --k-hairline: rgba(255, 255, 255, .075);
  --k-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -24px rgba(0, 0, 0, .75);
  --k-nav: rgba(15, 17, 26, .66);
  --k-nav-line: rgba(255, 255, 255, .07);
  --k-nav-text: rgba(232, 233, 242, .78);
  --k-nav-hover: rgba(255, 255, 255, .06);
  --k-nav-on: rgba(255, 255, 255, .11);
  --k-seam: rgba(0, 0, 0, .38);
  --k-pop: rgba(24, 27, 39, .88);
  --k-input: rgba(255, 255, 255, .055);
  --k-input-line: rgba(255, 255, 255, .12);
  --k-pill: rgba(28, 31, 44, .62);
  --k-pill-thumb: rgba(255, 255, 255, .14);
  --k-pill-ico: #8d92a5;
  --k-pill-ico-on: #f1f2f7;
  color-scheme: dark;
}

/* =====================================================================
   1. Backdrop: one fixed layer per theme, cross-faded; silk drifts slowly
   ===================================================================== */
/* classic keeps the page's own background image until the script moves it into its layer;
   pearl / night never show it (no flash before the script runs) */
html[data-kmn-theme] body.kmn-themed,
html[data-kmn-theme="pearl"] body,
html[data-kmn-theme="night"] body {
  background-image: none !important;
  background-color: transparent !important;
}
html[data-kmn-theme="classic"] { background: #ececef; }
html[data-kmn-theme="pearl"] { background: #f6f3ec url("../img/theme/silk-pearl.jpg") center / cover fixed no-repeat; }
html[data-kmn-theme="night"] { background: #0b0d15 url("../img/theme/night-market.jpg") center / cover fixed no-repeat; }

/* pages inside an index.php frame sit on the parent's surface: fully transparent */
html[data-kmn-frame][data-kmn-theme="pearl"], html[data-kmn-frame][data-kmn-theme="night"] { background: transparent !important; }
html[data-kmn-frame][data-kmn-theme="pearl"] [data-kbg],
html[data-kmn-frame][data-kmn-theme="night"] [data-kbg] { background-color: transparent !important; }

/* 130vh tall: the script lifts it (parallax) by up to 28vh while the page scrolls */
#kmn-bg {
  position: fixed; top: 0; left: 0; right: 0; height: 130vh; z-index: -1;
  overflow: hidden; pointer-events: none;
  transform-origin: 50% 0; will-change: transform;
}
#kmn-bg > i {
  position: absolute; inset: 0; opacity: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: opacity 1.4s var(--k-ease);
}
/* every theme breathes on its own: slow, but visible */
#kmn-bg > .kb-classic, #kmn-bg > .kb-pearl, #kmn-bg > .kb-night {
  inset: -8%;
  will-change: transform;
}
#kmn-bg > .kb-classic { animation: kmn-sway 30s ease-in-out infinite alternate; }
#kmn-bg > .kb-pearl { background-image: url("../img/theme/silk-pearl.jpg"); animation: kmn-drift 26s ease-in-out infinite alternate; }
/* night: the market sky glides sideways, like a chart scrolling — no rotation */
#kmn-bg > .kb-night { background-image: url("../img/theme/night-market.jpg"); animation: kmn-pan 32s ease-in-out infinite alternate; }
/* slow colour breathing over the silk */
#kmn-bg > .kb-veil {
  inset: -20%;
  animation: kmn-breathe 20s ease-in-out infinite alternate;
}
html[data-kmn-theme="classic"] #kmn-bg > .kb-classic,
html[data-kmn-theme="pearl"] #kmn-bg > .kb-pearl,
html[data-kmn-theme="night"] #kmn-bg > .kb-night { opacity: 1; }
html[data-kmn-theme="pearl"] #kmn-bg > .kb-veil {
  opacity: 1;
  background:
    radial-gradient(42% 38% at 18% 22%, rgba(255, 244, 226, .55), transparent 70%),
    radial-gradient(38% 36% at 82% 30%, rgba(226, 230, 250, .50), transparent 70%),
    radial-gradient(46% 40% at 60% 88%, rgba(240, 228, 246, .45), transparent 72%);
}
html[data-kmn-theme="night"] #kmn-bg > .kb-veil {
  opacity: 1;
  background:
    radial-gradient(40% 36% at 20% 18%, rgba(70, 80, 160, .16), transparent 70%),
    radial-gradient(40% 40% at 85% 75%, rgba(30, 110, 130, .13), transparent 72%);
}
@keyframes kmn-sway {
  0%   { transform: scale(1.00) translate3d(-2.5%, -1%, 0); }
  100% { transform: scale(1.08) translate3d(2.5%, 1.5%, 0); }
}
@keyframes kmn-drift {
  0%   { transform: scale(1.00) translate3d(-3.5%, -2%, 0) rotate(-1deg); }
  100% { transform: scale(1.12) translate3d(3.5%, 2%, 0) rotate(1deg); }
}
@keyframes kmn-pan {
  0%   { transform: scale(1.06) translate3d(5%, 0.5%, 0); }
  100% { transform: scale(1.06) translate3d(-5%, -1%, 0); }
}
@keyframes kmn-breathe {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  100% { transform: translate3d(6%, 4%, 0) scale(1.12); }
}

/* =====================================================================
   2. Header: glass bar, sticky, with a soft blur seam under it (all themes)
   ===================================================================== */
html[data-kmn-theme] #cssmenu {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 1000;
  isolation: isolate;
}
/* the glass itself lives on ::before so the seam below can still blur the page */
html[data-kmn-theme] #cssmenu::before {
  content: ""; display: block; position: absolute; inset: 0; height: auto; z-index: -1;
  background: var(--k-nav) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 var(--k-nav-line) !important;
  transition: background .8s var(--k-ease);
}
/* the seam: content passing under the header melts into a progressive blur + shadow */
html[data-kmn-theme] #cssmenu::after {
  content: ""; display: block; clear: none;
  position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none;
  background: linear-gradient(to bottom, var(--k-seam), rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
html[data-kmn-theme] #cssmenu > ul {
  background: transparent !important;
  border: 0 !important;
}
html[data-kmn-theme] #cssmenu ul a {
  transition: background-color .35s var(--k-ease), color .35s var(--k-ease), box-shadow .35s var(--k-ease), transform .35s var(--k-ease);
}
/* drop-down: floating glass card */
html[data-kmn-theme] #cssmenu ul .has-sub ul {
  background: var(--k-pop) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--k-nav-line);
  border-radius: 14px !important;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .06) !important;
  padding: 6px !important;
  overflow: hidden;
}
html[data-kmn-theme] #cssmenu ul .has-sub ul a {
  border-radius: 9px !important; border: 0 !important; text-align: right !important;
  margin: 1px 0;
}
html[data-kmn-theme] #cssmenu ul .has-sub li:hover > a:after { display: none; }
/* ?w=2 section bar (mazaya_mem.php) pins itself to top:-15px while scrolling:
   keep it just under the sticky header (--kmn-hdr is measured by the script) */
@media (min-width: 901px) {
  html[data-kmn-theme] #menu.fixed { top: calc(var(--kmn-hdr, 43px) - 15px) !important; }
}
html[data-kmn-theme="pearl"] #menu.default, html[data-kmn-theme="pearl"] #menu.fixed,
html[data-kmn-theme="night"] #menu.default, html[data-kmn-theme="night"] #menu.fixed {
  background: var(--k-pop) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .35) !important;
}
html[data-kmn-theme="pearl"] #menu.default, html[data-kmn-theme="night"] #menu.default { border-radius: 14px; border: 1px solid var(--k-nav-line); }
/* phones (layout is 640px wide and scaled down): no sticky header, it costs space */
@media (max-width: 900px) {
  html[data-kmn-theme] #cssmenu { position: relative; }
  html[data-kmn-theme] #cssmenu::after { height: 18px; }
}
/* phones: overflow-x:hidden on <body> would break sticky elsewhere; clip does not */
@media (max-width: 767.98px) {
  html[data-kmn-theme], html[data-kmn-theme] body { overflow-x: clip !important; }
}

/* ---------- classic header: same colours, softer and more precise ---------- */
/* the bar keeps the site's original gradient (img/pp.png: #f3f3f3 -> silver) and its #9999aa edge */
html[data-kmn-theme="classic"] #cssmenu::before {
  background: #9999aa url("../img/pp.png") repeat-x left top !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 -1px 0 #9999aa !important;
}
/* menu buttons: pearl white (soft sheen on top, warm ivory below) */
html[data-kmn-theme="classic"] #cssmenu ul a {
  background-color: #f7f5f0 !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfaf6 45%, #efece5 100%) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(120, 115, 105, .16), 0 1px 2px rgba(40, 40, 60, .14), 0 4px 10px -6px rgba(40, 40, 60, .28) !important;
}
html[data-kmn-theme="classic"] #cssmenu > ul > li:hover > a {
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #f5f2ec 100%) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(120, 115, 105, .20), 0 2px 4px rgba(40, 40, 60, .14), 0 8px 18px -8px rgba(40, 40, 60, .32) !important;
  transform: translateY(-1px);
}
html[data-kmn-theme="classic"] #cssmenu ul .active > a,
html[data-kmn-theme="classic"] #cssmenu > ul > li.active:hover > a {
  background-image: linear-gradient(180deg, #f6a597, #cf6656) !important;
  color: #fff !important; text-shadow: 0 1px 1px rgba(120, 30, 20, .35) !important;
}
html[data-kmn-theme="classic"] #cssmenu ul .has-sub ul a { background-image: none !important; box-shadow: none !important; }
html[data-kmn-theme="classic"] #cssmenu ul .has-sub li:hover > a {
  background-image: linear-gradient(180deg, #5d6878, #48525e) !important; color: #fff !important; box-shadow: none !important;
}
html[data-kmn-theme="classic"] #cssmenu input[type=text],
html[data-kmn-theme="classic"] #cssmenu input[type=password] {
  border: 1px solid rgba(60, 60, 90, .25); border-radius: 7px; height: 26px; background: rgba(255, 255, 255, .9);
}
html[data-kmn-theme="classic"] #cssmenu input.zr { border-radius: 8px !important; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6); }

/* ---------- pearl + night header: Apple-style text navigation ---------- */
html[data-kmn-theme="pearl"] #cssmenu ul a,
html[data-kmn-theme="night"] #cssmenu ul a {
  background: transparent !important;
  box-shadow: none !important; text-shadow: none !important;
  color: var(--k-nav-text) !important;
  border-radius: 980px !important;
}
html[data-kmn-theme="pearl"] #cssmenu ul a span,
html[data-kmn-theme="night"] #cssmenu ul a span { color: inherit !important; }
html[data-kmn-theme="pearl"] #cssmenu > ul > li:hover > a,
html[data-kmn-theme="night"] #cssmenu > ul > li:hover > a {
  background: var(--k-nav-hover) !important; color: var(--k-text) !important;
}
html[data-kmn-theme="pearl"] #cssmenu ul .active > a,
html[data-kmn-theme="night"] #cssmenu ul .active > a,
html[data-kmn-theme="pearl"] #cssmenu > ul > li.active:hover > a,
html[data-kmn-theme="night"] #cssmenu > ul > li.active:hover > a {
  background: var(--k-nav-on) !important; color: var(--k-text) !important; font-weight: 700;
}
html[data-kmn-theme="pearl"] #cssmenu ul .has-sub li:hover > a,
html[data-kmn-theme="night"] #cssmenu ul .has-sub li:hover > a {
  background: var(--k-accent) !important; color: #fff !important; box-shadow: none !important;
}
html[data-kmn-theme="pearl"] #cssmenu input[type=text],
html[data-kmn-theme="pearl"] #cssmenu input[type=password],
html[data-kmn-theme="night"] #cssmenu input[type=text],
html[data-kmn-theme="night"] #cssmenu input[type=password] {
  background: var(--k-input); color: var(--k-text);
  border: 1px solid var(--k-input-line); border-radius: 8px; height: 26px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
html[data-kmn-theme="pearl"] #cssmenu input:focus,
html[data-kmn-theme="night"] #cssmenu input:focus {
  border-color: var(--k-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 22%, transparent);
}
html[data-kmn-theme="pearl"] #cssmenu input.zr,
html[data-kmn-theme="pearl"] #cssmenu .kmn-login-tgl {
  background: #1d1d1f !important; color: #fff !important; border-radius: 980px !important;
}
html[data-kmn-theme="night"] #cssmenu input.zr,
html[data-kmn-theme="night"] #cssmenu .kmn-login-tgl {
  background: #e9eaf1 !important; color: #10121a !important; border-radius: 980px !important;
}
html[data-kmn-theme="pearl"] #cssmenu .kmn-login-panel,
html[data-kmn-theme="night"] #cssmenu .kmn-login-panel {
  background: var(--k-pop); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--k-nav-line); border-radius: 14px;
}
html[data-kmn-theme="night"] .navbar-light .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
html[data-kmn-theme="night"] .navbar-toggler { border-color: var(--k-hairline) !important; }

/* =====================================================================
   3. Surfaces: cards, panels, lists (classic = gentle refinement only)
   ===================================================================== */
html[data-kmn-theme] .card {
  border-radius: var(--k-radius) !important;
  box-shadow: var(--k-shadow);
  transition: box-shadow .5s var(--k-ease), background-color .8s var(--k-ease), border-color .8s var(--k-ease);
}
html[data-kmn-theme="classic"] .card { border-color: var(--k-hairline) !important; }
html[data-kmn-theme] .card > .card-header:first-child { border-radius: var(--k-radius) var(--k-radius) 0 0; }
html[data-kmn-theme] .card-header[style*="width"] {      /* the standalone notice boxes */
  border-radius: var(--k-radius); border: 1px solid var(--k-hairline);
  box-shadow: var(--k-shadow); padding: 1.1rem 1.4rem; line-height: 1.9;
}
html[data-kmn-theme="classic"] .card-header[style*="width"] { background: rgba(255, 255, 255, .72); }
html[data-kmn-theme] iframe:not([width="0"]):not([style*="display: none"]) { border-radius: calc(var(--k-radius) - 4px); }
html[data-kmn-theme] .carousel, html[data-kmn-theme] .carousel-inner { border-radius: calc(var(--k-radius) - 2px); overflow: hidden; }
html[data-kmn-theme] .btn { border-radius: 10px; transition: all .35s var(--k-ease); }
html[data-kmn-theme="classic"] .btn-primary { box-shadow: 0 6px 16px -8px rgba(0, 90, 200, .6); }

/* pearl + night: glass surfaces with hairlines instead of coloured borders */
html[data-kmn-theme="pearl"] body, html[data-kmn-theme="night"] body { color: var(--k-text); }
html[data-kmn-theme="pearl"] .card,
html[data-kmn-theme="night"] .card {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-hairline) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  color: var(--k-text);
}
html[data-kmn-theme="pearl"] .card-header,
html[data-kmn-theme="night"] .card-header {
  background: transparent; border-bottom: 1px solid var(--k-hairline); color: var(--k-text);
}
html[data-kmn-theme="pearl"] .card-header[style*="width"],
html[data-kmn-theme="night"] .card-header[style*="width"] {
  background: var(--k-surface); color: var(--k-text-2);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
html[data-kmn-theme="pearl"] .card-title, html[data-kmn-theme="night"] .card-title { color: var(--k-text); }
html[data-kmn-theme="pearl"] .list-group-item,
html[data-kmn-theme="night"] .list-group-item {
  background: transparent !important; color: var(--k-text); border-color: var(--k-hairline) !important;
}
html[data-kmn-theme="pearl"] .list-group,
html[data-kmn-theme="night"] .list-group { background: var(--k-surface-2) !important; border-radius: calc(var(--k-radius) - 6px); }
/* <ul class="list-group" dir="rtl"> kept the browser's 40px RTL indent as an empty strip */
html[data-kmn-theme] ul.list-group { padding-inline-start: 0; padding-right: 0; }
/* hand-drawn boxes (inline borders) get the theme hairline and soft corners */
html[data-kmn-theme="pearl"] [style*="border-color"]:not(input):not(select):not(.btn),
html[data-kmn-theme="night"] [style*="border-color"]:not(input):not(select):not(.btn) { border-color: var(--k-hairline) !important; }
html[data-kmn-theme="pearl"] [data-kbg][style*="border"],
html[data-kmn-theme="night"] [data-kbg][style*="border"] { border-radius: 14px !important; }
html[data-kmn-theme="pearl"] [data-kbg] { background-color: var(--k-surface-2) !important; background-image: none !important; }
html[data-kmn-theme="night"] [data-kbg] { background-color: var(--k-surface-2) !important; background-image: none !important; }
html[data-kmn-theme="pearl"] .card [data-kbg]:first-child,
html[data-kmn-theme="night"] .card [data-kbg]:first-child { border-radius: calc(var(--k-radius) - 6px); }
html[data-kmn-theme="pearl"] h1, html[data-kmn-theme="pearl"] h2, html[data-kmn-theme="pearl"] h3,
html[data-kmn-theme="pearl"] h4, html[data-kmn-theme="pearl"] h5, html[data-kmn-theme="pearl"] h6,
html[data-kmn-theme="night"] h1, html[data-kmn-theme="night"] h2, html[data-kmn-theme="night"] h3,
html[data-kmn-theme="night"] h4, html[data-kmn-theme="night"] h5, html[data-kmn-theme="night"] h6 { color: var(--k-text); }
html[data-kmn-theme="pearl"] a:not([style*="color"]):not(.btn) { color: var(--k-link); }
html[data-kmn-theme="night"] a:not([style*="color"]):not(.btn) { color: var(--k-link); }
html[data-kmn-theme="pearl"] hr, html[data-kmn-theme="night"] hr { border-color: var(--k-hairline); }

/* inline text colours: soften on pearl, re-light on night (values set per element by the script) */
html[data-kmn-theme="pearl"] [data-kink] { color: var(--kp) !important; }
html[data-kmn-theme="night"] [data-kink] { color: var(--kn) !important; }
/* embossed text (white + black shadows) turns to smudge on dark */
html[data-kmn-theme="night"] [style*="text-shadow"] { text-shadow: none !important; }

/* buttons */
html[data-kmn-theme="pearl"] .btn-primary, html[data-kmn-theme="pearl"] input.btn-primary {
  background: var(--k-accent) !important; border-color: var(--k-accent) !important; border-radius: 980px !important;
  box-shadow: 0 8px 18px -10px rgba(0, 113, 227, .7);
}
html[data-kmn-theme="pearl"] .btn-primary:hover { background: #0077ed !important; }
html[data-kmn-theme="night"] .btn-primary, html[data-kmn-theme="night"] input.btn-primary {
  background: #3d7be0 !important; border-color: #3d7be0 !important; border-radius: 980px !important; color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(61, 123, 224, .8);
}

/* form fields */
html[data-kmn-theme="pearl"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not(.btn),
html[data-kmn-theme="pearl"] select, html[data-kmn-theme="pearl"] textarea,
html[data-kmn-theme="night"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not(.btn),
html[data-kmn-theme="night"] select, html[data-kmn-theme="night"] textarea {
  background-color: var(--k-input) !important; color: var(--k-text) !important;
  border: 1px solid var(--k-input-line) !important; border-radius: 10px;
  transition: border-color .3s, box-shadow .3s;
}
html[data-kmn-theme="pearl"] input:focus, html[data-kmn-theme="pearl"] select:focus, html[data-kmn-theme="pearl"] textarea:focus,
html[data-kmn-theme="night"] input:focus, html[data-kmn-theme="night"] select:focus, html[data-kmn-theme="night"] textarea:focus {
  border-color: var(--k-accent) !important; outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-accent) 20%, transparent) !important;
}
html[data-kmn-theme="night"] option, html[data-kmn-theme="night"] optgroup { background: #1b1e2b !important; color: var(--k-text) !important; }
html[data-kmn-theme="night"] ::placeholder { color: #7d8294; }

/* tables */
html[data-kmn-theme="pearl"] table, html[data-kmn-theme="night"] table { border-color: var(--k-hairline); }
html[data-kmn-theme="pearl"] .table, html[data-kmn-theme="night"] .table { color: var(--k-text); }
html[data-kmn-theme="pearl"] .table td, html[data-kmn-theme="pearl"] .table th,
html[data-kmn-theme="night"] .table td, html[data-kmn-theme="night"] .table th { border-color: var(--k-hairline); }

/* the animated "المايسترو" word */
html[data-kmn-theme="pearl"] .animate-charcter {
  background-image: linear-gradient(-225deg, #1d1d1f 0%, #5e5ce6 35%, #bf5af2 65%, #ff9f0a 100%) !important;
  animation-duration: 6s !important;
}
html[data-kmn-theme="night"] .animate-charcter {
  background-image: linear-gradient(-225deg, #c9c7ff 0%, #9d8cff 30%, #ff7aa8 66%, #ffd36e 100%) !important;
  animation-duration: 6s !important;
}

/* night: dim everything that cannot follow the theme (external frames, photos) */
html[data-kmn-theme="night"] iframe:not(.kmn-themed-frame) { filter: brightness(.86) contrast(.96); }
html[data-kmn-theme="night"] .carousel img,
html[data-kmn-theme="night"] .card img:not(.kmn-logo):not([src*="img/theme/"]) { filter: brightness(.9); }
html[data-kmn-theme="night"] #kmn-ver { color: #5d6275 !important; }
html[data-kmn-theme="night"] img[src*="hitwebcounter"] { filter: invert(1) hue-rotate(180deg); opacity: .5; }
html[data-kmn-theme="pearl"] .bg-white, html[data-kmn-theme="pearl"] .bg-light { background: var(--k-surface-2) !important; }
html[data-kmn-theme="night"] .bg-white, html[data-kmn-theme="night"] .bg-light { background: var(--k-surface-2) !important; }
html[data-kmn-theme="night"] .text-dark { color: var(--k-text) !important; }

/* =====================================================================
   4. Theme switch: a quiet glass pill with a sliding thumb
   ===================================================================== */
#kmn-tt {
  position: fixed; left: 16px; bottom: 22px; z-index: 950;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  direction: rtl;
  background: var(--k-pill);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--k-nav-line);
  border-radius: 980px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(8px);
  transition: opacity .9s var(--k-ease), transform .9s var(--k-ease), background .8s var(--k-ease);
}
#kmn-tt.kmn-in { opacity: 1; transform: none; }
#kmn-tt button {
  position: relative; z-index: 1;
  width: 36px; height: 30px; padding: 0; margin: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 980px; background: transparent; cursor: pointer;
  color: var(--k-pill-ico);
  transition: color .5s var(--k-ease), transform .3s var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
#kmn-tt button:hover { color: var(--k-pill-ico-on); }
#kmn-tt button:active { transform: scale(.92); }
#kmn-tt button[aria-checked="true"] { color: var(--k-pill-ico-on); }
#kmn-tt button:focus { outline: none; box-shadow: none; }
#kmn-tt button:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
#kmn-tt svg { width: 17px; height: 17px; display: block; }
#kmn-tt .kmn-tt-thumb {
  position: absolute; z-index: 0; top: 4px; left: 0; width: 36px; height: 30px;
  border-radius: 980px; background: var(--k-pill-thumb);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: transform .6s var(--k-ease), background .8s var(--k-ease);
}
#kmn-tt .kmn-tt-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  white-space: nowrap; pointer-events: none;
  font: 12px/1 'Tajawal', 'DroidKufi-Regular', Tahoma, sans-serif; color: var(--k-text);
  background: var(--k-pop); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--k-nav-line); border-radius: 8px; padding: 7px 10px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .35s var(--k-ease), transform .35s var(--k-ease);
}
#kmn-tt .kmn-tt-tip.kmn-on { opacity: 1; transform: translate(-50%, 0); }
html[data-kmn-theme="classic"] #kmn-tt { border-color: rgba(255, 255, 255, .7); }
/* touch screens / the scaled 640px phone layout: bigger targets */
@media (max-width: 900px), (pointer: coarse) {
  #kmn-tt { left: 12px; bottom: 16px; padding: 5px; }
  #kmn-tt button, #kmn-tt .kmn-tt-thumb { width: 48px; height: 40px; }
  #kmn-tt .kmn-tt-thumb { top: 5px; }
  #kmn-tt svg { width: 22px; height: 22px; }
  #kmn-tt .kmn-tt-tip { font-size: 15px; }
}

/* =====================================================================
   5. Switching: View Transition cross-fade, or colour transitions as fallback
   ===================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
html.kmn-vt *, html.kmn-vt *::before, html.kmn-vt *::after { transition: none !important; }
html.kmn-anim body, html.kmn-anim body *:not(#kmn-tt):not(#kmn-tt *) {
  transition: background-color .8s var(--k-ease), color .8s var(--k-ease), border-color .8s var(--k-ease), box-shadow .8s var(--k-ease), filter .8s var(--k-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  #kmn-bg > i { animation: none !important; transition: none; }
  #kmn-tt .kmn-tt-thumb, #kmn-tt { transition: none; }
}
@media print {
  #kmn-bg, #kmn-tt { display: none !important; }
}