[v-cloak] { display: none; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Tajawal', system-ui, sans-serif; }
    :focus-visible { outline: 3px solid rgba(16, 185, 129, .5); outline-offset: 2px; }

    .glass { background: #ffffff; }
    .dark .glass { background: #0f172a; }

    .custom-scroll { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
    .custom-scroll::-webkit-scrollbar { width: 6px; height: 7px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }

    /* ---------- الأزرار ---------- */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 1rem; padding: .6rem .95rem; font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .18s, transform .18s, box-shadow .18s; }
    .btn:active { transform: scale(.98); }
    .btn-primary { background: #059669; color: #fff; box-shadow: 0 6px 16px -6px rgba(5, 150, 105, .6); }
    .btn-primary:hover { background: #047857; }
    .btn-indigo { background: #eef2ff; color: #4338ca; }
    .btn-indigo:hover { background: #e0e7ff; }
    .btn-today { background: #ecfdf5; color: #065f46; }
    .btn-today:hover { background: #d1fae5; }
    .btn-ghost { background: transparent; color: #334155; }
    .btn-ghost:hover { background: #e2e8f0; }
    .btn-danger { background: #e11d48; color: #fff; }
    .btn-danger:hover { background: #be123c; }
    .btn-block { flex: 1; }
    .dark .btn-indigo { background: rgba(49, 46, 129, .5); color: #c7d2fe; }
    .dark .btn-today { background: rgba(6, 78, 59, .5); color: #6ee7b7; }
    .dark .btn-ghost { color: #e2e8f0; }
    .dark .btn-ghost:hover { background: #1e293b; }

    .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; font-size: 13px; transition: background-color .15s; }
    .icon-btn:hover:not(:disabled) { background: rgba(148, 163, 184, .18); }
    .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
    .icon-btn.danger:hover:not(:disabled) { background: rgba(244, 63, 94, .12); }

    .nav-arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; font-size: 22px; font-weight: 900; color: #334155; transition: background-color .18s, transform .18s; }
    .nav-arrow:hover { background: rgba(16, 185, 129, .14); transform: scale(1.05); }
    .nav-arrow.small { width: 30px; height: 30px; font-size: 12px; }
    .dark .nav-arrow { color: #e2e8f0; }

    .category-chip { white-space: nowrap; flex-shrink: 0; border-radius: 12px; padding: .5rem .75rem; font-size: .75rem; font-weight: 700; transition: background-color .15s, color .15s; }

    /* ---------- الحقول ---------- */
    .field-label { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; color: #334155; }
    .dark .field-label { color: #cbd5e1; }
    .field-input { width: 100%; min-width: 0; border-radius: 1rem; border: 1px solid #e2e8f0; background: #f8fafc; padding: .75rem 1rem; font-size: .875rem; outline: none; transition: border-color .15s; }
    .field-input:focus { border-color: #10b981; }
    .field-input.compact { padding: .5rem .75rem; border-radius: .75rem; }
    .dark .field-input { border-color: #334155; background: #1e293b; color: #f1f5f9; }

    /* ---------- الجدول ---------- */
    .sticky-name { position: sticky; right: 0; z-index: 2; }
    .day-cell { min-width: 34px; }
    .check-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 8px; font-size: 11px; font-weight: 900; transition: background-color .15s, transform .15s; }
    .check-btn:hover:not(:disabled) { transform: scale(1.08); }
    .check-btn:disabled { cursor: not-allowed; opacity: .35; }
    .check-done { background: #10b981; color: #fff; box-shadow: 0 2px 6px -2px rgba(16, 185, 129, .7); }
    .check-todo { background: #f1f5f9; color: transparent; }
    .check-todo:hover:not(:disabled) { background: #e2e8f0; }
    .dark .check-todo { background: #1e293b; }
    .dark .check-todo:hover:not(:disabled) { background: #334155; }
    .is-today { background: rgba(16, 185, 129, .16); color: #047857; }
    .dark .is-today { background: rgba(16, 185, 129, .22); color: #6ee7b7; }
    .is-flash { animation: todayFlash 1.6s ease; }
    @keyframes todayFlash { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 25%, 75% { box-shadow: inset 0 -3px 0 0 #10b981; } }

    .habit-row { transition: background-color .15s, opacity .15s; }
    .habit-row.is-pressing { outline: 2px solid rgba(16, 185, 129, .35); outline-offset: -2px; }
    .habit-row.is-dragging { opacity: .75; outline: 2px dashed #10b981; outline-offset: -2px; }
    .habit-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 32px; flex-shrink: 0; border-radius: 10px; background: rgba(148, 163, 184, .12); color: #64748b; font-size: 18px; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .habit-drag-handle:active { cursor: grabbing; background: rgba(16, 185, 129, .2); color: #059669; }


    .heat-cell { width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; }
    .heat-empty { visibility: hidden; }
    .heat-future { background: transparent; border: 1px dashed #cbd5e1; }
    .heat-0 { background: #e2e8f0; }
    .heat-1 { background: #a7f3d0; }
    .heat-2 { background: #34d399; }
    .heat-3 { background: #10b981; }
    .heat-4 { background: #047857; }
    .heat-today { box-shadow: 0 0 0 2px #f59e0b; }
    .heat-off { background: transparent; }
    .check-off { background: transparent; color: #cbd5e1; border: 1px dashed #cbd5e1; }
    .dark .check-off { border-color: #334155; color: #475569; }
    .dark .heat-future { border-color: #334155; }
    .dark .heat-0 { background: #1e293b; }
    .dark .heat-1 { background: #065f46; }
    .dark .heat-2 { background: #059669; }
    .dark .heat-3 { background: #10b981; }
    .dark .heat-4 { background: #6ee7b7; }

    .day-note-btn { position: relative; font: inherit; color: inherit; padding: 2px 4px; border-radius: 6px; background: transparent; cursor: pointer; }
    .day-note-btn:hover { background: rgba(148, 163, 184, .22); }
    .note-dot { position: absolute; top: 1px; inset-inline-end: 1px; width: 6px; height: 6px; border-radius: 999px; background: #f59e0b; }

    @media print {
      body { background: #fff !important; }
      .btn, .icon-btn, .nav-arrow, .habit-drag-handle, .no-print, label, input, select, footer, [role="status"] { display: none !important; }
      .glass { background: #fff !important; box-shadow: none !important; border-color: #cbd5e1 !important; }
      .page-scroll, .custom-scroll { overflow: visible !important; }
      table { font-size: 9px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }

/* ===== بطاقات الموبايل ===== */
.card-day { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 800; flex-shrink: 0; transition: transform .15s, background-color .15s; }
.card-day:hover:not(:disabled) { transform: scale(1.06); }
.card-day:disabled { cursor: not-allowed; }
.card-done { background: #10b981; color: #fff; }
.card-todo { background: #f1f5f9; color: #334155; }
.card-off { background: transparent; color: #cbd5e1; border: 1px dashed #cbd5e1; }
.card-future { background: transparent; color: #cbd5e1; opacity: .5; }
.dark .card-todo { background: #1e293b; color: #cbd5e1; }
.dark .card-off { border-color: #334155; color: #475569; }

/* ===== القوائم المنسدلة (أدوات / ملخصات) ===== */
.tools-menu { position: relative; display: inline-block; }
.tools-menu > summary { list-style: none; }
.tools-menu > summary::-webkit-details-marker { display: none; }
.tools-panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0;
  min-width: 230px; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border-radius: 18px; background: #ffffff; border: 1px solid #e2e8f0;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25);
}
.tools-panel > * { width: 100%; justify-content: flex-start; }
.dark .tools-panel { background: #0f172a; border-color: #1e293b; }

/* ===== سرعة اللمس: بدون تأخير 300ms، وما يتأثرش بمقبض السحب ===== */
button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.habit-drag-handle { touch-action: none; }

/* ===== أقسام ثقيلة بتترسم لما تظهر بس ===== */
.heavy-section { content-visibility: auto; contain-intrinsic-size: 0 480px; }

/* ===== مظهر أنظف على الموبايل ===== */
@media (max-width: 640px) {
  .btn { padding: .5rem .7rem; font-size: .8rem; }
  .tools-panel { min-width: 200px; inset-inline-start: auto; inset-inline-end: 0; }
}