.csv-json-page{background:radial-gradient(circle at 48% 12%,rgba(26,182,164,.15),transparent 29%),radial-gradient(circle at 84% 43%,rgba(83,66,215,.13),transparent 27%),linear-gradient(180deg,#020615,#04091b 72%,#071127)}.csv-json-hero .eyebrow{color:#54d8c0}.csv-page-icon{color:#59dec8;border-color:rgba(62,200,178,.38);background:linear-gradient(145deg,rgba(26,159,141,.2),rgba(55,61,167,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 36px rgba(35,178,157,.12)}.csv-page-icon svg{width:41px;height:41px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.csv-json-content{max-width:1260px}
.csv-converter-workspace{padding:22px;border:1px solid rgba(90,110,157,.22);border-radius:17px;background:linear-gradient(145deg,rgba(15,25,50,.97),rgba(6,14,33,.98));box-shadow:0 22px 62px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.025)}.csv-workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.csv-title{display:flex;align-items:center;gap:12px}.csv-title>span{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;color:#55d6be;border:1px solid rgba(60,193,171,.25);border-radius:11px;background:rgba(29,152,134,.1)}.csv-title svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.csv-title h2{margin:0;font-size:17px}.csv-title p{margin:5px 0 0;color:#8992a9;font-size:10px}.csv-direction-switch{padding:3px;display:flex;border:1px solid rgba(83,106,153,.25);border-radius:9px;background:#070f22}.csv-direction-switch button{height:32px;padding:0 12px;color:#7e899f;border:0;border-radius:6px;background:transparent;font-size:10px;font-weight:730;cursor:pointer}.csv-direction-switch button.is-active{color:#e9fff9;background:linear-gradient(135deg,rgba(38,167,146,.34),rgba(55,78,178,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.csv-options-row{min-height:47px;margin:17px 0 12px;padding:7px 9px;display:flex;align-items:center;gap:15px;border:1px solid rgba(82,100,143,.16);border-radius:10px;background:rgba(5,13,30,.44)}.csv-options-row>label:not(.csv-check){display:flex;align-items:center;gap:8px;color:#818ba1;font-size:9px}.csv-options-row select{height:31px;padding:0 27px 0 9px;color:#d5dbea;border:1px solid rgba(89,109,158,.25);border-radius:7px;outline:0;background:#0a142a;font-size:9px;cursor:pointer}.csv-check{display:flex;align-items:center;gap:7px;color:#8993aa;font-size:9px;cursor:pointer}.csv-check input{position:absolute;opacity:0;pointer-events:none}.csv-check>span{width:15px;height:15px;display:grid;place-items:center;border:1px solid #46526e;border-radius:4px;background:#081127}.csv-check input:checked+span{border-color:#45c8ad;background:linear-gradient(135deg,#2eb79e,#496ce1)}.csv-check input:checked+span:after{content:"✓";color:#fff;font-size:10px;font-weight:900}.csv-local-badge{margin-left:auto;color:#60ceb9;font-size:9px;white-space:nowrap}.csv-local-badge span{margin-right:4px}
.csv-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.csv-editor-card{min-width:0;overflow:hidden;border:1px solid rgba(84,102,147,.2);border-radius:12px;background:rgba(4,11,28,.64)}.csv-editor-heading{height:52px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(83,99,137,.16);background:rgba(13,23,45,.54)}.csv-editor-heading>div:first-child span{color:#657189;font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.csv-editor-heading h3{margin:2px 0 0;color:#dfe4ef;font-size:11px}.csv-editor-heading>div:last-child{display:flex;gap:6px}.csv-editor-heading button{height:27px;padding:0 8px;color:#91a2c0;border:1px solid rgba(84,106,157,.23);border-radius:6px;background:rgba(23,39,75,.36);font-size:8px;cursor:pointer}.csv-editor-heading button:hover:not(:disabled){color:#fff;border-color:#50cdb5}.csv-editor-heading button:disabled{opacity:.35;cursor:default}.csv-output-card{border-color:rgba(52,161,141,.2)}
.csv-editor-shell{height:340px;display:grid;grid-template-columns:42px minmax(0,1fr);background:#050d20}.csv-line-numbers{padding:12px 8px;overflow:hidden;border-right:1px solid rgba(75,91,129,.18);color:#4e5a73;background:#050b1a;font:10px/20px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:right;user-select:none}.csv-line-numbers span{display:block}.csv-editor-shell textarea{width:100%;height:100%;padding:12px;resize:none;color:#dce4f4;border:0;outline:0;background:transparent;font:11px/20px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre}.csv-editor-shell textarea::placeholder{color:#566279}.csv-editor-shell textarea:focus{box-shadow:inset 0 0 0 1px rgba(62,196,172,.3)}.csv-output-card textarea{color:#bfe8df}.csv-editor-card footer{height:31px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#5f6b83;border-top:1px solid rgba(79,94,131,.14);font-size:8px}
.csv-action-row{min-height:46px;margin-top:12px;display:flex;align-items:center;gap:8px}.csv-action-row>button{height:36px;padding:0 12px;color:#9aa5bb;border:1px solid rgba(83,104,151,.25);border-radius:8px;background:rgba(18,31,60,.5);font-size:9px;font-weight:700;cursor:pointer}.csv-action-row>button:hover:not(:disabled){color:#fff;border-color:#52cdb6}.csv-action-row .csv-convert-button{padding:0 17px;color:#fff;border:0;background:linear-gradient(135deg,#22b99e,#5268e4);box-shadow:0 9px 24px rgba(34,165,145,.16)}.csv-action-row button:disabled{opacity:.38;cursor:default}.csv-status{margin:0 0 0 auto;font-size:9px;text-align:right}.csv-status.success{color:#63d7b3}.csv-status.error{color:#ff8394}.csv-status.neutral{color:#788399}.csv-hidden-input{display:none}
.csv-information{margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.csv-information article{padding:16px;border:1px solid rgba(92,105,149,.15);border-radius:10px;background:rgba(16,25,49,.54)}.csv-information h2{margin:0 0 6px;font-size:12px}.csv-information p{margin:0;color:#858da5;font-size:10px;line-height:1.55}
@media(max-width:850px){.csv-workspace-heading{align-items:flex-start;flex-direction:column}.csv-editor-grid{grid-template-columns:1fr}.csv-editor-shell{height:300px}.csv-information{grid-template-columns:1fr}}
@media(max-width:620px){.csv-converter-workspace{padding:15px;border-radius:14px}.csv-direction-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.csv-options-row{align-items:flex-start;flex-wrap:wrap}.csv-local-badge{margin-left:0}.csv-editor-shell{height:270px}.csv-action-row{align-items:stretch;display:grid;grid-template-columns:1fr 1fr}.csv-action-row .csv-convert-button{grid-column:1/-1}.csv-status{grid-column:1/-1;margin:2px 0 0;text-align:left}.csv-title p{line-height:1.4}}