
:root{
  --green:#007B5F;
  --green-dark:#005c47;
  --yellow:#FED141;
  --gold:#85714D;
  --text:#14211d;
  --muted:#5d716b;
  --bg:#f5f8f7;
  --border:#d7e5e0;
  --danger:#a51e2d;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff,var(--bg))}
.container{max-width:1240px;margin:0 auto;padding:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 14px 36px rgba(0,0,0,.08);margin-bottom:20px}
.hero{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#fff,#eff8f4);border-top:8px solid var(--green)}
.logo-marker{width:150px;height:150px;object-fit:contain;border:1px solid var(--border);border-radius:14px;background:#fff;padding:8px}
.alert{border-left:8px solid var(--yellow)}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
h1,h2,h3{margin-top:0}
h1{color:var(--green)}
p,li{line-height:1.55}
label{display:block;font-weight:800;margin:14px 0 8px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff}
small{display:block;margin-top:6px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
button,.button-link{appearance:none;border:0;border-radius:999px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
button{background:#e9f1ee;color:var(--text)}
button.primary,.button-link{background:var(--green);color:#fff}
button.primary:hover,.button-link:hover{background:var(--green-dark)}
.button-link.gold{background:var(--gold);color:#fff}
.disabled{opacity:.5;pointer-events:none}
.status{margin-top:14px;min-height:28px;font-weight:800}
.status.ok{color:#147a57}
.status.error{color:var(--danger)}
.status.warn{color:#936c00}
.hidden{display:none!important}
.preview-wrap{margin-top:16px}
.preview{max-width:100%;max-height:260px;border:1px solid var(--border);border-radius:16px;background:#fff;display:block;margin-bottom:12px}
.preview-frame{width:100%;min-height:360px;border:1px solid var(--border);border-radius:16px;background:#fff}
.one-preview{min-height:340px;display:flex;align-items:center;justify-content:center;background:#fafcfc;border:1px dashed var(--border);border-radius:18px;padding:16px;text-align:center}
.one-preview img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border);background:#fff}
.important{background:#fff8d7;border-left:6px solid var(--yellow);padding:14px;border-radius:12px;font-weight:800}
code{background:#f0f4f3;padding:2px 6px;border-radius:6px}
@media(max-width:1000px){.grid{grid-template-columns:1fr}.hero{align-items:flex-start}.logo-marker{width:100px;height:100px}}


.dual-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.preview-card{border:1px solid var(--border);border-radius:18px;padding:16px;background:#fafcfc}
.preview-card h3{margin:0 0 10px;color:var(--green)}
.preview-box{min-height:270px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed var(--border);border-radius:16px;padding:12px;text-align:center}
.preview-box img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#fff}
.mode-note{font-size:.95rem;color:var(--muted);margin-top:8px}
.hidden-render{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1000px){.dual-preview-grid{grid-template-columns:1fr}}


.marker-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.marker-card{border:1px solid #d7e5e0;border-radius:18px;padding:16px;background:#fff}
.marker-card img{width:100%;height:auto;border-radius:12px;border:1px solid #d7e5e0;background:#fff;margin:10px 0}
.marker-card .actions{display:flex;flex-wrap:wrap;gap:8px}
.marker-card .actions a{flex:1 1 auto;text-align:center}
@media(max-width:1000px){.marker-card-grid{grid-template-columns:1fr}}


.marker-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0 8px}
.marker-picker-card{border:2px solid #d7e5e0;border-radius:18px;padding:14px;background:#fff;cursor:pointer;transition:all .18s ease;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.marker-picker-card:hover{transform:translateY(-2px);border-color:#007B5F;box-shadow:0 8px 18px rgba(0,123,95,.12)}
.marker-picker-card.selected{border-color:#007B5F;box-shadow:0 0 0 4px rgba(0,123,95,.12);background:#f7fcfa}
.marker-picker-card h4{margin:0 0 6px;color:#007B5F}
.marker-picker-card p{margin:0 0 10px;font-size:.95rem;color:#5d716b;min-height:44px}
.marker-picker-card img{width:100%;height:auto;border:1px solid #d7e5e0;border-radius:12px;background:#fff;min-height:220px;object-fit:contain;padding:8px}
.marker-preview-large{margin-top:14px;padding:16px;border:1px solid #d7e5e0;border-radius:18px;background:#fff}
.marker-preview-large h3{margin:0 0 10px;color:#007B5F}
.marker-preview-large img{display:block;max-width:100%;width:min(520px,100%);margin:0 auto;border:1px solid #d7e5e0;border-radius:14px;background:#fff;padding:10px}
.marker-preview-caption{margin-top:10px;text-align:center;color:#5d716b;font-size:.95rem}
@media(max-width:1000px){.marker-picker-grid{grid-template-columns:1fr}}


.marker-picker-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%)}
.marker-picker-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,123,95,.04),rgba(254,209,65,.07));opacity:0;transition:opacity .18s ease;pointer-events:none}
.marker-picker-card:hover::before,.marker-picker-card.selected::before{opacity:1}
.marker-picker-card.selected{border-color:#007B5F;box-shadow:0 0 0 4px rgba(0,123,95,.14),0 14px 30px rgba(0,123,95,.14);background:linear-gradient(180deg,#ffffff 0%,#f6fcfa 100%)}
.marker-picker-card.selected img{border-color:#007B5F}
.marker-selected-badge{position:absolute;top:12px;right:12px;display:none;padding:6px 10px;border-radius:999px;background:#007B5F;color:#fff;font-weight:800;font-size:.82rem;box-shadow:0 8px 18px rgba(0,123,95,.22)}
.marker-picker-card.selected .marker-selected-badge{display:inline-flex;align-items:center;gap:6px}
.marker-picker-card.selected h4{color:#005b46}
.marker-preview-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.marker-preview-pill,.marker-preview-status{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:.88rem;font-weight:800}
.marker-preview-pill{background:#eef7f3;color:#007B5F}
.marker-preview-status{background:#fff6d6;color:#7a6116;border:1px solid #f1d56b}
.marker-preview-large{box-shadow:0 10px 24px rgba(0,0,0,.05)}
.marker-preview-large img{box-shadow:0 12px 26px rgba(0,0,0,.08)}


.premium-helper{margin:.25rem 0 1rem;color:#5d716b}
.marker-picker-grid{perspective:1200px}
.marker-picker-card{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.marker-picker-card::after{content:"";position:absolute;inset:auto -40% -55% auto;width:180px;height:180px;background:radial-gradient(circle, rgba(254,209,65,.25), rgba(254,209,65,0));transform:rotate(12deg);pointer-events:none}
.marker-picker-card:hover{transform:translateY(-6px) scale(1.01)}
.marker-picker-card.selected{transform:translateY(-4px) scale(1.015)}
.marker-card-title{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.marker-card-title h4{margin:0}
.marker-card-icon{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;background:linear-gradient(135deg,#007B5F,#159878);color:#fff;box-shadow:0 10px 20px rgba(0,123,95,.18)}
.marker-picker-card[data-marker="inter"] .marker-card-icon{background:linear-gradient(135deg,#007B5F,#FED141);color:#14211d}
.marker-picker-card[data-marker="hiro"] .marker-card-icon{background:linear-gradient(135deg,#14211d,#007B5F)}
.marker-picker-card img{transition:transform .22s ease, box-shadow .22s ease}
.marker-picker-card:hover img,.marker-picker-card.selected img{transform:scale(1.02);box-shadow:0 12px 22px rgba(0,0,0,.08)}
.marker-selected-badge{letter-spacing:.02em}
.marker-preview-large{background:linear-gradient(180deg,#ffffff 0%, #fbfdfc 100%)}
.marker-preview-large img{transition:transform .22s ease}
.marker-preview-large:hover img{transform:scale(1.01)}


.institution-subtitle{margin:.35rem 0 0;color:#007B5F;font-weight:800;font-size:1.05rem;letter-spacing:.01em}
.hero.card h1{line-height:1.15}
