/* =====================================================================
SHARK — AKR design layer.
Pure restyle on top of solar.css + device-skycore-theme.css.
No markup, text or logic is changed; remove the to roll back.
===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Great+Vibes&display=swap");
/* font: Geist (as on arbuz.cc, SIL OFL) - every old family name maps to it; hero "Shark" keeps Pinyon Script */
@font-face { font-family: "Shark Sans"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "SIRegular"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "SILight"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "SIMedium"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "SISemiBold"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "ThinSuisse"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "TikTok Sans"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./Geist-Variable.woff2?v=1") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./GeistMono-Variable.woff2?v=1") format("woff2"); }
:root {
/* brand colour of the AKR design (wins over the inline value set from Configuration.json) */
--site-accent: #a4a3fd !important;
--site-accent-rgb: 164, 163, 253 !important;
--site-accent-light: #c9c8ff !important;
--site-accent-dark: #8f8df5 !important;
--sk-bg: #0b0b0d;
--sk-brand: #a4a3fd;
--sk-line: rgba(255, 255, 255, .055);
--sk-text-2: #a9a9b0;
--sk-text-3: #6d6d74;
--sk-green: #9be3a8;
--sk-red: #f0828f;
--sk-container: 1260px;
}
html, body { background: var(--sk-bg) !important; }
.app-shell,
.app-shell *:not([style*="font-family: Icons"]):not([style*="font-family:Icons"]):not([style*="fontFamily: Icons"]):not([style*="fontFamily:Icons"]),
.app-modal-portal, .app-modal-portal *, .app-notice-center, .app-notice-center * {
font-family: "Geist", "Shark Sans", system-ui, sans-serif !important;
letter-spacing: -0.01em;
}
/* ---------------- background ---------------- */
.app-shell { background: var(--sk-bg) !important; }
.app-shell .app-shell__background { background: var(--sk-bg) !important; }
.app-shell .app-shell__background::before {
inset: 0 !important; filter: none !important; transform: none !important;
background:
radial-gradient(420px 900px at 22% -8%, rgba(160, 160, 200, .075), transparent 70%),
radial-gradient(900px 700px at 80% 40%, rgba(120, 120, 150, .035), transparent 70%),
var(--sk-bg) !important;
}
.app-shell .app-shell__background::after { background: none !important; }
/* home: glass rings behind the hero */
.app-shell:has(.hero-section) .app-shell__background::before {
position: absolute !important; height: min(100vh, 1150px); bottom: auto !important;
background: linear-gradient(180deg, transparent 72%, var(--sk-bg) 100%), url("./shark-rings.svg") center / cover no-repeat, #000 !important;
animation: skArtIn 1.6s ease both;
}
@keyframes skArtIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
#page-bottom-blur { display: none !important; }
/* ---------------- header ---------------- */
.app-header { top: 0 !important; }
.app-header__sticky { display: block !important; }
.app-header__shell { width: 100% !important; max-width: none !important; border-radius: 0 !important; }
.app-header__surface {
border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--sk-line) !important;
background: rgba(16, 16, 19, .55) !important; backdrop-filter: blur(14px) !important; box-shadow: none !important;
}
.app-header__inner { max-width: var(--sk-container); margin: 0 auto; min-height: 82px !important; padding: 0 24px !important; }
.app-header__brand::before { display: none !important; }
.app-header__brand::after { content: "Shark"; font-weight: 600; font-size: 16.5px; color: #fff; margin-left: 12px; letter-spacing: -0.02em; }
.app-header__brand { display: inline-flex !important; align-items: center; margin-right: 38px; }
.app-header__nav { gap: 0 !important; }
.app-header__nav-link {
font-size: 12px !important; font-weight: 500 !important; color: var(--sk-text-3) !important; padding: 8px 0 !important;
background: none !important; border: 0 !important; box-shadow: none !important; transition: color .2s;
}
.app-header__nav-link > svg { display: none !important; }
.app-header__nav-link + .app-header__nav-link { margin-left: 34px; padding-left: 35px !important; position: relative; }
.app-header__nav-link + .app-header__nav-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 7px; margin-top: -3px; background: rgba(255,255,255,.08); }
.app-header__nav-link:hover, .app-header__nav-link--active { color: #fff !important; }
.app-header__actions { gap: 12px !important; }
.app-header__auth-link {
display: inline-flex !important; align-items: center; justify-content: center; height: 45px; padding: 0 26px !important; border-radius: 9px !important;
background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.025) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 500 !important;
}
.app-header__auth-link:hover { background: rgba(255,255,255,.055) !important; }
.app-header__profile { height: 45px !important; min-height: 45px !important; padding: 0 28px !important; }
.app-shell__main { padding-top: 82px; }
/* ---------------- buttons ---------------- */
.action-button--primary, .app-header__profile, .auth-page__submit, .admin-page__primary, .contacts-page__submit {
background: linear-gradient(180deg, #b4b3ff, #9796f6) !important; color: #fff !important; border: 0 !important;
border-radius: 9px !important; font-weight: 500 !important; font-size: 13px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(150,148,250,.22) !important;
text-shadow: none !important; transition: filter .2s, transform .2s !important; opacity: 1 !important;
}
.action-button--primary *, .app-header__profile *, .auth-page__submit * { color: #fff !important; }
.action-button--primary:hover:not(:disabled), .app-header__profile:hover, .auth-page__submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.action-button--primary::before, .action-button--secondary::before, .app-header__profile::before { display: none !important; }
.action-button--secondary, .hero-account-button, .admin-page__preset-button {
background: rgba(255,255,255,.035) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.03) !important;
border-radius: 9px !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important; text-shadow: none !important;
}
.action-button--secondary:hover:not(:disabled), .hero-account-button:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(164,163,253,.22) !important; transform: none !important; }
.action-button:disabled, .auth-page__submit:disabled { opacity: .5 !important; }
/* ---------------- cards / panels ---------------- */
.blur-panel, .contacts-page__card, .support-workspace__panel, .support-workspace__sidebar {
background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important;
border: 1px solid rgba(255,255,255,.04) !important; border-radius: 20px !important;
backdrop-filter: none !important; box-shadow: none !important;
}
.glass-chip {
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; border: 1px solid rgba(164,163,253,.16) !important;
border-radius: 21px !important; color: #fff !important; font-size: 12.5px !important; font-weight: 500 !important; box-shadow: none !important;
}
.video-review-section__badge, .route-badge {
height: 42px; padding: 0 20px !important; border-radius: 21px !important; gap: 9px !important;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; border: 1px solid rgba(164,163,253,.16) !important; box-shadow: none !important;
}
.video-review-section__badge-icon, .route-badge__icon { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; color: var(--sk-brand) !important; }
.video-review-section__badge-icon svg, .route-badge__icon svg { width: 14px !important; height: 14px !important; }
.video-review-section__badge-text, .route-badge__text { font-size: 13.5px !important; font-weight: 600 !important; color: #fff !important; }
/* inputs */
.glass-input, .glass-select, .glass-textarea, .auth-page__field, .profile-page__input-wrapper, .support-workspace__input, .support-workspace__textarea, .pay-field {
background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.04) !important; border-radius: 9px !important;
box-shadow: none !important; color: #fff !important; backdrop-filter: none !important;
}
.glass-input:focus, .glass-select:focus, .glass-textarea:focus, .auth-page__field:focus-within, .profile-page__input-wrapper:focus-within { border-color: rgba(164,163,253,.4) !important; }
.glass-input, .glass-select { min-height: 46px; font-size: 13.5px !important; }
.glass-select option { background: #16161b; }
.app-shell input::placeholder, .app-shell textarea::placeholder, .app-modal-portal input::placeholder { color: #8a8a92 !important; opacity: 1; }
/* ---------------- HERO (home) ---------------- */
.hero-section { min-height: calc(min(100vh, 1150px) - 82px) !important; display: flex !important; align-items: center !important; padding: 0 24px !important; }
.hero-section__content { width: 100% !important; max-width: var(--sk-container) !important; margin: 0 auto !important; text-align: left !important; transform: none !important; }
.hero-section__content > div:first-child { display: none !important; }
.hero-section__title { font-size: 55px !important; line-height: 1.14 !important; font-weight: 700 !important; letter-spacing: -0.035em !important; margin: 0 !important; text-shadow: 0 6px 40px rgba(0,0,0,.45); max-width: 620px; }
.hero-section__title-line, .hero-section__title-line > * { font-size: inherit !important; font-weight: 700 !important; color: #fff !important; text-align: left !important; }
.hero-section__title-line { display: inline-block !important; animation: skFall .95s cubic-bezier(.22,1.2,.36,1) both; }
.app-shell .hero-section__title-accent, .app-shell .hero-section__title-line > .hero-section__title-accent {
font-family: "Pinyon Script", cursive !important; font-weight: 400 !important; font-size: 68px !important; letter-spacing: 0 !important; line-height: .9;
color: var(--sk-brand) !important; background: none !important; -webkit-text-fill-color: var(--sk-brand) !important; text-shadow: none !important;
display: inline-block !important; animation: skFall .95s cubic-bezier(.22,1.2,.36,1) .25s both; padding: 0 6px 0 2px;
}
.hero-section__title-accent::after { display: none !important; }
.hero-section__description { margin: 26px 0 0 !important; max-width: 560px !important; text-align: left !important; }
.hero-section__description-line { display: block; font-size: 15px !important; line-height: 1.32 !important; color: #8e8e95 !important; font-weight: 400 !important; text-align: left !important; animation: skFall .9s cubic-bezier(.22,1.2,.36,1) .45s both; }
.hero-section__description-line + .hero-section__description-line { animation-delay: .6s; }
.hero-section__actions { justify-content: flex-start !important; gap: 13px !important; margin-top: 44px !important; animation: skRise .8s cubic-bezier(.2,.8,.2,1) .8s both; }
.hero-section__actions .action-button, .hero-section__actions .hero-account-button { width: 256px; height: 50px !important; min-height: 50px !important; border-radius: 12px !important; justify-content: center !important; font-size: 13px !important; padding: 0 !important; }
.hero-section__actions svg { width: 14px !important; height: 14px !important; }
@keyframes skFall { 0% { opacity: 0; transform: translateY(-70px) rotate(-4deg); filter: blur(6px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes skRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* media section */
.video-review-section { padding-top: 120px !important; padding-bottom: 120px !important; }
.video-review-section__title, .route-title { font-size: 40px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; color: #fff !important; line-height: 1.15 !important; }
.video-review-section__description, .route-description { color: var(--sk-text-2) !important; font-size: 14.5px !important; font-weight: 400 !important; }
.video-frame { border-radius: 20px !important; border: 1px solid rgba(255,255,255,.05) !important; box-shadow: 0 30px 70px rgba(0,0,0,.45) !important; }
.video-frame__play { background: linear-gradient(180deg, #b4b3ff, #9796f6) !important; border: 0 !important; box-shadow: 0 10px 40px rgba(150,148,250,.45) !important; color: #fff !important; }
/* ---------------- inner pages: headings ---------------- */
.route-page { padding-top: 70px !important; }
.route-page h1 { font-size: 40px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; }
.route-page h1 + p { color: var(--sk-text-2) !important; font-weight: 400 !important; }
.route-page__stack { max-width: var(--sk-container); margin-left: auto; margin-right: auto; }
.route-rule, .profile-page__hero-rule { background: var(--sk-line) !important; height: 1px !important; border: 0 !important; opacity: 1 !important; }
/* products */
.products-page__card { padding: 28px 27px !important; transition: border-color .3s, transform .3s, box-shadow .3s !important; }
.products-page__card:hover { border-color: rgba(164,163,253,.22) !important; transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; }
.products-page__card h2 { font-size: 16.5px !important; font-weight: 500 !important; letter-spacing: -0.02em; }
.products-page__card p { font-size: 13.5px !important; color: var(--sk-text-2) !important; }
.products-page__card > div:last-child > span { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.03em; }
.products-page__card .action-button { height: 46px; padding: 0 22px !important; border-radius: 8px !important; }
/* advantages page (inline-styled cards) */
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] { border-radius: 20px !important; border-color: rgba(255,255,255,.04) !important; background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important; }
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] div[style*="rgba(255, 255, 255, 0.02)"] { border-radius: 12px !important; }
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] span { font-weight: 500 !important; }
/* ---------------- auth ---------------- */
.auth-page__layout { max-width: 458px !important; }
.auth-page__panel { padding: 22px 20px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important; border: 1px solid rgba(255,255,255,.04) !important; box-shadow: none !important; backdrop-filter: none !important; }
.auth-page__field { min-height: 50px !important; }
.auth-page__input { font-size: 13.5px !important; font-weight: 500 !important; color: #fff !important; background: none !important; }
.auth-page__field-icon { color: #9a9aa1 !important; }
.auth-page__submit, .auth-page .action-button { min-height: 50px !important; height: 50px; border-radius: 7px !important; width: 100%; }
.auth-page .action-button--secondary, .auth-page a.action-button { background: rgba(255,255,255,.035) !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,.03) !important; }
/* ---------------- profile (cabinet) ---------------- */
.profile-page__grid-container { max-width: var(--sk-container) !important; gap: 20px !important; grid-template-columns: 380px 1fr !important; }
.profile-page__hero-panel, .profile-page__details-panel { padding: 22px !important; }
.profile-page__hero-panel > div:first-child > div:first-child { border-radius: 14px !important; border-color: rgba(255,255,255,.05) !important; }
.profile-page__details-panel .profile-page__detail-row {
min-height: 46px !important; padding: 0 6px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.045) !important;
border-radius: 0 !important; background: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.profile-page__detail-label { color: #8a8a92 !important; gap: 10px !important; }
.profile-page__detail-label svg { color: var(--sk-brand) !important; width: 15px !important; height: 15px !important; }
.profile-page__detail-label p { font-size: 13.5px !important; font-weight: 400 !important; color: #8a8a92 !important; }
.profile-page__detail-value > span { font-size: 13.5px !important; font-weight: 600 !important; color: #fff !important; }
.profile-page__copy { color: #77777e !important; }
.profile-page .action-button { min-height: 48px !important; height: 48px; border-radius: 10px !important; font-size: 13px !important; }
.profile-page__actions { gap: 10px !important; }
.profile-page__actions .action-button { flex: 1 1 180px; justify-content: center !important; }
.profile-page__action--signout:hover { background: rgba(240,130,143,.12) !important; color: var(--sk-red) !important; border-color: rgba(240,130,143,.25) !important; }
/* ---------------- admin ---------------- */
.admin-page__workspace-panel { padding: 26px !important; }
.admin-page__tabs { gap: 6px !important; border-bottom: 1px solid var(--sk-line) !important; padding-bottom: 14px !important; margin-bottom: 18px !important; flex-wrap: wrap; }
.admin-page__tab {
height: 40px; padding: 0 16px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important;
color: #cfcfd4 !important; background: transparent !important; border: 1px solid transparent !important; transition: background .2s, color .2s;
}
.admin-page__tab::after, .admin-page__tab::before { display: none !important; }
.admin-page__tab:hover { background: rgba(255,255,255,.025) !important; }
.admin-page__tab--active { background: rgba(255,255,255,.04) !important; border-color: rgba(164,163,253,.2) !important; color: #fff !important; }
.admin-page__search-shell { background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.04) !important; border-radius: 9px !important; box-shadow: none !important; }
.admin-page__search-input { background: none !important; border: 0 !important; }
.admin-page__search-icon { color: var(--sk-brand) !important; }
.admin-page__status-note { color: var(--sk-text-3) !important; font-size: 12.5px !important; }
.admin-page__table { border: 0 !important; background: none !important; border-radius: 0 !important; }
.admin-page__row { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.035) !important; background: none !important; border-radius: 0 !important; transition: background .15s; }
.admin-page__body .admin-page__row:hover { background: rgba(255,255,255,.025) !important; }
.admin-page__body .admin-page__row:last-child { border-bottom: 0 !important; }
.admin-page__row--head { border-bottom: 1px solid rgba(255,255,255,.05) !important; background: none !important; }
.admin-page__row--head .admin-page__cell { font-size: 11.5px !important; color: var(--sk-text-2) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
.admin-page__cell { font-size: 13px !important; font-weight: 500 !important; }
.admin-page__cell--muted { color: var(--sk-text-2) !important; }
.admin-page__cell--mono { font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; font-size: 12px !important; }
.admin-page__login { font-weight: 600 !important; font-size: 13.5px !important; }
.admin-page__pill { height: 22px; display: inline-flex !important; align-items: center; padding: 0 8px !important; border-radius: 6px !important; font-size: 11.5px !important; font-weight: 600 !important; background: rgba(255,255,255,.06) !important; color: #ccc !important; border: 0 !important; text-transform: none !important; box-shadow: none !important; }
.admin-page__pill--success, .admin-page__pill--neutral { background: rgba(120,220,140,.12) !important; color: var(--sk-green) !important; }
.admin-page__pill--role, .admin-page__pill--owner { background: rgba(164,163,253,.16) !important; color: #c3c2ff !important; }
.admin-page__pill--danger { background: rgba(240,130,143,.14) !important; color: var(--sk-red) !important; }
.admin-page__row-action { height: 34px !important; min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 8px !important; }
.admin-page__row-action--danger, .admin-page__icon-action--danger { background: rgba(240,130,143,.12) !important; color: var(--sk-red) !important; border-color: transparent !important; }
.admin-page__row-action--danger:hover { background: rgba(240,130,143,.2) !important; }
.admin-page__icon-action { border-radius: 8px !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.03) !important; }
.admin-page__empty-state { color: var(--sk-text-3) !important; }
.admin-page__back-button { height: 45px; padding: 0 22px !important; }
.admin-page__field label, .admin-page__field > span, .profile-page__field label, .support-workspace__field-label { font-size: 12px !important; color: var(--sk-text-2) !important; font-weight: 400 !important; }
.admin-page__field-hint { color: var(--sk-text-3) !important; font-size: 12px !important; }
.admin-page__toggle { border-radius: 9px !important; background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.04) !important; }
/* ---------------- modals ---------------- */
.app-modal-portal { background: rgba(0,0,0,.6) !important; backdrop-filter: blur(6px) !important; }
.app-modal-portal__surface, .admin-page__modal, .profile-page__modal {
background: #121217 !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 20px !important;
box-shadow: 0 40px 90px rgba(0,0,0,.6) !important; backdrop-filter: none !important;
}
.admin-page__modal-title, .profile-page__modal-title { font-size: 16.5px !important; font-weight: 600 !important; }
.admin-page__modal-subtitle, .profile-page__modal-subtitle { color: var(--sk-text-2) !important; font-size: 13px !important; }
.admin-page__modal-close, .profile-page__modal-close { border-radius: 9px !important; background: rgba(255,255,255,.035) !important; border: 0 !important; color: #999 !important; }
.admin-page__modal-actions .action-button, .profile-page__modal-actions .action-button { min-height: 46px !important; }
/* notices */
.app-notice { background: rgba(28,28,34,.96) !important; border: 1px solid rgba(255,255,255,.07) !important; border-left: 3px solid var(--sk-brand) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0,0,0,.45) !important; backdrop-filter: none !important; }
.app-notice__title { font-size: 13.5px !important; font-weight: 600 !important; }
.app-notice__message { font-size: 12.5px !important; color: var(--sk-text-2) !important; }
/* ---------------- footer ---------------- */
.app-shell > footer { margin-top: 120px; padding: 46px 24px !important; background: #111114 !important; border-top: 1px solid rgba(255,255,255,.03) !important; }
.app-shell > footer p { font-size: 13px !important; color: #8f8f96 !important; }
.rrmodded-shimmer { background-image: linear-gradient(90deg, #a4a3fd, #e2e1ff, #a4a3fd) !important; }
.circle-loader__ring { border-color: rgba(164,163,253,.18) !important; border-top-color: var(--sk-brand) !important; }
/* page enter */
.app-shell__route { animation: skPageIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes skPageIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
.app-header__inner { min-height: 64px !important; }
.app-shell__main { padding-top: 64px; }
.hero-section__title { font-size: 40px !important; }
.app-shell .hero-section__title-accent { font-size: 50px !important; }
.hero-section__actions { flex-wrap: wrap; }
.hero-section__actions .action-button, .hero-section__actions .hero-account-button { width: 100%; }
.profile-page__grid-container { grid-template-columns: 1fr !important; }
.route-page h1, .video-review-section__title, .route-title { font-size: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
.hero-section__title-line, .hero-section__title-accent, .hero-section__description-line, .hero-section__actions, .app-shell__route { animation: none !important; }
}
/* ---------------- fixes after first visual pass ---------------- */
.app-shell *, .app-modal-portal * { font-feature-settings: normal !important; font-variant-alternates: normal !important; }
.app-header { left: 0 !important; right: 0 !important; padding: 0 !important; width: 100% !important; }
.app-header__sticky, .app-header__shell { padding: 0 !important; margin: 0 !important; }
.app-shell .hero-section .hero-section__content {
flex: 1 1 100% !important; width: 100% !important; max-width: var(--sk-container) !important;
margin: 0 auto !important; text-align: left !important; align-items: flex-start !important; display: block !important;
}
.app-shell .hero-section .hero-section__title { text-align: left !important; margin-left: 0 !important; }
.app-shell .hero-section .hero-section__description { margin-left: 0 !important; margin-right: auto !important; }
/* script accent must beat the global font rule (which has very high specificity) */
.app-shell .hero-section__title-accent.hero-section__title-accent.hero-section__title-accent.hero-section__title-accent.hero-section__title-accent.hero-section__title-accent {
font-family: "Pinyon Script", cursive !important; letter-spacing: 0 !important;
}
.app-shell .admin-page__tabs { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; max-width: none !important; align-items: center !important; justify-content: flex-start !important; }
.app-shell .admin-page__tab { width: auto !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; }
/* header: last action (Sign In / Profile) is the brand button, nav text size as in AKR */
.app-shell .app-header__actions .action-button, .app-shell .app-header__actions .app-header__profile {
background: linear-gradient(180deg, #b4b3ff, #9796f6) !important; border: 0 !important; color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(150,148,250,.22) !important; font-size: 12.5px !important;
}
.app-shell .app-header__nav-link, .app-shell .app-header__nav-link span { font-size: 12.5px !important; letter-spacing: 0 !important; }
/* ================= fixes: modals, notices, profile rows ================= */
/* modal: the portal surface is only a wrapper — the real window is the inner .…__modal */
.app-modal-portal .app-modal-portal__surface {
background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important;
padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important;
}
.app-modal-portal .admin-page__modal, .app-modal-portal .profile-page__modal {
background: #121217 !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 20px !important;
box-shadow: 0 40px 90px rgba(0,0,0,.6) !important; padding: 22px !important; margin: 0 auto !important;
}
.admin-page__modal-head, .profile-page__modal-head { padding-right: 44px !important; }
.admin-page__modal-close, .profile-page__modal-close {
width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; padding: 0 !important;
top: 0 !important; right: 0 !important; color: #b5b5bd !important; background: rgba(255,255,255,.05) !important; border-radius: 9px !important;
}
.admin-page__modal-close svg, .profile-page__modal-close svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; opacity: 1 !important; display: block !important; }
.admin-page__modal-close:hover, .profile-page__modal-close:hover { color: #fff !important; background: rgba(240,130,143,.16) !important; }
.admin-page__datetime { background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.04) !important; border-radius: 9px !important; color: #fff !important; min-height: 46px; color-scheme: dark; }
.admin-page__modal-actions { gap: 10px !important; }
/* notices: no pop-up cards — one line of text at the bottom (red, green for success) */
.app-notice-center {
position: fixed !important; left: 0 !important; right: 0 !important; bottom: 26px !important; top: auto !important; width: auto !important; max-width: none !important;
display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; padding: 0 16px !important;
pointer-events: none !important; z-index: 100000 !important; transform: none !important;
}
.app-notice-center .app-notice {
background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 0 !important;
padding: 0 !important; margin: 0 !important; width: auto !important; max-width: 90vw !important; min-width: 0 !important; text-align: center !important;
display: block !important; color: #ff6b7a !important; text-shadow: 0 1px 10px #000, 0 0 2px #000; animation: skNotice .25s ease both;
}
.app-notice-center .app-notice:not(:last-child) { display: none !important; }
.app-notice-center .app-notice::before, .app-notice-center .app-notice::after { display: none !important; }
.app-notice-center .app-notice__title, .app-notice-center .app-notice__message {
display: inline !important; margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important; color: inherit !important;
}
.app-notice-center .app-notice__title { font-weight: 600 !important; }
.app-notice-center .app-notice__title::after { content: " — "; font-weight: 400; }
.app-notice-center .app-notice__title:only-child::after, .app-notice-center .app-notice__message:empty { content: ""; display: none !important; }
.app-notice-center .app-notice--success { color: #9be3a8 !important; }
@keyframes skNotice { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* profile rows: value on the right in one line, small copy button, dash for empty values */
.profile-page__details-panel .profile-page__detail-row { gap: 16px !important; flex-wrap: nowrap !important; }
.profile-page__details-panel .profile-page__detail-label { flex: 0 0 auto !important; }
.profile-page__details-panel .profile-page__detail-value {
flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important;
}
.profile-page__details-panel .profile-page__detail-value > span {
flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; display: inline-block !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; height: auto !important; text-align: right !important;
}
.profile-page__details-panel .profile-page__detail-value > span:empty::before { content: "—"; color: #55555b; font-weight: 400; }
.profile-page__details-panel .profile-page__copy {
order: 2; flex: 0 0 28px !important; width: 28px !important; height: 28px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
display: grid !important; place-items: center !important; border-radius: 7px !important; background: rgba(255,255,255,.04) !important; border: 0 !important;
}
.profile-page__details-panel .profile-page__copy:hover { color: #fff !important; background: rgba(164,163,253,.18) !important; }
.profile-page__details-panel .profile-page__copy svg { width: 13px !important; height: 13px !important; }
.profile-page .action-button span { font-size: 13px !important; white-space: nowrap !important; }
.profile-page .action-button svg { width: 15px !important; height: 15px !important; }
/* ================= admin extension: Logs + Upload tabs ================= */
.sk-ext-panel { display: none; }
.admin-page__workspace-panel.sk-ext-active > :not(.admin-page__tabs):not(.sk-ext-panel) { display: none !important; }
.admin-page__workspace-panel.sk-ext-active > .sk-ext-panel { display: block; animation: skPageIn .4s cubic-bezier(.2,.8,.2,1) both; }
.admin-page__workspace-panel.sk-ext-active .admin-page__tab--active:not(.sk-ext-tab) { background: transparent !important; border-color: transparent !important; color: #cfcfd4 !important; }
.sk-console { background: #07070a; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; }
.sk-console__top { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02); }
.sk-console__top b { font-size: 12.5px; font-weight: 600; color: #bbb; }
.sk-dots { display: flex; gap: 6px; margin-right: 8px; }
.sk-dots i { width: 10px; height: 10px; border-radius: 50%; background: #f0828f; }
.sk-dots i:nth-child(2) { background: #f0c27a; } .sk-dots i:nth-child(3) { background: #9be3a8; }
.sk-live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9be3a8; }
.sk-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9be3a8; box-shadow: 0 0 8px #9be3a8; animation: skBlink 1.4s infinite; }
.sk-live--off { color: #888; } .sk-live--off::before { background: #666; box-shadow: none; animation: none; }
@keyframes skBlink { 50% { opacity: .3; } }
.app-shell .sk-console__body, .app-shell .sk-console__body *, .app-shell .sk-console__bottom, .app-shell .sk-console__bottom * {
font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; letter-spacing: 0 !important;
}
.sk-console__body { height: 520px; overflow-y: auto; padding: 12px 0; font-size: 12.5px; line-height: 1.55; background: #07070a; }
.sk-console__body::-webkit-scrollbar { width: 8px; } .sk-console__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
.sk-ln { padding: 3px 18px; display: flex; gap: 10px; white-space: nowrap; }
.sk-ln:hover { background: rgba(255,255,255,.035); }
.sk-t { color: #55555c; flex: none; }
.sk-lv { flex: none; width: 56px; font-weight: 700; color: #7fb3ff; }
.sk-lv--admin { color: #c3c2ff; } .sk-lv--warn { color: #f0c27a; } .sk-lv--error { color: #f0828f; }
.sk-who { color: #e8e8ec; flex: none; } .sk-ip { color: #6a6a72; flex: none; } .sk-act { color: #a4a3fd; flex: none; }
.sk-msg { color: #b9b9c0; overflow: hidden; text-overflow: ellipsis; }
.sk-ln--ok .sk-msg { color: #9be3a8; } .sk-ln--err .sk-msg { color: #ff6b7a; }
.sk-empty { padding: 40px 0; text-align: center; color: #6d6d74; }
.sk-empty--err { color: #ff6b7a; }
.sk-console__bottom { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.05); font-size: 12.5px; color: #666; }
.sk-console__bottom input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #ddd; font-size: 12.5px; }
.sk-console__bottom select { background: #111116; color: #bbb; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; height: 30px; padding: 0 6px; font-size: 12px; }
.sk-hint { margin: 12px 2px 0; font-size: 12.5px; color: #6d6d74; line-height: 1.5; }
.sk-hint code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; color: #c9c8ff; font-size: 12px; }
.sk-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.04); background: rgba(255,255,255,.045); color: #e6e6ea; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .2s, filter .2s; white-space: nowrap; }
.sk-btn:hover { background: rgba(255,255,255,.08); }
.sk-btn:disabled { opacity: .5; cursor: default; }
.sk-btn--danger { background: rgba(240,130,143,.12); color: #f0828f; border-color: transparent; }
.sk-btn--danger:hover { background: rgba(240,130,143,.2); }
.sk-btn--brand { background: linear-gradient(180deg, #b4b3ff, #9796f6); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(150,148,250,.22); }
.sk-btn--brand:hover { background: linear-gradient(180deg, #b4b3ff, #9796f6); filter: brightness(1.07); }
.sk-upload__form { display: grid; grid-template-columns: 200px 200px 1fr; gap: 14px; }
.sk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-field > span:first-child { font-size: 12px; color: #a9a9b0; }
.sk-field input:not([type=file]), .sk-field select, .sk-file {
height: 48px; border-radius: 9px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.04); color: #fff; padding: 0 16px; font-size: 13.5px; font-weight: 500; outline: none; width: 100%;
}
.sk-field input:focus, .sk-field select:focus { border-color: rgba(164,163,253,.4); }
.sk-field select option { background: #16161b; }
.sk-file { position: relative; display: flex; align-items: center; cursor: pointer; border-style: dashed; overflow: hidden; }
.sk-file:hover { border-color: rgba(164,163,253,.4); }
.sk-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sk-file b { font-weight: 500; color: #cfcfd4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-upload__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sk-upload__actions .sk-btn { height: 46px; padding: 0 22px; font-size: 13px; }
.sk-progress { position: relative; height: 22px; border-radius: 8px; background: rgba(255,255,255,.04); margin-top: 16px; overflow: hidden; }
.sk-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #8f8df5, #c3c2ff); transition: width .2s; }
.sk-progress span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sk-upload__log { height: 220px; margin-top: 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
@media (max-width: 900px) { .sk-upload__form { grid-template-columns: 1fr; } }
/* console font must beat the global font rule */
.app-shell .sk-ln.sk-ln.sk-ln.sk-ln.sk-ln.sk-ln, .app-shell .sk-ln.sk-ln.sk-ln.sk-ln.sk-ln.sk-ln > span, .app-shell .sk-console__bottom.sk-console__bottom.sk-console__bottom.sk-console__bottom.sk-console__bottom.sk-console__bottom * { font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; letter-spacing: 0 !important; }
.sk-upload__actions .sk-btn { flex: 0 0 auto; width: auto !important; }
/* ================= round 3: one font everywhere, nicer windows, statistics ================= */
/* one font and sane weights everywhere (the app uses inline 700/800 weights in places) */
.app-shell [style*="font-weight: 700"], .app-shell [style*="font-weight: 800"], .app-shell [style*="font-weight: 900"],
.app-modal-portal [style*="font-weight: 700"], .app-modal-portal [style*="font-weight: 800"] { font-weight: 600 !important; }
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4, .app-shell h5 { font-weight: 600 !important; letter-spacing: -0.02em !important; }
.app-shell input, .app-shell select, .app-shell textarea, .app-shell button,
.app-modal-portal input, .app-modal-portal select, .app-modal-portal textarea, .app-modal-portal button { font-family: "Geist", "Shark Sans", system-ui, sans-serif !important; }
/* ---------- giveaway cards ---------- */
.admin-page__tab-panel .blur-panel { padding: 22px !important; border-radius: 18px !important; gap: 16px !important; }
.admin-page__tab-panel .blur-panel h4 { font-size: 16.5px !important; }
.admin-page__tab-panel .blur-panel [style*="text-transform: uppercase"] { font-size: 10.5px !important; letter-spacing: .08em !important; font-weight: 600 !important; }
.admin-page__tab-panel .blur-panel > p { font-size: 13px !important; color: #a9a9b0 !important; line-height: 1.45 !important; }
.admin-page__tab-panel .blur-panel > div[style*="border-radius: 10px"] { background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.04); padding: 4px !important; }
.admin-page__tab-panel .blur-panel > div[style*="border-radius: 10px"] > button { font-size: 12.5px !important; font-weight: 500 !important; padding: 9px 8px !important; border-radius: 7px !important; letter-spacing: 0 !important; }
.admin-page__tab-panel .blur-panel label { font-size: 12px !important; color: #a9a9b0 !important; margin-bottom: 8px !important; }
.admin-page__tab-panel .blur-panel .glass-input { min-height: 46px !important; font-size: 13.5px !important; font-weight: 500 !important; background: rgba(255,255,255,.028) !important; padding: 0 14px !important; }
.admin-page__tab-panel .blur-panel .action-button { min-height: 46px !important; }
.admin-page__tab-panel .blur-panel > div[style*="min-height: 2.4rem"] { font-size: 12.5px !important; color: #6d6d74 !important; }
/* selects: same look as inputs, own arrow */
.app-shell select.glass-select, .app-shell select.glass-input, .app-modal-portal select.glass-select, .app-modal-portal select.glass-input, .sk-field select {
appearance: none !important; -webkit-appearance: none !important; padding-right: 38px !important; cursor: pointer;
background-color: rgba(255,255,255,.028) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.app-shell select option, .app-modal-portal select option { background: #16161b; color: #fff; }
/* ---------- admin windows (create key / promo / product / edit user) ---------- */
.app-modal-portal .admin-page__modal { width: min(760px, calc(100vw - 32px)) !important; padding: 26px !important; }
.admin-page__modal-head { padding-bottom: 16px !important; margin-bottom: 18px !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; position: relative; }
.admin-page__modal-title { font-size: 18px !important; font-weight: 600 !important; display: flex; align-items: center; gap: 10px; }
.admin-page__modal-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #c9c8ff, #8f8df5); box-shadow: 0 0 12px rgba(164,163,253,.6); }
.admin-page__form-grid { gap: 14px 14px !important; }
.admin-page__field { gap: 8px !important; }
.admin-page__field > span { font-size: 12px !important; color: #a9a9b0 !important; font-weight: 400 !important; }
.admin-page__modal .glass-input, .admin-page__modal .glass-select { min-height: 48px !important; padding-left: 16px !important; font-weight: 500 !important; }
.admin-page__duration-row { gap: 8px !important; }
.admin-page__preset-button { min-height: 48px !important; padding: 0 18px !important; color: #cfcfd4 !important; }
.admin-page__preset-button:hover { border-color: rgba(164,163,253,.3) !important; color: #fff !important; }
.admin-page__field-hint { margin-top: 2px !important; }
.admin-page__modal-actions { display: flex !important; flex-direction: row !important; gap: 10px !important; margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.05) !important; }
.admin-page__modal-actions .action-button { flex: 1 1 0 !important; min-height: 48px !important; justify-content: center !important; width: auto !important; }
.admin-page__modal-actions .action-button--primary { flex: 1.3 1 0 !important; order: 3; }
.sk-create-dl { order: 2; border-color: rgba(164,163,253,.3) !important; color: #c9c8ff !important; }
.sk-create-dl:hover { background: rgba(164,163,253,.12) !important; }
/* extra fields in "Create key" */
.sk-key-extra { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .7fr 1.1fr; gap: 14px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.07); }
.sk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; height: 48px; border-radius: 9px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.04); }
.sk-seg button { border: 0; border-radius: 6px; background: transparent; color: #a9a9b0; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.sk-seg button:hover { color: #fff; }
.sk-seg button.on { background: linear-gradient(180deg, #b4b3ff, #9796f6); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
/* ---------- activate key window ---------- */
.app-modal-portal .profile-page__modal { width: min(440px, calc(100vw - 32px)) !important; padding: 26px !important; }
.profile-page__modal-head { text-align: center; padding: 6px 40px 0 40px !important; margin-bottom: 18px !important; }
.profile-page__modal-title { font-size: 19px !important; font-weight: 600 !important; }
.profile-page__modal-subtitle { margin-top: 6px !important; line-height: 1.45 !important; }
.profile-page__modal-body > div { gap: 14px !important; }
.profile-page__modal-body > div > div:first-child:not(.profile-page__input-wrapper) { padding: 4px !important; gap: 4px !important; border-radius: 9px !important; background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.04) !important; }
.profile-page__modal-body > div > div:first-child:not(.profile-page__input-wrapper) > button { height: 40px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; border: 0 !important; }
.profile-page__modal .profile-page__input-wrapper { min-height: 54px !important; border-style: dashed !important; border-color: rgba(164,163,253,.25) !important; }
.profile-page__modal .profile-page__input {
background: none !important; border: 0 !important; text-transform: uppercase; letter-spacing: .12em !important; font-size: 14px !important; font-weight: 600 !important;
font-family: "Geist Mono", ui-monospace, Consolas, monospace !important;
}
.profile-page__modal .profile-page__input::placeholder { letter-spacing: .12em; color: #55555b !important; }
.profile-page__modal .profile-page__input-icon { color: #a4a3fd !important; }
.profile-page__modal .action-button--primary { min-height: 50px !important; font-size: 13.5px !important; }
/* ---------- users: IP under the e-mail ---------- */
.sk-ip-line { display: block; margin-top: 3px; font-size: 11px; color: #6d6d74; font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; letter-spacing: 0 !important; }
.admin-page__row--users .admin-page__cell:nth-child(3) { display: block !important; line-height: 1.25; }
/* ---------- loader download locked without Discord ---------- */
.profile-page__action.sk-locked { opacity: .45 !important; cursor: not-allowed !important; }
.sk-lock-hint { margin: -2px 2px 2px; font-size: 12px; color: #ff6b7a; line-height: 1.4; }
.sk-notice { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 100001; text-align: center; padding: 0 16px; font-size: 14px; color: #ff6b7a; text-shadow: 0 1px 10px #000, 0 0 2px #000; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; font-family: "Shark Sans", system-ui, sans-serif; }
.sk-notice.on { opacity: 1; transform: none; }
/* ---------- statistics tab ---------- */
.sk-stats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sk-stats-head h4 { margin: 0; font-size: 18px; }
.sk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.sk-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-stat, .sk-stat-group { border-radius: 16px; padding: 20px 22px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)); border: 1px solid rgba(255,255,255,.045); }
.sk-stat span { display: block; font-size: 12px; color: #a9a9b0; }
.sk-stat b { display: block; margin-top: 8px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.sk-stat small { display: block; margin-top: 4px; font-size: 12.5px; color: #6d6d74; }
.sk-stat--brand { border-color: rgba(164,163,253,.28); background: linear-gradient(180deg, rgba(164,163,253,.1), rgba(255,255,255,.018)); }
.sk-stat--brand b { color: #c9c8ff; }
.sk-stat--green b { color: #9be3a8; }
.sk-stat-group h5 { margin: 0 0 8px; font-size: 14.5px; }
.sk-stat-row { display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; align-items: center; height: 40px; border-top: 1px solid rgba(255,255,255,.045); font-size: 13px; }
.sk-stat-row span { color: #a9a9b0; }
.sk-stat-row b { font-weight: 600; }
.sk-stat-row i { font-style: normal; text-align: right; color: #c9c8ff; font-weight: 500; }
@media (max-width: 900px) { .sk-stats, .sk-stats--2, .sk-key-extra { grid-template-columns: 1fr; } .admin-page__modal-actions { flex-direction: column !important; } }
.sk-stats-head .sk-btn, .sk-console__bottom .sk-btn { flex: 0 0 auto !important; width: auto !important; }
/* ================= round 4: brand gradient on every panel, checkout, inline key activation ================= */
/* the "Keys created for" card look - soft brand gradient + brand border - on all panels and windows */
.blur-panel, .auth-page__panel, .contacts-page__card, .support-workspace__panel, .support-workspace__sidebar,
.sk-stat, .sk-stat-group, .sk-activate,
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] {
background: linear-gradient(180deg, rgba(164,163,253,.10), rgba(255,255,255,.018) 62%) !important;
border: 1px solid rgba(164,163,253,.20) !important;
}
.admin-page__workspace-panel { background: linear-gradient(180deg, rgba(164,163,253,.07), rgba(255,255,255,.016) 38%) !important; }
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] div[style*="rgba(255, 255, 255, 0.02)"] { background: rgba(255,255,255,.025) !important; border-color: rgba(255,255,255,.05) !important; }
.app-modal-portal .admin-page__modal, .app-modal-portal .profile-page__modal {
background: linear-gradient(180deg, rgba(164,163,253,.12), rgba(164,163,253,0) 58%), #121217 !important;
border: 1px solid rgba(164,163,253,.24) !important;
}
.sk-stat--brand { background: linear-gradient(180deg, rgba(164,163,253,.18), rgba(255,255,255,.02) 70%) !important; border-color: rgba(164,163,253,.38) !important; }
.sk-console, .sk-upload__log { border-color: rgba(164,163,253,.18) !important; }
.products-page__card:hover, .blur-panel.products-page__card:hover { border-color: rgba(164,163,253,.45) !important; }
/* ---------- checkout ---------- */
.checkout-page > div { max-width: 480px !important; }
.checkout-page .page-reveal > button {
height: 38px; padding: 0 14px !important; border-radius: 9px !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.04) !important;
color: #cfcfd4 !important; font-size: 12.5px !important; margin-bottom: 16px !important; transition: background .2s, color .2s;
}
.checkout-page .page-reveal > button:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.checkout-page .page-reveal > button span { font-size: 12.5px !important; }
.checkout-page .blur-panel { padding: 22px !important; border-radius: 20px !important; }
.checkout-page .site-config-logo-frame { flex: none; margin: 0 !important; background: rgba(164,163,253,.12) !important; border: 1px solid rgba(164,163,253,.25) !important; }
.app-shell .checkout-page h1 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; margin: 0 !important; line-height: 1.2 !important; }
.pay-method {
position: relative; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; text-align: left !important;
width: 100% !important; min-height: 68px !important; padding: 12px 44px 12px 14px !important; border-radius: 12px !important; cursor: pointer;
background: rgba(255,255,255,.028) !important; border: 1px solid rgba(255,255,255,.05) !important; box-shadow: none !important;
transition: border-color .2s, background .2s, transform .2s !important;
}
.pay-method::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid #6d6d74; border-top: 2px solid #6d6d74; transform: rotate(45deg); transition: border-color .2s, right .2s; }
.pay-method:hover { border-color: rgba(164,163,253,.45) !important; background: rgba(164,163,253,.07) !important; transform: translateY(-1px); }
.pay-method:hover::after { border-color: #c9c8ff; right: 15px; }
.pay-method__icon { flex: none; width: 42px !important; height: 42px !important; border-radius: 11px !important; display: grid !important; place-items: center !important; background: rgba(164,163,253,.12) !important; border: 1px solid rgba(164,163,253,.22) !important; color: #c9c8ff !important; }
.pay-method__icon svg { width: 18px !important; height: 18px !important; }
.pay-method__text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; min-width: 0; text-align: left !important; }
.pay-method__name { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; }
.pay-method__note { font-size: 12.5px !important; color: #8a8a92 !important; font-weight: 400 !important; }
.pay-field { min-height: 48px !important; }
/* ---------- profile: inline key activation ---------- */
.sk-activate { margin-top: 12px; padding: 20px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.sk-activate__title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #fff; }
.sk-activate__title svg { color: #a4a3fd; }
.app-shell .sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input {
height: 48px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px dashed rgba(164,163,253,.3); color: #fff; padding: 0 16px; outline: none; width: 100%;
font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; font-size: 13.5px; font-weight: 600; letter-spacing: .08em !important; text-transform: uppercase; transition: border-color .2s, background .2s;
}
.sk-activate__input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6d6d74 !important; }
.sk-activate__input:focus { border-color: rgba(164,163,253,.7) !important; border-style: solid !important; background: rgba(164,163,253,.06) !important; }
.sk-activate__btn {
height: 48px; border: 0; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #fff;
background: linear-gradient(180deg, #b4b3ff, #9796f6); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(150,148,250,.22); transition: filter .2s, transform .2s;
}
.sk-activate__btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sk-activate__btn:disabled { opacity: .6; transform: none; cursor: default; }
.sk-activate__msg { margin: 0; font-size: 12.5px; color: #ff6b7a; line-height: 1.4; }
.sk-activate__msg.ok { color: #9be3a8; }
.checkout-page .page-reveal > button { width: auto !important; display: inline-flex !important; }
.sk-activate__btn span { font-size: 13.5px !important; }
/* ================= round 5: gradient/shadow only where it matters ================= */
/* plain panels again - no brand gradient, no glow */
.admin-page__workspace-panel, .profile-page__hero-panel, .profile-page__details-panel, .auth-page__panel,
.contacts-page__card, .support-workspace__panel, .support-workspace__sidebar,
.admin-page__tab-panel .blur-panel, .sk-stat:not(.sk-stat--brand), .sk-stat-group,
.route-page__stack div[style*="rgba(255, 255, 255, 0.02)"] {
background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important;
border: 1px solid rgba(255,255,255,.05) !important; box-shadow: none !important;
}
.sk-console, .sk-upload__log { border-color: rgba(255,255,255,.06) !important; }
.blur-panel { box-shadow: none !important; }
/* glow only on the main call-to-action buttons */
.app-header__profile, .app-header__actions .action-button, .app-shell .app-header__actions .app-header__profile { box-shadow: none !important; }
.action-button--primary, .sk-btn--brand { box-shadow: none !important; }
.products-page__card .action-button--primary, .sk-activate__btn, .auth-page__submit,
.hero-section__actions .action-button--primary, .admin-page__modal-actions .action-button--primary, .profile-page__modal .action-button--primary {
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(150,148,250,.22) !important;
}
/* ---------- products: no plate behind the logo, smooth pop-out on hover ---------- */
.products-page__card > div:first-child > div:first-child, .products-page__card [class*="logo-frame"], .products-page__card .site-config-logo-frame {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; height: auto !important;
}
.products-page__card {
transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .45s !important; will-change: transform;
}
.products-page__card:hover {
transform: translate(var(--sk-dx, 0px), var(--sk-dy, 0px)) scale(1.06) !important; z-index: 5; position: relative;
border-color: rgba(164,163,253,.5) !important; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(164,163,253,.15) !important;
}
/* ---------- checkout ---------- */
.checkout-page .site-config-logo-frame { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; }
.checkout-page .page-reveal > button { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; width: auto !important; justify-content: flex-start !important; color: #8a8a92 !important; }
.checkout-page .page-reveal > button:hover { background: none !important; color: #fff !important; }
.pay-method__icon { display: none !important; }
.pay-method { min-height: 60px !important; padding-left: 18px !important; }
.pay-method::after { display: none !important; }
/* ---------- profile buttons: smaller type ---------- */
.app-shell .sk-activate__btn span, .app-shell .sk-activate__btn { font-size: 13px !important; line-height: 1 !important; }
.app-shell .sk-activate__btn svg { width: 14px !important; height: 14px !important; }
.app-shell .sk-activate__title { font-size: 13.5px !important; }
.app-shell .profile-page__hero .action-button, .app-shell .profile-page__hero .action-button span { font-size: 13px !important; }
.app-shell .profile-page__hero .action-button svg { width: 15px !important; height: 15px !important; }
/* ================= compact key activation card (never taller than the info panel) ================= */
.app-shell .sk-activate {
display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 8px !important; align-items: center;
margin-top: 12px !important; padding: 14px 16px !important; border-radius: 16px !important;
background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)) !important; border: 1px solid rgba(255,255,255,.05) !important; box-shadow: none !important;
}
.app-shell .sk-activate__title { grid-column: 1 / -1; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #cfcfd4 !important; gap: 8px !important; }
.app-shell .sk-activate__title svg { width: 14px; height: 14px; }
.app-shell .sk-activate .sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input {
grid-column: 1; height: 40px !important; border-radius: 10px !important; padding: 0 12px !important; min-width: 0;
font-family: "Geist", "Shark Sans", system-ui, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: none !important;
}
.app-shell .sk-activate__input::placeholder { font-family: "Geist", "Shark Sans", system-ui, sans-serif !important; font-size: 13px; letter-spacing: 0 !important; }
.app-shell .sk-activate .sk-activate__btn {
grid-column: 2; height: 40px !important; padding: 0 16px !important; border-radius: 10px !important; gap: 7px !important; box-shadow: none !important; text-shadow: none !important;
font-family: "Geist", "Shark Sans", system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
.app-shell .sk-activate .sk-activate__btn:hover { transform: none; }
.app-shell .sk-activate .sk-activate__btn svg { width: 13px !important; height: 13px !important; }
.app-shell .sk-activate__msg { grid-column: 1 / -1; font-size: 12px !important; line-height: 1.3 !important; }
/* ================= round 6 ================= */
/* key activation card: solid input border, button never cut off */
.app-shell .sk-activate { box-sizing: border-box; width: 100%; overflow: hidden; }
.app-shell .sk-activate .sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input.sk-activate__input {
border: 1px solid rgba(255,255,255,.06) !important; background: rgba(255,255,255,.028) !important; width: 100% !important; box-sizing: border-box;
}
.app-shell .sk-activate .sk-activate__input:focus { border-color: rgba(164,163,253,.55) !important; background: rgba(164,163,253,.05) !important; }
.app-shell .sk-activate .sk-activate__btn { white-space: nowrap; }
.sk-hidden { display: none !important; }
/* profile windows (change password etc.): no duplicated header block, normal inputs */
.profile-page__modal-body > div > div:first-child:has(h3) { display: none !important; }
.app-modal-portal .profile-page__modal .profile-page__input-wrapper {
min-height: 48px !important; border: 1px solid rgba(255,255,255,.07) !important; border-style: solid !important; border-radius: 10px !important; background: rgba(255,255,255,.03) !important;
}
.app-modal-portal .profile-page__modal .profile-page__input-wrapper:focus-within { border-color: rgba(164,163,253,.55) !important; background: rgba(164,163,253,.05) !important; }
.app-modal-portal .profile-page__modal .profile-page__input {
font-family: "Geist", "Shark Sans", system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; font-weight: 500 !important;
}
.app-modal-portal .profile-page__modal .profile-page__input::placeholder { letter-spacing: 0 !important; text-transform: none; color: #6d6d74 !important; }
.app-modal-portal .profile-page__modal .profile-page__input-icon { color: #8a8a92 !important; }
.app-modal-portal .profile-page__modal .action-button--primary { min-height: 46px !important; border-radius: 10px !important; font-size: 13.5px !important; }
.app-modal-portal .profile-page__modal .action-button--primary span { font-size: 13.5px !important; font-weight: 600 !important; }
.app-modal-portal .profile-page__modal .action-button--primary svg { width: 15px !important; height: 15px !important; }
.profile-page__modal-subtitle { font-size: 13px !important; color: #8a8a92 !important; }
/* key window keeps the key look */
.profile-page__modal.sk-key-window .profile-page__input { font-family: "Geist Mono", ui-monospace, Consolas, monospace !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
/* products: three in one row */
.products-page .route-page__stack > div[style*="grid-template-columns"] {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1100px !important; width: 100% !important; margin: 0 auto !important; gap: 18px !important;
}
@media (max-width: 1000px) { .products-page .route-page__stack > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; max-width: 420px !important; } }
/* ================= round 7 ================= */
/* key activation card (profile) */
.app-shell .sk-akey { box-sizing: border-box; width: 100%; min-width: 0; margin-top: 12px; padding: 14px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px;
background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.016)); border: 1px solid rgba(255,255,255,.05); }
.app-shell .sk-akey__title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: #cfcfd4; }
.app-shell .sk-akey__title svg { width: 14px; height: 14px; color: #a4a3fd; flex: none; }
.app-shell .sk-akey__row { display: flex; gap: 8px; min-width: 0; }
.app-shell .sk-akey .sk-akey__input.sk-akey__input {
flex: 1 1 auto; min-width: 0; width: auto !important; box-sizing: border-box; height: 40px !important; margin: 0 !important; padding: 0 12px !important;
border: 1px solid rgba(255,255,255,.07) !important; border-radius: 10px !important; outline: none !important; box-shadow: none !important;
background: rgba(255,255,255,.03) !important; color: #fff !important;
font: 500 13px/1 "Geist", "Shark Sans", system-ui, sans-serif !important; letter-spacing: .02em !important; text-transform: none !important;
transition: border-color .2s, background .2s;
}
.app-shell .sk-akey .sk-akey__input::placeholder { color: #6d6d74 !important; letter-spacing: 0 !important; }
.app-shell .sk-akey .sk-akey__input:focus { border-color: rgba(164,163,253,.55) !important; background: rgba(164,163,253,.05) !important; }
.app-shell .sk-akey .sk-akey__btn {
flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 "Geist", "Shark Sans", system-ui, sans-serif; color: #fff;
background: linear-gradient(180deg, #b4b3ff, #9796f6); transition: filter .2s;
}
.app-shell .sk-akey .sk-akey__btn:hover { filter: brightness(1.07); }
.app-shell .sk-akey .sk-akey__btn:disabled { opacity: .6; cursor: default; }
.app-shell .sk-akey .sk-akey__btn svg { width: 13px; height: 13px; }
.app-shell .sk-akey__msg { margin: 0; font-size: 12px; line-height: 1.3; color: #ff6b7a; }
.app-shell .sk-akey__msg.ok { color: #9be3a8; }
/* change password window */
.sk-pw { display: flex; flex-direction: column; gap: 16px; }
.sk-pw__field { display: flex; flex-direction: column; gap: 7px; }
.sk-pw__label { font-size: 12.5px; font-weight: 500; color: #a9a9b0; }
.sk-pw__box { position: relative; display: flex; align-items: center; height: 46px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; }
.sk-pw__box:focus-within { border-color: rgba(164,163,253,.55); background: rgba(164,163,253,.05); }
.sk-pw__box.is-bad { border-color: rgba(255,107,122,.45); }
.sk-pw__box.is-ok { border-color: rgba(155,227,168,.4); }
.sk-pw .sk-pw__input.sk-pw__input { flex: 1; min-width: 0; height: 100%; padding: 0 44px 0 14px !important; margin: 0 !important; border: 0 !important; outline: none !important;
background: none !important; box-shadow: none !important; color: #fff !important;
font: 500 14px/1 "Geist", "Shark Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.sk-pw .sk-pw__input::placeholder { color: #66666d !important; letter-spacing: 0 !important; text-transform: none !important; }
.sk-pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 7px;
display: grid; place-items: center; background: none; color: #707078; cursor: pointer; transition: color .2s, background .2s; }
.sk-pw__eye:hover, .sk-pw__eye.on { color: #d6d5ff; background: rgba(255,255,255,.05); }
.sk-pw__meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 5px; align-items: center; margin-top: 2px; }
.sk-pw__meter i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); transition: background .25s; }
.sk-pw__meter span { min-width: 64px; text-align: right; font-size: 11.5px; color: #8a8a92; }
.sk-pw__meter[data-level="1"] i:nth-child(-n+1) { background: #ff6b7a; }
.sk-pw__meter[data-level="2"] i:nth-child(-n+2) { background: #f5b86b; }
.sk-pw__meter[data-level="3"] i:nth-child(-n+3) { background: #a4a3fd; }
.sk-pw__meter[data-level="4"] i { background: #7fd49a; }
.sk-pw__hint { margin: 0; font-size: 12px; color: #ff6b7a; }
.sk-pw__hint.ok { color: #9be3a8; }
.sk-pw__submit { margin-top: 4px; }
/* products: 3 in a row, narrower screens stack */
.products-page .route-page__stack > div[style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1100px !important; }
@media (max-width: 900px) { .products-page .route-page__stack > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; max-width: 420px !important; } }
/* ================= round 8 ================= */
/* key card: solar.css gives every