:root {
  --bg:#edf3fa;
  --card:#fff;
  --blue:#1845e8;
  --dark:#073a9e;
  --text:#17233a;
  --muted:#68758d;
  --line:#dae4f2;
  --ok:#14783f;
  --okbg:#e7f7ed;
  --warn:#8b5c00;
  --warnbg:#fff2cf;
  --error:#a22720;
  --errorbg:#ffefed;
}

* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}

.page {
  padding:26px 18px 60px;
}

.container {
  width:min(1380px,100%);
  margin:auto;
}

.header {
  margin-bottom:24px;
}

.kicker {
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  margin-bottom:7px;
}

h1 {
  margin:0;
  color:var(--dark);
  font-size:clamp(38px,5vw,60px);
}

.subtitle {
  color:var(--muted);
  font-size:17px;
  line-height:1.5;
  max-width:850px;
}

.models-card,
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 15px 45px rgba(20,40,90,.07);
}

.models-card {
  padding:22px;
  margin-bottom:26px;
}

.models-title h2 {
  margin:0 0 5px;
  color:var(--dark);
}

.models-title p {
  margin:0 0 17px;
  color:var(--muted);
}

.models-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.model-card {
  position:relative;
  padding:8px;
  background:#fff;
  border:2px solid #dce5f2;
  border-radius:18px;
  cursor:pointer;
}

.model-card.selected {
  border-color:var(--blue);
  box-shadow:0 10px 25px rgba(24,69,232,.15);
}

.model-thumb {
  overflow:hidden;
  aspect-ratio:1/1;
  border-radius:12px;
}

.model-thumb img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.model-name {
  text-align:center;
  padding:10px 2px 2px;
  font-weight:900;
  font-size:14px;
}

.model-check {
  display:none;
  position:absolute;
  right:13px;
  top:13px;
  width:30px;
  height:30px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:var(--blue);
  color:#fff;
  font-weight:900;
}

.model-card.selected .model-check {
  display:flex;
}

.workspace {
  display:grid;
  grid-template-columns:minmax(0,900px) minmax(330px,390px);
  gap:28px;
  align-items:start;
}

.preview {
  padding:14px;
}

.image-wrap {
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:18px;
  background:#e4eaf2;
}

#previewImage {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.panel {
  position:sticky;
  top:20px;
  padding:27px;
}

.panel h2 {
  margin:0;
  color:var(--dark);
  font-size:30px;
}

.description {
  color:var(--muted);
  line-height:1.5;
}

.status {
  padding:15px 16px;
  margin:18px 0;
  border-radius:15px;
  background:var(--okbg);
  color:var(--ok);
  font-weight:900;
  font-size:14px;
  line-height:1.45;
}

.status.warning {
  background:var(--warnbg);
  color:var(--warn);
}

.status.error {
  background:var(--errorbg);
  color:var(--error);
}

.upload,
.primary {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:62px;
  border-radius:15px;
  background:var(--blue);
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.upload {
  cursor:pointer;
}

.upload input {
  display:none;
}

.primary {
  margin-top:14px;
  border:0;
  cursor:pointer;
}

.primary:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.current-model {
  margin-top:18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f6f8fc;
}

.current-model small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  margin-bottom:5px;
}

.current-model strong {
  color:var(--dark);
}

@media(max-width:1100px) {
  .models-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .workspace {
    grid-template-columns:1fr;
  }

  .panel {
    position:static;
  }
}

@media(max-width:700px) {
  .page {
    padding:13px 8px 40px;
  }

  .models-card {
    padding:13px;
  }

  .models-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .preview {
    padding:7px;
  }

  .panel {
    padding:18px;
  }
}