*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body,.topbar,.work-area,.glass-card,textarea,input,select,button{transition:background-color .3s,color .3s,border-color .3s}:root{--brand-400: #818CF8;--brand-500: #6366F1;--brand-600: #4F46E5;--bg-page: #F2F2F7;--bg-glass: rgba(255,255,255,.55);--bg-glass-thick: rgba(255,255,255,.72);--bg-glass-input: rgba(255,255,255,.6);--bg-glass-card: rgba(255,255,255,.45);--bg-glass-hover: rgba(255,255,255,.65);--bg-mesh-1: #C7D2FE;--bg-mesh-2: #DDD6FE;--bg-mesh-3: #BFDBFE;--bg-mesh-4: #A5F3FC;--text-primary: #1D1D1F;--text-secondary: #6E6E73;--text-tertiary: #86868B;--text-caption: #AEAEB2;--border-glass: rgba(255,255,255,.5);--border-glass-outer: rgba(0,0,0,.06);--border-input: rgba(0,0,0,.1);--success: #30D158;--error: #FF453A;--warning: #FF9F0A;--glass-blur: 40px;--glass-saturate: 200%;--glass-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.1);--glass-shadow-hover: 0 8px 32px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.12);--glass-shine: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 50%);--font-ui: -apple-system, "SF Pro Display", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;--font-code: "JetBrains Mono", "SF Mono", monospace}[data-theme=dark]{--bg-page: #000000;--bg-glass: rgba(38,38,40,.55);--bg-glass-thick: rgba(44,44,46,.72);--bg-glass-input: rgba(30,30,34,.7);--bg-glass-card: rgba(38,38,40,.45);--bg-glass-hover: rgba(50,50,54,.65);--bg-mesh-1: #312E81;--bg-mesh-2: #4C1D95;--bg-mesh-3: #1E3A5F;--bg-mesh-4: #164E63;--text-primary: #F5F5F7;--text-secondary: #A1A1A6;--text-tertiary: #6E6E73;--text-caption: #48484A;--border-glass: rgba(255,255,255,.12);--border-glass-outer: rgba(255,255,255,.06);--border-input: rgba(255,255,255,.1);--glass-shadow: 0 2px 16px rgba(0,0,0,.3), 0 0 1px rgba(255,255,255,.06);--glass-shadow-hover: 0 8px 32px rgba(0,0,0,.4), 0 0 1px rgba(255,255,255,.08);--glass-shine: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%)}body{font-family:var(--font-ui);background:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.mesh-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:mesh-float 20s ease-in-out infinite}.mesh-blob:nth-child(1){width:500px;height:500px;background:var(--bg-mesh-1);top:-15%;right:10%}.mesh-blob:nth-child(2){width:400px;height:400px;background:var(--bg-mesh-2);bottom:10%;left:-5%;animation-delay:-7s}.mesh-blob:nth-child(3){width:350px;height:350px;background:var(--bg-mesh-3);top:40%;right:-10%;animation-delay:-14s}@keyframes mesh-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}[data-theme=dark] .mesh-blob{opacity:.25;filter:blur(100px)}[data-theme=dark] .topbar{border-bottom-color:#ffffff1a}.topbar{height:44px;background:var(--bg-glass-thick);backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));border-bottom:1px solid rgba(0,0,0,.1);display:flex;align-items:center;padding:0 16px;position:relative;z-index:10;flex-shrink:0}.topbar:before{display:none}.topbar-logo{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;flex-shrink:0;padding-right:12px;border-right:.5px solid var(--border-glass-outer);margin-right:12px}.topbar-logo-icon{width:24px;height:24px;background:linear-gradient(135deg,#6366f1,#818cf8);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:var(--font-code)}.topbar-logo-text{font-size:13px;font-weight:600;color:var(--brand-500)}.topbar-tool-name{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}.topbar-spacer{flex:1}.topbar-btn{height:28px;padding:0 10px;font-size:11px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;border-radius:14px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s}.topbar-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.tool-toolbar{height:44px;background:var(--bg-glass);backdrop-filter:saturate(var(--glass-saturate)) blur(20px);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(20px);border-bottom:.5px solid var(--border-glass-outer);display:flex;align-items:center;padding:0 16px;gap:8px;position:relative;z-index:5;flex-shrink:0}.toggle-pill{display:inline-flex;background:#0000000a;border-radius:14px;padding:2px;gap:1px}[data-theme=dark] .toggle-pill{background:#ffffff0f}.toggle-pill-option{padding:4px 14px;font-size:12px;font-weight:500;color:var(--text-tertiary);background:transparent;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.toggle-pill-option.active{background:var(--bg-glass-thick);color:var(--text-primary);box-shadow:0 1px 3px #00000014}.toolbar-spacer{flex:1}.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;font-size:11px;font-weight:600;border-radius:100px}.badge-success{color:var(--success);background:#30d1581a}.btn-tool{height:28px;padding:0 10px;font-size:11px;font-weight:500;color:var(--text-secondary);background:transparent;border:.5px solid var(--border-glass-outer);border-radius:14px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s}.btn-tool:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.work-area{flex:1;display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:1;min-height:0}.work-area.single-col{grid-template-columns:1fr}.work-pane{display:flex;flex-direction:column;min-height:0}.work-pane:first-child{border-right:.5px solid var(--border-glass-outer)}.work-area.single-col .work-pane:first-child{border-right:none}.pane-header{height:32px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:.5px solid var(--border-glass-outer);flex-shrink:0}.pane-label{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.pane-meta{font-size:11px;color:var(--text-caption)}.pane-editor{flex:1;min-height:0}.pane-editor textarea{width:100%;height:100%;padding:16px 18px;font-family:var(--font-code);font-size:13px;line-height:1.7;background:transparent;border:none;outline:none;color:var(--text-primary);resize:none}.pane-editor textarea::placeholder{color:var(--text-caption)}.pane-output{flex:1;padding:16px 18px;font-family:var(--font-code);font-size:13px;line-height:1.7;color:var(--text-primary);overflow:auto;word-break:break-all;min-height:0}.swap-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass-thick);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:.5px solid var(--border-glass);border-radius:50%;color:var(--text-secondary);cursor:pointer;font-size:14px;z-index:2;transition:all .2s;box-shadow:var(--glass-shadow)}.swap-btn:hover{transform:translate(-50%,-50%) scale(1.15)}.statusbar{height:24px;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:.5px solid var(--border-glass-outer);display:flex;align-items:center;padding:0 16px;gap:16px;font-size:11px;color:var(--text-caption);flex-shrink:0;position:relative;z-index:5}.statusbar-item{display:flex;align-items:center;gap:4px}.statusbar-spacer{flex:1}.statusbar a{color:var(--text-tertiary);text-decoration:none;font-size:11px}.statusbar a:hover{color:var(--brand-500)}.theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-tertiary);border-radius:50%;cursor:pointer;font-size:15px;transition:all .2s}.theme-btn:hover{background:var(--bg-glass-hover)}.glass-card{background:var(--bg-glass-card);backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));border:.5px solid var(--border-glass);border-radius:16px;padding:24px;box-shadow:var(--glass-shadow);position:relative;overflow:hidden}.glass-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:16px;background:var(--glass-shine);pointer-events:none}.glass-input{width:100%;padding:8px 12px;font-family:var(--font-code);font-size:13px;background:var(--bg-glass-input);border:.5px solid var(--border-input);border-radius:8px;color:var(--text-primary);outline:none}.glass-input:focus{border-color:var(--brand-500)}.glass-select{padding:6px 28px 6px 10px;font-size:12px;background:var(--bg-glass-input);border:.5px solid var(--border-input);border-radius:8px;color:var(--text-primary);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23868E96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.checkbox-label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary);cursor:pointer}.checkbox-label input{accent-color:var(--brand-500)}button,.btn,.btn-sec,.btn-tool,.tab,.pill,.preset-pill,.zc,.sc,.fc,.copy-btn,.theme-btn{transition:all .15s ease}button:hover,.btn:hover,.btn-sec:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 4px 12px #00000026}button:active,.btn:active,.btn-sec:active,.tab:active,.pill:active,.preset-pill:active,.zc:active,.sc:active,.fc:active,.copy-btn:active,.theme-btn:active{transform:scale(.97);filter:brightness(.95);box-shadow:none}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);padding:8px 20px;font-size:13px;font-weight:500;color:#fff;background:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:100px;opacity:0;transition:all .3s ease;z-index:9999;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:768px){.work-area{grid-template-columns:1fr}.work-pane:first-child{border-right:none;border-bottom:.5px solid var(--border-glass-outer)}}@media(max-height:800px){.topbar{height:40px}.main,.container{padding-top:16px;padding-bottom:16px}.panel,.glass{padding:16px}.section-title{margin-bottom:8px}}