*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{font-size:16px;scroll-behavior:smooth}
    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:#1a1a2e;background:#f8f9fd;min-height:100vh;display:flex;flex-direction:column}

    /* Header */
    .header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:100}
    .header-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
    .logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:#fa8c16;text-decoration:none}
    .back-link{font-size:14px;color:#666;text-decoration:none;transition:color .2s}
    .back-link:hover{color:#1677ff}

    .main{max-width:1100px;margin:0 auto;padding:24px 24px 40px;flex:1;width:100%}
    h1{font-size:clamp(20px,3.5vw,28px);font-weight:700;margin-bottom:4px}
    .subtitle{color:#666;margin-bottom:20px;font-size:14px}

    /* Tool nav tabs */
    .tool-nav{display:flex;gap:0;overflow-x:auto;border-bottom:2px solid #eee;margin-bottom:24px;-webkit-overflow-scrolling:touch}
    .tool-nav::-webkit-scrollbar{height:0}
    .tool-tab{padding:10px 18px;font-size:14px;font-weight:500;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;flex-shrink:0}
    .tool-tab.active{color:#fa8c16;border-bottom-color:#fa8c16;font-weight:600}
    .tool-tab:hover{color:#fa8c16}

    /* Panels */
    .panel{display:none}
    .panel.active{display:block}

    /* Shared form elements */
    .form-row{margin-bottom:16px}
    .form-label{font-size:13px;font-weight:600;color:#555;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
    textarea{width:100%;min-height:140px;padding:12px;border:1px solid #d9d9d9;border-radius:10px;font-family:Menlo,Consolas,monospace;font-size:14px;resize:vertical;transition:border-color .2s;line-height:1.6}
    textarea:focus{outline:none;border-color:#fa8c16;box-shadow:0 0 0 3px rgba(250,140,22,.1)}
    .result-box{width:100%;min-height:80px;padding:12px;border:1px solid #e8e8e8;border-radius:10px;font-family:Menlo,Consolas,monospace;font-size:14px;background:#fafafa;word-break:break-all;line-height:1.6;white-space:pre-wrap}

    .actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
    .btn{padding:8px 20px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px}
    .btn-primary{background:#fa8c16;color:#fff}
    .btn-primary:hover{background:#d46b08}
    .btn-secondary{background:#fff;color:#555;border:1px solid #d9d9d9}
    .btn-secondary:hover{border-color:#fa8c16;color:#fa8c16}
    .btn-copy{background:#f0f5ff;color:#1677ff;border:1px solid #d6e4ff}
    .btn-copy:hover{background:#d6e4ff}

    .options-row{display:flex;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
    .opt-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#555;cursor:pointer}
    .opt-label input{accent-color:#fa8c16}

    /* Two-col layout */
    .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media(max-width:700px){.two-col{grid-template-columns:1fr}}

    /* File drop */
    .file-drop{border:2px dashed #d9d9d9;border-radius:12px;padding:32px 20px;text-align:center;color:#999;cursor:pointer;transition:all .2s;margin-bottom:16px}
    .file-drop:hover,.file-drop.dragover{border-color:#fa8c16;background:#fff7e6}
    .file-drop input{display:none}

    /* JWT specific */
    .jwt-section{margin-bottom:20px}
    .jwt-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .jwt-section-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
    .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
    .dot-r{background:#f5222d}.dot-b{background:#1677ff}.dot-g{background:#52c41a}
    .jwt-json{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:14px;font-family:Menlo,Consolas,monospace;font-size:13px;line-height:1.8;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
    .claims-table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e8e8e8}
    .claims-table th,.claims-table td{padding:8px 12px;text-align:left;font-size:13px;border-bottom:1px solid #f0f0f0}
    .claims-table th{background:#fafafa;font-weight:600;color:#555}
    .claims-table td:first-child{font-family:Menlo,Consolas,monospace;color:#722ed1;font-weight:600;white-space:nowrap}
    .time-val{color:#1677ff}.expired{color:#f5222d;font-weight:600}.valid{color:#52c41a;font-weight:600}
    .security-note{display:inline-flex;align-items:center;gap:6px;background:#f6ffed;color:#389e0d;padding:5px 12px;border-radius:6px;font-size:12px;margin-bottom:16px}
    .jwt-error{background:#fff1f0;border:1px solid #ffa39e;color:#cf1322;padding:10px 14px;border-radius:8px;font-size:13px;display:none}
    .jwt-error.show{display:block}

    /* Hash output */
    .hash-output{font-family:Menlo,Consolas,monospace;font-size:15px;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:14px;word-break:break-all;min-height:48px;display:flex;align-items:center}

    .toast{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:#52c41a;color:#fff;padding:8px 22px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:200}
    .toast.show{opacity:1}

    .footer{background:#1a1a2e;color:rgba(255,255,255,.7);padding:32px 24px;text-align:center;font-size:13px;margin-top:auto}
    .footer a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
    .footer a:hover{color:#fff}
    .footer-links{margin-bottom:12px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
  
.tool-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}.tool-links a{padding:8px 12px;border:1px solid #f3d4ae;background:#fff;border-radius:8px;color:#9b4c00;text-decoration:none}
.tool-links a:hover,.tool-links a[aria-current="page"]{background:#fff0dd}.guide{margin-top:32px;line-height:1.85;color:#444}
.guide section{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px;margin-top:16px}.guide h2{font-size:20px;color:#1a1a2e;margin-bottom:10px}.guide h3{font-size:16px;margin-top:16px}
.guide p{margin:8px 0}.guide ul,.guide ol{padding-left:24px}.guide pre{padding:16px;background:#f6f8fa;border-radius:8px;overflow:auto;line-height:1.6}.guide code{overflow-wrap:anywhere}.guide a{color:#9b4c00}
.breadcrumbs{font-size:14px;margin-bottom:14px}.breadcrumbs a{color:#9b4c00}.sample-action{margin-bottom:16px}.subtitle{line-height:1.8}
a:focus-visible,button:focus-visible{outline:3px solid #1677ff;outline-offset:3px}.two-col>div{min-width:0}.claims-table td{overflow-wrap:anywhere}
@media(max-width:700px){.guide section{padding:18px}.main{padding:20px 16px}.header-inner{padding:0 16px}.claims-table{table-layout:fixed}}