.moontr-widget {font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; border-radius:16px; padding:16px; background:#0f1220; color:#e9ecff; box-shadow:0 6px 24px rgba(0,0,0,.25);}
.moontr-widget.light {background:#ffffff; color:#111827; box-shadow:0 6px 24px rgba(0,0,0,.08);}
.moontr-header {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.moontr-title {font-size:18px; font-weight:700;}
.moontr-controls {display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.moontr-controls select, .moontr-controls button, .moontr-controls input[type="checkbox"] {font-size:14px; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.15); color:inherit;}
.moontr-widget.light .moontr-controls select, .moontr-widget.light .moontr-controls button {border-color:#e5e7eb; background:#f9fafb; color:#111827;}
.moontr-controls button {cursor:pointer}
.moontr-panels {display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:900px){ .moontr-panels{ grid-template-columns:1fr 1fr 1fr; } }
.moontr-card {background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:12px; border-radius:14px;}
.moontr-widget.light .moontr-card {background:#ffffff; border:1px solid #e5e7eb;}
.moontr-card-title{font-weight:600; margin-bottom:8px;}
.moontr-grid {display:grid; grid-template-columns: 140px 1fr; gap:6px 10px; align-items:center; font-size:14px;}
.moontr-row-key{opacity:.8}
.moontr-row-val{font-variant-numeric:tabular-nums}
.moontr-footer{display:flex; justify-content:space-between; font-size:12px; opacity:.8; margin-top:8px}
.moontr-badge{display:inline-flex; gap:8px; align-items:center; font-weight:600; }
.moontr-phase-icon{width:48px; height:48px; border-radius:999px; background:radial-gradient(circle at 60% 50%, rgba(255,255,255,.95), rgba(255,255,255,.6) 50%, transparent 52%), radial-gradient(circle at 40% 50%, transparent 0, transparent 50%, rgba(0,0,0,.7) 52%); box-shadow:inset 0 0 10px rgba(0,0,0,.6);}
.moontr-widget.light .moontr-phase-icon{box-shadow:inset 0 0 10px rgba(0,0,0,.2);}
.moontr-row-val .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.moontr-compare-toggle {display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.15);}
.moontr-widget.light .moontr-compare-toggle {border-color:#e5e7eb; background:#f9fafb;}
.moontr-hint{opacity:.8; font-size:12px; grid-column: span 2 / span 2;}


.moontr-card-visual .moontr-visual-wrap{display:flex; gap:14px; align-items:center; justify-content:center; min-height:240px;}
.moontr-canvas{border-radius:999px; background:radial-gradient(circle at 50% 48%, rgba(255,255,255,.9), rgba(255,255,255,.7) 55%, rgba(0,0,0,.35) 58%, rgba(0,0,0,.8) 100%); box-shadow:inset 0 0 20px rgba(0,0,0,.6);}
.moontr-widget.light .moontr-canvas{box-shadow:inset 0 0 8px rgba(0,0,0,.25);}
.moontr-visual-text{display:flex; flex-direction:column; gap:6px; min-width:140px;}
.moontr-visual-phase{font-weight:600; font-size:16px;}
.moontr-visual-pct{opacity:.9; font-variant-numeric:tabular-nums}
.moontr-grid-phases {grid-template-columns: 1fr 1fr;}
.moontr-grid-phases .moontr-row-key{opacity:.85}
.moontr-grid-phases .moontr-row-val{justify-self:end}
@media(max-width:899px){
  .moontr-card-visual .moontr-visual-wrap{flex-direction:column;}
}