:root{--ink:#ecf1f5;--muted:#a5b2c0;--lime:#c7fb69;--paper:#0d141e;--line:#293544;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:16px;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:#0d141e !important;color:var(--ink) !important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,summary,select{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #448bef;outline-offset:5px}

/* Header */
header{height:86px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;padding:0 48px;margin:auto;gap:25px}
.brand{font-size:27px;font-weight:800;letter-spacing:-1.2px;display:inline-flex;align-items:center}
.brand>span:not(.brandmark){font-weight:400}
.brandmark{background:var(--lime);color:#13202b;width:38px;height:38px;display:inline-grid;place-items:center;border-radius:11px;margin-right:10px;font-size:29px;padding-bottom:4px}
nav{display:flex;gap:30px;font-size:14px;font-weight:600}
nav a:hover,.inlinelink:hover,footer a:hover{text-decoration:underline;text-underline-offset:5px}
.navnote{font-size:13px;color:var(--muted)}

/* Workspace (Home page) */
.workspace{background:radial-gradient(ellipse at 50% 0,#233d3755,transparent 60%),#111c29;color:#fff;margin:0 24px;border-radius:24px;padding:45px 24px 24px;border:1px solid #243343}
.intro{text-align:center;max-width:740px;margin:auto}
.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#b5c2c8}
.tinycross{color:var(--lime);font-size:17px;margin-right:5px}
h1{font-size:clamp(42px,5.6vw,72px);line-height:1.04;letter-spacing:-3px;margin:22px 0;font-weight:700;color:#ffffff !important}
h1 em{font-style:normal;color:var(--lime)}
.intro>p{font-size:17px;line-height:1.65;max-width:540px;margin:0 auto;color:#c3ccd3}
.trust{display:flex;justify-content:center;gap:24px;margin:23px 0 28px;color:#dde6dd;font-size:14px}
.studio{max-width:860px;margin:auto;background:#182432;color:var(--ink);padding:24px;border-radius:18px;border:1px solid #354452;box-shadow:0 24px 60px #0003}
.studiohead{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:1.4px;margin-bottom:20px}
.studiohead .local{font-size:12px;letter-spacing:0;font-weight:400;color:var(--muted)}
.toolnav{display:flex;width:max-content;max-width:100%;margin:0 auto 20px;background:#0d1723;border-radius:10px;padding:5px;gap:4px}
.toolnav a{padding:10px 32px;border-radius:7px;font-size:14px;transition:background .18s,color .18s}
.toolnav a[aria-current]{background:#304032;color:#d7ffaf;font-weight:700}
.toolnav span{font-size:12px;border:1px solid #c4ced6;padding:2px 4px;border-radius:4px;margin-left:5px}
.dropzone{border:1.5px dashed #465563;border-radius:12px;text-align:center;padding:22px 16px 20px;background:#101b28;transition:background .2s}
.dropzone.drag{background:#263c2a;border-color:var(--lime)}
.uploadicon{margin:0 auto 13px;border:1px solid #415160;border-radius:13px;height:44px;width:44px;display:grid;place-items:center;font-size:26px;background:#20303d;color:var(--lime)}
.dropzone h2{font-size:21px;letter-spacing:-.5px;margin:0 0 8px;color:#ffffff}
.dropzone p{font-size:14px;color:var(--muted);margin:0 0 18px}
.dropzone small{display:block;color:var(--muted);font-size:12px;margin:15px auto 2px;line-height:1.5}
.textbutton{display:block;margin:12px auto 0;background:none;border:0;color:var(--lime);font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:28px}
.studiobottom{display:flex;justify-content:space-between;margin-top:18px;color:var(--muted);font-size:12px;gap:16px}
.workspacefoot{text-align:center;font-size:12px;color:var(--muted);margin:20px 0 0}
.workspacefoot a{text-decoration:underline;text-underline-offset:3px}

/* Button & Controls */
.primary{background:linear-gradient(145deg,#d9ff94,#b7ef59);border:1px solid #e1ffad80;color:#13202b !important;font-size:15px;font-weight:700;border-radius:12px;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;box-shadow:inset 0 1px 0 #ffffff60,0 5px 0 #7ca33425,0 9px 22px #0002;transition:transform .18s,box-shadow .18s,background .18s}
.primary:hover{background:linear-gradient(145deg,#e3ffa9,#c5f677);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff70,0 7px 0 #7ca33420,0 12px 26px #0003}
.primary:active{transform:translateY(0);box-shadow:inset 0 1px 0 #ffffff40,0 3px 8px #0002}
.primary:disabled{transform:none;box-shadow:none;opacity:.5;cursor:wait}
.secondary{border-radius:11px;background:linear-gradient(145deg,#223344,#192637);border:1px solid #506175;color:#dce6ed;padding:12px 18px;font:14px Arial;min-height:46px;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff08;transition:border-color .18s,transform .18s}
.secondary:hover{transform:translateY(-1px);border-color:var(--lime)}

/* Sections */
.section{max-width:1184px;margin:0 auto;padding:70px 24px}
.sectionheading h2,.why h2{font-size:36px;letter-spacing:-1.3px;line-height:1.16;margin:14px 0 35px;color:#ffffff}
.dark{color:#acb9c8}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.number{font-family:monospace;font-size:14px;color:#acb9c8;display:block;border-top:1px solid var(--line);padding-top:20px}
.stepgrid h3{font-size:19px;margin:16px 0 10px;color:#ffffff}
.stepgrid p,.why p{color:var(--muted);font-size:16px;line-height:1.65;max-width:340px;margin:0}
.why{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:65px}
.why h2{margin-bottom:20px}
.inlinelink{display:inline-block;margin-top:25px;font-weight:600;font-size:14px;color:var(--lime)}
.featuregrid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.featuregrid article>span{font:12px monospace;letter-spacing:1px;color:#acb9c8}
.featuregrid h3{font-size:17px;margin:10px 0;color:#ffffff}
.featuregrid p{font-size:14px}
.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}
details{border-bottom:1px solid var(--line);padding:22px 0}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:16px;color:#ffffff}
summary::-webkit-details-marker{display:none}
summary span{font-size:21px;color:#78868e}
details[open] summary span{transform:rotate(45deg)}
details p{line-height:1.7;color:var(--muted);font-size:15px;margin-bottom:0}
.related{padding:30px;max-width:1136px;background:#213225;border:1px solid #3b4e36;color:#d8eac8;border-radius:12px;display:flex;justify-content:space-between;gap:20px;font-size:17px}
.related a{font-weight:700}

/* Footer */
footer{max-width:1232px;margin:60px auto 0;padding:0 48px 30px;display:flex;gap:35px;justify-content:space-between;flex-wrap:wrap}
footer p{font-size:14px;color:var(--muted)}
footer>div:nth-child(2){display:flex;gap:25px;align-items:center;font-size:14px;flex-wrap:wrap}
footer small{display:block;width:100%;padding-top:25px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

/* Document & Utils */
.document{max-width:850px;padding-top:55px;margin:0 auto}
.document h1{font-size:56px;color:#ffffff}
.document h2{font-size:24px;letter-spacing:-.6px;margin-top:40px;color:#ffffff}
.document p{font-size:17px;line-height:1.8;color:#b6c2cd}
.document p a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.skip{position:fixed;left:10px;top:-60px;background:#182432;padding:10px;z-index:50}
.skip:focus{top:10px}
#status:not(:empty){padding:16px 4px 3px;font-size:14px;line-height:1.5}
.error{color:#ffb5b5}
progress{width:100%;height:8px;accent-color:#79b93b}
.progresswrap{margin:16px 0}
.result{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.resulthead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}
.resulthead h3{font-size:14px;overflow-wrap:anywhere;margin:0 0 5px;color:#ffffff}
.resulthead p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
.result .primary{padding:10px 16px;font-size:14px;gap:12px;white-space:nowrap}
.compare{position:relative;border-radius:10px;overflow:hidden;background:#182432;line-height:0;max-width:700px;margin:0 auto}
.compare img{width:100%;height:auto;display:block}
.compare .before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.compare .divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 5px #0005}
.compare .tag{position:absolute;top:12px;left:12px;background:#17232ce0;color:white;border-radius:4px;padding:8px;font-size:12px;line-height:1}
.compare .tag.aftertag{left:auto;right:12px}
.rangebar{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:14px;color:var(--muted)}
.rangebar input{flex:1;min-width:0;accent-color:#45602f}
.videoresults{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.videoresults video{width:100%;border-radius:8px;background:#17232c}
.videoresults figcaption{font-size:14px;color:var(--muted);margin:8px 0}
.videoresults figure{margin:0}
.resultnote{font-size:14px;color:#e4ce8b;line-height:1.5}
.clearbtn{margin-left:0}
.busy .dropzone{opacity:.65}

/* Ratings */
.rating-panel{max-width:1088px;margin:48px auto 0;padding:28px;border:1px solid #374858;background:linear-gradient(135deg,#1b2b36,#13222e);border-radius:18px;display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
.rating-panel h2{font-size:23px;letter-spacing:-.6px;margin:12px 0;color:#ffffff}
.rating-score{display:flex;align-items:baseline;gap:8px}
.rating-average{font-size:44px;font-weight:700;letter-spacing:-2px;color:var(--lime)}
.rating-outof{font-size:16px;color:#a8b7c7}
.rating-total{font-size:14px;color:#bac8d4;margin-top:6px}
.rating-panel fieldset{border:0;padding:0;margin:0 0 17px}
.rating-panel legend{font-size:16px;margin-bottom:12px;color:#ffffff}
.rating-stars{display:flex;gap:8px;flex-wrap:wrap}
.rating-stars label{display:block;cursor:pointer}
.rating-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rating-stars span{display:grid;place-items:center;min-width:50px;height:46px;border:1px solid #48596b;border-radius:10px;background:#13212e;color:#c3d0da;font-size:15px;transition:background .15s,border-color .15s}
.rating-stars input:checked+span{background:#c7fb69;color:#15212c;border-color:#c7fb69}
.rating-stars input:focus-visible+span{outline:3px solid #85b9ff;outline-offset:3px}
.rating-stars label:hover span{border-color:#c7fb69}
.rating-note{font-size:12px;color:#aebdca;line-height:1.6;max-width:450px}
.rating-note a{text-decoration:underline;text-underline-offset:3px}
.rating-panel .toolstatus{margin-top:14px;font-size:14px}
.rating-panel button{min-height:45px}

/* =========================================================
   Tools Directory Hub (/tools/)
   ========================================================= */
.utilityhead{max-width:1184px;margin:0 auto;padding:45px 24px 20px}
.utilityhead h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2px;line-height:1.1;color:#ffffff !important;margin:16px 0}
.utilityhead p{font-size:17px;line-height:1.7;max-width:680px;color:var(--muted) !important;margin:0 0 16px}
.utilityhead .breadcrumb{font-size:13px;color:#b5c2c9 !important}
.utilityhead .breadcrumb a{color:var(--lime) !important}

.alltools{padding-top:10px;max-width:1184px;margin:0 auto}
.toolsgrid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:20px !important;margin:24px auto 60px !important;padding:0}
.toolcard{display:flex !important;flex-direction:column !important;min-width:0;padding:26px !important;background:#172431 !important;border:1px solid #304152 !important;border-radius:16px !important;text-decoration:none !important;transition:transform .18s,border-color .18s,box-shadow .18s !important}
.toolcard:hover{transform:translateY(-4px) !important;border-color:#a2d65f !important;box-shadow:0 12px 30px rgba(0,0,0,0.3) !important}
.toolcard .category{font:12px monospace;color:#c7fb69 !important;letter-spacing:1px;margin-bottom:12px;display:block}
.toolcard h2,.toolcard h3{font-size:21px !important;letter-spacing:-.5px;margin:0 0 12px !important;color:#ffffff !important;font-weight:700}
.toolcard p{color:#aebdca !important;line-height:1.65 !important;font-size:15px !important;margin:0 0 24px !important}
.toolcard .openlabel{color:#e7f4d6 !important;margin-top:auto !important;font-size:14px;font-weight:600}

/* =========================================================
   Individual Tools (/batch-photo-editor/, etc.) Full Dark Theme
   ========================================================= */
main#main{max-width:1184px;margin:0 auto;padding:0 24px 60px}
main#main>h1,main#main>div>h1{color:#ffffff !important;font-size:clamp(36px,5vw,56px);letter-spacing:-1.5px;margin:20px 0 14px}
main#main>p,main#main>div>p{color:#aebdca !important;font-size:16px;line-height:1.7}

.utility{max-width:1136px;margin:26px auto !important;background:#162230 !important;border:1px solid #334354 !important;border-radius:18px !important;padding:28px !important;color:#edf1f5 !important}
.utilitygrid{display:grid;grid-template-columns:1fr 1.1fr;gap:30px}
.utility label{display:block;font-size:14px;font-weight:600;margin-bottom:18px;color:#edf1f5}
.utility input:not([type=checkbox]):not([type=range]),.utility select,.utility textarea{display:block;width:100%;padding:12px 14px;background:#0d1825 !important;border:1px solid #3b4b5b !important;border-radius:8px;color:#edf1f5 !important;font:15px/1.5 Arial,sans-serif;margin-top:8px}
.utility input[type=file]{font-size:14px!important;background:#111e2d !important;border:1px dashed #405266 !important;padding:12px !important;cursor:pointer}
.utility textarea{resize:vertical;min-height:130px}
.utility input[type=range]{width:100%;accent-color:var(--lime);margin-top:12px}
.utility .inlinefields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.utility .checkrow{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:400}
.checkrow input{accent-color:#94d64f;width:18px;height:18px}
.utility small,.hint{font-size:13px;color:#acb9c8 !important;line-height:1.6;display:block;font-weight:400;margin-top:6px}
.utility .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}

.tooloutput{background:#0d1722;border:1px solid #2c3c4c;border-radius:12px;padding:22px;min-width:0}
.tooloutput h2{font-size:18px;margin:0 0 16px;color:#ffffff}
.outputplaceholder{color:#93a3b3;font-size:15px;line-height:1.7;padding:20px 0}
.tooloutput textarea{min-height:310px;font-family:monospace;font-size:14px}
.toolstatus{font-size:14px;color:#c5ddae;line-height:1.65;margin-top:18px;overflow-wrap:anywhere}
.toolstatus.error{color:#ffb5b5}
.tooloutput pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 monospace;color:#becbd6;max-height:440px;overflow:auto}
.toolcopy{font-size:14px;color:#a4b4c4}

.utilitynotes{max-width:1136px;margin:40px auto 0}
.utilitynotes h2{font-size:26px;letter-spacing:-.7px;color:#ffffff;margin:28px 0 12px}
.utilitynotes h3{font-size:20px;color:#ffffff;margin:24px 0 10px}
.utilitynotes p{color:#b1bfcc;font-size:16px;line-height:1.8;max-width:860px}

.tablewrap{overflow:auto;max-height:420px;margin:20px 0;border:1px solid #354554;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px;border-bottom:1px solid #283848;white-space:nowrap}
th{background:#203142;position:sticky;top:0;color:#ffffff}
td{color:#bac8d6}

.drawresult{padding:12px 20px;margin:0;max-height:400px;overflow:auto}
.drawresult li{padding:12px 4px;border-bottom:1px solid #2a3b49;font-size:20px;overflow-wrap:anywhere;color:#ffffff}
.editorresults{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.editorcard{background:#0d1722;border:1px solid #304151;border-radius:12px;overflow:hidden;min-width:0}
.editorcard img{width:100%;height:190px;object-fit:contain;background:repeating-conic-gradient(#182635 0% 25%,#14202d 0% 50%) 50%/20px 20px}
.editorcard div{padding:16px}
.editorcard h3{font-size:14px;overflow-wrap:anywhere;color:#ffffff}
.editorcard p{font-size:13px;color:var(--muted);line-height:1.7}
.editorcard a{display:inline-flex;margin-top:8px;color:var(--lime);font-size:14px}
.samplebtn{display:inline;border:0;background:none;color:var(--lime);text-decoration:underline;font-size:14px;margin:0;padding:0;cursor:pointer}
.smallbadge{display:inline-block;padding:6px 12px;border:1px solid #3b5043;border-radius:20px;color:#c7e8b7;font-size:12px}

/* Responsive Media Queries */
@media(min-width:1400px){.workspace{max-width:1392px;margin:auto}}
@media(max-width:900px){
  header{padding:0 25px}
  .navnote{display:none}
  .why,.faq{gap:35px}
  .section{padding:55px 28px}
  .related{margin:0 24px}
  footer{padding:0 28px 25px}
  .workspace{margin:0 14px}
  nav{gap:20px}
  .studio{max-width:770px}
}
@media(max-width:800px){
  .utility{margin:0 20px;padding:22px}
  .utilitygrid{grid-template-columns:1fr}
  .toolsgrid,.editorresults{grid-template-columns:repeat(2,1fr) !important}
  .utilityhead{padding:30px 24px 20px}
  .rating-panel{margin:30px 20px 0}
}
@media(max-width:600px){
  header{height:auto;min-height:96px;flex-wrap:wrap;gap:15px;padding:20px}
  .brand{font-size:24px}
  header nav{width:100%;justify-content:space-between;font-size:14px;gap:10px;padding-bottom:2px}
  .workspace{padding:30px 14px 20px;border-radius:17px;margin:0 8px}
  h1{font-size:43px;letter-spacing:-1.7px}
  .intro>p{font-size:16px;max-width:340px}
  .eyebrow{font-size:12px;letter-spacing:.7px}
  .trust{gap:12px;font-size:12px;margin:20px 0 26px;flex-wrap:wrap}
  .studio{padding:17px 13px;border-radius:12px}
  .studiohead{font-size:12px;letter-spacing:.3px;gap:10px}
  .toolnav a{padding:10px 23px}
  .dropzone{padding:20px 8px}
  .dropzone h2{font-size:20px}
  .dropzone small{font-size:12px;max-width:260px}
  .studiobottom{font-size:12px;line-height:1.5}
  .workspacefoot{line-height:1.6;font-size:12px}
  .sectionheading h2,.why h2{font-size:30px}
  .stepgrid,.why,.faq{grid-template-columns:1fr;gap:28px}
  .stepgrid{gap:25px}
  .stepgrid p{max-width:none}
  .featuregrid{gap:24px 20px}
  .section{padding:44px 24px}
  .sectionheading h2{margin-bottom:10px}
  .steps .sectionheading{margin-bottom:26px}
  .related{flex-direction:column;padding:25px;margin:0 16px;font-size:16px}
  .document h1{font-size:42px}
  .document p{font-size:16px}
  .document .lead{font-size:19px}
  .resulthead{align-items:flex-start;gap:8px}
  .result .primary{white-space:normal;font-size:14px}
  .videoresults{grid-template-columns:1fr}
  footer{margin-top:40px}
  footer>div:nth-child(2){gap:18px}
  .featuregrid h3{font-size:16px}
  .featuregrid p{font-size:14px}
  .rating-panel{grid-template-columns:1fr;padding:24px 20px;gap:22px;margin:30px 12px 0}
  .rating-stars span{min-width:43px}
  .rating-stars{gap:6px}
  .toolsgrid,.editorresults{grid-template-columns:1fr !important}
  .utility{margin:0 12px;padding:20px 16px}
  .utilityhead h1{font-size:38px}
  .utility .inlinefields{gap:12px}
  .tooloutput{padding:18px}
  .studiohead{flex-wrap:wrap}
  .toolnav a{padding:10px 20px}
  .trust{line-height:1.6}
  .document p a{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important}
  .toolcard:hover,.primary:hover,.secondary:hover,.primary:hover>span{transform:none !important}
}