:root{font-family:system-ui,sans-serif;background:#f4f7ff;color:#1d2840}body{margin:0}body.dark{background:#101827;color:#e5e7eb}header{background:#6366f1;color:white;padding:16px 5%;display:flex;gap:12px;align-items:center}header b{font-size:24px;margin-right:auto}main{max-width:1180px;margin:30px auto;padding:0 18px}.card{background:white;color:#1d2840;border-radius:15px;padding:24px;margin:20px 0;box-shadow:0 5px 25px #0001}body.dark .card{background:#1e293b;color:#e5e7eb}.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tools{display:flex;gap:8px;flex-wrap:wrap}button,input{padding:10px;border-radius:8px;border:1px solid #cbd5e1}button{cursor:pointer;background:#eef2ff;color:#3730a3;font-weight:650}input{max-width:100%;margin:5px}#auth{max-width:460px;margin:60px auto}#auth input{display:block;width:95%}canvas{width:100%;height:auto;background:white;max-height:650px;object-fit:contain;border:1px dashed #94a3b8;touch-action:none}.file{padding:8px;border-bottom:1px solid #cbd5e1;display:flex;gap:6px;align-items:center;justify-content:space-between;overflow-wrap:anywhere}.file button{font-size:12px}#msg{position:sticky;bottom:10px;color:#fff;background:#4338ca;padding:10px;border-radius:8px;display:none}@media(max-width:750px){.cols{grid-template-columns:1fr}}

/* FileStudio responsive editor */
canvas {
  max-width: 100%;
  height: auto;
}

.editor-panel,
.preview-panel {
  min-width: 0;
  overflow: auto;
}

.editor-panel img,
.preview-panel img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.zoom-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.zoom-tools button{padding:7px 13px;cursor:pointer}
.zoom-tools span{min-width:46px;text-align:center}
.zoom-scroll{width:100%;max-height:650px;min-height:180px;overflow:auto;border:1px solid #cbd5e1;border-radius:8px;padding:6px;box-sizing:border-box}
.zoom-scroll canvas{display:block;max-width:none}

/* Full-screen editing workspace */
body.fs-editor-active { overflow: hidden; }

.fs-editor-active #edit-scroll {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 60px 16px 16px;
  box-sizing: border-box;
  background: #172033;
  border: 0;
  border-radius: 0;
  overflow: auto;
  text-align: center;
}

.fs-editor-active #edit-scroll canvas {
  margin: 0 auto;
}

#fs-close {
  position: fixed;
  top: 12px;
  right: 18px;
  z-index: 10001;
  display: none;
  padding: 10px 18px;
  background: white;
  color: #111827;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.fs-editor-active #fs-close { display: block; }

.pro-link {
  display: inline-block;
  padding: 13px 22px;
  background: #4f46e5;
  color: white;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  margin: 12px 0 20px;
}
.pro-link:hover { background: #3730a3; }