/**
 * Veylcast Dashboard skin.
 *
 * The design language is the landing page's, not a generic SaaS theme. Four
 * things carry the identity across, and they are the reason this file looks the
 * way it does:
 *
 *   1. THE NEUTRAL RAMP. The landing page is built on a grey ramp with a single
 *      near-black (#101116) and hairline borders. Green is not the interface
 *      colour - it is the mark. Repainting the ramp is what flips the theme;
 *      there are not two stylesheets here, there is one ramp swapped.
 *
 *   2. INVERTED PRIMARY. The landing page's primary button is ink-on-paper
 *      turned inside out: a light pill on a dark page, a dark pill on a light
 *      one. It never uses the brand gradient as a button fill, and neither does
 *      this. A gradient button would read as a different product.
 *
 *   3. PILLS. Every control is fully rounded (999px) with 10px/24px padding and
 *      a 450 weight - the landing page's exact button geometry. Surfaces are
 *      18px, small controls 8px.
 *
 *   4. MONO EYEBROWS. JetBrains Mono, uppercase, .12em tracking, ~10-12px, for
 *      anything that labels rather than speaks: nav groups, table headers,
 *      status chips, tags.
 *
 * Everything resolves through --vd-*, so a page never names a colour.
 */

:root {
    /* The mark. Used for the logo, the active rail, live dots and "on" state -
       never as a surface or a button fill. */
    --vd-emerald: #0FB981;
    --vd-cyan:    #12B5CB;
    --vd-amber:   #F5A524;
    --vd-rose:    #F04E6E;
    --vd-grad: linear-gradient(100deg, var(--vd-emerald), var(--vd-cyan));

    --vd-sans: "Figtree", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --vd-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

    --vd-side-w: 260px;

    /* Landing radii: surfaces are generous, controls are small, actions are
       pills. Three values, no in-between. */
    --vd-radius:  18px;
    --vd-radius-sm: 8px;
    --vd-pill: 999px;

    --vd-ease: cubic-bezier(.22, .61, .36, 1);
    --vd-snap: .15s ease-out;          /* the landing page's button transition */
}

/* dark (default) - the landing page's own ramp */
:root, :root[data-theme="dark"] {
    color-scheme: dark;

    --vd-bg:        #101116;
    --vd-surface:   #16181f;
    --vd-raised:    #191c24;
    --vd-line:      #2c313d;
    --vd-line-soft: #22252f;
    --vd-ink:       #f2f3f7;
    --vd-ink-dim:   #9ba1b2;
    --vd-ink-mute:  #6a7183;
    --vd-shadow:    0 24px 56px -30px rgba(0, 0, 0, .9);

    /* The inverted pair the primary button and the avatar are cut from. */
    --vd-inverse:    #f2f3f7;
    --vd-on-inverse: #101116;
    --vd-inverse-hover: #ffffff;
}

:root[data-theme="light"] {
    color-scheme: light;

    --vd-bg:        #ffffff;
    --vd-surface:   #f8f9fc;
    --vd-raised:    #ffffff;
    --vd-line:      #e1e6ec;
    --vd-line-soft: #eff2f7;
    --vd-ink:       #121317;
    --vd-ink-dim:   #45474d;
    --vd-ink-mute:  #7c8190;
    --vd-shadow:    0 20px 48px -32px rgba(18, 19, 23, .32);

    --vd-inverse:    #121317;
    --vd-on-inverse: #ffffff;
    --vd-inverse-hover: #2f3034;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--vd-bg);
    color: var(--vd-ink);
    font-family: var(--vd-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Display type on the landing page tightens as it grows. Only the page title
   is large enough here to need it, but the rule belongs with the ramp. */
h1, h2, h3 { letter-spacing: -.02em; }

.vd-skip {
    position: absolute; left: -9999px;
    background: var(--vd-raised); color: var(--vd-ink);
    border: 1px solid var(--vd-line);
    padding: 10px 20px; border-radius: var(--vd-pill); z-index: 100;
}
.vd-skip:focus { left: 16px; top: 16px; }

/* ---------------------------------------------------------------- layout */

.vd { display: flex; min-height: 100vh; }

.vd-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vd-content {
    flex: 1 1 auto;
    padding: 32px 40px 80px;
    max-width: 1480px;
    width: 100%;
}

/* --------------------------------------------------------------- sidebar */

.vd-side {
    width: var(--vd-side-w);
    flex: none;
    background: var(--vd-surface);
    border-right: 1px solid var(--vd-line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 16px 16px;
    gap: 6px;
}

.vd-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 10px 20px;
    line-height: 1;
}
.vd-mark { width: 26px; height: 26px; flex: none; display: block; }

/* The wordmark is set in ink, as it is in the landing header. The gradient
   lives in the mark beside it - putting it in both made the lockup shout. */
.vd-brand b {
    display: block; font-size: 17px; font-weight: 700; letter-spacing: -.03em;
    color: var(--vd-ink);
}
.vd-brand small {
    display: block; margin-top: 4px;
    font-family: var(--vd-mono); font-size: 9px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--vd-ink-mute);
}

.vd-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; }

.vd-nav-group {
    margin: 16px 0 6px; padding: 0 12px;
    font-family: var(--vd-mono); font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--vd-ink-mute);
}

/* Nav items are pills, like everything else that can be pressed. */
.vd-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: var(--vd-pill);
    font-size: 14.5px; font-weight: 450; color: var(--vd-ink-dim);
    transition: background var(--vd-snap), color var(--vd-snap);
    position: relative;
}
.vd-nav-item svg { width: 18px; height: 18px; flex: none; }
.vd-nav-item:hover { background: var(--vd-line-soft); color: var(--vd-ink); }

.vd-nav-item.is-active {
    color: var(--vd-ink);
    font-weight: 600;
    background: var(--vd-line-soft);
}
/* One place the brand gradient appears in the chrome: the rail marking where
   you are. It is 3px wide on purpose - a hint, not a highlight. */
.vd-nav-item.is-active::before {
    content: ""; position: absolute; left: -16px; top: 50%;
    width: 3px; height: 18px; margin-top: -9px;
    border-radius: 0 3px 3px 0; background: var(--vd-grad);
}
.vd-nav-item.is-active svg { color: var(--vd-emerald); }

.vd-nav-item.is-locked { color: var(--vd-ink-mute); }
.vd-lock { margin-left: auto; display: flex; opacity: .7; }
.vd-lock svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ plan widget */

.vd-usage {
    border: 1px solid var(--vd-line);
    background: var(--vd-raised);
    border-radius: var(--vd-radius);
    padding: 14px 16px;
    display: grid; gap: 10px;
}
.vd-usage-head { display: flex; align-items: center; justify-content: space-between; }

.vd-plan-chip {
    font-family: var(--vd-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--vd-pill);
    border: 1px solid var(--vd-line); color: var(--vd-ink-dim);
}
/* A paid plan is stated in ink rather than painted green - the same inversion
   the primary button uses, so the two read as the same system. */
.vd-plan-chip.is-paid {
    color: var(--vd-on-inverse); border-color: transparent;
    background: var(--vd-inverse); font-weight: 600;
}
.vd-usage-line {
    margin: 0; display: flex; justify-content: space-between;
    font-size: 12px; color: var(--vd-ink-dim);
}
.vd-meter { height: 4px; border-radius: var(--vd-pill); background: var(--vd-line); overflow: hidden; }
.vd-meter i { display: block; height: 100%; background: var(--vd-grad); border-radius: var(--vd-pill); }

/* ---------------------------------------------------------------- topbar */

/* The landing header is a translucent slab over the page with a hairline
   under it. Same treatment, same blur. */
.vd-top {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 40px;
    border-bottom: 1px solid var(--vd-line);
    background: color-mix(in srgb, var(--vd-bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 20;
}
.vd-top-title { flex: 1 1 auto; min-width: 0; }
.vd-top-title h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.vd-top-title p { margin: 4px 0 0; font-size: 13.5px; color: var(--vd-ink-dim); }
.vd-top-right { display: flex; align-items: center; gap: 10px; flex: none; }

.vd-icon-btn {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--vd-line); border-radius: var(--vd-pill);
    background: transparent; color: var(--vd-ink-dim);
    cursor: pointer; transition: all var(--vd-snap);
}
.vd-icon-btn:hover { color: var(--vd-ink); background: var(--vd-line-soft); }
.vd-icon-btn svg { width: 18px; height: 18px; }

.ic-light { display: none; }
:root[data-theme="light"] .ic-light { display: block; }
:root[data-theme="light"] .ic-dark  { display: none; }

.vd-burger { display: none; }

/* ------------------------------------------------------------- user menu */

.vd-user { position: relative; }
.vd-user summary {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 14px 4px 4px; border-radius: var(--vd-pill);
    border: 1px solid var(--vd-line); background: transparent;
    cursor: pointer; list-style: none;
    transition: background var(--vd-snap);
}
.vd-user summary:hover { background: var(--vd-line-soft); }
.vd-user summary::-webkit-details-marker { display: none; }
.vd-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--vd-grad); color: #04120d;
    font-weight: 700; font-size: 13px;
}
.vd-user-name { font-size: 13.5px; font-weight: 450; }

.vd-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px; padding: 6px;
    background: var(--vd-raised); border: 1px solid var(--vd-line);
    border-radius: 14px; box-shadow: var(--vd-shadow); z-index: 30;
}
.vd-menu-head {
    margin: 0 0 4px; padding: 9px 12px;
    font-size: 12px; color: var(--vd-ink-mute);
    border-bottom: 1px solid var(--vd-line); word-break: break-all;
}
.vd-menu a {
    display: block; padding: 8px 12px; border-radius: var(--vd-pill);
    font-size: 13.5px; font-weight: 450; color: var(--vd-ink-dim);
    transition: background var(--vd-snap), color var(--vd-snap);
}
.vd-menu a:hover { background: var(--vd-line-soft); color: var(--vd-ink); }

/* --------------------------------------------------------------- buttons */

/* The landing page's button, to the pixel: a pill, 10px/24px, weight 450, a
   transparent 1px border so outlined and filled variants share a box. */
.vd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 24px; border-radius: var(--vd-pill);
    border: 1px solid var(--vd-line); background: transparent;
    color: var(--vd-ink); font: inherit; font-size: 14px; font-weight: 450;
    line-height: 1.1; text-align: center;
    cursor: pointer; transition: all var(--vd-snap);
}
.vd-btn:hover { background: var(--vd-line-soft); }
.vd-btn:focus-visible { outline: 2px solid var(--vd-cyan); outline-offset: 2px; }
.vd-btn svg { width: 17px; height: 17px; }

/* Inverted, not gradient. This is the single loudest thing on the page and it
   is loud by being the opposite of the page, which is how the landing page
   does it too. */
.vd-btn--primary {
    background: var(--vd-inverse); border-color: transparent; color: var(--vd-on-inverse);
    font-weight: 600;
}
.vd-btn--primary:hover { background: var(--vd-inverse-hover); }

.vd-btn--up { width: 100%; padding: 8px 16px; font-size: 13px;
    background: var(--vd-inverse); border-color: transparent; color: var(--vd-on-inverse); font-weight: 600; }
.vd-btn--up:hover { background: var(--vd-inverse-hover); }

.vd-btn--ghost { background: transparent; border-color: var(--vd-line); }

/* A disabled pill has to read as unavailable, not merely un-hovered. Three
   "Choose plan" buttons at full contrast made the plan screen look like it was
   shouting four different offers at once. */
.vd-btn:disabled { opacity: .42; cursor: not-allowed; }
.vd-btn:disabled:hover { background: var(--vd-inverse); }
.vd-btn--ghost:disabled:hover { background: transparent; }

/* ----------------------------------------------------------------- cards */

.vd-card {
    background: var(--vd-surface);
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius);
    padding: 22px;
}

.vd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

/* ---------------------------------------------------------- empty states */

.vd-empty {
    position: relative;
    max-width: 520px; margin: 9vh auto; text-align: center;
    display: grid; justify-items: center; gap: 16px;
}
.vd-empty-icon {
    width: 64px; height: 64px; display: grid; place-items: center;
    border-radius: 20px; border: 1px solid var(--vd-line);
    background: var(--vd-surface); color: var(--vd-emerald);
}
.vd-empty-icon svg { width: 26px; height: 26px; }
.vd-empty h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.vd-empty p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--vd-ink-dim); }
.vd-empty--locked .vd-empty-icon { color: var(--vd-amber); }

/* The signature motion from the landing hero, parked behind an empty state -
   the one screen with room for it. See dashboard-field.js.
   Named .vd-motion, not .vd-field: that one is already the form-field wrapper,
   and the collision put every input behind the page at inset -14vh.
   Not z-index:-1. A negative-z child joins the root stacking context's negative
   layer, which paints *before* body's background - the field was there the
   whole time, behind an opaque page. It sits at 0 and the content is lifted
   above it instead.
   The mask clears the middle rather than filling it: the field frames the
   words, it does not run through them. */
.vd-motion {
    position: absolute; inset: -16vh -24vw;
    z-index: 0; pointer-events: none; opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 48% 44% at center, transparent 32%, #000 92%);
            mask-image: radial-gradient(ellipse 48% 44% at center, transparent 32%, #000 92%);
}
.vd-empty > *:not(.vd-motion) { position: relative; z-index: 1; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
    .vd-side {
        position: fixed; left: 0; top: 0; z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s var(--vd-ease);
        box-shadow: var(--vd-shadow);
    }
    .vd[data-open] .vd-side { transform: none; }
    .vd-burger { display: grid; }
    .vd-top { padding: 16px 18px; }
    .vd-content { padding: 22px 18px 64px; }
    .vd-user-name { display: none; }
    .vd-scrim {
        position: fixed; inset: 0; z-index: 50;
        background: rgba(16, 17, 22, .6); opacity: 0; pointer-events: none;
        transition: opacity .25s var(--vd-ease);
    }
    .vd[data-open] .vd-scrim { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- library cards */

.vd-video { display: grid; gap: 11px; }
.vd-thumb {
    aspect-ratio: 16 / 9; border-radius: 12px;
    background: linear-gradient(135deg, var(--vd-raised), var(--vd-line-soft));
    border: 1px solid var(--vd-line);
    display: grid; place-items: center;
}
.vd-thumb-mark { width: 34px; height: 34px; opacity: .5; }
.vd-video h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.vd-meta { display: flex; gap: 6px; font-size: 12.5px; color: var(--vd-ink-dim); }
.vd-dot-sep { opacity: .5; }
.vd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-tag {
    font-family: var(--vd-mono); font-size: 10px; letter-spacing: .06em;
    padding: 3px 9px; border-radius: var(--vd-pill);
    border: 1px solid var(--vd-line); color: var(--vd-ink-mute);
}
.vd-tag.is-on { color: var(--vd-emerald); border-color: rgba(15, 185, 129, .32); background: rgba(15, 185, 129, .08); }

/* -------------------------------------------------------------- tables */

.vd-table-wrap { padding: 0; overflow-x: auto; }
.vd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vd-table th {
    text-align: left; padding: 13px 20px; white-space: nowrap;
    font-family: var(--vd-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--vd-ink-mute);
    border-bottom: 1px solid var(--vd-line);
}
.vd-table td { padding: 13px 20px; border-bottom: 1px solid var(--vd-line-soft); white-space: nowrap; }
.vd-table tr:last-child td { border-bottom: 0; }
.vd-mono { font-family: var(--vd-mono); font-size: 12.5px; }

/* --------------------------------------------------------------- plans */

.vd-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.vd-plan { display: grid; gap: 14px; align-content: start; }
.vd-plan.is-current { border-color: var(--vd-ink-mute); box-shadow: inset 0 0 0 1px var(--vd-line); }
.vd-plan h3 { margin: 0; font-size: 16px; font-weight: 600; }
.vd-price { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.04em; }
.vd-price small { font-size: 13px; font-weight: 450; letter-spacing: 0; color: var(--vd-ink-dim); }
.vd-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--vd-ink-dim); }
.vd-plan-list li::before { content: "— "; color: var(--vd-ink-mute); }
.vd-plan-list li.is-yes { color: var(--vd-ink); }
.vd-plan-list li.is-yes::before { content: "✓ "; color: var(--vd-emerald); }
.vd-plan-list li.is-no { opacity: .5; }
.vd-plan-list li.is-no::before { content: "✕ "; }
.vd-note { margin: 22px 0 0; font-size: 13px; line-height: 1.65; color: var(--vd-ink-mute); }

/* --------------------------------------------------------------- alerts */

.vd-alert {
    margin: 0 0 20px; padding: 13px 18px; border-radius: 14px;
    border: 1px solid rgba(240, 78, 110, .32); background: rgba(240, 78, 110, .09);
    color: var(--vd-ink); font-size: 14px;
}
.vd-alert.is-ok {
    border-color: rgba(15, 185, 129, .32); background: rgba(15, 185, 129, .09);
}

/* ----------------------------------------------------------------- forms */

.vd-form { max-width: 680px; display: grid; gap: 20px; }

.vd-drop {
    display: grid; justify-items: center; gap: 8px; text-align: center;
    padding: 40px 24px; cursor: pointer;
    border: 1.5px dashed var(--vd-line); border-radius: var(--vd-radius);
    background: var(--vd-bg);
    transition: border-color var(--vd-snap), background var(--vd-snap);
}
.vd-drop:hover, .vd-drop.is-over { border-color: var(--vd-emerald); background: rgba(15, 185, 129, .05); }
.vd-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vd-drop-icon { color: var(--vd-emerald); }
.vd-drop-icon svg { width: 26px; height: 26px; }
.vd-drop b { font-size: 15px; font-weight: 600; }
.vd-drop small { font-size: 12.5px; color: var(--vd-ink-mute); }

.vd-field { display: grid; gap: 7px; }
.vd-field label { font-size: 13px; font-weight: 600; color: var(--vd-ink-dim); }
.vd-field input {
    height: 42px; padding: 0 16px; border-radius: var(--vd-pill);
    border: 1px solid var(--vd-line); background: var(--vd-bg);
    color: var(--vd-ink); font: inherit; font-size: 14px;
    transition: border-color var(--vd-snap);
}
.vd-field input:hover { border-color: var(--vd-ink-mute); }
.vd-field input:focus { outline: 2px solid var(--vd-cyan); outline-offset: 1px; border-color: transparent; }

.vd-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.vd-check input { margin-top: 3px; accent-color: var(--vd-emerald); width: 16px; height: 16px; }
.vd-check b { display: block; font-size: 14px; font-weight: 600; }
.vd-check small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--vd-ink-dim); }
.vd-check a { color: var(--vd-cyan); }
.vd-check.is-locked { opacity: .75; cursor: default; }
.vd-check .vd-tag { margin-left: 6px; vertical-align: 2px; }

.vd-form-actions { display: flex; gap: 10px; }

/* ------------------------------------------------------- library states */

.vd-thumb-state {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--vd-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--vd-ink-dim);
}
.vd-thumb-state.is-bad { color: var(--vd-rose); }
.vd-spin {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--vd-line); border-top-color: var(--vd-emerald);
    animation: vd-spin .8s linear infinite;
}
@keyframes vd-spin { to { transform: rotate(360deg); } }

.vd-fail { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--vd-rose); }

/* Four pills in a card are wider than four rectangles were, and left to wrap
   they landed 3 + 1, which reads as an accident. A grid puts them on one row
   when there is room and in a tidy 2 x 2 when there is not. */
.vd-video-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px; margin-top: 2px;
}
/* The form is the grid cell and the button fills it. display:contents would
   read better but drops the form's box in ways Safari has been unhappy with. */
.vd-video-actions form { margin: 0; display: grid; }
.vd-btn--sm { padding: 7px 12px; font-size: 12.5px; }
.vd-btn--danger { color: var(--vd-rose); }
.vd-btn--danger:hover { border-color: rgba(240, 78, 110, .45); background: rgba(240, 78, 110, .08); }

/* ------------------------------------------------------------ detail page */

/* Tabs are pills in a tray rather than an underline rule - the landing page
   has no underlined navigation anywhere. */
.vd-tabs {
    display: inline-flex; gap: 4px; margin: 0 0 24px; padding: 4px;
    border: 1px solid var(--vd-line); border-radius: var(--vd-pill);
    background: var(--vd-surface);
}
.vd-tab {
    padding: 8px 20px; border-radius: var(--vd-pill);
    font-size: 14px; font-weight: 450; color: var(--vd-ink-dim);
    transition: all var(--vd-snap);
}
.vd-tab:hover { color: var(--vd-ink); background: var(--vd-line-soft); }
.vd-tab.is-active {
    color: var(--vd-on-inverse); background: var(--vd-inverse); font-weight: 600;
}

.vd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .vd-split { grid-template-columns: 1fr; } }

.vd-thumb--lg { aspect-ratio: 16/9; margin-bottom: 16px; }
.vd-thumb--lg .vd-thumb-mark { width: 54px; height: 54px; }

.vd-video h3 a:hover { color: var(--vd-emerald); }

.vd-field textarea {
    padding: 13px 16px; border-radius: 14px; resize: vertical;
    border: 1px solid var(--vd-line); background: var(--vd-bg);
    color: var(--vd-ink); font: inherit; font-size: 14px; line-height: 1.65;
    transition: border-color var(--vd-snap);
}
.vd-field textarea:hover { border-color: var(--vd-ink-mute); }
.vd-field textarea:focus { outline: 2px solid var(--vd-cyan); outline-offset: 1px; border-color: transparent; }
.vd-field textarea.vd-mono { font-family: var(--vd-mono); font-size: 12.5px; }
.vd-hint { font-size: 12.5px; color: var(--vd-ink-mute); }

.vd-kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 6px 0 0; font-size: 13.5px; }
/* The key column labels rather than speaks, so it gets the eyebrow treatment. */
.vd-kv dt {
    font-family: var(--vd-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--vd-ink-mute); padding-top: 2px;
}
.vd-kv dd { margin: 0; color: var(--vd-ink-dim); }

code {
    font-family: var(--vd-mono); font-size: .9em;
    background: var(--vd-line-soft); padding: 2px 6px; border-radius: 6px;
}

/* ------------------------------------------------------------- embeds tab */

.vd-embeds { display: grid; gap: 18px; max-width: 720px; }
.vd-embed { display: grid; gap: 16px; }
.vd-embed.is-revoked { opacity: .6; }

.vd-embed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vd-embed-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }

/* The key is long and has to be readable and selectable - it is the one string
   here somebody may need to match against a log. */
.vd-embed-key {
    margin: 5px 0 0; font-size: 11.5px; color: var(--vd-ink-mute);
    word-break: break-all; user-select: all;
}

.vd-embed-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vd-embed-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--vd-ink-dim); }
.vd-embed-opt input { accent-color: var(--vd-emerald); width: 15px; height: 15px; }

.vd-embed-domains { margin: 0; display: grid; gap: 12px; }
.vd-embed-new { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.vd-embed form { margin: 0; }

/* The mono label the landing page puts above a section. */
.vd-eyebrow {
    display: block; margin-bottom: 8px;
    font-family: var(--vd-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--vd-ink-mute);
}

/* ----------------------------------------------------------- sign-in page */

/* The landing hero, at one-card scale: everything centred, the field behind it,
   display type tightened the way the landing tightens it as it grows. */
.vd-auth {
    display: grid; place-items: center;
    min-height: 100vh; padding: 40px 20px;
    position: relative; overflow: hidden;
}

/* The mask is doing what the landing hero does in code - hollowing out the
   middle so the field frames the content instead of running underneath it. */
.vd-motion--auth {
    position: fixed; inset: 0; z-index: 0; opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 58% 54% at center, transparent 30%, #000 88%);
            mask-image: radial-gradient(ellipse 58% 54% at center, transparent 30%, #000 88%);
}

.vd-auth-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    display: grid; justify-items: center; text-align: center; gap: 4px;
}

.vd-auth-brand { display: flex; align-items: center; gap: 12px; line-height: 1; margin-bottom: 26px; }
.vd-auth-brand .vd-mark { width: 34px; height: 34px; }
.vd-auth-brand span { text-align: left; }
.vd-auth-brand b {
    display: block; font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--vd-ink);
}
.vd-auth-brand small {
    display: block; margin-top: 5px;
    font-family: var(--vd-mono); font-size: 9px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--vd-ink-mute);
}

.vd-auth-box h1 { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.045em; }
.vd-auth-lede {
    margin: 12px 0 0; max-width: 360px;
    font-size: 15px; line-height: 1.6; color: var(--vd-ink-dim);
}

.vd-auth-form { width: 100%; max-width: none; margin-top: 30px; text-align: left; gap: 16px; }
.vd-auth-form .vd-field input { background: var(--vd-raised); }
.vd-btn--wide { width: 100%; }

.vd-auth-hint {
    margin: 26px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--vd-ink-mute);
}
.vd-auth-hint code { background: var(--vd-surface); border: 1px solid var(--vd-line); }

.vd-auth .vd-alert { width: 100%; margin: 24px 0 -6px; text-align: left; }

/* ------------------------------------------------------------- sign-in options */

.vd-google-wrap { display: grid; justify-items: center; margin-top: 26px; }

/* A hairline rule with "or" centred on it, between the Google button and the
   email + password form - the standard split for two sign-in methods. */
.vd-auth-sep {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 320px;
    margin: 20px 0; color: var(--vd-ink-mute);
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
}
.vd-auth-sep::before, .vd-auth-sep::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--vd-line);
}