/* UNMCG aplet — „Osna simetrija". CSS je scope-ovan pod .unmcg-applet
   da ne bi uticao na ostatak sajta. Bez eksternih biblioteka. */

.unmcg-applet{
  --navy:#0b2a4a; --navy-2:#123e68; --gold:#d6a84b; --gold-light:#f4e5b8;
  --bg:#f4f7fb; --card:#ffffff; --text:#132238; --muted:#667085;
  --border:#dbe3ee; --success:#1f7a4c; --danger:#b42318;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.unmcg-applet *{ box-sizing:border-box; }
.unmcg-applet-noscript{ background:#fdecea;color:#b3261e;border:1px solid #f3b7b1;border-radius:12px;padding:12px 16px;margin:0 0 16px;font-weight:600; }

.unmcg-applet .app{ width:min(1180px,100%); margin:0 auto; }

.unmcg-applet .hero{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff; border-radius:22px; padding:26px; position:relative; overflow:hidden;
}
.unmcg-applet .hero::after{
  content:"∠   π   √   ∑   ∆"; position:absolute; right:22px; bottom:-12px;
  font-size:52px; opacity:.08; letter-spacing:12px;
}
.unmcg-applet .hero h1{ margin:0 0 8px; font-size:clamp(28px,5vw,44px); color:#fff; }
.unmcg-applet .hero p{ margin:0; max-width:760px; color:rgba(255,255,255,.84); }

.unmcg-applet .badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);
  border-radius:999px; padding:7px 11px; color:var(--gold-light); font-size:14px; font-weight:700;
}

.unmcg-applet .layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; margin-top:18px; }
.unmcg-applet .panel{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:0 12px 35px rgba(11,42,74,.08); }
.unmcg-applet .canvas-wrap{ position:relative; }
.unmcg-applet svg#board{ display:block; width:100%; height:auto; min-height:440px; border:1px solid var(--border); border-radius:14px; background:#fff; touch-action:none; }

.unmcg-applet .controls{ display:grid; gap:16px; align-content:start; }
.unmcg-applet .control-group{ display:grid; gap:8px; }
.unmcg-applet label{ font-weight:700; font-size:14px; }
.unmcg-applet input[type="range"]{ width:100%; accent-color:var(--gold); }

.unmcg-applet .switch-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.unmcg-applet .switch-row:last-child{ border-bottom:none; }
.unmcg-applet input[type="checkbox"],.unmcg-applet input[type="radio"]{ accent-color:var(--navy); width:20px; height:20px; }

.unmcg-applet button{ border:0; border-radius:12px; padding:12px 14px; font-weight:800; cursor:pointer; transition:transform .15s ease,opacity .15s ease; min-height:44px; }
.unmcg-applet button:hover{ transform:translateY(-1px); }
.unmcg-applet button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.unmcg-applet .primary{ background:var(--navy); color:#fff; }
.unmcg-applet .secondary{ background:var(--gold); color:#1e2633; }
.unmcg-applet .ghost{ background:#edf2f7; color:var(--navy); }

.unmcg-applet .info-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.unmcg-applet .info-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:15px; }
.unmcg-applet .info-card strong{ display:block; color:var(--navy); margin-bottom:5px; }
.unmcg-applet .muted{ color:var(--muted); font-size:14px; }

.unmcg-applet .feedback{ margin-top:12px; padding:12px 14px; border-radius:12px; background:#eef5fb; color:var(--navy); border-left:4px solid var(--gold); font-weight:650; }

.unmcg-applet .quiz{ display:none; gap:10px; }
.unmcg-applet .quiz.active{ display:grid; }
.unmcg-applet .answer{ display:flex; gap:8px; align-items:flex-start; font-weight:500; }

.unmcg-applet .coord-box{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.unmcg-applet .coord-item{ background:#f7f9fc; border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:13px; }

@media (max-width:900px){
  .unmcg-applet .layout{ grid-template-columns:1fr; }
  .unmcg-applet .controls{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .unmcg-applet .controls .panel-section-full{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .unmcg-applet .app{ width:100%; }
  .unmcg-applet .hero,.unmcg-applet .panel{ border-radius:14px; }
  .unmcg-applet .hero{ padding:20px 16px; }
  .unmcg-applet .controls{ grid-template-columns:1fr; }
  .unmcg-applet .info-grid{ grid-template-columns:1fr; }
  .unmcg-applet svg#board{ min-height:330px; }
}