/* Watermark Studio — all rules scoped under .wms-app so nothing leaks into the theme */
.wms-app{
  --wms-bg:#0f1115; --wms-panel:#171a21; --wms-panel2:#1e222b; --wms-border:#2a2f3a;
  --wms-text:#e8eaed; --wms-muted:#9aa0ab; --wms-accent:#6c8cff; --wms-accent2:#8f6cff;
  --wms-good:#3ecf8e; --wms-radius:12px;

  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--wms-bg),#12151c);
  color:var(--wms-text);
  border-radius:var(--wms-radius);
  padding:8px 0 24px;
}
.wms-app, .wms-app *{ box-sizing:border-box; }

.wms-app .wms-header{ padding:24px 32px 8px; text-align:center; }
.wms-app .wms-header h1{
  margin:0; font-size:26px; font-weight:700;
  background:linear-gradient(90deg,var(--wms-accent),var(--wms-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wms-app .wms-header p{ color:var(--wms-muted); margin:6px 0 0; font-size:14px; }

.wms-app .layout{
  display:grid; grid-template-columns:340px 1fr; gap:20px;
  max-width:1300px; margin:20px auto; padding:0 20px 40px;
}
@media (max-width:900px){ .wms-app .layout{ grid-template-columns:1fr; } }

.wms-app .panel{
  background:var(--wms-panel); border:1px solid var(--wms-border); border-radius:var(--wms-radius);
  padding:18px; height:fit-content;
}
.wms-app .panel h2{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--wms-muted); margin:0 0 14px; }
.wms-app .field{ margin-bottom:14px; }
.wms-app .field label{ display:block; font-size:13px; color:var(--wms-muted); margin-bottom:6px; }

.wms-app input[type=text],
.wms-app input[type=number],
.wms-app select,
.wms-app textarea{
  width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--wms-border);
  background:var(--wms-panel2); color:var(--wms-text); font-size:14px;
}
.wms-app input[type=range]{ width:100%; }

.wms-app .row{ display:flex; gap:10px; }
.wms-app .row > *{ flex:1; }

.wms-app .seg{
  display:flex; background:var(--wms-panel2); border:1px solid var(--wms-border); border-radius:8px; overflow:hidden;
}
.wms-app .seg button{
  flex:1; padding:8px 6px; background:transparent; border:none; color:var(--wms-muted);
  cursor:pointer; font-size:13px; transition:.15s;
}
.wms-app .seg button.active{ background:var(--wms-accent); color:#fff; }

.wms-app .posgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px; }
.wms-app .posgrid button{
  aspect-ratio:1; background:var(--wms-panel2); border:1px solid var(--wms-border); border-radius:6px;
  cursor:pointer; position:relative;
}
.wms-app .posgrid button .dot{
  width:6px; height:6px; border-radius:50%; background:var(--wms-muted); position:absolute;
}
.wms-app .posgrid button.active{ border-color:var(--wms-accent); }
.wms-app .posgrid button.active .dot{ background:var(--wms-accent); }

.wms-app .valline{ display:flex; justify-content:space-between; font-size:12px; color:var(--wms-muted); }

.wms-app .drop{
  border:2px dashed var(--wms-border); border-radius:var(--wms-radius); padding:26px 14px;
  text-align:center; cursor:pointer; color:var(--wms-muted); transition:.15s; background:var(--wms-panel2);
}
.wms-app .drop.drag{ border-color:var(--wms-accent); color:var(--wms-text); background:#1a2030; }
.wms-app .drop b{ color:var(--wms-text); }

.wms-app button.btn{
  padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:600; font-size:14px;
}
.wms-app .btn-primary{ background:linear-gradient(90deg,var(--wms-accent),var(--wms-accent2)); color:#fff; width:100%; }
.wms-app .btn-secondary{ background:var(--wms-panel2); color:var(--wms-text); border:1px solid var(--wms-border); }
.wms-app .btn-ghost{ background:transparent; color:var(--wms-muted); border:1px solid var(--wms-border); }

.wms-app .grid-images{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.wms-app .card{ background:var(--wms-panel2); border:1px solid var(--wms-border); border-radius:10px; overflow:hidden; }
.wms-app .card canvas{
  width:100%; display:block;
  background:repeating-conic-gradient(#22262f 0% 25%, #1a1d24 0% 50%) 50% / 14px 14px;
}
.wms-app .card .meta{ padding:8px 10px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.wms-app .card .meta span{ font-size:12px; color:var(--wms-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wms-app .card .meta button{ background:none; border:none; color:var(--wms-accent); cursor:pointer; font-size:12px; padding:4px 6px; }
.wms-app .card .meta .close{ color:#ff6b6b; }

.wms-app .toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.wms-app .toolbar .spacer{ flex:1; }

.wms-app .empty{
  color:var(--wms-muted); text-align:center; padding:60px 20px; border:1px dashed var(--wms-border);
  border-radius:var(--wms-radius);
}

.wms-app .colorwrap{ display:flex; gap:8px; align-items:center; }
.wms-app .colorwrap input[type=color]{
  width:38px; height:38px; border:1px solid var(--wms-border); border-radius:8px; padding:2px; background:var(--wms-panel2);
}

.wms-app .badge{
  display:inline-block; font-size:11px; background:var(--wms-panel); border:1px solid var(--wms-border);
  color:var(--wms-muted); padding:2px 8px; border-radius:999px;
}

.wms-app ::-webkit-scrollbar{ width:8px; height:8px; }
.wms-app ::-webkit-scrollbar-thumb{ background:var(--wms-border); border-radius:4px; }

.wms-app .stepper{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.wms-app .stepper button{
  width:32px; height:32px; flex-shrink:0; border-radius:8px; border:1px solid var(--wms-border);
  background:var(--wms-panel2); color:var(--wms-text); font-size:16px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.wms-app .stepper button:hover{ border-color:var(--wms-accent); color:var(--wms-accent); }
.wms-app .stepper input[type=number]{ width:100%; text-align:center; padding:7px 4px; }
.wms-app .stepper input[type=number]::-webkit-inner-spin-button,
.wms-app .stepper input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }