/* Reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:#1a1a1a;background:#fafafa;min-height:100vh;display:flex;flex-direction:column}
img,canvas{display:block;max-width:100%}
a{color:#c44536;text-decoration:underline;text-underline-offset:2px}
a:hover{color:#a1362a}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:#1a1a1a;color:#fff;padding:8px 16px;border-radius:4px;font-weight:600}
.skip-link:focus{left:8px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:100}
.header-inner{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1a1a1a;font-weight:700;font-size:1.1rem}
.logo svg{flex-shrink:0}
.nav-list{list-style:none;display:flex;gap:20px}
.nav-list a{text-decoration:none;color:#555;font-weight:500;font-size:0.95rem}
.nav-list a:hover{color:#c44536}

/* Main layout */
main{flex:1;max-width:1280px;margin:0 auto;padding:24px 20px 48px;width:100%}

/* Workspace */
.workspace-section{display:grid;grid-template-columns:1fr 340px;gap:24px;margin-bottom:40px}
@media(max-width:900px){.workspace-section{grid-template-columns:1fr}}

.canvas-panel{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:16px}
.canvas-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.canvas-header h1{font-size:1.25rem;font-weight:700}
.canvas-actions{display:flex;gap:8px}
.canvas-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#e0e0e0;border-radius:8px;overflow:hidden;cursor:default;max-height:450px}
.canvas-wrapper canvas{width:100%;height:100%;object-fit:contain}
.text-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:grab;user-select:none;padding:4px 12px;border-radius:4px;transition:outline 0.1s}
.text-overlay:active{cursor:grabbing}
.text-overlay span{font-family:'Impact','Arial Black',system-ui,sans-serif;font-size:72px;font-weight:900;color:#fff;text-shadow:3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000;line-height:1.1;display:block;text-align:center;word-break:break-word}
.canvas-hint{font-size:0.8rem;color:#777;margin-top:8px}

/* Controls */
.controls-panel{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto}
.control-group{display:flex;flex-direction:column;gap:4px}
.control-group label{font-weight:600;font-size:0.9rem;color:#333}
.control-group input[type="text"],.control-group select,.control-group input[type="color"]{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:0.95rem;width:100%;background:#fff}
.control-group input[type="range"]{width:100%}
.control-group input[type="color"]{height:36px;padding:2px;cursor:pointer}
#size-value{font-weight:400;color:#777;font-size:0.85rem}
.button-row{display:flex;gap:8px;margin-top:4px}

/* Buttons */
.btn{padding:10px 18px;border:none;border-radius:8px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:background 0.15s,opacity 0.15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:#c44536;color:#fff}
.btn-primary:hover{background:#a1362a}
.btn-outline{background:#fff;color:#c44536;border:1px solid #c44536}
.btn-outline:hover{background:#fef0ed}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* Variants */
.variants-section{margin-bottom:40px}
.variants-section h2{font-size:1.3rem;font-weight:700;margin-bottom:12px}
.variants-grid{display:flex;gap:12px;flex-wrap:wrap;min-height:80px;align-items:flex-start}
.empty-state{color:#999;font-size:0.95rem;padding:16px 0}
.variant-card{width:200px;border:2px solid #e5e5e5;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color 0.15s;background:#fff}
.variant-card.selected{border-color:#c44536}
.variant-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.variant-card .variant-label{font-size:0.8rem;padding:6px 8px;color:#555;display:flex;justify-content:space-between;align-items:center}
.variant-card .variant-label button{background:none;border:none;color:#c44536;cursor:pointer;font-size:0.8rem;font-weight:600}

/* Compare strip */
.compare-strip{margin-top:20px;padding:16px;background:#fff;border:1px solid #e5e5e5;border-radius:12px}
.compare-strip.hidden{display:none}
.compare-strip h3{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.compare-images{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.compare-images img{width:240px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid #e5e5e5}

/* Guide section */
.guide-section{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:24px}
.guide-section h2{font-size:1.4rem;font-weight:700;margin-bottom:12px}
.guide-section h3{font-size:1.15rem;font-weight:700;margin-top:20px;margin-bottom:8px}
.guide-section p,.guide-section li{font-size:0.95rem;color:#333;margin-bottom:10px;max-width:70ch}
.guide-section ul{padding-left:20px;margin-bottom:12px}
.guide-section li{margin-bottom:6px}

/* Footer */
.site-footer{background:#1a1a1a;color:#ccc;padding:24px 20px;margin-top:auto}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:0.85rem}
.footer-inner a{color:#f0a58b;text-decoration:none}
.footer-inner a:hover{text-decoration:underline}
.footer-version{color:#777;font-size:0.8rem}

/* Responsive */
@media(max-width:640px){
    .header-inner{flex-direction:column;align-items:flex-start}
    .canvas-wrapper{max-height:250px}
    .variant-card{width:140px}
    .compare-images img{width:140px}
    .text-overlay span{font-size:36px!important}
}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}