:root{
    --bg:#0e1015; --card:#161a23; --border:#262c3a;
    --text:#ece7dd; --muted:#9ba1ad; --dim:#6b7280;
    --gold:#d4a574; --gold-l:#e8c89a;
    --burgundy:#8b2448; --wine:#6b1a35;
    --grad-mixed:linear-gradient(135deg,#8b2448,#b8704a 60%,#d4a574);
    --grad-gold:linear-gradient(135deg,#e8c89a,#d4a574 50%,#b8864a);
}
*{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(212,165,116,.07), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(139,36,72,.18), transparent 60%),
        var(--bg);
    color:var(--text);line-height:1.85;min-height:100vh;
    display:flex;flex-direction:column;
}
a{color:var(--gold);text-decoration:none;transition:.2s}
a:hover{color:var(--gold-l)}
.tc{max-width:900px;margin:0 auto;padding:0 20px;width:100%}

/* Header */
.th{
    background:rgba(14,16,21,.85);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;
}
.th .tc{display:flex;justify-content:space-between;align-items:center;height:64px}
.tb{font-size:.92rem;color:var(--gold);font-weight:600}
.ts{font-size:.85rem;color:var(--dim)}

/* Main */
.tm{flex:1;padding:60px 0 80px}
.tm .tc{max-width:900px}
.tt{
    font-size:1.9rem;font-weight:800;margin-bottom:10px;
    background:linear-gradient(135deg,#e8c89a,#d4a574 40%,#8b2448);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.td{color:var(--muted);margin-bottom:34px}
.tbox{
    background:linear-gradient(160deg,var(--card),#100c13);
    border:1px solid var(--border);border-radius:14px;
    padding:32px 28px;position:relative;
}
.tbox::before{
    content:'';position:absolute;top:0;right:0;left:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,165,116,.6),transparent);
}

/* Form */
input[type=text],input[type=url],input[type=number],textarea,select{
    width:100%;background:#0f1218;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(--gold);
    box-shadow:0 0 0 3px rgba(212,165,116,.12), 0 0 20px rgba(212,165,116,.12);
}
label{display:block;margin-bottom:8px;color:var(--gold-l);font-size:.88rem;font-weight:600}
.field{margin-bottom:18px}

.btn{
    display:inline-block;padding:12px 26px;border-radius:10px;border:none;
    background:var(--grad-mixed);color:#fff;font-family:inherit;
    font-size:.95rem;font-weight:700;cursor:pointer;transition:.3s;
    box-shadow:0 0 22px rgba(139,36,72,.35), 0 8px 22px rgba(0,0,0,.4);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(212,165,116,.4)}
.btn-ghost{
    background:rgba(212,165,116,.05);color:var(--gold-l);
    border:1px solid rgba(212,165,116,.3);box-shadow:none;
}
.btn-ghost:hover{background:rgba(212,165,116,.12);border-color:var(--gold)}

/* Result */
.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;
}
.result.ok{border-color:rgba(61,139,139,.5);background:rgba(61,139,139,.06)}
.result.err{border-color:rgba(139,36,72,.5);background:rgba(139,36,72,.08)}
.result .k{color:var(--gold)}
.result .v{color:var(--text)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .field{flex:1;min-width:180px;margin-bottom:0}

.badge{
    display:inline-block;padding:4px 12px;border-radius:99px;
    background:rgba(212,165,116,.1);color:var(--gold-l);
    border:1px solid rgba(212,165,116,.3);font-size:.8rem;margin-bottom:14px;
}
.badge.err{background:rgba(139,36,72,.15);color:#e28ba6;border-color:rgba(139,36,72,.5)}
.badge.ok{background:rgba(61,139,139,.15);color:#6fc7c7;border-color:rgba(61,139,139,.5)}

/* Footer */
.tf{
    border-top:1px solid var(--border);padding:24px 0;
    text-align:center;color:var(--dim);font-size:.85rem;
    background:linear-gradient(180deg,transparent,rgba(19,23,31,.6));
}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--gold),var(--burgundy));
    border-radius:99px;
}
::selection{background:rgba(212,165,116,.3);color:#fff}