/* ===== OXOS AP Hand — brand tokens (pulled from oxos.com / Impreza theme) ===== */
:root {
    --brand:        #595CFF;
    --brand-2:      #ABD1FF;
    --brand-grad:   linear-gradient(90deg, #595CFF 2.52%, #ABD1FF 97.35%);
    --ink:          #0f131f;
    --ink-2:        #35415b;
    --faded:        #727f9f;
    --border:       #e3e7f0;
    --good:         #00d084;
    --warn:         #fcb900;
    --bad:          #cf2e2e;
    --frame-bg:     #0a0d16;

    --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--frame-bg);
    font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
}

/* Hide the raw camera feed (we paint it onto the canvas) WITHOUT display:none —
   some browsers (iOS Safari) won't decode/play a display:none video, which
   stalls MediaPipe's frame loop. Keep it rendered but effectively invisible. */
.input_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    opacity: 0.01;
    pointer-events: none;
    z-index: -1;
}

body {
    background:
        radial-gradient(120% 120% at 50% 0%, #141a2b 0%, var(--frame-bg) 60%);
}

/* ===== App: header / camera / footer stacked and centered as one group.
   The group's width is set in JS to match the letterboxed canvas, so the
   header and footer tuck directly above and below the camera. ===== */
#app {
    position: fixed;
    inset: 0;
    margin: auto;
    height: max-content;
    max-width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#stage {
    position: relative;
    line-height: 0;
}

/* --- Camera retry / re-permission button (hidden until the camera fails) --- */
#camera-retry {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 14px 24px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}
#camera-retry[hidden] { display: none; }

/* --- Target-position guide (lower-left of the camera) --- */
.hand-guide {
    position: absolute;
    left: 14px;
    bottom: 14px;
    margin: 0;
    width: clamp(92px, 22%, 150px);
    pointer-events: none;
}
.hand-guide img {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(12deg);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.hand-guide figcaption {
    margin-top: 4px;
    text-align: center;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
}

.output_canvas {
    display: block;
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* --- Top bar --- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
}

.brand-logo {
    display: block;
    height: 24px;
    width: auto;
    /* the source SVG is near-black (#121213); render it white for the dark bar */
    filter: brightness(0) invert(1);
}

.view-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(15, 19, 31, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.view-pill::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-2);
    box-shadow: 0 0 10px var(--brand-2);
}

/* --- Bottom status bar --- */
.statusbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    color: #fff;
    background: rgba(10, 13, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--faded);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transition: border-color 0.25s ease;
}
.statusbar[data-state="good"] { border-left-color: var(--good); }
.statusbar[data-state="warn"] { border-left-color: var(--warn); }
.statusbar[data-state="bad"]  { border-left-color: var(--bad); }
.statusbar[data-state="idle"] { border-left-color: var(--brand); }

.status-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 24px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
}
.statusbar[data-state="good"] .status-icon { background: rgba(0, 208, 132, 0.18); }
.statusbar[data-state="warn"] .status-icon { background: rgba(252, 185, 0, 0.18); }
.statusbar[data-state="bad"]  .status-icon { background: rgba(207, 46, 46, 0.18); }

.status-text { flex: 1 1 auto; min-width: 0; }
.status-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.status-sub {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 2px;
}

.metric {
    flex: 0 0 auto;
    text-align: right;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.metric-val {
    display: block;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.metric-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--faded);
    margin-top: 4px;
}