/* ==========================================================================
   FiveMRides Tattoo Studio ([fivem_tattoo_studio]) - scoped to .fta
   Shared Studio components (top bar, buttons, cards, fields, viewport frame,
   toasts) come from fmr-studio-ui.css (.fsu-*), loaded first: same look as the
   Livery and Chain Studios. This sheet keeps the Tattoo Studio layout only:
   left card = designs of the pack, centre = the body, right = cards ending in
   the gradient export button.
   ========================================================================== */

html.fta-lock, html.fta-lock body { overflow: hidden !important; }

.fta {
    position: fixed; inset: 0; z-index: 2147483000; height: 100vh; height: 100dvh;
    color: var(--fsu-text);
    font: 500 13px/1.45 var(--fsu-font);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(168, 85, 247, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 120%, rgba(0, 240, 255, .06), transparent 60%),
        var(--fsu-bg);
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
.fta *, .fta *::before, .fta *::after { box-sizing: border-box; }
.fta [hidden] { display: none !important; }
:where(.fta) button, :where(.fta) input, :where(.fta) select { font: inherit; color: inherit; }
/* theme guards: the site skin styles bare buttons, headings and inputs */
.fta button { text-transform: none; letter-spacing: normal; text-shadow: none; min-height: 0; min-width: 0; margin: 0; line-height: 1.2; }
.fta button:focus { outline: none; }
.fta button:focus-visible, .fta [role=button]:focus-visible, .fta .fsu-row:focus-visible { outline: 2px solid rgba(0, 240, 255, .7); outline-offset: 2px; }
.fta a { color: var(--fsu-cyan); }
.fta a.fsu-btn { color: var(--fsu-text); }
.fta a.fsu-btn-primary { color: #fff; }
.fta h1, .fta h2, .fta h3, .fta h4 { margin: 0; color: var(--fsu-text); letter-spacing: 0; text-transform: none; }
.fta p { margin: 0; }
.fta code { font: 600 11px/1.4 var(--fsu-mono); color: #bff6ff; background: rgba(0, 240, 255, .06); padding: 1px 5px; border-radius: 5px; word-break: break-all; }

.fta-app { height: 100%; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ top bar */
.fta-top { gap: 10px; }
.fta-steps { margin-left: 14px; }
.fta-project { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--fsu-line); }
.fta .fta-name {
    width: min(240px, 22vw); height: 22px; padding: 0 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 6px; background: transparent;
    color: var(--fsu-text); font: 700 14px/1 var(--fsu-display); letter-spacing: .01em; outline: none; box-shadow: none;
}
.fta .fta-name:hover { border-color: var(--fsu-line2); }
.fta .fta-name:focus { border-color: rgba(0, 240, 255, .55); background: var(--fsu-bg2); }
.fta-save { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fsu-muted); white-space: nowrap; }
.fta-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--fsu-warn); }
.fta-save.is-saved i { background: var(--fsu-good); }
.fta-save.is-saving i, .fta-save.is-local i { background: var(--fsu-cyan); animation: fta-pulse 1s infinite; }
.fta-save.is-error i { background: var(--fsu-bad); }
.fta-save.is-new i { background: var(--fsu-dim); }
.fta-credits { text-decoration: none; }

/* ------------------------------------------------------------------- layout */
.fta-body {
    flex: 1; min-height: 0; display: grid; gap: 10px; padding: 10px;
    grid-template-columns: clamp(250px, 20vw, 320px) minmax(0, 1fr) clamp(280px, 21vw, 350px);
}
.fta-left, .fta-right, .fta-stage { min-height: 0; }

/* fields */
.fta-field { display: grid; gap: 5px; min-width: 0; }
.fta-field > span { color: var(--fsu-muted); font-size: 11.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.fta-field > span b { color: var(--fsu-text); font: 700 11.5px var(--fsu-mono); }
.fta select, .fta input[type=text], .fta input[type=number] {
    width: 100%; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--fsu-line2);
    background: var(--fsu-bg2); color: var(--fsu-text); outline: none; font-size: 12.5px; box-shadow: none; margin: 0;
}
.fta select { padding-right: 26px; cursor: pointer; }
.fta select option { background: #0e121b; color: #e8edf5; }
.fta select:focus, .fta input[type=text]:focus, .fta input[type=number]:focus { border-color: rgba(0, 240, 255, .55); box-shadow: 0 0 0 3px rgba(0, 240, 255, .1); }
.fta input.is-bad { border-color: rgba(248, 113, 113, .7); }
.fta input[type=range] { width: 100%; accent-color: #ff2f9e; height: 22px; margin: 0; background: transparent; }

/* ------------------------------------------------------------- left: designs */
.fta-designs-card { min-height: 0; flex: 1 1 auto; }
.fta-adddrop {
    display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 12px; cursor: pointer; outline: none;
    border: 1.5px dashed rgba(141, 152, 171, .32); background: rgba(10, 13, 21, .55); transition: border-color .15s, background .15s;
}
.fta-adddrop:hover, .fta-adddrop:focus-visible, .fta-adddrop.is-over { border-color: rgba(0, 240, 255, .6); background: rgba(0, 240, 255, .06); }
.fta-adddrop-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--fsu-grad); box-shadow: 0 6px 20px rgba(255, 47, 158, .3); }
.fta-adddrop b { display: block; font-size: 13px; color: var(--fsu-text); }
.fta-adddrop small { display: block; font-size: 11px; color: var(--fsu-dim); line-height: 1.35; margin-top: 2px; }
.fta-zonefilter { display: flex; flex-wrap: wrap; gap: 5px; }
.fta-zonefilter .fsu-chip { height: 25px; padding: 0 8px; font-size: 11.5px; }
.fta-zonefilter em { font-style: normal; color: var(--fsu-dim); margin-left: 2px; font-family: var(--fsu-mono); font-size: 10.5px; }
.fta-zonefilter .is-on em { color: #ffd0e8; }
.fta-list { display: flex; flex-direction: column; gap: 3px; }
.fta-row { min-height: 54px; padding: 4px 4px 4px 4px; gap: 9px; border: 1px solid transparent; }
.fta-row.is-on { background: rgba(255, 47, 158, .07); border-color: rgba(255, 47, 158, .4); }
.fta-row.is-missing .fta-thumb { color: var(--fsu-warn); }
.fta-thumb {
    width: 44px; height: 44px; flex: none; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
    background: repeating-conic-gradient(#1a1f2c 0 25%, #222838 0 50%) 0 0 / 10px 10px; border: 1px solid var(--fsu-line);
}
.fta-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fta-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fta-row-text small { color: var(--fsu-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fta-paid { font-style: normal; color: var(--fsu-good); border: 1px solid rgba(52, 211, 153, .45); border-radius: 99px; padding: 0 5px; margin-right: 5px; font-size: 10px; font-weight: 700; }
.fta-miss { font-style: normal; color: var(--fsu-warn); }
.fta-row-actions { display: flex; gap: 0; opacity: 0; transition: opacity .15s; }
.fta-row:hover .fta-row-actions, .fta-row.is-on .fta-row-actions, .fta-row:focus-within .fta-row-actions { opacity: 1; }
.fta-row-actions .fsu-iconbtn-sm { width: 24px; height: 24px; }
.fta-del:not(:disabled):hover { color: #ffb4b4 !important; background: rgba(248, 113, 113, .1) !important; }

/* ------------------------------------------------------------------ viewport */
.fta-stage { position: relative; }
.fta-stage.is-over { box-shadow: 0 0 0 2px rgba(0, 240, 255, .6), inset 0 0 80px rgba(0, 240, 255, .12); }
.fta-canvas { position: absolute; inset: 0; }
.fta-canvas canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.fta-canvas.is-dragging canvas { cursor: grabbing; }
.fta-stage-top { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fta-gender { background: rgba(10, 13, 21, .78); backdrop-filter: blur(8px); }
.fta-gender .fsu-i { width: 14px; height: 14px; }
.fta-tones { display: flex; gap: 5px; padding: 4px 6px; border-radius: 999px; background: rgba(10, 13, 21, .6); }
.fta-tones:empty { display: none; }
.fta .fta-tone { width: 20px; height: 20px; border-radius: 50%; padding: 0; border: 2px solid rgba(255, 255, 255, .14); background: var(--tone, #9a7560); cursor: pointer; box-shadow: none; transition: transform .15s; }
.fta .fta-tone:hover { transform: scale(1.12); }
.fta .fta-tone.is-on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 47, 158, .7); }
.fta-views { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(10, 13, 21, .78); backdrop-filter: blur(8px); }
.fta-vtools { position: absolute; top: 12px; right: 12px; z-index: 2; }
.fta-vtools .fsu-iconbtn.is-on { color: #fff; background: linear-gradient(135deg, rgba(255, 47, 158, .4), rgba(168, 85, 247, .4)); border-color: rgba(255, 47, 158, .6); }
.fta-help {
    position: absolute; top: 52px; right: 12px; z-index: 3; width: 290px; padding: 12px 14px; border-radius: 12px;
    background: rgba(8, 10, 17, .92); border: 1px solid var(--fsu-line2); backdrop-filter: blur(10px); box-shadow: var(--fsu-shadow);
}
.fta-help b { font: 700 12px var(--fsu-display); letter-spacing: .14em; text-transform: uppercase; color: #c9d2e0; }
.fta-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 8px 0 0; }
.fta-help dt { color: var(--fsu-text); font-weight: 600; font-size: 12px; }
.fta-help dd { margin: 0; color: var(--fsu-muted); font-size: 12px; }
.fta-legend { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 28px); white-space: normal; }
.fta-legend .fsu-i { width: 15px; height: 15px; color: var(--fsu-cyan); }
.fta-legend b { color: #fff; }
.fta-tip { z-index: 4; }
.fta-empty {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(420px, calc(100% - 32px));
    display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 22px; border-radius: 18px;
    background: rgba(8, 10, 17, .82); border: 1px solid var(--fsu-line2); backdrop-filter: blur(10px); box-shadow: var(--fsu-shadow);
}
.fta-empty h2 { font: 700 24px/1.1 var(--fsu-display); }
.fta-empty p { color: var(--fsu-muted); max-width: 340px; }
.fta-loading { z-index: 3; }
.fta-loading .fsu-i { width: 28px; height: 28px; color: var(--fsu-warn); }
.fta-loading span { max-width: 360px; text-align: center; }

/* -------------------------------------------------------------- right cards */
.fta-spots { display: flex; flex-wrap: wrap; gap: 5px; }
.fta-spots .fsu-chip { height: 25px; font-size: 11.5px; }
.fta-size { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: end; }
.fta-size .fta-lock { margin-bottom: 3px; }
.fta-prefix { display: flex; align-items: stretch; }
.fta-prefix em { display: grid; place-items: center; padding: 0 8px; font: 600 12px var(--fsu-mono); font-style: normal; color: var(--fsu-muted); background: var(--fsu-panel3); border: 1px solid var(--fsu-line2); border-right: 0; border-radius: 9px 0 0 9px; }
.fta .fta-prefix input { border-radius: 0 9px 9px 0; font-family: var(--fsu-mono); }
.fta-unit { position: relative; display: block; }
.fta-unit em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--fsu-dim); font-size: 11px; pointer-events: none; }
.fta-unit input { padding-right: 28px !important; }
.fta-switches { display: grid; gap: 9px; padding: 2px 0; }
.fta-readout { font-size: 11.5px; }
.fta-notplaced { display: grid; gap: 8px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .05); }
.fta-notplaced p { color: #e9dcb4; font-size: 12.5px; }
.fta-configs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.fta-files summary { cursor: pointer; color: var(--fsu-muted); font-size: 12px; font-weight: 600; }
.fta-files ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.fta-price { font-size: 13px; color: #cdd5e2; }
.fta-price b { color: #fff; font-weight: 800; }
.fta-warn { color: #f5d38a !important; }
.fta-terms.is-shake { animation: fsu-shake .45s; }
.fta-export-card { border-color: rgba(255, 47, 158, .28); }
.fta-export-card.is-flash { box-shadow: 0 0 0 2px rgba(255, 47, 158, .6), 0 0 40px rgba(255, 47, 158, .25); }
.fta-progress { height: 6px; border-radius: 99px; background: var(--fsu-panel3); overflow: hidden; }
.fta-progress i { display: block; height: 100%; background: var(--fsu-grad); transition: width .4s var(--fsu-ease); }
.fta-done, .fta-err { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 9px 10px; border-radius: 10px; }
.fta-done { color: #c9f7e3; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .35); }
.fta-done .fsu-i { color: var(--fsu-good); }
.fta-err { color: #ffd2d2; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .4); }
.fta-err .fsu-i { color: var(--fsu-bad); }

/* ------------------------------------------------------------------- dialog */
.fta-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(3, 5, 9, .72); backdrop-filter: blur(4px); padding: 16px; }
.fta-dialog {
    width: min(620px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px;
    background: var(--fsu-panel); border: 1px solid var(--fsu-line2); box-shadow: var(--fsu-shadow);
}
.fta-dialog .fsu-card-head { gap: 10px; }
.fta-dialog .fsu-card-head h3 { flex: 1; }
.fta-dialog > .fsu-btn { align-self: flex-start; }
.fta-projects { overflow-y: auto; display: grid; gap: 6px; scrollbar-width: thin; }
.fta-proj { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 11px; border: 1px solid var(--fsu-line); background: rgba(255, 255, 255, .015); }
.fta-proj.is-on { border-color: rgba(255, 47, 158, .45); }
.fta-proj-thumb { width: 52px; height: 52px; flex: none; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: #0b0e17; color: var(--fsu-dim); }
.fta-proj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fta-proj-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fta-proj-text b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fta-proj-text small { color: var(--fsu-dim); font-size: 11px; }

@keyframes fta-pulse { 50% { opacity: .35; } }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
    .fta-project { display: none; }
    .fta-views button { padding: 0 6px; }
}
@media (max-width: 1100px) {
    .fta { overflow-y: auto; }
    .fta-app { height: auto; min-height: 100%; }
    .fta-body { grid-template-columns: minmax(0, 1fr); }
    .fta-stage { order: -1; height: 62vh; min-height: 380px; }
    .fta-left .fta-designs-card { max-height: none; }
    .fta-list { max-height: 360px; }
    .fta-views { top: auto; bottom: 62px; }
}
@media (max-width: 640px) {
    .fta-body { padding: 8px; gap: 8px; }
    .fta-top .fsu-btn span, .fta-steps { display: none; }
    .fta-stage-top { flex-direction: column; align-items: flex-start; gap: 6px; }
    .fta-views { max-width: calc(100% - 16px); overflow-x: auto; }
    .fta-legend { display: none; }
    .fta-configs { grid-template-columns: 1fr; }
    .fta-row-actions { opacity: 1; }
}
.fta-nobg { display: grid; gap: 8px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .05); }