.jwt-tools-page{--jwt-bg:#ffffff;--jwt-card-bg:#f8f9fa;--jwt-card-bg-alt:#f8f9fa;--jwt-border:#d0d7de;--jwt-card-border:#e1e4e8;--jwt-font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;--jwt-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--jwt-text-main:#24292f;--jwt-text-muted:#57606a;--jwt-text-inverse:#ffffff;--jwt-accent-purple:#0969da;--jwt-accent-purple-soft:rgba(9, 105, 218, 0.12);--jwt-accent-purple-dark:#0550ae;--jwt-accent-purple-lighter:#218bff;--jwt-accent-purple-lightest:#ddf4ff;--jwt-input-bg:#ffffff;--jwt-input-border:#d0d7de;--jwt-input-border-focus:#0969da;--jwt-btn-secondary-bg:#e7edf3;--jwt-btn-secondary-hover:#d0d7de;--jwt-success:#1a7f37;--jwt-success-bg:#dafbe1;--jwt-success-badge:#238636;--jwt-success-badge-hover:#2ea043;--jwt-error:#d1242f;--jwt-error-bg:#ffebe9;--jwt-error-badge:#da3633;--jwt-warning:#6e5404;--jwt-warning-bg:#fff8c5;--jwt-warning-badge:#e3b341;--jwt-info:#0969da;--jwt-info-bg:#ddf4ff;--jwt-info-badge:#0969da;--jwt-tooltip-bg:#111827;--jwt-tooltip-text:#f9fafb}.jwt-tools-page .container{max-width:1600px;margin:0 auto;padding:20px}.jwt-tools-page .tab-nav{display:flex;gap:10px;margin:10px 0 25px;border-bottom:1px solid var(--jwt-border)}.jwt-tools-page .tab-button{background:0 0;border:none;border-bottom:3px solid transparent;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;color:var(--jwt-text-muted);transition:all .2s ease}.jwt-tools-page .tab-button:hover{color:var(--jwt-text-main)}.jwt-tools-page .tab-button.active{color:var(--jwt-text-main);border-bottom-color:var(--jwt-accent-purple)}.jwt-tools-page .tool-section{background:var(--jwt-card-bg);border-radius:12px;border:1px solid var(--jwt-card-border);padding:24px;margin-bottom:24px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,8%)}.jwt-tools-page .section-title{font-size:1.2em;color:var(--jwt-accent-purple);margin-bottom:15px;font-weight:600}.jwt-tools-page .input-group{margin-bottom:20px}.jwt-tools-page label{display:block;margin-bottom:8px;font-weight:500;color:var(--jwt-text-main);font-size:13px;letter-spacing:.02em}.jwt-tools-page textarea,.jwt-tools-page input[type=text],.jwt-tools-page input[type=number],.jwt-tools-page input[type=password]{width:100%;padding:7px 11px;border:1px solid var(--jwt-input-border);border-radius:6px;background:var(--jwt-input-bg);color:var(--jwt-text-main);font-size:13px;font-family:var(--jwt-font-main);transition:border-color .2s,box-shadow .2s;resize:vertical}.jwt-tools-page textarea:focus,.jwt-tools-page input[type=text]:focus,.jwt-tools-page input[type=number]:focus,.jwt-tools-page input[type=password]:focus{outline:none;border-color:var(--jwt-input-border-focus);box-shadow:0 0 0 3px var(--jwt-accent-purple-soft)}.jwt-tools-page textarea{min-height:150px}.jwt-tools-page select{width:100%;padding:12px;border:1px solid var(--jwt-input-border);border-radius:6px;background:var(--jwt-input-bg);color:var(--jwt-text-main);font-size:13px;font-family:var(--jwt-font-main);transition:border-color .2s,box-shadow .2s}.jwt-tools-page select:focus{outline:none;border-color:var(--jwt-input-border-focus);box-shadow:0 0 0 3px var(--jwt-accent-purple-soft)}.jwt-tools-page .button-group{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.jwt-tools-page button{padding:8px 16px;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.jwt-tools-page .btn-primary{background:var(--jwt-accent-purple);border-color:var(--jwt-accent-purple);color:var(--jwt-text-inverse);box-shadow:0 2px 4px rgba(9,105,218,.3)}.jwt-tools-page .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(9,105,218,.4);background:var(--jwt-accent-purple-dark);border-color:var(--jwt-accent-purple-dark)}.jwt-tools-page .btn-secondary{background:var(--jwt-btn-secondary-bg);color:var(--jwt-text-main)}.jwt-tools-page .btn-secondary:hover{background:var(--jwt-btn-secondary-hover)}.jwt-tools-page .btn-toggle-active{background:var(--jwt-accent-purple);color:var(--jwt-text-inverse)}.jwt-tools-page .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin-top:20px}.jwt-tools-page .jwt-tools-card-title,.jwt-tools-page .card h3,.jwt-tools-page .tool-card h3{color:var(--jwt-text-main);font-size:1rem;margin:0;font-weight:600}.jwt-tools-page .regex-lab-card-subtitle,.jwt-tools-page .tool-card-header small{font-size:12px;color:var(--jwt-text-muted);margin-top:2px}.jwt-tools-page .card,.jwt-tools-page .tool-card{background:var(--jwt-card-bg-alt);border:1px solid var(--jwt-card-border);border-radius:var(--tool-card-radius);padding:var(--tool-card-padding);box-shadow:var(--tool-card-shadow);margin-bottom:20px}.jwt-tools-page .card-content{font-family:courier new,monospace;font-size:13px;line-height:1.8;word-break:break-all}.jwt-tools-page pre.card-content{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;overflow-x:auto;max-width:100%}.jwt-tools-page .relative{position:relative}.jwt-tools-page .status-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;margin-top:10px}.jwt-tools-page .status-valid{background:var(--jwt-success-badge);color:var(--jwt-text-inverse)}.jwt-tools-page .status-expired{background:var(--jwt-error-badge);color:var(--jwt-text-inverse)}.jwt-tools-page .status-warning{background:var(--jwt-warning-badge);color:var(--jwt-text-main)}.jwt-tools-page .copy-btn{position:absolute;top:10px;right:10px;background:var(--jwt-success-badge);color:var(--jwt-text-inverse);border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .3s}.jwt-tools-page .copy-btn:hover{background:var(--jwt-success-badge-hover)}.jwt-tools-page .alert{padding:15px;border-radius:6px;margin-top:15px;border-left:4px solid}.jwt-tools-page .alert-error{background:var(--jwt-error-bg);border-left-color:var(--jwt-error-badge);color:var(--jwt-error)}.jwt-tools-page .alert-success{background:var(--jwt-success-bg);border-left-color:var(--jwt-success-badge);color:var(--jwt-success)}.jwt-tools-page .alert-info{background:var(--jwt-info-bg);border-left-color:var(--jwt-info-badge);color:var(--jwt-info)}.jwt-tools-page .alert-warning{background:var(--jwt-warning-bg);border-left-color:var(--jwt-warning-badge);color:var(--jwt-warning)}.jwt-tools-page .info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--jwt-border)}.jwt-tools-page .info-row:last-child{border-bottom:none}.jwt-tools-page .info-label{font-weight:600;color:var(--jwt-text-muted)}.jwt-tools-page .info-value{color:var(--jwt-text-main);font-family:courier new,monospace}.jwt-tools-page .countdown{font-size:1.5em;font-weight:700;text-align:center;padding:20px;background:linear-gradient(135deg,var(--jwt-accent-purple) 0%,var(--jwt-accent-purple-soft) 100%);border-radius:8px;color:var(--jwt-text-inverse);margin:15px 0}.jwt-tools-page .mode-toggle-group{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;margin-bottom:10px}.jwt-tools-page .mode-toggle-group span{font-size:12px;color:var(--jwt-text-muted)}.jwt-tools-page .mode-toggle-group button{padding:6px 12px;font-size:12px}.jwt-tools-page .info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--jwt-text-muted);font-size:11px;font-weight:700;color:var(--jwt-text-muted);cursor:default;position:relative}.jwt-tools-page .info-icon::after{content:attr(data-tooltip);position:absolute;left:50%;top:120%;transform:translateX(-50%);background:var(--jwt-tooltip-bg);color:var(--jwt-tooltip-text);padding:8px 10px;border-radius:6px;font-size:11px;line-height:1.4;min-width:180px;max-width:260px;white-space:normal;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:20}.jwt-tools-page .info-icon::before{content:"";position:absolute;left:50%;top:110%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:var(--jwt-tooltip-bg)transparent transparent transparent;opacity:0;transition:opacity .15s ease;z-index:19}.jwt-tools-page .info-icon:hover::after,.jwt-tools-page .info-icon:hover::before{opacity:1}.jwt-tools-page .jwt-components-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.jwt-tools-page .jwt-component-card{background:var(--jwt-input-bg);border:1px solid var(--jwt-card-border);border-radius:12px;padding:20px;display:flex;flex-direction:column}.jwt-tools-page .jwt-component-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--jwt-card-border)}.jwt-tools-page .jwt-component-icon{font-size:1.25rem}.jwt-tools-page .jwt-component-title{font-size:1rem;font-weight:600;color:var(--jwt-text-main)}.jwt-tools-page .jwt-json-container{flex:1;background:var(--jwt-card-bg);border:1px solid var(--jwt-card-border);border-radius:8px;padding:16px;margin-bottom:16px;overflow:auto;max-height:300px}.jwt-tools-page .jwt-json-content{font-family:var(--jwt-font-mono);font-size:13px;line-height:1.6;margin:0;white-space:pre-wrap;word-break:break-word}.jwt-tools-page .jwt-json-content .json-key{color:#d73a49}.jwt-tools-page .jwt-json-content .json-string{color:#032f62}.jwt-tools-page .jwt-json-content .json-number{color:#005cc5}.jwt-tools-page .jwt-json-content .json-boolean{color:#d73a49}.jwt-tools-page .jwt-json-content .json-null{color:#6f42c1}.dark .jwt-tools-page .jwt-json-content .json-key{color:#79c0ff}.dark .jwt-tools-page .jwt-json-content .json-string{color:#a5d6ff}.dark .jwt-tools-page .jwt-json-content .json-number{color:#79c0ff}.dark .jwt-tools-page .jwt-json-content .json-boolean{color:#ff7b72}.dark .jwt-tools-page .jwt-json-content .json-null{color:#d2a8ff}.jwt-tools-page .jwt-copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:var(--jwt-accent-purple);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;align-self:flex-start}.jwt-tools-page .jwt-copy-btn:hover{background:var(--jwt-accent-purple-dark);transform:translateY(-1px)}.jwt-tools-page .jwt-copy-icon{font-size:1rem}.jwt-tools-page .jwt-signature-card{margin-top:0}.jwt-tools-page .jwt-signature-container{background:var(--jwt-card-bg);border:1px solid var(--jwt-card-border);border-radius:8px;padding:16px;margin-bottom:16px}.jwt-tools-page .jwt-signature-value{font-family:var(--jwt-font-mono);font-size:14px;color:#22863a;word-break:break-all;display:block;margin-bottom:12px}.dark .jwt-tools-page .jwt-signature-value{color:#7ee787}.jwt-tools-page .jwt-signature-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--jwt-text-muted);margin:0}.jwt-tools-page .jwt-info-icon{font-size:1rem}@media(max-width:900px){.jwt-tools-page .jwt-components-grid{grid-template-columns:1fr}}@media(max-width:768px){.jwt-tools-page .grid,.jwt-tools-page .tool-grid{grid-template-columns:1fr}.jwt-tools-page .tool-section{padding:20px}.jwt-tools-page .container{padding:10px}.jwt-tools-page .countdown{font-size:1.2em;padding:15px}}@media(max-width:640px){.jwt-tools-page .button-group,.jwt-tools-page .tool-button-row{flex-direction:column;align-items:stretch}.jwt-tools-page .button-group button,.jwt-tools-page .tool-button-row button,.jwt-tools-page .tool-button-row .tool-btn-primary,.jwt-tools-page .tool-button-row .tool-btn-secondary{width:100%}.jwt-tools-page .mode-toggle-group{justify-content:center}}@media(max-width:360px){.jwt-tools-page .mode-toggle-group{flex-direction:column;align-items:stretch}.jwt-tools-page .mode-toggle-group button{width:100%}.jwt-tools-page ol.tool-muted{margin-left:1rem!important;padding-left:.25rem}}.jwt-tools-page input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--jwt-input-border);border-radius:4px;background:var(--jwt-input-bg);cursor:pointer;position:relative;vertical-align:middle;flex-shrink:0}.jwt-tools-page input[type=checkbox]:checked{background:var(--jwt-accent-purple);border-color:var(--jwt-accent-purple)}.jwt-tools-page input[type=checkbox]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}