/* ============================================================
   Jay's Tools Modern UI System
   Clean, white, app-like design for Privy internal tools.
   Frontend-only visual layer. Does not change tool logic.
   ============================================================ */
:root{
  --jt-bg:#ffffff;
  --jt-surface:#ffffff;
  --jt-soft:#f8fafc;
  --jt-soft-2:#f3f6f8;
  --jt-line:#e7ecf2;
  --jt-line-2:#d7dee8;
  --jt-text:#111827;
  --jt-muted:#667085;
  --jt-muted-2:#98a2b3;
  --jt-ink:#0b1220;
  --jt-accent:#111827;
  --jt-radius:16px;
  --jt-shadow:0 8px 24px rgba(15,23,42,.055);
  --jt-shadow-2:0 18px 50px rgba(15,23,42,.08);
}
html,body{
  background:#ffffff!important;
  color:var(--jt-text)!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body,button,input,select,textarea{font-weight:400!important;letter-spacing:0!important}
h1,h2,h3,h4,strong,b{font-weight:650!important;color:var(--jt-text)!important;letter-spacing:-.02em!important}
.kicker,.eyebrow{color:var(--jt-muted)!important;font-weight:650!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.muted,.small-note,.status,.drag-tip,.version{color:var(--jt-muted)!important;font-weight:400!important;line-height:1.5!important}
a{color:inherit}
/* Page structure */
.section{max-width:none!important;padding:24px!important;background:#ffffff!important}
.section-header{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;
  margin:0 0 18px!important;padding:0 0 18px!important;border-bottom:1px solid var(--jt-line)!important;
}
.section-header h2{font-size:clamp(1.8rem,3vw,2.8rem)!important;line-height:1.05!important;margin:0 0 8px!important}
/* Buttons */
button,.btn,.mini-btn,.tool-link,.download-link,.back,.back-link,.primary,.secondary,.ghost,input[type="button"],input[type="submit"]{
  border-radius:12px!important;border:1px solid var(--jt-ink)!important;background:var(--jt-ink)!important;color:#fff!important;
  box-shadow:none!important;font-weight:600!important;padding:10px 14px!important;transition:background .16s ease,border-color .16s ease,transform .12s ease!important;
}
button:hover,.btn:hover,.mini-btn:hover,.tool-link:hover,.download-link:hover,.back:hover,.back-link:hover{
  background:#000!important;border-color:#000!important;transform:translateY(-1px)!important;
}
button:disabled,.btn:disabled,.mini-btn:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important}
.secondary,.ghost,.mini-btn.secondary,.btn.secondary,.pdf-compress-cancel{
  background:#fff!important;color:var(--jt-text)!important;border:1px solid var(--jt-line-2)!important;
}
.secondary:hover,.ghost:hover,.mini-btn.secondary:hover,.btn.secondary:hover{
  background:var(--jt-soft)!important;color:#000!important;border-color:#cbd5e1!important;
}
.danger,.mini-btn.danger{background:#fff!important;color:#b42318!important;border:1px solid #fecaca!important}
/* Inputs */
input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="password"],input[type="file"],select,textarea{
  background:#ffffff!important;border:1px solid var(--jt-line-2)!important;border-radius:12px!important;color:var(--jt-text)!important;
  box-shadow:none!important;font-weight:400!important;padding:10px 12px!important;
}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#111827!important;box-shadow:0 0 0 3px rgba(17,24,39,.09)!important}
label{font-weight:550!important;color:#344054!important;font-size:12.5px!important;letter-spacing:0!important}
/* Cards and panels */
.tool-shell,.page-shell,.card,.collection-card,.about-box,.panel,.preview,.preview-shell,.result-panel,.result-card,.table-wrap,.metric,.drop-zone,.status,.tab,.edit-popup,.edit-row{
  background:#ffffff!important;border:1px solid var(--jt-line)!important;border-radius:16px!important;box-shadow:none!important;color:var(--jt-text)!important;
}
.collection-card:hover,.about-box:hover,.panel:hover{box-shadow:var(--jt-shadow)!important;border-color:#d8e0ea!important}
/* Homepage */
.hero{min-height:64vh!important;background:#ffffff!important;color:var(--jt-text)!important;padding:28px!important;border-bottom:1px solid var(--jt-line)!important}
.hero .logo,.hero .eyebrow,.hero h1,.hero p{color:var(--jt-text)!important;text-shadow:none!important}
.hero-inner{max-width:1360px!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)!important;align-items:end!important;gap:28px!important;min-height:52vh!important}
.hero h1{font-size:clamp(3rem,7vw,7rem)!important;line-height:.92!important;letter-spacing:-.07em!important;margin:0 0 18px!important}
.hero p{font-size:1.05rem!important;max-width:720px!important;color:var(--jt-muted)!important;font-weight:400!important}
.hero-card{background:var(--jt-soft)!important;border:1px solid var(--jt-line)!important;border-radius:24px!important;box-shadow:none!important;color:var(--jt-text)!important}
.hero-card h3 span,.hero-card p span{color:var(--jt-text)!important;text-shadow:none!important;font-weight:500!important}
.collection-grid{gap:14px!important}
.collection-card{border-radius:18px!important;min-height:180px!important;box-shadow:none!important}
.collection-card .content{padding:22px!important}
.collection-card h3{font-size:1.05rem!important;margin-bottom:8px!important}
.collection-card p{color:var(--jt-muted)!important;font-size:.94rem!important;line-height:1.45!important}
/* Production Data dedicated layout */
body:has(.tool-grid) .tool-shell{border:0!important;border-radius:0!important;overflow:visible!important;background:#fff!important}
body:has(.tool-grid) .tool-grid{grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;gap:22px!important;align-items:start!important}
body:has(.tool-grid) .tool-controls{
  position:sticky!important;top:18px!important;max-height:calc(100vh - 36px)!important;overflow:auto!important;
  background:#ffffff!important;border:1px solid var(--jt-line)!important;border-radius:22px!important;padding:10px!important;box-shadow:none!important;
}
body:has(.tool-grid) .tool-preview-wrap{padding:0!important;min-width:0!important}
body:has(.tool-grid) .tool-controls>.panel{
  border:0!important;border-radius:14px!important;background:#fff!important;margin:0!important;padding:14px!important;border-bottom:1px solid var(--jt-line)!important;
}
body:has(.tool-grid) .tool-controls>.panel:last-of-type{border-bottom:0!important}
body:has(.tool-grid) .tool-controls>.panel h3{display:flex!important;align-items:center!important;gap:9px!important;font-size:14px!important;margin:0 0 12px!important}
body:has(.tool-grid) .tool-controls>.panel h3::before{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--jt-soft)!important;color:#111827!important;font-size:14px!important;flex:0 0 auto;
}
body:has(.tool-grid) .tool-controls>.panel:nth-of-type(1) h3::before{content:'↥'}
body:has(.tool-grid) .tool-controls>.panel:nth-of-type(2) h3::before{content:'⌘'}
body:has(.tool-grid) .tool-controls>.panel:nth-of-type(3) h3::before{content:'⇄'}
body:has(.tool-grid) .tool-controls>.panel:nth-of-type(4) h3::before{content:'☑'}
body:has(.tool-grid) .btn,body:has(.tool-grid) .download-link{width:100%!important;margin:10px 0 0!important;text-align:center!important}
body:has(.tool-grid) .result-panel{border-radius:22px!important;padding:20px!important;margin-bottom:18px!important;background:#fff!important}
body:has(.tool-grid) .metric-grid{grid-template-columns:repeat(4,minmax(120px,1fr))!important;gap:10px!important}
body:has(.tool-grid) .metric{border-radius:14px!important;background:var(--jt-soft)!important;padding:14px!important}
body:has(.tool-grid) .metric .label{font-size:11px!important;color:var(--jt-muted)!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:600!important}
body:has(.tool-grid) .metric .value{font-size:1.5rem!important;font-weight:650!important;color:var(--jt-text)!important}
body:has(.tool-grid) .table-wrap{border-radius:16px!important;border:1px solid var(--jt-line)!important;box-shadow:none!important}
body:has(.tool-grid) thead th{background:#111827!important;color:#fff!important;font-weight:600!important;border-bottom:0!important}
body:has(.tool-grid) th,body:has(.tool-grid) td{font-weight:400!important;font-size:13px!important;padding:9px 11px!important}
body:has(.tool-grid) tbody tr:nth-child(even) td{background:#fbfcfd!important}
body:has(.tool-grid) .edit-popup{border-radius:18px!important;background:#fff!important;border:1px solid var(--jt-line)!important}
body:has(.tool-grid) .edit-row{border:1px solid var(--jt-line)!important;background:#fff!important}
body:has(.tool-grid) .edit-row h4{font-size:13px!important;font-weight:650!important;color:#111827!important}
body:has(.tool-grid) .check-grid{background:#fff!important;border:1px solid var(--jt-line)!important;border-radius:12px!important}
/* Line Sheet: keep external JS layout clean */
.autosave-floating,.auto-save-toggle{position:fixed!important;right:18px!important;top:14px!important;z-index:9999!important}
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr!important;min-height:auto!important;padding:36px 0!important}
  body:has(.tool-grid) .tool-grid{grid-template-columns:1fr!important}
  body:has(.tool-grid) .tool-controls{position:static!important;max-height:none!important}
  body:has(.tool-grid) .metric-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:720px){
  .section{padding:16px!important}.section-header{flex-direction:column!important}.hero h1{font-size:3.2rem!important}
  body:has(.tool-grid) .metric-grid{grid-template-columns:1fr!important}
}

/* Production Data compatibility class: same rules without :has() dependency */
.production-data-page .tool-shell{border:0!important;border-radius:0!important;overflow:visible!important;background:#fff!important}
.production-data-page .tool-grid{grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;gap:22px!important;align-items:start!important}
.production-data-page .tool-controls{position:sticky!important;top:18px!important;max-height:calc(100vh - 36px)!important;overflow:auto!important;background:#ffffff!important;border:1px solid var(--jt-line)!important;border-radius:22px!important;padding:10px!important;box-shadow:none!important}
.production-data-page .tool-preview-wrap{padding:0!important;min-width:0!important}
.production-data-page .tool-controls>.panel{border:0!important;border-radius:14px!important;background:#fff!important;margin:0!important;padding:14px!important;border-bottom:1px solid var(--jt-line)!important}
.production-data-page .tool-controls>.panel:last-of-type{border-bottom:0!important}
.production-data-page .tool-controls>.panel h3{display:flex!important;align-items:center!important;gap:9px!important;font-size:14px!important;margin:0 0 12px!important}
.production-data-page .tool-controls>.panel h3::before{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--jt-soft)!important;color:#111827!important;font-size:14px!important;flex:0 0 auto}
.production-data-page .tool-controls>.panel:nth-of-type(1) h3::before{content:'↥'}
.production-data-page .tool-controls>.panel:nth-of-type(2) h3::before{content:'⌘'}
.production-data-page .tool-controls>.panel:nth-of-type(3) h3::before{content:'⇄'}
.production-data-page .tool-controls>.panel:nth-of-type(4) h3::before{content:'☑'}
.production-data-page .btn,.production-data-page .download-link{width:100%!important;margin:10px 0 0!important;text-align:center!important}
.production-data-page .result-panel{border-radius:22px!important;padding:20px!important;margin-bottom:18px!important;background:#fff!important}
.production-data-page .metric-grid{grid-template-columns:repeat(4,minmax(120px,1fr))!important;gap:10px!important}
.production-data-page .metric{border-radius:14px!important;background:var(--jt-soft)!important;padding:14px!important}
.production-data-page .metric .label{font-size:11px!important;color:var(--jt-muted)!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:600!important}
.production-data-page .metric .value{font-size:1.5rem!important;font-weight:650!important;color:var(--jt-text)!important}
.production-data-page .table-wrap{border-radius:16px!important;border:1px solid var(--jt-line)!important;box-shadow:none!important}
.production-data-page thead th{background:#111827!important;color:#fff!important;font-weight:600!important;border-bottom:0!important}
.production-data-page th,.production-data-page td{font-weight:400!important;font-size:13px!important;padding:9px 11px!important}
.production-data-page tbody tr:nth-child(even) td{background:#fbfcfd!important}
.production-data-page .edit-popup{border-radius:18px!important;background:#fff!important;border:1px solid var(--jt-line)!important}
.production-data-page .edit-row{border:1px solid var(--jt-line)!important;background:#fff!important}
.production-data-page .edit-row h4{font-size:13px!important;font-weight:650!important;color:#111827!important}
.production-data-page .check-grid{background:#fff!important;border:1px solid var(--jt-line)!important;border-radius:12px!important}
@media(max-width:1100px){.production-data-page .tool-grid{grid-template-columns:1fr!important}.production-data-page .tool-controls{position:static!important;max-height:none!important}.production-data-page .metric-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:720px){.production-data-page .metric-grid{grid-template-columns:1fr!important}}