*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000;--bg2:#0a0a0a;
  --s1:rgba(255,255,255,.03);--s2:rgba(255,255,255,.06);--s3:rgba(255,255,255,.1);
  --gb:rgba(255,255,255,.06);
  --t:#f5f5f7;--t2:rgba(245,245,247,.8);--t3:rgba(245,245,247,.55);--t4:rgba(245,245,247,.35);
  --blue:#0071e3;--green:#30d158;--orange:#ff9f0a;--purple:#bf5af2;--red:#ff453a;--teal:#64d2ff;
  --f:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--mono:'Source Code Pro',monospace;
  --radius:14px;--glass:rgba(30,30,30,.6)
}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--t);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}

/* ═══ NAV ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,3rem);background:rgba(0,0,0,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.04)}
.logo{font-size:15px;font-weight:700;color:var(--t);display:flex;align-items:center;gap:8px}.logo img{height:24px;border-radius:6px}.logo span{color:var(--blue)}
.nav-page{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--t);letter-spacing:.3px}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center}.nav-links a{font-size:13px;color:var(--t3);transition:color .2s}.nav-links a:hover{color:var(--t)}
.nav-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:980px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;background:var(--s2);color:var(--t3);border:1px solid var(--gb);white-space:nowrap}.nav-badge:hover{background:var(--s3);color:var(--t2)}
.nav-badge .pro{padding:2px 8px;border-radius:980px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-size:10px;font-weight:700}
.nav-badge .free-count{color:var(--t3);font-weight:500}.nav-badge .free-count strong{color:var(--blue);font-weight:700}
.nav-cta{background:var(--blue);color:#fff!important;padding:6px 16px;border-radius:980px;font-weight:600;font-size:12px;transition:all .2s}.nav-cta:hover{background:#0077ed;transform:scale(1.02)}
.theme-btn{background:none;border:1px solid rgba(255,255,255,.08);border-radius:980px;padding:5px 12px;cursor:pointer;font-size:13px;color:var(--t3);font-family:var(--f);transition:all .2s}.theme-btn:hover{border-color:rgba(255,255,255,.15);color:var(--t)}

/* ═══ SEARCH ═══ */
.search-bar{max-width:600px;margin:0 auto 2rem;position:relative}
.search-bar input{width:100%;padding:12px 18px 12px 44px;border-radius:14px;border:1px solid var(--gb);background:var(--s1);color:var(--t);font-size:15px;font-family:var(--f);outline:none;transition:border-color .2s}
.search-bar input:focus{border-color:var(--blue)}
.search-bar input::placeholder{color:var(--t4)}
.search-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.4;pointer-events:none}

/* ═══ CONTAINER ═══ */
.container{max-width:1100px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

/* ═══ HERO ═══ */
.hero{padding:7rem 2rem 2rem;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}
.hero h1 span{color:var(--blue)}
.hero p{font-size:1rem;color:var(--t3);max-width:500px;margin:0 auto 1.5rem;font-weight:300}
.hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.hero-stat{font-size:12px;color:var(--t4)}

/* ═══ CATEGORY SECTIONS ═══ */
.cat-section{margin-bottom:2.5rem}
.cat-title{font-size:13px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1rem;padding-left:2px;display:flex;align-items:center;gap:8px}
.cat-title span{font-size:16px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

/* ═══ TOOL CARDS ═══ */
.tc{background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius);padding:1.2rem;cursor:pointer;transition:all .35s cubic-bezier(.16,1,.3,1);text-decoration:none;color:var(--t);display:block}
.tc:hover{transform:translateY(-4px);border-color:rgba(0,113,227,.2);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.tc-icon{font-size:1.5rem;margin-bottom:.6rem}
.tc-name{font-size:1rem;font-weight:600;margin-bottom:.2rem;line-height:1.3}
.tc-desc{font-size:.875rem;color:var(--t4);line-height:1.5}

/* ═══ TOOL WORKSPACE ═══ */
.ws{display:none;padding-top:6rem;min-height:100vh}
.ws.active{display:block}
.ws-head{margin-bottom:1.5rem}
.ws-back{background:none;border:none;color:var(--blue);font-family:var(--f);font-size:14px;cursor:pointer;padding:4px 0;margin-bottom:.8rem;display:inline-flex;align-items:center;gap:4px}
.ws-back:hover{color:var(--teal)}
.ws-title{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.3rem;line-height:1.25}
.ws-sub{font-size:1rem;color:var(--t3);font-weight:400;line-height:1.5}
.ws-body{max-width:800px}

/* ═══ FORM ELEMENTS ═══ */
.field{margin-bottom:1rem}
.field label{display:block;font-size:12px;color:var(--t4);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 14px;background:var(--s1);border:1px solid var(--gb);border-radius:10px;color:var(--t);font-family:var(--f);font-size:1rem;outline:none;transition:border-color .2s;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:var(--t4)}
.field select option{background:#1d1d1f}
.btn{padding:10px 22px;border-radius:980px;border:none;font-family:var(--f);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#0077ed;transform:scale(1.02)}
.btn-ghost{background:var(--s2);color:var(--t2)}.btn-ghost:hover{background:var(--s3)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem}

/* ═══ RESULTS ═══ */
.result{display:none;margin-top:1.5rem;padding:1.2rem;background:var(--s1);border:1px solid var(--gb);border-radius:var(--radius)}
.result.show{display:block}
.result-label{font-size:12px;color:var(--t4);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:.6rem;display:flex;align-items:center;gap:6px}
.result-label .dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.result-text{font-size:.9rem;color:var(--t2);line-height:1.8;white-space:pre-wrap;word-break:break-word}
.result-img{max-width:100%;border-radius:10px;margin-top:.5rem}

/* ═══ LOADING ═══ */
.loading{display:none;text-align:center;padding:2rem}
.loading.show{display:block}
.spinner{width:32px;height:32px;border:3px solid var(--s2);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .8rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.85rem;color:var(--t3)}

/* ═══ IMAGE ENHANCER (before/after slider) ═══ */
.enh-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:1rem}
.enh-mode{background:var(--s1);border:2px solid var(--gb);border-radius:10px;padding:10px;cursor:pointer;text-align:center;transition:all .2s}
.enh-mode:hover{background:var(--s2);border-color:var(--blue)}
.enh-mode.selected{border-color:var(--blue);background:rgba(0,113,227,.08)}
.enh-mode[data-ai="1"]{background:linear-gradient(135deg,rgba(191,90,242,.05),rgba(0,113,227,.05));border-color:rgba(191,90,242,.2)}
.enh-mode[data-ai="1"]:hover{border-color:var(--purple)}
.enh-mode[data-ai="1"].selected{border-color:var(--purple);background:linear-gradient(135deg,rgba(191,90,242,.12),rgba(0,113,227,.08));box-shadow:0 0 0 3px rgba(191,90,242,.2)}
.enh-mode[data-ai="1"]::before{content:"AI";position:absolute;top:4px;right:6px;font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:linear-gradient(135deg,#bf5af2,#0071e3);color:#fff;letter-spacing:.5px}
.enh-mode[data-ai="1"]{position:relative}
.enh-mode-icon{font-size:1.4rem;margin-bottom:4px}
.enh-mode-name{font-size:.78rem;font-weight:600;color:var(--t2)}
.enh-mode-desc{font-size:.62rem;color:var(--t4);margin-top:2px;line-height:1.3}
.ba-tabs{display:inline-flex;background:rgba(0,0,0,.5);padding:3px;border-radius:999px;position:absolute;top:12px;left:12px;z-index:4;backdrop-filter:blur(8px)}
.ba-tabs button{background:none;border:none;color:rgba(255,255,255,.6);font-family:var(--f);font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .2s}
.ba-tabs button.active{background:rgba(255,255,255,.15);color:#fff}
.ba-wrap{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-bottom:.8rem;user-select:none;touch-action:pan-y;cursor:col-resize}
.ba-wrap.solo,.ba-wrap.before-only{cursor:default}
.ba-before,.ba-after{display:block;width:100%;height:auto;pointer-events:none}
.ba-after-clip{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;clip-path:inset(0 50% 0 0)}
.ba-after-clip img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:rgba(255,255,255,.9);transform:translateX(-50%);pointer-events:none;z-index:3;box-shadow:0 0 12px rgba(0,0,0,.5)}
.ba-handle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.ba-handle::after{content:'\25C0 \25B6';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:#000;font-weight:700;letter-spacing:-2px;z-index:2}
.ba-label{position:absolute;bottom:12px;background:rgba(0,0,0,.65);color:#fff;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:1px;backdrop-filter:blur(6px);z-index:2;pointer-events:none}
.ba-label.left{left:12px}
.ba-label.right{right:12px}
.ba-wrap.solo .ba-after-clip{clip-path:inset(0 0 0 0) !important}
.ba-wrap.solo .ba-handle{display:none}
.ba-wrap.solo .ba-label.left{display:none}
.ba-wrap.before-only .ba-after-clip{clip-path:inset(0 100% 0 0) !important}
.ba-wrap.before-only .ba-handle{display:none}
.ba-wrap.before-only .ba-label.right{display:none}

/* ═══ UNIVERSAL FILE PREVIEW ═══ */
.file-preview{margin-top:1rem;background:var(--s1);border:1px solid var(--gb);border-radius:12px;padding:12px;display:none}
.file-preview.show{display:block}
.file-preview-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.file-preview-icon{width:40px;height:40px;border-radius:8px;background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.file-preview-meta{flex:1;min-width:0}
.file-preview-name{font-size:.85rem;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-preview-dim{font-size:.72rem;color:var(--t4);font-family:var(--mono);margin-top:1px}
.file-preview-img{max-width:100%;max-height:280px;border-radius:8px;display:block;margin:0 auto;background:#000}
.file-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;margin-top:8px}
.file-preview-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#000}
.file-preview audio{width:100%;margin-top:6px}
.file-preview-pdf{padding:16px;text-align:center;color:var(--t3);font-size:.8rem}
.file-preview-badge{background:var(--s2);padding:2px 8px;border-radius:980px;font-size:.65rem;color:var(--t3);font-weight:600;margin-left:auto;flex-shrink:0}

/* ═══ SOCIAL MEDIA CROPPER ═══ */
.smc-platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:1rem}
.smc-plat{background:var(--s1);border:2px solid var(--gb);border-radius:10px;padding:10px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.smc-plat:hover{background:var(--s2);border-color:var(--blue)}
.smc-plat.selected{border-color:var(--blue);background:rgba(0,113,227,.08)}
.smc-plat-icon{width:40px;background:var(--s2);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:10px;font-weight:600}
.smc-plat.selected .smc-plat-icon{background:rgba(0,113,227,.2);color:var(--blue)}
.smc-plat-name{font-size:.75rem;font-weight:600;color:var(--t2);line-height:1.2}
.smc-plat-dims{font-size:.65rem;color:var(--t4);font-family:var(--mono)}
.smc-stage-wrap{background:#000;border-radius:12px;padding:8px;margin-bottom:.8rem}
.smc-stage{position:relative;width:100%;max-width:600px;margin:0 auto;overflow:hidden;border-radius:8px;background:repeating-linear-gradient(45deg,#1a1a1a 0px,#1a1a1a 10px,#222 10px,#222 20px);user-select:none;touch-action:none;cursor:grab}
.smc-stage.dragging{cursor:grabbing}
.smc-stage img{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.smc-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:33.33% 33.33%;background-position:0 0}
.smc-frame-border{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px var(--blue)}
.smc-zoom-row{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.smc-zoom-row input[type="range"]{flex:1;accent-color:var(--blue)}
.smc-zoom-val{font-family:var(--mono);font-size:.85rem;min-width:50px;text-align:center;color:var(--blue);font-weight:700}
.smc-preview-wrap{display:flex;gap:12px;align-items:center;background:var(--s1);border:1px solid var(--gb);border-radius:10px;padding:10px;margin-bottom:.8rem}
.smc-preview-box{flex-shrink:0;background:#000;border-radius:6px;overflow:hidden;max-width:200px;max-height:200px}
.smc-preview-box canvas{display:block;width:100%;height:100%;object-fit:contain}
.smc-preview-info{flex:1;font-size:.8rem}
.smc-preview-info .title{font-weight:700;color:var(--t);margin-bottom:2px}
.smc-preview-info .dims{color:var(--t4);font-family:var(--mono);font-size:.75rem;margin-bottom:8px}

/* ═══ PASSWORD TOOL ═══ */
.pw-big{background:var(--s1);border:2px solid var(--gb);border-radius:14px;padding:1.2rem;font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--t);word-break:break-all;text-align:center;letter-spacing:1px;margin-bottom:.8rem;min-height:60px;display:flex;align-items:center;justify-content:center;position:relative}
.pw-big.copied{border-color:var(--green)}
.pw-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem}
.pw-toggle{background:var(--s1);border:1px solid var(--gb);border-radius:10px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:.85rem;transition:all .2s;user-select:none}
.pw-toggle:hover{background:var(--s2)}
.pw-toggle.on{border-color:var(--blue);background:rgba(0,113,227,.08);color:var(--blue);font-weight:600}
.pw-toggle-switch{width:32px;height:18px;background:var(--s2);border-radius:999px;position:relative;transition:background .2s}
.pw-toggle.on .pw-toggle-switch{background:var(--blue)}
.pw-toggle-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}
.pw-toggle.on .pw-toggle-switch::after{transform:translateX(14px)}
.pw-meter{height:8px;background:var(--s2);border-radius:4px;overflow:hidden;margin:.8rem 0 .4rem;display:flex;gap:3px}
.pw-meter-seg{flex:1;background:var(--s2);border-radius:2px;transition:background .3s}
.pw-strength-label{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:700;margin-bottom:.4rem}
.pw-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.8rem 0;font-size:.8rem}
.pw-stat{background:var(--s1);border:1px solid var(--gb);border-radius:10px;padding:10px}
.pw-stat-label{color:var(--t4);font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.pw-stat-val{color:var(--t);font-weight:600;font-family:var(--mono)}
.pw-tips{font-size:.8rem;color:var(--t3);line-height:1.6;margin-top:.4rem}
.pw-tips .pw-ok{color:var(--green)}
.pw-tips .pw-bad{color:var(--red)}
.pw-input-wrap{position:relative}
.pw-input-wrap input{padding-right:40px !important;font-family:var(--mono) !important;letter-spacing:1px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);font-size:16px;padding:4px 8px;font-family:var(--f)}
.pw-eye:hover{color:var(--t)}
.pw-slider-row{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.pw-slider-row input[type="range"]{flex:1;accent-color:var(--blue)}
.pw-slider-row .pw-len-val{font-family:var(--mono);font-size:1.1rem;font-weight:700;min-width:32px;text-align:center;color:var(--blue)}

/* ═══ RESUME BUILDER ═══ */
.rb-step{display:none}
.rb-step.active{display:block}
.rb-stepper{display:flex;gap:8px;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.rb-stepper-item{display:flex;align-items:center;gap:6px;color:var(--t4);font-size:.8rem}
.rb-stepper-item.done,.rb-stepper-item.active{color:var(--t2)}
.rb-stepper-num{width:22px;height:22px;border-radius:50%;background:var(--s2);color:var(--t3);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem}
.rb-stepper-item.active .rb-stepper-num{background:var(--blue);color:#fff}
.rb-stepper-item.done .rb-stepper-num{background:var(--green);color:#fff}
.rb-stepper-sep{color:var(--t4);font-size:14px}
.rb-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:640px;margin:0 auto 1.5rem}
.rb-mode-card{background:var(--s1);border:1px solid var(--gb);border-radius:14px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .25s}
.rb-mode-card:hover{background:var(--s2);border-color:var(--blue);transform:translateY(-2px)}
.rb-mode-card .icon{font-size:2rem;margin-bottom:.6rem}
.rb-mode-card .title{font-weight:700;color:var(--t);margin-bottom:.3rem}
.rb-mode-card .sub{font-size:.75rem;color:var(--t4)}
.rb-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;justify-content:center}
.rb-filter{background:var(--s1);border:1px solid var(--gb);color:var(--t3);padding:6px 12px;border-radius:980px;font-size:.75rem;cursor:pointer;font-family:var(--f);transition:all .2s}
.rb-filter.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.rb-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rb-template-card{background:var(--s1);border:2px solid var(--gb);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .25s;display:flex;flex-direction:column}
.rb-template-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.rb-template-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.25)}
.rb-template-preview{aspect-ratio:3/4;background:#fff;position:relative;overflow:hidden}
.rb-template-preview svg{width:100%;height:100%;display:block}
.rb-template-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.75);color:#fff;font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:.5px}
.rb-template-info{padding:8px 10px}
.rb-template-name{font-size:.8rem;font-weight:600;color:var(--t);margin-bottom:4px}
.rb-template-tags{font-size:.65rem;color:var(--t4);margin-bottom:6px}
.rb-colors{display:flex;gap:4px;flex-wrap:wrap}
.rb-color-dot{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s}
.rb-color-dot.selected{border-color:var(--t);transform:scale(1.2)}
.rb-multi-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.rb-multi-item{background:var(--s1);border:1px solid var(--gb);border-radius:10px;padding:12px;position:relative}
.rb-multi-item .rb-remove{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--t4);cursor:pointer;font-size:16px;font-family:var(--f)}
.rb-multi-item .rb-remove:hover{color:var(--red)}
.rb-addbtn{background:var(--s1);border:1px dashed var(--gb);color:var(--t3);padding:10px;border-radius:10px;cursor:pointer;font-family:var(--f);font-size:.85rem;width:100%;transition:all .2s}
.rb-addbtn:hover{background:var(--s2);border-color:var(--blue);color:var(--t)}
.rb-prev-wrap{background:#f5f5f7;padding:1rem;border-radius:10px;max-height:70vh;overflow:auto}

/* ═══ TABS (mode picker) ═══ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--gb);margin-bottom:1rem}
.tab-btn{background:none;border:none;color:var(--t3);font-family:var(--f);font-size:.9rem;font-weight:500;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab-btn:hover{color:var(--t2)}
.tab-btn.active{color:var(--t);border-bottom-color:var(--blue);font-weight:700}
.tab-panel{display:none}
.tab-panel.active{display:block}
.char-count{font-size:.7rem;color:var(--t4);text-align:right;margin-top:4px;font-family:var(--mono)}

/* ═══ VIDEO TRIMMER TIMELINE ═══ */
.vt-timeline{position:relative;height:64px;background:var(--s1);border-radius:8px;overflow:hidden;margin:1rem 0 .4rem;user-select:none;touch-action:none}
.vt-thumbs{display:flex;height:100%;width:100%}
.vt-thumbs img{flex:1;height:100%;object-fit:cover;min-width:0;pointer-events:none}
.vt-thumbs-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:.75rem}
.vt-mask{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.72);z-index:2;pointer-events:none}
.vt-mask-left{left:0;width:0}
.vt-mask-right{right:0;width:0}
.vt-handle{position:absolute;top:0;bottom:0;width:12px;background:var(--teal);z-index:3;cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.vt-handle::before{content:"";width:2px;height:16px;background:#fff;border-radius:1px}
.vt-handle-left{border-radius:4px 0 0 4px}
.vt-handle-right{border-radius:0 4px 4px 0}
.vt-range-border{position:absolute;top:0;bottom:0;border-top:2px solid var(--teal);border-bottom:2px solid var(--teal);z-index:2;pointer-events:none}
.vt-playhead{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;z-index:4;pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,.4)}
.vt-time-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--t4);font-family:var(--mono);padding:0 4px;margin-bottom:.8rem}
.vt-duration-pill{background:var(--s2);padding:2px 8px;border-radius:980px;color:var(--t3)}
.vt-bottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.vt-playbtn{width:36px;height:36px;border-radius:50%;background:var(--s2);border:1px solid var(--gb);color:var(--t);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s}
.vt-playbtn:hover{background:var(--s3)}
.vt-time-input{background:var(--s1);border:1px solid var(--gb);border-radius:8px;color:var(--t);font-family:var(--mono);font-size:.85rem;padding:8px 10px;width:90px;text-align:center;outline:none}
.vt-time-input:focus{border-color:var(--blue)}
.vt-time-label-small{font-size:.7rem;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

/* ═══ DROP ZONE ═══ */
.dropzone{border:2px dashed var(--gb);border-radius:var(--radius);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s}
.dropzone:hover,.dropzone.dragover{border-color:var(--blue);background:rgba(0,113,227,.03)}
.dropzone-icon{font-size:2rem;margin-bottom:.5rem}
.dropzone-text{font-size:.85rem;color:var(--t3)}
.dropzone input[type="file"]{display:none}

/* ═══ LIMIT MODAL ═══ */
.limit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);z-index:2000;display:none;align-items:center;justify-content:center;padding:1.5rem}
.limit-overlay.show{display:flex}
.limit-modal{background:rgba(20,20,22,.98);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:2rem;max-width:420px;width:100%;text-align:center;animation:modalIn .4s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
.limit-modal h3{font-size:1.3rem;font-weight:800;margin-bottom:.4rem}
.limit-modal p{font-size:.85rem;color:var(--t3);line-height:1.7;margin-bottom:1.2rem}
.limit-count{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:.8rem 0}
.limit-bar{height:5px;border-radius:3px;background:var(--s2);margin-bottom:1.2rem;overflow:hidden}
.limit-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .4s}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:1.2rem}
.price-card{background:var(--s1);border:1px solid var(--gb);border-radius:12px;padding:12px 8px;text-align:center;transition:all .2s}
.price-card:hover{border-color:rgba(0,113,227,.2)}
.price-card.pop{background:rgba(0,113,227,.06);border:1.5px solid rgba(0,113,227,.3);position:relative}
.price-card .tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:980px;white-space:nowrap}
.price-name{font-size:.95rem;font-weight:800}.price-info{font-size:.7rem;color:var(--t3);margin:3px 0}.price-amt{font-size:1rem;font-weight:700}
.limit-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.limit-actions a,.limit-actions button{padding:11px;border-radius:980px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:var(--f);transition:all .2s;text-decoration:none;display:block;text-align:center}
.limit-primary{background:var(--blue);color:#fff}.limit-primary:hover{background:#0077ed}
.limit-secondary{background:var(--s2);color:var(--t2)}.limit-secondary:hover{background:var(--s3)}
.code-wrap{padding:1rem;background:var(--s1);border:1px solid var(--gb);border-radius:12px;margin-bottom:.8rem}
.code-label{font-size:11px;color:var(--t4);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:6px}
.code-input{width:100%;padding:10px 14px;background:var(--s2);border:1px solid var(--gb);border-radius:8px;color:var(--t);font-family:var(--mono);font-size:.95rem;text-align:center;letter-spacing:3px;text-transform:uppercase;outline:none}.code-input:focus{border-color:var(--blue)}.code-input::placeholder{letter-spacing:1px;text-transform:none;font-family:var(--f);font-size:.82rem}
.code-msg{margin-top:.5rem;font-size:.8rem;text-align:center;min-height:18px}
.code-ok{color:var(--green);font-weight:600}.code-err{color:var(--red);font-weight:500}
.limit-foot{font-size:.65rem;color:var(--t4);line-height:1.5}

/* ═══ BOTTOM NAV (Mobile) ═══ */
.bnav{display:none}
@media(max-width:768px){
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:#000;border-top:1px solid rgba(255,255,255,.06);z-index:9998;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)}
  .bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--t4);font-family:var(--f);cursor:pointer;padding:6px 8px;text-decoration:none;min-width:50px;font-size:10px;font-weight:500;transition:color .2s}
  .bnav-item.on{color:var(--blue)}
  .bnav-ic{font-size:20px;line-height:1}
  .nav-links{display:none!important}
  .theme-btn{display:none!important}
  body{padding-bottom:64px}
  .hero{padding-top:5.5rem}
  .tool-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;gap:6px}
  .price-card{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:10px 14px}
  .price-card.pop .tag{position:static;transform:none;margin-right:8px}
  .ws{padding-top:5rem}
  .limit-modal{padding:1.5rem;max-width:95vw}
}

/* ═══ STICKY MOBILE SEARCH ═══ */
.mob-search{display:none}
@media(max-width:768px){
  .mob-search{display:block;position:sticky;top:48px;z-index:100;background:#000;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
  .mob-search input{width:100%;padding:10px 14px 10px 38px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.06);color:var(--t);font-size:14px;font-family:var(--f);outline:none}
  .mob-search input:focus{border-color:var(--blue)}
  .mob-search input::placeholder{color:var(--t4)}
  .mob-search .search-ic{left:28px}
  .desktop-search{display:none}
}
@media(min-width:769px){.mob-search{display:none}}

/* ═══ LIGHT THEME ═══ */
:root.light{--bg:#fff;--bg2:#f5f5f7;--s1:rgba(0,0,0,.03);--s2:rgba(0,0,0,.05);--s3:rgba(0,0,0,.08);--gb:rgba(0,0,0,.06);--t:#1d1d1f;--t2:rgba(29,29,31,.75);--t3:rgba(29,29,31,.5);--t4:rgba(29,29,31,.35);--glass:rgba(245,245,247,.8);--blue:#0071e3}
:root.light body{background:#fff}
:root.light .nav-page{color:#1d1d1f}
:root.light nav{background:rgba(255,255,255,.85);border-bottom-color:rgba(0,0,0,.06)}
:root.light .bnav{background:#fff;border-top-color:rgba(0,0,0,.06)}
:root.light .mob-search{background:#fff;border-bottom-color:rgba(0,0,0,.06)}
:root.light .mob-search input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06);color:#1d1d1f}
:root.light .tc{background:rgba(245,245,247,.8);border-color:rgba(0,0,0,.06)}
:root.light .tc:hover{border-color:rgba(0,113,227,.15);box-shadow:0 8px 30px rgba(0,0,0,.06)}
:root.light .limit-modal{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.06);box-shadow:0 20px 60px rgba(0,0,0,.12)}
:root.light .limit-modal h3{color:#1d1d1f}
:root.light .field input,:root.light .field textarea,:root.light .field select{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06);color:#1d1d1f}
:root.light .field select option{background:#fff}
:root.light .result{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
:root.light .dropzone{border-color:rgba(0,0,0,.12)}
:root.light .dropzone:hover{border-color:var(--blue);background:rgba(0,113,227,.02)}
:root.light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
:root.light .theme-btn{border-color:rgba(0,0,0,.08);color:rgba(29,29,31,.5)}
:root.light .nav-badge{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06);color:rgba(29,29,31,.5)}


/* ═══ REVIEWS (Trustpilot-style) ═══ */
.rv-section{padding:4rem 2rem;border-top:.5px solid var(--gb);background:linear-gradient(180deg,var(--bg) 0%,rgba(0,113,227,.03) 50%,var(--bg) 100%)}
.rv-head{text-align:center;max-width:700px;margin:0 auto 2rem}
.rv-head-eyebrow{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:2px;text-transform:uppercase;font-weight:500;margin-bottom:8px}
.rv-head h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:.4rem}
.rv-head h2 span{color:var(--blue)}
.rv-head p{font-size:.9rem;color:var(--t3);font-weight:300}
.rv-summary{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;padding:1rem 1.5rem;background:var(--s1);border:1px solid var(--gb);border-radius:999px;max-width:700px;margin-left:auto;margin-right:auto}
.rv-score{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.rv-score-label{font-size:.72rem;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:2px}
.rv-summary-stars{display:flex;gap:2px}
.rv-summary-stars svg{width:22px;height:22px;fill:#30d158}
.rv-summary-info{font-size:.85rem;color:var(--t2);line-height:1.4}
.rv-summary-info strong{color:var(--t);font-weight:700}
.rv-summary-info .rv-verified{color:#30d158;font-weight:600;font-size:.75rem}
.rv-viewport{position:relative;padding:10px 0 1rem;max-width:1200px;margin:0 auto}
.rv-track{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding:0 2rem 1rem;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 340px;background:var(--s1);border:1px solid var(--gb);border-radius:16px;padding:1.3rem;transition:all .3s;display:flex;flex-direction:column;gap:10px}
.rv-card:hover{transform:translateY(-4px);border-color:rgba(48,209,88,.3);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.rv-stars{display:flex;gap:2px}
.rv-stars svg{width:16px;height:16px;fill:#30d158}
.rv-service{display:inline-block;font-size:.7rem;font-weight:600;color:var(--blue);background:rgba(0,113,227,.1);padding:3px 10px;border-radius:999px;align-self:flex-start}
.rv-title{font-size:1rem;font-weight:700;color:var(--t);line-height:1.3}
.rv-body{font-size:.85rem;color:var(--t2);line-height:1.55;flex:1}
.rv-author{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--gb)}
.rv-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.85rem;flex-shrink:0}
.rv-author-meta{flex:1;min-width:0}
.rv-author-name{font-size:.82rem;font-weight:600;color:var(--t);display:flex;align-items:center;gap:6px}
.rv-verified-badge{display:inline-flex;align-items:center;gap:3px;color:#30d158;font-size:.7rem;font-weight:500}
.rv-author-meta-sub{font-size:.7rem;color:var(--t4);margin-top:2px;font-family:var(--mono)}
.rv-nav-btn{position:absolute;top:40%;width:40px;height:40px;border-radius:50%;background:var(--s1);border:1px solid var(--gb);color:var(--t);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:all .2s;font-size:18px;font-family:var(--f);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.rv-nav-btn:hover{background:var(--blue);color:#fff;transform:translateY(-50%) scale(1.1)}
.rv-nav-btn.left{left:0;transform:translateY(-50%)}
.rv-nav-btn.right{right:0;transform:translateY(-50%)}
.rv-cta-row{text-align:center;margin-top:1.5rem;font-size:.8rem;color:var(--t3)}
.rv-cta-row a{color:var(--blue);font-weight:600}
@media(max-width:768px){
  .rv-section{padding:3rem 1rem}
  .rv-card{flex:0 0 280px}
  .rv-nav-btn{display:none}
  .rv-track{padding:0 1rem 1rem}
  .rv-summary{flex-direction:column;gap:8px;padding:1.2rem;text-align:center;border-radius:16px}
}

/* ═══ FOOTER ═══ */
footer{background:var(--bg);border-top:.5px solid var(--gb);padding:0}
.ftr{max-width:1100px;margin:0 auto;padding:3rem 2rem 2rem}
.ftr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap}
.ftr-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ftr-logo{height:40px;border-radius:8px;opacity:.85;transition:opacity .3s}.ftr-logo:hover{opacity:1}
.ftr-name{font-size:1rem;font-weight:700;color:var(--t)}.ftr-tag{font-size:12px;color:var(--t4);margin-top:2px}
.ftr-cols{display:flex;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap}
.ftr-col{display:flex;flex-direction:column;gap:6px;min-width:110px}
.ftr-ct{font-size:12px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.ftr-col a{font-size:12px;color:var(--t4);transition:color .2s;text-decoration:none;cursor:pointer}.ftr-col a:hover{color:var(--blue)}
.ftr-div{height:.5px;background:var(--s2);margin:2rem 0 1.5rem}
.ftr-btm{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ftr-cp{font-size:13px;color:var(--t4)}
.ftr-priv{font-size:12px;color:var(--green);font-weight:500}
:root.light footer{background:#f5f5f7;border-top-color:rgba(0,0,0,.06)}
:root.light .ftr-name{color:#1d1d1f}:root.light .ftr-ct{color:rgba(29,29,31,.5)}
:root.light .ftr-col a{color:rgba(29,29,31,.4)}:root.light .ftr-col a:hover{color:#0071e3}
:root.light .ftr-div{background:rgba(0,0,0,.06)}:root.light .ftr-cp{color:rgba(29,29,31,.5)}
@media(max-width:768px){.ftr-top{flex-direction:column}.ftr-cols{flex-direction:column;gap:1.5rem}.ftr-btm{flex-direction:column;text-align:center}footer{padding-bottom:64px}}

/* ═══ DESKTOP APP PROMO BANNER ═══ */
.dl-promo{display:flex;align-items:center;gap:14px;max-width:640px;margin:0 auto 1.5rem;padding:12px 16px 12px 14px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08) 55%,rgba(236,72,153,.10));border:1px solid rgba(139,92,246,.25);border-radius:14px;backdrop-filter:blur(12px);color:var(--t);text-decoration:none;position:relative;transition:transform .18s cubic-bezier(.3,.8,.3,1),box-shadow .2s,border-color .2s;cursor:pointer}
.dl-promo:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(99,102,241,.25);border-color:rgba(139,92,246,.45)}
.dl-promo-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff;font-size:10px;font-weight:800;letter-spacing:.8px;border-radius:980px;line-height:1;flex-shrink:0;text-transform:uppercase}
.dl-promo-ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:10px;flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,.35)}
.dl-promo-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.dl-promo-title{font-size:14px;font-weight:600;color:var(--t);letter-spacing:-.1px;line-height:1.3}
.dl-promo-sub{font-size:12px;color:var(--t3);line-height:1.3}
.dl-promo-cta{padding:8px 16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:12.5px;font-weight:600;border-radius:980px;flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,.35);transition:transform .1s,box-shadow .15s}
.dl-promo:hover .dl-promo-cta{box-shadow:0 4px 14px rgba(99,102,241,.5)}
.dl-promo-close{position:absolute;top:8px;right:10px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--t4);font-size:14px;line-height:1;cursor:pointer;border-radius:4px;padding:0;transition:background .12s,color .12s}
.dl-promo-close:hover{background:rgba(0,0,0,.1);color:var(--t)}
:root.light .dl-promo{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.05) 55%,rgba(236,72,153,.07));border-color:rgba(99,102,241,.2)}
:root.light .dl-promo-title{color:#1d1d1f}
:root.light .dl-promo-sub{color:rgba(29,29,31,.6)}
@media(max-width:560px){.dl-promo{flex-wrap:wrap;padding:14px}.dl-promo-body{flex:1 1 100%;order:2;margin-top:4px}.dl-promo-cta{order:3}}

/* ═══════════════ NOTION-STYLE TOOLS PAGE ═══════════════ */
.tphero{background:var(--bg2,#fff);border-radius:24px;padding:48px;margin-bottom:18px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative;overflow:hidden;border:1px solid var(--gb)}
@media(max-width:920px){.tphero{grid-template-columns:1fr;padding:32px}}
.tph-eyebrow{font-size:12px;color:#0a84ff;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.tph-h{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.05;letter-spacing:-.035em;color:var(--t);margin-bottom:14px;font-weight:600}
.tph-h em{background:linear-gradient(135deg,#0a84ff,#bf5af2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}
.tph-sub{font-size:16px;color:var(--t3);line-height:1.5;margin-bottom:24px;max-width:480px}
.tph-search{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--gb);border-radius:12px;padding:12px 16px;margin-bottom:20px;max-width:480px;transition:border-color .25s cubic-bezier(0.16,1,0.3,1),box-shadow .25s}
.tph-search:focus-within{border-color:#0a84ff;box-shadow:0 0 0 4px rgba(10,132,255,.12)}
.tph-search-ic{font-size:14px;color:var(--t4);flex-shrink:0}
.tph-search input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--t);letter-spacing:-.012em}
.tph-search input::placeholder{color:var(--t4)}
.tph-search-kbd{font-family:var(--mono);font-size:10px;background:var(--bg2);color:var(--t3);padding:2px 6px;border-radius:4px;border:1px solid var(--gb);font-weight:600}
.tph-stats{display:flex;gap:24px;flex-wrap:wrap}
.tph-stat{display:flex;flex-direction:column;gap:2px}
.tph-stat-n{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--t)}
.tph-stat-l{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

.tpshow{position:relative;width:100%;aspect-ratio:1.2/1;background:linear-gradient(135deg,#1c1c1e 0%,#2c2c2e 100%);border-radius:18px;padding:0;box-shadow:0 20px 50px rgba(0,0,0,.18);overflow:hidden}
.tps-bar{height:32px;background:rgba(255,255,255,.04);display:flex;align-items:center;padding:0 14px;gap:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.tps-dot{width:11px;height:11px;border-radius:50%}
.tps-dot.r{background:#ff5f57}.tps-dot.y{background:#febc2e}.tps-dot.g{background:#28c840}
.tps-title{margin-left:auto;margin-right:auto;font-size:11px;color:rgba(255,255,255,.5)}
.tps-body{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tps-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;color:#fff;transition:all .4s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden}
.tps-card.hl{background:rgba(10,132,255,.18);border-color:rgba(10,132,255,.4);box-shadow:0 6px 20px rgba(10,132,255,.25);transform:translateY(-2px)}
.tps-card-i{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:700}
.tps-card:nth-child(1) .tps-card-i{background:linear-gradient(135deg,#dc2626,#f97316)}
.tps-card:nth-child(2) .tps-card-i{background:linear-gradient(135deg,#9333ea,#ec4899)}
.tps-card:nth-child(3) .tps-card-i{background:linear-gradient(135deg,#d97706,#facc15)}
.tps-card:nth-child(4) .tps-card-i{background:linear-gradient(135deg,#2563eb,#06b6d4)}
.tps-card:nth-child(5) .tps-card-i{background:linear-gradient(135deg,#16a34a,#22d3ee)}
.tps-card:nth-child(6) .tps-card-i{background:linear-gradient(135deg,#db2777,#a855f7)}
.tps-card-n{font-size:11px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.tps-card-d{font-size:9px;color:rgba(255,255,255,.5);line-height:1.3}
.tps-cursor{position:absolute;width:18px;height:22px;left:60px;top:80px;pointer-events:none;z-index:10;animation:tpsCursor 8s cubic-bezier(0.16,1,0.3,1) infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@keyframes tpsCursor{
  0%,5%{left:60px;top:80px}
  15%,25%{left:60px;top:80px}
  35%,45%{left:200px;top:80px}
  55%,65%{left:340px;top:80px}
  75%,85%{left:60px;top:160px}
  95%,100%{left:200px;top:160px}
}
.tps-foot{position:absolute;bottom:14px;left:14px;right:14px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.3);padding:6px 10px;border-radius:6px;backdrop-filter:blur(10px)}
.tps-foot::before{content:"";width:6px;height:6px;background:#30d158;border-radius:50%;box-shadow:0 0 8px #30d158;animation:tpsLive 1.2s ease infinite}
@keyframes tpsLive{0%,100%{opacity:1}50%{opacity:.4}}

/* Notion-style category sections — overrides existing .cat-section/.cat-title/.tool-grid */
.cat-section{margin-bottom:30px!important}
.cat-title{display:flex!important;align-items:center;gap:14px;margin-bottom:18px!important;padding:0 4px;text-transform:none!important;letter-spacing:-.02em!important;color:var(--t)!important;font-size:1.25rem!important;font-weight:600!important}
.cat-title>span:first-child{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff!important;background:linear-gradient(135deg,#0a84ff,#5e5ce6);flex-shrink:0}
.cat-section[data-cat="Image"] .cat-title>span:first-child{background:linear-gradient(135deg,#dc2626,#f97316)}
.cat-section[data-cat="PDF"] .cat-title>span:first-child{background:linear-gradient(135deg,#d97706,#facc15)}
.cat-section[data-cat="AI"] .cat-title>span:first-child{background:linear-gradient(135deg,#9333ea,#ec4899)}
.cat-section[data-cat="Media"] .cat-title>span:first-child{background:linear-gradient(135deg,#db2777,#a855f7)}
.cat-section[data-cat="Utility"] .cat-title>span:first-child{background:linear-gradient(135deg,#16a34a,#22d3ee)}
.cat-section[data-cat="Business"] .cat-title>span:first-child{background:linear-gradient(135deg,#2563eb,#06b6d4)}

/* Notion-style tool cards — overrides existing .tc */
.tc{background:var(--bg2)!important;border:1px solid var(--gb)!important;border-radius:14px!important;padding:18px!important;display:flex!important;flex-direction:column;gap:8px;transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s cubic-bezier(0.16,1,0.3,1),border-color .3s!important;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tc:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(0,0,0,.08)!important;border-color:rgba(10,132,255,.25)!important}
.tc::after{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#0a84ff,#bf5af2);transition:width .35s cubic-bezier(0.16,1,0.3,1)}
.tc:hover::after{width:100%}
.tc-icon{width:36px!important;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px!important;margin-bottom:0!important;background:rgba(10,132,255,.1);color:#0a84ff}
.cat-section[data-cat="Image"] .tc-icon{background:#fee2e2;color:#dc2626}
.cat-section[data-cat="PDF"] .tc-icon{background:#fef3c7;color:#d97706}
.cat-section[data-cat="AI"] .tc-icon{background:#e9d5ff;color:#9333ea}
.cat-section[data-cat="Media"] .tc-icon{background:#fce7f3;color:#db2777}
.cat-section[data-cat="Utility"] .tc-icon{background:#dcfce7;color:#16a34a}
.cat-section[data-cat="Business"] .tc-icon{background:#dbeafe;color:#2563eb}
.tc-name{font-size:14px!important;font-weight:600;color:var(--t)!important;letter-spacing:-.012em!important;line-height:1.25;margin-bottom:0!important}
.tc-desc{font-size:12px!important;color:var(--t3)!important;line-height:1.4!important}
.tc-guide{display:inline-block;margin-top:8px;font-size:11px!important;font-weight:600;color:#0a84ff!important;text-decoration:none;letter-spacing:.01em;align-self:flex-start;padding:3px 8px;border-radius:6px;background:rgba(10,132,255,.08);transition:background .2s,color .2s}
.tc-guide:hover{background:rgba(10,132,255,.16);color:#0066cc!important}

/* Bottom strip */
.tpstrip{background:var(--bg2);border-radius:18px;padding:18px 28px;display:flex;align-items:center;justify-content:space-around;gap:18px;flex-wrap:wrap;box-shadow:0 1px 2px rgba(0,0,0,.04);font-size:13px;color:var(--t3);margin:24px 0;border:1px solid var(--gb)}
.tpstrip-it{display:flex;align-items:center;gap:8px}
.tpstrip-it strong{color:var(--t);font-weight:600}
.tpstrip-it .ico{font-size:14px;opacity:.85}
@media(max-width:760px){.tpstrip{padding:14px;font-size:12px}}

/* keep the existing logo working inside the new nav */
.rdx-nav .logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;letter-spacing:-.3px;color:var(--rdx-text);text-decoration:none;padding:6px 4px;flex-shrink:0}
.rdx-nav .logo img{height:24px;border-radius:6px}
.rdx-nav .logo span{color:var(--blue,#0071e3)}

/* Back-to-tools button inside each workspace — visible pill style for the new light theme */
:root.light .ws-back{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rdx-border);color:var(--rdx-text2);font-family:inherit;font-size:14px;font-weight:600;padding:9px 18px 9px 14px;border-radius:980px;cursor:pointer;box-shadow:var(--rdx-shadow-sm);transition:all .15s;margin:0 0 1.5rem;letter-spacing:.1px}
:root.light .ws-back::before{content:"\2190";font-size:17px;line-height:1;color:var(--blue,#0071e3);transition:transform .15s}
:root.light .ws-back:hover{border-color:var(--blue,#0071e3);color:var(--blue,#0071e3);box-shadow:0 4px 14px rgba(0,113,227,.12);transform:translateX(-2px)}
:root.light .ws-back:hover::before{transform:translateX(-3px)}
:root.light .ws-back:active{transform:translateX(-1px)}
/* sticky version that follows the user as they scroll inside a long workspace */
:root.light .ws.active .ws-head{position:sticky;top:60px;z-index:60;background:linear-gradient(to bottom,var(--rdx-bg) 70%,transparent);padding:14px 0 10px;margin-bottom:1rem}
:root.light .ws-title{font-size:1.4rem;font-weight:800;letter-spacing:-.4px;margin-top:.6rem;color:var(--rdx-text)}
:root.light .ws-sub{color:var(--rdx-text3)}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN 2026-05  ·  light-first tools page · mega menu · filter chips
   Overrides earlier rules; uses .rdx- prefix for genuinely new elements.
   ═══════════════════════════════════════════════════════════════════ */
:root.light{
  --rdx-bg:#f7f8fa;--rdx-surface:#fff;--rdx-surface2:#f1f3f5;
  --rdx-border:#e6e8ec;--rdx-border-strong:#d8dbe0;
  --rdx-text:#0f1419;--rdx-text2:#3f4651;--rdx-text3:#6b7280;--rdx-text4:#9aa1ab;
  --rdx-shadow-sm:0 1px 2px rgba(15,20,25,.04);
  --rdx-shadow:0 4px 12px rgba(15,20,25,.06);
  --rdx-shadow-lg:0 12px 28px rgba(15,20,25,.10);
}
:root:not(.light){
  --rdx-bg:#0a0a0c;--rdx-surface:#141416;--rdx-surface2:#1c1c1f;
  --rdx-border:rgba(255,255,255,.08);--rdx-border-strong:rgba(255,255,255,.16);
  --rdx-text:#f5f5f7;--rdx-text2:rgba(245,245,247,.78);--rdx-text3:rgba(245,245,247,.55);--rdx-text4:rgba(245,245,247,.36);
  --rdx-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --rdx-shadow:0 4px 14px rgba(0,0,0,.5);
  --rdx-shadow-lg:0 12px 30px rgba(0,0,0,.55);
}
:root.light body{background:var(--rdx-bg);color:var(--rdx-text)}

/* New top nav with mega menu */
.rdx-nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rdx-border);padding:10px 24px;display:flex;align-items:center;gap:6px}
:root:not(.light) .rdx-nav{background:rgba(20,20,22,.85)}
.rdx-nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.3px;color:var(--rdx-text);text-decoration:none;padding:6px 8px;flex-shrink:0}
.rdx-nav-logo img{height:24px;border-radius:6px}
.rdx-nav-logo span{color:var(--blue,#0071e3)}
.rdx-nav-quick{display:flex;align-items:center;gap:2px;margin-left:14px;list-style:none;padding:0}
.rdx-nav-quick > li{position:relative;list-style:none}
.rdx-nav-quick a, .rdx-nav-quick button{background:none;border:0;color:var(--rdx-text2);font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.2px;text-decoration:none;padding:8px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s;white-space:nowrap}
.rdx-nav-quick a:hover, .rdx-nav-quick button:hover{background:var(--rdx-surface2);color:var(--rdx-text)}
.rdx-nav-quick .arr{font-size:10px;opacity:.65;transition:transform .15s}
.rdx-nav-quick li.open > button .arr{transform:rotate(180deg);color:var(--blue,#0071e3)}
.rdx-nav-quick li.open > button{color:var(--blue,#0071e3)}
.rdx-nav-side{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.rdx-nav-side .theme-btn,.rdx-nav-side .nav-badge{font-size:12px;padding:5px 12px}
.rdx-nav-cta{background:var(--blue,#0071e3);color:#fff!important;padding:7px 16px;border-radius:980px;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s}
.rdx-nav-cta:hover{background:#0077ed;color:#fff!important}
.rdx-burger{display:none;background:none;border:0;color:var(--rdx-text);font-size:22px;padding:6px 10px;cursor:pointer;border-radius:8px}
.rdx-burger:hover{background:var(--rdx-surface2)}

.rdx-mm{position:absolute;top:calc(100% + 4px);left:0;background:var(--rdx-surface);border:1px solid var(--rdx-border);border-radius:14px;padding:18px;box-shadow:var(--rdx-shadow-lg);min-width:680px;display:none;z-index:91}
.rdx-mm.wide{min-width:880px;left:auto;right:0}
.rdx-nav-quick li.open > .rdx-mm{display:block}
.rdx-mm-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:6px 24px}
.rdx-mm.wide .rdx-mm-grid{grid-template-columns:repeat(3,minmax(190px,1fr))}
.rdx-mm-col h4{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rdx-text3);margin:8px 6px 6px}
.rdx-mm-col a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--rdx-text);font-size:13.5px;font-weight:500;transition:background .12s}
.rdx-mm-col a:hover{background:var(--rdx-surface2);color:var(--rdx-text)}
.rdx-mm-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:13px;color:#fff;flex-shrink:0;line-height:1}
.rdx-mm-ic.organize{background:#e8590c}
.rdx-mm-ic.optimize{background:#0c7e8c}
.rdx-mm-ic.toPdf{background:#0050aa}
.rdx-mm-ic.fromPdf{background:#6f42c1}
.rdx-mm-ic.edit{background:#9a3412}
.rdx-mm-ic.ai{background:#5b21b6}

/* New hero */
.rdx-hero{padding:56px 24px 28px;text-align:center;max-width:1080px;margin:0 auto}
.rdx-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--rdx-surface);border:1px solid var(--rdx-border);border-radius:980px;font-size:12px;font-weight:600;color:var(--rdx-text2);letter-spacing:.3px;margin-bottom:18px}
.rdx-hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.rdx-hero h1{font-size:clamp(34px,5.5vw,52px);font-weight:800;letter-spacing:-1.4px;line-height:1.05;margin:0 0 12px}
.rdx-hero h1 em{font-style:normal;color:var(--blue,#0071e3)}
.rdx-hero-sub{font-size:16px;color:var(--rdx-text2);max-width:560px;margin:0 auto 26px;line-height:1.5}
.rdx-search{position:relative;max-width:560px;margin:0 auto}
.rdx-search input{width:100%;padding:15px 20px 15px 48px;border:1px solid var(--rdx-border);border-radius:14px;background:var(--rdx-surface);font-size:15px;font-family:inherit;color:var(--rdx-text);box-shadow:var(--rdx-shadow-sm);outline:none;transition:all .15s}
.rdx-search input:focus{border-color:var(--blue,#0071e3);box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.rdx-search .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--rdx-text4);font-size:17px;pointer-events:none}
.rdx-search .kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--rdx-surface2);border:1px solid var(--rdx-border);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--rdx-text3);font-family:ui-monospace,monospace}
.rdx-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 32px;margin:24px auto 0;padding-top:22px;border-top:1px solid var(--rdx-border);max-width:560px}
.rdx-stat{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--rdx-text3);font-weight:500}
.rdx-stat strong{font-size:19px;color:var(--rdx-text);font-weight:800;letter-spacing:-.5px}

/* Hide the old hero pieces we're replacing (toggled by JS adding .rdx-active class) */
.rdx-active .tphero, .rdx-active .desktop-search, .rdx-active .mob-search, .rdx-active .nav-page, .rdx-active nav:not(.rdx-nav){display:none!important}

/* Filter chip bar */
.rdx-chipbar{position:sticky;top:54px;z-index:80;background:rgba(247,248,250,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);padding:12px 24px;border-bottom:1px solid var(--rdx-border);margin:24px 0 0}
:root:not(.light) .rdx-chipbar{background:rgba(10,10,12,.92)}
.rdx-chipbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.rdx-chipbar-inner::-webkit-scrollbar{display:none}
.rdx-chip{flex-shrink:0;padding:7px 14px;background:var(--rdx-surface);border:1px solid var(--rdx-border);border-radius:980px;font-size:13px;font-weight:600;color:var(--rdx-text2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:inherit}
.rdx-chip:hover{border-color:var(--rdx-border-strong);color:var(--rdx-text)}
.rdx-chip.active{background:var(--rdx-text);color:var(--rdx-surface);border-color:var(--rdx-text)}
.rdx-chip .ct{font-size:11px;font-weight:700;background:rgba(0,0,0,.08);padding:2px 7px;border-radius:980px}
:root:not(.light) .rdx-chip .ct{background:rgba(255,255,255,.10)}
.rdx-chip.active .ct{background:rgba(255,255,255,.18)}
:root:not(.light) .rdx-chip.active .ct{background:rgba(0,0,0,.20)}
.rdx-chipbar-meta{margin-left:auto;font-size:12.5px;color:var(--rdx-text3);flex-shrink:0}

/* Card overrides — light theme only */
:root.light .cat-section{background:transparent;padding:24px 0;margin-bottom:8px}
:root.light .cat-title{font-size:16px;font-weight:700;color:var(--rdx-text);margin-bottom:14px;display:inline-flex;align-items:baseline;gap:10px}
.cat-section.cat-hidden{display:none}

:root.light .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
:root.light .tc{background:var(--rdx-surface);border:1px solid var(--rdx-border);border-radius:14px;padding:20px 18px;cursor:pointer;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
:root.light .tc:hover{transform:translateY(-2px);border-color:var(--blue,#0071e3);box-shadow:var(--rdx-shadow-lg)}
:root.light .tc-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;color:#fff;background:var(--blue,#0071e3)}
:root.light .tc-name{font-size:14.5px;font-weight:700;color:var(--rdx-text);margin-bottom:5px;letter-spacing:-.2px;line-height:1.3}
:root.light .tc-desc{font-size:12.5px;color:var(--rdx-text3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root.light .cat-section[data-cat="Image"] .tc-icon{background:linear-gradient(135deg,#0a84ff,#5ac8fa)}
:root.light .cat-section[data-cat="PDF"]   .tc-icon{background:linear-gradient(135deg,#e8590c,#ffb84d)}
:root.light .cat-section[data-cat="AI"]    .tc-icon{background:linear-gradient(135deg,#6f42c1,#bf5af2)}
:root.light .cat-section[data-cat="Media"] .tc-icon{background:linear-gradient(135deg,#d6336c,#ff6b9d)}
:root.light .cat-section[data-cat="Utility"] .tc-icon{background:linear-gradient(135deg,#4a5560,#9aa1ab)}
:root.light .cat-section[data-cat="Business"] .tc-icon{background:linear-gradient(135deg,#0c7e8c,#22d3ee)}

/* Mobile overlay nav */
.rdx-mob-panel{display:none;position:fixed;inset:54px 0 0 0;background:var(--rdx-surface);z-index:88;overflow-y:auto;padding:20px;animation:rdxFade .18s ease-out}
.rdx-mob-panel.open{display:block}
@keyframes rdxFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rdx-mob-panel h4{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--rdx-text3);margin:18px 6px 6px}
.rdx-mob-panel a{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;text-decoration:none;color:var(--rdx-text);font-size:14.5px;font-weight:500}
.rdx-mob-panel a:active{background:var(--rdx-surface2)}

@media (max-width:880px){
  .rdx-nav-quick > li:not(.rdx-mobile-keep){display:none}
  .rdx-burger{display:inline-flex}
  .rdx-mm{display:none!important}
  .rdx-nav-side .theme-btn[onclick*="ApiKey"]{display:none}
}
@media (max-width:760px){
  .rdx-hero{padding:36px 18px 22px}
  .rdx-hero h1{font-size:34px}
  .rdx-chipbar{top:54px;padding:10px 16px}
  :root.light .tool-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  :root.light .tc{padding:16px 14px}
  :root.light .tc-icon{width:38px;height:38px;font-size:19px;border-radius:10px}
  :root.light .tc-name{font-size:13.5px}
  :root.light .tc-desc{font-size:12px;-webkit-line-clamp:3}
}

/* ════════════════════════════════════════════════════════════
   APP-FIRST TWO-PANE WORKSPACE SHELL  (2026-06)
   Generic layout applied by appShell() in tools.js: controls on
   the left, an always-present "live preview" pane on the right,
   premium processing animation + persistent result actions.
   ════════════════════════════════════════════════════════════ */
.ws-body.app-shell{max-width:1200px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:22px;align-items:start}
.ws-body.app-shell > .ws-head{grid-column:1 / -1}
.app-left,.app-right{min-width:0;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:18px 18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.05)}
.app-right{position:sticky;top:132px;display:flex;flex-direction:column}
@media(max-width:900px){.ws-body.app-shell{grid-template-columns:1fr;gap:16px}.app-right{position:static}}
/* pane headers */
.app-pane-hd{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(29,29,31,.5);margin:-2px 0 15px;display:flex;align-items:center;gap:8px;padding-bottom:13px;border-bottom:1px solid rgba(0,0,0,.05)}
.app-live{width:8px;height:8px;border-radius:50%;background:var(--green,#30d158);box-shadow:0 0 0 0 rgba(48,209,88,.5);animation:appPulse 2s infinite}
@keyframes appPulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.45)}70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
/* dropzone gets a subtle premium lift inside the shell */
.app-shell .dropzone{transition:border-color .25s,background .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.app-shell .dropzone:hover{transform:translateY(-1px)}
/* the left action button (Generate/Run) spans full width inside the shell */
.app-left .btn-row{margin-top:1.1rem}
.app-left .btn-row .btn{flex:1 1 auto}
/* RIGHT PANE: empty state */
.app-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:330px;text-align:center;color:rgba(29,29,31,.5)}
.app-empty .ae-ico{font-size:40px;opacity:.55;line-height:1}
.app-empty .ae-txt{font-size:13.5px;max-width:230px;line-height:1.55}
.app-right:has(.result.show) .app-empty,
.app-right:has(.loading.show) .app-empty{display:none}
/* RIGHT PANE: result fills the pane (no nested card) */
.app-right .result{display:flex;flex-direction:column;margin:0;background:transparent;border:0;padding:0;border-radius:0}
.app-right .result.show{animation:appRise .45s cubic-bezier(.16,1,.3,1) both}
@keyframes appRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* RIGHT PANE: persistent action bar (Copy / Download) pinned to top */
.app-right .result .btn-row{order:-1;position:sticky;top:0;margin:0 0 14px;padding:0 0 13px;border-bottom:1px solid rgba(0,0,0,.05);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);z-index:2}
.app-right .result .result-label{order:0}
/* RIGHT PANE: premium processing animation (orb + sweeping bar) */
.app-right .loading{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;min-height:330px;padding:30px 12px}
.app-right .loading.show{display:flex}
.app-right .loading .spinner{width:62px;height:62px;border:0;border-radius:50%;margin:0;background:conic-gradient(from 0deg,var(--blue,#0071e3),var(--purple,#bf5af2),var(--blue,#0071e3));-webkit-mask:radial-gradient(circle 22px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 22px at center,transparent 98%,#000 100%);animation:spin 1.1s linear infinite;will-change:transform}
.app-right .loading-text{font-weight:600;color:rgba(29,29,31,.75);margin-top:16px}
.app-right .loading::after{content:"";display:block;width:190px;height:5px;margin:16px auto 0;border-radius:99px;background:linear-gradient(90deg,transparent,var(--blue,#0071e3),var(--purple,#bf5af2),transparent);background-size:220% 100%;animation:appSweep 1.25s linear infinite;will-change:background-position}
@keyframes appSweep{to{background-position:-220% 0}}

/* ════════════════════════════════════════════════════════════════
   TOOL WORKSPACE POLISH — June 2026 (ui-ux-pro-max pass)
   Upgrades the single-column tool UIs (.ws-body:not(.app-shell)):
   premium dropzone, gradient icon chip, real form fields with focus
   rings, brand buttons (≥46px touch targets), result cards, brand
   spinner. CSS-only — no JS hooks touched. app-shell tools excluded.
   ════════════════════════════════════════════════════════════════ */
:root.light .ws-body:not(.app-shell){max-width:740px;margin-left:auto;margin-right:auto}

/* dropzone — premium filled card */
:root.light .ws-body:not(.app-shell) .dropzone{border:1.5px dashed rgba(37,99,235,.45);border-radius:18px;padding:38px 24px;background:linear-gradient(180deg,rgba(37,99,235,.045),rgba(34,211,238,.035));box-shadow:0 2px 10px rgba(15,23,42,.05);transition:border-color .2s,background .2s,transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
:root.light .ws-body:not(.app-shell) .dropzone:hover,
:root.light .ws-body:not(.app-shell) .dropzone.dragover{border-color:var(--a1,#2563eb);border-style:solid;background:linear-gradient(180deg,rgba(37,99,235,.09),rgba(34,211,238,.06));transform:translateY(-2px);box-shadow:0 20px 44px -24px rgba(37,99,235,.55)}
:root.light .ws-body:not(.app-shell) .dropzone-icon{width:58px;height:58px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;border-radius:16px;color:#fff;background:var(--grad,linear-gradient(120deg,#2563eb,#0ea5e9 55%,#22d3ee));box-shadow:0 14px 28px -12px rgba(37,99,235,.65)}
:root.light .ws-body:not(.app-shell) .dropzone-text{font-size:15.5px;font-weight:700;color:var(--rdx-text,#0b1020)}

/* form fields */
:root.light .ws-body:not(.app-shell) .field{margin:16px 0 0}
:root.light .ws-body:not(.app-shell) .field > label,
:root.light .ws-body:not(.app-shell) > label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--rdx-text3,#5b6270);margin-bottom:7px}
:root.light .ws-body:not(.app-shell) input[type="text"],
:root.light .ws-body:not(.app-shell) input[type="number"],
:root.light .ws-body:not(.app-shell) input[type="email"],
:root.light .ws-body:not(.app-shell) input[type="url"],
:root.light .ws-body:not(.app-shell) input[type="search"],
:root.light .ws-body:not(.app-shell) select,
:root.light .ws-body:not(.app-shell) textarea{width:100%;min-height:46px;padding:12px 14px;font:inherit;font-size:15px;color:var(--rdx-text,#0b1020);background:#fff;border:1px solid var(--rdx-border,#e7e8ee);border-radius:12px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
:root.light .ws-body:not(.app-shell) textarea{min-height:120px;line-height:1.55;resize:vertical}
:root.light .ws-body:not(.app-shell) input[type="text"]:focus,
:root.light .ws-body:not(.app-shell) input[type="number"]:focus,
:root.light .ws-body:not(.app-shell) input[type="email"]:focus,
:root.light .ws-body:not(.app-shell) input[type="url"]:focus,
:root.light .ws-body:not(.app-shell) input[type="search"]:focus,
:root.light .ws-body:not(.app-shell) select:focus,
:root.light .ws-body:not(.app-shell) textarea:focus{outline:none;border-color:var(--a1,#2563eb);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
:root.light .ws-body:not(.app-shell) select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* range slider */
:root.light .ws-body:not(.app-shell) input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--rdx-border,#e7e8ee);outline:none;margin:8px 0}
:root.light .ws-body:not(.app-shell) input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--grad,linear-gradient(120deg,#2563eb,#22d3ee));cursor:pointer;border:2px solid #fff;box-shadow:0 3px 8px rgba(37,99,235,.5)}
:root.light .ws-body:not(.app-shell) input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #fff}

/* buttons */
:root.light .ws-body:not(.app-shell) .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
:root.light .ws-body:not(.app-shell) .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14.5px;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s,background .15s}
:root.light .ws-body:not(.app-shell) .btn-blue{background:var(--grad,linear-gradient(120deg,#2563eb,#0ea5e9 55%,#22d3ee));color:#fff;border:0;box-shadow:0 12px 24px -12px rgba(37,99,235,.7)}
:root.light .ws-body:not(.app-shell) .btn-blue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(37,99,235,.8)}
:root.light .ws-body:not(.app-shell) .btn-blue:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
:root.light .ws-body:not(.app-shell) .btn-ghost{background:#fff;color:var(--a1,#2563eb);border:1px solid var(--rdx-border,#e7e8ee);box-shadow:none}
:root.light .ws-body:not(.app-shell) .btn-ghost:hover{border-color:var(--a1,#2563eb);background:rgba(37,99,235,.05)}

/* result card */
:root.light .ws-body:not(.app-shell) .result{margin-top:20px;padding:20px;background:#fff;border:1px solid var(--rdx-border,#e7e8ee);border-radius:16px;box-shadow:0 2px 10px rgba(15,23,42,.05)}
:root.light .ws-body:not(.app-shell) .result-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--rdx-text3,#5b6270)}
:root.light .ws-body:not(.app-shell) .result-label .dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
:root.light .ws-body:not(.app-shell) .result-img,
:root.light .ws-body:not(.app-shell) .result img{border-radius:12px;max-width:100%}

/* loading */
:root.light .ws-body:not(.app-shell) .loading{padding:26px 0;text-align:center}
:root.light .ws-body:not(.app-shell) .spinner{width:42px;height:42px;margin:0 auto;border:3px solid rgba(37,99,235,.15);border-top-color:var(--a1,#2563eb);border-radius:50%;animation:spin .9s linear infinite}
:root.light .ws-body:not(.app-shell) .loading-text{margin-top:12px;font-weight:600;color:var(--rdx-text3,#5b6270);font-size:14px}

/* a11y + responsive */
@media (prefers-reduced-motion:reduce){:root.light .ws-body:not(.app-shell) .dropzone{transition:none}:root.light .ws-body:not(.app-shell) .dropzone:hover{transform:none}}
@media(max-width:560px){:root.light .ws-body:not(.app-shell) .dropzone{padding:30px 16px}:root.light .ws-body:not(.app-shell) .btn{flex:1 1 auto}}

/* ---- same polish for the runtime two-column app-shell layout (most tools) ---- */
:root.light .ws-body.app-shell .dropzone{border:1.5px dashed rgba(37,99,235,.45);border-radius:18px;padding:34px 22px;background:linear-gradient(180deg,rgba(37,99,235,.045),rgba(34,211,238,.035));box-shadow:0 2px 10px rgba(15,23,42,.05)}
:root.light .ws-body.app-shell .dropzone:hover,
:root.light .ws-body.app-shell .dropzone.dragover{border-color:var(--a1,#2563eb);border-style:solid;background:linear-gradient(180deg,rgba(37,99,235,.09),rgba(34,211,238,.06));transform:translateY(-2px);box-shadow:0 20px 44px -24px rgba(37,99,235,.55)}
:root.light .ws-body.app-shell .dropzone-icon{width:56px;height:56px;margin:0 auto 13px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;border-radius:16px;color:#fff;background:var(--grad,linear-gradient(120deg,#2563eb,#0ea5e9 55%,#22d3ee));box-shadow:0 14px 28px -12px rgba(37,99,235,.65)}
:root.light .ws-body.app-shell .dropzone-text{font-size:15px;font-weight:700;color:var(--rdx-text,#0b1020)}
:root.light .ws-body.app-shell .field{margin:16px 0 0}
:root.light .ws-body.app-shell .field > label{display:block;font-size:12.5px;font-weight:700;color:var(--rdx-text3,#5b6270);margin-bottom:7px}
:root.light .ws-body.app-shell input[type="text"],:root.light .ws-body.app-shell input[type="number"],:root.light .ws-body.app-shell input[type="email"],:root.light .ws-body.app-shell input[type="url"],:root.light .ws-body.app-shell input[type="search"],:root.light .ws-body.app-shell select,:root.light .ws-body.app-shell textarea{width:100%;min-height:46px;padding:12px 14px;font:inherit;font-size:15px;color:var(--rdx-text,#0b1020);background:#fff;border:1px solid var(--rdx-border,#e7e8ee);border-radius:12px;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
:root.light .ws-body.app-shell textarea{min-height:120px;line-height:1.55;resize:vertical}
:root.light .ws-body.app-shell input[type="text"]:focus,:root.light .ws-body.app-shell input[type="number"]:focus,:root.light .ws-body.app-shell input[type="email"]:focus,:root.light .ws-body.app-shell input[type="url"]:focus,:root.light .ws-body.app-shell input[type="search"]:focus,:root.light .ws-body.app-shell select:focus,:root.light .ws-body.app-shell textarea:focus{outline:none;border-color:var(--a1,#2563eb);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
:root.light .ws-body.app-shell select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
:root.light .ws-body.app-shell input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--rdx-border,#e7e8ee);outline:none;margin:8px 0}
:root.light .ws-body.app-shell input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--grad,linear-gradient(120deg,#2563eb,#22d3ee));cursor:pointer;border:2px solid #fff;box-shadow:0 3px 8px rgba(37,99,235,.5)}
:root.light .ws-body.app-shell input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #fff}
:root.light .ws-body.app-shell .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s,background .15s}
:root.light .ws-body.app-shell .btn-blue{background:var(--grad,linear-gradient(120deg,#2563eb,#0ea5e9 55%,#22d3ee));color:#fff;border:0;box-shadow:0 12px 24px -12px rgba(37,99,235,.7)}
:root.light .ws-body.app-shell .btn-blue:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(37,99,235,.8)}
:root.light .ws-body.app-shell .btn-blue:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
:root.light .ws-body.app-shell .btn-ghost{background:#fff;color:var(--a1,#2563eb);border:1px solid var(--rdx-border,#e7e8ee)}
:root.light .ws-body.app-shell .btn-ghost:hover{border-color:var(--a1,#2563eb);background:rgba(37,99,235,.05)}
:root.light .app-left .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
:root.light .ws .result-label .dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
/* rebrand the app-shell orb spinner + sweep bar to cyan */
:root.light .app-right .loading .spinner{background:conic-gradient(from 0deg,#2563eb,#22d3ee,#2563eb)}
:root.light .app-right .loading::after{background:linear-gradient(90deg,transparent,#2563eb,#22d3ee,transparent);background-size:220% 100%}
@media(max-width:560px){:root.light .ws-body.app-shell .dropzone{padding:28px 14px}:root.light .ws-body.app-shell .btn{flex:1 1 auto}}


/* Mobile: reveal the search bar when the bottom-nav Search button asks for it (focusSearch in tools.js) */
@media(max-width:768px){.desktop-search.show-mobile{display:block}}