:root {
  --paper: #fff6cc;
  --accent: #e2a400;
  --ink: #3d3200;
  --fs: 15px;
  --chrome: color-mix(in srgb, var(--paper) 82%, var(--ink) 18%);
  --muted: color-mix(in srgb, var(--ink) 50%, transparent);
  --hair: color-mix(in srgb, var(--ink) 12%, transparent);
  --hover: color-mix(in srgb, var(--ink) 8%, transparent);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: var(--fs)/1.65 "Segoe UI Variable Text", "Segoe UI", Tahoma, sans-serif;
  overflow: hidden; user-select: none;
  transition: background .25s, color .25s;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* شريط العنوان */
.titlebar { display: flex; align-items: center; gap: 2px; height: 38px; padding: 0 6px; background: var(--chrome); }
.brand { flex: 1; font-weight: 700; font-size: 13px; letter-spacing: .3px; opacity: .75; padding-inline: 6px; }
.ico { width: 30px; height: 28px; border-radius: 7px; display: grid; place-items: center; opacity: .7; transition: .15s; }
.ico:hover { background: var(--hover); opacity: 1; }
.ico.close:hover { background: #e5484d; color: #fff; }
#pinBtn.on { opacity: 1; color: var(--accent); }
#pinBtn.on svg { fill: currentColor; }
/* وضع النوت فقط */
.dragstrip, .focus-exit { display: none; }
body.focus .titlebar, body.focus .tabs, body.focus .toolbar, body.focus .footer { display: none; }
body.focus .paper { padding-top: 14px; }
body.focus .dragstrip { display: block; position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 5; }
body.focus.desk .dragstrip { display: none; }
body.focus .focus-exit { display: grid; place-items: center; position: fixed; top: 6px; left: 6px; z-index: 6; width: 26px; height: 26px; border-radius: 8px; background: var(--hover); opacity: 0; transition: opacity .2s; }
body.focus:hover .focus-exit { opacity: .55; }
body.focus .focus-exit:hover { opacity: 1; }
#focusBtn.on, #deskBtn.on { opacity: 1; color: var(--accent); background: var(--hover); }
body.desk .titlebar { cursor: default; }

/* ترقيم */
.editor { counter-reset: ln; }
.editor.numbered .row { counter-increment: ln; }
.editor.numbered .row::after {
  content: counter(ln); position: absolute; right: -24px; left: auto; top: 0; width: 20px; text-align: center;
  font-size: 11px; line-height: calc(var(--fs) * 1.65 + 2px); color: var(--muted); font-variant-numeric: tabular-nums;
}
.editor.numbered { padding-right: 22px; }

/* قلم التحديد */
.row.hl { background: var(--hlc) !important; }
.row.hl .txt, .row.hl .cnt { color: #111 !important; }
.row.hl .chk { border-color: rgba(0,0,0,.45); }
.hlwrap { position: relative; }
.hlbar { stroke: var(--curhl, #7ee2a8); }
.hlpop { display: none; position: absolute; top: 32px; inset-inline-start: 0; z-index: 9; gap: 6px; padding: 8px; border-radius: 12px; background: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 0 0 1px var(--hair); }
.hlpop.open { display: flex; }
.hlpop button { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.hlpop button.none { display: grid; place-items: center; font-size: 13px; color: var(--muted); }

/* التبويبات */
.tabs { display: flex; gap: 4px; padding: 6px 8px 0; background: var(--chrome); overflow-x: auto; scrollbar-width: none; }
.tab {
  display: flex; align-items: center; gap: 6px; max-width: 140px; padding: 5px 11px 7px;
  border-radius: 10px 10px 0 0; font-size: 12.5px; white-space: nowrap; opacity: .65; transition: .15s;
}
.tab span { overflow: hidden; text-overflow: ellipsis; }
.tab:hover { opacity: 1; background: var(--hover); }
.tab.active { background: var(--paper); opacity: 1; font-weight: 600; }
.tab .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--hair); }
.tab.dragging { opacity: .35; outline: 1.5px dashed var(--accent); }
.tab { cursor: grab; }
.tab.add { opacity: .55; font-size: 16px; padding: 2px 10px 6px; }

/* الأدوات */
.toolbar { display: flex; align-items: center; gap: 2px; padding: 8px 10px 4px; flex-wrap: wrap; }
.swatches { display: flex; gap: 4px; }
.sw { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .15s; }
.sw:hover { transform: scale(1.2); }
.sw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sep { flex: 1; }
.tb { height: 28px; min-width: 28px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; opacity: .6; font-size: 12px; font-weight: 700; transition: .15s; }
.tb:hover { opacity: 1; background: var(--hover); }
.tb.on { opacity: 1; color: var(--accent); background: var(--hover); }
#syncBtn { position: relative; }
#syncBtn::after { content: ""; position: absolute; bottom: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
#syncBtn[data-s="ok"]::after { background: #1fa36b; }
#syncBtn[data-s="busy"]::after { background: var(--accent); animation: blink .8s infinite alternate; }
#syncBtn[data-s="off"]::after { background: #999; }
#syncBtn[data-s="err"]::after { background: #e5484d; }
@keyframes blink { to { opacity: .2; } }
.tb.danger:hover { color: #e5484d; }
.tb.confirm { opacity: 1; background: #e5484d; color: #fff; padding: 0 10px; font-size: 11.5px; }

/* الورقة */
.paper { flex: 1; overflow-y: auto; padding: 4px 14px 30px; user-select: text; }
.paper { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.paper::-webkit-scrollbar { width: 3px; }
.paper::-webkit-scrollbar-track { background: transparent; }
.paper::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 3px; }
.paper::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.paper::-webkit-scrollbar-button { display: none; height: 0; }
.title {
  width: 100%; border: 0; outline: 0; background: none; color: var(--ink);
  font: 700 calc(var(--fs) + 5px)/1.4 inherit; font-family: inherit; padding: 6px 2px 8px;
}
.title::placeholder { color: var(--muted); }

.row { display: flex; align-items: flex-start; gap: 8px; padding: 1px 4px; padding-inline-start: calc(4px + var(--lvl, 0) * 22px); border-radius: 8px; position: relative; animation: in .18s ease; }
@keyframes in { from { opacity: 0; transform: translateY(-3px); } }
.row:hover { background: var(--hover); }
.row:focus-within { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.row.nested::before { content: ""; position: absolute; inset-inline-start: calc(var(--lvl) * 22px - 7px); top: 0; bottom: 0; border-inline-start: 1px solid var(--hair); }

.txt { flex: 1; outline: 0; min-height: 1.65em; word-break: break-word; white-space: pre-wrap; }
.txt:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }

.chk {
  flex: none; width: 18px; height: 18px; margin-top: calc((1.65em - 18px) / 2); border-radius: 50%;
  border: 1.8px solid color-mix(in srgb, var(--ink) 40%, transparent); display: grid; place-items: center; transition: .18s;
}
.chk:hover { border-color: var(--accent); }
.chk svg { width: 11px; height: 11px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: .2s; }
.row.done .chk { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.row.done .chk svg { opacity: 1; transform: none; }
.row.done .txt { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.txt { transition: color .2s; }

.row.text .chk { border: 0; width: 18px; }
.row.text .chk::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.row.text .chk:hover::after { background: var(--accent); }

/* عنوان مجموعة */
.row.head { margin-top: 8px; }
.row.head .txt { font-weight: 700; }
.row.head .chk { border-radius: 6px; width: 20px; height: 20px; margin-top: calc((1.65em - 20px) / 2); border: 0; background: conic-gradient(var(--accent) calc(var(--p, 0) * 1turn), var(--hair) 0); }
.row.head .chk::before { content: ""; position: absolute; inset: 4px; border-radius: 3px; background: var(--paper); }
.row.head .chk { position: relative; }
.row.head.done .chk::before { display: none; }
.row.head.done .txt { text-decoration: none; color: var(--ink); opacity: .6; }
.cnt { flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; margin-top: .35em; background: var(--hover); color: var(--muted); }
.row.head.done .cnt { background: var(--accent); color: var(--paper); }

.editor.hide-done .row.done:not(.head) { display: none; }

/* الأسفل */
.footer { display: flex; align-items: center; gap: 10px; padding: 7px 14px 9px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--hair); }
.bar { flex: 1; height: 5px; border-radius: 5px; background: var(--hair); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; transition: width .35s ease; }

.toast { position: fixed; bottom: 44px; left: 50%; transform: translate(-50%, 10px); background: var(--ink); color: var(--paper); padding: 6px 14px; border-radius: 20px; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== نسخة الموبايل / المتصفح ===== */
body.web #pinBtn, body.web #deskBtn, body.web #minBtn, body.web #closeBtn { display: none; }
body.web { height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--paper); }
body.web .titlebar { background: var(--chrome); }
@media (max-width: 600px), (pointer: coarse) {
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 8px 10px 6px; }
  .toolbar::-webkit-scrollbar { display: none; }
  .sep { flex: 0 0 8px; }
  .sw { width: 22px; height: 22px; flex: none; }
  .swatches { gap: 7px; }
  .tb { height: 36px; min-width: 36px; flex: none; }
  .tab { padding: 8px 13px 10px; font-size: 14px; }
  .chk { width: 22px; height: 22px; margin-top: calc((1.65em - 22px) / 2); }
  .row { padding-block: 3px; }
  body.focus .focus-exit { opacity: .5; width: 34px; height: 34px; top: calc(env(safe-area-inset-top) + 8px); }
}