:root {
    --green-dark: #14432a;
    --green: #1e6b3d;
    --green-light: #e8f3ec;
    --gold: #c9a227;
    --ink: #1c2320;
    --muted: #5c6b64;
    --border: #d8e2dc;
    --bg: #f6f8f6;
    --white: #ffffff;
    --danger: #b3261e;
    --radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

a { color: var(--green); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Nav ---------- */
.navbar {
    background: var(--green-dark);
    color: var(--white);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.navbar a { color: var(--white); text-decoration: none; }
.navbar .brand { font-weight: 700; font-size: 1.2rem; letter-spacing: .2px; }
.navbar nav a { margin-left: 18px; opacity: .9; }
.navbar nav a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius);
    background: var(--green);
    color: var(--white);
    text-decoration: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
}
.btn:hover { background: var(--green-dark); }
.btn.secondary { background: var(--white); color: var(--green); border: 1px solid var(--green); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cards / layout ---------- */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}
.hero {
    background: linear-gradient(135deg, var(--green-dark), var(--green));
    color: var(--white);
    padding: 64px 0;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 12px; }
.hero p { font-size: 1.15rem; opacity: .95; max-width: 640px; }

.grid { display: grid; gap: 20px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .grid.cols-4 { grid-template-columns: 1fr; }
}

.package-card { display: flex; flex-direction: column; }
.package-card h3 { margin-top: 0; }
.price { font-size: 1.8rem; font-weight: 700; color: var(--green-dark); margin: 8px 0; }
.package-card .btn { margin-top: auto; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--white);
}
textarea { min-height: 100px; resize: vertical; }
.form-narrow { max-width: 460px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert.error { background: #fdecea; color: var(--danger); border: 1px solid #f3c1bd; }
.alert.success { background: var(--green-light); color: var(--green-dark); border: 1px solid #b6dcc4; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge.pending_payment { background: #fdf3d8; color: #8a6d1f; }
.badge.paid { background: #e0f0ff; color: #17517f; }
.badge.processing { background: #eee6fb; color: #5b3aa0; }
.badge.completed { background: var(--green-light); color: var(--green-dark); }
.badge.cancelled { background: #f1eeee; color: var(--muted); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: .95rem; }
th { color: var(--muted); font-weight: 600; }

/* ---------- Swing position gallery ---------- */
.view-block { margin-bottom: 30px; }
.view-block h4 { margin-bottom: 10px; }
.video-wrap { background: #000; border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.video-wrap video { width: 100%; display: block; max-height: 480px; }

.position-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 700px) {
    .position-labels { grid-template-columns: repeat(2, 1fr); }
}
.position-chip {
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
    font-size: .82rem;
    cursor: pointer;
    color: var(--ink);
}
.position-chip.active { border-color: var(--green); background: var(--green-light); font-weight: 700; }
.position-chip.missing { color: var(--muted); font-style: italic; cursor: default; }

/* Lightbox */
.lightbox-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.75);
    display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.lightbox-backdrop.open { display: flex; }
.lightbox-box { background: var(--white); border-radius: var(--radius); max-width: 90vw; max-height: 90vh; overflow: auto; padding: 16px; position: relative; }
.lightbox-box img { max-width: 100%; display: block; border-radius: 8px; }
.lightbox-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.4rem; cursor: pointer; }
.lightbox-caption { margin-top: 10px; font-weight: 600; }

/* ---------- Chat ---------- */
.chat-thread { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--white); margin-bottom: 10px; }
.chat-msg { margin-bottom: 10px; max-width: 80%; }
.chat-msg .bubble { display: inline-block; padding: 8px 12px; border-radius: 12px; background: #eef2ef; }
.chat-msg.customer { text-align: left; }
.chat-msg.admin { text-align: right; margin-left: auto; }
.chat-msg.admin .bubble { background: var(--green-light); }
.chat-msg .meta { display: block; font-size: .75rem; color: var(--muted); margin-top: 2px; }
.chat-form { display: flex; gap: 8px; }
.chat-form textarea { flex: 1; min-height: 44px; }

/* ---------- Capture tool (admin) ---------- */
.capture-tool video { width: 100%; max-height: 420px; background: #000; border-radius: 8px; }
.capture-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.capture-controls input[type=range] { flex: 1; min-width: 200px; }
.capture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 800px) { .capture-grid { grid-template-columns: repeat(2, 1fr); } }
.capture-slot { border: 1px dashed var(--border); border-radius: 8px; padding: 8px; text-align: center; font-size: .8rem; }
.capture-slot img { width: 100%; border-radius: 6px; margin-bottom: 6px; background: #eee; display: block; }
.capture-slot.has-manual { border-style: solid; border-color: var(--green); }
.capture-slot .src-tag { font-size: .7rem; color: var(--muted); }
.capture-slot { cursor: pointer; }
.capture-slot.active-slot { border-style: solid; border-color: var(--gold); border-width: 2px; box-shadow: 0 0 0 2px rgba(201,162,39,.2); }

/* Small draw/undo canvas + icon buttons on each capture-grid thumbnail —
   lets the coach mark a line on any position without first selecting it
   into the big compare pane above. */
.capture-slot .slot-media { position: relative; margin-bottom: 6px; }
.capture-slot .slot-media img { margin-bottom: 0; }
.capture-slot .slot-media .annotate-canvas { border-radius: 6px; }
.slot-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
}
.icon-btn:hover { border-color: var(--green); color: var(--green); }
.icon-btn.active { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }

/* ---------- Video/still compare panes + line annotation ---------- */
.compare-wrap { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.compare-pane { flex: 1 1 300px; min-width: 260px; }
.compare-wrap.three-col .compare-pane { flex: 1 1 260px; min-width: 220px; }
.pane-title { margin: 0 0 8px; font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* 2026-09-07: .media-frame used to be a hardcoded 4:3 box with the video/
   image absolutely positioned to fill it via object-fit:contain — since a
   real swing clip is almost never actually 4:3, that always left black
   letterbox/pillarbox bars, and shrinking the box to a fixed 9:16 guess
   for mobile (below) just picked a different wrong ratio for some clips.
   Fixed the same way the capture-grid thumbnails (.slot-media) already
   worked and never had this problem: no forced box shape at all — the
   video/image is normal in-flow content sized by its own real ratio
   (width capped to the available column, height:auto), and .media-frame
   is inline-block so it shrink-wraps to exactly that rendered size. The
   box IS the video's shape now, so there's nothing left over to paint
   black. .annotate-canvas below still just overlays the full box
   (position:absolute; inset:0) — that continues to work because the box
   now equals the video's real content rect, so getContentRect() in
   annotate.js/order_compare.js has nothing left to compensate for. */
.media-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.capture-tool .media-frame video,
.compare-card .media-frame video,
.media-frame .active-still-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* 2026-09-07: a portrait (tall, phone-recorded) clip has nothing else
       capping its height on a wide desktop window — shrink-wrapped to a
       ~500-600px wide column, it was rendering 900px+ tall (16:9 turned on
       its side), pushing the toolbar/scrubber/quicknav far below the fold
       ("videos are so big I cannot see the buttons" on Mac). Capped to the
       same 480px this codebase already uses for plain video panes
       elsewhere (.video-wrap video) — the mobile portrait/landscape rules
       below override this with their own vh-based cap on small screens,
       same as before. */
    max-height: 480px;
    background: #000;
}
.annotate-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: pointer;
}
.annotate-canvas.draw-mode { cursor: crosshair; }
.annotate-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.annotate-toolbar .btn { padding: 6px 12px; font-size: .82rem; }
.annotate-toggle.active { background: var(--green-dark); color: var(--white); border-color: var(--green-dark); }
.annotate-hint, .active-still-label { font-size: .78rem; color: var(--muted); }

.position-quicknav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.quicknav-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.quicknav-btn:hover { border-color: var(--green); }
.quicknav-btn.active { background: var(--green); color: var(--white); border-color: var(--green); }

/* ---------- Live co-viewing bar (customer order page) ---------- */
.live-sync-bar {
    align-items: center;
    gap: 10px;
    background: var(--green-light);
    border: 1px solid #b6dcc4;
    border-radius: 8px;
    padding: 8px 14px;
    margin: 10px 0 16px;
    font-size: .88rem;
    color: var(--green-dark);
}
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
.live-sync-bar .live-text { flex: 1; font-weight: 600; }
.live-sync-bar .live-toggle { padding: 5px 12px; font-size: .78rem; }

footer { text-align: center; padding: 30px 0; color: var(--muted); font-size: .9rem; }

/* ---------- Mobile: maximize video/photo space on phones ----------
   2026-09-07: on a phone the 20px page padding + 24px card padding +
   default heading margins + explanatory hint text all added up to a lot
   of scrolling and wasted screen before reaching anything touchable
   (especially the 1-9 quicknav buttons) or seeing much of the actual
   video. Tightened below so the media itself gets as much of the screen
   as possible and card borders sit closer to the screen edge, while the
   quicknav buttons get bigger (not smaller) since there's now more room
   to give them. */
@media (max-width: 640px) {
    .container { padding: 0 8px; }
    .card { padding: 12px; margin-bottom: 12px; border-radius: 8px; }
    .card h2, .card h3, .card h4 { margin: 0 0 8px; }
    .annotate-hint, .active-still-label { font-size: .72rem; }

    /* Video/photo compare panes: layout itself is now handled by the two
       orientation-specific blocks below (portrait = stacked, landscape =
       side by side) - this just keeps the bits that apply either way. */
    .pane-title { margin: 0 0 4px; font-size: .72rem; }
    .media-frame { border-radius: 6px; }
    .annotate-toolbar { margin-top: 4px; gap: 6px; }
    .annotate-toolbar .btn { padding: 5px 10px; font-size: .76rem; }
    .capture-controls { margin: 6px 0; gap: 6px; }
    .sync-controls { margin: 8px 0 !important; }

    .position-quicknav { gap: 8px; margin-top: 8px; }
    .quicknav-btn { width: 40px; height: 40px; font-size: .88rem; }

    .view-block { margin-bottom: 16px; }
    .view-block h4 { margin: 0 0 6px; }

    .capture-grid { gap: 6px; margin-top: 10px; }
    .capture-slot { padding: 5px; font-size: .72rem; }
}

/* ---------- Compare panes: side by side on the phone, same as the
   capture-grid stills ----------
   2026-09-07: tried stacking the two videos in portrait ("over each
   other") on the idea that upright/full-width would make each one bigger
   — wrong call: stacked, EACH video's own height stacks on top of the
   other's, so the pair together could run taller than the screen and push
   the sync bar/1-9 buttons off the bottom. Side by side (row), like the
   capture-grid's own 2-column stills, uses the screen the other way: each
   video only gets ~half the width, so for a tall phone-shot clip its
   rendered height comes down a lot too (half the width, at the same
   aspect ratio, is half the height) — the pair together ends up SHORTER
   than either one alone would be stacked, which is what actually keeps
   the controls on screen without scrolling. So: side by side in both
   portrait and landscape now, no orientation split needed any more — just
   one shared max-height as a safety cap for whatever's left over (a
   landscape-shaped clip, or a very tall phone screen).
   .media-frame has no forced box shape at all (see above) and just
   shrink-wraps to each video's own real size, so there's nothing left
   over to paint black either way. object-fit itself is still untouched —
   the line-drawing math (getContentRect() everywhere) still lines up
   because the box IS the video's content rect now, no letterboxing to
   account for. This height is a first pass — I can't preview the live
   layout myself, so treat it as a starting point to nudge if anything
   still gets cut off on your actual phone. */
@media (max-width: 900px) {
    .compare-wrap { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
    .compare-pane { flex: 1 1 0; min-width: 0; text-align: center; }
    .capture-tool .media-frame video,
    .compare-card .media-frame video,
    .media-frame .active-still-img { max-height: 42vh; width: auto; max-width: 100%; }
}