/* ==========================================================================
   Online Convertio - light theme, with a dark theme in section 10
   One stylesheet for every page. Sections:
   1. Tokens and base      5. Static pages (about, blog, terms ...)
   2. Header               6. Forms, buttons, contact, account, admin
   3. Footer               7. Tool pages (Tailwind based) and homepage
   4. Shared helpers       8. Animation
                           9. Related tools, drop overlay, theme button
                          10. Dark mode
                          11. Menu dropdown and the exam / resume tools
   ========================================================================== */

/* ---------- 1. Tokens and base ---------- */
:root{
  --bg:#f5f5f8;--card:#fff;--ink:#2d2d35;--mute:#6a6a78;--line:#e4e4ea;--soft:#f7f7fa;
  --acc:#2563eb;--acc-d:#1d4ed8;--acc-soft:#eaf1ff;--glow:rgba(37,99,235,.18);
  --foot:#2b2b33;--shadow:0 10px 30px -14px rgba(30,30,50,.28);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body.static{min-height:100vh;display:flex;flex-direction:column}
::selection{background:#cfe0ff;color:#2d2d35}
a{color:var(--acc)}
.hidden{display:none!important}

/* ---------- 2. Header ---------- */
site-header,site-footer{display:contents}
.sh{position:sticky;top:0;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.6rem;min-height:68px;padding:0 1.5rem;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.sh .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.4rem;letter-spacing:-.04em;color:var(--ink);text-decoration:none;white-space:nowrap}
.sh .brand b{color:var(--acc)}
.lm{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;font-size:.95rem;background:var(--acc)}
.mnav{display:flex;align-items:center;gap:.2rem;flex:1}
.mnav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;padding:.55rem .85rem;border-radius:8px;transition:background .15s,color .15s}
.mnav a:hover{background:var(--soft)}
.mnav a.is-active{color:var(--acc)}
.hact{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.hlogin{color:var(--ink);font-weight:700;font-size:.85rem;text-decoration:none}
.hlogin:hover{color:var(--acc)}
.hsign{background:var(--acc);color:#fff!important;font-weight:700;font-size:.85rem;text-decoration:none;padding:.5rem 1rem;border-radius:8px;transition:background .15s}
.hsign:hover{background:var(--acc-d)}
.menu-btn{display:none;border:1px solid var(--line);background:#fff;color:var(--ink);width:40px;height:40px;border-radius:10px;font-size:1rem;cursor:pointer}
@media(max-width:900px){
  .sh{padding:.6rem 1rem;gap:.4rem 1rem}
  .menu-btn{display:grid;place-items:center;margin-left:.2rem}
  .hact{order:2}
  .mnav{display:none;order:5;flex:0 0 100%;flex-direction:column;align-items:stretch;padding:.4rem 0 .6rem;border-top:1px solid var(--line)}
  .sh.open .mnav{display:flex}
  .mnav a{padding:.8rem .6rem}
}

/* ---------- 3. Footer ---------- */
.sf{background:var(--foot);color:#fff;margin-top:auto;font-size:.9rem}
.sf .fgrid{max-width:72rem;margin:0 auto;padding:3rem 1.5rem 2rem;display:grid;gap:2rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.sf .fgrid{grid-template-columns:repeat(4,1fr)}}
.sf h4{margin:0 0 1rem;font-size:.9rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.sf ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sf a{color:#fff;text-decoration:none;opacity:.88;transition:opacity .15s,transform .15s;display:inline-block}
.sf a:hover{opacity:1;transform:translateX(3px)}
.sf .fbase{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1.1rem 1rem;color:rgba(255,255,255,.65);font-size:.8rem}

/* ---------- 4. Shared helpers ---------- */
.doc{flex:1;max-width:52rem;width:100%;margin:2.5rem auto;padding:0 1rem}
.doc.wide{max-width:70rem}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:2rem;line-height:1.75;color:var(--mute)}
.guide-card h1{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin:0 0 .4rem}
.guide-card h2{font-size:1.6rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:1.6rem 0 .6rem}
.guide-card>h2:first-child{margin-top:0}
.guide-card h3{font-size:1.1rem;font-weight:700;color:var(--ink);margin:1.7rem 0 .5rem}
.guide-card p{margin:.6rem 0}
.guide-card ul{list-style:disc;padding-left:1.4rem}.guide-card ol{list-style:decimal;padding-left:1.4rem}.guide-card li{margin:.3rem 0}
.guide-card strong,.guide-card b{color:var(--ink)}
.guide-card a{color:var(--acc);font-weight:600}
.guide-card code{background:#f1f1f5;color:#1d4ed8;padding:.1rem .4rem;border-radius:6px;font-size:.85em}
.guide-card pre{background:#24242c;color:#f1f1f5;padding:1rem 1.2rem;border-radius:12px;overflow-x:auto;font:.8rem/1.6 var(--mono);margin:.8rem 0}
.guide-card pre code{background:none;color:inherit;padding:0}
.guide-card details{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0;background:var(--soft)}
.guide-card summary{cursor:pointer;font-weight:700;color:var(--ink)}
.guide-card .meta{font-size:.8rem}
.rel{display:flex;flex-wrap:wrap;gap:.6rem}.rel a{background:var(--soft);border:1px solid var(--line);padding:.35rem .8rem;border-radius:999px;text-decoration:none}
@media(max-width:600px){.guide-card{padding:1.3rem}}

/* ---------- 5. Static pages: blog ---------- */
.bgrid{display:grid;gap:1rem;margin-top:1.4rem}@media(min-width:640px){.bgrid{grid-template-columns:1fr 1fr}}
.guide-card .bcard{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:1.2rem;background:#fff;transition:transform .2s,border-color .2s,box-shadow .2s}
.guide-card .bcard:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--shadow)}
.bcard h3{margin:.6rem 0 .4rem!important;font-size:1.05rem!important;line-height:1.3}
.bcard p{font-size:.88rem;margin:0 0 .6rem}.bcard small{color:var(--mute);font-size:.78rem}
.tag{font-size:.7rem;font-weight:700;color:var(--acc-d);background:var(--acc-soft);border-radius:999px;padding:.2rem .7rem}
.cta{margin-top:2rem;padding:1.2rem 1.4rem;border-radius:14px;background:var(--acc-soft);border:1px solid #c7d9fb;color:var(--ink)}
.cta p{margin:.3rem 0 0}

/* ---------- 6. Forms, buttons, contact, account, admin ---------- */
.fl{display:grid;gap:.4rem;font-weight:600;font-size:.85rem;color:var(--ink)}
.fi,.cf input,.cf textarea,.cf select{font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1px solid #9a9aa6;border-radius:6px;padding:.7rem .85rem;width:100%}
.fi::placeholder,.cf input::placeholder,.cf textarea::placeholder{color:#a4a4b0}
.fi:focus,.cf input:focus,.cf textarea:focus,.cf select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
textarea.fi{resize:vertical;min-height:7rem}
.cf{display:grid;gap:1rem;margin:1.2rem 0}
.cf label{font-weight:600;color:var(--ink);display:grid;gap:.35rem}
.cf button,.btn-red{border:0;color:#fff;font:700 .95rem 'Plus Jakarta Sans',sans-serif;padding:.8rem 1.6rem;border-radius:8px;cursor:pointer;background:var(--acc);transition:background .15s,transform .1s}
.cf button{justify-self:start}
.cf button:hover,.btn-red:hover{background:var(--acc-d)}
.btn-red:disabled,.cf button:disabled{opacity:.6;cursor:wait}
.btn-ghost{border:1px solid #9a9aa6;background:#fff;color:var(--ink);font:700 .95rem 'Plus Jakarta Sans',sans-serif;padding:.8rem 1.4rem;border-radius:8px;cursor:pointer}
.btn-ghost:hover{border-color:var(--ink)}
.msg-err{color:#c0392b;font-weight:600;min-height:1.2rem;margin:.2rem 0 0;font-size:.88rem}
.msg-ok{color:#1b8a4b;font-weight:600;margin:.2rem 0 0;font-size:.88rem}
.hint{font-weight:400;font-size:.8rem;color:var(--mute)}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);font:600 .88rem 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-decoration:underline}

/* contact page (two columns: intro left, form card right) */
.contact-wrap{flex:1;display:grid;gap:2rem 4rem;align-items:center;max-width:72rem;width:100%;margin:0 auto;padding:3rem 1.5rem 4rem}
@media(min-width:900px){.contact-wrap{grid-template-columns:1fr 1.1fr}}
.contact-intro h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;margin:0 0 1.2rem;color:var(--ink)}
.contact-intro p{font-size:1.15rem;line-height:1.6;color:var(--mute);max-width:26rem;margin:0}
.contact-card{background:#fff;border-radius:16px;box-shadow:0 18px 50px -20px rgba(30,30,50,.35);padding:2rem}
.contact-card .row{display:grid;gap:1.1rem}
@media(min-width:560px){.contact-card .row.two{grid-template-columns:1fr 1fr}}
.contact-card .step{display:grid;gap:1.1rem}
.sel{position:relative}
.sel>i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#777;pointer-events:none}
.sel select{appearance:none;-webkit-appearance:none;padding-left:2.5rem;padding-right:2.2rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center}
.fi.bubble{border-radius:22px;padding:1.1rem 1.3rem;line-height:1.6;resize:vertical;min-height:11rem}
.contact-card .actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.2rem}
.contact-card .done{text-align:center;padding:1.5rem 0}
.contact-card .done i{font-size:2.4rem;color:#1b8a4b;margin-bottom:.8rem}
.contact-card .done h2{margin:.2rem 0 .4rem;font-size:1.4rem}
.contact-card .done p{color:var(--mute)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* account + admin shells */
.narrow{max-width:27rem;margin:0 auto}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:2rem}
.auth-card h1,.auth-card h2{margin:0 0 .4rem;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.auth-card>p{margin:0 0 1.2rem;color:var(--mute)}
.auth-card .cf{margin:0}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:1rem;font-size:.88rem}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.top h2{margin:0}
.btns{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{border:0;color:#fff;font:700 .92rem 'Plus Jakarta Sans',sans-serif;padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;background:var(--acc);transition:background .15s,transform .1s}
.btn:hover{background:var(--acc-d)}
.btn.alt{background:#fff;color:var(--ink);border:1px solid #c4c4ce}
.btn.alt:hover{border-color:var(--ink);background:#fff}
.btn[disabled],.sm[disabled]{opacity:.55;cursor:wait}
.sm{border:1px solid #c4c4ce;background:#fff;color:var(--ink);font:600 .8rem 'Plus Jakarta Sans',sans-serif;padding:.4rem .75rem;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.sm:hover{border-color:var(--ink)}
.sm.go{background:#e8f7ee;border-color:#b9e3c9;color:#17803f}
.sm.danger{color:#c0392b}
.pill{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:.15rem .65rem;margin-right:.4rem;vertical-align:middle}
.pill.pub{background:#e1f5ea;color:#17803f}.pill.dr{background:#eeeef2;color:#5f5f6d}.pill.old{background:var(--acc-soft);color:var(--acc-d)}
.pitem{display:grid;gap:.7rem;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:#fff;margin-top:.7rem}
.pitem h3{margin:0;font-size:1.05rem;line-height:1.35;color:var(--ink)}
.pitem .pm{font-size:.82rem;margin:.2rem 0 0}
.acts{display:flex;flex-wrap:wrap;gap:.4rem}
.empty{text-align:center;padding:2rem 1rem;border:1.5px dashed #c4c4ce;border-radius:14px;margin-top:1rem}
.bar{display:grid;gap:.6rem;margin:1.2rem 0 .4rem}@media(min-width:640px){.bar{grid-template-columns:1fr 12rem}}
.bar input,.bar select{font:inherit;padding:.65rem .9rem;border:1px solid #9a9aa6;border-radius:8px;background:#fff;color:var(--ink)}
.stats{font-size:.9rem;margin:.6rem 0 0}
.tools{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.tools details{margin-top:.6rem}
.tools .cf{margin:.8rem 0 0}
.row2{display:grid;gap:1rem}@media(min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.cf textarea{font-family:var(--mono);font-size:.85rem;line-height:1.55}
.tb{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.1rem}
.tb button{border:1px solid #c4c4ce;background:#fff;color:var(--ink);font:600 .8rem 'Plus Jakarta Sans',sans-serif;padding:.35rem .65rem;border-radius:8px;cursor:pointer}
.tb button:hover{border-color:var(--acc);color:var(--acc)}
.edgrid{display:grid;gap:1.5rem}@media(min-width:960px){.edgrid{grid-template-columns:1fr 1fr;align-items:start}}
.prevwrap h3{margin-top:0}
.prev{border:1px dashed #c4c4ce;border-radius:14px;padding:1.1rem 1.3rem;max-height:70vh;overflow:auto;font-size:.95rem}
.prev h1{font-size:1.5rem}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:#2b2b33;color:#fff;padding:.7rem 1.2rem;border-radius:10px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);z-index:60;max-width:90vw;text-align:center}
.toast a{color:#a8c5ff}
.notice{border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;border:1px solid #f3dfa0;background:#fff8e1;color:#6b4a00}
.wk-card{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:#fff;display:grid;gap:.5rem}
.wk-card h3{margin:0;font-size:1.02rem;color:var(--ink)}
.wk-card p{margin:0;white-space:pre-wrap;color:var(--mute);font-size:.92rem;line-height:1.6}
.wk-grid{display:grid;gap:.8rem;margin-top:1rem}

/* ---------- 7. Tool pages (Tailwind based) and homepage ---------- */
header.tw{display:none}
.tool-section{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important}
.tool-section h1{font-size:clamp(1.5rem,3vw,2rem)!important;font-weight:800!important;letter-spacing:-.03em;line-height:1.15;color:var(--ink)!important}
.tool-section article h2,.tool-section article h3{color:var(--ink)!important}
textarea,input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],select{border-radius:8px}
textarea:focus,input:focus,select:focus{outline:none!important;border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--glow)!important}
textarea{font-family:var(--mono)}
button.bg-brand-600:not(.menu-btn){border-radius:8px!important;font-weight:700;color:#fff!important;box-shadow:none!important}
button.bg-brand-600:not(.menu-btn):hover{background:var(--acc-d)!important}
button.bg-indigo-600{border-radius:8px!important;font-weight:700}
button.bg-slate-100{border-radius:8px!important;font-weight:600}
[class*="border-dashed"]{border-color:#c4c4ce!important;border-radius:14px!important;background:#fafafc!important;transition:background .2s,border-color .2s}
[class*="border-dashed"]:hover{border-color:var(--acc)!important;background:var(--acc-soft)!important}
input[type=range]{accent-color:var(--acc)}
aside>div{border-radius:14px!important;box-shadow:none}
aside>div.bg-brand-50{background:var(--acc-soft)!important;border-color:#c7d9fb!important}
aside a{transition:transform .15s,color .15s}
aside a:hover{transform:translateX(4px);color:var(--acc)!important}
.bg-green-100{background:#e1f5ea!important;color:#17803f!important;font-weight:700}

/* homepage: tool directory */
.hero{text-align:left;padding-top:2.4rem}
.hero-top{display:grid;gap:1.6rem;align-items:center}
@media(min-width:980px){.hero-top{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:3rem}}
.hero-quick{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.2rem 1.2rem 1rem}
.hero-quick h2{margin:0 0 .8rem;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.hero-quick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.hero-quick a{display:flex;align-items:center;gap:.55rem;height:100%;padding:.65rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink);font-weight:600;font-size:.86rem;text-decoration:none;transition:border-color .15s,color .15s,transform .15s}
.hero-quick a:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.hero-quick i{width:1.1rem;text-align:center;color:var(--acc)}
.tool-section h1+p{margin-top:.55rem;line-height:1.55}
.tool-section>.flex:first-child{margin-bottom:1.3rem!important}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;color:var(--acc-d);background:var(--acc-soft);border:1px solid #c7d9fb;border-radius:999px;padding:.4rem .9rem}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#22a861;box-shadow:0 0 0 0 rgba(34,168,97,.6);animation:ping 2s infinite}
.hero-title{font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.04em;margin:1rem 0 .7rem;max-width:44rem;color:var(--ink)}
.grad{background:linear-gradient(90deg,#2563eb,#38bdf8,#2563eb);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 7s linear infinite}
.hero-sub{max-width:38rem;margin:0;font-size:1.02rem;line-height:1.65;color:var(--mute)}
.dir-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.2rem}
.dir-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{border:1px solid #c4c4ce;background:#fff;color:var(--mute);font:600 .82rem 'Plus Jakarta Sans',sans-serif;padding:.4rem .95rem;border-radius:999px;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero-cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media(min-width:640px){.hero-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.hero-cards{grid-template-columns:repeat(4,1fr)}}
.hero-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.35rem;text-align:left;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem;color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}
.hero-card:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--shadow)}
.hero-card.is-hidden{display:none}
.hero-card i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-size:1.05rem;margin-bottom:.5rem;color:#2563eb;background:#eaf1ff}
.hero-card:nth-child(2) i{color:#4f46e5;background:#ecebff}
.hero-card:nth-child(3) i{color:#0891b2;background:#e0f6fa}
.hero-card:nth-child(4) i{color:#17803f;background:#e1f5ea}
.hero-card b{display:block;font-size:1rem;font-weight:700}
.hero-card small{font-size:.82rem;line-height:1.5;color:var(--mute)}
.hc-tag{align-self:flex-start;font-size:.68rem;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:.12rem .6rem}
.hc-vis{margin:.5rem 0 .3rem;padding:.55rem .7rem;border-radius:10px;background:var(--soft);border:1px solid var(--line);font:500 .74rem/1.5 var(--mono);color:#4a4a58}
.hc-vis em{font-style:normal;color:var(--acc)}
.hc-cta{margin-top:auto;padding-top:.5rem;font-size:.84rem;font-weight:700;color:var(--acc)}

/* image tool batch list */
.imgrow{display:grid;grid-template-columns:64px 1fr;gap:.2rem .9rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.7rem;background:#fff}
@media(min-width:640px){.imgrow{grid-template-columns:64px 1fr auto}}
.imgrow .th{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#eee}
.imgrow .nm{font-weight:600;font-size:.85rem;color:var(--ink);word-break:break-all}
.imgrow .st{font-size:.75rem;color:var(--mute)}
.imgrow .st b{color:#17803f}.imgrow .st b.up{color:#c0392b}
.imgrow .st.err{color:#c0392b;font-weight:600}
.imgrow a.dl{font-size:.78rem;font-weight:700;color:#fff!important;background:var(--acc);border-radius:8px;padding:.45rem .8rem;text-decoration:none;grid-column:1/-1;justify-self:start}
@media(min-width:640px){.imgrow a.dl{grid-column:auto}}

/* ---------- 8. Animation ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes gradShift{to{background-position:200% center}}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sh{animation:slideDown .5s cubic-bezier(.2,.7,.2,1) both}
.lm{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sh .brand:hover .lm{transform:rotate(-12deg) scale(1.08)}
.hsign,.btn,.btn-red,.cf button{position:relative;overflow:hidden}
.hsign::after,.btn::after,.btn-red::after,.cf button::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.hsign:hover::after,.btn:hover::after,.btn-red:hover::after,.cf button:hover::after{left:130%}
button:active:not(:disabled),.btn:active,.sm:active,.btn-red:active{transform:scale(.97)}
.hero-main>*,.hero-quick,.dir-head{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero-main>:nth-child(1){animation-delay:.05s}.hero-main>:nth-child(2){animation-delay:.14s}.hero-main>:nth-child(3){animation-delay:.24s}.hero-main>:nth-child(4){animation-delay:.3s}.hero-quick{animation-delay:.34s}.dir-head{animation-delay:.38s}
.hero-card{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero-card:nth-child(1){animation-delay:.42s}.hero-card:nth-child(2){animation-delay:.5s}.hero-card:nth-child(3){animation-delay:.58s}.hero-card:nth-child(4){animation-delay:.66s}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.09),transparent 70%)}
.hero-card:hover::after{opacity:1}
.hero-card i{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.hero-card:hover i{transform:scale(1.1) rotate(-6deg);animation:bob 1.6s ease-in-out .35s infinite}
.hc-cta{display:inline-block;transition:transform .2s}
.hero-card:hover .hc-cta{transform:translateX(6px)}
.guide-card,.auth-card,.contact-card,.tool-section{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.contact-intro{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.pitem,.wk-card,.imgrow{animation:fadeUp .35s ease both}
.toast{animation:toastIn .3s ease both}
.guide-card a:not(.bcard):not(.sm){background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s}
.guide-card a:not(.bcard):not(.sm):hover{background-size:100% 1.5px}
@supports (animation-timeline:view()){.bcard,.cta,.guide-card pre{animation:reveal linear backwards;animation-timeline:view();animation-range:entry 0% cover 30%}}
@supports (animation-timeline:scroll()){html::before{content:"";position:fixed;top:0;left:0;width:100%;height:3px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:70;pointer-events:none;animation:grow linear both;animation-timeline:scroll(root)}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* ---------- Page text blocks (guides, FAQs) and home cards ---------- */
.seo{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.6rem 1.2rem;color:#4b4b57;font-size:.95rem;line-height:1.7}
.seo h2{margin:1.6rem 0 .6rem;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.seo h2:first-child{margin-top:0}
.seo h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:700;color:var(--ink)}
.seo p{margin:.4rem 0 .8rem}
.seo ul,.seo ol{margin:.4rem 0 .9rem;padding-left:1.3rem}
.seo ul{list-style:disc}.seo ol{list-style:decimal}
.seo li{margin:.3rem 0}
.seo a{color:var(--acc);font-weight:600;text-decoration:none}.seo a:hover{text-decoration:underline}
.seo pre{margin:.4rem 0 1rem;padding:.8rem 1rem;background:#f3f3f6;border:1px solid var(--line);border-radius:10px;overflow:auto;font-size:.85rem;line-height:1.5;color:var(--ink)}
.seo code{background:#f3f3f6;border-radius:6px;padding:.05rem .35rem;font-size:.85em}
.seo .faq{display:grid;gap:.6rem;margin:.6rem 0 1rem}
.seo .faq details{border:1px solid var(--line);border-radius:12px;background:#fafafc;padding:.7rem 1rem}
.seo .faq summary{cursor:pointer;font-weight:700;color:var(--ink)}
.seo .faq details p{margin:.5rem 0 .2rem}
.home-sec{margin-bottom:1.2rem}

/* ---------- Login / sign-up page ---------- */
.ac{max-width:420px;width:100%;margin:2.4rem auto 3rem;text-align:center}
.ac h1{margin:0 0 .4rem;font-size:1.55rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ac .sub{margin:0 0 1.4rem;font-size:.92rem;color:var(--mute)}
.alink{background:none;border:0;padding:0;font:inherit;color:var(--acc);cursor:pointer}
.alink:hover{text-decoration:underline}
.social{display:grid;gap:.6rem}
.sbtn{display:flex;align-items:center;justify-content:center;gap:.7rem;height:46px;border-radius:8px;color:#fff;font-weight:600;font-size:.93rem;text-decoration:none;transition:filter .15s,transform .15s}
.sbtn:hover{filter:brightness(.94);transform:translateY(-1px)}
.sbtn i{font-size:1.1rem}
.sbtn.g{background:#4285f4}.sbtn.f{background:#0866ff}.sbtn.m{background:#1b1b1b}
.or{display:flex;align-items:center;gap:1rem;margin:1.2rem 0;color:#a4a4b0;font-size:.85rem}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.af{display:grid;gap:.8rem;text-align:left}
.ac .social:empty{display:none}
.field{position:relative;display:block;margin:0}
.field>i:first-child{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);font-size:.9rem;color:#6a6a78}
.field input{width:100%;height:50px;border:1px solid #d6d6de;border-radius:8px;background:#fff;font:inherit;font-size:.93rem;color:var(--ink);padding:1.2rem 2.8rem .25rem 3rem;transition:border-color .15s,box-shadow .15s}
.field.plain input{padding-top:0;padding-bottom:0}
.field .lb{position:absolute;left:3rem;top:.4rem;font-size:.7rem;color:var(--mute);pointer-events:none}
.field input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.field input::placeholder{color:#7a7a86}
.eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:38px;height:38px;background:none;border:0;color:#6a6a78;font-size:1rem;cursor:pointer;border-radius:8px}
.eye:hover{color:var(--ink);background:var(--soft)}
.big{height:46px;border:0;border-radius:8px;background:var(--acc);color:#fff;font:600 .95rem 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:background .15s}
.big:hover{background:var(--acc-d)}
.big:disabled{opacity:.7;cursor:wait}
.ac .foot{margin:1.2rem 0 0;font-size:.88rem}
.ac .fine{margin:1rem 0 0;color:var(--mute);font-size:.8rem}
.ac .msg-err{margin:0;text-align:center;min-height:0}
.ac .msg-err:empty{display:none}
.ac .msg-ok{text-align:center}
@media(max-width:520px){.ac h1{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html::before{display:none}
}

/* PDF toolkit: every tool, in groups packed into columns so there are no empty gaps */
.pgrid{columns:3 200px;column-gap:1rem;margin-bottom:1.4rem}
.pg{break-inside:avoid;display:inline-block;width:100%;margin:0 0 1rem;padding:.75rem .55rem .5rem;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.pgt{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin:0 0 .35rem .5rem}
#pdfPanel{border-top:1px solid var(--line);padding-top:1.3rem}
.pgi{display:flex;align-items:center;gap:.65rem;width:100%;padding:.45rem .5rem;border-radius:10px;border:0;background:transparent;text-align:left;font-size:.9rem;font-weight:600;color:#1f2937;cursor:pointer;transition:background .15s}
.pgi:hover{background:var(--card)}
.pgi.is-on{background:#eaf1ff;color:#1d4ed8}
.pgb{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem}

/* Currency converter */
.cur-grid{display:grid;grid-template-columns:1fr 1fr auto 1fr;gap:.8rem;align-items:end}
.cur-swap{width:44px;height:44px;border-radius:50%;border:1px solid #c7d9fb;background:#eaf1ff;color:#2563eb;cursor:pointer;transition:transform .2s,background .15s}
.cur-swap:hover{background:#dbeafe;transform:rotate(180deg)}
.cur-out{margin-top:1.1rem;padding:1.1rem 1.2rem;border-radius:16px;background:#eaf1ff;border:1px solid #c7d9fb}
.cur-big{font-size:1.15rem;color:#334155}
.cur-big b{font-size:1.7rem;color:#1d4ed8;display:block;margin-top:.15rem}
.cur-rate{font-size:.78rem;color:#64748b;margin-top:.4rem}
.cur-status{font-size:.78rem;color:#64748b}
.cur-status.live i{color:#16a34a;font-size:.55rem;vertical-align:middle;animation:curpulse 1.6s infinite}
.cur-status.warn{color:#b45309}
@keyframes curpulse{50%{opacity:.25}}
.cur-table{width:100%;font-size:.88rem;border-collapse:collapse}
.cur-table td{padding:.5rem .4rem;border-bottom:1px solid #eef1f6}
.cur-table td:last-child{text-align:right;font-weight:600;color:#1e293b}
.cur-table td span{color:#94a3b8;font-size:.78rem;margin-left:.3rem}
.cur-table tr{cursor:pointer}.cur-table tr:hover{background:#f6f9ff}
@media(max-width:640px){.cur-grid{grid-template-columns:1fr 1fr}.cur-swap{grid-column:1/-1;justify-self:center;order:3}.cur-grid>div:nth-child(4){grid-column:1/-1}}

/* Developer converters */
.dvgrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:1rem}
.dv-panel{border-top:1px solid #e5e9f0;padding-top:1.1rem}
.dv-table{width:100%;font-size:.8rem;border-collapse:collapse}
.dv-table th{background:#eaf1ff;color:#1d4ed8;text-align:left;padding:.45rem .6rem;font-weight:600;white-space:nowrap}
.dv-table td{padding:.45rem .6rem;border-bottom:1px solid #eef1f6;vertical-align:top;word-break:break-word}
.dv-table td.mono,.mono{font-family:'JetBrains Mono',monospace;font-size:.78rem}
.dv-note{font-size:.78rem;color:#64748b;margin-top:.7rem;line-height:1.55}
.dv-note code{background:#f1f5f9;padding:0 .25rem;border-radius:4px}
.dv-err{font-size:.85rem;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:.55rem .8rem}
.dv-mode{padding:.45rem .9rem;border-radius:999px;border:1px solid #c7d9fb;background:#fff;color:#1d4ed8;font-size:.82rem;font-weight:600;cursor:pointer}
.dv-mode.is-on{background:#2563eb;color:#fff;border-color:#2563eb}

/* ---------- 9. Related tools box, drop overlay, theme button ---------- */
.related{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem}
.related h2{margin:0 0 .9rem;font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.rel-grid{display:grid;gap:.75rem}
@media(min-width:640px){.rel-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.rel-card{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-2px);border-color:var(--acc);box-shadow:var(--shadow)}
.rel-card i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--acc-soft);color:var(--acc);font-size:1rem}
.rel-card b{display:block;font-size:.92rem;font-weight:700}
.rel-card small{display:block;margin-top:.15rem;font-size:.8rem;line-height:1.45;color:var(--mute)}

.drop-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(37,99,235,.10);border:3px dashed var(--acc);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.drop-overlay.on{opacity:1;visibility:visible}
.drop-overlay>div{display:grid;justify-items:center;gap:.3rem;padding:1.4rem 2rem;border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);text-align:center}
.drop-overlay i{font-size:2rem;color:var(--acc);margin-bottom:.3rem}
.drop-overlay small{color:var(--mute)}

.theme-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:1rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.theme-btn:hover{border-color:var(--acc);color:var(--acc)}
.hact:empty{display:none}
@media(max-width:900px){.theme-btn{order:3}.menu-btn{order:4}}

/* tool search (header panel and home page) */
.search-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;margin-left:auto;transition:color .15s,border-color .15s}
.search-btn:hover,.search-btn[aria-expanded=true]{border-color:var(--acc);color:var(--acc)}
.hact:not(:empty)+.search-btn,.search-btn+.theme-btn{margin-left:0}
.head-search{flex:0 0 100%;order:6;padding:0 0 .8rem}
.head-search[hidden]{display:none}
tool-search{position:relative;z-index:30;display:block;max-width:40rem}
.head-search tool-search{margin:0 auto}
tool-search .ts-ic{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
tool-search input{width:100%;height:46px;padding:0 1rem 0 2.6rem;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:500 .95rem 'Plus Jakarta Sans',system-ui,sans-serif}
tool-search input::placeholder{color:var(--mute)}
.ts-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;margin:0;padding:.35rem;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:60vh;overflow:auto}
.ts-list[hidden]{display:none}
.ts-list a{display:block;padding:.6rem .75rem;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}
.ts-list a:hover,.ts-list li[aria-selected=true] a{background:var(--acc-soft);color:var(--acc)}
.ts-none{padding:.6rem .75rem;color:var(--mute);font-size:.88rem}
.home-search{margin-top:1.3rem}
.home-search input{height:52px;font-size:1rem;box-shadow:var(--shadow)}
@media(max-width:900px){.search-btn{order:3}.theme-btn{order:3}}

/* ---------- 10. Dark mode ----------
   Turned on by data-theme="dark" on <html> (set in layout.js). The colour tokens
   change first; the rules below cover places that use fixed light colours. */
html[data-theme=dark]{
  color-scheme:dark;
  --bg:#121318;--card:#1b1d24;--ink:#e8e8ef;--mute:#a4a6b4;--line:#2d303a;--soft:#22252e;
  --acc:#3b82f6;--acc-d:#2563eb;--acc-soft:#1b2944;--glow:rgba(59,130,246,.3);
  --foot:#0c0d11;--shadow:0 10px 30px -14px rgba(0,0,0,.7);
  --link:#7eabff;
}
html[data-theme=dark] ::selection{background:#2b4a85;color:#fff}
:where(html[data-theme=dark]) a{color:var(--link)}
html[data-theme=dark] .guide-card a,html[data-theme=dark] .seo a,html[data-theme=dark] .linkbtn,html[data-theme=dark] .alink,
html[data-theme=dark] .hc-cta,html[data-theme=dark] .hc-vis em,html[data-theme=dark] .sh .brand b,html[data-theme=dark] .mnav a.is-active{color:var(--link)}
html[data-theme=dark] .sf a{color:#fff}
html[data-theme=dark] .rel-card{color:var(--ink)}
html[data-theme=dark] .rel-card i,html[data-theme=dark] .drop-overlay i{color:var(--link)}
html[data-theme=dark] .sh,html[data-theme=dark] .menu-btn{background:var(--card)}
html[data-theme=dark] .sh a.hlogin{color:var(--ink)}
html[data-theme=dark] .sh a.hsign{color:#fff}

/* cards and panels */
html[data-theme=dark] .guide-card .bcard,html[data-theme=dark] .contact-card,html[data-theme=dark] .auth-card,
html[data-theme=dark] .pitem,html[data-theme=dark] .wk-card,html[data-theme=dark] .imgrow,html[data-theme=dark] .hero-card,
html[data-theme=dark] .seo,html[data-theme=dark] .chip{background:var(--card)}
html[data-theme=dark] .seo{color:#c3c5d1}
html[data-theme=dark] .seo pre,html[data-theme=dark] .seo code,html[data-theme=dark] .guide-card code,html[data-theme=dark] .dv-note code{background:#262a34;color:#d6e2ff}
html[data-theme=dark] .seo .faq details{background:var(--soft)}
html[data-theme=dark] .guide-card pre{background:#0f1015}
html[data-theme=dark] .cta,html[data-theme=dark] .eyebrow{border-color:#2a3d63}
html[data-theme=dark] .tag,html[data-theme=dark] .eyebrow,html[data-theme=dark] .pill.old{color:#a8c5ff}
html[data-theme=dark] .chip.is-on{background:var(--ink);color:var(--bg)}
html[data-theme=dark] .chip,html[data-theme=dark] .empty,html[data-theme=dark] .prev{border-color:#3a3e4a}
html[data-theme=dark] .hc-vis{color:#c3c5d1}
html[data-theme=dark] .hero-card i{background:#1b2944;color:#7eabff}
html[data-theme=dark] .hero-card:nth-child(2) i{background:#25224a;color:#a5a0ff}
html[data-theme=dark] .hero-card:nth-child(3) i{background:#123139;color:#5fd0e6}
html[data-theme=dark] .hero-card:nth-child(4) i{background:#14321f;color:#6fd69a}
html[data-theme=dark] .imgrow .th{background:#2a2d36}
html[data-theme=dark] .notice{background:#33290f;border-color:#5c4a14;color:#f3d58a}
html[data-theme=dark] .toast{background:#e8e8ef;color:#121318}

/* forms and buttons */
html[data-theme=dark] .fi,html[data-theme=dark] .cf input,html[data-theme=dark] .cf textarea,html[data-theme=dark] .cf select,
html[data-theme=dark] .bar input,html[data-theme=dark] .bar select,html[data-theme=dark] .field input{background:#15171d;border-color:#454956;color:var(--ink)}
html[data-theme=dark] .fi::placeholder,html[data-theme=dark] .cf input::placeholder,html[data-theme=dark] .cf textarea::placeholder,html[data-theme=dark] .field input::placeholder{color:#7d7f8e}
html[data-theme=dark] .sel select{background:#15171d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ddd' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center}
html[data-theme=dark] .sel>i,html[data-theme=dark] .field>i:first-child,html[data-theme=dark] .eye{color:#a4a6b4}
html[data-theme=dark] .btn-ghost,html[data-theme=dark] .btn.alt,html[data-theme=dark] .btn.alt:hover,html[data-theme=dark] .sm,html[data-theme=dark] .tb button{background:var(--soft);border-color:#454956;color:var(--ink)}
html[data-theme=dark] .sm.go{background:#14321f;border-color:#21543a;color:#6fd69a}
html[data-theme=dark] .sm.danger,html[data-theme=dark] .msg-err{color:#ff8a80}
html[data-theme=dark] .msg-ok{color:#6fd69a}
html[data-theme=dark] .pill.pub{background:#14321f;color:#6fd69a}
html[data-theme=dark] .pill.dr{background:#2a2d36;color:#c3c5d1}

/* tool pages (Tailwind colour classes) */
html[data-theme=dark] .bg-white{background-color:var(--card)!important}
html[data-theme=dark] .bg-slate-50{background-color:#1f222a!important}
html[data-theme=dark] .bg-slate-100,html[data-theme=dark] .hover\:bg-slate-100:hover{background-color:#272a34!important}
html[data-theme=dark] .bg-slate-200,html[data-theme=dark] .hover\:bg-slate-200:hover{background-color:#30343f!important}
html[data-theme=dark] .hover\:bg-slate-300:hover{background-color:#3a3e4a!important}
html[data-theme=dark] .text-slate-900,html[data-theme=dark] .text-slate-800{color:var(--ink)!important}
html[data-theme=dark] .text-slate-700{color:#d3d4de!important}
html[data-theme=dark] .text-slate-600{color:#b8bac7!important}
html[data-theme=dark] .text-slate-500{color:#a0a2b1!important}
html[data-theme=dark] .text-slate-400{color:#828494!important}
html[data-theme=dark] .border-slate-200{border-color:var(--line)!important}
html[data-theme=dark] .border-slate-300{border-color:#3e424e!important}
html[data-theme=dark] .bg-brand-50,html[data-theme=dark] aside>div.bg-brand-50{background-color:var(--acc-soft)!important;border-color:#2a3d63!important}
html[data-theme=dark] .border-brand-100{border-color:#2a3d63!important}
html[data-theme=dark] .text-brand-900,html[data-theme=dark] .text-brand-700{color:#a8c5ff!important}
html[data-theme=dark] .text-brand-600,html[data-theme=dark] .text-brand-500,html[data-theme=dark] .hover\:text-brand-600:hover{color:var(--link)!important}
html[data-theme=dark] .bg-green-50{background-color:#12281b!important}
html[data-theme=dark] .bg-green-100{background:#14321f!important;color:#6fd69a!important}
html[data-theme=dark] .border-green-200{border-color:#21543a!important}
html[data-theme=dark] .text-green-800,html[data-theme=dark] .text-green-600{color:#6fd69a!important}
html[data-theme=dark] .bg-red-50{background-color:#341717!important}
html[data-theme=dark] .border-red-200{border-color:#6b2a2a!important}
html[data-theme=dark] .text-red-700,html[data-theme=dark] .text-red-600,html[data-theme=dark] .hover\:text-red-500:hover{color:#ff8a80!important}
html[data-theme=dark] .text-amber-700{color:#f0b45a!important}
html[data-theme=dark] [class*="border-dashed"]{background:#181a20!important;border-color:#454956!important}
html[data-theme=dark] [class*="border-dashed"]:hover{background:var(--acc-soft)!important;border-color:var(--acc)!important}
html[data-theme=dark] aside a:hover{color:var(--link)!important}
html[data-theme=dark] textarea::placeholder,html[data-theme=dark] input::placeholder{color:#7d7f8e}
html[data-theme=dark] #qrContainer img,html[data-theme=dark] #qrContainer canvas{background:#fff;padding:6px;border-radius:6px}

/* PDF toolkit, developer converters, currency */
html[data-theme=dark] .pgt{color:#a0a2b1}
html[data-theme=dark] .pgi{color:var(--ink)}
html[data-theme=dark] .pgi:hover{background:var(--card)}
html[data-theme=dark] .pgi.is-on{background:var(--acc-soft);color:#a8c5ff}
html[data-theme=dark] .dv-panel{border-top-color:var(--line)}
html[data-theme=dark] .dv-table th{background:var(--acc-soft);color:#a8c5ff}
html[data-theme=dark] .dv-table td,html[data-theme=dark] .cur-table td{border-bottom-color:var(--line)}
html[data-theme=dark] .dv-note,html[data-theme=dark] .cur-rate,html[data-theme=dark] .cur-status{color:#a0a2b1}
html[data-theme=dark] .dv-err{background:#341717;border-color:#6b2a2a;color:#ff8a80}
html[data-theme=dark] .dv-mode{background:var(--soft);border-color:#2a3d63;color:#a8c5ff}
html[data-theme=dark] .dv-mode.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-theme=dark] .cur-out,html[data-theme=dark] .cur-swap{background:var(--acc-soft);border-color:#2a3d63}
html[data-theme=dark] .cur-big{color:#c3c5d1}
html[data-theme=dark] .cur-big b,html[data-theme=dark] .cur-swap{color:#a8c5ff}
html[data-theme=dark] .cur-table td:last-child{color:var(--ink)}
html[data-theme=dark] .cur-table tr:hover{background:var(--soft)}
html[data-theme=dark] .ts-list a:hover,html[data-theme=dark] .ts-list li[aria-selected=true] a{color:var(--link)}
html[data-theme=dark] .hero-quick a:hover{color:var(--link)}
html[data-theme=dark] .hero-quick i{color:var(--link)}

/* ---------- 11. Menu dropdown, typing test, age calculator, resume maker ---------- */
.mdrop{position:relative}
.mdrop-btn{display:flex;align-items:center;gap:.3rem;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;padding:.55rem .85rem;border-radius:8px}
.mdrop-btn:hover{background:var(--soft)}
.mdrop-btn.is-active{color:var(--acc)}
.mdrop-btn svg{transition:transform .15s}
.mdrop.open .mdrop-btn svg{transform:rotate(180deg)}
.mdrop-list{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.35rem;z-index:45}
.mdrop.open .mdrop-list{display:grid}
.mdrop-list a{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;padding:.6rem .75rem}
@media(max-width:900px){
  .mdrop-btn{width:100%;padding:.8rem .6rem}
  .mdrop-list{position:static;box-shadow:none;border:0;padding:0 0 0 .8rem;min-width:0}
}

/* shared form bits for the new tools */
.nt-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nt-f{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--mute)}
.nt-f input,.nt-f select,.nt-in{width:100%;font:inherit;font-size:.92rem;font-weight:500;color:var(--ink);background:var(--card);border:1px solid #cfd2dc;border-radius:10px;padding:.55rem .7rem}
.nt-f input:focus,.nt-f select:focus,.nt-in:focus,.ty-input:focus{outline:2px solid var(--glow);border-color:var(--acc)}
.nt-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.88rem;font-weight:700;border-radius:10px;padding:.6rem 1rem;border:1px solid var(--acc);background:var(--acc);color:#fff;cursor:pointer;transition:background .15s}
.nt-btn:hover{background:var(--acc-d)}
.nt-btn:disabled{opacity:.6;cursor:wait}
.nt-btn.alt{background:var(--card);color:var(--ink);border-color:#cfd2dc}
.nt-btn.alt:hover{background:var(--soft)}
.nt-btn.sm{padding:.35rem .7rem;font-size:.8rem}
.nt-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* typing test */
.ty-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1rem 0}
.ty-stats div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:.6rem;text-align:center}
.ty-stats b{display:block;font-size:1.45rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ty-stats span{font-size:.72rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.03em}
@media(max-width:560px){.ty-stats{grid-template-columns:repeat(3,1fr)}.ty-stats div:nth-child(n+4){display:none}}
.ty-text{max-height:190px;overflow:auto;position:relative;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;font-size:1.12rem;line-height:1.85;color:var(--mute);user-select:none;-webkit-user-select:none}
.ty-text[lang=hi]{font-family:'Nirmala UI','Mangal','Noto Sans Devanagari',system-ui,sans-serif;font-size:1.2rem}
.ty-ok{color:#15803d}
.ty-bad{color:#b91c1c;background:#fde2e2;border-radius:3px}
.ty-cur{color:var(--ink);background:var(--acc-soft);border-bottom:2px solid var(--acc)}
.ty-input{width:100%;margin-top:.8rem;font:inherit;font-size:1.05rem;line-height:1.7;color:var(--ink);background:var(--card);border:1px solid #cfd2dc;border-radius:12px;padding:.8rem 1rem;resize:vertical;min-height:120px}
.ty-input:disabled{background:var(--soft);cursor:not-allowed}
.ty-result{margin-top:1rem;padding:1rem 1.1rem;border:1px solid #bfdbfe;background:var(--acc-soft);border-radius:14px}
.ty-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.ty-res-grid div{background:var(--card);border-radius:10px;padding:.7rem;text-align:center}
.ty-res-grid b{display:block;font-size:1.6rem;font-weight:800;color:var(--acc)}
.ty-res-grid span{font-size:.75rem;color:var(--mute);font-weight:600}

/* age calculator */
.ag-out{margin-top:1.2rem;padding:1.1rem 1.2rem;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.ag-age{font-size:1.15rem;color:var(--ink)}
.ag-age b{font-size:2rem;font-weight:800;color:var(--acc);margin-right:.15rem}
.ag-verdict{display:inline-block;margin-top:.8rem;padding:.45rem .85rem;border-radius:999px;font-weight:800;font-size:.92rem}
.ag-verdict.ok{background:#dcfce7;color:#166534}
.ag-verdict.no{background:#fee2e2;color:#991b1b}
.ag-quick{font-size:.8rem;color:var(--mute);font-weight:600}

/* resume maker */
.rs-wrap{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media(max-width:1100px){.rs-wrap{grid-template-columns:1fr}}
.rs-modes{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--soft);margin-bottom:1rem}
.rs-modes button{font:inherit;font-size:.88rem;font-weight:700;border:0;background:none;color:var(--mute);padding:.5rem 1rem;border-radius:9px;cursor:pointer}
.rs-modes button.is-on{background:var(--card);color:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rs-form fieldset{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem 1rem;margin:0 0 .9rem}
.rs-form legend{font-size:.82rem;font-weight:800;color:var(--ink);padding:0 .35rem}
.rs-form .nt-in{margin-top:.5rem}
.rs-form textarea.nt-in{resize:vertical}
.rs-item{border-top:1px dashed var(--line);padding-top:.7rem;margin-top:.7rem}
.rs-item:first-child{border-top:0;padding-top:0;margin-top:0}
.rs-kv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:.4rem;align-items:center;margin-top:.4rem}
.rs-kv .nt-in{margin-top:0}
.rs-rm{font:inherit;font-size:.78rem;font-weight:700;color:#b91c1c;background:none;border:0;cursor:pointer;padding:.3rem .4rem}
.rs-item .rs-rm{margin-top:.3rem}
.rs-add{margin-top:.6rem}
.rs-side{position:sticky;top:84px}
.rs-preview{background:#fff;color:#22232a;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:2rem 2rem 2.4rem;font-family:Helvetica,Arial,sans-serif;font-size:.86rem;line-height:1.5;min-height:520px}
.rs-preview h2{margin:0;font-size:1.6rem;font-weight:700;color:#202128;letter-spacing:-.01em}
.rs-preview h3{margin:1.1rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid #d1d9e6;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2563eb}
.rs-preview p{margin:.2rem 0}
.rs-preview ul{margin:.2rem 0 0;padding-left:1.1rem}
.rs-preview table{border-collapse:collapse;width:100%}
.rs-preview th{text-align:left;width:38%;padding:.15rem .6rem .15rem 0;font-weight:700;vertical-align:top}
.rs-preview td{padding:.15rem 0}
.rs-head{display:flex;gap:1rem;justify-content:space-between;flex-direction:row-reverse}
.rs-head>div{flex:1}
.rs-head img{width:96px;height:auto;max-height:124px;object-fit:cover;border:1px solid #ddd}
.rs-title{font-size:1rem;color:#5f6070}
.rs-contact{color:#5f6070;font-size:.82rem}
.rs-bio-tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:#2563eb;text-transform:uppercase}
.rs-entry{margin-bottom:.55rem}
.rs-row{display:flex;justify-content:space-between;gap:.6rem}
.rs-row span,.rs-org{color:#5f6070}
.rs-sign{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.4rem}
.rs-sign span:last-child{font-weight:700}
.rs-print{margin:0;background:#fff}
.rs-print .rs-preview{border:0;box-shadow:none;border-radius:0;padding:0;min-height:0}
@media print{.rs-print{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
html[data-theme=dark] .ty-ok{color:#6fd69a}
html[data-theme=dark] .ty-bad{color:#ff8a80;background:#4a1d1d}
html[data-theme=dark] .ty-result{border-color:#2a3d63}
html[data-theme=dark] .ty-res-grid b,html[data-theme=dark] .ag-age b,html[data-theme=dark] .mdrop-btn.is-active,html[data-theme=dark] .rs-modes button.is-on{color:var(--link)}
html[data-theme=dark] .ag-verdict.ok{background:#14321f;color:#6fd69a}
html[data-theme=dark] .ag-verdict.no{background:#4a1d1d;color:#ff8a80}
html[data-theme=dark] .nt-f input,html[data-theme=dark] .nt-f select,html[data-theme=dark] .nt-in,html[data-theme=dark] .ty-input,html[data-theme=dark] .nt-btn.alt{background:#15171d;border-color:#454956;color:var(--ink)}
html[data-theme=dark] .rs-rm{color:#ff8a80}
html[data-theme=dark] .rs-preview{border-color:#3a3e4a}
.rs-two{gap:.5rem}.rs-two .nt-in{margin-top:0}.rs-item>.nt-in{margin-top:.5rem}
.ag-list{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem}

/* ---------- 12. Install app (PWA) button, banner and offline page ---------- */
.install-btn{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .85rem;border-radius:10px;border:1px solid var(--acc);background:var(--acc-soft);color:var(--acc);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.install-btn:hover{background:var(--acc);color:#fff}
.install-btn[hidden]{display:none}
.hact:empty+.install-btn:not([hidden]){margin-left:auto}
.hact:empty+.install-btn:not([hidden])+.search-btn{margin-left:0}
@media(max-width:560px){.install-btn{padding:0;width:40px;justify-content:center}.install-btn span{display:none}}
.install-bar{position:fixed;left:50%;bottom:16px;z-index:60;display:flex;align-items:center;gap:.8rem;width:min(520px,calc(100% - 24px));padding:.8rem .9rem;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -12px rgba(20,20,40,.35);transform:translate(-50%,140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.install-bar.on{transform:translate(-50%,0)}
.install-bar img{border-radius:12px;flex:none}
.install-bar>div{flex:1;min-width:0}
.install-bar b{display:block;color:var(--ink);font-size:.95rem}
.install-bar small{display:block;color:var(--mute);font-size:.8rem;line-height:1.4;margin-top:.1rem}
.install-bar small b{display:inline;font-size:inherit}
.ib-share{display:inline-flex;vertical-align:-3px;color:var(--acc)}
.ib-x{flex:none;width:32px;height:32px;border:0;background:none;color:var(--mute);font-size:1.4rem;line-height:1;border-radius:8px;cursor:pointer}
.ib-x:hover{background:var(--soft)}
.offline-box{max-width:34rem;margin:4rem auto;padding:0 1.2rem;text-align:center;color:var(--mute)}
.offline-box img{border-radius:18px}
.offline-box h1{color:var(--ink);font-size:1.8rem;margin:1rem 0 .5rem}
.offline-box .nt-btn{text-decoration:none;margin:.3rem}
html[data-theme=dark] .install-btn{color:var(--link);border-color:#2a3d63}
html[data-theme=dark] .install-btn:hover{color:#fff;background:var(--acc)}
html[data-theme=dark] .ib-share{color:var(--link)}
@media(max-width:900px){.install-btn{order:3}.hact:empty+.install-btn:not([hidden]){margin-left:auto}}
@media(max-width:480px){.sh{gap:.4rem .4rem;padding:.6rem .75rem}.sh .brand{font-size:1.2rem;gap:.45rem}.lm{width:32px;height:32px}.install-btn,.search-btn,.theme-btn,.menu-btn{width:38px!important;height:38px}.menu-btn{margin-left:0}}
@media(max-width:350px){.sh .brand{font-size:1.02rem;gap:.35rem}.lm{width:28px;height:28px;font-size:.8rem}.install-btn,.search-btn,.theme-btn,.menu-btn{width:34px!important;height:34px}}

/* ---------- 13. Home tool cards: each tool has its own colour, a big index number and a tinted preview ---------- */
#toolCards{counter-reset:tool}
@media(min-width:980px){#toolCards{grid-template-columns:repeat(3,1fr);gap:1.1rem}}
#toolCards .hero-card{--c:#2563eb;counter-increment:tool;padding:1.35rem 1.35rem 1.2rem;border-radius:18px;isolation:isolate;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 9%,var(--card)) 0%,var(--card) 46%)}
#toolCards .hero-card[href^="image"]{--c:#0891b2}
#toolCards .hero-card[href^="pdf"]{--c:#dc2626}
#toolCards .hero-card[href^="typing"]{--c:#7c3aed}
#toolCards .hero-card[href^="video"]{--c:#db2777}
#toolCards .hero-card[href^="age"]{--c:#ea580c}
#toolCards .hero-card[href^="resume"]{--c:#16a34a}
#toolCards .hero-card[href^="csv"]{--c:#2563eb}
#toolCards .hero-card[href^="bulk"]{--c:#4f46e5}
#toolCards .hero-card[href^="developer"]{--c:#0f766e}
/* big faint index number in the corner */
#toolCards .hero-card::before{content:counter(tool,decimal-leading-zero);position:absolute;top:.35rem;right:1rem;z-index:-1;
  font:800 4.2rem/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.06em;color:var(--c);opacity:.1;transition:opacity .25s,transform .35s}
#toolCards .hero-card:hover::before{opacity:.2;transform:translateY(-3px)}
#toolCards .hero-card::after{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 12%,transparent),transparent 70%)}
#toolCards .hero-card:hover{border-color:var(--c);box-shadow:0 18px 36px -18px color-mix(in srgb,var(--c) 55%,transparent)}
#toolCards .hero-card i,html[data-theme=dark] #toolCards .hero-card i{width:50px;height:50px;border-radius:15px;font-size:1.2rem;color:#fff;background:var(--c);
  box-shadow:0 8px 18px -8px var(--c);order:-1;margin-bottom:.6rem}
#toolCards .hc-tag{order:0;margin-bottom:.15rem;border:0;padding:0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
#toolCards .hero-card b{font-size:1.12rem;letter-spacing:-.01em}
#toolCards .hc-vis{background:color-mix(in srgb,var(--c) 7%,var(--card));border:1px dashed color-mix(in srgb,var(--c) 40%,transparent);color:var(--ink)}
#toolCards .hc-vis em,html[data-theme=dark] #toolCards .hc-vis em{color:var(--c);font-weight:700}
#toolCards .hc-cta,html[data-theme=dark] #toolCards .hc-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:.35rem;color:var(--c)}
html[data-theme=dark] #toolCards .hero-card{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--card)) 0%,var(--card) 50%)}
html[data-theme=dark] #toolCards .hero-card::before{opacity:.18}
html[data-theme=dark] #toolCards .hc-tag,html[data-theme=dark] #toolCards .hc-vis em,html[data-theme=dark] #toolCards .hc-cta{color:color-mix(in srgb,var(--c) 65%,#fff)}

/* Recently used tools (home page) */
.recent{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1rem}
.recent[hidden]{display:none}
.recent-h{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-right:.2rem}
.recent-h i{margin-right:.35rem}
.recent a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:.82rem;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.recent a:hover{border-color:var(--acc);color:var(--acc)}
.recent a i{color:var(--acc)}
.recent-x{border:0;background:none;color:var(--mute);font-size:1.1rem;line-height:1;padding:.2rem .4rem;cursor:pointer;border-radius:6px}
.recent-x:hover{color:var(--ink);background:var(--soft)}
html[data-theme=dark] .recent a i,html[data-theme=dark] .recent a:hover{color:var(--link)}