:root{
  --bg:#0A1018;
  --surface:#121B29;
  --surface-2:#1A2537;
  --line:#25334C;
  --text:#EDF2F9;
  --muted:#8FA0B8;
  --pink:#FFDCDC;
  --pink-ink:#D93A61;
  --accent:#FF5C86;
  --radius:20px;
  --tap:46px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:'Tajawal','Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  font-size:15px;line-height:1.5;
  overscroll-behavior-y:contain;
}
h1,h2,h3{margin:0;font-weight:800}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font-family:inherit}
.app{max-width:560px;margin:0 auto;padding-bottom:96px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;background:rgba(10,16,24,.92);backdrop-filter:blur(12px);
}
.topbar h1{font-size:17px;letter-spacing:.2px}
.icon-btn{
  width:var(--tap);height:var(--tap);border-radius:14px;
  display:grid;place-items:center;color:var(--text);
}
.icon-btn:active{background:var(--surface-2)}
.icon-btn[disabled]{opacity:.3}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hist{display:flex;gap:2px}

/* ---------- stage ---------- */
.stage-wrap{padding:0 12px}
.stage{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background-color:#2A2F38;
  background-image:
    linear-gradient(45deg,#232833 25%,transparent 25%),
    linear-gradient(-45deg,#232833 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#232833 75%),
    linear-gradient(-45deg,transparent 75%,#232833 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
  min-height:220px;display:grid;place-items:center;
  touch-action:none;user-select:none;
}
#canvas{display:block;max-width:100%;max-height:56vh;touch-action:none}
.empty{
  padding:44px 24px;text-align:center;color:var(--muted);
  background:var(--surface);width:100%;
}
.empty strong{display:block;color:var(--text);font-size:17px;margin-bottom:6px}
.empty .pick{
  margin-top:16px;display:inline-block;background:var(--accent);color:#fff;
  padding:12px 22px;border-radius:999px;font-weight:700;
}
.busy{
  position:absolute;inset:0;display:none;place-items:center;
  background:rgba(10,16,24,.66);backdrop-filter:blur(2px);font-weight:700;z-index:5;
}
.busy.on{display:grid}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* floating tools over the stage */
.stage-tools{
  position:absolute;inset-inline-start:10px;bottom:10px;z-index:4;
  display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 20px);
}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;font-weight:700;font-size:14px;
  background:rgba(10,16,24,.72);border:1.5px solid rgba(255,255,255,.85);color:#fff;
  backdrop-filter:blur(6px);
}
.pill svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill.active{background:#fff;color:#0A1018;border-color:#fff}
.compare{
  position:absolute;inset-inline-end:10px;bottom:10px;z-index:4;
}

/* crop overlay */
.crop{position:absolute;inset:0;z-index:3;display:none}
.crop.on{display:block}
.crop .shade{position:absolute;background:rgba(10,16,24,.6)}
.crop .box{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,0)}
.crop .box::before,.crop .box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent 33.3%,rgba(255,255,255,.35) 33.3%,rgba(255,255,255,.35) 33.5%,transparent 33.5%,transparent 66.6%,rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 66.8%,transparent 66.8%);
}
.crop .box::after{
  background:
    linear-gradient(to bottom,transparent 33.3%,rgba(255,255,255,.35) 33.3%,rgba(255,255,255,.35) 33.5%,transparent 33.5%,transparent 66.6%,rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 66.8%,transparent 66.8%);
}
.handle{position:absolute;width:38px;height:38px}
.handle::after{content:"";position:absolute;width:20px;height:20px;border:3px solid #fff;border-radius:3px}
.h-tl{inset-inline-start:-19px;top:-19px}.h-tl::after{inset-inline-start:19px;top:19px;border-width:3px 0 0 3px}
.h-tr{inset-inline-end:-19px;top:-19px}.h-tr::after{inset-inline-end:19px;top:19px;border-width:3px 3px 0 0}
.h-bl{inset-inline-start:-19px;bottom:-19px}.h-bl::after{inset-inline-start:19px;bottom:19px;border-width:0 0 3px 3px}
.h-br{inset-inline-end:-19px;bottom:-19px}.h-br::after{inset-inline-end:19px;bottom:19px;border-width:0 3px 3px 0}

/* brush cursor ring */
.ring{position:absolute;border:2px solid #fff;border-radius:50%;pointer-events:none;display:none;z-index:6;mix-blend-mode:difference}

/* ---------- panels ---------- */
.panel{
  margin:12px;padding:14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);display:none;
}
.panel.on{display:block}
.panel .row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.panel .row:last-child{margin-bottom:0}
.panel label{font-size:13px;color:var(--muted);min-width:76px;font-weight:500}
input[type=range]{flex:1;accent-color:var(--accent);height:30px}
.val{font-size:13px;color:var(--text);min-width:34px;text-align:center;font-weight:700}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;padding:9px 6px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--accent);color:#fff}
.btn-row{display:flex;gap:8px;margin-top:12px}
.btn{
  flex:1;padding:12px;border-radius:14px;font-weight:700;font-size:14px;
  background:var(--surface-2);color:var(--text);text-align:center;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line)}

/* ---------- AI card ---------- */
.ai-card{
  margin:14px 12px;padding:18px;border-radius:24px;background:var(--pink);color:#2A1218;
  display:flex;align-items:center;gap:14px;
}
.ai-card .thumb{
  width:84px;height:112px;border-radius:12px;flex:none;overflow:hidden;
  background:#0A1018;display:grid;place-items:center;
}
.ai-card .thumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.ai-card .eyebrow{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;opacity:.72}
.ai-card h3{font-size:19px;margin:4px 0 12px;line-height:1.3}
.ai-btn{
  background:#fff;color:var(--pink-ink);font-weight:800;font-size:14.5px;
  padding:12px 18px;border-radius:14px;width:100%;display:flex;
  align-items:center;justify-content:center;gap:8px;
}

/* ---------- galleries ---------- */
section{margin-top:20px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 14px;margin-bottom:10px}
.sec-head h2{font-size:19px}
.sec-head span{font-size:12.5px;color:var(--muted)}
.strip{
  display:flex;gap:12px;overflow-x:auto;padding:2px 14px 6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{display:none}
.tile{flex:none;width:104px;scroll-snap-align:start;text-align:center}
.tile .frame{
  width:104px;height:150px;border-radius:14px;overflow:hidden;
  border:2px solid transparent;background:#000;position:relative;
}
.tile canvas{width:100%;height:100%;display:block}
.tile.on .frame{border-color:var(--accent)}
.tile.on .frame::after{
  content:"";position:absolute;inset-inline-end:6px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tile b{display:block;font-size:12.5px;font-weight:600;margin-top:7px;color:var(--muted)}
.tile.on b{color:var(--text)}
.tile.add .frame{
  background:var(--surface);border:1.5px dashed var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:28px;font-weight:400;
}

/* ---------- bottom bar ---------- */
.bottom{
  position:fixed;inset-inline:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;
  display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 62%,transparent);
}
.bottom .btn{padding:14px}

/* ---------- sheet ---------- */
.sheet-bg{
  position:fixed;inset:0;background:rgba(4,8,14,.7);z-index:50;
  display:none;align-items:flex-end;justify-content:center;
}
.sheet-bg.on{display:flex}
.sheet{
  width:100%;max-width:560px;background:var(--surface);
  border-radius:26px 26px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:42px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 14px}
.sheet h3{font-size:18px;margin-bottom:4px}
.sheet p.hint{color:var(--muted);font-size:13px;margin:0 0 14px}
textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:14px;padding:12px;font-size:15px;resize:none;min-height:78px;
}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{background:var(--surface-2);border:1px solid var(--line);padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600}
.chip:active{border-color:var(--accent)}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.results .r{border-radius:14px;overflow:hidden;border:2px solid transparent;background:#000}
.results .r canvas{width:100%;height:120px;display:block}
.results .r b{display:block;font-size:12px;padding:6px 4px;text-align:center;background:var(--surface-2);font-weight:600}
.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px}
.sw{aspect-ratio:1;border-radius:12px;border:2px solid rgba(255,255,255,.14)}
.sw.on{border-color:#fff;transform:scale(1.06)}
.picker-row{display:flex;align-items:center;gap:12px;margin-top:14px}
input[type=color]{width:52px;height:44px;background:none;border:1px solid var(--line);border-radius:12px;padding:2px}

/* toast */
.toast{
  position:fixed;bottom:96px;inset-inline:0;margin:0 auto;width:max-content;max-width:88%;
  background:#fff;color:#0A1018;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;
  z-index:70;opacity:0;transform:translateY(10px);transition:.22s;pointer-events:none;text-align:center;
}
.toast.on{opacity:1;transform:none}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------- الصور المحفوظة على السيرفر ---------- */
.saved-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 14px}
.saved{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.saved img{width:100%;height:150px;object-fit:contain;display:block;background:#0A1018}
.saved-actions{display:flex;border-top:1px solid var(--line)}
.saved-actions button{
  flex:1;padding:10px 4px;font-size:12px;font-weight:700;color:var(--muted);
  border-inline-start:1px solid var(--line);
}
.saved-actions button:first-child{border:0;color:var(--text)}
.saved-actions button[data-act="del"]{color:#FF7A90}
.saved-actions button:active{background:var(--surface-2)}

/* ---------- ورقة الرابط ---------- */
.link-row{display:flex;gap:8px;margin-top:6px}
.link-row input{
  flex:1;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:14px;padding:12px;font-size:13px;direction:ltr;text-align:left;
}
.link-row a{
  display:grid;place-items:center;padding:0 16px;border-radius:14px;
  background:var(--surface-2);color:var(--text);text-decoration:none;font-weight:700;font-size:13px;
}