:root{
  --ve-bg: #f9f9f9;
  --ve-fg: #111;
  --ve-card: #fff;
  --ve-muted: #666;
  --ve-accent: #0b66c3;
  --ve-border: #e5e7eb;
  --ve-primary: #0088dd;      /* active buttons & angle badge */
  --ve-focus: rgba(0,136,221,.28);
  --ve-btn-min: 112px;        /* unified width */
  --ve-btn-h: 40px;           /* unified height (desktop) */
}

body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; background: var(--ve-bg); color: var(--ve-fg); }
.container{ max-width: 1080px; margin: 0 auto; padding: 24px; }

.video-editor-section{ background: var(--ve-card); border: 1px solid var(--ve-border); border-radius: 14px; padding: 16px; }
.video-editor-section h1{ margin: 0 0 6px; font-size: 24px; color: var(--ve-accent); }
.video-editor-section p{ margin: 0 0 16px; color: var(--ve-muted); }

/* toolbar: wraps on narrow screens; items can't shrink */
.video-editor-toolbar{
  position: sticky; top: 0; z-index: 5;
  display:flex; align-items:center; flex-wrap: wrap; gap:10px; margin-bottom:12px;
  overflow: visible;
  padding:8px 0 10px; background: var(--ve-card);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.ve-btn{
  appearance:none; border:1px solid var(--ve-border);
  background:var(--ve-card); color:var(--ve-fg);
  padding:0 12px; border-radius:10px; cursor:pointer; font-size:14px;
  height: var(--ve-btn-h); min-width: var(--ve-btn-min);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space: nowrap; flex: 0 0 auto; /* do not shrink */
}
.ve-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ve-focus); }
.ve-btn:disabled{ opacity:.55; cursor:not-allowed; }

.ve-btn-primary{
  background:var(--ve-primary) !important;
  border-color:var(--ve-primary) !important;
  color:#fff !important;
}
.ve-btn-primary *{ color:#fff !important; fill:#fff !important; }

/* Upload button variant (same box) */
.ve-btn-ghost{ background: var(--ve-card); }

/* filename chip */
.ve-chip{
  border:1px dashed var(--ve-border); color:var(--ve-muted); background:var(--ve-card);
  border-radius: 999px; padding:0 12px; height: var(--ve-btn-h);
  display:inline-flex; align-items:center; flex: 0 1 220px; min-width: 150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ve-chip.is-empty{ color:#9aa6b2; }

/* segmented control: each button same width as others */
.ve-segment{ display:inline-flex; flex: 0 0 auto; border:1px solid var(--ve-border); border-radius:10px; overflow:hidden; }
.ve-btn-seg{ border:0; border-radius:0; min-width: var(--ve-btn-min); height: var(--ve-btn-h); }
.ve-btn-seg + .ve-btn-seg{ border-left:1px solid var(--ve-border); }
.ve-btn-seg.ve-btn-primary{ box-shadow:0 0 0 1px var(--ve-primary) inset; }

/* Color control styled like button */
.ve-color{ position:relative; }
.ve-color input[type="color"]{
  -webkit-appearance: none; appearance: none; border:0; background:transparent; padding:0; margin:0 0 0 8px; width:28px; height:20px;
  outline:none; cursor:pointer; flex: 0 0 auto;
}
.ve-color input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.ve-color input[type="color"]::-webkit-color-swatch{ border:1px solid var(--ve-border); border-radius:4px; }

/* media surface */
.video-editor-wrapper{ position:relative; width:100%; border-radius:12px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.06); }
#ve-video, #ve-image{ width:100%; height:auto; display:none; position:relative; z-index:1; background:#000; }
#ve-video.is-active, #ve-image.is-active{ display:block; }
.ve-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%!important; height:100%!important; touch-action:none; }

/* kbd */
.ve-kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; border:1px solid var(--ve-border); border-bottom-width:3px; padding:1px 4px; border-radius:6px; }
.ve-hint{ margin-top:10px; color:var(--ve-muted); }

/* responsive – larger hit targets on phones */
@media (max-width: 600px){
  :root{ --ve-btn-h: 44px; --ve-btn-min: 120px; }
  .video-editor-section h1{ font-size:20px; }
}
@media (max-width: 900px){
  .container{ padding: 16px; }
}