/* jwt_decoder — tool-specific design (light security console; token parts in coral / violet / cyan). Shared: nav, footer, ad script only. */
body[data-tool="jwt_decoder"] {
  --jw-bg: #F4F5FA; --jw-card: #FFFFFF; --jw-ink: #12141C; --jw-ink2: #4B5163; --jw-mute: #8A90A2; --jw-line: #E1E4EE;
  --t-h: #E8396A; --t-p: #7C4DFF; --t-s: #0BA5C9; --jw-ok: #0E9F6E; --jw-bad: #E11D48; --jw-warn: #B45309;
  --jw-sans: Sora, system-ui, -apple-system, "Segoe UI", sans-serif; --jw-mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  background: var(--jw-bg); color: var(--jw-ink); font-family: var(--jw-sans);
}
body[data-tool="jwt_decoder"] .dt-nav { background: #12141C; border-bottom: 0; }
body[data-tool="jwt_decoder"] .dt-nav .navbar-brand, body[data-tool="jwt_decoder"] .dt-nav .nav-link { color: #fff; }
body[data-tool="jwt_decoder"] .dt-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.dt-bare { display: block; width: 100%; flex: 1; }
.jwx { max-width: 1180px; margin: 0 auto; padding: 34px 20px 64px; }
.jw-hero h1 { margin: 0; font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.jw-hero h1::after { content: ""; display: inline-block; width: 66px; height: 14px; margin-left: 16px; vertical-align: middle; border-radius: 7px; background: linear-gradient(90deg, var(--t-h) 0 33%, var(--t-p) 33% 66%, var(--t-s) 66%); }
.jw-hero p { margin: 10px 0 0; font-size: 17px; color: var(--jw-ink2); }

.jw { margin-top: 24px; background: var(--jw-card); border: 1px solid var(--jw-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(18,20,28,.07); padding: 18px; }
.jw-tabs { display: inline-flex; background: #EEF0F6; border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.jw-tabs button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--jw-ink2); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.jw-tabs button[aria-pressed="true"] { background: #fff; color: var(--jw-ink); box-shadow: 0 1px 3px rgba(18,20,28,.12); }
body[data-tab="decode"] .only-encode, body[data-tab="encode"] .only-decode, body:not([data-tab]) .only-encode { display: none !important; }
.jw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.jw-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jw-l { font-size: 13px; font-weight: 600; color: var(--jw-ink2); margin-top: 4px; }
.jw textarea, .jw select { width: 100%; border: 1px solid var(--jw-line); border-radius: 10px; background: #FAFBFD; font-family: var(--jw-mono); font-size: 14px; color: var(--jw-ink); padding: 10px 12px; outline: none; resize: vertical; }
.jw select { font-family: var(--jw-sans); font-weight: 600; }
.jw textarea:focus, .jw select:focus { border-color: var(--t-p); box-shadow: 0 0 0 3px rgba(124,77,255,.12); background: #fff; }
.jw-in { min-height: 130px; word-break: break-all; }
.jw-tok { font-family: var(--jw-mono); font-size: 14px; line-height: 1.6; word-break: break-all; padding: 12px 14px; background: #0F1117; color: #8A90A2; border-radius: 10px; min-height: 44px; }
.jw-tok .t-h { color: #FF6B92; } .jw-tok .t-p { color: #B39DFF; } .jw-tok .t-s { color: #4FD8F5; }
.jw-status { font-size: 14px; font-weight: 600; border-radius: 8px; padding: 8px 12px; background: #F1F2F7; color: var(--jw-ink2); }
.jw-status.ok { background: #E7F7F0; color: var(--jw-ok); } .jw-status.bad { background: #FDE8EC; color: var(--jw-bad); } .jw-status.warn { background: #FEF3E2; color: var(--jw-warn); }
.jw-verify { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--jw-line); display: flex; flex-direction: column; gap: 8px; }
.jw-key { min-height: 70px; }
.jw-vrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.jw-chk { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; color: var(--jw-ink2); }
.jw-chk input { accent-color: var(--t-p); }
.jw-vres { font-size: 14px; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.jw-vres:empty { display: none; }
.jw-vres.ok { background: #E7F7F0; color: var(--jw-ok); } .jw-vres.ok::before { content: "✓ "; }
.jw-vres.bad { background: #FDE8EC; color: var(--jw-bad); } .jw-vres.bad::before { content: "✕ "; }
.jw-card { border: 1px solid var(--jw-line); border-radius: 12px; overflow: hidden; background: #fff; }
.jw-c-h { border-top: 4px solid var(--t-h); } .jw-c-p { border-top: 4px solid var(--t-p); }
.jw-ch { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--jw-line); }
.jw-ch b { font-size: 14px; } .jw-ch span { font-size: 12.5px; color: var(--jw-mute); margin-right: auto; }
.jw-ch button, .jw-quick button { border: 1px solid var(--jw-line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; color: var(--jw-ink2); }
.jw-ch button:hover, .jw-quick button:hover { border-color: var(--t-p); color: var(--t-p); }
.jw-card pre { margin: 0; padding: 12px 14px; font-family: var(--jw-mono); font-size: 13.5px; line-height: 1.6; overflow: auto; max-height: 300px; }
.jw-card pre i { font-style: normal; } .jw-card .k { color: #6D28D9; } .jw-card .s { color: #0F766E; } .jw-card .n { color: #C2410C; } .jw-card .b { color: #BE185D; }
.jw-claims { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jw-claims td { padding: 8px 14px; border-bottom: 1px solid #F0F1F6; vertical-align: top; word-break: break-word; }
.jw-claims td:first-child { width: 34%; }
.jw-claims code { font-family: var(--jw-mono); font-weight: 600; color: var(--t-p); }
.jw-claims small { display: block; font-size: 12px; color: var(--jw-mute); margin-top: 2px; }
.jw-claims tr.ok small { color: var(--jw-ok); } .jw-claims tr.bad small { color: var(--jw-bad); font-weight: 600; }
.jw-claims tr:last-child td { border-bottom: 0; }
.jw-json { min-height: 90px; }
.jw-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.jw-encout { margin: 12px; min-height: 120px; }
.jw-msg { margin: 0 14px 12px; color: var(--jw-bad); font-size: 13.5px; }
.jw-msg:empty { display: none; }

.jw-adwrap { margin: 40px 0 8px; }
.jw-article, .jw-faq, .jw-more { max-width: 790px; margin: 0 auto; }
.jw-article { margin-top: 44px; font-size: 17px; line-height: 1.75; color: var(--jw-ink2); }
.jw-article h2, .jw-faq h2, .jw-more h2 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--jw-ink); margin: 52px 0 12px; }
.jw-article h2:first-child { margin-top: 0; }
.jw-article p { margin: 0 0 14px; } .jw-article b { color: var(--jw-ink); }
.jw-article ul { padding-left: 1.2em; } .jw-article li { margin: 7px 0; }
.jw-article code { font-family: var(--jw-mono); font-size: 14.5px; background: #fff; border: 1px solid var(--jw-line); border-radius: 6px; padding: 1px 6px; color: #6D28D9; }
.jw-table { overflow-x: auto; margin: 16px 0; background: #fff; border: 1px solid var(--jw-line); border-radius: 10px; }
.jw-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.jw-table th { text-align: left; padding: 10px 12px; font-size: 12.5px; color: var(--jw-mute); border-bottom: 2px solid var(--jw-ink); }
.jw-table td { padding: 9px 12px; border-bottom: 1px solid #F0F1F6; vertical-align: top; color: var(--jw-ink); }
.jw-table td:first-child { font-weight: 700; white-space: nowrap; font-family: var(--jw-mono); }
.jw-table tr:last-child td { border-bottom: 0; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; } .sw-h { background: var(--t-h); } .sw-p { background: var(--t-p); } .sw-s { background: var(--t-s); }
.jw-q { border-bottom: 1px solid var(--jw-line); }
.jw-q summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-size: 18px; font-weight: 600; color: var(--jw-ink); }
.jw-q summary::-webkit-details-marker { display: none; }
.jw-q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; color: var(--t-p); }
.jw-q[open] summary::after { content: "\2212"; }
.jw-q p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--jw-ink2); }
.jw-more > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jw-more a { display: block; text-decoration: none; padding: 14px 16px; border: 1px solid var(--jw-line); border-radius: 10px; background: #fff; color: var(--jw-ink); }
.jw-more a:hover { border-color: var(--t-p); }
.jw-more b { display: block; font-size: 16px; } .jw-more span { display: block; font-size: 14px; color: var(--jw-mute); margin-top: 2px; }

@media (max-width: 900px) { .jw-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .jwx { padding: 22px 12px 48px; }
  .jw-hero h1 { font-size: 36px; } .jw-hero h1::after { width: 44px; height: 10px; margin-left: 10px; }
  .jw { padding: 14px 12px; }
  .jw-article { font-size: 16px; }
  .jw-article h2, .jw-faq h2, .jw-more h2 { font-size: 25px; margin-top: 40px; }
  .jw-more > div { grid-template-columns: minmax(0, 1fr); }
}