/* Tools Check Karo — redesign v3: clean modern, soft gradients, glass header */
:root{color-scheme:light;--dash:#b9c0d8;--bg:#f4f6fb;--surf:#fff;--ink:#0f172a;--mut:#5b6478;--ln:#e3e7f1;--ac:#4f46e5;--ac2:#7c3aed;--ac3:#06b6d4;--grad:linear-gradient(135deg,#4f46e5,#7c3aed 60%,#c026d3);--r:20px;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 24px -8px rgba(15,23,42,.1);--shh:0 2px 4px rgba(15,23,42,.05),0 18px 40px -12px rgba(79,70,229,.28);--chk:rgba(100,110,140,.14);--f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--fh:var(--f);--glass:var(--surf);--gb:var(--ln)}
:root[data-theme=dark]{--bg:#0b1020;--surf:#151b2e;--ink:#eef1fa;--mut:#9aa4bd;--ln:#252d45;--ac:#818cf8;--ac2:#a78bfa;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);--shh:0 18px 40px -12px rgba(129,140,248,.35);--chk:rgba(160,170,200,.12);color-scheme:dark;--dash:#3a4566}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b1020;--surf:#151b2e;--ink:#eef1fa;--mut:#9aa4bd;--ln:#252d45;--ac:#818cf8;--ac2:#a78bfa;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);--shh:0 18px 40px -12px rgba(129,140,248,.35);--chk:rgba(160,170,200,.12);color-scheme:dark;--dash:#3a4566}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:16px/1.65 var(--f);background-color:var(--bg);background-image:radial-gradient(48rem 26rem at 10% -6%,rgba(79,70,229,.16),transparent 65%),radial-gradient(42rem 24rem at 100% 0,rgba(6,182,212,.14),transparent 65%);background-repeat:no-repeat;background-attachment:fixed;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto;width:100%;padding-block:44px 24px}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--fh);line-height:1.1;margin:0 0 .5em;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(2.2rem,6.5vw,3.6rem)}h1:not(.ht){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
h2{font-size:1.5rem}h3{font-size:1.15rem}
:focus-visible{outline:3px solid var(--ac3);outline-offset:3px;border-radius:8px}
.w{max-width:1120px;margin:0 auto;padding:0 20px;width:100%}
.crumb{color:var(--mut);font-size:.9rem;margin:0 0 14px}.crumb a{color:var(--ac);font-weight:600;text-decoration:none}.crumb a:hover{text-decoration:underline}
.lead{max-width:60ch;color:var(--mut);font-size:1.12rem;margin:0 0 6px}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.22em}
img,svg,canvas{max-width:100%}
nav a,nav button,button,.crumb a{display:inline-flex;align-items:center;gap:8px}.crumb a{gap:4px}

/* header */
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border-bottom:1px solid var(--ln)}
header .w{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding-block:11px}
.logo{display:flex;gap:10px;align-items:center;min-width:0;flex:1 1 auto;font:800 1.3rem/1.15 var(--f);letter-spacing:-.02em;text-decoration:none}
.logo i{width:30px;height:30px;flex:none;border-radius:10px;background:conic-gradient(#4f46e5 25%,#06b6d4 0 50%,#c026d3 0 75%,#f59e0b 0);box-shadow:0 4px 12px -2px rgba(79,70,229,.45)}
.hr{display:flex;gap:8px;align-items:center;flex:none;margin-left:auto}
.hr select{width:auto;min-width:0;padding:4px 14px;border-radius:999px;font-weight:600;cursor:pointer}
.mb{display:none;width:46px;height:46px;padding:0;border-radius:14px;flex:none}
header nav{order:3;flex:0 0 100%;width:100%;display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:2px 0 4px;scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
nav a,nav button{padding:7px 14px;text-decoration:none;font:600 .88rem var(--f);color:var(--mut);border-radius:999px;border:1px solid transparent;background:none;box-shadow:none;cursor:pointer;transition:background .15s,color .15s}
nav a:hover,nav button:hover{background:var(--surf);color:var(--ink);border-color:var(--ln)}
nav a[aria-current],nav button[aria-current]{background:var(--grad);color:#fff}

/* cards & forms */
.card,.drop,.ctl,.stage,.art,.fr,.q,textarea,select,input[type=color],button{background-color:var(--surf);border:1px solid var(--ln);color:var(--ink)}
.card,.drop,.ctl,.stage,.art,.fr,.q{box-shadow:var(--sh)}
.q{display:block;width:100%;max-width:540px;font:inherit;padding:15px 22px 15px 50px;border-radius:999px;margin:14px 0 30px}
.q:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px rgba(79,70,229,.18)}
.sw{position:relative;max-width:540px;margin:14px 0 30px}.sw .ic{position:absolute;left:18px;top:50%;margin-top:-.625em;pointer-events:none;color:var(--mut);z-index:1}.sw .q{margin:0;max-width:none}
.g{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.card{position:relative;display:block;width:100%;border-radius:var(--r);padding:22px;text-decoration:none;text-align:left;font:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shh);border-color:rgba(79,70,229,.45)}
.card h3{margin-bottom:.3em}.card p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.5}.card .ib{margin-bottom:14px}
.ib{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--grad);color:#fff;flex:none;box-shadow:0 8px 18px -6px rgba(124,58,237,.55)}.ib .ic{width:26px;height:26px}
.ht{display:flex;align-items:center;gap:14px}
.drop{display:block;border:2px dashed var(--dash);border-radius:var(--r);padding:36px 20px;text-align:center;cursor:pointer;margin-top:22px;transition:all .2s}.drop.on,.drop:hover{border-color:var(--ac);background:rgba(79,70,229,.06)}.drop span{display:block;color:var(--mut)}.drop .ic{display:block;width:46px;height:46px;margin:0 auto 10px;color:var(--ac)}
.work{display:grid;gap:18px;margin:20px 0;grid-template-columns:1fr}
.ctl{display:grid;gap:14px;align-content:start;border-radius:var(--r);padding:20px}.ctl label{display:grid;gap:5px;font-weight:600;font-size:.9rem}
input,select{font:inherit;width:100%;accent-color:var(--ac)}
select{padding:8px 12px;border-radius:12px}select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px rgba(79,70,229,.16)}
input[type=color]{height:40px;padding:3px;border-radius:10px}
button,input,select{min-height:44px}input[type=range]{min-height:32px}input,select,.q,textarea{font-size:16px}
.stage{background-image:repeating-conic-gradient(var(--chk) 0 25%,transparent 0 50%);background-size:20px 20px;border-radius:var(--r);padding:14px;display:grid;place-items:center;min-height:260px}
.stage p{background:var(--surf);padding:8px 14px;border-radius:12px;max-width:48ch;margin:0;border:1px solid var(--ln)}
canvas{max-width:100%;height:auto;max-height:80vh;display:block;border-radius:12px;box-shadow:0 10px 30px -10px rgba(15,23,42,.3)}
button{font:700 .98rem var(--f);justify-content:center;padding:10px 22px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(15,23,42,.3)}button:active:not(:disabled){transform:none}
.pri{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -8px rgba(124,58,237,.6)}.pri:hover:not(:disabled){box-shadow:0 14px 26px -8px rgba(124,58,237,.7)}
button:disabled{opacity:.45;cursor:not-allowed}.bar{display:flex;gap:10px}
#er{color:#dc2626;font-weight:700;min-height:1.5em;margin:8px 0 0}
textarea{width:100%;font:inherit;padding:14px 18px;border-radius:var(--r)}
.fl{display:grid;gap:10px;margin-top:16px}.fr{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 18px;border-radius:16px}.fr span{overflow-wrap:anywhere;font-size:1.2rem}
.art{border-radius:var(--r);padding:24px;margin:30px 0}.art h2{font-size:1.35rem}.art p{margin:0;color:var(--mut)}
.pg p{max-width:68ch;color:var(--mut)}.pg h2{margin-top:1.6em}.cf{display:grid;gap:14px;max-width:540px;margin-top:18px}.cf label{display:grid;gap:5px;font-weight:600}

/* footer */
footer{flex-shrink:0;margin-top:48px;padding:30px 0 calc(30px + env(safe-area-inset-bottom,0px));background:var(--surf);border-top:1px solid var(--ln);color:var(--mut);font-size:.92rem;position:relative}
footer::before{content:"";position:absolute;inset:-1px 0 auto;height:3px;background:var(--grad)}
footer .w{display:flex;flex-direction:column;gap:14px}
footer .fn{display:flex!important;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;width:auto}
footer .fn a{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font-weight:600;text-decoration:none}
footer .fn a:hover{color:var(--ac);background:none;text-decoration:underline}
footer span{line-height:1.5;max-width:58ch}

@media(min-width:800px){.work{grid-template-columns:300px 1fr}}
@media(min-width:820px){footer .w{flex-direction:row;justify-content:space-between;align-items:center}}
@media(max-width:819px){
 .mb{display:inline-flex}
 header nav{display:none;overflow:auto;white-space:normal;flex-direction:column;gap:2px;padding-top:8px}
 header nav[data-open]{display:flex;max-height:70vh}
 header nav a,header nav button{padding:12px 14px;border-radius:12px}
 .logo{font-size:1.15rem;gap:8px}.hr{gap:6px}.hr select{padding:4px 12px;font-size:.9rem;max-width:112px}
}
@media(max-width:799px){.stage{order:-1;min-height:200px}.bar{position:sticky;bottom:0;z-index:4;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));margin:0 -20px;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--ln)}.bar button{flex:1}}
@media(max-width:480px){main{padding-block:26px 16px}.drop{padding:26px 12px}.ib{width:42px;height:42px}.ht{gap:10px}h1{font-size:1.9rem}}
@media(max-width:360px){.logo{font-size:1.05rem}.hr select{max-width:94px}}
@media(hover:none){.card:hover{transform:none;box-shadow:var(--sh);border-color:var(--ln)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* RTL (Arabic, Persian) */
[dir=rtl] .hr{margin-left:0;margin-right:auto}[dir=rtl] .sw .ic{left:auto;right:18px}[dir=rtl] .q{padding:15px 50px 15px 22px}[dir=rtl] .card{text-align:right}
[dir=rtl] .hr select{max-width:130px}

/*TH*/
.th{width:46px;height:46px;padding:0;border-radius:14px;flex:none}.th .ic{width:22px;height:22px}
[data-theme=dark] canvas{box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
@media(max-width:480px){.th,.mb{width:42px;height:42px}.hr{gap:5px}.hr select{max-width:96px}.logo{font-size:1.02rem}}

/* Google Translate widget: hide its banner/gadget */
#gt_el,.goog-te-banner-frame,iframe.skiptranslate,.goog-te-balloon-frame,#goog-gt-tt{display:none!important}body{top:0!important;position:static!important}.goog-text-highlight{background:none!important;box-shadow:none!important}
/* header: keep logo + language + theme + menu on one row */
header .w{flex-wrap:wrap}.logo{flex:1 1 0;min-width:0}.hr{flex:none}
@media(max-width:480px){.hr select{max-width:104px;padding:4px 22px 4px 10px;font-size:.85rem}.logo{font-size:.98rem;gap:7px}.logo i{width:26px;height:26px}}