:root {
  --sp-bg: #f4f5f6;
  --sp-surface: #ffffff;
  --sp-surface-soft: #fafafa;
  --sp-ink: #202225;
  --sp-muted: #73777d;
  --sp-line: #e5e7e9;
  --sp-shadow: 0 18px 45px rgba(25, 28, 32, .08);
  --sp-shadow-hover: 0 24px 58px rgba(25, 28, 32, .13);
  --sp-ease: cubic-bezier(.22, .8, .24, 1);
}

html { background: var(--sp-bg); }
body { color: var(--sp-ink); background: radial-gradient(circle at 8% 0%, #fff 0, transparent 34%), linear-gradient(145deg, #fafafa 0%, var(--sp-bg) 60%, #e9ebed 100%); }
.glass { background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.96); border-radius: 16px; box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(16px) saturate(105%); -webkit-backdrop-filter: blur(16px) saturate(105%); }
.glass::before { display: none; }
a, button, input, textarea, select { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .22s var(--sp-ease); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(32,34,37,.18); outline-offset: 3px; }
.user-shell { padding-top: 18px; padding-bottom: 24px; }
.user-topbar, .admin-topbar { box-shadow: 0 10px 28px rgba(25,28,32,.06), inset 0 1px 0 #fff; }
.user-topbar { border-radius: 16px; }
.brand-link, .admin-brand { letter-spacing: .01em; }
.brand-link strong, .admin-brand strong { font-weight: 800; }
.user-nav a { border-radius: 10px; color: var(--sp-muted); }
.user-nav a:hover, .user-nav a[aria-current='page'] { color: var(--sp-ink); background: #f0f1f2; box-shadow: inset 0 0 0 1px var(--sp-line); }
.page-enter { animation: sp-rise .42s var(--sp-ease) both; }
@keyframes sp-rise { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.99); } to { opacity: 1; transform: none; } }
.metric, .content-panel, .release-item, .checkin-panel, .shop-panel, .license-result, .admin-form, .generated-keys { border-radius: 16px; box-shadow: var(--sp-shadow); }
.metric:hover, .content-panel:hover, .release-item:hover, .admin-form:hover, .generated-keys:hover { box-shadow: var(--sp-shadow-hover); transform: translateY(-2px); }
.metric, .content-panel, .release-item, .admin-form, .generated-keys { transition: box-shadow .28s ease, transform .28s var(--sp-ease), border-color .28s ease; }
.primary-button, .secondary-button, .copy-button, td button { border-radius: 10px; border: 1px solid #d9dcdf; background: var(--sp-ink); color: #fff; box-shadow: 0 7px 16px rgba(25,28,32,.12); }
.primary-button:hover, .copy-button:hover, td button:hover { background: #3a3e43; box-shadow: 0 11px 22px rgba(25,28,32,.16); transform: translateY(-1px); }
.secondary-button { background: #fff; color: var(--sp-ink); box-shadow: none; }
.secondary-button:hover { background: #f1f2f3; }
.field input, .field textarea, .field select, .role-form select, .points-form input, .points-form select { border: 1px solid var(--sp-line); border-radius: 10px; background: rgba(255,255,255,.86); color: var(--sp-ink); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #c9cdd1; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #7c8187; box-shadow: 0 0 0 4px rgba(32,34,37,.08); }
.release-item { align-items: center; }
.release-link { min-width: 118px; text-align: center; }
.release-platform, .status-pill, .page-kicker { letter-spacing: .08em; }
.status-pill { border-color: var(--sp-line); background: #f1f2f3; color: #53575c; }
.status-pill.is-online { background: #e7e9ea; color: #222; }
.notice { border-radius: 12px; background: #fff; border-color: var(--sp-line); box-shadow: var(--sp-shadow); }
.admin-layout { gap: 22px; padding: 18px; }
.admin-sidebar { border-radius: 16px; box-shadow: var(--sp-shadow); }
.admin-sidebar nav a, .sidebar-logout button { border-radius: 10px; color: var(--sp-muted); }
.admin-sidebar nav a:hover, .sidebar-logout button:hover { color: var(--sp-ink); background: #f1f2f3; }
.admin-sidebar nav a[aria-current='page'] { color: var(--sp-ink); background: #eef0f1; border-color: #dfe2e4; box-shadow: inset 3px 0 0 #34383f; }
.admin-topbar { border-radius: 16px; }
.table-wrap { border-radius: 16px; box-shadow: var(--sp-shadow); }
tbody tr:not(.empty-row):hover { background: #f7f7f7; }
td button.danger-action { background: #303236; border-color: #303236; }
.release-item .primary-button, .admin-form .primary-button { min-height: 44px; }
@media (max-width: 640px) {
  .user-shell { width: calc(100% - 20px); padding-top: 10px; }
  .user-topbar { padding: 10px; }
  .release-link { width: 100%; }
  .metric, .content-panel, .release-item, .admin-form, .generated-keys { border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.download-publish-panel{border:1px solid rgba(17,24,39,.08)}
.download-card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.download-card{min-height:168px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .24s ease,box-shadow .24s ease}
.download-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(15,23,42,.12)}
.download-card .release-meta{align-items:center}
.download-card .release-meta strong{font-size:1.05rem;color:#111827}
.download-card .primary-button{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.download-card{transition:none}.download-card:hover{transform:none}}