/* v6 dark layout */
:root{
  --bg:#0e0f12;
  --panel:#14161a;
  --panel-2:#1a1d22;
  --text:#e8eaea;
  --muted:#98a2b3;
  --brand:#84b4f8;
  --border:#252a31;
  --accent:#3d7bfd;
  --danger:#ef4444;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Cairo",system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* layout */
.sidebar{
  position:fixed; inset-block:0; inset-inline-start:0;
  width:264px; background:#0c0f16; border-inline-end:1px solid var(--border);
  padding:12px; overflow:auto;
}
.sidebar-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.sidebar-toggle{display:none}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-weight:700}
.brand-icon{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff}

.side-links{display:flex; flex-direction:column; gap:6px; margin:12px 0}
.side-links a{
  padding:10px 12px; text-decoration:none; color:var(--text); border-radius:10px;
}
.side-links a:hover{background:var(--panel)}
.side-links a.active{background:var(--panel-2); border:1px solid var(--border)}

.side-section{margin:16px 0}
.label{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
.input{
  width:100%; background:var(--panel); border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:10px; outline:none;
}
.empty{color:var(--muted); padding:12px; border:1px dashed var(--border); border-radius:10px}

.main{margin-inline-start:264px; min-height:100dvh; display:flex; flex-direction:column}
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--panel); border-bottom:1px solid var(--border);
}
.product-name{font-weight:700; letter-spacing:.3px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; background:var(--accent); color:#fff; border:none;
  border-radius:10px; cursor:pointer;
}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.brand{background:var(--brand); color:#0b1220}
.btn.full{width:100%}
.btn.send{height:44px}

.page{padding:24px; max-width:1000px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}

.chat-wrap{padding:20px; display:flex; flex-direction:column; gap:12px}
.chat-header .title{margin:0 0 6px 0}
.muted{color:var(--muted)}

.chat-body{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  min-height:360px; padding:16px; overflow:auto;
}
.msg{padding:10px 12px; border-radius:10px; margin:6px 0; max-width:72%}
.msg.bot{background:#0f1623; border:1px solid var(--border)}
.msg.user{background:#1d2740; border:1px solid var(--border); margin-inline-start:auto}

.composer-wrap{display:flex; gap:10px; align-items:flex-end}
.composer{
  flex:1; resize:vertical; min-height:44px; max-height:160px;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:12px;
}

.form{max-width:560px; display:grid; gap:10px}
.pricing{display:grid; grid-template-columns:repeat(5, minmax(200px,1fr)); gap:16px; padding:24px}
.price-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}
.price{font-size:22px; margin:8px 0 12px 0}
.price-card ul{margin:0 0 12px 0; padding-inline-start:18px}

.footer{margin-top:auto; padding:16px; color:var(--muted); border-top:1px solid var(--border)}

/* responsive */
@media (max-width: 1024px){
  .pricing{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .sidebar{width:280px; transform:translateX(0); transition:transform .2s}
  .sidebar-toggle{display:inline-flex}
  .main{margin-inline-start:0}
  .sidebar:not(.open){transform:translateX(110%)}
  body.overlay{overflow:hidden}
}