/* =============================================================================
   OGP Studio — app-specific styles (loaded after base.css)
   Accent: violet / creative. Dark by default (html[data-theme="dark"]).
   ========================================================================== */

:root {
  --accent: 262 83% 64%;
  --accent-strong: 262 80% 56%;
  --accent-soft: 262 60% 18%;
  --accent-ink: 0 0% 100%;
  --accent-ring: 262 83% 64% / 0.4;
}
[data-theme="light"] {
  --accent-soft: 262 90% 96%;
}

/* ----------------------------------------------------------------------------
   Landing
   ------------------------------------------------------------------------- */
.lp-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--bg) / 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.lp-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lp-nav__links { display: flex; align-items: center; gap: var(--s-5); }
.lp-nav__links a { color: hsl(var(--ink-2)); font-size: var(--text-md); font-weight: 550; transition: color var(--dur-2) var(--ease); }
.lp-nav__links a:hover { color: hsl(var(--ink)); }
@media (max-width: 720px) { .lp-nav__links .lp-nav__hide { display: none; } }

.brand-mark { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 700; letter-spacing: -0.02em; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-mark b { font-size: var(--text-lg); }
.brand-mark .tag { font-size: var(--text-2xs); color: hsl(var(--accent-strong)); font-weight: 650; letter-spacing: 0.06em; }

.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 480px; z-index: 0;
  background:
    radial-gradient(60% 80% at 20% 0%, hsl(262 83% 64% / 0.22), transparent 60%),
    radial-gradient(50% 70% at 85% 10%, hsl(212 90% 60% / 0.16), transparent 60%);
  filter: blur(8px); pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero h1 .accent { color: hsl(var(--accent-strong)); }
.hero .lead { max-width: 52ch; margin-top: var(--s-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-10); }
.hero__stats .stat-value { font-size: var(--text-3xl); }

.hero__preview {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-2xl);
  background: hsl(var(--surface));
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.hero__preview canvas { width: 100%; height: auto; display: block; }

.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section--alt { background: hsl(var(--bg-subtle)); border-block: 1px solid hsl(var(--border)); }
.section__head { max-width: 640px; margin-bottom: var(--s-8); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.feature {
  padding: var(--s-6); border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
  background: hsl(var(--surface)); transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.feature:hover { border-color: hsl(var(--accent) / 0.4); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature__ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md);
  background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong)); margin-bottom: var(--s-4);
}
.feature__ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
.feature p { color: hsl(var(--ink-3)); font-size: var(--text-md); line-height: 1.65; }

/* gallery cards on landing */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
.gallery-card { border: 1px solid hsl(var(--border)); border-radius: var(--r-lg); overflow: hidden; background: hsl(var(--surface)); }
.gallery-card canvas { width: 100%; height: auto; display: block; background: hsl(var(--bg-muted)); }
.gallery-card__meta { padding: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); max-width: 760px; margin-inline: auto; }
.price-card { position: relative; padding: var(--s-7); border: 1px solid hsl(var(--border)); border-radius: var(--r-xl); background: hsl(var(--surface)); display: flex; flex-direction: column; gap: var(--s-5); }
.price-card--pro { border-color: hsl(var(--accent) / 0.5); box-shadow: var(--shadow-lg); }
.price-card__amount { display: flex; align-items: baseline; gap: var(--s-2); }
.price-card__amount b { font-size: var(--text-4xl); letter-spacing: -0.03em; }
.price-card ul { display: flex; flex-direction: column; gap: var(--s-3); }
.price-card li { display: flex; gap: var(--s-3); align-items: flex-start; color: hsl(var(--ink-2)); font-size: var(--text-md); }
.price-card li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: hsl(var(--accent-strong)); }
.price-card li.off { color: hsl(var(--ink-4)); }
.price-card li.off svg { color: hsl(var(--ink-4)); }

.lp-footer { border-top: 1px solid hsl(var(--border)); padding: var(--s-10) 0 var(--s-12); background: hsl(var(--bg-subtle)); }
.lp-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-8); }
.lp-footer h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--ink-3)); margin-bottom: var(--s-4); }
.lp-footer a { display: block; color: hsl(var(--ink-2)); font-size: var(--text-md); padding: var(--s-1) 0; transition: color var(--dur-2) var(--ease); }
.lp-footer a:hover { color: hsl(var(--ink)); }
@media (max-width: 720px) { .lp-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------------------
   Editor (app.html)
   ------------------------------------------------------------------------- */
.editor {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  height: 100vh;
  overflow: hidden;
}
.editor__col { overflow-y: auto; overflow-x: hidden; height: 100vh; }
.editor__col--controls { border-right: 1px solid hsl(var(--border)); background: hsl(var(--surface)); }
.editor__col--stage { background: hsl(var(--bg-subtle)); display: flex; flex-direction: column; min-width: 0; }
.editor__col--templates { border-left: 1px solid hsl(var(--border)); background: hsl(var(--surface)); }

.editor__bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--surface) / 0.86);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.editor__bar h2 { font-size: var(--text-md); font-weight: 650; }

.editor__group { padding: var(--s-4); border-bottom: 1px solid hsl(var(--border)); }
.editor__group > .group-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; padding: 0; margin-bottom: var(--s-3);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; color: hsl(var(--ink-3));
  cursor: pointer; background: none;
}
.editor__group > .group-head .chev { transition: transform var(--dur-2) var(--ease); }
.editor__group.collapsed > .group-head .chev { transform: rotate(-90deg); }
.editor__group.collapsed > .group-body { display: none; }
.group-body { display: flex; flex-direction: column; gap: var(--s-4); }

/* stage / preview */
.stage {
  flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--s-6);
  background-image:
    linear-gradient(45deg, hsl(var(--bg-muted)) 25%, transparent 25%),
    linear-gradient(-45deg, hsl(var(--bg-muted)) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, hsl(var(--bg-muted)) 75%),
    linear-gradient(-45deg, transparent 75%, hsl(var(--bg-muted)) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  overflow: auto;
}
.stage__frame {
  position: relative; max-width: 100%;
  box-shadow: var(--shadow-xl);
  border-radius: var(--r-sm);
  overflow: hidden;
  outline: 1px solid hsl(var(--border));
}
.stage__frame canvas { display: block; max-width: 100%; height: auto; }

.editor__statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-top: 1px solid hsl(var(--border));
  background: hsl(var(--surface)); font-size: var(--text-sm); color: hsl(var(--ink-3));
}
.zoom-control { display: inline-flex; align-items: center; gap: var(--s-2); }

/* range slider */
.slider-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
input[type="range"].range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: hsl(var(--border-strong)); outline: none; cursor: pointer;
}
input[type="range"].range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: hsl(var(--accent)); border: 2px solid hsl(var(--surface)); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-1) var(--ease);
}
input[type="range"].range::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: hsl(var(--accent));
  border: 2px solid hsl(var(--surface)); box-shadow: var(--shadow-sm);
}
.slider-row .val { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: hsl(var(--ink-2)); min-width: 46px; text-align: right; }

/* color swatches */
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.swatch {
  width: 28px; height: 28px; border-radius: var(--r-sm); border: 2px solid hsl(var(--border));
  cursor: pointer; transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  position: relative;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--accent) / 0.3); }
.swatch--custom { display: grid; place-items: center; color: hsl(var(--ink-3)); }
.swatch--custom input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* template tiles */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tpl-tile {
  border: 1px solid hsl(var(--border)); border-radius: var(--r-md); overflow: hidden; background: hsl(var(--bg-muted));
  cursor: pointer; transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  text-align: left; padding: 0;
}
.tpl-tile:hover { border-color: hsl(var(--accent) / 0.5); transform: translateY(-1px); }
.tpl-tile[aria-pressed="true"] { border-color: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--accent) / 0.25); }
.tpl-tile canvas { width: 100%; height: auto; display: block; }
.tpl-tile .tpl-name { display: block; padding: var(--s-2) var(--s-3); font-size: var(--text-xs); font-weight: 550; color: hsl(var(--ink-2)); }

.preset-card {
  display: flex; gap: var(--s-3); align-items: center; width: 100%; text-align: left;
  padding: var(--s-2); border: 1px solid hsl(var(--border)); border-radius: var(--r-md); background: hsl(var(--bg-subtle));
  cursor: pointer; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.preset-card:hover { border-color: hsl(var(--accent) / 0.4); background: hsl(var(--surface)); }
.preset-card canvas { width: 72px; height: auto; border-radius: var(--r-xs); flex: none; }
.preset-card__txt { min-width: 0; }
.preset-card__txt b { font-size: var(--text-sm); display: block; }
.preset-card__txt span { font-size: var(--text-xs); color: hsl(var(--ink-3)); }

.saved-row { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2); border-radius: var(--r-sm); }
.saved-row:hover { background: hsl(var(--bg-subtle)); }
.saved-row canvas { width: 56px; height: auto; border-radius: var(--r-xs); border: 1px solid hsl(var(--border)); flex: none; }

/* mobile editor: stack columns, panels become toggleable drawers via buttons */
.editor__mobtabs { display: none; }
@media (max-width: 1080px) {
  .editor { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; }
  .editor__col { height: auto; }
  .editor__col--stage { order: -1; height: 100vh; }
  .editor__col--controls, .editor__col--templates {
    position: fixed; top: 0; bottom: 0; width: min(340px, 88vw); z-index: var(--z-overlay);
    box-shadow: var(--shadow-xl); transform: translateX(-100%); transition: transform var(--dur-3) var(--ease);
    height: 100vh;
  }
  .editor__col--controls { left: 0; }
  .editor__col--templates { right: 0; left: auto; border-left: 1px solid hsl(var(--border)); border-right: none; transform: translateX(100%); }
  .editor__col--controls.open, .editor__col--templates.open { transform: none; }
  .editor__scrim { position: fixed; inset: 0; background: hsl(240 30% 8% / 0.5); z-index: 99; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
  .editor__scrim.open { opacity: 1; pointer-events: auto; }
  .editor__mobtabs { display: flex; }
}

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }
}

.kbd-hint { display: inline-flex; gap: 4px; align-items: center; color: hsl(var(--ink-3)); font-size: var(--text-xs); }

.watermark-note { font-size: var(--text-xs); color: hsl(var(--ink-3)); display: flex; align-items: center; gap: var(--s-2); }

.toolbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: hsl(var(--ink-2)); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.toolbtn:hover { background: hsl(var(--bg-muted)); color: hsl(var(--ink)); }
.toolbtn svg { width: 19px; height: 19px; }

.field-inline { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; }
.field-inline > label { font-size: var(--text-md); color: hsl(var(--ink-2)); }

.legal-body { max-width: 760px; margin-inline: auto; padding: var(--s-12) var(--s-6) var(--s-16); }
.legal-body h1 { font-size: var(--text-3xl); margin-bottom: var(--s-2); }
.legal-body h2 { font-size: var(--text-xl); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.legal-body p, .legal-body li { color: hsl(var(--ink-2)); line-height: 1.8; }
.legal-body ul { padding-left: var(--s-5); list-style: disc; display: flex; flex-direction: column; gap: var(--s-2); }
.legal-body .updated { color: hsl(var(--ink-3)); font-size: var(--text-sm); }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.legal-table th { width: 30%; color: hsl(var(--ink-3)); font-weight: 600; }