/* tool.css: the shared look for mvibe's in-browser tool pages (converters, Art Sheets).
 * Import after tokens.css. Components: .tool-hero, .drop, .panel, .opts, .btn, .results,
 * .card, .bar, .note. Everything works at 360px wide. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap");

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--paper); font: 400 16px/1.55 var(--sans);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(88, 27, 159, .45), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(29, 98, 159, .35), transparent 60%),
    var(--night);
  background-attachment: fixed;
}
a { color: var(--sky); }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }

.tool-hero { padding: 76px 0 26px; display: grid; gap: 14px; }
.tool-hero .eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.tool-hero h1 { margin: 0; font: 800 clamp(36px, 7vw, 68px)/1 var(--serif); letter-spacing: -.02em; }
.tool-hero h1 em { font-style: normal; color: var(--bloom); }
.tool-hero p { margin: 0; max-width: 62ch; color: #c4cbe0; font-size: 18px; }
.privacy { display: inline-flex; gap: 8px; align-items: center; font: 500 12px/1.3 var(--mono); color: var(--mist); }
.privacy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7fd9a6; box-shadow: 0 0 0 4px rgba(127, 217, 166, .15); }

.drop {
  position: relative; display: grid; place-items: center; text-align: center; gap: 10px;
  min-height: 230px; padding: 34px 20px; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(180deg, rgba(11, 19, 61, .82), rgba(26, 20, 48, .82));
  border: 1.5px dashed rgba(84, 197, 222, .45); box-shadow: var(--shadow);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s;
  --mx: 50%; --my: 50%;
}
.drop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(223, 71, 104, .16), transparent 60%); }
.drop:hover, .drop.over { border-color: var(--bloom); transform: translateY(-2px); }
.drop.over { background: linear-gradient(180deg, rgba(88, 27, 159, .5), rgba(26, 20, 48, .9)); }
.drop strong { font: 800 22px/1.2 var(--serif); }
.drop small { color: var(--mist); font: 500 13px/1.4 var(--mono); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .eye { width: 54px; height: 54px; filter: drop-shadow(0 6px 18px rgba(84, 197, 222, .4)); }

.panel { margin-top: 18px; padding: 18px; border-radius: var(--radius); background: rgba(11, 19, 61, .7); border: 1px solid rgba(255, 255, 255, .06); }
.opts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
.opts label { display: grid; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #aeb7d0; }
.opts input[type="number"], .opts select, .opts input[type="text"] {
  min-width: 110px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--rule);
  background: var(--night); color: var(--paper); font: 500 15px/1 var(--sans); }
.opts input[type="range"] { accent-color: var(--bloom); width: 180px; }
.opts .check { display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font: 500 14px/1.2 var(--sans); color: var(--paper); }

.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 15px/1 var(--sans); color: #fff; background: linear-gradient(180deg, var(--bloom), var(--magenta));
  box-shadow: 0 12px 30px -12px rgba(223, 71, 104, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ease), box-shadow .25s, filter .2s; --mx: 50%; --my: 50%; }
.btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--mx) var(--my), rgba(255, 255, 255, .28), transparent 60%); opacity: 0; transition: opacity .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--paper); border: 1px solid var(--rule); box-shadow: none; }
.btn.ghost:hover { border-color: var(--sky); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: 14px; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--bloom)); transition: width .2s; }
.status { margin-top: 8px; font: 500 13px/1.4 var(--mono); color: #aeb7d0; min-height: 1.4em; }

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.card { border-radius: var(--radius-sm); overflow: hidden; background: var(--ink); border: 1px solid rgba(255, 255, 255, .06); box-shadow: var(--shadow); display: grid; }
.card .thumb { aspect-ratio: 4 / 3; background: #050a22 center / contain no-repeat; display: block; width: 100%; height: auto; object-fit: contain; }
.card .meta { padding: 10px 12px; display: grid; gap: 4px; font: 500 12px/1.35 var(--mono); color: #aeb7d0; }
.card .meta b { color: var(--paper); font: 600 13px/1.3 var(--sans); word-break: break-all; }
.card .meta a { justify-self: start; margin-top: 4px; }
.card.err { border-color: rgba(223, 71, 104, .6); }

.note { margin: 34px 0 60px; color: var(--mist); font-size: 14px; max-width: 70ch; }
.note b { color: #c4cbe0; }

@media (max-width: 600px) {
  .tool-hero { padding-top: 64px; }
  .tool-hero p { font-size: 16px; }
  .opts input[type="range"] { width: 100%; }
  .opts label { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }