:root{
  --bg:#0b1222; --fg:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --border:#1f2937; --accent:#22c55e; --shadow:0 6px 20px rgba(0,0,0,.35);
}
[data-theme='light']{
  --bg:#fafafa; --fg:#0f172a; --muted:#334155; --card:#ffffff; --border:#e2e8f0; --accent:#16a34a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui, -apple-system,"Segoe UI",Roboto,Helvetica,Arial}
.container{max-width:980px;margin:20px auto;padding:0 14px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.logo{width:36px;height:36px;border-radius:12px;background:radial-gradient(circle at 30% 30%, #34d399, #065f46)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,button{border-radius:12px;border:1px solid var(--border);padding:10px 12px;background:var(--card);color:var(--fg)}
input[type="color"]{padding:0;height:42px;width:42px}
.btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;color:var(--fg)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn:active{transform:scale(.98)}
.footer{text-align:center;color:var(--muted);margin:18px 0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.list{--list-color:#2d8f4e;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card)}
.list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(90deg, var(--list-color), transparent 70%);cursor:pointer}
.list-head .left{display:flex;align-items:center;gap:10px}
.list .badge{padding:2px 8px;background:rgba(0,0,0,.25);border-radius:999px}
.list .controls{display:flex;gap:6px}
.list.open .body{display:block}
.body{display:none;padding:10px 14px 14px}

.items{list-style:none;padding:0;margin:0}
.items li{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-top:8px;background:var(--card)}
.items li.done{opacity:.6;text-decoration:line-through}
.items .chip{padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);margin-inline-start:auto}

.item-add{display:flex;gap:8px;margin-top:10px}
.item-add input[type=text]{flex:1}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.modal:not(.hidden){display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:0}
.modal-card{position:relative;z-index:1;width:min(520px,94vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modal-body{display:grid;gap:10px}
.modal-foot{display:flex;gap:10px;margin-top:8px}

.hidden{display:none !important}

/* styles.css (FINAL) — modern responsive */
:root{--bg:#0f172a;--panel:#111827cc;--text:#e5e7eb;--muted:#9ca3af;--accent:#22c55e;--danger:#ef4444;--radius:14px;--shadow:0 10px 35px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background: radial-gradient(1200px 600px at 10% -10%, #1f2937, transparent),radial-gradient(1200px 600px at 110% 10%, #111827, transparent),var(--bg);color:var(--text);font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;line-height:1.6}
.container{max-width: 980px; margin: 24px auto; padding: 0 16px}
.card{background: linear-gradient(180deg, #0b1222, #0b1222cc);border: 1px solid #1f2937;border-radius: var(--radius);box-shadow: var(--shadow);padding: 16px;backdrop-filter: blur(6px)}
h1,h2,h3{margin:0 0 12px}h1{font-size:28px}h2{font-size:22px;color:#cbd5e1}.muted{color:var(--muted)}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;background:var(--accent); color:#051b0b; transition:.2s transform ease, .2s opacity ease}
.btn:hover{ transform: translateY(-1px); opacity:.95 }
.btn.secondary{ background:#334155; color:#e2e8f0 }.btn.ghost{ background:transparent; border:1px solid #334155; color:#cbd5e1 }
input,button,select{font: inherit;}
input[type="email"],input[type="password"],input[type="text"],input[type="color"]{background:#0b1222; color:#e5e7eb; border:1px solid #1f2937; border-radius:10px; padding:10px 12px}
input[type="color"]{ padding:0; height:40px; width:64px }
#accountBox details{ border:1px solid #1f2937; border-radius:10px; padding:8px }
#listsContainer .list{background:#0b1222; border:1px solid #1f2937; border-radius:12px; padding:10px 12px}
#listsContainer .list-head{ display:flex; justify-content:space-between; align-items:center }
#listsContainer .list-head b{ color:#e2e8f0 }
#listsContainer .list-head::before{content:''; width:10px; height:10px; border-radius:50%; margin-inline-end:8px; background: var(--list-color, #22c55e);display:inline-block}
.header{display:flex; align-items:center; justify-content:space-between; margin: 12px 0 18px}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.brand .logo{width:38px; height:38px; border-radius:12px; background: conic-gradient(from 160deg, #22c55e, #065f46, #22c55e); box-shadow: 0 6px 20px rgba(34,197,94,.35)}
.footer{ color:#64748b; font-size:13px; text-align:center; margin:24px 0 40px }
@media (max-width:600px){ h1{font-size:22px} }


/* --- Enhanced layout & modal --- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px }
#listsContainer{ margin-top:12px }
#listsContainer>div.list{ transition:.18s transform ease, .18s box-shadow ease }
#listsContainer>div.list:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25) }

details{ border-radius:12px; overflow:hidden }
details>summary{ cursor:pointer; list-style:none }
details>summary::-webkit-details-marker{ display:none }

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000 }
.modal.hidden{ display:none }
.modal:not(.hidden){ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px) }
.modal-card{
  position:relative; z-index:1; width:min(520px, 92vw);
  background:#0b1222; color:#e5e7eb; border:1px solid #1f2937; border-radius:16px; box-shadow: var(--shadow);
  padding:16px;
}
[data-theme='light'] .modal-card{ background:#ffffff; color:#0f172a; border-color:#e2e8f0 }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.modal-body{ display:grid; gap:10px; padding:8px 0 }
.modal-foot{ display:flex; gap:10px; justify-content:flex-start; padding-top:8px }

.form-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.form-row>span{ color:var(--muted); min-width:120px }
select{ background:#0b1222; color:#e5e7eb; border:1px solid #1f2937; border-radius:10px; padding:10px 12px }
[data-theme='light'] select{ background:#ffffff; color:#0f172a; border-color:#e2e8f0 }

/* Buttons micro-interactions */
.btn:active{ transform: translateY(0) scale(.98) }
.btn.ghost:hover{ border-color:#475569 }

/* Pinned badge style idea */
.list .list-head b::after{
  content: attr(data-pin);
  margin-inline-start:6px; font-weight:600; font-size:12px; color:#22c55e;
}

/* Chips for item categories */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 10px;border:1px solid #334155;border-radius:999px;background:#0b1222;color:#e2e8f0;font-size:12px}
[data-theme='light'] .chip{background:#fff;color:#0f172a;border-color:#e2e8f0}
/* List items */
.items{margin:8px 0 0 0;padding:0;list-style:none}
.items li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #1f2937;border-radius:10px;margin-top:6px;background:#0b1222}
[data-theme='light'] .items li{background:#fff;border-color:#e2e8f0}
.items li.done{opacity:.65;text-decoration:line-through}
.items li button{margin-inline-start:auto}
.item-add{display:flex;gap:8px;margin-top:10px}
.item-add input[type="text"]{flex:1}