/* WSPRO V4.02 - BLAST JOB dashboard: iOS-style 3D cards on top of the arcade theme (arcade.css, the BLASTKAN arcade look from VPS3).
   Colours, fonts, buttons, sidebar and inputs all stay the arcade ones (coin yellow, sky blue, navy ink, Fredoka/Nunito, solid
   block edges). This file adds only what iOS contributes: continuous 22px corners, a lit top edge, a thick extruded bottom edge,
   a long soft shadow, and a 2-degree lean toward the pointer (pages-extra.js). Loaded after arcade.css and dash-extra.css. */

.app .page-intro h2, .app .ov-intro h2 { font-size: clamp(28px, 4vw, 38px); }

/* ---------- 3D cards ---------- */
.app .card, .app .xp-how, .app .ov-goal, .app .st-ref {
  border: 2.5px solid var(--arc-edge); border-radius: 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 6px 0 var(--arc-edge), 0 20px 28px -14px rgba(19, 33, 63, .38);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2, 1.3, .4, 1), box-shadow .35s;
}
:root[data-theme="dark"] .app .card, :root[data-theme="dark"] .app .xp-how, :root[data-theme="dark"] .app .ov-goal, :root[data-theme="dark"] .app .st-ref {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 6px 0 var(--arc-edge), 0 22px 30px -14px rgba(0, 0, 0, .65);
}
.app .card.is-tilt { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 8px 0 var(--arc-edge), 0 28px 36px -14px rgba(19, 33, 63, .42); }
:root[data-theme="dark"] .app .card.is-tilt { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 8px 0 var(--arc-edge), 0 30px 40px -14px rgba(0, 0, 0, .7); }
.app .card-pad { padding: 22px; }
.app .st-ticket { border-radius: 24px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 7px 0 var(--arc-edge), 0 24px 34px -14px rgba(19, 33, 63, .5); }

/* stat tiles on Referral: separate blocks instead of a bordered grid */
.app .ref-stats { background: transparent; border: 0; gap: 14px; border-radius: 0; overflow: visible; }
.app .ref-stats > div { background: var(--surface); border: 2.5px solid var(--arc-edge); border-radius: 18px; padding: 14px 16px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 5px 0 var(--arc-edge); }
:root[data-theme="dark"] .app .ref-stats > div { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 5px 0 var(--arc-edge); }

/* My added pages use the same blocks */
.app .xp-step { border-radius: 20px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), 0 6px 0 var(--arc-edge); }
:root[data-theme="dark"] .app .xp-step { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 6px 0 var(--arc-edge); }
.app .xq-btn, .app .chip-btn { border-radius: 14px; }

/* iOS list feel inside cards: hairline rows */
.app .tbl th { text-transform: none; letter-spacing: 0; }

/* Form rows in a grid keep their own height */
.app .field { align-content: start; }
.app .field > .input, .app .field > .select { align-self: start; }

@media (prefers-reduced-motion: reduce) { .app .card { transition: none; transform: none; } }