/* OwnAI v5 — Master Generator, ads helpers, blog, shared pages
   Uses the CSS variables defined in style.css (light + dark themes). */

/* ---------- footer additions ---------- */
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-powered{ font-size:13px; color:var(--text-dim); }
.footer-powered a{ color:var(--violet); font-weight:700; }
.footer-powered a:hover{ text-decoration:underline; }

/* ---------- hero ---------- */
.mg-hero{ padding-bottom:26px; position:relative; overflow:hidden; }
.mg-hero h1{ max-width:900px; }
.hero-orbit{ position:absolute; top:50%; left:50%; width:min(900px,140vw); height:min(900px,140vw); transform:translate(-50%,-50%); z-index:-1; opacity:0.9; pointer-events:none; }
.hero-orbit svg{ width:100%; height:100%; }
.orbit-spin-slow{ transform-origin:300px 300px; animation: orbitSpin 34s linear infinite; }
.orbit-spin-rev{ transform-origin:300px 300px; animation: orbitSpin 26s linear infinite reverse; }
.orbit-spin-slow2{ transform-origin:300px 300px; animation: orbitSpin 42s linear infinite; }
@keyframes orbitSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
html[data-theme="dark"] .hero-orbit{ opacity:0.6; }
@media (prefers-reduced-motion: reduce){ .orbit-spin-slow, .orbit-spin-rev, .orbit-spin-slow2{ animation:none; } }
@media (max-width:640px){ .hero-orbit{ opacity:0.5; } }

/* ---------- generator app ---------- */
.mg-app-wrap{ padding:6px 0 30px; }
.mg-app{ max-width:820px; margin:0 auto; background: var(--glass-bg); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border:1px solid var(--glass-border); border-radius:26px; padding:26px; box-shadow: var(--shadow-lift); position:relative; z-index:2; }
.mg-app::before{ content:''; position:absolute; inset:-1px; border-radius:26px; padding:1px; background: var(--grad-brand); opacity:0.35; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.mg-steps{ list-style:none; display:flex; gap:8px; margin:0 0 22px; padding:0; justify-content:center; flex-wrap:wrap; }
.mg-steps li{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text-dim); padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface-2); }
.mg-steps li span{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:50%; background:var(--border); color:var(--text); font-size:11px; }
.mg-steps li.active{ color:var(--violet); border-color:var(--violet); background:rgba(108,92,231,0.08); }
.mg-steps li.active span{ background:var(--violet); color:#fff; }
.mg-steps li.done span{ background:var(--mint); color:#0b2b27; }

.mg-panel[hidden], .mg-loader[hidden], .mg-error[hidden], #mgResultAd[hidden]{ display:none !important; }
.mg-label{ display:block; font-size:14px; font-weight:700; color:var(--indigo); margin-bottom:10px; }
.mg-app textarea, .mg-app input[type=text], .mg-app select{
  width:100%; background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:14px 16px; color:var(--text);
  font-family:inherit; font-size:15px; line-height:1.55; outline:none; transition:border-color .15s, box-shadow .15s;
}
.mg-app textarea{ resize:vertical; min-height:96px; }
.mg-app textarea:focus, .mg-app input[type=text]:focus, .mg-app select:focus{ border-color:var(--violet); box-shadow:0 0 0 4px rgba(108,92,231,0.12); }
.mg-btn-primary{ width:100%; margin-top:14px; background:var(--grad-brand); color:#fff; border:none; border-radius:12px; padding:15px 20px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 12px 28px -14px rgba(108,92,231,0.6); transition:transform .15s, box-shadow .15s, opacity .15s; }
.mg-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(255,107,157,0.6); }
.mg-btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.mg-btn{ background:var(--surface); color:var(--indigo); border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s, background .15s; display:inline-flex; align-items:center; gap:6px; }
.mg-btn:hover{ border-color:var(--violet); color:var(--violet); }
.mg-btn.primary{ background:var(--violet); color:#fff; border-color:var(--violet); }
.mg-btn.primary:hover{ background:#5b4bd6; color:#fff; }
.mg-btn:disabled{ opacity:.55; cursor:not-allowed; }
.mg-btn-link{ background:none; border:none; color:var(--violet); font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; padding:8px 4px; }
.mg-btn-link:hover{ text-decoration:underline; }

.mg-examples{ margin-top:20px; }
.mg-examples-title{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; }
.mg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mg-chip{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:20px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.mg-chip:hover{ border-color:var(--violet); color:var(--violet); background:rgba(108,92,231,0.07); transform:translateY(-1px); }

.mg-use-banner{ display:flex; justify-content:space-between; gap:12px; align-items:center; background:rgba(46,217,195,0.12); border:1px solid rgba(46,217,195,0.45); border-radius:12px; padding:10px 14px; font-size:13px; margin-bottom:16px; }
.mg-use-banner[hidden]{ display:none; }
.mg-use-banner a{ color:var(--violet); font-weight:700; white-space:nowrap; }

/* loader / error */
.mg-loader{ text-align:center; padding:34px 10px 26px; }
.mg-loader-text{ margin-top:8px; font-weight:700; color:var(--indigo); font-size:14.5px; }
.mg-error{ margin-top:16px; background:rgba(255,107,157,0.1); border:1px solid rgba(255,107,157,0.5); color:var(--text); border-radius:12px; padding:14px 16px; font-size:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

/* step 2 */
.mg-intent{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; padding:12px 14px; background:var(--surface-2); border-radius:12px; border:1px solid var(--border); }
.mg-intent-title{ font-size:12px; font-weight:800; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; margin-right:6px; }
.mg-tag{ font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:16px; background:var(--surface); border:1px solid var(--border); color:var(--indigo); }
.mg-tag b{ color:var(--violet); font-weight:800; margin-right:4px; }
.mg-h2{ font-family:'Sora',sans-serif; font-size:19px; color:var(--indigo); margin:0 0 4px; }
.mg-sub{ color:var(--text-dim); font-size:13.5px; margin-bottom:18px; }
.mg-q{ border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; background:var(--bg); }
.mg-q-label{ font-size:14.5px; font-weight:700; color:var(--indigo); margin-bottom:10px; }
.mg-q-num{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--violet); color:#fff; align-items:center; justify-content:center; font-size:11.5px; margin-right:8px; }
.mg-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.mg-opt{ background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:9px 14px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--text); font-family:inherit; transition:all .12s; }
.mg-opt:hover{ border-color:var(--violet); }
.mg-opt.selected{ background:rgba(108,92,231,0.12); border-color:var(--violet); color:var(--violet); }
.mg-opt.selected::before{ content:"✓ "; }
.mg-other-input{ margin-top:10px; }
.mg-options-box{ border:1px dashed var(--border); border-radius:14px; padding:16px; margin:18px 0 6px; }
.mg-options-title{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
.mg-styles{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.mg-style{ text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:10px 12px; cursor:pointer; font-family:inherit; color:var(--text); transition:all .12s; }
.mg-style:hover{ border-color:var(--violet); }
.mg-style .st{ display:block; font-weight:800; font-size:13.5px; color:var(--indigo); }
.mg-style .sd{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.35; }
.mg-style.selected{ border-color:var(--violet); background:rgba(108,92,231,0.1); }
.mg-style.selected .st{ color:var(--violet); }
.mg-style.selected .st::before{ content:"● "; }
.mg-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mg-lang-field{ max-width:260px; }
.mg-field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--indigo); margin-bottom:6px; }
.mg-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }
.mg-actions .mg-btn-primary{ width:auto; margin-top:0; flex:1 1 220px; }

/* step 3 */
.mg-ready{ font-family:'Sora',sans-serif; font-weight:800; font-size:14px; letter-spacing:.08em; color:var(--violet); text-align:center; margin-bottom:14px; }
.mg-result-meta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.mg-result-box{ background:var(--bg); border:1.5px solid var(--border); border-radius:16px; padding:20px; max-height:520px; overflow:auto; position:relative; }
.mg-result-box pre{ white-space:pre-wrap; word-wrap:break-word; font-family:'JetBrains Mono','Inter',monospace; font-size:13.5px; line-height:1.75; color:var(--text); margin:0; outline:none; }
.mg-result-box pre[contenteditable="true"]{ box-shadow:0 0 0 3px rgba(108,92,231,0.25); border-radius:6px; }
.mg-result-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; justify-content:center; }
.mg-result-actions .mg-btn.primary{ padding:12px 22px; font-size:14px; }
.mg-menu{ position:relative; display:inline-block; }
.mg-menu-list{ position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 34px -14px rgba(33,29,79,0.35); padding:6px; z-index:20; min-width:170px; display:none; }
.mg-menu.open .mg-menu-list{ display:block; }
.mg-menu-list button{ display:block; width:100%; text-align:left; background:none; border:none; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); font-family:inherit; }
.mg-menu-list button:hover{ background:var(--surface-2); color:var(--violet); }
.mg-improve-box, .mg-compare-box, .mg-run-box, .mg-share-box{ margin-top:16px; border:1px solid var(--border); border-radius:14px; padding:16px; background:var(--surface-2); }
.mg-box-title{ font-weight:800; color:var(--indigo); font-size:14px; margin-bottom:10px; }
.mg-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mg-compare-col{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; }
.mg-compare-col h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); margin:0 0 8px; }
.mg-compare-col pre{ white-space:pre-wrap; word-wrap:break-word; font-family:inherit; font-size:12.5px; line-height:1.6; margin:0; max-height:220px; overflow:auto; color:var(--text); }
.mg-why{ margin-top:14px; }
.mg-why ul{ margin:8px 0 0 18px; }
.mg-why li{ margin-bottom:6px; font-size:13.5px; color:var(--text); }
.mg-tipline{ margin-top:10px; font-size:13px; color:var(--text-dim); }
.mg-tipline strong{ color:var(--violet); }
.mg-run-out{ white-space:pre-wrap; word-wrap:break-word; font-size:14px; line-height:1.7; margin:0; color:var(--text); font-family:inherit; max-height:420px; overflow:auto; }
.mg-share-row{ display:flex; gap:8px; }
.mg-share-row input{ flex:1; }
.mg-toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--indigo-fixed-dark); color:#fff; padding:10px 18px; border-radius:24px; font-size:13.5px; font-weight:700; z-index:200; box-shadow:0 12px 30px -10px rgba(0,0,0,0.4); }

/* ---------- landing content ---------- */
.mg-content{ max-width:820px; margin:0 auto; padding-top:20px; }
.mg-article h2{ font-family:'Sora',sans-serif; font-size:21px; color:var(--indigo); margin:28px 0 10px; }
.mg-article p{ color:var(--text-dim); line-height:1.85; font-size:15px; margin-bottom:14px; }
.mg-article ul{ margin:0 0 16px 20px; color:var(--text-dim); line-height:1.85; font-size:15px; }
.mg-article li{ margin-bottom:4px; }
.mg-article a{ color:var(--violet); font-weight:600; }

/* ---------- ads ---------- */
.ad-slot{ margin:24px auto; text-align:center; overflow:hidden; max-width:100%; }
.ad-slot:empty{ display:none; }
.ad-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }
.ad-slot img{ display:inline-block; }
.ad-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--surface); border-top:1px solid var(--border); text-align:center; padding:6px 30px 6px 6px; box-shadow:0 -8px 24px -14px rgba(0,0,0,0.35); }
.ad-sticky-close{ position:absolute; right:6px; top:2px; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:16px; line-height:1; }
.ad-direct-link{ display:inline-block; background:var(--grad-brand); color:#fff !important; padding:12px 24px; border-radius:10px; font-weight:800; }
@media (max-width:768px){ .ad-desktop-only{ display:none !important; } }
@media (min-width:769px){ .ad-mobile-only{ display:none !important; } }

/* ---------- blog v5 ---------- */
.blog-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.blog-toolbar input[type=text]{ flex:1 1 220px; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-family:inherit; font-size:14px; outline:none; }
.blog-toolbar input[type=text]:focus{ border-color:var(--violet); }
.blog-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--text-dim); margin-top:10px; }
.blog-card .blog-meta{ margin-top:12px; }
.blog-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
.blog-tag{ font-size:11.5px; font-weight:700; color:var(--violet); background:rgba(108,92,231,0.08); padding:3px 9px; border-radius:12px; }
.blog-pager{ display:flex; justify-content:space-between; gap:12px; margin-top:30px; }
.blog-pager a, .blog-pager span{ padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-weight:700; font-size:13.5px; color:var(--indigo); }
.blog-pager a:hover{ border-color:var(--violet); color:var(--violet); }
.blog-pager span{ opacity:.5; }
.blog-post-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--text-dim); font-size:13px; margin-bottom:22px; }
.blog-post-content h2{ font-family:'Sora',sans-serif; font-size:23px; color:var(--indigo); margin:30px 0 12px; }
.blog-post-content h3{ font-family:'Sora',sans-serif; font-size:18px; color:var(--indigo); margin:24px 0 10px; }
.blog-post-content ul, .blog-post-content ol{ margin:0 0 16px 22px; }
.blog-post-content li{ margin-bottom:6px; }
.blog-post-content img{ border-radius:12px; margin:16px 0; }
.blog-post-content a{ color:var(--violet); font-weight:600; }
.blog-post-content blockquote{ border-left:4px solid var(--violet); padding:6px 16px; margin:18px 0; color:var(--text); background:var(--surface-2); border-radius:0 10px 10px 0; }
.share-row{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; align-items:center; }
.share-row .lbl{ font-size:13px; font-weight:800; color:var(--indigo); margin-right:4px; }
.share-btn{ padding:8px 14px; border-radius:9px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--indigo); cursor:pointer; font-family:inherit; }
.share-btn:hover{ border-color:var(--violet); color:var(--violet); }
.blog-cta{ margin:32px 0; padding:26px; border-radius:18px; background:var(--grad-brand); color:#fff; text-align:center; }
.blog-cta h3{ font-family:'Sora',sans-serif; font-size:20px; margin-bottom:12px; color:#fff; }
.blog-cta a{ display:inline-block; background:#fff; color:#3b2fb5; font-weight:800; padding:11px 24px; border-radius:10px; }

/* ---------- prompt hub / library additions ---------- */
.compat-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0; }
.compat-row .lbl{ font-size:12.5px; font-weight:800; color:var(--indigo); }
.compat-chip{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:12px; background:rgba(46,217,195,0.14); color:#0d6b5f; border:1px solid rgba(46,217,195,0.4); }
html[data-theme="dark"] .compat-chip{ color:#7ff0de; }
.use-ownai-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--grad-brand); color:#fff !important; border-radius:10px; padding:11px 20px; font-weight:800; font-size:14px; margin-left:8px; box-shadow:0 10px 24px -14px rgba(108,92,231,0.6); }
.use-ownai-btn:hover{ transform:translateY(-1px); }
.hub-groups{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:26px; }
.hub-group{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-weight:700; font-size:13px; color:var(--indigo); transition:all .15s; }
.hub-group:hover{ border-color:var(--violet); color:var(--violet); transform:translateY(-2px); }

/* ---------- my prompts / share ---------- */
.mp-list{ display:grid; gap:14px; }
.mp-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; }
.mp-item h3{ font-size:15px; color:var(--indigo); margin-bottom:6px; font-family:'Sora',sans-serif; }
.mp-item pre{ white-space:pre-wrap; word-wrap:break-word; font-family:inherit; font-size:13px; line-height:1.65; color:var(--text-dim); max-height:160px; overflow:auto; margin:8px 0 12px; }
.mp-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.share-view{ max-width:820px; margin:0 auto; }

/* ---------- admin-facing helper used on public pages ---------- */
.notice-soft{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 16px; font-size:13.5px; color:var(--text-dim); }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .mg-styles{ grid-template-columns:repeat(2,1fr); }
  .hub-groups{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .mg-app{ padding:18px 14px; border-radius:18px; }
  .mg-row2, .mg-compare-grid{ grid-template-columns:1fr; }
  .mg-result-actions .mg-btn{ flex:1 1 44%; justify-content:center; }
  .mg-actions .mg-btn-primary{ flex:1 1 100%; }
  .use-ownai-btn{ margin-left:0; margin-top:8px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}