/* =========================================================
   KiKK: frosted-glass look (soft blue / teal)
   Used for: landing page buttons, subject tiles, topic rows.
   Soft tints on purpose: nothing here is a loud colour.
   ========================================================= */
:root { --g-tint: 112, 188, 218; }

/* ---- main buttons (the old emerald "liquid" button becomes a frosted pill) ---- */
.k-btn-primary.k-btn-liquid, .k-btn-primary.k-btn-liquid:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 47%, rgba(255,255,255,.02) 53%, rgba(var(--g-tint),.24) 100%),
    rgba(var(--g-tint), .26);
  color: #F3FAFF;
  border: 1px solid rgba(205, 236, 248, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -12px 18px rgba(70,160,200,.20), 0 12px 24px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(8, 34, 52, .5);
}
.k-btn-primary.k-btn-liquid:hover { filter: brightness(1.1); }
.k-btn-primary.k-btn-liquid:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -4px 10px rgba(70,160,200,.25), 0 4px 12px -6px rgba(0,0,0,.5); }
.k-btn-liquid::before { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)); }
.k-btn-liquid::after  { background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent); }
/* quiet buttons get the same glass, just fainter */
.k-btn-ghost, .k-btn-danger-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(200, 230, 245, .26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -8px rgba(0,0,0,.5);
}
.k-option {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(200, 230, 245, .3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -10px 16px rgba(70,160,200,.12), 0 8px 18px -10px rgba(0,0,0,.55);
}
.k-option svg { color: #9FD9EE !important; }

/* ---- subject tile (big) and topic row (compact) ---- */
.k-glass-tile, .k-glass-row {
  --tint: 112, 188, 218;
  position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.02) 54%, rgba(var(--tint),.22) 100%),
    rgba(var(--tint), .24);
  border: 1px solid rgba(215, 238, 250, .38);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -14px 20px rgba(var(--tint),.16), 0 14px 26px -12px rgba(0,0,0,.6);
  color: #F3FAFF; text-shadow: 0 1px 2px rgba(8,34,52,.5);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.k-glass-tile::before, .k-glass-row::before {
  content: ""; position: absolute; z-index: -1; left: 7%; right: 7%; top: 3px; height: 40%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)); pointer-events: none;
}
.k-glass-tile:active, .k-glass-row:active { transform: scale(.965, .94); transition-duration: .1s; }
@media (hover: hover) { .k-glass-tile:hover, .k-glass-row:hover { filter: brightness(1.1); } }
.k-glass-tile { border-radius: 26px; }
.k-glass-row  { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 12px 0 7px; border-radius: 23px;
                font-family: inherit; font-size: 15px; font-weight: 800; text-align: left; }
.k-glass-row .k-rn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900;
                     background: rgba(8, 34, 52, .32); box-shadow: inset 0 1.5px 3px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.2); }
.k-glass-row .k-rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-glass-row .k-rc { flex: none; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 12px; background: rgba(8,34,52,.28); }
.k-glass-row svg, .k-glass-row i { flex: none; width: 16px; height: 16px; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .k-glass-tile, .k-glass-row, .k-btn-liquid::after { transition: none; animation: none; } }

/* =========================================================
   CLEAR GLASS buttons (adapted for KiKK's dark screens from the "Sleep / Do not disturb" glass pill):
   frosted body, a thin edge whose light shifts when touched, a light sweep across the surface on press,
   and a soft shadow underneath. Applies to: main buttons, dashboard tiles, topic rows.
   ========================================================= */
@property --kg-edge { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --kg-shine { syntax: "<angle>"; inherits: false; initial-value: -45deg; }
.k-btn-primary.k-btn-liquid, .k-glass-tile, .k-glass-row {
  --kg-time: 400ms; --kg-ease: cubic-bezier(.25, 1, .5, 1); --kg-bw: 1.2px;
  background:
    linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.2), rgba(255,255,255,.05)),
    rgba(var(--tint, 112,188,218), .2) !important;
  border: 0 !important;
  color: #F6FBFF !important;
  text-shadow: 0 .12em .1em rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.18),
    inset 0 -.125em .125em rgba(255,255,255,.28),
    0 .45em .5em -.2em rgba(0,0,0,.5),
    0 0 .1em .25em inset rgba(255,255,255,.08) !important;
  transition: transform var(--kg-time) var(--kg-ease), box-shadow var(--kg-time) var(--kg-ease), filter .25s ease;
}
/* the thin edge: light on two opposite corners, which turns when the button is touched */
.k-btn-primary.k-btn-liquid::after, .k-glass-tile::after, .k-glass-row::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  padding: var(--kg-bw); box-sizing: border-box; opacity: 1; animation: none; transform: none; width: auto; height: auto; left: 0; top: 0;
  background:
    conic-gradient(from var(--kg-edge) at 50% 50%, rgba(255,255,255,.75), rgba(255,255,255,0) 6% 40%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 60% 94%, rgba(255,255,255,.75)),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --kg-edge 500ms ease;
}
/* the light sweep across the glass */
.k-btn-primary.k-btn-liquid::before, .k-glass-tile::before, .k-glass-row::before {
  content: ""; position: absolute; inset: 1px; left: 1px; right: 1px; top: 1px; height: auto; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--kg-shine), rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 40% 50%, rgba(255,255,255,0) 55%) !important;
  background-size: 200% 200% !important; background-position: 0% 50%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 1;
  transition: background-position calc(var(--kg-time) * 1.25) var(--kg-ease), --kg-shine calc(var(--kg-time) * 1.25) var(--kg-ease);
}
@media (hover: hover) {
  .k-btn-primary.k-btn-liquid:hover, .k-glass-tile:hover, .k-glass-row:hover { transform: scale(.985); filter: brightness(1.08); }
  .k-btn-primary.k-btn-liquid:hover::after, .k-glass-tile:hover::after, .k-glass-row:hover::after { --kg-edge: -125deg; }
  .k-btn-primary.k-btn-liquid:hover::before, .k-glass-tile:hover::before, .k-glass-row:hover::before { background-position: 25% 50%; }
}
.k-btn-primary.k-btn-liquid:active, .k-glass-tile:active, .k-glass-row:active {
  transform: scale(.97); transition-duration: .12s;
  box-shadow: inset 0 .125em .125em rgba(0,0,0,.22), inset 0 -.125em .125em rgba(255,255,255,.3),
              0 .2em .15em -.1em rgba(0,0,0,.5), 0 0 .05em .1em inset rgba(255,255,255,.25) !important;
}
.k-btn-primary.k-btn-liquid:active::after, .k-glass-tile:active::after, .k-glass-row:active::after { --kg-edge: -40deg; }
.k-btn-primary.k-btn-liquid:active::before, .k-glass-tile:active::before, .k-glass-row:active::before { background-position: 50% 15%; --kg-shine: -15deg; }
/* keep text, icons and badges above the glass layers */
.k-btn-primary.k-btn-liquid > *, .k-glass-tile > *, .k-glass-row > * { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .k-btn-primary.k-btn-liquid, .k-glass-tile, .k-glass-row, .k-btn-primary.k-btn-liquid::before, .k-glass-tile::before, .k-glass-row::before,
  .k-btn-primary.k-btn-liquid::after, .k-glass-tile::after, .k-glass-row::after { transition: none; }
}