/*
  Clario Landing — Anthropic-inspired minimal, whitespace-heavy design
*/
:root{
  --bg:#F3F1EA; /* soft cream like Anthropic */
  --card:#FFFFFF;
  --text:#0A0A0A;
  --muted:#5f5f5f;
  --border:#e7e5e4;
  --accent:#2E7CF6; /* electric blue */
  --accent-2:#FF6F61; /* coral for beams */
  --radius:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,.logo{font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}

.container{max-width:1600px; margin:0 auto; padding:0 56px}
.section-header{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px}
.section-header h2{margin:0; font-size:36px; letter-spacing:-0.01em}
.section-header p{margin:0; color:var(--muted); font-size:18px; line-height:1.7}

/* Navbar */
.navbar{position:sticky; top:0; z-index:50; background:rgba(243,241,234,.65); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 2px 10px rgba(0,0,0,.03)}
.nav-inner{display:flex; align-items:center; gap:16px; height:52px}
.logo{font-weight:700; letter-spacing:1px}
.logo.small{font-weight:700; font-size:14px}
.nav-links{display:flex; gap:20px; margin-left:auto}
.nav-links a{color:#111; opacity:.75; font-weight:500; letter-spacing:.01em; position:relative; padding:6px 2px; transition:opacity .15s ease}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#111; transform:scaleX(0); transform-origin:50% 100%; transition:transform .18s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; border:1px solid #111; font-weight:600; transition:transform .06s ease, background .2s ease, color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-dark{background:#111; color:#fff; border-color:#111}
.btn-dark:hover{background:#000}
.btn-light{background:#fff; color:#111; border-color:#d1d5db}
.btn-light:hover{background:#f8fafc}
.btn.full{width:100%}
.cta{margin-left:8px}
.hamburger{display:none; margin-left:8px; background:transparent; border:0; width:40px; height:40px; border-radius:8px; position:relative}
.hamburger span{position:absolute; left:10px; right:10px; height:2px; background:#111; transition:transform .2s ease, opacity .2s ease}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:26px}

/* Hero */
.hero{padding:24px 0 16px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.5fr 1.3fr; align-items:start; gap:72px}
.hero-copy{margin-top:12px}
.hero-copy h1{font-size:clamp(52px, 7.2vw, 76px); font-weight:800; line-height:1.06; letter-spacing:-0.02em; word-spacing:.01em; margin:0 0 6px; text-wrap:balance; max-width:30ch}
.hero-copy .sub{color:var(--muted); margin:0 0 16px; font-size:20px; line-height:1.72; max-width:70ch; text-wrap:pretty}
.cta-cards{display:grid; grid-template-columns:repeat(2, minmax(360px, 1fr)); gap:24px; max-width:980px; align-items:stretch}
.card{background:#fff; border:1px solid #eceae6; border-radius:20px; padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex; flex-direction:column; min-height:210px}
.card .eyebrow{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6b6b6b; margin-bottom:6px}
.card h3{margin:4px 0 8px; font-size:24px; font-weight:700; letter-spacing:-0.01em; line-height:1.25; font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
.card p{margin:0 0 14px; color:var(--muted); font-size:16px; line-height:1.6}
.card .btn{margin-top:auto; height:44px; border-radius:12px; width:100%}
.card .btn-light{border-color:#111; color:#111}
.hero-art{align-self:stretch; display:flex; align-items:center; justify-content:center; margin-right:0}
.hero-art img{width:clamp(460px, 48vw, 720px); max-width:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,.12)); transform:translate(-6%, -27%)}

/* Why */
.why{padding:80px 0 56px}
.three-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tile{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.tile h3{margin:0 0 8px}
.tile p{margin:0; color:var(--muted)}

/* Why — modern cards */
.why .section-header{justify-content:center; text-align:center}
.why-cards-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; justify-items:center}

/* Modern Why Clario cards */
.why-card {
  width: 320px;
  color: black;
  position: relative;
  border-radius: 2.5em;
  padding: 2em;
  transition: transform 0.4s ease;
}

.why-card:nth-child(1) {
  background: #b39eb5;
}

.why-card:nth-child(2) {
  background: #d8c29d;
}

.why-card:nth-child(3) {
  background: #8a9e79;
}

.why-card .card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5em;
  height: 100%;
  transition: transform 0.4s ease;
}

.why-card .card-top, .why-card .card-bottom {
  display: flex;
  justify-content: space-between;
}

.why-card .card-top p, .why-card .card-top .card-title, .why-card .card-bottom p, .why-card .card-bottom .card-title {
  margin: 0;
}

.why-card .card-title {
  font-weight: bold;
}

.why-card .card-top p, .why-card .card-bottom p {
  font-weight: 600;
}

.why-card .card-bottom {
  align-items: flex-end;
}

.why-card:hover {
  cursor: pointer;
  transform: scale(0.97);
}

.why-card:hover .card-content {
  transform: scale(0.96);
}

.why-card:active {
  transform: scale(0.9);
}

.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 18px}
.pill{background:#fff; border:1px solid var(--border); padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.01em}
.eyebrow{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6b6b6b; margin-bottom:6px}
.why-rich .tile{padding:24px}
.why-rich .tile h3{margin:2px 0 8px}
.why-rich .tile ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; color:var(--muted)}
.why-rich .tile li{position:relative; padding-left:22px}
.why-rich .tile li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800}
.tile{transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease}
.tile:hover{transform:translateY(-1px); box-shadow:0 2px 18px rgba(0,0,0,.08); border-color:#e3e0db}

/* Feature */
.feature{padding:56px 0}
.feature.alt{background:#F6F5EF; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.feature-inner{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.feature-copy h2{margin:0 0 8px}
.feature-copy p{margin:0 0 16px; color:var(--muted)}
.chip-row{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:#fff; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px}

/* Before/After */
.ba-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); position:relative}
.ba-card.small{padding:10px}
.ba-stage{position:relative; border-radius:12px; overflow:hidden}
.ba-stage img{width:100%; height:380px; object-fit:cover; display:block}
.ba-card.small .ba-stage img{height:220px}
.ba-stage img.after{position:absolute; inset:0; width:50%; transition:width .1s linear; border-right:1px solid rgba(255,255,255,.8)}
.slider{appearance:none; width:100%; margin-top:10px; background:transparent}
.slider::-webkit-slider-runnable-track{height:2px; background:#d1d5db; border-radius:2px}
.slider::-moz-range-track{height:2px; background:#d1d5db; border-radius:2px}
.slider::-webkit-slider-thumb{appearance:none; width:18px; height:18px; background:#111; border-radius:50%; margin-top:-8px; border:2px solid white}
.slider::-moz-range-thumb{width:18px; height:18px; background:#111; border-radius:50%; border:2px solid white}
.ba-labels{position:absolute; left:24px; right:24px; bottom:22px; display:flex; justify-content:space-between; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); font-weight:600; pointer-events:none}

/* Video */
.video-card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow)}
.video-card.small{padding:8px}
.video-card .preview{width:100%; height:380px; object-fit:cover; border-radius:12px}
.video-card.small .preview{height:220px}
.video-overlay{position:absolute; left:20px; top:18px; background:rgba(17,17,17,.7); color:#fff; padding:6px 10px; border-radius:999px; display:flex; align-items:center; gap:8px}
.video-overlay .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* Showcase */
.showcase{padding:56px 0}
.showcase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.showcase-item{min-height:200px}

/* Pricing */
.pricing{padding:56px 0}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.price-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.price-card.highlight{border-color:#111; transform:translateY(-2px)}
.price{font-size:36px; margin:6px 0 14px}
.price span{font-size:14px; color:var(--muted)}
.price-card ul{margin:0 0 16px; padding-left:18px; color:var(--muted)}
.price-card li{margin:6px 0}

/* Modern Video UI Components */
.control-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
  margin-bottom: 16px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.mode-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.mode-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(46, 124, 246, 0.02);
}

.mode-btn.active {
  border-color: var(--accent);
  background: rgba(46, 124, 246, 0.05);
}

.mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mode-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 124, 246, 0.1);
  border-radius: 8px;
}

.mode-content {
  flex: 1;
}

.mode-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}

.mode-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.modern-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease;
  background: var(--card);
}

.modern-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.file-upload-area {
  position: relative;
}

.file-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.file-upload-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(46, 124, 246, 0.01);
}

.file-upload-label:hover {
  border-color: var(--accent);
  background: rgba(46, 124, 246, 0.03);
}

.upload-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 124, 246, 0.1);
  border-radius: 10px;
}

.upload-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.upload-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.image-preview {
  margin-top: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  overflow: visible;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.setting-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.modern-select, .modern-input {
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Sleek, modern select with custom arrow */
.modern-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E7CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px; /* room for arrow */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 10;
}

/* Force dropdown options to appear above container */
.modern-select:focus {
  z-index: 100;
}

/* Ensure dropdown list stays within viewport */
.control-card {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.modern-select:hover, .modern-input:hover, .modern-textarea:hover {
  border-color: var(--accent);
}

.modern-select:focus, .modern-input:focus, .modern-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 124, 246, 0.15);
}

.advanced-settings {
  margin-top: 16px;
}

.advanced-toggle {
  cursor: pointer;
}

.advanced-toggle summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 0;
  list-style: none;
}

.advanced-toggle summary::-webkit-details-marker {
  display: none;
}

.advanced-toggle summary::before {
  content: "▶";
  margin-right: 8px;
  transition: transform 0.2s ease;
}

.advanced-toggle[open] summary::before {
  transform: rotate(90deg);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-large {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  text-align: left;
  min-height: 60px;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
}

.btn-primary:hover:not(:disabled) {
  background: #1E5FD9;
  border-color: #1E5FD9;
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(46, 124, 246, 0.02);
}

.btn-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.btn-secondary .btn-icon {
  background: rgba(46, 124, 246, 0.1);
}

.btn-content {
  flex: 1;
}

.btn-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.btn-subtitle {
  font-size: 12px;
  opacity: 0.8;
}

.history-grid {
  display: grid;
  gap: 8px;
}

/* Quote Section */
.quote-section {
  padding: 120px 0;
  background: var(--bg);
  text-align: center;
}

.big-quote {
  margin: 0;
  padding: 0;
}

.big-quote h2 {
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  position: relative;
}

.big-quote h2::before {
  content: '"';
  font-size: clamp(6rem, 15vw, 12rem);
  position: absolute;
  left: -0.5em;
  top: -0.2em;
  color: var(--text);
  opacity: 0.8;
  z-index: 1;
  font-weight: 400;
}

.big-quote h2::after {
  content: '"';
  font-size: clamp(6rem, 15vw, 12rem);
  position: absolute;
  right: -0.5em;
  bottom: -0.4em;
  color: var(--text);
  opacity: 0.8;
  z-index: 1;
  font-weight: 400;
}

/* Footer */
.footer{background:var(--card); border-top:1px solid var(--border); padding:32px 0}
.footer-inner{display:flex; align-items:center; gap:16px}
.foot-links{display:flex; gap:20px; margin-left:auto}
.foot-links a{color:var(--muted); font-size:14px}
.muted{color:var(--muted); font-size:14px}
.user-nav{display:flex; align-items:center; gap:12px; margin-left:auto}
.user-avatar{width:32px; height:32px; border-radius:50%; border:2px solid var(--border)}
.user-name{font-weight:500; font-size:14px}
.guest-nav{display:flex; align-items:center; gap:8px; margin-left:auto}

/* Sign-in Page */
.signin-main{min-height:calc(100vh - 52px); display:flex; align-items:center; justify-content:center; padding:40px 0}
.signin-container{max-width:440px; margin:0 auto}
.signin-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); text-align:center}
.signin-header h1{font-size:28px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em}
.signin-header p{color:var(--muted); margin:0 0 32px; font-size:16px}
.social-signin{display:flex; flex-direction:column; gap:12px}
.social-btn{width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:12px; font-weight:600; font-size:15px}
.error-msg{margin-top:16px; min-height:20px; font-size:14px; color:#ef4444}

/* Responsive */
@media (max-width: 1000px){
  .hero-grid, .feature-inner{grid-template-columns:1fr}
  .hero-art{margin-right:0; justify-content:center}
  .hero-art img{width:clamp(360px, 62vw, 560px); margin:0 auto; transform:translate(-4%, -27%)}
  .hero-copy h1{font-size:44px; line-height:1.05}
  .why-cards-grid{grid-template-columns:1fr; gap:20px}
  .why-card{width:100%; max-width:320px}
}
@media (max-width: 820px){
  .nav-links{display:none}
  .hamburger{display:block}
  .cta{margin-left:auto}
  .three-grid, .showcase-grid, .pricing-grid, .cta-cards{grid-template-columns:1fr}
}

/* Editor */
.editor-shell{padding:18px 0 56px; background:var(--bg)}
.editor-topbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; background:rgba(255,255,255,.6); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px 12px; box-shadow:0 1px 8px rgba(0,0,0,.04); position:sticky; top:72px; z-index:10}
.editor-topbar .left, .editor-topbar .right{display:flex; gap:8px; align-items:center}
.editor-title{margin:0; font-size:18px; letter-spacing:.02em}
.editor-main{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; margin-top:16px}
.canvas-wrap{position:relative; background:#fff; border:1px solid var(--border); border-radius:16px; min-height:60vh; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow)}
.canvas-wrap canvas{position:absolute; inset:0; width:100%; height:100%}
.editor-panel{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow); position:sticky; top:128px}
.editor-panel h2{margin:0 0 10px; font-size:18px}
.editor-panel textarea{width:100%; min-height:160px; border:1px solid var(--border); border-radius:12px; padding:12px; font:inherit; resize:vertical; outline:none; background:#fafafa}
.editor-panel textarea:focus{background:#fff; box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.editor-panel .panel-note{margin-top:10px; font-size:12px; color:var(--muted)}
.editor-panel .panel-help{margin-top:8px; font-size:12px; color:var(--muted)}

@media (max-width: 1000px){
  .editor-main{grid-template-columns:1fr}
  .editor-panel{position:relative; top:auto}
  .editor-topbar{top:64px}
}

/* Video workspace */
.video-layout{grid-template-columns:1fr 360px}
.video-panel h3{margin:14px 0 8px}
.video-preview-wrap{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:12px}
.video-preview-wrap .preview-inner{position:relative; background:#0b0b0b; border-radius:12px; overflow:hidden; min-height:320px; display:flex; align-items:center; justify-content:center}
.video-preview-wrap video{max-width:100%; width:100%; height:auto; display:block; background:#000}
.upgrade-row{display:flex; justify-content:flex-end}

.loading-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(0,0,0,.35); color:#fff; font-weight:600; letter-spacing:.01em; opacity:0; pointer-events:none; transition:opacity .2s ease}
.loading-overlay.show{opacity:1; pointer-events:auto}
.loading-overlay .loading-text{font-size:14px}
.spinner{width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{width:60%; height:6px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden}
.progress .bar{height:100%; width:0%; background:#2e7cf6}

.history-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-top:8px}
.history-grid .thumb{position:relative; background:#0b0b0b; border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer}
.history-grid .thumb video{width:100%; display:block}
.history-grid .thumb .meta{position:absolute; bottom:6px; left:6px; right:6px; color:#fff; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Buttons subtle hover scale */
.btn{transition:transform .08s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@media (max-width: 1000px){
  .video-layout{grid-template-columns:1fr}
}