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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:Inter,sans-serif;
  background:#1a1a1a;
  color:#ddd;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:2rem 1rem;
  position:relative;
  overflow-x:hidden;
}

.ledger-bg{
  position:fixed;inset:0;z-index:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(255,255,255,.02) 28px,rgba(255,255,255,.02) 29px),
    radial-gradient(ellipse at 20% 50%,rgba(180,220,120,.06),transparent 60%),
    radial-gradient(ellipse at 80% 50%,rgba(120,180,220,.06),transparent 60%);
  pointer-events:none;
}

.app{position:relative;z-index:1;max-width:1100px;width:100%}

.header{text-align:center;margin-bottom:1.5rem;border-bottom:2px solid #3a3a3a;padding-bottom:1rem}
.header-top{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}
.header h1{font-family:'JetBrains Mono',monospace;font-size:clamp(1.2rem,3vw,1.8rem);color:#b8d98c;letter-spacing:2px}
.badge{font-size:.7rem;padding:2px 10px;border:1px solid #555;border-radius:20px;color:#888;font-family:'JetBrains Mono',monospace}
.motto{font-size:.85rem;color:#666;margin-top:.3rem;font-style:italic}

.nav-btn{
  background:transparent;color:#888;
  border:1px solid #444;border-radius:8px;
  padding:.3rem .75rem;font-size:.75rem;
  cursor:pointer;font-family:'JetBrains Mono',monospace;
  transition:all .25s;
}
.nav-btn:hover{border-color:#b8d98c;color:#b8d98c}
.present-btn{background:rgba(180,220,120,.08);border-color:#4a6a3a;color:#b8d98c}
.present-btn:hover{background:rgba(180,220,120,.15)}

.dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.stat{
  background:rgba(255,255,255,.04);border:1px solid #333;border-radius:12px;
  padding:.6rem 1rem;display:flex;align-items:center;gap:.6rem;
  font-size:.75rem;font-family:'JetBrains Mono',monospace;
}
.stat span:first-child{color:#aaa;white-space:nowrap}
.bar{flex:1;height:8px;background:#2a2a2a;border-radius:10px;overflow:hidden}
.fill{height:100%;border-radius:10px;transition:width .6s ease}
.fill.coffee{background:linear-gradient(90deg,#a06a3d,#d4a06a)}
.fill.product{background:linear-gradient(90deg,#3d8ca0,#6ad4c4)}
.fill.stress{background:linear-gradient(90deg,#8c3d3d,#d46a6a)}
.stat span:last-child{color:#888;min-width:2.8rem;text-align:right}

.main{display:grid;grid-template-columns:380px 1fr;gap:1.5rem;margin-bottom:1.5rem}
@media(max-width:800px){.main{grid-template-columns:1fr}}

.panel{background:rgba(255,255,255,.03);border:1px solid #333;border-radius:16px;padding:1.5rem}
.panel h2{font-family:'JetBrains Mono',monospace;font-size:1rem;color:#b8d98c;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #2a2a2a}

.form-panel label{display:block;margin-bottom:.8rem;font-size:.8rem;color:#999}
.form-panel input,.form-panel textarea,.form-panel select{
  width:100%;margin-top:.3rem;
  background:#222;border:1px solid #3a3a3a;border-radius:8px;
  padding:.55rem .75rem;color:#ddd;font-size:.85rem;
  font-family:Inter,sans-serif;outline:none;transition:border-color .25s;
}
.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus{border-color:#b8d98c}
.form-panel textarea{resize:vertical}

.btn-submit{
  width:100%;margin-top:.5rem;background:#3a5a2a;color:#b8d98c;
  border:none;border-radius:10px;padding:.7rem;font-size:.9rem;
  font-weight:600;cursor:pointer;font-family:'JetBrains Mono',monospace;
  transition:background .25s,transform .15s;
}
.btn-submit:hover{background:#4a7a3a;transform:translateY(-1px)}
.btn-submit:active{transform:scale(.98)}

.btn-small{
  background:transparent;color:#888;border:1px solid #444;
  border-radius:8px;padding:.35rem .75rem;font-size:.75rem;
  cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .25s;
}
.btn-small:hover{border-color:#b8d98c;color:#b8d98c}
.btn-small:disabled{opacity:.4;cursor:not-allowed}
.btn-small:disabled:hover{border-color:#444;color:#888}

.ledger-meta{display:flex;align-items:center;gap:1.2rem;margin-bottom:.8rem;font-size:.8rem;color:#888;flex-wrap:wrap}
.ledger-meta strong{color:#b8d98c}
.ledger-scroll{max-height:340px;overflow-y:auto}
.ledger-scroll::-webkit-scrollbar{width:5px}
.ledger-scroll::-webkit-scrollbar-track{background:#1a1a1a}
.ledger-scroll::-webkit-scrollbar-thumb{background:#444;border-radius:10px}

.ledger{width:100%;border-collapse:collapse;font-size:.78rem}
.ledger th{text-align:left;padding:.5rem .4rem;white-space:nowrap;color:#666;font-family:'JetBrains Mono',monospace;font-weight:400;border-bottom:1px solid #2a2a2a;position:sticky;top:0;background:#1c1c1c}
.ledger td{padding:.45rem .4rem;border-bottom:1px solid #262626;color:#bbb}
.ledger tr:hover td{background:rgba(255,255,255,.03)}
.ledger .urgency-Low{color:#6aaa6a}
.ledger .urgency-Medium{color:#d4c06a}
.ledger .urgency-High{color:#d48a6a}
.ledger .urgency-Critical{color:#d46a6a}

.empty{text-align:center;padding:2rem;color:#555;font-size:.85rem;font-style:italic}

.footer{display:flex;justify-content:center;gap:2rem;padding:1rem 0;border-top:1px solid #2a2a2a;font-size:.75rem;color:#555;font-family:'JetBrains Mono',monospace;flex-wrap:wrap}

.toast{
  position:fixed;bottom:2rem;right:2rem;
  background:#2a3a1a;color:#b8d98c;padding:.7rem 1.2rem;
  border-radius:10px;font-size:.85rem;font-family:'JetBrains Mono',monospace;
  border:1px solid #3a5a2a;
  opacity:0;transform:translateY(20px);transition:all .35s ease;
  pointer-events:none;z-index:10;
}
.toast.show{opacity:1;transform:translateY(0)}

.receipt-overlay{
  position:fixed;inset:0;z-index:20;
  background:rgba(0,0,0,.7);display:flex;
  align-items:center;justify-content:center;padding:1rem;animation:fadeIn .25s;
}
.receipt{background:#1c1c1c;border:1px solid #444;border-radius:16px;padding:2rem;max-width:400px;width:100%;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#ccc;position:relative}
.receipt h3{text-align:center;color:#b8d98c;margin-bottom:.5rem;font-size:1rem}
.receipt .line{border-top:1px dashed #444;margin:.8rem 0}
.receipt .row{display:flex;justify-content:space-between;margin-bottom:.3rem}
.receipt .total{font-weight:700;color:#b8d98c;font-size:.95rem}
.receipt .close-btn{display:block;margin-top:1rem;width:100%;background:#333;border:none;border-radius:8px;padding:.5rem;color:#aaa;cursor:pointer;font-family:inherit;font-size:.8rem;transition:background .25s}
.receipt .close-btn:hover{background:#444}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* PRESENTATION */
.preso-overlay{
  position:fixed;inset:0;z-index:100;
  background:#121212;display:none;
  flex-direction:column;padding:.5rem;
}
.preso-overlay.active{display:flex}

.preso{flex:1;display:flex;flex-direction:column;max-width:1000px;width:100%;margin:0 auto;position:relative}
.preso-top{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;color:#555;font-family:'JetBrains Mono',monospace;font-size:.8rem}
.preso-close{background:none;border:none;color:#666;font-size:1.3rem;cursor:pointer;padding:0 .3rem;transition:color .2s}
.preso-close:hover{color:#ff6b6b}

.preso-slide{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:0}
.slide{
  display:none;width:100%;height:100%;
  flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 3rem;animation:fadeIn .35s ease;overflow-y:auto;
}
.slide.active{display:flex}

.slide-icon{font-size:3rem;margin-bottom:1rem}
.slide-title{font-family:'JetBrains Mono',monospace;font-size:clamp(1.5rem,4vw,2.5rem);color:#b8d98c;text-align:center;margin-bottom:.3rem}
.slide-sub{font-size:clamp(.8rem,1.5vw,1rem);color:#666;margin-bottom:1rem;text-align:center}
.slide-divider{width:80px;height:2px;background:#3a5a2a;margin:.8rem auto}
.slide-body{font-size:clamp(1rem,2vw,1.3rem);color:#bbb;text-align:center;line-height:1.8;max-width:700px}
.slide-foot{font-size:.8rem;color:#555;margin-top:.5rem;text-align:center}
.slide-subtitle{font-size:.85rem;color:#777;margin-bottom:1rem;text-align:center}

/* slide stats */
.slide-stats{display:flex;gap:2rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.slide-stat{text-align:center;background:rgba(255,255,255,.03);border:1px solid #333;border-radius:12px;padding:1rem 1.5rem;min-width:120px}
.slide-stat .stat-num{display:block;font-size:2rem;color:#b8d98c;font-family:'JetBrains Mono',monospace}

/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.5rem;width:100%;max-width:700px}
.team-card{background:rgba(255,255,255,.03);border:1px solid #333;border-radius:12px;padding:.8rem;text-align:center;transition:all .25s}
.team-card:hover{background:rgba(255,255,255,.06);transform:translateY(-3px)}
.team-emoji{display:block;font-size:2rem;margin-bottom:.3rem}
.team-card strong{display:block;color:#ddd;font-size:.9rem;margin-bottom:.2rem}
.team-card span{display:block;font-size:.7rem;color:#777}
.team-tag{color:#555;font-style:italic;margin-top:.3rem;font-size:.65rem!important}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:.5rem;width:100%;max-width:650px}
.kpi-item{background:rgba(255,255,255,.03);border:1px solid #333;border-radius:12px;padding:1rem;text-align:center}
.kpi-val{display:block;font-size:1.8rem;color:#b8d98c;font-family:'JetBrains Mono',monospace;margin-bottom:.2rem}
.kpi-item span:nth-child(2){font-size:.8rem;color:#aaa;display:block;margin-bottom:.2rem}
.kpi-sub{font-size:.65rem;color:#555!important;font-style:italic}

/* chart */
.chart{width:100%;max-width:600px;display:flex;flex-direction:column;gap:.6rem}
.chart-row{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:#aaa}
.chart-row span:first-child{min-width:160px;text-align:right}
.chart-bar{flex:1;height:18px;background:#2a2a2a;border-radius:10px;overflow:hidden}
.chart-bar div{height:100%;border-radius:10px;background:linear-gradient(90deg,#3a5a2a,#6a9a4a);transition:width .8s}
.chart-row span:last-child{min-width:35px;color:#888}

/* testimonials */
.testimonials{display:flex;flex-direction:column;gap:1rem;max-width:650px;width:100%}
.testimonial{background:rgba(255,255,255,.03);border-left:3px solid #3a5a2a;padding:.8rem 1rem;font-size:.85rem;color:#bbb;line-height:1.6;font-style:italic}
.test-auth{display:block;font-size:.7rem;color:#555;margin-top:.4rem;font-style:normal}

/* bingo */
.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;max-width:600px}
.bingo-cell{background:rgba(255,255,255,.04);border:1px solid #333;border-radius:6px;padding:.4rem;text-align:center;font-size:.6rem;color:#888;transition:all .2s;cursor:pointer;user-select:none}
.bingo-cell:hover{background:rgba(180,220,120,.1);border-color:#4a6a3a;color:#b8d98c}
.bingo-cell.marked{background:rgba(180,220,120,.15)!important;border-color:#6a9a4a!important;color:#b8d98c!important;text-decoration:line-through}

.goal-list{list-style:none;text-align:left;max-width:550px;width:100%}
.goal-list li{padding:.5rem 0;font-size:.9rem;color:#bbb;border-bottom:1px solid #262626}
.goal-list li:last-child{border:none}

.quote{font-size:1rem;color:#bbb;line-height:1.8;font-style:italic;text-align:center;max-width:600px}
.slide-auth{font-size:.8rem;color:#555;margin-top:1rem}

.preso-bottom{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem}
.preso-nav-btn{
  background:transparent;color:#888;border:1px solid #444;
  border-radius:8px;padding:.5rem 1.2rem;font-size:.8rem;
  cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .25s;
}
.preso-nav-btn:hover{border-color:#b8d98c;color:#b8d98c}

.preso-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.preso-dot{width:8px;height:8px;border-radius:50%;background:#333;cursor:pointer;transition:all .25s;border:none;padding:0}
.preso-dot.active{background:#b8d98c;transform:scale(1.3)}
.preso-dot:hover{background:#555}

.slide-buttons{display:flex;gap:1rem;margin-top:1.5rem}

.slide-footnote{font-size:.7rem;color:#555;margin-top:.5rem;font-style:italic}

/* RTL */
[dir="rtl"] body{font-family:Tajawal,Inter,sans-serif}
[dir="rtl"] .nav-btn:first-of-type{margin-left:0;margin-right:auto}
[dir="rtl"] .header h1,[dir="rtl"] .badge,[dir="rtl"] .panel h2,[dir="rtl"] .stat,[dir="rtl"] .ledger th,[dir="rtl"] .ledger td,[dir="rtl"] .footer,[dir="rtl"] .toast,[dir="rtl"] .receipt,[dir="rtl"] .btn-submit,[dir="rtl"] .btn-small,[dir="rtl"] .preso{font-family:Tajawal,'JetBrains Mono',monospace}
[dir="rtl"] .stat span:last-child{text-align:left}
[dir="rtl"] .ledger th{text-align:right}
[dir="rtl"] .form-panel input,[dir="rtl"] .form-panel textarea,[dir="rtl"] .form-panel select{font-family:Tajawal,Inter,sans-serif}
[dir="rtl"] .chart-row span:first-child{text-align:left}