:root {
  --bg: #f6f3ed;
  --paper: #fffdf8;
  --paper-2: #fbf7ef;
  --text: #18333a;
  --muted: #617278;
  --green: #07565d;
  --green-2: #0b737c;
  --gold: #b48a3a;
  --border: rgba(7, 86, 93, 0.14);
  --shadow: 0 24px 60px rgba(20, 42, 48, 0.12);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 85% 0%, rgba(180, 138, 58, 0.16), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(7, 86, 93, 0.12), transparent 34%),
    linear-gradient(180deg, #faf7f0 0%, #f3efe7 100%);
  color: var(--text);
}
button, input, select { font: inherit; }
.page { width: min(1040px, calc(100% - 32px)); margin: 28px auto; }
.card { position: relative; overflow: hidden; background: rgba(255, 253, 248, 0.96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero { position: relative; padding: 30px 28px 24px; display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; border-bottom: 1px solid rgba(7, 86, 93, 0.10); background: linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(251, 247, 239, 0.95)); }
.logo-wrap { width: 140px; height: 140px; border-radius: 34px; background: #fff; border: 1px solid rgba(180, 138, 58, 0.22); display: grid; place-items: center; box-shadow: 0 18px 36px rgba(20, 42, 48, 0.10); padding: 10px; }
.logo-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 26px; }
.hero-text { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(7, 86, 93, 0.08); color: var(--green); border: 1px solid rgba(7, 86, 93, 0.12); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; margin-bottom: 14px; white-space: nowrap; }
h1 { margin: 0; color: #102f35; font-size: clamp(26px, 4.7vw, 42px); line-height: 1.45; letter-spacing: -0.6px; }
.lead { max-width: 680px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 2; }
.content { padding: 26px 28px 28px; }
.upload-box { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; width: 100%; min-height: 116px; padding: 22px; border-radius: 24px; border: 1.5px dashed rgba(7, 86, 93, 0.34); background: linear-gradient(135deg, rgba(7, 86, 93, 0.055), rgba(180, 138, 58, 0.06)), #fffdf8; cursor: pointer; transition: 0.18s ease; }
.upload-box:hover, .upload-box.is-drag { border-color: var(--green-2); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(7, 86, 93, 0.10); }
.upload-box input { display: none; }
.upload-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 28px; font-weight: 900; line-height: 1; box-shadow: 0 12px 22px rgba(7, 86, 93, 0.20); }
.upload-title { display: block; margin-bottom: 5px; color: #12343a; font-size: 18px; font-weight: 900; line-height: 1.8; }
.upload-text { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 14px; }
.field { min-width: 0; background: #fff; border: 1px solid rgba(7, 86, 93, 0.12); border-radius: 20px; padding: 15px; box-shadow: 0 10px 24px rgba(20, 42, 48, 0.045); }
.field label { display: block; margin-bottom: 9px; color: #17383e; font-size: 13px; font-weight: 900; }
.hint { display: block; margin-top: 8px; color: #79878b; font-size: 12px; line-height: 1.7; }
input[type="range"], input[type="number"], input[type="text"], select { width: 100%; min-height: 45px; border: 1px solid rgba(7, 86, 93, 0.18); background: #fffcf7; border-radius: 14px; color: #162f35; outline: none; padding: 10px 12px; transition: 0.16s; }
input[type="range"] { min-height: 28px; padding: 0; accent-color: var(--green-2); }
input:focus, select:focus { border-color: var(--green-2); background: #fff; box-shadow: 0 0 0 4px rgba(11, 115, 124, 0.10); }
.file-field { margin-top: 14px; }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; align-items: center; }
.btn { min-height: 52px; border: 0; border-radius: 16px; padding: 14px 20px; cursor: pointer; font-weight: 900; transition: 0.16s; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--green-2), var(--green)); box-shadow: 0 16px 30px rgba(7, 86, 93, 0.22); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(7, 86, 93, 0.28); }
.btn-primary:disabled { background: #aeb8ba; box-shadow: none; cursor: not-allowed; }
.btn-light { color: var(--green); background: #fff; border: 1px solid rgba(7, 86, 93, 0.18); box-shadow: none; white-space: nowrap; }
.preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 20px; }
.item { min-width: 0; background: #fff; border: 1px solid rgba(7, 86, 93, 0.12); border-radius: 18px; padding: 8px; box-shadow: 0 10px 22px rgba(20, 42, 48, 0.05); }
.item img { width: 100%; aspect-ratio: 1 / 0.78; object-fit: cover; border-radius: 13px; display: block; background: #f3f0ea; }
.item span { display: block; margin-top: 8px; color: #68787c; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: ltr; text-align: left; }
.status { min-height: 28px; margin-top: 16px; color: var(--green); text-align: center; font-weight: 900; line-height: 1.9; }
.about { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 22px 28px 26px; background: var(--paper-2); border-top: 1px solid rgba(7, 86, 93, 0.10); }
.about-title { margin-bottom: 5px; color: #12343a; font-weight: 900; font-size: 15px; }
.about-text { color: var(--muted); font-size: 13.5px; line-height: 2; }
.links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; max-width: 410px; }
.links a, .links span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(7, 86, 93, 0.14); color: var(--green); text-decoration: none; font-size: 12.5px; font-weight: 800; direction: ltr; white-space: nowrap; }
@media (max-width: 820px) {
  .page { width: min(100% - 22px, 640px); margin: 12px auto; }
  .card { border-radius: 24px; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 24px 18px 22px; }
  .logo-wrap { width: 112px; height: 112px; border-radius: 28px; }
  .logo-wrap img { border-radius: 22px; }
  .eyebrow { margin-bottom: 10px; font-size: 12px; }
  .lead { margin-inline: auto; font-size: 14px; line-height: 1.95; }
  .content { padding: 18px; }
  .upload-box { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 16px; }
  .settings { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .actions { grid-template-columns: 1fr; }
  .btn-light { width: 100%; }
  .preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: 1fr; text-align: center; padding: 20px 18px 22px; }
  .links { justify-content: center; max-width: 100%; }
}
@media (max-width: 440px) {
  .page { width: 100%; margin: 0; }
  .card { min-height: 100vh; border-radius: 0; border-inline: 0; }
  .hero { padding-top: 18px; }
  .logo-wrap { width: 94px; height: 94px; }
  h1 { font-size: 25px; }
  .lead { font-size: 13.5px; }
  .upload-title { font-size: 17px; }
  .field { padding: 13px; border-radius: 17px; }
  .links a, .links span { width: 100%; justify-content: center; }
}