/* =====================================
   GLOBAL
===================================== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#f6f8fc;
  color:#111827;
  line-height:1.45;
}

/* =====================================
   APP WRAPPER
===================================== */
.app{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* =====================================
   TOPBAR
===================================== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.topbar h1{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:#111827;
}

.mini{
  width:100%;
  margin:0;
  font-size:13px;
  color:#6b7280;
}

/* =====================================
   BUTTONS
===================================== */
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.actions button{
  padding:10px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:#2563eb;
  color:#fff;
  font-size:14px;
  font-weight:600;
  transition:0.25s ease;
}

.actions button:hover{
  transform:translateY(-2px);
  opacity:.92;
}

.actions button:active{
  transform:translateY(0);
}

.pro-btn{
  background:#f59e0b !important;
  color:#111827 !important;
  font-weight:700;
}

.pro-btn:hover{
  opacity:.95;
}

/* =====================================
   MAIN GRID
===================================== */
.layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* =====================================
   CARD
===================================== */
.card{
  background:#ffffff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.card h2{
  margin-top:0;
  margin-bottom:16px;
  font-size:22px;
  color:#111827;
}

/* AI CARD HIGHLIGHT */
.layout .card:nth-child(2){
  border:2px solid #dbeafe;
}

/* =====================================
   FORM
===================================== */
label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:700;
  color:#374151;
}

input,
select{
  width:100%;
  padding:10px 12px;
  margin-bottom:14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  color:#111827;
  outline:none;
  transition:0.2s ease;
}

input:focus,
select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

/* =====================================
   RESULT ROW
===================================== */
.row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.row div{
  flex:1;
  min-width:140px;
  background:#f9fafb;
  padding:12px;
  border-radius:12px;
  font-weight:700;
  text-align:center;
}

/* =====================================
   RISK BAR
===================================== */
.bar{
  height:18px;
  background:#e5e7eb;
  border-radius:50px;
  overflow:hidden;
  margin-top:8px;
}

#riskBar{
  height:100%;
  width:0%;
  background:green;
  transition:0.4s ease;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-align:center;
  line-height:18px;
  white-space:nowrap;
}

/* =====================================
   TEXT BLOCKS
===================================== */
#score{
  margin-top:14px;
  font-size:16px;
  font-weight:800;
  color:#111827;
}

#aiText{
  margin-top:12px;
  font-size:14px;
  color:#4b5563;
  line-height:1.5;
}

#recommend{
  margin-top:14px;
  padding:12px;
  background:#f9fafb;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
}

/* =====================================
   MOBILE
===================================== */
@media (max-width:800px){

  .layout{
    grid-template-columns:1fr;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .actions{
    width:100%;
  }

  .actions button{
    flex:1 1 calc(50% - 8px);
  }

  .topbar h1{
    font-size:24px;
  }

}

/* =====================================
   SMALL MOBILE
===================================== */
@media (max-width:520px){

  .app{
    padding:14px;
  }

  .card{
    padding:16px;
  }

  .actions button{
    flex:1 1 100%;
  }

  input,
  select{
    font-size:16px;
    min-height:46px;
  }

  .topbar h1{
    font-size:22px;
  }

}






/* =====================================
V6 CSS ADDON
===================================== */

.explain-box{
  margin-top:16px;
  padding:16px;
  background:#f9fafb;
  border-radius:14px;
  border:1px solid #e5e7eb;
  font-size:14px;
  line-height:1.6;
}

.explain-box h3{
  margin-top:0;
  margin-bottom:10px;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:20px;
}

.modal.show{
  display:flex;
}

.modal-box{
  width:100%;
  max-width:650px;
  background:#fff;
  border-radius:18px;
  padding:18px;
  max-height:80vh;
  overflow:auto;
}

.modal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.modal-top h3{
  margin:0;
}

.modal-top button{
  border:none;
  background:#ef4444;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}

.save-row{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.save-row input{
  flex:1;
}

.save-row button{
  border:none;
  background:#2563eb;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}

.project-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  margin-bottom:10px;
}

.project-name{
  font-weight:700;
}

.project-meta{
  font-size:12px;
  color:#666;
  margin-top:4px;
}

.project-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.project-actions button{
  border:none;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
}

.load-btn{background:#16a34a;color:#fff;}
.edit-btn{background:#f59e0b;color:#111;}
.delete-btn{background:#ef4444;color:#fff;}

@media(max-width:700px){

  .save-row{
    flex-direction:column;
  }

  .project-item{
    grid-template-columns:1fr;
  }

}



@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* אלמנטים שיקבלו אנימציה */
.ai-animate {
  animation: fadeInUp 0.45s ease-out;
}

/* ריסט כדי לאפשר רענון אנימציה כל פעם */
.ai-reset {
  opacity: 0;
}



.ai-loader{
  display:none;
  margin-top:15px;
  padding:16px;
  background:#0b1220;
  color:#e5e7eb;
  border-radius:14px;
  font-size:13px;
  line-height:1.6;
  font-family: Arial;
}

.loader-title{
  font-weight:bold;
  margin-bottom:10px;
  color:#38bdf8;
}

.stream-text{
  min-height:60px;
  white-space:pre-line;
}

.cursor{
  display:inline-block;
  width:8px;
  background:#38bdf8;
  margin-left:3px;
  animation:blink 0.8s infinite;
}

@keyframes blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}







/* =====================================
   DARK MODE OVERRIDE
===================================== */

.dark body{
  background:#0b1220;
  color:#e5e7eb;
}

/* CARD */
.dark .card{
  background:#111827;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  color:#e5e7eb;
}

.dark .card h2{
  color:#f9fafb;
}

/* TOPBAR */
.dark .topbar h1{
  color:#f9fafb;
}

.dark .mini{
  color:#9ca3af;
}

/* INPUTS */
.dark input,
.dark select{
  background:#0f172a;
  border:1px solid #1f2937;
  color:#e5e7eb;
}

.dark input:focus,
.dark select:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,0.15);
}

/* ROW BOXES */
.dark .row div{
  background:#0f172a;
  color:#e5e7eb;
}

/* BAR */
.dark .bar{
  background:#1f2937;
}

/* TEXT */
.dark #score{
  color:#f9fafb;
}

.dark #aiText{
  color:#cbd5e1;
}

.dark #recommend{
  background:#0f172a;
  color:#e5e7eb;
}

/* EXPLAIN BOX */
.dark .explain-box{
  background:#0f172a;
  border:1px solid #1f2937;
}

/* MODAL */
.dark .modal-box{
  background:#0f172a;
  color:#e5e7eb;
}

/* PROJECT ITEMS */
.dark .project-item{
  border:1px solid #1f2937;
  background:#0f172a;
}

/* AI LOADER */
.dark .ai-loader{
  background:#020617;
  color:#e5e7eb;
}

/* BUTTONS (optional polish) */
.dark .actions button{
  background:#1d4ed8;
}

.dark .pro-btn{
  background:#f59e0b !important;
  color:#111827 !important;
}