.rjp-photo-resizer{
  --rjp-ink:#1C2B45;
  --rjp-ink-light:#33456B;
  --rjp-paper:#ECEEE2;
  --rjp-card:#F8F8F2;
  --rjp-seal-red:#A63D40;
  --rjp-seal-red-dark:#7C2C2E;
  --rjp-seal-green:#2E6E48;
  --rjp-seal-green-dark:#1F4E33;
  --rjp-gold:#B8863B;
  --rjp-slate:#5B6472;
  --rjp-line:#D6D4C4;
  --rjp-font-display:'Fraunces', Georgia, serif;
  --rjp-font-body:'Inter', -apple-system, sans-serif;
  --rjp-font-mono:'IBM Plex Mono', 'Courier New', monospace;

  max-width:920px;
  margin:0 auto;
  padding:32px 16px 48px;
  background:var(--rjp-paper);
  background-image:repeating-linear-gradient(0deg, rgba(28,43,69,0.025) 0px, rgba(28,43,69,0.025) 1px, transparent 1px, transparent 32px);
  font-family:var(--rjp-font-body);
  color:var(--rjp-ink);
  box-sizing:border-box;
}
.rjp-photo-resizer *{box-sizing:border-box;}
.rjp-photo-resizer .rjp-header{text-align:center; margin-bottom:28px;}
.rjp-photo-resizer .rjp-eyebrow{
  font-family:var(--rjp-font-mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--rjp-gold); font-weight:600;
}
.rjp-photo-resizer h2.rjp-title{
  font-family:var(--rjp-font-display); font-weight:600; font-size:clamp(26px,4vw,36px);
  margin:8px 0 4px; letter-spacing:-0.01em; color:var(--rjp-ink);
}
.rjp-photo-resizer .rjp-sub{color:var(--rjp-slate); font-size:14px; max-width:540px; margin:0 auto;}
.rjp-photo-resizer .rjp-rule{
  height:1px; background:repeating-linear-gradient(90deg, var(--rjp-ink) 0 6px, transparent 6px 10px);
  opacity:0.35; margin:20px auto 0; max-width:520px;
}

.rjp-photo-resizer .rjp-toggle{
  display:flex; gap:0; max-width:320px; margin:0 auto 24px;
  border:1px solid var(--rjp-line); border-radius:3px; overflow:hidden;
}
.rjp-photo-resizer .rjp-toggle button{
  flex:1; padding:10px 12px; background:var(--rjp-card); border:none; cursor:pointer;
  font-family:var(--rjp-font-body); font-size:13.5px; font-weight:600; color:var(--rjp-slate);
}
.rjp-photo-resizer .rjp-toggle button.rjp-active{background:var(--rjp-ink); color:#F4F3EA;}
.rjp-photo-resizer .rjp-toggle button + button{border-left:1px solid var(--rjp-line);}

.rjp-photo-resizer .rjp-board{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0;
  background:var(--rjp-card); border:1px solid var(--rjp-line); border-radius:2px; overflow:hidden;
}
@media (max-width:720px){ .rjp-photo-resizer .rjp-board{grid-template-columns:1fr;} }
.rjp-photo-resizer .rjp-form-side{padding:28px; border-right:1px solid var(--rjp-line);}
@media (max-width:720px){ .rjp-photo-resizer .rjp-form-side{border-right:none; border-bottom:1px solid var(--rjp-line);} }

.rjp-photo-resizer .rjp-field{margin-bottom:18px;}
.rjp-photo-resizer .rjp-field label{
  display:block; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--rjp-ink-light); margin-bottom:6px;
}
.rjp-photo-resizer .rjp-hint{font-size:11.5px; color:var(--rjp-slate); margin-top:5px;}
.rjp-photo-resizer select, .rjp-photo-resizer input[type="number"]{
  width:100%; font-family:var(--rjp-font-body); font-size:14px;
  padding:10px 12px; border:1px solid #C7C5B4; border-radius:3px; background:#fff; color:var(--rjp-ink);
}
.rjp-photo-resizer input:focus, .rjp-photo-resizer select:focus{
  outline:none; border-color:var(--rjp-ink-light); box-shadow:0 0 0 3px rgba(51,69,107,0.12);
}
.rjp-photo-resizer .rjp-custom-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}

.rjp-photo-resizer .rjp-dropzone{
  border:2px dashed var(--rjp-line); border-radius:4px; padding:24px 16px;
  text-align:center; cursor:pointer; background:#fff; margin-bottom:8px;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.rjp-photo-resizer .rjp-dropzone:hover, .rjp-photo-resizer .rjp-dropzone.rjp-drag{
  border-color:var(--rjp-gold); background:rgba(184,134,59,0.05);
}
.rjp-photo-resizer .rjp-dropzone .rjp-dz-title{font-weight:600; font-size:13.5px; margin-bottom:4px;}
.rjp-photo-resizer .rjp-dropzone .rjp-dz-sub{font-size:12px; color:var(--rjp-slate);}
.rjp-photo-resizer input[type="file"]{display:none;}

button.rjp-download{
  width:100%; margin-top:6px; padding:14px 18px; background:var(--rjp-ink);
  color:#F4F3EA; border:none; border-radius:3px; font-family:var(--rjp-font-body);
  font-weight:600; font-size:14.5px; letter-spacing:0.02em; cursor:pointer;
  transition:background 0.15s ease; opacity:0.4; pointer-events:none;
}
button.rjp-download.rjp-ready{opacity:1; pointer-events:auto;}
button.rjp-download:hover{background:var(--rjp-ink-light);}

.rjp-photo-resizer .rjp-result-side{
  padding:28px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(184,134,59,0.06), transparent 60%);
}
.rjp-photo-resizer .rjp-placeholder{color:var(--rjp-slate); font-size:13.5px; max-width:220px; line-height:1.6;}
.rjp-photo-resizer .rjp-frame-outline{
  display:block; width:96px; height:112px; margin:0 auto 14px; position:relative;
}
.rjp-photo-resizer .rjp-frame-outline span{
  position:absolute; width:14px; height:14px; border-color:var(--rjp-line);
}
.rjp-photo-resizer .rjp-frame-outline span:nth-child(1){top:0; left:0; border-top:2px solid; border-left:2px solid;}
.rjp-photo-resizer .rjp-frame-outline span:nth-child(2){top:0; right:0; border-top:2px solid; border-right:2px solid;}
.rjp-photo-resizer .rjp-frame-outline span:nth-child(3){bottom:0; left:0; border-bottom:2px solid; border-left:2px solid;}
.rjp-photo-resizer .rjp-frame-outline span:nth-child(4){bottom:0; right:0; border-bottom:2px solid; border-right:2px solid;}

.rjp-photo-resizer .rjp-preview-wrap{display:none;}
.rjp-photo-resizer .rjp-preview-wrap.rjp-show{display:block;}
.rjp-photo-resizer .rjp-frame{
  position:relative; width:150px; margin:0 auto 16px; opacity:0; transform:scale(0.85);
}
.rjp-photo-resizer .rjp-frame.rjp-animate{animation:rjp-frame-in 0.4s ease forwards;}
@keyframes rjp-frame-in{ to{opacity:1; transform:scale(1);} }
.rjp-photo-resizer .rjp-frame img{
  width:100%; display:block; border:1px solid var(--rjp-line); background:#fff;
}
.rjp-photo-resizer .rjp-frame span{
  position:absolute; width:16px; height:16px; border-color:var(--rjp-gold);
}
.rjp-photo-resizer .rjp-frame span:nth-child(2){top:-4px; left:-4px; border-top:2px solid; border-left:2px solid;}
.rjp-photo-resizer .rjp-frame span:nth-child(3){top:-4px; right:-4px; border-top:2px solid; border-right:2px solid;}
.rjp-photo-resizer .rjp-frame span:nth-child(4){bottom:-4px; left:-4px; border-bottom:2px solid; border-left:2px solid;}
.rjp-photo-resizer .rjp-frame span:nth-child(5){bottom:-4px; right:-4px; border-bottom:2px solid; border-right:2px solid;}

.rjp-photo-resizer .rjp-status{font-weight:600; font-size:14.5px; margin-bottom:6px;}
.rjp-photo-resizer .rjp-status.rjp-pass{color:var(--rjp-seal-green-dark);}
.rjp-photo-resizer .rjp-status.rjp-fail{color:var(--rjp-seal-red-dark);}
.rjp-photo-resizer .rjp-meta{font-family:var(--rjp-font-mono); font-size:12.5px; color:var(--rjp-slate); line-height:1.7;}
.rjp-photo-resizer .rjp-meta b{color:var(--rjp-ink);}
.rjp-photo-resizer .rjp-processing{font-size:12.5px; color:var(--rjp-gold); margin-top:8px; display:none;}
.rjp-photo-resizer .rjp-processing.rjp-show{display:block;}

.rjp-photo-resizer .rjp-table-section{margin-top:32px;}
.rjp-photo-resizer .rjp-table-section h3{font-family:var(--rjp-font-display); font-size:18px; font-weight:600; margin:0 0 4px; color:var(--rjp-ink);}
.rjp-photo-resizer .rjp-table-section .rjp-sub2{font-size:13px; color:var(--rjp-slate); margin:0 0 14px;}
.rjp-photo-resizer table{width:100%; border-collapse:collapse; background:var(--rjp-card); border:1px solid var(--rjp-line); font-size:13px;}
.rjp-photo-resizer thead th{
  text-align:left; font-family:var(--rjp-font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--rjp-ink-light); background:#E4E2D2; padding:10px 12px;
  border-bottom:1px solid var(--rjp-line);
}
.rjp-photo-resizer tbody td{padding:10px 12px; border-bottom:1px solid var(--rjp-line); color:var(--rjp-ink);}
.rjp-photo-resizer tbody tr:last-child td{border-bottom:none;}
.rjp-photo-resizer tbody tr:hover{background:rgba(184,134,59,0.05);}

.rjp-photo-resizer .rjp-footer{margin-top:24px; text-align:center; font-size:12px; color:var(--rjp-slate); line-height:1.7;}
.rjp-photo-resizer .rjp-disclaimer{max-width:640px; margin:0 auto; padding-top:6px;}