/* لوحة المشاريع — تجربة الدخول. كل القيم من tokens.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-gradient) var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); min-height: 100vh; display: flex; overflow-x: clip; }
button { font-family: inherit; }
a { color: var(--text-primary); }
a:hover { color: var(--text-secondary); }
.num { direction: ltr; unicode-bidi: isolate; }
.edited, .progress-note, .sub, .counters, .card-date, .deadline .chip, .kbd { white-space: nowrap; }
:where(button, a, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============ العرض الافتتاحي ============ */
.splash { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4); background: var(--bg-gradient) var(--bg); transition: opacity 560ms var(--ease-soft), visibility 560ms; }
.splash-logo { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-5xl); letter-spacing: 0.18em; opacity: 0; animation: splashIn 900ms var(--ease-out) 120ms forwards; }
.splash-sub { font-size: var(--text-sm); color: var(--text-muted); opacity: 0; animation: splashIn 700ms var(--ease-out) 500ms forwards; }
@keyframes splashIn { to { opacity: 1; letter-spacing: var(--tracking-tight); } }
.splash.out { opacity: 0; visibility: hidden; }
.splash.out .splash-logo, .splash.out .splash-sub { animation-play-state: paused; }

/* الدخول المتدرّج: العناصر مخفية حتى يكتمل العرض الافتتاحي */
.rv { opacity: 0; }
body.ready .rv { animation: rvIn var(--duration-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 65ms); }
@keyframes rvIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  .rv, body.ready .rv { opacity: 1; animation: none; }
}

/* ============ الشريط الجانبي — Ghost Navigation ============ */
.sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; padding: var(--space-8) var(--space-6); gap: var(--space-2); position: sticky; top: 0; height: 100vh; }
.brand { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-black); padding: var(--space-2) var(--space-5) 0; margin-bottom: var(--space-10); letter-spacing: var(--tracking-tight); }
.nav-item { display: flex; align-items: center; gap: var(--space-3); height: var(--control-height); padding: 0 var(--space-5); border-radius: var(--radius-full); color: var(--text-secondary); font-weight: var(--weight-medium); cursor: pointer; user-select: none; text-decoration: none; transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft); }
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); box-shadow: var(--shadow-1); }
.nav-item.is-active { background: var(--action-bg); color: var(--action-fg); box-shadow: var(--shadow-2); }
.nav-item.is-active:hover { background: var(--action-bg-hover); color: var(--action-fg); }
.sidebar-spacer { flex: 1; }
.user-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration-fast) var(--ease-soft); }
.user-row:hover { background: var(--surface-2); }
.user-row b { font-size: var(--text-base); font-weight: var(--weight-medium); }
.user-row span { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.avatar { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-full); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* ============ البنية: نطاقات أفقية كاملة العرض ============ */
.app { display: flex; width: 100%; min-height: 100vh; }
main { flex: 1; padding: var(--space-10) var(--space-12) var(--space-16); min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); position: relative; z-index: 50; }
.page-head h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-black); line-height: var(--leading-tight); }
.page-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.head-actions { display: flex; align-items: center; gap: var(--space-3); }

.search-wrap { position: relative; width: 250px; }
.search-wrap svg { position: absolute; inset-inline-start: var(--space-4); top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.control { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary); height: var(--control-height); width: 100%; padding: 0 var(--space-12) 0 var(--space-4); background: var(--surface-2); border: none; border-radius: var(--radius-full); outline: none; transition: background var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.control::placeholder { color: var(--text-muted); }
.control:focus { background: var(--surface-1); box-shadow: var(--shadow-2); transform: translateY(-1px); }
[data-theme="dark"] .control:focus { background: var(--surface-3); }

.btn { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-medium); height: var(--control-height); padding: 0 var(--space-6); border: none; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: background var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--action-bg); color: var(--action-fg); box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--action-bg-hover); box-shadow: var(--shadow-3); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); box-shadow: var(--shadow-1); }
.icon-btn { position: relative; width: var(--control-height); height: var(--control-height); padding: 0; justify-content: center; }
.icon-btn .dot-badge { position: absolute; top: 10px; inset-inline-end: 10px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--danger-fg); box-shadow: 0 0 0 2px var(--bg); }

/* ============ شبكة اللوحة ============ */
.dash-stack { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-12); }
.duo-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: stretch; }
.panel { background: var(--surface-1); border-radius: var(--radius-3xl); box-shadow: var(--shadow-2); padding: var(--space-6); }
.panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-4); }

/* بطاقة «واصل الكتابة» */
.continue-card { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); padding: var(--space-8); }
.continue-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); margin-bottom: var(--space-3); }
.continue-card h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.continue-meta { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.progress { height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; margin-bottom: var(--space-2); }
.progress i { display: block; height: 100%; width: 0; border-radius: var(--radius-full); background: var(--action-bg); transition: width 1100ms var(--ease-out) 300ms; }
body.ready .progress i { width: var(--p, 60%); }
.progress-note { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-5); }
.continue-foot { display: flex; align-items: center; gap: var(--space-4); }
.continue-foot .edited { font-size: var(--text-sm); color: var(--text-muted); }
.paper-peek { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); padding: var(--space-5) var(--space-6); font-family: var(--font-text); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
[data-theme="dark"] .paper-peek { box-shadow: var(--shadow-2); }
.paper-peek .slug { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.paper-peek .caret { display: inline-block; width: 1px; height: 1em; background: var(--text-primary); vertical-align: text-bottom; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* الإحصاءات الهادئة */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.stat { background: var(--surface-1); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: var(--space-5) var(--space-6); transition: box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.stat:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.stat b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-black); display: block; line-height: var(--leading-tight); }
.stat span { font-size: var(--text-sm); color: var(--text-muted); }
.stat .delta { display: inline-block; font-size: var(--text-xs); color: var(--success-fg); background: var(--success-bg); border-radius: var(--radius-full); padding: 1px var(--space-2); margin-inline-start: var(--space-2); }
.streak-dots { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.streak-dots i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--action-bg); opacity: 0.85; }
.streak-dots i.today { animation: pulse 2.4s var(--ease-soft) infinite; }

/* نبض المشاريع */
.pulse-now { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface-2); border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-4); }
.pulse-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--success-fg); margin-top: 6px; flex-shrink: 0; animation: pulse 2s var(--ease-soft) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--success-bg); opacity: 1; } 50% { box-shadow: 0 0 0 6px var(--success-bg); opacity: 0.7; } }
.pulse-now b { font-weight: var(--weight-medium); }
.pulse-now .sub, .feed-item .sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-secondary); }
.feed-item + .feed-item { border-top: var(--border-width) solid var(--border-subtle); }
.feed-item b { color: var(--text-primary); font-weight: var(--weight-medium); }
.feed-item.fresh { animation: rvIn var(--duration-slow) var(--ease-out) both; }
.feed-item .avatar { width: 28px; height: 28px; }

/* مواعيد التسليم */
.deadline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--text-sm); position: relative; }
.hover-peek { position: absolute; bottom: calc(100% + 6px); inset-inline: calc(-1 * var(--space-2)); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); padding: var(--space-4); opacity: 0; visibility: hidden; translate: 0 4px; pointer-events: none; transition: opacity var(--duration-base) var(--ease-soft), translate var(--duration-base) var(--ease-soft), visibility var(--duration-base); z-index: 6; }
.deadline:hover .hover-peek, .deadline:focus-within .hover-peek { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 350ms; }
.hover-peek b { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-1); }
.hover-peek p { font-size: var(--text-sm); color: var(--text-primary); margin-bottom: var(--space-2); }
.hover-peek .progress { margin-bottom: var(--space-1); }
.hover-peek .progress i { width: var(--p) !important; transition: none; }
.hover-peek > span { font-size: var(--text-xs); color: var(--text-muted); }
.deadline + .deadline { border-top: var(--border-width) solid var(--border-subtle); }
.deadline b { font-weight: var(--weight-medium); display: block; }
.deadline span { color: var(--text-muted); font-size: var(--text-xs); }
.deadline .chip { margin-inline-start: auto; font-size: var(--text-xs); font-weight: var(--weight-medium); border-radius: var(--radius-full); padding: 3px var(--space-3); background: var(--surface-2); color: var(--text-secondary); white-space: nowrap; }
.deadline .chip.near { background: var(--warning-bg); color: var(--warning-fg); }

/* ============ المشاريع ============ */
.projects-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.projects-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-black); margin-inline-end: auto; }
.filters { display: flex; gap: var(--space-1); background: var(--surface-2); border-radius: var(--radius-full); padding: var(--space-1); }
.filter-pill { border: none; cursor: pointer; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); height: var(--control-height-sm); padding: 0 var(--space-4); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft); }
.filter-pill:hover { color: var(--text-primary); }
.filter-pill[aria-pressed="true"] { background: var(--action-bg); color: var(--action-fg); box-shadow: var(--shadow-1); }
.sort-btn { display: inline-flex; align-items: center; gap: var(--space-2); border: none; cursor: pointer; background: var(--surface-2); color: var(--text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); height: calc(var(--control-height-sm) + var(--space-1) * 2); padding: 0 var(--space-4); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.sort-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.no-results { display: none; padding: var(--space-10); text-align: center; color: var(--text-muted); font-size: var(--text-sm); background: var(--surface-2); border-radius: var(--radius-2xl); }
.no-results b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-secondary); margin-bottom: var(--space-2); }

.card { position: relative; background: var(--surface-1); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: var(--space-3) var(--space-3) var(--space-5); cursor: default; transition: box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft), opacity var(--duration-base) var(--ease-soft); }
.card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
.card.is-hidden { display: none; }
.card-banner { position: relative; height: 116px; border-radius: var(--radius-xl); display: flex; align-items: flex-end; padding: var(--space-4); color: var(--banner-fg); overflow: hidden; margin-bottom: var(--space-4); }
.card-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(28 26 23 / 0.22), transparent 60%); pointer-events: none; }
.card-banner > * { position: relative; }
.banner-deco { position: absolute; inset-inline-end: -28px; top: -30px; opacity: var(--banner-deco-opacity); pointer-events: none; }
.banner-tags { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); display: flex; gap: var(--space-2); }
.tag { font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--banner-chip-bg); border-radius: var(--radius-full); padding: 3px var(--space-3); }
.live-badge { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--banner-chip-bg); border-radius: var(--radius-full); padding: 3px var(--space-3); }
.live-badge i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--banner-fg); animation: pulse 2s var(--ease-soft) infinite; }
.card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-black); padding: 0 var(--space-2); }
.card-open { all: unset; color: inherit; cursor: pointer; }
.card .kind { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-2); margin: 2px 0 var(--space-2); }
.card .desc { font-size: var(--text-sm); color: var(--text-secondary); padding: 0 var(--space-2); margin-bottom: var(--space-4); min-height: 44px; }
.card-foot { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.avatars { display: flex; }
.avatars .avatar { width: 28px; height: 28px; margin-inline-end: -8px; box-shadow: 0 0 0 2px var(--surface-1); }
.card-foot .counters { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: auto; }
.card-foot .counters b { font-weight: var(--weight-medium); color: var(--text-secondary); }
.card-foot .card-date { font-size: var(--text-xs); color: var(--text-muted); }
.card[data-status="archived"] .card-banner { filter: saturate(var(--banner-calm-saturate)) brightness(var(--banner-calm-brightness)); }
.card[data-status="archived"]:hover .card-banner { filter: none; }
.archived-chip { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--banner-chip-bg); border-radius: var(--radius-full); padding: 3px var(--space-3); }

/* المعاينة السريعة عند التمرير */
.peek { position: absolute; inset: var(--space-3) var(--space-3) auto; background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: var(--space-4); opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity var(--duration-base) var(--ease-soft), translate var(--duration-base) var(--ease-soft); transition-delay: 0ms; z-index: 5; }
.card:hover .peek, .card:focus-within .peek { opacity: 1; translate: 0 0; transition-delay: 420ms; }
.peek b { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-1); }
.peek p { font-size: var(--text-sm); color: var(--text-primary); margin-bottom: var(--space-2); }
.peek .progress { margin-bottom: var(--space-1); }
.peek .progress i { width: var(--p) !important; transition: none; }
.peek span { font-size: var(--text-xs); color: var(--text-muted); }

.card-new { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 240px; border-radius: var(--radius-2xl); border: 2px dashed var(--border-strong); background: transparent; color: var(--text-muted); font: inherit; font-weight: var(--weight-medium); text-align: center; cursor: pointer; transition: background var(--duration-base) var(--ease-soft), color var(--duration-base) var(--ease-soft), border-color var(--duration-base) var(--ease-soft); }
.card-new:hover { background: var(--surface-2); color: var(--text-primary); }

/* ============ الإشعارات ============ */
.notif-wrap { position: relative; }
.notif-panel { position: absolute; top: calc(100% + var(--space-2)); inset-inline-end: 0; width: 360px; background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-4); padding: var(--space-4); opacity: 0; translate: 0 -6px; visibility: hidden; transition: opacity var(--duration-base) var(--ease-soft), translate var(--duration-base) var(--ease-soft), visibility var(--duration-base); z-index: 60; }
.notif-wrap.open .notif-panel { opacity: 1; translate: 0 0; visibility: visible; }
.notif-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.notif-head b { font-size: var(--text-base); font-weight: var(--weight-bold); }
.mark-read { border: none; background: transparent; color: var(--text-muted); font-size: var(--text-xs); cursor: pointer; border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); }
.mark-read:hover { background: var(--surface-2); color: var(--text-primary); }
.notif-item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--text-secondary); position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-soft); }
.notif-item:hover { background: var(--surface-2); }
.notif-item b { color: var(--text-primary); font-weight: var(--weight-medium); }
.notif-item .sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.notif-item .quote { display: block; font-family: var(--font-text); color: var(--text-secondary); margin-top: 2px; }
.notif-item.unread::after { content: ""; position: absolute; top: var(--space-4); inset-inline-end: var(--space-2); width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--info-fg); }
.notif-empty { display: none; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.notif-panel.is-empty .notif-empty { display: flex; }
.notif-panel.is-empty .notif-item { display: none; }

/* ============ Toast ============ */
.toast-zone { position: fixed; bottom: var(--space-8); inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); z-index: 75; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-full); box-shadow: var(--shadow-3); padding: var(--space-3) var(--space-6) var(--space-3) var(--space-5); opacity: 0; translate: 0 16px; transition: opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out); }
.toast.show { opacity: 1; translate: 0 0; }
.toast b { font-size: var(--text-sm); font-weight: var(--weight-medium); display: block; }
.toast .t-sub { font-size: var(--text-xs); color: var(--text-muted); display: block; }
.t-action { border: none; cursor: pointer; margin-inline-start: var(--space-2); background: var(--surface-2); color: var(--text-primary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); height: var(--control-height-sm); padding: 0 var(--space-4); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-soft); }
.t-action:hover { background: var(--surface-3); }

/* ============ الحالة الفارغة (Tweak) ============ */
.empty-hero { display: none; }
[data-tw-state="empty"] .dash-stack, [data-tw-state="empty"] .projects, [data-tw-state="empty"] .search-wrap { display: none; }
[data-tw-state="empty"] .empty-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-20) var(--space-6); }
.empty-ink { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--surface-1); box-shadow: var(--shadow-2); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); margin-bottom: var(--space-6); }
.empty-hero h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-black); margin-bottom: var(--space-3); }
.empty-hero p { font-size: var(--text-base); color: var(--text-secondary); max-width: 44ch; margin-bottom: var(--space-8); }
.empty-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); }
.starter-chips { display: flex; gap: var(--space-2); }
.starter-chips button { border: none; cursor: pointer; background: var(--surface-2); color: var(--text-secondary); font-size: var(--text-sm); border-radius: var(--radius-full); height: var(--control-height-sm); padding: 0 var(--space-4); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.starter-chips button:hover { background: var(--surface-3); color: var(--text-primary); }

/* ============ الكثافة (Tweak) ============ */
[data-tw-density="compact"] main { padding: var(--space-6) var(--space-8) var(--space-10); }
[data-tw-density="compact"] .page-head { margin-bottom: var(--space-5); }
[data-tw-density="compact"] .dash-stack { gap: var(--space-4); margin-bottom: var(--space-8); }
[data-tw-density="compact"] .duo-grid { gap: var(--space-4); }
[data-tw-density="compact"] .panel { padding: var(--space-4); border-radius: var(--radius-2xl); }
[data-tw-density="compact"] .continue-card { padding: var(--space-5); gap: var(--space-5); }
[data-tw-density="compact"] .stats-row, [data-tw-density="compact"] .grid { gap: var(--space-4); }
[data-tw-density="compact"] .stat { padding: var(--space-4) var(--space-5); }
[data-tw-density="compact"] .card .desc { min-height: 0; }
[data-tw-density="compact"] .card-banner { height: 88px; }
[data-tw-density="compact"] .sidebar { padding: var(--space-6) var(--space-4); }

@media (max-width: 1160px) {
  .duo-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .skel-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .set-grid { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr; }
  .paper-peek { display: none; }
  .sidebar { width: 84px; padding: var(--space-6) var(--space-3); }
  .brand { font-size: var(--text-xl); text-align: center; padding: 0; margin-bottom: var(--space-8); }
  .nav-item { justify-content: center; padding: 0; gap: 0; font-size: 0; }
  .user-row { justify-content: center; padding: var(--space-2); }
  .user-row > div { display: none; }
  main { padding: var(--space-8) var(--space-6) var(--space-12); }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .bnav { display: flex; }
  .grid, .stats-row, .people-grid, .skel-row, .skel-grid, .type-grid { grid-template-columns: 1fr; }
  .arch-meta { display: none; }
  .arch-row { flex-wrap: wrap; }
  .filters { max-width: 100%; overflow-x: auto; }
  .empty-actions, .continue-foot { flex-wrap: wrap; }
  .page-head { flex-direction: column; align-items: stretch; }
  .head-actions { flex-wrap: wrap; }
  .search-wrap { flex: 1; min-width: 180px; width: auto; }
  .continue-card { padding: var(--space-5); }
  main { padding: var(--space-6) var(--space-4) calc(92px + env(safe-area-inset-bottom)); }
  [data-tw-density="compact"] main { padding: var(--space-6) var(--space-4) calc(92px + env(safe-area-inset-bottom)); }
  .toast-zone { bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline: var(--space-4); }
  .offline-bar { inset-inline: var(--space-4); width: auto; }
  .notif-panel { position: fixed; inset-inline: var(--space-4); top: 76px; width: auto; }
}

/* ============ التنقل السفلي (جوال) ============ */
.bnav { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 70; justify-content: space-around; gap: var(--space-1); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: var(--border-width) solid var(--glass-border); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); }
.bnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 52px; min-height: 44px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-lg); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.bnav-item:hover { color: var(--text-primary); }
.bnav-item.is-active { background: var(--action-bg); color: var(--action-fg); }

/* ============ حالات العرض (Tweak) ============ */
.scene-skel, .scene-msg, .view-empty, .offline-bar { display: none; }
.sk { display: block; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skShimmer 1.5s var(--ease-soft) infinite; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.scene-skel { flex-direction: column; gap: var(--space-6); }
.skel-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.skel-row, .skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
[data-tw-scene="loading"] .view[data-view="projects"] .dash-stack, [data-tw-scene="loading"] .view[data-view="projects"] .projects { display: none; }
[data-tw-scene="loading"] .scene-skel { display: flex; }
.scene-msg { flex-direction: column; align-items: center; text-align: center; padding: var(--space-20) var(--space-6); background: var(--surface-1); border-radius: var(--radius-3xl); box-shadow: var(--shadow-2); }
.scene-msg h3, .view-empty h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-black); margin-bottom: var(--space-2); }
.scene-msg p, .view-empty p { font-size: var(--text-sm); color: var(--text-secondary); max-width: 46ch; margin-bottom: var(--space-6); }
[data-tw-scene="error"] .view[data-view="projects"] .dash-stack, [data-tw-scene="error"] .view[data-view="projects"] .projects { display: none; }
[data-tw-scene="error"] .scene-error { display: flex; }
.offline-bar { position: fixed; top: var(--space-4); inset-inline-start: 50%; translate: -50% 0; z-index: 78; align-items: center; gap: var(--space-3); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-full); box-shadow: var(--shadow-3); padding: var(--space-3) var(--space-6); color: var(--text-secondary); }
html[dir="rtl"] .offline-bar { translate: 50% 0; }
.offline-bar b { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.offline-bar span { display: block; font-size: var(--text-xs); color: var(--text-muted); }
[data-tw-scene="offline"] .offline-bar { display: flex; }
.view-empty { flex-direction: column; align-items: center; text-align: center; padding: var(--space-20) var(--space-6); background: var(--surface-1); border-radius: var(--radius-3xl); box-shadow: var(--shadow-2); }
.view-empty p:last-child { margin-bottom: 0; }
[data-tw-scene="activity-empty"] .view[data-view="activity"] .stack > .panel { display: none; }
[data-tw-scene="activity-empty"] .view[data-view="activity"] .view-empty { display: flex; }
[data-tw-scene="activity-empty"] .view[data-view="activity"] .filters { display: none; }
[data-tw-scene="people-empty"] .people-grid { display: none; }
[data-tw-scene="people-empty"] .view[data-view="people"] .view-empty { display: flex; }
[data-tw-scene="people-empty"] .view[data-view="people"] .page-head .btn-primary { display: none; }
[data-tw-scene="archive-empty"] .view[data-view="archive"] > .panel { display: none; }
[data-tw-scene="archive-empty"] .view[data-view="archive"] .view-empty { display: flex; }

/* ============ الصفحات (views) ============ */
.view { display: none; }
.view.is-on { display: block; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.day-label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-3); }
.btn-sm { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }

/* المتعاونون */
.people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.person { background: var(--surface-1); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.person:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.person-top { display: flex; align-items: center; gap: var(--space-3); }
.person .person-top .avatar { width: 44px; height: 44px; font-size: var(--text-sm); }
.person-top b { display: block; font-weight: var(--weight-bold); }
.role-chip { display: inline-block; font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-2); border-radius: var(--radius-full); padding: 2px var(--space-3); margin-top: 3px; }
.projs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pchip { font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-full); padding: 3px var(--space-3); }
.person-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; }
.person-foot .last { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.last.on::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success-fg); }

/* الأرشيف */
.arch-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.arch-row + .arch-row { border-top: var(--border-width) solid var(--border-subtle); }
.arch-thumb { width: 60px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--banner-fg); flex-shrink: 0; }
.arch-main { flex: 1; min-width: 0; }
.arch-main b { display: block; font-weight: var(--weight-bold); }
.arch-main span { font-size: var(--text-xs); color: var(--text-muted); }
.arch-meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.arch-actions { display: flex; gap: var(--space-2); }

/* الإعدادات */
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: start; }
.set-account { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.avatar-lg { width: 52px; height: 52px; font-size: var(--text-base); }
.set-account b { display: block; }
.set-account span { font-size: var(--text-xs); color: var(--text-muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }
.set-row + .set-row { border-top: var(--border-width) solid var(--border-subtle); }
.set-row .lbl b { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.set-row .lbl span { font-size: var(--text-xs); color: var(--text-muted); }
.switch { position: relative; width: 42px; height: 24px; border: none; border-radius: var(--radius-full); background: var(--surface-3); cursor: pointer; flex-shrink: 0; transition: background var(--duration-base) var(--ease-soft); }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--surface-1); box-shadow: var(--shadow-1); transition: translate var(--duration-base) var(--ease-out); }
.switch[aria-pressed="true"] { background: var(--action-bg); }
.switch[aria-pressed="true"]::after { translate: -18px 0; }

/* تبويبات الإشعارات + الفرز */
.notif-tabs { margin-bottom: var(--space-2); }
.notif-tabs .seg-item { height: 26px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.menu-item.on { background: var(--surface-2); color: var(--text-primary); }
.sort-btn .chev { opacity: 0.65; }
.card.dragging { opacity: 0.35; }

/* الجولة التعريفية */
.tour-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 95; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-soft), visibility var(--duration-base); }
.tour-scrim.open { opacity: 1; visibility: visible; }
.tour-hl { position: relative; z-index: 96; box-shadow: var(--focus-ring), var(--shadow-3); }
.search-wrap.tour-hl { border-radius: var(--radius-full); }
.tour-pop { position: fixed; z-index: 97; width: 300px; max-width: calc(100vw - 32px); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-4); padding: var(--space-5); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity var(--duration-base) var(--ease-soft), translate var(--duration-base) var(--ease-soft), visibility var(--duration-base); }
.tour-pop.open { opacity: 1; visibility: visible; translate: 0 0; }
.tour-pop b { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-black); margin-bottom: var(--space-1); }
.tour-pop p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tour-btns { display: flex; gap: var(--space-2); }
.tour-dots { display: flex; gap: var(--space-1); }
.tour-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--surface-3); }
.tour-dots i.on { background: var(--action-bg); }

/* إصلاحات الجوال — يجب أن تبقى آخر الملف لتتغلب على القواعد الأساسية أعلاه */
@media (max-width: 760px) {
  .bnav { display: flex; }
  .people-grid, .set-grid, .grid, .stats-row, .skel-row, .skel-grid, .type-grid { grid-template-columns: minmax(0, 1fr); }
  .person, .panel, .card, .stat, .set-row, .set-row .lbl, .arch-main, .view, main, .dash-stack, .duo-grid { min-width: 0; }
  .seg { max-width: 100%; overflow-x: auto; }
  .set-row { flex-wrap: wrap; }
}

/* ============ لوحة المفاتيح والأوامر ============ */
.kbd { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-sm); padding: 2px 7px; box-shadow: inset 0 -1px 0 var(--border-strong); }
.search-kbd { position: absolute; inset-inline-end: var(--space-3); top: 50%; translate: 0 -50%; pointer-events: none; }
.search-wrap .control { padding-inline-end: var(--space-10); }
.pal-scrim, .scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); display: flex; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-soft), visibility var(--duration-base); z-index: 85; }
.pal-scrim.open, .scrim.open { opacity: 1; visibility: visible; }
.pal-scrim { justify-content: center; align-items: flex-start; padding-top: 14vh; }
.palette { width: 580px; max-width: calc(100vw - 48px); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-4); overflow: hidden; translate: 0 -10px; transition: translate var(--duration-base) var(--ease-out); }
.pal-scrim.open .palette { translate: 0 0; }
.pal-search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border-subtle); }
.pal-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-base); color: var(--text-primary); }
.pal-search input::placeholder { color: var(--text-muted); }
.pal-list { max-height: 330px; overflow-y: auto; padding: var(--space-2); }
.pal-group { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); padding: var(--space-2) var(--space-3); }
.pal-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.pal-item b { color: var(--text-primary); font-weight: var(--weight-medium); }
.pal-item.sel { background: var(--surface-2); box-shadow: var(--shadow-1); }
.pal-item .hint { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); }
.pal-empty { padding: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.pal-foot { display: flex; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }

/* ============ نافذة مشروع جديد ============ */
.scrim { justify-content: center; align-items: center; }
.modal { width: 520px; max-width: calc(100vw - 48px); background: var(--surface-1); border-radius: var(--radius-3xl); box-shadow: var(--shadow-4); padding: var(--space-8); translate: 0 12px; transition: translate var(--duration-base) var(--ease-out); }
.scrim.open .modal { translate: 0 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.modal-head b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-black); }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin: var(--space-4) 0 var(--space-2); }
.control-rect { border-radius: var(--radius-lg); padding: 0 var(--space-4); }
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.type-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); background: var(--surface-2); border: none; border-radius: var(--radius-xl); cursor: pointer; font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft); }
.type-tile:hover { background: var(--surface-3); color: var(--text-primary); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.type-tile:active { transform: scale(0.98); }
.seg { display: flex; gap: var(--space-1); background: var(--surface-2); border-radius: var(--radius-full); padding: var(--space-1); width: max-content; max-width: 100%; }
.seg-item { border: none; cursor: pointer; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); height: var(--control-height-sm); padding: 0 var(--space-4); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft); white-space: nowrap; }
.seg-item:hover { color: var(--text-primary); }
.seg-item[aria-pressed="true"] { background: var(--action-bg); color: var(--action-fg); box-shadow: var(--shadow-1); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-8); }

/* ============ قائمة بطاقة المشروع ============ */
.kebab { border: none; background: transparent; color: var(--text-muted); width: 28px; height: 28px; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-inline-start: var(--space-1); opacity: 0; transition: opacity var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.card:hover .kebab, .card:focus-within .kebab, .kebab:focus-visible, .kebab.open { opacity: 1; }
.kebab:hover, .kebab.open { background: var(--surface-3); color: var(--text-primary); }
.card-menu { position: fixed; z-index: 80; width: 200px; background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); padding: var(--space-2); opacity: 0; visibility: hidden; translate: 0 -4px; transition: opacity var(--duration-fast) var(--ease-soft), translate var(--duration-fast) var(--ease-soft), visibility var(--duration-fast); }
.card-menu.open { opacity: 1; visibility: visible; translate: 0 0; }
.menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; border: none; background: transparent; font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); padding: var(--space-3); border-radius: var(--radius-lg); cursor: pointer; text-align: start; transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.menu-item:hover { background: var(--surface-2); color: var(--text-primary); }
.menu-item.danger { color: var(--danger-fg); }
.menu-item.danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.card.is-pinned { order: -1; }
.card.fresh { animation: rvIn var(--duration-slow) var(--ease-out) both; }
.card.flash { animation: flashRing 1.1s var(--ease-soft) 2; }
@keyframes flashRing { 0%, 100% { box-shadow: var(--shadow-1); } 50% { box-shadow: var(--focus-ring), var(--shadow-3); } }