/* ============================================================
   Flick Tools - unified design system (refined dark, Linear/Raycast grade)
   One file skins every page: hub, 6 tools, and all SEO landing pages.
   Monochrome chrome, hairline detail, one white primary, green for positive.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:#09090b; --surface:#0e0e12; --surface2:#14141a; --elevated:#191920;
  --ink:#f4f4f6; --muted:#a2a2ab; --faint:#71717a;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --brand:#f4f4f6;                 /* primary emphasis is white */
  --accent:#8b8bff;                /* used only for focus, sparingly */
  --radius:16px; --radius-sm:11px; --radius-lg:20px;
  --sans:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font: var(--sans);
  --maxw:1080px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 30px 60px -30px rgba(0,0,0,.85);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body {
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--ink); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:rgba(255,255,255,.16); }
h1,h2,h3,h4 { font-family:var(--sans); font-weight:600; letter-spacing:-.02em; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:#26262e; border-radius:8px; border:3px solid var(--bg); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.narrow { max-width:780px; }

/* ---------- Nav (injected by flick.js) ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(9,9,11,.72); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:58px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-.01em; }
.logo:hover { text-decoration:none; }
.logo .dot { width:22px; height:22px; border-radius:6px; background:#fff; font-size:0; }
.nav-links { display:flex; gap:4px; align-items:center; }
.nav-links a { color:var(--muted); font-weight:500; font-size:13.5px; padding:7px 12px; border-radius:9px; }
.nav-links a:hover { color:var(--ink); background:var(--surface2); text-decoration:none; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:14.5px; cursor:pointer;
  padding:11px 18px; border-radius:11px; border:1px solid transparent;
  transition:transform .14s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:#fafafa; color:#0a0a0c; border-color:#fafafa; }
.btn-primary:hover { background:#e9e9ee; transform:translateY(-1px); text-decoration:none; box-shadow:var(--shadow-md); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line2); }
.btn-ghost:hover { background:var(--surface2); text-decoration:none; }
.btn-lg { padding:14px 24px; font-size:15.5px; border-radius:13px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---------- Cards / surfaces ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.card:hover { }
.pad { padding:24px; }
.pad-lg { padding:32px; }

/* ---------- Hero (hub uses its own; shared fallback) ---------- */
.hero { text-align:center; padding:72px 0 36px; }
.hero h1 { font-size:clamp(34px,6vw,60px); line-height:1.04; letter-spacing:-.035em; margin:0 0 18px; font-weight:600; }
.hero p.sub { font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:600px; margin:0 auto 26px; }
.pill { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); background:var(--surface); border:1px solid var(--line); padding:7px 14px; border-radius:999px; margin-bottom:18px; }
.gradient-text { color:var(--ink); }

/* ---------- Tool page header ---------- */
.tool-head { text-align:center; padding:56px 0 26px; }
.tool-head .ico { width:54px; height:54px; margin:0 auto 16px; border-radius:15px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:26px; }
.tool-head .ico svg { width:26px; height:26px; }
.tool-head h1 { font-size:clamp(28px,4.5vw,40px); margin:0 0 10px; letter-spacing:-.025em; }
.tool-head p { color:var(--muted); margin:0 auto; max-width:580px; font-size:16px; }

/* ---------- Dropzone ---------- */
.dropzone {
  border:1.5px dashed var(--line2); border-radius:var(--radius); background:var(--surface);
  padding:52px 24px; text-align:center; cursor:pointer; transition:border-color .16s, background .16s;
}
.dropzone:hover, .dropzone.drag { border-color:rgba(255,255,255,.4); background:var(--surface2); }
.dropzone .big { font-size:40px; margin-bottom:12px; opacity:.9; }
.dropzone h3 { margin:0 0 5px; font-size:18px; }
.dropzone p { margin:0; color:var(--muted); font-size:14px; }

/* ---------- Forms ---------- */
label.fld { display:block; font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin:0 0 7px; }
input[type=text], input[type=number], input[type=email], input[type=url], input[type=date], select, textarea {
  width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; transition:border .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:#5a5a63; }
input:focus, select:focus, textarea:focus { outline:none; border-color:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(255,255,255,.06); }
select { -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 18px) center,calc(100% - 13px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; }
input[type=file] { color:var(--muted); font-size:13px; }
input[type=file]::file-selector-button { font-family:inherit; background:var(--surface2); color:var(--ink); border:1px solid var(--line2); border-radius:8px; padding:7px 12px; margin-right:10px; cursor:pointer; }
input[type=color] { padding:4px; height:42px; background:var(--surface2); }
.row { display:grid; gap:14px; }
@media (min-width:620px) { .row.cols-2 { grid-template-columns:1fr 1fr; } .row.cols-3 { grid-template-columns:1fr 1fr 1fr; } }
.range { width:100%; accent-color:#fff; }

/* ---------- Grid + generic tool cards (hub overrides its own) ---------- */
.grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:560px) { .grid.cols-2 { grid-template-columns:1fr 1fr; } }
@media (min-width:860px) { .grid.cols-3 { grid-template-columns:1fr 1fr 1fr; } }
.tool-card { display:flex; flex-direction:column; gap:8px; padding:22px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:border-color .16s, background .16s, transform .16s; }
.tool-card:hover { border-color:var(--line2); background:var(--surface2); transform:translateY(-2px); text-decoration:none; }

/* ---------- Misc ---------- */
.center { text-align:center; } .muted { color:var(--muted); } .small { font-size:13px; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hidden { display:none !important; }
.flex { display:flex; gap:12px; align-items:center; } .flex-wrap { flex-wrap:wrap; } .between { justify-content:space-between; }
.spin { width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#fafafa; color:#0a0a0c; padding:12px 20px; border-radius:12px; box-shadow:var(--shadow-lg); font-weight:600; font-size:14px; z-index:100; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }

.privacy-strip { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--faint); background:var(--surface); border:1px solid var(--line); padding:8px 15px; border-radius:999px; }
.privacy-strip .lock { color:var(--ok); }

/* ---------- Pro badge / upsell ---------- */
.pro-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--surface2); border:1px solid var(--line2); padding:4px 10px; border-radius:999px; vertical-align:middle; }
.upsell { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; }
.upsell h3 { margin:0 0 6px; }
.upsell ul { list-style:none; padding:0; margin:14px 0; display:inline-block; text-align:left; }
.upsell li { padding:5px 0 5px 26px; position:relative; font-size:14px; color:var(--muted); }
.upsell li:before { content:""; position:absolute; left:2px; top:11px; width:12px; height:7px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }

/* ---------- Footer (injected) ---------- */
footer.site { border-top:1px solid var(--line); margin-top:72px; padding:44px 0; color:var(--muted); font-size:14px; }
footer.site .logo .dot { background:#fff; font-size:0; width:22px; height:22px; border-radius:6px; }
footer.site .cols { display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
footer.site a { color:var(--muted); } footer.site a:hover { color:var(--ink); }
footer.site .foot-tools { display:flex; flex-wrap:wrap; gap:8px 18px; }
footer.site strong { color:var(--ink); font-weight:600; }