: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: fixed; z-index: 40; 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); }
}

/* ===== الصور ===== */
.row.img { padding-block: 6px; }
.row.img:focus-within, .row.img:hover { background: none; }
.gal { display: flex; flex-wrap: wrap; gap: 6px; }
.gal figure { margin: 0; position: relative; height: 92px; border-radius: 10px; overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 1px var(--hair), 0 2px 6px rgba(0,0,0,.08); transition: transform .15s; }
.gal figure:hover { transform: translateY(-2px); }
.gal img { height: 100%; width: auto; max-width: 220px; object-fit: cover; display: block; }
.gal figure:only-child { height: auto; max-height: 260px; }
.gal figure:only-child img { max-width: 100%; max-height: 260px; height: auto; }
.gal .rm { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; opacity: 0; transition: .15s; }
.gal figure:hover .rm { opacity: 1; }
@media (pointer: coarse) { .gal .rm { opacity: .8; } }
.editor.drop { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 10px; }

.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(10,10,14,.92); display: none; flex-direction: column; user-select: none; }
.viewer.open { display: flex; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.vstage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 48px 12px 8px; }
.vstage img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
@keyframes zoomIn { from { opacity: 0; transform: scale(.94); } }
@keyframes slideL { from { opacity: 0; transform: translateX(-40px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(40px); } }
.vbtn { position: absolute; color: #fff; background: rgba(255,255,255,.12); border-radius: 50%; width: 40px; height: 40px; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: .15s; }
.vbtn:hover { background: rgba(255,255,255,.25); }
.vbtn[hidden] { display: none; }
.vclose { top: 8px; left: 8px; font-size: 16px; width: 34px; height: 34px; }
.vprev { right: 10px; top: 50%; transform: translateY(-50%); }
.vnext { left: 10px; top: 50%; transform: translateY(-50%); }
.vcount { position: absolute; top: 14px; right: 16px; color: rgba(255,255,255,.75); font-size: 13px; font-variant-numeric: tabular-nums; }
.vthumbs { display: flex; gap: 6px; padding: 8px 12px 14px; overflow-x: auto; justify-content: safe center; scrollbar-width: none; }
.vthumbs:empty { display: none; }
.vthumbs img { height: 48px; width: 48px; object-fit: cover; border-radius: 6px; opacity: .45; cursor: pointer; flex: none; transition: .15s; }
.vthumbs img.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }

/* ===== نافذة كلمة السر ===== */
.modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 20px; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); }
.modal.open { display: grid; animation: fade .15s ease; }
.card { width: min(340px, 100%); background: var(--paper); color: var(--ink); border-radius: 18px; padding: 22px 20px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px var(--hair); text-align: center; }
.card .lock { font-size: 30px; }
.card h3 { margin: 6px 0 4px; font-size: 17px; }
.card p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.card input { width: 100%; font: inherit; color: var(--ink); background: var(--hover); border: 1.5px solid transparent; border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; outline: 0; text-align: center; }
.card input:focus { border-color: var(--accent); }
.card input[hidden] { display: none; }
.merr { min-height: 18px; font-size: 12px; color: #e5484d; }
.mok { width: 100%; background: var(--accent); color: var(--paper); border-radius: 11px; padding: 10px; font-weight: 700; margin-top: 4px; }
.mok:disabled { opacity: .6; }
.mrow { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.mrow button[hidden] { display: none; }
.mrow button:hover { color: var(--ink); }

/* ===== إرشاد الآيفون ===== */
.ios-tip { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 55; display: none;
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 16px 10px; font-size: 13.5px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28), 0 0 0 1px var(--hair); }
.ios-tip.open { display: block; animation: fade .25s ease; }
.ios-tip ol { margin: 8px 0 0; padding-inline-start: 20px; line-height: 1.9; }
.ios-tip .x { position: absolute; top: 8px; left: 10px; opacity: .5; }
.ios-tip .shr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--hover); vertical-align: middle; color: #0a84ff; }
.ios-tip .arrow { text-align: center; color: var(--accent); font-size: 18px; animation: bob 1s infinite alternate; }
@keyframes bob { to { transform: translateY(4px); } }

/* ================= وضع الهاتف ================= */
.mhome, .mtop, .mdock, .msheetwrap, .mundo { display: none; }
body.m, body.m * { touch-action: manipulation; }
body.m .row { touch-action: pan-y; }
html, body { -webkit-text-size-adjust: 100%; }
.mi2 { width: 22px; height: 22px; }
body.m .titlebar, body.m .tabs, body.m .toolbar, body.m .footer, body.m .focus-exit, body.m .dragstrip { display: none !important; }
body.m .txt { font-size: calc(var(--fs) + 2px); }
body.m .title { font-size: 24px; font-weight: 800; padding-top: 2px; }

/* الشاشة الرئيسية */
body.m:not(.m-note) { background: #f4f2ee; }
body.m:not(.m-note) .paper { display: none; }
body.m:not(.m-note) .mhome { display: flex; flex-direction: column; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mhead { display: flex; align-items: center; gap: 4px; padding: 18px 18px 8px; position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, #f4f2ee 88%, transparent); backdrop-filter: blur(14px); }
.mhead h1 { flex: 1; margin: 0; font-size: 30px; font-weight: 800; color: #1f1d1a; letter-spacing: -.3px; }
.mic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: inherit; opacity: .75; }
.mic:active { background: rgba(0,0,0,.06); }
.mic svg { width: 22px; height: 22px; }
.mhead .mic { color: #1f1d1a; }
.mdot { width: 10px; height: 10px; border-radius: 50%; background: #bbb; }
.mdot[data-s="ok"] { background: #1fa36b; }
.mdot[data-s="busy"] { background: #f0b429; animation: blink .8s infinite alternate; }
.mdot[data-s="err"] { background: #e5484d; }
.mcards { columns: 2; column-gap: 10px; padding: 6px 14px 120px; }
.mcard { display: inline-block; width: 100%; margin: 0 0 10px; break-inside: avoid; text-align: start; padding: 14px 14px 12px; border-radius: 18px;
  background: var(--cp); color: var(--ci); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); transition: transform .12s; -webkit-touch-callout: none; }
.mcard:active { transform: scale(.97); }
.mcard .mt { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.35; margin-bottom: 6px; overflow-wrap: anywhere; }
.mcard .mp { font-size: 12.5px; line-height: 1.6; opacity: .85; }
.mcard .mp div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .mp .h { font-weight: 700; }
.mcard .mp .x { text-decoration: line-through; opacity: .55; }
.mcard .mi { display: flex; gap: 4px; margin-top: 8px; }
.mcard .mi img { flex: 1; min-width: 0; height: 52px; object-fit: cover; border-radius: 8px; }
.mprog { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ci) 14%, transparent); margin-top: 10px; overflow: hidden; }
.mprog i { display: block; height: 100%; background: var(--ca); border-radius: 4px; }
.mcard small { display: block; margin-top: 5px; font-size: 11px; opacity: .65; font-weight: 600; }
.mempty { text-align: center; color: #999; margin-top: 30vh; }
.mfab { position: fixed; z-index: 5; left: 20px; bottom: calc(env(safe-area-inset-bottom) + 22px); width: 60px; height: 60px; border-radius: 20px;
  background: #1f1d1a; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .12s; }
.mfab:active { transform: scale(.92); }
.mfab svg { width: 28px; height: 28px; stroke-width: 2.4; }

/* شاشة النوت */
body.m.m-note .mtop { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 2px; background: var(--paper); }
.mback { display: flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 600; color: var(--accent); padding: 8px 6px; }
.mback svg { width: 22px; height: 22px; stroke-width: 2.4; }
body.m.m-note .paper { padding: 0 16px calc(env(safe-area-inset-bottom) + 110px); animation: pushIn .22s ease; }
@keyframes pushIn { from { opacity: 0; transform: translateX(-24px); } }
body.m .row { padding-block: 4px; border-radius: 10px; touch-action: pan-y; }
body.m .row:hover { background: none; }
body.m .chk { width: 24px; height: 24px; margin-top: calc((1.65em - 24px) / 2); }
body.m .row.head .chk { width: 24px; height: 24px; }
body.m .row.swiping { transition: none; background: var(--hover); }
body.m .row:not(.swiping) { transition: transform .2s ease, background .2s; }
body.m .row[data-sw="done"] { background: color-mix(in srgb, #1fa36b 22%, transparent) !important; }
body.m .row[data-sw="del"] { background: color-mix(in srgb, #e5484d 22%, transparent) !important; }

/* الشريط يلي تحت */
body.m.m-note .mdock { display: flex; position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
  justify-content: space-around; padding: 6px; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(0,0,0,.14), 0 0 0 1px var(--hair); transition: transform .12s; }
.mdock button { width: 44px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); font-size: 17px; }
.mdock button:active { background: var(--hover); }
.mdock svg { width: 22px; height: 22px; }
.mdock .mkb { display: none; }
body.m-typing .mdock .mkb { display: grid; }
body.m-typing .mdock { bottom: 6px; }

/* القوائم من تحت */
.msheetwrap { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.35); }
.msheetwrap.open { display: block; animation: fade .15s ease; }
.msheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 18px); animation: up .22s cubic-bezier(.2,.8,.2,1); max-height: 80vh; overflow-y: auto; }
@keyframes up { from { transform: translateY(100%); } }
.msheet .grab { width: 40px; height: 5px; border-radius: 5px; background: var(--hair); margin: 2px auto 12px; }
.msheet h4 { margin: 0 4px 12px; font-size: 15px; }
.mswrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 4px 0 14px; }
.msw { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.msw.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.msw.none { background: var(--hover); font-size: 14px; color: var(--muted); }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mgrid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px; border-radius: 14px; background: var(--hover); color: var(--ink); }
.mgrid button span { font-size: 11px; font-weight: 600; opacity: .8; }
.mgrid button.on { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.mgrid button.red span, .mrow.red { color: #e5484d; }
.mrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 14px 10px; font-size: 15px; border-radius: 12px; }
.mrow:active { background: var(--hover); }

.mundo { position: fixed; z-index: 35; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 76px); transform: translate(-50%, 20px); opacity: 0;
  pointer-events: none; background: #1f1d1a; color: #fff; padding: 10px 18px; border-radius: 14px; font-size: 13.5px; transition: .2s; white-space: nowrap; }
.mundo.open { display: block; opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mundo b { color: #f0b429; }
body.m .toast { bottom: calc(env(safe-area-inset-bottom) + 80px); }
body.m .ios-tip { bottom: calc(env(safe-area-inset-bottom) + 96px); }



body.m { transition: none; }

/* ===== التسجيل الصوتي ===== */
.micbtn { width: 28px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); flex: none; }
.micbtn:hover { color: #e5484d; background: var(--hover); }
.recbar { position: fixed; z-index: 48; left: 50%; bottom: 12px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 22px; background: #1f1d1a; color: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.2,.8,.2,1); width: max-content; max-width: calc(100% - 20px); }
.recbar.open { transform: translate(-50%, 0); }
.rstop { width: 40px; height: 40px; border-radius: 50%; background: #e5484d; display: grid; place-items: center; flex: none; }
.rstop i { width: 13px; height: 13px; border-radius: 3px; background: #fff; }
.rinfo { display: flex; align-items: center; gap: 7px; padding: 0 4px; min-width: 110px; }
.rinfo b { font-variant-numeric: tabular-nums; font-size: 14px; }
.rinfo small { opacity: .65; font-size: 12px; }
.rdot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; animation: blink .7s infinite alternate; }
.rjump { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; background: #f0b429; color: #1f1d1a; font-weight: 800; font-size: 14px; }
.rjump svg { width: 18px; height: 18px; stroke-width: 2.4; }
.rjump.pop { animation: pop .25s ease; }
@keyframes pop { 50% { transform: scale(1.12); } }
.row.rec-live { background: color-mix(in srgb, #e5484d 10%, transparent) !important; }
.row.rec-live .txt:empty::before { content: 'عم يسمعك…'; color: var(--muted); }
.row.rec-wait .txt:empty::before { content: '🎙️ …'; color: var(--muted); }
.row.rec-busy .txt:empty::before { content: 'عم يكتب…'; color: var(--muted); animation: blink .7s infinite alternate; }
.sttbox hr { border: 0; border-top: 1px solid var(--hair); margin: 14px 0 12px; }
.sttbox h3 { font-size: 14px !important; }
.sttbox[hidden] { display: none; }
body.m .recbar { bottom: calc(env(safe-area-inset-bottom) + 12px); }
body.m.recording .mdock { display: none !important; }
body.m .mfab2 { left: auto; right: 20px; background: #e5484d; color: #fff; }
body.m .mfab2 svg { width: 26px; height: 26px; stroke-width: 2; }

.mdock .mmic { color: #e5484d; }

/* ===== ✨ وقوائم التطبيق ===== */
.rai { display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border-radius: 20px; background: linear-gradient(135deg, #7c5ce0, #2e86de); color: #fff; font-weight: 800; font-size: 13.5px; }
.rai svg { width: 17px; height: 17px; stroke-width: 2; }
.row.ai-busy { animation: aiPulse 1s infinite alternate; }
@keyframes aiPulse { to { background: color-mix(in srgb, #7c5ce0 18%, transparent); } }
.mlist { display: flex; flex-direction: column; gap: 2px; }
.mlist button { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 12px; font-size: 15px; color: var(--ink); text-align: start; }
.mlist button:active, .mlist button:hover { background: var(--hover); }
.mlist button svg { width: 21px; height: 21px; opacity: .8; }
.mlist .red { color: #e5484d; }
.lsprev { font-size: 14px; color: var(--muted); padding: 0 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.isprev { display: grid; place-items: center; padding-bottom: 12px; }
.isprev img { max-height: 160px; max-width: 100%; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
body:not(.m) .msheet { left: 50%; right: auto; width: min(420px, 100%); transform: translateX(-50%); border-radius: 20px 20px 0 0; }
body:not(.m) .msheet { animation: upc .2s cubic-bezier(.2,.8,.2,1); }
@keyframes upc { from { transform: translate(-50%, 100%); } }

/* الهاتف: لا تحديد ولا قوائم متصفح، إلا وقت الكتابة */
body.m { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.m .txt { -webkit-user-select: text; user-select: text; }
body.m .txt:focus, body.m input, body.m .title { -webkit-user-select: text; user-select: text; }
body.m img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
body.m ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
body.m .txt, body.m .title, body.m input { caret-color: var(--accent); }

/* شريط التسجيل: مخفي كليًا لما ما في تسجيل */
.recbar:not(.open) { visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 60px)); }
.recbar { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility .25s; }
body.m .recbar { left: 8px; right: 8px; width: auto; max-width: none; transform: none; bottom: calc(env(safe-area-inset-bottom) + 4px);
  justify-content: space-between; padding: 10px; border-radius: 26px; }
body.m .recbar:not(.open) { transform: translateY(calc(100% + 60px)); }
body.m .recbar .rinfo { flex: 1; justify-content: center; min-width: 0; }
body.m .rstop { width: 48px; height: 48px; }
body.m .rai, body.m .rjump { height: 48px; border-radius: 24px; padding: 0 14px; font-size: 14.5px; }
body.m .recbar.open { transform: none; }

/* ===== الشاشة الرئيسية بالكمبيوتر ===== */
.dhomep { display: none; }
#homeBtn.on { opacity: 1; color: var(--accent); background: var(--hover); }
body.dhome .tabs, body.dhome .toolbar, body.dhome .paper, body.dhome .footer { display: none !important; }
body.dhome .dhomep { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding: 12px 12px 16px; animation: fade .15s ease; }
body.dhome .dhomep::-webkit-scrollbar { width: 3px; }
body.dhome .dhomep::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 3px; }
.dbar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; }
.dbar > div { flex: 1; display: flex; flex-direction: column; }
.dbar b { font-size: 17px; font-weight: 800; }
.dbar small { font-size: 11.5px; color: var(--muted); }
.dbtn { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 700; }
.dbtn svg { width: 15px; height: 15px; stroke-width: 2.2; }
.dbtn.red { background: #e5484d; color: #fff; }
.dbtn:hover { filter: brightness(1.1); }
.dcards { columns: 170px; column-gap: 10px; }
.dcards .mcard { cursor: pointer; }
.dcards .mcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.1); }
.dcards .mcard.cur { box-shadow: 0 0 0 2px var(--ca), 0 4px 14px rgba(0,0,0,.08); }
.dhint { text-align: center; font-size: 11px; color: var(--muted); margin: 8px 0 0; }

/* زر التسجيل بالكمبيوتر أوضح */
.micbtn { width: auto; height: 26px; padding: 0 9px 0 7px; gap: 4px; display: flex; align-items: center; border-radius: 13px;
  background: color-mix(in srgb, #e5484d 12%, transparent); color: #e5484d; font-size: 12px; font-weight: 700; }
.micbtn svg { width: 15px; height: 15px; }
.micbtn:hover { background: #e5484d; color: #fff; }
.sttbox.flash { animation: flash .6s 3; border-radius: 12px; }
@keyframes flash { 50% { background: color-mix(in srgb, #f0b429 30%, transparent); } }

/* ===== المجلدات ===== */
.fcard { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; text-align: start; min-width: 0;
  background: color-mix(in srgb, var(--cp) 70%, #fff 30%); color: var(--ci); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.05), inset 0 0 0 1.5px color-mix(in srgb, var(--ca) 35%, transparent);
  transition: transform .12s, box-shadow .12s; cursor: pointer; -webkit-touch-callout: none; }
.fcard svg { width: 26px; height: 26px; flex: none; color: var(--ca); fill: color-mix(in srgb, var(--ca) 22%, transparent); stroke-width: 1.7; }
.fcard b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard small { font-size: 11px; opacity: .6; font-weight: 600; flex: none; }
.fcard:active { transform: scale(.97); }
.fcard:hover { transform: translateY(-1px); }
.fcard.over, .dback.over { box-shadow: 0 0 0 3px var(--ca, var(--accent)); transform: scale(1.03); }
.dfolders, .mfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dfolders:empty, .mfolders:empty { display: none; }
.mfolders { padding: 6px 14px 4px; margin-bottom: 4px; grid-template-columns: 1fr 1fr; }
.dback, .mfback { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); }
.dback:hover { background: var(--hover); }
.dback svg { width: 20px; height: 20px; stroke-width: 2.4; }
.dback[hidden], .mfback[hidden] { display: none; }
.mhead .mfback { color: #1f1d1a; opacity: 1; }
.dbtn.ghost { background: var(--hover); color: var(--ink); }
.dempty { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 10px; column-span: all; }
.mcard.dragging { opacity: .4; }
.sinput { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--hover); border: 1.5px solid transparent; border-radius: 12px; padding: 11px 13px; outline: 0; margin-bottom: 12px; }
.sinput:focus { border-color: var(--accent); }
.mlist .fdot { width: 14px; height: 14px; border-radius: 4px; background: var(--ca); margin: 0 3px; flex: none; }
.msheet .mok { margin-top: 2px; }


.dcards { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-items: start; }
.dcards .mcard { margin: 0; }
.dcards .dempty { grid-column: 1 / -1; }
.mcards { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.mcards .mcard { margin: 0; }

/* =====================================================================
   Liquid Glass (الهاتف) — زجاج متل iOS 26
   ===================================================================== */
body.m {
  --g-bg: rgba(255,255,255,.55); --g-brd: rgba(255,255,255,.7); --g-hi: rgba(255,255,255,.95);
  --g-sh: 0 12px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
  --g-ink: #1c1c1e; --g-muted: rgba(60,60,67,.62); --g-hover: rgba(120,120,128,.14); --g-hair: rgba(60,60,67,.16);
  --g-plat: rgba(255,255,255,.42);
  --spring: cubic-bezier(.3,1.55,.5,1);
}
body.m.th-dark {
  --g-bg: rgba(44,44,48,.52); --g-brd: rgba(255,255,255,.16); --g-hi: rgba(255,255,255,.3);
  --g-sh: 0 12px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --g-ink: #f5f5f7; --g-muted: rgba(235,235,245,.6); --g-hover: rgba(120,120,128,.26); --g-hair: rgba(255,255,255,.12);
  --g-plat: rgba(255,255,255,.08);
}
/* سطح الزجاج */
body.m .msheet, body.m .mdock, body.m .mfab, body.m .recbar, body.m .toast, body.m .mundo, body.m .modal .card,
body.m .ios-tip, body.m .mhead .mic, body.m .mtop .mic, body.m .mtop .mback, body.m .tseg {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  border: .5px solid var(--g-brd);
  box-shadow: inset 0 1px .5px var(--g-hi), inset 0 -.5px .5px rgba(255,255,255,.18), var(--g-sh) !important;
  color: var(--g-ink) !important;
}
/* لمعة الزجاج */
body.m .msheet::before, body.m .mdock::before, body.m .mfab::before, body.m .recbar::before, body.m .modal .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.16) 100%);
  mix-blend-mode: soft-light;
}
body.m .modal .card { position: relative; border-radius: 32px; }
body.m .modal { background: rgba(0,0,0,.22); }

/* الحركة: ضغطة نابضة متل الآيفون */
body.m button { transition: transform .5s var(--spring), background-color .2s, opacity .2s, filter .2s; }
body.m button:active { transform: scale(.9); transition-duration: .1s; filter: brightness(1.06); }
body.m .mcard:active, body.m .fcard:active { transform: scale(.96); }
.bounce { animation: bounce .5s var(--spring); }
@keyframes bounce { 35% { transform: scale(1.12); } 70% { transform: scale(.97); } }

/* القائمة من تحت: عائمة ومدوّرة */
body.m .msheetwrap { background: rgba(0,0,0,.18); }
body.m .msheet {
  left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); border-radius: 38px;
  padding: 8px 18px 20px; max-height: 80vh;
  --ink: var(--g-ink); --muted: var(--g-muted); --hover: var(--g-hover); --hair: var(--g-hair);
  animation: lgUp .55s cubic-bezier(.2,1.25,.4,1);
}
@keyframes lgUp { 0% { transform: translateY(105%) scale(.94); opacity: .6; } 100% { transform: none; opacity: 1; } }
body.m .msheet .grab { background: var(--g-hair); }
body.m .mgrid button, body.m .mlist button, body.m .mrow { background: var(--g-plat); border-radius: 18px; }
body.m .mlist { gap: 6px; }
body.m .mgrid button { border-radius: 20px; }
body.m .mgrid button.on { background: color-mix(in srgb, var(--accent) 30%, var(--g-plat)); }
body.m .msheet .mok { border-radius: 18px; }
body.m .sinput, body.m .card input { background: var(--g-plat); border-radius: 16px; }

/* الشريط يلي تحت والأزرار العائمة */
body.m.m-note .mdock { border-radius: 30px; padding: 7px; }
body.m .mdock button { border-radius: 20px; color: var(--g-ink); }
body.m .mdock .mmic { color: #ff453a; }
body.m .mfab { border-radius: 50%; color: var(--g-ink) !important; }
body.m .mfab2 { color: #ff453a !important; }
body.m .recbar { border-radius: 34px; }
body.m .recbar .rinfo b, body.m .recbar .rinfo small { color: var(--g-ink); }
body.m .rstop { background: #ff453a; box-shadow: 0 4px 14px rgba(255,69,58,.4); }
body.m .rjump { background: rgba(255,214,10,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
body.m .rai { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(124,92,224,.35); }
body.m .mhead .mic, body.m .mtop .mic { width: 42px; height: 42px; border-radius: 50%; opacity: 1; }
body.m .mtop .mback { border-radius: 22px; padding: 8px 14px 8px 10px; }
body.m.m-note .mtop { background: transparent; padding: 8px 10px 4px; }
body.m .toast { border-radius: 22px; padding: 10px 18px; }
body.m .mundo { border-radius: 22px; }
body.m .mundo b { color: #ff9f0a; }
body.m .ios-tip { border-radius: 28px; }

/* ===== صفحة التخصيص ===== */
.thead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 14px; }
.thead svg { width: 24px; height: 24px; opacity: .85; }
.thead h4 { flex: 1; text-align: center; margin: 0 !important; font-size: 19px !important; font-weight: 700; }
.thead span { width: 24px; }
.ttiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ttiles button { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 0; background: none !important; color: inherit; }
.ttiles button span { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 16px; transition: background .3s; }
.ttiles button.on span { background: var(--g-plat); box-shadow: inset 0 .5px 0 var(--g-hi), 0 2px 8px rgba(0,0,0,.08); }
.tprev { width: 64px; height: 64px; border-radius: 17px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 11px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .5s var(--spring); }
.ttiles button.on .tprev { transform: scale(1.06); box-shadow: 0 0 0 2.5px var(--g-ink), 0 6px 18px rgba(0,0,0,.25); }
.tprev i { width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 8px; left: 8px; }
.tprev b { display: block; height: 4px; border-radius: 3px; margin-top: 2px; }
.tprev b:first-of-type { margin-top: 16px; width: 70%; } .tprev b:nth-of-type(2) { width: 90%; } .tprev b:nth-of-type(3) { width: 55%; }
.tp-standard { background: linear-gradient(160deg, #fff6cc, #ffe6a8); } .tp-standard i { background: #e2a400; } .tp-standard b { background: rgba(61,50,0,.55); }
.tp-dark { background: #1c1c1e; } .tp-dark i { background: #ffd60a; } .tp-dark b { background: rgba(255,255,255,.7); }
.tp-glass { background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.18); }
.tp-glass i { background: rgba(255,255,255,.95); } .tp-glass b { background: rgba(255,255,255,.85); }
.tp-tint { background: color-mix(in srgb, var(--tint, #c08552) 22%, #1a1714); } .tp-tint i { background: var(--tint, #c08552); } .tp-tint b { background: color-mix(in srgb, var(--tint, #c08552) 70%, #fff); }
.ttints { display: flex; justify-content: center; gap: 12px; padding: 16px 0 2px; }
.ttints[hidden] { display: none; }
.ttints button { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ttints button.on { box-shadow: 0 0 0 2.5px var(--g-bg), 0 0 0 4.5px var(--g-ink); }
.tseg { display: flex; margin: 18px auto 4px; width: fit-content; padding: 4px; border-radius: 24px; position: relative; }
.tseg button { padding: 9px 24px; border-radius: 20px; font-size: 15px; font-weight: 600; color: var(--g-muted); background: none; }
.tseg button.on { background: var(--g-plat); color: var(--g-ink); box-shadow: inset 0 .5px 0 var(--g-hi), 0 2px 10px rgba(0,0,0,.1); }
.tnote { text-align: center; font-size: 11.5px; color: var(--g-muted); margin: 10px 0 0; }

/* ===== داكن ===== */
body.m.th-dark:not(.m-note) { background: #000; }
body.m.th-dark .mhead { background: rgba(0,0,0,.6); }
body.m.th-dark .mhead h1 { color: #f5f5f7; }
body.m.th-dark .mcard, body.m.th-dark .fcard {
  background: color-mix(in srgb, var(--cp) 11%, #1c1c1e); color: color-mix(in srgb, var(--cp) 35%, #f2f2f7);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.4);
}
body.m.th-dark .mprog { background: rgba(255,255,255,.1); }
body.m.th-dark .mempty { color: #8e8e93; }

/* ===== ملوّن ===== */
body.m.th-tint:not(.m-note) { background: color-mix(in srgb, var(--tint) 10%, #0b0b0b); }
body.m.th-tint .mhead { background: color-mix(in srgb, color-mix(in srgb, var(--tint) 10%, #0b0b0b) 70%, transparent); }
body.m.th-tint .mcard, body.m.th-tint .fcard {
  --ca: var(--tint);
  background: color-mix(in srgb, var(--tint) 17%, #161514); color: color-mix(in srgb, var(--tint) 30%, #f5f5f5);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--tint) 35%, transparent), 0 2px 10px rgba(0,0,0,.4);
}
body.m.th-tint .mfab2 { color: var(--tint) !important; }

/* ===== زجاجي ===== */
body.m.th-glass, body.m.th-glass:not(.m-note) {
  background:
    radial-gradient(60% 45% at 15% 8%, #ffb38a 0, transparent 70%),
    radial-gradient(55% 40% at 90% 25%, #8fc1ff 0, transparent 70%),
    radial-gradient(60% 45% at 30% 75%, #c4a6ff 0, transparent 70%),
    radial-gradient(50% 40% at 95% 95%, #8de0bf 0, transparent 70%),
    #eee8f2;
  background-attachment: fixed;
}
body.m.th-glass.th-dark, body.m.th-glass.th-dark:not(.m-note) {
  background:
    radial-gradient(60% 45% at 15% 8%, #6b3a2a 0, transparent 70%),
    radial-gradient(55% 40% at 90% 25%, #1f3d66 0, transparent 70%),
    radial-gradient(60% 45% at 30% 75%, #3d2a66 0, transparent 70%),
    radial-gradient(50% 40% at 95% 95%, #1d4a3b 0, transparent 70%),
    #0c0c10;
  background-attachment: fixed;
}
body.m.th-glass .mhead { background: transparent; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.m.th-glass .mcard, body.m.th-glass .fcard {
  background: color-mix(in srgb, var(--cp) 34%, rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.55), 0 8px 26px rgba(0,0,0,.1);
  position: relative;
}
body.m.th-glass.th-dark .mcard, body.m.th-glass.th-dark .fcard {
  background: color-mix(in srgb, var(--cp) 12%, rgba(40,40,46,.42)); color: color-mix(in srgb, var(--cp) 30%, #f5f5f7);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.25), inset 0 0 0 .5px rgba(255,255,255,.12), 0 8px 26px rgba(0,0,0,.35);
}
body.m.th-glass.th-dark .mhead h1 { color: #f5f5f7; }
body.m.th-glass.m-note {
  background:
    radial-gradient(70% 50% at 10% 0%, color-mix(in srgb, var(--accent) 40%, transparent) 0, transparent 70%),
    radial-gradient(60% 45% at 100% 60%, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 70%),
    var(--paper);
  background-attachment: fixed;
}
body.m.th-glass .row.item, body.m.th-glass .row.head { border-radius: 14px; }
.mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mfolders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard { min-width: 0; overflow: hidden; }

/* ===== سحب النوت للمجلد ===== */
.dragghost { position: fixed !important; z-index: 90; margin: 0 !important; pointer-events: none; transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 22px 50px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12) !important; opacity: .96; transition: transform .25s var(--spring, ease); animation: liftIn .25s ease; }
@keyframes liftIn { from { transform: scale(1) rotate(0); } }
.mcard.lifting { opacity: .25; transform: scale(.95); }
body.dragging-note, body.dragging-note * { cursor: grabbing !important; user-select: none !important; }
body.dragging-note .fcard, body.dragging-note [data-drop-folder] { transition: transform .3s var(--spring, ease), box-shadow .2s; }
body.dragging-note .fcard { animation: wiggle .5s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.fcard.over, [data-drop-folder].over { animation: none !important; transform: scale(1.08) !important; box-shadow: 0 0 0 3px var(--ca, var(--accent)), 0 10px 28px rgba(0,0,0,.18) !important; }
.fcard.over svg { transform: scale(1.15); }

/* ===== نقل الملفات ===== */
.fpanel { display: none; }
body.fopen .fpanel { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--paper); color: var(--ink);
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 20px); animation: fade .15s ease; }
body.m.fopen .fpanel { padding-top: calc(env(safe-area-inset-top) + 10px); }
body.m.th-dark.fopen .fpanel { background: #000; }
body.m.th-glass.fopen .fpanel { background: transparent; -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); }
.fhead { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; }
.fhead h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 800; }
.fdirect { font-size: 11.5px; font-weight: 700; color: #1fa36b; background: color-mix(in srgb, #1fa36b 14%, transparent); padding: 4px 10px; border-radius: 12px; }
.fme { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.fme input { flex: 1; font: inherit; font-size: 14px; color: var(--ink); background: var(--hover); border: 1.5px solid transparent; border-radius: 10px; padding: 7px 10px; outline: 0; }
.fme input:focus { border-color: var(--accent); }
.fpanel h5 { margin: 14px 2px 8px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.fempty { color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.8; padding: 14px 8px; margin: 0; background: var(--hover); border-radius: 14px; }
.fdev, .ffile, .fx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--hover); margin-bottom: 6px; transition: transform .2s, box-shadow .2s; }
.fdev.over { box-shadow: 0 0 0 2.5px var(--accent); transform: scale(1.02); }
.fdev > div, .ffile > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fdev b, .ffile b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdev small, .ffile small, .fx small { font-size: 11px; color: var(--muted); }
.fdev small { color: #1fa36b; font-weight: 600; }
.fdev .mok { width: auto; margin: 0; padding: 8px 14px; font-size: 12.5px; border-radius: 12px; }
.fdi, .ffi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); flex: none; }
.fdi svg, .ffi svg { width: 21px; height: 21px; }
.ffile { cursor: pointer; }
.ffile button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); opacity: .7; flex: none; }
.ffile button:hover { background: var(--hover); opacity: 1; }
.ffile button svg { width: 18px; height: 18px; }
.fx { flex-direction: column; align-items: stretch; gap: 6px; }
.fxh { display: flex; align-items: center; gap: 8px; }
.fxh b { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxh button { opacity: .6; width: 26px; height: 26px; border-radius: 8px; }
.fbar { height: 6px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.fbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #1fa36b); border-radius: 6px; transition: width .25s; }
.fin { text-align: center; padding: 4px 4px 2px; }
.fico { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.fico svg { width: 32px; height: 32px; }
.fin h4 { margin: 0 0 6px !important; }
.fin .fname { margin: 0; font-weight: 700; word-break: break-all; }
.fin small { color: var(--muted); }
.fbtns { display: flex; gap: 8px; margin-top: 16px; }
.fbtns .mok { flex: 2; margin: 0; }
.fno { flex: 1; border-radius: 12px; background: var(--hover); font-weight: 700; color: var(--ink); }
body.m .fdev, body.m .ffile, body.m .fx, body.m .fempty { background: var(--g-plat); border-radius: 20px; }
body.m.fopen .mfab, body.m.fopen .mdock { display: none !important; }

/* ================= الشات ================= */
.toast { z-index: 80; }
.cbtn { position: relative; }
.cbadge { position: absolute; top: 1px; left: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #ff3b30; color: #fff; font: 700 10px/16px system-ui; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.cbadge[hidden] { display: none; }
.chatonly { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--hover); font-weight: 700; color: var(--ink); }
.chatonly[hidden] { display: none; }
.chat { display: none; }
body.copen .chat { display: flex; position: fixed; inset: 0; z-index: 42; background: var(--paper); color: var(--ink); animation: fade .15s ease; }
body.m.copen .chat { padding-top: env(safe-area-inset-top); }
body.m.th-dark.copen .chat { background: #000; }
body.m.th-glass.copen .chat { background: transparent; -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); }
.chat > div { display: none; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.chat.v-auth .cauth, .chat.v-list .clist, .chat.v-conv .cconv { display: flex; }
@media (min-width: 900px) { body:not(.m) .chat.v-conv .clist { display: flex; flex: 0 0 340px; border-inline-end: 1px solid var(--hair); } }

/* دخول */
.cauth { align-items: center; justify-content: center; padding: 24px; text-align: center; position: relative; overflow-y: auto; }
.cauth .cx { position: absolute; top: 10px; right: 10px; }
.clogo { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; color: #fff; margin-bottom: 14px;
  background: linear-gradient(135deg, #34c759, #0a84ff); box-shadow: 0 12px 30px rgba(10,132,255,.35), inset 0 1px 0 rgba(255,255,255,.5); animation: lgUp .5s cubic-bezier(.2,1.3,.4,1); }
.clogo svg { width: 40px; height: 40px; stroke-width: 1.7; }
.cauth h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.cauth p { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.cauth input { width: min(320px, 100%); font: inherit; font-size: 16px; color: var(--ink); background: var(--hover); border: 1.5px solid transparent; border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; outline: 0; text-align: center; }
.cauth input:focus { border-color: #0a84ff; }
.chat:not(.signup) .only-signup { display: none; }
.cerr { min-height: 20px; color: #ff3b30; font-size: 12.5px; margin-bottom: 4px; }
.cgo { width: min(320px, 100%); padding: 14px; border-radius: 14px; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #34c759, #0a84ff); box-shadow: 0 8px 20px rgba(10,132,255,.3); }
.cgo:disabled { opacity: .6; }
.cswitch { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cswitch b { color: #0a84ff; }

/* القائمة */
.chead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.chead h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 800; }
.cme { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px; background: var(--hover); font-size: 12.5px; color: var(--ink); }
.cme .cav { width: 26px; height: 26px; font-size: 12px; }
.csearch { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 0 12px; border-radius: 14px; background: var(--hover); flex: none; }
.csearch svg { width: 18px; height: 18px; opacity: .5; }
.csearch input { flex: 1; font: inherit; font-size: 15px; border: 0; outline: 0; background: none; color: var(--ink); padding: 10px 0; }
.cconvs { flex: 1; overflow-y: auto; padding: 0 6px 20px; }
.cconvs h5 { margin: 6px 10px; font-size: 12px; color: var(--muted); }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 16px; text-align: start; color: var(--ink); }
.crow:hover, .crow:active { background: var(--hover); }
.cavw { position: relative; flex: none; }
.cav { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #fff; flex: none;
  background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 70% 46%)); }
.con { position: absolute; bottom: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2.5px var(--paper); }
.cmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmid b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmid span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow.unread .cmid span { color: var(--ink); font-weight: 600; }
.cend { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cend small { font-size: 11px; color: var(--muted); }
.crow.unread .cend small { color: #34c759; font-weight: 700; }
.cend em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #34c759; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; }
.cempty { color: var(--muted); text-align: center; font-size: 13px; padding: 20px; }
.cempty.big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 18vh; }
.cempty .cbig { font-size: 48px; }
.cempty b { color: var(--ink); font-size: 16px; }

/* المحادثة */
.cconv .chead { border-bottom: .5px solid var(--hair); background: color-mix(in srgb, var(--paper) 85%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 2; }
.cconv .chead .cav { width: 38px; height: 38px; font-size: 16px; }
.cwho { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cwho b { font-size: 15.5px; }
.cwho small { font-size: 11.5px; color: var(--muted); min-height: 14px; }
.cwho small.on { color: #34c759; font-weight: 600; }
.clock { font-size: 13px; opacity: .55; }
.cmsgs { flex: 1; overflow-y: auto; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 3px;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
.cmsgs.drop { outline: 3px dashed #0a84ff; outline-offset: -8px; }
.chello { margin: auto; text-align: center; color: var(--muted); font-size: 15px; line-height: 2; }
.cday { text-align: center; margin: 10px 0 6px; }
.cday span { font-size: 11.5px; padding: 4px 12px; border-radius: 10px; background: var(--hover); color: var(--muted); font-weight: 600; }
.cm { display: flex; }
.cm.in { justify-content: flex-start; }
.cm.out { justify-content: flex-end; }
.cm.pop .cb { animation: bubIn .32s cubic-bezier(.2,1.4,.4,1); }
@keyframes bubIn { from { transform: scale(.7) translateY(10px); opacity: 0; } }
.cb { max-width: min(78%, 520px); padding: 7px 11px 5px; border-radius: 18px; position: relative; box-shadow: 0 1px 1.5px rgba(0,0,0,.08);
  background: color-mix(in srgb, var(--paper) 70%, #fff 30%); color: var(--ink); }
.cm.in .cb { border-start-start-radius: 6px; }
.cm.out .cb { border-start-end-radius: 6px; background: linear-gradient(135deg, #34c759, #30b0c7); color: #fff; }
.ctx { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.45; }
.ctx a { color: inherit; text-decoration: underline; }
.cmeta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10.5px; opacity: .7; margin-top: 2px; direction: ltr; }
.tick { font-size: 11px; letter-spacing: -3px; padding-right: 3px; }
.tick.read { color: #fff; opacity: 1; text-shadow: 0 0 6px rgba(255,255,255,.8); font-weight: 900; }
.tick.fail { color: #ff3b30; letter-spacing: 0; font-weight: 900; }
.cm.out .cmeta { color: #fff; }
.cimg { display: block; max-width: 260px; max-height: 320px; width: 100%; object-fit: cover; border-radius: 12px; margin: -2px -6px 2px; cursor: zoom-in; }
.t-img .cb { padding: 4px 4px 3px; }
.t-img .cmeta { padding: 0 6px 1px; }
.cvoice { display: flex; align-items: center; gap: 9px; min-width: 210px; padding: 2px 0; direction: ltr; }
.cplay { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); flex: none; color: inherit; }
.cm.in .cplay { background: #34c759; color: #fff; }
.cplay svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.cm.playing .cplay svg { display: none; }
.cm.playing .cplay::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.cwave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; --p: 0; cursor: pointer; }
.cwave i { flex: 1; height: calc(var(--v) * 100%); min-height: 3px; border-radius: 2px; background: currentColor; opacity: .38; }
.cwave i:nth-child(-n+36) { opacity: .38; }
.cdur { font-size: 11px; opacity: .8; min-width: 30px; font-variant-numeric: tabular-nums; }
.cm.playing .cwave i { transition: opacity .1s; }
.cfile { display: flex; align-items: center; gap: 10px; min-width: 200px; cursor: pointer; }
.cfile .ffi { background: rgba(255,255,255,.25); color: inherit; }
.cm.in .cfile .ffi { background: color-mix(in srgb, #0a84ff 15%, transparent); color: #0a84ff; }
.cfile div { display: flex; flex-direction: column; min-width: 0; }
.cfile b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cfile small { font-size: 11px; opacity: .75; }

/* شريط الكتابة */
.ccomp { display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); flex: none; position: relative;
  background: color-mix(in srgb, var(--paper) 88%, transparent); border-top: .5px solid var(--hair); }
#cText { flex: 1; font: inherit; font-size: 16px; color: var(--ink); background: var(--hover); border: 0; border-radius: 20px; padding: 9px 14px; outline: 0; resize: none; max-height: 140px; line-height: 1.4; }
.cic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; opacity: .8; }
.cic svg { width: 22px; height: 22px; }
.csend { background: linear-gradient(135deg, #34c759, #0a84ff); color: #fff; opacity: 1; transform: rotate(180deg); display: none; }
.csend svg { fill: currentColor; stroke: none; }
.cmic { background: color-mix(in srgb, #34c759 16%, transparent); color: #34c759; opacity: 1; }
.ccomp.typing .csend { display: grid; animation: pop .25s ease; }
.ccomp.typing .cmic { display: none; }
.crec { display: none; position: absolute; inset: 0; align-items: center; gap: 10px; padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); background: inherit; }
.ccomp.rec .crec { display: flex; }
.crec .cic:first-child { color: #ff3b30; }
.crdot { width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; transform: scale(calc(1 + var(--lv, 0) * .9)); transition: transform .1s; box-shadow: 0 0 0 calc(var(--lv, 0) * 10px) rgba(255,59,48,.18); }
.crec b { font-variant-numeric: tabular-nums; font-size: 15px; }
.crec span { flex: 1; color: var(--muted); font-size: 13px; }
.crec .csend { display: grid; }

/* شريط الإشعار */
.cbanner { position: fixed; z-index: 85; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translate(-50%, -140%); width: min(380px, calc(100% - 16px));
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; cursor: pointer;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); color: #1c1c1e;
  box-shadow: 0 12px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .45s cubic-bezier(.2,1.3,.4,1); }
.cbanner.show { transform: translate(-50%, 0); }
.cbanner .cav { width: 40px; height: 40px; font-size: 16px; }
.cbanner div { display: flex; flex-direction: column; min-width: 0; }
.cbanner b { font-size: 14px; }
.cbanner span { font-size: 13px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m.th-dark .cbanner { background: rgba(40,40,44,.72); color: #f5f5f7; }
body.m.copen .mfab, body.m.copen .mdock { display: none !important; }
body.m .cb { box-shadow: 0 1px 2px rgba(0,0,0,.1); }
body.m.th-dark .cm.in .cb { background: #262628; color: #f2f2f7; }
body.m.th-glass .cm.in .cb { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cwave i.on { opacity: 1; }

.sdir { direction: ltr; text-align: center; font: 12px/1.5 Consolas, monospace !important; background: var(--hover); padding: 8px 10px; border-radius: 10px; word-break: break-all; color: var(--ink) !important; }
.sdirb { display: flex; gap: 6px; }
.sdirb button { flex: 1; padding: 9px; border-radius: 10px; background: var(--hover); font-weight: 700; color: var(--ink); font-size: 12.5px; }
.sdirb button:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* نافذة الإعدادات: بتنزل بالسكرول وفيها ✕ */
.modal .card { max-height: calc(100vh - 40px); overflow-y: auto; position: relative; scrollbar-width: thin; }
.mx { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--hover); color: var(--ink); font-size: 13px; z-index: 2; }
.mx:hover { background: #e5484d; color: #fff; }
.mx[hidden] { display: none; }

/* فيديو وصوت جوّا المعرض */
#vVid { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#vVid.aud { width: min(420px, 90%); height: 54px; background: transparent; box-shadow: none; }
#vVid[hidden], #vImg[hidden] { display: none; }
.vfolder { top: 8px; left: 50px; font-size: 16px; width: 34px; height: 34px; }
.vfolder[hidden] { display: none; }

.crem { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--muted); margin: 2px 0 6px; cursor: pointer; }
.crem input { width: 18px; height: 18px; accent-color: #0a84ff; margin: 0; }

/* ===== شاشة البداية ===== */
.launch { display: none; }
body.launching .launch { display: flex; flex-direction: column; justify-content: center; gap: 14px; position: fixed; inset: 0; z-index: 41; padding: 24px 22px;
  background: var(--paper); color: var(--ink); animation: fade .2s ease; }
body:not(.m).launching .launch, body:not(.m).copen .chat, body:not(.m).fopen .fpanel { top: 38px; }
body.m.launching .launch { padding-top: calc(env(safe-area-inset-top) + 24px); }
body.m.th-dark.launching .launch { background: #000; }
.lhead { display: flex; flex-direction: column; margin-bottom: 6px; }
.lhead b { font-size: 26px; font-weight: 800; }
.lhead small { color: var(--muted); font-size: 14px; }
.lcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 22px 20px; border-radius: 26px; text-align: start; color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .4s cubic-bezier(.3,1.5,.5,1); min-height: 150px; }
.lcard:hover { transform: translateY(-3px) scale(1.01); }
.lcard:active { transform: scale(.96); }
.lnotes { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.lchat { background: linear-gradient(135deg, #34c759, #0a84ff); }
.lic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: rgba(255,255,255,.22); margin-bottom: auto; }
.lic svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 1.8; }
.lcard b { font-size: 24px; font-weight: 800; margin-top: 14px; }
.lcard small { font-size: 13px; opacity: .9; }
.lcard .cbadge { top: 16px; left: 16px; min-width: 24px; height: 24px; line-height: 24px; font-size: 13px; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.bhome { font: inherit; font-weight: 700; color: inherit; opacity: .9; padding: 2px 6px; border-radius: 6px; }
.bhome:hover { background: var(--hover); }
@media (min-width: 700px) { body.launching .launch { flex-direction: row; flex-wrap: wrap; align-content: center; } .lhead { width: 100%; } .lcard { flex: 1; min-height: 200px; } }
body.m.launching .mfab, body.m.launching .mdock { display: none !important; }

/* ===== الملف الشخصي ===== */
.cav.img { padding: 0; overflow: hidden; background: none; }
.cav.img img { width: 100%; height: 100%; object-fit: cover; }
.prof { display: flex; flex-direction: column; text-align: start; }
.prof label { font-size: 12px; color: var(--muted); margin: 10px 2px 4px; }
.prof label small { font-size: 11px; opacity: .8; }
.prof input { font: inherit; font-size: 15px; color: var(--ink); background: var(--hover); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; outline: 0; width: 100%; }
.prof input:focus { border-color: var(--accent); }
.prof details { margin-top: 10px; } .prof summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.pav { position: relative; width: 96px; height: 96px; border-radius: 50%; margin: 4px auto 0; padding: 0; overflow: visible; }
.pav > img, .pav > .cav { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; font-size: 36px; }
.pav i { position: absolute; bottom: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-style: normal; font-size: 14px; box-shadow: 0 0 0 3px var(--paper); }
.phint { text-align: center; color: var(--muted); font-size: 11px; margin-top: 4px; }
.psec { margin-top: 14px !important; }

/* ===== بوابة الحساب + كود التأكيد ===== */
body.gate .cauth .cx, body.gate #cListClose { display: none; }
body.gate .launch { display: none !important; }
.ccode { display: none; width: min(320px, 100%); }
.chat.code .ccode { display: block; }
.chat.code #cU, .chat.code #cP, .chat.code #cP2, .chat.code #cE, .chat.code #cN, .chat.code .crem, .chat.code .cswitch { display: none; }
.ccode p { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.ccode b { color: var(--ink); direction: ltr; display: inline-block; }
#cCode { font-size: 28px !important; letter-spacing: 10px; text-align: center; font-weight: 800; direction: ltr; }
.ccodeb { display: flex; justify-content: center; gap: 18px; margin: 4px 0 8px; font-size: 13px; }
.ccodeb button { color: #0a84ff; font-weight: 600; }
body.setonly #mPass, body.setonly #mPass2, body.setonly #mOk, body.setonly #mOut, body.setonly #mChat, body.setonly #mText, body.setonly .card > .lock { display: none !important; }
body.setonly #mTitle { visibility: hidden; height: 0; margin: 0; }
body.setonly .sttbox > hr:first-child { display: none; }

/* شاشة البداية: البطاقات فوق بعض على اليمين، واليسار محجوز لشي جاي */
@media (min-width: 700px) {
  body.launching .launch { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; column-gap: 28px; row-gap: 14px; padding: 36px 32px; flex-direction: unset; flex-wrap: unset; }
  .launch .lhead { grid-column: 1; width: auto; }
  .launch .lcard { grid-column: 1; min-height: 150px; flex: none; }
  .launch::after { content: ""; grid-column: 2; grid-row: 1 / -1; } /* فاضي هلأ */
}

/* نقل فشل: زر إعادة */
.fx.err { background: color-mix(in srgb, #e5484d 10%, var(--hover)); }
.fx.err .fxmsg { color: #e5484d; font-weight: 600; }
.fretry { align-self: flex-start; margin-top: 4px; padding: 7px 14px; border-radius: 10px; background: var(--accent); color: var(--paper); font-weight: 800; font-size: 13px; }

.langsel { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #0002); background: var(--hover, #0000000a); font: inherit; color: inherit; }

/* شاشة البداية: 3 بطاقات */
@media (min-width: 700px) { body.launching .launch { grid-template-rows: repeat(4, auto) 1fr; } }
.lcal { background: linear-gradient(135deg, #ffd43b, #e2a400); }
.lcal .lic svg { stroke: #3d3200; } .lcal b, .lcal small { color: #3d3200; }
.ei { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; display: inline-block; margin: 0 .08em; flex: none; }
.pav i .ei, .lic .ei { width: 1em; height: 1em; }

/* المواعيد */
.calpage { display: none; }
body.calopen .calpage { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 42; background: var(--paper); }
body:not(.m).calopen .calpage { top: 38px; }
body.m.calopen .calpage { padding-top: env(safe-area-inset-top); }
.calhead { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.calhead b { flex: 1; font-size: 22px; font-weight: 800; }
.calback { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--hover); }
.caladd { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 800; }
.calbody { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 22px; padding: 4px 18px 24px; align-content: start; }
@media (max-width: 800px) { .calbody { grid-template-columns: 1fr; } }
.calnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calnav b { font-size: 17px; } .calnav button { width: 36px; height: 36px; border-radius: 10px; background: var(--hover); display: grid; place-items: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calgrid .wd { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.calgrid button { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--hover); font-weight: 700; }
.calgrid button.today { outline: 2px solid var(--accent); }
.calgrid button.sel { background: var(--accent); color: #fff; }
.calgrid button i { position: absolute; bottom: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
.calgrid button.sel i { background: #fff; }
.callist h4 { margin: 0 0 10px; font-size: 17px; }
.calev { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 13px 14px; margin-bottom: 8px; border-radius: 16px; background: var(--hover); }
.calev b { color: var(--accent); min-width: 56px; } .calev span { flex: 1; font-weight: 600; }
.calnone { color: var(--muted); }
/* المنبّه */
.alarm { position: fixed; z-index: 99; top: 52px; left: 50%; transform: translateX(-50%); width: min(380px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 3px var(--accent); animation: alarmpulse 1s infinite; }
.alarm b { font-size: 20px; text-align: center; } .alarm small { color: var(--muted); font-size: 14px; }
.alarmic { width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; animation: alarmshake .5s infinite; }
.alarmic svg { width: 32px; height: 32px; stroke: #fff; }
.alarmb { display: flex; gap: 8px; margin-top: 10px; width: 100%; }
.alarmb button { flex: 1; padding: 11px; border-radius: 14px; font-weight: 800; background: var(--hover); }
.alarmb .stp { background: var(--accent); color: #fff; }
@keyframes alarmpulse { 50% { box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); } }
@keyframes alarmshake { 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
.mok.red { background: #e5484d; margin-top: 8px; }
body.ltr .titlebar, body.ltr .brand { direction: ltr; }

.caltitle { font-size: 17px; font-weight: 800; padding: 6px 14px; border-radius: 12px; }
.caltitle:hover { background: var(--hover); }
.calgrid button s { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; text-decoration: none; }
.calgrid button i { position: static; margin: 0; width: 6px; height: 6px; }
.calyear { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ymo { text-align: start; padding: 10px; border-radius: 18px; background: var(--hover); transition: transform .2s; }
.ymo:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 16%, var(--hover)); }
.ymo.cur { outline: 2px solid var(--accent); }
.ymo b { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 6px; }
.ymo em { font-style: normal; font-size: 11px; background: var(--accent); color: #fff; border-radius: 99px; padding: 0 7px; }
.ymo div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ymo u { text-decoration: none; text-align: center; font-size: 9.5px; line-height: 17px; border-radius: 50%; color: var(--muted); }
.ymo u.has { background: var(--accent); color: #fff; font-weight: 800; }
.ymo u.now { outline: 1.5px solid var(--ink); }
body.ltr .calnav svg, body.ltr .calback svg { transform: scaleX(-1); }
/* إرسال نوت لصديق */
.cnote { display: flex; flex-direction: column; gap: 6px; min-width: 210px; max-width: 280px; }
.cnote .cnh { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.cnote .cnh i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cn, #ffd43b); color: #3d3200; flex: none; }
.cnote .cnh i svg { width: 18px; height: 18px; }
.cnote .cnp { font-size: 13px; opacity: .85; display: grid; gap: 2px; }
.cnote .cnp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnote .cnsave { margin-top: 4px; padding: 8px 12px; border-radius: 11px; background: rgba(255,255,255,.28); font-weight: 800; display: flex; gap: 6px; align-items: center; justify-content: center; }
.cm.in .cnote .cnsave { background: var(--accent); color: #fff; }
.cnote .cnsave.done { opacity: .6; }
.frlist { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.frlist button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--hover); text-align: start; }
.frlist button .cav, .frlist button img { width: 36px; height: 36px; flex: none; }
.frempty { color: var(--muted); padding: 10px 2px; }

/* ===== شريط العنوان: مجموعات منظمة ===== */
.titlebar { gap: 4px; padding: 0 8px; }
.tbg { display: flex; align-items: center; gap: 2px; }
.tbsep { width: 1px; height: 18px; background: var(--hair); margin: 0 6px; }
.titlebar .brand { text-align: center; font-size: 13px; opacity: .8; }
.titlebar .ico svg { width: 17px; height: 17px; }
.titlebar .ico { position: relative; width: 34px; height: 30px; }
.titlebar .cbadge { top: 0; left: 0; }
.titlebar .ico.prof { width: 34px; }
.titlebar .ico.prof span { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.titlebar .ico.prof .cav, .titlebar .ico.prof img { width: 24px; height: 24px; font-size: 12px; border-radius: 50%; object-fit: cover; }
body.launching #bHome, body.calopen #calBtn, body.copen [data-chat].cbtn { opacity: 1; color: var(--accent); background: var(--hover); }
body.hpen #homeBtn, #homeBtn.on { opacity: 1; color: var(--accent); background: var(--hover); }

/* ===== الإعدادات (نافذة منظمة) ===== */
.setcard { width: min(480px, 94vw); max-height: 88vh; overflow: auto; text-align: start; }
.setcard h3 { margin: 0 0 6px; font-size: 20px; }
.sset h4 { margin: 18px 0 6px; font-size: 13px; color: var(--muted); font-weight: 800; letter-spacing: .3px; }
.sset p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.sset input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--hair); background: var(--hover); color: inherit; font: inherit; margin-bottom: 6px; }
.sset .tseg { display: flex; gap: 6px; background: var(--hover); padding: 4px; border-radius: 14px; }
.sset .tseg button { flex: 1; padding: 9px; border-radius: 10px; font-weight: 700; }
.sset .tseg button.on { background: var(--accent); color: #fff; }
.sset .mok { width: 100%; }

/* ===== النوافذ المنبثقة على الشاشات الكبيرة (بدل ما تطلع من تحت) ===== */
@media (min-width: 700px) {
  body:not(.m) .msheetwrap.open { display: grid; place-items: center; }
  body:not(.m) .msheet { position: relative; left: auto; right: auto; bottom: auto; transform: none; width: min(460px, 92vw); max-height: 86vh; overflow: auto; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: popc .18s cubic-bezier(.2,.9,.3,1.2); }
  body:not(.m) .msheet .grab { display: none; }
}
@keyframes popc { from { opacity: 0; transform: scale(.94) translateY(8px); } }

/* ===== الوضع الليلي (كمبيوتر) ===== */
body.dk { color-scheme: dark; }
body.dk .titlebar { background: color-mix(in srgb, var(--paper) 70%, #000); }
body.dk .msheet, body.dk .setcard, body.dk .calpage, body.dk .launch { background: var(--paper); color: var(--ink); }
body.dk .cm.in .cb { background: #2a2a2d; color: #f2f2f7; }
body.dk.copen .chat, body.dk .chat { background: #111; color: #f2f2f7; }
body.dk .calgrid button, body.dk .calev, body.dk .ymo, body.dk .calback, body.dk .calnav button { background: rgba(255,255,255,.07); }
body.dk input, body.dk select, body.dk textarea { color: var(--ink); }
body.dk .alarm { background: #1c1c1e; color: #f2f2f7; }


.sset .tseg { width: 100%; display: flex; }
.sset .tseg button { white-space: nowrap; }

/* ===================== Liquid Glass (كمبيوتر/متصفح) =====================
   مستوحى من Apple Liquid Glass. للسرعة: الضبابية (backdrop-filter) بس على العناصر الصغيرة
   (الشريط، البطاقات، النوافذ المنبثقة)؛ الأسطح الكبيرة (الورقة، الشات...) زجاج "ثابت" بلا ضبابية. */
body.gl {
  --g-solid: rgba(255,255,255,.72);
  --g-soft: rgba(255,255,255,.5);
  --g-brd: rgba(255,255,255,.75);
  --g-hi: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 .5px rgba(255,255,255,.5);
  --g-sh: 0 8px 24px rgba(30,30,60,.12);
  --chrome: transparent; --hover: rgba(0,0,0,.06); --hair: rgba(0,0,0,.1);
  --muted: rgba(29,29,31,.6);
  background: radial-gradient(45% 55% at 10% 15%, color-mix(in srgb, var(--accent) 45%, #fff) 0, transparent 70%),
              radial-gradient(40% 50% at 92% 10%, #bfe0ff 0, transparent 70%),
              radial-gradient(45% 55% at 80% 92%, #ffd0e2 0, transparent 70%),
              radial-gradient(40% 50% at 15% 95%, #cff7e0 0, transparent 70%),
              #f6f3fb;
}
body.gl.dk {
  --g-solid: rgba(28,28,34,.82);
  --g-soft: rgba(44,44,52,.6);
  --g-brd: rgba(255,255,255,.12);
  --g-hi: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.08);
  --g-sh: 0 10px 28px rgba(0,0,0,.45);
  --hover: rgba(255,255,255,.08); --hair: rgba(255,255,255,.12);
  --muted: rgba(242,242,247,.6);
  background: radial-gradient(45% 55% at 10% 15%, color-mix(in srgb, var(--accent) 35%, #000) 0, transparent 70%),
              radial-gradient(40% 50% at 92% 10%, #1b2f66 0, transparent 70%),
              radial-gradient(45% 55% at 80% 92%, #4d1a3c 0, transparent 70%),
              radial-gradient(40% 50% at 15% 95%, #0f3d2c 0, transparent 70%),
              #0e0e14;
}
/* أسطح كبيرة: زجاج ثابت (سريع) */
body.gl .paper, body.gl .chat, body.gl .fpanel, body.gl .calgrid button, body.gl .calev, body.gl .ymo,
body.gl .dcards > *, body.gl .fcard, body.gl .cm.in .cb, body.gl .ccomp, body.gl .tabs .tab.active {
  background: var(--g-solid); border: 1px solid var(--g-brd); box-shadow: var(--g-hi), var(--g-sh);
}
body.gl .paper { margin: 6px 10px 10px; border-radius: 20px; background: color-mix(in srgb, var(--paper) 22%, var(--g-solid)); }
body.gl .launch, body.gl .calpage, body.gl .dhomep { background: color-mix(in srgb, var(--g-solid) 55%, transparent) !important; }
body.gl .chat, body.gl .fpanel { background: var(--g-solid) !important; }
/* عناصر صغيرة: زجاج حقيقي مع ضبابية */
body.gl .titlebar, body.gl .lcard, body.gl .msheet, body.gl .modal .card, body.gl .toast, body.gl .alarm, body.gl .caladd {
  background: var(--g-soft); border: 1px solid var(--g-brd); box-shadow: var(--g-hi), var(--g-sh);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
body.gl .msheet, body.gl .modal .card { background: var(--g-solid); }
body.gl .titlebar { margin: 6px 8px 0; border-radius: 14px; height: 40px; }
body.gl:not(.m).launching .launch, body.gl:not(.m).calopen .calpage, body.gl:not(.m).copen .chat, body.gl:not(.m).fopen .fpanel { top: 52px; }
body.gl .tabs { background: transparent; padding: 8px 12px 0; }
body.gl .tabs .tab { background: var(--g-soft); color: var(--ink); border: 1px solid transparent; }
body.gl .toolbar, body.gl .footer { background: transparent; border-color: var(--hair); }
body.gl .lcard { isolation: isolate; overflow: hidden; color: var(--ink); }
body.gl .lcard b, body.gl .lcard small { color: var(--ink); }
body.gl .lcard .lic { background: var(--g-solid); box-shadow: var(--g-hi); }
body.gl .lcard .lic svg { stroke: var(--accent); }
body.gl .lcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .3; z-index: -1; }
body.gl .lnotes::before { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
body.gl .lchat::before { background: linear-gradient(135deg, #34c759, #0a84ff); }
body.gl .lcal::before { background: linear-gradient(135deg, #ffd43b, #e2a400); }
body.gl .calgrid button.sel, body.gl .caladd, body.gl .mok, body.gl .tseg button.on, body.gl .cm.out .cb { background: var(--accent); color: #fff; }
body.gl .mok.red { background: #e5484d; color: #fff; }
body.gl .msheetwrap, body.gl .modal { background: rgba(20,20,40,.2); }
body.gl input:not([type=checkbox]), body.gl select, body.gl textarea { background: var(--g-soft); border: 1px solid var(--g-brd); color: var(--ink); }
body.gl .ico:hover { background: var(--hover); }
body.gl .alarm { animation: none; }
/* لمعة الحافة بتلحق الماوس (رخيصة: بلا ضبابية) */
body.gl .lcard::after, body.gl .msheet::after, body.gl .modal .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px 90px at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.45), transparent 70%); mix-blend-mode: soft-light;
}
body.gl .msheet, body.gl .modal .card { position: relative; }
/* الشاشات فوق بعض بالزجاج: بتغطي يلي تحتها (نفس خلفية الزجاج) */
body.gl .launch, body.gl .calpage, body.gl .dhomep, body.gl .chat, body.gl .fpanel { background: inherit !important; }
/* الوضع الداكن: بطاقات النوتات بلونها بس غامقة */
body.dk:not(.gl) .dcards .mcard { background: color-mix(in srgb, var(--cp) 16%, #1c1c1e); color: color-mix(in srgb, var(--cp) 30%, #f2f2f7); border-color: color-mix(in srgb, var(--ca) 50%, transparent); }
body.gl .dcards .mcard { background: var(--g-solid); color: var(--ink); }
body.gl .dcards .mcard .mt { color: var(--ink); }
.caltitle { white-space: nowrap; }
body.dk select option { background: #1c1c1e; color: #f2f2f7; }

/* شريط العنوان: أزرار التنقل مع أسماء، وأدوات النافذة بقائمة وحدة */
.titlebar .ico.tool { display: none; }
.titlebar .tbg:first-child .ico { width: auto; padding: 0 9px; gap: 6px; display: inline-flex; align-items: center; }
.titlebar .tl { font-size: 12.5px; font-weight: 700; }
@media (max-width: 820px) { .titlebar .tl { display: none; } .titlebar .tbg:first-child .ico { padding: 0; width: 34px; justify-content: center; } }
.vlist { display: grid; gap: 8px; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--hover); text-align: start; }
.vrow .vic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); flex: none; }
.vrow .vic svg { width: 20px; height: 20px; }
.vrow > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.vrow b { font-size: 14px; } .vrow small { color: var(--muted); font-size: 12px; }
.vrow.on { outline: 2px solid var(--accent); }
.vrow .vck { font-style: normal; color: var(--accent); font-weight: 900; }
/* ملفاتي: فلترة وبحث */
.fhead { display: flex; align-items: center; justify-content: space-between; }
.fclr { font-size: 12px; color: #e5484d; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.fclr:hover { background: var(--hover); }
.ffilt { display: grid; gap: 6px; margin-bottom: 8px; }
.ffilt input { width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--hover); color: inherit; font: inherit; }
.ffilt .tseg { display: flex; gap: 4px; background: var(--hover); padding: 3px; border-radius: 12px; }
.ffilt .tseg button { flex: 1; padding: 6px; border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.ffilt .tseg button.on { background: var(--accent); color: #fff; }
.ffilt .tseg { width: 100%; }

/* الإشعارات */
.nhead { display: flex; align-items: center; justify-content: space-between; }
.nclr { font-size: 12.5px; font-weight: 700; color: #e5484d; padding: 4px 8px; border-radius: 8px; }
.nlist { display: grid; gap: 6px; max-height: 56vh; overflow: auto; margin: 6px 0 10px; }
.nrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--hover); text-align: start; }
.nrow.new { outline: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.nrow .nic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; }
.nrow .nic svg { width: 18px; height: 18px; stroke: #fff; }
.k-msg { background: linear-gradient(135deg, #34c759, #0a84ff); } .k-file { background: linear-gradient(135deg, #5e5ce6, #bf5af2); }
.k-cal { background: linear-gradient(135deg, #ffd43b, #e2a400); } .k-note { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.nrow .nt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nrow .nt b { font-size: 14px; } .nrow .nt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrow em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.nempty { color: var(--muted); text-align: center; padding: 18px; margin: 0; }
.nset { width: 100%; padding: 10px; border-radius: 12px; background: var(--hover); font-weight: 700; }
.titlebar #bellBtn .cbadge { top: 0; left: 0; }
.snotif { display: grid; gap: 6px; }
.nsw { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--hover); cursor: pointer; font-weight: 600; }
.nsw input { display: none; }
.nsw i { width: 40px; height: 24px; border-radius: 99px; background: var(--hair); position: relative; transition: .2s; flex: none; }
.nsw i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .2s; }
.nsw input:checked + i { background: #34c759; }
.nsw input:checked + i::after { inset-inline-start: 19px; }
.nbtns { display: flex; gap: 8px; } .nbtns .mok { flex: 1; } .mok.ghost { background: var(--hover); color: inherit; }

/* مكالمة صوتية */
.ccall { margin-inline-start: auto; }
.callui { display: none; }
.callui.on { display: flex; flex-direction: column; align-items: center; gap: 6px; position: fixed; z-index: 120; top: 60px; left: 50%; transform: translateX(-50%); width: min(340px, 92vw); padding: 26px 20px 20px; border-radius: 30px;
  background: rgba(28,28,32,.88); color: #fff; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15); animation: popc .2s; }
.callui .cav2 .cav, .callui .cav2 img { width: 84px; height: 84px; font-size: 34px; border-radius: 50%; }
.callui.out .cav2, .callui.in .cav2 { animation: callpulse 1.4s infinite; border-radius: 50%; }
@keyframes callpulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.6); } 100% { box-shadow: 0 0 0 22px rgba(52,199,89,0); } }
.callui .cnm { font-size: 20px; margin-top: 8px; } .callui .cst { opacity: .75; font-variant-numeric: tabular-nums; }
.callui .cbtns { display: flex; gap: 22px; margin-top: 16px; }
.callui .cbtns button { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; }
.callui .cbtns svg { width: 26px; height: 26px; stroke: #fff; }
.callui .cb-ok { background: #34c759; } .callui .cb-end { background: #ff3b30; } .callui .cb-end svg { transform: rotate(135deg); }
.callui .cb-mute { background: rgba(255,255,255,.18); }
.callui.muted .cb-mute { background: #fff; } .callui.muted .cb-mute svg { stroke: #111; }
.callui:not(.in) .cb-ok, .callui.in .cb-mute, .callui.out .cb-mute { display: none; }

/* الشات بالهاتف مع الكيبورد: الطول = الجزء الظاهر، والهيدر ثابت */
body.m.copen .chat { top: var(--vvt, 0); bottom: auto; height: var(--vvh, 100%); }
body.m .cconv .chead { position: sticky; top: 0; }
/* شاشة البداية: 4 بطاقات مربعة (2×2) */
@media (min-width: 700px) {
  body.launching .launch { grid-template-columns: repeat(2, minmax(150px, 210px)) 1fr; grid-template-rows: auto auto auto 1fr; }
  .launch .lhead { grid-column: 1 / span 2; }
  .launch .lcard { grid-column: auto; aspect-ratio: 1; min-height: 0; }
  .launch::after { grid-column: 3; grid-row: 1 / -1; }
}
body.m.launching .launch { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
body.m .launch .lhead { grid-column: 1 / -1; } body.m .launch .lcard { aspect-ratio: 1; min-height: 0; }
.lmap { background: linear-gradient(135deg, #5ac8fa, #34c759); }
body.gl .lmap::before { background: linear-gradient(135deg, #5ac8fa, #34c759); }
/* الخريطة */
.mappage { display: none; }
body.mapopen .mappage { display: block; position: fixed; inset: 0; z-index: 42; background: #fff6cc; }
body:not(.m).mapopen .mappage { top: 38px; } body.gl:not(.m).mapopen .mappage { top: 52px; }
#mapBox { position: absolute; inset: 0; }
.maptop { position: absolute; top: 12px; inset-inline: 12px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.maptop b { flex: 1; font-size: 20px; font-weight: 800; color: #3d3200; text-shadow: 0 1px 0 #fff; }
.maptop .calback, .mapshare, .mapme { background: rgba(255,246,204,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 20px rgba(0,0,0,.15), inset 0 1px 0 #fff; color: #3d3200; }
.mapshare { padding: 9px 14px; border-radius: 14px; font-weight: 800; font-size: 13px; }
.mapshare.on { background: #34c759; color: #fff; }
.mapme { position: absolute; bottom: 24px; inset-inline-end: 16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.mapme svg { width: 22px; height: 22px; }
.mapfr { position: absolute; bottom: 20px; inset-inline-start: 16px; z-index: 2; display: flex; gap: 8px; max-width: calc(100% - 100px); overflow-x: auto; scrollbar-width: none; }
.mapfr p { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255,246,204,.9); color: #6b5e2e; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.mapfr button { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(255,246,204,.92); color: #3d3200; box-shadow: 0 6px 20px rgba(0,0,0,.12); white-space: nowrap; }
.mapfr button .cav, .mapfr button img { width: 34px; height: 34px; border-radius: 50%; }
.mapfr button span { display: flex; flex-direction: column; text-align: start; } .mapfr small { font-size: 11px; opacity: .7; }
.mapmk { display: flex; flex-direction: column; align-items: center; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.mapmk .mav { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: #ffd84d; overflow: hidden; display: grid; place-items: center; }
.mapmk .mav .cav, .mapmk .mav img { width: 100%; height: 100%; border-radius: 50%; font-size: 20px; }
.mapmk.me .mav { border-color: #34c759; }
.mapmk b { margin-top: 3px; padding: 2px 8px; border-radius: 99px; background: #fff; color: #3d3200; font-size: 12px; }
.mapmk::after { content: ""; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); margin-top: -18px; z-index: -1; }

.sptabs { background: var(--hover); padding: 4px; border-radius: 14px; gap: 4px; }
.sptabs button { padding: 8px; border-radius: 10px; font-weight: 700; }
.sptabs button.on { background: var(--accent); color: #fff; }
/* شاشة البداية: 5 بطاقات (3 بالسطر) */
@media (min-width: 700px) {
  body.launching .launch { grid-template-columns: repeat(3, minmax(140px, 190px)) 1fr; grid-template-rows: none; grid-auto-rows: min-content; }
  .launch .lhead { grid-column: 1 / span 3; }
  .launch::after { grid-column: 4; grid-row: 1 / span 3; }
}

/* ===== سنابات ===== */
.ccam svg { stroke: var(--accent); }
.snapcam { display: none; }
.snapcam.on { display: block; position: fixed; inset: 0; z-index: 130; background: #000; color: #fff; overflow: hidden; }
.snapcam video#snapVid, .snapshot > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#snapVid.mirror { transform: scaleX(-1); }
.snapcam.editing #snapVid { display: none; }
#snapDraw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.snapcam.drawing #snapDraw { pointer-events: auto; }
.snaptxt { position: absolute; left: 0; right: 0; top: 58%; padding: 8px 16px; text-align: center; font: 800 26px system-ui, sans-serif; background: rgba(0,0,0,.45); outline: none; color: #ffd84d; }
.snaptop { position: absolute; top: calc(env(safe-area-inset-top) + 12px); inset-inline: 12px; display: flex; gap: 8px; z-index: 2; }
.snaptop .snapsp { flex: 1; }
.snaptop button, .snapbot .ed { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.snaptop svg, .snapbot svg { width: 22px; height: 22px; stroke: #fff; }
.snapcam .ed { display: none !important; } .snapcam.editing .ed { display: grid !important; } .snapcam.editing .cap { display: none !important; }
.snapcolors { position: absolute; top: calc(env(safe-area-inset-top) + 66px); inset-inline-end: 16px; display: none; flex-direction: column; gap: 10px; z-index: 2; }
.snapcam.editing .snapcolors { display: flex; }
.snapcolors i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; } .snapcolors i.on { transform: scale(1.25); }
.snapcam.drawing [data-a="draw"] { background: #ffd84d; } .snapcam.drawing [data-a="draw"] svg { stroke: #111; }
.snapbot { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 28px); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 2; }
.shutter { width: 84px; height: 84px; border-radius: 50%; position: relative; display: grid; place-items: center; touch-action: none; }
.shutter .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.shutter .ring circle { fill: none; stroke: #fff; stroke-width: 6; }
.shutter .ring .prog { stroke: #ff3b30; stroke-dasharray: 226; stroke-dashoffset: 226; }
.shutter i { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.9); transition: .2s; }
.snapcam.recording .shutter i { background: #ff3b30; transform: scale(.75); }
.snapbot .retake { width: auto !important; padding: 0 16px; border-radius: 22px !important; gap: 6px; font-weight: 700; color: #fff; }
.snapcam.editing .snapbot .retake { display: flex !important; }
.snapbot .snapsend { width: auto !important; padding: 0 20px; height: 50px !important; border-radius: 25px !important; gap: 8px; background: #ffd84d !important; color: #111; font-weight: 800; }
.snapcam.editing .snapbot .snapsend { display: flex !important; }
.snapbot .snapsend svg { stroke: #111; }
.snaphint { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 6px); left: 0; right: 0; text-align: center; font-size: 12px; opacity: .75; margin: 0; }
.snapfr button { position: relative; } .snapfr button .ck { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hair); }
.snapfr button.on .ck { background: #34c759; border-color: #34c759; box-shadow: inset 0 0 0 3px var(--paper); }
.csnap { display: flex; align-items: center; gap: 10px; min-width: 170px; cursor: pointer; }
.csnap .sic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd84d, #ff9f0a); flex: none; }
.csnap .sic svg { width: 20px; height: 20px; stroke: #3d3200; }
.csnap div { display: flex; flex-direction: column; } .csnap small { opacity: .75; font-size: 12px; }
.csnap.seen .sic { background: transparent; border: 2px solid currentColor; opacity: .6; } .csnap.seen .sic svg { stroke: currentColor; }
.snapview { position: fixed; inset: 0; z-index: 140; background: #000; display: grid; place-items: center; cursor: pointer; }
.snapview .sbody, .snapview .sbody > *, .snapview .slay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.snapview .sbar { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); z-index: 2; overflow: hidden; }
.snapview .sbar i { display: block; height: 100%; width: 0; background: #fff; }
.snapview .sfrom { position: absolute; top: calc(env(safe-area-inset-top) + 22px); left: 16px; color: #fff; font-weight: 800; z-index: 2; text-shadow: 0 1px 4px #000; }
body.snapping .msheetwrap { z-index: 135; }

/* ===================== السوشيال (تصميم احترافي) ===================== */
.lsoc { background: linear-gradient(135deg, #ff5f6d, #c86dd7 55%, #3f8cff); }
body.gl .lsoc::before { background: linear-gradient(135deg, #ff5f6d, #c86dd7 55%, #3f8cff); }
.socialpage { display: none; --sc: color-mix(in srgb, var(--paper) 55%, #fff); --sb: color-mix(in srgb, var(--ink) 9%, transparent); }
body.socialopen .socialpage { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 42; color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, #f3f1ea); }
body.dk .socialpage { --sc: color-mix(in srgb, var(--paper) 70%, #2a2a30); background: color-mix(in srgb, var(--paper) 60%, #111); }
body:not(.m).socialopen .socialpage { top: 38px; } body.gl:not(.m).socialopen .socialpage { top: 52px; }
body.gl .socialpage { background: inherit !important; --sc: var(--g-solid); --sb: var(--g-brd); }
body.m.socialopen .socialpage { padding-top: env(safe-area-inset-top); }
.shead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex: none; border-bottom: 1px solid var(--sb); background: var(--sc); }
.stabs { flex: 1; display: flex; justify-content: center; gap: 6px; }
.stabs button { padding: 8px 18px; border-radius: 99px; font-weight: 800; color: var(--muted); transition: .2s; }
.stabs button.on { background: var(--ink); color: var(--paper); }
.smebtn .cav, .smebtn img { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; }
.sbody { flex: 1; overflow-y: auto; padding: 16px 14px 40px; }
.sbody > * { max-width: 600px; margin-inline: auto; }
.sempty { text-align: center; color: var(--muted); padding: 40px 10px; }
.sav .cav, .sav img, .scav .cav, .scav img { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; flex: none; font-size: 17px; }
.emj { width: 1.35em; height: 1.35em; vertical-align: -.3em; margin: 0 .05em; object-fit: contain; }
/* شريط "شو ببالك؟" */
.scbarx { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; background: var(--sc); border: 1px solid var(--sb); box-shadow: 0 2px 10px rgba(0,0,0,.04); margin-bottom: 16px; }
.sopen { flex: 1; text-align: start; padding: 11px 16px; border-radius: 99px; background: var(--hover); color: var(--muted); font-weight: 600; }
.sopen:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.sqk { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.sqk:hover { background: var(--hover); }
.sqk svg { width: 22px; height: 22px; } .sqk[data-k="image"] svg { stroke: #34c759; } .sqk[data-k="video"] svg { stroke: #ff3b5c; }
/* البطاقة */
.spost { background: var(--sc); border: 1px solid var(--sb); border-radius: 22px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.spost header, .pmhead header { display: flex; align-items: center; padding: 12px 14px 4px; }
.sau { display: flex; align-items: center; gap: 10px; text-align: start; flex: 1; min-width: 0; }
.sau > span:last-child { display: flex; flex-direction: column; min-width: 0; } .sau b { font-size: 15px; } .sau small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdel { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; opacity: .5; } .sdel:hover { opacity: 1; color: #e5484d; background: var(--hover); }
.srep { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; padding: 10px 16px 0; } .srep svg { width: 15px; height: 15px; stroke: #34c759; }
.stext { padding: 6px 16px 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 15px; user-select: text; }
.stext.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.smore { padding: 0 16px 8px; color: var(--muted); font-weight: 700; font-size: 13px; }
.htag, .ment { color: #1d7bf2; font-weight: 700; cursor: pointer; } .htag:hover, .ment:hover { text-decoration: underline; }
body.dk .htag, body.dk .ment { color: #64a8ff; }
.spost > .smedia, .spost > .vp { display: block; width: 100%; max-height: 620px; object-fit: cover; background: #000; cursor: pointer; }
.sgone { color: var(--muted); font-style: italic; padding: 14px 16px; margin: 0; }
/* ملخص + أزرار */
.ssum { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; font-size: 13px; color: var(--muted); min-height: 14px; }
.ssum:empty, .ssum:has(.sl:empty):has(.sr:empty) { display: none; }
.ssum .sl { display: flex; align-items: center; gap: 6px; } .ssum .sr { display: flex; gap: 10px; } .ssum button { color: var(--muted); } .ssum button:hover { text-decoration: underline; }
.hb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #ff6b81, #ff2d55); display: grid; place-items: center; }
.hb svg { width: 12px; height: 12px; fill: #fff; stroke: #fff; }
.sact footer { display: flex; border-top: 1px solid var(--sb); margin: 0 10px; padding: 4px 0; }
.sact footer button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 4px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--muted); transition: .15s; }
.sact footer button:hover { background: var(--hover); color: var(--ink); }
.sact footer svg { width: 21px; height: 21px; stroke-width: 2; }
.slike.on { color: #ff2d55 !important; } .slike.on svg { fill: #ff2d55; stroke: #ff2d55; }
.slike.pop svg { animation: likepop .35s cubic-bezier(.3,1.8,.5,1); } @keyframes likepop { 50% { transform: scale(1.45); } }
.bigheart { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px; pointer-events: none; z-index: 5; animation: bigh .9s ease forwards; }
.bigheart svg { width: 100%; height: 100%; fill: #fff; stroke: none; filter: drop-shadow(0 6px 20px rgba(255,45,85,.6)); }
@keyframes bigh { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 45% { transform: scale(.95); } 80% { opacity: 1; } 100% { transform: scale(1.3) translateY(-30px); opacity: 0; } }
.spost, .pmmedia, .sreelv { position: relative; }
/* مشغّل الفيديو */
.vp { position: relative; background: #000; display: grid; place-items: center; overflow: hidden; }
.vp video { width: 100%; max-height: 620px; display: block; object-fit: contain; }
.vp.vert video { max-height: 640px; aspect-ratio: 9 / 16; object-fit: cover; width: auto; max-width: 100%; }
.vpbig { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; transition: .2s; }
.vpbig svg { width: 30px; height: 30px; fill: #fff; stroke: none; margin-inline-start: 4px; }
.vp.playing .vpbig { opacity: 0; transform: scale(.8); pointer-events: none; }
.vpbar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; transition: .2s; direction: ltr; }
.vp:hover .vpbar, .vp:not(.playing) .vpbar, .vp:focus-within .vpbar { opacity: 1; }
.vpbar button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; } .vpbar button:hover { background: rgba(255,255,255,.15); }
.vpbar svg { width: 18px; height: 18px; stroke: #fff; } .vpp svg { fill: #fff; stroke: none; }
.vps { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); }
.vps i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; } .vpb { background: rgba(255,255,255,.4); } .vpf { background: var(--accent, #ffd43b); }
.vps input { position: absolute; inset: -8px 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.vp:fullscreen video { max-height: 100vh; height: 100vh; aspect-ratio: auto; }
/* نافذة المنشور (مش ملء الشاشة) */
.pmodal { position: fixed; inset: 0; z-index: 140; background: rgba(10,10,14,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 3vh 3vw; animation: fade .15s; }
.pmbox { position: relative; display: flex; width: min(1080px, 100%); max-height: 90vh; background: var(--paper); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.45); animation: popc .2s cubic-bezier(.2,.9,.3,1.2); }
body.dk .pmbox { background: #1c1c20; }
.pmodal:not(.hasmedia) .pmbox { width: min(560px, 100%); }
.pmx { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 6; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; } .pmx svg { stroke: #fff; }
.pmmedia { flex: 1.4; background: #000; display: grid; place-items: center; min-width: 0; }
.pmmedia > img { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; }
.pmmedia .vp { width: 100%; height: 100%; } .pmmedia .vp video { max-height: 90vh; }
.pmside { flex: 1; min-width: 320px; display: flex; flex-direction: column; max-height: 90vh; }
.pmodal:not(.hasmedia) .pmside { padding-top: 40px; }
.pmside .stext { max-height: 22vh; overflow-y: auto; }
.pmside .sclist { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.scm { display: flex; gap: 10px; } .scm > div { background: var(--hover); padding: 8px 12px; border-radius: 16px; flex: 1; }
.scm b { font-size: 13.5px; } .scm small { color: var(--muted); font-size: 11px; } .scm p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.scm .sav .cav, .scm .sav img { width: 34px; height: 34px; font-size: 14px; }
.scadd { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--sb, var(--hair)); }
.scadd input { flex: 1; padding: 11px 14px; border-radius: 99px; border: 1px solid var(--hair); background: var(--hover); color: inherit; font: inherit; outline: 0; }
.scadd .mok { width: 42px; height: 42px; margin: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; } .scadd .mok svg { stroke: #fff; width: 18px; height: 18px; }
.scemo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; } .scemo svg { width: 22px; height: 22px; }
.emopick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; max-height: 170px; overflow-y: auto; padding: 8px; margin: 0 12px 10px; border-radius: 16px; background: var(--hover); }
.emopick button { height: 40px; border-radius: 10px; display: grid; place-items: center; transition: transform .12s; }
.emopick button:hover { background: var(--hover); transform: scale(1.2); }
.emopick .emj { width: 30px; height: 30px; margin: 0; }
@media (max-width: 760px) {
  .pmodal { padding: 0; place-items: end stretch; }
  .pmbox { flex-direction: column; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .pmmedia { flex: none; max-height: 42vh; } .pmmedia > img, .pmmedia .vp video { max-height: 42vh; }
  .pmside { min-width: 0; max-height: none; flex: 1; min-height: 0; }
}
/* نافذة النشر (متل فيسبوك) */
.cmpw .pmbox { width: min(560px, 100%); display: block; }
.cmp { display: flex; flex-direction: column; max-height: 90vh; }
.cmph { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px; border-bottom: 1px solid var(--hair); }
.cmph b { font-size: 17px; } .mx2 { position: absolute; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--hover); display: grid; place-items: center; }
.cmpu { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; }
.cmpu > div { display: flex; flex-direction: column; } .cmpu small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; background: var(--hover); padding: 2px 8px; border-radius: 8px; margin-top: 2px; width: fit-content; } .cmpu small svg { width: 12px; height: 12px; }
.cmpt { position: relative; padding: 4px 16px; overflow-y: auto; }
.cmpt textarea { width: 100%; min-height: 110px; resize: none; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 20px; line-height: 1.5; }
.mpop { position: absolute; inset-inline: 16px; top: 100%; z-index: 4; background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px; max-height: 220px; overflow-y: auto; }
.mpop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; text-align: start; } .mpop button:hover { background: var(--hover); }
.mpop .cav, .mpop img { width: 32px; height: 32px; border-radius: 50%; } .mpop span { display: flex; flex-direction: column; } .mpop small { color: var(--muted); }
.cmp .sprev { position: relative; margin: 8px 16px; border-radius: 16px; overflow: hidden; background: #000; max-height: 340px; display: grid; place-items: center; }
.cmp .sprev img, .cmp .sprev video { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.sxprev { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; } .sxprev svg { stroke: #fff; }
.reelbadge { position: absolute; bottom: 10px; inset-inline-start: 10px; display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; font-size: 12px; } .reelbadge svg { width: 14px; height: 14px; stroke: #fff; }
.sprog { height: 4px; border-radius: 4px; background: var(--hair); margin: 6px 16px; overflow: hidden; } .sprog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.cmpadd { display: flex; align-items: center; gap: 2px; margin: 8px 16px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 14px; }
.cmpadd span { flex: 1; font-weight: 700; font-size: 14px; }
.cmpadd button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; } .cmpadd button:hover { background: var(--hover); }
.cmpadd svg { width: 22px; height: 22px; }
.cmpadd [data-k="image"] svg { stroke: #34c759; } .cmpadd [data-k="video"] svg { stroke: #ff3b5c; } .cmpadd [data-k="emoji"] svg { stroke: #f5b700; } .cmpadd [data-k="tag"] svg { stroke: #1d7bf2; } .cmpadd [data-k="at"] svg { stroke: #af52de; }
.cmp .emopick { margin: 0 16px 8px; }
.cmpgo { margin: 6px 16px 16px !important; width: auto !important; padding: 12px !important; font-size: 15px; }
.cmpgo:disabled { opacity: .45; }
.stagh { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; margin-bottom: 14px; } .stagh svg { width: 24px; height: 24px; stroke: #1d7bf2; }
/* إرسال لأصدقاء */
.shrout { display: flex; gap: 8px; margin-bottom: 8px; }
.shrout button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 12px; background: var(--hover); font-weight: 700; }
.shrout svg { width: 18px; height: 18px; }
#shrQ { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--hover); color: inherit; font: inherit; }
.frlist .shsend { margin-inline-start: auto; font-style: normal; font-size: 12.5px; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: var(--accent); color: #fff; }
.frlist .sent .shsend { background: var(--hover); color: var(--muted); }
.frlist button span { flex: 1; }
/* منشور بالشات */
.cpost { display: flex; flex-direction: column; gap: 4px; width: 220px; text-align: start; position: relative; }
.cpost img, .cpost video { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; background: #000; }
.cpplay { position: absolute; top: 70px; left: 50%; margin-left: -18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; } .cpplay svg { width: 16px; fill: #fff; stroke: none; }
.cpu { font-weight: 800; font-size: 12.5px; opacity: .8; } .cpt { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ريلز */
.sbody:has(.reels) { padding: 0; scroll-snap-type: y mandatory; background: #000; }
.sbody:has(.reels) > * { max-width: none; }
.sreelv { position: relative; height: calc(100% - 0px); min-height: calc(100vh - 110px); scroll-snap-align: start; background: #000; display: grid; place-items: center; max-width: 470px !important; margin: 0 auto !important; overflow: hidden; }
.sreelv video { width: 100%; height: 100%; max-height: calc(100vh - 110px); object-fit: cover; }
.rprog { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.2); } .rprog i { display: block; height: 100%; background: #fff; width: 0; }
.rside { position: absolute; bottom: 90px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rside button { display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-weight: 800; font-size: 12.5px; gap: 2px; }
.rside svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.rside .slike.on svg { fill: #ff2d55; stroke: #ff2d55; }
.rside .sav .cav, .rside .sav img { width: 48px; height: 48px; border: 2px solid #fff; }
.rinfo { position: absolute; bottom: 18px; inset-inline: 14px 74px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.rinfo b { font-size: 15px; } .rinfo p { margin: 4px 0 0; font-size: 14px; max-height: 4.5em; overflow: hidden; }
.rinfo .htag, .rinfo .ment { color: #fff; text-decoration: underline; }
.rsnd { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; } .rsnd svg { stroke: #fff; width: 20px; height: 20px; }
/* البروفايل */
.sprof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: 16px; background: var(--sc); border: 1px solid var(--sb); border-radius: 24px; overflow: hidden; margin-bottom: 14px; }
.spcover { width: 100%; height: 120px; background: linear-gradient(135deg, #ffd43b, #ff8a5c 50%, #c86dd7); }
.spav { margin-top: -52px; } .spav .cav, .spav img { width: 104px; height: 104px; border-radius: 50%; font-size: 40px; display: grid; place-items: center; object-fit: cover; border: 4px solid var(--sc); }
.sprof h3 { margin: 6px 0 0; font-size: 22px; } .sprof small { color: var(--muted); }
.scount { display: flex; gap: 26px; margin: 14px 0; } .scount div { display: flex; flex-direction: column; } .scount b { font-size: 19px; } .scount span { font-size: 12px; color: var(--muted); }
.sprofb { display: flex; gap: 8px; } .sprofb .mok { width: auto; padding: 10px 26px; margin: 0; border-radius: 99px; }
.sptabs { margin-top: 16px; width: calc(100% - 28px); display: flex; background: var(--hover); padding: 4px; border-radius: 14px; gap: 4px; }
.sptabs button { flex: 1; padding: 8px; border-radius: 10px; font-weight: 700; } .sptabs button.on { background: var(--ink); color: var(--paper); }
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sgi { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #000; }
.sgi img, .sgi video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .sgi:hover img, .sgi:hover video { transform: scale(1.05); }
.sgi i { position: absolute; top: 6px; inset-inline-end: 6px; } .sgi i svg { width: 18px; height: 18px; fill: #fff; stroke: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.emopick[hidden], .mpop[hidden] { display: none; }

/* مكالمة فيديو */
.callui video { display: none; }
.callui:not(.video) .cb-cam, .callui:not(.video) .cb-flip, .callui:not(.video) .cb-big { display: none; }
.callui.in .cb-cam, .callui.in .cb-flip, .callui.in .cb-big, .callui.out .cb-flip { display: none; }
.callui.video { width: min(420px, 94vw); }
.callui.video.hasvid #callRemote { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; background: #000; }
.callui.video #callLocal { display: block; position: absolute; top: 14px; inset-inline-end: 14px; width: 96px; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.7); background: #222; transform: scaleX(-1); z-index: 2; }
.callui.video.hasvid .cav2 { display: none; }
.callui.camoff #callLocal { opacity: .2; } .callui.camoff .cb-cam { background: #fff; } .callui.camoff .cb-cam svg { stroke: #111; }
.callui.big { inset: 0; top: 0 !important; left: 0; transform: none; width: 100vw !important; height: 100vh; border-radius: 0; justify-content: center; z-index: 200; }
.callui.big.hasvid #callRemote { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; z-index: 0; }
.callui.big .cnm, .callui.big .cst, .callui.big .cbtns { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.callui.big .cbtns { position: absolute; bottom: 40px; }
.callui .cbtns { flex-wrap: wrap; justify-content: center; }
.callui .cb-cam, .callui .cb-flip, .callui .cb-big { background: rgba(255,255,255,.18); }

/* ===== بلا ضبابية ورا النوافذ المنبثقة (كانت تثقّل البرنامج) — تعتيم بس ===== */
.modal, .msheetwrap, .pmodal, body.gl .msheetwrap, body.gl .modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.pmodal { background: rgba(10,10,14,.72); } .modal { background: rgba(0,0,0,.5); } .msheetwrap { background: rgba(0,0,0,.4); }

/* ===== مشغّل الفيديو الاحترافي ===== */
.vp { border-radius: inherit; outline: none; }
.vpmid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 34px; pointer-events: none; transition: opacity .2s; }
.vpmid button { pointer-events: auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); box-shadow: 0 4px 18px rgba(0,0,0,.3); transition: transform .15s, background .15s; }
.vpmid button:hover { background: rgba(0,0,0,.65); transform: scale(1.06); } .vpmid button:active { transform: scale(.94); }
.vpmid .vpbig { position: static; width: 68px; height: 68px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vpmid .vpbig svg { width: 30px; height: 30px; fill: #fff; stroke: none; }
.vpskip { width: 50px; height: 50px; } .vpskip svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; }
.vp.playing:not(.awake) .vpmid, .vp.playing:not(.awake) .vpbar { opacity: 0; }
.vp.playing .vpmid .vpbig { opacity: 1; transform: none; pointer-events: auto; }
.vpbar { opacity: 1; flex-direction: column; align-items: stretch; gap: 4px; padding: 26px 12px 8px; }
.vp.playing.awake .vpbar, .vp:not(.playing) .vpbar { opacity: 1; }
.vps { height: 5px; cursor: pointer; touch-action: none; transition: height .15s; }
.vps::before { content: ""; position: absolute; inset: -12px 0; } /* منطقة لمس أكبر */
.vps:hover, .vp.drag .vps { height: 8px; }
.vpk { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--accent, #ffd43b); box-shadow: 0 0 0 3px rgba(255,255,255,.35); transform: scale(0); transition: transform .15s; }
.vps:hover .vpk, .vp.drag .vpk { transform: scale(1); }
.vptip { position: absolute; bottom: 16px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.8); font-size: 11px; opacity: 0; pointer-events: none; }
.vps:hover .vptip, .vp.drag .vptip { opacity: 1; }
.vprow { display: flex; align-items: center; gap: 6px; } .vpsp { flex: 1; }
.vprate { width: auto !important; padding: 0 8px; font-weight: 800; font-size: 12px; color: #fff; }
.vpflash { position: absolute; top: 50%; padding: 10px 16px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; transform: translateY(-50%) scale(.8); opacity: 0; pointer-events: none; transition: .2s; }
.vpflash.on { opacity: 1; transform: translateY(-50%) scale(1); } .vpflash.l { left: 12%; } .vpflash.r { right: 12%; }
.vp:fullscreen { display: flex; } .vp:fullscreen video { max-height: 100vh; width: 100%; }
/* الفيديو أعرض: بالمنشور والنافذة */
.spost .vp video { max-height: 78vh; }
@media (max-width: 760px) { .spost .vp, .spost .smedia { margin-inline: -12px; width: calc(100% + 24px); border-radius: 0; } }

/* ===== الريلز: الفيديو بعرض الشاشة بالهاتف، والأزرار على يمين الفيديو ===== */
.sreelv { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.sreelv .rvid { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.sreelv .rvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sreelv .rside { position: static; display: flex; flex-direction: column; gap: 14px; padding-bottom: 70px; }
.sreelv .rside button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; }
.sreelv .rside svg { width: 30px; height: 30px; }
.rprog { height: 6px; bottom: 0; cursor: pointer; touch-action: none; }
.rprog::before { content: ""; position: absolute; inset: -14px 0 0; }
.rprog .vpk { transform: scale(0); } .rprog:hover .vpk, .rprog.drag .vpk { transform: scale(1); }
.rprog.drag { height: 9px; }
@media (max-width: 760px) {
  .sreelv { gap: 0; }
  .sreelv .rvid { width: 100%; aspect-ratio: auto; border-radius: 0; }
  .sreelv .rside { position: absolute; inset-inline-end: 6px; bottom: 90px; padding: 0; }
}
@media (min-width: 761px) { .sreelv { max-width: none !important; background: transparent; display: flex; } .sreelv .rside svg { stroke: var(--ink); } .sreelv .rside .rn { color: var(--ink); } .sreelv .rinfo { inset-inline-start: calc(50% - (100vh - 110px) * 9 / 32 + 12px); } }
.rprog { position: absolute; } .rprog i { position: relative; }
.vpbar .vps { flex: none; width: 100%; }
.vpmid { direction: ltr; }

/* مكالمة فيديو: ملء الشاشة حرفيًا */
.callui.big { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; border-radius: 0 !important; padding: 0 !important; background: #000 !important; animation: none; }
.callui.big.hasvid #callRemote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.callui.big #callLocal { width: 150px; top: 20px; inset-inline-end: 20px; }
.callui.big .cnm { position: absolute; top: 24px; inset-inline-start: 24px; margin: 0; }
.callui.big .cst { position: absolute; top: 52px; inset-inline-start: 24px; }
.callui.big .cbtns { position: absolute; bottom: 36px; left: 0; right: 0; margin: 0; }
.callui:fullscreen { width: 100vw; height: 100vh; }

.featoff { display: none !important; }

/* كاميرا السنابات: صورة كاملة بلا زوم + فلاتر */
.snapcam video#snapVid { object-fit: contain; background: #000; }
.snapfxlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.snapcam.editing .snapfxlayer, .snapcam.editing .snapfxbar, .snapcam.editing .snapfxname { display: none; }
.snapfxbar { position: absolute; bottom: 132px; left: 0; right: 0; display: flex; gap: 10px; overflow-x: auto; padding: 6px 45%; scrollbar-width: none; z-index: 3; direction: ltr; scroll-snap-type: x mandatory; }
.snapfxbar button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); overflow: hidden; position: relative; scroll-snap-align: center; background: #000; }
.snapfxbar button i { position: absolute; inset: 0; background: linear-gradient(135deg, #ffb347, #ff5e62 40%, #6a82fb 70%, #43e97b); filter: var(--f); }
.snapfxbar button em { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.snapfxbar button.on { border-color: #ffd84d; transform: scale(1.18); box-shadow: 0 0 0 3px rgba(255,216,77,.5); }
.snapfxname { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #fff; font-size: 26px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.6); opacity: 0; pointer-events: none; z-index: 3; }
.snapfxname.show { animation: fxname 1.1s ease forwards; }
@keyframes fxname { 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.snapfxbar { padding: 6px 0; } .snapfxbar::before, .snapfxbar::after { content: ""; flex: none; width: 45%; }