/* Ujjain Market — फ़्री टूल्स. Festive glossy look (same family as games FX theme). Mobile-first. */
:root {
  color-scheme: light;
  --ink: #241433; --mut: #6b5870; --line: #efd9c2; --card: #fff;
  --c1: #ff7a00; --c2: #c2410c; --c3: #8a2c06; /* per-tool colours, set on body[data-tool] */
  --r: 18px; --tap: 46px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Mangal", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: hidden; }
body {
  color: var(--ink); line-height: 1.5; min-height: 100vh; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 1px 1px, rgba(214, 36, 122, .07) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fff3df 0%, #fff0ea 45%, #f7f0ff 100%);
}
img, canvas, video { max-width: 100%; }
a { color: inherit; }

/* per-tool colour sets (white text stays readable on the darker half) */
[data-tool="bg"]      { --c1: #ec3c8f; --c2: #a3166a; --c3: #6b0b45; }
[data-tool="pdf"]     { --c1: #f04438; --c2: #b4161b; --c3: #730c0f; }
[data-tool="qr"]      { --c1: #3d7bff; --c2: #1a3fb8; --c3: #0f2672; }
[data-tool="emi"]     { --c1: #1fb57a; --c2: #08754b; --c3: #044a2f; }
[data-tool="caption"] { --c1: #ff8a1a; --c2: #c2410c; --c3: #7c2a07; }
[data-tool="bill"]    { --c1: #10a5c9; --c2: #0b5f7d; --c3: #063b4f; }
[data-tool="poster"]  { --c1: #8b5cf6; --c2: #5b21b6; --c3: #3b1475; }
[data-tool="resume"]  { --c1: #d9822b; --c2: #8a4a0c; --c3: #5a2f06; }

/* top bar */
.t-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.95); box-shadow: 0 2px 0 rgba(255,138,0,.25), 0 6px 18px rgba(80,20,60,.08); }
.t-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #ff8a00, #d6247a 35%, #3f6dff 70%, #2fd49a); }
.t-top__in { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; }
.t-top a { text-decoration: none; font-weight: 800; min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.t-top__brand { color: #b3124f; font-size: 1.02rem; }
.t-top__all { padding: 0 14px; border-radius: 999px; font-size: .92rem; background: linear-gradient(#fff, #fbeedd); box-shadow: inset 0 0 0 1.5px #f1d8b8, 0 2px 0 #e7c79e; }

.t-wrap { max-width: 960px; margin: 0 auto; padding: 0 14px 40px; }
.t-hero { margin: 18px 0 12px; padding: 20px 16px; border-radius: 22px; color: #fff; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.18), 0 12px 24px -8px rgba(40,10,50,.45); }
.t-hero::before { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; z-index: -1;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.14) 0 6px, transparent 6px 16px); }
.t-hero h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 6.4vw, 2.3rem); line-height: 1.2; text-shadow: 0 2px 0 rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.25); overflow-wrap: anywhere; }
.t-hero p { margin: 0; font-size: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,.3); overflow-wrap: anywhere; }
.t-free { display: inline-block; margin-top: 10px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 3px 12px; font-size: .85rem; font-weight: 700; }

.t-card { background: var(--card); border-radius: var(--r); padding: 16px; margin: 14px 0; box-shadow: 0 1px 0 #f3dcc0, 0 8px 22px -12px rgba(80,30,60,.35); min-width: 0; }
.t-card h2 { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.3; }
.t-card h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.t-note { color: var(--mut); font-size: .92rem; margin: 8px 0; overflow-wrap: anywhere; }
.t-safe { display: flex; gap: 8px; align-items: flex-start; background: #effaf3; color: #0b5c38; border-radius: 12px; padding: 10px 12px; font-size: .9rem; margin: 10px 0; }

/* form */
.t-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .t-grid--2 { grid-template-columns: 1fr 1fr; } .t-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
.t-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-field > span { font-weight: 700; font-size: .92rem; }
.t-field small { color: var(--mut); font-size: .8rem; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; min-height: var(--tap); width: 100%; max-width: 100%; border: 2px solid #efd3b3; border-radius: 12px; padding: 8px 10px; box-shadow: inset 0 2px 3px rgba(80,30,0,.06); }
textarea { min-height: 88px; resize: vertical; }
input[type="color"] { padding: 4px; width: 64px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; box-shadow: none; accent-color: var(--c2); }
input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--c2); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .t-btn:focus-visible, .t-tool:focus-visible { outline: 3px solid #ffb44d; outline-offset: 2px; }
.t-check { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: var(--tap); }

/* glossy colourful buttons */
.t-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: var(--tap); padding: .6em 1.1em;
  border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; text-decoration: none; line-height: 1.2; text-align: center;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%), linear-gradient(var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.15), 0 4px 0 var(--c3), 0 7px 14px -4px rgba(40,10,40,.45);
  transition: transform .1s ease, box-shadow .1s ease, filter .12s; touch-action: manipulation; max-width: 100%; overflow-wrap: anywhere;
}
.t-btn:hover { filter: brightness(1.06); }
.t-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 var(--c3), 0 2px 5px rgba(40,10,40,.3); }
.t-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.t-btn--wide { width: 100%; font-size: 1.08rem; }
.t-btn--alt { color: var(--ink); text-shadow: none; background: linear-gradient(#fffaf2, #f6e2c8); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 #dcb98d, 0 5px 10px rgba(90,40,10,.12); }
.t-btn--alt:active { box-shadow: 0 1px 0 #dcb98d; }
.t-btn--green { --c1: #22c55e; --c2: #15803d; --c3: #0b4f25; }
.t-btn--blue { --c1: #3d7bff; --c2: #1a3fb8; --c3: #0f2672; }
.t-btn--small { min-height: 40px; padding: .4em .8em; font-size: .9rem; border-radius: 12px; }
.t-btn--pro { color: #5b4a00; text-shadow: none; background: linear-gradient(#fff6c8, #f5d76e); box-shadow: inset 0 0 0 1.5px #e7c64a; }
.t-btn--pro:disabled { opacity: .8; filter: none; }
.t-pro { font-size: .72rem; background: #3b2a00; color: #ffd75e; border-radius: 999px; padding: 1px 7px; }

/* tabs */
.t-tabs { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.t-tab { flex: 1 1 140px; }
.t-tab[aria-selected="false"] { color: var(--ink); text-shadow: none; background: linear-gradient(#fffaf2, #f6e2c8); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dcb98d; }

/* hub tool cards */
.t-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 16px 0; }
.t-tool {
  position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 12px; align-items: center; min-height: 104px; padding: 16px;
  border-radius: 20px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.32), transparent 55%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,0,0,.2), 0 6px 0 var(--c3), 0 12px 22px -8px rgba(40,10,50,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.t-tool::before { content: ""; position: absolute; right: -36px; top: -36px; width: 140px; height: 140px; border-radius: 50%; z-index: -1; background: repeating-radial-gradient(circle, rgba(255,255,255,.15) 0 6px, transparent 6px 16px); }
.t-tool:active { transform: translateY(4px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 2px 0 var(--c3), 0 4px 8px rgba(40,10,50,.35); }
.t-tool__ic { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.t-tool b { display: block; font-size: 1.15rem; line-height: 1.25; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.t-tool small { display: block; font-size: .9rem; opacity: .96; margin-top: 3px; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.t-tool > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* output areas */
.t-out { display: grid; place-items: center; background: repeating-conic-gradient(#f2f2f2 0 25%, #fff 0 50%) 0 0 / 20px 20px; border-radius: 14px; padding: 10px; min-height: 120px; border: 2px dashed #efd3b3; }
.t-out img, .t-out canvas { max-height: 70vh; height: auto; border-radius: 8px; }
.t-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); }
table.t-table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 340px; }
.t-table th, .t-table td { padding: 8px 8px; text-align: right; border-bottom: 1px solid #f3e6d6; white-space: nowrap; }
.t-table th:first-child, .t-table td:first-child { text-align: left; }
.t-table thead th { background: #fff4e6; position: sticky; top: 0; }
.t-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-stat { background: #fff8ef; border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1.5px #f3dcc0; min-width: 0; }
.t-stat small { display: block; color: var(--mut); font-size: .82rem; }
.t-stat b { display: block; font-size: 1.15rem; overflow-wrap: anywhere; }
.t-stat--main { grid-column: 1 / -1; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 4px 0 var(--c3); }
.t-stat--main small { color: rgba(255,255,255,.9); }
.t-stat--main b { font-size: 1.6rem; }
.t-list { margin: 6px 0; padding-left: 20px; }
.t-list li { margin: 4px 0; }
.t-item { display: grid; grid-template-columns: minmax(0,1fr) 58px 82px 44px; gap: 6px; align-items: end; margin-bottom: 8px; }
.t-item input { padding: 6px 8px; }
.t-x { min-height: var(--tap); border: 0; border-radius: 12px; background: #fde2e2; color: #9b1c1c; font-size: 1.1rem; cursor: pointer; }
.t-pill { display: inline-block; border-radius: 999px; background: #fff1e0; padding: 2px 10px; font-size: .85rem; font-weight: 700; }
.t-capbox { white-space: pre-wrap; background: #fffaf3; border-radius: 14px; padding: 14px; border: 2px solid #f3dcc0; min-height: 120px; overflow-wrap: anywhere; font-size: 1rem; }
.t-tpl { display: flex; flex-wrap: wrap; gap: 8px; }
.t-tpl .t-btn { flex: 1 1 140px; }
.t-video { width: 100%; max-height: 60vh; border-radius: 14px; background: #000; }
.t-files { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.t-files li { display: flex; align-items: center; gap: 8px; background: #fff8ef; border-radius: 12px; padding: 6px 8px; min-width: 0; }
.t-files li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.t-files img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.t-files button { min-height: 40px; min-width: 40px; border: 0; border-radius: 10px; background: #f6e2c8; cursor: pointer; font: inherit; }
.t-progress { height: 10px; border-radius: 999px; background: #f3e6d6; overflow: hidden; margin: 8px 0; }
.t-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .2s; }

.t-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 99; background: #241433; color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.3); max-width: calc(100vw - 24px); text-align: center; }
.t-foot { text-align: center; color: var(--mut); font-size: .88rem; padding: 18px 12px 30px; }
.t-foot a { font-weight: 700; }
@media print {
  body { background: #fff; }
  .t-top, .t-hero, .t-foot, .t-noprint { display: none !important; }
}
[data-tool="hub"] .t-hero { background: radial-gradient(circle at 0 0, rgba(255,220,90,.75) 0 46px, transparent 47px), radial-gradient(circle at 92% 110%, rgba(63,109,255,.65) 0 30%, transparent 31%), linear-gradient(135deg, #ff6a00 0%, #ff2f6d 48%, #8a2be2 100%); }
@media (max-width: 420px) { .t-table { font-size: .8rem; } .t-table th, .t-table td { padding: 7px 5px; } }