:root{
  --bg:#f6f5fb;
  --card:#ffffff;
  --muted:#7c7a85;
  --primary:#6D28D9;
  --primary-600:#7C3AED;
  --ring: rgba(109,40,217,0.2);
  --danger:#E11D48;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Kufi Arabic", sans-serif;
  background:var(--bg);
  color:#111;
}

.app-header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.85));
  border-bottom:1px solid #eee;
  backdrop-filter: blur(8px);
  padding: 14px 16px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.app-header h1{ margin:0; font-size: clamp(20px, 2.4vw, 28px); color:var(--primary) }
.search-wrap{ flex:1 1 260px }
#search{
  width:100%; padding:12px 14px; border-radius:14px; border:1px solid #e5e3ef;
  outline:none; background:#fff;
}
#search:focus{ box-shadow:0 0 0 6px var(--ring); border-color: var(--primary) }

.cards-grid{
  padding: 18px; display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:14px; max-width:1100px; margin: 0 auto;
}
.card{
  background:var(--card); padding:10px; border-radius:18px; position:relative;
  box-shadow: 0 10px 20px rgba(17,12,46,0.05);
  border:1px solid #ece9f7;
  display:flex; align-items:stretch; gap:8px;
}
.card .card-body{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:transparent; border:0; text-align:right; cursor:pointer; padding:10px; border-radius:12px;
}
.card .card-body:focus{ outline:none; box-shadow:0 0 0 6px var(--ring) }
.card .emoji{ font-size:28px }
.card .name{ font-weight:700 }
.card .delete{
  align-self:flex-start; border:0; background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer;
  border:1px solid #eee;
}
.card .delete:hover{ background:#fee2e2; border-color:#fecaca }

.fab{
  position:fixed; bottom:20px; inset-inline-end:20px; z-index:20;
  background:var(--primary); color:#fff; border:0; width:56px; height:56px;
  border-radius:50%; box-shadow: 0 14px 30px rgba(109,40,217,0.35);
  font-size:20px; cursor:pointer;
}
.fab:hover{ background:var(--primary-600) }

.sheet{
  position:fixed; inset:0; background:#fff; z-index:30; display:flex; flex-direction:column;
  border-radius: 22px 22px 0 0;
}
.hidden{ display:none !important }

.sheet-header{
  display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid #eee;
}
.back-btn{
  border:1px solid #e7e3f6; background:#fff; border-radius:12px; padding:8px 12px; cursor:pointer;
}
.sections{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; padding:12px 16px; border-bottom:1px solid #f0ecfb;
}
.tab{
  border:1px solid #e7e3f6; background:#fff; border-radius:14px; padding:10px; cursor:pointer;
}
.tab.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

.section-content{ padding:16px; flex:1; overflow:auto }
.empty{ color:var(--muted); text-align:center; padding:24px }

/* forms */
input[type="text"], textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid #e5e3ef; outline:none; background:#fff;
}
textarea{ min-height:120px; resize:vertical }
button.primary{
  background:var(--primary); color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
}
button.secondary{
  background:#fff; color:#111; border:1px solid #e5e3ef; padding:10px 14px; border-radius:12px; cursor:pointer;
}
.actions{ display:flex; gap:8px; flex-wrap:wrap }
.list{ display:grid; gap:10px; }
.item{
  background:#fff; border:1px solid #eee; border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.item .title{ font-weight:600 }
.item .meta{ color:var(--muted); font-size:12px }
.item .buttons{ display:flex; gap:8px }

/* gallery */
.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:10px }
.thumb{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid #eee; background:#fafafa
}
.thumb img{ width:100%; height:120px; object-fit:cover; display:block }
.thumb button{ position:absolute; top:6px; inset-inline-end:6px; border:0; background:rgba(0,0,0,.5); color:#fff; border-radius:10px; padding:6px; cursor:pointer }