/* Watermark Studio — Forest & Brass */
:root{
  --forest:#1f4636; --forest-mid:#2b5c47; --forest-dark:#163226;
  --brass:#caa544; --brass-dark:#a9821f;
  --paper:#f5efe0; --paper-alt:#efe7d4; --card:#fffdf6;
  --ink:#2b2620; --ink-soft:#5a5246; --line:#ddd3ba;
  --radius:16px; --shadow:0 10px 30px rgba(43,38,32,.12);
  --ease:cubic-bezier(.2,.9,.3,1.1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans Arabic',-apple-system,'Segoe UI',sans-serif;
  line-height:1.9; min-height:100dvh; display:flex; flex-direction:column;
}
h1,h2,h3{line-height:1.3; margin:0}
button{font:inherit; cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) clamp(16px,4vw,32px) 10px;
  background:rgba(245,239,224,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{display:grid; place-items:center}
.brand h1{font-size:1.15rem; font-weight:700; color:var(--forest)}
.brand h1 .ar{color:var(--brass-dark); font-weight:500}
.tagline{margin:0; font-size:.82rem; color:var(--ink-soft)}

.ghost{
  background:transparent; border:1px solid var(--line); color:var(--forest-mid);
  padding:.45em 1em; border-radius:999px; font-size:.85rem; transition:all .2s;
}
.ghost:hover{background:var(--paper-alt)}
.ghost.small{padding:.25em .8em; font-size:.8rem}

main{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:clamp(16px,3vw,28px) clamp(14px,3vw,28px) calc(16px + env(safe-area-inset-bottom))}

/* Upload */
.drop{
  border:2px dashed var(--brass-dark); border-radius:var(--radius);
  background:var(--card); padding:clamp(28px,6vw,60px) 20px; text-align:center;
  cursor:pointer; transition:transform .2s var(--ease), border-color .2s, background .2s;
  outline:none;
}
.drop:hover,.drop:focus-visible{border-color:var(--brass); background:#fffcf0; transform:translateY(-2px)}
.drop.dragover{border-color:var(--forest); background:var(--paper-alt)}
.drop-inner{display:flex; flex-direction:column; align-items:center; gap:6px}
.drop-icon{margin-bottom:10px}
.drop h2{font-size:1.3rem; color:var(--forest)}
.drop p{margin:0; color:var(--ink-soft)}
.sample-line{margin-top:8px !important}
.linklike{background:none;border:none;color:var(--brass-dark);text-decoration:underline;font-size:.85rem;padding:4px}

/* Buttons */
.primary{
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest-mid) 100%);
  color:#fdf9ec; border:none; border-radius:999px;
  padding:.7em 1.6em; font-size:.95rem; font-weight:600;
  box-shadow:0 6px 18px rgba(31,70,54,.35);
  transition:transform .15s var(--ease), box-shadow .2s;
}
.primary:hover{transform:translateY(-1px); box-shadow:0 9px 22px rgba(31,70,54,.4)}
.primary:active{transform:translateY(0)}
.primary.big{
  width:100%; padding:1em; font-size:1.05rem; display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:14px;
}
.primary.big svg{flex:none}

/* Workspace */
.workspace{display:grid; gap:20px; margin-top:4px}
.preview-pane{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow); position:sticky; top:76px; align-self:start;
}
.canvas-wrap{
  display:grid; place-items:center; background:
    repeating-conic-gradient(#e8e0cc 0% 25%, #f6f0e0 0% 50%) 0 0 / 20px 20px;
  border-radius:12px; overflow:hidden; min-height:220px;
}
.canvas-wrap canvas{max-width:100%; max-height:62vh; height:auto; border-radius:6px; display:block; box-shadow:0 2px 8px rgba(0,0,0,.18)}
.preview-meta{margin:.7em 0 0; font-size:.8rem; color:var(--ink-soft); text-align:center}

/* Controls */
.controls{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.controls-head{display:flex; align-items:center; justify-content:space-between}
.controls-head h3{color:var(--forest); font-size:1rem}
.field{display:flex; flex-direction:column; gap:8px}
.field-label{font-size:.82rem; font-weight:600; color:var(--ink-soft); letter-spacing:.01em}
input[type=text]{
  font:inherit; padding:.6em .9em; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); width:100%;
}
input[type=text]:focus{outline:2px solid var(--forest-mid); border-color:transparent}
input[type=range]{accent-color:var(--forest-mid); width:100%; height:28px; margin:0}
.range-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.range-row label{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-soft)}
.range-row output{min-width:34px; text-align:center; font-variant-numeric:tabular-nums; color:var(--forest-mid); font-weight:600}
.range-label{display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; color:var(--ink-soft); font-weight:600}
.range-label output{color:var(--forest-mid); font-variant-numeric:tabular-nums}

.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; background:var(--paper-alt); padding:5px; border-radius:12px}
.seg button{
  border:none; background:transparent; border-radius:9px; padding:.5em 0;
  color:var(--ink-soft); font-weight:600; font-size:.85rem; transition:all .15s var(--ease);
}
.seg button.on{background:var(--forest); color:#fdf9ec; box-shadow:0 3px 10px rgba(31,70,54,.35)}
.seg button:not(.on):hover{background:#fff}

.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.color-field input[type=color]{
  width:44px; height:38px; border:1px solid var(--line); border-radius:10px; padding:3px;
  background:#fff; cursor:pointer;
}
.check{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink)}
.check input{accent-color:var(--forest-mid); width:17px; height:17px}
.select-wrap{flex:1; min-width:120px}
.select-wrap select{
  width:100%; font:inherit; font-size:.85rem; padding:.5em .6em; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink);
}

.actions{margin-top:2px}
.export-info{min-height:1.4em; margin:.6em 0 0; font-size:.8rem; color:var(--ink-soft); text-align:center}

/* Footer */
footer{border-top:1px solid var(--line); background:var(--paper-alt); padding:18px clamp(16px,4vw,32px) calc(18px + env(safe-area-inset-bottom)); text-align:center}
.motif{height:10px; margin-bottom:10px; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12'%3E%3Cg fill='none' stroke='%23a9821f' stroke-width='1'%3E%3Cpath d='M6 1 L11 6 L6 11 L1 6 Z'/%3E%3Cpath d='M22 1 L27 6 L22 11 L17 6 Z'/%3E%3Cpath d='M38 1 L43 6 L38 11 L33 6 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size:44px 12px}
footer p{margin:0; font-size:.82rem; color:var(--ink-soft)}
.foot-note{font-size:.72rem; opacity:.75; margin-top:4px !important}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%,140%);
  background:var(--forest-dark); color:#fdf9ec; padding:.7em 1.4em; border-radius:999px;
  font-size:.88rem; box-shadow:var(--shadow); opacity:0; transition:all .35s var(--ease); z-index:50; max-width:92vw; text-align:center;
}
.toast.show{transform:translate(-50%,0); opacity:1}

/* Desktop */
@media (min-width:920px){
  .workspace{grid-template-columns:1fr 400px}
  .drop{padding:70px 20px}
}

@media (max-width:919px){
  .actions button.primary.big{position:sticky; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:15}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}