/* =========================================================
   JAKSKY GLOBAL UI PREMIUM V27
   HOME + OWNER + ADMIN + MOD + EVENT
   Visual-only design system. No API/database/business logic.
   ========================================================= */

:root{
  --j27-bg:#fff6fb;
  --j27-bg2:#f8f5ff;
  --j27-surface:#ffffff;
  --j27-surface-soft:#fffafd;
  --j27-ink:#2b1d27;
  --j27-muted:#947c89;
  --j27-line:rgba(122,70,99,.12);
  --j27-accent:#ff3f98;
  --j27-accent2:#b94ce9;
  --j27-accent-soft:rgba(255,63,152,.10);
  --j27-shadow:0 16px 36px rgba(80,35,61,.09);
  --j27-shadow-soft:0 7px 20px rgba(80,35,61,.055);
  --j27-radius:24px;
  --j27-radius-sm:16px;
}

html{
  scroll-behavior:smooth;
}

body.jakV27{
  min-height:100vh !important;
  background:
    radial-gradient(circle at 8% -2%,var(--j27-accent-soft),transparent 25%),
    radial-gradient(circle at 95% 7%,rgba(148,88,231,.07),transparent 23%),
    linear-gradient(180deg,var(--j27-bg),#fff 48%,var(--j27-bg2)) !important;
  color:var(--j27-ink) !important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.jakV27,
body.jakV27 button,
body.jakV27 input,
body.jakV27 textarea,
body.jakV27 select{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}

body.jakV27 *{
  -webkit-tap-highlight-color:transparent;
}

/* role accents */
body.jakV27Owner{
  --j27-accent:#d39b1e;
  --j27-accent2:#ff5e9d;
  --j27-accent-soft:rgba(211,155,30,.11);
}
body.jakV27Admin{
  --j27-accent:#1f9fe8;
  --j27-accent2:#6d67ed;
  --j27-accent-soft:rgba(31,159,232,.10);
}
body.jakV27Mod{
  --j27-accent:#8b5cf6;
  --j27-accent2:#d14ec8;
  --j27-accent-soft:rgba(139,92,246,.10);
}
body.jakV27Event{
  --j27-accent:#ef4fa4;
  --j27-accent2:#29bdd4;
  --j27-accent-soft:rgba(239,79,164,.10);
}
body.jakV27AdminLogin{
  --j27-accent:#218dd8;
  --j27-accent2:#8a58eb;
  --j27-accent-soft:rgba(33,141,216,.10);
}

/* ---------- universal controls ---------- */
body.jakV27 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.jakV27 textarea,
body.jakV27 select{
  min-height:46px !important;
  color:var(--j27-ink) !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--j27-line) !important;
  border-radius:14px !important;
  outline:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 3px 10px rgba(70,35,55,.025) !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .15s ease !important;
}

body.jakV27 textarea{
  min-height:96px !important;
  resize:vertical;
}

body.jakV27 input:focus,
body.jakV27 textarea:focus,
body.jakV27 select:focus{
  border-color:color-mix(in srgb,var(--j27-accent) 55%,white) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--j27-accent) 9%,transparent),
    0 5px 14px rgba(70,35,55,.04) !important;
}

body.jakV27 button{
  transition:transform .14s ease,filter .15s ease,box-shadow .15s ease,opacity .15s ease !important;
}

body.jakV27 button:active:not(:disabled){
  transform:scale(.975) !important;
}

body.jakV27 button:disabled{
  opacity:.52 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}

/* ---------- HOME ---------- */
body.jakV27Home{
  --j27-bg:#fff7fb;
  --j27-bg2:#faf7ff;
  --j27-accent:#ff3f98;
  --j27-accent2:#8c52e5;
  --j27-accent-soft:rgba(255,63,152,.10);
}

body.jakV27Home .brandHero{
  width:calc(100% - 28px) !important;
  max-width:1080px !important;
  margin:14px auto 12px !important;
  padding:23px 18px 20px !important;
  border:1px solid rgba(255,91,164,.13) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,109,181,.13),transparent 28%),
    radial-gradient(circle at 92% 18%,rgba(139,82,229,.09),transparent 26%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,247,252,.94)) !important;
  box-shadow:0 16px 42px rgba(141,43,91,.10) !important;
  overflow:hidden !important;
}

body.jakV27Home .brandHero::before{
  opacity:.32 !important;
}

body.jakV27Home .brandLogo{
  font-size:36px !important;
  letter-spacing:-.045em !important;
  filter:drop-shadow(0 5px 14px rgba(197,54,128,.08));
}

body.jakV27Home .brandSub{
  color:#705363 !important;
  font-size:12px !important;
}

body.jakV27Home .brandMini{
  padding:7px 12px !important;
  color:#c72d7f !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(255,81,159,.10) !important;
  box-shadow:0 5px 14px rgba(131,44,84,.045) !important;
}

body.jakV27Home .userTop{
  top:0 !important;
  padding:9px 14px 4px !important;
  background:rgba(255,248,252,.79) !important;
  backdrop-filter:blur(16px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.12) !important;
  border-bottom:1px solid rgba(142,80,111,.07) !important;
}

body.jakV27Home #search{
  min-height:48px !important;
  padding:0 16px !important;
  border:1px solid rgba(141,76,109,.11) !important;
  border-radius:17px !important;
  background:#fff !important;
  color:#2e2028 !important;
  box-shadow:0 7px 20px rgba(90,39,65,.06) !important;
}

body.jakV27Home #search:focus{
  border-color:rgba(255,63,152,.35) !important;
  box-shadow:0 0 0 4px rgba(255,63,152,.06),0 8px 22px rgba(90,39,65,.07) !important;
}

body.jakV27Home #filterTabs{
  gap:7px !important;
  padding:9px 1px 6px !important;
}

body.jakV27Home #filterTabs button{
  min-height:36px !important;
  padding:8px 13px !important;
  border:1px solid rgba(128,72,102,.09) !important;
  border-radius:999px !important;
  color:#795a6a !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 5px 14px rgba(83,39,62,.04) !important;
  font-size:11px !important;
}

body.jakV27Home #filterTabs button.active{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(110deg,var(--j27-accent),var(--j27-accent2)) !important;
  box-shadow:0 8px 20px rgba(210,57,137,.16) !important;
}

body.jakV27Home #list{
  width:100% !important;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:12px 14px 105px !important;
  gap:12px !important;
}

body.jakV27Home #list .card{
  border:1px solid rgba(128,76,102,.08) !important;
  border-radius:21px !important;
  background:#fff !important;
  box-shadow:0 9px 24px rgba(91,40,67,.075) !important;
  transform:translateZ(0);
  overflow:hidden !important;
}

body.jakV27Home #list .thumb{
  background:linear-gradient(145deg,#fff1f8,#f3edff) !important;
}

body.jakV27Home #list .body{
  background:#fff !important;
}

body.jakV27Home #list .body b{
  color:#34242d !important;
  font-weight:850 !important;
}

body.jakV27Home #list .meta span{
  color:#826b78 !important;
  background:#fff8fc !important;
  border:1px solid rgba(129,75,104,.07) !important;
  box-shadow:none !important;
}

body.jakV27Home .bottomNav{
  left:12px !important;
  right:12px !important;
  bottom:10px !important;
  width:auto !important;
  max-width:560px !important;
  margin:0 auto !important;
  border:1px solid rgba(135,76,107,.10) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  box-shadow:0 14px 38px rgba(78,32,57,.16) !important;
}

body.jakV27Home .jakLiveSummaryButton{
  border:1px solid rgba(255,75,165,.12) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,249,252,.92)) !important;
  box-shadow:0 8px 22px rgba(194,48,123,.065) !important;
}

/* ---------- STAFF SHARED LAYOUT ---------- */
body.jakV27Owner .box,
body.jakV27Mod .box,
body.jakV27Admin .card,
body.jakV27Event .card,
body.jakV27AdminLogin .card{
  border:1px solid var(--j27-line) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:var(--j27-shadow) !important;
  backdrop-filter:blur(13px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(13px) saturate(1.05) !important;
}

body.jakV27Owner .box,
body.jakV27Mod .box,
body.jakV27Admin .card,
body.jakV27Event .card{
  position:relative !important;
  overflow:hidden;
}

body.jakV27Owner .box::before,
body.jakV27Mod .box::before,
body.jakV27Admin .card::before,
body.jakV27Event .card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:3px !important;
  background:linear-gradient(90deg,var(--j27-accent),var(--j27-accent2),transparent) !important;
  opacity:.82;
  pointer-events:none;
}

body.jakV27Owner h1,
body.jakV27Owner h2,
body.jakV27Owner h3,
body.jakV27Admin h1,
body.jakV27Admin h2,
body.jakV27Admin h3,
body.jakV27Mod h1,
body.jakV27Mod h2,
body.jakV27Mod h3,
body.jakV27Event h1,
body.jakV27Event h2,
body.jakV27Event h3{
  color:var(--j27-ink) !important;
  letter-spacing:-.025em !important;
}

body.jakV27Owner p,
body.jakV27Admin p,
body.jakV27Mod p,
body.jakV27Event p,
body.jakV27Owner .small,
body.jakV27Admin .small,
body.jakV27Mod .small,
body.jakV27Event .small{
  color:var(--j27-muted) !important;
}

/* role top bars */
body.jakV27Admin .top,
body.jakV27Mod .top,
body.jakV27Event .top{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  min-height:60px !important;
  padding:11px 16px !important;
  border:0 !important;
  border-bottom:1px solid var(--j27-line) !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.1) !important;
  box-shadow:0 8px 24px rgba(61,28,46,.055) !important;
}

body.jakV27Admin .wrap,
body.jakV27Event .wrap{
  width:calc(100% - 28px) !important;
  max-width:980px !important;
  margin:18px auto 72px !important;
}

body.jakV27Owner .box{
  width:calc(100% - 28px) !important;
  max-width:860px !important;
  padding:22px !important;
}

body.jakV27Mod .box{
  width:calc(100% - 28px) !important;
  max-width:820px !important;
}

/* stats */
body.jakV27Admin .grid{
  gap:9px !important;
}

body.jakV27Admin .stat{
  min-height:92px !important;
  padding:14px 10px !important;
  border:1px solid color-mix(in srgb,var(--j27-accent) 10%,transparent) !important;
  border-radius:17px !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--j27-accent) 5%,white),
      rgba(255,255,255,.95)
    ) !important;
  box-shadow:var(--j27-shadow-soft) !important;
}

body.jakV27Admin .stat b{
  color:var(--j27-accent) !important;
  font-size:25px !important;
}

/* rows/items */
body.jakV27Owner .acc,
body.jakV27Admin .item,
body.jakV27Admin .adminActivityRow,
body.jakV27Admin .adminMultiRow,
body.jakV27Mod .comment,
body.jakV27Mod .replyBox,
body.jakV27Event .codeItem{
  border:1px solid var(--j27-line) !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 5px 15px rgba(73,35,55,.035) !important;
}

/* buttons */
body.jakV27Owner button:not(.ownerConfirmCancel),
body.jakV27Admin button:not(.logout),
body.jakV27Mod button,
body.jakV27Event button:not(.secondary):not(.danger),
body.jakV27AdminLogin button{
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(110deg,var(--j27-accent),var(--j27-accent2)) !important;
  box-shadow:0 8px 19px color-mix(in srgb,var(--j27-accent) 18%,transparent) !important;
}

body.jakV27Event .secondary,
body.jakV27Admin .secondary,
body.jakV27Owner .secondary{
  color:var(--j27-accent) !important;
  background:color-mix(in srgb,var(--j27-accent) 7%,white) !important;
  border:1px solid color-mix(in srgb,var(--j27-accent) 17%,transparent) !important;
  box-shadow:none !important;
}

body.jakV27 .logout,
body.jakV27 .danger{
  background:linear-gradient(110deg,#ef476f,#e93f63) !important;
  color:#fff !important;
  box-shadow:0 7px 17px rgba(239,71,111,.14) !important;
}

/* OWNER premium */
body.jakV27Owner{
  background:
    radial-gradient(circle at 8% -2%,rgba(230,179,54,.12),transparent 26%),
    radial-gradient(circle at 93% 10%,rgba(255,83,158,.08),transparent 24%),
    linear-gradient(180deg,#fffaf0,#fff 46%,#fff8fb) !important;
}
body.jakV27Owner #loginBox{
  margin-top:18vh !important;
}
body.jakV27Owner #loginBox h2::before{
  content:"OWNER CONTROL" !important;
  display:block !important;
  margin-bottom:7px !important;
  color:#b9810f !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.20em !important;
}

/* ADMIN */
body.jakV27Admin{
  background:
    radial-gradient(circle at 8% -2%,rgba(50,170,236,.11),transparent 26%),
    radial-gradient(circle at 94% 10%,rgba(110,103,238,.08),transparent 24%),
    linear-gradient(180deg,#f4fbff,#fff 48%,#f9f8ff) !important;
}
body.jakV27Admin .top{
  color:#254b62 !important;
}
body.jakV27Admin .top::before{
  content:"ADMIN CONTROL" !important;
  color:var(--j27-accent) !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
}

/* MOD */
body.jakV27Mod{
  background:
    radial-gradient(circle at 8% -2%,rgba(139,92,246,.11),transparent 26%),
    radial-gradient(circle at 94% 8%,rgba(209,78,200,.08),transparent 24%),
    linear-gradient(180deg,#faf7ff,#fff 48%,#fff8fd) !important;
}
body.jakV27Mod .top{
  color:#5d417f !important;
}

/* EVENT */
body.jakV27Event{
  background:
    radial-gradient(circle at 8% -2%,rgba(239,79,164,.11),transparent 26%),
    radial-gradient(circle at 94% 8%,rgba(41,189,212,.08),transparent 24%),
    linear-gradient(180deg,#fff7fb,#fff 48%,#f5fdff) !important;
}
body.jakV27Event .brand span{
  color:var(--j27-accent) !important;
}
body.jakV27Event .progress{
  background:color-mix(in srgb,var(--j27-accent) 8%,white) !important;
}
body.jakV27Event .progress > span{
  background:linear-gradient(90deg,var(--j27-accent),var(--j27-accent2)) !important;
}

/* ADMIN LOGIN */
body.jakV27AdminLogin{
  min-height:100vh !important;
  height:auto !important;
  padding:24px 12px !important;
  background:
    radial-gradient(circle at 20% 15%,rgba(33,141,216,.13),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(138,88,235,.10),transparent 28%),
    linear-gradient(160deg,#f1fbff,#faf7ff 55%,#fff) !important;
}

body.jakV27AdminLogin .card{
  width:min(390px,94vw) !important;
  padding:30px 25px !important;
  border-radius:28px !important;
}

body.jakV27AdminLogin .card::before{
  content:"JAKSKY STAFF ACCESS" !important;
  display:block !important;
  margin-bottom:10px !important;
  color:var(--j27-accent) !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
}

body.jakV27AdminLogin h2{
  margin-bottom:18px !important;
  color:#24445a !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  font-size:27px !important;
  letter-spacing:-.035em !important;
}

/* toast */
body.jakV27 .toast{
  border:1px solid var(--j27-line) !important;
  background:rgba(255,255,255,.94) !important;
  color:var(--j27-accent) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 12px 30px rgba(50,22,38,.16) !important;
}

/* ---------- DARK MODE ---------- */
html[data-jak-theme="dark"] body.jakV27{
  --j27-bg:#171119;
  --j27-bg2:#110d13;
  --j27-surface:#211820;
  --j27-surface-soft:#291e27;
  --j27-ink:#fff5fa;
  --j27-muted:#b19aa7;
  --j27-line:rgba(255,220,238,.09);

  background:
    radial-gradient(circle at 8% -2%,var(--j27-accent-soft),transparent 24%),
    radial-gradient(circle at 95% 7%,rgba(150,91,229,.07),transparent 23%),
    linear-gradient(180deg,#1a1219,#110d13 56%,#120e14) !important;
}

html[data-jak-theme="dark"] body.jakV27 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-jak-theme="dark"] body.jakV27 textarea,
html[data-jak-theme="dark"] body.jakV27 select{
  color:#fff6fa !important;
  background:#261b24 !important;
  border-color:rgba(255,220,238,.10) !important;
}

html[data-jak-theme="dark"] body.jakV27Owner .box,
html[data-jak-theme="dark"] body.jakV27Mod .box,
html[data-jak-theme="dark"] body.jakV27Admin .card,
html[data-jak-theme="dark"] body.jakV27Event .card,
html[data-jak-theme="dark"] body.jakV27AdminLogin .card{
  color:#fff5fa !important;
  background:rgba(35,25,33,.93) !important;
  border-color:rgba(255,220,238,.08) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.20) !important;
}

html[data-jak-theme="dark"] body.jakV27Admin .top,
html[data-jak-theme="dark"] body.jakV27Mod .top,
html[data-jak-theme="dark"] body.jakV27Event .top{
  color:#fff6fa !important;
  background:rgba(30,21,28,.84) !important;
  border-bottom-color:rgba(255,220,238,.08) !important;
}

html[data-jak-theme="dark"] body.jakV27Owner .acc,
html[data-jak-theme="dark"] body.jakV27Admin .item,
html[data-jak-theme="dark"] body.jakV27Admin .adminActivityRow,
html[data-jak-theme="dark"] body.jakV27Admin .adminMultiRow,
html[data-jak-theme="dark"] body.jakV27Mod .comment,
html[data-jak-theme="dark"] body.jakV27Mod .replyBox,
html[data-jak-theme="dark"] body.jakV27Event .codeItem{
  color:#fff5fa !important;
  background:#2a1e27 !important;
  border-color:rgba(255,220,238,.08) !important;
}

html[data-jak-theme="dark"] body.jakV27Home .brandHero,
html[data-jak-theme="dark"] body.jakV27Home #list .card,
html[data-jak-theme="dark"] body.jakV27Home #list .body,
html[data-jak-theme="dark"] body.jakV27Home .jakLiveSummaryButton{
  color:#fff5fa !important;
  background:#251a23 !important;
  border-color:rgba(255,220,238,.08) !important;
}

html[data-jak-theme="dark"] body.jakV27Home .userTop{
  background:rgba(24,17,23,.80) !important;
  border-bottom-color:rgba(255,220,238,.07) !important;
}

html[data-jak-theme="dark"] body.jakV27Home #search{
  color:#fff6fa !important;
  background:#2a1e27 !important;
  border-color:rgba(255,220,238,.09) !important;
}

html[data-jak-theme="dark"] body.jakV27Home #filterTabs button{
  color:#ccb5c2 !important;
  background:#2a1e27 !important;
  border-color:rgba(255,220,238,.07) !important;
}

html[data-jak-theme="dark"] body.jakV27Home #filterTabs button.active{
  color:#fff !important;
  background:linear-gradient(110deg,var(--j27-accent),var(--j27-accent2)) !important;
}

html[data-jak-theme="dark"] body.jakV27Home .bottomNav{
  background:rgba(39,28,37,.88) !important;
  border-color:rgba(255,220,238,.08) !important;
}

/* ---------- MOBILE ---------- */
@media(max-width:620px){
  body.jakV27Home #list{
    padding-left:10px !important;
    padding-right:10px !important;
    gap:10px !important;
  }

  body.jakV27Home #list .card{
    border-radius:19px !important;
  }

  body.jakV27Owner .box,
  body.jakV27Mod .box,
  body.jakV27Admin .card,
  body.jakV27Event .card{
    border-radius:21px !important;
  }

  body.jakV27Owner .box{
    padding:17px !important;
  }

  body.jakV27Admin .card,
  body.jakV27Event .card{
    padding:17px !important;
  }

  body.jakV27Admin .grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body.jakV27Admin .stat{
    min-height:80px !important;
    padding:12px 5px !important;
    font-size:10px !important;
  }

  body.jakV27Admin .stat b{
    font-size:21px !important;
  }
}

@media(max-width:380px){
  body.jakV27Admin .grid{
    grid-template-columns:1fr !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.jakV27 *,
  body.jakV27 *::before,
  body.jakV27 *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}