/* Papaya25 — capa visual viva, legible e interactiva */
:root {
  --play-purple: #7357ee;
  --play-pink: #ff5d8f;
  --play-orange: #ff963d;
  --play-yellow: #ffd647;
  --play-cyan: #00cceb;
  --play-mint: #35d5a4;
  --play-night: #10172e;
}

html { font-size: 16px; }
html,
body { max-width: 100%; overflow-x: hidden; }
body {
  background: radial-gradient(circle at 8% 10%, #dff8ff 0, transparent 27%),
              radial-gradient(circle at 88% 8%, #ede5ff 0, transparent 30%),
              linear-gradient(135deg, #f9fbff, #fff8f4);
  font-size: 15px;
}

.app-shell,
.workspace,
.content,
.screen-stack,
.studio-layout,
.editor-card { min-width: 0; max-width: 100%; }

.menu-scrim,
.sidebar-close { display: none; }

.sidebar {
  background: radial-gradient(circle at 20% 5%, #7357ee90, transparent 25%),
              radial-gradient(circle at 95% 85%, #00cceb50, transparent 30%),
              linear-gradient(165deg, #10172e, #172f51 58%, #174f68);
  padding: 23px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff45 transparent;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: #ffffff35; }
.sidebar::before,
.sidebar::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.sidebar::before {
  width: 150px; height: 150px; right: -85px; top: 125px;
  border: 1px solid #ffffff18;
  box-shadow: 0 0 0 25px #ffffff08, 0 0 0 50px #ffffff04;
}
.sidebar::after {
  width: 12px; height: 12px; left: 21px; bottom: 146px;
  background: var(--play-orange);
  box-shadow: 21px 18px 0 var(--play-cyan), 42px -6px 0 var(--play-pink);
}
.brand { position: relative; z-index: 1; padding: 4px 10px 28px; align-items: flex-start; }
.brand img { display: block; width: 185px; max-width: 100%; height: auto; }
.brand span,
.login-brand span { margin-top: 7px; color: #a8def0; font-size: 10px; font-weight: 900; letter-spacing: .31em; }
.sidebar nav,
.system-state,
.user-card { position: relative; z-index: 1; }
.sidebar nav { gap: 8px; }
.sidebar nav a {
  padding: 11px 10px; border-radius: 15px; color: #d3e4eb;
  font-size: 14px; transition: transform .18s, background .18s, color .18s;
}
.sidebar nav a span { width: 39px; height: 39px; border-radius: 13px; font-size: 10px; }
.sidebar nav a:hover { transform: translateX(4px); background: #ffffff13; }
.sidebar nav a.active {
  background: linear-gradient(120deg, #ffffff1c, #ffffff0a);
  box-shadow: inset 3px 0 0 var(--play-orange);
}
.sidebar nav a.active span {
  background: linear-gradient(145deg, var(--play-purple), var(--play-cyan));
  box-shadow: 0 8px 20px #00cceb35;
}

.topbar {
  height: 76px; padding: 0 30px; background: #ffffffdd;
  backdrop-filter: blur(15px); box-shadow: 0 8px 28px #23395b0a;
}
.menu-toggle {
  width: 46px; height: 46px; border-radius: 15px; font-size: 22px;
  transition: transform .18s, box-shadow .18s;
}
.menu-toggle:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #7357ee20; border-color: #cfc4ff; }
.crumb { font-size: 13px; font-weight: 700; }
.topbar-brand-dot {
  width: 31px; height: 31px; display: grid; place-items: center;
  border-radius: 10px; color: #fff !important; font-size: 9px; font-weight: 1000;
  background: linear-gradient(145deg, var(--play-orange), var(--play-pink));
  box-shadow: 0 6px 16px #ff5d8f38;
}
.secure-state { font-size: 12px; }

.content { padding: 38px; }
.screen-stack { gap: 23px; }
.hero {
  padding: 34px; border: 1px solid #ffffffb8; border-radius: 29px;
  background: radial-gradient(circle at 88% 20%, #ffffffb8 0 7%, transparent 8%),
              linear-gradient(125deg, #dff9ff, #eee7ff 48%, #fff0dc);
  box-shadow: 0 18px 50px #6f57d618;
  transition: transform .2s;
}
.hero:hover { transform: translateY(-2px); }
.hero::before {
  content: ""; position: absolute; width: 76px; height: 76px; right: 56px; top: -31px;
  border-radius: 24px; opacity: .9; transform: rotate(24deg);
  background: linear-gradient(145deg, var(--play-orange), var(--play-pink));
}
.hero h1 { color: #342478; font-size: 42px; }
.hero p:not(.eyebrow) { font-size: 15px; line-height: 1.55; }
.eyebrow { color: #6850dc; font-size: 11px; }
.primary,
.secondary {
  min-height: 44px; padding: 12px 19px; border-radius: 14px; font-size: 13px;
  transition: transform .18s, box-shadow .18s;
}
.primary {
  border: 0; background: linear-gradient(120deg, var(--play-purple), #5288f4 55%, var(--play-cyan));
  box-shadow: 0 10px 25px #7357ee36;
}
.primary:hover,
.secondary:hover { transform: translateY(-2px); }
.secondary:hover { box-shadow: 0 9px 22px #19395512; }

.foundation-strip { gap: 13px; }
.foundation-strip > div {
  padding: 18px; border: 0; border-radius: 20px;
  box-shadow: 0 12px 35px #21344d0d; transition: transform .18s;
}
.foundation-strip > div:hover { transform: translateY(-3px); }
.foundation-strip > div:nth-child(1) > span { background: #e9e3ff; color: var(--play-purple); }
.foundation-strip > div:nth-child(2) > span { background: #dcfaff; color: #008eaa; }
.foundation-strip > div:nth-child(3) > span { background: #fff0dc; color: #d66a16; }
.foundation-strip > div > span { width: 42px; height: 42px; border-radius: 14px; font-size: 11px; }
.foundation-strip b { font-size: 13px; }
.foundation-strip small { font-size: 11px; }

.card,
.editor-card {
  border: 1px solid #fff; border-radius: 24px; background: #fffffff2;
  box-shadow: 0 16px 45px #23395b0d;
}
.card { padding: 24px; }
.section-title h2 { font-size: 23px; }
.pill,
.status { padding: 7px 11px; font-size: 10px; }
.race-list { margin: 0 -24px -24px; }
.race-row { padding: 17px 24px; transition: background .16s, transform .16s; }
.race-row:hover { background: linear-gradient(90deg, #f3f0ff, #effcff); transform: translateX(3px); }
.race-date {
  width: 50px; height: 53px; border-radius: 16px;
  background: linear-gradient(145deg, #e0f8ff, #e9e4ff); box-shadow: 0 7px 18px #0083d718;
}
.race-main strong { font-size: 15px; }
.race-main span { font-size: 11px; }
.race-row small { font-size: 9px; }
.race-row > div > b { font-size: 12px; }

.studio-layout { grid-template-columns: 235px 1fr; gap: 18px; }
.wizard {
  padding: 14px; border-radius: 22px;
  background: radial-gradient(circle at 85% 10%, #7357ee66, transparent 26%),
              linear-gradient(165deg, #10172e, #173d59);
  box-shadow: 0 18px 42px #10172e26;
}
.wizard > div strong { font-size: 25px; }
.wizard > div small { font-size: 11px; }
.wizard > span { padding: 10px; font-size: 12px; }
.wizard > span i { width: 31px; height: 31px; border-radius: 10px; font-size: 10px; }
.wizard > span.active {
  background: linear-gradient(110deg, #ffffff20, #ffffff08);
  box-shadow: inset 3px 0 0 var(--play-orange);
}
.editor-card { padding: 29px; }
.editor-head h2 { font-size: 30px; }
.editor-head p:not(.eyebrow) { font-size: 12px; }
.form-grid { gap: 18px; }
.form-grid label { gap: 8px; font-size: 13px; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: 13px; border-radius: 13px; font-size: 15px;
  transition: border-color .16s, box-shadow .16s;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus { outline: 0; border-color: #8a73ed; box-shadow: 0 0 0 4px #7357ee13; }
.form-grid label > small { font-size: 11px; line-height: 1.4; }
.slug-input { border-radius: 13px; }
.slug-input span {
  padding: 13px; white-space: nowrap; background: linear-gradient(110deg, #f0edff, #e6faff);
  font-size: 12px; font-weight: 900;
}
.slug-input input { font-size: 15px; }
.storage-note { padding: 15px; border-radius: 17px; }
.storage-note b { font-size: 12px; }
.storage-note small { font-size: 11px; }

.identity-assets { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px !important; }
.asset-uploader {
  position: relative; padding: 11px; border: 1px solid #dfe6ef; border-radius: 19px;
  background: linear-gradient(145deg, #fff, #fbfbff); cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.asset-uploader:hover { transform: translateY(-3px); border-color: #b9aaff; box-shadow: 0 13px 30px #7357ee17; }
.asset-preview {
  height: 145px; display: grid; place-items: center; align-content: center; gap: 7px;
  overflow: hidden; border-radius: 14px;
  background: radial-gradient(circle at 20% 15%, #ffffffcc, transparent 25%),
              linear-gradient(135deg, #eee9ff, #ddfaff);
}
.asset-preview img { width: 100%; height: 100%; object-fit: contain; background: linear-gradient(135deg, #18213a, #1c5670); }
.asset-preview b { color: var(--play-purple); font-size: 28px; }
.asset-preview small { color: #6d7b85; font-size: 11px; }
.asset-copy { display: flex; flex-direction: column; gap: 5px; padding: 11px 4px 3px; }
.asset-copy > b { font-size: 14px; }
.asset-copy small { color: var(--muted); font-size: 10px; font-weight: 500; }
.asset-copy em { color: #15906a; font-size: 9px; font-style: normal; }
.asset-copy strong { margin-top: 5px; color: var(--play-purple); font-size: 11px; }
.asset-uploader > input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }

.login-page {
  background: radial-gradient(circle at 12% 75%, #d8f9ff, transparent 27%),
              radial-gradient(circle at 85% 10%, #e9ddff, transparent 32%),
              linear-gradient(135deg, #fbfcff, #fff5ed);
}
.login-card { width: min(500px, 100%); padding: 36px; border: 1px solid #fff; border-radius: 30px; box-shadow: 0 28px 80px #2a296327; }
.login-brand {
  padding: 22px; border-radius: 21px;
  background: radial-gradient(circle at 88% 10%, #7357ee70, transparent 25%), linear-gradient(145deg, #10172e, #17536d);
}
.login-brand img { width: 240px; max-width: 100%; height: auto; }
.login-card h1 { font-size: 36px; }
.login-copy { font-size: 14px; }
.login-card label { font-size: 13px; }
.login-card input { padding: 13px; border-radius: 13px; font-size: 15px; }
.login-card > small { font-size: 10px; }

.sidebar nav a.nav-disabled { opacity: .48; cursor: not-allowed; }
.user-card > a {
  flex: 0 0 auto; color: #cbe0e9; font-size: 16px; line-height: 1;
  transition: color .16s, transform .16s;
}
.user-card > a:hover { color: #fff; transform: rotate(18deg); }
.password-card label small { color: var(--muted); font-size: 11px; line-height: 1.45; }

@media (max-width: 1280px) {
  .menu-open .workspace { margin-left: 0; }
  .sidebar { width: min(300px, 86vw); box-shadow: 18px 0 55px #07172e55; }
  .menu-scrim {
    display: block; position: fixed; inset: 0; z-index: 25; border: 0; padding: 0;
    background: #07172e8c; opacity: 0; visibility: hidden; pointer-events: none;
    backdrop-filter: blur(3px); transition: opacity .2s, visibility .2s; cursor: pointer;
  }
  .menu-open .menu-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
  .sidebar-close {
    display: grid; place-items: center; position: absolute; z-index: 3; top: 16px; right: 14px;
    width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff2b; border-radius: 12px;
    color: #fff; background: #ffffff12; font-size: 26px; line-height: 1; cursor: pointer;
  }
  .sidebar-close:hover { background: #ffffff22; }
  .brand { padding-right: 42px; }
}
@media (max-width: 1000px) {
  .studio-layout { grid-template-columns: 1fr; }
  .identity-assets { grid-template-columns: 1fr 1fr !important; }
  .content { padding: 28px; }
  .hero h1 { font-size: 36px; }
}
@media (max-width: 650px) {
  .brand img { width: 170px; }
  .content { padding: 18px 13px; }
  .topbar { height: 68px; }
  .crumb > span:not(.topbar-brand-dot) { display: none; }
  .hero { padding: 24px; border-radius: 23px; }
  .hero::before { right: 20px; }
  .hero h1 { font-size: 31px; }
  .editor-card { padding: 18px; border-radius: 20px; }
  .editor-head h2 { font-size: 26px; }
  .identity-assets { grid-template-columns: 1fr !important; }
  .asset-preview { height: 165px; }
  .slug-input { flex-direction: column; }
  .slug-input span { padding: 9px 12px; }
  .login-card { padding: 24px; }
  .login-card h1 { font-size: 30px; }
}
.main-sponsor-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}.main-sponsor-preview{min-height:280px;border-radius:24px;background:linear-gradient(135deg,#36268e,#6d4df4 52%,#12bde2);display:grid;place-items:center;padding:24px;color:#fff;text-align:center;overflow:hidden}.main-sponsor-preview img{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:15px}.main-sponsor-preview span{font-size:64px;font-weight:950}.main-sponsor-preview p{grid-column:1;margin:0}@media(max-width:850px){.main-sponsor-grid{grid-template-columns:1fr}}