/* ============================================================
   Araz Super App — Stylesheet
   Dark navy theme, indigo/blue accent, card-based modern UI
   ============================================================ */
:root{
  --bg: #090c14;
  --bg-elev: #0e1220;
  --card: #121729;
  --card-2: #161c33;
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --text: #eef1f8;
  --text-dim: #8b93a7;
  --text-dimmer: #5c6479;
  --accent1: #6d5efc;
  --accent2: #3b82f6;
  --accent-grad: linear-gradient(135deg,var(--accent1),var(--accent2));
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f5b942;
  --radius: 16px;
  --radius-sm: 10px;
  --nav-h: 66px;
  --header-h: 84px;
  font-size: 16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background: radial-gradient(1200px 800px at 80% -10%, #161d3a 0%, transparent 55%), var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom: calc(var(--nav-h) + 14px);
}
.icon{display:inline-block;vertical-align:-3px;flex-shrink:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--accent1);color:#fff;}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}

/* ---------- Header ---------- */
.app-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:rgba(9,12,20,0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.icon-btn{
  width:42px; height:42px; border-radius:12px;
  background:var(--card); border:1px solid var(--border);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.icon-btn:hover{background:var(--card-2); border-color:var(--accent2);}
.brand{display:flex; align-items:center; gap:10px; flex:1; min-width:0;}
.brand-logo{
  width:42px; height:42px; border-radius:12px; background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.15rem; color:#fff; flex-shrink:0;
  box-shadow:0 4px 14px rgba(109,94,252,.35);
}
.brand-text{min-width:0;}
.brand-title{font-weight:700; font-size:1rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-sub{font-size:.72rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lang-select{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:9px 10px; font-size:.85rem; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.lang-select select{background:transparent; border:none; color:var(--text); font-size:.85rem;}

/* ---------- Layout ---------- */
.app-main{max-width:760px; margin:0 auto; padding:18px 16px 8px;}
.page{display:none; animation:fadeIn .25s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

h1.page-title{font-size:1.5rem; font-weight:800; margin-bottom:6px;}
p.page-sub{color:var(--text-dim); font-size:.92rem; margin-bottom:18px; line-height:1.5;}

/* ---------- Grid stat cards ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px;
}
.stat-num{font-size:1.7rem; font-weight:800; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-label{color:var(--text-dim); font-size:.85rem; margin-top:2px;}

/* ---------- Feature / nav cards ---------- */
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.feature-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:10px;
}
.feature-card:hover{border-color:var(--accent2); transform:translateY(-2px); background:var(--card-2);}
.feature-card .fc-icon{
  width:38px; height:38px; border-radius:10px; background:rgba(109,94,252,.15);
  display:flex; align-items:center; justify-content:center; color:var(--accent1);
}
.feature-card .fc-title{font-weight:700; font-size:.95rem;}
.feature-card .fc-sub{color:var(--text-dim); font-size:.78rem;}

.section-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:14px;
}
.section-card h3{font-size:1rem; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.section-card h3 .icon{color:var(--accent1);}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; height:var(--nav-h); z-index:50;
  background:rgba(9,12,20,0.92); backdrop-filter:blur(16px);
  border-top:1px solid var(--border-soft);
  display:flex; align-items:stretch; justify-content:space-around;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  flex:1; color:var(--text-dimmer); cursor:pointer; font-size:.68rem; font-weight:600;
  border:none; background:transparent; padding:6px 2px;
}
.nav-item.active{color:var(--accent2);}
.nav-item .icon{transition:.15s;}

/* ---------- Sidebar drawer ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; opacity:0; pointer-events:none; transition:.2s;
}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:78%; max-width:320px; z-index:61;
  background:var(--bg-elev); border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .25s ease; padding:18px 0; overflow-y:auto;
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; gap:10px; padding:0 18px 16px; border-bottom:1px solid var(--border-soft); margin-bottom:8px;}
.drawer-item{
  display:flex; align-items:center; gap:14px; padding:13px 18px; color:var(--text-dim);
  cursor:pointer; font-weight:600; font-size:.95rem; border-left:3px solid transparent;
}
.drawer-item:hover, .drawer-item.active{background:rgba(109,94,252,.08); color:var(--text); border-left-color:var(--accent1);}
.drawer-footer{padding:14px 18px; color:var(--text-dimmer); font-size:.75rem; border-top:1px solid var(--border-soft); margin-top:8px;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:12px; padding:12px 18px; font-weight:700; font-size:.9rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.15s; justify-content:center;
}
.btn-primary{background:var(--accent-grad); color:#fff; box-shadow:0 4px 14px rgba(109,94,252,.3);}
.btn-primary:hover{filter:brightness(1.1);}
.btn-secondary{background:var(--card-2); color:var(--text); border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--accent2);}
.btn-success{background:var(--success); color:#04220f;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:8px 12px; font-size:.8rem; border-radius:10px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Inputs ---------- */
.input, select.input, textarea.input{
  width:100%; background:var(--card-2); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:12px 14px; font-size:.92rem; font-family:inherit;
}
.input:focus{border-color:var(--accent2);}
.input::placeholder{color:var(--text-dimmer);}
.field{margin-bottom:12px;}
.field label{display:block; font-size:.8rem; color:var(--text-dim); margin-bottom:6px; font-weight:600;}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > *{flex:1; min-width:120px;}

/* ---------- Calculator ---------- */
.calc-display{
  background:var(--card-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; text-align:right; margin-bottom:14px;
}
.calc-expr{color:var(--text-dim); font-size:.85rem; min-height:18px; overflow-x:auto; white-space:nowrap;}
.calc-result{font-size:2.1rem; font-weight:800; overflow-x:auto; white-space:nowrap;}
.calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.calc-key{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:16px 0; font-size:1.05rem; font-weight:700; cursor:pointer; transition:.1s;
}
.calc-key:active{transform:scale(.95); background:var(--card-2);}
.calc-key.op{color:var(--accent2);}
.calc-key.eq{background:var(--accent-grad); color:#fff; border:none;}
.calc-key.fn{color:var(--warning); font-size:.85rem;}
.calc-mode-toggle{display:flex; gap:8px; margin-bottom:12px;}
.calc-mode-toggle button{flex:1;}

/* ---------- Tabs / chips ---------- */
.chip-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; background:var(--card); border:1px solid var(--border); color:var(--text-dim);
  padding:9px 15px; border-radius:100px; font-size:.83rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.chip.active{background:var(--accent-grad); color:#fff; border-color:transparent;}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:.78rem; font-weight:700;}
.badge-gold{background:rgba(245,185,66,.15); color:var(--warning);}
.badge-green{background:rgba(34,197,94,.15); color:var(--success);}
.badge-blue{background:rgba(59,130,246,.15); color:var(--accent2);}

/* ---------- Toast ---------- */
#toastWrap{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(92vw,380px);}
.toast{
  background:var(--card-2); border:1px solid var(--border); border-left:4px solid var(--accent2);
  border-radius:12px; padding:12px 14px; font-size:.85rem; display:flex; align-items:center; gap:10px;
  animation:slideDown .2s ease; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.toast.success{border-left-color:var(--success);}
.toast.error{border-left-color:var(--danger);}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
  max-width:420px; width:100%; padding:22px; max-height:88vh; overflow-y:auto;
  animation:popIn .18s ease;
}
@keyframes popIn{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);}}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.modal-head h3{font-size:1.1rem; font-weight:800; display:flex; align-items:center; gap:8px;}

/* ---------- Games grid list ---------- */
.game-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.game-tile{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px;
  cursor:pointer; text-align:center; transition:.15s;
}
.game-tile:hover{border-color:var(--accent2);}
.game-tile.active{border-color:var(--accent1); background:var(--card-2);}
.game-tile .icon{color:var(--accent1); margin-bottom:6px;}
.game-tile div.gt-name{font-size:.8rem; font-weight:700;}

.game-board{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:12px;}

/* small helpers */
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mb-0{margin-bottom:0;}
.text-dim{color:var(--text-dim);} .text-sm{font-size:.82rem;}
.center{text-align:center;}
.hidden{display:none !important;}
.mono{font-family:'SF Mono',Consolas,monospace;}

/* memory/tictac grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.cell{
  aspect-ratio:1; background:var(--card-2); border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; cursor:pointer;
}

/* piano */
.piano-wrap{display:flex; gap:4px; overflow-x:auto; padding:10px 0;}
.piano-key{
  width:42px; height:120px; background:#fff; border:1px solid #333; border-radius:0 0 6px 6px; cursor:pointer;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; font-size:.7rem; color:#333; font-weight:700; flex-shrink:0;
}
.piano-key:active{background:var(--accent1); color:#fff;}
.piano-key.black{width:28px; height:76px; background:#111; margin:0 -14px; z-index:2; color:#fff;}

/* switch */
.switch{position:relative; width:44px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--card-2); border:1px solid var(--border); border-radius:100px; cursor:pointer; transition:.15s;}
.switch .slider:before{content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; background:var(--text-dim); border-radius:50%; transition:.15s;}
.switch input:checked + .slider{background:var(--accent-grad); border-color:transparent;}
.switch input:checked + .slider:before{transform:translateX(20px); background:#fff;}

/* voice assistant bubble */
.chat-log{display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; padding:4px; margin-bottom:12px;}
.bubble{max-width:82%; padding:11px 14px; border-radius:14px; font-size:.88rem; line-height:1.4;}
.bubble.user{align-self:flex-end; background:var(--accent-grad); color:#fff; border-bottom-right-radius:4px;}
.bubble.bot{align-self:flex-start; background:var(--card-2); border:1px solid var(--border); border-bottom-left-radius:4px;}

/* admin */
.admin-table{width:100%; border-collapse:collapse; font-size:.83rem;}
.admin-table th, .admin-table td{padding:9px 8px; border-bottom:1px solid var(--border-soft); text-align:left;}
.admin-table th{color:var(--text-dim); font-weight:700; font-size:.75rem; text-transform:uppercase;}

@media (min-width:640px){
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .card-grid{grid-template-columns:repeat(3,1fr);}
}