@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body.ogi-v3 {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #5A6A85;
  background:
    radial-gradient(circle at 12% 8%, rgba(81, 169, 227, 0.22), transparent 35%),
    radial-gradient(circle at 85% 0%, rgba(140, 189, 224, 0.26), transparent 40%),
    #f4f7f9;
}

body.ogi-v3.panel-preauth #app-container { visibility: hidden; }

.ogi-v3 .futur-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
}

.ogi-v3 ::-webkit-scrollbar { width: 6px; height: 6px; }
.ogi-v3 ::-webkit-scrollbar-track { background: transparent; }
.ogi-v3 ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.ogi-v3 ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.ogi-v3 .circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  max-height: 250px;
}
.ogi-v3 .circle-bg { fill: none; stroke: #E8F0F5; stroke-width: 3; }
.ogi-v3 .circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  animation: ogiProgress 1.5s ease-out forwards;
}
@keyframes ogiProgress { 0% { stroke-dasharray: 0 100; } }

.ogi-v3 .page-enter {
  animation: ogiFadeIn 0.3s ease-out forwards;
}
@keyframes ogiFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#ogi-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  transition: opacity 0.3s;
}
#ogi-toast.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
#ogi-toast.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

#ogi-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#ogi-modal-backdrop.open { display: flex; }
#ogi-modal {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-radius: 1rem;
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(0,0,0,.18);
}
#ogi-modal h3 { font-size: 1.125rem; font-weight: 600; color: #1e293b; margin-bottom: 1rem; }
#ogi-modal label { display: block; font-size: 0.8rem; font-weight: 500; color: #475569; margin-bottom: 0.25rem; }
#ogi-modal input, #ogi-modal select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
#ogi-modal .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
#ogi-modal .btn-cancel { padding: 0.5rem 1rem; border-radius: 0.5rem; background: #f1f5f9; color: #475569; }
#ogi-modal .btn-primary { padding: 0.5rem 1rem; border-radius: 0.5rem; background: #51A9E3; color: #fff; font-weight: 500; }

.ogi-v3 .empty-state { text-align: center; padding: 2rem; color: #94a3b8; }

.ogi-v3 .nav-side, .ogi-v3 .nav-icon {
  transition: all .18s ease;
}
.ogi-v3 .nav-side:hover, .ogi-v3 .nav-icon:hover {
  transform: translateY(-1px);
}