/* Qlegy mini visuals + project mocks — ported 1:1 from the design export. */

/* ---------- Service minis ---------- */
.qlegy .qlg-mini { width: 100%; height: 100%; }

.qlegy .qlg-mini-dash { background: #0c0c0d; display: flex; flex-direction: column; font-family: var(--qlegy-mono); font-size: 9px; }
.qlegy .qlg-md-head { padding: 8px 10px; border-bottom: 1px solid var(--qlegy-line); display: flex; align-items: center; gap: 10px; }
.qlegy .qlg-md-dots { display: flex; gap: 4px; }
.qlegy .qlg-md-dots span { width: 6px; height: 6px; background: #2a2a2d; border-radius: 50%; }
.qlegy .qlg-md-url { color: var(--qlegy-fg-mute); font-size: 9px; }
.qlegy .qlg-md-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.qlegy .qlg-md-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qlegy .qlg-md-stat { background: rgba(255, 255, 255, 0.02); padding: 8px; border-radius: 6px; border: 1px solid var(--qlegy-line); }
.qlegy .qlg-md-stat-l { color: var(--qlegy-fg-mute); font-size: 8px; }
.qlegy .qlg-md-stat-v { font-size: 14px; color: var(--qlegy-fg); margin-top: 2px; font-family: var(--qlegy-sans); letter-spacing: -0.02em; }
.qlegy .qlg-md-chart { flex: 1; min-height: 50px; }
.qlegy .qlg-md-chart svg { width: 100%; height: 100%; }

.qlegy .qlg-mini-mobile { background: linear-gradient(180deg, #0a0e1a, #0a0a0b); border-radius: 18px; padding: 14px; position: relative; font-size: 9px; }
.qlegy .qlg-mm-notch { width: 40px; height: 5px; background: #1a1a1d; border-radius: 3px; margin: 0 auto 12px; }
.qlegy .qlg-mm-body { color: var(--qlegy-fg); }
.qlegy .qlg-mm-greeting { font-size: 9px; color: var(--qlegy-fg-mute); }
.qlegy .qlg-mm-name { font-size: 16px; letter-spacing: -0.02em; }
.qlegy .qlg-mm-balance { margin-top: 10px; padding: 10px; background: linear-gradient(135deg, #1e3a8a, #0e7490); border-radius: 10px; }
.qlegy .qlg-mm-balance-l { font-size: 8px; opacity: 0.7; }
.qlegy .qlg-mm-balance-v { font-size: 14px; margin-top: 2px; letter-spacing: -0.02em; }
.qlegy .qlg-mm-balance-v span { font-size: 9px; opacity: 0.6; }
.qlegy .qlg-mm-balance-a { display: flex; gap: 6px; margin-top: 8px; }
.qlegy .qlg-mm-balance-a span { background: rgba(255, 255, 255, 0.15); padding: 3px 8px; border-radius: 99px; font-size: 8px; }
.qlegy .qlg-mm-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.qlegy .qlg-mm-list > div { display: flex; justify-content: space-between; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; font-size: 9px; }

.qlegy .qlg-mini-metric { padding: 14px; display: flex; flex-direction: column; }
.qlegy .qlg-mn-head { display: flex; justify-content: space-between; }
.qlegy .qlg-mn-num { font-size: 56px; line-height: 1; letter-spacing: -0.04em; margin-top: 8px; color: var(--qlegy-fg); }
.qlegy .qlg-mn-num-s { font-size: 18px; color: var(--qlegy-fg-mute); }
.qlegy .qlg-mn-bars { display: flex; gap: 4px; align-items: end; height: 40px; margin-top: auto; }
.qlegy .qlg-mn-bars > div { flex: 1; background: linear-gradient(180deg, #67e8f9, #0e7490); border-radius: 2px 2px 0 0; }
.qlegy .qlg-mn-foot { font-family: var(--qlegy-mono); font-size: 9px; color: var(--qlegy-fg-mute); margin-top: 8px; letter-spacing: 0.06em; }

.qlegy .qlg-mini-shop { background: #f5f4ef; color: #0a0a0b; padding: 12px; display: flex; flex-direction: column; font-family: var(--qlegy-sans); }
.qlegy .qlg-msh-img { background: linear-gradient(135deg, #c8b6a6, #6e5a4b); aspect-ratio: 1; border-radius: 6px; }
.qlegy .qlg-msh-info { padding-top: 10px; display: flex; flex-direction: column; flex: 1; }
.qlegy .qlg-msh-name { font-size: 13px; letter-spacing: -0.02em; }
.qlegy .qlg-msh-price { font-size: 11px; margin-top: 2px; opacity: 0.7; }
.qlegy .qlg-msh-cta { background: #0a0a0b; color: #fff; padding: 6px; text-align: center; border-radius: 4px; font-size: 9px; margin-top: 8px; }

.qlegy .qlg-mini-erp { padding: 8px; display: flex; flex-direction: column; gap: 1px; background: #0a0a0b; font-family: var(--qlegy-mono); font-size: 9px; }
.qlegy .qlg-me-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--qlegy-fg-dim); }
.qlegy .qlg-me-head { color: var(--qlegy-fg-mute); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.qlegy .qlg-me-ok { color: #4ade80; }
.qlegy .qlg-me-low { color: #fbbf24; }
.qlegy .qlg-me-out { color: #f87171; }

.qlegy .qlg-mini-cms { display: flex; background: #0c0c0d; font-family: var(--qlegy-mono); font-size: 9px; }
.qlegy .qlg-mc-side { width: 60px; padding: 8px 6px; border-inline-end: 1px solid var(--qlegy-line); display: flex; flex-direction: column; gap: 4px; }
.qlegy .qlg-mc-side-item { padding: 5px 6px; color: var(--qlegy-fg-mute); border-radius: 4px; }
.qlegy .qlg-mc-side-item.is-active { background: rgba(255, 255, 255, 0.06); color: var(--qlegy-fg); }
.qlegy .qlg-mc-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.qlegy .qlg-mc-bar { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--qlegy-line); }
.qlegy .qlg-mc-btn { color: var(--qlegy-brand); }
.qlegy .qlg-mc-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--qlegy-fg-dim); }
.qlegy .qlg-mc-pub { color: #4ade80; font-size: 8px; flex-shrink: 0; }
.qlegy .qlg-mc-draft { color: var(--qlegy-fg-mute); font-size: 8px; flex-shrink: 0; }

.qlegy .qlg-mini-seo { padding: 12px; display: flex; flex-direction: column; gap: 8px; font-family: var(--qlegy-mono); font-size: 11px; color: var(--qlegy-fg-dim); }
.qlegy .qlg-ms-row { display: flex; justify-content: space-between; }
.qlegy .qlg-ms-graph { flex: 1; min-height: 30px; }
.qlegy .qlg-ms-graph svg { width: 100%; height: 100%; }

.qlegy .qlg-mini-ux { position: relative; padding: 12px; }
.qlegy .qlg-mu-frame { position: absolute; border-radius: 8px; border: 1px solid var(--qlegy-line); background: rgba(255, 255, 255, 0.02); }
.qlegy .qlg-mu-1 { inset-inline-start: 12px; top: 12px; width: 50%; height: 40%; background: rgba(103, 232, 249, 0.06); }
.qlegy .qlg-mu-2 { inset-inline-end: 12px; top: 22%; width: 35%; height: 50%; background: rgba(167, 139, 250, 0.06); }
.qlegy .qlg-mu-3 { inset-inline-start: 32px; bottom: 14px; width: 40%; height: 30%; background: rgba(253, 186, 116, 0.06); }
.qlegy .qlg-mu-cursor { position: absolute; inset-inline-start: 60%; top: 55%; }

/* ---------- Project mocks ---------- */
.qlegy .qlg-mock { width: 100%; height: 100%; padding: 24px; display: flex; flex-direction: column; }

.qlegy .qlg-mock-editorial { font-family: var(--qlegy-serif); }
.qlegy .qlg-mk-nav { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.7; font-family: var(--qlegy-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.qlegy .qlg-mk-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.qlegy .qlg-mk-h1 { font-size: clamp(36px, 6vw, 96px); letter-spacing: -0.02em; line-height: 0.9; color: rgba(255, 255, 255, 0.92); font-style: italic; font-weight: 400; }
.qlegy .qlg-mk-tag { padding: 6px 14px; border-radius: 99px; font-size: 11px; color: #000; align-self: flex-start; font-family: var(--qlegy-sans); }
.qlegy .qlg-mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; height: 80px; }
.qlegy .qlg-mk-grid > div { background: rgba(255, 255, 255, 0.06); border-radius: 4px; }

.qlegy .qlg-mock-dash { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.qlegy .qlg-mk-side { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); }
.qlegy .qlg-mk-logo { font-family: var(--qlegy-sans); background: rgba(255, 255, 255, 0.1); padding: 12px; text-align: center; border-radius: 8px; font-size: 14px; color: #fff; }
.qlegy .qlg-mk-item { height: 32px; background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
.qlegy .qlg-mk-item.is-active { background: rgba(255, 255, 255, 0.15); }
.qlegy .qlg-mk-main { display: flex; flex-direction: column; gap: 16px; }
.qlegy .qlg-mk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qlegy .qlg-mk-stat { padding: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.qlegy .qlg-mk-stat b { font-size: clamp(20px, 2.5vw, 32px); letter-spacing: -0.02em; display: block; }
.qlegy .qlg-mk-stat span { font-size: 11px; opacity: 0.6; font-family: var(--qlegy-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.qlegy .qlg-mk-chart { flex: 1; min-height: 80px; padding: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); }
.qlegy .qlg-mk-chart svg { width: 100%; height: 100%; }

.qlegy .qlg-mock-shop { color: #fff; }
.qlegy .qlg-mk-shop-hero { padding: 32px; border-radius: 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.qlegy .qlg-mk-shop-h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; }
.qlegy .qlg-mk-shop-h2 { font-family: var(--qlegy-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.7; }
.qlegy .qlg-mk-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; height: 80px; }
.qlegy .qlg-mk-shop-grid > div { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); border-radius: 6px; }

.qlegy .qlg-mock-mob { display: flex; align-items: center; justify-content: center; }
.qlegy .qlg-mk-mob-frame { width: 60%; max-width: 220px; aspect-ratio: 9/19; background: #050507; border-radius: 24px; padding: 14px; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; color: #fff; }
.qlegy .qlg-mk-mob-status { width: 60px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; margin: 0 auto 12px; }
.qlegy .qlg-mk-mob-h { font-size: 18px; letter-spacing: -0.02em; }
.qlegy .qlg-mk-mob-card { margin-top: 12px; padding: 10px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.qlegy .qlg-mk-mob-l { font-size: 9px; opacity: 0.6; font-family: var(--qlegy-mono); }
.qlegy .qlg-mk-mob-v { font-size: 12px; margin-top: 2px; }
.qlegy .qlg-mk-mob-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.qlegy .qlg-mk-mob-list > div { height: 18px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.qlegy .qlg-mk-mob-cta { margin-top: auto; padding: 8px; border-radius: 99px; text-align: center; color: #000; font-size: 11px; font-weight: 500; }

.qlegy .qlg-mock-book { gap: 12px; }
.qlegy .qlg-mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; flex: 1; }
.qlegy .qlg-mk-cell { background: rgba(255, 255, 255, 0.03); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--qlegy-mono); font-size: 9px; color: rgba(255, 255, 255, 0.6); }
.qlegy .qlg-mk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qlegy .qlg-mk-slots > div { padding: 12px 0; text-align: center; background: rgba(255, 255, 255, 0.04); border-radius: 8px; font-family: var(--qlegy-mono); font-size: 11px; color: rgba(255, 255, 255, 0.75); }

.qlegy .qlg-mock-travel { gap: 16px; color: #fff; }
.qlegy .qlg-mk-tr-hero { padding: 24px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); flex: 1; }
.qlegy .qlg-mk-tr-h1 { font-size: 24px; letter-spacing: -0.02em; }
.qlegy .qlg-mk-tr-from { font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.03em; margin-top: 16px; }
.qlegy .qlg-mk-tr-time { font-family: var(--qlegy-mono); font-size: 12px; opacity: 0.7; margin-top: 4px; letter-spacing: 0.06em; }
.qlegy .qlg-mk-tr-pass { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.qlegy .qlg-mk-tr-pass > div { aspect-ratio: 1; background: rgba(255, 255, 255, 0.06); border-radius: 4px; }

/* Featured-image replacement inside cards — theme-class prefixed so it beats .elementor img */
.qlegy .qlg-card-media__img,
.qlegy .qlg-mock .qlg-card-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}