:root{
  --bg:#f7f7f8;
  --panel:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --brand:#7c3aed;
  --border:#e5e7eb;
  --ring:rgba(124,58,237,.25);
  --danger:#b91c1c;
}

[data-theme="dark"]{
  --bg:#0b0f14;
  --panel:#121821;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --brand:#a78bfa;
  --border:#1f2937;
  --ring:rgba(167,139,250,.25);
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

.app{ max-width:960px; margin:24px auto; padding:16px; }

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
  padding:16px;
}

.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.header-actions{ display:flex; align-items:center; gap:8px; }

h1{ font-size:22px; margin:0; }

.theme-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }

.controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px;
}

textarea.note-input{
  width:100%; min-height:130px; resize:vertical;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--border); border-radius:10px; padding:12px;
  outline:none; box-shadow:0 0 0 0px var(--ring);
}
textarea.note-input:focus{ box-shadow:0 0 0 4px var(--ring); }

/* Butonlar */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:#111; text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .2s ease, opacity .2s ease;
}
[data-theme="dark"] .btn{ background:#0f141c; color:var(--ink); border-color:#223042; }
.btn:hover{ transform:translateY(-1px); }

/* “Ekle / Temizle” ve “Önemli” alanı — mobilde sağ üstte dikey yığın */
.actions{
  margin-top:10px;
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}
.actions .important{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px dashed var(--border); border-radius:10px;
}
.actions .important input{ transform:translateY(1px) }

@media (max-width: 560px){
  .actions{
    position:sticky; top:8px; z-index:10;
    align-items:flex-end; justify-content:flex-end; flex-direction:column;
  }
  .actions .btn{ width:auto; }
}

/* Kategori çipleri */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.chip{
  padding:6px 10px; border:1px solid var(--border); border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink); font-size:14px;
}
.chip.active{ background:var(--brand); border-color:transparent; color:white; }

/* Kayıt listesi */
.list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.item{
  border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel);
}
.item .meta{
  display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin-bottom:6px;
}
.item.important{ border-color:color-mix(in hsl, var(--danger) 40%, var(--border)); box-shadow:0 0 0 2px color-mix(in hsl, var(--danger) 20%, transparent); }
.item.important .title{ color:var(--danger); font-weight:700; }

/* Sil butonu */
.item .del{
  margin-left:auto;
  width:28px; height:28px; line-height:26px; text-align:center;
  border:1px solid var(--border); border-radius:8px; background:transparent;
  color:var(--muted); cursor:pointer;
}
.item .del:hover{ border-color:var(--danger); background:var(--danger); color:#fff; }

/* Markdown benzeri madde işareti listeleri */
.item ul{ margin:6px 0 0 18px; }
.item li{ margin:4px 0; }

/* Alt bilgi */
.footer{ color:var(--muted); font-size:13px; margin-top:12px; }