@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --teal: #0D9488;
    --td: #0F766E;
    --tl: #CCFBF1;
    --t50: #F0FDFA;
    --s50: #F8FAFC;
    --s100: #F1F5F9;
    --s200: #E2E8F0;
    --s300: #CBD5E1;
    --s400: #94A3B8;
    --s500: #64748B;
    --s600: #475569;
    --s700: #334155;
    --s800: #1E293B;
    --s900: #0F172A;
    --ok: #059669;
    --okl: #D1FAE5;
    --er: #DC2626;
    --erl: #FEE2E2;
    --wn: #D97706;
    --wnl: #FEF3C7;
    --ft: 'DM Sans', -apple-system, sans-serif;
    --mn: 'JetBrains Mono', monospace;
    --r: 12px;
    --rs: 8px;
    --sh: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.03);
    --shh: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
    --bg: var(--s50);
    --card-bg: #fff;
    --card-border: var(--s200);
    --hdr-bg: #dfefee;
    --hdr-border: #c8e0de;
}

[data-theme="dark"] {
    --s50: #0F172A;
    --s100: #1E293B;
    --s200: #334155;
    --s300: #475569;
    --s400: #64748B;
    --s500: #94A3B8;
    --s600: #CBD5E1;
    --s700: #E2E8F0;
    --s800: #F1F5F9;
    --s900: #F8FAFC;
    --tl: #134E4A;
    --t50: #0D3B38;
    --okl: #064E3B;
    --erl: #7F1D1D;
    --wnl: #78350F;
    --bg: #0B1121;
    --card-bg: #111827;
    --card-border: #1E293B;
    --hdr-bg: #0D1F1E;
    --hdr-border: #1A3533;
    --sh: 0 1px 3px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.15);
    --shh: 0 2px 8px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--ft); background: var(--bg); color: var(--s800); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; }

/* ── HEADER ── */
.hdr { background: var(--hdr-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hdr-border); padding: 0 1.5rem; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; transition: background .3s, border-color .3s; }
.hdr-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--s900); }
.hdr-logo img { height: 28px; }
.hdr-logo span { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.hdr-badge { font-size: .62rem; font-weight: 600; color: var(--teal); background: var(--tl); padding: .15rem .55rem; border-radius: 99px; letter-spacing: .05em; }
.hdr-right { display: flex; align-items: center; gap: .5rem; }
.theme-toggle { background: none; border: 1px solid var(--s200); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--s500); transition: all .2s; }
.theme-toggle:hover { background: var(--s100); color: var(--s700); }

/* ── UPLOAD ── */
.upload { padding: 3rem 1.5rem 2.5rem; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--t50) 100%); }
.upload h1 { font-size: 1.75rem; font-weight: 700; color: var(--s900); letter-spacing: -.03em; margin-bottom: .35rem; }
.upload h1 em { font-style: normal; color: var(--teal); }
.upload > p { font-size: .88rem; color: var(--s500); max-width: 460px; margin: 0 auto; }
.upload-feats { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; }
.upload-feats span { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--s400); }
.dz { max-width: 500px; margin: 1.5rem auto 0; border: 2px dashed var(--s300); border-radius: var(--r); padding: 2rem 1.5rem; cursor: pointer; background: var(--card-bg); transition: all .2s; }
.dz:hover, .dz.over { border-color: var(--teal); background: var(--t50); transform: translateY(-2px); box-shadow: var(--sh); }
.dz.over { border-style: solid; box-shadow: 0 0 0 3px rgba(13,148,136,.1); }
.dz-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--t50); display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; color: var(--teal); }
.dz h3 { font-size: .88rem; font-weight: 600; color: var(--s700); }
.dz p { font-size: .78rem; color: var(--s400); }
.dz-btn { margin-top: .6rem; padding: .4rem 1.1rem; background: var(--teal); color: #fff; border: none; border-radius: var(--rs); font-family: var(--ft); font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.dz-btn:hover { background: var(--td); }

/* ── LOADING ── */
.loading { display: none; position: fixed; inset: 0; background: rgba(248,250,252,.94); z-index: 200; align-items: center; justify-content: center; }
.loading.on { display: flex; }
.ld-box { text-align: center; }
.ld-box p { margin-top: .6rem; font-size: .8rem; color: var(--s500); }
.pbar { width: 220px; height: 3px; background: var(--s100); border-radius: 2px; margin: .5rem auto 0; overflow: hidden; }
.pbar-f { height: 100%; background: var(--teal); width: 0; transition: width .3s; border-radius: 2px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--s200); border-top-color: var(--teal); border-radius: 50%; animation: sp .7s linear infinite; margin: 0 auto; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ── RESULTS GRID ── */
.res { display: none; max-width: 1100px; margin: 0 auto; padding: 1.5rem; gap: 1.25rem; }
.res.on { display: grid; grid-template-columns: 1fr 380px; }
.res-l { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.res-r { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; gap: .5rem; }

/* ── LEFT: PDF VIEWER ── */
.pdf-viewer { background: var(--card-bg); border-radius: 16px; box-shadow: var(--shh); overflow: hidden; }
.pdf-top { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; border-bottom: 1px solid var(--s100); }
.pdf-badge { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--ok); border: 1.5px solid var(--ok); border-radius: 99px; padding: .25rem .7rem; }
.pdf-badge svg { flex-shrink: 0; }
.pdf-actions { display: flex; gap: .3rem; }
.pdf-act { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--s200); background: var(--card-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--s500); transition: all .15s; text-decoration: none; }
.pdf-act:hover { background: var(--s50); border-color: var(--s300); color: var(--s700); }
.pdf-body { display: flex; position: relative; min-height: 500px; max-height: 80vh; overflow: hidden; }
.pdf-sidebar { width: 32px; flex-shrink: 0; background: var(--s50); border-right: 1px solid var(--s100); display: flex; flex-direction: column; padding: .6rem 0; gap: .4rem; }
.pdf-indicator { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem 0; }
.pdf-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pdf-indicator .dot.wn { background: var(--wn); }
.pdf-indicator .dot.er { background: var(--er); }
.pdf-indicator .lbl { writing-mode: vertical-lr; transform: rotate(180deg); font-size: .5rem; font-weight: 600; color: var(--s400); letter-spacing: .05em; text-transform: uppercase; }
.pdf-indicator .hash { writing-mode: vertical-lr; transform: rotate(180deg); font-family: var(--mn); font-size: .42rem; color: var(--teal); letter-spacing: .02em; }
.pdf-embed { flex: 1; min-height: 500px; max-height: 80vh; background: #f5f5f5; overflow: hidden; }
.pdf-embed iframe, .pdf-embed object { width: 100%; height: 100%; min-height: 500px; max-height: 80vh; border: none; }
.pdf-embed .pdf-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 500px; color: var(--s400); font-size: .82rem; gap: .5rem; }
.pdf-holo-strip { width: 40px; flex-shrink: 0; border-left: 1px solid var(--s100); background: var(--card-bg); display: flex; align-items: stretch; overflow: hidden; max-height: 80vh; }
.pdf-holo-strip img { width: 100%; height: 100%; object-fit: cover; }
.pdf-footer { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-top: 1px solid var(--s100); background: var(--s50); font-size: .72rem; color: var(--s500); }
.pdf-footer svg { flex-shrink: 0; color: var(--s400); }
.pdf-footer .sep { color: var(--s300); }

/* ── LEFT: SIGNERS (below viewer) ── */
.signers { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; margin-top: 1rem; }
.signers-hd { padding: .7rem 1.2rem; font-size: .72rem; font-weight: 600; color: var(--s400); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--s100); display: flex; align-items: center; justify-content: space-between; }
.signers-hd .count { background: var(--tl); color: var(--teal); font-size: .6rem; font-weight: 700; padding: .1rem .4rem; border-radius: 99px; }
.signer-item { padding: .7rem 1.2rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--s100); transition: background .15s; }
.signer-item:last-child { border-bottom: none; }
.signer-item:hover { background: var(--s50); }
.signer-av { width: 34px; height: 34px; border-radius: 9px; background: var(--tl); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .7rem; flex-shrink: 0; }
.signer-info { flex: 1; min-width: 0; }
.signer-name { font-size: .8rem; font-weight: 600; color: var(--s800); }
.signer-sub { font-size: .65rem; color: var(--s400); margin-top: .05rem; }

/* ── LEFT: SIGNER ACCORDION ── */
.signer-acc { border-bottom: 1px solid var(--s100); }
.signer-acc:last-child { border-bottom: none; }
.signer-acc-hd { display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem; cursor: pointer; user-select: none; transition: background .15s; }
.signer-acc-hd:hover { background: var(--s50); }
.signer-acc-info { flex: 1; min-width: 0; }
.signer-acc-chv { color: var(--s400); transition: transform .2s; flex-shrink: 0; }
.signer-acc.open .signer-acc-chv { transform: rotate(180deg); }
.signer-acc-bd { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.signer-acc.open .signer-acc-bd { max-height: 600px; }
.signer-card-img-wrap { margin: 0 .6rem; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.signer-card-img { width: 100%; height: auto; display: block; }
.signer-card-btns { display: flex; gap: .3rem; padding: .4rem .6rem .5rem; }
.signer-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .38rem .3rem; border-radius: var(--rs); font-family: var(--ft); font-size: .64rem; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
.signer-btn.verify { background: var(--teal); color: #fff; }
.signer-btn.verify:hover { background: var(--td); }
.signer-btn.forensic { background: var(--card-bg); color: var(--s700); border: 1.5px solid var(--s200); }
.signer-btn.forensic:hover { border-color: var(--teal); color: var(--teal); background: var(--t50); }

/* ── RIGHT: SECTION LABEL ── */
.panel-label { font-size: .75rem; font-weight: 600; color: var(--s500); display: flex; align-items: center; gap: .3rem; margin-bottom: .15rem; }

/* ── RIGHT: DOC INFO CARD ── */
.doc-info { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--sh); padding: .9rem 1rem; }
.doc-info-name { font-weight: 700; font-size: .85rem; color: var(--s800); margin-bottom: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-info-meta { font-size: .72rem; color: var(--s400); margin-bottom: .5rem; }
.doc-hash-box { font-family: var(--mn); font-size: .58rem; color: var(--s500); background: var(--s50); padding: .35rem .5rem; border-radius: 6px; word-break: break-all; border: 1px solid var(--s200); line-height: 1.6; }
.doc-hash-box em { font-style: normal; font-family: var(--ft); font-size: .6rem; font-weight: 600; color: var(--s400); display: block; margin-bottom: .1rem; letter-spacing: .03em; }

/* ── RIGHT: HOLOGRAM ── */
.hologram-card { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--sh); padding: .7rem; display: flex; align-items: center; gap: .7rem; }
.hologram-img { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--s200); overflow: hidden; flex-shrink: 0; background: var(--s50); display: flex; align-items: center; justify-content: center; }
.hologram-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.hologram-info { flex: 1; min-width: 0; }
.hologram-title { font-size: .72rem; font-weight: 600; color: var(--s700); }
.hologram-sub { font-size: .62rem; color: var(--s400); margin-top: .1rem; }
.hologram-hash { font-family: var(--mn); font-size: .5rem; color: var(--teal); margin-top: .2rem; word-break: break-all; }

/* ── RIGHT: ACCORDION ── */
.acc { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; border: 1px solid var(--s200); transition: border-color .2s; }
.acc:hover { border-color: var(--s300); }
.acc-hd { display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; cursor: pointer; user-select: none; transition: background .15s; }
.acc-hd:hover { background: var(--s50); }
.acc-ic { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-ic.ok { background: var(--okl); color: var(--ok); }
.acc-ic.er { background: var(--erl); color: var(--er); }
.acc-ic.wn { background: var(--wnl); color: var(--wn); }
.acc-lb { flex: 1; font-size: .82rem; font-weight: 600; color: var(--s800); }
.acc-chv { color: var(--s400); transition: transform .2s; }
.acc.open .acc-chv { transform: rotate(180deg); }
.acc-bd { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc.open .acc-bd { max-height: 600px; }
.acc-inner { padding: .15rem .9rem .7rem; }

/* Accordion rows */
.row { display: flex; justify-content: space-between; align-items: flex-start; padding: .3rem 0; border-bottom: 1px solid var(--s100); }
.row:last-child { border-bottom: none; }
.row .k { color: var(--s400); font-size: .7rem; white-space: nowrap; min-width: 80px; }
.row .v { font-size: .72rem; color: var(--s700); text-align: right; word-break: break-all; max-width: 210px; }
.row .v.mono { font-family: var(--mn); font-size: .62rem; }
.row .v a { color: var(--teal); text-decoration: none; }
.row .v a:hover { text-decoration: underline; }
.badge { font-size: .55rem; font-weight: 600; padding: .08rem .3rem; border-radius: 3px; display: inline-block; margin-left: .2rem; vertical-align: middle; }
.badge.ok { background: var(--okl); color: var(--ok); }
.badge.er { background: var(--erl); color: var(--er); }
.badge.wn { background: var(--wnl); color: var(--wn); }
.badge.info { background: var(--tl); color: var(--td); }

/* Section divider inside accordion */
.acc-sect { font-size: .62rem; font-weight: 600; color: var(--s400); text-transform: uppercase; letter-spacing: .05em; margin-top: .5rem; margin-bottom: .15rem; padding-bottom: .15rem; border-bottom: 1px solid var(--s200); }

/* ── RIGHT: BLOCKCHAIN CARDS ── */
.bc-label { font-size: .78rem; font-weight: 600; color: var(--s600); margin-bottom: .35rem; }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.bc-card { border: 1px solid var(--s200); border-radius: var(--rs); padding: .55rem; text-align: center; transition: all .15s; text-decoration: none; display: block; }
.bc-card:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(13,148,136,.08); transform: translateY(-1px); }
.bc-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto .2rem; }
.bc-dot.rx { background: #FF6B35; }
.bc-dot.lc { background: #6366F1; }
.bc-nm { font-size: .76rem; font-weight: 600; color: var(--s800); }
.bc-tx { font-family: var(--mn); font-size: .52rem; color: var(--s400); margin: .1rem 0; }
.bc-lk { font-size: .65rem; color: var(--teal); font-weight: 500; }
.bc-merkle { display: block; text-align: center; margin-top: .35rem; font-size: .68rem; color: var(--teal); text-decoration: none; font-weight: 500; }
.bc-merkle:hover { text-decoration: underline; }

/* ── RIGHT: VALIDATE BUTTON ── */
.validate-btn { width: 100%; padding: .6rem; background: linear-gradient(135deg, var(--teal), var(--td)); color: #fff; border: none; border-radius: var(--rs); font-family: var(--ft); font-size: .82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .3rem; transition: opacity .2s; }
.validate-btn:hover { opacity: .9; }

/* ── RIGHT: ACTION BAR ── */
.action-bar { display: flex; gap: .4rem; margin-top: .15rem; }
.action-btn { flex: 1; padding: .4rem; border-radius: var(--rs); font-family: var(--ft); font-size: .72rem; font-weight: 600; cursor: pointer; border: 1px solid var(--s200); background: var(--card-bg); color: var(--s600); display: flex; align-items: center; justify-content: center; gap: .25rem; text-decoration: none; transition: all .15s; }
.action-btn:hover { background: var(--s50); border-color: var(--s300); }

/* ── MODAL ── */
.mo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 300; align-items: center; justify-content: center; padding: 1rem; }
.mo.on { display: flex; }
.mo-box { background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.mo-hd { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid var(--s100); }
.mo-hd h3 { font-size: .92rem; font-weight: 700; color: var(--s800); }
.mo-hd button { width: 28px; height: 28px; border: none; background: var(--s100); border-radius: 7px; font-size: 1.1rem; cursor: pointer; color: var(--s500); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.mo-hd button:hover { background: var(--s200); }
.mo-bd { padding: .7rem 1.2rem 1.2rem; }
.mo-ld { text-align: center; padding: 1.5rem 0; }
.mo-ld p { margin-top: .5rem; font-size: .78rem; color: var(--s400); }

/* Modal steps */
.mstep { padding: .65rem .7rem; border-radius: var(--r); margin-bottom: .45rem; border: 1px solid var(--s100); opacity: 0; transform: translateY(8px); transition: all .3s ease; }
.mstep.in { opacity: 1; transform: none; }
.mstep.ok { border-color: rgba(5,150,105,.2); background: rgba(5,150,105,.02); }
.mstep.er { border-color: rgba(220,38,38,.2); background: rgba(220,38,38,.02); }
.mstep.wn { border-color: rgba(217,119,6,.2); background: rgba(217,119,6,.02); }
.mstep-hd { display: flex; align-items: center; gap: .4rem; }
.mstep-ic { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mstep-ic.ok { background: var(--okl); color: var(--ok); }
.mstep-ic.er { background: var(--erl); color: var(--er); }
.mstep-ic.wn { background: var(--wnl); color: var(--wn); }
.mstep-ic.ld { background: var(--s100); color: var(--s400); }
.mstep-ic.ld svg { animation: sp .7s linear infinite; }
.mstep-title { font-size: .8rem; font-weight: 600; color: var(--s800); }
.mstep-desc { font-size: .7rem; color: var(--s500); margin: .1rem 0 0 1.85rem; }
.mstep-details { margin: .25rem 0 0 1.85rem; font-size: .68rem; color: var(--s500); }
.mstep-details div { padding: .1rem 0; }

/* ── FOOTER ── */
.ftr { text-align: center; padding: 1.5rem; color: var(--s400); font-size: .7rem; border-top: 1px solid var(--s200); margin-top: 2rem; }
.ftr a { color: var(--teal); text-decoration: none; font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .res.on { grid-template-columns: 1fr; }
    .res-r { position: static; }
    .upload h1 { font-size: 1.4rem; }
    .upload-feats { gap: .8rem; }
    .bc-grid { grid-template-columns: 1fr; }
    .pdf-body { min-height: 350px; }
    .pdf-embed { min-height: 350px; }
    .pdf-embed iframe, .pdf-embed object { min-height: 350px; }
}