:root {
      --bg: #f4f5fb;
        --card: #ffffff;
          --text: #1f2430;
            --muted: #6b7280;
              --border: #e5e7eb;
                --primary: #4f46e5;
                  --primary-dark: #4338ca;
                    --danger: #dc2626;
                      --success: #16a34a;
                        --warning: #d97706;
                          --radius: 14px;
                            --shadow: 0 2px 10px rgba(20, 20, 43, 0.06);
}

* { box-sizing: border-box; }

html, body {
      margin: 0;
        padding: 0;
          height: 100%;
            background: var(--bg);
              color: var(--text);
                font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
                  direction: rtl;
                    -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select {
      font-family: inherit;
        direction: rtl;
}

#app {
      min-height: 100%;
        display: flex;
          flex-direction: column;
}

.auth-wrap {
      min-height: 100vh;
        display: flex;
          align-items: center;
            justify-content: center;
              padding: 20px;
}
.auth-card {
      width: 100%;
        max-width: 380px;
          background: var(--card);
            border-radius: var(--radius);
              box-shadow: var(--shadow);
                padding: 28px 24px;
}
.auth-card h1 {
      font-size: 22px;
        margin: 0 0 6px;
          text-align: center;
}
.auth-card p.sub {
      text-align: center;
        color: var(--muted);
          margin: 0 0 20px;
            font-size: 14px;
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.field input, .field textarea, .field select {
      width: 100%;
        padding: 11px 12px;
          border: 1px solid var(--border);
            border-radius: 10px;
              font-size: 15px;
                background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
      outline: none;
        border-color: var(--primary);
}
.btn {
      display: inline-flex;
        align-items: center;
          justify-content: center;
            gap: 6px;
              border: none;
                border-radius: 10px;
                  padding: 11px 16px;
                    font-size: 14px;
                      font-weight: 600;
                        cursor: pointer;
                          background: var(--primary);
                            color: #fff;
                              transition: background .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn.block { width: 100%; }
.btn.secondary { background: #eef0fb; color: var(--primary-dark); }
.btn.danger { background: #fdecec; color: var(--danger); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.error-msg {
      background: #fdecec;
        color: var(--danger);
          padding: 10px 12px;
            border-radius: 10px;
              font-size: 13px;
                margin-bottom: 14px;
}
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

.layout {
      display: flex;
        flex: 1;
          min-height: 100vh;
}
.sidebar {
      width: 240px;
        background: var(--card);
          border-left: 1px solid var(--border);
            padding: 20px 14px;
              display: flex;
                flex-direction: column;
                  gap: 4px;
}
.brand {
      font-weight: 800;
        font-size: 18px;
          margin-bottom: 18px;
            padding: 0 6px;
              color: var(--primary-dark);
}
.nav-item {
      display: flex;
        align-items: center;
          gap: 10px;
            padding: 10px 12px;
              border-radius: 10px;
                color: var(--text);
                  cursor: pointer;
                    font-size: 14px;
                      user-select: none;
}
.nav-item:hover { background: #f1f1fb; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-sep { margin: 14px 6px 6px; font-size: 12px; color: var(--muted); }
.project-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.main {
      flex: 1;
        padding: 22px 26px 90px;
          max-width: 900px;
            margin: 0 auto;
              width: 100%;
}
.topbar {
      display: none;
        align-items: center;
          justify-content: space-between;
            padding: 14px 16px;
              background: var(--card);
                border-bottom: 1px solid var(--border);
                  position: sticky;
                    top: 0;
                      z-index: 5;
}
.page-title {
      font-size: 20px;
        font-weight: 700;
          margin: 0 0 18px;
}
.section-title {
      font-size: 14px;
        font-weight: 700;
          color: var(--muted);
            margin: 22px 0 10px;
}

.card {
      background: var(--card);
        border-radius: var(--radius);
          box-shadow: var(--shadow);
            padding: 16px;
              margin-bottom: 12px;
}

.task-item {
      display: flex;
        align-items: flex-start;
          gap: 10px;
            padding: 12px 4px;
              border-bottom: 1px solid var(--border);
}
.task-item:last-child { border-bottom: none; }
.task-check {
      width: 22px;
        height: 22px;
          border-radius: 50%;
            border: 2px solid var(--border);
              flex-shrink: 0;
                cursor: pointer;
                  display: flex;
                    align-items: center;
                      justify-content: center;
                        margin-top: 2px;
                          background: #fff;
}
.task-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-title { font-size: 14.5px; font-weight: 600; word-break: break-word; }
.task-title.done { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.badge {
      font-size: 11px;
        padding: 3px 8px;
          border-radius: 999px;
            background: #f1f1fb;
              color: var(--primary-dark);
                white-space: nowrap;
}
.badge.overdue { background: #fdecec; color: var(--danger); }
.badge.high { background: #fdecec; color: var(--danger); }
.badge.medium { background: #fff7e6; color: var(--warning); }
.badge.low { background: #eafaf0; color: var(--success); }

.empty-state {
      text-align: center;
        color: var(--muted);
          padding: 40px 10px;
            font-size: 14px;
}

.fab {
      position: fixed;
        left: 20px;
          bottom: 90px;
            width: 54px;
              height: 54px;
                border-radius: 50%;
                  background: var(--primary);
                    color: #fff;
                      font-size: 26px;
                        border: none;
                          box-shadow: 0 6px 16px rgba(79,70,229,.4);
                            cursor: pointer;
                              z-index: 20;
}

.bottom-nav {
      display: none;
        position: fixed;
          bottom: 0; right: 0; left: 0;
            background: var(--card);
              border-top: 1px solid var(--border);
                padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
                  z-index: 15;
}
.bottom-nav-inner { display: flex; justify-content: space-around; }
.bn-item {
      display: flex;
        flex-direction: column;
          align-items: center;
            gap: 2px;
              font-size: 10.5px;
                color: var(--muted);
                  padding: 6px 8px;
                    border-radius: 10px;
                      cursor: pointer;
}
.bn-item.active { color: var(--primary); font-weight: 700; }
.bn-icon { font-size: 19px; }

.modal-backdrop {
      position: fixed; inset: 0;
        background: rgba(15,15,30,.45);
          display: flex;
            align-items: flex-end;
              justify-content: center;
                z-index: 50;
}
.modal {
      background: var(--card);
        width: 100%;
          max-width: 480px;
            border-radius: 18px 18px 0 0;
              padding: 20px;
                max-height: 88vh;
                  overflow-y: auto;
}
@media (min-width: 720px) {
      .modal-backdrop { align-items: center; }
        .modal { border-radius: var(--radius); }
}
.modal h2 { margin: 0 0 16px; font-size: 17px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
      padding: 7px 14px;
        border-radius: 999px;
          border: 1px solid var(--border);
            font-size: 13px;
              cursor: pointer;
                background: #fff;
}
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.checklist-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.checklist-row input[type="text"] { flex: 1; }
.icon-btn {
      background: transparent; border: none; cursor: pointer;
        color: var(--muted); font-size: 16px; padding: 4px 6px;
}
.icon-btn:hover { color: var(--danger); }

.note-card { cursor: pointer; }
.note-title { font-weight: 700; margin-bottom: 4px; }
.note-body { color: var(--muted); font-size: 13.5px; white-space: pre-wrap; }
.note-date { font-size: 11px; color: var(--muted); margin-top: 8px; }

.token-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.token-value {
      background: #f4f5fb;
        border-radius: 10px;
          padding: 10px;
            font-family: monospace;
              font-size: 12.5px;
                word-break: break-all;
                  margin: 10px 0;
                    user-select: all;
}
.toast {
      position: fixed;
        bottom: 100px;
          left: 50%;
            transform: translateX(-50%);
              background: #1f2430;
                color: #fff;
                  padding: 10px 18px;
                    border-radius: 999px;
                      font-size: 13px;
                        z-index: 60;
}
.link-btn { background:none;border:none;color:var(--primary-dark);font-size:13px;cursor:pointer;padding:0; }

@media (max-width: 860px) {
      .sidebar { display: none; }
        .topbar { display: flex; }
          .bottom-nav { display: block; }
            .main { padding: 16px 14px 100px; max-width: 100%; }
              .fab { bottom: 76px; }
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}