:root { --bg:#f4f5f8; --card:#fff; --ink:#13151c; --muted:#667085; --line:#e7eaf2; --soft:#f7f8fc; --blue:#5f6fff; --pink:#ff5ea8; --shadow:0 24px 70px rgba(20,24,38,.08) }
* { box-sizing:border-box }
html,body { max-width:100%; overflow-x:hidden }
body {
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:radial-gradient(circle at top right,rgba(95,111,255,.08),transparent 18%),radial-gradient(circle at top left,rgba(255,94,168,.06),transparent 18%),var(--bg);
    color:var(--ink)
}
img { max-width:100%; display:block }
.ft-wrap,.ft-hero,.ft-section,.ft-cta { width:min(1230px,calc(100% - 36px)); margin:0 auto }
.ft-kicker {
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    background:#eef1ff;
    color:var(--blue);
    font-size:11px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase
}
.ft-heading { text-align:center; max-width:860px; margin:0 auto 36px }
.ft-heading h2 { margin:14px 0 10px; font-size:clamp(34px,4.9vw,58px); line-height:1.04; letter-spacing:-.05em }
.ft-heading p { margin:0; color:var(--muted); font-size:15px; line-height:1.85 }
.ft-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:42px; padding:76px 0 72px }
.ft-hero-copy h1 { margin:0; font-size:clamp(46px,6.2vw,80px); line-height:.96; letter-spacing:-.06em }
.ft-hero-copy p { margin:20px 0 0; max-width:680px; color:var(--muted); font-size:16px; line-height:1.9 }
.ft-badges { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 }
.ft-badges span { padding:9px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:12px; font-weight:850 }
.ft-actions { display:flex; flex-wrap:wrap; gap:12px }
.ft-actions a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 18px;
    border-radius:14px;
    text-decoration:none;
    font-size:13px;
    font-weight:900
}
.ft-actions .primary { background:linear-gradient(100deg,var(--blue),var(--pink)); color:#fff; box-shadow:0 18px 42px rgba(95,111,255,.24) }
.ft-actions .ghost { background:#fff; border:1px solid var(--line); color:var(--ink) }
.ft-stage {
    position:relative;
    min-height:610px;
    padding:18px;
    border-radius:34px;
    background:linear-gradient(145deg,#fff,#eef2fb);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:hidden
}
.ft-stage:before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 15% 20%,rgba(255,94,168,.12),transparent 18%),radial-gradient(circle at 80% 16%,rgba(95,111,255,.14),transparent 18%),radial-gradient(circle at 70% 88%,rgba(101,197,255,.12),transparent 18%)
}
.hero-card { position:absolute; overflow:hidden; border-radius:26px; background:#fff; border:1px solid rgba(255,255,255,.65); box-shadow:0 24px 52px rgba(18,22,32,.14) }
.hero-card img.main { width:100%; height:100%; object-fit:cover }
.hero-card .thumb {
    position:absolute;
    left:12px;
    bottom:12px;
    width:76px;
    height:76px;
    padding:4px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 24px rgba(18,15,24,.16)
}
.hero-card .thumb img { width:100%; height:100%; object-fit:cover; border-radius:12px }
.hero-card .label {
    position:absolute;
    top:12px;
    right:12px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(17,18,25,.7);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase
}
.card-a { top:20px; left:24px; width:250px; height:360px; transform:rotate(-8deg) }
.card-b { top:58px; right:42px; width:284px; height:394px; transform:rotate(7deg) }
.card-c { left:150px; bottom:52px; width:260px; height:342px; transform:rotate(-2deg); z-index:2 }
.card-d { right:24px; bottom:28px; width:170px; height:220px; transform:rotate(10deg) }
.hero-stat {
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 15px;
    border-radius:17px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(231,234,242,.95);
    box-shadow:0 16px 32px rgba(18,22,32,.08)
}
.hero-stat i {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:14px;
    background:#eef1ff;
    color:var(--blue);
    font-style:normal;
    font-weight:900;
    font-size:14px
}
.hero-stat strong { display:block; font-size:14px }
.hero-stat span { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.55 }
.stat-a { left:24px; top:436px; max-width:235px }
.stat-b { right:26px; top:466px; max-width:226px }
.ft-section { padding:92px 0 }
.builder { padding:28px; border:1px solid var(--line); border-radius:32px; background:#fff; box-shadow:var(--shadow) }
.builder-grid { display:grid; grid-template-columns:410px 1fr; gap:24px }
.upload-box {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:320px;
    border:1.5px dashed #cfd6e7;
    border-radius:26px;
    background:linear-gradient(135deg,#fcfdff,#f5f7fb);
    overflow:hidden;
    cursor:pointer;
    transition:.22s
}
.upload-box:hover,.upload-box.drag { transform:translateY(-3px); border-color:var(--blue); box-shadow:0 18px 42px rgba(95,111,255,.14) }
.upload-box input { display:none }
.upload-empty { padding:24px; text-align:center }
.upload-empty .icon {
    display:grid;
    place-items:center;
    width:74px;
    height:74px;
    margin:0 auto 12px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 34px rgba(27,32,49,.12)
}
.upload-empty strong { font-size:18px }
.upload-empty span { display:block; margin-top:6px; color:var(--blue); font-size:12px; font-weight:900 }
.upload-empty small { display:block; max-width:260px; margin:12px auto 0; color:#8590a3; font-size:11px; line-height:1.6 }
.upload-preview { position:absolute; inset:0; padding:12px }
.upload-preview[hidden] { display:none }
.upload-preview img { width:100%; height:100%; object-fit:contain; border-radius:18px }
.change-btn {
    position:absolute;
    right:16px;
    bottom:16px;
    min-height:38px;
    padding:0 14px;
    border:0;
    border-radius:999px;
    background:rgba(19,22,31,.82);
    color:#fff;
    font-size:11px;
    font-weight:800;
    cursor:pointer
}
.upload-tip { margin-top:16px; padding:16px 18px; border-radius:18px; background:var(--soft) }
.upload-tip b { font-size:12px }
.upload-tip ul { margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.8 }
.builder-main h3 { margin:0; font-size:32px; letter-spacing:-.03em }
.builder-main p { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.85 }
.field { margin-top:18px }
.field label { display:block; margin-bottom:10px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase }
.chip-wrap { display:flex; flex-wrap:wrap; gap:8px }
.chip-wrap button,.filter-tabs button {
    min-height:40px;
    padding:0 13px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#4e5565;
    font-size:12px;
    font-weight:850;
    cursor:pointer
}
.chip-wrap button.active,.filter-tabs button.active { border-color:var(--blue); background:#eef1ff; color:var(--blue) }
.select-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.select-grid label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:800 }
.select-grid select,.builder textarea { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; outline:none }
.select-grid select { min-height:46px; padding:0 12px; border-radius:12px }
.builder textarea { min-height:150px; padding:16px; border-radius:18px; line-height:1.72; resize:vertical }
.builder textarea:focus,.select-grid select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(95,111,255,.1) }
.action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px }
.action-row button,.action-row a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 18px;
    border-radius:15px;
    font-size:13px;
    font-weight:900;
    text-decoration:none
}
.action-row button { border:0; background:linear-gradient(100deg,var(--blue),var(--pink)); color:#fff; cursor:pointer; box-shadow:0 15px 38px rgba(95,111,255,.22) }
.action-row a { border:1px solid var(--line); background:#fff; color:var(--ink) }
.helper { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.75 }
.filter-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 30px }
.example-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
.card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(18,15,24,.04) }
.card-media { position:relative; aspect-ratio:1/1.08; background:#e9ecf4 }
.card-media img.main { width:100%; height:100%; object-fit:cover }
.card-media .thumb {
    position:absolute;
    left:12px;
    bottom:12px;
    width:76px;
    height:76px;
    padding:4px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 24px rgba(18,15,24,.16)
}
.card-media .thumb img { width:100%; height:100%; object-fit:cover; border-radius:12px }
.overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(transparent 35%,rgba(17,18,24,.82));
    opacity:0;
    transition:.2s
}
.card:hover .overlay { opacity:1 }
.overlay a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-size:11px;
    font-weight:900;
    text-decoration:none
}
.card-copy { padding:12px; position:relative }
.card-copy p { margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#666b79; font-size:13px; line-height:1.6; cursor:pointer }
.copy-tip { position:absolute; right:12px; top:10px; color:#98a1b2; font-size:11px }
.impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.impact-card { padding:24px; border:1px solid var(--line); border-radius:22px; background:#fff }
.impact-card strong { display:block; font-size:42px; line-height:1; color:var(--blue) }
.impact-card h3 { margin:14px 0 8px; font-size:18px }
.impact-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.78 }
.story-list { display:grid; gap:48px; margin-top:36px }
.story { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center }
.story.reverse .media { order:2 }
.story.reverse .copy { order:1 }
.story-card { position:relative; padding:14px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow) }
.story-card .main { width:100%; aspect-ratio:1/.78; object-fit:cover; border-radius:20px }
.story-card .thumb {
    position:absolute;
    right:22px;
    bottom:22px;
    width:110px;
    height:110px;
    padding:8px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 16px 36px rgba(18,15,24,.14)
}
.story-card .thumb img { width:100%; height:100%; object-fit:cover; border-radius:14px }
.story .copy h3 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.04; letter-spacing:-.04em }
.story .copy p { margin:18px 0 0; color:var(--muted); font-size:16px; line-height:1.9 }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.step { padding:24px; border:1px solid var(--line); border-radius:24px; background:#fff }
.step .num { display:grid; place-items:center; width:46px; height:46px; border-radius:16px; background:#eef1ff; color:var(--blue); font-size:18px; font-weight:900 }
.step h3 { margin:14px 0 10px; font-size:24px; letter-spacing:-.02em }
.step p { margin:0; color:var(--muted); font-size:14px; line-height:1.82 }
.faq-list { max-width:980px; margin:0 auto; border-top:1px solid var(--line) }
.faq-list details { border-bottom:1px solid var(--line) }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; padding:22px 0; list-style:none; cursor:pointer; font-weight:900 }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list p { margin:-4px 0 22px; color:var(--muted); font-size:14px; line-height:1.8 }
.ft-cta { padding:88px 0 108px; text-align:center }
.ft-cta .inner { padding:48px 24px; border-radius:32px; background:linear-gradient(130deg,#edf1ff,#fff0f7); border:1px solid #e6e9f4 }
.ft-cta h2 { margin:14px 0 12px; font-size:clamp(36px,5vw,64px); letter-spacing:-.05em }
.ft-cta p { max-width:780px; margin:0 auto 26px; color:var(--muted); line-height:1.85; font-size:15px }
.ft-cta a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 22px;
    border-radius:15px;
    background:linear-gradient(100deg,var(--blue),var(--pink));
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    box-shadow:0 16px 38px rgba(95,111,255,.24)
}
@media(max-width:1080px) {
    .ft-hero { grid-template-columns:1fr }
    .ft-hero-copy { text-align:center }
    .ft-hero-copy p { margin-left:auto; margin-right:auto }
    .ft-badges,.ft-actions { justify-content:center }
    .ft-stage { max-width:760px; margin:auto }
    .builder-grid,.story { grid-template-columns:1fr }
    .story.reverse .media,.story.reverse .copy { order:initial }
    .select-grid { grid-template-columns:repeat(2,1fr) }
    .example-grid { grid-template-columns:repeat(3,1fr) }
    .impact-grid { grid-template-columns:repeat(2,1fr) }
    .step-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:680px) {
    .ft-wrap,.ft-hero,.ft-section,.ft-cta { width:calc(100% - 20px) }
    .ft-hero { padding:46px 0 52px; gap:30px }
    .ft-hero-copy h1 { font-size:46px }
    .ft-hero-copy p { font-size:14px }
    .ft-stage { min-height:500px; padding:14px; border-radius:24px }
    .card-a { top:18px; left:12px; width:150px; height:210px }
    .card-b { top:40px; right:14px; width:165px; height:236px }
    .card-c { left:76px; bottom:88px; width:170px; height:228px }
    .card-d { right:14px; bottom:46px; width:108px; height:150px }
    .hero-card .thumb { width:54px; height:54px; left:8px; bottom:8px; padding:3px; border-radius:12px }
    .hero-stat { padding:10px 11px; border-radius:14px }
    .hero-stat i { width:34px; height:34px; border-radius:12px; font-size:12px }
    .hero-stat strong { font-size:13px }
    .hero-stat span { font-size:11px }
    .stat-a { left:12px; top:auto; bottom:14px; right:164px; max-width:none }
    .stat-b { right:12px; top:auto; bottom:14px; left:auto; width:144px; max-width:none }
    .builder { padding:14px; border-radius:20px }
    .upload-box { min-height:240px }
    .select-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
    .select-grid label span { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .select-grid select { padding:0 5px; font-size:10px }
    .example-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
    .card-copy { padding:10px }
    .card-copy p { font-size:11px }
    .card-media .thumb { width:58px; height:58px; left:8px; bottom:8px }
    .impact-grid,.step-grid { grid-template-columns:1fr }
    .story-list { gap:34px }
    .story-card { padding:10px; border-radius:20px }
    .story-card .thumb { right:14px; bottom:14px; width:82px; height:82px; padding:6px; border-radius:16px }
    .story .copy h3,.ft-heading h2 { font-size:35px }
    .story .copy p { font-size:14px }
    .ft-cta { padding:70px 0 82px }
}



/* T67_FASHION_HERO_MOBILE_GRID_V3 */
@media (max-width:720px){
  .ft-page .ft-stage{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    padding:10px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .ft-page .ft-stage:before{pointer-events:none!important;z-index:0!important}
  .ft-page .ft-stage > .hero-card,
  .ft-page .ft-stage > .hero-card.card-a,
  .ft-page .ft-stage > .hero-card.card-b,
  .ft-page .ft-stage > .hero-card.card-c,
  .ft-page .ft-stage > .hero-card.card-d{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3/4!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    z-index:1!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }
  .ft-page .ft-stage > .hero-card > img.main{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .ft-page .ft-stage > .hero-card .thumb{
    position:absolute!important;
    left:7px!important;
    right:auto!important;
    top:auto!important;
    bottom:7px!important;
    display:block!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:2px!important;
    z-index:3!important;
  }
  .ft-page .ft-stage > .hero-card .thumb img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .ft-page .ft-stage > .hero-card .label{
    display:block!important;
    z-index:3!important;
  }
  .ft-page .ft-stage > .hero-stat{display:none!important}
}


/* direct workbench upgrades */
.ft-workbench{padding:0}.ft-workbench .pd-grid{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(360px,1.26fr)}
.ft-workbench .pd-panel{border-radius:18px}.ft-workbench .pd-drop{min-height:318px;border-radius:14px}
.ft-workbench .pd-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.ft-workbench .pd-controls select{height:36px;padding:0 8px;border-radius:10px;font-size:10px}
.ft-workbench .pd-prompt textarea{min-height:150px}.ft-workbench .pd-credit{margin-top:10px}.ft-workbench .pd-results{margin-top:18px}
#examples .filter-tabs{display:none!important}
@media (max-width:1050px){.ft-workbench .pd-grid{grid-template-columns:1fr 1fr}.ft-workbench .pd-director{grid-column:1/-1}}
@media (max-width:680px){.ft-workbench .pd-grid{grid-template-columns:1fr 1fr;gap:8px}.ft-workbench .pd-panel{padding:10px;border-radius:16px}.ft-workbench .pd-drop{min-height:210px}.ft-workbench .pd-director{grid-column:1/-1}.ft-workbench .pd-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.ft-workbench .pd-controls select{height:34px;padding:0 6px;font-size:10px}.ft-workbench .pd-prompt textarea{min-height:132px}}

/* Tool67 image-page dark compatibility patch — visual only */
html[data-theme="dark"],body.dark{--bg:#0b0e13;--card:#151a22;--ink:#f4f6f8;--muted:#a3acb8;--line:#303846;--soft:#111722;--shadow:0 18px 48px rgba(0,0,0,.28);}
body.dark .ft-badges span,body.dark .ft-actions .ghost,body.dark .hero-card,body.dark .hero-card .thumb,body.dark .builder,body.dark .upload-empty .icon,body.dark .chip-wrap button,body.dark .filter-tabs button,body.dark .select-grid select,body.dark .builder textarea,body.dark .action-row a,body.dark .card,body.dark .card-media .thumb,body.dark .overlay a,body.dark .impact-card,body.dark .story-card,body.dark .story-card .thumb,body.dark .step{background:#151a22!important;border-color:#303846!important;color:#e5e7eb;}
body.dark input,body.dark select,body.dark textarea{background-color:#111722;color:#e5e7eb;border-color:#303846;}
body.dark input::placeholder,body.dark textarea::placeholder{color:#7f8a99;}