/* ===================================================================
   MJK — tools stylesheet (css2)
   Shared by: Gram Bulk Sender · Jetton Bulk Sender
   Same look as the main site (style.css): black page, header/footer
   artwork, #0d0d0d panels, white primary button, gold accent.
   =================================================================== */

@font-face{
    font-family:'KM';
    src:url('/fonts/AB.woff2') format('woff2');
    font-display:swap;
}

:root{
    --panel:rgba(13,13,13,.9);
    --line:rgba(255,255,255,.12);
    --line-strong:rgba(255,255,255,.28);
    --soft:#b5b5b5;
    --muted:#8a8a8a;
    --gold:#e8c97a;
    --ok:#6fd49a;
    --err:#ff6b6b;
}

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

html{ -webkit-text-size-adjust:100%; }

body.tool-page{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#000;
    color:#fff;
    font-family:KM, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px;
    line-height:1.6;
    overflow-x:hidden;
}

/* ─── header / footer artwork (same as the main page) ─── */
.top-decoration,
.bottom-decoration{
    position:absolute;
    left:0;
    width:100%;
    height:250px;
    pointer-events:none;
}
.top-decoration{    top:0;    background:url("/images/UP2.jpg") center center/cover no-repeat; }
.bottom-decoration{ bottom:0; background:url("/images/BM2.jpg") center center/cover no-repeat; }

/* ─── page column: always centered ─── */
.tool-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:700px;
    margin:0 auto;
    padding:56px 24px 40px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.back-link{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:10px;
    padding:6px 12px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:rgba(0,0,0,.4);
    color:#ffffffb0;
    font-size:12.5px;
    text-decoration:none;
    transition:color .2s, border-color .2s, background .2s;
}
.back-link:hover{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }

/* ─── header ─── */
.tool-header{ text-align:center; margin:6px 0 28px; }

.tool-logo{
    display:block;
    width:140px;
    max-width:55%;
    height:auto;
    margin:0 auto 14px;
    animation:toolLogoIn .6s ease-out both;
}
@keyframes toolLogoIn{
    from{ opacity:0; transform:translateY(16px); }
    to{   opacity:1; transform:none; }
}

.tool-title{
    font-size:28px;
    font-weight:800;
    letter-spacing:.03em;
    color:#ffffffe5;
}
.tool-tagline{
    max-width:440px;
    margin:8px auto 0;
    font-size:13px;
    letter-spacing:.02em;
    color:rgba(255,255,255,.62);
}

/* ─── panels ─── */
.card{
    margin-bottom:16px;
    padding:24px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
}

.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font-size:16px;
    font-weight:700;
    letter-spacing:.01em;
}
.card-step{
    width:24px;
    height:24px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line-strong);
    border-radius:50%;
    font-size:12px;
    font-weight:700;
    color:var(--soft);
}
.card-title .count{
    margin-left:auto;
    font-size:12px;
    font-weight:400;
    color:var(--muted);
}

.muted-text{ font-size:13px; color:var(--muted); line-height:1.7; }

/* ─── form fields ─── */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }

.field-label{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--soft);
}
.field-label a{ font-weight:400; color:var(--muted); text-underline-offset:2px; }
.field-label a:hover{ color:#fff; }

.input{
    width:100%;
    padding:12px 14px;
    background:#050505;
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    color:#fff;
    font:inherit;
    font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{ color:#666; }
.input:focus{
    outline:none;
    border-color:rgba(255,255,255,.6);
    box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

input[type=file].input{ padding:8px; cursor:pointer; color:var(--soft); }
input[type=file]::file-selector-button{
    margin-right:12px;
    padding:7px 14px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:8px;
    background:transparent;
    color:#fff;
    font:inherit;
    font-size:12.5px;
    cursor:pointer;
    transition:background .2s, color .2s;
}
input[type=file]::file-selector-button:hover{ background:#fff; color:#000; }

/* ─── buttons ─── */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:12px 20px;
    border:1px solid #fff;
    border-radius:10px;
    background:#fff;
    color:#000;
    font:inherit;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.2);
    transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s;
}
.btn:hover:not(:disabled){
    background:var(--gold);
    border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(232,201,122,.3), 0 0 22px rgba(232,201,122,.4);
    transform:translateY(-1px);
}
.btn:disabled{ opacity:.3; cursor:not-allowed; box-shadow:none; }

.btn-ghost{
    background:transparent;
    color:#ffffffc0;
    border-color:rgba(255,255,255,.3);
    font-weight:600;
    box-shadow:none;
}
.btn-ghost:hover:not(:disabled){
    background:#fff;
    border-color:#fff;
    color:#000;
    box-shadow:none;
}

.btn-sm{ width:auto; padding:8px 16px; font-size:13px; }

/* ─── notes & status ─── */
.note{
    margin-bottom:14px;
    padding:10px 14px;
    border:1px solid rgba(232,201,122,.35);
    border-radius:10px;
    background:rgba(232,201,122,.06);
    font-size:12.5px;
    line-height:1.7;
    color:var(--soft);
}
.note strong{ color:var(--gold); font-weight:700; }
.note-plain{ border-color:var(--line); background:rgba(255,255,255,.03); }
.note-plain strong{ color:#fff; }
.note:empty{ display:none; }

.status{
    margin-top:14px;
    padding:12px 14px;
    border:1px solid var(--line-strong);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    font-size:13px;
    text-align:center;
}
.status:empty{ display:none; }
.status.success{ border-color:rgba(111,212,154,.5); color:var(--ok); }
.status.error{   border-color:rgba(255,107,107,.5); color:var(--err); }
.status.warning{ border-color:rgba(232,201,122,.5); color:var(--gold); }

/* ─── wallet block ─── */
.wallet-box{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.04);
}
.wallet-label{ font-size:11px; color:#777; }
.wallet-value{ font-size:12px; line-height:1.5; color:#ddd; word-break:break-all; }

.connect-slot{
    display:flex;
    justify-content:center;
    min-height:44px;
    margin-bottom:6px;
}
.req-note{ margin-bottom:16px; font-size:12px; text-align:center; color:var(--muted); }

/* ─── tables ─── */
.table-wrapper{
    margin:10px 0;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:10px;
}
.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table th,
.data-table td{
    padding:9px 12px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.data-table th{
    background:rgba(255,255,255,.05);
    font-weight:600;
    white-space:nowrap;
    color:var(--soft);
}
.data-table tr:last-child td{ border-bottom:none; }
.data-table td.addr{
    min-width:200px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:11.5px;
    word-break:break-all;
}
.data-table td.more{ text-align:center; color:var(--muted); }

/* ─── summary rows ─── */
.summary-list{ display:flex; flex-direction:column; }
.summary-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:var(--soft);
}
.summary-row:last-child{ border-bottom:none; }
.summary-row strong{ font-weight:700; color:#fff; text-align:right; }
.summary-row.total strong{ color:var(--gold); }

/* ─── collapsible blocks (batches, log) ─── */
.batch{
    margin-bottom:10px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.03);
}
.batch > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
}
.batch > summary::-webkit-details-marker{ display:none; }
.batch > summary::after{
    content:'›';
    font-size:18px;
    line-height:1;
    color:#777;
    transform:rotate(90deg);
    transition:transform .2s;
}
.batch[open] > summary::after{ transform:rotate(-90deg); }
.batch-body{ padding:0 14px 14px; }
.batch-actions{ display:flex; margin-top:12px; }

.log-details{ margin:14px 0 0; }
#log{
    max-height:240px;
    margin:0 14px 14px;
    padding:12px;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:10px;
    background:#050505;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:11.5px;
    line-height:1.6;
    color:#9a9a9a;
    white-space:pre-wrap;
    word-break:break-all;
}

/* ─── jetton address hint ─── */
.hint-toggle{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:none;
    background:none;
    color:var(--muted);
    font:inherit;
    font-size:12.5px;
    cursor:pointer;
    transition:color .2s;
}
.hint-toggle:hover{ color:#fff; }
.hint-toggle .chev{ transition:transform .25s; }
.hint-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.hint-body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
}
.hint-body.open{ grid-template-rows:1fr; }
.hint-body > div{ overflow:hidden; }
.hint-text{ padding-top:4px; font-size:12.5px; line-height:1.7; color:var(--muted); }
.hint-body img{
    display:block;
    max-width:100%;
    height:auto;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:10px;
}

/* ─── help section ─── */
.help-steps{ display:flex; flex-direction:column; gap:6px; padding-left:20px; }
.help-steps li{ font-size:13px; line-height:1.7; color:#9a9a9a; }
.help-note{ margin-top:10px; font-size:12px; line-height:1.6; color:var(--gold); }

/* ─── footer ─── */
.tool-footer{
    margin-top:auto;
    padding-top:24px;
    text-align:center;
    font-size:12px;
    color:rgba(255,255,255,.45);
}

/* ─── responsive ─── */
@media (min-width:900px){
    .tool-container{ padding-top:64px; }
    .tool-title{ font-size:32px; }
    .tool-logo{ width:160px; }
    .card{ padding:28px; }
}

@media (max-width:600px){
    .tool-container{ padding:44px 14px 32px; }
    .tool-title{ font-size:23px; }
    .card{ padding:18px; border-radius:16px; }
    .input{ font-size:16px; }               /* stops iOS zooming into fields */
    .btn-sm{ width:100%; }
    .field-label{ flex-direction:column; gap:2px; }
    .summary-row{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
}