/* Kleintea theme (full replacement) — Gitea 1.24.x */

/* ---------------- tokens ---------------- */
:root{
  --is-dark-theme: true;

  --color-primary:#9f5cff;
  --color-primary-dark:#7a3fd4;
  --color-accent:#ff4ddb;

  --color-bg:#0e0e10;     /* base canvas (only used as a fallback) */
  --color-bg-2:#0a0a0c;
  --color-surface:#17171a;
  --color-surface-2:#1d1d22;
  --color-border:#2a2a31;
  --color-text:#f1f1f6;
  --color-muted:#b7b7c2;

  --radius:12px;
  --radius-lg:16px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --shadow-1:0 10px 30px rgba(0,0,0,.55);
  --shadow-2:0 6px 18px rgba(159,92,255,.32);
  --shadow-3:0 0 0 1px rgba(255,255,255,.03), 0 16px 50px rgba(0,0,0,.6);
}

/* local Inter var (optional: place at custom/public/assets/fonts/inter-var.woff2) */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
}

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

/* ---------------- global canvas + animated gradient ---------------- */

/* 1) never let anything paint a solid page background */
html,
body,
#app,
#wrapper,
.full.height,
.full.height > .pusher,
.following.bar ~ .pusher,
.pushable,
.pushable > .pusher,
.page-content{
  background:transparent !important;
  background-image:none !important;
}

/* 2) paint the blobs once, behind everything, using body::before */
body{
  color:var(--color-text);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  position:relative;            /* create stacking context for ::before */
  z-index:0;
  min-height:100%;
}

/* vivid animated purple/magenta field */
@keyframes kp-pan{
  0%   {background-position: 0% 50%, 100% 40%, 50% 110%, 0 0}
  50%  {background-position: 100% 50%, 0% 60%, 50% -10%, 0 0}
  100% {background-position: 0% 50%, 100% 40%, 50% 110%, 0 0}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* three blob layers + faint vertical wash */
  background:
    radial-gradient(800px 520px at 12% -6%,  rgba(169,92,255,.40), transparent 60%),
    radial-gradient(900px 560px at 88% -8%,  rgba(255,77,219,.34), transparent 62%),
    radial-gradient(1200px 700px at 50% 118%, rgba(169,92,255,.26), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-repeat:no-repeat;
  animation:kp-pan 28s var(--ease) infinite;
  will-change:background-position;
}

/* 3) extra header/footer sheen (subtle) */
.header, .footer{ position:relative; }
.header::before, .footer::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:linear-gradient(90deg, rgba(159,92,255,.10), rgba(255,77,219,.08), rgba(159,92,255,.10));
  background-size:200% 100%;
  animation:kp-pan 40s var(--ease) infinite;
}
.header > *, .footer > *{ position:relative; z-index:1; }

/* keep modals usable */
.ui.page.modals.dimmer,
.ui.dimmer{ background-color:rgba(0,0,0,.65) !important; }

/* ---------------- base UI ---------------- */
a{ color:var(--color-primary); text-decoration:none; transition:color .18s var(--ease); }
a:hover{ color:var(--color-accent); }
a:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:6px; }

button, .ui.button{
  background:var(--color-primary);
  border:none;
  color:#fff !important;
  font-weight:650;
  border-radius:var(--radius);
  padding:.65rem 1.05rem;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
button:hover, .ui.button:hover{
  background:var(--color-primary-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}
.ui.button.basic, .ui.basic.buttons .button{
  background:transparent !important;
  color:var(--color-text) !important;
  border:1px solid var(--color-border) !important;
}
.ui.button.basic:hover{ border-color:var(--color-primary) !important; }

input, select, textarea{
  background:var(--color-bg-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  transition:box-shadow .18s var(--ease), border-color .18s var(--ease);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(159,92,255,.25);
}

.segment, .ui.segment{
  background:var(--color-surface) !important;
  border:1px solid var(--color-border) !important;
  border-radius:var(--radius) !important;
}
.ui.table{ background:var(--color-surface); border-color:var(--color-border); }
.ui.table thead th{ color:var(--color-muted); }
.ui.table tr td{ border-top-color:var(--color-border); }

.ui.label, .ui.labels .label{
  background:var(--color-bg-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
}

/* top chrome */
.ui.menu, .header, .footer{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
}
.ui.menu .item, .ui.menu .dropdown.item .menu > .item{ color:var(--color-text) !important; }
.ui.menu .item:hover{ color:var(--color-accent) !important; }
.ui.secondary.pointing.menu .item{ color:var(--color-text); }
.ui.secondary.pointing.menu .item:hover{ color:var(--color-primary); }
.ui.secondary.pointing.menu .active.item{ color:var(--color-accent); border-color:var(--color-accent); }

/* ---------------- sane wrapping ---------------- */
*{ word-break:normal; }
.text, .render-content, .markup, p, li, .description{ overflow-wrap:anywhere; }
.flex-list .text.truncate,
.text.truncate.issue.title{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
.flex-list .flex-item-main{ min-width:0; }

/* ---------------- home hero + cards ---------------- */
.k-gradient-text{
  background:linear-gradient(90deg, #a87bff 0%, #ff4ddb 50%, #a87bff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.k-hero.home-hero--neon{
  position:relative;
  padding:4.5rem 0 2.5rem;
  border-bottom:1px solid var(--color-border);
}
.k-hero__inner{ text-align:center; position:relative; z-index:2; }
.k-hero__logo .logo{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); opacity:.95; animation:k-float 3s ease-in-out infinite alternate; }
@keyframes k-float{ from{ transform:translateY(0) } to{ transform:translateY(8px) } }
@media (prefers-reduced-motion:reduce){ .k-hero__logo .logo{ animation:none; } }
.k-hero__title{ font-size:clamp(2rem, 4vw + 1rem, 4.2rem); margin:.8rem 0 .3rem; font-weight:900; letter-spacing:-.02em; }
.k-hero__subtitle{ color:var(--color-muted); font-size:1.1rem; margin-bottom:1.25rem; }

.k-hero__actions{ display:inline-flex; gap:.75rem; flex-wrap:wrap; margin:.25rem 0 1.2rem; }
.k-btn{ border-radius:999px; padding:.7rem 1.1rem; }
.k-btn--primary{
  background:linear-gradient(135deg, #9f5cff, #7a3fd4);
  box-shadow:0 8px 22px rgba(159,92,255,.25);
}
.k-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(159,92,255,.35); }
.k-btn--ghost{ background:transparent !important; border:1px solid var(--color-border) !important; }

.k-hero__search{ max-width:720px; margin:0 auto; }
.k-search-input input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.k-search-input .button{ border-top-left-radius:0; border-bottom-left-radius:0; }

.k-cards{ margin:2.2rem auto; }
.k-card.ui.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:var(--shadow-3);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.k-card .content .header{ display:flex; align-items:center; gap:.5rem; font-weight:750; }
.k-card .description{ color:var(--color-muted); margin-top:.35rem; }
.k-card:hover{ transform:translateY(-3px); border-color:var(--color-primary); box-shadow:0 16px 44px rgba(159,92,255,.16); }

/* features grid (no wrap glitches) */
.kp-features{ margin:1rem auto 3rem; }
.kp-feature{
  display:flex; align-items:flex-start; gap:.9rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1rem 1.2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.kp-feature__icon{ flex:0 0 40px; display:flex; align-items:center; justify-content:center; }
.kp-feature__title{ margin:0; font-weight:800; }
.kp-feature__desc{ color:var(--color-muted); margin:.3rem 0 0; }
.kp-features .ui.grid > .column{ margin-bottom:1rem !important; }
.kp-feature *{ word-break:normal !important; white-space:normal !important; }

/* ---------------- auth pages ---------------- */
.page-content.user.signin .ui.container,
.page-content.user.signup .ui.container{ max-width:560px; }

.page-content.user.signin .ui.segment,
.page-content.user.signup .ui.segment{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:2rem;
  box-shadow:var(--shadow-1);
}

.page-content.user.signin h1,
.page-content.user.signup h1{
  margin-top:.25rem;
  font-size:1.9rem; font-weight:900; letter-spacing:-.02em;
  color:var(--color-primary);
}
.page-content.user.signin .ui.form input,
.page-content.user.signup .ui.form input{
  height:44px; font-size:1rem;
  background:var(--color-bg-2); border-radius:10px;
}
.page-content.user.signin .ui.button.primary,
.page-content.user.signup .ui.button.primary{
  border-radius:999px; padding:.9rem 1.2rem; font-weight:750;
  background:linear-gradient(135deg, #9f5cff, #7a3fd4);
  box-shadow:0 10px 28px rgba(159,92,255,.25);
}
.page-content.user.signin .ui.button.basic,
.page-content.user.signup .ui.button.basic{ border-radius:999px; }

/* ---------------- footer ---------------- */
.kp-footer{ margin-top:2.5rem; border-top:1px solid var(--color-border); padding:1.2rem 0 2rem; }
.kp-footer__main{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.kp-footer__brand{ display:flex; align-items:center; gap:.6rem; }
.kp-footer__nav{ display:flex; flex-wrap:wrap; gap:1rem; }
.kp-footer__nav a{ color:var(--color-muted); }
.kp-footer__nav a:hover{ color:var(--color-accent); }
.kp-footer__meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.6rem; }
/* hide built-in link row so only our footer shows */
.footer .links{ display:none !important; }

/* ---------------- tiny utils ---------------- */
.rounded{ border-radius:var(--radius); }
.muted{ color:var(--color-muted); }
.surface{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); }

/* global background gradient — single source of truth */
@keyframes kp-bg-pan {
  0%   { background-position: 0% 50%, 100% 50%, 50% 0%, 20% 80%; }
  50%  { background-position: 100% 50%, 0%   50%, 50% 100%, 80% 20%; }
  100% { background-position: 0% 50%, 100% 50%, 50% 0%, 20% 80%; }
}

/* 1) Paint the gradient on <html> and keep it fixed */
html {
  background-color: #08080b !important; /* deep base so “holes” look black, not gray */
  background-image:
    radial-gradient(1100px 650px at 8% 6%,  rgba(159, 92, 255, .40), transparent 62%),
    radial-gradient(1000px 600px at 92% 10%, rgba(255, 77, 219, .34), transparent 62%),
    radial-gradient(900px 540px  at 60% 80%, rgba(125, 60, 210, .22), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed;
  animation: kp-bg-pan 28s ease-in-out infinite;
  min-height: 100%;
}

/* 2) Kill solid canvases that can cover the root */
body,
#app,
#wrapper,
.full.height,
.full.height > .pusher,
.full.height > .following.bar ~ .pusher,
.page-content {
  background: transparent !important;
  background-image: none !important;
}

/* 3) Keep modals usable (explicit dimmer) */
.ui.page.modals.dimmer,
.ui.dimmer { background-color: rgba(0,0,0,.65) !important; }

/* 4) Optional: subtle wash on header/footer only (kept minimal; remove if you dislike) */
.header, .footer { position: relative; }
.header::before, .footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(159,92,255,.10), rgba(255,77,219,.08), rgba(159,92,255,.10));
  background-size: 200% 100%;
  animation: kp-bg-pan 40s ease-in-out infinite;
}
.header > *, .footer > * { position: relative; z-index: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { animation: none; }
}