/* ============================================================
   tools.mtitc.ir - shared stylesheet
   Themes: gold | ice | emerald (same palette as mtitc.ir)
   ============================================================ */

/* ---------- Theme: gold ---------- */
[data-theme="gold"] {
    --bg:#0e1015; --bg-rgb:14,16,21;
    --bg-2:#13171f; --bg-3:#1a1f2a;
    --card:#161a23; --card-hover:#1c2130;
    --border:#262c3a;
    --text:#ece7dd; --muted:#9ba1ad; --dim:#6b7280;
    --primary:#8b2448; --primary-rgb:139,36,72;
    --primary-dark:#6b1a35; --primary-light:#a52e56;
    --accent:#d4a574; --accent-rgb:212,165,116; --accent-light:#e8c89a;
    --secondary:#b8704a; --secondary-rgb:184,112,74;
    --tertiary:#3d8b8b; --tertiary-rgb:61,139,139;
    --grad-accent:linear-gradient(135deg,#e8c89a,#d4a574 50%,#b8864a);
    --grad-text:linear-gradient(135deg,#e8c89a,#d4a574 40%,#8b2448);
    --grad-mixed:linear-gradient(135deg,#8b2448,#b8704a 60%,#d4a574);
    --nav-tools-text:#2a1a0a;
    --btn-text:#fff;
}

/* ---------- Theme: ice ---------- */
[data-theme="ice"] {
    --bg:#0a1220; --bg-rgb:10,18,32;
    --bg-2:#0f1828; --bg-3:#14202f;
    --card:#101a2b; --card-hover:#152436;
    --border:#1e2f45;
    --text:#e0f0ff; --muted:#7a9bb8; --dim:#4a6a85;
    --primary:#0c4a6e; --primary-rgb:12,74,110;
    --primary-dark:#082f49; --primary-light:#075985;
    --accent:#22d3ee; --accent-rgb:34,211,238; --accent-light:#67e8f9;
    --secondary:#0891b2; --secondary-rgb:8,145,178;
    --tertiary:#5eead4; --tertiary-rgb:94,234,212;
    --grad-accent:linear-gradient(135deg,#67e8f9,#22d3ee 50%,#0891b2);
    --grad-text:linear-gradient(135deg,#67e8f9,#22d3ee 40%,#0c4a6e);
    --grad-mixed:linear-gradient(135deg,#0c4a6e,#0891b2 60%,#22d3ee);
    --nav-tools-text:#0a1220;
    --btn-text:#fff;
}

/* ---------- Theme: emerald ---------- */
[data-theme="emerald"] {
    --bg:#0a1410; --bg-rgb:10,20,16;
    --bg-2:#0f1c15; --bg-3:#14251b;
    --card:#101c15; --card-hover:#15241c;
    --border:#1e3529;
    --text:#e0f5ea; --muted:#7a9d88; --dim:#4a705a;
    --primary:#064e3b; --primary-rgb:6,78,59;
    --primary-dark:#022c22; --primary-light:#047857;
    --accent:#34d399; --accent-rgb:52,211,153; --accent-light:#6ee7b7;
    --secondary:#059669; --secondary-rgb:5,150,105;
    --tertiary:#22c55e; --tertiary-rgb:34,197,94;
    --grad-accent:linear-gradient(135deg,#6ee7b7,#34d399 50%,#16a34a);
    --grad-text:linear-gradient(135deg,#6ee7b7,#34d399 40%,#064e3b);
    --grad-mixed:linear-gradient(135deg,#064e3b,#0d7355 60%,#34d399);
    --nav-tools-text:#0a1410;
    --btn-text:#fff;
}

/* ---------- Base ---------- */
:root { --radius:14px; }
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:'Vazirmatn',system-ui,sans-serif;
    background:
        radial-gradient(ellipse 70% 45% at 50% -10%, rgba(var(--accent-rgb),.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--primary-rgb),.18), transparent 60%),
        var(--bg);
    color:var(--text);line-height:1.85;min-height:100vh;
    display:flex;flex-direction:column;
    transition:background-color .3s, color .3s;
}
a{color:var(--accent);text-decoration:none;transition:.25s}
a:hover{color:var(--accent-light)}
.container{max-width:1140px;margin:0 auto;padding:0 20px;width:100%}

/* ---------- Header ---------- */
.header{
    position:sticky;top:0;z-index:100;
    background:rgba(var(--bg-rgb),.85);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700}
.logo-icon{
    width:40px;height:40px;border-radius:11px;
    background:var(--grad-mixed);
    display:grid;place-items:center;color:#fff;font-weight:800;
    box-shadow:0 0 20px rgba(var(--accent-rgb),.3);
    position:relative;
}
.logo-icon::after{
    content:'';position:absolute;inset:-3px;border-radius:14px;
    background:var(--grad-mixed);filter:blur(10px);opacity:.35;z-index:-1;
}
.logo-text{
    background:var(--grad-text);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    font-weight:800;
}

.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--muted);font-size:.94rem;position:relative}
.menu a:hover{color:var(--accent-light)}
.menu a::after{
    content:'';position:absolute;bottom:-6px;right:0;left:0;height:1px;
    background:var(--grad-accent);transform:scaleX(0);transform-origin:right;
    transition:transform .3s;
}
.menu a:hover::after{transform:scaleX(1)}
.nav-tools{
    background:var(--grad-accent) !important;
    color:var(--nav-tools-text) !important;
    padding:8px 18px;border-radius:8px;
    font-weight:700 !important;
    box-shadow:0 0 20px rgba(var(--accent-rgb),.3);
}
.nav-tools:hover{box-shadow:0 0 30px rgba(var(--accent-rgb),.55);transform:translateY(-1px)}
.nav-tools::after{display:none}

/* ---------- Theme switcher ---------- */
.theme-switcher{
    display:flex;gap:8px;align-items:center;
    margin-right:auto;margin-left:16px;
}
.theme-btn{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--border);
    cursor:pointer;padding:0;
    transition:transform .2s, border-color .2s, box-shadow .2s;
}
.theme-btn[data-theme-value="gold"]    { background:linear-gradient(135deg,#e8c89a,#d4a574 50%,#8b2448); }
.theme-btn[data-theme-value="ice"]     { background:linear-gradient(135deg,#67e8f9,#22d3ee 50%,#0c4a6e); }
.theme-btn[data-theme-value="emerald"] { background:linear-gradient(135deg,#6ee7b7,#34d399 50%,#064e3b); }
.theme-btn:hover{transform:scale(1.15)}
.theme-btn.active{border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}

/* ---------- Page wrapper ---------- */
.page{flex:1;padding:60px 0 80px}
.page-head{text-align:center;margin-bottom:44px;position:relative}
.page-title{
    font-size:clamp(1.7rem,4vw,2.3rem);
    font-weight:800;margin-bottom:12px;line-height:1.35;
    background:var(--grad-text);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.25));
}
.page-desc{color:var(--muted);max-width:640px;margin:0 auto}

/* ---------- Tags filter ---------- */
.tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 44px}
.tag{
    padding:7px 16px;border-radius:99px;font-size:.85rem;
    background:var(--card);border:1px solid var(--border);color:var(--muted);
    transition:.25s;
}
.tag:hover,.tag.active{
    border-color:var(--accent);color:var(--accent-light);
    box-shadow:0 0 20px rgba(var(--accent-rgb),.2);
}

/* ---------- Cards grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{
    background:linear-gradient(160deg,var(--card),var(--bg));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px 28px;
    transition:.35s;
    position:relative;overflow:hidden;
    color:var(--text);
}
.card::before{
    content:'';position:absolute;top:0;right:0;left:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.6),transparent);
    opacity:0;transition:.35s;
}
.card:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--accent-rgb),.4);
    background:linear-gradient(160deg,var(--card-hover),var(--bg));
    box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(var(--accent-rgb),.10);
    color:var(--text);
}
.card:hover::before{opacity:1}
.card-icon{
    font-size:1.9rem;margin-bottom:16px;display:inline-block;
    filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.4));
}
.card h3{font-size:1.13rem;margin-bottom:10px;color:var(--accent-light);font-weight:700}
.card p{color:var(--muted);font-size:.92rem}
.tool-card{display:block}
.tool-card .arrow{
    position:absolute;top:26px;left:24px;
    color:var(--muted);font-size:1.1rem;transition:.3s;
}
.tool-card:hover .arrow{color:var(--accent);transform:translateX(-6px)}
.tag-mini{
    display:inline-block;font-size:.72rem;padding:3px 10px;border-radius:6px;
    background:rgba(var(--accent-rgb),.08);color:var(--accent-light);
    border:1px solid rgba(var(--accent-rgb),.22);
    margin-left:6px;margin-top:14px;
}
.empty-card{grid-column:1/-1;text-align:center;color:var(--muted)}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state p{margin-bottom:24px}

/* ---------- Forms ---------- */
input[type=text],input[type=url],input[type=number],input[type=email],textarea,select{
    width:100%;background:var(--bg-3);border:1px solid var(--border);
    border-radius:10px;padding:13px 16px;color:var(--text);
    font-family:inherit;font-size:.95rem;transition:.25s;resize:vertical;
}
input:focus,textarea:focus,select:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12), 0 0 20px rgba(var(--accent-rgb),.12);
}
label{display:block;margin-bottom:8px;color:var(--accent-light);font-size:.88rem;font-weight:600}
.field{margin-bottom:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1;min-width:180px;margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
    display:inline-block;padding:12px 26px;border-radius:10px;border:none;
    background:var(--grad-mixed);color:var(--btn-text);font-family:inherit;
    font-size:.95rem;font-weight:700;cursor:pointer;transition:.3s;
    box-shadow:0 0 22px rgba(var(--primary-rgb),.35), 0 8px 22px rgba(0,0,0,.4);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(var(--accent-rgb),.4);color:var(--btn-text)}
.btn-ghost{
    background:rgba(var(--accent-rgb),.05);color:var(--accent-light);
    border:1px solid rgba(var(--accent-rgb),.3);box-shadow:none;
}
.btn-ghost:hover{background:rgba(var(--accent-rgb),.12);border-color:var(--accent)}

/* ---------- Result box ---------- */
.result{
    margin-top:24px;padding:20px 22px;border-radius:12px;
    background:#0b0d12;border:1px solid var(--border);
    font-family:ui-monospace,'Courier New',monospace;
    font-size:.9rem;white-space:pre-wrap;word-break:break-all;
    max-height:480px;overflow:auto;direction:ltr;text-align:left;
    color:#e8eaf0;
}
.result.ok{border-color:rgba(61,139,139,.5);background:rgba(61,139,139,.06)}
.result.err{border-color:rgba(var(--primary-rgb),.5);background:rgba(var(--primary-rgb),.08)}
.result .k{color:var(--accent)}
.result .v{color:var(--text)}

/* ---------- Badges ---------- */
.badge{
    display:inline-block;padding:4px 12px;border-radius:99px;
    background:rgba(var(--accent-rgb),.1);color:var(--accent-light);
    border:1px solid rgba(var(--accent-rgb),.3);font-size:.8rem;margin-bottom:14px;
}
.badge.err{background:rgba(var(--primary-rgb),.15);color:#e28ba6;border-color:rgba(var(--primary-rgb),.5)}
.badge.ok{background:rgba(61,139,139,.15);color:#6fc7c7;border-color:rgba(61,139,139,.5)}

/* ---------- Alerts ---------- */
.alert{padding:14px 18px;border-radius:10px;margin-top:20px;font-size:.92rem}
.alert.ok{background:rgba(61,139,139,.10);border:1px solid rgba(61,139,139,.4);color:#6fc7c7}
.alert.err{background:rgba(var(--primary-rgb),.12);border:1px solid rgba(var(--primary-rgb),.45);color:#e28ba6}

/* ---------- Footer ---------- */
.footer{
    background:linear-gradient(180deg,transparent,var(--bg-2));
    border-top:1px solid var(--border);
    padding:52px 0 22px;margin-top:auto;position:relative;
}
.footer::before{
    content:'';position:absolute;top:-1px;right:0;left:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.5),transparent);
}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.footer strong{
    background:var(--grad-text);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    font-size:1.02rem;
}
.footer p{color:var(--muted);font-size:.9rem;margin-top:6px}
.footer-links{display:flex;gap:22px}
.footer-links a{color:var(--muted);font-size:.9rem}
.footer-links a:hover{color:var(--accent-light)}
.copyright{
    margin-top:34px;padding-top:22px;border-top:1px solid var(--border);
    text-align:center;color:var(--dim);font-size:.85rem;
}

/* ---------- Scrollbar & selection ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--accent),var(--primary));
    border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::selection{background:rgba(var(--accent-rgb),.3);color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:768px){
    .menu{display:none}
    .page{padding:40px 0 60px}
    .page-head{margin-bottom:32px}
    .footer-inner{flex-direction:column;text-align:center}
}