/* ==========================================================================
   Kidz Klub Brighton & Hove — YOURLS theme
   Matches kidzklub.org.uk: navy header with a light-blue rule, white logo lockup,
   Lilita One headlines, Source Sans 3 text, warm off-white page, blue buttons.
   Light/dark follows the device setting.
   ========================================================================== */

:root {
  --kk-navy: #00345E;
  --kk-blue: #005496;
  --kk-sky: #2EA3F2;
  --kk-sky-soft: #7BC8F9;
  --kk-purple: #712A84;
  --kk-red: #C12026;
  --kk-yellow: #FFF10C;
  --kk-green: #4FAF85;

  --bg: #FCF8F4;
  --surface: #FFFFFF;
  --surface-2: #F5F0EA;
  --line: #E8E1D9;
  --line-strong: #D4CBC1;
  --ink: #262B33;
  --ink-2: #555E69;
  --ink-3: #858C95;
  --heading: #00345E;
  --link: #005496;
  --link-hover: #00345E;
  --primary: #005496;
  --primary-hover: #00345E;
  --primary-ink: #FFFFFF;
  --panel: #005496;
  --bar-bg: #00345E;
  --bar-rule: #2EA3F2;
  --danger: #C12026;
  --danger-soft: #FCE9E9;
  --ok: #2E7D5B;
  --ok-soft: #E4F4EC;
  --warn-soft: #FFFBD1;
  --focus: #2EA3F2;
  --row-hover: #FBF8F5;
  --shadow: 0 1px 2px rgba(0, 52, 94, .06), 0 8px 24px -14px rgba(0, 52, 94, .22);

  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --r-sm: 5px;
  --r: 10px;
  --r-lg: 14px;
  --bar-h: 75px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08182A;
    --surface: #0F2338;
    --surface-2: #16304B;
    --line: #22405E;
    --line-strong: #335577;
    --ink: #EEF3F8;
    --ink-2: #B3C2D1;
    --ink-3: #8094A9;
    --heading: #FFFFFF;
    --link: #7BC8F9;
    --link-hover: #B5E0FC;
    --primary: #7BC8F9;
    --primary-hover: #A3DAFB;
    --primary-ink: #00345E;
    --panel: #005496;
    --danger: #FF6B6B;
    --danger-soft: #3A1518;
    --ok: #6FD6A6;
    --ok-soft: #10291F;
    --warn-soft: #2E2A10;
    --row-hover: #132A42;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; }

body.kk {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
body.kk div, body.kk p, body.kk td, body.kk th,
body.kk input, body.kk select, body.kk textarea, body.kk button {
  font-family: var(--font-body);
  font-size: inherit;
}
body.kk a, body.kk a:link, body.kk a:visited, body.kk a:active { color: var(--link); text-decoration: none; }
body.kk a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
body.kk :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
body.kk code, body.kk tt { background: var(--surface-2); color: var(--ink); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
body.kk ::selection { background: var(--kk-yellow); color: #00345E; }

body.kk #wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  min-height: 0;
}

/* Hide the stock YOURLS logo header */
body.kk header[role="banner"] { display: none; }

/* ---------- Brand bar (navy, like the website header) ---------- */

.kk-bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  position: relative;
}
.kk-bar::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--bar-bg);
  border-bottom: 5px solid var(--bar-rule);
  z-index: -1;
}
.kk-brand { display: flex; align-items: center; gap: 16px; }
body.kk .kk-brand:hover { text-decoration: none; }
.kk-brand img { height: 44px; width: auto; display: block; }
.kk-brand-label {
  color: var(--kk-sky-soft); font-size: 15px; font-weight: 600;
  padding-left: 16px; border-left: 1px solid rgba(255,255,255,.25); line-height: 1.2;
}

/* ---------- Navigation ---------- */

body.kk nav[role="navigation"] {
  position: absolute;
  top: 0;
  right: 24px;
  height: var(--bar-h);
  display: flex;
  align-items: center;
}
body.kk ul#admin_menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  min-height: 0;
  list-style: none;
  font-size: 16px;
}
body.kk ul#admin_menu li { padding: 0; color: rgba(255,255,255,.8); position: relative; list-style: none; }
body.kk ul#admin_menu li:hover { list-style: none; color: #fff; }
body.kk ul#admin_menu > li > a,
body.kk ul#admin_menu > li > a:visited {
  display: block;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.88);
  font-weight: 600;
}
body.kk ul#admin_menu > li > a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
body.index   #admin_menu_admin_link > a,
body.tools   #admin_menu_tools_link > a,
body.plugins #admin_menu_plugins_link > a,
body[class*="plugin_page_"] #admin_menu_plugins_link > a {
  background: rgba(255,255,255,.12); color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--kk-sky-soft);
}
/* user + sign out sit at the end */
body.kk #admin_menu_logout_link { order: 99; display: flex; align-items: center; gap: 10px; margin-left: 10px; padding-left: 14px !important; border-left: 1px solid rgba(255,255,255,.25); }
.kk-user {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kk-yellow); color: var(--kk-navy);
  font-weight: 700; font-size: 15px; text-transform: uppercase;
}
body.kk a.kk-logout, body.kk a.kk-logout:visited { font-weight: 600; color: #fff; font-size: 15px; }
/* plugin admin pages: dropdown under "Plugins" */
body.kk ul#admin_menu li ul {
  display: none;
  position: absolute; top: 100%; right: 0; z-index: 20;
  min-width: 200px; margin: 6px 0 0; padding: 6px;
  list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
}
body.kk ul#admin_menu li ul:empty { display: none !important; }
body.kk ul#admin_menu li:hover > ul, body.kk ul#admin_menu li:focus-within > ul { display: block; }
body.kk ul#admin_menu li ul a { display: block; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); }
body.kk ul#admin_menu li ul a:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Titles (Lilita One, navy — like the website's headings) ---------- */

.kk-hero { margin: 40px 0 6px; }
.kk-title { margin: 0; float: none; max-width: none; line-height: 1.05; }
.kk-title span {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 54px);
  line-height: 1.05;
  color: var(--heading);
}
body.kk h2, body.kk h3 { color: var(--heading); line-height: 1.2; }
body.kk h2 { font-family: var(--font-title); font-weight: 400; font-size: 30px; margin: 32px 0 12px; }
body.kk h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }

/* ---------- Index: summary lines ---------- */

body.index #wrap > p:empty { display: none; }
body.index #wrap > p { margin: 0; color: var(--ink-3); font-size: 15px; }
body.index #wrap > p strong { color: var(--ink-2); }
body.index #wrap > #overall_tracking { margin: 10px 0 24px; color: var(--ink-2); font-size: 18px; }
body.index #wrap > #overall_tracking strong { color: var(--ink); }
/* Order: title, tracking sentence, form + table, then the "Display x to y" line */
body.index #wrap { display: flex; flex-direction: column; }
body.index #wrap > * { order: 5; }
body.index #wrap > .kk-bar, body.index #wrap > nav { order: 0; }
body.index #wrap > .kk-hero { order: 1; }
body.index #wrap > #overall_tracking { order: 2; }
body.index #wrap > main, body.index #wrap > #new_url, body.index #wrap > #shareboxes { order: 3; }
body.index #wrap > p:not(#overall_tracking) { order: 4; margin-top: 14px; font-size: 14px; }

/* ---------- Form controls ---------- */

body.kk input.text, body.kk select, body.kk textarea, body.kk input[type="text"], body.kk input[type="password"] {
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  margin: 0;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
body.kk select { padding-right: 28px; }
body.kk input.text:focus, body.kk textarea:focus, body.kk select:focus,
body.kk input[type="text"]:focus, body.kk input[type="password"]:focus {
  outline: none;
  border: 1px solid var(--kk-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-sky) 30%, transparent);
  margin: 0;
}
body.kk input.button, body.kk button.button, body.kk a.button:not(td.actions a) {
  font: 600 15px/1 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0 16px;
  height: 38px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
body.kk input.button:hover { background: var(--surface-2); border-color: var(--ink-3); }
body.kk input.button:active { transform: translateY(1px); }
body.kk input.button.primary, body.kk input#submit, body.kk input[id^="edit-submit-"] {
  background: var(--primary); border-color: var(--primary); color: var(--primary-ink);
}
body.kk input.button.primary:hover, body.kk input#submit:hover, body.kk input[id^="edit-submit-"]:hover {
  background: var(--primary-hover); border-color: var(--primary-hover);
}
body.kk input.button.disabled, body.kk #add-button.disabled { opacity: .55; cursor: progress; }
body.kk input.button.loading, body.kk #add-button.loading { cursor: progress; opacity: .8; background-image: none; }

/* ---------- New link panel (the one loud thing — a website-style blue tile) ---------- */

body.kk #new_url {
  position: relative;
  text-align: left;
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  background: var(--panel);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: #fff;
}
body.kk #new_url::before, body.kk #new_url::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
body.kk #new_url::before { width: 210px; height: 210px; right: -70px; top: -100px; background: var(--kk-sky-soft); opacity: .9; }
body.kk #new_url::after  { width: 120px; height: 120px; right: 100px; top: -72px; background: var(--kk-yellow); }
body.kk #new_url > div { background: transparent; padding: 0; position: relative; z-index: 1; }
body.kk #new_url_form { padding: 26px 28px 28px; }
body.kk #new_url_form > div {
  background: transparent; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px auto;
  grid-template-areas: "l1 l2 ." "u k b";
  column-gap: 12px; row-gap: 10px;
  align-items: end;
  font-size: 0; /* swallows the stray ":" text nodes */
}
body.kk #new_url_form label { font-size: 15px; color: rgba(255,255,255,.85); font-weight: 400; }
body.kk #new_url_form label strong { color: #fff; font-weight: 700; }
body.kk #new_url_form label[for="add-url"] { grid-area: l1; font-size: 15px; }
body.kk #new_url_form label[for="add-keyword"] { grid-area: l2; font-size: 15px; }
body.kk #new_url_form label[for="add-url"] strong { font-family: var(--font-title); font-weight: 400; font-size: 30px; display: block; line-height: 1; }
body.kk #new_url_form #add-url { grid-area: u; width: 100%; }
body.kk #new_url_form #add-keyword { grid-area: k; width: 100%; }
body.kk #new_url_form .text {
  min-height: 50px; font-size: 17px; border: 0; border-radius: var(--r-sm);
  background: #fff; color: #262B33;
}
body.kk #new_url_form .text::placeholder { color: #8A929B; }
body.kk #new_url_form .text:focus { box-shadow: 0 0 0 4px var(--kk-yellow); }
body.kk #add-button {
  grid-area: b;
  height: 50px; padding: 0 24px; border: 0; border-radius: var(--r-sm);
  background: var(--kk-yellow); color: var(--kk-navy);
  font-family: var(--font-body); font-size: 18px; font-weight: 700;
}
body.kk #add-button:hover { background: #fff; }
body.kk #new_url #feedback {
  background: rgba(0,0,0,.2); color: #fff; border: 0; border-radius: 0;
  width: auto; margin: 0; padding: 12px 28px; font-size: 15px;
}
body.kk #new_url #feedback .fail { color: #FFD1D4; }

/* ---------- Share / copy box after creating a link ---------- */

body.kk #shareboxes { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
body.kk div.share {
  float: none; height: auto; margin: 0; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
}
body.kk #copybox { flex: 1 1 320px; width: auto; }
body.kk #sharebox { flex: 2 1 420px; width: auto; }
body.kk div.share h2 { margin: 0 0 10px; font-size: 24px; }
body.kk #copylink { width: 100%; font-size: 18px; font-weight: 600; color: var(--link); cursor: pointer; background: var(--surface-2); }
body.kk #origlink { width: auto; max-width: 100%; vertical-align: bottom; }
body.kk #tweet_body { width: 100%; height: 5em; float: none; box-sizing: border-box; }
body.kk #charcount { color: var(--ink-3); padding: 0; display: block; text-align: right; font-size: 13px; }
body.kk #share_links a { padding: 0 10px 0 0; background: none !important; }

/* ---------- Tables ---------- */

body.kk table.tblSorter {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 15px;
}
body.kk table.tblSorter thead tr th, body.kk table.tblSorter th.header {
  background: var(--surface-2) none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}
body.kk table.tblSorter thead tr .tablesorter-header { background-image: none; padding-right: 14px; }
body.kk table.tblSorter thead .tablesorter-header-inner { display: inline-flex; align-items: center; gap: 6px; }
body.kk table.tblSorter thead .tablesorter-header:not(.sorter-false) .tablesorter-header-inner::after {
  content: ""; width: 10px; height: 14px; opacity: .35;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0l4 5H1zM5 14L1 9h8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0l4 5H1zM5 14L1 9h8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.kk table.tblSorter thead .tablesorter-headerDesc .tablesorter-header-inner::after {
  opacity: 1; color: var(--link);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 12L1 6h8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 12L1 6h8z'/%3E%3C/svg%3E");
}
body.kk table.tblSorter thead .tablesorter-headerAsc .tablesorter-header-inner::after {
  opacity: 1; color: var(--link);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 2l4 6H1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 2l4 6H1z'/%3E%3C/svg%3E");
}
body.kk table.tblSorter tbody td {
  color: var(--ink);
  background: var(--surface);
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
body.kk table.tblSorter tbody tr:first-child td { border-top: 0; }
body.kk table.tblSorter tbody tr.normal-row td, body.kk table.tblSorter tbody tr.alt-row td { background: var(--surface); }
body.kk table.tblSorter tbody tr:hover td { background: var(--row-hover) !important; }

/* link rows */
body.kk td.keyword a {
  display: inline-block;
  font-weight: 700;
  color: var(--link);
  background: color-mix(in srgb, var(--kk-sky) 13%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
}
body.kk td.keyword a::before { content: "/"; opacity: .55; margin-right: 1px; }
body.kk td.url { max-width: 460px; }
body.kk td.url > a { color: var(--ink); font-weight: 600; }
body.kk td.url small { display: block; font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.kk td.url small a, body.kk td.url small a:visited { color: var(--ink-3); }
body.kk td.url br { display: none; }
body.kk td.timestamp, body.kk td.ip { color: var(--ink-2) !important; font-size: 14px; white-space: nowrap; }
body.kk table.tblSorter tbody td.ip { max-width: 9em; }
body.kk td.clicks { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
body.kk td.url .warning { background: none; color: var(--danger); }

/* action icons */
body.kk td.actions { white-space: nowrap; width: 1%; }
body.kk td.actions .button {
  float: none; display: inline-block; vertical-align: middle;
  width: 34px; height: 34px; margin: 0 2px 0 0; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent none !important;
  color: var(--ink-2);
  position: relative; overflow: hidden; text-indent: -9999px;
}
body.kk td.actions .button::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}
body.desktop.kk td.actions a, body.desktop.kk td.actions input { opacity: .45; pointer-events: auto; }
body.plugins.kk td.actions a, body.plugins.kk td.actions input { opacity: 1; }
body.desktop.kk tr:hover td.actions a, body.desktop.kk tr:focus-within td.actions a { opacity: 1; }
body.kk td.actions .button:hover { background: var(--surface-2) !important; color: var(--ink); }
body.kk td.actions .button_delete:hover { background: var(--danger-soft) !important; color: var(--danger); }
body.kk td.actions .button_stats  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-8M22 20H2'/%3E%3C/svg%3E"); }
body.kk td.actions .button_share  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
body.kk td.actions .button_edit   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l4 4L8 20H4v-4z'/%3E%3C/svg%3E"); }
body.kk td.actions .button_delete { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E"); }
body.kk td.actions .button.loading::before { animation: kk-spin .8s linear infinite; -webkit-mask: none; mask: none; border-radius: 50%; background: none; border: 2px solid currentColor; border-right-color: transparent; }
body.kk td.actions .button.disabled { opacity: .4; }
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* edit row */
body.kk tr.edit-row td, body.kk td.edit-row { background: var(--surface-2) !important; padding: 16px 14px; line-height: 2.6; font-size: 14px; }
body.kk tr.edit-row strong { display: inline-block; min-width: 82px; color: var(--ink-2); }
body.kk tr.edit-row input.text { width: min(520px, 70%); }
body.kk tr.edit-row input[id^="edit-keyword-"] { width: 160px; }
body.kk tr.edit-row td:last-child { vertical-align: bottom; white-space: nowrap; }

/* footer: search + pagination */
body.kk table.tblSorter tfoot tr th {
  background: var(--surface-2);
  border: 0;
  border-top: 1px solid var(--line);
  padding: 16px;
  font-weight: 400;
}
body.kk #main_table tfoot th, body.kk #main_table tfoot th div { font-size: 14px; color: var(--ink-2); }
body.kk #filter_options { line-height: 2.9; }
body.kk #filter_options input.text, body.kk #filter_options select { min-height: 34px; padding: 4px 8px; font-size: 14px; }
body.kk #filter_options select { padding-right: 24px; }
body.kk #filter_buttons { display: inline-flex; gap: 8px; margin-left: 6px; vertical-align: middle; }
body.kk #filter_buttons input.button { height: 34px; font-size: 14px; }
body.kk #pagination { margin-top: 10px; }
body.kk #pagination .navigation { display: flex; flex-wrap: wrap; gap: 4px; }
body.kk #pagination .navigation { align-items: center; }
body.kk #pagination .nav_total { margin-right: 6px; font-size: 14px; color: var(--ink-3); }
body.kk #pagination .nav_link { display: inline-flex; }
body.kk #pagination .nav_current,
body.kk #pagination .nav_goto a {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600;
}
body.kk #pagination .nav_current { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
body.kk #pagination .nav_goto a:hover { text-decoration: none; border-color: var(--link); color: var(--link); }
body.kk #nourl_found td { text-align: center; color: var(--ink-3); padding: 40px; }

/* ---------- Notices and toasts ---------- */

body.kk .notice {
  width: auto; margin: 20px 0 0; padding: 12px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 5px solid var(--kk-blue); border-radius: var(--r-sm);
}
body.kk .notice p { margin: 0; }
body.kk .error   { color: var(--danger); background: var(--danger-soft); }
body.kk .warning { color: var(--ink); background: var(--warn-soft); }
body.kk .success { color: var(--ok); background: var(--ok-soft); }
body.kk .notice.error { border-left-color: var(--kk-red); }
body.kk .notice.success { border-left-color: var(--ok); }

body.kk .jquery-notify-bar {
  top: 16px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: 14px 44px 14px 20px;
  font: 600 16px/1.4 var(--font-body);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-left: 5px solid var(--kk-blue); border-radius: var(--r);
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.35);
  text-shadow: none; opacity: 1;
}
body.kk .jquery-notify-bar.success { border-left-color: var(--ok); background: var(--surface); color: var(--ink); }
body.kk .jquery-notify-bar.error, body.kk .jquery-notify-bar.fail { border-left-color: var(--kk-red); background: var(--surface); color: var(--ink); }
body.kk .jquery-notify-bar span { background: none !important; padding-left: 0 !important; }
body.kk .notify-bar-close { left: auto; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-3); }

/* delete confirmation */
body.kk #delete-confirm-dialog {
  width: min(560px, calc(100% - 32px)); height: auto; padding: 0;
  background: var(--surface); color: var(--ink);
  border: 0; border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  overflow: hidden;
}
body.kk #delete-confirm-dialog::backdrop { background: rgba(21, 15, 25, .6); opacity: 1; backdrop-filter: blur(3px); }
body.kk #delete-confirm-dialog > div[name="dialog_title"] {
  background: var(--surface); color: var(--ink); text-align: left;
  font-family: var(--font-title); font-size: 30px; padding: 22px 24px 0; border-radius: 0;
}
body.kk #delete-confirm-dialog div.confirm-message { width: auto; height: auto; padding: 8px 24px 16px; background: var(--surface); }
body.kk #delete-confirm-dialog div.confirm-message ul { border-left: 4px solid var(--kk-red); padding: 2px 0 2px 14px; }
body.kk #delete-confirm-dialog div.confirm-message ul li span { border: 0; background: var(--surface-2); color: var(--ink); word-break: break-all; }
body.kk #delete-confirm-dialog div.button-group {
  width: auto; height: auto; padding: 14px 24px; text-align: right;
  background: var(--surface-2); border-radius: 0;
  display: flex; justify-content: flex-end; gap: 10px;
}
body.kk #delete-confirm-dialog .button-group button, body.kk #delete-confirm-dialog .button-group input {
  font: 600 15px/1 var(--font-body); height: 38px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
}
body.kk #delete-confirm-dialog .button-group [name="dialog_confirm"], body.kk #delete-confirm-dialog .button-group .primary {
  background: var(--danger); border-color: var(--danger); color: #fff;
}

/* date picker */
body.kk .datepicker { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
body.kk .datepicker th, body.kk .datepicker tfoot td { background: var(--surface-2); color: var(--ink); font: 600 12px/22px var(--font-body); }
body.kk .datepicker tbody td { background: var(--surface); color: var(--ink); border-color: var(--line); font: 13px/24px var(--font-body); }
body.kk .datepicker tbody td.date.over { background: var(--surface-2); }
body.kk .datepicker tbody td.date.chosen { background: var(--primary); color: #fff; }

/* ---------- Stats page ---------- */

body.infos h2#informations {
  display: block; margin: 40px 0 14px;
  font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; color: var(--heading);
}
body.infos h3 { font-size: 16px; font-weight: 600; margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.infos h3 span.label { width: 96px; color: var(--ink-3); font-weight: 600; }
body.infos h3 img { width: 16px; height: 16px; }
body.infos h3 a { word-break: break-all; }
body.infos #tabs { margin-top: 28px; }
body.infos #tabs ul#headers {
  float: none; display: inline-flex !important; flex-wrap: wrap; gap: 4px;
  margin: 0 0 16px; padding: 4px; border: 0;
  background: var(--surface-2); border-radius: 999px;
}
body.infos #tabs ul#headers li { margin: 0; }
body.infos #tabs ul#headers li h2 { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0; display: inline; }
body.infos #tabs ul#headers li a {
  display: block; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
}
body.infos #tabs ul#headers li a:hover { background: var(--surface); text-decoration: none; }
body.infos #tabs ul#headers li a.selected { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); border: 0; }
body.infos .tab {
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
}
body.infos .tab table { width: 100%; }
body.infos .tab td { vertical-align: top; padding: 0 12px; color: var(--ink); }
body.infos .tab h3 { display: block; font-size: 18px; font-weight: 700; margin: 0 0 10px; }
body.infos ul.toggle_display { border-bottom: 1px solid var(--line); margin-right: 0; padding: 0 0 8px; }
body.infos #stats_lines li { margin-right: 4px; }
body.infos #stats_lines li a { padding: 5px 12px; border: 0; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
body.infos #stats_lines li a.selected { background: var(--primary); color: #fff; border: 0; }
body.infos #historical_clicks { float: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; padding: 0; display: block !important; }
body.infos #historical_clicks li { padding: 8px 12px; background: transparent !important; border-top: 1px solid var(--line); font-size: 15px; }
body.infos #historical_clicks li:first-child { border-top: 0; }
body.infos #historical_clicks li:hover { background: var(--row-hover) !important; }
body.infos #historical_clicks .historical_count { font-weight: 700; font-variant-numeric: tabular-nums; }
body.infos ul.no_bullet li { margin-bottom: 6px; }
body.infos #historical_clicks + h3, body.infos .wrap_unfloat + h3 { margin-top: 24px; }
body.infos .bestday { color: var(--link); }
body.infos #stat_tab_share #shareboxes { margin-top: 0; }

/* ---------- Tools, plugins, misc pages ---------- */

body.kk .sub_wrap { max-width: 760px; text-align: left; padding-bottom: 20px; line-height: 1.6; }
body.kk .sub_wrap span { background: var(--warn-soft); color: var(--ink); padding: 0 4px; border-radius: 4px; }
body.kk .sub_wrap table.tblSorter { margin: 10px 0 20px; }
body.kk .sub_wrap table.tblSorter td { border-top: 1px solid var(--line); padding: 12px 14px; }
body.kk a.bookmarklet {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px;
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--link); font-weight: 600;
}
body.kk a.bookmarklet::before { content: ""; width: 18px; height: 18px; background: url("https://static.kidzklub.co.uk/logo.png") center/contain no-repeat; }
body.kk a.bookmarklet:hover { background: var(--surface-2); text-decoration: none; }

body.plugins #main_table td { vertical-align: top; }
body.plugins main > h2:first-of-type { margin-top: 40px; font-size: clamp(38px, 5.5vw, 54px); line-height: 1.05; }
body.kk tr.plugin td.plugin_name a { font-weight: 700; }
body.kk tr.plugin.active td { background: color-mix(in srgb, var(--kk-sky) 7%, var(--surface)) !important; }
body.kk tr.plugin.active td:first-child { box-shadow: inset 4px 0 0 var(--kk-sky); }
body.kk tr.plugin td.plugin_desc small { visibility: visible; display: block; color: var(--ink-3); margin-top: 4px; }
body.kk td.plugin_actions a { font-weight: 600; }

/* ---------- Footer ---------- */

body.kk #footer { margin: 0; padding: 28px 24px 36px; text-align: center; }
body.kk #footer p {
  max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-size: 14px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
}
body.kk #footer p a { background: none; padding: 0; color: var(--ink-2); font-weight: 600; }

/* ---------- Sign in ---------- */

body.login { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body.login #wrap { flex: 1; display: grid; place-items: center; padding: 40px 16px; width: 100%; box-sizing: border-box; }
body.login::before, body.login::after {
  content: ""; position: fixed; border-radius: 50%; z-index: -1; pointer-events: none;
}
body.login::before { width: 46vmax; height: 46vmax; left: -14vmax; bottom: -18vmax; background: var(--kk-sky-soft); opacity: .28; }
body.login::after  { width: 30vmax; height: 30vmax; right: -9vmax; top: -10vmax; background: var(--kk-yellow); opacity: .35; }
body.login main { width: 100%; max-width: 400px; }
body.login #login {
  max-width: none; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 52, 94, .45);
  padding: 0 30px 26px;
  position: relative; overflow: hidden;
}
.kk-login-logo {
  margin: 0 -30px 26px; padding: 24px 20px 22px;
  background: var(--bar-bg); border-bottom: 5px solid var(--bar-rule);
  display: flex; justify-content: center;
}
.kk-login-logo img { height: 52px; width: auto; display: block; }
.kk-login-head { text-align: center; margin-bottom: 18px; }
.kk-login-head .kk-title span { font-size: 38px; }
body.login .kk-login-head p { margin: 6px 0 0; color: var(--ink-3); font-size: 15px; font-weight: 400; }
body.login #login form { display: flex; flex-direction: column; }
body.login .kk-login-head { order: -2; }
body.login #error-message { order: -1; }
body.login #login p { font-weight: 600; margin: 0 0 14px; }
body.login #login label { font-size: 14px; color: var(--ink-2); }
body.login #login .text { width: 100%; min-height: 46px; font-size: 16px; margin-top: 4px; }
body.login #login p:has(#submit) { text-align: left !important; margin: 20px 0 0; }
body.login #login #submit { width: 100%; height: 48px; font-size: 17px; font-weight: 700; border-radius: var(--r-sm); }
body.login #login .error, body.login #error-message { padding: 9px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; text-align: center; margin-bottom: 16px; }
body.login #login ul { padding: 0; }
body.login #login ul li { padding: 0; background: none !important; }
body.login #footer { padding-top: 0; }

/* ---------- yourls_die() pages ---------- */
body.kk #wrap > h2 + p { font-size: 17px; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  body.kk #wrap { padding: 0 16px 32px; }
  body.kk nav[role="navigation"] {
    position: static; height: auto; padding: 0;
    margin: 0 -16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--bar-bg); border-bottom: 5px solid var(--bar-rule);
  }
  body.kk ul#admin_menu { padding: 8px 16px; font-size: 14px; white-space: nowrap; }
  body.kk ul#admin_menu > li > a { padding: 7px 12px; }
  body.kk #admin_menu_logout_link { margin-left: auto; }
  .kk-bar { height: 64px; }
  .kk-bar::before { border-bottom: 0; }
  .kk-brand img { height: 36px; }
  .kk-hero { margin-top: 24px; }
  body.kk #new_url_form { padding: 20px; }
  body.kk #new_url_form > div {
    grid-template-columns: 1fr;
    grid-template-areas: "l1" "u" "l2" "k" "b";
  }
  body.kk #new_url_form label[for="add-keyword"] { margin-top: 6px; }
  body.kk #add-button { width: 100%; }
  body.kk #new_url::before { width: 180px; height: 180px; right: -70px; top: auto; bottom: -110px; }
  body.kk #new_url::after { width: 90px; height: 90px; right: -30px; top: -45px; }
  body.kk #filter_options { line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
  body.kk #filter_options br { display: none; }
  body.kk #filter_buttons { width: 100%; margin: 4px 0 0; }

  /* table becomes stacked cards */
  body.index #main_table thead { display: none; }
  body.index #main_table, body.index #main_table tbody, body.index #main_table tr, body.index #main_table td { display: block; width: auto; }
  body.index #main_table tbody tr { position: relative; padding: 14px 16px; border-top: 1px solid var(--line); }
  body.index #main_table tbody tr:first-child { border-top: 0; }
  body.index #main_table tbody td { border: 0; padding: 0; background: transparent !important; max-width: none; }
  body.index #main_table td.url { margin: 8px 0 4px; }
  body.index #main_table td.timestamp, body.index #main_table td.clicks { display: inline; font-size: 14px; }
  body.index #main_table td.clicks::before { content: " · "; font-weight: 400; color: var(--ink-3); }
  body.index #main_table td.clicks::after { content: " clicks"; font-weight: 400; color: var(--ink-2); }
  body.index #main_table td.ip { display: none; }
  body.index #main_table td.actions { position: static; display: flex !important; flex-wrap: wrap; gap: 2px; width: auto; margin: 6px 0 -4px -8px; }
  body.index #main_table td.actions .button { opacity: 1 !important; pointer-events: auto !important; }
  body.index #main_table tfoot, body.index #main_table tfoot tr, body.index #main_table tfoot th { display: block; }
  body.index table#main_table { display: flex; flex-direction: column; }
  body.index #main_table > tbody { order: 1; }
  body.index #main_table > tfoot { order: 2; }
  body.kk tr.edit-row input.text { width: 100% !important; }
  body.kk tr.edit-row td { line-height: 1.6; }
  body.kk tr.edit-row strong { display: block; margin-top: 8px; }

  body.infos .tab { padding: 16px; }
  body.infos .tab table, body.infos .tab tbody, body.infos .tab tr, body.infos .tab td { display: block; padding: 0; }
  body.infos .tab td + td { margin-top: 20px; }
}

@media (max-width: 480px) {
  .kk-brand-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.kk * { transition: none !important; animation: none !important; }
}