/* ============================================================
   ULTRA MAX V2 — SHARED VISUAL SYSTEM
   Applied to hosted Ultra MAX tools/pages. Behaviour is untouched.
   ============================================================ */

:root {
  --um2-bg:#05020f;
  --um2-bg-2:#09051a;
  --um2-panel:rgba(17,11,42,.82);
  --um2-panel-strong:rgba(18,11,45,.94);
  --um2-panel-soft:rgba(31,18,62,.62);
  --um2-line:rgba(170,72,255,.34);
  --um2-line-hot:rgba(207,82,255,.68);
  --um2-violet:#8b36ff;
  --um2-violet-2:#b160ff;
  --um2-pink:#ff2ca8;
  --um2-cyan:#2de1ff;
  --um2-green:#26e6b1;
  --um2-gold:#f7d77a;
  --um2-red:#ff5f82;
  --um2-text:#f7f3ff;
  --um2-muted:#aaa4c4;
  --um2-muted-2:#817a9c;
  --um2-shadow:0 18px 52px rgba(0,0,0,.38);
  --um2-glow:0 0 28px rgba(137,48,255,.12);
  color-scheme:dark;
}

html {
  min-height:100%;
  background:#05020f;
}

body {
  min-height:100vh;
  color:var(--um2-text) !important;
  background:
    radial-gradient(ellipse 76% 28% at 8% 8%,rgba(126,38,255,.27),transparent 72%),
    radial-gradient(ellipse 72% 28% at 95% 17%,rgba(231,42,255,.20),transparent 70%),
    radial-gradient(ellipse 70% 26% at 52% 98%,rgba(48,167,226,.08),transparent 72%),
    linear-gradient(180deg,#080218 0%,#05020f 48%,#05020f 100%) !important;
  background-attachment:fixed !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* subtle star field without replacing page-specific content */
body {
  background-image:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.72) 0 1px,transparent 1.5px),
    radial-gradient(circle at 22% 37%,rgba(190,143,255,.64) 0 1px,transparent 1.5px),
    radial-gradient(circle at 42% 9%,rgba(255,255,255,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 64% 28%,rgba(220,172,255,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.70) 0 1px,transparent 1.5px),
    radial-gradient(circle at 94% 48%,rgba(179,214,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(ellipse 76% 28% at 8% 8%,rgba(126,38,255,.27),transparent 72%),
    radial-gradient(ellipse 72% 28% at 95% 17%,rgba(231,42,255,.20),transparent 70%),
    radial-gradient(ellipse 70% 26% at 52% 98%,rgba(48,167,226,.08),transparent 72%),
    linear-gradient(180deg,#080218 0%,#05020f 48%,#05020f 100%) !important;
  background-size:
    190px 190px,260px 260px,230px 230px,310px 310px,270px 270px,340px 340px,
    auto,auto,auto,auto !important;
}

::selection {
  background:rgba(169,73,255,.46);
  color:#fff;
}

a {
  -webkit-tap-highlight-color:transparent;
}

img {
  max-width:100%;
}

/* ------------------------------------------------------------
   BRAND / HEADERS
   ------------------------------------------------------------ */

.logo,
.top-logo,
.brand-logo,
.nav-logo,
.header-logo {
  color:#fff;
  text-shadow:0 4px 26px rgba(0,0,0,.34);
}

.logo span,
.top-logo span,
.brand-logo span,
.header-logo span {
  background:linear-gradient(112deg,#b697ff 0%,#b948ff 48%,#ff2ca8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

.app-header,
.top-bar,
.header-bar,
.page-header,
.navbar,
.toolbar {
  border-color:rgba(173,77,255,.22) !important;
  background:
    linear-gradient(180deg,rgba(10,6,27,.95),rgba(7,5,21,.88)) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(120%) !important;
}

.eyebrow,
.hero-eyebrow,
.section-label,
.step-label,
.kicker,
.label,
.group-label {
  color:#b987ff !important;
  letter-spacing:.13em;
}

h1,h2,h3,.header-title,.hero-title,.page-title {
  color:#fff;
  text-wrap:balance;
}

/* ------------------------------------------------------------
   GLASS SURFACES
   ------------------------------------------------------------ */

.card,
.panel,
.box,
.step-card,
.basket,
.export-card,
.profile-row,
.nuvio-store-card,
.service-item,
.service-card,
.tool-card,
.settings-card,
.info-card,
.result-card,
.modal-card,
.dialog-card,
.collection-card,
.category,
.mobile-setup-card,
.step1-option-group,
.guided-card,
.guided-page-card,
.s2-preset,
.s2-family-card,
.s2-selection-card,
.s3-preset-card,
.final-summary-card,
.result-section,
.info-box,
.um-card,
.um-mode-card {
  border-color:var(--um2-line) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 32%),
    radial-gradient(circle at 0% 0%,rgba(130,53,255,.11),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(29,191,222,.055),transparent 35%),
    linear-gradient(145deg,var(--um2-panel),rgba(7,7,26,.84)) !important;
  box-shadow:
    var(--um2-shadow),
    var(--um2-glow),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
}

.card,
.panel,
.box,
.step-card,
.basket,
.export-card,
.settings-card,
.info-card,
.result-card,
.modal-card,
.dialog-card {
  border-radius:20px !important;
}

.profile-row,
.nuvio-store-card,
.service-item,
.tool-card {
  border-radius:15px !important;
}

.card:hover,
.step-card:hover,
.tool-card:hover,
.nuvio-store-card.is-actionable:hover {
  border-color:rgba(195,93,255,.49) !important;
}

/* ------------------------------------------------------------
   ROWS / LIST ITEMS
   ------------------------------------------------------------ */

.row,
.list-row,
.setting-row,
.link-row,
.action-row,
.service-item,
.profile-row {
  border-bottom-color:rgba(255,255,255,.055) !important;
}

.row-icon,
.icon-box,
.tool-icon,
.setting-icon,
.service-icon {
  border:1px solid rgba(174,82,255,.24);
  background:
    linear-gradient(145deg,rgba(126,42,255,.26),rgba(81,25,170,.17)) !important;
  color:#c786ff !important;
  box-shadow:
    0 8px 22px rgba(87,31,190,.18),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.row-title,
.setting-title,
.profile-name,
.service-name,
.card-title {
  color:#fff !important;
}

.row-sub,
.subtitle,
.sub,
.setting-sub,
.service-desc,
.muted,
.card-subtitle,
.card-desc {
  color:var(--um2-muted) !important;
}

/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.search-box,
.token-input {
  color:#f9f5ff !important;
  border:1px solid rgba(164,104,242,.31) !important;
  border-radius:12px !important;
  background:
    linear-gradient(180deg,rgba(6,7,23,.88),rgba(13,9,33,.80)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.032),
    0 8px 20px rgba(0,0,0,.10);
  outline:none;
}

input::placeholder,
textarea::placeholder {
  color:#77708f !important;
}

input:focus,
select:focus,
textarea:focus,
.search-box:focus,
.token-input:focus {
  border-color:rgba(202,106,255,.72) !important;
  box-shadow:
    0 0 0 3px rgba(148,64,255,.11),
    0 0 22px rgba(153,49,255,.08) !important;
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

button,
.btn,
.button,
.action-btn,
.add-btn,
.export-btn,
.back-button,
a.btn,
a.button {
  border-radius:12px !important;
  font-family:inherit;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    opacity .15s ease;
}

.btn-primary,
button.primary,
.button.primary,
.primary-btn,
.add-btn,
.playplus-cta,
.generate-btn,
#genBtn {
  color:#fff !important;
  border:1px solid rgba(225,135,255,.46) !important;
  background:
    linear-gradient(112deg,#6f54f2 0%,#a43eed 48%,#f52f9c 100%) !important;
  box-shadow:
    0 11px 30px rgba(104,48,216,.29),
    0 0 24px rgba(237,50,187,.09),
    inset 0 1px 0 rgba(255,255,255,.19) !important;
}

.btn-secondary,
button.secondary,
.button.secondary,
.secondary-btn,
.back-button {
  color:#ddd7f5 !important;
  border:1px solid rgba(165,105,243,.28) !important;
  background:rgba(15,11,37,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.btn-danger,
button.danger,
.danger-btn {
  color:#ff819a !important;
  border:1px solid rgba(255,82,118,.34) !important;
  background:rgba(86,16,41,.27) !important;
}

button:disabled,
.btn:disabled,
.button:disabled {
  opacity:.45 !important;
}

@media (hover:hover) {
  button:not(:disabled):hover,
  .btn:hover,
  .button:hover,
  a.btn:hover,
  a.button:hover {
    transform:translateY(-1px);
  }
}

/* ------------------------------------------------------------
   CHIPS / TABS / SELECTED STATES
   ------------------------------------------------------------ */

.pill,
.chip,
.badge,
.tag,
.tab,
.type-btn,
.source-btn {
  border-color:rgba(161,100,239,.24) !important;
  background:rgba(13,10,34,.72) !important;
}

.pill.selected,
.pill.active,
.chip.active,
.tab.active,
.type-btn.active,
.source-btn.active,
.profile-row.selected {
  color:#fff !important;
  border-color:rgba(211,121,255,.65) !important;
  background:
    linear-gradient(118deg,rgba(104,78,232,.94),rgba(170,59,222,.92),rgba(223,62,158,.83)) !important;
  box-shadow:
    0 7px 20px rgba(114,51,207,.21),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

/* ------------------------------------------------------------
   MODALS
   ------------------------------------------------------------ */

.modal,
.overlay,
.dialog,
.sheet,
.drawer {
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.modal-backdrop,
.overlay-backdrop {
  background:rgba(3,2,10,.74) !important;
}

/* ------------------------------------------------------------
   STATUS COLOURS
   ------------------------------------------------------------ */

.success,
.ok,
.status-up,
.connected,
.text-success {
  color:var(--um2-green) !important;
}

.error,
.err,
.status-down,
.text-danger {
  color:var(--um2-red) !important;
}

.warning,
.warn {
  color:var(--um2-gold) !important;
}

/* ------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------ */

/* Browser pages may keep a subtle themed scrollbar. Native app views
   keep scrolling but hide the scrollbar completely. */
* {
  scrollbar-width:thin;
  scrollbar-color:rgba(162,78,255,.52) rgba(8,6,22,.45);
}

::-webkit-scrollbar {
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track {
  background:rgba(8,6,22,.45);
}

::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:linear-gradient(#7d3cff,#d33cff);
}

html.native-app,
html.native-app *,
html.um-app-mode,
html.um-app-mode * {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

html.native-app::-webkit-scrollbar,
html.native-app *::-webkit-scrollbar,
html.um-app-mode::-webkit-scrollbar,
html.um-app-mode *::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}

/* ------------------------------------------------------------
   NATIVE PHONE CONSISTENCY
   ------------------------------------------------------------ */

@media (max-width:820px) {
  html.native-app body {
    padding-bottom:calc(104px + env(safe-area-inset-bottom));
  }

  html.native-app .wrap,
  html.native-app .page,
  html.native-app .main,
  html.native-app main {
    width:100%;
    max-width:620px;
  }

  html.native-app .app-header,
  html.native-app .top-bar {
    min-height:calc(62px + env(safe-area-inset-top));
    padding-top:calc(8px + env(safe-area-inset-top));
  }

  html.native-app .card,
  html.native-app .panel,
  html.native-app .step-card,
  html.native-app .basket,
  html.native-app .export-card {
    border-radius:18px !important;
  }
}

@media (max-width:420px) {
  .card,
  .panel,
  .box,
  .step-card,
  .basket,
  .export-card {
    border-radius:17px !important;
  }

  button,
  .btn,
  .button {
    min-height:42px;
  }
}

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