/* KirinCore design system - admin surface | [claude 20260820_system] v2
   Loaded from <head>. The pages keep their own <style> blocks inside <body>,
   so source order can never be relied on: every rule here is written to a
   specificity of 22+ because the highest !important rule in the page CSS that
   touches these elements is html.dark .bg-white at 21. Measured, not assumed.
   Tokens are namespaced --kcs-* so they cannot collide with the pages' own
   --kc-* tokens; where a page token is wanted, it is read with a fallback.
   Additive only: no markup changes, no layout utilities touched. See DESIGN.md */

:root{
  --kcs-accent:#7c3aed; --kcs-accent-hover:#6d28d9; --kcs-accent-ink:#ffffff;
  --kcs-accent-text:#7c3aed; --kcs-accent-weak:rgba(124,58,237,.14);
  --kcs-accent-label:#6d28d9;
  --kcs-success-text:#059669; --kcs-warn-text:#b45309;
  --kcs-danger-text:#dc2626; --kcs-info-text:#0284c7;
  --kcs-s1:4px; --kcs-s2:8px; --kcs-s3:12px; --kcs-s4:16px; --kcs-s5:24px; --kcs-s6:40px;
  --kcs-r-sm:8px; --kcs-r-md:12px; --kcs-r-lg:16px; --kcs-r-full:999px;
  --kcs-e1:0 1px 2px rgba(15,23,42,.08); --kcs-e2:0 8px 24px rgba(15,23,42,.12);
  --kcs-t-display:28px; --kcs-t-h1:22px; --kcs-t-h2:18px;
  --kcs-t-body:15px; --kcs-t-sm:13px; --kcs-t-num:30px;
  --kcs-dur:160ms; --kcs-ease:cubic-bezier(.22,1,.36,1);
  --kcs-z-dropdown:100; --kcs-z-sticky:200; --kcs-z-backdrop:300;
  --kcs-z-modal:400; --kcs-z-toast:500; --kcs-z-tooltip:600;
}
html.dark{
  --kcs-accent-text:#a78bfa;  /* 6.09:1 on the dark surface */
  --kcs-accent-label:#a78bfa; /* 5.63:1 on the tinted chip */
  --kcs-success-text:#10b981; /* 6.53:1 */
  --kcs-warn-text:#f59e0b;    /* 7.71:1 */
  --kcs-danger-text:#f87171;  /* 5.99:1 - #ef4444 is 4.40 and fails AA */
  --kcs-info-text:#38bdf8;    /* 7.73:1 */
  --kcs-e1:0 1px 2px rgba(0,0,0,.28); --kcs-e2:0 8px 24px rgba(0,0,0,.36);
}

/* Stat row. Was a 5px gradient side-stripe plus a gradient icon chip in a
   different hue per card position: four hues, one formula, no meaning. Colour
   now carries no information here, so it is removed and the number carries the
   hierarchy. Tabular figures so the four cards line up while counts change. */
html body .stat-card.stat-card::before{ display:none !important; }
html body .stat-card.stat-card{ border-radius:var(--kcs-r-md) !important;
  box-shadow:var(--kcs-e1) !important; padding:var(--kcs-s5) !important; }
html body .stat-card .stat-ic.stat-ic{ width:36px !important; height:36px !important;
  border-radius:var(--kcs-r-sm) !important; background:var(--kcs-accent-weak) !important;
  color:var(--kcs-accent-text) !important; box-shadow:none !important; }
html body .stat-card .stat-ic.stat-ic svg{ width:18px !important; height:18px !important; }
html body .stat-card.stat-card .text-2xl{ font-size:var(--kcs-t-num) !important;
  line-height:1.1 !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* Page header. Was 180px of blue-to-purple gradient holding a title and two
   buttons, at the top of the screen owners keep open all day. Flattened onto the
   app surface: same words, same buttons, the height handed back to the work. */
html body .hero-banner.hero-banner{ background:var(--kc-surface,#161e33) !important;
  border:1px solid var(--kc-border,#26304a) !important; border-radius:var(--kcs-r-lg) !important;
  box-shadow:var(--kcs-e1) !important; padding:var(--kcs-s5) !important;
  color:var(--kc-text,#f1f5f9) !important; }
html:not(.dark) body .hero-banner.hero-banner{ background:#ffffff !important;
  border-color:#e5e7eb !important; color:#111827 !important; }
html body .hero-banner.hero-banner h1, html body .hero-banner.hero-banner h2{
  color:inherit !important; font-size:var(--kcs-t-display) !important;
  line-height:1.25 !important; letter-spacing:-.02em; text-wrap:balance; }
html body .hero-banner.hero-banner p{ color:var(--kc-text2,#aab4cf) !important;
  font-size:var(--kcs-t-body) !important; }
html:not(.dark) body .hero-banner.hero-banner p{ color:#4b5563 !important; }
html body .hero-banner.hero-banner [class*="bg-white/15"]{
  background:var(--kcs-accent-weak) !important; color:var(--kcs-accent-text) !important;
  backdrop-filter:none !important; }

html body .kc-hero-primary.kc-hero-primary{ background:var(--kcs-accent) !important;
  color:var(--kcs-accent-ink) !important; border-radius:var(--kcs-r-sm) !important;
  box-shadow:none !important; transition:background var(--kcs-dur) var(--kcs-ease) !important; }
html body .kc-hero-primary.kc-hero-primary:hover{ background:var(--kcs-accent-hover) !important;
  filter:none !important; }
html body .kc-hero-ghost.kc-hero-ghost{ background:transparent !important;
  color:var(--kc-text,#f1f5f9) !important; border:1px solid var(--kc-border,#26304a) !important;
  border-radius:var(--kcs-r-sm) !important; box-shadow:none !important;
  transition:background var(--kcs-dur) var(--kcs-ease) !important; }
html:not(.dark) body .kc-hero-ghost.kc-hero-ghost{ color:#111827 !important;
  border-color:#d1d5db !important; }
html body .kc-hero-ghost.kc-hero-ghost:hover{ background:var(--kc-hover,#1c2742) !important; }
html:not(.dark) body .kc-hero-ghost.kc-hero-ghost:hover{ background:#f3f4f6 !important; }

@media (prefers-reduced-motion: reduce){
  html body .premium-card, html body .premium-card:hover,
  html body .kc-hero-primary.kc-hero-primary, html body .kc-hero-ghost.kc-hero-ghost{
    transition:none !important; transform:none !important; }
}

/* ---- Analytics (an-*) ------------------------------------------------- */
/* Two metric rows, both built the same way: one card filled with a gradient
   and the rest given a hue each by position - blue, violet, red, pink. The red
   one is Conversion, and it is red whether the number is 0 or 5,000: an alarm
   colour on a metric that is not an alarm. Under the first four sat .an-spark,
   a trend line - the same hard-coded path four times, in four colours. A curve
   that is not the data still reads as data, so it goes.
   The label chips were the worse bug: #8ea0ff on a 15% tint measures 2.02:1 in
   light mode. VIEWS / UNIQUE / RATE were effectively unreadable. Retinted to
   #6d28d9 (5.75:1) and #a78bfa on dark (5.63:1). Measured, both themes. */
html body .an-stat.an-stat{ border-radius:var(--kcs-r-md) !important;
  padding:var(--kcs-s5) !important; box-shadow:var(--kcs-e1) !important;
  background:var(--an-panel,#ffffff) !important;
  border:1px solid var(--an-border,#e2e8f0) !important;
  color:var(--an-ink,#0f172a) !important; }
html body .an-stat.an-stat:hover{ transform:none !important;
  box-shadow:var(--kcs-e1) !important; }
html body .an-stat.an-stat .an-spark{ display:none !important; }
html body .an-stat.an-stat .an-stat-sub{ color:var(--an-muted,#64748b) !important; }
html body .an-stat.an-stat .an-badge{ background:var(--kcs-accent-weak) !important;
  color:var(--kcs-accent-label) !important; box-shadow:none !important; }

/* ---- Design + Editor shell -------------------------------------------- */
/* One accent arrived as five gradients: violet-to-purple on Save, violet-to-
   rose on the active tab, violet-to-indigo on the assistant, violet on the
   image chip and pink-to-rose on the video chip. An accent cannot be five
   colours and still mean anything. Flattened to the one fill (white on #7c3aed
   measures 5.70:1). The two media chips lose their hues outright - nothing
   separates an image row from a video row except the word beside it. */
html body .kc-act-btn.btn-accent{ background:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important;
  box-shadow:none !important; border-radius:var(--kcs-r-sm) !important; }
html body .kc-act-btn.btn-accent:hover{ background:var(--kcs-accent-hover) !important;
  background-image:none !important; transform:none !important; filter:none !important; }
html body .dz-tabs .dsec.dsec[class*="bg-["]{ background:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important; box-shadow:none !important;
  border-radius:var(--kcs-r-sm) !important; }
html body .dz-tabs.dz-tabs{ background:var(--surface,#ffffff) !important;
  background-image:none !important; border-radius:var(--kcs-r-md) !important;
  box-shadow:var(--kcs-e1) !important; }
/* The chips also carried a 19px play-triangle badge - on the image row too,
   where a play triangle means nothing. Decoration, so it goes. */
html body .mcard-ic.mcard-ic::after{ display:none !important; }
html body .mcard-ic.mcard-ic{ background:var(--kcs-accent-weak) !important;
  background-image:none !important; color:var(--kcs-accent-text) !important;
  box-shadow:none !important; border-radius:var(--kcs-r-sm) !important; }
html body .kc-help-ic.kc-help-ic{ background:var(--kcs-accent) !important;
  background-image:none !important; box-shadow:none !important; }

/* The + Add button in the editor wore an animated conic-gradient ring - a full
   colour wheel turning behind the control people press most, repainting for as
   long as the editor stays open. It is the primary action, so it looks like the
   primary action now. */
html body .btn-accent.btn-hero{ background:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important;
  border-radius:var(--kcs-r-sm) !important; box-shadow:none !important; }
html body .btn-accent.btn-hero::before, html body .btn-accent.btn-hero::after{
  display:none !important; }
html body .btn-accent.btn-hero *{ color:#ffffff !important; }
html body .btn-accent.btn-hero:hover{ background:var(--kcs-accent-hover) !important; }

/* ---- Page banners: Bot Analytics + Tracking Error Logs ---------------- */
/* The same 158-173px gradient banner the dashboard had, rebuilt twice more
   under different class names, each with a 210px outline drawing floating
   behind the title at 10% opacity - a robot on one page, a bug on the other.
   Both pages already carry theme-aware --kc-surface, so the panel follows the
   theme without a second branch. Checked: neither class exists on admin_data,
   whose --kc-surface is dark-only. */
html body .kc-hero.kc-hero, html body .kc-b-hero.kc-b-hero{
  background:var(--kc-surface,#161e33) !important; background-image:none !important;
  border:1px solid var(--kc-border,#26304a) !important;
  border-radius:var(--kcs-r-lg) !important; box-shadow:var(--kcs-e1) !important;
  color:var(--kc-text,#f1f5f9) !important; }
/* Two decorative glow circles rode on ::before (240px, bottom-left) and
   ::after (340px, top-right). On the old gradient they read as light. On a
   flat panel with overflow:hidden they clip into a pale wedge that looks like
   the corner failed to round. Measured their offsets: -70/-120 and -90/-130. */
html body .kc-hero.kc-hero::before, html body .kc-hero.kc-hero::after,
html body .kc-b-hero.kc-b-hero::before, html body .kc-b-hero.kc-b-hero::after{
  display:none !important; }
html body .kc-hero.kc-hero div[style*="pointer-events:none"],
html body .kc-b-hero.kc-b-hero div[style*="pointer-events:none"]{ display:none !important; }
html body .kc-hero.kc-hero h1, html body .kc-hero.kc-hero h2,
html body .kc-b-hero.kc-b-hero h1, html body .kc-b-hero.kc-b-hero h2{
  color:var(--kc-text,#f1f5f9) !important; font-size:var(--kcs-t-display) !important;
  line-height:1.25 !important; letter-spacing:-.02em; }
html body .kc-hero.kc-hero p, html body .kc-b-hero.kc-b-hero p{
  color:var(--kc-text2,#aab4cf) !important; }
html body .kc-eyebrow.kc-eyebrow, html body .kc-b-eyebrow.kc-b-eyebrow,
html body .kc-hero-ic.kc-hero-ic, html body .kc-b-hero-ic.kc-b-hero-ic{
  background:var(--kcs-accent-weak) !important; background-image:none !important;
  color:var(--kcs-accent-text) !important; backdrop-filter:none !important;
  box-shadow:none !important; }
html body .kc-hero-count.kc-hero-count, html body .kc-b-status.kc-b-status{
  background:var(--kc-hover,#1c2742) !important; background-image:none !important;
  color:var(--kc-text,#f1f5f9) !important;
  border:1px solid var(--kc-border,#26304a) !important; }

/* One filled card in a row of four, filled by position rather than by value. */
/* Both of these held white text for the gradient they used to sit on. Flatten
   the panel without recolouring the text and the number disappears - caught it
   on the live page before it shipped anywhere else. */
html body .kc-hero-count .kc-hero-count-num{ color:var(--kc-text,#f1f5f9) !important; }
html body .kc-hero-count .kc-hero-count-lbl{ color:var(--kc-text2,#aab4cf) !important; }
html body .kc-stat.kc-stat-total .kc-stat-num{ color:var(--kc-text,#f1f5f9) !important; }
html body .kc-stat.kc-stat-total .kc-stat-lbl{ color:var(--kc-text2,#aab4cf) !important; }
html body .kc-stat.kc-stat-total .kc-stat-ic{ background:var(--kcs-accent-weak) !important;
  color:var(--kcs-accent-text) !important; box-shadow:none !important; }
html body .kc-stat.kc-stat-total{ background:var(--kc-surface,#161e33) !important;
  background-image:none !important; border:1px solid var(--kc-border,#26304a) !important;
  color:var(--kc-text,#f1f5f9) !important; box-shadow:var(--kcs-e1) !important; }

/* The floating help button appears on five pages in the page's own blue while
   the rest of the product is violet. One accent. */
html body .kc-guide-btn.kc-guide-btn, html body .kc-addbtn.kc-addbtn,
html body .kc-pg-btn.kc-pg-btn.active{ background:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important; box-shadow:none !important; }
html body .kc-map-ico.kc-map-ico{ background:var(--kcs-accent-weak) !important;
  background-image:none !important; color:var(--kcs-accent-text) !important;
  box-shadow:none !important; border-radius:var(--kcs-r-sm) !important; }

/* ---- Metric chips: Orders, Files, System Monitor ---------------------- */
/* Four 44px chips in a row, a different hue each, assigned by position:
   indigo / emerald / amber / blue on Orders, violet / cyan / pink on Files.
   None of them label anything the words beside them do not already say.
   Scoped to chips that actually carry a gradient - the plain .w-11 chips in
   the editor are bg-white and bg-zinc-100, and stay exactly as they are. */
html body .w-11.h-11.rounded-xl[style*="linear-gradient"],
html body .w-11.h-11.rounded-xl[class*="bg-gradient-to"],
html body .stat-grad-1, html body .stat-grad-2, html body .stat-grad-3{
  background:var(--kcs-accent-weak) !important; background-image:none !important;
  color:var(--kcs-accent-text) !important; box-shadow:none !important;
  border-radius:var(--kcs-r-sm) !important; }

/* The Save button on Page Settings - the one action that page exists for.
   It was a violet-to-purple gradient; it is the accent fill now, same as Save
   in the editor. Class is unique to settings.php, checked across all 13 files. */
html body .kc-save-btn.kc-save-btn{ background:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important;
  box-shadow:none !important; border-radius:var(--kcs-r-sm) !important; }
html body .kc-save-btn.kc-save-btn:hover{ background:var(--kcs-accent-hover) !important;
  background-image:none !important; filter:none !important; }

/* ---- One accent across the whole shell -------------------------------- */
/* Three accents were running at once: violet #7c3aed on every action, indigo
   #4f46e5 on the "you are here" nav pill, and blue on the active date range -
   #3b82f6 on four pages, #5b6ef5 on Analytics. The date pill was also the last
   AA failure in the chrome: white on #3b82f6 measures 3.68:1. On #7c3aed it is
   5.70:1. Nav pill: #6d28d9 on the tint 5.74:1 light, #a78bfa 5.77:1 dark.
   The wordmark keeps its gradient. That is the logo, not a control.
   Longhand background-color, not the shorthand: these elements carry an inline
   background and Tailwind's transition class, and the shorthand lost the
   cascade against them on the live page. Verified element by element. */
html body .kc-item.shadow-sm{ background-color:var(--kcs-accent-weak) !important;
  background-image:none !important; color:var(--kcs-accent-label) !important; }
html body .kc-on.kc-on.kc-on.kc-on,
html body .an-pill.an-pill-active.an-pill-active.an-pill-active{
  background-color:var(--kcs-accent) !important; background-image:none !important;
  color:#ffffff !important; border-color:var(--kcs-accent) !important; }

/* ---- Keyboard focus ---------------------------------------------------- */
/* There was no focus ring anywhere in the admin - tabbing moved an invisible
   cursor. :focus-visible fires for keyboard and assistive input only, so
   nothing changes for someone using a mouse. The ring sits 2px outside the
   control so it stays visible on the accent fill itself. */
html body :focus-visible{ outline:2px solid var(--kcs-accent) !important;
  outline-offset:2px !important; }
html.dark body :focus-visible{ outline-color:#a78bfa !important; }

/* ---- System Monitor card bars ----------------------------------------- */
/* A 4px gradient bar across the top of each of the four cards - indigo, teal,
   amber, green. SECURITY got amber whether the threat count is 0 or 3,317, so
   the colour is position, not state. The cards have no class of their own, so
   the bar is matched on its five exact class tokens plus the inline gradient:
   4 hits, all on this page, 0 anywhere else in the admin. */
html body [class~="absolute"][class~="top-0"][class~="left-0"][class~="right-0"][class~="h-1"][style*="gradient"]{
  display:none !important; }

/* ---- Profile actions --------------------------------------------------- */
/* Save and Change password sat side by side in the same violet gradient - the
   rule painting them is #pfx button[type="submit"], so both submits inherited
   the primary look. Two different weights of action reading as one. Save takes
   the accent fill, Change password becomes the bordered secondary. */
html body #pfx .bg-blue-500{ background-color:var(--kcs-accent) !important;
  background-image:none !important; color:#ffffff !important;
  box-shadow:none !important; border-radius:var(--kcs-r-sm) !important; }
html body #pfx .bg-blue-500:hover{ background-color:var(--kcs-accent-hover) !important;
  background-image:none !important; }
html body #pfx .bg-gray-800{ background-color:transparent !important;
  background-image:none !important; color:#111827 !important;
  border:1px solid #d1d5db !important; box-shadow:none !important;
  border-radius:var(--kcs-r-sm) !important; }
html.dark body #pfx .bg-gray-800{ color:var(--kc-text,#f1f5f9) !important;
  border-color:var(--kc-border,#26304a) !important; }
html body #pfx .bg-gray-800:hover{ background-color:#f3f4f6 !important; }
html.dark body #pfx .bg-gray-800:hover{ background-color:var(--kc-hover,#1c2742) !important; }

/* ---- Public pages: login, register, home ------------------------------ */
/* Measured on the three pages a new customer sees before they have an account.
   The primary button on login and register runs #7c5cff -> #c05cff -> #d05cff.
   White text against those stops measures 4.35 / 3.38 / 3.15:1 - every stop
   fails AA and the worst is the middle of the button, which is the control the
   whole page exists for. Replaced with a two-stop violet that passes across its
   full width: 5.70 -> 7.10:1. Still a gradient, still the brand.
   The sign-up / sign-in link under the form measured 4.35:1 light and 4.00:1
   dark. The login field placeholder measured 4.40:1 on its #f4f6fb field.
   The home CTA gradient ended on #a855f7 - white on that is 3.96:1 - so only
   the end stop moves, to #9333ea at 5.38:1.
   Nothing else on these pages is touched: the wordmark keeps its gradient and
   the marketing layout keeps its look. Only measured failures were changed.
   Class scope checked across all 19 page files: submit-btn / footer-text /
   form-group exist on login+register only, btn-primary on home only.
   Pricing was measured too - its CTA ends on #db2777 at 4.60:1, so it passes
   and is left alone. */
html body .submit-btn{ background:linear-gradient(90deg,#7c3aed,#6d28d9) !important; }
html body .footer-text a, html body .row-between a{ color:#6d28d9 !important; }
html.dark body .footer-text a, html.dark body .row-between a{ color:#a78bfa !important; }
html body .form-group input::placeholder{ color:#5b6b82 !important; }
html.dark body .form-group input::placeholder{ color:#8b95b2 !important; }
html body .btn.btn-primary{ background-image:linear-gradient(120deg,#7c3aed,#9333ea) !important; }

/* ---- Home page: one colour system ------------------------------------- */
/* The layout, the photography and the copy on the home page are good and are
   left exactly as they are. What reads as machine-made is the colour: hues
   handed out by position instead of by meaning.
   .fic - the four feature chips ran violet / pink #ec4899 / blue #2563eb /
   cyan #0891b2. Four hues in one row, nothing distinguishing the four features
   except the words under them. Now one accent tint (#7c3aed on it = 4.61:1,
   above the 3:1 an icon needs).
   .bcard v4 was an orange-to-pink fill sitting in a grid whose other filled
   tile was violet. Both are highlight tiles, so both take the accent fill; the
   dark tile and the white tile stay as the other two tiers.
   .tpl .top - four template cards with four pale tints, again by position.
   .statwrap .num - the three closing figures were gradient-clipped text.
   Solid now: #6d28d9 on white = 7.10:1.
   Scope checked across all 18 page files: fic, bcard, statwrap and #templates
   appear on home.php only. Nothing else in the product can be reached. */
html body .fic{ background-image:none !important;
  background-color:var(--kcs-accent-weak) !important;
  color:var(--kcs-accent-text) !important; box-shadow:none !important; }
html body .bcard.v1, html body .bcard.v4{
  background-image:linear-gradient(135deg,#7c3aed,#6d28d9) !important; }
html body #templates .tpl .top{ background-image:none !important;
  background-color:rgba(124,58,237,.07) !important; }
/* .pname - the three plan names ran sky #0369a1 / violet #7c3aed / pink
   #db2777. The recommended plan is already marked by its badge and border,
   so the names do not need three hues to tell them apart. One label colour,
   #6d28d9 on white = 7.10:1. pname appears on home.php only. */
html body .pname{ color:#6d28d9 !important; }
html body .statwrap .num{ background-image:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:#6d28d9 !important; -webkit-text-fill-color:#6d28d9 !important; }
