@charset "UTF-8";
/* ==========================================================
   Dark theme (#222222) - tattoo stencil aesthetic
   Pages use .bg-white on cards/navs; we override it here so
   the whole app goes dark without touching every template.
   ========================================================== */

:root, [data-bs-theme="dark"] {
    /* Palette drawn from the logo: warm orange -> magenta/pink -> deep purple */
    --accent-orange: #f7a744;
    --accent-pink: #ef2d84;
    --accent-purple: #7b2ff7;
    --grad: linear-gradient(135deg, #f7a744 0%, #ef2d84 55%, #7b2ff7 100%);
    --grad-h: linear-gradient(90deg, #f7a744 0%, #ef2d84 55%, #7b2ff7 100%);
    --brand-red: #ef2d84;          /* kept name for compatibility; now the pink accent */
    --brand-red-hover: #d81b74;
    --bg-main: #222222;
    --bg-card: #2b2b2b;
    --bg-elevated: #333333;
    --line-border: #3d3d3d;
    --ink: #e8e5e0;
    --text-muted-c: #a09a92;
    --line-grey: #8a8378;
}

body {
    background: var(--bg-main);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .sidebar-brand, .navbar-brand {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
}

.sidebar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

a { color: #f26daa; }
a:hover { color: #f78fbe; }

.text-muted { color: var(--text-muted-c) !important; }

/* ---------- Dark override of .bg-white used across all pages ---------- */
.bg-white { background-color: var(--bg-card) !important; }
.border-bottom, .border-end, .border-top, .border { border-color: var(--line-border) !important; }

/* ---------- Buttons ---------- */
.btn-brand {
    background: var(--grad);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--grad);
    filter: brightness(1.12);
    color: #fff;
}
/* .btn-outline-dark is invisible on a dark background - restyle it as light outline */
.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: #5a5a5a;
    --bs-btn-hover-bg: var(--bg-elevated);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #777;
    --bs-btn-active-bg: var(--bg-elevated);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #777;
}

/* ---------- Full-width sidebar app shell ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
    width: 250px;
    min-width: 250px;
    min-height: 100vh;
    background-color: var(--bg-card) !important;
}
.main-content { min-height: 100vh; background: var(--bg-main); }

.nav-pills .nav-link {
    color: var(--ink);
    border-radius: 4px;
    font-size: 0.92rem;
}
.nav-pills .nav-link.active {
    background: var(--grad);
    color: #fff;
}
.nav-pills .nav-link:hover:not(.active) { background: var(--bg-elevated); }

.offcanvas { background-color: var(--bg-card); }

/* ---------- Cards ---------- */
.card-brand {
    border: 1px solid var(--line-border);
    border-top: 3px solid transparent;
    border-image: var(--grad-h) 1;
    border-left: 1px solid var(--line-border);
    border-right: 1px solid var(--line-border);
    border-bottom: 1px solid var(--line-border);
    background-color: var(--bg-card);
}
.price-tag {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: var(--bg-card); --bs-table-color: var(--ink); }
.table-light {
    --bs-table-bg: var(--bg-elevated);
    --bs-table-color: var(--ink);
    border-color: var(--line-border);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--bg-elevated);
    border-color: var(--line-border);
    color: var(--ink);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-elevated);
    color: var(--ink);
    border-color: var(--accent-pink);
    box-shadow: 0 0 0 0.2rem rgba(239, 45, 132, 0.25);
}
.form-control::placeholder { color: #777; }
fieldset.border { border-color: var(--line-border) !important; }

/* ---------- Auth pages ---------- */
.auth-card {
    max-width: 420px;
    margin: 4rem auto;
}
.divider {
    text-align: center;
    color: var(--line-grey);
    font-size: 0.75rem;
    margin: 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Hero (index.php) ---------- */
.hero {
    background: linear-gradient(180deg, #2b2b2b 0%, var(--bg-main) 100%);
    border-bottom: 1px dashed var(--line-border);
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.hero-sample-img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--line-border);
    background: #fff;
}
.stencil-line-divider {
    border: none;
    border-top: 2px dashed var(--brand-red);
    opacity: 1;
}

/* ---------- Before/After comparison slider (homepage hero) ---------- */
.ba-compare {
    position: relative;
    overflow: hidden;
    user-select: none;
    touch-action: none; /* we handle horizontal dragging ourselves on touch */
    cursor: ew-resize;
    background: #fff;
    border: 1px solid var(--line-border);
}
.ba-compare img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.ba-compare .ba-after {
    position: absolute;
    top: 0;
    left: 0;
    /* right half revealed by default; JS updates this clip-path while dragging */
    clip-path: inset(0 0 0 50%);
}
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: var(--grad);
    pointer-events: none;
}
.ba-handle-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.ba-label {
    position: absolute;
    top: 10px;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(34, 34, 34, 0.75);
    color: #fff;
    pointer-events: none;
}
.ba-label-before { left: 10px; }
.ba-label-after { right: 10px; }

/* ---------- History / generation cards ---------- */
.result-thumb, .generation-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--line-border);
    border-radius: 4px;
}
.history-card { cursor: pointer; transition: box-shadow 0.15s; }
.history-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }

/* ---------- Variant strip in the result viewer ---------- */
.variant-item { width: 84px; text-align: center; }
.variant-cap { font-size: 11px; margin-top: 2px; line-height: 1.2; }
.variant-cap.text-muted { color: var(--text-muted-c) !important; }
.variant-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--line-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.variant-thumb:hover { border-color: var(--line-grey); }
.variant-thumb.selected { border-color: var(--brand-red); }
.variant-thumb.original { border-style: dashed; }

/* Generated results are white-background stencils - keep a white matte behind them */
#main-result-img { background: #fff; }

/* ---------- Utility ---------- */
.text-brand { color: #f26daa !important; }
.badge-brand { background: var(--grad); }

@media (max-width: 991.98px) {
    .sidebar { display: none; }
}

/* ---------- App-style mobile UI ---------- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--line-border);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone home-bar clearance */
}
.mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    text-decoration: none;
    color: var(--text-muted-c);
    font-size: 11px;
}
.mobile-bottom-nav a i { font-size: 1.25rem; }
.mobile-bottom-nav a.active { color: var(--brand-red); }

@media (max-width: 991.98px) {
    /* keep content clear of the fixed bottom nav */
    .has-bottom-nav > .container-fluid { padding-bottom: 84px !important; }
    /* larger tap targets, app feel */
    .btn { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}


/* ---------- Compact before/after slider for feature sections ---------- */
.ba-compare-sm {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.ba-compare-sm .ba-handle-knob {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
}
.ba-compare-sm .ba-label {
    font-size: 10px;
    padding: 1px 7px;
}


/* ---------- Credit coin icon ---------- */
.credit-coin {
    height: 1.25em;
    width: 1.25em;
    vertical-align: -0.25em;
}


/* ---------- Upload dropzone (dashboard) ---------- */
.dropzone {
    border: 2px dashed #4a4a4a;
    background: var(--bg-elevated);
    padding: 44px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-muted-c);
}
.dropzone:hover, .dropzone:focus-visible {
    border-color: var(--accent-pink);
    color: var(--ink);
    outline: none;
}
.dropzone.dragover {
    border-color: var(--accent-pink);
    background: rgba(239, 45, 132, 0.08);
}
.dropzone .dz-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.dropzone .dz-sub {
    font-size: 0.85rem;
    color: var(--text-muted-c);
}
.dropzone i { color: var(--text-muted-c); }
#dz-preview-img {
    max-height: 200px;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--line-border);
    background: #fff;
}

/* Model selector row */
.model-select {
    /* A <select> sizes itself to its LONGEST option, which in Thai is wider than a
       phone screen. min-width:0 + max-width:100% lets it shrink and ellipsise. */
    width: auto;
    min-width: 0;
    max-width: 100%;
    border-radius: 8px;
}
@media (min-width: 576px) {
    .model-select { min-width: 220px; }
}
@media (max-width: 575.98px) {
    .model-select { width: 100%; }
}
.model-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.9rem;
}


/* ---------- Admin sidebar section headings ---------- */
.nav-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted-c);
    padding: 14px 12px 4px;
    font-weight: 600;
}


/* ---------- Cover banner (top of homepage) ----------
   The image keeps its natural 2.09:1 ratio so the front table edge lands at the
   same relative height on every screen. Below it, three blur layers of
   increasing strength are each masked with their own gradient, so the photo
   softens progressively (no visible cut line) before dissolving into the
   page background, and the hero sits on top of that soft area.
   ------------------------------------------------------------------------ */
.cover-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 2.09 / 1;
    max-height: 700px;
    overflow: hidden;
    line-height: 0;
    background: var(--bg-main);
}
.cover-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.cover-blur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
/* each layer fades IN via its mask, so the blur ramps up smoothly */
.cover-blur.b1 {
    top: 30%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%);
}
.cover-blur.b2 {
    top: 46%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60%);
}
.cover-blur.b3 {
    top: 62%;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 65%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 65%);
}
/* separate darkening pass - eases the photo into the page colour */
.cover-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(34, 34, 34, 0) 38%,
        rgba(34, 34, 34, 0.18) 55%,
        rgba(34, 34, 34, 0.45) 70%,
        rgba(34, 34, 34, 0.75) 84%,
        rgba(34, 34, 34, 0.95) 94%,
        #222222 100%
    );
}

/* Hero sitting on top of the softened part of the cover */
.hero.has-cover {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * min(19vw, 280px));
    background: transparent;
    border-bottom: none;
}
.hero.has-cover h1,
.hero.has-cover .lead,
.hero.has-cover p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
@media (max-width: 767.98px) {
    .hero.has-cover { margin-top: calc(-1 * min(16vw, 90px)); }
}



/* ---------- Custom loading icon (animated webp) ---------- */
/* Fixed px sizes (not em / not intrinsic) so the 384px source never blows up
   the button or box. flex-shrink:0 keeps it from stretching the line height. */
.btn-loading-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
    flex-shrink: 0;
}
.dz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}
.dz-loading img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
}
.dz-loading .dz-sub { font-size: 0.85rem; }
.dropzone.is-loading {
    cursor: default;
    border-color: var(--accent-pink);
    background: rgba(239, 45, 132, 0.06);
}

/* ============================================================
   Image Editor (โหมดแก้ไขภาพ)
   ============================================================ */
.editor-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
}
.editor-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line-border);
    flex-shrink: 0;
}
.editor-body {
    flex: 1;
    display: flex;
    min-height: 0;
}
.editor-tools {
    background: var(--bg-card);
    border-right: 1px solid var(--line-border);
}
.tool-group {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line-border);
}
.tool-label {
    font-size: 0.78rem;
    color: var(--text-muted-c);
    margin: 6px 0 4px;
    font-weight: 600;
}
.tool-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    color: var(--ink);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.12s;
}
.tool-btn:hover { border-color: var(--line-grey); }
.tool-btn.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}
.tool-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tool-btn-row .tool-btn { flex: 1; min-width: 44px; text-align: center; }
.swatch-row { display: flex; gap: 8px; }
.swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-pink); }
#eye-btn.active { background: var(--grad); border-color: transparent; color: #fff; }

.editor-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    touch-action: none;
    background:
        repeating-conic-gradient(#2a2a2a 0% 25%, #242424 0% 50%) 50% / 24px 24px;
}
.editor-viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;           /* we handle pinch/zoom ourselves */
    cursor: default;
}
.editor-viewport.pan-mode { cursor: grab; }
.editor-viewport.pan-mode:active { cursor: grabbing; }
.editor-canvas-stack {
    position: relative;
    display: inline-block;
    line-height: 0;
    transform-origin: center center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    will-change: transform;
}

/* floating zoom/rotate/pan controls */
.stage-controls {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(20,20,20,0.82);
    border: 1px solid var(--line-border);
    border-radius: 10px;
    padding: 5px 8px;
    backdrop-filter: blur(4px);
}
.stage-ctrl-btn {
    width: 34px; height: 34px;
    border-radius: 7px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.95rem;
}
.stage-ctrl-btn:hover { border-color: var(--accent-pink); }
.stage-ctrl-btn.active { background: var(--grad); border-color: transparent; color: #fff; }
.stage-zoom-val {
    font-size: 0.8rem; font-weight: 600;
    color: var(--ink);
    min-width: 42px; text-align: center;
}
.editor-canvas-stack canvas {
    display: block;
}
.editor-canvas-stack #editor-base {
    position: relative;
    display: block;
    max-width: 60vw;
    max-height: 82vh;
    width: auto;
    height: auto;
}
.editor-canvas-stack #editor-line,
.editor-canvas-stack #editor-draw {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
/* line layer sits over the photo using multiply so white drops out visually too */
.editor-canvas-stack #editor-line { mix-blend-mode: multiply; }
.editor-canvas-stack #editor-draw { mix-blend-mode: multiply; touch-action: none; }

/* Mobile: tools become a horizontal scroller on top */
@media (max-width: 767.98px) {
    .editor-body { flex-direction: column; }
    .editor-tools {
        width: 100%;
        max-height: 42vh;
        border-right: none;
        border-bottom: 1px solid var(--line-border);
    }
}

/* Editor: overlay nudge pad + dashfree tool icon */
.nudge-pad { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0; }
.nudge-mid { display: flex; gap: 4px; }
.nudge-pad .nudge { padding: 5px 9px; min-width: 38px; }
.tool-btn [class*="bi-three-dots"] { font-size: 0.7em; }

/* ============================================================
   Editor tools: collapsible rail + accordion
   ============================================================ */
.editor-tools { display: flex; flex-shrink: 0; }
.tools-rail {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px 6px;
    background: var(--bg-card);
    border-right: 1px solid var(--line-border);
}
.editor-tools.collapsed .tools-rail { display: flex; }
.editor-tools.collapsed .tools-panel { display: none; }
.rail-btn {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
}
.rail-btn:hover { border-color: var(--accent-pink); }

.tools-panel { width: 280px; overflow-y: auto; }
.tools-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--line-border);
    position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}

.acc-group { border-bottom: 1px solid var(--line-border); }
.acc-head {
    width: 100%; text-align: left;
    background: transparent; border: none; color: var(--ink);
    padding: 12px 14px; font-size: 0.9rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.acc-caret { margin-left: auto; transition: transform 0.15s; font-size: 0.8rem; }
.acc-group.open .acc-caret { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 14px 14px; }
.acc-group.open .acc-body { display: block; }

/* range value labels + rows */
.range-row { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
.range-row .tool-label { margin: 0; }
.range-val {
    margin-left: auto;
    font-size: 0.78rem; font-weight: 600;
    color: var(--accent-pink);
    min-width: 46px; text-align: right;
}
.lock-btn { padding: 3px 8px; margin-left: 4px; }
.lock-btn.active { background: var(--grad); border-color: transparent; color: #fff; }

/* scale stepper */
.stepper-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.step-btn { padding: 5px 10px; font-size: 0.85rem; }

/* mobile: panel/rail become a top bar */
@media (max-width: 767.98px) {
    .tools-panel { width: 100%; max-height: 44vh; }
    .editor-tools.collapsed .tools-rail { flex-direction: row; width: 100%; overflow-x: auto; }
    .editor-canvas-stack #editor-base { max-width: 92vw; max-height: 52vh; }
}


/* When panning, let the viewport receive the gesture instead of the draw canvas */
.editor-viewport.pan-mode #editor-draw { pointer-events: none; }

/* ============================================================
   Topbar (mobile): logo only, no hamburger
   ============================================================ */
.topbar-brand { display: inline-flex; align-items: center; text-decoration: none; }
.topbar-logo { height: 30px; width: auto; display: block; }

/* ============================================================
   Profile page
   ============================================================ */
.profile-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-border);
}
.profile-label { color: var(--text-muted-c); font-size: 0.9rem; white-space: nowrap; }
.profile-value { font-weight: 600; text-align: right; word-break: break-all; }
.coin-lg { width: 44px; height: 44px; }
.coin-balance-big {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.profile-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    border-radius: 8px;
    padding: 12px 14px;
    height: 100%;
}
.profile-stat-label { font-size: 0.78rem; color: var(--text-muted-c); margin-bottom: 2px; }
.profile-stat-value { font-weight: 600; }

/* ============================================================
   Buy page
   ============================================================ */
.buy-hero {
    background: var(--bg-card);
    border: 1px solid var(--line-border);
    border-top: 3px solid transparent;
    border-image: var(--grad-h) 1;
    padding: 18px 20px;
}
.buy-hero-balance {
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.buy-hero-balance span { font-size: 1rem; }

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line-border);
    border-radius: 12px;
    padding: 24px 20px 20px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    border-color: var(--line-grey);
}
.pricing-card.is-recommended {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        var(--grad) border-box;
    box-shadow: 0 8px 30px rgba(239, 45, 132, 0.18);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.pricing-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
}
.pricing-price {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    background: var(--grad-h);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pricing-currency { font-size: 1rem; margin-left: 4px; }
.pricing-cycle {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted-c);
    -webkit-text-fill-color: var(--text-muted-c);
}
.pricing-percoin {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted-c);
    margin-bottom: 14px;
}
.pricing-save {
    display: inline-block;
    margin-left: 6px;
    background: rgba(239, 45, 132, 0.15);
    color: #f26daa;
    border-radius: 999px;
    padding: 1px 8px;
    font-weight: 600;
    font-size: 0.78rem;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: 0.9rem;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features i { color: #f26daa; flex-shrink: 0; }

.buy-trust {
    border-top: 1px solid var(--line-border);
    padding-top: 24px;
}
.buy-trust i {
    font-size: 1.4rem;
    color: #f26daa;
    display: block;
    margin-bottom: 4px;
}

/* ============================================================
   History pager
   ============================================================ */
.history-pager .page-link {
    background: var(--bg-card);
    border-color: var(--line-border);
    color: var(--ink);
    min-width: 42px;
    text-align: center;
}
.history-pager .page-item.active .page-link {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}
.history-pager .page-item.disabled .page-link {
    background: var(--bg-main);
    color: var(--text-muted-c);
    border-color: var(--line-border);
}
.history-pager .page-link:hover { border-color: var(--accent-pink); color: #fff; }

@media (max-width: 575.98px) {
    .pricing-price { font-size: 2rem; }
    .buy-hero-balance { font-size: 1.6rem; }
    .history-pager .page-link { min-width: 38px; padding: 6px 8px; }
}


/* ============================================================
   Horizontal overflow guards
   ============================================================ */
/* Flex children default to min-width:auto, which stops them shrinking below
   their content and pushes the whole page wider than the screen. */
.app-shell { max-width: 100%; }
.main-content { min-width: 0; max-width: 100%; }
.main-content > .container-fluid { max-width: 100%; }
body { overflow-x: hidden; }

/* long Thai strings and file names should wrap rather than widen the page */
.dropzone .dz-sub,
.history-card .small { overflow-wrap: anywhere; }


/* Admin icon previews */
.icon-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-border);
    border-radius: 8px;
    padding: 12px;
}
.icon-preview img { object-fit: contain; }