/* ============================================================
   JAYSTOOL PREMIUM WHITE UI — 2026-07-21
   Shared frontend-only visual layer for all Jaystool pages.
   Keeps existing DOM, data processing, exports and API behavior intact.
   ============================================================ */
:root{
  --jp-bg:#ffffff;
  --jp-surface:#ffffff;
  --jp-soft:#f7f9fb;
  --jp-soft-2:#f2f5f8;
  --jp-line:#e7ebf0;
  --jp-line-strong:#d5dce5;
  --jp-ink:#0b1220;
  --jp-text:#172033;
  --jp-muted:#667085;
  --jp-muted-2:#98a2b3;
  --jp-shadow:0 18px 50px rgba(15,23,42,.07);
  --jp-radius:14px;
}
html,body{background:var(--jp-bg)!important;color:var(--jp-text)!important}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body::before{display:none!important}
main,.main,.page,.page.active,.app,.workspace,.content,.section,.tool-page,.subpage,.tool-main,.tool-workspace{background:#fff!important}
h1,h2,h3,h4,h5,h6{color:var(--jp-ink)!important;letter-spacing:-.025em!important}
p,.note,.muted,.description,.helper,.small-note,.status-text{color:var(--jp-muted)!important}
a{color:inherit}

/* Global navigation */
.topbar,.nav,.navbar,.site-nav,.tool-nav,.header-bar{
  background:rgba(255,255,255,.96)!important;color:var(--jp-ink)!important;
  border-bottom:1px solid var(--jp-line)!important;box-shadow:none!important;backdrop-filter:blur(14px)
}
.logo,.brand,.site-title{color:var(--jp-ink)!important;text-shadow:none!important}
.nav a,.nav-links a,.topbar a,.home,.back,.back-link{color:var(--jp-text)!important}

/* Remove photographic/dark hero treatments from app/tool pages */
body:not(.landing-page) .hero,.tool-hero,.subpage-hero{
  min-height:auto!important;background:#fff!important;background-image:none!important;color:var(--jp-text)!important;
  border-bottom:1px solid var(--jp-line)!important;box-shadow:none!important;text-shadow:none!important
}
body:not(.landing-page) .hero *,.tool-hero *,.subpage-hero *{color:inherit!important;text-shadow:none!important}
.hero-card{background:var(--jp-soft)!important;border:1px solid var(--jp-line)!important;color:var(--jp-text)!important;box-shadow:none!important}

/* Page rhythm */
main,.main,.tool-main{max-width:1500px;margin-left:auto!important;margin-right:auto!important}
.section-header,.page-header,.tool-header,.section-head{border-bottom:1px solid var(--jp-line)!important}
.eyebrow,.kicker,.step-num{color:var(--jp-muted)!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:700!important}

/* Surfaces: quiet, flat and editorial */
.card,.panel,.step,.section,.tool-shell,.page-shell,.result-panel,.result-card,.preview,.preview-shell,
.table-wrap,.metric,.summary,.workflow,.dropzone,.drop-zone,.upload-zone,.upload-box,.vendor-list,.issue-box,
.collection-card,.about-box,.edit-popup,.edit-row,.pro-actions,.pro-guidance>div,.pro-metrics>div,.pro-console,.ep-card{
  background:#fff!important;color:var(--jp-text)!important;border:1px solid var(--jp-line)!important;
  box-shadow:none!important;border-radius:var(--jp-radius)!important
}
.card:hover,.collection-card:hover,.panel:hover{border-color:var(--jp-line-strong)!important;box-shadow:0 10px 30px rgba(15,23,42,.045)!important}
.metric,.summary .metric{background:var(--jp-soft)!important;border-color:transparent!important}

/* Upload areas */
.dropzone,.drop-zone,.upload-zone,.upload-box,input[type=file]{
  background:#fff!important;border:1px dashed #aeb8c6!important;color:var(--jp-text)!important;box-shadow:none!important
}
.dropzone:hover,.drop-zone:hover,.upload-zone:hover,.upload-box:hover,
.dropzone.dragover,.drop-zone.dragover,.upload-zone.dragover,.upload-box.dragover,.ep-drop-active{
  background:var(--jp-soft)!important;border-color:var(--jp-ink)!important
}

/* Form controls */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  background:#fff!important;color:var(--jp-text)!important;border:1px solid var(--jp-line-strong)!important;
  border-radius:10px!important;box-shadow:none!important
}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--jp-ink)!important;box-shadow:0 0 0 3px rgba(15,23,42,.07)!important}
label{color:#344054!important}

/* Actions */
button,.btn,.tool-link,.download-link,input[type=button],input[type=submit]{
  background:var(--jp-ink)!important;color:#fff!important;border:1px solid var(--jp-ink)!important;
  border-radius:10px!important;box-shadow:none!important;font-weight:650!important
}
button:hover,.btn:hover,.tool-link:hover,.download-link:hover{background:#000!important;border-color:#000!important;transform:translateY(-1px)}
button.secondary,.btn.secondary,.secondary,.ghost,.btn-secondary,.pro-action:not(.primary),.ep-btn:not(.primary){
  background:#fff!important;color:var(--jp-text)!important;border-color:var(--jp-line-strong)!important
}
button.secondary:hover,.btn.secondary:hover,.secondary:hover,.ghost:hover,.btn-secondary:hover{background:var(--jp-soft)!important;color:#000!important}
button:disabled,.btn:disabled{opacity:.45!important;transform:none!important}

/* Tables */
table{background:#fff!important;border-collapse:separate;border-spacing:0}
thead th,.rank-table th{background:var(--jp-soft)!important;color:#475467!important;border-bottom:1px solid var(--jp-line-strong)!important;text-transform:uppercase;letter-spacing:.065em;font-size:11px}
tbody td{background:#fff!important;color:var(--jp-text)!important;border-bottom:1px solid #eef1f4!important}
tbody tr:nth-child(even) td{background:#fbfcfd!important}
tbody tr:hover td{background:#f6f8fa!important}

/* Tabs / pills */
.tab,.tabs,.tabbar,.pro-tabs,.ep-mode,.pro-mode-toggle{background:#fff!important;border-color:var(--jp-line)!important;box-shadow:none!important}
.tab.active,.tabs button.active,.pro-tabs button.active,.ep-mode button.active,.pro-mode-toggle button.active{background:var(--jp-ink)!important;color:#fff!important}
.badge,.chip,.pill{background:var(--jp-soft-2)!important;color:#475467!important;border:1px solid var(--jp-line)!important}

/* Pro/Easy add-on areas */
.pro-top,.ep-head{background:#fff!important;color:var(--jp-text)!important;border:1px solid var(--jp-line)!important;box-shadow:none!important}
.pro-top *,.ep-head *{color:inherit!important}
.pro-flow-step,.ep-step{background:#fff!important;border-color:var(--jp-line)!important}
.pro-flow-step.current,.ep-step.current{border-color:#667085!important;box-shadow:0 0 0 2px rgba(15,23,42,.06)!important}
.pro-flow-step.done,.ep-step.done{background:#f5faf7!important}
.ep-next{background:var(--jp-soft)!important}

/* Cindy's Categorizer lives inside index.html */
#categorizerPage,.categorizer-page,[data-page="categorizer"]{background:#fff!important}
#categorizerPage .subpage-header,.categorizer-page .subpage-header{background:#fff!important;border-bottom:1px solid var(--jp-line)!important}

/* Cindy WIP organizer */
body:has(#mainDrop) main{max-width:1440px!important}
body:has(#mainDrop) .workflow{border:0!important;display:grid!important;gap:18px!important;background:#fff!important}
body:has(#mainDrop) .step{padding:22px!important}
body:has(#mainDrop) .summary{border:0!important;background:#fff!important;gap:10px!important}
body:has(#mainDrop) .footer-action{background:rgba(255,255,255,.96)!important;border-top:1px solid var(--jp-line)!important;box-shadow:none!important}

/* Merge Images and legacy duplicated-shell pages */
body:has(#mergeImagesPage),body:has([data-tool="merge-images"]){background:#fff!important}
body:has(#mergeImagesPage) .hero{background:#fff!important;background-image:none!important;color:var(--jp-text)!important}

/* Style AI legacy palette cleanup */
body:has(.result-panel) .tool-shell{background:#fff!important}
body:has(.result-panel) .tool-controls{background:#fff!important;border-color:var(--jp-line)!important}
body:has(.result-panel) .result-panel{background:#fff!important;border-color:var(--jp-line)!important}

/* Scrollbars */
*{scrollbar-color:#cbd3dc transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cbd3dc;border:3px solid transparent;background-clip:padding-box;border-radius:999px}

@media(max-width:760px){
  main,.main,.tool-main{padding-left:14px!important;padding-right:14px!important}
  .workflow{grid-template-columns:1fr!important}
  .topbar,.nav,.navbar{padding-left:14px!important;padding-right:14px!important}
}