:root {
    --bg: #0a0a1a;
    --sf: #12122a;
    --bd: #1e1e3a;
    --tx: #e0e0ff;
    --t2: #8888aa;
    --ac: #4a9eff;
    --a2: #3a7edf;
    --ok: #4caf50;
    --er: #ff5252;
    --rg: clamp(12px, 2vw, 20px)
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--tx);
    -webkit-text-size-adjust: 100%
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh
}

a {
    color: var(--ac);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    min-height: 44px;
    min-width: 44px
}

.tb {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    padding: clamp(8px, 1.5vw, 16px) var(--rg);
    background: var(--sf);
    border-bottom: 1px solid var(--bd);
    position: sticky;
    top: 0;
    z-index: 100
}

.tt {
    margin: 0;
    font-size: clamp(14px, 2.5vw, 20px);
    font-weight: 700;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    border-radius: 8px;
    background: var(--bd);
    font-size: clamp(14px, 2vw, 18px);
    min-height: 44px;
    min-width: 44px
}

.hb:hover {
    background: var(--ac);
    color: #fff
}

.ls {
    width: clamp(96px, 18vw, 180px);
    min-height: 44px;
    border: 1px solid var(--bd);
    border-radius: clamp(6px, 1vw, 8px);
    background: var(--bg);
    color: var(--tx);
    padding: clamp(6px, 1vw, 10px);
    font: inherit;
    font-size: clamp(12px, 1.5vw, 14px)
}

.ls:focus {
    outline: 2px solid var(--ac);
    outline-offset: 2px
}

.gl {
    display: grid;
    grid-template-columns: 1fr clamp(200px, 22vw, 300px);
    gap: var(--rg);
    padding: var(--rg);
    max-width: 1400px;
    margin: 0 auto;
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px)
}

.ta {
    display: flex;
    flex-direction: column;
    gap: var(--rg);
    min-width: 0
}

.tw {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    overflow: hidden
}

.ip {
    padding: var(--rg)
}

.ip label {
    display: block;
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--t2);
    margin-bottom: clamp(4px, 0.5vw, 8px)
}

.ip textarea,
.ip input[type="text"],
.ip input[type="number"] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 8px;
    color: var(--tx);
    padding: clamp(8px, 1vw, 12px);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: clamp(12px, 1.5vw, 14px);
    resize: vertical;
    min-height: clamp(80px, 15vh, 200px)
}

.ip textarea:focus,
.ip input:focus {
    outline: none;
    border-color: var(--ac)
}

.ab {
    display: flex;
    gap: clamp(6px, 1vw, 12px);
    padding: 0 var(--rg) var(--rg);
    flex-wrap: wrap
}

.ab button {
    padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
    border-radius: 8px;
    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 600;
    transition: background .2s
}

.ab .pr {
    background: var(--ac);
    color: #fff
}

.ab .pr:hover {
    background: var(--a2)
}

.ab .sc {
    background: var(--bd);
    color: var(--tx)
}

.ab .sc:hover {
    background: var(--ac);
    color: #fff
}

.rs {
    padding: var(--rg)
}

.rs pre {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: clamp(8px, 1vw, 12px);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: clamp(12px, 1.5vw, 14px);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: clamp(200px, 40vh, 500px);
    overflow-y: auto
}

.pp {
    display: flex;
    flex-direction: column;
    gap: var(--rg)
}

.pp .pw {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    padding: var(--rg)
}

.pt {
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vw, 12px)
}

.pc {
    font-size: clamp(12px, 1.3vw, 14px);
    color: var(--t2);
    line-height: 1.6
}

.pc ul {
    list-style: disc inside;
    margin-top: clamp(4px, 0.5vw, 8px)
}

.ad {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    padding: var(--rg);
    text-align: center;
    min-height: clamp(200px, 30vh, 350px)
}

.ho {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--rg)
}

.ho.on {
    display: flex
}

.hx {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: clamp(16px, 3vw, 32px);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto
}

.hx h3 {
    margin-bottom: clamp(8px, 1.5vw, 16px)
}

.hx p,
.hx li {
    color: var(--t2);
    line-height: 1.6;
    font-size: clamp(13px, 1.5vw, 15px)
}

.so {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--rg)
}

.so.on {
    display: flex
}

.sx {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: clamp(16px, 3vw, 32px);
    max-width: 500px;
    width: 100%
}

.msg {
    padding: clamp(6px, 1vw, 10px) var(--rg);
    font-size: clamp(12px, 1.3vw, 14px);
    border-radius: 8px;
    margin: clamp(4px, 0.5vw, 8px) var(--rg)
}

.msg.ok {
    background: rgba(76, 175, 80, .15);
    color: var(--ok);
    border: 1px solid rgba(76, 175, 80, .3)
}

.msg.er {
    background: rgba(255, 82, 82, .15);
    color: var(--er);
    border: 1px solid rgba(255, 82, 82, .3)
}

.ft {
    padding: var(--rg);
    text-align: center;
    color: var(--t2);
    font-size: clamp(11px, 1.2vw, 13px);
    border-top: 1px solid var(--bd);
    margin-top: auto
}

.ft a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(44px, 6vw, 52px);
    min-width: clamp(44px, 6vw, 52px);
    color: var(--t2)
}

.ft a:hover {
    color: var(--ac)
}

.dz {
    border: 2px dashed var(--bd);
    border-radius: 12px;
    padding: clamp(20px, 4vw, 40px);
    text-align: center;
    color: var(--t2);
    transition: border-color .2s, background .2s;
    cursor: pointer
}

.dz:hover,
.dz.ov {
    border-color: var(--ac);
    background: rgba(74, 158, 255, .05)
}

.dz p {
    font-size: clamp(13px, 1.5vw, 16px)
}

.ln {
    display: flex;
    gap: clamp(4px, 0.5vw, 8px);
    align-items: center;
    font-size: clamp(11px, 1.2vw, 13px);
    color: var(--t2);
    padding: clamp(4px, 0.5vw, 8px) var(--rg)
}

.uh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 16px);
    padding: var(--rg) var(--rg) 0
}

.uh strong,
.st {
    font-size: clamp(13px, 1.6vw, 16px)
}

.sg {
    display: inline-flex;
    padding: clamp(2px, .4vw, 4px);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px)
}

.sg button {
    min-width: clamp(72px, 10vw, 112px);
    padding: clamp(6px, .8vw, 9px) clamp(10px, 1.4vw, 16px);
    color: var(--t2);
    border-radius: clamp(6px, .8vw, 9px);
    transition: background .2s, color .2s
}

.sg button.on {
    background: var(--ac);
    color: #fff
}

.st {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1vw, 12px);
    margin-bottom: clamp(10px, 1.4vw, 16px);
    font-weight: 700
}

.fg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 16px)
}

.fi {
    min-width: 0
}

.fi.wd {
    grid-column: 1 / -1
}

.fi input,
.fi select,
.fi textarea {
    width: 100%;
    min-height: 44px;
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: clamp(6px, .8vw, 9px);
    color: var(--tx);
    padding: clamp(8px, 1vw, 12px);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: clamp(12px, 1.5vw, 14px)
}

.fi input:focus,
.fi select:focus,
.fi textarea:focus {
    outline: none;
    border-color: var(--ac)
}

.fi textarea {
    min-height: clamp(120px, 22vw, 240px);
    resize: vertical;
    line-height: 1.6
}

.fi small {
    display: block;
    color: var(--t2);
    font-size: clamp(10px, 1.2vw, 12px);
    margin-top: clamp(3px, .5vw, 6px)
}

.rw {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: clamp(8px, 1vw, 12px);
    align-items: end;
    padding: clamp(10px, 1.4vw, 16px) 0;
    border-top: 1px solid var(--bd)
}

.rw:first-child {
    border-top: 0;
    padding-top: 0
}

.rm {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    border-radius: clamp(6px, .8vw, 9px);
    background: var(--bd);
    color: var(--t2)
}

.rm:hover {
    background: var(--er);
    color: #fff
}

.ck {
    display: flex !important;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    min-height: 44px;
    color: var(--tx) !important;
    cursor: pointer
}

.ck input {
    width: clamp(18px, 2vw, 22px);
    height: clamp(18px, 2vw, 22px);
    accent-color: var(--ac)
}

.rr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
    opacity: 0;
    transform: translateY(clamp(4px, .6vw, 8px));
    transition: opacity .2s, transform .2s
}

.rr.on {
    opacity: 1;
    transform: translateY(0)
}

.ri {
    padding: clamp(10px, 1.4vw, 16px) 0;
    border-top: 1px solid var(--bd)
}

.rk {
    display: block;
    color: var(--t2);
    font-size: clamp(10px, 1.2vw, 12px);
    margin-bottom: clamp(4px, .6vw, 7px)
}

.vl {
    display: block;
    color: var(--tx);
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 750;
    overflow-wrap: anywhere
}

.sl {
    grid-column: 1 / -1;
    padding: clamp(12px, 1.6vw, 18px);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    color: var(--t2);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: clamp(11px, 1.3vw, 13px);
    line-height: 1.7;
    white-space: pre-wrap
}

.rl {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, .8vw, 10px)
}

.rl a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--bd)
}

.rs .rl {
    grid-column: 1 / -1
}

.ls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 12px);
    grid-column: 1 / -1
}

.li {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1vw, 12px);
    min-height: 44px;
    padding: clamp(8px, 1vw, 12px);
    border-bottom: 1px solid var(--bd)
}

.li input {
    min-width: 44px;
    min-height: 44px;
    accent-color: var(--ac)
}

.cv {
    display: block;
    width: min(100%, clamp(280px, 72vw, 720px));
    aspect-ratio: 1;
    margin: 0 auto;
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    background: var(--bg);
    touch-action: none
}

.gm {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 16px)
}

.kb {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 12px)
}

.kb button {
    min-width: 44px;
    min-height: 44px
}

.pv {
    grid-column: 1 / -1;
    padding: clamp(14px, 2vw, 24px);
    border: 1px solid var(--bd);
    border-radius: clamp(8px, 1vw, 12px);
    background: var(--bg);
    color: var(--tx);
    white-space: pre-wrap;
    line-height: 1.7
}

.hd {
    display: none !important
}

[hidden] {
    display: none !important
}

.lu,
.su,
.tu,
.au,
.un {
    white-space: nowrap
}

@media(max-width:1024px) {
    .gl {
        grid-template-columns: 1fr
    }

    .pp {
        display: none
    }
}

@media(max-width:480px) {
    .ab {
        flex-direction: column
    }

    .ab button {
        width: 100%
    }

    .uh {
        align-items: stretch;
        flex-direction: column
    }

    .sg {
        width: 100%
    }

    .sg button {
        flex: 1
    }

    .fg,
    .rr,
    .ls {
        grid-template-columns: 1fr
    }

    .rw {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
    }

    .rw .rm {
        grid-column: 1 / -1;
        width: 100%
    }
}

html.light {
    --bg: #f5f5fa;
    --sf: #ffffff;
    --bd: #e0e0e8;
    --tx: #1a1a2e;
    --t2: #666680;
    --ac: #2563eb;
    --a2: #1d4ed8
}

[dir="rtl"] .tb {
    flex-direction: row-reverse
}

[dir="rtl"] .ab {
    flex-direction: row-reverse
}

@media(max-width:480px) {
    [dir="rtl"] .ab {
        flex-direction: column
    }
}