@font-face { font-family: StudioArabic; src: url('assets/fonts/NotoSansArabic.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #f4f3ee; color: #26332f; font: 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
header { height: 86px; background: #fff; border-bottom: 1px solid #e4e5df; display: flex; align-items: center; padding: 0 32px; gap: 15px; }
.brand { width: 43px; height: 43px; border-radius: 12px; background: #263a35; color: #fff; font: 30px Georgia, serif; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.brand span { font: 15px sans-serif; color: #cedd9b; margin-left: 1px; }
header strong { font-size: 18px; letter-spacing: -.5px; }
header small { display: block; font-size: 9px; letter-spacing: 1.7px; margin-top: 5px; color: #7a857d; }
.local { margin-left: auto; color: #596b44; background: #eff4e7; padding: 9px 13px; border-radius: 20px; font-size: 11px; }
main { display: grid; grid-template-columns: 390px 1fr; max-width: 1800px; margin: auto; }
aside { background: #fff; padding: 30px 28px 50px; border-right: 1px solid #e4e5df; height: calc(100vh - 86px); overflow: auto; scrollbar-width: thin; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; color: #7b887e; }
h1 { font: 37px/1.12 Georgia, serif; letter-spacing: -1px; margin: 15px 0; }
p { color: #6f7b73; font-size: 12px; line-height: 1.65; }
.intro { padding-bottom: 16px; }
section { border-top: 1px solid #eaede7; padding: 22px 0 12px; }
h2 { font-size: 13px; margin: 0 0 18px; }
h2 b { font-size: 10px; color: #84916e; font-weight: 500; margin-right: 10px; }
.badge { float: right; font-size: 9px; font-weight: 500; color: #647650; border: 1px solid #dfe6d7; border-radius: 20px; padding: 3px 7px; }
.badge.dirty { color: #8d6225; border-color: #eadbc1; }
label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 14px; color: #56665d; }
input:not([type=checkbox]), select { display: block; width: 100%; margin-top: 7px; border: 1px solid #dce2db; border-radius: 7px; padding: 10px; background: #fff; color: #263a35; font: inherit; font-size: 13px; }
input[dir=auto] { font-family: StudioArabic, Arial, sans-serif; font-size: 16px; }
input[type=file] { font-size: 11px; padding: 8px; }
input[type=color] { height: 38px; padding: 3px; }
input[type=range] { padding: 0; accent-color: #365d4d; cursor: pointer; }
input[type=checkbox] { accent-color: #365d4d; }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, .load:focus-within { outline: 2px solid #6c987d; outline-offset: 3px; }
.row { display: flex; gap: 12px; }
.row > label { flex: 1; min-width: 0; }
button, .load { cursor: pointer; background: #fff; border: 1px solid #dce2db; border-radius: 7px; padding: 10px 12px; font: inherit; font-size: 12px; color: #3f5649; }
button:hover, .load:hover { background: #f4f7ef; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: #263a35; color: #fff; width: 100%; padding: 15px; text-align: left; font-size: 13px; }
.primary:hover { background: #36564a; }
.primary span { float: right; }
.secondary { width: 100%; background: #eff3e8; color: #3d5232; border-color: #d8e1cc; margin-bottom: 12px; }
.actions { gap: 7px; margin: 8px 0 16px; flex-wrap: wrap; }
.actions > * { font-size: 10px; flex: 1 1 40%; padding: 9px; text-align: center; margin: 0; }
.actions .check { justify-content: center; }
.load input { display: none !important; }
.check { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.hint { font-size: 10px; line-height: 1.6; margin: 8px 0 15px; }
.upload { background: #f6f7f2; border: 1px dashed #bccbb6; padding: 14px; border-radius: 9px; color: #334e3c; }
.upload small { display: block; font-size: 10px; color: #73816f; margin-top: 7px; line-height: 1.6; }
.upload input { background: transparent; border: 0; padding: 5px 0; }
details { padding: 12px; background: #f6f7f2; border-radius: 8px; margin: 15px 0; }
summary { font-size: 11px; cursor: pointer; }
details[open] summary { margin-bottom: 16px; }
.bounds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#editBounds[aria-pressed=true] { background: #245d83; border-color: #245d83; color: #fff; }
.workspace { padding: 30px 5%; height: calc(100vh - 86px); overflow: auto; display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse at center, #ebece3, #f5f4ef); scrollbar-width: thin; }
.preview-head, .preview-foot { width: 100%; max-width: 850px; display: flex; justify-content: space-between; font-size: 9px; color: #76836e; letter-spacing: 1px; gap: 14px; }
.preview-head { margin-bottom: 22px; }
.preview-head i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7c9560; margin-right: 7px; }
.canvas-wrap { position: relative; width: min(100%, calc((100vh - 245px) * var(--poster-ratio, 1))); box-shadow: 0 18px 60px #283d3020; background: #fff; line-height: 0; flex-shrink: 0; }
canvas { width: 100%; height: auto; display: block; }
#boundsOverlay { position: absolute; inset: 0; pointer-events: none; }
#boundsOverlay.editing { pointer-events: auto; touch-action: none; cursor: crosshair; background: #ffffff08; }
#boundsBox { position: absolute; border: 2px dashed #176ba5; background: #298bc416; box-shadow: 0 0 0 1px #ffffffb0; }
#boundsOverlay.editing #boundsBox { cursor: move; }
#boundsBox > span:first-child { position: absolute; left: -2px; top: -23px; padding: 5px 7px; background: #176ba5; color: #fff; white-space: nowrap; font-size: 9px; letter-spacing: .6px; line-height: 1; }
#boundsHandle { position: absolute; width: 15px; height: 15px; right: -8px; bottom: -8px; border-radius: 3px; background: #176ba5; border: 2px solid #fff; cursor: nwse-resize; }
.editing-hint { background: #e7f0f5; color: #245d83; border-radius: 6px; padding: 9px 12px; font-size: 11px; max-width: 680px; }
.preview-foot { margin-top: 22px; font-size: 10px; letter-spacing: 0; }
#status { color: #4e6e44; text-align: right; max-width: 70%; }
.prep-panel { margin: 15px 0 22px; padding: 14px; border: 1px solid #e1e6d9; border-radius: 10px; background: #fbfcf8; }
.prep-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.prep-previews figure { position: relative; margin: 0; background-color: #efeee9; border: 1px solid #e0dfd8; border-radius: 6px; overflow: hidden; }
.prep-previews img { width: 100%; height: 130px; object-fit: contain; padding: 8px 6px 25px; display: block; }
.prep-previews figcaption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background: #f9faf6eb; padding: 5px; font-size: 8px; letter-spacing: 1px; color: #6c7667; }
.checker { background-color: #fff !important; background-image: linear-gradient(45deg,#e5e5e5 25%,transparent 25%),linear-gradient(-45deg,#e5e5e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5e5 75%),linear-gradient(-45deg,transparent 75%,#e5e5e5 75%) !important; background-size: 16px 16px !important; background-position: 0 0,0 8px,8px -8px,-8px 0 !important; }
#processingStatus { font-size: 10px; line-height: 1.5; color: #657759; }
dialog { border: 1px solid #dce3d7; border-radius: 14px; padding: 22px; width: min(840px,95vw); max-height: 94vh; color: #263a35; }
dialog::backdrop { background: #243b3299; backdrop-filter: blur(5px); }
#sizeDialog { width: min(480px,95vw); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.dialog-head h2 { font: 24px Georgia,serif; margin: 0; }
.refine-tools { display: flex; align-items: center; gap: 8px; margin: 15px 0; }
.refine-tools .selected { background: #263a35; color: #fff; }
.refine-tools label { margin: 0 10px; flex: 1; }
.refine-tools input { padding: 0; margin: 0; }
.mask-wrap { max-height: 60vh; overflow: auto; text-align: center; border: 1px solid #ddd; border-radius: 8px; }
#maskCanvas, #cropCanvas { margin: auto; max-width: 100%; width: auto; max-height: 60vh; touch-action: none; cursor: crosshair; }
#sizeError { color: #a34131; }
@media(max-width: 1000px) { main { grid-template-columns: 340px 1fr; } aside { padding: 25px 20px; } .workspace { padding: 28px 20px; } }
@media(max-width: 720px) {
  header { padding: 0 18px; height: 72px; } header small { letter-spacing: .9px; font-size: 8px; }
  main { display: flex; flex-direction: column; } .workspace { order: -1; height: auto; padding: 20px; }
  .canvas-wrap { width: min(100%,420px); } aside { height: auto; overflow: visible; border: 0; width: 100%; }
  .preview-head,.preview-foot { max-width: 480px; } .local { font-size: 9px; padding: 8px; } h1 { font-size: 30px; }
}