/* ============================================================
   Creator Media Tools — black-frame card UI (badge, heading,
   search box + upload, plan row, full-width action button).
   Fully scoped under .ctm-tool. Font: Inter.
   ============================================================ */
.ctm-tool{
  --ink:#0b0b0b;--paper:#fff;--soft:#f6f6f6;--line:#e6e6e6;--grey:#6b6b6b;--err:#b3261e;
  --green-bg:#d9f3e2;--green:#1f7a45;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-family:var(--ui);color:var(--ink);
  width:100%;max-width:640px;margin:0 auto;padding:0;
  -webkit-text-size-adjust:100%;
}
.ctm-tool *,.ctm-tool *::before,.ctm-tool *::after{box-sizing:border-box}
.ctm-tool [hidden]{display:none!important}
.ctm-tool svg{width:18px;height:18px;flex-shrink:0;display:block}

/* ---- outer black frame + white card ---- */
.ctm-tool .ctm-frame{background:var(--ink);border-radius:28px;padding:16px}
.ctm-tool .ctm-card{background:var(--paper);border-radius:20px;padding:clamp(18px,4vw,28px)}

.ctm-tool .ctm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ctm-tool .ctm-badge{
  display:inline-block;background:var(--green-bg);color:var(--green);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.ctm-tool .ctm-title{
  margin:16px 0 8px;font-family:var(--ui);font-size:clamp(28px,6vw,40px);
  line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.ctm-tool .ctm-sub{margin:0 0 20px;font-size:16.5px;line-height:1.5;color:#222}

/* ---- language toggle ---- */
.ctm-tool .ctm-lang{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px}
.ctm-tool .ctm-lang button,
.ctm-tool .ctm-lang button:hover,
.ctm-tool .ctm-lang button:focus{
  margin:0;border:0;background:transparent;color:var(--ink);box-shadow:none;
  font-family:var(--ui);font-size:13px;font-weight:600;line-height:1;
  padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  text-transform:none;letter-spacing:normal;transition:background .2s,color .2s;
}
.ctm-tool .ctm-lang button.active,
.ctm-tool .ctm-lang button.active:hover,
.ctm-tool .ctm-lang button.active:focus{background:var(--ink);color:#fff}

/* ---- search box ---- */
.ctm-tool .ctm-box{
  background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
  transition:border-color .2s,box-shadow .2s;
}
.ctm-tool .ctm-box:focus-within,
.ctm-tool .ctm-box.is-drag{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.ctm-tool .ctm-box.is-busy{opacity:.7;pointer-events:none}
.ctm-tool .ctm-niche{
  display:block;width:100%;margin:0;border:0;outline:0;resize:none;
  background:transparent;color:var(--ink);box-shadow:none;border-radius:0;
  padding:16px 16px 6px;min-height:54px;max-height:180px;overflow-y:auto;
  font-family:var(--ui);font-size:16px;line-height:1.5;font-weight:400;
}
.ctm-tool .ctm-niche::placeholder{color:#8a8a8a;opacity:1}

.ctm-tool .ctm-thumbs{
  display:flex;gap:10px;padding:14px 14px 0;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ctm-tool .ctm-thumbs::-webkit-scrollbar{display:none}
.ctm-tool .ctm-thumb{position:relative;flex:0 0 auto;animation:ctm-pop .25s ease}
.ctm-tool .ctm-thumb img{width:60px;height:60px;object-fit:cover;display:block;border-radius:12px;border:1px solid var(--line)}
.ctm-tool .ctm-thumb-x{
  position:absolute;top:-7px;right:-7px;width:22px;height:22px;padding:0;margin:0;
  border:0;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;cursor:pointer;
}
.ctm-tool .ctm-thumb-x svg{width:11px;height:11px}
@keyframes ctm-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

.ctm-tool .ctm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 10px 10px 12px}
.ctm-tool .ctm-count{font-size:12px;color:#9a9a9a;font-variant-numeric:tabular-nums}

.ctm-tool .ctm-attach{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;margin:0;
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;
}
.ctm-tool .ctm-attach:hover{background:var(--soft);border-color:#cfcfcf}
.ctm-tool .ctm-attach:focus-within{outline:2px solid var(--ink);outline-offset:2px}

/* ---- example chips ---- */
.ctm-tool .ctm-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ctm-tool .ctm-chip,
.ctm-tool .ctm-chip:hover,
.ctm-tool .ctm-chip:focus{
  margin:0;border:1px solid var(--line);background:var(--soft);color:#333;box-shadow:none;
  font-family:var(--ui);font-size:13px;font-weight:500;line-height:1.2;text-align:left;
  padding:8px 12px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:normal;
  transition:background .15s,border-color .15s;
}
.ctm-tool .ctm-chip:hover{background:#ececec;border-color:#d4d4d4}

/* ---- plan row ---- */
.ctm-tool .ctm-div{border:0;border-top:1px solid var(--line);margin:20px 0}
.ctm-tool .ctm-plan{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}
.ctm-tool .ctm-plan b{display:block;font-size:24px;font-weight:600;line-height:1.2}
.ctm-tool .ctm-plan span{display:block;font-size:14.5px;color:var(--grey);margin-top:2px}
.ctm-tool .ctm-plan-r{text-align:right}

/* ---- main button ---- */
.ctm-tool .ctm-gen,
.ctm-tool .ctm-download{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;margin:0;padding:0 22px;border:0;border-radius:14px;
  background:var(--ink);color:#fff;box-shadow:none;cursor:pointer;
  font-family:var(--ui);font-size:17px;font-weight:600;line-height:1;
  text-transform:none;letter-spacing:normal;text-decoration:none;
  transition:background .15s,transform .1s,opacity .15s;-webkit-tap-highlight-color:transparent;
}
.ctm-tool .ctm-gen:hover,.ctm-tool .ctm-gen:focus,
.ctm-tool .ctm-download:hover,.ctm-tool .ctm-download:focus{background:#262626;color:#fff}
.ctm-tool .ctm-gen:active,.ctm-tool .ctm-download:active{transform:scale(.985)}
.ctm-tool .ctm-gen:disabled{opacity:.55;cursor:not-allowed}
.ctm-tool .ctm-gen:focus-visible,.ctm-tool .ctm-download:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ctm-tool .ctm-gen svg{transition:transform .2s}
.ctm-tool .ctm-gen:hover svg{transform:translateX(3px)}

/* ---- status ---- */
.ctm-tool .ctm-msg{display:none;margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--grey)}
.ctm-tool .ctm-msg.is-error{color:var(--err)}

/* ---- results ---- */
.ctm-tool .ctm-results{margin-top:20px;animation:ctm-fade .3s ease}
.ctm-tool .ctm-genimg{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.ctm-tool .ctm-download{margin-top:12px}
@keyframes ctm-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ctm-tool .ctm-loading{
  aspect-ratio:3/2;width:100%;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:20px;color:var(--grey);font-size:14px;
  background:linear-gradient(100deg,#f1f1f1 30%,#fafafa 50%,#f1f1f1 70%);
  background-size:300% 100%;animation:ctm-shimmer 1.6s linear infinite;
}
.ctm-tool .ctm-spin{width:30px;height:30px;border-radius:50%;border:3px solid #d4d4d4;border-top-color:var(--ink);animation:ctm-rot .8s linear infinite}
@keyframes ctm-rot{to{transform:rotate(360deg)}}
@keyframes ctm-shimmer{to{background-position:-300% 0}}

/* ---- expandable tips (smooth height) ---- */
.ctm-tool .ctm-tips{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.ctm-tool .ctm-tips-btn,
.ctm-tool .ctm-tips-btn:hover,
.ctm-tool .ctm-tips-btn:focus{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:0;
  padding:12px 0;border:0;background:transparent;color:var(--ink);box-shadow:none;
  font-family:var(--ui);font-size:15px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:normal;
}
.ctm-tool .ctm-tips-btn svg{transition:transform .3s}
.ctm-tool .ctm-tips-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ctm-tool .ctm-tips-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.ctm-tool .ctm-tips-body>div{overflow:hidden}
.ctm-tool .ctm-tips-btn[aria-expanded="true"]+.ctm-tips-body{grid-template-rows:1fr}
.ctm-tool .ctm-tips-list{margin:0;padding:2px 0 8px 20px;font-size:14.5px;line-height:1.6;color:#333}
.ctm-tool .ctm-tips-list li{margin:0 0 4px}

/* ---- mobile ---- */
@media(max-width:560px){
  .ctm-tool .ctm-frame{border-radius:22px;padding:8px}
  .ctm-tool .ctm-card{border-radius:16px;padding:16px}
  .ctm-tool .ctm-sub{font-size:15.5px;margin-bottom:16px}
  .ctm-tool .ctm-top{flex-direction:column-reverse;align-items:flex-start}
  .ctm-tool .ctm-lang{align-self:stretch}
  .ctm-tool .ctm-lang button{flex:1;text-align:center;padding:9px 6px}
  .ctm-tool .ctm-plan b{font-size:21px}
  .ctm-tool .ctm-gen,.ctm-tool .ctm-download{font-size:16px;min-height:54px}
}
@media(prefers-reduced-motion:reduce){
  .ctm-tool *{animation:none!important;transition:none!important}
}