.json-tool-page { background: radial-gradient(circle at 44% 10%, rgba(42, 83, 189, .2), transparent 28%), radial-gradient(circle at 88% 48%, rgba(44, 95, 201, .14), transparent 30%), linear-gradient(180deg, #020615, #04091a 72%, #06102a); }.json-page-icon { color: #5d8dff; border-color: rgba(74, 124, 244, .42); background: linear-gradient(145deg, rgba(47, 92, 202, .25), rgba(23, 45, 105, .42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(71, 121, 240, .14); font: 750 31px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }.json-page-hero .eyebrow { color: #618dff; }
.json-workspace { padding: 25px 25px 0; border: 1px solid rgba(103, 118, 166, .24); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 28, 53, .95), rgba(6, 14, 33, .97)); box-shadow: 0 25px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); overflow: hidden; }.json-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.json-editor-field { display: grid; gap: 8px; min-width: 0; }.json-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.json-editor-heading label { color: #d8dbe9; font-size: 13px; font-weight: 650; }.json-editor-heading span { color: #7f869d; font-size: 11px; }.json-textarea-shell { position: relative; }.json-textarea-shell textarea { width: 100%; min-height: 340px; padding: 14px 49px 14px 15px; resize: vertical; color: #e9ecf8; border: 1px solid #35415f; border-radius: 10px; outline: 0; background: #081126; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }.json-textarea-shell textarea::placeholder { color: #687188; }.json-textarea-shell textarea:focus { border-color: #5484f4; box-shadow: 0 0 0 3px rgba(84, 132, 244, .1); }.json-textarea-shell button { width: 34px; height: 34px; position: absolute; right: 9px; bottom: 10px; display: grid; place-items: center; color: #b8c8ef; border: 1px solid rgba(102, 126, 182, .36); border-radius: 8px; background: rgba(15, 29, 60, .92); cursor: pointer; }.json-textarea-shell button:hover { color: white; border-color: rgba(92, 139, 246, .68); }
.json-controls { margin: 20px -25px 0; padding: 17px 25px; display: grid; grid-template-columns: 140px minmax(150px, 1fr) repeat(3, minmax(100px, auto)); align-items: end; gap: 10px; border-top: 1px solid rgba(100, 114, 160, .16); background: rgba(11, 21, 45, .7); }.json-indent-control { display: grid; gap: 7px; }.json-indent-control label { color: #aeb5cb; font-size: 11px; }.json-indent-control select { height: 42px; padding: 0 11px; color: #e9ecf8; border: 1px solid #35415f; border-radius: 8px; outline: 0; background: #091228; }.json-controls > button { height: 42px; padding: 0 16px; color: #cbd2e6; border: 1px solid rgba(102, 119, 164, .34); border-radius: 8px; background: rgba(18, 29, 55, .82); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s ease, border-color .18s ease, filter .18s ease; }.json-controls > button:hover { transform: translateY(-1px); color: white; border-color: rgba(83, 133, 246, .62); }.json-controls .json-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: white; border: 0; background: linear-gradient(135deg, #416fe9, #6555df); box-shadow: 0 9px 23px rgba(65, 96, 220, .22); }.json-controls .json-clear-button { background: rgba(77, 86, 110, .55); }.json-status { min-height: 35px; margin: 0 -25px; padding: 10px 25px 13px; color: #9aa4bc; background: rgba(5, 13, 31, .62); font-size: 11px; }.json-status.success { color: #5bdc8d; }.json-status.error { color: #ff7788; }.json-information article > span { color: #5d8dff; font: 700 18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.json-suite { display: grid; gap: 13px; }.json-suite-tabs { padding: 7px; display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr)); gap: 6px; overflow-x: auto; border: 1px solid rgba(103, 118, 166, .23); border-radius: 13px; background: rgba(7, 15, 35, .86); scrollbar-width: thin; scrollbar-color: #34446e transparent; }.json-suite-tabs button { min-width: 130px; height: 43px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #9ca6bf; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; }.json-suite-tabs button span { color: #7199ff; font: 750 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }.json-suite-tabs button:hover { color: white; background: rgba(44, 62, 109, .28); }.json-suite-tabs button.active { color: white; border-color: rgba(88, 133, 246, .42); background: linear-gradient(135deg, rgba(54, 91, 190, .52), rgba(71, 49, 158, .45)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.json-feature-workspace { padding-top: 21px; }.json-feature-heading { margin-bottom: 19px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.json-feature-heading h2 { margin: 0; font-size: 17px; }.json-feature-heading p { margin: 5px 0 0; color: #858da4; font-size: 11px; }.json-feature-heading > span { padding: 5px 9px; color: #8eaeff; border: 1px solid rgba(85, 130, 239, .3); border-radius: 999px; background: rgba(53, 89, 179, .11); font-size: 9px; font-weight: 700; white-space: nowrap; }
.yaml-direction-switch { width: fit-content; margin-bottom: 17px; padding: 4px; display: flex; gap: 4px; border: 1px solid rgba(92, 111, 159, .28); border-radius: 9px; background: rgba(5, 13, 31, .64); }.yaml-direction-switch button { height: 34px; padding: 0 15px; color: #8f98b0; border: 0; border-radius: 6px; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }.yaml-direction-switch button.active { color: white; background: linear-gradient(135deg, #416fe9, #6555df); box-shadow: 0 7px 18px rgba(65, 96, 220, .2); }
.json-feature-actions { margin: 20px -25px 0; padding: 16px 25px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(100, 114, 160, .16); background: rgba(11, 21, 45, .7); }.json-feature-actions button { min-width: 126px; height: 42px; padding: 0 16px; color: #cbd2e6; border: 1px solid rgba(102, 119, 164, .34); border-radius: 8px; background: rgba(18, 29, 55, .82); font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .18s ease, border-color .18s ease, filter .18s ease; }.json-feature-actions button:hover:not(:disabled) { transform: translateY(-1px); color: white; border-color: rgba(83, 133, 246, .62); }.json-feature-actions button:disabled { opacity: .42; cursor: not-allowed; }.json-feature-actions .json-primary-button { min-width: 190px; color: white; border: 0; background: linear-gradient(135deg, #416fe9, #6555df); box-shadow: 0 9px 23px rgba(65, 96, 220, .22); }
.json-diff-results { margin: 18px 0 21px; display: grid; gap: 8px; }.json-diff-row { padding: 12px 14px; display: grid; grid-template-columns: 70px minmax(120px, .55fr) minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid rgba(105, 120, 162, .22); border-left: 3px solid #efb84f; border-radius: 8px; background: rgba(7, 15, 34, .68); }.json-diff-row.added { border-left-color: #4bd985; }.json-diff-row.removed { border-left-color: #ff6f84; }.json-diff-kind { color: #efc36d; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.json-diff-row.added .json-diff-kind { color: #56df8d; }.json-diff-row.removed .json-diff-kind { color: #ff8294; }.json-diff-row code { overflow: hidden; color: #b9c8ee; font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.json-diff-row div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 9px; }.json-diff-row div span { overflow: hidden; color: #9ca4b8; font: 10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.json-diff-row div i { color: #64728f; font-style: normal; }.json-no-differences { min-height: 92px; display: grid; place-items: center; align-content: center; gap: 7px; color: #55dc8c; border: 1px dashed rgba(78, 211, 133, .28); border-radius: 10px; background: rgba(36, 133, 79, .06); }.json-no-differences span { font-size: 23px; }.json-no-differences p { margin: 0; color: #b6c9c0; font-size: 11px; }
.typescript-name-control { max-width: 320px; margin-bottom: 17px; display: grid; gap: 7px; }.typescript-name-control label, .jwt-token-field label { color: #c9cddd; font-size: 11px; font-weight: 650; }.typescript-name-control input { height: 41px; padding: 0 12px; color: #f0f2fa; border: 1px solid #35415f; border-radius: 8px; outline: 0; background: #081126; font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }.typescript-name-control input:focus, .jwt-token-field textarea:focus { border-color: #5484f4; box-shadow: 0 0 0 3px rgba(84, 132, 244, .1); }
.json-feature-heading .jwt-warning-badge { color: #ffc977; border-color: rgba(235, 178, 80, .35); background: rgba(172, 112, 32, .11); }.jwt-token-field { display: grid; gap: 8px; }.jwt-token-field textarea { width: 100%; min-height: 96px; padding: 13px 14px; resize: vertical; color: #e9ecf8; border: 1px solid #35415f; border-radius: 10px; outline: 0; background: #081126; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; word-break: break-all; }.jwt-token-field textarea::placeholder { color: #687188; }.jwt-claims-summary { margin: 18px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }.jwt-claims-summary article { min-width: 0; padding: 12px 13px; display: grid; gap: 6px; border: 1px solid rgba(93, 111, 159, .2); border-radius: 8px; background: rgba(6, 14, 32, .7); }.jwt-claims-summary span { color: #7f889f; font-size: 9px; }.jwt-claims-summary strong { overflow: hidden; color: #65dd92; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.jwt-claims-summary strong.expired { color: #ff788a; }.jwt-output-grid { margin-top: 18px; }.jwt-security-note { margin: 18px 0; padding: 11px 13px; color: #c3ab7e; border: 1px solid rgba(205, 155, 64, .22); border-radius: 8px; background: rgba(141, 91, 19, .07); font-size: 10px; line-height: 1.55; }
.json-line-numbered-shell { overflow: hidden; border-radius: 10px; background: #081126; }.json-line-numbered-shell textarea, .jwt-token-field .json-line-numbered-shell textarea { position: relative; z-index: 1; padding-left: 58px; background: transparent; }.json-line-numbers { width: 42px; height: calc(100% - 2px); padding: 13px 8px 13px 0; position: absolute; left: 1px; top: 1px; z-index: 2; overflow: hidden; color: #59637d; border-right: 1px solid rgba(104, 121, 166, .2); border-radius: 9px 0 0 9px; background: #0a142a; font: 10px/1.92 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right; pointer-events: none; user-select: none; }.json-line-numbers span { height: 19.2px; display: block; }.jwt-token-editor .json-line-numbers { font-size: 9px; line-height: 1.9555; }.jwt-token-editor .json-line-numbers span { height: 17.6px; }
.json-feature-loading { min-height: 260px; display: grid; place-items: center; color: #8290af; font-size: 11px; }
@media (max-width: 860px) { .json-suite, .json-workspace, .json-editor-field { min-width: 0; }.json-suite-tabs { grid-template-columns: repeat(5, max-content); }.json-editor-grid { grid-template-columns: minmax(0, 1fr); }.json-textarea-shell textarea { min-height: 250px; }.json-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }.json-indent-control { grid-column: 1 / -1; }.jwt-claims-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.json-diff-row { grid-template-columns: 62px minmax(100px, .4fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .json-suite-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }.json-suite-tabs button { width: 100%; min-width: 0; height: auto; min-height: 43px; padding: 8px; white-space: normal; line-height: 1.3; }.json-suite-tabs button:last-child { grid-column: 1 / -1; }.json-workspace { padding: 18px 18px 0; }.json-controls { margin-left: -18px; margin-right: -18px; padding: 16px 18px; grid-template-columns: minmax(0, 1fr); }.json-indent-control { grid-column: auto; }.json-status { margin-left: -18px; margin-right: -18px; padding-right: 18px; padding-left: 18px; }.json-editor-heading { align-items: flex-start; flex-direction: column; gap: 5px; }.json-textarea-shell textarea { min-height: 220px; }.json-feature-workspace { padding-top: 18px; }.json-feature-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.json-feature-actions { margin-left: -18px; margin-right: -18px; padding: 16px 18px; flex-direction: column; align-items: stretch; }.json-feature-actions button, .json-feature-actions .json-primary-button { width: 100%; min-width: 0; }.yaml-direction-switch { width: 100%; }.yaml-direction-switch button { flex: 1; padding: 0 8px; }.typescript-name-control { max-width: none; }.jwt-claims-summary { grid-template-columns: 1fr; }.json-diff-row { grid-template-columns: 1fr; gap: 7px; }.json-diff-row div { grid-template-columns: minmax(0, 1fr); gap: 4px; }.json-diff-row div i { transform: rotate(90deg); text-align: center; }.json-diff-row div span { white-space: normal; word-break: break-word; } }