/* CraftMock theme v24 — "Modern dark with color". Shared by the suite and every tool page.
   Chrome only: colours, surfaces, type, hover. No layout/logic hooks are changed. */
:root {
  --bg:#0b0a11; --bg2:#12101a; --panel:#16131f; --panel2:#1d1928; --ink:#f6f2ff; --muted:#b8b0cb; --line:#2f2a40;
  --accent:#e8408c; --gold:#ffb070; --ok:#7fe0a8; --bad:#ff8fa3;
  --g1:#ff7a45; --g2:#e8408c; --g3:#8b5cf6;
  --grad:linear-gradient(135deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08); --edge:rgba(255,255,255,.12);
  --r:14px; --shadow:0 18px 50px rgba(0,0,0,.45); --glow:0 8px 28px rgba(232,64,140,.28);
  --font:"Inter","Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
html, body { font-family:var(--font); -webkit-font-smoothing:antialiased; }
body {
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(255,122,69,.13), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(139,92,246,.17), transparent 58%),
    radial-gradient(700px 480px at 60% 110%, rgba(232,64,140,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a { color:#ffc59a; }
::selection { background:rgba(232,64,140,.45); }
header { background:rgba(22,19,31,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--edge); }
header h1 { letter-spacing:.09em; }
header span, header .hint { color:var(--muted); }
aside { background:linear-gradient(180deg,rgba(29,25,40,.92),rgba(22,19,31,.92)); border-right:1px solid var(--edge); }
main { background:rgba(0,0,0,.28); }
main.checker { background:linear-gradient(45deg,#2c2838 25%,transparent 25%) 0 0/22px 22px, linear-gradient(45deg,transparent 75%,#2c2838 75%) 0 0/22px 22px, #1b1826; }
canvas { border-radius:16px; box-shadow:var(--shadow), 0 0 0 1px var(--edge); }
label, label.l { color:var(--muted); letter-spacing:.11em; }
h2 { color:var(--gold); border-top-color:var(--edge); }
.drop { background:var(--glass); border:1.5px dashed rgba(255,255,255,.22); border-radius:var(--r); transition:border-color .2s, background .2s, transform .2s; }
.drop:hover, .drop.hot { border-color:var(--g2); background:rgba(232,64,140,.08); color:var(--ink); }
input[type=number], input[type=text], input[type=email], input[type=password], select, textarea, input:not([type]) {
  background:rgba(0,0,0,.28); color:var(--ink); border-color:var(--edge); border-radius:10px; transition:border-color .2s, box-shadow .2s;
}
input[type=number]:focus, input[type=text]:focus, input:not([type]):focus, select:focus, textarea:focus { outline:none; border-color:var(--g2); box-shadow:0 0 0 3px rgba(232,64,140,.22); }
input[type=range], input[type=checkbox] { accent-color:var(--g2); }
/* primary buttons: gradient. Segmented / pad / ghost buttons keep their own (more specific) rules below */
button, a#dl { background-image:var(--grad); border:0; border-radius:12px; color:#fff; font-family:var(--font);
  box-shadow:var(--glow); transition:transform .15s ease, filter .15s ease, box-shadow .15s ease; text-shadow:0 1px 1px rgba(0,0,0,.25); }
button:hover:not(:disabled), a#dl:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 12px 32px rgba(232,64,140,.38); }
button:active:not(:disabled) { transform:translateY(0); filter:brightness(.97); }
button:disabled { box-shadow:none; }
button.ghost, .ghost { background:var(--glass); background-image:none; border:1px solid var(--edge); color:var(--ink); box-shadow:none; text-shadow:none; }
button.ghost:hover:not(:disabled) { background:var(--glass2); border-color:rgba(255,255,255,.28); box-shadow:none; }
.bgs button, .seg button, .pad button, .tabs button, .chips button, .mini button {
  background:var(--glass); background-image:none; border:1px solid var(--edge); color:var(--ink); box-shadow:none; text-shadow:none; border-radius:10px; }
.bgs button:hover:not(:disabled), .seg button:hover:not(:disabled), .pad button:hover:not(:disabled) { background:var(--glass2); border-color:rgba(255,255,255,.3); filter:none; transform:translateY(-1px); box-shadow:none; }
.bgs button.on, .seg button.on, .tabs button.on { border-color:var(--g2); color:#fff; background:linear-gradient(135deg,rgba(255,122,69,.22),rgba(232,64,140,.22) 55%,rgba(139,92,246,.22)); box-shadow:0 0 0 1px rgba(232,64,140,.45) inset; }
.pad button:active { border-color:var(--g2); color:var(--gold); }
.row, p.help, p.fine, .fine { color:var(--muted); }
p.tip { background:var(--glass); border-color:var(--edge); border-radius:var(--r); }
p.tip b { color:var(--gold); }
.status { background:rgba(11,10,17,.78); border:1px solid var(--edge); }
details, .opt, .card, .panel { border-radius:var(--r); }
.card { background:linear-gradient(180deg,rgba(29,25,40,.9),rgba(22,19,31,.9)); border:1px solid var(--edge); box-shadow:var(--shadow); }
.msg.err { background:rgba(255,80,110,.1); border-color:rgba(255,100,130,.45); color:#ffc2cc; }
.msg.ok { background:rgba(80,220,150,.1); border-color:rgba(100,230,160,.4); color:#c4f3d9; }
.msg.info { background:rgba(255,176,112,.1); border-color:rgba(255,176,112,.4); color:#ffdcbc; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:8px; } ::-webkit-scrollbar-track { background:transparent; }

/* ---- slim top bar (suite shell + injected on directly-opened tool pages) ---- */
.cmbar { position:sticky; top:0; z-index:50; height:52px; display:flex; align-items:center; gap:14px; padding:0 16px; box-sizing:border-box;
  background:rgba(14,12,22,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--edge); font-family:var(--font); color:var(--ink); }
.cmbar a.logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.04em; font-size:16px; }
.cmbar .mark { width:26px; height:26px; border-radius:8px; background:var(--grad); box-shadow:var(--glow); display:grid; place-items:center; font-size:13px; font-weight:900; color:#fff; }
.cmbar .logo b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cmbar .by { color:var(--muted); font-size:10px; letter-spacing:.16em; font-weight:600; text-transform:uppercase; }
.cmbar .sp { flex:1; }
.cmbar .navbtn, .cmbar a.navbtn { display:inline-flex; align-items:center; gap:6px; width:auto; margin:0; padding:8px 14px; font-size:13px; font-weight:700; border-radius:999px; cursor:pointer; text-decoration:none;
  background:var(--glass); background-image:none; border:1px solid var(--edge); color:var(--ink); box-shadow:none; text-shadow:none; font-family:var(--font); transition:all .15s ease; }
.cmbar .navbtn:hover { background:var(--glass2); border-color:rgba(255,255,255,.3); transform:translateY(-1px); filter:none; }
.cmbar .navbtn.on { border-color:var(--g2); box-shadow:0 0 0 1px rgba(232,64,140,.45) inset; }
.cmmenu { position:relative; }
.cmmenu .tabs { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:230px; flex-direction:column; gap:2px; padding:8px; z-index:60;
  background:rgba(22,19,31,.97); border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--shadow); }
.cmmenu.open .tabs { display:flex; }
.cmmenu .tabs button { display:flex; width:100%; margin:0; padding:9px 12px; text-align:left; font-size:13px; font-weight:600; border:1px solid transparent; background:transparent; border-radius:9px; color:var(--ink); }
.cmmenu .tabs button:hover { background:var(--glass2); transform:none; }
.cmmenu .tabs button.on { background:linear-gradient(135deg,rgba(255,122,69,.2),rgba(232,64,140,.2) 55%,rgba(139,92,246,.2)); border-color:rgba(232,64,140,.5); color:#fff; }
.cmmenu .tabs .grp { padding:8px 12px 4px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
@media (max-width:640px) { .cmbar .by, .cmbar .hint { display:none; } .cmbar { gap:8px; padding:0 10px; } }

/* --- Cloudflare trial copy: mobile layout polish (CSS only) --- */
@media (max-width:640px) {
  .cmbar .navbtn, .cmbar a.navbtn { white-space:nowrap; padding:8px 11px; font-size:12px; min-height:38px; line-height:1.1; }
  #trialbar { padding:5px 10px !important; font-size:11px !important; gap:8px !important; }
}
@media (max-width:480px) {
  .cmbar { gap:6px; padding:0 8px; }
  .cmbar a.logo span:not(.mark) { display:none; }
}